feat: sync full workspace including web modules, docs, and configurations to Gitea

Optimized the root .gitignore to exclude virtual environments, node modules,
and temp folders to ensure clean and lightweight version tracking.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
王冕
2026-06-09 18:12:25 +08:00
parent 351688006e
commit a27e3b8e43
1510 changed files with 162044 additions and 1517 deletions

View File

@@ -0,0 +1,33 @@
---
name: web-page-workflow
description: 使用本项目MCP 与 Firecrawl MCP 处理普通网页资产提取与原型还原的流程规范;在执行网页页面地图发现、主题/数据/文档提取与还原时使用。
---
# 普通网页处理规范(简版)
本技能采用渐进披露:先判断用户需求,再只打开相关文档。
## 快速分流
- 资产提取总流程(编排入口):`skills/web-page-workflow/asset-extraction.md`
- 主题生成规则:`skills/web-page-workflow/theme-generation.md`
- 文档生成规则:`skills/web-page-workflow/doc-generation.md`
- 数据生成规则:`skills/web-page-workflow/data-generation.md`
- 原型还原/优化/视觉复刻:`skills/web-page-workflow/prototype-restoration.md`
## 通用前置(任何场景都需要)
1. 检测 MCP 安装状态优先尝试本项目MCP 工具(如 `get_page_theme`),失败再尝试 Firecrawl MCP。
2. 确认至少有一个 MCP 可用;若都不可用,提示用户安装。
3. 获取网页链接:用户未提供时要求提供 URL。
## 通用约束
- 默认使用本项目MCPFirecrawl 仅在本项目失败、链接发现不足或用户明确要求时使用。
- 抓取不完整时可增加等待参数Axhub `waitTime` / Firecrawl `waitFor`)。
- 及时告知当前使用的工具,并在不确定时先征求用户确认。
## 参考资源
- `theme-guide.md`
- `development-guide.md`

View File

@@ -0,0 +1,91 @@
# 网页资产提取总流程(编排)
本文件只负责流程编排、工具选择和用户交互节奏。
具体生成规则请分别读取子文档:
- 主题生成:`skills/web-page-workflow/theme-generation.md`
- 文档生成:`skills/web-page-workflow/doc-generation.md`
- 数据生成:`skills/web-page-workflow/data-generation.md`
## 输出目录约束
- 主题:`src/themes/<theme-key>/`
- 文档:`src/docs/`
- 数据:`src/database/`
## 工具策略
默认优先使用本项目 MCP。
仅在以下场景切换/补充 Firecrawl MCP
1. 本项目 MCP 调用失败
2. 链接发现不足(少于 5 条)
3. 需要批量抓取或结构化抽取
4. 用户明确要求使用 Firecrawl
## 标准执行顺序
1. 发现页面:用 `get_page_map` 获取链接集合,必要时 `firecrawl_map` 补齐。
2. 确认范围:默认执行“主题 + 文档 + 数据”,可按用户要求裁剪。
3. 主题生成:读取 `theme-generation.md`
4. 文档生成:读取 `doc-generation.md`
5. 数据生成:读取 `data-generation.md`
6. 交付总结:列出产物路径、已完成项、待确认项。
## 默认方案(用户未明确需求)
1. 提取主题并生成 `DESIGN.md`
2. 生成页面地图与项目概览文档
3. 识别并输出数据模型
## 用户交互话术
### 初始确认
```
您好,我可以帮您从网页提取主题、文档和数据。
我会按以下顺序执行:
1) 主题提取与规范文档
2) 项目文档生成
3) 数据模型生成
请先提供网页 URL一个或多个都可以
```
### 需求确认
```
已发现 [X] 个相关页面。
默认将执行:主题 + 文档 + 数据。
如果你只需要其中一部分,请直接告诉我(例如“只做主题”)。
```
### 进度通知
```
正在处理...
✓ 已完成页面发现
✓ 已完成主题生成
⏳ 正在生成文档与数据模型...
```
### 完成总结
```
✅ 已完成资产提取。
产物路径:
- 主题src/themes/<theme-key>/
- 文档src/docs/
- 数据src/database/
如需继续,我可以按指定 URL 生成还原页面。
```
## 执行原则
- 先确认范围,再写文件。
- 页面抓取不稳定时,先报告不确定项,再让用户决定是否补充链接/截图。
- 主题、文档、数据之间保持命名一致与语义一致。

View File

@@ -0,0 +1,47 @@
# 网页数据生成规则
用于从网页内容识别数据结构并生成 JSON 数据表。
不负责主题和文档正文生成。
## 识别步骤
1. 识别数据密集页面(列表/详情/表单/报表)。
2. 提取页面内容:优先 `get_page_markdown`,批量场景用 Firecrawl `batch_scrape`
3. 抽取字段与记录模式,合并跨页面同类实体。
4. 生成数据表并校验字段一致性。
## 输出规范(强约束)
输出目录:`src/database/`
文件约束:
- 文件名英文(如 `products.json`
- `tableName` 中文(如 `"产品表"`
- JSON 结构必须为对象,包含 `tableName``records`
```json
{
"tableName": "表名(中文)",
"records": [
{ "id": 1, "字段1": "值1" }
]
}
```
## 字段归一规则
1. 字段名优先中文并贴近页面语义。
2. 同义字段统一命名,避免并存。
3. 同字段跨记录类型保持一致。
4. `id` 必须唯一,同表保持类型一致。
## 记录建议
- 每表 10-30 条记录。
- 覆盖常规值、边界值、异常值(如空值、超长值)。
## 质量检查
- JSON 可解析且结构完整
- 字段与页面语义一致
- 数据量与场景合理,无明显伪造痕迹

View File

@@ -0,0 +1,39 @@
# 网页文档生成规则
用于生成网页资产相关文档。
不负责主题 token 提取与数据建模细节。
## 文档类型
默认产物:
- `src/docs/page-map.md`
- `src/docs/project-overview.md`
用户明确要求时可追加:
- 领域模型、关系模型、流程模型、状态模型、权限模型
## 页面地图规范
1. 按模块或业务流分组链接。
2. 页面名称必须可点击并指向 URL。
3. 每个页面附简短用途说明。
## 项目概览规范
至少包含:
- 项目定位与核心目标
- 页面规模与功能模块
- 主题风格摘要(引用主题产物)
- 数据模型摘要(引用数据文件)
## 业务文档规范
1. 明确边界与对象定义。
2. 优先结构化表达(表格/分层清单)。
3. 对不确定项显式标记“待确认”。
## 质量检查
- 文件落在 `src/docs/`
- 命名使用 kebab-case
- 内容与已抓取页面一致,不杜撰关键流程

View File

@@ -0,0 +1,106 @@
# 普通网页页面还原与优化
用于网页视觉还原与优化。
**核心方法**:看图 → 写代码 → 交付。
## 默认目标与可选优化
- **默认目标**:在用户未提出额外要求时,尽量 1:1 像素级还原页面截图的视觉与布局(不主动“改版”)。
- **可选优化**:如需我同时做“优化设计/交互”(信息结构调整、视觉升级、交互补全、可用性优化等),请在需求里明确说明;否则仅做还原与基础走查修复。
## 核心流程
1. **确认前置条件**
- 确认模型支持视觉识别(不支持则立即告知用户)
- 确认可以直接读取图片内容(不需要转换,不支持则立即告知用户)
- 生成页面名称(规范:小写字母、数字、连字符)
2. **获取截图**
- 先确认当前模型支持视觉识别;不支持时立即告知用户,并询问是否改为仅基于文本+主题还原。
- 使用 `get_page_screenshot` 下载截图到本项目:
- `downloadDirectory`:指向 `temp/web-screenshots/` 的绝对路径(不存在时先创建)
- `filename`:可选,指定保存的文件名
- 若下载失败,尝试前环境内可用的其他截图工具;若仍失败,必须告知用户并让其决定是否继续。
3. **验证图片读取能力**
- 尝试读取已下载的截图文件
- **如果无法直接读取本地图片**(工具不支持或返回错误),必须:
- 立即停止流程
- 告知用户:"无法读取本地图片,请将 `[图片绝对路径]` 复制到对话框后提交"
- 等待用户提交图片后再继续
- 禁止假设或猜测图片内容
- 禁止通过 Base64 编码读取图片内容
4. **生成页面代码**
**辅助数据获取**(可选,生成仍以图片为主):
- 主题:`get_page_theme`(校验样式)
- 多页面合并:优先 3-5 个核心页面,按页面权重合并统计
- 噪声过滤:排除图片/图标/装饰性元素,弱化低频与异常值
- 量化归一:颜色按相近色合并,间距/圆角按常见网格值聚类
- 置信度阈值:低于阈值的 token 不进入最终主题
- 文本:`get_page_markdown`(校验文案)
- 完整数据包:`download_page_data`(仅在需要精确样式时)
**约束**:资源获取禁止批量/并发,必须等一个完成后再获取下一个
- 直接基于截图生成页面代码
- 在代码生成过程中内部完成:
- 识别布局结构Header/Sidebar/Content 等)
- 识别组件Button/Input/Table/Card 等)
- 提取样式(颜色、字体、间距、圆角、阴影等)
- 识别交互(点击、悬停、状态切换等)
**输出文件**
- `src/prototypes/<page-name>/index.tsx`
- `src/prototypes/<page-name>/style.css`(必须包含 `@import "tailwindcss";`
- `src/prototypes/<page-name>/components/`(根据需要)
**核心代码规范**(必须遵守):
```typescript
// index.tsx 结构
/**
* @name 页面显示名称
*/
import './style.css';
import React from 'react';
const Component = function PageName() {
return <div>...</div>;
};
export default Component;
```
```css
/* style.css 必须以此开头 */
@import "tailwindcss";
```
- 变量名必须是 `Component`,使用 `export default Component`
- 详细规范见 `rules/development-guide.md`
5. **验收页面还原**
- 运行验收命令:`node scripts/check-app-ready.mjs /prototypes/[页面名]`
- 提供预览 URL
- 确认页面基础功能正常(无编译错误、可正常访问)
6. **生成规格文档**
- 基于已验收通过的页面代码生成规格文档
- 输出文件:`src/prototypes/<page-name>/spec.md`
- 文档内容应包括:
- 页面结构说明
- 组件清单
- 样式规范(颜色、字体、间距等)
- 交互说明
- 数据需求(如有)
7. **最终交付**
- 告知用户页面还原和规格文档已完成
- 说明可进行二次生成(修复问题或优化重构)
## 还原策略(输入优先级)
1. **截图**(最高优先级):视觉识别布局、颜色、间距。
2. **主题**:应用提取的 design tokens。
3. **内容(辅助验证)**:用 Markdown 校准文本与字段含义(只影响文案与数据字段命名建议)。
4. **样式细节**(可选):从完整数据包中提取精确样式(仅在需要时)。
5. **基础设计走查与修复**:按设计与前端规范检查明显问题并修复(如对齐/间距不一致、字号层级混乱、对比度不足、可点击态缺失、响应式断点明显错位等);若修复会改变原设计意图,先向用户确认。

View File

@@ -0,0 +1,43 @@
# 网页主题生成规则
用于从网页提取并生成主题资产。
只处理主题相关产物,不处理文档正文与数据建模细节。
## 页面选择
1. 从页面发现结果中选择 3-5 个代表性页面。
2. 优先:首页、主流程页、核心详情页。
3. 页面风格差异较大时,优先与业务主线一致的页面。
## 提取策略
1. 优先调用本项目 MCP 的 `get_page_theme`
2. 若失败,再使用 Firecrawl `extract` 的 branding 结果兜底。
3. 多页面结果需要合并并去重,保留稳定 token。
## 输出文件(强约束)
输出目录:`src/themes/<theme-key>/`
必需:
- `globals.css``designToken.json`(二选一)
- `DESIGN.md`
- `index.tsx`
约束:
- `designToken.json` 必须包含 `name` 字段。
- `index.tsx` 必须展示主题关键 token 与主要组件风格。
## DESIGN.md 最低结构
1. 视觉关键词与品牌气质
2. 色彩体系(主色/辅色/语义色)
3. 排版体系(字体、字号、行高)
4. 组件风格(按钮、卡片、输入、表格)
5. 状态与反馈hover/active/disabled/error
## 质量检查
- token 是否可复用且命名一致
- 文档是否可用于后续页面还原/二次生成
- 产物路径是否严格在 `src/themes/<theme-key>/`