refactor: ♻️ 前端体验优化

[skip ci]
nsnail · Dec 13, 2024 · b1678e2 · b1678e2
1 parent 442a69f
commit b1678e2
Show file tree

Hide file tree

Showing 16 changed files with 312 additions and 188 deletions.
diff --git a/src/frontend/admin/src/App.vue b/src/frontend/admin/src/App.vue
@@ -92,8 +92,8 @@ export default {
         // 设置语言
         this.$i18n.locale = this.$TOOL.data.get('APP_SET_LANG') || this.$CONFIG.APP_SET_LANG
 
-        //ctrl + enter 触发主按钮点击事件
         document.onkeydown = (e) => {
+            //ctrl + enter 触发主按钮点击事件
             if (e.ctrlKey && e.keyCode === 13) {
                 document
                     .getElementsByClassName('el-dialog__footer')[0]
@@ -118,8 +118,22 @@ export default {
                         break
                     }
                 }
-            } else if (e.altKey && e.keyCode === 81) {
-                UseTabs.close()
+            } else if (e.altKey) {
+                if (e.keyCode === 81) {
+                    if (e.ctrlKey) {
+                        UseTabs.closeOther()
+                    } else {
+                        UseTabs.close()
+                    }
+                } else if (e.keyCode === 65) {
+                    document.getElementsByClassName('userbar-btn-search')[0]?.dispatchEvent(
+                        new MouseEvent('click', {
+                            view: window,
+                            bubbles: true,
+                            cancelable: false,
+                        }),
+                    )
+                }
             }
         }
     },

diff --git a/src/frontend/admin/src/components/scEcharts/echarts-theme-T.js b/src/frontend/admin/src/components/scEcharts/echarts-theme-T.js
@@ -1,13 +1,15 @@
 import colorTool from '@/utils/color'
 
 export default {
-    build() {
+    async build() {
         const style = getComputedStyle(document.documentElement)
-        const el_color_primary = style.getPropertyValue('--el-color-primary')
+        let el_color_primary
+        while ((el_color_primary = style.getPropertyValue('--el-color-primary')) === 'rgba(0, 0, 0, 0)') {
+            await new Promise((x) => setTimeout(x, 100))
+        }
         const el_color_info = style.getPropertyValue('--el-color-info')
         const el_text_color_primary = style.getPropertyValue('--el-text-color-primary')
         const el_border_color_lighter = style.getPropertyValue('--el-border-color-lighter')
-
         return {
             color: [el_color_primary, colorTool.lighten(el_color_primary, 0.5), ...colorTool.colorSets],
             grid: {

diff --git a/src/frontend/admin/src/components/scEcharts/index.vue b/src/frontend/admin/src/components/scEcharts/index.vue
@@ -29,7 +29,7 @@ export default {
         option: {
             deep: true,
             handler(v) {
-                unwarp(this.myChart).setOption(v, { notMerge: true })
+                unwarp(this.myChart)?.setOption(v, { notMerge: true })
             },
         },
     },
@@ -48,12 +48,11 @@ export default {
     deactivated() {
         this.isActivat = false
     },
-    mounted() {
+    async mounted() {
         this.isActivat = true
-        this.$nextTick(() => {
-            echarts.registerTheme('T', T.build())
-            this.draw()
-        })
+        await this.$nextTick()
+        echarts.registerTheme('T', await T.build())
+        this.draw()
     },
     methods: {
         draw() {

diff --git a/src/frontend/admin/src/directives/time.js b/src/frontend/admin/src/directives/time.js
@@ -1,64 +1,5 @@
 import tool from '@/utils/tool'
 
-const Time = {
-    //获取当前时间戳
-    getUnix: function () {
-        const date = new Date()
-        return date.getTime()
-    },
-    //获取今天0点0分0秒的时间戳
-    getTodayUnix: function () {
-        const date = new Date()
-        date.setHours(0)
-        date.setMinutes(0)
-        date.setSeconds(0)
-        date.setMilliseconds(0)
-        return date.getTime()
-    },
-    //获取今年1月1日0点0秒的时间戳
-    getYearUnix: function () {
-        const date = new Date()
-        date.setMonth(0)
-        date.setDate(1)
-        date.setHours(0)
-        date.setMinutes(0)
-        date.setSeconds(0)
-        date.setMilliseconds(0)
-        return date.getTime()
-    },
-    //获取标准年月日
-    getLastDate: function (time) {
-        const date = new Date(time)
-        const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
-        const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
-        return date.getFullYear() + '-' + month + '-' + day
-    },
-    //转换时间
-    getFormatTime: function (timestamp) {
-        timestamp = new Date(timestamp)
-        const now = this.getUnix()
-        const today = this.getTodayUnix()
-        //var year = this.getYearUnix();
-        const timer = (now - timestamp) / 1000
-        let tip
-
-        if (timer <= 0) {
-            tip = '刚刚'
-        } else if (Math.floor(timer / 60) <= 0) {
-            tip = '刚刚'
-        } else if (timer < 3600) {
-            tip = Math.floor(timer / 60) + '分钟前'
-        } else if (timer >= 3600 && (timestamp - today >= 0 || Math.floor(timer / 86400) <= 0)) {
-            tip = Math.floor(timer / 3600) + '小时前'
-        } else if (timer / 86400 <= 31) {
-            tip = Math.floor(timer / 86400) + '天前'
-        } else {
-            tip = this.getLastDate(timestamp)
-        }
-        return tip
-    },
-}
-
 export default (el, binding) => {
     let { value, modifiers } = binding
     if (!value) {
@@ -68,9 +9,9 @@ export default (el, binding) => {
         value = value * 1000
     }
     if (modifiers.tip) {
-        el.innerHTML = Time.getFormatTime(value)
+        el.innerHTML = tool.time.getFormatTime(value)
         el.__timeout__ = setInterval(() => {
-            el.innerHTML = Time.getFormatTime(value)
+            el.innerHTML = tool.time.getFormatTime(value)
         }, 60000)
     } else {
         const format = el.getAttribute('format') || undefined

diff --git a/src/frontend/admin/src/layout/components/search.vue b/src/frontend/admin/src/layout/components/search.vue
@@ -5,6 +5,8 @@
             :placeholder="$t('搜索')"
             :trigger-on-focus="false"
             @input="inputChange"
+            @keydown="inputKeyDown"
+            autofocus
             clearable
             prefix-icon="el-icon-search"
             ref="input"
@@ -25,7 +27,11 @@
             <div v-if="result.length <= 0" class="sc-search-no-result">{{ $t('暂无搜索结果') }}</div>
             <ul v-else>
                 <el-scrollbar max-height="30rem">
-                    <li v-for="item in result" :key="item.path" @click="to(item)">
+                    <li
+                        v-for="(item, i) in result"
+                        :class="{ 'sc-search-result-li-hover': this.cursor.index === i }"
+                        :key="item.path"
+                        @click="to(item)">
                         <el-icon>
                             <component :is="item.icon || 'el-icon-menu'" />
                         </el-icon>
@@ -41,18 +47,55 @@
 export default {
     data() {
         return {
+            cursor: {
+                position: 0,
+                index: 0,
+            },
             input: '',
             menu: [],
             result: [],
             history: [],
         }
     },
-    mounted() {
+    watch: {
+        result() {
+            this.cursor.position = 0
+            this.cursor.index = 0
+        },
+    },
+    async mounted() {
         this.history = this.$TOOL.data.get('SEARCH_HISTORY') || []
         this.filterMenu(this.$GLOBAL.menu)
+        await this.$nextTick()
+        await new Promise((x) => setTimeout(x, 200))
         this.$refs.input.focus()
     },
     methods: {
+        inputKeyDown(e) {
+            if (e.keyCode === 13) {
+                document
+                    .getElementsByClassName('sc-search-result')[0]
+                    ?.getElementsByClassName('el-scrollbar__view')[0]
+                    ?.children[this.cursor.index]?.dispatchEvent(
+                        new MouseEvent('click', {
+                            view: window,
+                            bubbles: true,
+                            cancelable: false,
+                        }),
+                    )
+                return
+            }
+            if (e.keyCode === 40) {
+                this.cursor.index = Math.abs(++this.cursor.position % this.result.length)
+                e.preventDefault()
+                return
+            }
+            if (e.keyCode === 38) {
+                this.cursor.index = Math.abs(--this.cursor.position % this.result.length)
+                e.preventDefault()
+                return
+            }
+        },
         inputChange(value) {
             if (value) {
                 this.result = this.menuFilter(value)
@@ -152,6 +195,9 @@ export default {
 }
 
 .sc-search-history {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
     margin-top: 1rem;
 }
 
@@ -182,9 +228,10 @@ export default {
     margin-right: 1rem;
 }
 
+.sc-search-result-li-hover,
 .sc-search-result li:hover {
-    background: var(--el-color-primary);
-    color: var(--el-color-white);
-    border-color: var(--el-color-primary);
+    background: var(--el-color-primary) !important;
+    color: var(--el-color-white) !important;
+    border-color: var(--el-color-primary) !important;
 }
 </style>