style(frontend): 接入 stash-ui 设计系统
- 依赖 @stash/ui(file:../../stash-ui),统一引入 style.css 与 Toaster - 任务面板、表单、弹窗、日志、状态标签全部迁到组件库,App.css 只保留页面布局 - 移除自写 useFocusTrap,改用基于原生 dialog 的 Modal - 修复 LogViewer 流式追加时误判离开底部、导致不再自动跟随的问题 - 发布脚本检查 stash-ui 产物;README 补充组件库构建与 file: 依赖刷新说明
This commit is contained in:
@@ -6,7 +6,7 @@ TaskPilot 是一个面向 **Windows 单机** 的本地定时任务管理平台
|
||||
- 三类任务:Python/Shell 脚本、HTTP 请求、二进制进程
|
||||
- SQLite 持久化,重启后任务与历史仍在
|
||||
- 运行日志实时推送(SSE),按窗口合并事件;断线自动回退轮询,长日志用虚拟滚动展示
|
||||
- 前端零外部依赖:样式与脚本随包自带;界面字体可选,未生成时自动回退系统字体
|
||||
- 前端零外部网络依赖:样式与组件来自同级的 `stash-ui` 设计系统(`file:` 依赖,构建后随包自带);界面字体可选,未生成时自动回退系统字体
|
||||
|
||||
> 根目录的 `task_pilot.html` 只是最初的单文件视觉原型,正式入口是 React 应用。
|
||||
|
||||
@@ -58,6 +58,10 @@ release/TaskPilot/
|
||||
### 方式二:本地开发
|
||||
|
||||
```powershell
|
||||
# 前端依赖 @stash/ui(file:../../stash-ui),首次使用先在组件库构建 dist
|
||||
npm --prefix ..\stash-ui install
|
||||
npm --prefix ..\stash-ui run build
|
||||
|
||||
pnpm --dir frontend install
|
||||
cargo run --manifest-path backend/Cargo.toml # 终端一:API,127.0.0.1:3000
|
||||
pnpm --dir frontend dev # 终端二:http://127.0.0.1:5173
|
||||
@@ -66,6 +70,9 @@ pnpm --dir frontend dev # 终端二:http://127.0.0.1:
|
||||
Vite 把 `/api` 代理到后端。改后端端口时(`TASK_PILOT_PORT`)需同步修改
|
||||
`frontend/vite.config.ts` 的代理目标;打包版同源,不需要改前端。
|
||||
|
||||
`@stash/ui` 走 `file:` 依赖(pnpm 会复制一份构建产物):组件库重新 `npm run build`
|
||||
之后,需要再执行一次 `pnpm --dir frontend install` 才会同步新的 `dist`。
|
||||
|
||||
### 方式三:用 uv 跑官方示例与自检
|
||||
|
||||
仓库自带一个 uv 管理的演示任务和一个端到端自检脚本:
|
||||
@@ -226,7 +233,10 @@ queued ──► running ──► succeeded / failed / timed_out / cancelled
|
||||
- **任务表**:名称/ID、调度周期(含时区与**下次触发时间**)、类型、状态、超时、操作。
|
||||
- **编辑器**:三类动态表单、Cron 预览(实时计算未来 5/10 次)、虚拟环境状态条、调用预览。
|
||||
- **目录选择**:页面内目录浏览器(盘符 → 逐级进入 → 使用此目录),同时保留手动输入。
|
||||
- **日志抽屉**:运行历史筛选、SSE 实时日志、取消运行、下载日志、Escape/焦点陷阱。
|
||||
- **日志弹窗**:运行历史筛选、SSE 实时日志、取消运行、下载日志、Escape/焦点陷阱。
|
||||
- **设计系统**:按钮、输入框、表格、标签、分页、弹窗、Toast、排版全部来自
|
||||
`@stash/ui`(同级目录 `../stash-ui`,`file:` 依赖);本仓库只保留页面级布局与
|
||||
业务块(任务表单元格、日志控制台、表单栅格)。
|
||||
- **视觉**:对齐 Alright 主题(`#3858f6` 主色、灰阶体系、0.3s 缓动);正文使用
|
||||
`LXGW WenKai`、标题与数字使用 `Outfit-Medium`。字体二进制不入库,用
|
||||
`tools/build-fonts.py` 生成,缺失时回退系统字体。
|
||||
@@ -423,6 +433,7 @@ React (Vite) ──fetch──► Axum router ──security::api_guard(Origin +
|
||||
|
||||
| 模块 | 职责 |
|
||||
| --- | --- |
|
||||
| `@stash/ui`(同级 `../stash-ui`) | 设计令牌与通用组件:按钮、输入、表格、标签、弹窗、分页、Toast、排版 |
|
||||
| `pages/TaskDashboard.tsx` | 列表、筛选、分页、指标卡、下次触发时间 |
|
||||
| `components/TaskEditorModal.tsx` | 三类动态表单、Cron 预览、虚拟环境状态条 |
|
||||
| `components/DirectoryPickerDialog.tsx` | 页面内目录浏览器 |
|
||||
|
||||
Reference in New Issue
Block a user