fixed: 暗色主题下 tabs 颜色不变的问题.

orion-ops-ui/package.json

@@ -29,7 +29,7 @@
     ]
   },
   "dependencies": {
-    "@arco-design/web-vue": "^2.53.0",
+    "@arco-design/web-vue": "^2.53.3",
     "@dangojs/a-query-header": "^0.0.31",
     "@sanqi377/arco-vue-icon-picker": "^1.0.7",
     "@vueuse/core": "^9.3.0",

orion-ops-ui/src/assets/style/global.less

@@ -35,7 +35,7 @@ body {
     width: 164px;
     height: 32px;
     line-height: 32px;
-    box-shadow: 6px 0px 20px rgba(34, 87, 188, 0.1);
+    box-shadow: 6px 0 20px rgba(34, 87, 188, 0.1);
     border-radius: 4px;
     margin-bottom: 4px;
   }
@@ -55,7 +55,7 @@ body {
     display: flex;
     align-items: center;
     text-align: right;
-    color: #1d2129;
+    color: #1D2129;
     font-weight: bold;
   }
 

orion-ops-ui/src/components/app/navbar/index.vue

@@ -164,7 +164,7 @@
           <!-- 头像 -->
           <a-avatar draggable="false"
                     :size="32"
-                    :style="{ cursor: 'pointer', backgroundColor: '#3370ff', userSelect: 'none' }">
+                    :style="{ cursor: 'pointer', backgroundColor: 'rgb(var(--primary-6))', userSelect: 'none' }">
             {{ nickname }}
           </a-avatar>
           <template #content>

orion-ops-ui/src/components/view/tab-router/index.vue

@@ -71,7 +71,7 @@
     display: flex;
     flex-direction: column;
     user-select: none;
-    background: #FFF;
+    background: var(--color-bg-1);
   }
 
   .tab-item {

orion-ops-ui/src/views/asset/host-group/components/host-list.vue

@@ -104,7 +104,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      color: #FFF;
+      color: var(--color-white);
       background: rgb(var(--blue-6));
       margin-right: 8px;
       border-radius: 4px;

orion-ops-ui/src/views/asset/host-group/index.vue

@@ -126,7 +126,7 @@
     width: 100%;
     height: 100%;
     position: relative;
-    background: #FFF;
+    background: var(--color-bg-1);
   }
 
   :deep(.arco-tabs-tab-title){

orion-ops-ui/src/views/dashboard/workplace/components/categories-percent.vue

@@ -50,7 +50,7 @@
             style: {
               text: '内容量',
               textAlign: 'center',
-              fill: isDark ? '#ffffffb3' : '#4E5969',
+              fill: isDark ? '#FFFFFFB3' : '#4E5969',
               fontSize: 14,
             },
           },
@@ -61,7 +61,7 @@
             style: {
               text: '928,531',
               textAlign: 'center',
-              fill: isDark ? '#ffffffb3' : '#1D2129',
+              fill: isDark ? '#FFFFFFB3' : '#1D2129',
               fontSize: 16,
               fontWeight: 500,
             },
@@ -79,7 +79,7 @@
             color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969',
           },
           itemStyle: {
-            borderColor: isDark ? '#232324' : '#fff',
+            borderColor: isDark ? '#232324' : '#FFF',
             borderWidth: 1,
           },
           data: [

orion-ops-ui/src/views/dashboard/workplace/components/popular-content.vue

@@ -60,7 +60,7 @@
                   <span>{{ record.increases }}%</span>
                   <icon-caret-up
                     v-if="record.increases !== 0"
-                    style="color: #f53f3f; font-size: 8px"
+                    style="color: #F53F3F; font-size: 8px"
                   />
                 </div>
               </template>

orion-ops-ui/src/views/user/info/components/login-history.vue

@@ -124,9 +124,9 @@
     border-radius: 50%;
     width: 56px;
     height: 56px;
+    color: var(--color-white);
     background: var(--color-fill-4);
     font-size: 28px;
-    color: #FFFFFF;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -140,6 +140,10 @@
 
   :deep(.arco-timeline-item) {
     padding-bottom: 36px;
+
+    .arco-timeline-item-dot-custom {
+      background: unset;
+    }
   }
 
   .log-line {

orion-ops-ui/src/views/user/info/components/user-base-info.vue

@@ -4,7 +4,7 @@
     <div class="avatar-container">
       <div class="avatar-wrapper">
         <a-avatar :size="88"
-                  :style="{ backgroundColor: '#3370ff' }">
+                  :style="{ backgroundColor: 'rgb(var(--primary-6))' }">
           {{ nickname }}
         </a-avatar>
       </div>

orion-ops-ui/src/views/user/info/components/user-session.vue

@@ -151,9 +151,9 @@
     border-radius: 50%;
     width: 56px;
     height: 56px;
+    color: var(--color-white);
     background: var(--color-fill-4);
     font-size: 28px;
-    color: #FFFFFF;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -167,6 +167,10 @@
 
   :deep(.arco-timeline-item) {
     padding-bottom: 36px;
+
+    .arco-timeline-item-dot-custom {
+      background: unset;
+    }
   }
 
   .session-line {

orion-ops-ui/src/views/user/info/index.vue

@@ -102,7 +102,7 @@
 
 <style lang="less" scoped>
   .tabs-container {
-    background: #FFFFFF;
+    background: var(--color-bg-1);
     margin: 16px 16px 0 16px;
     padding: 16px;
     display: flex;

orion-ops-ui/src/views/user/user/types/table.columns.ts

@@ -51,7 +51,7 @@ const columns = [
   }, {
     title: '操作',
     slotName: 'handle',
-    width: 330,
+    width: 340,
     align: 'center',
     fixed: 'right',
   },