From ac3b71102c71454339211936b0866f8d27ae361e Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Mon, 1 May 2023 22:10:03 +0800 Subject: [PATCH] Added page frame --- ui/src/App.vue | 4 +- ui/src/assets/css/common.css | 104 ++++++++++++++ ui/src/assets/svg/chat.svg | 1 + ui/src/assets/svg/home.svg | 1 + ui/src/assets/svg/user.svg | 2 + ui/src/main.ts | 5 +- ui/src/pages/Main.vue | 255 ++++++++++++++++++++++++++++++++++- ui/src/pages/home/Home.vue | 9 ++ ui/src/router/index.ts | 24 +++- ui/src/vite-env.d.ts | 8 +- 10 files changed, 401 insertions(+), 12 deletions(-) create mode 100644 ui/src/assets/css/common.css create mode 100644 ui/src/assets/svg/chat.svg create mode 100644 ui/src/assets/svg/home.svg create mode 100644 ui/src/assets/svg/user.svg create mode 100644 ui/src/pages/home/Home.vue diff --git a/ui/src/App.vue b/ui/src/App.vue index 96b8df7..e0a017e 100644 --- a/ui/src/App.vue +++ b/ui/src/App.vue @@ -1,7 +1,7 @@ - + diff --git a/ui/src/assets/css/common.css b/ui/src/assets/css/common.css new file mode 100644 index 0000000..bd86fdd --- /dev/null +++ b/ui/src/assets/css/common.css @@ -0,0 +1,104 @@ +:root { + --main-color: #00D4FF; + --background-color: #F5F5F5; + --font-main-color: #4D4D4D; + --font-secondary-color: #9E9E9E; +} + +body { + color: var(--font-main-color); + user-select: none; +} + +.fill { + height: 100%; + width: 100%; +} + +.fill-with { + width: 100%; +} + +.fill-height { + height: 100%; +} + +.background-white { + background-color: white; +} + +.center-box { + display: flex; + justify-content: center; + align-items: center; +} + +.vertical-center-box { + display: flex; + align-items: center; +} + +.horizontal-center-box { + display: flex; + justify-content: center; +} + +.icon-size-xs { + width: 16px; + height: 16px; +} + +.icon-size-xs > use { + width: 16px; + height: 16px; +} + +.icon-size-sm { + width: 20px; + height: 20px; +} + +.icon-size-sm > use { + width: 20px; + height: 20px; +} + +.icon-size-md { + width: 24px; + height: 24px; +} + +.icon-size-md > use { + width: 24px; + height: 24px; +} + +.icon-size-lg { + width: 32px; + height: 32px; +} + +.icon-size-lg > use { + width: 32px; + height: 32px; +} + +.icon-size-xl { + width: 64px; + height: 64px; +} + +.icon-size-xl > use { + width: 64px; + height: 64px; +} + +.icon-size-menu { + width: 23px; + height: 23px; +} + +.icon-size-menu > use { + width: 23px; + height: 23px; +} \ No newline at end of file diff --git a/ui/src/assets/svg/chat.svg b/ui/src/assets/svg/chat.svg new file mode 100644 index 0000000..2220f29 --- /dev/null +++ b/ui/src/assets/svg/chat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/src/assets/svg/home.svg b/ui/src/assets/svg/home.svg new file mode 100644 index 0000000..689ddce --- /dev/null +++ b/ui/src/assets/svg/home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/src/assets/svg/user.svg b/ui/src/assets/svg/user.svg new file mode 100644 index 0000000..a4a0344 --- /dev/null +++ b/ui/src/assets/svg/user.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/ui/src/main.ts b/ui/src/main.ts index ce307ed..08649c1 100644 --- a/ui/src/main.ts +++ b/ui/src/main.ts @@ -2,10 +2,10 @@ import { createApp } from 'vue' import App from '@/App.vue' import router from '@/router' -import { PRODUCTION_NAME } from './constants/Common.constants.js' - import '@/assets/css/base.css' +import '@/assets/css/common.css' +/* router.beforeEach((to, from, next) => { if (to.matched.length === 0) { from.path ? next({ path: from.path }) : next('/') @@ -15,6 +15,7 @@ router.beforeEach((to, from, next) => { } } }) +*/ const app = createApp(App) diff --git a/ui/src/pages/Main.vue b/ui/src/pages/Main.vue index 29527be..9b2d8ed 100644 --- a/ui/src/pages/Main.vue +++ b/ui/src/pages/Main.vue @@ -1,9 +1,256 @@ - + + + - + diff --git a/ui/src/pages/home/Home.vue b/ui/src/pages/home/Home.vue new file mode 100644 index 0000000..c45d9d8 --- /dev/null +++ b/ui/src/pages/home/Home.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/ui/src/router/index.ts b/ui/src/router/index.ts index 6c67820..88bc690 100644 --- a/ui/src/router/index.ts +++ b/ui/src/router/index.ts @@ -2,7 +2,29 @@ import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), - routes: [] + routes: [ + { + path: '/', + component: async () => await import('@/pages/Main.vue'), + children: [ + { + path: '', + redirect: 'home' + }, + { + path: '/home', + component: async () => await import('@/pages/home/Home.vue'), + name: 'home', + meta: { + title: '首页', + icon: IconPinnacleHome, + requiresScrollbar: false, + requiresPadding: true + } + } + ] + } + ] }) export default router diff --git a/ui/src/vite-env.d.ts b/ui/src/vite-env.d.ts index 323c78a..b6419a6 100644 --- a/ui/src/vite-env.d.ts +++ b/ui/src/vite-env.d.ts @@ -1,7 +1,9 @@ +// eslint-disable-next-line @typescript-eslint/triple-slash-reference /// declare module '*.vue' { - import type { DefineComponent } from 'vue' - const component: DefineComponent<{}, {}, any> - export default component + import type { DefineComponent } from 'vue' + // eslint-disable-next-line @typescript-eslint/ban-types + const component: DefineComponent<{}, {}, any> + export default component }