feat:保存；列表；菜单；todo：card点击回显等
This commit is contained in:
严争鸣
parent
f1b701d045
commit
17b08b92a7
432
package-lock.json
generated
432
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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"
|
||||
|
||||
52
src/api/axios.ts
Normal file
52
src/api/axios.ts
Normal file
@ -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 }
|
||||
23
src/api/codes.ts
Normal file
23
src/api/codes.ts
Normal file
@ -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,
|
||||
})
|
||||
}
|
||||
5
src/api/types.ts
Normal file
5
src/api/types.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { request } from './axios'
|
||||
|
||||
export async function getTypeTree() {
|
||||
return request('/types/tree')
|
||||
}
|
||||
@ -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>
|
||||
</>
|
||||
)
|
||||
},
|
||||
|
||||
@ -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
|
||||
|
||||
15
src/hooks/Types.ts
Normal file
15
src/hooks/Types.ts
Normal file
@ -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
|
||||
@ -19,6 +19,7 @@ const router = createRouter({
|
||||
{
|
||||
path: '/code',
|
||||
name: 'codeEditor',
|
||||
|
||||
component: () => import('../views/Sandpack/index'),
|
||||
meta: {
|
||||
title: '代码编辑器',
|
||||
|
||||
@ -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>
|
||||
)
|
||||
},
|
||||
})
|
||||
86
src/views/Home/components/CardList/index.tsx
Normal file
86
src/views/Home/components/CardList/index.tsx
Normal file
@ -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>
|
||||
)
|
||||
},
|
||||
})
|
||||
@ -1,11 +1,25 @@
|
||||
import Sandpack from '../Sandpack'
|
||||
import CardList from '../CardList'
|
||||
import CardList from './components/CardList'
|
||||
import useTypes from '@/hooks/Types'
|
||||
import { NScrollbar } from 'naive-ui'
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const { data } = useTypes()
|
||||
|
||||
return () => (
|
||||
<div class="w-h-full">
|
||||
<NScrollbar>
|
||||
<div class="flex flex-col gap-5">
|
||||
<CardList />
|
||||
<CardList />
|
||||
{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>
|
||||
)
|
||||
},
|
||||
|
||||
@ -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[] = [
|
||||
{
|
||||
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',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
import useTypes from '@/hooks/Types'
|
||||
|
||||
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}
|
||||
|
||||
@ -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" />
|
||||
</NScrollbar>
|
||||
</NLayoutContent>
|
||||
</div>
|
||||
</NLayout>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
35
src/views/Sandpack/hooks/codeEditor.ts
Normal file
35
src/views/Sandpack/hooks/codeEditor.ts
Normal file
@ -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
|
||||
@ -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"
|
||||
option={{
|
||||
template={template.value}
|
||||
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>
|
||||
|
||||
@ -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: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user