diff --git a/package.json b/package.json index 653fd48..5510a17 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,8 @@ "preview": "vite preview" }, "dependencies": { + "@element-plus/icons-vue": "^2.3.2", + "element-plus": "^2.13.1", "vue": "^3.5.24", "vue-router": "^4.6.4" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fce1a47..5a2e954 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,12 @@ importers: .: dependencies: + '@element-plus/icons-vue': + specifier: ^2.3.2 + version: 2.3.2(vue@3.5.26(typescript@5.9.3)) + element-plus: + specifier: ^2.13.1 + version: 2.13.1(vue@3.5.26(typescript@5.9.3)) vue: specifier: ^3.5.24 version: 3.5.26(typescript@5.9.3) @@ -179,6 +185,15 @@ packages: resolution: {integrity: sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==} engines: {node: '>=6.9.0'} + '@ctrl/tinycolor@3.6.1': + resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==} + engines: {node: '>=10'} + + '@element-plus/icons-vue@2.3.2': + resolution: {integrity: sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==} + peerDependencies: + vue: ^3.2.0 + '@esbuild/aix-ppc64@0.27.2': resolution: {integrity: sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==} engines: {node: '>=18'} @@ -335,6 +350,15 @@ packages: cpu: [x64] os: [win32] + '@floating-ui/core@1.7.3': + resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==} + + '@floating-ui/dom@1.7.4': + resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==} + + '@floating-ui/utils@0.2.10': + resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==} + '@jridgewell/gen-mapping@0.3.13': resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==} @@ -495,12 +519,24 @@ packages: cpu: [x64] os: [win32] + '@sxzz/popperjs-es@2.11.7': + resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==} + '@types/estree@1.0.8': resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} + '@types/lodash-es@4.17.12': + resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==} + + '@types/lodash@4.17.23': + resolution: {integrity: sha512-RDvF6wTulMPjrNdCoYRC8gNR880JNGT8uB+REUpC2Ns4pRqQJhGz90wh7rgdXDPpCczF3VGktDuFGVnz8zP7HA==} + '@types/node@24.10.8': resolution: {integrity: sha512-r0bBaXu5Swb05doFYO2kTWHMovJnNVbCsII0fhesM8bNRlLhXIuckley4a2DaD+vOdmm5G+zGkQZAPZsF80+YQ==} + '@types/web-bluetooth@0.0.20': + resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==} + '@vitejs/plugin-vue@6.0.3': resolution: {integrity: sha512-TlGPkLFLVOY3T7fZrwdvKpjprR3s4fxRln0ORDo1VQ7HHyxJwTlrjKU3kpVWTlaAjIEuCTokmjkZnr8Tpc925w==} engines: {node: ^20.19.0 || >=22.12.0} @@ -590,6 +626,15 @@ packages: vue: optional: true + '@vueuse/core@10.11.1': + resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==} + + '@vueuse/metadata@10.11.1': + resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==} + + '@vueuse/shared@10.11.1': + resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==} + alien-signals@3.1.2: resolution: {integrity: sha512-d9dYqZTS90WLiU0I5c6DHj/HcKkF8ZyGN3G5x8wSbslulz70KOxaqCT0hQCo9KOyhVqzqGojvNdJXoTumZOtcw==} @@ -597,6 +642,9 @@ packages: resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==} engines: {node: '>=14'} + async-validator@4.2.5: + resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==} + baseline-browser-mapping@2.9.14: resolution: {integrity: sha512-B0xUquLkiGLgHhpPBqvl7GWegWBUNuujQ6kXd/r1U38ElPT6Ok8KZ8e+FpUGEc2ZoRQUzq/aUnaKFc/svWUGSg==} hasBin: true @@ -626,6 +674,9 @@ packages: csstype@3.2.3: resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==} + dayjs@1.11.19: + resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==} + debug@4.4.3: resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==} engines: {node: '>=6.0'} @@ -650,6 +701,11 @@ packages: electron-to-chromium@1.5.267: resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==} + element-plus@2.13.1: + resolution: {integrity: sha512-eG4BDBGdAsUGN6URH1PixzZb0ngdapLivIk1meghS1uEueLvQ3aljSKrCt5x6sYb6mUk8eGtzTQFgsPmLavQcA==} + peerDependencies: + vue: ^3.3.0 + entities@7.0.0: resolution: {integrity: sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ==} engines: {node: '>=0.12'} @@ -724,12 +780,28 @@ packages: kolorist@1.8.0: resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==} + lodash-es@4.17.22: + resolution: {integrity: sha512-XEawp1t0gxSi9x01glktRZ5HDy0HXqrM0x5pXQM98EaI0NxO6jVM7omDOxsuEo5UIASAnm2bRp1Jt/e0a2XU8Q==} + + lodash-unified@1.0.3: + resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==} + peerDependencies: + '@types/lodash-es': '*' + lodash: '*' + lodash-es: '*' + + lodash@4.17.21: + resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} + lru-cache@5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} magic-string@0.30.21: resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} + memoize-one@6.0.0: + resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==} + mitt@3.0.1: resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==} @@ -756,6 +828,9 @@ packages: node-releases@2.0.27: resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==} + normalize-wheel-es@1.2.0: + resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==} + ohash@2.0.11: resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==} @@ -915,6 +990,17 @@ packages: vscode-uri@3.1.0: resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==} + vue-demi@0.14.10: + resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==} + engines: {node: '>=12'} + hasBin: true + peerDependencies: + '@vue/composition-api': ^1.0.0-rc.1 + vue: ^3.0.0-0 || ^2.6.0 + peerDependenciesMeta: + '@vue/composition-api': + optional: true + vue-router@4.6.4: resolution: {integrity: sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==} peerDependencies: @@ -1134,6 +1220,12 @@ snapshots: '@babel/helper-string-parser': 7.27.1 '@babel/helper-validator-identifier': 7.28.5 + '@ctrl/tinycolor@3.6.1': {} + + '@element-plus/icons-vue@2.3.2(vue@3.5.26(typescript@5.9.3))': + dependencies: + vue: 3.5.26(typescript@5.9.3) + '@esbuild/aix-ppc64@0.27.2': optional: true @@ -1212,6 +1304,17 @@ snapshots: '@esbuild/win32-x64@0.27.2': optional: true + '@floating-ui/core@1.7.3': + dependencies: + '@floating-ui/utils': 0.2.10 + + '@floating-ui/dom@1.7.4': + dependencies: + '@floating-ui/core': 1.7.3 + '@floating-ui/utils': 0.2.10 + + '@floating-ui/utils@0.2.10': {} + '@jridgewell/gen-mapping@0.3.13': dependencies: '@jridgewell/sourcemap-codec': 1.5.5 @@ -1310,12 +1413,22 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.55.1': optional: true + '@sxzz/popperjs-es@2.11.7': {} + '@types/estree@1.0.8': {} + '@types/lodash-es@4.17.12': + dependencies: + '@types/lodash': 4.17.23 + + '@types/lodash@4.17.23': {} + '@types/node@24.10.8': dependencies: undici-types: 7.16.0 + '@types/web-bluetooth@0.0.20': {} + '@vitejs/plugin-vue@6.0.3(vite@7.3.1(@types/node@24.10.8))(vue@3.5.26(typescript@5.9.3))': dependencies: '@rolldown/pluginutils': 1.0.0-beta.53 @@ -1460,10 +1573,31 @@ snapshots: typescript: 5.9.3 vue: 3.5.26(typescript@5.9.3) + '@vueuse/core@10.11.1(vue@3.5.26(typescript@5.9.3))': + dependencies: + '@types/web-bluetooth': 0.0.20 + '@vueuse/metadata': 10.11.1 + '@vueuse/shared': 10.11.1(vue@3.5.26(typescript@5.9.3)) + vue-demi: 0.14.10(vue@3.5.26(typescript@5.9.3)) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + + '@vueuse/metadata@10.11.1': {} + + '@vueuse/shared@10.11.1(vue@3.5.26(typescript@5.9.3))': + dependencies: + vue-demi: 0.14.10(vue@3.5.26(typescript@5.9.3)) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + alien-signals@3.1.2: {} ansis@4.2.0: {} + async-validator@4.2.5: {} + baseline-browser-mapping@2.9.14: {} birpc@2.9.0: {} @@ -1490,6 +1624,8 @@ snapshots: csstype@3.2.3: {} + dayjs@1.11.19: {} + debug@4.4.3: dependencies: ms: 2.1.3 @@ -1505,6 +1641,26 @@ snapshots: electron-to-chromium@1.5.267: {} + element-plus@2.13.1(vue@3.5.26(typescript@5.9.3)): + dependencies: + '@ctrl/tinycolor': 3.6.1 + '@element-plus/icons-vue': 2.3.2(vue@3.5.26(typescript@5.9.3)) + '@floating-ui/dom': 1.7.4 + '@popperjs/core': '@sxzz/popperjs-es@2.11.7' + '@types/lodash': 4.17.23 + '@types/lodash-es': 4.17.12 + '@vueuse/core': 10.11.1(vue@3.5.26(typescript@5.9.3)) + async-validator: 4.2.5 + dayjs: 1.11.19 + lodash: 4.17.21 + lodash-es: 4.17.22 + lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.22)(lodash@4.17.21) + memoize-one: 6.0.0 + normalize-wheel-es: 1.2.0 + vue: 3.5.26(typescript@5.9.3) + transitivePeerDependencies: + - '@vue/composition-api' + entities@7.0.0: {} error-stack-parser-es@1.0.5: {} @@ -1573,6 +1729,16 @@ snapshots: kolorist@1.8.0: {} + lodash-es@4.17.22: {} + + lodash-unified@1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.22)(lodash@4.17.21): + dependencies: + '@types/lodash-es': 4.17.12 + lodash: 4.17.21 + lodash-es: 4.17.22 + + lodash@4.17.21: {} + lru-cache@5.1.1: dependencies: yallist: 3.1.1 @@ -1581,6 +1747,8 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 + memoize-one@6.0.0: {} + mitt@3.0.1: {} mrmime@2.0.1: {} @@ -1595,6 +1763,8 @@ snapshots: node-releases@2.0.27: {} + normalize-wheel-es@1.2.0: {} + ohash@2.0.11: {} open@10.2.0: @@ -1761,6 +1931,10 @@ snapshots: vscode-uri@3.1.0: {} + vue-demi@0.14.10(vue@3.5.26(typescript@5.9.3)): + dependencies: + vue: 3.5.26(typescript@5.9.3) + vue-router@4.6.4(vue@3.5.26(typescript@5.9.3)): dependencies: '@vue/devtools-api': 6.6.4 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index efc037a..b989e4f 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,2 +1,5 @@ +ignoredBuiltDependencies: + - vue-demi + onlyBuiltDependencies: - esbuild diff --git a/src/Layout/components/AppMain.vue b/src/Layout/components/AppMain.vue new file mode 100644 index 0000000..fb73b68 --- /dev/null +++ b/src/Layout/components/AppMain.vue @@ -0,0 +1,15 @@ + + \ No newline at end of file diff --git a/src/Layout/components/Navbar.vue b/src/Layout/components/Navbar.vue new file mode 100644 index 0000000..810af1a --- /dev/null +++ b/src/Layout/components/Navbar.vue @@ -0,0 +1,40 @@ + + \ No newline at end of file diff --git a/src/Layout/components/Sidebar.vue b/src/Layout/components/Sidebar.vue new file mode 100644 index 0000000..24d9391 --- /dev/null +++ b/src/Layout/components/Sidebar.vue @@ -0,0 +1,31 @@ + + \ No newline at end of file diff --git a/src/Layout/index.vue b/src/Layout/index.vue new file mode 100644 index 0000000..4d23054 --- /dev/null +++ b/src/Layout/index.vue @@ -0,0 +1,26 @@ + + + \ No newline at end of file diff --git a/src/assets/styles/common.css b/src/assets/styles/common.css new file mode 100644 index 0000000..fdc63ab --- /dev/null +++ b/src/assets/styles/common.css @@ -0,0 +1,131 @@ +* { + box-sizing: border-box; +} + +html { + height: 100%; + font-size: 14px; +} + +body { + height: 100%; + color: #333; + font: 1em/1.4 "Microsoft Yahei", "PingFang SC", "Avenir", "Segoe UI", + "Hiragino Sans GB", "STHeiti", "Microsoft Sans Serif", "WenQuanYi Micro Hei", + sans-serif; +} + +body, +ul, +h1, +h3, +h4, +p, +dl, +dd { + padding: 0; + margin: 0; +} + +a { + text-decoration: none; + color: #333; + outline: none; +} + +i { + font-style: normal; +} + +input[type="text"], +input[type="search"], +input[type="password"], +input[type="checkbox"] { + padding: 0; + outline: none; + border: none; + appearance: none; + &::placeholder { + color: #ccc; + } +} + +img { + max-width: 100%; + max-height: 100%; + vertical-align: middle; +} + +ul, +ol { + list-style: none; +} + +#app { + user-select: none; +} + +.container { + width: 1240px; + margin: 0 auto; + position: relative; +} + +/* 一行省略 */ +.ellipsis { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +/* 二行省略 */ +.ellipsis-2 { + word-break: break-all; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; +} + +.fl { + float: left; +} + +.fr { + float: right; +} + +.clearfix:after { + content: "."; + display: block; + visibility: hidden; + height: 0; + line-height: 0; + clear: both; +} +/* fade */ +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.28s; +} + +.fade-enter, +.fade-leave-active { + opacity: 0; +} + +/* fade-transform */ +.fade-transform-leave-active, +.fade-transform-enter-active { + transition: all 0.5s; +} + +.fade-transform-enter { + opacity: 0; + transform: translateX(-30px); +} + +.fade-transform-leave-to { + opacity: 0; + transform: translateX(30px); +} diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css new file mode 100644 index 0000000..1bd4124 --- /dev/null +++ b/src/assets/styles/index.css @@ -0,0 +1 @@ +@import "./common.css"; diff --git a/src/main.ts b/src/main.ts index d7b13ac..8c301ba 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,5 +1,16 @@ import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; +import "@/assets/styles/index.css"; +import ElementPlus from "element-plus"; +import "element-plus/dist/index.css"; +import zhCn from "element-plus/es/locale/lang/zh-cn"; +import * as ElementPlusIconsVue from "@element-plus/icons-vue"; + const app = createApp(App); -app.use(router).mount("#app"); +// 全局注册icon图标 +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + app.component(key, component); +} +app.use(router); +app.use(ElementPlus, { locale: zhCn }).mount("#app"); diff --git a/src/router/index.ts b/src/router/index.ts index b3aa1ca..76a7bf7 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,9 +1,16 @@ import { createMemoryHistory, createRouter } from "vue-router"; -import HomeView from "@/views/home/index.vue"; +import Layout from "@/Layout/index.vue"; import AboutView from "@/views/login/index.vue"; const routes = [ - { path: "/", component: HomeView }, + { + path: "/", + component: Layout, + redirect: "/home", + children: [ + { path: "/home", component: () => import("@/views/home/index.vue") }, + ], + }, { path: "/login", component: AboutView }, ]; diff --git a/vite.config.ts b/vite.config.ts index 50798f2..9ef0a84 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -6,6 +6,9 @@ import path from "path"; // https://vite.dev/config/ export default defineConfig({ plugins: [vue(), vueDevTools()], + server: { + port: 8080, + }, resolve: { alias: { "@": path.resolve(__dirname, "./src"),