Vue.js: 综合项目：电商后台

业务场景：
  - 5,000 中小企业商户（每户 30-300 SKU）
  - 30,000 个商品 SKU
  - 每日 10,000 订单
  - 5 角色权限（admin / manager / editor / viewer / guest）
  - 实时数据（仪表盘、订单、通知）
  - 多语言（5 语种）

src/
├── api/                   # API 封装
│   ├── auth.ts
│   ├── product.ts
│   ├── order.ts
│   └── user.ts
├── assets/                # 静态资源
├── components/            # 公共组件
│   ├── BaseButton.vue
│   ├── BaseTable.vue       # 二次封装 Element Plus
│   ├── BasePagination.vue
│   ├── BaseDialog.vue
│   └── charts/             # 图表
│       ├── SalesChart.vue
│       ├── UserChart.vue
│       └── OrderChart.vue
├── composables/           # 组合式函数
│   ├── useAuth.ts
│   ├── usePermission.ts
│   ├── useTable.ts
│   └── usePagination.ts
├── layouts/                # 布局
│   ├── DefaultLayout.vue   # 登录后
│   └── AuthLayout.vue      # 登录页
├── router/                # 路由
│   └── index.ts
├── stores/                 # Pinia
│   ├── auth.ts
│   ├── product.ts
│   ├── order.ts
│   └── app.ts              # 全局（主题 / 侧边栏）
├── types/                  # TS 类型
│   ├── user.ts
│   ├── product.ts
│   └── api.ts
├── utils/                  # 工具
│   ├── request.ts          # axios 封装
│   ├── auth.ts
│   └── format.ts
├── views/                  # 页面
│   ├── dashboard/          # 仪表盘
│   ├── login/              # 登录
│   ├── product/            # 商品
│   ├── order/              # 订单
│   ├── user/               # 用户
│   ├── marketing/          # 营销
│   └── error/              # 403 / 404
├── App.vue
└── main.ts

{
  "name": "mercury-admin",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "test": "vitest",
    "test:e2e": "playwright test",
    "lint": "eslint . --ext .vue,.ts,.tsx"
  },
  "dependencies": {
    "vue": "^3.4.0",
    "vue-router": "^4.3.0",
    "pinia": "^2.1.0",
    "element-plus": "^2.5.0",
    "@element-plus/icons-vue": "^2.3.0",
    "echarts": "^5.4.0",
    "vue-echarts": "^7.0.0",
    "axios": "^1.6.0",
    "dayjs": "^1.11.0",
    "vueuse": "^10.7.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.0",
    "vite": "^5.0.0",
    "vue-tsc": "^1.8.0",
    "typescript": "^5.3.0",
    "unplugin-vue-components": "^0.26.0",
    "unplugin-auto-import": "^0.17.0",
    "unplugin-icons": "^0.17.0",
    "@iconify-json/carbon": "^1.1.0",
    "sass": "^1.69.0",
    "vitest": "^1.0.0",
    "@vue/test-utils": "^2.4.0",
    "@playwright/test": "^1.40.0"
  }
}

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import'
import Components from 'unplugin-vue-components'
import Icons from 'unplugin-icons/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia', 'vueuse'],
      resolvers: [ElementPlusResolver()],
      dts: 'src/auto-imports.d.ts'
    }),
    Components({
      resolvers: [ElementPlusResolver()],
      dts: 'src/components.d.ts'
    }),
    Icons({ autoInstall: true })
  ],
  resolve: {
    alias: { '@': path.resolve(__dirname, 'src') }
  },
  server: {
    port: 5173,
    proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true } }
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          'echarts-vendor': ['echarts', 'vue-echarts']
        }
      }
    }
  }
})

npm install 后所有依赖解析成功；
npm run dev 启动 Vite 开发服务器，
Element Plus 与 ECharts 的产物已随依赖打包可用，
控制台输出 Local: http://localhost:5173/

初始显示登录卡片：「🔐 登录 (CDN 模拟)」、用户名/密码输入框（已预填 alice / 123456）、「登录」按钮和 5 个角色快捷按钮，无错误提示。
点「登录」后切换到仪表盘：顶部「📊 仪表盘」、欢迎 Alice 和 admin 标签；显示 4 张 KPI 卡片（$12,345、342、1,234、5,678）和 5 个可点击的权限按钮。
点 manager / editor 等快捷按钮再登录，KPI 数量和权限按钮的禁用状态随角色减少；点「登出」回到登录页。

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/login', component: () => import('@/views/login/LoginPage.vue') },
    {
      path: '/',
      component: () => import('@/layouts/DefaultLayout.vue'),
      meta: { requiresAuth: true },
      children: [
        { path: '', redirect: '/dashboard' },
        { path: 'dashboard', component: () => import('@/views/dashboard/DashboardPage.vue') },
        { path: 'products', component: () => import('@/views/product/ProductListPage.vue') }
      ]
    }
  ]
})

router.beforeEach((to, from, next) => {
  const auth = useAuthStore()
  
  if (to.meta.requiresAuth && !auth.isLoggedIn) {
    return next({ name: 'login', query: { redirect: to.fullPath } })
  }
  
  next()
})

export default router

// directives/permission.ts
import { useAuthStore } from '@/stores/auth'

export const permission = {
  mounted(el: HTMLElement, binding: { value: string }) {
    const auth = useAuthStore()
    if (!auth.permissions.includes(binding.value)) {
      el.parentNode?.removeChild(el)
    }
  }
}

<button v-permission="'product.create'">Create Product</button>

页面顶部显示「📊 仪表盘 5 张 ECharts 图表」和 4 张 KPI 卡片：今日销售额 $12,345、今日订单 342、活跃用户 5,678、转化率 3.2%（红色 ↓ -2%）。
下方依次渲染 5 张图表：销售趋势折线图、订单数柱状图、商品分类饼图、用户活跃双折线图、销量 Top 5 柱状图。
图表带标题与悬浮提示，窗口缩放时自适应容器宽度。

页面显示「📦 商品管理（CDN 简化版）」、搜索框和「➕ 新建商品」按钮，下方表格列出 4 件商品（iPhone 15 Pro、MacBook Pro、Cotton T-Shirt、Old Model），含 ID、分类、价格、库存和状态标签。
输入「iPhone」后表格实时过滤只剩 iPhone 15 Pro；清空搜索恢复 4 行。
点「新建商品」弹出表单，填写保存后新增一行（ID 5、状态 active）；点「编辑」回填数据，保存后该行更新；点「删除」确认后该行消失。

页面显示「📋 订单管理」表格 3 行：#1001 Alice $1028（pending，查看/确认）、#1002 Bob $50（paid，查看/发货）、#1003 Carol $2499（shipped，查看），状态用橙/蓝/绿标签区分。
点「查看」弹出订单详情，含用户、金额、状态、商品清单和状态流转时间线；点遮罩或「关闭」收起。
点 #1001 的「确认」后状态变为 paid、时间线追加「已支付」，操作按钮变为「发货」；点「发货」后变为 shipped 并追加「已发货」。

页面显示「👥 用户角色管理（RBAC）」表格 4 行：alice/admin、bob/manager、carol/editor+viewer、eve/guest，角色用不同颜色标签展示。
点「编辑角色」弹出对话框，标题为「编辑 alice 的角色」，5 个角色复选框按当前角色预勾选，并显示角色说明。
增删勾选后点「保存」，表格中该用户的角色标签立即更新；点「取消」关闭对话框且不修改。

// utils/roles.ts
export const ROLES = {
  admin: {
    label: 'Admin',
    permissions: ['*']  // 全部权限
  },
  manager: {
    label: 'Manager',
    permissions: ['product.*', 'order.*', 'user.read']
  },
  editor: {
    label: 'Editor',
    permissions: ['product.read', 'product.edit', 'order.read']
  },
  viewer: {
    label: 'Viewer',
    permissions: ['*.read']
  },
  guest: {
    label: 'Guest',
    permissions: ['product.read']
  }
}

页面显示「🎟️ 营销活动（优惠券管理）」表格 4 行优惠券。
SUMMER2026 / NEWUSER50 显示绿色「进行中」，BLACKFRIDAY 显示灰色「已过期」，VIPONLY 显示橙色「已暂停」。
类型列把 percentage / fixed 显示为「百分比折扣 / 固定金额」，折扣列显示 20% off、$5 off 等，有效期显示起止日期。

// vite.config.ts（生产环境优化）
build: {
  outDir: 'dist',
  sourcemap: true,  // 用于 Sentry
  minify: 'esbuild',
  cssMinify: 'lightningcss',
  rollupOptions: {
    output: {
      manualChunks: {
        'vue-vendor': ['vue', 'vue-router', 'pinia'],
        'echarts-vendor': ['echarts', 'vue-echarts'],
        'ui-vendor': ['element-plus'],
        'utils': ['axios', 'dayjs']
      }
    }
  }
}

执行 npm run build 后，dist/assets 下按配置生成 vue-vendor、echarts-vendor、ui-vendor、utils 等独立 chunk。
入口 chunk 体积明显减小，浏览器可并行加载并长期缓存第三方依赖；构建同时输出 sourcemap 供 Sentry 使用。

npm install -g vercel
vercel --prod

// vercel.json
{
  "build": { "command": "npm run build" },
  "outputDirectory": "dist",
  "framework": "vite",
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

// main.ts
import * as Sentry from '@sentry/vue'

Sentry.init({
  app,
  dsn: 'https://your-dsn@sentry.io/123',
  tracesSampleRate: 0.1
})