添加vuetify支持

package-lock.json

@@ -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==",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
-      "dev": true
     },
     "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
+        }
+      }
     }
   }
 }

package.json

@@ -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",

src/App.vue

@@ -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>

src/components/items/HomeHeader.vue

@@ -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>

src/components/items/SubmitButton.vue

@@ -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>

src/components/views/HomeView.vue

@@ -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>

src/components/views/IntroView.vue

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

src/components/views/LoginView.vue

@@ -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('')

src/main.ts

@@ -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')

src/router.ts

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

src/style.css

@@ -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%;
-}

vite.config.ts

@@ -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,
+      })
+  ],
 })