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

7 months ago · 7c8e67ff78
7 changed files with 121 additions and 85 deletions
--- a/src/directives/permission/clientTable.ts
+++ b/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
--- a/src/layout/components/CategoryHeader.vue
+++ b/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);
-    border: 1px solid #ccc;
+    // background: rgb(242, 245, 248);
+    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>
--- a/src/layout/components/Logo/src/Logo.vue
+++ b/src/layout/components/Logo/src/Logo.vue
@ -24,26 +24,26 @@ onMounted(() => {
  if (unref(collapse)) show.value = false
 })

-watch(
-  () => collapse.value,
-  (collapse: boolean) => {
-    if (unref(layout) === 'topLeft' || unref(layout) === 'cutMenu') {
-      show.value = true
-      return
-    }
-    if (!collapse) {
-      timer.value = setTimeout(() => {
-        show.value = !collapse
-        if(timer.value){
-          clearTimeout(timer.value)
-          timer.value = 0
-        }
-      }, 400)
-    } else {
-      show.value = !collapse
-    }
-  }
-)
+// watch(
+//   () => collapse.value,
+//   (collapse: boolean) => {
+//     if (unref(layout) === 'topLeft' || unref(layout) === 'cutMenu') {
+//       show.value = true
+//       return
+//     }
+//     if (!collapse) {
+//       timer.value = setTimeout(() => {
+//         show.value = !collapse
+//         if(timer.value){
+//           clearTimeout(timer.value)
+//           timer.value = 0
+//         }
+//       }, 400)
+//     } else {
+//       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
--- a/src/layout/components/Menu/src/Menu.vue
+++ b/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: '';
 }

--- a/src/layout/components/useRenderLayout.tsx
+++ b/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
-          class={[
-            'absolute top-0 left-0 h-full layout-border__right',
-            { '!fixed z-3000': mobile.value }
-          ]}
-        >
-          {logo.value ? (
-            <Logo
+      <div style="display:flex;flex-direction:row;width:100%;background:#0069ef;" class={['h-[var(--top-category-height)]']}>
+        {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,
@ -89,49 +100,44 @@ export const useRenderLayout = () => {
          ]}
          style="transition: all var(--transition-time-02);"
        >
-          <ElScrollbar
-            v-loading={pageLoading.value}
+          <div
            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
+                '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)]':
+                  !collapse.value && fixedHeader.value && !mobile.value,
+                '!w-full !left-0': mobile.value
              }
            ]}
+            style="transition: all var(--transition-time-02);width:100%;"
          >
-            <div
+            
+            <ToolHeader
              class={[
+                'bg-[var(--top-header-bg-color)]',
                {
-                  'fixed top-0 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)]':
-                    !collapse.value && fixedHeader.value && !mobile.value,
-                  '!w-full !left-0': mobile.value
+                  'layout-border__bottom': !tagsView.value
                }
              ]}
-              style="transition: all var(--transition-time-02);"
-            >
-              {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)]',
-                  {
-                    'layout-border__bottom': !tagsView.value
-                  }
-                ]}
-              ></ToolHeader>
-
-              {tagsView.value ? (
-                <TagsView class="layout-border__bottom layout-border__top"></TagsView>
-              ) : undefined}
-            </div>
+            ></ToolHeader>

+            {tagsView.value ? (
+              <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>
--- a/src/store/modules/app.ts
+++ b/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) {
--- a/src/styles/var.css
+++ b/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 */