feat: 组件拆分

2026-02-19 10:54:51 +08:00
parent b4c94db2e8
commit 1234653fa9
22 changed files with 2320 additions and 2100 deletions
--- a/app/components/GroupModal.jsx
+++ b/app/components/GroupModal.jsx
@@ -0,0 +1,61 @@
+'use client';
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { CloseIcon, PlusIcon } from './Icons';
+
+export default function GroupModal({ onClose, onConfirm }) {
+  const [name, setName] = useState('');
+  return (
+    <motion.div
+      className="modal-overlay"
+      role="dialog"
+      aria-modal="true"
+      aria-label="新增分组"
+      onClick={onClose}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+    >
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95, y: 20 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        exit={{ opacity: 0, scale: 0.95, y: 20 }}
+        className="glass card modal"
+        style={{ maxWidth: '400px' }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <PlusIcon width="20" height="20" />
+            <span>新增分组</span>
+          </div>
+          <button className="icon-button" onClick={onClose} style={{ border: 'none', background: 'transparent' }}>
+            <CloseIcon width="20" height="20" />
+          </button>
+        </div>
+        <div className="form-group" style={{ marginBottom: 20 }}>
+          <label className="muted" style={{ display: 'block', marginBottom: 8, fontSize: '14px' }}>分组名称（最多 8 个字）</label>
+          <input
+            className="input"
+            autoFocus
+            placeholder="请输入分组名称..."
+            value={name}
+            onChange={(e) => {
+              const v = e.target.value || '';
+              // 限制最多 8 个字符（兼容中英文），超出部分自动截断
+              setName(v.slice(0, 8));
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && name.trim()) onConfirm(name.trim());
+            }}
+          />
+        </div>
+        <div className="row" style={{ gap: 12 }}>
+          <button className="button secondary" onClick={onClose} style={{ flex: 1, background: 'rgba(255,255,255,0.05)', color: 'var(--text)' }}>取消</button>
+          <button className="button" onClick={() => name.trim() && onConfirm(name.trim())} disabled={!name.trim()} style={{ flex: 1 }}>确定</button>
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}