📝 docs: Add documentation

2025-12-11 03:29:07 +00:00 · 2025-12-11 03:29:07 +00:00 · 99e7f6062d
commit 99e7f6062d
parent 50e695a1bb
135 changed files with 79115 additions and 8 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -3,6 +3,8 @@ name: Build and Release
 on:
  push:
    branches: [main, next, beta, develop]
+    paths-ignore:
+      - 'docs/**'

 permissions:
  contents: write
--- a/biome.jsonc
+++ b/biome.jsonc
@ -13,7 +13,8 @@
      "**/index.html",
      "**/vite.config.js",
      "!**/src/routeTree.gen.ts",
-      "!**/src/styles.css"
+      "!**/src/styles.css",
+      "!**/docs/**/*"
    ]
  },
  "formatter": {
--- a/bun.lock
+++ b/bun.lock
@ -1,5 +1,6 @@
 {
  "lockfileVersion": 1,
+  "configVersion": 0,
  "workspaces": {
    "": {
      "name": "shadcn-ui-monorepo",
@ -102,6 +103,10 @@
        "web-vitals": "^5.1.0",
      },
    },
+    "docs": {
+      "name": "docs",
+      "version": "1.0.0",
+    },
    "packages/typescript-config": {
      "name": "@workspace/typescript-config",
      "version": "0.0.0",
@ -482,6 +487,8 @@

    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],

+    "@jridgewell/source-map": ["@jridgewell/source-map@0.3.11", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25" } }, "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA=="],
+
    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],

    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.29", "", { "dependencies": { "@jridgewell/resolve-uri": "3.1.2", "@jridgewell/sourcemap-codec": "1.5.4" } }, "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ=="],
@ -750,6 +757,8 @@

    "@swc/counter": ["@swc/counter@0.1.3", "", {}, "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="],

+    "@swc/helpers": ["@swc/helpers@0.5.17", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A=="],
+
    "@swc/types": ["@swc/types@0.1.25", "", { "dependencies": { "@swc/counter": "^0.1.3" } }, "sha512-iAoY/qRhNH8a/hBvm3zKj9qQ4oc2+3w1unPJa2XvTK3XjeLXtzcCingVPw/9e5mn1+0yPqxcBGp9Jf0pkfMb1g=="],

    "@tailwindcss/node": ["@tailwindcss/node@4.1.11", "", { "dependencies": { "@ampproject/remapping": "2.3.0", "enhanced-resolve": "5.18.2", "jiti": "2.5.1", "lightningcss": "1.30.1", "magic-string": "0.30.17", "source-map-js": "1.2.1", "tailwindcss": "4.1.11" } }, "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q=="],
@ -896,6 +905,10 @@

    "@types/deep-eql": ["@types/deep-eql@4.0.2", "", {}, "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw=="],

+    "@types/eslint": ["@types/eslint@9.6.1", "", { "dependencies": { "@types/estree": "*", "@types/json-schema": "*" } }, "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag=="],
+
+    "@types/eslint-scope": ["@types/eslint-scope@3.7.7", "", { "dependencies": { "@types/eslint": "*", "@types/estree": "*" } }, "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg=="],
+
    "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],

    "@types/estree-jsx": ["@types/estree-jsx@1.0.5", "", { "dependencies": { "@types/estree": "*" } }, "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg=="],
@ -910,6 +923,8 @@

    "@types/js-yaml": ["@types/js-yaml@4.0.9", "", {}, "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg=="],

+    "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
+
    "@types/katex": ["@types/katex@0.16.7", "", {}, "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ=="],

    "@types/mdast": ["@types/mdast@4.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA=="],
@ -962,16 +977,52 @@

    "@vitest/utils": ["@vitest/utils@3.2.4", "", { "dependencies": { "@vitest/pretty-format": "3.2.4", "loupe": "^3.1.4", "tinyrainbow": "^2.0.0" } }, "sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA=="],

+    "@webassemblyjs/ast": ["@webassemblyjs/ast@1.14.1", "", { "dependencies": { "@webassemblyjs/helper-numbers": "1.13.2", "@webassemblyjs/helper-wasm-bytecode": "1.13.2" } }, "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ=="],
+
+    "@webassemblyjs/floating-point-hex-parser": ["@webassemblyjs/floating-point-hex-parser@1.13.2", "", {}, "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA=="],
+
+    "@webassemblyjs/helper-api-error": ["@webassemblyjs/helper-api-error@1.13.2", "", {}, "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ=="],
+
+    "@webassemblyjs/helper-buffer": ["@webassemblyjs/helper-buffer@1.14.1", "", {}, "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA=="],
+
+    "@webassemblyjs/helper-numbers": ["@webassemblyjs/helper-numbers@1.13.2", "", { "dependencies": { "@webassemblyjs/floating-point-hex-parser": "1.13.2", "@webassemblyjs/helper-api-error": "1.13.2", "@xtuc/long": "4.2.2" } }, "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA=="],
+
+    "@webassemblyjs/helper-wasm-bytecode": ["@webassemblyjs/helper-wasm-bytecode@1.13.2", "", {}, "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA=="],
+
+    "@webassemblyjs/helper-wasm-section": ["@webassemblyjs/helper-wasm-section@1.14.1", "", { "dependencies": { "@webassemblyjs/ast": "1.14.1", "@webassemblyjs/helper-buffer": "1.14.1", "@webassemblyjs/helper-wasm-bytecode": "1.13.2", "@webassemblyjs/wasm-gen": "1.14.1" } }, "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw=="],
+
+    "@webassemblyjs/ieee754": ["@webassemblyjs/ieee754@1.13.2", "", { "dependencies": { "@xtuc/ieee754": "^1.2.0" } }, "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw=="],
+
+    "@webassemblyjs/leb128": ["@webassemblyjs/leb128@1.13.2", "", { "dependencies": { "@xtuc/long": "4.2.2" } }, "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw=="],
+
+    "@webassemblyjs/utf8": ["@webassemblyjs/utf8@1.13.2", "", {}, "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ=="],
+
+    "@webassemblyjs/wasm-edit": ["@webassemblyjs/wasm-edit@1.14.1", "", { "dependencies": { "@webassemblyjs/ast": "1.14.1", "@webassemblyjs/helper-buffer": "1.14.1", "@webassemblyjs/helper-wasm-bytecode": "1.13.2", "@webassemblyjs/helper-wasm-section": "1.14.1", "@webassemblyjs/wasm-gen": "1.14.1", "@webassemblyjs/wasm-opt": "1.14.1", "@webassemblyjs/wasm-parser": "1.14.1", "@webassemblyjs/wast-printer": "1.14.1" } }, "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ=="],
+
+    "@webassemblyjs/wasm-gen": ["@webassemblyjs/wasm-gen@1.14.1", "", { "dependencies": { "@webassemblyjs/ast": "1.14.1", "@webassemblyjs/helper-wasm-bytecode": "1.13.2", "@webassemblyjs/ieee754": "1.13.2", "@webassemblyjs/leb128": "1.13.2", "@webassemblyjs/utf8": "1.13.2" } }, "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg=="],
+
+    "@webassemblyjs/wasm-opt": ["@webassemblyjs/wasm-opt@1.14.1", "", { "dependencies": { "@webassemblyjs/ast": "1.14.1", "@webassemblyjs/helper-buffer": "1.14.1", "@webassemblyjs/wasm-gen": "1.14.1", "@webassemblyjs/wasm-parser": "1.14.1" } }, "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw=="],
+
+    "@webassemblyjs/wasm-parser": ["@webassemblyjs/wasm-parser@1.14.1", "", { "dependencies": { "@webassemblyjs/ast": "1.14.1", "@webassemblyjs/helper-api-error": "1.13.2", "@webassemblyjs/helper-wasm-bytecode": "1.13.2", "@webassemblyjs/ieee754": "1.13.2", "@webassemblyjs/leb128": "1.13.2", "@webassemblyjs/utf8": "1.13.2" } }, "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ=="],
+
+    "@webassemblyjs/wast-printer": ["@webassemblyjs/wast-printer@1.14.1", "", { "dependencies": { "@webassemblyjs/ast": "1.14.1", "@xtuc/long": "4.2.2" } }, "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw=="],
+
    "@workspace/typescript-config": ["@workspace/typescript-config@workspace:packages/typescript-config"],

    "@workspace/ui": ["@workspace/ui@workspace:packages/ui"],

+    "@xtuc/ieee754": ["@xtuc/ieee754@1.2.0", "", {}, "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="],
+
+    "@xtuc/long": ["@xtuc/long@4.2.2", "", {}, "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="],
+
    "JSONStream": ["JSONStream@1.3.5", "", { "dependencies": { "jsonparse": "^1.2.0", "through": ">=2.2.7 <3" }, "bin": { "JSONStream": "./bin.js" } }, "sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ=="],

    "a-sync-waterfall": ["a-sync-waterfall@1.0.1", "", {}, "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA=="],

    "acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],

+    "acorn-import-phases": ["acorn-import-phases@1.0.4", "", { "peerDependencies": { "acorn": "^8.14.0" } }, "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ=="],
+
    "acorn-walk": ["acorn-walk@8.3.4", "", { "dependencies": { "acorn": "8.15.0" } }, "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g=="],

    "agent-base": ["agent-base@7.1.4", "", {}, "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ=="],
@ -984,6 +1035,8 @@

    "ajv-formats": ["ajv-formats@3.0.1", "", { "dependencies": { "ajv": "^8.0.0" } }, "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ=="],

+    "ajv-keywords": ["ajv-keywords@5.1.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3" }, "peerDependencies": { "ajv": "^8.8.2" } }, "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw=="],
+
    "ansi-align": ["ansi-align@3.0.1", "", { "dependencies": { "string-width": "^4.1.0" } }, "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w=="],

    "ansi-escapes": ["ansi-escapes@4.3.2", "", { "dependencies": { "type-fest": "0.21.3" } }, "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ=="],
@ -1056,6 +1109,8 @@

    "buffer": ["buffer@5.7.1", "", { "dependencies": { "base64-js": "1.5.1", "ieee754": "1.2.1" } }, "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ=="],

+    "buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],
+
    "cac": ["cac@6.7.14", "", {}, "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ=="],

    "call-bind-apply-helpers": ["call-bind-apply-helpers@1.0.2", "", { "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2" } }, "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ=="],
@ -1096,6 +1151,8 @@

    "chownr": ["chownr@3.0.0", "", {}, "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g=="],

+    "chrome-trace-event": ["chrome-trace-event@1.0.4", "", {}, "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ=="],
+
    "citty": ["citty@0.1.6", "", { "dependencies": { "consola": "^3.2.3" } }, "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ=="],

    "class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
@ -1272,6 +1329,8 @@

    "dir-glob": ["dir-glob@3.0.1", "", { "dependencies": { "path-type": "4.0.0" } }, "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA=="],

+    "docs": ["docs@workspace:docs"],
+
    "dom-accessibility-api": ["dom-accessibility-api@0.5.16", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],

    "dom-helpers": ["dom-helpers@5.2.1", "", { "dependencies": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" } }, "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="],
@ -1344,11 +1403,15 @@

    "escodegen": ["escodegen@2.1.0", "", { "dependencies": { "esprima": "4.0.1", "estraverse": "5.3.0", "esutils": "2.0.3" }, "optionalDependencies": { "source-map": "0.6.1" }, "bin": { "esgenerate": "bin/esgenerate.js", "escodegen": "bin/escodegen.js" } }, "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w=="],

+    "eslint-scope": ["eslint-scope@5.1.1", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^4.1.1" } }, "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw=="],
+
    "esniff": ["esniff@2.0.1", "", { "dependencies": { "d": "^1.0.1", "es5-ext": "^0.10.62", "event-emitter": "^0.3.5", "type": "^2.7.2" } }, "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg=="],

    "esprima": ["esprima@4.0.1", "", { "bin": { "esparse": "./bin/esparse.js", "esvalidate": "./bin/esvalidate.js" } }, "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="],

-    "estraverse": ["estraverse@5.3.0", "", {}, "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="],
+    "esrecurse": ["esrecurse@4.3.0", "", { "dependencies": { "estraverse": "^5.2.0" } }, "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag=="],
+
+    "estraverse": ["estraverse@4.3.0", "", {}, "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="],

    "estree-util-is-identifier-name": ["estree-util-is-identifier-name@3.0.0", "", {}, "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg=="],

@ -1360,6 +1423,8 @@

    "eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],

+    "events": ["events@3.3.0", "", {}, "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="],
+
    "execa": ["execa@9.6.0", "", { "dependencies": { "@sindresorhus/merge-streams": "^4.0.0", "cross-spawn": "^7.0.6", "figures": "^6.1.0", "get-stream": "^9.0.0", "human-signals": "^8.0.1", "is-plain-obj": "^4.1.0", "is-stream": "^4.0.1", "npm-run-path": "^6.0.0", "pretty-ms": "^9.2.0", "signal-exit": "^4.1.0", "strip-final-newline": "^4.0.0", "yoctocolors": "^2.1.1" } }, "sha512-jpWzZ1ZhwUmeWRhS7Qv3mhpOhLfwI+uAX4e5fOcXqwMR7EcJ0pj2kV1CVzHVMX/LphnKWD3LObjZCoJ71lKpHw=="],

    "expect-type": ["expect-type@1.2.2", "", {}, "sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA=="],
@ -1464,6 +1529,8 @@

    "glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "4.0.3" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],

+    "glob-to-regexp": ["glob-to-regexp@0.4.1", "", {}, "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="],
+
    "global-directory": ["global-directory@4.0.1", "", { "dependencies": { "ini": "4.1.1" } }, "sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q=="],

    "globby": ["globby@10.0.2", "", { "dependencies": { "@types/glob": "7.2.0", "array-union": "2.1.0", "dir-glob": "3.0.1", "fast-glob": "3.3.3", "glob": "7.2.3", "ignore": "5.3.2", "merge2": "1.4.1", "slash": "3.0.0" } }, "sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg=="],
@ -1656,6 +1723,8 @@

    "javascript-natural-sort": ["javascript-natural-sort@0.7.1", "", {}, "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw=="],

+    "jest-worker": ["jest-worker@27.5.1", "", { "dependencies": { "@types/node": "*", "merge-stream": "^2.0.0", "supports-color": "^8.0.0" } }, "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg=="],
+
    "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],

    "js-cookie": ["js-cookie@3.0.5", "", {}, "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw=="],
@ -1748,6 +1817,8 @@

    "load-json-file": ["load-json-file@4.0.0", "", { "dependencies": { "graceful-fs": "^4.1.2", "parse-json": "^4.0.0", "pify": "^3.0.0", "strip-bom": "^3.0.0" } }, "sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw=="],

+    "loader-runner": ["loader-runner@4.3.1", "", {}, "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q=="],
+
    "locate-path": ["locate-path@2.0.0", "", { "dependencies": { "p-locate": "^2.0.0", "path-exists": "^3.0.0" } }, "sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA=="],

    "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
@ -2146,6 +2217,8 @@

    "radash": ["radash@12.1.1", "", {}, "sha512-h36JMxKRqrAxVD8201FrCpyeNuUY9Y5zZwujr20fFO77tpUtGa6EZzfKw/3WaiBX95fq7+MpsuMLNdSnORAwSA=="],

+    "randombytes": ["randombytes@2.1.0", "", { "dependencies": { "safe-buffer": "^5.1.0" } }, "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ=="],
+
    "rc": ["rc@1.2.8", "", { "dependencies": { "deep-extend": "0.6.0", "ini": "1.3.8", "minimist": "1.2.8", "strip-json-comments": "2.0.1" }, "bin": { "rc": "./cli.js" } }, "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw=="],

    "react": ["react@19.2.0", "", {}, "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ=="],
@ -2266,6 +2339,8 @@

    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],

+    "schema-utils": ["schema-utils@4.3.3", "", { "dependencies": { "@types/json-schema": "^7.0.9", "ajv": "^8.9.0", "ajv-formats": "^2.1.1", "ajv-keywords": "^5.1.0" } }, "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA=="],
+
    "screenfull": ["screenfull@5.2.0", "", {}, "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA=="],

    "seedrandom": ["seedrandom@3.0.5", "", {}, "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg=="],
@ -2280,6 +2355,8 @@

    "sentence-case": ["sentence-case@2.1.1", "", { "dependencies": { "no-case": "2.3.2", "upper-case-first": "1.1.2" } }, "sha512-ENl7cYHaK/Ktwk5OTD+aDbQ3uC8IByu/6Bkg+HDv8Mm+XnBnppVNalcfJTNsp1ibstKh030/JKQQWglDvtKwEQ=="],

+    "serialize-javascript": ["serialize-javascript@6.0.2", "", { "dependencies": { "randombytes": "^2.1.0" } }, "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g=="],
+
    "seroval": ["seroval@1.4.0", "", {}, "sha512-BdrNXdzlofomLTiRnwJTSEAaGKyHHZkbMXIywOh7zlzp4uZnXErEwl9XZ+N1hJSNpeTtNxWvVwN0wUzAIQ4Hpg=="],

    "seroval-plugins": ["seroval-plugins@1.4.0", "", { "peerDependencies": { "seroval": "^1.0" } }, "sha512-zir1aWzoiax6pbBVjoYVd0O1QQXgIL3eVGBMsBsNmM8Ukq90yGaWlfx0AB9dTS8GPqrOrbXn79vmItCUP9U3BQ=="],
@ -2334,6 +2411,8 @@

    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],

+    "source-map-support": ["source-map-support@0.5.21", "", { "dependencies": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" } }, "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w=="],
+
    "space-separated-tokens": ["space-separated-tokens@2.0.2", "", {}, "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q=="],

    "spawn-error-forwarder": ["spawn-error-forwarder@1.0.0", "", {}, "sha512-gRjMgK5uFjbCvdibeGJuy3I5OYz6VLoVdsOJdA6wV0WlfQVLFueoqMxwwYD9RODdgb6oUIvlRlsyFSiQkMKu0g=="],
@ -2410,7 +2489,7 @@

    "tailwindcss": ["tailwindcss@4.1.17", "", {}, "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q=="],

-    "tapable": ["tapable@2.2.2", "", {}, "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg=="],
+    "tapable": ["tapable@2.3.0", "", {}, "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg=="],

    "tar": ["tar@7.4.3", "", { "dependencies": { "@isaacs/fs-minipass": "4.0.1", "chownr": "3.0.0", "minipass": "7.1.2", "minizlib": "3.0.2", "mkdirp": "3.0.1", "yallist": "5.0.0" } }, "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw=="],

@ -2418,6 +2497,10 @@

    "tempy": ["tempy@3.1.0", "", { "dependencies": { "is-stream": "^3.0.0", "temp-dir": "^3.0.0", "type-fest": "^2.12.2", "unique-string": "^3.0.0" } }, "sha512-7jDLIdD2Zp0bDe5r3D2qtkd1QOCacylBuL7oa4udvN6v2pqr4+LcCr67C8DR1zkpaZ8XosF5m1yQSabKAW6f2g=="],

+    "terser": ["terser@5.44.1", "", { "dependencies": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.15.0", "commander": "^2.20.0", "source-map-support": "~0.5.20" }, "bin": { "terser": "bin/terser" } }, "sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw=="],
+
+    "terser-webpack-plugin": ["terser-webpack-plugin@5.3.15", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "jest-worker": "^27.4.5", "schema-utils": "^4.3.0", "serialize-javascript": "^6.0.2", "terser": "^5.31.1" }, "peerDependencies": { "webpack": "^5.1.0" } }, "sha512-PGkOdpRFK+rb1TzVz+msVhw4YMRT9txLF4kRqvJhGhCM324xuR3REBSHALN+l+sAhKUmz0aotnjp5D+P83mLhQ=="],
+
    "text-extensions": ["text-extensions@2.4.0", "", {}, "sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g=="],

    "thenify": ["thenify@3.3.1", "", { "dependencies": { "any-promise": "^1.0.0" } }, "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw=="],
@ -2594,6 +2677,8 @@

    "w3c-xmlserializer": ["w3c-xmlserializer@5.0.0", "", { "dependencies": { "xml-name-validator": "^5.0.0" } }, "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA=="],

+    "watchpack": ["watchpack@2.4.4", "", { "dependencies": { "glob-to-regexp": "^0.4.1", "graceful-fs": "^4.1.2" } }, "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA=="],
+
    "wcwidth": ["wcwidth@1.0.1", "", { "dependencies": { "defaults": "1.0.4" } }, "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg=="],

    "web-namespaces": ["web-namespaces@2.0.1", "", {}, "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ=="],
@ -2606,6 +2691,10 @@

    "webidl-conversions": ["webidl-conversions@8.0.0", "", {}, "sha512-n4W4YFyz5JzOfQeA8oN7dUYpR+MBP3PIUsn2jLjWXwK5ASUzt0Jc/A5sAUZoCYFJRGF0FBKJ+1JjN43rNdsQzA=="],

+    "webpack": ["webpack@5.103.0", "", { "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.8", "@types/json-schema": "^7.0.15", "@webassemblyjs/ast": "^1.14.1", "@webassemblyjs/wasm-edit": "^1.14.1", "@webassemblyjs/wasm-parser": "^1.14.1", "acorn": "^8.15.0", "acorn-import-phases": "^1.0.3", "browserslist": "^4.26.3", "chrome-trace-event": "^1.0.2", "enhanced-resolve": "^5.17.3", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", "glob-to-regexp": "^0.4.1", "graceful-fs": "^4.2.11", "json-parse-even-better-errors": "^2.3.1", "loader-runner": "^4.3.1", "mime-types": "^2.1.27", "neo-async": "^2.6.2", "schema-utils": "^4.3.3", "tapable": "^2.3.0", "terser-webpack-plugin": "^5.3.11", "watchpack": "^2.4.4", "webpack-sources": "^3.3.3" }, "bin": { "webpack": "bin/webpack.js" } }, "sha512-HU1JOuV1OavsZ+mfigY0j8d1TgQgbZ6M+J75zDkpEAwYeXjWSqrGJtgnPblJjd/mAyTNQ7ygw0MiKOn6etz8yw=="],
+
+    "webpack-sources": ["webpack-sources@3.3.3", "", {}, "sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg=="],
+
    "webpack-virtual-modules": ["webpack-virtual-modules@0.6.2", "", {}, "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="],

    "whatwg-encoding": ["whatwg-encoding@3.1.1", "", { "dependencies": { "iconv-lite": "0.6.3" } }, "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ=="],
@ -2876,10 +2965,16 @@

    "dom-helpers/csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],

+    "enhanced-resolve/tapable": ["tapable@2.2.2", "", {}, "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg=="],
+
    "env-ci/execa": ["execa@8.0.1", "", { "dependencies": { "cross-spawn": "^7.0.3", "get-stream": "^8.0.1", "human-signals": "^5.0.0", "is-stream": "^3.0.0", "merge-stream": "^2.0.0", "npm-run-path": "^5.1.0", "onetime": "^6.0.0", "signal-exit": "^4.1.0", "strip-final-newline": "^3.0.0" } }, "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg=="],

+    "escodegen/estraverse": ["estraverse@5.3.0", "", {}, "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="],
+
    "escodegen/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],

+    "esrecurse/estraverse": ["estraverse@5.3.0", "", {}, "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="],
+
    "execa/get-stream": ["get-stream@9.0.1", "", { "dependencies": { "@sec-ant/readable-stream": "^0.4.1", "is-stream": "^4.0.1" } }, "sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA=="],

    "external-editor/chardet": ["chardet@0.7.0", "", {}, "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="],
@ -2926,6 +3021,8 @@

    "inquirer-autocomplete-prompt/run-async": ["run-async@2.4.1", "", {}, "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ=="],

+    "jest-worker/supports-color": ["supports-color@8.1.1", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q=="],
+
    "katex/commander": ["commander@8.3.0", "", {}, "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="],

    "launch-editor/picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
@ -3362,6 +3459,8 @@

    "rimraf/glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "1.0.0", "inflight": "1.0.6", "inherits": "2.0.4", "minimatch": "3.1.2", "once": "1.4.0", "path-is-absolute": "1.0.1" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="],

+    "schema-utils/ajv-formats": ["ajv-formats@2.1.1", "", { "dependencies": { "ajv": "^8.0.0" } }, "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA=="],
+
    "semantic-release/@semantic-release/error": ["@semantic-release/error@4.0.0", "", {}, "sha512-mgdxrHTLOjOddRVYIYDo0fR3/v61GNN1YGkfbrjuIKg/uMgCd+Qzo3UAXJ+woLQQpos4pl5Esuw5A7AoNlzjUQ=="],

    "semantic-release/aggregate-error": ["aggregate-error@5.0.0", "", { "dependencies": { "clean-stack": "^5.2.0", "indent-string": "^5.0.0" } }, "sha512-gOsf2YwSlleG6IjRYG2A7k0HmBMEo6qVNk9Bp/EaLgAJT5ngH6PXbqa4ItvnEwCm/velL5jAnQgsHsWnjhGmvw=="],
@ -3380,6 +3479,8 @@

    "solid-js/seroval-plugins": ["seroval-plugins@1.3.3", "", { "peerDependencies": { "seroval": "^1.0" } }, "sha512-16OL3NnUBw8JG1jBLUoZJsLnQq0n5Ua6aHalhJK4fMQkz1lqR7Osz1sA30trBtd9VUDc2NgkuRCn8+/pBwqZ+w=="],

+    "source-map-support/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
+
    "string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],

    "string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
@ -3402,12 +3503,16 @@

    "tempy/type-fest": ["type-fest@2.19.0", "", {}, "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA=="],

+    "terser/commander": ["commander@2.20.3", "", {}, "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="],
+
    "update-browserslist-db/picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],

    "update-check/registry-auth-token": ["registry-auth-token@3.3.2", "", { "dependencies": { "rc": "1.2.8", "safe-buffer": "5.2.1" } }, "sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ=="],

    "update-notifier/semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],

+    "webpack/enhanced-resolve": ["enhanced-resolve@5.18.3", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" } }, "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww=="],
+
    "widest-line/string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "^10.3.0", "get-east-asian-width": "^1.0.0", "strip-ansi": "^7.1.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],

    "@babel/helper-compilation-targets/lru-cache/yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
@ -3692,10 +3797,14 @@

    "swagger2openapi/node-fetch/whatwg-url": ["whatwg-url@5.0.0", "", { "dependencies": { "tr46": "~0.0.3", "webidl-conversions": "^3.0.0" } }, "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw=="],

+    "webpack/enhanced-resolve/tapable": ["tapable@2.2.2", "", {}, "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg=="],
+
    "widest-line/string-width/strip-ansi": ["strip-ansi@7.1.2", "", { "dependencies": { "ansi-regex": "^6.0.1" } }, "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA=="],

    "@commitlint/top-level/find-up/locate-path/p-locate": ["p-locate@6.0.0", "", { "dependencies": { "p-limit": "^4.0.0" } }, "sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw=="],

+    "@tailwindcss/vite/@tailwindcss/node/enhanced-resolve/tapable": ["tapable@2.2.2", "", {}, "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg=="],
+
    "@tailwindcss/vite/@tailwindcss/node/lightningcss/lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.30.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA=="],

    "@tailwindcss/vite/@tailwindcss/node/lightningcss/lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.30.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ=="],
--- a/docs/.vitepress/cache/deps/_metadata.json
+++ b/docs/.vitepress/cache/deps/_metadata.json
@ -0,0 +1,40 @@
+{
+  "hash": "7e859c1e",
+  "configHash": "1f757845",
+  "lockfileHash": "e3b0c442",
+  "browserHash": "1e554b7a",
+  "optimized": {
+    "vue": {
+      "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
+      "file": "vue.js",
+      "fileHash": "3b2af542",
+      "needsInterop": false
+    },
+    "vitepress > @vue/devtools-api": {
+      "src": "../../../../node_modules/@vue/devtools-api/dist/index.js",
+      "file": "vitepress___@vue_devtools-api.js",
+      "fileHash": "64692441",
+      "needsInterop": false
+    },
+    "vitepress > @vueuse/core": {
+      "src": "../../../../node_modules/@vueuse/core/index.mjs",
+      "file": "vitepress___@vueuse_core.js",
+      "fileHash": "98a22420",
+      "needsInterop": false
+    },
+    "vitepress-theme-teek": {
+      "src": "../../../../node_modules/vitepress-theme-teek/es/index.mjs",
+      "file": "vitepress-theme-teek.js",
+      "fileHash": "124483c7",
+      "needsInterop": false
+    }
+  },
+  "chunks": {
+    "chunk-BY246V3E": {
+      "file": "chunk-BY246V3E.js"
+    },
+    "chunk-PZ5AY32C": {
+      "file": "chunk-PZ5AY32C.js"
+    }
+  }
+}
--- a/docs/.vitepress/cache/deps/chunk-BY246V3E.js
+++ b/docs/.vitepress/cache/deps/chunk-BY246V3E.js
--- a/docs/.vitepress/cache/deps/chunk-BY246V3E.js.map
+++ b/docs/.vitepress/cache/deps/chunk-BY246V3E.js.map
--- a/docs/.vitepress/cache/deps/chunk-PZ5AY32C.js
+++ b/docs/.vitepress/cache/deps/chunk-PZ5AY32C.js
@ -0,0 +1,10 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export {
+  __export
+};
+//# sourceMappingURL=chunk-PZ5AY32C.js.map
--- a/docs/.vitepress/cache/deps/chunk-PZ5AY32C.js.map
+++ b/docs/.vitepress/cache/deps/chunk-PZ5AY32C.js.map
@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}
--- a/docs/.vitepress/cache/deps/package.json
+++ b/docs/.vitepress/cache/deps/package.json
@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
--- a/docs/.vitepress/cache/deps/vitepress-theme-teek.js
+++ b/docs/.vitepress/cache/deps/vitepress-theme-teek.js
--- a/docs/.vitepress/cache/deps/vitepress-theme-teek.js.map
+++ b/docs/.vitepress/cache/deps/vitepress-theme-teek.js.map
--- a/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js
+++ b/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js
--- a/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map
+++ b/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map
--- a/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js
+++ b/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js
--- a/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map
+++ b/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map
--- a/docs/.vitepress/cache/deps/vue.js
+++ b/docs/.vitepress/cache/deps/vue.js
@ -0,0 +1,348 @@
+import {
+  BaseTransition,
+  BaseTransitionPropsValidators,
+  Comment,
+  DeprecationTypes,
+  EffectScope,
+  ErrorCodes,
+  ErrorTypeStrings,
+  Fragment,
+  KeepAlive,
+  ReactiveEffect,
+  Static,
+  Suspense,
+  Teleport,
+  Text,
+  TrackOpTypes,
+  Transition,
+  TransitionGroup,
+  TriggerOpTypes,
+  VueElement,
+  assertNumber,
+  callWithAsyncErrorHandling,
+  callWithErrorHandling,
+  camelize,
+  capitalize,
+  cloneVNode,
+  compatUtils,
+  compile,
+  computed,
+  createApp,
+  createBaseVNode,
+  createBlock,
+  createCommentVNode,
+  createElementBlock,
+  createHydrationRenderer,
+  createPropsRestProxy,
+  createRenderer,
+  createSSRApp,
+  createSlots,
+  createStaticVNode,
+  createTextVNode,
+  createVNode,
+  customRef,
+  defineAsyncComponent,
+  defineComponent,
+  defineCustomElement,
+  defineEmits,
+  defineExpose,
+  defineModel,
+  defineOptions,
+  defineProps,
+  defineSSRCustomElement,
+  defineSlots,
+  devtools,
+  effect,
+  effectScope,
+  getCurrentInstance,
+  getCurrentScope,
+  getCurrentWatcher,
+  getTransitionRawChildren,
+  guardReactiveProps,
+  h,
+  handleError,
+  hasInjectionContext,
+  hydrate,
+  hydrateOnIdle,
+  hydrateOnInteraction,
+  hydrateOnMediaQuery,
+  hydrateOnVisible,
+  initCustomFormatter,
+  initDirectivesForSSR,
+  inject,
+  isMemoSame,
+  isProxy,
+  isReactive,
+  isReadonly,
+  isRef,
+  isRuntimeOnly,
+  isShallow,
+  isVNode,
+  markRaw,
+  mergeDefaults,
+  mergeModels,
+  mergeProps,
+  nextTick,
+  nodeOps,
+  normalizeClass,
+  normalizeProps,
+  normalizeStyle,
+  onActivated,
+  onBeforeMount,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onDeactivated,
+  onErrorCaptured,
+  onMounted,
+  onRenderTracked,
+  onRenderTriggered,
+  onScopeDispose,
+  onServerPrefetch,
+  onUnmounted,
+  onUpdated,
+  onWatcherCleanup,
+  openBlock,
+  patchProp,
+  popScopeId,
+  provide,
+  proxyRefs,
+  pushScopeId,
+  queuePostFlushCb,
+  reactive,
+  readonly,
+  ref,
+  registerRuntimeCompiler,
+  render,
+  renderList,
+  renderSlot,
+  resolveComponent,
+  resolveDirective,
+  resolveDynamicComponent,
+  resolveFilter,
+  resolveTransitionHooks,
+  setBlockTracking,
+  setDevtoolsHook,
+  setTransitionHooks,
+  shallowReactive,
+  shallowReadonly,
+  shallowRef,
+  ssrContextKey,
+  ssrUtils,
+  stop,
+  toDisplayString,
+  toHandlerKey,
+  toHandlers,
+  toRaw,
+  toRef,
+  toRefs,
+  toValue,
+  transformVNodeArgs,
+  triggerRef,
+  unref,
+  useAttrs,
+  useCssModule,
+  useCssVars,
+  useHost,
+  useId,
+  useModel,
+  useSSRContext,
+  useShadowRoot,
+  useSlots,
+  useTemplateRef,
+  useTransitionState,
+  vModelCheckbox,
+  vModelDynamic,
+  vModelRadio,
+  vModelSelect,
+  vModelText,
+  vShow,
+  version,
+  warn,
+  watch,
+  watchEffect,
+  watchPostEffect,
+  watchSyncEffect,
+  withAsyncContext,
+  withCtx,
+  withDefaults,
+  withDirectives,
+  withKeys,
+  withMemo,
+  withModifiers,
+  withScopeId
+} from "./chunk-BY246V3E.js";
+import "./chunk-PZ5AY32C.js";
+export {
+  BaseTransition,
+  BaseTransitionPropsValidators,
+  Comment,
+  DeprecationTypes,
+  EffectScope,
+  ErrorCodes,
+  ErrorTypeStrings,
+  Fragment,
+  KeepAlive,
+  ReactiveEffect,
+  Static,
+  Suspense,
+  Teleport,
+  Text,
+  TrackOpTypes,
+  Transition,
+  TransitionGroup,
+  TriggerOpTypes,
+  VueElement,
+  assertNumber,
+  callWithAsyncErrorHandling,
+  callWithErrorHandling,
+  camelize,
+  capitalize,
+  cloneVNode,
+  compatUtils,
+  compile,
+  computed,
+  createApp,
+  createBlock,
+  createCommentVNode,
+  createElementBlock,
+  createBaseVNode as createElementVNode,
+  createHydrationRenderer,
+  createPropsRestProxy,
+  createRenderer,
+  createSSRApp,
+  createSlots,
+  createStaticVNode,
+  createTextVNode,
+  createVNode,
+  customRef,
+  defineAsyncComponent,
+  defineComponent,
+  defineCustomElement,
+  defineEmits,
+  defineExpose,
+  defineModel,
+  defineOptions,
+  defineProps,
+  defineSSRCustomElement,
+  defineSlots,
+  devtools,
+  effect,
+  effectScope,
+  getCurrentInstance,
+  getCurrentScope,
+  getCurrentWatcher,
+  getTransitionRawChildren,
+  guardReactiveProps,
+  h,
+  handleError,
+  hasInjectionContext,
+  hydrate,
+  hydrateOnIdle,
+  hydrateOnInteraction,
+  hydrateOnMediaQuery,
+  hydrateOnVisible,
+  initCustomFormatter,
+  initDirectivesForSSR,
+  inject,
+  isMemoSame,
+  isProxy,
+  isReactive,
+  isReadonly,
+  isRef,
+  isRuntimeOnly,
+  isShallow,
+  isVNode,
+  markRaw,
+  mergeDefaults,
+  mergeModels,
+  mergeProps,
+  nextTick,
+  nodeOps,
+  normalizeClass,
+  normalizeProps,
+  normalizeStyle,
+  onActivated,
+  onBeforeMount,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onDeactivated,
+  onErrorCaptured,
+  onMounted,
+  onRenderTracked,
+  onRenderTriggered,
+  onScopeDispose,
+  onServerPrefetch,
+  onUnmounted,
+  onUpdated,
+  onWatcherCleanup,
+  openBlock,
+  patchProp,
+  popScopeId,
+  provide,
+  proxyRefs,
+  pushScopeId,
+  queuePostFlushCb,
+  reactive,
+  readonly,
+  ref,
+  registerRuntimeCompiler,
+  render,
+  renderList,
+  renderSlot,
+  resolveComponent,
+  resolveDirective,
+  resolveDynamicComponent,
+  resolveFilter,
+  resolveTransitionHooks,
+  setBlockTracking,
+  setDevtoolsHook,
+  setTransitionHooks,
+  shallowReactive,
+  shallowReadonly,
+  shallowRef,
+  ssrContextKey,
+  ssrUtils,
+  stop,
+  toDisplayString,
+  toHandlerKey,
+  toHandlers,
+  toRaw,
+  toRef,
+  toRefs,
+  toValue,
+  transformVNodeArgs,
+  triggerRef,
+  unref,
+  useAttrs,
+  useCssModule,
+  useCssVars,
+  useHost,
+  useId,
+  useModel,
+  useSSRContext,
+  useShadowRoot,
+  useSlots,
+  useTemplateRef,
+  useTransitionState,
+  vModelCheckbox,
+  vModelDynamic,
+  vModelRadio,
+  vModelSelect,
+  vModelText,
+  vShow,
+  version,
+  warn,
+  watch,
+  watchEffect,
+  watchPostEffect,
+  watchSyncEffect,
+  withAsyncContext,
+  withCtx,
+  withDefaults,
+  withDirectives,
+  withKeys,
+  withMemo,
+  withModifiers,
+  withScopeId
+};
+//# sourceMappingURL=vue.js.map
--- a/docs/.vitepress/cache/deps/vue.js.map
+++ b/docs/.vitepress/cache/deps/vue.js.map
@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}
--- a/docs/.vitepress/components/Sponsors.vue
+++ b/docs/.vitepress/components/Sponsors.vue
@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+
+interface Sponsor {
+  logo: string;
+  title: string;
+  description: string;
+  expiryDate: string;
+  href: string;
+}
+
+interface Props {
+  loadingText?: string;
+  errorText?: string;
+  emptyText?: string;
+  visitTitle?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loadingText: "Loading...",
+  errorText: "Failed to load sponsors data",
+  emptyText: "No sponsors available",
+  visitTitle: "Visit sponsor",
+});
+
+const sponsors = ref<Sponsor[]>([]);
+const loading = ref(true);
+const error = ref("");
+
+const isExpired = (expiryDate: string): boolean => {
+  try {
+    const expiry = new Date(expiryDate);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    expiry.setHours(0, 0, 0, 0);
+    return expiry < today;
+  } catch {
+    return false;
+  }
+};
+
+onMounted(async () => {
+  try {
+    const response = await fetch(
+      "https://raw.githubusercontent.com/perfect-panel/ppanel-assets/main/billing/index.json"
+    );
+    if (!response.ok) throw new Error("Failed to fetch sponsors data");
+
+    const data = await response.json();
+    const allSponsors = [
+      ...(data.billing || []),
+      ...(data.dashboard || []),
+      ...(data.payment || []),
+    ];
+    sponsors.value = allSponsors.filter(
+      (sponsor: Sponsor) => !isExpired(sponsor.expiryDate)
+    );
+  } catch (e) {
+    error.value = props.errorText;
+    console.error(e);
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <div class="sponsors-container">
+    <div v-if="loading" class="loading">{{ loadingText }}</div>
+    <div v-else-if="error" class="error">{{ error }}</div>
+    <div v-else-if="sponsors.length === 0" class="empty-state">{{ emptyText }}</div>
+    <div v-else class="sponsors-grid">
+      <a
+        v-for="sponsor in sponsors"
+        :key="sponsor.title"
+        :href="sponsor.href"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="sponsor-card"
+        :title="sponsor.title"
+      >
+        <img
+          :src="sponsor.logo"
+          :alt="sponsor.title"
+          class="sponsor-logo"
+        />
+        <div class="sponsor-content">
+          <h3 class="sponsor-title">{{ sponsor.title }}</h3>
+          <p class="sponsor-description">{{ sponsor.description }}</p>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sponsors-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1.5rem 2.5rem;
+}
+
+.loading,
+.error {
+  text-align: center;
+  padding: 3rem;
+  font-size: 1rem;
+}
+
+.loading {
+  color: var(--vp-c-text-2);
+}
+
+.error {
+  color: var(--vp-c-danger);
+}
+
+.sponsors-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin-top: 2rem;
+}
+
+.sponsor-card {
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 1.25rem;
+  border: 1px solid var(--vp-c-divider);
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+.sponsor-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--vp-c-brand) 0%, var(--vp-c-brand-dark) 100%);
+  transform: scaleX(0);
+  transition: transform 0.25s ease;
+}
+
+.sponsor-card:hover::before {
+  transform: scaleX(1);
+}
+
+.sponsor-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
+  border-color: var(--vp-c-brand-light);
+}
+
+.sponsor-logo {
+  width: 80px;
+  height: 80px;
+  flex-shrink: 0;
+  object-fit: contain;
+  border-radius: 8px;
+  background: var(--vp-c-bg);
+  padding: 0.5rem;
+  transition: transform 0.25s ease;
+}
+
+.sponsor-card:hover .sponsor-logo {
+  transform: scale(1.05);
+}
+
+.sponsor-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.sponsor-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+  line-height: 1.4;
+}
+
+.sponsor-description {
+  color: var(--vp-c-text-2);
+  font-size: 0.875rem;
+  line-height: 1.6;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 5rem 2rem;
+  color: var(--vp-c-text-2);
+  font-size: 1rem;
+}
+
+@media (max-width: 768px) {
+  .sponsors-container {
+    padding: 0 1rem 2rem;
+  }
+
+  .sponsors-grid {
+    grid-template-columns: 1fr;
+    gap: 1.25rem;
+  }
+
+  .sponsor-card {
+    padding: 1rem;
+  }
+
+  .sponsor-logo {
+    width: 60px;
+    height: 60px;
+  }
+}
+</style>
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@ -0,0 +1,367 @@
+import { defineConfig } from "vitepress";
+import { defineTeekConfig } from "vitepress-theme-teek/config";
+
+// Teek 主题配置
+const teekConfig = defineTeekConfig({
+  // 文章元数据配置
+  article: {
+    author: "PPanel",
+  },
+  // 页脚配置
+  footer: {
+    copyright: "Copyright © 2025 PPanel",
+  },
+  // 评论按钮配置 - 跳转到 Telegram 群组
+  toComment: {
+    enabled: true,
+    done: () => {
+      window.open("https://t.me/PPanelChat", "_blank");
+    },
+  },
+});
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  extends: teekConfig,
+
+  title: "PPanel",
+  description:
+    "PPanel is a pure, professional, and perfect open-source proxy panel tool, designed to be your ideal choice for learning and practical use.",
+
+  // 国际化配置
+  locales: {
+    root: {
+      label: "English",
+      lang: "en-US",
+      themeConfig: {
+        nav: [
+          { text: "Home", link: "/" },
+          { text: "Guide", link: "/zh/guide/intro" },
+          { text: "Features", link: "/zh/admin/dashboard" },
+          { text: "API", link: "/zh/api/reference" },
+          { text: "Sponsors", link: "/zh/sponsors" },
+          {
+            text: "Stats",
+            link: "https://stats.ppanel.dev",
+            target: "_blank",
+          },
+          { text: "Buy Theme", link: "https://bygga.app", target: "_blank" },
+        ],
+        sidebar: {
+          "/api/": [
+            {
+              text: "API",
+              items: [
+                { text: "Overview", link: "/api/reference" },
+                { text: "Common Service", link: "/api/common" },
+                { text: "User Service", link: "/api/user" },
+                { text: "Admin Service", link: "/api/admin" },
+                { text: "Gateway", link: "/api/gateway" },
+              ],
+            },
+          ],
+          "/guide/": [
+            {
+              text: "Guide",
+              items: [
+                { text: "Introduction", link: "/guide/intro" },
+                { text: "Contributing", link: "/guide/contributing" },
+              ],
+            },
+            {
+              text: "Installation",
+              items: [
+                { text: "Overview", link: "/guide/installation/" },
+                {
+                  text: "Docker Compose",
+                  link: "/guide/installation/docker-compose",
+                },
+                {
+                  text: "Docker Run",
+                  link: "/guide/installation/docker-run",
+                },
+                {
+                  text: "Binary Deployment",
+                  link: "/guide/installation/binary",
+                },
+              ],
+            },
+            {
+              text: "Separation Deployment",
+              items: [
+                {
+                  text: "Backend Deployment",
+                  link: "/guide/separation/backend",
+                },
+                {
+                  text: "Frontend Deployment",
+                  link: "/guide/separation/frontend",
+                },
+              ],
+            },
+            {
+              text: "Node Agent",
+              items: [
+                {
+                  text: "Installation",
+                  link: "/guide/node/installation",
+                },
+              ],
+            },
+          ],
+          "/admin/": [
+            {
+              text: "Dashboard",
+              items: [{ text: "Overview", link: "/admin/dashboard" }],
+            },
+            {
+              text: "Maintenance",
+              items: [
+                {
+                  text: "Server Management",
+                  link: "/admin/maintenance/servers",
+                },
+                {
+                  text: "Node Management",
+                  link: "/admin/maintenance/nodes",
+                },
+                {
+                  text: "Subscribe Config",
+                  link: "/admin/maintenance/subscribe",
+                },
+                {
+                  text: "Product Management",
+                  link: "/admin/maintenance/products",
+                },
+              ],
+            },
+            {
+              text: "Commerce",
+              items: [
+                { text: "Order Management", link: "/admin/commerce/orders" },
+                {
+                  text: "Coupon Management",
+                  link: "/admin/commerce/coupons",
+                },
+                {
+                  text: "Marketing Management",
+                  link: "/admin/commerce/marketing",
+                },
+                {
+                  text: "Announcement Management",
+                  link: "/admin/commerce/announcements",
+                },
+              ],
+            },
+            {
+              text: "Users & Support",
+              items: [
+                {
+                  text: "User Management",
+                  link: "/admin/users-support/users",
+                },
+                {
+                  text: "Ticket Management",
+                  link: "/admin/users-support/tickets",
+                },
+                {
+                  text: "Document Management",
+                  link: "/admin/users-support/documents",
+                },
+              ],
+            },
+            {
+              text: "System",
+              items: [
+                { text: "System Config", link: "/admin/system/config" },
+                { text: "Auth Control", link: "/admin/system/auth-control" },
+                { text: "Payment Config", link: "/admin/system/payment" },
+                { text: "ADS Config", link: "/admin/system/ads" },
+              ],
+            },
+            {
+              text: "Logs & Analytics",
+              items: [
+                { text: "Login Logs", link: "/admin/logs/login" },
+                { text: "Register Logs", link: "/admin/logs/register" },
+                { text: "Email Logs", link: "/admin/logs/email" },
+                { text: "Mobile Logs", link: "/admin/logs/mobile" },
+                { text: "Subscribe Logs", link: "/admin/logs/subscribe" },
+                {
+                  text: "Reset Subscribe Logs",
+                  link: "/admin/logs/reset-subscribe",
+                },
+                {
+                  text: "Subscribe Traffic",
+                  link: "/admin/logs/subscribe-traffic",
+                },
+                {
+                  text: "Server Traffic",
+                  link: "/admin/logs/server-traffic",
+                },
+                {
+                  text: "Traffic Details",
+                  link: "/admin/logs/traffic-details",
+                },
+                { text: "Balance Logs", link: "/admin/logs/balance" },
+                { text: "Commission Logs", link: "/admin/logs/commission" },
+                { text: "Gift Logs", link: "/admin/logs/gift" },
+              ],
+            },
+          ],
+        },
+      },
+    },
+    zh: {
+      label: "简体中文",
+      lang: "zh-CN",
+      link: "/zh/",
+      themeConfig: {
+        nav: [
+          { text: "首页", link: "/zh/" },
+          { text: "指南", link: "/zh/guide/intro" },
+          { text: "功能文档", link: "/zh/admin/dashboard" },
+          { text: "API 文档", link: "/zh/api/reference" },
+          { text: "赞助商", link: "/zh/sponsors" },
+          {
+            text: "统计",
+            link: "https://stats.ppanel.dev",
+            target: "_blank",
+          },
+          { text: "主题购买", link: "https://bygga.app", target: "_blank" },
+        ],
+        sidebar: {
+          "/zh/api/": [
+            {
+              text: "API",
+              items: [
+                { text: "概览", link: "/zh/api/reference" },
+                { text: "通用服务", link: "/zh/api/common" },
+                { text: "用户服务", link: "/zh/api/user" },
+                { text: "管理端服务", link: "/zh/api/admin" },
+                { text: "网关", link: "/zh/api/gateway" },
+              ],
+            },
+          ],
+          "/zh/guide/": [
+            {
+              text: "指南",
+              items: [
+                { text: "简介", link: "/zh/guide/intro" },
+                { text: "贡献指南", link: "/zh/guide/contributing" },
+              ],
+            },
+            {
+              text: "安装部署",
+              items: [
+                { text: "概览", link: "/zh/guide/installation/" },
+                {
+                  text: "Docker Compose",
+                  link: "/zh/guide/installation/docker-compose",
+                },
+                {
+                  text: "Docker Run",
+                  link: "/zh/guide/installation/docker-run",
+                },
+                {
+                  text: "二进制部署",
+                  link: "/zh/guide/installation/binary",
+                },
+              ],
+            },
+            {
+              text: "分离部署",
+              items: [
+                {
+                  text: "后端部署",
+                  link: "/zh/guide/separation/backend",
+                },
+                {
+                  text: "前端部署",
+                  link: "/zh/guide/separation/frontend",
+                },
+              ],
+            },
+            {
+              text: "节点端",
+              items: [
+                {
+                  text: "安装",
+                  link: "/zh/guide/node/installation",
+                },
+              ],
+            },
+          ],
+          "/zh/admin/": [
+            {
+              text: "仪表盘",
+              items: [{ text: "总览", link: "/zh/admin/dashboard" }],
+            },
+            {
+              text: "运维管理",
+              items: [
+                { text: "服务器管理", link: "/zh/admin/maintenance/servers" },
+                { text: "节点管理", link: "/zh/admin/maintenance/nodes" },
+                { text: "订阅配置", link: "/zh/admin/maintenance/subscribe" },
+                { text: "产品管理", link: "/zh/admin/maintenance/products" },
+              ],
+            },
+            {
+              text: "商务管理",
+              items: [
+                { text: "订单管理", link: "/zh/admin/commerce/orders" },
+                { text: "优惠券管理", link: "/zh/admin/commerce/coupons" },
+                { text: "营销管理", link: "/zh/admin/commerce/marketing" },
+                { text: "公告管理", link: "/zh/admin/commerce/announcements" },
+              ],
+            },
+            {
+              text: "用户与支持",
+              items: [
+                { text: "用户管理", link: "/zh/admin/users-support/users" },
+                { text: "工单管理", link: "/zh/admin/users-support/tickets" },
+                { text: "文档管理", link: "/zh/admin/users-support/documents" },
+              ],
+            },
+            {
+              text: "系统管理",
+              items: [
+                { text: "系统配置", link: "/zh/admin/system/config" },
+                { text: "认证控制", link: "/zh/admin/system/auth-control" },
+                { text: "支付配置", link: "/zh/admin/system/payment" },
+                { text: "广告配置", link: "/zh/admin/system/ads" },
+              ],
+            },
+            {
+              text: "日志与分析",
+              items: [
+                { text: "登录日志", link: "/zh/admin/logs/login" },
+                { text: "注册日志", link: "/zh/admin/logs/register" },
+                { text: "邮件日志", link: "/zh/admin/logs/email" },
+                { text: "短信日志", link: "/zh/admin/logs/mobile" },
+                { text: "订阅日志", link: "/zh/admin/logs/subscribe" },
+                {
+                  text: "重置订阅日志",
+                  link: "/zh/admin/logs/reset-subscribe",
+                },
+                { text: "订阅流量", link: "/zh/admin/logs/subscribe-traffic" },
+                { text: "服务器流量", link: "/zh/admin/logs/server-traffic" },
+                { text: "流量详情", link: "/zh/admin/logs/traffic-details" },
+                { text: "余额日志", link: "/zh/admin/logs/balance" },
+                { text: "佣金日志", link: "/zh/admin/logs/commission" },
+                { text: "赠送日志", link: "/zh/admin/logs/gift" },
+              ],
+            },
+          ],
+        },
+      },
+    },
+  },
+
+  themeConfig: {
+    logo: "/logo.svg",
+    socialLinks: [
+      { icon: "github", link: "https://github.com/perfect-panel/ppanel" },
+    ],
+  },
+});
--- a/docs/.vitepress/theme/components/ScalarIframe.vue
+++ b/docs/.vitepress/theme/components/ScalarIframe.vue
@ -0,0 +1,75 @@
+<template>
+  <iframe
+    class="scalar-iframe"
+    :src="iframeSrc"
+    frameborder="0"
+    loading="lazy"
+    referrerpolicy="no-referrer"
+    scrolling="no"
+    :style="{ height: iframeHeight }"
+    @wheel.stop
+    @touchstart.stop
+    @touchmove.stop
+    @mousedown.stop
+  />
+</template>
+
+<script setup lang="ts">
+import { withBase } from "vitepress";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    specUrl: string;
+    title?: string;
+    theme?: string;
+    layout?: "modern" | "classic";
+    operationId?: string;
+  }>(),
+  {
+    title: "API Reference",
+    theme: "saturn",
+    layout: "classic",
+  }
+);
+
+const iframeHeight = ref("1000px");
+
+const iframeSrc = computed(() => {
+  const params = new URLSearchParams();
+  params.set("spec", props.specUrl);
+  params.set("title", props.title);
+  params.set("theme", props.theme);
+  params.set("layout", props.layout);
+  if (props.operationId) {
+    params.set("operationId", props.operationId);
+  }
+  return withBase(`/scalar/index.html?${params.toString()}`);
+});
+
+const handleMessage = (event: MessageEvent) => {
+  if (event.origin !== window.location.origin) return;
+  const data = event.data;
+  if (data?.type === "scalar-height" && typeof data.height === "number") {
+    iframeHeight.value = `${Math.max(data.height, 800)}px`;
+  }
+};
+
+onMounted(() => {
+  window.addEventListener("message", handleMessage);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("message", handleMessage);
+});
+</script>
+
+<style scoped>
+.scalar-iframe {
+  width: 100%;
+  border: none;
+  border-radius: 12px;
+  background: transparent;
+  overflow: hidden;
+}
+</style>
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@ -0,0 +1,15 @@
+// https://vitepress.dev/guide/custom-theme
+import Teek from "vitepress-theme-teek";
+import "vitepress-theme-teek/index.css";
+import type { Theme } from "vitepress";
+import ScalarIframe from "./components/ScalarIframe.vue";
+
+const theme: Theme = {
+  extends: Teek,
+  enhanceApp(ctx) {
+    Teek.enhanceApp?.(ctx);
+    ctx.app.component("ScalarIframe", ScalarIframe);
+  },
+};
+
+export default theme;
--- a/docs/admin/commerce/announcements.md
+++ b/docs/admin/commerce/announcements.md
@ -0,0 +1,380 @@
+# Announcement Management
+
+The Announcement Management module publishes and manages system announcements to communicate important information to users.
+
+## Overview
+
+### Announcement List
+
+View and manage all announcements:
+
+- **Title**: Announcement topic
+- **Type**: System/Maintenance/Activity/Update
+- **Status**: Draft/Published/Offline
+- **Publish Time**: Publication datetime
+- **Display Position**: Homepage/User Center/Admin
+- **Priority**: High/Medium/Low
+- **Views**: View count
+
+### Create Announcement
+
+Publish new announcement:
+
+#### Basic Info
+
+- **Title**: Concise title
+- **Type**: Select type
+- **Content**: Detailed content (rich text)
+- **Summary**: Brief summary (list display)
+
+#### Display Settings
+
+- **Display Position**: Choose locations
+  - Homepage Banner
+  - Announcement Bar
+  - User Center
+  - Admin Panel
+  - Popup Alert
+
+- **Display Style**: Configure style
+  - Banner style
+  - List style
+  - Popup style
+  - Floating alert
+
+#### Publish Settings
+
+- **Publish Time**:
+  - Publish now
+  - Scheduled publish
+  - Specific datetime
+
+- **Offline Time**:
+  - Permanent display
+  - Specific offline time
+  - Manual offline
+
+- **Priority**: Set display priority
+
+#### Target Users
+
+- **All Users**: Show to everyone
+- **New Users**: New registrations only
+- **Existing Users**: Existing users only
+- **Specific Groups**: Designated groups
+- **VIP Users**: VIP users only
+
+### Edit Announcement
+
+Modify published announcement:
+
+- Update content
+- Adjust display settings
+- Modify publish time
+- Change target users
+
+::: tip Tip
+Modifying published announcements affects live display. Use caution.
+:::
+
+### Delete Announcement
+
+Remove announcement:
+
+- **Offline**: Stop display but keep data
+- **Delete**: Permanently remove
+- Reading records retained for stats
+
+## Announcement Types
+
+### System Announcement
+
+Important system notifications:
+
+**Use Cases**:
+- System upgrade notice
+- Terms of service changes
+- Policy adjustments
+- Major feature launches
+
+**Examples**:
+- System maintenance at XX time
+- Service agreement update
+- New feature announcement
+
+### Maintenance Announcement
+
+System maintenance notices:
+
+**Use Cases**:
+- Scheduled maintenance
+- Incident explanation
+- Service recovery notice
+
+**Examples**:
+- Regular maintenance notice
+- Emergency incident alert
+- Service restored notification
+
+### Activity Announcement
+
+Marketing activity notices:
+
+**Use Cases**:
+- Promotion preview
+- Discount information
+- Activity rules
+
+**Examples**:
+- Double 11 sale preview
+- Limited-time offer
+- New user exclusive
+
+### Update Announcement
+
+Product update notes:
+
+**Use Cases**:
+- Feature updates
+- Product optimization
+- Bug fix notes
+
+**Examples**:
+- v2.0 update notes
+- New XX feature
+- Performance optimization
+
+## Announcement Display
+
+### Banner
+
+Homepage carousel banner:
+
+- Large image, strong visual impact
+- Multi-image carousel
+- Click to detail page
+- Suitable for major campaigns
+
+### List
+
+Announcement list display:
+
+- Title list format
+- Category filtering
+- Click for details
+- Suitable for regular announcements
+
+### Popup
+
+Popup alert:
+
+- Display on login
+- Mandatory reading
+- Close after confirmation
+- Suitable for important notices
+
+### Floating Bar
+
+Floating alert bar:
+
+- Float at page top
+- Manually closable
+- Non-intrusive
+- Suitable for tips
+
+## Announcement Push
+
+### On-site Push
+
+Push within system:
+
+- **Homepage Display**: Prominent position
+- **Message Center**: Push to message center
+- **Popup Alert**: Login popup
+- **Email Push**: Send email
+
+### Targeted Push
+
+Push to specific users:
+
+- Push by user group
+- Push by user tags
+- Push by user behavior
+- Personalized content
+
+### Push Timing
+
+Choose optimal timing:
+
+- **Immediate**: Urgent announcements
+- **Scheduled**: Optimal time
+- **Event Triggered**: Specific events
+- **Periodic**: Regular push
+
+## Statistics
+
+### Reading Stats
+
+Track reading:
+
+- **Views**: View count
+- **Read Rate**: Reading user ratio
+- **Readers**: User list
+- **Time Distribution**: Reading time
+
+### Click Stats
+
+Track clicks:
+
+- **Clicks**: Click count
+- **Click Rate**: Click/impression ratio
+- **Link Tracking**: External link clicks
+- **Conversion**: Announcement conversions
+
+### Effect Analysis
+
+Analyze effectiveness:
+
+- **Reach Rate**: Push reach rate
+- **Engagement**: User engagement
+- **Conversion**: Conversion effects
+- **User Feedback**: Feedback opinions
+
+## Templates
+
+### Common Templates
+
+Preset templates:
+
+- **Maintenance Template**: Standard format
+- **Campaign Template**: Activity format
+- **Update Template**: Update notes format
+- **Urgent Template**: Emergency format
+
+### Custom Templates
+
+Create custom templates:
+
+- Design announcement style
+- Define content structure
+- Save as template
+- Reuse templates
+
+## Approval
+
+### Approval Flow
+
+Announcement approval:
+
+1. **Create Draft**: Edit content
+2. **Submit**: Submit for review
+3. **Review**: Reviewer checks
+4. **Publish**: Publish after approval
+5. **Monitor**: Track after publish
+
+### Approval Permissions
+
+Set permissions:
+
+- **Create**: Who can create
+- **Review**: Who can review
+- **Publish**: Who can publish
+- **Delete**: Who can delete
+
+## Best Practices
+
+### Content Writing
+
+- Clear, concise title highlighting key points
+- Accurate, complete content avoiding ambiguity
+- Plain language, user-friendly
+- Bold important information
+- Provide contact information
+
+### Publish Timing
+
+- Choose active user periods
+- Avoid holidays for important notices
+- Urgent announcements publish immediately
+- Regular announcements schedule ahead
+
+### Frequency Control
+
+- Avoid over-notification
+- Control announcement quantity
+- Prioritize important announcements
+- Clean up expired announcements
+
+### Effect Tracking
+
+- Monitor reading data
+- Collect user feedback
+- Analyze effectiveness
+- Continuous optimization
+
+## Scenario Examples
+
+### Maintenance Notice
+
+**Title**: System Maintenance Notice
+
+**Content**:
+- Time: 2024-01-01 02:00-06:00
+- Content: System upgrade and optimization
+- Impact: All services temporarily unavailable
+- Compensation: 1 day membership extension
+
+### Campaign Preview
+
+**Title**: Double 11 Festival
+
+**Content**:
+- Time: Nov 11 00:00-23:59
+- Content: 50% off sitewide
+- Coupons: $20 off $100
+- How to Join: Click for details
+
+### Feature Launch
+
+**Title**: New Feature Launch
+
+**Content**:
+- Feature: Traffic statistics
+- Description: Real-time traffic tracking
+- How to Use: User Center - Traffic Stats
+- Feedback: Welcome suggestions
+
+## Troubleshooting
+
+### Announcement Not Showing
+
+Check:
+
+1. Is announcement published
+2. Is publish time correct
+3. Is target user setting correct
+4. Is display position correct
+
+### Display Anomaly
+
+Possible causes:
+
+1. Content format issues
+2. Image link broken
+3. Style conflicts
+4. Browser compatibility
+
+### Push Failed
+
+Check:
+
+1. Is push config correct
+2. Is user contact valid
+3. Is push service working
+4. Reached push limits
+
+## Next Steps
+
+- [Marketing Management](/admin/commerce/marketing) - Plan campaigns
+- [User Management](/admin/users-support/users) - Manage target users
+- [System Config](/admin/system/config) - Configure announcement system
--- a/docs/admin/commerce/coupon.md
+++ b/docs/admin/commerce/coupon.md
@ -0,0 +1,176 @@
+<div v-pre>
+
+# Coupon Management
+
+Manage coupons in the system, including creating, editing, and enabling/disabling functions. Coupons provide purchase discounts for users.
+
+## Table Column Description
+
+### Enable
+Switch button to control whether the coupon is available. When off, users cannot use this coupon.
+
+### Name
+Coupon name for management identification.
+
+### Code
+Coupon redemption code that users enter during purchase to apply the coupon.
+
+### Type
+Coupon discount type:
+- **Percentage** - Discount by percentage (e.g., 10%)
+- **Amount** - Fixed amount discount (e.g., $50)
+
+### Discount
+Discount value:
+- Percentage type shows percentage (e.g., 10%)
+- Amount type shows currency amount (e.g., $50)
+
+### Count
+Displays three lines of information:
+- **Count** - Total available usage count (0 = unlimited)
+- **Remaining** - Remaining usage count
+- **Usage Times** - Times already used
+
+### Validity Period
+Coupon's valid time range:
+- Shows start time and end time
+- If only start time, shows single time
+- No restriction shows "--"
+
+## Table Operations
+
+### Edit
+Opens side drawer form to modify coupon information.
+
+### Delete
+Deletes coupon (requires confirmation), used coupons can also be deleted.
+
+### Batch Delete
+Deletes multiple selected coupons.
+
+## Coupon Form
+
+### Name (Required)
+Management name for the coupon, not displayed to users.
+
+### Custom Coupon Code (Optional)
+Custom redemption code, leave blank for system auto-generation.
+
+### Coupon Type (Required)
+Radio button to select type:
+- **Percentage Discount** - Discount by order amount percentage
+- **Amount Discount** - Fixed amount reduction
+
+### Discount Value (Required)
+Input based on type:
+- **Percentage**: Enter number 1-100 with % suffix
+- **Amount**: Enter currency amount
+
+### Specified Subscription (Optional)
+Multi-select dropdown to choose applicable product plans:
+- Leave blank for all products
+- Select specific products for those only
+
+### Start Time (Optional)
+Coupon activation time:
+- Use date picker
+- Cannot select past dates (before yesterday)
+- Leave blank for immediate effect
+
+### Expire Time (Optional)
+Coupon expiration time:
+- Use date picker
+- Leave blank for never expires
+
+### Max Usage Count (Optional)
+Total times the coupon can be used:
+- 0 or blank for unlimited
+- Automatically expires when count reached
+
+### Max Usage Count per User (Optional)
+Times a single user can use this coupon:
+- 0 or blank for unlimited
+- Prevents repeated use by single user
+
+## Filter Functions
+
+### Subscribe Filter
+Select product plan to view exclusive coupons for that product.
+
+### Keyword Search
+Search coupons by name or code.
+
+## Usage Scenarios
+
+### Scenario 1: Create New User Registration Coupon
+
+**Form Configuration**:
+- Name: New User Discount
+- Code: NEWUSER2024 (custom)
+- Type: Percentage Discount
+- Discount: 20%
+- Specified Subscription: Leave blank (all products)
+- Start Time: 2024-01-01
+- Expire Time: 2024-12-31
+- Max Usage Count: 0 (unlimited)
+- Max Usage Count per User: 1
+
+**Effect**: Each new user can use once, valid all year, 20% off all products.
+
+### Scenario 2: Create Limited-Time Promotion Coupon
+
+**Form Configuration**:
+- Name: Double 11 Promotion
+- Code: Leave blank (auto-generate)
+- Type: Amount Discount
+- Discount: $50
+- Specified Subscription: Select "Annual Plan"
+- Start Time: 2024-11-11 00:00
+- Expire Time: 2024-11-11 23:59
+- Max Usage Count: 100
+- Max Usage Count per User: 1
+
+**Effect**: First 100 users on Double 11 get $50 off annual plan, one per user.
+
+### Scenario 3: Create Exclusive VIP Coupon
+
+**Form Configuration**:
+- Name: VIP Exclusive
+- Code: VIP888 (custom)
+- Type: Percentage Discount
+- Discount: 30%
+- Specified Subscription: Select "Premium Plan"
+- Start Time: Leave blank
+- Expire Time: Leave blank
+- Max Usage Count: 0 (unlimited)
+- Max Usage Count per User: 0 (unlimited)
+
+**Effect**: VIP users can use unlimited times, 30% off premium plan.
+
+### Scenario 4: Create One-Time Coupon Code
+
+**Form Configuration**:
+- Name: Thank You Gift
+- Code: THANKS100 (custom)
+- Type: Amount Discount
+- Discount: $100
+- Specified Subscription: Leave blank (all products)
+- Start Time: Leave blank
+- Expire Time: Leave blank
+- Max Usage Count: 1
+- Max Usage Count per User: 1
+
+**Effect**: Single-use thank you coupon, first come first served.
+
+## Important Notes
+
+1. **Enable Control**: New coupons default to disabled, must manually enable for users
+2. **Code Uniqueness**: Custom codes must be unique, duplicates will fail
+3. **Auto-Generation**: Leave code blank for system to auto-generate random code
+4. **Product Restriction**: Specified subscriptions apply only to selected products
+5. **Time Range**: Start time cannot be in past, expire time can be blank
+6. **Usage Count**: 0 or blank means unlimited
+7. **User Limit**: Per-user limit prevents abuse
+8. **Delete Impact**: Deleting coupons doesn't affect already-used orders
+
+</div>
--- a/docs/admin/commerce/coupons.md
+++ b/docs/admin/commerce/coupons.md
@ -0,0 +1,354 @@
+# Coupon Management
+
+The Coupon Management module creates and manages various coupons, which is an important tool for promotional activities.
+
+## Overview
+
+### Coupon List
+
+View and manage all coupons:
+
+- **Coupon Name**: Display name
+- **Coupon Type**: Spend threshold/Discount/Voucher
+- **Discount Amount**: Reduction or discount percentage
+- **Usage Conditions**: Minimum spend required
+- **Distribution**: Total and remaining quantity
+- **Validity**: Valid time range
+- **Applicable Scope**: Applicable products or users
+- **Status**: Active/Ended/Paused
+
+### Create Coupon
+
+Create new coupon:
+
+#### Basic Info
+
+- **Coupon Name**: Identifiable name
+- **Description**: Detailed discount description
+- **Coupon Code**: Redemption code (auto-generate)
+- **Coupon Type**: Select discount type
+
+#### Discount Settings
+
+**Spend Threshold Coupon**
+- Spend X get Y off
+- Multi-tier thresholds
+
+**Discount Coupon**
+- Discount percentage (e.g., 20% off)
+- Maximum discount cap
+
+**Voucher**
+- Direct fixed amount deduction
+- Or redeem specific product
+
+#### Usage Conditions
+
+- **Minimum Spend**: Order threshold
+- **Applicable Products**: Specified products
+- **Applicable Users**: New/Existing/All
+- **Usage Limit**: Times per person
+- **Stacking Rules**: Combine with other offers
+
+#### Distribution Settings
+
+- **Distribution Method**:
+  - Public claim: Everyone can claim
+  - Targeted: Specific users
+  - Redemption code: Enter code to claim
+  - Auto-distribution: Auto-grant on conditions
+
+- **Distribution Quantity**: Total limit
+- **Claim Limit**: Per-person claim limit
+
+#### Validity Settings
+
+- **Fixed Time**: Specific start/end dates
+- **Days After Claim**: Valid N days after claim
+- **Permanent**: No expiration
+
+### Edit Coupon
+
+Modify coupon config:
+
+- Adjust discount amount and conditions
+- Increase distribution quantity
+- Extend validity period
+- Modify applicable scope
+
+::: tip Tip
+Config changes don't affect coupons already claimed by users.
+:::
+
+### Delete Coupon
+
+Delete coupon:
+
+- **Soft Delete**: Deactivate but keep data
+- **Hard Delete**: Permanently delete
+- Used coupon records are retained
+
+## Coupon Types
+
+### Spend Threshold
+
+Discount after meeting amount:
+
+**Use Cases**:
+- Promote large orders
+- Increase AOV
+- Clearance sales
+
+**Examples**:
+- $10 off $100
+- $30 off $200
+- $100 off $500
+
+### Discount
+
+Percentage discount:
+
+**Use Cases**:
+- Holiday promotions
+- Member exclusive
+- New product launch
+
+**Examples**:
+- 10% off
+- 20% off (max $50)
+- 30% off (new users only)
+
+### Voucher
+
+Direct amount deduction:
+
+**Use Cases**:
+- User compensation
+- Promotion rewards
+- Points redemption
+
+**Examples**:
+- $10 no-threshold voucher
+- $50 trial voucher
+- $100 cash voucher
+
+### Product Voucher
+
+Redeem specific product:
+
+**Use Cases**:
+- Gift distribution
+- Event rewards
+- Points store
+
+**Examples**:
+- 1-month package voucher
+- 100GB traffic voucher
+
+## Coupon Distribution
+
+### Batch Distribution
+
+Distribute coupons to multiple users:
+
+1. Select coupon to distribute
+2. Select target user group
+3. Set distribution quantity
+4. Confirm distribution
+
+**Target Recipients**:
+- All users
+- Specific user groups
+- Newly registered
+- High-value users
+- At-risk churners
+
+### Redemption Code
+
+Generate coupon codes:
+
+- **Batch Generate**: Generate multiple codes
+- **Custom Prefix**: Set code prefix
+- **Export Codes**: Export Excel file
+- **Code Management**: View usage status
+
+### Auto-Distribution
+
+Configure auto-distribution rules:
+
+**Trigger Conditions**:
+- On user registration
+- After first purchase
+- Before subscription expiry
+- On spending milestone
+- On birthday
+
+**Distribution Content**:
+- Specific coupon
+- Random coupon
+- Tiered coupons
+
+## Coupon Usage
+
+### Usage Flow
+
+User coupon usage process:
+
+1. **Claim Coupon**: User claims or receives coupon
+2. **View Coupons**: Check available coupons in account
+3. **Order Usage**: Select coupon when placing order
+4. **System Validation**: Verify usage conditions
+5. **Calculate Discount**: Auto-calculate discount
+6. **Complete Payment**: Pay discounted price
+
+### Usage Restrictions
+
+Control coupon usage:
+
+- **Single Use**: Limit coupons per order
+- **Time Restriction**: Specific time periods
+- **Product Restriction**: Specific products
+- **User Restriction**: Specific user groups
+- **Device Restriction**: Limit devices
+
+### Usage Rules
+
+Coupon usage rule settings:
+
+- **Priority**: Order of multiple coupons
+- **Stacking**: Combine with other offers
+- **Partial Refund**: Coupon handling on refund
+- **Expiry Reminder**: Notify before expiration
+
+## Coupon Statistics
+
+### Distribution Stats
+
+Track coupon distribution:
+
+- **Total Distributed**: Distributed quantity
+- **Claim Rate**: Claim rate and users
+- **Stock Remaining**: Available quantity
+- **Distribution Trend**: Daily distribution changes
+
+### Usage Stats
+
+Analyze coupon usage:
+
+- **Usage Rate**: Used/Distributed ratio
+- **Discount Amount**: Total discount given
+- **Orders with Coupons**: Order count
+- **Users with Coupons**: User count
+
+### Effect Analysis
+
+Evaluate coupon effectiveness:
+
+- **Conversion Rate**: Purchase conversion after claim
+- **AOV**: Average order value with coupons
+- **ROI Analysis**: Return on investment
+- **User Distribution**: User profile
+
+## Coupon Promotion
+
+### Promotion Channels
+
+Promote coupons through channels:
+
+- **On-site**: Homepage banner, popups
+- **Email**: Send coupon emails
+- **SMS**: SMS notifications
+- **Social Media**: Share to social platforms
+- **Referral Links**: Generate exclusive links
+
+### Promotion Activities
+
+Plan coupon campaigns:
+
+- **Limited Flash**: Limited-time coupon grab
+- **Share to Claim**: Get coupons after sharing
+- **Check-in**: Daily check-in rewards
+- **Referral Bonus**: Refer friends get coupons
+- **Purchase Rebate**: Get coupons after purchase
+
+## Coupon Templates
+
+### Common Templates
+
+Preset common coupon templates:
+
+- New user exclusive
+- Member birthday coupon
+- Holiday promotion
+- Spend threshold coupon
+- Repurchase coupon
+
+### Custom Templates
+
+Create custom templates:
+
+- Save common configs
+- Quick create similar coupons
+- Copy and edit templates
+
+## Risk Control
+
+### Anti-fraud
+
+Prevent malicious coupon abuse:
+
+- **Claim Limits**: IP, device restrictions
+- **Identity Verification**: Require verification
+- **Usage Monitoring**: Monitor abnormal usage
+- **Blacklist**: Block fraudulent users
+
+### Risk Alerts
+
+Coupon risk warnings:
+
+- Abnormal claiming alerts
+- Low stock reminders
+- Budget overrun warnings
+- Fraud behavior alerts
+
+## Best Practices
+
+- Set reasonable thresholds to avoid losses
+- Control total distribution and budget
+- Regularly analyze coupon effectiveness
+- Target different user groups
+- Coordinate with marketing campaigns
+- Clean up expired and invalid coupons
+
+## Troubleshooting
+
+### Cannot Use Coupon
+
+Check:
+
+1. Are usage conditions met
+2. Is coupon expired
+3. Is product in applicable scope
+4. Is minimum spend reached
+
+### Incorrect Discount
+
+Possible reasons:
+
+1. Coupon config error
+2. Multiple coupon stacking issues
+3. Threshold tier settings
+
+### Distribution Failed
+
+Check:
+
+1. Is stock sufficient
+2. Does user meet claim conditions
+3. Is system configured correctly
+
+## Next Steps
+
+- [Marketing Management](/admin/commerce/marketing) - Create campaigns
+- [Order Management](/admin/commerce/orders) - View coupon usage
+- [User Management](/admin/users-support/users) - Distribute coupons
--- a/docs/admin/commerce/marketing.md
+++ b/docs/admin/commerce/marketing.md
@ -0,0 +1,354 @@
+# Marketing Management
+
+The Marketing Management module plans and executes various marketing campaigns to boost user growth and revenue.
+
+## Overview
+
+### Campaign List
+
+View and manage all campaigns:
+
+- **Campaign Name**: Marketing campaign title
+- **Campaign Type**: Promotion/Acquisition/Retention/Conversion
+- **Status**: Not started/Active/Ended
+- **Duration**: Start and end time
+- **Participants**: Number of participating users
+- **Conversion**: Conversion rate and revenue
+- **Budget**: Budget and actual spending
+
+### Create Campaign
+
+Plan new marketing campaign:
+
+#### Campaign Info
+
+- **Campaign Name**: Theme name
+- **Campaign Type**: Select type
+- **Description**: Detailed explanation
+- **Tags**: For categorization
+
+#### Campaign Duration
+
+- **Start Time**: Campaign start datetime
+- **End Time**: Campaign end datetime
+- **Pre-launch**: Campaign teaser period
+- **Cool-down**: Post-campaign handling period
+
+#### Campaign Rules
+
+- **Participation**: User eligibility
+- **Rewards**: Reward content and rules
+- **Restrictions**: Participation limits
+- **Calculation**: Points, ranking calculations
+
+#### Marketing Materials
+
+- **Campaign Images**: Posters, banners
+- **Campaign Copy**: Promotional content
+- **Social Assets**: Social media shares
+- **Landing Page**: Campaign page link
+
+## Campaign Types
+
+### Acquisition
+
+Attract new user registration:
+
+**Campaign Forms**:
+- New user registration rewards
+- First purchase discount
+- Referral rewards
+- New user exclusive packages
+
+**KPIs**:
+- New user registrations
+- New user conversion rate
+- Customer acquisition cost (CAC)
+- New user quality
+
+### Promotion
+
+Stimulate purchases:
+
+**Campaign Forms**:
+- Limited-time discount
+- Spend threshold discount
+- Buy one get one
+- Bundle offers
+
+**KPIs**:
+- Sales growth
+- Order quantity
+- AOV change
+- ROI
+
+### Retention
+
+Improve user retention:
+
+**Campaign Forms**:
+- Daily check-in rewards
+- Consecutive login bonuses
+- Member day specials
+- Renewal discounts
+
+**KPIs**:
+- User activity
+- Retention rate improvement
+- Churn rate reduction
+- Lifetime value
+
+### Conversion
+
+Promote user payment:
+
+**Campaign Forms**:
+- Trial to paid discount
+- Upgrade package discount
+- First order discount
+- Flash sale
+
+**KPIs**:
+- Payment conversion rate
+- Upgrade conversion rate
+- Average payment amount
+- Paying user growth
+
+## Promotion Channels
+
+### On-site Promotion
+
+Promote within system:
+
+- **Homepage Banner**: Carousel display
+- **Popup**: Login popup reminders
+- **Push Notifications**: In-app messages
+- **Campaign Zone**: Campaign hub page
+
+### Email Promotion
+
+Email marketing:
+
+- **Marketing Emails**: Send campaign emails
+- **Email Templates**: Beautiful templates
+- **Segmented Sending**: Target user groups
+- **Effectiveness Tracking**: Open, click rates
+
+### SMS Promotion
+
+SMS marketing:
+
+- **SMS Notifications**: Send campaign SMS
+- **SMS Templates**: Preset content
+- **Scheduled Sending**: Set send time
+- **Effect Statistics**: Delivery rate
+
+### Social Media
+
+Social platform promotion:
+
+- **Social Sharing**: User shares
+- **Community Operations**: WeChat, QQ groups
+- **KOL Collaboration**: Influencer partnerships
+- **Content Marketing**: Publish content
+
+## User Segmentation
+
+### User Profiling
+
+Segment by characteristics:
+
+- **Basic Attributes**: Age, region, gender
+- **Behavioral**: Activity, usage frequency
+- **Consumption**: Spending, purchase frequency
+- **Lifecycle**: New, active, dormant, churned
+
+### Precision Marketing
+
+Target different segments:
+
+- **New Users**: Welcome, onboarding
+- **Active Users**: Payment conversion, upgrades
+- **High-Value Users**: VIP privileges, exclusives
+- **Dormant Users**: Reactivation, return rewards
+- **Churn Risk**: Retention offers, exclusive service
+
+## Campaign Execution
+
+### Campaign Launch
+
+Officially start:
+
+1. **Final Confirmation**: Check configuration
+2. **Resource Preparation**: Prepare coupons, prizes
+3. **Channel Notification**: Start promotion
+4. **Real-time Monitoring**: Monitor data
+
+### Campaign Monitoring
+
+Real-time progress tracking:
+
+- **Participation Data**: Live participant count
+- **Conversion Data**: Conversion rate, orders
+- **Budget Consumption**: Spending tracking
+- **Anomaly Alerts**: Warning notifications
+
+### Campaign Adjustment
+
+Optimize based on data:
+
+- **Rule Adjustment**: Optimize rules
+- **Budget Adjustment**: Increase/decrease budget
+- **Channel Optimization**: Adjust channels
+- **Material Updates**: Refresh assets
+
+### Campaign End
+
+Wrap-up work:
+
+- **Stop Promotion**: Close channels
+- **Data Settlement**: Statistics
+- **Reward Distribution**: Distribute prizes
+- **Effect Evaluation**: Assess results
+
+## Data Analysis
+
+### Participation Data
+
+Analyze participation:
+
+- **Participants**: Total user count
+- **Participation Rate**: Target user ratio
+- **Channel Mix**: Channel distribution
+- **Time Distribution**: Participation timing
+
+### Conversion Data
+
+Analyze conversion:
+
+- **Conversion Rate**: Participation to purchase
+- **Orders**: Orders generated
+- **Sales**: Revenue generated
+- **AOV**: Average order value
+
+### ROI Analysis
+
+Calculate return on investment:
+
+- **Total Input**: Total campaign cost
+- **Total Output**: Total revenue
+- **ROI**: Return on investment
+- **Break-even**: Time to break-even
+
+### User Analysis
+
+Analyze participants:
+
+- **User Mix**: New vs existing ratio
+- **User Quality**: Retention, repurchase
+- **User Value**: Lifetime value
+- **User Feedback**: Satisfaction
+
+## A/B Testing
+
+### Test Design
+
+Design A/B test:
+
+- **Test Goal**: Clear objective
+- **Test Variable**: Determine variable
+- **Control Group**: Set control
+- **Experiment Group**: Set experiment
+
+### Test Execution
+
+Execute A/B test:
+
+- **Random Assignment**: Random user allocation
+- **Simultaneous Start**: Start together
+- **Data Collection**: Collect test data
+- **Result Analysis**: Analyze results
+
+### Apply Results
+
+Apply findings:
+
+- **Select Approach**: Choose best option
+- **Full Rollout**: Promote to all users
+- **Continuous Optimization**: Keep iterating
+
+## Marketing Automation
+
+### Automated Workflows
+
+Set automated flows:
+
+**Triggers**:
+- User registration
+- First login
+- Subscription expiry
+- Long inactive
+- Purchase complete
+
+**Auto Actions**:
+- Send welcome email
+- Push coupons
+- Send reminders
+- Recommend products
+
+### Lifecycle Marketing
+
+Lifecycle-based automation:
+
+- **Acquisition**: Registration guide, first purchase
+- **Growth**: Usage guide, upgrade recommendation
+- **Maturity**: VIP service, renewal discount
+- **Decline**: Reactivation, retention offers
+- **Churn**: Return rewards, reactivation
+
+## Best Practices
+
+- Define clear goals and KPIs
+- Understand target user needs
+- Design attractive rules
+- Choose right channels
+- Monitor and adjust quickly
+- Analyze data thoroughly
+- Establish marketing SOPs
+
+## Campaign Examples
+
+### Double 11 Sale
+
+**Goal**: Boost sales
+
+**Content**:
+- 50% off sitewide
+- Spend threshold coupons
+- Flash sales
+- Share lottery
+
+**Results**:
+- 300% sales increase
+- 200% new user growth
+- ROI of 3.5
+
+### Referral Campaign
+
+**Goal**: User acquisition
+
+**Content**:
+- Invite friends get coupons
+- First purchase rewards both
+- Referral leaderboard
+
+**Results**:
+- 5000+ new users
+- 40% lower CAC
+- Viral coefficient 1.8
+
+## Next Steps
+
+- [Coupon Management](/admin/commerce/coupons) - Configure coupons
+- [Announcement Management](/admin/commerce/announcements) - Publish announcements
+- [User Management](/admin/users-support/users) - Analyze user data
--- a/docs/admin/commerce/order.md
+++ b/docs/admin/commerce/order.md
@ -0,0 +1,148 @@
+<div v-pre>
+
+# Order Management
+
+View all user orders in the system with support for order status modification and detailed information viewing. This is primarily a read-only order query page, mainly used for order information viewing and exception handling.
+
+## Page Functions
+
+The Order Management page is a simple order query and status management tool, providing the following features:
+
+1. **Order List Viewing** - Display all orders in a table
+2. **Status Modification** - Modify orders with specific statuses
+3. **Amount Details** - View price breakdown via hover card
+4. **Filter & Search** - Quickly locate target orders
+
+## Table Column Description
+
+### Order Number
+System-generated unique order identifier for order tracking and querying.
+
+### Type
+Business type of the order:
+- **New Purchase** - User's first purchase of a plan
+- **Renewal** - Extends time for existing subscription
+- **Reset Traffic** - Separately purchase traffic reset
+- **Recharge** - Recharge account balance
+
+### Subscribe
+Displays associated product information:
+- New Purchase/Renewal/Reset Traffic orders: Shows `Product Name × Quantity`
+- Recharge orders: Shows "Recharge"
+
+### Amount
+Total order amount, click to view detailed price breakdown.
+
+### User
+Order user information, click to view user details.
+
+### Update Time
+Last order status change time.
+
+### Status
+Current order status, some statuses support modification:
+- **Pending** (Orange) - Modifiable
+- **Paid** (Green) - Read-only
+- **Cancelled** (Gray) - Modifiable
+- **Closed** (Red) - Modifiable
+- **Completed** (Green) - Read-only
+
+## Core Functions
+
+### 1. Order Status Modification
+
+**Modifiable Status**: Pending, Cancelled, Closed
+
+Steps:
+1. Find the order to modify
+2. Click the dropdown selector in status column
+3. Select new status
+4. System auto-saves and refreshes
+
+**Non-modifiable Status**: Paid, Completed
+
+These two statuses display as read-only badges and cannot be modified.
+
+**Common Operations**:
+- Pending → Paid: Manually mark payment complete
+- Pending → Cancelled: Cancel timeout orders
+- Pending → Closed: Close abnormal orders
+- Cancelled → Pending: Restore misoperated orders
+
+### 2. View Amount Details
+
+Hover mouse over amount to display complete price breakdown:
+
+**Price Composition**:
+- Subscribe Price - Product original price
+- Discount - Bulk purchase discount
+- Coupon Discount - Coupon used
+- Fee Amount - Payment platform fee
+- Total - Actual payment amount
+
+**Other Information**:
+- Trade No - Third-party payment transaction number
+- Payment Method - Payment platform used
+
+### 3. Filter and Search
+
+**Status Filter**: Select order status to view corresponding orders
+
+**Product Filter**: Select product plan to view related orders
+
+**User Filter**: Input user ID to view all orders for that user
+
+**Keyword Search**: Input order number for exact search
+
+Multiple filter conditions can be used simultaneously.
+
+## Usage Scenarios
+
+### Scenario 1: Manually Mark Payment Complete
+
+User payment successful but order status not auto-updated:
+
+1. Search for order using order number
+2. Click amount to view trade number
+3. Confirm payment received on third-party platform
+4. Click status dropdown and select "Paid"
+5. System auto-processes and allocates benefits
+
+### Scenario 2: Cancel Timeout Orders
+
+Regularly clean up timeout unpaid orders:
+
+1. Filter "Pending" status
+2. Check update time to determine timeout
+3. Click status and select "Cancelled"
+4. Order marked as cancelled
+
+### Scenario 3: User Order Query
+
+User inquires about order issue:
+
+1. Input user ID in user filter
+2. View all orders for that user
+3. Find corresponding order and check status
+4. Click amount to view detailed information
+5. Handle issue based on situation
+
+### Scenario 4: Product Sales Query
+
+View sales for a specific product:
+
+1. Select plan in product filter
+2. View all orders for that product
+3. Check order counts by different statuses
+4. Analyze sales trends
+
+## Important Notes
+
+1. **Partial Status Modification** - Only Pending, Cancelled, Closed can be modified
+2. **Paid Cannot Change** - Paid and Completed orders cannot be modified
+3. **Modify Carefully** - Status changes trigger benefit updates
+4. **Verify Payment** - Confirm actual payment before marking as Paid
+5. **Price Details** - Verify price calculation via amount hover card
+6. **User Issues** - Use user filter to quickly query user orders
+
+</div>
--- a/docs/admin/commerce/orders.md
+++ b/docs/admin/commerce/orders.md
@ -0,0 +1,291 @@
+# Order Management
+
+The Order Management module processes user purchase orders, which is the core of system revenue and business processes.
+
+## Overview
+
+### Order List
+
+View and manage all orders:
+
+- **Order Number**: Unique order identifier
+- **User Info**: Buyer name and email
+- **Product Info**: Purchased product name and specs
+- **Amount**: Paid amount and original price
+- **Payment Method**: Alipay/WeChat/Crypto, etc.
+- **Status**: Pending/Paid/Completed/Canceled/Refunded
+- **Created**: Order creation time
+- **Paid**: Payment completion time
+
+### Order Filtering
+
+Quickly find specific orders:
+
+- **By Status**: Pending/Paid/Completed, etc.
+- **By Date Range**: Today/This week/This month/Custom
+- **By Payment**: Filter by payment channel
+- **By User**: View specific user's orders
+- **By Product**: View specific product sales
+- **By Amount**: Filter by order amount range
+
+### Create Order
+
+Manually create order for user:
+
+#### Select User
+
+- Search existing user
+- Or create new user
+- Fill in user basic info
+
+#### Select Product
+
+- Choose package from product list
+- Set purchase quantity
+- View price details
+
+#### Discount Settings
+
+- Apply coupons
+- Manual discount
+- Balance deduction
+- Points deduction
+
+#### Order Notes
+
+- Add order notes
+- Mark special orders
+- Record communications
+
+### Order Details
+
+View complete order information:
+
+#### Basic Info
+
+- Order number and creation time
+- User info and contact
+- Product details and specs
+- Order amount breakdown
+
+#### Payment Info
+
+- Payment method and transaction number
+- Payment time and status
+- Third-party platform order number
+- Payment proof (if any)
+
+#### Order Status
+
+- Current order status
+- Status change history
+- Operation log records
+
+#### After-sales Info
+
+- Refund request records
+- Customer service communications
+- Issue resolution progress
+
+## Order Operations
+
+### Order Review
+
+Review pending orders:
+
+- **Auto Review**: Online payment auto-complete
+- **Manual Review**: Bank transfer needs confirmation
+- **Approve**: Activate service and notify user
+- **Reject**: Reject order with reason
+
+### Order Processing
+
+Process paid orders:
+
+- **Auto Activation**: Auto-activate after payment
+- **Manual Activation**: Admin manually activates
+- **Delayed Activation**: Set future activation time
+- **Batch Processing**: Process multiple orders
+
+### Order Cancellation
+
+Cancel unpaid or abnormal orders:
+
+- **User Cancel**: User actively cancels
+- **Timeout Cancel**: Not paid within time limit
+- **Admin Cancel**: Admin manually cancels
+- **System Cancel**: Auto-cancel on anomaly detection
+
+### Order Refund
+
+Process refund requests:
+
+#### Refund Review
+
+- Review refund reason
+- Evaluate refund validity
+- Decide whether to approve
+
+#### Refund Processing
+
+- **Full Refund**: Return full order amount
+- **Partial Refund**: Return partial amount
+- **Refund to Balance**: Refund to user account
+- **Original Return**: Refund to original payment method
+
+#### Post-refund
+
+- Revoke activated services
+- Update user account status
+- Record refund reason and result
+
+## Payment Management
+
+### Payment Methods
+
+Support multiple payment channels:
+
+- **Alipay**: QR code/Face-to-face payment
+- **WeChat Pay**: QR code/H5 payment
+- **Cryptocurrency**: USDT/BTC, etc.
+- **Bank Transfer**: Offline transfer
+- **Balance Payment**: Use account balance
+
+### Payment Config
+
+Configure payment channel parameters:
+
+- **Merchant Info**: Merchant ID/Key
+- **Payment Callback**: Async notification URL
+- **Payment Limits**: Min/Max payment amount
+- **Transaction Fees**: Fee rate and bearer
+
+### Payment Callback
+
+Handle payment platform callbacks:
+
+- **Verify Signature**: Verify callback data authenticity
+- **Update Status**: Update order payment status
+- **Activate Service**: Auto-activate purchased service
+- **Send Notification**: Notify user of successful payment
+
+## Order Statistics
+
+### Sales Statistics
+
+Analyze order sales data:
+
+- **Order Count**: Total orders and growth trend
+- **Order Amount**: Total sales and average order value
+- **Conversion Rate**: Order conversion analysis
+- **Repurchase Rate**: User repurchase situation
+
+### Payment Statistics
+
+Analyze payment method usage:
+
+- **Payment Method Share**: Alipay/WeChat share
+- **Payment Success Rate**: Success rate per channel
+- **Payment Duration**: Time from order to payment
+
+### Product Statistics
+
+Analyze product sales:
+
+- **Best Sellers**: Top-selling products
+- **Revenue Contribution**: Revenue share per product
+- **Stock Alert**: Low-stock products
+
+## Order Export
+
+Export order data for analysis:
+
+### Export Options
+
+- **Export Format**: Excel/CSV/PDF
+- **Export Range**: All/Filtered results
+- **Export Fields**: Custom export fields
+- **Data Masking**: Mask sensitive information
+
+### Export Purposes
+
+- **Financial Reconciliation**: Verify revenue data
+- **Data Analysis**: Conduct business analysis
+- **Report Generation**: Generate sales reports
+- **Backup Archive**: Data backup and archive
+
+## Abnormal Order Handling
+
+### Anomaly Types
+
+- **Duplicate Payment**: Same order paid multiple times
+- **Payment Not Received**: Paid but system didn't receive
+- **Amount Mismatch**: Payment amount differs from order
+- **Malicious Orders**: Fraud or fake orders
+
+### Handling Process
+
+1. **Identify Anomaly**: System auto-marks or manual detection
+2. **Investigate**: Check payment records and logs
+3. **Contact User**: Communicate to confirm situation
+4. **Resolution**: Refund/Resend/Manual handling
+5. **Record**: Document process and result
+
+## Order Security
+
+### Risk Control
+
+- **Identity Verification**: Require user verification
+- **Payment Limits**: Set per-transaction limits
+- **Anomaly Detection**: Detect abnormal payment behavior
+- **Blacklist**: Block malicious users
+
+### Anti-fraud
+
+- **Rate Limiting**: Limit order frequency
+- **IP Detection**: Detect abnormal IP behavior
+- **Device Fingerprint**: Identify duplicate devices
+- **Manual Review**: Review suspicious orders
+
+## Best Practices
+
+- Process pending orders promptly
+- Ensure payment callback stability
+- Regularly reconcile financial data
+- Respond quickly to refund requests
+- Maintain complete operation logs
+- Analyze order data to optimize operations
+
+## Troubleshooting
+
+### Payment Successful But Not Received
+
+Steps:
+
+1. Check payment platform order status
+2. Review payment callback logs
+3. Manually trigger callback processing
+4. Contact payment platform support
+
+### Cannot Cancel Order
+
+Possible reasons:
+
+1. Order already paid
+2. Service already activated
+3. Insufficient system permissions
+
+### Refund Failed
+
+Check:
+
+1. Is refund API configured correctly
+2. Is account balance sufficient
+3. Is refund info complete
+4. Has refund deadline passed
+
+## Next Steps
+
+- [Coupon Management](/admin/commerce/coupons) - Create promotions
+- [User Management](/admin/users-support/users) - Manage user accounts
+- [Financial Statistics](/admin/logs/balance) - View transaction details
--- a/docs/admin/commerce/product.md
+++ b/docs/admin/commerce/product.md
@ -0,0 +1,203 @@
+<div v-pre>
+
+# Product Management
+
+Manage subscription plan products in the system, including pricing, traffic quotas, and node permissions. Products are the basic units that users purchase.
+
+## Table Column Description
+
+### Show
+Switch button to control whether the product displays on the frontend. When off, users cannot see this product.
+
+### Sell
+Switch button to control whether the product is available for purchase. Can display without selling (announcement mode).
+
+### Name
+Product plan name.
+
+### Unit Price
+Displays price and billing cycle, format like `$10/Month`.
+
+### Replacement
+Promotional price or one-time purchase price.
+
+### Traffic
+Traffic quota per cycle, 0 displays as "Unlimited".
+
+### Device Limit
+Simultaneous device connection limit, 0 displays as "Unlimited".
+
+### Inventory
+Remaining quantity available for sale, 0 displays as "Unlimited".
+
+### Quota
+Total sales limit, 0 displays as "Unlimited".
+
+### Language
+Language restriction for the product, used for multilingual sites.
+
+### Sold
+Quantity sold statistics.
+
+## Table Operations
+
+### Edit
+Opens side drawer form to modify product information.
+
+### Delete
+Deletes product (requires confirmation), products with existing subscriptions may not be deletable.
+
+### Copy
+Quickly duplicates product to create new plan, automatically set to not showing and not selling.
+
+### Batch Delete
+Deletes multiple selected products.
+
+### Drag & Drop Sort
+Drag product rows to adjust display order, affects frontend display order.
+
+## Product Form
+
+Form contains three tabs:
+
+### Basic Tab
+
+**Name and Language**:
+- **Name** (Required) - Product plan name
+- **Language** (Optional) - Language restriction, e.g. `zh-CN` or `en`
+
+**Traffic and Limits**:
+- **Traffic** - Traffic quota per cycle (GB), 0 = unlimited
+- **Speed Limit** - Bandwidth limit (Mbps), 0 = no limit
+- **Device Limit** - Simultaneous online devices, 0 = unlimited
+
+**Inventory and Quota**:
+- **Inventory** - Remaining quantity for sale, 0 = unlimited
+- **Quota** - Total sales limit, 0 = unlimited
+
+**Product Description** (JSON Editor):
+```json
+{
+  "description": "Product description text",
+  "features": [
+    {
+      "type": "default",
+      "icon": "uil:shield-check",
+      "label": "Feature description"
+    }
+  ]
+}
+```
+
+### Pricing Tab
+
+**Basic Pricing**:
+- **Unit Price** (Required) - Base price
+- **Billing Cycle** (Required) - Options:
+  - NoLimit (No time limit)
+  - Year
+  - Month
+  - Day
+  - Hour
+  - Minute
+- **Replacement** - Promotional price
+- **Reset Cycle** - Traffic reset method:
+  - No reset
+  - Reset on 1st of month
+  - Monthly reset
+  - Annual reset
+
+**Bulk Discounts**:
+Dynamic array supporting multiple discount tiers:
+- **Quantity** - Number of billing cycles
+- **Discount** - Discount percentage (1-100%)
+- **Price** - Discounted price
+
+Auto-calculation: Modify any two values, the third auto-calculates.
+
+**Deduction Settings**:
+- **Deduction Ratio** - Node traffic multiplier (0-100%), leave blank for auto
+- **Renewal Reset** - Switch, whether to reset traffic on renewal
+- **Purchase with Discount** - Switch, whether to allow coupon usage
+
+### Servers Tab
+
+**Node Tag Selection**:
+Accordion-style list showing all tags and their nodes:
+- Check tags to automatically include all nodes under that tag
+- Shows node count
+- Expand to view node details (name, address, protocol)
+
+**Individual Node Selection**:
+Select nodes without tags:
+- Check nodes individually
+- Shows node name, address:port, protocol
+
+## Usage Scenarios
+
+### Scenario 1: Create Basic Monthly Plan
+
+**Basic Tab**:
+- Name: Standard Monthly
+- Traffic: 100 GB
+- Speed Limit: 0 (no limit)
+- Device Limit: 3
+- Inventory: 0 (unlimited)
+
+**Pricing Tab**:
+- Unit Price: 30
+- Billing Cycle: Month
+- Reset Cycle: Monthly reset
+- Bulk Discounts:
+  - 3 months, 10% discount, $81
+  - 6 months, 15% discount, $153
+  - 12 months, 20% discount, $288
+
+**Servers Tab**:
+- Check "Basic Nodes" tag
+
+### Scenario 2: Create Traffic Package
+
+**Basic Tab**:
+- Name: 500GB Traffic Pack
+- Traffic: 500 GB
+- Device Limit: 0 (unlimited)
+
+**Pricing Tab**:
+- Unit Price: 50
+- Billing Cycle: NoLimit
+- Reset Cycle: No reset
+- Renewal Reset: Off
+
+**Servers Tab**:
+- Check all high-speed node tags
+
+### Scenario 3: Create Premium Annual Plan
+
+**Basic Tab**:
+- Name: Premium Annual
+- Traffic: 0 (unlimited)
+- Speed Limit: 200 Mbps
+- Device Limit: 10
+
+**Pricing Tab**:
+- Unit Price: 300
+- Billing Cycle: Year
+- Reset Cycle: Monthly reset
+- Renewal Reset: On
+
+**Servers Tab**:
+- Check all node tags
+
+## Important Notes
+
+1. **Display Control**: New products default to not showing and not selling, must manually enable
+2. **Node Configuration**: Must configure nodes, otherwise users cannot use
+3. **Bulk Discounts**: After modifying unit price or cycle, discount prices auto-recalculate
+4. **Inventory Quota**: 0 means unlimited, non-zero limits sales quantity
+5. **Language Restriction**: Leave blank for all languages
+6. **Drag Sort**: Sorting saves immediately and affects frontend display
+7. **Copy Function**: Copied products don't auto-publish
+8. **Sold Products**: Modifying sold product configurations affects existing subscriptions
+
+</div>
--- a/docs/admin/dashboard.md
+++ b/docs/admin/dashboard.md
@ -0,0 +1,225 @@
+# Dashboard
+
+Dashboard is the homepage of the admin panel, displaying real-time system core data and operational status.
+
+## Page Overview
+
+Dashboard consists of three main areas:
+
+1. **Key Metrics Cards** - 6 core business indicators
+2. **Statistics Charts** - Revenue, user, and traffic statistics
+3. **Sponsor Display** - Shows PPanel sponsors
+
+## Key Metrics Cards
+
+Top section displays 6 key business metric cards:
+
+### Online Users
+- **Display**: Current number of online users
+- **Subtitle**: "Currently Online"
+- **Click Action**: Jump to `/dashboard/user` user management page
+- **Icon**: Blue user icon
+
+### Today's Traffic
+- **Display**: Today's total upload + download traffic
+- **Subtitle**: Shows upload/download traffic breakdown
+  - ↑ Upload traffic
+  - ↓ Download traffic
+- **Icon**: Purple exchange icon
+- **Format**: Auto-converts to appropriate units (KB/MB/GB/TB)
+
+### Monthly Traffic
+- **Display**: This month's total upload + download traffic
+- **Subtitle**: Shows monthly upload/download traffic breakdown
+- **Icon**: Orange cloud data icon
+- **Format**: Auto-converts to appropriate units
+
+### Total Servers
+- **Display**: Online servers + Offline servers
+- **Subtitle**: Shows online/offline server count breakdown
+  - "Online X Offline Y"
+- **Click Action**: Jump to `/dashboard/servers` server management page
+- **Icon**: Green server icon
+
+### Pending Tickets
+- **Display**: Number of tickets awaiting admin reply
+- **Subtitle**: "Pending"
+- **Click Action**: Jump to `/dashboard/ticket` ticket management page
+- **Icon**: Red ticket icon
+
+### System Version Info
+- **Display**:
+  - Backend service version number
+  - Web admin version number
+  - Version update status
+- **Operations**:
+  - Check for updates
+  - One-click update (if new version available)
+  - Restart system
+  - View update logs
+
+::: tip Tip
+Click cards with links to quickly jump to the corresponding management page.
+:::
+
+## Statistics Charts
+
+### Revenue Statistics Chart
+
+Displays system revenue data with three time dimensions:
+
+**Time Dimensions**:
+- **Today**: Today's revenue data
+- **Month**: Daily revenue trend for this month
+- **Total**: Historical cumulative revenue data
+
+**Today's Data** - Pie Chart:
+- **New Purchase**: Revenue from new user orders
+- **Renewal**: Revenue from renewal orders
+- **Center Number**: Today's total revenue
+
+**Month Data** - Bar Chart:
+- X-axis: Daily dates
+- Y-axis: Revenue amount
+- Shows daily revenue bars for the month
+- Hover to view detailed data
+
+**Total Data** - Area Chart:
+- **New Purchase Orders**: Cumulative new purchase order count
+- **Renewal Orders**: Cumulative renewal order count
+- **Total Orders**: Total cumulative orders
+- Area chart showing long-term trends
+
+**Bottom Summary**:
+- New purchase amount / order count
+- Renewal amount / order count
+- Total amount / total order count
+
+### User Statistics Chart
+
+Displays user-related data with three time dimensions:
+
+**Time Dimensions**:
+- **Today**: Today's user data
+- **Month**: Daily user trend for this month
+- **Total**: Historical cumulative user data
+
+**Today's Data** - Pie Chart:
+- **Register**: Today's new registered users
+- **New Purchase**: Today's first-time buyers
+- **Repurchase**: Today's renewal users
+- **Center Number**: Today's total users (register + new purchase + repurchase)
+
+**Month Data** - Bar Chart:
+- X-axis: Daily dates
+- Y-axis: User count
+- Three colored bars:
+  - Registered users (blue)
+  - New purchase users (green)
+  - Renewal users (orange)
+
+**Total Data** - Area Chart:
+- **Registered Users**: Cumulative registration trend
+- **New Purchase Users**: Cumulative new purchase trend
+- **Renewal Users**: Cumulative renewal trend
+- Three area curves showing long-term changes
+
+**Bottom Summary**:
+- Total registered users
+- Total new purchase users
+- Total renewal users
+
+### Traffic Ranking Chart
+
+Displays node or user traffic usage ranking:
+
+**Time Toggle** (top-right tabs):
+- **Today**: Today's traffic ranking
+- **Yesterday**: Yesterday's traffic ranking
+
+**Type Selection** (dropdown):
+- **Node Traffic (Nodes)**: Shows server node traffic consumption ranking
+- **User Traffic (Users)**: Shows user traffic usage ranking
+
+**Chart Display** - Horizontal Bar Chart:
+- Y-axis: Ranking number (1, 2, 3...)
+- X-axis: Traffic size (auto-converts units)
+- Bars: Traffic size visualization
+- Bar Labels: Shows node name or user ID
+
+**Interactions**:
+- Hover: Display detailed traffic data
+- Node Mode: Shows node name and traffic
+- User Mode: Shows user subscription details (ID, package, expiry, etc.)
+
+**Empty State**:
+- Shows empty state message when no data
+
+::: tip Traffic Calculation
+Traffic = Upload traffic + Download traffic, automatically converted to KB/MB/GB/TB units.
+:::
+
+## Sponsor Display
+
+Bottom of page shows sponsors supporting the PPanel project:
+
+**Display Content**:
+- Sponsor logo
+- Sponsor name
+- Brief description
+
+**Data Source**:
+- Fetches latest sponsor list from GitHub repository
+- CDN accelerated access
+- Auto-filters expired sponsors
+
+**Interaction**:
+- Click card to visit sponsor website
+- Opens in new window
+
+::: tip Support PPanel
+Sponsoring helps PPanel continue releasing updates! Click sponsor cards to visit their services.
+:::
+
+## Data Refresh
+
+- **Auto Refresh**: Page data updates automatically based on query configuration
+- **Manual Refresh**: Refresh browser to immediately update all data
+- **Real-time**: Key metrics fetch latest data in real-time
+
+## Usage Recommendations
+
+1. **Daily Review**: Check Dashboard daily to understand operational status
+2. **Monitor Metrics**: Focus on real-time indicators like online users and pending tickets
+3. **Trend Analysis**: Regularly review chart trends to analyze business changes
+4. **Handle Anomalies**: Click cards to jump and handle issues when detecting data anomalies
+5. **Version Updates**: Update system promptly when new version is available
+
+## Troubleshooting
+
+### Inaccurate Data?
+
+1. Refresh browser page to re-fetch data
+2. Check if server time is correct
+3. Review system logs for errors
+
+### Chart Showing Empty?
+
+Possible causes:
+- No data in the time period
+- Data statistics service issue
+- Try refreshing the page
+
+### Sponsors Not Showing?
+
+Possible causes:
+- Network connection issue, cannot access CDN
+- No valid sponsors in current period
+- Browser blocking external resources
+
+## Next Steps
+
+- [User Management](/admin/users-support/users) - View user details and traffic usage
+- [Ticket Management](/admin/users-support/tickets) - Handle pending tickets
+- [Server Management](/admin/maintenance/servers) - Manage server nodes
+- [Order Management](/admin/commerce/orders) - View revenue and order details
--- a/docs/admin/logs/balance.md
+++ b/docs/admin/logs/balance.md
@ -0,0 +1,136 @@
+<div v-pre>
+
+# Balance Log
+
+View user balance change records including recharges, consumption, rewards, and all balance operations.
+
+## Table Column Description
+
+### User
+User with balance change (clickable for details).
+
+### Amount
+Balance change amount:
+- Positive for increase
+- Negative for decrease
+
+### Order No.
+Associated order number (clickable for order details).
+
+### Balance
+User balance after change.
+
+### Type
+Balance change type (displayed as Badge):
+
+**Traffic Reset (23x)**:
+- Auto Reset (231)
+- Advance Reset (232)
+- Paid Reset (233)
+
+**Recharge/Withdrawal (32x)**:
+- Recharge (321)
+- Withdraw (322)
+- Payment (323)
+- Refund (324)
+- Reward (325)
+- Admin Adjust (326)
+
+**Purchase (33x)**:
+- Purchase (331)
+- Renewal (332)
+- Refund (333)
+- Withdraw (334)
+- Admin Adjust (335)
+
+**Adjustment (34x)**:
+- Increase (341)
+- Reduce (342)
+
+### Time
+Balance change time.
+
+## Filter Functions
+
+### Date Filter
+Select date to view balance records, defaults to today.
+
+### User ID Filter
+Input user ID to view that user's balance changes.
+
+## Usage Scenarios
+
+### Scenario 1: View Today's Recharges
+
+1. Shows today's balance records by default
+2. Filter by "Recharge" type
+3. Calculate total recharge amount
+4. Analyze recharging users
+
+### Scenario 2: Track User Balance
+
+**View User Consumption**:
+1. Filter by user ID
+2. View all balance changes
+3. Analyze spending habits
+4. Verify billing accuracy
+
+### Scenario 3: Investigate Abnormal Transactions
+
+**Check Large Amounts**:
+1. Browse balance records
+2. Focus on large recharges/expenses
+3. Click order number for details
+4. Verify transaction legitimacy
+
+### Scenario 4: Admin Balance Adjustment
+
+**Verify After Manual Adjustment**:
+1. Filter "Admin Adjust" type
+2. View adjustment records
+3. Verify adjustment correctness
+4. Notify user (if needed)
+
+## Balance Type Description
+
+### Recharge Related
+- **Recharge**: User recharges via payment channel
+- **Reward**: Referral reward, event reward
+- **Refund**: Order refund to balance
+
+### Consumption Related
+- **Purchase**: Buy new plan
+- **Renewal**: Renew existing plan
+- **Payment**: Other payment operations
+
+### Adjustment Related
+- **Admin Adjust**: Manually increase or decrease balance
+- **Withdraw**: User requests withdrawal (deducts balance)
+
+## Financial Reconciliation
+
+### Daily Reconciliation
+Check daily:
+1. Total recharge matches payment platform
+2. Total consumption matches order total
+3. No abnormal large changes
+4. Refund records complete
+
+### Monthly Reconciliation
+Monthly summary:
+1. Total recharge amount
+2. Total consumption amount
+3. Total balance change
+4. Transaction fee expenses
+
+## Important Notes
+
+1. **Log Retention**: Retention time per system config
+2. **Amount Sign**: Pay attention to positive/negative meaning
+3. **Order Association**: Can trace source with order number
+4. **Type Recognition**: Quickly identify operations by type code
+5. **Balance Snapshot**: Records balance after change
+6. **Admin Operations**: Admin adjustments are recorded
+7. **Regular Reconciliation**: Recommended daily financial verification
+
+</div>
--- a/docs/admin/logs/commission.md
+++ b/docs/admin/logs/commission.md
@ -0,0 +1,80 @@
+<div v-pre>
+
+# Commission Log
+
+View user referral commission records including commission sources and amounts.
+
+## Table Column Description
+
+### User
+User receiving commission (clickable for details).
+
+### Amount
+Commission amount.
+
+### Order No.
+Order that generated commission (clickable for order details).
+
+### Type
+Commission type (displayed as Badge):
+- Referral commission
+- Cashback commission
+- Reward commission
+- Other types
+
+### Time
+Commission issued time.
+
+## Filter Functions
+
+### Date Filter
+Select date to view commission records, defaults to today.
+
+### User ID Filter
+Input user ID to view that user's commission records.
+
+## Usage Scenarios
+
+### Scenario 1: View Today's Commissions
+
+1. Shows today's commission records by default
+2. Calculate total commission amount
+3. Analyze referral effectiveness
+
+### Scenario 2: Track User Commissions
+
+**View Referral Earnings**:
+1. Filter by user ID
+2. View all commission records
+3. Calculate cumulative earnings
+4. Verify commission accuracy
+
+### Scenario 3: Analyze Referral Performance
+
+**Calculate Referral Data**:
+1. Select time range
+2. View commission records
+3. Identify top referrers
+4. Optimize referral strategy
+
+## Commission Rules
+
+### Commission Sources
+- **Referral Commission**: Generated from referred user purchases
+- **Cashback Commission**: Cashback from own purchases
+- **Reward Commission**: Activity rewards
+
+### Commission Calculation
+- Percentage of order amount
+- Real-time or periodic settlement
+- Linked to original order
+
+## Important Notes
+
+1. **Log Retention**: Retention per system config
+2. **Order Association**: Can trace commission source
+3. **Type Recognition**: Quick categorization by type
+4. **Real-time Stats**: View referral effectiveness
+5. **Regular Reconciliation**: Verify commission issuance accuracy
+
+</div>
--- a/docs/admin/logs/email.md
+++ b/docs/admin/logs/email.md
@ -0,0 +1,149 @@
+<div v-pre>
+
+# Email Log
+
+View all email records sent by the system including sending status and content.
+
+## Table Column Description
+
+### Platform
+Email sending platform (displayed as Badge):
+- SMTP
+- SendGrid
+- Mailgun
+- AWS SES
+- Other email providers
+
+### To
+Recipient email address.
+
+### Subject
+Email subject.
+
+### Content
+Email content (displayed as JSON):
+- Plain text content
+- HTML content
+- Template variables
+- Max width 480px
+
+### Status
+Email sending status (displayed as Badge):
+- **Sent** (Green) - Successfully sent
+- **Failed** (Red) - Send failed
+- **Unknown** (Gray) - Unknown status
+
+### Time
+Email sending time.
+
+## Filter Functions
+
+### Keyword Search
+Search recipient address or email subject.
+
+### Date Filter
+Select date to view email records, defaults to today.
+
+## Usage Scenarios
+
+### Scenario 1: View Today's Emails
+
+1. Shows today's email records by default
+2. Check sending quantity
+3. Check sending status
+4. Calculate success rate
+
+### Scenario 2: Investigate Send Failures
+
+**Check Failed Emails**:
+1. Filter "Failed" status
+2. View recipient addresses
+3. Check email content
+4. Analyze failure reasons
+5. Resend or fix configuration
+
+### Scenario 3: Verify Email Content
+
+**Check Email Templates**:
+1. Search specific subject
+2. View email content
+3. Verify variable replacement
+4. Confirm format correctness
+
+### Scenario 4: Track User Emails
+
+**View User Received Emails**:
+1. Search user email
+2. View all emails
+3. Confirm delivery
+4. Verify email types
+
+## Email Types
+
+### System Emails
+- Registration verification
+- Password reset
+- Login verification code
+- Account notifications
+
+### Marketing Emails
+- Promotional emails
+- Activity notifications
+- Offer information
+- Product updates
+
+### Transactional Emails
+- Order confirmation
+- Payment success
+- Invoice notification
+- Expiration reminder
+
+## Sending Monitoring
+
+### Success Rate Monitoring
+Watch metrics:
+- Daily total sent
+- Send success rate
+- Failure rate trends
+- Platform-specific performance
+
+### Exception Handling
+When issues found:
+1. Check SMTP configuration
+2. Verify email provider status
+3. Check rate limits
+4. Review error logs
+
+## Email Content Description
+
+### JSON Format
+Content field contains:
+```json
+{
+  "text": "Plain text content",
+  "html": "<p>HTML content</p>",
+  "variables": {
+    "username": "Username",
+    "code": "Verification code"
+  }
+}
+```
+
+### Variable Replacement
+- {{username}}: Username
+- {{code}}: Verification code
+- {{link}}: Link address
+- {{expire}}: Expiration time
+
+## Important Notes
+
+1. **Log Retention**: Retention per system config
+2. **Content Truncation**: Long content may be truncated
+3. **JSON Display**: Content shown as JSON format
+4. **Platform Recognition**: Identify sending channel by platform field
+5. **Status Monitoring**: Watch for failed send records
+6. **Privacy Protection**: Email content may contain sensitive info
+7. **Regular Checks**: Daily sending status review
+8. **Quota Management**: Mind email provider quota limits
+
+</div>
--- a/docs/admin/logs/gift.md
+++ b/docs/admin/logs/gift.md
@ -0,0 +1,129 @@
+<div v-pre>
+
+# Gift Log
+
+View traffic, duration, balance gift records including gift sources and remarks.
+
+## Table Column Description
+
+### User
+User receiving gift (clickable for details).
+
+### Subscribe
+Associated subscription ID (clickable for subscription details).
+
+### Order No.
+Associated order number (clickable for order details).
+
+### Amount
+Gift amount (shown for balance gifts).
+
+### Balance
+User balance after gift.
+
+### Type
+Gift type (displayed as Badge):
+- Traffic gift
+- Duration gift
+- Balance gift
+- Activity gift
+- Admin gift
+
+### Remark
+Gift remark description.
+
+### Time
+Gift time.
+
+## Filter Functions
+
+### Date Filter
+Select date to view gift records, defaults to today.
+
+### User ID Filter
+Input user ID to view that user's gift records.
+
+## Usage Scenarios
+
+### Scenario 1: View Today's Gifts
+
+1. Shows today's gift records by default
+2. Calculate gift quantity
+3. Analyze gift costs
+
+### Scenario 2: Track User Gifts
+
+**View User Received**:
+1. Filter by user ID
+2. View all gift records
+3. Verify gifts credited
+4. Check gift sources
+
+### Scenario 3: Verify Activity Gifts
+
+**Verify Activity Distribution**:
+1. Filter by activity time
+2. View gift records
+3. Check distribution quantity
+4. Verify remark information
+
+### Scenario 4: Admin Gift Records
+
+**View Manual Gifts**:
+1. Filter "Admin Gift" type
+2. View gift records
+3. Verify operation correctness
+4. Check remark reasons
+
+## Gift Type Description
+
+### Traffic Gift
+- Gift traffic package
+- Increase subscription traffic
+- Shown in subscription details
+
+### Duration Gift
+- Extend subscription time
+- Add valid days
+- Shown in subscription details
+
+### Balance Gift
+- Gift account balance
+- Can be used to buy plans
+- Shows amount and balance
+
+### Activity Gift
+- Marketing activity rewards
+- Batch distribution
+- With activity remarks
+
+### Admin Gift
+- Manual gift operation
+- Requires reason remark
+- For compensation or rewards
+
+## Cost Analysis
+
+### Gift Statistics
+Daily/monthly stats:
+1. Total traffic gifted
+2. Total days gifted
+3. Total balance gifted
+4. Statistics by type
+
+### Effect Evaluation
+- User retention after gifts
+- User payment after gifts
+- ROI analysis
+
+## Important Notes
+
+1. **Log Retention**: Retention per system config
+2. **Subscription Association**: Traffic and duration gifts linked to subscriptions
+3. **Balance Records**: Balance gifts record amount changes
+4. **Remark Important**: Manual gifts must have remarks
+5. **Type Recognition**: Distinguish gift sources by type
+6. **Cost Statistics**: Regularly analyze gift costs
+7. **Prevent Abuse**: Watch for abnormally large gifts
+
+</div>
--- a/docs/admin/logs/login.md
+++ b/docs/admin/logs/login.md
@ -0,0 +1,93 @@
+<div v-pre>
+
+# Login Log
+
+View user login records including login methods, IP addresses, and device information.
+
+## Table Column Description
+
+### User
+Logged in user, displays:
+- Login method Badge (Email/Phone/Google etc.)
+- User ID (clickable for details)
+
+### IP Address
+Login IP address (clickable to view IP info).
+
+### User Agent
+User device and browser information:
+- Hover to show full content
+- Truncated to avoid excessive length
+
+### Success Status
+Whether login succeeded:
+- **Success** (Green Badge)
+- **Failed** (Red Badge)
+
+### Time
+Login time.
+
+## Filter Functions
+
+### Date Filter
+Select date to view login records, defaults to today.
+
+### User ID Filter
+Input user ID to view that user's login records.
+
+## Usage Scenarios
+
+### Scenario 1: View Today's Logins
+
+1. Shows today's login records by default
+2. Check login frequency
+3. Analyze active users
+
+### Scenario 2: Investigate Abnormal Logins
+
+**Check Failed Logins**:
+1. Filter failed login records
+2. View IP addresses
+3. Analyze failure reasons
+4. Ban IPs if necessary
+
+**Check Remote Logins**:
+1. View user login IPs
+2. Click IP to view geolocation
+3. Compare with historical locations
+4. Notify user if anomalies found
+
+### Scenario 3: Track User Logins
+
+**View Specific User**:
+1. Filter by user ID
+2. View login history
+3. Analyze login devices
+4. Verify account security
+
+## Security Monitoring
+
+### Abnormal Patterns
+Watch for:
+- High volume of failed logins in short time
+- Multiple accounts from same IP
+- Logins from unusual countries/regions
+- Logins from rare device types
+
+### Protection Measures
+When anomalies detected:
+1. Temporarily ban IP
+2. Force user password reset
+3. Send security notification
+4. Enable two-factor authentication
+
+## Important Notes
+
+1. **Log Retention**: Auto-cleaned per system config
+2. **IP Query**: Click IP to view geolocation
+3. **User Agent**: Contains OS and browser info
+4. **Privacy Protection**: Sensitive info only for admins
+5. **Failed Records**: Focus on failed login anomalies
+6. **Regular Checks**: Recommended daily login review
+
+</div>
--- a/docs/admin/logs/mobile.md
+++ b/docs/admin/logs/mobile.md
@ -0,0 +1,165 @@
+<div v-pre>
+
+# SMS Log
+
+View all SMS records sent by the system including sending status and content.
+
+## Table Column Description
+
+### Platform
+SMS sending platform (displayed as Badge):
+- Alibaba Cloud SMS
+- Tencent Cloud SMS
+- Twilio
+- AWS SNS
+- Other SMS providers
+
+### To
+Recipient phone number.
+
+### Subject
+SMS subject/type.
+
+### Content
+SMS content (displayed as JSON):
+- SMS text
+- Template variables
+- Signature info
+- Max width 480px
+
+### Status
+SMS sending status (displayed as Badge):
+- **Sent** (Green) - Successfully sent
+- **Failed** (Red) - Send failed
+- **Unknown** (Gray) - Unknown status
+
+### Time
+SMS sending time.
+
+## Filter Functions
+
+### Keyword Search
+Search recipient phone number or SMS subject.
+
+### Date Filter
+Select date to view SMS records, defaults to today.
+
+## Usage Scenarios
+
+### Scenario 1: View Today's SMS
+
+1. Shows today's SMS records by default
+2. Check sending quantity
+3. Check sending status
+4. Calculate success rate
+
+### Scenario 2: Investigate Send Failures
+
+**Check Failed SMS**:
+1. Filter "Failed" status
+2. View recipient numbers
+3. Check SMS content
+4. Analyze failure reasons (invalid number/insufficient balance/provider issues)
+5. Resend or fix configuration
+
+### Scenario 3: Verify SMS Content
+
+**Check SMS Templates**:
+1. Search specific subject
+2. View SMS content
+3. Verify variable replacement
+4. Confirm signature correctness
+
+### Scenario 4: Track User SMS
+
+**View User Received SMS**:
+1. Search user phone number
+2. View all SMS
+3. Confirm delivery
+4. Verify SMS types
+
+## SMS Types
+
+### Verification Code SMS
+- Registration verification code
+- Login verification code
+- Password reset code
+- Phone binding code
+
+### Notification SMS
+- Order notifications
+- Payment success
+- Expiration reminders
+- System announcements
+
+### Marketing SMS
+- Promotional SMS
+- Activity notifications
+- Offer information
+
+## Sending Monitoring
+
+### Success Rate Monitoring
+Watch metrics:
+- Daily total sent
+- Send success rate
+- Failure rate trends
+- Platform-specific performance
+
+### Exception Handling
+When issues found:
+1. Check SMS provider configuration
+2. Verify API key validity
+3. Check balance and quota
+4. Review error logs
+5. Contact provider technical support
+
+## SMS Content Description
+
+### JSON Format
+Content field contains:
+```json
+{
+  "template_id": "SMS_123456",
+  "sign_name": "Brand Name",
+  "params": {
+    "code": "123456",
+    "minutes": "5"
+  }
+}
+```
+
+### Template Variables
+- {{code}}: Verification code
+- {{minutes}}: Valid time
+- {{product}}: Product name
+- {{amount}}: Amount
+
+## Cost Management
+
+### Cost Statistics
+- Daily SMS count
+- Unit price calculation
+- Monthly expenses
+- Type distribution
+
+### Cost Optimization
+- Control verification code frequency
+- Optimize SMS templates
+- Choose cost-effective providers
+- Avoid invalid sending
+
+## Important Notes
+
+1. **Log Retention**: Retention per system config
+2. **Content Truncation**: Long content may be truncated
+3. **JSON Display**: Content shown as JSON format
+4. **Platform Recognition**: Identify sending channel by platform field
+5. **Status Monitoring**: Watch for failed send records
+6. **Number Privacy**: Phone numbers are sensitive info
+7. **Regular Checks**: Daily sending status review
+8. **Quota Management**: Mind SMS provider quota and balance
+9. **Rate Limiting**: Prevent SMS flooding
+10. **Compliance**: Follow SMS sending laws and regulations
+
+</div>
--- a/docs/admin/logs/register.md
+++ b/docs/admin/logs/register.md
@ -0,0 +1,152 @@
+<div v-pre>
+
+# Register Log
+
+View user registration records including registration methods, IP addresses, and device information.
+
+## Table Column Description
+
+### User
+Registered user (clickable for details).
+
+### Identifier
+Account identifier used for registration:
+- Registration method Badge (Email/Phone/Google etc.)
+- Specific account (email address/phone number etc.)
+
+### IP Address
+Registration IP address (clickable to view IP info).
+
+### User Agent
+Registration device and browser information:
+- Hover to show full content
+- Truncated to avoid excessive length
+
+### Time
+Registration time.
+
+## Filter Functions
+
+### Date Filter
+Select date to view registration records, defaults to today.
+
+### User ID Filter
+Input user ID to view that user's registration info.
+
+## Usage Scenarios
+
+### Scenario 1: View Today's Registrations
+
+1. Shows today's registration records by default
+2. Count registration quantity
+3. Analyze registration sources
+4. Identify registration method distribution
+
+### Scenario 2: Track User Source
+
+**View Registration Info**:
+1. View user registration record
+2. Confirm registration time
+3. Check registration IP location
+4. Analyze registration channel
+
+### Scenario 3: Investigate Abnormal Registrations
+
+**Check Suspicious Registrations**:
+1. View registration logs
+2. Focus on multiple registrations from same IP
+3. Check unusual countries/regions
+4. Identify batch registration behavior
+5. Limit registration if necessary
+
+### Scenario 4: Analyze Registration Trends
+
+**Calculate Registration Data**:
+1. Select time range
+2. Count total registrations
+3. Analyze registration peaks
+4. Evaluate promotion effectiveness
+
+## Registration Methods
+
+### Email Registration
+- Shows email address
+- Requires email verification
+- Most common method
+
+### Phone Registration
+- Shows phone number
+- Requires SMS verification
+- Common in domestic market
+
+### Social Account Registration
+- **Google**: Google account
+- **GitHub**: GitHub account
+- **Facebook**: Facebook account
+- **Apple**: Apple ID
+- **Telegram**: Telegram account
+
+## Security Monitoring
+
+### Abnormal Patterns
+Watch for:
+- High volume registrations in short time
+- Multiple registrations from same IP
+- Registrations from unusual countries/regions
+- Batch email/phone registrations
+- Temporary email registrations
+
+### Protection Measures
+When anomalies detected:
+1. Enable registration CAPTCHA
+2. Limit registration rate per IP
+3. Ban suspicious IPs
+4. Enable email/phone verification
+5. Enable invitation code mechanism
+
+## Registration Source Analysis
+
+### Geographic Distribution
+- Country/region statistics
+- City distribution
+- Identify main markets
+
+### Device Analysis
+From User Agent:
+- OS distribution
+- Browser types
+- Device types (PC/Mobile)
+- Identify user habits
+
+### Registration Channels
+- Direct access
+- Search engines
+- Promotional links
+- Social media
+
+## Data Statistics
+
+### Daily Statistics
+- Daily new registrations
+- Registration conversion rate
+- Registration method ratio
+- Geographic distribution
+
+### Promotion Evaluation
+- Registration volume during campaigns
+- Channel effectiveness
+- Post-registration retention
+- Post-registration payment rate
+
+## Important Notes
+
+1. **Log Retention**: Retention per system config
+2. **IP Tracking**: Can view IP geolocation
+3. **Device Recognition**: User Agent contains device info
+4. **Privacy Protection**: Registration info sensitive, keep confidential
+5. **Abnormal Monitoring**: Watch for batch and remote registrations
+6. **Method Distribution**: Understand user preferred registration methods
+7. **Regular Analysis**: Weekly registration trend analysis
+8. **Anti-fraud**: Prevent malicious batch registrations
+
+</div>
--- a/docs/admin/logs/reset-subscribe.md
+++ b/docs/admin/logs/reset-subscribe.md
@ -0,0 +1,145 @@
+<div v-pre>
+
+# Reset Subscribe Log
+
+View subscription traffic reset records including reset types and associated orders.
+
+## Table Column Description
+
+### User
+User owning the subscription (clickable for details).
+
+### Subscribe ID
+Reset subscription ID (clickable for subscription details, hover for card).
+
+### Type
+Reset type (displayed as Badge):
+- **Auto Reset** - Automatically reset by cycle
+- **Advance Reset** - User manually resets in advance
+- **Paid Reset** - Purchase traffic reset service
+
+### Order No.
+Associated order number (shown for paid resets, clickable for order details).
+
+### Time
+Reset time.
+
+## Filter Functions
+
+### Date Filter
+Select date to view reset records, defaults to today.
+
+### Subscribe ID Filter
+Input subscription ID to view that subscription's reset records.
+
+## Usage Scenarios
+
+### Scenario 1: View Today's Resets
+
+1. Shows today's reset records by default
+2. Count reset quantity
+3. Analyze reset type distribution
+4. Identify high-frequency reset users
+
+### Scenario 2: Track Subscription Resets
+
+**View Subscription History**:
+1. Filter by subscription ID
+2. View all reset records
+3. Analyze reset frequency
+4. Verify resets are normal
+
+### Scenario 3: Analyze Paid Resets
+
+**Calculate Paid Data**:
+1. Filter "Paid Reset" type
+2. Count paid reset quantity
+3. Calculate paid reset revenue
+4. Analyze user demand
+
+### Scenario 4: Investigate Abnormal Resets
+
+**Check Suspicious Resets**:
+1. View reset logs
+2. Focus on high-frequency advance resets
+3. Identify abnormal reset behavior
+4. Verify order associations
+
+## Reset Type Description
+
+### Auto Reset
+- Automatically resets by subscription cycle
+- Monthly/weekly/daily reset
+- Executed by system scheduled task
+- Most common reset method
+
+### Advance Reset
+- User manually resets in advance
+- Consumes reset count
+- Or purchase reset with payment
+- Suitable for traffic exhaustion
+
+### Paid Reset
+- User purchases traffic reset service
+- Generates order record
+- Resets immediately after payment
+- Has associated order number
+
+## Reset Rules
+
+### Auto Reset Time
+- **Monthly Reset**: 1st of month at 00:00
+- **Weekly Reset**: Monday at 00:00
+- **Daily Reset**: Every day at 00:00
+
+### Reset Count Limit
+- Plan includes reset count
+- Exceeding count requires payment
+- Count resets each cycle
+
+### Paid Reset Pricing
+- Based on plan traffic config
+- Generally 20-30% of plan price
+- Configurable in product management
+
+## Traffic Management
+
+### Reset Strategy
+- Set reasonable reset cycle
+- Configure reset count limit
+- Price paid reset service
+- Notify users of reset rules
+
+### User Reminders
+- Traffic near exhaustion reminder
+- Reset time reminder
+- Paid reset recommendation
+- Upgrade plan suggestion
+
+## Data Statistics
+
+### Reset Analysis
+Daily/monthly stats:
+- Auto reset count
+- Advance reset count
+- Paid reset count
+- Paid reset revenue
+
+### User Behavior
+- High-frequency reset users
+- Paid reset conversion rate
+- Traffic usage after reset
+- Upgrade plan conversion
+
+## Important Notes
+
+1. **Log Retention**: Retention per system config
+2. **Subscription Association**: Each record linked to subscription ID
+3. **Type Recognition**: Distinguish reset method by type
+4. **Order Association**: Paid resets have order number
+5. **Time Accuracy**: Records precise reset time
+6. **Count Management**: Track user reset counts
+7. **Regular Analysis**: Weekly reset data analysis
+8. **Strategy Optimization**: Optimize reset rules based on data
+
+</div>
--- a/docs/admin/logs/server-traffic.md
+++ b/docs/admin/logs/server-traffic.md
@ -0,0 +1,149 @@
+<div v-pre>
+
+# Server Traffic Log
+
+View daily traffic statistics for each server with detailed traffic consumption breakdown.
+
+## Table Column Description
+
+### Server
+Server information display:
+- Server ID (displayed as Badge)
+- Server name
+
+### Upload
+Daily upload traffic, auto-converts units (B/KB/MB/GB/TB).
+
+### Download
+Daily download traffic, auto-converts units.
+
+### Total
+Daily total traffic (upload + download).
+
+### Date
+Traffic statistics date.
+
+## Table Operations
+
+### View Detail
+Click "Detail" button to jump to detailed traffic records page:
+- View detailed traffic for that date and server
+- Grouped by users
+- Aggregated by subscriptions
+
+## Filter Functions
+
+### Date Filter
+Select date to view traffic records, defaults to today.
+
+### Server ID Filter
+Input server ID to view that server's traffic records.
+
+## Usage Scenarios
+
+### Scenario 1: View Today's Traffic
+
+1. Shows today's traffic records by default
+2. View traffic consumption per server
+3. Identify high-traffic servers
+4. Analyze traffic distribution
+
+### Scenario 2: Track Server Load
+
+**View Server Usage**:
+1. Filter by server ID
+2. View historical traffic records
+3. Analyze traffic trends
+4. Evaluate server load
+
+### Scenario 3: Investigate Traffic Anomalies
+
+**Check Abnormal Consumption**:
+1. Browse traffic records
+2. Focus on abnormally high-traffic servers
+3. Click "Detail" for breakdown
+4. Analyze traffic distribution by user
+5. Check for abuse
+
+### Scenario 4: Traffic Statistics Analysis
+
+**Generate Reports**:
+1. Select date range
+2. Export traffic data
+3. Analyze traffic peak times
+4. Optimize server resource allocation
+5. Plan capacity expansion
+
+## Traffic Detail Page
+
+After clicking "Detail" shows:
+
+### User Traffic Breakdown
+- Traffic consumption per user
+- Subscription traffic statistics
+- Connection duration records
+
+### Node Traffic Statistics
+- Total traffic per node
+- Traffic proportion analysis
+- User distribution
+
+## Traffic Monitoring
+
+### Normal Pattern
+- Evenly distributed traffic
+- Matches user count
+- Regular peak/valley patterns
+
+### Abnormal Patterns
+Watch for:
+- Sudden traffic surge on single server
+- Severely uneven traffic distribution
+- High traffic in unusual time periods
+- Excessive traffic from single user
+
+## Server Management
+
+### Load Balancing
+Based on traffic data:
+- Identify high-load servers
+- Distribute users to other servers
+- Adjust server weights
+- Optimize node configuration
+
+### Capacity Planning
+Based on traffic trends:
+- Predict traffic growth
+- Plan server expansion
+- Optimize bandwidth configuration
+- Control operating costs
+
+## Data Analysis
+
+### Traffic Statistics
+Daily/monthly stats:
+- Total traffic consumption
+- Server proportion
+- Traffic growth trends
+- Bandwidth utilization rate
+
+### Cost Analysis
+- Traffic cost calculation
+- Server ROI analysis
+- Optimization opportunity identification
+- Cost control recommendations
+
+## Important Notes
+
+1. **Log Retention**: Retention per system config
+2. **Unit Conversion**: Auto-converts to readable units
+3. **Server Association**: Can view single server history
+4. **Detail Jump**: Click detail for user-level breakdown
+5. **Real-time**: Traffic data may have delay
+6. **Total Accuracy**: Total includes upload and download
+7. **Regular Analysis**: Recommended weekly traffic trend analysis
+8. **Load Monitoring**: Watch server load situation
+9. **Expansion Alert**: Expand when traffic nears limit
+10. **Cost Optimization**: Optimize config based on traffic data
+
+</div>
--- a/docs/admin/logs/subscribe-traffic.md
+++ b/docs/admin/logs/subscribe-traffic.md
@ -0,0 +1,120 @@
+<div v-pre>
+
+# Subscribe Traffic Log
+
+View daily traffic usage statistics for user subscriptions with detailed traffic consumption breakdown.
+
+## Table Column Description
+
+### User
+User consuming traffic (clickable for details).
+
+### Subscribe
+Associated subscription ID (clickable for details, hover for card).
+
+### Upload
+Daily upload traffic, auto-converts units (B/KB/MB/GB/TB).
+
+### Download
+Daily download traffic, auto-converts units.
+
+### Total
+Daily total traffic (upload + download).
+
+### Date
+Traffic statistics date.
+
+## Table Operations
+
+### View Detail
+Click "Detail" button to jump to detailed traffic records page:
+- View detailed traffic for that date and subscription
+- Grouped by nodes
+- Aggregated by servers
+
+## Filter Functions
+
+### Date Filter
+Select date to view traffic records, defaults to today.
+
+### User ID Filter
+Input user ID to view that user's traffic records.
+
+### Subscribe ID Filter
+Input subscription ID to view that subscription's traffic records.
+
+## Usage Scenarios
+
+### Scenario 1: View Today's Traffic
+
+1. Shows today's traffic records by default
+2. View total traffic consumption
+3. Identify high-traffic users
+4. Analyze traffic trends
+
+### Scenario 2: Track User Traffic
+
+**View User Usage**:
+1. Filter by user ID
+2. View all subscription traffic
+3. Analyze usage habits
+4. Predict traffic needs
+
+### Scenario 3: Investigate Traffic Anomalies
+
+**Check Abnormal Consumption**:
+1. Browse traffic records
+2. Focus on unusually high traffic
+3. Click "Detail" for breakdown
+4. Analyze traffic distribution by node
+5. Check for abuse
+
+### Scenario 4: Traffic Statistics Analysis
+
+**Generate Reports**:
+1. Select date range
+2. Export traffic data
+3. Analyze traffic peak times
+4. Optimize node resource allocation
+
+## Traffic Detail Page
+
+After clicking "Detail" shows:
+
+### Node Traffic Breakdown
+- Traffic consumption per node
+- Upload/download separately counted
+- Connection duration records
+
+### Server Traffic Statistics
+- Total traffic per server
+- Traffic proportion analysis
+- Load situation assessment
+
+## Traffic Monitoring
+
+### Abnormal Patterns
+Watch for:
+- Sudden daily traffic surge
+- Traffic far exceeding plan limit
+- High traffic in unusual time periods
+- Single node excessive traffic
+
+### Handling Measures
+When anomalies detected:
+1. View traffic details
+2. Confirm if abuse
+3. Throttle or suspend subscription
+4. Notify user for verification
+
+## Important Notes
+
+1. **Log Retention**: Retention time per system config
+2. **Unit Conversion**: Auto-converts to readable units
+3. **Subscription Association**: Can cross-query user's multiple subscriptions
+4. **Detail Jump**: Click detail for node-level breakdown
+5. **Real-time**: Traffic data may have delay
+6. **Total Accuracy**: Total includes upload and download
+7. **Regular Analysis**: Recommended weekly traffic trend analysis
+
+</div>
--- a/docs/admin/logs/subscribe.md
+++ b/docs/admin/logs/subscribe.md
@ -0,0 +1,127 @@
+<div v-pre>
+
+# Subscribe Log
+
+View user subscription link request records including IP, device, and time information.
+
+## Table Column Description
+
+### User
+User requesting subscription (clickable for details).
+
+### Subscribe ID
+Requested subscription ID (clickable for subscription details, hover for card).
+
+### IP Address
+Request IP address (clickable to view IP info).
+
+### User Agent
+Client device and system information:
+- Hover to show full content
+- Truncated to avoid excessive length
+
+### Time
+Request time.
+
+## Filter Functions
+
+### Date Filter
+Select date to view subscription records, defaults to today.
+
+### User ID Filter
+Input user ID to view that user's subscription requests.
+
+### Subscribe ID Filter
+Input subscription ID to view that subscription's request records.
+
+## Usage Scenarios
+
+### Scenario 1: View Today's Requests
+
+1. Shows today's subscription records by default
+2. Check request frequency
+3. Analyze active subscriptions
+4. Identify abnormal requests
+
+### Scenario 2: Track User Requests
+
+**View User Activity**:
+1. Filter by user ID
+2. View all subscription requests
+3. Analyze usage frequency
+4. Verify device types
+
+### Scenario 3: Investigate Subscription Anomalies
+
+**Check Abnormal Requests**:
+1. View subscription logs
+2. Focus on IP address changes
+3. Check User Agent
+4. Identify suspicious devices
+5. Ban subscription if necessary
+
+### Scenario 4: Analyze Client Distribution
+
+**Calculate Client Types**:
+1. View User Agent information
+2. Count client distribution
+3. Understand user habits
+4. Optimize client support
+
+## Subscription Request Monitoring
+
+### Normal Pattern
+- Periodic subscription link requests
+- Update node information
+- Sync configuration changes
+
+### Abnormal Patterns
+Watch for:
+- High-frequency requests in short time
+- Multiple subscriptions from same IP
+- Access from unusual countries/regions
+- Unfamiliar client types
+
+## Security Protection
+
+### Detection Measures
+- Request rate limiting
+- IP whitelist/blacklist
+- Subscription token verification
+- Device count limit
+
+### Handling Measures
+When abuse detected:
+1. Limit request rate
+2. Temporarily ban IP
+3. Reset subscription token
+4. Notify user for confirmation
+
+## User Agent Analysis
+
+### Common Clients
+- **Clash**: Clash for Windows/Mac/Android
+- **Shadowrocket**: iOS client
+- **V2rayN**: Windows client
+- **Quantumult**: iOS client
+- **Surfboard**: Android client
+
+### Identification Info
+From User Agent:
+- Client name and version
+- OS type
+- Device model
+- System version
+
+## Important Notes
+
+1. **Log Retention**: Retention per system config
+2. **IP Tracking**: Can view IP geolocation
+3. **Device Recognition**: User Agent contains client info
+4. **Request Frequency**: Normal clients request periodically
+5. **Abnormal Monitoring**: Watch for high-frequency and remote requests
+6. **Privacy Protection**: IP and device info sensitive
+7. **Regular Analysis**: Weekly subscription request trend analysis
+8. **Prevent Leakage**: Subscription links should not be publicly shared
+
+</div>
--- a/docs/admin/logs/traffic-details.md
+++ b/docs/admin/logs/traffic-details.md
@ -0,0 +1,172 @@
+<div v-pre>
+
+# Traffic Details Log
+
+View detailed traffic consumption records with multi-dimensional filtering by server, user, and subscription.
+
+## Table Column Description
+
+### Server
+Server generating traffic:
+- Server name
+- Server ID
+
+### User
+User consuming traffic (clickable for details).
+
+### Subscribe
+Associated subscription ID (clickable for subscription details, hover for card).
+
+### Upload
+Upload traffic, auto-converts units (B/KB/MB/GB/TB).
+
+### Download
+Download traffic, auto-converts units.
+
+### Time
+Traffic generation time.
+
+## Filter Functions
+
+### Date Filter
+Select date to view traffic details, defaults to today.
+
+### Server ID Filter
+Input server ID to view that server's traffic details.
+
+### User ID Filter
+Input user ID to view that user's traffic details.
+
+### Subscribe ID Filter
+Input subscription ID to view that subscription's traffic details.
+
+## Usage Scenarios
+
+### Scenario 1: View Server Traffic Breakdown
+
+Enter from server traffic log by clicking "Detail":
+1. Auto-fills date and server ID
+2. View all user traffic on that server
+3. Sort by user
+4. Identify high-traffic users
+
+### Scenario 2: View User Traffic Details
+
+Enter from subscribe traffic log by clicking "Detail":
+1. Auto-fills date, user ID, and subscription ID
+2. View that user's subscription traffic
+3. View distribution by server
+4. Analyze usage habits
+
+### Scenario 3: Investigate Traffic Anomalies
+
+**Detailed Investigation**:
+1. Select anomaly date
+2. Input relevant filter conditions
+3. View detailed traffic records
+4. Sort by time for analysis
+5. Identify abnormal traffic sources
+
+### Scenario 4: Traffic Statistics Analysis
+
+**Multi-dimensional Analysis**:
+1. Select time range
+2. Combine different filter conditions
+3. Export detailed data
+4. Generate traffic reports
+5. Develop optimization strategies
+
+## Data Association
+
+### Jump from Server Traffic
+- Brings server ID and date
+- View all traffic on that server
+- Can further filter by user
+
+### Jump from Subscribe Traffic
+- Brings user ID, subscription ID, and date
+- View all traffic for that subscription
+- Can view different servers
+
+## Traffic Analysis
+
+### Time Distribution
+- View traffic time distribution
+- Identify usage peak times
+- Analyze user active hours
+- Optimize server scheduling
+
+### Server Distribution
+- Count traffic proportion per server
+- Analyze load distribution
+- Identify popular servers
+- Optimize load balancing
+
+### User Distribution
+- Identify high-traffic users
+- Analyze user usage habits
+- Check for abuse
+- Optimize plan configuration
+
+## Traffic Monitoring
+
+### Normal Pattern
+- Evenly distributed traffic
+- Time regularity
+- Matches user count
+- No abnormal peaks
+
+### Abnormal Patterns
+Watch for:
+- Abnormally large single traffic
+- Traffic in unusual time periods
+- High-frequency requests from single user
+- Unreasonable traffic distribution
+
+## Investigation Steps
+
+### Discover Anomaly
+1. Find anomaly from statistics log
+2. Click detail to enter
+3. View detailed records
+
+### Locate Problem
+1. Sort by time
+2. Identify abnormal records
+3. View user information
+4. Confirm subscription status
+
+### Handling Measures
+1. Verify if normal usage
+2. Check for abuse
+3. Throttle or suspend subscription
+4. Notify user for confirmation
+
+## Data Export
+
+### Export Purpose
+- Generate traffic reports
+- Financial reconciliation
+- User analysis
+- Capacity planning
+
+### Export Content
+- All column data
+- Filtered data
+- CSV or Excel format
+- Supports batch export
+
+## Important Notes
+
+1. **Log Retention**: Retention per system config
+2. **Unit Conversion**: Auto-converts to readable units
+3. **Multi-filter**: Supports multiple condition combinations
+4. **Jump with Params**: Jumps from stats logs auto-fill parameters
+5. **Real-time**: Traffic data may have delay
+6. **Detail Level**: Most detailed traffic records
+7. **Performance**: Consider filtering with large data volumes
+8. **Regular Cleanup**: Detail logs consume more storage
+9. **Export Limits**: Single export may have quantity limits
+10. **Privacy Protection**: Detailed records contain user behavior info
+
+</div>
--- a/docs/admin/maintenance/nodes.md
+++ b/docs/admin/maintenance/nodes.md
@ -0,0 +1,187 @@
+# Node Management
+
+Manage user-facing proxy nodes, configure node-server associations, entry addresses, and tags. Nodes are the actual endpoints users connect to, and one server can correspond to multiple nodes.
+
+## Page Components
+
+### Node List
+
+Display all node configuration information in table format.
+
+**Column Information:**
+- **Enabled**: Toggle switch to control whether the node is visible to users in real-time
+  - On: Node appears in subscriptions, users can connect
+  - Off: Node is hidden, users cannot connect
+  - Takes effect immediately without restart
+- **Name**: Node display name, shown in user's client
+- **Address:Port**: Entry address and port for user connections
+- **Server**: Shows associated server name and IP address
+  - Format: `Server Name:Server IP`
+- **Protocol:Port**: Proxy protocol type and server listening port
+  - Format: `Protocol Type:Server Port`
+  - Examples: `vless:443`, `vmess:80`, `trojan:8443`
+- **Tags**: Node grouping tags, displayed as badges
+  - Used for permission grouping and plan binding
+  - Used for traffic distribution policies
+  - Supports multiple tags
+
+**Operation Features:**
+- **Search**: Quickly filter nodes by keyword
+- **Sorting**: Adjust node display order by dragging rows, affects node order in user subscriptions
+- **Pagination**: Support paging for large number of nodes
+- **Batch Delete**: Delete multiple selected nodes
+
+**Individual Node Operations:**
+- **Edit**: Modify node configuration
+- **Delete**: Delete node
+- **Copy**: Copy node configuration to create new node (new node disabled by default)
+
+## Node Form
+
+A sidebar form that opens when clicking "Create" or "Edit".
+
+### Form Fields
+
+**1. Server** - Required
+- Select the physical server associated with the node
+- Dropdown shows: `Server Name (Server IP)`
+- Triggers smart autofill upon selection
+
+**2. Protocol** - Required
+- Select the proxy protocol to use
+- Dropdown only shows protocols enabled on selected server
+- Format: `Protocol Type (Port Number)`
+- Supported protocols: shadowsocks, vmess, vless, trojan, hysteria, tuic, anytls, naive, http, socks, mieru
+- Automatically fills corresponding port upon selection
+
+**3. Name** - Required
+- Display name of the node
+- Shown in user's proxy client
+- Supports autofill (from server name)
+
+**4. Address** - Required
+- Entry address for user connections
+- Can be domain name or IP address
+- Supports autofill (from server address)
+- Can be manually changed to CDN domain or other entry
+
+**5. Port** - Required
+- Entry port number for user connections
+- Range: 1-65535
+- Supports autofill (from protocol port)
+- Can be manually changed to different port (e.g., when using port forwarding)
+
+**6. Tags** - Optional
+- Node grouping tags, supports multiple tags
+- Can select from existing tags or enter new tags
+- Use Enter key or comma (,) to add multiple tags
+- Purpose:
+  - **Permission Grouping**: Bind with plans to control visible nodes for different plan users
+  - **Traffic Strategy**: Used for node traffic distribution and load balancing
+
+### Smart Autofill Mechanism
+
+The form has smart autofill functionality to improve configuration efficiency:
+
+**Trigger Conditions:**
+1. When selecting server
+2. When selecting protocol
+
+**Fill Rules:**
+- **After selecting server**:
+  - Name autofills with server name
+  - Address autofills with server IP
+  - Protocol automatically selects first available protocol
+  - Port autofills with corresponding protocol port
+
+- **After selecting protocol**:
+  - Port autofills with the protocol's port number
+
+**Manual Modification:**
+- After manually modifying any field, that field will no longer autofill
+- Reselecting server or protocol refreshes autofill status
+
+## Use Cases
+
+### Scenario 1: Create Basic Node
+1. Click "Create" button
+2. Select server (other fields autofill)
+3. Confirm or adjust autofilled configuration
+4. Click "Confirm"
+
+### Scenario 2: Create CDN Node
+1. Click "Create" button
+2. Select server
+3. Change name to: `Hong Kong 01 [CDN]`
+4. Change address to CDN domain: `hk01.cdn.example.com`
+5. Change port to CDN port: `443` or `80`
+6. Click "Confirm"
+
+### Scenario 3: Tag Group Management
+**For Plan Binding:**
+- Premium plan nodes: Add tags `premium`, `vip`
+- Standard plan nodes: Add tag `standard`
+- Trial plan nodes: Add tag `trial`
+- Bind tags in product management to show different nodes for different plans
+
+**For Region Classification:**
+- Hong Kong nodes: Add tags `hk`, `asia`
+- US nodes: Add tags `us`, `americas`
+- Japan nodes: Add tags `jp`, `asia`
+
+### Scenario 4: Batch Management
+1. Use search to filter specific nodes
+2. Check multiple nodes
+3. Click batch delete or batch operations
+4. Confirm operation
+
+## Relationship Between Nodes and Servers
+
+**Server:**
+- Physical server or VPS
+- Runs proxy service programs
+- Configures listening protocols and ports
+- One server can configure multiple protocols
+
+**Node:**
+- User-visible connection endpoint
+- Associated with a specific protocol on a server
+- Configures user connection entry address (can differ from server address)
+- One server can create multiple nodes
+
+**Example:**
+```
+Server: Hong Kong-HK01 (192.168.1.100)
+├── Protocol: vless:443
+├── Protocol: vmess:80
+└── Protocol: trojan:8443
+
+Node Configuration:
+1. Node Name: Hong Kong 01 [Direct]
+   - Server: Hong Kong-HK01
+   - Protocol: vless:443
+   - Address: 192.168.1.100
+   - Port: 443
+
+2. Node Name: Hong Kong 01 [CDN]
+   - Server: Hong Kong-HK01
+   - Protocol: vmess:80
+   - Address: hk01.cdn.example.com
+   - Port: 443 (CDN port)
+
+3. Node Name: Hong Kong 01 [VIP]
+   - Server: Hong Kong-HK01
+   - Protocol: trojan:8443
+   - Address: 192.168.1.100
+   - Port: 8443
+   - Tags: premium, vip
+```
+
+## Important Notes
+
+1. **Protocol Must Be Enabled**: Can only select protocols already enabled on the server; disabled protocols won't appear in dropdown
+2. **Delete Impact**: Deleting a node will cause users using that node to be unable to connect, proceed with caution
+3. **Disable vs Delete**: For temporarily taking a node offline, use "disable" instead of delete for easy restoration
+4. **Tag Planning**: Recommend planning tag system in advance for easier batch management of plans and nodes
+5. **Address Configuration**: When using CDN, ensure CDN is correctly configured to origin to server address
+6. **Port Mapping**: If entry port differs from server listening port (e.g., using port forwarding), ensure network layer is configured correctly
--- a/docs/admin/maintenance/products.md
+++ b/docs/admin/maintenance/products.md
@ -0,0 +1,261 @@
+# Product Management
+
+The Product Management module creates and manages subscription packages, which is the core of business operations.
+
+## Overview
+
+### Product List
+
+View and manage all product packages:
+
+- **Product Name**: Package display name
+- **Product Type**: Period/Traffic/Pay-as-you-go
+- **Price**: Product price and discount price
+- **Traffic Quota**: Total/Monthly traffic
+- **Validity**: Package duration (month/quarter/year)
+- **Node Groups**: Included node groups
+- **Status**: Active/Inactive/Sold out
+- **Sales**: Product sales quantity
+
+### Create Product
+
+Create new subscription package:
+
+#### Basic Info
+
+- **Product Name**: Package name users see
+- **Description**: Detailed product description
+- **Category**: Basic/Advanced/Premium
+- **Sort Order**: Product display order
+
+#### Pricing
+
+- **Original Price**: Product original price
+- **Sale Price**: Actual selling price
+- **Discount**: Discount percentage
+- **Currency**: CNY/USD, etc.
+- **Billing Cycle**: Monthly/Quarterly/Yearly
+
+#### Traffic Config
+
+- **Total Traffic**: Package total traffic quota
+- **Traffic Cycle**: One-time/Monthly reset
+- **Traffic Rate**: Traffic billing multiplier
+- **Overage**: Handling for traffic overage
+
+#### Duration
+
+- **Validity**: Package usage period
+- **Billing Cycle**: Monthly/Quarterly/Yearly
+- **Auto-renewal**: Support auto-renewal
+- **Renewal Discount**: Discount on renewal
+
+#### Node Config
+
+- **Included Groups**: Select node groups in package
+- **Device Limit**: Simultaneous device connection limit
+- **Speed Limit**: Per-user speed cap
+- **Available Regions**: Geographic restrictions
+
+#### Advanced Options
+
+- **Inventory**: Set product stock quantity
+- **Purchase Limit**: Per-person purchase limit
+- **New User Only**: Only new users can buy
+- **Trial Settings**: Provide free trial
+
+### Edit Product
+
+Modify existing product configuration:
+
+- Adjust price and discount
+- Update traffic quota
+- Modify node range
+- Change product status
+
+::: warning Note
+Product config changes don't affect existing users, only new orders.
+:::
+
+### Delete Product
+
+Confirm before deleting:
+
+- Are users currently using it
+- Are there pending orders
+- Should historical data be kept
+
+Recommend deactivating first, then delete after confirmation.
+
+## Product Categories
+
+### By Period
+
+#### Monthly
+
+- High flexibility for short-term users
+- Relatively higher price
+- Easy for users to try service
+
+#### Quarterly
+
+- Moderate price and duration
+- Balance flexibility and discount
+- Suitable for most users
+
+#### Yearly
+
+- Large discount
+- For long-term users
+- Reduce user churn
+
+#### Lifetime
+
+- One-time payment for permanent use
+- High price but good value
+- For loyal users
+
+### By Traffic
+
+#### Traffic Package
+
+- Fixed traffic quota
+- Stop when used up
+- For users with clear needs
+
+#### Unlimited
+
+- No traffic limit
+- May limit speed
+- For heavy users
+
+#### Pay-as-you-go
+
+- Pay for what you use
+- Flexible but potentially costly
+- For occasional users
+
+### By Tier
+
+#### Basic
+
+- Affordable price
+- Basic node groups
+- For light usage
+
+#### Advanced
+
+- Good value
+- More node options
+- For daily use
+
+#### Premium
+
+- Full node access
+- Highest speed and stability
+- For professional users
+
+## Pricing Strategy
+
+### Pricing Principles
+
+- **Cost-based**: Cover server and bandwidth costs
+- **Competition-based**: Reference industry pricing
+- **Value-based**: Price by value provided
+- **Psychological**: Use pricing psychology
+
+### Promotion Strategy
+
+#### Limited Time
+
+- Holiday promotions
+- Anniversary sales
+- New product launch discounts
+
+#### Coupons
+
+- Spend threshold coupons
+- Discount coupons
+- New user coupons
+
+#### Member Discounts
+
+- VIP user exclusive discounts
+- Cumulative purchase rebates
+- Referral rewards
+
+#### Bundle Packages
+
+- Multi-product combo discounts
+- Package upgrade discounts
+- Renewal discounts
+
+## Product Display
+
+### Product Page
+
+Optimize display to improve conversion:
+
+- **Clear Title**: Highlight features
+- **Detailed Description**: Explain advantages
+- **Price Comparison**: Show discount magnitude
+- **User Reviews**: Show real feedback
+- **Purchase Guide**: Clear buy button
+
+### Product Comparison
+
+Help users choose suitable package:
+
+- **Comparison Table**: Side-by-side comparison
+- **Recommendation Badge**: Mark popular/recommended
+- **Differentiation**: Highlight differences
+- **Use Cases**: Explain suitable scenarios
+
+## Product Analysis
+
+### Sales Data
+
+Analyze product sales:
+
+- **Sales Stats**: Product sales quantity
+- **Revenue Stats**: Revenue per product
+- **Conversion Rate**: Visit to purchase
+- **User Profile**: Buyer characteristics
+
+### Optimization
+
+Optimize products based on data:
+
+- **Price Adjustment**: Optimize pricing
+- **Config Optimization**: Adjust traffic and nodes
+- **Promotion Optimization**: Improve promotions
+- **Experience Optimization**: Enhance purchase flow
+
+## Inventory Management
+
+### Inventory Settings
+
+- **Stock Quantity**: Set product inventory
+- **Stock Alert**: Low stock reminder
+- **Restocking**: Auto-restock rules
+
+### Inventory Monitoring
+
+- **Real-time Stock**: View current inventory
+- **Stock Flow**: Inventory change records
+- **Sales Forecast**: Predict inventory needs
+
+## Best Practices
+
+- Offer multiple price tiers for different needs
+- Set clear product features and advantages
+- Regularly analyze sales data to optimize
+- Keep product info updated
+- Use promotions reasonably to boost sales
+- Collect user feedback for improvement
+
+## Next Steps
+
+- [Order Management](/admin/commerce/orders) - Process product orders
+- [Coupon Management](/admin/commerce/coupons) - Create promotions
+- [Marketing Management](/admin/commerce/marketing) - Promote products
--- a/docs/admin/maintenance/servers.md
+++ b/docs/admin/maintenance/servers.md
@ -0,0 +1,214 @@
+# Server Management
+
+Manage proxy servers' basic information, protocol configuration, and runtime status, as well as configure global node parameters.
+
+## Page Components
+
+The Server Management page consists of the following modules:
+
+### 1. Dynamic Multiplier
+
+A card at the top of the page for defining traffic billing multipliers for different time periods.
+
+**Features:**
+- **Time Slot Management**: Define multiple time periods, each containing:
+  - Start time: Format HH:MM:SS
+  - End time: Format HH:MM:SS
+  - Multiplier: Traffic billing multiplier for this period
+- **Dynamic Billing**: Apply different multipliers at different times, e.g., higher rates during peak hours
+- **Flexible Configuration**: Support adding, editing, and deleting time periods
+- **Immediate Effect**: Applied to traffic statistics immediately after saving
+
+**Use Cases:**
+- Peak/off-peak time-based billing
+- Holiday special billing
+- Limit traffic usage during peak hours
+
+### 2. Node Configuration
+
+A card at the top of the page for configuring node communication and global policies.
+
+**Basic Configuration:**
+- **Node Secret**: Authentication key for node-server communication
+- **Node Pull Interval**: Time interval (seconds) for nodes to pull configuration from server
+- **Node Push Interval**: Time interval (seconds) for nodes to push status to server
+- **Traffic Report Threshold**: Byte threshold for triggering traffic reports
+- **IP Strategy**: Choose prefer_ipv4 or prefer_ipv6
+
+**DNS Configuration:**
+- **Protocol**: tcp, udp, tls, https, quic
+- **Address**: DNS server address
+- **Domains**: List of domains to be resolved using this DNS
+- Support configuring multiple DNS servers
+
+**Outbound Rules:**
+Configure outbound proxies for specific traffic:
+- **Name**: Rule identifier
+- **Protocol**: Proxy protocol type
+- **Address**: Proxy server address
+- **Port**: Proxy server port
+- **Cipher**: Encryption method for protocols like Shadowsocks
+- **Password**: Proxy authentication password
+- **Rules**: Matching rules, such as domain names or IP ranges
+
+**Block Rules:**
+Configure list of domains or IPs to block, supporting wildcards and regex.
+
+### 3. Server List
+
+The main body of the page displays all servers in a table format.
+
+**Column Information:**
+- **ID**: Server unique identifier, displayed as a badge
+- **Name**: Server custom name
+- **Address**: Displays country/city/IP address using badge components
+- **Protocols**: Displays list of enabled protocols, each showing:
+  - Multiplier (e.g., 1.00x)
+  - Protocol type (e.g., vless, vmess, trojan, shadowsocks)
+  - Port number
+- **Status**: Online/offline status with dot indicator
+  - Green dot: Online
+  - Gray dot: Offline
+- **CPU**: CPU usage percentage, displayed as a progress bar
+- **Memory**: Memory usage percentage, displayed as a progress bar
+- **Disk**: Disk usage percentage, displayed as a progress bar
+- **Online Users**: Number of currently connected users
+
+**Operation Features:**
+- **Search**: Quickly filter servers by keyword
+- **Sorting**: Adjust server display order by dragging rows, sorting is saved to database
+- **Pagination**: Support paging for large number of servers
+- **Batch Delete**: Delete multiple selected servers (servers referenced by nodes cannot be deleted)
+
+**Individual Server Operations:**
+- **Edit**: Modify server configuration
+- **Connect**: Display one-click installation script
+- **Delete**: Delete server (disabled when referenced by nodes)
+- **Copy**: Copy server configuration to create a new server
+
+## Server Form
+
+A sidebar form that opens when clicking "Create" or "Edit".
+
+**Basic Information:**
+- **Name**: Required, server identifier name
+- **Country**: Server country code (e.g., CN, US, JP)
+- **City**: Server city
+- **Address**: Server IP address or domain
+
+**Protocol Configuration:**
+
+Support configuration of multiple proxy protocols, each expanded in accordion format. Protocol types used in nodes cannot be disabled.
+
+**Common Protocol Fields:**
+- **Enable**: Toggle switch to control whether to enable the protocol
+- **Port**: Listening port number
+- **Ratio**: Traffic billing multiplier, e.g., 1.5 means 1.5 times actual traffic
+- **Encryption/Security**: Varies depending on protocol type
+
+**Supported Protocol Types:**
+
+1. **Shadowsocks**
+   - Cipher: Encryption method (e.g., aes-256-gcm, chacha20-poly1305)
+   - Password: Authentication password, supports generating random password
+
+2. **Trojan**
+   - Password: Authentication password, supports generating random password
+
+3. **Vmess**
+   - UUID: User identifier, supports auto-generation
+   - Alter ID: Number of additional IDs
+
+4. **Vless**
+   - UUID: User identifier, supports auto-generation
+   - Flow: Flow control mode (e.g., xtls-rprx-vision)
+
+5. **Hysteria**
+   - Up/Down Speed: Upload/download speed limits
+   - Obfs Password: Obfuscation password
+
+6. **Hysteria2**
+   - Password: Authentication password
+   - Obfs Password: Obfuscation password
+
+7. **TUIC**
+   - UUID: User identifier
+   - Password: Authentication password
+   - Congestion Control: Congestion control algorithm (e.g., bbr, cubic)
+   - UDP Relay Mode: UDP relay mode
+
+**Transport Configuration:**
+
+Each protocol can be configured with different transport layers:
+- **TCP**: Basic TCP transport
+- **WS (WebSocket)**: WebSocket transport
+  - Path: WebSocket path
+  - Host: WebSocket Host header
+- **gRPC**: gRPC transport
+  - Service Name: gRPC service name
+- **HTTP/2**: HTTP/2 transport
+  - Path: Request path
+  - Host: Host header
+- **QUIC**: QUIC protocol transport
+- **HTTPUpgrade**: HTTP upgrade transport
+- **SplitHTTP**: Split HTTP transport
+- **XHTTP**: Extended HTTP transport
+
+**TLS Configuration:**
+- **TLS**: Whether to enable TLS
+- **Server Name**: SNI server name
+- **ALPN**: Application-Layer Protocol Negotiation (e.g., h2, http/1.1)
+- **Fingerprint**: TLS fingerprint (e.g., chrome, firefox, safari)
+- **Reality**: Reality protocol configuration
+  - Public Key: Public key
+  - Short ID: Short ID
+  - Spider X: Spider X parameter
+
+**Advanced Configuration:**
+- **Multiplex**: Multiplexing settings
+- **Encryption**: Additional encryption layer
+- **Flow Control**: Flow control parameters
+
+**Field Generation:**
+
+Some fields support auto-generation with a key icon:
+- **UUID**: Generate random UUID
+- **Password**: Generate random strong password
+- **Reality Key Pair**: Generate Public Key and Private Key
+- **Short ID**: Generate random short ID
+
+## One-Click Installation
+
+Click the "Connect" button to display the server node installation script.
+
+**Configuration:**
+- **API Host**: API address of the management panel (automatically obtained from current domain, can be manually modified)
+- **Server ID**: Unique ID of the current server (auto-filled)
+- **Secret Key**: Automatically obtained from node configuration
+
+**Install Command:**
+The generated bash script contains:
+```bash
+wget -N https://raw.githubusercontent.com/perfect-panel/ppanel-node/master/scripts/install.sh && bash install.sh --api-host [domain] --server-id [ID] --secret-key [key]
+```
+
+**Operations:**
+- Click "Copy and Close" to copy the script with one click and close the popup
+- Execute the script on the server to automatically install and connect the node
+
+## Online Users Viewing
+
+Click the "Online Users" number to view details of currently online users on the server.
+
+**Display Information:**
+- **User Account**: Link to user detail page
+- **Subscribe ID**: Subscription record ID
+- **Subscribe Name**: Plan name being used
+- **Traffic Usage**: Used traffic / Total traffic (displays "Unlimited" if unlimited)
+- **Expire Time**: Subscription expiration time, expired shows red "Expired" badge
+- **IP Address**: User connection IP, clickable to view IP information
+- **Connection Time**: Time when user established connection
+
+## Data Refresh
+
+Server status (CPU, Memory, Disk, Online Users) is updated in real-time according to the "Node Push Interval" set in "Node Configuration".
--- a/docs/admin/maintenance/subscribe-variables.md
+++ b/docs/admin/maintenance/subscribe-variables.md
@ -0,0 +1,59 @@
+# Template Variable Reference
+
+## Proxy Object Fields
+
+### Basic Fields
+- `Name` - Node name
+- `Server` - Server address
+- `Port` - Server port
+- `Type` - Protocol type
+- `Tags` - Tag array
+- `Sort` - Sort order
+
+### Security Options
+- `Security` - Security protocol
+- `SNI` - TLS server name
+- `AllowInsecure` - Allow insecure connections
+- `Fingerprint` - Client fingerprint
+- `RealityServerAddr` - Reality server address
+- `RealityPublicKey` - Reality public key
+- `RealityShortId` - Reality short ID
+
+### Transport Options
+- `Transport` - Transport protocol (ws, http, grpc)
+- `Host` - Host for WebSocket/HTTP
+- `Path` - Path for HTTP/HTTPS
+- `ServiceName` - gRPC service name
+
+### Protocol-Specific Fields
+
+#### Shadowsocks
+- `Method` - Encryption method
+- `Cipher` - Cipher algorithm
+- `ServerKey` - Server key
+
+#### Vmess/Vless
+- `UUID` - User ID
+- `Flow` - Flow control mode
+- `Encryption` - Encryption type
+
+#### Trojan
+- `Password` - Password
+
+#### Hysteria2
+- `UpMbps` - Upload bandwidth
+- `DownMbps` - Download bandwidth
+- `ObfsPassword` - Obfuscation password
+
+#### TUIC
+- `CongestionController` - Congestion control algorithm
+- `UDPRelayMode` - UDP relay mode
+
+## UserInfo Fields
+
+- `Password` - User password
+- `ExpiredAt` - Expiration time
+- `Download` - Downloaded traffic
+- `Upload` - Uploaded traffic
+- `Traffic` - Total traffic
+- `SubscribeURL` - Subscription link
--- a/docs/admin/maintenance/subscribe.md
+++ b/docs/admin/maintenance/subscribe.md
@ -0,0 +1,284 @@
+<div v-pre>
+
+# Subscribe Configuration
+
+Configure global subscription settings and manage subscription templates for client applications. Subscription configuration determines how users retrieve and use proxy node information.
+
+## Page Components
+
+The Subscribe Configuration page is divided into two main modules:
+
+### 1. Subscription Configuration
+
+A card at the top of the page for configuring global subscription system settings.
+
+**Configuration Options:**
+
+**Single Subscription Mode**
+- Type: Toggle switch
+- Function: Limit users to one active subscription
+- Note: Does not affect existing subscriptions, only applies to new ones
+- Use Case: Control subscription count, prevent account sharing
+
+**Wildcard Resolution**
+- Type: Toggle switch
+- Function: Enable wildcard domain resolution for subscriptions
+- Note: Allows using wildcard domains to access subscription links
+- Example: `*.example.com` can match `sub1.example.com`, `sub2.example.com`
+
+**Subscription Path**
+- Type: Text input
+- Function: Customize URL path for subscription endpoints
+- Format: `/your-custom-path`
+- Note: Better performance after system restart
+- Example: `/api/v1/subscribe` or `/sub`
+
+**Subscription Domain**
+- Type: Multi-line text
+- Function: Customize domains for subscription links
+- Format: One domain per line
+- Example:
+  ```
+  example.com
+  www.example.com
+  sub.example.com
+  ```
+- Use Cases:
+  - Use CDN domains
+  - Multi-domain load balancing
+  - Domain backup
+
+**User-Agent Restriction**
+- Type: Toggle switch
+- Function: Enable User-Agent based access control
+- Note: Only allow whitelisted clients to access subscriptions
+- Use Case: Prevent crawlers, restrict unauthorized access
+
+**User-Agent Whitelist**
+- Type: Multi-line text
+- Function: Configure allowed User-Agent list for subscription access
+- Format: One User-Agent per line
+- Example:
+  ```
+  ClashX
+  ClashForAndroid
+  Clash-verge
+  ```
+- Note: Configured application User-Agents are automatically included
+
+### 2. Client Management
+
+Manage subscription templates and download links for different proxy clients.
+
+**Table Column Information:**
+- **Default**: Toggle switch to set as default client
+  - Default client is prioritized on subscription page
+  - Only one default client at a time
+- **Client Name**: Displays client icon and name
+- **User-Agent**: Client identifier for distinguishing different clients
+- **Output Format**: Format type of subscription content
+  - Base64: Base64 encoded format
+  - YAML: YAML configuration file format
+  - JSON: JSON data format
+  - CONF: Configuration file format
+  - Plain Text: Plain text format
+- **Supported Platforms**: Shows operating systems supported by this client
+  - Windows, macOS, Linux, iOS, Android, HarmonyOS
+- **Description**: Detailed client description
+
+**Operation Features:**
+- **Preview**: View generated subscription template content
+  - Base64 format shows both original and decoded content
+  - Other formats display content directly
+  - Supports syntax highlighting
+- **Edit**: Modify client configuration
+- **Delete**: Delete client configuration
+- **Batch Delete**: Delete multiple selected clients
+
+**Top Toolbar:**
+- **Template Repo Link**: Jump to GitHub template repository
+  - URL: https://github.com/perfect-panel/subscription-template
+  - Provides subscription template examples and documentation
+- **Add**: Create new client configuration
+
+## Client Form
+
+A sidebar form that opens when clicking "Add" or "Edit", divided into three tabs.
+
+### Basic Info
+
+**Icon**
+- Type: URL input + Upload button
+- Format: Image URL or Base64 encoding
+- Example: `https://example.com/icon.png`
+- Function: Supports direct image upload, auto-converts to Base64
+
+**Name** - Required
+- Type: Text input
+- Function: Client display name
+- Example: `Clash for Windows`, `V2rayN`
+
+**User-Agent** - Required
+- Type: Text input
+- Function: Client identifier for distinguishing different clients
+- Example: `Clash`, `V2rayN`, `ClashX`
+- Important: Must match the actual User-Agent sent by the client
+
+**Description** - Optional
+- Type: Multi-line text
+- Function: Detailed client description
+- Content: Client features, usage instructions, etc.
+
+### Templates
+
+**Output Format** - Required
+- Type: Dropdown selection
+- Options:
+  - **Base64**: Traditional subscription format, suitable for most clients
+  - **YAML**: Clash series client configuration format
+  - **JSON**: JSON format configuration for clients supporting JSON
+  - **CONF**: Configuration file format, like Shadowrocket
+  - **Plain Text**: Plain text format
+
+**Scheme** - Optional
+- Type: Text input
+- Function: Custom URL Scheme
+- Example: `clash://`, `vmess://`
+- Purpose: One-click subscription import
+
+**Template** - Required
+- Type: Go Template editor
+- Function: Write subscription content using Go template syntax
+- Supports: Syntax highlighting, code completion
+- Variables:
+  - `{{.SiteName}}`: Site name
+  - `{{.SubscribeName}}`: Subscription name
+  - `{{.Proxies}}`: Node array
+  - `{{.UserInfo}}`: User information
+
+**Template Variable Reference**
+
+For detailed template variable reference, see: [Template Variable Reference](./subscribe-variables.md)
+
+UserInfo Fields:
+
+- `Password` - User password
+- `ExpiredAt` - Expiration time
+- `Download` - Downloaded traffic
+- `Upload` - Uploaded traffic
+- `Traffic` - Total traffic
+- `SubscribeURL` - Subscription link
+
+### Downloads
+
+Configure client download URLs for multiple platforms:
+
+- **Windows**: Windows platform download link
+- **macOS**: macOS platform download link
+- **Linux**: Linux platform download link
+- **iOS**: iOS platform download link
+- **Android**: Android platform download link
+- **HarmonyOS**: HarmonyOS download link
+
+Each platform is optional. When filled, corresponding platform badges will be displayed in the client list.
+
+## Use Cases
+
+### Scenario 1: Configure Clash Client
+
+1. Click "Add"
+2. Basic Info:
+   - Name: `Clash for Windows`
+   - User-Agent: `Clash`
+   - Icon: Upload Clash icon
+3. Templates:
+   - Output Format: Select `YAML`
+   - Template: Write Clash YAML configuration template
+4. Downloads:
+   - Windows: `https://github.com/Fndroid/clash_for_windows_pkg/releases`
+   - macOS: `https://github.com/yichengchen/clashX/releases`
+5. Click "Confirm"
+
+### Scenario 2: Configure Traditional Base64 Subscription
+
+1. Click "Add"
+2. Basic Info:
+   - Name: `Universal`
+   - User-Agent: `*`
+3. Templates:
+   - Output Format: Select `Base64`
+   - Template: Write standard vmess/vless URI list
+4. Set as default client
+5. Click "Confirm"
+
+### Scenario 3: Restrict Subscription Access
+
+1. Open "Subscription Configuration"
+2. Enable "User-Agent Restriction"
+3. Add to "User-Agent Whitelist":
+   ```
+   Clash
+   V2rayN
+   ClashX
+   Quantumult
+   ```
+4. Save configuration
+5. Only whitelisted clients can access subscriptions
+
+### Scenario 4: Use Custom Domain
+
+1. Open "Subscription Configuration"
+2. Add to "Subscription Domain":
+   ```
+   sub.example.com
+   cdn.example.com
+   ```
+3. Configure "Subscription Path": `/api/sub`
+4. Save configuration
+5. Users can access subscriptions via `https://sub.example.com/api/sub/{token}`
+
+## Template Writing Guide
+
+### Base64 Format Example
+```go
+{{range .Proxies}}{{.Type}}://{{.UUID}}@{{.Server}}:{{.Port}}?security={{.Security}}&sni={{.SNI}}#{{.Name}}
+{{end}}
+```
+
+### Clash YAML Format Example
+```yaml
+proxies:
+{{range .Proxies}}
+  - name: {{.Name}}
+    type: {{.Type}}
+    server: {{.Server}}
+    port: {{.Port}}
+    {{if eq .Type "vless"}}uuid: {{.UUID}}{{end}}
+    {{if eq .Type "vmess"}}uuid: {{.UUID}}{{end}}
+    {{if eq .Type "trojan"}}password: {{.Password}}{{end}}
+{{end}}
+```
+
+### Conditional Logic Example
+```go
+{{range .Proxies}}
+{{if eq .Type "vless"}}
+vless://{{.UUID}}@{{.Server}}:{{.Port}}
+{{else if eq .Type "vmess"}}
+vmess://{{.UUID}}@{{.Server}}:{{.Port}}
+{{end}}
+{{end}}
+```
+
+## Important Notes
+
+1. **User-Agent Matching**: Must exactly match the User-Agent sent by the client, otherwise cannot be correctly identified
+2. **Template Syntax**: Uses Go Template syntax, syntax errors will cause subscription generation failure
+3. **Output Format**: Ensure template output matches selected format, e.g., YAML format requires correct indentation
+4. **Default Client**: Only one default client at a time, setting new default will cancel the old one
+5. **Domain Configuration**: Custom domains need to be correctly configured in DNS and web server
+6. **Path Changes**: After changing subscription path, system restart recommended for best performance
+7. **Preview Function**: Use preview to test if template generates correctly
+8. **Template Repository**: Refer to GitHub template repository for more examples and best practices
+
+</div>
--- a/docs/admin/operations/announcement.md
+++ b/docs/admin/operations/announcement.md
@ -0,0 +1,131 @@
+<div v-pre>
+
+# Announcement Management
+
+Create and manage system announcements with display control, pinning, and popup features.
+
+## Table Column Description
+
+### Show
+Switch button to control whether the announcement displays on the frontend.
+
+### Pinned
+Switch button to control whether the announcement is pinned to top.
+
+### Popup
+Switch button to control whether to show announcement as popup when users visit.
+
+### Title
+Announcement title.
+
+### Content
+Announcement body content (supports Markdown).
+
+### Updated At
+Last update time.
+
+## Table Operations
+
+### Edit
+Opens side drawer form to modify announcement information.
+
+### Delete
+Deletes announcement (requires confirmation), cannot be recovered.
+
+### Batch Delete
+Deletes multiple selected announcements.
+
+## Announcement Form
+
+### Title (Required)
+Announcement title text.
+
+### Content (Required)
+Announcement body content, supports Markdown format:
+- Headings: # ## ###
+- Bold: **text**
+- Italic: *text*
+- Lists: - item
+- Links: [text](url)
+- Code: `code`
+
+## Filter Functions
+
+### Enable Filter
+- Show: View displayed announcements
+- Hide: View hidden announcements
+
+### Keyword Search
+Search announcements by title or content.
+
+## Usage Scenarios
+
+### Scenario 1: Create Important Notice
+
+**Form Config**:
+- Title: System Maintenance Notice
+- Content:
+  ```
+  # System Maintenance Notice
+
+  The system will undergo maintenance upgrade on **Jan 1, 2024 02:00-04:00**.
+
+  ## Affected Scope
+  - Website temporarily unavailable
+  - Services unaffected
+
+  Thank you for your understanding!
+  ```
+- Show: On
+- Pinned: On
+- Popup: On
+
+### Scenario 2: Create Activity Announcement
+
+**Form Config**:
+- Title: Double 11 Sale
+- Content:
+  ```
+  ## 🎉 Double 11 Sale
+
+  - All plans **20% OFF**
+  - Annual plans get extra **30 days**
+  - Period: 11.11-11.13
+
+  [Buy Now](/subscribe)
+  ```
+- Show: On
+- Pinned: On
+- Popup: No
+
+### Scenario 3: Create Usage Guide
+
+**Form Config**:
+- Title: Beginner's Guide
+- Content:
+  ```
+  # Beginner's Guide
+
+  ## 1. Purchase Plan
+  Go to [Subscribe Page](/subscribe) and select a plan
+
+  ## 2. Download Client
+  Visit [Documentation](/docs) to download client
+
+  ## 3. Import Config
+  Copy subscription link to client
+  ```
+- Show: On
+- Pinned: No
+- Popup: No
+
+## Important Notes
+
+1. **Markdown Support**: Content supports Markdown for beautiful formatting
+2. **Popup Feature**: When enabled, users see popup on every visit
+3. **Pinned Display**: Pinned announcements appear at top of list
+4. **Display Control**: Can create first, then enable display later
+5. **Batch Delete**: Delete operation irreversible, use carefully
+6. **Update Time**: Timestamp updates on every edit
+
+</div>
--- a/docs/admin/operations/marketing.md
+++ b/docs/admin/operations/marketing.md
@ -0,0 +1,155 @@
+<div v-pre>
+
+# Marketing Management
+
+Provides two major marketing functions: email marketing and quota services for batch user outreach and benefit distribution.
+
+## Function Modules
+
+### Email Marketing
+
+Contains two functions:
+
+#### 1. Email Broadcast
+
+Send marketing emails to users in bulk.
+
+**Form Fields**:
+
+- **Email Subject** (Required) - Email title
+- **Email Content** (Required) - Supports HTML editor for rich text emails
+- **Send Scope** - Select target user group:
+  - All users
+  - Users with subscriptions
+  - Users without subscriptions
+  - Filter by registration time
+- **Registration Time Range** (Optional) - Filter users registered in specific period
+- **Additional Emails** (Optional) - Manually input extra email addresses, one per line
+- **Scheduled Send** (Optional) - Set future send time
+- **Send Interval** (Optional) - Seconds between each email (minimum 0.1s)
+- **Daily Limit** (Optional) - Maximum sends per day (minimum 1)
+
+**Recipient Statistics**:
+Form displays in real-time:
+- System users count
+- Additional emails count
+- Total recipients count
+
+#### 2. Email Task Manager
+
+View and manage email sending tasks.
+
+**Task List Shows**:
+- Task ID
+- Subject
+- Send status
+- Sent count
+- Total count
+- Creation time
+
+**Task Operations**:
+- View details
+- Pause/Resume
+- Delete task
+
+### Quota Service
+
+Batch gift traffic, days, or balance to users.
+
+#### 1. Quota Broadcast
+
+Batch gift benefits to subscribed users.
+
+**Form Fields**:
+
+- **Select Packages** (Required) - Multi-select target product plans
+- **Subscription Status** - Filter condition:
+  - Active subscriptions only
+  - Include expired subscriptions
+- **Subscription Time Range** (Optional) - Filter users subscribed in specific period
+- **Reset Traffic** - Switch, whether to reset user traffic when gifting
+- **Gift Type** (Required) - Radio:
+  - Traffic (GB)
+  - Days
+  - Balance
+- **Gift Value** (Required) - Specific gift amount
+
+**Recipient Statistics**:
+Form displays qualifying user count in real-time.
+
+#### 2. Quota Task Manager
+
+View and manage quota distribution tasks.
+
+**Task List Shows**:
+- Task ID
+- Package names
+- Gift type and amount
+- Processing status
+- Processed/Total
+- Creation time
+
+**Task Operations**:
+- View details
+- Delete task
+
+## Usage Scenarios
+
+### Scenario 1: New User Welcome Email
+
+**Email Broadcast Config**:
+- Subject: Welcome!
+- Content: Design welcome email (HTML)
+- Scope: All users
+- Registration: Last 7 days
+- Interval: 1 second
+- Daily Limit: 1000
+
+### Scenario 2: Promotion Notification
+
+**Email Broadcast Config**:
+- Subject: Limited Time! 20% Off Annual Plans
+- Content: Activity details (HTML)
+- Scope: Users with subscriptions
+- Scheduled: 1 hour before activity
+
+### Scenario 3: Gift Traffic Benefit
+
+**Quota Broadcast Config**:
+- Packages: Standard Monthly
+- Status: Active only
+- Subscription Time: Past 30 days
+- Reset Traffic: No
+- Gift Type: Traffic
+- Gift Value: 10 GB
+
+### Scenario 4: Gift Membership Duration
+
+**Quota Broadcast Config**:
+- Packages: All packages
+- Status: Active only
+- Reset Traffic: No
+- Gift Type: Days
+- Gift Value: 7
+
+### Scenario 5: Balance Cashback
+
+**Quota Broadcast Config**:
+- Packages: Premium Plan
+- Status: Active only
+- Subscription Time: Past 7 days
+- Gift Type: Balance
+- Gift Value: $10
+
+## Important Notes
+
+1. **Email Sending**: Watch interval and limits to avoid spam classification
+2. **HTML Content**: Emails support rich text for beautiful marketing content
+3. **Scheduled Tasks**: Can set future time for automatic sending
+4. **Real-time Stats**: Recipient count calculated in real-time, preview before submit
+5. **Task Management**: Can view task execution progress and status
+6. **Quota Gifting**: Quotas distributed immediately, cannot be revoked
+7. **Traffic Reset**: Checking will reset user's current traffic
+8. **Package Filtering**: Can precisely select target user groups
+
+</div>
--- a/docs/admin/system/ads.md
+++ b/docs/admin/system/ads.md
@ -0,0 +1,172 @@
+<div v-pre>
+
+# Ads Management
+
+Create and manage platform advertisements with multiple ad types and validity period control.
+
+## Table Column Description
+
+### Status
+Switch button to control whether ad is displayed.
+
+### Title
+Ad title.
+
+### Type
+Ad type (displayed as Badge):
+- Banner
+- Popup
+- Sidebar
+- Notice
+
+### Target URL
+Link to redirect when ad is clicked.
+
+### Description
+Ad description text.
+
+### Validity Period
+Ad display time range:
+- Start time
+- End time
+
+## Table Operations
+
+### Edit
+Opens side drawer to modify ad.
+
+### Delete
+Deletes ad (requires confirmation), cannot be recovered.
+
+### Create Ad
+Adds new advertisement.
+
+## Ad Form
+
+### Title (Required)
+Ad title displayed to users.
+
+### Type (Required)
+Select ad type:
+- **Banner**: Top or bottom banner ad
+- **Popup**: Page popup ad
+- **Sidebar**: Fixed sidebar ad
+- **Notice**: Scrolling notice bar ad
+
+### Target URL (Optional)
+URL to redirect when ad is clicked:
+- External link: https://example.com
+- Internal page: /pricing
+- Leave empty for non-clickable
+
+### Description (Optional)
+Ad description or detailed content.
+
+### Image URL (Optional, required for some types)
+Ad image address:
+- Banner and Popup usually need images
+- Use external image links
+- Recommended sizes: Banner 1920x200, Popup 800x600
+
+### Validity Period (Required)
+Set ad display time range:
+- Start Time: When ad starts displaying
+- End Time: When ad stops displaying
+- Can create scheduled ads in advance
+
+### Status (Default disabled)
+Control whether ad displays immediately:
+- Disabled by default when created
+- Displays during validity period when enabled
+
+## Filter Functions
+
+### Status Filter
+Select "Enabled" or "Disabled" to view corresponding ads.
+
+### Keyword Search
+Search ad titles.
+
+## Usage Scenarios
+
+### Scenario 1: Create Promotional Banner
+
+**Form Config**:
+- Title: Double 11 Special Sale
+- Type: Banner
+- Target URL: /pricing
+- Description: 20% off all plans
+- Image URL: https://cdn.example.com/banner-1111.jpg
+- Validity Period:
+  - Start: 2024-11-11 00:00
+  - End: 2024-11-11 23:59
+- Status: Enabled
+
+### Scenario 2: Create Popup Announcement
+
+**Form Config**:
+- Title: Important System Upgrade Notice
+- Type: Popup
+- Target URL: /announcement/123
+- Description: System maintenance tonight 22:00-23:00...
+- Image URL: https://cdn.example.com/popup-upgrade.jpg
+- Validity Period:
+  - Start: 2024-01-15 08:00
+  - End: 2024-01-15 23:00
+- Status: Enabled
+
+### Scenario 3: Create Sidebar Promotion
+
+**Form Config**:
+- Title: Refer Friends for Commission
+- Type: Sidebar
+- Target URL: /invite
+- Description: Invite friends to register, get 10% commission
+- Image URL: https://cdn.example.com/sidebar-invite.jpg
+- Validity Period:
+  - Start: 2024-01-01 00:00
+  - End: 2024-12-31 23:59
+- Status: Enabled
+
+### Scenario 4: Create Notice Ticker
+
+**Form Config**:
+- Title: New Node Online
+- Type: Notice
+- Target URL: /nodes
+- Description: New Los Angeles high-speed node, try it now!
+- Validity Period:
+  - Start: 2024-01-20 00:00
+  - End: 2024-01-27 23:59
+- Status: Enabled
+
+## Ad Display Rules
+
+### Display Conditions
+Ad must satisfy all:
+1. Status is "Enabled"
+2. Current time within validity period
+3. Corresponding page supports the type
+
+### Display Position
+- **Banner**: Top or bottom of page
+- **Popup**: Pops up on page load
+- **Sidebar**: Fixed on right side of page
+- **Notice**: Scrolling bar at top of page
+
+### Display Frequency
+- Popup type: Once per user per day
+- Other types: Continuous display
+
+## Important Notes
+
+1. **Validity Period**: Expired ads auto-hide, no manual disabling needed
+2. **External Images**: Use CDN links for fast loading
+3. **Link Testing**: Test target link before creation
+4. **Size Standards**: Different ad types need different image sizes
+5. **Content Compliance**: Ad content must comply with laws
+6. **Create in Advance**: Can create scheduled ads ahead of time
+7. **Popup Frequency**: Don't show popups too frequently
+8. **Mobile Adaptation**: Ensure images display properly on mobile
+
+</div>
--- a/docs/admin/system/auth-control.md
+++ b/docs/admin/system/auth-control.md
@ -0,0 +1,114 @@
+# Auth Control
+
+>`System → Auth Control` focuses on **how** users log in and verify their identity. Configure email, SMS, social sign-in, and device authentication in one place, with built-in testing tools so every change can be validated instantly.
+
+## Module Overview
+
+- **Communication methods**: Email + SMS login, complete with verification flows, whitelists, and message templates.
+- **Social accounts**: Apple, Google, Facebook, GitHub, and Telegram can be toggled independently.
+- **Device authentication**: Hardens device-based login with VM detection and communication keys.
+
+The following sections mirror the cards you see in the admin panel—work through them in order, test, then save.
+
+## Communication Methods
+
+### Email authentication
+
+1. **Basic switches**
+   - `Enable email sign-in`: Controls whether the login form shows the email path.
+   - `Email verification`: Forces new users or sensitive actions to complete email OTP first.
+   - `Domain whitelist`: Only allow addresses from specific domains (one suffix per line, e.g. `gmail.com`).
+
+2. **SMTP platform**
+   - `Server` & `Port`: SMTP host/port (most providers use 25/465/587).
+   - `SSL/TLS`: Match the encryption required by your provider.
+   - `Account / Password`: SMTP credentials (app passwords recommended).
+   - `From address`: What recipients see in their inbox; must match an allowed sender.
+   - `Send test email`: Enter any inbox and send immediately to confirm deliverability.
+
+3. **Template tabs** (`Verify / Expiration / Maintenance / Traffic`)
+   - Templates are HTML-capable and support variables:
+     - `{{.Type}}`: Email type (1 register, 2 reset password); combine with `{{if eq .Type 1}}` for conditions.
+     - `{{.SiteLogo}}` / `{{.SiteName}}`: Branding assets.
+     - `{{.Expire}}`: OTP expiration; `{{.ExpireDate}}`: Subscription expiration.
+     - `{{.Code}}`: Verification code.
+     - `{{.MaintenanceDate}}`, `{{.MaintenanceTime}}`: Maintenance notice specifics.
+   - The embedded editor is WYSIWYG—save to apply instantly to new outbound mail.
+
+### SMS authentication
+
+1. **Login policy**
+   - `Enable SMS sign-in`: Turns the phone-number OTP entry on/off.
+   - `Whitelist area codes`: When enabled, only listed codes (e.g. `1, 852, 886`) are accepted.
+
+2. **Platform & dynamic fields**
+   - Select an SMS provider; the form reveals the exact fields that provider requires and offers a shortcut link to apply for service.
+   - Common fields include `Access Key`, `Secret Key`, `Endpoint`, `Template Code`, `Sign Name`, and dedicated sender numbers.
+   - If the provider expects custom templates, paste the body that contains `{{code}}` (or its vendor-specific variable).
+
+3. **Test SMS**
+   - Choose an area code, enter a number, and click “Test SMS” to call the gateway immediately.
+   - Most failures trace back to invalid credentials, pending template review, or a mismatched signature—verify inside the vendor console.
+
+## Social Authentication
+
+All social options share the same drawer layout: toggle the method, fill in the credentials, then save to expose the login button to end users.
+
+### Apple Sign-In
+- **Team ID / Key ID**: From Apple Developer.
+- **Service ID (Client ID)**: Created under Apple Developer → Identifiers.
+- **Private Key**: Contents of the `.p8` key file (keep the `BEGIN/END` markers).
+- **Redirect URL**: API endpoint the user returns to after Apple auth; omit trailing `/`.
+
+### Google Sign-In
+- **Client ID / Client Secret**: OAuth credentials created in Google Cloud Console (Web application type).
+- Add your site’s callback—for example `/api/auth/google/callback`—to the authorized redirect URIs.
+
+### Facebook Login
+- **App ID / App Secret**: From the Facebook Developer portal. Make sure your domain is listed under “Valid OAuth Redirect URIs”.
+
+### GitHub Login
+- **Client ID / Client Secret**: From GitHub Developer Settings → OAuth Apps.
+- Set the callback to something like `https://your-domain.com/api/auth/github/callback` and require HTTPS.
+
+### Telegram Login
+- **Bot ID / Bot Token**: Generated via @BotFather (enable the Login Widget permission).
+- Users authorize by interacting with your bot; once configured the official Telegram dialog will pop up automatically.
+
+## Device Authentication
+
+Best for client/TV apps that exchange a one-time device code.
+
+- `Enable device sign-in`: Allows devices to authenticate via code or QR pairing.
+- `Show ads`: Toggles advertising surfaces on the device experience.
+- `Block virtual machine`: Rejects requests coming from emulators/VMs.
+- `Enable security`: Forces every device request to include a shared communication key.
+- `Communication key`: Paste your own or click the dice icon to auto-generate a 32-character GUID; create one per channel and keep it secret.
+
+## Operational Tips
+
+- Snapshot SMTP/SMS credentials before switching providers so you can roll back quickly.
+- Always use “Send test email” or “Test SMS” after editing settings—production users should never be the first to try a new config.
+- Provider-specific SMS fields change dynamically; if a required field is missing, define it in the vendor console via template variables.
+- For OAuth flows (Apple/Google/etc.), rehearse the entire login in a sandbox account to confirm the redirect URI and scopes are correct.
+- Treat the communication key as a secret—share it only with trusted client apps and never commit it to version control.
+
+## FAQs
+
+### Email sends but users still see “verification failed”
+- Confirm the domain whitelist includes the user’s email suffix.
+- Some enterprise SMTP vendors require the From address to exactly match the authenticated account—otherwise the message is dropped.
+
+### SMS keeps failing
+- Ensure the template is approved and that the placeholder name (e.g., `{{code}}`) matches what the vendor expects.
+- Verify the destination area code is whitelisted.
+- Still failing? Inspect the API error code in DevTools and cross reference it with the SMS provider documentation.
+
+### OAuth redirect mismatch errors
+- Facebook, Google, and GitHub demand an exact match on the redirect URI, including protocol and trailing path—copy the admin value verbatim into the vendor console.
+
+## Related Docs
+
+- [System Config](/admin/system/config): Branding, SMTP defaults, and other site-wide settings.
+- [Payment Config](/admin/system/payment): Configure gateways after your login flows are working.
+- [Ads Config](/admin/system/ads): Pairs with the “Show ads” option in device authentication.
--- a/docs/admin/system/config.md
+++ b/docs/admin/system/config.md
@ -0,0 +1,556 @@
+# System Configuration
+
+The System Configuration module manages global settings and parameters, controlling overall system behavior.
+
+## Overview
+
+### Basic Settings
+
+System basic configuration:
+
+- **Site Name**: System display name
+- **Site Logo**: Website logo image
+- **Site Icon**: Browser tab icon (Favicon)
+- **Site Description**: Site intro and SEO description
+- **Keywords**: SEO keywords
+- **Contact Info**: Customer service contact
+
+### System Info
+
+View system runtime information:
+
+- **System Version**: Current version number
+- **Environment**: Server environment info
+- **Uptime**: System uptime
+- **Status**: Current running status
+- **Database**: Database configuration
+- **Cache**: Cache configuration and status
+
+## Site Configuration
+
+### Site Information
+
+Configure site basics:
+
+- **Site Name**: Display name on pages
+- **Tagline**: Subtitle or slogan
+- **Logo**: Upload website logo
+- **Favicon**: Upload favicon
+- **Copyright**: Footer copyright info
+- **ICP Registration**: Site registration number
+
+### SEO Settings
+
+Search engine optimization:
+
+- **Page Title**: Default page title
+- **Keywords**: SEO keyword settings
+- **Description**: Site description
+- **robots.txt**: Search crawler rules
+- **sitemap**: Sitemap configuration
+
+### Contact Information
+
+Set contact methods:
+
+- **Support Email**: Customer service email
+- **Phone**: Customer service phone
+- **Live Chat**: Live chat link
+- **Ticket System**: Ticket submission URL
+- **Social Media**: Social media links
+
+## Email Configuration
+
+### SMTP Settings
+
+Configure email service:
+
+- **SMTP Server**: Mail server address
+- **SMTP Port**: Server port (25/465/587)
+- **From Address**: Sender email address
+- **From Name**: Display sender name
+- **SMTP Username**: SMTP auth username
+- **SMTP Password**: SMTP auth password
+- **Encryption**: SSL/TLS encryption
+
+### Email Templates
+
+Configure email content:
+
+- **Registration Email**: Registration verification
+- **Password Reset**: Password reset email
+- **Order Notification**: Order-related notices
+- **System Notification**: System messages
+- **Marketing Email**: Marketing campaigns
+
+### Email Testing
+
+Test email configuration:
+
+- Send test email
+- Verify configuration
+- Check delivery rate
+- View send logs
+
+## SMS Configuration
+
+### SMS Provider
+
+Configure SMS service:
+
+- **Provider**: Alibaba Cloud/Tencent Cloud/Other
+- **AccessKey**: API access key
+- **AccessSecret**: API secret
+- **SMS Signature**: SMS sender signature
+- **SMS Template**: SMS content template
+
+### SMS Templates
+
+Configure SMS content:
+
+- **Verification Code**: Login/register verification
+- **Notification SMS**: Order, renewal notices
+- **Marketing SMS**: Campaign promotions
+
+### SMS Testing
+
+Test SMS functionality:
+
+- Send test SMS
+- Verify configuration
+- View send records
+
+## Storage Configuration
+
+### Local Storage
+
+Local file storage:
+
+- **Storage Path**: File storage directory
+- **Access URL**: File access address
+- **Max Size**: Single file size limit
+- **Allowed Types**: Allowed file types
+
+### Cloud Storage
+
+Object storage service:
+
+**Alibaba Cloud OSS**:
+- Endpoint
+- AccessKey ID
+- AccessKey Secret
+- Bucket name
+- CDN domain
+
+**Tencent Cloud COS**:
+- SecretId
+- SecretKey
+- Bucket
+- Region
+- CDN domain
+
+**AWS S3**:
+- Access Key
+- Secret Key
+- Bucket
+- Region
+- CDN
+
+### CDN Configuration
+
+CDN acceleration:
+
+- **CDN Domain**: Acceleration domain
+- **Cache Rules**: Cache policy
+- **Hotlink Protection**: Anti-hotlinking
+- **HTTPS**: HTTPS configuration
+
+## Security Configuration
+
+### Access Control
+
+Control system access:
+
+- **Maintenance Mode**: Enable maintenance
+- **IP Whitelist**: Allowed IPs
+- **IP Blacklist**: Blocked IPs
+- **Rate Limiting**: API rate limits
+- **Login Limits**: Failed login attempts
+
+### Password Policy
+
+Set password security policy:
+
+- **Min Length**: Minimum password length
+- **Complexity**: Must include letters/numbers/symbols
+- **Expiration**: Password validity period
+- **History**: Cannot reuse old passwords
+- **Initial Password**: Default password rules
+
+### Two-Factor Authentication
+
+Two-step verification:
+
+- **Enable 2FA**: Mandatory or optional
+- **Auth Method**: SMS/Email/TOTP
+- **Valid Time**: Verification code validity
+- **Backup Method**: Alternative verification
+
+### SSL/TLS
+
+HTTPS security:
+
+- **Force HTTPS**: Enforce HTTPS
+- **SSL Certificate**: Upload SSL certificate
+- **HSTS**: HTTP Strict Transport Security
+- **Certificate Renewal**: Auto-renewal
+
+## Cache Configuration
+
+### Cache Type
+
+Select cache method:
+
+- **File Cache**: Use file system
+- **Redis Cache**: Use Redis
+- **Memcached**: Use Memcached
+
+### Redis Settings
+
+Redis cache configuration:
+
+- **Redis Host**: Redis server address
+- **Redis Port**: Default 6379
+- **Redis Password**: Auth password
+- **Database**: Redis database number
+- **Prefix**: Cache key prefix
+
+### Cache Management
+
+Manage system cache:
+
+- **Clear Cache**: Clear all cache
+- **Refresh Cache**: Refresh specific cache
+- **Cache Stats**: View cache usage
+- **Warm Cache**: Preload common data
+
+## Queue Configuration
+
+### Queue Driver
+
+Configure task queue:
+
+- **Sync**: Synchronous execution
+- **Database**: Use database queue
+- **Redis**: Use Redis queue
+- **Other**: RabbitMQ etc.
+
+### Queue Settings
+
+Queue configuration:
+
+- **Queue Name**: Queue identifier
+- **Retry**: Retry attempts on failure
+- **Timeout**: Task execution timeout
+- **Concurrency**: Concurrent execution count
+
+### Queue Monitoring
+
+Monitor queue status:
+
+- **Queue Length**: Pending tasks
+- **Running**: Tasks in progress
+- **Failed**: Failed tasks
+- **History**: Execution history
+
+## Log Configuration
+
+### Log Settings
+
+Configure system logs:
+
+- **Log Level**: DEBUG/INFO/WARNING/ERROR
+- **Log Channel**: File/Database/Cloud
+- **Retention**: Log retention days
+- **Rotation**: Log file rotation policy
+
+### Log Types
+
+Different log types:
+
+- **System Logs**: System runtime logs
+- **Error Logs**: Errors and exceptions
+- **Access Logs**: HTTP access logs
+- **Operation Logs**: User operation logs
+- **Security Logs**: Security-related logs
+
+### Log Viewing
+
+View and analyze logs:
+
+- **Real-time Logs**: Live log viewing
+- **Log Search**: Search log content
+- **Log Filtering**: Filter by conditions
+- **Log Export**: Export log files
+
+## Scheduled Tasks
+
+### Task Configuration
+
+Configure scheduled tasks:
+
+- **Task Name**: Task identifier
+- **Schedule**: Cron expression
+- **Task Type**: Task execution type
+- **Parameters**: Task parameters
+- **Status**: Enable or disable
+
+### Task Management
+
+Manage scheduled tasks:
+
+- **Enable/Disable**: Control execution
+- **Run Now**: Manual trigger
+- **History**: View execution records
+- **Task Logs**: View execution logs
+
+### Common Tasks
+
+System preset tasks:
+
+- **Data Statistics**: Daily statistics
+- **Data Cleanup**: Clean expired data
+- **Email Sending**: Batch email sending
+- **Order Check**: Check order status
+- **Auto Renewal**: Automatic renewal
+- **Backup**: Data backup tasks
+
+## Notification Configuration
+
+### Notification Channels
+
+Configure notification methods:
+
+- **In-app**: System messages
+- **Email**: Email push
+- **SMS**: SMS push
+- **Webhook**: HTTP callbacks
+- **Push Service**: App push
+
+### Notification Events
+
+Configure notification events:
+
+- **User Registration**: New user registration
+- **Order Payment**: Order payment notice
+- **Subscription Expiry**: Expiry reminder
+- **Ticket Created**: New ticket notice
+- **System Alert**: System anomalies
+
+### Notification Templates
+
+Configure notification content:
+
+- **Template Management**: Manage templates
+- **Variable Substitution**: Dynamic variables
+- **Multi-language**: Multi-language templates
+- **Template Testing**: Test templates
+
+## API Configuration
+
+### API Settings
+
+API interface configuration:
+
+- **API Toggle**: Enable or disable API
+- **API Keys**: Generate API keys
+- **API Domain**: API access domain
+- **Version Control**: API versioning
+- **Documentation**: API docs link
+
+### API Restrictions
+
+API access control:
+
+- **Rate Limiting**: Requests per minute
+- **Concurrency**: Concurrent requests
+- **IP Restrictions**: IP access control
+- **Signature Verification**: API signatures
+
+### Webhook
+
+Webhook configuration:
+
+- **Callback URL**: Webhook URL
+- **Event Subscription**: Subscribed events
+- **Secret Key**: Signature verification
+- **Retry Policy**: Retry on failure
+
+## Third-party Integration
+
+### Payment Integration
+
+Integrate payment services:
+
+- Alipay
+- WeChat Pay
+- PayPal
+- Stripe
+- Cryptocurrency
+
+### Analytics Integration
+
+Integrate analytics tools:
+
+- Google Analytics
+- Baidu Analytics
+- Umeng Analytics
+- Custom tracking code
+
+### Support Integration
+
+Integrate support systems:
+
+- Live chat
+- Zendesk
+- Intercom
+- Custom support system
+
+## Maintenance Mode
+
+### Enable Maintenance
+
+System maintenance mode:
+
+- **Maintenance Toggle**: Enable maintenance
+- **Maintenance Message**: Display message
+- **Whitelist**: Accessible IPs during maintenance
+- **Estimated Time**: Completion time
+
+### Maintenance Settings
+
+Maintenance configuration:
+
+- **Maintenance Page**: Custom maintenance page
+- **Allow Access**: Accessible paths
+- **Redirect**: Redirect during maintenance
+- **Scheduled**: Schedule maintenance
+
+## System Optimization
+
+### Performance Optimization
+
+Optimize system performance:
+
+- **Enable Cache**: Enable various caches
+- **Static Assets**: CDN acceleration
+- **Database**: Database optimization
+- **Image Optimization**: Compression and lazy loading
+- **Code Optimization**: Minification and bundling
+
+### Database Optimization
+
+Database performance:
+
+- **Index Optimization**: Add appropriate indexes
+- **Query Optimization**: Optimize slow queries
+- **Data Archiving**: Archive historical data
+- **Data Cleanup**: Clean unused data
+
+## Backup & Recovery
+
+### Data Backup
+
+Data backup configuration:
+
+- **Auto Backup**: Scheduled automatic backup
+- **Backup Content**: Database/Files
+- **Backup Location**: Local/Cloud storage
+- **Retention**: Retention count and time
+- **Notification**: Backup completion notice
+
+### Data Recovery
+
+Data recovery operations:
+
+- **Select Backup**: Choose backup file
+- **Confirm Recovery**: Confirm operation
+- **Execute Recovery**: Perform recovery
+- **Verify**: Verify data integrity
+
+## System Monitoring
+
+### Server Monitoring
+
+Monitor server status:
+
+- **CPU Usage**: CPU utilization
+- **Memory Usage**: Memory utilization
+- **Disk Space**: Disk usage
+- **Network Traffic**: Network usage
+- **Process Status**: Process status
+
+### Application Monitoring
+
+Monitor application status:
+
+- **Online Users**: Current online users
+- **Request Rate**: Requests per second
+- **Response Time**: Average response time
+- **Error Rate**: Error occurrence rate
+- **Queue Status**: Queue task status
+
+### Alert Settings
+
+Configure monitoring alerts:
+
+- **Alert Rules**: Set alert conditions
+- **Alert Methods**: Email/SMS/Webhook
+- **Alert Levels**: Warning/Error/Critical
+- **Recipients**: Alert recipients
+
+## Best Practices
+
+- Regular data backups
+- Timely system updates
+- Reasonable cache strategy
+- Monitor system status
+- Regular data cleanup
+- Database optimization
+- Security measures
+- Log important operations
+
+## Troubleshooting
+
+### Email Send Failure
+
+Check:
+
+1. Is SMTP config correct
+2. Is email service enabled
+3. Is network connection ok
+4. Marked as spam
+
+### Cache Not Working
+
+Possible causes:
+
+1. Cache config error
+2. Redis connection failed
+3. Cache key issues
+4. Cache cleared
+
+### Scheduled Task Not Running
+
+Check:
+
+1. Is task enabled
+2. Is cron expression correct
+3. Is server time accurate
+4. Is queue service running
+
+## Next Steps
+
+- [Auth Control](/admin/system/auth-control) - Configure permissions
+- [Payment Config](/admin/system/payment) - Configure payments
+- [Log Management](/admin/logs/login-logs) - View system logs
--- a/docs/admin/system/payment.md
+++ b/docs/admin/system/payment.md
@ -0,0 +1,180 @@
+<div v-pre>
+
+# Payment Management
+
+Manage platform supported payment methods and view payment channel statistics.
+
+## Payment Method Table
+
+### Table Column Description
+
+#### Status
+Switch button to control whether payment method is enabled.
+
+#### Name
+Payment method name.
+
+#### Type
+Payment channel type:
+- Alipay
+- WeChat Pay
+- PayPal
+- Stripe
+- Cryptocurrency
+
+#### Configuration
+View payment method configuration status.
+
+#### Updated At
+Last update time.
+
+### Table Operations
+
+#### Edit
+Opens side drawer to modify payment config:
+- API keys
+- Merchant ID
+- Callback URL
+- Transaction fee rate
+- Min/Max amount
+
+#### Delete
+Deletes payment method (requires confirmation).
+
+#### Create Payment Method
+Adds new payment channel.
+
+## Payment Statistics Panel
+
+Displays statistics for each payment method:
+
+### Total Transaction Amount
+Cumulative transaction amount for each method.
+
+### Transaction Count
+Number of transactions per method.
+
+### Success Rate
+Payment success rate statistics.
+
+### Transaction Fees
+Fees generated by each method.
+
+## Payment Configuration Form
+
+### Basic Information
+- Payment method name
+- Payment type
+- Display icon
+- Display order
+
+### API Configuration
+Different payment methods require different configs:
+
+**Alipay**:
+- App ID
+- Merchant Private Key
+- Alipay Public Key
+- Callback URL
+
+**WeChat Pay**:
+- Merchant ID
+- API Key
+- App ID
+- App Secret
+- Certificate files
+
+**PayPal**:
+- Client ID
+- Client Secret
+- Sandbox mode
+
+**Stripe**:
+- Publishable Key
+- Secret Key
+- Webhook Secret
+
+**Cryptocurrency**:
+- Wallet address
+- API key
+- Confirmation blocks
+
+### Transaction Settings
+- Minimum payment amount
+- Maximum payment amount
+- Transaction fee rate
+- Payment timeout
+
+## Usage Scenarios
+
+### Scenario 1: Configure Alipay
+
+**Create Payment Method**:
+- Name: Alipay
+- Type: Alipay
+- App ID: 2021xxx
+- Merchant Private Key: [key content]
+- Alipay Public Key: [key content]
+- Callback URL: https://myvpn.com/callback/alipay
+- Min Amount: ¥1
+- Max Amount: ¥10000
+- Fee Rate: 0.6%
+- Status: Enabled
+
+### Scenario 2: Configure Stripe
+
+**Create Payment Method**:
+- Name: Credit Card Payment
+- Type: Stripe
+- Publishable Key: pk_live_xxx
+- Secret Key: sk_live_xxx
+- Webhook Secret: whsec_xxx
+- Callback URL: https://myvpn.com/callback/stripe
+- Min Amount: $1
+- Max Amount: $1000
+- Fee Rate: 2.9% + $0.30
+- Status: Enabled
+
+### Scenario 3: Configure Cryptocurrency
+
+**Create Payment Method**:
+- Name: USDT Payment
+- Type: Crypto
+- Currency: USDT (TRC-20)
+- Wallet Address: TXxx...
+- API Key: [optional]
+- Confirmation Blocks: 1
+- Min Amount: 10 USDT
+- Exchange Rate API: Real-time fetch
+- Status: Enabled
+
+## Payment Callback
+
+### Callback Handling
+Platform auto-handles payment callbacks:
+1. Verify callback signature
+2. Update order status
+3. Credit user balance
+4. Send notification email
+
+### Callback Logs
+View payment callback logs:
+- Callback time
+- Payment status
+- Order information
+- Error messages (if any)
+
+## Important Notes
+
+1. **Key Security**: Protect API keys and certificates
+2. **Callback Verification**: Must verify callback signature to prevent forgery
+3. **Test Environment**: Validate config in test environment first
+4. **HTTPS Required**: Callback URLs must use HTTPS
+5. **Transaction Fees**: Calculate fees properly to avoid losses
+6. **Amount Limits**: Set reasonable min/max payment amounts
+7. **Timeout Handling**: Set reasonable payment timeout
+8. **Exchange Rates**: Crypto requires real-time rates
+9. **Certificate Updates**: Regularly update payment certificates
+10. **Backup Channels**: Configure multiple payment methods for availability
+
+</div>
--- a/docs/admin/users-support/documents.md
+++ b/docs/admin/users-support/documents.md
@ -0,0 +1,468 @@
+# Document Management
+
+The Document Management module creates and maintains help documentation and knowledge base for self-service user support.
+
+## Overview
+
+### Document List
+
+View and manage all documents:
+
+- **Title**: Document name
+- **Category**: Document category
+- **Status**: Draft/Published/Offline
+- **Author**: Document creator
+- **Created**: Creation date
+- **Updated**: Last modified time
+- **Views**: View count
+- **Rating**: User ratings and reviews
+
+### Create Document
+
+Create new help document:
+
+#### Basic Info
+
+- **Title**: Clear and specific title
+- **Category**: Select category
+- **Tags**: Add keyword tags
+- **Summary**: Brief content summary
+
+#### Document Content
+
+- **WYSIWYG Editor**: Visual editor
+- **Markdown Support**: Markdown format
+- **Code Highlighting**: Syntax highlighting
+- **Image Upload**: Insert images and screenshots
+- **Video Embed**: Embed video tutorials
+- **Tables**: Insert table data
+
+#### Document Settings
+
+- **Access Control**: Public/Members/Specific groups
+- **Display Order**: Set priority
+- **Related Docs**: Link related documents
+- **SEO Settings**: Set SEO keywords
+
+### Edit Document
+
+Modify existing documents:
+
+- Update content
+- Optimize structure
+- Add new information
+- Fix errors
+
+::: tip Tip
+Documents support version control. View history and restore previous versions.
+:::
+
+### Delete Document
+
+Remove unneeded documents:
+
+- **Soft Delete**: Offline but keep data
+- **Hard Delete**: Permanently remove
+- Retain view records for statistics
+
+## Document Categories
+
+### Getting Started
+
+Help new users onboard:
+
+**Includes**:
+- Account registration
+- First-time usage
+- Basic configuration
+- Common questions
+
+### Tutorials
+
+Detailed feature guides:
+
+**Includes**:
+- Feature explanation
+- Step-by-step instructions
+- Configuration methods
+- Best practices
+
+### FAQ
+
+Frequently asked questions:
+
+**Includes**:
+- Common issues
+- Quick answers
+- Troubleshooting
+- Solutions
+
+### Technical Docs
+
+Technical documentation:
+
+**Includes**:
+- API documentation
+- Protocol specifications
+- Technical parameters
+- Developer guides
+
+### Policies & Terms
+
+Legal documents:
+
+**Includes**:
+- Service agreement
+- Privacy policy
+- Terms of use
+- Refund policy
+
+## Document Organization
+
+### Category Management
+
+Manage categories:
+
+- **Create Category**: Add new category
+- **Edit Category**: Modify category info
+- **Sort**: Adjust category order
+- **Delete Category**: Remove empty categories
+
+### Tag Management
+
+Manage tags:
+
+- **Add Tag**: Create new tag
+- **Edit Tag**: Modify tag name
+- **Merge Tags**: Merge similar tags
+- **Delete Tag**: Remove unused tags
+
+### Directory Structure
+
+Organize document tree:
+
+- **Multi-level**: Support nested categories
+- **Tree Structure**: Clear hierarchy
+- **Drag & Sort**: Drag to reorder
+- **Quick Navigation**: Tree navigation
+
+## Document Editing
+
+### Rich Text Editor
+
+Powerful editing features:
+
+- **Formatting**: Text formatting
+- **Lists**: Ordered/unordered lists
+- **Quotes**: Blockquotes
+- **Code**: Code blocks
+- **Links**: Hyperlinks
+- **Images**: Image insertion
+- **Tables**: Table editing
+- **Videos**: Video embedding
+
+### Markdown Editing
+
+Support Markdown syntax:
+
+```markdown
+# Heading
+## Subheading
+
+- List item
+- List item
+
+**Bold** *Italic*
+
+[Link](url)
+
+\`code\`
+
+\`\`\`language
+code block
+\`\`\`
+```
+
+### Version Control
+
+Document versioning:
+
+- **Auto-save**: Auto-save drafts
+- **Version History**: Record changes
+- **Version Diff**: Compare versions
+- **Rollback**: Restore previous version
+
+## Document Publishing
+
+### Publish Settings
+
+Configure publishing:
+
+- **Publish Now**: Show immediately
+- **Schedule**: Set publish time
+- **Save Draft**: Save as draft
+- **Preview**: Preview before publish
+
+### Access Control
+
+Control document access:
+
+- **Public**: Everyone can access
+- **Members**: Members only
+- **VIP**: VIP only
+- **Internal**: Staff only
+
+### Multi-language Support
+
+Multi-language documents:
+
+- **Language Versions**: Create language versions
+- **Language Switch**: User switches language
+- **Translation Management**: Manage translations
+- **Sync Updates**: Sync across languages
+
+## Document Search
+
+### Search Features
+
+Help users find documents:
+
+- **Full-text Search**: Search content
+- **Title Search**: Search by title
+- **Tag Search**: Filter by tags
+- **Category Filter**: Filter by category
+- **Search Suggestions**: Smart suggestions
+
+### Search Optimization
+
+Optimize search experience:
+
+- **Ranking**: Sort by relevance
+- **Highlighting**: Highlight keywords
+- **Search History**: Record history
+- **Popular Searches**: Show trending
+
+## Document Interaction
+
+### User Ratings
+
+Collect feedback:
+
+- **Helpful/Not**: Simple rating
+- **Star Rating**: Star ratings
+- **Comments**: Text reviews
+- **Suggestions**: Improvement ideas
+
+### Document Feedback
+
+User feedback:
+
+- **Report Error**: Report errors
+- **Suggestions**: Propose improvements
+- **Request Update**: Request updates
+- **Live Chat**: Contact support
+
+### Social Sharing
+
+Share documents:
+
+- **Share Link**: Generate link
+- **Social Media**: Share to platforms
+- **QR Code**: Generate QR code
+- **Embed Code**: Embed in websites
+
+## Statistics
+
+### View Statistics
+
+Track views:
+
+- **Views**: Total view count
+- **Unique Visitors**: Unique users
+- **View Trend**: View changes
+- **Popular Docs**: Most viewed
+
+### User Behavior
+
+Analyze behavior:
+
+- **Reading Time**: Average time
+- **Bounce Rate**: Quick exit ratio
+- **Search Keywords**: User queries
+- **Click Path**: User navigation
+
+### Effectiveness
+
+Evaluate effectiveness:
+
+- **Helpful Rate**: Helpful rating ratio
+- **Resolution Rate**: Problem solved ratio
+- **Ticket Reduction**: Related ticket decrease
+- **User Satisfaction**: Overall satisfaction
+
+## Knowledge Base
+
+### KB Structure
+
+Build systematic knowledge base:
+
+- **Product Knowledge**: Features and usage
+- **Technical Knowledge**: Principles and methods
+- **Business Knowledge**: Processes and standards
+- **Problem Knowledge**: Common issues and solutions
+
+### Knowledge Accumulation
+
+Accumulate knowledge:
+
+- **Ticket Conversion**: Convert tickets to docs
+- **Experience Summary**: Summarize cases
+- **Best Practices**: Record best practices
+- **Expert Contribution**: Expert shares
+
+### Knowledge Updates
+
+Keep KB current:
+
+- **Regular Review**: Periodic review
+- **Timely Updates**: Update promptly
+- **Deprecation Marks**: Mark outdated
+- **Version Management**: Manage versions
+
+## Document Templates
+
+### Common Templates
+
+Preset templates:
+
+- **Tutorial Template**: Tutorial format
+- **FAQ Template**: Q&A format
+- **Troubleshooting Template**: Troubleshooting format
+- **API Doc Template**: API documentation format
+
+### Custom Templates
+
+Create custom templates:
+
+- Design document structure
+- Define content format
+- Save as template
+- Reuse templates
+
+## Collaboration
+
+### Team Collaboration
+
+Collaborative editing:
+
+- **Permission Management**: Assign edit rights
+- **Co-editing**: Multiple editors
+- **Comments**: Add comments
+- **Review Process**: Document review
+
+### Review & Publish
+
+Review mechanism:
+
+1. **Create Draft**: Edit content
+2. **Submit**: Submit for review
+3. **Review**: Reviewer checks
+4. **Publish**: Publish after approval
+5. **Monitor**: Track effectiveness
+
+## Best Practices
+
+### Content Writing
+
+- Clear and specific titles
+- Accurate and detailed content
+- Clear and easy steps
+- Supporting images
+- Regular updates
+
+### Organization
+
+- Reasonable categorization
+- Clear hierarchy
+- Consistent naming
+- Complete indexing
+
+### User Experience
+
+- Simple interface
+- Fast search
+- Easy navigation
+- Mobile-friendly
+
+### Continuous Optimization
+
+- Collect feedback
+- Analyze usage data
+- Optimize content
+- Improve knowledge system
+
+## Document Examples
+
+### Getting Started Example
+
+**Title**: How to Get Started
+
+**Structure**:
+1. Register account
+2. Choose package
+3. Configure usage
+4. Common questions
+
+### Tutorial Example
+
+**Title**: XX Feature Tutorial
+
+**Structure**:
+1. Feature introduction
+2. Use cases
+3. Step-by-step guide
+4. Important notes
+5. FAQ
+
+### FAQ Example
+
+**Title**: Connection Issues FAQ
+
+**Structure**:
+- Q: Cannot connect, what to do?
+- A: Detailed solution steps...
+
+## Troubleshooting
+
+### Cannot Save Document
+
+Check:
+
+1. Is network connection ok
+2. Do you have edit permission
+3. Is content too large
+4. Is browser compatible
+
+### Search Cannot Find
+
+Possible causes:
+
+1. Document not published
+2. Insufficient access rights
+3. Keyword mismatch
+4. Search index not updated
+
+### Format Issues
+
+Solutions:
+
+1. Use standard format
+2. Clean copied format
+3. Use templates
+4. Check HTML code
+
+## Next Steps
+
+- [Ticket Management](/admin/users-support/tickets) - Handle user issues
+- [User Management](/admin/users-support/users) - Analyze user needs
+- [System Config](/admin/system/config) - Configure document system
--- a/docs/admin/users-support/tickets.md
+++ b/docs/admin/users-support/tickets.md
@ -0,0 +1,479 @@
+# Ticket Management
+
+The Ticket Management module handles user-submitted issues and requests, providing efficient customer support services.
+
+## Overview
+
+### Ticket List
+
+View and manage all tickets:
+
+- **Ticket ID**: Unique identifier
+- **Title**: Issue summary
+- **Type**: Technical/Account/Complaint/Suggestion
+- **Priority**: Urgent/High/Medium/Low
+- **Status**: Pending/In Progress/Resolved/Closed
+- **Submitter**: Ticket creator
+- **Assignee**: Handler
+- **Created**: Submission time
+- **Updated**: Last update time
+- **Response Time**: First response duration
+- **Resolution Time**: Problem resolution duration
+
+### Ticket Details
+
+View complete ticket information:
+
+- **Basic Info**: Title, type, priority
+- **Content**: Detailed description
+- **Attachments**: Screenshots, files
+- **Communication**: Complete conversation history
+- **Processing Log**: Ticket workflow records
+- **User Info**: Submitter details
+- **Related Orders**: Associated order info
+
+## Ticket Types
+
+### Technical Support
+
+Technical issues:
+
+**Common Issues**:
+- Connection problems
+- Configuration issues
+- Performance issues
+- Compatibility issues
+- Usage tutorials
+
+**Handling Points**:
+- Quick diagnosis
+- Provide solutions
+- Remote assistance if needed
+- Follow up until resolved
+
+### Account Issues
+
+Account-related problems:
+
+**Common Issues**:
+- Login problems
+- Password reset
+- Account security
+- Info modification
+- Account deletion
+
+**Handling Points**:
+- Verify identity
+- Protect account security
+- Process promptly
+- Log operations
+
+### Order Issues
+
+Order-related problems:
+
+**Common Issues**:
+- Order inquiry
+- Payment issues
+- Refund requests
+- Invoice issuance
+- Order modification
+
+**Handling Points**:
+- Verify order info
+- Follow procedures
+- Update progress
+- Ensure satisfaction
+
+### Product Inquiry
+
+Product-related questions:
+
+**Common Issues**:
+- Product features
+- Package selection
+- Usage recommendations
+- Upgrade options
+- Pricing policies
+
+**Handling Points**:
+- Professional answers
+- Recommend suitable options
+- Provide detailed materials
+- Promote conversions
+
+### Complaints & Suggestions
+
+User feedback:
+
+**Common Content**:
+- Service complaints
+- Product suggestions
+- Feature requests
+- Experience feedback
+
+**Handling Points**:
+- Listen carefully
+- Respond promptly
+- Handle appropriately
+- Track improvements
+
+## Ticket Workflow
+
+### Ticket Creation
+
+User submits ticket:
+
+1. **Select Type**: Choose ticket type
+2. **Enter Title**: Brief description
+3. **Detailed Description**: Explain situation
+4. **Upload Attachments**: Add screenshots
+5. **Submit**: Submit for processing
+
+### Ticket Assignment
+
+Auto or manual assignment:
+
+**Auto Assignment**:
+- By ticket type
+- By workload
+- By expertise
+
+**Manual Assignment**:
+- Admin assigns
+- Agent claims
+- By priority
+
+### Ticket Processing
+
+Agent handles ticket:
+
+1. **Receive**: View details
+2. **Analyze**: Understand issue
+3. **Communicate**: Discuss with user
+4. **Provide Solution**: Offer resolution
+5. **Execute**: Perform actions
+6. **Confirm Resolution**: Verify solved
+7. **Close**: Close resolved ticket
+
+### Ticket Escalation
+
+Escalate when needed:
+
+- **Level 1**: Submit to senior support
+- **Level 2**: Submit to tech team
+- **Urgent**: Submit to management
+- **Cross-department**: Multi-team collaboration
+
+### Ticket Closure
+
+Close after completion:
+
+- **Resolved**: Successfully solved
+- **User Confirmed**: User satisfied
+- **Auto-close**: Timeout auto-close
+- **No Action Needed**: Invalid ticket close
+
+## Status Management
+
+### Pending
+
+Newly submitted:
+
+- Awaiting assignment
+- Needs quick response
+- Sorted by priority
+- SLA timer starts
+
+### In Progress
+
+Being handled:
+
+- Agent assigned
+- Actively resolving
+- May take time
+- Regular updates
+
+### Awaiting User
+
+Waiting for feedback:
+
+- Need user information
+- Awaiting confirmation
+- Pause SLA timer
+- Auto-reminder on timeout
+
+### Resolved
+
+Problem solved:
+
+- Solution provided
+- Issue resolved
+- Awaiting user confirmation
+- May reopen
+
+### Closed
+
+Ticket closed:
+
+- Process complete
+- Archived
+- Viewable history
+- No further modification
+
+## Priority Management
+
+### Urgent
+
+Highest priority:
+
+**Scenarios**:
+- Service down
+- Security vulnerability
+- Data loss
+- Critical bug
+
+**Requirements**:
+- Immediate response
+- Priority handling
+- Quick resolution
+- Full tracking
+
+### High
+
+High priority:
+
+**Scenarios**:
+- Core function failure
+- Affects multiple users
+- VIP customer issues
+
+**Requirements**:
+- 2-hour response
+- Same-day resolution
+- Timely feedback
+
+### Medium
+
+Normal priority:
+
+**Scenarios**:
+- General function issues
+- Usage inquiries
+- Regular requests
+
+**Requirements**:
+- 24-hour response
+- 3-day resolution
+- Follow standard process
+
+### Low
+
+Low priority:
+
+**Scenarios**:
+- Feature suggestions
+- Experience optimization
+- Documentation issues
+
+**Requirements**:
+- 3-day response
+- Reasonable scheduling
+- Planned resolution
+
+## Communication
+
+### Reply
+
+Communicate with user:
+
+- **Public Reply**: User-visible response
+- **Internal Note**: Internal communication
+- **Attachments**: Upload files, screenshots
+- **Templates**: Use quick reply templates
+
+### Quick Replies
+
+Preset templates:
+
+- FAQ answers
+- Standard responses
+- Operation guides
+- One-click send
+
+### Communication Tips
+
+Effective communication:
+
+- Friendly and professional tone
+- Clear and specific replies
+- Provide concrete solutions
+- Timely follow-up
+- Confirm satisfaction
+
+## Statistics
+
+### Ticket Volume
+
+Track quantity:
+
+- **Total Tickets**: All tickets
+- **New Tickets**: Daily new tickets
+- **Pending**: Unresolved tickets
+- **Resolved**: Resolved tickets
+- **Trend**: Volume changes
+
+### Efficiency
+
+Analyze performance:
+
+- **Avg Response Time**: First response duration
+- **Avg Resolution Time**: Problem resolution duration
+- **Resolution Rate**: Success ratio
+- **Timeout Rate**: SLA breach ratio
+
+### Agent Performance
+
+Staff statistics:
+
+- **Handled**: Tickets per agent
+- **Resolution Rate**: Success ratio
+- **User Satisfaction**: User ratings
+- **Response Speed**: Avg response time
+
+### Issue Analysis
+
+Analyze common issues:
+
+- **Categorization**: Issue distribution
+- **Frequent Issues**: Most common
+- **Difficult Issues**: Hard to resolve
+- **Improvements**: Optimization directions
+
+## SLA Management
+
+### SLA Standards
+
+Service level agreement:
+
+**Response Time**:
+- Urgent: Within 15 minutes
+- High: Within 2 hours
+- Medium: Within 24 hours
+- Low: Within 3 days
+
+**Resolution Time**:
+- Urgent: Within 4 hours
+- High: Within 1 day
+- Medium: Within 3 days
+- Low: Within 7 days
+
+### SLA Monitoring
+
+Track SLA compliance:
+
+- Real-time SLA monitoring
+- Alert on approaching timeout
+- Track SLA achievement rate
+- Analyze timeout causes
+
+## Automation
+
+### Auto-assignment
+
+Automatic ticket assignment:
+
+- By type
+- Load balancing
+- Round-robin
+- Smart assignment
+
+### Auto-reply
+
+Auto-respond to common issues:
+
+- FAQ auto-answers
+- Receipt confirmation
+- Status change notifications
+
+### Auto-escalation
+
+Auto-escalate overdue tickets:
+
+- Timeout auto-escalate
+- Urgent auto-escalate
+- Repeat issue auto-escalate
+
+### Auto-closure
+
+Auto-close tickets:
+
+- Resolved timeout auto-close
+- No response auto-close
+- Duplicate auto-merge
+
+## Knowledge Base Integration
+
+### FAQ
+
+Build FAQ knowledge base:
+
+- Compile common questions
+- Provide standard answers
+- Self-service lookup
+- Reduce ticket volume
+
+### Solution Library
+
+Document solutions:
+
+- Record typical cases
+- Summarize resolution methods
+- Team knowledge sharing
+- Improve efficiency
+
+## Best Practices
+
+- Respond promptly to tickets
+- Accurately understand issues
+- Provide professional solutions
+- Maintain friendly communication
+- Follow up until resolved
+- Build comprehensive knowledge base
+- Regularly analyze ticket data
+- Continuously optimize processes
+
+## Troubleshooting
+
+### Slow Response
+
+Possible causes:
+
+1. High ticket volume
+2. Insufficient staff
+3. Poor assignment
+4. Priority issues
+
+### Poor Handling Quality
+
+Improvements:
+
+1. Enhance training
+2. Improve knowledge base
+3. Optimize workflow
+4. Establish assessment
+
+### Low Satisfaction
+
+Improvements:
+
+1. Improve response speed
+2. Better service attitude
+3. Enhance resolution capability
+4. Strengthen communication
+
+## Next Steps
+
+- [User Management](/admin/users-support/users) - View user info
+- [Document Management](/admin/users-support/documents) - Improve help docs
+- [System Config](/admin/system/config) - Configure ticket system
--- a/docs/admin/users-support/users.md
+++ b/docs/admin/users-support/users.md
@ -0,0 +1,335 @@
+# User Management
+
+The User Management module manages all user accounts in the system, which is the foundation of system operations.
+
+## Overview
+
+### User List
+
+View and manage all users:
+
+- **User Info**: Username, email, phone
+- **User Group**: VIP/Regular/Trial, etc.
+- **Account Status**: Active/Disabled/Expired
+- **Balance**: Account balance
+- **Traffic**: Used/Total traffic
+- **Validity**: Subscription expiry date
+- **Registration**: Account registration date
+- **Last Login**: Last login time
+
+### User Filtering
+
+Quickly find users:
+
+- **By Status**: Active/Disabled/Expired
+- **By Group**: VIP/Regular users
+- **By Registration**: Date range filter
+- **By Traffic**: Filter by traffic usage
+- **By Device**: Online/Offline users
+- **Search**: Username/Email/Phone search
+
+### Add User
+
+Manually create new user account:
+
+#### Basic Info
+
+- **Username**: Login username (unique)
+- **Email**: User email address
+- **Phone**: Contact phone (optional)
+- **Password**: Initial password
+
+#### Subscription Info
+
+- **User Group**: Select user group
+- **Traffic Quota**: Set traffic allowance
+- **Validity**: Set expiry date
+- **Speed Limit**: Set rate cap
+- **Device Limit**: Concurrent device count
+
+#### Account Settings
+
+- **Balance**: Initial account balance
+- **Points**: Initial points
+- **Referral Code**: Custom invite code
+- **Notes**: User notes
+
+### Edit User
+
+Modify user info and config:
+
+- **Update Basic Info**: Change email, phone, etc.
+- **Adjust Subscription**: Modify traffic, validity
+- **Balance Operations**: Top-up or deduct balance
+- **Reset Password**: Reset password for user
+- **Change Group**: Upgrade or downgrade group
+
+### Delete User
+
+Delete user account:
+
+- **Soft Delete**: Mark deleted but keep data
+- **Hard Delete**: Permanently delete user and data
+- **Batch Delete**: Delete multiple users
+
+::: warning Warning
+Deleting a user will clear all subscriptions and usage records. Proceed with caution.
+:::
+
+## User Operations
+
+### Disable/Enable
+
+Control user account status:
+
+- **Disable Account**: Suspend service access
+- **Enable Account**: Restore normal usage
+- **Disable Reason**: Record reason
+- **Auto Unban**: Set auto-unban time
+
+### Traffic Operations
+
+Manage user traffic:
+
+- **Add Traffic**: Add traffic for user
+- **Deduct Traffic**: Deduct user traffic
+- **Reset Traffic**: Reset to initial value
+- **Traffic Log**: View traffic change history
+
+### Duration Operations
+
+Manage subscription duration:
+
+- **Extend Time**: Extend validity period
+- **Shorten Time**: Reduce duration
+- **Set Expiry**: Set specific expiry date
+- **Lifetime**: Set to never expire
+
+### Balance Operations
+
+Manage user balance:
+
+- **Top-up**: Recharge user account
+- **Deduct**: Deduct from account
+- **Transfer**: Transfer between users
+- **Balance Log**: View balance changes
+
+## User Details
+
+### Basic Info
+
+View complete user information:
+
+- Account basic profile
+- Subscription status and quota
+- Balance and points
+- Referral information
+
+### Subscription Info
+
+View user subscription details:
+
+- Current subscription package
+- Traffic usage
+- Remaining validity
+- Node access permissions
+
+### Usage Statistics
+
+Analyze user usage data:
+
+- **Traffic Stats**: Daily/Weekly/Monthly traffic
+- **Online Duration**: Usage time statistics
+- **Node Preference**: Common node analysis
+- **Device Stats**: Device count statistics
+
+### Order Records
+
+View user purchase history:
+
+- Historical order list
+- Order amount statistics
+- Purchase frequency analysis
+- Renewal status
+
+### Login Records
+
+View user login history:
+
+- Login time
+- Login IP
+- Login device
+- Login location
+
+### Online Devices
+
+View user online devices:
+
+- Device type and OS
+- Connected node
+- Online duration
+- Force offline function
+
+## User Grouping
+
+### Group Management
+
+Create and manage user groups:
+
+- **Group Name**: User group display name
+- **Permissions**: Node access permissions
+- **Traffic Quota**: Default group traffic
+- **Speed Limit**: Group rate cap
+- **Other Limits**: Devices, concurrency, etc.
+
+### Batch Grouping
+
+Batch set user groups:
+
+- Select multiple users
+- Specify target group
+- Batch update groups
+- Keep or reset quotas
+
+## User Search
+
+### Advanced Search
+
+Search users with multiple conditions:
+
+- **Combined Conditions**: Multiple criteria
+- **Range Search**: Traffic, balance ranges
+- **Time Range**: Registration, expiry
+- **Custom Fields**: Notes and other fields
+
+### Save Search
+
+Save frequently used search criteria:
+
+- Quick apply search
+- Manage saved searches
+- Share search criteria
+
+## User Export
+
+Export user data:
+
+### Export Options
+
+- **Export Format**: Excel/CSV
+- **Export Fields**: Custom export fields
+- **Data Range**: All or filtered results
+- **Data Masking**: Handle sensitive info
+
+### Batch Import
+
+Batch import users:
+
+- Download import template
+- Fill user data
+- Upload Excel file
+- Validate and import
+
+## User Notification
+
+### Send Notification
+
+Send messages to users:
+
+- **Internal Message**: System notifications
+- **Email**: Send email notifications
+- **SMS**: Send SMS notifications
+- **Batch Notify**: Send messages in batch
+
+### Notification Templates
+
+Manage notification templates:
+
+- Create message templates
+- Use variable substitution
+- Multi-language templates
+- Scheduled sending
+
+## User Analysis
+
+### User Profile
+
+Analyze user characteristics:
+
+- **Basic Attributes**: Age, region distribution
+- **Behavioral**: Usage habits, activity
+- **Consumption**: AOV, repurchase rate
+- **Churn Risk**: Churn prediction
+
+### User Value
+
+Evaluate user value:
+
+- **RFM Analysis**: Recency, Frequency, Monetary
+- **Lifecycle**: User lifecycle stage
+- **Contribution**: Revenue contribution ranking
+- **Activity**: Usage activity level
+
+## User Security
+
+### Security Settings
+
+Enhance account security:
+
+- **Force 2FA**: Require two-factor auth
+- **IP Whitelist**: Restrict login IPs
+- **Device Management**: Manage authorized devices
+- **Anomaly Detection**: Detect abnormal logins
+
+### Risk Control
+
+Prevent malicious users:
+
+- **Behavior Monitoring**: Monitor abnormal behavior
+- **Risk Scoring**: User risk level
+- **Auto Ban**: Auto-disable on rule trigger
+- **Blacklist**: Permanently block users
+
+## Best Practices
+
+- Regularly review user account status
+- Process expired user renewals promptly
+- Focus on high-value user needs
+- Analyze churn user reasons
+- Protect user privacy data
+- Establish tiered user service
+
+## Troubleshooting
+
+### Cannot Login
+
+Check:
+
+1. Is account disabled
+2. Is password correct
+3. Are security restrictions triggered
+4. Is system service normal
+
+### Traffic Anomaly
+
+Possible reasons:
+
+1. Statistics service failure
+2. Node reporting anomaly
+3. User device issues
+4. Malicious usage
+
+### Batch Operation Failed
+
+Check:
+
+1. Number of users selected
+2. Operation permissions
+3. Is data format correct
+4. Are system resources sufficient
+
+## Next Steps
+
+- [Ticket Management](/admin/users-support/tickets) - Handle user tickets
+- [Order Management](/admin/commerce/orders) - View user orders
+- [Login Logs](/admin/logs/login) - View login records
--- a/docs/admin/users/document.md
+++ b/docs/admin/users/document.md
@ -0,0 +1,144 @@
+<div v-pre>
+
+# Document Management
+
+Create and manage help documents with Markdown format and tag classification.
+
+## Table Column Description
+
+### Show
+Switch button to control whether document displays on frontend.
+
+### Title
+Document title.
+
+### Tags
+Document classification tags, multiple tags separated by commas.
+
+### Updated At
+Last update time.
+
+## Table Operations
+
+### Edit
+Opens side drawer form to modify document.
+
+### Delete
+Deletes document (requires confirmation), cannot be recovered.
+
+### Batch Delete
+Deletes multiple selected documents.
+
+## Document Form
+
+### Title (Required)
+Document title.
+
+### Tags (Required)
+Document classification tags, supports multiple tags:
+- Common tags: Beginner Guide, Tutorial, FAQ, Technical Support
+- Press Enter after inputting tag to add
+- Click tag to delete
+
+### Content (Required)
+Document body, supports Markdown format:
+- Headings: # ## ### ####
+- Bold: **text**
+- Italic: *text*
+- Code blocks: ```language
+- Images: ![alt](url)
+- Links: [text](url)
+- Lists: - or 1.
+- Quotes: >
+- Tables: | Col1 | Col2 |
+
+## Filter Functions
+
+### Keyword Search
+Search documents by title.
+
+### Tag Filter
+Input tag to find documents in that category.
+
+## Usage Scenarios
+
+### Scenario 1: Create Beginner Guide
+
+**Form Config**:
+- Title: Quick Start Guide
+- Tags: Beginner Guide, Tutorial
+- Content:
+  ```markdown
+  # Quick Start Guide
+
+  ## 1. Register Account
+  Visit website to register...
+
+  ## 2. Purchase Plan
+  Go to subscribe page...
+
+  ## 3. Download Client
+  Supported platforms:
+  - Windows
+  - macOS
+  - Android
+  - iOS
+  ```
+- Show: On
+
+### Scenario 2: Create FAQ
+
+**Form Config**:
+- Title: Frequently Asked Questions
+- Tags: FAQ, Common Issues
+- Content:
+  ```markdown
+  # FAQ
+
+  ## How to reset password?
+  A: Click "Forgot Password" on login page...
+
+  ## How to check traffic usage?
+  A: View in profile after login...
+
+  ## What to do after subscription expires?
+  A: Can renew or purchase new plan...
+  ```
+- Show: On
+
+### Scenario 3: Create Platform Tutorial
+
+**Form Config**:
+- Title: Windows Client Tutorial
+- Tags: Tutorial, Windows
+- Content:
+  ```markdown
+  # Windows Client Tutorial
+
+  ## Download & Install
+  1. Download client
+  2. Run installer
+  3. Complete installation
+
+  ## Configure Subscription
+  1. Copy subscription link
+  2. Open client
+  3. Import subscription
+
+  ## Connect Service
+  Select node and click connect
+  ```
+- Show: On
+
+## Important Notes
+
+1. **Markdown Support**: Content supports full Markdown syntax
+2. **Tag Management**: Proper tags help users find content
+3. **Display Control**: Can create first, enable display later
+4. **Image Links**: Use external URLs for images
+5. **Code Highlighting**: Code blocks support syntax highlighting
+6. **Batch Operations**: Can batch delete outdated documents
+7. **Search Optimization**: Titles and tags are search indexed
+8. **Update Indicator**: Update time changes after modification
+
+</div>
--- a/docs/admin/users/ticket.md
+++ b/docs/admin/users/ticket.md
@ -0,0 +1,103 @@
+<div v-pre>
+
+# Ticket Management
+
+View and handle user-submitted tickets with reply and close functions.
+
+## Table Column Description
+
+### Title
+Ticket title.
+
+### User
+User who submitted the ticket.
+
+### Status
+Current ticket status (with color indicator):
+- **Pending Follow-up** (Red) - Newly submitted, awaiting admin
+- **Pending Reply** (Yellow) - Admin replied, awaiting user
+- **Resolved** (Green) - Issue resolved
+- **Closed** (Gray) - Ticket closed
+
+### Updated At
+Last update time.
+
+## Table Operations
+
+### Reply
+Opens ticket conversation drawer:
+- View complete ticket conversation
+- Input reply content
+- After sending, status changes to "Pending Reply"
+
+### Close
+Closes ticket (requires confirmation):
+- Status becomes "Closed"
+- Cannot operate after closure
+- User can still view
+
+### Check
+View closed ticket conversation (read-only).
+
+## Ticket Conversation
+
+After opening ticket, shows conversation interface:
+
+**Conversation Messages**:
+- Ticket description (user's first message)
+- All follow-up records
+- Shows timestamps
+- Distinguishes user/admin messages
+
+**Reply Ticket**:
+1. Input reply in bottom text box
+2. Click send button
+3. Message displays immediately
+4. Status auto-updates to "Pending Reply"
+
+**Auto Refresh**:
+- Auto-refreshes every 5 seconds
+- Gets latest messages
+
+## Filter Functions
+
+### Status Filter
+Select "Closed" to view closed tickets.
+
+## Usage Scenarios
+
+### Scenario 1: Handle New Ticket
+
+1. View "Pending Follow-up" tickets
+2. Click "Reply" button
+3. Read user's question
+4. Input solution
+5. Send reply
+6. User receives notification
+
+### Scenario 2: Close After Resolution
+
+1. Open ticket conversation
+2. Confirm issue resolved
+3. Click "Close" button
+4. Confirm close operation
+5. Ticket marked as closed
+
+### Scenario 3: Multiple Rounds of Conversation
+
+1. Open ticket
+2. View conversation history
+3. Reply with new message
+4. Continue following up until resolved
+
+## Important Notes
+
+1. **Timely Reply**: Pending tickets should be handled promptly
+2. **Conversation Records**: All messages permanently saved
+3. **Auto Refresh**: Conversation auto-updates every 5 seconds
+4. **Close Restriction**: Cannot reply after closure
+5. **Status Change**: Auto-changes to "Pending Reply" after replying
+6. **User Notification**: User receives notification after reply
+7. **View Closed**: Closed tickets viewable but not replyable
+
+</div>
--- a/docs/admin/users/user.md
+++ b/docs/admin/users/user.md
@ -0,0 +1,146 @@
+<div v-pre>
+
+# User Management
+
+Manage all users in the system, including user information editing, subscription management, balance management, and more.
+
+## Table Column Description
+
+### Enable
+Switch button to control whether user account is active. Disabled users cannot login.
+
+### ID
+User unique identifier ID.
+
+### Username
+Shows authentication method (EMAIL/GITHUB etc) and auth identifier (email/username). Checkmark after identifier indicates verified.
+
+### Balance
+User account balance.
+
+### Gift Amount
+Amount gifted by system.
+
+### Commission
+Commission earned through user referrals.
+
+### Invite Code
+User's exclusive invite code.
+
+### Referer
+Referrer who invited this user to register.
+
+### Created At
+User registration time.
+
+## Table Operations
+
+### Edit (Profile)
+Opens user profile side drawer with three tabs:
+
+**Basic Info**:
+- Enable status
+- Balance
+- Gift amount
+- Commission
+- Invite code
+- Referer ID
+
+**Notify Settings**:
+- Balance change notification
+- Login notification
+- Subscription notification
+- Trade notification
+
+**Auth Methods**:
+- View and manage user login methods
+- Email, GitHub, etc.
+
+### Subscription
+Opens subscription management side drawer to view and manage user subscriptions:
+- Subscription list
+- Subscription status
+- Expiry time
+- Traffic usage
+- Subscription operations
+
+### Delete
+Deletes user (requires confirmation), cannot be recovered.
+
+### More
+Dropdown menu for quick navigation to:
+- Order list
+- Login logs
+- Balance logs
+- Commission logs
+- Gift logs
+
+## Filter Functions
+
+### Subscription Filter
+Select product plan to view users who purchased that plan.
+
+### Keyword Search
+Search users by email, username, etc.
+
+### User ID Filter
+Direct input of user ID for precise search.
+
+### Subscription ID Filter
+Input subscription ID to find corresponding user.
+
+## Create User
+
+Click "Create" button to open form:
+
+**Required Fields**:
+- Auth Type: EMAIL/GITHUB etc
+- Auth Identifier: Email address or username
+- Password: User login password
+
+**Optional Fields**:
+- Balance: Initial balance
+- Referer ID: Bind referral relationship
+
+## Usage Scenarios
+
+### Scenario 1: Disable Violating User
+
+1. Find target user
+2. Turn off "Enable" switch
+3. User immediately cannot login
+
+### Scenario 2: Top Up User Balance
+
+1. Click "Edit" button
+2. Enter "Basic Info" tab
+3. Modify balance amount
+4. Save changes
+
+### Scenario 3: View User Subscriptions
+
+1. Click "Subscription" button
+2. View all user subscriptions
+3. Can operate subscriptions (renew, reset traffic, etc)
+
+### Scenario 4: Track User Behavior
+
+1. Click "More" button
+2. Select corresponding log:
+   - Login logs: View login records
+   - Balance logs: View balance changes
+   - Commission logs: View commission earnings
+   - Gift logs: View system gifts
+
+## Important Notes
+
+1. **Enable Control**: Disabling user immediately kicks them out
+2. **Balance Modification**: Direct balance modification, watch amount units
+3. **Delete User**: Operation irreversible, confirm before deletion
+4. **Subscription Management**: Can operate directly in user subscription page
+5. **Log Tracking**: Quickly view various user logs through "More" menu
+6. **Referral Relationship**: Can specify referrer when creating user
+7. **Batch Operations**: Currently not supported
+8. **Invite Code**: Each user has unique invite code
+
+</div>
--- a/docs/api/admin.md
+++ b/docs/api/admin.md
@ -0,0 +1,13 @@
+---
+title: Admin Service API
+outline: false
+aside: false
+---
+
+# Admin Service
+
+Administrative endpoints that power the dashboard, operations, commerce, user management, and analytics modules.
+
+<ClientOnly>
+  <ScalarIframe spec-url="https://raw.githubusercontent.com/perfect-panel/ppanel-docs/refs/heads/main/public/swagger/admin.json" title="Admin Service" />
+</ClientOnly>
--- a/docs/api/common.md
+++ b/docs/api/common.md
@ -0,0 +1,13 @@
+---
+title: Common Service API
+outline: false
+aside: false
+---
+
+# Common Service
+
+Shared endpoints (authentication, utilities, helpers) that are reused across both the admin and user panels. The schema is served directly from GitHub so it always reflects the latest backend implementation.
+
+<ClientOnly>
+  <ScalarIframe spec-url="https://raw.githubusercontent.com/perfect-panel/ppanel-docs/refs/heads/main/public/swagger/common.json" title="Common Service" />
+</ClientOnly>
--- a/docs/api/gateway.md
+++ b/docs/api/gateway.md
@ -0,0 +1,13 @@
+---
+title: Gateway API
+outline: false
+aside: false
+---
+
+# Gateway
+
+Gateway endpoints cover service registration, version discovery, heartbeats, and update orchestration, ensuring each node can report its status and receive rollout commands through the shared `service_name`/`secret` contract.
+
+<ClientOnly>
+  <ScalarIframe spec-url="https://raw.githubusercontent.com/perfect-panel/ppanel-docs/refs/heads/main/public/swagger/gateway.json" title="Gateway" />
+</ClientOnly>
--- a/docs/api/reference.md
+++ b/docs/api/reference.md
@ -0,0 +1,16 @@
+---
+title: API Reference
+outline: false
+aside: false
+---
+
+# API Reference
+
+The API reference now uses Scalar (embedded via iframe) to render the OpenAPI files hosted in [`public/swagger`](https://github.com/perfect-panel/ppanel-docs/tree/main/public/swagger). Each schema has its own dedicated page:
+
+- [Common Service](./common) — shared authentication/utilities used by both user and admin portals.
+- [User Service](./user) — subscriptions, orders, tickets, profile management.
+- [Admin Service](./admin) — dashboard, maintenance, commerce, logging modules.
+- [Gateway](./gateway) — version checks, heartbeats, registration, and update orchestration hooks for edge services.
+
+Pick a service from the sidebar to view the interactive API explorer.
--- a/docs/api/user.md
+++ b/docs/api/user.md
@ -0,0 +1,13 @@
+---
+title: User Service API
+outline: false
+aside: false
+---
+
+# User Service
+
+Endpoints for the customer-facing portal: subscriptions, orders, tickets, wallets, and profile management.
+
+<ClientOnly>
+  <ScalarIframe spec-url="https://raw.githubusercontent.com/perfect-panel/ppanel-docs/refs/heads/main/public/swagger/user.json" title="User Service" />
+</ClientOnly>
--- a/docs/guide/contributing.md
+++ b/docs/guide/contributing.md
@ -0,0 +1,387 @@
+# Contributors
+
+Thank you to all the developers who have contributed to the PPanel project!
+
+## Project Contributors
+
+PPanel is an open-source project, and we welcome and appreciate all forms of contributions, including but not limited to:
+
+- 💻 Code contributions
+- 📝 Documentation improvements
+- 🐛 Bug reports
+- 💡 Feature suggestions
+- 🌍 Translation work
+- ⭐ Stars and promotion
+
+## Core Contributors
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const backendContributors = ref([])
+const frontendContributors = ref([])
+const backendLoading = ref(true)
+const frontendLoading = ref(true)
+
+onMounted(async () => {
+  // Fetch contributors from backend related repositories
+  try {
+    const repos = ['server', 'ppanel', 'ppanel-node']
+    const contributorsMap = new Map()
+
+    for (const repo of repos) {
+      const response = await fetch(`https://api.github.com/repos/perfect-panel/${repo}/contributors`)
+      if (response.ok) {
+        const contributors = await response.json()
+        contributors.forEach(contributor => {
+          if (!contributorsMap.has(contributor.login)) {
+            contributorsMap.set(contributor.login, {
+              login: contributor.login,
+              avatar_url: contributor.avatar_url,
+              html_url: contributor.html_url,
+              contributions: contributor.contributions
+            })
+          } else {
+            const existing = contributorsMap.get(contributor.login)
+            existing.contributions += contributor.contributions
+          }
+        })
+      }
+    }
+
+    backendContributors.value = Array.from(contributorsMap.values())
+      .sort((a, b) => b.contributions - a.contributions)
+  } catch (error) {
+    console.error('Failed to fetch backend contributors:', error)
+  } finally {
+    backendLoading.value = false
+  }
+
+  // Fetch contributors from frontend related repositories
+  try {
+    const repos = ['frontend', 'ppanel-web', 'ppanel-docs']
+    const contributorsMap = new Map()
+
+    for (const repo of repos) {
+      const response = await fetch(`https://api.github.com/repos/perfect-panel/${repo}/contributors`)
+      if (response.ok) {
+        const contributors = await response.json()
+        contributors.forEach(contributor => {
+          if (!contributorsMap.has(contributor.login)) {
+            contributorsMap.set(contributor.login, {
+              login: contributor.login,
+              avatar_url: contributor.avatar_url,
+              html_url: contributor.html_url,
+              contributions: contributor.contributions
+            })
+          } else {
+            const existing = contributorsMap.get(contributor.login)
+            existing.contributions += contributor.contributions
+          }
+        })
+      }
+    }
+
+    frontendContributors.value = Array.from(contributorsMap.values())
+      .sort((a, b) => b.contributions - a.contributions)
+  } catch (error) {
+    console.error('Failed to fetch frontend contributors:', error)
+  } finally {
+    frontendLoading.value = false
+  }
+})
+</script>
+
+### Backend Repository Contributors
+
+<div v-if="backendLoading" class="contributors-loading">
+  <div class="loading-spinner"></div>
+  <p>Loading contributors...</p>
+</div>
+
+<div v-else-if="backendContributors.length === 0" class="contributors-empty">
+  <p>No contributors data available</p>
+</div>
+
+<div v-else>
+  <div class="contributors-grid">
+    <a
+      v-for="contributor in backendContributors"
+      :key="contributor.login"
+      :href="contributor.html_url"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="contributor-card"
+    >
+      <img
+        :src="contributor.avatar_url"
+        :alt="contributor.login"
+        class="contributor-avatar"
+        loading="lazy"
+      />
+      <div class="contributor-info">
+        <div class="contributor-name" :title="contributor.login">{{ contributor.login }}</div>
+        <div class="contributor-contributions">
+          <svg class="contribution-icon" viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
+            <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"></path>
+          </svg>
+          {{ contributor.contributions }} contributions
+        </div>
+      </div>
+    </a>
+  </div>
+</div>
+
+### Frontend Repository Contributors
+
+<div v-if="frontendLoading" class="contributors-loading">
+  <div class="loading-spinner"></div>
+  <p>Loading contributors...</p>
+</div>
+
+<div v-else-if="frontendContributors.length === 0" class="contributors-empty">
+  <p>No contributors data available</p>
+</div>
+
+<div v-else>
+  <div class="contributors-grid">
+    <a
+      v-for="contributor in frontendContributors"
+      :key="contributor.login"
+      :href="contributor.html_url"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="contributor-card"
+    >
+      <img
+        :src="contributor.avatar_url"
+        :alt="contributor.login"
+        class="contributor-avatar"
+        loading="lazy"
+      />
+      <div class="contributor-info">
+        <div class="contributor-name" :title="contributor.login">{{ contributor.login }}</div>
+        <div class="contributor-contributions">
+          <svg class="contribution-icon" viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
+            <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"></path>
+          </svg>
+          {{ contributor.contributions }} contributions
+        </div>
+      </div>
+    </a>
+  </div>
+</div>
+
+<style scoped>
+.contributors-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  color: var(--vp-c-text-2);
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--vp-c-divider);
+  border-top-color: var(--vp-c-brand);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin-bottom: 1rem;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.contributors-empty {
+  text-align: center;
+  padding: 2rem;
+  color: var(--vp-c-text-3);
+  font-style: italic;
+}
+
+.contributors-stats {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.stat-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.contributors-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 1rem;
+  margin: 1.5rem 0;
+}
+
+.contributor-card {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  text-decoration: none;
+  color: var(--vp-c-text-1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.contributor-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--vp-c-brand), var(--vp-c-brand-light));
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+}
+
+.contributor-card:hover {
+  border-color: var(--vp-c-brand-light);
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.contributor-card:hover::before {
+  transform: scaleX(1);
+}
+
+.contributor-avatar {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  margin-right: 1rem;
+  border: 2px solid var(--vp-c-divider);
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.contributor-card:hover .contributor-avatar {
+  border-color: var(--vp-c-brand);
+  transform: scale(1.05);
+}
+
+.contributor-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.contributor-name {
+  font-weight: 600;
+  font-size: 15px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 0.25rem;
+  color: var(--vp-c-text-1);
+}
+
+.contributor-contributions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+}
+
+.contribution-icon {
+  opacity: 0.6;
+}
+
+@media (max-width: 768px) {
+  .contributors-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .contributors-stats {
+    flex-direction: column;
+  }
+
+  .stat-badge {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .contributor-card:hover {
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+  }
+}
+</style>
+
+### Reporting Issues
+
+If you find a bug or have a feature suggestion:
+
+1. Search [GitHub Issues](https://github.com/perfect-panel/frontend/issues) to see if a similar issue exists
+2. If not, create a new Issue
+3. Provide detailed information:
+   - Problem description
+   - Steps to reproduce
+   - Expected behavior
+   - Actual behavior
+   - Environment info (browser, OS, etc.)
+   - Screenshots or error logs (if applicable)
+
+### Documentation Contributions
+
+Documentation is equally important! You can:
+
+- Fix typos and grammar errors
+- Improve clarity of existing documentation
+- Add missing documentation
+- Translate documentation to other languages
+- Add usage examples and tutorials
+
+Documentation source files are located in the `/docs` directory.
+
+### Translation Contributions
+
+We welcome translating PPanel into more languages:
+
+1. Check if there's already a folder for the target language in `/docs`
+2. If not, create a new language folder (e.g., `/docs/ja` for Japanese)
+3. Copy the English or Chinese version as a base
+4. Translate the content
+5. Add new language configuration in `.vitepress/config.mts`
+6. Submit a Pull Request
+
+## Community
+
+Join our community and connect with other developers:
+
+- **GitHub Discussions**: [Discussion Forum](https://github.com/perfect-panel/frontend/discussions)
+- **GitHub Issues**: [Issue Tracker](https://github.com/perfect-panel/frontend/issues)
+- **Telegram**: [Join Group](https://t.me/PPanelChat)
+
+## Code of Conduct
+
+We are committed to providing a friendly, safe, and welcoming environment for everyone. Please read and follow our [Code of Conduct](https://github.com/perfect-panel/frontend/blob/main/CODE_OF_CONDUCT.md).
+
+## Acknowledgments
+
+Special thanks to all developers, testers, documentation writers, and community members who have contributed to the PPanel project. You make PPanel better!
+
+## License
+
+By contributing code, you agree that your contributions will be licensed under the project's [GNU License](https://github.com/perfect-panel/frontend/blob/main/LICENSE).
--- a/docs/guide/installation.md
+++ b/docs/guide/installation.md
@ -0,0 +1,507 @@
+# Installation
+
+This guide will help you deploy PPanel on your server using Docker.
+
+## System Requirements
+
+### Minimum Requirements
+- **Operating System**: Linux (Ubuntu 20.04+, Debian 10+, CentOS 8+)
+- **CPU**: 1 core
+- **Memory**: 512MB RAM
+- **Storage**: 1GB available disk space
+- **Docker**: 20.10+
+- **Docker Compose**: 2.0+ (optional but recommended)
+
+### Recommended Requirements
+- **CPU**: 2+ cores
+- **Memory**: 2GB+ RAM
+- **Storage**: 5GB+ available disk space
+
+## Prerequisites
+
+### Install Docker
+
+If you haven't installed Docker yet, please follow the official installation guide:
+
+**Ubuntu/Debian:**
+```bash
+# Update package index
+sudo apt-get update
+
+# Install required packages
+sudo apt-get install -y ca-certificates curl gnupg lsb-release
+
+# Add Docker's official GPG key
+sudo mkdir -p /etc/apt/keyrings
+curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
+
+# Set up the repository
+echo \
+  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
+  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+
+# Install Docker Engine
+sudo apt-get update
+sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin
+```
+
+**CentOS/RHEL:**
+```bash
+# Install yum-utils
+sudo yum install -y yum-utils
+
+# Add Docker repository
+sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
+
+# Install Docker Engine
+sudo yum install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin
+
+# Start Docker service
+sudo systemctl start docker
+sudo systemctl enable docker
+```
+
+### Verify Installation
+
+```bash
+# Check Docker version
+docker --version
+
+# Check Docker Compose version
+docker compose version
+
+# Test Docker installation
+sudo docker run hello-world
+```
+
+## Quick Start
+
+### Method 1: Using Docker Run
+
+#### Step 1: Pull the Image
+
+```bash
+# Pull latest version
+docker pull ppanel/ppanel:latest
+
+# Or pull a specific version
+docker pull ppanel/ppanel:v0.1.2
+```
+
+#### Step 2: Prepare Configuration
+
+Create a configuration directory and prepare the configuration file:
+
+```bash
+# Create configuration directory
+mkdir -p ppanel-config
+
+# Create configuration file
+cat > ppanel-config/ppanel.yaml <<EOF
+# PPanel Configuration
+server:
+  host: 0.0.0.0
+  port: 8080
+
+database:
+  type: sqlite
+  path: /app/data/ppanel.db
+
+# Add more configuration as needed
+EOF
+```
+
+::: tip
+For detailed configuration options, please refer to the [Configuration Guide](/guide/configuration).
+:::
+
+#### Step 3: Run Container
+
+```bash
+docker run -d \
+  --name ppanel \
+  -p 8080:8080 \
+  -v $(pwd)/ppanel-config:/app/etc:ro \
+  -v ppanel-data:/app/data \
+  --restart unless-stopped \
+  ppanel/ppanel:latest
+```
+
+**Parameter Explanation:**
+- `-d`: Run container in detached mode (background)
+- `--name ppanel`: Set container name
+- `-p 8080:8080`: Map container port 8080 to host port 8080
+- `-v $(pwd)/ppanel-config:/app/etc:ro`: Mount configuration directory (read-only)
+- `-v ppanel-data:/app/data`: Create a volume for persistent data storage
+- `--restart unless-stopped`: Auto-restart container unless manually stopped
+
+#### Step 4: Verify Running Status
+
+```bash
+# Check container status
+docker ps | grep ppanel
+
+# View logs
+docker logs -f ppanel
+
+# Check if service is accessible
+curl http://localhost:8080
+```
+
+### Method 2: Using Docker Compose (Recommended)
+
+#### Step 1: Create docker-compose.yml
+
+```yaml
+version: '3.8'
+
+services:
+  ppanel:
+    image: ppanel/ppanel:latest
+    container_name: ppanel
+    ports:
+      - "8080:8080"
+    volumes:
+      - ./ppanel-config:/app/etc:ro
+      - ppanel-data:/app/data
+    restart: unless-stopped
+    environment:
+      - TZ=UTC
+    healthcheck:
+      test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost:8080/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+volumes:
+  ppanel-data:
+    driver: local
+```
+
+#### Step 2: Prepare Configuration
+
+```bash
+# Create configuration directory
+mkdir -p ppanel-config
+
+# Copy or create your configuration file
+# See Configuration Guide for details
+```
+
+#### Step 3: Start Services
+
+```bash
+# Start in detached mode
+docker compose up -d
+
+# View logs
+docker compose logs -f
+
+# Check status
+docker compose ps
+```
+
+## Post-Installation
+
+### Access the Application
+
+After successful installation, you can access:
+
+- **User Panel**: `http://your-server-ip:8080`
+- **Admin Panel**: `http://your-server-ip:8080/admin`
+
+::: warning Default Credentials
+Please change the default admin password immediately after first login for security.
+:::
+
+### Configure Reverse Proxy (Optional)
+
+For production deployment, it's recommended to use Nginx or Caddy as a reverse proxy to enable HTTPS.
+
+**Nginx Example:**
+
+```nginx
+server {
+    listen 80;
+    server_name your-domain.com;
+
+    location / {
+        proxy_pass http://localhost:8080;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+```
+
+**Caddy Example:**
+
+```
+your-domain.com {
+    reverse_proxy localhost:8080
+}
+```
+
+## Container Management
+
+### View Logs
+
+```bash
+# Docker Run
+docker logs -f ppanel
+
+# Docker Compose
+docker compose logs -f
+```
+
+### Stop Container
+
+```bash
+# Docker Run
+docker stop ppanel
+
+# Docker Compose
+docker compose stop
+```
+
+### Restart Container
+
+```bash
+# Docker Run
+docker restart ppanel
+
+# Docker Compose
+docker compose restart
+```
+
+### Remove Container
+
+```bash
+# Docker Run
+docker stop ppanel
+docker rm ppanel
+
+# Docker Compose
+docker compose down
+```
+
+::: warning Data Persistence
+Removing containers will not delete volumes. To remove volumes as well, use:
+```bash
+docker compose down -v
+```
+:::
+
+## Upgrading
+
+### Backup Configuration
+
+Before upgrading, backup your configuration and data:
+
+```bash
+# Backup configuration
+tar czf ppanel-config-backup-$(date +%Y%m%d).tar.gz ppanel-config/
+
+# Backup data volume
+docker run --rm \
+  -v ppanel-data:/data \
+  -v $(pwd):/backup \
+  alpine tar czf /backup/ppanel-data-backup-$(date +%Y%m%d).tar.gz /data
+```
+
+### Upgrade Steps
+
+#### Using Docker Run
+
+```bash
+# Pull latest image
+docker pull ppanel/ppanel:latest
+
+# Stop and remove old container
+docker stop ppanel
+docker rm ppanel
+
+# Start new container with same configuration
+docker run -d \
+  --name ppanel \
+  -p 8080:8080 \
+  -v $(pwd)/ppanel-config:/app/etc:ro \
+  -v ppanel-data:/app/data \
+  --restart unless-stopped \
+  ppanel/ppanel:latest
+```
+
+#### Using Docker Compose
+
+```bash
+# Pull latest image
+docker compose pull
+
+# Recreate containers with new image
+docker compose up -d
+```
+
+### Verify Upgrade
+
+```bash
+# Check container is running
+docker ps | grep ppanel
+
+# Check logs for any errors
+docker logs ppanel
+
+# Verify application is accessible
+curl http://localhost:8080
+```
+
+## Troubleshooting
+
+### Container Exits Immediately
+
+**Check architecture compatibility:**
+```bash
+# Check host architecture
+uname -m
+
+# Check image architecture
+docker image inspect ppanel/ppanel:latest --format '{{.Architecture}}'
+```
+
+**Check logs:**
+```bash
+docker logs ppanel
+```
+
+### Cannot Access Service
+
+1. **Check if container is running:**
+   ```bash
+   docker ps | grep ppanel
+   ```
+
+2. **Check port mapping:**
+   ```bash
+   docker port ppanel
+   ```
+
+3. **Check firewall rules:**
+   ```bash
+   # Ubuntu/Debian
+   sudo ufw status
+   sudo ufw allow 8080
+
+   # CentOS/RHEL
+   sudo firewall-cmd --list-ports
+   sudo firewall-cmd --add-port=8080/tcp --permanent
+   sudo firewall-cmd --reload
+   ```
+
+### Configuration Not Taking Effect
+
+1. **Verify mount path:**
+   ```bash
+   docker exec ppanel ls -la /app/etc
+   ```
+
+2. **Check configuration syntax:**
+   ```bash
+   docker exec ppanel cat /app/etc/ppanel.yaml
+   ```
+
+3. **Restart container:**
+   ```bash
+   docker restart ppanel
+   ```
+
+### Performance Issues
+
+1. **Check resource usage:**
+   ```bash
+   docker stats ppanel
+   ```
+
+2. **Increase container resources** (if using Docker Desktop):
+   - Open Docker Desktop Settings
+   - Go to Resources
+   - Increase CPU and Memory allocation
+
+3. **Check disk space:**
+   ```bash
+   df -h
+   docker system df
+   ```
+
+## Advanced Configuration
+
+### Using Environment Variables
+
+You can override configuration via environment variables:
+
+```bash
+docker run -d \
+  --name ppanel \
+  -p 8080:8080 \
+  -e SERVER_PORT=8080 \
+  -e DATABASE_TYPE=sqlite \
+  -v $(pwd)/ppanel-config:/app/etc:ro \
+  -v ppanel-data:/app/data \
+  --restart unless-stopped \
+  ppanel/ppanel:latest
+```
+
+### Running Multiple Instances
+
+To run multiple instances, use different ports and container names:
+
+```bash
+# Instance 1
+docker run -d \
+  --name ppanel-1 \
+  -p 8081:8080 \
+  -v $(pwd)/ppanel-config-1:/app/etc:ro \
+  -v ppanel-data-1:/app/data \
+  ppanel/ppanel:latest
+
+# Instance 2
+docker run -d \
+  --name ppanel-2 \
+  -p 8082:8080 \
+  -v $(pwd)/ppanel-config-2:/app/etc:ro \
+  -v ppanel-data-2:/app/data \
+  ppanel/ppanel:latest
+```
+
+### Custom Network
+
+Create a custom Docker network for better isolation:
+
+```bash
+# Create network
+docker network create ppanel-net
+
+# Run container on custom network
+docker run -d \
+  --name ppanel \
+  --network ppanel-net \
+  -p 8080:8080 \
+  -v $(pwd)/ppanel-config:/app/etc:ro \
+  -v ppanel-data:/app/data \
+  ppanel/ppanel:latest
+```
+
+## Next Steps
+
+- [Configuration Guide](/guide/configuration) - Learn about detailed configuration options
+- [Admin Dashboard](/admin/dashboard) - Start managing your panel
+- [API Reference](/api/reference) - Integrate with PPanel API
+
+## Need Help?
+
+If you encounter any issues:
+
+1. Check the [Troubleshooting](#troubleshooting) section above
+2. Search [GitHub Issues](https://github.com/perfect-panel/ppanel/issues)
+3. Join our community discussions
+4. Create a new issue with detailed logs and system information
--- a/docs/guide/installation/binary.md
+++ b/docs/guide/installation/binary.md
@ -0,0 +1,585 @@
+# Binary Deployment
+
+This guide shows you how to deploy PPanel using pre-built binary executables. This method is suitable for users who prefer not to use Docker or need more control over the deployment.
+
+## Prerequisites
+
+- **Operating System**: Linux (Ubuntu 20.04+, Debian 10+, CentOS 8+)
+- **Architecture**: amd64 (x86_64) or arm64
+- **Permissions**: Root or sudo access
+- **Dependencies**: None (binaries are statically compiled)
+
+## Download Binary
+
+### Step 1: Check System Architecture
+
+```bash
+# Check your system architecture
+uname -m
+# Output: x86_64 (amd64) or aarch64 (arm64)
+```
+
+### Step 2: Download Latest Release
+
+Visit the [GitHub Releases](https://github.com/perfect-panel/ppanel/releases) page or download directly:
+
+```bash
+# Create installation directory
+sudo mkdir -p /opt/ppanel
+cd /opt/ppanel
+
+# Download for Linux amd64
+wget https://github.com/perfect-panel/ppanel/releases/latest/download/ppanel-linux-amd64.tar.gz
+
+# Or for Linux arm64
+# wget https://github.com/perfect-panel/ppanel/releases/latest/download/ppanel-linux-arm64.tar.gz
+
+# Extract
+tar -xzf ppanel-linux-amd64.tar.gz
+
+# Verify extracted files
+ls -la
+```
+
+Expected files:
+```
+/opt/ppanel/
+├── ppanel-server    # Main server binary
+├── gateway          # Gateway binary
+└── etc/             # Configuration directory
+    └── ppanel.yaml  # Configuration file
+```
+
+## Configuration
+
+### Step 1: Prepare Configuration
+
+```bash
+# Copy sample configuration
+sudo cp etc/ppanel.yaml etc/ppanel.yaml.backup
+
+# Edit configuration
+sudo nano etc/ppanel.yaml
+```
+
+**Basic Configuration Example:**
+
+```yaml
+server:
+  host: 0.0.0.0
+  port: 8080
+  mode: release  # debug, release, or test
+
+database:
+  type: sqlite
+  path: /opt/ppanel/data/ppanel.db
+  # For MySQL/PostgreSQL:
+  # type: mysql
+  # host: localhost
+  # port: 3306
+  # user: ppanel
+  # password: your_password
+  # database: ppanel
+
+log:
+  level: info  # debug, info, warn, error
+  path: /opt/ppanel/logs
+
+gateway:
+  port: 8080
+  timeout: 30s
+```
+
+### Step 2: Create Required Directories
+
+```bash
+# Create data and log directories
+sudo mkdir -p /opt/ppanel/data
+sudo mkdir -p /opt/ppanel/logs
+
+# Set proper permissions
+sudo chmod 755 /opt/ppanel
+sudo chmod 700 /opt/ppanel/data
+sudo chmod 755 /opt/ppanel/logs
+```
+
+## Running the Service
+
+### Method 1: Direct Execution (Testing)
+
+For quick testing:
+
+```bash
+# Make binaries executable
+sudo chmod +x /opt/ppanel/ppanel-server
+sudo chmod +x /opt/ppanel/gateway
+
+# Run server directly
+cd /opt/ppanel
+sudo ./ppanel-server
+
+# In another terminal, run gateway (if separate)
+# sudo ./gateway
+```
+
+Press `Ctrl+C` to stop.
+
+### Method 2: Systemd Service (Recommended)
+
+Create a systemd service for production deployment:
+
+#### Step 1: Create Service File
+
+```bash
+sudo nano /etc/systemd/system/ppanel.service
+```
+
+**Service File Content:**
+
+```ini
+[Unit]
+Description=PPanel Server
+Documentation=https://github.com/perfect-panel/ppanel
+After=network-online.target
+Wants=network-online.target
+
+[Service]
+Type=simple
+User=root
+WorkingDirectory=/opt/ppanel
+ExecStart=/opt/ppanel/ppanel-server
+Restart=always
+RestartSec=10
+
+# Security settings
+NoNewPrivileges=true
+PrivateTmp=true
+ProtectSystem=strict
+ProtectHome=true
+ReadWritePaths=/opt/ppanel/data /opt/ppanel/logs
+
+# Resource limits
+LimitNOFILE=65535
+LimitNPROC=4096
+
+# Logging
+StandardOutput=journal
+StandardError=journal
+SyslogIdentifier=ppanel
+
+[Install]
+WantedBy=multi-user.target
+```
+
+#### Step 2: Enable and Start Service
+
+```bash
+# Reload systemd
+sudo systemctl daemon-reload
+
+# Enable service (start on boot)
+sudo systemctl enable ppanel
+
+# Start service
+sudo systemctl start ppanel
+
+# Check status
+sudo systemctl status ppanel
+```
+
+## Service Management
+
+### Check Status
+
+```bash
+# Check if service is running
+sudo systemctl status ppanel
+
+# View detailed status
+sudo systemctl show ppanel
+```
+
+### View Logs
+
+```bash
+# View systemd logs
+sudo journalctl -u ppanel -f
+
+# View last 100 lines
+sudo journalctl -u ppanel -n 100
+
+# View application logs
+sudo tail -f /opt/ppanel/logs/ppanel.log
+```
+
+### Start/Stop/Restart
+
+```bash
+# Start service
+sudo systemctl start ppanel
+
+# Stop service
+sudo systemctl stop ppanel
+
+# Restart service
+sudo systemctl restart ppanel
+
+# Reload configuration (if supported)
+sudo systemctl reload ppanel
+```
+
+### Enable/Disable Auto-start
+
+```bash
+# Enable auto-start on boot
+sudo systemctl enable ppanel
+
+# Disable auto-start
+sudo systemctl disable ppanel
+
+# Check if enabled
+sudo systemctl is-enabled ppanel
+```
+
+## Post-Installation
+
+### Verify Installation
+
+```bash
+# Check if service is listening
+sudo netstat -tlnp | grep 8080
+
+# Or use ss
+sudo ss -tlnp | grep 8080
+
+# Test HTTP access
+curl http://localhost:8080
+
+# Check process
+ps aux | grep ppanel
+```
+
+### Access the Application
+
+- **User Panel**: `http://your-server-ip:8080`
+- **Admin Panel**: `http://your-server-ip:8080/admin`
+
+### Configure Firewall
+
+```bash
+# Ubuntu/Debian (UFW)
+sudo ufw allow 8080/tcp
+sudo ufw status
+
+# CentOS/RHEL (firewalld)
+sudo firewall-cmd --permanent --add-port=8080/tcp
+sudo firewall-cmd --reload
+sudo firewall-cmd --list-ports
+```
+
+### Setup Reverse Proxy
+
+For production, use Nginx or Caddy as reverse proxy:
+
+**Nginx Configuration** (`/etc/nginx/sites-available/ppanel`):
+
+```nginx
+server {
+    listen 80;
+    server_name your-domain.com;
+
+    location / {
+        proxy_pass http://localhost:8080;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        # WebSocket support
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+    }
+}
+```
+
+Enable the configuration:
+```bash
+sudo ln -s /etc/nginx/sites-available/ppanel /etc/nginx/sites-enabled/
+sudo nginx -t
+sudo systemctl reload nginx
+```
+
+## Upgrading
+
+### Backup Before Upgrade
+
+```bash
+# Stop service
+sudo systemctl stop ppanel
+
+# Backup current version
+sudo cp -r /opt/ppanel /opt/ppanel-backup-$(date +%Y%m%d)
+
+# Backup database
+sudo cp /opt/ppanel/data/ppanel.db /opt/ppanel/data/ppanel.db.backup-$(date +%Y%m%d)
+
+# Backup configuration
+sudo cp /opt/ppanel/etc/ppanel.yaml /opt/ppanel/etc/ppanel.yaml.backup-$(date +%Y%m%d)
+```
+
+### Download and Install New Version
+
+```bash
+# Download new version
+cd /tmp
+wget https://github.com/perfect-panel/ppanel/releases/latest/download/ppanel-linux-amd64.tar.gz
+
+# Extract to temporary location
+mkdir ppanel-new
+tar -xzf ppanel-linux-amd64.tar.gz -C ppanel-new
+
+# Backup old binaries
+sudo mv /opt/ppanel/ppanel-server /opt/ppanel/ppanel-server.old
+sudo mv /opt/ppanel/gateway /opt/ppanel/gateway.old
+
+# Install new binaries
+sudo cp ppanel-new/ppanel-server /opt/ppanel/
+sudo cp ppanel-new/gateway /opt/ppanel/
+
+# Set permissions
+sudo chmod +x /opt/ppanel/ppanel-server
+sudo chmod +x /opt/ppanel/gateway
+
+# Start service
+sudo systemctl start ppanel
+
+# Check status
+sudo systemctl status ppanel
+```
+
+### Rollback
+
+If upgrade fails:
+
+```bash
+# Stop service
+sudo systemctl stop ppanel
+
+# Restore old binaries
+sudo mv /opt/ppanel/ppanel-server.old /opt/ppanel/ppanel-server
+sudo mv /opt/ppanel/gateway.old /opt/ppanel/gateway
+
+# Restore database (if needed)
+sudo cp /opt/ppanel/data/ppanel.db.backup-YYYYMMDD /opt/ppanel/data/ppanel.db
+
+# Start service
+sudo systemctl start ppanel
+```
+
+## Troubleshooting
+
+### Service Fails to Start
+
+```bash
+# Check detailed logs
+sudo journalctl -u ppanel -xe
+
+# Check configuration syntax
+/opt/ppanel/ppanel-server --check-config
+
+# Verify permissions
+ls -la /opt/ppanel
+sudo chown -R root:root /opt/ppanel
+```
+
+### Port Already in Use
+
+```bash
+# Find what's using the port
+sudo lsof -i :8080
+sudo netstat -tlnp | grep 8080
+
+# Change port in configuration
+sudo nano /opt/ppanel/etc/ppanel.yaml
+# Update server.port value
+
+# Restart service
+sudo systemctl restart ppanel
+```
+
+### Binary Won't Execute
+
+```bash
+# Check architecture compatibility
+uname -m
+file /opt/ppanel/ppanel-server
+
+# Check if executable
+ls -la /opt/ppanel/ppanel-server
+sudo chmod +x /opt/ppanel/ppanel-server
+
+# Check for missing libraries (should be none for static binary)
+ldd /opt/ppanel/ppanel-server
+```
+
+### High Memory Usage
+
+```bash
+# Check memory usage
+ps aux | grep ppanel
+top -p $(pgrep ppanel-server)
+
+# Add memory limit to systemd service
+sudo nano /etc/systemd/system/ppanel.service
+# Add under [Service]:
+# MemoryMax=2G
+# MemoryHigh=1.5G
+
+sudo systemctl daemon-reload
+sudo systemctl restart ppanel
+```
+
+### Database Connection Issues
+
+```bash
+# Check database file permissions
+ls -la /opt/ppanel/data/
+
+# For SQLite, verify path in config
+sudo nano /opt/ppanel/etc/ppanel.yaml
+
+# Test database connection
+sqlite3 /opt/ppanel/data/ppanel.db "SELECT 1;"
+
+# Check logs for database errors
+sudo journalctl -u ppanel | grep -i database
+```
+
+## Uninstallation
+
+To completely remove PPanel:
+
+```bash
+# Stop and disable service
+sudo systemctl stop ppanel
+sudo systemctl disable ppanel
+
+# Remove service file
+sudo rm /etc/systemd/system/ppanel.service
+sudo systemctl daemon-reload
+
+# Remove installation directory
+sudo rm -rf /opt/ppanel
+
+# Remove firewall rules (if added)
+sudo ufw delete allow 8080/tcp
+# or
+sudo firewall-cmd --permanent --remove-port=8080/tcp
+sudo firewall-cmd --reload
+```
+
+## Advanced Configuration
+
+### Running as Non-Root User
+
+For better security, run as dedicated user:
+
+```bash
+# Create dedicated user
+sudo useradd -r -s /bin/false ppanel
+
+# Change ownership
+sudo chown -R ppanel:ppanel /opt/ppanel
+
+# Update systemd service
+sudo nano /etc/systemd/system/ppanel.service
+# Change: User=ppanel
+
+# If binding to port < 1024, grant capability
+sudo setcap 'cap_net_bind_service=+ep' /opt/ppanel/ppanel-server
+
+sudo systemctl daemon-reload
+sudo systemctl restart ppanel
+```
+
+### Multiple Instances
+
+To run multiple instances:
+
+```bash
+# Create separate directories
+sudo mkdir -p /opt/ppanel-1
+sudo mkdir -p /opt/ppanel-2
+
+# Copy binaries and configs
+sudo cp -r /opt/ppanel/* /opt/ppanel-1/
+sudo cp -r /opt/ppanel/* /opt/ppanel-2/
+
+# Edit configs with different ports
+sudo nano /opt/ppanel-1/etc/ppanel.yaml  # port: 8081
+sudo nano /opt/ppanel-2/etc/ppanel.yaml  # port: 8082
+
+# Create separate systemd services
+sudo cp /etc/systemd/system/ppanel.service /etc/systemd/system/ppanel-1.service
+sudo cp /etc/systemd/system/ppanel.service /etc/systemd/system/ppanel-2.service
+
+# Edit service files accordingly
+sudo systemctl daemon-reload
+sudo systemctl enable ppanel-1 ppanel-2
+sudo systemctl start ppanel-1 ppanel-2
+```
+
+### Custom Environment Variables
+
+Add environment variables to systemd service:
+
+```ini
+[Service]
+Environment="PPANEL_ENV=production"
+Environment="PPANEL_DEBUG=false"
+EnvironmentFile=/opt/ppanel/env.conf
+```
+
+## Performance Tuning
+
+### Optimize File Limits
+
+```bash
+# Edit limits
+sudo nano /etc/security/limits.conf
+
+# Add:
+* soft nofile 65535
+* hard nofile 65535
+
+# For systemd service, already set in service file:
+# LimitNOFILE=65535
+```
+
+### Enable Database Optimization
+
+For SQLite:
+
+```bash
+# Add to ppanel.yaml
+database:
+  type: sqlite
+  path: /opt/ppanel/data/ppanel.db
+  options:
+    cache_size: -2000
+    journal_mode: WAL
+    synchronous: NORMAL
+```
+
+## Next Steps
+
+- [Configuration Guide](/guide/configuration) - Detailed configuration options
+- [Admin Dashboard](/admin/dashboard) - Start managing your panel
+- [API Reference](/api/reference) - API integration
+
+## Need Help?
+
+- Check [GitHub Issues](https://github.com/perfect-panel/ppanel/issues)
+- Review systemd logs: `sudo journalctl -u ppanel -f`
+- Check application logs: `tail -f /opt/ppanel/logs/ppanel.log`
--- a/docs/guide/installation/docker-compose.md
+++ b/docs/guide/installation/docker-compose.md
@ -0,0 +1,443 @@
+# Docker Compose Deployment
+
+Docker Compose is the recommended deployment method for production environments. It provides better service management, easier configuration, and simplified upgrades.
+
+## Prerequisites
+
+### Install Docker
+
+If you haven't installed Docker yet, please follow the official installation guide:
+
+**Ubuntu/Debian:**
+```bash
+# Update package index
+sudo apt-get update
+
+# Install required packages
+sudo apt-get install -y ca-certificates curl gnupg lsb-release
+
+# Add Docker's official GPG key
+sudo mkdir -p /etc/apt/keyrings
+curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
+
+# Set up the repository
+echo \
+  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
+  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+
+# Install Docker Engine
+sudo apt-get update
+sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin
+```
+
+**CentOS/RHEL:**
+```bash
+# Install yum-utils
+sudo yum install -y yum-utils
+
+# Add Docker repository
+sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
+
+# Install Docker Engine
+sudo yum install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin
+
+# Start Docker service
+sudo systemctl start docker
+sudo systemctl enable docker
+```
+
+### Verify Installation
+
+```bash
+# Check Docker version
+docker --version
+
+# Check Docker Compose version
+docker compose version
+
+# Test Docker installation
+sudo docker run hello-world
+```
+
+## Deployment Steps
+
+### Step 1: Create Project Directory
+
+```bash
+# Create project directory
+mkdir -p ~/ppanel
+cd ~/ppanel
+```
+
+### Step 2: Create docker-compose.yml
+
+Create a `docker-compose.yml` file with the following content:
+
+```yaml
+version: '3.8'
+
+services:
+  ppanel:
+    image: ppanel/ppanel:latest
+    container_name: ppanel
+    ports:
+      - "8080:8080"
+    volumes:
+      - ./ppanel-config:/app/etc:ro
+      - ppanel-data:/app/data
+    restart: unless-stopped
+    environment:
+      - TZ=UTC
+    healthcheck:
+      test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost:8080/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+volumes:
+  ppanel-data:
+    driver: local
+```
+
+**Configuration Explanation:**
+
+- **image**: Docker image to use (latest or specific version like `v0.1.2`)
+- **ports**: Map container port 8080 to host port 8080
+- **volumes**:
+  - `./ppanel-config:/app/etc:ro` - Configuration directory (read-only)
+  - `ppanel-data:/app/data` - Persistent data storage
+- **restart**: Auto-restart policy
+- **environment**: Set timezone (change to your timezone like `Asia/Shanghai`)
+- **healthcheck**: Monitor service health
+
+### Step 3: Prepare Configuration
+
+```bash
+# Create configuration directory
+mkdir -p ppanel-config
+
+# Create configuration file
+cat > ppanel-config/ppanel.yaml <<EOF
+# PPanel Configuration
+server:
+  host: 0.0.0.0
+  port: 8080
+
+database:
+  type: sqlite
+  path: /app/data/ppanel.db
+
+# Add more configuration as needed
+EOF
+```
+
+::: tip
+For detailed configuration options, please refer to the [Configuration Guide](/guide/configuration).
+:::
+
+### Step 4: Start Services
+
+```bash
+# Pull the latest image
+docker compose pull
+
+# Start in detached mode
+docker compose up -d
+
+# View logs
+docker compose logs -f
+```
+
+### Step 5: Verify Deployment
+
+```bash
+# Check service status
+docker compose ps
+
+# Check if service is accessible
+curl http://localhost:8080
+
+# View real-time logs
+docker compose logs -f ppanel
+```
+
+## Post-Installation
+
+### Access the Application
+
+After successful installation, you can access:
+
+- **User Panel**: `http://your-server-ip:8080`
+- **Admin Panel**: `http://your-server-ip:8080/admin`
+
+::: warning Default Credentials
+Please change the default admin password immediately after first login for security.
+:::
+
+### Configure Reverse Proxy (Recommended)
+
+For production deployment, it's recommended to use Nginx or Caddy as a reverse proxy to enable HTTPS.
+
+**Nginx Configuration:**
+
+```nginx
+server {
+    listen 80;
+    server_name your-domain.com;
+
+    # Redirect to HTTPS
+    return 301 https://$server_name$request_uri;
+}
+
+server {
+    listen 443 ssl http2;
+    server_name your-domain.com;
+
+    ssl_certificate /path/to/your/certificate.crt;
+    ssl_certificate_key /path/to/your/private.key;
+
+    location / {
+        proxy_pass http://localhost:8080;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Forwarded-Host $host;
+        proxy_set_header X-Forwarded-Port $server_port;
+    }
+}
+```
+
+**Caddy Configuration:**
+
+```
+your-domain.com {
+    reverse_proxy localhost:8080
+}
+```
+
+::: tip
+Caddy automatically handles SSL certificates via Let's Encrypt.
+:::
+
+## Service Management
+
+### View Logs
+
+```bash
+# View all logs
+docker compose logs
+
+# Follow logs in real-time
+docker compose logs -f
+
+# View specific service logs
+docker compose logs ppanel
+```
+
+### Stop Services
+
+```bash
+# Stop all services
+docker compose stop
+
+# Stop specific service
+docker compose stop ppanel
+```
+
+### Restart Services
+
+```bash
+# Restart all services
+docker compose restart
+
+# Restart specific service
+docker compose restart ppanel
+```
+
+### Stop and Remove Services
+
+```bash
+# Stop and remove containers
+docker compose down
+
+# Stop and remove containers and volumes
+docker compose down -v
+```
+
+::: warning Data Persistence
+Using `docker compose down -v` will delete all data volumes. Only use this if you want to completely remove all data.
+:::
+
+## Upgrading
+
+### Backup Before Upgrade
+
+```bash
+# Backup configuration
+tar czf ppanel-config-backup-$(date +%Y%m%d).tar.gz ppanel-config/
+
+# Backup data volume
+docker run --rm \
+  -v ppanel_ppanel-data:/data \
+  -v $(pwd):/backup \
+  alpine tar czf /backup/ppanel-data-backup-$(date +%Y%m%d).tar.gz /data
+```
+
+### Upgrade Steps
+
+```bash
+# Pull latest image
+docker compose pull
+
+# Recreate containers with new image
+docker compose up -d
+
+# View logs to verify
+docker compose logs -f
+```
+
+### Rollback
+
+If you encounter issues after upgrading:
+
+```bash
+# Edit docker-compose.yml and change image to previous version
+# image: ppanel/ppanel:v0.1.1
+
+# Restart with previous version
+docker compose up -d
+```
+
+## Advanced Configuration
+
+### Custom Port
+
+To use a different port, edit `docker-compose.yml`:
+
+```yaml
+ports:
+  - "3000:8080"  # Host port 3000 -> Container port 8080
+```
+
+### Multiple Instances
+
+To run multiple instances, create separate directories:
+
+```bash
+# Instance 1
+mkdir ~/ppanel-1
+cd ~/ppanel-1
+# Create docker-compose.yml with port 8081
+
+# Instance 2
+mkdir ~/ppanel-2
+cd ~/ppanel-2
+# Create docker-compose.yml with port 8082
+```
+
+### Resource Limits
+
+Add resource limits to prevent overconsumption:
+
+```yaml
+services:
+  ppanel:
+    # ... other config ...
+    deploy:
+      resources:
+        limits:
+          cpus: '2'
+          memory: 2G
+        reservations:
+          cpus: '0.5'
+          memory: 512M
+```
+
+### Custom Network
+
+Create a custom network for better isolation:
+
+```yaml
+version: '3.8'
+
+services:
+  ppanel:
+    # ... other config ...
+    networks:
+      - ppanel-net
+
+networks:
+  ppanel-net:
+    driver: bridge
+```
+
+## Troubleshooting
+
+### Container Fails to Start
+
+```bash
+# Check logs for errors
+docker compose logs ppanel
+
+# Check container status
+docker compose ps
+
+# Verify configuration
+docker compose config
+```
+
+### Port Already in Use
+
+```bash
+# Check what's using the port
+sudo lsof -i :8080
+
+# Change port in docker-compose.yml
+# ports:
+#   - "8081:8080"
+```
+
+### Permission Issues
+
+```bash
+# Fix configuration directory permissions
+sudo chown -R $USER:$USER ppanel-config/
+
+# Make sure files are readable
+chmod 644 ppanel-config/ppanel.yaml
+```
+
+### Cannot Access from Outside
+
+1. **Check firewall rules:**
+   ```bash
+   # Ubuntu/Debian
+   sudo ufw allow 8080
+
+   # CentOS/RHEL
+   sudo firewall-cmd --add-port=8080/tcp --permanent
+   sudo firewall-cmd --reload
+   ```
+
+2. **Verify service is listening:**
+   ```bash
+   docker compose ps
+   netstat -tlnp | grep 8080
+   ```
+
+## Next Steps
+
+- [Configuration Guide](/guide/configuration) - Detailed configuration options
+- [Admin Dashboard](/admin/dashboard) - Start managing your panel
+- [API Reference](/api/reference) - API integration guide
+
+## Need Help?
+
+If you encounter any issues:
+
+1. Check the [Troubleshooting](#troubleshooting) section above
+2. Review [Docker Compose logs](#view-logs)
+3. Search [GitHub Issues](https://github.com/perfect-panel/ppanel/issues)
+4. Create a new issue with detailed system information and logs
--- a/docs/guide/installation/docker-run.md
+++ b/docs/guide/installation/docker-run.md
@ -0,0 +1,348 @@
+# Docker Run Deployment
+
+This guide shows you how to deploy PPanel using the `docker run` command. This method is suitable for quick testing or simple deployments.
+
+::: tip
+For production environments, we recommend using [Docker Compose](/guide/installation/docker-compose) instead.
+:::
+
+## Prerequisites
+
+### Install Docker
+
+**Ubuntu/Debian:**
+```bash
+# Update package index
+sudo apt-get update
+
+# Install Docker
+sudo apt-get install -y ca-certificates curl gnupg lsb-release
+sudo mkdir -p /etc/apt/keyrings
+curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
+
+echo \
+  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
+  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+
+sudo apt-get update
+sudo apt-get install -y docker-ce docker-ce-cli containerd.io
+```
+
+**CentOS/RHEL:**
+```bash
+# Install Docker
+sudo yum install -y yum-utils
+sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
+sudo yum install -y docker-ce docker-ce-cli containerd.io
+
+# Start Docker
+sudo systemctl start docker
+sudo systemctl enable docker
+```
+
+### Verify Installation
+
+```bash
+docker --version
+sudo docker run hello-world
+```
+
+## Quick Start
+
+### Step 1: Pull the Image
+
+```bash
+# Pull latest version
+docker pull ppanel/ppanel:latest
+
+# Or pull a specific version
+docker pull ppanel/ppanel:v0.1.2
+```
+
+### Step 2: Prepare Configuration
+
+```bash
+# Create configuration directory
+mkdir -p ~/ppanel-config
+
+# Create configuration file
+cat > ~/ppanel-config/ppanel.yaml <<EOF
+server:
+  host: 0.0.0.0
+  port: 8080
+
+database:
+  type: sqlite
+  path: /app/data/ppanel.db
+EOF
+```
+
+### Step 3: Run Container
+
+**Basic Command:**
+```bash
+docker run -d \
+  --name ppanel \
+  -p 8080:8080 \
+  -v ~/ppanel-config:/app/etc:ro \
+  -v ppanel-data:/app/data \
+  --restart unless-stopped \
+  ppanel/ppanel:latest
+```
+
+**With All Options:**
+```bash
+docker run -d \
+  --name ppanel \
+  -p 8080:8080 \
+  -v ~/ppanel-config:/app/etc:ro \
+  -v ppanel-data:/app/data \
+  -e TZ=UTC \
+  --restart unless-stopped \
+  --memory="2g" \
+  --cpus="2" \
+  ppanel/ppanel:latest
+```
+
+**Parameter Explanation:**
+- `-d`: Run in detached mode (background)
+- `--name ppanel`: Set container name
+- `-p 8080:8080`: Map port (host:container)
+- `-v ~/ppanel-config:/app/etc:ro`: Mount configuration (read-only)
+- `-v ppanel-data:/app/data`: Create data volume
+- `-e TZ=UTC`: Set timezone
+- `--restart unless-stopped`: Auto-restart policy
+- `--memory="2g"`: Memory limit
+- `--cpus="2"`: CPU limit
+
+### Step 4: Verify Running
+
+```bash
+# Check container status
+docker ps | grep ppanel
+
+# View logs
+docker logs -f ppanel
+
+# Test access
+curl http://localhost:8080
+```
+
+## Container Management
+
+### View Logs
+
+```bash
+# View all logs
+docker logs ppanel
+
+# Follow logs in real-time
+docker logs -f ppanel
+
+# View last 100 lines
+docker logs --tail 100 ppanel
+
+# View logs with timestamps
+docker logs -t ppanel
+```
+
+### Stop Container
+
+```bash
+docker stop ppanel
+```
+
+### Start Container
+
+```bash
+docker start ppanel
+```
+
+### Restart Container
+
+```bash
+docker restart ppanel
+```
+
+### Remove Container
+
+```bash
+# Stop and remove
+docker stop ppanel
+docker rm ppanel
+```
+
+::: warning
+Removing the container does not delete the data volume. To remove the volume:
+```bash
+docker volume rm ppanel-data
+```
+:::
+
+## Upgrading
+
+### Backup Data
+
+```bash
+# Backup configuration
+tar czf ppanel-config-backup-$(date +%Y%m%d).tar.gz ~/ppanel-config/
+
+# Backup data volume
+docker run --rm \
+  -v ppanel-data:/data \
+  -v $(pwd):/backup \
+  alpine tar czf /backup/ppanel-data-backup-$(date +%Y%m%d).tar.gz /data
+```
+
+### Upgrade Process
+
+```bash
+# Pull latest image
+docker pull ppanel/ppanel:latest
+
+# Stop old container
+docker stop ppanel
+
+# Remove old container
+docker rm ppanel
+
+# Start new container with same configuration
+docker run -d \
+  --name ppanel \
+  -p 8080:8080 \
+  -v ~/ppanel-config:/app/etc:ro \
+  -v ppanel-data:/app/data \
+  --restart unless-stopped \
+  ppanel/ppanel:latest
+
+# Verify
+docker logs -f ppanel
+```
+
+## Advanced Usage
+
+### Custom Network
+
+```bash
+# Create network
+docker network create ppanel-net
+
+# Run with custom network
+docker run -d \
+  --name ppanel \
+  --network ppanel-net \
+  -p 8080:8080 \
+  -v ~/ppanel-config:/app/etc:ro \
+  -v ppanel-data:/app/data \
+  ppanel/ppanel:latest
+```
+
+### Environment Variables
+
+```bash
+docker run -d \
+  --name ppanel \
+  -p 8080:8080 \
+  -e SERVER_PORT=8080 \
+  -e DATABASE_TYPE=sqlite \
+  -e TZ=Asia/Shanghai \
+  -v ~/ppanel-config:/app/etc:ro \
+  -v ppanel-data:/app/data \
+  ppanel/ppanel:latest
+```
+
+### Multiple Instances
+
+```bash
+# Instance 1 on port 8081
+docker run -d \
+  --name ppanel-1 \
+  -p 8081:8080 \
+  -v ~/ppanel-config-1:/app/etc:ro \
+  -v ppanel-data-1:/app/data \
+  ppanel/ppanel:latest
+
+# Instance 2 on port 8082
+docker run -d \
+  --name ppanel-2 \
+  -p 8082:8080 \
+  -v ~/ppanel-config-2:/app/etc:ro \
+  -v ppanel-data-2:/app/data \
+  ppanel/ppanel:latest
+```
+
+### Resource Limits
+
+```bash
+docker run -d \
+  --name ppanel \
+  -p 8080:8080 \
+  --memory="2g" \
+  --memory-swap="2g" \
+  --cpus="2" \
+  --pids-limit=100 \
+  -v ~/ppanel-config:/app/etc:ro \
+  -v ppanel-data:/app/data \
+  ppanel/ppanel:latest
+```
+
+## Troubleshooting
+
+### Container Exits Immediately
+
+```bash
+# Check logs
+docker logs ppanel
+
+# Check architecture
+uname -m
+docker image inspect ppanel/ppanel:latest --format '{{.Architecture}}'
+```
+
+### Port Already in Use
+
+```bash
+# Check what's using the port
+sudo lsof -i :8080
+
+# Use different port
+docker run -d --name ppanel -p 8081:8080 ...
+```
+
+### Configuration Not Loading
+
+```bash
+# Verify mount
+docker exec ppanel ls -la /app/etc
+
+# Check file content
+docker exec ppanel cat /app/etc/ppanel.yaml
+
+# Check permissions
+ls -la ~/ppanel-config/
+```
+
+### Access Container Shell
+
+```bash
+# Access bash (if available)
+docker exec -it ppanel bash
+
+# Access sh
+docker exec -it ppanel sh
+
+# Run command
+docker exec ppanel ls -la /app
+```
+
+## Next Steps
+
+- Try [Docker Compose](/guide/installation/docker-compose) for easier management
+- Configure [Reverse Proxy](/guide/installation/docker-compose#configure-reverse-proxy)
+- Learn about [Configuration](/guide/configuration)
+
+## Need Help?
+
+- Check [GitHub Issues](https://github.com/perfect-panel/ppanel/issues)
+- Review Docker logs: `docker logs ppanel`
+- Verify system requirements
--- a/docs/guide/installation/index.md
+++ b/docs/guide/installation/index.md
@ -0,0 +1,57 @@
+# Installation Overview
+
+PPanel supports multiple deployment methods to suit different needs and environments. Choose the method that best fits your requirements.
+
+## Deployment Methods
+
+### Docker Deployment (Recommended)
+
+The easiest and most reliable way to deploy PPanel. Docker ensures consistent environments and simplifies updates.
+
+- **[Docker Run](/guide/installation/docker-run)** - Quick deployment with a single command
+- **[Docker Compose](/guide/installation/docker-compose)** - Production-ready deployment with better management
+
+### Traditional Deployment
+
+- **[Binary Deployment](/guide/installation/binary)** - Deploy using pre-built binaries with systemd service
+
+### Advanced Deployment
+
+- **[Kubernetes](/guide/installation/kubernetes)** - Deploy PPanel in Kubernetes clusters for high availability
+- **[From Source](/guide/installation/from-source)** - Build and run PPanel from source code
+
+## System Requirements
+
+### Minimum Requirements
+- **Operating System**: Linux (Ubuntu 20.04+, Debian 10+, CentOS 8+)
+- **CPU**: 1 core
+- **Memory**: 512MB RAM
+- **Storage**: 1GB available disk space
+
+### Recommended Requirements
+- **CPU**: 2+ cores
+- **Memory**: 2GB+ RAM
+- **Storage**: 5GB+ available disk space
+
+## Prerequisites
+
+All deployment methods require:
+- Linux-based operating system
+- Basic command line knowledge
+- Network access for downloading packages/images
+
+Specific prerequisites vary by deployment method - check the individual guides for details.
+
+## Quick Start
+
+For most users, we recommend starting with Docker Compose:
+
+1. [Install Docker and Docker Compose](/guide/installation/docker-compose#prerequisites)
+2. [Download configuration files](/guide/installation/docker-compose#download-configuration)
+3. [Start the services](/guide/installation/docker-compose#start-services)
+
+## Need Help?
+
+- Check our [Troubleshooting Guide](/guide/troubleshooting)
+- Visit [GitHub Issues](https://github.com/perfect-panel/ppanel/issues)
+- Join our community discussions
--- a/docs/guide/intro.md
+++ b/docs/guide/intro.md
@ -0,0 +1,93 @@
+# Introduction
+
+Welcome to PPanel! This is a pure, professional, and perfect open-source proxy panel tool designed to provide users with a complete management solution.
+
+## What is PPanel?
+
+PPanel is a modern proxy panel system that uses a separated frontend-backend architecture, providing complete user management, subscription services, order management, node management, and more. Whether you're an individual or enterprise user, PPanel can meet your needs.
+
+## Core Features
+
+- **🎯 Complete Management**: Server management, node configuration, subscription system, product management and more
+- **💼 Business Operations**: Order management, coupon system, marketing campaigns, announcement publishing
+- **👥 User Support System**: User management, ticket system, documentation center for comprehensive user service
+- **📊 Data Analytics**: 12 types of logs with comprehensive traffic, balance, commission data analysis
+- **🔧 Flexible Configuration**: Payment config, authentication control, ad management and flexible system options
+- **🚀 Modern Tech Stack**: Built with React 19 + TypeScript + TailwindCSS + shadcn/ui
+
+## Terminology
+
+Some of PPanel's terminology differs from other panel systems. To ensure accurate understanding and avoid confusion, please familiarize yourself with the following terms before reading the documentation:
+
+### User Frontend
+The interface provided to end users, through which users interact with the system. You can customize or refactor this interface according to your needs to achieve site personalization.
+
+### Admin Frontend
+The interface for administrator operations, responsible for managing the system, users, and data. You can customize or refactor this interface according to your management needs.
+
+### Backend Server
+PPanel's API layer that handles all data interactions with the frontend, responsible for executing business logic and providing data services.
+
+### Node Server
+Responsible for communication between PPanel's backend server and various nodes (landing points), ensuring network node connectivity and service stability.
+
+### Client
+The application program users use to connect to the system, typically referring to user device software or applications, responsible for establishing connections with the system and using related services.
+
+## Project Architecture
+
+PPanel uses Monorepo architecture for unified management and maintenance:
+
+### Frontend Applications
+- **apps/admin**: Admin panel application providing complete backend management features
+- **apps/user**: User-facing application providing service interface for end users
+
+### Shared Packages
+- **packages/ui**: Shared UI component library containing all reusable UI components
+- **packages/typescript-config**: Unified TypeScript configuration
+
+### Tech Stack
+- **Framework**: React 19 + TypeScript
+- **Router**: TanStack Router
+- **State Management**: Zustand
+- **Styling**: TailwindCSS 4.0
+- **UI Components**: shadcn/ui
+- **Build Tools**: Vite + Turbo
+- **Code Standards**: Biome
+- **Git Standards**: Lefthook + Gitmoji
+
+## Key Features
+
+### Maintenance
+- Server Management
+- Node Management
+- Subscribe Configuration
+- Product Management
+
+### Commerce
+- Order Management
+- Coupon Management
+- Marketing Management
+- Announcement Management
+
+### Users & Support
+- User Management
+- Ticket System
+- Document Management
+
+### System
+- System Configuration
+- Authentication Control
+- Payment Configuration
+- ADS Configuration
+
+### Logs & Analytics
+- Complete operation logs
+- Traffic statistics
+- Financial data tracking
+
+## Next Steps
+
+- [Installation](/guide/installation/) - Learn how to deploy PPanel
+- [Configuration](/guide/configuration) - Configure your PPanel instance
+- [Admin Panel](/admin/dashboard) - Start using admin features
--- a/docs/guide/node/installation.md
+++ b/docs/guide/node/installation.md
@ -0,0 +1,168 @@
+# Node Agent Installation
+
+`ppanel-node` is the lightweight agent each edge server runs to sync routes, heartbeats, and transport keys with the PPanel control plane. This guide covers the fastest install path plus alternative deployments.
+
+## Quick start
+
+```bash
+wget -N https://raw.githubusercontent.com/perfect-panel/ppanel-node/master/scripts/install.sh
+sudo bash install.sh --api-host https://panel.example.com --server-id 1 --secret-key <SECRET>
+```
+
+The script auto-detects your distro/architecture, downloads the latest release, installs geo databases, and sets up the `ppnode` CLI + system service.
+
+### Requirements
+
+- 64-bit Linux (Debian/Ubuntu ≥16, CentOS ≥7, Alpine, Arch, etc.)
+- Root access and outbound HTTPS connectivity to `github.com`
+- Firewall ports open for the protocols you expose as well as panel callbacks
+- Matching **Server ID** + **Secret Key** generated in the PPanel admin console
+
+### Optional flags
+
+- Positional `vX.Y.Z` argument installs a specific tag instead of the latest release.
+- `--api-host https://panel.example.com`
+- `--server-id <ID>` (matches the record you created under Maintenance → Servers)
+- `--secret-key <KEY>`
+
+If the flags are omitted the installer will prompt for the values interactively.
+
+### Service operations
+
+Once installed you can manage the agent with the bundled CLI:
+
+```bash
+ppnode status      # current state
+ppnode start       # start daemon
+ppnode restart     # restart + reload config
+ppnode log         # follow logs
+ppnode update      # upgrade to latest release
+ppnode update v1.2.3
+ppnode uninstall
+ppnode generate    # regenerate /etc/PPanel-node/config.yml
+```
+
+## Installation methods
+
+### Method 1 — One-click installer (recommended)
+
+Use the Quick Start command above or run `sudo bash install.sh` and answer the prompts. Behind the scenes the script:
+
+1. Installs prerequisites (`wget`, `curl`, `tar`, `socat`, cron, etc.).
+2. Downloads `ppanel-node-linux-<arch>.zip` for amd64, arm64, or s390x.
+3. Extracts to `/usr/local/PPanel-node`, installs `geoip.dat`/`geosite.dat`, and wires the service with systemd/OpenRC.
+4. Drops the helper CLI to `/usr/bin/ppnode` and enables auto-start.
+
+### Method 2 — Build from source
+
+1. Install Go 1.21 or newer and enable the JSON v2 experiment:
+
+    ```bash
+    export GOEXPERIMENT=jsonv2
+    ```
+
+2. Clone the repository and build:
+
+    ```bash
+    git clone https://github.com/perfect-panel/ppanel-node.git
+    cd ppanel-node
+    GOEXPERIMENT=jsonv2 go build -v -o ./ppnode -trimpath -ldflags "-s -w -buildid="
+    ```
+
+3. Copy the binary plus geo assets to their runtime locations:
+
+    ```bash
+    sudo install -Dm755 ./ppnode /usr/local/PPanel-node/ppnode
+    sudo install -Dm644 ./geoip.dat /etc/PPanel-node/geoip.dat
+    sudo install -Dm644 ./geosite.dat /etc/PPanel-node/geosite.dat
+    ```
+
+4. Create the systemd unit (adapt paths as needed):
+
+    ```bash
+    sudo tee /etc/systemd/system/PPanel-node.service <<'EOF'
+    [Unit]
+    Description=PPanel Node
+    After=network.target
+
+    [Service]
+    Type=simple
+    ExecStart=/usr/local/PPanel-node/ppnode server
+    Restart=always
+    RestartSec=10
+
+    [Install]
+    WantedBy=multi-user.target
+    EOF
+    sudo systemctl daemon-reload
+    sudo systemctl enable --now PPanel-node
+    ```
+
+5. Copy `config.yml` from the repo or create it manually (see the configuration section) and restart the service.
+
+### Method 3 — Docker / container images
+
+The repository ships a `Dockerfile`. You can build and run it on hosts where installing directly is undesirable:
+
+```bash
+git clone https://github.com/perfect-panel/ppanel-node.git
+cd ppanel-node
+docker build -t ppanel-node:latest .
+docker run -d --name ppanel-node \
+  --net host \
+  -v /etc/PPanel-node:/etc/PPanel-node \
+  ppanel-node:latest server
+```
+
+Recommended bind mounts:
+
+- `/etc/PPanel-node/config.yml` – credentials and API settings.
+- `/etc/PPanel-node/geoip.dat` & `/etc/PPanel-node/geosite.dat` – keep them on the host so updates persist.
+- `/var/log/ppanel-node` (optional) – collect structured logs outside the container.
+
+## Configure the node
+
+The runtime configuration lives in `/etc/PPanel-node/config.yml`. The installer generates the file with the following structure:
+
+```yaml
+Log:
+  Level: warn          # debug | info | warn | error
+  Output: ""           # empty = stdout, or set a file path
+  Access: none         # path for access logs, or "none"
+
+Api:
+  ApiHost: https://panel.example.com
+  ServerID: 3
+  SecretKey: b23d8ee1cfe44d7f
+  Timeout: 30
+```
+
+After editing the file, restart the service:
+
+```bash
+sudo systemctl restart PPanel-node
+# or
+ppnode restart
+```
+
+### Mapping to the panel
+
+1. Create a server entry in the **Maintenance → Servers** page inside the PPanel admin UI.
+2. Copy the generated **Server ID** and **Secret Key** into `config.yml`.
+3. Ensure the node host can reach the panel’s HTTPS endpoint defined as `ApiHost`.
+4. Approve the node once it appears under the panel’s node list (heartbeat should update within ~30 seconds).
+
+## Maintenance
+
+- `ppnode update` keeps configuration/geo files intact while replacing the binary.
+- `ppnode update vX.Y.Z` pins a specific release for rollbacks.
+- For manual builds, rebuild the target tag, replace `/usr/local/PPanel-node/ppnode`, then `systemctl restart PPanel-node`.
+
+## Troubleshooting
+
+- `ppnode log` or `journalctl -u PPanel-node -f` surfaces runtime logs.
+- Validate `/etc/PPanel-node/config.yml`—typos in `ApiHost` or `SecretKey` cause auth failures.
+- Ensure the host can reach GitHub (updates) and your panel domain on port 443.
+- If the panel lists the node as offline, verify firewall rules allow heartbeats and that NTP is synchronized (`chronyc tracking`).
+
+Need more detail? Review the source at [`github.com/perfect-panel/ppanel-node`](https://github.com/perfect-panel/ppanel-node).
--- a/docs/guide/separation/backend.md
+++ b/docs/guide/separation/backend.md
@ -0,0 +1,505 @@
+# Backend Separation Deployment
+
+This guide will help you independently deploy the PPanel backend service, suitable for front-end and back-end separation deployment scenarios.
+
+## Overview
+
+Backend separation deployment allows you to deploy the PPanel backend service on an independent server to provide API services for frontend applications. This deployment method has the following advantages:
+
+- 🚀 Independently scale backend service performance
+- 🔒 Better security isolation
+- 🌐 Support multiple frontend instances connecting to the same backend
+- 🛠️ Facilitate independent maintenance and upgrades of backend services
+
+## System Requirements
+
+### Minimum Configuration
+- CPU: 1 core
+- Memory: 1 GB
+- Storage: 10 GB
+- OS: Linux (Ubuntu 20.04+, Debian 11+, CentOS 8+ recommended)
+
+### Recommended Configuration
+- CPU: 2+ cores
+- Memory: 2+ GB
+- Storage: 20+ GB
+
+## Deployment Methods
+
+### Method 1: Docker Deployment (Recommended)
+
+#### 1. Install Docker
+
+```bash
+# Ubuntu/Debian
+curl -fsSL https://get.docker.com | sh
+
+# Start Docker service
+sudo systemctl start docker
+sudo systemctl enable docker
+```
+
+#### 2. Create Configuration File
+
+Create backend config file `config.yaml`:
+
+```yaml
+# Database configuration
+database:
+  type: mysql
+  host: localhost
+  port: 3306
+  username: ppanel
+  password: your_password
+  database: ppanel
+
+# Redis configuration
+redis:
+  host: localhost
+  port: 6379
+  password: ""
+  db: 0
+
+# Server configuration
+server:
+  host: 0.0.0.0
+  port: 8080
+
+# CORS configuration (Important: allow frontend domain access)
+cors:
+  allow_origins:
+    - "https://your-frontend-domain.com"
+    - "http://localhost:3000"  # Development environment
+  allow_methods:
+    - GET
+    - POST
+    - PUT
+    - DELETE
+    - OPTIONS
+  allow_headers:
+    - "*"
+
+# JWT configuration
+jwt:
+  secret: "your-secret-key"
+  expire: 7200  # 2 hours
+
+# API configuration
+api:
+  prefix: "/api"
+  version: "v1"
+```
+
+#### 3. Prepare MySQL Database
+
+```bash
+# Run MySQL with Docker
+docker run -d \
+  --name ppanel-mysql \
+  -e MYSQL_ROOT_PASSWORD=root_password \
+  -e MYSQL_DATABASE=ppanel \
+  -e MYSQL_USER=ppanel \
+  -e MYSQL_PASSWORD=your_password \
+  -p 3306:3306 \
+  -v ppanel-mysql-data:/var/lib/mysql \
+  mysql:8.0
+
+# Wait for MySQL to start
+sleep 10
+```
+
+#### 4. Prepare Redis
+
+```bash
+# Run Redis with Docker
+docker run -d \
+  --name ppanel-redis \
+  -p 6379:6379 \
+  -v ppanel-redis-data:/data \
+  redis:7-alpine
+```
+
+#### 5. Run Backend Service
+
+```bash
+# Pull backend image
+docker pull ghcr.io/perfect-panel/ppanel:latest
+
+# Run backend container
+docker run -d \
+  --name ppanel-backend \
+  -p 8080:8080 \
+  -v $(pwd)/config.yaml:/app/config.yaml \
+  --link ppanel-mysql:mysql \
+  --link ppanel-redis:redis \
+  ghcr.io/perfect-panel/ppanel:latest
+```
+
+#### 6. Initialize Database
+
+```bash
+# Execute database migration
+docker exec ppanel-backend ./ppanel migrate
+```
+
+### Method 2: Binary Deployment
+
+#### 1. Download Backend Program
+
+```bash
+# Download latest version
+wget https://github.com/perfect-panel/ppanel/releases/latest/download/ppanel-linux-amd64.tar.gz
+
+# Extract
+tar -xzf ppanel-linux-amd64.tar.gz
+cd ppanel
+
+# Grant execute permission
+chmod +x ppanel
+```
+
+#### 2. Configure Backend Service
+
+Create config file `config.yaml` (same content as Docker deployment method).
+
+#### 3. Install and Configure MySQL
+
+```bash
+# Ubuntu/Debian
+sudo apt update
+sudo apt install mysql-server -y
+
+# Create database and user
+sudo mysql <<EOF
+CREATE DATABASE ppanel;
+CREATE USER 'ppanel'@'localhost' IDENTIFIED BY 'your_password';
+GRANT ALL PRIVILEGES ON ppanel.* TO 'ppanel'@'localhost';
+FLUSH PRIVILEGES;
+EOF
+```
+
+#### 4. Install and Configure Redis
+
+```bash
+# Ubuntu/Debian
+sudo apt install redis-server -y
+sudo systemctl start redis-server
+sudo systemctl enable redis-server
+```
+
+#### 5. Initialize Database
+
+```bash
+# Execute database migration
+./ppanel migrate
+```
+
+#### 6. Create systemd Service
+
+Create service file `/etc/systemd/system/ppanel.service`:
+
+```ini
+[Unit]
+Description=PPanel Backend Service
+After=network.target mysql.service redis.service
+
+[Service]
+Type=simple
+User=ppanel
+WorkingDirectory=/opt/ppanel
+ExecStart=/opt/ppanel/ppanel server
+Restart=on-failure
+RestartSec=5s
+StandardOutput=journal
+StandardError=journal
+
+[Install]
+WantedBy=multi-user.target
+```
+
+Start service:
+
+```bash
+# Create dedicated user
+sudo useradd -r -s /bin/false ppanel
+
+# Move files to installation directory
+sudo mkdir -p /opt/ppanel
+sudo mv ppanel config.yaml /opt/ppanel/
+sudo chown -R ppanel:ppanel /opt/ppanel
+
+# Start service
+sudo systemctl daemon-reload
+sudo systemctl start ppanel
+sudo systemctl enable ppanel
+
+# Check service status
+sudo systemctl status ppanel
+```
+
+## Configure Reverse Proxy
+
+### Nginx Configuration
+
+```nginx
+server {
+    listen 80;
+    server_name api.your-domain.com;
+
+    # HTTPS redirect (recommended to configure SSL certificate)
+    # return 301 https://$server_name$request_uri;
+
+    location / {
+        proxy_pass http://127.0.0.1:8080;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        # WebSocket support
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+
+        # Timeout configuration
+        proxy_connect_timeout 60s;
+        proxy_send_timeout 60s;
+        proxy_read_timeout 60s;
+    }
+}
+
+# HTTPS configuration example
+# server {
+#     listen 443 ssl http2;
+#     server_name api.your-domain.com;
+#
+#     ssl_certificate /path/to/cert.pem;
+#     ssl_certificate_key /path/to/key.pem;
+#
+#     location / {
+#         proxy_pass http://127.0.0.1:8080;
+#         # ... other configs same as above
+#     }
+# }
+```
+
+Reload Nginx:
+
+```bash
+sudo nginx -t
+sudo systemctl reload nginx
+```
+
+### Caddy Configuration
+
+```caddy
+api.your-domain.com {
+    reverse_proxy localhost:8080
+}
+```
+
+## Verify Deployment
+
+### Health Check
+
+```bash
+# Check if backend service is running
+curl http://localhost:8080/api/health
+
+# Expected output
+# {"status":"ok","version":"1.0.0"}
+```
+
+### Test API
+
+```bash
+# Test public API
+curl http://localhost:8080/api/v1/ping
+
+# Expected output
+# {"message":"pong"}
+```
+
+## Environment Variable Configuration
+
+Besides config file, you can also use environment variables:
+
+```bash
+# Database configuration
+export DB_HOST=localhost
+export DB_PORT=3306
+export DB_USER=ppanel
+export DB_PASSWORD=your_password
+export DB_NAME=ppanel
+
+# Redis configuration
+export REDIS_HOST=localhost
+export REDIS_PORT=6379
+export REDIS_PASSWORD=""
+
+# JWT secret
+export JWT_SECRET=your-secret-key
+
+# Server port
+export SERVER_PORT=8080
+```
+
+Using environment variables with Docker:
+
+```bash
+docker run -d \
+  --name ppanel-backend \
+  -p 8080:8080 \
+  -e DB_HOST=mysql \
+  -e DB_USER=ppanel \
+  -e DB_PASSWORD=your_password \
+  -e REDIS_HOST=redis \
+  --link ppanel-mysql:mysql \
+  --link ppanel-redis:redis \
+  ghcr.io/perfect-panel/ppanel:latest
+```
+
+## Security Recommendations
+
+1. **Use Strong Passwords**: Set strong passwords for database and JWT secret
+2. **Configure Firewall**: Only open necessary ports (e.g., 80, 443)
+3. **Enable HTTPS**: Use SSL/TLS certificates to encrypt communication
+4. **CORS Configuration**: Only allow trusted frontend domains
+5. **Regular Backups**: Regularly backup database and config files
+6. **Monitor Logs**: Regularly check application and system logs
+
+## Troubleshooting
+
+### Service Failed to Start
+
+```bash
+# View service logs
+sudo journalctl -u ppanel -n 50 --no-pager
+
+# Docker view logs
+docker logs ppanel-backend
+```
+
+### Database Connection Failed
+
+```bash
+# Test MySQL connection
+mysql -h localhost -u ppanel -p -e "SELECT 1;"
+
+# Check MySQL service status
+sudo systemctl status mysql
+```
+
+### Redis Connection Failed
+
+```bash
+# Test Redis connection
+redis-cli ping
+
+# Check Redis service status
+sudo systemctl status redis-server
+```
+
+### CORS Error
+
+Ensure frontend domain is correctly configured in `config.yaml`:
+
+```yaml
+cors:
+  allow_origins:
+    - "https://your-frontend-domain.com"
+```
+
+## Performance Optimization
+
+### Database Optimization
+
+```sql
+-- Create necessary indexes
+CREATE INDEX idx_user_email ON users(email);
+CREATE INDEX idx_order_status ON orders(status);
+CREATE INDEX idx_created_at ON orders(created_at);
+```
+
+### Redis Cache Configuration
+
+```yaml
+redis:
+  # Enable cache
+  cache_enabled: true
+  # Cache expiration time (seconds)
+  cache_ttl: 3600
+```
+
+### Application Layer Optimization
+
+```yaml
+# Enable Gzip compression
+server:
+  gzip: true
+
+# Adjust concurrent connections
+server:
+  max_connections: 1000
+```
+
+## Upgrade Guide
+
+### Docker Upgrade
+
+```bash
+# Pull latest image
+docker pull ghcr.io/perfect-panel/ppanel:latest
+
+# Stop old container
+docker stop ppanel-backend
+
+# Backup data
+docker exec ppanel-mysql mysqldump -u ppanel -p ppanel > backup.sql
+
+# Remove old container
+docker rm ppanel-backend
+
+# Run new container
+docker run -d \
+  --name ppanel-backend \
+  -p 8080:8080 \
+  -v $(pwd)/config.yaml:/app/config.yaml \
+  --link ppanel-mysql:mysql \
+  --link ppanel-redis:redis \
+  ghcr.io/perfect-panel/ppanel:latest
+
+# Execute database migration
+docker exec ppanel-backend ./ppanel migrate
+```
+
+### Binary Upgrade
+
+```bash
+# Stop service
+sudo systemctl stop ppanel
+
+# Backup old version
+sudo cp /opt/ppanel/ppanel /opt/ppanel/ppanel.backup
+
+# Download new version
+wget https://github.com/perfect-panel/ppanel/releases/latest/download/ppanel-linux-amd64.tar.gz
+tar -xzf ppanel-linux-amd64.tar.gz
+
+# Replace file
+sudo mv ppanel /opt/ppanel/
+sudo chown ppanel:ppanel /opt/ppanel/ppanel
+
+# Execute database migration
+cd /opt/ppanel
+sudo -u ppanel ./ppanel migrate
+
+# Start service
+sudo systemctl start ppanel
+```
+
+## Next Steps
+
+- [Frontend Separation Deployment](./frontend.md) - Deploy frontend application
+- [Node Agent Installation](../node/installation.md) - Deploy node service
+- [API Documentation](/api/reference) - View complete API documentation
--- a/docs/guide/separation/frontend.md
+++ b/docs/guide/separation/frontend.md
@ -0,0 +1,689 @@
+# Frontend Separation Deployment
+
+This guide will help you independently deploy PPanel frontend applications and connect them to the deployed backend service.
+
+## Overview
+
+Frontend separation deployment allows you to deploy PPanel frontend applications on independent servers or CDN, communicating with backend services through APIs.
+
+PPanel frontend includes two independent applications:
+- **User Web** (`ppanel-user-web`): User-facing interface
+- **Admin Web** (`ppanel-admin-web`): Administrator backend management interface
+
+### Advantages
+
+- 🚀 Leverage CDN to accelerate static resource access
+- 🌍 Support multi-region distribution
+- 📦 Independent frontend deployment without affecting backend services
+- 🔄 Facilitate rapid frontend iteration and updates
+- 🎨 Modern tech stack (React 19, TypeScript, TailwindCSS 4)
+
+## Prerequisites
+
+- Completed [Backend Deployment](./backend.md)
+- Backend API address (e.g., `https://api.your-domain.com`)
+- Frontend domains:
+  - User Web: `https://user.your-domain.com`
+  - Admin Web: `https://admin.your-domain.com`
+
+## Tech Stack
+
+- **Runtime**: Bun (recommended) / Node.js 20+
+- **Build Tool**: Vite 6
+- **Framework**: React 19 + TypeScript
+- **Router**: TanStack Router
+- **Styling**: TailwindCSS 4
+- **State Management**: Zustand
+- **i18n**: i18next
+- **Monorepo**: Turborepo
+
+## Deployment Methods
+
+### Method 1: Build from Source (Recommended)
+
+#### 1. Environment Setup
+
+Install Bun (recommended):
+
+```bash
+# Linux/macOS
+curl -fsSL https://bun.sh/install | bash
+
+# Windows (WSL2)
+curl -fsSL https://bun.sh/install | bash
+
+# Verify installation
+bun --version
+```
+
+Or use Node.js (requires 20+):
+
+```bash
+# Check Node.js version
+node --version  # Should be v20 or higher
+```
+
+#### 2. Clone Repository
+
+```bash
+git clone https://github.com/perfect-panel/frontend.git
+cd frontend
+```
+
+#### 3. Install Dependencies
+
+```bash
+# Using Bun (recommended, faster)
+bun install
+
+# Or using npm
+npm install
+
+# Or using pnpm
+pnpm install
+```
+
+#### 4. Configure Environment Variables
+
+Create environment configuration files in application directories.
+
+**Admin Web Config** (`apps/admin/.env.production`):
+
+```bash
+# Backend API address (required)
+VITE_API_BASE_URL=https://api.your-domain.com
+
+# CDN address (optional, for accelerating static resources)
+VITE_CDN_URL=https://cdn.jsdmirror.com
+
+# Enable tutorial documentation (optional)
+VITE_TUTORIAL_DOCUMENT=true
+
+# Development default credentials (leave empty in production)
+VITE_USER_EMAIL=
+VITE_USER_PASSWORD=
+```
+
+**User Web Config** (`apps/user/.env.production`):
+
+```bash
+# Backend API address (required)
+VITE_API_BASE_URL=https://api.your-domain.com
+
+# CDN address (optional)
+VITE_CDN_URL=https://cdn.jsdmirror.com
+
+# Enable tutorial documentation (optional)
+VITE_TUTORIAL_DOCUMENT=true
+
+# Development default credentials (leave empty in production)
+VITE_USER_EMAIL=
+VITE_USER_PASSWORD=
+```
+
+#### 5. Build Applications
+
+Build all applications:
+
+```bash
+# Using Bun
+bun run build
+
+# Or using npm
+npm run build
+```
+
+Build specific application:
+
+```bash
+# Navigate to application directory
+cd apps/admin  # or apps/user
+
+# Build
+bun run build  # or npm run build
+```
+
+After build completes, static files will be output to:
+- Admin Web: `apps/admin/dist/`
+- User Web: `apps/user/dist/`
+
+#### 6. Preview Build
+
+```bash
+# In application directory
+bun run serve  # or npm run serve
+
+# Default access address:
+# Admin Web: http://localhost:4173
+# User Web: http://localhost:4173
+```
+
+### Method 2: Deploy with Vercel (One-Click)
+
+#### Admin Web Deployment
+
+Click the button below to deploy to Vercel with one click:
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-description=PPanel%20is%20a%20pure%2C%20professional%2C%20and%20perfect%20open-source%20proxy%20panel%20tool&demo-image=https%3A%2F%2Furlscan.io%2Fliveshot%2F%3Fwidth%3D1920%26height%3D1080%26url%3Dhttps%3A%2F%2Fadmin.ppanel.dev&demo-title=PPanel%20Admin%20Web&repository-url=https%3A%2F%2Fgithub.com%2Fperfect-panel%2Ffrontend&root-directory=apps%2Fadmin)
+
+#### User Web Deployment
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-description=PPanel%20is%20a%20pure%2C%20professional%2C%20and%20perfect%20open-source%20proxy%20panel%20tool&demo-image=https%3A%2F%2Furlscan.io%2Fliveshot%2F%3Fwidth%3D1920%26height%3D1080%26url%3Dhttps%3A%2F%2Fuser.ppanel.dev&demo-title=PPanel%20User%20Web&repository-url=https%3A%2F%2Fgithub.com%2Fperfect-panel%2Ffrontend&root-directory=apps%2Fuser)
+
+After deployment, configure environment variables in Vercel console:
+- `VITE_API_BASE_URL`: Your backend API address
+- `VITE_CDN_URL`: CDN address (optional)
+
+### Method 3: Deploy with Netlify
+
+#### 1. Install Netlify CLI
+
+```bash
+npm install -g netlify-cli
+```
+
+#### 2. Login to Netlify
+
+```bash
+netlify login
+```
+
+#### 3. Deploy Application
+
+```bash
+# Admin Web
+cd apps/admin
+bun run build
+netlify deploy --prod --dir=dist
+
+# User Web
+cd apps/user
+bun run build
+netlify deploy --prod --dir=dist
+```
+
+#### 4. Configure Environment Variables
+
+Add in Netlify console under Site settings → Build & deploy → Environment:
+- `VITE_API_BASE_URL`
+- `VITE_CDN_URL`
+
+### Method 4: Deploy with Cloudflare Pages
+
+#### 1. Connect GitHub Repository
+
+Login to Cloudflare Dashboard → Workers & Pages → Create application → Pages → Connect to Git
+
+#### 2. Configure Build Settings
+
+**Admin Web**:
+- **Framework preset**: None
+- **Build command**: `cd .. && bun install && cd apps/admin && bun run build`
+- **Build output directory**: `apps/admin/dist`
+- **Root directory**: `apps/admin`
+
+**User Web**:
+- **Framework preset**: None
+- **Build command**: `cd .. && bun install && cd apps/user && bun run build`
+- **Build output directory**: `apps/user/dist`
+- **Root directory**: `apps/user`
+
+#### 3. Configure Environment Variables
+
+Add in Settings → Environment variables:
+- `VITE_API_BASE_URL`
+- `VITE_CDN_URL`
+
+## Self-Hosted Server Deployment
+
+### Using Nginx
+
+#### 1. Install Nginx
+
+```bash
+# Ubuntu/Debian
+sudo apt update
+sudo apt install nginx -y
+
+# CentOS/RHEL
+sudo yum install nginx -y
+```
+
+#### 2. Upload Build Files
+
+```bash
+# Create directories
+sudo mkdir -p /var/www/ppanel/{admin,user}
+
+# Upload build files
+sudo cp -r apps/admin/dist/* /var/www/ppanel/admin/
+sudo cp -r apps/user/dist/* /var/www/ppanel/user/
+
+# Set permissions
+sudo chown -R www-data:www-data /var/www/ppanel
+```
+
+#### 3. Configure Nginx
+
+**Admin Web Config** (`/etc/nginx/sites-available/ppanel-admin`):
+
+```nginx
+server {
+    listen 80;
+    server_name admin.your-domain.com;
+
+    root /var/www/ppanel/admin;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+    gzip_vary on;
+    gzip_min_length 1024;
+
+    # Static resource caching
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # SPA routing support
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+    add_header Referrer-Policy "no-referrer-when-downgrade" always;
+}
+```
+
+**User Web Config** (`/etc/nginx/sites-available/ppanel-user`):
+
+```nginx
+server {
+    listen 80;
+    server_name user.your-domain.com;
+
+    root /var/www/ppanel/user;
+    index index.html;
+
+    # Other config same as admin web
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+}
+```
+
+#### 4. Enable Sites
+
+```bash
+# Enable sites
+sudo ln -s /etc/nginx/sites-available/ppanel-admin /etc/nginx/sites-enabled/
+sudo ln -s /etc/nginx/sites-available/ppanel-user /etc/nginx/sites-enabled/
+
+# Test configuration
+sudo nginx -t
+
+# Reload Nginx
+sudo systemctl reload nginx
+```
+
+#### 5. Configure HTTPS (Recommended)
+
+Use Certbot to automatically configure SSL certificates:
+
+```bash
+# Install Certbot
+sudo apt install certbot python3-certbot-nginx -y
+
+# Obtain certificates
+sudo certbot --nginx -d admin.your-domain.com
+sudo certbot --nginx -d user.your-domain.com
+
+# Test auto-renewal
+sudo certbot renew --dry-run
+```
+
+### Using Caddy
+
+Caddy automatically handles HTTPS with simpler configuration.
+
+#### 1. Install Caddy
+
+```bash
+# Ubuntu/Debian
+sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https
+curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
+curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
+sudo apt update
+sudo apt install caddy
+```
+
+#### 2. Configure Caddyfile
+
+Create `/etc/caddy/Caddyfile`:
+
+```caddy
+admin.your-domain.com {
+    root * /var/www/ppanel/admin
+    encode gzip
+    file_server
+
+    try_files {path} /index.html
+
+    @static {
+        path *.js *.css *.png *.jpg *.jpeg *.gif *.ico *.svg *.woff *.woff2 *.ttf *.eot
+    }
+    header @static Cache-Control "public, max-age=31536000, immutable"
+
+    header {
+        X-Frame-Options "SAMEORIGIN"
+        X-Content-Type-Options "nosniff"
+        X-XSS-Protection "1; mode=block"
+    }
+}
+
+user.your-domain.com {
+    root * /var/www/ppanel/user
+    encode gzip
+    file_server
+
+    try_files {path} /index.html
+
+    @static {
+        path *.js *.css *.png *.jpg *.jpeg *.gif *.ico *.svg *.woff *.woff2 *.ttf *.eot
+    }
+    header @static Cache-Control "public, max-age=31536000, immutable"
+
+    header {
+        X-Frame-Options "SAMEORIGIN"
+        X-Content-Type-Options "nosniff"
+        X-XSS-Protection "1; mode=block"
+    }
+}
+```
+
+#### 3. Start Caddy
+
+```bash
+sudo systemctl restart caddy
+sudo systemctl enable caddy
+```
+
+## CDN Configuration
+
+### Cloudflare Configuration
+
+1. Add domain to Cloudflare
+2. Configure DNS records pointing to origin server
+3. Enable optimization options:
+   - **Auto Minify**: Enable JavaScript, CSS, HTML minification
+   - **Brotli**: Enable Brotli compression
+   - **Rocket Loader**: Enable JS async loading (optional)
+   - **Caching Level**: Set to Standard
+
+4. Configure page rules:
+   ```
+   *your-domain.com/*
+   - Cache Level: Cache Everything
+   - Edge Cache TTL: 1 month
+   - Browser Cache TTL: Respect Existing Headers
+   ```
+
+### Alibaba Cloud CDN
+
+1. Create CDN acceleration domain
+2. Configure origin server: Point to frontend server
+3. Configure caching rules:
+   - Static files (js, css, images): Cache 1 year
+   - HTML files: Cache 5 minutes or no cache
+4. Enable HTTPS and HTTP/2
+
+## Environment Variables
+
+| Variable | Description | Required | Default | Example |
+|----------|-------------|----------|---------|---------|
+| `VITE_API_BASE_URL` | Backend API address | ✅ | - | `https://api.your-domain.com` |
+| `VITE_CDN_URL` | CDN address | ❌ | `https://cdn.jsdmirror.com` | `https://cdn.your-domain.com` |
+| `VITE_TUTORIAL_DOCUMENT` | Enable tutorial docs | ❌ | `true` | `true` / `false` |
+| `VITE_USER_EMAIL` | Default login email (dev only) | ❌ | - | - |
+| `VITE_USER_PASSWORD` | Default login password (dev only) | ❌ | - | - |
+
+## Verify Deployment
+
+### Check Frontend Service
+
+```bash
+# Access frontend addresses
+curl -I https://admin.your-domain.com
+curl -I https://user.your-domain.com
+
+# Expected output
+# HTTP/2 200
+# content-type: text/html
+```
+
+### Check API Connection
+
+Open frontend address in browser, open developer tools:
+
+1. Check Network tab
+2. Verify API requests are successful
+3. Confirm request addresses are correct (`https://api.your-domain.com`)
+4. Check response data is normal
+
+### Check Build Version
+
+Access `/version.lock` file to view currently deployed version:
+
+```bash
+curl https://admin.your-domain.com/version.lock
+# Example output: 1.2.0
+```
+
+## Performance Optimization
+
+### 1. Enable HTTP/2
+
+In Nginx:
+
+```nginx
+listen 443 ssl http2;
+```
+
+### 2. Enable Brotli Compression
+
+```bash
+# Install Nginx Brotli module
+sudo apt install libnginx-mod-http-brotli-filter libnginx-mod-http-brotli-static -y
+```
+
+In Nginx configuration:
+
+```nginx
+brotli on;
+brotli_types text/plain text/css application/json application/javascript text/xml application/xml;
+brotli_comp_level 6;
+```
+
+### 3. Preload Critical Resources
+
+Vite automatically handles this during build, adding `<link rel="modulepreload">` in `index.html`.
+
+### 4. Enable Service Worker
+
+Frontend has built-in PWA support, Service Worker caching is automatically enabled after build.
+
+### 5. Use CDN Acceleration
+
+Configure `VITE_CDN_URL` environment variable to load static resources from CDN.
+
+## Troubleshooting
+
+### API Request Failed
+
+**Issue**: Frontend cannot connect to backend API
+
+**Solution**:
+1. Check if `VITE_API_BASE_URL` is correctly configured
+2. Check if backend CORS configuration allows frontend domain
+3. Open browser console for specific error messages
+4. Use `curl` to test if backend API is accessible
+
+```bash
+curl https://api.your-domain.com/api/health
+```
+
+### Page Route 404
+
+**Issue**: Refreshing page or directly accessing sub-route returns 404
+
+**Solution**: Ensure web server has SPA fallback configured
+
+```nginx
+# Nginx
+try_files $uri $uri/ /index.html;
+
+# Apache (.htaccess)
+RewriteEngine On
+RewriteBase /
+RewriteRule ^index\.html$ - [L]
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule . /index.html [L]
+```
+
+### Static Resource Loading Failed
+
+**Issue**: JS/CSS files 404 or cannot load
+
+**Solution**:
+1. Check file permissions
+2. Check if Nginx `root` path is correct
+3. Clear browser cache
+4. Check CDN configuration
+
+### Build Failed
+
+**Issue**: `bun run build` or `npm run build` fails
+
+**Solution**:
+1. Ensure Node.js version >= 20
+2. Delete `node_modules` and lock file, reinstall
+   ```bash
+   rm -rf node_modules bun.lockb
+   bun install
+   ```
+3. Check for syntax errors or type errors
+   ```bash
+   bun run check
+   ```
+
+## Update Deployment
+
+### Update from Source
+
+```bash
+# Pull latest code
+git pull origin main
+
+# Reinstall dependencies
+bun install
+
+# Rebuild
+bun run build
+
+# Update files
+sudo rm -rf /var/www/ppanel/admin
+sudo rm -rf /var/www/ppanel/user
+sudo cp -r apps/admin/dist /var/www/ppanel/admin
+sudo cp -r apps/user/dist /var/www/ppanel/user
+
+# Clear CDN cache (if using CDN)
+```
+
+### Vercel Update
+
+Vercel automatically monitors GitHub repository changes and deploys automatically. Can also trigger manually:
+
+```bash
+vercel --prod
+```
+
+### Netlify Update
+
+```bash
+cd apps/admin  # or apps/user
+bun run build
+netlify deploy --prod
+```
+
+## Security Recommendations
+
+1. **Enable HTTPS**: Must use SSL/TLS certificates
+2. **Configure CSP**: Content Security Policy
+   ```nginx
+   add_header Content-Security-Policy "default-src 'self'; connect-src 'self' https://api.your-domain.com; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval';";
+   ```
+3. **Set Security Headers**: Already included in Nginx configuration
+4. **Disable Directory Browsing**: `Options -Indexes` (Apache) or `autoindex off;` (Nginx)
+5. **Limit File Upload Size**:
+   ```nginx
+   client_max_body_size 10M;
+   ```
+
+## Monitoring and Analytics
+
+### Add Web Analytics
+
+Supports Google Analytics, Umami, Plausible, etc.
+
+Configuration: Add tracking code in `index.html` or configure via environment variables.
+
+### Error Tracking
+
+Frontend supports integrating Sentry for error tracking (needs code configuration).
+
+## Development and Production
+
+### Local Development
+
+```bash
+# Use development server
+cd apps/admin  # or apps/user
+bun run dev
+
+# Admin Web runs on http://localhost:3001 by default
+# User Web runs on http://localhost:3000 by default
+```
+
+Development environment uses Vite's proxy feature to proxy API requests to backend.
+
+### Preview Production Build
+
+```bash
+# Preview after build
+bun run build
+bun run serve
+```
+
+## Next Steps
+
+- [Backend Separation Deployment](./backend.md) - If backend not yet deployed
+- [Node Agent Installation](../node/installation.md) - Deploy node service
+- [Feature Documentation](/admin/dashboard) - Learn feature usage
--- a/docs/index.md
+++ b/docs/index.md
@ -0,0 +1,90 @@
+---
+layout: home
+
+tk:
+  teekHome: false
+
+hero:
+  name: PPanel
+  text: Pure Professional Perfect
+  tagline: Operate any proxy fleet with a polished, open-source control plane.
+  actions:
+    - theme: brand
+      text: Install PPanel
+      link: /guide/installation/
+    - theme: alt
+      text: Project Overview
+      link: /guide/intro
+  image:
+    src: /logo.svg
+    alt: PPanel
+
+features:
+  - icon: 🎯
+    title: Complete Management
+    details: Provision servers, wire nodes, bundle subscriptions, and launch products from one console.
+  - icon: 💼
+    title: Business Operations
+    details: Automate coupons, campaigns, orders, and announcements with built-in workflows.
+  - icon: 👥
+    title: User Support System
+    details: Rich user directory, ticketing, and docs so teams can resolve requests quickly.
+  - icon: 📊
+    title: Data Analytics
+    details: Twelve log channels surface traffic, balance, and commission insights at a glance.
+  - icon: 🔧
+    title: Flexible Configuration
+    details: Payments, auth policies, ads, and system toggles stay configurable without rebuilds.
+  - icon: 🚀
+    title: Modern Tech Stack
+    details: React 19 + TypeScript + TailwindCSS + shadcn/ui deliver a fast, themeable interface.
+  - icon: 🛡️
+    title: Hardened Backend
+    details: Go 1.21+ service built on go-zero, Gin, Gorm, and Asynq keeps gateways stable and private.
+  - icon: 🐳
+    title: Turnkey Deployments
+    details: Official `ppanel/ppanel` Docker images bundle the gateway and backend for amd64/arm64.
+---
+
+## Full Stack Overview
+
+PPanel spans three repositories working together:
+
+- **[Frontend](https://github.com/perfect-panel/frontend)** — React 19 UI + VitePress docs for both admin and user portals.
+- **[PPanel Server](https://github.com/perfect-panel/server)** — Go 1.21+ APIs focusing on privacy, observability, and multi-protocol orchestration.
+- **[ppanel](https://github.com/perfect-panel/ppanel)** — Docker image that ships the compiled gateway plus backend binaries so you can launch everything with one container.
+
+### Frontend experience
+
+- Responsive dashboards, granular permissions, and live counters designed for daily operator workflows.
+- Shared component system (shadcn/ui + TailwindCSS) keeps admin and user spaces visually aligned.
+- Documentation and guides live side-by-side with the product so teams always deploy from the latest instructions.
+
+### Backend foundation
+
+- Multi-protocol relay for Shadowsocks, V2Ray, Trojan, and Trojan-Go backed by go-zero generated APIs.
+- Node lifecycle automation (heartbeat, registration, version checks, rolling updates) to keep edges healthy.
+- Business domains such as subscriptions, billing, payments, orders, and tickets mirror what you configure in the UI.
+- Privacy-first defaults — user activity logs stay off unless explicitly enabled; configs live in `etc/ppanel.yaml`.
+- Flexible delivery: Go binaries per platform, Makefile targets, and CI-published Docker images like `ppanel/ppanel-server:latest`.
+
+### Gateway & deployment
+
+The `ppanel/ppanel` image folds the gateway and backend into one container (amd64 + arm64). Mount `modules/<platform>/etc` from the repo and the UI immediately connects to the bundled services.
+
+::: tip Docker quickstart
+```bash
+docker pull ppanel/ppanel:latest
+docker run -d --name ppanel \
+  -p 8080:8080 \
+  -v $(pwd)/ppanel-config:/app/etc \
+  ppanel/ppanel:latest
+```
+:::
+
+#### Recommended workflow
+
+1. Copy `modules/<arch>/etc` to a persistent folder (`ppanel-config`) and update `ppanel.yaml` plus secrets.
+2. Start with `docker run` for quick trials, then move to the Compose snippet in the repo for auto-restarts.
+3. Upgrade by pulling the new tag, restarting the container, and letting the gateway refresh nodes in-place.
+4. Troubleshoot with `docker exec -it ppanel /bin/sh` and `docker logs -f ppanel` — everything lives under `/app`.
--- a/docs/package.json
+++ b/docs/package.json
@ -0,0 +1,10 @@
+{
+  "name": "docs",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "docs:dev": "vitepress dev",
+    "docs:build": "vitepress build",
+    "docs:preview": "vitepress preview"
+  }
+}
--- a/docs/public/logo.png
+++ b/docs/public/logo.png
--- a/docs/public/logo.svg
+++ b/docs/public/logo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" fill="none"><path stroke="url(#a)" stroke-linecap="round" stroke-width="25" d="M162.779 118.828v105.346"/><path fill="url(#b)" fill-rule="evenodd" d="M175.279 38.443v97.01l39.384-16.222c6.384-2.629 13.69.414 16.319 6.797 2.629 6.383-.414 13.689-6.797 16.319l-29.869 12.303 39.758 21.079c6.099 3.234 8.422 10.8 5.188 16.899-3.234 6.099-10.8 8.422-16.899 5.188l-58.083-30.794-24.537 10.107c-.308.127-.617.24-.928.341L32.554 221.278l-17.265 7.118V86.468l-.007-.017 142.683-59.543 17.314-7.226v18.761Zm-39.745 113.338-95.245 39.267v-87.943l109.99-45.9v74.098l-35.34-18.737c-6.1-3.234-13.666-.911-16.9 5.188-3.233 6.1-.91 13.666 5.189 16.899l32.306 17.128Z" clip-rule="evenodd"/><defs><linearGradient id="a" x1="163.279" x2="163.279" y1="118.828" y2="224.174" gradientUnits="userSpaceOnUse"><stop stop-color="#2E58FF"/><stop offset="1" stop-color="#26D0FF"/></linearGradient><linearGradient id="b" x1="128.003" x2="105.241" y1="19.688" y2="214.91" gradientUnits="userSpaceOnUse"><stop stop-color="#02F"/><stop offset=".48" stop-color="#5EE7FF"/><stop offset=".975" stop-color="#FCD8FF"/></linearGradient></defs></svg>
--- a/docs/public/scalar/index.html
+++ b/docs/public/scalar/index.html
@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Scalar API Reference</title>
+    <style>
+    html,
+    body {
+      min-height: 100%;
+      margin: 0;
+      padding: 0;
+      background: #0b0e13;
+      overflow-y: auto;
+      scrollbar-width: none;
+    }
+
+    html::-webkit-scrollbar,
+    body::-webkit-scrollbar,
+    #scalar-root::-webkit-scrollbar {
+      display: none;
+    }
+
+    #scalar-root {
+      min-height: 100%;
+    }
+
+    .scalar-app .scalar-api-reference.references-layout,
+    .scalar-app .references-layout {
+      min-height: auto !important;
+    }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"></script>
+  </head>
+  <body>
+    <div id="scalar-root"></div>
+    <script src="./scalar-embed.js"></script>
+  </body>
+</html>
--- a/docs/public/scalar/scalar-embed.js
+++ b/docs/public/scalar/scalar-embed.js
@ -0,0 +1,193 @@
+(() => {
+  const params = new URLSearchParams(window.location.search);
+  const spec = params.get("spec") || "/swagger.json";
+  const title = params.get("title") || "API Reference";
+  const theme = params.get("theme") || "saturn";
+  const layout = params.get("layout") || "classic";
+  const operationId = params.get("operationId");
+  const scalarRoot = document.getElementById("scalar-root");
+  const getHeightSourceElement = () =>
+    document.querySelector(".narrow-references-container") || scalarRoot;
+  let resizeObserver;
+  const observedElements = new WeakSet();
+
+  const sendHeightToParent = () => {
+    if (window.parent === window) return;
+    const heightSource = getHeightSourceElement();
+    const sourceHeight =
+      heightSource?.scrollHeight ?? heightSource?.offsetHeight ?? 0;
+    const fallbackHeight = Math.max(
+      document.body.scrollHeight,
+      document.documentElement.scrollHeight,
+      0
+    );
+    const height = heightSource ? sourceHeight : fallbackHeight;
+    window.parent.postMessage(
+      {
+        type: "scalar-height",
+        height,
+      },
+      window.location.origin
+    );
+  };
+
+  const mountScalar = (sourceConfiguration) => {
+    Scalar.createApiReference("#scalar-root", {
+      title,
+      theme,
+      layout,
+      showSidebar: false,
+      hideModels: true,
+      defaultOpenAllTags: true,
+      documentDownloadType: "json",
+      hideSearch: false,
+      withDefaultFonts: true,
+      showOperationId: Boolean(operationId),
+      ...sourceConfiguration,
+    });
+
+    requestAnimationFrame(sendHeightToParent);
+  };
+
+  const filterSpecByOperationId = (specContent, requestedId) => {
+    if (
+      !specContent ||
+      typeof specContent !== "object" ||
+      !specContent.paths ||
+      typeof specContent.paths !== "object"
+    ) {
+      return null;
+    }
+
+    const filteredPaths = {};
+    const matchedTags = new Set();
+    let hasMatch = false;
+
+    Object.entries(specContent.paths).forEach(([path, methods]) => {
+      if (!methods || typeof methods !== "object") {
+        return;
+      }
+
+      const retainedOperations = Object.entries(methods).reduce(
+        (acc, [method, operation]) => {
+          if (
+            operation &&
+            typeof operation === "object" &&
+            operation.operationId === requestedId
+          ) {
+            acc[method] = operation;
+            hasMatch = true;
+            if (Array.isArray(operation.tags)) {
+              operation.tags.forEach((tag) => matchedTags.add(tag));
+            }
+          }
+          return acc;
+        },
+        {}
+      );
+
+      if (Object.keys(retainedOperations).length > 0) {
+        filteredPaths[path] = retainedOperations;
+      }
+    });
+
+    if (!hasMatch) {
+      return null;
+    }
+
+    const filteredSpec = {
+      ...specContent,
+      paths: filteredPaths,
+    };
+
+    if (Array.isArray(specContent.tags) && matchedTags.size > 0) {
+      filteredSpec.tags = specContent.tags.filter((tag) =>
+        matchedTags.has(tag.name)
+      );
+    }
+
+    delete filteredSpec["x-scalar-navigation"];
+
+    return filteredSpec;
+  };
+
+  const fetchSpecContent = async () => {
+    const response = await fetch(spec);
+    if (!response.ok) {
+      throw new Error(
+        `Failed to load spec (${response.status} ${response.statusText})`
+      );
+    }
+
+    const text = await response.text();
+    try {
+      return JSON.parse(text);
+    } catch (error) {
+      console.warn(
+        "Scalar embed: Spec is not valid JSON, falling back to full document.",
+        error
+      );
+      return null;
+    }
+  };
+
+  const init = async () => {
+    if (operationId) {
+      try {
+        const specContent = await fetchSpecContent();
+        const filteredSpec = filterSpecByOperationId(specContent, operationId);
+        if (filteredSpec) {
+          mountScalar({ content: filteredSpec });
+          return;
+        }
+      } catch (error) {
+        console.warn(
+          "Scalar embed: Unable to filter by the requested operationId.",
+          error
+        );
+      }
+    }
+
+    mountScalar({ url: spec });
+  };
+
+  init();
+
+  const ensureResizeObservers = () => {
+    if (typeof ResizeObserver === "undefined" || !scalarRoot) return;
+    if (!resizeObserver) {
+      resizeObserver = new ResizeObserver(() => {
+        requestAnimationFrame(sendHeightToParent);
+      });
+    }
+    [scalarRoot, getHeightSourceElement()]
+      .filter((element) => element && !observedElements.has(element))
+      .forEach((element) => {
+        resizeObserver.observe(element);
+        observedElements.add(element);
+      });
+  };
+
+  const mutationObserver =
+    typeof MutationObserver !== "undefined" && scalarRoot
+      ? new MutationObserver(() => {
+          ensureResizeObservers();
+          requestAnimationFrame(sendHeightToParent);
+        })
+      : null;
+
+  mutationObserver?.observe(scalarRoot, { childList: true, subtree: true });
+  ensureResizeObservers();
+
+  if (typeof ResizeObserver === "undefined" || !scalarRoot) {
+    const intervalId = setInterval(() => {
+      if (document.readyState === "complete") {
+        sendHeightToParent();
+        clearInterval(intervalId);
+      }
+    }, 500);
+  }
+
+  window.addEventListener("load", sendHeightToParent);
+  window.addEventListener("resize", sendHeightToParent);
+})();
--- a/docs/sponsors.md
+++ b/docs/sponsors.md
@ -0,0 +1,88 @@
+---
+layout: page
+sidebar: false
+---
+
+<script setup lang="ts">
+import Sponsors from '../.vitepress/components/Sponsors.vue'
+</script>
+
+<div class="sponsors-header">
+  <div class="header-badge">💎 Sponsorship</div>
+  <h1>Thank You to Our Sponsors</h1>
+  <p>These generous sponsors support the ongoing development of this project, enabling us to provide better services to the community</p>
+</div>
+
+<Sponsors
+  loading-text="Loading..."
+  error-text="Failed to load sponsors data"
+  empty-text="No sponsors available"
+  visit-title="Visit sponsor"
+/>
+
+<style scoped>
+.sponsors-header {
+  text-align: center;
+  margin-bottom: 3.5rem;
+  padding-top: 3rem;
+}
+
+.header-badge {
+  display: inline-block;
+  padding: 0.5rem 1.25rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 2rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--vp-c-brand);
+  margin-bottom: 1.5rem;
+  transition: all 0.3s ease;
+}
+
+.header-badge:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.sponsors-header h1 {
+  font-size: 2.75rem;
+  font-weight: 800;
+  margin-bottom: 1rem;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+@keyframes gradient-shift {
+  0%, 100% { background-position: 0% center; }
+  50% { background-position: 100% center; }
+}
+
+.sponsors-header p {
+  font-size: 1.125rem;
+  color: var(--vp-c-text-2);
+  max-width: 640px;
+  margin: 0 auto;
+  line-height: 1.7;
+}
+
+@media (max-width: 768px) {
+  .sponsors-header {
+    margin-bottom: 2.5rem;
+    padding-top: 2rem;
+  }
+
+  .header-badge {
+    font-size: 0.8rem;
+    padding: 0.4rem 1rem;
+  }
+
+  .sponsors-header h1 {
+    font-size: 2rem;
+  }
+
+  .sponsors-header p {
+    font-size: 1rem;
+  }
+}
+</style>
--- a/docs/zh/admin/commerce/announcements.md
+++ b/docs/zh/admin/commerce/announcements.md
@ -0,0 +1,380 @@
+# 公告管理
+
+公告管理模块用于发布和管理系统公告,向用户传达重要信息。
+
+## 功能概述
+
+### 公告列表
+
+查看和管理所有公告:
+
+- **公告标题**: 公告主题
+- **公告类型**: 系统/维护/活动/更新
+- **发布状态**: 草稿/已发布/已下线
+- **发布时间**: 公告发布时间
+- **显示位置**: 首页/用户中心/管理后台
+- **优先级**: 高/中/低
+- **阅读量**: 公告查看次数
+
+### 创建公告
+
+发布新的公告:
+
+#### 基本信息
+
+- **公告标题**: 简明扼要的标题
+- **公告类型**: 选择公告类型
+- **公告内容**: 详细公告内容(支持富文本)
+- **公告摘要**: 简短摘要(列表显示)
+
+#### 显示设置
+
+- **显示位置**: 选择显示位置
+  - 首页Banner
+  - 首页公告栏
+  - 用户中心
+  - 管理后台
+  - 弹窗提醒
+
+- **显示样式**: 配置显示样式
+  - Banner样式
+  - 列表样式
+  - 弹窗样式
+  - 浮动提醒
+
+#### 发布设置
+
+- **发布时间**:
+  - 立即发布
+  - 定时发布
+  - 指定发布时间
+
+- **下线时间**:
+  - 永久显示
+  - 指定下线时间
+  - 手动下线
+
+- **优先级**: 设置显示优先级
+
+#### 目标用户
+
+- **所有用户**: 向全部用户展示
+- **新用户**: 仅向新注册用户
+- **老用户**: 仅向老用户
+- **特定用户组**: 指定用户组
+- **VIP用户**: 仅向VIP用户
+
+### 编辑公告
+
+修改已发布的公告:
+
+- 更新公告内容
+- 调整显示设置
+- 修改发布时间
+- 变更目标用户
+
+::: tip 提示
+修改已发布的公告会影响正在展示的内容,请谨慎操作。
+:::
+
+### 删除公告
+
+删除公告:
+
+- **下线**: 停止展示但保留数据
+- **删除**: 彻底删除公告
+- 阅读记录会保留用于统计
+
+## 公告类型
+
+### 系统公告
+
+系统重要通知:
+
+**使用场景**:
+- 系统升级通知
+- 服务条款变更
+- 政策调整说明
+- 重要功能上线
+
+**示例**:
+- 系统将于XX时间进行升级维护
+- 服务协议更新通知
+- 新功能上线公告
+
+### 维护公告
+
+系统维护通知:
+
+**使用场景**:
+- 计划维护通知
+- 故障说明
+- 服务恢复通知
+
+**示例**:
+- 定期维护公告
+- 紧急故障通知
+- 服务已恢复正常
+
+### 活动公告
+
+营销活动通知:
+
+**使用场景**:
+- 促销活动预告
+- 优惠信息发布
+- 活动规则说明
+
+**示例**:
+- 双十一大促预告
+- 限时优惠活动
+- 新用户专享活动
+
+### 更新公告
+
+产品更新说明:
+
+**使用场景**:
+- 功能更新说明
+- 产品优化通知
+- Bug修复说明
+
+**示例**:
+- v2.0版本更新说明
+- 新增XX功能
+- 性能优化公告
+
+## 公告展示
+
+### Banner公告
+
+首页轮播Banner:
+
+- 大图展示,视觉冲击力强
+- 支持多张轮播
+- 点击跳转详情页
+- 适合重要活动推广
+
+### 列表公告
+
+公告列表展示:
+
+- 标题列表形式
+- 支持分类筛选
+- 点击查看详情
+- 适合常规公告
+
+### 弹窗公告
+
+弹窗提醒:
+
+- 登录时弹出
+- 强制阅读
+- 确认后关闭
+- 适合重要通知
+
+### 浮动公告
+
+浮动提醒栏:
+
+- 页面顶部浮动
+- 可手动关闭
+- 不影响操作
+- 适合温馨提示
+
+## 公告推送
+
+### 站内推送
+
+系统内推送公告:
+
+- **首页展示**: 在首页显著位置展示
+- **消息中心**: 推送到用户消息中心
+- **弹窗提醒**: 登录时弹窗提醒
+- **邮件推送**: 发送公告邮件
+
+### 定向推送
+
+针对特定用户推送:
+
+- 根据用户分组推送
+- 根据用户标签推送
+- 根据用户行为推送
+- 个性化公告内容
+
+### 推送时机
+
+选择合适的推送时机:
+
+- **即时推送**: 紧急公告立即推送
+- **定时推送**: 选择最佳时间推送
+- **事件触发**: 特定事件触发推送
+- **周期推送**: 定期推送公告
+
+## 公告统计
+
+### 阅读统计
+
+统计公告阅读情况:
+
+- **阅读量**: 公告查看次数
+- **阅读率**: 阅读用户占比
+- **阅读用户**: 查看公告的用户列表
+- **阅读时段**: 用户查看时间分布
+
+### 点击统计
+
+统计公告点击:
+
+- **点击量**: 公告点击次数
+- **点击率**: 点击/展示比例
+- **跳转链接**: 外部链接点击统计
+- **转化数据**: 公告带来的转化
+
+### 效果分析
+
+分析公告效果:
+
+- **到达率**: 公告推送到达率
+- **互动率**: 用户互动情况
+- **转化效果**: 公告带来的转化
+- **用户反馈**: 用户反馈意见
+
+## 公告模板
+
+### 常用模板
+
+预设公告模板:
+
+- **系统维护模板**: 维护通知标准格式
+- **活动推广模板**: 活动公告格式
+- **功能更新模板**: 更新说明格式
+- **紧急通知模板**: 紧急公告格式
+
+### 自定义模板
+
+创建自定义模板:
+
+- 设计公告样式
+- 定义内容结构
+- 保存为模板
+- 重复使用
+
+## 公告审核
+
+### 审核流程
+
+公告发布审核:
+
+1. **创建草稿**: 编辑公告内容
+2. **提交审核**: 提交给审核人员
+3. **审核**: 审核人员审核内容
+4. **发布**: 审核通过后发布
+5. **监控**: 发布后效果监控
+
+### 审核权限
+
+设置审核权限:
+
+- **创建权限**: 谁可以创建公告
+- **审核权限**: 谁可以审核公告
+- **发布权限**: 谁可以发布公告
+- **删除权限**: 谁可以删除公告
+
+## 公告管理最佳实践
+
+### 内容编写
+
+- 标题简洁明了,突出重点
+- 内容准确完整,避免歧义
+- 语言通俗易懂,用户友好
+- 重要信息加粗突出
+- 提供联系方式
+
+### 发布时机
+
+- 选择用户活跃时段发布
+- 避免节假日发布重要公告
+- 紧急公告及时发布
+- 常规公告定时发布
+
+### 频率控制
+
+- 避免过度打扰用户
+- 合理控制公告数量
+- 重要公告优先展示
+- 定期清理过期公告
+
+### 效果追踪
+
+- 监控公告阅读数据
+- 收集用户反馈
+- 分析公告效果
+- 持续优化改进
+
+## 公告场景示例
+
+### 系统维护通知
+
+**标题**: 系统维护通知
+
+**内容**:
+- 维护时间: 2024-01-01 02:00-06:00
+- 维护内容: 系统升级和性能优化
+- 影响范围: 所有服务暂时不可用
+- 补偿方案: 赠送1天会员时长
+
+### 活动预告
+
+**标题**: 双十一狂欢节来袭
+
+**内容**:
+- 活动时间: 11月11日 00:00-23:59
+- 活动内容: 全场5折起
+- 优惠券: 满100减20优惠券
+- 参与方式: 点击查看详情
+
+### 功能上线
+
+**标题**: 新功能上线通知
+
+**内容**:
+- 功能名称: 流量统计功能
+- 功能说明: 实时查看流量使用情况
+- 使用方法: 进入用户中心-流量统计
+- 意见反馈: 欢迎提出建议
+
+## 常见问题
+
+### 公告不显示
+
+检查:
+
+1. 公告是否已发布
+2. 发布时间是否正确
+3. 目标用户设置是否正确
+4. 显示位置设置是否正确
+
+### 公告显示异常
+
+可能原因:
+
+1. 内容格式问题
+2. 图片链接失效
+3. 样式冲突
+4. 浏览器兼容性
+
+### 推送失败
+
+检查:
+
+1. 推送配置是否正确
+2. 用户联系方式是否有效
+3. 推送服务是否正常
+4. 是否达到推送限制
+
+## 下一步
+
+- [营销管理](/zh/admin/commerce/marketing) - 策划营销活动
+- [用户管理](/zh/admin/users-support/users) - 管理目标用户
+- [系统配置](/zh/admin/system/config) - 配置公告系统
--- a/docs/zh/admin/commerce/coupon.md
+++ b/docs/zh/admin/commerce/coupon.md
@ -0,0 +1,176 @@
+<div v-pre>
+
+# 优惠券管理
+
+管理系统中的优惠券,包括创建、编辑、启用/禁用等功能。优惠券用于为用户提供购买折扣。
+
+## 表格列说明
+
+### 启用 (Enable)
+开关按钮,控制优惠券是否可用。关闭后用户无法使用此优惠券。
+
+### 名称 (Name)
+优惠券的名称,用于管理标识。
+
+### 代码 (Code)
+优惠券兑换码,用户购买时输入此代码使用优惠券。
+
+### 类型 (Type)
+优惠券折扣类型:
+- **百分比** - 按百分比折扣(如 10%)
+- **金额** - 固定金额折扣(如 ¥50)
+
+### 折扣 (Discount)
+折扣值:
+- 百分比类型显示百分比(如 10%)
+- 金额类型显示货币金额(如 ¥50)
+
+### 数量 (Count)
+显示三行信息:
+- **数量** - 优惠券总可用次数(0 = 无限)
+- **剩余次数** - 还可使用次数
+- **已使用次数** - 已被使用次数
+
+### 有效期 (Validity Period)
+优惠券的有效时间范围:
+- 显示开始时间和结束时间
+- 只有开始时间则显示单个时间
+- 无限制显示 "--"
+
+## 表格操作
+
+### 编辑
+打开侧边抽屉表单修改优惠券信息。
+
+### 删除
+删除优惠券(需确认),已使用的优惠券也可删除。
+
+### 批量删除
+选中多个优惠券后批量删除。
+
+## 优惠券表单
+
+### 名称 (必填)
+优惠券的管理名称,不对用户显示。
+
+### 自定义优惠券代码 (可选)
+自定义兑换码,留空则系统自动生成。
+
+### 优惠券类型 (必填)
+单选按钮选择类型:
+- **百分比折扣** - 按订单金额百分比折扣
+- **金额折扣** - 固定金额减免
+
+### 折扣值 (必填)
+根据类型输入:
+- **百分比**: 输入 1-100 的数字,带 % 后缀
+- **金额**: 输入货币金额
+
+### 指定订阅 (可选)
+多选下拉框选择适用的产品套餐:
+- 留空表示适用所有产品
+- 选择特定产品则只对这些产品有效
+
+### 开始时间 (可选)
+优惠券生效时间:
+- 使用日期选择器
+- 不能选择过去的日期(昨天之前)
+- 留空表示立即生效
+
+### 结束时间 (可选)
+优惠券失效时间:
+- 使用日期选择器
+- 留空表示永不过期
+
+### 最大使用次数 (可选)
+优惠券总共可使用次数:
+- 0 或留空表示无限制
+- 达到次数后自动失效
+
+### 每用户最大使用次数 (可选)
+单个用户可使用此优惠券的次数:
+- 0 或留空表示无限制
+- 防止单个用户重复使用
+
+## 筛选功能
+
+### 订阅筛选
+选择产品套餐,查看该产品的专属优惠券。
+
+### 关键词搜索
+输入名称或代码搜索优惠券。
+
+## 使用场景
+
+### 场景一: 创建新用户注册优惠券
+
+**表单配置**:
+- 名称: 新用户优惠
+- 代码: NEWUSER2024 (自定义)
+- 类型: 百分比折扣
+- 折扣: 20%
+- 指定订阅: 留空(所有产品)
+- 开始时间: 2024-01-01
+- 结束时间: 2024-12-31
+- 最大使用次数: 0 (无限)
+- 每用户最大使用次数: 1
+
+**效果**: 每个新用户可使用一次,全年有效,所有产品享受 8 折。
+
+### 场景二: 创建限时促销优惠券
+
+**表单配置**:
+- 名称: 双11促销
+- 代码: 留空(自动生成)
+- 类型: 金额折扣
+- 折扣: ¥50
+- 指定订阅: 选择"年付套餐"
+- 开始时间: 2024-11-11 00:00
+- 结束时间: 2024-11-11 23:59
+- 最大使用次数: 100
+- 每用户最大使用次数: 1
+
+**效果**: 双11当天前100位用户购买年付套餐减50元,每人限用一次。
+
+### 场景三: 创建专属VIP优惠券
+
+**表单配置**:
+- 名称: VIP专享
+- 代码: VIP888 (自定义)
+- 类型: 百分比折扣
+- 折扣: 30%
+- 指定订阅: 选择"高级套餐"
+- 开始时间: 留空
+- 结束时间: 留空
+- 最大使用次数: 0 (无限)
+- 每用户最大使用次数: 0 (无限)
+
+**效果**: VIP用户可无限次使用,购买高级套餐享受 7 折。
+
+### 场景四: 创建一次性优惠码
+
+**表单配置**:
+- 名称: 感谢回馈
+- 代码: THANKS100 (自定义)
+- 类型: 金额折扣
+- 折扣: ¥100
+- 指定订阅: 留空(所有产品)
+- 开始时间: 留空
+- 结束时间: 留空
+- 最大使用次数: 1
+- 每用户最大使用次数: 1
+
+**效果**: 单次有效的感谢券,先到先得。
+
+## 重要提示
+
+1. **启用控制**: 新优惠券默认禁用,需手动启用后用户才能使用
+2. **代码唯一**: 自定义代码必须唯一,重复会创建失败
+3. **自动生成**: 留空代码系统会自动生成随机代码
+4. **产品限制**: 指定订阅后只对选定产品有效
+5. **时间范围**: 开始时间不能是过去,结束时间可留空
+6. **使用次数**: 0 或留空表示无限制
+7. **用户限制**: 每用户限制可防止滥用
+8. **删除影响**: 删除优惠券不影响已使用的订单
+
+</div>
--- a/docs/zh/admin/commerce/coupons.md
+++ b/docs/zh/admin/commerce/coupons.md
@ -0,0 +1,354 @@
+# 优惠券管理
+
+优惠券管理模块用于创建和管理各类优惠券,是促销活动的重要工具。
+
+## 功能概述
+
+### 优惠券列表
+
+查看和管理所有优惠券:
+
+- **优惠券名称**: 优惠券显示名称
+- **优惠券类型**: 满减/折扣/兑换券
+- **优惠金额**: 减免金额或折扣比例
+- **使用条件**: 满多少可用
+- **发放数量**: 总发放量和剩余量
+- **有效期**: 优惠券有效时间范围
+- **适用范围**: 适用的产品或用户
+- **状态**: 进行中/已结束/已暂停
+
+### 创建优惠券
+
+创建新的优惠券:
+
+#### 基本信息
+
+- **优惠券名称**: 便于识别的名称
+- **优惠券描述**: 详细说明优惠内容
+- **优惠券代码**: 兑换码(可自动生成)
+- **优惠券类型**: 选择优惠类型
+
+#### 优惠设置
+
+**满减券**
+- 满X元减Y元
+- 可设置多档满减
+
+**折扣券**
+- 折扣比例(如8折)
+- 最高优惠上限
+
+**兑换券**
+- 直接抵扣固定金额
+- 或兑换指定商品
+
+#### 使用条件
+
+- **最低消费**: 订单满多少可用
+- **适用产品**: 指定可用产品
+- **适用用户**: 新用户/老用户/全部
+- **使用次数**: 每人限用次数
+- **叠加规则**: 是否可与其他优惠叠加
+
+#### 发放设置
+
+- **发放方式**:
+  - 公开领取: 所有人可领
+  - 定向发放: 指定用户
+  - 兑换码: 输入码领取
+  - 自动发放: 满足条件自动获得
+
+- **发放数量**: 限制发放总量
+- **领取限制**: 每人限领数量
+
+#### 有效期设置
+
+- **固定时间**: 指定起止日期
+- **领取后N天**: 领取后N天内有效
+- **永久有效**: 无时间限制
+
+### 编辑优惠券
+
+修改优惠券配置:
+
+- 调整优惠金额和条件
+- 增加发放数量
+- 延长有效期
+- 修改适用范围
+
+::: tip 提示
+已被用户领取的优惠券,修改配置不影响已领取的券。
+:::
+
+### 删除优惠券
+
+删除优惠券:
+
+- **软删除**: 下架但保留数据
+- **硬删除**: 彻底删除
+- 已被使用的优惠券记录会保留
+
+## 优惠券类型
+
+### 满减券
+
+满足金额条件后减免:
+
+**使用场景**:
+- 促进大额订单
+- 提高客单价
+- 清仓促销
+
+**配置示例**:
+- 满100减10
+- 满200减30
+- 满500减100
+
+### 折扣券
+
+按比例折扣:
+
+**使用场景**:
+- 节假日促销
+- 会员专享
+- 新品推广
+
+**配置示例**:
+- 9折券
+- 8折券(最高优惠50元)
+- 7折券(仅限新用户)
+
+### 兑换券
+
+直接抵扣金额:
+
+**使用场景**:
+- 用户补偿
+- 推广奖励
+- 积分兑换
+
+**配置示例**:
+- 10元无门槛券
+- 50元体验券
+- 100元代金券
+
+### 商品券
+
+兑换指定商品:
+
+**使用场景**:
+- 赠品发放
+- 活动奖励
+- 积分商城
+
+**配置示例**:
+- 1个月套餐兑换券
+- 100GB流量包兑换券
+
+## 优惠券发放
+
+### 批量发放
+
+向多个用户发放优惠券:
+
+1. 选择要发放的优惠券
+2. 选择目标用户群
+3. 设置发放数量
+4. 确认发放
+
+**发放对象**:
+- 全部用户
+- 指定用户组
+- 新注册用户
+- 高价值用户
+- 即将流失用户
+
+### 兑换码生成
+
+生成优惠券兑换码:
+
+- **批量生成**: 一次生成多个兑换码
+- **自定义前缀**: 设置兑换码前缀
+- **导出兑换码**: 导出Excel文件
+- **兑换码管理**: 查看使用状态
+
+### 自动发放
+
+配置自动发放规则:
+
+**触发条件**:
+- 用户注册时发放
+- 首次购买后发放
+- 订阅到期前发放
+- 达到消费额度发放
+- 生日当天发放
+
+**发放内容**:
+- 指定优惠券
+- 随机优惠券
+- 不同档位优惠券
+
+## 优惠券使用
+
+### 使用流程
+
+用户使用优惠券的流程:
+
+1. **领取优惠券**: 用户领取或获得优惠券
+2. **查看优惠券**: 在账户中查看可用券
+3. **下单使用**: 下单时选择优惠券
+4. **系统验证**: 验证使用条件
+5. **计算优惠**: 自动计算优惠金额
+6. **完成支付**: 按优惠后价格支付
+
+### 使用限制
+
+控制优惠券使用:
+
+- **单次限制**: 一个订单限用几张
+- **时间限制**: 特定时间段可用
+- **产品限制**: 指定产品可用
+- **用户限制**: 特定用户组可用
+- **设备限制**: 限制使用设备
+
+### 使用规则
+
+优惠券使用的规则设置:
+
+- **优先级**: 多张券的使用顺序
+- **叠加规则**: 是否可与其他优惠叠加
+- **部分退款**: 退款时优惠券处理
+- **过期提醒**: 到期前提醒用户
+
+## 优惠券统计
+
+### 发放统计
+
+统计优惠券发放情况:
+
+- **发放总量**: 已发放的优惠券数量
+- **领取情况**: 领取率和领取用户
+- **库存剩余**: 剩余可发放数量
+- **发放趋势**: 每日发放数量变化
+
+### 使用统计
+
+分析优惠券使用情况:
+
+- **使用率**: 已使用/已发放比例
+- **使用金额**: 优惠券减免总金额
+- **使用订单**: 使用优惠券的订单数
+- **使用用户**: 使用优惠券的用户数
+
+### 效果分析
+
+评估优惠券促销效果:
+
+- **转化率**: 领取后的购买转化
+- **客单价**: 使用券的平均订单金额
+- **ROI分析**: 投入产出比
+- **用户分布**: 使用优惠券的用户画像
+
+## 优惠券推广
+
+### 推广渠道
+
+通过多种渠道推广优惠券:
+
+- **站内推广**: 首页banner、弹窗
+- **邮件推送**: 发送优惠券邮件
+- **短信通知**: 短信告知优惠活动
+- **社交媒体**: 分享到社交平台
+- **推广链接**: 生成专属推广链接
+
+### 推广活动
+
+策划优惠券推广活动:
+
+- **限时抢券**: 限量优惠券抢购
+- **分享领券**: 分享后获得优惠券
+- **签到送券**: 每日签到赠券
+- **推荐有礼**: 推荐好友得券
+- **消费返券**: 购买后返还优惠券
+
+## 优惠券模板
+
+### 常用模板
+
+预设常用优惠券模板:
+
+- 新用户专享券
+- 会员生日券
+- 节日促销券
+- 满减优惠券
+- 复购优惠券
+
+### 自定义模板
+
+创建自定义优惠券模板:
+
+- 保存常用配置
+- 快速创建同类券
+- 模板复制和编辑
+
+## 风控管理
+
+### 防作弊
+
+防止优惠券被恶意使用:
+
+- **领取限制**: IP限制、设备限制
+- **实名验证**: 要求实名认证
+- **使用监控**: 监控异常使用行为
+- **黑名单**: 拉黑作弊用户
+
+### 风险预警
+
+优惠券风险提醒:
+
+- 异常领取预警
+- 库存不足提醒
+- 预算超支警告
+- 作弊行为告警
+
+## 最佳实践
+
+- 合理设置使用门槛,避免亏损
+- 控制发放总量和预算
+- 定期分析优惠券效果
+- 针对不同用户群发放不同优惠券
+- 配合营销活动使用优惠券
+- 及时清理过期和无效券
+
+## 常见问题
+
+### 优惠券无法使用
+
+检查以下几点:
+
+1. 是否满足使用条件
+2. 优惠券是否已过期
+3. 产品是否在适用范围内
+4. 是否达到最低消费额
+
+### 优惠计算不正确
+
+可能原因:
+
+1. 优惠券配置错误
+2. 多张券叠加规则问题
+3. 满减档位设置问题
+
+### 发放失败
+
+检查:
+
+1. 库存是否充足
+2. 用户是否符合领取条件
+3. 系统配置是否正确
+
+## 下一步
+
+- [营销管理](/zh/admin/commerce/marketing) - 创建营销活动
+- [订单管理](/zh/admin/commerce/orders) - 查看优惠券使用订单
+- [用户管理](/zh/admin/users-support/users) - 向用户发放优惠券
--- a/docs/zh/admin/commerce/marketing.md
+++ b/docs/zh/admin/commerce/marketing.md
@ -0,0 +1,354 @@
+# 营销管理
+
+营销管理模块用于策划和执行各类营销活动,帮助提升用户增长和收入。
+
+## 功能概述
+
+### 营销活动列表
+
+查看和管理所有营销活动:
+
+- **活动名称**: 营销活动标题
+- **活动类型**: 促销/拉新/留存/转化
+- **活动状态**: 未开始/进行中/已结束
+- **活动时间**: 开始和结束时间
+- **参与人数**: 活动参与用户数
+- **转化效果**: 转化率和收入
+- **活动预算**: 预算和实际花费
+
+### 创建营销活动
+
+策划新的营销活动:
+
+#### 活动信息
+
+- **活动名称**: 活动主题名称
+- **活动类型**: 选择活动类型
+- **活动描述**: 详细活动说明
+- **活动标签**: 便于分类管理
+
+#### 活动时间
+
+- **开始时间**: 活动开始日期时间
+- **结束时间**: 活动结束日期时间
+- **预热期**: 活动预告时间
+- **冷静期**: 活动结束后的处理期
+
+#### 活动规则
+
+- **参与条件**: 用户参与资格
+- **活动奖励**: 奖励内容和规则
+- **限制条件**: 参与次数、人数限制
+- **计算规则**: 积分、排名计算方式
+
+#### 营销素材
+
+- **活动图片**: 宣传海报、Banner
+- **活动文案**: 宣传文案内容
+- **分享素材**: 社交媒体分享图文
+- **落地页**: 活动专题页面链接
+
+## 营销活动类型
+
+### 拉新活动
+
+吸引新用户注册:
+
+**活动形式**:
+- 新用户注册送优惠券
+- 首次购买特惠
+- 邀请好友注册奖励
+- 新用户专享套餐
+
+**效果指标**:
+- 新用户注册数
+- 新用户转化率
+- 获客成本(CAC)
+- 新用户质量
+
+### 促销活动
+
+刺激用户购买:
+
+**活动形式**:
+- 限时折扣
+- 满减优惠
+- 买一送一
+- 套餐组合优惠
+
+**效果指标**:
+- 销售额增长
+- 订单数量
+- 客单价变化
+- ROI
+
+### 留存活动
+
+提高用户留存:
+
+**活动形式**:
+- 每日签到奖励
+- 连续登录奖励
+- 会员日特惠
+- 续费优惠
+
+**效果指标**:
+- 用户活跃度
+- 留存率提升
+- 流失率下降
+- 生命周期价值
+
+### 转化活动
+
+促进用户付费:
+
+**活动形式**:
+- 试用转付费优惠
+- 升级套餐折扣
+- 首单立减
+- 限时抢购
+
+**效果指标**:
+- 付费转化率
+- 升级转化率
+- 平均付费金额
+- 付费用户增长
+
+## 推广渠道
+
+### 站内推广
+
+在系统内推广活动:
+
+- **首页Banner**: 首页轮播图展示
+- **弹窗通知**: 登录时弹窗提醒
+- **消息推送**: 站内信通知
+- **活动专区**: 活动汇总页面
+
+### 邮件推广
+
+通过邮件推广:
+
+- **营销邮件**: 发送活动邮件
+- **邮件模板**: 设计精美邮件模板
+- **分组发送**: 针对不同用户群
+- **效果追踪**: 邮件打开率、点击率
+
+### 短信推广
+
+通过短信推广:
+
+- **短信通知**: 发送活动短信
+- **短信模板**: 预设短信内容
+- **定时发送**: 设置发送时间
+- **效果统计**: 短信送达率
+
+### 社交媒体
+
+在社交平台推广:
+
+- **社交分享**: 用户分享到社交平台
+- **社群运营**: 微信群、QQ群推广
+- **KOL合作**: 与意见领袖合作
+- **内容营销**: 发布营销内容
+
+## 用户分群
+
+### 用户画像
+
+根据用户特征分群:
+
+- **基础属性**: 年龄、地区、性别
+- **行为特征**: 活跃度、使用频率
+- **消费特征**: 消费金额、购买频次
+- **生命周期**: 新用户、活跃、沉睡、流失
+
+### 精准营销
+
+针对不同用户群推送:
+
+- **新用户**: 欢迎活动、新手引导
+- **活跃用户**: 付费转化、升级优惠
+- **高价值用户**: VIP特权、专属优惠
+- **沉睡用户**: 唤醒活动、回归奖励
+- **流失预警**: 挽留优惠、专属服务
+
+## 活动执行
+
+### 活动上线
+
+活动正式开始:
+
+1. **最终确认**: 检查活动配置
+2. **资源准备**: 准备优惠券、奖品
+3. **渠道通知**: 各渠道开始推广
+4. **实时监控**: 监控活动数据
+
+### 活动监控
+
+实时监控活动进展:
+
+- **参与数据**: 实时参与人数
+- **转化数据**: 转化率、订单量
+- **预算消耗**: 已使用预算
+- **异常预警**: 异常情况告警
+
+### 活动调整
+
+根据数据优化活动:
+
+- **规则调整**: 优化活动规则
+- **预算调整**: 增加或减少预算
+- **渠道优化**: 调整推广渠道
+- **素材更新**: 更换营销素材
+
+### 活动结束
+
+活动收尾工作:
+
+- **停止推广**: 关闭推广渠道
+- **数据结算**: 统计活动数据
+- **奖励发放**: 发放活动奖励
+- **效果评估**: 评估活动效果
+
+## 活动数据分析
+
+### 参与数据
+
+分析活动参与情况:
+
+- **参与人数**: 总参与用户数
+- **参与率**: 目标用户参与比例
+- **参与渠道**: 各渠道参与占比
+- **参与时段**: 参与时间分布
+
+### 转化数据
+
+分析转化效果:
+
+- **转化率**: 参与到购买的转化
+- **订单数**: 活动产生的订单
+- **销售额**: 活动带来的收入
+- **客单价**: 平均订单金额
+
+### ROI分析
+
+计算投资回报率:
+
+- **总投入**: 活动总成本
+- **总产出**: 活动总收入
+- **ROI**: 投资回报率
+- **盈亏平衡**: 达到盈亏平衡的时间
+
+### 用户分析
+
+分析参与用户:
+
+- **用户构成**: 新老用户占比
+- **用户质量**: 后续留存和复购
+- **用户价值**: 生命周期价值
+- **用户反馈**: 用户满意度
+
+## A/B测试
+
+### 测试设计
+
+设计A/B测试方案:
+
+- **测试目标**: 明确测试目的
+- **测试变量**: 确定测试变量
+- **对照组**: 设置对照组
+- **实验组**: 设置实验组
+
+### 测试执行
+
+执行A/B测试:
+
+- **随机分组**: 随机分配用户
+- **同步开始**: 同时开始测试
+- **数据收集**: 收集测试数据
+- **结果分析**: 分析测试结果
+
+### 结果应用
+
+应用测试结果:
+
+- **选择方案**: 选择最优方案
+- **全量推广**: 向所有用户推广
+- **持续优化**: 继续迭代优化
+
+## 营销自动化
+
+### 自动化流程
+
+设置自动化营销流程:
+
+**触发条件**:
+- 用户注册
+- 首次登录
+- 订阅到期
+- 长期未登录
+- 购买完成
+
+**自动操作**:
+- 发送欢迎邮件
+- 推送优惠券
+- 发送提醒通知
+- 推荐相关产品
+
+### 生命周期营销
+
+基于用户生命周期自动营销:
+
+- **获客期**: 注册引导、首购优惠
+- **成长期**: 使用指导、升级推荐
+- **成熟期**: VIP服务、续费优惠
+- **衰退期**: 唤醒活动、挽留优惠
+- **流失期**: 回归奖励、重新激活
+
+## 最佳实践
+
+- 明确营销目标和KPI指标
+- 了解目标用户需求和痛点
+- 设计吸引人的活动规则
+- 选择合适的推广渠道
+- 实时监控和快速调整
+- 做好数据分析和总结
+- 建立营销活动SOP
+
+## 活动案例
+
+### 双十一大促
+
+**活动目标**: 提升销售额
+
+**活动内容**:
+- 全场5折起
+- 满减优惠券
+- 限时秒杀
+- 分享抽奖
+
+**效果**:
+- 销售额增长300%
+- 新用户增长200%
+- ROI达到3.5
+
+### 邀请有礼
+
+**活动目标**: 拉新获客
+
+**活动内容**:
+- 邀请好友注册得优惠券
+- 好友首购双方都有奖
+- 邀请排行榜奖励
+
+**效果**:
+- 新增用户5000+
+- 获客成本降低40%
+- 病毒系数1.8
+
+## 下一步
+
+- [优惠券管理](/zh/admin/commerce/coupons) - 配置营销优惠券
+- [公告管理](/zh/admin/commerce/announcements) - 发布活动公告
+- [用户管理](/zh/admin/users-support/users) - 分析用户数据
--- a/docs/zh/admin/commerce/order.md
+++ b/docs/zh/admin/commerce/order.md
@ -0,0 +1,148 @@
+<div v-pre>
+
+# 订单管理
+
+查看系统中所有用户订单,支持订单状态修改和详细信息查看。这是一个只读为主的订单查询页面,主要用于订单信息查看和异常处理。
+
+## 页面功能
+
+订单管理页面是一个简单的订单查询和状态管理工具,提供以下功能:
+
+1. **订单列表查看** - 表格展示所有订单
+2. **状态修改** - 修改特定状态的订单
+3. **金额详情** - 悬浮卡片查看价格明细
+4. **筛选搜索** - 快速定位目标订单
+
+## 表格列说明
+
+### 订单号
+系统生成的唯一订单编号,用于订单追踪和查询。
+
+### 类型
+订单的业务类型:
+- **新购** - 用户首次购买套餐
+- **续费** - 为现有订阅延长时间
+- **重置流量** - 单独购买流量重置
+- **充值** - 充值账户余额
+
+### 订阅
+显示关联的产品信息:
+- 新购/续费/重置流量订单: 显示 `产品名 × 数量`
+- 充值订单: 显示 "充值"
+
+### 金额
+订单总金额,点击可查看详细价格构成。
+
+### 用户
+下单用户信息,点击可查看用户详情。
+
+### 更新时间
+订单最后状态变更时间。
+
+### 状态
+订单当前状态,部分状态支持修改:
+- **待支付** (橙色) - 可修改
+- **已支付** (绿色) - 只读
+- **已取消** (灰色) - 可修改
+- **已关闭** (红色) - 可修改
+- **已完成** (绿色) - 只读
+
+## 核心功能
+
+### 1. 订单状态修改
+
+**可修改状态**: 待支付、已取消、已关闭
+
+操作步骤:
+1. 找到需要修改的订单
+2. 点击状态列的下拉选择器
+3. 选择新的状态
+4. 系统自动保存并刷新
+
+**不可修改状态**: 已支付、已完成
+
+这两种状态显示为只读标签,无法修改。
+
+**常见操作**:
+- 待支付 → 已支付: 手动标记支付完成
+- 待支付 → 已取消: 取消超时订单
+- 待支付 → 已关闭: 关闭异常订单
+- 已取消 → 待支付: 恢复误操作订单
+
+### 2. 查看金额详情
+
+鼠标悬停在金额上,显示完整价格明细:
+
+**价格构成**:
+- 订阅价格 - 产品原价
+- 折扣金额 - 批量购买折扣
+- 优惠券折扣 - 使用的优惠券
+- 手续费 - 支付平台费用
+- 总计 - 实际支付金额
+
+**其他信息**:
+- 交易号 - 第三方支付交易编号
+- 支付方式 - 使用的支付平台
+
+### 3. 筛选和搜索
+
+**状态筛选**: 选择订单状态查看对应订单
+
+**产品筛选**: 选择产品套餐查看相关订单
+
+**用户筛选**: 输入用户 ID 查看该用户所有订单
+
+**关键词搜索**: 输入订单号精确查找
+
+可同时使用多个筛选条件。
+
+## 使用场景
+
+### 场景一: 手动标记支付完成
+
+用户支付成功但订单状态未自动更新:
+
+1. 使用订单号搜索找到订单
+2. 点击金额查看交易号
+3. 确认第三方支付平台已收款
+4. 点击状态下拉选择 "已支付"
+5. 系统自动处理并分配权益
+
+### 场景二: 取消超时订单
+
+定期清理超时未支付订单:
+
+1. 筛选 "待支付" 状态
+2. 查看更新时间判断是否超时
+3. 点击状态选择 "已取消"
+4. 订单标记为已取消
+
+### 场景三: 用户订单查询
+
+用户咨询订单问题:
+
+1. 在用户筛选中输入用户 ID
+2. 查看该用户所有订单
+3. 找到对应订单查看状态
+4. 点击金额查看详细信息
+5. 根据情况处理问题
+
+### 场景四: 产品销售查询
+
+查看某个产品的销售情况:
+
+1. 在产品筛选中选择套餐
+2. 查看该产品的所有订单
+3. 查看不同状态的订单数量
+4. 分析销售趋势
+
+## 注意事项
+
+1. **只能修改部分状态** - 仅待支付、已取消、已关闭可修改
+2. **已支付不可改** - 已支付和已完成订单不可修改
+3. **修改需谨慎** - 状态修改会触发权益变更
+4. **核对支付** - 修改为已支付前务必确认实际收款
+5. **价格明细** - 通过金额悬浮卡片核对价格计算
+6. **用户问题** - 使用用户筛选快速查询用户订单
+
+</div>
--- a/docs/zh/admin/commerce/orders.md
+++ b/docs/zh/admin/commerce/orders.md
@ -0,0 +1,291 @@
+# 订单管理
+
+订单管理模块用于处理用户的购买订单,是系统收入和业务流程的核心环节。
+
+## 功能概述
+
+### 订单列表
+
+查看和管理所有订单:
+
+- **订单号**: 唯一的订单标识
+- **用户信息**: 购买用户的姓名和邮箱
+- **产品信息**: 购买的产品名称和规格
+- **订单金额**: 实付金额和原价
+- **支付方式**: 支付宝/微信/虚拟货币等
+- **订单状态**: 待支付/已支付/已完成/已取消/已退款
+- **创建时间**: 订单创建的时间
+- **支付时间**: 订单支付完成的时间
+
+### 订单筛选
+
+快速查找特定订单:
+
+- **按状态筛选**: 待支付/已支付/已完成等
+- **按时间范围**: 今天/本周/本月/自定义
+- **按支付方式**: 按支付渠道筛选
+- **按用户**: 查看特定用户的订单
+- **按产品**: 查看特定产品的销售订单
+- **按金额**: 按订单金额范围筛选
+
+### 创建订单
+
+为用户手动创建订单:
+
+#### 选择用户
+
+- 搜索已存在的用户
+- 或创建新用户
+- 填写用户基本信息
+
+#### 选择产品
+
+- 从产品列表选择套餐
+- 设置购买数量
+- 查看价格详情
+
+#### 优惠设置
+
+- 应用优惠券
+- 手动折扣
+- 余额抵扣
+- 积分抵扣
+
+#### 订单备注
+
+- 添加订单备注
+- 标记特殊订单
+- 记录沟通内容
+
+### 订单详情
+
+查看订单的完整信息:
+
+#### 基本信息
+
+- 订单号和创建时间
+- 用户信息和联系方式
+- 产品详情和规格
+- 订单金额明细
+
+#### 支付信息
+
+- 支付方式和支付流水号
+- 支付时间和支付状态
+- 第三方平台订单号
+- 支付凭证(如有)
+
+#### 订单状态
+
+- 当前订单状态
+- 状态变更历史
+- 操作日志记录
+
+#### 售后信息
+
+- 退款申请记录
+- 客服沟通记录
+- 问题处理进度
+
+## 订单操作
+
+### 订单审核
+
+审核待处理的订单:
+
+- **自动审核**: 在线支付自动完成
+- **人工审核**: 银行转账等需要人工确认
+- **审核通过**: 开通服务并通知用户
+- **审核拒绝**: 拒绝订单并说明原因
+
+### 订单处理
+
+处理已支付的订单:
+
+- **自动开通**: 支付完成自动激活服务
+- **手动开通**: 管理员手动开通服务
+- **延迟开通**: 设置未来开通时间
+- **批量处理**: 批量处理多个订单
+
+### 订单取消
+
+取消未支付或异常的订单:
+
+- **用户取消**: 用户主动取消订单
+- **超时取消**: 未在规定时间内支付
+- **管理员取消**: 管理员手动取消
+- **系统取消**: 检测到异常自动取消
+
+### 订单退款
+
+处理退款请求:
+
+#### 退款审核
+
+- 查看退款原因
+- 评估退款合理性
+- 决定是否同意退款
+
+#### 退款处理
+
+- **全额退款**: 退还全部订单金额
+- **部分退款**: 退还部分金额
+- **退款到余额**: 退款到用户账户余额
+- **原路退回**: 退款到原支付方式
+
+#### 退款后处理
+
+- 回收已开通的服务
+- 更新用户账户状态
+- 记录退款原因和处理结果
+
+## 支付管理
+
+### 支付方式
+
+支持多种支付渠道:
+
+- **支付宝**: 扫码支付/当面付
+- **微信支付**: 扫码支付/H5 支付
+- **虚拟货币**: USDT/BTC 等
+- **银行转账**: 线下转账
+- **余额支付**: 使用账户余额
+
+### 支付配置
+
+配置支付渠道参数:
+
+- **商户信息**: 商户号/密钥
+- **支付回调**: 异步通知 URL
+- **支付限额**: 最低/最高支付金额
+- **支付手续费**: 手续费率和承担方
+
+### 支付回调
+
+处理支付平台回调:
+
+- **验证签名**: 验证回调数据真实性
+- **更新状态**: 更新订单支付状态
+- **开通服务**: 自动开通购买的服务
+- **发送通知**: 通知用户支付成功
+
+## 订单统计
+
+### 销售统计
+
+分析订单销售数据:
+
+- **订单数量**: 总订单数和增长趋势
+- **订单金额**: 总销售额和平均客单价
+- **转化率**: 订单转化率分析
+- **复购率**: 用户复购情况
+
+### 支付统计
+
+分析支付方式使用:
+
+- **各支付方式占比**: 支付宝/微信等占比
+- **支付成功率**: 各渠道支付成功率
+- **支付时效**: 从下单到支付的时长
+
+### 产品统计
+
+分析产品销售情况:
+
+- **热销产品**: 销量最高的产品
+- **收入贡献**: 各产品收入占比
+- **库存预警**: 库存不足的产品
+
+## 订单导出
+
+导出订单数据用于分析:
+
+### 导出选项
+
+- **导出格式**: Excel/CSV/PDF
+- **导出范围**: 全部/筛选结果
+- **导出字段**: 自定义导出字段
+- **数据脱敏**: 敏感信息脱敏处理
+
+### 导出用途
+
+- **财务对账**: 核对收入数据
+- **数据分析**: 进行业务分析
+- **报表生成**: 生成销售报表
+- **备份存档**: 数据备份归档
+
+## 异常订单处理
+
+### 订单异常类型
+
+- **重复支付**: 同一订单多次支付
+- **支付未到账**: 已支付但系统未收到
+- **金额不符**: 支付金额与订单金额不一致
+- **恶意订单**: 刷单或欺诈订单
+
+### 处理流程
+
+1. **识别异常**: 系统自动标记或人工发现
+2. **调查原因**: 查看支付记录和日志
+3. **联系用户**: 与用户沟通确认情况
+4. **处理方案**: 退款/补发/人工处理
+5. **记录备案**: 记录处理过程和结果
+
+## 订单安全
+
+### 风控措施
+
+- **实名认证**: 要求用户实名认证
+- **支付限额**: 设置单笔支付限额
+- **异常检测**: 检测异常支付行为
+- **黑名单**: 拉黑恶意用户
+
+### 防刷单
+
+- **频率限制**: 限制下单频率
+- **IP 检测**: 检测异常 IP 行为
+- **设备指纹**: 识别重复设备
+- **人工审核**: 可疑订单人工审核
+
+## 最佳实践
+
+- 及时处理待审核订单
+- 保证支付回调的稳定性
+- 定期核对财务数据
+- 快速响应退款请求
+- 记录完整的操作日志
+- 分析订单数据优化运营
+
+## 常见问题
+
+### 支付成功但未到账
+
+处理步骤:
+
+1. 查看支付平台订单状态
+2. 检查支付回调日志
+3. 手动触发回调处理
+4. 联系支付平台客服
+
+### 订单无法取消
+
+可能原因:
+
+1. 订单已经支付
+2. 服务已经开通
+3. 系统权限不足
+
+### 退款失败
+
+检查以下几点:
+
+1. 退款接口配置是否正确
+2. 账户余额是否充足
+3. 退款信息是否完整
+4. 是否超过退款时限
+
+## 下一步
+
+- [优惠券管理](/zh/admin/commerce/coupons) - 创建优惠活动
+- [用户管理](/zh/admin/users-support/users) - 管理用户账户
+- [财务统计](/zh/admin/logs/balance) - 查看收支明细
--- a/docs/zh/admin/commerce/product.md
+++ b/docs/zh/admin/commerce/product.md
@ -0,0 +1,204 @@
+<div v-pre>
+
+# 产品管理
+
+管理系统中的订阅套餐产品,包括价格、流量配额、节点权限等设置。产品是用户购买的基本单位。
+
+## 表格列说明
+
+### 显示 (Show)
+开关按钮,控制产品是否在前台显示。关闭后用户无法看到此产品。
+
+### 售卖 (Sell)
+开关按钮,控制产品是否允许购买。可以显示但不售卖(预告模式)。
+
+### 名称 (Name)
+产品套餐名称。
+
+### 单价 (Unit Price)
+显示价格和计费周期,格式如 `¥10/月`。
+
+### 套餐价 (Replacement)
+优惠价格或一次性购买价格。
+
+### 流量 (Traffic)
+每周期提供的流量配额,0 显示为"无限"。
+
+### 设备限制 (Device Limit)
+同时在线设备数限制,0 显示为"无限"。
+
+### 库存 (Inventory)
+剩余可售数量,0 显示为"无限"。
+
+### 配额 (Quota)
+总销售限额,0 显示为"无限"。
+
+### 语言 (Language)
+产品适用的语言限制,用于多语言站点。
+
+### 已售 (Sold)
+已售出数量统计。
+
+## 表格操作
+
+### 编辑
+打开侧边抽屉表单修改产品信息。
+
+### 删除
+删除产品(需确认),已有订阅的产品可能无法删除。
+
+### 复制
+快速复制产品创建新套餐,自动设置为不显示、不售卖。
+
+### 批量删除
+选中多个产品后批量删除。
+
+### 拖拽排序
+拖动产品行调整显示顺序,影响前台展示顺序。
+
+## 产品表单
+
+表单包含三个标签页:
+
+### 基础 (Basic) 标签页
+
+**名称和语言**:
+- **名称** (必填) - 产品套餐名称
+- **语言** (可选) - 语言限制,如 `zh-CN` 或 `en`
+
+**流量和限制**:
+- **流量** - 每周期流量配额 (GB),0 = 无限
+- **限速** - 带宽限制 (Mbps),0 = 不限速
+- **设备限制** - 同时在线设备数,0 = 无限
+
+**库存和配额**:
+- **库存** - 剩余可售数量,0 = 无限
+- **配额** - 总销售限额,0 = 无限
+
+**产品描述** (JSON编辑器):
+```json
+{
+  "description": "产品描述文字",
+  "features": [
+    {
+      "type": "default",
+      "icon": "uil:shield-check",
+      "label": "功能特性"
+    }
+  ]
+}
+```
+
+### 定价 (Pricing) 标签页
+
+**基础定价**:
+- **单价** (必填) - 基础价格
+- **计费周期** (必填) - 选项:
+  - NoLimit (不限时)
+  - Year (年)
+  - Month (月)
+  - Day (日)
+  - Hour (小时)
+  - Minute (分钟)
+- **套餐价** - 优惠价格
+- **重置周期** - 流量重置方式:
+  - 不重置
+  - 每月1号重置
+  - 按月重置
+  - 按年重置
+
+**批量折扣**:
+动态数组,支持添加多个折扣梯度:
+- **数量** - 购买周期数
+- **折扣** - 折扣百分比 (1-100%)
+- **价格** - 折后价格
+
+系统自动计算:修改任意两个值,第三个值自动计算。
+
+**扣费设置**:
+- **扣费比例** - 节点流量倍率 (0-100%),留空为自动
+- **续费重置** - 开关,续费时是否重置流量
+- **购买时使用折扣** - 开关,是否允许使用优惠券
+
+### 服务器 (Servers) 标签页
+
+**节点标签选择**:
+手风琴式列表,显示所有标签和标签下的节点:
+- 勾选标签,自动包含该标签下所有节点
+- 显示节点数量
+- 展开查看标签内节点详情(名称、地址、协议)
+
+**单独节点选择**:
+选择没有标签的节点:
+- 逐个勾选节点
+- 显示节点名称、地址:端口、协议
+
+## 使用场景
+## 使用场景
+
+### 场景一: 创建基础月付套餐
+
+**基础标签页**:
+- 名称: 标准月付
+- 流量: 100 GB
+- 限速: 0 (不限速)
+- 设备限制: 3
+- 库存: 0 (无限)
+
+**定价标签页**:
+- 单价: 30
+- 计费周期: Month
+- 重置周期: 按月重置
+- 批量折扣:
+  - 3 个月, 10% 折扣, 81 元
+  - 6 个月, 15% 折扣, 153 元
+  - 12 个月, 20% 折扣, 288 元
+
+**服务器标签页**:
+- 勾选"基础节点"标签
+
+### 场景二: 创建流量包产品
+
+**基础标签页**:
+- 名称: 500GB流量包
+- 流量: 500 GB
+- 设备限制: 0 (无限)
+
+**定价标签页**:
+- 单价: 50
+- 计费周期: NoLimit (不限时)
+- 重置周期: 不重置
+- 续费重置: 关闭
+
+**服务器标签页**:
+- 勾选所有高速节点标签
+
+### 场景三: 创建高级年付套餐
+
+**基础标签页**:
+- 名称: 高级年付
+- 流量: 0 (无限)
+- 限速: 200 Mbps
+- 设备限制: 10
+
+**定价标签页**:
+- 单价: 300
+- 计费周期: Year
+- 重置周期: 按月重置
+- 续费重置: 开启
+
+**服务器标签页**:
+- 勾选所有节点标签
+
+## 重要提示
+
+1. **显示控制**: 新产品默认不显示、不售卖,需手动开启
+2. **节点配置**: 必须配置节点,否则用户无法使用
+3. **批量折扣**: 修改单价或周期后,折扣价格自动重新计算
+4. **库存配额**: 0 表示无限,非零值会限制销售数量
+5. **语言限制**: 留空表示所有语言可见
+6. **拖拽排序**: 排序会立即保存并影响前台显示
+7. **复制功能**: 复制的产品不会自动上架
+8. **已售产品**: 修改已售产品配置会影响现有订阅
+
+</div>
--- a/docs/zh/admin/dashboard.md
+++ b/docs/zh/admin/dashboard.md
@ -0,0 +1,225 @@
+# Dashboard 仪表盘
+
+Dashboard 是管理后台的首页,实时展示系统核心数据和运营状况。
+
+## 页面概览
+
+Dashboard 主要包含三大区域:
+
+1. **关键指标卡片** - 6个核心业务指标
+2. **数据统计图表** - 收入、用户、流量三大统计图
+3. **赞助商展示** - 显示支持 PPanel 的赞助商
+
+## 关键指标卡片
+
+顶部展示 6 个关键业务指标卡片:
+
+### 在线用户数
+- **显示内容**: 当前系统在线用户数量
+- **副标题**: "Currently Online"
+- **点击跳转**: `/dashboard/user` 用户管理页面
+- **图标**: 蓝色用户图标
+
+### 今日流量
+- **显示内容**: 今日上传+下载总流量
+- **副标题**: 显示上传/下载流量明细
+  - ↑ 上传流量
+  - ↓ 下载流量
+- **图标**: 紫色交换图标
+- **格式**: 自动转换为合适单位 (KB/MB/GB/TB)
+
+### 本月流量
+- **显示内容**: 本月上传+下载总流量
+- **副标题**: 显示本月上传/下载流量明细
+- **图标**: 橙色云数据图标
+- **格式**: 自动转换为合适单位
+
+### 服务器总数
+- **显示内容**: 在线服务器数 + 离线服务器数
+- **副标题**: 显示在线/离线服务器数量明细
+  - "在线 X 离线 Y"
+- **点击跳转**: `/dashboard/servers` 服务器管理页面
+- **图标**: 绿色服务器图标
+
+### 待回复工单
+- **显示内容**: 等待管理员回复的工单数量
+- **副标题**: "Pending"
+- **点击跳转**: `/dashboard/ticket` 工单管理页面
+- **图标**: 红色工单图标
+
+### 系统版本信息
+- **显示内容**:
+  - 后端服务版本号
+  - Web 管理端版本号
+  - 版本更新状态
+- **操作功能**:
+  - 检查更新
+  - 一键更新(如有新版本)
+  - 重启系统
+  - 查看更新日志
+
+::: tip 提示
+点击有链接的卡片可以快速跳转到对应的管理页面。
+:::
+
+## 数据统计图表
+
+### 收入统计图表 (Revenue Statistics)
+
+展示系统收入数据,支持三个时间维度切换:
+
+**时间维度**:
+- **今日 (Today)**: 今日收入数据
+- **本月 (Month)**: 本月每日收入趋势
+- **累计 (Total)**: 历史累计收入数据
+
+**今日数据** - 饼图展示:
+- **新购收入**: 新用户购买订单金额
+- **续费收入**: 老用户续费订单金额
+- **中心数字**: 今日总收入
+
+**本月数据** - 柱状图展示:
+- X轴: 每日日期
+- Y轴: 收入金额
+- 显示本月每日收入柱状图
+- 支持鼠标悬停查看详细数据
+
+**累计数据** - 面积图展示:
+- **新购订单数**: 累计新购订单数量
+- **续费订单数**: 累计续费订单数量
+- **订单总数**: 累计订单总数
+- 趋势面积图展示长期变化
+
+**底部汇总**:
+- 新购金额 / 订单数
+- 续费金额 / 订单数
+- 总金额 / 总订单数
+
+### 用户统计图表 (User Statistics)
+
+展示用户相关数据,支持三个时间维度切换:
+
+**时间维度**:
+- **今日 (Today)**: 今日用户数据
+- **本月 (Month)**: 本月每日用户趋势
+- **累计 (Total)**: 历史累计用户数据
+
+**今日数据** - 饼图展示:
+- **注册用户**: 今日新注册用户数
+- **新购用户**: 今日首次购买用户数
+- **续费用户**: 今日续费用户数
+- **中心数字**: 今日总用户数(注册+新购+续费)
+
+**本月数据** - 柱状图展示:
+- X轴: 每日日期
+- Y轴: 用户数量
+- 三种颜色柱状图:
+  - 注册用户 (蓝色)
+  - 新购用户 (绿色)
+  - 续费用户 (橙色)
+
+**累计数据** - 面积图展示:
+- **注册用户**: 累计注册用户趋势
+- **新购用户**: 累计新购用户趋势
+- **续费用户**: 累计续费用户趋势
+- 三条面积曲线展示长期变化
+
+**底部汇总**:
+- 注册用户总数
+- 新购用户总数
+- 续费用户总数
+
+### 流量排名图表 (Traffic Rank)
+
+展示节点或用户的流量使用排名:
+
+**时间切换** (右上角标签):
+- **今日 (Today)**: 今日流量排名
+- **昨日 (Yesterday)**: 昨日流量排名
+
+**类型切换** (下拉选择):
+- **节点流量 (Nodes)**: 显示各服务器节点的流量消耗排名
+- **用户流量 (Users)**: 显示用户流量使用排名
+
+**图表展示** - 横向柱状图:
+- Y轴: 排名序号(1, 2, 3...)
+- X轴: 流量大小(自动转换单位)
+- 柱状图: 流量大小可视化
+- 柱内标签: 显示节点名称或用户ID
+
+**交互功能**:
+- 鼠标悬停: 显示详细流量数据
+- 节点模式: 显示节点名称和流量
+- 用户模式: 显示用户订阅详情(ID、套餐、到期时间等)
+
+**空数据处理**:
+- 无数据时显示空状态提示
+
+::: tip 流量计算
+流量 = 上传流量 + 下载流量,自动换算为 KB/MB/GB/TB 单位。
+:::
+
+## 赞助商展示
+
+页面底部显示支持 PPanel 项目的赞助商:
+
+**显示内容**:
+- 赞助商 Logo
+- 赞助商名称
+- 简要描述
+
+**数据来源**:
+- 从 GitHub 仓库获取最新赞助商列表
+- CDN 加速访问
+- 自动过滤已过期的赞助
+
+**交互**:
+- 点击卡片跳转到赞助商网站
+- 新窗口打开,不影响当前页面
+
+::: tip 支持 PPanel
+赞助帮助 PPanel 持续发布更新! 点击赞助商卡片可访问他们的服务。
+:::
+
+## 数据刷新
+
+- **自动刷新**: 页面数据根据查询配置自动更新
+- **手动刷新**: 刷新浏览器页面可立即更新所有数据
+- **实时性**: 关键指标实时获取最新数据
+
+## 使用建议
+
+1. **每日查看**: 建议每天查看 Dashboard 了解运营状况
+2. **关注指标**: 重点关注在线用户、待回复工单等实时指标
+3. **趋势分析**: 定期查看图表趋势,分析业务变化
+4. **异常处理**: 发现数据异常及时点击卡片跳转处理
+5. **版本更新**: 有新版本提示时及时更新系统
+
+## 常见问题
+
+### 数据不准确怎么办?
+
+1. 刷新浏览器页面重新获取数据
+2. 检查服务器时间是否正确
+3. 查看系统日志是否有错误
+
+### 图表显示为空?
+
+可能原因:
+- 时间段内确实没有数据
+- 数据统计服务异常
+- 刷新页面重试
+
+### 赞助商不显示?
+
+可能原因:
+- 网络连接问题,无法访问 CDN
+- 当前没有有效期内的赞助商
+- 浏览器拦截了外部资源
+
+## 下一步
+
+- [用户管理](/zh/admin/users-support/users) - 查看用户详情和流量使用
+- [工单管理](/zh/admin/users-support/tickets) - 处理待回复工单
+- [服务器管理](/zh/admin/maintenance/servers) - 管理服务器节点
+- [订单管理](/zh/admin/commerce/orders) - 查看收入和订单详情
--- a/docs/zh/admin/logs/balance.md
+++ b/docs/zh/admin/logs/balance.md
@ -0,0 +1,136 @@
+<div v-pre>
+
+# 余额日志
+
+查看用户余额变动记录,包含充值、消费、奖励等所有余额操作。
+
+## 表格列说明
+
+### 用户 (User)
+余额变动的用户(可点击查看详情)。
+
+### 金额 (Amount)
+余额变动金额:
+- 正数表示增加
+- 负数表示减少
+
+### 订单号 (Order No.)
+关联的订单号(可点击查看订单详情)。
+
+### 余额 (Balance)
+变动后的用户余额。
+
+### 类型 (Type)
+余额变动类型(Badge显示):
+
+**流量重置类(23x)**:
+- 自动重置 (231)
+- 提前重置 (232)
+- 付费重置 (233)
+
+**充值提现类(32x)**:
+- 充值 (321)
+- 提现 (322)
+- 付款 (323)
+- 退款 (324)
+- 奖励 (325)
+- 管理员调整 (326)
+
+**购买类(33x)**:
+- 购买 (331)
+- 续费 (332)
+- 退款 (333)
+- 提现 (334)
+- 管理员调整 (335)
+
+**调整类(34x)**:
+- 增加 (341)
+- 减少 (342)
+
+### 时间 (Time)
+余额变动时间。
+
+## 筛选功能
+
+### 日期筛选
+选择查看指定日期的余额记录,默认今天。
+
+### 用户ID筛选
+输入用户ID查看该用户的余额变动。
+
+## 使用场景
+
+### 场景一: 查看今日充值
+
+1. 默认显示今天的余额记录
+2. 筛选类型"充值"
+3. 统计充值金额
+4. 分析充值用户
+
+### 场景二: 追踪用户余额
+
+**查看用户消费**:
+1. 输入用户ID筛选
+2. 查看所有余额变动
+3. 分析消费习惯
+4. 验证账单正确性
+
+### 场景三: 排查异常交易
+
+**检查大额变动**:
+1. 浏览余额记录
+2. 关注大额充值/消费
+3. 点击订单号查看详情
+4. 验证交易合法性
+
+### 场景四: 管理员调整余额
+
+**手动调整后验证**:
+1. 筛选"管理员调整"类型
+2. 查看调整记录
+3. 验证调整是否正确
+4. 通知用户(如需要)
+
+## 余额类型说明
+
+### 充值相关
+- **充值**: 用户通过支付渠道充值
+- **奖励**: 推广奖励、活动奖励
+- **退款**: 订单退款到余额
+
+### 消费相关
+- **购买**: 购买新套餐
+- **续费**: 续费现有套餐
+- **付款**: 其他付款操作
+
+### 调整相关
+- **管理员调整**: 手动增加或减少余额
+- **提现**: 用户申请提现(扣除余额)
+
+## 财务对账
+
+### 日常对账
+每日检查:
+1. 充值总额与支付平台一致
+2. 消费总额与订单总额一致
+3. 无异常大额变动
+4. 退款记录完整
+
+### 月度对账
+每月汇总:
+1. 总充值额
+2. 总消费额
+3. 总余额变化
+4. 手续费支出
+
+## 重要提示
+
+1. **日志保留**: 根据系统配置保留时间
+2. **金额正负**: 注意金额的正负号含义
+3. **订单关联**: 有订单号的可追溯来源
+4. **类型识别**: 通过类型码快速识别操作
+5. **余额快照**: 记录变动后的余额值
+6. **管理员操作**: 管理员调整会有记录
+7. **定期对账**: 建议每日核对财务数据
+
+</div>
--- a/docs/zh/admin/logs/commission.md
+++ b/docs/zh/admin/logs/commission.md
@ -0,0 +1,80 @@
+<div v-pre>
+
+# 佣金日志
+
+查看用户推广佣金记录,包含佣金来源和金额。
+
+## 表格列说明
+
+### 用户 (User)
+获得佣金的用户(可点击查看详情)。
+
+### 金额 (Amount)
+佣金金额。
+
+### 订单号 (Order No.)
+产生佣金的订单号(可点击查看订单详情)。
+
+### 类型 (Type)
+佣金类型(Badge显示):
+- 推广佣金
+- 返现佣金
+- 奖励佣金
+- 其他类型
+
+### 时间 (Time)
+佣金发放时间。
+
+## 筛选功能
+
+### 日期筛选
+选择查看指定日期的佣金记录,默认今天。
+
+### 用户ID筛选
+输入用户ID查看该用户的佣金记录。
+
+## 使用场景
+
+### 场景一: 查看今日佣金
+
+1. 默认显示今天的佣金记录
+2. 统计佣金总额
+3. 分析推广效果
+
+### 场景二: 追踪用户佣金
+
+**查看推广收益**:
+1. 输入用户ID筛选
+2. 查看所有佣金记录
+3. 统计累计收益
+4. 验证佣金正确性
+
+### 场景三: 分析推广效果
+
+**统计推广数据**:
+1. 选择时间范围
+2. 查看佣金记录
+3. 识别优质推广者
+4. 优化推广策略
+
+## 佣金规则
+
+### 佣金来源
+- **推广佣金**: 推荐用户消费产生
+- **返现佣金**: 自己消费返现
+- **奖励佣金**: 活动奖励
+
+### 佣金计算
+- 按订单金额的百分比
+- 实时到账或定期结算
+- 关联原始订单
+
+## 重要提示
+
+1. **日志保留**: 根据系统配置保留
+2. **订单关联**: 可追溯佣金来源
+3. **类型识别**: 通过类型快速分类
+4. **实时统计**: 查看推广效果
+5. **定期对账**: 验证佣金发放正确性
+
+</div>
--- a/docs/zh/admin/logs/email.md
+++ b/docs/zh/admin/logs/email.md
@ -0,0 +1,149 @@
+<div v-pre>
+
+# 邮件日志
+
+查看系统发送的所有邮件记录,包含发送状态和内容。
+
+## 表格列说明
+
+### 平台 (Platform)
+邮件发送平台(Badge显示):
+- SMTP
+- SendGrid
+- Mailgun
+- AWS SES
+- 其他邮件服务商
+
+### 收件人 (To)
+接收邮件的邮箱地址。
+
+### 主题 (Subject)
+邮件主题。
+
+### 内容 (Content)
+邮件内容(JSON格式显示):
+- 纯文本内容
+- HTML内容
+- 模板变量
+- 最大显示480px宽度
+
+### 状态 (Status)
+邮件发送状态(Badge显示):
+- **已发送** (绿色) - 成功发送
+- **发送失败** (红色) - 发送失败
+- **未知** (灰色) - 状态未知
+
+### 时间 (Time)
+邮件发送时间。
+
+## 筛选功能
+
+### 关键词搜索
+搜索收件人地址或邮件主题。
+
+### 日期筛选
+选择查看指定日期的邮件记录,默认今天。
+
+## 使用场景
+
+### 场景一: 查看今日邮件
+
+1. 默认显示今天的邮件记录
+2. 查看发送数量
+3. 检查发送状态
+4. 统计成功率
+
+### 场景二: 排查发送失败
+
+**检查失败邮件**:
+1. 筛选"发送失败"状态
+2. 查看收件人地址
+3. 检查邮件内容
+4. 分析失败原因
+5. 重新发送或修复配置
+
+### 场景三: 验证邮件内容
+
+**检查邮件模板**:
+1. 搜索特定主题
+2. 查看邮件内容
+3. 验证变量替换
+4. 确认格式正确
+
+### 场景四: 追踪用户邮件
+
+**查看用户收信**:
+1. 搜索用户邮箱
+2. 查看所有邮件
+3. 确认是否送达
+4. 验证邮件类型
+
+## 邮件类型
+
+### 系统邮件
+- 注册验证邮件
+- 密码重置邮件
+- 登录验证码
+- 账户通知
+
+### 营销邮件
+- 推广邮件
+- 活动通知
+- 优惠信息
+- 产品更新
+
+### 交易邮件
+- 订单确认
+- 支付成功
+- 发票通知
+- 到期提醒
+
+## 发送监控
+
+### 成功率监控
+关注指标:
+- 每日发送总量
+- 发送成功率
+- 失败率趋势
+- 不同平台表现
+
+### 异常处理
+发现问题时:
+1. 检查SMTP配置
+2. 验证邮件服务商状态
+3. 检查发送频率限制
+4. 查看错误日志
+
+## 邮件内容说明
+
+### JSON格式
+内容字段包含:
+```json
+{
+  "text": "纯文本内容",
+  "html": "<p>HTML内容</p>",
+  "variables": {
+    "username": "用户名",
+    "code": "验证码"
+  }
+}
+```
+
+### 变量替换
+- {{username}}: 用户名
+- {{code}}: 验证码
+- {{link}}: 链接地址
+- {{expire}}: 过期时间
+
+## 重要提示
+
+1. **日志保留**: 根据系统配置保留
+2. **内容截断**: 过长内容会被截断显示
+3. **JSON显示**: 内容以JSON格式展示
+4. **平台识别**: 通过平台字段识别发送渠道
+5. **状态监控**: 关注发送失败记录
+6. **隐私保护**: 邮件内容可能包含敏感信息
+7. **定期检查**: 每日检查发送状态
+8. **配额管理**: 注意邮件服务商配额限制
+
+</div>
--- a/docs/zh/admin/logs/gift.md
+++ b/docs/zh/admin/logs/gift.md
@ -0,0 +1,129 @@
+<div v-pre>
+
+# 赠送日志
+
+查看流量、时长、余额等赠送记录,包含赠送来源和备注。
+
+## 表格列说明
+
+### 用户 (User)
+接收赠送的用户(可点击查看详情)。
+
+### 订阅 (Subscribe)
+赠送关联的订阅ID(可点击查看订阅详情)。
+
+### 订单号 (Order No.)
+关联的订单号(可点击查看订单详情)。
+
+### 金额 (Amount)
+赠送的金额(余额赠送时显示)。
+
+### 余额 (Balance)
+赠送后的用户余额。
+
+### 类型 (Type)
+赠送类型(Badge显示):
+- 流量赠送
+- 时长赠送
+- 余额赠送
+- 活动赠送
+- 管理员赠送
+
+### 备注 (Remark)
+赠送备注说明。
+
+### 时间 (Time)
+赠送时间。
+
+## 筛选功能
+
+### 日期筛选
+选择查看指定日期的赠送记录,默认今天。
+
+### 用户ID筛选
+输入用户ID查看该用户的赠送记录。
+
+## 使用场景
+
+### 场景一: 查看今日赠送
+
+1. 默认显示今天的赠送记录
+2. 统计赠送数量
+3. 分析赠送成本
+
+### 场景二: 追踪用户赠送
+
+**查看用户获得**:
+1. 输入用户ID筛选
+2. 查看所有赠送记录
+3. 验证赠送是否到账
+4. 查看赠送来源
+
+### 场景三: 核对活动赠送
+
+**验证活动发放**:
+1. 筛选活动时间
+2. 查看赠送记录
+3. 核对发放数量
+4. 验证备注信息
+
+### 场景四: 管理员赠送记录
+
+**查看手动赠送**:
+1. 筛选"管理员赠送"类型
+2. 查看赠送记录
+3. 验证操作是否正确
+4. 查看备注原因
+
+## 赠送类型说明
+
+### 流量赠送
+- 赠送流量包
+- 增加订阅流量
+- 显示在订阅详情
+
+### 时长赠送
+- 延长订阅时间
+- 增加有效天数
+- 显示在订阅详情
+
+### 余额赠送
+- 赠送账户余额
+- 可用于购买套餐
+- 显示金额和余额
+
+### 活动赠送
+- 营销活动奖励
+- 批量发放
+- 带活动备注
+
+### 管理员赠送
+- 手动操作赠送
+- 需要备注原因
+- 用于补偿或奖励
+
+## 成本分析
+
+### 赠送统计
+每日/月统计:
+1. 流量赠送总量
+2. 时长赠送总天数
+3. 余额赠送总额
+4. 分类型统计
+
+### 效果评估
+- 赠送后用户留存
+- 赠送后用户付费
+- 投入产出比
+
+## 重要提示
+
+1. **日志保留**: 根据系统配置保留
+2. **订阅关联**: 流量和时长赠送关联订阅
+3. **余额记录**: 余额赠送记录变动金额
+4. **备注重要**: 手动赠送必须填写备注
+5. **类型识别**: 通过类型区分赠送来源
+6. **成本统计**: 定期分析赠送成本
+7. **防止滥用**: 关注异常大量赠送
+
+</div>
--- a/docs/zh/admin/logs/login.md
+++ b/docs/zh/admin/logs/login.md
@ -0,0 +1,93 @@
+<div v-pre>
+
+# 登录日志
+
+查看用户登录记录,包含登录方式、IP地址和设备信息。
+
+## 表格列说明
+
+### 用户 (User)
+登录的用户,显示:
+- 登录方式Badge(邮箱/手机/Google等)
+- 用户ID(可点击查看详情)
+
+### IP地址 (IP)
+登录IP地址(可点击查看IP信息)。
+
+### User Agent
+用户设备和浏览器信息:
+- 鼠标悬停显示完整内容
+- 截断显示避免过长
+
+### 成功状态 (Success)
+登录是否成功:
+- **成功** (绿色Badge)
+- **失败** (红色Badge)
+
+### 时间 (Time)
+登录时间。
+
+## 筛选功能
+
+### 日期筛选
+选择查看指定日期的登录记录,默认今天。
+
+### 用户ID筛选
+输入用户ID查看该用户的登录记录。
+
+## 使用场景
+
+### 场景一: 查看今日登录
+
+1. 默认显示今天的登录记录
+2. 查看登录频率
+3. 分析活跃用户
+
+### 场景二: 排查异常登录
+
+**检查失败登录**:
+1. 筛选登录失败记录
+2. 查看IP地址
+3. 分析失败原因
+4. 必要时封禁IP
+
+**检查异地登录**:
+1. 查看用户登录IP
+2. 点击IP查看地理位置
+3. 对比历史登录位置
+4. 发现异常通知用户
+
+### 场景三: 追踪用户登录
+
+**查看特定用户**:
+1. 输入用户ID筛选
+2. 查看登录历史
+3. 分析登录设备
+4. 验证账号安全
+
+## 安全监控
+
+### 异常模式
+关注以下异常:
+- 短时间大量失败登录
+- 同一IP多账号登录
+- 异常国家/地区登录
+- 罕见设备类型登录
+
+### 防护措施
+发现异常时:
+1. 临时封禁IP
+2. 强制用户重置密码
+3. 发送安全通知
+4. 启用二次验证
+
+## 重要提示
+
+1. **日志保留**: 根据系统配置自动清理
+2. **IP查询**: 点击IP可查看地理位置
+3. **User Agent**: 包含操作系统和浏览器信息
+4. **隐私保护**: 敏感信息仅管理员可见
+5. **失败记录**: 重点关注失败登录异常
+6. **定期检查**: 建议每日检查登录情况
+
+</div>
--- a/docs/zh/admin/logs/mobile.md
+++ b/docs/zh/admin/logs/mobile.md
@ -0,0 +1,165 @@
+<div v-pre>
+
+# 短信日志
+
+查看系统发送的所有短信记录,包含发送状态和内容。
+
+## 表格列说明
+
+### 平台 (Platform)
+短信发送平台(Badge显示):
+- 阿里云短信
+- 腾讯云短信
+- Twilio
+- AWS SNS
+- 其他短信服务商
+
+### 收件人 (To)
+接收短信的手机号码。
+
+### 主题 (Subject)
+短信主题/类型。
+
+### 内容 (Content)
+短信内容(JSON格式显示):
+- 短信文本
+- 模板变量
+- 签名信息
+- 最大显示480px宽度
+
+### 状态 (Status)
+短信发送状态(Badge显示):
+- **已发送** (绿色) - 成功发送
+- **发送失败** (红色) - 发送失败
+- **未知** (灰色) - 状态未知
+
+### 时间 (Time)
+短信发送时间。
+
+## 筛选功能
+
+### 关键词搜索
+搜索收件人手机号或短信主题。
+
+### 日期筛选
+选择查看指定日期的短信记录,默认今天。
+
+## 使用场景
+
+### 场景一: 查看今日短信
+
+1. 默认显示今天的短信记录
+2. 查看发送数量
+3. 检查发送状态
+4. 统计成功率
+
+### 场景二: 排查发送失败
+
+**检查失败短信**:
+1. 筛选"发送失败"状态
+2. 查看收件人号码
+3. 检查短信内容
+4. 分析失败原因(号码无效/余额不足/服务商问题)
+5. 重新发送或修复配置
+
+### 场景三: 验证短信内容
+
+**检查短信模板**:
+1. 搜索特定主题
+2. 查看短信内容
+3. 验证变量替换
+4. 确认签名正确
+
+### 场景四: 追踪用户短信
+
+**查看用户收信**:
+1. 搜索用户手机号
+2. 查看所有短信
+3. 确认是否送达
+4. 验证短信类型
+
+## 短信类型
+
+### 验证码短信
+- 注册验证码
+- 登录验证码
+- 重置密码验证码
+- 绑定手机验证码
+
+### 通知短信
+- 订单通知
+- 支付成功通知
+- 到期提醒
+- 系统公告
+
+### 营销短信
+- 推广短信
+- 活动通知
+- 优惠信息
+
+## 发送监控
+
+### 成功率监控
+关注指标:
+- 每日发送总量
+- 发送成功率
+- 失败率趋势
+- 不同平台表现
+
+### 异常处理
+发现问题时:
+1. 检查短信服务商配置
+2. 验证API密钥有效性
+3. 检查余额和配额
+4. 查看错误日志
+5. 联系服务商技术支持
+
+## 短信内容说明
+
+### JSON格式
+内容字段包含:
+```json
+{
+  "template_id": "SMS_123456",
+  "sign_name": "品牌名",
+  "params": {
+    "code": "123456",
+    "minutes": "5"
+  }
+}
+```
+
+### 模板变量
+- {{code}}: 验证码
+- {{minutes}}: 有效时间
+- {{product}}: 产品名称
+- {{amount}}: 金额
+
+## 成本管理
+
+### 费用统计
+- 每日短信数量
+- 单价计算
+- 月度费用
+- 不同类型占比
+
+### 成本优化
+- 控制验证码发送频率
+- 优化短信模板
+- 选择性价比高的服务商
+- 避免无效发送
+
+## 重要提示
+
+1. **日志保留**: 根据系统配置保留
+2. **内容截断**: 过长内容会被截断显示
+3. **JSON显示**: 内容以JSON格式展示
+4. **平台识别**: 通过平台字段识别发送渠道
+5. **状态监控**: 关注发送失败记录
+6. **号码隐私**: 手机号敏感信息需保护
+7. **定期检查**: 每日检查发送状态
+8. **配额管理**: 注意短信服务商配额和余额
+9. **频率限制**: 防止短信轰炸
+10. **合规要求**: 遵守短信发送法律法规
+
+</div>
--- a/docs/zh/admin/logs/register.md
+++ b/docs/zh/admin/logs/register.md
@ -0,0 +1,152 @@
+<div v-pre>
+
+# 注册日志
+
+查看用户注册记录,包含注册方式、IP地址和设备信息。
+
+## 表格列说明
+
+### 用户 (User)
+注册的用户(可点击查看详情)。
+
+### 标识符 (Identifier)
+注册使用的账号标识:
+- 注册方式Badge(邮箱/手机/Google等)
+- 具体账号(邮箱地址/手机号等)
+
+### IP地址 (IP)
+注册IP地址(可点击查看IP信息)。
+
+### User Agent
+注册设备和浏览器信息:
+- 鼠标悬停显示完整内容
+- 截断显示避免过长
+
+### 时间 (Time)
+注册时间。
+
+## 筛选功能
+
+### 日期筛选
+选择查看指定日期的注册记录,默认今天。
+
+### 用户ID筛选
+输入用户ID查看该用户的注册信息。
+
+## 使用场景
+
+### 场景一: 查看今日注册
+
+1. 默认显示今天的注册记录
+2. 统计注册数量
+3. 分析注册来源
+4. 识别注册方式分布
+
+### 场景二: 追踪用户来源
+
+**查看注册信息**:
+1. 查看用户注册记录
+2. 确认注册时间
+3. 查看注册IP位置
+4. 分析注册渠道
+
+### 场景三: 排查异常注册
+
+**检查可疑注册**:
+1. 查看注册日志
+2. 关注同一IP多次注册
+3. 检查异常国家/地区
+4. 识别批量注册行为
+5. 必要时限制注册
+
+### 场景四: 分析注册趋势
+
+**统计注册数据**:
+1. 选择时间范围
+2. 统计注册总量
+3. 分析注册高峰
+4. 评估推广效果
+
+## 注册方式
+
+### 邮箱注册
+- 显示邮箱地址
+- 需要邮箱验证
+- 最常用方式
+
+### 手机注册
+- 显示手机号
+- 需要短信验证
+- 国内常用
+
+### 社交账号注册
+- **Google**: Google账号
+- **GitHub**: GitHub账号
+- **Facebook**: Facebook账号
+- **Apple**: Apple ID
+- **Telegram**: Telegram账号
+
+## 安全监控
+
+### 异常模式
+关注以下异常:
+- 短时间大量注册
+- 同一IP多次注册
+- 异常国家/地区注册
+- 批量邮箱/手机号注册
+- 临时邮箱注册
+
+### 防护措施
+发现异常时:
+1. 启用注册验证码
+2. 限制单IP注册频率
+3. 封禁可疑IP
+4. 启用邮箱/手机验证
+5. 启用邀请码机制
+
+## 注册来源分析
+
+### 地理分布
+- 国家/地区统计
+- 城市分布
+- 识别主要市场
+
+### 设备分析
+从User Agent获取:
+- 操作系统分布
+- 浏览器类型
+- 设备类型(PC/Mobile)
+- 识别用户习惯
+
+### 注册渠道
+- 直接访问
+- 搜索引擎
+- 推广链接
+- 社交媒体
+
+## 数据统计
+
+### 日常统计
+- 每日新增注册
+- 注册转化率
+- 注册方式占比
+- 地域分布
+
+### 推广评估
+- 推广活动期间注册量
+- 不同渠道效果
+- 注册后留存率
+- 注册后付费率
+
+## 重要提示
+
+1. **日志保留**: 根据系统配置保留
+2. **IP追踪**: 可查看IP地理位置
+3. **设备识别**: User Agent包含设备信息
+4. **隐私保护**: 注册信息敏感,需保密
+5. **异常监控**: 关注批量和异地注册
+6. **方式分布**: 了解用户偏好注册方式
+7. **定期分析**: 每周分析注册趋势
+8. **反作弊**: 防止恶意批量注册
+
+</div>
--- a/docs/zh/admin/logs/reset-subscribe.md
+++ b/docs/zh/admin/logs/reset-subscribe.md
@ -0,0 +1,145 @@
+<div v-pre>
+
+# 流量重置日志
+
+查看订阅流量重置记录,包含重置类型和关联订单。
+
+## 表格列说明
+
+### 用户 (User)
+订阅所属用户(可点击查看详情)。
+
+### 订阅ID (Subscribe ID)
+被重置的订阅ID(可点击查看订阅详情,悬停显示卡片)。
+
+### 类型 (Type)
+重置类型(Badge显示):
+- **自动重置** - 按周期自动重置
+- **提前重置** - 用户主动提前重置
+- **付费重置** - 购买流量重置服务
+
+### 订单号 (Order No.)
+关联的订单号(付费重置时显示,可点击查看订单详情)。
+
+### 时间 (Time)
+重置时间。
+
+## 筛选功能
+
+### 日期筛选
+选择查看指定日期的重置记录,默认今天。
+
+### 订阅ID筛选
+输入订阅ID查看该订阅的重置记录。
+
+## 使用场景
+
+### 场景一: 查看今日重置
+
+1. 默认显示今天的重置记录
+2. 统计重置数量
+3. 分析重置类型分布
+4. 识别高频重置用户
+
+### 场景二: 追踪订阅重置
+
+**查看订阅历史**:
+1. 输入订阅ID筛选
+2. 查看所有重置记录
+3. 分析重置频率
+4. 验证重置是否正常
+
+### 场景三: 分析付费重置
+
+**统计付费数据**:
+1. 筛选"付费重置"类型
+2. 统计付费重置数量
+3. 计算付费重置收入
+4. 分析用户需求
+
+### 场景四: 排查异常重置
+
+**检查可疑重置**:
+1. 查看重置日志
+2. 关注高频提前重置
+3. 识别异常重置行为
+4. 验证订单关联
+
+## 重置类型说明
+
+### 自动重置 (Auto Reset)
+- 按订阅周期自动重置
+- 每月/每周/每日重置
+- 系统定时任务执行
+- 最常见的重置方式
+
+### 提前重置 (Advance Reset)
+- 用户主动提前重置
+- 需要消耗重置次数
+- 或者付费购买重置
+- 适合流量用尽场景
+
+### 付费重置 (Paid Reset)
+- 用户购买流量重置服务
+- 生成订单记录
+- 支付后立即重置
+- 有订单号关联
+
+## 重置规则
+
+### 自动重置时间
+- **月重置**: 每月1号0点
+- **周重置**: 每周一0点
+- **日重置**: 每天0点
+
+### 重置次数限制
+- 套餐包含重置次数
+- 超出次数需付费
+- 次数每周期重置
+
+### 付费重置价格
+- 按套餐流量配置
+- 一般为套餐价格20-30%
+- 可在产品管理配置
+
+## 流量管理
+
+### 重置策略
+- 设置合理重置周期
+- 配置重置次数限制
+- 定价付费重置服务
+- 通知用户重置规则
+
+### 用户提醒
+- 流量即将用尽提醒
+- 重置时间提醒
+- 付费重置推荐
+- 升级套餐建议
+
+## 数据统计
+
+### 重置分析
+每日/月统计:
+- 自动重置数量
+- 提前重置数量
+- 付费重置数量
+- 付费重置收入
+
+### 用户行为
+- 高频重置用户
+- 付费重置转化率
+- 重置后流量使用
+- 升级套餐转化
+
+## 重要提示
+
+1. **日志保留**: 根据系统配置保留
+2. **订阅关联**: 每条记录关联订阅ID
+3. **类型识别**: 通过类型区分重置方式
+4. **订单关联**: 付费重置有订单号
+5. **时间准确**: 记录精确重置时间
+6. **次数管理**: 跟踪用户重置次数
+7. **定期分析**: 每周分析重置数据
+8. **策略优化**: 根据数据优化重置规则
+
+</div>
--- a/docs/zh/admin/logs/server-traffic.md
+++ b/docs/zh/admin/logs/server-traffic.md
@ -0,0 +1,149 @@
+<div v-pre>
+
+# 服务器流量日志
+
+查看各服务器的每日流量统计,支持查看详细流量消费明细。
+
+## 表格列说明
+
+### 服务器 (Server)
+服务器信息显示:
+- 服务器ID(Badge显示)
+- 服务器名称
+
+### 上传 (Upload)
+当日上传流量,自动转换单位(B/KB/MB/GB/TB)。
+
+### 下载 (Download)
+当日下载流量,自动转换单位。
+
+### 总计 (Total)
+当日总流量(上传+下载)。
+
+### 日期 (Date)
+流量统计日期。
+
+## 表格操作
+
+### 查看详情 (Detail)
+点击"详情"按钮跳转到流量详细记录页面:
+- 查看该日期该服务器的详细流量
+- 按用户分组显示
+- 按订阅统计
+
+## 筛选功能
+
+### 日期筛选
+选择查看指定日期的流量记录,默认今天。
+
+### 服务器ID筛选
+输入服务器ID查看该服务器的流量记录。
+
+## 使用场景
+
+### 场景一: 查看今日流量
+
+1. 默认显示今天的流量记录
+2. 查看各服务器流量消耗
+3. 识别高流量服务器
+4. 分析流量分布
+
+### 场景二: 追踪服务器负载
+
+**查看服务器使用**:
+1. 输入服务器ID筛选
+2. 查看历史流量记录
+3. 分析流量趋势
+4. 评估服务器负载
+
+### 场景三: 排查流量异常
+
+**检查异常消耗**:
+1. 浏览流量记录
+2. 关注异常高流量服务器
+3. 点击"详情"查看明细
+4. 按用户分析流量分布
+5. 检查是否存在滥用
+
+### 场景四: 流量统计分析
+
+**生成报表**:
+1. 选择日期范围
+2. 导出流量数据
+3. 分析流量高峰时段
+4. 优化服务器资源分配
+5. 制定扩容计划
+
+## 流量详情页
+
+点击"详情"后显示:
+
+### 用户流量明细
+- 每个用户的流量消耗
+- 订阅流量统计
+- 连接时长记录
+
+### 节点流量统计
+- 每个节点的流量总计
+- 流量占比分析
+- 用户分布情况
+
+## 流量监控
+
+### 正常模式
+- 流量均匀分布
+- 符合用户数量
+- 波峰波谷规律
+
+### 异常模式
+关注以下异常:
+- 单服务器流量突然激增
+- 流量分布严重不均
+- 异常时间段高流量
+- 单用户流量过高
+
+## 服务器管理
+
+### 负载均衡
+根据流量数据:
+- 识别高负载服务器
+- 分配用户到其他服务器
+- 调整服务器权重
+- 优化节点配置
+
+### 容量规划
+根据流量趋势:
+- 预测流量增长
+- 规划服务器扩容
+- 优化带宽配置
+- 控制运营成本
+
+## 数据分析
+
+### 流量统计
+每日/月统计:
+- 总流量消耗
+- 各服务器占比
+- 流量增长趋势
+- 带宽使用率
+
+### 成本分析
+- 流量成本计算
+- 服务器ROI分析
+- 优化空间识别
+- 成本控制建议
+
+## 重要提示
+
+1. **日志保留**: 根据系统配置保留
+2. **单位换算**: 自动转换为易读单位
+3. **服务器关联**: 可查看单个服务器历史
+4. **详情跳转**: 点击详情查看用户级明细
+5. **实时性**: 流量数据可能有延迟
+6. **总计准确**: 总计包含上传和下载
+7. **定期分析**: 建议每周分析流量趋势
+8. **负载监控**: 关注服务器负载情况
+9. **扩容预警**: 流量接近上限时扩容
+10. **成本优化**: 根据流量数据优化配置
+
+</div>
--- a/docs/zh/admin/logs/subscribe-traffic.md
+++ b/docs/zh/admin/logs/subscribe-traffic.md
@ -0,0 +1,120 @@
+<div v-pre>
+
+# 订阅流量日志
+
+查看用户订阅的每日流量使用统计,支持查看详细流量消费明细。
+
+## 表格列说明
+
+### 用户 (User)
+使用流量的用户(可点击查看详情)。
+
+### 订阅 (Subscribe)
+关联的订阅ID(可点击查看订阅详情,悬停显示卡片)。
+
+### 上传 (Upload)
+当日上传流量,自动转换单位(B/KB/MB/GB/TB)。
+
+### 下载 (Download)
+当日下载流量,自动转换单位。
+
+### 总计 (Total)
+当日总流量(上传+下载)。
+
+### 日期 (Date)
+流量统计日期。
+
+## 表格操作
+
+### 查看详情 (Detail)
+点击"详情"按钮跳转到流量详细记录页面:
+- 查看该日期该订阅的详细流量
+- 按节点分组显示
+- 按服务器统计
+
+## 筛选功能
+
+### 日期筛选
+选择查看指定日期的流量记录,默认今天。
+
+### 用户ID筛选
+输入用户ID查看该用户的流量记录。
+
+### 订阅ID筛选
+输入订阅ID查看该订阅的流量记录。
+
+## 使用场景
+
+### 场景一: 查看今日流量
+
+1. 默认显示今天的流量记录
+2. 查看总流量消耗
+3. 识别高流量用户
+4. 分析流量趋势
+
+### 场景二: 追踪用户流量
+
+**查看用户使用**:
+1. 输入用户ID筛选
+2. 查看所有订阅流量
+3. 分析使用习惯
+4. 预测流量需求
+
+### 场景三: 排查流量异常
+
+**检查异常消耗**:
+1. 浏览流量记录
+2. 关注异常高流量
+3. 点击"详情"查看明细
+4. 按节点分析流量分布
+5. 检查是否存在滥用
+
+### 场景四: 流量统计分析
+
+**生成报表**:
+1. 选择日期范围
+2. 导出流量数据
+3. 分析流量高峰时段
+4. 优化节点资源分配
+
+## 流量详情页
+
+点击"详情"后显示:
+
+### 节点流量明细
+- 每个节点的流量消耗
+- 上传/下载分开统计
+- 连接时长记录
+
+### 服务器流量统计
+- 每台服务器的流量总计
+- 流量占比分析
+- 负载情况评估
+
+## 流量监控
+
+### 异常模式
+关注以下异常:
+- 单日流量突然激增
+- 流量远超套餐限制
+- 异常时间段高流量
+- 单节点流量过高
+
+### 处理措施
+发现异常时:
+1. 查看流量详情
+2. 确认是否滥用
+3. 限速或暂停订阅
+4. 通知用户核实
+
+## 重要提示
+
+1. **日志保留**: 根据系统配置保留时间
+2. **单位换算**: 自动转换为易读单位
+3. **订阅关联**: 可跨查用户的多个订阅
+4. **详情跳转**: 点击详情查看节点级明细
+5. **实时性**: 流量数据可能有延迟
+6. **总计准确**: 总计包含上传和下载
+7. **定期分析**: 建议每周分析流量趋势
+
+</div>
--- a/docs/zh/admin/logs/subscribe.md
+++ b/docs/zh/admin/logs/subscribe.md
@ -0,0 +1,127 @@
+<div v-pre>
+
+# 订阅日志
+
+查看用户订阅链接的请求记录,包含IP、设备和时间信息。
+
+## 表格列说明
+
+### 用户 (User)
+请求订阅的用户(可点击查看详情)。
+
+### 订阅ID (Subscribe)
+请求的订阅ID(可点击查看订阅详情,悬停显示卡片)。
+
+### IP地址 (IP)
+请求IP地址(可点击查看IP信息)。
+
+### User Agent
+客户端设备和系统信息:
+- 鼠标悬停显示完整内容
+- 截断显示避免过长
+
+### 时间 (Time)
+请求时间。
+
+## 筛选功能
+
+### 日期筛选
+选择查看指定日期的订阅记录,默认今天。
+
+### 用户ID筛选
+输入用户ID查看该用户的订阅请求。
+
+### 订阅ID筛选
+输入订阅ID查看该订阅的请求记录。
+
+## 使用场景
+
+### 场景一: 查看今日请求
+
+1. 默认显示今天的订阅记录
+2. 查看请求频率
+3. 分析活跃订阅
+4. 识别异常请求
+
+### 场景二: 追踪用户请求
+
+**查看用户活动**:
+1. 输入用户ID筛选
+2. 查看所有订阅请求
+3. 分析使用频率
+4. 验证设备类型
+
+### 场景三: 排查订阅异常
+
+**检查异常请求**:
+1. 查看订阅日志
+2. 关注IP地址变化
+3. 检查User Agent
+4. 识别可疑设备
+5. 必要时封禁订阅
+
+### 场景四: 分析客户端分布
+
+**统计客户端类型**:
+1. 查看User Agent信息
+2. 统计客户端分布
+3. 了解用户使用习惯
+4. 优化客户端支持
+
+## 订阅请求监控
+
+### 正常模式
+- 定期请求订阅链接
+- 更新节点信息
+- 同步配置变更
+
+### 异常模式
+关注以下异常:
+- 短时间高频请求
+- 同一IP多订阅请求
+- 异常国家/地区访问
+- 陌生客户端类型
+
+## 安全防护
+
+### 检测措施
+- 请求频率限制
+- IP黑白名单
+- 订阅Token验证
+- 设备数量限制
+
+### 处理措施
+发现滥用时:
+1. 限制请求频率
+2. 临时封禁IP
+3. 重置订阅Token
+4. 通知用户确认
+
+## User Agent分析
+
+### 常见客户端
+- **Clash**: Clash for Windows/Mac/Android
+- **Shadowrocket**: iOS客户端
+- **V2rayN**: Windows客户端
+- **Quantumult**: iOS客户端
+- **Surfboard**: Android客户端
+
+### 识别信息
+从User Agent获取:
+- 客户端名称和版本
+- 操作系统类型
+- 设备型号
+- 系统版本
+
+## 重要提示
+
+1. **日志保留**: 根据系统配置保留
+2. **IP追踪**: 可查看IP地理位置
+3. **设备识别**: User Agent包含客户端信息
+4. **请求频率**: 正常客户端定期请求
+5. **异常监控**: 关注高频和异地请求
+6. **隐私保护**: IP和设备信息敏感
+7. **定期分析**: 每周分析订阅请求趋势
+8. **防止泄露**: 订阅链接不应公开分享
+
+</div>
--- a/docs/zh/admin/logs/traffic-details.md
+++ b/docs/zh/admin/logs/traffic-details.md
@ -0,0 +1,172 @@
+<div v-pre>
+
+# 流量详情日志
+
+查看流量消费的详细记录,支持按服务器、用户、订阅多维度筛选。
+
+## 表格列说明
+
+### 服务器 (Server)
+产生流量的服务器:
+- 服务器名称
+- 服务器ID
+
+### 用户 (User)
+使用流量的用户(可点击查看详情)。
+
+### 订阅 (Subscribe)
+关联的订阅ID(可点击查看订阅详情,悬停显示卡片)。
+
+### 上传 (Upload)
+上传流量,自动转换单位(B/KB/MB/GB/TB)。
+
+### 下载 (Download)
+下载流量,自动转换单位。
+
+### 时间 (Time)
+流量产生时间。
+
+## 筛选功能
+
+### 日期筛选
+选择查看指定日期的流量详情,默认今天。
+
+### 服务器ID筛选
+输入服务器ID查看该服务器的流量详情。
+
+### 用户ID筛选
+输入用户ID查看该用户的流量详情。
+
+### 订阅ID筛选
+输入订阅ID查看该订阅的流量详情。
+
+## 使用场景
+
+### 场景一: 查看服务器流量明细
+
+从服务器流量日志点击"详情"进入:
+1. 自动带入日期和服务器ID
+2. 查看该服务器所有用户流量
+3. 按用户排序查看
+4. 识别高流量用户
+
+### 场景二: 查看用户流量详情
+
+从订阅流量日志点击"详情"进入:
+1. 自动带入日期、用户ID和订阅ID
+2. 查看该用户该订阅流量
+3. 按服务器查看分布
+4. 分析使用习惯
+
+### 场景三: 排查流量异常
+
+**详细排查**:
+1. 选择异常日期
+2. 输入相关筛选条件
+3. 查看详细流量记录
+4. 按时间排序分析
+5. 识别异常流量来源
+
+### 场景四: 流量统计分析
+
+**多维度分析**:
+1. 选择时间范围
+2. 组合不同筛选条件
+3. 导出详细数据
+4. 生成流量报表
+5. 制定优化策略
+
+## 数据关联
+
+### 从服务器流量跳转
+- 带入服务器ID和日期
+- 查看该服务器所有流量
+- 可进一步筛选用户
+
+### 从订阅流量跳转
+- 带入用户ID、订阅ID和日期
+- 查看该订阅所有流量
+- 可查看不同服务器
+
+## 流量分析
+
+### 时间分布
+- 查看流量时间分布
+- 识别使用高峰时段
+- 分析用户活跃时间
+- 优化服务器调度
+
+### 服务器分布
+- 统计各服务器流量占比
+- 分析负载分布
+- 识别热门服务器
+- 优化负载均衡
+
+### 用户分布
+- 识别高流量用户
+- 分析用户使用习惯
+- 检查是否存在滥用
+- 优化套餐配置
+
+## 流量监控
+
+### 正常模式
+- 流量均匀分布
+- 时间规律性
+- 符合用户数量
+- 无异常峰值
+
+### 异常模式
+关注以下异常:
+- 单次流量异常大
+- 异常时间段流量
+- 单用户高频请求
+- 流量分布不合理
+
+## 排查步骤
+
+### 发现异常
+1. 从统计日志发现异常
+2. 点击详情进入
+3. 查看详细记录
+
+### 定位问题
+1. 按时间排序
+2. 识别异常记录
+3. 查看用户信息
+4. 确认订阅状态
+
+### 处理措施
+1. 验证是否正常使用
+2. 检查是否滥用
+3. 限速或暂停订阅
+4. 通知用户确认
+
+## 数据导出
+
+### 导出用途
+- 生成流量报表
+- 财务对账
+- 用户分析
+- 容量规划
+
+### 导出内容
+- 所有列数据
+- 筛选后的数据
+- CSV或Excel格式
+- 支持批量导出
+
+## 重要提示
+
+1. **日志保留**: 根据系统配置保留
+2. **单位换算**: 自动转换为易读单位
+3. **多维筛选**: 支持多个条件组合
+4. **跳转带参**: 从统计日志跳转自动带入参数
+5. **实时性**: 流量数据可能有延迟
+6. **详细程度**: 最详细的流量记录
+7. **性能考虑**: 大量数据时注意筛选
+8. **定期清理**: 详情日志占用空间较大
+9. **导出限制**: 单次导出可能有数量限制
+10. **隐私保护**: 详细记录包含用户行为信息
+
+</div>
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" fill="none"><path stroke="url(#a)" stroke-linecap="round" stroke-width="25" d="M162.779 118.828v105.346"/><path fill="url(#b)" fill-rule="evenodd" d="M175.279 38.443v97.01l39.384-16.222c6.384-2.629 13.69.414 16.319 6.797 2.629 6.383-.414 13.689-6.797 16.319l-29.869 12.303 39.758 21.079c6.099 3.234 8.422 10.8 5.188 16.899-3.234 6.099-10.8 8.422-16.899 5.188l-58.083-30.794-24.537 10.107c-.308.127-.617.24-.928.341L32.554 221.278l-17.265 7.118V86.468l-.007-.017 142.683-59.543 17.314-7.226v18.761Zm-39.745 113.338-95.245 39.267v-87.943l109.99-45.9v74.098l-35.34-18.737c-6.1-3.234-13.666-.911-16.9 5.188-3.233 6.1-.91 13.666 5.189 16.899l32.306 17.128Z" clip-rule="evenodd"/><defs><linearGradient id="a" x1="163.279" x2="163.279" y1="118.828" y2="224.174" gradientUnits="userSpaceOnUse"><stop stop-color="#2E58FF"/><stop offset="1" stop-color="#26D0FF"/></linearGradient><linearGradient id="b" x1="128.003" x2="105.241" y1="19.688" y2="214.91" gradientUnits="userSpaceOnUse"><stop stop-color="#02F"/><stop offset=".48" stop-color="#5EE7FF"/><stop offset=".975" stop-color="#FCD8FF"/></linearGradient></defs></svg>