GuoAnPeng
/
graphite-digestion-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: layout头部逻辑

feature/three
guoapeng 3 months ago
parent
bd3348f9a5
commit
b67a8912cd
11 changed files with 150 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      .env.dev
  2. 4
      src/app.vue
  3. 1
      src/assets/images/logo.svg
  4. 1
      src/assets/images/user.svg
  5. 1
      src/assets/images/wifi.svg
  6. 111
      src/layouts/default.vue
  7. 14
      src/libs/utils.ts
  8. 12
      src/stores/systemStore.ts
  9. 4
      src/types/System.d.ts
  10. 6
      src/views/debug/index.vue
  11. 4
      src/views/login/index.vue

4
.env.dev
View File

@ -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
FT_WS_URL=ws://localhost:9527
FT_PROXY=http://localhost:8080

4
src/app.vue
View File

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

1
src/assets/images/logo.svg
View File

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

1
src/assets/images/user.svg
View File

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

1
src/assets/images/wifi.svg
View File

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

111
src/layouts/default.vue
View File

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

14
src/libs/utils.ts
View File

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

12
src/stores/systemStore.ts
View File

@ -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(() => {})
},
},
})

4
src/types/System.d.ts
View File

@ -4,5 +4,9 @@ declare namespace System {
systemList: Socket.NotificationData[]
streamVisible: boolean
isDebug: boolean
systemUser: SystemUser
}
interface SystemUser {
username: string
}
}

6
src/views/debug/index.vue
View File

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

4
src/views/login/index.vue
View File

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

Write Preview
Loading…
Cancel
Save