隐藏只读功能

src/assets/styles/base.scss

@@ -362,6 +362,7 @@ body {
 // other
 .btn-danger {
   &.el-button--text {
+    border-radius: 0;
     color: $--color-danger !important;
 
     &:hover {
@@ -374,25 +375,36 @@ body {
   }
 }
 .btn-primary {
-  &.el-button--text:not(.is-disabled) {
-    color: $--color-primary !important;
+  &.el-button--text {
+    border-radius: 0;
 
-    &:hover {
-      font-weight: 600;
-      color: mix(#000, $--color-primary, 20%) !important;
+    &:not(.is-disabled) {
+      color: $--color-primary !important;
+
+      &:hover {
+        font-weight: 600;
+        color: mix(#000, $--color-primary, 20%) !important;
+      }
     }
   }
+
   &.is-disabled {
     background-color: transparent !important;
   }
 }
 .btn-success {
-  &.el-button--text:not(.is-disabled) {
-    color: $--color-success !important;
+  border-radius: 0;
 
-    &:hover {
-      font-weight: 600;
-      color: mix(#000, $--color-success, 20%) !important;
+  &.el-button--text {
+    border-radius: 0;
+
+    &:not(.is-disabled) {
+      color: $--color-success !important;
+
+      &:hover {
+        font-weight: 600;
+        color: mix(#000, $--color-success, 20%) !important;
+      }
     }
   }
   &.is-disabled {

src/assets/styles/home.scss

@@ -302,7 +302,7 @@
 // config-manage-dialog
 .config-manage-dialog {
   .el-dialog__body {
-    padding-top: 90px !important;
+    padding-top: 85px !important;
     height: 100%;
     overflow: hidden;
     display: flex;
@@ -327,9 +327,14 @@
     margin-bottom: 0;
   }
 
-  .tab-btns {
+  .config-menu {
     flex-shrink: 0;
     flex-grow: 0;
+
+    .menu-set {
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
   }
   .config-body {
     flex-grow: 2;
@@ -424,6 +429,17 @@
         }
       }
 
+      &.is-mutable {
+        .cont-mode {
+          color: mix(#fff, $--color-primary, 20%);
+        }
+      }
+      &.is-override {
+        .cont-mode {
+          color: mix(#fff, $--color-warning, 20%);
+        }
+      }
+
       &.is-danger {
         .cont-mode {
           color: mix(#fff, $--color-danger, 20%);
@@ -468,16 +484,11 @@
         visibility: hidden;
         margin-left: 15px;
       }
+    }
 
-      &-mutable {
-        .cont-mode {
-          color: mix(#fff, $--color-primary, 20%);
-        }
-      }
-      &-override {
-        .cont-mode {
-          color: mix(#fff, $--color-warning, 20%);
-        }
+    &-hideread {
+      .config-content-item.is-readonly {
+        display: none;
       }
     }
   }

src/modules/admin/components/AppConfigManage.vue

@@ -51,27 +51,32 @@
         </el-form>
       </div>
 
-      <div class="mb-4 tab-btns tab-nowrap">
-        <el-button
-          v-if="checkPrivilege('app_config_baseline')"
-          size="medium"
-          :type="filter.envId == null ? 'primary' : 'default'"
-          @click="selectEnv({ id: null })"
-          >基线
-        </el-button>
-        <template v-for="env in envList">
+      <div class="config-menu box-justify mb-2">
+        <div class="tab-btns tab-nowrap">
           <el-button
-            v-if="
-              (checkPrivilege('app_config_test') && env.type === 'TEST') ||
-                (checkPrivilege('app_config_prod') && env.type === 'PROD')
-            "
-            :key="env.id"
+            v-if="checkPrivilege('app_config_baseline')"
             size="medium"
-            :type="filter.envId == env.id ? 'primary' : 'default'"
-            @click="selectEnv(env)"
-            >{{ env.name }}
+            :type="filter.envId == null ? 'primary' : 'default'"
+            @click="selectEnv({ id: null })"
+            >基线
           </el-button>
-        </template>
+          <template v-for="env in envList">
+            <el-button
+              v-if="
+                (checkPrivilege('app_config_test') && env.type === 'TEST') ||
+                  (checkPrivilege('app_config_prod') && env.type === 'PROD')
+              "
+              :key="env.id"
+              size="medium"
+              :type="filter.envId == env.id ? 'primary' : 'default'"
+              @click="selectEnv(env)"
+              >{{ env.name }}
+            </el-button>
+          </template>
+        </div>
+        <div class="menu-set" v-if="!IS_BASELINE">
+          <el-checkbox v-model="hideReadonly">隐藏只读配置</el-checkbox>
+        </div>
       </div>
 
       <div class="config-body">
@@ -97,7 +102,10 @@
             :key="group.name"
             :class="[
               'config-content-part',
-              { 'config-content-none': !group.children.length }
+              {
+                'config-content-none': !group.children.length,
+                'config-content-hideread': hideReadonly && !IS_BASELINE
+              }
             ]"
             :id="group.name"
           >
@@ -119,6 +127,7 @@
                 :key="item.key"
                 :class="[
                   'config-content-item',
+                  `is-${item.mode.toLowerCase()}`,
                   {
                     'is-danger':
                       item.mode === 'OVERRIDE' &&
@@ -130,12 +139,7 @@
                 <div v-if="item.comment" class="config-content-comment">
                   {{ item.comment }}
                 </div>
-                <div
-                  :class="[
-                    'config-content-cont',
-                    `config-content-cont-${item.mode.toLowerCase()}`
-                  ]"
-                >
+                <div class="config-content-cont">
                   <span class="cont-mode">[{{ modeMap[item.mode] }}]</span>
                   <span>{{ item.key }}</span>
                   <span>=</span>
@@ -247,7 +251,8 @@ export default {
       curEnv: {},
       configGroups: [],
       curGroupForAdd: null,
-      groupConfigList: []
+      groupConfigList: [],
+      hideReadonly: true
     };
   },
   computed: {