feat: new
This commit is contained in:
ex_zhangwenlei@exiot.cmcc
@@ -17,11 +17,16 @@
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@vueuse/core": "^10.6.1",
|
||||
"axios": "^1.6.1",
|
||||
"localforage": "^1.10.0",
|
||||
"pinia": "^2.1.7",
|
||||
"pinia-plugin-persist": "^1.0.0",
|
||||
"svg-sprite-loader": "^6.0.11",
|
||||
"three": "^0.160.0",
|
||||
"three-css2drender": "^1.0.0",
|
||||
"vue": "^3.3.8",
|
||||
"vue-router": "^4.2.5"
|
||||
"vue-router": "^4.2.5",
|
||||
"xlsx": "^0.18.5",
|
||||
"zod": "^3.22.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/ep": "^1.1.12",
|
||||
@@ -29,6 +34,7 @@
|
||||
"@tailwindcss/typography": "^0.5.10",
|
||||
"@testing-library/vue": "^8.0.0",
|
||||
"@types/node": "^20.9.0",
|
||||
"@types/three": "^0.160.0",
|
||||
"@typescript-eslint/eslint-plugin": "^6.11.0",
|
||||
"@typescript-eslint/parser": "^6.11.0",
|
||||
"@vitejs/plugin-vue": "^4.4.1",
|
||||
|
||||
135
pnpm-lock.yaml
generated
135
pnpm-lock.yaml
generated
@@ -17,6 +17,9 @@ dependencies:
|
||||
axios:
|
||||
specifier: ^1.6.1
|
||||
version: 1.6.1
|
||||
localforage:
|
||||
specifier: ^1.10.0
|
||||
version: 1.10.0
|
||||
pinia:
|
||||
specifier: ^2.1.7
|
||||
version: 2.1.7(typescript@5.2.2)(vue@3.3.8)
|
||||
@@ -26,12 +29,24 @@ dependencies:
|
||||
svg-sprite-loader:
|
||||
specifier: ^6.0.11
|
||||
version: 6.0.11
|
||||
three:
|
||||
specifier: ^0.160.0
|
||||
version: 0.160.0
|
||||
three-css2drender:
|
||||
specifier: ^1.0.0
|
||||
version: 1.0.0(three@0.160.0)
|
||||
vue:
|
||||
specifier: ^3.3.8
|
||||
version: 3.3.8(typescript@5.2.2)
|
||||
vue-router:
|
||||
specifier: ^4.2.5
|
||||
version: 4.2.5(vue@3.3.8)
|
||||
xlsx:
|
||||
specifier: ^0.18.5
|
||||
version: 0.18.5
|
||||
zod:
|
||||
specifier: ^3.22.4
|
||||
version: 3.22.4
|
||||
|
||||
devDependencies:
|
||||
'@iconify-json/ep':
|
||||
@@ -49,6 +64,9 @@ devDependencies:
|
||||
'@types/node':
|
||||
specifier: ^20.9.0
|
||||
version: 20.9.0
|
||||
'@types/three':
|
||||
specifier: ^0.160.0
|
||||
version: 0.160.0
|
||||
'@typescript-eslint/eslint-plugin':
|
||||
specifier: ^6.11.0
|
||||
version: 6.11.0(@typescript-eslint/parser@6.11.0)(eslint@8.53.0)(typescript@5.2.2)
|
||||
@@ -710,15 +728,32 @@ packages:
|
||||
resolution: {integrity: sha512-+d+WYC1BxJ6yVOgUgzK8gWvp5qF8ssV5r4nsDcZWKRWcDQLQ619tvWAxJQYGgBrO1MnLJC7a5GtiYsAoQ47dJg==}
|
||||
dev: true
|
||||
|
||||
/@types/stats.js@0.17.3:
|
||||
resolution: {integrity: sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==}
|
||||
dev: true
|
||||
|
||||
/@types/svgo@2.6.4:
|
||||
resolution: {integrity: sha512-l4cmyPEckf8moNYHdJ+4wkHvFxjyW6ulm9l4YGaOxeyBWPhBOT0gvni1InpFPdzx1dKf/2s62qGITwxNWnPQng==}
|
||||
dependencies:
|
||||
'@types/node': 20.9.0
|
||||
dev: true
|
||||
|
||||
/@types/three@0.160.0:
|
||||
resolution: {integrity: sha512-jWlbUBovicUKaOYxzgkLlhkiEQJkhCVvg4W2IYD2trqD2om3VK4DGLpHH5zQHNr7RweZK/5re/4IVhbhvxbV9w==}
|
||||
dependencies:
|
||||
'@types/stats.js': 0.17.3
|
||||
'@types/webxr': 0.5.10
|
||||
fflate: 0.6.10
|
||||
meshoptimizer: 0.18.1
|
||||
dev: true
|
||||
|
||||
/@types/web-bluetooth@0.0.20:
|
||||
resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
|
||||
|
||||
/@types/webxr@0.5.10:
|
||||
resolution: {integrity: sha512-n3u5sqXQJhf1CS68mw3Wf16FQ4cRPNBBwdYLFzq3UddiADOim1Pn3Y6PBdDilz1vOJF3ybLxJ8ZEDlLIzrOQZg==}
|
||||
dev: true
|
||||
|
||||
/@typescript-eslint/eslint-plugin@6.11.0(@typescript-eslint/parser@6.11.0)(eslint@8.53.0)(typescript@5.2.2):
|
||||
resolution: {integrity: sha512-uXnpZDc4VRjY4iuypDBKzW1rz9T5YBBK0snMn8MaTSNd2kMlj50LnLBABELjJiOL5YHk7ZD8hbSpI9ubzqYI0w==}
|
||||
engines: {node: ^16.0.0 || >=18.0.0}
|
||||
@@ -1219,6 +1254,11 @@ packages:
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/adler-32@1.3.1:
|
||||
resolution: {integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==}
|
||||
engines: {node: '>=0.8'}
|
||||
dev: false
|
||||
|
||||
/agent-base@6.0.2:
|
||||
resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
|
||||
engines: {node: '>= 6.0.0'}
|
||||
@@ -1531,6 +1571,14 @@ packages:
|
||||
resolution: {integrity: sha512-kfte3Hym//51EdX4239i+Rmp20EsLIYGdPkERegTgU19hQWCRhsRFGKHTliUlsry53tv17K7n077Kqa0WJU4ng==}
|
||||
dev: true
|
||||
|
||||
/cfb@1.2.2:
|
||||
resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==}
|
||||
engines: {node: '>=0.8'}
|
||||
dependencies:
|
||||
adler-32: 1.3.1
|
||||
crc-32: 1.2.2
|
||||
dev: false
|
||||
|
||||
/chai@4.3.10:
|
||||
resolution: {integrity: sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==}
|
||||
engines: {node: '>=4'}
|
||||
@@ -1619,6 +1667,11 @@ packages:
|
||||
resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
|
||||
engines: {node: '>=0.8'}
|
||||
|
||||
/codepage@1.15.0:
|
||||
resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==}
|
||||
engines: {node: '>=0.8'}
|
||||
dev: false
|
||||
|
||||
/collection-visit@1.0.0:
|
||||
resolution: {integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
@@ -1702,6 +1755,12 @@ packages:
|
||||
vary: 1.1.2
|
||||
dev: true
|
||||
|
||||
/crc-32@1.2.2:
|
||||
resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
|
||||
engines: {node: '>=0.8'}
|
||||
hasBin: true
|
||||
dev: false
|
||||
|
||||
/cross-spawn@7.0.3:
|
||||
resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
|
||||
engines: {node: '>= 8'}
|
||||
@@ -2388,6 +2447,10 @@ packages:
|
||||
reusify: 1.0.4
|
||||
dev: true
|
||||
|
||||
/fflate@0.6.10:
|
||||
resolution: {integrity: sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==}
|
||||
dev: true
|
||||
|
||||
/fflate@0.8.1:
|
||||
resolution: {integrity: sha512-/exOvEuc+/iaUm105QIiOt4LpBdMTWsXxqR0HDF35vx3fmaKzw7354gTilCh5rkzEt8WYyG//ku3h3nRmd7CHQ==}
|
||||
dev: true
|
||||
@@ -2472,6 +2535,11 @@ packages:
|
||||
combined-stream: 1.0.8
|
||||
mime-types: 2.1.35
|
||||
|
||||
/frac@1.1.2:
|
||||
resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==}
|
||||
engines: {node: '>=0.8'}
|
||||
dev: false
|
||||
|
||||
/fraction.js@4.3.7:
|
||||
resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
|
||||
dev: true
|
||||
@@ -2797,6 +2865,10 @@ packages:
|
||||
engines: {node: '>=0.10.0'}
|
||||
hasBin: true
|
||||
|
||||
/immediate@3.0.6:
|
||||
resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
|
||||
dev: false
|
||||
|
||||
/immutable@4.3.4:
|
||||
resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
|
||||
dev: true
|
||||
@@ -3263,6 +3335,12 @@ packages:
|
||||
type-check: 0.4.0
|
||||
dev: true
|
||||
|
||||
/lie@3.1.1:
|
||||
resolution: {integrity: sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==}
|
||||
dependencies:
|
||||
immediate: 3.0.6
|
||||
dev: false
|
||||
|
||||
/lilconfig@2.1.0:
|
||||
resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
|
||||
engines: {node: '>=10'}
|
||||
@@ -3298,6 +3376,12 @@ packages:
|
||||
pkg-types: 1.0.3
|
||||
dev: true
|
||||
|
||||
/localforage@1.10.0:
|
||||
resolution: {integrity: sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==}
|
||||
dependencies:
|
||||
lie: 3.1.1
|
||||
dev: false
|
||||
|
||||
/locate-path@6.0.0:
|
||||
resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
|
||||
engines: {node: '>=10'}
|
||||
@@ -3381,6 +3465,10 @@ packages:
|
||||
engines: {node: '>= 8'}
|
||||
dev: true
|
||||
|
||||
/meshoptimizer@0.18.1:
|
||||
resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==}
|
||||
dev: true
|
||||
|
||||
/micromatch@3.1.0:
|
||||
resolution: {integrity: sha512-3StSelAE+hnRvMs8IdVW7Uhk8CVed5tp+kLLGlBP6WiRAXS21GPGu/Nat4WNPXj2Eoc24B02SaeoyozPMfj0/g==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
@@ -4405,6 +4493,13 @@ packages:
|
||||
dependencies:
|
||||
extend-shallow: 3.0.2
|
||||
|
||||
/ssf@0.11.2:
|
||||
resolution: {integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==}
|
||||
engines: {node: '>=0.8'}
|
||||
dependencies:
|
||||
frac: 1.1.2
|
||||
dev: false
|
||||
|
||||
/stable@0.1.8:
|
||||
resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
|
||||
deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility'
|
||||
@@ -4701,6 +4796,18 @@ packages:
|
||||
any-promise: 1.3.0
|
||||
dev: true
|
||||
|
||||
/three-css2drender@1.0.0(three@0.160.0):
|
||||
resolution: {integrity: sha512-redDCSBDvgxiJIm6EDT8WO5WJTVg5gUEy/vjtAgJa/zX4peEUnZ8K+mXo6v94EudbnuI5h48/hQo9NExf04ENg==}
|
||||
peerDependencies:
|
||||
three: '>= 0.91'
|
||||
dependencies:
|
||||
three: 0.160.0
|
||||
dev: false
|
||||
|
||||
/three@0.160.0:
|
||||
resolution: {integrity: sha512-DLU8lc0zNIPkM7rH5/e1Ks1Z8tWCGRq6g8mPowdDJpw1CFBJMU7UoJjC6PefXW7z//SSl0b2+GCw14LB+uDhng==}
|
||||
dev: false
|
||||
|
||||
/tinybench@2.5.1:
|
||||
resolution: {integrity: sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==}
|
||||
dev: true
|
||||
@@ -5434,6 +5541,16 @@ packages:
|
||||
stackback: 0.0.2
|
||||
dev: true
|
||||
|
||||
/wmf@1.0.2:
|
||||
resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==}
|
||||
engines: {node: '>=0.8'}
|
||||
dev: false
|
||||
|
||||
/word@0.3.0:
|
||||
resolution: {integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==}
|
||||
engines: {node: '>=0.8'}
|
||||
dev: false
|
||||
|
||||
/wrap-ansi@7.0.0:
|
||||
resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
|
||||
engines: {node: '>=10'}
|
||||
@@ -5469,6 +5586,20 @@ packages:
|
||||
optional: true
|
||||
dev: true
|
||||
|
||||
/xlsx@0.18.5:
|
||||
resolution: {integrity: sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==}
|
||||
engines: {node: '>=0.8'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
adler-32: 1.3.1
|
||||
cfb: 1.2.2
|
||||
codepage: 1.15.0
|
||||
crc-32: 1.2.2
|
||||
ssf: 0.11.2
|
||||
wmf: 1.0.2
|
||||
word: 0.3.0
|
||||
dev: false
|
||||
|
||||
/xml-name-validator@4.0.0:
|
||||
resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
|
||||
engines: {node: '>=12'}
|
||||
@@ -5519,3 +5650,7 @@ packages:
|
||||
resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
|
||||
engines: {node: '>=12.20'}
|
||||
dev: true
|
||||
|
||||
/zod@3.22.4:
|
||||
resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
|
||||
dev: false
|
||||
|
||||
@@ -5,5 +5,4 @@
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/style/global.module.scss";
|
||||
</style>
|
||||
|
||||
2644
src/assets/model.obj
Normal file
2644
src/assets/model.obj
Normal file
File diff suppressed because it is too large
Load Diff
1
src/components.d.ts
vendored
1
src/components.d.ts
vendored
@@ -7,6 +7,7 @@ export {}
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
DaiysuiTable: typeof import('./components/DaiysuiTable/index.vue')['default']
|
||||
HelloWorld: typeof import('./components/HelloWorld.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
|
||||
64
src/components/DaiysuiTable/index.vue
Normal file
64
src/components/DaiysuiTable/index.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
import { mapActions } from 'pinia';
|
||||
<script setup lang='ts'>
|
||||
import { computed } from 'vue';
|
||||
const props= defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: [] as any[]
|
||||
},
|
||||
tableColumns: {
|
||||
type: Array,
|
||||
default: [] as any[]
|
||||
},
|
||||
})
|
||||
|
||||
const dataColumns=computed(()=>{
|
||||
// 不带有actions的列
|
||||
const columns= props.tableColumns.filter(item=>!item.actions)
|
||||
|
||||
return columns
|
||||
})
|
||||
|
||||
const actionsColumns=computed(()=>{
|
||||
// 带有actions的列
|
||||
const columns= props.tableColumns.filter(item=>item.actions)
|
||||
|
||||
return columns
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th v-for="(item, index) in dataColumns" :key="index">{{ item.label }}</th>
|
||||
<th v-for="(item, index) in actionsColumns" :key="index">操作</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row -->
|
||||
<tr class="hover" v-for="item in data" :key="item.id">
|
||||
<th>{{ item.id }}</th>
|
||||
<td v-for="(column,index) in dataColumns" :key="index">
|
||||
<span v-if="column.formatValue">{{ column.formatValue(item) }}</span>
|
||||
<span v-else>{{ item[column.props] }}</span>
|
||||
</td>
|
||||
<!-- action -->
|
||||
<td v-for="(column,index) in actionsColumns" :key="index" class="flex gap-2">
|
||||
<button class="btn btn-xs" v-for="action in column.actions" :key="action.name" :class="action.type" @click="action.onClick(item)">{{ action.label}}</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<!-- foot -->
|
||||
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped></style>
|
||||
1
src/icons/down.svg
Normal file
1
src/icons/down.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1704385528419" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4272" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 128c212 0 384 172 384 384s-172 384-384 384-384-172-384-384 172-384 384-384m0-64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m226.4 322.4L512 613.6 285.6 386.4 240 432l226.4 226.4L512 704l45.6-45.6L784 432l-45.6-45.6z" p-id="4273"></path></svg>
|
||||
|
After Width: | Height: | Size: 615 B |
1
src/icons/up.svg
Normal file
1
src/icons/up.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1704385525165" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4133" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 128c212 0 384 172 384 384s-172 384-384 384-384-172-384-384 172-384 384-384m0-64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64z m272 530.4L557.6 368 512 322.4 466.4 368 240 594.4l45.6 45.6L512 413.6 738.4 640l45.6-45.6z" p-id="4134"></path></svg>
|
||||
|
After Width: | Height: | Size: 614 B |
@@ -1,19 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import Header from './Header/index.vue';
|
||||
import Footer from './Footer/index.vue';
|
||||
// import Header from './Header/index.vue';
|
||||
// import Footer from './Footer/index.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-screen">
|
||||
<header class="shadow-2xl head-container h-14">
|
||||
<!-- <header class="shadow-2xl head-container h-14">
|
||||
<Header></Header>
|
||||
</header>
|
||||
<main class="main-container w-screen box-content min-h-[calc(100vh-10rem)]">
|
||||
</header> -->
|
||||
<main class="box-content w-screen h-screen main-container">
|
||||
<router-view class="main-container-content"></router-view>
|
||||
</main>
|
||||
<footer class="w-screen footer-container">
|
||||
<!-- <footer class="w-screen footer-container">
|
||||
<Footer></Footer>
|
||||
</footer>
|
||||
</footer> -->
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { createApp } from 'vue';
|
||||
import './style.css';
|
||||
|
||||
import './style/style.scss'
|
||||
import * as THREE from 'three';
|
||||
import App from './App.vue';
|
||||
|
||||
const app = createApp(App);
|
||||
@@ -15,5 +16,7 @@ import { createPinia } from 'pinia';
|
||||
import piniaPluginPersist from 'pinia-plugin-persist';
|
||||
const pinia = createPinia();
|
||||
pinia.use(piniaPluginPersist);
|
||||
|
||||
app.config.globalProperties.$THREE = THREE; //挂载到原型
|
||||
app.component('svg-icon', svgIcon);
|
||||
app.use(router).use(pinia).mount('#app');
|
||||
|
||||
@@ -1,6 +1,97 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import Layout from '@/layout/index.vue';
|
||||
import Home from '@/views/Home/index.vue';
|
||||
export const configRoutes={
|
||||
path: '/config',
|
||||
name: 'Config',
|
||||
component: () => import('@/views/Config/index.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
redirect: '/config/person',
|
||||
},
|
||||
{
|
||||
path: '/config/person',
|
||||
name: 'PersonConfig',
|
||||
component: () => import('@/views/Config/Person/PersonConfig.vue'),
|
||||
meta: {
|
||||
title: '人员配置',
|
||||
icon: 'person',
|
||||
},
|
||||
children:[
|
||||
{
|
||||
path:'',
|
||||
redirect: '/config/person/all',
|
||||
},
|
||||
{
|
||||
path:'/config/person/all',
|
||||
name:'AllPersonConfig',
|
||||
component:()=>import('@/views/Config/Person/PersonAll.vue'),
|
||||
meta:{
|
||||
title:'所有人员',
|
||||
icon:'all'
|
||||
}
|
||||
},
|
||||
{
|
||||
path:'/config/person/already',
|
||||
name:'AlreadyPerson',
|
||||
component:()=>import('@/views/Config/Person/PersonAlready.vue'),
|
||||
meta:{
|
||||
title:'已领取人员',
|
||||
icon:'already'
|
||||
}
|
||||
},
|
||||
// {
|
||||
// path:'other',
|
||||
// name:'OtherPersonConfig',
|
||||
// component:()=>import('@/views/Config/Person/OtherPersonConfig.vue'),
|
||||
// meta:{
|
||||
// title:'其他配置',
|
||||
// icon:'other'
|
||||
// }
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/config/prize',
|
||||
name: 'PrizeConfig',
|
||||
component: () => import('@/views/Config/Prize/PrizeConfig.vue'),
|
||||
meta:{
|
||||
title: '奖品配置',
|
||||
icon: 'prize'
|
||||
}
|
||||
},
|
||||
{
|
||||
path:'/config/global',
|
||||
name:'GlobalConfig',
|
||||
redirect: '/config/global/all',
|
||||
meta:{
|
||||
title:'全局配置',
|
||||
icon:'global'
|
||||
},
|
||||
children:[
|
||||
{
|
||||
path:'/config/global/face',
|
||||
name:'FaceConfig',
|
||||
component:()=>import('@/views/Config/Global/FaceConfig.vue'),
|
||||
meta:{
|
||||
title:'界面配置',
|
||||
icon:'face'
|
||||
}
|
||||
},
|
||||
{
|
||||
path:'/config/global/image',
|
||||
name:'ImageConfig',
|
||||
component:()=>import('@/views/Config/Global/ImageConfig.vue'),
|
||||
meta:{
|
||||
title:'图片配置',
|
||||
icon:'image'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
@@ -12,11 +103,7 @@ const routes = [
|
||||
name: 'Home',
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
path: '/guide',
|
||||
name: 'Guide',
|
||||
component: () => import('@/views/Guide/index.vue'),
|
||||
},
|
||||
configRoutes,
|
||||
{
|
||||
path: '/doc',
|
||||
name: 'Doc',
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import { useUserStore } from './user';
|
||||
|
||||
import {usePersonConfig} from './personConfig';
|
||||
import { usePrizeConfig } from './prizeConfig';
|
||||
export default function useStore() {
|
||||
return {
|
||||
user: useUserStore(),
|
||||
personConfig:usePersonConfig(),
|
||||
prizeConfig:usePrizeConfig()
|
||||
};
|
||||
}
|
||||
|
||||
102
src/store/personConfig.ts
Normal file
102
src/store/personConfig.ts
Normal file
@@ -0,0 +1,102 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { IPersonConfig } from '@/types/personConfig';
|
||||
export const usePersonConfig = defineStore('person', {
|
||||
state() {
|
||||
return {
|
||||
personConfig:{
|
||||
alreadyPersonList:[] as IPersonConfig[],
|
||||
notPersonList:[] as IPersonConfig[],
|
||||
tableRowCount:12,
|
||||
showField:[] as any[]
|
||||
}
|
||||
};
|
||||
},
|
||||
getters: {
|
||||
// 获取全部配置
|
||||
getPersonConfig(state) {
|
||||
return state.personConfig;
|
||||
},
|
||||
// 获取已中奖人员名单
|
||||
getAlreadyPersonList(state) {
|
||||
return state.personConfig.alreadyPersonList;
|
||||
},
|
||||
// 获取未中奖人员名单
|
||||
getNotPersonList(state) {
|
||||
return state.personConfig.notPersonList;
|
||||
},
|
||||
// 获取table列数
|
||||
getTableRowCount(state) {
|
||||
return state.personConfig.tableRowCount;
|
||||
},
|
||||
// 获取要展示那些字段
|
||||
getShowField(state) {
|
||||
return state.personConfig.showField;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
// 添加未中奖人员
|
||||
addNotPersonList(personList: IPersonConfig[]) {
|
||||
if(personList.length<=0){
|
||||
return
|
||||
}
|
||||
personList.forEach((item: IPersonConfig) => {
|
||||
this.personConfig.notPersonList.push(item);
|
||||
});
|
||||
},
|
||||
// 添加已中奖人员
|
||||
addAlreadyPersonList(personList: IPersonConfig[]) {
|
||||
if(personList.length<=0){
|
||||
return
|
||||
}
|
||||
personList.forEach((item: IPersonConfig) => {
|
||||
this.personConfig.alreadyPersonList.push(item);
|
||||
this.personConfig.notPersonList = this.personConfig.notPersonList.filter((item: IPersonConfig) => item.id!== item.id);
|
||||
});
|
||||
},
|
||||
// 删除所有人员
|
||||
deleteAllPerson() {
|
||||
this.personConfig.alreadyPersonList = [];
|
||||
this.personConfig.notPersonList = [];
|
||||
},
|
||||
// 设置table列数
|
||||
setTableRowCount(tableRowCount: number) {
|
||||
this.personConfig.tableRowCount = tableRowCount;
|
||||
},
|
||||
// 设置要展示那些字段
|
||||
setShowFields(showField: any[]) {
|
||||
this.personConfig.showField = showField;
|
||||
},
|
||||
// 重置所有人员
|
||||
resetPerson() {
|
||||
this.personConfig.alreadyPersonList = [];
|
||||
this.personConfig.notPersonList = [];
|
||||
},
|
||||
// 重置已中奖人员
|
||||
resetAlreadyPerson() {
|
||||
// 把已中奖人员合并到未中奖人员，要验证是否已存在
|
||||
if(this.personConfig.alreadyPersonList.length>0){
|
||||
this.personConfig.notPersonList = this.personConfig.notPersonList.concat(this.personConfig.alreadyPersonList);
|
||||
this.personConfig.alreadyPersonList = [];
|
||||
}
|
||||
},
|
||||
// 重置所有配置
|
||||
reset() {
|
||||
this.personConfig = {
|
||||
alreadyPersonList:[] as IPersonConfig[],
|
||||
notPersonList:[] as IPersonConfig[],
|
||||
tableRowCount:12,
|
||||
showField:[] as string[]
|
||||
}
|
||||
},
|
||||
},
|
||||
persist: {
|
||||
enabled: true,
|
||||
strategies: [
|
||||
{
|
||||
// 如果要存储在localStorage中
|
||||
storage: localStorage,
|
||||
key: 'personConfig',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
59
src/store/prizeConfig.ts
Normal file
59
src/store/prizeConfig.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { IPrizeConfig } from '@/types/prizeConfig';
|
||||
export const usePrizeConfig = defineStore('prize', {
|
||||
state() {
|
||||
return {
|
||||
prizeConfig:{
|
||||
prizeList:[] as IPrizeConfig[],
|
||||
}
|
||||
};
|
||||
},
|
||||
getters: {
|
||||
// 获取全部配置
|
||||
getPrizeConfig(state) {
|
||||
return state.prizeConfig.prizeList;
|
||||
},
|
||||
// 根据id获取配置
|
||||
getPrizeConfigById(state) {
|
||||
return (id: number|string) => {
|
||||
return state.prizeConfig.prizeList.find(item => item.id === id);
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
actions: {
|
||||
// 设置奖项
|
||||
setPrizeConfig(prizeList:IPrizeConfig[]) {
|
||||
this.prizeConfig.prizeList = prizeList;
|
||||
},
|
||||
// 添加奖项
|
||||
addPrizeConfig(prizeConfigItem: IPrizeConfig) {
|
||||
this.prizeConfig.prizeList.push(prizeConfigItem);
|
||||
},
|
||||
// 删除奖项
|
||||
deletePrizeConfig(prizeConfigItemId: number|string) {
|
||||
this.prizeConfig.prizeList = this.prizeConfig.prizeList.filter(item => item.id!== prizeConfigItemId);
|
||||
},
|
||||
// 更新奖项数据
|
||||
updatePrizeConfig(prizeConfigItem: IPrizeConfig) {
|
||||
const index = this.prizeConfig.prizeList.findIndex(item => item.id === prizeConfigItem.id);
|
||||
this.prizeConfig.prizeList[index] = prizeConfigItem;
|
||||
},
|
||||
// 重置所有配置
|
||||
reset() {
|
||||
this.prizeConfig = {
|
||||
prizeList:[] as IPrizeConfig[],
|
||||
}
|
||||
},
|
||||
},
|
||||
persist: {
|
||||
enabled: true,
|
||||
strategies: [
|
||||
{
|
||||
// 如果要存储在localStorage中
|
||||
storage: localStorage,
|
||||
key: 'personConfig',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
@@ -1,22 +0,0 @@
|
||||
$theme-color: #2e1f78;
|
||||
$important-color: #02e5f6;
|
||||
$font-color: #fbfbfb;
|
||||
$light-color: #fd5913;
|
||||
$normal-color: #15115d;
|
||||
$dark-card-color: #fbfbfb;
|
||||
|
||||
$blue_theme: (
|
||||
theme-bg-color: $theme-color,
|
||||
font-color: $font-color,
|
||||
font-color-second: darken($font-color, 20%),
|
||||
light-bg-color: $light-color,
|
||||
normal-color: $normal-color,
|
||||
header-bg-color: lighten($theme-color, 10%),
|
||||
header-bg-color-hover: lighten($theme-color, 20%),
|
||||
shawdow-color: darken($theme-color, 5%),
|
||||
shawdow-color-hover: darken($theme-color, 15%),
|
||||
border-color: lighten($theme-color, 20%),
|
||||
important-color: lighten($important-color, 20%),
|
||||
important-bg-color: transparentize($important-color, 0.9),
|
||||
dark-card-color: $dark-card-color,
|
||||
);
|
||||
@@ -1,22 +0,0 @@
|
||||
$theme-color: #1e1f25;
|
||||
$important-color: #ff864d;
|
||||
$font-color: #fbfbfb;
|
||||
$light-color: #00e6f6;
|
||||
$normal-color: #183561;
|
||||
$dark-card-color: #fbfbfb;
|
||||
|
||||
$dark_theme: (
|
||||
theme-bg-color: $theme-color,
|
||||
font-color: $font-color,
|
||||
font-color-second: darken($font-color, 20%),
|
||||
light-bg-color: $light-color,
|
||||
normal-color: $normal-color,
|
||||
header-bg-color: lighten($theme-color, 10%),
|
||||
header-bg-color-hover: lighten($theme-color, 20%),
|
||||
shawdow-color: darken($theme-color, 5%),
|
||||
shawdow-color-hover: darken($theme-color, 15%),
|
||||
border-color: lighten($theme-color, 20%),
|
||||
important-color: lighten($important-color, 20%),
|
||||
important-bg-color: transparentize($important-color, 0.9),
|
||||
dark-card-color: $dark-card-color,
|
||||
);
|
||||
@@ -1,22 +0,0 @@
|
||||
$theme-color: #fbfbfb;
|
||||
$important-color: #6a47bb;
|
||||
$font-color: #030303;
|
||||
$light-color: #409eff;
|
||||
$normal-color: #fbfbfb;
|
||||
$dark-card-color: #fbfbfb;
|
||||
|
||||
$default: (
|
||||
theme-bg-color: $theme-color,
|
||||
font-color: $font-color,
|
||||
font-color-second: darken($font-color, 20%),
|
||||
light-bg-color: $light-color,
|
||||
normal-color: $normal-color,
|
||||
header-bg-color: lighten($theme-color, 10%),
|
||||
header-bg-color-hover: lighten($theme-color, 20%),
|
||||
shawdow-color: darken($theme-color, 5%),
|
||||
shawdow-color-hover: darken($theme-color, 15%),
|
||||
border-color: lighten($theme-color, 20%),
|
||||
important-color: lighten($important-color, 20%),
|
||||
important-bg-color: transparentize($important-color, 0.9),
|
||||
dark-card-color: $dark-card-color,
|
||||
);
|
||||
@@ -1,22 +0,0 @@
|
||||
$theme-color: #0a142e;
|
||||
$important-color: #8c5ff6;
|
||||
$font-color: #fbfbfb;
|
||||
$light-color: #c678fd;
|
||||
$normal-color: #0a142e;
|
||||
$dark-card-color: #fbfbfb;
|
||||
|
||||
$purple_theme: (
|
||||
theme-bg-color: $theme-color,
|
||||
font-color: $font-color,
|
||||
font-color-second: darken($font-color, 20%),
|
||||
light-bg-color: $light-color,
|
||||
normal-color: $normal-color,
|
||||
header-bg-color: lighten($theme-color, 10%),
|
||||
header-bg-color-hover: lighten($theme-color, 20%),
|
||||
shawdow-color: darken($theme-color, 5%),
|
||||
shawdow-color-hover: darken($theme-color, 15%),
|
||||
border-color: lighten($theme-color, 20%),
|
||||
important-color: lighten($important-color, 20%),
|
||||
important-bg-color: transparentize($important-color, 0.9),
|
||||
dark-card-color: $dark-card-color,
|
||||
);
|
||||
@@ -1 +0,0 @@
|
||||
import './global.scss';
|
||||
@@ -1,14 +0,0 @@
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
// background: $theme-bg-color;
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
// global.scss
|
||||
@import "./theme/index.scss";
|
||||
// variables.scss
|
||||
$primary-color: #fe4e5e;
|
||||
$background-color: #fefefe;
|
||||
@@ -9,3 +8,5 @@ $padding: 124px;
|
||||
// backgroundColor: $background-color;
|
||||
// padding: $padding;
|
||||
// }
|
||||
|
||||
/*end*/
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
@import "./default.scss"; //默认主题颜色
|
||||
@import "./dark_theme.scss"; // 红色主题颜色
|
||||
@import "./blue_theme.scss"; // 灰色主题颜色
|
||||
@import "./purple_theme.scss"; // 灰色主题颜色
|
||||
//生成对应元素的主题样式代码
|
||||
//主题参数
|
||||
$themes: (
|
||||
default: $default,
|
||||
blue_theme: $blue_theme,
|
||||
dark_theme: $dark_theme,
|
||||
purple_theme: $purple_theme,
|
||||
);
|
||||
// 生成body的主题样式
|
||||
@mixin themeify {
|
||||
@each $themes-key, $themes-map in $themes {
|
||||
$themes-map: $themes-map !global;
|
||||
&[data-theme="#{$themes-key}"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 生成子元素样式
|
||||
@mixin themeChildify {
|
||||
@each $themes-key, $themes-map in $themes {
|
||||
$themes-map: $themes-map !global;
|
||||
[data-theme="#{$themes-key}"] & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 获取主题对应的theme-color
|
||||
@function getThemeColor($key) {
|
||||
$currentTheme: map-get($themes, $key);
|
||||
@return map-get($currentTheme, "theme-bg-color");
|
||||
}
|
||||
@function themed($key) {
|
||||
@if map-get($themes-map, $key) {
|
||||
@return map-get($themes-map, $key);
|
||||
} @else {
|
||||
@return $key;
|
||||
}
|
||||
}
|
||||
// 随机数颜色
|
||||
@function themedRandom($key) {
|
||||
@if map-get($themes-map, $key) {
|
||||
@return map-get($themes-map, $key);
|
||||
} @else {
|
||||
@return $key;
|
||||
}
|
||||
} ;
|
||||
41
src/style/style.scss
Normal file
41
src/style/style.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
.element-card {
|
||||
width: 140px;
|
||||
height: 200px;
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(127, 255, 255, 0.25);
|
||||
box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid rgba(127, 255, 255, 0.75);
|
||||
box-shadow: 0 0 12px rgba(0, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.card-id {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
font-size: 12px;
|
||||
color: rgba(127, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.card-name {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0px;
|
||||
right: 0;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
text-shadow: 0 0 10px rgba(0, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.card-detail {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 15px;
|
||||
font-size: 12px;
|
||||
color: rgba(127, 255, 255, 0.75);
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
$theme-color: #2e1f78;
|
||||
$important-color: #02e5f6;
|
||||
$font-color: #fbfbfb;
|
||||
$light-color: #fd5913;
|
||||
$normal-color: #15115d;
|
||||
$dark-card-color: #fbfbfb;
|
||||
|
||||
$blue_theme: (
|
||||
theme-bg-color: $theme-color,
|
||||
font-color: $font-color,
|
||||
font-color-second: darken($font-color, 20%),
|
||||
light-bg-color: $light-color,
|
||||
normal-color: $normal-color,
|
||||
header-bg-color: lighten($theme-color, 10%),
|
||||
header-bg-color-hover: lighten($theme-color, 20%),
|
||||
shawdow-color: darken($theme-color, 5%),
|
||||
shawdow-color-hover: darken($theme-color, 15%),
|
||||
border-color: lighten($theme-color, 20%),
|
||||
important-color: lighten($important-color, 20%),
|
||||
important-bg-color: transparentize($important-color, 0.9),
|
||||
dark-card-color: $dark-card-color,
|
||||
);
|
||||
@@ -1,22 +0,0 @@
|
||||
$theme-color: #1e1f25;
|
||||
$important-color: #ff864d;
|
||||
$font-color: #fbfbfb;
|
||||
$light-color: #00e6f6;
|
||||
$normal-color: #183561;
|
||||
$dark-card-color: #fbfbfb;
|
||||
|
||||
$dark_theme: (
|
||||
theme-bg-color: $theme-color,
|
||||
font-color: $font-color,
|
||||
font-color-second: darken($font-color, 20%),
|
||||
light-bg-color: $light-color,
|
||||
normal-color: $normal-color,
|
||||
header-bg-color: lighten($theme-color, 10%),
|
||||
header-bg-color-hover: lighten($theme-color, 20%),
|
||||
shawdow-color: darken($theme-color, 5%),
|
||||
shawdow-color-hover: darken($theme-color, 15%),
|
||||
border-color: lighten($theme-color, 20%),
|
||||
important-color: lighten($important-color, 20%),
|
||||
important-bg-color: transparentize($important-color, 0.9),
|
||||
dark-card-color: $dark-card-color,
|
||||
);
|
||||
@@ -1,22 +0,0 @@
|
||||
$theme-color: #fbfbfb;
|
||||
$important-color: #6a47bb;
|
||||
$font-color: #030303;
|
||||
$light-color: #409eff;
|
||||
$normal-color: #fbfbfb;
|
||||
$dark-card-color: #fbfbfb;
|
||||
|
||||
$default: (
|
||||
theme-bg-color: $theme-color,
|
||||
font-color: $font-color,
|
||||
font-color-second: darken($font-color, 20%),
|
||||
light-bg-color: $light-color,
|
||||
normal-color: $normal-color,
|
||||
header-bg-color: lighten($theme-color, 10%),
|
||||
header-bg-color-hover: lighten($theme-color, 20%),
|
||||
shawdow-color: darken($theme-color, 5%),
|
||||
shawdow-color-hover: darken($theme-color, 15%),
|
||||
border-color: lighten($theme-color, 20%),
|
||||
important-color: lighten($important-color, 20%),
|
||||
important-bg-color: transparentize($important-color, 0.9),
|
||||
dark-card-color: $dark-card-color,
|
||||
);
|
||||
@@ -1,22 +0,0 @@
|
||||
$theme-color: #0a142e;
|
||||
$important-color: #8c5ff6;
|
||||
$font-color: #fbfbfb;
|
||||
$light-color: #c678fd;
|
||||
$normal-color: #0a142e;
|
||||
$dark-card-color: #fbfbfb;
|
||||
|
||||
$purple_theme: (
|
||||
theme-bg-color: $theme-color,
|
||||
font-color: $font-color,
|
||||
font-color-second: darken($font-color, 20%),
|
||||
light-bg-color: $light-color,
|
||||
normal-color: $normal-color,
|
||||
header-bg-color: lighten($theme-color, 10%),
|
||||
header-bg-color-hover: lighten($theme-color, 20%),
|
||||
shawdow-color: darken($theme-color, 5%),
|
||||
shawdow-color-hover: darken($theme-color, 15%),
|
||||
border-color: lighten($theme-color, 20%),
|
||||
important-color: lighten($important-color, 20%),
|
||||
important-bg-color: transparentize($important-color, 0.9),
|
||||
dark-card-color: $dark-card-color,
|
||||
);
|
||||
@@ -1,50 +0,0 @@
|
||||
@import "./default.scss"; //默认主题颜色
|
||||
@import "./dark_theme.scss"; // 红色主题颜色
|
||||
@import "./blue_theme.scss"; // 灰色主题颜色
|
||||
@import "./purple_theme.scss"; // 灰色主题颜色
|
||||
//生成对应元素的主题样式代码
|
||||
//主题参数
|
||||
$themes: (
|
||||
default: $default,
|
||||
blue_theme: $blue_theme,
|
||||
dark_theme: $dark_theme,
|
||||
purple_theme: $purple_theme,
|
||||
);
|
||||
// 生成body的主题样式
|
||||
@mixin themeify {
|
||||
@each $themes-key, $themes-map in $themes {
|
||||
$themes-map: $themes-map !global;
|
||||
&[data-theme="#{$themes-key}"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 生成子元素样式
|
||||
@mixin themeChildify {
|
||||
@each $themes-key, $themes-map in $themes {
|
||||
$themes-map: $themes-map !global;
|
||||
[data-theme="#{$themes-key}"] & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 获取主题对应的theme-color
|
||||
@function getThemeColor($key) {
|
||||
$currentTheme: map-get($themes, $key);
|
||||
@return map-get($currentTheme, "theme-bg-color");
|
||||
}
|
||||
@function themed($key) {
|
||||
@if map-get($themes-map, $key) {
|
||||
@return map-get($themes-map, $key);
|
||||
} @else {
|
||||
@return $key;
|
||||
}
|
||||
}
|
||||
// 随机数颜色
|
||||
@function themedRandom($key) {
|
||||
@if map-get($themes-map, $key) {
|
||||
@return map-get($themes-map, $key);
|
||||
} @else {
|
||||
@return $key;
|
||||
}
|
||||
} ;
|
||||
10
src/types/personConfig.ts
Normal file
10
src/types/personConfig.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
export interface IPersonConfig {
|
||||
id: number;
|
||||
uid: string;
|
||||
name: string;
|
||||
department:string;
|
||||
other:string;
|
||||
isWin:boolean;
|
||||
x:number;
|
||||
y:number
|
||||
}
|
||||
10
src/types/prizeConfig.ts
Normal file
10
src/types/prizeConfig.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
export interface IPrizeConfig {
|
||||
id: number|string;
|
||||
name:string;
|
||||
sort:number;
|
||||
isAll:boolean;
|
||||
count:number;
|
||||
picture:string[];
|
||||
desc:string;
|
||||
isShow:boolean;
|
||||
}
|
||||
19
src/utils/file.ts
Normal file
19
src/utils/file.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
export const readFile = (file: any) => {
|
||||
return new Promise(resolve => {
|
||||
const reader = new FileReader()
|
||||
reader.readAsBinaryString(file)
|
||||
reader.onload = (ev: any) => {
|
||||
resolve(ev.target.result)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const readImage = (file: any) => {
|
||||
return new Promise(resolve => {
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(file)
|
||||
reader.onload = (ev: any) => {
|
||||
resolve({dataUrl:ev.target.result,fileName:file.name})
|
||||
}
|
||||
})
|
||||
}
|
||||
0
src/utils/indexDB.ts
Normal file
0
src/utils/indexDB.ts
Normal file
10
src/utils/store.ts
Normal file
10
src/utils/store.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
// 提取有哪些字段
|
||||
export const extractFields = (data: any) => {
|
||||
const item=data[0];
|
||||
// 排除id x y，其他都加入数组
|
||||
const keys = Object.keys(item).filter(key => key!== 'id' && key!== 'x' && key!== 'y');
|
||||
if(keys.length>0){
|
||||
// 返回数组key value
|
||||
return keys.map(key => ({label:key,value:true}));
|
||||
}
|
||||
};
|
||||
90
src/views/Config/Global/FaceConfig.vue
Normal file
90
src/views/Config/Global/FaceConfig.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<script setup lang='ts'>
|
||||
import { ref, watch } from 'vue'
|
||||
import useStore from '@/store'
|
||||
import zod from 'zod';
|
||||
|
||||
const personConfig = useStore().personConfig
|
||||
const { getTableRowCount: tableRowCount, getShowField} = personConfig
|
||||
|
||||
const formData = ref({
|
||||
rowCount: tableRowCount,
|
||||
showField: getShowField
|
||||
})
|
||||
const formErr = ref({
|
||||
rowCount: '',
|
||||
})
|
||||
|
||||
const schema = zod.object({
|
||||
rowCount: zod.number({
|
||||
required_error: '必填项',
|
||||
invalid_type_error: '必须填入数字',
|
||||
})
|
||||
.min(1, '最小为1')
|
||||
.max(100, '最大为100')
|
||||
// 格式化
|
||||
|
||||
|
||||
})
|
||||
type ValidatePayload = zod.infer<typeof schema>
|
||||
const payload: ValidatePayload = {
|
||||
rowCount: formData.value.rowCount,
|
||||
}
|
||||
const parseSchema = (props: ValidatePayload) => {
|
||||
return schema.parseAsync(props)
|
||||
}
|
||||
|
||||
|
||||
const handleChangeShowFields = (fieldItem: any) => {
|
||||
formData.value.showField.map((item)=>{
|
||||
if(item.label===fieldItem.label){
|
||||
item.value=!item.value
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => formData.value.rowCount, () => {
|
||||
payload.rowCount = formData.value.rowCount
|
||||
parseSchema(payload).then(res => {
|
||||
console.log('code line-40 \n\r😀 res:\n\r', res);
|
||||
if(res.rowCount){
|
||||
personConfig.setTableRowCount(res.rowCount)
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
formErr.value.rowCount = err.issues[0].message
|
||||
})
|
||||
})
|
||||
watch(() => formData.value.showField, () => {
|
||||
personConfig.setShowFields(formData.value.showField)
|
||||
},{deep:true})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">列数</span>
|
||||
</div>
|
||||
<input type="number" v-model="formData.rowCount" placeholder="Type here"
|
||||
class="w-full max-w-xs input input-bordered" />
|
||||
<div class="help">
|
||||
<span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
|
||||
{{ formErr.rowCount }}
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">展示字段</span>
|
||||
</div>
|
||||
<ul class="flex gap-6 pl-0">
|
||||
<li v-for="item in formData.showField" :key="item" class="flex items-center gap-1">
|
||||
<input type="checkbox" :checked="item.value" class="border-solid checkbox checkbox-primary border-1" @change="handleChangeShowFields(item)"/>
|
||||
<span class="label-text">{{ item.label }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped></style>
|
||||
91
src/views/Config/Global/ImageConfig.vue
Normal file
91
src/views/Config/Global/ImageConfig.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<script setup lang='ts'>
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { readImage } from '@/utils/file'
|
||||
import localforage from 'localforage'
|
||||
|
||||
const limitType = ref('image/*')
|
||||
const imgList = ref<any>([])
|
||||
const imgUploadToast = ref(0) //0是不显示，1是成功，2是失败,3是不是图片
|
||||
const imageDbStore = localforage.createInstance({
|
||||
name: 'imgStore'
|
||||
})
|
||||
const handleFileChange = async (e: any) => {
|
||||
const isImage= /image*/.test(e.target.files[0].type)
|
||||
if (!isImage) {
|
||||
imgUploadToast.value = 3
|
||||
|
||||
return
|
||||
}
|
||||
let { dataUrl, fileName } = await readImage(e.target.files[0])
|
||||
imageDbStore.setItem(new Date().getTime().toString() + '+' + fileName, dataUrl)
|
||||
.then(() => {
|
||||
imgUploadToast.value = 1
|
||||
})
|
||||
.catch(() => {
|
||||
imgUploadToast.value = 2
|
||||
})
|
||||
}
|
||||
|
||||
const getImageDbStore =async () => {
|
||||
const keys =await imageDbStore.keys()
|
||||
if(keys.length>0){
|
||||
imageDbStore.iterate((value, key) => {
|
||||
imgList.value.push({
|
||||
key,
|
||||
value
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getImageDbStore()
|
||||
})
|
||||
watch(() => imgUploadToast.value, (val) => {
|
||||
if (val !== 0) {
|
||||
setTimeout(() => {
|
||||
imgUploadToast.value = 0
|
||||
}, 2000)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toast toast-top toast-end">
|
||||
<div class="alert alert-error" v-if="imgUploadToast == 2">
|
||||
<span>上传失败</span>
|
||||
</div>
|
||||
<div class="alert alert-success" v-if="imgUploadToast == 1">
|
||||
<span>上传成功</span>
|
||||
</div>
|
||||
<div class="alert alert-error" v-if="imgUploadToast == 3">
|
||||
<span>不是图片</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="">
|
||||
<label for="explore">
|
||||
<input type="file" class="" id="explore" style="display: none" @change="handleFileChange"
|
||||
:accept="limitType" />
|
||||
<span class="btn btn-primary btn-sm">上传图片</span>
|
||||
</label>
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="item in imgList" :key="item">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="avatar">
|
||||
<div class="mask mask-squircle w-12 h-12">
|
||||
<img :src="item.value" alt="Avatar Tailwind CSS Component" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-bold">{{ item.key.split('+')[1] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped></style>
|
||||
121
src/views/Config/Person/PersonAll.vue
Normal file
121
src/views/Config/Person/PersonAll.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<!-- eslint-disable vue/no-parsing-error -->
|
||||
<script setup lang='ts'>
|
||||
import { ref } from 'vue';
|
||||
import useStore from '@/store'
|
||||
import * as XLSX from 'xlsx'
|
||||
import { readFile } from '@/utils/file'
|
||||
import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
|
||||
|
||||
import {extractFields} from '@/utils/store'
|
||||
|
||||
const personConfig = useStore().personConfig
|
||||
|
||||
const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList ,getTableRowCount:rowCount} = personConfig
|
||||
const limitType = '.xlsx,.xls'
|
||||
const excelData = ref<any[]>([])
|
||||
const personList = ref<any[]>(
|
||||
notPersonList.concat(alreadyPersonList)
|
||||
)
|
||||
const handleFileChange = async (e: any) => {
|
||||
let dataBinary = await readFile(e.target.files[0])
|
||||
let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
|
||||
let workSheet = workBook.Sheets[workBook.SheetNames[0]]
|
||||
excelData.value = XLSX.utils.sheet_to_json(workSheet)
|
||||
personList.value = filterData(excelData.value)
|
||||
|
||||
const keys=extractFields(personList.value)
|
||||
personConfig.resetPerson()
|
||||
personConfig.setShowFields(keys)
|
||||
personConfig.addNotPersonList(personList.value)
|
||||
}
|
||||
|
||||
const filterData = (tableData: any[]) => {
|
||||
const dataLength = tableData.length
|
||||
let j = 0;
|
||||
for (let i = 0; i < dataLength; i++) {
|
||||
if (i % rowCount === 0) {
|
||||
j++;
|
||||
}
|
||||
tableData[i].x = i % rowCount + 1;
|
||||
tableData[i].y = j;
|
||||
tableData[i].id = i;
|
||||
// 是否中奖
|
||||
tableData[i].isWin = false
|
||||
}
|
||||
|
||||
return personList.value = tableData
|
||||
}
|
||||
const deleteAll = () => {
|
||||
personConfig.deleteAllPerson()
|
||||
personList.value = notPersonList.concat(alreadyPersonList)
|
||||
}
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
label: '编号',
|
||||
props: 'uid',
|
||||
},
|
||||
{
|
||||
label: '姓名',
|
||||
props: 'name',
|
||||
},
|
||||
{
|
||||
label: '部门',
|
||||
props: 'department',
|
||||
},
|
||||
{
|
||||
label: '职位',
|
||||
props: 'other',
|
||||
},
|
||||
{
|
||||
label:'是否已中奖',
|
||||
props: 'isWin',
|
||||
formatValue(row: any) {
|
||||
return row.isWin? '是' : '否'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
type: 'btn-info',
|
||||
onClick: (row: any) => {
|
||||
console.log('编辑:', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
type: 'btn-error',
|
||||
onClick: (row: any) => {
|
||||
console.log('删除:', row)
|
||||
}
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="overflow-y-auto">
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button>
|
||||
<div class="">
|
||||
<label for="explore">
|
||||
<input type="file"
|
||||
class=""
|
||||
id="explore"
|
||||
style="display: none"
|
||||
@change="handleFileChange" :accept="limitType" />
|
||||
<span class="btn btn-primary btn-sm">上传文件</span>
|
||||
</label>
|
||||
<!-- <button class="btn btn-primary btn-sm">上传excel</button> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<DaiysuiTable :tableColumns="tableColumns" :data="personList"></DaiysuiTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped></style>
|
||||
70
src/views/Config/Person/PersonAlready.vue
Normal file
70
src/views/Config/Person/PersonAlready.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<!-- eslint-disable vue/no-parsing-error -->
|
||||
<script setup lang='ts'>
|
||||
import { ref } from 'vue';
|
||||
import useStore from '@/store'
|
||||
import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
|
||||
|
||||
const personConfig = useStore().personConfig
|
||||
|
||||
const { getAlreadyPersonList: alreadyPersonList } = personConfig
|
||||
const personList = ref<any[]>(
|
||||
alreadyPersonList
|
||||
)
|
||||
|
||||
|
||||
const deleteAll = () => {
|
||||
personConfig.deleteAllPerson()
|
||||
personList.value = alreadyPersonList
|
||||
}
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
label: '编号',
|
||||
props: 'uid',
|
||||
},
|
||||
{
|
||||
label: '姓名',
|
||||
props: 'name',
|
||||
},
|
||||
{
|
||||
label: '部门',
|
||||
props: 'department',
|
||||
},
|
||||
{
|
||||
label: '职位',
|
||||
props: 'other',
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
actions: [
|
||||
{
|
||||
label: '编辑',
|
||||
type: 'btn-info',
|
||||
onClick: (row: any) => {
|
||||
console.log('编辑:', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
type: 'btn-error',
|
||||
onClick: (row: any) => {
|
||||
console.log('删除:', row)
|
||||
}
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="overflow-y-auto">
|
||||
<div class="flex justify-center gap-3">
|
||||
<button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button>
|
||||
|
||||
</div>
|
||||
<DaiysuiTable :tableColumns="tableColumns" :data="personList"></DaiysuiTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped></style>
|
||||
13
src/views/Config/Person/PersonConfig.vue
Normal file
13
src/views/Config/Person/PersonConfig.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<script setup lang='ts'>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
114
src/views/Config/Prize/PrizeConfig.vue
Normal file
114
src/views/Config/Prize/PrizeConfig.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<script setup lang='ts'>
|
||||
import { ref, onMounted,watch } from 'vue'
|
||||
import useStore from '@/store'
|
||||
|
||||
import localforage from 'localforage'
|
||||
import { IPrizeConfig } from '@/types/prizeConfig';
|
||||
|
||||
const imageDbStore = localforage.createInstance({
|
||||
name: 'imgStore'
|
||||
})
|
||||
const prizeConfig = useStore().prizeConfig
|
||||
const { getPrizeConfig } = prizeConfig
|
||||
const prizeList = ref(getPrizeConfig)
|
||||
const imgList = ref<any[]>([])
|
||||
const addPrize = () => {
|
||||
const defaultPrizeCOnfig: IPrizeConfig = {
|
||||
id: new Date().getTime().toString(),
|
||||
name: '奖项',
|
||||
sort: 0,
|
||||
isAll: false,
|
||||
count: 1,
|
||||
picture: [''],
|
||||
desc: '',
|
||||
isShow: true
|
||||
}
|
||||
prizeConfig.addPrizeConfig(defaultPrizeCOnfig)
|
||||
}
|
||||
|
||||
const getImageDbStore = async () => {
|
||||
const keys = await imageDbStore.keys()
|
||||
if (keys.length > 0) {
|
||||
imageDbStore.iterate((value, key) => {
|
||||
imgList.value.push({
|
||||
key,
|
||||
value
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const sort = (item:any,isUp:number) => {
|
||||
const itemIndex=prizeList.value.indexOf(item)
|
||||
if(isUp==1){
|
||||
prizeList.value.splice(itemIndex,1)
|
||||
prizeList.value.splice(itemIndex-1,0,item)
|
||||
}else{
|
||||
prizeList.value.splice(itemIndex,1)
|
||||
prizeList.value.splice(itemIndex+1,0,item)
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
getImageDbStore()
|
||||
})
|
||||
watch(()=>prizeList,()=>{
|
||||
console.log('prizeList',prizeList.value)
|
||||
prizeConfig.setPrizeConfig(prizeList.value)
|
||||
},{deep:true})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h2>奖项配置</h2>
|
||||
<ul>
|
||||
<li v-for="item in prizeList" :key="item.id" class="flex gap-10">
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<!-- 向上向下 -->
|
||||
<div class="flex flex-col items-center gap-2 pt-5">
|
||||
<svg-icon class="hover:text-blue-400 cursor-pointer" :class="prizeList.indexOf(item)==0?'opacity-0 cursor-default':''" name="up" @click="sort(item,1)"></svg-icon>
|
||||
<svg-icon class="hover:text-blue-400 cursor-pointer" name="down" @click="sort(item,0)" :class="prizeList.indexOf(item)==prizeList.length-1?'opacity-0 cursor-default':''"></svg-icon>
|
||||
</div>
|
||||
</label>
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">名称</span>
|
||||
</div>
|
||||
<input type="text" v-model="item.name" placeholder="名称" class="w-full input-sm max-w-xs input input-bordered" />
|
||||
</label>
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">是否全员参加</span>
|
||||
</div>
|
||||
<input type="checkbox" :checked="item.isAll" @change="item.isAll =!item.isAll"
|
||||
class="checkbox checkbox-secondary border-1 border-solid mt-2" />
|
||||
</label>
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">获奖人数</span>
|
||||
</div>
|
||||
<input type="number" v-model="item.count" placeholder="获奖人数"
|
||||
class="w-full max-w-xs input-sm input input-bordered" />
|
||||
</label>
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">图片</span>
|
||||
</div>
|
||||
<select class="select select-warning w-full select-sm max-w-xs" v-model="item.picture">
|
||||
<option disabled selected>选择一张图片</option>
|
||||
<option v-for="picItem in imgList" :key="picItem.key">{{ picItem.key.split('+')[1] }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">是否显示</span>
|
||||
</div>
|
||||
<input type="checkbox" :checked="item.isShow" @change="item.isShow =!item.isShow"
|
||||
class="checkbox checkbox-secondary border-1 border-solid mt-2" />
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="btn btn-info" @click="addPrize">添加</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped></style>
|
||||
57
src/views/Config/index.vue
Normal file
57
src/views/Config/index.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
import { ref,onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { configRoutes } from '../../router';
|
||||
|
||||
const router = useRouter();
|
||||
const menuList = ref(configRoutes.children);
|
||||
|
||||
const cleanMenuList=(menu:any)=>{
|
||||
const newList=menu;
|
||||
for(let i=0;i<newList.length;i++){
|
||||
if(newList[i].children){
|
||||
cleanMenuList(newList[i].children);
|
||||
}
|
||||
if(!newList[i].meta){
|
||||
newList.splice(i,1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
|
||||
return newList;
|
||||
}
|
||||
menuList.value=cleanMenuList(menuList.value);
|
||||
|
||||
const skip=(path:string)=>{
|
||||
router.push(path);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex">
|
||||
<ul class="w-56 h-screen m-0 menu bg-base-200 pt-14 rounded-box">
|
||||
<li v-for="item in menuList" :key="item.name">
|
||||
<details open v-if="item.children">
|
||||
<summary>{{ item.meta.title }}</summary>
|
||||
<ul>
|
||||
<li v-for="subItem in item.children" :key="subItem.name">
|
||||
<details open v-if="subItem.children">
|
||||
<summary>{{ subItem.meta.title }}</summary>
|
||||
<ul>
|
||||
<li v-for="subSubItem in subItem.children" :key="subSubItem.name">
|
||||
<a @click="skip(subItem.path)">{{ subSubItem.meta!.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<a v-else @click="skip(subItem.path)">{{ subItem.meta!.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<a v-else @click="skip(item.path)">{{ item.meta!.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,7 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
</script>
|
||||
|
||||
<template>Doc</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,7 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
</script>
|
||||
|
||||
<template>project</template>
|
||||
|
||||
<style scoped></style>
|
||||
170
src/views/Home/data.ts
Normal file
170
src/views/Home/data.ts
Normal file
@@ -0,0 +1,170 @@
|
||||
export const tableData = [
|
||||
'H', 'Hydrogen', '1.00794', 1, 1,
|
||||
'He', 'Helium', '4.002602', 2, 1,
|
||||
'Li', 'Lithium', '6.941', 3, 1,
|
||||
'Be', 'Beryllium', '9.012182', 4, 1,
|
||||
'B', 'Boron', '10.811', 13, 2,
|
||||
'C', 'Carbon', '12.0107', 14, 2,
|
||||
'N', 'Nitrogen', '14.0067', 15, 2,
|
||||
'O', 'Oxygen', '15.9994', 16, 2,
|
||||
'F', 'Fluorine', '18.9984032', 17, 2,
|
||||
'Ne', 'Neon', '20.1797', 18, 2,
|
||||
'Na', 'Sodium', '22.98976...', 1, 3,
|
||||
'Mg', 'Magnesium', '24.305', 2, 3,
|
||||
'Al', 'Aluminium', '26.9815386', 13, 3,
|
||||
'Si', 'Silicon', '28.0855', 14, 3,
|
||||
'P', 'Phosphorus', '30.973762', 15, 3,
|
||||
'S', 'Sulfur', '32.065', 16, 3,
|
||||
'Cl', 'Chlorine', '35.453', 17, 3,
|
||||
'Ar', 'Argon', '39.948', 18, 3,
|
||||
'K', 'Potassium', '39.948', 1, 4,
|
||||
'Ca', 'Calcium', '40.078', 2, 4,
|
||||
'Sc', 'Scandium', '44.955912', 3, 4,
|
||||
'Ti', 'Titanium', '47.867', 4, 4,
|
||||
'V', 'Vanadium', '50.9415', 5, 4,
|
||||
'Cr', 'Chromium', '51.9961', 6, 4,
|
||||
'Mn', 'Manganese', '54.938045', 7, 4,
|
||||
'Fe', 'Iron', '55.845', 8, 4,
|
||||
'Co', 'Cobalt', '58.933195', 9, 4,
|
||||
'Ni', 'Nickel', '58.6934', 10, 4,
|
||||
'Cu', 'Copper', '63.546', 11, 4,
|
||||
'Zn', 'Zinc', '65.38', 12, 4,
|
||||
'Ga', 'Gallium', '69.723', 13, 4,
|
||||
'Ge', 'Germanium', '72.63', 14, 4,
|
||||
'As', 'Arsenic', '74.9216', 15, 4,
|
||||
'Se', 'Selenium', '78.96', 16, 4,
|
||||
'Br', 'Bromine', '79.904', 17, 4,
|
||||
'Kr', 'Krypton', '83.798', 18, 4,
|
||||
'Rb', 'Rubidium', '85.4678', 1, 5,
|
||||
'Sr', 'Strontium', '87.62', 2, 5,
|
||||
'Y', 'Yttrium', '88.90585', 3, 5,
|
||||
'Zr', 'Zirconium', '91.224', 4, 5,
|
||||
'Nb', 'Niobium', '92.90628', 5, 5,
|
||||
'Mo', 'Molybdenum', '95.96', 6, 5,
|
||||
'Tc', 'Technetium', '(98)', 7, 5,
|
||||
'Ru', 'Ruthenium', '101.07', 8, 5,
|
||||
'Rh', 'Rhodium', '102.9055', 9, 5,
|
||||
'Pd', 'Palladium', '106.42', 10, 5,
|
||||
'Ag', 'Silver', '107.8682', 11, 5,
|
||||
'Cd', 'Cadmium', '112.411', 12, 5,
|
||||
'In', 'Indium', '114.818', 13, 5,
|
||||
'Sn', 'Tin', '118.71', 14, 5,
|
||||
'Sb', 'Antimony', '121.76', 15, 5,
|
||||
'Te', 'Tellurium', '127.6', 16, 5,
|
||||
'I', 'Iodine', '126.90447', 17, 5,
|
||||
'Xe', 'Xenon', '131.293', 18, 5,
|
||||
'Cs', 'Caesium', '132.9054', 1, 6,
|
||||
'Ba', 'Barium', '132.9054', 2, 6,
|
||||
'La', 'Lanthanum', '138.90547', 4, 9,
|
||||
'Ce', 'Cerium', '140.116', 5, 9,
|
||||
'Pr', 'Praseodymium', '140.90765', 6, 9,
|
||||
'Nd', 'Neodymium', '144.242', 7, 9,
|
||||
'Pm', 'Promethium', '(145)', 8, 9,
|
||||
'Sm', 'Samarium', '150.36', 9, 9,
|
||||
'Eu', 'Europium', '151.964', 10, 9,
|
||||
'Gd', 'Gadolinium', '157.25', 11, 9,
|
||||
'Tb', 'Terbium', '158.92535', 12, 9,
|
||||
'Dy', 'Dysprosium', '162.5', 13, 9,
|
||||
'Ho', 'Holmium', '164.93032', 14, 9,
|
||||
'Er', 'Erbium', '167.259', 15, 9,
|
||||
'Tm', 'Thulium', '168.93421', 16, 9,
|
||||
'Yb', 'Ytterbium', '173.054', 17, 9,
|
||||
'Lu', 'Lutetium', '174.9668', 18, 9,
|
||||
'Hf', 'Hafnium', '178.49', 4, 6,
|
||||
'Ta', 'Tantalum', '180.94788', 5, 6,
|
||||
'W', 'Tungsten', '183.84', 6, 6,
|
||||
'Re', 'Rhenium', '186.207', 7, 6,
|
||||
'Os', 'Osmium', '190.23', 8, 6,
|
||||
'Ir', 'Iridium', '192.217', 9, 6,
|
||||
'Pt', 'Platinum', '195.084', 10, 6,
|
||||
'Au', 'Gold', '196.966569', 11, 6,
|
||||
'Hg', 'Mercury', '200.59', 12, 6,
|
||||
'Tl', 'Thallium', '204.3833', 13, 6,
|
||||
'Pb', 'Lead', '207.2', 14, 6,
|
||||
'Bi', 'Bismuth', '208.9804', 15, 6,
|
||||
'Po', 'Polonium', '(209)', 16, 6,
|
||||
'At', 'Astatine', '(210)', 17, 6,
|
||||
'Rn', 'Radon', '(222)', 18, 6,
|
||||
'Fr', 'Francium', '(223)', 1, 7,
|
||||
'Ra', 'Radium', '(226)', 2, 7,
|
||||
'Ac', 'Actinium', '(227)', 4, 10,
|
||||
'Th', 'Thorium', '232.03806', 5, 10,
|
||||
'Pa', 'Protactinium', '231.0588', 6, 10,
|
||||
'U', 'Uranium', '238.02891', 7, 10,
|
||||
'Np', 'Neptunium', '(237)', 8, 10,
|
||||
'Pu', 'Plutonium', '(244)', 9, 10,
|
||||
'Am', 'Americium', '(243)', 10, 10,
|
||||
'Cm', 'Curium', '(247)', 11, 10,
|
||||
'Bk', 'Berkelium', '(247)', 12, 10,
|
||||
'Cf', 'Californium', '(251)', 13, 10,
|
||||
'Es', 'Einstenium', '(252)', 14, 10,
|
||||
'Fm', 'Fermium', '(257)', 15, 10,
|
||||
'Md', 'Mendelevium', '(258)', 16, 10,
|
||||
'No', 'Nobelium', '(259)', 17, 10,
|
||||
'Lr', 'Lawrencium', '(262)', 18, 10,
|
||||
'Rf', 'Rutherfordium', '(267)', 4, 7,
|
||||
'Db', 'Dubnium', '(268)', 5, 7,
|
||||
'Sg', 'Seaborgium', '(271)', 6, 7,
|
||||
'Bh', 'Bohrium', '(272)', 7, 7,
|
||||
'Hs', 'Hassium', '(270)', 8, 7,
|
||||
'Mt', 'Meitnerium', '(276)', 9, 7,
|
||||
'Ds', 'Darmstadium', '(281)', 10, 7,
|
||||
'Rg', 'Roentgenium', '(280)', 11, 7,
|
||||
'Cn', 'Copernicium', '(285)', 12, 7,
|
||||
'Uut', 'Unutrium', '(284)', 13, 7,
|
||||
'Fl', 'Flerovium', '(289)', 14, 7,
|
||||
'Uup', 'Ununpentium', '(288)', 15, 7,
|
||||
'Lv', 'Livermorium', '(293)', 16, 7,
|
||||
'Uus', 'Ununseptium', '(294)', 17, 7,
|
||||
'Uuo', 'Ununoctium', '(294)', 18, 7
|
||||
]
|
||||
|
||||
|
||||
export const tableData2 = [
|
||||
{
|
||||
id:'1',
|
||||
uid:'0002781821',
|
||||
name:'黄飞虎',
|
||||
department:'H',
|
||||
other:'1.00794',
|
||||
x:1,
|
||||
y:1,
|
||||
},
|
||||
{
|
||||
id:'2',
|
||||
uid:'089281',
|
||||
name:'欧阳飞剑',
|
||||
department:'He',
|
||||
other:'4.002602',
|
||||
x:2,
|
||||
y:1,
|
||||
},
|
||||
{
|
||||
id:'3',
|
||||
uid:'981721212',
|
||||
name:'令狐冲',
|
||||
department:'Li',
|
||||
other:'6.941',
|
||||
x:3,
|
||||
y:1,
|
||||
},
|
||||
{
|
||||
id:'4',
|
||||
uid:'91888212',
|
||||
name:'黄沾',
|
||||
department:'Be',
|
||||
other:9.012182,
|
||||
x:4,
|
||||
y:1,
|
||||
},
|
||||
{
|
||||
id:'5',
|
||||
uid:'918821212',
|
||||
name:'林可致',
|
||||
department:'B',
|
||||
other:'10.811',
|
||||
x:5,
|
||||
y:1
|
||||
}
|
||||
|
||||
]
|
||||
@@ -1,70 +1,250 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import HelloWorld from '../../components/HelloWorld.vue';
|
||||
import useStore from '@/store/index';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { IUser } from '@/types/user';
|
||||
import { ref, onMounted } from 'vue'
|
||||
// import { tableData2 as tableData } from './data'
|
||||
import * as THREE from 'three'
|
||||
import {
|
||||
CSS3DRenderer, CSS3DObject
|
||||
} from 'three/examples/jsm/renderers/CSS3DRenderer.js';
|
||||
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
|
||||
import TWEEN from 'three/examples/jsm/libs/tween.module.js';
|
||||
import useStore from '@/store'
|
||||
|
||||
import { getData } from '@/api/main';
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
const data = ref<any>(null);
|
||||
const fetchData = async () => {
|
||||
const res = await getData({});
|
||||
data.value = res;
|
||||
console.log('😊data.value:', data.value);
|
||||
const personConfig=useStore().personConfig
|
||||
const {getAlreadyPersonList:alreadyPersonList,getNotPersonList:notPersonList,getTableRowCount:rowCount}=personConfig
|
||||
const tableData=ref(
|
||||
alreadyPersonList.concat(notPersonList)
|
||||
)
|
||||
|
||||
const containerRef = ref<HTMLElement>()
|
||||
|
||||
const scene = ref()
|
||||
const camera = ref()
|
||||
const renderer = ref()
|
||||
const controls = ref()
|
||||
const objects = ref<any[]>([])
|
||||
|
||||
const targets = {
|
||||
grid: <any[]>[],
|
||||
helix: <any[]>[],
|
||||
table: <any[]>[],
|
||||
sphere: <any[]>[]
|
||||
};
|
||||
store.user.setUserList();
|
||||
// eslint-disable-next-line no-undef
|
||||
let user = ref<IUser[]>([]);
|
||||
const getUser = () => {
|
||||
user.value = store.user.getUserList;
|
||||
console.log('😊user.value:', user.value);
|
||||
};
|
||||
const skip = (url: string) => {
|
||||
router.push({
|
||||
path: url,
|
||||
query: { id: 1 },
|
||||
|
||||
const init = () => {
|
||||
const felidView = 40;
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
const aspect = width / height;
|
||||
const nearPlane = 1;
|
||||
const farPlane = 10000;
|
||||
const WebGLoutput = containerRef.value
|
||||
|
||||
scene.value = new THREE.Scene();
|
||||
camera.value = new THREE.PerspectiveCamera(felidView, aspect, nearPlane, farPlane);
|
||||
camera.value.position.z = 3000;
|
||||
|
||||
renderer.value = new CSS3DRenderer()
|
||||
renderer.value.setSize(width, height)
|
||||
renderer.value.domElement.style.position = 'absolute';
|
||||
WebGLoutput!.appendChild(renderer.value.domElement);
|
||||
|
||||
controls.value = new TrackballControls(camera.value, renderer.value.domElement);
|
||||
controls.value.rotateSpeed = 1;
|
||||
controls.value.staticMoving = true;
|
||||
controls.value.minDistance = 500;
|
||||
controls.value.maxDistance = 6000;
|
||||
controls.value.addEventListener('change', render);
|
||||
|
||||
const tableLen = tableData.value.length
|
||||
for (let i = 0; i < tableLen; i++) {
|
||||
const element = document.createElement('div');
|
||||
element.className = 'element-card';
|
||||
element.style.backgroundColor = `rgba( 0, 127, 127, ${Math.random() * 0.5 + 0.25} )`;
|
||||
|
||||
const number = document.createElement('div');
|
||||
number.className = 'card-id';
|
||||
// number.textContent = (i / 5 + 1).toString();
|
||||
number.textContent = tableData.value[i].uid;
|
||||
element.appendChild(number);
|
||||
|
||||
const symbol = document.createElement('div');
|
||||
symbol.className = 'card-name';
|
||||
symbol.textContent = tableData.value[i].name;
|
||||
element.appendChild(symbol);
|
||||
|
||||
const detail = document.createElement('div');
|
||||
detail.className = 'card-detail';
|
||||
detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].other}`;
|
||||
element.appendChild(detail);
|
||||
|
||||
const object = new CSS3DObject(element);
|
||||
object.position.x = Math.random() * 4000 - 2000;
|
||||
object.position.y = Math.random() * 4000 - 2000;
|
||||
object.position.z = Math.random() * 4000 - 2000;
|
||||
scene.value.add(object);
|
||||
|
||||
objects.value.push(object);
|
||||
}
|
||||
|
||||
createTableVertices();
|
||||
createSphereVertices();
|
||||
createHelixVertices();
|
||||
|
||||
function createTableVertices() {
|
||||
const tableLen = tableData.value.length;
|
||||
|
||||
for (let i = 0; i < tableLen; i++) {
|
||||
const object = new THREE.Object3D();
|
||||
|
||||
object.position.x = tableData.value[i].x * 180 - rowCount*90;
|
||||
object.position.y = -tableData.value[i].y * 200 + 1000;
|
||||
object.position.z = 0;
|
||||
|
||||
targets.table.push(object);
|
||||
}
|
||||
}
|
||||
|
||||
function createSphereVertices() {
|
||||
let i = 0;
|
||||
const objLength = objects.value.length;
|
||||
const vector = new THREE.Vector3();
|
||||
|
||||
for (; i < objLength; ++i) {
|
||||
let phi = Math.acos(-1 + (2 * i) / objLength);
|
||||
let theta = Math.sqrt(objLength * Math.PI) * phi;
|
||||
const object = new THREE.Object3D();
|
||||
|
||||
object.position.x = 800 * Math.cos(theta) * Math.sin(phi);
|
||||
object.position.y = 800 * Math.sin(theta) * Math.sin(phi);
|
||||
object.position.z = -800 * Math.cos(phi);
|
||||
|
||||
// rotation object
|
||||
|
||||
vector.copy(object.position).multiplyScalar(2);
|
||||
object.lookAt(vector);
|
||||
targets.sphere.push(object);
|
||||
}
|
||||
}
|
||||
function createHelixVertices() {
|
||||
let i = 0;
|
||||
const vector = new THREE.Vector3();
|
||||
const objLength = objects.value.length;
|
||||
for (; i < objLength; ++i) {
|
||||
let phi = i * 0.213 + Math.PI;
|
||||
|
||||
const object = new THREE.Object3D();
|
||||
|
||||
object.position.x = 800 * Math.sin(phi);
|
||||
object.position.y = -(i * 8) + 450;
|
||||
object.position.z = 800 * Math.cos(phi + Math.PI);
|
||||
|
||||
object.scale.set(1.1, 1.1, 1.1);
|
||||
|
||||
vector.x = object.position.x * 2;
|
||||
vector.y = object.position.y;
|
||||
vector.z = object.position.z * 2;
|
||||
|
||||
object.lookAt(vector);
|
||||
|
||||
targets.helix.push(object);
|
||||
}
|
||||
}
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
transform(targets.table, 2000)
|
||||
render();
|
||||
}
|
||||
|
||||
const transform = (targets: any[], duration: number) => {
|
||||
// TWEEN.removeAll();
|
||||
const objLength = objects.value.length;
|
||||
for (let i = 0; i < objLength; ++i) {
|
||||
let object = objects.value[i];
|
||||
let target = targets[i];
|
||||
new TWEEN.Tween(object.position)
|
||||
.to({ x: target.position.x, y: target.position.y, z: target.position.z },
|
||||
Math.random() * duration + duration)
|
||||
.easing(TWEEN.Easing.Exponential.InOut)
|
||||
.start();
|
||||
|
||||
|
||||
new TWEEN.Tween(object.rotation)
|
||||
.to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
|
||||
.easing(TWEEN.Easing.Exponential.InOut)
|
||||
.start();
|
||||
}
|
||||
|
||||
// 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
|
||||
new TWEEN.Tween({})
|
||||
.to({}, duration * 2)
|
||||
.onUpdate(render)
|
||||
.start();
|
||||
}
|
||||
function onWindowResize() {
|
||||
camera.value.aspect = window.innerWidth / window.innerHeight
|
||||
camera.value.updateProjectionMatrix();
|
||||
|
||||
renderer.value.setSize(window.innerWidth, window.innerHeight);
|
||||
render();
|
||||
}
|
||||
|
||||
/**
|
||||
* [animation update all tween && controls]
|
||||
*/
|
||||
function animation() {
|
||||
TWEEN.update();
|
||||
controls.value.update();
|
||||
requestAnimationFrame(animation);
|
||||
}
|
||||
|
||||
|
||||
function render() {
|
||||
renderer.value.render(scene.value, camera.value);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
animation();
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-center">
|
||||
<!-- <svg-icon :name="'menu'" class="cursor-pointer svgMenu"></svg-icon> -->
|
||||
<a href="https://vitejs.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img src="../../assets/vue.svg" class="logo vue" alt="Vue logo" />
|
||||
</a>
|
||||
<div id="container" ref="containerRef">
|
||||
<!-- 选中菜单结构 start-->
|
||||
<div id="menu">
|
||||
<button id="table" @click="transform(targets.table, 2000)">TABLE</button>
|
||||
<button id="sphere" @click="transform(targets.sphere, 2000)">SPHERE</button>
|
||||
<button id="helix" @click="transform(targets.helix, 2000)">HELIX</button>
|
||||
</div>
|
||||
<div class="flex justify-center gap-6">
|
||||
<button class="btn btn-primary" @click="getUser">pinia test</button>
|
||||
<button class="btn btn-outline btn-secondary" @click="skip('about')"> router test</button>
|
||||
<button class="btn glass" @click="fetchData">fetch</button>
|
||||
|
||||
<!-- end -->
|
||||
</div>
|
||||
<HelloWorld
|
||||
class="flex flex-col items-center mx-auto text-center flex-column"
|
||||
msg="Vite + Vue"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
.logo {
|
||||
height: 10em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
z-index: 0;
|
||||
#menu {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
bottom: 50px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: rgba(127, 255, 255, 0.75);
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
outline: 1px solid rgba(127, 255, 255, 0.75);
|
||||
}
|
||||
.logo.vue:hover {
|
||||
filter: drop-shadow(0 0 2em #42b883aa);
|
||||
|
||||
button:hover {
|
||||
background-color: rgba(127, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: rgba(127, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -91,7 +91,6 @@ export default defineConfig(({ mode }) => {
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
|
||||
},
|
||||
},
|
||||
build: {
|
||||
|
||||
Reference in New Issue
Block a user