wcx/surl-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加vuetify支持

Browse Source
This commit is contained in:
05412 2024-07-29 16:25:23 +08:00
parent 05b348c46f
commit 50ca6468c1
15 changed files with 267 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
package-lock.json generated
View File

@ -8,10 +8,13 @@
"name": "surl-front",
"version": "0.0.0",
"dependencies": {
"vite-plugin-vuetify": "^2.0.3",
"vue": "^3.4.31",
"vue-router": "^4.4.0"
"vue-router": "^4.4.0",
"vuetify": "^3.6.13"
},
"devDependencies": {
"@mdi/font": "^7.4.47",
"@vitejs/plugin-vue": "^5.0.5",
"typescript": "^5.2.2",
"vite": "^5.3.4",
@ -36,7 +39,6 @@
"cpu": [
"ppc64"
],
"dev": true,
"optional": true,
"os": [
"aix"
@ -52,7 +54,6 @@
"cpu": [
"arm"
],
"dev": true,
"optional": true,
"os": [
"android"
@ -68,7 +69,6 @@
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"android"
@ -84,7 +84,6 @@
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"android"
@ -100,7 +99,6 @@
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"darwin"
@ -116,7 +114,6 @@
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"darwin"
@ -132,7 +129,6 @@
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"freebsd"
@ -148,7 +144,6 @@
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"freebsd"
@ -164,7 +159,6 @@
"cpu": [
"arm"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -180,7 +174,6 @@
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -196,7 +189,6 @@
"cpu": [
"ia32"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -212,7 +204,6 @@
"cpu": [
"loong64"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -228,7 +219,6 @@
"cpu": [
"mips64el"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -244,7 +234,6 @@
"cpu": [
"ppc64"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -260,7 +249,6 @@
"cpu": [
"riscv64"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -276,7 +264,6 @@
"cpu": [
"s390x"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -292,7 +279,6 @@
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -308,7 +294,6 @@
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"netbsd"
@ -324,7 +309,6 @@
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"openbsd"
@ -340,7 +324,6 @@
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"sunos"
@ -356,7 +339,6 @@
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"win32"
@ -372,7 +354,6 @@
"cpu": [
"ia32"
],
"dev": true,
"optional": true,
"os": [
"win32"
@ -388,7 +369,6 @@
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"win32"
@ -402,6 +382,12 @@
"resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
},
"node_modules/@mdi/font": {
"version": "7.4.47",
"resolved": "https://registry.npmmirror.com/@mdi/font/-/font-7.4.47.tgz",
"integrity": "sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==",
"dev": true
},
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.19.1",
"resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.19.1.tgz",
@ -409,7 +395,6 @@
"cpu": [
"arm"
],
"dev": true,
"optional": true,
"os": [
"android"
@ -422,7 +407,6 @@
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"android"
@ -435,7 +419,6 @@
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"darwin"
@ -448,7 +431,6 @@
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"darwin"
@ -461,7 +443,6 @@
"cpu": [
"arm"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -474,7 +455,6 @@
"cpu": [
"arm"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -487,7 +467,6 @@
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -500,7 +479,6 @@
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -513,7 +491,6 @@
"cpu": [
"ppc64"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -526,7 +503,6 @@
"cpu": [
"riscv64"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -539,7 +515,6 @@
"cpu": [
"s390x"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -552,7 +527,6 @@
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -565,7 +539,6 @@
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"linux"
@ -578,7 +551,6 @@
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"win32"
@ -591,7 +563,6 @@
"cpu": [
"ia32"
],
"dev": true,
"optional": true,
"os": [
"win32"
@ -604,7 +575,6 @@
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"win32"
@ -613,8 +583,7 @@
"node_modules/@types/estree": {
"version": "1.0.5",
"resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz",
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
"dev": true
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
},
"node_modules/@vitejs/plugin-vue": {
"version": "5.1.1",
@ -785,6 +754,18 @@
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.4.34.tgz",
"integrity": "sha512-x5LmiRLpRsd9KTjAB8MPKf0CDPMcuItjP0gbNqFCIgL1I8iYp4zglhj9w9FPCdIbHG2M91RVeIbArFfFTz9I3A=="
},
"node_modules/@vuetify/loader-shared": {
"version": "2.0.3",
"resolved": "https://registry.npmmirror.com/@vuetify/loader-shared/-/loader-shared-2.0.3.tgz",
"integrity": "sha512-Ss3GC7eJYkp2SF6xVzsT7FAruEmdihmn4OCk2+UocREerlXKWgOKKzTN5PN3ZVN5q05jHHrsNhTuWbhN61Bpdg==",
"dependencies": {
"upath": "^2.0.1"
},
"peerDependencies": {
"vue": "^3.0.0",
"vuetify": "^3.0.0"
}
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@ -817,6 +798,22 @@
"integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
"dev": true
},
"node_modules/debug": {
"version": "4.3.6",
"resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.6.tgz",
"integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
"dependencies": {
"ms": "2.1.2"
},
"engines": {
"node": ">=6.0"
},
"peerDependenciesMeta": {
"supports-color": {
"optional": true
}
}
},
"node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@ -832,7 +829,6 @@
"version": "0.21.5",
"resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.21.5.tgz",
"integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
"dev": true,
"hasInstallScript": true,
"bin": {
"esbuild": "bin/esbuild"
@ -875,7 +871,6 @@
"version": "2.3.3",
"resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
"dev": true,
"hasInstallScript": true,
"optional": true,
"os": [
@ -917,6 +912,11 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
"node_modules/muggle-string": {
"version": "0.4.1",
"resolved": "https://registry.npmmirror.com/muggle-string/-/muggle-string-0.4.1.tgz",
@ -982,7 +982,6 @@
"version": "4.19.1",
"resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.19.1.tgz",
"integrity": "sha512-K5vziVlg7hTpYfFBI+91zHBEMo6jafYXpkMlqZjg7/zhIG9iHqazBf4xz9AVdjS9BruRn280ROqLI7G3OFRIlw==",
"dev": true,
"dependencies": {
"@types/estree": "1.0.5"
},
@ -1046,11 +1045,19 @@
"node": ">=14.17"
}
},
"node_modules/upath": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/upath/-/upath-2.0.1.tgz",
"integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
"engines": {
"node": ">=4",
"yarn": "*"
}
},
"node_modules/vite": {
"version": "5.3.5",
"resolved": "https://registry.npmmirror.com/vite/-/vite-5.3.5.tgz",
"integrity": "sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==",
"dev": true,
"dependencies": {
"esbuild": "^0.21.3",
"postcss": "^8.4.39",
@ -1101,6 +1108,24 @@
}
}
},
"node_modules/vite-plugin-vuetify": {
"version": "2.0.3",
"resolved": "https://registry.npmmirror.com/vite-plugin-vuetify/-/vite-plugin-vuetify-2.0.3.tgz",
"integrity": "sha512-HbYajgGgb/noaVKNRhnnXIiQZrNXfNIeanUGAwXgOxL6h/KULS40Uf51Kyz8hNmdegF+DwjgXXI/8J1PNS83xw==",
"dependencies": {
"@vuetify/loader-shared": "^2.0.3",
"debug": "^4.3.3",
"upath": "^2.0.1"
},
"engines": {
"node": "^18.0.0 || >=20.0.0"
},
"peerDependencies": {
"vite": ">=5",
"vue": "^3.0.0",
"vuetify": "^3.0.0"
}
},
"node_modules/vscode-uri": {
"version": "3.0.8",
"resolved": "https://registry.npmmirror.com/vscode-uri/-/vscode-uri-3.0.8.tgz",
@ -1157,6 +1182,39 @@
"peerDependencies": {
"typescript": ">=5.0.0"
}
},
"node_modules/vuetify": {
"version": "3.6.13",
"resolved": "https://registry.npmmirror.com/vuetify/-/vuetify-3.6.13.tgz",
"integrity": "sha512-Gz7jxXAkmff2m6CM0EUWOo/72TM322/3I6aDna++k1nPOW1/hNx4td1MZG4u75fzdn3r+uIe0dbF7SWuhu6DWA==",
"engines": {
"node": "^12.20 || >=14.13"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/johnleider"
},
"peerDependencies": {
"typescript": ">=4.7",
"vite-plugin-vuetify": ">=1.0.0",
"vue": "^3.3.0",
"vue-i18n": "^9.0.0",
"webpack-plugin-vuetify": ">=2.0.0"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
},
"vite-plugin-vuetify": {
"optional": true
},
"vue-i18n": {
"optional": true
},
"webpack-plugin-vuetify": {
"optional": true
}
}
}
}
}

5
package.json
View File

@ -9,10 +9,13 @@
"preview": "vite preview"
},
"dependencies": {
"vite-plugin-vuetify": "^2.0.3",
"vue": "^3.4.31",
"vue-router": "^4.4.0"
"vue-router": "^4.4.0",
"vuetify": "^3.6.13"
},
"devDependencies": {
"@mdi/font": "^7.4.47",
"@vitejs/plugin-vue": "^5.0.5",
"typescript": "^5.2.2",
"vite": "^5.3.4",

6
src/App.vue
View File

@ -1,12 +1,14 @@
<script setup lang="ts">
import {useRouter} from "vue-router";
import HomeView from "./components/views/HomeView.vue";
const token = localStorage.getItem("token")
if (token == null) useRouter().push("/login")
const router = useRouter()
if (token == null) router.push("/login")
</script>
<template>
<RouterView/>
<HomeView />
</template>
<style scoped>

69
src/components/items/HomeHeader.vue Normal file
View File

@ -0,0 +1,69 @@
<script setup lang="ts">
</script>
<template>
<div class="home-header-container">
<ul class="home-header-menu-list">
<li>
<router-link class="home-header-router" to="/">home</router-link>
</li>
<li>
<router-link class="home-header-router" to="/input">list</router-link>
</li>
<li>
<router-link class="home-header-router" to="/login">login</router-link>
</li>
</ul>
<div class="home-header-user-info">
user
</div>
</div>
</template>
<style scoped>
.home-header-container {
display: flex;
justify-content: space-between;
height: 50px;
color: var(--color-font-base);
font-size: var(--font-size-large);
}
.home-header-router {
display: flex;
align-items: center;
text-decoration: none;
color: var(--color-font-base);
height: 100%;
}
.home-header-router:hover {
color: var(--color-font-deeper);
}
.home-header-container ul.home-header-menu-list, .home-header-user-info {
display: flex;
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
.home-header-container ul.home-header-menu-list li {
display: flex;
align-items: center;
padding: 0 10px;
height: 100%;
}
.home-header-container ul.home-header-menu-list li:hover {
cursor: pointer;
color: var(--color-font-deeper);
}
.home-header-container ul li:last-child {
border-right: none;
}
</style>

0
src/components/InputBox.vue → src/components/items/InputBox.vue
View File

0
src/components/LoginPage.vue → src/components/items/LoginDialog.vue
View File

0
src/components/NotFound.vue → src/components/items/NotFound.vue
View File

6
src/components/SubmitButton.vue → src/components/items/SubmitButton.vue
View File

@ -2,15 +2,11 @@
import {useRouter} from "vue-router";
const router = useRouter()
function jmp () {
console.log("jmp")
router.push("/input")
}
</script>
<template>
<div class="submit-button-container">
<button @click="jmp"> 提交 </button>
<button @click="router.push('/')"> 提交 </button>
<div></div>
</div>
</template>

40
src/components/views/HomeView.vue Normal file
View File

@ -0,0 +1,40 @@
<script setup lang="ts">
</script>
<template>
<v-responsive class="border rounded mx-auto" max-width="1080">
<v-app>
<v-app-bar flat>
<v-container class="mx-auto d-flex align-center justify-start">
<v-btn text="HOME" to="/" :active="false"></v-btn>
<v-btn text="INPUT" to="/input" :active="false"></v-btn>
<v-spacer></v-spacer>
<v-text-field class="home-search-box" density="compact" label="search" rounded="lg" variant="solo-filled"
flat hide-details single-line></v-text-field>
<v-avatar class="ml-10" color="grey-darken-1" size="32" id="avatar"></v-avatar>
<v-menu open-on-hover activator="#avatar" open-delay="0" close-delay="500" location="bottom">
<v-list>
<v-list-item value="1" to="/login" :active="false">
<v-list-item-title>LOGIN</v-list-item-title>
</v-list-item>
<v-list-item value="2" to="/input" :active="false">
<v-list-item-title>REGISTER</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-container>
</v-app-bar>
<v-main class="px-10">
<router-view/>
</v-main>
</v-app>
</v-responsive>
</template>
<style scoped>
.home-search-box {
max-width: 500px;
min-width: 200px;
}
</style>

10
src/components/views/IntroView.vue Normal file
View File

@ -0,0 +1,10 @@
<script setup lang="ts">
</script>
<template>
intro
</template>
<style scoped>
</style>

2
src/components/Login.vue → src/components/views/LoginView.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import {ref} from "vue";
import LoginPage from "./LoginPage.vue";
import LoginPage from "../items/LoginDialog.vue";
const username = ref('')
const password = ref('')

13
src/main.ts
View File

@ -1,8 +1,21 @@
import {createApp} from 'vue'
import './style.css'
import 'vuetify/styles'
import {router} from "./router.ts";
import App from "./App.vue";
import {createVuetify} from "vuetify";
const vuetify = createVuetify({
icons: {
defaultSet: 'mdi'
},
defaults: {
global: {
ripple: true
}
}
})
createApp(App)
.use(router)
.use(vuetify)
.mount('#app')

19
src/router.ts
View File

@ -1,12 +1,19 @@
import {createRouter, createWebHistory} from "vue-router";
import Login from "./components/Login.vue";
import InputBox from "./components/InputBox.vue";
import App from "./App.vue";
import Login from "./components/views/LoginView.vue";
import InputBox from "./components/items/InputBox.vue";
import IntroView from "./components/views/IntroView.vue";
const routes = [
{path: '/', component: App},
{path: '/login', component: Login},
{path: '/input', component: InputBox},
{
path: '/',
component: IntroView
}, {
path: '/login',
component: Login
}, {
path: '/input',
component: InputBox
}
]
export const router = createRouter({
history: createWebHistory(),

26
src/style.css
View File

@ -3,33 +3,9 @@
--font-size-medium: 1em;
--font-size-large: 1.2em;
--color-font-base: #555;
--color-font-deeper: black;
--color-border-base: #ccc;
--color-primary: #1BA0F2;
--color-primary-deeper: #1B8EF2;
--color-primary-lighter: #38BDF2;
}
html, body {
display: block;
position: relative;
left: 0;
top: 0;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#app * {
box-sizing: border-box;
transition: all 0.3s ease;
}
#app {
display: block;
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

8
vite.config.ts
View File

@ -1,7 +1,13 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from "vite-plugin-vuetify";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
plugins: [
vue(),
vuetify({
autoImport: true,
})
],
})