完成文档列表页面ui，封装部分上传文件的公共组件，封装请求接口

2025-04-01 22:14:43 +08:00
parent 8fe88c1d15
commit 706cea8705
37 changed files with 4512 additions and 1459 deletions
@@ -0,0 +1,98 @@
+import dateRangePickerStyles from "~/styles/components/date-range-picker.css?url";
+
+export interface DateRangePickerProps {
+  startDate: string;
+  endDate: string;
+  onStartDateChange: (value: string) => void;
+  onEndDateChange: (value: string) => void;
+  startLabel?: string;
+  endLabel?: string;
+  className?: string;
+  startId?: string;
+  endId?: string;
+}
+
+export function links() {
+  return [
+    { rel: "stylesheet", href: dateRangePickerStyles }
+  ];
+}
+
+/**
+ * 日期范围选择器组件
+ * 用于选择日期范围，如开始日期和结束日期
+ */
+export function DateRangePicker({
+  startDate,
+  endDate,
+  onStartDateChange,
+  onEndDateChange,
+  startLabel = "从",
+  endLabel = "至",
+  className = "",
+  startId = "date-start",
+  endId = "date-end"
+}: DateRangePickerProps) {
+  return (
+    <div className={`date-range-picker ${className}`}>
+      <div className="date-range-fields">
+        <div className="date-field">
+          <label htmlFor={startId} className="date-label">{startLabel}</label>
+          <input 
+            id={startId}
+            type="date" 
+            className="date-input" 
+            value={startDate}
+            onChange={(e) => onStartDateChange(e.target.value)}
+          />
+        </div>
+        <span className="date-separator">至</span>
+        <div className="date-field">
+          <label htmlFor={endId} className="date-label">{endLabel}</label>
+          <input 
+            id={endId}
+            type="date" 
+            className="date-input" 
+            value={endDate}
+            onChange={(e) => onEndDateChange(e.target.value)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// 简化版日期范围选择器，适用于紧凑布局，不显示标签
+export function SimpleDateRangePicker({
+  startDate,
+  endDate,
+  onStartDateChange,
+  onEndDateChange,
+  className = "",
+  startId = "date-start-simple",
+  endId = "date-end-simple"
+}: Omit<DateRangePickerProps, 'startLabel' | 'endLabel'>) {
+  return (
+    <div className={`date-range-picker simple-date-range-picker ${className}`}>
+      <div className="date-range-fields">
+        <input 
+          id={startId}
+          type="date" 
+          className="date-input" 
+          value={startDate}
+          onChange={(e) => onStartDateChange(e.target.value)}
+          aria-label="开始日期"
+        />
+        <span className="date-separator">至</span>
+        <input 
+          id={endId}
+          type="date" 
+          className="date-input" 
+          value={endDate}
+          onChange={(e) => onEndDateChange(e.target.value)}
+          aria-label="结束日期"
+        />
+      </div>
+    </div>
+  );
+}