1.0.1 初始化铜壶管理系统项目并配置容器化

2026-04-12 18:28:37 +08:00
parent 72239c24fd
commit 5dd16d9809
129 changed files with 15165 additions and 0 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/AGENTS.md
+++ b/frontend/AGENTS.md
@@ -0,0 +1,30 @@
+# Frontend Guidelines
+
+## Scope
+- Applies to files under frontend/.
+- Inherit the root [AGENTS.md](../AGENTS.md) and only override frontend-specific expectations here.
+
+## Stack
+- Vue 3 + Vite + TypeScript + Vue Router + Pinia + Element Plus.
+- Local API base URL is configured through [frontend/.env.local](.env.local) and should point to http://localhost:8081 for local development.
+
+## Build And Test
+- Install dependencies from frontend/: npm install
+- Start the dev server from frontend/: npm run dev
+- Build from frontend/: npm run build
+- Run the frontend build after any change under frontend/.
+
+## Conventions
+- Keep route-level pages lazily loaded in [frontend/src/router/index.ts](src/router/index.ts).
+- Preserve the current split between views, components, services, stores, layouts, and types. Do not move API calls into view files when they belong in [frontend/src/services](src/services).
+- Keep permission-aware navigation and access rules centered in [frontend/src/router/index.ts](src/router/index.ts), [frontend/src/stores/auth.ts](src/stores/auth.ts), and [frontend/src/services/access.ts](src/services/access.ts).
+- Keep Element Plus on-demand loading configured in [frontend/vite.config.ts](vite.config.ts). Do not reintroduce global Element Plus registration or full-library CSS import in [frontend/src/main.ts](src/main.ts).
+- When adding heavy UI dependencies or shared utilities, preserve the current manual chunk strategy in [frontend/vite.config.ts](vite.config.ts) and watch for new build-size regressions.
+- Reuse shared business components such as [frontend/src/components/OrderEditorDialog.vue](src/components/OrderEditorDialog.vue) instead of duplicating order editing flows.
+- Preserve the established visual language from [前端页面UI方案.md](../前端页面UI方案.md): warm copper palette, fixed left navigation, and dedicated detail routes instead of modal-driven workflows.
+
+## Frontend Business Rules
+- Product detail remains a standalone route and must keep the left category tree visible during navigation.
+- Read-only users may browse product and order information but must not see edit-only actions.
+- Product and order screens should reflect the same permission and stock rules enforced by the backend, not looser frontend-only behavior.
+- Label download entry points stay in order detail flows, while product detail handles image and label template management.
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -0,0 +1,18 @@
+FROM node:18-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+
+# NAS部署非常关键的一步：由于走Nginx同域反代，需将URL置空以使用相对路径，避免局域网IP锁死
+ENV VITE_API_BASE_URL=""
+RUN npm run build
+
+FROM nginx:alpine
+# 获取vite构件结果
+COPY --from=builder /app/dist /usr/share/nginx/html
+# 覆盖Nginx默认配置
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# 暴露的Web服务器访问端口
+EXPOSE 80
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -0,0 +1,39 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    ElAlert: typeof import('element-plus/es')['ElAlert']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElEmpty: typeof import('element-plus/es')['ElEmpty']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTag: typeof import('element-plus/es')['ElTag']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    OrderEditorDialog: typeof import('./src/components/OrderEditorDialog.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+  export interface GlobalDirectives {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
+}
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -0,0 +1,29 @@
+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  localhost;
+
+    # 开启 gzip 压缩
+    gzip on;
+    gzip_min_length 1k;
+    gzip_comp_level 6;
+    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        # 支持 Vue Router history 模式
+        try_files $uri $uri/ /index.html;
+    }
+
+    # 反向代理所有后端的 API 请求 -> backend服务容器 (Docker compose 网络内的名字和暴露的端口)
+    location /api/ {
+        proxy_pass http://backend:8080/api/;
+        
+        # 传递客户端真实IP给后端
+        proxy_set_header Host $http_host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
+    "element-plus": "^2.13.7",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.32",
+    "vue-router": "^5.0.4"
+  },
+  "devDependencies": {
+    "@types/node": "^24.12.2",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/tsconfig": "^0.9.1",
+    "typescript": "~6.0.2",
+    "unplugin-vue-components": "^32.0.0",
+    "vite": "^8.0.4",
+    "vue-tsc": "^3.2.6"
+  }
+}
--- a/frontend/public/favicon.svg
+++ b/frontend/public/favicon.svg
--- a/frontend/public/icons.svg
+++ b/frontend/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,3 @@
+<template>
+  <RouterView />
+</template>
--- a/frontend/src/assets/brand-mark.svg
+++ b/frontend/src/assets/brand-mark.svg
@@ -0,0 +1,25 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="256" height="256" rx="24" fill="#F6F7F5"/>
+  <g fill="#24373B">
+    <rect x="8" y="8" width="98" height="10" rx="5"/>
+    <rect x="8" y="238" width="98" height="10" rx="5"/>
+    <rect x="148" y="8" width="100" height="10" rx="5"/>
+    <rect x="148" y="238" width="100" height="10" rx="5"/>
+    <rect x="6" y="72" width="10" height="56" rx="5"/>
+    <rect x="6" y="160" width="10" height="64" rx="5"/>
+    <rect x="240" y="42" width="10" height="68" rx="5"/>
+    <rect x="240" y="142" width="10" height="76" rx="5"/>
+  </g>
+  <rect x="142" y="28" width="92" height="200" rx="14" fill="#24373B"/>
+  <text x="58" y="54" fill="#24373B" font-family="KaiTi, STKaiti, 'Source Han Serif SC', serif" font-size="30" font-weight="700">
+    <tspan x="58" dy="22">纯</tspan>
+    <tspan x="58" dy="44">铜</tspan>
+    <tspan x="58" dy="44">手</tspan>
+    <tspan x="58" dy="44">造</tspan>
+  </text>
+  <text x="188" y="58" fill="#FFFBF5" text-anchor="middle" font-family="KaiTi, STKaiti, 'Source Han Serif SC', serif" font-size="44" font-weight="700">
+    <tspan x="188" dy="26">昆</tspan>
+    <tspan x="188" dy="56">吾</tspan>
+    <tspan x="188" dy="56">山</tspan>
+  </text>
+</svg>
--- a/frontend/src/assets/hero.png
+++ b/frontend/src/assets/hero.png
--- a/frontend/src/assets/vite.svg
+++ b/frontend/src/assets/vite.svg
--- a/frontend/src/assets/vue.svg
+++ b/frontend/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/frontend/src/components/HelloWorld.vue
+++ b/frontend/src/components/HelloWorld.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import viteLogo from '../assets/vite.svg'
+import heroImg from '../assets/hero.png'
+import vueLogo from '../assets/vue.svg'
+
+const count = ref(0)
+</script>
+
+<template>
+  <section id="center">
+    <div class="hero">
+      <img :src="heroImg" class="base" width="170" height="179" alt="" />
+      <img :src="vueLogo" class="framework" alt="Vue logo" />
+      <img :src="viteLogo" class="vite" alt="Vite logo" />
+    </div>
+    <div>
+      <h1>Get started</h1>
+      <p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
+    </div>
+    <button class="counter" @click="count++">Count is {{ count }}</button>
+  </section>
+
+  <div class="ticks"></div>
+
+  <section id="next-steps">
+    <div id="docs">
+      <svg class="icon" role="presentation" aria-hidden="true">
+        <use href="/icons.svg#documentation-icon"></use>
+      </svg>
+      <h2>Documentation</h2>
+      <p>Your questions, answered</p>
+      <ul>
+        <li>
+          <a href="https://vite.dev/" target="_blank">
+            <img class="logo" :src="viteLogo" alt="" />
+            Explore Vite
+          </a>
+        </li>
+        <li>
+          <a href="https://vuejs.org/" target="_blank">
+            <img class="button-icon" :src="vueLogo" alt="" />
+            Learn more
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div id="social">
+      <svg class="icon" role="presentation" aria-hidden="true">
+        <use href="/icons.svg#social-icon"></use>
+      </svg>
+      <h2>Connect with us</h2>
+      <p>Join the Vite community</p>
+      <ul>
+        <li>
+          <a href="https://github.com/vitejs/vite" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#github-icon"></use>
+            </svg>
+            GitHub
+          </a>
+        </li>
+        <li>
+          <a href="https://chat.vite.dev/" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#discord-icon"></use>
+            </svg>
+            Discord
+          </a>
+        </li>
+        <li>
+          <a href="https://x.com/vite_js" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#x-icon"></use>
+            </svg>
+            X.com
+          </a>
+        </li>
+        <li>
+          <a href="https://bsky.app/profile/vite.dev" target="_blank">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#bluesky-icon"></use>
+            </svg>
+            Bluesky
+          </a>
+        </li>
+      </ul>
+    </div>
+  </section>
+
+  <div class="ticks"></div>
+  <section id="spacer"></section>
+</template>
--- a/frontend/src/components/OrderEditorDialog.vue
+++ b/frontend/src/components/OrderEditorDialog.vue
@@ -0,0 +1,321 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getCategoryProductsApi } from '../services/catalog'
+import { createOrderApi, updateOrderApi } from '../services/order'
+import { useAuthStore } from '../stores/auth'
+import { useCatalogStore } from '../stores/catalog'
+import type { ProductSummary } from '../types/catalog'
+import type { OrderDetail, OrderMutationItem, OrderMutationPayload } from '../types/order'
+
+interface OrderEditorLine {
+  productId: number | null
+  quantity: number
+}
+
+const props = defineProps<{
+  modelValue: boolean
+  mode: 'create' | 'edit'
+  order?: OrderDetail | null
+  presetItems?: OrderMutationItem[]
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+  (event: 'saved', value: OrderDetail): void
+}>()
+
+const authStore = useAuthStore()
+const catalogStore = useCatalogStore()
+const loadingProducts = ref(false)
+const saving = ref(false)
+const loadedProductDataVersion = ref(-1)
+const products = ref<ProductSummary[]>([])
+const form = reactive({
+  remark: '',
+  items: [createEmptyLine()] as OrderEditorLine[],
+})
+
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value),
+})
+const dialogTitle = computed(() => (props.mode === 'create' ? '新增订单' : '编辑订单'))
+const productMap = computed(() => new Map(products.value.map((product) => [product.id, product])))
+const mergedQuantityMap = computed(() => {
+  const quantityMap = new Map<number, number>()
+
+  form.items.forEach((item) => {
+    if (!item.productId) {
+      return
+    }
+
+    quantityMap.set(item.productId, (quantityMap.get(item.productId) ?? 0) + Number(item.quantity || 0))
+  })
+
+  return quantityMap
+})
+const totalQuantity = computed(() => form.items.reduce((sum, item) => sum + Number(item.quantity || 0), 0))
+const totalAmount = computed(() => form.items.reduce((sum, item) => sum + lineSubtotal(item), 0))
+
+function createEmptyLine(): OrderEditorLine {
+  return {
+    productId: null,
+    quantity: 1,
+  }
+}
+
+function resetForm(order?: OrderDetail | null, presetItems?: OrderMutationItem[]) {
+  form.remark = order?.remark ?? ''
+  if (order?.items.length) {
+    form.items = order.items.map((item) => ({ productId: item.productId, quantity: item.quantity }))
+    return
+  }
+
+  if (presetItems && presetItems.length > 0) {
+    form.items = presetItems.map((item) => ({ productId: item.productId, quantity: item.quantity }))
+    return
+  }
+
+  form.items = [createEmptyLine()]
+}
+
+function lineSubtotal(item: OrderEditorLine) {
+  const product = item.productId ? productMap.value.get(item.productId) : undefined
+  return product ? product.price * item.quantity : 0
+}
+
+function addItem() {
+  form.items.push(createEmptyLine())
+}
+
+function removeItem(index: number) {
+  if (form.items.length === 1) {
+    form.items.splice(0, 1, createEmptyLine())
+    return
+  }
+
+  form.items.splice(index, 1)
+}
+
+function productLabel(product: ProductSummary) {
+  return `${product.model} · ${product.name} / ${product.sku}`
+}
+
+function requestedQuantity(productId: number | null) {
+  if (!productId) {
+    return 0
+  }
+
+  return mergedQuantityMap.value.get(productId) ?? 0
+}
+
+function stockShortage(productId: number | null) {
+  if (!productId) {
+    return 0
+  }
+
+  const product = productMap.value.get(productId)
+  if (!product) {
+    return 0
+  }
+
+  return Math.max(0, requestedQuantity(productId) - product.stock)
+}
+
+async function ensureProductsLoaded() {
+  if (!authStore.token) {
+    return
+  }
+
+  const shouldReload = loadedProductDataVersion.value !== catalogStore.productDataVersion
+
+  if (products.value.length > 0 && !shouldReload) {
+    return
+  }
+
+  loadingProducts.value = true
+
+  try {
+    await catalogStore.loadCategoryTree(authStore.token)
+    const productGroups = await Promise.all(
+      catalogStore.categoryTree.map((node) => getCategoryProductsApi(node.id, authStore.token as string)),
+    )
+
+    const uniqueProducts = new Map<number, ProductSummary>()
+    productGroups.flat().forEach((product) => {
+      uniqueProducts.set(product.id, product)
+    })
+
+    products.value = Array.from(uniqueProducts.values()).sort((left, right) => {
+      if (left.categoryId !== right.categoryId) {
+        return left.categoryId - right.categoryId
+      }
+
+      return left.id - right.id
+    })
+    loadedProductDataVersion.value = catalogStore.productDataVersion
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `商品清单加载失败：${error.message}` : '商品清单加载失败')
+  } finally {
+    loadingProducts.value = false
+  }
+}
+
+async function submit() {
+  if (!authStore.token) {
+    ElMessage.error('缺少登录令牌')
+    return
+  }
+
+  const hasInvalidRow = form.items.some((item) => !item.productId || item.quantity < 1)
+  if (hasInvalidRow) {
+    ElMessage.warning('请完整选择商品并填写有效数量')
+    return
+  }
+
+  const insufficientProduct = form.items
+    .map((item) => item.productId)
+    .filter((productId): productId is number => productId !== null)
+    .map((productId) => {
+      const product = productMap.value.get(productId)
+      if (!product) {
+        return null
+      }
+
+      const selectedQuantity = requestedQuantity(productId)
+      if (selectedQuantity <= product.stock) {
+        return null
+      }
+
+      return { product, selectedQuantity }
+    })
+    .find((item) => item !== null)
+
+  if (insufficientProduct) {
+    ElMessage.warning(`库存不足：${insufficientProduct.product.model} · ${insufficientProduct.product.name} 当前库存 ${insufficientProduct.product.stock}，已选 ${insufficientProduct.selectedQuantity}`)
+    return
+  }
+
+  const payload: OrderMutationPayload = {
+    remark: form.remark.trim(),
+    items: form.items.map((item) => ({
+      productId: Number(item.productId),
+      quantity: Number(item.quantity),
+    })),
+  }
+
+  saving.value = true
+
+  try {
+    const detail = props.mode === 'create'
+      ? await createOrderApi(payload, authStore.token)
+      : await updateOrderApi(props.order?.id ?? '', payload, authStore.token)
+
+    emit('saved', detail)
+    dialogVisible.value = false
+    ElMessage.success(props.mode === 'create' ? '订单创建成功' : '订单已更新')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `订单保存失败：${error.message}` : '订单保存失败')
+  } finally {
+    saving.value = false
+  }
+}
+
+watch(
+  () => props.modelValue,
+  async (visible) => {
+    if (!visible) {
+      return
+    }
+
+    await ensureProductsLoaded()
+    resetForm(props.order ?? null, props.mode === 'create' ? props.presetItems : undefined)
+  },
+)
+
+watch(
+  () => props.order,
+  (order) => {
+    if (props.modelValue && props.mode === 'edit') {
+      resetForm(order ?? null)
+    }
+  },
+)
+
+watch(
+  () => props.presetItems,
+  (presetItems) => {
+    if (props.modelValue && props.mode === 'create') {
+      resetForm(null, presetItems)
+    }
+  },
+)
+</script>
+
+<template>
+  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="900px" destroy-on-close>
+    <div class="page-stack" v-loading="loadingProducts">
+      <div class="detail-field detail-field--full">
+        <span>订单备注</span>
+        <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="可填写客户说明、包装要求等备注" />
+      </div>
+
+      <section class="surface-panel order-editor-panel">
+        <div class="surface-panel__head">
+          <div>
+            <h3>订单明细</h3>
+            <p>订单金额将按当前商品价格自动汇总。</p>
+          </div>
+          <el-button type="primary" plain @click="addItem">新增一行</el-button>
+        </div>
+
+        <div class="order-editor-list">
+          <article v-for="(item, index) in form.items" :key="index" class="order-editor-line">
+            <div class="order-editor-line__row">
+              <el-select v-model="item.productId" filterable placeholder="选择商品" class="order-editor-line__product">
+                <el-option v-for="product in products" :key="product.id" :label="productLabel(product)" :value="product.id" />
+              </el-select>
+              <el-input-number v-model="item.quantity" :min="1" :step="1" />
+              <el-button plain @click="removeItem(index)">删除</el-button>
+            </div>
+            <div class="order-editor-line__meta">
+              <span>SKU：{{ item.productId ? productMap.get(item.productId)?.sku ?? '-' : '未选择' }}</span>
+              <span>单价：{{ item.productId ? productMap.get(item.productId)?.price ?? 0 : 0 }}</span>
+              <span>库存：{{ item.productId ? productMap.get(item.productId)?.stock ?? 0 : 0 }}</span>
+              <span v-if="item.productId && stockShortage(item.productId) > 0" class="order-editor-line__warning">
+                库存不足：当前库存 {{ productMap.get(item.productId)?.stock ?? 0 }}，已选 {{ requestedQuantity(item.productId) }}
+              </span>
+              <strong>小计：{{ lineSubtotal(item) }}</strong>
+            </div>
+          </article>
+        </div>
+      </section>
+
+      <section class="stats-grid stats-grid--three">
+        <article class="stats-card">
+          <span>明细行数</span>
+          <strong>{{ form.items.length }}</strong>
+          <p>支持同一订单内添加多个商品明细。</p>
+        </article>
+        <article class="stats-card">
+          <span>总数量</span>
+          <strong>{{ totalQuantity }}</strong>
+          <p>用于同步订单快照数量统计。</p>
+        </article>
+        <article class="stats-card">
+          <span>总金额</span>
+          <strong>{{ totalAmount }}</strong>
+          <p>按当前商品价格自动汇总。</p>
+        </article>
+      </section>
+    </div>
+
+    <template #footer>
+      <div class="dialog-footer-actions">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="submit">保存订单</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
--- a/frontend/src/layouts/AppLayout.vue
+++ b/frontend/src/layouts/AppLayout.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import brandMark from '../assets/brand-mark.svg'
+import { ORDER_PERMISSIONS, PRODUCT_PERMISSIONS, STATISTICS_PERMISSIONS, USER_MANAGE_PERMISSIONS } from '../services/access'
+import { useAuthStore } from '../stores/auth'
+import { useCatalogStore } from '../stores/catalog'
+import { useOrdersStore } from '../stores/orders'
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+const catalogStore = useCatalogStore()
+const ordersStore = useOrdersStore()
+
+const pendingOrderCount = computed(() => (canSeeOrders.value ? ordersStore.pendingCount : 0))
+
+const canSeeProducts = computed(() => authStore.canAny(PRODUCT_PERMISSIONS))
+const canSeeOrders = computed(() => authStore.canAny(ORDER_PERMISSIONS))
+const canSeeStatistics = computed(() => authStore.canAny(STATISTICS_PERMISSIONS))
+const canSeeUsers = computed(() => authStore.canAny(USER_MANAGE_PERMISSIONS))
+
+const pageTitle = computed(() => String(route.meta.title ?? '铜壶管理系统'))
+const productTree = computed(() => catalogStore.categoryTree)
+const firstCategoryId = computed(() => catalogStore.firstCategoryId)
+const pendingOrderLabel = computed(() => (canSeeOrders.value ? `待处理订单 ${pendingOrderCount.value}` : '无订单权限'))
+
+async function initializeLayoutData() {
+  if (!authStore.token) {
+    return
+  }
+
+  const tasks: Promise<unknown>[] = []
+
+  if (canSeeProducts.value) {
+    tasks.push(
+      catalogStore.loadCategoryTree(authStore.token).catch((error) => {
+        ElMessage.warning(error instanceof Error ? `商品目录加载失败：${error.message}` : '商品目录加载失败')
+      }),
+    )
+  }
+
+  if (canSeeOrders.value) {
+    tasks.push(
+      ordersStore.loadOrders(authStore.token).catch((error) => {
+        ElMessage.warning(error instanceof Error ? `订单摘要加载失败：${error.message}` : '订单摘要加载失败')
+      }),
+    )
+  }
+
+  await Promise.all(tasks)
+}
+
+function logout() {
+  authStore.logout()
+  ElMessage.success('已退出登录')
+  void router.replace({ name: 'login' })
+}
+
+onMounted(() => {
+  void initializeLayoutData()
+})
+</script>
+
+<template>
+  <div class="app-shell">
+    <aside class="app-sidebar">
+      <div class="app-sidebar__brand">
+        <img class="brand-mark" :src="brandMark" alt="铜壶管理系统品牌标识" />
+        <div>
+          <strong>铜壶管理系统</strong>
+        </div>
+      </div>
+
+      <section v-if="canSeeProducts" class="app-sidebar__section" v-loading="catalogStore.loading">
+        <p class="app-sidebar__label">商品目录</p>
+        <p v-if="!catalogStore.loading && productTree.length === 0" class="app-sidebar__state">暂无商品目录</p>
+        <div class="tree-group" v-for="node in productTree" :key="node.id">
+          <RouterLink
+            class="tree-node"
+            :class="{ 'is-active': String(route.params.categoryId ?? '') === String(node.id) }"
+            :to="{ name: 'product-center', params: { categoryId: String(node.id) } }"
+          >
+            {{ node.name }}
+          </RouterLink>
+          <div class="tree-children">
+            <RouterLink
+              v-for="child in node.children"
+              :key="child.id"
+              class="tree-child"
+              :class="{ 'is-current': String(route.params.productId ?? '') === String(child.productId) }"
+              :to="{ name: 'product-detail', params: { productId: String(child.productId) } }"
+            >
+              {{ child.name }}
+            </RouterLink>
+          </div>
+        </div>
+      </section>
+
+      <section class="app-sidebar__section">
+        <p class="app-sidebar__label">业务模块</p>
+        <RouterLink
+          v-if="canSeeProducts"
+          class="nav-item"
+          :class="{ 'is-active': route.name === 'product-center' || route.name === 'product-detail' }"
+          :to="{ name: 'product-center', params: { categoryId: firstCategoryId } }"
+        >
+          商品中心
+        </RouterLink>
+        <RouterLink
+          v-if="canSeeOrders"
+          class="nav-item"
+          :class="{ 'is-active': route.name === 'orders' || route.name === 'order-detail' }"
+          :to="{ name: 'orders' }"
+        >
+          订单中心
+        </RouterLink>
+        <RouterLink
+          v-if="canSeeStatistics"
+          class="nav-item"
+          :class="{ 'is-active': route.name === 'statistics' }"
+          :to="{ name: 'statistics' }"
+        >
+          经营统计
+        </RouterLink>
+        <RouterLink
+          v-if="canSeeUsers"
+          class="nav-item"
+          :class="{ 'is-active': route.name === 'users' }"
+          :to="{ name: 'users' }"
+        >
+          用户管理
+        </RouterLink>
+      </section>
+    </aside>
+
+    <div class="app-main">
+      <header class="app-topbar">
+        <div>
+          <div class="app-topbar__title">{{ pageTitle }}</div>
+        </div>
+        <div class="app-topbar__actions">
+          <div class="topbar-search">搜索 SKU / 商品名 / 订单号</div>
+          <div class="topbar-chip topbar-chip--brand">{{ pendingOrderLabel }}</div>
+          <div class="topbar-chip">{{ authStore.user?.displayName }} · {{ authStore.user?.userType === 'ADMIN' ? '管理员' : '普通用户' }}</div>
+          <button class="topbar-link" @click="logout">退出登录</button>
+        </div>
+      </header>
+
+      <main class="app-content">
+        <RouterView />
+      </main>
+    </div>
+  </div>
+</template>
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import 'element-plus/es/components/message/style/css'
+import 'element-plus/es/components/message-box/style/css'
+import App from './App.vue'
+import router from './router'
+import { pinia } from './stores'
+import './style.css'
+
+createApp(App).use(pinia).use(router).mount('#app')
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -0,0 +1,111 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { pinia } from '../stores'
+import { useAuthStore } from '../stores/auth'
+import { resolveHomeRoute } from '../services/access'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('../views/auth/LoginView.vue'),
+      meta: { title: '登录' },
+    },
+    {
+      path: '/',
+      component: () => import('../layouts/AppLayout.vue'),
+      meta: { requiresAuth: true },
+      children: [
+        {
+          path: '',
+          redirect: '/categories/1',
+        },
+        {
+          path: 'categories/:categoryId',
+          name: 'product-center',
+          component: () => import('../views/product/ProductCenterView.vue'),
+          meta: {
+            title: '商品中心',
+            permissions: ['PRODUCT_VIEW', 'PRODUCT_EDIT', 'ASSET_UPLOAD'],
+          },
+        },
+        {
+          path: 'products/:productId',
+          name: 'product-detail',
+          component: () => import('../views/product/ProductDetailView.vue'),
+          meta: {
+            title: '商品详情',
+            permissions: ['PRODUCT_VIEW', 'PRODUCT_EDIT', 'ASSET_UPLOAD'],
+          },
+        },
+        {
+          path: 'orders',
+          name: 'orders',
+          component: () => import('../views/order/OrdersView.vue'),
+          meta: {
+            title: '订单中心',
+            permissions: ['ORDER_VIEW', 'ORDER_PROCESS', 'ORDER_COMPLETE'],
+          },
+        },
+        {
+          path: 'orders/:orderId',
+          name: 'order-detail',
+          component: () => import('../views/order/OrderDetailView.vue'),
+          meta: {
+            title: '订单详情',
+            permissions: ['ORDER_VIEW', 'ORDER_PROCESS', 'ORDER_COMPLETE'],
+          },
+        },
+        {
+          path: 'statistics',
+          name: 'statistics',
+          component: () => import('../views/statistics/StatisticsView.vue'),
+          meta: {
+            title: '经营统计',
+            permissions: ['STATISTICS_VIEW'],
+          },
+        },
+        {
+          path: 'system/users',
+          name: 'users',
+          component: () => import('../views/system/UsersView.vue'),
+          meta: {
+            title: '用户管理',
+            permissions: ['USER_MANAGE'],
+          },
+        },
+      ],
+    },
+  ],
+})
+
+router.beforeEach(async (to) => {
+  const authStore = useAuthStore(pinia)
+
+  if (!authStore.initialized) {
+    await authStore.bootstrap()
+  }
+
+  if (to.name === 'login' && authStore.isAuthenticated) {
+    return resolveHomeRoute(authStore.user)
+  }
+
+  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth)
+  if (requiresAuth && !authStore.isAuthenticated) {
+    return { name: 'login' }
+  }
+
+  const permissions = to.matched.flatMap((record) => {
+    const metaPermissions = record.meta.permissions
+    return Array.isArray(metaPermissions) ? metaPermissions : []
+  })
+
+  if (permissions.length > 0 && !authStore.canAny(permissions)) {
+    return resolveHomeRoute(authStore.user)
+  }
+
+  return true
+})
+
+export default router
--- a/frontend/src/services/access.ts
+++ b/frontend/src/services/access.ts
@@ -0,0 +1,58 @@
+import type { RouteLocationRaw } from 'vue-router'
+import type { CurrentUser } from '../types/auth'
+
+export const PRODUCT_PERMISSIONS = ['PRODUCT_VIEW', 'PRODUCT_EDIT', 'ASSET_UPLOAD']
+export const ORDER_PERMISSIONS = ['ORDER_VIEW', 'ORDER_PROCESS', 'ORDER_COMPLETE']
+export const STATISTICS_PERMISSIONS = ['STATISTICS_VIEW']
+export const USER_MANAGE_PERMISSIONS = ['USER_MANAGE']
+
+export const PERMISSION_OPTIONS = [
+  { code: 'PRODUCT_VIEW', label: '商品查看', group: '商品' },
+  { code: 'PRODUCT_EDIT', label: '商品编辑', group: '商品' },
+  { code: 'ASSET_UPLOAD', label: '附件上传', group: '商品' },
+  { code: 'ORDER_VIEW', label: '订单查看', group: '订单' },
+  { code: 'ORDER_PROCESS', label: '订单处理', group: '订单' },
+  { code: 'ORDER_COMPLETE', label: '订单完成', group: '订单' },
+  { code: 'STATISTICS_VIEW', label: '统计查看', group: '统计' },
+  { code: 'USER_MANAGE', label: '用户管理', group: '系统' },
+] as const
+
+export const PERMISSION_LABEL_MAP: Record<string, string> = Object.fromEntries(
+  PERMISSION_OPTIONS.map((option) => [option.code, option.label]),
+)
+
+export function hasAnyPermission(user: CurrentUser | null, permissions: string[]) {
+  if (!user) {
+    return false
+  }
+
+  if (user.userType === 'ADMIN') {
+    return true
+  }
+
+  return permissions.some((permission) => user.permissions.includes(permission))
+}
+
+export function hasPermission(user: CurrentUser | null, permission: string) {
+  return hasAnyPermission(user, [permission])
+}
+
+export function resolveHomeRoute(user: CurrentUser | null): RouteLocationRaw {
+  if (hasAnyPermission(user, PRODUCT_PERMISSIONS)) {
+    return { name: 'product-center', params: { categoryId: '1' } }
+  }
+
+  if (hasAnyPermission(user, ORDER_PERMISSIONS)) {
+    return { name: 'orders' }
+  }
+
+  if (hasAnyPermission(user, STATISTICS_PERMISSIONS)) {
+    return { name: 'statistics' }
+  }
+
+  if (hasAnyPermission(user, USER_MANAGE_PERMISSIONS)) {
+    return { name: 'users' }
+  }
+
+  return { name: 'login' }
+}
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -0,0 +1,86 @@
+import type { ApiResponse } from '../types/auth'
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:8080'
+
+function resolveHeaders(options: RequestInit) {
+  const headers = new Headers(options.headers ?? {})
+  const isFormData = typeof FormData !== 'undefined' && options.body instanceof FormData
+
+  if (!headers.has('Content-Type') && options.body && !isFormData) {
+    headers.set('Content-Type', 'application/json')
+  }
+
+  return headers
+}
+
+function extractFileName(contentDisposition: string | null) {
+  if (!contentDisposition) {
+    return null
+  }
+
+  const utf8Match = contentDisposition.match(/filename\*=UTF-8''([^;]+)/i)
+  if (utf8Match?.[1]) {
+    return decodeURIComponent(utf8Match[1])
+  }
+
+  const simpleMatch = contentDisposition.match(/filename="?([^";]+)"?/i)
+  return simpleMatch?.[1] ?? null
+}
+
+export async function request<T>(
+  path: string,
+  options: RequestInit = {},
+  token?: string,
+): Promise<T> {
+  const headers = resolveHeaders(options)
+
+  if (token) {
+    headers.set('Authorization', `Bearer ${token}`)
+  }
+
+  const response = await fetch(`${API_BASE_URL}${path}`, {
+    ...options,
+    headers,
+  })
+
+  const result = (await response.json()) as ApiResponse<T>
+
+  if (!response.ok || !result.success) {
+    throw new Error(result.message || '请求失败')
+  }
+
+  return result.data
+}
+
+export async function requestBlob(
+  path: string,
+  options: RequestInit = {},
+  token?: string,
+): Promise<{ blob: Blob; fileName: string | null; mimeType: string | null }> {
+  const headers = resolveHeaders(options)
+
+  if (token) {
+    headers.set('Authorization', `Bearer ${token}`)
+  }
+
+  const response = await fetch(`${API_BASE_URL}${path}`, {
+    ...options,
+    headers,
+  })
+
+  if (!response.ok) {
+    const contentType = response.headers.get('Content-Type') ?? ''
+    if (contentType.includes('application/json')) {
+      const result = (await response.json()) as ApiResponse<null>
+      throw new Error(result.message || '请求失败')
+    }
+
+    throw new Error(await response.text())
+  }
+
+  return {
+    blob: await response.blob(),
+    fileName: extractFileName(response.headers.get('Content-Disposition')),
+    mimeType: response.headers.get('Content-Type'),
+  }
+}
--- a/frontend/src/services/asset.ts
+++ b/frontend/src/services/asset.ts
@@ -0,0 +1,45 @@
+import { request, requestBlob } from './api'
+import type { DownloadedAssetFile, ProductAsset, ProductAssetRole } from '../types/asset'
+
+export function getProductAssetsApi(productId: string | number, token: string) {
+  return request<ProductAsset[]>(`/api/products/${productId}/assets`, undefined, token)
+}
+
+export function uploadProductAssetApi(
+  productId: string | number,
+  payload: { fileRole: ProductAssetRole; file: File; isPrimary?: boolean },
+  token: string,
+) {
+  const formData = new FormData()
+  formData.set('fileRole', payload.fileRole)
+  formData.set('isPrimary', payload.isPrimary ? 'true' : 'false')
+  formData.set('file', payload.file)
+
+  return request<ProductAsset>(`/api/products/${productId}/assets`, {
+    method: 'POST',
+    body: formData,
+  }, token)
+}
+
+export function downloadProductAssetApi(productId: string | number, assetId: string | number, token: string): Promise<DownloadedAssetFile> {
+  return requestBlob(`/api/products/${productId}/assets/${assetId}/download`, undefined, token)
+}
+
+export function setPrimaryProductAssetApi(productId: string | number, assetId: string | number, token: string) {
+  return request<ProductAsset>(`/api/products/${productId}/assets/${assetId}/primary`, {
+    method: 'PUT',
+  }, token)
+}
+
+export function reorderProductImageAssetsApi(productId: string | number, assetIds: number[], token: string) {
+  return request<ProductAsset[]>(`/api/products/${productId}/assets/image-order`, {
+    method: 'PUT',
+    body: JSON.stringify({ assetIds }),
+  }, token)
+}
+
+export function deleteProductAssetApi(productId: string | number, assetId: string | number, token: string) {
+  return request<{ message: string }>(`/api/products/${productId}/assets/${assetId}`, {
+    method: 'DELETE',
+  }, token)
+}
--- a/frontend/src/services/auth.ts
+++ b/frontend/src/services/auth.ts
@@ -0,0 +1,13 @@
+import { request } from './api'
+import type { CurrentUser, LoginResponsePayload } from '../types/auth'
+
+export function loginApi(payload: { username: string; password: string }) {
+  return request<LoginResponsePayload>('/api/auth/login', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  })
+}
+
+export function getCurrentUserApi(token: string) {
+  return request<CurrentUser>('/api/auth/me', undefined, token)
+}
--- a/frontend/src/services/catalog.ts
+++ b/frontend/src/services/catalog.ts
@@ -0,0 +1,65 @@
+import { request } from './api'
+import type {
+  CreateProductPayload,
+  CategoryTreeNode,
+  ProductDetail,
+  ProductStatusCode,
+  ProductStatusTagType,
+  ProductSummary,
+  UpdateProductPayload,
+} from '../types/catalog'
+
+export const PRODUCT_STATUS_OPTIONS: Array<{ label: string; value: ProductStatusCode }> = [
+  { label: '可售', value: 'AVAILABLE' },
+  { label: '库存少', value: 'LOW_STOCK' },
+  { label: '库存多', value: 'HIGH_STOCK' },
+  { label: '停产', value: 'DISCONTINUED' },
+]
+
+const PRODUCT_STATUS_LABELS: Record<ProductStatusCode, string> = {
+  AVAILABLE: '可售',
+  LOW_STOCK: '库存少',
+  HIGH_STOCK: '库存多',
+  DISCONTINUED: '停产',
+}
+
+const PRODUCT_STATUS_TYPES: Record<ProductStatusCode, ProductStatusTagType> = {
+  AVAILABLE: 'success',
+  LOW_STOCK: 'warning',
+  HIGH_STOCK: 'info',
+  DISCONTINUED: 'danger',
+}
+
+export function getProductStatusLabel(status: ProductStatusCode) {
+  return PRODUCT_STATUS_LABELS[status]
+}
+
+export function getProductStatusType(status: ProductStatusCode) {
+  return PRODUCT_STATUS_TYPES[status]
+}
+
+export function getCategoryTreeApi(token: string) {
+  return request<CategoryTreeNode[]>('/api/categories/tree', undefined, token)
+}
+
+export function getCategoryProductsApi(categoryId: string | number, token: string) {
+  return request<ProductSummary[]>(`/api/categories/${categoryId}/products`, undefined, token)
+}
+
+export function getProductDetailApi(productId: string | number, token: string) {
+  return request<ProductDetail>(`/api/products/${productId}`, undefined, token)
+}
+
+export function createProductApi(payload: CreateProductPayload, token: string) {
+  return request<ProductDetail>('/api/products', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  }, token)
+}
+
+export function updateProductApi(productId: string | number, payload: UpdateProductPayload, token: string) {
+  return request<ProductDetail>(`/api/products/${productId}`, {
+    method: 'PUT',
+    body: JSON.stringify(payload),
+  }, token)
+}
--- a/frontend/src/services/mock-data.ts
+++ b/frontend/src/services/mock-data.ts
@@ -0,0 +1,142 @@
+import type { UserListItem } from '../types/auth'
+
+export const productNodes = [
+  {
+    id: '1',
+    name: '1号普通壶',
+    children: [
+      { id: '101', name: '花纹A', productId: '101' },
+      { id: '102', name: '花纹B', productId: '102' },
+      { id: '103', name: '花纹C', productId: '103' },
+    ],
+  },
+  {
+    id: '2',
+    name: '2号锤纹壶',
+    children: [
+      { id: '201', name: '锤纹青古', productId: '201' },
+      { id: '202', name: '锤纹亮铜', productId: '202' },
+    ],
+  },
+]
+
+export const productCards = [
+  {
+    id: '101',
+    categoryId: '1',
+    model: '1号普通壶',
+    name: '花纹A',
+    sku: 'TH-001-A',
+    price: 198,
+    stock: 82,
+    status: '可售',
+    statusType: 'success',
+    remark: '常规热销款式，适合批发出货。',
+  },
+  {
+    id: '102',
+    categoryId: '1',
+    model: '1号普通壶',
+    name: '花纹B',
+    sku: 'TH-001-B',
+    price: 228,
+    stock: 9,
+    status: '库存少',
+    statusType: 'warning',
+    remark: '库存较少，建议控制订单数量。',
+  },
+  {
+    id: '103',
+    categoryId: '1',
+    model: '1号普通壶',
+    name: '花纹C',
+    sku: 'TH-001-C',
+    price: 268,
+    stock: 145,
+    status: '库存多',
+    statusType: 'info',
+    remark: '库存充足，适合大单。',
+  },
+  {
+    id: '201',
+    categoryId: '2',
+    model: '2号锤纹壶',
+    name: '锤纹青古',
+    sku: 'TH-002-A',
+    price: 318,
+    stock: 36,
+    status: '可售',
+    statusType: 'success',
+    remark: '主打纹理工艺，适合展示。',
+  },
+]
+
+export const orderList = [
+  {
+    id: 'TH20260411-008',
+    status: 'PENDING',
+    createdAt: '2026-04-11 09:30',
+    totalQuantity: 36,
+    totalAmount: 7820,
+    expressNo: '',
+    items: [
+      { name: '花纹A', sku: 'TH-001-A', price: 198, quantity: 10, amount: 1980 },
+      { name: '花纹B', sku: 'TH-001-B', price: 228, quantity: 8, amount: 1824 },
+      { name: '花纹C', sku: 'TH-001-C', price: 268, quantity: 6, amount: 1608 },
+    ],
+  },
+  {
+    id: 'TH20260410-005',
+    status: 'COMPLETED',
+    createdAt: '2026-04-10 15:10',
+    totalQuantity: 22,
+    totalAmount: 5280,
+    expressNo: 'SF847266012210',
+    items: [
+      { name: '锤纹青古', sku: 'TH-002-A', price: 318, quantity: 12, amount: 3816 },
+      { name: '花纹A', sku: 'TH-001-A', price: 198, quantity: 6, amount: 1188 },
+    ],
+  },
+]
+
+export const statisticsRows = [
+  { name: '花纹A', quantity: 58, price: 198, subtotal: 11484 },
+  { name: '花纹B', quantity: 22, price: 228, subtotal: 5016 },
+  { name: '锤纹青古', quantity: 31, price: 318, subtotal: 9858 },
+]
+
+export const demoUsers: UserListItem[] = [
+  {
+    id: 1,
+    username: 'admin',
+    displayName: '系统管理员',
+    userType: 'ADMIN',
+    status: 'ENABLED',
+    permissions: [
+      'PRODUCT_VIEW',
+      'PRODUCT_EDIT',
+      'ASSET_UPLOAD',
+      'ORDER_VIEW',
+      'ORDER_PROCESS',
+      'ORDER_COMPLETE',
+      'STATISTICS_VIEW',
+      'USER_MANAGE',
+    ],
+  },
+  {
+    id: 2,
+    username: 'customer',
+    displayName: '客户演示用户',
+    userType: 'NORMAL',
+    status: 'ENABLED',
+    permissions: ['PRODUCT_VIEW'],
+  },
+  {
+    id: 3,
+    username: 'packer',
+    displayName: '打包工演示用户',
+    userType: 'NORMAL',
+    status: 'ENABLED',
+    permissions: ['ORDER_VIEW', 'ORDER_PROCESS', 'ORDER_COMPLETE'],
+  },
+]
--- a/frontend/src/services/order.ts
+++ b/frontend/src/services/order.ts
@@ -0,0 +1,41 @@
+import { request, requestBlob } from './api'
+import type { OrderDetail, OrderMutationPayload, OrderSummary } from '../types/order'
+
+export function getOrdersApi(token: string) {
+  return request<OrderSummary[]>('/api/orders', undefined, token)
+}
+
+export function createOrderApi(payload: OrderMutationPayload, token: string) {
+  return request<OrderDetail>('/api/orders', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  }, token)
+}
+
+export function getOrderDetailApi(orderNo: string, token: string) {
+  return request<OrderDetail>(`/api/orders/${orderNo}`, undefined, token)
+}
+
+export function updateOrderApi(orderNo: string, payload: OrderMutationPayload, token: string) {
+  return request<OrderDetail>(`/api/orders/${orderNo}`, {
+    method: 'PUT',
+    body: JSON.stringify(payload),
+  }, token)
+}
+
+export function deleteOrderApi(orderNo: string, token: string) {
+  return request<{ message: string }>(`/api/orders/${orderNo}`, {
+    method: 'DELETE',
+  }, token)
+}
+
+export function completeOrderApi(orderNo: string, expressNo: string, token: string) {
+  return request<OrderDetail>(`/api/orders/${orderNo}/complete`, {
+    method: 'POST',
+    body: JSON.stringify({ expressNo }),
+  }, token)
+}
+
+export function downloadOrderLabelsApi(orderNo: string, token: string) {
+  return requestBlob(`/api/orders/${orderNo}/labels/download`, undefined, token)
+}
--- a/frontend/src/services/statistics.ts
+++ b/frontend/src/services/statistics.ts
@@ -0,0 +1,26 @@
+import { request } from './api'
+import type { StatisticsSummary } from '../types/statistics'
+
+function withQuery(path: string, query?: Record<string, number | undefined>) {
+  if (!query) {
+    return path
+  }
+
+  const params = new URLSearchParams()
+  Object.entries(query).forEach(([key, value]) => {
+    if (value !== undefined) {
+      params.set(key, String(value))
+    }
+  })
+
+  const queryString = params.toString()
+  return queryString ? `${path}?${queryString}` : path
+}
+
+export function getMonthlyStatisticsApi(token: string, query?: { year?: number; month?: number }) {
+  return request<StatisticsSummary>(withQuery('/api/statistics/monthly', query), undefined, token)
+}
+
+export function getYearlyStatisticsApi(token: string, query?: { year?: number }) {
+  return request<StatisticsSummary>(withQuery('/api/statistics/yearly', query), undefined, token)
+}
--- a/frontend/src/services/user.ts
+++ b/frontend/src/services/user.ts
@@ -0,0 +1,32 @@
+import { request } from './api'
+import type {
+  CreateUserPayload,
+  UpdateUserPermissionsPayload,
+  UpdateUserStatusPayload,
+  UserListItem,
+} from '../types/auth'
+
+export function getUsersApi(token: string) {
+  return request<UserListItem[]>('/api/users', undefined, token)
+}
+
+export function createUserApi(payload: CreateUserPayload, token: string) {
+  return request<UserListItem>('/api/users', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  }, token)
+}
+
+export function updateUserPermissionsApi(userId: number, payload: UpdateUserPermissionsPayload, token: string) {
+  return request<{ message: string }>(`/api/users/${userId}/permissions`, {
+    method: 'PUT',
+    body: JSON.stringify(payload),
+  }, token)
+}
+
+export function updateUserStatusApi(userId: number, payload: UpdateUserStatusPayload, token: string) {
+  return request<{ message: string }>(`/api/users/${userId}/status`, {
+    method: 'PUT',
+    body: JSON.stringify(payload),
+  }, token)
+}
--- a/frontend/src/stores/auth.ts
+++ b/frontend/src/stores/auth.ts
@@ -0,0 +1,95 @@
+import { computed, ref } from 'vue'
+import { defineStore } from 'pinia'
+import { getCurrentUserApi, loginApi } from '../services/auth'
+import { hasAnyPermission, hasPermission } from '../services/access'
+import type { CurrentUser } from '../types/auth'
+
+const TOKEN_KEY = 'teapot-system-token'
+const USER_KEY = 'teapot-system-user'
+
+function readUserFromStorage() {
+  const raw = window.localStorage.getItem(USER_KEY)
+  if (!raw) {
+    return null
+  }
+
+  try {
+    return JSON.parse(raw) as CurrentUser
+  } catch {
+    return null
+  }
+}
+
+export const useAuthStore = defineStore('auth', () => {
+  const token = ref(window.localStorage.getItem(TOKEN_KEY) ?? '')
+  const user = ref<CurrentUser | null>(readUserFromStorage())
+  const initialized = ref(false)
+
+  const isAuthenticated = computed(() => Boolean(token.value && user.value))
+
+  function persistSession() {
+    if (token.value) {
+      window.localStorage.setItem(TOKEN_KEY, token.value)
+    } else {
+      window.localStorage.removeItem(TOKEN_KEY)
+    }
+
+    if (user.value) {
+      window.localStorage.setItem(USER_KEY, JSON.stringify(user.value))
+    } else {
+      window.localStorage.removeItem(USER_KEY)
+    }
+  }
+
+  async function login(username: string, password: string) {
+    const payload = await loginApi({ username, password })
+    token.value = payload.token
+    user.value = payload.user
+    initialized.value = true
+    persistSession()
+  }
+
+  async function bootstrap() {
+    if (!token.value) {
+      initialized.value = true
+      return
+    }
+
+    try {
+      user.value = await getCurrentUserApi(token.value)
+    } catch {
+      token.value = ''
+      user.value = null
+      persistSession()
+    } finally {
+      initialized.value = true
+    }
+  }
+
+  function logout() {
+    token.value = ''
+    user.value = null
+    initialized.value = true
+    persistSession()
+  }
+
+  function can(permission: string) {
+    return hasPermission(user.value, permission)
+  }
+
+  function canAny(permissions: string[]) {
+    return hasAnyPermission(user.value, permissions)
+  }
+
+  return {
+    token,
+    user,
+    initialized,
+    isAuthenticated,
+    login,
+    bootstrap,
+    logout,
+    can,
+    canAny,
+  }
+})
--- a/frontend/src/stores/catalog.ts
+++ b/frontend/src/stores/catalog.ts
@@ -0,0 +1,50 @@
+import { computed, ref } from 'vue'
+import { defineStore } from 'pinia'
+import { getCategoryTreeApi } from '../services/catalog'
+import type { CategoryTreeNode } from '../types/catalog'
+
+export const useCatalogStore = defineStore('catalog', () => {
+  const categoryTree = ref<CategoryTreeNode[]>([])
+  const loading = ref(false)
+  const loaded = ref(false)
+  const productDataVersion = ref(0)
+  let currentRequest: Promise<CategoryTreeNode[]> | null = null
+
+  const firstCategoryId = computed(() => String(categoryTree.value[0]?.id ?? '1'))
+
+  async function loadCategoryTree(token: string, force = false) {
+    if (loaded.value && !force) {
+      return categoryTree.value
+    }
+
+    if (currentRequest && !force) {
+      return currentRequest
+    }
+
+    loading.value = true
+    currentRequest = getCategoryTreeApi(token)
+
+    try {
+      categoryTree.value = await currentRequest
+      loaded.value = true
+      return categoryTree.value
+    } finally {
+      loading.value = false
+      currentRequest = null
+    }
+  }
+
+  function markProductDataChanged() {
+    productDataVersion.value += 1
+  }
+
+  return {
+    categoryTree,
+    loading,
+    loaded,
+    productDataVersion,
+    firstCategoryId,
+    loadCategoryTree,
+    markProductDataChanged,
+  }
+})
--- a/frontend/src/stores/index.ts
+++ b/frontend/src/stores/index.ts
@@ -0,0 +1,3 @@
+import { createPinia } from 'pinia'
+
+export const pinia = createPinia()
--- a/frontend/src/stores/orders.ts
+++ b/frontend/src/stores/orders.ts
@@ -0,0 +1,81 @@
+import { computed, ref } from 'vue'
+import { defineStore } from 'pinia'
+import { getOrdersApi } from '../services/order'
+import type { OrderDetail, OrderSummary } from '../types/order'
+
+function toOrderSummary(detail: OrderDetail): OrderSummary {
+  return {
+    id: detail.id,
+    status: detail.status,
+    createdAt: detail.createdAt,
+    totalQuantity: detail.totalQuantity,
+    totalAmount: detail.totalAmount,
+    expressNo: detail.expressNo,
+    labelReady: detail.labelReady,
+    missingLabelProducts: detail.missingLabelProducts,
+  }
+}
+
+export const useOrdersStore = defineStore('orders', () => {
+  const orders = ref<OrderSummary[]>([])
+  const loading = ref(false)
+  const loaded = ref(false)
+  let currentRequest: Promise<OrderSummary[]> | null = null
+
+  const pendingCount = computed(() => orders.value.filter((order) => order.status === 'PENDING').length)
+  const completedCount = computed(() => orders.value.filter((order) => order.status === 'COMPLETED').length)
+  const monthAmount = computed(() => orders.value.reduce((sum, item) => sum + item.totalAmount, 0))
+  const labelPendingCount = computed(() => orders.value.filter((order) => order.status === 'PENDING' && !order.expressNo).length)
+  const labelMissingCount = computed(() => orders.value.filter((order) => !order.labelReady).length)
+
+  async function loadOrders(token: string, force = false) {
+    if (loaded.value && !force) {
+      return orders.value
+    }
+
+    if (currentRequest && !force) {
+      return currentRequest
+    }
+
+    loading.value = true
+    currentRequest = getOrdersApi(token)
+
+    try {
+      orders.value = await currentRequest
+      loaded.value = true
+      return orders.value
+    } finally {
+      loading.value = false
+      currentRequest = null
+    }
+  }
+
+  function applyOrderDetail(detail: OrderDetail) {
+    const summary = toOrderSummary(detail)
+    const targetIndex = orders.value.findIndex((order) => order.id === summary.id)
+
+    if (targetIndex >= 0) {
+      orders.value[targetIndex] = summary
+    } else {
+      orders.value = [summary, ...orders.value]
+    }
+  }
+
+  function removeOrder(orderId: string) {
+    orders.value = orders.value.filter((order) => order.id !== orderId)
+  }
+
+  return {
+    orders,
+    loading,
+    loaded,
+    pendingCount,
+    completedCount,
+    monthAmount,
+    labelPendingCount,
+    labelMissingCount,
+    loadOrders,
+    applyOrderDetail,
+    removeOrder,
+  }
+})
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
--- a/frontend/src/types/asset.ts
+++ b/frontend/src/types/asset.ts
@@ -0,0 +1,18 @@
+export type ProductAssetRole = 'IMAGE' | 'LABEL'
+
+export interface ProductAsset {
+  id: number
+  fileRole: ProductAssetRole
+  fileName: string
+  mimeType: string
+  fileSize: number
+  sortNo: number
+  primary: boolean
+  createdAt: string
+}
+
+export interface DownloadedAssetFile {
+  blob: Blob
+  fileName: string | null
+  mimeType: string | null
+}
--- a/frontend/src/types/auth.ts
+++ b/frontend/src/types/auth.ts
@@ -0,0 +1,45 @@
+export type UserType = 'ADMIN' | 'NORMAL'
+
+export interface ApiResponse<T> {
+  success: boolean
+  message: string
+  data: T
+}
+
+export interface CurrentUser {
+  id: number
+  username: string
+  displayName: string
+  userType: UserType
+  permissions: string[]
+}
+
+export interface LoginResponsePayload {
+  token: string
+  expiresInSeconds: number
+  user: CurrentUser
+}
+
+export interface UserListItem {
+  id: number
+  username: string
+  displayName: string
+  userType: UserType
+  status: 'ENABLED' | 'DISABLED'
+  permissions: string[]
+}
+
+export interface CreateUserPayload {
+  username: string
+  displayName: string
+  password: string
+  permissions: string[]
+}
+
+export interface UpdateUserPermissionsPayload {
+  permissions: string[]
+}
+
+export interface UpdateUserStatusPayload {
+  status: 'ENABLED' | 'DISABLED'
+}
--- a/frontend/src/types/catalog.ts
+++ b/frontend/src/types/catalog.ts
@@ -0,0 +1,56 @@
+export type ProductStatusCode = 'AVAILABLE' | 'LOW_STOCK' | 'HIGH_STOCK' | 'DISCONTINUED'
+
+export type ProductStatusTagType = 'success' | 'warning' | 'info' | 'danger'
+
+export interface CategoryProductNode {
+  id: number
+  name: string
+  productId: number
+}
+
+export interface CategoryTreeNode {
+  id: number
+  name: string
+  children: CategoryProductNode[]
+}
+
+export interface ProductSummary {
+  id: number
+  categoryId: number
+  model: string
+  name: string
+  sku: string
+  price: number
+  stock: number
+  status: string
+  statusType: ProductStatusTagType
+  coverAssetId: number | null
+  remark: string | null
+}
+
+export interface ProductDetail {
+  id: number
+  categoryId: number
+  model: string
+  name: string
+  sku: string
+  price: number
+  stock: number
+  status: ProductStatusCode
+  statusType: ProductStatusTagType
+  remark: string | null
+}
+
+export interface UpdateProductPayload {
+  model: string
+  name: string
+  sku: string
+  price: number
+  stock: number
+  status: ProductStatusCode
+  remark: string
+}
+
+export interface CreateProductPayload extends UpdateProductPayload {
+  categoryId: number
+}
--- a/frontend/src/types/order.ts
+++ b/frontend/src/types/order.ts
@@ -0,0 +1,37 @@
+export type OrderStatus = 'PENDING' | 'COMPLETED'
+
+export interface OrderSummary {
+  id: string
+  status: OrderStatus
+  createdAt: string
+  totalQuantity: number
+  totalAmount: number
+  expressNo: string | null
+  labelReady: boolean
+  missingLabelProducts: string[]
+}
+
+export interface OrderItem {
+  productId: number
+  name: string
+  sku: string
+  price: number
+  quantity: number
+  amount: number
+}
+
+export interface OrderDetail extends OrderSummary {
+  completedAt: string | null
+  remark: string | null
+  items: OrderItem[]
+}
+
+export interface OrderMutationItem {
+  productId: number
+  quantity: number
+}
+
+export interface OrderMutationPayload {
+  remark: string
+  items: OrderMutationItem[]
+}
--- a/frontend/src/types/statistics.ts
+++ b/frontend/src/types/statistics.ts
@@ -0,0 +1,18 @@
+export type StatisticsMode = 'monthly' | 'yearly'
+
+export interface StatisticsRow {
+  name: string
+  quantity: number
+  price: number
+  subtotal: number
+}
+
+export interface StatisticsSummary {
+  year: number
+  month: number | null
+  totalQuantity: number
+  totalAmount: number
+  averagePrice: number
+  topProductName: string | null
+  rows: StatisticsRow[]
+}
--- a/frontend/src/views/auth/LoginView.vue
+++ b/frontend/src/views/auth/LoginView.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { resolveHomeRoute } from '../../services/access'
+import { useAuthStore } from '../../stores/auth'
+
+const router = useRouter()
+const authStore = useAuthStore()
+const loading = ref(false)
+const form = reactive({
+  username: 'admin',
+  password: 'Admin@123',
+})
+
+async function submitLogin() {
+  loading.value = true
+
+  try {
+    await authStore.login(form.username, form.password)
+    ElMessage.success('登录成功')
+    await router.replace(resolveHomeRoute(authStore.user))
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '登录失败')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="login-page">
+    <section class="login-hero">
+      <p class="login-kicker">COPPER TEAPOT SYSTEM</p>
+      <h1>铜壶管理系统</h1>
+    </section>
+
+    <section class="login-card">
+      <div class="login-card__head">
+        <p class="login-card__kicker">登录</p>
+        <h2>欢迎进入系统</h2>
+        <span>建议先用默认演示账号完成第一轮联调。</span>
+      </div>
+
+      <div class="login-card__form">
+        <label>账号</label>
+        <el-input v-model="form.username" placeholder="请输入账号" size="large" />
+
+        <label>密码</label>
+        <el-input v-model="form.password" placeholder="请输入密码" size="large" show-password />
+
+        <el-button class="login-card__button" type="primary" size="large" :loading="loading" @click="submitLogin">
+          登录系统
+        </el-button>
+      </div>
+
+      <!-- <el-alert type="info" :closable="false" show-icon>
+        <template #title>
+          默认账号：admin / Admin@123，customer / Customer@123，packer / Packer@123
+        </template>
+      </el-alert> -->
+    </section>
+  </div>
+</template>
--- a/frontend/src/views/order/OrderDetailView.vue
+++ b/frontend/src/views/order/OrderDetailView.vue
@@ -0,0 +1,246 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import OrderEditorDialog from '../../components/OrderEditorDialog.vue'
+import { completeOrderApi, deleteOrderApi, downloadOrderLabelsApi, getOrderDetailApi } from '../../services/order'
+import { useAuthStore } from '../../stores/auth'
+import { useCatalogStore } from '../../stores/catalog'
+import { useOrdersStore } from '../../stores/orders'
+import type { OrderDetail } from '../../types/order'
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+const catalogStore = useCatalogStore()
+const ordersStore = useOrdersStore()
+const loading = ref(false)
+const completing = ref(false)
+const labelDownloading = ref(false)
+const currentOrder = ref<OrderDetail | null>(null)
+const expressNo = ref('')
+const editorVisible = ref(false)
+
+const orderId = computed(() => String(route.params.orderId ?? ''))
+
+const canProcess = computed(() => authStore.can('ORDER_PROCESS'))
+const canComplete = computed(() => authStore.can('ORDER_COMPLETE'))
+const isAdmin = computed(() => authStore.user?.userType === 'ADMIN')
+const isPending = computed(() => currentOrder.value?.status === 'PENDING')
+const canDeleteCurrentOrder = computed(() => {
+  if (!currentOrder.value) {
+    return false
+  }
+
+  return isAdmin.value || (isPending.value && canProcess.value)
+})
+const missingLabelText = computed(() => currentOrder.value?.missingLabelProducts.join('、') ?? '')
+
+function applyOrder(detail: OrderDetail) {
+  currentOrder.value = detail
+  expressNo.value = detail.expressNo ?? ''
+  ordersStore.applyOrderDetail(detail)
+}
+
+function openEditDialog() {
+  editorVisible.value = true
+}
+
+async function loadOrder() {
+  if (!authStore.token || !orderId.value) {
+    return
+  }
+
+  loading.value = true
+
+  try {
+    applyOrder(await getOrderDetailApi(orderId.value, authStore.token))
+  } catch (error) {
+    currentOrder.value = null
+    expressNo.value = ''
+    ElMessage.error(error instanceof Error ? `订单详情加载失败：${error.message}` : '订单详情加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function completeOrder() {
+  if (!authStore.token || !currentOrder.value || !isPending.value) {
+    return
+  }
+
+  const currentExpressNo = expressNo.value.trim()
+  if (!currentExpressNo) {
+    ElMessage.warning('请先填写快递单号')
+    return
+  }
+
+  completing.value = true
+
+  try {
+    applyOrder(await completeOrderApi(currentOrder.value.id, currentExpressNo, authStore.token))
+    catalogStore.markProductDataChanged()
+    ElMessage.success('订单已完成')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `完成订单失败：${error.message}` : '完成订单失败')
+  } finally {
+    completing.value = false
+  }
+}
+
+async function downloadLabels() {
+  if (!authStore.token || !currentOrder.value) {
+    return
+  }
+
+  if (!currentOrder.value.labelReady) {
+    ElMessage.warning(`请先补齐标签模板：${missingLabelText.value}`)
+    return
+  }
+
+  labelDownloading.value = true
+
+  try {
+    const file = await downloadOrderLabelsApi(currentOrder.value.id, authStore.token)
+    const downloadUrl = URL.createObjectURL(file.blob)
+    const link = document.createElement('a')
+    link.href = downloadUrl
+    link.download = file.fileName ?? `${currentOrder.value.id}-labels.zip`
+    document.body.appendChild(link)
+    link.click()
+    link.remove()
+    URL.revokeObjectURL(downloadUrl)
+    ElMessage.success('标签文件已开始下载')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `标签下载失败：${error.message}` : '标签下载失败')
+  } finally {
+    labelDownloading.value = false
+  }
+}
+
+async function deleteOrder() {
+  if (!authStore.token || !currentOrder.value || !canDeleteCurrentOrder.value) {
+    return
+  }
+
+  try {
+    const orderStatusLabel = currentOrder.value.status === 'COMPLETED' ? '已完成订单' : '订单'
+
+    await ElMessageBox.confirm(`确认删除${orderStatusLabel} ${currentOrder.value.id} 吗？`, '删除确认', {
+      confirmButtonText: '确认删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+
+    await deleteOrderApi(currentOrder.value.id, authStore.token)
+    ordersStore.removeOrder(currentOrder.value.id)
+    ElMessage.success('订单已删除')
+    void router.replace({ name: 'orders' })
+  } catch (error) {
+    if (error === 'cancel' || error === 'close') {
+      return
+    }
+
+    ElMessage.error(error instanceof Error ? `删除订单失败：${error.message}` : '删除订单失败')
+  }
+}
+
+async function handleOrderSaved(detail: OrderDetail) {
+  applyOrder(detail)
+
+  if (authStore.token) {
+    await ordersStore.loadOrders(authStore.token, true)
+  }
+}
+
+watch(
+  () => route.params.orderId,
+  () => {
+    void loadOrder()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div class="page-stack" v-loading="loading">
+    <section class="page-hero-card">
+      <div>
+        <p class="page-hero-card__eyebrow">订单详情</p>
+        <h2>{{ currentOrder?.id ?? '订单详情' }}</h2>
+        <p>订单详情页已经接入真实接口，快递单号录入后可直接完成订单。</p>
+      </div>
+      <div class="page-hero-card__actions">
+        <el-tag :type="currentOrder?.status === 'COMPLETED' ? 'success' : 'warning'">
+          {{ currentOrder?.status === 'COMPLETED' ? '已完成' : '未完成' }}
+        </el-tag>
+      </div>
+    </section>
+
+    <el-empty v-if="!loading && !currentOrder" description="未找到订单详情" />
+
+    <div v-else class="detail-grid detail-grid--order">
+      <section class="surface-panel">
+        <div class="surface-panel__head">
+          <div>
+            <h3>订单摘要</h3>
+            <p>记录订单状态、金额和时间信息。</p>
+          </div>
+        </div>
+
+        <div class="detail-info-grid detail-info-grid--three">
+          <div class="detail-field"><span>状态</span><strong>{{ currentOrder?.status === 'COMPLETED' ? '已完成' : '未完成' }}</strong></div>
+          <div class="detail-field"><span>创建时间</span><strong>{{ currentOrder?.createdAt || '-' }}</strong></div>
+          <div class="detail-field"><span>快递单号</span><strong>{{ currentOrder?.expressNo || '待填写' }}</strong></div>
+          <div class="detail-field"><span>总数量</span><strong>{{ currentOrder?.totalQuantity ?? 0 }}</strong></div>
+          <div class="detail-field"><span>总金额</span><strong>{{ currentOrder?.totalAmount ?? 0 }}</strong></div>
+          <div class="detail-field"><span>完成时间</span><strong>{{ currentOrder?.completedAt || '未完成' }}</strong></div>
+        </div>
+
+        <div class="detail-field detail-field--full" v-if="currentOrder?.remark">
+          <span>订单备注</span>
+          <strong>{{ currentOrder.remark }}</strong>
+        </div>
+
+        <el-table :data="currentOrder?.items ?? []" stripe>
+          <el-table-column prop="productId" label="商品ID" width="100" />
+          <el-table-column prop="name" label="款式" min-width="160" />
+          <el-table-column prop="sku" label="SKU" min-width="140" />
+          <el-table-column prop="price" label="单价" width="120" />
+          <el-table-column prop="quantity" label="数量" width="100" />
+          <el-table-column prop="amount" label="小计" width="120" />
+        </el-table>
+      </section>
+
+      <aside class="surface-panel">
+        <div class="surface-panel__head">
+          <div>
+            <h3>订单操作</h3>
+            <p>打包工用户重点工作区域。</p>
+          </div>
+        </div>
+
+        <div class="side-actions">
+          <el-alert v-if="currentOrder && !currentOrder.labelReady" type="warning" :closable="false" show-icon>
+            <template #title>标签模板未就绪：{{ missingLabelText }}</template>
+          </el-alert>
+          <el-button type="primary" plain :loading="labelDownloading" :disabled="!currentOrder || !currentOrder.labelReady" @click="downloadLabels">下载标签文件</el-button>
+          <div class="toolbar-cell">当前状态：{{ currentOrder?.status === 'COMPLETED' ? '已完成' : '待处理' }}</div>
+          <el-input
+            v-model="expressNo"
+            :disabled="currentOrder?.status === 'COMPLETED' || !canComplete"
+            placeholder="请输入快递单号"
+          />
+          <el-button v-if="isPending && canComplete" type="primary" :loading="completing" @click="completeOrder">完成订单</el-button>
+          <el-button v-if="isPending && canProcess" @click="openEditDialog">编辑订单</el-button>
+          <el-button v-if="canDeleteCurrentOrder" type="danger" plain @click="deleteOrder">删除订单</el-button>
+          <el-alert v-if="currentOrder?.status === 'COMPLETED'" type="success" :closable="false" show-icon>
+            <template #title>{{ isAdmin ? '订单已完成，管理员仍可执行删除。' : '订单已完成，当前只保留查看和标签下载能力。' }}</template>
+          </el-alert>
+        </div>
+      </aside>
+    </div>
+
+    <OrderEditorDialog v-model="editorVisible" mode="edit" :order="currentOrder" @saved="handleOrderSaved" />
+  </div>
+</template>
--- a/frontend/src/views/order/OrdersView.vue
+++ b/frontend/src/views/order/OrdersView.vue
@@ -0,0 +1,321 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import OrderEditorDialog from '../../components/OrderEditorDialog.vue'
+import { deleteOrderApi, getOrderDetailApi } from '../../services/order'
+import { useAuthStore } from '../../stores/auth'
+import { useOrdersStore } from '../../stores/orders'
+import type { OrderDetail, OrderStatus } from '../../types/order'
+
+type OrderStatusFilter = 'ALL' | OrderStatus
+
+interface OrderFilterState {
+  orderId: string
+  expressNo: string
+  keyword: string
+  status: OrderStatusFilter
+  dateRange: string[]
+}
+
+const router = useRouter()
+const authStore = useAuthStore()
+const ordersStore = useOrdersStore()
+const editorVisible = ref(false)
+const editorMode = ref<'create' | 'edit'>('create')
+const editingOrder = ref<OrderDetail | null>(null)
+const dialogLoading = ref(false)
+const filterForm = reactive<OrderFilterState>(createEmptyFilters())
+const activeFilters = ref<OrderFilterState>(createEmptyFilters())
+
+const orderList = computed(() => ordersStore.orders)
+const filteredOrderList = computed(() => orderList.value.filter((order) => matchesFilters(order)))
+const filteredCount = computed(() => filteredOrderList.value.length)
+const pendingCount = computed(() => ordersStore.pendingCount)
+const todayShipmentCount = computed(() => ordersStore.completedCount)
+const monthAmount = computed(() => ordersStore.monthAmount)
+const labelMissingCount = computed(() => ordersStore.labelMissingCount)
+const canProcess = computed(() => authStore.can('ORDER_PROCESS'))
+const isAdmin = computed(() => authStore.user?.userType === 'ADMIN')
+
+const ORDER_STATUS_FILTER_OPTIONS: Array<{ label: string; value: OrderStatusFilter }> = [
+  { label: '全部状态', value: 'ALL' },
+  { label: '未完成', value: 'PENDING' },
+  { label: '已完成', value: 'COMPLETED' },
+]
+
+function createEmptyFilters(): OrderFilterState {
+  return {
+    orderId: '',
+    expressNo: '',
+    keyword: '',
+    status: 'ALL',
+    dateRange: [],
+  }
+}
+
+function openOrderDetail(orderId: string) {
+  void router.push({ name: 'order-detail', params: { orderId } })
+}
+
+function openCreateDialog() {
+  editorMode.value = 'create'
+  editingOrder.value = null
+  editorVisible.value = true
+}
+
+function canDeleteOrder(status: OrderStatus) {
+  return isAdmin.value || (status === 'PENDING' && canProcess.value)
+}
+
+async function openEditDialog(orderId: string) {
+  if (!authStore.token) {
+    ElMessage.error('缺少登录令牌')
+    return
+  }
+
+  dialogLoading.value = true
+
+  try {
+    editingOrder.value = await getOrderDetailApi(orderId, authStore.token)
+    editorMode.value = 'edit'
+    editorVisible.value = true
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `订单详情加载失败：${error.message}` : '订单详情加载失败')
+  } finally {
+    dialogLoading.value = false
+  }
+}
+
+async function deleteOrder(orderId: string) {
+  if (!authStore.token) {
+    ElMessage.error('缺少登录令牌')
+    return
+  }
+
+  try {
+    await ElMessageBox.confirm(`确认删除订单 ${orderId} 吗？`, '删除确认', {
+      confirmButtonText: '确认删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+
+    await deleteOrderApi(orderId, authStore.token)
+    ordersStore.removeOrder(orderId)
+    await ordersStore.loadOrders(authStore.token, true)
+    ElMessage.success('订单已删除')
+  } catch (error) {
+    if (error === 'cancel' || error === 'close') {
+      return
+    }
+
+    ElMessage.error(error instanceof Error ? `删除订单失败：${error.message}` : '删除订单失败')
+  }
+}
+
+async function handleOrderSaved(detail: OrderDetail) {
+  editingOrder.value = detail
+  ordersStore.applyOrderDetail(detail)
+
+  if (authStore.token) {
+    await ordersStore.loadOrders(authStore.token, true)
+  }
+}
+
+async function loadOrders() {
+  if (!authStore.token) {
+    return
+  }
+
+  try {
+    await ordersStore.loadOrders(authStore.token)
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `订单列表加载失败：${error.message}` : '订单列表加载失败')
+  }
+}
+
+function normalizeText(value: string | null | undefined) {
+  return (value ?? '').trim().toLowerCase()
+}
+
+function matchesFilters(order: OrderDetail | (typeof orderList.value)[number]) {
+  const filters = activeFilters.value
+  const orderDate = order.createdAt.slice(0, 10)
+
+  if (filters.orderId && !normalizeText(order.id).includes(normalizeText(filters.orderId))) {
+    return false
+  }
+
+  if (filters.expressNo && !normalizeText(order.expressNo).includes(normalizeText(filters.expressNo))) {
+    return false
+  }
+
+  if (filters.status !== 'ALL' && order.status !== filters.status) {
+    return false
+  }
+
+  if (filters.dateRange.length === 2) {
+    const [startDate, endDate] = filters.dateRange
+    if (orderDate < startDate || orderDate > endDate) {
+      return false
+    }
+  }
+
+  if (filters.keyword) {
+    const keyword = normalizeText(filters.keyword)
+    const searchText = [
+      order.id,
+      order.expressNo ?? '',
+      statusLabel(order.status),
+      order.missingLabelProducts.join(' '),
+    ]
+      .join(' ')
+      .toLowerCase()
+
+    if (!searchText.includes(keyword)) {
+      return false
+    }
+  }
+
+  return true
+}
+
+function applyFilters() {
+  activeFilters.value = {
+    orderId: filterForm.orderId.trim(),
+    expressNo: filterForm.expressNo.trim(),
+    keyword: filterForm.keyword.trim(),
+    status: filterForm.status,
+    dateRange: [...filterForm.dateRange],
+  }
+}
+
+function resetFilters() {
+  const nextFilters = createEmptyFilters()
+  filterForm.orderId = nextFilters.orderId
+  filterForm.expressNo = nextFilters.expressNo
+  filterForm.keyword = nextFilters.keyword
+  filterForm.status = nextFilters.status
+  filterForm.dateRange = nextFilters.dateRange
+  applyFilters()
+}
+
+function statusLabel(status: string) {
+  return status === 'COMPLETED' ? '已完成' : '未完成'
+}
+
+function statusType(status: string) {
+  return status === 'COMPLETED' ? 'success' : 'warning'
+}
+
+onMounted(() => {
+  void loadOrders()
+})
+</script>
+
+<template>
+  <div class="page-stack">
+    <section class="page-hero-card">
+      <div>
+        <p class="page-hero-card__eyebrow">订单中心</p>
+        <h2>订单列表与处理</h2>
+      </div>
+      <div class="page-hero-card__actions">
+        <el-button v-if="canProcess" type="primary" @click="openCreateDialog">新增订单</el-button>
+        <el-tag type="warning">未完成 {{ pendingCount }}</el-tag>
+        <el-tag type="success">已完成 {{ ordersStore.completedCount }}</el-tag>
+      </div>
+    </section>
+
+    <section class="stats-grid stats-grid--four">
+      <article class="stats-card">
+        <span>未完成订单</span>
+        <strong>{{ pendingCount }}</strong>
+        <p>需要继续处理和发货</p>
+      </article>
+      <article class="stats-card">
+        <span>今日出货数</span>
+        <strong>{{ todayShipmentCount }}</strong>
+        <p>用于打包工快速掌握任务量</p>
+      </article>
+      <article class="stats-card">
+        <span>本月订单金额</span>
+        <strong>{{ monthAmount }}</strong>
+        <p>按订单金额快照统计</p>
+      </article>
+      <article class="stats-card">
+        <span>缺模板订单</span>
+        <strong>{{ labelMissingCount }}</strong>
+        <p>需要先补齐商品标签模板</p>
+      </article>
+    </section>
+
+    <section class="toolbar-panel toolbar-panel--six">
+      <el-input v-model="filterForm.orderId" class="toolbar-input" clearable placeholder="订单号" @keyup.enter="applyFilters" />
+      <el-input v-model="filterForm.expressNo" class="toolbar-input" clearable placeholder="快递单号" @keyup.enter="applyFilters" />
+      <el-date-picker
+        v-model="filterForm.dateRange"
+        class="toolbar-input"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="YYYY-MM-DD"
+        unlink-panels
+      />
+      <el-select v-model="filterForm.status" class="toolbar-input" placeholder="状态">
+        <el-option v-for="option in ORDER_STATUS_FILTER_OPTIONS" :key="option.value" :label="option.label" :value="option.value" />
+      </el-select>
+      <el-input v-model="filterForm.keyword" class="toolbar-input" clearable placeholder="关键字" @keyup.enter="applyFilters" />
+      <div class="toolbar-actions">
+        <el-button type="primary" @click="applyFilters">搜索</el-button>
+        <el-button @click="resetFilters">重置</el-button>
+      </div>
+    </section>
+
+    <section class="surface-panel" v-loading="dialogLoading">
+      <div class="surface-panel__head">
+        <div>
+          <h3>订单明细列表</h3>
+          <p>管理员与打包工可直接维护未完成订单，完成动作仍在详情页提交。当前显示 {{ filteredCount }} / {{ orderList.length }} 条。</p>
+        </div>
+        <el-tag v-if="authStore.can('ORDER_COMPLETE')" type="success">可完成订单</el-tag>
+      </div>
+
+      <el-table :data="filteredOrderList" stripe v-loading="ordersStore.loading">
+        <el-table-column prop="id" label="订单号" min-width="180" />
+        <el-table-column prop="createdAt" label="创建时间" min-width="160" />
+        <el-table-column prop="totalQuantity" label="总数量" width="100" />
+        <el-table-column prop="totalAmount" label="总价" width="120" />
+        <el-table-column label="状态" width="120">
+          <template #default="scope">
+            <el-tag :type="statusType(scope.row.status)">{{ statusLabel(scope.row.status) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="标签模板" width="160">
+          <template #default="scope">
+            <el-tooltip v-if="!scope.row.labelReady" :content="scope.row.missingLabelProducts.join('、')" placement="top">
+              <el-tag type="danger">缺少模板</el-tag>
+            </el-tooltip>
+            <el-tag v-else type="success">已就绪</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="expressNo" label="快递单号" min-width="170" />
+        <el-table-column label="操作" width="300">
+          <template #default="scope">
+            <div class="table-actions">
+              <el-button @click="openOrderDetail(scope.row.id)">查看详情</el-button>
+              <el-button v-if="scope.row.status === 'PENDING' && authStore.can('ORDER_PROCESS')" @click="openEditDialog(scope.row.id)">编辑</el-button>
+              <el-button v-if="canDeleteOrder(scope.row.status)" type="danger" plain @click="deleteOrder(scope.row.id)">删除</el-button>
+              <el-button v-if="scope.row.status === 'PENDING' && authStore.can('ORDER_COMPLETE')" type="primary" @click="openOrderDetail(scope.row.id)">去完成</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-empty v-if="!ordersStore.loading && filteredOrderList.length === 0" :description="orderList.length === 0 ? '暂无订单数据' : '没有匹配的订单'" />
+    </section>
+
+    <OrderEditorDialog v-model="editorVisible" :mode="editorMode" :order="editingOrder" @saved="handleOrderSaved" />
+  </div>
+</template>
--- a/frontend/src/views/product/ProductCenterView.vue
+++ b/frontend/src/views/product/ProductCenterView.vue
@@ -0,0 +1,579 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import OrderEditorDialog from '../../components/OrderEditorDialog.vue'
+import { downloadProductAssetApi } from '../../services/asset'
+import { createProductApi, getCategoryProductsApi, PRODUCT_STATUS_OPTIONS } from '../../services/catalog'
+import { useAuthStore } from '../../stores/auth'
+import { useCatalogStore } from '../../stores/catalog'
+import { useOrdersStore } from '../../stores/orders'
+import type { ProductStatusCode, ProductSummary } from '../../types/catalog'
+import type { OrderDetail, OrderMutationItem } from '../../types/order'
+
+type ProductStatusFilter = 'ALL' | '可售' | '库存少' | '库存多' | '停产'
+type ProductSortOption = 'MODEL_ASC' | 'PRICE_ASC' | 'PRICE_DESC' | 'STOCK_ASC' | 'STOCK_DESC'
+
+interface ProductFilterState {
+  keyword: string
+  status: ProductStatusFilter
+  sortBy: ProductSortOption
+  onlyInStock: boolean
+}
+
+interface CreateProductFormState {
+  model: string
+  name: string
+  sku: string
+  price: number
+  stock: number
+  status: ProductStatusCode
+  remark: string
+}
+
+const DEFAULT_PAGE_SIZE = 9
+const PAGE_SIZE_OPTIONS = [6, 9, 12, 18]
+const PRODUCT_STATUS_FILTER_OPTIONS: Array<{ label: string; value: ProductStatusFilter }> = [
+  { label: '全部状态', value: 'ALL' },
+  ...PRODUCT_STATUS_OPTIONS.map((option) => ({
+    label: option.label,
+    value: option.label as ProductStatusFilter,
+  })),
+]
+const PRODUCT_SORT_OPTIONS: Array<{ label: string; value: ProductSortOption }> = [
+  { label: '型号 A-Z', value: 'MODEL_ASC' },
+  { label: '价格从低到高', value: 'PRICE_ASC' },
+  { label: '价格从高到低', value: 'PRICE_DESC' },
+  { label: '库存从低到高', value: 'STOCK_ASC' },
+  { label: '库存从高到低', value: 'STOCK_DESC' },
+]
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+const catalogStore = useCatalogStore()
+const ordersStore = useOrdersStore()
+const products = ref<ProductSummary[]>([])
+const loading = ref(false)
+const createSubmitting = ref(false)
+const orderDialogVisible = ref(false)
+const createDialogVisible = ref(false)
+const presetOrderItems = ref<OrderMutationItem[]>([])
+const currentPage = ref(1)
+const pageSize = ref(DEFAULT_PAGE_SIZE)
+const filterForm = reactive<ProductFilterState>(createDefaultFilters())
+const createForm = reactive<CreateProductFormState>(createDefaultCreateForm())
+const coverImageUrls = ref<Record<number, string>>({})
+const failedCoverImageProductIds = new Set<number>()
+let coverImageBatchId = 0
+
+const currentCategoryId = computed(() => String(route.params.categoryId ?? catalogStore.firstCategoryId))
+
+const currentNode = computed(() => {
+  return catalogStore.categoryTree.find((node) => String(node.id) === currentCategoryId.value) ?? null
+})
+
+const currentProducts = computed(() => products.value)
+const totalProducts = computed(() => currentProducts.value.length)
+const inStockCount = computed(() => currentProducts.value.filter((product) => product.stock > 0).length)
+const lowStockCount = computed(() => currentProducts.value.filter((product) => product.status === '库存少').length)
+const filteredProducts = computed(() => {
+  const keyword = normalizeText(filterForm.keyword)
+  const nextProducts = currentProducts.value.filter((product) => {
+    if (filterForm.status !== 'ALL' && product.status !== filterForm.status) {
+      return false
+    }
+
+    if (filterForm.onlyInStock && product.stock < 1) {
+      return false
+    }
+
+    if (!keyword) {
+      return true
+    }
+
+    const searchableText = [product.model, product.name, product.sku, product.status, product.remark ?? '']
+      .join(' ')
+      .toLowerCase()
+
+    return searchableText.includes(keyword)
+  })
+
+  return sortProducts(nextProducts, filterForm.sortBy)
+})
+const filteredCount = computed(() => filteredProducts.value.length)
+const pageCount = computed(() => Math.max(1, Math.ceil(filteredCount.value / pageSize.value)))
+const paginatedProducts = computed(() => {
+  const startIndex = (currentPage.value - 1) * pageSize.value
+  return filteredProducts.value.slice(startIndex, startIndex + pageSize.value)
+})
+const pageStart = computed(() => (filteredCount.value === 0 ? 0 : (currentPage.value - 1) * pageSize.value + 1))
+const pageEnd = computed(() => Math.min(currentPage.value * pageSize.value, filteredCount.value))
+
+const canEditProduct = computed(() => authStore.can('PRODUCT_EDIT'))
+const canCreateOrder = computed(() => authStore.can('ORDER_PROCESS'))
+
+function createDefaultFilters(): ProductFilterState {
+  return {
+    keyword: '',
+    status: 'ALL',
+    sortBy: 'MODEL_ASC',
+    onlyInStock: false,
+  }
+}
+
+function createDefaultCreateForm(): CreateProductFormState {
+  return {
+    model: '',
+    name: '',
+    sku: '',
+    price: 0,
+    stock: 0,
+    status: 'AVAILABLE',
+    remark: '',
+  }
+}
+
+function resetCoverImageUrls() {
+  coverImageBatchId += 1
+  Object.values(coverImageUrls.value).forEach((url) => {
+    URL.revokeObjectURL(url)
+  })
+  coverImageUrls.value = {}
+  failedCoverImageProductIds.clear()
+}
+
+function setCoverImageUrl(productId: number, url: string) {
+  const previousUrl = coverImageUrls.value[productId]
+
+  if (previousUrl && previousUrl !== url) {
+    URL.revokeObjectURL(previousUrl)
+  }
+
+  coverImageUrls.value = {
+    ...coverImageUrls.value,
+    [productId]: url,
+  }
+}
+
+async function loadVisibleCoverImages(source: ProductSummary[]) {
+  const token = authStore.token
+  if (!token || source.length === 0) {
+    return
+  }
+
+  const currentBatchId = ++coverImageBatchId
+  const loadTargets = source.filter((product) => {
+    return product.coverAssetId && !coverImageUrls.value[product.id] && !failedCoverImageProductIds.has(product.id)
+  })
+
+  await Promise.all(
+    loadTargets.map(async (product) => {
+      try {
+        const file = await downloadProductAssetApi(product.id, product.coverAssetId as number, token)
+        const imageUrl = URL.createObjectURL(file.blob)
+
+        if (currentBatchId !== coverImageBatchId) {
+          URL.revokeObjectURL(imageUrl)
+          return
+        }
+
+        setCoverImageUrl(product.id, imageUrl)
+      } catch {
+        if (currentBatchId === coverImageBatchId) {
+          failedCoverImageProductIds.add(product.id)
+        }
+      }
+    }),
+  )
+}
+
+function normalizeText(value: string | null | undefined) {
+  return (value ?? '').trim().toLowerCase()
+}
+
+function compareText(left: string, right: string) {
+  return left.localeCompare(right, 'zh-CN')
+}
+
+function sortProducts(source: ProductSummary[], sortBy: ProductSortOption) {
+  const nextProducts = [...source]
+
+  switch (sortBy) {
+    case 'PRICE_ASC':
+      return nextProducts.sort((left, right) => left.price - right.price || compareText(left.model, right.model))
+    case 'PRICE_DESC':
+      return nextProducts.sort((left, right) => right.price - left.price || compareText(left.model, right.model))
+    case 'STOCK_ASC':
+      return nextProducts.sort((left, right) => left.stock - right.stock || compareText(left.model, right.model))
+    case 'STOCK_DESC':
+      return nextProducts.sort((left, right) => right.stock - left.stock || compareText(left.model, right.model))
+    case 'MODEL_ASC':
+    default:
+      return nextProducts.sort((left, right) => compareText(`${left.model} ${left.name}`, `${right.model} ${right.name}`))
+  }
+}
+
+function resetFilters() {
+  const nextFilters = createDefaultFilters()
+  filterForm.keyword = nextFilters.keyword
+  filterForm.status = nextFilters.status
+  filterForm.sortBy = nextFilters.sortBy
+  filterForm.onlyInStock = nextFilters.onlyInStock
+  currentPage.value = 1
+  pageSize.value = DEFAULT_PAGE_SIZE
+}
+
+function resetCreateForm() {
+  const nextForm = createDefaultCreateForm()
+  createForm.model = nextForm.model
+  createForm.name = nextForm.name
+  createForm.sku = nextForm.sku
+  createForm.price = nextForm.price
+  createForm.stock = nextForm.stock
+  createForm.status = nextForm.status
+  createForm.remark = nextForm.remark
+}
+
+function handleCurrentPageChange(page: number) {
+  currentPage.value = page
+}
+
+function handlePageSizeChange(size: number) {
+  pageSize.value = size
+  currentPage.value = 1
+}
+
+function openCreateProductDialog() {
+  if (!canEditProduct.value) {
+    return
+  }
+
+  resetCreateForm()
+  createDialogVisible.value = true
+}
+
+function openDetail(productId: string) {
+  void router.push({ name: 'product-detail', params: { productId } })
+}
+
+function openCreateOrderDialog(product: ProductSummary) {
+  if (!canCreateOrder.value) {
+    return
+  }
+
+  if (product.stock < 1) {
+    ElMessage.warning('当前库存为 0，无法加入订单')
+    return
+  }
+
+  presetOrderItems.value = [{ productId: product.id, quantity: 1 }]
+  orderDialogVisible.value = true
+}
+
+async function handleOrderSaved(detail: OrderDetail) {
+  ordersStore.applyOrderDetail(detail)
+
+  if (authStore.token) {
+    await ordersStore.loadOrders(authStore.token, true)
+  }
+}
+
+async function ensureCategoriesLoaded() {
+  if (!authStore.token) {
+    return
+  }
+
+  try {
+    await catalogStore.loadCategoryTree(authStore.token)
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `商品目录加载失败：${error.message}` : '商品目录加载失败')
+  }
+}
+
+async function loadProducts(categoryId: string) {
+  if (!authStore.token) {
+    return
+  }
+
+  loading.value = true
+  resetCoverImageUrls()
+
+  try {
+    products.value = await getCategoryProductsApi(categoryId, authStore.token)
+  } catch (error) {
+    products.value = []
+    ElMessage.error(error instanceof Error ? `商品列表加载失败：${error.message}` : '商品列表加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function submitCreateProduct() {
+  if (!authStore.token) {
+    ElMessage.error('缺少登录令牌')
+    return
+  }
+
+  const categoryId = Number(currentCategoryId.value)
+  if (!Number.isFinite(categoryId) || categoryId < 1) {
+    ElMessage.warning('当前类目无效，无法新增商品')
+    return
+  }
+
+  const model = createForm.model.trim()
+  const name = createForm.name.trim()
+  const sku = createForm.sku.trim()
+  const remark = createForm.remark.trim()
+
+  if (!model || !name || !sku) {
+    ElMessage.warning('请完整填写型号、商品名称和 SKU')
+    return
+  }
+
+  createSubmitting.value = true
+
+  try {
+    const detail = await createProductApi(
+      {
+        categoryId,
+        model,
+        name,
+        sku,
+        price: createForm.price,
+        stock: createForm.stock,
+        status: createForm.status,
+        remark,
+      },
+      authStore.token,
+    )
+
+    createDialogVisible.value = false
+    resetCreateForm()
+    await catalogStore.loadCategoryTree(authStore.token, true)
+    catalogStore.markProductDataChanged()
+    ElMessage.success('商品已创建')
+    void router.push({ name: 'product-detail', params: { productId: detail.id } })
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `新增商品失败：${error.message}` : '新增商品失败')
+  } finally {
+    createSubmitting.value = false
+  }
+}
+
+onMounted(() => {
+  void ensureCategoriesLoaded()
+})
+
+onBeforeUnmount(() => {
+  resetCoverImageUrls()
+})
+
+watch(
+  [() => authStore.token, () => catalogStore.loaded, currentCategoryId, () => catalogStore.productDataVersion],
+  async ([token, loaded, categoryId]) => {
+    if (!token || !loaded) {
+      return
+    }
+
+    const exists = catalogStore.categoryTree.some((node) => String(node.id) === categoryId)
+    if (!exists) {
+      void router.replace({ name: 'product-center', params: { categoryId: catalogStore.firstCategoryId } })
+      return
+    }
+
+    await loadProducts(categoryId)
+  },
+  { immediate: true },
+)
+
+watch(
+  () => [filterForm.keyword, filterForm.status, filterForm.sortBy, filterForm.onlyInStock],
+  () => {
+    currentPage.value = 1
+  },
+)
+
+watch(currentCategoryId, () => {
+  resetFilters()
+})
+
+watch([filteredCount, pageCount], () => {
+  if (currentPage.value > pageCount.value) {
+    currentPage.value = pageCount.value
+  }
+})
+
+watch(
+  () => paginatedProducts.value.map((product) => `${product.id}:${product.coverAssetId ?? 'none'}`).join('|'),
+  () => {
+    void loadVisibleCoverImages(paginatedProducts.value)
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div class="page-stack">
+    <section class="page-hero-card">
+      <div>
+        <p class="page-hero-card__eyebrow">商品中心</p>
+        <h2>{{ currentNode?.name ?? '商品目录' }}</h2>
+      </div>
+      <div class="page-hero-card__actions">
+        <el-button v-if="canEditProduct" type="primary" @click="openCreateProductDialog">新增商品</el-button>
+      </div>
+    </section>
+
+    <section class="stats-grid stats-grid--three">
+      <article class="stats-card">
+        <span>当前款式数</span>
+        <strong>{{ totalProducts }}</strong>
+        <p>按型号与款式维度浏览商品</p>
+      </article>
+      <article class="stats-card">
+        <span>有库存商品</span>
+        <strong>{{ inStockCount }}</strong>
+        <p>仅统计库存大于 0 的款式，方便快速建单</p>
+      </article>
+      <article class="stats-card">
+        <span>库存少款式</span>
+        <strong>{{ lowStockCount }}</strong>
+        <p>用于优先关注需要补货的商品</p>
+      </article>
+    </section>
+
+    <section class="toolbar-panel toolbar-panel--six">
+      <el-input v-model="filterForm.keyword" class="toolbar-input" clearable placeholder="搜索型号 / 名称 / SKU / 备注" />
+      <el-select v-model="filterForm.status" class="toolbar-input" placeholder="状态筛选">
+        <el-option v-for="option in PRODUCT_STATUS_FILTER_OPTIONS" :key="option.value" :label="option.label" :value="option.value" />
+      </el-select>
+      <el-select v-model="filterForm.sortBy" class="toolbar-input" placeholder="排序方式">
+        <el-option v-for="option in PRODUCT_SORT_OPTIONS" :key="option.value" :label="option.label" :value="option.value" />
+      </el-select>
+      <div class="toolbar-switch">
+        <span>仅看有库存</span>
+        <el-switch v-model="filterForm.onlyInStock" />
+      </div>
+      <div class="toolbar-cell">当前类目：{{ currentNode?.name ?? '加载中' }}</div>
+      <div class="toolbar-actions">
+        <el-button @click="resetFilters">重置筛选</el-button>
+      </div>
+    </section>
+
+    <section class="surface-panel" v-loading="loading || catalogStore.loading">
+      <div class="surface-panel__head">
+        <div>
+          <h3>商品卡片墙</h3>
+          <p v-if="filteredCount > 0">当前显示第 {{ pageStart }} - {{ pageEnd }} 项，共 {{ filteredCount }} 项；当前类目原始数据 {{ totalProducts }} 项。</p>
+          <p v-else>当前筛选条件下暂无商品，可调整关键字、状态或库存条件。</p>
+        </div>
+        <el-tag type="info">第 {{ currentPage }} / {{ pageCount }} 页</el-tag>
+      </div>
+
+      <el-empty v-if="!loading && filteredCount === 0" description="当前筛选条件下暂无商品" />
+
+      <div v-else class="card-grid card-grid--products">
+        <article v-for="product in paginatedProducts" :key="product.id" class="product-panel">
+          <div class="product-panel__image" @click="openDetail(String(product.id))">
+            <img
+              v-if="coverImageUrls[product.id]"
+              class="product-panel__cover"
+              :src="coverImageUrls[product.id]"
+              :alt="`${product.model} ${product.name}`"
+            />
+            <div v-else class="teapot-shape"></div>
+          </div>
+          <div class="product-panel__body">
+            <div class="product-panel__title">
+              <div>
+                <h3>{{ product.model }} · {{ product.name }}</h3>
+                <p>{{ product.sku }}</p>
+              </div>
+              <el-tag :type="product.statusType as 'success' | 'warning' | 'info'">{{ product.status }}</el-tag>
+            </div>
+
+            <div class="metric-grid">
+              <div class="metric-grid__item">
+                <span>批发价</span>
+                <strong>{{ product.price }}</strong>
+              </div>
+              <div class="metric-grid__item">
+                <span>库存</span>
+                <strong>{{ product.stock }}</strong>
+              </div>
+            </div>
+
+            <p class="product-panel__remark">{{ product.remark || '暂无备注说明。' }}</p>
+
+            <div class="product-panel__actions">
+              <el-button @click="openDetail(String(product.id))">查看详情</el-button>
+              <el-button v-if="canCreateOrder" type="primary" @click="openCreateOrderDialog(product)">加入订单</el-button>
+            </div>
+          </div>
+        </article>
+      </div>
+
+      <div v-if="filteredCount > 0" class="list-pagination">
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          :page-sizes="PAGE_SIZE_OPTIONS"
+          :total="filteredCount"
+          @current-change="handleCurrentPageChange"
+          @size-change="handlePageSizeChange"
+        />
+      </div>
+    </section>
+
+    <el-dialog v-model="createDialogVisible" title="新增商品" width="720px" destroy-on-close>
+      <div class="user-dialog-grid">
+        <div class="detail-field">
+          <span>所属类目</span>
+          <strong>{{ currentNode?.name ?? '未选择类目' }}</strong>
+        </div>
+        <div class="detail-field">
+          <span>库存状态</span>
+          <el-select v-model="createForm.status" class="detail-field__control" placeholder="请选择库存状态">
+            <el-option v-for="option in PRODUCT_STATUS_OPTIONS" :key="option.value" :label="option.label" :value="option.value" />
+          </el-select>
+        </div>
+        <div class="detail-field">
+          <span>型号</span>
+          <el-input v-model="createForm.model" placeholder="请输入型号" />
+        </div>
+        <div class="detail-field">
+          <span>商品名称</span>
+          <el-input v-model="createForm.name" placeholder="请输入商品名称" />
+        </div>
+        <div class="detail-field">
+          <span>SKU</span>
+          <el-input v-model="createForm.sku" placeholder="请输入唯一 SKU" />
+        </div>
+        <div class="detail-field">
+          <span>批发价</span>
+          <el-input-number v-model="createForm.price" class="detail-field__control" :min="0" :precision="2" :step="1" />
+        </div>
+        <div class="detail-field">
+          <span>库存数量</span>
+          <el-input-number v-model="createForm.stock" class="detail-field__control" :min="0" :step="1" />
+        </div>
+        <div class="detail-field detail-field--full">
+          <span>备注</span>
+          <el-input v-model="createForm.remark" type="textarea" :rows="3" placeholder="可选，填写工艺、包装或库存备注" />
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer-actions">
+          <el-button @click="createDialogVisible = false">取消</el-button>
+          <el-button type="primary" :loading="createSubmitting" @click="submitCreateProduct">创建商品</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <OrderEditorDialog v-model="orderDialogVisible" mode="create" :preset-items="presetOrderItems" @saved="handleOrderSaved" />
+  </div>
+</template>
--- a/frontend/src/views/product/ProductDetailView.vue
+++ b/frontend/src/views/product/ProductDetailView.vue
@@ -0,0 +1,781 @@
+<script setup lang="ts">
+import { ArrowLeft } from '@element-plus/icons-vue'
+import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import OrderEditorDialog from '../../components/OrderEditorDialog.vue'
+import {
+  deleteProductAssetApi,
+  downloadProductAssetApi,
+  getProductAssetsApi,
+  setPrimaryProductAssetApi,
+  uploadProductAssetApi,
+  reorderProductImageAssetsApi,
+} from '../../services/asset'
+import {
+  getProductDetailApi,
+  getProductStatusLabel,
+  getProductStatusType,
+  PRODUCT_STATUS_OPTIONS,
+  updateProductApi,
+} from '../../services/catalog'
+import { useAuthStore } from '../../stores/auth'
+import { useCatalogStore } from '../../stores/catalog'
+import { useOrdersStore } from '../../stores/orders'
+import type { ProductAsset, ProductAssetRole } from '../../types/asset'
+import type { ProductDetail, ProductStatusCode } from '../../types/catalog'
+import type { OrderDetail, OrderMutationItem } from '../../types/order'
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+const catalogStore = useCatalogStore()
+const ordersStore = useOrdersStore()
+const loading = ref(false)
+const saving = ref(false)
+const product = ref<ProductDetail | null>(null)
+const assetsLoading = ref(false)
+const assetUploading = ref(false)
+const previewLoading = ref(false)
+const imageOrderSaving = ref(false)
+const assetActionLoadingId = ref<number | null>(null)
+const assetActionType = ref<'primary' | 'delete' | null>(null)
+const assets = ref<ProductAsset[]>([])
+const previewUrl = ref('')
+const galleryImageUrls = ref<Record<number, string>>({})
+const activeImageAssetId = ref<number | null>(null)
+const draggingImageAssetId = ref<number | null>(null)
+const dragOverImageAssetId = ref<number | null>(null)
+const dragOverPlacement = ref<'before' | 'after' | null>(null)
+const imageInputRef = ref<HTMLInputElement | null>(null)
+const labelInputRef = ref<HTMLInputElement | null>(null)
+const orderDialogVisible = ref(false)
+const presetOrderItems = ref<OrderMutationItem[]>([])
+let galleryLoadBatchId = 0
+const form = reactive({
+  model: '',
+  name: '',
+  sku: '',
+  price: 0,
+  stock: 0,
+  status: 'AVAILABLE' as ProductStatusCode,
+  remark: '',
+})
+
+const productId = computed(() => String(route.params.productId ?? ''))
+
+const isReadOnly = computed(() => !authStore.can('PRODUCT_EDIT'))
+const canUploadAsset = computed(() => authStore.can('ASSET_UPLOAD'))
+const canCreateOrder = computed(() => authStore.can('ORDER_PROCESS'))
+const isGalleryOnlyView = computed(() => isReadOnly.value && !canUploadAsset.value && !canCreateOrder.value)
+const statusLabel = computed(() => getProductStatusLabel(form.status))
+const statusType = computed(() => getProductStatusType(form.status))
+const imageAssets = computed(() => assets.value.filter((asset) => asset.fileRole === 'IMAGE'))
+const canReorderImages = computed(() => canUploadAsset.value && imageAssets.value.length > 1)
+const labelAssets = computed(() => assets.value.filter((asset) => asset.fileRole === 'LABEL'))
+const activeImageAsset = computed(() => imageAssets.value.find((asset) => asset.id === activeImageAssetId.value) ?? null)
+const activeImageSizeLabel = computed(() => formatFileSize(activeImageAsset.value?.fileSize))
+
+function resetForm() {
+  form.model = ''
+  form.name = ''
+  form.sku = ''
+  form.price = 0
+  form.stock = 0
+  form.status = 'AVAILABLE'
+  form.remark = ''
+}
+
+function clearPreviewUrl() {
+  if (previewUrl.value) {
+    URL.revokeObjectURL(previewUrl.value)
+    previewUrl.value = ''
+  }
+}
+
+function clearGalleryImageUrls() {
+  galleryLoadBatchId += 1
+  Object.values(galleryImageUrls.value).forEach((url) => {
+    URL.revokeObjectURL(url)
+  })
+  galleryImageUrls.value = {}
+}
+
+function clearImageDragState() {
+  draggingImageAssetId.value = null
+  dragOverImageAssetId.value = null
+  dragOverPlacement.value = null
+}
+
+function formatFileSize(fileSize: number | null | undefined) {
+  if (!fileSize || fileSize <= 0) {
+    return '0 K'
+  }
+
+  if (fileSize >= 1024 * 1024) {
+    const valueInMegabytes = fileSize / (1024 * 1024)
+    return `${valueInMegabytes >= 10 ? valueInMegabytes.toFixed(1) : valueInMegabytes.toFixed(2)} M`
+  }
+
+  const valueInKilobytes = fileSize / 1024
+  return `${valueInKilobytes >= 10 ? valueInKilobytes.toFixed(1) : valueInKilobytes.toFixed(2)} K`
+}
+
+async function loadGalleryImages(images: ProductAsset[]) {
+  if (!authStore.token || !productId.value || images.length === 0) {
+    clearGalleryImageUrls()
+    return
+  }
+
+  const currentBatchId = ++galleryLoadBatchId
+  const nextGalleryImageUrls: Record<number, string> = {}
+
+  await Promise.all(
+    images.map(async (asset) => {
+      try {
+        const file = await downloadProductAssetApi(productId.value, asset.id, authStore.token as string)
+        nextGalleryImageUrls[asset.id] = URL.createObjectURL(file.blob)
+      } catch {
+        // Ignore partial image failures so remaining images can still render.
+      }
+    }),
+  )
+
+  if (currentBatchId !== galleryLoadBatchId) {
+    Object.values(nextGalleryImageUrls).forEach((url) => {
+      URL.revokeObjectURL(url)
+    })
+    return
+  }
+
+  clearGalleryImageUrls()
+  galleryImageUrls.value = nextGalleryImageUrls
+}
+
+function applyProduct(detail: ProductDetail) {
+  product.value = detail
+  form.model = detail.model
+  form.name = detail.name
+  form.sku = detail.sku
+  form.price = detail.price
+  form.stock = detail.stock
+  form.status = detail.status
+  form.remark = detail.remark ?? ''
+}
+
+async function loadProduct() {
+  if (!authStore.token || !productId.value) {
+    return false
+  }
+
+  loading.value = true
+
+  try {
+    applyProduct(await getProductDetailApi(productId.value, authStore.token))
+    return true
+  } catch (error) {
+    product.value = null
+    resetForm()
+    ElMessage.error(error instanceof Error ? `商品详情加载失败：${error.message}` : '商品详情加载失败')
+    return false
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadAssets(preferredImageAssetId?: number) {
+  if (!authStore.token || !productId.value) {
+    return
+  }
+
+  assetsLoading.value = true
+
+  try {
+    const loadedAssets = await getProductAssetsApi(productId.value, authStore.token)
+    assets.value = loadedAssets
+
+    const images = loadedAssets.filter((asset) => asset.fileRole === 'IMAGE')
+
+    if (isGalleryOnlyView.value) {
+      activeImageAssetId.value = images[0]?.id ?? null
+      clearPreviewUrl()
+      await loadGalleryImages(images)
+      return
+    }
+
+    clearGalleryImageUrls()
+    const nextImageId = preferredImageAssetId && images.some((asset) => asset.id === preferredImageAssetId)
+      ? preferredImageAssetId
+      : images.find((asset) => asset.primary)?.id ?? images[0]?.id ?? null
+
+    if (nextImageId) {
+      await showImageAsset(nextImageId)
+    } else {
+      activeImageAssetId.value = null
+      clearPreviewUrl()
+    }
+  } catch (error) {
+    assets.value = []
+    activeImageAssetId.value = null
+    clearPreviewUrl()
+    clearGalleryImageUrls()
+    ElMessage.error(error instanceof Error ? `附件列表加载失败：${error.message}` : '附件列表加载失败')
+  } finally {
+    assetsLoading.value = false
+  }
+}
+
+async function showImageAsset(assetId: number) {
+  if (!authStore.token || !productId.value) {
+    return
+  }
+
+  previewLoading.value = true
+
+  try {
+    const file = await downloadProductAssetApi(productId.value, assetId, authStore.token)
+    clearPreviewUrl()
+    previewUrl.value = URL.createObjectURL(file.blob)
+    activeImageAssetId.value = assetId
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `图片预览加载失败：${error.message}` : '图片预览加载失败')
+  } finally {
+    previewLoading.value = false
+  }
+}
+
+function buildReorderedImageIds(draggedAssetId: number, targetAssetId: number, placement: 'before' | 'after') {
+  const orderedImageIds = imageAssets.value.map((asset) => asset.id)
+  const draggedIndex = orderedImageIds.indexOf(draggedAssetId)
+  const targetIndex = orderedImageIds.indexOf(targetAssetId)
+
+  if (draggedIndex === -1 || targetIndex === -1 || draggedIndex === targetIndex) {
+    return null
+  }
+
+  const nextOrderedImageIds = [...orderedImageIds]
+  const [draggedImageId] = nextOrderedImageIds.splice(draggedIndex, 1)
+  let insertIndex = targetIndex
+
+  if (draggedIndex < targetIndex) {
+    insertIndex -= 1
+  }
+
+  if (placement === 'after') {
+    insertIndex += 1
+  }
+
+  nextOrderedImageIds.splice(insertIndex, 0, draggedImageId)
+  return nextOrderedImageIds
+}
+
+function handleImageDragStart(assetId: number, event: DragEvent) {
+  if (!canReorderImages.value || imageOrderSaving.value) {
+    event.preventDefault()
+    return
+  }
+
+  draggingImageAssetId.value = assetId
+  dragOverImageAssetId.value = null
+  dragOverPlacement.value = null
+
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', String(assetId))
+  }
+}
+
+function handleImageDragOver(targetAssetId: number, event: DragEvent) {
+  if (!canReorderImages.value || !draggingImageAssetId.value || draggingImageAssetId.value === targetAssetId) {
+    return
+  }
+
+  event.preventDefault()
+
+  const targetElement = event.currentTarget as HTMLElement | null
+  const nextPlacement = targetElement && event.clientX >= targetElement.getBoundingClientRect().left + targetElement.getBoundingClientRect().width / 2
+    ? 'after'
+    : 'before'
+
+  dragOverImageAssetId.value = targetAssetId
+  dragOverPlacement.value = nextPlacement
+
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move'
+  }
+}
+
+async function handleImageDrop(targetAssetId: number, event: DragEvent) {
+  event.preventDefault()
+
+  const draggedAssetId = draggingImageAssetId.value
+  const placement = dragOverPlacement.value ?? 'before'
+
+  if (!draggedAssetId || draggedAssetId === targetAssetId || !authStore.token || !productId.value) {
+    clearImageDragState()
+    return
+  }
+
+  const reorderedImageIds = buildReorderedImageIds(draggedAssetId, targetAssetId, placement)
+  const preferredImageAssetId = activeImageAssetId.value ?? draggedAssetId
+  clearImageDragState()
+
+  if (!reorderedImageIds) {
+    return
+  }
+
+  imageOrderSaving.value = true
+
+  try {
+    await reorderProductImageAssetsApi(productId.value, reorderedImageIds, authStore.token)
+    await loadAssets(preferredImageAssetId)
+    ElMessage.success('图片顺序已更新')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `图片排序失败：${error.message}` : '图片排序失败')
+  } finally {
+    imageOrderSaving.value = false
+    clearImageDragState()
+  }
+}
+
+function handleImageDragEnd() {
+  if (imageOrderSaving.value) {
+    return
+  }
+
+  clearImageDragState()
+}
+
+async function saveProduct() {
+  if (isReadOnly.value || !authStore.token || !productId.value) {
+    return
+  }
+
+  saving.value = true
+
+  try {
+    const detail = await updateProductApi(
+      productId.value,
+      {
+        model: form.model.trim(),
+        name: form.name.trim(),
+        sku: form.sku.trim(),
+        price: form.price,
+        stock: form.stock,
+        status: form.status,
+        remark: form.remark.trim(),
+      },
+      authStore.token,
+    )
+    applyProduct(detail)
+    await catalogStore.loadCategoryTree(authStore.token, true)
+    catalogStore.markProductDataChanged()
+    ElMessage.success('商品资料已保存')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `商品保存失败：${error.message}` : '商品保存失败')
+  } finally {
+    saving.value = false
+  }
+}
+
+async function uploadAssets(fileRole: ProductAssetRole, fileList: File[]) {
+  if (!authStore.token || !productId.value || fileList.length === 0) {
+    return
+  }
+
+  const shouldRefreshProductCenter = fileRole === 'IMAGE' && imageAssets.value.length === 0
+  assetUploading.value = true
+  let uploadedImageAssetId: number | undefined
+
+  try {
+    for (const [index, file] of fileList.entries()) {
+      const uploadedAsset = await uploadProductAssetApi(
+        productId.value,
+        {
+          fileRole,
+          file,
+          isPrimary: fileRole === 'IMAGE' && imageAssets.value.length === 0 && index === 0,
+        },
+        authStore.token,
+      )
+
+      if (fileRole === 'IMAGE' && uploadedImageAssetId === undefined) {
+        uploadedImageAssetId = uploadedAsset.id
+      }
+    }
+
+    await loadAssets(uploadedImageAssetId)
+
+    if (shouldRefreshProductCenter) {
+      catalogStore.markProductDataChanged()
+    }
+
+    ElMessage.success(fileRole === 'IMAGE' ? '图片上传成功' : '标签上传成功')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `附件上传失败：${error.message}` : '附件上传失败')
+  } finally {
+    assetUploading.value = false
+  }
+}
+
+async function downloadAsset(asset: ProductAsset) {
+  if (!authStore.token || !productId.value) {
+    return
+  }
+
+  try {
+    const file = await downloadProductAssetApi(productId.value, asset.id, authStore.token)
+    const url = URL.createObjectURL(file.blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = file.fileName ?? asset.fileName
+    link.click()
+    URL.revokeObjectURL(url)
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `附件下载失败：${error.message}` : '附件下载失败')
+  }
+}
+
+async function setPrimaryImage(asset: ProductAsset) {
+  if (!authStore.token || !productId.value || asset.primary) {
+    return
+  }
+
+  assetActionLoadingId.value = asset.id
+  assetActionType.value = 'primary'
+
+  try {
+    await setPrimaryProductAssetApi(productId.value, asset.id, authStore.token)
+    await loadAssets(asset.id)
+    catalogStore.markProductDataChanged()
+    ElMessage.success('主图已更新')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `设置主图失败：${error.message}` : '设置主图失败')
+  } finally {
+    assetActionLoadingId.value = null
+    assetActionType.value = null
+  }
+}
+
+async function deleteAsset(asset: ProductAsset) {
+  if (!authStore.token || !productId.value) {
+    return
+  }
+
+  try {
+    await ElMessageBox.confirm(`确认删除${asset.fileRole === 'IMAGE' ? '图片' : '标签'}附件 ${asset.fileName} 吗？`, '删除确认', {
+      confirmButtonText: '确认删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+  } catch (error) {
+    if (error === 'cancel' || error === 'close') {
+      return
+    }
+    throw error
+  }
+
+  assetActionLoadingId.value = asset.id
+  assetActionType.value = 'delete'
+
+  const fallbackImageId = asset.fileRole === 'IMAGE'
+    ? imageAssets.value.find((item) => item.id !== asset.id)?.id
+    : activeImageAssetId.value ?? undefined
+
+  try {
+    await deleteProductAssetApi(productId.value, asset.id, authStore.token)
+    await loadAssets(fallbackImageId)
+
+    if (asset.fileRole === 'IMAGE' && asset.primary) {
+      catalogStore.markProductDataChanged()
+    }
+
+    ElMessage.success('附件已删除')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `删除附件失败：${error.message}` : '删除附件失败')
+  } finally {
+    assetActionLoadingId.value = null
+    assetActionType.value = null
+  }
+}
+
+function openCreateOrderDialog() {
+  if (!canCreateOrder.value || !product.value) {
+    return
+  }
+
+  if (product.value.stock < 1) {
+    ElMessage.warning('当前库存为 0，无法加入订单')
+    return
+  }
+
+  presetOrderItems.value = [{ productId: product.value.id, quantity: 1 }]
+  orderDialogVisible.value = true
+}
+
+function goBackToCategoryWall() {
+  const categoryId = String(product.value?.categoryId ?? catalogStore.firstCategoryId)
+
+  void router.push({
+    name: 'product-center',
+    params: { categoryId },
+  })
+}
+
+async function handleOrderSaved(detail: OrderDetail) {
+  ordersStore.applyOrderDetail(detail)
+
+  if (authStore.token) {
+    await ordersStore.loadOrders(authStore.token, true)
+  }
+}
+
+function triggerUpload(fileRole: ProductAssetRole) {
+  if (!canUploadAsset.value) {
+    return
+  }
+
+  if (fileRole === 'IMAGE') {
+    imageInputRef.value?.click()
+    return
+  }
+
+  labelInputRef.value?.click()
+}
+
+async function handleFileSelection(fileRole: ProductAssetRole, event: Event) {
+  const input = event.target as HTMLInputElement
+  const fileList = Array.from(input.files ?? [])
+  input.value = ''
+  await uploadAssets(fileRole, fileList)
+}
+
+onBeforeUnmount(() => {
+  clearPreviewUrl()
+  clearGalleryImageUrls()
+  clearImageDragState()
+})
+
+watch(
+  () => route.params.productId,
+  async () => {
+    clearPreviewUrl()
+    clearGalleryImageUrls()
+    clearImageDragState()
+    assets.value = []
+    activeImageAssetId.value = null
+
+    const loaded = await loadProduct()
+    if (loaded) {
+      await loadAssets()
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () => catalogStore.productDataVersion,
+  async () => {
+    if (!authStore.token || !productId.value || loading.value) {
+      return
+    }
+
+    await loadProduct()
+  },
+)
+</script>
+
+<template>
+  <div class="page-stack" v-loading="loading">
+    <section class="page-hero-card">
+      <div class="product-detail__hero">
+        <el-button class="product-detail__back" plain circle :icon="ArrowLeft" aria-label="返回卡片墙" @click="goBackToCategoryWall" />
+        <p class="page-hero-card__eyebrow">商品详情</p>
+        <h2>{{ form.model || '商品详情' }}<template v-if="form.name"> · {{ form.name }}</template></h2>
+      </div>
+      <div class="page-hero-card__actions">
+        <el-tag :type="isReadOnly ? 'info' : 'success'">{{ isReadOnly ? '只读查看' : '可编辑' }}</el-tag>
+        <el-tag :type="statusType">{{ statusLabel }}</el-tag>
+      </div>
+    </section>
+
+    <el-empty v-if="!loading && !product" description="未找到商品详情" />
+
+    <div v-else class="detail-grid" :class="{ 'detail-grid--single': isGalleryOnlyView }">
+      <section v-if="!isGalleryOnlyView" class="surface-panel">
+        <div class="surface-panel__head">
+          <div>
+            <h3>基础资料</h3>
+            <p>商品编号、价格、库存和备注信息。</p>
+          </div>
+          <el-button v-if="!isReadOnly" type="primary" :loading="saving" @click="saveProduct">保存修改</el-button>
+        </div>
+
+        <div class="detail-info-grid">
+          <div class="detail-field">
+            <span>SKU</span>
+            <strong v-if="isReadOnly">{{ form.sku || '-' }}</strong>
+            <el-input v-else v-model="form.sku" class="detail-field__control" placeholder="请输入 SKU" />
+          </div>
+          <div class="detail-field">
+            <span>型号</span>
+            <strong v-if="isReadOnly">{{ form.model || '-' }}</strong>
+            <el-input v-else v-model="form.model" class="detail-field__control" placeholder="请输入型号" />
+          </div>
+          <div class="detail-field">
+            <span>商品名称</span>
+            <strong v-if="isReadOnly">{{ form.name || '-' }}</strong>
+            <el-input v-else v-model="form.name" class="detail-field__control" placeholder="请输入商品名称" />
+          </div>
+          <div class="detail-field">
+            <span>批发价</span>
+            <strong v-if="isReadOnly">{{ form.price }}</strong>
+            <el-input-number v-else v-model="form.price" class="detail-field__control detail-field__control--stepper" :min="0" :precision="2" :step="1" />
+          </div>
+          <div class="detail-field">
+            <span>库存数量</span>
+            <strong v-if="isReadOnly">{{ form.stock }}</strong>
+            <el-input-number v-else v-model="form.stock" class="detail-field__control detail-field__control--stepper" :min="0" :step="1" />
+          </div>
+          <div class="detail-field">
+            <span>库存状态</span>
+            <strong v-if="isReadOnly">{{ statusLabel }}</strong>
+            <el-select v-else v-model="form.status" class="detail-field__control" placeholder="请选择库存状态">
+              <el-option v-for="option in PRODUCT_STATUS_OPTIONS" :key="option.value" :label="option.label" :value="option.value" />
+            </el-select>
+          </div>
+          <div class="detail-field detail-field--full">
+            <span>备注</span>
+            <strong v-if="isReadOnly">{{ form.remark || '暂无备注' }}</strong>
+            <el-input v-else v-model="form.remark" class="detail-field__control" type="textarea" :rows="3" placeholder="请输入备注信息" />
+          </div>
+        </div>
+      </section>
+
+      <section class="surface-panel">
+        <div class="surface-panel__head">
+          <div>
+            <h3>{{ isGalleryOnlyView ? '商品图片' : '图片与标签' }}</h3>
+          </div>
+          <div v-if="!isGalleryOnlyView" class="surface-panel__head-actions">
+            <el-button v-if="canUploadAsset" type="primary" plain :loading="assetUploading" :disabled="imageOrderSaving" @click="triggerUpload('IMAGE')">上传图片</el-button>
+          </div>
+        </div>
+
+        <template v-if="isGalleryOnlyView">
+          <div v-if="imageAssets.length === 0" class="preview-thumbs__empty">暂无商品图片</div>
+          <div v-else class="customer-gallery" v-loading="assetsLoading">
+            <article v-for="asset in imageAssets" :key="asset.id" class="customer-gallery__item">
+              <img v-if="galleryImageUrls[asset.id]" class="customer-gallery__image" :src="galleryImageUrls[asset.id]" :alt="asset.fileName" />
+              <div v-else class="customer-gallery__loading">图片加载中</div>
+            </article>
+          </div>
+        </template>
+
+        <template v-else>
+          <input ref="imageInputRef" class="hidden-file-input" type="file" accept="image/*" multiple @change="handleFileSelection('IMAGE', $event)" />
+          <input ref="labelInputRef" class="hidden-file-input" type="file" @change="handleFileSelection('LABEL', $event)" />
+
+          <div class="preview-stage" v-loading="assetsLoading || previewLoading">
+            <img v-if="previewUrl" class="preview-stage__image" :src="previewUrl" :alt="activeImageAsset?.fileName || '商品图片'" />
+            <div v-else class="teapot-shape teapot-shape--large"></div>
+          </div>
+
+          <div class="preview-thumbs">
+            <button
+              v-for="asset in imageAssets"
+              :key="asset.id"
+              type="button"
+              class="preview-thumbs__item preview-thumbs__item--asset"
+              :class="{
+                'is-active': asset.id === activeImageAssetId,
+                'is-draggable': canReorderImages,
+                'is-dragging': draggingImageAssetId === asset.id,
+                'is-drop-target': dragOverImageAssetId === asset.id && draggingImageAssetId !== asset.id,
+                'is-drop-before': dragOverImageAssetId === asset.id && dragOverPlacement === 'before' && draggingImageAssetId !== asset.id,
+                'is-drop-after': dragOverImageAssetId === asset.id && dragOverPlacement === 'after' && draggingImageAssetId !== asset.id,
+              }"
+              :draggable="canReorderImages && !imageOrderSaving"
+              @click="showImageAsset(asset.id)"
+              @dragstart="handleImageDragStart(asset.id, $event)"
+              @dragover="handleImageDragOver(asset.id, $event)"
+              @drop="handleImageDrop(asset.id, $event)"
+              @dragend="handleImageDragEnd"
+            >
+              <span>{{ asset.fileName }}</span>
+              <small v-if="asset.primary">主图</small>
+            </button>
+            <div v-if="imageAssets.length === 0" class="preview-thumbs__empty">暂无商品图片</div>
+            <div v-else-if="canReorderImages" class="preview-thumbs__hint">
+              {{ imageOrderSaving ? '正在保存图片顺序…' : '拖动缩略图可调整顺序，放到目标右半侧会排在它后面。' }}
+            </div>
+          </div>
+
+          <div class="asset-image-actions">
+            <div class="asset-image-actions__meta">
+              <strong>{{ activeImageAsset?.fileName || '未选择图片' }}</strong>
+              <span v-if="activeImageAsset">{{ activeImageAsset.mimeType }} · {{ activeImageSizeLabel }}</span>
+            </div>
+            <div class="asset-image-actions__buttons">
+              <el-button :disabled="!activeImageAsset" @click="activeImageAsset && downloadAsset(activeImageAsset)">下载原图</el-button>
+              <el-button
+                v-if="canUploadAsset && activeImageAsset && !activeImageAsset.primary"
+                plain
+                :loading="assetActionLoadingId === activeImageAsset.id && assetActionType === 'primary'"
+                @click="setPrimaryImage(activeImageAsset)"
+              >
+                设为主图
+              </el-button>
+              <el-button
+                v-if="canUploadAsset && activeImageAsset"
+                type="danger"
+                plain
+                :loading="assetActionLoadingId === activeImageAsset.id && assetActionType === 'delete'"
+                @click="deleteAsset(activeImageAsset)"
+              >
+                删除当前图片
+              </el-button>
+            </div>
+          </div>
+
+          <div class="asset-file-list">
+            <div class="asset-file-list__head">
+              <div class="asset-file-list__summary">
+                <h4>标签文件</h4>
+                <span>{{ labelAssets.length }} 个文件</span>
+              </div>
+              <el-button v-if="canUploadAsset" plain :loading="assetUploading" @click="triggerUpload('LABEL')">上传标签</el-button>
+            </div>
+            <div v-if="labelAssets.length === 0" class="asset-file-list__empty">暂无标签文件</div>
+            <div v-for="asset in labelAssets" :key="asset.id" class="asset-file-list__item">
+              <div class="asset-file-list__content">
+                <span>{{ asset.fileName }}</span>
+                <small>{{ asset.mimeType }}</small>
+              </div>
+              <div class="asset-file-list__actions">
+                <el-button size="small" @click="downloadAsset(asset)">下载</el-button>
+                <el-button
+                  v-if="canUploadAsset"
+                  size="small"
+                  type="danger"
+                  plain
+                  :loading="assetActionLoadingId === asset.id && assetActionType === 'delete'"
+                  @click="deleteAsset(asset)"
+                >
+                  删除
+                </el-button>
+              </div>
+            </div>
+          </div>
+
+          <div class="detail-actions-row">
+            <el-button :disabled="labelAssets.length === 0" @click="labelAssets[0] && downloadAsset(labelAssets[0])">下载标签模板</el-button>
+            <el-button v-if="canCreateOrder" type="primary" @click="openCreateOrderDialog">加入订单</el-button>
+          </div>
+        </template>
+      </section>
+    </div>
+
+    <OrderEditorDialog v-model="orderDialogVisible" mode="create" :preset-items="presetOrderItems" @saved="handleOrderSaved" />
+  </div>
+</template>
--- a/frontend/src/views/statistics/StatisticsView.vue
+++ b/frontend/src/views/statistics/StatisticsView.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getMonthlyStatisticsApi, getYearlyStatisticsApi } from '../../services/statistics'
+import { useAuthStore } from '../../stores/auth'
+import type { StatisticsMode, StatisticsSummary } from '../../types/statistics'
+
+const authStore = useAuthStore()
+const loading = ref(false)
+const mode = ref<StatisticsMode>('monthly')
+const summary = ref<StatisticsSummary | null>(null)
+
+const totalQuantity = computed(() => summary.value?.totalQuantity ?? 0)
+const totalAmount = computed(() => summary.value?.totalAmount ?? 0)
+const topProduct = computed(() => summary.value?.topProductName ?? '-')
+const avgPrice = computed(() => summary.value?.averagePrice ?? 0)
+const statisticsRows = computed(() => summary.value?.rows ?? [])
+const boardTitle = computed(() => {
+  if (!summary.value) {
+    return '月度 / 年度统计看板'
+  }
+
+  if (mode.value === 'monthly') {
+    return `${summary.value.year} 年 ${summary.value.month ?? '-'} 月统计看板`
+  }
+
+  return `${summary.value.year} 年度统计看板`
+})
+
+async function loadStatistics() {
+  if (!authStore.token) {
+    return
+  }
+
+  loading.value = true
+
+  try {
+    summary.value = mode.value === 'monthly'
+      ? await getMonthlyStatisticsApi(authStore.token)
+      : await getYearlyStatisticsApi(authStore.token)
+  } catch (error) {
+    summary.value = null
+    ElMessage.error(error instanceof Error ? `统计数据加载失败：${error.message}` : '统计数据加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+  mode,
+  () => {
+    void loadStatistics()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div class="page-stack">
+    <section class="page-hero-card">
+      <div>
+        <p class="page-hero-card__eyebrow">经营统计</p>
+        <h2>{{ boardTitle }}</h2>
+      </div>
+      <div class="page-hero-card__actions">
+        <el-button :type="mode === 'monthly' ? 'primary' : 'default'" @click="mode = 'monthly'">月度</el-button>
+        <el-button :type="mode === 'yearly' ? 'primary' : 'default'" @click="mode = 'yearly'">年度</el-button>
+      </div>
+    </section>
+
+    <section class="stats-grid stats-grid--four" v-loading="loading">
+      <article class="stats-card">
+        <span>总销量</span>
+        <strong>{{ totalQuantity }}</strong>
+        <p>所有款式累计销量</p>
+      </article>
+      <article class="stats-card">
+        <span>总销售额</span>
+        <strong>{{ totalAmount }}</strong>
+        <p>按订单明细快照统计</p>
+      </article>
+      <article class="stats-card">
+        <span>销量最高款式</span>
+        <strong>{{ topProduct }}</strong>
+        <p>用于快速识别热销款</p>
+      </article>
+      <article class="stats-card">
+        <span>平均客单价</span>
+        <strong>{{ avgPrice }}</strong>
+        <p>便于观察出货结构变化</p>
+      </article>
+    </section>
+
+    <section class="surface-panel" v-loading="loading">
+      <div class="surface-panel__head">
+        <div>
+          <h3>统计明细</h3>
+          <p>{{ mode === 'monthly' ? '当前展示月度订单聚合结果。' : '当前展示年度订单聚合结果。' }}</p>
+        </div>
+      </div>
+
+      <el-table :data="statisticsRows" stripe>
+        <el-table-column prop="name" label="款式" min-width="180" />
+        <el-table-column prop="quantity" label="数量" width="120" />
+        <el-table-column prop="price" label="单价" width="120" />
+        <el-table-column prop="subtotal" label="小计" width="140" />
+      </el-table>
+
+      <el-empty v-if="!loading && statisticsRows.length === 0" description="当前统计周期暂无数据" />
+    </section>
+  </div>
+</template>
--- a/frontend/src/views/system/UsersView.vue
+++ b/frontend/src/views/system/UsersView.vue
@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { PERMISSION_LABEL_MAP, PERMISSION_OPTIONS } from '../../services/access'
+import { demoUsers } from '../../services/mock-data'
+import { createUserApi, getUsersApi, updateUserPermissionsApi, updateUserStatusApi } from '../../services/user'
+import { useAuthStore } from '../../stores/auth'
+import type { CreateUserPayload, UserListItem } from '../../types/auth'
+
+type PermissionOption = (typeof PERMISSION_OPTIONS)[number]
+type PermissionGroup = { name: string; items: PermissionOption[] }
+
+const authStore = useAuthStore()
+const loading = ref(false)
+const submitting = ref(false)
+const permissionSubmitting = ref(false)
+const users = ref<UserListItem[]>([])
+const loadMode = ref<'remote' | 'fallback'>('remote')
+const createDialogVisible = ref(false)
+const permissionsDialogVisible = ref(false)
+const selectedUser = ref<UserListItem | null>(null)
+const createForm = reactive<CreateUserPayload>({
+  username: '',
+  displayName: '',
+  password: '',
+  permissions: ['PRODUCT_VIEW'],
+})
+const permissionsForm = reactive({
+  permissions: [] as string[],
+})
+
+const permissionGroups: PermissionGroup[] = Array.from(
+  PERMISSION_OPTIONS.reduce((groups, option) => {
+    const items = groups.get(option.group) ?? []
+    items.push(option)
+    groups.set(option.group, items)
+    return groups
+  }, new Map<string, PermissionOption[]>()),
+).map(([name, items]) => ({ name, items }))
+
+async function loadUsers() {
+  loading.value = true
+
+  try {
+    if (!authStore.token) {
+      throw new Error('缺少登录令牌')
+    }
+
+    users.value = await getUsersApi(authStore.token)
+    loadMode.value = 'remote'
+  } catch (error) {
+    users.value = demoUsers
+    loadMode.value = 'fallback'
+    ElMessage.warning(error instanceof Error ? `用户接口暂不可用，已切换到演示数据：${error.message}` : '已切换到演示数据')
+  } finally {
+    loading.value = false
+  }
+}
+
+function resetCreateForm() {
+  createForm.username = ''
+  createForm.displayName = ''
+  createForm.password = ''
+  createForm.permissions = ['PRODUCT_VIEW']
+}
+
+function permissionLabel(permission: string) {
+  return PERMISSION_LABEL_MAP[permission] ?? permission
+}
+
+function openCreateDialog() {
+  if (loadMode.value === 'fallback') {
+    ElMessage.warning('当前使用演示数据，无法提交新增用户')
+    return
+  }
+
+  resetCreateForm()
+  createDialogVisible.value = true
+}
+
+function openPermissionsDialog(user: UserListItem) {
+  if (loadMode.value === 'fallback') {
+    ElMessage.warning('当前使用演示数据，无法修改权限')
+    return
+  }
+
+  if (user.userType === 'ADMIN') {
+    ElMessage.info('管理员账号权限固定，不支持修改')
+    return
+  }
+
+  selectedUser.value = user
+  permissionsForm.permissions = [...user.permissions]
+  permissionsDialogVisible.value = true
+}
+
+async function submitCreateUser() {
+  if (!authStore.token) {
+    ElMessage.error('缺少登录令牌')
+    return
+  }
+
+  const username = createForm.username.trim()
+  const displayName = createForm.displayName.trim()
+  const password = createForm.password.trim()
+  const permissions = [...createForm.permissions]
+
+  if (!username || !displayName || !password) {
+    ElMessage.warning('请完整填写用户名、显示名称和密码')
+    return
+  }
+
+  if (permissions.length === 0) {
+    ElMessage.warning('请至少选择一个权限')
+    return
+  }
+
+  submitting.value = true
+
+  try {
+    await createUserApi({ username, displayName, password, permissions }, authStore.token)
+    createDialogVisible.value = false
+    resetCreateForm()
+    await loadUsers()
+    ElMessage.success('普通用户已创建')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `创建用户失败：${error.message}` : '创建用户失败')
+  } finally {
+    submitting.value = false
+  }
+}
+
+async function submitPermissions() {
+  if (!authStore.token || !selectedUser.value) {
+    ElMessage.error('缺少用户上下文')
+    return
+  }
+
+  if (permissionsForm.permissions.length === 0) {
+    ElMessage.warning('请至少保留一个权限')
+    return
+  }
+
+  permissionSubmitting.value = true
+
+  try {
+    await updateUserPermissionsApi(selectedUser.value.id, { permissions: [...permissionsForm.permissions] }, authStore.token)
+    permissionsDialogVisible.value = false
+    await loadUsers()
+    ElMessage.success('用户权限已更新')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? `更新权限失败：${error.message}` : '更新权限失败')
+  } finally {
+    permissionSubmitting.value = false
+  }
+}
+
+async function toggleUserStatus(user: UserListItem) {
+  if (!authStore.token) {
+    ElMessage.error('缺少登录令牌')
+    return
+  }
+
+  if (loadMode.value === 'fallback') {
+    ElMessage.warning('当前使用演示数据，无法修改状态')
+    return
+  }
+
+  if (user.userType === 'ADMIN') {
+    ElMessage.info('管理员账号不允许停用')
+    return
+  }
+
+  const nextStatus = user.status === 'ENABLED' ? 'DISABLED' : 'ENABLED'
+  const actionText = nextStatus === 'ENABLED' ? '启用' : '停用'
+
+  try {
+    await ElMessageBox.confirm(`确认要${actionText}用户 ${user.displayName} 吗？`, '状态确认', {
+      confirmButtonText: `确认${actionText}`,
+      cancelButtonText: '取消',
+      type: nextStatus === 'ENABLED' ? 'success' : 'warning',
+    })
+    await updateUserStatusApi(user.id, { status: nextStatus }, authStore.token)
+    await loadUsers()
+    ElMessage.success(`用户已${actionText}`)
+  } catch (error) {
+    if (error === 'cancel' || error === 'close') {
+      return
+    }
+    ElMessage.error(error instanceof Error ? `更新状态失败：${error.message}` : '更新状态失败')
+  }
+}
+
+onMounted(() => {
+  void loadUsers()
+})
+</script>
+
+<template>
+  <div class="page-stack">
+    <section class="page-hero-card">
+      <div>
+        <p class="page-hero-card__eyebrow">用户管理</p>
+        <h2>管理员账号与权限分配</h2>
+      </div>
+      <div class="page-hero-card__actions">
+        <el-button type="primary" @click="openCreateDialog">新增普通用户</el-button>
+        <el-tag :type="loadMode === 'remote' ? 'success' : 'warning'">
+          {{ loadMode === 'remote' ? '后端数据' : '演示数据' }}
+        </el-tag>
+      </div>
+    </section>
+
+    <section class="stats-grid stats-grid--three">
+      <article class="stats-card">
+        <span>管理员账号</span>
+        <strong>{{ users.filter((item) => item.userType === 'ADMIN').length }}</strong>
+        <p>管理员默认拥有全量页面和按钮权限。</p>
+      </article>
+      <article class="stats-card">
+        <span>普通用户</span>
+        <strong>{{ users.filter((item) => item.userType === 'NORMAL').length }}</strong>
+        <p>普通用户可按业务职责授予商品、订单和统计权限。</p>
+      </article>
+      <article class="stats-card">
+        <span>启用账号</span>
+        <strong>{{ users.filter((item) => item.status === 'ENABLED').length }}</strong>
+        <p>停用账号将无法继续登录系统。</p>
+      </article>
+    </section>
+
+    <section class="surface-panel">
+      <div class="surface-panel__head">
+        <div>
+          <h3>用户列表</h3>
+          <p>管理员账号固定不可编辑，普通用户可直接在列表中管理。</p>
+        </div>
+      </div>
+
+      <el-table :data="users" stripe v-loading="loading">
+        <el-table-column prop="username" label="用户名" min-width="140" />
+        <el-table-column prop="displayName" label="显示名称" min-width="160" />
+        <el-table-column label="类型" width="120">
+          <template #default="scope">
+            <el-tag :type="scope.row.userType === 'ADMIN' ? 'danger' : 'info'">
+              {{ scope.row.userType === 'ADMIN' ? '管理员' : '普通用户' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="120">
+          <template #default="scope">
+            <el-tag :type="scope.row.status === 'ENABLED' ? 'success' : 'danger'">
+              {{ scope.row.status === 'ENABLED' ? '启用' : '停用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="权限摘要" min-width="320">
+          <template #default="scope">
+            <div class="permission-tags">
+              <el-tag v-for="permission in scope.row.permissions" :key="permission" size="small" effect="plain">
+                {{ permissionLabel(permission) }}
+              </el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="240">
+          <template #default="scope">
+            <div class="table-actions user-table-actions">
+              <el-button size="small" :disabled="scope.row.userType === 'ADMIN' || loadMode === 'fallback'" @click="openPermissionsDialog(scope.row)">
+                改权限
+              </el-button>
+              <el-button
+                size="small"
+                plain
+                :type="scope.row.status === 'ENABLED' ? 'danger' : 'success'"
+                :disabled="scope.row.userType === 'ADMIN' || loadMode === 'fallback'"
+                @click="toggleUserStatus(scope.row)"
+              >
+                {{ scope.row.status === 'ENABLED' ? '停用' : '启用' }}
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </section>
+
+    <el-dialog v-model="createDialogVisible" title="新增普通用户" width="720px" destroy-on-close>
+      <div class="user-dialog-grid">
+        <div class="detail-field">
+          <span>用户名</span>
+          <el-input v-model="createForm.username" placeholder="例如 customer02" />
+        </div>
+        <div class="detail-field">
+          <span>显示名称</span>
+          <el-input v-model="createForm.displayName" placeholder="例如 华东客户用户" />
+        </div>
+        <div class="detail-field detail-field--full">
+          <span>登录密码</span>
+          <el-input v-model="createForm.password" type="password" show-password placeholder="请输入初始密码" />
+        </div>
+      </div>
+
+      <section class="permission-editor">
+        <div class="permission-editor__head">
+          <h4>权限分配</h4>
+          <span>至少选择一个权限</span>
+        </div>
+        <el-checkbox-group v-model="createForm.permissions" class="permission-group-stack">
+          <div v-for="group in permissionGroups" :key="group.name" class="permission-group-panel">
+            <strong>{{ group.name }}</strong>
+            <div class="permission-option-grid">
+              <el-checkbox v-for="option in group.items" :key="option.code" :label="option.code">
+                {{ option.label }}
+              </el-checkbox>
+            </div>
+          </div>
+        </el-checkbox-group>
+      </section>
+
+      <template #footer>
+        <div class="dialog-footer-actions">
+          <el-button @click="createDialogVisible = false">取消</el-button>
+          <el-button type="primary" :loading="submitting" @click="submitCreateUser">创建用户</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="permissionsDialogVisible" title="编辑用户权限" width="720px" destroy-on-close @closed="selectedUser = null">
+      <section class="permission-editor">
+        <div class="permission-editor__head">
+          <div>
+            <h4>{{ selectedUser?.displayName || '权限编辑' }}</h4>
+            <p>{{ selectedUser?.username || '-' }}</p>
+          </div>
+          <span>当前选中 {{ permissionsForm.permissions.length }} 个权限</span>
+        </div>
+        <el-checkbox-group v-model="permissionsForm.permissions" class="permission-group-stack">
+          <div v-for="group in permissionGroups" :key="group.name" class="permission-group-panel">
+            <strong>{{ group.name }}</strong>
+            <div class="permission-option-grid">
+              <el-checkbox v-for="option in group.items" :key="option.code" :label="option.code">
+                {{ option.label }}
+              </el-checkbox>
+            </div>
+          </div>
+        </el-checkbox-group>
+      </section>
+
+      <template #footer>
+        <div class="dialog-footer-actions">
+          <el-button @click="permissionsDialogVisible = false">取消</el-button>
+          <el-button type="primary" :loading="permissionSubmitting" @click="submitPermissions">保存权限</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,41 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    Components({
+      dts: true,
+      resolvers: [
+        ElementPlusResolver({
+          importStyle: 'css',
+          directives: true,
+        }),
+      ],
+    }),
+  ],
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (!id.includes('node_modules')) {
+            return undefined
+          }
+
+          if (id.includes('element-plus')) {
+            return 'element-plus'
+          }
+
+          if (id.includes('vue-router') || id.includes('pinia') || id.includes('/vue/')) {
+            return 'vue-vendor'
+          }
+
+          return 'vendor'
+        },
+      },
+    },
+  },
+})
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`