fix: restore reviews detail layout and leaudit data wiring

app/components/reviews/leftColumn/RulesDirectory.tsx

@@ -1,8 +1,8 @@
 /**
- * 左栏 · 规则目录
- * 显示文件名、分数进度条、搜索、评查点分组列表
+ * 左栏 / 规则目录
+ * 展示文件信息、分数进度、搜索与评查点列表。
  */
-import { useState, useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import type { ReviewPoint } from '../ReviewPointsList';
 
 interface Statistics {
@@ -24,14 +24,17 @@ interface RulesDirectoryProps {
 }
 
 type PointStatus = 'pass' | 'warn' | 'fail' | 'skipped';
+type StatusFilter = 'all' | PointStatus;
 
-function classifyPoint(p: ReviewPoint): PointStatus {
-  if (p.status === 'notApplicable' || p.status === 'not_applicable') return 'skipped';
-  if (p.result === true || (p.result === undefined && p.status === 'success')) return 'pass';
-  if (p.result === false) {
-    if (p.status === 'error') return 'fail';
-    if (p.status === 'warning' || p.status === 'info') return 'warn';
+function classifyPoint(point: ReviewPoint): PointStatus {
+  if (point.status === 'notApplicable' || point.status === 'not_applicable') return 'skipped';
+  if (point.result === true || (point.result === undefined && point.status === 'success')) return 'pass';
+  if (point.result === false) {
+    if (point.status === 'error') return 'fail';
+    if (point.status === 'warning' || point.status === 'info') return 'warn';
   }
+  if (point.status === 'error') return 'fail';
+  if (point.status === 'warning' || point.status === 'info') return 'warn';
   return 'pass';
 }
 
@@ -42,6 +45,53 @@ const STATUS_ICON: Record<PointStatus, { icon: string; color: string }> = {
   skipped: { icon: 'ri-forbid-2-line', color: 'text-slate-400' },
 };
 
+const FILTER_CHIPS: Array<{
+  key: StatusFilter;
+  label: string;
+  getClassName: (active: boolean) => string;
+}> = [
+  {
+    key: 'all',
+    label: '全部',
+    getClassName: (active) =>
+      active
+        ? 'bg-slate-700 text-white border-slate-700'
+        : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50',
+  },
+  {
+    key: 'warn',
+    label: '提醒',
+    getClassName: (active) =>
+      active
+        ? 'bg-amber-500 text-white border-amber-500'
+        : 'bg-white text-amber-700 border-amber-200 hover:bg-amber-50',
+  },
+  {
+    key: 'fail',
+    label: '问题',
+    getClassName: (active) =>
+      active
+        ? 'bg-red-500 text-white border-red-500'
+        : 'bg-white text-red-700 border-red-200 hover:bg-red-50',
+  },
+  {
+    key: 'pass',
+    label: '通过',
+    getClassName: (active) =>
+      active
+        ? 'bg-emerald-500 text-white border-emerald-500'
+        : 'bg-white text-emerald-700 border-emerald-200 hover:bg-emerald-50',
+  },
+  {
+    key: 'skipped',
+    label: '跳过',
+    getClassName: (active) =>
+      active
+        ? 'bg-slate-500 text-white border-slate-500'
+        : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-100',
+  },
+];
+
 function RuleListItem({
   point,
   isActive,
@@ -53,33 +103,28 @@ function RuleListItem({
   showCategory?: boolean;
   onClick: () => void;
 }) {
-  const cls = classifyPoint(point);
-  const s = STATUS_ICON[cls];
+  const status = classifyPoint(point);
+  const statusMeta = STATUS_ICON[status];
+  const trailingLabel = showCategory ? point.groupName : point.pointCode || point.pointId || '';
 
   return (
     <button
       type="button"
       className={`rule-item relative w-full py-2 px-3 text-left transition ${
-        isActive ? 'bg-[rgba(0,104,74,0.08)]' : 'hover:bg-slate-50'
+        isActive ? 'bg-[#e8f3ef]' : 'hover:bg-slate-50'
       }`}
       onClick={onClick}
     >
-      {isActive && (
-        <span className="absolute left-0 top-2 bottom-2 w-0.5 bg-[#00684a] rounded-r" />
-      )}
+      {isActive && <span className="absolute left-0 top-2 bottom-2 w-0.5 bg-[#00684a] rounded-r" />}
       <div className="flex items-center gap-2 min-w-0">
-        <i className={`${s.icon} ${s.color} shrink-0 text-[14px]`} />
+        <i className={`${statusMeta.icon} ${statusMeta.color} shrink-0 text-[14px]`} />
         <span
-          className={`text-[12.5px] text-slate-800 truncate flex-1 ${
-            isActive ? 'font-semibold' : ''
-          }`}
+          className={`text-[12.5px] text-slate-800 truncate flex-1 ${isActive ? 'font-semibold' : ''}`}
         >
           {point.pointName}
         </span>
-        {showCategory && (
-          <span className="shrink-0 text-[10px] text-slate-400">
-            {point.groupName}
-          </span>
+        {trailingLabel && (
+          <span className="shrink-0 text-[10px] text-slate-400 font-mono">{trailingLabel}</span>
         )}
       </div>
     </button>
@@ -95,60 +140,76 @@ export function RulesDirectory({
   onBack,
 }: RulesDirectoryProps) {
   const [searchText, setSearchText] = useState('');
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
   const [passOpen, setPassOpen] = useState(true);
-  const [openCategories, setOpenCategories] = useState<Set<string>>(new Set());
+  const [openCategories, setOpenCategories] = useState<Set<string>>(
+    () => new Set(reviewPoints.map((point) => point.groupName).filter(Boolean))
+  );
 
   const q = searchText.toLowerCase();
 
-  const matchSearch = (p: ReviewPoint) =>
+  const matchSearch = (point: ReviewPoint) =>
     !q ||
-    (p.pointName?.toLowerCase().includes(q)) ||
-    (p.pointCode?.toLowerCase().includes(q)) ||
-    (p.groupName?.toLowerCase().includes(q));
+    point.pointName?.toLowerCase().includes(q) ||
+    String(point.pointId ?? '').toLowerCase().includes(q) ||
+    String(point.pointCode ?? '').toLowerCase().includes(q) ||
+    point.groupName?.toLowerCase().includes(q);
 
-  const { needAttention, passed, passedByGroup } = useMemo(() => {
-    const filtered = reviewPoints.filter(matchSearch);
-    const needAttention = filtered.filter(
-      (p) => classifyPoint(p) !== 'pass' && classifyPoint(p) !== 'skipped'
+  const matchStatus = (point: ReviewPoint) =>
+    statusFilter === 'all' || classifyPoint(point) === statusFilter;
+
+  const statusCounts = useMemo(() => {
+    return reviewPoints.reduce<Record<StatusFilter, number>>(
+      (acc, point) => {
+        const status = classifyPoint(point);
+        acc.all += 1;
+        acc[status] += 1;
+        return acc;
+      },
+      { all: 0, pass: 0, warn: 0, fail: 0, skipped: 0 }
     );
-    const passed = filtered.filter((p) => classifyPoint(p) === 'pass');
+  }, [reviewPoints]);
+
+  const { needAttention, passed, passedByGroup, hasSearchResult } = useMemo(() => {
+    const filtered = reviewPoints.filter((point) => matchSearch(point) && matchStatus(point));
+    const needAttention = filtered.filter((point) => classifyPoint(point) !== 'pass');
+    const passed = filtered.filter((point) => classifyPoint(point) === 'pass');
 
     const passedByGroup: Record<string, ReviewPoint[]> = {};
-    passed.forEach((p) => {
-      const key = p.groupName || '未分组';
-      (passedByGroup[key] = passedByGroup[key] || []).push(p);
+    passed.forEach((point) => {
+      const key = point.groupName || '未分组';
+      (passedByGroup[key] = passedByGroup[key] || []).push(point);
     });
 
-    return { needAttention, passed, passedByGroup };
-  }, [reviewPoints, searchText]);
+    return {
+      needAttention,
+      passed,
+      passedByGroup,
+      hasSearchResult: filtered.length > 0,
+    };
+  }, [reviewPoints, q, statusFilter]);
 
-  // 计算进度条百分比
   const total = statistics.total || reviewPoints.length;
   const passPct = total > 0 ? (statistics.success / total) * 100 : 0;
   const warnPct = total > 0 ? (statistics.warning / total) * 100 : 0;
   const errPct = total > 0 ? (statistics.error / total) * 100 : 0;
-  const naPct =
-    total > 0
-      ? ((statistics.notApplicable || 0) / total) * 100
-      : 0;
+  const naPct = total > 0 ? ((statistics.notApplicable || 0) / total) * 100 : 0;
 
-  const attentionCount = needAttention.length;
-  const passedCount = passed.length;
+  const attentionCount = reviewPoints.filter((point) => classifyPoint(point) !== 'pass').length;
+  const passedCount = reviewPoints.filter((point) => classifyPoint(point) === 'pass').length;
 
-  const toggleCategory = (cat: string) => {
+  const toggleCategory = (category: string) => {
     setOpenCategories((prev) => {
       const next = new Set(prev);
-      if (next.has(cat)) next.delete(cat);
-      else next.add(cat);
+      if (next.has(category)) next.delete(category);
+      else next.add(category);
       return next;
     });
   };
 
   return (
     <aside className="border-r border-slate-200 bg-white flex flex-col min-h-0">
-      {/* 顶部区域: 文件名 + 分数 + 进度条 */}
       <div className="shrink-0 px-3 py-3 border-b border-slate-100 space-y-2">
-        {/* 文件名 */}
         <div className="flex items-center gap-1.5 text-[11px] text-slate-500">
           <button
             type="button"
@@ -162,7 +223,6 @@ export function RulesDirectory({
           <span className="flex-1 break-all">{fileName}</span>
         </div>
 
-        {/* 分数 + 进度条 */}
         <div className="flex items-center gap-2">
           <span className="text-[22px] font-semibold text-slate-900 tabular-nums leading-none">
             {Math.round(statistics.score)}
@@ -170,41 +230,26 @@ export function RulesDirectory({
           <span className="text-[10.5px] text-slate-400">/100</span>
           <div className="flex-1 h-1.5 rounded-full overflow-hidden bg-slate-100 ml-1">
             <div className="flex h-full">
-              <div
-                className="bg-emerald-500"
-                style={{ width: `${passPct}%` }}
-              />
-              <div
-                className="bg-amber-400"
-                style={{ width: `${warnPct}%` }}
-              />
-              <div
-                className="bg-red-500"
-                style={{ width: `${errPct}%` }}
-              />
-              <div
-                className="bg-slate-300"
-                style={{ width: `${naPct}%` }}
-              />
+              <div className="bg-emerald-500" style={{ width: `${passPct}%` }} />
+              <div className="bg-amber-400" style={{ width: `${warnPct}%` }} />
+              <div className="bg-red-500" style={{ width: `${errPct}%` }} />
+              <div className="bg-slate-300" style={{ width: `${naPct}%` }} />
             </div>
           </div>
         </div>
 
-        {/* 状态摘要 */}
         <div className="flex items-center justify-between text-[11px]">
           <span className="inline-flex items-center gap-1 text-orange-700 bg-orange-50 border border-orange-200 rounded px-1.5 py-0.5 font-medium">
-            <i className="ri-focus-3-line" />{' '}
+            <i className="ri-focus-3-line" />
             <span className="font-mono">{attentionCount}</span> 项需关注
           </span>
           <span className="text-slate-400">
-            <span className="font-mono text-slate-500">{passedCount}</span> /{' '}
-            {total} 已通过
+            <span className="font-mono text-slate-500">{passedCount}</span> / {total} 已通过
           </span>
         </div>
       </div>
 
-      {/* 搜索框 */}
-      <div className="shrink-0 p-2.5 border-b border-slate-100">
+      <div className="shrink-0 p-2.5 border-b border-slate-100 space-y-2">
         <div className="relative">
           <i className="ri-search-line absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-[14px]" />
           <input
@@ -214,33 +259,46 @@ export function RulesDirectory({
             onChange={(e) => setSearchText(e.target.value)}
           />
         </div>
+        <div className="flex flex-wrap gap-1">
+          {FILTER_CHIPS.map((filter) => {
+            const isActive = statusFilter === filter.key;
+            const count = statusCounts[filter.key];
+
+            return (
+              <button
+                key={filter.key}
+                type="button"
+                className={`inline-flex items-center gap-1 px-2 h-6 rounded border text-[11px] font-medium transition ${filter.getClassName(
+                  isActive
+                )}`}
+                onClick={() => setStatusFilter(filter.key)}
+              >
+                <span>{filter.label}</span>
+                <span className="font-mono text-[10px] opacity-80">{count}</span>
+              </button>
+            );
+          })}
+        </div>
       </div>
 
-      {/* 评查点列表 */}
       <div className="flex-1 min-h-0 overflow-y-auto scroll-slim py-1">
-        {/* 需关注 */}
-        {needAttention.length > 0 ? (
+        {needAttention.length > 0 && (
           <div>
-            {needAttention.map((p) => (
+            <div className="px-3 pt-1 pb-1 text-[10px] font-medium uppercase tracking-[0.18em] text-slate-400">
+              需关注
+            </div>
+            {needAttention.map((point) => (
               <RuleListItem
-                key={p.id}
-                point={p}
-                isActive={p.id === activeReviewPointResultId}
+                key={point.id}
+                point={point}
+                isActive={point.id === activeReviewPointResultId}
                 showCategory
-                onClick={() => onRuleSelect(p.id)}
+                onClick={() => onRuleSelect(point.id)}
               />
             ))}
           </div>
-        ) : (
-          <div className="text-center py-6 text-[12px] text-slate-400">
-            <i className="ri-check-double-line text-2xl text-emerald-400" />
-            <div className="mt-1">
-              {q ? '没有匹配' : '已全部处理'}
-            </div>
-          </div>
         )}
 
-        {/* 已通过 */}
         {passed.length > 0 && (
           <div className="border-t border-slate-200 mt-2">
             <button
@@ -255,40 +313,38 @@ export function RulesDirectory({
               />
               <i className="ri-checkbox-circle-fill text-emerald-500 text-[14px]" />
               <span className="text-[12px] text-slate-600">已通过</span>
-              <span className="ml-auto font-mono text-[11px] text-slate-400">
-                {passed.length}
-              </span>
+              <span className="ml-auto font-mono text-[11px] text-slate-400">{passed.length}</span>
             </button>
 
             {passOpen &&
-              Object.entries(passedByGroup).map(([cat, points]) => {
-                const catOpen = openCategories.has(cat);
+              Object.entries(passedByGroup).map(([category, points]) => {
+                const isOpen = openCategories.has(category);
                 return (
-                  <div key={cat}>
+                  <div key={category}>
                     <button
                       type="button"
                       className="w-full flex items-center gap-1.5 px-3 py-1.5 bg-slate-50/40 hover:bg-slate-100 text-left"
-                      onClick={() => toggleCategory(cat)}
+                      onClick={() => toggleCategory(category)}
                     >
                       <i
                         className={`ri-arrow-right-s-line text-slate-400 text-[11px] transition-transform ${
-                          catOpen ? 'rotate-90' : ''
+                          isOpen ? 'rotate-90' : ''
                         }`}
                       />
                       <span className="text-[10px] font-medium text-slate-500 uppercase tracking-wider">
-                        {cat}
+                        {category}
                       </span>
                       <span className="ml-auto font-mono text-[10px] text-slate-400">
                         {points.length}
                       </span>
                     </button>
-                    {catOpen &&
-                      points.map((p) => (
+                    {isOpen &&
+                      points.map((point) => (
                         <RuleListItem
-                          key={p.id}
-                          point={p}
-                          isActive={p.id === activeReviewPointResultId}
-                          onClick={() => onRuleSelect(p.id)}
+                          key={point.id}
+                          point={point}
+                          isActive={point.id === activeReviewPointResultId}
+                          onClick={() => onRuleSelect(point.id)}
                         />
                       ))}
                   </div>
@@ -296,6 +352,17 @@ export function RulesDirectory({
               })}
           </div>
         )}
+
+        {!hasSearchResult && (
+          <div className="text-center py-8 text-[12px] text-slate-400">
+            <i
+              className={`text-2xl ${
+                q ? 'ri-search-eye-line text-slate-300' : 'ri-check-double-line text-emerald-400'
+              }`}
+            />
+            <div className="mt-1">{q ? '没有匹配结果' : '当前筛选下暂无规则'}</div>
+          </div>
+        )}
       </div>
     </aside>
   );