From 5146e9847983ee661214e3f4a1ee0fb4947508f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=96=87=E5=B3=B0?= <kevin@lmve.net>
Date: Thu, 16 Apr 2026 18:55:11 +0800
Subject: [PATCH] up

---
 .workbuddy/expert-history.json                |  17 +
 .workbuddy/memory/2026-04-16.md               |  76 ++
 .workbuddy/memory/MEMORY.md                   |   0
 frontend/ops_uniapp/@api/auth.js              |  42 +
 frontend/ops_uniapp/@api/purchase.js          |  42 +
 frontend/ops_uniapp/@api/request.js           |  97 ++
 frontend/ops_uniapp/@api/schedule.js          |  27 +
 frontend/ops_uniapp/App.vue                   |  15 +-
 frontend/ops_uniapp/manifest.json             |  13 +-
 frontend/ops_uniapp/pages.json                |  89 +-
 frontend/ops_uniapp/pages/index/index.vue     | 523 ++++++++++-
 frontend/ops_uniapp/pages/purchase/list.vue   | 827 ++++++++++++++++++
 .../ops_uniapp/pages/schedule/schedule.vue    | 627 +++++++++++++
 frontend/ops_uniapp/pages/setting/my_info.vue | 806 +++++++++--------
 frontend/ops_uniapp/pages/signin.vue          | 471 ++++++----
 frontend/ops_uniapp/store/user.js             | 136 +++
 frontend/ops_uniapp/vite.config.js            |  37 +
 17 files changed, 3171 insertions(+), 674 deletions(-)
 create mode 100644 .workbuddy/expert-history.json
 create mode 100644 .workbuddy/memory/2026-04-16.md
 create mode 100644 .workbuddy/memory/MEMORY.md
 create mode 100644 frontend/ops_uniapp/@api/auth.js
 create mode 100644 frontend/ops_uniapp/@api/purchase.js
 create mode 100644 frontend/ops_uniapp/@api/request.js
 create mode 100644 frontend/ops_uniapp/@api/schedule.js
 create mode 100644 frontend/ops_uniapp/pages/purchase/list.vue
 create mode 100644 frontend/ops_uniapp/pages/schedule/schedule.vue
 create mode 100644 frontend/ops_uniapp/store/user.js
 create mode 100644 frontend/ops_uniapp/vite.config.js

diff --git a/.workbuddy/expert-history.json b/.workbuddy/expert-history.json
new file mode 100644
index 0000000..2b429f0
--- /dev/null
+++ b/.workbuddy/expert-history.json
@@ -0,0 +1,17 @@
+{
+  "version": 2,
+  "sessions": {
+    "ebf5e3bab92e4319aec2c39116541728": [
+      {
+        "expertId": "BackendArchitect",
+        "name": "磐石石",
+        "profession": "后端架构师",
+        "avatarUrl": "https://acc-1258344699.cos.accelerate.myqcloud.com/workbuddy/experts/avatars/02-Engineering/BackendArchitect/BackendArchitect.png",
+        "promptUrl": "https://acc-1258344699.cos.accelerate.myqcloud.com/workbuddy/experts/experts/02-Engineering/BackendArchitect/BackendArchitect_zh.md",
+        "usedAt": 1776327849643,
+        "industryId": "all"
+      }
+    ]
+  },
+  "lastUpdated": 1776336333635
+}
\ No newline at end of file
diff --git a/.workbuddy/memory/2026-04-16.md b/.workbuddy/memory/2026-04-16.md
new file mode 100644
index 0000000..ae05f9d
--- /dev/null
+++ b/.workbuddy/memory/2026-04-16.md
@@ -0,0 +1,76 @@
+# 2026-04-16 工作日志
+
+## OPS2 系统工作流程分析
+
+完成了对 OPS2 流程管理系统三端架构的全面分析，生成了完整的工作流程分析报告（ops2_workflow_analysis.md）。
+
+### 系统技术栈
+- 后端：Go + Gin + GORM，支持 SQLite/MySQL/PostgreSQL 可配置切换
+- PC前端：Vue3 + Vite + Pinia + Axios
+- 移动端：uni-app（Vue3+Vite），目标 H5 + Android
+
+### 核心功能模块
+1. **用户认证**：Cookie-based 认证，MD5+salt 密码哈希，支持 Remember Me
+2. **日程管理**：日历事件 CRUD，权限分层（创建者/模块管理员/全局管理员）
+3. **采购订单**：6种状态流转（pending→ordered→arrived→received/lost/returned），含完整审计日志
+4. **文件系统**：SHA256 内容去重，MIME 白名单校验，图片上传服务
+
+---
+
+## 移动端重构（对标 PC 前端）
+
+完成了 ops_uniapp 移动端的全面重构，参考 PC 前端架构对齐。
+
+### 新增/重构文件
+- `api/request.js`：统一请求封装（自动注入 cookie、统一 err_code 解析、cookie 过期自动跳登录）
+- `api/auth.js`、`api/schedule.js`、`api/purchase.js`：对标 PC 端 API 模块
+- `store/user.js`：轻量单例 Store（对标 PC 端 Pinia useUserStore，含 restoreSession）
+- `pages/signin.vue`：重构登录页（表单验证、密码显示/隐藏、remember me）
+- `pages/index/index.vue`：重构首页（今日日程卡片 + 待处理采购统计）
+- `pages/setting/my_info.vue`：重构设置页（头像上传、信息修改、退出登录）
+- `pages.json`：修正 API 路径前缀（/api/v1 → /api），更新页面路由
+- `App.vue`：接入 userStore.restoreSession()
+
+### 关键设计
+- API base 统一为 `/api`（修复旧版 /api/v1 错误）
+- cookie 认证流程与 PC 端完全对齐
+- store/user.js 用模块单例替代 Pinia（uni-app 兼容）
+
+---
+
+## 补建预留路由对应的 Vue 文件
+
+修复了 `vite:import-analysis` 报错（pages.json 声明了路由但文件不存在）。
+
+### 新建文件
+- `pages/schedule/schedule.vue`：移动端日程月份视图，支持按月浏览、添加/编辑/删除日程、颜色分类，30s 轮询刷新
+- `pages/purchase/list.vue`：移动端采购订单列表，支持搜索/状态过滤/分页加载更多；底部抽屉查看订单详情（费用明细/图片/变更记录）；已登录可变更订单状态
+
+### 重要发现
+- 移动端 `my_network_func.js` 中 `head_path = "/api/v1"` 与后端实际 `/api` 路径不匹配，需修复
+- 审计日志系统完善（TabScheduleLog、TabPurchaseLog、TabPurchaseCommit）
+- 后端同时托管静态前端产物，单体部署架构
+
+---
+
+## @api 命名空间重构（修复 404 模块请求）
+
+### 问题
+`GET http://localhost:5173/api/auth.js net::ERR_ABORTED 404`
+
+manifest.json 配置了 `/api` 代理到后端 8080，导致所有 `/api` 开头的请求都被代理。
+即使加了 vite.config.js 的 resolve.alias，HBuilderX 的内置 dev server 行为也不完全符合预期。
+
+### 解决
+将 API 模块目录从 `api/` 重命名为 `@api/`，彻底消除与 `/api` 代理前缀的冲突。
+
+- `api/` → `@api/`，所有 import 路径相应更新
+- 真正的后端 API 请求走 `/api`（代理到 8080）
+- `@api/*.js` 模块不走 `/api` 代理，不会冲突
+- `manifest.json` 的 h5.devServer 只保留 disableHostCheck，proxy 移至 vite.config.js
+
+### 更新文件
+- `@api/request.js`、`@api/auth.js`、`@api/schedule.js`、`@api/purchase.js`（新建）
+- `store/user.js`、`pages/signin.vue`、`pages/setting/my_info.vue`、`pages/index/index.vue`、`pages/schedule/schedule.vue`、`pages/purchase/list.vue`（更新 import 路径）
+- `vite.config.js`（简化 alias 配置）
+- 删除旧 `api/` 目录
diff --git a/.workbuddy/memory/MEMORY.md b/.workbuddy/memory/MEMORY.md
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/ops_uniapp/@api/auth.js b/frontend/ops_uniapp/@api/auth.js
new file mode 100644
index 0000000..0ec05dd
--- /dev/null
+++ b/frontend/ops_uniapp/@api/auth.js
@@ -0,0 +1,42 @@
+/**
+ * 认证相关 API
+ * 对标 PC 前端 src/api/auth.js
+ */
+import { request } from './request.js'
+
+export const authApi = {
+  /** 登录 */
+  login(username, password, remember = false) {
+    return request.post('/users/login', { username, password, remember })
+  },
+
+  /** 注册 */
+  register(username, email, password) {
+    return request.post('/users/register', { username, useremail: email, userpass: password })
+  },
+
+  /** 通过 cookie 获取用户信息 */
+  getUserInfo() {
+    return request.post('/users/getinfo', {})
+  },
+
+  /** 修改密码 */
+  changePassword(oldPass, newPass) {
+    return request.post('/users/changePassword', { oldpass: oldPass, newpass: newPass })
+  },
+
+  /** 修改邮箱 */
+  changeEmail(newEmail) {
+    return request.post('/users/changeEmail', { newemail: newEmail })
+  },
+
+  /** 修改用户信息 */
+  updateInfo(data) {
+    return request.post('/users/updateInfo', data)
+  },
+
+  /** 更新头像（文件上传） */
+  updateAvatar(filePath) {
+    return request.upload('/users/updateAvatar', filePath)
+  },
+}
diff --git a/frontend/ops_uniapp/@api/purchase.js b/frontend/ops_uniapp/@api/purchase.js
new file mode 100644
index 0000000..68de33e
--- /dev/null
+++ b/frontend/ops_uniapp/@api/purchase.js
@@ -0,0 +1,42 @@
+/**
+ * 采购订单相关 API
+ * 对标 PC 前端 src/api/purchase.js
+ */
+import { request } from './request.js'
+
+export const purchaseApi = {
+  /** 获取订单列表（分页+搜索+状态过滤） */
+  getOrders(params = {}) {
+    return request.post('/purchase/getorders', params)
+  },
+
+  /** 获取单个订单详情 */
+  getOrder(id) {
+    return request.post('/purchase/getorder', { id })
+  },
+
+  /** 获取各状态订单数量统计 */
+  getOrderCount() {
+    return request.post('/purchase/getordercount', {})
+  },
+
+  /** 新增订单 */
+  addOrder(data) {
+    return request.post('/purchase/addorder', data)
+  },
+
+  /** 更新订单 */
+  updateOrder(data) {
+    return request.post('/purchase/updateorder', data)
+  },
+
+  /** 更新订单状态 */
+  updateStatus(data) {
+    return request.post('/purchase/updatestatus', data)
+  },
+
+  /** 删除订单 */
+  deleteOrder(id) {
+    return request.post('/purchase/deleteorder', { id })
+  },
+}
diff --git a/frontend/ops_uniapp/@api/request.js b/frontend/ops_uniapp/@api/request.js
new file mode 100644
index 0000000..587db9f
--- /dev/null
+++ b/frontend/ops_uniapp/@api/request.js
@@ -0,0 +1,97 @@
+/**
+ * 统一网络请求封装
+ * 对标 PC 前端 src/api/index.js 的设计
+ * - 自动注入 cookie
+ * - 统一解析 err_code / return 字段
+ * - Cookie 过期自动清理并跳转登录
+ */
+
+import { userStore } from '../store/user.js'
+
+const API_BASE = '/api'
+
+/**
+ * 底层 POST 请求
+ * @param {string} path  - 接口路径，如 /users/login
+ * @param {object} data  - 业务数据（会被包在 data 字段下）
+ * @returns {Promise<{errCode, data, raw}>}
+ */
+function post(path, data = {}) {
+  const body = { data }
+
+  // 自动注入 cookie
+  const cookieValue = userStore.getCookieValue()
+  if (cookieValue) {
+    body.userCookieValue = cookieValue
+  }
+
+  return new Promise((resolve, reject) => {
+    uni.request({
+      url: API_BASE + path,
+      method: 'POST',
+      header: { 'Content-Type': 'application/json' },
+      data: body,
+      timeout: 15000,
+      success(res) {
+        const raw = res.data
+        const errCode = raw?.err_code ?? -1
+
+        // Cookie 过期（err_code === -44），自动登出并跳转登录
+        if (errCode === -44) {
+          userStore.logout()
+          uni.reLaunch({ url: '/pages/signin' })
+          reject(new Error('Cookie expired'))
+          return
+        }
+
+        resolve({
+          errCode,
+          data: raw?.return ?? null,
+          raw,
+        })
+      },
+      fail(err) {
+        uni.showToast({ title: '网络连接失败', icon: 'none' })
+        reject(err)
+      },
+    })
+  })
+}
+
+/**
+ * 上传文件（FormData）
+ * @param {string} path    - 接口路径
+ * @param {string} filePath - 本地文件路径（uni.chooseImage 返回的 tempFilePaths[0]）
+ * @param {string} name    - 文件字段名，默认 'file'
+ */
+function upload(path, filePath, name = 'file') {
+  const cookieValue = userStore.getCookieValue()
+
+  return new Promise((resolve, reject) => {
+    uni.uploadFile({
+      url: API_BASE + path,
+      filePath,
+      name,
+      formData: cookieValue ? { cookie: cookieValue } : {},
+      timeout: 30000,
+      success(res) {
+        try {
+          const raw = JSON.parse(res.data)
+          resolve({
+            errCode: raw?.err_code ?? -1,
+            data: raw?.return ?? null,
+            raw,
+          })
+        } catch {
+          reject(new Error('JSON parse error'))
+        }
+      },
+      fail(err) {
+        uni.showToast({ title: '上传失败', icon: 'none' })
+        reject(err)
+      },
+    })
+  })
+}
+
+export const request = { post, upload }
diff --git a/frontend/ops_uniapp/@api/schedule.js b/frontend/ops_uniapp/@api/schedule.js
new file mode 100644
index 0000000..89bbff0
--- /dev/null
+++ b/frontend/ops_uniapp/@api/schedule.js
@@ -0,0 +1,27 @@
+/**
+ * 日程相关 API
+ * 对标 PC 前端 src/api/schedule.js
+ */
+import { request } from './request.js'
+
+export const scheduleApi = {
+  /** 获取日程列表 */
+  getEvents(params = {}) {
+    return request.post('/schedule/getevents', params)
+  },
+
+  /** 新增日程 */
+  addEvent(data) {
+    return request.post('/schedule/addevent', data)
+  },
+
+  /** 编辑日程 */
+  editEvent(data) {
+    return request.post('/schedule/editevent', data)
+  },
+
+  /** 删除日程 */
+  deleEvent(data) {
+    return request.post('/schedule/deleevent', data)
+  },
+}
diff --git a/frontend/ops_uniapp/App.vue b/frontend/ops_uniapp/App.vue
index 6fc6d96..f61f9c5 100644
--- a/frontend/ops_uniapp/App.vue
+++ b/frontend/ops_uniapp/App.vue
@@ -1,17 +1,14 @@
 <script>
+	import { userStore } from './store/user.js'
+
 	export default {
 		onLaunch: function() {
-			console.log('App Launch')
+			// 应用启动时恢复登录状态（对标 PC 端 App.vue 的 restoreSession）
+			userStore.restoreSession()
 		},
-		onShow: function() {
-			console.log('App Show')
-		},
-		onHide: function() {
-			console.log('App Hide')
-		}
+		onShow: function() {},
+		onHide: function() {}
 	}
-	import "/static/dist/js/tabler.min.js"
-	import "/static/dist/libs/bootstrap/dist/js/bootstrap.min.js"
 </script>
 
 
diff --git a/frontend/ops_uniapp/manifest.json b/frontend/ops_uniapp/manifest.json
index 771779a..49fc04e 100644
--- a/frontend/ops_uniapp/manifest.json
+++ b/frontend/ops_uniapp/manifest.json
@@ -71,18 +71,7 @@
     "vueVersion" : "3",
 	"h5" : {
 	    "devServer" : {
-	        "disableHostCheck" : true,
-	        "proxy" : {
-	            "/api" : {
-	                "target" : "http://127.0.0.1:8080",
-	                "changeOrigin" : true,
-	                "secure" : false,
-	                "ws": false,
-	                "pathRewrite" : {
-	                    "^/api" : ""
-	                }
-	            }
-	        }
+	        "disableHostCheck" : true
 	    }
 	}
 
diff --git a/frontend/ops_uniapp/pages.json b/frontend/ops_uniapp/pages.json
index ed73c64..a597c7d 100644
--- a/frontend/ops_uniapp/pages.json
+++ b/frontend/ops_uniapp/pages.json
@@ -1,46 +1,47 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": "uni-app"
-			}
-		},
-		{
-			"path" : "pages/test/test",
-			"style" : 
-			{
-				"navigationBarTitleText" : ""
-			}
-		},
-		{
-			"path" : "pages/setting/my_info",
-			"style" : 
-			{
-				"navigationBarTitleText" : ""
-			}
-		},
-		{
-			"path" : "pages/signin",
-			"style" : 
-			{
-				"navigationBarTitleText" : ""
-			}
-		},
-		{
-			"path" : "components/setting-menu/setting-menu",
-			"style" : 
-			{
-				"navigationBarTitleText" : ""
-			}
-		}
-	],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8",
-		"navigationStyle": "custom"
-	},
-	"uniIdRouter": {}
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "Operations",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/signin",
+      "style": {
+        "navigationBarTitleText": "登录",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/setting/my_info",
+      "style": {
+        "navigationBarTitleText": "个人设置",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/schedule/schedule",
+      "style": {
+        "navigationBarTitleText": "日程",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/purchase/list",
+      "style": {
+        "navigationBarTitleText": "采购订单",
+        "navigationStyle": "custom"
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "Operations",
+    "navigationBarBackgroundColor": "#FFFFFF",
+    "backgroundColor": "#F3F4F6",
+    "navigationStyle": "custom"
+  },
+  "uniIdRouter": {}
 }
diff --git a/frontend/ops_uniapp/pages/index/index.vue b/frontend/ops_uniapp/pages/index/index.vue
index 134d8ca..078ccc2 100644
--- a/frontend/ops_uniapp/pages/index/index.vue
+++ b/frontend/ops_uniapp/pages/index/index.vue
@@ -1,55 +1,484 @@
-<template>
-	<view class="d-flex flex-column ">
-		<div class="page">
-			<tabler-header></tabler-header>
-			
-			<tabler-footer></tabler-footer>
-		</div>
-
-	</view>
-
-</template>
-
 <script>
-	export default {
-		data() {
-			return {
-				title: 'Hello'
-			}
-		},
-		onLoad() {
+/**
+ * 首页
+ * 对标 PC 前端 src/views/HomeView.vue
+ * 展示：今日日程 + 待处理采购订单数量
+ */
+import { userStore } from '../../store/user.js'
+import { scheduleApi } from '../../@api/schedule.js'
+import { purchaseApi } from '../../@api/purchase.js'
 
-		},
-		methods: {
+// 颜色类型映射（与 PC 端保持一致）
+const COLOR_MAP = {
+  '#066FD1': '工作',
+  '#09D119': '值班',
+  '#FF00FF': '考试',
+  '#FFFF00': '待机',
+  '#D16C13': '个人假期',
+  '#D10D21': '公共假期',
+}
 
-		}
-	}
+const WEEKDAYS = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+
+export default {
+  data() {
+    return {
+      // 用户信息
+      isLoggedIn: false,
+      displayName: '',
+      avatarUrl: '/static/ava.svg',
+
+      // 今日日程
+      todaySchedules: [],
+      loadingSchedules: false,
+
+      // 采购订单
+      pendingOrderCount: 0,
+      loadingOrders: false,
+
+      // 今日显示
+      todayDisplay: '',
+      todayStr: '',
+    }
+  },
+
+  methods: {
+    // ── 工具方法 ──
+
+    getTodayStr() {
+      return new Date().toISOString().split('T')[0]
+    },
+
+    getTodayDisplay() {
+      const today = new Date()
+      const m = today.getMonth() + 1
+      const d = today.getDate()
+      const w = WEEKDAYS[today.getDay()]
+      return `${m}月${d}日 ${w}`
+    },
+
+    getColorLabel(color) {
+      return COLOR_MAP[color] || ''
+    },
+
+    formatDateRange(startDate, endDate) {
+      if (!startDate) return ''
+      if (startDate === endDate) return startDate
+      return `${startDate} ~ ${endDate}`
+    },
+
+    getWeekday(dateStr) {
+      if (!dateStr) return ''
+      return WEEKDAYS[new Date(dateStr).getDay()]
+    },
+
+    // ── 数据加载 ──
+
+    async fetchTodaySchedules() {
+      this.loadingSchedules = true
+      try {
+        const today = this.getTodayStr()
+        const { errCode, data } = await scheduleApi.getEvents({
+          start: today,
+          end: today,
+        })
+        if (errCode === 0 && data?.list) {
+          this.todaySchedules = data.list
+        }
+      } catch {
+        // 静默处理
+      } finally {
+        this.loadingSchedules = false
+      }
+    },
+
+    async fetchPendingOrders() {
+      if (!userStore.isLoggedIn) return
+      this.loadingOrders = true
+      try {
+        const { errCode, data } = await purchaseApi.getOrderCount()
+        if (errCode === 0 && data) {
+          this.pendingOrderCount = data.pending || 0
+        }
+      } catch {
+        // 静默处理
+      } finally {
+        this.loadingOrders = false
+      }
+    },
+
+    refreshUserState() {
+      this.isLoggedIn = userStore.isLoggedIn
+      this.displayName = userStore.getDisplayName()
+      this.avatarUrl = userStore.getAvatarUrl()
+    },
+
+    // ── 导航 ──
+
+    goToSchedule() {
+      uni.navigateTo({ url: '/pages/schedule/schedule' })
+    },
+
+    goToPurchase() {
+      uni.navigateTo({ url: '/pages/purchase/list' })
+    },
+
+    goToLogin() {
+      uni.navigateTo({ url: '/pages/signin' })
+    },
+
+    goToSettings() {
+      uni.navigateTo({ url: '/pages/setting/my_info' })
+    },
+  },
+
+  onShow() {
+    // 每次回到首页都刷新用户状态（登录/登出后回来）
+    this.refreshUserState()
+  },
+
+  onLoad() {
+    this.todayStr = this.getTodayStr()
+    this.todayDisplay = this.getTodayDisplay()
+    this.refreshUserState()
+    this.fetchTodaySchedules()
+    this.fetchPendingOrders()
+  },
+}
 </script>
 
-<style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
+<template>
+  <view class="home-page">
 
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
+    <!-- ── 顶部导航栏 ── -->
+    <view class="navbar">
+      <view class="navbar-left">
+        <image src="/static/logo.svg" class="nav-logo" mode="aspectFit" />
+        <text class="nav-title">Operations</text>
+      </view>
+      <view class="navbar-right">
+        <view v-if="isLoggedIn" class="user-info" @tap="goToSettings">
+          <image :src="avatarUrl" class="avatar" mode="aspectFill" />
+          <text class="username">{{ displayName }}</text>
+        </view>
+        <view v-else class="login-btn" @tap="goToLogin">
+          <text class="login-btn-text">登录</text>
+        </view>
+      </view>
+    </view>
 
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
+    <!-- ── 页面主体 ── -->
+    <scroll-view scroll-y class="content">
 
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
-</style>
\ No newline at end of file
+      <!-- 欢迎语 -->
+      <view class="welcome-row">
+        <text class="welcome-text">
+          {{ isLoggedIn ? `你好，${displayName}` : '欢迎使用' }}
+        </text>
+        <text class="date-text">{{ todayDisplay }}</text>
+      </view>
+
+      <!-- ── 今日日程卡片 ── -->
+      <view class="card" @tap="goToSchedule">
+        <view class="card-header">
+          <view class="card-header-left">
+            <view class="card-icon schedule-icon">
+              <text class="icon-emoji">📅</text>
+            </view>
+            <text class="card-title">日程</text>
+          </view>
+          <text class="card-count">今日 {{ todaySchedules.length }} 项</text>
+        </view>
+
+        <!-- 加载中 -->
+        <view v-if="loadingSchedules" class="empty-hint">
+          <text>加载中…</text>
+        </view>
+
+        <!-- 有日程 -->
+        <view v-else-if="todaySchedules.length > 0" class="schedule-list">
+          <view
+            v-for="item in todaySchedules"
+            :key="item.ID"
+            class="schedule-item"
+          >
+            <!-- 颜色标签 -->
+            <view
+              class="schedule-badge"
+              :style="{ backgroundColor: item.BgColor || '#999' }"
+            >
+              <text class="badge-text">{{ getColorLabel(item.BgColor) }}</text>
+            </view>
+            <!-- 内容 -->
+            <view class="schedule-info">
+              <text class="schedule-title">{{ item.Title }}</text>
+              <text class="schedule-date">
+                {{ formatDateRange(item.StartDate, item.EndDate) }}
+              </text>
+            </view>
+          </view>
+        </view>
+
+        <!-- 无日程 -->
+        <view v-else class="empty-hint">
+          <text>今日暂无日程</text>
+        </view>
+
+        <view class="card-arrow">
+          <text class="arrow-text">查看全部 ›</text>
+        </view>
+      </view>
+
+      <!-- ── 采购订单卡片（仅登录后显示待处理数） ── -->
+      <view class="card" @tap="goToPurchase">
+        <view class="card-header">
+          <view class="card-header-left">
+            <view class="card-icon purchase-icon">
+              <text class="icon-emoji">🛒</text>
+            </view>
+            <text class="card-title">采购订单</text>
+          </view>
+        </view>
+
+        <view v-if="isLoggedIn" class="stat-row">
+          <view class="stat-item">
+            <text class="stat-num" :class="{ 'num-warning': pendingOrderCount > 0 }">
+              {{ loadingOrders ? '…' : pendingOrderCount || '—' }}
+            </text>
+            <text class="stat-label">待处理</text>
+          </view>
+        </view>
+        <view v-else class="empty-hint">
+          <text>登录后查看</text>
+        </view>
+
+        <view class="card-arrow">
+          <text class="arrow-text">查看全部 ›</text>
+        </view>
+      </view>
+
+    </scroll-view>
+  </view>
+</template>
+
+<style scoped>
+/* ── 页面容器 ── */
+.home-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #f3f4f6;
+}
+
+/* ── 顶部导航 ── */
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 88rpx 32rpx 24rpx;
+  background: #fff;
+  border-bottom: 1rpx solid #e5e7eb;
+}
+.navbar-left {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+.nav-logo {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 12rpx;
+}
+.nav-title {
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #1f2937;
+}
+.navbar-right {
+  display: flex;
+  align-items: center;
+}
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+.avatar {
+  width: 68rpx;
+  height: 68rpx;
+  border-radius: 50%;
+  background: #e5e7eb;
+}
+.username {
+  font-size: 28rpx;
+  color: #374151;
+  max-width: 160rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.login-btn {
+  background: #2563eb;
+  border-radius: 40rpx;
+  padding: 12rpx 32rpx;
+}
+.login-btn-text {
+  font-size: 28rpx;
+  color: #fff;
+  font-weight: 600;
+}
+
+/* ── 内容区 ── */
+.content {
+  flex: 1;
+  padding: 32rpx 32rpx 40rpx;
+}
+
+/* ── 欢迎语 ── */
+.welcome-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 32rpx;
+}
+.welcome-text {
+  font-size: 40rpx;
+  font-weight: 700;
+  color: #111827;
+}
+.date-text {
+  font-size: 26rpx;
+  color: #6b7280;
+}
+
+/* ── 通用卡片 ── */
+.card {
+  background: #fff;
+  border-radius: 24rpx;
+  padding: 36rpx;
+  margin-bottom: 28rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+}
+
+/* ── 卡片头部 ── */
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 28rpx;
+}
+.card-header-left {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+.card-icon {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.schedule-icon { background: #eff6ff; }
+.purchase-icon { background: #fefce8; }
+.icon-emoji {
+  font-size: 36rpx;
+}
+.card-title {
+  font-size: 34rpx;
+  font-weight: 600;
+  color: #111827;
+}
+.card-count {
+  font-size: 26rpx;
+  color: #6b7280;
+}
+
+/* ── 日程列表 ── */
+.schedule-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+  margin-bottom: 20rpx;
+}
+.schedule-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 20rpx;
+  background: #f9fafb;
+  border-radius: 16rpx;
+  padding: 20rpx 24rpx;
+}
+.schedule-badge {
+  border-radius: 8rpx;
+  padding: 6rpx 14rpx;
+  flex-shrink: 0;
+}
+.badge-text {
+  font-size: 22rpx;
+  color: #fff;
+  font-weight: 600;
+}
+.schedule-info {
+  flex: 1;
+}
+.schedule-title {
+  font-size: 30rpx;
+  font-weight: 500;
+  color: #1f2937;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.schedule-date {
+  font-size: 24rpx;
+  color: #9ca3af;
+  display: block;
+  margin-top: 6rpx;
+}
+
+/* ── 统计行 ── */
+.stat-row {
+  display: flex;
+  gap: 40rpx;
+  margin-bottom: 20rpx;
+}
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.stat-num {
+  font-size: 56rpx;
+  font-weight: 700;
+  color: #111827;
+  line-height: 1;
+}
+.num-warning {
+  color: #d97706;
+}
+.stat-label {
+  font-size: 24rpx;
+  color: #9ca3af;
+  margin-top: 8rpx;
+}
+
+/* ── 空提示 & 箭头 ── */
+.empty-hint {
+  padding: 24rpx 0;
+  text-align: center;
+  font-size: 28rpx;
+  color: #9ca3af;
+}
+.card-arrow {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8rpx;
+}
+.arrow-text {
+  font-size: 26rpx;
+  color: #2563eb;
+}
+</style>
diff --git a/frontend/ops_uniapp/pages/purchase/list.vue b/frontend/ops_uniapp/pages/purchase/list.vue
new file mode 100644
index 0000000..06b663c
--- /dev/null
+++ b/frontend/ops_uniapp/pages/purchase/list.vue
@@ -0,0 +1,827 @@
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import { purchaseApi } from '../../@api/purchase.js'
+import { userStore } from '../../store/user.js'
+
+// ───────────── 状态定义 ─────────────
+const loading = ref(false)
+const orders = ref([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = 20
+const hasMore = ref(true)
+const loadingMore = ref(false)
+
+// 搜索和过滤
+const searchText = ref('')
+const activeStatus = ref('')  // '' = 全部
+
+// 订单详情
+const showDetail = ref(false)
+const detailLoading = ref(false)
+const detailOrder = ref(null)
+const detailCosts = ref([])
+const detailPhotos = ref([])
+const detailCommits = ref([])
+const detailCanModify = ref(false)
+
+// 状态变更弹窗
+const showStatusModal = ref(false)
+const pendingStatus = ref('')
+const pendingComment = ref('')
+const updatingStatus = ref(false)
+
+// 统计数字
+const countMap = reactive({
+  pending: 0, ordered: 0, arrived: 0, received: 0, lost: 0, returned: 0,
+})
+
+// ───────────── 常量 ─────────────
+const statusOptions = [
+  { value: '',         label: '全部',   color: '#6b7280' },
+  { value: 'pending',  label: '待订购', color: '#d97706' },
+  { value: 'ordered',  label: '已下单', color: '#2563eb' },
+  { value: 'arrived',  label: '已到货', color: '#7c3aed' },
+  { value: 'received', label: '已收货', color: '#059669' },
+  { value: 'lost',     label: '已丢失', color: '#dc2626' },
+  { value: 'returned', label: '已退回', color: '#9ca3af' },
+]
+
+const currencyMap = { 1: 'CNY', 2: 'MOP', 3: 'HKD', 4: 'USD' }
+const costTypeMap = { 1: '单价', 2: '运费' }
+
+// ───────────── 工具函数 ─────────────
+function getStatusLabel(val) {
+  return statusOptions.find(o => o.value === val)?.label || val
+}
+
+function getStatusColor(val) {
+  return statusOptions.find(o => o.value === val)?.color || '#6b7280'
+}
+
+function formatDate(str) {
+  if (!str) return '-'
+  const d = new Date(str)
+  if (isNaN(d.getTime())) return '-'
+  return d.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
+}
+
+function formatPrice(cents) {
+  if (!cents) return '0.00'
+  return (cents / 100).toFixed(2)
+}
+
+function getPhotoUrl(hash) {
+  return `/api/files/get/${hash}`
+}
+
+// 按货币分组合计
+const costsByCurrency = computed(() => {
+  const groups = {}
+  detailCosts.value.forEach(c => {
+    const cur = currencyMap[c.CurrencyType] || 'Unknown'
+    const amount = c.Price && c.Quantity ? (c.Price * c.Quantity / 100) : 0
+    groups[cur] = (groups[cur] || 0) + amount
+  })
+  return Object.entries(groups).map(([currency, total]) => ({
+    currency,
+    total: total.toFixed(2),
+  }))
+})
+
+// ───────────── 数据加载 ─────────────
+async function loadOrderCount() {
+  try {
+    const { errCode, data } = await purchaseApi.getOrderCount()
+    if (errCode === 0 && data) {
+      Object.assign(countMap, data)
+    }
+  } catch {}
+}
+
+async function loadOrders(reset = true) {
+  if (reset) {
+    page.value = 1
+    hasMore.value = true
+    orders.value = []
+  }
+  if (!hasMore.value) return
+  loading.value = reset
+  loadingMore.value = !reset
+  try {
+    const { errCode, data } = await purchaseApi.getOrders({
+      page: page.value,
+      pageSize,
+      search: searchText.value.trim(),
+      status: activeStatus.value,
+    })
+    if (errCode === 0 && data) {
+      const list = data.list || []
+      total.value = data.total || 0
+      if (reset) {
+        orders.value = list
+      } else {
+        orders.value.push(...list)
+      }
+      hasMore.value = orders.value.length < total.value
+      page.value++
+    }
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+function onSearch() {
+  loadOrders(true)
+}
+
+function setStatus(val) {
+  activeStatus.value = val
+  loadOrders(true)
+}
+
+function loadMore() {
+  if (!loadingMore.value && hasMore.value) {
+    loadOrders(false)
+  }
+}
+
+// ───────────── 订单详情 ─────────────
+async function openDetail(order) {
+  showDetail.value = true
+  detailLoading.value = true
+  detailOrder.value = null
+  try {
+    const { errCode, data } = await purchaseApi.getOrder(order.ID)
+    if (errCode === 0 && data) {
+      detailOrder.value = data.order ?? null
+      detailCanModify.value = data.canModify ?? false
+      detailCosts.value = data.costs ?? []
+      detailPhotos.value = data.photos ?? []
+      detailCommits.value = data.commits ?? []
+    }
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+function closeDetail() {
+  showDetail.value = false
+}
+
+// ───────────── 状态变更 ─────────────
+function openStatusModal(status) {
+  if (status === detailOrder.value?.OrderStatus) return
+  pendingStatus.value = status
+  pendingComment.value = ''
+  showStatusModal.value = true
+}
+
+function closeStatusModal() {
+  showStatusModal.value = false
+  pendingStatus.value = ''
+  pendingComment.value = ''
+}
+
+async function confirmStatusChange() {
+  if (!pendingStatus.value) return
+  updatingStatus.value = true
+  try {
+    const { errCode } = await purchaseApi.updateStatus({
+      id: detailOrder.value.ID,
+      status: pendingStatus.value,
+      comment: pendingComment.value,
+    })
+    if (errCode === 0) {
+      uni.showToast({ title: '状态已更新', icon: 'success' })
+      closeStatusModal()
+      // 刷新详情
+      await openDetail(detailOrder.value)
+      // 刷新列表
+      loadOrders(true)
+      loadOrderCount()
+    } else {
+      uni.showToast({ title: '操作失败', icon: 'none' })
+    }
+  } catch {
+    uni.showToast({ title: '网络错误', icon: 'none' })
+  } finally {
+    updatingStatus.value = false
+  }
+}
+
+// ───────────── 生命周期 ─────────────
+onMounted(() => {
+  if (!userStore.isLoggedIn) {
+    uni.reLaunch({ url: '/pages/signin' })
+    return
+  }
+  loadOrderCount()
+  loadOrders()
+})
+</script>
+
+<template>
+  <view class="page-wrap">
+    <!-- 顶部搜索栏 -->
+    <view class="search-bar">
+      <view class="search-input-wrap">
+        <text class="search-icon">🔍</text>
+        <input
+          v-model="searchText"
+          class="search-input"
+          placeholder="搜索订单名称…"
+          confirm-type="search"
+          @confirm="onSearch"
+        />
+        <text v-if="searchText" class="search-clear" @tap="searchText = ''; onSearch()">✕</text>
+      </view>
+    </view>
+
+    <!-- 状态过滤标签 -->
+    <scroll-view scroll-x class="status-tabs">
+      <view class="status-tabs-inner">
+        <view
+          v-for="opt in statusOptions"
+          :key="opt.value"
+          class="status-tab"
+          :class="{ 'status-tab-active': activeStatus === opt.value }"
+          :style="activeStatus === opt.value ? { borderColor: opt.color, color: opt.color } : {}"
+          @tap="setStatus(opt.value)"
+        >
+          {{ opt.label }}
+          <text v-if="opt.value && countMap[opt.value]" class="tab-badge">
+            {{ countMap[opt.value] }}
+          </text>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 加载中 -->
+    <view v-if="loading" class="loading-box">
+      <text class="loading-text">加载中…</text>
+    </view>
+
+    <!-- 空状态 -->
+    <view v-else-if="!orders.length" class="empty-box">
+      <text class="empty-icon">📦</text>
+      <text class="empty-text">暂无采购订单</text>
+    </view>
+
+    <!-- 订单列表 -->
+    <scroll-view v-else scroll-y class="list-scroll" @scrolltolower="loadMore">
+      <view
+        v-for="order in orders"
+        :key="order.ID"
+        class="order-card"
+        @tap="openDetail(order)"
+      >
+        <view class="order-card-top">
+          <text class="order-title">{{ order.Title }}</text>
+          <view
+            class="order-status-badge"
+            :style="{ backgroundColor: getStatusColor(order.OrderStatus) + '20', color: getStatusColor(order.OrderStatus) }"
+          >
+            {{ getStatusLabel(order.OrderStatus) }}
+          </view>
+        </view>
+        <view class="order-card-meta">
+          <text class="meta-text">#{{ order.ID }}</text>
+          <text class="meta-sep">·</text>
+          <text class="meta-text">{{ formatDate(order.CreatedAt) }}</text>
+        </view>
+      </view>
+
+      <view v-if="loadingMore" class="load-more-tip">
+        <text class="loading-text">加载更多…</text>
+      </view>
+      <view v-else-if="!hasMore && orders.length" class="load-more-tip">
+        <text style="color:#d1d5db;font-size:24rpx;">已加载全部 {{ total }} 条</text>
+      </view>
+      <view style="height:40rpx;" />
+    </scroll-view>
+
+    <!-- ─────────────────────────────────────────
+         订单详情底部抽屉
+    ───────────────────────────────────────── -->
+    <view v-if="showDetail" class="drawer-mask" @tap.self="closeDetail">
+      <view class="drawer-box">
+        <!-- 抽屉头部 -->
+        <view class="drawer-header">
+          <text class="drawer-title">订单详情</text>
+          <text class="drawer-close" @tap="closeDetail">✕</text>
+        </view>
+
+        <!-- 加载中 -->
+        <view v-if="detailLoading" class="loading-box" style="height:300rpx;">
+          <text class="loading-text">加载中…</text>
+        </view>
+
+        <scroll-view v-else-if="detailOrder" scroll-y class="drawer-scroll">
+          <!-- 基本信息 -->
+          <view class="detail-section">
+            <view class="detail-row">
+              <text class="detail-label">名称</text>
+              <text class="detail-value">{{ detailOrder.Title }}</text>
+            </view>
+            <view class="detail-row">
+              <text class="detail-label">当前状态</text>
+              <view
+                class="order-status-badge"
+                :style="{ backgroundColor: getStatusColor(detailOrder.OrderStatus) + '20', color: getStatusColor(detailOrder.OrderStatus) }"
+              >
+                {{ getStatusLabel(detailOrder.OrderStatus) }}
+              </view>
+            </view>
+            <view v-if="detailOrder.Styles" class="detail-row">
+              <text class="detail-label">款式备注</text>
+              <text class="detail-value">{{ detailOrder.Styles }}</text>
+            </view>
+            <view v-if="detailOrder.Remark" class="detail-row">
+              <text class="detail-label">备注</text>
+              <text class="detail-value">{{ detailOrder.Remark }}</text>
+            </view>
+            <view v-if="detailOrder.Link" class="detail-row">
+              <text class="detail-label">链接</text>
+              <text class="detail-value detail-link" @tap="uni.setClipboardData({ data: detailOrder.Link, success: () => uni.showToast({ title: '链接已复制', icon: 'none' }) })">
+                {{ detailOrder.Link }}（点击复制）
+              </text>
+            </view>
+          </view>
+
+          <!-- 状态切换（仅可修改者显示） -->
+          <view v-if="detailCanModify" class="detail-section">
+            <text class="section-title">变更状态</text>
+            <view class="status-change-grid">
+              <view
+                v-for="opt in statusOptions.slice(1)"
+                :key="opt.value"
+                class="status-change-btn"
+                :class="{ 'status-change-active': detailOrder.OrderStatus === opt.value }"
+                :style="detailOrder.OrderStatus === opt.value
+                  ? { backgroundColor: opt.color, color: '#fff' }
+                  : { borderColor: opt.color, color: opt.color }"
+                @tap="openStatusModal(opt.value)"
+              >
+                {{ opt.label }}
+              </view>
+            </view>
+          </view>
+
+          <!-- 费用明细 -->
+          <view v-if="detailCosts.length" class="detail-section">
+            <text class="section-title">费用明细</text>
+            <view v-for="c in detailCosts" :key="c.ID" class="cost-row">
+              <text class="cost-type">{{ costTypeMap[c.CostType] || c.CostType }}</text>
+              <text class="cost-num">x{{ c.Quantity }}</text>
+              <text class="cost-price">{{ formatPrice(c.Price) }}</text>
+              <text class="cost-cur">{{ currencyMap[c.CurrencyType] || '-' }}</text>
+            </view>
+            <!-- 合计 -->
+            <view class="cost-total-row">
+              <text class="cost-total-label">合计</text>
+              <view class="cost-total-values">
+                <text v-for="g in costsByCurrency" :key="g.currency" class="cost-total-tag">
+                  {{ g.currency }} {{ g.total }}
+                </text>
+              </view>
+            </view>
+          </view>
+
+          <!-- 图片备注 -->
+          <view v-if="detailPhotos.length" class="detail-section">
+            <text class="section-title">图片备注</text>
+            <view class="photo-grid">
+              <image
+                v-for="p in detailPhotos"
+                :key="p.ID"
+                :src="getPhotoUrl(p.Sha256)"
+                mode="aspectFill"
+                class="photo-thumb"
+                @tap="uni.previewImage({ urls: detailPhotos.map(ph => getPhotoUrl(ph.Sha256)), current: getPhotoUrl(p.Sha256) })"
+              />
+            </view>
+          </view>
+
+          <!-- 状态记录 -->
+          <view v-if="detailCommits.length" class="detail-section">
+            <text class="section-title">变更记录</text>
+            <view v-for="c in detailCommits" :key="c.id" class="commit-row">
+              <view
+                class="commit-dot"
+                :style="{ backgroundColor: getStatusColor(c.status) }"
+              />
+              <view class="commit-body">
+                <view class="commit-top">
+                  <view
+                    class="commit-badge"
+                    :style="{ backgroundColor: getStatusColor(c.status) + '20', color: getStatusColor(c.status) }"
+                  >{{ getStatusLabel(c.status) }}</view>
+                  <text class="commit-date">{{ formatDate(c.createdAt) }}</text>
+                </view>
+                <text v-if="c.comment" class="commit-comment">{{ c.comment }}</text>
+                <view v-if="c.photos?.length" class="commit-photos">
+                  <image
+                    v-for="hash in c.photos"
+                    :key="hash"
+                    :src="getPhotoUrl(hash)"
+                    mode="aspectFill"
+                    class="commit-photo"
+                    @tap="uni.previewImage({ urls: c.photos.map(h => getPhotoUrl(h)), current: getPhotoUrl(hash) })"
+                  />
+                </view>
+              </view>
+            </view>
+          </view>
+
+          <view style="height:60rpx;" />
+        </scroll-view>
+      </view>
+    </view>
+
+    <!-- ─────────────────────────────────────────
+         状态变更弹窗
+    ───────────────────────────────────────── -->
+    <view v-if="showStatusModal" class="modal-mask" @tap.self="closeStatusModal">
+      <view class="modal-box">
+        <view class="modal-header">
+          <text class="modal-title">变更状态</text>
+          <text class="modal-close" @tap="closeStatusModal">✕</text>
+        </view>
+        <view class="modal-body">
+          <view class="form-item">
+            <text class="form-label">目标状态</text>
+            <view
+              class="status-preview"
+              :style="{ backgroundColor: getStatusColor(pendingStatus) + '20', color: getStatusColor(pendingStatus) }"
+            >
+              {{ getStatusLabel(pendingStatus) }}
+            </view>
+          </view>
+          <view class="form-item">
+            <text class="form-label">变更备注（可选）</text>
+            <textarea
+              v-model="pendingComment"
+              class="form-textarea"
+              placeholder="填写变更原因或说明"
+              maxlength="500"
+              auto-height
+            />
+          </view>
+        </view>
+        <view class="modal-footer" style="justify-content: flex-end;">
+          <view class="footer-right">
+            <button class="btn-cancel" @tap="closeStatusModal">取消</button>
+            <button class="btn-primary" :disabled="updatingStatus" @tap="confirmStatusChange">
+              {{ updatingStatus ? '提交中…' : '确认变更' }}
+            </button>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.page-wrap {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f3f4f6;
+}
+
+/* 搜索栏 */
+.search-bar {
+  background: #fff;
+  padding: 48rpx 24rpx 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
+}
+.search-input-wrap {
+  display: flex;
+  align-items: center;
+  background: #f3f4f6;
+  border-radius: 48rpx;
+  padding: 12rpx 24rpx;
+  gap: 12rpx;
+}
+.search-icon { font-size: 28rpx; color: #9ca3af; }
+.search-input { flex: 1; font-size: 28rpx; color: #111827; background: transparent; }
+.search-clear { font-size: 28rpx; color: #9ca3af; padding: 4rpx; }
+
+/* 状态标签 */
+.status-tabs {
+  background: #fff;
+  white-space: nowrap;
+  border-bottom: 1rpx solid #f3f4f6;
+}
+.status-tabs-inner {
+  display: inline-flex;
+  padding: 0 16rpx;
+  gap: 8rpx;
+}
+.status-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6rpx;
+  padding: 16rpx 20rpx;
+  font-size: 26rpx;
+  color: #6b7280;
+  border-bottom: 4rpx solid transparent;
+  white-space: nowrap;
+}
+.status-tab-active {
+  font-weight: 600;
+  border-bottom-color: currentColor;
+}
+.tab-badge {
+  background: #f3f4f6;
+  color: inherit;
+  font-size: 20rpx;
+  border-radius: 20rpx;
+  padding: 2rpx 10rpx;
+}
+
+/* 加载/空状态 */
+.loading-box, .empty-box {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16rpx;
+}
+.loading-text { color: #9ca3af; font-size: 28rpx; }
+.empty-icon { font-size: 80rpx; }
+.empty-text { color: #9ca3af; font-size: 28rpx; }
+
+/* 订单列表 */
+.list-scroll { flex: 1; padding: 20rpx; }
+.order-card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  margin-bottom: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
+}
+.order-card-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16rpx;
+  margin-bottom: 12rpx;
+}
+.order-title {
+  flex: 1;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #111827;
+}
+.order-status-badge {
+  font-size: 22rpx;
+  font-weight: 500;
+  padding: 4rpx 16rpx;
+  border-radius: 20rpx;
+  flex-shrink: 0;
+}
+.order-card-meta {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+.meta-text { font-size: 24rpx; color: #9ca3af; }
+.meta-sep { font-size: 24rpx; color: #d1d5db; }
+
+.load-more-tip {
+  display: flex;
+  justify-content: center;
+  padding: 16rpx 0;
+}
+
+/* ─── 抽屉 ─── */
+.drawer-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 100;
+  display: flex;
+  align-items: flex-end;
+}
+.drawer-box {
+  width: 100%;
+  background: #fff;
+  border-radius: 32rpx 32rpx 0 0;
+  height: 85vh;
+  display: flex;
+  flex-direction: column;
+}
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx;
+  border-bottom: 1rpx solid #f3f4f6;
+  flex-shrink: 0;
+}
+.drawer-title { font-size: 32rpx; font-weight: 600; color: #111827; }
+.drawer-close { font-size: 36rpx; color: #9ca3af; }
+.drawer-scroll { flex: 1; }
+
+/* 详情区块 */
+.detail-section {
+  padding: 24rpx 32rpx;
+  border-bottom: 1rpx solid #f9fafb;
+}
+.section-title {
+  display: block;
+  font-size: 26rpx;
+  color: #6b7280;
+  font-weight: 600;
+  margin-bottom: 16rpx;
+}
+.detail-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 16rpx;
+  margin-bottom: 16rpx;
+}
+.detail-label {
+  font-size: 26rpx;
+  color: #9ca3af;
+  width: 120rpx;
+  flex-shrink: 0;
+}
+.detail-value {
+  flex: 1;
+  font-size: 28rpx;
+  color: #111827;
+  word-break: break-all;
+}
+.detail-link { color: #2563eb; }
+
+/* 状态切换网格 */
+.status-change-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16rpx;
+}
+.status-change-btn {
+  text-align: center;
+  padding: 16rpx 8rpx;
+  border-radius: 12rpx;
+  font-size: 26rpx;
+  border: 2rpx solid;
+}
+.status-change-active { font-weight: 600; }
+
+/* 费用明细 */
+.cost-row {
+  display: flex;
+  gap: 16rpx;
+  padding: 12rpx 0;
+  border-bottom: 1rpx solid #f9fafb;
+  font-size: 28rpx;
+}
+.cost-type { flex: 1; color: #374151; }
+.cost-num { color: #9ca3af; }
+.cost-price { font-weight: 500; color: #111827; }
+.cost-cur { color: #6b7280; width: 80rpx; text-align: right; }
+.cost-total-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 16rpx;
+}
+.cost-total-label { font-size: 26rpx; color: #6b7280; font-weight: 600; }
+.cost-total-values { display: flex; gap: 8rpx; flex-wrap: wrap; }
+.cost-total-tag {
+  background: #dbeafe;
+  color: #1d4ed8;
+  font-size: 22rpx;
+  font-weight: 600;
+  padding: 4rpx 16rpx;
+  border-radius: 20rpx;
+}
+
+/* 图片网格 */
+.photo-grid { display: flex; flex-wrap: wrap; gap: 12rpx; }
+.photo-thumb {
+  width: 140rpx;
+  height: 140rpx;
+  border-radius: 12rpx;
+  background: #f3f4f6;
+}
+
+/* 变更记录 */
+.commit-row {
+  display: flex;
+  gap: 16rpx;
+  padding: 16rpx 0;
+  border-bottom: 1rpx solid #f9fafb;
+}
+.commit-dot {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-top: 10rpx;
+}
+.commit-body { flex: 1; min-width: 0; }
+.commit-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8rpx;
+}
+.commit-badge {
+  font-size: 22rpx;
+  padding: 4rpx 12rpx;
+  border-radius: 20rpx;
+}
+.commit-date { font-size: 22rpx; color: #9ca3af; }
+.commit-comment { font-size: 26rpx; color: #374151; display: block; margin-top: 4rpx; }
+.commit-photos { display: flex; flex-wrap: wrap; gap: 8rpx; margin-top: 8rpx; }
+.commit-photo {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 8rpx;
+  background: #f3f4f6;
+}
+
+/* ─── 模态框 ─── */
+.modal-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 200;
+  display: flex;
+  align-items: flex-end;
+}
+.modal-box {
+  width: 100%;
+  background: #fff;
+  border-radius: 32rpx 32rpx 0 0;
+  display: flex;
+  flex-direction: column;
+}
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx 32rpx 24rpx;
+  border-bottom: 1rpx solid #f3f4f6;
+}
+.modal-title { font-size: 32rpx; font-weight: 600; color: #111827; }
+.modal-close { font-size: 36rpx; color: #9ca3af; }
+.modal-body { padding: 24rpx 32rpx; }
+.form-item { margin-bottom: 28rpx; }
+.form-label {
+  display: block;
+  font-size: 26rpx;
+  color: #6b7280;
+  margin-bottom: 12rpx;
+}
+.status-preview {
+  display: inline-flex;
+  padding: 8rpx 24rpx;
+  border-radius: 20rpx;
+  font-size: 28rpx;
+  font-weight: 600;
+}
+.form-textarea {
+  width: 100%;
+  min-height: 120rpx;
+  border: 2rpx solid #e5e7eb;
+  border-radius: 12rpx;
+  padding: 16rpx 20rpx;
+  font-size: 28rpx;
+  color: #111827;
+  background: #fff;
+  box-sizing: border-box;
+}
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx 32rpx 48rpx;
+  border-top: 1rpx solid #f3f4f6;
+}
+.footer-right { display: flex; gap: 16rpx; margin-left: auto; }
+.btn-cancel {
+  background: #f3f4f6;
+  color: #374151;
+  border: none;
+  border-radius: 12rpx;
+  padding: 16rpx 32rpx;
+  font-size: 28rpx;
+}
+.btn-primary {
+  background: #2563eb;
+  color: #fff;
+  border: none;
+  border-radius: 12rpx;
+  padding: 16rpx 32rpx;
+  font-size: 28rpx;
+}
+button[disabled] { opacity: 0.5; }
+</style>
diff --git a/frontend/ops_uniapp/pages/schedule/schedule.vue b/frontend/ops_uniapp/pages/schedule/schedule.vue
new file mode 100644
index 0000000..3a7a3cb
--- /dev/null
+++ b/frontend/ops_uniapp/pages/schedule/schedule.vue
@@ -0,0 +1,627 @@
+<script setup>
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import { scheduleApi } from '../../@api/schedule.js'
+import { userStore } from '../../store/user.js'
+
+// ───────────── 状态 ─────────────
+const loading = ref(false)
+const events = ref([])
+const showModal = ref(false)
+
+// 当前选中月份（YYYY-MM）
+const today = new Date()
+const curYear = ref(today.getFullYear())
+const curMonth = ref(today.getMonth() + 1)  // 1~12
+
+// 事件表单
+const form = reactive({
+  id: 0,
+  title: '',
+  startDate: '',
+  endDate: '',
+  color: '#066FD1',
+  isEditing: false,
+  isEditable: true,
+})
+
+// 颜色选项（对标 PC 端 scheduleView.vue）
+const colorOptions = [
+  { value: '#066FD1', label: '工作' },
+  { value: '#09D119', label: '值班' },
+  { value: '#FF00FF', label: '考试' },
+  { value: '#FFFF00', label: '待命' },
+  { value: '#D16C13', label: '私假' },
+  { value: '#D10D21', label: '公假' },
+]
+
+// ───────────── 工具函数 ─────────────
+function pad(n) { return String(n).padStart(2, '0') }
+
+function todayStr() {
+  return `${today.getFullYear()}-${pad(today.getMonth() + 1)}-${pad(today.getDate())}`
+}
+
+function monthStart() {
+  return `${curYear.value}-${pad(curMonth.value)}-01`
+}
+
+function monthEnd() {
+  // 下个月第 0 天 = 本月最后一天
+  const last = new Date(curYear.value, curMonth.value, 0)
+  return `${curYear.value}-${pad(curMonth.value)}-${pad(last.getDate())}`
+}
+
+function formatDate(str) {
+  if (!str) return ''
+  return str.slice(0, 10)
+}
+
+function isToday(dateStr) {
+  return dateStr && dateStr.slice(0, 10) === todayStr()
+}
+
+// 判断 event 是否在当天日期范围内
+function isTodayEvent(item) {
+  const t = todayStr()
+  const s = (item.StartDate || '').slice(0, 10)
+  const e = (item.EndDate || item.StartDate || '').slice(0, 10)
+  return s <= t && t <= e
+}
+
+function colorLabel(hex) {
+  return colorOptions.find(c => c.value === hex)?.label || ''
+}
+
+// ───────────── API 调用 ─────────────
+async function loadEvents() {
+  loading.value = true
+  try {
+    const { errCode, data } = await scheduleApi.getEvents({
+      start: monthStart(),
+      end: monthEnd(),
+    })
+    if (errCode === 0 && data?.list) {
+      events.value = data.list
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// ───────────── 月份切换 ─────────────
+function prevMonth() {
+  if (curMonth.value === 1) { curYear.value--; curMonth.value = 12 }
+  else curMonth.value--
+  loadEvents()
+}
+
+function nextMonth() {
+  if (curMonth.value === 12) { curYear.value++; curMonth.value = 1 }
+  else curMonth.value++
+  loadEvents()
+}
+
+function goToday() {
+  curYear.value = today.getFullYear()
+  curMonth.value = today.getMonth() + 1
+  loadEvents()
+}
+
+// ───────────── 日程按日期分组 ─────────────
+function groupByDate(list) {
+  const map = {}
+  list.forEach(item => {
+    const key = (item.StartDate || '').slice(0, 10)
+    if (!map[key]) map[key] = []
+    map[key].push(item)
+  })
+  return Object.keys(map).sort().map(date => ({ date, items: map[date] }))
+}
+
+// ───────────── 模态框操作 ─────────────
+function openAdd() {
+  if (!userStore.isLoggedIn) {
+    uni.showToast({ title: '请先登录', icon: 'none' })
+    return
+  }
+  Object.assign(form, {
+    id: 0,
+    title: '',
+    startDate: todayStr(),
+    endDate: todayStr(),
+    color: '#066FD1',
+    isEditing: false,
+    isEditable: true,
+  })
+  showModal.value = true
+}
+
+function openEdit(item) {
+  Object.assign(form, {
+    id: item.ID,
+    title: item.Title,
+    startDate: (item.StartDate || '').slice(0, 10),
+    endDate: (item.EndDate || item.StartDate || '').slice(0, 10),
+    color: item.BgColor || '#066FD1',
+    isEditing: true,
+    isEditable: item.edit !== false,
+  })
+  showModal.value = true
+}
+
+function closeModal() {
+  showModal.value = false
+}
+
+async function submitForm() {
+  if (!form.title.trim()) {
+    uni.showToast({ title: '请输入日程内容', icon: 'none' })
+    return
+  }
+  try {
+    let res
+    if (form.isEditing) {
+      res = await scheduleApi.editEvent({
+        id: form.id,
+        title: form.title.trim(),
+        start: form.startDate,
+        end: form.startDate === form.endDate ? form.endDate : form.endDate,
+        color: form.color,
+      })
+    } else {
+      res = await scheduleApi.addEvent({
+        title: form.title.trim(),
+        start: form.startDate,
+        end: form.startDate === form.endDate ? form.endDate : form.endDate,
+        color: form.color,
+      })
+    }
+    if (res.errCode === 0 && res.data?.err_code === 0 || res.raw?.err_code === 0) {
+      uni.showToast({ title: form.isEditing ? '修改成功' : '添加成功', icon: 'success' })
+      closeModal()
+      loadEvents()
+    } else {
+      uni.showToast({ title: '操作失败', icon: 'none' })
+    }
+  } catch {
+    uni.showToast({ title: '网络错误', icon: 'none' })
+  }
+}
+
+async function deleteEvent() {
+  if (!form.isEditable) return
+  uni.showModal({
+    title: '确认删除',
+    content: '确定要删除这个日程吗？',
+    success: async (res) => {
+      if (!res.confirm) return
+      try {
+        const r = await scheduleApi.deleEvent({ id: form.id })
+        if (r.raw?.err_code === 0) {
+          uni.showToast({ title: '已删除', icon: 'success' })
+          closeModal()
+          loadEvents()
+        }
+      } catch {
+        uni.showToast({ title: '删除失败', icon: 'none' })
+      }
+    }
+  })
+}
+
+// ───────────── 生命周期 ─────────────
+let timer = null
+onMounted(() => {
+  loadEvents()
+  timer = setInterval(loadEvents, 30000)
+})
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+})
+</script>
+
+<template>
+  <view class="page-wrap">
+    <!-- 顶部导航 -->
+    <view class="nav-bar">
+      <view class="nav-left" @tap="prevMonth">
+        <text class="nav-arrow">‹</text>
+      </view>
+      <view class="nav-center" @tap="goToday">
+        <text class="nav-title">{{ curYear }} 年 {{ curMonth }} 月</text>
+        <text class="nav-sub">点击回今天</text>
+      </view>
+      <view class="nav-right" @tap="nextMonth">
+        <text class="nav-arrow">›</text>
+      </view>
+    </view>
+
+    <!-- 加载中 -->
+    <view v-if="loading" class="loading-box">
+      <text class="loading-text">加载中…</text>
+    </view>
+
+    <!-- 空状态 -->
+    <view v-else-if="!events.length" class="empty-box">
+      <text class="empty-icon">📅</text>
+      <text class="empty-text">本月暂无日程</text>
+    </view>
+
+    <!-- 日程列表（按日期分组） -->
+    <scroll-view v-else scroll-y class="list-scroll">
+      <view v-for="group in groupByDate(events)" :key="group.date" class="date-group">
+        <!-- 日期标题 -->
+        <view class="date-header" :class="{ 'date-today': isToday(group.date) }">
+          <text class="date-text">{{ group.date }}</text>
+          <text v-if="isToday(group.date)" class="today-badge">今天</text>
+        </view>
+        <!-- 该日期下的事件 -->
+        <view
+          v-for="item in group.items"
+          :key="item.ID"
+          class="event-card"
+          @tap="openEdit(item)"
+        >
+          <view class="event-color-bar" :style="{ backgroundColor: item.BgColor || '#066FD1' }" />
+          <view class="event-body">
+            <text class="event-title">{{ item.Title }}</text>
+            <text class="event-meta">
+              {{ colorLabel(item.BgColor) }}
+              <text v-if="item.StartDate !== item.EndDate">
+                · {{ formatDate(item.StartDate) }} ~ {{ formatDate(item.EndDate) }}
+              </text>
+            </text>
+          </view>
+          <text v-if="item.edit !== false" class="event-edit-icon">›</text>
+        </view>
+      </view>
+      <view style="height: 80px;" />
+    </scroll-view>
+
+    <!-- 悬浮添加按钮（已登录才显示） -->
+    <view v-if="userStore.isLoggedIn" class="fab" @tap="openAdd">
+      <text class="fab-icon">＋</text>
+    </view>
+
+    <!-- 弹出模态框 -->
+    <view v-if="showModal" class="modal-mask" @tap.self="closeModal">
+      <view class="modal-box">
+        <view class="modal-header">
+          <text class="modal-title">{{ form.isEditing ? '编辑日程' : '添加日程' }}</text>
+          <text class="modal-close" @tap="closeModal">✕</text>
+        </view>
+
+        <view class="modal-body">
+          <!-- 日程内容 -->
+          <view class="form-item">
+            <text class="form-label">日程内容</text>
+            <input
+              v-model="form.title"
+              class="form-input"
+              placeholder="请输入日程内容"
+              maxlength="140"
+              :disabled="!form.isEditable"
+            />
+          </view>
+
+          <!-- 开始日期 -->
+          <view class="form-item">
+            <text class="form-label">开始日期</text>
+            <picker mode="date" :value="form.startDate" @change="e => form.startDate = e.detail.value">
+              <view class="form-picker">
+                <text>{{ form.startDate || '请选择' }}</text>
+                <text class="picker-arrow">›</text>
+              </view>
+            </picker>
+          </view>
+
+          <!-- 结束日期 -->
+          <view class="form-item">
+            <text class="form-label">结束日期</text>
+            <picker mode="date" :value="form.endDate" @change="e => form.endDate = e.detail.value">
+              <view class="form-picker">
+                <text>{{ form.endDate || '请选择' }}</text>
+                <text class="picker-arrow">›</text>
+              </view>
+            </picker>
+          </view>
+
+          <!-- 颜色选择 -->
+          <view class="form-item">
+            <text class="form-label">类型</text>
+            <view class="color-grid">
+              <view
+                v-for="c in colorOptions"
+                :key="c.value"
+                class="color-item"
+                :class="{ 'color-selected': form.color === c.value }"
+                @tap="form.isEditable && (form.color = c.value)"
+              >
+                <view class="color-dot" :style="{ backgroundColor: c.value }" />
+                <text class="color-label">{{ c.label }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <view class="modal-footer">
+          <button
+            v-if="form.isEditing && form.isEditable"
+            class="btn-danger"
+            @tap="deleteEvent"
+          >删除</button>
+          <view class="footer-right">
+            <button class="btn-cancel" @tap="closeModal">取消</button>
+            <button
+              v-if="form.isEditable"
+              class="btn-primary"
+              @tap="submitForm"
+            >{{ form.isEditing ? '保存' : '添加' }}</button>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.page-wrap {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f3f4f6;
+}
+
+/* 顶部导航 */
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+  padding: 48rpx 32rpx 24rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
+}
+.nav-arrow {
+  font-size: 48rpx;
+  color: #374151;
+  padding: 0 24rpx;
+}
+.nav-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.nav-title {
+  font-size: 34rpx;
+  font-weight: 600;
+  color: #111827;
+}
+.nav-sub {
+  font-size: 22rpx;
+  color: #9ca3af;
+  margin-top: 4rpx;
+}
+
+/* 加载/空状态 */
+.loading-box, .empty-box {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16rpx;
+}
+.loading-text { color: #9ca3af; font-size: 28rpx; }
+.empty-icon { font-size: 80rpx; }
+.empty-text { color: #9ca3af; font-size: 28rpx; }
+
+/* 列表滚动区 */
+.list-scroll {
+  flex: 1;
+  padding: 24rpx 24rpx 0;
+}
+
+/* 日期分组 */
+.date-group { margin-bottom: 24rpx; }
+.date-header {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  padding: 8rpx 0 12rpx;
+}
+.date-text { font-size: 26rpx; color: #6b7280; font-weight: 500; }
+.date-today .date-text { color: #2563eb; }
+.today-badge {
+  background: #2563eb;
+  color: #fff;
+  font-size: 20rpx;
+  padding: 2rpx 12rpx;
+  border-radius: 20rpx;
+}
+
+/* 事件卡片 */
+.event-card {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 12rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
+}
+.event-color-bar {
+  width: 8rpx;
+  align-self: stretch;
+  flex-shrink: 0;
+}
+.event-body {
+  flex: 1;
+  padding: 20rpx 20rpx 20rpx 16rpx;
+  min-width: 0;
+}
+.event-title {
+  font-size: 30rpx;
+  font-weight: 500;
+  color: #111827;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.event-meta {
+  font-size: 24rpx;
+  color: #9ca3af;
+  margin-top: 6rpx;
+  display: block;
+}
+.event-edit-icon {
+  color: #d1d5db;
+  font-size: 36rpx;
+  padding-right: 20rpx;
+}
+
+/* FAB 悬浮按钮 */
+.fab {
+  position: fixed;
+  right: 40rpx;
+  bottom: 120rpx;
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 48rpx;
+  background: #2563eb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 24rpx rgba(37,99,235,0.4);
+}
+.fab-icon { color: #fff; font-size: 52rpx; line-height: 1; }
+
+/* 模态框 */
+.modal-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 100;
+  display: flex;
+  align-items: flex-end;
+}
+.modal-box {
+  width: 100%;
+  background: #fff;
+  border-radius: 32rpx 32rpx 0 0;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx 32rpx 24rpx;
+  border-bottom: 1rpx solid #f3f4f6;
+}
+.modal-title { font-size: 32rpx; font-weight: 600; color: #111827; }
+.modal-close { font-size: 36rpx; color: #9ca3af; padding: 8rpx; }
+
+.modal-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24rpx 32rpx;
+}
+
+/* 表单 */
+.form-item { margin-bottom: 28rpx; }
+.form-label {
+  display: block;
+  font-size: 26rpx;
+  color: #6b7280;
+  margin-bottom: 12rpx;
+}
+.form-input {
+  width: 100%;
+  border: 2rpx solid #e5e7eb;
+  border-radius: 12rpx;
+  padding: 16rpx 20rpx;
+  font-size: 30rpx;
+  color: #111827;
+  background: #fff;
+  box-sizing: border-box;
+}
+.form-picker {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 2rpx solid #e5e7eb;
+  border-radius: 12rpx;
+  padding: 16rpx 20rpx;
+  font-size: 30rpx;
+  color: #111827;
+  background: #fff;
+}
+.picker-arrow { color: #d1d5db; font-size: 32rpx; }
+
+/* 颜色网格 */
+.color-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16rpx;
+}
+.color-item {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  padding: 14rpx 16rpx;
+  border: 2rpx solid #e5e7eb;
+  border-radius: 12rpx;
+  background: #fff;
+}
+.color-selected {
+  border-color: #2563eb;
+  background: #eff6ff;
+}
+.color-dot {
+  width: 28rpx;
+  height: 28rpx;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.color-label { font-size: 24rpx; color: #374151; }
+
+/* 底部按钮 */
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx 32rpx 48rpx;
+  border-top: 1rpx solid #f3f4f6;
+}
+.footer-right {
+  display: flex;
+  gap: 16rpx;
+  margin-left: auto;
+}
+.btn-danger {
+  background: #fee2e2;
+  color: #dc2626;
+  border: none;
+  border-radius: 12rpx;
+  padding: 16rpx 32rpx;
+  font-size: 28rpx;
+}
+.btn-cancel {
+  background: #f3f4f6;
+  color: #374151;
+  border: none;
+  border-radius: 12rpx;
+  padding: 16rpx 32rpx;
+  font-size: 28rpx;
+}
+.btn-primary {
+  background: #2563eb;
+  color: #fff;
+  border: none;
+  border-radius: 12rpx;
+  padding: 16rpx 32rpx;
+  font-size: 28rpx;
+}
+</style>
diff --git a/frontend/ops_uniapp/pages/setting/my_info.vue b/frontend/ops_uniapp/pages/setting/my_info.vue
index 62aca7f..0657d76 100644
--- a/frontend/ops_uniapp/pages/setting/my_info.vue
+++ b/frontend/ops_uniapp/pages/setting/my_info.vue
@@ -1,417 +1,465 @@
-<template>
-
-	<tabler-header type="mini" ref="heard"></tabler-header>
-	<div class="page-wrapper">
-		<!-- Page header -->
-		<div class="page-header d-print-none">
-			<div class="container-xl">
-				<div class="row g-2 align-items-center">
-					<div class="col">
-						<h2 class="page-title">
-							设置
-						</h2>
-					</div>
-				</div>
-			</div>
-		</div>
-		<!-- Page body -->
-		<div class="page-body">
-			<div class="container-xl">
-				<div class="card">
-					<div class="row g-0">
-
-						<setting-menu></setting-menu>
-
-						<div class="col-12 col-md-9 d-flex flex-column">
-							<div class="card-body">
-
-								<h2 class="mb-4">信息设置</h2>
-								<!-- <h3 class="card-title">Profile Details</h3> -->
-								<div class="row align-items-center">
-									<div class="col-auto">
-
-										<avatar size="xl" :url="user_info.AvatarPath"></avatar>
-									</div>
-									<div class="col-auto"><a class="btn" @click="showPopup">更改头像 </a></div>
-									<!-- <div class="col-auto"><a href="#" class="btn btn-ghost-danger">
-	                        删除头像
-	                      </a></div> -->
-								</div>
-								<!-- <h3 class="card-title mt-4">Business Profile</h3> -->
-								<div class="row g-3">
-									<div class="col-md">
-										<div class="form-label">名字</div>
-										<input type="text" class="my_input_field" v-model="user_info.Username"
-											maxlength="30">
-									</div>
-
-									<div class="col-md">
-										<div class="form-label">备注</div>
-										<input type="text" class="my_input_field" v-model="user_info.FirstName"
-											maxlength="50">
-									</div>
-								</div>
-
-								<div class="mb-3">
-									<label class="form-label">生日</label>
-									<div class="row g-2">
-										<div class="col-5">
-
-											<uni-datetime-picker type="date" :clear-icon="false" v-model="birthdate" />
-										</div>
-									</div>
-								</div>
-
-
-							</div>
-
-							<div class="card-footer bg-transparent mt-auto">
-								<div class="btn-list justify-content-end">
-
-									<a href="#" class="btn btn-primary">
-										提交
-									</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-	</div>
-
-	<tabler-footer></tabler-footer>
-
-	<uni-popup ref="popup" type="center">
-		<view class="popup-content">
-			<div class="card card-body container">
-				<h1>头像裁剪工具</h1>
-
-				<div class="flex-wrapper">
-					<!-- 左侧裁剪区 -->
-					<div class="crop-section">
-						<div ref="image_wrapper">
-							<img ref="cropper_image"
-								src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
-						</div>
-						<!-- 上传进度 -->
-						<div class="progress-container">
-							<div class="progress-bar"></div>
-						</div>
-
-
-
-						<div class="preview-stats">
-							<!-- <p>当前缩放: <span id="zoomValue">100%</span></p> -->
-							<p>图片尺寸: <span ref="imageSize">0 x 0</span></p>
-						</div>
-					</div>
-
-					<!-- 右侧预览区 -->
-					<div class="preview-section">
-						<h3>实时预览</h3>
-						<div class="preview-box">
-							<img ref="preview_img"
-								src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
-						</div>
-
-						<!-- 控制按钮 -->
-						<div class="controls">
-
-							<button class="btn btn-primary" @click="selefile">📁 选择图片</button>
-							<button class="btn btn-secondary " onclick="rotateImage(-90)">↩️ 左旋</button>
-							<button class="btn btn-success " id="uploadBtn">✂️ 裁剪头像</button>
-
-							<button class="btn btn-danger " style="margin-top: 150px;" @click="closePopup">❌ 取消</button>
-
-
-
-						</div>
-					</div>
-				</div>
-			</div>
-		</view>
-	</uni-popup>
-
-
-
-
-</template>
-
 <script>
-	import "/static/dist/libs/cropper/cropper.min.js"
+/**
+ * 用户设置页（个人信息）
+ * 对标 PC 前端 src/views/settings/AccountView.vue
+ */
+import { userStore } from '../../store/user.js'
+import { authApi } from '../../@api/auth.js'
 
-	export default {
-		data() {
-			return {
-				user_info: {
-					AvatarPath: "",
-					Username: "",
-					FirstName: "",
-					Birthdate: "",
-				},
-				birthdate: "",
-			}
-		},
-		methods: {
-			showPopup() {
-				this.$refs.popup.open();
-			},
-			closePopup() {
-				this.$refs.popup.close();
-			},
-			updateImageInfo() {
-				if (this.cropper) {
-					const data = this.cropper.getData();
-					// document.getElementById('zoomValue').textContent = 
-					//     `${Math.round(currentScale * 100)}%`;
-					// document.getElementById('imageSize').textContent =
-					//   `${Math.round(data.width)} x ${Math.round(data.height)}`;
-				}
-			},
-			updatePreview() {
-				const canvas = this.cropper.getCroppedCanvas({
-					width: 250,
-					height: 250,
-					imageSmoothingQuality: 'high'
-				});
+export default {
+  data() {
+    return {
+      isLoggedIn: false,
 
-				if (canvas) {
-					var that = this
-					canvas.toBlob(blob => {
-						const previewUrl = URL.createObjectURL(blob);
-						that.$refs.preview_img.src = previewUrl;
-						// 清理旧URL
-						setTimeout(() => URL.revokeObjectURL(previewUrl), 1000);
-					}, 'image/jpeg', 0.85);
-					this.updateImageInfo();
-				}
-			},
-			initCropper(imageSrc) {
-				var that = this
-				// 初始化Cropper
-				if (this.cropper) {
-					this.cropper.destroy();
-				}
-				const image = this.$refs.cropper_image
-				console.log(image)
-				image.src = imageSrc;
-				this.cropper = new Cropper(image, {
-					aspectRatio: 1,
-					viewMode: 2,
-					autoCropArea: 0.8,
-					zoomable: true,
-					zoomOnWheel: true,
-					zoomOnTouch: true,
-					wheelZoomRatio: 0.1,
-					//minCanvasWidth: 400,
-					//minCanvasHeight: 400,
-					crop: that.updatePreview,
-					ready() {
-						that.updateImageInfo();
-						//document.querySelector('.progress-container').style.display = 'none';
-					}
-				});
-			},
-			selefile() {
-				var that=this
-				uni.chooseImage({
-					count: 1, // 最多9张
-					sourceType: ['album', 'camera'], // 来源相册或相机
-					success: (res) => {
+      // 表单
+      form: {
+        username: '',
+        remark: '',
+        birthday: '',
+      },
+      avatarUrl: '/static/ava.svg',
 
-						console.log(res);
-						// 如果需要得到原始的File对象（在H5中），则使用res.tempFiles
-						const file = res.tempFiles[0];
-						if (!file) return;
+      // 状态
+      loading: false,
+      avatarUploading: false,
+    }
+  },
 
-						if (!file.type.startsWith('image/')) {
-							that.$refs.footer.alert('warning', "⚠️ 请选择有效的图片文件")
-							return;
-						}
+  methods: {
+    // ── 初始化 ──
 
-						const reader = new FileReader();
-						reader.onload = () => {
-							that.initCropper(reader.result);
-							//currentScale = 1;
-						};
-						reader.readAsDataURL(file);
-					}
-				});
-				// this.initCropper(
-				// 	'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
-				// );
+    initForm() {
+      this.isLoggedIn   = userStore.isLoggedIn
+      this.avatarUrl    = userStore.getAvatarUrl()
+      const info        = userStore.userInfo
+      if (info) {
+        this.form.username = info.Username || ''
+        this.form.remark   = info.FirstName || ''
+        this.form.birthday = userStore.getBirthday()
+      }
+    },
 
-			},
+    // ── 日期选择 ──
 
-		},
+    onBirthdayChange(e) {
+      this.form.birthday = e.detail.value
+    },
 
-		mounted() {
+    // ── 头像上传 ──
 
-			if (this.$refs.heard.is_login) {
-				this.user_info = this.$refs.heard.user_info
-				this.birthdate = this.user_info.Birthdate.substring(0, 10)
-			} else {
+    chooseAvatar() {
+      if (!this.isLoggedIn) {
+        uni.showToast({ title: '请先登录', icon: 'none' })
+        return
+      }
+      uni.chooseImage({
+        count: 1,
+        sourceType: ['album', 'camera'],
+        success: async (res) => {
+          const filePath = res.tempFilePaths[0]
+          if (!filePath) return
+          this.avatarUploading = true
+          try {
+            const { errCode } = await authApi.updateAvatar(filePath)
+            if (errCode === 0) {
+              uni.showToast({ title: '头像更新成功', icon: 'success' })
+              // 刷新用户信息（含新头像路径）
+              await userStore.fetchUserInfo()
+              this.avatarUrl = userStore.getAvatarUrl()
+            } else {
+              uni.showToast({ title: '头像上传失败', icon: 'none' })
+            }
+          } catch {
+            // request.js 已处理
+          } finally {
+            this.avatarUploading = false
+          }
+        },
+      })
+    },
 
-			}
+    // ── 保存信息 ──
 
-			// 初始化默认图片
+    async saveInfo() {
+      if (!this.isLoggedIn) {
+        uni.showToast({ title: '请先登录', icon: 'none' })
+        return
+      }
+      if (!this.form.username.trim()) {
+        uni.showToast({ title: '名字不能为空', icon: 'none' })
+        return
+      }
+      this.loading = true
+      try {
+        const { errCode } = await authApi.updateInfo({
+          username: this.form.username.trim(),
+          remark:   this.form.remark.trim(),
+          birthday: this.form.birthday,
+        })
+        if (errCode === 0) {
+          uni.showToast({ title: '保存成功', icon: 'success' })
+          await userStore.fetchUserInfo()
+        } else {
+          uni.showToast({ title: '保存失败', icon: 'none' })
+        }
+      } catch {
+        // request.js 已处理
+      } finally {
+        this.loading = false
+      }
+    },
 
+    // ── 登出 ──
 
+    handleLogout() {
+      uni.showModal({
+        title: '确认登出',
+        content: '确定要退出登录吗？',
+        success: (res) => {
+          if (res.confirm) {
+            userStore.logout()
+            uni.reLaunch({ url: '/pages/index/index' })
+          }
+        },
+      })
+    },
 
-		}
-	}
+    goToLogin() {
+      uni.navigateTo({ url: '/pages/signin' })
+    },
+  },
+
+  onShow() {
+    this.initForm()
+  },
+
+  onLoad() {
+    this.initForm()
+  },
+}
 </script>
 
-<style>
-	@import url("/static/dist/libs/cropper/cropper.min.css");
-	/* 头像裁剪器样式*/
+<template>
+  <view class="settings-page">
 
-	.container {
-		width: 95%;
-		/* 改为百分比宽度 */
-		margin: 20px auto;
-		/* 增加上下边距 */
-		max-width: 1200px;
-		/* 保留最大宽度 */
-		background: white;
-		padding: 30px;
-		border-radius: 12px;
+    <!-- 顶部导航 -->
+    <view class="navbar">
+      <view class="back-btn" @tap="() => uni.navigateBack()">
+        <text class="back-icon">‹</text>
+      </view>
+      <text class="navbar-title">个人设置</text>
+      <view style="width: 80rpx;" />
+    </view>
 
-	}
+    <scroll-view scroll-y class="content">
 
-	.flex-wrapper {
-		display: flex;
-		gap: 30px;
-		margin-top: 20px;
-		flex-wrap: wrap;
-		/* 添加换行支持 */
-	}
+      <!-- ── 未登录提示 ── -->
+      <view v-if="!isLoggedIn" class="not-login-card">
+        <text class="icon-emoji" style="font-size: 80rpx;">👤</text>
+        <text class="not-login-title">尚未登录</text>
+        <text class="not-login-desc">登录后可查看和修改个人信息</text>
+        <button class="primary-btn" @tap="goToLogin">立即登录</button>
+      </view>
 
-	/* 裁剪区域 */
-	.crop-section {
-		background-color: aqua;
-		flex: 1 1 60%;
-		/* 弹性布局基础宽度 */
-		min-width: 300px;
-		/* 降低最小宽度 */
-		height: auto;
-		/* 移除固定高度 */
-		min-height: 400px;
-		/* 设置最小高度 */
-	}
+      <!-- ── 已登录内容 ── -->
+      <view v-else>
 
-	#image-wrapper {
-		width: 100%;
-		height: 60vh;
-		/* 改用视窗单位 */
-		max-height: 600px;
-		/* 设置最大高度 */
-		background: #f8f9fa;
-		border: 2px dashed #ddd;
-		border-radius: 8px;
-		overflow: hidden;
-	}
+        <!-- 头像区域 -->
+        <view class="avatar-card">
+          <view class="avatar-wrap" @tap="chooseAvatar">
+            <image :src="avatarUrl" class="avatar" mode="aspectFill" />
+            <view class="avatar-overlay">
+              <text class="camera-icon">📷</text>
+            </view>
+            <view v-if="avatarUploading" class="uploading-mask">
+              <text class="uploading-text">上传中…</text>
+            </view>
+          </view>
+          <text class="avatar-hint">点击更换头像</text>
+        </view>
 
-	/* 预览区域自适应 */
-	.preview-section {
-		flex: 1 1 35%;
-		/* 弹性布局基础宽度 */
-		min-width: 250px;
-		/* 设置合理最小宽度 */
-	}
+        <!-- 信息表单 -->
+        <view class="form-card">
+          <text class="section-title">基本信息</text>
 
-	/* 移动端适配 */
-	@media (max-width: 768px) {
-		.container {
-			padding: 15px;
-			/* 减少内边距 */
-		}
+          <!-- 名字 -->
+          <view class="field">
+            <text class="label">名字</text>
+            <input
+              v-model="form.username"
+              class="input"
+              placeholder="输入你的名字"
+              maxlength="30"
+            />
+          </view>
 
-		.flex-wrapper {
-			flex-direction: column;
-			/* 垂直排列 */
-		}
+          <!-- 备注 -->
+          <view class="field">
+            <text class="label">备注</text>
+            <input
+              v-model="form.remark"
+              class="input"
+              placeholder="个人简介或备注"
+              maxlength="50"
+            />
+          </view>
 
-		.crop-section,
-		.preview-section {
-			width: 100% !important;
-			/* 强制全宽 */
-			min-width: unset;
-			/* 移除最小宽度 */
-		}
+          <!-- 生日 -->
+          <view class="field">
+            <text class="label">生日</text>
+            <picker
+              mode="date"
+              :value="form.birthday"
+              @change="onBirthdayChange"
+            >
+              <view class="picker-display">
+                <text :class="form.birthday ? 'picker-value' : 'picker-placeholder'">
+                  {{ form.birthday || '选择生日' }}
+                </text>
+                <text class="picker-arrow">›</text>
+              </view>
+            </picker>
+          </view>
 
-		#image-wrapper {
-			height: 50vh;
-			/* 调整移动端高度 */
-		}
+          <!-- 保存按钮 -->
+          <button
+            class="primary-btn"
+            :class="{ 'btn-loading': loading }"
+            :disabled="loading"
+            @tap="saveInfo"
+          >
+            {{ loading ? '保存中…' : '保存修改' }}
+          </button>
+        </view>
 
-		.preview-box {
-			width: 120px;
-			/* 缩小预览区域 */
-			height: 120px;
-		}
+        <!-- 安全操作 -->
+        <view class="danger-card">
+          <button class="logout-btn" @tap="handleLogout">退出登录</button>
+        </view>
 
-		.controls {
-			flex-direction: column;
-			/* 垂直排列按钮 */
-			margin-top: 10px;
-		}
-	}
+      </view>
+    </scroll-view>
+  </view>
+</template>
 
+<style scoped>
+/* ── 页面 ── */
+.settings-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f3f4f6;
+}
 
-	#cropper-image {
-		max-width: none !important;
-		max-height: none !important;
-	}
+/* ── 顶部导航 ── */
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 88rpx 24rpx 24rpx;
+  background: #fff;
+  border-bottom: 1rpx solid #e5e7eb;
+}
+.back-btn {
+  width: 80rpx;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.back-icon {
+  font-size: 56rpx;
+  color: #374151;
+  line-height: 1;
+}
+.navbar-title {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #111827;
+}
 
-	/* 控制区域 */
-	.controls {
-		margin-top: 20px;
-		display: flex;
-		flex-direction: column;
-		grid-template-columns: repeat(3, 1fr);
-		gap: 10px;
-	}
+/* ── 内容区 ── */
+.content {
+  flex: 1;
+  padding: 32rpx;
+}
 
-	/* 预览区域 */
-	.preview-section {
-		flex: 1;
-		min-width: 50px;
-	}
+/* ── 未登录 ── */
+.not-login-card {
+  background: #fff;
+  border-radius: 24rpx;
+  padding: 80rpx 40rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20rpx;
+  margin-top: 40rpx;
+}
+.not-login-title {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #374151;
+}
+.not-login-desc {
+  font-size: 28rpx;
+  color: #9ca3af;
+  text-align: center;
+}
 
-	.preview-box {
-		width: 150px;
-		height: 150px;
-		/* border-radius: 50%; */
-		border: 3px solid var(--primary-color);
-		overflow: hidden;
-		margin: 0 auto 20px;
-	}
+/* ── 头像区 ── */
+.avatar-card {
+  background: #fff;
+  border-radius: 24rpx;
+  padding: 48rpx 32rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20rpx;
+  margin-bottom: 28rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+}
+.avatar-wrap {
+  position: relative;
+  width: 180rpx;
+  height: 180rpx;
+}
+.avatar {
+  width: 180rpx;
+  height: 180rpx;
+  border-radius: 50%;
+  background: #e5e7eb;
+}
+.avatar-overlay {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 56rpx;
+  height: 56rpx;
+  background: #2563eb;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 4rpx solid #fff;
+}
+.camera-icon { font-size: 28rpx; }
+.uploading-mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.uploading-text {
+  font-size: 24rpx;
+  color: #fff;
+}
+.avatar-hint {
+  font-size: 26rpx;
+  color: #9ca3af;
+}
 
-	#preview-img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
+/* ── 表单卡片 ── */
+.form-card {
+  background: #fff;
+  border-radius: 24rpx;
+  padding: 36rpx;
+  margin-bottom: 28rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+}
+.section-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #374151;
+  display: block;
+  margin-bottom: 32rpx;
+}
+.field {
+  margin-bottom: 36rpx;
+}
+.label {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #374151;
+  display: block;
+  margin-bottom: 12rpx;
+}
+.input {
+  width: 100%;
+  height: 88rpx;
+  border: 2rpx solid #d1d5db;
+  border-radius: 16rpx;
+  padding: 0 28rpx;
+  font-size: 30rpx;
+  color: #111827;
+  background: #fff;
+  box-sizing: border-box;
+}
 
+/* ── Picker ── */
+.picker-display {
+  height: 88rpx;
+  border: 2rpx solid #d1d5db;
+  border-radius: 16rpx;
+  padding: 0 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+}
+.picker-value {
+  font-size: 30rpx;
+  color: #111827;
+}
+.picker-placeholder {
+  font-size: 30rpx;
+  color: #9ca3af;
+}
+.picker-arrow {
+  font-size: 36rpx;
+  color: #9ca3af;
+}
 
+/* ── 按钮 ── */
+.primary-btn {
+  width: 100%;
+  height: 96rpx;
+  background: #2563eb;
+  color: #fff;
+  border-radius: 16rpx;
+  font-size: 32rpx;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  margin-top: 8rpx;
+}
+.primary-btn[disabled] {
+  background: #93c5fd;
+}
 
-	/* 上传进度 */
-	.progress-container {
-		height: 8px;
-		background: #eee;
-		border-radius: 4px;
-		margin-top: 20px;
-		overflow: hidden;
-		display: none;
-	}
-
-	.progress-bar {
-		width: 0%;
-		height: 100%;
-		background: var(--primary-color);
-		transition: width 0.3s ease;
-	}
-</style>
\ No newline at end of file
+/* ── 危险区 ── */
+.danger-card {
+  background: #fff;
+  border-radius: 24rpx;
+  padding: 36rpx;
+  margin-bottom: 40rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
+}
+.logout-btn {
+  width: 100%;
+  height: 96rpx;
+  background: #fee2e2;
+  color: #dc2626;
+  border-radius: 16rpx;
+  font-size: 32rpx;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+</style>
diff --git a/frontend/ops_uniapp/pages/signin.vue b/frontend/ops_uniapp/pages/signin.vue
index 3faf453..6503cf9 100644
--- a/frontend/ops_uniapp/pages/signin.vue
+++ b/frontend/ops_uniapp/pages/signin.vue
@@ -1,192 +1,297 @@
-<template>
-
-	<view class="d-flex flex-column">
-		<tabler-header type="mini"></tabler-header>
-
-		<div class="page page-center">
-
-			<div class="container container-normal py-4">
-				<div class="row align-items-center g-4">
-					<div class="col-lg">
-						<div class="container-tight">
-							<div class="text-center mb-4">
-								<div class="navbar-brand navbar-brand-autodark"><img src="/static/logo.svg" height="36"
-										alt=""></div>
-							</div>
-							<div class="card card-md">
-								<div class="card-body">
-									<h2 class="h2 text-center mb-4">登录你的账号</h2>
-
-
-									<div class="mb-3">
-										<label class="form-label mb-0 ms-1">用户名</label>
-
-										<input type="text" class="my_input_field"
-											:placeholder-class="is_username_err?'my_input_placeholder_error':'my_input_placeholder'"
-											:placeholder="ph_username" autocomplete="off" maxlength="25"
-											v-model="post_data.username">
-									</div>
-									<div class="mb-2">
-										<label class="form-label mb-0 ms-1">密码</label>
-
-										<input type="password" class="my_input_field"
-											:placeholder-class="is_password_err?'my_input_placeholder_error':'my_input_placeholder'"
-											password="true" :placeholder="ph_password" autocomplete="off"
-											maxlength="100" v-model="post_data.password">
-
-									</div>
-<!-- 									<div class="mb-2">
-										<checkbox-group @change="chack_box_change">
-											<label class="d-flex">
-												<checkbox value="keep_login_in" />
-												<span class="form-check-label">保持登录</span>
-											</label>
-										</checkbox-group>
-									</div> -->
-									<div class="form-footer">
-										<button class="btn btn-primary w-100" @click="submit_data">登录</button>
-									</div>
-
-								</div>
-
-
-							</div>
-							<div class="text-center text-secondary mt-3">
-								还没账号？
-								<a href="/sign-up/" tabindex="-1">点击注册</a>
-								<span class="form-label-description">
-									<a href="./forgot-password.html">忘记密码？</a>
-								</span>
-							</div>
-
-						</div>
-					</div>
-					<div class="col-lg d-none d-lg-block">
-						<img src="/static/illustrations/undraw_secure_login_pdn4.svg" height="300"
-							class="d-block mx-auto" alt="">
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<tabler-footer ref="footer"></tabler-footer>
-	</view>
-
-
-
-</template>
-
 <script>
-	import {
-		my_network_func
-	} from '../my_network_func'
-	import {
-		myfunc
-	} from '../myfunc'
+/**
+ * 登录页
+ * 对标 PC 前端 src/views/LoginView.vue
+ */
+import { authApi } from '../@api/auth.js'
+import { userStore } from '../store/user.js'
 
+export default {
+  data() {
+    return {
+      form: {
+        username: '',
+        password: '',
+        remember: false,
+      },
+      errors: {
+        username: '',
+        password: '',
+      },
+      showPassword: false,
+      loading: false,
+    }
+  },
 
-	export default {
-		data() {
-			return {
-				ph_username: "",
-				ph_password: "",
-				is_username_err: false,
-				is_password_err: false,
-				post_data: {
-					is_keep_login: true,
-					username: "",
-					password: "",
-				}
-			}
-		},
-		methods: {
-			initdata(){
-				this.ph_username="输入你的用户名"
-				this.ph_password="输入你的密码"
-				this.is_username_err=false
-				this.is_password_err=false
-				this.post_data.is_keep_login=true
-				this.post_data.username=""
-				this.post_data.password=""
-			},
+  methods: {
+    validate() {
+      let ok = true
+      this.errors.username = ''
+      this.errors.password = ''
+      if (!this.form.username.trim()) {
+        this.errors.username = '请输入用户名'
+        ok = false
+      }
+      if (!this.form.password) {
+        this.errors.password = '请输入密码'
+        ok = false
+      }
+      return ok
+    },
 
-			chack_box_change(val) {
-				//console.log(val.detail.value[0])
-				if (val.detail.value[0] === 'keep_login_in') {
-					this.post_data.is_keep_login = true
-				} else {
-					this.post_data.is_keep_login = false
-				}
-			},
-			submit_data() {
-				//提交登录数据，
-				//先验证数据合法性
-
-
-				if (this.post_data.username == "") {
-					this.is_username_err = true
-					this.ph_username = "用户名不能为空"
-
-				} else {
-					this.is_username_err = false
-				}
-
-				if (this.post_data.password == "") {
-					this.is_password_err = true
-					this.ph_password = "密码不能为空"
-
-				} else {
-					this.is_password_err = false
-				}
-
-				if (this.is_username_err === false && this.is_password_err === false) {
-					
-					my_network_func.post_json("/user/login", this.post_data, (c) => {
-						
-						if (c.statusCode == 200) {
-							if (c.data.err_code == 0) {
-								this.$refs.footer.alert('success', "登录成功")
-								myfunc.save_json("cookie", c.data.return.cookie)
-								myfunc.save_json("user_info", c.data.return.user_info)
-								this.initdata()
-								setTimeout(() => {
-									uni.navigateTo({
-										url: '/'
-									});
-								}, 1000);
-
-							} else {
-								this.$refs.footer.alert('warning', "账号或密码不正确")
-							}
-						} else {
-							this.$refs.footer.alert('danger', "网络连接错误：" + c.statusCode)
-						}
-
-
-					})
-				} else {
-
-				}
-
-			}
-		},
-		mounted() {
-			this.initdata()
-		}
-	}
+    async handleLogin() {
+      if (!this.validate()) return
+      this.loading = true
+      try {
+        const { errCode, data } = await authApi.login(
+          this.form.username,
+          this.form.password,
+          this.form.remember,
+        )
+        switch (errCode) {
+          case 0:
+            userStore.login(data.cookie)
+            uni.showToast({ title: '登录成功', icon: 'success' })
+            setTimeout(() => {
+              uni.reLaunch({ url: '/pages/index/index' })
+            }, 800)
+            break
+          case -41:
+          case -42:
+            uni.showToast({ title: '用户名或密码错误', icon: 'none' })
+            break
+          default:
+            uni.showToast({ title: '服务器错误，请稍后重试', icon: 'none' })
+        }
+      } catch {
+        // request.js 已处理网络错误提示
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+}
 </script>
 
-<style>
-	.my123 {
-		/* 设置边框：宽度、样式、颜色 */
-		border: 1px solid #e3e3e3;
-		/* 2像素宽的红色实线边框 */
+<template>
+  <view class="signin-page">
+    <!-- 顶部 Logo -->
+    <view class="header">
+      <image src="/static/logo.svg" class="logo" mode="aspectFit" />
+      <text class="app-name">Operations</text>
+    </view>
 
-		/* 设置圆角，值越大，角越圆 */
-		border-radius: 3px;
-		/* 也可以使用百分比，例如50%会变成圆形 */
+    <!-- 登录卡片 -->
+    <view class="card">
+      <text class="card-title">登录你的账号</text>
 
-		font-size: 24px;
+      <!-- 用户名 -->
+      <view class="field">
+        <text class="label">用户名</text>
+        <input
+          v-model="form.username"
+          class="input"
+          :class="{ 'input-error': errors.username }"
+          placeholder="输入你的用户名"
+          maxlength="25"
+          @confirm="handleLogin"
+        />
+        <text v-if="errors.username" class="err-msg">{{ errors.username }}</text>
+      </view>
 
-	}
-</style>
\ No newline at end of file
+      <!-- 密码 -->
+      <view class="field">
+        <text class="label">密码</text>
+        <view class="input-wrap">
+          <input
+            v-model="form.password"
+            class="input"
+            :class="{ 'input-error': errors.password }"
+            :password="!showPassword"
+            placeholder="输入你的密码"
+            maxlength="100"
+            @confirm="handleLogin"
+          />
+          <view class="eye-btn" @tap="showPassword = !showPassword">
+            <text class="eye-icon">{{ showPassword ? '👁' : '🙈' }}</text>
+          </view>
+        </view>
+        <text v-if="errors.password" class="err-msg">{{ errors.password }}</text>
+      </view>
+
+      <!-- 记住我 -->
+      <view class="remember-row" @tap="form.remember = !form.remember">
+        <view class="checkbox" :class="{ checked: form.remember }">
+          <text v-if="form.remember" class="check-mark">✓</text>
+        </view>
+        <text class="remember-text">在此设备上保持登录</text>
+      </view>
+
+      <!-- 登录按钮 -->
+      <button
+        class="submit-btn"
+        :class="{ 'btn-loading': loading }"
+        :disabled="loading"
+        @tap="handleLogin"
+      >
+        <text v-if="loading" class="loading-icon">⟳</text>
+        <text>{{ loading ? '登录中…' : '登 录' }}</text>
+      </button>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.signin-page {
+  min-height: 100vh;
+  background-color: #f3f4f6;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 80rpx 40rpx 60rpx;
+}
+
+/* ── 顶部 logo ── */
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 60rpx;
+}
+.logo {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 24rpx;
+  margin-bottom: 20rpx;
+}
+.app-name {
+  font-size: 44rpx;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+/* ── 卡片 ── */
+.card {
+  width: 100%;
+  max-width: 680rpx;
+  background: #fff;
+  border-radius: 24rpx;
+  padding: 60rpx 48rpx;
+  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
+}
+.card-title {
+  font-size: 40rpx;
+  font-weight: 700;
+  color: #111827;
+  text-align: center;
+  display: block;
+  margin-bottom: 48rpx;
+}
+
+/* ── 表单字段 ── */
+.field {
+  margin-bottom: 36rpx;
+}
+.label {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #374151;
+  display: block;
+  margin-bottom: 12rpx;
+}
+.input-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.input {
+  width: 100%;
+  height: 88rpx;
+  border: 2rpx solid #d1d5db;
+  border-radius: 16rpx;
+  padding: 0 32rpx;
+  font-size: 30rpx;
+  color: #111827;
+  background: #fff;
+  box-sizing: border-box;
+}
+.input-error {
+  border-color: #ef4444;
+}
+.eye-btn {
+  position: absolute;
+  right: 24rpx;
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  padding: 0 8rpx;
+}
+.eye-icon {
+  font-size: 36rpx;
+}
+.err-msg {
+  font-size: 24rpx;
+  color: #ef4444;
+  margin-top: 8rpx;
+  display: block;
+}
+
+/* ── 记住我 ── */
+.remember-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 48rpx;
+  gap: 16rpx;
+}
+.checkbox {
+  width: 40rpx;
+  height: 40rpx;
+  border: 2rpx solid #d1d5db;
+  border-radius: 8rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+}
+.checkbox.checked {
+  background: #2563eb;
+  border-color: #2563eb;
+}
+.check-mark {
+  color: #fff;
+  font-size: 26rpx;
+  line-height: 1;
+}
+.remember-text {
+  font-size: 28rpx;
+  color: #4b5563;
+}
+
+/* ── 登录按钮 ── */
+.submit-btn {
+  width: 100%;
+  height: 96rpx;
+  background: #2563eb;
+  color: #fff;
+  border-radius: 16rpx;
+  font-size: 32rpx;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx;
+  border: none;
+}
+.submit-btn[disabled] {
+  background: #93c5fd;
+}
+.loading-icon {
+  font-size: 36rpx;
+  animation: spin 1s linear infinite;
+  display: inline-block;
+}
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+</style>
diff --git a/frontend/ops_uniapp/store/user.js b/frontend/ops_uniapp/store/user.js
new file mode 100644
index 0000000..f38bd19
--- /dev/null
+++ b/frontend/ops_uniapp/store/user.js
@@ -0,0 +1,136 @@
+/**
+ * 用户状态管理（轻量 Store，对标 PC 前端 src/stores/user.js）
+ * 
+ * uni-app 不支持 Pinia，这里用模块化单例替代，
+ * 提供与 PC 前端完全一致的接口语义。
+ */
+
+import { authApi } from '../@api/auth.js'
+
+const STORAGE_KEY_COOKIE = 'userCookie'
+const STORAGE_KEY_USER   = 'userData'
+const STORAGE_KEY_INFO   = 'userInfo'
+
+// ── 内部状态 ──────────────────────────────────────────────
+const _state = {
+  user:       null,   // TabUser_ 基本信息
+  userInfo:   null,   // TabUserInfo_ 详情
+  userCookie: null,   // Cookie 对象
+  isLoggedIn: false,
+}
+
+// ── 辅助方法 ──────────────────────────────────────────────
+function _loadJson(key) {
+  try {
+    const raw = uni.getStorageSync(key)
+    return raw ? JSON.parse(raw) : null
+  } catch { return null }
+}
+
+function _saveJson(key, data) {
+  uni.setStorageSync(key, JSON.stringify(data))
+}
+
+function _remove(key) {
+  uni.removeStorageSync(key)
+}
+
+// ── 对外接口（与 PC 端 useUserStore 语义一致） ─────────────
+export const userStore = {
+
+  // ── Getters ──
+
+  get isLoggedIn()  { return _state.isLoggedIn },
+  get user()        { return _state.user },
+  get userInfo()    { return _state.userInfo },
+  get userCookie()  { return _state.userCookie },
+
+  /** 获取 Cookie Value 字符串（供 request.js 自动注入） */
+  getCookieValue() {
+    return _state.userCookie?.Value ?? ''
+  },
+
+  /** 头像 URL */
+  getAvatarUrl() {
+    if (_state.userInfo?.AvatarPath) {
+      return `/api/static/avatar/${_state.userInfo.AvatarPath}`
+    }
+    return '/static/ava.svg'
+  },
+
+  /** 生日（YYYY-MM-DD） */
+  getBirthday() {
+    if (!_state.userInfo?.Birthdate) return ''
+    return String(_state.userInfo.Birthdate).substring(0, 10)
+  },
+
+  /** 用户名（显示名 > 账号名） */
+  getDisplayName() {
+    return _state.userInfo?.Username || _state.user?.Name || ''
+  },
+
+  // ── Actions ──
+
+  /**
+   * 登录成功后调用，保存 cookie 并拉取用户信息
+   * @param {object} cookie - 后端返回的 Cookie 对象
+   */
+  login(cookie) {
+    _state.userCookie = cookie
+    _state.isLoggedIn = true
+    _saveJson(STORAGE_KEY_COOKIE, cookie)
+    // 验证是否过期
+    if (cookie.ExpiresAt && new Date(cookie.ExpiresAt) < new Date()) {
+      this.logout()
+      return
+    }
+    this.fetchUserInfo()
+  },
+
+  /** 登出，清理所有本地状态 */
+  logout() {
+    _state.user       = null
+    _state.userInfo   = null
+    _state.userCookie = null
+    _state.isLoggedIn = false
+    _remove(STORAGE_KEY_COOKIE)
+    _remove(STORAGE_KEY_USER)
+    _remove(STORAGE_KEY_INFO)
+  },
+
+  /** 拉取用户信息并缓存 */
+  async fetchUserInfo() {
+    try {
+      const { errCode, data } = await authApi.getUserInfo()
+      if (errCode === 0) {
+        _state.user     = data?.user     ?? null
+        _state.userInfo = data?.userInfo ?? null
+        if (_state.user)     _saveJson(STORAGE_KEY_USER, _state.user)
+        if (_state.userInfo) _saveJson(STORAGE_KEY_INFO, _state.userInfo)
+      }
+    } catch { /* request.js 已处理提示 */ }
+  },
+
+  /**
+   * 应用启动时恢复登录状态（在 App.vue 的 onLaunch 中调用）
+   */
+  restoreSession() {
+    const cookie = _loadJson(STORAGE_KEY_COOKIE)
+    if (cookie) {
+      // 验证 cookie 是否还在有效期
+      if (cookie.ExpiresAt && new Date(cookie.ExpiresAt) < new Date()) {
+        this.logout()
+        return
+      }
+      _state.userCookie = cookie
+      _state.isLoggedIn = true
+      // 恢复缓存的用户信息（避免冷启动白屏）
+      _state.user     = _loadJson(STORAGE_KEY_USER)
+      _state.userInfo = _loadJson(STORAGE_KEY_INFO)
+      // 后台静默刷新
+      this.fetchUserInfo()
+    } else {
+      this.logout()
+    }
+  },
+}
diff --git a/frontend/ops_uniapp/vite.config.js b/frontend/ops_uniapp/vite.config.js
new file mode 100644
index 0000000..91403e7
--- /dev/null
+++ b/frontend/ops_uniapp/vite.config.js
@@ -0,0 +1,37 @@
+/**
+ * uni-app + Vue3 Vite 配置
+ *
+ * 解决：API 模块目录命名为 @api/，避免与 /api 代理前缀冲突。
+ * 真正的后端 API 请求走 /api（代理到 8080）。
+ */
+import { defineConfig } from 'vite'
+import uni from '@dcloudio/vite-plugin-uni'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [uni()],
+
+  resolve: {
+    alias: [
+      // @api/* → 本地 @api/ 目录（存放 API 模块文件）
+      { find: /^@api\/(.*)/, replacement: path.resolve(__dirname, '@api/$1') },
+    ],
+  },
+
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:8080',
+        changeOrigin: true,
+        secure: false,
+        ws: false,
+        bypass(req) {
+          // .js 等模块文件不走代理（@api/ 模块不带 /api 前缀，不会走到这里）
+          if (req.url && /\.\w+$/.test(req.url)) {
+            return false
+          }
+        },
+      },
+    },
+  },
+})