style(EventFormModal): 升级为黑金主题样式

- 股票选择器下拉菜单适配深色背景
- Tag 标签改为金色边框和背景
- 自选股提示文字颜色优化
- 添加 ConfigProvider 深色主题支持
- Less 样式文件大幅扩展，支持完整黑金风格

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/views/Center/components/EventFormModal.tsx

@@ -23,6 +23,8 @@ import {
   message,
   Space,
   Spin,
+  ConfigProvider,
+  theme,
 } from 'antd';
 import type { SelectProps } from 'antd';
 import {
@@ -393,7 +395,7 @@ export const EventFormModal: React.FC<EventFormModalProps> = ({
   // 判断是否显示自选股列表
   const isShowingWatchlist = !searchText && stockOptions === watchlistOptions;
 
-  // 股票选择器选项配置
+  // 股票选择器选项配置（黑金主题）
   const selectProps: SelectProps<string[]> = {
     mode: 'multiple',
     placeholder: allStocksLoading ? '加载股票列表中...' : '输入股票代码或名称搜索',
@@ -401,12 +403,15 @@ export const EventFormModal: React.FC<EventFormModalProps> = ({
     onSearch: handleStockSearch,
     loading: watchlistLoading || allStocksLoading,
     notFoundContent: allStocksLoading ? (
-      <div style={{ textAlign: 'center', padding: '8px' }}>
+      <div style={{ textAlign: 'center', padding: '8px', color: 'rgba(255,255,255,0.6)' }}>
         <Spin size="small" />
         <span style={{ marginLeft: 8 }}>加载中...</span>
       </div>
-    ) : '暂无结果',
+    ) : <span style={{ color: 'rgba(255,255,255,0.4)' }}>暂无结果</span>,
     options: stockOptions,
+    style: {
+      width: '100%',
+    },
     onFocus: () => {
       if (stockOptions.length === 0) {
         setStockOptions(watchlistOptions);
@@ -416,41 +421,49 @@ export const EventFormModal: React.FC<EventFormModalProps> = ({
       const { label: tagLabel, closable, onClose: onTagClose } = props;
       return (
         <Tag
-          color="blue"
           closable={closable}
           onClose={onTagClose}
-          style={{ marginRight: 3 }}
+          style={{
+            marginRight: 3,
+            background: 'rgba(212, 175, 55, 0.15)',
+            border: '1px solid rgba(212, 175, 55, 0.3)',
+            color: '#D4AF37',
+          }}
         >
           {tagLabel}
         </Tag>
       );
     },
     popupRender: (menu) => (
-      <>
+      <div style={{
+        background: '#1A1A2E',
+        border: '1px solid rgba(212, 175, 55, 0.2)',
+        borderRadius: '8px',
+      }}>
         {isShowingWatchlist && watchlistOptions.length > 0 && (
           <>
-            <div style={{ padding: '4px 8px 0' }}>
-              <span style={{ fontSize: 12, color: '#999' }}>
-                <StarOutlined style={{ marginRight: 4, color: '#faad14' }} />
+            <div style={{ padding: '8px 12px 4px' }}>
+              <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>
+                <StarOutlined style={{ marginRight: 4, color: '#D4AF37' }} />
                 我的自选股
               </span>
             </div>
-            <Divider style={{ margin: '4px 0 0' }} />
+            <Divider style={{ margin: '4px 0 0', borderColor: 'rgba(212, 175, 55, 0.1)' }} />
           </>
         )}
         {menu}
         {!isShowingWatchlist && searchText && (
           <>
-            <Divider style={{ margin: '8px 0' }} />
-            <div style={{ padding: '0 8px 4px' }}>
-              <span style={{ fontSize: 12, color: '#999' }}>
+            <Divider style={{ margin: '8px 0', borderColor: 'rgba(212, 175, 55, 0.1)' }} />
+            <div style={{ padding: '0 12px 8px' }}>
+              <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.4)' }}>
                 <BulbOutlined style={{ marginRight: 4 }} />
                 搜索结果（输入代码或名称）
               </span>
             </div>
           </>
         )}
-      </>
+      </div>
     ),
   };
 
@@ -462,9 +475,47 @@ export const EventFormModal: React.FC<EventFormModalProps> = ({
     return eventType === 'plan' ? '创建计划' : '创建复盘';
   };
 
+  // 黑金主题样式
+  const modalStyles = {
+    mask: {
+      background: 'rgba(0, 0, 0, 0.7)',
+      backdropFilter: 'blur(4px)',
+    },
+    content: {
+      background: 'linear-gradient(135deg, #1A1A2E 0%, #0F0F1A 100%)',
+      border: '1px solid rgba(212, 175, 55, 0.2)',
+      borderRadius: '12px',
+      boxShadow: '0 8px 32px rgba(0, 0, 0, 0.5), 0 0 24px rgba(212, 175, 55, 0.1)',
+    },
+    header: {
+      background: 'transparent',
+      borderBottom: '1px solid rgba(212, 175, 55, 0.1)',
+      padding: '16px 24px',
+    },
+    body: {
+      padding: '24px',
+      paddingTop: '24px',
+    },
+    footer: {
+      background: 'transparent',
+      borderTop: '1px solid rgba(212, 175, 55, 0.1)',
+      padding: '16px 24px',
+    },
+  };
+
   return (
     <Modal
-      title={`${mode === 'edit' ? '编辑' : '新建'}${eventType === 'plan' ? '投资计划' : '复盘'}`}
+      title={
+        <span style={{
+          fontSize: '20px',
+          fontWeight: 700,
+          background: 'linear-gradient(135deg, #D4AF37 0%, #F5E6A3 100%)',
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+        }}>
+          {`${mode === 'edit' ? '编辑' : '新建'}${eventType === 'plan' ? '投资计划' : '复盘'}`}
+        </span>
+      }
       open={isOpen}
       onCancel={onClose}
       width={600}
@@ -472,25 +523,71 @@ export const EventFormModal: React.FC<EventFormModalProps> = ({
       maskClosable={true}
       keyboard
       className="event-form-modal"
+      styles={modalStyles}
+      closeIcon={
+        <span style={{ color: 'rgba(255,255,255,0.6)', fontSize: '16px' }}>✕</span>
+      }
       footer={
-        <div className="modal-footer">
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
           <Button
             type="primary"
             onClick={handleSave}
             loading={saving}
             disabled={saving}
+            style={{
+              background: 'linear-gradient(135deg, #D4AF37 0%, #B8960C 100%)',
+              border: 'none',
+              color: '#0A0A14',
+              fontWeight: 600,
+              height: '40px',
+              padding: '0 24px',
+              borderRadius: '8px',
+            }}
           >
             {getButtonText()}
           </Button>
         </div>
       }
     >
-      <div ref={modalContentRef}>
-        {isOpen && <Form
-          form={form}
-          layout="horizontal"
-          labelCol={{ span: 4 }}
-          wrapperCol={{ span: 20 }}
+      <ConfigProvider
+        theme={{
+          algorithm: theme.darkAlgorithm,
+          token: {
+            colorPrimary: '#D4AF37',
+            colorBgContainer: 'rgba(26, 26, 46, 0.8)',
+            colorBorder: 'rgba(212, 175, 55, 0.2)',
+            colorBorderSecondary: 'rgba(212, 175, 55, 0.1)',
+            colorText: 'rgba(255, 255, 255, 0.95)',
+            colorTextSecondary: 'rgba(255, 255, 255, 0.6)',
+            colorTextPlaceholder: 'rgba(255, 255, 255, 0.4)',
+            colorBgElevated: '#1A1A2E',
+            colorFillSecondary: 'rgba(212, 175, 55, 0.1)',
+          },
+          components: {
+            Input: {
+              activeBorderColor: '#D4AF37',
+              hoverBorderColor: 'rgba(212, 175, 55, 0.4)',
+              activeShadow: '0 0 0 2px rgba(212, 175, 55, 0.2)',
+            },
+            Select: {
+              optionActiveBg: 'rgba(212, 175, 55, 0.1)',
+              optionSelectedBg: 'rgba(212, 175, 55, 0.2)',
+              optionSelectedColor: '#D4AF37',
+            },
+            DatePicker: {
+              activeBorderColor: '#D4AF37',
+              hoverBorderColor: 'rgba(212, 175, 55, 0.4)',
+              activeShadow: '0 0 0 2px rgba(212, 175, 55, 0.2)',
+            },
+          },
+        }}
+      >
+        <div ref={modalContentRef}>
+          {isOpen && <Form
+            form={form}
+            layout="horizontal"
+            labelCol={{ span: 4 }}
+            wrapperCol={{ span: 20 }}
           labelAlign="left"
           requiredMark={false}
           initialValues={{
@@ -501,7 +598,7 @@ export const EventFormModal: React.FC<EventFormModalProps> = ({
           {/* 标题 */}
           <Form.Item
             name="title"
-            label={<span style={{ fontWeight: 600 }}>标题 <span style={{ color: '#ff4d4f' }}>*</span></span>}
+            label={<span style={{ fontWeight: 600, color: 'rgba(255,255,255,0.95)' }}>标题 <span style={{ color: '#D4AF37' }}>*</span></span>}
             rules={[
               { required: true, message: '请输入标题' },
               { max: 50, message: '标题不能超过50个字符' },
@@ -511,17 +608,31 @@ export const EventFormModal: React.FC<EventFormModalProps> = ({
               placeholder={getTitlePlaceholder()}
               maxLength={50}
               showCount
+              styles={{
+                input: {
+                  background: 'rgba(26, 26, 46, 0.8)',
+                  borderColor: 'rgba(212, 175, 55, 0.2)',
+                  color: 'rgba(255, 255, 255, 0.95)',
+                },
+                count: {
+                  color: 'rgba(255, 255, 255, 0.4)',
+                },
+              }}
             />
           </Form.Item>
 
           {/* 日期 */}
           <Form.Item
             name="date"
-            label={<span style={{ fontWeight: 600 }}>{eventType === 'plan' ? '计划日期' : '复盘日期'} <span style={{ color: '#ff4d4f' }}>*</span></span>}
+            label={<span style={{ fontWeight: 600, color: 'rgba(255,255,255,0.95)' }}>{eventType === 'plan' ? '计划日期' : '复盘日期'} <span style={{ color: '#D4AF37' }}>*</span></span>}
             rules={[{ required: true, message: '请选择日期' }]}
           >
             <DatePicker
-              style={{ width: '100%' }}
+              style={{
+                width: '100%',
+                background: 'rgba(26, 26, 46, 0.8)',
+                borderColor: 'rgba(212, 175, 55, 0.2)',
+              }}
               format="YYYY-MM-DD"
               placeholder="选择日期"
               allowClear={false}
@@ -531,7 +642,7 @@ export const EventFormModal: React.FC<EventFormModalProps> = ({
           {/* 描述/内容 - 上下布局 */}
           <Form.Item
             name="content"
-            label={<span style={{ fontWeight: 600 }}>{eventType === 'plan' ? '计划详情' : '复盘内容'} <span style={{ color: '#ff4d4f' }}>*</span></span>}
+            label={<span style={{ fontWeight: 600, color: 'rgba(255,255,255,0.95)' }}>{eventType === 'plan' ? '计划详情' : '复盘内容'} <span style={{ color: '#D4AF37' }}>*</span></span>}
             rules={[{ required: true, message: '请输入内容' }]}
             labelCol={{ span: 24 }}
             wrapperCol={{ span: 24 }}
@@ -542,18 +653,28 @@ export const EventFormModal: React.FC<EventFormModalProps> = ({
               rows={8}
               showCount
               maxLength={2000}
-              style={{ resize: 'vertical' }}
+              style={{
+                resize: 'vertical',
+                background: 'rgba(26, 26, 46, 0.8)',
+                borderColor: 'rgba(212, 175, 55, 0.2)',
+                color: 'rgba(255, 255, 255, 0.95)',
+              }}
             />
           </Form.Item>
 
           {/* 模板快捷按钮 - 独立放置在 Form.Item 外部 */}
           <div style={{ marginBottom: 24 }}>
-            <Space wrap size="small" className="template-buttons">
+            <Space wrap size="small">
               {templates.map((template) => (
                 <Button
                   key={template.label}
                   size="small"
                   onClick={() => handleInsertTemplate(template)}
+                  style={{
+                    background: 'rgba(212, 175, 55, 0.1)',
+                    borderColor: 'rgba(212, 175, 55, 0.2)',
+                    color: 'rgba(255, 255, 255, 0.6)',
+                  }}
                 >
                   {template.label}
                 </Button>
@@ -564,12 +685,13 @@ export const EventFormModal: React.FC<EventFormModalProps> = ({
           {/* 关联股票 */}
           <Form.Item
             name="stocks"
-            label={<span style={{ fontWeight: 600 }}>关联股票</span>}
+            label={<span style={{ fontWeight: 600, color: 'rgba(255,255,255,0.95)' }}>关联股票</span>}
           >
             <Select {...selectProps} />
           </Form.Item>
-        </Form>}
-      </div>
+          </Form>}
+        </div>
+      </ConfigProvider>
     </Modal>
   );
 };