dark换肤

WeBankFinTech · Aug 19, 2021 · 6e6f640 · 6e6f640
1 parent 27660ae
commit 6e6f640
Show file tree

Hide file tree

Showing 123 changed files with 836 additions and 4,352 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/web/src/apps/dataService/module/common/manageMenu.vue b/web/src/apps/dataService/module/common/manageMenu.vue
@@ -9,7 +9,7 @@
         :class="{'active': $route.path.startsWith(`/${menu.path}`) }" 
         @click="handleTabClick(menu.path)"
       >
-        <Icon custom="iconfont" :class="menu.icon" size="16"></Icon>
+        <SvgIcon :icon-class="menu.icon" />
         <span>{{menu.name}}</span>
       </div>
     </div>
@@ -21,10 +21,10 @@ export default {
   data() {
     return {
       menuList: [
-        { name: 'API管理', icon: 'icon-APIguanli', path: 'dataManagement/index'},
-        { name: 'API监控', icon: 'icon-APIjiankong', path: 'dataManagement/monitor'},
-        { name: 'API测试', icon: 'icon-APIceshi', path: 'dataManagement/test'},
-        { name: 'API调用', icon: 'icon-APItiaoyong', path: 'dataManagement/call'},
+        { name: 'API管理', icon: 'api-index', path: 'dataManagement/index'},
+        { name: 'API监控', icon: 'api-monitor', path: 'dataManagement/monitor'},
+        { name: 'API测试', icon: 'api-test', path: 'dataManagement/test'},
+        { name: 'API调用', icon: 'api-auth', path: 'dataManagement/call'},
       ]
     }
   },
@@ -39,26 +39,30 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import "@/common/style/variables.scss";
 .manage-menu-wrap {
-  background: #F8F9FC;
+  @include bg-color(#f8f9fc, $dark-menu-base-color);
   .manage-title {
     padding: 10px 12px;
     font-size: 14px;
     line-height: 20px;
-    color: #666;
+    @include font-color(#666, $dark-text-color);
     font-weight: bold;
     border-bottom: 1px solid #DEE4EC;
+    @include border-color(#DEE4EC, $dark-border-color);
   }
   .manage-menu {
     &-item {
       padding: 0 10px;
       height: 40px;
       line-height: 40px;
-      color: #666;
+      font-size: 14px;
+      @include font-color(#666, $dark-text-color);
       cursor: pointer;
       border-bottom: 1px solid #DEE4EC;
+      @include border-color(#DEE4EC, $dark-border-color);
       &:hover {
-        background: #EDF1F6;
+        @include bg-color(#EDF1F6, $dark-active-menu-item);
       }
       span {
         margin-left: 6px;

diff --git a/web/src/apps/dataService/module/common/navMenu.vue b/web/src/apps/dataService/module/common/navMenu.vue
@@ -6,14 +6,14 @@
         :class="{ active: currentTab == '/dataService' }"
         @click="handleTabClick('dataService')"
       >
-        <Icon custom="iconfont icon-fuwukaifa" size="26"></Icon>
+        <SvgIcon class="nav-icon" icon-class="data-develop" />
       </div>
       <div
         class="ds-nav-menu-item"
         :class="{ active: currentTab.startsWith('/dataManagement') }"
         @click="handleTabClick('dataManagement')"
       >
-        <Icon custom="iconfont icon-project" size="26"></Icon>
+        <SvgIcon class="nav-icon" icon-class="project-workflow" />
       </div>
     </div>
     <div class="ds-nav-panel" v-if="currentTab == '/dataService'">
@@ -98,7 +98,7 @@ export default {
   top: 54px;
   bottom: 0;
   width: 304px;
-  background: #f8f9fc;
+  @include bg-color(#f8f9fc, $dark-base-color);
   transition: all 0.3s;
   &.ds-nav-menu-fold {
     width: 54px;
@@ -109,20 +109,24 @@ export default {
   .ds-nav-menu {
     z-index: 1;
     width: 54px;
-    background: #f8f9fc;
+    @include bg-color(#f8f9fc, $dark-base-color);
     border-right: 1px solid #dee4ec;
+    @include border-color(#dee4ec, $dark-menu-base-color);
     &-item {
       height: 44px;
       line-height: 44px;
       text-align: center;
       cursor: pointer;
+      font-size: 26px;
+      @include font-color(#333, $dark-text-color);
       &:hover {
-        background: #eceff4;
+        @include bg-color(#eceff4, $dark-menu-base-color);
       }
     }
     .active {
-      background: #eceff4;
+      @include bg-color(#eceff4, $dark-menu-base-color);
       border-left: 3px solid #2e92f7;
+      @include border-color(#2e92f7, #4B8FF3);
     }
   }
   .ds-nav-panel {
@@ -135,6 +139,8 @@ export default {
     padding: 10px;
     overflow-y: auto;
     border-right: 1px solid #dee4ec;
+    @include border-color(#dee4ec, $dark-menu-base-color);
+    @include bg-color(#f8f9fc, $dark-menu-base-color);
   }
 }
 .develop_nav {

diff --git a/web/src/apps/dataService/module/common/rangeGroup.vue b/web/src/apps/dataService/module/common/rangeGroup.vue
@@ -12,7 +12,7 @@
       >
         <div class="date-trigger" @click="handlePickerClick">
           <span v-if="datePickerRange.length" class="date-show">{{datePickerRange.join('   -   ')}}</span>
-          <Icon custom="iconfont icon-riqi" size="16"></Icon>
+          <SvgIcon icon-class="riqi" />
         </div>
       </Date-picker>
     </div>
@@ -94,6 +94,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+@import "@/common/style/variables.scss";
 .range-group {
   display: flex;
   align-items: center;
@@ -105,20 +106,22 @@ export default {
     transition: all .2s ease-in-out;
     cursor: pointer;
     border: 1px solid #D9D9D9;
+    @include border-color(#D9D9D9, $dark-border-color);
     border-left: 0;
-    background: #fff;
+    @include bg-color(#fff, $dark-base-color);
     text-align: center;
-    color: #666;
+    @include font-color(#666, $dark-text-color);
     &:first-child {
       border-radius: 4px 0 0 4px;
       border-left: 1px solid #D9D9D9;
+      @include border-color(#D9D9D9, $dark-border-color);
     }
     &:last-child {
       border-radius: 0 4px 4px 0;
     }
     &.group-item-checked {
-      background: #fff;
-      border-color: #1890FF;
+      @include bg-color(#fff, $dark-base-color);
+      @include border-color(#1890FF, #1890FF);
       color: #1890FF;
       box-shadow: -1px 0 0 0 #1890FF;
     }
@@ -128,6 +131,7 @@ export default {
     .date-trigger {
       padding: 0 15px;
       line-height: 32px;
+      font-size: 16px;
       .date-show {
         margin-right: 15px;
       }

diff --git a/web/src/apps/dataService/module/common/test.vue b/web/src/apps/dataService/module/common/test.vue
@@ -198,22 +198,24 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import "@/common/style/variables.scss";
 .apiTest-wrap {
   padding: 0 24px;
-  background: #fff;
+  @include bg-color(#fff, $dark-base-color);
   .apiTest-title {
     margin-bottom: 15px;
     padding-bottom: 10px;
     font-size: 16px;
-    color: #333;
+    @include font-color(#333, $dark-text-color);
     font-weight: bold;
     border-bottom: 1px solid #dee4ec;
+    @include border-color(#dee4ec, $dark-border-color);
   }
   .apiTest-head {
     .api-path {
       margin: 15px 0;
       font-size: 14px;
-      color: #333;
+      @include font-color(#333, $dark-text-color);
       line-height: 20px;
     }
   }
@@ -228,7 +230,7 @@ export default {
       .panel-title {
         margin-bottom: 20px;
         font-size: 14px;
-        color: #333;
+        @include font-color(#333, $dark-text-color);
         line-height: 20px;
       }
       .panel-btn {
@@ -241,6 +243,7 @@ export default {
         overflow: auto;
         border-radius: 4px;
         border: 1px solid #dee4ec;
+        @include border-color(#dee4ec, $dark-border-color);
         p {
           font-size: 14px;
           line-height: 24px;

diff --git a/web/src/apps/dataService/module/common/treeMenu.vue b/web/src/apps/dataService/module/common/treeMenu.vue
@@ -3,7 +3,7 @@
     <div class="panel-title-wrap">
       <p>服务开发</p>
       <div @click="addGroup()">
-        <Icon custom="iconfont icon-plus" size="20"></Icon>
+        <SvgIcon icon-class="plus" />
       </div>
     </div>
     <Input
@@ -189,17 +189,20 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import "@/common/style/variables.scss";
 .panel-title-wrap {
   display: flex;
   justify-content: space-between;
   align-items: center;
   & p {
     font-family: PingFangSC-Medium;
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.65);
+    @include font-color(rgba(0, 0, 0, 0.65), $dark-text-color);
   }
   & div {
     cursor: pointer;
+    font-size: 20px;
+    @include font-color(rgba(0, 0, 0, 0.65), $dark-text-color);
   }
 }
 .dataEmpty {
@@ -211,6 +214,6 @@ export default {
   align-items: center;
   font-family: PingFangSC-Medium;
   font-size: 16px;
-  color: rgba(0, 0, 0, 0.85);
+  @include font-color(rgba(0, 0, 0, 0.85), $dark-text-color);
 }
 </style>
diff --git a/web/src/apps/dataService/module/dataManagement/apiCall.vue b/web/src/apps/dataService/module/dataManagement/apiCall.vue
@@ -4,7 +4,7 @@
     <div class="filter-box">
       <div class="filter-area">
         <Button type="primary" size="large" @click="addAuthorize">
-          <Icon custom="iconfont icon-xinzeng1" size="12"></Icon>
+          <SvgIcon icon-class="xinzeng" />
           {{ $t("message.dataService.apiCall.addAuthorize") }}
         </Button>
       </div>
@@ -37,8 +37,8 @@
     <Modal v-model="modelConfirm" width="480" :closable="false">
       <div class="modal-confirm-body">
         <div class="confirm-title">
-          <Icon custom="iconfont icon-project" size="26"></Icon>
-          <span>{{ $t("message.dataService.apiCall.deleteApiCallTitle") }}</span>
+          <SvgIcon class="icon" icon-class="project-workflow" />
+          <span class="text">{{ $t("message.dataService.apiCall.deleteApiCallTitle") }}</span>
         </div>
         <div class="confirm-desc">{{ $t("message.dataService.apiCall.deleteApiCallDesc") }}</div>
       </div>
@@ -118,7 +118,8 @@ export default {
         },
         {
           title: 'Token',
-          key: 'token'
+          key: 'token',
+          width: '300'
         },
         {
           title: this.$t("message.dataService.apiCall.col_expire"),
@@ -309,17 +310,19 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+@import "@/common/style/variables.scss";
 .manage-wrap {
   position: relative;
   padding: 0 24px;
-  background: #fff;
+  @include bg-color(#fff, $dark-base-color);
   .manage-head {
     margin-bottom: 15px;
     padding-bottom: 10px;
     font-size: 16px;
-    color: #333;
+    @include font-color(#333, $dark-text-color);
     font-weight: bold;
-    border-bottom: 1px solid #DEE4EC;
+    border-bottom: 1px solid #dee4ec;
+    @include border-color(#dee4ec, $dark-border-color);
   }
   .filter-box {
     margin-bottom: 20px;
@@ -337,6 +340,7 @@ export default {
     color: #2E92F7;
     padding: 0 10px;
     border-right: 1px solid #D8D8D8;
+    @include border-color(#D8D8D8, $dark-border-color);
     &:last-child {
       border-right: 0;
     }
@@ -351,14 +355,15 @@ export default {
 .modal-confirm-body {
   .confirm-title {
     margin-top: 10px;
-    display: flex;
-    align-items: center;
     color: #FF9F3A;
-    span {
+    .text {
       margin-left: 15px;
       font-size: 16px;
       line-height: 24px;
-      color: #333;
+      @include font-color(#333, $dark-text-color);
+    }
+    .icon {
+      font-size: 26px;
     }
   }
   .confirm-desc {
@@ -367,7 +372,7 @@ export default {
     margin-left: 42px;
     font-size: 14px;
     line-height: 20px;
-    color: #666;
+    @include font-color(#666, $dark-text-color);
   }
 }
 </style>

diff --git a/web/src/apps/dataService/module/dataManagement/apiIndex.vue b/web/src/apps/dataService/module/dataManagement/apiIndex.vue
@@ -181,9 +181,10 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+@import "@/common/style/variables.scss";
 .tab-publish {
   padding: 0 24px;
-  background: #fff;
+  @include bg-color(#fff, $dark-base-color);
   .filter-box {
     margin-bottom: 20px;
     overflow: hidden;