From 17b08b92a725798e4d0879ddeb36db4e76fd0d60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E4=BA=89=E9=B8=A3?=
<yanzhengming@yanzhengmingdeMacBook-Pro.local>
Date: Tue, 10 Dec 2024 17:18:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BF=9D=E5=AD=98=EF=BC=9B=E5=88=97?=
=?UTF-8?q?=E8=A1=A8=EF=BC=9B=E8=8F=9C=E5=8D=95=EF=BC=9Btodo=EF=BC=9Acard?=
=?UTF-8?q?=E7=82=B9=E5=87=BB=E5=9B=9E=E6=98=BE=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package-lock.json | 432 +++++++++++++++++-
package.json | 3 +
src/App.vue | 1 -
src/api/axios.ts | 52 +++
src/api/codes.ts | 23 +
src/api/types.ts | 5 +
src/components/Card.tsx | 16 +-
src/components/icons/IconCesium.vue | 13 +-
src/hooks/Types.ts | 15 +
src/router/index.ts | 1 +
src/views/CardList/index.tsx | 29 --
src/views/Home/components/CardList/index.tsx | 86 ++++
src/views/Home/index.tsx | 24 +-
src/views/Layout/components/Menu.tsx | 60 +--
src/views/Layout/index.tsx | 8 +-
src/views/Sandpack/components/CodeEditor.tsx | 15 +-
.../Sandpack/components/HeaderOperate.tsx | 18 +-
src/views/Sandpack/hooks/codeEditor.ts | 35 ++
src/views/Sandpack/index.tsx | 21 +-
vite.config.ts | 15 +
20 files changed, 753 insertions(+), 119 deletions(-)
create mode 100644 src/api/axios.ts
create mode 100644 src/api/codes.ts
create mode 100644 src/api/types.ts
create mode 100644 src/hooks/Types.ts
delete mode 100644 src/views/CardList/index.tsx
create mode 100644 src/views/Home/components/CardList/index.tsx
create mode 100644 src/views/Sandpack/hooks/codeEditor.ts
diff --git a/package-lock.json b/package-lock.json
index 65b374c..8a5ebac 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 8e64755..2163851 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index 7aeded9..70e47dc 100644
--- a/src/App.vue
+++ b/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"
diff --git a/src/api/axios.ts b/src/api/axios.ts
new file mode 100644
index 0000000..d4541ee
--- /dev/null
+++ b/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 }
diff --git a/src/api/codes.ts b/src/api/codes.ts
new file mode 100644
index 0000000..bd1e05f
--- /dev/null
+++ b/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,
+ })
+}
diff --git a/src/api/types.ts b/src/api/types.ts
new file mode 100644
index 0000000..74f7c1f
--- /dev/null
+++ b/src/api/types.ts
@@ -0,0 +1,5 @@
+import { request } from './axios'
+
+export async function getTypeTree() {
+ return request('/types/tree')
+}
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 417ad09..87d5f71 100644
--- a/src/components/Card.tsx
+++ b/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>
</>
)
},
diff --git a/src/components/icons/IconCesium.vue b/src/components/icons/IconCesium.vue
index f07c86b..153677d 100644
--- a/src/components/icons/IconCesium.vue
+++ b/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
diff --git a/src/hooks/Types.ts b/src/hooks/Types.ts
new file mode 100644
index 0000000..1cb5dfa
--- /dev/null
+++ b/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
diff --git a/src/router/index.ts b/src/router/index.ts
index 7a3caef..f6d22fe 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -19,6 +19,7 @@ const router = createRouter({
{
path: '/code',
name: 'codeEditor',
+
component: () => import('../views/Sandpack/index'),
meta: {
title: '代码编辑器',
diff --git a/src/views/CardList/index.tsx b/src/views/CardList/index.tsx
deleted file mode 100644
index 8daf843..0000000
--- a/src/views/CardList/index.tsx
+++ /dev/null
@@ -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>
- )
- },
-})
diff --git a/src/views/Home/components/CardList/index.tsx b/src/views/Home/components/CardList/index.tsx
new file mode 100644
index 0000000..b9ec74d
--- /dev/null
+++ b/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>
+ )
+ },
+})
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
index 56c481c..30d94c3 100644
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@@ -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="flex flex-col gap-5">
- <CardList />
- <CardList />
+ <div class="w-h-full">
+ <NScrollbar>
+ <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>
)
},
diff --git a/src/views/Layout/components/Menu.tsx b/src/views/Layout/components/Menu.tsx
index 0f7a425..8f6d0d1 100644
--- a/src/views/Layout/components/Menu.tsx
+++ b/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[] = [
- {
- 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}
diff --git a/src/views/Layout/index.tsx b/src/views/Layout/index.tsx
index 3b9a1fd..c4cfa9d 100644
--- a/src/views/Layout/index.tsx
+++ b/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" />
- </NScrollbar>
+ <RouterView class="w-h-full" />
</NLayoutContent>
</div>
</NLayout>
diff --git a/src/views/Sandpack/components/CodeEditor.tsx b/src/views/Sandpack/components/CodeEditor.tsx
index 4723946..df775f9 100644
--- a/src/views/Sandpack/components/CodeEditor.tsx
+++ b/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
diff --git a/src/views/Sandpack/components/HeaderOperate.tsx b/src/views/Sandpack/components/HeaderOperate.tsx
index ed8f537..51be32b 100644
--- a/src/views/Sandpack/components/HeaderOperate.tsx
+++ b/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>
diff --git a/src/views/Sandpack/hooks/codeEditor.ts b/src/views/Sandpack/hooks/codeEditor.ts
new file mode 100644
index 0000000..104a72a
--- /dev/null
+++ b/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
diff --git a/src/views/Sandpack/index.tsx b/src/views/Sandpack/index.tsx
index dc034d4..19f348d 100644
--- a/src/views/Sandpack/index.tsx
+++ b/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"
- 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>
diff --git a/vite.config.ts b/vite.config.ts
index 987cf71..02d1cc2 100644
--- a/vite.config.ts
+++ b/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: {