完成智慧法务前端调整20250522，还有登录和主页需要完善

app/components/ui/DateRangePicker.tsx

@@ -13,6 +13,7 @@ export interface DateRangePickerProps {
   endId?: string;
   format?: string;
   placeholder?: string;
+  colorMode?: 'light' | 'dark' | 'auto';
 }
 
 export function links() {
@@ -57,7 +58,8 @@ export function DateRangePicker({
   startId = "date-start",
   endId = "date-end",
   format = "yyyy-MM-dd",
-  placeholder = "请选择时间"
+  placeholder = "请选择时间",
+  colorMode = 'auto'
 }: DateRangePickerProps) {
   // 使用ref获取input元素
   const startInputRef = useRef<HTMLInputElement>(null);
@@ -121,8 +123,15 @@ export function DateRangePicker({
     setFocusedInput(null);
   };
   
+  // 获取颜色模式类名
+  const getColorModeClass = () => {
+    if (colorMode === 'light') return 'color-mode-light';
+    if (colorMode === 'dark') return 'color-mode-dark';
+    return ''; // auto模式不添加额外类名
+  };
+  
   return (
-    <div className={`date-range-picker ${className}`}>
+    <div className={`date-range-picker ${getColorModeClass()} ${className}`}>
       <div className="date-range-fields">
         <div className="date-field">
           <label htmlFor={startId} className="date-label">{startLabel}</label>
@@ -200,7 +209,8 @@ export function SimpleDateRangePicker({
   startId = "date-start-simple",
   endId = "date-end-simple",
   format = "yyyy-MM-dd",
-  placeholder = "请选择时间"
+  placeholder = "请选择时间",
+  colorMode = 'auto'
 }: Omit<DateRangePickerProps, 'startLabel' | 'endLabel'>) {
   // 使用ref获取input元素
   const startInputRef = useRef<HTMLInputElement>(null);
@@ -264,8 +274,15 @@ export function SimpleDateRangePicker({
     setFocusedInput(null);
   };
   
+  // 获取颜色模式类名
+  const getColorModeClass = () => {
+    if (colorMode === 'light') return 'color-mode-light';
+    if (colorMode === 'dark') return 'color-mode-dark';
+    return ''; // auto模式不添加额外类名
+  };
+  
   return (
-    <div className={`date-range-picker simple-date-range-picker ${className}`}>
+    <div className={`date-range-picker simple-date-range-picker ${getColorModeClass()} ${className}`}>
       <div className="date-range-fields">
         <div 
           className={`date-input-wrapper ${focusedInput === startId ? 'focused' : ''}`} 

app/components/ui/FileTypeTag.tsx

@@ -6,6 +6,10 @@ export type FileType =
   | 'license' 
   | 'punishment' 
   | 'agreement' 
+  | 'contract'  // 合同文档
+  | 'license-doc' // 行政许可卷宗
+  | 'punishment-doc' // 行政处罚卷宗
+  | 'other'  // 其他
   | string;
 
 interface FileTypeTagProps {
@@ -15,6 +19,8 @@ interface FileTypeTagProps {
   size?: 'default' | 'sm' | 'lg';
   showIcon?: boolean;
   fileType?: string;
+  colorMode?: 'light' | 'dark' | 'auto';
+  typeName?: string; // 新增typeName属性，用于根据文档类型名称判断样式
 }
 
 export function links() {
@@ -30,6 +36,8 @@ export function links() {
  * @param size 尺寸：default, sm, lg
  * @param showIcon 是否显示图标，默认为true
  * @param fileType 文件类型，不提供则使用文档类型决定样式
+ * @param colorMode 颜色模式：light, dark, auto(默认)，设置为auto时跟随系统
+ * @param typeName 文档类型名称，用于判断样式
  */
 export function FileTypeTag({ 
   type, 
@@ -37,7 +45,9 @@ export function FileTypeTag({
   className = '', 
   size = 'default',
   showIcon = true,
-  fileType
+  fileType,
+  colorMode = 'auto',
+  typeName
 }: FileTypeTagProps) {
   // 文档类型对应的图标
   const getTypeIcon = () => {
@@ -47,26 +57,75 @@ export function FileTypeTag({
       'license': 'ri-vip-crown-line',
       'punishment': 'ri-scales-line',
       'agreement': 'ri-file-paper-line',
+      'pdf': 'ri-file-pdf-line',
+      'doc': 'ri-file-word-line',
+      'docx': 'ri-file-word-line',
+      'xls': 'ri-file-excel-line',
+      'xlsx': 'ri-file-excel-line',
+      'ppt': 'ri-file-ppt-line',
+      'pptx': 'ri-file-ppt-line',
+      'contract': 'ri-file-list-3-line',       // 合同文档
+      'license-doc': 'ri-vip-crown-line',      // 行政许可卷宗
+      'punishment-doc': 'ri-scales-line',      // 行政处罚卷宗
+      'other': 'ri-file-paper-line',           // 其他
     };
     return typeIconMap[type] || 'ri-file-text-line';
   };
 
   // 文档类型对应的文本
   const getTypeText = () => {
+    // 如果提供了自定义文本，优先使用
     if (text) return text;
     
+    // 如果提供了typeName，优先使用
+    if (typeName) return typeName;
+    
     const typeTextMap: Record<string, string> = {
       'sales-contract': '销售合同',
       'purchase-contract': '采购合同',
       'license': '专卖许可证',
       'punishment': '行政处罚决定书',
       'agreement': '承包协议',
+      'pdf': 'PDF',
+      'doc': 'Word',
+      'docx': 'Word',
+      'xls': 'Excel',
+      'xlsx': 'Excel',
+      'ppt': 'PPT',
+      'contract': '合同文档',        // 合同文档
+      'license-doc': '行政许可卷宗', // 行政许可卷宗
+      'punishment-doc': '行政处罚卷宗', // 行政处罚卷宗
+      'other': '其他文档',           // 其他
     };
     return typeTextMap[type] || type;
   };
 
+  // 获取根据typeName判断的样式类名
+  const getTypeNameClass = () => {
+    if (!typeName) return '';
+    
+    // 根据typeName判断文档类型
+    if (typeName.includes('合同')) {
+      return 'file-type-tag-contract';
+    } else if (typeName.includes('许可') || typeName.includes('行政许可')) {
+      return 'file-type-tag-license-doc';
+    } else if (typeName.includes('处罚') || typeName.includes('行政处罚')) {
+      return 'file-type-tag-punishment-doc';
+    } else {
+      return 'file-type-tag-other';
+    }
+  };
+
   // 获取文档类型对应的类名
   const getTypeClass = () => {
+    // 如果有typeName，根据typeName判断样式
+    if (typeName) {
+      const typeNameClass = getTypeNameClass();
+      if (typeNameClass) {
+        return `file-type-tag ${typeNameClass}`;
+      }
+    }
+    
     // 如果有文件类型，优先使用文件类型决定样式
     if (fileType) {
       const fileTypeClass = getFileTypeClass(fileType);
@@ -108,8 +167,15 @@ export function FileTypeTag({
     return !showIcon ? 'file-type-tag-no-icon' : '';
   };
 
+  // 获取颜色模式类名
+  const getColorModeClass = () => {
+    if (colorMode === 'light') return 'color-mode-light';
+    if (colorMode === 'dark') return 'color-mode-dark';
+    return ''; // auto模式不添加额外类名
+  };
+
   return (
-    <span className={`${getTypeClass()} ${getSizeClass()} ${getIconClass()} ${className}`}>
+    <span className={`${getTypeClass()} ${getSizeClass()} ${getIconClass()} ${getColorModeClass()} ${className}`}>
       {showIcon && <i className={`${getTypeIcon()} file-type-icon`}></i>}
       <span className="file-type-text">{getTypeText()}</span>
     </span>

app/components/ui/FilterPanel.tsx

@@ -143,6 +143,7 @@ interface DateRangeFilterProps {
   startLabel?: string;
   endLabel?: string;
   simple?: boolean;
+  colorMode?: 'light' | 'dark' | 'auto';
 }
 
 /**
@@ -168,7 +169,8 @@ export function DateRangeFilter({
   className = '',
   startLabel = "从",
   endLabel = "至",
-  simple = false
+  simple = false,
+  colorMode = 'auto'
 }: DateRangeFilterProps) {
   return (
     <div className={`filter-item ${className}`}>
@@ -180,6 +182,7 @@ export function DateRangeFilter({
           onStartDateChange={onStartDateChange}
           onEndDateChange={onEndDateChange}
           className="filter-control"
+          colorMode={colorMode}
         />
       ) : (
         <DateRangePicker
@@ -190,6 +193,7 @@ export function DateRangeFilter({
           startLabel={startLabel}
           endLabel={endLabel}
           className="filter-control"
+          colorMode={colorMode}
         />
       )}
     </div>