完成智慧法务前端调整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' : ''}`}