fix: 支持 TinyVue 前端独立启动

.github/workflows/e2e-test.yml

@@ -30,19 +30,31 @@ jobs:
         run: pnpm install --frozen-lockfile
       - name: Install Playwright browsers
         run: pnpm exec playwright install --with-deps
+      - name: Setup Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Set up Docker Compose
+        uses: docker/setup-compose-action@v1
       - name: Start Backend Services
+        working-directory: ./template/nestJs
+        env:
+          COMPOSE_BAKE: "false"
         run: |
-          cd template/nestJs
           cp .env.example .env
           docker compose up -d
       - name: Wait for Backend Services
+        working-directory: ./template/nestJs
         run: |
           echo "Waiting for Backend Services to start..."
-          cd template/nestJs
           timeout 120s bash -c 'until curl -f http://localhost:3000/healthCheck 2>/dev/null; do
             echo "Backend API not ready yet..."
             sleep 3
           done'
           echo "Backend Services are ready!"
+      - name: Dump backend logs
+        if: failure()
+        working-directory: ./template/nestJs
+        run: docker compose logs
       - name: Run E2E tests
+        env:
+          PLAYWRIGHT_WEB_SERVER_COMMAND: pnpm dev:full
         run: pnpm test:e2e

.gitignore

@@ -11,3 +11,4 @@ dist
 yarn.lock
 .env
 .history
+playwright-report

README.md

@@ -69,16 +69,45 @@ npm i && npm start
 
 ## 前端启动
 
+前端支持 **Mock 独立启动** 与 **连接真实后端** 两种方式。
+
+### Mock 独立启动（推荐快速体验）
+
 在 `tiny-pro/web` 下依次执行以下命令：
 
 - 安装依赖：`npm i`
 - 启动前端项目：`npm start`
 
+`npm start` 会同时拉起 Mock 服务和 Vite 开发服务，无需启动后端即可访问 [http://localhost:3031/](http://localhost:3031/)。
+
+### 连接真实后端
+
+请先按上文启动后端服务，然后在 `tiny-pro/web` 下执行：
+
+```bash
+npm run dev:full
+```
+
 更详细的文档请参考 TinyPro 官网：[https://opentiny.design/vue-pro](https://opentiny.design/vue-pro)
 
 ## 本地启动
 
-如果你有意愿参与本项目的贡献，可以通过以下方式启动前后端（前提是 MySQL/Redis 服务已成功启动），并进行项目开发和调试。
+如果你有意愿参与本项目的贡献，可以通过以下方式启动项目。
+
+### 仅启动前端（Mock）
+
+无需 MySQL / Redis / 后端，适合前端开发与调试：
+
+```shell
+pnpm i
+pnpm dev
+```
+
+`pnpm dev` 会调用前端的 `start` 脚本，同时启动 Mock 与 Vite。启动成功之后，会自动打开浏览器，并访问：[http://localhost:3031/](http://localhost:3031/)。
+
+### 启动前后端联调
+
+前提是 MySQL / Redis 服务已成功启动。
 
 1. 创建一个空的 MySQL 数据库 `demo_tiny_pro`
 
@@ -131,8 +160,8 @@ pnpm i
 # 启动后端，执行该命令之后，会初始化 MySQL 数据库 demo_tiny_pro 的表结构，并填充表数据
 pnpm dev:backend
 
-# 启动前端
-pnpm dev
+# 启动前端（关闭 Mock，代理到真实后端）
+pnpm -F tiny-pro-vue dev:full
 ```
 
 启动成功之后，会自动打开浏览器，并访问：[http://localhost:3031/](http://localhost:3031/)。

package.json

@@ -58,7 +58,7 @@
     "test:lint": "tslint --project . && prettier \"src/**/*.ts\" --list-different",
     "test:unit:backend": "pnpm -F tinyui-nestjs-server test",
     "test:cov:backend": "pnpm -F tinyui-nestjs-server test:cov",
-    "test:e2e": "playwright test",
+    "test:e2e": "node --test tests/playwright-webserver.test.mjs && playwright test",
     "watch": "run-s clean build:main && run-p \"build:main -- -w\"  ",
     "cov": "run-s build test:unit cov:html && open-cli coverage/index.html",
     "cov:html": "nyc report --reporter=html",

playwright-webserver.mjs

@@ -0,0 +1,7 @@
+export function resolvePlaywrightWebServerCommand(env = process.env) {
+  const override = env.PLAYWRIGHT_WEB_SERVER_COMMAND?.trim()
+  if (override) {
+    return override
+  }
+  return env.CI ? 'pnpm dev:full' : 'pnpm start'
+}

playwright.config.ts

@@ -1,4 +1,5 @@
   import { defineConfig, devices } from '@playwright/test';
+  import { resolvePlaywrightWebServerCommand } from './playwright-webserver.mjs';
 
   export default defineConfig({
     workers: 1,
@@ -35,7 +36,7 @@
       }
     ],
     webServer: {
-      command: 'pnpm start',
+      command: resolvePlaywrightWebServerCommand(),
       cwd: 'template/tinyvue',
       url: 'http://localhost:3031/vue-pro',
       reuseExistingServer: true,

template/nestJs/dockerfile

@@ -2,7 +2,7 @@ FROM node:20-alpine as BUILDER
 WORKDIR /builder/
 ADD . .
 RUN apk add wait4x && \
-    npm install pnpm -g && \
+    npm install pnpm@10 -g && \
     pnpm i && \
     pnpm build
 

template/nestJs/locales.json

@@ -486,6 +486,21 @@
     "work.index.questions5": "What should I do if I am unable to log in to the online course service platform?",
     "work.index.questions6": "How to create a new project ticket?",
     "work.index.netonline": "Online consultation",
+    "work.chart.finished": "Finished",
+    "work.chart.month1": "Jan",
+    "work.chart.month2": "Feb",
+    "work.chart.month3": "Mar",
+    "work.chart.month4": "Apr",
+    "work.chart.month5": "May",
+    "work.chart.month6": "Jun",
+    "work.chart.month7": "Jul",
+    "work.chart.month8": "Aug",
+    "work.chart.month9": "Sep",
+    "work.chart.month10": "Oct",
+    "work.chart.finance": "Finance",
+    "work.chart.rd": "R&D",
+    "work.chart.ops": "Operations",
+    "work.chart.hr": "HR",
     "home.main.one": "first screen",
     "home.main.up": "Page Onload",
     "home.main.down": "Sampling PV",
@@ -1163,6 +1178,21 @@
     "work.index.questions5": "无法登录网课服务平台怎么办？",
     "work.index.questions6": "如何创建新项目工单？",
     "work.index.netonline": "在线咨询",
+    "work.chart.finished": "已完成",
+    "work.chart.month1": "1月",
+    "work.chart.month2": "2月",
+    "work.chart.month3": "3月",
+    "work.chart.month4": "4月",
+    "work.chart.month5": "5月",
+    "work.chart.month6": "6月",
+    "work.chart.month7": "7月",
+    "work.chart.month8": "8月",
+    "work.chart.month9": "9月",
+    "work.chart.month10": "10月",
+    "work.chart.finance": "财务部",
+    "work.chart.rd": "研发部",
+    "work.chart.ops": "运营部",
+    "work.chart.hr": "人力部",
     "home.main.one": "首屏可见",
     "home.main.up": "页面Onload",
     "home.main.down": "采样PV",
@@ -1352,4 +1382,4 @@
     "component.error": "组件错误",
     "component.error.contact": "请联系管理员或重新登录"
   }
-}
+}

template/nestJs/src/application/init/data.ts

@@ -1,87 +1,96 @@
 export const applicationData = [
   {
-    name: 'Tiny Design 设计体系',
+    name: 'TinyVue 组件库',
     description:
-      '华为云产品和服务的规范体系，包括交互视觉设计、业务流程、国际化、术语词条。',
-    tag: '[{ "type": "", "value": "机会点定义" }, { "type": "danger", "value": "交互设计" }]',
-    classify: 'design',
+      'OpenTiny 企业级 UI 组件库，同时支持 Vue.js 2 与 Vue.js 3，以及 PC 与移动端。',
+    tag: '[{ "type": "success", "value": "开发" }]',
+    classify: 'dev',
     icon: 'card-list-application-default.png',
   },
   {
-    name: 'Tiny DesignLink 设计流水线工具',
+    name: 'TinyEngine 低代码引擎',
     description:
-      '设计+协同+资源管理，一个工具就够了，在线原型设计、设计过程融入DevOps流程。',
-    tag: '[{ "type": "error", "value": "交互设计" }, { "type": "warning", "value": "视觉设计" }]',
+      'TinyEngine低代码引擎，AI时代的智能低代码基座。',
+    tag: '[{ "type": "success", "value": "开发" }, { "type": "danger", "value": "交互设计" }]',
+    classify: 'dev',
+    icon: 'card-list-console-framework.png',
+  },
+  {
+    name: 'TinyTheme 主题配置系统',
+    description: 'OpenTiny 主题配置系统，支持在线定制组件主题与视觉风格。',
+    tag: '[{ "type": "danger", "value": "交互设计" }, { "type": "warning", "value": "视觉设计" }]',
     classify: 'design',
     icon: 'card-list-application-default.png',
   },
   {
-    name: 'TinyUI3.0 开发工具 ',
-    description: 'Cloud Design System 提供了丰富的规范文档及开发组件。',
-    tag: '[{ "type": "success", "value": "开发" }]',
-    classify: 'dev',
+    name: 'OpenTiny Icons 图标库',
+    description:
+      'OpenTiny Design Icons 图标库，为组件与业务页面提供统一图标资源。',
+    tag: '[{ "type": "warning", "value": "视觉设计" }]',
+    classify: 'design',
     icon: 'card-list-application-default.png',
   },
   {
-    name: 'TinyPlus3.0 开发工具',
+    name: 'TinyCLI 命令行工具',
     description:
-      'TinyPlus3.0 是基于Angular + Typescript的Web前端云业务组件库。',
+      '灵活可扩展的 OpenTiny 前端命令行工具，提供工程化套件与插件。',
     tag: '[{ "type": "success", "value": "开发" }]',
     classify: 'dev',
-    icon: 'card-list-tiny-plus.png',
+    icon: 'card-list-console-framework.png',
   },
   {
-    name: 'Tiny Stage 工程工具 ',
+    name: 'TinyPro 中后台模板',
     description:
-      '一个跨平台的前端工程化cli工具，为开发提供一系列开发套件和工程插件',
-    tag: '[{ "type": "success", "value": "开发" }]',
+      '基于 TinyVue 的前后端分离后台管理系统，支持在线配置菜单、路由、国际化，开箱即用。',
+    tag: '[{ "type": "success", "value": "开发" }, { "type": "warning", "value": "上线" }]',
     classify: 'dev',
     icon: 'card-list-console-framework.png',
   },
   {
-    name: 'Tiny Flow 接口编排工具 ',
+    name: 'TinyEditor 富文本编辑器',
     description:
-      '端到端的API编排解决方案，通过可视化编程的方式快速生成、发布、调试的API编排。',
+      '基于 Quill 2.0 的富文本编辑器，扩展丰富模块与格式，功能强大、开箱即用。',
     tag: '[{ "type": "success", "value": "开发" }]',
     classify: 'dev',
     icon: 'card-list-console-framework.png',
   },
   {
-    name: 'Tiny Gate 门禁系统',
+    name: 'TinyRobot AI 对话组件库',
     description:
-      '门禁系统，通过卡点方式集成到伏羲流水线，在服务发布时生成预览页面。',
-    tag: '[{ "type": "info", "value": "测试验证" }]',
+      'AI 对话组件库，提供丰富的 AI 交互组件，助力快速构建企业级 AI 应用。',
+    tag: '[{ "type": "success", "value": "开发" }]',
     classify: 'dev',
-    icon: 'card-list-console-framework.png',
+    icon: 'card-list-furion.png',
   },
   {
-    name: 'Console Framework 控制台框架',
-    description: '华为云各服务快速构建管理控制台的平台。',
-    tag: '[{ "type": "success", "value": "开发" },{ "type": "info", "value": "测试验证" },{ "type": "warning", "value": "上线" }]',
+    name: 'TinyVue Mobile 移动端组件',
+    description:
+      '基于 OpenTiny 设计规范的 Vue3 移动端组件库，支持 TypeScript、主题切换与国际化。',
+    tag: '[{ "type": "success", "value": "开发" }]',
     classify: 'dev',
-    icon: 'card-list-console-framework.png',
+    icon: 'card-list-application-default.png',
   },
   {
-    name: 'Nodejs Framework Nodejs应用',
+    name: 'TinyCharts 可视化图表库',
     description:
-      '基于egg的定制化web服务框架，让你快速上手Nodejs做BFF意见微服务。',
-    tag: '[{ "type": "success", "value": "开发" },{ "type": "info", "value": "测试验证" }]',
+      '前端可视化图表库，提供 40 多个图表组件，支持主题定制、响应式和无障碍，兼容 ECharts API。',
+    tag: '[{ "type": "success", "value": "开发" }, { "type": "warning", "value": "视觉设计" }]',
     classify: 'dev',
-    icon: 'card-list-console-framework.png',
+    icon: 'card-list-application-default.png',
   },
   {
-    name: 'Furion 前端体验监控',
+    name: 'WebMCP SDK',
     description:
-      '提供端到端前端用户体验度量，让产品用户体验可度量、可监控、可优化。',
-    tag: '[{ "type": "", "value": "机会点定义" }]',
+      '前端 AI 与浏览器自动化工具包，通过 WebMCP + WebSkills 构建 AI 原生应用。',
+    tag: '[{ "type": "success", "value": "开发" }]',
     classify: 'dev',
-    icon: 'card-list-furion.png',
+    icon: 'card-list-console-framework.png',
   },
   {
-    name: 'Tiny Mock API 管理',
+    name: 'GenUI SDK',
     description:
-      '功能强大的API管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。',
-    tag: '[{ "type": "success", "value": "开发" },{ "type": "warning", "value": "视觉设计" }]',
+      '面向 Vue、Angular 的 Generative UI SDK，帮助快速生成交互界面。',
+    tag: '[{ "type": "success", "value": "开发" }]',
     classify: 'dev',
     icon: 'card-list-application-default.png',
   },