2024-04-19 更新系统整体主题样式

src/directives/permission/clientTable.ts

@@ -8,7 +8,7 @@ export function clientTable(app: App<Element>) {
     nextTick(() => {
       const top = el.getBoundingClientRect().top
       ////--top-tool-height:50  --tags-view-height:35
-      const qustionHeight = 85
+      const qustionHeight = 20
       let paginationHeight = 0
       if(el.children&&el.children.length>1){
         paginationHeight = 70

src/layout/components/CategoryHeader.vue

@@ -56,11 +56,12 @@ export default defineComponent({
         appStore.setCategoryRoutePath(currentPath)
       }
     }
-
     const activeMenu = computed(() => {
       return appStore.getCategoryRoutePath
     })
     return () => (
+      <div class="category-container">
+      <div class="line"></div>
       <ElMenu 
         defaultActive={unref(activeMenu)}
         id={`${variables.namespace}-tool-header`}
@@ -69,9 +70,7 @@ export default defineComponent({
           prefixCls,
           'h-[var(--top-category-height)] relative px-[var(--top-tool-p-x)] flex items-center ',
           'dark:bg-[var(--el-bg-color)]',
-          {
+          
-            'width':'200px'
-          }
         ]}
           mode="horizontal"
           backgroundColor="white"
@@ -102,6 +101,7 @@ export default defineComponent({
             }
         }}
       </ElMenu>
+      </div>
     )
   }
 })
@@ -115,8 +115,24 @@ $prefix-cls: #{$namespace}-tool-header;
 .#{$prefix-cls} {
   transition: left var(--transition-time-02);
 }
+.category-container{
+  background-color: transparent;
+  position: relative;
+  .line{
+    position: absolute;
+    width: 1px;
+    height:20px;
+    background: #fff;
+    top:calc(50% - 10px);
+    left:0;
+    z-index: 999;
+  }
+
+}
 .categoryheader{
   padding-left: 20px;
+  background: #0069ef;
+  border:1px solid #0069ef;
 }
 
 
@@ -125,11 +141,20 @@ $prefix-cls: #{$namespace}-tool-header;
     height: 40px;
     margin-right: 10px;
     margin-bottom: 2px;
-    background: rgb(242, 245, 248);
+    // background: rgb(242, 245, 248);
-    border: 1px solid #ccc;
+    background-color: hsla(0, 100%, 100%, 0.3);
+    color:#fff;
+    &:hover{
+      background: #fff !important;
+      color:#0069ef !important;
+    }
+    // border: 1px solid #ccc;
 }
 ::v-deep(.el-menu-item.is-active){
-  background: var(--el-menu-hover-bg-color)
+  // background: var(--el-menu-hover-bg-color)
+  // background: #085cf4;
+  color:#0069ef !important;
+  background: #fff;
 }
 
 </style>

src/layout/components/Logo/src/Logo.vue

@@ -24,26 +24,26 @@ onMounted(() => {
   if (unref(collapse)) show.value = false
 })
 
-watch(
+// watch(
-  () => collapse.value,
+//   () => collapse.value,
-  (collapse: boolean) => {
+//   (collapse: boolean) => {
-    if (unref(layout) === 'topLeft' || unref(layout) === 'cutMenu') {
+//     if (unref(layout) === 'topLeft' || unref(layout) === 'cutMenu') {
-      show.value = true
+//       show.value = true
-      return
+//       return
-    }
+//     }
-    if (!collapse) {
+//     if (!collapse) {
-      timer.value = setTimeout(() => {
+//       timer.value = setTimeout(() => {
-        show.value = !collapse
+//         show.value = !collapse
-        if(timer.value){
+//         if(timer.value){
-          clearTimeout(timer.value)
+//           clearTimeout(timer.value)
-          timer.value = 0
+//           timer.value = 0
-        }
+//         }
-      }, 400)
+//       }, 400)
-    } else {
+//     } else {
-      show.value = !collapse
+//       show.value = !collapse
-    }
+//     }
-  }
+//   }
-)
+// )
 onBeforeUnmount(() => {
   if(timer.value){
     clearTimeout(timer.value)
@@ -78,7 +78,7 @@ watch(
       to="/"
     >
       <img
-        class="h-[calc(var(--logo-height)-24px)] w-[calc(var(--logo-height)-10px)]"
+        class="h-24px w-[calc(var(--logo-height)-20px)]"
         src="@/assets/imgs/logo.png"
       />
       <div

src/layout/components/Menu/src/Menu.vue

@@ -150,7 +150,7 @@ $prefix-cls: #{$namespace}-menu;
   right: 0;
   width: 4px;
   height: 100%;
-  background-color: var(--el-color-primary);
+  // background-color: var(--el-color-primary);
   content: '';
 }
 

src/layout/components/useRenderLayout.tsx

@@ -38,30 +38,41 @@ const mobile = computed(() => appStore.getMobile)
 const fixedMenu = computed(() => appStore.getFixedMenu)
 // 搜索图片
 const search = computed(() => appStore.search)
+const scrollBarHeight = computed(() => {
+  return (window.innerHeight - appStore.getCategoryMenuHeight - 85)+'px'
+})
 
 export const useRenderLayout = () => {
   const renderClassic = () => {
     return (
       <>
-        <div
+      <div style="display:flex;flex-direction:row;width:100%;background:#0069ef;" class={['h-[var(--top-category-height)]']}>
-          class={[
-            'absolute top-0 left-0 h-full layout-border__right',
-            { '!fixed z-3000': mobile.value }
-          ]}
-        >
         {logo.value ? (
             <Logo 
               class={[
-                'bg-[var(--left-menu-bg-color)] relative',
+                'h-[var(--top-category-height)]',
+                'bg-[var(--el-color-primary)] relative',
+                'w-[var(--left-menu-max-width)]',
                 {
                   '!pl-0': mobile.value && collapse.value,
-                  'w-[var(--left-menu-min-width)]': appStore.getCollapse,
-                  'w-[var(--left-menu-max-width)]': !appStore.getCollapse
                 }
               ]}
-              style="transition: all var(--transition-time-02);"
+              style="transition: all var(--transition-time-02);background:#0069ef;"
             ></Logo>
           ) : undefined}
+          {appStore.getShowCategoryMenu?(<CategoryHeader class={[
+                  'bg-[var(--top-header-bg-color)]',
+                  {
+                    'layout-border__bottom': !tagsView.value
+                  }
+                ]}></CategoryHeader>):undefined}
+      </div>
+        <div
+          class={[
+            'absolute top-[var(--top-category-height)] left-0 h-full layout-border__right1',
+            { '!fixed z-3000': mobile.value }
+          ]}
+        >
           {/* {search.value && !appStore.getCollapse? (<div class={[
           prefixCls,
           'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between'
@@ -73,12 +84,12 @@ export const useRenderLayout = () => {
             'w-[var(--left-menu-max-width)]': !appStore.getCollapse
           }
         ]} isModal={false} /> </div>) : undefined} */}
-          <Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu>
+          <Menu class={['top-0',{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu>
         </div>
         <div
           class={[
             `${prefixCls}-content`,
-            'absolute top-[var(--top-category-height)] h-[calc(100%-var(--top-category-height))]',
+            'absolute top-[var(--top-category-height)]',
             {
               'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
                 collapse.value && !mobile.value && !mobile.value,
@@ -88,21 +99,11 @@ export const useRenderLayout = () => {
             }
           ]}
           style="transition: all var(--transition-time-02);"
-        >
-          <ElScrollbar
-            v-loading={pageLoading.value}
-            class={[
-              `${prefixCls}-content-scrollbar`,
-              {
-                '!h-[calc(100%-var(--top-tool-height)-var(--top-category-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
-                  fixedHeader.value
-              }
-            ]}
         >
           <div
             class={[
               {
-                  'fixed top-0 left-0 z-10': fixedHeader.value,
+                'top-[var(--top-category-height) left-0 z-10': fixedHeader.value,
                 'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
                   collapse.value && fixedHeader.value && !mobile.value,
                 'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
@@ -110,14 +111,9 @@ export const useRenderLayout = () => {
                 '!w-full !left-0': mobile.value
               }
             ]}
-              style="transition: all var(--transition-time-02);"
+            style="transition: all var(--transition-time-02);width:100%;"
           >
-              {appStore.getShowCategoryMenu?(<CategoryHeader class={[
+            
-                  'bg-[var(--top-header-bg-color)]',
-                  {
-                    'layout-border__bottom': !tagsView.value
-                  }
-                ]}></CategoryHeader>):undefined}
             <ToolHeader
               class={[
                 'bg-[var(--top-header-bg-color)]',
@@ -131,7 +127,17 @@ export const useRenderLayout = () => {
               <TagsView class="layout-border__bottom layout-border__top"></TagsView>
             ) : undefined}
           </div>
-
+          <ElScrollbar
+            v-loading={pageLoading.value}
+            height={scrollBarHeight.value}
+            class={[
+              `${prefixCls}-content-scrollbar`,
+              {
+                '!h-[calc(100%-var(--app-content-padding)-var(--top-tool-height)-var(--top-category-height)-var(--tags-view-height))] ':
+                  fixedHeader.value
+              }
+            ]}
+          >
             <AppView></AppView>
           </ElScrollbar>
         </div>

src/store/modules/app.ts

@@ -38,6 +38,7 @@ interface AppState {
   fixedMenu: boolean
   categoryRoutePath:string
   showCategoryMenu: boolean
+  categoryMenuHeight:number
 }
 
 export const useAppStore = defineStore('app', {
@@ -76,17 +77,17 @@ export const useAppStore = defineStore('app', {
         // 左侧菜单边框颜色
         leftMenuBorderColor: 'inherit',
         // 左侧菜单背景颜色
-        leftMenuBgColor: '#001529',
+        leftMenuBgColor: 'rgb(241,243,244)',
         // 左侧菜单浅色背景颜色
-        leftMenuBgLightColor: '#0f2438',
+        leftMenuBgLightColor: 'rgb(241,243,244)',
         // 左侧菜单选中背景颜色
-        leftMenuBgActiveColor: 'var(--el-color-primary)',
+        leftMenuBgActiveColor: 'rgb(241,243,244)',
         // 左侧菜单收起选中背景颜色
         leftMenuCollapseBgActiveColor: 'var(--el-color-primary)',
         // 左侧菜单字体颜色
-        leftMenuTextColor: '#bfcbd9',
+        leftMenuTextColor: '#666',
         // 左侧菜单选中字体颜色
-        leftMenuTextActiveColor: '#fff',
+        leftMenuTextActiveColor: '#0069ef',
         // logo字体颜色
         logoTitleTextColor: '#fff',
         // logo边框颜色
@@ -101,7 +102,8 @@ export const useAppStore = defineStore('app', {
         topToolBorderColor: '#eee'
       },
       categoryRoutePath:'',
-      showCategoryMenu:true // true:顶部展示一级菜单栏 false:只有左侧菜单栏
+      showCategoryMenu:true, // true:顶部展示一级菜单栏 false:只有左侧菜单栏
+      categoryMenuHeight:60 // true:顶部展示一级菜单栏 false:只有左侧菜单栏
     }
   },
   getters: {
@@ -186,6 +188,9 @@ export const useAppStore = defineStore('app', {
     getShowCategoryMenu():boolean {
       return this.showCategoryMenu
     },
+    getCategoryMenuHeight():number {
+      return this.categoryMenuHeight
+    }
   },
   actions: {
     setBreadcrumb(breadcrumb: boolean) {

src/styles/var.css

@@ -1,5 +1,5 @@
 :root {
-  --login-bg-color: #293146;
+  --login-bg-color: #0069ef;
 
   --left-menu-max-width: 200px;
 
@@ -19,7 +19,7 @@
   /* left menu end */
 
   /* logo start */
-  --logo-height: 50px;
+  --logo-height: 60px;
 
   --logo-title-text-color: #fff;
   /* logo end */