保存规则库 YAML 维护改造进展

app/components/layout/Layout.tsx

@@ -26,6 +26,30 @@ interface Match {
   data: unknown;
 }
 
+type RulesTestDetailData = {
+  pack?: {
+    documentType?: string;
+    mainType?: string;
+    fields?: unknown[];
+    subDocuments?: unknown[];
+    visualElements?: unknown[];
+  };
+};
+
+type RulesTestListData = {
+  filters?: {
+    documentType?: string;
+    mainType?: string;
+    subtype?: string;
+    ruleGroup?: string;
+    keyword?: string;
+  };
+  options?: {
+    subtypes?: string[];
+    ruleGroups?: string[];
+  };
+};
+
 export function Layout({ children, userRole = 'developer' as UserRole, frontendJWT = '', isMobile = false }: LayoutProps) {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [effectiveUserRole, setEffectiveUserRole] = useState<UserRole>(userRole);
@@ -121,7 +145,31 @@ export function Layout({ children, userRole = 'developer' as UserRole, frontendJ
   if (shouldHideSidebar) {
     return <>{children}</>;
   }
-  
+
+  const isRulesTestList = location.pathname.startsWith('/rulesTest/list');
+  const isRulesTestDetail = location.pathname.startsWith('/rulesTest/detail');
+  const isRulesTestTopbarPage = isRulesTestList || isRulesTestDetail;
+  const rulesTestListData = matches.find(match => match.pathname.startsWith('/rulesTest/list'))?.data as RulesTestListData | undefined;
+  const rulesTestDetailData = matches.find(match => match.pathname.startsWith('/rulesTest/detail'))?.data as RulesTestDetailData | undefined;
+  const listFilters = rulesTestListData?.filters || {};
+  const listOptions = rulesTestListData?.options || {};
+  const detailPack = rulesTestDetailData?.pack;
+  const isContractDetail = !!detailPack?.documentType?.includes('合同');
+  const isCaseFileDetail = !!detailPack?.documentType?.includes('案卷');
+  const showFieldNav = isContractDetail && (detailPack?.fields?.length || 0) > 0;
+  const showSubDocumentNav = isCaseFileDetail && (detailPack?.subDocuments?.length || 0) > 0;
+  const showVisualNav = (detailPack?.visualElements?.length || 0) > 0;
+  const rulesListHref = detailPack?.documentType
+    ? `/rulesTest/list?documentType=${encodeURIComponent(detailPack.documentType)}${detailPack.mainType ? `&mainType=${encodeURIComponent(detailPack.mainType)}` : ''}`
+    : '/rulesTest/list';
+  const listScopeText = [
+    listFilters.documentType,
+    listFilters.mainType && listFilters.mainType !== listFilters.documentType ? listFilters.mainType : ''
+  ].filter(Boolean).join(' / ');
+  const submitTopbarFilter = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    event.currentTarget.form?.requestSubmit();
+  };
+
   return (
     <div className="layout-container">
       {/* 侧边栏始终保留，不再使用条件渲染 */}
@@ -131,8 +179,111 @@ export function Layout({ children, userRole = 'developer' as UserRole, frontendJ
         userRole={effectiveUserRole}
         frontendJWT={effectiveFrontendJWT}
       />
-      
-      <div className={`main-content ${sidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
+
+      {/* 规则列表页顶部栏 */}
+      {isRulesTestList && (
+        <div className={`page-topbar rules-list-topbar ${sidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
+          <div className="topbar-content">
+            <div className="topbar-left">
+              <span className="topbar-icon" aria-hidden="true">
+                <i className="ri-list-settings-line"></i>
+              </span>
+              <div className="topbar-heading">
+                <h2 className="topbar-title">评查规则列表</h2>
+                <span className="topbar-breadcrumb">
+                  <span>评查规则库</span>
+                  {listScopeText && (
+                    <>
+                      <span className="separator">/</span>
+                      <span>{listScopeText}</span>
+                    </>
+                  )}
+                </span>
+              </div>
+            </div>
+            <div className="topbar-right">
+              <a className="topbar-action secondary" href="/rules/list">
+                <i className="ri-history-line"></i>
+                <span>查看旧版本</span>
+              </a>
+            </div>
+          </div>
+          <form method="get" action="/rulesTest/list" className="topbar-filter-strip">
+            <input type="hidden" name="documentType" defaultValue={listFilters.documentType || ''} />
+            {listFilters.mainType && <input type="hidden" name="mainType" defaultValue={listFilters.mainType} />}
+            <label className="topbar-filter-field">
+              <span>子类型</span>
+              <select name="subtype" value={listFilters.subtype || ''} onChange={submitTopbarFilter}>
+                <option value="">全部子类型</option>
+                {(listOptions.subtypes || []).map(option => (
+                  <option key={option} value={option}>{option}</option>
+                ))}
+              </select>
+            </label>
+            <label className="topbar-filter-field">
+              <span>规则组</span>
+              <select name="ruleGroup" value={listFilters.ruleGroup || ''} onChange={submitTopbarFilter}>
+                <option value="">全部规则组</option>
+                {(listOptions.ruleGroups || []).map(group => (
+                  <option key={group} value={group}>{group}</option>
+                ))}
+              </select>
+            </label>
+            <label className="topbar-filter-field topbar-filter-field-search">
+              <span>搜索</span>
+              <input
+                key={listFilters.keyword || 'empty-keyword'}
+                name="keyword"
+                defaultValue={listFilters.keyword || ''}
+                placeholder="规则名称 / 编码 / 规则组"
+              />
+            </label>
+            <button className="topbar-action" type="submit">
+              <i className="ri-search-line"></i>
+              <span>筛选</span>
+            </button>
+          </form>
+        </div>
+      )}
+
+      {/* 规则详情页顶部栏 */}
+      {isRulesTestDetail && (
+        <div className={`page-topbar ${sidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
+          <div className="topbar-content">
+            <div className="topbar-left">
+              <span className="topbar-icon" aria-hidden="true">
+                <i className="ri-file-settings-line"></i>
+              </span>
+              <div className="topbar-heading">
+                <h2 className="topbar-title">规则配置详情</h2>
+                <span className="topbar-breadcrumb">
+                <a href={rulesListHref}>规则列表</a>
+                  <span className="separator">/</span>
+                  <span>配置详情</span>
+                </span>
+              </div>
+            </div>
+            <div className="topbar-right">
+              <a className="topbar-action" href={rulesListHref}>
+                <i className="ri-arrow-left-line"></i>
+                <span>返回列表</span>
+              </a>
+              <a className="topbar-action secondary" href="/rules/list">
+                <i className="ri-history-line"></i>
+                <span>查看旧版本</span>
+              </a>
+            </div>
+          </div>
+          <div className="topbar-nav">
+            {showFieldNav && <a className="topbar-nav-link" href="#fields"><i className="ri-input-field"></i>字段抽取</a>}
+            {showSubDocumentNav && <a className="topbar-nav-link" href="#sub-documents"><i className="ri-file-list-3-line"></i>案卷文书</a>}
+            {showVisualNav && <a className="topbar-nav-link" href="#visual-elements"><i className="ri-stamp-line"></i>视觉要素</a>}
+            <a className="topbar-nav-link" href="#rules"><i className="ri-list-check-3"></i>评查规则</a>
+          </div>
+        </div>
+      )}
+
+      <div className={`main-content ${sidebarCollapsed ? 'sidebar-collapsed' : ''} ${isRulesTestDetail ? 'rules-detail-main' : ''} ${isRulesTestList ? 'rules-list-main' : ''}`}>
         {/* 应用模块选择器 */}
         {/* <div className="app-module-selector py-2 px-4 border-b border-gray-100 flex items-center">
           {APP_MODULES.map(app => (
@@ -150,10 +301,10 @@ export function Layout({ children, userRole = 'developer' as UserRole, frontendJ
         </div> */}
         
         <div className={`content-container${shouldNoPadding ? ' !p-0' : ''}`}>
-          {!shouldHideBreadcrumb && <Breadcrumb />}
+          {!shouldHideBreadcrumb && !isRulesTestTopbarPage && <Breadcrumb />}
           {children}
         </div>
       </div>
     </div>
   );
-} 
+}