feat: 组件拆分

app/components/HoldingActionModal.jsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { CloseIcon, SettingsIcon } from './Icons';
+
+export default function HoldingActionModal({ fund, onClose, onAction }) {
+  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"
+        onClick={(e) => e.stopPropagation()}
+        style={{ maxWidth: '320px' }}
+      >
+        <div className="title" style={{ marginBottom: 20, justifyContent: 'space-between' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <SettingsIcon 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 style={{ marginBottom: 20, textAlign: 'center' }}>
+          <div className="fund-name" style={{ fontWeight: 600, fontSize: '16px', marginBottom: 4 }}>{fund?.name}</div>
+          <div className="muted" style={{ fontSize: '12px' }}>#{fund?.code}</div>
+        </div>
+
+        <div className="grid" style={{ gap: 12 }}>
+          <button className="button col-6" onClick={() => onAction('buy')} style={{ background: 'rgba(34, 211, 238, 0.1)', border: '1px solid var(--primary)', color: 'var(--primary)' }}>
+            加仓
+          </button>
+          <button className="button col-6" onClick={() => onAction('sell')} style={{ background: 'rgba(248, 113, 113, 0.1)', border: '1px solid var(--danger)', color: 'var(--danger)' }}>
+            减仓
+          </button>
+          <button className="button col-12" onClick={() => onAction('edit')} style={{ background: 'rgba(255,255,255,0.05)', color: 'var(--text)' }}>
+            编辑持仓
+          </button>
+          <button
+            className="button col-12"
+            onClick={() => onAction('clear')}
+            style={{
+              marginTop: 8,
+              background: 'linear-gradient(180deg, #ef4444, #f87171)',
+              border: 'none',
+              color: '#2b0b0b',
+              fontWeight: 600
+            }}
+          >
+            清空持仓
+          </button>
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}