样式修改

src/assets/stylus/index.styl

@@ -44,6 +44,13 @@
   height: var(--el-component-custom-height) !important;
 }
 
+
+.el-button:focus-visible {
+  outline none !important
+  outline-offset unset !important
+  transition none !important
+}
+
 // circle 按钮宽度优化
 .el-button--default.is-circle {
   width: var(--el-component-custom-height) !important;

src/common/router/index.ts

@@ -77,12 +77,9 @@ router.beforeEach((to, from) => {
         }
       } else {
         let routeName = router.getRoutes().find((it) => it.path === to.path)?.name as string
-        console.log('reloadRouter11', routeName, Strings.isBlank(routeName))
         if (Strings.isBlank(routeName)) {
           routeName = SpecialPage.Home
-          ElMessage.error('页面不存在222')
         }
-        console.log('reloadRouter', to, router.getRoutes(), routeName)
         setTimeout(() => {
           Nav.open(routeName)
         })

src/components/page/FormPage.vue

@@ -443,7 +443,6 @@ onMounted(doSearch)
 
       .tool-bar-left {
         flex 1
-
       }
 
       .tool-bar-right {
@@ -456,6 +455,7 @@ onMounted(doSearch)
         :deep(.el-form) {
           display flex
           gap 10px
+          flex-shrink 0
 
           .el-form-item {
             margin: 0;
@@ -477,6 +477,11 @@ onMounted(doSearch)
           }
         }
 
+
+        :deep(.el-dropdown) {
+          flex-shrink 0
+        }
+
         :deep(.el-button--default).filter-btn-active {
           color var(--main-color)
         }
@@ -551,4 +556,18 @@ onMounted(doSearch)
     }
   }
 }
+
+@media (max-width: 900px) {
+  .tool-bar {
+    flex-direction column
+    align-items start
+    gap 10px
+    justify-content space-between
+
+    .tool-bar-right {
+      width 100%
+      justify-content space-between !important
+    }
+  }
+}
 </style>

src/components/page/Page.vue

@@ -13,7 +13,7 @@
   height 100%
   width 100%;
   overflow hidden
-  padding 5px
+  padding 0 5px 5px 5px
   contain: layout paint;
   transform: translateZ(0);
   box-sizing border-box

src/dts/components.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -74,6 +75,7 @@ declare global {
   const ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
   const ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
   const ElButton: typeof import('element-plus/es')['ElButton']
+  const ElCard: typeof import('element-plus/es')['ElCard']
   const ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
   const ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
   const ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']

src/pages/a-frame/AFrame.vue

@@ -81,18 +81,19 @@ onUnmounted(() => {
     height 100%
 
     .a-frame-header {
-      height 100px
+      height 110px
-      padding: 0 10px 0 0
+      padding 0
-
+      background-color: #FAFBFC;
-      background-color white
 
       & > div:nth-child(1) {
         height 60px
         width 100%
-
+        background-color white
         display flex
         justify-content space-between
         box-sizing border-box
+        border-bottom 1px solid #EAEBF1;
+        padding-right 5px
 
         & > div:nth-child(1) {
           height: 100%;

src/pages/a-frame/ATabbar.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="a-tabs">
-    <ElScrollbar class="a-tabs-scrollbar">
+    <ElScrollbar
+      ref="tabsScrollbar"
+      class="a-tabs-scrollbar"
+    >
       <div class="a-tabs-wrapper">
         <div v-for="(item,i) in appPageStore.pages"
+          :id="item.insId"
           :key="'a-frame-header-tab'+i"
           :class="{'a-tab-item-active': item.insId === appPageStore.currentPage}"
           class="a-tab-item"
@@ -32,8 +36,19 @@ import { useAppPageStore } from '@/common/app/app-page-store.ts'
 import { elIcons } from '@/common/element/element.ts'
 import type { IconName } from '@/components/a-icon/iconfont.ts'
 import AIcon from '@/components/a-icon/AIcon.vue'
+import type { ScrollbarInstance } from 'element-plus'
 
 const appPageStore = useAppPageStore()
+const tabsScrollbarIns = useTemplateRef<ScrollbarInstance>('tabsScrollbar')
+
+watch(
+  () => appPageStore.currentPage,
+  () => {
+    nextTick(() => {
+      const tabItem = document.getElementById(appPageStore.currentPage)
+      if (tabItem != null) tabsScrollbarIns.value?.setScrollLeft(tabItem.offsetLeft)
+    })
+  })
 
 function reopen(insId: string) {
   appPageStore.reopen(insId)
@@ -45,106 +60,126 @@ function handleCommand(command: 'closeCurrent' | 'closeOther' | 'closeAll') {
 </script>
 <style lang="stylus" scoped>
 .a-tabs {
-  height 32px
+  height 42px
   width 100%;
   box-sizing border-box
-  border-top 1px solid #EAEBF1;
+  //border-top 1px solid #EAEBF1;
-  border-bottom 1px solid #EAEBF1;
+  //border-bottom 1px solid #EAEBF1;
   display flex
   justify-content space-between
   align-items center
   color #303133
+  padding: 0 5px;
+  gap 10px
+
+  .a-tabs-scrollbar {
+    height 100%
+    //width calc(100% - 52px);
+    flex 1
+    box-sizing border-box
+
+    :deep(.el-scrollbar__wrap) {
+      height 100%
+      box-sizing border-box
+      scroll-behavior: smooth;
+    }
+
+    :deep(.el-scrollbar__view) {
+      height 100%
+      box-sizing border-box
+    }
+  }
+
+  .a-tabs-wrapper {
+    height 100%
+    width: fit-content;
+    display flex
+    box-sizing border-box
+    align-items center
+    padding 5px 5px 0 0
+    gap 12px
+
+    .a-tab-item {
+      height 100%
+      padding 5px 10px
+      cursor pointer
+      display flex
+      justify-content space-between
+      gap 20px
+      align-items center
+      box-sizing border-box
+      position relative
+      border 1px solid #EAEBF1
+      box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
+      transition color, box-shadow, border 0.2s ease-in-out
+      font-size 14px
+      background-color white
+      border-radius 5px
+      text-wrap: nowrap;
+
+      &::after {
+        content ''
+        height 1px
+        width 0
+        background-color var(--main-color)
+        margin auto
+        box-sizing border-box
+        position absolute
+        bottom 0
+        left: 50%;
+        transform: translateX(-50%);
+        transition width 0.2s ease-in-out
+      }
+
+      &.a-tab-item-active {
+        color var(--main-color)
+        //border 1px solid var(--main-color)
+      }
+
+      &:not(.a-tab-item-active):hover {
+        color var(--main-color)
+        box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
+
+        &::after {
+          width 95%
+        }
+      }
+
+      & > div:first-child {
+        display flex
+        gap 10px
+        align-items center
+      }
+
+      & > button {
+        padding 0
+        width 14px
+        height 14px !important
+        line-height 14px
+        border-radius 50%
+
+        &:hover {
+          color var(--el-color-danger)
+        }
+      }
+
+    }
+  }
 
   :deep(.el-dropdown) {
     width: 32px;
     padding: 0;
-    margin-right 20px
+    background-color white
-  }
-}
-
-.a-tabs-scrollbar {
-  height 100%
-  width calc(100% - 52px);
-  box-sizing border-box
-
-  :deep(.el-scrollbar__wrap) {
-    height 100%
-    box-sizing border-box
-  }
-
-  :deep(.el-scrollbar__view) {
-    height 100%
-    box-sizing border-box
-  }
-}
-
-.a-tabs-wrapper {
-  height 100%
-  width: fit-content;
-  display flex
-  box-sizing border-box
-  align-items center
-
-  .a-tab-item {
-    height 100%
-    max-width 160px
-    padding 5px 10px
-    cursor pointer
-    display flex
-    justify-content space-between
-    gap 20px
-    align-items center
-    box-sizing border-box
-    position relative
-    border-right 1px solid #EAEBF1
-    transition color 0.2s ease-in-out
-    font-size 14px
-
-    & > div:first-child {
-      display flex
-      gap 10px
-      align-items center
-    }
 
     & > button {
-      padding 0
+      background-color white
-      width 14px
+      border: 1px solid var(--el-button-border-color);
-      height 14px !important
+      padding: 0;
-      line-height 14px
+      width: 32px;
-      border-radius 50%
+      outline: none !important;
-
+      outline-offset unset !important
-      &:hover {
-        color var(--el-color-danger)
-      }
-    }
-
-    &::after {
-      content ''
-      height 2px
-      width 0
-      background-color var(--main-color)
-      position absolute
-      bottom 0
-      left: 50%;
-      transform: translateX(-50%);
-      transition width 0.2s ease-in-out
-    }
-
-    &.a-tab-item-active {
-      color var(--main-color)
-
-      &::after {
-        width 100%
-      }
-    }
-
-    &:hover {
-      color var(--main-color)
-
-      &::after {
-        width 100%
-      }
     }
   }
 }
+
 </style>