From b67a8912cd477bdd9ff395e6e180b1cd331e06e3 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Mon, 28 Apr 2025 17:56:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20layout=E5=A4=B4=E9=83=A8=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.dev                   |   4 +-
 src/app.vue                |   4 +-
 src/assets/images/logo.svg |   1 +
 src/assets/images/user.svg |   1 +
 src/assets/images/wifi.svg |   1 +
 src/layouts/default.vue    | 111 ++++++++++++++++++++++++++++++++++++++++++---
 src/libs/utils.ts          |  14 ++++++
 src/stores/systemStore.ts  |  12 +++++
 src/types/System.d.ts      |   4 ++
 src/views/debug/index.vue  |   6 ++-
 src/views/login/index.vue  |   4 +-
 11 files changed, 150 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/images/logo.svg
 create mode 100644 src/assets/images/user.svg
 create mode 100644 src/assets/images/wifi.svg

diff --git a/.env.dev b/.env.dev
index ccd00d6..61a3c8c 100644
--- a/.env.dev
+++ b/.env.dev
@@ -2,5 +2,5 @@
 
 FT_NODE_ENV=dev
 
-FT_WS_URL=ws://192.168.1.199:9527
-FT_PROXY=http://192.168.1.199:8080
\ No newline at end of file
+FT_WS_URL=ws://localhost:9527
+FT_PROXY=http://localhost:8080
\ No newline at end of file
diff --git a/src/app.vue b/src/app.vue
index 9432773..cdcdeb9 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-// socket.init(() => {})
+
 </script>
 
 <template>
   <router-view v-slot="{ Component }" class="main-content">
-    <transition>
+    <transition name="el-zoom-in-center">
       <component :is="Component" />
     </transition>
   </router-view>
diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg
new file mode 100644
index 0000000..771b0a2
--- /dev/null
+++ b/src/assets/images/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="224" height="233" viewBox="0 0 224 233"><g><g><path d="M223.99979977416993,114.45162603759766C223.99979977416993,124.83402603759765,215.86279977416993,133.25062603759767,205.82579977416992,133.25062603759767C195.7877997741699,133.25062603759767,89.86419977416992,119.90242603759765,46.42679977416992,114.45162603759766C95.25419977416992,108.22022603759766,195.7877997741699,95.65262603759766,205.82579977416992,95.65262603759766C215.86279977416993,95.65264605499766,223.99979977416993,104.06923603759766,223.99979977416993,114.45162603759766Z" fill="#FAC03D" fill-opacity="1"/></g><g><path d="M201.21678225097656,176.92624592285156C201.23438225097658,182.56134592285156,196.82298225097657,187.13904592285155,191.37518225097656,187.13904592285155C185.94078225097655,187.13904592285155,128.59708225097657,179.92384592285157,105.07118225097656,176.95904592285157C131.50778225097656,173.58095592285156,185.94078225097655,166.77894592285156,191.37518225097656,166.77894592285156C196.79818225097657,166.77890588795157,201.19928225097658,171.31673592285156,201.21678225097656,176.92624592285156Z" fill="#FAC03D" fill-opacity="1"/></g><g><path d="M215.93901684570312,149.52852961425782C215.94201684570314,157.61312961425782,209.60701684570313,164.16892961425782,201.79101684570313,164.16892961425782C193.97901684570314,164.16892961425782,114.44741684570312,153.77242961425782,80.63601684570312,149.52852961425782C118.64531684570312,144.68120961425782,193.97901684570314,134.8947296142578,201.79101684570313,134.8947296142578C209.60501684570312,134.8947296142578,215.93901684570312,141.44651961425782,215.93901684570312,149.52852961425782Z" fill="#FAC03D" fill-opacity="1"/></g><g><path d="M112.735,0.0000200174C33.3546,-0.0135318,-21.121,82.656,7.90892,159.078C36.9389,235.5,131.249,257.697,189.387,201.791C181.175,201.01,163.001,198.721,131.435,194.661L127.085,194.11C85.6178,216.585,34.3882,200.014,12.688,157.106C-9.01216,114.197,7.04277,61.2171,48.539,38.7996C90.0352,16.382,141.243,33.0249,162.887,75.9634C169.261,88.781,184.624,93.5998,196.807,86.6023C208.989,79.6049,213.157,63.5677,206.008,51.1954C185.072,19.1593,150.118,-0.0260227,112.735,0.0000200174Z" fill="#275EFB" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/user.svg b/src/assets/images/user.svg
new file mode 100644
index 0000000..ea89d9c
--- /dev/null
+++ b/src/assets/images/user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="40" height="40" viewBox="0 0 40 40"><defs><clipPath id="master_svg0_609_03555/609_03497"><rect x="8" y="8" width="24" height="24" rx="0"/></clipPath></defs><g><rect x="0" y="0" width="40" height="40" rx="20" fill="#1989FA" fill-opacity="1"/><g clip-path="url(#master_svg0_609_03555/609_03497)"><g><path d="M28.120604907226564,25.896875C27.67840490722656,24.849575,27.03680490722656,23.898375,26.231504907226565,23.096075C25.428604907226564,22.291475,24.47750490722656,21.649974999999998,23.430704907226563,21.207075C23.421304907226563,21.202375,23.41200490722656,21.199975000000002,23.40260490722656,21.195275000000002C24.862704907226565,20.140625,25.812004907226562,18.422655,25.812004907226562,16.484375C25.812004907226562,13.273435,23.21040490722656,10.671875,19.99946490722656,10.671875C16.788524907226563,10.671875,14.186964907226562,13.273435,14.186964907226562,16.484375C14.186964907226562,18.422655,15.136184907226562,20.140625,16.596334907226563,21.197675C16.586964907226562,21.202375,16.577584907226562,21.204675,16.56821490722656,21.209375C15.518214907226563,21.652375,14.576024907226563,22.287475,13.767434907226562,23.098475C12.962844907226563,23.901375,12.321344907226562,24.852475,11.878369907226563,25.899175C11.443186907226563,26.924075,11.208483707226563,28.022775,11.186963515026562,29.135975C11.186337956226563,29.160975,11.190725517226563,29.185875,11.199867807226562,29.209175C11.209010107226563,29.232375,11.222722007226562,29.253675,11.240195707226562,29.271575C11.257669407226562,29.289475,11.278551207226563,29.303675,11.301610907226562,29.313375C11.324669907226562,29.323175,11.349440907226562,29.328175,11.374463907226563,29.328075C11.374463907226563,29.328075,12.780714907226562,29.328075,12.780714907226562,29.328075C12.883834907226563,29.328075,12.965864907226562,29.246075,12.968214907226562,29.145275C13.015084907226562,27.335975,13.741654907226563,25.641375,15.026024907226562,24.357075000000002C16.354934907226564,23.028174999999997,18.119774907226564,22.296875,19.99946490722656,22.296875C21.879104907226562,22.296875,23.644004907226563,23.028174999999997,24.972904907226564,24.357075000000002C26.257304907226562,25.641375,26.983804907226563,27.335975,27.030704907226564,29.145275C27.033104907226562,29.248475,27.115104907226563,29.328075,27.218204907226564,29.328075C27.218204907226564,29.328075,28.624504907226562,29.328075,28.624504907226562,29.328075C28.64950490722656,29.328175,28.674304907226563,29.323175,28.697304907226563,29.313375C28.720404907226563,29.303675,28.741304907226564,29.289475,28.758704907226562,29.271575C28.776204907226564,29.253675,28.789904907226564,29.232375,28.799104907226564,29.209175C28.808204907226564,29.185875,28.81260490722656,29.160975,28.812004907226562,29.135975C28.788504907226564,28.015675,28.55650490722656,26.925775,28.120604907226564,25.896875C28.120604907226564,25.896875,28.120604907226564,25.896875,28.120604907226564,25.896875ZM19.99946490722656,20.515625C18.923684907226562,20.515625,17.911184907226563,20.096095,17.149464907226562,19.334375C16.387744907226562,18.572655,15.968214907226564,17.560155,15.968214907226564,16.484375C15.968214907226564,15.408595,16.387744907226562,14.396094999999999,17.149464907226562,13.634375C17.911184907226563,12.872655,18.923684907226562,12.453125,19.99946490722656,12.453125C21.075244907226562,12.453125,22.087704907226563,12.872655,22.84950490722656,13.634375C23.611204907226565,14.396094999999999,24.030704907226564,15.408595,24.030704907226564,16.484375C24.030704907226564,17.560155,23.611204907226565,18.572655,22.84950490722656,19.334375C22.087704907226563,20.096095,21.075244907226562,20.515625,19.99946490722656,20.515625Z" fill="#FFFFFF" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/wifi.svg b/src/assets/images/wifi.svg
new file mode 100644
index 0000000..640f2b4
--- /dev/null
+++ b/src/assets/images/wifi.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="42" height="34" viewBox="0 0 42 34"><g><path d="M41.5238,8.34171C30.1914,-2.78057,11.812,-2.78057,0.479575,8.34171C-0.159858,8.96929,-0.159858,9.98404,0.479575,10.6072C1.11901,11.2347,2.15289,11.2347,2.78777,10.6072C12.8459,0.735472,29.1575,0.735472,39.2156,10.6072C39.8551,11.2347,40.889,11.2347,41.5238,10.6072C42.1587,9.984,42.1587,8.96929,41.5238,8.34171ZM6.63327,15.2314C5.99383,15.859,5.99383,16.8737,6.63327,17.4968C7.2727,18.1244,8.30658,18.1244,8.94146,17.4968C15.5985,10.9632,26.3958,10.9632,33.0529,17.4968C33.6923,18.1244,34.7262,18.1244,35.3611,17.4968C36.0005,16.8692,36.0005,15.8545,35.3611,15.2314C27.4297,7.44712,14.5691,7.44712,6.63327,15.2314L6.63327,15.2314ZM29.2346,22.5395L29.2436,22.5306C24.7089,18.0799,17.358,18.0799,12.8278,22.5306C12.1883,23.1581,12.1883,24.1728,12.8278,24.7959C13.4672,25.4235,14.5011,25.4235,15.136,24.7959C18.3965,21.5959,23.6795,21.5959,26.9355,24.7959L26.9445,24.7871C26.9828,24.8337,27.0237,24.8783,27.0669,24.9206C27.7064,25.5481,28.7403,25.5481,29.3752,24.9206C30.0146,24.293,30.0146,23.2783,29.3752,22.6552C29.3253,22.6151,29.2799,22.5795,29.2346,22.5395ZM18.596,31.5966C18.596,32.924,19.6923,34,21.0448,34C22.3972,34,23.4935,32.924,23.4935,31.5966C23.4935,30.2693,22.3972,29.1932,21.0448,29.1932C19.6923,29.1932,18.596,30.2692,18.596,31.5966Z" fill="#393F46" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>
\ No newline at end of file
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 069e911..0612fef 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,16 +1,55 @@
 <script setup lang="ts">
+import { formatDateTime } from 'libs/utils'
 import { authRoutes } from 'router/routes'
 import { useSystemStore } from 'stores/systemStore'
+import { onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const systemStore = useSystemStore()
-
 const router = useRouter()
+
+const currentTime = ref(formatDateTime())
+
+const timeInterval = setInterval(() => {
+  currentTime.value = formatDateTime()
+}, 1000)
+
+onUnmounted(() => {
+  clearInterval(timeInterval)
+})
 </script>
 
 <template>
   <el-container class="main">
-    <el-header class="header" />
+    <el-header class="header">
+      <div class="logo">
+        <img src="../assets/images/logo.svg" alt="">
+        <span class="title">长春黄金研究院有限公司</span>
+      </div>
+      <div class="header-right">
+        <div class="wifi-icon">
+          <img src="../assets/images/wifi.svg" alt="">
+        </div>
+        <div class="time">
+          {{ currentTime }}
+        </div>
+        <div class="user">
+          <el-dropdown class="user-dropdown" trigger="click">
+            <div class="user-dropdown-item">
+              <img src="../assets/images/user.svg" alt="">
+              <span>{{ systemStore.systemUser.username }}</span>
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item @click="systemStore.logout()">
+                  退出登录
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </div>
+    </el-header>
     <el-container class="container">
       <el-aside class="aside">
         <div v-for="item in authRoutes" :key="item.path" class="aside-item" :class="{ 'aside-item-active': router.currentRoute.value.path === item.path }" @click="router.push(item.path)">
@@ -19,7 +58,11 @@ const router = useRouter()
         </div>
       </el-aside>
       <el-main>
-        <router-view class="content" />
+        <router-view v-slot="{ Component }" class="content">
+          <transition name="el-zoom-in-center">
+            <component :is="Component" />
+          </transition>
+        </router-view>
       </el-main>
     </el-container>
     <el-footer class="footer" />
@@ -33,10 +76,54 @@ const router = useRouter()
   height: 100%;
   background: #F6F6F6;
   .header {
-    height: 60px;
+    color: #393F46;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    .logo {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      .title {
+        margin:0 10px;
+        color: #8799AB;
+        font-weight: 600;
+      }
+      img {
+        height: 100%;
+      }
+    }
+    .header-right {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      .wifi-icon {
+        width: 40px;
+        height: 100%;
+        background: #fff;
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          height: 50%;
+        }
+      }
+      .time {
+        margin:0  10px;
+        height: 100%;
+        padding: 0 10px;
+        display: flex;
+        align-items: center;
+        background: #fff;
+        border-radius: 5px;
+      }
+    }
   }
   .container {
-    height: calc(100% - 120px);
+    height: calc(100% - 100px);
   }
 }
 .aside {
@@ -63,9 +150,21 @@ const router = useRouter()
     color: #fff;
   }
 }
+.user-dropdown-item {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  color: #393F46;
+  font-weight: bold;
+  img {
+    height: 30px;
+    margin-right: 10px;
+  }
+}
 .el-main {
   padding: 0 15px;
   height: 100%;
+  position: relative;
 }
 .content {
   height: 100%;
@@ -75,6 +174,6 @@ const router = useRouter()
   padding: 10px;
 }
 .footer {
-  height: 60px;
+  height: 50px;
 }
 </style>
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
index 547dfc4..688ed9c 100644
--- a/src/libs/utils.ts
+++ b/src/libs/utils.ts
@@ -94,3 +94,17 @@ export const colors = generateColors(100)
 export function isNumber(value: any) {
   return typeof value === 'number' && !Number.isNaN(value)
 }
+
+export function formatDateTime(template: string = 'YYYY/MM/DD HH:mm:ss'): string {
+  const now = new Date()
+  const tokens: Record<string, string> = {
+    YYYY: String(now.getFullYear()),
+    MM: String(now.getMonth() + 1).padStart(2, '0'),
+    DD: String(now.getDate()).padStart(2, '0'),
+    HH: String(now.getHours()).padStart(2, '0'),
+    mm: String(now.getMinutes()).padStart(2, '0'),
+    ss: String(now.getSeconds()).padStart(2, '0'),
+  }
+
+  return template.replace(/YYYY|MM|DD|HH|mm|ss/g, token => tokens[token]!)
+}
diff --git a/src/stores/systemStore.ts b/src/stores/systemStore.ts
index b053684..d1b1370 100644
--- a/src/stores/systemStore.ts
+++ b/src/stores/systemStore.ts
@@ -1,9 +1,14 @@
+import router from '@/router'
+import { delToken } from 'libs/token'
 import { defineStore } from 'pinia'
 
 export const useSystemStore = defineStore('system', {
   state: (): System.SystemStore => ({
     systemStatus: {
     },
+    systemUser: {
+      username: '',
+    },
     isDebug: import.meta.env.FT_NODE_ENV === 'dev',
     streamVisible: false,
     systemList: [],
@@ -12,8 +17,15 @@ export const useSystemStore = defineStore('system', {
     updateStreamVisible(bool: boolean) {
       this.streamVisible = bool
     },
+    updateSystemUser(data: System.SystemUser) {
+      this.systemUser = data
+    },
     pushSystemList(text: any) {
       this.systemList.push(text)
     },
+    logout() {
+      delToken()
+      router.push('/login').then(() => {})
+    },
   },
 })
diff --git a/src/types/System.d.ts b/src/types/System.d.ts
index 722d2b9..a99d015 100644
--- a/src/types/System.d.ts
+++ b/src/types/System.d.ts
@@ -4,5 +4,9 @@ declare namespace System {
     systemList: Socket.NotificationData[]
     streamVisible: boolean
     isDebug: boolean
+    systemUser: SystemUser
+  }
+  interface SystemUser {
+    username: string
   }
 }
diff --git a/src/views/debug/index.vue b/src/views/debug/index.vue
index 5c96c3e..bc6dd37 100644
--- a/src/views/debug/index.vue
+++ b/src/views/debug/index.vue
@@ -743,8 +743,12 @@ const door_stop = async () => {
 
 <style lang="scss" scoped>
 .debug-content {
-  overflow: auto;
+  overflow: hidden;
   max-height: 100%;
+  .el-row {
+    height: 100%;
+    overflow: auto;
+  }
 }
 
 .el-card {
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 610d028..ced748f 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { setToken } from 'libs/token'
+import { useSystemStore } from 'stores/systemStore'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -17,12 +18,13 @@ const startProgress = () => {
 
     if (progress.value >= 100) {
       clearInterval(timer)
+      setToken('111')
+      useSystemStore().updateSystemUser({ username: '管理员' })
       router.push('/')
     }
   }, 100)
 }
 onMounted(() => {
-  setToken('111')
   startProgress()
 })