From a334208af82b102e1d1bbc91b44753b04c0ed0de Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期五, 27 十月 2023 14:48:56 +0800
Subject: [PATCH] feat: 添加dashboard布局组件
---
src/assets/styles/base.css | 40 ------
/dev/null | 50 --------
src/views/dashboard/index.vue | 22 +++
index.html | 2
src/assets/styles/main.css | 9
package.json | 2
src/components.d.ts | 3
src/router/index.ts | 14 -
env.d.ts | 6 +
src/components/DashboardLayout.vue | 125 ++++++++++++++++++++
src/App.vue | 28 ----
11 files changed, 171 insertions(+), 130 deletions(-)
diff --git a/env.d.ts b/env.d.ts
index b3f1432..56997d1 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -5,3 +5,9 @@
const component: FunctionalComponent<SVGAttributes>
export default component
}
+declare module '*.vue' {
+ import type { DefineComponent } from 'vue'
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const component: DefineComponent<object, object, any>
+ export default component
+}
diff --git a/index.html b/index.html
index dcd6967..39aff6e 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Vite App</title>
+ <title>鐪嬫澘</title>
</head>
<body>
<div id="app"></div>
diff --git a/package.json b/package.json
index e4fa3c9..1362d31 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
"version": "0.0.0",
"private": true,
"scripts": {
- "dev": "vite --host --open",
+ "dev": "vite --host",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
diff --git a/src/App.vue b/src/App.vue
index 64293dd..6cc3382 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,33 +1,9 @@
<template>
- <nav>
- <RouterLink to="/">Home</RouterLink>
- <RouterLink to="/about">About</RouterLink>
- </nav>
<RouterView />
</template>
<script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterView } from 'vue-router'
</script>
-<style scoped>
-nav {
- width: 100%;
- font-size: 24px;
- text-align: center;
-}
-
-nav a.router-link-exact-active {
- color: var(--el-color-primary);
-}
-
-nav a {
- display: inline-block;
- padding: 0 1rem;
- border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
- border: 0;
-}
-</style>
+<style scoped></style>
diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css
index 8816868..17dca0d 100644
--- a/src/assets/styles/base.css
+++ b/src/assets/styles/base.css
@@ -8,46 +8,15 @@
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
- --vt-c-indigo: #2c3e50;
+ --vt-v-blue: #13234b;
- --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
- --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
- --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
- --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
- --vt-c-text-light-1: var(--vt-c-indigo);
- --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
- --vt-c-text-dark-1: var(--vt-c-white);
- --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
- --color-background: var(--vt-c-white);
- --color-background-soft: var(--vt-c-white-soft);
- --color-background-mute: var(--vt-c-white-mute);
-
- --color-border: var(--vt-c-divider-light-2);
- --color-border-hover: var(--vt-c-divider-light-1);
-
- --color-heading: var(--vt-c-text-light-1);
- --color-text: var(--vt-c-text-light-1);
-
+ --color-background: var(--vt-v-blue);
+ --color-text: var(--vt-c-white);
--section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --color-background: var(--vt-c-black);
- --color-background-soft: var(--vt-c-black-soft);
- --color-background-mute: var(--vt-c-black-mute);
-
- --color-border: var(--vt-c-divider-dark-2);
- --color-border-hover: var(--vt-c-divider-dark-1);
-
- --color-heading: var(--vt-c-text-dark-1);
- --color-text: var(--vt-c-text-dark-2);
- }
}
*,
@@ -62,9 +31,6 @@
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
- transition:
- color 0.5s,
- background-color 0.5s;
line-height: 1.6;
font-family:
Inter,
diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
index ba1231a..bfe1931 100644
--- a/src/assets/styles/main.css
+++ b/src/assets/styles/main.css
@@ -1,9 +1,8 @@
@import './base.css';
-#app {
- max-width: 1280px;
- margin: 0 auto;
- font-weight: normal;
+/* 瑕嗙洊 el 婊氬姩鏉￠鑹� */
+.el-scrollbar .el-scrollbar__thumb{
+ background-color: #fff;
+ opacity: 0.5;
}
-
diff --git a/src/components.d.ts b/src/components.d.ts
index 940978c..c76e0d4 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,9 +7,10 @@
declare module 'vue' {
export interface GlobalComponents {
+ DashboardLayout: (typeof import('./components/DashboardLayout.vue'))['default']
ElButton: (typeof import('element-plus/es'))['ElButton']
ElIcon: (typeof import('element-plus/es'))['ElIcon']
- HelloWorld: (typeof import('./components/HelloWorld.vue'))['default']
+ ElScrollbar: (typeof import('element-plus/es'))['ElScrollbar']
RouterLink: (typeof import('vue-router'))['RouterLink']
RouterView: (typeof import('vue-router'))['RouterView']
}
diff --git a/src/components/DashboardLayout.vue b/src/components/DashboardLayout.vue
new file mode 100644
index 0000000..a88908e
--- /dev/null
+++ b/src/components/DashboardLayout.vue
@@ -0,0 +1,125 @@
+<template>
+ <div class="dashboard-layout">
+ <div class="left">
+ <div class="header-block padding-4">
+ <slot name="leftBlock1"></slot>
+ </div>
+ <div class="double-height-block padding-4">
+ <div class="card">
+ <el-scrollbar always>
+ <slot name="leftBlock2"></slot>
+ </el-scrollbar>
+ </div>
+ </div>
+ </div>
+ <div class="middle">
+ <div class="header-block padding-4">
+ <slot name="middleBlock1"></slot>
+ </div>
+ <div class="base-block padding-4">
+ <div class="card">
+ <slot name="middleBlock2"></slot>
+ </div>
+ </div>
+ <div class="block-container">
+ <div class="base-block padding-4">
+ <div class="card">
+ <slot name="middleBlock3"></slot>
+ </div>
+ </div>
+ <div class="base-block padding-4">
+ <div class="card">
+ <slot name="middleBlock4"></slot>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="right">
+ <div class="header-block padding-4">
+ <slot name="rightBlock1"></slot>
+ </div>
+ <div class="base-block padding-4">
+ <div class="card">
+ <slot name="rightBlock2"></slot>
+ </div>
+ </div>
+ <div class="base-block padding-4">
+ <div class="card">
+ <slot name="rightBlock3"></slot>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+// 涓や晶鍖哄煙瀹�
+$sideWidth: 25%;
+// 涓棿涓诲尯鍩熷
+$mainWidth: 50%;
+// 鏁翠綋鍐呰竟璺�
+$layoutPadding: 12px;
+// 澶撮儴甯冨眬鍧楅珮搴�
+$headerBlockHeight: 80px;
+// 鍩虹甯冨眬鍧楅珮搴�
+$baseBlockHeight: calc((100vh - 2 * $layoutPadding - $headerBlockHeight) / 2);
+// 鍙屽�嶉珮甯冨眬鍧楅珮搴�
+$doubleBlockHeight: calc($baseBlockHeight * 2);
+.dashboard-layout {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 100vh;
+ width: 100vw;
+ padding: $layoutPadding;
+ &.debug {
+ & > div {
+ border: 1px solid red;
+ & > div {
+ border: 1px solid red;
+ }
+ }
+ }
+}
+
+.left,
+.right {
+ width: $sideWidth;
+}
+
+.middle {
+ width: $mainWidth;
+}
+.left,
+.right,
+.middle {
+ height: 100%;
+}
+.padding-4 {
+ padding: 6px;
+}
+.block-container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.base-block {
+ height: $baseBlockHeight;
+ flex-grow: 1;
+}
+.header-block {
+ height: $headerBlockHeight;
+}
+.double-height-block {
+ height: $doubleBlockHeight;
+}
+
+.card {
+ width: 100%;
+ height: 100%;
+ background-color: #153e94;
+ border-radius: 6px;
+}
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 02e9a2b..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-defineProps<{ msg: string }>()
-</script>
-
-<template>
- <div class="greetings">
- <h1 class="green">{{ msg }}</h1>
- <h3>
- You鈥檝e successfully created a project with
- <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
- <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
- </h3>
- </div>
-</template>
-
-<style scoped>
-h1 {
- font-weight: 500;
- font-size: 2.6rem;
- position: relative;
- top: -10px;
-}
-
-h3 {
- font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
- text-align: center;
-}
-</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index a49ae50..08aa943 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,21 +1,17 @@
import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import DashboardView from '../views/dashboard/index.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
- name: 'home',
- component: HomeView
+ name: 'dashboard',
+ component: DashboardView
},
{
- path: '/about',
- name: 'about',
- // route level code-splitting
- // this generates a separate chunk (About.[hash].js) for this route
- // which is lazy-loaded when the route is visited.
- component: () => import('../views/AboutView.vue')
+ path: '/:error*',
+ redirect: '/'
}
]
})
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
deleted file mode 100644
index c0bfe81..0000000
--- a/src/views/AboutView.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
- <div class="about-view">
- <h1>About View</h1>
- </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style lang="scss"></style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
deleted file mode 100644
index 1072b75..0000000
--- a/src/views/HomeView.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
- <div class="home-view">
- <h1>Home View</h1>
- <h2>pinia 绀轰緥</h2>
- <section>
- <span> count: {{ counter.count }} </span>
- <el-button type="primary" @click="counter.increment">鍔犱竴</el-button>
- </section>
- <h2>element plus 缁勪欢 icon 绀轰緥</h2>
- <section>
- <el-button type="primary">
- <el-icon style="vertical-align: middle">
- <Search />
- </el-icon>
- <span style="vertical-align: middle"> Search </span>
- <el-icon class="is-loading">
- <Loading />
- </el-icon>
- </el-button>
- </section>
- <h2>Iconify 鍥炬爣绀轰緥, 鏀寔鑷姩涓嬭浇鑷姩瀵煎叆</h2>
- <section>
- <p><a href="https://icon-sets.iconify.design/">iconify</a></p>
- <p>
- iconify 鏈夎澶氬浘鏍囬泦鍚�,鎵�浠ラ厤缃簡鑷姩涓嬭浇鍜岃嚜鍔ㄥ紩鍏�,
- 浣嗘槸涓嬭浇鎵�鏈夌殑鍥炬爣闆嗗悎闇�瑕佺害120鍏�,鎵�浠ュ缓璁簨鍏堥�夊畾濂界敤鍝釜鍥炬爣闆�, 鍒贡鍔犲浘鏍囦笉鐒惰涓嬭浇濂藉
- </p>
- <p>浣跨敤鏂规硶: <a href="https://github.com/unplugin/unplugin-icons#usage">github.com/unplugin/unplugin-icons</a></p>
- <div>
- <el-icon size="40" color="red">
- <IconAlert />
- </el-icon>
- </div>
- </section>
- </div>
-</template>
-
-<script setup lang="ts">
-import { useCounterStore } from '@/stores/counter'
-import { Loading, Search } from '@element-plus/icons-vue'
-import IconAlert from '~icons/mdi/alert'
-
-const counter = useCounterStore()
-</script>
-
-<style lang="scss" scoped>
-section {
- margin: 10px 0 40px 0;
-}
-</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
new file mode 100644
index 0000000..6a0fc85
--- /dev/null
+++ b/src/views/dashboard/index.vue
@@ -0,0 +1,22 @@
+<template>
+ <DashboardLayout>
+ <template #leftBlock1>浠诲姟绛涢�塼abs</template>
+ <template #leftBlock2>
+ <div style="height: 1500px">閫氶亾浠诲姟</div>
+ </template>
+ <template #middleBlock1>鏍囬</template>
+ <template #middleBlock2>涓荤湅鏉�</template>
+ <template #middleBlock3>浠诲姟璇︽儏</template>
+ <template #middleBlock4>浜哄憳淇℃伅</template>
+ <template #rightBlock1>鏃堕棿</template>
+ <template #rightBlock2>鐘舵�侀潰鏉�</template>
+ <template #rightBlock3>鐭ヨ瘑搴�</template>
+ </DashboardLayout>
+</template>
+<script setup lang="ts">
+defineOptions({
+ name: 'DashboardView'
+})
+</script>
+
+<style scoped></style>
--
Gitblit v1.8.0