diff --git a/components.d.ts b/components.d.ts
index 5e5f508a..b7c1bf73 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -56,9 +56,13 @@ declare module 'vue' {
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRate: typeof import('element-plus/es')['ElRate']
     ElResult: typeof import('element-plus/es')['ElResult']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
@@ -99,14 +103,18 @@ declare module 'vue' {
     PageMiscGroup: typeof import('./src/components/misc/PageMiscGroup.vue')['default']
     PageMiscSettings: typeof import('./src/components/misc/PageMiscSettings.vue')['default']
     PageResource: typeof import('./src/components/tool/PageResource.vue')['default']
+    PageStore: typeof import('./src/components/mod/PageStore.vue')['default']
     PageStory: typeof import('./src/components/mod/PageStory.vue')['default']
     PageTest: typeof import('./src/components/tool/PageTest.vue')['default']
     ResourceRender: typeof import('./src/components/utils/resource-render.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    StoreElem: typeof import('./src/components/mod/store/StoreElem.vue')['default']
+    StoreRecommendation: typeof import('./src/components/mod/store/StoreRecommendation.vue')['default']
     StoryBackup: typeof import('./src/components/mod/story/StoryBackup.vue')['default']
   }
   export interface ComponentCustomProperties {
+    vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 426163d3..a18fb30c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,12 +19,13 @@
         "element-plus": "^2.7.5",
         "filesize": "^10.1.2",
         "ky": "^0.33.3",
+        "lodash-es": "^4.17.21",
         "ofetch": "^1.3.4",
         "pinia": "^2.1.7",
         "randomcolor": "^0.6.2",
         "vue": "^3.4.27",
         "vue-diff": "^1.2.4",
-        "vue-router": "^4.3.2",
+        "vue-router": "^4.3.3",
         "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
@@ -37,6 +38,7 @@
         "@typescript-eslint/parser": "^6.21.0",
         "@vitejs/plugin-legacy": "^5.4.1",
         "@vitejs/plugin-vue": "^5.0.5",
+        "@vitejs/plugin-vue-jsx": "^4.0.0",
         "@vue/compiler-sfc": "^3.4.27",
         "autoprefixer": "^10.4.19",
         "eslint": "^8.57.0",
@@ -50,7 +52,7 @@
         "unplugin-icons": "^0.17.4",
         "unplugin-vue-components": "^0.26.0",
         "vite": "^5.2.13",
-        "vue-tsc": "^2.0.20"
+        "vue-tsc": "^2.0.21"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -844,6 +846,21 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.7.tgz",
+      "integrity": "sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
@@ -946,6 +963,21 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.7.tgz",
+      "integrity": "sha512-c/+fVeJBB0FeKsFvwytYiUD+LBvhHjGSI0g446PRGdSVGZLRNArBUno2PETbAly3tpiNAQR5XaZ+JslxkotsbA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
@@ -1679,6 +1711,24 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.7.tgz",
+      "integrity": "sha512-iLD3UNkgx2n/HrjBesVbYX6j0yqn/sJktvbtKKgcaLIQ4bTTQ8obAypc1VpyHPD2y4Phh9zHOaAt8e/L14wCpw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-create-class-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-typescript": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-unicode-escapes": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.7.tgz",
@@ -3286,35 +3336,126 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@vitejs/plugin-vue-jsx": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-4.0.0.tgz",
+      "integrity": "sha512-A+6wL2AdQhDsLsDnY+2v4rRDI1HLJGIMc97a8FURO9tqKsH5QvjWrzsa5DH3NlZsM742W2wODl2fF+bfcTWtXw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.24.6",
+        "@babel/plugin-transform-typescript": "^7.24.6",
+        "@vue/babel-plugin-jsx": "^1.2.2"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0",
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@volar/language-core": {
-      "version": "2.3.0-alpha.14",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.3.0-alpha.14.tgz",
-      "integrity": "sha512-80HmdD27fPHs+EB9s5RIdRFdvKil2xXMbsKSPYcPFOLP3iysOJ/i9OKnG83Rhgn6rTLJdfM97WOdx/dsBwJtag==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.3.0.tgz",
+      "integrity": "sha512-pvhL24WUh3VDnv7Yw5N1sjhPtdx7q9g+Wl3tggmnkMcyK8GcCNElF2zHiKznryn0DiUGk+eez/p2qQhz+puuHw==",
       "dev": true,
       "dependencies": {
-        "@volar/source-map": "2.3.0-alpha.14"
+        "@volar/source-map": "2.3.0"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "2.3.0-alpha.14",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.3.0-alpha.14.tgz",
-      "integrity": "sha512-la0CSIfo593WRga2r9STkCtObECX/3xZs4cQKlygU8G13zCtYP8uOQc/jgBQEQK3ne50i7X4Z0ZRLj9ht8+Ppg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.3.0.tgz",
+      "integrity": "sha512-G/228aZjAOGhDjhlyZ++nDbKrS9uk+5DMaEstjvzglaAw7nqtDyhnQAsYzUg6BMP9BtwZ59RIw5HGePrutn00Q==",
       "dev": true,
       "dependencies": {
         "muggle-string": "^0.4.0"
       }
     },
     "node_modules/@volar/typescript": {
-      "version": "2.3.0-alpha.14",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.3.0-alpha.14.tgz",
-      "integrity": "sha512-YnaivvHu/HlVgFRUFPh3X42GXYawSIXPvkIGND/RZXJ1iyrj9CB/UEtsMUV55TOULbfJyc92F2EpOMn/lMyqwA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.3.0.tgz",
+      "integrity": "sha512-PtUwMM87WsKVeLJN33GSTUjBexlKfKgouWlOUIv7pjrOnTwhXHZNSmpc312xgXdTjQPpToK6KXSIcKu9sBQ5LQ==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "2.3.0-alpha.14",
+        "@volar/language-core": "2.3.0",
         "path-browserify": "^1.0.1",
         "vscode-uri": "^3.0.8"
       }
     },
+    "node_modules/@vue/babel-helper-vue-transform-on": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.2.tgz",
+      "integrity": "sha512-nOttamHUR3YzdEqdM/XXDyCSdxMA9VizUKoroLX6yTyRtggzQMHXcmwh8a7ZErcJttIBIc9s68a1B8GZ+Dmvsw==",
+      "dev": true
+    },
+    "node_modules/@vue/babel-plugin-jsx": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.2.2.tgz",
+      "integrity": "sha512-nYTkZUVTu4nhP199UoORePsql0l+wj7v/oyQjtThUVhJl1U+6qHuoVhIvR3bf7eVKjbCK+Cs2AWd7mi9Mpz9rA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "~7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-jsx": "^7.23.3",
+        "@babel/template": "^7.23.9",
+        "@babel/traverse": "^7.23.9",
+        "@babel/types": "^7.23.9",
+        "@vue/babel-helper-vue-transform-on": "1.2.2",
+        "@vue/babel-plugin-resolve-type": "1.2.2",
+        "camelcase": "^6.3.0",
+        "html-tags": "^3.3.1",
+        "svg-tags": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/babel-plugin-jsx/node_modules/@babel/helper-module-imports": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.15"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@vue/babel-plugin-resolve-type": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.2.2.tgz",
+      "integrity": "sha512-EntyroPwNg5IPVdUJupqs0CFzuf6lUrVvCspmv2J1FITLeGnUCuoGNNk78dgCusxEiYj6RMkTJflGSxk5aIC4A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.23.5",
+        "@babel/helper-module-imports": "~7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/parser": "^7.23.9",
+        "@vue/compiler-sfc": "^3.4.15"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@vue/babel-plugin-resolve-type/node_modules/@babel/helper-module-imports": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.15"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.4.27",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.27.tgz",
@@ -3367,12 +3508,12 @@
       "integrity": "sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA=="
     },
     "node_modules/@vue/language-core": {
-      "version": "2.0.20",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.20.tgz",
-      "integrity": "sha512-PudZnVVhZV9++4xndha6K8G1P+pa5WB4H926IK6Pn82EKD+7MEnBJ858t+cI5jpXqx1X/72+NfzRrgsocN5LrA==",
+      "version": "2.0.21",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.21.tgz",
+      "integrity": "sha512-vjs6KwnCK++kIXT+eI63BGpJHfHNVJcUCr3RnvJsccT3vbJnZV5IhHR2puEkoOkIbDdp0Gqi1wEnv3hEd3WsxQ==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "~2.3.0-alpha.14",
+        "@volar/language-core": "~2.3.0-alpha.15",
         "@vue/compiler-dom": "^3.4.0",
         "@vue/shared": "^3.4.0",
         "computeds": "^0.0.1",
@@ -3871,6 +4012,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -4942,6 +5095,18 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/html-tags": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -6572,6 +6737,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-tags": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+      "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
+      "dev": true
+    },
     "node_modules/systemjs": {
       "version": "6.15.1",
       "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.15.1.tgz",
@@ -7314,9 +7485,9 @@
       }
     },
     "node_modules/vue-router": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.2.tgz",
-      "integrity": "sha512-hKQJ1vDAZ5LVkKEnHhmm1f9pMiWIBNGF5AwU67PdH7TyXCj/a4hTccuUuYCAMgJK6rO/NVYtQIEN3yL8CECa7Q==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.3.tgz",
+      "integrity": "sha512-8Q+u+WP4N2SXY38FDcF2H1dUEbYVHVPtPCPZj/GTZx8RCbiB8AtJP9+YIxn4Vs0svMTNQcLIzka4GH7Utkx9xQ==",
       "dependencies": {
         "@vue/devtools-api": "^6.5.1"
       },
@@ -7338,13 +7509,13 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "2.0.20",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.20.tgz",
-      "integrity": "sha512-FlyW/vtf9mfUfOSMnPma2USaWwdZQKCHSTgtJwlt6q471ZaVzx9Wy4UiSCFW4bQHjExMzwmjbCbkYoYdiNFv0w==",
+      "version": "2.0.21",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.21.tgz",
+      "integrity": "sha512-E6x1p1HaHES6Doy8pqtm7kQern79zRtIewkf9fiv7Y43Zo4AFDS5hKi+iHi2RwEhqRmuiwliB1LCEFEGwvxQnw==",
       "dev": true,
       "dependencies": {
-        "@volar/typescript": "~2.3.0-alpha.14",
-        "@vue/language-core": "2.0.20",
+        "@volar/typescript": "~2.3.0-alpha.15",
+        "@vue/language-core": "2.0.21",
         "semver": "^7.5.4"
       },
       "bin": {
@@ -8120,6 +8291,15 @@
         "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
+    "@babel/plugin-syntax-jsx": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.7.tgz",
+      "integrity": "sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      }
+    },
     "@babel/plugin-syntax-logical-assignment-operators": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
@@ -8192,6 +8372,15 @@
         "@babel/helper-plugin-utils": "^7.14.5"
       }
     },
+    "@babel/plugin-syntax-typescript": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.7.tgz",
+      "integrity": "sha512-c/+fVeJBB0FeKsFvwytYiUD+LBvhHjGSI0g446PRGdSVGZLRNArBUno2PETbAly3tpiNAQR5XaZ+JslxkotsbA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      }
+    },
     "@babel/plugin-syntax-unicode-sets-regex": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
@@ -8654,6 +8843,18 @@
         "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
+    "@babel/plugin-transform-typescript": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.7.tgz",
+      "integrity": "sha512-iLD3UNkgx2n/HrjBesVbYX6j0yqn/sJktvbtKKgcaLIQ4bTTQ8obAypc1VpyHPD2y4Phh9zHOaAt8e/L14wCpw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-create-class-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-typescript": "^7.24.7"
+      }
+    },
     "@babel/plugin-transform-unicode-escapes": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.7.tgz",
@@ -9713,35 +9914,106 @@
       "dev": true,
       "requires": {}
     },
+    "@vitejs/plugin-vue-jsx": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-4.0.0.tgz",
+      "integrity": "sha512-A+6wL2AdQhDsLsDnY+2v4rRDI1HLJGIMc97a8FURO9tqKsH5QvjWrzsa5DH3NlZsM742W2wODl2fF+bfcTWtXw==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.24.6",
+        "@babel/plugin-transform-typescript": "^7.24.6",
+        "@vue/babel-plugin-jsx": "^1.2.2"
+      }
+    },
     "@volar/language-core": {
-      "version": "2.3.0-alpha.14",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.3.0-alpha.14.tgz",
-      "integrity": "sha512-80HmdD27fPHs+EB9s5RIdRFdvKil2xXMbsKSPYcPFOLP3iysOJ/i9OKnG83Rhgn6rTLJdfM97WOdx/dsBwJtag==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.3.0.tgz",
+      "integrity": "sha512-pvhL24WUh3VDnv7Yw5N1sjhPtdx7q9g+Wl3tggmnkMcyK8GcCNElF2zHiKznryn0DiUGk+eez/p2qQhz+puuHw==",
       "dev": true,
       "requires": {
-        "@volar/source-map": "2.3.0-alpha.14"
+        "@volar/source-map": "2.3.0"
       }
     },
     "@volar/source-map": {
-      "version": "2.3.0-alpha.14",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.3.0-alpha.14.tgz",
-      "integrity": "sha512-la0CSIfo593WRga2r9STkCtObECX/3xZs4cQKlygU8G13zCtYP8uOQc/jgBQEQK3ne50i7X4Z0ZRLj9ht8+Ppg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.3.0.tgz",
+      "integrity": "sha512-G/228aZjAOGhDjhlyZ++nDbKrS9uk+5DMaEstjvzglaAw7nqtDyhnQAsYzUg6BMP9BtwZ59RIw5HGePrutn00Q==",
       "dev": true,
       "requires": {
         "muggle-string": "^0.4.0"
       }
     },
     "@volar/typescript": {
-      "version": "2.3.0-alpha.14",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.3.0-alpha.14.tgz",
-      "integrity": "sha512-YnaivvHu/HlVgFRUFPh3X42GXYawSIXPvkIGND/RZXJ1iyrj9CB/UEtsMUV55TOULbfJyc92F2EpOMn/lMyqwA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.3.0.tgz",
+      "integrity": "sha512-PtUwMM87WsKVeLJN33GSTUjBexlKfKgouWlOUIv7pjrOnTwhXHZNSmpc312xgXdTjQPpToK6KXSIcKu9sBQ5LQ==",
       "dev": true,
       "requires": {
-        "@volar/language-core": "2.3.0-alpha.14",
+        "@volar/language-core": "2.3.0",
         "path-browserify": "^1.0.1",
         "vscode-uri": "^3.0.8"
       }
     },
+    "@vue/babel-helper-vue-transform-on": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.2.tgz",
+      "integrity": "sha512-nOttamHUR3YzdEqdM/XXDyCSdxMA9VizUKoroLX6yTyRtggzQMHXcmwh8a7ZErcJttIBIc9s68a1B8GZ+Dmvsw==",
+      "dev": true
+    },
+    "@vue/babel-plugin-jsx": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.2.2.tgz",
+      "integrity": "sha512-nYTkZUVTu4nhP199UoORePsql0l+wj7v/oyQjtThUVhJl1U+6qHuoVhIvR3bf7eVKjbCK+Cs2AWd7mi9Mpz9rA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "~7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-jsx": "^7.23.3",
+        "@babel/template": "^7.23.9",
+        "@babel/traverse": "^7.23.9",
+        "@babel/types": "^7.23.9",
+        "@vue/babel-helper-vue-transform-on": "1.2.2",
+        "@vue/babel-plugin-resolve-type": "1.2.2",
+        "camelcase": "^6.3.0",
+        "html-tags": "^3.3.1",
+        "svg-tags": "^1.0.0"
+      },
+      "dependencies": {
+        "@babel/helper-module-imports": {
+          "version": "7.22.15",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+          "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.15"
+          }
+        }
+      }
+    },
+    "@vue/babel-plugin-resolve-type": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.2.2.tgz",
+      "integrity": "sha512-EntyroPwNg5IPVdUJupqs0CFzuf6lUrVvCspmv2J1FITLeGnUCuoGNNk78dgCusxEiYj6RMkTJflGSxk5aIC4A==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.23.5",
+        "@babel/helper-module-imports": "~7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/parser": "^7.23.9",
+        "@vue/compiler-sfc": "^3.4.15"
+      },
+      "dependencies": {
+        "@babel/helper-module-imports": {
+          "version": "7.22.15",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+          "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.22.15"
+          }
+        }
+      }
+    },
     "@vue/compiler-core": {
       "version": "3.4.27",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.27.tgz",
@@ -9794,12 +10066,12 @@
       "integrity": "sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA=="
     },
     "@vue/language-core": {
-      "version": "2.0.20",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.20.tgz",
-      "integrity": "sha512-PudZnVVhZV9++4xndha6K8G1P+pa5WB4H926IK6Pn82EKD+7MEnBJ858t+cI5jpXqx1X/72+NfzRrgsocN5LrA==",
+      "version": "2.0.21",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.21.tgz",
+      "integrity": "sha512-vjs6KwnCK++kIXT+eI63BGpJHfHNVJcUCr3RnvJsccT3vbJnZV5IhHR2puEkoOkIbDdp0Gqi1wEnv3hEd3WsxQ==",
       "dev": true,
       "requires": {
-        "@volar/language-core": "~2.3.0-alpha.14",
+        "@volar/language-core": "~2.3.0-alpha.15",
         "@vue/compiler-dom": "^3.4.0",
         "@vue/shared": "^3.4.0",
         "computeds": "^0.0.1",
@@ -10139,6 +10411,12 @@
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
       "dev": true
     },
+    "camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true
+    },
     "camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -10912,6 +11190,12 @@
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
       "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw=="
     },
+    "html-tags": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+      "dev": true
+    },
     "human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -12048,6 +12332,12 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "svg-tags": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+      "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
+      "dev": true
+    },
     "systemjs": {
       "version": "6.15.1",
       "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.15.1.tgz",
@@ -12512,9 +12802,9 @@
       }
     },
     "vue-router": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.2.tgz",
-      "integrity": "sha512-hKQJ1vDAZ5LVkKEnHhmm1f9pMiWIBNGF5AwU67PdH7TyXCj/a4hTccuUuYCAMgJK6rO/NVYtQIEN3yL8CECa7Q==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.3.tgz",
+      "integrity": "sha512-8Q+u+WP4N2SXY38FDcF2H1dUEbYVHVPtPCPZj/GTZx8RCbiB8AtJP9+YIxn4Vs0svMTNQcLIzka4GH7Utkx9xQ==",
       "requires": {
         "@vue/devtools-api": "^6.5.1"
       }
@@ -12530,13 +12820,13 @@
       }
     },
     "vue-tsc": {
-      "version": "2.0.20",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.20.tgz",
-      "integrity": "sha512-FlyW/vtf9mfUfOSMnPma2USaWwdZQKCHSTgtJwlt6q471ZaVzx9Wy4UiSCFW4bQHjExMzwmjbCbkYoYdiNFv0w==",
+      "version": "2.0.21",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.21.tgz",
+      "integrity": "sha512-E6x1p1HaHES6Doy8pqtm7kQern79zRtIewkf9fiv7Y43Zo4AFDS5hKi+iHi2RwEhqRmuiwliB1LCEFEGwvxQnw==",
       "dev": true,
       "requires": {
-        "@volar/typescript": "~2.3.0-alpha.14",
-        "@vue/language-core": "2.0.20",
+        "@volar/typescript": "~2.3.0-alpha.15",
+        "@vue/language-core": "2.0.21",
         "semver": "^7.5.4"
       }
     },
diff --git a/package.json b/package.json
index d2db31a6..f895a282 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,6 @@
   "type": "module",
   "dependencies": {
     "@codemirror/lang-javascript": "^6.2.2",
-    "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vueuse/core": "^10.10.0",
     "asmcrypto.js": "^2.3.2",
     "axios": "^1.7.2",
@@ -24,12 +23,13 @@
     "element-plus": "^2.7.5",
     "filesize": "^10.1.2",
     "ky": "^0.33.3",
+    "lodash-es": "^4.17.21",
     "ofetch": "^1.3.4",
     "pinia": "^2.1.7",
     "randomcolor": "^0.6.2",
     "vue": "^3.4.27",
     "vue-diff": "^1.2.4",
-    "vue-router": "^4.3.2",
+    "vue-router": "^4.3.3",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
@@ -42,6 +42,7 @@
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-legacy": "^5.4.1",
     "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vue/compiler-sfc": "^3.4.27",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
@@ -55,6 +56,6 @@
     "unplugin-icons": "^0.17.4",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.2.13",
-    "vue-tsc": "^2.0.20"
+    "vue-tsc": "^2.0.21"
   }
 }
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 05e50278..12bb91e3 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -62,6 +62,10 @@
       <el-menu-item index="/mod/censor">
         <span>拦截管理</span>
       </el-menu-item>
+
+      <el-menu-item index="/mod/store">
+        <span>扩展商店</span>
+      </el-menu-item>
     </el-sub-menu>
 
     <el-sub-menu index="/misc">
diff --git a/src/components/misc/PageMiscAdvancedSettings.vue b/src/components/misc/PageMiscAdvancedSettings.vue
index 0496ed38..dc8b95f6 100644
--- a/src/components/misc/PageMiscAdvancedSettings.vue
+++ b/src/components/misc/PageMiscAdvancedSettings.vue
@@ -77,6 +77,19 @@
       <el-input v-model="config.storyLogBackendToken" style="width: 30rem"/>
     </el-form-item>
 
+    <h3>扩展商店</h3>
+    <el-form-item label="自定义后端 URL">
+      <template #label>
+        <span>自定义后端 URL</span>
+        <el-tooltip raw-content content="设置第三方扩展商店后端 URL">
+          <el-icon>
+            <question-filled/>
+          </el-icon>
+        </el-tooltip>
+      </template>
+      <el-input v-model="config.storeBackendUrl" style="width: 30rem"/>
+    </el-form-item>
+
     <el-form-item label="" label-width="1rem" style="margin-top: 3rem;" v-if="modified">
       <el-button type="danger" @click="submitGiveup">放弃改动</el-button>
       <el-button type="success" @click="submit">保存设置</el-button>
@@ -100,11 +113,12 @@ const config = ref<AdvancedConfig>({
   storyLogBackendUrl: "",
   storyLogApiVersion: "",
   storyLogBackendToken: "",
+  storeBackendUrl: "",
 })
 
 onBeforeMount(async () => {
   config.value = await store.diceAdvancedConfigGet()
-  nextTick(() => {
+  await nextTick(() => {
     modified.value = false
   })
 })
@@ -121,7 +135,7 @@ const submit = async () => {
   config.value = await store.diceAdvancedConfigGet()
   modified.value = false
   emit('update:advanced-settings-show', config.value.show)
-  nextTick(async () => {
+  await nextTick(async () => {
     modified.value = false
   })
 }
@@ -129,7 +143,7 @@ const submit = async () => {
 const submitGiveup = async () => {
   config.value = await store.diceAdvancedConfigGet()
   modified.value = false
-  nextTick(() => {
+  await nextTick(() => {
     modified.value = false
   })
 }
diff --git a/src/components/mod/PageMiscDeck.vue b/src/components/mod/PageMiscDeck.vue
index 0b88ef9d..f45e198d 100644
--- a/src/components/mod/PageMiscDeck.vue
+++ b/src/components/mod/PageMiscDeck.vue
@@ -64,10 +64,6 @@
                 <el-icon><MostlyCloudy /></el-icon>
                 作者提供云端内容，请自行鉴别安全性
               </el-text>
-              <el-text v-if="i.fileFormat === 'jsonc'" type="warning" size="small">
-                <el-icon><Warning /></el-icon>
-                注意：该牌堆的格式并非标准 JSON ，而是允许尾逗号与注释语法的扩展 JSON
-              </el-text>
             </el-space>
           </template>
 
diff --git a/src/components/mod/PageStore.vue b/src/components/mod/PageStore.vue
new file mode 100644
index 00000000..a7203185
--- /dev/null
+++ b/src/components/mod/PageStore.vue
@@ -0,0 +1,218 @@
+<template>
+  <el-tabs v-model="tab" stretch>
+    <el-tab-pane
+        v-for="{name, label} in tabs"
+        :label="label" :name="name"
+        v-infinite-scroll="loadElems" :infinite-scroll-delay="500" :infinite-scroll-disabled="!query.next">
+
+      <template v-if="recommendations.length > 0">
+        <h4>推荐{{ label }}</h4>
+
+        <el-skeleton class="w-full" :loading="recommendLoading" animated :count="5">
+          <template #template>
+            <el-skeleton-item variant="text" class="w-full"/>
+          </template>
+
+          <el-scrollbar noresize>
+            <div class="flex flex-row overflow-x-auto gap-x-4">
+              <store-recommendation class="flex-shrink-0 my-4 w-48 border-l pl-4 first:border-0 first:pl-0"
+                                    v-for="r in recommendations" v-bind="r" :key="r.id"
+                                    @downloaded="(id: string) => installed(id)"/>
+            </div>
+          </el-scrollbar>
+        </el-skeleton>
+
+        <el-divider/>
+      </template>
+
+      <h4>全部{{ label }}</h4>
+      <header class="flex justify-between items-center">
+        <el-form class="items-center" :inline="true">
+          <el-form-item :label="label + '名'">
+            <el-input v-model="query.name" clearable @change="resetElemData"/>
+          </el-form-item>
+          <el-form-item label="排序">
+            <el-radio-group size="small" v-model="query.sortBy" @change="resetElemData">
+              <el-radio-button value="downloadNum">按下载数</el-radio-button>
+              <el-radio-button value="updateTime">按更新时间</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item>
+            <el-radio-group size="small" v-model="query.order" @change="resetElemData">
+              <el-radio-button value="asc">
+                <el-icon>
+                  <ArrowUp/>
+                </el-icon>
+              </el-radio-button>
+              <el-radio-button value="desc">
+                <el-icon>
+                  <ArrowDown/>
+                </el-icon>
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+      </header>
+      <main class="list-main">
+        <store-elem v-for="(d, i) in data" v-bind="{...d, index: i}"
+                    @downloaded="(id: string) => installed(id)"/>
+        <el-skeleton :loading="dataLoading" animated :rows="3" :count="5">
+          <template #template>
+            <div class="flex flex-col bg-white border rounded-md mb-8 px-3 pt-3 pb-1.5 gap-y-1">
+              <div class="flex flex-row justify-between">
+                <el-skeleton-item variant="p" class="w-1/3"/>
+                <el-skeleton-item variant="p" class="w-1/5"/>
+              </div>
+              <div class="mt-2">
+                <el-skeleton-item variant="text"/>
+                <el-skeleton-item variant="text"/>
+              </div>
+              <div class="mt-1.5 pt-1 border-t">
+                <el-skeleton-item variant="text"/>
+              </div>
+            </div>
+          </template>
+          <template #default>
+            <el-divider class="bottom-line">
+              <el-text>没有了捏~</el-text>
+            </el-divider>
+          </template>
+        </el-skeleton>
+      </main>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script lang="ts" setup>
+import {useStore} from "~/store";
+import type {StoreElem, StoreElemType} from "~/type";
+import {ArrowDown, ArrowUp} from "@element-plus/icons-vue";
+import {ElMessage} from "element-plus";
+import {debounce} from "lodash-es";
+
+const tabs = [
+  {name: 'deck', label: '牌堆'},
+  {name: 'plugin', label: '插件'},
+  // {name: 'reply', label: '自定义回复'},
+]
+
+const store = useStore()
+
+const recommendations = ref<StoreElem[]>([])
+const data = ref<StoreElem[]>([])
+
+const query = ref<{
+  pageNum: number;
+  pageSize: number;
+  author: string;
+  name: string;
+  sortBy: 'downloadNum' | 'updateTime';
+  order: 'asc' | 'desc';
+  next: boolean
+}>({
+  pageNum: 1,
+  pageSize: 5,
+  author: '',
+  name: '',
+  sortBy: 'downloadNum',
+  order: 'desc',
+  next: true
+})
+
+const tab = ref<StoreElemType>("deck")
+const recommendLoading = ref(true)
+const dataLoading = ref(true)
+
+const refreshRecommend = async () => {
+  recommendations.value = []
+  const resp = await store.storeRecommend({type: tab.value})
+  if (resp?.result) {
+    recommendLoading.value = true
+    recommendations.value = resp.data
+    setTimeout(() => {
+      recommendLoading.value = false
+    }, 500)
+  }
+}
+
+const resetElemData = async () => {
+  console.log('resetElemData')
+  query.value.pageNum = 1
+  query.value.pageSize = 5
+  query.value.next = true
+  data.value = []
+  await loadElems()
+}
+
+const loadElems = debounce(async () => {
+  if (!query.value.next) return
+  dataLoading.value = true
+  const resp = await store.storePage({
+    type: tab.value,
+    ...query.value,
+    pageNum: query.value.pageNum
+  })
+  if (resp?.result) {
+    data.value = data.value.concat(resp.data)
+    query.value.pageNum++
+    query.value.next = resp.next
+  } else {
+    ElMessage.error('无法获取插件商店列表')
+  }
+  setTimeout(() => {
+    dataLoading.value = false
+  }, 500)
+}, 300)
+
+const installed = async (id: string) => {
+  for (let elem of data.value) {
+    if (elem.id === id) {
+      elem.installed = true
+    }
+  }
+  for (let recommendation of recommendations.value) {
+    if (recommendation.id === id) {
+      recommendation.installed = true
+    }
+  }
+}
+
+watch(tab, async () => {
+  query.value = {
+    pageNum: 1,
+    pageSize: 5,
+    author: '',
+    name: '',
+    sortBy: 'downloadNum',
+    order: 'desc',
+    next: true
+  }
+  data.value = []
+  await resetElemData()
+  await refreshRecommend()
+})
+
+onBeforeMount(async () => {
+  query.value.pageNum = 1
+  query.value.pageSize = 5
+  data.value = []
+  await resetElemData()
+  await refreshRecommend()
+})
+
+</script>
+
+<style lang="scss">
+.list-main {
+  margin: 1rem 0 2rem 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+}
+
+.bottom-line {
+  .el-divider__text {
+    background-color: #f3f5f7;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/mod/store/StoreElem.vue b/src/components/mod/store/StoreElem.vue
new file mode 100644
index 00000000..d0676207
--- /dev/null
+++ b/src/components/mod/store/StoreElem.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type {StoreElem} from "~/type"
+import {Download} from "@element-plus/icons-vue";
+import * as dayjs from "dayjs";
+import {useStore} from "~/store";
+
+interface StoreElemProps extends StoreElem {
+  index: number
+}
+
+const props = defineProps<StoreElemProps>();
+const emits = defineEmits(['downloaded']);
+
+const store = useStore()
+
+const getAuthor = (authors: string[]) => {
+  if (authors.length <= 2) {
+    return authors.join('、')
+  }
+  return authors.slice(0, 2).join('、') + '等'
+}
+
+const downloading = ref(false)
+const download = async () => {
+  downloading.value = true
+  const response = await store.storeDownload(props)
+  if (response.result) {
+    emits('downloaded', props.id)
+    ElMessage.success("下载成功，已自动重载！")
+  } else {
+    ElMessage.error(`下载失败！${response.err ?? ''}`)
+  }
+  downloading.value = false
+}
+
+const rate = ref<number>(props.rate ?? 0)
+const rating = async () => {
+  const response = await store.storeRating({id: props.id, rate: rate.value})
+  if (response.result) {
+    ElMessage.success("评分成功！")
+  } else {
+    ElMessage.error(`评分失败！${response.err ?? ''}`)
+  }
+}
+</script>
+
+<template>
+  <div
+      class="elem w-full flex flex-col bg-white border rounded-md px-3 pt-2 pb-1.5 hover:shadow-md transition duration-500">
+    <header class="elem-header flex flex-row justify-between">
+      <div class="flex items-center gap-x-2 flex-wrap">
+        <div class="flex items-center gap-x-1">
+          <span class="text-wrap text-sm text-gray-500">#{{ props.index + 1 }}</span>
+          <span class="text-wrap text-base font-bold">{{ props.name }}</span>
+          <template v-if="props.type === 'deck'">
+            <el-tag size="small" :type="props.ext === '.toml' ? 'success' : 'primary'" disable-transitions>
+              {{ props.ext.substring(1) }}
+            </el-tag>
+          </template>
+        </div>
+        <el-tag size="small" type="info" disable-transitions>{{ props.version }}</el-tag>
+      </div>
+
+      <aside class="flex flex-wrap items-center justify-center gap-x-2">
+        <span v-if="props.downloadNum" class="flex items-center text-xs text-blue-500">
+          <el-icon><Download/></el-icon>{{
+            props.downloadNum > 1000 ? (props.downloadNum / 1000).toFixed(1) + 'k' : props.downloadNum
+          }}
+        </span>
+        <span v-else/>
+        <el-button v-if="!props.installed" :icon="Download" type="success" size="small" plain
+                   @click="download" :loading="downloading">下载
+        </el-button>
+        <el-button v-else disabled :icon="Download" type="info" size="small" plain>
+          已下载
+        </el-button>
+      </aside>
+    </header>
+
+    <aside class="mt-1 elem-extra flex flex-row justify-between items-center">
+      <div class="text-xs text-gray-500">
+        <div class="flex flex-wrap gap-x-2 gap-y-0.5">
+          <el-tag size="small" type="primary" disable-transitions
+                  v-for="tag in props.tags" :key="tag">{{ tag }}
+          </el-tag>
+        </div>
+      </div>
+      <el-rate class="ml-2" v-if="props.rate" v-model="rate" :disabled="!props.installed" @change="rating"/>
+    </aside>
+
+    <main class="mt-2 my-4 whitespace-pre-line text-sm text-gray-500 line-clamp-3">
+      <span>{{ props.desc }}</span>
+    </main>
+
+    <footer class="py-1 border-t flex justify-between flex-row-reverse flex-wrap text-gray-500 text-xs italic">
+      <div class="ml-auto flex gap-x-1 before:content-['>']">
+        <span>{{ getAuthor(props.authors) || '&lt;佚名>' }}</span>
+        <span>以 {{ props.license }} 协议发布</span>
+      </div>
+      <div class="flex">
+        <span>发布于 {{ dayjs.unix(props.releaseTime).format('YYYY-MM-DD HH:MM') }}</span>
+        <span class="ml-2" v-if="props.updateTime && props.updateTime !== 0">最近更新于 {{
+            dayjs.unix(props.updateTime).format('YYYY-MM-DD HH:MM')
+          }}</span>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<style lang="scss">
+</style>
diff --git a/src/components/mod/store/StoreRecommendation.vue b/src/components/mod/store/StoreRecommendation.vue
new file mode 100644
index 00000000..c63fb737
--- /dev/null
+++ b/src/components/mod/store/StoreRecommendation.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type {StoreElem} from "~/type";
+import {Download} from "@element-plus/icons-vue";
+import {useStore} from "~/store";
+
+const props = defineProps<StoreElem>();
+const emits = defineEmits(['downloaded']);
+
+const store = useStore()
+
+const getAuthor = (authors: string[]) => {
+  if (authors.length <= 2) {
+    return authors.join('、')
+  }
+  return authors.slice(0, 2).join('、') + '等'
+}
+
+const downloading = ref(false)
+const download = async () => {
+  downloading.value = true
+  const response = await store.storeDownload(props)
+  if (response.result) {
+    emits('downloaded', props.id)
+    ElMessage.success("下载成功，已自动重载！")
+  } else {
+    ElMessage.error(`下载失败！${response.err ?? ''}`)
+  }
+  downloading.value = false
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <header class="flex flex-col gap-y-0.5">
+      <div class="flex justify-between items-center">
+        <span class="text-base font-bold">{{ props.name }}</span>
+        <el-tag type="info" disable-transitions>{{ props.version }}</el-tag>
+      </div>
+
+      <aside class="flex flex-wrap gap-x-2 gap-y-0.5">
+        <el-tag size="small" type="primary" disable-transitions
+                v-for="tag in props?.tags?.slice(0, 3) ?? []" :key="tag">{{ tag }}
+        </el-tag>
+      </aside>
+
+      <aside class="flex justify-end flex-row text-gray-500 text-xs">
+        <div class="ml-auto flex gap-x-1 italic before:content-['by']">
+          <span>{{ getAuthor(props.authors) || '&lt;佚名>' }}</span>
+        </div>
+      </aside>
+    </header>
+
+    <main class="flex-1 whitespace-pre-line text-sm text-gray-500 line-clamp-3">
+      <span>{{ props.desc }}</span>
+    </main>
+
+    <footer class="flex justify-between items-center">
+      <span v-if="props.downloadNum" class="flex items-center text-xs text-blue-500">
+        <el-icon><Download/></el-icon>{{
+          props.downloadNum > 1000 ? (props.downloadNum / 1000).toFixed(1) + 'k' : props.downloadNum
+        }}
+      </span>
+      <span v-else/>
+      <el-button v-if="!props.installed" :icon="Download" type="success" size="small" plain
+                 @click="download" :loading="downloading">下载
+      </el-button>
+      <el-button v-else disabled :icon="Download" type="info" size="small" plain>
+        已下载
+      </el-button>
+    </footer>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 06af1479..9cf78ec0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -16,6 +16,7 @@ import PageMiscBackup from '~/components/misc/PageMiscBackup.vue';
 import PageMiscGroup from '~/components/misc/PageMiscGroup.vue';
 import PageMiscBanList from '~/components/misc/PageMiscBanList.vue';
 import PageMiscAdvancedSettings from '~/components/misc/PageMiscAdvancedSettings.vue';
+import PageStore from "~/components/mod/PageStore.vue";
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -32,6 +33,7 @@ const router = createRouter({
         { path: 'helpdoc', component: PageHelpDoc },
         { path: 'story', component: PageStory },
         { path: 'censor', component: PageCensor },
+        { path: 'store', component: PageStore },
       ]
     },
     {
diff --git a/src/store/index.ts b/src/store/index.ts
index 4b296b05..b3b8f33e 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -7,6 +7,8 @@ import type {
   HelpTextItem,
   HelpTextItemQuery,
   JsScriptInfo,
+  StoreElem,
+  StoreElemType,
 } from "~/type";
 
 export enum goCqHttpStateCode {
@@ -852,6 +854,47 @@ export const useStore = defineStore('main', {
         responseType: "blob",
       })
       return response as unknown as Blob;
-    }
+    },
+
+    async storeRecommend(params: {type: StoreElemType}) {
+      const info : {result: false, err?: string} | {
+        result: true,
+        data: StoreElem[],
+      } = await backend.get(urlPrefix + '/store/recommend', {params})
+      return info
+    },
+
+    async storePage(params: {
+      type: StoreElemType,
+      pageNum: number,
+      pageSize: number,
+      author: string,
+      name: string,
+      sortBy: 'downloadNum' | 'updateTime',
+      order: 'asc' | 'desc',
+    }) {
+      const info : {result: false, err?: string} | {
+        result: true,
+        data: StoreElem[],
+        pageNum: number,
+        pageSize: number,
+        next: boolean,
+      } = await backend.get(urlPrefix + '/store/page', {params})
+      return info
+    },
+
+    async storeDownload(params: StoreElem) {
+      const info : {result: false, err?: string} | {
+        result: true,
+      } = await backend.post(urlPrefix + '/store/download', params)
+      return info
+    },
+
+    async storeRating(params: {id: string, rate: number}) {
+      const info : {result: false, err?: string} | {
+        result: true,
+      } = await backend.post(urlPrefix + '/store/rating', params)
+      return info
+    },
   }
 })
diff --git a/src/type.d.ts b/src/type.d.ts
index e5d84917..e08a6717 100644
--- a/src/type.d.ts
+++ b/src/type.d.ts
@@ -79,4 +79,33 @@ export interface AdvancedConfig {
   storyLogBackendUrl: string,
   storyLogApiVersion: string,
   storyLogBackendToken: string,
-}
\ No newline at end of file
+  storeBackendUrl: string,
+}
+
+export type StoreElemType = 'plugin' | 'deck' // | 'reply' | 'helpdoc'
+
+export interface StoreElem {
+  id: string
+  installed: boolean
+
+  source: 'official' | string
+  type: StoreElemType
+  ext: '.js' | '.toml' | '.json' | '.jsonc' | '.yaml' | '.xlsx' | string
+
+  name: string
+  version: string
+  authors: string[]
+  desc: string
+  license: string
+  releaseTime: number
+  updateTime?: number
+  tags?: string[]
+  rate?: number
+  extra?: Map<string, string>
+  downloadNum?: number,
+  downloadUrl: string,
+  hash?: Map<string, string>
+  homePage?: string
+  sealVersion?: string
+  dependencies?: Map<string, string>
+}