create 返回官网

适配
返回官网链接
2025-12-15 11:58:05 +08:00 · 2025-12-13 16:25:05 +08:00 · 2025-12-12 18:09:14 +08:00 · 2025-12-12 15:27:21 +08:00 · 2025-12-10 18:09:11 +08:00 · 2025-12-10 14:17:31 +08:00
55 changed files with 8567 additions and 1067 deletions
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -302,6 +302,7 @@
    "useMediaQuery": true,
    "useMemoize": true,
    "useMemory": true,
+    "useMobileTable": true,
    "useModel": true,
    "useMounted": true,
    "useMouse": true,
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -336,6 +336,7 @@ declare global {
  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
  const useMemoize: typeof import('@vueuse/core')['useMemoize']
  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMobileTable: typeof import('./src/composables/useMobileTable.js')['useMobileTable']
  const useModel: typeof import('vue')['useModel']
  const useMounted: typeof import('@vueuse/core')['useMounted']
  const useMouse: typeof import('@vueuse/core')['useMouse']
@@ -747,6 +748,7 @@ declare module 'vue' {
    readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
    readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
    readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
+    readonly useMobileTable: UnwrapRef<typeof import('./src/composables/useMobileTable.js')['useMobileTable']>
    readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
    readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
    readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
--- a/components.d.ts
+++ b/components.d.ts
@@ -18,6 +18,7 @@ declare module 'vue' {
    ChartCard: typeof import('./src/components/statistics/ChartCard.vue')['default']
    CodeDisplay: typeof import('./src/components/common/CodeDisplay.vue')['default']
    CustomSteps: typeof import('./src/components/common/CustomSteps.vue')['default']
+    DanmakuBar: typeof import('./src/components/common/DanmakuBar.vue')['default']
    ElAlert: typeof import('element-plus/es')['ElAlert']
    ElAside: typeof import('element-plus/es')['ElAside']
    ElAvatar: typeof import('element-plus/es')['ElAvatar']
@@ -79,6 +80,7 @@ declare module 'vue' {
    ProductCard: typeof import('./src/components/product/ProductCard.vue')['default']
    ProductDocumentationDialog: typeof import('./src/components/admin/ProductDocumentationDialog.vue')['default']
    ProductFormDialog: typeof import('./src/components/admin/ProductFormDialog.vue')['default']
+    ResponsiveActionColumn: typeof import('./src/components/common/ResponsiveActionColumn.vue')['default']
    RichTextEditor: typeof import('./src/components/common/RichTextEditor.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
        "lodash-es": "^4.17.21",
        "marked": "^16.1.1",
        "pinia": "^3.0.3",
+        "qrcode": "^1.5.4",
        "tinymce": "^8.0.2",
        "unplugin-auto-import": "^19.3.0",
        "unplugin-vue-components": "^28.8.0",
@@ -2859,11 +2860,19 @@
        "url": "https://github.com/sponsors/epoberezkin"
      }
    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/ansi-styles": {
      "version": "4.3.0",
      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "color-convert": "^2.0.1"
@@ -3115,6 +3124,15 @@
        "node": ">=6"
      }
    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001727",
      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
@@ -3198,11 +3216,21 @@
        "node": ">=18"
      }
    },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "color-name": "~1.1.4"
@@ -3215,7 +3243,6 @@
      "version": "1.1.4",
      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/colorjs.io": {
@@ -3348,6 +3375,15 @@
        }
      }
    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/deep-is": {
      "version": "0.1.4",
      "resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
@@ -3416,6 +3452,12 @@
        "node": ">=8"
      }
    },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
    "node_modules/dom7": {
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-3.0.0.tgz",
@@ -3582,6 +3624,12 @@
        }
      }
    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
    "node_modules/enhanced-resolve": {
      "version": "5.18.2",
      "resolved": "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
@@ -4306,6 +4354,15 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
    "node_modules/get-intrinsic": {
      "version": "1.3.0",
      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -4579,6 +4636,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/is-glob": {
      "version": "4.0.3",
      "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
@@ -5678,6 +5744,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
@@ -5708,7 +5783,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz",
      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@@ -5811,6 +5885,15 @@
        "pathe": "^2.0.3"
      }
    },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.5.6",
      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.6.tgz",
@@ -5950,6 +6033,23 @@
        "node": ">=6"
      }
    },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/quansync": {
      "version": "0.2.10",
      "resolved": "https://registry.npmmirror.com/quansync/-/quansync-0.2.10.tgz",
@@ -6004,6 +6104,21 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
    "node_modules/resolve-from": {
      "version": "4.0.0",
      "resolved": "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -6423,6 +6538,12 @@
        "node": ">=10"
      }
    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6558,6 +6679,32 @@
      "integrity": "sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==",
      "license": "MIT"
    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/strip-final-newline": {
      "version": "4.0.0",
      "resolved": "https://registry.npmmirror.com/strip-final-newline/-/strip-final-newline-4.0.0.tgz",
@@ -7347,6 +7494,12 @@
        "node": ">= 8"
      }
    },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
    "node_modules/wildcard": {
      "version": "1.1.2",
      "resolved": "https://registry.npmmirror.com/wildcard/-/wildcard-1.1.2.tgz",
@@ -7363,6 +7516,20 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/wsl-utils": {
      "version": "0.1.0",
      "resolved": "https://registry.npmmirror.com/wsl-utils/-/wsl-utils-0.1.0.tgz",
@@ -7389,6 +7556,12 @@
        "node": ">=12"
      }
    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
    "node_modules/yallist": {
      "version": "5.0.0",
      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-5.0.0.tgz",
@@ -7398,6 +7571,93 @@
        "node": ">=18"
      }
    },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yargs/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/yocto-queue": {
      "version": "0.1.0",
      "resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
    "lodash-es": "^4.17.21",
    "marked": "^16.1.1",
    "pinia": "^3.0.3",
+    "qrcode": "^1.5.4",
    "tinymce": "^8.0.2",
    "unplugin-auto-import": "^19.3.0",
    "unplugin-vue-components": "^28.8.0",
--- a/public/qrcode.jpg
+++ b/public/qrcode.jpg
--- a/public/yhxy.pdf
+++ b/public/yhxy.pdf
--- a/public/yszc.pdf
+++ b/public/yszc.pdf
--- a/src/api/announcement.js
+++ b/src/api/announcement.js
@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+// 公告管理API
+export const announcementApi = {
+  // ==================== 用户端API ====================
+  // 公告查询
+  getAnnouncements: (params) => request.get('/announcements', { params }),
+  getAnnouncementDetail: (id) => request.get(`/announcements/${id}`),
+
+  // ==================== 管理员端API ====================
+  // 统计信息
+  getAnnouncementStats: () => request.get('/admin/announcements/stats'),
+
+  // 公告管理
+  getAnnouncementsForAdmin: (params) => request.get('/admin/announcements', { params }),
+  createAnnouncement: (data) => request.post('/admin/announcements', data),
+  updateAnnouncement: (id, data) => request.put(`/admin/announcements/${id}`, data),
+  deleteAnnouncement: (id) => request.delete(`/admin/announcements/${id}`),
+
+  // 公告状态管理
+  publishAnnouncement: (id) => request.post(`/admin/announcements/${id}/publish`),
+  withdrawAnnouncement: (id) => request.post(`/admin/announcements/${id}/withdraw`),
+  archiveAnnouncement: (id) => request.post(`/admin/announcements/${id}/archive`),
+  schedulePublishAnnouncement: (id, data) => request.post(`/admin/announcements/${id}/schedule-publish`, data),
+  updateSchedulePublishAnnouncement: (id, data) => request.post(`/admin/announcements/${id}/update-schedule-publish`, data),
+  cancelSchedulePublishAnnouncement: (id) => request.post(`/admin/announcements/${id}/cancel-schedule`),
+}
+
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,10 +1,11 @@
 import request from '@/utils/request'
+import { announcementApi } from './announcement.js'
 import { articleApi } from './article.js'
 import { balanceAlertApi } from './balanceAlertApi.js'
 import { adminInvoiceApi, invoiceApi } from './invoice.js'

-// 直接导出发票API、文章API和余额预警API
-export { adminInvoiceApi, articleApi, balanceAlertApi, invoiceApi }
+// 直接导出发票API、文章API、公告API和余额预警API
+export { adminInvoiceApi, announcementApi, articleApi, balanceAlertApi, invoiceApi }

 // 用户相关接口 - 严格按照后端路由定义
 export const userApi = {
@@ -57,6 +58,11 @@ export const productApi = {
  getProductApiConfigByCode: (productCode) => request.get(`/products/code/${productCode}/api-config`),
  getProductApiConfigsByProductIDs: (productIds) => request.get('/products/api-configs', {
    params: { product_ids: productIds.join(',') }
+  }),
+
+  // 下载接口文档（支持PDF和Markdown）
+  downloadProductDocumentation: (productId) => request.get(`/products/${productId}/documentation/download`, {
+    responseType: 'blob'
  })
 }

@@ -81,7 +87,10 @@ export const subscriptionApi = {
  getMySubscriptionDetail: (id) => request.get(`/my/subscriptions/${id}`),

  // 获取我的订阅使用情况 (需认证)
-  getMySubscriptionUsage: (id) => request.get(`/my/subscriptions/${id}/usage`)
+  getMySubscriptionUsage: (id) => request.get(`/my/subscriptions/${id}/usage`),
+
+  // 取消我的订阅 (需认证)
+  cancelMySubscription: (id) => request.post(`/my/subscriptions/${id}/cancel`)
 }

 // 财务相关接口
@@ -100,6 +109,8 @@ export const financeApi = {
  transferRecharge: (data) => request.post('/finance/wallet/transfer-recharge', data),
  giftRecharge: (data) => request.post('/finance/wallet/gift-recharge', data),
  createAlipayRecharge: (data) => request.post('/finance/wallet/alipay-recharge', data),
+  createWechatRecharge: (data) => request.post('/finance/wallet/wechat-recharge', data),
+  getWechatOrderStatus: (params) => request.get('/finance/wallet/wechat-order-status', { params }),

  // 用户密钥相关
  createUserSecrets: (data) => request.post('/finance/secrets', data),
@@ -221,9 +232,15 @@ export const apiKeysApi = {

 export const whiteListApi = {
  // 获取用户白名单列表 (需认证)
-  getWhiteList: () => request.get('/white-list'),
+  getWhiteList: (remark = '') => {
+    const params = {}
+    if (remark) {
+      params.remark = remark
+    }
+    return request.get('/white-list', { params })
+  },
  // 添加白名单IP (需认证)
-  addWhiteListIP: (ipAddress) => request.post('/white-list', { ip_address: ipAddress }),
+  addWhiteListIP: (ipAddress, remark = '') => request.post('/white-list', { ip_address: ipAddress, remark: remark }),
  // 删除白名单IP (需认证)
  deleteWhiteListIP: (ipAddress) => request.delete(`/white-list/${encodeURIComponent(ipAddress)}`)
 }
--- a/src/assets/styles/list-pages.css
+++ b/src/assets/styles/list-pages.css
@@ -55,6 +55,7 @@
  display: flex;
  align-items: center;
  gap: 12px;
+  flex-wrap: wrap;
 }

 /* ===== 筛选区域 ===== */
@@ -366,10 +367,31 @@
    padding: 24px 20px 20px;
  }

+  .list-page-header .flex.justify-between {
+    flex-direction: column;
+    gap: 16px;
+  }
+
  .list-page-title {
    font-size: 24px;
  }

+  .list-page-actions {
+    width: 100%;
+    justify-content: flex-start;
+    gap: 8px;
+  }
+
+  .list-page-actions .el-button {
+    flex: 1;
+    min-width: 0;
+    flex-basis: calc(50% - 4px);
+  }
+
+  .list-page-actions .el-button:last-child:nth-child(odd) {
+    flex-basis: 100%;
+  }
+
  .list-page-filters {
    padding: 20px;
  }
@@ -396,6 +418,148 @@
  .filter-buttons {
    justify-content: center;
  }
+
+  /* ===== 移动端表格优化 ===== */
+  /* 表格容器允许横向滚动 */
+  .table-wrapper {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    /* 隐藏滚动条但保持滚动功能 */
+    scrollbar-width: thin;
+  }
+
+  /* 移除固定列效果 - 通过覆盖 Element Plus 的固定列样式 */
+  .list-page-container .el-table .el-table__fixed,
+  .list-page-container .el-table .el-table__fixed-right {
+    position: static !important;
+    box-shadow: none !important;
+    background-color: transparent !important;
+  }
+
+  /* 固定列的表头和表体都改为静态定位 */
+  .list-page-container .el-table .el-table__fixed-header-wrapper,
+  .list-page-container .el-table .el-table__fixed-body-wrapper,
+  .list-page-container .el-table .el-table__fixed-footer-wrapper {
+    position: static !important;
+  }
+
+  /* 表格单元格在移动端优化 */
+  .list-page-container .el-table th,
+  .list-page-container .el-table td {
+    padding: 12px 8px !important;
+    font-size: 13px;
+  }
+
+  /* 操作按钮组在移动端改为紧凑布局 */
+  .list-page-container .el-table .el-table__cell .flex.gap-2,
+  .list-page-container .el-table .el-table__cell .flex.items-center,
+  .list-page-container .el-table .el-table__cell .flex.space-x-2 {
+    flex-wrap: wrap;
+    gap: 6px !important;
+  }
+
+  /* 操作按钮在移动端缩小 */
+  .list-page-container .el-table .el-button--small {
+    padding: 6px 10px;
+    font-size: 12px;
+    min-width: auto;
+  }
+
+  /* 表格列宽度优化 - 允许更灵活的宽度 */
+  .list-page-container .el-table .el-table__cell {
+    min-width: 80px;
+  }
+
+  /* 操作列宽度自适应，不设置最小宽度 */
+  .list-page-container .el-table .el-table__cell[data-label="操作"],
+  .list-page-container .el-table th:last-child,
+  .list-page-container .el-table td:last-child {
+    min-width: auto !important;
+    width: auto !important;
+  }
+
+  /* 隐藏部分次要列在移动端 - 通过类名控制 */
+  .list-page-container .el-table .el-table__cell.hidden-mobile {
+    display: none;
+  }
+
+  /* 操作按钮在移动端自动换行，避免溢出 */
+  .list-page-container .el-table .el-table__cell .el-button + .el-button {
+    margin-left: 0;
+  }
+
+  /* 表格在移动端允许横向滚动 */
+  .list-page-container .el-table {
+    min-width: 600px;
+  }
+
+  /* 操作列在移动端不设置最小宽度，允许换行 */
+  .list-page-container .el-table .el-table__cell[data-label="操作"] {
+    white-space: normal;
+    word-break: break-word;
+  }
+
+  /* 操作按钮组在移动端更紧凑 */
+  .list-page-container .el-table .el-table__cell .flex {
+    justify-content: flex-start;
+  }
+
+  /* 下拉菜单按钮在移动端优化 */
+  .list-page-container .el-table .el-dropdown .el-button {
+    padding: 6px 10px;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .list-page-container {
+    padding: 12px;
+  }
+
+  .list-page-header {
+    padding: 16px 12px 12px;
+  }
+
+  .list-page-title {
+    font-size: 20px;
+  }
+
+  .list-page-actions {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .list-page-actions .el-button {
+    flex-basis: 100%;
+    width: 100%;
+  }
+
+  .list-page-filters {
+    padding: 16px 12px;
+  }
+
+  .list-page-table {
+    padding: 0 12px 12px;
+  }
+
+  /* 表格单元格进一步缩小 */
+  .list-page-container .el-table th,
+  .list-page-container .el-table td {
+    padding: 10px 6px !important;
+    font-size: 12px;
+  }
+
+  /* 操作按钮更紧凑 */
+  .list-page-container .el-table .el-button--small {
+    padding: 4px 8px;
+    font-size: 11px;
+  }
+
+  /* 操作按钮组更紧凑 */
+  .list-page-container .el-table .el-table__cell .flex.gap-2,
+  .list-page-container .el-table .el-table__cell .flex.items-center {
+    gap: 4px !important;
+  }
 }

 /* 动画效果 */
--- a/src/components/admin/ProductFormDialog.vue
+++ b/src/components/admin/ProductFormDialog.vue
@@ -54,11 +54,19 @@
          </el-form-item>

          <el-form-item label="是否启用" prop="is_enabled">
-            <el-switch v-model="form.is_enabled" />
+            <el-switch 
+              v-model="form.is_enabled" 
+              :active-value="true"
+              :inactive-value="false"
+            />
          </el-form-item>

          <el-form-item label="是否展示" prop="is_visible">
-            <el-switch v-model="form.is_visible" />
+            <el-switch 
+              v-model="form.is_visible" 
+              :active-value="true"
+              :inactive-value="false"
+            />
          </el-form-item>
        </div>

@@ -315,9 +323,9 @@ import { productAdminApi } from '@/api'
 import RichTextEditor from '@/components/common/RichTextEditor.vue'
 import { Rank, Search } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
-
 import draggable from 'vuedraggable'

+
 const props = defineProps({
  modelValue: {
    type: Boolean,
@@ -371,7 +379,6 @@ const form = reactive({
  seo_description: '',
  seo_keywords: ''
 })
-
 // 表单验证规则
 const rules = {
  code: [
@@ -492,13 +499,16 @@ const handleCreateMode = () => {
    if (key === 'is_package') {
      form[key] = false
    } else if (key === 'is_enabled' || key === 'is_visible') {
-      form[key] = true
-    } else if (key === 'price') {
+      // 保持默认值 true，但允许用户在界面上切换
+      // 注意：这里不强制设置，让用户可以在界面上自由切换
+      // 默认值已经在 form 初始化时设置为 true（第375-376行）
+    } else if (key === 'price' || key === 'cost_price') {
      form[key] = 0
    } else {
      form[key] = ''
    }
  })
+  console.log('form', form)
 }

 // 处理组合包数据
@@ -746,6 +756,10 @@ const handleSubmit = async () => {
    submitting.value = true

    const submitData = { ...form }
+    
+    // 确保布尔值正确传递
+    submitData.is_enabled = Boolean(form.is_enabled)
+    submitData.is_visible = Boolean(form.is_visible)

    if (isEdit.value) {
      // 编辑模式
@@ -865,28 +879,39 @@ const handlePackageItemsUpdate = async (packageId) => {
  min-width: 80px;
 }

+.selected-products-section {
+  margin-top: 20px;
+  display: block;
+  visibility: visible;
+}
+
 .selected-products-list {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: white;
  min-height: 100px;
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 8px;
+  display: block;
+  visibility: visible;
+  opacity: 1;
 }

 .selected-product-item {
  display: flex;
  align-items: center;
-  padding: 16px;
-  border-bottom: 1px solid #f3f4f6;
-  background-color: white;
-  transition: background-color 0.2s;
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background-color: #ffffff;
+  transition: background-color 0.2s, box-shadow 0.2s;
 }

 .selected-product-item:hover {
  background-color: #f9fafb;
-}
-
-.selected-product-item:last-child {
-  border-bottom: none;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .drag-handle {
--- a/src/components/common/BusinessConsultationDialog.vue
+++ b/src/components/common/BusinessConsultationDialog.vue
@@ -1,14 +1,37 @@
 <template>
  <el-dialog
    v-model="dialogVisible"
-    title="商务洽谈"
-    width="500px"
+    :title="currentStep === 'select' ? '' : '商务洽谈'"
+    :width="isMobile ? '96vw' : '500px'"
+    :top="isMobile ? '4vh' : '15vh'"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    class="business-consultation-dialog"
    :z-index="9999"
+    append-to-body
+    @close="handleDialogClose"
  >
-    <div class="consultation-content">
+    <!-- 选择咨询类型 -->
+    <div v-if="currentStep === 'select'" class="consultation-type-select">
+      <h2 class="consultation-title">选择咨询类型</h2>
+      <div class="consultation-buttons">
+        <el-button
+          class="consultation-button business-button"
+          @click="selectBusinessConsultation"
+        >
+          商务咨询
+        </el-button>
+        <el-button
+          class="consultation-button technical-button"
+          @click="selectTechnicalConsultation"
+        >
+          技术咨询
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 商务洽谈内容 -->
+    <div v-else class="consultation-content">
      <div class="consultation-info">
        <h4>专属商务顾问</h4>
        <p>扫描下方二维码，添加专属商务顾问微信</p>
@@ -35,14 +58,13 @@
          </div>
        </div>
        <p class="qr-code-tip">请使用微信扫描二维码</p>
-      <!-- INSERT_YOUR_CODE -->
-      <el-button
-        class="mt-6"
-        type="primary"
-        @click="closeDialog"
-      >
-        关闭
-      </el-button>
+        <el-button
+          class="mt-6"
+          type="primary"
+          @click="closeDialog"
+        >
+          关闭
+        </el-button>
      </div>
    </div>

@@ -50,7 +72,7 @@
 </template>

 <script setup>
-import { ref, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'

 // Props
 const props = defineProps({
@@ -66,6 +88,21 @@ const emit = defineEmits(['update:visible'])
 // 响应式数据
 const dialogVisible = ref(false)
 const qrCodeError = ref(false)
+const currentStep = ref('select') // 'select' 或 'business'
+const isMobile = ref(false)
+
+const checkIsMobile = () => {
+  isMobile.value = window.innerWidth <= 640
+}
+
+onMounted(() => {
+  checkIsMobile()
+  window.addEventListener('resize', checkIsMobile)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', checkIsMobile)
+})

 // 监听visible属性变化
 watch(() => props.visible, (newVal) => {
@@ -86,17 +123,107 @@ const handleQrCodeError = () => {
  qrCodeError.value = true
 }

+// 选择商务咨询
+const selectBusinessConsultation = () => {
+  currentStep.value = 'business'
+}
+
+// 选择技术咨询
+const selectTechnicalConsultation = () => {
+  window.location.href = 'https://work.weixin.qq.com/kfid/kfca4ad06d79a6c1b45'
+}
+
 // 关闭对话框
 const closeDialog = () => {
  dialogVisible.value = false
 }
+
+// 处理对话框关闭事件，重置状态
+const handleDialogClose = () => {
+  currentStep.value = 'select'
+}
 </script>

 <style scoped>
-.business-consultation-dialog {
-  border-radius: 12px;
+.business-consultation-dialog :deep(.el-dialog) {
+  border-radius: 20px;
+  overflow: hidden;
 }

+.business-consultation-dialog :deep(.el-dialog__header) {
+  padding: 20px 20px 0;
+}
+
+.business-consultation-dialog :deep(.el-dialog__body) {
+  padding: 20px;
+}
+
+.business-consultation-dialog :deep(.el-dialog__headerbtn) {
+  top: 16px;
+  right: 16px;
+}
+
+.consultation-type-select {
+  padding: 30px 20px 40px;
+}
+
+.consultation-title {
+  text-align: center;
+  font-weight: bold;
+  font-size: 18px;
+  color: #303133;
+  margin: 0 0 30px 0;
+}
+
+.consultation-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+  width: 100%;
+}
+
+.consultation-button {
+  width: 100%;
+  max-width: 400px;
+  height: 50px;
+  font-size: 16px;
+  font-weight: 500;
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: center;
+  justify-content: center;
+}
+
+.consultation-button :deep(.el-button__inner) {
+  width: 100%;
+  text-align: center;
+  justify-content: center;
+}
+
+.business-button {
+  background-color: #409eff;
+  color: white;
+}
+
+.business-button:hover {
+  background-color: #66b1ff;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
+}
+
+.technical-button {
+  background-color: #67c23a;
+  color: white;
+}
+
+.technical-button:hover {
+  background-color: #85ce61;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(103, 194, 58, 0.4);
+}

 .consultation-content {
  text-align: center;
@@ -159,9 +286,11 @@ const closeDialog = () => {

 .qr-code-image {
  width: 200px;
+  height: auto;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  object-fit: contain;
 }

 .qr-code-placeholder {
@@ -197,20 +326,87 @@ const closeDialog = () => {
 }

 /* 响应式设计 */
-@media (max-width: 480px) {
-  .business-consultation-dialog {
-    width: 90% !important;
+@media (max-width: 640px) {
+  .business-consultation-dialog :deep(.el-dialog) {
    margin: 0 auto;
+    border-radius: 14px;
+  }
+
+  .business-consultation-dialog :deep(.el-dialog__header) {
+    padding: 12px 12px 0;
+  }
+
+  .business-consultation-dialog :deep(.el-dialog__body) {
+    padding: 14px 12px 18px;
+  }
+
+  .consultation-type-select {
+    padding: 12px 6px 18px;
+  }
+
+  .consultation-title {
+    font-size: 16px;
+    margin-bottom: 18px;
+  }
+
+  .consultation-buttons {
+    gap: 12px;
+  }
+
+  .consultation-button {
+    max-width: 100%;
+    height: 44px;
+    font-size: 15px;
+    border-radius: 10px;
+  }
+
+  .consultation-content {
+    padding: 10px 4px 16px;
+  }
+
+  .consultation-info h4 {
+    font-size: 16px;
+    margin-bottom: 8px;
+  }
+
+  .consultation-info p {
+    font-size: 13px;
+    margin-bottom: 6px;
+  }
+
+  .benefits-list {
+    margin: 10px 0 16px 0;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 8px;
+    text-align: left;
+  }
+
+  .benefits-list li {
+    font-size: 13px;
+    padding-left: 18px;
+  }
+
+  .qr-code-wrapper {
+    margin-bottom: 10px;
  }

  .qr-code-image,
  .qr-code-placeholder {
-    width: 120px;
-    height: 120px;
+    width: 70vw;
+    max-width: 180px;
  }

-  .consultation-content {
-    padding: 16px 0;
+  .qr-code-image {
+    height: auto;
+  }
+
+  .qr-code-tip {
+    font-size: 12px;
+  }
+
+  .consultation-buttons :deep(.el-button__text) {
+    font-size: 15px;
  }
 }
 </style>
--- a/src/components/common/DanmakuBar.vue
+++ b/src/components/common/DanmakuBar.vue
@@ -0,0 +1,379 @@
+<template>
+  <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-3 flex flex-col" style="min-height: 100px; height: 100px;">
+    <div class="flex items-center justify-between mb-2 pb-2 border-b border-gray-100">
+      <div class="flex items-center">
+        <el-icon size="16" class="mr-2">
+          <TrendCharts />
+        </el-icon>
+        <h3 class="text-sm font-semibold text-gray-800">实时动态</h3>
+      </div>
+    </div>
+    <div ref="danmakuWrapper" class="relative flex-1 overflow-hidden" style="height: 100px;">
+      <div
+        v-for="danmaku in activeDanmakus"
+        :key="danmaku.id"
+        :data-danmaku-id="danmaku.id"
+        :class="['danmaku-item', `danmaku-${danmaku.status}`]"
+        :style="{
+          animationDuration: `${danmaku.duration}ms`
+        }"
+        @animationend="handleAnimationEnd(danmaku.id)"
+      >
+        <div :class="['danmaku-content', `danmaku-content-${danmaku.status}`]">
+          <span :class="['company-name', `company-name-${danmaku.status}`]">{{ danmaku.companyName || '未知企业' }}</span>
+          <span class="separator">·</span>
+          <span :class="['product-name', `product-name-${danmaku.status}`]">{{ danmaku.productName || '未知产品' }}</span>
+          <span class="separator">·</span>
+          <span class="time-ago">{{ danmaku.timeAgo }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { apiCallApi } from '@/api'
+import { TrendCharts } from '@element-plus/icons-vue'
+import { onMounted, onUnmounted, ref } from 'vue'
+  
+  const props = defineProps({
+    refreshInterval: {
+      type: Number,
+      default: 3000 // 默认3秒刷新一次
+    },
+    danmakuSpeed: {
+      type: Number,
+      default: 15000 // 弹幕滚动速度（毫秒），25秒让弹幕显示更久
+    }
+  })
+  
+  // 固定配置
+  const FETCH_PAGE_SIZE = 8// 每次获取的记录数
+  const BASE_EMIT_INTERVAL = 5500// 基础5秒，避免弹幕重叠
+  const RANDOM_EMIT_RANGE = 2000   // 0-1秒随机范围
+  
+  const enabled = ref(true)
+  const danmakuWrapper = ref(null)
+  const activeDanmakus = ref([]) // 当前正在显示的弹幕
+  const pendingQueue = ref([]) // 待处理的弹幕队列
+  const lastFetchTime = ref(null)
+  const fetchTimer = ref(null)
+  const processedIds = ref(new Set()) // 已处理的记录ID，确保每条数据只显示一次
+  const emitTimer = ref(null) // 弹幕发射定时器
+  const timeUpdateTimer = ref(null) // 时间更新定时器
+  
+  // 计算时间差（多少分钟前）
+  const calculateTimeAgo = (timeStr) => {
+    if (!timeStr) return '刚刚'
+    
+    try {
+      const time = new Date(timeStr)
+      const now = new Date()
+      const diff = Math.floor((now - time) / 1000 / 60) // 分钟差
+      
+      if (diff < 1) return '刚刚'
+      if (diff < 60) return `${diff}分钟前`
+      
+      const hours = Math.floor(diff / 60)
+      if (hours < 24) return `${hours}小时前`
+      
+      const days = Math.floor(hours / 24)
+      return `${days}天前`
+    } catch (e) {
+      return '刚刚'
+    }
+  }
+  
+  // 获取最新API调用记录
+  const fetchLatestApiCalls = async () => {
+    if (!enabled.value) return
+    
+    try {
+      const params = {
+        page: 1,
+        page_size: FETCH_PAGE_SIZE,
+        sort_by: 'created_at',
+        sort_order: 'desc'
+      }
+      
+      // 如果上次获取过数据，只获取更新的记录
+      if (lastFetchTime.value) {
+        const now = new Date()
+        const oneMinuteAgo = new Date(now.getTime() - 60000) // 1分钟前
+        params.start_time = oneMinuteAgo.toISOString().replace('T', ' ').substring(0, 19)
+      }
+      
+      const response = await apiCallApi.getAdminApiCalls(params)
+      
+      // 处理响应数据，兼容不同的响应格式
+      let items = []
+      if (response && response.data) {
+        if (response.data.items) {
+          items = response.data.items
+        } else if (Array.isArray(response.data)) {
+          items = response.data
+        }
+      }
+      
+      if (items.length > 0) {
+        // 过滤已处理过的记录，确保每条数据只显示一次
+        const newItems = items.filter(item => {
+          if (processedIds.value.has(item.id)) {
+            return false
+          }
+          processedIds.value.add(item.id)
+          return true
+        })
+        
+        // 按时间顺序排序（从旧到新），确保按顺序显示
+        newItems.sort((a, b) => {
+          const timeA = new Date(a.created_at || a.start_at || 0)
+          const timeB = new Date(b.created_at || b.start_at || 0)
+          return timeA - timeB
+        })
+        
+        // 将新记录按顺序添加到待处理队列
+        newItems.forEach(item => {
+          addToPendingQueue(item)
+        })
+        
+        lastFetchTime.value = new Date()
+      }
+    } catch (error) {
+      console.error('获取API调用记录失败:', error)
+    }
+  }
+  
+  // 添加到待处理队列
+  const addToPendingQueue = (item) => {
+    pendingQueue.value.push(item)
+    
+    // 限制队列大小，避免内存溢出（最多保留150条）
+    if (pendingQueue.value.length > 150) {
+      pendingQueue.value.shift() // 移除最旧的一条
+    }
+  }
+  
+  // 发射弹幕（按固定间隔连续发射，允许多条同时显示）
+  const emitDanmaku = () => {
+    if (!enabled.value) {
+      emitTimer.value = null
+      return
+    }
+    
+    // 从队列取出一条弹幕
+    if (pendingQueue.value.length === 0) {
+      // 队列为空，等待一段时间后重试
+      emitTimer.value = setTimeout(() => {
+        emitDanmaku()
+      }, 1000)
+      return
+    }
+    
+    const item = pendingQueue.value.shift()
+    if (!item) {
+      emitTimer.value = setTimeout(() => {
+        emitDanmaku()
+      }, 1000)
+      return
+    }
+    
+    // 创建弹幕对象（使用唯一ID确保不重复）
+    const danmaku = {
+      id: `danmaku-${item.id}-${Date.now()}-${Math.random()}`,
+      companyName: item.company_name || item.user?.company_name || '未知企业',
+      productName: item.product_name || '未知产品',
+      status: item.status || 'pending',
+      startAt: item.start_at || item.created_at,
+      timeAgo: calculateTimeAgo(item.start_at || item.created_at),
+      duration: props.danmakuSpeed
+    }
+    
+    // 添加到活跃弹幕列表（立即开始动画）
+    activeDanmakus.value.push(danmaku)
+    
+    // 安排下一条弹幕的发射（随机间隔：5s + 0-1s）
+    const interval = BASE_EMIT_INTERVAL + Math.random() * RANDOM_EMIT_RANGE
+    emitTimer.value = setTimeout(() => {
+      emitDanmaku()
+    }, interval)
+  }
+
+  // 启动弹幕发射系统
+  const startEmissionSystem = () => {
+    if (emitTimer.value) {
+      clearTimeout(emitTimer.value)
+    }
+    emitDanmaku() // 开始第一次发射
+  }
+  
+  // 处理动画结束事件（弹幕移出屏幕时移除）
+  const handleAnimationEnd = (id) => {
+    const index = activeDanmakus.value.findIndex(d => d.id === id)
+    if (index > -1) {
+      activeDanmakus.value.splice(index, 1)
+    }
+  }
+  
+  // 更新所有弹幕的时间显示
+  const updateTimeAgo = () => {
+    activeDanmakus.value.forEach(danmaku => {
+      if (danmaku.startAt) {
+        danmaku.timeAgo = calculateTimeAgo(danmaku.startAt)
+      }
+    })
+  }
+  
+  // 开始获取数据
+  const startFetching = () => {
+    // 立即获取一次
+    fetchLatestApiCalls()
+    
+    // 设置定时器定期获取数据
+    if (fetchTimer.value) {
+      clearInterval(fetchTimer.value)
+    }
+    fetchTimer.value = setInterval(() => {
+      fetchLatestApiCalls()
+    }, props.refreshInterval)
+    
+    // 启动弹幕发射系统
+    startEmissionSystem()
+    
+    // 定时更新"多少分钟前"
+    if (timeUpdateTimer.value) {
+      clearInterval(timeUpdateTimer.value)
+    }
+    timeUpdateTimer.value = setInterval(() => {
+      if (enabled.value) {
+        updateTimeAgo()
+      }
+    }, 60000) // 每分钟更新一次时间显示
+  }
+  
+  // 停止获取数据
+  const stopFetching = () => {
+    if (fetchTimer.value) {
+      clearInterval(fetchTimer.value)
+      fetchTimer.value = null
+    }
+    if (emitTimer.value) {
+      clearTimeout(emitTimer.value)
+      emitTimer.value = null
+    }
+    if (timeUpdateTimer.value) {
+      clearInterval(timeUpdateTimer.value)
+      timeUpdateTimer.value = null
+    }
+  }
+  
+  onMounted(() => {
+    if (enabled.value) {
+      startFetching()
+    }
+  })
+  
+  onUnmounted(() => {
+    stopFetching()
+  })
+  </script>
+
+<style scoped>
+.danmaku-item {
+  position: absolute;
+  right: 0;
+  white-space: nowrap;
+  animation: danmaku-scroll linear forwards;
+  pointer-events: none;
+  will-change: transform;
+  top: 50%;
+}
+
+@keyframes danmaku-scroll {
+  from {
+    transform: translate(100%, -50%);
+    opacity: 1;
+  }
+  to {
+    transform: translate(-200%, -50%);
+    opacity: 1;
+  }
+}
+
+.danmaku-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  background: linear-gradient(to right, #eff6ff, #faf5ff);
+  border: 1px solid #bfdbfe;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  backdrop-filter: blur(4px);
+}
+
+.danmaku-content-success {
+  background: linear-gradient(to right, #f0fdf4, #ecfdf5);
+  border-color: #86efac;
+}
+
+.danmaku-content-failed {
+  background: linear-gradient(to right, #fef2f2, #fff1f2);
+  border-color: #fca5a5;
+}
+
+.danmaku-content-pending {
+  background: linear-gradient(to right, #fefce8, #fffbeb);
+  border-color: #fde047;
+}
+
+.company-name {
+  color: #1d4ed8;
+  font-weight: 600;
+}
+
+.company-name-success {
+  color: #15803d;
+}
+
+.company-name-failed {
+  color: #dc2626;
+}
+
+.company-name-pending {
+  color: #ca8a04;
+}
+
+.product-name {
+  color: #7c3aed;
+}
+
+.product-name-success {
+  color: #059669;
+}
+
+.product-name-failed {
+  color: #e11d48;
+}
+
+.product-name-pending {
+  color: #d97706;
+}
+
+.product-id {
+  color: #4b5563;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.75rem;
+}
+
+.separator {
+  color: #9ca3af;
+}
+
+.time-ago {
+  color: #6b7280;
+  font-style: italic;
+}
+</style>
+
--- a/src/components/common/ExportDialog.vue
+++ b/src/components/common/ExportDialog.vue
@@ -2,8 +2,9 @@
  <el-dialog
    v-model="visible"
    :title="title"
-    width="600px"
+    :width="isMobile ? '90%' : '600px'"
    :close-on-click-modal="false"
+    class="export-dialog"
  >
    <div class="space-y-4">
      <!-- 企业选择 -->
@@ -119,12 +120,13 @@
    </div>

    <template #footer>
-      <div class="flex justify-end gap-3">
-        <el-button @click="handleCancel">取消</el-button>
+      <div :class="['flex justify-end gap-3', isMobile ? 'flex-col' : '']">
+        <el-button @click="handleCancel" :class="isMobile ? 'w-full' : ''">取消</el-button>
        <el-button
          type="primary"
          :loading="loading"
          @click="handleConfirm"
+          :class="isMobile ? 'w-full' : ''"
        >
          确认导出
        </el-button>
@@ -135,8 +137,12 @@

 <script setup>
 import { productApi, userApi } from '@/api'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { reactive, ref, watch } from 'vue'

+// 移动端检测
+const { isMobile } = useMobileTable()
+
 // Props
 const props = defineProps({
  modelValue: {
@@ -302,3 +308,14 @@ defineExpose({
 <style scoped>
 /* 样式保持简洁，主要依赖Tailwind CSS */
 </style>
+
+<style>
+/* 导出弹窗移动端优化 */
+@media (max-width: 768px) {
+  .export-dialog :deep(.el-dialog__body) {
+    padding: 16px;
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+}
+</style>
--- a/src/components/common/FloatingCustomerService.vue
+++ b/src/components/common/FloatingCustomerService.vue
@@ -2,7 +2,7 @@
  <div class="floating-customer-service" @click="openConsultation">
    <div class="floating-button">
      <ChatBubbleLeftRightIcon class="h-5 w-5" />
-      <span class="button-text">联系客服</span>
+      <span class="button-text">在线客服</span>
    </div>

    <!-- 商务洽谈弹窗 -->
@@ -11,9 +11,9 @@
 </template>

 <script setup>
-import { ChatBubbleLeftRightIcon } from '@heroicons/vue/24/outline'
-import { ref } from 'vue'
-import BusinessConsultationDialog from './BusinessConsultationDialog.vue'
+import { ChatBubbleLeftRightIcon } from '@heroicons/vue/24/outline';
+import { ref } from 'vue';
+import BusinessConsultationDialog from './BusinessConsultationDialog.vue';

 // 响应式数据
 const consultationVisible = ref(false)
--- a/src/components/common/ListPageLayout.vue
+++ b/src/components/common/ListPageLayout.vue
@@ -38,6 +38,9 @@
 </template>

 <script setup>
+import { useMobileTable } from '@/composables/useMobileTable'
+import { watch, nextTick, onMounted } from 'vue'
+
 defineProps({
  title: {
    type: String,
@@ -48,6 +51,23 @@ defineProps({
    default: ''
  }
 })
+
+// 移动端表格优化
+const { isMobile, removeFixedColumns } = useMobileTable()
+
+// 监听表格内容变化，重新应用优化
+watch(() => isMobile.value, () => {
+  nextTick(() => {
+    removeFixedColumns()
+  })
+})
+
+// 在组件挂载后应用优化
+onMounted(() => {
+  nextTick(() => {
+    removeFixedColumns()
+  })
+})
 </script>

 <style scoped>
--- a/src/components/common/ResponsiveActionColumn.vue
+++ b/src/components/common/ResponsiveActionColumn.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="responsive-action-column">
+    <!-- 桌面端：显示所有按钮 -->
+    <div v-if="!isMobile" class="action-buttons-desktop">
+      <slot />
+    </div>
+
+    <!-- 移动端：主要操作按钮 + 更多操作下拉菜单 -->
+    <div v-else class="action-buttons-mobile">
+      <!-- 主要操作按钮（最多显示2个） -->
+      <template v-for="(action, index) in primaryActions" :key="index">
+        <el-button
+          :type="action.type || 'default'"
+          :size="action.size || 'small'"
+          @click="action.handler"
+        >
+          {{ action.label }}
+        </el-button>
+      </template>
+
+      <!-- 更多操作下拉菜单 -->
+      <el-dropdown v-if="moreActions.length > 0" @command="handleCommand" trigger="click">
+        <el-button type="info" size="small">
+          更多
+          <el-icon class="el-icon--right">
+            <ArrowDown />
+          </el-icon>
+        </el-button>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item
+              v-for="(action, index) in moreActions"
+              :key="index"
+              :command="action"
+            >
+              <el-icon v-if="action.icon" class="dropdown-item-icon">
+                <component :is="action.icon" />
+              </el-icon>
+              {{ action.label }}
+            </el-dropdown-item>
+          </template>
+        </el-dropdown>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useSlots } from 'vue'
+import { useMobileTable } from '@/composables/useMobileTable'
+import { ArrowDown } from '@element-plus/icons-vue'
+
+const props = defineProps({
+  // 主要操作按钮数量（移动端显示）
+  primaryCount: {
+    type: Number,
+    default: 2
+  },
+  // 操作按钮配置（如果使用配置方式）
+  actions: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const { isMobile } = useMobileTable()
+const slots = useSlots()
+
+// 从插槽中提取按钮信息（如果使用插槽方式）
+const extractActionsFromSlots = () => {
+  if (!slots.default) return []
+  
+  const actions = []
+  // 这里需要从插槽中解析按钮，但 Vue 3 的插槽是渲染函数，比较难解析
+  // 所以建议使用 actions prop 方式
+  return actions
+}
+
+// 计算主要操作和更多操作
+const primaryActions = computed(() => {
+  if (props.actions.length > 0) {
+    return props.actions.slice(0, props.primaryCount)
+  }
+  return []
+})
+
+const moreActions = computed(() => {
+  if (props.actions.length > 0) {
+    return props.actions.slice(props.primaryCount)
+  }
+  return []
+})
+
+// 处理下拉菜单命令
+const handleCommand = (action) => {
+  if (action && action.handler) {
+    action.handler()
+  }
+}
+</script>
+
+<style scoped>
+.responsive-action-column {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.action-buttons-desktop {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.action-buttons-mobile {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.dropdown-item-icon {
+  margin-right: 6px;
+  font-size: 14px;
+}
+
+/* 移动端按钮更紧凑 */
+@media (max-width: 768px) {
+  .action-buttons-mobile .el-button {
+    padding: 6px 10px;
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .action-buttons-mobile .el-button {
+    padding: 4px 8px;
+    font-size: 11px;
+  }
+}
+</style>
+
--- a/src/components/layout/AppHeader.vue
+++ b/src/components/layout/AppHeader.vue
@@ -62,6 +62,12 @@
                </el-icon>
                个人中心
              </el-dropdown-item>
+              <el-dropdown-item command="home">
+                <el-icon class="dropdown-item-icon">
+                  <Home />
+                </el-icon>
+                返回官网
+              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <el-icon class="dropdown-item-icon">
                  <Switch />
@@ -80,11 +86,11 @@
 import { useAppStore } from '@/stores/app'
 import { useUserStore } from '@/stores/user'
 import {
-    ChevronDownIcon as ArrowDown,
-    BellIcon as Bell,
-    Bars3Icon as Menu,
-    ArrowRightOnRectangleIcon as Switch,
-    UserIcon as User
+  ChevronDownIcon as ArrowDown,
+  HomeIcon as Home,
+  Bars3Icon as Menu,
+  ArrowRightOnRectangleIcon as Switch,
+  UserIcon as User
 } from '@heroicons/vue/24/outline'

 const props = defineProps({
--- a/src/components/layout/AppSidebar.vue
+++ b/src/components/layout/AppSidebar.vue
@@ -27,6 +27,15 @@
          </el-sub-menu>
        </template>
      </el-menu>
+      <!-- 返回官网链接 -->
+      <div class="home-link-container">
+        <a href="https://www.tianyuanapi.com/" target="_blank" rel="noopener" class="home-link" @click="handleMenuSelect">
+          <el-icon class="menu-icon">
+            <HomeIcon />
+          </el-icon>
+          <span class="menu-title">返回官网</span>
+        </a>
+      </div>
    </div>
  </el-aside>
 </template>
@@ -34,6 +43,8 @@
 <script setup>
 import { useAppStore } from '@/stores/app'
 import { useUserStore } from '@/stores/user'
+import { HomeIcon } from '@heroicons/vue/24/outline'
+import { onMounted, onUnmounted, watch } from 'vue'
 import { useRouter } from 'vue-router'

 const props = defineProps({
@@ -51,6 +62,7 @@ const props = defineProps({
 const appStore = useAppStore()
 const userStore = useUserStore()
 const router = useRouter()
+let bodyLockClassApplied = false

 // 使用ref来控制菜单展开状态
 const openeds = ref([])
@@ -117,6 +129,36 @@ const handleMenuSelect = () => {
    appStore.closeMobileSidebar()
  }
 }
+
+// 当移动端侧边栏打开时，锁定页面点击与滚动，确保其他区域点击无效
+const toggleBodyLock = (locked) => {
+  const body = document.body
+  if (locked) {
+    if (!bodyLockClassApplied) {
+      body.classList.add('sidebar-locked')
+      bodyLockClassApplied = true
+    }
+  } else if (bodyLockClassApplied) {
+    body.classList.remove('sidebar-locked')
+    bodyLockClassApplied = false
+  }
+}
+
+onMounted(() => {
+  toggleBodyLock(appStore.isMobile && appStore.mobileSidebarOpen)
+})
+
+onUnmounted(() => {
+  toggleBodyLock(false)
+})
+
+watch(
+  () => [appStore.isMobile, appStore.mobileSidebarOpen],
+  ([isMobile, open]) => {
+    toggleBodyLock(isMobile && open)
+  },
+  { immediate: true }
+)
 </script>

 <style scoped>
@@ -133,6 +175,7 @@ const handleMenuSelect = () => {
  display: flex;
  flex-direction: column;
  position: relative;
+  width: 100%;
  z-index: 1001;
 }

@@ -140,10 +183,49 @@ const handleMenuSelect = () => {
  border: none;
  height: 100%;
  flex: 1 1 0%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 100%;
 }

-.sidebar-menu:not(.el-menu--collapse) {
-  width: 240px;
+/* 返回官网链接样式 */
+.home-link-container {
+  padding: 8px;
+  border-top: 1px solid rgba(226, 232, 240, 0.6);
+  margin-top: auto;
+  flex-shrink: 0;
+}
+
+.home-link {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  height: 50px;
+  line-height: 50px;
+  margin: 4px 8px;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  border: 2px solid transparent;
+  border-radius: 48px;
+  text-decoration: none;
+  color: #1e293b;
+  cursor: pointer;
+}
+
+.home-link:hover {
+  background-color: #f5f7fa;
+  color: #409eff;
+}
+
+.home-link .menu-icon {
+  font-size: 18px;
+  margin-right: 12px;
+  width: 20px;
+  height: 20px;
+}
+
+.home-link .menu-title {
+  font-size: 14px;
+  font-weight: 500;
 }

 .menu-item {
@@ -195,6 +277,21 @@ const handleMenuSelect = () => {
  margin-right: 0;
 }

+/* 折叠状态下的返回官网链接 */
+.el-menu--collapse ~ .home-link-container .home-link {
+  justify-content: center;
+  padding: 12px;
+  margin: 4px 4px;
+}
+
+.el-menu--collapse ~ .home-link-container .home-link .menu-icon {
+  margin-right: 0;
+}
+
+.el-menu--collapse ~ .home-link-container .home-link .menu-title {
+  display: none;
+}
+
 /* 移动端样式 */
 .mobile-sidebar {
  position: fixed;
@@ -204,6 +301,8 @@ const handleMenuSelect = () => {
  height: calc(100vh - 60px);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
+  overflow-y: auto;
+  overflow-x: hidden;
 }

 .mobile-sidebar.sidebar-open {
@@ -216,20 +315,21 @@ const handleMenuSelect = () => {
  left: 0;
  right: 0;
  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(255, 255, 255, 0.65); /* 保持浅色，不要黑色遮罩 */
+  backdrop-filter: blur(2px);
  z-index: 999;
 }

 /* 响应式设计 */
@media (max-width: 768px) {
-  .sidebar-menu:not(.el-menu--collapse) {
-    width: 240px;
+  .sidebar-menu {
+    width: 100%;
  }
 }

@media (max-width: 480px) {
-  .sidebar-menu:not(.el-menu--collapse) {
-    width: 200px;
+  .sidebar-menu {
+    width: 100%;
  }

  .menu-item {
@@ -246,6 +346,34 @@ const handleMenuSelect = () => {
  .menu-title {
    font-size: 13px;
  }
+
+  .home-link {
+    height: 44px;
+    line-height: 44px;
+    margin: 2px 4px;
+    padding: 10px 12px;
+  }
+
+  .home-link .menu-icon {
+    font-size: 16px;
+    margin-right: 8px;
+  }
+
+  .home-link .menu-title {
+    font-size: 13px;
+  }
+}
+
+:global(body.sidebar-locked) {
+  overflow: hidden;
+}
+
+:global(body.sidebar-locked #app) {
+  pointer-events: none;
+}
+
+:global(body.sidebar-locked .app-sidebar) {
+  pointer-events: auto;
 }

 /* Element Plus 菜单样式覆盖 */
--- a/src/components/product/ProductCard.vue
+++ b/src/components/product/ProductCard.vue
@@ -73,12 +73,12 @@
      <!-- 已订阅的产品 -->
      <el-button
        v-else-if="isSubscribed"
-        type="info"
-        disabled
-        class="action-btn subscribed-btn"
+        type="danger"
+        @click="handleCancelSubscribe"
+        class="action-btn cancel-subscribe-btn"
        size="small"
      >
-        已订阅
+        取消订阅
      </el-button>

      <!-- 可订阅的产品 -->
@@ -104,10 +104,14 @@ const props = defineProps({
  isSubscribed: {
    type: Boolean,
    default: false
+  },
+  subscription: {
+    type: Object,
+    default: null
  }
 })

-const emit = defineEmits(['view-detail', 'subscribe'])
+const emit = defineEmits(['view-detail', 'subscribe', 'cancel-subscribe'])

 // 格式化价格
 const formatPrice = (price) => {
@@ -134,6 +138,11 @@ const handleViewDetail = () => {
 const handleSubscribe = () => {
  emit('subscribe', props.product)
 }
+
+// 取消订阅
+const handleCancelSubscribe = () => {
+  emit('cancel-subscribe', props.product)
+}
 </script>

 <style scoped>
@@ -357,19 +366,17 @@ const handleSubscribe = () => {
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
 }

-.subscribed-btn {
-  background: rgba(100, 116, 139, 0.1);
-  border-color: rgba(100, 116, 139, 0.2);
-  color: #64748b;
-  cursor: not-allowed;
+.cancel-subscribe-btn {
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  border-color: #ef4444;
+  color: white;
+  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
 }

-.subscribed-btn:hover {
-  background: rgba(100, 116, 139, 0.1);
-  border-color: rgba(100, 116, 139, 0.2);
-  color: #64748b;
-  transform: none;
-  box-shadow: none;
+.cancel-subscribe-btn:hover {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+  border-color: #dc2626;
+  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
 }

 .disabled-btn {
--- a/src/composables/useMobileTable.js
+++ b/src/composables/useMobileTable.js
@@ -0,0 +1,101 @@
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+
+/**
+ * 移动端表格优化 composable
+ * 用于在移动端移除表格固定列，优化显示效果
+ */
+export function useMobileTable() {
+  const isMobile = ref(false)
+  const isTablet = ref(false)
+
+  // 检测屏幕尺寸
+  const checkScreenSize = () => {
+    if (typeof window === 'undefined') return
+    const width = window.innerWidth
+    isMobile.value = width < 768
+    isTablet.value = width >= 768 && width < 1024
+  }
+
+  // 移除表格固定列
+  const removeFixedColumns = () => {
+    if (typeof window === 'undefined') return
+    
+    // 只在移动端执行
+    if (!isMobile.value) {
+      // 桌面端恢复固定列样式
+      const tables = document.querySelectorAll('.list-page-container .el-table')
+      tables.forEach((table) => {
+        const fixedElements = table.querySelectorAll('.el-table__fixed, .el-table__fixed-right')
+        fixedElements.forEach((el) => {
+          el.style.position = ''
+          el.style.boxShadow = ''
+          el.style.backgroundColor = ''
+        })
+      })
+      return
+    }
+
+    // 使用 nextTick 确保 DOM 已更新
+    nextTick(() => {
+      setTimeout(() => {
+        const tables = document.querySelectorAll('.list-page-container .el-table')
+        tables.forEach((table) => {
+          // 移除固定列元素
+          const fixedElements = table.querySelectorAll('.el-table__fixed, .el-table__fixed-right')
+          fixedElements.forEach((el) => {
+            el.style.position = 'static'
+            el.style.boxShadow = 'none'
+            el.style.backgroundColor = 'transparent'
+            el.style.zIndex = 'auto'
+          })
+
+          // 移除固定列的表头、表体、表尾包装器
+          const fixedWrappers = table.querySelectorAll(
+            '.el-table__fixed-header-wrapper, .el-table__fixed-body-wrapper, .el-table__fixed-footer-wrapper'
+          )
+          fixedWrappers.forEach((el) => {
+            el.style.position = 'static'
+          })
+
+          // 移除固定列的遮罩层
+          const fixedPatch = table.querySelectorAll('.el-table__fixed-right-patch, .el-table__fixed-patch')
+          fixedPatch.forEach((el) => {
+            el.style.display = 'none'
+          })
+        })
+      }, 150)
+    })
+  }
+
+  // 监听窗口大小变化
+  const handleResize = () => {
+    const wasMobile = isMobile.value
+    checkScreenSize()
+    // 如果移动状态发生变化，重新应用优化
+    if (wasMobile !== isMobile.value) {
+      removeFixedColumns()
+    }
+  }
+
+  onMounted(() => {
+    checkScreenSize()
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', handleResize)
+      // 初始移除固定列
+      removeFixedColumns()
+    }
+  })
+
+  onUnmounted(() => {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('resize', handleResize)
+    }
+  })
+
+  return {
+    isMobile,
+    isTablet,
+    removeFixedColumns
+  }
+}
+
--- a/src/constants/menu.js
+++ b/src/constants/menu.js
@@ -5,6 +5,7 @@ import {
  CreditCardIcon as CreditCard,
  CubeIcon as Cube,
  DocumentTextIcon as DocumentText,
+  MegaphoneIcon as Megaphone,
  PresentationChartLineIcon as PresentationChartLine,
  Cog6ToothIcon as Setting,
  ShieldCheckIcon as ShieldCheck,
@@ -83,6 +84,11 @@ export const adminMenuItems = [
    path: '/admin/articles',
    icon: DocumentText
  },
+  {
+    name: '公告管理',
+    path: '/admin/announcements',
+    icon: Megaphone
+  },
  {
    name: '系统统计',
    path: '/admin/statistics',
@@ -114,6 +120,7 @@ export const getUserAccessibleMenuItems = (userType = 'user') => {
        { name: '分类管理', path: '/admin/categories', icon: Tag },
        { name: '订阅管理', path: '/admin/subscriptions', icon: ShoppingCart },
        { name: '文章管理', path: '/admin/articles', icon: DocumentText },
+        { name: '公告管理', path: '/admin/announcements', icon: Megaphone },
        { name: '调用记录', path: '/admin/usage', icon: Clipboard },
        { name: '消费记录', path: '/admin/transactions', icon: Clipboard },
        { name: '充值记录', path: '/admin/recharge-records', icon: CreditCard },
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -16,10 +16,13 @@
      />
    </el-header>
    <el-container>
-      <el-aside width="240px">
+      <!-- 桌面端显示侧边栏，移动端隐藏（移动端使用抽屉式侧边栏） -->
+      <el-aside v-if="!appStore.isMobile" width="240px">
        <AppSidebar :menu-items="currentMenuItems" :theme="sidebarTheme" />
      </el-aside>
-      <el-main>
+      <!-- 移动端也渲染侧边栏，但使用固定定位的抽屉式效果 -->
+      <AppSidebar v-if="appStore.isMobile" :menu-items="currentMenuItems" :theme="sidebarTheme" />
+      <el-main :class="{ 'mobile-main': appStore.isMobile }">
        <div class="content-wrapper">
          <!-- 企业认证提示 - 根据当前页面路径显示 -->
          <CertificationNotice
@@ -50,10 +53,12 @@ import AppHeader from '@/components/layout/AppHeader.vue'
 import AppSidebar from '@/components/layout/AppSidebar.vue'
 import NotificationPanel from '@/components/layout/NotificationPanel.vue'
 import { getCurrentPageCertificationConfig, getUserAccessibleMenuItems } from '@/constants/menu'
+import { useAppStore } from '@/stores/app'
 import { useUserStore } from '@/stores/user'
 import { ElMessageBox } from 'element-plus'

 const router = useRouter()
+const appStore = useAppStore()
 const userStore = useUserStore()

 const showNotifications = ref(false)
@@ -133,6 +138,9 @@ const shouldShowCertificationNotice = computed(() => {
 // 处理用户菜单命令
 const handleUserCommand = async (command) => {
  switch (command) {
+    case 'home':
+      window.open('https://www.tianyuanapi.com/', '_blank', 'noopener')
+      break
    case 'profile':
      router.push('/profile')
      break
@@ -192,6 +200,13 @@ const handleUserCommand = async (command) => {
 .el-main {
  background: transparent;
  padding: 0;
+  transition: margin-left 0.3s ease;
+}
+
+/* 移动端内容区域全宽显示 */
+.mobile-main {
+  width: 100% !important;
+  margin-left: 0 !important;
 }

 /* 性能优化：为低端设备提供简化样式 */
@@ -199,6 +214,11 @@ const handleUserCommand = async (command) => {
  .content-wrapper {
    padding: 0 12px 12px 12px;
  }
+
+  /* 确保移动端容器全宽 */
+  .el-container {
+    width: 100%;
+  }
 }

 /* 性能优化：减少动画效果 */
--- a/src/pages/admin/announcements/components/AnnouncementDetailDialog.vue
+++ b/src/pages/admin/announcements/components/AnnouncementDetailDialog.vue
@@ -0,0 +1,167 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    title="公告详情"
+    width="70%"
+    :close-on-click-modal="false"
+    @open="handleDialogOpen"
+    v-loading="loading"
+  >
+    <div v-if="announcement" class="space-y-6">
+      <!-- 基本信息 -->
+      <div class="bg-gray-50 p-4 rounded-lg">
+        <h3 class="text-lg font-medium text-gray-900 mb-4">基本信息</h3>
+
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="公告标题">
+            <span class="font-medium">{{ announcement.title }}</span>
+          </el-descriptions-item>
+
+          <el-descriptions-item label="公告状态">
+            <el-tag :type="getStatusType(announcement.status, announcement.scheduled_at)">
+              {{ getStatusText(announcement.status, announcement.scheduled_at) }}
+            </el-tag>
+          </el-descriptions-item>
+
+          <el-descriptions-item label="创建时间">
+            {{ formatDate(announcement.created_at) }}
+          </el-descriptions-item>
+
+          <el-descriptions-item label="更新时间">
+            {{ formatDate(announcement.updated_at) }}
+          </el-descriptions-item>
+
+          <el-descriptions-item v-if="announcement.scheduled_at" label="定时发布时间">
+            {{ formatDate(announcement.scheduled_at) }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+
+      <!-- 公告内容 -->
+      <div class="bg-gray-50 p-4 rounded-lg">
+        <h3 class="text-lg font-medium text-gray-900 mb-4">公告内容</h3>
+        <div class="prose max-w-none" v-html="announcement.content"></div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { announcementApi } from '@/api';
+import { ElMessage } from 'element-plus';
+import { computed, ref } from 'vue';
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  announcement: {
+    type: Object,
+    default: null
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue'])
+
+// 响应式数据
+const loading = ref(false)
+const announcementDetail = ref(null)
+
+// 计算属性
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+const announcement = computed(() => announcementDetail.value || props.announcement)
+
+// 获取公告详情
+const fetchAnnouncementDetail = async (announcementId) => {
+  if (!announcementId) return
+
+  loading.value = true
+  try {
+    const response = await announcementApi.getAnnouncementDetail(announcementId)
+    announcementDetail.value = response.data
+  } catch (error) {
+    ElMessage.error('获取公告详情失败')
+    console.error('获取公告详情失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 对话框打开时获取详情
+const handleDialogOpen = () => {
+  if (props.announcement?.id && !announcementDetail.value) {
+    fetchAnnouncementDetail(props.announcement.id)
+  }
+}
+
+// 状态类型映射
+const getStatusType = (status, scheduledAt) => {
+  if (status === 'draft' && scheduledAt) {
+    return 'warning'
+  }
+  const statusMap = {
+    draft: 'info',
+    published: 'success',
+    archived: 'warning'
+  }
+  return statusMap[status] || 'info'
+}
+
+// 状态文本映射
+const getStatusText = (status, scheduledAt) => {
+  if (status === 'draft' && scheduledAt) {
+    return '定时发布'
+  }
+  const statusMap = {
+    draft: '草稿',
+    published: '已发布',
+    archived: '已归档'
+  }
+  return statusMap[status] || status
+}
+
+// 格式化日期
+const formatDate = (dateString) => {
+  if (!dateString) return '-'
+  return new Date(dateString).toLocaleString('zh-CN')
+}
+</script>
+
+<style scoped>
+:deep(.prose) {
+  color: #374151;
+  line-height: 1.75;
+}
+
+:deep(.prose p) {
+  margin-bottom: 1rem;
+}
+
+:deep(.prose h1),
+:deep(.prose h2),
+:deep(.prose h3) {
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  font-weight: 600;
+}
+
+:deep(.prose ul),
+:deep(.prose ol) {
+  margin-left: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+:deep(.prose img) {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+}
+</style>
+
--- a/src/pages/admin/announcements/components/AnnouncementEditDialog.vue
+++ b/src/pages/admin/announcements/components/AnnouncementEditDialog.vue
@@ -0,0 +1,306 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="isEdit ? '编辑公告' : '新增公告'"
+    :width="isMobile ? '95%' : '80%'"
+    :close-on-click-modal="false"
+    @open="handleDialogOpen"
+    v-loading="loading"
+    @close="handleClose"
+    class="announcement-edit-dialog"
+  >
+    <el-form ref="formRef" :model="form" :rules="rules" :label-width="isMobile ? '80px' : '100px'" class="space-y-6">
+      <!-- 基本信息 -->
+      <div class="bg-gray-50 p-4 rounded-lg">
+        <h3 class="text-lg font-medium text-gray-900 mb-4">基本信息</h3>
+
+        <el-form-item label="公告标题" prop="title">
+          <el-input v-model="form.title" placeholder="请输入公告标题" maxlength="200" show-word-limit />
+        </el-form-item>
+      </div>
+
+      <!-- 公告内容 -->
+      <div class="bg-gray-50 p-4 rounded-lg">
+        <h3 class="text-lg font-medium text-gray-900 mb-4">公告内容</h3>
+
+        <el-form-item label="公告内容" prop="content">
+          <Editor 
+            style="width: 100%;" 
+            v-model="form.content" 
+            :init="editorInitConfig"
+            tinymceScriptSrc="https://cdn.jsdelivr.net/npm/tinymce@7.9.1/tinymce.min.js" 
+          />
+        </el-form-item>
+      </div>
+    </el-form>
+
+    <template #footer>
+      <div :class="['flex', isMobile ? 'flex-col gap-2' : 'justify-end space-x-3']">
+        <el-button :size="isMobile ? 'default' : 'default'" :class="isMobile ? 'w-full' : ''" @click="handleClose">取消</el-button>
+        <el-button :size="isMobile ? 'default' : 'default'" :class="isMobile ? 'w-full' : ''" type="primary" :loading="loading" @click="handleSubmit">
+          {{ isEdit ? '更新' : '创建' }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { announcementApi } from '@/api';
+import { useMobileTable } from '@/composables/useMobileTable';
+import Editor from '@tinymce/tinymce-vue';
+import { ElMessage } from 'element-plus';
+import { computed, reactive, ref, watch } from 'vue';
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  announcement: {
+    type: Object,
+    default: null
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'success'])
+
+// 移动端适配
+const { isMobile, isTablet } = useMobileTable()
+
+// 响应式数据
+const formRef = ref(null)
+const loading = ref(false)
+const announcementDetail = ref(null)
+
+// 表单数据
+const form = reactive({
+  title: '',
+  content: ''
+})
+
+// 表单验证规则
+const rules = {
+  title: [
+    { required: true, message: '请输入公告标题', trigger: 'blur' },
+    { min: 1, max: 200, message: '标题长度在 1 到 200 个字符', trigger: 'blur' }
+  ],
+  content: [
+    { required: true, message: '请输入公告内容', trigger: 'blur' }
+  ]
+}
+
+// TinyMCE 配置（简化版）
+const editorInit = {
+  menubar: false,
+  statusbar: false,
+  placeholder: '开始编写公告内容...',
+  theme: 'silver',
+  license_key: 'gpl',
+  promotion: false,
+  branding: false,
+  toolbar: [
+    'undo redo | bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist | link image | code'
+  ],
+  plugins: [
+    'anchor', 'autolink', 'charmap', 'codesample', 'emoticons', 'image', 'link',
+    'lists', 'media', 'searchreplace', 'table', 'visualblocks', 'wordcount'
+  ],
+  height: 400
+}
+
+// 响应式编辑器配置
+const editorInitConfig = computed(() => {
+  const baseConfig = { ...editorInit }
+  
+  if (isMobile.value) {
+    // 移动端优化配置
+    baseConfig.height = 300
+    baseConfig.toolbar_mode = 'wrap'
+    baseConfig.mobile = {
+      toolbar_mode: 'wrap',
+      toolbar_sticky: false
+    }
+    // 简化工具栏，移除部分功能以适应小屏幕
+    baseConfig.toolbar = [
+      'undo redo | bold italic underline | alignleft aligncenter alignright | bullist numlist | link'
+    ]
+  }
+  
+  return baseConfig
+})
+
+// 计算属性
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+const isEdit = computed(() => !!props.announcement)
+
+// 获取公告详情
+const fetchAnnouncementDetail = async (announcementId) => {
+  if (!announcementId) return
+
+  loading.value = true
+  try {
+    const response = await announcementApi.getAnnouncementDetail(announcementId)
+    announcementDetail.value = response.data
+    fillFormWithDetail(announcementDetail.value)
+  } catch (error) {
+    ElMessage.error('获取公告详情失败')
+    console.error('获取公告详情失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 使用详情数据填充表单
+const fillFormWithDetail = (detail) => {
+  if (!detail) return
+
+  Object.assign(form, {
+    title: detail.title || '',
+    content: detail.content || ''
+  })
+}
+
+// 对话框打开时获取详情
+const handleDialogOpen = () => {
+  if (props.announcement?.id && isEdit.value) {
+    fetchAnnouncementDetail(props.announcement.id)
+  }
+}
+
+// 监听公告数据变化，初始化表单
+watch(() => props.announcement, (newAnnouncement) => {
+  if (newAnnouncement && isEdit.value) {
+    if (announcementDetail.value) {
+      fillFormWithDetail(announcementDetail.value)
+    } else {
+      Object.assign(form, {
+        title: newAnnouncement.title || '',
+        content: newAnnouncement.content || ''
+      })
+    }
+  } else {
+    resetForm()
+  }
+}, { immediate: true })
+
+// 重置表单
+function resetForm() {
+  Object.assign(form, {
+    title: '',
+    content: ''
+  })
+
+  if (formRef.value) {
+    formRef.value.clearValidate()
+  }
+}
+
+// 关闭对话框
+const handleClose = () => {
+  dialogVisible.value = false
+  resetForm()
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  if (!formRef.value) return
+
+  try {
+    await formRef.value.validate()
+
+    loading.value = true
+
+    if (isEdit.value) {
+      await announcementApi.updateAnnouncement(props.announcement.id, form)
+      ElMessage.success('公告更新成功')
+    } else {
+      await announcementApi.createAnnouncement(form)
+      ElMessage.success('公告创建成功')
+    }
+
+    emit('success')
+    handleClose()
+  } catch (error) {
+    if (error.message) {
+      ElMessage.error(error.message)
+    } else {
+      ElMessage.error(isEdit.value ? '更新公告失败' : '创建公告失败')
+    }
+    console.error('提交表单失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+/* 移动端响应式设计 */
+@media (max-width: 768px) {
+  .announcement-edit-dialog :deep(.el-dialog__body) {
+    padding: 16px;
+  }
+
+  .announcement-edit-dialog :deep(.el-form-item) {
+    margin-bottom: 20px;
+  }
+
+  .announcement-edit-dialog :deep(.el-form-item__label) {
+    font-size: 14px;
+    padding-bottom: 4px;
+  }
+
+  .announcement-edit-dialog :deep(.bg-gray-50) {
+    padding: 12px;
+  }
+
+  .announcement-edit-dialog :deep(h3) {
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+
+  /* TinyMCE 编辑器移动端优化 */
+  .announcement-edit-dialog :deep(.tox-tinymce) {
+    border-radius: 4px;
+  }
+
+  .announcement-edit-dialog :deep(.tox-toolbar) {
+    flex-wrap: wrap;
+  }
+
+  .announcement-edit-dialog :deep(.tox-toolbar__group) {
+    margin: 2px;
+  }
+}
+
+@media (max-width: 480px) {
+  .announcement-edit-dialog :deep(.el-dialog__body) {
+    padding: 12px;
+  }
+
+  .announcement-edit-dialog :deep(.el-form-item) {
+    margin-bottom: 16px;
+  }
+
+  .announcement-edit-dialog :deep(.bg-gray-50) {
+    padding: 10px;
+  }
+
+  .announcement-edit-dialog :deep(h3) {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+
+  /* 更小的编辑器高度 */
+  .announcement-edit-dialog :deep(.tox-tinymce) {
+    min-height: 250px;
+  }
+}
+</style>
+
--- a/src/pages/admin/announcements/components/AnnouncementStats.vue
+++ b/src/pages/admin/announcements/components/AnnouncementStats.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-4">
+    <div class="rounded-md bg-gray-50 p-4">
+      <div class="flex items-center">
+        <div class="flex-shrink-0">
+          <div class="w-6 h-6 bg-blue-50 rounded-md flex items-center justify-center">
+            <el-icon class="text-blue-600 text-sm"><MegaphoneIcon /></el-icon>
+          </div>
+        </div>
+        <div class="ml-3">
+          <p class="text-xs text-gray-500">总公告数</p>
+          <p class="text-xl font-semibold text-gray-900">{{ stats.total_announcements || 0 }}</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-md bg-gray-50 p-4">
+      <div class="flex items-center">
+        <div class="flex-shrink-0">
+          <div class="w-6 h-6 bg-green-50 rounded-md flex items-center justify-center">
+            <el-icon class="text-green-600 text-sm"><CheckCircleIcon /></el-icon>
+          </div>
+        </div>
+        <div class="ml-3">
+          <p class="text-xs text-gray-500">已发布</p>
+          <p class="text-xl font-semibold text-gray-900">{{ stats.published_announcements || 0 }}</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-md bg-gray-50 p-4">
+      <div class="flex items-center">
+        <div class="flex-shrink-0">
+          <div class="w-6 h-6 bg-yellow-50 rounded-md flex items-center justify-center">
+            <el-icon class="text-yellow-600 text-sm"><ClockIcon /></el-icon>
+          </div>
+        </div>
+        <div class="ml-3">
+          <p class="text-xs text-gray-500">草稿</p>
+          <p class="text-xl font-semibold text-gray-900">{{ stats.draft_announcements || 0 }}</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-md bg-gray-50 p-4">
+      <div class="flex items-center">
+        <div class="flex-shrink-0">
+          <div class="w-6 h-6 bg-orange-50 rounded-md flex items-center justify-center">
+            <el-icon class="text-orange-600 text-sm"><ArchiveBoxIcon /></el-icon>
+          </div>
+        </div>
+        <div class="ml-3">
+          <p class="text-xs text-gray-500">已归档</p>
+          <p class="text-xl font-semibold text-gray-900">{{ stats.archived_announcements || 0 }}</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="rounded-md bg-gray-50 p-4">
+      <div class="flex items-center">
+        <div class="flex-shrink-0">
+          <div class="w-6 h-6 bg-purple-50 rounded-md flex items-center justify-center">
+            <el-icon class="text-purple-600 text-sm"><ClockIcon /></el-icon>
+          </div>
+        </div>
+        <div class="ml-3">
+          <p class="text-xs text-gray-500">定时发布</p>
+          <p class="text-xl font-semibold text-gray-900">{{ stats.scheduled_announcements || 0 }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ArchiveBoxIcon, CheckCircleIcon, ClockIcon, MegaphoneIcon } from '@heroicons/vue/24/outline';
+
+defineProps({
+  stats: {
+    type: Object,
+    default: () => ({})
+  }
+})
+</script>
+
--- a/src/pages/admin/announcements/components/SchedulePublishDialog.vue
+++ b/src/pages/admin/announcements/components/SchedulePublishDialog.vue
@@ -0,0 +1,186 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="announcement?.scheduled_at ? '修改定时发布时间' : '定时发布公告'"
+    width="500px"
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+    >
+      <el-form-item label="公告标题">
+        <div class="text-gray-600">{{ announcement?.title }}</div>
+      </el-form-item>
+
+      <el-form-item label="定时发布日期" prop="scheduled_date">
+        <el-date-picker
+          v-model="form.scheduled_date"
+          type="date"
+          placeholder="选择定时发布日期"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
+          :disabled-date="disabledDate"
+          class="w-full"
+        />
+      </el-form-item>
+
+      <el-form-item label="定时发布时间" prop="scheduled_time">
+        <el-time-picker
+          v-model="form.scheduled_time"
+          placeholder="选择定时发布时间"
+          format="HH:mm:ss"
+          value-format="HH:mm:ss"
+          :disabled="!form.scheduled_date"
+          class="w-full"
+        />
+      </el-form-item>
+
+      <el-form-item label="提示信息">
+        <div class="text-sm text-gray-500">
+          <p>• 定时发布日期不能早于今天</p>
+          <p>• 设置后公告将保持草稿状态，到指定时间自动发布</p>
+          <p>• 可以随时取消定时发布，重新设置</p>
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="flex justify-end space-x-3">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="handleSubmit">
+          {{ announcement?.scheduled_at ? '确认修改' : '确认设置' }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { announcementApi } from '@/api'
+import { ElMessage } from 'element-plus'
+import { computed, reactive, ref, watch } from 'vue'
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  announcement: {
+    type: Object,
+    default: null
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'success'])
+
+// 响应式数据
+const loading = ref(false)
+const formRef = ref()
+
+// 表单数据
+const form = reactive({
+  scheduled_date: '',
+  scheduled_time: ''
+})
+
+// 表单验证规则
+const rules = {
+  scheduled_date: [
+    { required: true, message: '请选择定时发布日期', trigger: 'change' }
+  ],
+  scheduled_time: [
+    { required: true, message: '请选择定时发布时间', trigger: 'change' }
+  ]
+}
+
+// 计算属性
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+// 禁用过去的日期
+const disabledDate = (time) => {
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  return time.getTime() < today.getTime()
+}
+
+// 监听对话框显示状态
+watch(() => props.modelValue, (visible) => {
+  if (visible && props.announcement) {
+    if (props.announcement.scheduled_at) {
+      const scheduledDate = new Date(props.announcement.scheduled_at)
+      const year = scheduledDate.getFullYear()
+      const month = String(scheduledDate.getMonth() + 1).padStart(2, '0')
+      const day = String(scheduledDate.getDate()).padStart(2, '0')
+      form.scheduled_date = `${year}-${month}-${day}`
+
+      const hours = String(scheduledDate.getHours()).padStart(2, '0')
+      const minutes = String(scheduledDate.getMinutes()).padStart(2, '0')
+      const seconds = String(scheduledDate.getSeconds()).padStart(2, '0')
+      form.scheduled_time = `${hours}:${minutes}:${seconds}`
+    } else {
+      const today = new Date()
+      const year = today.getFullYear()
+      const month = String(today.getMonth() + 1).padStart(2, '0')
+      const day = String(today.getDate()).padStart(2, '0')
+      form.scheduled_date = `${year}-${month}-${day}`
+
+      const defaultTime = new Date()
+      defaultTime.setHours(defaultTime.getHours() + 1)
+      const hours = String(defaultTime.getHours()).padStart(2, '0')
+      const minutes = String(defaultTime.getMinutes()).padStart(2, '0')
+      const seconds = String(defaultTime.getSeconds()).padStart(2, '0')
+      form.scheduled_time = `${hours}:${minutes}:${seconds}`
+    }
+  }
+})
+
+// 处理关闭
+const handleClose = () => {
+  dialogVisible.value = false
+  form.scheduled_date = ''
+  form.scheduled_time = ''
+}
+
+// 处理提交
+const handleSubmit = async () => {
+  if (!formRef.value) return
+
+  try {
+    await formRef.value.validate()
+  } catch (error) {
+    return
+  }
+
+  loading.value = true
+
+  try {
+    if (props.announcement.scheduled_at) {
+      await announcementApi.updateSchedulePublishAnnouncement(props.announcement.id, {
+        scheduled_time: `${form.scheduled_date} ${form.scheduled_time}`
+      })
+    } else {
+      await announcementApi.schedulePublishAnnouncement(props.announcement.id, {
+        scheduled_time: `${form.scheduled_date} ${form.scheduled_time}`
+      })
+    }
+
+    ElMessage.success(props.announcement.scheduled_at ? '定时发布时间修改成功' : '定时发布设置成功')
+    emit('success')
+    handleClose()
+  } catch (error) {
+    ElMessage.error(error.message || '设置定时发布失败')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
--- a/src/pages/admin/announcements/index.vue
+++ b/src/pages/admin/announcements/index.vue
@@ -0,0 +1,870 @@
+<template>
+  <ListPageLayout
+    title="公告管理"
+    subtitle="管理系统中的所有公告内容"
+  >
+    <template #actions>
+      <el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="handleCreateAnnouncement">
+        <el-icon class="mr-1"><PlusIcon /></el-icon>
+        <span :class="isMobile ? 'hidden sm:inline' : ''">新增公告</span>
+        <span :class="isMobile ? 'sm:hidden' : 'hidden'">新增</span>
+      </el-button>
+    </template>
+
+    <template #filters>
+      <FilterSection>
+        <FilterItem label="公告状态">
+          <el-select
+            v-model="filters.status"
+            placeholder="选择状态"
+            clearable
+            @change="handleFilterChange"
+            class="w-full"
+          >
+            <el-option label="草稿" value="draft" />
+            <el-option label="已发布" value="published" />
+            <el-option label="已归档" value="archived" />
+          </el-select>
+        </FilterItem>
+
+        <FilterItem label="标题关键词">
+          <el-input
+            v-model="filters.title"
+            placeholder="输入公告标题关键词"
+            clearable
+            @input="handleSearch"
+            class="w-full"
+          >
+            <template #prefix>
+              <el-icon><MagnifyingGlassIcon /></el-icon>
+            </template>
+          </el-input>
+        </FilterItem>
+
+        <template #stats>
+          共找到 {{ total }} 条公告
+        </template>
+
+        <template #buttons>
+          <div :class="['flex gap-2', isMobile ? 'flex-wrap w-full' : '']">
+            <el-button :size="isMobile ? 'small' : 'default'" @click="resetFilters" :class="isMobile ? 'flex-1' : ''">重置筛选</el-button>
+            <el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="loadAnnouncements" :class="isMobile ? 'flex-1' : ''">应用筛选</el-button>
+          </div>
+        </template>
+      </FilterSection>
+    </template>
+
+    <template #table>
+      <!-- 统计卡片 -->
+      <div class="mb-6">
+        <AnnouncementStats :stats="stats" />
+      </div>
+
+      <!-- 移动端卡片布局 -->
+      <div v-if="isMobile && announcements.length > 0" class="announcement-cards">
+        <div
+          v-for="announcement in announcements"
+          :key="announcement.id"
+          class="announcement-card"
+        >
+          <div class="card-header">
+            <div class="flex-1">
+              <div class="flex items-center gap-2 mb-1 flex-wrap">
+                <span class="font-semibold text-base text-blue-600 cursor-pointer hover:text-blue-800" @click="handleViewAnnouncement(announcement)">
+                  {{ announcement.title }}
+                </span>
+                <el-tag
+                  :type="getStatusType(announcement.status, announcement.scheduled_at)"
+                  size="small"
+                >
+                  {{ getStatusText(announcement.status, announcement.scheduled_at) }}
+                </el-tag>
+              </div>
+            </div>
+          </div>
+          <div class="card-body">
+            <div v-if="announcement.scheduled_at" class="card-row">
+              <span class="card-label">定时发布</span>
+              <span class="card-value text-sm">{{ formatDate(announcement.scheduled_at) }}</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">创建时间</span>
+              <span class="card-value text-sm">{{ formatDate(announcement.created_at) }}</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">更新时间</span>
+              <span class="card-value text-sm">{{ formatDate(announcement.updated_at) }}</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <div class="action-buttons">
+              <el-button
+                v-if="announcement.status === 'draft'"
+                type="success"
+                size="small"
+                @click="handlePublishAnnouncement(announcement)"
+                class="action-btn"
+              >
+                发布
+              </el-button>
+              <el-button
+                v-if="announcement.status === 'published'"
+                type="warning"
+                size="small"
+                @click="handleWithdrawAnnouncement(announcement)"
+                class="action-btn"
+              >
+                撤回
+              </el-button>
+              <el-button
+                v-if="announcement.status === 'published'"
+                type="info"
+                size="small"
+                @click="handleArchiveAnnouncement(announcement)"
+                class="action-btn"
+              >
+                归档
+              </el-button>
+              <el-button
+                type="primary"
+                size="small"
+                @click="handleEditAnnouncement(announcement)"
+                class="action-btn"
+              >
+                编辑
+              </el-button>
+              <el-dropdown @command="(command) => handleMoreAction(command, announcement)" trigger="click">
+                <el-button type="info" size="small" class="action-btn">
+                  更多<el-icon class="ml-1"><ChevronDownIcon /></el-icon>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item
+                      v-if="announcement.status === 'draft' && !announcement.scheduled_at"
+                      command="schedule-publish"
+                    >
+                      <div class="flex items-center gap-2">
+                        <ClockIcon class="w-4 h-4" />
+                        <span>定时发布</span>
+                      </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      v-if="announcement.status === 'draft' && announcement.scheduled_at"
+                      command="schedule-publish"
+                    >
+                      <div class="flex items-center gap-2">
+                        <ClockIcon class="w-4 h-4" />
+                        <span>修改时间</span>
+                      </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      v-if="announcement.status === 'draft' && announcement.scheduled_at"
+                      command="cancel-schedule"
+                      divided
+                    >
+                      <div class="flex items-center gap-2">
+                        <XMarkIcon class="w-4 h-4" />
+                        <span>取消定时</span>
+                      </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item command="view">
+                      <div class="flex items-center gap-2">
+                        <EyeIcon class="w-4 h-4" />
+                        <span>查看</span>
+                      </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item command="delete" divided>
+                      <div class="flex items-center gap-2">
+                        <TrashIcon class="w-4 h-4" />
+                        <span>删除</span>
+                      </div>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 桌面端表格布局 -->
+      <div v-else-if="!isMobile" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+        <div class="table-container">
+          <el-table
+            v-loading="loading"
+            :data="announcements"
+            stripe
+            class="w-full"
+          >
+        <el-table-column prop="title" label="公告标题" min-width="200">
+          <template #default="{ row }">
+            <span class="font-medium text-blue-600 cursor-pointer hover:text-blue-800" @click="handleViewAnnouncement(row)">
+              {{ row.title }}
+            </span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="status" label="状态" width="120">
+          <template #default="{ row }">
+            <div class="flex flex-col gap-1">
+              <el-tag
+                :type="getStatusType(row.status, row.scheduled_at)"
+                size="small"
+              >
+                {{ getStatusText(row.status, row.scheduled_at) }}
+              </el-tag>
+              <div v-if="row.scheduled_at" class="text-xs text-gray-500">
+                定时: {{ formatDate(row.scheduled_at) }}
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="created_at" label="创建时间" width="180">
+          <template #default="{ row }">
+            <span class="text-gray-600">{{ formatDate(row.created_at) }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="updated_at" label="更新时间" width="180">
+          <template #default="{ row }">
+            <span class="text-gray-600">{{ formatDate(row.updated_at) }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" min-width="200" fixed="right">
+          <template #default="{ row }">
+            <div class="flex gap-2">
+              <!-- 主要操作按钮 -->
+              <el-button
+                v-if="row.status === 'draft'"
+                type="success"
+                size="small"
+                @click="handlePublishAnnouncement(row)"
+              >
+                发布
+              </el-button>
+              <el-button
+                v-if="row.status === 'published'"
+                type="warning"
+                size="small"
+                @click="handleWithdrawAnnouncement(row)"
+              >
+                撤回
+              </el-button>
+              <el-button
+                v-if="row.status === 'published'"
+                type="info"
+                size="small"
+                @click="handleArchiveAnnouncement(row)"
+              >
+                归档
+              </el-button>
+              <el-button
+                type="primary"
+                size="small"
+                @click="handleEditAnnouncement(row)"
+              >
+                编辑
+              </el-button>
+
+              <!-- 更多操作下拉菜单 -->
+              <el-dropdown @command="(command) => handleMoreAction(command, row)">
+                <el-button size="small" type="info">
+                  更多<el-icon class="el-icon--right"><ChevronDownIcon /></el-icon>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <!-- 定时发布相关操作 -->
+                    <el-dropdown-item
+                      v-if="row.status === 'draft' && !row.scheduled_at"
+                      command="schedule-publish"
+                    >
+                      <div class="flex items-center gap-2">
+                        <ClockIcon class="w-4 h-4" />
+                        <span>定时发布</span>
+                      </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      v-if="row.status === 'draft' && row.scheduled_at"
+                      command="schedule-publish"
+                    >
+                      <div class="flex items-center gap-2">
+                        <ClockIcon class="w-4 h-4" />
+                        <span>修改时间</span>
+                      </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      v-if="row.status === 'draft' && row.scheduled_at"
+                      command="cancel-schedule"
+                      divided
+                    >
+                      <div class="flex items-center gap-2">
+                        <XMarkIcon class="w-4 h-4" />
+                        <span>取消定时</span>
+                      </div>
+                    </el-dropdown-item>
+
+                    <!-- 查看操作 -->
+                    <el-dropdown-item command="view">
+                      <div class="flex items-center gap-2">
+                        <EyeIcon class="w-4 h-4" />
+                        <span>查看</span>
+                      </div>
+                    </el-dropdown-item>
+
+                    <!-- 删除操作 -->
+                    <el-dropdown-item command="delete" divided>
+                      <div class="flex items-center gap-2">
+                        <TrashIcon class="w-4 h-4" />
+                        <span>删除</span>
+                      </div>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </template>
+        </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </template>
+
+    <template #pagination>
+      <el-pagination
+        v-if="total > 0"
+        v-model:current-page="pagination.page"
+        v-model:page-size="pagination.pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="total"
+        :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
+        :small="isMobile"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </template>
+
+    <template #extra>
+      <!-- 公告编辑对话框 -->
+      <AnnouncementEditDialog
+        v-model="showEditDialog"
+        :announcement="currentAnnouncement"
+        @success="handleEditSuccess"
+      />
+
+      <!-- 公告详情对话框 -->
+      <AnnouncementDetailDialog
+        v-model="showDetailDialog"
+        :announcement="currentAnnouncement"
+      />
+
+      <!-- 定时发布对话框 -->
+      <SchedulePublishDialog
+        v-model="showScheduleDialog"
+        :announcement="currentAnnouncement"
+        @success="handleScheduleSuccess"
+      />
+    </template>
+  </ListPageLayout>
+</template>
+
+<script setup>
+import { announcementApi } from '@/api'
+import FilterItem from '@/components/common/FilterItem.vue'
+import FilterSection from '@/components/common/FilterSection.vue'
+import ListPageLayout from '@/components/common/ListPageLayout.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
+import { ChevronDownIcon, ClockIcon, EyeIcon, MagnifyingGlassIcon, PlusIcon, TrashIcon, XMarkIcon } from '@heroicons/vue/24/outline'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { onMounted, reactive, ref } from 'vue'
+import AnnouncementDetailDialog from './components/AnnouncementDetailDialog.vue'
+import AnnouncementEditDialog from './components/AnnouncementEditDialog.vue'
+import AnnouncementStats from './components/AnnouncementStats.vue'
+import SchedulePublishDialog from './components/SchedulePublishDialog.vue'
+
+// 移动端适配
+const { isMobile, isTablet } = useMobileTable()
+
+// 响应式数据
+const loading = ref(false)
+const announcements = ref([])
+const total = ref(0)
+const stats = ref({})
+
+// 筛选器
+const filters = reactive({
+  status: '',
+  title: ''
+})
+
+// 分页
+const pagination = reactive({
+  page: 1,
+  pageSize: 10
+})
+
+// 搜索防抖
+let searchTimer = null
+
+// 对话框控制
+const showEditDialog = ref(false)
+const showDetailDialog = ref(false)
+const showScheduleDialog = ref(false)
+const currentAnnouncement = ref(null)
+
+// 获取公告列表
+const loadAnnouncements = async () => {
+  loading.value = true
+  try {
+    const params = {
+      page: pagination.page,
+      page_size: pagination.pageSize,
+      ...filters
+    }
+
+    const response = await announcementApi.getAnnouncementsForAdmin(params)
+    announcements.value = response.data.items || []
+    total.value = response.data.total || 0
+  } catch (error) {
+    console.error('获取公告列表失败:', error)
+    ElMessage.error('获取公告列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取统计数据
+const loadStats = async () => {
+  try {
+    const response = await announcementApi.getAnnouncementStats()
+    stats.value = response.data || {}
+  } catch (error) {
+    console.error('获取统计数据失败:', error)
+  }
+}
+
+// 筛选器变化处理
+const handleFilterChange = () => {
+  pagination.page = 1
+  loadAnnouncements()
+}
+
+// 搜索处理
+const handleSearch = () => {
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+  }
+  searchTimer = setTimeout(() => {
+    pagination.page = 1
+    loadAnnouncements()
+  }, 500)
+}
+
+// 重置筛选器
+const resetFilters = () => {
+  Object.keys(filters).forEach(key => {
+    filters[key] = ''
+  })
+  pagination.page = 1
+  loadAnnouncements()
+}
+
+// 分页处理
+const handleSizeChange = (size) => {
+  pagination.pageSize = size
+  pagination.page = 1
+  loadAnnouncements()
+}
+
+const handleCurrentChange = (page) => {
+  pagination.page = page
+  loadAnnouncements()
+}
+
+// 新增公告
+const handleCreateAnnouncement = () => {
+  currentAnnouncement.value = null
+  showEditDialog.value = true
+}
+
+// 编辑公告
+const handleEditAnnouncement = (announcement) => {
+  currentAnnouncement.value = { id: announcement.id }
+  showEditDialog.value = true
+}
+
+// 查看公告详情
+const handleViewAnnouncement = (announcement) => {
+  currentAnnouncement.value = { id: announcement.id }
+  showDetailDialog.value = true
+}
+
+// 发布公告
+const handlePublishAnnouncement = async (announcement) => {
+  try {
+    await ElMessageBox.confirm('确定要发布这条公告吗？', '确认发布', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+
+    await announcementApi.publishAnnouncement(announcement.id)
+    ElMessage.success('公告发布成功')
+    loadAnnouncements()
+    loadStats()
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('发布公告失败:', error)
+      ElMessage.error(error.message || '发布公告失败')
+    }
+  }
+}
+
+// 撤回公告
+const handleWithdrawAnnouncement = async (announcement) => {
+  try {
+    await ElMessageBox.confirm('确定要撤回这条公告吗？', '确认撤回', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+
+    await announcementApi.withdrawAnnouncement(announcement.id)
+    ElMessage.success('公告撤回成功')
+    loadAnnouncements()
+    loadStats()
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('撤回公告失败:', error)
+      ElMessage.error(error.message || '撤回公告失败')
+    }
+  }
+}
+
+// 归档公告
+const handleArchiveAnnouncement = async (announcement) => {
+  try {
+    await ElMessageBox.confirm('确定要归档这条公告吗？', '确认归档', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+
+    await announcementApi.archiveAnnouncement(announcement.id)
+    ElMessage.success('公告归档成功')
+    loadAnnouncements()
+    loadStats()
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('归档公告失败:', error)
+      ElMessage.error(error.message || '归档公告失败')
+    }
+  }
+}
+
+// 删除公告
+const handleDeleteAnnouncement = async (announcement) => {
+  try {
+    await ElMessageBox.confirm('确定要删除这条公告吗？删除后无法恢复！', '确认删除', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+
+    await announcementApi.deleteAnnouncement(announcement.id)
+    ElMessage.success('公告删除成功')
+    loadAnnouncements()
+    loadStats()
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除公告失败:', error)
+      ElMessage.error(error.message || '删除公告失败')
+    }
+  }
+}
+
+// 编辑成功回调
+const handleEditSuccess = () => {
+  loadAnnouncements()
+  loadStats()
+}
+
+// 定时发布公告
+const handleSchedulePublish = (announcement) => {
+  currentAnnouncement.value = announcement
+  showScheduleDialog.value = true
+}
+
+// 定时发布成功回调
+const handleScheduleSuccess = () => {
+  loadAnnouncements()
+  loadStats()
+}
+
+// 取消定时发布
+const handleCancelSchedule = async (announcement) => {
+  try {
+    await ElMessageBox.confirm('确定要取消这条公告的定时发布吗？', '确认取消', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+
+    await announcementApi.cancelSchedulePublishAnnouncement(announcement.id)
+    ElMessage.success('取消定时发布成功')
+    loadAnnouncements()
+    loadStats()
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('取消定时发布失败:', error)
+      ElMessage.error(error.message || '取消定时发布失败')
+    }
+  }
+}
+
+// 处理更多操作
+const handleMoreAction = (command, announcement) => {
+  switch (command) {
+    case 'schedule-publish':
+      handleSchedulePublish(announcement)
+      break
+    case 'cancel-schedule':
+      handleCancelSchedule(announcement)
+      break
+    case 'view':
+      handleViewAnnouncement(announcement)
+      break
+    case 'delete':
+      handleDeleteAnnouncement(announcement)
+      break
+    default:
+      console.warn('未知的操作命令:', command)
+  }
+}
+
+// 状态类型映射
+const getStatusType = (status, scheduledAt) => {
+  if (status === 'draft' && scheduledAt) {
+    return 'warning'
+  }
+  const statusMap = {
+    draft: 'info',
+    published: 'success',
+    archived: 'warning'
+  }
+  return statusMap[status] || 'info'
+}
+
+// 状态文本映射
+const getStatusText = (status, scheduledAt) => {
+  if (status === 'draft' && scheduledAt) {
+    return '定时发布'
+  }
+  const statusMap = {
+    draft: '草稿',
+    published: '已发布',
+    archived: '已归档'
+  }
+  return statusMap[status] || status
+}
+
+// 格式化日期
+const formatDate = (dateString) => {
+  if (!dateString) return '-'
+  return new Date(dateString).toLocaleString('zh-CN')
+}
+
+// 页面初始化
+onMounted(() => {
+  loadAnnouncements()
+  loadStats()
+})
+</script>
+
+<style scoped>
+/* 移动端卡片布局 */
+.announcement-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.announcement-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.card-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.card-label {
+  color: #6b7280;
+  font-weight: 500;
+  min-width: 80px;
+  flex-shrink: 0;
+}
+
+.card-value {
+  color: #111827;
+  flex: 1;
+  word-break: break-word;
+}
+
+.card-footer {
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.action-btn {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 表格容器 */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 移动端响应式设计 */
+@media (max-width: 768px) {
+  .announcement-card {
+    padding: 12px;
+  }
+
+  .card-header {
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+  }
+
+  .card-body {
+    gap: 6px;
+    margin-bottom: 10px;
+  }
+
+  .card-row {
+    font-size: 12px;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .card-label {
+    min-width: auto;
+    font-size: 11px;
+  }
+
+  .card-value {
+    font-size: 12px;
+  }
+
+  .card-footer {
+    padding-top: 10px;
+  }
+
+  .action-buttons {
+    gap: 6px;
+  }
+
+  .action-btn {
+    flex: 1;
+    min-width: 60px;
+  }
+
+  /* 表格在移动端优化 */
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 600px;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 8px 4px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 4px;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 移动端隐藏固定列阴影 */
+  :deep(.el-table__fixed-right) {
+    box-shadow: none !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .announcement-card {
+    padding: 10px;
+  }
+
+  .card-header {
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+  }
+
+  .card-body {
+    gap: 4px;
+    margin-bottom: 8px;
+  }
+
+  .card-row {
+    font-size: 11px;
+  }
+
+  .card-label {
+    font-size: 10px;
+  }
+
+  .card-value {
+    font-size: 11px;
+  }
+
+  .action-buttons {
+    gap: 4px;
+  }
+
+  .action-btn {
+    padding: 4px 8px;
+    font-size: 11px;
+    min-width: 50px;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 6px 2px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 2px;
+  }
+}
+</style>
+
--- a/src/pages/admin/api-calls/index.vue
+++ b/src/pages/admin/api-calls/index.vue
@@ -14,18 +14,19 @@

    <!-- 单用户模式操作按钮 -->
    <template #actions v-if="singleUserMode">
-      <div class="flex items-center gap-3">
-        <div class="flex items-center gap-2 text-sm text-gray-600">
+      <div :class="['flex items-center gap-3', isMobile ? 'flex-wrap' : '']">
+        <div :class="['flex items-center gap-2 text-sm text-gray-600', isMobile ? 'w-full mb-2' : '']">
          <User class="w-4 h-4" />
-          <span>{{ currentUser?.company_name || currentUser?.phone }}</span>
+          <span :class="isMobile ? 'truncate flex-1' : ''">{{ currentUser?.company_name || currentUser?.phone }}</span>
        </div>
-        <el-button size="small" @click="exitSingleUserMode">
+        <el-button :size="isMobile ? 'small' : 'small'" @click="exitSingleUserMode">
          <Close class="w-4 h-4 mr-1" />
-          取消
+          <span :class="isMobile ? 'hidden sm:inline' : ''">取消</span>
        </el-button>
-        <el-button size="small" type="primary" @click="goBackToUsers">
+        <el-button :size="isMobile ? 'small' : 'small'" type="primary" @click="goBackToUsers">
          <Back class="w-4 h-4 mr-1" />
-          返回用户管理
+          <span :class="isMobile ? 'hidden sm:inline' : ''">返回用户管理</span>
+          <span :class="isMobile ? 'sm:hidden' : 'hidden'">返回</span>
        </el-button>
      </div>
    </template>
@@ -33,7 +34,7 @@
    <!-- 筛选区域 -->
    <template #filters>
      <FilterSection>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        <div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4']">
          <FilterItem label="企业名称" v-if="!singleUserMode">
            <el-input
              v-model="filters.company_name"
@@ -79,7 +80,7 @@
            </el-select>
          </FilterItem>

-          <FilterItem label="调用时间" class="md:col-span-2">
+          <FilterItem label="调用时间" :class="isMobile ? 'col-span-1' : 'md:col-span-2'">
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
@@ -89,6 +90,7 @@
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="handleTimeRangeChange"
+              :size="isMobile ? 'small' : 'default'"
              class="w-full"
            />
          </FilterItem>
@@ -99,129 +101,209 @@
        </template>

        <template #buttons>
-          <el-button @click="resetFilters">重置筛选</el-button>
-          <el-button type="primary" @click="loadApiCalls">应用筛选</el-button>
-          <el-button type="success" @click="showExportDialog">
-            <Download class="w-4 h-4 mr-1" />
-            导出数据
-          </el-button>
+          <div :class="['flex gap-2', isMobile ? 'flex-wrap w-full' : '']">
+            <el-button :size="isMobile ? 'small' : 'default'" @click="resetFilters" :class="isMobile ? 'flex-1' : ''">
+              重置筛选
+            </el-button>
+            <el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="loadApiCalls" :class="isMobile ? 'flex-1' : ''">
+              应用筛选
+            </el-button>
+            <el-button :size="isMobile ? 'small' : 'default'" type="success" @click="showExportDialog" :class="isMobile ? 'w-full' : ''">
+              <Download class="w-4 h-4 mr-1" />
+              <span :class="isMobile ? 'hidden sm:inline' : ''">导出数据</span>
+              <span :class="isMobile ? 'sm:hidden' : 'hidden'">导出</span>
+            </el-button>
+          </div>
        </template>
      </FilterSection>
    </template>

    <!-- 表格区域 -->
    <template #table>
+      <!-- 加载状态 -->
      <div v-if="loading" class="flex justify-center items-center py-12">
        <el-loading size="large" />
      </div>

-      <div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
-        <el-table
-          :data="apiCalls"
-          style="width: 100%"
-          :header-cell-style="{
-            background: '#f8fafc',
-            color: '#475569',
-            fontWeight: '600',
-            fontSize: '14px'
-          }"
-          :cell-style="{
-            fontSize: '14px',
-            color: '#1e293b'
-          }"
+      <!-- 移动端卡片布局 -->
+      <div v-else-if="isMobile && apiCalls.length > 0" class="api-call-cards">
+        <div
+          v-for="call in apiCalls"
+          :key="call.id"
+          class="api-call-card"
        >
-          <el-table-column prop="transaction_id" label="交易ID" min-width="180">
-            <template #default="{ row }">
-              <span class="font-mono text-sm text-gray-600">{{ row.transaction_id }}</span>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="company_name" label="企业名称" min-width="150" v-if="!singleUserMode">
-            <template #default="{ row }">
-              <div>
-                <div class="font-medium text-blue-600">{{ row.company_name || '未知企业' }}</div>
-                <div class="text-xs text-gray-500">{{ row.user?.phone }}</div>
-              </div>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="product_name" label="接口名称" min-width="150">
-            <template #default="{ row }">
-              <div>
-                <div class="font-medium text-blue-600">{{ row.product_name || '未知接口' }}</div>
-              </div>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="status" label="状态" width="100">
-            <template #default="{ row }">
-              <el-tag
-                :type="getStatusType(row.status)"
-                size="small"
-                effect="light"
-              >
-                {{ getStatusText(row.status) }}
-              </el-tag>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="error_msg" label="错误信息" min-width="200">
-            <template #default="{ row }">
-              <div v-if="row.translated_error_msg" class="error-info-cell">
-                <div class="translated-error">
-                  {{ row.translated_error_msg }}
-                </div>
-              </div>
-              <span v-else class="text-gray-400">-</span>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="cost" label="费用" width="100">
-            <template #default="{ row }">
-              <span v-if="row.cost" class="font-semibold text-red-600">¥{{ formatPrice(row.cost) }}</span>
-              <span v-else class="text-gray-400">-</span>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="client_ip" label="客户端IP" width="140">
-            <template #default="{ row }">
-              <span class="font-mono text-sm text-gray-600">{{ row.client_ip }}</span>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="start_at" label="调用时间" width="160">
-            <template #default="{ row }">
-              <div class="text-sm">
-                <div class="text-gray-900">{{ formatDate(row.start_at) }}</div>
-                <div class="text-gray-500">{{ formatTime(row.start_at) }}</div>
-              </div>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="end_at" label="完成时间" width="160">
-            <template #default="{ row }">
-              <div v-if="row.end_at" class="text-sm">
-                <div class="text-gray-900">{{ formatDate(row.end_at) }}</div>
-                <div class="text-gray-500">{{ formatTime(row.end_at) }}</div>
-              </div>
-              <span v-else class="text-gray-400">-</span>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="操作" width="120" fixed="right">
-            <template #default="{ row }">
-              <div class="flex items-center space-x-2">
-                <el-button
+          <div class="card-header">
+            <div class="flex-1">
+              <div class="flex items-center gap-2 mb-1">
+                <span class="font-semibold text-base text-blue-600">{{ call.product_name || '未知接口' }}</span>
+                <el-tag
+                  :type="getStatusType(call.status)"
                  size="small"
-                  type="primary"
-                  @click="handleViewDetail(row)"
+                  effect="light"
                >
-                  查看详情
-                </el-button>
+                  {{ getStatusText(call.status) }}
+                </el-tag>
              </div>
-            </template>
-          </el-table-column>
-        </el-table>
+              <div class="text-xs text-gray-500 font-mono">ID: {{ call.transaction_id }}</div>
+            </div>
+          </div>
+          <div class="card-body">
+            <div v-if="!singleUserMode" class="card-row">
+              <span class="card-label">企业名称</span>
+              <span class="card-value">{{ call.company_name || '未知企业' }}</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">费用</span>
+              <span class="card-value text-red-600 font-semibold">
+                <span v-if="call.cost">¥{{ formatPrice(call.cost) }}</span>
+                <span v-else class="text-gray-400">-</span>
+              </span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">客户端IP</span>
+              <span class="card-value font-mono text-sm">{{ call.client_ip }}</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">调用时间</span>
+              <span class="card-value text-sm">{{ formatDateTime(call.start_at) }}</span>
+            </div>
+            <div v-if="call.end_at" class="card-row">
+              <span class="card-label">完成时间</span>
+              <span class="card-value text-sm">{{ formatDateTime(call.end_at) }}</span>
+            </div>
+            <div v-if="call.translated_error_msg" class="card-row">
+              <span class="card-label">错误信息</span>
+              <span class="card-value text-sm text-red-600">{{ call.translated_error_msg }}</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <el-button
+              type="primary"
+              size="small"
+              @click="handleViewDetail(call)"
+              class="w-full"
+            >
+              查看详情
+            </el-button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 桌面端表格布局 -->
+      <div v-else-if="!isMobile" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+        <div class="table-container">
+          <el-table
+            :data="apiCalls"
+            style="width: 100%"
+            :header-cell-style="{
+              background: '#f8fafc',
+              color: '#475569',
+              fontWeight: '600',
+              fontSize: '14px'
+            }"
+            :cell-style="{
+              fontSize: '14px',
+              color: '#1e293b'
+            }"
+          >
+            <el-table-column prop="transaction_id" label="交易ID" min-width="180">
+              <template #default="{ row }">
+                <span class="font-mono text-sm text-gray-600">{{ row.transaction_id }}</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="company_name" label="企业名称" min-width="150" v-if="!singleUserMode">
+              <template #default="{ row }">
+                <div>
+                  <div class="font-medium text-blue-600">{{ row.company_name || '未知企业' }}</div>
+                  <div class="text-xs text-gray-500">{{ row.user?.phone }}</div>
+                </div>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="product_name" label="接口名称" min-width="150">
+              <template #default="{ row }">
+                <div>
+                  <div class="font-medium text-blue-600">{{ row.product_name || '未知接口' }}</div>
+                </div>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="status" label="状态" width="100">
+              <template #default="{ row }">
+                <el-tag
+                  :type="getStatusType(row.status)"
+                  size="small"
+                  effect="light"
+                >
+                  {{ getStatusText(row.status) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="error_msg" label="错误信息" min-width="200">
+              <template #default="{ row }">
+                <div v-if="row.translated_error_msg" class="error-info-cell">
+                  <div class="translated-error">
+                    {{ row.translated_error_msg }}
+                  </div>
+                </div>
+                <span v-else class="text-gray-400">-</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="cost" label="费用" width="100">
+              <template #default="{ row }">
+                <span v-if="row.cost" class="font-semibold text-red-600">¥{{ formatPrice(row.cost) }}</span>
+                <span v-else class="text-gray-400">-</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="client_ip" label="客户端IP" width="140">
+              <template #default="{ row }">
+                <span class="font-mono text-sm text-gray-600">{{ row.client_ip }}</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="start_at" label="调用时间" width="160">
+              <template #default="{ row }">
+                <div class="text-sm">
+                  <div class="text-gray-900">{{ formatDate(row.start_at) }}</div>
+                  <div class="text-gray-500">{{ formatTime(row.start_at) }}</div>
+                </div>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="end_at" label="完成时间" width="160">
+              <template #default="{ row }">
+                <div v-if="row.end_at" class="text-sm">
+                  <div class="text-gray-900">{{ formatDate(row.end_at) }}</div>
+                  <div class="text-gray-500">{{ formatTime(row.end_at) }}</div>
+                </div>
+                <span v-else class="text-gray-400">-</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="操作" width="120" fixed="right">
+              <template #default="{ row }">
+                <div class="flex items-center space-x-2">
+                  <el-button
+                    size="small"
+                    type="primary"
+                    @click="handleViewDetail(row)"
+                  >
+                    查看详情
+                  </el-button>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="!loading && apiCalls.length === 0" class="text-center py-12">
+        <el-empty description="暂无API调用记录" />
      </div>
    </template>

@@ -233,7 +315,8 @@
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="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"
      />
@@ -243,14 +326,14 @@
    <el-dialog
      v-model="detailDialogVisible"
      title="API调用详情"
-      width="800px"
+      :width="isMobile ? '90%' : '800px'"
      class="api-call-detail-dialog"
    >
      <div v-if="selectedApiCall" class="space-y-6">
        <!-- 基本信息 -->
        <div class="info-section">
          <h4 class="text-lg font-semibold text-gray-900 mb-4">基本信息</h4>
-          <div class="grid grid-cols-2 gap-4">
+          <div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-2']">
            <div class="info-item">
              <span class="info-label">交易ID</span>
              <span class="info-value font-mono">{{ selectedApiCall.transaction_id }}</span>
@@ -288,7 +371,7 @@
        <!-- 时间信息 -->
        <div class="info-section">
          <h4 class="text-lg font-semibold text-gray-900 mb-4">时间信息</h4>
-          <div class="grid grid-cols-2 gap-4">
+          <div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-2']">
            <div class="info-item">
              <span class="info-label">调用时间</span>
              <span class="info-value">{{ formatDateTime(selectedApiCall.start_at) }}</span>
@@ -322,7 +405,7 @@
  <el-dialog
    v-model="exportDialogVisible"
    title="导出API调用记录"
-    width="600px"
+    :width="isMobile ? '90%' : '600px'"
    :close-on-click-modal="false"
  >
    <div class="space-y-4">
@@ -395,6 +478,7 @@
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
+          :size="isMobile ? 'small' : 'default'"
          class="w-full"
        />
      </div>
@@ -410,10 +494,18 @@
    </div>

    <template #footer>
-      <div class="flex justify-end gap-3">
-        <el-button @click="exportDialogVisible = false">取消</el-button>
+      <div :class="['flex gap-3', isMobile ? 'flex-col' : 'justify-end']">
        <el-button
+          :size="isMobile ? 'default' : 'default'"
+          :class="isMobile ? 'w-full' : ''"
+          @click="exportDialogVisible = false"
+        >
+          取消
+        </el-button>
+        <el-button
+          :size="isMobile ? 'default' : 'default'"
          type="primary"
+          :class="isMobile ? 'w-full' : ''"
          :loading="exportLoading"
          @click="handleExport"
        >
@@ -429,6 +521,7 @@ import { apiCallApi, productApi, userApi } from '@/api'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { Back, Close, Download, User } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { onMounted, reactive, ref, watch } from 'vue'
@@ -437,6 +530,9 @@ import { useRoute, useRouter } from 'vue-router'
 const router = useRouter()
 const route = useRoute()

+// 移动端检测
+const { isMobile, isTablet } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const apiCalls = ref([])
@@ -835,7 +931,9 @@ const handleExport = async () => {
 }

 .error-content {
-  space-y: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }

 .error-message {
@@ -904,6 +1002,71 @@ const handleExport = async () => {
  background: #f8fafc !important;
 }

+/* 移动端卡片布局 */
+.api-call-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.api-call-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.card-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.card-label {
+  font-size: 12px;
+  color: #6b7280;
+  font-weight: 500;
+  min-width: 80px;
+  flex-shrink: 0;
+}
+
+.card-value {
+  font-size: 14px;
+  color: #1f2937;
+  text-align: right;
+  word-break: break-word;
+  flex: 1;
+}
+
+.card-footer {
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
+}
+
+/* 表格容器 */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 /* 响应式设计 */
@media (max-width: 768px) {
  .info-item {
@@ -915,5 +1078,118 @@ const handleExport = async () => {
  .info-label {
    min-width: auto;
  }
+
+  /* 表格在移动端优化 */
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 1000px;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 8px 4px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 4px;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 分页组件在移动端优化 */
+  :deep(.el-pagination) {
+    justify-content: center;
+  }
+
+  :deep(.el-pagination .el-pagination__sizes) {
+    display: none;
+  }
+
+  :deep(.el-pagination .el-pagination__total) {
+    display: none;
+  }
+
+  :deep(.el-pagination .el-pagination__jump) {
+    display: none;
+  }
+
+  /* 对话框在移动端优化 */
+  :deep(.api-call-detail-dialog .el-dialog__body) {
+    padding: 16px;
+    max-height: 80vh;
+  }
+
+  /* 日期选择器在移动端优化 */
+  :deep(.el-date-editor) {
+    width: 100%;
+  }
+
+  :deep(.el-date-editor .el-input__wrapper) {
+    width: 100%;
+  }
+
+  /* 筛选区域在移动端优化 */
+  :deep(.filter-grid) {
+    gap: 12px;
+  }
+
+  /* 导出对话框在移动端优化 */
+  :deep(.el-dialog) {
+    margin: 20px auto;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .api-call-card {
+    padding: 12px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .card-body {
+    gap: 6px;
+  }
+
+  .card-label {
+    font-size: 11px;
+    min-width: 70px;
+  }
+
+  .card-value {
+    font-size: 13px;
+  }
+
+  .card-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .card-value {
+    text-align: left;
+  }
+
+  /* 日期选择器在超小屏幕优化 */
+  :deep(.el-date-editor) {
+    font-size: 12px;
+  }
+
+  :deep(.el-date-editor .el-input__inner) {
+    font-size: 12px;
+  }
+
+  /* 筛选区域在超小屏幕优化 */
+  :deep(.filter-grid) {
+    gap: 10px;
+  }
 }
 </style>
--- a/src/pages/admin/articles/index.vue
+++ b/src/pages/admin/articles/index.vue
@@ -4,17 +4,20 @@
    subtitle="管理系统中的所有文章内容"
  >
    <template #actions>
-      <el-button @click="showCategoryDialog = true">
+      <el-button :size="isMobile ? 'small' : 'default'" @click="showCategoryDialog = true">
        <el-icon class="mr-1"><TagIcon /></el-icon>
-        分类管理
+        <span :class="isMobile ? 'hidden sm:inline' : ''">分类管理</span>
+        <span :class="isMobile ? 'sm:hidden' : 'hidden'">分类</span>
      </el-button>
-      <el-button @click="showTagDialog = true">
+      <el-button :size="isMobile ? 'small' : 'default'" @click="showTagDialog = true">
        <el-icon class="mr-1"><TagIcon /></el-icon>
-        标签管理
+        <span :class="isMobile ? 'hidden sm:inline' : ''">标签管理</span>
+        <span :class="isMobile ? 'sm:hidden' : 'hidden'">标签</span>
      </el-button>
-      <el-button type="primary" @click="handleCreateArticle">
+      <el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="handleCreateArticle">
        <el-icon class="mr-1"><PlusIcon /></el-icon>
-        新增文章
+        <span :class="isMobile ? 'hidden sm:inline' : ''">新增文章</span>
+        <span :class="isMobile ? 'sm:hidden' : 'hidden'">新增</span>
      </el-button>
    </template>

@@ -83,8 +86,10 @@
        </template>

        <template #buttons>
-          <el-button @click="resetFilters">重置筛选</el-button>
-          <el-button type="primary" @click="loadArticles">应用筛选</el-button>
+          <div :class="['flex gap-2', isMobile ? 'flex-wrap w-full' : '']">
+            <el-button :size="isMobile ? 'small' : 'default'" @click="resetFilters" :class="isMobile ? 'flex-1' : ''">重置筛选</el-button>
+            <el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="loadArticles" :class="isMobile ? 'flex-1' : ''">应用筛选</el-button>
+          </div>
        </template>
      </FilterSection>
    </template>
@@ -95,13 +100,151 @@
        <ArticleStats :stats="stats" />
      </div>

-      <!-- 文章列表表格 -->
-      <el-table
-        v-loading="loading"
-        :data="articles"
-        stripe
-        class="w-full"
-      >
+      <!-- 移动端卡片布局 -->
+      <div v-if="isMobile && articles.length > 0" class="article-cards">
+        <div
+          v-for="article in articles"
+          :key="article.id"
+          class="article-card"
+        >
+          <div class="card-header">
+            <div class="flex-1">
+              <div class="flex items-center gap-2 mb-1 flex-wrap">
+                <span class="font-semibold text-base text-blue-600 cursor-pointer hover:text-blue-800" @click="handleViewArticle(article)">
+                  {{ article.title }}
+                </span>
+                <el-tag v-if="article.is_featured" type="success" size="small">推荐</el-tag>
+                <el-tag
+                  :type="getStatusType(article.status, article.scheduled_at)"
+                  size="small"
+                >
+                  {{ getStatusText(article.status, article.scheduled_at) }}
+                </el-tag>
+              </div>
+              <div v-if="article.category" class="text-xs text-gray-500">
+                分类: {{ article.category.name }}
+              </div>
+            </div>
+          </div>
+          <div class="card-body">
+            <div v-if="article.tags && article.tags.length > 0" class="card-row">
+              <span class="card-label">标签</span>
+              <div class="flex flex-wrap gap-1">
+                <el-tag
+                  v-for="tag in article.tags"
+                  :key="tag.id"
+                  :color="tag.color"
+                  size="small"
+                  class="text-xs"
+                >
+                  {{ tag.name }}
+                </el-tag>
+              </div>
+            </div>
+            <div v-if="article.scheduled_at" class="card-row">
+              <span class="card-label">定时发布</span>
+              <span class="card-value text-sm">{{ formatDate(article.scheduled_at) }}</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">创建时间</span>
+              <span class="card-value text-sm">{{ formatDate(article.created_at) }}</span>
+            </div>
+            <div v-if="article.published_at" class="card-row">
+              <span class="card-label">发布时间</span>
+              <span class="card-value text-sm">{{ formatDate(article.published_at) }}</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <div class="action-buttons">
+              <el-button
+                v-if="article.status === 'draft'"
+                type="success"
+                size="small"
+                @click="handlePublishArticle(article)"
+                class="action-btn"
+              >
+                发布
+              </el-button>
+              <el-button
+                v-if="article.status === 'published'"
+                type="warning"
+                size="small"
+                @click="handleArchiveArticle(article)"
+                class="action-btn"
+              >
+                归档
+              </el-button>
+              <el-button
+                type="primary"
+                size="small"
+                @click="handleEditArticle(article)"
+                class="action-btn"
+              >
+                编辑
+              </el-button>
+              <el-dropdown @command="(command) => handleMoreAction(command, article)" trigger="click">
+                <el-button type="info" size="small" class="action-btn">
+                  更多<el-icon class="ml-1"><ChevronDownIcon /></el-icon>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item
+                      v-if="article.status === 'draft' && !article.scheduled_at"
+                      command="schedule-publish"
+                    >
+                      <div class="flex items-center gap-2">
+                        <ClockIcon class="w-4 h-4" />
+                        <span>定时发布</span>
+                      </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      v-if="article.status === 'draft' && article.scheduled_at"
+                      command="schedule-publish"
+                    >
+                      <div class="flex items-center gap-2">
+                        <ClockIcon class="w-4 h-4" />
+                        <span>修改时间</span>
+                      </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      v-if="article.status === 'draft' && article.scheduled_at"
+                      command="cancel-schedule"
+                      divided
+                    >
+                      <div class="flex items-center gap-2">
+                        <XMarkIcon class="w-4 h-4" />
+                        <span>取消定时</span>
+                      </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item command="view">
+                      <div class="flex items-center gap-2">
+                        <EyeIcon class="w-4 h-4" />
+                        <span>查看</span>
+                      </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item command="delete" divided>
+                      <div class="flex items-center gap-2">
+                        <TrashIcon class="w-4 h-4" />
+                        <span>删除</span>
+                      </div>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 桌面端表格布局 -->
+      <div v-else-if="!isMobile" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+        <div class="table-container">
+          <el-table
+            v-loading="loading"
+            :data="articles"
+            stripe
+            class="w-full"
+          >
        <el-table-column prop="title" label="文章标题" min-width="200">
          <template #default="{ row }">
            <div class="flex items-center">
@@ -259,7 +402,9 @@
            </div>
          </template>
        </el-table-column>
-      </el-table>
+          </el-table>
+        </div>
+      </div>
    </template>

    <template #pagination>
@@ -269,7 +414,8 @@
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="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"
      />
@@ -302,7 +448,7 @@
      <el-dialog
        v-model="showCategoryDialog"
        title="分类管理"
-        width="80%"
+        :width="isMobile ? '90%' : '80%'"
        :close-on-click-modal="false"
        @close="handleCategoryDialogClose"
      >
@@ -313,7 +459,7 @@
      <el-dialog
        v-model="showTagDialog"
        title="标签管理"
-        width="80%"
+        :width="isMobile ? '90%' : '80%'"
        :close-on-click-modal="false"
        @close="handleTagDialogClose"
      >
@@ -328,6 +474,7 @@ import { articleApi } from '@/api'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { ChevronDownIcon, ClockIcon, EyeIcon, MagnifyingGlassIcon, PlusIcon, TagIcon, TrashIcon, XMarkIcon } from '@heroicons/vue/24/outline'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { onMounted, reactive, ref } from 'vue'
@@ -338,6 +485,9 @@ import ArticleStats from './components/ArticleStats.vue'
 import SchedulePublishDialog from './components/SchedulePublishDialog.vue'
 import Tags from './tags.vue'

+// 移动端适配
+const { isMobile, isTablet } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const articles = ref([])
@@ -642,8 +792,6 @@ const formatDate = (dateString) => {
  return new Date(dateString).toLocaleString('zh-CN')
 }

-
-
 // 页面初始化
 onMounted(() => {
  loadArticles()
@@ -652,3 +800,189 @@ onMounted(() => {
  loadTags()
 })
 </script>
+
+<style scoped>
+/* 移动端卡片布局 */
+.article-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.article-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.card-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.card-label {
+  color: #6b7280;
+  font-weight: 500;
+  min-width: 80px;
+  flex-shrink: 0;
+}
+
+.card-value {
+  color: #111827;
+  flex: 1;
+  word-break: break-word;
+}
+
+.card-footer {
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.action-btn {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 表格容器 */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 移动端响应式设计 */
+@media (max-width: 768px) {
+  .article-card {
+    padding: 12px;
+  }
+
+  .card-header {
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+  }
+
+  .card-body {
+    gap: 6px;
+    margin-bottom: 10px;
+  }
+
+  .card-row {
+    font-size: 12px;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .card-label {
+    min-width: auto;
+    font-size: 11px;
+  }
+
+  .card-value {
+    font-size: 12px;
+  }
+
+  .card-footer {
+    padding-top: 10px;
+  }
+
+  .action-buttons {
+    gap: 6px;
+  }
+
+  .action-btn {
+    flex: 1;
+    min-width: 60px;
+  }
+
+  /* 表格在移动端优化 */
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 600px;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 8px 4px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 4px;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 移动端隐藏固定列阴影 */
+  :deep(.el-table__fixed-right) {
+    box-shadow: none !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .article-card {
+    padding: 10px;
+  }
+
+  .card-header {
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+  }
+
+  .card-body {
+    gap: 4px;
+    margin-bottom: 8px;
+  }
+
+  .card-row {
+    font-size: 11px;
+  }
+
+  .card-label {
+    font-size: 10px;
+  }
+
+  .card-value {
+    font-size: 11px;
+  }
+
+  .action-buttons {
+    gap: 4px;
+  }
+
+  .action-btn {
+    padding: 4px 8px;
+    font-size: 11px;
+    min-width: 50px;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 6px 2px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 2px;
+  }
+}
+</style>
--- a/src/pages/admin/consumption/index.vue
+++ b/src/pages/admin/consumption/index.vue
@@ -64,7 +64,7 @@
            />
          </FilterItem>

-          <FilterItem label="消费时间" class="md:col-span-2">
+          <FilterItem label="消费时间" class="col-span-1 md:col-span-2">
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
@@ -75,6 +75,7 @@
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="handleTimeRangeChange"
              class="w-full"
+              :size="isMobile ? 'small' : 'default'"
            />
          </FilterItem>

@@ -255,6 +256,7 @@ import { userApi, walletTransactionApi } from '@/api'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { Back, Close, User } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { onMounted, reactive, ref, watch } from 'vue'
@@ -263,6 +265,9 @@ import { useRoute, useRouter } from 'vue-router'
 const router = useRouter()
 const route = useRoute()

+// 移动端检测
+const { isMobile } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const transactions = ref([])
--- a/src/pages/admin/invoices/index.vue
+++ b/src/pages/admin/invoices/index.vue
@@ -36,7 +36,7 @@
          </el-select>
        </FilterItem>

-        <FilterItem label="申请时间">
+        <FilterItem label="申请时间" class="col-span-1">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
@@ -47,6 +47,7 @@
            value-format="YYYY-MM-DD"
            @change="handleDateRangeChange"
            class="w-full"
+            :size="isMobile ? 'small' : 'default'"
          />
        </FilterItem>

@@ -372,10 +373,14 @@ import { adminInvoiceApi } from '@/api'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { ElMessage } from 'element-plus'

 const router = useRouter()

+// 移动端检测
+const { isMobile } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const applications = ref([])
--- a/src/pages/admin/products/index.vue
+++ b/src/pages/admin/products/index.vue
@@ -4,8 +4,13 @@
    subtitle="管理系统中的所有数据产品"
  >
    <template #actions>
-      <el-button type="primary" @click="handleCreateProduct">
-        新增产品
+      <el-button
+        type="primary"
+        :size="isMobile ? 'small' : 'default'"
+        @click="handleCreateProduct"
+      >
+        <span :class="isMobile ? 'hidden sm:inline' : ''">新增产品</span>
+        <span :class="isMobile ? 'sm:hidden' : 'hidden'">新增</span>
      </el-button>
    </template>

@@ -76,107 +81,201 @@
    </template>

    <template #table>
-      <el-table
-        v-loading="loading"
-        :data="products"
-        stripe
-        class="w-full"
-      >
-        <el-table-column prop="code" label="产品编号" width="120" />
-        <el-table-column prop="name" label="产品名称" min-width="150">
-          <template #default="{ row }">
-            <div class="flex items-center">
-              <span class="font-medium text-blue-600">{{ row.name }}</span>
-              <el-tag v-if="row.is_package" type="success" size="small" class="ml-2">组合包</el-tag>
+      <!-- 加载状态 -->
+      <div v-if="loading" class="flex justify-center items-center py-12">
+        <el-loading size="large" />
+      </div>
+
+      <!-- 移动端卡片布局 -->
+      <div v-else-if="isMobile && products.length > 0" class="product-cards">
+        <div
+          v-for="product in products"
+          :key="product.id"
+          class="product-card"
+        >
+          <div class="card-header">
+            <div class="flex-1">
+              <div class="flex items-center gap-2 mb-1">
+                <span class="font-semibold text-base text-blue-600">{{ product.name }}</span>
+                <el-tag v-if="product.is_package" type="success" size="small">组合包</el-tag>
+              </div>
+              <div class="text-xs text-gray-500">编号: {{ product.code }}</div>
            </div>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="category.name" label="分类" width="120">
-          <template #default="{ row }">
-            {{ row.category?.name || '未分类' }}
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="price" label="价格" width="120">
-          <template #default="{ row }">
-            <span class="text-red-600 font-semibold">¥{{ formatPrice(row.price) }}</span>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="cost_price" label="成本价" width="120">
-          <template #default="{ row }">
-            <span class="text-gray-600">¥{{ formatPrice(row.cost_price) }}</span>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="is_enabled" label="启用状态" width="120">
-          <template #default="{ row }">
-            <el-tag :type="row.is_enabled ? 'success' : 'danger'" size="small">
-              {{ row.is_enabled ? '已启用' : '已禁用' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="is_visible" label="展示状态" width="120">
-          <template #default="{ row }">
-            <el-tag :type="row.is_visible ? 'success' : 'warning'" size="small">
-              {{ row.is_visible ? '已展示' : '已隐藏' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-
-        <el-table-column label="操作" min-width="350" fixed="right">
-          <template #default="{ row }">
-            <div class="flex gap-2">
+            <div class="flex flex-col gap-1">
+              <el-tag :type="product.is_enabled ? 'success' : 'danger'" size="small">
+                {{ product.is_enabled ? '已启用' : '已禁用' }}
+              </el-tag>
+              <el-tag :type="product.is_visible ? 'success' : 'warning'" size="small">
+                {{ product.is_visible ? '已展示' : '已隐藏' }}
+              </el-tag>
+            </div>
+          </div>
+          <div class="card-body">
+            <div class="card-row">
+              <span class="card-label">分类</span>
+              <span class="card-value">{{ product.category?.name || '未分类' }}</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">价格</span>
+              <span class="card-value text-red-600 font-semibold">¥{{ formatPrice(product.price) }}</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">成本价</span>
+              <span class="card-value text-gray-600">¥{{ formatPrice(product.cost_price) }}</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <div class="action-buttons">
              <el-button
                type="primary"
                size="small"
-                @click="handleEditProduct(row)"
+                @click="handleEditProduct(product)"
+                class="action-btn"
              >
                编辑
              </el-button>
              <el-button
                type="info"
                size="small"
-                @click="handleViewProduct(row)"
+                @click="handleViewProduct(product)"
+                class="action-btn"
              >
                查看
              </el-button>
-              <el-button
-                type="success"
-                size="small"
-                @click="handleConfigDocumentation(row)"
-              >
-                配置文档
-              </el-button>
-              <el-button
-                v-if="row.is_enabled"
-                type="warning"
-                size="small"
-                @click="handleToggleEnabled(row, false)"
-              >
-                禁用
-              </el-button>
-              <el-button
-                v-else
-                type="success"
-                size="small"
-                @click="handleToggleEnabled(row, true)"
-              >
-                启用
-              </el-button>
-              <el-button
-                type="danger"
-                size="small"
-                @click="handleDeleteProduct(row)"
-              >
-                删除
-              </el-button>
+              <el-dropdown @command="(cmd) => handleMobileAction(cmd, product)" trigger="click">
+                <el-button type="default" size="small" class="action-btn">
+                  更多<el-icon class="ml-1"><ArrowDown /></el-icon>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item command="config-doc">配置文档</el-dropdown-item>
+                    <el-dropdown-item
+                      :command="product.is_enabled ? 'disable' : 'enable'"
+                    >
+                      {{ product.is_enabled ? '禁用' : '启用' }}
+                    </el-dropdown-item>
+                    <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
            </div>
-          </template>
-        </el-table-column>
-      </el-table>
+          </div>
+        </div>
+      </div>
+
+      <!-- 桌面端表格布局 -->
+      <div v-else>
+        <el-table
+          v-loading="loading"
+          :data="products"
+          stripe
+          class="w-full"
+        >
+          <el-table-column prop="code" label="产品编号" width="120" />
+          <el-table-column prop="name" label="产品名称" min-width="150">
+            <template #default="{ row }">
+              <div class="flex items-center">
+                <span class="font-medium text-blue-600">{{ row.name }}</span>
+                <el-tag v-if="row.is_package" type="success" size="small" class="ml-2">组合包</el-tag>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="category.name" label="分类" width="120">
+            <template #default="{ row }">
+              {{ row.category?.name || '未分类' }}
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="price" label="价格" width="120">
+            <template #default="{ row }">
+              <span class="text-red-600 font-semibold">¥{{ formatPrice(row.price) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="cost_price" label="成本价" width="120">
+            <template #default="{ row }">
+              <span class="text-gray-600">¥{{ formatPrice(row.cost_price) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="is_enabled" label="启用状态" width="120">
+            <template #default="{ row }">
+              <el-tag :type="row.is_enabled ? 'success' : 'danger'" size="small">
+                {{ row.is_enabled ? '已启用' : '已禁用' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="is_visible" label="展示状态" width="120">
+            <template #default="{ row }">
+              <el-tag :type="row.is_visible ? 'success' : 'warning'" size="small">
+                {{ row.is_visible ? '已展示' : '已隐藏' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" min-width="350" fixed="right">
+            <template #default="{ row }">
+              <div class="flex gap-2">
+                <el-button
+                  type="primary"
+                  size="small"
+                  @click="handleEditProduct(row)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  type="info"
+                  size="small"
+                  @click="handleViewProduct(row)"
+                >
+                  查看
+                </el-button>
+                <el-button
+                  type="success"
+                  size="small"
+                  @click="handleConfigDocumentation(row)"
+                >
+                  配置文档
+                </el-button>
+                <el-button
+                  v-if="row.is_enabled"
+                  type="warning"
+                  size="small"
+                  @click="handleToggleEnabled(row, false)"
+                >
+                  禁用
+                </el-button>
+                <el-button
+                  v-else
+                  type="success"
+                  size="small"
+                  @click="handleToggleEnabled(row, true)"
+                >
+                  启用
+                </el-button>
+                <el-button
+                  type="danger"
+                  size="small"
+                  @click="handleDeleteProduct(row)"
+                >
+                  删除
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="!loading && products.length === 0" class="text-center py-12">
+        <el-empty description="暂无产品数据">
+          <el-button type="primary" @click="handleCreateProduct">
+            创建第一个产品
+          </el-button>
+        </el-empty>
+      </div>
    </template>

    <template #pagination>
@@ -186,7 +285,8 @@
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="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"
      />
@@ -226,10 +326,15 @@ import ProductFormDialog from '@/components/admin/ProductFormDialog.vue'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
+import { ArrowDown } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'

 const router = useRouter()

+// 移动端检测
+const { isMobile, isTablet } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const products = ref([])
@@ -465,8 +570,165 @@ const handleFormSuccess = () => {
  closeDialog('form')
  loadProducts()
 }
+
+// 移动端操作处理
+const handleMobileAction = (command, product) => {
+  switch (command) {
+    case 'config-doc':
+      handleConfigDocumentation(product)
+      break
+    case 'enable':
+      handleToggleEnabled(product, true)
+      break
+    case 'disable':
+      handleToggleEnabled(product, false)
+      break
+    case 'delete':
+      handleDeleteProduct(product)
+      break
+  }
+}
 </script>

 <style scoped>
-/* 页面特定样式可以在这里添加 */
+/* 移动端卡片布局 */
+.product-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.product-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.card-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-label {
+  font-size: 12px;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.card-value {
+  font-size: 14px;
+  color: #1f2937;
+  font-weight: 500;
+}
+
+.card-footer {
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.action-btn {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 移动端响应式设计 */
+@media (max-width: 768px) {
+  /* 表格在移动端优化 */
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 800px;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 8px 4px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 4px;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 操作按钮在移动端优化 */
+  :deep(.el-table .el-button--small) {
+    padding: 4px 8px;
+    font-size: 11px;
+  }
+
+  /* 分页组件在移动端优化 */
+  :deep(.el-pagination) {
+    justify-content: center;
+  }
+
+  :deep(.el-pagination .el-pagination__sizes) {
+    display: none;
+  }
+
+  :deep(.el-pagination .el-pagination__total) {
+    display: none;
+  }
+
+  :deep(.el-pagination .el-pagination__jump) {
+    display: none;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .product-card {
+    padding: 12px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .card-body {
+    gap: 6px;
+  }
+
+  .card-label {
+    font-size: 11px;
+  }
+
+  .card-value {
+    font-size: 13px;
+  }
+
+  .action-buttons {
+    gap: 6px;
+  }
+
+  .action-btn {
+    font-size: 12px;
+    padding: 6px 8px;
+  }
+}
 </style>
--- a/src/pages/admin/recharge-records/index.vue
+++ b/src/pages/admin/recharge-records/index.vue
@@ -50,6 +50,7 @@
              class="w-full"
            >
            <el-option label="支付宝充值" value="alipay" />
+            <el-option label="微信充值" value="wechat" />
            <el-option label="对公转账" value="transfer" />
            <el-option label="赠送" value="gift" />
            </el-select>
@@ -70,7 +71,7 @@
            </el-select>
          </FilterItem>

-          <FilterItem label="充值时间" class="md:col-span-2">
+          <FilterItem label="充值时间" class="col-span-1 md:col-span-2">
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
@@ -81,6 +82,7 @@
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="handleTimeRangeChange"
              class="w-full"
+              :size="isMobile ? 'small' : 'default'"
            />
          </FilterItem>

@@ -181,6 +183,28 @@
            </template>
          </el-table-column>

+          <el-table-column label="订单号" min-width="180">
+            <template #default="{ row }">
+              <div class="text-sm">
+                <div v-if="row.alipay_order_id" class="text-xs">
+                  <span class="text-gray-500">支付宝：</span>
+                  <span class="font-mono">{{ row.alipay_order_id }}</span>
+                </div>
+                <div v-if="row.wechat_order_id" class="text-xs">
+                  <span class="text-gray-500">微信：</span>
+                  <span class="font-mono">{{ row.wechat_order_id }}</span>
+                </div>
+                <div v-if="row.transfer_order_id" class="text-xs">
+                  <span class="text-gray-500">转账：</span>
+                  <span class="font-mono">{{ row.transfer_order_id }}</span>
+                </div>
+                <div v-if="!row.alipay_order_id && !row.wechat_order_id && !row.transfer_order_id" class="text-gray-400">
+                  -
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+
          <el-table-column prop="created_at" label="充值时间" width="160">
            <template #default="{ row }">
              <div class="text-sm">
@@ -271,16 +295,28 @@
          <div class="info-section">
            <h4 class="text-lg font-semibold text-gray-900 mb-4">订单信息</h4>
            <div class="grid grid-cols-2 gap-4">
-              <div class="info-item">
-                <span class="info-label">订单号</span>
+              <div class="info-item" v-if="selectedRechargeRecord?.alipay_order_id">
+                <span class="info-label">支付宝订单号</span>
                <span class="info-value font-mono">{{
-                  selectedRechargeRecord?.order_id || '-'
+                  selectedRechargeRecord?.alipay_order_id || '-'
                }}</span>
              </div>
-              <div class="info-item">
-                <span class="info-label">支付流水号</span>
+              <div class="info-item" v-if="selectedRechargeRecord?.wechat_order_id">
+                <span class="info-label">微信订单号</span>
                <span class="info-value font-mono">{{
-                  selectedRechargeRecord?.payment_id || '-'
+                  selectedRechargeRecord?.wechat_order_id || '-'
+                }}</span>
+              </div>
+              <div class="info-item" v-if="selectedRechargeRecord?.transfer_order_id">
+                <span class="info-label">转账订单号</span>
+                <span class="info-value font-mono">{{
+                  selectedRechargeRecord?.transfer_order_id || '-'
+                }}</span>
+              </div>
+              <div class="info-item" v-if="selectedRechargeRecord?.platform">
+                <span class="info-label">支付平台</span>
+                <span class="info-value">{{
+                  selectedRechargeRecord?.platform || '-'
                }}</span>
              </div>
            </div>
@@ -332,6 +368,7 @@ import ExportDialog from '@/components/common/ExportDialog.vue'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { Back, Close, Download, User } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { onMounted, reactive, ref, watch } from 'vue'
@@ -340,6 +377,9 @@ import { useRoute, useRouter } from 'vue-router'
 const router = useRouter()
 const route = useRoute()

+// 移动端检测
+const { isMobile } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const rechargeRecords = ref([])
@@ -402,7 +442,29 @@ const loadRechargeRecords = async () => {
    const params = {
      page: currentPage.value,
      page_size: pageSize.value,
-      ...filters,
+    }
+
+    // 只传递非空的筛选条件
+    if (filters.company_name) {
+      params.company_name = filters.company_name
+    }
+    if (filters.recharge_type) {
+      params.recharge_type = filters.recharge_type
+    }
+    if (filters.status) {
+      params.status = filters.status
+    }
+    if (filters.min_amount) {
+      params.min_amount = filters.min_amount
+    }
+    if (filters.max_amount) {
+      params.max_amount = filters.max_amount
+    }
+    if (filters.start_time) {
+      params.start_time = filters.start_time
+    }
+    if (filters.end_time) {
+      params.end_time = filters.end_time
    }

    // 单用户模式添加用户ID筛选
@@ -455,10 +517,10 @@ const getRechargeTypeTag = (type) => {
      return 'primary'
    case 'wechat':
      return 'success'
-    case 'bank':
+    case 'transfer':
      return 'warning'
-    case 'balance':
-      return 'info'
+    case 'gift':
+      return 'success'
    default:
      return 'info'
  }
@@ -469,6 +531,8 @@ const getRechargeTypeText = (type) => {
  switch (type) {
    case 'alipay':
      return '支付宝充值'
+    case 'wechat':
+      return '微信充值'
    case 'transfer':
      return '对公转账'
    case 'gift':
--- a/src/pages/admin/statistics/SystemStatisticsPage.vue
+++ b/src/pages/admin/statistics/SystemStatisticsPage.vue
@@ -13,9 +13,8 @@
      <p class="text-red-600 mb-4">{{ error }}</p>
      <el-button @click="loadSystemStatistics" class="mt-4">重试</el-button>
    </div>
-
    <!-- 统计内容 -->
-    <div v-else-if="systemStats" class="space-y-4">
+    <div v-if="systemStats" class="space-y-4">
      <!-- 概览卡片 -->
      <div class="grid grid-cols-2 lg:grid-cols-5 gap-3 mb-4">
        <!-- 总用户数卡片 -->
@@ -103,13 +102,17 @@
          </div>
        </div>
      </div>
-
      <!-- 图表区域 - 紧凑布局 -->
      <!-- 主要内容区域 -->
      <div class="flex flex-col xl:flex-row gap-4">
+        
        <!-- 左侧图表区域 -->
        <div class="flex-1">
          <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
+            <!-- 弹幕系统区域 - 占据两列宽度 -->
+            <div class="col-span-1 xl:col-span-2">
+              <DanmakuBar />
+            </div>
            <!-- 用户注册与认证趋势 -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-3">
              <div class="flex items-center justify-between mb-3">
@@ -477,6 +480,7 @@ import {
  adminGetUserCallRanking,
  adminGetUserDomainStatistics
 } from '@/api/statistics'
+import DanmakuBar from '@/components/common/DanmakuBar.vue'
 import { Check, Loading, Money, Refresh, TrendCharts, User } from '@element-plus/icons-vue'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
@@ -657,13 +661,26 @@ const formatTime = (() => {
 // 初始化默认时间范围
 const initDefaultDateRange = () => {
  const today = new Date()
-  const thirtyDaysAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000)
+  
+  // 获取当月第一天（1号 00:00:00）
+  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
+  
+  // 格式化日期为 YYYY-MM-DD（使用本地时间，避免时区问题）
+  const formatDateLocal = (date) => {
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    return `${year}-${month}-${day}`
+  }
+  
+  // 结束日期使用今天（后端会将结束日期+1天，查询时使用 < endTime，这样可以包含今天的所有数据）
+  // 左区间：>= 当月1日，右区间：< 明天（即包含今天）
  const defaultRange = [
-    thirtyDaysAgo.toISOString().split('T')[0],
-    today.toISOString().split('T')[0]
+    formatDateLocal(firstDayOfMonth),  // 当月1日
+    formatDateLocal(today)             // 今天
  ]

-  // 为所有图表设置默认时间范围（近一个月）
+  // 为所有图表设置默认时间范围（当月1日到今天）
  userDateRange.value = [...defaultRange]
  apiCallsDateRange.value = [...defaultRange]
  consumptionDateRange.value = [...defaultRange]
@@ -1303,6 +1320,9 @@ const getNoDataMessage = (periodRef) => {
  }
 }

+
+
+
 onMounted(() => {
  initDefaultDateRange()
  loadSystemStatistics()
@@ -1321,5 +1341,4 @@ onUnmounted(() => {
 </script>

 <style scoped>
-/* 自定义样式 */
 </style>
--- a/src/pages/admin/subscriptions/index.vue
+++ b/src/pages/admin/subscriptions/index.vue
@@ -5,7 +5,7 @@
  >
    <!-- 单用户模式头部 -->
    <template #actions v-if="singleUserMode">
-      <div class="single-user-header">
+      <div :class="['single-user-header', isMobile ? 'flex-col' : '']">
        <div class="user-info">
          <el-icon class="user-icon"><user /></el-icon>
          <div class="user-details">
@@ -13,18 +13,20 @@
            <div class="user-phone">{{ currentUser?.phone || '-' }}</div>
          </div>
        </div>
-        <div class="user-actions">
-          <el-button @click="showBatchPriceDialog" type="warning" size="small">
+        <div :class="['user-actions', isMobile ? 'w-full flex-wrap' : '']">
+          <el-button :size="isMobile ? 'small' : 'small'" @click="showBatchPriceDialog" type="warning">
            <el-icon><edit /></el-icon>
-            一键改价
+            <span :class="isMobile ? 'hidden sm:inline' : ''">一键改价</span>
+            <span :class="isMobile ? 'sm:hidden' : 'hidden'">改价</span>
          </el-button>
-          <el-button @click="exitSingleUserMode" type="info" size="small">
+          <el-button :size="isMobile ? 'small' : 'small'" @click="exitSingleUserMode" type="info">
            <el-icon><close /></el-icon>
-            取消
+            <span :class="isMobile ? 'hidden sm:inline' : ''">取消</span>
          </el-button>
-          <el-button @click="goBackToUsers" type="primary" size="small">
+          <el-button :size="isMobile ? 'small' : 'small'" @click="goBackToUsers" type="primary">
            <el-icon><back /></el-icon>
-            返回用户管理
+            <span :class="isMobile ? 'hidden sm:inline' : ''">返回用户管理</span>
+            <span :class="isMobile ? 'sm:hidden' : 'hidden'">返回</span>
          </el-button>
        </div>
      </div>
@@ -62,7 +64,7 @@
          />
        </FilterItem>

-        <FilterItem label="订阅时间">
+        <FilterItem label="订阅时间" class="col-span-1">
          <el-date-picker
            v-model="filters.timeRange"
            type="datetimerange"
@@ -73,6 +75,7 @@
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="handleTimeRangeChange"
            class="w-full"
+            :size="isMobile ? 'small' : 'default'"
          />
        </FilterItem>

@@ -84,113 +87,186 @@
        </template>

        <template #buttons>
-          <el-button @click="resetFilters">重置筛选</el-button>
-          <el-button type="primary" @click="loadSubscriptions">应用筛选</el-button>
+          <div :class="['flex gap-2', isMobile ? 'flex-wrap w-full' : '']">
+            <el-button :size="isMobile ? 'small' : 'default'" @click="resetFilters" :class="isMobile ? 'flex-1' : ''">
+              重置筛选
+            </el-button>
+            <el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="loadSubscriptions" :class="isMobile ? 'flex-1' : ''">
+              应用筛选
+            </el-button>
+          </div>
        </template>
      </FilterSection>
    </template>

    <template #table>
+      <!-- 加载状态 -->
      <div v-if="loading" class="flex justify-center items-center py-12">
        <el-loading size="large" />
      </div>

-      <div v-else-if="subscriptions.length === 0" class="text-center py-12">
+      <!-- 移动端卡片布局 -->
+      <div v-else-if="isMobile && subscriptions.length > 0" class="subscription-cards">
+        <div
+          v-for="subscription in subscriptions"
+          :key="subscription.id"
+          class="subscription-card"
+        >
+          <div class="card-header">
+            <div class="flex-1">
+              <div class="flex items-center gap-2 mb-1">
+                <span class="font-semibold text-base text-blue-600">{{ subscription.product?.name || subscription.product_admin?.name || '未知产品' }}</span>
+                <el-tag v-if="subscription.product?.is_package || subscription.product_admin?.is_package" type="success" size="small">组合包</el-tag>
+              </div>
+              <div class="text-xs text-gray-500">编号: {{ subscription.product?.code || subscription.product_admin?.code || '-' }}</div>
+              <div v-if="!singleUserMode" class="text-xs text-gray-500 mt-1">公司: {{ subscription.user?.company_name || '未知公司' }}</div>
+            </div>
+          </div>
+          <div class="card-body">
+            <div class="card-row">
+              <span class="card-label">订阅价格</span>
+              <span class="card-value text-red-600 font-semibold">¥{{ formatPrice(subscription.price) }}</span>
+            </div>
+            <div v-if="(subscription.product?.price || subscription.product_admin?.price) && (subscription.product?.price || subscription.product_admin?.price) !== subscription.price" class="card-row">
+              <span class="card-label">折扣</span>
+              <span class="card-value text-blue-600 text-sm">{{ calculateDiscount(subscription.product?.price || subscription.product_admin?.price, subscription.price) }}折</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">产品原价</span>
+              <span class="card-value text-gray-700">¥{{ formatPrice(subscription.product?.price || subscription.product_admin?.price) }}</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">成本价</span>
+              <span class="card-value text-gray-600">¥{{ formatPrice(subscription.product_admin?.cost_price) }}</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">订阅时间</span>
+              <span class="card-value text-sm">{{ formatDate(subscription.created_at) }} {{ formatTime(subscription.created_at) }}</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <div class="action-buttons">
+              <el-button
+                type="primary"
+                size="small"
+                @click="handleEditPrice(subscription)"
+                class="action-btn"
+              >
+                调整价格
+              </el-button>
+              <el-button
+                type="info"
+                size="small"
+                @click="handleViewDetails(subscription)"
+                class="action-btn"
+              >
+                查看详情
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 桌面端表格布局 -->
+      <div v-else-if="!isMobile" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+        <div class="table-container">
+          <el-table
+            :data="subscriptions"
+            style="width: 100%"
+            :header-cell-style="{
+              background: '#f8fafc',
+              color: '#475569',
+              fontWeight: '600',
+              fontSize: '14px'
+            }"
+            :cell-style="{
+              fontSize: '14px',
+              color: '#1e293b'
+            }"
+          >
+            <el-table-column label="公司名称" min-width="200">
+              <template #default="{ row }">
+                <div>
+                  <div class="font-medium text-gray-900">{{ row.user?.company_name || '未知公司' }}</div>
+                  <div class="text-sm text-gray-500">{{ row.user?.phone || '-' }}</div>
+                </div>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="产品信息" min-width="200">
+              <template #default="{ row }">
+                <div>
+                  <div class="font-medium text-gray-900">{{ row.product?.name || row.product_admin?.name || '未知产品' }}</div>
+                  <div class="text-sm text-gray-500">{{ row.product?.code || row.product_admin?.code || '-' }}</div>
+                  <el-tag v-if="row.product?.is_package || row.product_admin?.is_package" type="success" size="small" class="mt-1">组合包</el-tag>
+                </div>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="price" label="订阅价格" width="150">
+              <template #default="{ row }">
+                <div class="flex flex-col gap-1">
+                  <span class="font-semibold text-red-600">¥{{ formatPrice(row.price) }}</span>
+                  <div v-if="(row.product?.price || row.product_admin?.price) && (row.product?.price || row.product_admin?.price) !== row.price" class="text-xs text-blue-600">
+                    ({{ calculateDiscount(row.product?.price || row.product_admin?.price, row.price) }}折)
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="产品原价" width="120">
+              <template #default="{ row }">
+                <span class="font-medium text-gray-700">¥{{ formatPrice(row.product?.price || row.product_admin?.price) }}</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="成本价" width="120">
+              <template #default="{ row }">
+                <span class="font-medium text-gray-600">¥{{ formatPrice(row.product_admin?.cost_price) }}</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="created_at" label="订阅时间" width="160">
+              <template #default="{ row }">
+                <div class="text-sm">
+                  <div class="text-gray-900">{{ formatDate(row.created_at) }}</div>
+                  <div class="text-gray-500">{{ formatTime(row.created_at) }}</div>
+                </div>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="操作" width="200" fixed="right">
+              <template #default="{ row }">
+                <div class="flex items-center space-x-2">
+                  <el-button
+                    type="primary"
+                    size="small"
+                    @click="handleEditPrice(row)"
+                  >
+                    调整价格
+                  </el-button>
+                  <el-button
+                    type="info"
+                    size="small"
+                    @click="handleViewDetails(row)"
+                  >
+                    查看详情
+                  </el-button>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="!loading && subscriptions.length === 0" class="text-center py-12">
        <el-empty description="暂无订阅数据">
          <el-button type="primary" @click="loadSubscriptions">
            重新加载
          </el-button>
        </el-empty>
      </div>
-
-      <div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
-        <el-table
-          :data="subscriptions"
-          style="width: 100%"
-          :header-cell-style="{
-            background: '#f8fafc',
-            color: '#475569',
-            fontWeight: '600',
-            fontSize: '14px'
-          }"
-          :cell-style="{
-            fontSize: '14px',
-            color: '#1e293b'
-          }"
-        >
-          <el-table-column label="公司名称" min-width="200">
-            <template #default="{ row }">
-              <div>
-                <div class="font-medium text-gray-900">{{ row.user?.company_name || '未知公司' }}</div>
-                <div class="text-sm text-gray-500">{{ row.user?.phone || '-' }}</div>
-              </div>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="产品信息" min-width="200">
-            <template #default="{ row }">
-              <div>
-                <div class="font-medium text-gray-900">{{ row.product?.name || row.product_admin?.name || '未知产品' }}</div>
-                <div class="text-sm text-gray-500">{{ row.product?.code || row.product_admin?.code || '-' }}</div>
-                <el-tag v-if="row.product?.is_package || row.product_admin?.is_package" type="success" size="small" class="mt-1">组合包</el-tag>
-              </div>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="price" label="订阅价格" width="150">
-            <template #default="{ row }">
-              <div class="flex flex-col gap-1">
-                <span class="font-semibold text-red-600">¥{{ formatPrice(row.price) }}</span>
-                <div v-if="(row.product?.price || row.product_admin?.price) && (row.product?.price || row.product_admin?.price) !== row.price" class="text-xs text-blue-600">
-                  ({{ calculateDiscount(row.product?.price || row.product_admin?.price, row.price) }}折)
-                </div>
-              </div>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="产品原价" width="120">
-            <template #default="{ row }">
-              <span class="font-medium text-gray-700">¥{{ formatPrice(row.product?.price || row.product_admin?.price) }}</span>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="成本价" width="120">
-            <template #default="{ row }">
-              <span class="font-medium text-gray-600">¥{{ formatPrice(row.product_admin?.cost_price) }}</span>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="created_at" label="订阅时间" width="160">
-            <template #default="{ row }">
-              <div class="text-sm">
-                <div class="text-gray-900">{{ formatDate(row.created_at) }}</div>
-                <div class="text-gray-500">{{ formatTime(row.created_at) }}</div>
-              </div>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="操作" width="200" fixed="right">
-            <template #default="{ row }">
-              <div class="flex items-center space-x-2">
-                <el-button
-                  type="primary"
-                  size="small"
-                  @click="handleEditPrice(row)"
-                >
-                  调整价格
-                </el-button>
-                <el-button
-                  type="info"
-                  size="small"
-                  @click="handleViewDetails(row)"
-                >
-                  查看详情
-                </el-button>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
    </template>

    <template #pagination>
@@ -200,7 +276,8 @@
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="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"
      />
@@ -211,7 +288,7 @@
      <el-dialog
        v-model="priceDialogVisible"
        title="调整订阅价格"
-        width="600px"
+        :width="isMobile ? '90%' : '600px'"
        class="price-dialog"
      >
        <el-form
@@ -340,9 +417,19 @@
        </el-form>

        <template #footer>
-          <div class="flex justify-end gap-3">
-            <el-button @click="priceDialogVisible = false">取消</el-button>
-            <el-button type="primary" @click="handleUpdatePrice" :loading="updatingPrice">
+          <div :class="['flex gap-3', isMobile ? 'flex-col' : 'justify-end']">
+            <el-button
+              :class="isMobile ? 'w-full' : ''"
+              @click="priceDialogVisible = false"
+            >
+              取消
+            </el-button>
+            <el-button
+              type="primary"
+              :class="isMobile ? 'w-full' : ''"
+              @click="handleUpdatePrice"
+              :loading="updatingPrice"
+            >
              确认调整
            </el-button>
          </div>
@@ -353,7 +440,7 @@
      <el-dialog
        v-model="batchPriceDialogVisible"
        title="一键改价"
-        width="500px"
+        :width="isMobile ? '90%' : '500px'"
        class="batch-price-dialog"
      >
        <el-form
@@ -433,10 +520,16 @@
        </el-form>

        <template #footer>
-          <div class="flex justify-end gap-3">
-            <el-button @click="batchPriceDialogVisible = false">取消</el-button>
+          <div :class="['flex gap-3', isMobile ? 'flex-col' : 'justify-end']">
+            <el-button
+              :class="isMobile ? 'w-full' : ''"
+              @click="batchPriceDialogVisible = false"
+            >
+              取消
+            </el-button>
            <el-button
              type="warning"
+              :class="isMobile ? 'w-full' : ''"
              @click="handleBatchUpdatePrice"
              :loading="updatingBatchPrice"
            >
@@ -454,6 +547,7 @@ import { productAdminApi, userApi } from '@/api'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { Back, Close, Edit, QuestionFilled, User, Warning } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useRoute, useRouter } from 'vue-router'
@@ -462,6 +556,9 @@ import { useRoute, useRouter } from 'vue-router'
 const router = useRouter()
 const route = useRoute()

+// 移动端检测
+const { isMobile, isTablet } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const subscriptions = ref([])
@@ -1120,6 +1217,82 @@ const handleBatchUpdatePrice = async () => {
  background: #f8fafc !important;
 }

+/* 移动端卡片布局 */
+.subscription-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.subscription-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.card-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.card-label {
+  font-size: 12px;
+  color: #6b7280;
+  font-weight: 500;
+  min-width: 80px;
+  flex-shrink: 0;
+}
+
+.card-value {
+  font-size: 14px;
+  color: #1f2937;
+  text-align: right;
+  word-break: break-word;
+  flex: 1;
+}
+
+.card-footer {
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.action-btn {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 表格容器 */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 /* 响应式设计 */
@media (max-width: 768px) {
  .single-user-header {
@@ -1133,9 +1306,93 @@ const handleBatchUpdatePrice = async () => {
    justify-content: flex-end;
  }

-  .price-dialog :deep(.el-dialog) {
+  .price-dialog :deep(.el-dialog),
+  .batch-price-dialog :deep(.el-dialog) {
    margin: 20px;
    width: calc(100% - 40px) !important;
  }
+
+  /* 表格在移动端优化 */
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 1000px;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 8px 4px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 4px;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 分页组件在移动端优化 */
+  :deep(.el-pagination) {
+    justify-content: center;
+  }
+
+  :deep(.el-pagination .el-pagination__sizes) {
+    display: none;
+  }
+
+  :deep(.el-pagination .el-pagination__total) {
+    display: none;
+  }
+
+  :deep(.el-pagination .el-pagination__jump) {
+    display: none;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .subscription-card {
+    padding: 12px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .card-body {
+    gap: 6px;
+  }
+
+  .card-label {
+    font-size: 11px;
+    min-width: 70px;
+  }
+
+  .card-value {
+    font-size: 13px;
+  }
+
+  .card-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .card-value {
+    text-align: left;
+  }
+
+  .action-buttons {
+    gap: 6px;
+  }
+
+  .action-btn {
+    font-size: 12px;
+    padding: 6px 8px;
+  }
 }
 </style>
--- a/src/pages/admin/transactions/index.vue
+++ b/src/pages/admin/transactions/index.vue
@@ -5,28 +5,30 @@
  >
    <!-- 单用户模式显示 -->
    <template #stats v-if="singleUserMode">
-      <div class="flex items-center gap-2 text-sm text-gray-600">
-        <User class="w-4 h-4" />
-        <span>当前用户：{{ currentUser?.company_name || currentUser?.phone }}</span>
-        <span class="text-gray-400">(仅显示当前用户)</span>
+      <div :class="['flex items-center gap-2 text-sm text-gray-600', isMobile ? 'flex-wrap' : '']">
+        <User class="w-4 h-4 flex-shrink-0" />
+        <span class="truncate">当前用户：{{ currentUser?.company_name || currentUser?.phone }}</span>
+        <span :class="['text-gray-400', isMobile ? 'w-full text-xs' : '']">(仅显示当前用户)</span>
      </div>
    </template>

    <!-- 单用户模式操作按钮 -->
    <template #actions v-if="singleUserMode">
-      <div class="flex items-center gap-3">
-        <div class="flex items-center gap-2 text-sm text-gray-600">
+      <div :class="['flex items-center gap-3', isMobile ? 'flex-wrap' : '']">
+        <div :class="['flex items-center gap-2 text-sm text-gray-600', isMobile ? 'w-full mb-2' : '']">
          <User class="w-4 h-4" />
-          <span>{{ currentUser?.company_name || currentUser?.phone }}</span>
+          <span class="truncate">{{ currentUser?.company_name || currentUser?.phone }}</span>
+        </div>
+        <div :class="['flex gap-2', isMobile ? 'w-full' : '']">
+          <el-button :size="isMobile ? 'small' : 'default'" @click="exitSingleUserMode" :class="isMobile ? 'flex-1' : ''">
+            <Close class="w-4 h-4 mr-1" />
+            取消
+          </el-button>
+          <el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="goBackToUsers" :class="isMobile ? 'flex-1' : ''">
+            <Back class="w-4 h-4 mr-1" />
+            返回用户管理
+          </el-button>
        </div>
-        <el-button size="small" @click="exitSingleUserMode">
-          <Close class="w-4 h-4 mr-1" />
-          取消
-        </el-button>
-        <el-button size="small" type="primary" @click="goBackToUsers">
-          <Back class="w-4 h-4 mr-1" />
-          返回用户管理
-        </el-button>
      </div>
    </template>

@@ -64,7 +66,7 @@
            />
          </FilterItem>

-          <FilterItem label="消费时间" class="md:col-span-2">
+          <FilterItem label="消费时间" class="col-span-1 md:col-span-2">
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
@@ -75,25 +77,26 @@
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="handleTimeRangeChange"
              class="w-full"
+              :size="isMobile ? 'small' : 'default'"
            />
          </FilterItem>

          <FilterItem label="金额范围">
-            <div class="flex gap-2">
+            <div :class="['flex gap-2', isMobile ? 'flex-col' : '']">
              <el-input
                v-model="filters.min_amount"
                placeholder="最小金额"
                clearable
                @input="handleFilterChange"
-                class="flex-1"
+                :class="isMobile ? 'w-full' : 'flex-1'"
              />
-              <span class="text-gray-400 self-center">-</span>
+              <span :class="['text-gray-400 self-center', isMobile ? 'hidden' : '']">-</span>
              <el-input
                v-model="filters.max_amount"
                placeholder="最大金额"
                clearable
                @input="handleFilterChange"
-                class="flex-1"
+                :class="isMobile ? 'w-full' : 'flex-1'"
              />
            </div>
          </FilterItem>
@@ -104,12 +107,18 @@
        </template>

        <template #buttons>
-          <el-button @click="resetFilters">重置筛选</el-button>
-          <el-button type="primary" @click="loadTransactions">应用筛选</el-button>
-          <el-button type="success" @click="showExportDialog">
-            <Download class="w-4 h-4 mr-1" />
-            导出数据
-          </el-button>
+          <div :class="['flex gap-2', isMobile ? 'flex-wrap w-full' : '']">
+            <el-button :size="isMobile ? 'small' : 'default'" @click="resetFilters" :class="isMobile ? 'flex-1' : ''">
+              重置筛选
+            </el-button>
+            <el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="loadTransactions" :class="isMobile ? 'flex-1' : ''">
+              应用筛选
+            </el-button>
+            <el-button :size="isMobile ? 'small' : 'default'" type="success" @click="showExportDialog" :class="isMobile ? 'flex-1' : ''">
+              <Download class="w-4 h-4 mr-1" />
+              导出数据
+            </el-button>
+          </div>
        </template>
      </FilterSection>
    </template>
@@ -120,73 +129,129 @@
        <el-loading size="large" />
      </div>

-      <div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
-        <el-table
-          :data="transactions"
-          style="width: 100%"
-          :header-cell-style="{
-            background: '#f8fafc',
-            color: '#475569',
-            fontWeight: '600',
-            fontSize: '14px'
-          }"
-          :cell-style="{
-            fontSize: '14px',
-            color: '#1e293b'
-          }"
+      <!-- 移动端卡片布局 -->
+      <div v-else-if="isMobile && transactions.length > 0" class="transaction-cards">
+        <div
+          v-for="transaction in transactions"
+          :key="transaction.id"
+          class="transaction-card"
        >
-          <el-table-column prop="transaction_id" label="交易ID" min-width="180">
-            <template #default="{ row }">
-              <span class="font-mono text-sm text-gray-600">{{ row.transaction_id }}</span>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="company_name" label="企业名称" min-width="150" v-if="!singleUserMode">
-            <template #default="{ row }">
-              <div>
-                <div class="font-medium text-blue-600">{{ row.company_name || '未知企业' }}</div>
-                <div class="text-xs text-gray-500">{{ row.user?.phone }}</div>
+          <div class="card-header">
+            <div class="flex-1">
+              <div class="flex items-center gap-2 mb-1">
+                <span class="font-mono text-sm text-gray-600 truncate">{{ transaction.transaction_id }}</span>
              </div>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="product_name" label="产品名称" min-width="150">
-            <template #default="{ row }">
-              <div>
-                <div class="font-medium text-blue-600">{{ row.product_name || '未知产品' }}</div>
+              <div v-if="!singleUserMode && transaction.company_name" class="text-xs text-gray-500 truncate">
+                {{ transaction.company_name }}
              </div>
-            </template>
-          </el-table-column>
+            </div>
+            <span class="font-semibold text-red-600 text-lg">¥{{ formatPrice(transaction.amount) }}</span>
+          </div>
+          <div class="card-body">
+            <div v-if="!singleUserMode && transaction.user?.phone" class="card-row">
+              <span class="card-label">手机号</span>
+              <span class="card-value text-sm">{{ transaction.user.phone }}</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">产品名称</span>
+              <span class="card-value text-blue-600 font-medium">{{ transaction.product_name || '未知产品' }}</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">消费时间</span>
+              <span class="card-value text-sm">
+                <div>{{ formatDate(transaction.created_at) }}</div>
+                <div class="text-gray-500">{{ formatTime(transaction.created_at) }}</div>
+              </span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <el-button
+              type="primary"
+              size="small"
+              @click="handleViewDetail(transaction)"
+              class="action-btn w-full"
+            >
+              查看详情
+            </el-button>
+          </div>
+        </div>
+      </div>

-          <el-table-column prop="amount" label="消费金额" width="120">
-            <template #default="{ row }">
-              <span class="font-semibold text-red-600">¥{{ formatPrice(row.amount) }}</span>
-            </template>
-          </el-table-column>
+      <!-- 桌面端表格布局 -->
+      <div v-else-if="!isMobile" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+        <div class="table-container">
+          <el-table
+            :data="transactions"
+            style="width: 100%"
+            :header-cell-style="{
+              background: '#f8fafc',
+              color: '#475569',
+              fontWeight: '600',
+              fontSize: '14px'
+            }"
+            :cell-style="{
+              fontSize: '14px',
+              color: '#1e293b'
+            }"
+          >
+            <el-table-column prop="transaction_id" label="交易ID" min-width="180">
+              <template #default="{ row }">
+                <span class="font-mono text-sm text-gray-600">{{ row.transaction_id }}</span>
+              </template>
+            </el-table-column>

-          <el-table-column prop="created_at" label="消费时间" width="160">
-            <template #default="{ row }">
-              <div class="text-sm">
-                <div class="text-gray-900">{{ formatDate(row.created_at) }}</div>
-                <div class="text-gray-500">{{ formatTime(row.created_at) }}</div>
-              </div>
-            </template>
-          </el-table-column>
+            <el-table-column prop="company_name" label="企业名称" min-width="150" v-if="!singleUserMode">
+              <template #default="{ row }">
+                <div>
+                  <div class="font-medium text-blue-600">{{ row.company_name || '未知企业' }}</div>
+                  <div class="text-xs text-gray-500">{{ row.user?.phone }}</div>
+                </div>
+              </template>
+            </el-table-column>

-          <el-table-column label="操作" width="120" fixed="right">
-            <template #default="{ row }">
-              <div class="flex items-center space-x-2">
-                <el-button
-                  size="small"
-                  type="primary"
-                  @click="handleViewDetail(row)"
-                >
-                  查看详情
-                </el-button>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
+            <el-table-column prop="product_name" label="产品名称" min-width="150">
+              <template #default="{ row }">
+                <div>
+                  <div class="font-medium text-blue-600">{{ row.product_name || '未知产品' }}</div>
+                </div>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="amount" label="消费金额" width="120">
+              <template #default="{ row }">
+                <span class="font-semibold text-red-600">¥{{ formatPrice(row.amount) }}</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="created_at" label="消费时间" width="160">
+              <template #default="{ row }">
+                <div class="text-sm">
+                  <div class="text-gray-900">{{ formatDate(row.created_at) }}</div>
+                  <div class="text-gray-500">{{ formatTime(row.created_at) }}</div>
+                </div>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="操作" width="120" fixed="right">
+              <template #default="{ row }">
+                <div class="flex items-center space-x-2">
+                  <el-button
+                    size="small"
+                    type="primary"
+                    @click="handleViewDetail(row)"
+                  >
+                    查看详情
+                  </el-button>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-else-if="!loading && transactions.length === 0" class="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center">
+        <p class="text-gray-500">暂无消费记录</p>
      </div>
    </template>

@@ -198,137 +263,26 @@
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="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"
      />
    </template>

    <template #extra>
-      <!-- 导出数据弹窗 -->
-      <el-dialog
-        v-model="exportDialogVisible"
-        title="导出消费记录"
-        width="600px"
-        class="export-dialog"
-      >
-        <div class="space-y-6">
-          <!-- 导出范围设置 -->
-          <div class="export-section">
-            <h4 class="text-lg font-semibold text-gray-900 mb-4">筛选条件</h4>
-            <div class="grid grid-cols-1 gap-4">
-              <!-- 企业选择 -->
-              <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">选择企业</label>
-                <el-select
-                  v-model="exportOptions.companyIds"
-                  multiple
-                  filterable
-                  remote
-                  reserve-keyword
-                  placeholder="搜索并选择企业（不选则导出所有）"
-                  class="w-full"
-                  clearable
-                  :remote-method="handleCompanySearch"
-                  :loading="companyLoading"
-                  @focus="loadCompanyOptions"
-                  @visible-change="handleCompanyVisibleChange"
-                >
-                  <el-option
-                    v-for="company in companyOptions"
-                    :key="company.id"
-                    :label="company.company_name"
-                    :value="company.id"
-                  />
-                  <div v-if="companyLoading" class="text-center py-2">
-                    <span class="text-gray-500">加载中...</span>
-                  </div>
-                </el-select>
-              </div>
-
-              <!-- 日期范围 -->
-              <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">时间范围</label>
-                <el-date-picker
-                  v-model="exportOptions.dateRange"
-                  type="datetimerange"
-                  range-separator="至"
-                  start-placeholder="开始时间"
-                  end-placeholder="结束时间"
-                  format="YYYY-MM-DD HH:mm:ss"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  class="w-full"
-                />
-              </div>
-
-              <!-- 产品选择 -->
-              <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">选择产品</label>
-                <el-select
-                  v-model="exportOptions.productIds"
-                  multiple
-                  filterable
-                  remote
-                  reserve-keyword
-                  placeholder="搜索并选择产品（不选则导出所有）"
-                  class="w-full"
-                  clearable
-                  :remote-method="handleProductSearch"
-                  :loading="productLoading"
-                  @focus="loadProductOptions"
-                  @visible-change="handleProductVisibleChange"
-                >
-                  <el-option
-                    v-for="product in productOptions"
-                    :key="product.id"
-                    :label="product.name"
-                    :value="product.id"
-                  />
-                  <div v-if="productLoading" class="text-center py-2">
-                    <span class="text-gray-500">加载中...</span>
-                  </div>
-                </el-select>
-              </div>
-            </div>
-          </div>
-
-          <!-- 导出格式选择 -->
-          <div class="export-section">
-            <h4 class="text-lg font-semibold text-gray-900 mb-4">导出格式</h4>
-            <el-radio-group v-model="exportOptions.format">
-              <el-radio value="excel">Excel (.xlsx)</el-radio>
-              <el-radio value="csv">CSV (.csv)</el-radio>
-            </el-radio-group>
-          </div>
-        </div>
-
-        <template #footer>
-          <div class="flex justify-end gap-3">
-            <el-button @click="exportDialogVisible = false">取消</el-button>
-            <el-button
-              type="primary"
-              @click="handleExport"
-              :loading="exportLoading"
-            >
-              <Download class="w-4 h-4 mr-1" />
-              开始导出
-            </el-button>
-          </div>
-        </template>
-      </el-dialog>
-
      <!-- 消费记录详情弹窗 -->
      <el-dialog
        v-model="detailDialogVisible"
        title="消费记录详情"
-        width="800px"
+        :width="isMobile ? '90%' : '800px'"
        class="transaction-detail-dialog"
      >
        <div v-if="selectedTransaction" class="space-y-6">
          <!-- 基本信息 -->
          <div class="info-section">
            <h4 class="text-lg font-semibold text-gray-900 mb-4">基本信息</h4>
-            <div class="grid grid-cols-2 gap-4">
+            <div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-2']">
              <div class="info-item">
                <span class="info-label">交易ID</span>
                <span class="info-value font-mono">{{ selectedTransaction?.transaction_id || '-' }}</span>
@@ -351,7 +305,7 @@
          <!-- 时间信息 -->
          <div class="info-section">
            <h4 class="text-lg font-semibold text-gray-900 mb-4">时间信息</h4>
-            <div class="grid grid-cols-2 gap-4">
+            <div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-2']">
              <div class="info-item">
                <span class="info-label">消费时间</span>
                <span class="info-value">{{ formatDateTime(selectedTransaction?.created_at) }}</span>
@@ -390,6 +344,7 @@ import ExportDialog from '@/components/common/ExportDialog.vue'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { Back, Close, Download, User } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { onMounted, reactive, ref, watch } from 'vue'
@@ -398,6 +353,9 @@ import { useRoute, useRouter } from 'vue-router'
 const router = useRouter()
 const route = useRoute()

+// 移动端检测
+const { isMobile, isTablet } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const transactions = ref([])
@@ -739,6 +697,75 @@ watch(() => route.query.user_id, async (newUserId) => {
  background: #f8fafc !important;
 }

+/* 表格容器 */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 移动端卡片布局 */
+.transaction-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.transaction-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.card-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.card-label {
+  font-size: 12px;
+  color: #6b7280;
+  font-weight: 500;
+  min-width: 80px;
+  flex-shrink: 0;
+}
+
+.card-value {
+  font-size: 14px;
+  color: #1f2937;
+  text-align: right;
+  word-break: break-word;
+  flex: 1;
+}
+
+.card-footer {
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
+}
+
+.action-btn {
+  width: 100%;
+}
+
 /* 响应式设计 */
@media (max-width: 768px) {
  .info-item {
@@ -750,5 +777,92 @@ watch(() => route.query.user_id, async (newUserId) => {
  .info-label {
    min-width: auto;
  }
+
+  /* 表格在移动端优化 */
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 1000px;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 8px 4px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 4px;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 分页组件在移动端优化 */
+  :deep(.el-pagination) {
+    justify-content: center;
+  }
+
+  :deep(.el-pagination .el-pagination__sizes) {
+    display: none;
+  }
+
+  :deep(.el-pagination .el-pagination__total) {
+    display: none;
+  }
+
+  :deep(.el-pagination .el-pagination__jump) {
+    display: none;
+  }
+
+  /* 对话框在移动端优化 */
+  .transaction-detail-dialog :deep(.el-dialog__body),
+  .export-dialog :deep(.el-dialog__body) {
+    padding: 16px;
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .transaction-card {
+    padding: 12px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .card-body {
+    gap: 6px;
+  }
+
+  .card-label {
+    font-size: 11px;
+    min-width: 70px;
+  }
+
+  .card-value {
+    font-size: 13px;
+  }
+
+  .card-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .card-value {
+    text-align: left;
+  }
+
+  .action-btn {
+    font-size: 12px;
+    padding: 6px 8px;
+  }
 }
 </style>
--- a/src/pages/admin/usage/index.vue
+++ b/src/pages/admin/usage/index.vue
@@ -14,18 +14,19 @@

    <!-- 单用户模式操作按钮 -->
    <template #actions v-if="singleUserMode">
-      <div class="flex items-center gap-3">
-        <div class="flex items-center gap-2 text-sm text-gray-600">
+      <div :class="['flex items-center gap-3', isMobile ? 'flex-wrap' : '']">
+        <div :class="['flex items-center gap-2 text-sm text-gray-600', isMobile ? 'w-full mb-2' : '']">
          <User class="w-4 h-4" />
-          <span>{{ currentUser?.company_name || currentUser?.phone }}</span>
+          <span :class="isMobile ? 'truncate flex-1' : ''">{{ currentUser?.company_name || currentUser?.phone }}</span>
        </div>
-        <el-button size="small" @click="exitSingleUserMode">
+        <el-button :size="isMobile ? 'small' : 'small'" @click="exitSingleUserMode">
          <Close class="w-4 h-4 mr-1" />
-          取消
+          <span :class="isMobile ? 'hidden sm:inline' : ''">取消</span>
        </el-button>
-        <el-button size="small" type="primary" @click="goBackToUsers">
+        <el-button :size="isMobile ? 'small' : 'small'" type="primary" @click="goBackToUsers">
          <Back class="w-4 h-4 mr-1" />
-          返回用户管理
+          <span :class="isMobile ? 'hidden sm:inline' : ''">返回用户管理</span>
+          <span :class="isMobile ? 'sm:hidden' : 'hidden'">返回</span>
        </el-button>
      </div>
    </template>
@@ -79,17 +80,18 @@
            </el-select>
          </FilterItem>

-          <FilterItem label="调用时间" class="md:col-span-2">
+          <FilterItem label="调用时间" class="col-span-1 md:col-span-2">
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              range-separator="至"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              format="YYYY-MM-DD HH:mm:ss"
+              :start-placeholder="isMobile ? '开始' : '开始时间'"
+              :end-placeholder="isMobile ? '结束' : '结束时间'"
+              :format="isMobile ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD HH:mm:ss'"
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="handleTimeRangeChange"
-              class="w-full"
+              :class="['date-picker-mobile', isMobile ? 'w-auto' : 'w-full']"
+              :size="isMobile ? 'small' : 'default'"
            />
          </FilterItem>
        </div>
@@ -343,6 +345,7 @@ import ExportDialog from '@/components/common/ExportDialog.vue'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { Back, Close, Download, User } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { onMounted, reactive, ref, watch } from 'vue'
@@ -351,6 +354,9 @@ import { useRoute, useRouter } from 'vue-router'
 const router = useRouter()
 const route = useRoute()

+// 移动端检测
+const { isMobile, isTablet } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const apiCalls = ref([])
@@ -742,5 +748,15 @@ const handleExport = async (options) => {
  .info-label {
    min-width: auto;
  }
+
+  /* 移动端时间筛选器宽度限制 */
+  .date-picker-mobile {
+    max-width: 300px !important;
+    width: 100%;
+  }
+  
+  .date-picker-mobile :deep(.el-date-editor) {
+    width: 100%;
+  }
 }
 </style>
--- a/src/pages/admin/users/index.vue
+++ b/src/pages/admin/users/index.vue
@@ -5,16 +5,16 @@
  >
    <!-- 统计信息 -->
    <template #actions>
-      <div class="flex gap-4">
-        <div class="stat-item">
+      <div :class="['flex gap-4', isMobile ? 'flex-wrap justify-center' : '']">
+        <div :class="['stat-item', isMobile ? 'flex-1 min-w-0' : '']">
          <div class="stat-value">{{ stats.total_users || 0 }}</div>
          <div class="stat-label">总用户数</div>
        </div>
-        <div class="stat-item">
+        <div :class="['stat-item', isMobile ? 'flex-1 min-w-0' : '']">
          <div class="stat-value">{{ stats.certified_users || 0 }}</div>
          <div class="stat-label">已认证用户</div>
        </div>
-        <div class="stat-item">
+        <div :class="['stat-item', isMobile ? 'flex-1 min-w-0' : '']">
          <div class="stat-value">{{ stats.active_users || 0 }}</div>
          <div class="stat-label">活跃用户</div>
        </div>
@@ -74,150 +74,279 @@
        </template>

        <template #buttons>
-          <el-button @click="resetFilters">重置筛选</el-button>
-          <el-button type="primary" @click="loadUsers">应用筛选</el-button>
+          <div :class="['flex gap-2', isMobile ? 'flex-wrap w-full' : '']">
+            <el-button :size="isMobile ? 'small' : 'default'" @click="resetFilters" :class="isMobile ? 'flex-1' : ''">
+              重置筛选
+            </el-button>
+            <el-button :size="isMobile ? 'small' : 'default'" type="primary" @click="loadUsers" :class="isMobile ? 'flex-1' : ''">
+              应用筛选
+            </el-button>
+          </div>
        </template>
      </FilterSection>
    </template>

    <template #table>
+      <!-- 加载状态 -->
      <div v-if="loading" class="flex justify-center items-center py-12">
        <el-loading size="large" />
      </div>

-      <div v-else-if="users.length === 0" class="text-center py-12">
-        <el-empty description="暂无用户数据" />
+      <!-- 移动端卡片布局 -->
+      <div v-else-if="isMobile && users.length > 0" class="user-cards">
+        <div
+          v-for="user in users"
+          :key="user.id"
+          class="user-card"
+        >
+          <div class="card-header">
+            <div class="flex-1">
+              <div class="flex items-center gap-2 mb-1">
+                <span class="font-semibold text-base text-blue-600 font-mono">{{ formatPhone(user.phone) }}</span>
+                <el-tag
+                  :type="user.is_active ? 'success' : 'warning'"
+                  size="small"
+                >
+                  {{ user.is_active ? '已激活' : '未激活' }}
+                </el-tag>
+                <el-tag
+                  :type="user.is_certified ? 'success' : 'info'"
+                  size="small"
+                >
+                  {{ user.is_certified ? '已认证' : '未认证' }}
+                </el-tag>
+              </div>
+              <div v-if="user.username" class="text-xs text-gray-500">用户名: {{ user.username }}</div>
+            </div>
+          </div>
+          <div class="card-body">
+            <div class="card-row">
+              <span class="card-label">钱包余额</span>
+              <span class="card-value text-green-600 font-semibold">¥{{ formatMoney(user.wallet_balance || '0') }}</span>
+            </div>
+            <div v-if="user.enterprise_info" class="card-row">
+              <span class="card-label">企业名称</span>
+              <span class="card-value">{{ user.enterprise_info.company_name || '-' }}</span>
+            </div>
+            <div v-if="user.enterprise_info" class="card-row">
+              <span class="card-label">法人姓名</span>
+              <span class="card-value text-sm">{{ user.enterprise_info.legal_person_name || '-' }}</span>
+            </div>
+            <div class="card-row">
+              <span class="card-label">注册时间</span>
+              <span class="card-value text-sm">{{ formatDate(user.created_at) }} {{ formatTime(user.created_at) }}</span>
+            </div>
+          </div>
+          <div class="card-footer">
+            <div class="action-buttons">
+              <el-button
+                type="primary"
+                size="small"
+                @click="handleViewUser(user)"
+                class="action-btn"
+              >
+                查看详情
+              </el-button>
+              <el-button
+                type="warning"
+                size="small"
+                @click="handleRecharge(user)"
+                :disabled="!user.is_certified"
+                class="action-btn"
+              >
+                充值
+              </el-button>
+              <el-dropdown @command="handleMoreAction" trigger="click">
+                <el-button type="info" size="small" :disabled="!user.is_certified" class="action-btn">
+                  更多<el-icon class="ml-1"><arrow-down /></el-icon>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item :command="{ action: 'subscriptions', user }">
+                      <el-icon><tickets /></el-icon>
+                      订阅管理
+                    </el-dropdown-item>
+                    <el-dropdown-item :command="{ action: 'api_calls', user }">
+                      <el-icon><document /></el-icon>
+                      调用记录
+                    </el-dropdown-item>
+                    <el-dropdown-item :command="{ action: 'consumption', user }">
+                      <el-icon><money /></el-icon>
+                      消费记录
+                    </el-dropdown-item>
+                    <el-dropdown-item :command="{ action: 'recharge_history', user }">
+                      <el-icon><wallet /></el-icon>
+                      充值记录
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </div>
+        </div>
      </div>

-      <div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
-        <el-table
-          :data="users"
-          style="width: 100%"
-          :header-cell-style="{
-            background: '#f8fafc',
-            color: '#475569',
-            fontWeight: '600',
-            fontSize: '14px'
-          }"
-          :cell-style="{
-            fontSize: '14px',
-            color: '#1e293b'
-          }"
-        >
-          <el-table-column prop="phone" label="手机号" width="140">
-            <template #default="{ row }">
-              <span class="font-mono text-sm">{{ formatPhone(row.phone) }}</span>
-            </template>
-          </el-table-column>
+      <!-- 桌面端表格布局 -->
+      <div v-else-if="!isMobile" class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+        <div class="table-container">
+          <el-table
+            :data="users"
+            style="width: 100%"
+            :header-cell-style="{
+              background: '#f8fafc',
+              color: '#475569',
+              fontWeight: '600',
+              fontSize: '14px'
+            }"
+            :cell-style="{
+              fontSize: '14px',
+              color: '#1e293b'
+            }"
+          >
+            <el-table-column prop="phone" label="手机号" width="140">
+              <template #default="{ row }">
+                <span class="font-mono text-sm">{{ formatPhone(row.phone) }}</span>
+              </template>
+            </el-table-column>

-          <el-table-column prop="username" label="用户名" width="120">
-            <template #default="{ row }">
-              <span class="text-gray-600">{{ row.username || '-' }}</span>
-            </template>
-          </el-table-column>
+            <el-table-column prop="username" label="用户名" width="120">
+              <template #default="{ row }">
+                <span class="text-gray-600">{{ row.username || '-' }}</span>
+              </template>
+            </el-table-column>

-          <el-table-column prop="is_active" label="激活状态" width="120">
-            <template #default="{ row }">
-              <el-tag
-                :type="row.is_active ? 'success' : 'warning'"
-                size="small"
-              >
-                {{ row.is_active ? '已激活' : '未激活' }}
-              </el-tag>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="is_certified" label="认证状态" width="120">
-            <template #default="{ row }">
-              <el-tag
-                :type="row.is_certified ? 'success' : 'info'"
-                size="small"
-              >
-                {{ row.is_certified ? '已认证' : '未认证' }}
-              </el-tag>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="wallet_balance" label="钱包余额" width="120">
-            <template #default="{ row }">
-              <span class="font-medium text-green-600">
-                ¥{{ formatMoney(row.wallet_balance || '0') }}
-              </span>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="enterprise_info.company_name" label="企业信息" min-width="200">
-            <template #default="{ row }">
-              <div v-if="row.enterprise_info" class="space-y-1">
-                <div class="flex items-center text-gray-900">
-                  <span class="w-20 text-gray-500">企业名：</span>
-                  <span class="font-medium">{{ row.enterprise_info.company_name || '-' }}</span>
-                </div>
-                <div class="flex items-center text-gray-900">
-                  <span class="w-20 text-gray-500">法人姓名：</span>
-                  <span class="text-sm">{{ row.enterprise_info.legal_person_name || '-' }}</span>
-                </div>
-              </div>
-              <span v-else class="text-gray-400">-</span>
-            </template>
-          </el-table-column>
-
-          <el-table-column prop="created_at" label="注册时间" width="160">
-            <template #default="{ row }">
-              <div class="text-sm">
-                <div class="text-gray-900">{{ formatDate(row.created_at) }}</div>
-                <div class="text-gray-500">{{ formatTime(row.created_at) }}</div>
-              </div>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="操作" min-width="300" fixed="right">
-            <template #default="{ row }">
-              <div class="flex items-center space-x-2">
-                <el-button
+            <el-table-column prop="is_active" label="激活状态" width="120">
+              <template #default="{ row }">
+                <el-tag
+                  :type="row.is_active ? 'success' : 'warning'"
                  size="small"
-                  type="primary"
-                  @click="handleViewUser(row)"
                >
-                  查看详情
-                </el-button>
+                  {{ row.is_active ? '已激活' : '未激活' }}
+                </el-tag>
+              </template>
+            </el-table-column>

-                <!-- 充值按钮 -->
-                <el-tooltip
-                  v-if="!row.is_certified"
-                  content="需要企业认证后才能进行充值操作"
-                  placement="top"
+            <el-table-column prop="is_certified" label="认证状态" width="120">
+              <template #default="{ row }">
+                <el-tag
+                  :type="row.is_certified ? 'success' : 'info'"
+                  size="small"
                >
+                  {{ row.is_certified ? '已认证' : '未认证' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="wallet_balance" label="钱包余额" width="120">
+              <template #default="{ row }">
+                <span class="font-medium text-green-600">
+                  ¥{{ formatMoney(row.wallet_balance || '0') }}
+                </span>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="enterprise_info.company_name" label="企业信息" min-width="200">
+              <template #default="{ row }">
+                <div v-if="row.enterprise_info" class="space-y-1">
+                  <div class="flex items-center text-gray-900">
+                    <span class="w-20 text-gray-500">企业名：</span>
+                    <span class="font-medium">{{ row.enterprise_info.company_name || '-' }}</span>
+                  </div>
+                  <div class="flex items-center text-gray-900">
+                    <span class="w-20 text-gray-500">法人姓名：</span>
+                    <span class="text-sm">{{ row.enterprise_info.legal_person_name || '-' }}</span>
+                  </div>
+                </div>
+                <span v-else class="text-gray-400">-</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="created_at" label="注册时间" width="160">
+              <template #default="{ row }">
+                <div class="text-sm">
+                  <div class="text-gray-900">{{ formatDate(row.created_at) }}</div>
+                  <div class="text-gray-500">{{ formatTime(row.created_at) }}</div>
+                </div>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="操作" min-width="300" fixed="right">
+              <template #default="{ row }">
+                <div class="flex items-center space-x-2">
                  <el-button
+                    size="small"
+                    type="primary"
+                    @click="handleViewUser(row)"
+                  >
+                    查看详情
+                  </el-button>
+
+                  <!-- 充值按钮 -->
+                  <el-tooltip
+                    v-if="!row.is_certified"
+                    content="需要企业认证后才能进行充值操作"
+                    placement="top"
+                  >
+                    <el-button
+                      size="small"
+                      type="warning"
+                      @click="handleRecharge(row)"
+                      :disabled="!row.is_certified"
+                    >
+                      充值
+                    </el-button>
+                  </el-tooltip>
+                  <el-button
+                    v-else
                    size="small"
                    type="warning"
                    @click="handleRecharge(row)"
-                    :disabled="!row.is_certified"
                  >
                    充值
                  </el-button>
-                </el-tooltip>
-                <el-button
-                  v-else
-                  size="small"
-                  type="warning"
-                  @click="handleRecharge(row)"
-                >
-                  充值
-                </el-button>

-                <!-- 更多操作按钮 -->
-                <el-tooltip
-                  v-if="!row.is_certified"
-                  content="需要企业认证后才能查看更多操作"
-                  placement="top"
-                >
-                  <el-dropdown @command="handleMoreAction" trigger="click">
-                    <el-button
-                      size="small"
-                      type="info"
-                      :disabled="!row.is_certified"
-                    >
+                  <!-- 更多操作按钮 -->
+                  <el-tooltip
+                    v-if="!row.is_certified"
+                    content="需要企业认证后才能查看更多操作"
+                    placement="top"
+                  >
+                    <el-dropdown @command="handleMoreAction" trigger="click">
+                      <el-button
+                        size="small"
+                        type="info"
+                        :disabled="!row.is_certified"
+                      >
+                        更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
+                      </el-button>
+                      <template #dropdown>
+                        <el-dropdown-menu>
+                          <el-dropdown-item :command="{ action: 'subscriptions', user: row }">
+                            <el-icon><tickets /></el-icon>
+                            订阅管理
+                          </el-dropdown-item>
+                          <el-dropdown-item :command="{ action: 'api_calls', user: row }">
+                            <el-icon><document /></el-icon>
+                            调用记录
+                          </el-dropdown-item>
+                          <el-dropdown-item :command="{ action: 'consumption', user: row }">
+                            <el-icon><money /></el-icon>
+                            消费记录
+                          </el-dropdown-item>
+                          <el-dropdown-item :command="{ action: 'recharge_history', user: row }">
+                            <el-icon><wallet /></el-icon>
+                            充值记录
+                          </el-dropdown-item>
+                        </el-dropdown-menu>
+                      </template>
+                    </el-dropdown>
+                  </el-tooltip>
+                  <el-dropdown
+                    v-else
+                    @command="handleMoreAction"
+                    trigger="click"
+                  >
+                    <el-button size="small" type="info">
                      更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
@@ -241,40 +370,16 @@
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
-                </el-tooltip>
-                <el-dropdown
-                  v-else
-                  @command="handleMoreAction"
-                  trigger="click"
-                >
-                  <el-button size="small" type="info">
-                    更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
-                  </el-button>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item :command="{ action: 'subscriptions', user: row }">
-                        <el-icon><tickets /></el-icon>
-                        订阅管理
-                      </el-dropdown-item>
-                      <el-dropdown-item :command="{ action: 'api_calls', user: row }">
-                        <el-icon><document /></el-icon>
-                        调用记录
-                      </el-dropdown-item>
-                      <el-dropdown-item :command="{ action: 'consumption', user: row }">
-                        <el-icon><money /></el-icon>
-                        消费记录
-                      </el-dropdown-item>
-                      <el-dropdown-item :command="{ action: 'recharge_history', user: row }">
-                        <el-icon><wallet /></el-icon>
-                        充值记录
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="!loading && users.length === 0" class="text-center py-12">
+        <el-empty description="暂无用户数据" />
      </div>
    </template>

@@ -285,7 +390,8 @@
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="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"
      />
@@ -296,12 +402,12 @@
      <el-dialog
        v-model="userDialogVisible"
        title="用户详情"
-        width="800px"
+        :width="isMobile ? '90%' : '800px'"
        class="user-dialog"
      >
        <div v-if="selectedUser" class="space-y-6">
          <!-- 用户统计信息 -->
-          <div class="grid grid-cols-3 gap-6">
+          <div :class="['grid gap-6', isMobile ? 'grid-cols-1' : 'grid-cols-3']">
            <div class="user-stat-card">
              <div class="user-stat-value">{{ selectedUser.login_count || 0 }}</div>
              <div class="user-stat-label">登录次数</div>
@@ -319,7 +425,7 @@
          <!-- 基本信息 -->
          <div class="user-info">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">基本信息</h3>
-            <div class="grid grid-cols-2 gap-4">
+            <div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-2']">
              <div class="info-item">
                <span class="info-label">手机号:</span>
                <span class="info-value">{{ formatPhone(selectedUser.phone) }}</span>
@@ -358,7 +464,7 @@
          <!-- 企业信息 -->
          <div v-if="selectedUser.enterprise_info" class="enterprise-info">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">企业信息</h3>
-            <div class="grid grid-cols-2 gap-4">
+            <div :class="['grid gap-4', isMobile ? 'grid-cols-1' : 'grid-cols-2']">
              <div class="info-item">
                <span class="info-label">企业名称:</span>
                <span class="info-value">{{ selectedUser.enterprise_info.company_name }}</span>
@@ -440,7 +546,7 @@
      <el-dialog
        v-model="rechargeDialogVisible"
        title="用户充值"
-        width="500px"
+        :width="isMobile ? '90%' : '500px'"
        class="recharge-dialog"
      >
        <div v-if="selectedUser" class="space-y-6">
@@ -509,9 +615,19 @@
        </div>

        <template #footer>
-          <div class="dialog-footer">
-            <el-button @click="rechargeDialogVisible = false">取消</el-button>
-            <el-button type="primary" @click="handleSubmitRecharge" :loading="rechargeLoading">
+          <div :class="['dialog-footer', isMobile ? 'flex-col' : '']">
+            <el-button
+              :class="isMobile ? 'w-full' : ''"
+              @click="rechargeDialogVisible = false"
+            >
+              取消
+            </el-button>
+            <el-button
+              type="primary"
+              :class="isMobile ? 'w-full' : ''"
+              @click="handleSubmitRecharge"
+              :loading="rechargeLoading"
+            >
              确认充值
            </el-button>
          </div>
@@ -526,6 +642,7 @@ import { financeApi, userApi } from '@/api'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { ArrowDown, Document, Money, Tickets, Wallet, Warning } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router'
@@ -533,6 +650,9 @@ import { useRouter } from 'vue-router'
 // 获取路由实例
 const router = useRouter()

+// 移动端检测
+const { isMobile, isTablet } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const users = ref([])
@@ -1037,6 +1157,82 @@ const handleMoreAction = (command) => {
  background: #f8fafc !important;
 }

+/* 移动端卡片布局 */
+.user-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.user-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.card-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.card-label {
+  font-size: 12px;
+  color: #6b7280;
+  font-weight: 500;
+  min-width: 80px;
+  flex-shrink: 0;
+}
+
+.card-value {
+  font-size: 14px;
+  color: #1f2937;
+  text-align: right;
+  word-break: break-word;
+  flex: 1;
+}
+
+.card-footer {
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.action-btn {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 表格容器 */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 /* 响应式设计 */
@media (max-width: 768px) {
  .stat-item {
@@ -1063,6 +1259,101 @@ const handleMoreAction = (command) => {
  .user-stat-label {
    font-size: 13px;
  }
+
+  /* 表格在移动端优化 */
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 1000px;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 8px 4px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 4px;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 分页组件在移动端优化 */
+  :deep(.el-pagination) {
+    justify-content: center;
+  }
+
+  :deep(.el-pagination .el-pagination__sizes) {
+    display: none;
+  }
+
+  :deep(.el-pagination .el-pagination__total) {
+    display: none;
+  }
+
+  :deep(.el-pagination .el-pagination__jump) {
+    display: none;
+  }
+
+  /* 对话框在移动端优化 */
+  :deep(.user-dialog .el-dialog__body),
+  :deep(.recharge-dialog .el-dialog__body) {
+    padding: 16px;
+    max-height: 80vh;
+  }
+
+  .dialog-footer {
+    flex-direction: column;
+    gap: 8px;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .user-card {
+    padding: 12px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .card-body {
+    gap: 6px;
+  }
+
+  .card-label {
+    font-size: 11px;
+    min-width: 70px;
+  }
+
+  .card-value {
+    font-size: 13px;
+  }
+
+  .card-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .card-value {
+    text-align: left;
+  }
+
+  .action-buttons {
+    gap: 6px;
+  }
+
+  .action-btn {
+    font-size: 12px;
+    padding: 6px 8px;
+  }
 }

 /* 禁用按钮样式优化 */
--- a/src/pages/api/ApiDebugger.vue
+++ b/src/pages/api/ApiDebugger.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="flex flex-col h-screen bg-gray-50 overflow-hidden">
+  <div class="debugger-page flex flex-col h-screen bg-gray-50 overflow-hidden">
    <!-- 主要内容区域 -->
-    <div class="flex gap-3 flex-1 p-3 overflow-hidden min-h-0">
+    <div class="debugger-main flex gap-3 flex-1 p-3 overflow-hidden min-h-0">
      <!-- 左侧产品选择区域 -->
-      <div class="bg-white rounded-lg shadow-sm overflow-hidden flex flex-col h-full w-64 flex-shrink-0">
+      <div class="panel-left bg-white rounded-lg shadow-sm overflow-hidden flex flex-col h-full w-72 flex-shrink-0">
        <div class="p-3 flex flex-col h-full">
          <div class="flex justify-between items-center mb-3 flex-wrap gap-2 flex-shrink-0">
            <h3 class="text-base font-semibold text-gray-800 m-0">产品选择</h3>
@@ -58,11 +58,11 @@
      </div>

      <!-- 中间调试配置区域 -->
-      <div class="bg-white rounded-lg shadow-sm overflow-hidden flex flex-col h-full flex-1 min-w-0">
+      <div class="panel-center bg-white rounded-lg shadow-sm overflow-hidden flex flex-col h-full flex-1 min-w-0">
        <div class="p-3 flex flex-col h-full">
-          <div class="flex justify-between items-center mb-3 flex-wrap gap-2 flex-shrink-0">
+          <div class="flex justify-between items-center mb-3 flex-wrap gap-2 flex-shrink-0 actions-header">
            <h3 class="text-base font-semibold text-gray-800 m-0">调试配置</h3>
-            <div class="flex gap-1.5 items-center">
+            <div class="actions-bar flex gap-1.5 items-center flex-wrap">
              <el-button @click="goToProductDetail" size="default" type="primary" plain>
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg">
@@ -414,13 +414,25 @@
                  <div v-if="decryptedData" class="mt-3 pt-3 border-t border-gray-200">
                    <h5 class="text-xs font-semibold text-gray-700 mb-1">解密后的内容</h5>
                    <pre
-                      class="bg-green-50 p-2 rounded text-xs overflow-x-auto m-0 mb-1.5 max-h-45 border border-green-200 font-mono text-green-800">
+                      class="bg-green-50 p-2 rounded text-xs overflow-x-auto m-0 mb-1.5 max-h-45 border border-green-200 font-mono text-green-800"
+                      :key="`decrypted-${Date.now()}`">
                {{ JSON.stringify(decryptedData, null, 2) }}</pre>
                    <el-button type="success" size="default"
                      @click="copyToClipboard(JSON.stringify(decryptedData, null, 2))" class="w-full">
                      复制解密内容
                    </el-button>
                  </div>
+                  <!-- 解密加载状态 -->
+                  <div v-else-if="debugging && debugResult && debugResult.success && debugResult.response?.data?.data" 
+                       class="mt-3 pt-3 border-t border-gray-200">
+                    <div class="flex items-center gap-2 text-sm text-gray-500">
+                      <svg class="animate-spin h-4 w-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                      </svg>
+                      <span>正在解密响应数据...</span>
+                    </div>
+                  </div>
                </div>
              </div>
            </div>
@@ -522,7 +534,86 @@
 </template>

 <style scoped>
-/* 所有样式已使用Tailwind CSS实现 */
+/* 响应式优化 */
+@media (max-width: 1024px) {
+  .debugger-page {
+    height: auto;
+    min-height: 100vh;
+    overflow: auto;
+  }
+
+  .debugger-main {
+    flex-direction: column;
+    overflow: visible;
+  }
+
+  .panel-left {
+    width: 100%;
+    max-height: 360px;
+    overflow: auto;
+  }
+
+  .panel-center {
+    width: 100%;
+    min-height: auto;
+    overflow: visible;
+  }
+
+  .panel-center .grid.grid-cols-2 {
+    grid-template-columns: 1fr;
+  }
+
+  .panel-center .grid.grid-cols-2 > * {
+    min-width: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .debugger-main {
+    gap: 12px;
+    padding: 12px;
+  }
+
+  .panel-left {
+    max-height: 320px;
+  }
+
+  .panel-center {
+    padding: 0;
+  }
+
+  .actions-header {
+    align-items: flex-start;
+  }
+
+  /* 按钮区域：两列折行，避免超出屏幕 */
+  .actions-bar {
+    width: 100%;
+    justify-content: flex-start;
+    gap: 8px;
+  }
+
+  .actions-bar .el-button {
+    flex: 1 1 48%;
+    min-width: 140px;
+  }
+
+  /* 主要按钮独占一行，保证可点 */
+  .actions-bar .el-button:last-child {
+    flex: 1 1 100%;
+  }
+
+  /* 操作按钮区域允许换行且间距更紧凑 */
+  .panel-center .flex-wrap {
+    gap: 8px;
+  }
+
+  /* 表单输入区域保持可读性 */
+  .panel-center :deep(.el-input),
+  .panel-center :deep(.el-select) {
+    width: 100%;
+  }
+}
 </style>

 <script setup>
@@ -545,6 +636,8 @@ const productsLoading = ref(false)
 const debugging = ref(false)
 const encrypting = ref(false)
 const autoSelecting = ref(false) // 新增：自动选择状态
+const isSelectingProduct = ref(false) // 防止重复选择产品的标志
+const lastSelectedProductId = ref(null) // 记录最后选择的产品ID
 const userProducts = ref([])
 const apiConfig = ref(null)
 const selectedProduct = ref(null)
@@ -650,12 +743,22 @@ onMounted(async () => {

 // 监听路由参数变化，自动选择产品
 watch(
-  () => route.params.productId,
-  async (newProductId) => {
+  () => route.query.productId || route.params.productId,
+  async (newProductId, oldProductId) => {
+    // 防止重复触发：如果产品ID没有变化，不执行
+    if (newProductId === oldProductId) {
+      return
+    }
+    
+    // 如果正在选择产品，不重复执行
+    if (isSelectingProduct.value) {
+      return
+    }
+    
    if (newProductId && userProducts.value.length > 0) {
      await autoSelectProduct(newProductId)
-    } else if (!newProductId && userProducts.value.length > 0) {
-      // 如果没有指定产品，选择第一个
+    } else if (!newProductId && userProducts.value.length > 0 && !selectedProduct.value) {
+      // 如果没有指定产品且当前没有选中产品，选择第一个
      await selectProduct(userProducts.value[0])
    }
  }
@@ -663,6 +766,18 @@ watch(

 // 自动选择产品
 const autoSelectProduct = async (productId) => {
+  // 防止重复执行
+  if (isSelectingProduct.value) {
+    console.log('正在选择产品，跳过重复请求')
+    return
+  }
+  
+  // 如果已经选择了相同的产品，不重复选择
+  if (lastSelectedProductId.value === productId && selectedProduct.value) {
+    console.log('产品已选择，跳过重复选择:', productId)
+    return
+  }
+  
  // 如果用户产品列表为空，等待加载完成
  if (!userProducts.value.length) {
    console.log('等待用户产品列表加载完成...')
@@ -686,7 +801,13 @@ const autoSelectProduct = async (productId) => {

  if (targetProduct) {
    console.log('自动选择产品:', targetProduct)
-    await selectProduct(targetProduct)
+    isSelectingProduct.value = true
+    try {
+      await selectProduct(targetProduct)
+      lastSelectedProductId.value = productId
+    } finally {
+      isSelectingProduct.value = false
+    }
  } else {
    console.warn('未找到指定的产品:', productId)
    ElMessage.warning(`未找到产品ID为 ${productId} 的产品，请手动选择`)
@@ -699,7 +820,7 @@ const loadUserProducts = async () => {
  try {
    const response = await subscriptionApi.getMySubscriptions({
      page: 1,
-      page_size: 100
+      page_size: 1000
    })

    if (response.success && response.data?.items) {
@@ -712,16 +833,23 @@ const loadUserProducts = async () => {
      }))
      console.log("route.params", route)

-      // 检查是否有params参数指定产品
-      if (route.params.productId && userProducts.value.length > 0) {
+      // 检查是否有query或params参数指定产品
+      const productId = route.query.productId || route.params.productId
+      if (productId && userProducts.value.length > 0) {
        await nextTick()
-
-        await autoSelectProduct(route.params.productId)
-      } else if (userProducts.value.length > 0) {
-        // 没有指定产品时，默认选择第一个
+        // 使用 autoSelectProduct 会自动处理防重复逻辑
+        await autoSelectProduct(productId)
+      } else if (userProducts.value.length > 0 && !selectedProduct.value) {
+        // 没有指定产品时，默认选择第一个（仅在未选择产品时）
        autoSelecting.value = true
-        await selectProduct(userProducts.value[0])
-        autoSelecting.value = false
+        isSelectingProduct.value = true
+        try {
+          await selectProduct(userProducts.value[0])
+          lastSelectedProductId.value = userProducts.value[0].id || userProducts.value[0].product_id
+        } finally {
+          isSelectingProduct.value = false
+          autoSelecting.value = false
+        }
      }
    } else {
      // 如果没有订阅产品，显示提示信息
@@ -753,6 +881,15 @@ const loadApiKeys = async () => {

 // 选择产品
 const selectProduct = async (product) => {
+  // 防止重复选择相同产品
+  const productId = product.product_id || product.id
+  if (selectedProduct.value && 
+      (selectedProduct.value.id === productId || selectedProduct.value.product_id === productId) &&
+      !isSelectingProduct.value) {
+    console.log('产品已选择，跳过重复加载:', productId)
+    return
+  }
+  
  // 确保API密钥已经加载
  if (!debugForm.accessId || !debugForm.secretKey) {
    ElMessage.warning('正在加载API密钥，请稍候...')
@@ -764,6 +901,7 @@ const selectProduct = async (product) => {
  debugForm.params = {}
  debugResult.value = null
  encryptedData.value = null
+  decryptedData.value = null
  activeTab.value = 'basic_info' // 重置Tab
  productDocumentation.value = null // 重置文档

@@ -999,6 +1137,33 @@ const getRequestUrl = () => {
  return `${baseUrl}/api/v1/${selectedProduct.value.code}`
 }

+// 根据字段类型转换数据
+const convertFieldTypes = (data) => {
+  if (!formFields.value || formFields.value.length === 0) {
+    return data
+  }
+  
+  const processedData = { ...data }
+  formFields.value.forEach(field => {
+    const value = processedData[field.name]
+    // 如果字段值为空字符串、null 或 undefined，跳过转换
+    if (value === '' || value === null || value === undefined) {
+      return
+    }
+    
+    // 根据字段类型进行转换
+    if (field.type === 'number') {
+      // 将字符串转换为数字（整数）
+      const numValue = parseInt(value, 10)
+      if (!isNaN(numValue)) {
+        processedData[field.name] = numValue
+      }
+    }
+  })
+  
+  return processedData
+}
+
 // 加密参数
 const encryptParams = async () => {
  if (!canDebug.value) {
@@ -1030,8 +1195,14 @@ const encryptWithAES = async (data, secretKey) => {
  try {
    console.log('开始调用后端加密接口，参数:', data, '密钥:', secretKey)

+    // 解析JSON字符串（如果是字符串）
+    let parsedData = typeof data === 'string' ? JSON.parse(data) : data
+    
+    // 根据字段类型进行类型转换
+    parsedData = convertFieldTypes(parsedData)
+
    // 使用项目的标准API调用方式，传递密钥参数
-    const result = await apiApi.encryptParams(typeof data === 'string' ? JSON.parse(data) : data, secretKey)
+    const result = await apiApi.encryptParams(parsedData, secretKey)

    console.log('加密接口响应数据:', result)

@@ -1096,8 +1267,9 @@ const handleDebug = async () => {
      return
    }

-    // 将表单数据转换为JSON格式
-    debugForm.params = JSON.stringify(formData.value, null, 2)
+    // 将表单数据转换为JSON格式，并根据字段类型进行类型转换
+    const processedData = convertFieldTypes(formData.value)
+    debugForm.params = JSON.stringify(processedData, null, 2)
  } else {
    // 原有的JSON验证逻辑
    if (!validateJsonParams()) {
@@ -1106,6 +1278,11 @@ const handleDebug = async () => {
  }

  debugging.value = true
+  // 清空之前的调试结果，确保UI实时更新
+  debugResult.value = null
+  decryptedData.value = null
+  await nextTick() // 确保DOM更新
+  
  const startTime = new Date()

  try {
@@ -1143,7 +1320,7 @@ const handleDebug = async () => {
      console.log('产品API调用成功:', responseData)
      const endTime = new Date()

-      // 5. 保存调试结果
+      // 5. 保存调试结果 - 立即更新，确保UI实时显示
      debugResult.value = createDebugResult(
        selectedProduct.value,
        requestBody,
@@ -1154,6 +1331,9 @@ const handleDebug = async () => {
        responseData.success && responseData.data?.code === 0
      )

+      // 确保DOM更新后再进行解密操作
+      await nextTick()
+
      // 6. 如果响应成功且包含加密数据，自动解密
      console.log('responseData', responseData)
      if (responseData.success && responseData.data?.code === 0 && responseData.data?.data && typeof responseData.data.data === 'string') {
@@ -1164,7 +1344,9 @@ const handleDebug = async () => {
          )

          if (decryptResult.success) {
+            // 使用 nextTick 确保响应式更新
            decryptedData.value = decryptResult.data
+            await nextTick()
            ElMessage.success('调试完成，数据已自动解密')
          } else {
            ElMessage.warning('调试完成，但数据解密失败：' + (decryptResult.message || '未知错误'))
@@ -1207,6 +1389,9 @@ const handleDebug = async () => {
        false
      )

+      // 确保DOM更新
+      await nextTick()
+
      ElMessage.error('API调用失败：' + apiError.message)
    }
  } catch (error) {
@@ -1223,6 +1408,9 @@ const handleDebug = async () => {
      endTime,
      false
    )
+
+    // 确保DOM更新
+    await nextTick()
  } finally {
    debugging.value = false
  }
--- a/src/pages/api/Usage.vue
+++ b/src/pages/api/Usage.vue
@@ -7,7 +7,7 @@
    <template #actions>
      <div class="flex gap-4">
        <div class="stat-item">
-          <div class="stat-value">{{ stats.total_calls || 0 }}</div>
+          <div class="stat-value">{{ total}}</div>
          <div class="stat-label">总调用次数</div>
        </div>
      </div>
@@ -50,7 +50,7 @@
          </el-select>
        </FilterItem>

-        <FilterItem label="时间范围">
+        <FilterItem label="时间范围" class="col-span-1">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
@@ -61,6 +61,7 @@
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="handleDateRangeChange"
            class="w-full"
+            :size="isMobile ? 'small' : 'default'"
          />
        </FilterItem>

@@ -89,6 +90,7 @@
      </div> -->

      <div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+        <div class="table-container">
        <el-table
          :data="apiCalls"
          style="width: 100%"
@@ -186,10 +188,12 @@
            </template>
          </el-table-column>
        </el-table>
+        </div>
      </div>
    </template>

    <template #pagination>
+      <div class="pagination-wrapper">
      <el-pagination
        v-if="total > 0"
        v-model:current-page="currentPage"
@@ -200,6 +204,7 @@
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
+      </div>
    </template>

    <template #extra>
@@ -277,8 +282,12 @@ import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
 import { useCertification } from '@/composables/useCertification'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { ElMessage } from 'element-plus'

+// 移动端检测
+const { isMobile } = useMobileTable()
+
 // 认证相关
 const {
  isCertified,
@@ -554,7 +563,9 @@ const handleViewDetail = (apiCall) => {
 }

 .error-content {
-  space-y: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }

 .error-type {
@@ -657,6 +668,19 @@ const handleViewDetail = (apiCall) => {
  background: #f8fafc !important;
 }

+/* 表格容器 */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 分页器包装器 */
+.pagination-wrapper {
+  padding: 16px 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 /* 响应式设计 */
@media (max-width: 768px) {
  .stat-item {
@@ -683,5 +707,131 @@ const handleViewDetail = (apiCall) => {
  .detail-value {
    font-size: 14px;
  }
+
+  /* 表格在移动端优化 */
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 1000px;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 8px 4px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 4px;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 分页组件在移动端优化 */
+  .pagination-wrapper {
+    padding: 12px 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .pagination-wrapper :deep(.el-pagination) {
+    flex-wrap: nowrap;
+    min-width: fit-content;
+    justify-content: flex-start;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__sizes) {
+    display: none;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__total) {
+    font-size: 12px;
+    margin-right: 8px;
+    white-space: nowrap;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__jump) {
+    display: none;
+  }
+
+  .pagination-wrapper :deep(.el-pager li) {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    margin: 0 2px;
+    font-size: 12px;
+  }
+
+  .pagination-wrapper :deep(.btn-prev),
+  .pagination-wrapper :deep(.btn-next) {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px;
+  }
+
+  /* 对话框在移动端优化 */
+  .detail-dialog :deep(.el-dialog) {
+    margin: 20px;
+    width: calc(100% - 40px) !important;
+    max-width: none;
+  }
+
+  .detail-dialog :deep(.el-dialog__body) {
+    padding: 16px;
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+
+  .detail-dialog :deep(.grid-cols-2) {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .pagination-wrapper {
+    padding: 8px 0;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__total) {
+    display: none;
+  }
+
+  .pagination-wrapper :deep(.el-pagination) {
+    font-size: 11px;
+  }
+
+  .pagination-wrapper :deep(.el-pager li) {
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+    font-size: 11px;
+  }
+
+  .pagination-wrapper :deep(.btn-prev),
+  .pagination-wrapper :deep(.btn-next) {
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+    font-size: 11px;
+  }
+
+  .stat-item {
+    padding: 10px 12px;
+    min-width: 80px;
+  }
+
+  .stat-value {
+    font-size: 18px;
+  }
+
+  .stat-label {
+    font-size: 11px;
+  }
 }
 </style>
--- a/src/pages/api/WhiteList.vue
+++ b/src/pages/api/WhiteList.vue
@@ -4,9 +4,14 @@
    subtitle="管理您的API访问IP白名单，最多可添加10个IP地址"
  >
    <template #actions>
-      <el-button type="primary" @click="showAddForm = true">
+      <el-button
+        type="primary"
+        :size="isMobile ? 'small' : 'default'"
+        @click="showAddForm = true"
+      >
        <PlusIcon class="w-4 h-4 mr-1" />
-        添加IP地址
+        <span :class="isMobile ? 'hidden sm:inline' : ''">添加IP地址</span>
+        <span :class="isMobile ? 'sm:hidden' : 'hidden'">添加</span>
      </el-button>
    </template>

@@ -26,18 +31,18 @@
          </el-input>
        </FilterItem>

-        <FilterItem label="状态筛选">
-          <el-select
-            v-model="filters.status"
-            placeholder="选择状态"
+        <FilterItem label="备注搜索">
+          <el-input
+            v-model="filters.remark"
+            placeholder="输入备注关键词进行搜索"
            clearable
-            @change="handleFilterChange"
+            @input="handleSearch"
            class="w-full"
          >
-            <el-option label="全部" value="" />
-            <el-option label="已添加" value="active" />
-            <el-option label="待添加" value="pending" />
-          </el-select>
+            <template #prefix>
+              <DocumentTextIcon class="w-4 h-4 text-gray-400" />
+            </template>
+          </el-input>
        </FilterItem>

        <template #stats>
@@ -69,48 +74,104 @@
        </el-empty>
      </div>

+      <!-- 移动端卡片布局 -->
+      <div v-else-if="isMobile" class="white-list-cards">
+        <div
+          v-for="item in whiteListData"
+          :key="item.ip_address"
+          class="white-list-card"
+        >
+          <div class="card-header">
+            <div class="flex items-center gap-2">
+              <ComputerDesktopIcon class="w-5 h-5 text-blue-500" />
+              <span class="font-mono font-semibold text-base">{{ item.ip_address }}</span>
+            </div>
+            <el-tag type="success" size="small">
+              <span class="flex items-center"><ShieldCheckIcon class="w-3 h-3 mr-1" />已添加</span>
+            </el-tag>
+          </div>
+          <div class="card-body">
+            <div class="card-item">
+              <div class="card-label">
+                <CalendarIcon class="w-4 h-4 mr-1" />
+                添加时间
+              </div>
+              <div class="card-value">{{ formatDate(item.created_at) }}</div>
+            </div>
+            <div v-if="item.remark" class="card-item">
+              <div class="card-label">
+                <DocumentTextIcon class="w-4 h-4 mr-1" />
+                备注
+              </div>
+              <div class="card-value">{{ item.remark }}</div>
+            </div>
+          </div>
+          <div class="card-footer">
+            <el-button
+              type="danger"
+              size="small"
+              @click="handleDeleteIP(item.ip_address)"
+              :loading="deleteLoading === item.ip_address"
+              class="w-full"
+            >
+              <TrashIcon class="w-4 h-4 mr-1" />
+              删除
+            </el-button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 桌面端表格布局 -->
      <div v-else class="white-list-table">
-        <el-table :data="whiteListData" stripe>
-          <el-table-column prop="ip_address" label="IP地址" min-width="200">
-            <template #default="{ row }">
-              <div class="flex items-center">
-                <ComputerDesktopIcon class="w-4 h-4 mr-2 text-blue-500" />
-                <span class="font-mono text-sm">{{ row.ip_address }}</span>
-              </div>
-            </template>
-          </el-table-column>
+        <div class="table-container">
+          <el-table :data="whiteListData" stripe>
+            <el-table-column prop="ip_address" label="IP地址" min-width="200">
+              <template #default="{ row }">
+                <div class="flex items-center">
+                  <ComputerDesktopIcon class="w-4 h-4 mr-2 text-blue-500" />
+                  <span class="font-mono text-sm">{{ row.ip_address }}</span>
+                </div>
+              </template>
+            </el-table-column>

-          <el-table-column prop="created_at" label="添加时间" min-width="180">
-            <template #default="{ row }">
-              <div class="flex items-center">
-                <CalendarIcon class="w-4 h-4 mr-2 text-gray-400" />
-                <span class="text-sm">{{ formatDate(row.created_at) }}</span>
-              </div>
-            </template>
-          </el-table-column>
+            <el-table-column prop="created_at" label="添加时间" min-width="180">
+              <template #default="{ row }">
+                <div class="flex items-center">
+                  <CalendarIcon class="w-4 h-4 mr-2 text-gray-400" />
+                  <span class="text-sm">{{ formatDate(row.created_at) }}</span>
+                </div>
+              </template>
+            </el-table-column>

-          <el-table-column label="状态" width="120">
-            <template #default>
-              <el-tag type="success" size="small">
-                <span class="flex items-center"><ShieldCheckIcon class="w-3 h-3 mr-1" />已添加</span>
-              </el-tag>
-            </template>
-          </el-table-column>
+            <el-table-column prop="remark" label="备注" min-width="150">
+              <template #default="{ row }">
+                <span class="text-sm text-gray-600">{{ row.remark || '-' }}</span>
+              </template>
+            </el-table-column>

-          <el-table-column label="操作" width="120" fixed="right">
-            <template #default="{ row }">
-              <el-button
-                type="danger"
-                size="small"
-                @click="handleDeleteIP(row.ip_address)"
-                :loading="deleteLoading === row.ip_address"
-              >
-                <TrashIcon class="w-3 h-3 mr-1" />
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+            <el-table-column label="状态" width="120">
+              <template #default>
+                <el-tag type="success" size="small">
+                  <span class="flex items-center"><ShieldCheckIcon class="w-3 h-3 mr-1" />已添加</span>
+                </el-tag>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="操作" width="120" fixed="right">
+              <template #default="{ row }">
+                <el-button
+                  type="danger"
+                  size="small"
+                  @click="handleDeleteIP(row.ip_address)"
+                  :loading="deleteLoading === row.ip_address"
+                >
+                  <TrashIcon class="w-3 h-3 mr-1" />
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
      </div>
    </template>

@@ -119,8 +180,9 @@
      <el-dialog
        v-model="showAddForm"
        title="添加IP地址"
-        width="500px"
+        :width="isMobile ? '90%' : '500px'"
        :close-on-click-modal="false"
+        class="add-ip-dialog"
      >
        <el-form
          ref="addFormRef"
@@ -140,6 +202,18 @@
            </el-input>
          </el-form-item>

+          <el-form-item label="备注" prop="remark">
+            <el-input
+              v-model="addForm.remark"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入备注信息（可选）"
+              :disabled="whiteListData.length >= 10"
+              maxlength="200"
+              show-word-limit
+            />
+          </el-form-item>
+
          <el-form-item v-if="whiteListData.length >= 10">
            <el-alert
              title="白名单已满"
@@ -155,10 +229,16 @@
        </el-form>

        <template #footer>
-          <div class="flex justify-end gap-2">
-            <el-button @click="showAddForm = false">取消</el-button>
+          <div :class="['flex', 'gap-2', isMobile ? 'flex-col' : 'justify-end']">
+            <el-button
+              :class="isMobile ? 'w-full' : ''"
+              @click="showAddForm = false"
+            >
+              取消
+            </el-button>
            <el-button
              type="primary"
+              :class="isMobile ? 'w-full' : ''"
              @click="handleAddIP"
              :loading="addLoading"
              :disabled="whiteListData.length >= 10"
@@ -220,9 +300,11 @@ import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
 import { useCertification } from '@/composables/useCertification'
+import { useMobileTable } from '@/composables/useMobileTable'
 import {
  CalendarIcon,
  ComputerDesktopIcon,
+  DocumentTextIcon,
  PlusIcon,
  QuestionMarkCircleIcon,
  ShieldCheckIcon,
@@ -239,6 +321,9 @@ const {
  canCallAPI
 } = useCertification()

+// 移动端检测
+const { isMobile, isTablet } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const addLoading = ref(false)
@@ -249,13 +334,14 @@ const showAddForm = ref(false)

 // 表单数据
 const addForm = reactive({
-  ipAddress: ''
+  ipAddress: '',
+  remark: ''
 })

 // 筛选条件
 const filters = reactive({
  keyword: '',
-  status: ''
+  remark: ''
 })

 // 表单验证规则
@@ -282,7 +368,7 @@ onMounted(() => {
 const loadWhiteList = async () => {
  loading.value = true
  try {
-    const response = await callProtectedAPI(whiteListApi.getWhiteList)
+    const response = await callProtectedAPI(() => whiteListApi.getWhiteList(filters.remark))
    if (response) {
      whiteListData.value = response.data.items || []
    } else {
@@ -316,10 +402,11 @@ const handleAddIP = async () => {

  addLoading.value = true
  try {
-    const response = await callProtectedAPI(whiteListApi.addWhiteListIP, addForm.ipAddress)
+    const response = await callProtectedAPI(whiteListApi.addWhiteListIP, addForm.ipAddress, addForm.remark)
    if (response) {
      ElMessage.success('添加IP地址成功')
      addForm.ipAddress = ''
+      addForm.remark = ''
      showAddForm.value = false
      await loadWhiteList()
    }
@@ -366,11 +453,6 @@ const handleDeleteIP = async (ipAddress) => {
  }
 }

-// 处理筛选变化
-const handleFilterChange = () => {
-  loadWhiteList()
-}
-
 // 处理搜索
 const handleSearch = () => {
  if (searchTimer) {
@@ -384,7 +466,7 @@ const handleSearch = () => {
 // 重置筛选
 const resetFilters = () => {
  filters.keyword = ''
-  filters.status = ''
+  filters.remark = ''
  loadWhiteList()
 }

@@ -403,6 +485,69 @@ const formatDate = (dateString) => {
 </script>

 <style scoped>
+/* 表格容器 */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 移动端卡片布局 */
+.white-list-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.white-list-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.card-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.card-label {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.card-value {
+  font-size: 14px;
+  color: #1f2937;
+  word-break: break-word;
+}
+
+.card-footer {
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
+}
+
+/* 使用说明 */
 .help-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -428,10 +573,93 @@ const formatDate = (dateString) => {
  margin: 0;
 }

-/* 响应式设计 */
+/* 移动端响应式设计 */
@media (max-width: 768px) {
  .help-content {
    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .help-item {
+    padding: 12px;
+  }
+
+  .help-title {
+    font-size: 14px;
+    margin-bottom: 6px;
+  }
+
+  .help-text {
+    font-size: 13px;
+  }
+
+  /* 表格在移动端优化 */
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :deep(.white-list-table .el-table) {
+    font-size: 12px;
+    min-width: 600px;
+  }
+
+  :deep(.white-list-table .el-table th),
+  :deep(.white-list-table .el-table td) {
+    padding: 8px 4px;
+  }
+
+  :deep(.white-list-table .el-table .cell) {
+    padding: 0 4px;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 对话框在移动端优化 */
+  :deep(.add-ip-dialog .el-dialog__body) {
+    padding: 16px;
+  }
+
+  :deep(.add-ip-dialog .el-form-item) {
+    margin-bottom: 16px;
+  }
+
+  :deep(.add-ip-dialog .el-form-item__label) {
+    font-size: 14px;
+    padding-bottom: 4px;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .white-list-card {
+    padding: 12px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .card-body {
+    gap: 10px;
+  }
+
+  .card-label {
+    font-size: 11px;
+  }
+
+  .card-value {
+    font-size: 13px;
+  }
+
+  .help-item {
+    padding: 10px;
+  }
+
+  :deep(.add-ip-dialog .el-dialog__body) {
+    padding: 12px;
  }
 }
 </style>
--- a/src/pages/certification/IframeCallback.vue
+++ b/src/pages/certification/IframeCallback.vue
@@ -16,7 +16,7 @@

 <script setup>

-import { Check, Loading } from '@element-plus/icons-vue'
+import { Check } from '@element-plus/icons-vue'

 const route = useRoute()
 const scene = ref('auth') // auth: 企业认证, sign: 合同签署
--- a/src/pages/certification/components/ContractSign.vue
+++ b/src/pages/certification/components/ContractSign.vue
@@ -37,10 +37,8 @@

 <script setup>
 import {
-    CheckIcon,
-    DocumentTextIcon
+  DocumentTextIcon
 } from '@heroicons/vue/24/outline'
-import { ElMessage } from 'element-plus'

 defineProps({
  companyName: {
--- a/src/pages/finance/Invoice.vue
+++ b/src/pages/finance/Invoice.vue
@@ -66,27 +66,29 @@

        <!-- 开票信息管理 -->
        <div v-if="activeTab === 'info'" class="info-form-section">
-          <div class="info-header">
+          <div class="info-header" :class="{ 'mobile-header': isMobile }">
            <h3 class="section-title">开票信息管理</h3>
-            <div class="info-actions">
+            <div class="info-actions" :class="{ 'mobile-actions': isMobile }">
              <el-button
                v-if="!isEditing"
                type="primary"
-                size="large"
+                :size="isMobile ? 'default' : 'large'"
                @click="startEdit"
                class="edit-btn"
              >
                <i class="el-icon-edit"></i>
-                编辑信息
+                <span v-if="!isMobile">编辑信息</span>
+                <span v-else>编辑</span>
              </el-button>
              <el-button
                type="primary"
-                size="large"
+                :size="isMobile ? 'default' : 'large'"
                @click="showApplyDialog = true"
                class="apply-btn"
              >
                <i class="el-icon-plus"></i>
-                申请开票
+                <span v-if="!isMobile">申请开票</span>
+                <span v-else>申请</span>
              </el-button>
            </div>
          </div>
@@ -94,7 +96,7 @@
          <!-- 只读信息显示 -->
          <div v-if="!isEditing" class="info-display">
            <div class="info-card">
-              <div class="info-row">
+              <div class="info-row" :class="{ 'mobile-info-row': isMobile }">
                <div class="info-item">
                  <span class="info-label">公司名称：</span>
                  <span class="info-value">{{ invoiceInfo.company_name || '未填写' }}</span>
@@ -104,7 +106,7 @@
                  <span class="info-value">{{ invoiceInfo.taxpayer_id || '未填写' }}</span>
                </div>
              </div>
-              <div class="info-row">
+              <div class="info-row" :class="{ 'mobile-info-row': isMobile }">
                <div class="info-item">
                  <span class="info-label">开户银行：</span>
                  <span class="info-value">{{ invoiceInfo.bank_name || '未填写' }}</span>
@@ -114,7 +116,7 @@
                  <span class="info-value">{{ invoiceInfo.bank_account || '未填写' }}</span>
                </div>
              </div>
-              <div class="info-row">
+              <div class="info-row" :class="{ 'mobile-info-row': isMobile }">
                <div class="info-item">
                  <span class="info-label">企业地址：</span>
                  <span class="info-value">{{ invoiceInfo.company_address || '未填写' }}</span>
@@ -124,7 +126,7 @@
                  <span class="info-value">{{ invoiceInfo.company_phone || '未填写' }}</span>
                </div>
              </div>
-              <div class="info-row">
+              <div class="info-row" :class="{ 'mobile-info-row': isMobile }">
                <div class="info-item">
                  <span class="info-label">接收邮箱：</span>
                  <span class="info-value">{{ invoiceInfo.receiving_email || '未填写' }}</span>
@@ -139,10 +141,10 @@
            ref="infoFormRef"
            :model="editingInfo"
            :rules="infoRules"
-            label-width="120px"
+            :label-width="isMobile ? '100px' : '120px'"
            class="invoice-form"
          >
-            <div class="form-row">
+            <div class="form-row" :class="{ 'mobile-form-row': isMobile }">
              <el-form-item label="公司名称" prop="company_name">
                <el-input
                  v-model="editingInfo.company_name"
@@ -170,7 +172,7 @@
              </el-form-item>
            </div>

-            <div class="form-row">
+            <div class="form-row" :class="{ 'mobile-form-row': isMobile }">
              <el-form-item label="开户银行" prop="bank_name">
                <el-input v-model="editingInfo.bank_name" placeholder="请输入开户银行" />
              </el-form-item>
@@ -180,7 +182,7 @@
              </el-form-item>
            </div>

-            <div class="form-row">
+            <div class="form-row" :class="{ 'mobile-form-row': isMobile }">
              <el-form-item label="企业地址" prop="company_address">
                <el-input v-model="editingInfo.company_address" placeholder="请输入企业注册地址" />
              </el-form-item>
@@ -190,7 +192,7 @@
              </el-form-item>
            </div>

-            <div class="form-row">
+            <div class="form-row" :class="{ 'mobile-form-row': isMobile }">
              <el-form-item label="接收邮箱" prop="receiving_email">
                <el-input v-model="editingInfo.receiving_email" placeholder="请输入发票接收邮箱" />
              </el-form-item>
@@ -287,8 +289,8 @@

          <div v-else class="records-list">
            <div v-for="record in records" :key="record.id" class="record-item">
-              <div class="record-header">
-                <div class="record-info">
+              <div class="record-header" :class="{ 'mobile-record-header': isMobile }">
+                <div class="record-info" :class="{ 'mobile-record-info': isMobile }">
                  <div class="record-id">申请编号：{{ record.id }}</div>
                  <div class="record-status" :class="getStatusClass(record.status)">
                    {{ getStatusText(record.status) }}
@@ -298,19 +300,19 @@
              </div>

              <div class="record-details">
-                <div class="detail-row">
+                <div class="detail-row" :class="{ 'mobile-detail-row': isMobile }">
                  <span class="detail-label">发票类型：</span>
                  <span class="detail-value">{{ getInvoiceTypeText(record.invoice_type) }}</span>
                </div>
-                <div class="detail-row">
+                <div class="detail-row" :class="{ 'mobile-detail-row': isMobile }">
                  <span class="detail-label">申请时间：</span>
                  <span class="detail-value">{{ formatDateTime(record.created_at) }}</span>
                </div>
-                <div v-if="record.processed_at" class="detail-row">
+                <div v-if="record.processed_at" class="detail-row" :class="{ 'mobile-detail-row': isMobile }">
                  <span class="detail-label">处理时间：</span>
                  <span class="detail-value">{{ formatDateTime(record.processed_at) }}</span>
                </div>
-                <div v-if="record.reject_reason" class="detail-row">
+                <div v-if="record.reject_reason" class="detail-row" :class="{ 'mobile-detail-row': isMobile }">
                  <span class="detail-label">拒绝原因：</span>
                  <span class="detail-value reject-reason">{{ record.reject_reason }}</span>
                </div>
@@ -319,7 +321,7 @@
              <!-- 开票信息详情 -->
              <div class="invoice-info-details">
                <div class="info-section-title">开票信息</div>
-                <div class="info-grid">
+                <div class="info-grid" :class="{ 'mobile-info-grid': isMobile }">
                  <div class="info-item">
                    <span class="info-label">公司名称：</span>
                    <span class="info-value">{{ record.company_name || '未填写' }}</span>
@@ -383,11 +385,17 @@
    <el-dialog
      v-model="showApplyDialog"
      title="申请开票"
-      width="600px"
+      :width="isMobile ? '95%' : '600px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
+      class="apply-dialog"
    >
-      <el-form ref="applyFormRef" :model="applyForm" :rules="applyRules" label-width="120px">
+      <el-form 
+        ref="applyFormRef" 
+        :model="applyForm" 
+        :rules="applyRules" 
+        :label-width="isMobile ? '100px' : '120px'"
+      >
        <el-form-item label="发票类型" prop="invoice_type">
          <el-radio-group v-model="applyForm.invoice_type" class="w-full">
            <el-radio label="general">增值税普通发票（普票）</el-radio>
@@ -489,11 +497,13 @@

 <script setup>
 import { invoiceApi } from '@/api'
-import { ElMessage, ElMessageBox } from 'element-plus'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
+import { ElMessage, ElMessageBox } from 'element-plus'

 const router = useRouter()
+const { isMobile } = useMobileTable()

 // 响应式数据
 const activeTab = ref('info')
@@ -1523,6 +1533,60 @@ const resetFilters = () => {
  font-weight: 600;
 }

+/* 移动端样式 */
+.mobile-header {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.mobile-actions {
+  width: 100%;
+  display: flex;
+  gap: 8px;
+}
+
+.mobile-actions .el-button {
+  flex: 1;
+}
+
+.mobile-info-row {
+  grid-template-columns: 1fr !important;
+  gap: 12px !important;
+}
+
+.mobile-form-row {
+  grid-template-columns: 1fr !important;
+  gap: 12px !important;
+}
+
+.mobile-info-grid {
+  grid-template-columns: 1fr !important;
+  gap: 12px !important;
+}
+
+.mobile-record-header {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.mobile-record-info {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  width: 100%;
+}
+
+.mobile-detail-row {
+  flex-direction: column;
+  gap: 3px;
+}
+
+.mobile-detail-row .detail-label {
+  width: auto;
+}
+
 /* 响应式设计 */
@media (max-width: 768px) {
  .invoice-balance-card {
@@ -1544,7 +1608,66 @@ const resetFilters = () => {
  }

  .invoice-tabs {
+    padding: 2px;
+  }
+
+  .tab-item {
+    padding: 6px 12px;
+    font-size: 13px;
+  }
+
+  .tab-item i {
+    font-size: 14px;
+  }
+
+  .section-title {
+    font-size: 16px;
+  }
+
+  .info-header {
    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .info-actions {
+    width: 100%;
+    display: flex;
+    gap: 8px;
+  }
+
+  .info-actions .el-button {
+    flex: 1;
+    font-size: 13px;
+  }
+
+  .info-card {
+    padding: 16px;
+  }
+
+  .info-row {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .info-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .info-label {
+    width: auto;
+    font-size: 13px;
+  }
+
+  .info-value {
+    font-size: 13px;
+    word-break: break-word;
+  }
+
+  .invoice-form {
+    padding: 12px;
  }

  .form-row {
@@ -1552,6 +1675,19 @@ const resetFilters = () => {
    gap: 12px;
  }

+  .form-actions {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .form-actions .el-button {
+    width: 100%;
+  }
+
+  .record-item {
+    padding: 12px;
+  }
+
  .record-header {
    flex-direction: column;
    align-items: flex-start;
@@ -1562,6 +1698,17 @@ const resetFilters = () => {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
+    width: 100%;
+  }
+
+  .record-id {
+    font-size: 12px;
+  }
+
+  .record-amount {
+    font-size: 16px;
+    width: 100%;
+    text-align: left;
  }

  .detail-row {
@@ -1571,6 +1718,118 @@ const resetFilters = () => {

  .detail-label {
    width: auto;
+    font-size: 12px;
+  }
+
+  .detail-value {
+    font-size: 12px;
+    word-break: break-word;
+  }
+
+  .invoice-info-details {
+    padding: 12px;
+  }
+
+  .info-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .info-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .info-label {
+    width: auto;
+    font-size: 12px;
+  }
+
+  .info-value {
+    font-size: 12px;
+    word-break: break-word;
+  }
+
+  .record-actions {
+    width: 100%;
+  }
+
+  .record-actions .el-button {
+    width: 100%;
+  }
+
+  /* 弹窗样式 */
+  .apply-dialog :deep(.el-dialog) {
+    margin: 5vh auto;
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+
+  .apply-dialog :deep(.el-dialog__body) {
+    padding: 16px;
+    max-height: calc(90vh - 120px);
+    overflow-y: auto;
+  }
+
+  .preview-content {
+    gap: 6px;
+  }
+
+  .preview-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .preview-label {
+    width: auto;
+    font-size: 12px;
+  }
+
+  .preview-value {
+    font-size: 12px;
+    word-break: break-word;
+  }
+
+  .dialog-footer {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .dialog-footer .el-button {
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .tab-item {
+    padding: 5px 8px;
+    font-size: 12px;
+  }
+
+  .tab-item i {
+    font-size: 12px;
+  }
+
+  .section-title {
+    font-size: 15px;
+  }
+
+  .info-card {
+    padding: 12px;
+  }
+
+  .invoice-form {
+    padding: 10px;
+  }
+
+  .record-item {
+    padding: 10px;
+  }
+
+  .invoice-info-details {
+    padding: 10px;
  }
 }
 </style>
--- a/src/pages/finance/Transactions.vue
+++ b/src/pages/finance/Transactions.vue
@@ -42,7 +42,7 @@
          </div>
        </FilterItem>

-        <FilterItem label="时间范围">
+        <FilterItem label="时间范围" class="col-span-1">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
@@ -53,6 +53,7 @@
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="handleDateRangeChange"
            class="w-full"
+            :size="isMobile ? 'small' : 'default'"
          />
        </FilterItem>

@@ -79,6 +80,7 @@
      </div>

      <div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+        <div class="table-container">
        <el-table
          :data="transactions"
          style="width: 100%"
@@ -120,10 +122,12 @@
            </template>
          </el-table-column>
        </el-table>
+        </div>
      </div>
    </template>

    <template #pagination>
+      <div class="pagination-wrapper">
      <el-pagination
        v-if="total > 0"
        v-model:current-page="currentPage"
@@ -134,6 +138,7 @@
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
+      </div>
    </template>

    <template #extra>
@@ -196,8 +201,12 @@ import { financeApi } from '@/api'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { ElMessage } from 'element-plus'

+// 移动端检测
+const { isMobile } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const transactions = ref([])
@@ -462,6 +471,19 @@ const handleViewDetail = (transaction) => {
  background: #f8fafc !important;
 }

+/* 表格容器 */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 分页器包装器 */
+.pagination-wrapper {
+  padding: 16px 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 /* 响应式设计 */
@media (max-width: 768px) {
  .stat-item {
@@ -488,5 +510,136 @@ const handleViewDetail = (transaction) => {
  .detail-value {
    font-size: 14px;
  }
+
+  /* 表格在移动端优化 */
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 800px;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 8px 4px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 4px;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 分页组件在移动端优化 */
+  .pagination-wrapper {
+    padding: 12px 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .pagination-wrapper :deep(.el-pagination) {
+    flex-wrap: nowrap;
+    min-width: fit-content;
+    justify-content: flex-start;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__sizes) {
+    display: none;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__total) {
+    font-size: 12px;
+    margin-right: 8px;
+    white-space: nowrap;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__jump) {
+    display: none;
+  }
+
+  .pagination-wrapper :deep(.el-pager li) {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    margin: 0 2px;
+    font-size: 12px;
+  }
+
+  .pagination-wrapper :deep(.btn-prev),
+  .pagination-wrapper :deep(.btn-next) {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px;
+  }
+
+  /* 对话框在移动端优化 */
+  .detail-dialog :deep(.el-dialog) {
+    margin: 20px;
+    width: calc(100% - 40px) !important;
+    max-width: none;
+  }
+
+  .detail-dialog :deep(.el-dialog__body) {
+    padding: 16px;
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+
+  .detail-dialog :deep(.grid-cols-2) {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  /* 金额范围输入框在移动端优化 */
+  .flex.gap-2 {
+    flex-wrap: wrap;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .pagination-wrapper {
+    padding: 8px 0;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__total) {
+    display: none;
+  }
+
+  .pagination-wrapper :deep(.el-pagination) {
+    font-size: 11px;
+  }
+
+  .pagination-wrapper :deep(.el-pager li) {
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+    font-size: 11px;
+  }
+
+  .pagination-wrapper :deep(.btn-prev),
+  .pagination-wrapper :deep(.btn-next) {
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+    font-size: 11px;
+  }
+
+  .stat-item {
+    padding: 10px 12px;
+    min-width: 80px;
+  }
+
+  .stat-value {
+    font-size: 18px;
+  }
+
+  .stat-label {
+    font-size: 11px;
+  }
 }
 </style>
--- a/src/pages/finance/Wallet.vue
+++ b/src/pages/finance/Wallet.vue
@@ -102,6 +102,32 @@
              </div>
            </div>

+            <!-- 微信充值 -->
+            <div
+              class="recharge-method-card"
+              :class="{ active: selectedMethod === 'wechat' }"
+              @click="selectMethod('wechat')"
+            >
+              <div class="method-icon wechat-icon">
+                <svg class="h-7 w-7" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 2.048-1.715 4.81-2.04 6.765-.632 0 0 .127-.08.289-.183a8.262 8.262 0 0 1-.79-3.228c0-4.054-3.89-7.342-8.691-7.342zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm6.581 4.853c-1.894-.006-3.598.723-4.712 1.87-.792.813-1.235 1.865-1.235 3.004 0 .918.3 1.762.81 2.426.393.511.893.93 1.468 1.22.464.23.97.345 1.483.345.276 0 .543-.027.811-.05a.86.86 0 0 1 .717.098l1.903 1.114c.11.065.167.054.167.054.16 0 .29-.132.29-.295 0-.072-.03-.142-.048-.213l-.39-1.48a.59.59 0 0 1 .213-.665c1.832-1.347 3.002-3.338 3.002-5.55 0-2.24-1.35-4.237-3.405-5.314a8.21 8.21 0 0 0-1.484-.456zm-2.834 3.524c.518 0 .938.427.938.953a.946.946 0 0 1-.938.953.946.946 0 0 1-.938-.953c0-.526.42-.953.938-.953zm4.604 0c.518 0 .938.427.938.953a.946.946 0 0 1-.938.953.946.946 0 0 1-.938-.953c0-.526.42-.953.938-.953z"/>
+                </svg>
+              </div>
+              <div class="method-content">
+                <div class="method-title">微信充值</div>
+                <div class="method-description">在线支付，即时到账</div>
+              </div>
+              <div
+                class="method-check"
+                :class="{
+                  checked: selectedMethod === 'wechat',
+                  unchecked: selectedMethod !== 'wechat',
+                }"
+              >
+                <el-icon v-if="selectedMethod === 'wechat'"><Check /></el-icon>
+              </div>
+            </div>
+
            <!-- 对公转账 -->
            <div
              class="recharge-method-card"
@@ -128,6 +154,104 @@
          </div>
        </div>

+        <!-- 微信充值表单 -->
+        <div v-if="selectedMethod === 'wechat'" class="recharge-form-section">
+          <h3 class="section-title">微信充值</h3>
+
+          <!-- 预设充值金额选择 -->
+          <div class="preset-amounts-section">
+            <h4 class="preset-title">选择充值金额</h4>
+            <div class="preset-amounts-grid">
+              <div
+                v-for="bonus in rechargeConfig.alipay_recharge_bonus"
+                :key="bonus.recharge_amount"
+                class="preset-amount-card"
+                :class="{ active: selectedPresetAmount === bonus.recharge_amount }"
+                @click="selectPresetAmount(bonus.recharge_amount)"
+              >
+                <div class="preset-amount-main">
+                  <div class="preset-amount-value">¥{{ formatPrice(bonus.recharge_amount) }}</div>
+                  <div class="preset-bonus-info">
+                    <span class="bonus-label">赠送</span>
+                    <span class="bonus-amount">¥{{ formatPrice(bonus.bonus_amount) }}</span>
+                  </div>
+                </div>
+                <div class="preset-amount-total">
+                  实到账：¥{{ formatPrice(bonus.recharge_amount + bonus.bonus_amount) }}
+                </div>
+              </div>
+
+              <!-- 自定义金额选项 -->
+              <div
+                class="preset-amount-card custom-amount-card"
+                :class="{ active: selectedPresetAmount === 'custom' }"
+                @click="selectCustomAmount"
+              >
+                <div class="preset-amount-main">
+                  <div class="preset-amount-value">自定义金额</div>
+                  <div class="preset-bonus-info">
+                    <span class="bonus-label">赠送</span>
+                    <span class="bonus-amount">{{ getCustomBonusText() }}</span>
+                  </div>
+                </div>
+                <div class="preset-amount-total">
+                  实到账：¥{{ getCustomTotalAmount() }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <el-form
+            ref="wechatFormRef"
+            :model="wechatForm"
+            :rules="wechatRules"
+            label-width="120px"
+            class="recharge-form"
+          >
+            <el-form-item label="充值金额" prop="amount">
+              <el-input
+                v-model="wechatForm.amount"
+                placeholder="请输入充值金额"
+                @input="handleWechatAmountInput"
+                class="amount-input"
+              >
+                <template #prepend>¥</template>
+              </el-input>
+              <div class="form-tip">最低充值金额：¥{{ rechargeConfig.min_amount }}，最多支持两位小数</div>
+
+              <!-- 显示赠送信息 -->
+              <div v-if="wechatForm.amount && getCurrentBonusAmount() > 0" class="bonus-info">
+                <el-alert
+                  :title="`充值 ¥${wechatForm.amount} 可享受赠送 ¥${formatPrice(getCurrentBonusAmount())}`"
+                  type="success"
+                  :closable="false"
+                  show-icon
+                >
+                  <template #default>
+                    <div class="bonus-detail">
+                      <span>实际到账：¥{{ formatPrice(parseFloat(wechatForm.amount || 0) + getCurrentBonusAmount()) }}</span>
+                    </div>
+                  </template>
+                </el-alert>
+              </div>
+            </el-form-item>
+
+            <!-- PC/H5 场景不再必填 openid -->
+
+            <el-form-item>
+              <el-button
+                type="primary"
+                size="large"
+                @click="handleWechatRecharge"
+                :loading="wechatLoading"
+                class="submit-btn"
+              >
+                立即充值
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
        <!-- 支付宝充值表单 -->
        <div v-if="selectedMethod === 'alipay'" class="recharge-form-section">
          <h3 class="section-title">支付宝充值</h3>
@@ -279,6 +403,26 @@

    <!-- 商务洽谈弹窗 -->
    <BusinessConsultationDialog v-model:visible="showBusinessConsultation" />
+
+    <!-- 微信支付二维码弹窗 -->
+    <el-dialog
+      v-model="showQrCodeDialog"
+      title="微信扫码支付"
+      width="400px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      class="qr-code-dialog"
+    >
+      <div class="qr-code-container">
+        <div class="qr-code-wrapper">
+          <canvas ref="qrCodeCanvas" class="qr-code-canvas"></canvas>
+        </div>
+        <p class="qr-code-tip">请使用微信扫描上方二维码完成支付</p>
+        <p class="qr-code-amount">支付金额：¥{{ formatPrice(wechatForm.amount) }}</p>
+        <p v-if="isCheckingPayment" class="qr-code-checking">正在确认支付状态，请稍候...</p>
+        <el-button type="primary" @click="closeQrCodeDialog" class="close-qr-btn">关闭</el-button>
+      </div>
+    </el-dialog>
  </div>
 </template>

@@ -290,6 +434,7 @@ import { useUserStore } from '@/stores/user'
 import { Check } from '@element-plus/icons-vue'
 import { CreditCardIcon, CurrencyYenIcon } from '@heroicons/vue/24/outline'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import QRCode from 'qrcode'

 const userStore = useUserStore()
 const userInfo = userStore.userInfo
@@ -307,7 +452,13 @@ const {
 // 响应式数据
 const selectedMethod = ref('alipay')
 const alipayLoading = ref(false)
+const wechatLoading = ref(false)
 const showBusinessConsultation = ref(false)
+const showQrCodeDialog = ref(false)
+const qrCodeCanvas = ref(null)
+const currentWechatOrderNo = ref(null)
+const isCheckingPayment = ref(false)
+let wechatOrderPollTimer = null

 // 钱包信息
 const walletInfo = ref({
@@ -337,6 +488,12 @@ const alipayForm = reactive({
  amount: '',
 })

+// 微信充值表单
+const wechatFormRef = ref()
+const wechatForm = reactive({
+  amount: '',
+})
+
 // 预设金额选择
 const selectedPresetAmount = ref(null)

@@ -371,6 +528,17 @@ const handleAmountInput = (value) => {
  }
 }

+// 处理微信金额输入变化
+const handleWechatAmountInput = (value) => {
+  const formatted = formatAmountInput(value || '')
+  wechatForm.amount = formatted
+
+  // 如果输入了自定义金额，更新选择状态
+  if (formatted && selectedPresetAmount.value !== 'custom') {
+    selectedPresetAmount.value = 'custom'
+  }
+}
+
 const alipayRules = {
  amount: [
    { required: true, message: '请输入充值金额', trigger: 'blur' },
@@ -410,6 +578,45 @@ const alipayRules = {
  ],
 }

+const wechatRules = {
+  amount: [
+    { required: true, message: '请输入充值金额', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        if (!value) {
+          callback()
+          return
+        }
+
+        // 检查是否为有效数字格式
+        const amountRegex = /^\d+(\.\d{1,2})?$/
+        if (!amountRegex.test(value)) {
+          callback(new Error('请输入正确的金额格式，最多支持两位小数'))
+          return
+        }
+
+        // 检查金额范围
+        const amount = parseFloat(value)
+        const minAmount = parseFloat(rechargeConfig.value.min_amount)
+        const maxAmount = parseFloat(rechargeConfig.value.max_amount)
+
+        if (amount < minAmount) {
+          callback(new Error(`充值金额不能少于${minAmount}元`))
+          return
+        }
+
+        if (amount > maxAmount) {
+          callback(new Error(`单次充值金额不能超过${maxAmount}元`))
+          return
+        }
+
+        callback()
+      },
+      trigger: 'blur',
+    },
+  ],
+}
+
 // 初始化
 onMounted(() => {
  loadWalletInfo()
@@ -450,7 +657,9 @@ const loadRechargeConfig = async () => {
      if (rechargeConfig.value.alipay_recharge_bonus && rechargeConfig.value.alipay_recharge_bonus.length > 0) {
        const firstBonus = rechargeConfig.value.alipay_recharge_bonus[0]
        selectedPresetAmount.value = firstBonus.recharge_amount
-        alipayForm.amount = firstBonus.recharge_amount.toString()
+        const amountStr = firstBonus.recharge_amount.toString()
+        alipayForm.amount = amountStr
+        wechatForm.amount = amountStr
      }
    }
  } catch (error) {
@@ -513,13 +722,16 @@ const copyToClipboard = async (text) => {
 // 选择预设金额
 const selectPresetAmount = (amount) => {
  selectedPresetAmount.value = amount
-  alipayForm.amount = amount.toString()
+  const amountStr = amount.toString()
+  alipayForm.amount = amountStr
+  wechatForm.amount = amountStr
 }

 // 选择自定义金额
 const selectCustomAmount = () => {
  selectedPresetAmount.value = 'custom'
  alipayForm.amount = '' // 清空金额输入框
+  wechatForm.amount = '' // 清空微信金额输入框
 }

 // 根据充值金额获取赠送金额
@@ -545,7 +757,9 @@ const getBonusAmount = (rechargeAmount) => {
 // 获取当前预设金额的赠送金额
 const getCurrentBonusAmount = () => {
  if (selectedPresetAmount.value === 'custom') {
-    return getBonusAmount(alipayForm.amount)
+    // 根据当前选择的充值方式获取金额
+    const currentAmount = selectedMethod.value === 'wechat' ? wechatForm.amount : alipayForm.amount
+    return getBonusAmount(currentAmount)
  }

  const bonus = rechargeConfig.value.alipay_recharge_bonus.find(
@@ -565,7 +779,9 @@ const getCustomBonusText = () => {
 // 获取自定义金额的总到账金额
 const getCustomTotalAmount = () => {
  if (selectedPresetAmount.value === 'custom') {
-    const amount = parseFloat(alipayForm.amount || 0)
+    // 根据当前选择的充值方式获取金额
+    const currentAmount = selectedMethod.value === 'wechat' ? wechatForm.amount : alipayForm.amount
+    const amount = parseFloat(currentAmount || 0)
    const bonus = getBonusAmount(amount)
    return formatPrice(amount + bonus)
  }
@@ -628,6 +844,204 @@ const handleAlipayRecharge = async () => {
    alipayLoading.value = false
  }
 }
+
+// 微信充值
+const handleWechatRecharge = async () => {
+  if (!wechatFormRef.value) return
+
+  try {
+    await wechatFormRef.value.validate()
+
+    // 显示确认框
+    await ElMessageBox.confirm(
+      `确认充值 ¥${wechatForm.amount} 到您的钱包吗？`,
+      '确认充值',
+      {
+        confirmButtonText: '确认充值',
+        cancelButtonText: '取消',
+        type: 'warning',
+        customClass: 'custom-message-box',
+        dangerouslyUseHTMLString: false
+      }
+    )
+
+    wechatLoading.value = true
+
+    // 调用后端创建微信充值订单
+    const response = await callProtectedAPI(financeApi.createWechatRecharge, {
+      amount: wechatForm.amount, // 直接传递字符串类型
+      subject: `钱包充值 ¥${wechatForm.amount}`,
+      platform: 'wx_h5', // PC/H5 场景，后端已兼容无 openid
+    })
+
+    if (!response) {
+      ElMessage.error('请先完成企业认证后再进行充值操作')
+      return
+    }
+
+    // 处理微信支付响应
+    // prepay_data 可能包含 code_url (扫码支付) 或 pay_url (H5支付)
+    if (response.data && response.data.prepay_data) {
+      const prepayData = response.data.prepay_data
+      
+      // 扫码支付：显示二维码
+      if (prepayData.code_url) {
+        // 保存订单号用于轮询（从响应中获取订单号）
+        if (response.data.out_trade_no) {
+          currentWechatOrderNo.value = response.data.out_trade_no
+          await showQrCode(prepayData.code_url)
+          // 开始轮询订单状态
+          startWechatOrderPolling()
+        } else {
+          ElMessage.error('获取订单号失败，请重新支付')
+        }
+      } 
+      // H5支付：跳转到支付页面
+      else if (prepayData.pay_url || response.data.pay_url) {
+        ElMessage.success('正在跳转到微信支付...')
+        window.location.href = prepayData.pay_url || response.data.pay_url
+      }
+      // 小程序或APP支付
+      else if (prepayData.prepay_id || response.data.prepay_id) {
+        ElMessage.success('请使用微信扫码支付')
+        // 这里可以根据实际返回的数据进行处理
+      } else {
+        console.warn('微信支付返回数据格式异常:', response.data)
+        ElMessage.warning('支付数据格式异常，请联系客服')
+      }
+    } else if (response.data && response.data.pay_url) {
+      // 兼容旧的返回格式（直接返回 pay_url）
+      ElMessage.success('正在跳转到微信支付...')
+      window.location.href = response.data.pay_url
+    } else {
+      console.warn('微信支付返回数据异常:', response.data)
+      ElMessage.warning('获取支付信息失败，请稍后重试')
+    }
+  } catch (error) {
+    // 如果是用户取消，不显示错误信息
+    if (error === 'cancel' || error === 'close') {
+      return
+    }
+
+    console.error('微信充值失败:', error)
+    if (canCallAPI.value) {
+      ElMessage.error('微信充值失败，请稍后重试')
+    }
+  } finally {
+    wechatLoading.value = false
+  }
+}
+
+// 显示二维码
+const showQrCode = async (codeUrl) => {
+  try {
+    showQrCodeDialog.value = true
+    
+    // 等待DOM更新
+    await nextTick()
+    
+    if (qrCodeCanvas.value) {
+      // 生成二维码
+      await QRCode.toCanvas(qrCodeCanvas.value, codeUrl, {
+        width: 256,
+        margin: 2,
+        color: {
+          dark: '#000000',
+          light: '#FFFFFF'
+        }
+      })
+    }
+  } catch (error) {
+    console.error('生成二维码失败:', error)
+    ElMessage.error('生成二维码失败，请稍后重试')
+    showQrCodeDialog.value = false
+  }
+}
+
+// 关闭二维码弹窗
+const closeQrCodeDialog = () => {
+  stopWechatOrderPolling()
+  showQrCodeDialog.value = false
+  currentWechatOrderNo.value = null
+  isCheckingPayment.value = false
+}
+
+// 开始轮询微信订单状态
+const startWechatOrderPolling = () => {
+  // 清除之前的定时器
+  stopWechatOrderPolling()
+  
+  // 立即检查一次
+  checkWechatOrderStatus()
+  
+  // 每3秒轮询一次
+  wechatOrderPollTimer = setInterval(() => {
+    checkWechatOrderStatus()
+  }, 3000)
+}
+
+// 停止轮询
+const stopWechatOrderPolling = () => {
+  if (wechatOrderPollTimer) {
+    clearInterval(wechatOrderPollTimer)
+    wechatOrderPollTimer = null
+  }
+}
+
+// 检查微信订单状态
+const checkWechatOrderStatus = async () => {
+  if (!currentWechatOrderNo.value) {
+    return
+  }
+
+  try {
+    isCheckingPayment.value = true
+    const response = await callProtectedAPI(financeApi.getWechatOrderStatus, {
+      out_trade_no: currentWechatOrderNo.value
+    })
+
+    if (!response || !response.data) {
+      isCheckingPayment.value = false
+      return
+    }
+
+    const orderStatus = response.data.status
+
+    // 订单状态：pending, success, failed, closed
+    if (orderStatus === 'success') {
+      // 支付成功
+      stopWechatOrderPolling()
+      isCheckingPayment.value = false
+      closeQrCodeDialog()
+      ElMessage.success('充值成功！')
+      
+      // 刷新钱包余额
+      await loadWalletInfo()
+      
+      // 重置表单
+      wechatForm.amount = ''
+      selectedPresetAmount.value = null
+    } else if (orderStatus === 'failed' || orderStatus === 'closed') {
+      // 支付失败或关闭
+      stopWechatOrderPolling()
+      isCheckingPayment.value = false
+      ElMessage.error('支付失败，请重新支付')
+      closeQrCodeDialog()
+    } else {
+      // pending 状态继续轮询
+      isCheckingPayment.value = false
+    }
+  } catch (error) {
+    console.error('查询微信订单状态失败:', error)
+    isCheckingPayment.value = false
+    // 不显示错误，继续轮询
+  }
+}
+
+// 组件卸载时清理定时器
+onBeforeUnmount(() => {
+  stopWechatOrderPolling()
+})
 </script>

 <style scoped>
@@ -794,6 +1208,10 @@ const handleAlipayRecharge = async () => {
  background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
 }

+.wechat-icon {
+  background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
+}
+
 .transfer-icon {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
 }
@@ -1161,4 +1579,82 @@ const handleAlipayRecharge = async () => {
    padding: 2px 4px;
  }
 }
+
+/* 二维码弹窗样式 */
+.qr-code-dialog :deep(.el-dialog) {
+  border-radius: 16px;
+}
+
+.qr-code-dialog :deep(.el-dialog__header) {
+  padding: 20px 20px 10px;
+  text-align: center;
+}
+
+.qr-code-dialog :deep(.el-dialog__title) {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.qr-code-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 0;
+}
+
+.qr-code-wrapper {
+  width: 256px;
+  height: 256px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ffffff;
+  border: 2px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.qr-code-canvas {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.qr-code-tip {
+  font-size: 14px;
+  color: #64748b;
+  margin-bottom: 8px;
+  text-align: center;
+}
+
+.qr-code-amount {
+  font-size: 16px;
+  font-weight: 600;
+  color: #dc2626;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+.qr-code-checking {
+  font-size: 14px;
+  color: #3b82f6;
+  margin-bottom: 24px;
+  text-align: center;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
+.close-qr-btn {
+  width: 120px;
+  height: 40px;
+}
 </style>
--- a/src/pages/finance/recharge-records/index.vue
+++ b/src/pages/finance/recharge-records/index.vue
@@ -14,6 +14,7 @@
            class="w-full"
          >
            <el-option label="支付宝充值" value="alipay" />
+            <el-option label="微信充值" value="wechat" />
            <el-option label="对公转账" value="transfer" />
            <el-option label="赠送" value="gift" />
          </el-select>
@@ -34,7 +35,7 @@
          </el-select>
        </FilterItem>

-        <FilterItem label="开始时间">
+        <FilterItem label="开始时间" class="col-span-1">
          <el-date-picker
            v-model="filters.start_time"
            type="datetime"
@@ -43,10 +44,11 @@
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="handleFilterChange"
            class="w-full"
+            :size="isMobile ? 'small' : 'default'"
          />
        </FilterItem>

-        <FilterItem label="结束时间">
+        <FilterItem label="结束时间" class="col-span-1">
          <el-date-picker
            v-model="filters.end_time"
            type="datetime"
@@ -55,6 +57,7 @@
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="handleFilterChange"
            class="w-full"
+            :size="isMobile ? 'small' : 'default'"
          />
        </FilterItem>

@@ -79,6 +82,7 @@
      </div>

      <div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+        <div class="table-container">
        <el-table
          :data="records"
          style="width: 100%"
@@ -100,6 +104,10 @@
                  <span class="text-gray-500">支付宝订单：</span>
                  <span class="font-mono">{{ row.alipay_order_id }}</span>
                </div>
+                <div v-if="row.wechat_order_id" class="text-sm">
+                  <span class="text-gray-500">微信订单：</span>
+                  <span class="font-mono">{{ row.wechat_order_id }}</span>
+                </div>
                <div v-if="row.transfer_order_id" class="text-sm">
                  <span class="text-gray-500">转账订单：</span>
                  <span class="font-mono">{{ row.transfer_order_id }}</span>
@@ -156,10 +164,12 @@
            </template>
          </el-table-column>
        </el-table>
+        </div>
      </div>
    </template>

    <template #pagination>
+      <div class="pagination-wrapper">
      <el-pagination
        v-if="total > 0"
        v-model:current-page="currentPage"
@@ -170,6 +180,7 @@
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
+      </div>
    </template>
  </ListPageLayout>
 </template>
@@ -179,8 +190,12 @@ import { financeApi } from '@/api'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { ElMessage } from 'element-plus'

+// 移动端检测
+const { isMobile } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const records = ref([])
@@ -203,11 +218,19 @@ let searchTimer = null
 const loadRecords = async () => {
  loading.value = true
  try {
+    // 构建参数，过滤掉空值
    const params = {
      page: currentPage.value,
-      page_size: pageSize.value,
-      ...filters
+      page_size: pageSize.value
    }
+    
+    // 只添加非空的筛选条件
+    Object.keys(filters).forEach(key => {
+      const value = filters[key]
+      if (value !== '' && value !== null && value !== undefined) {
+        params[key] = value
+      }
+    })

    const response = await financeApi.getUserRechargeRecords(params)
    records.value = response.data?.items || []
@@ -247,6 +270,7 @@ const formatTime = (date) => {
 const getRechargeTypeTagType = (type) => {
  const typeMap = {
    alipay: 'primary',
+    wechat: 'success',
    transfer: 'warning',
    gift: 'success'
  }
@@ -257,6 +281,7 @@ const getRechargeTypeTagType = (type) => {
 const getRechargeTypeText = (type) => {
  const typeMap = {
    alipay: '支付宝充值',
+    wechat: '微信充值',
    transfer: '对公转账',
    gift: '赠送'
  }
@@ -339,6 +364,19 @@ onMounted(() => {
  background: #f8fafc !important;
 }

+/* 表格容器 */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 分页器包装器 */
+.pagination-wrapper {
+  padding: 16px 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 /* 响应式设计 */
@media (max-width: 768px) {
  .stat-item {
@@ -353,5 +391,113 @@ onMounted(() => {
  .stat-label {
    font-size: 12px;
  }
+
+  /* 表格在移动端优化 */
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 1000px;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 8px 4px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 4px;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 分页组件在移动端优化 */
+  .pagination-wrapper {
+    padding: 12px 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .pagination-wrapper :deep(.el-pagination) {
+    flex-wrap: nowrap;
+    min-width: fit-content;
+    justify-content: flex-start;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__sizes) {
+    display: none;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__total) {
+    font-size: 12px;
+    margin-right: 8px;
+    white-space: nowrap;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__jump) {
+    display: none;
+  }
+
+  .pagination-wrapper :deep(.el-pager li) {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    margin: 0 2px;
+    font-size: 12px;
+  }
+
+  .pagination-wrapper :deep(.btn-prev),
+  .pagination-wrapper :deep(.btn-next) {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .pagination-wrapper {
+    padding: 8px 0;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__total) {
+    display: none;
+  }
+
+  .pagination-wrapper :deep(.el-pagination) {
+    font-size: 11px;
+  }
+
+  .pagination-wrapper :deep(.el-pager li) {
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+    font-size: 11px;
+  }
+
+  .pagination-wrapper :deep(.btn-prev),
+  .pagination-wrapper :deep(.btn-next) {
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+    font-size: 11px;
+  }
+
+  .stat-item {
+    padding: 10px 12px;
+    min-width: 80px;
+  }
+
+  .stat-value {
+    font-size: 18px;
+  }
+
+  .stat-label {
+    font-size: 11px;
+  }
 }
 </style>
--- a/src/pages/products/detail.vue
+++ b/src/pages/products/detail.vue
@@ -3,15 +3,31 @@
    <div class="list-page-card">
      <!-- 页面头部 -->
      <div class="list-page-header">
-        <div class="flex justify-between items-start">
-          <div>
+        <div :class="['header-content', isMobile ? 'flex-col' : 'flex justify-between items-start']">
+          <div class="header-title-section">
            <h1 class="list-page-title">{{ product?.name || '产品详情' }}</h1>
            <p class="list-page-subtitle">{{ product?.description || '查看产品详细信息' }}</p>
          </div>
-          <div class="list-page-actions">
-            <el-button @click="$router.back()">返回</el-button>
+          <div :class="['list-page-actions', isMobile ? 'mobile-actions' : '']">
+            <el-button 
+              :size="isMobile ? 'small' : 'default'"
+              @click="$router.back()"
+            >
+              返回
+            </el-button>
+            <el-button
+              v-if="product?.documentation"
+              :size="isMobile ? 'small' : 'default'"
+              type="info"
+              @click="downloadDocumentation"
+              :loading="downloading"
+            >
+              <el-icon><Download /></el-icon>
+              {{ product?.documentation?.pdf_file_path ? '下载PDF文档' : '下载接口文档' }}
+            </el-button>
            <el-button
              v-if="!isSubscribed"
+              :size="isMobile ? 'small' : 'default'"
              type="primary"
              @click="handleSubscribe"
              :loading="subscribing"
@@ -20,13 +36,16 @@
            </el-button>
            <el-button
              v-else
-              type="success"
-              disabled
+              :size="isMobile ? 'small' : 'default'"
+              type="danger"
+              @click="handleCancelSubscription"
+              :loading="cancelling"
            >
-              已订阅
+              取消订阅
            </el-button>
            <el-button
              v-if="isSubscribed"
+              :size="isMobile ? 'small' : 'default'"
              type="warning"
              @click="goToApiDebugger"
            >
@@ -50,7 +69,7 @@
          <!-- 基本信息 -->
          <div class="detail-section">
            <h3 class="section-title">基本信息</h3>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div :class="['info-grid', isMobile ? 'info-grid-mobile' : 'info-grid-desktop']">
              <div class="info-item">
                <label class="info-label">产品编号</label>
                <span class="info-value">{{ product.code }}</span>
@@ -260,18 +279,24 @@

 <script setup>
 import { productApi, subscriptionApi } from '@/api'
-import { DocumentCopy } from '@element-plus/icons-vue'
+import { useMobileTable } from '@/composables/useMobileTable'
+import { DocumentCopy, Download } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { marked } from 'marked'

 const route = useRoute()
 const router = useRouter()

+// 移动端检测
+const { isMobile } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const product = ref(null)
 const userSubscriptions = ref([])
 const subscribing = ref(false)
+const cancelling = ref(false)
+const downloading = ref(false)
 const activeTab = ref('content')
 const currentTimestamp = ref('')

@@ -288,6 +313,12 @@ const isSubscribed = computed(() => {
  return userSubscriptions.value.some(sub => sub.product_id === product.value.id)
 })

+// 获取当前产品的订阅信息
+const currentSubscription = computed(() => {
+  if (!product.value || !userSubscriptions.value.length) return null
+  return userSubscriptions.value.find(sub => sub.product_id === product.value.id)
+})
+
 // 初始化
 onMounted(() => {
  loadUserSubscriptions()
@@ -321,7 +352,7 @@ const startTimestampUpdate = () => {
 // 加载用户订阅
 const loadUserSubscriptions = async () => {
  try {
-    const response = await subscriptionApi.getMySubscriptions({ page: 1, page_size: 100 })
+    const response = await subscriptionApi.getMySubscriptions({ page: 1, page_size: 1000 })
    userSubscriptions.value = response.data?.items || []
  } catch (error) {
    console.error('加载用户订阅失败:', error)
@@ -528,19 +559,53 @@ const handleSubscribe = async () => {
  } catch (error) {
    if (error !== 'cancel') {
      console.error('订阅失败:', error)
-      ElMessage.error('订阅失败')
+      const errorMessage = error.response?.data?.message || error.message || '订阅失败'
+      ElMessage.error(errorMessage)
    }
  } finally {
    subscribing.value = false
  }
 }

+// 取消订阅
+const handleCancelSubscription = async () => {
+  if (!product.value || !currentSubscription.value) return
+
+  try {
+    await ElMessageBox.confirm(
+      `确定要取消订阅产品"${product.value.name}"吗？取消后将无法继续使用该产品的API服务。`,
+      '取消订阅确认',
+      {
+        confirmButtonText: '确定取消',
+        cancelButtonText: '我再想想',
+        type: 'warning'
+      }
+    )
+
+    cancelling.value = true
+
+    await subscriptionApi.cancelMySubscription(currentSubscription.value.id)
+    ElMessage.success('取消订阅成功')
+
+    // 重新加载用户订阅
+    await loadUserSubscriptions()
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('取消订阅失败:', error)
+      const errorMessage = error.response?.data?.message || error.message || '取消订阅失败'
+      ElMessage.error(errorMessage)
+    }
+  } finally {
+    cancelling.value = false
+  }
+}
+
 // 前往在线调试
 const goToApiDebugger = () => {
  if (!product.value) return
  router.push({
    name: 'ApiDebugger',
-    params: { productId: product.value.id }
+    query: { productId: product.value.id }
  })
 }

@@ -659,6 +724,65 @@ const getDefaultErrorCodes = () => {
 | 2001 | 业务失败 |`
 }

+// 下载接口文档
+const downloadDocumentation = async () => {
+  if (!product.value) {
+    ElMessage.warning('产品信息不存在')
+    return
+  }
+
+  downloading.value = true
+  try {
+    // 根据是否有PDF文件路径判断文件类型
+    const hasPDF = product.value.documentation?.pdf_file_path
+    
+    // 使用原生fetch以获取完整的响应信息（包括headers）
+    const token = localStorage.getItem('access_token')
+    const tokenType = localStorage.getItem('token_type') || 'Bearer'
+    const headers = {
+      'Authorization': token ? `${tokenType} ${token}` : ''
+    }
+    
+    const response = await fetch(`/api/v1/products/${product.value.id}/documentation/download`, {
+      headers
+    })
+    
+    if (!response.ok) {
+      throw new Error('下载失败')
+    }
+    
+    // 获取Content-Type
+    const contentType = response.headers.get('content-type') || ''
+    const isPDF = contentType.includes('application/pdf') || hasPDF
+    
+    // 获取文件内容
+    const blob = await response.blob()
+    
+    // 创建下载链接
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    const extension = isPDF ? 'pdf' : 'md'
+    const filename = `${product.value.name || '产品'}_接口文档.${extension}`
+    link.download = filename
+
+    // 触发下载
+    document.body.appendChild(link)
+    link.click()
+
+    // 清理
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+
+    ElMessage.success('文档下载成功')
+  } catch (error) {
+    console.error('下载接口文档失败:', error)
+    ElMessage.error('下载接口文档失败')
+  } finally {
+    downloading.value = false
+  }
+}
+
 // 下载 Markdown 文档
 const downloadMarkdown = (type) => {
  if (!product.value?.documentation) {
@@ -876,10 +1000,18 @@ const downloadMarkdown = (type) => {

 .content-tabs :deep(.el-tabs__nav-wrap) {
  padding: 0;
+  overflow: visible;
+}
+
+.content-tabs :deep(.el-tabs__nav-scroll) {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }

 .content-tabs :deep(.el-tabs__nav) {
  border: none;
+  white-space: nowrap;
+  flex-wrap: nowrap;
 }

 .content-tabs :deep(.el-tabs__item) {
@@ -917,6 +1049,8 @@ const downloadMarkdown = (type) => {
 .tab-content {
  padding: 24px;
  min-height: 400px;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }

 .doc-content {
@@ -966,15 +1100,25 @@ const downloadMarkdown = (type) => {
  line-height: 1.6;
 }

+.doc-content {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  max-width: 100%;
+  position: relative;
+}
+
 .doc-content :deep(table) {
  width: 100%;
+  min-width: 800px;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
  background: #ffffff;
  border-radius: 8px;
-  overflow: hidden;
+  overflow: visible;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  display: table;
+  table-layout: auto;
 }

 .doc-content :deep(th) {
@@ -1219,8 +1363,93 @@ const downloadMarkdown = (type) => {
  border-top: 1px dashed #e5e7eb;
 }

+/* 头部布局 */
+.header-content {
+  display: flex;
+  gap: 16px;
+}
+
+.header-title-section {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 基本信息网格布局 */
+.info-grid {
+  display: grid;
+  gap: 24px;
+}
+
+.info-grid-desktop {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.info-grid-mobile {
+  grid-template-columns: 1fr;
+}
+
 /* 响应式设计 */
@media (max-width: 768px) {
+  .list-page-container {
+    padding: 12px;
+  }
+
+  .list-page-card {
+    padding: 16px;
+  }
+
+  .header-content {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .header-title-section {
+    width: 100%;
+  }
+
+  .info-grid-mobile {
+    gap: 16px;
+  }
+
+  .list-page-actions {
+    width: 100%;
+    display: flex !important;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 12px;
+  }
+
+  .list-page-actions.mobile-actions {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    align-items: stretch;
+  }
+
+  .list-page-actions.mobile-actions {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .list-page-actions.mobile-actions .el-button {
+    width: 100%;
+    flex: 1 1 100%;
+    min-width: 100%;
+    max-width: 100%;
+    margin-bottom: 0;
+    display: inline-flex !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+    justify-content: center;
+  }
+
+  /* 确保所有按钮可见 */
+  .list-page-actions .el-button {
+    display: inline-flex !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+    position: relative !important;
+  }
+
  .detail-section {
    margin-bottom: 24px;
  }
@@ -1262,22 +1491,71 @@ const downloadMarkdown = (type) => {
  }

  .content-tabs :deep(.el-tabs__header) {
-    padding: 0 16px;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .content-tabs :deep(.el-tabs__nav-wrap) {
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+  }
+
+  .content-tabs :deep(.el-tabs__nav-wrap::-webkit-scrollbar) {
+    height: 4px;
+  }
+
+  .content-tabs :deep(.el-tabs__nav-wrap::-webkit-scrollbar-track) {
+    background: transparent;
+  }
+
+  .content-tabs :deep(.el-tabs__nav-wrap::-webkit-scrollbar-thumb) {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 2px;
+  }
+
+  .content-tabs :deep(.el-tabs__nav-scroll) {
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .content-tabs :deep(.el-tabs__nav) {
+    display: inline-flex;
+    white-space: nowrap;
+    flex-wrap: nowrap;
+    min-width: max-content;
  }

  .content-tabs :deep(.el-tabs__item) {
    padding: 12px 16px;
    font-size: 14px;
+    white-space: nowrap;
+    flex-shrink: 0;
+    min-width: fit-content;
  }

  .tab-content {
-    padding: 16px;
+    padding: 16px 12px;
    min-height: 300px;
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+    width: 100%;
+    position: relative;
  }

  .doc-content {
-    padding: 16px;
+    padding: 16px 12px;
    font-size: 13px;
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+    width: calc(100% + 24px);
+    max-width: calc(100vw - 24px);
+    margin-left: -12px;
+    margin-right: -12px;
+    padding-left: 12px;
+    padding-right: 12px;
+    position: relative;
  }

  .doc-content :deep(h1) {
@@ -1294,11 +1572,33 @@ const downloadMarkdown = (type) => {

  .doc-content :deep(table) {
    font-size: 13px;
+    min-width: 800px;
+    width: auto;
+    display: table;
+    table-layout: auto;
+    border-collapse: collapse;
+  }
+
+  .doc-content :deep(thead),
+  .doc-content :deep(tbody),
+  .doc-content :deep(tr) {
+    display: table-row;
  }

  .doc-content :deep(th),
  .doc-content :deep(td) {
    padding: 8px 12px;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    white-space: normal;
+    display: table-cell;
+    min-width: 100px;
+  }
+
+  /* 确保表格可以横向滚动 */
+  .tab-content {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
  }

  /* 请求URL移动端样式 */
@@ -1333,4 +1633,29 @@ const downloadMarkdown = (type) => {
    font-size: 14px;
  }
 }
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .list-page-actions.mobile-actions {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .list-page-actions.mobile-actions .el-button {
+    min-width: 100%;
+    width: 100%;
+    flex-basis: 100%;
+  }
+
+  .info-grid-mobile {
+    gap: 16px;
+  }
+
+  .info-item {
+    padding: 12px;
+    background: rgba(248, 250, 252, 0.5);
+    border-radius: 8px;
+    border: 1px solid rgba(226, 232, 240, 0.4);
+  }
+}
 </style>
--- a/src/pages/products/index.vue
+++ b/src/pages/products/index.vue
@@ -50,29 +50,45 @@
      </div>

      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-4">
-        <ProductCard v-for="product in products" :key="product.id" :product="product"
-          :is-subscribed="product.is_subscribed" @view-detail="handleViewDetail"
-          @subscribe="handleSubscribe" />
+        <ProductCard 
+          v-for="product in products" 
+          :key="product.id" 
+          :product="product"
+          :is-subscribed="getProductSubscriptionStatus(product.id)"
+          :subscription="getProductSubscription(product.id)"
+          @view-detail="handleViewDetail"
+          @subscribe="handleSubscribe"
+          @cancel-subscribe="handleCancelSubscribe" />
      </div>
    </template>

    <template #pagination>
-      <el-pagination v-if="total > 0" v-model:current-page="currentPage" v-model:page-size="pageSize"
-        :page-sizes="[12, 24, 48, 96]" :total="total" layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+      <el-pagination 
+        v-if="total > 0" 
+        v-model:current-page="currentPage" 
+        v-model:page-size="pageSize"
+        :page-sizes="[12, 24, 48, 96]" 
+        :total="total" 
+        :layout="paginationLayout"
+        :small="appStore.isMobile"
+        class="pagination-wrapper"
+        @size-change="handleSizeChange" 
+        @current-change="handleCurrentChange" />
    </template>
  </ListPageLayout>
 </template>

 <script setup>
-import { categoryApi, productApi } from '@/api'
+import { categoryApi, productApi, subscriptionApi } from '@/api'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
 import ProductCard from '@/components/product/ProductCard.vue'
+import { useAppStore } from '@/stores/app'
 import { ElMessage, ElMessageBox } from 'element-plus'

 const router = useRouter()
+const appStore = useAppStore()

 // 响应式数据
 const loading = ref(false)
@@ -81,6 +97,7 @@ const categories = ref([])
 const total = ref(0)
 const currentPage = ref(1)
 const pageSize = ref(12)
+const userSubscriptions = ref([]) // 用户订阅列表

 // 筛选条件
 const filters = reactive({
@@ -90,12 +107,23 @@ const filters = reactive({
  keyword: ''
 })

+// 响应式分页布局：移动端简化，桌面端完整
+const paginationLayout = computed(() => {
+  if (appStore.isMobile) {
+    // 移动端：只显示上一页、页码、下一页和总数
+    return 'prev, pager, next, total'
+  }
+  // 桌面端：显示完整功能
+  return 'total, sizes, prev, pager, next, jumper'
+})
+
 // 搜索防抖
 let searchTimer = null

 // 初始化
 onMounted(() => {
  loadCategories()
+  loadUserSubscriptions()
  loadProducts()
 })

@@ -109,6 +137,30 @@ const loadCategories = async () => {
  }
 }

+// 加载用户订阅列表
+const loadUserSubscriptions = async () => {
+  try {
+    const response = await subscriptionApi.getMySubscriptions({ page: 1, page_size: 1000 })
+    userSubscriptions.value = response.data?.items || []
+  } catch (error) {
+    // 如果未登录或获取失败，清空订阅列表
+    console.error('加载用户订阅失败:', error)
+    userSubscriptions.value = []
+  }
+}
+
+// 获取产品的订阅状态
+const getProductSubscriptionStatus = (productId) => {
+  if (!productId || !userSubscriptions.value.length) return false
+  return userSubscriptions.value.some(sub => sub.product_id === productId)
+}
+
+// 获取产品的订阅信息
+const getProductSubscription = (productId) => {
+  if (!productId || !userSubscriptions.value.length) return null
+  return userSubscriptions.value.find(sub => sub.product_id === productId) || null
+}
+
 // 加载产品列表
 const loadProducts = async () => {
  loading.value = true
@@ -122,6 +174,9 @@ const loadProducts = async () => {
    const response = await productApi.getProducts(params)
    products.value = response.data?.items || []
    total.value = response.data?.total || 0
+    
+    // 重新加载订阅列表以确保状态同步
+    await loadUserSubscriptions()
  } catch (error) {
    console.error('加载产品失败:', error)
    ElMessage.error('加载产品失败')
@@ -191,17 +246,119 @@ const handleSubscribe = async (product) => {
    await productApi.subscribeProduct(product.id)
    ElMessage.success('订阅成功')

-    // 重新加载产品列表以更新订阅状态
+    // 重新加载订阅列表和产品列表以更新订阅状态
+    await loadUserSubscriptions()
    await loadProducts()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('订阅失败:', error)
-      ElMessage.error('订阅失败')
+      const errorMessage = error.response?.data?.message || error.message || '订阅失败'
+      ElMessage.error(errorMessage)
+    }
+  }
+}
+
+// 取消订阅
+const handleCancelSubscribe = async (product) => {
+  if (!product) return
+
+  // 获取该产品的订阅信息
+  const subscription = getProductSubscription(product.id)
+  if (!subscription || !subscription.id) {
+    ElMessage.error('订阅信息不完整')
+    return
+  }
+
+  try {
+    await ElMessageBox.confirm(
+      `确定要取消订阅产品"${product.name}"吗？取消后将无法继续使用该产品的API服务。`,
+      '取消订阅确认',
+      {
+        confirmButtonText: '确定取消',
+        cancelButtonText: '我再想想',
+        type: 'warning'
+      }
+    )
+
+    await subscriptionApi.cancelMySubscription(subscription.id)
+    ElMessage.success('取消订阅成功')
+
+    // 重新加载订阅列表和产品列表以更新订阅状态
+    await loadUserSubscriptions()
+    await loadProducts()
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('取消订阅失败:', error)
+      const errorMessage = error.response?.data?.message || error.message || '取消订阅失败'
+      ElMessage.error(errorMessage)
    }
  }
 }
 </script>

 <style scoped>
-/* 页面特定样式可以在这里添加 */
+/* 分页组件移动端适配 */
+.pagination-wrapper {
+  display: flex;
+  justify-content: center;
+  padding: 16px 0;
+}
+
+/* 移动端分页样式优化 */
+@media (max-width: 768px) {
+  .pagination-wrapper {
+    padding: 12px 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* 确保分页组件在小屏幕上可以横向滚动 */
+  .pagination-wrapper :deep(.el-pagination) {
+    flex-wrap: nowrap;
+    min-width: fit-content;
+  }
+
+  /* 移动端隐藏部分不必要的元素，确保核心功能可见 */
+  .pagination-wrapper :deep(.el-pagination__sizes) {
+    display: none;
+  }
+
+  /* 优化移动端分页按钮间距 */
+  .pagination-wrapper :deep(.el-pager li) {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    margin: 0 2px;
+  }
+
+  .pagination-wrapper :deep(.btn-prev),
+  .pagination-wrapper :deep(.btn-next) {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+  }
+
+  /* 移动端总数显示优化 */
+  .pagination-wrapper :deep(.el-pagination__total) {
+    font-size: 12px;
+    margin-right: 8px;
+    white-space: nowrap;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .pagination-wrapper {
+    padding: 8px 0;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__total) {
+    display: none;
+  }
+
+  /* 只显示最核心的分页功能 */
+  .pagination-wrapper :deep(.el-pagination) {
+    font-size: 12px;
+  }
+}
 </style>
--- a/src/pages/subscriptions/index.vue
+++ b/src/pages/subscriptions/index.vue
@@ -74,20 +74,21 @@
      </div>

      <div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
-        <el-table
-          :data="subscriptions"
-          style="width: 100%"
-          :header-cell-style="{
-            background: '#f8fafc',
-            color: '#475569',
-            fontWeight: '600',
-            fontSize: '14px'
-          }"
-          :cell-style="{
-            fontSize: '14px',
-            color: '#1e293b'
-          }"
-        >
+        <div :class="['table-container', { 'mobile-table-container': isMobile }]">
+          <el-table
+            :data="subscriptions"
+            :style="isMobile ? { width: '100%', minWidth: '600px' } : { width: '100%' }"
+            :header-cell-style="{
+              background: '#f8fafc',
+              color: '#475569',
+              fontWeight: '600',
+              fontSize: isMobile ? '12px' : '14px'
+            }"
+            :cell-style="{
+              fontSize: isMobile ? '12px' : '14px',
+              color: '#1e293b'
+            }"
+          >
          <el-table-column prop="product.name" label="产品名称" min-width="200">
            <template #default="{ row }">
              <div>
@@ -96,7 +97,12 @@
            </template>
          </el-table-column>

-          <el-table-column prop="product.category.name" label="产品分类" width="120">
+          <el-table-column 
+            v-if="!isMobile"
+            prop="product.category.name" 
+            label="产品分类" 
+            width="120"
+          >
            <template #default="{ row }">
              <el-tag size="small" type="info" effect="light">
                {{ row.product?.category?.name || '未分类' }}
@@ -104,13 +110,22 @@
            </template>
          </el-table-column>

-          <el-table-column prop="product.code" label="产品编码" width="120">
+          <el-table-column 
+            v-if="!isMobile"
+            prop="product.code" 
+            label="产品编码" 
+            width="120"
+          >
            <template #default="{ row }">
              <span class="font-mono text-sm text-gray-600">{{ row.product?.code || '-' }}</span>
            </template>
          </el-table-column>

-          <el-table-column prop="price" label="订阅价格" width="120">
+          <el-table-column 
+            prop="price" 
+            label="订阅价格" 
+            :width="isMobile ? 100 : 120"
+          >
            <template #default="{ row }">
              <span class="font-semibold text-green-600">¥{{ formatPrice(row.price) }}</span>
            </template>
@@ -122,18 +137,28 @@
            </template>
          </el-table-column> -->

-          <el-table-column prop="created_at" label="订阅时间" width="160">
+          <el-table-column 
+            prop="created_at" 
+            label="订阅时间" 
+            :width="isMobile ? 120 : 160"
+          >
            <template #default="{ row }">
              <div class="text-sm">
                <div class="text-gray-900">{{ formatDate(row.created_at) }}</div>
-                <div class="text-gray-500">{{ formatTime(row.created_at) }}</div>
+                <div v-if="!isMobile" class="text-gray-500">{{ formatTime(row.created_at) }}</div>
              </div>
            </template>
          </el-table-column>

-          <el-table-column label="操作" width="320" fixed="right">
+          <el-table-column 
+            label="操作" 
+            :width="isMobile ? 120 : 400"
+            :fixed="isMobile ? false : 'right'"
+            class-name="action-column"
+          >
            <template #default="{ row }">
-              <div class="flex items-center space-x-2">
+              <!-- 桌面端：显示所有按钮 -->
+              <div v-if="!isMobile" class="flex items-center space-x-2 action-buttons-desktop">
                <el-button
                  size="small"
                  type="primary"
@@ -155,10 +180,51 @@
                >
                  在线调试
                </el-button>
+                <el-button
+                  size="small"
+                  type="danger"
+                  @click="handleCancelSubscription(row)"
+                >
+                  取消订阅
+                </el-button>
+              </div>
+
+              <!-- 移动端：主要操作 + 下拉菜单 -->
+              <div v-else class="action-buttons-mobile">
+                <el-button
+                  size="small"
+                  type="primary"
+                  @click="handleViewProduct(row.product)"
+                  class="mobile-primary-btn"
+                >
+                  查看
+                </el-button>
+                <el-dropdown @command="(cmd) => handleMobileAction(cmd, row)" trigger="click" placement="bottom-end">
+                  <el-button size="small" type="info" class="mobile-more-btn">
+                    更多
+                    <el-icon class="el-icon--right">
+                      <ArrowDown />
+                    </el-icon>
+                  </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="usage">
+                        使用情况
+                      </el-dropdown-item>
+                      <el-dropdown-item command="debug">
+                        在线调试
+                      </el-dropdown-item>
+                      <el-dropdown-item command="cancel" divided>
+                        取消订阅
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
+        </div>
      </div>
    </template>

@@ -184,11 +250,14 @@
        class="usage-dialog"
      >
        <div v-if="selectedSubscription" class="space-y-6">
-          <div class="grid grid-cols-2 gap-6">
-            <!-- <div class="usage-stat-card">
-              <div class="usage-stat-value">{{ selectedSubscription.api_used || 0 }}</div>
-              <div class="usage-stat-label">已使用API调用次数</div>
-            </div> -->
+          <div v-if="loadingUsage" class="flex justify-center items-center py-8">
+            <el-loading />
+          </div>
+          <div v-else class="grid grid-cols-2 gap-6">
+            <div class="usage-stat-card">
+              <div class="usage-stat-value">{{ usageData?.api_used || 0 }}</div>
+              <div class="usage-stat-label">API调用次数</div>
+            </div>
            <div class="usage-stat-card">
              <div class="usage-stat-value">¥{{ formatPrice(selectedSubscription.price) }}</div>
              <div class="usage-stat-label">订阅价格</div>
@@ -216,9 +285,12 @@ import { subscriptionApi } from '@/api'
 import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
-import { ElMessage } from 'element-plus'
+import { useMobileTable } from '@/composables/useMobileTable'
+import { ArrowDown } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'

 const router = useRouter()
+const { isMobile } = useMobileTable()

 // 响应式数据
 const loading = ref(false)
@@ -228,6 +300,8 @@ const currentPage = ref(1)
 const pageSize = ref(10)
 const usageDialogVisible = ref(false)
 const selectedSubscription = ref(null)
+const usageData = ref(null)
+const loadingUsage = ref(false)

 // 统计数据
 const stats = ref({
@@ -369,9 +443,24 @@ const handleViewProduct = (product) => {
 }

 // 查看使用情况
-const handleViewUsage = (subscription) => {
+const handleViewUsage = async (subscription) => {
  selectedSubscription.value = subscription
  usageDialogVisible.value = true
+  usageData.value = null
+  
+  // 加载使用情况数据
+  if (subscription && subscription.id) {
+    loadingUsage.value = true
+    try {
+      const response = await subscriptionApi.getMySubscriptionUsage(subscription.id)
+      usageData.value = response.data
+    } catch (error) {
+      console.error('加载使用情况失败:', error)
+      ElMessage.error('加载使用情况失败')
+    } finally {
+      loadingUsage.value = false
+    }
+  }
 }

 // 跳转到在线调试页面
@@ -383,6 +472,65 @@ const goToApiDebugger = (product) => {
    })
  }
 }
+
+// 处理移动端操作
+const handleMobileAction = (command, row) => {
+  switch (command) {
+    case 'usage':
+      handleViewUsage(row)
+      break
+    case 'debug':
+      goToApiDebugger(row.product)
+      break
+    case 'cancel':
+      handleCancelSubscription(row)
+      break
+  }
+}
+
+// 取消订阅
+const handleCancelSubscription = async (subscription) => {
+  if (!subscription || !subscription.id) {
+    ElMessage.error('订阅信息不完整')
+    return
+  }
+
+  try {
+    // 显示确认对话框
+    await ElMessageBox.confirm(
+      `确定要取消订阅 "${subscription.product?.name || '该产品'}" 吗？取消后将无法继续使用该产品的API服务。`,
+      '取消订阅确认',
+      {
+        confirmButtonText: '确定取消',
+        cancelButtonText: '我再想想',
+        type: 'warning',
+        dangerouslyUseHTMLString: false
+      }
+    )
+
+    // 用户确认后执行取消操作
+    loading.value = true
+    try {
+      await subscriptionApi.cancelMySubscription(subscription.id)
+      ElMessage.success('取消订阅成功')
+      // 重新加载订阅列表
+      await loadSubscriptions()
+      // 重新加载统计数据
+      await loadStats()
+    } catch (error) {
+      console.error('取消订阅失败:', error)
+      const errorMessage = error.response?.data?.message || error.message || '取消订阅失败'
+      ElMessage.error(errorMessage)
+    } finally {
+      loading.value = false
+    }
+  } catch (error) {
+    // 用户取消操作，不做任何处理
+    if (error !== 'cancel') {
+      console.error('取消订阅操作异常:', error)
+    }
+  }
+}
 </script>

 <style scoped>
@@ -503,6 +651,30 @@ const goToApiDebugger = (product) => {
  font-weight: 600;
 }

+/* 表格容器 */
+.table-container {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.mobile-table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.mobile-table-container::-webkit-scrollbar {
+  height: 6px;
+}
+
+.mobile-table-container::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+.mobile-table-container::-webkit-scrollbar-track {
+  background: #f1f5f9;
+}
+
 /* 表格样式优化 */
 :deep(.el-table) {
  border-radius: 8px;
@@ -522,7 +694,33 @@ const goToApiDebugger = (product) => {
  background: #f8fafc !important;
 }

-/* 响应式设计 */
+/* 操作列样式 */
+.action-buttons-desktop {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.action-buttons-mobile {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+
+.mobile-primary-btn,
+.mobile-more-btn {
+  flex: 1;
+  min-width: 50px;
+  padding: 6px 8px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+/* 移动端表格优化 */
@media (max-width: 768px) {
  .stat-item {
    padding: 12px 16px;
@@ -548,5 +746,76 @@ const goToApiDebugger = (product) => {
  .usage-stat-label {
    font-size: 13px;
  }
+
+  /* 移动端表格样式 */
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 600px;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 8px 4px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 4px;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 移动端产品名称列 */
+  :deep(.el-table-column[prop='product.name']) {
+    min-width: 150px;
+  }
+
+  /* 移动端操作列 */
+  .action-buttons-mobile {
+    gap: 4px;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .mobile-primary-btn,
+  .mobile-more-btn {
+    padding: 4px 6px;
+    font-size: 11px;
+    min-width: 45px;
+    flex: 1;
+  }
+
+  /* 移动端隐藏固定列阴影 */
+  :deep(.el-table__fixed-right) {
+    box-shadow: none !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .action-buttons-mobile {
+    gap: 3px;
+    flex-direction: row;
+  }
+
+  .mobile-primary-btn,
+  .mobile-more-btn {
+    padding: 3px 4px;
+    font-size: 10px;
+    min-width: 40px;
+    flex: 1;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 6px 2px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 2px;
+  }
 }
 </style>
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -275,6 +275,12 @@ const routes = [
        component: () => import('@/pages/admin/articles/index.vue'),
        meta: { title: '文章管理' }
      },
+      {
+        path: 'announcements',
+        name: 'AdminAnnouncements',
+        component: () => import('@/pages/admin/announcements/index.vue'),
+        meta: { title: '公告管理' }
+      },
      {
        path: 'statistics',
        name: 'AdminStatistics',
@@ -315,9 +321,18 @@ const router = createRouter({
 router.beforeEach(async (to, from, next) => {
  const userStore = useUserStore()

-  // 等待userStore初始化完成
-  if (!userStore.initialized) {
+  // 对于不需要认证的路由（如登录页），不等待初始化，直接放行
+  const isAuthRoute = to.path.startsWith('/auth')
+  const requiresAuth = to.meta.requiresAuth
+
+  // 只有在需要认证的路由上才等待初始化
+  if (requiresAuth && !userStore.initialized) {
    await userStore.init()
+  } else if (!userStore.initialized) {
+    // 对于不需要认证的路由，异步初始化但不阻塞
+    userStore.init().catch(err => {
+      console.warn('UserStore初始化失败:', err)
+    })
  }

  // 设置页面标题
@@ -326,7 +341,7 @@ router.beforeEach(async (to, from, next) => {
  }

  // 检查是否需要认证
-  if (to.meta.requiresAuth && !userStore.isLoggedIn) {
+  if (requiresAuth && !userStore.isLoggedIn) {
    next('/auth/login')
    return
  }
@@ -338,7 +353,7 @@ router.beforeEach(async (to, from, next) => {
  }

  // 已登录用户访问认证页面，重定向到数据大厅
-  if (to.path.startsWith('/auth') && userStore.isLoggedIn) {
+  if (isAuthRoute && userStore.isLoggedIn) {
    next('/products')
    return
  }
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -135,9 +135,9 @@ export const useUserStore = defineStore('user', () => {
  // 检查用户信息是否完整
  const isUserInfoComplete = computed(() => {
    return user.value &&
-           user.value.id &&
-           user.value.phone &&
-           user.value.user_type !== undefined
+      user.value.id &&
+      user.value.phone &&
+      user.value.user_type !== undefined
  })

  // 强制刷新用户信息
@@ -416,44 +416,73 @@ export const useUserStore = defineStore('user', () => {
    }
  }

+  // 初始化标志，防止重复初始化
+  let isInitializing = false
+
  // 初始化
  const init = async () => {
-    // 监听认证错误事件
-    authEventBus.onAuthError(handleAuthError)
-
-    // 监听版本更新事件
-    window.addEventListener('version:logout', handleVersionLogout)
-    window.addEventListener('version:refresh', handleVersionRefresh)
-
-    // 进行版本检查
-    if (!checkVersions()) {
+    // 如果已经初始化完成，直接返回
+    if (initialized.value) {
      return
    }

-    if (accessToken.value && !user.value) {
-      // 有token但无用户信息，自动拉取
-      loading.value = true
-      try {
-        const result = await fetchUserProfile()
-        isAuthenticated.value = result.success
+    // 如果正在初始化，等待完成
+    if (isInitializing) {
+      // 等待初始化完成
+      while (isInitializing) {
+        await new Promise(resolve => setTimeout(resolve, 50))
+      }
+      return
+    }

-        // 如果认证成功，启动版本检查器
-        if (result.success) {
+    isInitializing = true
+
+    try {
+      // 监听认证错误事件（只注册一次）
+      if (!authEventBus.listeners.includes(handleAuthError)) {
+        authEventBus.onAuthError(handleAuthError)
+      }
+
+      // 监听版本更新事件（只注册一次）
+      if (!window.hasVersionListeners) {
+        window.addEventListener('version:logout', handleVersionLogout)
+        window.addEventListener('version:refresh', handleVersionRefresh)
+        window.hasVersionListeners = true
+      }
+
+      // 进行版本检查
+      if (!checkVersions()) {
+        initialized.value = true
+        return
+      }
+
+      if (accessToken.value && !user.value) {
+        // 有token但无用户信息，自动拉取
+        loading.value = true
+        try {
+          const result = await fetchUserProfile()
+          isAuthenticated.value = result.success
+
+          // 如果认证成功，启动版本检查器
+          if (result.success) {
+            versionChecker.startAutoCheck()
+          }
+        } catch {
+          isAuthenticated.value = false
+          logout()
+        } finally {
+          loading.value = false
+          initialized.value = true
+        }
+      } else {
+        // 如果已经认证，启动版本检查器
+        if (isAuthenticated.value) {
          versionChecker.startAutoCheck()
        }
-      } catch {
-        isAuthenticated.value = false
-        logout()
-      } finally {
-        loading.value = false
        initialized.value = true
      }
-    } else {
-      // 如果已经认证，启动版本检查器
-      if (isAuthenticated.value) {
-        versionChecker.startAutoCheck()
-      }
-      initialized.value = true
+    } finally {
+      isInitializing = false
    }
  }

--- a/src/views/statistics/UserStatisticsPage.vue
+++ b/src/views/statistics/UserStatisticsPage.vue
@@ -257,25 +257,101 @@
                  </div>
                  <h3 class="text-lg font-semibold text-gray-800">平台公告</h3>
                </div>
-                <el-button size="small" type="info" class="px-3 py-1 text-xs" disabled>
-                  <el-icon size="12">
-                    <Bell />
-                  </el-icon>
-                  暂无公告
-                </el-button>
+                <div v-if="announcements.length > 0" class="flex items-center gap-2">
+                  <span class="text-xs text-gray-500">
+                    {{ currentAnnouncementIndex + 1 }} / {{ announcements.length }}
+                  </span>
+                </div>
              </div>

              <!-- 公告内容 -->
-              <div class="text-center py-12">
-                <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full bg-blue-50">
-                  <el-icon size="24" class="text-blue-400">
-                    <Bell />
-                  </el-icon>
+              <div v-loading="loadingAnnouncements" class="relative">
+                <!-- 有公告时显示轮播 -->
+                <div 
+                  v-if="announcements.length > 0" 
+                  class="relative overflow-hidden"
+                  @touchstart="handleAnnouncementTouchStart"
+                  @touchmove="handleAnnouncementTouchMove"
+                  @touchend="handleAnnouncementTouchEnd"
+                >
+                  <!-- 公告容器 -->
+                  <div 
+                    class="flex transition-transform duration-300 ease-out"
+                    :style="{ transform: `translateX(-${currentAnnouncementIndex * 100}%)` }"
+                  >
+                    <div
+                      v-for="(announcement, index) in announcements"
+                      :key="announcement.id"
+                      class="w-full flex-shrink-0"
+                    >
+                      <div 
+                        class="border border-gray-200 rounded-lg p-4 bg-gradient-to-br from-blue-50 to-white flex flex-col h-full"
+                        style="min-height: 300px; max-height: 500px;"
+                      >
+                        <!-- 标题区域 - 居中显示 -->
+                        <div class="text-center mb-4">
+                          <h4 class="text-lg font-semibold text-gray-800 mb-2">
+                            {{ announcement.title }}
+                          </h4>
+                          <div class="flex items-center justify-center gap-2">
+                            <span class="text-xs text-gray-500">{{ formatAnnouncementDate(announcement.created_at) }}</span>
+                            <el-tag type="success" size="small">已发布</el-tag>
+                          </div>
+                        </div>
+                        
+                        <!-- 公告完整内容 - 可滚动 -->
+                        <div 
+                          class="announcement-content prose prose-sm max-w-none flex-1 overflow-y-auto"
+                          v-html="getAnnouncementContent(announcement.content)"
+                        ></div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- 左右切换按钮 -->
+                  <div v-if="announcements.length > 1" class="flex items-center justify-center gap-2 mt-4">
+                    <el-button
+                      size="small"
+                      :disabled="currentAnnouncementIndex === 0"
+                      @click="previousAnnouncement"
+                      circle
+                      class="flex-shrink-0"
+                    >
+                      <el-icon><ArrowLeft /></el-icon>
+                    </el-button>
+                    <div class="flex gap-1">
+                      <div
+                        v-for="(announcement, index) in announcements"
+                        :key="announcement.id"
+                        class="w-2 h-2 rounded-full transition-colors cursor-pointer"
+                        :class="index === currentAnnouncementIndex ? 'bg-blue-500' : 'bg-gray-300'"
+                        @click="currentAnnouncementIndex = index"
+                      ></div>
+                    </div>
+                    <el-button
+                      size="small"
+                      :disabled="currentAnnouncementIndex === announcements.length - 1"
+                      @click="nextAnnouncement"
+                      circle
+                      class="flex-shrink-0"
+                    >
+                      <el-icon><ArrowRight /></el-icon>
+                    </el-button>
+                  </div>
+                </div>
+
+                <!-- 无公告时显示空状态 -->
+                <div v-else class="text-center py-12">
+                  <div class="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full bg-blue-50">
+                    <el-icon size="24" class="text-blue-400">
+                      <Bell />
+                    </el-icon>
+                  </div>
+                  <h4 class="text-sm font-medium text-gray-600 mb-2">暂无公告</h4>
+                  <p class="text-xs text-gray-500">
+                    平台公告将在这里显示，请关注最新动态
+                  </p>
                </div>
-                <h4 class="text-sm font-medium text-gray-600 mb-2">暂无公告</h4>
-                <p class="text-xs text-gray-500">
-                  平台公告将在这里显示，请关注最新动态
-                </p>
              </div>
            </div>
          </div>
@@ -341,6 +417,7 @@
 </template>

 <script setup>
+import { announcementApi } from '@/api'
 import {
  getApiCallsStatistics,
  getConsumptionStatistics,
@@ -349,6 +426,7 @@ import {
 } from '@/api/statistics'
 import { useUserStore } from '@/stores/user'
 import { Bell, CreditCard, List, Loading, Lock, Money, Star, TrendCharts } from '@element-plus/icons-vue'
+import { ArrowLeftIcon as ArrowLeft, ArrowRightIcon as ArrowRight } from '@heroicons/vue/24/outline'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
 import { nextTick, onMounted, onUnmounted, ref } from 'vue'
@@ -365,6 +443,12 @@ const loading = ref(false)
 const error = ref('')
 const userStats = ref(null)
 const latestProducts = ref([])
+const announcements = ref([])
+const loadingAnnouncements = ref(false)
+const currentAnnouncementIndex = ref(0)
+const announcementStartX = ref(0)
+const announcementCurrentX = ref(0)
+const isAnnouncementDragging = ref(false)

 // 独立的时间范围和单位控制
 const apiCallsDateRange = ref([])
@@ -526,6 +610,121 @@ const loadLatestProducts = async () => {
  }
 }

+// 加载公告列表
+const loadAnnouncements = async () => {
+  loadingAnnouncements.value = true
+  try {
+    const response = await announcementApi.getAnnouncements({
+      page: 1,
+      page_size: 10, // 加载更多以便轮播
+      status: 'published', // 只显示已发布的公告
+      order_by: 'created_at',
+      order_dir: 'desc' // 最新的在前
+    })
+    if (response.success && response.data) {
+      announcements.value = response.data.items || []
+      currentAnnouncementIndex.value = 0 // 重置到第一条
+      // 调试：打印公告数据，检查content字段
+      console.log('公告列表数据:', announcements.value)
+      if (announcements.value.length > 0) {
+        console.log('第一条公告内容:', announcements.value[0].content)
+      }
+    }
+  } catch (err) {
+    console.error('获取公告列表失败:', err)
+  } finally {
+    loadingAnnouncements.value = false
+  }
+}
+
+// 上一条公告
+const previousAnnouncement = () => {
+  if (currentAnnouncementIndex.value > 0) {
+    currentAnnouncementIndex.value--
+  }
+}
+
+// 下一条公告
+const nextAnnouncement = () => {
+  if (currentAnnouncementIndex.value < announcements.value.length - 1) {
+    currentAnnouncementIndex.value++
+  }
+}
+
+// 触摸开始
+const handleAnnouncementTouchStart = (e) => {
+  isAnnouncementDragging.value = true
+  announcementStartX.value = e.touches[0].clientX
+  announcementCurrentX.value = e.touches[0].clientX
+}
+
+// 触摸移动
+const handleAnnouncementTouchMove = (e) => {
+  if (!isAnnouncementDragging.value) return
+  announcementCurrentX.value = e.touches[0].clientX
+}
+
+// 触摸结束
+const handleAnnouncementTouchEnd = () => {
+  if (!isAnnouncementDragging.value) return
+  
+  const diff = announcementStartX.value - announcementCurrentX.value
+  const threshold = 50 // 滑动阈值
+  
+  if (Math.abs(diff) > threshold) {
+    if (diff > 0) {
+      // 向左滑动，显示下一条
+      nextAnnouncement()
+    } else {
+      // 向右滑动，显示上一条
+      previousAnnouncement()
+    }
+  }
+  
+  isAnnouncementDragging.value = false
+  announcementStartX.value = 0
+  announcementCurrentX.value = 0
+}
+
+// 查看公告详情
+const viewAnnouncement = (announcement) => {
+  // 可以打开一个对话框显示公告详情
+  ElMessage.info(`查看公告: ${announcement.title}`)
+  // TODO: 可以添加一个对话框组件来显示公告详情
+}
+
+// 获取公告内容（处理空内容的情况）
+const getAnnouncementContent = (content) => {
+  if (!content || content.trim() === '') {
+    return '<p style="text-align: center; color: #9ca3af; padding: 2rem 0;">暂无内容</p>'
+  }
+  return content
+}
+
+// 格式化公告日期
+const formatAnnouncementDate = (dateString) => {
+  if (!dateString) return ''
+  const date = new Date(dateString)
+  const now = new Date()
+  const diff = now - date
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+  
+  if (days === 0) {
+    const hours = Math.floor(diff / (1000 * 60 * 60))
+    if (hours === 0) {
+      const minutes = Math.floor(diff / (1000 * 60))
+      return minutes <= 0 ? '刚刚' : `${minutes}分钟前`
+    }
+    return `${hours}小时前`
+  } else if (days === 1) {
+    return '昨天'
+  } else if (days < 7) {
+    return `${days}天前`
+  } else {
+    return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
+  }
+}
+
 // 加载所有统计数据
 const loadAllStatistics = async () => {
  // 如果用户未认证，不请求接口
@@ -1040,6 +1239,8 @@ onMounted(() => {
  loadAllStatistics()
  // 无论是否认证都加载最新产品
  loadLatestProducts()
+  // 加载公告列表
+  loadAnnouncements()
  // 添加窗口大小变化监听
  window.addEventListener('resize', handleResize, { passive: true })
 })
@@ -1068,5 +1269,110 @@ onUnmounted(() => {
 </script>

 <style scoped>
-/* 使用TailwindCSS，无需自定义样式 */
+/* 公告内容样式 */
+.announcement-content {
+  color: #374151;
+  line-height: 1.75;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  /* 滚动条样式 */
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 #f3f4f6;
+}
+
+.announcement-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.announcement-content::-webkit-scrollbar-track {
+  background: #f3f4f6;
+  border-radius: 3px;
+}
+
+.announcement-content::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+.announcement-content::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+.announcement-content :deep(p) {
+  margin-bottom: 0.75rem;
+  color: #4b5563;
+}
+
+.announcement-content :deep(h1),
+.announcement-content :deep(h2),
+.announcement-content :deep(h3),
+.announcement-content :deep(h4) {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.announcement-content :deep(ul),
+.announcement-content :deep(ol) {
+  margin-left: 1.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.announcement-content :deep(li) {
+  margin-bottom: 0.25rem;
+}
+
+.announcement-content :deep(img) {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  margin: 0.75rem 0;
+}
+
+.announcement-content :deep(a) {
+  color: #3b82f6;
+  text-decoration: underline;
+}
+
+.announcement-content :deep(blockquote) {
+  border-left: 4px solid #e5e7eb;
+  padding-left: 1rem;
+  margin: 0.75rem 0;
+  color: #6b7280;
+}
+
+.announcement-content :deep(code) {
+  background-color: #f3f4f6;
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+  color: #dc2626;
+}
+
+.announcement-content :deep(pre) {
+  background-color: #f3f4f6;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin: 0.75rem 0;
+}
+
+.announcement-content :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.75rem 0;
+}
+
+.announcement-content :deep(th),
+.announcement-content :deep(td) {
+  border: 1px solid #e5e7eb;
+  padding: 0.5rem;
+  text-align: left;
+}
+
+.announcement-content :deep(th) {
+  background-color: #f9fafb;
+  font-weight: 600;
+}
 </style>
Author	SHA1	Message	Date
18278715334	210399ca53	create 返回官网	2025-12-15 11:58:05 +08:00
18278715334	67d7746719	适配	2025-12-13 16:25:05 +08:00
18278715334	711994905d	返回官网链接	2025-12-12 18:09:14 +08:00
18278715334	3d2b60f4ff	微信支付	2025-12-12 15:27:21 +08:00
18278715334	a4ef0afa5b	fix 侧边栏	2025-12-10 18:09:11 +08:00
18278715334	ffbdcb29c4	移动端页面适配	2025-12-10 14:17:31 +08:00
18278715334	403e2c28c0	侧边滚动	2025-12-09 18:32:31 +08:00
18278715334	ef0abd2cc9	适配	2025-12-09 18:10:30 +08:00
18278715334	8c96c1ffa4	1	2025-12-09 17:13:29 +08:00
18278715334	4f8d37483e	优化	2025-12-09 16:42:38 +08:00
18278715334	89a1391b40	移动端抽屉侧边栏	2025-12-09 15:12:06 +08:00
18278715334	f8dd1f0667	1	2025-12-09 10:48:12 +08:00
18278715334	ef7ce1b74a	2	2025-12-09 10:25:23 +08:00
18278715334	ea0f7108cc	弹幕	2025-12-08 18:28:23 +08:00
18278715334	1c81b4f081	1	2025-12-08 17:05:04 +08:00
18278715334	840e4b467f	2	2025-12-08 16:45:22 +08:00
18278715334	dad278fe15	1	2025-12-08 16:38:47 +08:00
18278715334	d12f04c7aa	弹幕	2025-12-08 16:33:48 +08:00
18278715334	a5b516d42b	11	2025-12-08 16:22:29 +08:00
18278715334	fc2d5fb951	1111	2025-12-08 16:09:00 +08:00
18278715334	9f811b86e9	41	2025-12-08 15:03:37 +08:00
18278715334	f293626ce5	1827815334@163.com	2025-12-08 14:03:07 +08:00
18278715334	f030c15fe4	ok	2025-12-06 18:49:02 +08:00
18278715334	ee93acac07	1	2025-12-06 18:22:00 +08:00
18278715334	88adb5c4c8	18278715334@163.com	2025-12-06 17:51:00 +08:00
18278715334	8d1899dd69	1	2025-12-06 16:46:48 +08:00
18278715334	6269482a43	18278715334@163.com	2025-12-06 13:53:58 +08:00
18278715334	069ce39ca1	1278715334@163.com	2025-12-05 14:59:37 +08:00
18278715334	1af9e037bc	18278715334@163.com	2025-12-04 16:19:19 +08:00
18278715334	3f33e5c2f1	182878715334@163.com	2025-12-04 12:44:54 +08:00
18278715334	d687bf67b1	182787815334@163.com	2025-12-04 12:44:35 +08:00