From 7f4c2ca831e0fd04a1fb252cf1157a7427315406 Mon Sep 17 00:00:00 2001
From: zyh <zhangyahao530@163.com>
Date: Wed, 27 Aug 2025 21:20:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=EF=BC=8C=E6=96=B0=E5=A2=9E=E9=80=80=E5=8D=95?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3API=E6=8E=A5=E5=8F=A3=EF=BC=8C=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E6=9D=83=E9=99=90=E8=AE=BE=E7=BD=AE=EF=BC=8C=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E5=B8=83=E5=B1=80=E4=BB=A5=E6=94=AF=E6=8C=81=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E5=BC=8F=E8=AE=BE=E8=AE=A1=EF=BC=8C=E6=8F=90=E5=8D=87?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/退单功能使用说明.md              |  179 +++++
 index.html                            |    2 +-
 src/App.vue                           |  458 +++++++++++
 src/api/links.js                      |   10 +
 src/layouts/AdminLayout.vue           |  247 +++++-
 src/main.js                           |    7 +
 src/plugins/mobile.js                 |  137 ++++
 src/router/index.js                   |    2 +
 src/utils/mobile.js                   |  328 ++++++++
 src/utils/permission.js               |   11 +
 src/views/Login.vue                   |  180 ++++-
 src/views/links/LinkGenerate.vue      | 1072 +++++++++++++++++++++----
 src/views/refund/RefundManagement.vue |  548 +++++++++++++
 src/views/settings/Settings.vue       |  277 ++++++-
 src/views/users/UserList.vue          |  335 +++++++-
 15 files changed, 3595 insertions(+), 198 deletions(-)
 create mode 100644 docs/退单功能使用说明.md
 create mode 100644 src/plugins/mobile.js
 create mode 100644 src/utils/mobile.js
 create mode 100644 src/views/refund/RefundManagement.vue

diff --git a/docs/退单功能使用说明.md b/docs/退单功能使用说明.md
new file mode 100644
index 0000000..e4b7730
--- /dev/null
+++ b/docs/退单功能使用说明.md
@@ -0,0 +1,179 @@
+# 退单功能使用说明
+
+## 🎯 功能概述
+
+退单管理功能允许管理员和代理用户对链接进行退单操作，提供了完整的退单流程管理和状态追踪。
+
+## 📁 文件结构
+
+```
+src/
+├── views/refund/
+│   └── RefundManagement.vue     # 退单管理页面
+├── api/
+│   └── links.js                 # 退单相关API接口
+├── router/
+│   └── index.js                 # 路由配置
+├── layouts/
+│   └── AdminLayout.vue          # 管理后台布局（包含退单菜单）
+└── utils/
+    └── permission.js            # 权限配置
+```
+
+## 🔑 权限配置
+
+### 新增权限
+- `REFUND_MANAGE` - 退单管理权限
+- `REFUND_EXECUTE` - 退单执行权限
+- `REFUND_VIEW` - 退单查看权限
+
+### 角色权限分配
+- **管理员 (ADMIN)**: 拥有所有退单权限
+- **代理 (AGENT)**: 拥有查看和执行退单权限
+
+## 🚀 功能特性
+
+### 1. 链接查询
+- 支持按链接编号搜索
+- 支持按状态筛选
+- 实时显示链接详细信息
+
+### 2. 退单操作
+- 智能判断是否可以执行退单
+- 支持的退单状态：`NEW`、`USING`、`LOGGED_IN`
+- 不支持的状态：`REFUNDED`、`EXPIRED`、`COMPLETED`
+
+### 3. 安全确认
+- 退单前二次确认对话框
+- 显示链接详细信息确认
+- 防止误操作
+
+### 4. 状态追踪
+- 实时更新链接状态
+- 记录退单时间
+- 显示操作历史
+
+## 🎨 页面功能
+
+### 搜索区域
+- **链接编号输入框**: 输入要查询的链接编号
+- **状态筛选器**: 选择特定状态的链接
+- **查询按钮**: 执行搜索操作
+- **重置按钮**: 清空搜索条件
+
+### 链接信息卡片
+显示找到的链接详细信息：
+- 链接编号
+- 当前状态（带状态标签）
+- 创建时间和更新时间
+- 代理ID和关联设备
+- 总点数和当前点数
+- 退单时间（如果已退单）
+
+### 操作按钮
+- **执行退单**: 当链接状态允许时显示，点击后弹出确认对话框
+- **已退单**: 当链接已经退单时显示的禁用状态
+- **不允许退单**: 当链接状态不允许退单时显示的提示
+
+### 使用说明
+提供了详细的帮助信息：
+- 可退单的状态说明
+- 不可退单的状态说明
+- 退单流程介绍
+- 注意事项提醒
+
+## 🔧 API接口
+
+### 新增接口函数
+
+#### `refundLink(codeNo)`
+执行退单操作
+- **参数**: `codeNo` - 链接编号
+- **返回**: Promise 对象
+- **HTTP方法**: POST
+- **路径**: `/api/link/{codeNo}/refund`
+
+#### `getLinkStatus(codeNo)`
+查询链接状态
+- **参数**: `codeNo` - 链接编号
+- **返回**: Promise 对象，包含链接详细信息
+- **HTTP方法**: GET
+- **路径**: `/api/link/{codeNo}/status`
+
+## 🎯 使用步骤
+
+### 1. 访问退单管理页面
+- 登录管理后台
+- 在左侧菜单中点击 "退单管理"
+
+### 2. 查询链接
+1. 在搜索框中输入链接编号
+2. （可选）选择状态筛选
+3. 点击 "查询" 按钮
+
+### 3. 执行退单
+1. 确认链接信息正确
+2. 点击 "执行退单" 按钮
+3. 在确认对话框中确认操作
+4. 等待退单完成
+
+## ⚠️ 注意事项
+
+1. **权限要求**: 只有管理员和代理用户可以访问退单功能
+2. **状态限制**: 只有特定状态的链接才能执行退单
+3. **不可逆操作**: 退单操作一旦执行无法撤销
+4. **代理限制**: 代理用户只能退单自己创建的链接
+5. **外部接口**: 系统会调用外部脚本接口，即使失败也会更新本地状态
+
+## 🎨 界面特性
+
+### 响应式设计
+- 支持桌面端和移动端访问
+- 自适应不同屏幕尺寸
+- 移动端优化的交互体验
+
+### 状态标签
+- 新建: 蓝色标签
+- 使用中: 橙色标签
+- 已登录: 蓝色标签
+- 已完成: 绿色标签
+- 已退单: 灰色标签
+- 已过期: 红色标签
+
+### 深色主题支持
+- 自动适配系统深色主题
+- 保持良好的视觉对比度
+- 所有组件都支持深色模式
+
+## 🚨 错误处理
+
+### 常见错误及解决方案
+
+1. **链接不存在**
+   - 检查链接编号是否正确
+   - 确认链接是否已被删除
+
+2. **无权限查看**
+   - 确认用户角色权限
+   - 代理用户只能查看自己的链接
+
+3. **退单失败**
+   - 检查链接当前状态
+   - 确认网络连接正常
+   - 联系技术支持
+
+4. **网络错误**
+   - 检查网络连接
+   - 刷新页面重试
+   - 联系技术支持
+
+## 📞 技术支持
+
+如果在使用过程中遇到问题，请联系技术支持团队：
+- 提供具体的错误信息
+- 说明操作步骤
+- 提供链接编号（如适用）
+
+---
+
+*最后更新时间: 2024年1月*
diff --git a/index.html b/index.html
index 89e19b2..4d9dcd5 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <title>Vue3 App</title>
   </head>
   <body>
diff --git a/src/App.vue b/src/App.vue
index 82cde9c..c557e48 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,464 @@
 <script setup>
 </script>
 
+<style>
+/* 全局响应式基础样式 */
+* {
+  box-sizing: border-box;
+}
+
+html {
+  /* 防止iOS设备字体缩放 */
+  -webkit-text-size-adjust: 100%;
+  /* 平滑滚动 */
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  /* 移动端优化 */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /* 防止手机横屏时字体放大 */
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  /* 去除移动端默认的触摸高亮 */
+  -webkit-tap-highlight-color: transparent;
+}
+
+#app {
+  min-height: 100vh;
+}
+
+/* 移动端常用断点 */
+:root {
+  --mobile-xs: 480px;
+  --mobile-sm: 576px;
+  --tablet: 768px;
+  --desktop: 1024px;
+  --desktop-lg: 1200px;
+  --desktop-xl: 1440px;
+  
+  /* 移动端专用变量 */
+  --mobile-header-height: 50px;
+  --mobile-navbar-height: 60px;
+  --mobile-padding: 16px;
+  --mobile-border-radius: 8px;
+  --mobile-touch-target: 44px; /* 符合人体工程学的最小触摸目标 */
+}
+
+/* 响应式工具类 */
+.mobile-only {
+  display: none;
+}
+
+.desktop-only {
+  display: block;
+}
+
+.mobile-hide {
+  display: block;
+}
+
+.mobile-show {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .mobile-only {
+    display: block;
+  }
+  
+  .desktop-only {
+    display: none;
+  }
+  
+  .mobile-hide {
+    display: none;
+  }
+  
+  .mobile-show {
+    display: block;
+  }
+  
+  /* 移动端基础布局优化 */
+  .mobile-container {
+    padding: 0 var(--mobile-padding);
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+  
+  .mobile-full-width {
+    width: 100vw;
+    margin-left: calc(-50vw + 50%);
+  }
+  
+  /* 移动端表单优化 */
+  .mobile-form .el-form-item {
+    margin-bottom: 20px;
+  }
+  
+  .mobile-form .el-form-item__label {
+    padding-bottom: 8px;
+    line-height: 1.4;
+  }
+  
+  .mobile-form .el-input__inner,
+  .mobile-form .el-textarea__inner {
+    min-height: var(--mobile-touch-target);
+    font-size: 16px; /* 防止iOS设备缩放 */
+  }
+  
+  /* 移动端按钮优化 */
+  .mobile-btn {
+    min-height: var(--mobile-touch-target);
+    padding: 12px 20px;
+    font-size: 16px;
+  }
+  
+  /* 移动端表格响应式 */
+  .mobile-table-responsive {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  .mobile-table-responsive table {
+    min-width: 600px;
+  }
+  
+  /* 移动端卡片样式 */
+  .mobile-card {
+    margin: 0 var(--mobile-padding) 16px;
+    border-radius: var(--mobile-border-radius);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+  
+  /* 移动端导航优化 */
+  .mobile-nav-item {
+    min-height: var(--mobile-touch-target);
+    display: flex;
+    align-items: center;
+    padding: 0 var(--mobile-padding);
+  }
+}
+
+/* 超小屏幕优化 */
+@media (max-width: 480px) {
+  :root {
+    --mobile-padding: 12px;
+  }
+  
+  .mobile-xs-hidden {
+    display: none;
+  }
+  
+  .mobile-xs-full {
+    width: 100%;
+    margin: 0;
+  }
+}
+
+/* 横屏模式优化 */
+@media (max-height: 500px) and (orientation: landscape) {
+  .landscape-compact .el-form-item {
+    margin-bottom: 12px;
+  }
+  
+  .landscape-compact .el-card {
+    margin-bottom: 12px;
+  }
+}
+
+/* Element Plus 移动端覆盖样式 */
+@media (max-width: 768px) {
+  /* 对话框移动端优化 */
+  .el-dialog {
+    width: 95% !important;
+    margin: 0 auto !important;
+    margin-top: 5vh !important;
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+  
+  .el-dialog__body {
+    padding: 15px 20px;
+  }
+  
+  /* 抽屉组件移动端优化 */
+  .el-drawer {
+    width: 80% !important;
+  }
+  
+  /* 分页组件移动端优化 */
+  .el-pagination {
+    text-align: center;
+    justify-content: center;
+  }
+  
+  .el-pagination .el-pager li {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+  }
+  
+  /* 表格移动端优化 */
+  .el-table {
+    font-size: 14px;
+  }
+  
+  .el-table th,
+  .el-table td {
+    padding: 8px 5px;
+  }
+  
+  .el-table .cell {
+    padding: 0 5px;
+  }
+  
+  /* 卡片移动端优化 */
+  .el-card {
+    margin: 0 0 16px 0;
+    border-radius: var(--mobile-border-radius);
+  }
+  
+  .el-card__header {
+    padding: 15px 20px;
+  }
+  
+  .el-card__body {
+    padding: 15px 20px;
+  }
+  
+  /* 菜单移动端优化 */
+  .el-menu-item {
+    min-height: var(--mobile-touch-target);
+  }
+  
+  /* 标签页移动端优化 */
+  .el-tabs__item {
+    padding: 0 15px;
+    min-height: var(--mobile-touch-target);
+    line-height: var(--mobile-touch-target);
+  }
+  
+  /* 表单移动端优化 */
+  .el-form--label-top .el-form-item__label {
+    padding-bottom: 8px;
+    line-height: 1.4;
+  }
+  
+  /* 输入框移动端优化 */
+  .el-input__inner {
+    height: var(--mobile-touch-target);
+    line-height: var(--mobile-touch-target);
+    font-size: 16px;
+  }
+  
+  .el-textarea__inner {
+    font-size: 16px;
+  }
+  
+  /* 按钮移动端优化 */
+  .el-button {
+    min-height: var(--mobile-touch-target);
+    padding: 10px 15px;
+    font-size: 14px;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+  }
+  
+  .el-button:active {
+    transform: scale(0.98);
+  }
+  
+  .el-button--large {
+    min-height: 48px;
+    padding: 12px 20px;
+    font-size: 16px;
+    border-radius: 10px;
+  }
+  
+  .el-button--small {
+    min-height: 36px;
+    padding: 8px 12px;
+    font-size: 13px;
+    border-radius: 6px;
+  }
+  
+  /* 选择器移动端优化 */
+  .el-select-dropdown {
+    max-height: 60vh !important;
+  }
+  
+  .el-select-dropdown .el-select-dropdown__item {
+    height: var(--mobile-touch-target);
+    line-height: var(--mobile-touch-target);
+    padding: 0 16px;
+    font-size: 16px;
+  }
+  
+  /* 日期选择器移动端优化 */
+  .el-date-picker {
+    width: 100%;
+  }
+  
+  .el-picker-panel {
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+  
+  .el-date-table td {
+    height: 36px;
+    width: 36px;
+  }
+  
+  .el-date-table .el-date-table__cell {
+    height: 36px;
+    width: 36px;
+    line-height: 36px;
+  }
+  
+  /* 消息提示移动端优化 */
+  .el-message {
+    min-width: 280px;
+    margin: 0 16px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+  
+  .el-notification {
+    width: calc(100vw - 32px);
+    max-width: 330px;
+    margin: 0 16px;
+    border-radius: 8px;
+  }
+  
+  /* 加载效果移动端优化 */
+  .el-loading-mask {
+    backdrop-filter: blur(2px);
+  }
+  
+  .el-loading-spinner {
+    margin-top: -40px;
+  }
+  
+  .el-loading-text {
+    margin-top: 16px;
+    font-size: 14px;
+  }
+  
+  /* 步骤条移动端优化 */
+  .el-steps {
+    padding: 0 8px;
+  }
+  
+  .el-step__title {
+    font-size: 14px;
+    line-height: 1.3;
+  }
+  
+  .el-step__description {
+    font-size: 12px;
+  }
+  
+  /* 折叠面板移动端优化 */
+  .el-collapse-item__header {
+    height: var(--mobile-touch-target);
+    line-height: var(--mobile-touch-target);
+    padding: 0 16px;
+    font-size: 16px;
+  }
+  
+  .el-collapse-item__content {
+    padding: 16px;
+  }
+  
+  /* 滑块移动端优化 */
+  .el-slider__runway {
+    height: 8px;
+    margin: 16px 0;
+  }
+  
+  .el-slider__button {
+    width: 24px;
+    height: 24px;
+    border: 3px solid #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+  
+  /* 评分组件移动端优化 */
+  .el-rate {
+    height: var(--mobile-touch-target);
+    line-height: var(--mobile-touch-target);
+  }
+  
+  .el-rate__item {
+    font-size: 20px;
+    margin-right: 8px;
+  }
+  
+  /* 穿梭框移动端优化 */
+  .el-transfer {
+    font-size: 14px;
+  }
+  
+  .el-transfer-panel {
+    width: 180px;
+  }
+  
+  .el-transfer-panel__item {
+    height: var(--mobile-touch-target);
+    line-height: var(--mobile-touch-target);
+    padding: 0 12px;
+  }
+  
+  /* 时间线移动端优化 */
+  .el-timeline-item__timestamp {
+    font-size: 12px;
+  }
+  
+  .el-timeline-item__content {
+    padding-left: 28px;
+  }
+  
+  /* 返回顶部移动端优化 */
+  .el-backtop {
+    right: 20px;
+    bottom: 80px;
+    width: 48px;
+    height: 48px;
+    border-radius: 24px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  }
+  
+  /* 图片预览移动端优化 */
+  .el-image-viewer__wrapper {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  
+  .el-image-viewer__actions {
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 8px;
+    margin: 0 16px 20px;
+  }
+  
+  .el-image-viewer__actions__inner {
+    padding: 8px;
+  }
+  
+  .el-image-viewer__actions .el-image-viewer__action {
+    width: 48px;
+    height: 48px;
+    font-size: 20px;
+    margin: 0 4px;
+    border-radius: 6px;
+  }
+}
+</style>
+
 <style scoped>
 /* 根组件仅承载路由视图 */
 </style>
diff --git a/src/api/links.js b/src/api/links.js
index cee8111..bbf0d59 100644
--- a/src/api/links.js
+++ b/src/api/links.js
@@ -22,4 +22,14 @@ export function batchDeleteLinks(codeNos) {
   return http.post('/api/link/batch-delete', { codeNos })
 }
 
+// 退单接口
+export function refundLink(codeNo) {
+  return http.post(`/api/link/${codeNo}/refund`)
+}
+
+// 查询链接状态
+export function getLinkStatus(codeNo) {
+  return http.get(`/api/link/${codeNo}/status`)
+}
+
 
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index a800849..0af4d28 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -1,18 +1,26 @@
 <template>
   <div class="admin-layout">
-    <aside class="sider">
+    <!-- 移动端遮罩层 -->
+    <div 
+      v-if="isMobile && !collapsed" 
+      class="mobile-overlay"
+      @click="collapsed = true"
+    ></div>
+
+    <aside :class="['sider', { 'sider-mobile': isMobile, 'sider-collapsed': isMobile && collapsed }]">
       <div class="brand">
         <img class="logo" src="https://vuejs.org/images/logo.png" alt="logo" />
-        <span class="name">管理后台</span>
+        <span v-show="!collapsed || !isMobile" class="name">管理后台</span>
       </div>
       <el-menu
         class="menu"
         router
         :default-active="$route.name"
-        :collapse="collapsed"
+        :collapse="collapsed && !isMobile"
         background-color="#001529"
         text-color="#bfcbd9"
         active-text-color="#fff"
+        @select="onMenuSelect"
       >
 
         <el-menu-item v-if="canAccessUsers" index="Users" :route="{ name: 'Users' }">
@@ -26,6 +34,11 @@
           <i class="el-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24a2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0-4.24zm2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24a2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24a.973.973 0 0 1 0-1.42z"/></svg></i>
           <span>链接管理</span>
         </el-menu-item>
+
+        <el-menu-item v-if="canAccessRefund" index="Refund" :route="{ name: 'Refund' }">
+          <i class="el-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></svg></i>
+          <span>退单管理</span>
+        </el-menu-item>
         <el-menu-item v-if="canAccessAnnouncements" index="Announcements" :route="{ name: 'Announcements' }">
           <i class="el-icon"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></i>
           <span>公告管理</span>
@@ -40,13 +53,17 @@
     </aside>
     <section class="main">
       <header class="header">
-        <el-button text @click="collapsed = !collapsed" class="collapse-btn">
+        <el-button text @click="toggleSidebar" class="collapse-btn">
           <svg width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M3 6h18v2H3V6m0 5h12v2H3v-2m0 5h18v2H3v-2Z"/></svg>
         </el-button>
         <div class="spacer" />
+        <!-- 移动端显示当前页面标题 -->
+        <span v-if="isMobile" class="mobile-page-title">{{ currentPageTitle }}</span>
+        <div v-if="!isMobile" class="spacer" />
         <el-dropdown>
           <span class="el-dropdown-link">
-            {{ currentUser?.username || '用户' }}<i class="el-icon el-icon--right"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M7 10l5 5 5-5z"/></svg></i>
+            <span v-if="!isMobile">{{ currentUser?.username || '用户' }}</span>
+            <i class="el-icon el-icon--right"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M7 10l5 5 5-5z"/></svg></i>
           </span>
           <template #dropdown>
             <el-dropdown-menu>
@@ -65,23 +82,61 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { clearTokens } from '@/utils/auth'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { canAccessRoute, getCurrentUser } from '@/utils/permission'
 
 const collapsed = ref(false)
+const isMobile = ref(false)
 const router = useRouter()
+const route = useRoute()
+
+// 检测移动端
+const checkMobile = () => {
+  isMobile.value = window.innerWidth <= 768
+  // 移动端默认收起侧边栏
+  if (isMobile.value) {
+    collapsed.value = true
+  }
+}
+
+// 页面标题映射
+const pageTitleMap = {
+  'Users': '用户管理',
+  'Links': '链接管理', 
+  'Refund': '退单管理',
+  'Announcements': '公告管理',
+  'Settings': '系统设置'
+}
 
 // 获取当前用户信息
 const currentUser = computed(() => getCurrentUser())
 
+// 获取当前页面标题
+const currentPageTitle = computed(() => {
+  return pageTitleMap[route.name] || '管理后台'
+})
+
 // 权限检查
 const canAccessUsers = computed(() => canAccessRoute('Users'))
 const canAccessLinks = computed(() => canAccessRoute('Links'))
+const canAccessRefund = computed(() => canAccessRoute('Refund'))
 const canAccessAnnouncements = computed(() => canAccessRoute('Announcements'))
 const canAccessSettings = computed(() => canAccessRoute('Settings'))
 
+// 切换侧边栏
+const toggleSidebar = () => {
+  collapsed.value = !collapsed.value
+}
+
+// 菜单选择事件（移动端选择后自动收起）
+const onMenuSelect = () => {
+  if (isMobile.value) {
+    collapsed.value = true
+  }
+}
+
 function onProfile() {
   // 可跳转到个人中心占位页
 }
@@ -90,20 +145,61 @@ function onLogout() {
   clearTokens()
   router.replace({ name: 'Login' })
 }
+
+// 监听窗口大小变化
+onMounted(() => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
+})
 </script>
 
 <style scoped>
 .admin-layout {
   display: flex;
   height: 100vh;
+  position: relative;
 }
+
+/* 移动端遮罩层 */
+.mobile-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  display: block;
+}
+
 .sider {
   width: 220px;
   background: #001529;
   color: #bfcbd9;
   display: flex;
   flex-direction: column;
+  transition: all 0.3s ease;
+  z-index: 1000;
 }
+
+/* 移动端侧边栏样式 */
+.sider-mobile {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  transform: translateX(0);
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+}
+
+.sider-mobile.sider-collapsed {
+  transform: translateX(-100%);
+}
+
 .brand {
   height: 56px;
   display: flex;
@@ -111,10 +207,34 @@ function onLogout() {
   gap: 10px;
   padding: 0 16px;
   color: #fff;
+  border-bottom: 1px solid #334050;
 }
-.logo { width: 24px; height: 24px; }
-.menu { border-right: none; flex: 1; }
-.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+
+.logo { 
+  width: 24px; 
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.name {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.menu { 
+  border-right: none; 
+  flex: 1;
+  overflow-y: auto;
+}
+
+.main { 
+  flex: 1; 
+  display: flex; 
+  flex-direction: column; 
+  min-width: 0;
+  transition: all 0.3s ease;
+}
+
 .header {
   height: 56px;
   display: flex;
@@ -122,9 +242,110 @@ function onLogout() {
   padding: 0 16px;
   background: #fff;
   border-bottom: 1px solid #f0f0f0;
+  position: relative;
+  z-index: 100;
+}
+
+.collapse-btn { 
+  margin-right: 8px;
+  min-width: 32px;
+  height: 32px;
+  border-radius: 4px;
+}
+
+.collapse-btn:hover {
+  background-color: #f5f5f5;
+}
+
+.spacer { 
+  flex: 1; 
+}
+
+.mobile-page-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: #606266;
+  font-size: 14px;
+}
+
+.el-dropdown-link:hover {
+  color: #409eff;
+}
+
+.content { 
+  padding: 16px; 
+  overflow: auto; 
+  background: #f5f7fa; 
+  height: calc(100vh - 56px);
+  flex: 1;
+}
+
+/* 移动端响应式布局 */
+@media (max-width: 768px) {
+  .main {
+    width: 100%;
+  }
+  
+  .header {
+    padding: 0 12px;
+  }
+  
+  .content {
+    padding: 12px;
+  }
+  
+  .collapse-btn {
+    margin-right: 12px;
+  }
+  
+  .mobile-page-title {
+    font-size: 15px;
+  }
+  
+  .el-dropdown-link {
+    font-size: 16px;
+    min-height: var(--mobile-touch-target);
+    padding: 8px;
+  }
+}
+
+@media (max-width: 480px) {
+  .header {
+    padding: 0 8px;
+  }
+  
+  .content {
+    padding: 8px;
+  }
+  
+  .brand {
+    padding: 0 12px;
+  }
+  
+  .name {
+    font-size: 15px;
+  }
+}
+
+/* 桌面端样式 */
+@media (min-width: 769px) {
+  .sider-mobile {
+    position: relative;
+    transform: none !important;
+    box-shadow: none;
+  }
+  
+  .mobile-overlay {
+    display: none;
+  }
 }
-.collapse-btn { margin-right: 8px; }
-.spacer { flex: 1; }
-.content { padding: 16px; overflow: auto; background: #f5f7fa; height: calc(100vh - 56px); }
 </style>
 
diff --git a/src/main.js b/src/main.js
index 58010ac..0191867 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,9 +4,16 @@ import 'element-plus/dist/index.css'
 import router from '@/router'
 import App from './App.vue'
 import { setupPermissionDirective } from './directives/permission'
+import mobilePlugin from './plugins/mobile'
 
 const app = createApp(App)
 app.use(ElementPlus)
 app.use(router)
+app.use(mobilePlugin, {
+  preventZoom: true,
+  handleKeyboard: true,
+  networkMonitor: true,
+  touchFeedback: true
+})
 setupPermissionDirective(app)
 app.mount('#app')
diff --git a/src/plugins/mobile.js b/src/plugins/mobile.js
new file mode 100644
index 0000000..0c11667
--- /dev/null
+++ b/src/plugins/mobile.js
@@ -0,0 +1,137 @@
+/**
+ * Vue移动端优化插件
+ */
+import { preventIOSZoom, handleVirtualKeyboard, onNetworkChange } from '@/utils/mobile'
+
+export default {
+  install(app, options = {}) {
+    // 移动端优化选项
+    const {
+      preventZoom = true,
+      handleKeyboard = true,
+      networkMonitor = true,
+      touchFeedback = true
+    } = options
+
+    let cleanupFunctions = []
+
+    // 防止iOS缩放
+    if (preventZoom) {
+      const cleanup = preventIOSZoom()
+      cleanupFunctions.push(cleanup)
+    }
+
+    // 处理虚拟键盘
+    if (handleKeyboard) {
+      const cleanup = handleVirtualKeyboard()
+      cleanupFunctions.push(cleanup)
+    }
+
+    // 网络状态监控
+    if (networkMonitor) {
+      const cleanup = onNetworkChange((status) => {
+        // 发送全局事件
+        app.config.globalProperties.$bus?.emit('network-change', status)
+        
+        // 或者使用provide/inject
+        if (app._context.provides.networkStatus) {
+          app._context.provides.networkStatus.value = status
+        }
+      })
+      cleanupFunctions.push(cleanup)
+    }
+
+    // 触摸反馈
+    if (touchFeedback) {
+      // 为所有按钮添加触摸反馈
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              const buttons = node.querySelectorAll?.('.el-button, button') || []
+              buttons.forEach((button) => {
+                if (!button.classList.contains('touch-feedback-added')) {
+                  button.classList.add('touch-feedback-added')
+                  button.addEventListener('touchstart', () => {
+                    button.style.transform = 'scale(0.98)'
+                    button.style.transition = 'transform 0.1s ease'
+                  }, { passive: true })
+                  
+                  button.addEventListener('touchend', () => {
+                    setTimeout(() => {
+                      button.style.transform = ''
+                    }, 100)
+                  }, { passive: true })
+                }
+              })
+            }
+          })
+        })
+      })
+
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      })
+
+      cleanupFunctions.push(() => {
+        observer.disconnect()
+      })
+    }
+
+    // 添加全局属性
+    app.config.globalProperties.$mobile = {
+      // 安全滚动到顶部
+      scrollToTop: () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' })
+      },
+      
+      // 安全振动
+      vibrate: (pattern = 50) => {
+        if ('vibrate' in navigator) {
+          navigator.vibrate(pattern)
+        }
+      },
+      
+      // 获取设备信息
+      getDeviceInfo: () => ({
+        userAgent: navigator.userAgent,
+        platform: navigator.platform,
+        language: navigator.language,
+        cookieEnabled: navigator.cookieEnabled,
+        onLine: navigator.onLine,
+        screen: {
+          width: screen.width,
+          height: screen.height,
+          availWidth: screen.availWidth,
+          availHeight: screen.availHeight,
+          colorDepth: screen.colorDepth,
+          pixelDepth: screen.pixelDepth
+        },
+        viewport: {
+          width: window.innerWidth,
+          height: window.innerHeight
+        }
+      })
+    }
+
+    // 提供清理函数
+    app.config.globalProperties.$mobile.cleanup = () => {
+      cleanupFunctions.forEach(cleanup => {
+        if (typeof cleanup === 'function') {
+          cleanup()
+        }
+      })
+      cleanupFunctions = []
+    }
+
+    // 在应用卸载时清理
+    app.mixin({
+      beforeUnmount() {
+        if (this === this.$root && this.$mobile?.cleanup) {
+          this.$mobile.cleanup()
+        }
+      }
+    })
+  }
+}
diff --git a/src/router/index.js b/src/router/index.js
index 90a66bd..025fdb3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,6 +9,7 @@ const UserList = () => import('@/views/users/UserList.vue')
 const Settings = () => import('@/views/settings/Settings.vue')
 const LinkGenerate = () => import('@/views/links/LinkGenerate.vue')
 const AnnouncementList = () => import('@/views/announcements/AnnouncementList.vue')
+const RefundManagement = () => import('@/views/refund/RefundManagement.vue')
 const Play = () => import('@/views/Play.vue')
 const NotFound = () => import('@/views/NotFound.vue')
 
@@ -23,6 +24,7 @@ export const routes = [
       { path: 'users', name: 'Users', component: UserList, meta: { title: '用户管理' } },
       { path: 'settings', name: 'Settings', component: Settings, meta: { title: '系统设置' } },
       { path: 'links', name: 'Links', component: LinkGenerate, meta: { title: '链接管理' } },
+      { path: 'refund', name: 'Refund', component: RefundManagement, meta: { title: '退单管理' } },
       { path: 'announcements', name: 'Announcements', component: AnnouncementList, meta: { title: '公告管理' } },
     ],
   },
diff --git a/src/utils/mobile.js b/src/utils/mobile.js
new file mode 100644
index 0000000..75946bb
--- /dev/null
+++ b/src/utils/mobile.js
@@ -0,0 +1,328 @@
+/**
+ * 移动端交互优化工具
+ */
+
+// 检测移动设备
+export const isMobileDevice = () => {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+}
+
+// 检测触摸设备
+export const isTouchDevice = () => {
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
+}
+
+// 检测设备方向
+export const getOrientation = () => {
+  return window.innerWidth > window.innerHeight ? 'landscape' : 'portrait'
+}
+
+// 监听方向变化
+export const onOrientationChange = (callback) => {
+  let orientation = getOrientation()
+  
+  const handleResize = () => {
+    const newOrientation = getOrientation()
+    if (newOrientation !== orientation) {
+      orientation = newOrientation
+      callback(newOrientation)
+    }
+  }
+
+  window.addEventListener('resize', handleResize)
+  
+  return () => {
+    window.removeEventListener('resize', handleResize)
+  }
+}
+
+// 防止iOS缩放
+export const preventIOSZoom = () => {
+  let lastTouchEnd = 0
+  
+  const preventZoom = (e) => {
+    const now = Date.now()
+    if (now - lastTouchEnd <= 300) {
+      e.preventDefault()
+    }
+    lastTouchEnd = now
+  }
+
+  document.addEventListener('touchend', preventZoom, { passive: false })
+  
+  return () => {
+    document.removeEventListener('touchend', preventZoom)
+  }
+}
+
+// 添加触摸反馈
+export const addTouchFeedback = (element, options = {}) => {
+  const {
+    className = 'touch-feedback',
+    duration = 150,
+    scale = 0.98
+  } = options
+
+  if (!element) return
+
+  const style = document.createElement('style')
+  style.textContent = `
+    .${className} {
+      transform: scale(${scale});
+      transition: transform ${duration}ms ease;
+    }
+  `
+  document.head.appendChild(style)
+
+  const addFeedback = () => {
+    element.classList.add(className)
+    setTimeout(() => {
+      element.classList.remove(className)
+    }, duration)
+  }
+
+  element.addEventListener('touchstart', addFeedback, { passive: true })
+  
+  return () => {
+    element.removeEventListener('touchstart', addFeedback)
+    if (style.parentNode) {
+      style.parentNode.removeChild(style)
+    }
+  }
+}
+
+// 滚动到顶部
+export const scrollToTop = (smooth = true) => {
+  window.scrollTo({
+    top: 0,
+    behavior: smooth ? 'smooth' : 'auto'
+  })
+}
+
+// 滚动到元素
+export const scrollToElement = (element, options = {}) => {
+  const {
+    behavior = 'smooth',
+    block = 'start',
+    inline = 'nearest',
+    offset = 0
+  } = options
+
+  if (!element) return
+
+  const elementTop = element.offsetTop + offset
+  
+  window.scrollTo({
+    top: elementTop,
+    behavior
+  })
+}
+
+// 获取安全区域
+export const getSafeArea = () => {
+  const style = getComputedStyle(document.documentElement)
+  
+  return {
+    top: parseInt(style.getPropertyValue('env(safe-area-inset-top)')) || 0,
+    right: parseInt(style.getPropertyValue('env(safe-area-inset-right)')) || 0,
+    bottom: parseInt(style.getPropertyValue('env(safe-area-inset-bottom)')) || 0,
+    left: parseInt(style.getPropertyValue('env(safe-area-inset-left)')) || 0
+  }
+}
+
+// 处理键盘弹起
+export const handleVirtualKeyboard = () => {
+  let initialViewportHeight = window.innerHeight
+  
+  const handleResize = () => {
+    const currentHeight = window.innerHeight
+    const heightDifference = initialViewportHeight - currentHeight
+    
+    // 键盘弹起时的处理（高度差超过150px认为是键盘弹起）
+    if (heightDifference > 150) {
+      document.body.classList.add('keyboard-open')
+      document.body.style.height = `${currentHeight}px`
+    } else {
+      document.body.classList.remove('keyboard-open')
+      document.body.style.height = ''
+    }
+  }
+
+  window.addEventListener('resize', handleResize)
+  
+  return () => {
+    window.removeEventListener('resize', handleResize)
+    document.body.classList.remove('keyboard-open')
+    document.body.style.height = ''
+  }
+}
+
+// 防抖函数
+export const debounce = (func, wait) => {
+  let timeout
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout)
+      func(...args)
+    }
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+  }
+}
+
+// 节流函数
+export const throttle = (func, limit) => {
+  let inThrottle
+  return function(...args) {
+    if (!inThrottle) {
+      func.apply(this, args)
+      inThrottle = true
+      setTimeout(() => inThrottle = false, limit)
+    }
+  }
+}
+
+// 复制到剪贴板
+export const copyToClipboard = async (text) => {
+  try {
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text)
+      return true
+    } else {
+      // 降级方案
+      const textArea = document.createElement('textarea')
+      textArea.value = text
+      textArea.style.position = 'fixed'
+      textArea.style.left = '-999999px'
+      textArea.style.top = '-999999px'
+      document.body.appendChild(textArea)
+      textArea.focus()
+      textArea.select()
+      
+      try {
+        document.execCommand('copy')
+        return true
+      } catch (err) {
+        console.error('复制失败:', err)
+        return false
+      } finally {
+        textArea.remove()
+      }
+    }
+  } catch (err) {
+    console.error('复制失败:', err)
+    return false
+  }
+}
+
+// 震动反馈
+export const vibrate = (pattern = 50) => {
+  if ('vibrate' in navigator) {
+    navigator.vibrate(pattern)
+  }
+}
+
+// 全屏显示
+export const requestFullscreen = (element = document.documentElement) => {
+  if (element.requestFullscreen) {
+    return element.requestFullscreen()
+  } else if (element.webkitRequestFullscreen) {
+    return element.webkitRequestFullscreen()
+  } else if (element.msRequestFullscreen) {
+    return element.msRequestFullscreen()
+  }
+}
+
+// 退出全屏
+export const exitFullscreen = () => {
+  if (document.exitFullscreen) {
+    return document.exitFullscreen()
+  } else if (document.webkitExitFullscreen) {
+    return document.webkitExitFullscreen()
+  } else if (document.msExitFullscreen) {
+    return document.msExitFullscreen()
+  }
+}
+
+// 检测网络状态
+export const getNetworkStatus = () => {
+  if ('connection' in navigator) {
+    const connection = navigator.connection
+    return {
+      online: navigator.onLine,
+      effectiveType: connection.effectiveType,
+      downlink: connection.downlink,
+      rtt: connection.rtt,
+      saveData: connection.saveData
+    }
+  }
+  
+  return {
+    online: navigator.onLine
+  }
+}
+
+// 监听网络变化
+export const onNetworkChange = (callback) => {
+  const handleOnline = () => callback({ online: true })
+  const handleOffline = () => callback({ online: false })
+  
+  window.addEventListener('online', handleOnline)
+  window.addEventListener('offline', handleOffline)
+  
+  return () => {
+    window.removeEventListener('online', handleOnline)
+    window.removeEventListener('offline', handleOffline)
+  }
+}
+
+// PWA安装提示
+export const handlePWAInstall = () => {
+  let deferredPrompt
+  
+  const beforeInstallPrompt = (e) => {
+    e.preventDefault()
+    deferredPrompt = e
+  }
+  
+  const showInstallPrompt = async () => {
+    if (deferredPrompt) {
+      deferredPrompt.prompt()
+      const { outcome } = await deferredPrompt.userChoice
+      deferredPrompt = null
+      return outcome === 'accepted'
+    }
+    return false
+  }
+  
+  window.addEventListener('beforeinstallprompt', beforeInstallPrompt)
+  
+  return {
+    showInstallPrompt,
+    cleanup: () => {
+      window.removeEventListener('beforeinstallprompt', beforeInstallPrompt)
+    }
+  }
+}
+
+export default {
+  isMobileDevice,
+  isTouchDevice,
+  getOrientation,
+  onOrientationChange,
+  preventIOSZoom,
+  addTouchFeedback,
+  scrollToTop,
+  scrollToElement,
+  getSafeArea,
+  handleVirtualKeyboard,
+  debounce,
+  throttle,
+  copyToClipboard,
+  vibrate,
+  requestFullscreen,
+  exitFullscreen,
+  getNetworkStatus,
+  onNetworkChange,
+  handlePWAInstall
+}
diff --git a/src/utils/permission.js b/src/utils/permission.js
index 96ed17b..552f9f1 100644
--- a/src/utils/permission.js
+++ b/src/utils/permission.js
@@ -43,6 +43,11 @@ export const PERMISSIONS = {
   ANNOUNCEMENT_UPDATE: 'announcement:update',
   ANNOUNCEMENT_DELETE: 'announcement:delete',
   ANNOUNCEMENT_VIEW: 'announcement:view',
+  
+  // 退单管理权限
+  REFUND_MANAGE: 'refund:manage',
+  REFUND_EXECUTE: 'refund:execute',
+  REFUND_VIEW: 'refund:view',
 }
 
 // 角色权限映射
@@ -67,12 +72,17 @@ export const ROLE_PERMISSIONS = {
     PERMISSIONS.ANNOUNCEMENT_UPDATE,
     PERMISSIONS.ANNOUNCEMENT_DELETE,
     PERMISSIONS.ANNOUNCEMENT_VIEW,
+    PERMISSIONS.REFUND_MANAGE,
+    PERMISSIONS.REFUND_EXECUTE,
+    PERMISSIONS.REFUND_VIEW,
   ],
   AGENT: [
     // 代理商只有查看权限，没有管理权限
     PERMISSIONS.LINK_VIEW,
     PERMISSIONS.QR_VIEW,
     PERMISSIONS.ANNOUNCEMENT_VIEW,
+    PERMISSIONS.REFUND_VIEW,
+    PERMISSIONS.REFUND_EXECUTE, // 代理可以执行退单操作
   ]
 }
 
@@ -81,6 +91,7 @@ export const ROUTE_PERMISSIONS = {
   'Users': [PERMISSIONS.USER_VIEW],
   'Settings': [PERMISSIONS.SETTING_MANAGE],
   'Links': [PERMISSIONS.LINK_VIEW],
+  'Refund': [PERMISSIONS.REFUND_VIEW],
   'Announcements': [PERMISSIONS.ANNOUNCEMENT_VIEW],
 }
 
diff --git a/src/views/Login.vue b/src/views/Login.vue
index f9522b2..f64d649 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -8,7 +8,15 @@
         </div>
       </template>
 
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" @keyup.enter.native="onSubmit">
+      <el-form 
+        ref="formRef" 
+        :model="form" 
+        :rules="rules" 
+        :label-position="isMobile ? 'top' : 'left'"
+        :label-width="isMobile ? 'auto' : '80px'" 
+        class="login-form"
+        @keyup.enter.native="onSubmit"
+      >
         <el-form-item label="用户名" prop="username">
           <el-input v-model.trim="form.username" placeholder="请输入用户名" clearable />
         </el-form-item>
@@ -33,7 +41,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { login } from '../api/auth'
 import { setTokens } from '../utils/auth'
@@ -43,6 +51,12 @@ import { showErrorMessage, showSuccessMessage } from '@/utils/error'
 const formRef = ref()
 const loading = ref(false)
 const remember = ref(false)
+const isMobile = ref(false)
+
+// 检测移动端
+const checkMobile = () => {
+  isMobile.value = window.innerWidth <= 768
+}
 
 const form = ref({
   username: 'admin',
@@ -66,6 +80,14 @@ onMounted(() => {
   if (remember.value && savedUser) {
     form.value.username = savedUser
   }
+  
+  // 检测移动端
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
 })
 
 function onForget() {
@@ -123,22 +145,168 @@ async function onSubmit() {
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #f2f6fc 0%, #ffffff 100%);
+  padding: 20px;
+  box-sizing: border-box;
 }
+
 .login-card {
-  width: 420px;
+  width: 100%;
+  max-width: 420px;
+  margin: 0 auto;
 }
+
 .card-header {
   display: flex;
   align-items: center;
   gap: 12px;
+  justify-content: center;
 }
-.logo { width: 32px; height: 32px; }
-.title { font-size: 18px; font-weight: 600; }
+
+.logo { 
+  width: 32px; 
+  height: 32px;
+  flex-shrink: 0;
+}
+
+.title { 
+  font-size: 18px; 
+  font-weight: 600;
+}
+
+.login-form {
+  width: 100%;
+}
+
 .actions {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: -4px 0 8px;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.submit { 
+  width: 100%;
+  min-height: 44px;
+  font-size: 16px;
+}
+
+/* 移动端优化 */
+@media (max-width: 768px) {
+  .login-page {
+    padding: 16px;
+    align-items: flex-start;
+    padding-top: 10vh;
+  }
+  
+  .login-card {
+    max-width: 100%;
+    box-shadow: none;
+    border: none;
+    background: transparent;
+  }
+  
+  .login-card :deep(.el-card__header) {
+    padding: 20px 0;
+    border-bottom: none;
+    background: transparent;
+  }
+  
+  .login-card :deep(.el-card__body) {
+    padding: 0;
+    background: white;
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+  
+  .card-header {
+    margin-bottom: 8px;
+  }
+  
+  .title {
+    font-size: 20px;
+    color: #303133;
+  }
+  
+  .login-form :deep(.el-form-item) {
+    margin-bottom: 20px;
+  }
+  
+  .login-form :deep(.el-form-item__label) {
+    padding-bottom: 8px;
+    font-weight: 500;
+    color: #606266;
+    line-height: 1.4;
+  }
+  
+  .login-form :deep(.el-input__wrapper) {
+    min-height: 44px;
+    border-radius: 8px;
+  }
+  
+  .login-form :deep(.el-input__inner) {
+    font-size: 16px;
+    height: 44px;
+    line-height: 44px;
+  }
+  
+  .actions {
+    justify-content: center;
+    text-align: center;
+    margin: 8px 0 20px;
+  }
+  
+  .actions .el-link {
+    font-size: 14px;
+  }
+  
+  .submit {
+    min-height: 48px;
+    font-size: 16px;
+    font-weight: 600;
+    border-radius: 8px;
+  }
+}
+
+@media (max-width: 480px) {
+  .login-page {
+    padding: 12px;
+    padding-top: 8vh;
+  }
+  
+  .login-card :deep(.el-card__body) {
+    padding: 20px;
+  }
+  
+  .card-header {
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  .logo {
+    width: 40px;
+    height: 40px;
+  }
+  
+  .title {
+    font-size: 18px;
+  }
+}
+
+/* 横屏模式优化 */
+@media (max-height: 500px) and (orientation: landscape) {
+  .login-page {
+    padding-top: 5vh;
+  }
+  
+  .login-card :deep(.el-card__body) {
+    padding: 16px;
+  }
+  
+  .login-form :deep(.el-form-item) {
+    margin-bottom: 16px;
+  }
 }
-.submit { width: 100%; }
 </style>
diff --git a/src/views/links/LinkGenerate.vue b/src/views/links/LinkGenerate.vue
index 7e2159f..028158f 100644
--- a/src/views/links/LinkGenerate.vue
+++ b/src/views/links/LinkGenerate.vue
@@ -1,9 +1,10 @@
 <template>
-  <div class="link-generate">
+  <div class="link-generate" :class="{ 'mobile-layout': isMobile }">
+    <!-- 生成表单 -->
     <el-card class="generate-form-card">
       <template #header>
         <div class="card-header">
-          <span>批量生成链接</span>
+          <h3 class="card-title">批量生成链接</h3>
         </div>
       </template>
       
@@ -11,10 +12,74 @@
         ref="generateFormRef"
         :model="generateForm"
         :rules="generateRules"
-        label-width="120px"
+        :label-width="isMobile ? '100px' : '120px'"
         class="generate-form"
       >
-        <el-row :gutter="20">
+        <div v-if="isMobile" class="mobile-form-grid">
+          <div class="form-item-wrapper">
+            <el-form-item label="生成次数" prop="times">
+              <div class="input-with-controls">
+                <el-button 
+                  @click="decrementTimes" 
+                  :disabled="generateForm.times <= 1"
+                  class="control-btn minus-btn"
+                  circle
+                >
+                  <el-icon><Minus /></el-icon>
+                </el-button>
+                <el-input-number
+                  v-model="generateForm.times"
+                  :min="1"
+                  :max="100"
+                  :controls="false"
+                  class="mobile-number-input"
+                />
+                <el-button 
+                  @click="incrementTimes" 
+                  :disabled="generateForm.times >= 100"
+                  class="control-btn plus-btn"
+                  circle
+                >
+                  <el-icon><Plus /></el-icon>
+                </el-button>
+              </div>
+              <div class="form-tip">每次生成将创建指定数量的链接</div>
+            </el-form-item>
+          </div>
+          
+          <div class="form-item-wrapper">
+            <el-form-item label="每次链接数量" prop="linkCount">
+              <div class="input-with-controls">
+                <el-button 
+                  @click="decrementLinkCount" 
+                  :disabled="generateForm.linkCount <= 1"
+                  class="control-btn minus-btn"
+                  circle
+                >
+                  <el-icon><Minus /></el-icon>
+                </el-button>
+                <el-input-number
+                  v-model="generateForm.linkCount"
+                  :min="1"
+                  :max="50"
+                  :controls="false"
+                  class="mobile-number-input"
+                />
+                <el-button 
+                  @click="incrementLinkCount" 
+                  :disabled="generateForm.linkCount >= 50"
+                  class="control-btn plus-btn"
+                  circle
+                >
+                  <el-icon><Plus /></el-icon>
+                </el-button>
+              </div>
+              <div class="form-tip">单次最多生成50个链接</div>
+            </el-form-item>
+          </div>
+        </div>
+        
+        <el-row v-else :gutter="20">
           <el-col :span="12">
             <el-form-item label="生成次数" prop="times">
               <el-input-number
@@ -41,29 +106,43 @@
           </el-col>
         </el-row>
         
-        <el-form-item>
+        <el-form-item class="form-actions">
           <el-button
             type="primary"
+            size="large"
             :loading="generating"
             @click="handleGenerate"
+            class="primary-action-btn"
           >
+            <el-icon v-if="!generating"><Connection /></el-icon>
             {{ generating ? '生成中...' : '开始生成' }}
           </el-button>
-          <el-button @click="resetForm">重置</el-button>
+          <el-button 
+            size="large" 
+            @click="resetForm"
+            class="secondary-action-btn"
+          >
+            <el-icon><Refresh /></el-icon>
+            重置
+          </el-button>
         </el-form-item>
       </el-form>
     </el-card>
 
-    <el-card class="link-list-card" style="margin-top: 20px;">
+    <!-- 链接列表 -->
+    <el-card class="link-list-card">
       <template #header>
         <div class="card-header">
-          <span>已生成的链接</span>
-          <div class="header-actions">
+          <h3 class="card-title">已生成的链接</h3>
+          
+          <!-- 桌面端操作按钮 -->
+          <div v-if="!isMobile" class="header-actions">
             <el-button
               type="primary"
               size="small"
               @click="refreshList"
               :loading="loading"
+              :icon="Refresh"
             >
               刷新列表
             </el-button>
@@ -72,60 +151,68 @@
               size="small"
               @click="exportToCSV"
               :disabled="!linkList.length"
+              :icon="Download"
             >
               导出CSV
             </el-button>
-            
-            <!-- 批量操作按钮 -->
-            <div v-if="showBatchActions" class="batch-actions">
-              <el-button
-                type="info"
-                size="small"
-                @click="selectAll"
-              >
-                全选
-              </el-button>
-              <el-button
-                type="info"
-                size="small"
-                @click="clearSelection"
-              >
-                取消选择
-              </el-button>
-              <el-button
-                type="primary"
-                size="small"
-                @click="batchCopyLinks"
-                :disabled="selectedRows.length === 0"
-              >
-                批量复制链接 ({{ selectedRows.length }})
-              </el-button>
-              <el-button
-                type="success"
-                size="small"
-                @click="exportSelectedToExcel"
-                :disabled="selectedRows.length === 0"
-              >
-                导出选中Excel
-              </el-button>
-              <el-button
-                type="danger"
-                size="small"
-                @click="handleBatchDelete"
-                :disabled="selectedRows.length === 0"
-              >
-                批量删除 ({{ selectedRows.length }})
-              </el-button>
-            </div>
           </div>
         </div>
+        
+        <!-- 移动端操作按钮 -->
+        <div v-if="isMobile" class="mobile-header-actions">
+          <el-button
+            type="primary"
+            @click="refreshList"
+            :loading="loading"
+            class="mobile-action-btn"
+          >
+            <el-icon><Refresh /></el-icon>
+            刷新列表
+          </el-button>
+          <el-button
+            type="success"
+            @click="exportToCSV"
+            :disabled="!linkList.length"
+            class="mobile-action-btn"
+          >
+            <el-icon><Download /></el-icon>
+            导出CSV
+          </el-button>
+        </div>
       </template>
 
+      <!-- 批量操作提示 -->
+      <div v-if="showBatchActions && !isMobile" class="batch-actions-desktop">
+        <el-alert
+          :title="`已选择 ${selectedRows.length} 项`"
+          type="info"
+          show-icon
+          :closable="false"
+        >
+          <template #default>
+            <div class="batch-action-buttons">
+              <el-button size="small" @click="selectAll">全选</el-button>
+              <el-button size="small" @click="clearSelection">取消选择</el-button>
+              <el-button type="primary" size="small" @click="batchCopyLinks">
+                批量复制链接
+              </el-button>
+              <el-button type="success" size="small" @click="exportSelectedToExcel">
+                导出Excel
+              </el-button>
+              <el-button type="danger" size="small" @click="handleBatchDelete">
+                批量删除
+              </el-button>
+            </div>
+          </template>
+        </el-alert>
+      </div>
+
+      <!-- 桌面端表格 -->
       <el-table
+        v-if="!isMobile"
         ref="tableRef"
         v-loading="loading"
         :data="linkList"
-        style="width: 100%"
         border
         @selection-change="handleSelectionChange"
       >
@@ -134,58 +221,35 @@
         <el-table-column prop="batchId" label="批次ID" width="100" />
         <el-table-column prop="quantity" label="数量" width="80">
           <template #default="{ row }">
-            <el-tag type="info" size="small">
-              {{ row.quantity }}
-            </el-tag>
+            <el-tag type="info" size="small">{{ row.quantity }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="times" label="次数" width="80">
           <template #default="{ row }">
-            <el-tag type="success" size="small">
-              {{ row.times }}
-            </el-tag>
+            <el-tag type="success" size="small">{{ row.times }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="totalPoints" label="总积分" width="100">
           <template #default="{ row }">
-            <el-tag type="warning" size="small">
-              {{ row.totalPoints }}
-            </el-tag>
+            <el-tag type="warning" size="small">{{ row.totalPoints }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="expireAt" label="过期时间" width="180">
-          <template #default="{ row }">
-            {{ formatDateTime(row.expireAt) }}
-          </template>
+          <template #default="{ row }">{{ formatDateTime(row.expireAt) }}</template>
         </el-table-column>
         <el-table-column label="链接地址" min-width="200">
           <template #default="{ row }">
-            <el-link
-              :href="generateLinkUrl(row.codeNo)"
-              target="_blank"
-              type="primary"
-              :underline="false"
-            >
+            <el-link :href="generateLinkUrl(row.codeNo)" target="_blank" type="primary">
               {{ generateLinkUrl(row.codeNo) }}
             </el-link>
-            <el-button
-              type="text"
-              size="small"
-              @click="copyToClipboard(generateLinkUrl(row.codeNo))"
-              style="margin-left: 5px;"
-            >
+            <el-button type="text" size="small" @click="copyToClipboard(generateLinkUrl(row.codeNo))">
               复制
             </el-button>
           </template>
         </el-table-column>
         <el-table-column label="状态" width="100">
           <template #default="{ row }">
-            <el-tag
-              :type="getStatusType(row)"
-              size="small"
-            >
-              {{ row.statusDesc }}
-            </el-tag>
+            <el-tag :type="getStatusType(row)" size="small">{{ row.statusDesc }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column label="剩余时间" width="120">
@@ -196,77 +260,171 @@
           </template>
         </el-table-column>
         <el-table-column label="创建时间" width="180">
-          <template #default="{ row }">
-            {{ formatDateTime(row.createdAt) }}
-          </template>
+          <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
         </el-table-column>
         <el-table-column label="操作" width="150" fixed="right">
           <template #default="{ row }">
-            <el-button
-              type="primary"
-              size="small"
-              @click="viewQRCode(row)"
-            >
-              查看二维码
-            </el-button>
-            <el-button
-              type="danger"
-              size="small"
-              @click="deleteLinkItem(row.codeNo)"
-            >
-              删除
-            </el-button>
+            <el-button type="danger" size="small" @click="deleteLinkItem(row.codeNo)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
 
+      <!-- 移动端卡片列表 -->
+      <div v-else class="mobile-link-list">
+        <!-- 批量操作提示 -->
+        <div v-if="showBatchActions" class="mobile-batch-actions">
+          <el-alert
+            :title="`已选择 ${selectedRows.length} 项`"
+            type="info"
+            center
+            show-icon
+          >
+            <template #default>
+              <div class="mobile-batch-buttons">
+                <el-button @click="selectAll" class="batch-btn">全选</el-button>
+                <el-button @click="clearSelection" class="batch-btn">取消</el-button>
+                <el-button type="primary" @click="batchCopyLinks" class="batch-btn">复制</el-button>
+                <el-button type="danger" @click="handleBatchDelete" class="batch-btn">删除</el-button>
+              </div>
+            </template>
+          </el-alert>
+        </div>
+
+        <!-- 加载状态 -->
+        <div v-if="loading" class="mobile-loading">
+          <el-skeleton :rows="3" animated />
+        </div>
+
+        <!-- 空状态 -->
+        <el-empty v-else-if="linkList.length === 0" description="暂无链接数据" />
+
+        <!-- 链接卡片 -->
+        <div v-else class="link-cards">
+          <div
+            v-for="(item, index) in linkList"
+            :key="item.codeNo"
+            class="link-card"
+            :class="{ 'selected': isSelected(item), 'expired': item.isExpired }"
+            @click="toggleSelection(item)"
+          >
+            <!-- 选择状态指示 -->
+            <div class="card-selection">
+              <el-checkbox 
+                :model-value="isSelected(item)" 
+                @change="toggleSelection(item)"
+                @click.stop
+              />
+            </div>
+
+            <!-- 卡片头部 -->
+            <div class="card-header-mobile">
+              <div class="code-info">
+                <h4 class="code-no">{{ item.codeNo }}</h4>
+                <el-tag :type="getStatusType(item)" size="small">
+                  {{ item.statusDesc }}
+                </el-tag>
+              </div>
+              <div class="batch-info">
+                <span class="batch-id">批次: {{ item.batchId }}</span>
+              </div>
+            </div>
+
+            <!-- 卡片内容 -->
+            <div class="card-content">
+              <div class="info-grid">
+                <div class="info-item">
+                  <span class="label">数量</span>
+                  <el-tag type="info" size="small">{{ item.quantity }}</el-tag>
+                </div>
+                <div class="info-item">
+                  <span class="label">次数</span>
+                  <el-tag type="success" size="small">{{ item.times }}</el-tag>
+                </div>
+                <div class="info-item">
+                  <span class="label">积分</span>
+                  <el-tag type="warning" size="small">{{ item.totalPoints }}</el-tag>
+                </div>
+                <div class="info-item">
+                  <span class="label">剩余时间</span>
+                  <span v-if="item.isExpired" class="expired-text">已过期</span>
+                  <span v-else-if="item.remainingSeconds > 0">{{ formatRemainingTime(item.remainingSeconds) }}</span>
+                  <span v-else>-</span>
+                </div>
+              </div>
+              
+              <div class="time-info">
+                <div class="time-item">
+                  <span class="label">过期时间:</span>
+                  <span>{{ formatDateTime(item.expireAt) }}</span>
+                </div>
+                <div class="time-item">
+                  <span class="label">创建时间:</span>
+                  <span>{{ formatDateTime(item.createdAt) }}</span>
+                </div>
+              </div>
+
+              <!-- 链接地址 -->
+              <div class="link-info">
+                <div class="link-url">
+                  <el-text truncated class="link-text">
+                    {{ generateLinkUrl(item.codeNo) }}
+                  </el-text>
+                </div>
+              </div>
+            </div>
+
+            <!-- 卡片操作 -->
+            <div class="card-actions">
+              <el-button 
+                type="primary" 
+                size="small" 
+                @click.stop="copyToClipboard(generateLinkUrl(item.codeNo))"
+                class="action-btn"
+              >
+                <el-icon><DocumentCopy /></el-icon>
+                复制链接
+              </el-button>
+
+              <el-button 
+                type="danger" 
+                size="small" 
+                @click.stop="deleteLinkItem(item.codeNo)"
+                class="action-btn"
+              >
+                <el-icon><Delete /></el-icon>
+                删除
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 分页器 -->
       <div class="pagination-wrapper">
         <el-pagination
           v-model:current-page="pagination.page"
           v-model:page-size="pagination.pageSize"
-          :page-sizes="[10, 20, 50, 100]"
+          :page-sizes="isMobile ? [10, 20] : [10, 20, 50, 100]"
           :total="pagination.total"
-          layout="total, sizes, prev, pager, next, jumper"
+          :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
+          :small="isMobile"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
         />
       </div>
     </el-card>
 
-    <!-- 二维码查看对话框 -->
-    <el-dialog
-      v-model="qrCodeDialogVisible"
-      title="二维码"
-      width="400px"
-      center
-    >
-      <div class="qr-code-content">
-        <div v-if="currentQRCode" class="qr-code-image">
-          <img :src="currentQRCode" alt="二维码" style="max-width: 100%;" />
-        </div>
-        <div v-else class="qr-code-placeholder">
-          <el-empty description="暂无二维码" />
-        </div>
-      </div>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="qrCodeDialogVisible = false">关闭</el-button>
-          <el-button
-            v-if="currentQRCode"
-            type="primary"
-            @click="downloadQRCode"
-          >
-            下载二维码
-          </el-button>
-        </span>
-      </template>
-    </el-dialog>
+
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, computed } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { 
+  Plus, Minus, Connection, Refresh, Download, 
+  DocumentCopy, Delete 
+} from '@element-plus/icons-vue'
 import { generateLinks, fetchLinks, deleteLink, batchDeleteLinks } from '@/api/links'
 import { formatLinkStatus, getLinkStatusType, generateQRCodeUrl, downloadImage, copyToClipboard as copyText, exportToCSV as exportCSV, exportToExcel } from '@/utils/links'
 import { LINK_CONFIG, STATUS_CONFIG, EXPORT_CONFIG } from '@/config/links'
@@ -276,8 +434,13 @@ const generateFormRef = ref()
 const generating = ref(false)
 const loading = ref(false)
 const linkList = ref([])
-const qrCodeDialogVisible = ref(false)
-const currentQRCode = ref('')
+
+const isMobile = ref(false)
+
+// 检测移动端
+const checkMobile = () => {
+  isMobile.value = window.innerWidth <= 768
+}
 
 // 多选相关状态
 const selectedRows = ref([])
@@ -410,23 +573,7 @@ const deleteLinkItem = async (id) => {
   }
 }
 
-// 查看二维码
-const viewQRCode = (row) => {
-  if (row.codeNo) {
-    const linkUrl = generateLinkUrl(row.codeNo)
-    currentQRCode.value = generateQRCodeUrl(linkUrl, 200)
-    qrCodeDialogVisible.value = true
-  } else {
-    ElMessage.warning('没有可用的兑换码')
-  }
-}
 
-// 下载二维码
-const downloadQRCode = () => {
-  if (currentQRCode.value) {
-    downloadImage(currentQRCode.value, 'qrcode.png')
-  }
-}
 
 // 复制到剪贴板
 const copyToClipboard = async (text) => {
@@ -618,23 +765,79 @@ const selectAll = () => {
 const clearSelection = () => {
   if (tableRef.value) {
     tableRef.value.clearSelection()
+  } else {
+    // 移动端清空选择
+    selectedRows.value = []
+  }
+}
+
+// 移动端增减按钮方法
+const decrementTimes = () => {
+  if (generateForm.times > 1) {
+    generateForm.times--
+  }
+}
+
+const incrementTimes = () => {
+  if (generateForm.times < 100) {
+    generateForm.times++
+  }
+}
+
+const decrementLinkCount = () => {
+  if (generateForm.linkCount > 1) {
+    generateForm.linkCount--
+  }
+}
+
+const incrementLinkCount = () => {
+  if (generateForm.linkCount < 50) {
+    generateForm.linkCount++
+  }
+}
+
+// 移动端选择切换
+const isSelected = (item) => {
+  return selectedRows.value.some(row => row.codeNo === item.codeNo)
+}
+
+const toggleSelection = (item) => {
+  const index = selectedRows.value.findIndex(row => row.codeNo === item.codeNo)
+  if (index > -1) {
+    selectedRows.value.splice(index, 1)
+  } else {
+    selectedRows.value.push(item)
   }
 }
 
 // 页面加载时获取数据
 onMounted(() => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
   getLinkList()
+  
+  // 初始化表单默认值
+  generateForm.times = 1
+  generateForm.linkCount = 5
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
 })
 </script>
 
 <style scoped>
+/* 基础样式 */
 .link-generate {
   padding: 20px;
+  min-height: 100vh;
 }
 
 .generate-form-card,
 .link-list-card {
   margin-bottom: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 
 .card-header {
@@ -643,9 +846,17 @@ onMounted(() => {
   align-items: center;
 }
 
+.card-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+}
+
 .header-actions {
   display: flex;
   gap: 10px;
+  align-items: center;
 }
 
 .generate-form {
@@ -654,46 +865,563 @@ onMounted(() => {
 
 .form-tip {
   font-size: 12px;
-  color: #999;
-  margin-top: 5px;
+  color: #909399;
+  margin-top: 8px;
+  line-height: 1.4;
+}
+
+.form-actions {
+  margin-top: 24px;
+  text-align: center;
+}
+
+.primary-action-btn {
+  min-width: 120px;
+  height: 44px;
+  margin-right: 16px;
+}
+
+.secondary-action-btn {
+  min-width: 80px;
+  height: 44px;
 }
 
 .pagination-wrapper {
   margin-top: 20px;
-  text-align: right;
-}
-
-.qr-code-content {
   text-align: center;
-  padding: 20px;
+  padding: 16px 0;
 }
 
-.qr-code-image img {
-  border: 1px solid #eee;
-  border-radius: 4px;
-}
 
-.qr-code-placeholder {
-  padding: 40px 0;
-}
 
 .expired-text {
   color: #f56c6c;
   font-weight: 500;
 }
 
-.batch-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 8px;
-  padding: 8px;
-  background: #f5f7fa;
-  border-radius: 4px;
-  border: 1px solid #e4e7ed;
+/* 批量操作样式 */
+.batch-actions-desktop {
+  margin-bottom: 16px;
 }
 
-.batch-actions .el-button {
+.batch-action-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 8px;
+}
+
+/* 移动端表单样式 */
+.mobile-form-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-item-wrapper {
+  width: 100%;
+}
+
+.input-with-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: center;
+}
+
+.control-btn {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.minus-btn {
+  background: #f5f7fa;
+  border-color: #dcdfe6;
+  color: #606266;
+}
+
+.plus-btn {
+  background: #409eff;
+  border-color: #409eff;
+  color: white;
+}
+
+.mobile-number-input {
+  width: 120px;
+  text-align: center;
+}
+
+.mobile-number-input :deep(.el-input__inner) {
+  text-align: center;
+  height: 44px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+/* 移动端头部操作 */
+.mobile-header-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.mobile-action-btn {
+  flex: 1;
+  height: 44px;
+  font-size: 16px;
+}
+
+/* 移动端链接列表 */
+.mobile-link-list {
+  margin-top: 16px;
+}
+
+.mobile-batch-actions {
+  margin-bottom: 16px;
+}
+
+.mobile-batch-buttons {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+  justify-content: center;
+}
+
+.batch-btn {
+  flex: 1;
+  max-width: 80px;
+  height: 36px;
+  font-size: 14px;
+}
+
+.mobile-loading {
+  padding: 20px;
+}
+
+.link-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.link-card {
+  background: white;
+  border: 1px solid #e4e7ed;
+  border-radius: 12px;
+  padding: 16px;
+  position: relative;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.link-card:hover {
+  border-color: #409eff;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
+}
+
+.link-card.selected {
+  border-color: #409eff;
+  background: #f0f8ff;
+}
+
+.link-card.expired {
+  border-color: #f56c6c;
+  background: #fef0f0;
+}
+
+.card-selection {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 2;
+}
+
+.card-header-mobile {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+  padding-right: 40px;
+}
+
+.code-info {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.code-no {
   margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.batch-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-size: 12px;
+  color: #909399;
+}
+
+.batch-id {
+  font-weight: 500;
+}
+
+.card-content {
+  margin-bottom: 16px;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.info-item .label {
+  font-size: 12px;
+  color: #909399;
+  font-weight: 500;
+}
+
+.time-info {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+  font-size: 13px;
+}
+
+.time-item {
+  display: flex;
+  gap: 8px;
+}
+
+.time-item .label {
+  color: #909399;
+  font-weight: 500;
+  min-width: 70px;
+}
+
+.link-info {
+  padding: 8px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  border: 1px solid #e9ecef;
+}
+
+.link-url {
+  font-size: 12px;
+  color: #606266;
+}
+
+.link-text {
+  word-break: break-all;
+  line-height: 1.4;
+}
+
+.card-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+}
+
+.action-btn {
+  flex: 1;
+  height: 40px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+/* 移动端样式 */
+@media (max-width: 768px) {
+  .link-generate {
+    padding: 12px;
+    background: #f5f7fa;
+  }
+
+  .mobile-layout {
+    background: #f5f7fa;
+  }
+
+  .generate-form-card,
+  .link-list-card {
+    margin-bottom: 16px;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    border: none;
+  }
+
+  .generate-form-card :deep(.el-card__header),
+  .link-list-card :deep(.el-card__header) {
+    padding: 20px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .generate-form-card :deep(.el-card__body),
+  .link-list-card :deep(.el-card__body) {
+    padding: 20px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    gap: 16px;
+    align-items: stretch;
+  }
+
+  .card-title {
+    text-align: center;
+    font-size: 20px;
+    color: #2c3e50;
+  }
+
+  .generate-form {
+    max-width: none;
+  }
+
+  .form-actions {
+    margin-top: 32px;
+  }
+
+  .primary-action-btn,
+  .secondary-action-btn {
+    width: 100%;
+    margin: 8px 0;
+    height: 50px;
+    font-size: 16px;
+    border-radius: 12px;
+  }
+
+  .primary-action-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+  }
+
+  .pagination-wrapper {
+    margin-top: 24px;
+    padding: 20px 0;
+  }
+
+  .pagination-wrapper :deep(.el-pagination) {
+    justify-content: center;
+  }
+
+  .pagination-wrapper :deep(.el-pagination .el-pager li) {
+    min-width: 36px;
+    height: 36px;
+    line-height: 36px;
+    margin: 0 2px;
+    border-radius: 8px;
+  }
+
+  .pagination-wrapper :deep(.el-pagination .btn-prev),
+  .pagination-wrapper :deep(.el-pagination .btn-next) {
+    padding: 0 8px;
+    border-radius: 8px;
+    background: white;
+    border: 1px solid #e4e7ed;
+  }
+
+
+
+  :deep(.el-dialog) {
+    width: 90% !important;
+    margin: 0 auto !important;
+    border-radius: 16px !important;
+  }
+
+  :deep(.el-dialog__header) {
+    padding: 20px 20px 0 20px;
+    text-align: center;
+  }
+
+  :deep(.el-dialog__body) {
+    padding: 20px;
+  }
+
+  :deep(.el-dialog__footer) {
+    padding: 0 20px 20px 20px;
+    text-align: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .link-generate {
+    padding: 8px;
+  }
+
+  .generate-form-card :deep(.el-card__header),
+  .link-list-card :deep(.el-card__header) {
+    padding: 16px;
+  }
+
+  .generate-form-card :deep(.el-card__body),
+  .link-list-card :deep(.el-card__body) {
+    padding: 16px;
+  }
+
+  .card-title {
+    font-size: 18px;
+  }
+
+  .mobile-form-grid {
+    gap: 16px;
+  }
+
+  .control-btn {
+    width: 40px;
+    height: 40px;
+  }
+
+  .mobile-number-input {
+    width: 100px;
+  }
+
+  .mobile-number-input :deep(.el-input__inner) {
+    height: 40px;
+    font-size: 16px;
+  }
+
+  .primary-action-btn,
+  .secondary-action-btn {
+    height: 46px;
+    font-size: 15px;
+  }
+
+  .link-card {
+    padding: 12px;
+    border-radius: 10px;
+  }
+
+  .card-header-mobile {
+    padding-right: 32px;
+  }
+
+  .code-no {
+    font-size: 15px;
+  }
+
+  .info-grid {
+    gap: 8px;
+  }
+
+  .info-item .label {
+    font-size: 11px;
+  }
+
+  .time-info {
+    font-size: 12px;
+  }
+
+  .action-btn {
+    height: 36px;
+    font-size: 12px;
+    gap: 2px;
+  }
+
+  .mobile-action-btn {
+    height: 40px;
+    font-size: 14px;
+  }
+
+  .batch-btn {
+    height: 32px;
+    font-size: 12px;
+  }
+}
+
+/* 横屏模式优化 */
+@media (max-height: 600px) and (orientation: landscape) {
+  .link-generate {
+    padding: 8px;
+  }
+
+  .generate-form-card,
+  .link-list-card {
+    margin-bottom: 12px;
+  }
+
+  .generate-form-card :deep(.el-card__header),
+  .link-list-card :deep(.el-card__header) {
+    padding: 12px 16px;
+  }
+
+  .generate-form-card :deep(.el-card__body),
+  .link-list-card :deep(.el-card__body) {
+    padding: 16px;
+  }
+
+  .mobile-form-grid {
+    gap: 12px;
+  }
+
+  .form-actions {
+    margin-top: 20px;
+  }
+
+  .primary-action-btn,
+  .secondary-action-btn {
+    height: 40px;
+  }
+
+  .link-card {
+    padding: 10px;
+  }
+
+  .action-btn {
+    height: 32px;
+  }
+}
+
+/* 深色模式适配 */
+@media (prefers-color-scheme: dark) {
+  .link-generate.mobile-layout {
+    background: #1a1a1a;
+  }
+
+  .link-card {
+    background: #2d2d30;
+    border-color: #404040;
+    color: #e8e8e8;
+  }
+
+  .link-card.selected {
+    background: #1e3a5f;
+    border-color: #409eff;
+  }
+
+  .link-card.expired {
+    background: #4a2c2c;
+    border-color: #f56c6c;
+  }
+
+  .code-no {
+    color: #e8e8e8;
+  }
+
+  .link-info {
+    background: #333;
+    border-color: #404040;
+  }
+
+  .link-text {
+    color: #b8b8b8;
+  }
 }
 </style>
diff --git a/src/views/refund/RefundManagement.vue b/src/views/refund/RefundManagement.vue
new file mode 100644
index 0000000..1bcf7fd
--- /dev/null
+++ b/src/views/refund/RefundManagement.vue
@@ -0,0 +1,548 @@
+<template>
+  <div class="refund-management">
+    <div class="page-header">
+      <h2>退单管理</h2>
+      <p class="page-description">管理用户的退单申请，支持按链接编号查询和执行退单操作</p>
+    </div>
+
+    <!-- 搜索区域 -->
+    <div class="search-section">
+      <el-card>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-input
+              v-model="searchForm.codeNo"
+              placeholder="请输入链接编号"
+              clearable
+              @keyup.enter="handleSearch"
+            >
+              <template #prepend>链接编号</template>
+            </el-input>
+          </el-col>
+          <el-col :span="8">
+            <el-select
+              v-model="searchForm.status"
+              placeholder="选择状态"
+              clearable
+              style="width: 100%"
+            >
+              <el-option label="全部状态" value="" />
+              <el-option label="新建" value="NEW" />
+              <el-option label="使用中" value="USING" />
+              <el-option label="已登录" value="LOGGED_IN" />
+              <el-option label="已完成" value="COMPLETED" />
+              <el-option label="已退单" value="REFUNDED" />
+              <el-option label="已过期" value="EXPIRED" />
+            </el-select>
+          </el-col>
+          <el-col :span="8">
+            <el-button type="primary" @click="handleSearch" :loading="loading">
+              <el-icon><Search /></el-icon>
+              查询
+            </el-button>
+            <el-button @click="handleReset">
+              <el-icon><Refresh /></el-icon>
+              重置
+            </el-button>
+          </el-col>
+        </el-row>
+      </el-card>
+    </div>
+
+    <!-- 链接信息卡片 -->
+    <div v-if="linkInfo" class="link-info-section">
+      <el-card>
+        <template #header>
+          <div class="card-header">
+            <span>链接信息</span>
+            <el-tag :type="getStatusTagType(linkInfo.status)">
+              {{ getStatusText(linkInfo.status) }}
+            </el-tag>
+          </div>
+        </template>
+        
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="链接编号">{{ linkInfo.codeNo }}</el-descriptions-item>
+          <el-descriptions-item label="当前状态">
+            <el-tag :type="getStatusTagType(linkInfo.status)">
+              {{ getStatusText(linkInfo.status) }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间">{{ formatDateTime(linkInfo.createdAt) }}</el-descriptions-item>
+          <el-descriptions-item label="更新时间">{{ formatDateTime(linkInfo.updatedAt) }}</el-descriptions-item>
+          <el-descriptions-item label="代理ID">{{ linkInfo.agentId || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="关联设备">{{ linkInfo.machineId || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="总点数">{{ linkInfo.totalPoints || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="当前点数">{{ linkInfo.currentPoints || '-' }}</el-descriptions-item>
+          <el-descriptions-item v-if="linkInfo.refundAt" label="退单时间">
+            {{ formatDateTime(linkInfo.refundAt) }}
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <!-- 操作按钮 -->
+        <div class="action-buttons">
+          <el-button
+            v-if="canRefund(linkInfo.status)"
+            type="danger"
+            @click="handleRefund"
+            :loading="refunding"
+          >
+            <el-icon><RefreshLeft /></el-icon>
+            执行退单
+          </el-button>
+          <el-button
+            v-else-if="linkInfo.status === 'REFUNDED'"
+            disabled
+            type="info"
+          >
+            <el-icon><Check /></el-icon>
+            已退单
+          </el-button>
+          <el-button
+            v-else
+            disabled
+            type="info"
+          >
+            <el-icon><Warning /></el-icon>
+            当前状态不允许退单
+          </el-button>
+        </div>
+      </el-card>
+    </div>
+
+    <!-- 空状态提示 -->
+    <div v-if="!linkInfo && !loading && searchForm.codeNo" class="empty-state">
+      <el-empty description="未找到相关链接信息">
+        <el-button type="primary" @click="handleReset">重新查询</el-button>
+      </el-empty>
+    </div>
+
+    <!-- 使用说明 -->
+    <div class="help-section">
+      <el-card>
+        <template #header>
+          <span>退单说明</span>
+        </template>
+        
+        <el-collapse>
+          <el-collapse-item title="可退单的状态" name="1">
+            <ul class="help-list">
+              <li><el-tag type="success">NEW</el-tag> - 新建状态，尚未开始使用</li>
+              <li><el-tag type="warning">USING</el-tag> - 使用中状态，正在等待登录</li>
+              <li><el-tag type="primary">LOGGED_IN</el-tag> - 已登录状态，游戏进行中</li>
+            </ul>
+          </el-collapse-item>
+          
+          <el-collapse-item title="不可退单的状态" name="2">
+            <ul class="help-list">
+              <li><el-tag type="info">REFUNDED</el-tag> - 已退单，避免重复操作</li>
+              <li><el-tag type="danger">EXPIRED</el-tag> - 已过期，无法进行退单</li>
+              <li><el-tag type="success">COMPLETED</el-tag> - 已完成，游戏已结束</li>
+            </ul>
+          </el-collapse-item>
+          
+          <el-collapse-item title="退单流程" name="3">
+            <ol class="help-list">
+              <li>系统验证用户权限和链接状态</li>
+              <li>如果链接关联了设备，调用外部脚本退单接口</li>
+              <li>更新链接状态为 <el-tag type="info">REFUNDED</el-tag></li>
+              <li>记录退单时间</li>
+            </ol>
+          </el-collapse-item>
+          
+          <el-collapse-item title="注意事项" name="4">
+            <ul class="help-list">
+              <li>退单操作不可逆，请谨慎操作</li>
+              <li>只有代理用户可以退单自己创建的链接</li>
+              <li>即使外部接口调用失败，本地状态仍会更新</li>
+              <li>退单后的链接无法继续使用</li>
+            </ul>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+    </div>
+
+    <!-- 退单确认对话框 -->
+    <el-dialog
+      v-model="refundDialogVisible"
+      title="确认退单"
+      width="500px"
+      :before-close="handleRefundDialogClose"
+    >
+      <div class="refund-confirm">
+        <el-icon class="warning-icon"><WarningFilled /></el-icon>
+        <div class="confirm-content">
+          <h3>确认要对以下链接执行退单操作吗？</h3>
+          <p class="link-code">链接编号：<strong>{{ linkInfo?.codeNo }}</strong></p>
+          <p class="warning-text">
+            <el-icon><Warning /></el-icon>
+            退单操作不可逆，执行后链接将无法继续使用
+          </p>
+        </div>
+      </div>
+      
+      <template #footer>
+        <el-button @click="refundDialogVisible = false">取消</el-button>
+        <el-button
+          type="danger"
+          @click="confirmRefund"
+          :loading="refunding"
+        >
+          确认退单
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { ref, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search, Refresh, RefreshLeft, Check, Warning, WarningFilled } from '@element-plus/icons-vue'
+import { getLinkStatus, refundLink } from '@/api/links'
+
+export default {
+  name: 'RefundManagement',
+  components: {
+    Search,
+    Refresh, 
+    RefreshLeft,
+    Check,
+    Warning,
+    WarningFilled
+  },
+  setup() {
+    // 响应式数据
+    const loading = ref(false)
+    const refunding = ref(false)
+    const refundDialogVisible = ref(false)
+    const linkInfo = ref(null)
+    
+    const searchForm = reactive({
+      codeNo: '',
+      status: ''
+    })
+
+    // 查询链接信息
+    const handleSearch = async () => {
+      if (!searchForm.codeNo.trim()) {
+        ElMessage.warning('请输入链接编号')
+        return
+      }
+
+      loading.value = true
+      try {
+        const response = await getLinkStatus(searchForm.codeNo)
+        linkInfo.value = response.data
+        
+        if (!linkInfo.value) {
+          ElMessage.warning('未找到相关链接信息')
+        }
+      } catch (error) {
+        console.error('查询链接失败:', error)
+        linkInfo.value = null
+        
+        // 根据错误状态显示不同消息
+        if (error.response?.status === 404) {
+          ElMessage.error('链接不存在')
+        } else if (error.response?.status === 403) {
+          ElMessage.error('无权限查看此链接')
+        } else {
+          ElMessage.error('查询失败，请稍后重试')
+        }
+      } finally {
+        loading.value = false
+      }
+    }
+
+    // 重置搜索
+    const handleReset = () => {
+      searchForm.codeNo = ''
+      searchForm.status = ''
+      linkInfo.value = null
+    }
+
+    // 判断是否可以退单
+    const canRefund = (status) => {
+      return ['NEW', 'USING', 'LOGGED_IN'].includes(status)
+    }
+
+    // 处理退单按钮点击
+    const handleRefund = () => {
+      if (!linkInfo.value) return
+      
+      refundDialogVisible.value = true
+    }
+
+    // 确认退单
+    const confirmRefund = async () => {
+      if (!linkInfo.value) return
+
+      refunding.value = true
+      try {
+        await refundLink(linkInfo.value.codeNo)
+        
+        // 更新本地状态
+        linkInfo.value.status = 'REFUNDED'
+        linkInfo.value.refundAt = new Date().toISOString()
+        linkInfo.value.updatedAt = new Date().toISOString()
+        
+        refundDialogVisible.value = false
+        ElMessage.success('退单操作成功')
+        
+      } catch (error) {
+        console.error('退单失败:', error)
+        
+        // 根据错误状态显示不同消息
+        if (error.response?.status === 400) {
+          const errorCode = error.response.data?.code
+          switch (errorCode) {
+            case 'LINK_003':
+              ElMessage.error('链接已经退过单了')
+              break
+            case 'LINK_004':
+              ElMessage.error('过期链接无法退单')
+              break
+            case 'LINK_005':
+              ElMessage.error('已完成的游戏无法退单')
+              break
+            default:
+              ElMessage.error(error.response.data?.message || '退单失败')
+          }
+        } else if (error.response?.status === 403) {
+          ElMessage.error('无权限操作此链接')
+        } else {
+          ElMessage.error('退单失败，请稍后重试')
+        }
+      } finally {
+        refunding.value = false
+      }
+    }
+
+    // 关闭退单对话框
+    const handleRefundDialogClose = () => {
+      if (!refunding.value) {
+        refundDialogVisible.value = false
+      }
+    }
+
+    // 获取状态标签类型
+    const getStatusTagType = (status) => {
+      const statusTypes = {
+        'NEW': 'info',
+        'USING': 'warning', 
+        'LOGGED_IN': 'primary',
+        'COMPLETED': 'success',
+        'REFUNDED': 'info',
+        'EXPIRED': 'danger'
+      }
+      return statusTypes[status] || 'info'
+    }
+
+    // 获取状态文本
+    const getStatusText = (status) => {
+      const statusTexts = {
+        'NEW': '新建',
+        'USING': '使用中',
+        'LOGGED_IN': '已登录', 
+        'COMPLETED': '已完成',
+        'REFUNDED': '已退单',
+        'EXPIRED': '已过期'
+      }
+      return statusTexts[status] || status
+    }
+
+    // 格式化时间
+    const formatDateTime = (dateTime) => {
+      if (!dateTime) return '-'
+      
+      try {
+        const date = new Date(dateTime)
+        return date.toLocaleString('zh-CN', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit'
+        })
+      } catch (error) {
+        return dateTime
+      }
+    }
+
+    return {
+      loading,
+      refunding,
+      refundDialogVisible,
+      linkInfo,
+      searchForm,
+      handleSearch,
+      handleReset,
+      canRefund,
+      handleRefund,
+      confirmRefund,
+      handleRefundDialogClose,
+      getStatusTagType,
+      getStatusText,
+      formatDateTime
+    }
+  }
+}
+</script>
+
+<style scoped>
+.refund-management {
+  padding: 20px;
+}
+
+.page-header {
+  margin-bottom: 20px;
+}
+
+.page-header h2 {
+  margin: 0 0 8px 0;
+  color: #303133;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.page-description {
+  margin: 0;
+  color: #909399;
+  font-size: 14px;
+}
+
+.search-section {
+  margin-bottom: 20px;
+}
+
+.link-info-section {
+  margin-bottom: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 600;
+}
+
+.action-buttons {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #ebeef5;
+  text-align: right;
+}
+
+.empty-state {
+  margin-bottom: 20px;
+}
+
+.help-section {
+  margin-bottom: 20px;
+}
+
+.help-list {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.help-list li {
+  margin-bottom: 8px;
+  line-height: 1.6;
+}
+
+.help-list .el-tag {
+  margin-right: 8px;
+}
+
+/* 退单确认对话框样式 */
+.refund-confirm {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.warning-icon {
+  font-size: 24px;
+  color: #e6a23c;
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+.confirm-content {
+  flex: 1;
+}
+
+.confirm-content h3 {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+  color: #303133;
+}
+
+.link-code {
+  margin: 8px 0;
+  font-size: 14px;
+  color: #606266;
+}
+
+.link-code strong {
+  color: #409eff;
+  font-family: 'Courier New', monospace;
+}
+
+.warning-text {
+  margin: 12px 0 0 0;
+  color: #e6a23c;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .refund-management {
+    padding: 12px;
+  }
+  
+  .page-header h2 {
+    font-size: 20px;
+  }
+  
+  .action-buttons {
+    text-align: center;
+  }
+  
+  .el-descriptions {
+    font-size: 12px;
+  }
+  
+  .refund-confirm {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .warning-icon {
+    align-self: center;
+  }
+}
+
+/* 深色主题适配 */
+.dark .page-header h2 {
+  color: #e5eaf3;
+}
+
+.dark .page-description {
+  color: #a3a6ad;
+}
+
+.dark .confirm-content h3 {
+  color: #e5eaf3;
+}
+
+.dark .link-code {
+  color: #a3a6ad;
+}
+</style>
diff --git a/src/views/settings/Settings.vue b/src/views/settings/Settings.vue
index 84db95e..6bb77d7 100644
--- a/src/views/settings/Settings.vue
+++ b/src/views/settings/Settings.vue
@@ -31,7 +31,12 @@
     </div>
 
     <!-- 配置分类标签页 -->
-    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
+    <el-tabs 
+      v-model="activeTab" 
+      @tab-change="handleTabChange"
+      :tab-position="isMobile ? 'top' : 'top'"
+      :class="{ 'mobile-tabs': isMobile }"
+    >
       <el-tab-pane label="链接配置" name="link">
         <config-group 
           :configs="linkConfigs" 
@@ -78,8 +83,9 @@
         ref="formRef"
         :model="form"
         :rules="formRules"
-        label-width="120px"
-        label-position="right"
+        :label-width="isMobile ? 'auto' : '120px'"
+        :label-position="isMobile ? 'top' : 'right'"
+        :class="{ 'mobile-form': isMobile }"
       >
         <el-form-item label="配置键" prop="configKey">
           <el-input
@@ -174,7 +180,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted, nextTick } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { 
   Plus, 
@@ -204,6 +210,12 @@ const loading = ref(false)
 const activeTab = ref('link')
 const allConfigs = ref([])
 const changedConfigs = ref(new Map())
+const isMobile = ref(false)
+
+// 检测移动端
+const checkMobile = () => {
+  isMobile.value = window.innerWidth <= 768
+}
 
 // 对话框相关
 const dialogVisible = ref(false)
@@ -262,9 +274,15 @@ const userConfigs = computed(() => {
 
 // 生命周期
 onMounted(() => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
   loadConfigs()
 })
 
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
+})
+
 // 方法
 async function loadConfigs() {
   try {
@@ -545,5 +563,256 @@ function handleRefresh() {
 :deep(.el-dialog__body) {
   padding-top: 10px;
 }
+
+/* 移动端样式 */
+@media (max-width: 768px) {
+  .system-config {
+    padding: 12px;
+  }
+
+  .page-header {
+    margin-bottom: 20px;
+    text-align: center;
+  }
+
+  .page-header h2 {
+    font-size: 20px;
+  }
+
+  .page-header p {
+    font-size: 13px;
+  }
+
+  .action-bar {
+    margin-bottom: 20px;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .action-bar .el-button {
+    width: 100%;
+    height: 44px;
+    font-size: 16px;
+    justify-content: center;
+  }
+
+  /* 移动端标签页优化 */
+  .mobile-tabs :deep(.el-tabs__header) {
+    margin-bottom: 16px;
+  }
+
+  .mobile-tabs :deep(.el-tabs__nav-wrap) {
+    padding: 0 12px;
+  }
+
+  .mobile-tabs :deep(.el-tabs__item) {
+    padding: 0 12px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+  }
+
+  .mobile-tabs :deep(.el-tabs__content) {
+    padding-top: 16px;
+  }
+
+  /* 移动端表单优化 */
+  .mobile-form :deep(.el-form-item) {
+    margin-bottom: 20px;
+  }
+
+  .mobile-form :deep(.el-form-item__label) {
+    padding-bottom: 8px;
+    line-height: 1.4;
+  }
+
+  .mobile-form :deep(.el-input),
+  .mobile-form :deep(.el-textarea),
+  .mobile-form :deep(.el-select) {
+    width: 100%;
+  }
+
+  .mobile-form :deep(.el-input__wrapper) {
+    min-height: 44px;
+  }
+
+  .mobile-form :deep(.el-input__inner) {
+    height: 44px;
+    line-height: 44px;
+    font-size: 16px;
+  }
+
+  .mobile-form :deep(.el-textarea__inner) {
+    font-size: 16px;
+    min-height: 80px;
+  }
+
+  .mobile-form :deep(.el-select .el-input) {
+    height: 44px;
+  }
+
+  .mobile-form :deep(.el-select .el-input__inner) {
+    height: 44px;
+    line-height: 44px;
+  }
+
+  .mobile-form :deep(.el-switch) {
+    height: 24px;
+  }
+
+  .form-tip {
+    font-size: 13px;
+    margin-top: 6px;
+  }
+
+  /* 对话框移动端优化 */
+  :deep(.el-dialog) {
+    width: 95% !important;
+    margin: 0 auto !important;
+    margin-top: 5vh !important;
+    max-height: 90vh;
+    overflow-y: auto;
+    border-radius: 12px;
+  }
+
+  :deep(.el-dialog__header) {
+    padding: 16px 20px 12px;
+  }
+
+  :deep(.el-dialog__body) {
+    padding: 12px 20px 20px;
+  }
+
+  :deep(.el-dialog__footer) {
+    padding: 12px 20px 16px;
+  }
+
+  :deep(.el-dialog__title) {
+    font-size: 18px;
+  }
+
+  /* 上传组件移动端优化 */
+  .upload-demo :deep(.el-upload) {
+    width: 100%;
+  }
+
+  .upload-demo :deep(.el-upload-dragger) {
+    width: 100%;
+    height: 120px;
+  }
+
+  .upload-demo :deep(.el-icon--upload) {
+    font-size: 48px;
+    margin-bottom: 12px;
+  }
+
+  .upload-demo :deep(.el-upload__text) {
+    font-size: 14px;
+  }
+
+  .upload-demo :deep(.el-upload__tip) {
+    font-size: 12px;
+    margin-top: 8px;
+  }
+
+  /* 卡片移动端优化 */
+  :deep(.el-card) {
+    margin-bottom: 16px;
+    border-radius: 12px;
+  }
+
+  :deep(.el-card__header) {
+    padding: 16px;
+  }
+
+  :deep(.el-card__body) {
+    padding: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .system-config {
+    padding: 8px;
+  }
+
+  .page-header {
+    margin-bottom: 16px;
+  }
+
+  .page-header h2 {
+    font-size: 18px;
+  }
+
+  .action-bar {
+    margin-bottom: 16px;
+  }
+
+  .mobile-tabs :deep(.el-tabs__item) {
+    padding: 0 8px;
+    font-size: 13px;
+  }
+
+  .mobile-form :deep(.el-form-item) {
+    margin-bottom: 16px;
+  }
+
+  .mobile-form :deep(.el-textarea__inner) {
+    min-height: 70px;
+  }
+
+  :deep(.el-dialog__header),
+  :deep(.el-dialog__body),
+  :deep(.el-dialog__footer) {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  :deep(.el-card__header),
+  :deep(.el-card__body) {
+    padding: 12px;
+  }
+}
+
+/* 横屏模式优化 */
+@media (max-height: 600px) and (orientation: landscape) {
+  .system-config {
+    padding: 8px;
+  }
+
+  .page-header {
+    margin-bottom: 12px;
+  }
+
+  .page-header h2 {
+    font-size: 16px;
+    margin-bottom: 4px;
+  }
+
+  .action-bar {
+    margin-bottom: 12px;
+    flex-direction: row;
+    gap: 8px;
+  }
+
+  .action-bar .el-button {
+    flex: 1;
+    height: 36px;
+    font-size: 14px;
+  }
+
+  .mobile-tabs :deep(.el-tabs__item) {
+    height: 36px;
+    line-height: 36px;
+  }
+
+  .mobile-tabs :deep(.el-tabs__content) {
+    padding-top: 12px;
+  }
+
+  :deep(.el-dialog) {
+    margin-top: 2vh !important;
+    max-height: 95vh;
+  }
+}
 </style>
 
diff --git a/src/views/users/UserList.vue b/src/views/users/UserList.vue
index 54ec3bf..6932196 100644
--- a/src/views/users/UserList.vue
+++ b/src/views/users/UserList.vue
@@ -15,6 +15,120 @@
     
     <!-- 用户管理内容 -->
     <div v-else>
+    <!-- 移动端卡片列表 -->
+    <div v-if="isMobile" class="mobile-user-list">
+      <!-- 移动端搜索栏 -->
+      <el-card class="mobile-search-card" shadow="never">
+        <el-form :model="query" @submit.prevent>
+          <el-form-item>
+            <el-input 
+              v-model.trim="query.keyword" 
+              placeholder="搜索用户名" 
+              clearable 
+              style="width: 100%"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-row :gutter="12">
+              <el-col :span="12">
+                <el-select v-model="query.userType" clearable placeholder="用户类型" style="width: 100%">
+                  <el-option value="ADMIN" label="管理员" />
+                  <el-option value="AGENT" label="代理" />
+                </el-select>
+              </el-col>
+              <el-col :span="12">
+                <el-select v-model="query.status" clearable placeholder="状态" style="width: 100%">
+                  <el-option value="ENABLED" label="启用" />
+                  <el-option value="DISABLED" label="禁用" />
+                </el-select>
+              </el-col>
+            </el-row>
+          </el-form-item>
+          <el-form-item>
+            <el-row :gutter="12">
+              <el-col :span="12">
+                <el-button type="primary" :loading="loading" @click="onSearch" style="width: 100%">查询</el-button>
+              </el-col>
+              <el-col :span="12">
+                <el-button @click="onReset" style="width: 100%">重置</el-button>
+              </el-col>
+            </el-row>
+          </el-form-item>
+          <el-form-item v-if="canCreateUser">
+            <el-button type="success" @click="openCreate" style="width: 100%">新增用户</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+
+      <!-- 移动端用户卡片列表 -->
+      <div v-loading="loading" class="mobile-cards">
+        <el-card 
+          v-for="(user, index) in list" 
+          :key="user.id" 
+          class="mobile-user-card" 
+          shadow="hover"
+        >
+          <div class="mobile-user-info">
+            <div class="user-header">
+              <div class="user-name">
+                <span class="index-number">#{{ (query.page - 1) * query.pageSize + index + 1 }}</span>
+                <span class="username">{{ user.username }}</span>
+              </div>
+              <el-switch 
+                :model-value="user.status === 'ENABLED'" 
+                @change="(v)=>onToggle(user, v)" 
+                size="small"
+              />
+            </div>
+            
+            <div class="user-details">
+              <div class="detail-item">
+                <span class="label">类型:</span>
+                <el-tag :type="user.userType === 'ADMIN' ? 'danger' : 'success'" size="small">
+                  {{ getUserTypeDisplayName(user.userType) }}
+                </el-tag>
+              </div>
+              
+              <div v-if="user.userType === 'AGENT'" class="detail-item">
+                <span class="label">积分余额:</span>
+                <span class="value">{{ user.pointsBalance || 0 }}</span>
+              </div>
+              
+              <div class="detail-item">
+                <span class="label">创建时间:</span>
+                <span class="value">{{ user.createdAt }}</span>
+              </div>
+            </div>
+            
+            <div class="user-actions">
+              <el-button v-if="canEditUser" size="small" @click="openEdit(user)">编辑</el-button>
+              <el-button v-if="canResetPassword" size="small" type="warning" @click="onResetPwd(user)">重置密码</el-button>
+              <el-button v-if="canDeleteUser" size="small" type="danger" @click="onRemove(user)">删除</el-button>
+            </div>
+          </div>
+        </el-card>
+      </div>
+
+      <!-- 移动端分页 -->
+      <div class="mobile-pagination">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="total"
+          :page-size="query.pageSize"
+          :current-page="query.page"
+          @current-change="(p)=>{ query.page=p; load(); }"
+          small
+        />
+      </div>
+    </div>
+
+    <!-- 桌面端表格 -->
+    <div v-else>
     <el-card class="mb16" shadow="never">
       <el-form :inline="true" :model="query" @submit.prevent>
         <el-form-item label="关键词">
@@ -118,8 +232,9 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, watch, computed } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, watch, computed } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { Search } from '@element-plus/icons-vue'
 import { fetchUsers, createUser, updateUser, deleteUser, setUserStatus, resetUserPassword } from '@/api/users'
 import { showErrorMessage, showSuccessMessage } from '@/utils/error'
 import { hasPermission, PERMISSIONS } from '@/utils/permission'
@@ -127,6 +242,12 @@ import { hasPermission, PERMISSIONS } from '@/utils/permission'
 const loading = ref(false)
 const list = ref([])
 const total = ref(0)
+const isMobile = ref(false)
+
+// 检测移动端
+const checkMobile = () => {
+  isMobile.value = window.innerWidth <= 768
+}
 
 const query = reactive({
   page: 1,
@@ -345,11 +466,221 @@ watch(() => form.userType, (newType) => {
   }
 })
 
-onMounted(load)
+onMounted(() => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+  load()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
+})
 </script>
 
 <style scoped>
+.users-page {
+  padding: 0;
+}
+
 .mb16 { margin-bottom: 16px; }
 .mr4 { margin-right: 4px; }
 .pager { display: flex; justify-content: flex-end; margin-top: 12px; }
+
+/* 移动端样式 */
+.mobile-user-list {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.mobile-search-card {
+  margin-bottom: 16px;
+  border-radius: 12px;
+}
+
+.mobile-search-card :deep(.el-card__body) {
+  padding: 16px;
+}
+
+.mobile-search-card .el-form-item {
+  margin-bottom: 16px;
+}
+
+.mobile-search-card .el-form-item:last-child {
+  margin-bottom: 0;
+}
+
+.mobile-cards {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.mobile-user-card {
+  margin-bottom: 12px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+}
+
+.mobile-user-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.mobile-user-card:last-child {
+  margin-bottom: 0;
+}
+
+.mobile-user-card :deep(.el-card__body) {
+  padding: 16px;
+}
+
+.mobile-user-info {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.user-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.user-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.index-number {
+  font-size: 12px;
+  color: #909399;
+  background: #f5f7fa;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.username {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.user-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 0;
+}
+
+.detail-item .label {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 500;
+}
+
+.detail-item .value {
+  font-size: 14px;
+  color: #303133;
+}
+
+.user-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding-top: 8px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.user-actions .el-button {
+  flex: 1;
+  min-width: 0;
+}
+
+.mobile-pagination {
+  padding: 16px 0;
+  display: flex;
+  justify-content: center;
+  background: #fff;
+  border-top: 1px solid #f0f0f0;
+  margin-top: 16px;
+}
+
+/* 桌面端隐藏移动端组件 */
+@media (min-width: 769px) {
+  .mobile-user-list {
+    display: none;
+  }
+}
+
+/* 移动端隐藏桌面端组件 */
+@media (max-width: 768px) {
+  .users-page > div:not(.mobile-user-list) {
+    display: none;
+  }
+  
+  .users-page .permission-denied {
+    display: block;
+  }
+  
+  .mobile-search-card .el-input {
+    height: 44px;
+  }
+  
+  .mobile-search-card .el-input .el-input__inner {
+    height: 44px;
+    line-height: 44px;
+    font-size: 16px;
+  }
+  
+  .mobile-search-card .el-select {
+    height: 44px;
+  }
+  
+  .mobile-search-card .el-button {
+    height: 44px;
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .mobile-search-card :deep(.el-card__body) {
+    padding: 12px;
+  }
+  
+  .mobile-user-card :deep(.el-card__body) {
+    padding: 12px;
+  }
+  
+  .user-actions {
+    flex-direction: column;
+  }
+  
+  .user-actions .el-button {
+    flex: none;
+    width: 100%;
+  }
+  
+  .detail-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+  
+  .username {
+    font-size: 15px;
+  }
+  
+  .detail-item .label,
+  .detail-item .value {
+    font-size: 13px;
+  }
+}
 </style>