feat: 重构题目贡献页面，将组件拆分得更细致，增加了基本信息、难度选择器、标签选择器等组件

Author: CC11001100

docs/TODO.md

@@ -0,0 +1 @@
+作者这个字段，是要能够自动补全的，单击输入的就要把平台上所有的作者都下拉展开（按照出现次数倒序排列），然后根据用户的输入自动筛选补全，当然用户也可以不选择已有的作者，选择输入新的作者都是可以的，下拉仅仅只是为了补全，减少用户输入的工作量

package-lock.json

@@ -30,6 +30,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^9.6.0",
+    "@types/js-yaml": "^4.0.9",
     "@types/node": "^22.14.0",
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",

package.json

@@ -4,6 +4,7 @@ import NavBar from './components/NavBar'
 import HomePage from './components/HomePage'
 import ChallengeListPage from './components/ChallengeListPage'
 import ChallengeDetailPage from './components/ChallengeDetailPage'
+import ChallengeContributePage from './components/ChallengeContributePage'
 import AboutPage from './components/AboutPage'
 import GitHubRibbon from './components/GitHubRibbon'
 import './gh-fork-ribbon.css';
@@ -20,6 +21,7 @@ const App = () => {
                         <Route path="/" element={<HomePage/>}/>
                         <Route path="/challenges" element={<ChallengeListPage/>}/>
                         <Route path="/challenge/:id" element={<ChallengeDetailPage/>}/>
+                        <Route path="/challenge/contribute" element={<ChallengeContributePage />}/>
                         <Route path="/about" element={<AboutPage/>}/>
                         <Route path="*" element={<HomePage/>}/>
                     </Routes>

src/App.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Form, Input, InputNumber, Radio, FormInstance } from 'antd';
+import { SectionProps } from '../types';
+
+interface BasicInfoProps {
+  form: FormInstance;
+}
+
+/**
+ * 挑战基本信息表单部分
+ */
+const BasicInfo: React.FC<BasicInfoProps> = ({ form }) => {
+  return (
+    <>
+      <Form.Item
+        name="id"
+        label="ID"
+        rules={[{ required: true, message: '请输入ID' }]}
+        tooltip="每个挑战的唯一数字ID，已自动填入可用的下一个ID"
+      >
+        <InputNumber style={{ width: '100%' }} min={1} />
+      </Form.Item>
+
+      <Form.Item
+        name="idAlias"
+        label="ID别名"
+        tooltip="用于在URL和界面上显示的友好名称"
+      >
+        <Input placeholder="如: ruishu-5、leetcode-42、jsvmp-advanced 等" />
+      </Form.Item>
+
+      <Form.Item
+        name="platform"
+        label="平台"
+        rules={[{ required: true, message: '请选择平台' }]}
+      >
+        <Radio.Group>
+          <Radio.Button value="Web">Web</Radio.Button>
+          <Radio.Button value="Android">Android</Radio.Button>
+          <Radio.Button value="iOS">iOS</Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+
+      <Form.Item
+        name="name"
+        label="中文名称"
+        rules={[{ required: true, message: '请输入中文名称' }]}
+      >
+        <Input placeholder="如: 5代瑞数反爬、字节TikTok登录加密等" />
+      </Form.Item>
+
+      <Form.Item
+        name="nameEn"
+        label="英文名称"
+      >
+        <Input placeholder="如: Riskined v5 Anti-Crawler, ByteDance TikTok Login Encryption" />
+      </Form.Item>
+    </>
+  );
+};
+
+export default BasicInfo; 

src/components/ChallengeContributePage/components/BasicInfo.tsx

@@ -154,6 +154,51 @@ const DescriptionFields: React.FC<SectionProps> = ({ form }) => {
     };
   }, [form]);
 
+  // 监听description-updated事件
+  useEffect(() => {
+    const handleDescriptionUpdate = (event: any) => {
+      if (event.detail) {
+        try {
+          const { description, descriptionEn } = event.detail;
+          
+          // 安全转换为字符串
+          const chineseText = safeToString(description);
+          const englishText = safeToString(descriptionEn);
+          
+          console.log('接收到description更新事件:', { chineseText, englishText });
+          
+          // 使用setTimeout确保在DOM更新后再更新编辑器内容
+          setTimeout(() => {
+            // 更新编辑器内容
+            if (editorChineseRef.current?.getMdElement) {
+              editorChineseRef.current.setText(chineseText);
+              // 确保表单中也保存了正确的字符串
+              form.setFieldsValue({ 
+                description: chineseText,
+                descriptionMarkdown: chineseText 
+              });
+            }
+            
+            if (editorEnglishRef.current?.getMdElement) {
+              editorEnglishRef.current.setText(englishText);
+              form.setFieldsValue({ 
+                descriptionEn: englishText,
+                descriptionMarkdownEn: englishText 
+              });
+            }
+          }, 100);
+        } catch (err) {
+          console.error('处理description更新事件时出错:', err);
+        }
+      }
+    };
+    
+    window.addEventListener('description-updated', handleDescriptionUpdate);
+    return () => {
+      window.removeEventListener('description-updated', handleDescriptionUpdate);
+    };
+  }, [form]);
+  
   // 初始化编辑器内容
   useEffect(() => {
     if (hasInitializedRef.current) return;

src/components/ChallengeContributePage/components/DescriptionFields.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import { Form, Select, FormInstance } from 'antd';
+import StarRating from '../../StarRating';
+
+const { Option } = Select;
+
+interface DifficultySelectorProps {
+  form: FormInstance;
+  value?: number;
+  onChange?: (value: number) => void;
+}
+
+/**
+ * 难度选择组件
+ */
+const DifficultySelector: React.FC<DifficultySelectorProps> = ({ form, value, onChange }) => {
+  const [currentDifficulty, setCurrentDifficulty] = useState<number>(value || 1);
+
+  // 监听表单中难度级别的变化
+  useEffect(() => {
+    const formDifficulty = form.getFieldValue('difficultyLevel');
+    if (formDifficulty && formDifficulty !== currentDifficulty) {
+      setCurrentDifficulty(formDifficulty);
+    }
+  }, [form, currentDifficulty]);
+
+  // 难度级别变化处理
+  const handleDifficultyChange = (value: number) => {
+    setCurrentDifficulty(value);
+    form.setFieldsValue({ difficultyLevel: value });
+    
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  return (
+    <Form.Item
+      name="difficultyLevel"
+      label="难度级别"
+      rules={[{ required: true, message: '请选择难度级别' }]}
+    >
+      <Select 
+        style={{ width: 'auto', minWidth: '180px' }}
+        onChange={handleDifficultyChange}
+        value={currentDifficulty}
+        dropdownStyle={{ minWidth: '250px' }}
+        placeholder="请选择难度级别"
+        popupMatchSelectWidth={false}
+      >
+        <Option value={1}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span>1 (初级)</span>
+            <StarRating difficulty={1} />
+          </div>
+        </Option>
+        <Option value={2}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span>2 (简单)</span>
+            <StarRating difficulty={2} />
+          </div>
+        </Option>
+        <Option value={3}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span>3 (中等)</span>
+            <StarRating difficulty={3} />
+          </div>
+        </Option>
+        <Option value={4}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span>4 (困难)</span>
+            <StarRating difficulty={4} />
+          </div>
+        </Option>
+        <Option value={5}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span>5 (专家)</span>
+            <StarRating difficulty={5} />
+          </div>
+        </Option>
+      </Select>
+    </Form.Item>
+  );
+};
+
+export default DifficultySelector;