TRS Console

Vue 3 + TypeScript 管理后台基础项目。包含可直接运行的通用工作区演示、可复用的认证与权限模组、配置化列表页、实时消息客户端和 pnpm + Turborepo 工程骨架。

Members	Mobile

Config playground	Form designer

特性

• Vue 3.5、TypeScript、Vite 8、Pinia 3、Vue Router 4
• Element Plus UI、响应式侧边栏、页签与 keep-alive
• modern-normalize 浏览器默认样式基线
• 路由级权限、按钮级权限、动态菜单
• 可注入的认证、设置和页签 Store 工厂
• 页面配置驱动的列表、快捷筛选、筛选、分页、排序与列设置
• schema 驱动表单、条件显隐、条件必填、条件禁用和字段清空联动
• 静态/远程选项源、URL 依赖占位符、远程搜索和回显合并
• 列表动作与表单共享同一 schema，提交后自动回写并刷新列表
• 关联列表递归复用 SchemaListPage，带上下文映射、循环检测和层级保护
• object-list 字段递归复用 SchemaField，支持多层子字段、校验和提交过滤
• 复杂自定义动作可通过 customAction 回调或 #custom-action 插槽接管
• 跨页动作可通过带 TTL 的 localStorage/sessionStorage 交接对象传递上下文
• 中英文界面、浅色/深色主题和时区偏好
• 单例 SSE 客户端，支持鉴权、重连、取消订阅和 401 终止
• 依赖注入 HTTP 客户端，支持跳过鉴权、自定义请求头、错误标准化和文件下载
• Vitest 单元测试、Playwright E2E 与 GitHub Actions CI
• 无后端 Mock 演示，默认不需要任何 API 地址或密钥

应用

应用	说明	默认地址
apps/APP1	完整管理工作区演示	http://localhost:5173
apps/APP2	最简 Vue 起点	http://localhost:5174

APP1 的演示账号：

角色	邮箱	密码
管理员	admin@example.com	demo1234
只读成员	viewer@example.com	demo1234

快速开始

pnpm install
pnpm dev:app1

开发服务器启动后，可使用页面内的 Vue DevTools 面板、单独打开 /__devtools__/，或按 Alt+Shift+D 切换。该插件只注入开发服务器， 不会进入生产构建。

项目默认启用本地 Mock 数据。连接真实后端时，从 .env.example 创建本地环境文件，并关闭 Mock：

VITE_USE_MOCK=false
VITE_API_BASE_URL=https://your-api.example.com
VITE_SSE_URL=https://your-api.example.com/events

环境变量只填写变量名和安全的占位值。不要把真实密钥、Token、私有地址或客户数据提交到仓库。

真实模式默认约定以下 REST 资源：/auth/login、/auth/profile、/auth/logout、/members、/tasks、/roles。响应结构不确定时，按实际后端在 apps/APP1/src/api/http.ts 中调整适配。

目录

trs/
├── apps/
│   ├── APP1/                  # 可运行的后台演示
│   └── APP2/                  # 最小应用脚手架
├── packages/
│   ├── config/                # 安全的环境变量读取
│   ├── fetch/                 # 强类型 HTTP 客户端
│   ├── forms/                 # 表单 schema、条件引擎和可视化设计器
│   ├── i18n/                  # 中英文语言包
│   ├── lint/                  # 共享 ESLint 配置
│   ├── permission/            # 权限判断、路由过滤和指令
│   ├── stores/                # 认证、设置、页签 Store 工厂
│   ├── ui/                    # 通用后台组件和列表引擎
│   └── utils/                 # SSE、事件总线、日期格式化
├── scripts/                   # 脚手架与安全检查
├── tests/                     # 单元测试初始配置
└── e2e/                       # Playwright 端到端测试

共享包只通过公开接口和应用交互。应用与包之间不依赖私有项目、私有包或内部 API 结构。

列表与表单联动

核心运行链路：

pageConfig
  -> SchemaListPage
  -> page_action / row_action
  -> action.handler.payload.form
  -> SchemaForm
  -> 条件 / 远程选项 / 字段清空
  -> adapter.execute()
  -> refresh list

/config-playground 使用一份页面配置渲染唯一主表，页头动作、行操作、表单弹窗、 关联列表和跨页预览都从这份配置开始。FormDesigner 修改的 schema 会保存到 当前工作区，并复用于配置演练场的新建和编辑动作。表单支持：

• display、hide、disabled、required 条件组。
• AND / OR 组合，以及 eq、in、gt、contains、empty 等运算符。
• __field__ URL 占位符和远程选项依赖刷新。
• clear_targets 字段清空联动。
• 动作级请求映射、提交后列表刷新。
• 关联列表 related_list、递归明细字段和父子动作成功传播。

完整协议说明见 docs/list-form-contract.md。 完整能力覆盖矩阵和操作入口见 docs/demo-coverage.md。

常用命令

pnpm dev:app1        # 启动完整后台演示
pnpm dev:app2        # 启动最小应用
pnpm lint            # ESLint
pnpm typecheck       # Vue / TypeScript 类型检查
pnpm test            # Vitest
pnpm test:coverage   # 覆盖率报告
pnpm test:e2e        # Playwright
pnpm build:prod      # 生产构建
pnpm check           # lint + 类型 + 测试 + 构建
pnpm check:safety    # 公开仓库敏感信息检查

接入后端

1. 在应用内实现 AuthService，对接登录和用户信息接口。
2. 使用 createHttpClient() 创建应用专属客户端，并通过 handlers 注入 Token、错误提示和跳转逻辑。
3. 为列表页实现 ListAdapter<T>，不要把后端分页结构写进组件。
4. 如需实时消息，创建 SseClient 并注入 SSE 地址、Token 和未授权处理。

import { createHttpClient } from '@trs/fetch'

const http = createHttpClient({
  baseUrl: import.meta.env.VITE_API_BASE_URL,
  handlers: {
    getToken: () => authStore.token,
    clearToken: () => authStore.clearSession(),
    redirectToLogin: () => router.push('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/login'),
    showError: error => message.error(error.message),
  },
})

安全

• 默认不采集浏览器指纹。
• 不在日志中输出 Token、请求体或环境变量。
• pnpm check:safety 会检查被 Git 跟踪的敏感文件名和常见凭据格式。
• 发布前仍应检查 Git 历史、第三方依赖许可证和实际部署配置。
• 漏洞报告方式见 SECURITY.md。

许可证

Apache-2.0

第三方依赖许可摘要见 THIRD_PARTY_NOTICES.md。