shumengya/mengyastore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: 2026-03-28 21:00

Browse Source
This commit is contained in:
树萌芽
2026-03-28 21:00:22 +08:00
parent c0cff7f7a1
commit f6e150ba97
66 changed files with 18392 additions and 18422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

334
mengyastore-frontend/README.md
View File

@@ -1,167 +1,167 @@
# 萌芽小店 · 前端
基于 **Vue 3 + Vite** 构建的数字商品销售平台前端，采用组件化模块架构。
## 技术依赖
| 包 | 版本 | 用途 |
|----|------|------|
| vue | ^3.x | 核心框架 |
| vite | ^5.x | 构建工具 |
| vue-router | ^4.x | 路由管理 |
| pinia | ^2.x | 状态管理 |
| axios | ^1.6 | HTTP 请求 |
| markdown-it | ^14 | Markdown 渲染 |
## 目录结构
```
src/
├── assets/
│ └── styles.css # 全局 CSS 变量与公共样式
├── router/
│ └── index.js # 路由配置（含维护模式守卫）
├── modules/
│ ├── shared/
│ │ ├── api.js # 所有 API 请求封装
│ │ ├── auth.js # 认证状态（Pinia store）
│ │ └── useWishlist.js # 收藏夹 Composable
│ ├── store/
│ │ ├── StorePage.vue # 商品列表页
│ │ ├── ProductDetail.vue # 商品详情页
│ │ ├── CheckoutPage.vue # 结算页
│ │ └── components/
│ │ └── ProductCard.vue # 商品卡片组件
│ ├── admin/
│ │ ├── AdminPage.vue # 管理后台（编排层）
│ │ └── components/
│ │ ├── AdminTokenRow.vue # 令牌输入
│ │ ├── AdminMaintenanceRow.vue # 维护模式开关
│ │ ├── AdminProductTable.vue # 商品列表表格
│ │ ├── AdminProductModal.vue # 商品编辑弹窗
│ │ ├── AdminOrderTable.vue # 订单记录表格
│ │ └── AdminChatPanel.vue # 用户聊天管理
│ ├── user/
│ │ └── MyOrdersPage.vue # 我的订单
│ ├── wishlist/
│ │ └── WishlistPage.vue # 收藏夹页面
│ ├── maintenance/
│ │ └── MaintenancePage.vue # 站点维护页面
│ └── chat/
│ └── ChatWidget.vue # 用户悬浮聊天窗口
└── App.vue # 根组件（全局布局 + 导航）
```
## 路由列表
| 路径 | 组件 | 说明 |
|------|------|------|
| `/` | `StorePage` | 商品列表 |
| `/product/:id` | `ProductDetail` | 商品详情 |
| `/product/:id/checkout` | `CheckoutPage` | 结算页 |
| `/my/orders` | `MyOrdersPage` | 我的订单（需登录）|
| `/wishlist` | `WishlistPage` | 收藏夹（需登录）|
| `/admin` | `AdminPage` | 管理后台（需令牌）|
| `/maintenance` | `MaintenancePage` | 维护中页面 |
### 路由守卫
- **维护模式**：`beforeEach` 检查 `GET /api/site/maintenance`，若站点维护中则重定向到 `/maintenance`（管理员访问 `/admin` 时豁免）
- 豁免路径：`/maintenance`、`/wishlist`、`/admin`
## 认证流程
使用 SproutGate OAuth 服务：
1. 未登录用户点击「萌芽账号登录」，跳转到 `https://auth.shumengya.top/login?callback=<当前页>`
2. 登录成功后回调携带 token，存入 localStorage
3. `authState`（reactive 对象）全局共享 `token`、`account`、`username`、`avatarUrl`
4. 所有需要认证的 API 请求在 `Authorization: Bearer <token>` 头部携带 token
## 主要功能模块
### 商品列表（StorePage）
- 视图模式（`viewMode`）：全部 / 免费 / 新上架 / 最多购买 / 最多浏览 / 价格最高 / 价格最低
- 搜索：实时过滤商品名称
- 分页：桌面 20 条/页（4×5），手机 10 条/页（5×2）
- 响应式布局：`window.innerWidth <= 900` 切换为双列
### 结算页（CheckoutPage）
- 展示商品信息与价格
- 数量输入，最大值受 `product.maxPerAccount` 限制
- 若商品开启 `showNote`：展示备注文本框
- 若商品开启 `showContact`：展示手机号和邮箱输入框
- 手动发货商品：展示蓝色提示条，确认后显示"等待发货中"
- 自动发货商品：确认后展示卡密内容
### 收藏夹（useWishlist Composable）
```js
import { wishlistIds, wishlistCount, inWishlist, loadWishlist, toggleWishlist } from './useWishlist'
```
- 数据存储在后端，通过 API 同步
- `App.vue` 在登录状态变化时自动调用 `loadWishlist()`
- 收藏状态通过 `wishlistSet`（computed Set）提供 O(1) 查找
### 客服聊天（ChatWidget）
- 仅已登录用户显示（右下角悬浮按钮）
- 每 5 秒轮询新消息
- 客户端和服务端均限制每秒最多发送 1 条消息
## 开发启动
```bash
npm install
npm run dev # 开发服务器 :5173
npm run build # 生产构建 → dist/
npm run preview # 预览构建结果
```
### 环境变量
在项目根目录创建 `.env.local`：
```env
VITE_API_BASE_URL=http://localhost:8080
```
生产部署时设置实际 API 地址。
## 全局样式
`src/assets/styles.css` 定义了全局 CSS 变量：
```css
:root {
--accent: #91a8d0; /* 主题色 */
--accent-2: #b8c8e4; /* 渐变色 */
--text: #2c2c3a; /* 文字色 */
--muted: #8e8e9e; /* 次要文字 */
--line: rgba(0,0,0,0.08); /* 边框色 */
--radius: 8px; /* 圆角 */
}
```
字体使用楷体（KaiTi / STKaiti），fallback 到系统衬线字体。
## 构建与部署
```bash
npm run build
```
产物在 `dist/` 目录，为静态文件，部署到 Nginx / CDN 时需配置：
```nginx
location / {
try_files $uri $uri/ /index.html; # SPA 路由支持
}
location /api/ {
proxy_pass http://localhost:8080; # 反向代理到后端
}
```
# 萌芽小店 · 前端
基于 **Vue 3 + Vite** 构建的数字商品销售平台前端，采用组件化模块架构。
## 技术依赖
| 包 | 版本 | 用途 |
|----|------|------|
| vue | ^3.x | 核心框架 |
| vite | ^5.x | 构建工具 |
| vue-router | ^4.x | 路由管理 |
| pinia | ^2.x | 状态管理 |
| axios | ^1.6 | HTTP 请求 |
| markdown-it | ^14 | Markdown 渲染 |
## 目录结构
```
src/
├── assets/
│ └── styles.css # 全局 CSS 变量与公共样式
├── router/
│ └── index.js # 路由配置（含维护模式守卫）
├── modules/
│ ├── shared/
│ │ ├── api.js # 所有 API 请求封装
│ │ ├── auth.js # 认证状态（Pinia store）
│ │ └── useWishlist.js # 收藏夹 Composable
│ ├── store/
│ │ ├── StorePage.vue # 商品列表页
│ │ ├── ProductDetail.vue # 商品详情页
│ │ ├── CheckoutPage.vue # 结算页
│ │ └── components/
│ │ └── ProductCard.vue # 商品卡片组件
│ ├── admin/
│ │ ├── AdminPage.vue # 管理后台（编排层）
│ │ └── components/
│ │ ├── AdminTokenRow.vue # 令牌输入
│ │ ├── AdminMaintenanceRow.vue # 维护模式开关
│ │ ├── AdminProductTable.vue # 商品列表表格
│ │ ├── AdminProductModal.vue # 商品编辑弹窗
│ │ ├── AdminOrderTable.vue # 订单记录表格
│ │ └── AdminChatPanel.vue # 用户聊天管理
│ ├── user/
│ │ └── MyOrdersPage.vue # 我的订单
│ ├── wishlist/
│ │ └── WishlistPage.vue # 收藏夹页面
│ ├── maintenance/
│ │ └── MaintenancePage.vue # 站点维护页面
│ └── chat/
│ └── ChatWidget.vue # 用户悬浮聊天窗口
└── App.vue # 根组件（全局布局 + 导航）
```
## 路由列表
| 路径 | 组件 | 说明 |
|------|------|------|
| `/` | `StorePage` | 商品列表 |
| `/product/:id` | `ProductDetail` | 商品详情 |
| `/product/:id/checkout` | `CheckoutPage` | 结算页 |
| `/my/orders` | `MyOrdersPage` | 我的订单（需登录）|
| `/wishlist` | `WishlistPage` | 收藏夹（需登录）|
| `/admin` | `AdminPage` | 管理后台（需令牌）|
| `/maintenance` | `MaintenancePage` | 维护中页面 |
### 路由守卫
- **维护模式**：`beforeEach` 检查 `GET /api/site/maintenance`，若站点维护中则重定向到 `/maintenance`（管理员访问 `/admin` 时豁免）
- 豁免路径：`/maintenance`、`/wishlist`、`/admin`
## 认证流程
使用 SproutGate OAuth 服务：
1. 未登录用户点击「萌芽账号登录」，跳转到 `https://auth.shumengya.top/login?callback=<当前页>`
2. 登录成功后回调携带 token，存入 localStorage
3. `authState`（reactive 对象）全局共享 `token`、`account`、`username`、`avatarUrl`
4. 所有需要认证的 API 请求在 `Authorization: Bearer <token>` 头部携带 token
## 主要功能模块
### 商品列表（StorePage）
- 视图模式（`viewMode`）：全部 / 免费 / 新上架 / 最多购买 / 最多浏览 / 价格最高 / 价格最低
- 搜索：实时过滤商品名称
- 分页：桌面 20 条/页（4×5），手机 10 条/页（5×2）
- 响应式布局：`window.innerWidth <= 900` 切换为双列
### 结算页（CheckoutPage）
- 展示商品信息与价格
- 数量输入，最大值受 `product.maxPerAccount` 限制
- 若商品开启 `showNote`：展示备注文本框
- 若商品开启 `showContact`：展示手机号和邮箱输入框
- 手动发货商品：展示蓝色提示条，确认后显示"等待发货中"
- 自动发货商品：确认后展示卡密内容
### 收藏夹（useWishlist Composable）
```js
import { wishlistIds, wishlistCount, inWishlist, loadWishlist, toggleWishlist } from './useWishlist'
```
- 数据存储在后端，通过 API 同步
- `App.vue` 在登录状态变化时自动调用 `loadWishlist()`
- 收藏状态通过 `wishlistSet`（computed Set）提供 O(1) 查找
### 客服聊天（ChatWidget）
- 仅已登录用户显示（右下角悬浮按钮）
- 每 5 秒轮询新消息
- 客户端和服务端均限制每秒最多发送 1 条消息
## 开发启动
```bash
npm install
npm run dev # 开发服务器 :5173
npm run build # 生产构建 → dist/
npm run preview # 预览构建结果
```
### 环境变量
在项目根目录创建 `.env.local`：
```env
VITE_API_BASE_URL=http://localhost:8080
```
生产部署时设置实际 API 地址。
## 全局样式
`src/assets/styles.css` 定义了全局 CSS 变量：
```css
:root {
--accent: #91a8d0; /* 主题色 */
--accent-2: #b8c8e4; /* 渐变色 */
--text: #2c2c3a; /* 文字色 */
--muted: #8e8e9e; /* 次要文字 */
--line: rgba(0,0,0,0.08); /* 边框色 */
--radius: 8px; /* 圆角 */
}
```
字体使用楷体（KaiTi / STKaiti），fallback 到系统衬线字体。
## 构建与部署
```bash
npm run build
```
产物在 `dist/` 目录，为静态文件，部署到 Nginx / CDN 时需配置：
```nginx
location / {
try_files $uri $uri/ /index.html; # SPA 路由支持
}
location /api/ {
proxy_pass http://localhost:8080; # 反向代理到后端
}
```

56
mengyastore-frontend/index.html
View File

@@ -1,28 +1,28 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>萌芽小店</title>
<!-- Favicon -->
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/pwa-192x192.png" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
<!-- PWA / Theme -->
<meta name="theme-color" content="#1a1a1a" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="萌芽小店" />
<!-- SEO -->
<meta name="description" content="萌芽小店 — 精选商品，一键购买" />
<meta name="keywords" content="萌芽小店,网上购物,精选商品" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>萌芽小店</title>
<!-- Favicon -->
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/pwa-192x192.png" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
<!-- PWA / Theme -->
<meta name="theme-color" content="#1a1a1a" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="萌芽小店" />
<!-- SEO -->
<meta name="description" content="萌芽小店 — 精选商品，一键购买" />
<meta name="keywords" content="萌芽小店,网上购物,精选商品" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

14230
mengyastore-frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

48
mengyastore-frontend/package.json
View File

@@ -1,24 +1,24 @@
{
"name": "mengyastore-frontend",
"private": true,
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.6.8",
"markdown-it": "^14.1.0",
"pinia": "^2.1.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@vite-pwa/assets-generator": "^1.0.2",
"@vitejs/plugin-vue": "^5.0.4",
"vite": "^5.2.7",
"vite-plugin-pwa": "^1.2.0"
}
}
{
"name": "mengyastore-frontend",
"private": true,
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.6.8",
"markdown-it": "^14.1.0",
"pinia": "^2.1.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@vite-pwa/assets-generator": "^1.0.2",
"@vitejs/plugin-vue": "^5.0.4",
"vite": "^5.2.7",
"vite-plugin-pwa": "^1.2.0"
}
}

36
mengyastore-frontend/public/icon.svg
View File

@@ -1,18 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<rect width="512" height="512" rx="80" fill="#1a1a1a"/>
<!-- Sprouting seedling icon -->
<g transform="translate(256,280)">
<!-- Stem -->
<line x1="0" y1="60" x2="0" y2="-20" stroke="#4ade80" stroke-width="18" stroke-linecap="round"/>
<!-- Left leaf -->
<path d="M0,10 Q-80,-30 -60,-100 Q-20,-50 0,10" fill="#4ade80" opacity="0.85"/>
<!-- Right leaf -->
<path d="M0,10 Q80,-30 60,-100 Q20,-50 0,10" fill="#4ade80"/>
<!-- Center leaf / bud -->
<path d="M0,-20 Q-20,-80 0,-120 Q20,-80 0,-20" fill="#86efac"/>
<!-- Ground dots -->
<circle cx="-50" cy="75" r="7" fill="#4ade80" opacity="0.4"/>
<circle cx="50" cy="75" r="7" fill="#4ade80" opacity="0.4"/>
<circle cx="0" cy="80" r="7" fill="#4ade80" opacity="0.4"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<rect width="512" height="512" rx="80" fill="#1a1a1a"/>
<!-- Sprouting seedling icon -->
<g transform="translate(256,280)">
<!-- Stem -->
<line x1="0" y1="60" x2="0" y2="-20" stroke="#4ade80" stroke-width="18" stroke-linecap="round"/>
<!-- Left leaf -->
<path d="M0,10 Q-80,-30 -60,-100 Q-20,-50 0,10" fill="#4ade80" opacity="0.85"/>
<!-- Right leaf -->
<path d="M0,10 Q80,-30 60,-100 Q20,-50 0,10" fill="#4ade80"/>
<!-- Center leaf / bud -->
<path d="M0,-20 Q-20,-80 0,-120 Q20,-80 0,-20" fill="#86efac"/>
<!-- Ground dots -->
<circle cx="-50" cy="75" r="7" fill="#4ade80" opacity="0.4"/>
<circle cx="50" cy="75" r="7" fill="#4ade80" opacity="0.4"/>
<circle cx="0" cy="80" r="7" fill="#4ade80" opacity="0.4"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 842 B

After

Width:  |  Height:  |  Size: 860 B

452
mengyastore-frontend/src/App.vue
View File

@@ -1,226 +1,226 @@
<template>
<div class="app">
<!-- PWA Splash Screen -->
<SplashScreen :visible="showSplash" />
<header class="top-bar">
<div class="brand" @click="onLogoClick">
<div class="brand-mark">
<img src="/logo.png" alt="萌芽小店" draggable="false" />
</div>
<div>
<h1>萌芽小店</h1>
</div>
</div>
<div class="top-actions">
<button class="ghost" @click="goHome">商店</button>
<template v-if="loggedIn">
<button class="ghost wishlist-nav" @click="goWishlist">
<span class="wishlist-icon">☆</span>
收藏夹
<span v-if="wishlistCount > 0" class="wishlist-badge">{{ wishlistCount }}</span>
</button>
<button class="ghost" @click="goMyOrders">我的订单</button>
<div class="user-badge" @click="goProfile">
<img
v-if="authState.avatarUrl"
class="user-avatar"
:src="authState.avatarUrl"
:alt="authState.username"
/>
<div v-else class="user-avatar user-avatar-placeholder">
{{ (authState.username || authState.account || '?').charAt(0) }}
</div>
<span class="user-name">{{ authState.username || authState.account }}</span>
</div>
<button class="ghost" @click="logout">退出</button>
</template>
<a v-else class="login-btn" :href="loginUrl">萌芽账号登录</a>
</div>
</header>
<Teleport to="body">
<Transition name="modal">
<div v-if="showAdminModal" class="admin-modal-overlay" @click.self="showAdminModal = false">
<div class="admin-modal">
<button class="admin-modal-close" @click="showAdminModal = false">&times;</button>
<div class="admin-modal-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
</div>
<h3>管理员验证</h3>
<p class="admin-modal-hint">请输入管理员令牌以访问后台</p>
<form @submit.prevent="submitAdminToken">
<input
ref="tokenInputRef"
v-model="tokenInput"
type="password"
class="admin-modal-input"
placeholder="输入 Token…"
autocomplete="off"
/>
<p v-if="tokenError" class="admin-modal-error">{{ tokenError }}</p>
<button type="submit" class="primary admin-modal-btn" :disabled="!tokenInput.trim()">
进入后台
</button>
</form>
</div>
</div>
</Transition>
</Teleport>
<div class="app-body">
<main class="main-content">
<router-view />
</main>
<footer class="footer">
<div class="footer-inner">
<div class="footer-brand">
<img src="/logo.png" alt="萌芽小店" class="footer-logo" />
<span class="footer-title">萌芽小店</span>
</div>
<div class="footer-divider"></div>
<div class="footer-links">
<a class="footer-mail" href="mailto:mail@smyhub.com">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
mail@smyhub.com
</a>
<span v-if="statsLoaded" class="footer-stat">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
累计下单 {{ stats.totalOrders }} 次
</span>
<span v-if="statsLoaded" class="footer-stat footer-stat-visit">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
累计访问 {{ stats.totalVisits }} 次
</span>
</div>
<p class="footer-copy">© 2025 – 2026 萌芽小店 · All rights reserved</p>
</div>
</footer>
</div>
<!-- Floating chat widget (visible to logged-in users only) -->
<ChatWidget
v-if="loggedIn && authState.token"
:user-token="authState.token"
:user-name="authState.username || authState.account"
:user-avatar="authState.avatarUrl"
/>
<!-- PWA update toast -->
<Transition name="pwa-toast">
<div v-if="needRefresh" class="pwa-update-toast">
<span>发现新版本</span>
<button @click="updateServiceWorker(true)">立即更新</button>
</div>
</Transition>
</div>
</template>
<script setup>
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { verifyAdminToken, fetchStats, recordSiteVisit } from './modules/shared/api'
import { authState, isLoggedIn, clearAuth, getLoginUrl } from './modules/shared/auth'
import { wishlistCount, loadWishlist } from './modules/shared/useWishlist'
import ChatWidget from './modules/chat/ChatWidget.vue'
import SplashScreen from './modules/shared/SplashScreen.vue'
import { useRegisterSW } from 'virtual:pwa-register/vue'
const { needRefresh, updateServiceWorker } = useRegisterSW({
onRegisteredSW(swUrl, r) {
if (r) setInterval(() => r.update(), 1000 * 60 * 60)
}
})
const showSplash = ref(true)
const router = useRouter()
const stats = reactive({ totalOrders: 0, totalVisits: 0 })
const statsLoaded = ref(false)
const loggedIn = computed(() => isLoggedIn())
const loginUrl = computed(() => getLoginUrl())
const showAdminModal = ref(false)
const tokenInput = ref('')
const tokenError = ref('')
const tokenInputRef = ref(null)
let logoClickCount = 0
let logoClickTimer = null
const CLICK_THRESHOLD = 5
const CLICK_WINDOW_MS = 2000
const onLogoClick = () => {
logoClickCount++
clearTimeout(logoClickTimer)
if (logoClickCount >= CLICK_THRESHOLD) {
logoClickCount = 0
tokenInput.value = ''
tokenError.value = ''
showAdminModal.value = true
nextTick(() => tokenInputRef.value?.focus())
return
}
logoClickTimer = setTimeout(() => { logoClickCount = 0 }, CLICK_WINDOW_MS)
}
const submitAdminToken = async () => {
const input = tokenInput.value.trim()
if (!input) return
tokenError.value = ''
try {
const valid = await verifyAdminToken(input)
if (valid) {
showAdminModal.value = false
router.push(`/admin?token=${encodeURIComponent(input)}`)
} else {
tokenError.value = '令牌错误，请重试'
}
} catch {
tokenError.value = '验证失败，无法连接服务器'
}
}
const goHome = () => { router.push('/') }
const goMyOrders = () => { router.push('/my/orders') }
const goWishlist = () => { router.push('/wishlist') }
const goProfile = () => {
if (authState.account) {
window.open(`https://auth.shumengya.top/user/${authState.account}`, '_blank')
}
}
const logout = () => { clearAuth() }
const SPLASH_MIN_MS = 1400
onMounted(async () => {
const splashStart = Date.now()
await loadWishlist()
try {
recordSiteVisit().then((result) => {
if (result.totalVisits) stats.totalVisits = result.totalVisits
}).catch(() => {})
const data = await fetchStats()
stats.totalOrders = data.totalOrders || 0
stats.totalVisits = data.totalVisits || 0
statsLoaded.value = true
} catch (e) {
statsLoaded.value = false
}
const elapsed = Date.now() - splashStart
const remaining = SPLASH_MIN_MS - elapsed
setTimeout(() => { showSplash.value = false }, remaining > 0 ? remaining : 0)
})
watch(() => authState.token, async (newToken) => {
if (newToken) {
await loadWishlist()
}
})
</script>
<template>
<div class="app">
<!-- PWA Splash Screen -->
<SplashScreen :visible="showSplash" />
<header class="top-bar">
<div class="brand" @click="onLogoClick">
<div class="brand-mark">
<img src="/logo.png" alt="萌芽小店" draggable="false" />
</div>
<div>
<h1>萌芽小店</h1>
</div>
</div>
<div class="top-actions">
<button class="ghost" @click="goHome">商店</button>
<template v-if="loggedIn">
<button class="ghost wishlist-nav" @click="goWishlist">
<span class="wishlist-icon">☆</span>
收藏夹
<span v-if="wishlistCount > 0" class="wishlist-badge">{{ wishlistCount }}</span>
</button>
<button class="ghost" @click="goMyOrders">我的订单</button>
<div class="user-badge" @click="goProfile">
<img
v-if="authState.avatarUrl"
class="user-avatar"
:src="authState.avatarUrl"
:alt="authState.username"
/>
<div v-else class="user-avatar user-avatar-placeholder">
{{ (authState.username || authState.account || '?').charAt(0) }}
</div>
<span class="user-name">{{ authState.username || authState.account }}</span>
</div>
<button class="ghost" @click="logout">退出</button>
</template>
<a v-else class="login-btn" :href="loginUrl">萌芽账号登录</a>
</div>
</header>
<Teleport to="body">
<Transition name="modal">
<div v-if="showAdminModal" class="admin-modal-overlay" @click.self="showAdminModal = false">
<div class="admin-modal">
<button class="admin-modal-close" @click="showAdminModal = false">&times;</button>
<div class="admin-modal-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
</div>
<h3>管理员验证</h3>
<p class="admin-modal-hint">请输入管理员令牌以访问后台</p>
<form @submit.prevent="submitAdminToken">
<input
ref="tokenInputRef"
v-model="tokenInput"
type="password"
class="admin-modal-input"
placeholder="输入 Token…"
autocomplete="off"
/>
<p v-if="tokenError" class="admin-modal-error">{{ tokenError }}</p>
<button type="submit" class="primary admin-modal-btn" :disabled="!tokenInput.trim()">
进入后台
</button>
</form>
</div>
</div>
</Transition>
</Teleport>
<div class="app-body">
<main class="main-content">
<router-view />
</main>
<footer class="footer">
<div class="footer-inner">
<div class="footer-brand">
<img src="/logo.png" alt="萌芽小店" class="footer-logo" />
<span class="footer-title">萌芽小店</span>
</div>
<div class="footer-divider"></div>
<div class="footer-links">
<a class="footer-mail" href="mailto:mail@smyhub.com">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
mail@smyhub.com
</a>
<span v-if="statsLoaded" class="footer-stat">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
累计下单 {{ stats.totalOrders }} 次
</span>
<span v-if="statsLoaded" class="footer-stat footer-stat-visit">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
累计访问 {{ stats.totalVisits }} 次
</span>
</div>
<p class="footer-copy">© 2025 – 2026 萌芽小店 · All rights reserved</p>
</div>
</footer>
</div>
<!-- Floating chat widget (visible to logged-in users only) -->
<ChatWidget
v-if="loggedIn && authState.token"
:user-token="authState.token"
:user-name="authState.username || authState.account"
:user-avatar="authState.avatarUrl"
/>
<!-- PWA update toast -->
<Transition name="pwa-toast">
<div v-if="needRefresh" class="pwa-update-toast">
<span>发现新版本</span>
<button @click="updateServiceWorker(true)">立即更新</button>
</div>
</Transition>
</div>
</template>
<script setup>
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { verifyAdminToken, fetchStats, recordSiteVisit } from './modules/shared/api'
import { authState, isLoggedIn, clearAuth, getLoginUrl } from './modules/shared/auth'
import { wishlistCount, loadWishlist } from './modules/shared/useWishlist'
import ChatWidget from './modules/chat/ChatWidget.vue'
import SplashScreen from './modules/shared/SplashScreen.vue'
import { useRegisterSW } from 'virtual:pwa-register/vue'
const { needRefresh, updateServiceWorker } = useRegisterSW({
onRegisteredSW(swUrl, r) {
if (r) setInterval(() => r.update(), 1000 * 60 * 60)
}
})
const showSplash = ref(true)
const router = useRouter()
const stats = reactive({ totalOrders: 0, totalVisits: 0 })
const statsLoaded = ref(false)
const loggedIn = computed(() => isLoggedIn())
const loginUrl = computed(() => getLoginUrl())
const showAdminModal = ref(false)
const tokenInput = ref('')
const tokenError = ref('')
const tokenInputRef = ref(null)
let logoClickCount = 0
let logoClickTimer = null
const CLICK_THRESHOLD = 5
const CLICK_WINDOW_MS = 2000
const onLogoClick = () => {
logoClickCount++
clearTimeout(logoClickTimer)
if (logoClickCount >= CLICK_THRESHOLD) {
logoClickCount = 0
tokenInput.value = ''
tokenError.value = ''
showAdminModal.value = true
nextTick(() => tokenInputRef.value?.focus())
return
}
logoClickTimer = setTimeout(() => { logoClickCount = 0 }, CLICK_WINDOW_MS)
}
const submitAdminToken = async () => {
const input = tokenInput.value.trim()
if (!input) return
tokenError.value = ''
try {
const valid = await verifyAdminToken(input)
if (valid) {
showAdminModal.value = false
router.push(`/admin?token=${encodeURIComponent(input)}`)
} else {
tokenError.value = '令牌错误，请重试'
}
} catch {
tokenError.value = '验证失败，无法连接服务器'
}
}
const goHome = () => { router.push('/') }
const goMyOrders = () => { router.push('/my/orders') }
const goWishlist = () => { router.push('/wishlist') }
const goProfile = () => {
if (authState.account) {
window.open(`https://auth.shumengya.top/user/${authState.account}`, '_blank')
}
}
const logout = () => { clearAuth() }
const SPLASH_MIN_MS = 1400
onMounted(async () => {
const splashStart = Date.now()
await loadWishlist()
try {
recordSiteVisit().then((result) => {
if (result.totalVisits) stats.totalVisits = result.totalVisits
}).catch(() => {})
const data = await fetchStats()
stats.totalOrders = data.totalOrders || 0
stats.totalVisits = data.totalVisits || 0
statsLoaded.value = true
} catch (e) {
statsLoaded.value = false
}
const elapsed = Date.now() - splashStart
const remaining = SPLASH_MIN_MS - elapsed
setTimeout(() => { showSplash.value = false }, remaining > 0 ? remaining : 0)
})
watch(() => authState.token, async (newToken) => {
if (newToken) {
await loadWishlist()
}
})
</script>

1604
mengyastore-frontend/src/assets/styles.css
View File

File diff suppressed because it is too large Load Diff

988
mengyastore-frontend/src/modules/admin/AdminPage.vue
View File

@@ -1,494 +1,494 @@
<template>
<section class="admin-layout">
<!-- Sidebar -->
<nav class="admin-sidebar">
<div class="sidebar-brand">
<span>管理后台</span>
</div>
<div class="sidebar-nav">
<button
v-for="item in NAV_ITEMS"
:key="item.id"
:class="['nav-item', activeSection === item.id ? 'nav-item--active' : '']"
@click="activeSection = item.id"
type="button"
>
<span class="nav-icon" v-html="item.icon"></span>
<span class="nav-label">{{ item.label }}</span>
</button>
</div>
</nav>
<!-- Main content -->
<div class="admin-content">
<!-- Top bar -->
<div class="admin-topbar">
<div class="topbar-title">{{ currentNavLabel }}</div>
<div class="topbar-actions">
<button class="ghost small-btn" @click="refresh">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
刷新
</button>
<button v-if="activeSection === 'products'" class="primary small-btn" @click="openCreate">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
添加商品
</button>
</div>
</div>
<!-- Token row (always visible) -->
<AdminTokenRow
:show="!token || !!message"
v-model:token="token"
:message="!token || message ? message : ''"
:inline-message="token && message ? message : ''"
/>
<!-- Section: Products -->
<div v-if="activeSection === 'products'">
<p class="section-tip tag">共 {{ products.length }} 件商品</p>
<AdminProductTable
:products="products"
@edit="openEdit"
@toggle="toggle"
@remove="remove"
/>
</div>
<!-- Section: Orders -->
<div v-else-if="activeSection === 'orders'">
<AdminOrderTable :orders="orders" @remove="removeOrder" />
</div>
<!-- Section: Chat -->
<div v-else-if="activeSection === 'chat'">
<AdminChatPanel :admin-token="token" />
</div>
<!-- Section: Settings -->
<div v-else-if="activeSection === 'settings'">
<AdminMaintenanceRow
v-model:enabled="maintenanceEnabled"
v-model:reason="maintenanceReason"
:message="maintenanceMsg"
@save="saveMaintenance"
/>
<AdminSMTPRow
:config="smtpConfig"
:message="smtpMsg"
@save="saveSMTPConfig"
/>
</div>
</div>
</section>
<AdminProductModal
:open="editorOpen"
:edit-item="selectedItem"
@close="closeEditor"
@submit="handleFormSubmit"
/>
</template>
<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
fetchAdminProducts,
createProduct,
updateProduct,
toggleProduct,
deleteProduct,
fetchAdminOrders,
deleteAdminOrder,
fetchSiteMaintenance,
setSiteMaintenance,
fetchSMTPConfig,
setSMTPConfig
} from '../shared/api'
import AdminTokenRow from './components/AdminTokenRow.vue'
import AdminMaintenanceRow from './components/AdminMaintenanceRow.vue'
import AdminSMTPRow from './components/AdminSMTPRow.vue'
import AdminProductTable from './components/AdminProductTable.vue'
import AdminProductModal from './components/AdminProductModal.vue'
import AdminOrderTable from './components/AdminOrderTable.vue'
import AdminChatPanel from './components/AdminChatPanel.vue'
const route = useRoute()
const router = useRouter()
const NAV_ITEMS = [
{
id: 'products',
label: '商品管理',
icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>'
},
{
id: 'orders',
label: '订单记录',
icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>'
},
{
id: 'chat',
label: '用户消息',
icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>'
},
{
id: 'settings',
label: '站点设置',
icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>'
}
]
const activeSection = ref('products')
const currentNavLabel = computed(() => NAV_ITEMS.find(i => i.id === activeSection.value)?.label || '')
const token = ref(route.query.token || '')
const products = ref([])
const orders = ref([])
const message = ref('')
const editorOpen = ref(false)
const selectedItem = ref(null)
const maintenanceEnabled = ref(false)
const maintenanceReason = ref('')
const maintenanceMsg = ref('')
const smtpConfig = ref({})
const smtpMsg = ref('')
const syncQuery = () => {
if (token.value) {
router.replace({ query: { token: token.value } })
}
}
const refresh = async () => {
if (!token.value) {
message.value = '请先输入 token'
return
}
try {
const [prods, ords] = await Promise.all([
fetchAdminProducts(token.value),
fetchAdminOrders(token.value)
])
products.value = prods
orders.value = ords
message.value = '数据已更新'
} catch {
message.value = '获取失败，请检查 token'
}
}
const loadMaintenance = async () => {
try {
const { maintenance, reason } = await fetchSiteMaintenance()
maintenanceEnabled.value = maintenance
maintenanceReason.value = reason || ''
} catch {
maintenanceMsg.value = '加载维护状态失败'
}
}
const loadSMTPConfig = async () => {
if (!token.value) return
try {
smtpConfig.value = await fetchSMTPConfig(token.value)
} catch {
smtpMsg.value = '加载 SMTP 配置失败'
}
}
const saveSMTPConfig = async (cfg) => {
if (!token.value) {
smtpMsg.value = '请先输入 token'
return
}
try {
await setSMTPConfig(token.value, cfg)
smtpMsg.value = '配置已保存'
await loadSMTPConfig()
} catch {
smtpMsg.value = '保存失败，请检查 token'
}
}
const saveMaintenance = async () => {
if (!token.value) {
maintenanceMsg.value = '请先输入 token'
return
}
try {
await setSiteMaintenance(token.value, maintenanceEnabled.value, maintenanceReason.value)
maintenanceMsg.value = maintenanceEnabled.value ? '维护模式已开启' : '维护模式已关闭'
} catch {
maintenanceMsg.value = '保存失败，请检查 token'
}
}
const handleFormSubmit = async (payload) => {
if (!token.value) {
message.value = '请先输入 token'
return
}
try {
if (payload.id) {
await updateProduct(token.value, payload.id, payload)
message.value = '已更新商品'
} else {
await createProduct(token.value, payload)
message.value = '已新增商品'
}
closeEditor()
await refresh()
} catch {
message.value = '操作失败，请检查输入'
}
}
const toggle = async (item) => {
if (!token.value) {
message.value = '请先输入 token'
return
}
await toggleProduct(token.value, item.id, !item.active)
await refresh()
}
const remove = async (item) => {
if (!token.value) {
message.value = '请先输入 token'
return
}
await deleteProduct(token.value, item.id)
await refresh()
}
const removeOrder = async (orderId) => {
if (!token.value) return
try {
await deleteAdminOrder(token.value, orderId)
orders.value = orders.value.filter((o) => o.id !== orderId)
} catch {
message.value = '删除订单失败'
}
}
const openCreate = () => {
selectedItem.value = null
editorOpen.value = true
}
const openEdit = (item) => {
selectedItem.value = item
editorOpen.value = true
}
const closeEditor = () => {
editorOpen.value = false
selectedItem.value = null
}
watch(token, (val) => {
syncQuery()
if (val) loadSMTPConfig()
})
onMounted(async () => {
await loadMaintenance()
if (token.value) {
await Promise.all([refresh(), loadSMTPConfig()])
}
})
</script>
<style scoped>
/* ── Layout ── */
.admin-layout {
display: flex;
min-height: calc(100vh - 120px);
gap: 0;
background: var(--glass);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
backdrop-filter: blur(16px);
overflow: hidden;
}
/* ── Sidebar ── */
.admin-sidebar {
width: 180px;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.65);
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
}
.sidebar-brand {
padding: 20px 18px 14px;
font-size: 16px;
font-weight: 700;
color: var(--text);
border-bottom: 1px solid var(--line);
letter-spacing: 0.3px;
}
.sidebar-nav {
display: flex;
flex-direction: column;
padding: 10px 0;
gap: 2px;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
font-size: 15px;
font-family: inherit;
font-weight: 500;
color: var(--muted);
background: none;
border: none;
cursor: pointer;
text-align: left;
border-radius: 0;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.nav-item:hover {
background: rgba(180, 154, 203, 0.1);
color: var(--text);
}
.nav-item--active {
background: rgba(180, 154, 203, 0.18);
color: var(--text);
font-weight: 700;
border-right: 3px solid var(--accent);
}
.nav-icon {
display: flex;
align-items: center;
opacity: 0.7;
flex-shrink: 0;
}
.nav-item--active .nav-icon {
opacity: 1;
}
/* ── Content area ── */
.admin-content {
flex: 1;
min-width: 0;
padding: 22px 24px;
overflow: auto;
}
/* ── Top bar ── */
.admin-topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.topbar-title {
font-size: 20px;
font-weight: 700;
color: var(--text);
}
.topbar-actions {
display: flex;
gap: 8px;
align-items: center;
}
.small-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 14px;
padding: 7px 13px;
}
.section-tip {
font-size: 13px;
color: var(--muted);
margin-bottom: 10px;
}
.tag {
font-size: 14px;
color: var(--muted);
}
/* ── Mobile: sidebar becomes top tabs ── */
@media (max-width: 900px) {
.admin-layout {
flex-direction: column;
min-height: auto;
}
.admin-sidebar {
width: 100%;
border-right: none;
border-bottom: 1px solid var(--line);
}
.sidebar-brand {
padding: 12px 16px 10px;
font-size: 15px;
}
.sidebar-nav {
flex-direction: row;
padding: 0;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar {
display: none;
}
.nav-item {
flex-direction: column;
gap: 3px;
padding: 8px 14px;
font-size: 12px;
border-right: none;
border-bottom: 3px solid transparent;
flex-shrink: 0;
align-items: center;
}
.nav-item--active {
border-right: none;
border-bottom: 3px solid var(--accent);
background: rgba(180, 154, 203, 0.12);
}
.admin-content {
padding: 14px;
}
.admin-topbar {
margin-bottom: 12px;
}
.topbar-title {
font-size: 16px;
}
}
</style>
<template>
<section class="admin-layout">
<!-- Sidebar -->
<nav class="admin-sidebar">
<div class="sidebar-brand">
<span>管理后台</span>
</div>
<div class="sidebar-nav">
<button
v-for="item in NAV_ITEMS"
:key="item.id"
:class="['nav-item', activeSection === item.id ? 'nav-item--active' : '']"
@click="activeSection = item.id"
type="button"
>
<span class="nav-icon" v-html="item.icon"></span>
<span class="nav-label">{{ item.label }}</span>
</button>
</div>
</nav>
<!-- Main content -->
<div class="admin-content">
<!-- Top bar -->
<div class="admin-topbar">
<div class="topbar-title">{{ currentNavLabel }}</div>
<div class="topbar-actions">
<button class="ghost small-btn" @click="refresh">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
刷新
</button>
<button v-if="activeSection === 'products'" class="primary small-btn" @click="openCreate">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
添加商品
</button>
</div>
</div>
<!-- Token row (always visible) -->
<AdminTokenRow
:show="!token || !!message"
v-model:token="token"
:message="!token || message ? message : ''"
:inline-message="token && message ? message : ''"
/>
<!-- Section: Products -->
<div v-if="activeSection === 'products'">
<p class="section-tip tag">共 {{ products.length }} 件商品</p>
<AdminProductTable
:products="products"
@edit="openEdit"
@toggle="toggle"
@remove="remove"
/>
</div>
<!-- Section: Orders -->
<div v-else-if="activeSection === 'orders'">
<AdminOrderTable :orders="orders" @remove="removeOrder" />
</div>
<!-- Section: Chat -->
<div v-else-if="activeSection === 'chat'">
<AdminChatPanel :admin-token="token" />
</div>
<!-- Section: Settings -->
<div v-else-if="activeSection === 'settings'">
<AdminMaintenanceRow
v-model:enabled="maintenanceEnabled"
v-model:reason="maintenanceReason"
:message="maintenanceMsg"
@save="saveMaintenance"
/>
<AdminSMTPRow
:config="smtpConfig"
:message="smtpMsg"
@save="saveSMTPConfig"
/>
</div>
</div>
</section>
<AdminProductModal
:open="editorOpen"
:edit-item="selectedItem"
@close="closeEditor"
@submit="handleFormSubmit"
/>
</template>
<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
fetchAdminProducts,
createProduct,
updateProduct,
toggleProduct,
deleteProduct,
fetchAdminOrders,
deleteAdminOrder,
fetchSiteMaintenance,
setSiteMaintenance,
fetchSMTPConfig,
setSMTPConfig
} from '../shared/api'
import AdminTokenRow from './components/AdminTokenRow.vue'
import AdminMaintenanceRow from './components/AdminMaintenanceRow.vue'
import AdminSMTPRow from './components/AdminSMTPRow.vue'
import AdminProductTable from './components/AdminProductTable.vue'
import AdminProductModal from './components/AdminProductModal.vue'
import AdminOrderTable from './components/AdminOrderTable.vue'
import AdminChatPanel from './components/AdminChatPanel.vue'
const route = useRoute()
const router = useRouter()
const NAV_ITEMS = [
{
id: 'products',
label: '商品管理',
icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>'
},
{
id: 'orders',
label: '订单记录',
icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>'
},
{
id: 'chat',
label: '用户消息',
icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>'
},
{
id: 'settings',
label: '站点设置',
icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>'
}
]
const activeSection = ref('products')
const currentNavLabel = computed(() => NAV_ITEMS.find(i => i.id === activeSection.value)?.label || '')
const token = ref(route.query.token || '')
const products = ref([])
const orders = ref([])
const message = ref('')
const editorOpen = ref(false)
const selectedItem = ref(null)
const maintenanceEnabled = ref(false)
const maintenanceReason = ref('')
const maintenanceMsg = ref('')
const smtpConfig = ref({})
const smtpMsg = ref('')
const syncQuery = () => {
if (token.value) {
router.replace({ query: { token: token.value } })
}
}
const refresh = async () => {
if (!token.value) {
message.value = '请先输入 token'
return
}
try {
const [prods, ords] = await Promise.all([
fetchAdminProducts(token.value),
fetchAdminOrders(token.value)
])
products.value = prods
orders.value = ords
message.value = '数据已更新'
} catch {
message.value = '获取失败，请检查 token'
}
}
const loadMaintenance = async () => {
try {
const { maintenance, reason } = await fetchSiteMaintenance()
maintenanceEnabled.value = maintenance
maintenanceReason.value = reason || ''
} catch {
maintenanceMsg.value = '加载维护状态失败'
}
}
const loadSMTPConfig = async () => {
if (!token.value) return
try {
smtpConfig.value = await fetchSMTPConfig(token.value)
} catch {
smtpMsg.value = '加载 SMTP 配置失败'
}
}
const saveSMTPConfig = async (cfg) => {
if (!token.value) {
smtpMsg.value = '请先输入 token'
return
}
try {
await setSMTPConfig(token.value, cfg)
smtpMsg.value = '配置已保存'
await loadSMTPConfig()
} catch {
smtpMsg.value = '保存失败，请检查 token'
}
}
const saveMaintenance = async () => {
if (!token.value) {
maintenanceMsg.value = '请先输入 token'
return
}
try {
await setSiteMaintenance(token.value, maintenanceEnabled.value, maintenanceReason.value)
maintenanceMsg.value = maintenanceEnabled.value ? '维护模式已开启' : '维护模式已关闭'
} catch {
maintenanceMsg.value = '保存失败，请检查 token'
}
}
const handleFormSubmit = async (payload) => {
if (!token.value) {
message.value = '请先输入 token'
return
}
try {
if (payload.id) {
await updateProduct(token.value, payload.id, payload)
message.value = '已更新商品'
} else {
await createProduct(token.value, payload)
message.value = '已新增商品'
}
closeEditor()
await refresh()
} catch {
message.value = '操作失败，请检查输入'
}
}
const toggle = async (item) => {
if (!token.value) {
message.value = '请先输入 token'
return
}
await toggleProduct(token.value, item.id, !item.active)
await refresh()
}
const remove = async (item) => {
if (!token.value) {
message.value = '请先输入 token'
return
}
await deleteProduct(token.value, item.id)
await refresh()
}
const removeOrder = async (orderId) => {
if (!token.value) return
try {
await deleteAdminOrder(token.value, orderId)
orders.value = orders.value.filter((o) => o.id !== orderId)
} catch {
message.value = '删除订单失败'
}
}
const openCreate = () => {
selectedItem.value = null
editorOpen.value = true
}
const openEdit = (item) => {
selectedItem.value = item
editorOpen.value = true
}
const closeEditor = () => {
editorOpen.value = false
selectedItem.value = null
}
watch(token, (val) => {
syncQuery()
if (val) loadSMTPConfig()
})
onMounted(async () => {
await loadMaintenance()
if (token.value) {
await Promise.all([refresh(), loadSMTPConfig()])
}
})
</script>
<style scoped>
/* ── Layout ── */
.admin-layout {
display: flex;
min-height: calc(100vh - 120px);
gap: 0;
background: var(--glass);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
backdrop-filter: blur(16px);
overflow: hidden;
}
/* ── Sidebar ── */
.admin-sidebar {
width: 180px;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.65);
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
}
.sidebar-brand {
padding: 20px 18px 14px;
font-size: 16px;
font-weight: 700;
color: var(--text);
border-bottom: 1px solid var(--line);
letter-spacing: 0.3px;
}
.sidebar-nav {
display: flex;
flex-direction: column;
padding: 10px 0;
gap: 2px;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
font-size: 15px;
font-family: inherit;
font-weight: 500;
color: var(--muted);
background: none;
border: none;
cursor: pointer;
text-align: left;
border-radius: 0;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.nav-item:hover {
background: rgba(180, 154, 203, 0.1);
color: var(--text);
}
.nav-item--active {
background: rgba(180, 154, 203, 0.18);
color: var(--text);
font-weight: 700;
border-right: 3px solid var(--accent);
}
.nav-icon {
display: flex;
align-items: center;
opacity: 0.7;
flex-shrink: 0;
}
.nav-item--active .nav-icon {
opacity: 1;
}
/* ── Content area ── */
.admin-content {
flex: 1;
min-width: 0;
padding: 22px 24px;
overflow: auto;
}
/* ── Top bar ── */
.admin-topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.topbar-title {
font-size: 20px;
font-weight: 700;
color: var(--text);
}
.topbar-actions {
display: flex;
gap: 8px;
align-items: center;
}
.small-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 14px;
padding: 7px 13px;
}
.section-tip {
font-size: 13px;
color: var(--muted);
margin-bottom: 10px;
}
.tag {
font-size: 14px;
color: var(--muted);
}
/* ── Mobile: sidebar becomes top tabs ── */
@media (max-width: 900px) {
.admin-layout {
flex-direction: column;
min-height: auto;
}
.admin-sidebar {
width: 100%;
border-right: none;
border-bottom: 1px solid var(--line);
}
.sidebar-brand {
padding: 12px 16px 10px;
font-size: 15px;
}
.sidebar-nav {
flex-direction: row;
padding: 0;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar {
display: none;
}
.nav-item {
flex-direction: column;
gap: 3px;
padding: 8px 14px;
font-size: 12px;
border-right: none;
border-bottom: 3px solid transparent;
flex-shrink: 0;
align-items: center;
}
.nav-item--active {
border-right: none;
border-bottom: 3px solid var(--accent);
background: rgba(180, 154, 203, 0.12);
}
.admin-content {
padding: 14px;
}
.admin-topbar {
margin-bottom: 12px;
}
.topbar-title {
font-size: 16px;
}
}
</style>

1210
mengyastore-frontend/src/modules/admin/components/AdminChatPanel.vue
View File

File diff suppressed because it is too large Load Diff

310
mengyastore-frontend/src/modules/admin/components/AdminMaintenanceRow.vue
View File

@@ -1,155 +1,155 @@
<template>
<div class="maintenance-row">
<div class="maintenance-left">
<span class="maintenance-label">站点维护模式</span>
<button
:class="['maintenance-toggle', enabled ? 'toggle-on' : 'toggle-off']"
type="button"
@click="$emit('update:enabled', !enabled)"
>
{{ enabled ? '维护中' : '正常运行' }}
</button>
<span
v-if="message"
class="msg-tag"
:class="{ error: message.includes('失败') }"
>{{ message }}</span>
</div>
<div class="maintenance-right">
<input
:value="reason"
@input="$emit('update:reason', $event.target.value)"
class="maintenance-reason-input"
placeholder="维护原因（选填）"
/>
<button class="ghost" type="button" @click="$emit('save')">保存</button>
</div>
</div>
</template>
<script setup>
defineProps({
enabled: { type: Boolean, default: false },
reason: { type: String, default: '' },
message: { type: String, default: '' }
})
defineEmits(['update:enabled', 'update:reason', 'save'])
</script>
<style scoped>
.maintenance-row {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 16px;
padding: 14px 18px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--line);
border-radius: 8px;
}
.maintenance-left {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.maintenance-label {
font-size: 15px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.maintenance-toggle {
padding: 6px 16px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background 0.2s ease, transform 0.15s ease;
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
}
.toggle-on {
background: rgba(201, 90, 106, 0.15);
color: #c95a6a;
}
.toggle-on:hover {
background: rgba(201, 90, 106, 0.25);
}
.toggle-off {
background: rgba(100, 185, 140, 0.15);
color: #3a9a68;
}
.toggle-off:hover {
background: rgba(100, 185, 140, 0.25);
}
.maintenance-right {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
.maintenance-reason-input {
flex: 1;
min-width: 0;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.7);
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
font-size: 15px;
outline: none;
transition: border-color 0.2s ease;
}
.maintenance-reason-input:focus {
border-color: var(--accent);
}
.msg-tag {
font-size: 15px;
color: var(--accent-2);
padding: 4px 10px;
border-radius: 5px;
background: rgba(145, 168, 208, 0.1);
white-space: nowrap;
}
.msg-tag.error {
color: #c95a6a;
background: rgba(201, 90, 106, 0.08);
}
@media (max-width: 900px) {
.maintenance-row {
flex-direction: column;
align-items: stretch;
padding: 10px 12px;
gap: 10px;
}
.maintenance-right {
flex-direction: row;
flex-wrap: nowrap;
}
.maintenance-reason-input {
flex: 1;
min-width: 0;
font-size: 14px;
padding: 7px 10px;
}
}
</style>
<template>
<div class="maintenance-row">
<div class="maintenance-left">
<span class="maintenance-label">站点维护模式</span>
<button
:class="['maintenance-toggle', enabled ? 'toggle-on' : 'toggle-off']"
type="button"
@click="$emit('update:enabled', !enabled)"
>
{{ enabled ? '维护中' : '正常运行' }}
</button>
<span
v-if="message"
class="msg-tag"
:class="{ error: message.includes('失败') }"
>{{ message }}</span>
</div>
<div class="maintenance-right">
<input
:value="reason"
@input="$emit('update:reason', $event.target.value)"
class="maintenance-reason-input"
placeholder="维护原因（选填）"
/>
<button class="ghost" type="button" @click="$emit('save')">保存</button>
</div>
</div>
</template>
<script setup>
defineProps({
enabled: { type: Boolean, default: false },
reason: { type: String, default: '' },
message: { type: String, default: '' }
})
defineEmits(['update:enabled', 'update:reason', 'save'])
</script>
<style scoped>
.maintenance-row {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 16px;
padding: 14px 18px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--line);
border-radius: 8px;
}
.maintenance-left {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.maintenance-label {
font-size: 15px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.maintenance-toggle {
padding: 6px 16px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background 0.2s ease, transform 0.15s ease;
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
}
.toggle-on {
background: rgba(201, 90, 106, 0.15);
color: #c95a6a;
}
.toggle-on:hover {
background: rgba(201, 90, 106, 0.25);
}
.toggle-off {
background: rgba(100, 185, 140, 0.15);
color: #3a9a68;
}
.toggle-off:hover {
background: rgba(100, 185, 140, 0.25);
}
.maintenance-right {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
.maintenance-reason-input {
flex: 1;
min-width: 0;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.7);
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
font-size: 15px;
outline: none;
transition: border-color 0.2s ease;
}
.maintenance-reason-input:focus {
border-color: var(--accent);
}
.msg-tag {
font-size: 15px;
color: var(--accent-2);
padding: 4px 10px;
border-radius: 5px;
background: rgba(145, 168, 208, 0.1);
white-space: nowrap;
}
.msg-tag.error {
color: #c95a6a;
background: rgba(201, 90, 106, 0.08);
}
@media (max-width: 900px) {
.maintenance-row {
flex-direction: column;
align-items: stretch;
padding: 10px 12px;
gap: 10px;
}
.maintenance-right {
flex-direction: row;
flex-wrap: nowrap;
}
.maintenance-reason-input {
flex: 1;
min-width: 0;
font-size: 14px;
padding: 7px 10px;
}
}
</style>

808
mengyastore-frontend/src/modules/admin/components/AdminOrderTable.vue
View File

@@ -1,404 +1,404 @@
<template>
<div class="orders-section">
<div class="orders-header">
<h3>下单记录</h3>
<p class="tag">共 {{ orders.length }} 条订单（含未登录用户）</p>
</div>
<div v-if="orders.length === 0" class="empty-tip tag">暂无订单记录</div>
<div v-else class="table-wrap">
<!-- Pagination toolbar (top) -->
<div class="pagination-bar" v-if="totalPages > 1">
<button class="page-btn" :disabled="currentPage === 1" @click="currentPage--">‹</button>
<span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页（共 {{ orders.length }} 条）</span>
<button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage++">›</button>
</div>
<table class="table">
<thead>
<tr>
<th>商品</th>
<th>用户</th>
<th class="col-num">数量</th>
<th>发货</th>
<th>状态</th>
<th>下单时间</th>
<th class="col-action"></th>
</tr>
</thead>
<tbody>
<template v-for="order in pagedOrders" :key="order.id">
<tr :class="{ 'row-pending': order.status === 'pending' }">
<td>
<div class="order-product">
<span class="order-product-name">{{ order.productName }}</span>
<span class="order-id">{{ order.id }}</span>
</div>
</td>
<td>
<div v-if="order.userAccount" class="user-info">
<span class="user-name">{{ order.userName || order.userAccount }}</span>
<span class="user-account">{{ order.userAccount }}</span>
</div>
<span v-else class="anon-badge">匿名</span>
</td>
<td class="col-num">{{ order.quantity }}</td>
<td>
<span :class="['delivery-badge', order.deliveryMode === 'manual' ? 'delivery-manual' : 'delivery-auto']">
{{ order.deliveryMode === 'manual' ? '手动' : '自动' }}
</span>
</td>
<td>
<span :class="['status-badge', order.status === 'completed' ? 'status-done' : 'status-wait']">
{{ order.status === 'completed' ? '已完成' : '待付款' }}
</span>
</td>
<td class="col-time">{{ formatTime(order.createdAt) }}</td>
<td class="col-action">
<button class="del-btn" @click="remove(order.id)" title="删除此订单">✕</button>
</td>
</tr>
<tr v-if="order.note || order.contactPhone || order.contactEmail" class="extra-row">
<td colspan="7">
<div class="extra-info">
<span v-if="order.note" class="extra-item">
<span class="extra-label">备注：</span>{{ order.note }}
</span>
<span v-if="order.contactPhone" class="extra-item">
<span class="extra-label">手机：</span>{{ order.contactPhone }}
</span>
<span v-if="order.contactEmail" class="extra-item">
<span class="extra-label">邮箱：</span>{{ order.contactEmail }}
</span>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
const props = defineProps({
orders: { type: Array, default: () => [] }
})
const emit = defineEmits(['remove'])
const PAGE_SIZE = 10
const currentPage = ref(1)
const totalPages = computed(() => Math.max(1, Math.ceil(props.orders.length / PAGE_SIZE)))
const pagedOrders = computed(() => {
const start = (currentPage.value - 1) * PAGE_SIZE
return props.orders.slice(start, start + PAGE_SIZE)
})
// 订单列表变化时重置到第一页
watch(() => props.orders.length, () => { currentPage.value = 1 })
const remove = (id) => {
if (confirm('确认删除此订单记录？此操作不可撤销。')) {
emit('remove', id)
}
}
const formatTime = (iso) => {
if (!iso) return '-'
const d = new Date(iso)
return d.toLocaleString('zh-CN', { hour12: false })
}
</script>
<style scoped>
.orders-section {
margin-top: 28px;
}
.orders-header {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 12px;
}
.orders-header h3 {
font-size: 18px;
font-weight: 700;
color: var(--text);
}
.empty-tip {
padding: 20px 0;
text-align: center;
color: var(--muted);
}
.table-wrap {
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--line);
}
.table {
width: 100%;
border-collapse: collapse;
background: rgba(255, 255, 255, 0.45);
}
.table thead tr {
background: rgba(255, 255, 255, 0.7);
border-bottom: 2px solid var(--line);
}
.table th {
padding: 11px 14px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--muted);
}
.table td {
padding: 12px 14px;
font-size: 15px;
vertical-align: middle;
}
.table tbody tr {
border-bottom: 1px solid var(--line);
transition: background 0.15s ease;
}
.table tbody tr:last-child {
border-bottom: none;
}
.table tbody tr:hover {
background: rgba(255, 255, 255, 0.7);
}
.table tbody tr.row-pending {
opacity: 0.7;
}
.col-num {
text-align: center;
}
.col-time {
font-size: 13px;
color: var(--muted);
white-space: nowrap;
}
.order-product {
display: flex;
flex-direction: column;
gap: 2px;
}
.order-product-name {
font-weight: 600;
color: var(--text);
font-size: 15px;
}
.order-id {
font-size: 12px;
color: var(--muted);
font-family: monospace;
}
.user-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.user-name {
font-weight: 600;
font-size: 15px;
color: var(--text);
}
.user-account {
font-size: 12px;
color: var(--muted);
}
.anon-badge {
padding: 3px 10px;
border-radius: 999px;
background: rgba(140, 140, 145, 0.12);
color: var(--muted);
font-size: 13px;
}
.status-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
}
.status-done {
background: rgba(100, 185, 140, 0.15);
color: #3a9a68;
}
.status-wait {
background: rgba(220, 178, 90, 0.15);
color: #b87e20;
}
.delivery-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
.delivery-auto {
background: rgba(100, 185, 140, 0.12);
color: #3a9a68;
}
.delivery-manual {
background: rgba(90, 120, 200, 0.12);
color: #5a78c8;
}
.extra-row td {
padding: 6px 14px 10px;
background: rgba(250, 250, 255, 0.5);
}
.extra-info {
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
font-size: 13px;
color: var(--text);
}
.extra-item {
display: inline-flex;
gap: 3px;
}
.extra-label {
color: var(--muted);
font-weight: 600;
}
.col-action {
text-align: center;
width: 40px;
}
.del-btn {
background: none;
border: none;
color: var(--muted);
font-size: 13px;
cursor: pointer;
padding: 3px 6px;
border-radius: 4px;
line-height: 1;
transition: color 0.15s, background 0.15s;
}
.del-btn:hover {
color: #d64848;
background: rgba(214, 72, 72, 0.1);
}
.tag {
font-size: 14px;
color: var(--muted);
}
.pagination-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.7);
}
.page-btn {
padding: 4px 12px;
border-radius: 6px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.8);
font-size: 16px;
cursor: pointer;
color: var(--text);
font-family: inherit;
transition: background 0.15s;
line-height: 1;
}
.page-btn:disabled {
opacity: 0.35;
cursor: default;
}
.page-btn:not(:disabled):hover {
background: rgba(124, 106, 240, 0.1);
}
.page-info {
font-size: 13px;
color: var(--muted);
}
@media (max-width: 900px) {
.orders-section {
margin-top: 12px;
}
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table {
min-width: 560px;
}
.table th,
.table td {
padding: 7px 8px;
font-size: 12px;
}
.col-time {
display: none;
}
.pagination-bar {
padding: 6px 10px;
gap: 8px;
}
.page-info {
font-size: 12px;
}
.page-btn {
width: 28px;
height: 28px;
font-size: 16px;
}
}
</style>
<template>
<div class="orders-section">
<div class="orders-header">
<h3>下单记录</h3>
<p class="tag">共 {{ orders.length }} 条订单（含未登录用户）</p>
</div>
<div v-if="orders.length === 0" class="empty-tip tag">暂无订单记录</div>
<div v-else class="table-wrap">
<!-- Pagination toolbar (top) -->
<div class="pagination-bar" v-if="totalPages > 1">
<button class="page-btn" :disabled="currentPage === 1" @click="currentPage--">‹</button>
<span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页（共 {{ orders.length }} 条）</span>
<button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage++">›</button>
</div>
<table class="table">
<thead>
<tr>
<th>商品</th>
<th>用户</th>
<th class="col-num">数量</th>
<th>发货</th>
<th>状态</th>
<th>下单时间</th>
<th class="col-action"></th>
</tr>
</thead>
<tbody>
<template v-for="order in pagedOrders" :key="order.id">
<tr :class="{ 'row-pending': order.status === 'pending' }">
<td>
<div class="order-product">
<span class="order-product-name">{{ order.productName }}</span>
<span class="order-id">{{ order.id }}</span>
</div>
</td>
<td>
<div v-if="order.userAccount" class="user-info">
<span class="user-name">{{ order.userName || order.userAccount }}</span>
<span class="user-account">{{ order.userAccount }}</span>
</div>
<span v-else class="anon-badge">匿名</span>
</td>
<td class="col-num">{{ order.quantity }}</td>
<td>
<span :class="['delivery-badge', order.deliveryMode === 'manual' ? 'delivery-manual' : 'delivery-auto']">
{{ order.deliveryMode === 'manual' ? '手动' : '自动' }}
</span>
</td>
<td>
<span :class="['status-badge', order.status === 'completed' ? 'status-done' : 'status-wait']">
{{ order.status === 'completed' ? '已完成' : '待付款' }}
</span>
</td>
<td class="col-time">{{ formatTime(order.createdAt) }}</td>
<td class="col-action">
<button class="del-btn" @click="remove(order.id)" title="删除此订单">✕</button>
</td>
</tr>
<tr v-if="order.note || order.contactPhone || order.contactEmail" class="extra-row">
<td colspan="7">
<div class="extra-info">
<span v-if="order.note" class="extra-item">
<span class="extra-label">备注：</span>{{ order.note }}
</span>
<span v-if="order.contactPhone" class="extra-item">
<span class="extra-label">手机：</span>{{ order.contactPhone }}
</span>
<span v-if="order.contactEmail" class="extra-item">
<span class="extra-label">邮箱：</span>{{ order.contactEmail }}
</span>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
const props = defineProps({
orders: { type: Array, default: () => [] }
})
const emit = defineEmits(['remove'])
const PAGE_SIZE = 10
const currentPage = ref(1)
const totalPages = computed(() => Math.max(1, Math.ceil(props.orders.length / PAGE_SIZE)))
const pagedOrders = computed(() => {
const start = (currentPage.value - 1) * PAGE_SIZE
return props.orders.slice(start, start + PAGE_SIZE)
})
// 订单列表变化时重置到第一页
watch(() => props.orders.length, () => { currentPage.value = 1 })
const remove = (id) => {
if (confirm('确认删除此订单记录？此操作不可撤销。')) {
emit('remove', id)
}
}
const formatTime = (iso) => {
if (!iso) return '-'
const d = new Date(iso)
return d.toLocaleString('zh-CN', { hour12: false })
}
</script>
<style scoped>
.orders-section {
margin-top: 28px;
}
.orders-header {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 12px;
}
.orders-header h3 {
font-size: 18px;
font-weight: 700;
color: var(--text);
}
.empty-tip {
padding: 20px 0;
text-align: center;
color: var(--muted);
}
.table-wrap {
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--line);
}
.table {
width: 100%;
border-collapse: collapse;
background: rgba(255, 255, 255, 0.45);
}
.table thead tr {
background: rgba(255, 255, 255, 0.7);
border-bottom: 2px solid var(--line);
}
.table th {
padding: 11px 14px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--muted);
}
.table td {
padding: 12px 14px;
font-size: 15px;
vertical-align: middle;
}
.table tbody tr {
border-bottom: 1px solid var(--line);
transition: background 0.15s ease;
}
.table tbody tr:last-child {
border-bottom: none;
}
.table tbody tr:hover {
background: rgba(255, 255, 255, 0.7);
}
.table tbody tr.row-pending {
opacity: 0.7;
}
.col-num {
text-align: center;
}
.col-time {
font-size: 13px;
color: var(--muted);
white-space: nowrap;
}
.order-product {
display: flex;
flex-direction: column;
gap: 2px;
}
.order-product-name {
font-weight: 600;
color: var(--text);
font-size: 15px;
}
.order-id {
font-size: 12px;
color: var(--muted);
font-family: monospace;
}
.user-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.user-name {
font-weight: 600;
font-size: 15px;
color: var(--text);
}
.user-account {
font-size: 12px;
color: var(--muted);
}
.anon-badge {
padding: 3px 10px;
border-radius: 999px;
background: rgba(140, 140, 145, 0.12);
color: var(--muted);
font-size: 13px;
}
.status-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
}
.status-done {
background: rgba(100, 185, 140, 0.15);
color: #3a9a68;
}
.status-wait {
background: rgba(220, 178, 90, 0.15);
color: #b87e20;
}
.delivery-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
.delivery-auto {
background: rgba(100, 185, 140, 0.12);
color: #3a9a68;
}
.delivery-manual {
background: rgba(90, 120, 200, 0.12);
color: #5a78c8;
}
.extra-row td {
padding: 6px 14px 10px;
background: rgba(250, 250, 255, 0.5);
}
.extra-info {
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
font-size: 13px;
color: var(--text);
}
.extra-item {
display: inline-flex;
gap: 3px;
}
.extra-label {
color: var(--muted);
font-weight: 600;
}
.col-action {
text-align: center;
width: 40px;
}
.del-btn {
background: none;
border: none;
color: var(--muted);
font-size: 13px;
cursor: pointer;
padding: 3px 6px;
border-radius: 4px;
line-height: 1;
transition: color 0.15s, background 0.15s;
}
.del-btn:hover {
color: #d64848;
background: rgba(214, 72, 72, 0.1);
}
.tag {
font-size: 14px;
color: var(--muted);
}
.pagination-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.7);
}
.page-btn {
padding: 4px 12px;
border-radius: 6px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.8);
font-size: 16px;
cursor: pointer;
color: var(--text);
font-family: inherit;
transition: background 0.15s;
line-height: 1;
}
.page-btn:disabled {
opacity: 0.35;
cursor: default;
}
.page-btn:not(:disabled):hover {
background: rgba(124, 106, 240, 0.1);
}
.page-info {
font-size: 13px;
color: var(--muted);
}
@media (max-width: 900px) {
.orders-section {
margin-top: 12px;
}
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table {
min-width: 560px;
}
.table th,
.table td {
padding: 7px 8px;
font-size: 12px;
}
.col-time {
display: none;
}
.pagination-bar {
padding: 6px 10px;
gap: 8px;
}
.page-info {
font-size: 12px;
}
.page-btn {
width: 28px;
height: 28px;
font-size: 16px;
}
}
</style>

862
mengyastore-frontend/src/modules/admin/components/AdminProductModal.vue
View File

@@ -1,431 +1,431 @@
<template>
<div v-if="open" class="modal-mask" @click.self="$emit('close')">
<section class="modal-card">
<div class="modal-header">
<div>
<h3>{{ form.id ? '编辑商品' : '添加新商品' }}</h3>
<p class="tag">封面图和最多 5 张商品截图共用这一套编辑表单。</p>
</div>
<button class="ghost" @click="$emit('close')">关闭</button>
</div>
<div class="modal-body">
<div class="form-field">
<label>商品名称</label>
<input v-model="form.name" placeholder="商品名称" />
</div>
<div class="form-row">
<div class="form-field">
<label>原价（元）</label>
<input v-model.number="form.price" type="number" step="0.01" />
</div>
<div class="form-field">
<label>折扣价（元，可选）</label>
<input v-model.number="form.discountPrice" type="number" step="0.01" />
<p class="tag">留空或不小于原价时，将不启用折扣。</p>
</div>
</div>
<div class="form-field">
<label>封面链接（http）</label>
<input v-model="form.coverUrl" placeholder="http://..." />
</div>
<div class="form-field">
<div class="field-head">
<label>商品库存</label>
<span class="tag">共 {{ form.inventoryItems.length }} 条</span>
<button class="ghost small" type="button" @click="addInventoryItem">添加商品库存</button>
</div>
<p class="tag">每个输入框保存一条可发放内容，购买后会直接展示给用户。</p>
<div class="inventory-list">
<div v-for="(_, index) in form.inventoryItems" :key="index" class="inventory-row">
<input
:ref="(el) => setInventoryInputRef(el, index)"
v-model="form.inventoryItems[index]"
placeholder="库存内容，可填卡密、下载链接等"
/>
<button
v-if="form.inventoryItems.length > 1"
class="ghost small"
type="button"
@click="removeInventoryItem(index)"
>
删除
</button>
</div>
</div>
</div>
<div class="form-field">
<label>商品截图链接（最多 5 个）</label>
<div class="screenshot-grid">
<input
v-for="(_, index) in screenshotInputSlots"
:key="index"
v-model="form.screenshotUrls[index]"
:placeholder="`截图链接 ${index + 1}（http://...）`"
/>
</div>
</div>
<div class="form-field">
<label>商品介绍（Markdown）</label>
<textarea v-model="form.description"></textarea>
</div>
<div class="form-field">
<label>商品标签（英文逗号分隔）</label>
<input v-model="form.tagsText" placeholder="例如: chatgpt, linux, 域名" />
<p class="tag">用于前端搜索与筛选，多个标签用英文逗号分开</p>
</div>
<div class="form-field">
<label>是否上架</label>
<select v-model="form.active">
<option :value="true">上架</option>
<option :value="false">下架</option>
</select>
</div>
<div class="form-row">
<div class="form-field">
<label>
<input type="checkbox" v-model="form.requireLogin" class="inline-checkbox" />
需要登录才能购买
</label>
<p class="tag">开启后未登录用户将无法完成购买</p>
</div>
<div class="form-field">
<label>每账户最多购买数量（0 = 不限）</label>
<input v-model.number="form.maxPerAccount" type="number" min="0" step="1" placeholder="0 表示不限制" />
</div>
</div>
<div class="form-row">
<div class="form-field">
<label>发货模式</label>
<select v-model="form.deliveryMode">
<option value="auto">自动发货（下单后自动提取内容）</option>
<option value="manual">手动发货（管理员手动处理）</option>
</select>
<p class="tag">手动发货不会自动提取库存内容</p>
</div>
</div>
<div class="form-row">
<div class="form-field">
<label>
<input type="checkbox" v-model="form.showNote" class="inline-checkbox" />
下单时显示备注输入框
</label>
</div>
<div class="form-field">
<label>
<input type="checkbox" v-model="form.showContact" class="inline-checkbox" />
下单时显示联系方式输入框
</label>
<p class="tag">包含手机号和邮箱两个输入框</p>
</div>
</div>
</div>
<div class="modal-actions">
<button class="primary" @click="handleSubmit">{{ form.id ? '更新商品' : '新增商品' }}</button>
<button class="ghost" @click="resetForm">重置表单</button>
</div>
</section>
</div>
</template>
<script setup>
import { nextTick, reactive, ref, watch } from 'vue'
const MAX_SCREENSHOT_URLS = 5
const MAX_INVENTORY_ITEMS = 500
const screenshotInputSlots = Array.from({ length: MAX_SCREENSHOT_URLS })
const inventoryInputRefs = ref([])
const props = defineProps({
open: { type: Boolean, default: false },
editItem: { type: Object, default: null }
})
const emit = defineEmits(['close', 'submit'])
const createScreenshotSlots = (values = []) =>
Array.from({ length: MAX_SCREENSHOT_URLS }, (_, i) => values[i] || '')
const createInventoryItems = (values = []) => {
const items = values
.map((v) => (v || '').trim())
.filter((v) => v)
.slice(0, MAX_INVENTORY_ITEMS)
return items.length ? items : ['']
}
const normalizeInventoryItems = (values = []) =>
values
.map((item) => (item || '').trim())
.filter((item) => item)
.slice(0, MAX_INVENTORY_ITEMS)
const normalizeScreenshotUrls = (values = []) =>
values.map((item) => item.trim()).filter(Boolean).slice(0, MAX_SCREENSHOT_URLS)
const makeEmptyForm = () => ({
id: '',
name: '',
price: 0,
discountPrice: 0,
tagsText: '',
coverUrl: '',
screenshotUrls: createScreenshotSlots(),
inventoryItems: createInventoryItems(),
description: '',
active: true,
requireLogin: false,
maxPerAccount: 0,
deliveryMode: 'auto',
showNote: false,
showContact: false
})
const form = reactive(makeEmptyForm())
const fillForm = (item) => {
Object.assign(form, {
id: item?.id || '',
name: item?.name || '',
price: item?.price || 0,
discountPrice: item?.discountPrice || 0,
tagsText: (item?.tags || []).join(','),
coverUrl: item?.coverUrl || '',
screenshotUrls: createScreenshotSlots(item?.screenshotUrls || []),
inventoryItems: createInventoryItems(item?.codes || []),
description: item?.description || '',
active: item?.active ?? true,
requireLogin: item?.requireLogin ?? false,
maxPerAccount: item?.maxPerAccount ?? 0,
deliveryMode: item?.deliveryMode || 'auto',
showNote: item?.showNote ?? false,
showContact: item?.showContact ?? false
})
}
const resetForm = () => {
Object.assign(form, makeEmptyForm())
}
watch(
() => props.editItem,
(item) => {
if (item) {
fillForm(item)
} else {
resetForm()
}
},
{ immediate: true }
)
const setInventoryInputRef = (el, index) => {
if (!el) return
inventoryInputRefs.value[index] = el
}
const addInventoryItem = async () => {
form.inventoryItems.push('')
await nextTick()
const lastIndex = form.inventoryItems.length - 1
const input = inventoryInputRefs.value[lastIndex]
if (input?.focus) input.focus()
if (input?.scrollIntoView) input.scrollIntoView({ block: 'center', behavior: 'smooth' })
}
const removeInventoryItem = async (index) => {
if (form.inventoryItems.length <= 1) {
form.inventoryItems[0] = ''
return
}
form.inventoryItems.splice(index, 1)
inventoryInputRefs.value.splice(index, 1)
await nextTick()
const targetIndex = Math.min(index, form.inventoryItems.length - 1)
const input = inventoryInputRefs.value[targetIndex]
if (input?.focus) input.focus()
}
const handleSubmit = () => {
emit('submit', {
id: form.id,
name: form.name,
price: form.price,
discountPrice: form.discountPrice || 0,
tags: form.tagsText,
coverUrl: form.coverUrl,
codes: normalizeInventoryItems(form.inventoryItems),
screenshotUrls: normalizeScreenshotUrls(form.screenshotUrls),
description: form.description,
active: form.active,
requireLogin: form.requireLogin,
maxPerAccount: form.maxPerAccount || 0,
deliveryMode: form.deliveryMode || 'auto',
showNote: form.showNote,
showContact: form.showContact
})
}
</script>
<style scoped>
.modal-mask {
position: fixed;
inset: 0;
z-index: 40;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(30, 28, 32, 0.35);
backdrop-filter: blur(8px);
}
.modal-card {
width: min(920px, 100%);
max-height: calc(100vh - 48px);
overflow: auto;
padding: 28px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--line);
box-shadow: 0 24px 60px rgba(33, 33, 40, 0.2);
}
.modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 22px;
}
.modal-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.modal-actions {
display: flex;
gap: 12px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.form-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.form-field input,
.form-field textarea {
border-radius: 8px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.7);
padding: 10px 12px;
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
}
.form-field textarea {
min-height: 120px;
resize: vertical;
}
select {
border-radius: 8px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.7);
padding: 10px 12px;
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
font-size: 15px;
}
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.field-head {
display: flex;
align-items: center;
gap: 12px;
}
.inventory-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.inventory-row {
display: flex;
align-items: center;
gap: 8px;
}
.inventory-row input {
flex: 1;
}
.screenshot-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.small {
padding: 7px 13px;
font-size: 13px;
border-radius: 999px;
}
.tag {
font-size: 14px;
color: var(--muted);
}
.inline-checkbox {
width: auto;
margin-right: 6px;
accent-color: var(--accent);
cursor: pointer;
}
.form-field label {
display: flex;
align-items: center;
font-weight: 600;
color: var(--text);
cursor: default;
}
@media (max-width: 900px) {
.modal-mask {
padding: 12px;
}
.modal-card {
padding: 18px;
max-height: calc(100vh - 24px);
}
.form-row,
.screenshot-grid {
grid-template-columns: 1fr;
}
.field-head {
flex-wrap: wrap;
}
.inventory-row {
flex-direction: column;
align-items: stretch;
}
}
</style>
<template>
<div v-if="open" class="modal-mask" @click.self="$emit('close')">
<section class="modal-card">
<div class="modal-header">
<div>
<h3>{{ form.id ? '编辑商品' : '添加新商品' }}</h3>
<p class="tag">封面图和最多 5 张商品截图共用这一套编辑表单。</p>
</div>
<button class="ghost" @click="$emit('close')">关闭</button>
</div>
<div class="modal-body">
<div class="form-field">
<label>商品名称</label>
<input v-model="form.name" placeholder="商品名称" />
</div>
<div class="form-row">
<div class="form-field">
<label>原价（元）</label>
<input v-model.number="form.price" type="number" step="0.01" />
</div>
<div class="form-field">
<label>折扣价（元，可选）</label>
<input v-model.number="form.discountPrice" type="number" step="0.01" />
<p class="tag">留空或不小于原价时，将不启用折扣。</p>
</div>
</div>
<div class="form-field">
<label>封面链接（http）</label>
<input v-model="form.coverUrl" placeholder="http://..." />
</div>
<div class="form-field">
<div class="field-head">
<label>商品库存</label>
<span class="tag">共 {{ form.inventoryItems.length }} 条</span>
<button class="ghost small" type="button" @click="addInventoryItem">添加商品库存</button>
</div>
<p class="tag">每个输入框保存一条可发放内容，购买后会直接展示给用户。</p>
<div class="inventory-list">
<div v-for="(_, index) in form.inventoryItems" :key="index" class="inventory-row">
<input
:ref="(el) => setInventoryInputRef(el, index)"
v-model="form.inventoryItems[index]"
placeholder="库存内容，可填卡密、下载链接等"
/>
<button
v-if="form.inventoryItems.length > 1"
class="ghost small"
type="button"
@click="removeInventoryItem(index)"
>
删除
</button>
</div>
</div>
</div>
<div class="form-field">
<label>商品截图链接（最多 5 个）</label>
<div class="screenshot-grid">
<input
v-for="(_, index) in screenshotInputSlots"
:key="index"
v-model="form.screenshotUrls[index]"
:placeholder="`截图链接 ${index + 1}（http://...）`"
/>
</div>
</div>
<div class="form-field">
<label>商品介绍（Markdown）</label>
<textarea v-model="form.description"></textarea>
</div>
<div class="form-field">
<label>商品标签（英文逗号分隔）</label>
<input v-model="form.tagsText" placeholder="例如: chatgpt, linux, 域名" />
<p class="tag">用于前端搜索与筛选，多个标签用英文逗号分开</p>
</div>
<div class="form-field">
<label>是否上架</label>
<select v-model="form.active">
<option :value="true">上架</option>
<option :value="false">下架</option>
</select>
</div>
<div class="form-row">
<div class="form-field">
<label>
<input type="checkbox" v-model="form.requireLogin" class="inline-checkbox" />
需要登录才能购买
</label>
<p class="tag">开启后未登录用户将无法完成购买</p>
</div>
<div class="form-field">
<label>每账户最多购买数量（0 = 不限）</label>
<input v-model.number="form.maxPerAccount" type="number" min="0" step="1" placeholder="0 表示不限制" />
</div>
</div>
<div class="form-row">
<div class="form-field">
<label>发货模式</label>
<select v-model="form.deliveryMode">
<option value="auto">自动发货（下单后自动提取内容）</option>
<option value="manual">手动发货（管理员手动处理）</option>
</select>
<p class="tag">手动发货不会自动提取库存内容</p>
</div>
</div>
<div class="form-row">
<div class="form-field">
<label>
<input type="checkbox" v-model="form.showNote" class="inline-checkbox" />
下单时显示备注输入框
</label>
</div>
<div class="form-field">
<label>
<input type="checkbox" v-model="form.showContact" class="inline-checkbox" />
下单时显示联系方式输入框
</label>
<p class="tag">包含手机号和邮箱两个输入框</p>
</div>
</div>
</div>
<div class="modal-actions">
<button class="primary" @click="handleSubmit">{{ form.id ? '更新商品' : '新增商品' }}</button>
<button class="ghost" @click="resetForm">重置表单</button>
</div>
</section>
</div>
</template>
<script setup>
import { nextTick, reactive, ref, watch } from 'vue'
const MAX_SCREENSHOT_URLS = 5
const MAX_INVENTORY_ITEMS = 500
const screenshotInputSlots = Array.from({ length: MAX_SCREENSHOT_URLS })
const inventoryInputRefs = ref([])
const props = defineProps({
open: { type: Boolean, default: false },
editItem: { type: Object, default: null }
})
const emit = defineEmits(['close', 'submit'])
const createScreenshotSlots = (values = []) =>
Array.from({ length: MAX_SCREENSHOT_URLS }, (_, i) => values[i] || '')
const createInventoryItems = (values = []) => {
const items = values
.map((v) => (v || '').trim())
.filter((v) => v)
.slice(0, MAX_INVENTORY_ITEMS)
return items.length ? items : ['']
}
const normalizeInventoryItems = (values = []) =>
values
.map((item) => (item || '').trim())
.filter((item) => item)
.slice(0, MAX_INVENTORY_ITEMS)
const normalizeScreenshotUrls = (values = []) =>
values.map((item) => item.trim()).filter(Boolean).slice(0, MAX_SCREENSHOT_URLS)
const makeEmptyForm = () => ({
id: '',
name: '',
price: 0,
discountPrice: 0,
tagsText: '',
coverUrl: '',
screenshotUrls: createScreenshotSlots(),
inventoryItems: createInventoryItems(),
description: '',
active: true,
requireLogin: false,
maxPerAccount: 0,
deliveryMode: 'auto',
showNote: false,
showContact: false
})
const form = reactive(makeEmptyForm())
const fillForm = (item) => {
Object.assign(form, {
id: item?.id || '',
name: item?.name || '',
price: item?.price || 0,
discountPrice: item?.discountPrice || 0,
tagsText: (item?.tags || []).join(','),
coverUrl: item?.coverUrl || '',
screenshotUrls: createScreenshotSlots(item?.screenshotUrls || []),
inventoryItems: createInventoryItems(item?.codes || []),
description: item?.description || '',
active: item?.active ?? true,
requireLogin: item?.requireLogin ?? false,
maxPerAccount: item?.maxPerAccount ?? 0,
deliveryMode: item?.deliveryMode || 'auto',
showNote: item?.showNote ?? false,
showContact: item?.showContact ?? false
})
}
const resetForm = () => {
Object.assign(form, makeEmptyForm())
}
watch(
() => props.editItem,
(item) => {
if (item) {
fillForm(item)
} else {
resetForm()
}
},
{ immediate: true }
)
const setInventoryInputRef = (el, index) => {
if (!el) return
inventoryInputRefs.value[index] = el
}
const addInventoryItem = async () => {
form.inventoryItems.push('')
await nextTick()
const lastIndex = form.inventoryItems.length - 1
const input = inventoryInputRefs.value[lastIndex]
if (input?.focus) input.focus()
if (input?.scrollIntoView) input.scrollIntoView({ block: 'center', behavior: 'smooth' })
}
const removeInventoryItem = async (index) => {
if (form.inventoryItems.length <= 1) {
form.inventoryItems[0] = ''
return
}
form.inventoryItems.splice(index, 1)
inventoryInputRefs.value.splice(index, 1)
await nextTick()
const targetIndex = Math.min(index, form.inventoryItems.length - 1)
const input = inventoryInputRefs.value[targetIndex]
if (input?.focus) input.focus()
}
const handleSubmit = () => {
emit('submit', {
id: form.id,
name: form.name,
price: form.price,
discountPrice: form.discountPrice || 0,
tags: form.tagsText,
coverUrl: form.coverUrl,
codes: normalizeInventoryItems(form.inventoryItems),
screenshotUrls: normalizeScreenshotUrls(form.screenshotUrls),
description: form.description,
active: form.active,
requireLogin: form.requireLogin,
maxPerAccount: form.maxPerAccount || 0,
deliveryMode: form.deliveryMode || 'auto',
showNote: form.showNote,
showContact: form.showContact
})
}
</script>
<style scoped>
.modal-mask {
position: fixed;
inset: 0;
z-index: 40;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(30, 28, 32, 0.35);
backdrop-filter: blur(8px);
}
.modal-card {
width: min(920px, 100%);
max-height: calc(100vh - 48px);
overflow: auto;
padding: 28px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--line);
box-shadow: 0 24px 60px rgba(33, 33, 40, 0.2);
}
.modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 22px;
}
.modal-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.modal-actions {
display: flex;
gap: 12px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.form-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.form-field input,
.form-field textarea {
border-radius: 8px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.7);
padding: 10px 12px;
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
}
.form-field textarea {
min-height: 120px;
resize: vertical;
}
select {
border-radius: 8px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.7);
padding: 10px 12px;
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
font-size: 15px;
}
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.field-head {
display: flex;
align-items: center;
gap: 12px;
}
.inventory-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.inventory-row {
display: flex;
align-items: center;
gap: 8px;
}
.inventory-row input {
flex: 1;
}
.screenshot-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.small {
padding: 7px 13px;
font-size: 13px;
border-radius: 999px;
}
.tag {
font-size: 14px;
color: var(--muted);
}
.inline-checkbox {
width: auto;
margin-right: 6px;
accent-color: var(--accent);
cursor: pointer;
}
.form-field label {
display: flex;
align-items: center;
font-weight: 600;
color: var(--text);
cursor: default;
}
@media (max-width: 900px) {
.modal-mask {
padding: 12px;
}
.modal-card {
padding: 18px;
max-height: calc(100vh - 24px);
}
.form-row,
.screenshot-grid {
grid-template-columns: 1fr;
}
.field-head {
flex-wrap: wrap;
}
.inventory-row {
flex-direction: column;
align-items: stretch;
}
}
</style>

634
mengyastore-frontend/src/modules/admin/components/AdminProductTable.vue
View File

@@ -1,317 +1,317 @@
<template>
<div class="table-wrap">
<table class="table">
<thead>
<tr>
<th>商品</th>
<th>价格</th>
<th class="col-num">库存</th>
<th class="col-num">浏览量</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in products" :key="item.id" :class="{ 'row-inactive': !item.active }">
<td>
<div class="admin-product-cell">
<img class="admin-product-thumb" :src="item.coverUrl" :alt="item.name" />
<div class="admin-product-info">
<span class="product-name">{{ item.name }}</span>
<span class="product-id">{{ item.id }}</span>
</div>
</div>
</td>
<td>
<div v-if="item.price === 0" class="price-cell">
<span class="price-free">免费</span>
</div>
<div
v-else-if="item.discountPrice > 0 && item.discountPrice < item.price"
class="price-cell"
>
<span class="price-original">¥{{ item.price.toFixed(2) }}</span>
<span class="price-discount">¥{{ item.discountPrice.toFixed(2) }}</span>
</div>
<span v-else class="price-normal">¥{{ item.price.toFixed(2) }}</span>
</td>
<td class="col-num">
<span :class="['stock-badge', item.quantity === 0 ? 'stock-empty' : 'stock-ok']">
{{ item.quantity }}
</span>
</td>
<td class="col-num">
<span class="view-count">{{ item.viewCount || 0 }}</span>
</td>
<td>
<span :class="['status-badge', item.active ? 'status-on' : 'status-off']">
{{ item.active ? '上架' : '下架' }}
</span>
</td>
<td>
<div class="row-actions">
<button class="act-edit" @click="$emit('edit', item)">编辑</button>
<button class="act-toggle" @click="$emit('toggle', item)">
{{ item.active ? '下架' : '上架' }}
</button>
<button class="act-delete" @click="$emit('remove', item)">删除</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
defineProps({
products: { type: Array, default: () => [] }
})
defineEmits(['edit', 'toggle', 'remove'])
</script>
<style scoped>
.table-wrap {
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--line);
}
.table {
width: 100%;
border-collapse: collapse;
background: rgba(255, 255, 255, 0.45);
}
.table thead tr {
background: rgba(255, 255, 255, 0.7);
border-bottom: 2px solid var(--line);
}
.table th {
padding: 12px 16px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--muted);
}
.table td {
padding: 14px 16px;
font-size: 16px;
vertical-align: middle;
}
.table tbody tr {
border-bottom: 1px solid var(--line);
transition: background 0.15s ease;
}
.table tbody tr:last-child {
border-bottom: none;
}
.table tbody tr:hover {
background: rgba(255, 255, 255, 0.7);
}
.table tbody tr.row-inactive {
opacity: 0.55;
}
.col-num {
text-align: center;
}
.admin-product-cell {
display: flex;
align-items: center;
gap: 12px;
}
.admin-product-thumb {
width: 48px;
height: 48px;
border-radius: 6px;
object-fit: cover;
border: 1px solid var(--line);
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(33, 33, 40, 0.1);
}
.admin-product-info {
display: flex;
flex-direction: column;
gap: 3px;
}
.product-name {
font-size: 16px;
font-weight: 600;
color: var(--text);
}
.product-id {
font-size: 13px;
color: var(--muted);
font-family: monospace;
}
.price-cell {
display: flex;
flex-direction: column;
gap: 2px;
}
.price-original {
text-decoration: line-through;
color: var(--muted);
font-size: 14px;
}
.price-discount {
font-weight: 700;
color: #e8826a;
font-size: 17px;
}
.price-free {
font-weight: 900;
color: #3a9a68;
font-size: 17px;
}
.price-normal {
font-weight: 600;
color: var(--text);
}
.stock-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 15px;
font-weight: 600;
}
.stock-ok {
background: rgba(100, 185, 140, 0.15);
color: #3a9a68;
}
.stock-empty {
background: rgba(201, 90, 106, 0.12);
color: #c95a6a;
}
.view-count {
color: var(--muted);
font-size: 15px;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
}
.status-on {
background: rgba(100, 185, 140, 0.15);
color: #3a9a68;
}
.status-off {
background: rgba(140, 140, 145, 0.12);
color: var(--muted);
}
.row-actions {
display: flex;
gap: 6px;
align-items: center;
}
.act-edit,
.act-toggle,
.act-delete {
padding: 6px 12px;
border-radius: 5px;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: opacity 0.15s ease, transform 0.15s ease;
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
}
.act-edit {
background: rgba(145, 168, 208, 0.15);
color: var(--accent-2);
}
.act-edit:hover {
background: rgba(145, 168, 208, 0.28);
}
.act-toggle {
background: rgba(180, 154, 203, 0.12);
color: var(--accent);
}
.act-toggle:hover {
background: rgba(180, 154, 203, 0.24);
}
.act-delete {
background: rgba(201, 90, 106, 0.1);
color: #c95a6a;
}
.act-delete:hover {
background: rgba(201, 90, 106, 0.2);
}
@media (max-width: 900px) {
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table {
min-width: 580px;
}
.table th,
.table td {
padding: 8px 10px;
font-size: 13px;
}
.admin-product-thumb {
width: 36px;
height: 36px;
}
.product-name {
font-size: 13px;
}
.product-id {
font-size: 11px;
}
.act-edit,
.act-toggle,
.act-delete {
padding: 4px 8px;
font-size: 12px;
}
}
</style>
<template>
<div class="table-wrap">
<table class="table">
<thead>
<tr>
<th>商品</th>
<th>价格</th>
<th class="col-num">库存</th>
<th class="col-num">浏览量</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in products" :key="item.id" :class="{ 'row-inactive': !item.active }">
<td>
<div class="admin-product-cell">
<img class="admin-product-thumb" :src="item.coverUrl" :alt="item.name" />
<div class="admin-product-info">
<span class="product-name">{{ item.name }}</span>
<span class="product-id">{{ item.id }}</span>
</div>
</div>
</td>
<td>
<div v-if="item.price === 0" class="price-cell">
<span class="price-free">免费</span>
</div>
<div
v-else-if="item.discountPrice > 0 && item.discountPrice < item.price"
class="price-cell"
>
<span class="price-original">¥{{ item.price.toFixed(2) }}</span>
<span class="price-discount">¥{{ item.discountPrice.toFixed(2) }}</span>
</div>
<span v-else class="price-normal">¥{{ item.price.toFixed(2) }}</span>
</td>
<td class="col-num">
<span :class="['stock-badge', item.quantity === 0 ? 'stock-empty' : 'stock-ok']">
{{ item.quantity }}
</span>
</td>
<td class="col-num">
<span class="view-count">{{ item.viewCount || 0 }}</span>
</td>
<td>
<span :class="['status-badge', item.active ? 'status-on' : 'status-off']">
{{ item.active ? '上架' : '下架' }}
</span>
</td>
<td>
<div class="row-actions">
<button class="act-edit" @click="$emit('edit', item)">编辑</button>
<button class="act-toggle" @click="$emit('toggle', item)">
{{ item.active ? '下架' : '上架' }}
</button>
<button class="act-delete" @click="$emit('remove', item)">删除</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
defineProps({
products: { type: Array, default: () => [] }
})
defineEmits(['edit', 'toggle', 'remove'])
</script>
<style scoped>
.table-wrap {
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--line);
}
.table {
width: 100%;
border-collapse: collapse;
background: rgba(255, 255, 255, 0.45);
}
.table thead tr {
background: rgba(255, 255, 255, 0.7);
border-bottom: 2px solid var(--line);
}
.table th {
padding: 12px 16px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--muted);
}
.table td {
padding: 14px 16px;
font-size: 16px;
vertical-align: middle;
}
.table tbody tr {
border-bottom: 1px solid var(--line);
transition: background 0.15s ease;
}
.table tbody tr:last-child {
border-bottom: none;
}
.table tbody tr:hover {
background: rgba(255, 255, 255, 0.7);
}
.table tbody tr.row-inactive {
opacity: 0.55;
}
.col-num {
text-align: center;
}
.admin-product-cell {
display: flex;
align-items: center;
gap: 12px;
}
.admin-product-thumb {
width: 48px;
height: 48px;
border-radius: 6px;
object-fit: cover;
border: 1px solid var(--line);
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(33, 33, 40, 0.1);
}
.admin-product-info {
display: flex;
flex-direction: column;
gap: 3px;
}
.product-name {
font-size: 16px;
font-weight: 600;
color: var(--text);
}
.product-id {
font-size: 13px;
color: var(--muted);
font-family: monospace;
}
.price-cell {
display: flex;
flex-direction: column;
gap: 2px;
}
.price-original {
text-decoration: line-through;
color: var(--muted);
font-size: 14px;
}
.price-discount {
font-weight: 700;
color: #e8826a;
font-size: 17px;
}
.price-free {
font-weight: 900;
color: #3a9a68;
font-size: 17px;
}
.price-normal {
font-weight: 600;
color: var(--text);
}
.stock-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 15px;
font-weight: 600;
}
.stock-ok {
background: rgba(100, 185, 140, 0.15);
color: #3a9a68;
}
.stock-empty {
background: rgba(201, 90, 106, 0.12);
color: #c95a6a;
}
.view-count {
color: var(--muted);
font-size: 15px;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
}
.status-on {
background: rgba(100, 185, 140, 0.15);
color: #3a9a68;
}
.status-off {
background: rgba(140, 140, 145, 0.12);
color: var(--muted);
}
.row-actions {
display: flex;
gap: 6px;
align-items: center;
}
.act-edit,
.act-toggle,
.act-delete {
padding: 6px 12px;
border-radius: 5px;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: opacity 0.15s ease, transform 0.15s ease;
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
}
.act-edit {
background: rgba(145, 168, 208, 0.15);
color: var(--accent-2);
}
.act-edit:hover {
background: rgba(145, 168, 208, 0.28);
}
.act-toggle {
background: rgba(180, 154, 203, 0.12);
color: var(--accent);
}
.act-toggle:hover {
background: rgba(180, 154, 203, 0.24);
}
.act-delete {
background: rgba(201, 90, 106, 0.1);
color: #c95a6a;
}
.act-delete:hover {
background: rgba(201, 90, 106, 0.2);
}
@media (max-width: 900px) {
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table {
min-width: 580px;
}
.table th,
.table td {
padding: 8px 10px;
font-size: 13px;
}
.admin-product-thumb {
width: 36px;
height: 36px;
}
.product-name {
font-size: 13px;
}
.product-id {
font-size: 11px;
}
.act-edit,
.act-toggle,
.act-delete {
padding: 4px 8px;
font-size: 12px;
}
}
</style>

478
mengyastore-frontend/src/modules/admin/components/AdminSMTPRow.vue
View File

@@ -1,239 +1,239 @@
<template>
<div class="smtp-row">
<div class="smtp-header">
<span class="smtp-label">邮件通知配置</span>
<span class="smtp-desc tag">下单/发货时自动给用户发送通知邮件（支持 QQ / 163 / Gmail / 自定义域名邮箱）</span>
<span v-if="message" class="msg-tag" :class="{ error: message.includes('失败') }">{{ message }}</span>
</div>
<div class="smtp-enable-row">
<label class="smtp-toggle">
<input type="checkbox" v-model="form.enabled" />
<span>启用邮件通知</span>
</label>
<span class="smtp-status-tag" :class="form.enabled ? 'tag-on' : 'tag-off'">
{{ form.enabled ? '已启用' : '已关闭' }}
</span>
</div>
<div class="smtp-fields" :class="{ 'smtp-fields-disabled': !form.enabled }">
<label class="smtp-field">
<span>发件邮箱</span>
<input v-model="form.email" type="email" placeholder="noreply@yourdomain.com" :disabled="!form.enabled" />
</label>
<label class="smtp-field">
<span>SMTP 密码 / 授权码</span>
<input v-model="form.password" type="password" placeholder="QQ/163 填授权码；其他填密码" autocomplete="new-password" :disabled="!form.enabled" />
</label>
<label class="smtp-field">
<span>发件人名称</span>
<input v-model="form.fromName" type="text" placeholder="萌芽小店" :disabled="!form.enabled" />
</label>
<label class="smtp-field">
<span>SMTP 主机</span>
<input v-model="form.host" type="text" placeholder="smtp.qq.com" :disabled="!form.enabled" />
</label>
<label class="smtp-field smtp-field-port">
<span>端口</span>
<input v-model="form.port" type="text" placeholder="465" :disabled="!form.enabled" />
</label>
<button class="primary smtp-save-btn" type="button" :disabled="saving" @click="save">
{{ saving ? '保存中...' : '保存配置' }}
</button>
</div>
</div>
</template>
<script setup>
import { reactive, ref, watch } from 'vue'
const props = defineProps({
config: { type: Object, default: () => ({}) },
message: { type: String, default: '' }
})
const emit = defineEmits(['save'])
const saving = ref(false)
const form = reactive({
enabled: true,
email: '',
password: '',
fromName: '',
host: 'smtp.qq.com',
port: '465'
})
watch(() => props.config, (cfg) => {
if (!cfg) return
form.enabled = cfg.enabled !== false
form.email = cfg.email || ''
form.password = cfg.password || ''
form.fromName = cfg.fromName || ''
form.host = cfg.host || 'smtp.qq.com'
form.port = cfg.port || '465'
}, { immediate: true })
const save = async () => {
saving.value = true
try {
await emit('save', { ...form })
} finally {
saving.value = false
}
}
</script>
<style scoped>
.smtp-row {
padding: 14px 18px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 16px;
}
.smtp-header {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.smtp-label {
font-size: 15px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.smtp-desc {
font-size: 13px;
color: var(--muted);
}
.smtp-enable-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.smtp-toggle {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 14px;
color: var(--text);
font-weight: 500;
}
.smtp-toggle input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--accent);
cursor: pointer;
}
.smtp-status-tag {
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
}
.tag-on {
background: rgba(74, 222, 128, 0.15);
color: #2d8a4e;
}
.tag-off {
background: rgba(0,0,0,0.06);
color: #888;
}
.smtp-fields {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: flex-end;
}
.smtp-fields-disabled {
opacity: 0.45;
pointer-events: none;
}
.smtp-field {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 160px;
}
.smtp-field-port {
max-width: 90px;
flex: 0 0 90px;
}
.smtp-field span {
font-size: 13px;
color: var(--muted);
}
.smtp-field input {
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.7);
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
font-size: 14px;
outline: none;
transition: border-color 0.2s ease;
width: 100%;
box-sizing: border-box;
}
.smtp-field input:focus {
border-color: var(--accent);
}
.smtp-save-btn {
align-self: flex-end;
padding: 8px 18px;
font-size: 14px;
white-space: nowrap;
}
.msg-tag {
font-size: 14px;
color: var(--accent-2);
padding: 3px 8px;
border-radius: 5px;
background: rgba(145, 168, 208, 0.1);
white-space: nowrap;
}
.msg-tag.error {
color: #c95a6a;
background: rgba(201, 90, 106, 0.08);
}
@media (max-width: 900px) {
.smtp-fields {
flex-direction: column;
}
.smtp-field {
min-width: 0;
width: 100%;
}
.smtp-field-port {
max-width: 100%;
flex: 1;
}
}
</style>
<template>
<div class="smtp-row">
<div class="smtp-header">
<span class="smtp-label">邮件通知配置</span>
<span class="smtp-desc tag">下单/发货时自动给用户发送通知邮件（支持 QQ / 163 / Gmail / 自定义域名邮箱）</span>
<span v-if="message" class="msg-tag" :class="{ error: message.includes('失败') }">{{ message }}</span>
</div>
<div class="smtp-enable-row">
<label class="smtp-toggle">
<input type="checkbox" v-model="form.enabled" />
<span>启用邮件通知</span>
</label>
<span class="smtp-status-tag" :class="form.enabled ? 'tag-on' : 'tag-off'">
{{ form.enabled ? '已启用' : '已关闭' }}
</span>
</div>
<div class="smtp-fields" :class="{ 'smtp-fields-disabled': !form.enabled }">
<label class="smtp-field">
<span>发件邮箱</span>
<input v-model="form.email" type="email" placeholder="noreply@yourdomain.com" :disabled="!form.enabled" />
</label>
<label class="smtp-field">
<span>SMTP 密码 / 授权码</span>
<input v-model="form.password" type="password" placeholder="QQ/163 填授权码；其他填密码" autocomplete="new-password" :disabled="!form.enabled" />
</label>
<label class="smtp-field">
<span>发件人名称</span>
<input v-model="form.fromName" type="text" placeholder="萌芽小店" :disabled="!form.enabled" />
</label>
<label class="smtp-field">
<span>SMTP 主机</span>
<input v-model="form.host" type="text" placeholder="smtp.qq.com" :disabled="!form.enabled" />
</label>
<label class="smtp-field smtp-field-port">
<span>端口</span>
<input v-model="form.port" type="text" placeholder="465" :disabled="!form.enabled" />
</label>
<button class="primary smtp-save-btn" type="button" :disabled="saving" @click="save">
{{ saving ? '保存中...' : '保存配置' }}
</button>
</div>
</div>
</template>
<script setup>
import { reactive, ref, watch } from 'vue'
const props = defineProps({
config: { type: Object, default: () => ({}) },
message: { type: String, default: '' }
})
const emit = defineEmits(['save'])
const saving = ref(false)
const form = reactive({
enabled: true,
email: '',
password: '',
fromName: '',
host: 'smtp.qq.com',
port: '465'
})
watch(() => props.config, (cfg) => {
if (!cfg) return
form.enabled = cfg.enabled !== false
form.email = cfg.email || ''
form.password = cfg.password || ''
form.fromName = cfg.fromName || ''
form.host = cfg.host || 'smtp.qq.com'
form.port = cfg.port || '465'
}, { immediate: true })
const save = async () => {
saving.value = true
try {
await emit('save', { ...form })
} finally {
saving.value = false
}
}
</script>
<style scoped>
.smtp-row {
padding: 14px 18px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 16px;
}
.smtp-header {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.smtp-label {
font-size: 15px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.smtp-desc {
font-size: 13px;
color: var(--muted);
}
.smtp-enable-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.smtp-toggle {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 14px;
color: var(--text);
font-weight: 500;
}
.smtp-toggle input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--accent);
cursor: pointer;
}
.smtp-status-tag {
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
}
.tag-on {
background: rgba(74, 222, 128, 0.15);
color: #2d8a4e;
}
.tag-off {
background: rgba(0,0,0,0.06);
color: #888;
}
.smtp-fields {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: flex-end;
}
.smtp-fields-disabled {
opacity: 0.45;
pointer-events: none;
}
.smtp-field {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 160px;
}
.smtp-field-port {
max-width: 90px;
flex: 0 0 90px;
}
.smtp-field span {
font-size: 13px;
color: var(--muted);
}
.smtp-field input {
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.7);
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
font-size: 14px;
outline: none;
transition: border-color 0.2s ease;
width: 100%;
box-sizing: border-box;
}
.smtp-field input:focus {
border-color: var(--accent);
}
.smtp-save-btn {
align-self: flex-end;
padding: 8px 18px;
font-size: 14px;
white-space: nowrap;
}
.msg-tag {
font-size: 14px;
color: var(--accent-2);
padding: 3px 8px;
border-radius: 5px;
background: rgba(145, 168, 208, 0.1);
white-space: nowrap;
}
.msg-tag.error {
color: #c95a6a;
background: rgba(201, 90, 106, 0.08);
}
@media (max-width: 900px) {
.smtp-fields {
flex-direction: column;
}
.smtp-field {
min-width: 0;
width: 100%;
}
.smtp-field-port {
max-width: 100%;
flex: 1;
}
}
</style>

204
mengyastore-frontend/src/modules/admin/components/AdminTokenRow.vue
View File

@@ -1,102 +1,102 @@
<template>
<div v-if="show" class="token-row">
<div class="form-field token-field">
<label>管理 Token</label>
<div class="token-input-wrap">
<input :value="token" @input="$emit('update:token', $event.target.value)" placeholder="粘贴管理员令牌后自动加载…" />
</div>
</div>
<p
v-if="message"
class="msg-tag"
:class="{ error: message.includes('失败') || message.includes('错误') }"
>{{ message }}</p>
</div>
<p
v-if="inlineMessage"
class="msg-inline"
:class="{ error: inlineMessage.includes('失败') || inlineMessage.includes('错误') }"
>{{ inlineMessage }}</p>
</template>
<script setup>
defineProps({
show: { type: Boolean, default: true },
token: { type: String, default: '' },
message: { type: String, default: '' },
inlineMessage: { type: String, default: '' }
})
defineEmits(['update:token'])
</script>
<style scoped>
.token-row {
display: flex;
align-items: flex-end;
gap: 14px;
margin-bottom: 16px;
padding: 16px 18px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--line);
border-radius: 8px;
}
.token-field {
flex: 1;
max-width: 460px;
margin-bottom: 0;
}
.token-input-wrap {
display: flex;
gap: 8px;
align-items: center;
}
.token-input-wrap input {
flex: 1;
}
.msg-tag {
font-size: 15px;
color: var(--accent-2);
padding: 4px 10px;
border-radius: 5px;
background: rgba(145, 168, 208, 0.1);
white-space: nowrap;
}
.msg-tag.error {
color: #c95a6a;
background: rgba(201, 90, 106, 0.08);
}
.msg-inline {
font-size: 15px;
color: var(--accent-2);
margin-bottom: 12px;
}
.msg-inline.error {
color: #c95a6a;
}
.small {
padding: 7px 13px;
font-size: 13px;
border-radius: 999px;
}
@media (max-width: 900px) {
.token-row {
flex-direction: column;
align-items: stretch;
padding: 12px 12px;
}
.token-field {
max-width: 100%;
}
}
</style>
<template>
<div v-if="show" class="token-row">
<div class="form-field token-field">
<label>管理 Token</label>
<div class="token-input-wrap">
<input :value="token" @input="$emit('update:token', $event.target.value)" placeholder="粘贴管理员令牌后自动加载…" />
</div>
</div>
<p
v-if="message"
class="msg-tag"
:class="{ error: message.includes('失败') || message.includes('错误') }"
>{{ message }}</p>
</div>
<p
v-if="inlineMessage"
class="msg-inline"
:class="{ error: inlineMessage.includes('失败') || inlineMessage.includes('错误') }"
>{{ inlineMessage }}</p>
</template>
<script setup>
defineProps({
show: { type: Boolean, default: true },
token: { type: String, default: '' },
message: { type: String, default: '' },
inlineMessage: { type: String, default: '' }
})
defineEmits(['update:token'])
</script>
<style scoped>
.token-row {
display: flex;
align-items: flex-end;
gap: 14px;
margin-bottom: 16px;
padding: 16px 18px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--line);
border-radius: 8px;
}
.token-field {
flex: 1;
max-width: 460px;
margin-bottom: 0;
}
.token-input-wrap {
display: flex;
gap: 8px;
align-items: center;
}
.token-input-wrap input {
flex: 1;
}
.msg-tag {
font-size: 15px;
color: var(--accent-2);
padding: 4px 10px;
border-radius: 5px;
background: rgba(145, 168, 208, 0.1);
white-space: nowrap;
}
.msg-tag.error {
color: #c95a6a;
background: rgba(201, 90, 106, 0.08);
}
.msg-inline {
font-size: 15px;
color: var(--accent-2);
margin-bottom: 12px;
}
.msg-inline.error {
color: #c95a6a;
}
.small {
padding: 7px 13px;
font-size: 13px;
border-radius: 999px;
}
@media (max-width: 900px) {
.token-row {
flex-direction: column;
align-items: stretch;
padding: 12px 12px;
}
.token-field {
max-width: 100%;
}
}
</style>

194
mengyastore-frontend/src/modules/auth/AuthCallback.vue
View File

@@ -1,97 +1,97 @@
<template>
<section class="page-card">
<div class="auth-callback">
<div v-if="status === 'loading'" class="auth-status">
<h2>正在验证登录...</h2>
<p class="tag">请稍候，正在与萌芽认证中心确认身份</p>
</div>
<div v-else-if="status === 'success'" class="auth-status">
<h2>登录成功</h2>
<p class="tag">欢迎回来，{{ displayName }}！正在跳转...</p>
</div>
<div v-else class="auth-status">
<h2>登录失败</h2>
<p class="tag">{{ errorMessage }}</p>
<button class="primary" @click="goHome">返回商店</button>
</div>
</div>
</section>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { setAuth } from '../shared/auth'
import { verifySproutGateToken } from '../shared/api'
const router = useRouter()
const status = ref('loading')
const displayName = ref('')
const errorMessage = ref('')
const goHome = () => router.push('/')
const parseFragment = () => {
const hash = window.location.hash.slice(1)
const params = new URLSearchParams(hash)
return {
token: params.get('token') || '',
account: params.get('account') || '',
username: params.get('username') || '',
avatarUrl: params.get('avatarUrl') || ''
}
}
onMounted(async () => {
const { token, account, username, avatarUrl: fragmentAvatar } = parseFragment()
if (!token) {
status.value = 'error'
errorMessage.value = '未获取到登录令牌，请重试'
return
}
try {
// 验证 token 并从 SproutGate 获取最新用户信息
const verifyData = await verifySproutGateToken(token)
if (!verifyData.valid) {
status.value = 'error'
errorMessage.value = '令牌验证失败，请重新登录'
return
}
const user = verifyData.user || {}
const finalAccount = user.account || account
const finalUsername = user.username || username
const finalAvatarUrl = user.avatarUrl || fragmentAvatar
const finalEmail = user.email || ''
setAuth({ token, account: finalAccount, username: finalUsername, avatarUrl: finalAvatarUrl, email: finalEmail })
displayName.value = finalUsername || finalAccount
status.value = 'success'
setTimeout(() => router.push('/'), 1000)
} catch {
// 验证失败（如网络异常）时，回退使用 URL fragment 中的数据
setAuth({ token, account, username, avatarUrl: fragmentAvatar })
displayName.value = username || account
status.value = 'success'
setTimeout(() => router.push('/'), 1000)
}
})
</script>
<style scoped>
.auth-callback {
display: flex;
justify-content: center;
padding: 48px 0;
}
.auth-status {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
</style>
<template>
<section class="page-card">
<div class="auth-callback">
<div v-if="status === 'loading'" class="auth-status">
<h2>正在验证登录...</h2>
<p class="tag">请稍候，正在与萌芽认证中心确认身份</p>
</div>
<div v-else-if="status === 'success'" class="auth-status">
<h2>登录成功</h2>
<p class="tag">欢迎回来，{{ displayName }}！正在跳转...</p>
</div>
<div v-else class="auth-status">
<h2>登录失败</h2>
<p class="tag">{{ errorMessage }}</p>
<button class="primary" @click="goHome">返回商店</button>
</div>
</div>
</section>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { setAuth } from '../shared/auth'
import { verifySproutGateToken } from '../shared/api'
const router = useRouter()
const status = ref('loading')
const displayName = ref('')
const errorMessage = ref('')
const goHome = () => router.push('/')
const parseFragment = () => {
const hash = window.location.hash.slice(1)
const params = new URLSearchParams(hash)
return {
token: params.get('token') || '',
account: params.get('account') || '',
username: params.get('username') || '',
avatarUrl: params.get('avatarUrl') || ''
}
}
onMounted(async () => {
const { token, account, username, avatarUrl: fragmentAvatar } = parseFragment()
if (!token) {
status.value = 'error'
errorMessage.value = '未获取到登录令牌，请重试'
return
}
try {
// 验证 token 并从 SproutGate 获取最新用户信息
const verifyData = await verifySproutGateToken(token)
if (!verifyData.valid) {
status.value = 'error'
errorMessage.value = '令牌验证失败，请重新登录'
return
}
const user = verifyData.user || {}
const finalAccount = user.account || account
const finalUsername = user.username || username
const finalAvatarUrl = user.avatarUrl || fragmentAvatar
const finalEmail = user.email || ''
setAuth({ token, account: finalAccount, username: finalUsername, avatarUrl: finalAvatarUrl, email: finalEmail })
displayName.value = finalUsername || finalAccount
status.value = 'success'
setTimeout(() => router.push('/'), 1000)
} catch {
// 验证失败（如网络异常）时，回退使用 URL fragment 中的数据
setAuth({ token, account, username, avatarUrl: fragmentAvatar })
displayName.value = username || account
status.value = 'success'
setTimeout(() => router.push('/'), 1000)
}
})
</script>
<style scoped>
.auth-callback {
display: flex;
justify-content: center;
padding: 48px 0;
}
.auth-status {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
</style>

1090
mengyastore-frontend/src/modules/chat/ChatWidget.vue
View File

File diff suppressed because it is too large Load Diff

186
mengyastore-frontend/src/modules/maintenance/MaintenancePage.vue
View File

@@ -1,93 +1,93 @@
<template>
<div class="maintenance-wrap">
<div class="maintenance-card">
<div class="maintenance-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
</svg>
</div>
<h1>站点维护中</h1>
<p class="divider-line"></p>
<p class="reason" v-if="reason">{{ reason }}</p>
<p class="reason muted" v-else>暂无维护说明，请稍后再试。</p>
<p class="tip">如有紧急需求，请联系管理员。</p>
</div>
</div>
</template>
<script setup>
const props = defineProps({
reason: {
type: String,
default: ''
}
})
</script>
<style scoped>
.maintenance-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
padding: 40px 5vw;
}
.maintenance-card {
max-width: 480px;
width: 100%;
background: var(--glass-strong);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 48px 40px;
text-align: center;
box-shadow: var(--shadow);
backdrop-filter: blur(20px);
}
.maintenance-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 20px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: white;
margin-bottom: 24px;
}
.maintenance-card h1 {
font-size: 28px;
font-weight: 700;
color: var(--text);
margin-bottom: 16px;
letter-spacing: 1px;
}
.divider-line {
width: 48px;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
margin: 0 auto 20px;
opacity: 0.6;
}
.reason {
font-size: 17px;
color: var(--text);
line-height: 1.7;
margin-bottom: 16px;
}
.reason.muted {
color: var(--muted);
}
.tip {
font-size: 15px;
color: var(--muted);
margin-top: 8px;
}
</style>
<template>
<div class="maintenance-wrap">
<div class="maintenance-card">
<div class="maintenance-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
</svg>
</div>
<h1>站点维护中</h1>
<p class="divider-line"></p>
<p class="reason" v-if="reason">{{ reason }}</p>
<p class="reason muted" v-else>暂无维护说明，请稍后再试。</p>
<p class="tip">如有紧急需求，请联系管理员。</p>
</div>
</div>
</template>
<script setup>
const props = defineProps({
reason: {
type: String,
default: ''
}
})
</script>
<style scoped>
.maintenance-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
padding: 40px 5vw;
}
.maintenance-card {
max-width: 480px;
width: 100%;
background: var(--glass-strong);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 48px 40px;
text-align: center;
box-shadow: var(--shadow);
backdrop-filter: blur(20px);
}
.maintenance-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 20px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: white;
margin-bottom: 24px;
}
.maintenance-card h1 {
font-size: 28px;
font-weight: 700;
color: var(--text);
margin-bottom: 16px;
letter-spacing: 1px;
}
.divider-line {
width: 48px;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
margin: 0 auto 20px;
opacity: 0.6;
}
.reason {
font-size: 17px;
color: var(--text);
line-height: 1.7;
margin-bottom: 16px;
}
.reason.muted {
color: var(--muted);
}
.tip {
font-size: 15px;
color: var(--muted);
margin-top: 8px;
}
</style>

388
mengyastore-frontend/src/modules/shared/SplashScreen.vue
View File

@@ -1,194 +1,194 @@
<template>
<Transition name="splash-fade" appear>
<div v-if="visible" class="splash-screen">
<!-- Ambient glow -->
<div class="splash-glow splash-glow-1"></div>
<div class="splash-glow splash-glow-2"></div>
<!-- Content -->
<div class="splash-center">
<!-- Ripple rings -->
<div class="splash-rings">
<div class="ring ring-1"></div>
<div class="ring ring-2"></div>
<div class="ring ring-3"></div>
<!-- Logo -->
<div class="splash-logo-wrap">
<img src="/pwa-192x192.png" alt="萌芽小店" class="splash-logo" />
</div>
</div>
<!-- Title -->
<h1 class="splash-title">萌芽小店</h1>
<p class="splash-subtitle">加载中</p>
<!-- Dots loader -->
<div class="splash-dots">
<span class="dot dot-1"></span>
<span class="dot dot-2"></span>
<span class="dot dot-3"></span>
</div>
</div>
</div>
</Transition>
</template>
<script setup>
defineProps({
visible: { type: Boolean, default: true }
})
</script>
<style scoped>
.splash-screen {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #f8f5f2 0%, #e9f0f7 45%, #f4eaf1 100%);
overflow: hidden;
}
/* Ambient glow blobs */
.splash-glow {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
animation: glow-pulse 3s ease-in-out infinite alternate;
}
.splash-glow-1 {
width: 420px;
height: 420px;
top: -80px;
left: -100px;
background: radial-gradient(circle, rgba(180, 154, 203, 0.35) 0%, transparent 70%);
}
.splash-glow-2 {
width: 380px;
height: 380px;
bottom: -60px;
right: -80px;
background: radial-gradient(circle, rgba(145, 168, 208, 0.3) 0%, transparent 70%);
animation-delay: 1.5s;
}
@keyframes glow-pulse {
from { opacity: 0.6; transform: scale(1); }
to { opacity: 1; transform: scale(1.12); }
}
/* Center content */
.splash-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
position: relative;
z-index: 1;
}
/* Rings + logo */
.splash-rings {
position: relative;
width: 160px;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
}
.ring {
position: absolute;
border-radius: 50%;
border: 2px solid rgba(180, 154, 203, 0.4);
animation: ring-expand 2.4s ease-out infinite;
}
.ring-1 { width: 100px; height: 100px; animation-delay: 0s; }
.ring-2 { width: 100px; height: 100px; animation-delay: 0.8s; }
.ring-3 { width: 100px; height: 100px; animation-delay: 1.6s; }
@keyframes ring-expand {
0% { width: 88px; height: 88px; opacity: 0.8; border-color: rgba(180, 154, 203, 0.5); }
100% { width: 200px; height: 200px; opacity: 0; border-color: rgba(180, 154, 203, 0); }
}
/* Logo */
.splash-logo-wrap {
position: relative;
z-index: 2;
animation: logo-float 2.8s ease-in-out infinite;
}
.splash-logo {
width: 88px;
height: 88px;
border-radius: 22px;
object-fit: cover;
box-shadow: 0 12px 40px rgba(33, 33, 40, 0.18), 0 2px 8px rgba(180, 154, 203, 0.25);
}
@keyframes logo-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Title */
.splash-title {
font-size: 26px;
font-weight: 800;
color: #2c2b2d;
letter-spacing: 2px;
margin: 0 0 6px;
}
.splash-subtitle {
font-size: 13px;
color: #8a8690;
letter-spacing: 3px;
margin: 0 0 20px;
}
/* Dots */
.splash-dots {
display: flex;
gap: 8px;
align-items: center;
margin-top: 4px;
}
.dot {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #4ade80;
animation: dot-bounce 1.2s ease-in-out infinite;
}
.dot-1 { animation-delay: 0s; }
.dot-2 { animation-delay: 0.2s; }
.dot-3 { animation-delay: 0.4s; }
@keyframes dot-bounce {
0%, 60%, 100% { transform: scale(0.7); opacity: 0.5; }
30% { transform: scale(1.2); opacity: 1; }
}
/* Exit transition */
.splash-fade-leave-active {
transition: opacity 0.45s ease, transform 0.45s ease;
}
.splash-fade-leave-to {
opacity: 0;
transform: scale(1.04);
}
</style>
<template>
<Transition name="splash-fade" appear>
<div v-if="visible" class="splash-screen">
<!-- Ambient glow -->
<div class="splash-glow splash-glow-1"></div>
<div class="splash-glow splash-glow-2"></div>
<!-- Content -->
<div class="splash-center">
<!-- Ripple rings -->
<div class="splash-rings">
<div class="ring ring-1"></div>
<div class="ring ring-2"></div>
<div class="ring ring-3"></div>
<!-- Logo -->
<div class="splash-logo-wrap">
<img src="/pwa-192x192.png" alt="萌芽小店" class="splash-logo" />
</div>
</div>
<!-- Title -->
<h1 class="splash-title">萌芽小店</h1>
<p class="splash-subtitle">加载中</p>
<!-- Dots loader -->
<div class="splash-dots">
<span class="dot dot-1"></span>
<span class="dot dot-2"></span>
<span class="dot dot-3"></span>
</div>
</div>
</div>
</Transition>
</template>
<script setup>
defineProps({
visible: { type: Boolean, default: true }
})
</script>
<style scoped>
.splash-screen {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #f8f5f2 0%, #e9f0f7 45%, #f4eaf1 100%);
overflow: hidden;
}
/* Ambient glow blobs */
.splash-glow {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
animation: glow-pulse 3s ease-in-out infinite alternate;
}
.splash-glow-1 {
width: 420px;
height: 420px;
top: -80px;
left: -100px;
background: radial-gradient(circle, rgba(180, 154, 203, 0.35) 0%, transparent 70%);
}
.splash-glow-2 {
width: 380px;
height: 380px;
bottom: -60px;
right: -80px;
background: radial-gradient(circle, rgba(145, 168, 208, 0.3) 0%, transparent 70%);
animation-delay: 1.5s;
}
@keyframes glow-pulse {
from { opacity: 0.6; transform: scale(1); }
to { opacity: 1; transform: scale(1.12); }
}
/* Center content */
.splash-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
position: relative;
z-index: 1;
}
/* Rings + logo */
.splash-rings {
position: relative;
width: 160px;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
}
.ring {
position: absolute;
border-radius: 50%;
border: 2px solid rgba(180, 154, 203, 0.4);
animation: ring-expand 2.4s ease-out infinite;
}
.ring-1 { width: 100px; height: 100px; animation-delay: 0s; }
.ring-2 { width: 100px; height: 100px; animation-delay: 0.8s; }
.ring-3 { width: 100px; height: 100px; animation-delay: 1.6s; }
@keyframes ring-expand {
0% { width: 88px; height: 88px; opacity: 0.8; border-color: rgba(180, 154, 203, 0.5); }
100% { width: 200px; height: 200px; opacity: 0; border-color: rgba(180, 154, 203, 0); }
}
/* Logo */
.splash-logo-wrap {
position: relative;
z-index: 2;
animation: logo-float 2.8s ease-in-out infinite;
}
.splash-logo {
width: 88px;
height: 88px;
border-radius: 22px;
object-fit: cover;
box-shadow: 0 12px 40px rgba(33, 33, 40, 0.18), 0 2px 8px rgba(180, 154, 203, 0.25);
}
@keyframes logo-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* Title */
.splash-title {
font-size: 26px;
font-weight: 800;
color: #2c2b2d;
letter-spacing: 2px;
margin: 0 0 6px;
}
.splash-subtitle {
font-size: 13px;
color: #8a8690;
letter-spacing: 3px;
margin: 0 0 20px;
}
/* Dots */
.splash-dots {
display: flex;
gap: 8px;
align-items: center;
margin-top: 4px;
}
.dot {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #4ade80;
animation: dot-bounce 1.2s ease-in-out infinite;
}
.dot-1 { animation-delay: 0s; }
.dot-2 { animation-delay: 0.2s; }
.dot-3 { animation-delay: 0.4s; }
@keyframes dot-bounce {
0%, 60%, 100% { transform: scale(0.7); opacity: 0.5; }
30% { transform: scale(1.2); opacity: 1; }
}
/* Exit transition */
.splash-fade-leave-active {
transition: opacity 0.45s ease, transform 0.45s ease;
}
.splash-fade-leave-to {
opacity: 0;
transform: scale(1.04);
}
</style>

404
mengyastore-frontend/src/modules/shared/api.js
View File

@@ -1,202 +1,202 @@
import axios from 'axios'
const apiBaseURL =
import.meta.env.VITE_API_BASE_URL ||
import.meta.env.VITE_API_BASE ||
(typeof window !== 'undefined' ? window.location.origin : 'http://localhost:8080')
const api = axios.create({
baseURL: apiBaseURL
})
// 管理员请求头构建辅助函数，使用 X-Admin-Token 请求头。
// 后端保留 ?token= 查询参数作为旧版兼容，新请求统一使用请求头以兼容 Spring Security。
const adminHeaders = (token) => ({ 'X-Admin-Token': token })
const authApi = axios.create({
baseURL: 'https://auth.api.shumengya.top'
})
export const fetchProducts = async () => {
const { data } = await api.get('/api/products')
return data.data || []
}
export const recordProductView = async (id) => {
const { data } = await api.post(`/api/products/${id}/view`)
return data.data || {}
}
export const createOrder = async (payload, authToken) => {
const headers = authToken ? { Authorization: `Bearer ${authToken}` } : {}
const { data } = await api.post('/api/checkout', payload, { headers })
return data.data || {}
}
export const confirmOrder = async (orderId) => {
const { data } = await api.post(`/api/orders/${orderId}/confirm`)
return data.data || {}
}
export const fetchStats = async () => {
const { data } = await api.get('/api/stats')
return data.data || {}
}
export const recordSiteVisit = async () => {
const { data } = await api.post('/api/site/visit')
return data.data || {}
}
export const verifySproutGateToken = async (token) => {
const { data } = await authApi.post('/api/auth/verify', { token })
return data
}
export const fetchSproutGateUser = async (token) => {
const { data } = await authApi.get('/api/auth/me', {
headers: { Authorization: `Bearer ${token}` }
})
return data
}
export const fetchMyOrders = async (authToken) => {
const { data } = await api.get('/api/orders', {
headers: { Authorization: `Bearer ${authToken}` }
})
return data.data || []
}
export const verifyAdminToken = async (token) => {
const { data } = await api.post('/api/admin/verify', { token })
return data.valid === true
}
export const fetchAdminProducts = async (token) => {
const { data } = await api.get('/api/admin/products', { headers: adminHeaders(token) })
return data.data || []
}
export const createProduct = async (token, payload) => {
const { data } = await api.post('/api/admin/products', payload, {
headers: adminHeaders(token)
})
return data.data
}
export const updateProduct = async (token, id, payload) => {
const { data } = await api.put(`/api/admin/products/${id}`, payload, {
headers: adminHeaders(token)
})
return data.data
}
export const toggleProduct = async (token, id, active) => {
const { data } = await api.patch(`/api/admin/products/${id}/status`, { active }, {
headers: adminHeaders(token)
})
return data.data
}
export const deleteProduct = async (token, id) => {
const { data } = await api.delete(`/api/admin/products/${id}`, {
headers: adminHeaders(token)
})
return data
}
export const fetchWishlist = async (token) => {
const { data } = await api.get('/api/wishlist', {
headers: { Authorization: `Bearer ${token}` }
})
return data.data?.items || []
}
export const addToWishlist = async (token, productId) => {
const { data } = await api.post('/api/wishlist', { productId }, {
headers: { Authorization: `Bearer ${token}` }
})
return data.data?.items || []
}
export const removeFromWishlist = async (token, productId) => {
const { data } = await api.delete(`/api/wishlist/${productId}`, {
headers: { Authorization: `Bearer ${token}` }
})
return data.data?.items || []
}
export const fetchAdminOrders = async (token) => {
const { data } = await api.get('/api/admin/orders', { headers: adminHeaders(token) })
return data.data || []
}
export const deleteAdminOrder = async (token, orderId) => {
await api.delete(`/api/admin/orders/${orderId}`, { headers: adminHeaders(token) })
}
export const fetchSiteMaintenance = async () => {
const { data } = await api.get('/api/site/maintenance')
return data.data || { maintenance: false, reason: '' }
}
export const setSiteMaintenance = async (token, maintenance, reason) => {
const { data } = await api.post('/api/admin/site/maintenance', { maintenance, reason }, {
headers: adminHeaders(token)
})
return data.data || {}
}
// ---- SMTP Config ----
export const fetchSMTPConfig = async (token) => {
const { data } = await api.get('/api/admin/site/smtp', { headers: adminHeaders(token) })
return data.data || {}
}
export const setSMTPConfig = async (token, cfg) => {
const { data } = await api.post('/api/admin/site/smtp', cfg, { headers: adminHeaders(token) })
return data.data
}
// ---- Chat (user) ----
export const fetchMyChatMessages = async (userToken) => {
const { data } = await api.get('/api/chat/messages', {
headers: { Authorization: `Bearer ${userToken}` }
})
return data.data?.messages || []
}
export const sendChatMessage = async (userToken, content) => {
const { data } = await api.post('/api/chat/messages', { content }, {
headers: { Authorization: `Bearer ${userToken}` }
})
return data.data?.message || null
}
// ---- Chat (admin) ----
export const fetchAdminAllConversations = async (adminToken) => {
const { data } = await api.get('/api/admin/chat', { headers: adminHeaders(adminToken) })
return data.data?.conversations || {}
}
export const fetchAdminConversation = async (adminToken, account) => {
const { data } = await api.get(`/api/admin/chat/${encodeURIComponent(account)}`, {
headers: adminHeaders(adminToken)
})
return data.data?.messages || []
}
export const adminSendChatReply = async (adminToken, account, content) => {
const { data } = await api.post(
`/api/admin/chat/${encodeURIComponent(account)}`,
{ content },
{ headers: adminHeaders(adminToken) }
)
return data.data?.message || null
}
export const adminClearConversation = async (adminToken, account) => {
await api.delete(`/api/admin/chat/${encodeURIComponent(account)}`, {
headers: adminHeaders(adminToken)
})
}
import axios from 'axios'
const apiBaseURL =
import.meta.env.VITE_API_BASE_URL ||
import.meta.env.VITE_API_BASE ||
(typeof window !== 'undefined' ? window.location.origin : 'http://localhost:8080')
const api = axios.create({
baseURL: apiBaseURL
})
// 管理员请求头构建辅助函数，使用 X-Admin-Token 请求头。
// 后端保留 ?token= 查询参数作为旧版兼容，新请求统一使用请求头以兼容 Spring Security。
const adminHeaders = (token) => ({ 'X-Admin-Token': token })
const authApi = axios.create({
baseURL: 'https://auth.api.shumengya.top'
})
export const fetchProducts = async () => {
const { data } = await api.get('/api/products')
return data.data || []
}
export const recordProductView = async (id) => {
const { data } = await api.post(`/api/products/${id}/view`)
return data.data || {}
}
export const createOrder = async (payload, authToken) => {
const headers = authToken ? { Authorization: `Bearer ${authToken}` } : {}
const { data } = await api.post('/api/checkout', payload, { headers })
return data.data || {}
}
export const confirmOrder = async (orderId) => {
const { data } = await api.post(`/api/orders/${orderId}/confirm`)
return data.data || {}
}
export const fetchStats = async () => {
const { data } = await api.get('/api/stats')
return data.data || {}
}
export const recordSiteVisit = async () => {
const { data } = await api.post('/api/site/visit')
return data.data || {}
}
export const verifySproutGateToken = async (token) => {
const { data } = await authApi.post('/api/auth/verify', { token })
return data
}
export const fetchSproutGateUser = async (token) => {
const { data } = await authApi.get('/api/auth/me', {
headers: { Authorization: `Bearer ${token}` }
})
return data
}
export const fetchMyOrders = async (authToken) => {
const { data } = await api.get('/api/orders', {
headers: { Authorization: `Bearer ${authToken}` }
})
return data.data || []
}
export const verifyAdminToken = async (token) => {
const { data } = await api.post('/api/admin/verify', { token })
return data.valid === true
}
export const fetchAdminProducts = async (token) => {
const { data } = await api.get('/api/admin/products', { headers: adminHeaders(token) })
return data.data || []
}
export const createProduct = async (token, payload) => {
const { data } = await api.post('/api/admin/products', payload, {
headers: adminHeaders(token)
})
return data.data
}
export const updateProduct = async (token, id, payload) => {
const { data } = await api.put(`/api/admin/products/${id}`, payload, {
headers: adminHeaders(token)
})
return data.data
}
export const toggleProduct = async (token, id, active) => {
const { data } = await api.patch(`/api/admin/products/${id}/status`, { active }, {
headers: adminHeaders(token)
})
return data.data
}
export const deleteProduct = async (token, id) => {
const { data } = await api.delete(`/api/admin/products/${id}`, {
headers: adminHeaders(token)
})
return data
}
export const fetchWishlist = async (token) => {
const { data } = await api.get('/api/wishlist', {
headers: { Authorization: `Bearer ${token}` }
})
return data.data?.items || []
}
export const addToWishlist = async (token, productId) => {
const { data } = await api.post('/api/wishlist', { productId }, {
headers: { Authorization: `Bearer ${token}` }
})
return data.data?.items || []
}
export const removeFromWishlist = async (token, productId) => {
const { data } = await api.delete(`/api/wishlist/${productId}`, {
headers: { Authorization: `Bearer ${token}` }
})
return data.data?.items || []
}
export const fetchAdminOrders = async (token) => {
const { data } = await api.get('/api/admin/orders', { headers: adminHeaders(token) })
return data.data || []
}
export const deleteAdminOrder = async (token, orderId) => {
await api.delete(`/api/admin/orders/${orderId}`, { headers: adminHeaders(token) })
}
export const fetchSiteMaintenance = async () => {
const { data } = await api.get('/api/site/maintenance')
return data.data || { maintenance: false, reason: '' }
}
export const setSiteMaintenance = async (token, maintenance, reason) => {
const { data } = await api.post('/api/admin/site/maintenance', { maintenance, reason }, {
headers: adminHeaders(token)
})
return data.data || {}
}
// ---- SMTP Config ----
export const fetchSMTPConfig = async (token) => {
const { data } = await api.get('/api/admin/site/smtp', { headers: adminHeaders(token) })
return data.data || {}
}
export const setSMTPConfig = async (token, cfg) => {
const { data } = await api.post('/api/admin/site/smtp', cfg, { headers: adminHeaders(token) })
return data.data
}
// ---- Chat (user) ----
export const fetchMyChatMessages = async (userToken) => {
const { data } = await api.get('/api/chat/messages', {
headers: { Authorization: `Bearer ${userToken}` }
})
return data.data?.messages || []
}
export const sendChatMessage = async (userToken, content) => {
const { data } = await api.post('/api/chat/messages', { content }, {
headers: { Authorization: `Bearer ${userToken}` }
})
return data.data?.message || null
}
// ---- Chat (admin) ----
export const fetchAdminAllConversations = async (adminToken) => {
const { data } = await api.get('/api/admin/chat', { headers: adminHeaders(adminToken) })
return data.data?.conversations || {}
}
export const fetchAdminConversation = async (adminToken, account) => {
const { data } = await api.get(`/api/admin/chat/${encodeURIComponent(account)}`, {
headers: adminHeaders(adminToken)
})
return data.data?.messages || []
}
export const adminSendChatReply = async (adminToken, account, content) => {
const { data } = await api.post(
`/api/admin/chat/${encodeURIComponent(account)}`,
{ content },
{ headers: adminHeaders(adminToken) }
)
return data.data?.message || null
}
export const adminClearConversation = async (adminToken, account) => {
await api.delete(`/api/admin/chat/${encodeURIComponent(account)}`, {
headers: adminHeaders(adminToken)
})
}

116
mengyastore-frontend/src/modules/shared/auth.js
View File

@@ -1,58 +1,58 @@
import { reactive } from 'vue'
const AUTH_KEY = 'mengyastore_auth'
const loadAuth = () => {
try {
const raw = localStorage.getItem(AUTH_KEY)
if (!raw) return null
return JSON.parse(raw)
} catch {
return null
}
}
const saved = loadAuth()
export const authState = reactive({
token: saved?.token || '',
account: saved?.account || '',
username: saved?.username || '',
avatarUrl: saved?.avatarUrl || '',
email: saved?.email || ''
})
export const isLoggedIn = () => !!authState.token
export const setAuth = (info) => {
authState.token = info.token || ''
authState.account = info.account || ''
authState.username = info.username || ''
authState.avatarUrl = info.avatarUrl || ''
authState.email = info.email || ''
localStorage.setItem(
AUTH_KEY,
JSON.stringify({
token: authState.token,
account: authState.account,
username: authState.username,
avatarUrl: authState.avatarUrl,
email: authState.email
})
)
}
export const clearAuth = () => {
authState.token = ''
authState.account = ''
authState.username = ''
authState.avatarUrl = ''
authState.email = ''
localStorage.removeItem(AUTH_KEY)
}
export const getLoginUrl = () => {
const redirectUri = `${window.location.origin}/auth/callback`
const state = Math.random().toString(36).slice(2)
return `https://auth.shumengya.top/?redirect_uri=${encodeURIComponent(redirectUri)}&state=${state}`
}
import { reactive } from 'vue'
const AUTH_KEY = 'mengyastore_auth'
const loadAuth = () => {
try {
const raw = localStorage.getItem(AUTH_KEY)
if (!raw) return null
return JSON.parse(raw)
} catch {
return null
}
}
const saved = loadAuth()
export const authState = reactive({
token: saved?.token || '',
account: saved?.account || '',
username: saved?.username || '',
avatarUrl: saved?.avatarUrl || '',
email: saved?.email || ''
})
export const isLoggedIn = () => !!authState.token
export const setAuth = (info) => {
authState.token = info.token || ''
authState.account = info.account || ''
authState.username = info.username || ''
authState.avatarUrl = info.avatarUrl || ''
authState.email = info.email || ''
localStorage.setItem(
AUTH_KEY,
JSON.stringify({
token: authState.token,
account: authState.account,
username: authState.username,
avatarUrl: authState.avatarUrl,
email: authState.email
})
)
}
export const clearAuth = () => {
authState.token = ''
authState.account = ''
authState.username = ''
authState.avatarUrl = ''
authState.email = ''
localStorage.removeItem(AUTH_KEY)
}
export const getLoginUrl = () => {
const redirectUri = `${window.location.origin}/auth/callback`
const state = Math.random().toString(36).slice(2)
return `https://auth.shumengya.top/?redirect_uri=${encodeURIComponent(redirectUri)}&state=${state}`
}

132
mengyastore-frontend/src/modules/shared/useWishlist.js
View File

@@ -1,66 +1,66 @@
import { computed, ref } from 'vue'
import { authState, isLoggedIn } from './auth'
import {
fetchWishlist as apiFetchWishlist,
addToWishlist as apiAddToWishlist,
removeFromWishlist as apiRemoveFromWishlist
} from './api'
const wishlistIds = ref([])
const wishlistSet = computed(() => new Set(wishlistIds.value))
const wishlistCount = computed(() => wishlistIds.value.length)
const loadWishlist = async () => {
if (!isLoggedIn()) {
wishlistIds.value = []
return
}
try {
wishlistIds.value = await apiFetchWishlist(authState.token)
} catch {
wishlistIds.value = []
}
}
const isInWishlist = (productId) => wishlistSet.value.has(productId)
const addToWishlist = async (productId) => {
if (!isLoggedIn()) return
try {
wishlistIds.value = await apiAddToWishlist(authState.token, productId)
} catch {
// 忽略错误
}
}
const removeFromWishlist = async (productId) => {
if (!isLoggedIn()) return
try {
wishlistIds.value = await apiRemoveFromWishlist(authState.token, productId)
} catch {
// 忽略错误
}
}
const toggleWishlist = async (productId) => {
if (isInWishlist(productId)) {
await removeFromWishlist(productId)
} else {
await addToWishlist(productId)
}
}
const getWishlistProducts = (allProducts) => {
const idSet = wishlistSet.value
return allProducts.filter((p) => idSet.has(p.id))
}
export {
wishlistCount,
isInWishlist,
addToWishlist,
removeFromWishlist,
toggleWishlist,
getWishlistProducts,
loadWishlist
}
import { computed, ref } from 'vue'
import { authState, isLoggedIn } from './auth'
import {
fetchWishlist as apiFetchWishlist,
addToWishlist as apiAddToWishlist,
removeFromWishlist as apiRemoveFromWishlist
} from './api'
const wishlistIds = ref([])
const wishlistSet = computed(() => new Set(wishlistIds.value))
const wishlistCount = computed(() => wishlistIds.value.length)
const loadWishlist = async () => {
if (!isLoggedIn()) {
wishlistIds.value = []
return
}
try {
wishlistIds.value = await apiFetchWishlist(authState.token)
} catch {
wishlistIds.value = []
}
}
const isInWishlist = (productId) => wishlistSet.value.has(productId)
const addToWishlist = async (productId) => {
if (!isLoggedIn()) return
try {
wishlistIds.value = await apiAddToWishlist(authState.token, productId)
} catch {
// 忽略错误
}
}
const removeFromWishlist = async (productId) => {
if (!isLoggedIn()) return
try {
wishlistIds.value = await apiRemoveFromWishlist(authState.token, productId)
} catch {
// 忽略错误
}
}
const toggleWishlist = async (productId) => {
if (isInWishlist(productId)) {
await removeFromWishlist(productId)
} else {
await addToWishlist(productId)
}
}
const getWishlistProducts = (allProducts) => {
const idSet = wishlistSet.value
return allProducts.filter((p) => idSet.has(p.id))
}
export {
wishlistCount,
isInWishlist,
addToWishlist,
removeFromWishlist,
toggleWishlist,
getWishlistProducts,
loadWishlist
}

928
mengyastore-frontend/src/modules/store/CheckoutPage.vue
View File

@@ -1,464 +1,464 @@
<template>
<section class="page-card" v-if="!loading && product">
<div class="checkout-header">
<div>
<h2>立即下单 · {{ product.name }}</h2>
<p class="tag">一个扫码流程即可完成订单</p>
</div>
<button class="ghost" @click="goBack">返回商品</button>
</div>
<div class="checkout-grid">
<div class="checkout-summary">
<img :src="product.coverUrl" :alt="product.name" />
<div class="summary-content">
<h3>{{ product.name }}</h3>
<p class="tag">库存：{{ product.quantity }}</p>
<p class="tag">浏览量：{{ product.viewCount || 0 }}</p>
<p class="product-price">
<span v-if="isFree" class="free-price">免费</span>
<span
v-else-if="product.discountPrice > 0 && product.discountPrice < product.price"
>
<span class="price-original">¥ {{ product.price.toFixed(2) }}</span>
<span class="price-discount">¥ {{ product.discountPrice.toFixed(2) }}</span>
</span>
<span v-else>¥ {{ product.price.toFixed(2) }}</span>
</p>
<p class="markdown" v-html="renderMarkdown(product.description)"></p>
</div>
</div>
<div class="checkout-form" v-if="!orderResult && product.requireLogin && !loggedIn">
<div class="require-login-block">
<p class="require-login-title">该商品需要登录后才能购买</p>
<a class="primary btn-inline" :href="loginUrl">立即登录</a>
</div>
</div>
<form class="checkout-form" @submit.prevent="submitOrder" v-else-if="!orderResult">
<div class="form-field">
<label>下单数量</label>
<input
v-model.number="form.quantity"
min="1"
:max="product.maxPerAccount > 0 ? product.maxPerAccount : undefined"
type="number"
/>
</div>
<p class="tag">预计总价：¥ {{ totalPrice.toFixed(2) }}</p>
<p class="tag limit-hint" v-if="product.maxPerAccount > 0">
该商品每个账户最多可购买 {{ product.maxPerAccount }} 个
</p>
<div class="form-field" v-if="product.showNote">
<label>备注（选填）</label>
<textarea v-model="form.note" placeholder="填写您的备注信息…" rows="3"></textarea>
</div>
<template v-if="product.showContact">
<div class="form-row contact-row">
<div class="form-field">
<label>手机号（选填）</label>
<input v-model="form.contactPhone" type="tel" placeholder="138xxxx0000" />
</div>
<div class="form-field">
<label>邮箱（选填）</label>
<input v-model="form.contactEmail" type="email" placeholder="you@example.com" />
</div>
</div>
</template>
<p class="tag login-hint" v-if="!loggedIn">
<a :href="loginUrl">登录萌芽账号</a> 后购买可享受：历史订单记录、专属优惠商品及更多购买权益
</p>
<div class="delivery-tip" v-if="product.deliveryMode === 'manual'">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
该商品为手动发货，付款后管理员将核验并处理您的订单
</div>
<button class="primary" type="submit" :disabled="submitting">
{{ submitting ? '生成中...' : '生成二维码下单' }}
</button>
<p class="error" v-if="error">{{ error }}</p>
</form>
</div>
<section class="order-result" v-if="orderResult">
<h4>订单 {{ orderResult.orderId }} 已创建</h4>
<template v-if="!confirmed">
<p class="tag">请扫描下方二维码完成付款</p>
<img :src="orderResult.qrCodeUrl" alt="下单二维码" />
<div class="confirm-area">
<button class="primary" :disabled="confirming" @click="doConfirm">
{{ confirming ? '确认中...' : '我已完成扫码付款' }}
</button>
<p class="tag">扫码完成后点击上方按钮获取购买内容</p>
</div>
<p class="error" v-if="confirmError">{{ confirmError }}</p>
</template>
<template v-else>
<p class="tag confirmed-badge">订单已完成</p>
<div class="result-content" v-if="deliveredCodes.length">
<p class="tag">购买后内容</p>
<textarea class="delivery-box" readonly :value="deliveredCodes.join('\n')"></textarea>
</div>
<div v-else-if="isManualDelivery" class="manual-delivery-notice">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
<div>
<p class="manual-delivery-title">等待发货中</p>
<p class="tag">管理员将尽快处理您的订单并进行发货，请关注您的邮箱或联系方式。</p>
</div>
</div>
<p class="tag">感谢购买！如有问题请联系售后邮箱。</p>
</template>
</section>
</section>
<section class="page-card" v-else-if="!loading">
<h2>未找到该商品</h2>
<p class="tag">该商品无法下单，请返回商店页。</p>
<div class="detail-actions">
<button class="ghost" @click="goBack">返回商品</button>
</div>
</section>
<section class="page-card" v-else>
<div class="status">加载中...</div>
</section>
</template>
<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import MarkdownIt from 'markdown-it'
import { fetchProducts, createOrder, confirmOrder } from '../shared/api'
import { authState, isLoggedIn, getLoginUrl } from '../shared/auth'
const route = useRoute()
const router = useRouter()
const md = new MarkdownIt()
const product = ref(null)
const loading = ref(true)
const submitting = ref(false)
const error = ref('')
const orderResult = ref(null)
const confirmed = ref(false)
const confirming = ref(false)
const confirmError = ref('')
const deliveredCodes = ref([])
const loggedIn = computed(() => isLoggedIn())
const loginUrl = computed(() => getLoginUrl())
const form = reactive({
quantity: 1,
note: '',
contactPhone: '',
contactEmail: ''
})
const isManualDelivery = ref(false)
const renderMarkdown = (content) => md.render(content || '')
const getPayPrice = (p) => {
if (!p) return 0
if (p.price === 0) return 0
if (p.discountPrice > 0 && p.discountPrice < p.price) return p.discountPrice
return p.price
}
const unitPrice = computed(() => getPayPrice(product.value))
const isFree = computed(() => unitPrice.value === 0)
const totalPrice = computed(() => {
if (!product.value) {
return 0
}
const qty = form.quantity && form.quantity > 0 ? form.quantity : 1
return unitPrice.value * qty
})
const goBack = () => router.push('/')
const submitOrder = async () => {
if (!product.value) {
return
}
error.value = ''
submitting.value = true
orderResult.value = null
confirmed.value = false
deliveredCodes.value = []
try {
const payload = {
productId: product.value.id,
quantity: form.quantity,
note: form.note || '',
contactPhone: form.contactPhone || '',
contactEmail: form.contactEmail || '',
notifyEmail: authState.email || ''
}
const token = isLoggedIn() ? authState.token : null
const response = await createOrder(payload, token)
orderResult.value = response
} catch (err) {
error.value = err?.response?.data?.error || '下单失败，请稍候再试'
} finally {
submitting.value = false
}
}
const doConfirm = async () => {
if (!orderResult.value?.orderId) {
return
}
confirmError.value = ''
confirming.value = true
try {
const result = await confirmOrder(orderResult.value.orderId)
deliveredCodes.value = result.deliveredCodes || []
isManualDelivery.value = result.isManual || result.deliveryMode === 'manual'
confirmed.value = true
} catch (err) {
confirmError.value = err?.response?.data?.error || '确认失败，请重试'
} finally {
confirming.value = false
}
}
onMounted(async () => {
try {
const list = await fetchProducts()
product.value = list.find((item) => item.id === route.params.id) || null
} finally {
loading.value = false
}
})
</script>
<style scoped>
.checkout-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
.checkout-grid {
display: grid;
grid-template-columns: minmax(280px, 1fr) 320px;
gap: 24px;
margin-bottom: 20px;
}
.checkout-summary {
background: rgba(255, 255, 255, 0.8);
border-radius: var(--radius);
border: 1px solid var(--line);
padding: 18px;
display: flex;
gap: 18px;
}
.checkout-summary img {
width: 140px;
height: 140px;
object-fit: cover;
border-radius: 8px;
}
.summary-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.checkout-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.login-hint a {
color: var(--accent-2);
text-decoration: none;
font-weight: 600;
}
.login-hint a:hover {
text-decoration: underline;
}
.order-result {
margin-top: 16px;
text-align: center;
}
.order-result img {
max-width: 320px;
margin: 12px auto;
width: 100%;
border-radius: 8px;
border: 1px solid var(--line);
}
.confirm-area {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 16px 0;
}
.confirmed-badge {
display: inline-block;
padding: 6px 16px;
border-radius: 999px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: white;
font-size: 15px;
font-weight: 600;
margin-bottom: 12px;
}
.result-content {
margin: 12px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.delivery-box {
width: min(520px, 100%);
min-height: 120px;
padding: 14px 16px;
border-radius: 8px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.9);
color: var(--text);
font-size: 16px;
line-height: 1.7;
resize: none;
}
.error {
color: #d64848;
font-size: 15px;
}
.status {
padding: 24px 0;
color: var(--muted);
}
.free-price {
color: #3a9a68;
font-weight: 900;
}
.require-login-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 32px 24px;
text-align: center;
border: 1px solid var(--line);
border-radius: 8px;
background: rgba(255, 255, 255, 0.6);
}
.require-login-title {
font-size: 18px;
font-weight: 600;
color: var(--text);
}
.btn-inline {
display: inline-block;
text-decoration: none;
padding: 10px 28px;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.limit-hint {
color: var(--accent);
}
textarea {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--line);
font-size: 15px;
font-family: inherit;
background: rgba(255, 255, 255, 0.9);
color: var(--text);
resize: vertical;
}
.contact-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.delivery-tip {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: rgba(90, 120, 200, 0.08);
border: 1px solid rgba(90, 120, 200, 0.2);
border-radius: 8px;
color: #5a78c8;
font-size: 14px;
}
.manual-delivery-notice {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: rgba(90, 180, 120, 0.08);
border: 1px solid rgba(90, 180, 120, 0.25);
border-radius: 8px;
color: var(--text);
}
.manual-delivery-title {
font-size: 16px;
font-weight: 600;
color: #3a9a68;
margin: 0 0 4px 0;
}
@media (max-width: 900px) {
.checkout-grid {
grid-template-columns: 1fr;
}
.checkout-summary {
flex-direction: column;
align-items: center;
}
.checkout-summary img {
width: 100%;
height: 200px;
}
.contact-row {
grid-template-columns: 1fr;
}
}
</style>
<template>
<section class="page-card" v-if="!loading && product">
<div class="checkout-header">
<div>
<h2>立即下单 · {{ product.name }}</h2>
<p class="tag">一个扫码流程即可完成订单</p>
</div>
<button class="ghost" @click="goBack">返回商品</button>
</div>
<div class="checkout-grid">
<div class="checkout-summary">
<img :src="product.coverUrl" :alt="product.name" />
<div class="summary-content">
<h3>{{ product.name }}</h3>
<p class="tag">库存：{{ product.quantity }}</p>
<p class="tag">浏览量：{{ product.viewCount || 0 }}</p>
<p class="product-price">
<span v-if="isFree" class="free-price">免费</span>
<span
v-else-if="product.discountPrice > 0 && product.discountPrice < product.price"
>
<span class="price-original">¥ {{ product.price.toFixed(2) }}</span>
<span class="price-discount">¥ {{ product.discountPrice.toFixed(2) }}</span>
</span>
<span v-else>¥ {{ product.price.toFixed(2) }}</span>
</p>
<p class="markdown" v-html="renderMarkdown(product.description)"></p>
</div>
</div>
<div class="checkout-form" v-if="!orderResult && product.requireLogin && !loggedIn">
<div class="require-login-block">
<p class="require-login-title">该商品需要登录后才能购买</p>
<a class="primary btn-inline" :href="loginUrl">立即登录</a>
</div>
</div>
<form class="checkout-form" @submit.prevent="submitOrder" v-else-if="!orderResult">
<div class="form-field">
<label>下单数量</label>
<input
v-model.number="form.quantity"
min="1"
:max="product.maxPerAccount > 0 ? product.maxPerAccount : undefined"
type="number"
/>
</div>
<p class="tag">预计总价：¥ {{ totalPrice.toFixed(2) }}</p>
<p class="tag limit-hint" v-if="product.maxPerAccount > 0">
该商品每个账户最多可购买 {{ product.maxPerAccount }} 个
</p>
<div class="form-field" v-if="product.showNote">
<label>备注（选填）</label>
<textarea v-model="form.note" placeholder="填写您的备注信息…" rows="3"></textarea>
</div>
<template v-if="product.showContact">
<div class="form-row contact-row">
<div class="form-field">
<label>手机号（选填）</label>
<input v-model="form.contactPhone" type="tel" placeholder="138xxxx0000" />
</div>
<div class="form-field">
<label>邮箱（选填）</label>
<input v-model="form.contactEmail" type="email" placeholder="you@example.com" />
</div>
</div>
</template>
<p class="tag login-hint" v-if="!loggedIn">
<a :href="loginUrl">登录萌芽账号</a> 后购买可享受：历史订单记录、专属优惠商品及更多购买权益
</p>
<div class="delivery-tip" v-if="product.deliveryMode === 'manual'">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
该商品为手动发货，付款后管理员将核验并处理您的订单
</div>
<button class="primary" type="submit" :disabled="submitting">
{{ submitting ? '生成中...' : '生成二维码下单' }}
</button>
<p class="error" v-if="error">{{ error }}</p>
</form>
</div>
<section class="order-result" v-if="orderResult">
<h4>订单 {{ orderResult.orderId }} 已创建</h4>
<template v-if="!confirmed">
<p class="tag">请扫描下方二维码完成付款</p>
<img :src="orderResult.qrCodeUrl" alt="下单二维码" />
<div class="confirm-area">
<button class="primary" :disabled="confirming" @click="doConfirm">
{{ confirming ? '确认中...' : '我已完成扫码付款' }}
</button>
<p class="tag">扫码完成后点击上方按钮获取购买内容</p>
</div>
<p class="error" v-if="confirmError">{{ confirmError }}</p>
</template>
<template v-else>
<p class="tag confirmed-badge">订单已完成</p>
<div class="result-content" v-if="deliveredCodes.length">
<p class="tag">购买后内容</p>
<textarea class="delivery-box" readonly :value="deliveredCodes.join('\n')"></textarea>
</div>
<div v-else-if="isManualDelivery" class="manual-delivery-notice">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
<div>
<p class="manual-delivery-title">等待发货中</p>
<p class="tag">管理员将尽快处理您的订单并进行发货，请关注您的邮箱或联系方式。</p>
</div>
</div>
<p class="tag">感谢购买！如有问题请联系售后邮箱。</p>
</template>
</section>
</section>
<section class="page-card" v-else-if="!loading">
<h2>未找到该商品</h2>
<p class="tag">该商品无法下单，请返回商店页。</p>
<div class="detail-actions">
<button class="ghost" @click="goBack">返回商品</button>
</div>
</section>
<section class="page-card" v-else>
<div class="status">加载中...</div>
</section>
</template>
<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import MarkdownIt from 'markdown-it'
import { fetchProducts, createOrder, confirmOrder } from '../shared/api'
import { authState, isLoggedIn, getLoginUrl } from '../shared/auth'
const route = useRoute()
const router = useRouter()
const md = new MarkdownIt()
const product = ref(null)
const loading = ref(true)
const submitting = ref(false)
const error = ref('')
const orderResult = ref(null)
const confirmed = ref(false)
const confirming = ref(false)
const confirmError = ref('')
const deliveredCodes = ref([])
const loggedIn = computed(() => isLoggedIn())
const loginUrl = computed(() => getLoginUrl())
const form = reactive({
quantity: 1,
note: '',
contactPhone: '',
contactEmail: ''
})
const isManualDelivery = ref(false)
const renderMarkdown = (content) => md.render(content || '')
const getPayPrice = (p) => {
if (!p) return 0
if (p.price === 0) return 0
if (p.discountPrice > 0 && p.discountPrice < p.price) return p.discountPrice
return p.price
}
const unitPrice = computed(() => getPayPrice(product.value))
const isFree = computed(() => unitPrice.value === 0)
const totalPrice = computed(() => {
if (!product.value) {
return 0
}
const qty = form.quantity && form.quantity > 0 ? form.quantity : 1
return unitPrice.value * qty
})
const goBack = () => router.push('/')
const submitOrder = async () => {
if (!product.value) {
return
}
error.value = ''
submitting.value = true
orderResult.value = null
confirmed.value = false
deliveredCodes.value = []
try {
const payload = {
productId: product.value.id,
quantity: form.quantity,
note: form.note || '',
contactPhone: form.contactPhone || '',
contactEmail: form.contactEmail || '',
notifyEmail: authState.email || ''
}
const token = isLoggedIn() ? authState.token : null
const response = await createOrder(payload, token)
orderResult.value = response
} catch (err) {
error.value = err?.response?.data?.error || '下单失败，请稍候再试'
} finally {
submitting.value = false
}
}
const doConfirm = async () => {
if (!orderResult.value?.orderId) {
return
}
confirmError.value = ''
confirming.value = true
try {
const result = await confirmOrder(orderResult.value.orderId)
deliveredCodes.value = result.deliveredCodes || []
isManualDelivery.value = result.isManual || result.deliveryMode === 'manual'
confirmed.value = true
} catch (err) {
confirmError.value = err?.response?.data?.error || '确认失败，请重试'
} finally {
confirming.value = false
}
}
onMounted(async () => {
try {
const list = await fetchProducts()
product.value = list.find((item) => item.id === route.params.id) || null
} finally {
loading.value = false
}
})
</script>
<style scoped>
.checkout-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
.checkout-grid {
display: grid;
grid-template-columns: minmax(280px, 1fr) 320px;
gap: 24px;
margin-bottom: 20px;
}
.checkout-summary {
background: rgba(255, 255, 255, 0.8);
border-radius: var(--radius);
border: 1px solid var(--line);
padding: 18px;
display: flex;
gap: 18px;
}
.checkout-summary img {
width: 140px;
height: 140px;
object-fit: cover;
border-radius: 8px;
}
.summary-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.checkout-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.login-hint a {
color: var(--accent-2);
text-decoration: none;
font-weight: 600;
}
.login-hint a:hover {
text-decoration: underline;
}
.order-result {
margin-top: 16px;
text-align: center;
}
.order-result img {
max-width: 320px;
margin: 12px auto;
width: 100%;
border-radius: 8px;
border: 1px solid var(--line);
}
.confirm-area {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 16px 0;
}
.confirmed-badge {
display: inline-block;
padding: 6px 16px;
border-radius: 999px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: white;
font-size: 15px;
font-weight: 600;
margin-bottom: 12px;
}
.result-content {
margin: 12px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.delivery-box {
width: min(520px, 100%);
min-height: 120px;
padding: 14px 16px;
border-radius: 8px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.9);
color: var(--text);
font-size: 16px;
line-height: 1.7;
resize: none;
}
.error {
color: #d64848;
font-size: 15px;
}
.status {
padding: 24px 0;
color: var(--muted);
}
.free-price {
color: #3a9a68;
font-weight: 900;
}
.require-login-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 32px 24px;
text-align: center;
border: 1px solid var(--line);
border-radius: 8px;
background: rgba(255, 255, 255, 0.6);
}
.require-login-title {
font-size: 18px;
font-weight: 600;
color: var(--text);
}
.btn-inline {
display: inline-block;
text-decoration: none;
padding: 10px 28px;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.limit-hint {
color: var(--accent);
}
textarea {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--line);
font-size: 15px;
font-family: inherit;
background: rgba(255, 255, 255, 0.9);
color: var(--text);
resize: vertical;
}
.contact-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.delivery-tip {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: rgba(90, 120, 200, 0.08);
border: 1px solid rgba(90, 120, 200, 0.2);
border-radius: 8px;
color: #5a78c8;
font-size: 14px;
}
.manual-delivery-notice {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: rgba(90, 180, 120, 0.08);
border: 1px solid rgba(90, 180, 120, 0.25);
border-radius: 8px;
color: var(--text);
}
.manual-delivery-title {
font-size: 16px;
font-weight: 600;
color: #3a9a68;
margin: 0 0 4px 0;
}
@media (max-width: 900px) {
.checkout-grid {
grid-template-columns: 1fr;
}
.checkout-summary {
flex-direction: column;
align-items: center;
}
.checkout-summary img {
width: 100%;
height: 200px;
}
.contact-row {
grid-template-columns: 1fr;
}
}
</style>

690
mengyastore-frontend/src/modules/store/ProductDetail.vue
View File

@@ -1,345 +1,345 @@
<template>
<section class="page-card" v-if="!loading && product">
<div class="detail-body">
<div class="detail-summary">
<h2>{{ product.name }}</h2>
<p class="tag">库存：{{ product.quantity }}</p>
<p class="tag">浏览量：{{ product.viewCount || 0 }}</p>
<p class="product-price">
<span v-if="isFree" class="free-price">免费</span>
<span
v-else-if="product.discountPrice > 0 && product.discountPrice < product.price"
>
<span class="price-original">¥ {{ product.price.toFixed(2) }}</span>
<span class="price-discount">¥ {{ product.discountPrice.toFixed(2) }}</span>
</span>
<span v-else>¥ {{ product.price.toFixed(2) }}</span>
</p>
</div>
<div class="markdown detail-description" v-html="renderMarkdown(product.description)"></div>
<div class="detail-gallery" v-if="galleryImages.length">
<div class="detail-gallery-main">
<button
v-if="galleryImages.length > 1"
class="gallery-nav prev"
type="button"
aria-label="上一张"
@click="prevImage"
>
‹
</button>
<img
class="detail-image"
:src="galleryImages[currentImageIndex].url"
:alt="galleryImages[currentImageIndex].label"
/>
<button
v-if="galleryImages.length > 1"
class="gallery-nav next"
type="button"
aria-label="下一张"
@click="nextImage"
>
›
</button>
</div>
<div class="detail-gallery-meta">
<span class="badge">{{ galleryImages[currentImageIndex].label }}</span>
<span class="tag">{{ currentImageIndex + 1 }} / {{ galleryImages.length }}</span>
</div>
<div class="detail-thumbs" v-if="galleryImages.length > 1">
<button
v-for="(image, index) in galleryImages"
:key="`${image.url}-${index}`"
class="detail-thumb"
:class="{ active: index === currentImageIndex }"
type="button"
@click="currentImageIndex = index"
>
<img :src="image.url" :alt="image.label" />
<span>{{ image.label }}</span>
</button>
</div>
</div>
<div class="detail-actions">
<button class="buy-button" @click="goCheckout">立即下单</button>
<button
v-if="loggedIn"
class="ghost wishlist-action"
:class="{ 'wishlist-active': inWishlist }"
type="button"
@click="onToggleWishlist"
>
{{ inWishlist ? '★ 已收藏' : '☆ 加入收藏夹' }}
</button>
<button class="ghost" @click="goBack">返回商店首页</button>
</div>
</div>
</section>
<section class="page-card" v-else-if="!loading && !product">
<h2>未找到该商品</h2>
<p class="tag">请返回商店查看其他商品。</p>
<div class="detail-actions">
<button class="ghost" @click="goBack">返回商店首页</button>
</div>
</section>
<section class="page-card" v-else>
<div class="status">加载中...</div>
</section>
</template>
<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import MarkdownIt from 'markdown-it'
import { fetchProducts, recordProductView } from '../shared/api'
import { isLoggedIn } from '../shared/auth'
import { isInWishlist, toggleWishlist } from '../shared/useWishlist'
const route = useRoute()
const router = useRouter()
const md = new MarkdownIt()
const loading = ref(true)
const product = ref(null)
const currentImageIndex = ref(0)
const getPayPrice = (p) => {
if (!p) return 0
if (p.price === 0) return 0
if (p.discountPrice > 0 && p.discountPrice < p.price) return p.discountPrice
return p.price
}
const unitPrice = computed(() => getPayPrice(product.value))
const isFree = computed(() => unitPrice.value === 0)
const renderMarkdown = (content) => md.render(content || '')
const galleryImages = computed(() => {
if (!product.value) {
return []
}
const images = []
const seen = new Set()
const appendImage = (url, label) => {
const trimmed = (url || '').trim()
if (!trimmed || seen.has(trimmed)) {
return
}
seen.add(trimmed)
images.push({ url: trimmed, label })
}
appendImage(product.value.coverUrl, '商品封面')
const screenshots = Array.isArray(product.value.screenshotUrls)
? product.value.screenshotUrls
: []
screenshots.forEach((url, index) => {
appendImage(url, `商品截图 ${index + 1}`)
})
return images
})
const loggedIn = computed(() => isLoggedIn())
const inWishlist = computed(() => product.value ? isInWishlist(product.value.id) : false)
const onToggleWishlist = () => {
if (product.value) toggleWishlist(product.value.id)
}
const goBack = () => {
router.push('/')
}
const goCheckout = () => {
if (!product.value) {
return
}
router.push(`/checkout/${product.value.id}`)
}
const prevImage = () => {
if (!galleryImages.value.length) {
return
}
currentImageIndex.value =
(currentImageIndex.value - 1 + galleryImages.value.length) % galleryImages.value.length
}
const nextImage = () => {
if (!galleryImages.value.length) {
return
}
currentImageIndex.value = (currentImageIndex.value + 1) % galleryImages.value.length
}
watch(
galleryImages,
(images) => {
if (!images.length || currentImageIndex.value >= images.length) {
currentImageIndex.value = 0
}
},
{ immediate: true }
)
onMounted(async () => {
try {
const list = await fetchProducts()
product.value = list.find((item) => item.id === route.params.id) || null
if (product.value) {
try {
const result = await recordProductView(product.value.id)
if (typeof result.viewCount === 'number') {
product.value = {
...product.value,
viewCount: result.viewCount
}
}
} catch (error) {
console.warn('record product view failed', error)
}
}
} finally {
loading.value = false
}
})
</script>
<style scoped>
.detail-body {
display: flex;
flex-direction: column;
gap: 18px;
}
.detail-summary {
display: flex;
flex-direction: column;
gap: 8px;
}
.detail-description {
display: block;
color: var(--text);
font-size: 17px;
line-height: 1.8;
-webkit-line-clamp: initial;
-webkit-box-orient: initial;
overflow: visible;
}
.detail-gallery {
display: flex;
flex-direction: column;
gap: 14px;
}
.detail-gallery-main {
position: relative;
overflow: hidden;
border-radius: 10px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.45);
}
.gallery-nav {
position: absolute;
top: 50%;
z-index: 1;
width: 42px;
height: 42px;
border-radius: 999px;
padding: 0;
background: rgba(255, 255, 255, 0.88);
color: var(--text);
font-size: 28px;
line-height: 1;
transform: translateY(-50%);
box-shadow: 0 10px 20px rgba(33, 33, 40, 0.12);
}
.gallery-nav.prev {
left: 16px;
}
.gallery-nav.next {
right: 16px;
}
.detail-gallery-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.detail-thumbs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
}
.detail-thumb {
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px;
text-align: left;
background: rgba(255, 255, 255, 0.58);
border: 1px solid transparent;
}
.detail-thumb.active {
border-color: var(--accent-2);
box-shadow: 0 10px 24px rgba(145, 168, 208, 0.16);
}
.detail-thumb img {
width: 100%;
height: 76px;
object-fit: cover;
border-radius: 6px;
}
.detail-thumb span {
font-size: 14px;
color: var(--muted);
}
.status {
padding: 24px 0;
color: var(--muted);
}
.free-price {
color: #3a9a68;
font-weight: 900;
}
.wishlist-action {
color: var(--muted);
}
.wishlist-action.wishlist-active {
color: #e8826a;
border-color: rgba(232, 130, 106, 0.35);
background: rgba(255, 240, 235, 0.6);
}
@media (max-width: 900px) {
.detail-thumb {
padding: 6px;
}
}
</style>
<template>
<section class="page-card" v-if="!loading && product">
<div class="detail-body">
<div class="detail-summary">
<h2>{{ product.name }}</h2>
<p class="tag">库存：{{ product.quantity }}</p>
<p class="tag">浏览量：{{ product.viewCount || 0 }}</p>
<p class="product-price">
<span v-if="isFree" class="free-price">免费</span>
<span
v-else-if="product.discountPrice > 0 && product.discountPrice < product.price"
>
<span class="price-original">¥ {{ product.price.toFixed(2) }}</span>
<span class="price-discount">¥ {{ product.discountPrice.toFixed(2) }}</span>
</span>
<span v-else>¥ {{ product.price.toFixed(2) }}</span>
</p>
</div>
<div class="markdown detail-description" v-html="renderMarkdown(product.description)"></div>
<div class="detail-gallery" v-if="galleryImages.length">
<div class="detail-gallery-main">
<button
v-if="galleryImages.length > 1"
class="gallery-nav prev"
type="button"
aria-label="上一张"
@click="prevImage"
>
‹
</button>
<img
class="detail-image"
:src="galleryImages[currentImageIndex].url"
:alt="galleryImages[currentImageIndex].label"
/>
<button
v-if="galleryImages.length > 1"
class="gallery-nav next"
type="button"
aria-label="下一张"
@click="nextImage"
>
›
</button>
</div>
<div class="detail-gallery-meta">
<span class="badge">{{ galleryImages[currentImageIndex].label }}</span>
<span class="tag">{{ currentImageIndex + 1 }} / {{ galleryImages.length }}</span>
</div>
<div class="detail-thumbs" v-if="galleryImages.length > 1">
<button
v-for="(image, index) in galleryImages"
:key="`${image.url}-${index}`"
class="detail-thumb"
:class="{ active: index === currentImageIndex }"
type="button"
@click="currentImageIndex = index"
>
<img :src="image.url" :alt="image.label" />
<span>{{ image.label }}</span>
</button>
</div>
</div>
<div class="detail-actions">
<button class="buy-button" @click="goCheckout">立即下单</button>
<button
v-if="loggedIn"
class="ghost wishlist-action"
:class="{ 'wishlist-active': inWishlist }"
type="button"
@click="onToggleWishlist"
>
{{ inWishlist ? '★ 已收藏' : '☆ 加入收藏夹' }}
</button>
<button class="ghost" @click="goBack">返回商店首页</button>
</div>
</div>
</section>
<section class="page-card" v-else-if="!loading && !product">
<h2>未找到该商品</h2>
<p class="tag">请返回商店查看其他商品。</p>
<div class="detail-actions">
<button class="ghost" @click="goBack">返回商店首页</button>
</div>
</section>
<section class="page-card" v-else>
<div class="status">加载中...</div>
</section>
</template>
<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import MarkdownIt from 'markdown-it'
import { fetchProducts, recordProductView } from '../shared/api'
import { isLoggedIn } from '../shared/auth'
import { isInWishlist, toggleWishlist } from '../shared/useWishlist'
const route = useRoute()
const router = useRouter()
const md = new MarkdownIt()
const loading = ref(true)
const product = ref(null)
const currentImageIndex = ref(0)
const getPayPrice = (p) => {
if (!p) return 0
if (p.price === 0) return 0
if (p.discountPrice > 0 && p.discountPrice < p.price) return p.discountPrice
return p.price
}
const unitPrice = computed(() => getPayPrice(product.value))
const isFree = computed(() => unitPrice.value === 0)
const renderMarkdown = (content) => md.render(content || '')
const galleryImages = computed(() => {
if (!product.value) {
return []
}
const images = []
const seen = new Set()
const appendImage = (url, label) => {
const trimmed = (url || '').trim()
if (!trimmed || seen.has(trimmed)) {
return
}
seen.add(trimmed)
images.push({ url: trimmed, label })
}
appendImage(product.value.coverUrl, '商品封面')
const screenshots = Array.isArray(product.value.screenshotUrls)
? product.value.screenshotUrls
: []
screenshots.forEach((url, index) => {
appendImage(url, `商品截图 ${index + 1}`)
})
return images
})
const loggedIn = computed(() => isLoggedIn())
const inWishlist = computed(() => product.value ? isInWishlist(product.value.id) : false)
const onToggleWishlist = () => {
if (product.value) toggleWishlist(product.value.id)
}
const goBack = () => {
router.push('/')
}
const goCheckout = () => {
if (!product.value) {
return
}
router.push(`/checkout/${product.value.id}`)
}
const prevImage = () => {
if (!galleryImages.value.length) {
return
}
currentImageIndex.value =
(currentImageIndex.value - 1 + galleryImages.value.length) % galleryImages.value.length
}
const nextImage = () => {
if (!galleryImages.value.length) {
return
}
currentImageIndex.value = (currentImageIndex.value + 1) % galleryImages.value.length
}
watch(
galleryImages,
(images) => {
if (!images.length || currentImageIndex.value >= images.length) {
currentImageIndex.value = 0
}
},
{ immediate: true }
)
onMounted(async () => {
try {
const list = await fetchProducts()
product.value = list.find((item) => item.id === route.params.id) || null
if (product.value) {
try {
const result = await recordProductView(product.value.id)
if (typeof result.viewCount === 'number') {
product.value = {
...product.value,
viewCount: result.viewCount
}
}
} catch (error) {
console.warn('record product view failed', error)
}
}
} finally {
loading.value = false
}
})
</script>
<style scoped>
.detail-body {
display: flex;
flex-direction: column;
gap: 18px;
}
.detail-summary {
display: flex;
flex-direction: column;
gap: 8px;
}
.detail-description {
display: block;
color: var(--text);
font-size: 17px;
line-height: 1.8;
-webkit-line-clamp: initial;
-webkit-box-orient: initial;
overflow: visible;
}
.detail-gallery {
display: flex;
flex-direction: column;
gap: 14px;
}
.detail-gallery-main {
position: relative;
overflow: hidden;
border-radius: 10px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.45);
}
.gallery-nav {
position: absolute;
top: 50%;
z-index: 1;
width: 42px;
height: 42px;
border-radius: 999px;
padding: 0;
background: rgba(255, 255, 255, 0.88);
color: var(--text);
font-size: 28px;
line-height: 1;
transform: translateY(-50%);
box-shadow: 0 10px 20px rgba(33, 33, 40, 0.12);
}
.gallery-nav.prev {
left: 16px;
}
.gallery-nav.next {
right: 16px;
}
.detail-gallery-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.detail-thumbs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
}
.detail-thumb {
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px;
text-align: left;
background: rgba(255, 255, 255, 0.58);
border: 1px solid transparent;
}
.detail-thumb.active {
border-color: var(--accent-2);
box-shadow: 0 10px 24px rgba(145, 168, 208, 0.16);
}
.detail-thumb img {
width: 100%;
height: 76px;
object-fit: cover;
border-radius: 6px;
}
.detail-thumb span {
font-size: 14px;
color: var(--muted);
}
.status {
padding: 24px 0;
color: var(--muted);
}
.free-price {
color: #3a9a68;
font-weight: 900;
}
.wishlist-action {
color: var(--muted);
}
.wishlist-action.wishlist-active {
color: #e8826a;
border-color: rgba(232, 130, 106, 0.35);
background: rgba(255, 240, 235, 0.6);
}
@media (max-width: 900px) {
.detail-thumb {
padding: 6px;
}
}
</style>

584
mengyastore-frontend/src/modules/store/StorePage.vue
View File

@@ -1,292 +1,292 @@
<template>
<section class="page-card">
<div class="hero">
<h2>所有商品</h2>
<div class="filters">
<button
v-for="opt in VIEW_OPTIONS"
:key="opt.value"
class="filter-btn"
:class="{ active: viewMode === opt.value }"
type="button"
@click="setViewMode(opt.value)"
>
{{ opt.label }}
</button>
</div>
<input
v-model="searchQuery"
class="search-input"
type="text"
placeholder="搜索商品/标签"
/>
</div>
<div v-if="loading" class="status">加载中...</div>
<div v-else>
<div class="grid">
<ProductCard
v-for="item in pagedProducts"
:key="item.id"
:item="item"
@click="handleCardClick"
/>
</div>
<div class="pagination" v-if="totalPages > 1">
<button class="ghost pg-btn" :disabled="page === 1" @click="page = 1">首页</button>
<button class="ghost pg-btn" :disabled="page === 1" @click="page--">上一页</button>
<span class="pg-info">第 {{ page }} / {{ totalPages }} 页</span>
<button class="ghost pg-btn" :disabled="page === totalPages" @click="page++">下一页</button>
<button class="ghost pg-btn" :disabled="page === totalPages" @click="page = totalPages">末页</button>
</div>
</div>
</section>
</template>
<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { fetchProducts } from '../shared/api'
import ProductCard from './components/ProductCard.vue'
const router = useRouter()
const VIEW_OPTIONS = [
{ value: 'all', label: '全部' },
{ value: 'free', label: '免费' },
{ value: 'newest', label: '新上架' },
{ value: 'most-sold', label: '最多购买' },
{ value: 'most-viewed', label: '最多浏览' },
{ value: 'price-high', label: '价格最高' },
{ value: 'price-low', label: '价格最低' }
]
const products = ref([])
const loading = ref(true)
const page = ref(1)
const perPage = ref(20)
const viewMode = ref('all')
const searchQuery = ref('')
const updatePerPage = () => {
perPage.value = window.innerWidth <= 900 ? 10 : 20
page.value = 1
}
const getPayPrice = (item) => {
if (!item) return 0
// 折扣规则：discountPrice > 0 且小于原价时启用，price = 0 时显示"免费"
if (item.price === 0) return 0
if (item.discountPrice > 0 && item.discountPrice < item.price) return item.discountPrice
return item.price
}
const isFree = (item) => getPayPrice(item) === 0
const isSoldOut = (item) => item && item.quantity === 0
const matchesSearch = (item) => {
const q = (searchQuery.value || '').trim().toLowerCase()
if (!q) return true
const name = (item?.name || '').toLowerCase()
const tags = (item?.tags || []).join(',').toLowerCase()
return name.includes(q) || tags.includes(q)
}
const filteredProducts = computed(() => {
let list = [...products.value]
if (viewMode.value === 'free') list = list.filter((p) => isFree(p))
if ((searchQuery.value || '').trim()) list = list.filter((p) => matchesSearch(p))
switch (viewMode.value) {
case 'newest':
list.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
break
case 'most-sold':
list.sort((a, b) => (b.totalSold || 0) - (a.totalSold || 0))
break
case 'most-viewed':
list.sort((a, b) => (b.viewCount || 0) - (a.viewCount || 0))
break
case 'price-high':
list.sort((a, b) => getPayPrice(b) - getPayPrice(a))
break
case 'price-low':
list.sort((a, b) => getPayPrice(a) - getPayPrice(b))
break
default:
break
}
return list
})
const totalPages = computed(() =>
Math.max(1, Math.ceil(filteredProducts.value.length / perPage.value))
)
const pagedProducts = computed(() => {
const start = (page.value - 1) * perPage.value
return filteredProducts.value.slice(start, start + perPage.value)
})
const handleCardClick = (item) => {
if (!item || isSoldOut(item)) return
router.push(`/product/${item.id}`)
}
const setViewMode = (next) => {
viewMode.value = next
page.value = 1
}
onMounted(async () => {
updatePerPage()
window.addEventListener('resize', updatePerPage)
try {
products.value = await fetchProducts()
} finally {
loading.value = false
}
})
watch(viewMode, () => { page.value = 1 })
watch(searchQuery, () => { page.value = 1 })
onUnmounted(() => {
window.removeEventListener('resize', updatePerPage)
})
</script>
<style scoped>
.hero {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.filters {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.search-input {
width: 320px;
max-width: 100%;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.7);
padding: 10px 14px;
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
font-size: 16px;
outline: none;
}
.search-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(180, 154, 203, 0.18);
}
.filter-btn {
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.6);
color: var(--text);
font-size: 15px;
font-weight: 700;
transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.filter-btn:hover {
transform: translateY(-1px);
}
.filter-btn.active {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
border-color: transparent;
color: #fff;
box-shadow: 0 10px 30px rgba(145, 168, 208, 0.35);
}
.status {
padding: 24px 0;
color: var(--muted);
}
.tag {
font-size: 14px;
color: var(--muted);
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 22px;
flex-wrap: wrap;
}
.pg-btn {
padding: 6px 14px;
font-size: 14px;
border-radius: 999px;
min-width: 60px;
}
.pg-btn:disabled {
opacity: 0.38;
cursor: not-allowed;
}
.pg-info {
font-size: 14px;
color: var(--muted);
padding: 0 6px;
}
@media (max-width: 900px) {
.hero {
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
}
.hero h2 {
font-size: 20px;
}
/* Filter buttons: scrollable horizontal row, no wrap */
.filters {
flex-wrap: nowrap;
overflow-x: auto;
gap: 8px;
width: 100%;
padding-bottom: 4px;
scrollbar-width: none;
}
.filters::-webkit-scrollbar {
display: none;
}
.filter-btn {
flex-shrink: 0;
padding: 6px 10px;
font-size: 13px;
}
.search-input {
width: 100%;
font-size: 14px;
padding: 8px 12px;
}
}
</style>
<template>
<section class="page-card">
<div class="hero">
<h2>所有商品</h2>
<div class="filters">
<button
v-for="opt in VIEW_OPTIONS"
:key="opt.value"
class="filter-btn"
:class="{ active: viewMode === opt.value }"
type="button"
@click="setViewMode(opt.value)"
>
{{ opt.label }}
</button>
</div>
<input
v-model="searchQuery"
class="search-input"
type="text"
placeholder="搜索商品/标签"
/>
</div>
<div v-if="loading" class="status">加载中...</div>
<div v-else>
<div class="grid">
<ProductCard
v-for="item in pagedProducts"
:key="item.id"
:item="item"
@click="handleCardClick"
/>
</div>
<div class="pagination" v-if="totalPages > 1">
<button class="ghost pg-btn" :disabled="page === 1" @click="page = 1">首页</button>
<button class="ghost pg-btn" :disabled="page === 1" @click="page--">上一页</button>
<span class="pg-info">第 {{ page }} / {{ totalPages }} 页</span>
<button class="ghost pg-btn" :disabled="page === totalPages" @click="page++">下一页</button>
<button class="ghost pg-btn" :disabled="page === totalPages" @click="page = totalPages">末页</button>
</div>
</div>
</section>
</template>
<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { fetchProducts } from '../shared/api'
import ProductCard from './components/ProductCard.vue'
const router = useRouter()
const VIEW_OPTIONS = [
{ value: 'all', label: '全部' },
{ value: 'free', label: '免费' },
{ value: 'newest', label: '新上架' },
{ value: 'most-sold', label: '最多购买' },
{ value: 'most-viewed', label: '最多浏览' },
{ value: 'price-high', label: '价格最高' },
{ value: 'price-low', label: '价格最低' }
]
const products = ref([])
const loading = ref(true)
const page = ref(1)
const perPage = ref(20)
const viewMode = ref('all')
const searchQuery = ref('')
const updatePerPage = () => {
perPage.value = window.innerWidth <= 900 ? 10 : 20
page.value = 1
}
const getPayPrice = (item) => {
if (!item) return 0
// 折扣规则：discountPrice > 0 且小于原价时启用，price = 0 时显示"免费"
if (item.price === 0) return 0
if (item.discountPrice > 0 && item.discountPrice < item.price) return item.discountPrice
return item.price
}
const isFree = (item) => getPayPrice(item) === 0
const isSoldOut = (item) => item && item.quantity === 0
const matchesSearch = (item) => {
const q = (searchQuery.value || '').trim().toLowerCase()
if (!q) return true
const name = (item?.name || '').toLowerCase()
const tags = (item?.tags || []).join(',').toLowerCase()
return name.includes(q) || tags.includes(q)
}
const filteredProducts = computed(() => {
let list = [...products.value]
if (viewMode.value === 'free') list = list.filter((p) => isFree(p))
if ((searchQuery.value || '').trim()) list = list.filter((p) => matchesSearch(p))
switch (viewMode.value) {
case 'newest':
list.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
break
case 'most-sold':
list.sort((a, b) => (b.totalSold || 0) - (a.totalSold || 0))
break
case 'most-viewed':
list.sort((a, b) => (b.viewCount || 0) - (a.viewCount || 0))
break
case 'price-high':
list.sort((a, b) => getPayPrice(b) - getPayPrice(a))
break
case 'price-low':
list.sort((a, b) => getPayPrice(a) - getPayPrice(b))
break
default:
break
}
return list
})
const totalPages = computed(() =>
Math.max(1, Math.ceil(filteredProducts.value.length / perPage.value))
)
const pagedProducts = computed(() => {
const start = (page.value - 1) * perPage.value
return filteredProducts.value.slice(start, start + perPage.value)
})
const handleCardClick = (item) => {
if (!item || isSoldOut(item)) return
router.push(`/product/${item.id}`)
}
const setViewMode = (next) => {
viewMode.value = next
page.value = 1
}
onMounted(async () => {
updatePerPage()
window.addEventListener('resize', updatePerPage)
try {
products.value = await fetchProducts()
} finally {
loading.value = false
}
})
watch(viewMode, () => { page.value = 1 })
watch(searchQuery, () => { page.value = 1 })
onUnmounted(() => {
window.removeEventListener('resize', updatePerPage)
})
</script>
<style scoped>
.hero {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.filters {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.search-input {
width: 320px;
max-width: 100%;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.7);
padding: 10px 14px;
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
font-size: 16px;
outline: none;
}
.search-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(180, 154, 203, 0.18);
}
.filter-btn {
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.6);
color: var(--text);
font-size: 15px;
font-weight: 700;
transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.filter-btn:hover {
transform: translateY(-1px);
}
.filter-btn.active {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
border-color: transparent;
color: #fff;
box-shadow: 0 10px 30px rgba(145, 168, 208, 0.35);
}
.status {
padding: 24px 0;
color: var(--muted);
}
.tag {
font-size: 14px;
color: var(--muted);
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 22px;
flex-wrap: wrap;
}
.pg-btn {
padding: 6px 14px;
font-size: 14px;
border-radius: 999px;
min-width: 60px;
}
.pg-btn:disabled {
opacity: 0.38;
cursor: not-allowed;
}
.pg-info {
font-size: 14px;
color: var(--muted);
padding: 0 6px;
}
@media (max-width: 900px) {
.hero {
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
}
.hero h2 {
font-size: 20px;
}
/* Filter buttons: scrollable horizontal row, no wrap */
.filters {
flex-wrap: nowrap;
overflow-x: auto;
gap: 8px;
width: 100%;
padding-bottom: 4px;
scrollbar-width: none;
}
.filters::-webkit-scrollbar {
display: none;
}
.filter-btn {
flex-shrink: 0;
padding: 6px 10px;
font-size: 13px;
}
.search-input {
width: 100%;
font-size: 14px;
padding: 8px 12px;
}
}
</style>

684
mengyastore-frontend/src/modules/store/components/ProductCard.vue
View File

@@ -1,342 +1,342 @@
<template>
<div
:class="['product-link', { 'is-disabled': isSoldOut }]"
@click="$emit('click', item)"
>
<article class="product-card">
<div class="cover-wrap">
<img :src="item.coverUrl" :alt="item.name" />
<div v-if="isSoldOut" class="soldout-badge">已售空</div>
<div v-else-if="item.requireLogin" class="require-login-badge">需登录</div>
<button
v-if="loggedIn"
class="wishlist-btn"
:class="{ 'in-wishlist': inWishlist }"
type="button"
@click="onWishlistClick"
:title="inWishlist ? '取消收藏' : '加入收藏'"
>
{{ inWishlist ? '★' : '☆' }}
</button>
</div>
<div class="card-top">
<h3 class="card-name">{{ item.name }}</h3>
<div class="card-price">
<span v-if="isFree" class="product-price free-price">免费</span>
<span
v-else-if="item.discountPrice > 0 && item.discountPrice < item.price"
class="product-price"
>
<span class="price-original">¥ {{ item.price.toFixed(2) }}</span>
<span class="price-discount">¥ {{ item.discountPrice.toFixed(2) }}</span>
</span>
<span v-else class="product-price">¥ {{ item.price.toFixed(2) }}</span>
</div>
</div>
<div class="card-mid">
<div class="markdown" v-html="renderedDescription"></div>
</div>
<div class="card-bottom">
<div v-if="item.tags && item.tags.length" class="tag-row">
<span v-for="tag in item.tags" :key="tag" class="tag-chip">{{ tag }}</span>
</div>
<div class="meta-row">
<div class="tag">库存：{{ item.quantity }}</div>
<div class="tag">浏览量：{{ item.viewCount || 0 }}</div>
</div>
</div>
</article>
</div>
</template>
<script setup>
import { computed } from 'vue'
import MarkdownIt from 'markdown-it'
import { isLoggedIn } from '../../shared/auth'
import { isInWishlist, toggleWishlist } from '../../shared/useWishlist'
const md = new MarkdownIt()
const props = defineProps({
item: { type: Object, required: true }
})
const emit = defineEmits(['click'])
const inWishlist = computed(() => isInWishlist(props.item.id))
const loggedIn = computed(() => isLoggedIn())
const onWishlistClick = (e) => {
e.stopPropagation()
toggleWishlist(props.item.id)
}
const payPrice = computed(() => {
if (!props.item) return 0
if (props.item.price === 0) return 0
if (props.item.discountPrice > 0 && props.item.discountPrice < props.item.price) {
return props.item.discountPrice
}
return props.item.price
})
const isFree = computed(() => payPrice.value === 0)
const isSoldOut = computed(() => props.item && props.item.quantity === 0)
const renderedDescription = computed(() => md.render(props.item.description || ''))
</script>
<style scoped>
.product-link {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
}
.product-link.is-disabled {
opacity: 0.6;
cursor: not-allowed;
}
.product-card {
display: flex;
flex-direction: column;
flex: 1;
gap: 12px;
height: 100%;
}
.card-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.card-name {
font-size: 18px;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.card-price {
display: flex;
align-items: center;
justify-content: flex-end;
}
.card-mid {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.card-mid .markdown {
text-align: center;
font-size: 15px;
color: var(--muted);
line-height: 1.6;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.card-bottom {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
}
.meta-row {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.cover-wrap {
position: relative;
border-radius: 6px;
overflow: hidden;
}
.cover-wrap img {
width: 100%;
height: 140px;
object-fit: cover;
display: block;
}
.soldout-badge {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(20, 18, 22, 0.52);
backdrop-filter: blur(3px);
color: #fff;
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
font-size: 22px;
font-weight: 600;
letter-spacing: 4px;
pointer-events: none;
}
.require-login-badge {
position: absolute;
top: 8px;
right: 8px;
padding: 3px 10px;
border-radius: 999px;
background: rgba(180, 154, 203, 0.85);
color: #fff;
font-size: 13px;
font-weight: 700;
pointer-events: none;
backdrop-filter: blur(4px);
letter-spacing: 0.5px;
}
.wishlist-btn {
position: absolute;
bottom: 8px;
right: 8px;
width: auto;
height: auto;
border-radius: 0;
border: none;
background: none;
backdrop-filter: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 1;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
transition: color 0.2s ease, transform 0.15s ease;
padding: 0;
box-shadow: none;
}
.wishlist-btn:hover {
transform: scale(1.2);
}
.wishlist-btn.in-wishlist {
color: #ffb347;
text-shadow: 0 1px 6px rgba(255, 140, 0, 0.6);
}
.tag-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.tag-chip {
padding: 4px 10px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
color: var(--accent-2);
background: rgba(145, 168, 208, 0.08);
border: 1px solid rgba(145, 168, 208, 0.18);
}
.tag {
font-size: 14px;
color: var(--muted);
}
.free-price {
color: #3a9a68;
font-weight: 900;
}
.price-original {
text-decoration: line-through;
color: var(--muted);
margin-right: 6px;
font-size: 15px;
}
.price-discount {
color: var(--accent-2);
font-weight: 600;
}
@media (max-width: 900px) {
.cover-wrap img {
height: 100px;
}
/* Name + price on one line, compressed */
.card-top {
flex-direction: row;
align-items: flex-start;
gap: 4px;
}
.card-name {
font-size: 14px;
line-height: 1.3;
flex: 1;
min-width: 0;
word-break: break-all;
}
.card-price {
flex-shrink: 0;
font-size: 13px;
}
.price-original {
font-size: 11px;
margin-right: 2px;
}
.free-price {
font-size: 13px;
}
.card-mid {
display: flex;
}
.card-mid .markdown {
font-size: 12px;
-webkit-line-clamp: 2;
}
.card-bottom {
gap: 4px;
font-size: 12px;
}
.tag-row {
display: flex;
gap: 4px;
margin-top: 4px;
}
.tag-chip {
font-size: 11px;
padding: 2px 7px;
}
.tag {
font-size: 11px;
}
}
</style>
<template>
<div
:class="['product-link', { 'is-disabled': isSoldOut }]"
@click="$emit('click', item)"
>
<article class="product-card">
<div class="cover-wrap">
<img :src="item.coverUrl" :alt="item.name" />
<div v-if="isSoldOut" class="soldout-badge">已售空</div>
<div v-else-if="item.requireLogin" class="require-login-badge">需登录</div>
<button
v-if="loggedIn"
class="wishlist-btn"
:class="{ 'in-wishlist': inWishlist }"
type="button"
@click="onWishlistClick"
:title="inWishlist ? '取消收藏' : '加入收藏'"
>
{{ inWishlist ? '★' : '☆' }}
</button>
</div>
<div class="card-top">
<h3 class="card-name">{{ item.name }}</h3>
<div class="card-price">
<span v-if="isFree" class="product-price free-price">免费</span>
<span
v-else-if="item.discountPrice > 0 && item.discountPrice < item.price"
class="product-price"
>
<span class="price-original">¥ {{ item.price.toFixed(2) }}</span>
<span class="price-discount">¥ {{ item.discountPrice.toFixed(2) }}</span>
</span>
<span v-else class="product-price">¥ {{ item.price.toFixed(2) }}</span>
</div>
</div>
<div class="card-mid">
<div class="markdown" v-html="renderedDescription"></div>
</div>
<div class="card-bottom">
<div v-if="item.tags && item.tags.length" class="tag-row">
<span v-for="tag in item.tags" :key="tag" class="tag-chip">{{ tag }}</span>
</div>
<div class="meta-row">
<div class="tag">库存：{{ item.quantity }}</div>
<div class="tag">浏览量：{{ item.viewCount || 0 }}</div>
</div>
</div>
</article>
</div>
</template>
<script setup>
import { computed } from 'vue'
import MarkdownIt from 'markdown-it'
import { isLoggedIn } from '../../shared/auth'
import { isInWishlist, toggleWishlist } from '../../shared/useWishlist'
const md = new MarkdownIt()
const props = defineProps({
item: { type: Object, required: true }
})
const emit = defineEmits(['click'])
const inWishlist = computed(() => isInWishlist(props.item.id))
const loggedIn = computed(() => isLoggedIn())
const onWishlistClick = (e) => {
e.stopPropagation()
toggleWishlist(props.item.id)
}
const payPrice = computed(() => {
if (!props.item) return 0
if (props.item.price === 0) return 0
if (props.item.discountPrice > 0 && props.item.discountPrice < props.item.price) {
return props.item.discountPrice
}
return props.item.price
})
const isFree = computed(() => payPrice.value === 0)
const isSoldOut = computed(() => props.item && props.item.quantity === 0)
const renderedDescription = computed(() => md.render(props.item.description || ''))
</script>
<style scoped>
.product-link {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
}
.product-link.is-disabled {
opacity: 0.6;
cursor: not-allowed;
}
.product-card {
display: flex;
flex-direction: column;
flex: 1;
gap: 12px;
height: 100%;
}
.card-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.card-name {
font-size: 18px;
font-weight: 700;
color: var(--text);
line-height: 1.2;
}
.card-price {
display: flex;
align-items: center;
justify-content: flex-end;
}
.card-mid {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.card-mid .markdown {
text-align: center;
font-size: 15px;
color: var(--muted);
line-height: 1.6;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.card-bottom {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
}
.meta-row {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.cover-wrap {
position: relative;
border-radius: 6px;
overflow: hidden;
}
.cover-wrap img {
width: 100%;
height: 140px;
object-fit: cover;
display: block;
}
.soldout-badge {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(20, 18, 22, 0.52);
backdrop-filter: blur(3px);
color: #fff;
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
font-size: 22px;
font-weight: 600;
letter-spacing: 4px;
pointer-events: none;
}
.require-login-badge {
position: absolute;
top: 8px;
right: 8px;
padding: 3px 10px;
border-radius: 999px;
background: rgba(180, 154, 203, 0.85);
color: #fff;
font-size: 13px;
font-weight: 700;
pointer-events: none;
backdrop-filter: blur(4px);
letter-spacing: 0.5px;
}
.wishlist-btn {
position: absolute;
bottom: 8px;
right: 8px;
width: auto;
height: auto;
border-radius: 0;
border: none;
background: none;
backdrop-filter: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 1;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
transition: color 0.2s ease, transform 0.15s ease;
padding: 0;
box-shadow: none;
}
.wishlist-btn:hover {
transform: scale(1.2);
}
.wishlist-btn.in-wishlist {
color: #ffb347;
text-shadow: 0 1px 6px rgba(255, 140, 0, 0.6);
}
.tag-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.tag-chip {
padding: 4px 10px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
color: var(--accent-2);
background: rgba(145, 168, 208, 0.08);
border: 1px solid rgba(145, 168, 208, 0.18);
}
.tag {
font-size: 14px;
color: var(--muted);
}
.free-price {
color: #3a9a68;
font-weight: 900;
}
.price-original {
text-decoration: line-through;
color: var(--muted);
margin-right: 6px;
font-size: 15px;
}
.price-discount {
color: var(--accent-2);
font-weight: 600;
}
@media (max-width: 900px) {
.cover-wrap img {
height: 100px;
}
/* Name + price on one line, compressed */
.card-top {
flex-direction: row;
align-items: flex-start;
gap: 4px;
}
.card-name {
font-size: 14px;
line-height: 1.3;
flex: 1;
min-width: 0;
word-break: break-all;
}
.card-price {
flex-shrink: 0;
font-size: 13px;
}
.price-original {
font-size: 11px;
margin-right: 2px;
}
.free-price {
font-size: 13px;
}
.card-mid {
display: flex;
}
.card-mid .markdown {
font-size: 12px;
-webkit-line-clamp: 2;
}
.card-bottom {
gap: 4px;
font-size: 12px;
}
.tag-row {
display: flex;
gap: 4px;
margin-top: 4px;
}
.tag-chip {
font-size: 11px;
padding: 2px 7px;
}
.tag {
font-size: 11px;
}
}
</style>

730
mengyastore-frontend/src/modules/user/MyOrdersPage.vue
View File

@@ -1,365 +1,365 @@
<template>
<section class="page-card" v-if="!loggedIn">
<div class="auth-prompt">
<h2>请先登录</h2>
<p class="tag">登录萌芽账号后即可查看你的历史订单记录。</p>
<a class="login-btn" :href="loginUrl">使用萌芽账号登录</a>
</div>
</section>
<section class="page-card" v-else>
<div class="orders-header">
<div class="header-info">
<h2>我的订单</h2>
<p class="tag">
{{ authState.username || authState.account }}
<span v-if="orders.length" class="order-count">共 {{ orders.length }} 笔</span>
</p>
</div>
<div class="orders-actions">
<button class="ghost small-act" @click="refresh">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
刷新
</button>
<button class="ghost small-act" @click="goHome">← 返回商店</button>
</div>
</div>
<div v-if="loading" class="status">加载中…</div>
<div v-else-if="orders.length === 0" class="empty-state">
<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.3"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
<p>暂无订单记录</p>
</div>
<div v-else class="orders-list">
<div v-for="order in orders" :key="order.id" class="order-card">
<!-- Card header -->
<div class="order-card-header">
<div class="order-product-name">{{ order.productName }}</div>
<div class="order-status-badge" :class="order.deliveryMode === 'manual' && !order.deliveredCodes?.length ? 'badge-pending' : 'badge-done'">
{{ order.deliveryMode === 'manual' && !order.deliveredCodes?.length ? '等待发货' : '已完成' }}
</div>
</div>
<!-- Meta row -->
<div class="order-meta-row">
<span class="meta-item">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
{{ formatTime(order.createdAt) }}
</span>
<span class="meta-item">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12V22H4V12"/><path d="M22 7H2v5h20V7z"/><path d="M12 22V7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/></svg>
× {{ order.quantity }} 件
</span>
<span class="order-id-tag">{{ order.id.slice(0, 8) }}…</span>
</div>
<!-- Delivered codes -->
<div class="order-codes" v-if="order.deliveredCodes?.length">
<div class="codes-label">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
发货内容
</div>
<div class="codes-list">
<div v-for="(code, i) in order.deliveredCodes" :key="i" class="code-item">
<span class="code-index">{{ i + 1 }}</span>
<span class="code-text">{{ code }}</span>
</div>
</div>
</div>
<!-- Manual delivery pending -->
<div class="pending-notice" v-else-if="order.deliveryMode === 'manual'">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
订单已提交，等待人工发货，请耐心等候
</div>
</div>
</div>
</section>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { fetchMyOrders } from '../shared/api'
import { authState, isLoggedIn, getLoginUrl } from '../shared/auth'
const router = useRouter()
const orders = ref([])
const loading = ref(true)
const loggedIn = computed(() => isLoggedIn())
const loginUrl = computed(() => getLoginUrl())
const goHome = () => router.push('/')
const formatTime = (isoStr) => {
if (!isoStr) return ''
try {
const d = new Date(isoStr)
return d.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
})
} catch {
return isoStr
}
}
const refresh = async () => {
if (!isLoggedIn()) return
loading.value = true
try {
orders.value = await fetchMyOrders(authState.token)
} catch {
orders.value = []
} finally {
loading.value = false
}
}
onMounted(() => {
if (isLoggedIn()) {
refresh()
} else {
loading.value = false
}
})
</script>
<style scoped>
/* ── Auth prompt ── */
.auth-prompt {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 48px 0;
text-align: center;
}
/* ── Header ── */
.orders-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 22px;
flex-wrap: wrap;
}
.header-info h2 {
margin: 0 0 4px;
font-size: 22px;
}
.order-count {
margin-left: 6px;
font-size: 13px;
color: var(--muted);
background: rgba(180, 154, 203, 0.12);
padding: 2px 8px;
border-radius: 999px;
}
.orders-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.small-act {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
padding: 6px 12px;
}
/* ── Empty & loading ── */
.status {
padding: 24px 0;
color: var(--muted);
font-size: 14px;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 48px 0;
color: var(--muted);
font-size: 14px;
}
/* ── Order list ── */
.orders-list {
display: flex;
flex-direction: column;
gap: 14px;
}
/* ── Order card ── */
.order-card {
padding: 0;
border-radius: 10px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid var(--line);
overflow: hidden;
transition: box-shadow 0.2s;
}
.order-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.order-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px 10px;
}
.order-product-name {
font-size: 16px;
font-weight: 700;
color: var(--text);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.order-status-badge {
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
flex-shrink: 0;
}
.badge-done {
background: rgba(100, 185, 140, 0.15);
color: #3a9a68;
}
.badge-pending {
background: rgba(145, 168, 208, 0.15);
color: #5a7db0;
}
/* Meta row */
.order-meta-row {
display: flex;
align-items: center;
gap: 14px;
padding: 0 16px 12px;
flex-wrap: wrap;
border-bottom: 1px solid var(--line);
}
.meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: var(--muted);
}
.order-id-tag {
font-size: 11px;
color: var(--muted);
font-family: monospace;
background: rgba(0,0,0,0.04);
padding: 2px 7px;
border-radius: 4px;
}
/* Codes */
.order-codes {
padding: 12px 16px;
}
.codes-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.codes-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.code-item {
display: flex;
align-items: baseline;
gap: 10px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--line);
border-radius: 6px;
}
.code-index {
font-size: 11px;
color: var(--muted);
font-weight: 700;
min-width: 16px;
flex-shrink: 0;
}
.code-text {
font-size: 14px;
color: var(--text);
word-break: break-all;
font-family: monospace;
line-height: 1.5;
}
/* Pending notice */
.pending-notice {
display: flex;
align-items: center;
gap: 8px;
margin: 12px 16px;
padding: 10px 14px;
background: rgba(145, 168, 208, 0.1);
border-radius: 6px;
border-left: 3px solid var(--accent-2);
font-size: 13px;
color: #5a7db0;
}
@media (max-width: 900px) {
.orders-header {
gap: 10px;
}
.header-info h2 {
font-size: 18px;
}
.order-product-name {
font-size: 15px;
}
.order-meta-row {
gap: 10px;
}
}
</style>
<template>
<section class="page-card" v-if="!loggedIn">
<div class="auth-prompt">
<h2>请先登录</h2>
<p class="tag">登录萌芽账号后即可查看你的历史订单记录。</p>
<a class="login-btn" :href="loginUrl">使用萌芽账号登录</a>
</div>
</section>
<section class="page-card" v-else>
<div class="orders-header">
<div class="header-info">
<h2>我的订单</h2>
<p class="tag">
{{ authState.username || authState.account }}
<span v-if="orders.length" class="order-count">共 {{ orders.length }} 笔</span>
</p>
</div>
<div class="orders-actions">
<button class="ghost small-act" @click="refresh">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
刷新
</button>
<button class="ghost small-act" @click="goHome">← 返回商店</button>
</div>
</div>
<div v-if="loading" class="status">加载中…</div>
<div v-else-if="orders.length === 0" class="empty-state">
<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.3"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
<p>暂无订单记录</p>
</div>
<div v-else class="orders-list">
<div v-for="order in orders" :key="order.id" class="order-card">
<!-- Card header -->
<div class="order-card-header">
<div class="order-product-name">{{ order.productName }}</div>
<div class="order-status-badge" :class="order.deliveryMode === 'manual' && !order.deliveredCodes?.length ? 'badge-pending' : 'badge-done'">
{{ order.deliveryMode === 'manual' && !order.deliveredCodes?.length ? '等待发货' : '已完成' }}
</div>
</div>
<!-- Meta row -->
<div class="order-meta-row">
<span class="meta-item">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
{{ formatTime(order.createdAt) }}
</span>
<span class="meta-item">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12V22H4V12"/><path d="M22 7H2v5h20V7z"/><path d="M12 22V7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/></svg>
× {{ order.quantity }} 件
</span>
<span class="order-id-tag">{{ order.id.slice(0, 8) }}…</span>
</div>
<!-- Delivered codes -->
<div class="order-codes" v-if="order.deliveredCodes?.length">
<div class="codes-label">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
发货内容
</div>
<div class="codes-list">
<div v-for="(code, i) in order.deliveredCodes" :key="i" class="code-item">
<span class="code-index">{{ i + 1 }}</span>
<span class="code-text">{{ code }}</span>
</div>
</div>
</div>
<!-- Manual delivery pending -->
<div class="pending-notice" v-else-if="order.deliveryMode === 'manual'">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
订单已提交，等待人工发货，请耐心等候
</div>
</div>
</div>
</section>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { fetchMyOrders } from '../shared/api'
import { authState, isLoggedIn, getLoginUrl } from '../shared/auth'
const router = useRouter()
const orders = ref([])
const loading = ref(true)
const loggedIn = computed(() => isLoggedIn())
const loginUrl = computed(() => getLoginUrl())
const goHome = () => router.push('/')
const formatTime = (isoStr) => {
if (!isoStr) return ''
try {
const d = new Date(isoStr)
return d.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
})
} catch {
return isoStr
}
}
const refresh = async () => {
if (!isLoggedIn()) return
loading.value = true
try {
orders.value = await fetchMyOrders(authState.token)
} catch {
orders.value = []
} finally {
loading.value = false
}
}
onMounted(() => {
if (isLoggedIn()) {
refresh()
} else {
loading.value = false
}
})
</script>
<style scoped>
/* ── Auth prompt ── */
.auth-prompt {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 48px 0;
text-align: center;
}
/* ── Header ── */
.orders-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 22px;
flex-wrap: wrap;
}
.header-info h2 {
margin: 0 0 4px;
font-size: 22px;
}
.order-count {
margin-left: 6px;
font-size: 13px;
color: var(--muted);
background: rgba(180, 154, 203, 0.12);
padding: 2px 8px;
border-radius: 999px;
}
.orders-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.small-act {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
padding: 6px 12px;
}
/* ── Empty & loading ── */
.status {
padding: 24px 0;
color: var(--muted);
font-size: 14px;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 48px 0;
color: var(--muted);
font-size: 14px;
}
/* ── Order list ── */
.orders-list {
display: flex;
flex-direction: column;
gap: 14px;
}
/* ── Order card ── */
.order-card {
padding: 0;
border-radius: 10px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid var(--line);
overflow: hidden;
transition: box-shadow 0.2s;
}
.order-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.order-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px 10px;
}
.order-product-name {
font-size: 16px;
font-weight: 700;
color: var(--text);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.order-status-badge {
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
flex-shrink: 0;
}
.badge-done {
background: rgba(100, 185, 140, 0.15);
color: #3a9a68;
}
.badge-pending {
background: rgba(145, 168, 208, 0.15);
color: #5a7db0;
}
/* Meta row */
.order-meta-row {
display: flex;
align-items: center;
gap: 14px;
padding: 0 16px 12px;
flex-wrap: wrap;
border-bottom: 1px solid var(--line);
}
.meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: var(--muted);
}
.order-id-tag {
font-size: 11px;
color: var(--muted);
font-family: monospace;
background: rgba(0,0,0,0.04);
padding: 2px 7px;
border-radius: 4px;
}
/* Codes */
.order-codes {
padding: 12px 16px;
}
.codes-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.codes-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.code-item {
display: flex;
align-items: baseline;
gap: 10px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--line);
border-radius: 6px;
}
.code-index {
font-size: 11px;
color: var(--muted);
font-weight: 700;
min-width: 16px;
flex-shrink: 0;
}
.code-text {
font-size: 14px;
color: var(--text);
word-break: break-all;
font-family: monospace;
line-height: 1.5;
}
/* Pending notice */
.pending-notice {
display: flex;
align-items: center;
gap: 8px;
margin: 12px 16px;
padding: 10px 14px;
background: rgba(145, 168, 208, 0.1);
border-radius: 6px;
border-left: 3px solid var(--accent-2);
font-size: 13px;
color: #5a7db0;
}
@media (max-width: 900px) {
.orders-header {
gap: 10px;
}
.header-info h2 {
font-size: 18px;
}
.order-product-name {
font-size: 15px;
}
.order-meta-row {
gap: 10px;
}
}
</style>

216
mengyastore-frontend/src/modules/wishlist/WishlistPage.vue
View File

@@ -1,108 +1,108 @@
<template>
<section class="page-card">
<div class="hero">
<h2>我的收藏夹</h2>
<p class="tag">共 {{ wishlistItems.length }} 件商品</p>
</div>
<div v-if="loading" class="status">加载中...</div>
<div v-else-if="wishlistItems.length === 0" class="empty">
<div class="empty-icon">☆</div>
<p class="empty-title">收藏夹是空的</p>
<p class="tag">在商品卡片上点击 ☆ 即可加入收藏</p>
<button class="ghost" @click="$router.push('/')">去逛逛</button>
</div>
<div v-else class="grid">
<ProductCard
v-for="item in wishlistItems"
:key="item.id"
:item="item"
:class="{ 'card-dimmed': !item.active || item.quantity === 0 }"
@click="handleClick"
/>
</div>
</section>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { fetchProducts } from '../shared/api'
import { getWishlistProducts, loadWishlist } from '../shared/useWishlist'
import ProductCard from '../store/components/ProductCard.vue'
const router = useRouter()
const allProducts = ref([])
const loading = ref(true)
const wishlistItems = computed(() => {
const items = getWishlistProducts(allProducts.value)
return items.sort((a, b) => {
const aOk = a.active && a.quantity > 0 ? 0 : 1
const bOk = b.active && b.quantity > 0 ? 0 : 1
return aOk - bOk
})
})
const handleClick = (item) => {
if (!item) return
if (!item.active || item.quantity === 0) return
router.push(`/product/${item.id}`)
}
onMounted(async () => {
try {
const [prods] = await Promise.all([fetchProducts(), loadWishlist()])
allProducts.value = prods
} finally {
loading.value = false
}
})
</script>
<style scoped>
.hero {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 20px;
}
.status {
padding: 24px 0;
color: var(--muted);
}
.tag {
font-size: 14px;
color: var(--muted);
}
.empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 60px 0;
text-align: center;
}
.empty-icon {
font-size: 52px;
color: var(--muted);
opacity: 0.4;
line-height: 1;
}
.empty-title {
font-size: 20px;
font-weight: 600;
color: var(--text);
}
.card-dimmed {
opacity: 0.5;
}
</style>
<template>
<section class="page-card">
<div class="hero">
<h2>我的收藏夹</h2>
<p class="tag">共 {{ wishlistItems.length }} 件商品</p>
</div>
<div v-if="loading" class="status">加载中...</div>
<div v-else-if="wishlistItems.length === 0" class="empty">
<div class="empty-icon">☆</div>
<p class="empty-title">收藏夹是空的</p>
<p class="tag">在商品卡片上点击 ☆ 即可加入收藏</p>
<button class="ghost" @click="$router.push('/')">去逛逛</button>
</div>
<div v-else class="grid">
<ProductCard
v-for="item in wishlistItems"
:key="item.id"
:item="item"
:class="{ 'card-dimmed': !item.active || item.quantity === 0 }"
@click="handleClick"
/>
</div>
</section>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { fetchProducts } from '../shared/api'
import { getWishlistProducts, loadWishlist } from '../shared/useWishlist'
import ProductCard from '../store/components/ProductCard.vue'
const router = useRouter()
const allProducts = ref([])
const loading = ref(true)
const wishlistItems = computed(() => {
const items = getWishlistProducts(allProducts.value)
return items.sort((a, b) => {
const aOk = a.active && a.quantity > 0 ? 0 : 1
const bOk = b.active && b.quantity > 0 ? 0 : 1
return aOk - bOk
})
})
const handleClick = (item) => {
if (!item) return
if (!item.active || item.quantity === 0) return
router.push(`/product/${item.id}`)
}
onMounted(async () => {
try {
const [prods] = await Promise.all([fetchProducts(), loadWishlist()])
allProducts.value = prods
} finally {
loading.value = false
}
})
</script>
<style scoped>
.hero {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 20px;
}
.status {
padding: 24px 0;
color: var(--muted);
}
.tag {
font-size: 14px;
color: var(--muted);
}
.empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 60px 0;
text-align: center;
}
.empty-icon {
font-size: 52px;
color: var(--muted);
opacity: 0.4;
line-height: 1;
}
.empty-title {
font-size: 20px;
font-weight: 600;
color: var(--text);
}
.card-dimmed {
opacity: 0.5;
}
</style>

96
mengyastore-frontend/src/router/index.js
View File

@@ -1,48 +1,48 @@
import { createRouter, createWebHistory } from 'vue-router'
import StorePage from '../modules/store/StorePage.vue'
import AdminPage from '../modules/admin/AdminPage.vue'
import ProductDetail from '../modules/store/ProductDetail.vue'
import CheckoutPage from '../modules/store/CheckoutPage.vue'
import AuthCallback from '../modules/auth/AuthCallback.vue'
import MyOrdersPage from '../modules/user/MyOrdersPage.vue'
import MaintenancePage from '../modules/maintenance/MaintenancePage.vue'
import WishlistPage from '../modules/wishlist/WishlistPage.vue'
import { fetchSiteMaintenance } from '../modules/shared/api'
const BYPASS_ROUTES = ['/admin', '/auth/callback', '/maintenance', '/wishlist']
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', name: 'store', component: StorePage },
{ path: '/product/:id', name: 'product-detail', component: ProductDetail },
{ path: '/checkout/:id', name: 'checkout', component: CheckoutPage },
{ path: '/admin', name: 'admin', component: AdminPage },
{ path: '/auth/callback', name: 'auth-callback', component: AuthCallback },
{ path: '/my/orders', name: 'my-orders', component: MyOrdersPage },
{
path: '/maintenance',
name: 'maintenance',
component: MaintenancePage,
props: (route) => ({ reason: route.query.reason || '' })
},
{ path: '/wishlist', name: 'wishlist', component: WishlistPage }
]
})
router.beforeEach(async (to) => {
if (BYPASS_ROUTES.some((p) => to.path.startsWith(p))) {
return true
}
try {
const { maintenance, reason } = await fetchSiteMaintenance()
if (maintenance) {
return { name: 'maintenance', query: { reason } }
}
} catch {
// 接口异常时放行，不阻断用户
}
return true
})
export default router
import { createRouter, createWebHistory } from 'vue-router'
import StorePage from '../modules/store/StorePage.vue'
import AdminPage from '../modules/admin/AdminPage.vue'
import ProductDetail from '../modules/store/ProductDetail.vue'
import CheckoutPage from '../modules/store/CheckoutPage.vue'
import AuthCallback from '../modules/auth/AuthCallback.vue'
import MyOrdersPage from '../modules/user/MyOrdersPage.vue'
import MaintenancePage from '../modules/maintenance/MaintenancePage.vue'
import WishlistPage from '../modules/wishlist/WishlistPage.vue'
import { fetchSiteMaintenance } from '../modules/shared/api'
const BYPASS_ROUTES = ['/admin', '/auth/callback', '/maintenance', '/wishlist']
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', name: 'store', component: StorePage },
{ path: '/product/:id', name: 'product-detail', component: ProductDetail },
{ path: '/checkout/:id', name: 'checkout', component: CheckoutPage },
{ path: '/admin', name: 'admin', component: AdminPage },
{ path: '/auth/callback', name: 'auth-callback', component: AuthCallback },
{ path: '/my/orders', name: 'my-orders', component: MyOrdersPage },
{
path: '/maintenance',
name: 'maintenance',
component: MaintenancePage,
props: (route) => ({ reason: route.query.reason || '' })
},
{ path: '/wishlist', name: 'wishlist', component: WishlistPage }
]
})
router.beforeEach(async (to) => {
if (BYPASS_ROUTES.some((p) => to.path.startsWith(p))) {
return true
}
try {
const { maintenance, reason } = await fetchSiteMaintenance()
if (maintenance) {
return { name: 'maintenance', query: { reason } }
}
} catch {
// 接口异常时放行，不阻断用户
}
return true
})
export default router

116
mengyastore-frontend/vite.config.js
View File

@@ -1,58 +1,58 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
vue(),
VitePWA({
registerType: 'autoUpdate',
includeAssets: ['favicon.ico', 'logo.png', 'apple-touch-icon-180x180.png'],
manifest: {
name: '萌芽小店',
short_name: '萌芽小店',
description: '萌芽小店 — 精选商品，一键购买',
theme_color: '#1a1a1a',
background_color: '#ffffff',
display: 'standalone',
orientation: 'portrait',
scope: '/',
start_url: '/',
lang: 'zh-CN',
icons: [
{ src: 'pwa-64x64.png', sizes: '64x64', type: 'image/png' },
{ src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
{ src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
{ src: 'maskable-icon-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' }
]
},
workbox: {
maximumFileSizeToCacheInBytes: 8 * 1024 * 1024,
globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
runtimeCaching: [
{
urlPattern: /^https:\/\/fonts\.(googleapis|gstatic)\.com\/.*/i,
handler: 'CacheFirst',
options: {
cacheName: 'google-fonts-cache',
expiration: { maxEntries: 10, maxAgeSeconds: 60 * 60 * 24 * 365 },
cacheableResponse: { statuses: [0, 200] }
}
},
{
urlPattern: /^\/api\//,
handler: 'NetworkFirst',
options: {
cacheName: 'api-cache',
expiration: { maxEntries: 50, maxAgeSeconds: 60 * 5 },
cacheableResponse: { statuses: [0, 200] }
}
}
]
}
})
],
server: {
port: 5173
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
vue(),
VitePWA({
registerType: 'autoUpdate',
includeAssets: ['favicon.ico', 'logo.png', 'apple-touch-icon-180x180.png'],
manifest: {
name: '萌芽小店',
short_name: '萌芽小店',
description: '萌芽小店 — 精选商品，一键购买',
theme_color: '#1a1a1a',
background_color: '#ffffff',
display: 'standalone',
orientation: 'portrait',
scope: '/',
start_url: '/',
lang: 'zh-CN',
icons: [
{ src: 'pwa-64x64.png', sizes: '64x64', type: 'image/png' },
{ src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
{ src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
{ src: 'maskable-icon-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' }
]
},
workbox: {
maximumFileSizeToCacheInBytes: 8 * 1024 * 1024,
globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
runtimeCaching: [
{
urlPattern: /^https:\/\/fonts\.(googleapis|gstatic)\.com\/.*/i,
handler: 'CacheFirst',
options: {
cacheName: 'google-fonts-cache',
expiration: { maxEntries: 10, maxAgeSeconds: 60 * 60 * 24 * 365 },
cacheableResponse: { statuses: [0, 200] }
}
},
{
urlPattern: /^\/api\//,
handler: 'NetworkFirst',
options: {
cacheName: 'api-cache',
expiration: { maxEntries: 50, maxAgeSeconds: 60 * 5 },
cacheableResponse: { statuses: [0, 200] }
}
}
]
}
})
],
server: {
port: 5173
}
})