ADD file via upload

前端代码转换提示词.txt

@@ -0,0 +1,109 @@
+### AI编程任务：HTML/CSS到React组件的重构与现代化
+
+#### 任务目标
+
+将提供的静态HTML/CSS代码重构为模块化、可复用且符合现代React最佳实践的组件代码，并深度集成 Ant Design 5 组件库。
+
+#### 输入内容
+
+- 原始HTML结构代码
+- 原始CSS样式代码（可能是内部样式表或外部CSS文件）
+- （可选）相关的静态图片资源
+
+#### 输出要求
+
+- **核心代码**：标准的React函数组件代码（使用ES6+语法）。
+- **样式方案**：优先使用 Ant Design 5 的 `<Space>`, `<Row>`, `<Col>` 等布局组件和 `token` 系统，复杂样式可辅以 `CSS Modules`。
+- **结构优化**：合理的文件拆分建议（如将Header, Footer拆分为独立组件）。
+
+#### 具体执行步骤与规范
+
+**1. 组件化拆分**
+
+- **原子设计原则**：不要将所有HTML写在一个文件中。识别页面中的独立区域（如导航栏、卡片、页脚），将其拆分为独立的React组件。
+- **命名规范**：组件文件名和函数名必须使用PascalCase（如`UserProfile.jsx`），CSS模块或类名使用kebab-case或camelCase。
+
+**2. 代码现代化与Ant Design集成**
+
+- **语义化标签**：将原始的`<div>` soup转换为语义化HTML5标签（如`<header>`, `<main>`, `<section>`, `<footer>`）或对应的Ant Design组件（如`<Layout>`, `<Sider>`, `<Content>`）。
+- **组件映射**：
+    - 将原生 `<button>` 转换为 `<Button type="primary">`。
+    - 将原生 `<input>`, `<select>`, `<textarea>` 转换为 `<Input>`, `<Select>`, `<Input.TextArea>`。
+    - 将列表结构 `<ul>/<li>` 转换为 `<List>` 或 `<Menu>`。
+    - 将卡片式结构转换为 `<Card>`。
+- **图标处理**：将HTML中的SVG或字体图标替换为 `@ant-design/icons` 中的标准图标（如`<UserOutlined />`, `<SearchOutlined />`）。
+- **无障碍性**：确保转换后的代码包含必要的ARIA属性（如`aria-label`, `role`），确保图片有`alt`文本。
+
+**3. 样式迁移与主题适配**
+
+- **类名处理**：将`class`属性转换为`className`。
+- **布局系统**：优先使用 Ant Design 的栅格系统 `<Row>` 和 `<Col>` 以及间距组件 `<Space>` 来替代原 CSS 中的 `float` 或 `flex` 布局代码。
+- **内联样式处理**：如果原代码有内联样式（`style="..."`），请将其转换为React对象格式（`style={{...}}`），注意将`kebab-case`属性名转换为`camelCase`（例如`background-color`变为`backgroundColor`）。
+- **响应式**：利用 Ant Design 栅格的 `xs, sm, md, lg, xl, xxl` 属性处理响应式，移除原 CSS 中的媒体查询代码。
+
+**4. 交互逻辑植入**
+
+- **事件绑定**：将原HTML中的`onclick`等属性转换为React的事件处理（如`onClick={handleClick}`）。
+- **状态管理**：如果原页面包含简单的交互（如点击切换菜单、Tab切换），请使用`useState`钩子实现状态管理。
+- **表单处理**：将静态表单转换为受控组件或使用 Ant Design 的 `Form` 组件，利用其内置的校验和提交功能。
+
+**5. 资源处理**
+
+- **图片引用**：将`<img src="...">`中的路径替换为React中的正确引用方式（如`import`导入或公共文件夹引用）。
+
+#### 交付物格式
+
+请按以下结构输出代码：
+
+```
+// 1. 主组件文件 (App.jsx 或 Page.jsx)
+import React, { useState } from 'react';
+import { Button, Input, Space } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import Header from './components/Header';
+import styles from './Page.module.css'; // 假设使用CSS Modules
+
+const Page = () => {
+  const [searchText, setSearchText] = useState('');
+
+  const handleSearch = () => {
+    console.log('Searching for:', searchText);
+  };
+
+  return (
+    <div className={styles.container}>
+       <Header />
+       <Space.Compact style={{ width: 300 }}>
+          <Input 
+            placeholder="请输入搜索内容" 
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
+          />
+          <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
+            搜索
+          </Button>
+       </Space.Compact>
+    </div>
+  );
+};
+
+export default Page;
+```
+
+```
+/* 2. 样式文件 (Page.module.css) */
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px;
+}
+```
+
+#### 验收标准
+
+- 代码无语法错误，可直接运行。
+- 视觉效果与原始HTML/CSS保持高度一致（像素级还原）。
+- 代码整洁，无冗余的`<div>`嵌套。
+- 控制台无React警告（如缺少`key`属性）。
+- 正确使用了 Ant Design 5.21.0+ 的组件和API。