适配

返回官网链接
微信支付
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 · 2025-12-09 18:32:31 +08:00
39 changed files with 5890 additions and 1004 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
@@ -80,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/src/api/index.js
+++ b/src/api/index.js
@@ -1,11 +1,11 @@
 import request from '@/utils/request'
-import { articleApi } from './article.js'
 import { announcementApi } from './announcement.js'
+import { articleApi } from './article.js'
 import { balanceAlertApi } from './balanceAlertApi.js'
 import { adminInvoiceApi, invoiceApi } from './invoice.js'

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

 // 用户相关接口 - 严格按照后端路由定义
 export const userApi = {
@@ -109,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),
--- 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
@@ -2,11 +2,13 @@
  <el-dialog
    v-model="dialogVisible"
    :title="currentStep === 'select' ? '' : '商务洽谈'"
-    width="500px"
+    :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"
  >
    <!-- 选择咨询类型 -->
@@ -70,7 +72,7 @@
 </template>

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

 // Props
 const props = defineProps({
@@ -87,6 +89,20 @@ 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) => {
@@ -142,6 +158,10 @@ const handleDialogClose = () => {
  padding: 20px;
 }

+.business-consultation-dialog :deep(.el-dialog__headerbtn) {
+  top: 16px;
+  right: 16px;
+}

 .consultation-type-select {
  padding: 30px 20px 40px;
@@ -266,9 +286,11 @@ const handleDialogClose = () => {

 .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 {
@@ -304,20 +326,87 @@ const handleDialogClose = () => {
 }

 /* 响应式设计 */
-@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
@@ -42,14 +42,14 @@ import { onMounted, onUnmounted, ref } from 'vue'
    },
    danmakuSpeed: {
      type: Number,
-      default: 15000 // 弹幕滚动速度（毫秒）
+      default: 15000 // 弹幕滚动速度（毫秒），25秒让弹幕显示更久
    }
  })
  
  // 固定配置
-  const FETCH_PAGE_SIZE = 50 // 每次获取的记录数
-  const BASE_EMIT_INTERVAL = 5000 // 基础5秒，避免弹幕重叠
-  const RANDOM_EMIT_RANGE = 1000   // 0-1秒随机范围
+  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)
--- 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/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
@@ -34,6 +34,7 @@
 <script setup>
 import { useAppStore } from '@/stores/app'
 import { useUserStore } from '@/stores/user'
+import { onMounted, onUnmounted, watch } from 'vue'
 import { useRouter } from 'vue-router'

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

 // 使用ref来控制菜单展开状态
 const openeds = ref([])
@@ -117,6 +119,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 +165,7 @@ const handleMenuSelect = () => {
  display: flex;
  flex-direction: column;
  position: relative;
+  width: 100%;
  z-index: 1001;
 }

@@ -140,10 +173,9 @@ const handleMenuSelect = () => {
  border: none;
  height: 100%;
  flex: 1 1 0%;
-}
-
-.sidebar-menu:not(.el-menu--collapse) {
-  width: 240px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 100%;
 }

 .menu-item {
@@ -204,6 +236,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 +250,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 {
@@ -248,6 +283,18 @@ const handleMenuSelect = () => {
  }
 }

+: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 菜单样式覆盖 */
 :deep(.el-menu) {
  background-color: transparent;
--- 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/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/AnnouncementEditDialog.vue
+++ b/src/pages/admin/announcements/components/AnnouncementEditDialog.vue
@@ -2,13 +2,14 @@
  <el-dialog
    v-model="dialogVisible"
    :title="isEdit ? '编辑公告' : '新增公告'"
-    width="80%"
+    :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="100px" class="space-y-6">
+    <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>
@@ -23,16 +24,20 @@
        <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="editorInit"
-            tinymceScriptSrc="https://cdn.jsdelivr.net/npm/tinymce@7.9.1/tinymce.min.js" />
+          <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 justify-end space-x-3">
-        <el-button @click="handleClose">取消</el-button>
-        <el-button type="primary" :loading="loading" @click="handleSubmit">
+      <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>
@@ -42,6 +47,7 @@

 <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';
@@ -61,6 +67,9 @@ const props = defineProps({
 // Emits
 const emit = defineEmits(['update:modelValue', 'success'])

+// 移动端适配
+const { isMobile, isTablet } = useMobileTable()
+
 // 响应式数据
 const formRef = ref(null)
 const loading = ref(false)
@@ -102,6 +111,27 @@ const editorInit = {
  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,
@@ -210,3 +240,67 @@ const handleSubmit = async () => {
 }
 </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/index.vue
+++ b/src/pages/admin/announcements/index.vue
@@ -4,9 +4,10 @@
    subtitle="管理系统中的所有公告内容"
  >
    <template #actions>
-      <el-button type="primary" @click="handleCreateAnnouncement">
+      <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>

@@ -45,8 +46,10 @@
        </template>

        <template #buttons>
-          <el-button @click="resetFilters">重置筛选</el-button>
-          <el-button type="primary" @click="loadAnnouncements">应用筛选</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="loadAnnouncements" :class="isMobile ? 'flex-1' : ''">应用筛选</el-button>
+          </div>
        </template>
      </FilterSection>
    </template>
@@ -57,13 +60,142 @@
        <AnnouncementStats :stats="stats" />
      </div>

-      <!-- 公告列表表格 -->
-      <el-table
-        v-loading="loading"
-        :data="announcements"
-        stripe
-        class="w-full"
-      >
+      <!-- 移动端卡片布局 -->
+      <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)">
@@ -194,7 +326,9 @@
            </div>
          </template>
        </el-table-column>
-      </el-table>
+          </el-table>
+        </div>
+      </div>
    </template>

    <template #pagination>
@@ -204,7 +338,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"
      />
@@ -239,6 +374,7 @@ 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'
@@ -247,6 +383,9 @@ 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([])
@@ -543,3 +682,189 @@ onMounted(() => {
 })
 </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/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>
@@ -181,6 +182,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 +294,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>
@@ -402,7 +437,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 +512,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 +526,8 @@ const getRechargeTypeText = (type) => {
  switch (type) {
    case 'alipay':
      return '支付宝充值'
+    case 'wechat':
+      return '微信充值'
    case 'transfer':
      return '对公转账'
    case 'gift':
--- 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>
@@ -84,113 +86,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 +275,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 +287,7 @@
      <el-dialog
        v-model="priceDialogVisible"
        title="调整订阅价格"
-        width="600px"
+        :width="isMobile ? '90%' : '600px'"
        class="price-dialog"
      >
        <el-form
@@ -340,9 +416,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 +439,7 @@
      <el-dialog
        v-model="batchPriceDialogVisible"
        title="一键改价"
-        width="500px"
+        :width="isMobile ? '90%' : '500px'"
        class="batch-price-dialog"
      >
        <el-form
@@ -433,10 +519,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 +546,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 +555,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 +1216,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 +1305,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>

@@ -79,21 +81,21 @@
          </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 +106,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 +128,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 +262,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 +304,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 +343,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 +352,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 +696,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 +776,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>
@@ -343,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'
@@ -351,6 +353,9 @@ import { useRoute, useRouter } from 'vue-router'
 const router = useRouter()
 const route = useRoute()

+// 移动端检测
+const { isMobile, isTablet } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const apiCalls = ref([])
--- 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">
@@ -534,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>
--- 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>
@@ -89,20 +89,21 @@
      </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 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>
@@ -186,20 +187,23 @@
            </template>
          </el-table-column>
        </el-table>
+        </div>
      </div>
    </template>

    <template #pagination>
-      <el-pagination
-        v-if="total > 0"
-        v-model:current-page="currentPage"
-        v-model:page-size="pageSize"
-        :page-sizes="[10, 20, 50, 100]"
-        :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
+      <div class="pagination-wrapper">
+        <el-pagination
+          v-if="total > 0"
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
    </template>

    <template #extra>
@@ -554,7 +558,9 @@ const handleViewDetail = (apiCall) => {
 }

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

 .error-type {
@@ -657,6 +663,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 +702,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>

@@ -69,54 +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 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 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">
-            <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">
+              <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>
+            <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>

@@ -125,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"
@@ -173,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"
@@ -238,6 +300,7 @@ 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,
@@ -258,6 +321,9 @@ const {
  canCallAPI
 } = useCertification()

+// 移动端检测
+const { isMobile, isTablet } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const addLoading = ref(false)
@@ -419,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));
@@ -444,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
@@ -79,20 +79,21 @@
      </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 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-700">{{ row.transaction_id }}</span>
@@ -120,20 +121,23 @@
            </template>
          </el-table-column>
        </el-table>
+        </div>
      </div>
    </template>

    <template #pagination>
-      <el-pagination
-        v-if="total > 0"
-        v-model:current-page="currentPage"
-        v-model:page-size="pageSize"
-        :page-sizes="[10, 20, 50, 100]"
-        :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
+      <div class="pagination-wrapper">
+        <el-pagination
+          v-if="total > 0"
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
    </template>

    <template #extra>
@@ -462,6 +466,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 +505,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>
@@ -79,20 +80,21 @@
      </div>

      <div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
-        <el-table
-          :data="records"
-          style="width: 100%"
-          :header-cell-style="{
-            background: '#f8fafc',
-            color: '#475569',
-            fontWeight: '600',
-            fontSize: '14px'
-          }"
-          :cell-style="{
-            fontSize: '14px',
-            color: '#1e293b'
-          }"
-        >
+        <div class="table-container">
+          <el-table
+            :data="records"
+            style="width: 100%"
+            :header-cell-style="{
+              background: '#f8fafc',
+              color: '#475569',
+              fontWeight: '600',
+              fontSize: '14px'
+            }"
+            :cell-style="{
+              fontSize: '14px',
+              color: '#1e293b'
+            }"
+          >
        <el-table-column prop="alipay_order_id" label="订单号">
            <template #default="{ row }">
              <div class="space-y-1">
@@ -100,6 +102,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,20 +162,23 @@
            </template>
          </el-table-column>
        </el-table>
+        </div>
      </div>
    </template>

    <template #pagination>
-      <el-pagination
-        v-if="total > 0"
-        v-model:current-page="currentPage"
-        v-model:page-size="pageSize"
-        :page-sizes="[10, 20, 50, 100]"
-        :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
+      <div class="pagination-wrapper">
+        <el-pagination
+          v-if="total > 0"
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
    </template>
  </ListPageLayout>
 </template>
@@ -203,11 +212,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 +264,7 @@ const formatTime = (date) => {
 const getRechargeTypeTagType = (type) => {
  const typeMap = {
    alipay: 'primary',
+    wechat: 'success',
    transfer: 'warning',
    gift: 'success'
  }
@@ -257,6 +275,7 @@ const getRechargeTypeTagType = (type) => {
 const getRechargeTypeText = (type) => {
  const typeMap = {
    alipay: '支付宝充值',
+    wechat: '微信充值',
    transfer: '对公转账',
    gift: '赠送'
  }
@@ -339,6 +358,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 +385,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,21 @@
    <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"
@@ -21,6 +27,7 @@
            </el-button>
            <el-button
              v-if="!isSubscribed"
+              :size="isMobile ? 'small' : 'default'"
              type="primary"
              @click="handleSubscribe"
              :loading="subscribing"
@@ -29,6 +36,7 @@
            </el-button>
            <el-button
              v-else
+              :size="isMobile ? 'small' : 'default'"
              type="danger"
              @click="handleCancelSubscription"
              :loading="cancelling"
@@ -37,6 +45,7 @@
            </el-button>
            <el-button
              v-if="isSubscribed"
+              :size="isMobile ? 'small' : 'default'"
              type="warning"
              @click="goToApiDebugger"
            >
@@ -60,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>
@@ -270,6 +279,7 @@

 <script setup>
 import { productApi, subscriptionApi } from '@/api'
+import { useMobileTable } from '@/composables/useMobileTable'
 import { DocumentCopy, Download } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { marked } from 'marked'
@@ -277,6 +287,9 @@ import { marked } from 'marked'
 const route = useRoute()
 const router = useRouter()

+// 移动端检测
+const { isMobile } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const product = ref(null)
@@ -987,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) {
@@ -1028,6 +1049,8 @@ const downloadMarkdown = (type) => {
 .tab-content {
  padding: 24px;
  min-height: 400px;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }

 .doc-content {
@@ -1077,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) {
@@ -1330,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;
  }
@@ -1373,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) {
@@ -1405,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移动端样式 */
@@ -1444,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
@@ -63,9 +63,17 @@
    </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>
@@ -76,9 +84,11 @@ 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)
@@ -97,6 +107,16 @@ 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

@@ -277,5 +297,68 @@ const handleCancelSubscribe = async (product) => {
 </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="400" 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"
@@ -163,9 +188,43 @@
                  取消订阅
                </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>

@@ -226,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 { 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)
@@ -411,6 +473,21 @@ 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) {
@@ -574,6 +651,30 @@ const handleCancelSubscription = async (subscription) => {
  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;
@@ -593,7 +694,33 @@ const handleCancelSubscription = async (subscription) => {
  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;
@@ -619,5 +746,76 @@ const handleCancelSubscription = async (subscription) => {
  .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>
Author	SHA1	Message	Date
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