feat: 修改主题样式添加logo

src/assets/logo.svg

@@ -1,12 +0,0 @@
-<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.37754 16.9795L12.7498 9.43027C14.7163 7.41663 17.9428 7.37837 19.9564 9.34482C19.9852 9.37297 20.0137 9.40145 20.0418 9.43027L20.1221 9.51243C22.1049 11.5429 22.1049 14.7847 20.1221 16.8152L12.7498 24.3644C10.7834 26.378 7.55686 26.4163 5.54322 24.4498C5.5144 24.4217 5.48592 24.3932 5.45777 24.3644L5.37754 24.2822C3.39468 22.2518 3.39468 19.0099 5.37754 16.9795Z" fill="#12D2AC"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0479 9.43034L27.3399 16.8974C29.3674 18.9735 29.3674 22.2883 27.3399 24.3644C25.3735 26.3781 22.147 26.4163 20.1333 24.4499C20.1045 24.4217 20.076 24.3933 20.0479 24.3644L12.7558 16.8974C10.7284 14.8213 10.7284 11.5065 12.7558 9.43034C14.7223 7.4167 17.9488 7.37844 19.9624 9.34489C19.9912 9.37304 20.0197 9.40152 20.0479 9.43034Z" fill="#307AF2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20.1321 9.52163L23.6851 13.1599L16.3931 20.627L9.10103 13.1599L12.6541 9.52163C14.6707 7.45664 17.9794 7.4174 20.0444 9.434C20.074 9.46286 20.1032 9.49207 20.1321 9.52163Z" fill="#0057FE"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="26" height="19" fill="white" transform="translate(3.5 7)"/>
-</clipPath>
-</defs>
-</svg>

src/assets/style/global.less

@@ -9,69 +9,83 @@ body {
   margin: 0;
   padding: 0;
   font-size: 14px;
-  background-color: var(--color-bg-1);
+  background-color: var(--color-theme-2);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
+
+  --color-theme-1: #0b2349;
+  --color-theme-2: #3c4e69;
+  --table-th-bg: #5f6c7f;
+  --color-input-bg: #77818e;
+  --color-border: #5f6c7f;
 }
 
 .echarts-tooltip-diy {
   background: linear-gradient(
     304.17deg,
-    rgba(253, 254, 255, 0.6) -6.04%,
-    rgba(244, 247, 252, 0.6) 85.2%
+    rgb(253 254 255 / 60%) -6.04%,
+    rgb(244 247 252 / 60%) 85.2%
   ) !important;
   border: none !important;
-  backdrop-filter: blur(10px) !important;
+
   /* Note: backdrop-filter has minimal browser support */
 
   border-radius: 6px !important;
+  backdrop-filter: blur(10px) !important;
+
   .content-panel {
     display: flex;
     justify-content: space-between;
-    padding: 0 9px;
-    background: rgba(255, 255, 255, 0.8);
     width: 164px;
     height: 32px;
+    margin-bottom: 4px;
+    padding: 0 9px;
     line-height: 32px;
-    box-shadow: 6px 0px 20px rgba(34, 87, 188, 0.1);
+    background: rgb(255 255 255 / 80%);
     border-radius: 4px;
-    margin-bottom: 4px;
+    box-shadow: 6px 0 20px rgb(34 87 188 / 10%);
   }
+
   .tooltip-title {
-    margin: 0 0 10px 0;
+    margin: 0 0 10px;
   }
+
   p {
     margin: 0;
   }
+
   .tooltip-title,
   .tooltip-value {
-    font-size: 13px;
-    line-height: 15px;
     display: flex;
     align-items: center;
-    text-align: right;
     color: #1d2129;
     font-weight: bold;
+    font-size: 13px;
+    line-height: 15px;
+    text-align: right;
   }
+
   .tooltip-item-icon {
     display: inline-block;
-    margin-right: 8px;
     width: 10px;
     height: 10px;
+    margin-right: 8px;
     border-radius: 50%;
   }
 }
 
 .general-card {
-  border-radius: 4px;
   border: none;
+  border-radius: 4px;
+
   & > .arco-card-header {
     height: auto;
     padding: 20px;
     border: none;
   }
+
   & > .arco-card-body {
-    padding: 0 20px 20px 20px;
+    padding: 0 20px 20px;
   }
 }
 
@@ -82,13 +96,42 @@ body {
 .arco-table-cell {
   .circle {
     display: inline-block;
-    margin-right: 4px;
     width: 6px;
     height: 6px;
-    border-radius: 50%;
+    margin-right: 4px;
     background-color: rgb(var(--blue-6));
+    border-radius: 50%;
+
     &.pass {
       background-color: rgb(var(--green-6));
     }
   }
 }
+
+.arco-table {
+  tr th {
+    color: var(--color-white);
+    font-weight: 600;
+    background-color: var(--table-th-bg);
+  }
+
+  tr td {
+    color: var(--color-white);
+    font-weight: 600;
+    background-color: var(--color-theme-2);
+    border-color: var(--color-border);
+  }
+
+  tr:hover td {
+    background-color: var(--table-th-bg) !important;
+  }
+}
+
+.arco-form-item-label {
+  color: var(--color-white) !important;
+  font-weight: 600;
+}
+
+.arco-modal {
+  background-color: var(--color-theme-2);
+}

src/components/menu/index.vue

@@ -16,7 +16,6 @@ export default defineComponent({
     const router = useRouter();
     const route = useRoute();
     const { menuTree } = useMenuTree();
-    console.log('iiii', menuTree.value);
     const collapsed = computed({
       get() {
         if (appStore.device === 'desktop') return appStore.menuCollapse;

src/components/menu/nav-menu.vue

@@ -96,7 +96,7 @@ const handleMouseLeave = () => {
       color: var(--color-white);
     }
 
-    background-color: #0b2349;
+    background-color: var(--color-theme-1);
   }
 
   .active {
@@ -104,7 +104,7 @@ const handleMouseLeave = () => {
       color: var(--color-white);
     }
 
-    background-color: #0b2349;
+    background-color: var(--color-theme-1);
   }
 }
 </style>

src/components/menu/nav-second-menu.vue

@@ -4,12 +4,13 @@
     @mouseenter="handleSelfMouseEnter"
     @mouseleave="handleSelfMouseLeave"
   >
-    <li
-      v-for="item in displayedMenuList"
-      :class="['menu-item', { active: item.name === route.name }]"
-      @click="handleJumpRoute(item)"
-    >
-      <span>{{ item.name }}</span>
+    <li v-for="item in displayedMenuList" @click="handleJumpRoute(item)">
+      <div
+        :class="['menu-item', { active: item.name === route.name }]"
+        v-if="!item.meta?.hideInMenu"
+      >
+        <span>{{ item.name }}</span>
+      </div>
     </li>
   </ul>
 </template>
@@ -58,7 +59,7 @@ const displayedMenuList = computed(() => {
   // 最后使用默认菜单
   return menuList.value || [];
 });
-
+console.log('displayedMenuList', displayedMenuList.value);
 // 处理自身鼠标进入事件
 const handleSelfMouseEnter = () => {
   mouseInSelf = true;
@@ -90,19 +91,23 @@ const handleJumpRoute = (item: RouteRecordRaw) => {
 };
 </script>
 <style lang="less" scoped>
+li {
+  list-style: none;
+}
+
 .menu-container {
   display: flex;
   flex-direction: row;
   justify-content: start;
   width: 100%;
   margin: 0;
+  padding-left: 70px;
   background-color: #0b2349;
 
   .menu-item {
     height: 45px;
     margin-top: 1px;
     padding: 10px 20px;
-    list-style: none;
     cursor: pointer;
 
     span {
@@ -118,7 +123,7 @@ const handleJumpRoute = (item: RouteRecordRaw) => {
       color: var(--color-white);
     }
 
-    background-color: #3c4e69;
+    background-color: var(--color-theme-2);
   }
 
   .active {
@@ -126,7 +131,7 @@ const handleJumpRoute = (item: RouteRecordRaw) => {
       color: var(--color-white);
     }
 
-    background-color: #3c4e69;
+    background-color: var(--color-theme-2);
   }
 }
 </style>

src/components/navbar/index.vue

@@ -4,7 +4,10 @@
     :style="{ width: topMenu ? '100%' : currentWidth }"
   >
     <div class="navbar">
-      <div class="left-side">
+      <div v-if="topMenu" class="logo">
+        <img style="width: 100%; height: 100%" src="@/assets/MTR-logo.jpg" />
+      </div>
+      <div v-if="!topMenu" class="left-side">
         <a-button
           type="text"
           :style="{
@@ -14,7 +17,6 @@
             color: 'var(--color-text-3)',
           }"
           @click="toggleCollapse"
-          v-show="!topMenu"
         >
           <icon-menu-unfold v-if="collapsed" />
           <icon-menu-fold v-else />
@@ -314,6 +316,14 @@ const internalHoveredItemFun = (item: RouteRecordNormalized) => {
     height: 100%;
     background-color: var(--color-bg-2);
     border-bottom: 1px solid var(--color-border);
+
+    .logo {
+      width: 110px;
+      height: 35px;
+      margin-top: 3px;
+      margin-left: 20px;
+      cursor: pointer;
+    }
   }
 
   .left-side {

src/layout/default-layout.vue

@@ -22,11 +22,7 @@
             :style="{ paddingLeft: collapsed ? '10px' : '20px' }"
           >
             <a-space>
-              <img
-                class="logo"
-                alt="logo"
-                src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image"
-              />
+              <img class="logo" alt="logo" src="@/assets/logo.png" />
               <a-typography-title
                 :style="{ fontSize: '18px' }"
                 :heading="5"
@@ -83,7 +79,9 @@ const route = useRoute();
 const permission = usePermission();
 useResponsive(true);
 const navbarHeight = `40px`;
+const topNavbarHeight = `76px`;
 const navbar = computed(() => appStore.navbar);
+const topMenu = computed(() => appStore.topMenu);
 const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
 const hideMenu = computed(() => appStore.hideMenu);
 const footer = computed(() => appStore.footer);
@@ -98,7 +96,9 @@ const paddingStyle = computed(() => {
     renderMenu.value && !hideMenu.value
       ? { paddingLeft: `${menuWidth.value}px` }
       : {};
-  const paddingTop = navbar.value ? { paddingTop: navbarHeight } : {};
+  const paddingTop = navbar.value
+    ? { paddingTop: topMenu.value ? topNavbarHeight : navbarHeight }
+    : {};
   return { ...paddingLeft, ...paddingTop };
 });
 const setCollapsed = (val: boolean) => {
@@ -179,6 +179,8 @@ onMounted(() => {
   overflow: hidden;
 
   .logo {
+    width: 30px;
+    height: 30px;
     margin-right: 10px;
   }
 }
@@ -208,9 +210,13 @@ onMounted(() => {
 }
 
 .layout-content {
+  :deep(.arco-card) {
+    background-color: var(--color-theme-2);
+  }
+
   min-height: 100vh;
   overflow-y: hidden;
-  background-color: var(--color-fill-2);
+  background-color: var(--color-theme-1) !important;
   transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 </style>