refactor: 优化挑战贡献页面布局，将URL和标签移至基本信息区块

Author: CC11001100

docs/challenges/Cloudflare5秒盾.yml

@@ -31,7 +31,7 @@ challenges:
     # 挑战难度评级（整数类型，必填）
     # 取值范围: 1-5，1表示最简单，5表示最难
     # 前端展示时会转换为星级显示
-    difficulty-level: 3
+    difficulty-level: 4
 
     # Markdown格式详细描述（必选）
     # 当需要复杂排版时使用

docs/challenges/国家标准全文公开系统.yml

@@ -30,7 +30,7 @@ challenges:
     # 挑战难度评级（整数类型，必填）
     # 取值范围: 1-5，1表示最简单，5表示最难
     # 前端展示时会转换为星级显示
-    difficulty-level: 4
+    difficulty-level: 3
 
     # Markdown格式详细描述（必选）
     # 当需要复杂排版时使用

docs/challenges/网易易盾.yml

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { Form, Input, message, Tooltip } from 'antd';
-import { InfoCircleOutlined, LinkOutlined } from '@ant-design/icons';
+import { Form, Input, message, Tooltip, Button } from 'antd';
+import { InfoCircleOutlined, LinkOutlined, ExportOutlined } from '@ant-design/icons';
 import { FormInstance } from 'antd';
 import { useBase64UrlEncoder } from '../hooks';
 import { createUrlValidators } from '../utils/validators';
@@ -98,14 +98,38 @@ const useBase64UrlState = (form: FormInstance, onChange?: (value: string) => voi
     }
   }, [plaintextUrl, form, ensureBase64Format, onChange]);
 
+  // 打开URL
+  const openUrl = useCallback(() => {
+    const base64Value = form.getFieldValue('base64Url');
+    if (!base64Value) {
+      message.warning('请先输入URL');
+      return;
+    }
+    
+    try {
+      const url = decodeUrl(base64Value);
+      // 确保URL有效
+      if (!url.startsWith('http')) {
+        throw new Error('无效的URL');
+      }
+      
+      // 在新标签页中打开URL
+      window.open(url, '_blank', 'noopener,noreferrer');
+    } catch (error) {
+      console.error('打开URL失败:', error);
+      message.error('无法打开URL，请检查URL格式');
+    }
+  }, [form, decodeUrl]);
+
   return {
     plaintextUrl,
     isFocused,
     initializeFromForm,
     handleInputChange,
     handleFocus, 
     handleBlur,
-    decodeUrl
+    decodeUrl,
+    openUrl
   };
 };
 
@@ -160,7 +184,8 @@ const Base64UrlInput: React.FC<Base64UrlInputProps> = ({ form, onChange }) => {
     handleInputChange,
     handleFocus,
     handleBlur,
-    decodeUrl
+    decodeUrl,
+    openUrl
   } = useBase64UrlState(form, onChange);
 
   // 处理YAML导入事件
@@ -176,12 +201,22 @@ const Base64UrlInput: React.FC<Base64UrlInputProps> = ({ form, onChange }) => {
     createUrlValidators(decodeUrl), 
   [decodeUrl]);
 
+  // 自定义后缀图标
+  const suffixIcon = (
+    <Tooltip title="在新标签页中打开URL">
+      <ExportOutlined 
+        onClick={openUrl} 
+        style={{ cursor: 'pointer', color: '#1890ff' }} 
+      />
+    </Tooltip>
+  );
+
   return (
     <Form.Item
       name="base64Url"
       label="目标网站URL"
       tooltip={{
-        title: '输入普通URL，系统会自动进行Base64编码。输入框获得焦点时会显示明文，失去焦点时会显示Base64编码值。',
+        title: '输入普通URL，系统会自动进行Base64编码。输入框获得焦点时会显示明文，失去焦点时会显示Base64编码值。点击右侧图标可以在新标签页中打开URL。',
         icon: <InfoCircleOutlined />
       }}
       rules={validationRules}
@@ -193,6 +228,7 @@ const Base64UrlInput: React.FC<Base64UrlInputProps> = ({ form, onChange }) => {
         onFocus={handleFocus}
         onBlur={handleBlur}
         prefix={<LinkOutlined />}
+        suffix={suffixIcon}
       />
     </Form.Item>
   );

src/components/ChallengeContributePage/components/Base64UrlInput.tsx

@@ -35,6 +35,9 @@ const DifficultySelector: React.FC<DifficultySelectorProps> = ({ form, value, on
     }
   };
 
+  // 空函数，只用于让星星显示为可点击状态
+  const handleStarClick = () => {};
+
   return (
     <Form.Item
       name="difficultyLevel"
@@ -52,31 +55,51 @@ const DifficultySelector: React.FC<DifficultySelectorProps> = ({ form, value, on
         <Option value={1}>
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
             <span>1 (初级)</span>
-            <StarRating difficulty={1} />
+            <StarRating 
+              difficulty={1} 
+              onClick={handleStarClick}
+              style={{ cursor: 'pointer' }}
+            />
           </div>
         </Option>
         <Option value={2}>
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
             <span>2 (简单)</span>
-            <StarRating difficulty={2} />
+            <StarRating 
+              difficulty={2} 
+              onClick={handleStarClick}
+              style={{ cursor: 'pointer' }}
+            />
           </div>
         </Option>
         <Option value={3}>
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
             <span>3 (中等)</span>
-            <StarRating difficulty={3} />
+            <StarRating 
+              difficulty={3} 
+              onClick={handleStarClick}
+              style={{ cursor: 'pointer' }}
+            />
           </div>
         </Option>
         <Option value={4}>
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
             <span>4 (困难)</span>
-            <StarRating difficulty={4} />
+            <StarRating 
+              difficulty={4} 
+              onClick={handleStarClick}
+              style={{ cursor: 'pointer' }}
+            />
           </div>
         </Option>
         <Option value={5}>
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
             <span>5 (专家)</span>
-            <StarRating difficulty={5} />
+            <StarRating 
+              difficulty={5} 
+              onClick={handleStarClick}
+              style={{ cursor: 'pointer' }}
+            />
           </div>
         </Option>
       </Select>

src/components/ChallengeContributePage/components/DifficultySelector.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { Button, Tooltip } from 'antd';
+import { VerticalAlignTopOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
+
+/**
+ * 滚动控制按钮组件，用于快速跳转到页面顶部或底部
+ */
+const ScrollButtons: React.FC = () => {
+  // 滚动到页面顶部
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  };
+
+  // 滚动到页面底部
+  const scrollToBottom = () => {
+    window.scrollTo({
+      top: document.documentElement.scrollHeight,
+      behavior: 'smooth'
+    });
+  };
+
+  // 按钮样式
+  const buttonStyle = {
+    width: '40px',
+    height: '40px',
+    borderRadius: '50%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+    border: 'none'
+  };
+
+  return (
+    <div style={{ 
+      position: 'fixed', 
+      right: '24px', 
+      bottom: '80px', 
+      zIndex: 9999, 
+      display: 'flex', 
+      flexDirection: 'column', 
+      gap: '12px' 
+    }}>
+      <Tooltip title="回到顶部" placement="left">
+        <Button
+          icon={<VerticalAlignTopOutlined />}
+          onClick={scrollToTop}
+          style={buttonStyle}
+          type="primary"
+          shape="circle"
+        />
+      </Tooltip>
+      <Tooltip title="前往底部" placement="left">
+        <Button
+          icon={<VerticalAlignBottomOutlined />}
+          onClick={scrollToBottom}
+          style={buttonStyle}
+          type="primary"
+          shape="circle"
+        />
+      </Tooltip>
+    </div>
+  );
+};
+
+export default ScrollButtons; 

src/components/ChallengeContributePage/components/ScrollButtons.tsx

@@ -215,6 +215,8 @@ const SolutionsSection: React.FC<SolutionsSectionProps> = memo(({ form, onChange
         rules={[solutionsValidator]}
         validateTrigger={['onChange', 'onBlur']}
         style={{ marginBottom: 0 }}
+        extra="参考资料为可选项，无需强制填写"
+        required={false}
       >
         <div style={{ display: 'none' }}></div>
       </Form.Item>

src/components/ChallengeContributePage/components/SolutionsSection.tsx

@@ -5,17 +5,12 @@ import { PlusOutlined, CloseOutlined } from '@ant-design/icons';
 import { SectionProps } from '../types';
 import { useTagsSelector } from '../hooks';
 import { tagsValidators } from '../utils/validators';
+import { TagFrequency } from '../hooks/useAllTags';
 
 // AutoComplete的选项类型
 type OptionType = {
   value: string;
   label: string | React.ReactNode;
-} | {
-  label: React.ReactNode;
-  options: Array<{
-    value: string;
-    label: string | React.ReactNode;
-  }>;
 };
 
 // 定义颜色映射
@@ -86,12 +81,18 @@ const TagItem = memo(({
 
 interface TagsSelectorProps extends SectionProps {
   existingTags?: string[];
+  tagsFrequency?: TagFrequency[];
 }
 
 /**
  * 标签选择组件
  */
-const TagsSelector: React.FC<TagsSelectorProps> = ({ form, existingTags = [], onChange }) => {
+const TagsSelector: React.FC<TagsSelectorProps> = ({ 
+  form, 
+  existingTags = [], 
+  tagsFrequency = [],
+  onChange 
+}) => {
   // 使用标签选择器钩子
   const {
     tags,
@@ -107,51 +108,28 @@ const TagsSelector: React.FC<TagsSelectorProps> = ({ form, existingTags = [], on
     handleInputBlur,
     handleTagSelect,
     handleTagInputKeyPress
-  } = useTagsSelector({ form, existingTags, onChange });
+  } = useTagsSelector({ 
+    form, 
+    existingTags, 
+    tagsFrequency,
+    onChange 
+  });
 
-  // 渲染分类标签选项
+  // 渲染标签选项，仅添加样式，不修改排序
   const renderTagOptions = useMemo(() => {
-    if (!isInputFocused || (newTag && tagOptions.length === 0)) {
+    if (!isInputFocused || tagOptions.length === 0) {
       return undefined;
     }
 
-    // 如果有搜索词，则只显示过滤后的选项
-    if (newTag) {
-      return tagOptions.map(opt => ({
-        value: opt.value,
-        label: opt.value
-      }));
-    }
+    console.log('渲染标签选项，数量:', tagOptions.length);
+    console.log('前5个标签:', tagOptions.slice(0, 5).map(opt => opt.value));
 
-    // 没有搜索词时显示分类标签
-    const options: OptionType[] = [];
-    
-    // 最近使用的标签
-    if (recentlyUsedTags.length > 0) {
-      options.push({
-        label: <Divider orientation="left" style={{ margin: '4px 0' }}>最近使用</Divider>,
-        options: recentlyUsedTags.map((tag: string) => ({
-          value: tag,
-          label: <span><Tag color={getTagColor(tag)} style={{ margin: 0 }}>{tag}</Tag></span>
-        }))
-      });
-    }
-    
-    // 分类标签
-    Object.entries(categorizedTags).forEach(([category, categoryTags]) => {
-      if (categoryTags.length > 0) {
-        options.push({
-          label: <Divider orientation="left" style={{ margin: '4px 0' }}>{category}</Divider>,
-          options: (categoryTags as string[]).map((tag: string) => ({
-            value: tag,
-            label: <span><Tag color={getTagColor(tag)} style={{ margin: 0 }}>{tag}</Tag></span>
-          }))
-        });
-      }
-    });
-    
-    return options;
-  }, [isInputFocused, newTag, tagOptions, recentlyUsedTags, categorizedTags]);
+    // 映射标签，只添加样式，保持顺序不变
+    return tagOptions.map(opt => ({
+      value: opt.value,
+      label: <span><Tag color={getTagColor(opt.value)} style={{ margin: 0 }}>{opt.value}</Tag></span>
+    }));
+  }, [isInputFocused, tagOptions]);
 
   // 渲染已选标签列表
   const renderedTags = useMemo(() => (
@@ -194,7 +172,7 @@ const TagsSelector: React.FC<TagsSelectorProps> = ({ form, existingTags = [], on
           style={{ width: 300 }}
           onKeyDown={handleTagInputKeyPress}
           disabled={tags.length >= 100}
-          open={isInputFocused && (tagOptions.length > 0 || recentlyUsedTags.length > 0)}
+          open={isInputFocused && tagOptions.length > 0}
           notFoundContent={newTag ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="没有匹配的标签" /> : null}
           dropdownStyle={{ maxHeight: '400px', overflow: 'auto' }}
           dropdownMatchSelectWidth={true}