完善主页上边栏和侧边栏

package.json

@@ -13,7 +13,9 @@
     "format": "prettier --write --experimental-cli src/"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
     "@fortawesome/fontawesome-free": "^7.1.0",
+    "element-plus": "^2.12.0",
     "nprogress": "^0.2.0",
     "vue": "^3.5.25",
     "vue-router": "^4.6.3"

src/components/index/Leftbar.vue

@@ -1 +1,49 @@
-<template></template>
+<script setup>
+</script>
+<template>
+    <div class="leftbar">
+        <button class="leftbar-item"><i class="fa-solid fa-table-cells-large"></i> 大屏管理</button>
+        <button class="leftbar-item"><i class="fa-solid fa-folder"></i> 大屏分类</button>
+        <button class="leftbar-item"><i class="fa-solid fa-database"></i> 数据源管理</button>
+        <button class="leftbar-item"><i class="fa-solid fa-suitcase"></i> 数据集管理</button>
+        <button class="leftbar-item"><el-icon style="font-size:20px;transform: translateY(4px);"><Eleme /></el-icon> 组件库</button>
+        <button class="leftbar-item"><i class="fa-solid fa-lightbulb"></i> 全局变量</button>
+        <button class="leftbar-item"><i class="fa-solid fa-layer-group"></i> 静态资源</button>
+        <button class="leftbar-item"><i class="fa-solid fa-location-dot"></i> 地图管理</button>
+        <button class="leftbar-item"><i class="fa-solid fa-boxes-stacked"></i> 工具箱</button>
+    </div>
+</template>
+<style>
+    .leftbar {
+        position: fixed;
+        top: 38px;
+        left: 8px;
+        border-radius: 16px;
+        width: 200px;
+        height: calc(100% - 48px);
+        background-color: rgba(255,255,255,0.2);
+        backdrop-filter: blur(3px);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 8px;
+        box-sizing: border-box;
+    }
+    .leftbar-item {
+        width: 90%;
+        height: 48px;
+        border-radius: 16px;
+        border: 0;
+        background-color: transparent;
+        margin-bottom: 8px;
+        cursor: pointer;
+        font-size: 16px;
+        color: #333;
+    }
+    .leftbar-item:hover {
+        background-color: rgba(255,255,255,0.2);
+    }
+    .leftbar-item:active {
+        background-color: rgba(255,255,255,0.4);
+    }
+</style>

src/components/index/Topbar.vue

@@ -1,13 +1,39 @@
 <script setup>
+import { onMounted, onUnmounted } from 'vue'
 import getConfig from '@/utils/config'
+import { useRouter } from 'vue-router'
 
 const config = getConfig()
+const router = useRouter()
+
+let intervalId;
+
+const updateTime = () => {
+    const now = new Date();
+    const timeString = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()]} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
+    document.getElementById('time').textContent = timeString;
+}
+
+onMounted(() => {
+    updateTime();
+    intervalId = setInterval(updateTime, 1000);
+})
+
+onUnmounted(() => {
+    clearInterval(intervalId);
+})
 </script>
 <template>
     <div class="topbar">
         <div class="logo" @click="router.push('/')">
             <img src="@/assets/logo.svg" alt="logo" />
         </div>
+        <div class="topbar-left">
+            <button @click="router.push('/')">{{ config.title }}</button>
+        </div>
+        <div class="topbar-right">
+            <div id="time"></div>
+        </div>
     </div>
 </template>
 <style>
@@ -29,4 +55,26 @@ const config = getConfig()
         width: 20px;
         height: 20px;
     }
+    .topbar-left,
+    .topbar-right {
+        position: fixed;
+        top: 3px;
+        font-size: 16px;
+        color: #fff;
+        text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
+    }
+    .topbar-left {
+        left: 35px;
+    }
+    .topbar-right {
+        right: 16px;
+    }
+    .topbar-left button,
+    .topbar-right button {
+        border: none;
+        background-color: transparent;
+        font-size: 16px;
+        color: #fff;
+        text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
+    }
 </style>

src/main.js

@@ -2,11 +2,17 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router.js'
 import getConfig from './utils/config'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import '@fortawesome/fontawesome-free/css/all.min.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 const app = createApp(App)
+app.use(ElementPlus)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+}
 
 app.config.globalProperties.$config = getConfig()
-
 app.use(router)
-
 app.mount('#app')