create-admin-mvp 1.0.0

package/templates/admin-portal/tests/e2e/example.spec.ts

@@ -0,0 +1,52 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('示例 E2E 测试', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+  })
+
+  test('应该显示首页', async ({ page }) => {
+    await expect(page).toHaveTitle(/.*Admin Portal.*/)
+    await expect(page.locator('h1')).toContainText('Home Page')
+  })
+
+  test('应该导航到关于页面', async ({ page }) => {
+    await page.click('text=About')
+    await expect(page).toHaveURL(/.*\/about/)
+    await expect(page.locator('h1')).toContainText('About Page')
+  })
+
+  test('应该导航回首页', async ({ page }) => {
+    await page.click('text=About')
+    await expect(page).toHaveURL(/.*\/about/)
+    await page.click('text=Home')
+    await expect(page).toHaveURL(/.*\//)
+    await expect(page.locator('h1')).toContainText('Home Page')
+  })
+
+  test('应该响应窗口大小变化', async ({ page }) => {
+    await page.setViewportSize({ width: 1920, height: 1080 })
+    await expect(page.locator('.home')).toBeVisible()
+
+    await page.setViewportSize({ width: 375, height: 667 })
+    await expect(page.locator('.home')).toBeVisible()
+  })
+
+  test('应该支持浏览器导航', async ({ page }) => {
+    await page.click('text=About')
+    await expect(page).toHaveURL(/.*\/about/)
+
+    await page.goBack()
+    await expect(page).toHaveURL(/.*\//)
+
+    await page.goForward()
+    await expect(page).toHaveURL(/.*\/about/)
+  })
+
+  test('应该支持页面刷新', async ({ page }) => {
+    const initialText = await page.locator('h1').textContent()
+    await page.reload()
+    const reloadedText = await page.locator('h1').textContent()
+    expect(initialText).toBe(reloadedText)
+  })
+})

package/templates/admin-portal/tests/unit/example.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest'
+
+describe('示例测试', () => {
+  it('应该通过 1 + 1 = 2', () => {
+    expect(1 + 1).toBe(2)
+  })
+
+  it('应该通过字符串拼接', () => {
+    const str = 'Hello'
+    expect(str + ' World').toBe('Hello World')
+  })
+
+  it('应该通过数组操作', () => {
+    const arr = [1, 2, 3]
+    expect(arr).toHaveLength(3)
+    expect(arr).toContain(2)
+  })
+
+  it('应该通过对象操作', () => {
+    const obj = { name: 'John', age: 30 }
+    expect(obj).toHaveProperty('name', 'John')
+    expect(obj).toMatchObject({ age: 30 })
+  })
+
+  it('应该通过异步操作', async () => {
+    const promise = Promise.resolve(42)
+    await expect(promise).resolves.toBe(42)
+  })
+
+  it('应该通过布尔值判断', () => {
+    expect(true).toBe(true)
+    expect(false).toBe(false)
+    expect(1).toBeTruthy()
+    expect(0).toBeFalsy()
+  })
+
+  it('应该通过数字比较', () => {
+    expect(10).toBeGreaterThan(5)
+    expect(10).toBeLessThan(20)
+    expect(10).toBeGreaterThanOrEqual(10)
+    expect(10).toBeLessThanOrEqual(10)
+  })
+
+  it('应该通过字符串匹配', () => {
+    const str = 'Hello World'
+    expect(str).toMatch(/World/)
+    expect(str).toContain('Hello')
+  })
+})

package/templates/admin-portal/tsconfig.app.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

package/templates/admin-portal/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/templates/admin-portal/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/admin-portal/vite.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { viteMockServe } from 'vite-plugin-mock'
+import { fileURLToPath } from 'node:url'
+
+export default defineConfig(({ command }) => {
+  return {
+    plugins: [
+      vue(),
+      viteMockServe({
+        mockPath: 'src/mock',
+        enable: command === 'serve',
+      }),
+    ],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+      },
+    },
+  }
+})

package/templates/admin-portal/vitest.config.ts

@@ -0,0 +1,49 @@
+// Vitest 配置文件
+// 配置单元测试框架
+
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+import { fileURLToPath } from 'node:url'
+
+export default defineConfig({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  plugins: [vue() as any],
+
+  // 2. 测试配置
+  test: {
+    // 2.1 全局 API（不需要 import 就能使用 describe, it, expect 等）
+    globals: true,
+
+    // 2.2 测试环境（模拟浏览器环境）
+    environment: 'jsdom',
+
+    // 2.3 测试设置文件
+    setupFiles: ['./vitest.setup.ts'],
+
+    // 2.4 代码覆盖率配置
+    coverage: {
+      // 2.4.1 覆盖率提供者（v8 最快）
+      provider: 'v8',
+
+      // 2.4.2 覆盖率报告格式
+      reporter: ['text', 'json', 'html'],
+
+      // 2.4.3 排除的文件
+      exclude: [
+        'node_modules/',
+        'tests/',
+        '**/*.d.ts',
+        '**/*.config.*',
+        '**/mockData',
+      ],
+    },
+  },
+
+  // 3. 路径别名配置
+  resolve: {
+    alias: {
+      // @ 指向 src 目录
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+})

package/templates/admin-portal/vitest.setup.ts

@@ -0,0 +1,60 @@
+// Vitest 测试设置文件
+// 在运行测试前执行，用于模拟浏览器 API
+// 导入 vitest 的模拟函数
+// 背景：Vitest 是基于 Vite 的单元测试框架，vi 是其提供的工具集，用于创建“假”函数/对象
+// 从 vitest 中导入 vi 工具函数，用于创建测试替身（mock）
+import { vi } from 'vitest'
+
+// 1. 模拟 localStorage
+// 原因：Node.js 环境没有 localStorage，需要模拟
+// 背景：localStorage 是浏览器提供的“持久键值存储”，测试代码里若直接读取会报错 ReferenceError
+// 做法：在 Node 全局对象 global 上手动挂一个“假”对象，让它长得跟浏览器里的 Storage 一样
+global.localStorage = {
+  // getItem(key) 应该返回 string | null，测试里通常不关心真实值，先统一返回 null
+  getItem: vi.fn(() => null),  // 获取数据
+  // setItem(key, value) 只是占位，不真写磁盘；vi.fn() 返回一个可监听的“假”函数
+  setItem: vi.fn(),             // 设置数据
+  removeItem: vi.fn(),          // 删除数据
+  clear: vi.fn(),               // 清空数据
+  // 用 as Storage 告诉 TypeScript“相信我，这就是 Storage”，避免类型报错
+} as Storage
+
+// 2. 模拟 sessionStorage
+// 原因：同上，Node.js 没有 sessionStorage
+// 背景：sessionStorage 与 localStorage 类似，但生命周期跟随“页面会话”，测试里同样需要“假”实现
+global.sessionStorage = {
+  getItem: vi.fn(() => null),  // 获取数据
+  setItem: vi.fn(),             // 设置数据
+  removeItem: vi.fn(),          // 删除数据
+  clear: vi.fn(),               // 清空数据
+} as Storage
+
+// 3. 模拟 window.matchMedia
+// 原因：Node.js 环境没有 matchMedia，需要模拟
+// 背景：matchMedia 用于“CSS 媒体查询”JS 化，例如 matchMedia('(max-width: 768px)').matches
+//       测试里若组件依赖“移动端判断”会踩空，必须提前“造假”
+// 做法：用 Object.defineProperty 给 window 动态注入属性，确保可写且可被重新赋值
+// 这行代码在 Node 测试环境里“伪造”了浏览器的 window.matchMedia 方法。
+// 背景：Node 没有 DOM，也就没有 window.matchMedia；但组件里可能写：
+//   if (window.matchMedia('(max-width: 768px)').matches) { ... }
+// 如果不 mock，测试运行时会直接报错“matchMedia is not a function”。
+// 做法：用 Object.defineProperty 把 window.matchMedia 换成一个“假”函数。
+// 假函数被调用时，会返回一个“假”媒体查询结果对象，里面：
+//   - matches 默认 false（可后续用 vi.mocked(..).mockReturnValue 覆盖）
+//   - media 把查询字符串原样带回去，保持接口一致
+//   - 其余 addListener / addEventListener 等方法全部用 vi.fn() 占位，
+//     防止组件调用时报“not a function”
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,              // 默认“不匹配”，测试里可再 vi.mocked(..).mockReturnValue 覆盖
+    media: query,                // 把传进来的查询字符串原样挂回去，保持接口一致
+    onchange: null,              // 变化回调，先留空
+    // 下面四个是历史/标准兼容方法，全用“假”函数占位，防止组件调用时报“not a function”
+    addListener: vi.fn(),        // 添加监听器（旧 API）
+    removeListener: vi.fn(),     // 移除监听器（旧 API）
+    addEventListener: vi.fn(),  // 添加事件监听（标准 API）
+    removeEventListener: vi.fn(), // 移除事件监听（标准 API）
+    dispatchEvent: vi.fn(),      // 触发事件，测试里若手动派发事件也不会报错
+  })),
+})