docs: add README with features and usage instructions

This commit is contained in:
2026-07-18 22:30:52 +08:00
parent 4ee8d68c93
commit 63f5b1d10b
+71
View File
@@ -0,0 +1,71 @@
# PC装机配置表
基于HTML的网页版PC装机配置管理工具,支持编辑和查看两种模式。
## 功能
- **表格展示**:以表格形式展示所有部件配置,包含图片、类型、品牌、型号、参数、价格、链接
- **备选方案**:每个部件支持主配置+多个备选方案,点击即可切换,底部总价同步更新
- **图片预览**:支持图片URL,点击可放大查看
- **部件类型**:预设CPU、主板、显卡等常用类型,同时支持自定义输入
- **JSON存储**:配置以JSON格式存储,支持导入导出
## 文件说明
| 文件 | 用途 | 部署方式 |
|------|------|----------|
| `index.html` | 查看页面 | 服务器部署,只读 |
| `editor.html` | 编辑页面 | 本地双击打开,支持编辑 |
| `sample_config.json` | 示例配置 | - |
| `start_server.py` | 本地开发服务器 | `python start_server.py` |
## 使用方法
### 查看配置(服务器部署)
1.`index.html` 和JSON配置文件部署到Web服务器
2. 浏览器打开:`http://你的域名/index.html?config=配置文件地址.json`
3. 示例:`http://localhost:8080/?config=sample_config.json`
### 编辑配置(本地使用)
1. 双击 `editor.html` 在浏览器中打开
2. 点击「打开文件」按钮,选择JSON配置文件
3. 进行编辑操作:添加部件、编辑部件、删除部件、切换备选方案
4. 点击「导出JSON」保存修改后的配置
### 本地开发
```bash
python start_server.py
# 打开 http://localhost:8080/editor.html
```
## JSON配置格式
```json
{
"configName": "我的装机方案",
"components": [
{
"type": "CPU",
"selected": 0,
"options": [
{
"image": "https://example.com/image.jpg",
"brand": "Intel",
"model": "i7-14700K",
"specs": "20核28线程 / 3.4GHz",
"price": 2499,
"link": "https://item.jd.com/xxx.html"
}
]
}
]
}
```
- `selected`: 当前选中的配置索引(0为主配置)
- `options`: 该部件的所有配置选项
- `image`: 图片URL(可选)
- `link`: 商品链接(可选)