重构ChallengeContributePage组件：优化UI/UX，添加步骤式表单、备份恢复功能和响应式设计

Author: CC11001100

README.assets/image-20250413185708120.png

@@ -6,6 +6,8 @@
 
 **在线访问**: [https://jsrep.github.io/crawler-leetcode/](https://jsrep.github.io/crawler-leetcode/)
 
+![image-20250413185708120](./README.assets/image-20250413185708120.png)
+
 ## 项目结构
 
 ```

README.md

@@ -0,0 +1,13 @@
+id: 112
+id-alias: 国家标准全文公开系统
+platform: Web
+name: 国家标准全文公开系统
+name_en: China National Standards Public Service Platform
+difficulty-level: 3
+description-markdown: |-
+  点"在线预览"，跳转有检测
+tags:
+  - js-reverse
+solutions: []
+create-time: 2025-04-13 16:53:26
+update-time: 2025-04-13 08:54:06

docs/challenges/kaitorishouten买取商店价格加密.yml

@@ -15,13 +15,15 @@
   "dependencies": {
     "@ant-design/icons": "^5.6.1",
     "@types/markdown-it": "^14.1.2",
+    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-responsive": "^8.0.8",
     "antd": "^5.16.4",
     "fuse.js": "^7.1.0",
     "i18next": "^24.2.2",
     "i18next-browser-languagedetector": "^8.0.4",
     "markdown-it": "^14.1.0",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
     "react-i18next": "^15.4.1",

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

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { Modal, List, Button, Space, Empty, Typography, Divider } from 'antd';
+import { ReloadOutlined, HistoryOutlined, DeleteOutlined } from '@ant-design/icons';
+
+const { Text, Title } = Typography;
+
+interface BackupHistoryModalProps {
+  visible: boolean;
+  onClose: () => void;
+  backupOptions: { label: string; value: string }[];
+  onRecover: (timestamp: string) => void;
+}
+
+/**
+ * 备份历史模态框组件
+ * 用于显示和恢复历史备份
+ */
+const BackupHistoryModal: React.FC<BackupHistoryModalProps> = ({
+  visible,
+  onClose,
+  backupOptions,
+  onRecover
+}) => {
+  return (
+    <Modal
+      title={
+        <Space>
+          <HistoryOutlined />
+          <span>备份历史</span>
+        </Space>
+      }
+      open={visible}
+      onCancel={onClose}
+      footer={[
+        <Button key="close" onClick={onClose}>
+          关闭
+        </Button>
+      ]}
+      width={600}
+    >
+      {backupOptions.length === 0 ? (
+        <Empty description="没有找到可用的备份历史" />
+      ) : (
+        <>
+          <Text type="secondary" style={{ display: 'block', marginBottom: 16 }}>
+            您可以恢复以下任一备份。点击"恢复"按钮将用所选备份替换当前表单数据。
+          </Text>
+          
+          <Divider />
+          
+          <List
+            itemLayout="horizontal"
+            dataSource={backupOptions}
+            renderItem={item => (
+              <List.Item
+                key={item.value}
+                actions={[
+                  <Button 
+                    key="recover" 
+                    type="primary" 
+                    icon={<ReloadOutlined />}
+                    onClick={() => onRecover(item.value)}
+                  >
+                    恢复
+                  </Button>
+                ]}
+              >
+                <List.Item.Meta
+                  avatar={<HistoryOutlined style={{ fontSize: 24 }} />}
+                  title={<Title level={5}>备份时间: {item.label}</Title>}
+                  description="点击恢复按钮将用此备份替换当前表单数据。此操作不可撤销。"
+                />
+              </List.Item>
+            )}
+          />
+        </>
+      )}
+    </Modal>
+  );
+};
+
+export default BackupHistoryModal;