feat:保存；列表；菜单；todo：card点击回显等

package-lock.json

@@ -11,10 +11,12 @@
         "@codesandbox/sandpack-themes": "^2.0.21",
         "@vicons/ionicons5": "^0.12.0",
         "@vueuse/core": "^12.0.0",
+        "axios": "^1.7.9",
         "naive-ui": "^2.40.3",
         "pinia": "^2.2.6",
         "sandpack-vue3": "^3.1.12",
         "vue": "^3.5.13",
+        "vue-hooks-plus": "^2.2.1",
         "vue-router": "^4.4.5"
       },
       "devDependencies": {
@@ -22,6 +24,7 @@
         "@types/node": "^22.9.3",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vitejs/plugin-vue-jsx": "^4.1.1",
+        "@vue-hooks-plus/resolvers": "^1.2.5",
         "@vue/eslint-config-prettier": "^10.1.0",
         "@vue/eslint-config-typescript": "^14.1.3",
         "@vue/tsconfig": "^0.7.0",
@@ -2189,6 +2192,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmmirror.com/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -2525,6 +2534,35 @@
         "vscode-uri": "^3.0.8"
       }
     },
+    "node_modules/@vue-hooks-plus/resolvers": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmmirror.com/@vue-hooks-plus/resolvers/-/resolvers-1.2.5.tgz",
+      "integrity": "sha512-pJJ4UTRTIbqtKCiti5rHOV1G/ZmJLwZSpQc5LmUWCbjnYuSVeYzWJfG5zGrZ3IcX6mCBxOSrsmnG/yuYZkXcRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "local-pkg": "^0.4.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "vue-hooks-plus": ">=1.5.2"
+      }
+    },
+    "node_modules/@vue-hooks-plus/resolvers/node_modules/local-pkg": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.3.tgz",
+      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@vue/babel-helper-vue-transform-on": {
       "version": "1.2.5",
       "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.5.tgz",
@@ -3025,6 +3063,12 @@
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -3063,6 +3107,17 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3216,6 +3271,37 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz",
+      "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz",
@@ -3316,6 +3402,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-4.1.1.tgz",
@@ -3463,6 +3561,15 @@
         }
       }
     },
+    "node_modules/decode-uri-component": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmmirror.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz",
@@ -3500,6 +3607,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/define-lazy-prop": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
@@ -3513,6 +3637,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/dequal/-/dequal-2.0.3.tgz",
@@ -3562,6 +3695,20 @@
         "url": "https://dotenvx.com"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.0.tgz",
+      "integrity": "sha512-9+Sj30DIu+4KvHqMfLUGLFYL2PkURSYMVXJyXe92nFRvlYq5hBjLEhblKB+vkd/WVlUYMWigiY07T91Fkk0+4A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -3605,6 +3752,24 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.24.0",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.24.0.tgz",
@@ -4123,6 +4288,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/find-up/-/find-up-5.0.0.tgz",
@@ -4161,6 +4335,26 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.3.0.tgz",
@@ -4178,6 +4372,20 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -4226,7 +4434,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4242,6 +4449,28 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.5.tgz",
+      "integrity": "sha512-Y4+pKa7XeRUPWFNvOOYHkRYrfzW07oraURSvjDmRVOJ748OrVmeXtpE4+GCEHncjCjkTxPNRt8kEbxDhsn6VTg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "dunder-proto": "^1.0.0",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/get-stream": {
       "version": "9.0.1",
       "resolved": "https://registry.npmmirror.com/get-stream/-/get-stream-9.0.1.tgz",
@@ -4303,6 +4532,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -4327,11 +4568,34 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -4661,6 +4925,15 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4924,6 +5197,27 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.5.tgz",
@@ -5235,6 +5529,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/object-inspect": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.3.tgz",
+      "integrity": "sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/open": {
       "version": "10.1.0",
       "resolved": "https://registry.npmmirror.com/open/-/open-10.1.0.tgz",
@@ -5705,6 +6011,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
@@ -5715,6 +6027,39 @@
         "node": ">=6"
       }
     },
+    "node_modules/qs": {
+      "version": "6.13.1",
+      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.13.1.tgz",
+      "integrity": "sha512-EJPeIn0CYrGu+hli1xilKAPXODtJ12T0sP63Ijx2/khC2JtuaN3JyNIpvmnkmaEtha9ocbG4A4cMcr+TvqvwQg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/query-string": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmmirror.com/query-string/-/query-string-7.1.3.tgz",
+      "integrity": "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==",
+      "license": "MIT",
+      "dependencies": {
+        "decode-uri-component": "^0.2.2",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5953,6 +6298,18 @@
         "@parcel/watcher": "^2.4.1"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/scule": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
@@ -5976,6 +6333,23 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6012,6 +6386,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/side-channel": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/signal-exit": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-4.1.0.tgz",
@@ -6059,6 +6451,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/static-browser-server": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/static-browser-server/-/static-browser-server-1.0.3.tgz",
@@ -6077,6 +6478,15 @@
       "integrity": "sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==",
       "license": "MIT"
     },
+    "node_modules/strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/string-width/-/string-width-5.1.2.tgz",
@@ -7188,6 +7598,24 @@
         "node": ">=10"
       }
     },
+    "node_modules/vue-hooks-plus": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/vue-hooks-plus/-/vue-hooks-plus-2.2.1.tgz",
+      "integrity": "sha512-YfZ+xwzeoTXpuXrCwu4zOe2kmc3hcOxD3eY9eoc5r+T8grCMQl25li0W9o8uY1/UA75sgLcE6B7KfKd2e3OURg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/js-cookie": "^3.0.1",
+        "@vue/devtools-api": "^6.5.0",
+        "js-cookie": "^3.0.1",
+        "lodash": "^4.17.21",
+        "qs": "^6.11.0",
+        "query-string": "^7.1.1",
+        "screenfull": "^5.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.25"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.0.tgz",

package.json

@@ -16,10 +16,12 @@
     "@codesandbox/sandpack-themes": "^2.0.21",
     "@vicons/ionicons5": "^0.12.0",
     "@vueuse/core": "^12.0.0",
+    "axios": "^1.7.9",
     "naive-ui": "^2.40.3",
     "pinia": "^2.2.6",
     "sandpack-vue3": "^3.1.12",
     "vue": "^3.5.13",
+    "vue-hooks-plus": "^2.2.1",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
@@ -27,6 +29,7 @@
     "@types/node": "^22.9.3",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vue-hooks-plus/resolvers": "^1.2.5",
     "@vue/eslint-config-prettier": "^10.1.0",
     "@vue/eslint-config-typescript": "^14.1.3",
     "@vue/tsconfig": "^0.7.0",

src/App.vue

@@ -6,7 +6,6 @@ import { zhCN, dateZhCN } from 'naive-ui'
 
 <template>
   <n-config-provider
-    :theme-overrides="themeOverrides"
     class="h-full w-full"
     :locale="zhCN"
     :date-locale="dateZhCN"

src/api/axios.ts

@@ -0,0 +1,52 @@
+import axios from 'axios'
+import type { AxiosRequestConfig } from 'axios'
+// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
+
+const axiosInstance = axios.create({
+  baseURL: '/api',
+  timeout: 10000,
+})
+
+axiosInstance.interceptors.request.use(
+  (config) => {
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  },
+)
+
+axiosInstance.interceptors.response.use(
+  (response) => {
+    if (response?.status === 200) {
+      return Promise.resolve(response.data)
+    } else {
+      return Promise.reject(response)
+    }
+  },
+  (error) => {
+    if (error?.message?.includes?.('timeout')) {
+      console.log('timeout')
+    } else {
+      console.log(error)
+    }
+    Promise.reject(error)
+  },
+)
+
+const request = <ResponseType = unknown>(
+  url: string,
+  options?: AxiosRequestConfig<unknown>,
+): Promise<ResponseType> => {
+  return new Promise((resolve, reject) => {
+    axiosInstance({
+      url,
+      ...options,
+    })
+      .then((res) => {
+        resolve(res.data)
+      })
+      .catch((err) => reject(err))
+  })
+}
+export { axiosInstance, request }

src/api/codes.ts

@@ -0,0 +1,23 @@
+import { request } from './axios'
+
+export async function getCodesByTypeId(typeId: number) {
+  return request(`/codes/list/${typeId}`)
+}
+
+export async function getCodeById(id: number) {
+  return request(`/codes/${id}`)
+}
+
+export async function createCode(data: Record<string, string | number | undefined>) {
+  return request(`/codes`, {
+    method: 'post',
+    data,
+  })
+}
+
+export async function updateCode(data: Record<string, string | number | undefined>) {
+  return request(`/codes`, {
+    method: 'put',
+    data,
+  })
+}

src/api/types.ts

@@ -0,0 +1,5 @@
+import { request } from './axios'
+
+export async function getTypeTree() {
+  return request('/types/tree')
+}

src/components/Card.tsx

@@ -2,17 +2,27 @@ import { NCard } from 'naive-ui'
 import { defineComponent } from 'vue'
 // import { defineComponent } from 'vue'
 export default defineComponent({
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
   setup(props, { slots }) {
+    const { title, description } = props.data
+    console.log(slots, '----')
     return () => (
       <>
         <NCard
-          title="带封面的卡片"
+          title={title}
           v-slots={{
             cover: () => {
-              return <img src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
+              return slots.default?.()
             },
           }}
-        ></NCard>
+        >
+          {description}
+        </NCard>
       </>
     )
   },

src/components/icons/IconCesium.vue

@@ -17,18 +17,7 @@
    inkscape:export-filename="C:\Projects\agi-meta\Logos\Cesium\cesium.png"
    inkscape:export-xdpi="97.829803"
    inkscape:export-ydpi="97.829803">
-  <metadata
+
-     id="metadata4323">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
   <defs
      id="defs4321" />
   <!-- <sodipodi:namedview

src/hooks/Types.ts

@@ -0,0 +1,15 @@
+import { useRequest } from 'vue-hooks-plus'
+import { getTypeTree } from '@/api/types'
+
+const { data } = useRequest(getTypeTree, {
+  onError: (error) => {
+    console.log(error)
+  },
+})
+const useTypes = () => {
+  return {
+    data,
+  }
+}
+
+export default useTypes

src/router/index.ts

@@ -19,6 +19,7 @@ const router = createRouter({
     {
       path: '/code',
       name: 'codeEditor',
+
       component: () => import('../views/Sandpack/index'),
       meta: {
         title: '代码编辑器',

src/views/CardList/index.tsx

@@ -1,29 +0,0 @@
-import CardCom from '@/components/Card'
-import { RouterLink } from 'vue-router'
-
-export default defineComponent({
-  setup() {
-    const editCode = () => {
-      console.log('editCode')
-    }
-    return () => (
-      <div class="border border-[var(--border-color)] rounded-lg">
-        <div class="bg-[var(--border-color)] rounded-t-lg leading-8 px-5 py-2 text-xl"> 分 类 </div>
-        <div class="p-5 flex flex-wrap gap-5">
-          {Array.from({ length: 10 }).map((_, i) => {
-            return (
-              <RouterLink
-                class="w-[200px] cursor-pointer transition hover:scale-110 hover:rotate-3 hover:shadow-2xl"
-                to={{ name: 'codeEditor' }}
-                tag="a"
-                target="_blank"
-              >
-                <CardCom>{/* <div>Card</div> */}</CardCom>
-              </RouterLink>
-            )
-          })}
-        </div>
-      </div>
-    )
-  },
-})

src/views/Home/components/CardList/index.tsx

@@ -0,0 +1,86 @@
+import CardCom from '@/components/Card'
+import { RouterLink } from 'vue-router'
+import { NButton, NIcon, NGradientText } from 'naive-ui'
+import { AddOutline } from '@vicons/ionicons5'
+import { getCodesByTypeId } from '@/api/codes'
+import { useRequest } from 'vue-hooks-plus'
+import { SandpackProvider, SandpackPreview, JustIframeStory } from 'sandpack-vue3'
+
+export default defineComponent({
+  props: {
+    cardData: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { cardData } = toRefs(props)
+
+    const { data: codeList } = useRequest(() => getCodesByTypeId(cardData.value.id))
+
+    // const getCode = (codeId: string) => {
+    //   const { data: codeData } = useRequest(() => getCodeById(codeId))
+    //   return codeData
+    // }
+
+    return () => (
+      <div class="border border-[var(--border-color)] rounded-lg">
+        <div class="flex items-center bg-[var(--border-color)] rounded-t-lg px-5 py-2 text-xl">
+          {/* <div>{cardData.value.name}</div> */}
+          <NGradientText type="success">{cardData.value.name}</NGradientText>
+          <RouterLink
+            class="ml-auto"
+            to={{ name: 'codeEditor', query: { type: cardData.value.name } }}
+            tag="a"
+            target="_blank"
+          >
+            <NButton
+              type="primary"
+              strong
+              secondary
+              v-slots={{
+                icon: () => {
+                  return (
+                    <NIcon>
+                      <AddOutline />
+                    </NIcon>
+                  )
+                },
+              }}
+            ></NButton>
+          </RouterLink>
+        </div>
+        <div class="p-5 flex flex-wrap gap-5">
+          {codeList.value?.map((code, i) => {
+            console.log(code)
+            return (
+              <RouterLink
+                class="w-[200px] cursor-pointer transition hover:scale-110 hover:rotate-3 hover:shadow-2xl"
+                to={{ name: 'codeEditor', query: { id: code.id, type: cardData.value.name } }}
+                tag="a"
+                target="_blank"
+              >
+                {/* {{ code }} */}
+                <CardCom
+                  data={code}
+                  v-slots={{
+                    default: () => {
+                      return (
+                        <SandpackProvider files={code.code} template={code.template_id}>
+                          <SandpackPreview
+                            showOpenInCodeSandbox={false}
+                            showRefreshButton={false}
+                          ></SandpackPreview>
+                        </SandpackProvider>
+                      )
+                    },
+                  }}
+                ></CardCom>
+              </RouterLink>
+            )
+          })}
+        </div>
+      </div>
+    )
+  },
+})

src/views/Home/index.tsx

@@ -1,11 +1,25 @@
-import Sandpack from '../Sandpack'
+import CardList from './components/CardList'
-import CardList from '../CardList'
+import useTypes from '@/hooks/Types'
+import { NScrollbar } from 'naive-ui'
 export default defineComponent({
   setup() {
+    const { data } = useTypes()
+
     return () => (
-      <div class="flex flex-col gap-5">
+      <div class="w-h-full">
-        <CardList />
+        <NScrollbar>
-        <CardList />
+          <div class="flex flex-col gap-5">
+            {data.value?.map((card) => {
+              if (card.children) {
+                return [
+                  <CardList cardData={card} />,
+                  ...card.children.map((child) => <CardList cardData={child} />),
+                ]
+              }
+              return <CardList cardData={card} />
+            })}
+          </div>
+        </NScrollbar>
       </div>
     )
   },

src/views/Layout/components/Menu.tsx

@@ -1,70 +1,54 @@
 import { h } from 'vue'
 import { NIcon, NMenu } from 'naive-ui'
 import type { MenuOption } from 'naive-ui'
+
 import { BookmarkOutline, CaretDownOutline } from '@vicons/ionicons5'
 import IconCesium from '@/components/icons/IconCesium.vue'
 import IconVue from '@/components/icons/IconVue.vue'
 import IconHtml from '@/components/icons/IconHtml.vue'
 
-const menuOptions: MenuOption[] = [
+import useTypes from '@/hooks/Types'
-  {
-    label: 'Cesium',
-    key: 'cesium',
-    children: [
-      {
-        label: '鼠',
-        key: 'rat',
-      },
-    ],
-    icon: () => h(IconCesium),
-  },
-  {
-    label: 'Vue',
-    key: 'Vue',
-    icon: () => h(IconVue),
-  },
-  {
-    label: 'HTML',
-    key: 'HTML',
-    icon: () => h(IconHtml),
-    children: [
-      {
-        label: '食物',
-        key: 'food',
-      },
-      {
-        label: '过去增多，未来减少',
-        key: 'the-past-increases-the-future-recedes',
-      },
-    ],
-  },
-]
 
 const renderMenuLabel = (option: MenuOption) => {
   if ('href' in option) {
-    return h('a', { href: option.href, target: '_blank' }, option.label as string)
+    return h('a', { href: option.href, target: '_blank' }, option.name as string)
   }
-  return option.label as string
+  return option.name as string
+}
+
+const iconDict = {
+  Cesium: IconCesium,
+  Vue: IconVue,
+  HTML: IconHtml,
 }
 
 const renderMenuIcon = (option: MenuOption) => {
-  return h(NIcon, null, { default: () => h(option.icon ?? BookmarkOutline) })
+  return h(NIcon, null, { default: () => h(iconDict[option.name] ?? BookmarkOutline) })
 }
 
 const expandIcon = () => {
   return h(NIcon, null, { default: () => h(CaretDownOutline) })
 }
+
 export default defineComponent({
   setup() {
-    // const collapsed = ref<boolean>(true)
+    const { data: menuOptions } = useTypes()
+    const value = ref<string>('')
+
+    watch(value, (newVal) => {
+      console.log(newVal)
+    })
     return () => (
       <>
         <NMenu
+          v-model:value={value.value}
           class="w-h-full"
           // collapsed={collapsed.value}
+          key-field="name"
+          label-field="name"
           collapsed-width={64}
           collapsed-icon-size={22}
-          options={menuOptions}
+          options={menuOptions.value as MenuOption[]}
           render-label={renderMenuLabel}
           render-icon={renderMenuIcon}
           expand-icon={expandIcon}

src/views/Layout/index.tsx

@@ -28,7 +28,7 @@ export default defineComponent({
               </NLayoutHeader>
             </div>
             <div class={`h-5 ${bgColor}`}></div>
-            <NLayout has-sider class="flex-1" content-class="w-h-full">
+            <NLayout has-sider class="flex-1" content-class="w-h-full flex">
               <div class={`${bgColor} h-full`}>
                 <NLayoutSider
                   class={`${border} h-full`}
@@ -44,11 +44,9 @@ export default defineComponent({
               </div>
 
               <div class={`p-3 ${bgColor}`}></div>
-              <div class={`${bgColor} h-full`}>
+              <div class={`${bgColor} h-full flex-1`}>
                 <NLayoutContent class={`h-full ${border}`} content-style="padding: 24px">
-                  <NScrollbar>
+                  <RouterView class="w-h-full" />
-                    <RouterView class="w-h-full" />
-                  </NScrollbar>
                 </NLayoutContent>
               </div>
             </NLayout>

src/views/Sandpack/components/CodeEditor.tsx

@@ -1,14 +1,17 @@
 import { useSandpack, SandpackCodeEditor } from 'sandpack-vue3'
-import { toRefs } from 'vue'
+import useCodeEditor from '../hooks/codeEditor'
-
+import type { TFiles } from '../hooks/codeEditor'
+// import { watch } from 'vue'
 export default defineComponent({
   setup() {
+    const { codeFiles } = useCodeEditor()
     const { sandpack } = useSandpack()
-    const { files, activeFile } = sandpack
+    const { files, activeFile } = toRefs(sandpack)
+
+    watch(files, (newValue: TFiles) => {
+      codeFiles.value = newValue
+    })
 
-    // watchEffect(() => {
-    //   console.log(files, activeFile)
-    // })
     return () => (
       <>
         <SandpackCodeEditor

src/views/Sandpack/components/HeaderOperate.tsx

@@ -1,13 +1,18 @@
 import { NButton, NSelect } from 'naive-ui'
-
+import useCodeEditor from '../hooks/codeEditor'
+import { useRoute } from 'vue-router'
 const options = [
   {
     label: 'static',
     value: 'static',
   },
+  {
+    label: 'vanilla',
+    value: 'vanilla',
+  },
   {
     label: 'vue3',
-    value: 'vue3',
+    value: 'vite-vue',
   },
   {
     label: 'react',
@@ -17,14 +22,17 @@ const options = [
 
 export default defineComponent({
   setup() {
-    const type = ref('static')
+    const { template, saveCode } = useCodeEditor()
+    const { query } = useRoute()
+
+    // const type = ref('static')
     return () => (
       <div class="flex gap-2 h-[64px] justify-center items-center bg-white border border-[var(--border-color)] rounded-lg p-5">
-        <NSelect class="w-[200px]" options={options} v-model:value={type.value}></NSelect>
+        <NSelect class="w-[200px]" options={options} v-model:value={template.value}></NSelect>
         <NButton type="primary" class="">
           运行
         </NButton>
-        <NButton type="primary" class="ml-auto">
+        <NButton type="primary" class="ml-auto" onClick={() => saveCode(query)}>
           保存
         </NButton>
       </div>

src/views/Sandpack/hooks/codeEditor.ts

@@ -0,0 +1,35 @@
+import { createCode, updateCode } from '@/api/codes'
+
+type TParams = {
+  id?: string
+  type: string
+}
+
+export type TFiles = Record<string, { code: string }>
+
+const template = ref()
+const codeFiles = ref<TFiles>({})
+const useCodeEditor = () => {
+  async function saveCode(params: TParams) {
+    const data = {
+      id: params.id,
+      title: 'test',
+      description: 'test',
+      template_id: template.value,
+      code: codeFiles.value,
+      type_id: params.type,
+    }
+    if (params.id) {
+      await updateCode(data)
+    } else {
+      await createCode(data)
+    }
+    console.log(data, 'object')
+  }
+  return {
+    codeFiles,
+    template,
+    saveCode,
+  }
+}
+export default useCodeEditor

src/views/Sandpack/index.tsx

@@ -7,9 +7,11 @@ import {
 import { atomDark } from '@codesandbox/sandpack-themes'
 import CodeEditor from './components/CodeEditor'
 import HeaderOperate from './components/HeaderOperate'
+import useCodeEditor from './hooks/codeEditor'
 
 export default defineComponent({
   setup() {
+    const { template } = useCodeEditor()
     return () => (
       <div class="w-h-full flex-col flex gap-5">
         <HeaderOperate />
@@ -17,26 +19,19 @@ export default defineComponent({
           <SandpackProvider
             class="!w-h-full"
             theme={atomDark}
-            template="static"
+            template={template.value}
-            option={{
+            options={{
+              showConsoleButton: true,
               showConsole: true,
+              showNavigator: true,
             }}
           >
             <SandpackLayout class="w-h-full">
               <SandpackFileExplorer class="!h-full" />
-              {/* <SandpackCodeEditor
+
-              class="!h-full"
-              ref={codemirrorInstance}
-              showTabs
-              showLineNumbers={true}
-              showInlineErrors={false}
-            /> */}
               <CodeEditor />
-              <SandpackPreview class="!h-full" />
+              <SandpackPreview class="!h-full" showOpenInCodeSandbox={false} />
             </SandpackLayout>
-            {/* <SandpackLayout>
-          <SandpackConsole />
-          </SandpackLayout> */}
           </SandpackProvider>
         </div>
       </div>

vite.config.ts

@@ -8,6 +8,7 @@ import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -28,6 +29,7 @@ export default defineConfig({
           'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
         },
       ],
+      resolvers: [VueHooksPlusResolver()],
     }),
     Components({
       resolvers: [NaiveUiResolver()],
@@ -38,6 +40,19 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
+  server: {
+    open: true,
+    host: true,
+    port: 9547,
+
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
   css: {
     preprocessorOptions: {
       scss: {