Refine web UI and usage docs
This commit is contained in:
@@ -1,55 +1,489 @@
|
||||
# 手机品牌型号汇总
|
||||
# 项目使用文档
|
||||
|
||||
当前项目以根目录作为统一入口，支持通过 Docker Compose 直接启动设备查询、数据管理和 MySQL 服务。
|
||||
## 1. 文档概览
|
||||
|
||||
## 启动方式
|
||||
### 1.1 文档目标
|
||||
|
||||
这份文档用于说明 MobileModels 的使用方式、数据接入方式、维护方式和排查方式。文档不再按“项目说明 / 使用说明 / 数据库说明”拆开，而是整理成一份统一文档，方便不同角色在同一份上下文里完成阅读。
|
||||
|
||||
### 1.2 适用角色
|
||||
|
||||
- 产品或业务使用者：需要查设备、看字段、理解页面入口
|
||||
- 数据维护者：需要维护品牌、来源排序、同步数据、刷新索引
|
||||
- 服务端接入方：需要接 MySQL、按统一规则查询设备数据
|
||||
- 运维维护者：需要启动服务、检查配置、处理运行问题
|
||||
|
||||
### 1.3 建议阅读路径
|
||||
|
||||
- 只想先跑起来：先看 `2. 快速开始`
|
||||
- 只想用页面：先看 `3. 页面使用`
|
||||
- 只想接数据库：先看 `4. 数据接入`
|
||||
- 负责维护和发布：重点看 `5. 数据维护`、`6. 配置与运行`、`7. 排查指南`
|
||||
|
||||
## 2. 快速开始
|
||||
|
||||
### 2.1 项目提供什么
|
||||
|
||||
MobileModels 将下面几类能力放在一个项目里统一交付：
|
||||
|
||||
- 设备查询页面
|
||||
- 数据管理页面
|
||||
- 文档查看页面
|
||||
- 设备索引构建
|
||||
- MySQL schema 与 seed 生成
|
||||
- 原始数据同步与自动调度
|
||||
|
||||
使用时不需要分别启动多个服务，默认通过 Docker Compose 统一运行。
|
||||
|
||||
### 2.2 启动服务
|
||||
|
||||
在项目根目录执行：
|
||||
|
||||
```bash
|
||||
docker compose up --build -d
|
||||
```
|
||||
|
||||
如需本地测试 MySQL，一起叠加测试配置启动：
|
||||
如果需要同时启动本地测试 MySQL：
|
||||
|
||||
```bash
|
||||
docker compose -f docker-compose.yml -f docker-compose.test.yml up --build -d
|
||||
```
|
||||
|
||||
如需自定义 MySQL 连接，先复制环境模板：
|
||||
如果需要覆盖默认环境变量：
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
页面入口：
|
||||
### 2.3 页面入口
|
||||
|
||||
- `http://127.0.0.1:8123/web/device_query.html`
|
||||
- `http://127.0.0.1:8123/web/brand_management.html`
|
||||
- `http://127.0.0.1:8123/web/device_query.html?view=docs`
|
||||
- `设备查询`：`http://127.0.0.1:8123/web/device_query.html`
|
||||
- `数据管理`：`http://127.0.0.1:8123/web/brand_management.html`
|
||||
- `相关文档`：`http://127.0.0.1:8123/web/device_query.html?view=docs`
|
||||
|
||||
## 目录结构
|
||||
### 2.4 停止与重置
|
||||
|
||||
停止服务：
|
||||
|
||||
```bash
|
||||
docker compose down
|
||||
```
|
||||
|
||||
清空运行期数据：
|
||||
|
||||
```bash
|
||||
docker compose down -v
|
||||
```
|
||||
|
||||
### 2.5 启动后会自动完成什么
|
||||
|
||||
默认启动后会按配置完成以下动作：
|
||||
|
||||
1. 加载原始数据工作区
|
||||
2. 构建设备索引
|
||||
3. 生成 `dist/device_index.json`
|
||||
4. 生成 `dist/mobilemodels_mysql_seed.sql`
|
||||
5. 按配置决定是否自动装载 MySQL
|
||||
6. 启动 Web 页面与 API
|
||||
7. 启动项目内部的自动同步调度
|
||||
|
||||
## 3. 页面使用
|
||||
|
||||
### 3.1 页面结构
|
||||
|
||||
项目包含两个主页面和一个文档入口：
|
||||
|
||||
- `设备查询`：面向日常查询、联调、设备归类
|
||||
- `数据管理`：面向品牌维护、来源维护、同步维护、索引维护
|
||||
- `相关文档`：面向统一查看项目使用文档
|
||||
|
||||
### 3.2 设备查询页
|
||||
|
||||
设备查询页分为三个 tab。
|
||||
|
||||
#### 设备标识
|
||||
|
||||
适用输入：
|
||||
|
||||
- Android 原始标识，如 `SM-G9980`
|
||||
- iOS 原始标识，如 `iPhone14,2`
|
||||
- HarmonyOS 原始标识，如 `NOH-AL00`
|
||||
|
||||
适合场景：
|
||||
|
||||
- 设备管理
|
||||
- 登录设备展示
|
||||
- 服务端设备归类
|
||||
- 客户端上报值排查
|
||||
|
||||
结果字段使用方式：
|
||||
|
||||
- 设备名称：`device_name`
|
||||
- 品牌展示：优先 `market_brand`，为空再取 `brand`
|
||||
- 厂商归属：优先 `parent_brand`，为空再取 `manufacturer_brand`
|
||||
- 设备类型：`device_type`
|
||||
|
||||
不建议直接用作主展示的字段：
|
||||
|
||||
- `alias_norm`
|
||||
- `source_file`
|
||||
- `source_rank`
|
||||
- `source_weight`
|
||||
- `code`
|
||||
- `code_alias`
|
||||
- `ver_name`
|
||||
|
||||
#### 设备名称
|
||||
|
||||
适用输入：
|
||||
|
||||
- `iPad mini 7`
|
||||
- `iPhone SE 3`
|
||||
- 其他人工可读设备名称
|
||||
|
||||
查询行为：
|
||||
|
||||
1. 先尝试设备名称别名映射
|
||||
2. 未命中时再查 `device_name` / `ver_name`
|
||||
|
||||
适合场景：
|
||||
|
||||
- 运营核对
|
||||
- 人工排查
|
||||
- 已知设备名但不知道原始标识
|
||||
|
||||
#### 标识索引
|
||||
|
||||
适用输入：
|
||||
|
||||
- 设备标识
|
||||
- 常见设备名称
|
||||
|
||||
适合场景：
|
||||
|
||||
- 联调
|
||||
- 索引识别结果比对
|
||||
- 与 MySQL 查询结果做交叉验证
|
||||
|
||||
### 3.3 数据管理页
|
||||
|
||||
数据管理页按左侧导航分为四部分。
|
||||
|
||||
#### 品牌列表
|
||||
|
||||
这里维护：
|
||||
|
||||
- 品牌数、厂商数
|
||||
- 品牌列表
|
||||
- 品牌与厂商关系
|
||||
- 品牌同义词
|
||||
|
||||
适用场景：
|
||||
|
||||
- 品牌口径调整
|
||||
- 厂商归属调整
|
||||
- 品牌展示不符合预期时排查
|
||||
|
||||
#### 数据来源
|
||||
|
||||
这里维护来源优先级。
|
||||
|
||||
使用方式：
|
||||
|
||||
1. 直接拖拽来源顺序
|
||||
2. 越靠前优先级越高
|
||||
3. 保存后影响结果排序
|
||||
|
||||
适用场景：
|
||||
|
||||
- 多来源结果排序不符合预期
|
||||
- 新来源加入后需要重新排序
|
||||
|
||||
#### 原始数据同步
|
||||
|
||||
这里维护：
|
||||
|
||||
- MySQL 自动装载开关
|
||||
- 外部 MySQL 初始化
|
||||
- 每日自动同步时间
|
||||
- 同步状态与任务日志
|
||||
|
||||
适用场景：
|
||||
|
||||
- 上游数据更新后刷新本地数据
|
||||
- 外部 MySQL 需要重建
|
||||
- 调整自动同步策略
|
||||
|
||||
#### 索引数据
|
||||
|
||||
这里用于查看当前索引状态并手动重新加载。
|
||||
|
||||
适用场景：
|
||||
|
||||
- 同步完成后确认索引是否已生效
|
||||
- 页面结果与预期不一致时检查索引版本
|
||||
|
||||
### 3.4 页面调试建议
|
||||
|
||||
如果页面查询结果异常，建议按下面顺序判断：
|
||||
|
||||
1. 先看输入值是否符合页面预期
|
||||
2. 再看页面中的调试信息
|
||||
3. 再看返回 JSON 是否包含预期字段
|
||||
4. 再检查索引或 MySQL 数据是否已刷新
|
||||
|
||||
## 4. 数据接入
|
||||
|
||||
### 4.1 推荐查询入口
|
||||
|
||||
推荐统一查询下面这张主表：
|
||||
|
||||
```sql
|
||||
mobilemodels.mm_device_catalog
|
||||
```
|
||||
|
||||
这张表已经整合了设备标识、设备名称、品牌、厂商、来源和归一化结果。业务侧如果需要查设备信息，优先直接使用这张表，而不是自己拼接多张表或从页面逻辑反推字段。
|
||||
|
||||
### 4.2 推荐查询方式
|
||||
|
||||
主用方式是按 `alias_norm` 等值查询。
|
||||
|
||||
推荐 SQL：
|
||||
|
||||
```sql
|
||||
SELECT
|
||||
model,
|
||||
record_id,
|
||||
alias_norm,
|
||||
device_name,
|
||||
brand,
|
||||
manufacturer_brand,
|
||||
parent_brand,
|
||||
market_brand,
|
||||
device_type,
|
||||
source_file,
|
||||
section,
|
||||
source_rank,
|
||||
source_weight,
|
||||
code,
|
||||
code_alias,
|
||||
ver_name
|
||||
FROM mobilemodels.mm_device_catalog
|
||||
WHERE alias_norm = ?
|
||||
ORDER BY source_rank ASC, record_id ASC
|
||||
LIMIT 20;
|
||||
```
|
||||
|
||||
### 4.3 为什么主推 `alias_norm`
|
||||
|
||||
客户端上报的原始 `model_raw` 可能包含大小写、横线、空格、下划线、逗号等差异。为了让相同设备尽可能稳定命中，项目统一把输入值归一化到 `alias_norm`，然后按 `alias_norm` 查询主表。
|
||||
|
||||
这也是页面查询与数据库查询保持一致的关键。
|
||||
|
||||
### 4.4 查询前归一化规则
|
||||
|
||||
归一化规则如下：
|
||||
|
||||
- 先转小写
|
||||
- 只保留数字、英文字母、中文
|
||||
- 去掉空格、横线、下划线、逗号及其他标点
|
||||
|
||||
正则示例：
|
||||
|
||||
```text
|
||||
workspace/ 上游原始数据、补充资料与历史文件
|
||||
dist/ 构建产物与 MySQL seed
|
||||
docs/ 项目文档
|
||||
/[^0-9a-z\u4e00-\u9fff]+/g
|
||||
```
|
||||
|
||||
JavaScript 示例：
|
||||
|
||||
```js
|
||||
text.toLowerCase().replace(/[^0-9a-z\u4e00-\u9fff]+/g, "")
|
||||
```
|
||||
|
||||
样例：
|
||||
|
||||
```text
|
||||
SM-G9980 -> smg9980
|
||||
iPhone14,2 -> iphone142
|
||||
NOH-AL00 -> nohal00
|
||||
```
|
||||
|
||||
### 4.5 结果字段使用建议
|
||||
|
||||
面向设备管理场景，推荐按下面顺序取值：
|
||||
|
||||
- 设备名称：`device_name`
|
||||
- 品牌展示：优先 `market_brand`，为空再取 `brand`
|
||||
- 厂商归属：优先 `parent_brand`，为空再取 `manufacturer_brand`
|
||||
- 设备类型：`device_type`
|
||||
|
||||
下面这些字段通常用于排查、排序或扩展匹配，不建议直接作为主展示字段：
|
||||
|
||||
- `alias_norm`
|
||||
- `source_file`
|
||||
- `source_rank`
|
||||
- `source_weight`
|
||||
- `code`
|
||||
- `code_alias`
|
||||
- `ver_name`
|
||||
|
||||
### 4.6 页面查询与数据库查询的关系
|
||||
|
||||
页面里的 `设备标识` 查询和 `设备名称` 查询，底层都依赖这张主表。因此：
|
||||
|
||||
- 页面结果和第三方直接查库结果应该保持同一口径
|
||||
- 页面里的归一化规则应与服务端或业务接入侧保持一致
|
||||
- 如果页面显示异常，先核对主表数据，再核对前端展示逻辑
|
||||
|
||||
## 5. 数据维护
|
||||
|
||||
### 5.1 数据来源
|
||||
|
||||
项目的原始数据主要来自 `workspace/brands/*.md`。这些原始 markdown 是后续索引与 MySQL 数据生成的基础。
|
||||
|
||||
### 5.2 数据生成链路
|
||||
|
||||
完整链路如下：
|
||||
|
||||
1. 同步上游原始 markdown
|
||||
2. 解析 `workspace/brands/*.md`
|
||||
3. 构建 `dist/device_index.json`
|
||||
4. 导出 `dist/mobilemodels_mysql_seed.sql`
|
||||
5. 加载 MySQL schema 与 seed
|
||||
|
||||
### 5.3 关键产物
|
||||
|
||||
- 索引文件：`dist/device_index.json`
|
||||
- MySQL seed：`dist/mobilemodels_mysql_seed.sql`
|
||||
|
||||
### 5.4 常见维护动作
|
||||
|
||||
#### 刷新原始数据
|
||||
|
||||
适用于上游数据已变化，需要重新生成索引和 MySQL 数据。
|
||||
|
||||
#### 调整品牌关系
|
||||
|
||||
适用于品牌展示或厂商归属不符合预期的情况。
|
||||
|
||||
#### 调整来源顺序
|
||||
|
||||
适用于多个来源的优先级需要重新定义的情况。
|
||||
|
||||
#### 重新加载索引
|
||||
|
||||
适用于索引已更新，但页面还没有使用到最新索引的情况。
|
||||
|
||||
## 6. 配置与运行
|
||||
|
||||
### 6.1 目录说明
|
||||
|
||||
```text
|
||||
workspace/ 上游原始数据与补充资料
|
||||
dist/ 索引产物与 MySQL seed
|
||||
docs/ 文档入口与兼容说明
|
||||
sql/ MySQL schema
|
||||
tools/ 构建、同步、导入与服务脚本
|
||||
tools/ 构建、同步、导入、服务脚本
|
||||
web/ 页面与静态资源
|
||||
```
|
||||
|
||||
## 说明
|
||||
### 6.2 常见环境变量
|
||||
|
||||
- `workspace/` 用于存放原始数据工作区
|
||||
- `docker-compose.yml`、`Dockerfile`、`tools/` 都位于项目主目录
|
||||
- 默认主配置面向远程 MySQL
|
||||
- `docker-compose.test.yml` 中的 MySQL 仅用于本地测试
|
||||
- 容器内生成的 `dist/device_index.json` 与 `dist/mobilemodels_mysql_seed.sql` 会直接挂载到宿主机项目根目录的 `dist/`
|
||||
- Compose 会优先读取 shell 环境变量和项目根目录 `.env`，再回退到 `docker-compose.yml` 默认值
|
||||
- 上游原始 git 同步、索引构建和 MySQL 刷新都在容器内完成
|
||||
- 项目内置“每日自动同步”调度，不依赖 GitHub Actions；时间点可在数据管理页设置，也可用 `.env` 覆盖默认值
|
||||
- 如需 GitHub 加速，可配置 `GITHUB_PROXY_PREFIX`，也可在数据管理页直接修改
|
||||
- `MYSQL_HOST`
|
||||
- `MYSQL_PORT`
|
||||
- `MYSQL_DATABASE`
|
||||
- `MYSQL_ROOT_USER`
|
||||
- `MYSQL_ROOT_PASSWORD`
|
||||
- `MYSQL_READER_USER`
|
||||
- `MYSQL_READER_PASSWORD`
|
||||
- `MYSQL_AUTO_LOAD`
|
||||
- `SYNC_SCHEDULE_ENABLED`
|
||||
- `SYNC_SCHEDULE_TIME`
|
||||
- `GITHUB_PROXY_PREFIX`
|
||||
- `TZ`
|
||||
|
||||
更多说明见：
|
||||
### 6.3 运行期配置落盘位置
|
||||
|
||||
- [docs/README.md](docs/README.md)
|
||||
- [docs/web-ui.md](docs/web-ui.md)
|
||||
- MySQL 自动装载：`/data/state/mysql_settings.json`
|
||||
- 自动同步计划：`/data/state/sync_schedule.json`
|
||||
|
||||
### 6.4 运行约定
|
||||
|
||||
- Compose 会优先读取 shell 环境变量和项目根目录 `.env`
|
||||
- 容器启动后会完成索引构建、服务启动，以及按配置决定是否自动装载 MySQL
|
||||
- 自动同步运行在项目容器内部，不依赖 GitHub Actions
|
||||
- 生产环境应替换默认数据库密码
|
||||
|
||||
### 6.5 MySQL 使用建议
|
||||
|
||||
- 生产环境不要继续使用默认密码
|
||||
- 如果接外部 MySQL，先确认 root 账号具备建库建表权限
|
||||
- 如关闭自动装载，需通过数据管理页手动初始化外部 MySQL
|
||||
|
||||
## 7. 排查指南
|
||||
|
||||
### 7.1 查不到设备标识
|
||||
|
||||
按下面顺序排查：
|
||||
|
||||
1. 确认输入的是客户端原始 `model_raw`
|
||||
2. 确认归一化结果是否符合规则
|
||||
3. 查看 `设备标识` 页调试信息和返回 JSON
|
||||
4. 检查主表里是否存在对应 `alias_norm`
|
||||
|
||||
### 7.2 品牌或厂商归属不对
|
||||
|
||||
建议排查：
|
||||
|
||||
1. 查看 `数据管理 -> 品牌列表`
|
||||
2. 核对 `market_brand` 与 `parent_brand`
|
||||
3. 确认是否存在品牌同义词或父级归属未维护的情况
|
||||
|
||||
### 7.3 结果排序不符合预期
|
||||
|
||||
建议排查：
|
||||
|
||||
1. 查看 `数据管理 -> 数据来源`
|
||||
2. 核对 `source_rank`
|
||||
3. 确认结果是否来自预期来源文件
|
||||
|
||||
### 7.4 MySQL 没有刷新
|
||||
|
||||
建议排查：
|
||||
|
||||
1. 查看 `数据管理 -> 原始数据同步`
|
||||
2. 检查 MySQL 自动装载开关
|
||||
3. 查看同步状态与任务日志
|
||||
4. 必要时手动初始化外部 MySQL
|
||||
|
||||
### 7.5 索引结果不对
|
||||
|
||||
建议排查：
|
||||
|
||||
1. 查看 `数据管理 -> 索引数据`
|
||||
2. 检查 `dist/device_index.json` 是否已更新
|
||||
3. 确认页面是否已经重新加载了最新索引
|
||||
|
||||
## 8. 常见问题
|
||||
|
||||
### 8.1 为什么页面结果和数据库结果不一致
|
||||
|
||||
优先检查以下两点：
|
||||
|
||||
- 页面是否使用了最新索引
|
||||
- 数据库是否使用了最新 seed 数据
|
||||
|
||||
如果索引和 MySQL 数据版本不一致，页面和数据库查询结果就可能不同步。
|
||||
|
||||
### 8.2 为什么品牌字段有多个
|
||||
|
||||
项目同时保留原始品牌、展示品牌和父级厂商字段，是为了兼顾原始数据保留、业务展示口径和厂商归属口径。业务展示通常取 `market_brand`，厂商归属通常取 `parent_brand`。
|
||||
|
||||
### 8.3 什么时候用设备名称查询，什么时候用设备标识查询
|
||||
|
||||
- 主流程、服务端接入、设备管理：优先用设备标识查询
|
||||
- 人工排查、运营核对、设备名反查：用设备名称查询
|
||||
|
||||
### 8.4 什么时候需要手动初始化外部 MySQL
|
||||
|
||||
当你使用的是外部 MySQL，且关闭了自动装载，或者数据库结构和数据需要重新初始化时，需要在数据管理页里手动执行初始化。
|
||||
|
||||
Vendored
+12884
-11055
File diff suppressed because it is too large
Load Diff
Vendored
+7542
-7240
File diff suppressed because it is too large
Load Diff
+1
-1
@@ -13,6 +13,6 @@
|
||||
- `web-ui.md`
|
||||
- Docker Compose 启动、页面入口、MySQL 连接和管理能力说明
|
||||
- `mysql-query-design.md`
|
||||
- 主表设计、兼容视图、推荐查询方式
|
||||
- 主表设计、查询方式与清理策略
|
||||
- `device-mapper.md`
|
||||
- `dist/device_index.json` 构建方式与索引字段说明
|
||||
|
||||
+3
-140
@@ -1,142 +1,5 @@
|
||||
# MySQL 设计说明
|
||||
# 项目使用文档入口
|
||||
|
||||
本文档说明交付版 MobileModels 的 MySQL 数据组织方式、兼容层设计与推荐查询方式。
|
||||
相关说明已统一整理到一份文档中，请查看：
|
||||
|
||||
## 设计目标
|
||||
|
||||
- 所有设备标识都能落到 MySQL 查询
|
||||
- 支持第三方直接查库，保证查询速度
|
||||
- 保留兼容旧结构的访问方式
|
||||
- 页面侧和 SQL 接入侧统一使用同一份设备数据
|
||||
|
||||
## 主表
|
||||
|
||||
主推物理表：
|
||||
|
||||
```sql
|
||||
mobilemodels.mm_device_catalog
|
||||
```
|
||||
|
||||
主表整合了设备型号、品牌、厂商、来源、别名归一化结果和兼容字段，适合作为统一查询入口。
|
||||
|
||||
### 关键字段
|
||||
|
||||
- `model`
|
||||
- `record_id`
|
||||
- `alias_norm`
|
||||
- `device_name`
|
||||
- `brand`
|
||||
- `manufacturer_brand`
|
||||
- `parent_brand`
|
||||
- `market_brand`
|
||||
- `device_type`
|
||||
- `source_file`
|
||||
- `section`
|
||||
- `source_rank`
|
||||
- `source_weight`
|
||||
- `code`
|
||||
- `code_alias`
|
||||
- `ver_name`
|
||||
|
||||
## 推荐查询方式
|
||||
|
||||
### 1. 第三方直接查主表
|
||||
|
||||
推荐按 `alias_norm` 等值查询：
|
||||
|
||||
```sql
|
||||
SELECT
|
||||
model,
|
||||
record_id,
|
||||
alias_norm,
|
||||
device_name,
|
||||
brand,
|
||||
manufacturer_brand,
|
||||
parent_brand,
|
||||
market_brand,
|
||||
device_type,
|
||||
source_file,
|
||||
section,
|
||||
source_rank,
|
||||
source_weight,
|
||||
code,
|
||||
code_alias,
|
||||
ver_name
|
||||
FROM mobilemodels.mm_device_catalog
|
||||
WHERE alias_norm = ?
|
||||
ORDER BY source_rank ASC, record_id ASC
|
||||
LIMIT 20;
|
||||
```
|
||||
|
||||
### 2. 页面 SQL 查询
|
||||
|
||||
页面的 `SQL 查询` tab 也是基于这张主表。
|
||||
|
||||
查询流程：
|
||||
|
||||
1. 接收客户端原始上报值
|
||||
2. 服务端归一化为 `alias_norm`
|
||||
3. 按主表等值查询
|
||||
4. 返回结果列表、执行 SQL 和 JSON 输出
|
||||
|
||||
## 兼容视图
|
||||
|
||||
为了兼容旧系统，当前仍保留以下视图：
|
||||
|
||||
```sql
|
||||
mobilemodels.mm_device_lookup
|
||||
mobilemodels.mm_device_record
|
||||
mobilemodels.models
|
||||
python_services_test.models
|
||||
```
|
||||
|
||||
其中旧结构 `python_services_test.models` 主要用于兼容既有查询逻辑，不再作为主推接入方式。
|
||||
|
||||
## 兼容旧结构查询示例
|
||||
|
||||
```sql
|
||||
SELECT
|
||||
model,
|
||||
dtype,
|
||||
brand,
|
||||
brand_title,
|
||||
code,
|
||||
code_alias,
|
||||
model_name,
|
||||
ver_name
|
||||
FROM python_services_test.models
|
||||
WHERE model = ?
|
||||
LIMIT 20;
|
||||
```
|
||||
|
||||
## 归一化规则
|
||||
|
||||
`alias_norm` 统一按以下规则生成：
|
||||
|
||||
- 全部转小写
|
||||
- 仅保留 `[0-9a-z中文]`
|
||||
- 去掉空格、横线、下划线和其他标点
|
||||
|
||||
示例：
|
||||
|
||||
```text
|
||||
SM-G9980 -> smg9980
|
||||
iPhone14,2 -> iphone142
|
||||
NOH-AL00 -> nohal00
|
||||
```
|
||||
|
||||
## 数据来源
|
||||
|
||||
主表和索引数据均由以下流程生成：
|
||||
|
||||
1. 同步上游原始 markdown 数据
|
||||
2. 解析 `workspace/brands/*.md`
|
||||
3. 构建 `dist/device_index.json`
|
||||
4. 导出 `dist/mobilemodels_mysql_seed.sql`
|
||||
5. 加载 MySQL schema 与 seed
|
||||
|
||||
## 交付建议
|
||||
|
||||
- 第三方新接入优先使用 `mm_device_catalog`
|
||||
- 页面联调和数据库联调使用同一套原始数据与归一化规则
|
||||
- 生产环境务必替换默认数据库密码
|
||||
- [项目使用文档](../README.md)
|
||||
|
||||
+3
-163
@@ -1,165 +1,5 @@
|
||||
# Web UI
|
||||
# 项目使用文档入口
|
||||
|
||||
## 启动方式
|
||||
相关说明已统一整理到一份文档中，请查看：
|
||||
|
||||
在项目根目录执行：
|
||||
|
||||
```bash
|
||||
docker compose up --build -d
|
||||
```
|
||||
|
||||
如果要连本地测试 MySQL：
|
||||
|
||||
```bash
|
||||
docker compose -f docker-compose.yml -f docker-compose.test.yml up --build -d
|
||||
```
|
||||
|
||||
如需自定义环境变量：
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
Compose 的环境变量来源顺序：
|
||||
|
||||
1. 当前 shell 环境变量
|
||||
2. 项目根目录 `.env`
|
||||
3. `docker-compose.yml` 中的默认值
|
||||
|
||||
停止服务：
|
||||
|
||||
```bash
|
||||
docker compose down
|
||||
```
|
||||
|
||||
重置 MySQL 和运行期数据：
|
||||
|
||||
```bash
|
||||
docker compose down -v
|
||||
```
|
||||
|
||||
## 页面入口
|
||||
|
||||
- `http://127.0.0.1:8123/web/device_query.html`：设备查询
|
||||
- `http://127.0.0.1:8123/web/brand_management.html`：数据管理
|
||||
- `http://127.0.0.1:8123/web/device_query.html?view=docs`：相关文档
|
||||
|
||||
整个功能栈统一运行在 Docker Compose 中，不再依赖本地 Python。
|
||||
|
||||
原始数据工作空间位于项目内的 `workspace/` 目录。
|
||||
|
||||
## 启动后自动完成的动作
|
||||
|
||||
- 从 `workspace/brands` 构建设备索引
|
||||
- 生成 `dist/device_index.json`
|
||||
- 导出 MySQL seed 文件
|
||||
- 如开启 `MYSQL_AUTO_LOAD=1`，则加载 MySQL schema 与 seed 数据
|
||||
- 启动项目内置的每日自动同步调度器
|
||||
- 启动 Web 页面与 API 服务
|
||||
|
||||
首次启动默认值仍来自环境变量；之后可在 Web UI 中修改自动装载开关，运行期配置会持久化到 `/data/state/mysql_settings.json`。
|
||||
|
||||
## MySQL 默认连接
|
||||
|
||||
- Host: `127.0.0.1`
|
||||
- Port: `3306`
|
||||
- Database: `mobilemodels`
|
||||
- Reader User: `mobilemodels_reader`
|
||||
|
||||
如需自定义账号密码，请使用 `.env` 覆盖默认值。
|
||||
|
||||
常用变量：
|
||||
|
||||
- `MYSQL_HOST`
|
||||
- `MYSQL_PORT`
|
||||
- `TZ`
|
||||
- `MYSQL_ROOT_USER`
|
||||
- `MYSQL_ROOT_PASSWORD`
|
||||
- `MYSQL_DATABASE`
|
||||
- `MYSQL_READER_USER`
|
||||
- `MYSQL_READER_PASSWORD`
|
||||
- `MYSQL_AUTO_LOAD`
|
||||
- `SYNC_SCHEDULE_ENABLED`
|
||||
- `SYNC_SCHEDULE_TIME`
|
||||
- `GITHUB_PROXY_PREFIX`
|
||||
|
||||
## MySQL 模式
|
||||
|
||||
- 主配置 `docker-compose.yml`
|
||||
- 面向远程 MySQL
|
||||
- 默认不自动装载 schema/seed
|
||||
- 测试配置 `docker-compose.test.yml`
|
||||
- 额外启动一个本地测试 MySQL
|
||||
- 应用容器会自动把数据加载进去
|
||||
|
||||
## 设备查询
|
||||
|
||||
页面顶部统一提供三个导航入口：
|
||||
|
||||
- `设备查询`
|
||||
- `数据管理`
|
||||
- `相关文档`
|
||||
|
||||
设备查询页顶部包含两个页内 tab：
|
||||
|
||||
- `SQL 查询`
|
||||
- `索引查询`
|
||||
|
||||
### SQL 查询
|
||||
|
||||
- 直接调用 Compose 内 API 查询 MySQL 主表 `mobilemodels.mm_device_catalog`
|
||||
- 服务端先将输入归一化为 `alias_norm`
|
||||
- 页面展示实际执行的 SQL、返回结果和 JSON
|
||||
- 页面同时展示只读连接参数，便于核对配置
|
||||
|
||||
### 索引查询
|
||||
|
||||
- 基于 `dist/device_index.json` 内存索引进行快速识别
|
||||
- 适合前端联调、接口对比和结果核验
|
||||
|
||||
### 平台输入建议
|
||||
|
||||
- Android / iOS / HarmonyOS：直接使用客户端原始上报的 `model_raw`
|
||||
- 输入框会根据所选平台自动提供示例值
|
||||
- 未输入时，系统会使用当前平台的默认示例值发起查询
|
||||
|
||||
## 数据管理
|
||||
|
||||
数据管理页支持：
|
||||
|
||||
- 品牌列表管理
|
||||
- 品牌与厂商关系管理
|
||||
- 品牌同义词管理
|
||||
- 数据来源优先级管理
|
||||
- 外部 MySQL 手动初始化
|
||||
- 原始数据同步
|
||||
- 每日自动同步时间点设置
|
||||
- 索引数据查看与重新加载
|
||||
|
||||
### 外部 MySQL 手动初始化
|
||||
|
||||
- 页面入口：`数据管理 -> 原始数据同步 -> 初始化外部 MySQL`
|
||||
- 适用于 `MYSQL_AUTO_LOAD=0` 的远程 MySQL
|
||||
- 点击后会执行 schema 与 seed 导入，自动创建数据库，并重建 `mobilemodels` 相关表与视图
|
||||
- 执行前请确认 `MYSQL_HOST`、`MYSQL_PORT`、`MYSQL_ROOT_USER`、`MYSQL_ROOT_PASSWORD` 指向正确且具备建库建表权限
|
||||
|
||||
### MySQL 自动装载开关
|
||||
|
||||
- 页面入口：`数据管理 -> 原始数据同步 -> MySQL 自动装载`
|
||||
- 保存后会更新运行期配置 `/data/state/mysql_settings.json`
|
||||
- 会影响后续“开始同步原始数据”是否自动刷新 MySQL
|
||||
- 也会影响容器后续启动时是否自动执行 schema 与 seed 导入
|
||||
|
||||
### 每日自动同步
|
||||
|
||||
- 调度器运行在项目容器内部，不依赖 GitHub Actions
|
||||
- 页面入口：`数据管理 -> 原始数据同步`
|
||||
- 可设置是否启用，以及每天执行的时间点
|
||||
- 可选配置 GitHub 加速前缀，例如 `https://ghfast.top/`
|
||||
- 运行期配置持久化在 `/data/state/sync_schedule.json`
|
||||
- 时间按容器时区执行，默认值来自 `TZ`，默认 `Asia/Shanghai`
|
||||
|
||||
## 说明
|
||||
|
||||
- 原始数据、索引和 MySQL seed 运行时持久化在 Docker volume 中，不回写本地工作区
|
||||
- 交付环境建议覆盖默认的 `MYSQL_ROOT_PASSWORD` 和 `MYSQL_READER_PASSWORD`
|
||||
- [项目使用文档](../README.md)
|
||||
|
||||
@@ -2,24 +2,7 @@ CREATE DATABASE IF NOT EXISTS `mobilemodels`
|
||||
DEFAULT CHARACTER SET utf8mb4
|
||||
DEFAULT COLLATE utf8mb4_0900_ai_ci;
|
||||
|
||||
CREATE DATABASE IF NOT EXISTS `python_services_test`
|
||||
DEFAULT CHARACTER SET utf8mb4
|
||||
DEFAULT COLLATE utf8mb4_0900_ai_ci;
|
||||
|
||||
SET @drop_stmt = (
|
||||
SELECT CASE `TABLE_TYPE`
|
||||
WHEN 'BASE TABLE' THEN 'DROP TABLE `python_services_test`.`models`'
|
||||
WHEN 'VIEW' THEN 'DROP VIEW `python_services_test`.`models`'
|
||||
ELSE 'DO 0'
|
||||
END
|
||||
FROM `information_schema`.`TABLES`
|
||||
WHERE `TABLE_SCHEMA` = 'python_services_test' AND `TABLE_NAME` = 'models'
|
||||
LIMIT 1
|
||||
);
|
||||
SET @drop_stmt = COALESCE(@drop_stmt, 'DO 0');
|
||||
PREPARE stmt FROM @drop_stmt;
|
||||
EXECUTE stmt;
|
||||
DEALLOCATE PREPARE stmt;
|
||||
DROP DATABASE IF EXISTS `python_services_test`;
|
||||
|
||||
USE `mobilemodels`;
|
||||
|
||||
@@ -55,12 +38,12 @@ DEALLOCATE PREPARE stmt;
|
||||
|
||||
SET @drop_stmt = (
|
||||
SELECT CASE `TABLE_TYPE`
|
||||
WHEN 'BASE TABLE' THEN 'DROP TABLE `mm_device_record`'
|
||||
WHEN 'VIEW' THEN 'DROP VIEW `mm_device_record`'
|
||||
WHEN 'BASE TABLE' THEN 'DROP TABLE `mm_device_lookup`'
|
||||
WHEN 'VIEW' THEN 'DROP VIEW `mm_device_lookup`'
|
||||
ELSE 'DO 0'
|
||||
END
|
||||
FROM `information_schema`.`TABLES`
|
||||
WHERE `TABLE_SCHEMA` = 'mobilemodels' AND `TABLE_NAME` = 'mm_device_record'
|
||||
WHERE `TABLE_SCHEMA` = 'mobilemodels' AND `TABLE_NAME` = 'mm_device_lookup'
|
||||
LIMIT 1
|
||||
);
|
||||
SET @drop_stmt = COALESCE(@drop_stmt, 'DO 0');
|
||||
@@ -70,12 +53,12 @@ DEALLOCATE PREPARE stmt;
|
||||
|
||||
SET @drop_stmt = (
|
||||
SELECT CASE `TABLE_TYPE`
|
||||
WHEN 'BASE TABLE' THEN 'DROP TABLE `mm_device_lookup`'
|
||||
WHEN 'VIEW' THEN 'DROP VIEW `mm_device_lookup`'
|
||||
WHEN 'BASE TABLE' THEN 'DROP TABLE `mm_device_record`'
|
||||
WHEN 'VIEW' THEN 'DROP VIEW `mm_device_record`'
|
||||
ELSE 'DO 0'
|
||||
END
|
||||
FROM `information_schema`.`TABLES`
|
||||
WHERE `TABLE_SCHEMA` = 'mobilemodels' AND `TABLE_NAME` = 'mm_device_lookup'
|
||||
WHERE `TABLE_SCHEMA` = 'mobilemodels' AND `TABLE_NAME` = 'mm_device_record'
|
||||
LIMIT 1
|
||||
);
|
||||
SET @drop_stmt = COALESCE(@drop_stmt, 'DO 0');
|
||||
@@ -177,111 +160,3 @@ CREATE TABLE IF NOT EXISTS `mm_brand_lookup` (
|
||||
KEY `idx_mm_brand_lookup_parent_brand` (`parent_brand`),
|
||||
KEY `idx_mm_brand_lookup_market_brand` (`market_brand`)
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
|
||||
|
||||
CREATE OR REPLACE VIEW `mm_device_lookup` AS
|
||||
SELECT
|
||||
c.`alias_norm`,
|
||||
c.`record_id`,
|
||||
c.`device_name`,
|
||||
c.`brand`,
|
||||
c.`manufacturer_brand`,
|
||||
c.`parent_brand`,
|
||||
c.`market_brand`,
|
||||
c.`device_type`,
|
||||
c.`source_file`,
|
||||
c.`section`,
|
||||
c.`source_rank`,
|
||||
c.`source_weight`,
|
||||
c.`updated_at`
|
||||
FROM `mm_device_catalog` AS c;
|
||||
|
||||
CREATE OR REPLACE VIEW `mm_device_record` AS
|
||||
SELECT
|
||||
c.`record_id`,
|
||||
c.`device_name`,
|
||||
c.`brand`,
|
||||
c.`manufacturer_brand`,
|
||||
c.`parent_brand`,
|
||||
c.`market_brand`,
|
||||
c.`device_type`,
|
||||
c.`source_file`,
|
||||
c.`section`,
|
||||
c.`source_rank`,
|
||||
c.`source_weight`,
|
||||
CAST(CONCAT('[', GROUP_CONCAT(JSON_QUOTE(c.`model`) ORDER BY c.`model` SEPARATOR ','), ']') AS JSON) AS `aliases_json`,
|
||||
MAX(c.`updated_at`) AS `updated_at`
|
||||
FROM `mm_device_catalog` AS c
|
||||
GROUP BY
|
||||
c.`record_id`,
|
||||
c.`device_name`,
|
||||
c.`brand`,
|
||||
c.`manufacturer_brand`,
|
||||
c.`parent_brand`,
|
||||
c.`market_brand`,
|
||||
c.`device_type`,
|
||||
c.`source_file`,
|
||||
c.`section`,
|
||||
c.`source_rank`,
|
||||
c.`source_weight`;
|
||||
|
||||
CREATE OR REPLACE VIEW `vw_mm_device_lookup` AS
|
||||
SELECT
|
||||
c.`alias_norm`,
|
||||
c.`record_id`,
|
||||
c.`device_name`,
|
||||
c.`brand`,
|
||||
c.`manufacturer_brand`,
|
||||
c.`parent_brand`,
|
||||
c.`market_brand`,
|
||||
c.`device_type`,
|
||||
c.`source_file`,
|
||||
c.`section`,
|
||||
c.`source_rank`,
|
||||
c.`source_weight`,
|
||||
c.`updated_at`
|
||||
FROM `mm_device_catalog` AS c;
|
||||
|
||||
CREATE OR REPLACE VIEW `models` AS
|
||||
SELECT
|
||||
c.`model`,
|
||||
c.`device_type` AS `dtype`,
|
||||
c.`market_brand` AS `brand`,
|
||||
c.`manufacturer_brand` AS `brand_title`,
|
||||
c.`code`,
|
||||
c.`code_alias`,
|
||||
c.`device_name` AS `model_name`,
|
||||
c.`ver_name`,
|
||||
c.`updated_at` AS `update_at`,
|
||||
c.`hash_md5`,
|
||||
c.`hash_crc`
|
||||
FROM `mm_device_catalog` AS c;
|
||||
|
||||
CREATE OR REPLACE VIEW `vw_models` AS
|
||||
SELECT
|
||||
c.`model`,
|
||||
c.`device_type` AS `dtype`,
|
||||
c.`market_brand` AS `brand`,
|
||||
c.`manufacturer_brand` AS `brand_title`,
|
||||
c.`code`,
|
||||
c.`code_alias`,
|
||||
c.`device_name` AS `model_name`,
|
||||
c.`ver_name`,
|
||||
c.`updated_at` AS `update_at`,
|
||||
c.`hash_md5`,
|
||||
c.`hash_crc`
|
||||
FROM `mm_device_catalog` AS c;
|
||||
|
||||
CREATE OR REPLACE VIEW `python_services_test`.`models` AS
|
||||
SELECT
|
||||
`model`,
|
||||
`dtype`,
|
||||
`brand`,
|
||||
`brand_title`,
|
||||
`code`,
|
||||
`code_alias`,
|
||||
`model_name`,
|
||||
`ver_name`,
|
||||
`update_at`,
|
||||
`hash_md5`,
|
||||
`hash_crc`
|
||||
FROM `mobilemodels`.`models`;
|
||||
|
||||
@@ -260,9 +260,7 @@ def main() -> int:
|
||||
"",
|
||||
f"-- device_records: {device_record_count}",
|
||||
f"-- device_catalog_rows: {len(catalog_rows)}",
|
||||
f"-- device_lookup_rows: {len(catalog_rows)}",
|
||||
f"-- brand_lookup_rows: {len(brand_rows)}",
|
||||
f"-- legacy_models_rows: {len(catalog_rows)}",
|
||||
"",
|
||||
])
|
||||
|
||||
@@ -271,9 +269,7 @@ def main() -> int:
|
||||
print(f"Exported MySQL seed: {output_path}")
|
||||
print(f"device_records={device_record_count}")
|
||||
print(f"device_catalog_rows={len(catalog_rows)}")
|
||||
print(f"device_lookup_rows={len(catalog_rows)}")
|
||||
print(f"brand_lookup_rows={len(brand_rows)}")
|
||||
print(f"legacy_models_rows={len(catalog_rows)}")
|
||||
return 0
|
||||
|
||||
|
||||
|
||||
@@ -95,7 +95,6 @@ def ensure_reader_user(
|
||||
CREATE USER IF NOT EXISTS '{sql_string(reader_user)}'@'%' IDENTIFIED BY '{sql_string(reader_password)}';
|
||||
ALTER USER '{sql_string(reader_user)}'@'%' IDENTIFIED BY '{sql_string(reader_password)}';
|
||||
GRANT SELECT ON `{database}`.* TO '{sql_string(reader_user)}'@'%';
|
||||
GRANT SELECT ON `python_services_test`.* TO '{sql_string(reader_user)}'@'%';
|
||||
FLUSH PRIVILEGES;
|
||||
"""
|
||||
proc = subprocess.run(
|
||||
|
||||
+269
-2
@@ -30,9 +30,11 @@ MYSQL_CONFIG_PATH = DATA_ROOT / "state/mysql_settings.json"
|
||||
SYNC_LOCK = threading.Lock()
|
||||
SCHEDULE_LOCK = threading.Lock()
|
||||
MYSQL_CONFIG_LOCK = threading.Lock()
|
||||
INDEX_ALIAS_LOCK = threading.Lock()
|
||||
NORMALIZE_RE = re.compile(r"[^0-9a-z\u4e00-\u9fff]+")
|
||||
SCHEDULE_TIME_RE = re.compile(r"^(?:[01]?\d|2[0-3]):[0-5]\d$")
|
||||
SCHEDULER_POLL_SECONDS = 20
|
||||
INDEX_DEVICE_NAME_ALIAS_MAP: dict[str, list[str]] | None = None
|
||||
|
||||
|
||||
def truthy_env(name: str, default: str = "0") -> bool:
|
||||
@@ -301,6 +303,123 @@ def sql_string(value: str) -> str:
|
||||
return (value or "").replace("\\", "\\\\").replace("'", "''")
|
||||
|
||||
|
||||
def parse_apple_series_generation(name: str) -> dict[str, object] | None:
|
||||
text = re.sub(r"\s+", " ", str(name or "").strip())
|
||||
if not text:
|
||||
return None
|
||||
|
||||
ordinal_match = re.match(r"^(.*?)(?:\s*\((\d+)(?:st|nd|rd|th)\s+generation\)|\s+(\d+))$", text, re.IGNORECASE)
|
||||
if ordinal_match:
|
||||
base_label = re.sub(r"\s+", " ", str(ordinal_match.group(1) or "").strip())
|
||||
generation = int(ordinal_match.group(2) or ordinal_match.group(3) or "0")
|
||||
if base_label and generation > 0:
|
||||
return {
|
||||
"base_label": base_label,
|
||||
"base_norm": normalize_text(base_label),
|
||||
"generation": generation,
|
||||
"chip_like": False,
|
||||
}
|
||||
|
||||
chip_like = bool(re.search(r"\((?:[^)]*\b(?:a\d{1,2}|m\d{1,2})\b[^)]*)\)$", text, re.IGNORECASE))
|
||||
base_label = re.sub(r"\s*\([^)]*\)\s*$", "", text).strip()
|
||||
if not base_label:
|
||||
return None
|
||||
|
||||
return {
|
||||
"base_label": base_label,
|
||||
"base_norm": normalize_text(base_label),
|
||||
"generation": None,
|
||||
"chip_like": chip_like,
|
||||
}
|
||||
|
||||
|
||||
def build_index_device_name_alias_map() -> dict[str, list[str]]:
|
||||
if not INDEX_PATH.exists():
|
||||
return {}
|
||||
try:
|
||||
payload = json.loads(INDEX_PATH.read_text(encoding="utf-8"))
|
||||
except Exception:
|
||||
return {}
|
||||
|
||||
records = payload.get("records") if isinstance(payload, dict) else None
|
||||
if not isinstance(records, list):
|
||||
return {}
|
||||
|
||||
grouped: dict[str, dict[str, object]] = {}
|
||||
for record in records:
|
||||
if not isinstance(record, dict):
|
||||
continue
|
||||
brand = str(record.get("market_brand") or record.get("manufacturer_brand") or record.get("brand") or "").strip()
|
||||
if brand != "Apple":
|
||||
continue
|
||||
device_name = str(record.get("device_name") or "").strip()
|
||||
parsed = parse_apple_series_generation(device_name)
|
||||
if not parsed or not parsed.get("base_norm"):
|
||||
continue
|
||||
base_norm = str(parsed["base_norm"])
|
||||
group = grouped.setdefault(
|
||||
base_norm,
|
||||
{
|
||||
"base_label": str(parsed["base_label"]),
|
||||
"items": [],
|
||||
},
|
||||
)
|
||||
items = group["items"]
|
||||
if isinstance(items, list):
|
||||
items.append(
|
||||
{
|
||||
"device_name": device_name,
|
||||
"generation": parsed.get("generation"),
|
||||
"chip_like": bool(parsed.get("chip_like")),
|
||||
}
|
||||
)
|
||||
|
||||
alias_map: dict[str, set[str]] = {}
|
||||
for group in grouped.values():
|
||||
items = group.get("items")
|
||||
if not isinstance(items, list):
|
||||
continue
|
||||
explicit_generations = sorted(
|
||||
{
|
||||
int(item["generation"])
|
||||
for item in items
|
||||
if isinstance(item, dict) and isinstance(item.get("generation"), int) and int(item["generation"]) > 0
|
||||
}
|
||||
)
|
||||
max_explicit_generation = explicit_generations[-1] if explicit_generations else 0
|
||||
base_label = str(group.get("base_label") or "").strip()
|
||||
if not base_label:
|
||||
continue
|
||||
|
||||
for item in items:
|
||||
if not isinstance(item, dict):
|
||||
continue
|
||||
generation = item.get("generation")
|
||||
device_name = str(item.get("device_name") or "").strip()
|
||||
if not isinstance(generation, int):
|
||||
if device_name == base_label and max_explicit_generation >= 2:
|
||||
generation = 1
|
||||
elif item.get("chip_like") and max_explicit_generation >= 1:
|
||||
generation = max_explicit_generation + 1
|
||||
if not isinstance(generation, int) or generation <= 0:
|
||||
continue
|
||||
alias_key = normalize_text(f"{base_label} {generation}")
|
||||
if not alias_key:
|
||||
continue
|
||||
alias_map.setdefault(alias_key, set()).add(device_name)
|
||||
|
||||
return {key: sorted(values) for key, values in alias_map.items()}
|
||||
|
||||
|
||||
def resolve_index_device_names(alias_norm: str) -> list[str]:
|
||||
global INDEX_DEVICE_NAME_ALIAS_MAP
|
||||
if INDEX_DEVICE_NAME_ALIAS_MAP is None:
|
||||
with INDEX_ALIAS_LOCK:
|
||||
if INDEX_DEVICE_NAME_ALIAS_MAP is None:
|
||||
INDEX_DEVICE_NAME_ALIAS_MAP = build_index_device_name_alias_map()
|
||||
return list((INDEX_DEVICE_NAME_ALIAS_MAP or {}).get(alias_norm, []))
|
||||
|
||||
|
||||
def mysql_command(database: str | None = None) -> list[str]:
|
||||
command = [
|
||||
"mysql",
|
||||
@@ -358,7 +477,7 @@ def run_mysql_query(sql: str, database: str | None = None) -> list[dict[str, str
|
||||
def build_sql_query_payload(payload: dict[str, object]) -> dict[str, object]:
|
||||
raw_value = str(payload.get("model_raw") or payload.get("model") or "").strip()
|
||||
if not raw_value:
|
||||
raise RuntimeError("请填写设备标识。")
|
||||
raise RuntimeError("请填写设备标识或设备名称。")
|
||||
|
||||
alias_norm = normalize_text(raw_value)
|
||||
if not alias_norm:
|
||||
@@ -371,7 +490,7 @@ def build_sql_query_payload(payload: dict[str, object]) -> dict[str, object]:
|
||||
raise RuntimeError("limit 必须是数字。") from err
|
||||
limit = max(1, min(limit, 100))
|
||||
|
||||
sql = f"""
|
||||
exact_sql = f"""
|
||||
SELECT
|
||||
model,
|
||||
record_id,
|
||||
@@ -395,13 +514,149 @@ ORDER BY source_rank ASC, record_id ASC
|
||||
LIMIT {limit};
|
||||
""".strip()
|
||||
|
||||
rows = run_mysql_query(exact_sql)
|
||||
sql = exact_sql
|
||||
match_strategy = "alias_norm_exact"
|
||||
match_strategy_label = "alias_norm 精确匹配"
|
||||
resolved_device_names: list[str] = []
|
||||
|
||||
if not rows:
|
||||
resolved_device_names = resolve_index_device_names(alias_norm)
|
||||
if resolved_device_names:
|
||||
name_conditions = " OR ".join(
|
||||
f"device_name = '{sql_string(device_name)}'" for device_name in resolved_device_names
|
||||
)
|
||||
sql = f"""
|
||||
SELECT
|
||||
model,
|
||||
record_id,
|
||||
alias_norm,
|
||||
device_name,
|
||||
brand,
|
||||
manufacturer_brand,
|
||||
parent_brand,
|
||||
market_brand,
|
||||
device_type,
|
||||
source_file,
|
||||
section,
|
||||
source_rank,
|
||||
source_weight,
|
||||
code,
|
||||
code_alias,
|
||||
ver_name
|
||||
FROM mobilemodels.mm_device_catalog
|
||||
WHERE {name_conditions}
|
||||
ORDER BY source_rank ASC, record_id ASC
|
||||
LIMIT {limit};
|
||||
""".strip()
|
||||
rows = run_mysql_query(sql)
|
||||
if rows:
|
||||
match_strategy = "device_name_alias"
|
||||
match_strategy_label = "设备名称别名映射"
|
||||
|
||||
return {
|
||||
"query_mode": "sql",
|
||||
"model_raw": raw_value,
|
||||
"alias_norm": alias_norm,
|
||||
"limit": limit,
|
||||
"sql": sql,
|
||||
"match_strategy": match_strategy,
|
||||
"match_strategy_label": match_strategy_label,
|
||||
"resolved_device_names": resolved_device_names,
|
||||
"rows": rows,
|
||||
"row_count": len(rows),
|
||||
}
|
||||
|
||||
|
||||
def build_sql_device_name_query_payload(payload: dict[str, object]) -> dict[str, object]:
|
||||
raw_value = str(payload.get("device_name") or payload.get("name") or "").strip()
|
||||
if not raw_value:
|
||||
raise RuntimeError("请填写设备名称。")
|
||||
|
||||
limit_value = payload.get("limit", 20)
|
||||
try:
|
||||
limit = int(limit_value)
|
||||
except Exception as err:
|
||||
raise RuntimeError("limit 必须是数字。") from err
|
||||
limit = max(1, min(limit, 100))
|
||||
|
||||
alias_norm = normalize_text(raw_value)
|
||||
resolved_device_names = resolve_index_device_names(alias_norm) if alias_norm else []
|
||||
|
||||
rows: list[dict[str, str | None]] = []
|
||||
match_strategy = "device_name_like"
|
||||
match_strategy_label = "device_name 模糊匹配"
|
||||
|
||||
if resolved_device_names:
|
||||
name_conditions = " OR ".join(
|
||||
f"device_name = '{sql_string(device_name)}'" for device_name in resolved_device_names
|
||||
)
|
||||
sql = f"""
|
||||
SELECT
|
||||
model,
|
||||
record_id,
|
||||
alias_norm,
|
||||
device_name,
|
||||
brand,
|
||||
manufacturer_brand,
|
||||
parent_brand,
|
||||
market_brand,
|
||||
device_type,
|
||||
source_file,
|
||||
section,
|
||||
source_rank,
|
||||
source_weight,
|
||||
code,
|
||||
code_alias,
|
||||
ver_name
|
||||
FROM mobilemodels.mm_device_catalog
|
||||
WHERE {name_conditions}
|
||||
ORDER BY source_rank ASC, record_id ASC
|
||||
LIMIT {limit};
|
||||
""".strip()
|
||||
rows = run_mysql_query(sql)
|
||||
if rows:
|
||||
match_strategy = "device_name_alias"
|
||||
match_strategy_label = "设备名称别名映射"
|
||||
else:
|
||||
sql = ""
|
||||
|
||||
if not rows:
|
||||
sql = f"""
|
||||
SELECT
|
||||
model,
|
||||
record_id,
|
||||
alias_norm,
|
||||
device_name,
|
||||
brand,
|
||||
manufacturer_brand,
|
||||
parent_brand,
|
||||
market_brand,
|
||||
device_type,
|
||||
source_file,
|
||||
section,
|
||||
source_rank,
|
||||
source_weight,
|
||||
code,
|
||||
code_alias,
|
||||
ver_name
|
||||
FROM mobilemodels.mm_device_catalog
|
||||
WHERE device_name LIKE '%{sql_string(raw_value)}%'
|
||||
OR ver_name LIKE '%{sql_string(raw_value)}%'
|
||||
ORDER BY source_rank ASC, record_id ASC
|
||||
LIMIT {limit};
|
||||
""".strip()
|
||||
rows = run_mysql_query(sql)
|
||||
|
||||
return {
|
||||
"query_mode": "sql_device_name",
|
||||
"device_name": raw_value,
|
||||
"alias_norm": alias_norm,
|
||||
"limit": limit,
|
||||
"sql": sql,
|
||||
"match_strategy": match_strategy,
|
||||
"match_strategy_label": match_strategy_label,
|
||||
"resolved_device_names": resolved_device_names,
|
||||
"rows": rows,
|
||||
"row_count": len(rows),
|
||||
}
|
||||
@@ -715,6 +970,18 @@ class MobileModelsHandler(SimpleHTTPRequestHandler):
|
||||
except Exception as err:
|
||||
self._send_json({"error": str(err)}, status=HTTPStatus.INTERNAL_SERVER_ERROR)
|
||||
return
|
||||
if self.path == "/api/query-sql-device-name":
|
||||
try:
|
||||
content_length = int(self.headers.get("Content-Length", "0") or "0")
|
||||
raw_body = self.rfile.read(content_length) if content_length > 0 else b"{}"
|
||||
req = json.loads(raw_body.decode("utf-8") or "{}")
|
||||
payload = build_sql_device_name_query_payload(req if isinstance(req, dict) else {})
|
||||
self._send_json(payload)
|
||||
except RuntimeError as err:
|
||||
self._send_json({"error": str(err)}, status=HTTPStatus.BAD_REQUEST)
|
||||
except Exception as err:
|
||||
self._send_json({"error": str(err)}, status=HTTPStatus.INTERNAL_SERVER_ERROR)
|
||||
return
|
||||
if self.path == "/api/sync-schedule":
|
||||
try:
|
||||
content_length = int(self.headers.get("Content-Length", "0") or "0")
|
||||
|
||||
+74
-67
@@ -76,9 +76,10 @@
|
||||
max-width: 1200px;
|
||||
margin: 24px auto;
|
||||
padding: 0 16px 32px;
|
||||
}
|
||||
.page-card {
|
||||
padding: 16px;
|
||||
display: grid;
|
||||
grid-template-columns: 220px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
}
|
||||
.card {
|
||||
background: var(--card);
|
||||
@@ -134,6 +135,9 @@
|
||||
margin-top: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btns + .sub {
|
||||
margin-top: 10px;
|
||||
}
|
||||
button {
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
@@ -160,6 +164,9 @@
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
.brand-toolbar + .sub {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.brand-toolbar-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
@@ -229,10 +236,22 @@
|
||||
border-top: 1px dashed var(--line);
|
||||
}
|
||||
.source-order-wrap {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
background: #fbfcff;
|
||||
padding: 10px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
.source-order-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.source-order-toolbar .btns {
|
||||
margin-top: 0;
|
||||
}
|
||||
.source-order-toolbar .sub {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.source-order-list {
|
||||
list-style: none;
|
||||
@@ -243,14 +262,15 @@
|
||||
}
|
||||
.source-order-item {
|
||||
border: 1px solid #cfd9ea;
|
||||
border-radius: 10px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
padding: 8px 10px;
|
||||
padding: 12px 14px;
|
||||
display: grid;
|
||||
grid-template-columns: 18px 48px 1fr;
|
||||
gap: 10px;
|
||||
grid-template-columns: 18px 56px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
cursor: grab;
|
||||
box-shadow: 0 4px 12px rgba(36, 56, 89, 0.04);
|
||||
}
|
||||
.source-order-item.dragging {
|
||||
opacity: 0.45;
|
||||
@@ -261,35 +281,34 @@
|
||||
}
|
||||
.drag-handle {
|
||||
color: #7d8ea8;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
user-select: none;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.source-rank {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #3a5a8b;
|
||||
background: #edf4ff;
|
||||
border: 1px solid #cadeff;
|
||||
border-radius: 999px;
|
||||
padding: 2px 8px;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.source-name {
|
||||
font-size: 13px;
|
||||
font-size: 15px;
|
||||
color: #1f355a;
|
||||
word-break: break-all;
|
||||
}
|
||||
.manage-layout {
|
||||
margin-top: 14px;
|
||||
display: grid;
|
||||
grid-template-columns: 180px 1fr;
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
}
|
||||
.manage-tabs {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
position: sticky;
|
||||
top: calc(var(--nav-height) + 20px);
|
||||
padding: 12px;
|
||||
}
|
||||
.manage-content {
|
||||
min-width: 0;
|
||||
}
|
||||
.tab-btn {
|
||||
width: 100%;
|
||||
@@ -308,10 +327,10 @@
|
||||
}
|
||||
.panel-stack {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
.section-card {
|
||||
padding: 16px;
|
||||
padding: 14px;
|
||||
}
|
||||
.section-card .title:last-child,
|
||||
.section-card .sub:last-child {
|
||||
@@ -354,9 +373,9 @@
|
||||
background: #fbfcff;
|
||||
}
|
||||
.collapse-body {
|
||||
padding: 14px 16px 16px;
|
||||
padding: 12px 14px 14px;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
gap: 10px;
|
||||
}
|
||||
.sync-log {
|
||||
min-height: 240px;
|
||||
@@ -374,27 +393,37 @@
|
||||
min-height: 180px;
|
||||
}
|
||||
.sync-schedule-card {
|
||||
margin: 14px 0;
|
||||
padding: 12px;
|
||||
margin: 0;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
background: #fbfcff;
|
||||
}
|
||||
.sync-schedule-card .title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.sync-schedule-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 280px) minmax(180px, 240px);
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
align-items: end;
|
||||
}
|
||||
.sync-schedule-grid .full-row {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.sync-schedule-card .btns {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.sync-schedule-card .btns + .sub {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.check-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
min-height: 42px;
|
||||
min-height: 38px;
|
||||
}
|
||||
.check-row input {
|
||||
width: 16px;
|
||||
@@ -455,8 +484,6 @@
|
||||
border-radius: 10px;
|
||||
background: #fcfdff;
|
||||
padding: 12px;
|
||||
}
|
||||
.modal-list-grid {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
@@ -534,7 +561,7 @@
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
@media (max-width: 1020px) {
|
||||
.manage-layout {
|
||||
.wrap {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.manage-tabs {
|
||||
@@ -546,6 +573,12 @@
|
||||
.brand-toolbar-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.source-order-toolbar {
|
||||
align-items: stretch;
|
||||
}
|
||||
.source-order-toolbar .btns {
|
||||
width: 100%;
|
||||
}
|
||||
.brand-toolbar-btn,
|
||||
.brand-toolbar-btn.stat-btn,
|
||||
.brand-toolbar-btn.action-btn {
|
||||
@@ -573,12 +606,7 @@
|
||||
</nav>
|
||||
|
||||
<div class="wrap">
|
||||
<section class="card page-card">
|
||||
<h1 class="title">数据管理</h1>
|
||||
<p class="sub page-sub">把常用操作留在前面，把低频说明收起来。</p>
|
||||
|
||||
<div class="manage-layout">
|
||||
<aside class="manage-tabs">
|
||||
<aside class="card manage-tabs">
|
||||
<button id="tabBrandBtn" type="button" class="tab-btn active">品牌列表</button>
|
||||
<button id="tabSourceBtn" type="button" class="tab-btn">数据来源</button>
|
||||
<button id="tabSyncBtn" type="button" class="tab-btn">原始数据同步</button>
|
||||
@@ -623,17 +651,14 @@
|
||||
<section id="sourceTabPanel" class="manage-panel hidden">
|
||||
<div class="panel-stack">
|
||||
<article class="card section-card">
|
||||
<h3 class="title">数据来源排序</h3>
|
||||
<p class="sub">拖拽调整优先级，越靠前权重越高。</p>
|
||||
<div class="source-order-wrap">
|
||||
<div class="source-order-toolbar">
|
||||
<div class="btns">
|
||||
<button id="saveSourceOrderBtn" type="button" class="primary">保存来源排序</button>
|
||||
<button id="resetSourceOrderBtn" type="button">重置来源排序</button>
|
||||
</div>
|
||||
<div id="sourceOrderStats" class="sub">来源列表未加载。</div>
|
||||
</article>
|
||||
|
||||
<article class="card section-card">
|
||||
<div class="source-order-wrap">
|
||||
</div>
|
||||
<ul id="sourceOrderList" class="source-order-list">
|
||||
<li class="sub">暂无来源数据</li>
|
||||
</ul>
|
||||
@@ -644,21 +669,11 @@
|
||||
|
||||
<section id="syncTabPanel" class="manage-panel hidden">
|
||||
<div class="panel-stack">
|
||||
<article class="card section-card">
|
||||
<h3 class="title">原始数据同步</h3>
|
||||
<ul class="compact-note-list">
|
||||
<li>从上游拉取原始 markdown，并重建 <code>dist/device_index.json</code>。</li>
|
||||
<li>如果已开启 MySQL 自动装载，同步时也会刷新 MySQL。</li>
|
||||
<li>开始前请确认完整服务已经启动。</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<details class="card collapse-card">
|
||||
<summary>同步配置</summary>
|
||||
<details class="card collapse-card" open>
|
||||
<summary>配置</summary>
|
||||
<div class="collapse-body">
|
||||
<div class="sync-schedule-card">
|
||||
<h4 class="title">MySQL 自动装载</h4>
|
||||
<p class="sub">控制同步任务和容器后续启动时是否自动导入 schema 与 seed。</p>
|
||||
<div class="sync-schedule-grid">
|
||||
<label class="check-row">
|
||||
<input id="mysqlAutoLoadEnabled" type="checkbox" />
|
||||
@@ -673,7 +688,6 @@
|
||||
|
||||
<div class="sync-schedule-card">
|
||||
<h4 class="title">外部 MySQL 初始化</h4>
|
||||
<p class="sub">面向关闭自动装载的外部 MySQL，需要时再执行。</p>
|
||||
<div class="btns">
|
||||
<button id="initMysqlBtn" type="button">初始化外部 MySQL</button>
|
||||
</div>
|
||||
@@ -681,7 +695,6 @@
|
||||
|
||||
<div class="sync-schedule-card">
|
||||
<h4 class="title">每日自动同步</h4>
|
||||
<p class="sub">按固定时间自动拉取上游并重建索引与 MySQL Seed。</p>
|
||||
<div class="sync-schedule-grid">
|
||||
<label class="check-row">
|
||||
<input id="scheduleEnabled" type="checkbox" />
|
||||
@@ -712,7 +725,7 @@
|
||||
<div id="syncStatus" class="sub">正在检测同步能力。</div>
|
||||
</article>
|
||||
|
||||
<details class="card collapse-card">
|
||||
<details class="card collapse-card" open>
|
||||
<summary>任务日志</summary>
|
||||
<div class="collapse-body">
|
||||
<pre id="syncLog" class="sync-log compact mono">暂无同步记录</pre>
|
||||
@@ -724,14 +737,12 @@
|
||||
<section id="indexTabPanel" class="manage-panel hidden">
|
||||
<div class="panel-stack">
|
||||
<article class="card section-card">
|
||||
<h3 class="title">索引数据</h3>
|
||||
<p class="sub">查看当前索引加载状态，并在需要时手动刷新。</p>
|
||||
<div class="btns">
|
||||
<button id="reloadIndexBtn" type="button" class="primary">重新加载索引</button>
|
||||
</div>
|
||||
<div id="indexStatus" class="sub">索引尚未加载。</div>
|
||||
</article>
|
||||
<details class="card collapse-card">
|
||||
<details class="card collapse-card" open>
|
||||
<summary>索引详情</summary>
|
||||
<div class="collapse-body">
|
||||
<pre id="indexSummary" class="sync-log compact mono">暂无索引信息</pre>
|
||||
@@ -741,8 +752,6 @@
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="brandModalBackdrop" class="modal-backdrop hidden">
|
||||
<div class="modal-card">
|
||||
@@ -1449,7 +1458,6 @@
|
||||
}
|
||||
|
||||
brandModalListEl.innerHTML = `
|
||||
<div class="modal-list-grid">
|
||||
${items.map((item) => `
|
||||
<section class="modal-list-item">
|
||||
<div class="modal-list-head">
|
||||
@@ -1463,7 +1471,6 @@
|
||||
` : ""}
|
||||
</section>
|
||||
`).join("")}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
+356
-72
@@ -346,6 +346,10 @@
|
||||
margin-top: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btns + .sub,
|
||||
.btns + .field-tip {
|
||||
margin-top: 10px;
|
||||
}
|
||||
button {
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
@@ -558,6 +562,9 @@
|
||||
padding: 14px 16px;
|
||||
font-weight: 700;
|
||||
color: #1f355a;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.collapse-card summary::-webkit-details-marker {
|
||||
display: none;
|
||||
@@ -660,33 +667,166 @@
|
||||
margin: 24px auto;
|
||||
padding: 0 16px 32px;
|
||||
display: grid;
|
||||
grid-template-columns: 240px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.doc-link-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
.doc-sidebar {
|
||||
align-self: start;
|
||||
position: sticky;
|
||||
top: calc(var(--nav-height) + 24px);
|
||||
padding: 12px;
|
||||
max-height: calc(100vh - var(--nav-height) - 40px);
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
}
|
||||
.doc-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
.doc-preview {
|
||||
min-width: 0;
|
||||
padding: 18px;
|
||||
}
|
||||
.doc-toc {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.doc-toc-section {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 8px 0 10px;
|
||||
border-bottom: 1px solid #e7edf7;
|
||||
}
|
||||
.doc-toc-section:last-child {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.doc-toc-title {
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
color: #587095;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.doc-toc-links {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
.doc-toc-link {
|
||||
display: block;
|
||||
padding: 7px 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #d7e2f3;
|
||||
background: #f8fbff;
|
||||
color: #204470;
|
||||
color: #33527f;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.doc-link:hover {
|
||||
background: #eef5ff;
|
||||
.doc-toc-link:hover {
|
||||
background: #f4f8ff;
|
||||
border-color: #e0e8f6;
|
||||
}
|
||||
.doc-link.active {
|
||||
background: #0f6fff;
|
||||
border-color: #0f6fff;
|
||||
color: #fff;
|
||||
.doc-toc-link.level-2 {
|
||||
font-weight: 600;
|
||||
color: #28466f;
|
||||
}
|
||||
.doc-toc-link.level-3 {
|
||||
margin-left: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.doc-toc-link.level-4 {
|
||||
margin-left: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.markdown-body {
|
||||
color: #223047;
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.markdown-body > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.markdown-body > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.markdown-body h1,
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4 {
|
||||
margin: 1.2em 0 0.55em;
|
||||
color: #1b2a42;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.markdown-body h1 { font-size: 32px; }
|
||||
.markdown-body h2 { font-size: 24px; }
|
||||
.markdown-body h3 { font-size: 19px; }
|
||||
.markdown-body h4 { font-size: 16px; }
|
||||
.markdown-body p,
|
||||
.markdown-body ul,
|
||||
.markdown-body ol,
|
||||
.markdown-body blockquote {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
padding-left: 22px;
|
||||
}
|
||||
.markdown-body li + li {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.markdown-body blockquote {
|
||||
padding: 10px 14px;
|
||||
border-left: 4px solid #cddcf6;
|
||||
border-radius: 0 10px 10px 0;
|
||||
background: #f7faff;
|
||||
color: #52627a;
|
||||
}
|
||||
.markdown-body pre {
|
||||
margin: 0 0 1em;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
background: #f6f8fb;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
overflow: auto;
|
||||
}
|
||||
.markdown-body pre code {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
.markdown-body code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 0.92em;
|
||||
padding: 1px 6px;
|
||||
border-radius: 6px;
|
||||
background: #edf3ff;
|
||||
color: #294f88;
|
||||
border: 1px solid #d7e3fb;
|
||||
}
|
||||
.markdown-body hr {
|
||||
border: 0;
|
||||
border-top: 1px solid #d8e1ef;
|
||||
margin: 1.2em 0;
|
||||
}
|
||||
.markdown-body a {
|
||||
color: #0f6fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.markdown-body a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4 {
|
||||
scroll-margin-top: calc(var(--nav-height) + 20px);
|
||||
}
|
||||
.doc-section + .doc-section {
|
||||
margin-top: 14px;
|
||||
@@ -700,6 +840,13 @@
|
||||
.query-sidebar {
|
||||
position: static;
|
||||
}
|
||||
.doc-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.doc-sidebar {
|
||||
position: static;
|
||||
max-height: none;
|
||||
}
|
||||
.search-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -722,7 +869,7 @@
|
||||
<a href="/web/device_query.html" class="brand">MobileModels</a>
|
||||
<a href="/web/device_query.html" class="item" id="topNavQuery">设备查询</a>
|
||||
<a href="/web/brand_management.html" class="item">数据管理</a>
|
||||
<a href="/web/device_query.html?view=docs" class="item" id="topNavDocs">相关文档</a>
|
||||
<a href="/web/device_query.html?view=docs" class="item" id="topNavDocs">使用文档</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -737,15 +884,17 @@
|
||||
<div id="indexQueryPanel" class="page-panel hidden">
|
||||
<div class="wrap query-wrap">
|
||||
<aside class="query-sidebar">
|
||||
<article class="card sidebar-card">
|
||||
<h2 class="title">使用提示</h2>
|
||||
<details class="card collapse-card sidebar-card" open>
|
||||
<summary>使用提示</summary>
|
||||
<div class="collapse-body">
|
||||
<ul class="compact-note-list">
|
||||
<li>基于 <code>dist/device_index.json</code> 快速识别，适合联调和比对。</li>
|
||||
<li>Android / iOS / HarmonyOS 一般只需要平台和 <code>model_raw</code>。</li>
|
||||
<li>也支持直接输入常见设备名，例如 <code>iPad mini 7</code>。</li>
|
||||
<li>归一化规则：转小写，只保留字母数字和中文，去掉空格与标点。</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</details>
|
||||
</aside>
|
||||
|
||||
<section class="grid query-main">
|
||||
@@ -850,7 +999,7 @@
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<details class="card collapse-card">
|
||||
<details class="card collapse-card" open>
|
||||
<summary>调试数据</summary>
|
||||
<div class="collapse-body">
|
||||
<div class="collapse-section">
|
||||
@@ -878,7 +1027,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="collapse-section">
|
||||
<p class="section-label">登录设备管理取字段</p>
|
||||
<p class="section-label">设备管理取字段</p>
|
||||
<ul class="compact-note-list">
|
||||
<li>设备展示名：<code>device_name</code></li>
|
||||
<li>品牌展示：<code>market_brand</code>；为空时使用 <code>brand</code></li>
|
||||
@@ -926,15 +1075,17 @@ NOH-AL00 -> nohal00</pre>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<article class="card sidebar-card">
|
||||
<h2 class="title">只读连接参数</h2>
|
||||
<details class="card collapse-card sidebar-card" open>
|
||||
<summary>只读连接参数</summary>
|
||||
<div class="collapse-body">
|
||||
<div id="sqlReadonlyInfo" class="credential-grid">
|
||||
<div class="credential-item">
|
||||
<span class="credential-label">Host</span>
|
||||
<p class="credential-value">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</details>
|
||||
</aside>
|
||||
|
||||
<section class="grid query-main">
|
||||
@@ -1038,7 +1189,7 @@ NOH-AL00 -> nohal00</pre>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<details class="card collapse-card">
|
||||
<details class="card collapse-card" open>
|
||||
<summary>调试信息</summary>
|
||||
<div class="collapse-body">
|
||||
<div class="collapse-section">
|
||||
@@ -1058,24 +1209,28 @@ NOH-AL00 -> nohal00</pre>
|
||||
<div id="deviceNameSqlQueryPanel" class="page-panel hidden">
|
||||
<div class="wrap query-wrap">
|
||||
<aside class="query-sidebar">
|
||||
<article class="card sidebar-card">
|
||||
<h2 class="title">使用提示</h2>
|
||||
<details class="card collapse-card sidebar-card" open>
|
||||
<summary>使用提示</summary>
|
||||
<div class="collapse-body">
|
||||
<ul class="compact-note-list">
|
||||
<li>这里只接受设备名称，例如 <code>iPad mini 7</code>、<code>iPhone SE 3</code>。</li>
|
||||
<li>会先尝试别名映射，再做 <code>device_name</code> / <code>ver_name</code> 查询。</li>
|
||||
<li>底层仍查询 <code>mobilemodels.mm_device_catalog</code>，用于和设备标识查询对齐。</li>
|
||||
<li>只读连接参数固定展示在左侧，执行 SQL 和返回 JSON 保留在下方调试信息。</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="card sidebar-card">
|
||||
<h2 class="title">只读连接参数</h2>
|
||||
</div>
|
||||
</details>
|
||||
<details class="card collapse-card sidebar-card" open>
|
||||
<summary>只读连接参数</summary>
|
||||
<div class="collapse-body">
|
||||
<div id="deviceNameSqlReadonlyInfo" class="credential-grid">
|
||||
<div class="credential-item">
|
||||
<span class="credential-label">Host</span>
|
||||
<p class="credential-value">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</details>
|
||||
</aside>
|
||||
|
||||
<section class="grid query-main">
|
||||
@@ -1122,7 +1277,7 @@ NOH-AL00 -> nohal00</pre>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<details class="card collapse-card">
|
||||
<details class="card collapse-card" open>
|
||||
<summary>调试信息</summary>
|
||||
<div class="collapse-body">
|
||||
<div class="collapse-section">
|
||||
@@ -1141,20 +1296,12 @@ NOH-AL00 -> nohal00</pre>
|
||||
|
||||
<div id="docsPanel" class="page-panel hidden">
|
||||
<div class="doc-grid">
|
||||
<article class="card">
|
||||
<h1 class="title">相关文档</h1>
|
||||
<p class="sub">这里保留完整文档阅读；查询约定已经前移到各个查询页的使用提示里。</p>
|
||||
<div class="doc-link-list">
|
||||
<button type="button" class="doc-link active" data-doc-path="/docs/mysql-query-design.md" data-doc-title="MySQL 设计说明">MySQL 设计说明</button>
|
||||
<button type="button" class="doc-link" data-doc-path="/docs/web-ui.md" data-doc-title="Web 使用说明">Web 使用说明</button>
|
||||
<button type="button" class="doc-link" data-doc-path="/README.md" data-doc-title="项目 README">项目 README</button>
|
||||
</div>
|
||||
</article>
|
||||
<aside class="card doc-sidebar">
|
||||
<nav id="docPanelToc" class="doc-toc" aria-label="文档目录"></nav>
|
||||
</aside>
|
||||
|
||||
<article class="card">
|
||||
<h2 class="title" id="docPanelTitle">MySQL 设计说明</h2>
|
||||
<p class="sub" id="docPanelPath">/docs/mysql-query-design.md</p>
|
||||
<pre id="docPanelContent">加载中...</pre>
|
||||
<article class="card doc-preview">
|
||||
<div id="docPanelContent" class="markdown-body">加载中...</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
@@ -1196,9 +1343,8 @@ NOH-AL00 -> nohal00</pre>
|
||||
const deviceNameSqlStatementEl = document.getElementById("deviceNameSqlStatement");
|
||||
const deviceNameSqlJsonOutputEl = document.getElementById("deviceNameSqlJsonOutput");
|
||||
const deviceNameSqlReadonlyInfoEl = document.getElementById("deviceNameSqlReadonlyInfo");
|
||||
const docPanelTitleEl = document.getElementById("docPanelTitle");
|
||||
const docPanelPathEl = document.getElementById("docPanelPath");
|
||||
const docPanelContentEl = document.getElementById("docPanelContent");
|
||||
const docPanelTocEl = document.getElementById("docPanelToc");
|
||||
const indexQueryPanelEl = document.getElementById("indexQueryPanel");
|
||||
const sqlQueryPanelEl = document.getElementById("sqlQueryPanel");
|
||||
const deviceNameSqlQueryPanelEl = document.getElementById("deviceNameSqlQueryPanel");
|
||||
@@ -2020,6 +2166,159 @@ NOH-AL00 -> nohal00</pre>
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
function renderInlineMarkdown(text) {
|
||||
let html = escapeHtml(text || "");
|
||||
html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
|
||||
html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
|
||||
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer">$1</a>');
|
||||
return html;
|
||||
}
|
||||
|
||||
function slugify(text) {
|
||||
return String(text || "")
|
||||
.toLowerCase()
|
||||
.replace(/<[^>]+>/g, "")
|
||||
.replace(/[^0-9a-z\u4e00-\u9fff]+/g, "-")
|
||||
.replace(/^-+|-+$/g, "") || "section";
|
||||
}
|
||||
|
||||
function renderMarkdown(text) {
|
||||
const normalized = String(text || "").replace(/\r\n/g, "\n");
|
||||
const lines = normalized.split("\n");
|
||||
const chunks = [];
|
||||
const headingIds = new Map();
|
||||
let i = 0;
|
||||
|
||||
while (i < lines.length) {
|
||||
const line = lines[i];
|
||||
const trimmed = line.trim();
|
||||
|
||||
if (!trimmed) {
|
||||
i += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (trimmed.startsWith("```")) {
|
||||
const lang = trimmed.slice(3).trim();
|
||||
const codeLines = [];
|
||||
i += 1;
|
||||
while (i < lines.length && !lines[i].trim().startsWith("```")) {
|
||||
codeLines.push(lines[i]);
|
||||
i += 1;
|
||||
}
|
||||
if (i < lines.length) i += 1;
|
||||
const className = lang ? ` class="language-${escapeHtml(lang)}"` : "";
|
||||
chunks.push(`<pre><code${className}>${escapeHtml(codeLines.join("\n"))}</code></pre>`);
|
||||
continue;
|
||||
}
|
||||
|
||||
const heading = trimmed.match(/^(#{1,4})\s+(.*)$/);
|
||||
if (heading) {
|
||||
const level = heading[1].length;
|
||||
const renderedText = renderInlineMarkdown(heading[2]);
|
||||
const baseId = slugify(heading[2]);
|
||||
const count = headingIds.get(baseId) || 0;
|
||||
headingIds.set(baseId, count + 1);
|
||||
const headingId = count ? `${baseId}-${count + 1}` : baseId;
|
||||
chunks.push(`<h${level} id="${headingId}">${renderedText}</h${level}>`);
|
||||
i += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (/^---+$/.test(trimmed) || /^___+$/.test(trimmed)) {
|
||||
chunks.push("<hr />");
|
||||
i += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (/^>\s?/.test(trimmed)) {
|
||||
const quoteLines = [];
|
||||
while (i < lines.length && /^>\s?/.test(lines[i].trim())) {
|
||||
quoteLines.push(lines[i].trim().replace(/^>\s?/, ""));
|
||||
i += 1;
|
||||
}
|
||||
chunks.push(`<blockquote>${renderInlineMarkdown(quoteLines.join(" "))}</blockquote>`);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (/^[-*]\s+/.test(trimmed)) {
|
||||
const items = [];
|
||||
while (i < lines.length && /^[-*]\s+/.test(lines[i].trim())) {
|
||||
items.push(lines[i].trim().replace(/^[-*]\s+/, ""));
|
||||
i += 1;
|
||||
}
|
||||
chunks.push(`<ul>${items.map((item) => `<li>${renderInlineMarkdown(item)}</li>`).join("")}</ul>`);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (/^\d+\.\s+/.test(trimmed)) {
|
||||
const items = [];
|
||||
while (i < lines.length && /^\d+\.\s+/.test(lines[i].trim())) {
|
||||
items.push(lines[i].trim().replace(/^\d+\.\s+/, ""));
|
||||
i += 1;
|
||||
}
|
||||
chunks.push(`<ol>${items.map((item) => `<li>${renderInlineMarkdown(item)}</li>`).join("")}</ol>`);
|
||||
continue;
|
||||
}
|
||||
|
||||
const paragraphLines = [];
|
||||
while (i < lines.length) {
|
||||
const candidate = lines[i];
|
||||
const candidateTrim = candidate.trim();
|
||||
if (!candidateTrim) break;
|
||||
if (
|
||||
candidateTrim.startsWith("```")
|
||||
|| /^(#{1,4})\s+/.test(candidateTrim)
|
||||
|| /^[-*]\s+/.test(candidateTrim)
|
||||
|| /^\d+\.\s+/.test(candidateTrim)
|
||||
|| /^>\s?/.test(candidateTrim)
|
||||
|| /^---+$/.test(candidateTrim)
|
||||
|| /^___+$/.test(candidateTrim)
|
||||
) {
|
||||
break;
|
||||
}
|
||||
paragraphLines.push(candidateTrim);
|
||||
i += 1;
|
||||
}
|
||||
chunks.push(`<p>${renderInlineMarkdown(paragraphLines.join(" "))}</p>`);
|
||||
}
|
||||
|
||||
return chunks.join("");
|
||||
}
|
||||
|
||||
function buildDocPanelToc(container) {
|
||||
const headings = Array.from(container.querySelectorAll("h2, h3, h4"));
|
||||
if (!headings.length) {
|
||||
docPanelTocEl.innerHTML = `<div class="sub">当前文档没有可用目录。</div>`;
|
||||
return;
|
||||
}
|
||||
const groups = [];
|
||||
let currentGroup = null;
|
||||
headings.forEach((heading) => {
|
||||
const level = Number(heading.tagName.slice(1));
|
||||
const item = {
|
||||
id: heading.id,
|
||||
text: escapeHtml(heading.textContent || ""),
|
||||
level,
|
||||
};
|
||||
if (level === 2 || !currentGroup) {
|
||||
currentGroup = { heading: item, children: [] };
|
||||
groups.push(currentGroup);
|
||||
return;
|
||||
}
|
||||
currentGroup.children.push(item);
|
||||
});
|
||||
docPanelTocEl.innerHTML = groups.map((group) => `
|
||||
<section class="doc-toc-section">
|
||||
<div class="doc-toc-title">${group.heading.text}</div>
|
||||
<div class="doc-toc-links">
|
||||
<a class="doc-toc-link level-${group.heading.level}" href="#${group.heading.id}">${group.heading.text}</a>
|
||||
${group.children.map((item) => `<a class="doc-toc-link level-${item.level}" href="#${item.id}">${item.text}</a>`).join("")}
|
||||
</div>
|
||||
</section>
|
||||
`).join("");
|
||||
}
|
||||
|
||||
function activateTopTab(tabName) {
|
||||
document.querySelectorAll(".page-tab").forEach((el) => {
|
||||
const active = el.dataset.tab === tabName;
|
||||
@@ -2066,14 +2365,7 @@ NOH-AL00 -> nohal00</pre>
|
||||
}
|
||||
|
||||
async function loadDocInPanel(path, title) {
|
||||
docPanelTitleEl.textContent = title || "相关文档";
|
||||
docPanelPathEl.textContent = path || "";
|
||||
docPanelContentEl.textContent = "加载中...";
|
||||
|
||||
document.querySelectorAll(".doc-link[data-doc-path]").forEach((el) => {
|
||||
const active = el.dataset.docPath === path;
|
||||
el.classList.toggle("active", active);
|
||||
});
|
||||
docPanelContentEl.innerHTML = "<p>加载中...</p>";
|
||||
|
||||
try {
|
||||
const resp = await fetch(path, { cache: "no-store" });
|
||||
@@ -2081,9 +2373,11 @@ NOH-AL00 -> nohal00</pre>
|
||||
throw new Error(`HTTP ${resp.status}`);
|
||||
}
|
||||
const text = await resp.text();
|
||||
docPanelContentEl.textContent = text;
|
||||
docPanelContentEl.innerHTML = renderMarkdown(text);
|
||||
buildDocPanelToc(docPanelContentEl);
|
||||
} catch (err) {
|
||||
docPanelContentEl.textContent = `加载失败\n${err.message || err}`;
|
||||
docPanelContentEl.innerHTML = `<p>加载失败</p><pre>${escapeHtml(err.message || String(err))}</pre>`;
|
||||
docPanelTocEl.innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2308,10 +2602,6 @@ NOH-AL00 -> nohal00</pre>
|
||||
<span class="pill">命中方式: ${escapeHtml(output.match_strategy_label || strategyLabel)}</span>
|
||||
</div>
|
||||
<p class="sub">${description}</p>
|
||||
<div class="helper-box">
|
||||
<p class="helper-title">登录设备管理字段建议</p>
|
||||
<p>推荐取 <code>device_name</code> / <code>market_brand</code>（为空退回 <code>brand</code>）/ <code>parent_brand</code>（为空退回 <code>manufacturer_brand</code>）/ <code>device_type</code>。</p>
|
||||
</div>
|
||||
${Array.isArray(output.resolved_device_names) && output.resolved_device_names.length
|
||||
? `<div class="mono">设备名别名映射: ${escapeHtml(output.resolved_device_names.join(" | "))}</div>`
|
||||
: ""}
|
||||
@@ -2439,19 +2729,13 @@ NOH-AL00 -> nohal00</pre>
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll(".doc-link[data-doc-path]").forEach((el) => {
|
||||
el.addEventListener("click", () => {
|
||||
loadDocInPanel(el.dataset.docPath || "", el.dataset.docTitle || "相关文档");
|
||||
});
|
||||
});
|
||||
|
||||
loadQueryFormState();
|
||||
bindQueryFormPersistence();
|
||||
loadActiveTopTab();
|
||||
syncReportPlatformUI();
|
||||
syncSqlPlatformUI();
|
||||
loadReadonlyInfo();
|
||||
loadDocInPanel("/docs/mysql-query-design.md", "MySQL 设计说明");
|
||||
loadDocInPanel("/README.md", "项目使用文档");
|
||||
loadIndexFromPath();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
+345
-44
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MobileModels 文档查看</title>
|
||||
<title>MobileModels 使用文档</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f5f7fb;
|
||||
@@ -12,23 +12,31 @@
|
||||
--sub: #566173;
|
||||
--line: #d9e0ea;
|
||||
--brand: #0f6fff;
|
||||
--nav-height: 52px;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
padding-top: var(--nav-height);
|
||||
font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
|
||||
background: radial-gradient(circle at 0 0, #eef4ff 0, var(--bg) 40%), var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
.top-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: linear-gradient(180deg, #1f2a3a, #1a2431);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 10px 30px rgba(14, 25, 42, 0.16);
|
||||
}
|
||||
.top-nav-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
height: 52px;
|
||||
height: var(--nav-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@@ -56,7 +64,18 @@
|
||||
margin: 24px auto;
|
||||
padding: 0 16px 32px;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: 260px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
.doc-nav-card {
|
||||
position: sticky;
|
||||
top: calc(var(--nav-height) + 16px);
|
||||
z-index: 10;
|
||||
max-height: calc(100vh - var(--nav-height) - 32px);
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
.card {
|
||||
background: var(--card);
|
||||
@@ -76,39 +95,166 @@
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
.doc-toc {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 9px 14px;
|
||||
.doc-toc-section {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 8px 0 10px;
|
||||
border-bottom: 1px solid #e7edf7;
|
||||
}
|
||||
.doc-toc-section:last-child {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.doc-toc-title {
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
color: #587095;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.doc-toc-links {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
.doc-toc-link {
|
||||
display: block;
|
||||
padding: 7px 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #c8d6ee;
|
||||
background: #f7faff;
|
||||
color: #244775;
|
||||
color: #33527f;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.btn:hover {
|
||||
background: #eef5ff;
|
||||
.doc-toc-link:hover {
|
||||
background: #f4f8ff;
|
||||
border-color: #e0e8f6;
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
.doc-toc-link.level-2 {
|
||||
font-weight: 600;
|
||||
color: #28466f;
|
||||
}
|
||||
.doc-toc-link.level-3 {
|
||||
margin-left: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.doc-toc-link.level-4 {
|
||||
margin-left: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.doc-shell {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.doc-shell .markdown-body {
|
||||
padding: 18px;
|
||||
}
|
||||
.markdown-body {
|
||||
color: #223047;
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.markdown-body > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.markdown-body > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.markdown-body h1,
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4 {
|
||||
margin: 1.2em 0 0.55em;
|
||||
color: #1b2a42;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.markdown-body h1 { font-size: 32px; }
|
||||
.markdown-body h2 { font-size: 24px; }
|
||||
.markdown-body h3 { font-size: 19px; }
|
||||
.markdown-body h4 { font-size: 16px; }
|
||||
.markdown-body p,
|
||||
.markdown-body ul,
|
||||
.markdown-body ol,
|
||||
.markdown-body blockquote {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
padding-left: 22px;
|
||||
}
|
||||
.markdown-body li + li {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.markdown-body blockquote {
|
||||
padding: 10px 14px;
|
||||
border-left: 4px solid #cddcf6;
|
||||
border-radius: 0 10px 10px 0;
|
||||
background: #f7faff;
|
||||
color: #52627a;
|
||||
}
|
||||
.markdown-body pre {
|
||||
margin: 0 0 1em;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
background: #f6f8fb;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
overflow: auto;
|
||||
}
|
||||
.markdown-body pre code {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
.markdown-body code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 0.92em;
|
||||
padding: 1px 6px;
|
||||
border-radius: 6px;
|
||||
background: #edf3ff;
|
||||
color: #294f88;
|
||||
border: 1px solid #d7e3fb;
|
||||
}
|
||||
.markdown-body hr {
|
||||
border: 0;
|
||||
border-top: 1px solid #d8e1ef;
|
||||
margin: 1.2em 0;
|
||||
}
|
||||
.markdown-body a {
|
||||
color: #0f6fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.markdown-body a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4 {
|
||||
scroll-margin-top: calc(var(--nav-height) + 20px);
|
||||
}
|
||||
@media (max-width: 1020px) {
|
||||
.wrap {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.doc-nav-card {
|
||||
position: static;
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -117,51 +263,204 @@
|
||||
<a href="/web/device_query.html" class="brand">MobileModels</a>
|
||||
<a href="/web/device_query.html" class="item">设备查询</a>
|
||||
<a href="/web/brand_management.html" class="item">数据管理</a>
|
||||
<a href="/web/device_query.html?view=docs" class="item active">相关文档</a>
|
||||
<a href="/web/device_query.html?view=docs" class="item active">使用文档</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="wrap">
|
||||
<section class="card">
|
||||
<h1 class="title" id="docTitle">文档查看</h1>
|
||||
<p class="sub" id="docPath">正在加载文档...</p>
|
||||
<div class="btns">
|
||||
<a class="btn" href="/web/doc_viewer.html?path=/docs/mysql-query-design.md&title=MySQL%20%E8%AE%BE%E8%AE%A1%E8%AF%B4%E6%98%8E">MySQL 设计说明</a>
|
||||
<a class="btn" href="/web/doc_viewer.html?path=/docs/web-ui.md&title=Web%20%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E">Web 使用说明</a>
|
||||
<a class="btn" href="/web/doc_viewer.html?path=/README.md&title=%E9%A1%B9%E7%9B%AE%20README">项目 README</a>
|
||||
</div>
|
||||
<section class="card doc-nav-card">
|
||||
<h1 class="title" id="docTitle">使用文档</h1>
|
||||
<div id="docToc" class="doc-toc" aria-label="文档目录"></div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<pre id="docContent">加载中...</pre>
|
||||
<section class="card doc-shell">
|
||||
<div id="docContent" class="markdown-body">加载中...</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const ALLOWED_DOCS = new Map([
|
||||
["/docs/mysql-query-design.md", "MySQL 设计说明"],
|
||||
["/docs/web-ui.md", "Web 使用说明"],
|
||||
["/README.md", "项目 README"],
|
||||
["/README.md", "项目使用文档"],
|
||||
]);
|
||||
|
||||
async function main() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const path = params.get("path") || "/docs/mysql-query-design.md";
|
||||
const title = params.get("title") || ALLOWED_DOCS.get(path) || "文档查看";
|
||||
const path = params.get("path") || "/README.md";
|
||||
const title = params.get("title") || ALLOWED_DOCS.get(path) || "使用文档";
|
||||
const docTitleEl = document.getElementById("docTitle");
|
||||
const docPathEl = document.getElementById("docPath");
|
||||
const docContentEl = document.getElementById("docContent");
|
||||
const docTocEl = document.getElementById("docToc");
|
||||
|
||||
function escapeHtml(text) {
|
||||
return String(text || "")
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
function renderInlineMarkdown(text) {
|
||||
let html = escapeHtml(text || "");
|
||||
html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
|
||||
html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
|
||||
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer">$1</a>');
|
||||
return html;
|
||||
}
|
||||
|
||||
function slugify(text) {
|
||||
return String(text || "")
|
||||
.toLowerCase()
|
||||
.replace(/<[^>]+>/g, "")
|
||||
.replace(/[^0-9a-z\u4e00-\u9fff]+/g, "-")
|
||||
.replace(/^-+|-+$/g, "") || "section";
|
||||
}
|
||||
|
||||
function renderMarkdown(text) {
|
||||
const normalized = String(text || "").replace(/\r\n/g, "\n");
|
||||
const lines = normalized.split("\n");
|
||||
const chunks = [];
|
||||
const headingIds = new Map();
|
||||
let i = 0;
|
||||
|
||||
while (i < lines.length) {
|
||||
const line = lines[i];
|
||||
const trimmed = line.trim();
|
||||
|
||||
if (!trimmed) {
|
||||
i += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (trimmed.startsWith("```")) {
|
||||
const lang = trimmed.slice(3).trim();
|
||||
const codeLines = [];
|
||||
i += 1;
|
||||
while (i < lines.length && !lines[i].trim().startsWith("```")) {
|
||||
codeLines.push(lines[i]);
|
||||
i += 1;
|
||||
}
|
||||
if (i < lines.length) i += 1;
|
||||
const className = lang ? ` class="language-${escapeHtml(lang)}"` : "";
|
||||
chunks.push(`<pre><code${className}>${escapeHtml(codeLines.join("\n"))}</code></pre>`);
|
||||
continue;
|
||||
}
|
||||
|
||||
const heading = trimmed.match(/^(#{1,4})\s+(.*)$/);
|
||||
if (heading) {
|
||||
const level = heading[1].length;
|
||||
const renderedText = renderInlineMarkdown(heading[2]);
|
||||
const baseId = slugify(heading[2]);
|
||||
const count = headingIds.get(baseId) || 0;
|
||||
headingIds.set(baseId, count + 1);
|
||||
const headingId = count ? `${baseId}-${count + 1}` : baseId;
|
||||
chunks.push(`<h${level} id="${headingId}">${renderedText}</h${level}>`);
|
||||
i += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (/^---+$/.test(trimmed) || /^___+$/.test(trimmed)) {
|
||||
chunks.push("<hr />");
|
||||
i += 1;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (/^>\s?/.test(trimmed)) {
|
||||
const quoteLines = [];
|
||||
while (i < lines.length && /^>\s?/.test(lines[i].trim())) {
|
||||
quoteLines.push(lines[i].trim().replace(/^>\s?/, ""));
|
||||
i += 1;
|
||||
}
|
||||
chunks.push(`<blockquote>${renderInlineMarkdown(quoteLines.join(" "))}</blockquote>`);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (/^[-*]\s+/.test(trimmed)) {
|
||||
const items = [];
|
||||
while (i < lines.length && /^[-*]\s+/.test(lines[i].trim())) {
|
||||
items.push(lines[i].trim().replace(/^[-*]\s+/, ""));
|
||||
i += 1;
|
||||
}
|
||||
chunks.push(`<ul>${items.map((item) => `<li>${renderInlineMarkdown(item)}</li>`).join("")}</ul>`);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (/^\d+\.\s+/.test(trimmed)) {
|
||||
const items = [];
|
||||
while (i < lines.length && /^\d+\.\s+/.test(lines[i].trim())) {
|
||||
items.push(lines[i].trim().replace(/^\d+\.\s+/, ""));
|
||||
i += 1;
|
||||
}
|
||||
chunks.push(`<ol>${items.map((item) => `<li>${renderInlineMarkdown(item)}</li>`).join("")}</ol>`);
|
||||
continue;
|
||||
}
|
||||
|
||||
const paragraphLines = [];
|
||||
while (i < lines.length) {
|
||||
const candidate = lines[i];
|
||||
const candidateTrim = candidate.trim();
|
||||
if (!candidateTrim) break;
|
||||
if (
|
||||
candidateTrim.startsWith("```")
|
||||
|| /^(#{1,4})\s+/.test(candidateTrim)
|
||||
|| /^[-*]\s+/.test(candidateTrim)
|
||||
|| /^\d+\.\s+/.test(candidateTrim)
|
||||
|| /^>\s?/.test(candidateTrim)
|
||||
|| /^---+$/.test(candidateTrim)
|
||||
|| /^___+$/.test(candidateTrim)
|
||||
) {
|
||||
break;
|
||||
}
|
||||
paragraphLines.push(candidateTrim);
|
||||
i += 1;
|
||||
}
|
||||
chunks.push(`<p>${renderInlineMarkdown(paragraphLines.join(" "))}</p>`);
|
||||
}
|
||||
|
||||
return chunks.join("");
|
||||
}
|
||||
|
||||
function buildToc(container) {
|
||||
const headings = Array.from(container.querySelectorAll("h2, h3, h4"));
|
||||
if (!headings.length) {
|
||||
docTocEl.innerHTML = `<div class="sub">当前文档没有可用目录。</div>`;
|
||||
return;
|
||||
}
|
||||
const groups = [];
|
||||
let currentGroup = null;
|
||||
headings.forEach((heading) => {
|
||||
const level = Number(heading.tagName.slice(1));
|
||||
const item = {
|
||||
id: heading.id,
|
||||
text: escapeHtml(heading.textContent || ""),
|
||||
level,
|
||||
};
|
||||
if (level === 2 || !currentGroup) {
|
||||
currentGroup = { heading: item, children: [] };
|
||||
groups.push(currentGroup);
|
||||
return;
|
||||
}
|
||||
currentGroup.children.push(item);
|
||||
});
|
||||
docTocEl.innerHTML = groups.map((group) => `
|
||||
<section class="doc-toc-section">
|
||||
<div class="doc-toc-title">${group.heading.text}</div>
|
||||
<div class="doc-toc-links">
|
||||
<a class="doc-toc-link level-${group.heading.level}" href="#${group.heading.id}">${group.heading.text}</a>
|
||||
${group.children.map((item) => `<a class="doc-toc-link level-${item.level}" href="#${item.id}">${item.text}</a>`).join("")}
|
||||
</div>
|
||||
</section>
|
||||
`).join("");
|
||||
}
|
||||
|
||||
if (!ALLOWED_DOCS.has(path)) {
|
||||
docTitleEl.textContent = "文档不存在";
|
||||
docPathEl.textContent = path;
|
||||
docContentEl.textContent = "当前只允许查看预设文档。";
|
||||
docTitleEl.textContent = "使用文档";
|
||||
docContentEl.innerHTML = "<p>当前只允许查看预设文档。</p>";
|
||||
return;
|
||||
}
|
||||
|
||||
document.title = `${title} - MobileModels`;
|
||||
docTitleEl.textContent = title;
|
||||
docPathEl.textContent = path;
|
||||
docTitleEl.textContent = "使用文档";
|
||||
|
||||
try {
|
||||
const resp = await fetch(path, { cache: "no-store" });
|
||||
@@ -169,9 +468,11 @@
|
||||
throw new Error(`HTTP ${resp.status}`);
|
||||
}
|
||||
const text = await resp.text();
|
||||
docContentEl.textContent = text;
|
||||
docContentEl.innerHTML = renderMarkdown(text);
|
||||
buildToc(docContentEl);
|
||||
} catch (err) {
|
||||
docContentEl.textContent = `加载失败\n${err.message || err}`;
|
||||
docContentEl.innerHTML = `<p>加载失败</p><pre>${escapeHtml(err.message || String(err))}</pre>`;
|
||||
docTocEl.innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user