md

package.json

@@ -16,7 +16,6 @@
     "js-md5": "^0.7.3",
     "qs": "^6.11.0",
     "vue": "^2.6.11",
-    "vue-json-viewer": "^2.2.19",
     "vue-ls": "^3.2.1",
     "vue-router": "^3.1.6",
     "vuex": "^3.1.3"

pnpm-lock.yaml

@@ -25,7 +25,6 @@ specifiers:
   sass-loader: ^8.0.2
   terser-webpack-plugin: ^1.2.3
   vue: ^2.6.11
-  vue-json-viewer: ^2.2.19
   vue-ls: ^3.2.1
   vue-router: ^3.1.6
   vue-template-compiler: ^2.6.10
@@ -41,7 +40,6 @@ dependencies:
   js-md5: registry.npmmirror.com/js-md5/0.7.3
   qs: registry.npmmirror.com/qs/6.11.0
   vue: registry.npmmirror.com/vue/2.7.10
-  vue-json-viewer: registry.npmmirror.com/vue-json-viewer/2.2.22_vue@2.7.10
   vue-ls: registry.npmmirror.com/vue-ls/3.2.2
   vue-router: registry.npmmirror.com/vue-router/3.6.5_vue@2.7.10
   vuex: registry.npmmirror.com/vuex/3.6.2_vue@2.7.10
@@ -3903,16 +3901,6 @@ packages:
     engines: {node: '>= 10'}
     dev: true
 
-  registry.npmmirror.com/clipboard/2.0.11:
-    resolution: {integrity: sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz}
-    name: clipboard
-    version: 2.0.11
-    dependencies:
-      good-listener: registry.npmmirror.com/good-listener/1.2.2
-      select: registry.npmmirror.com/select/1.1.2
-      tiny-emitter: registry.npmmirror.com/tiny-emitter/2.1.0
-    dev: false
-
   registry.npmmirror.com/clipboardy/2.3.0:
     resolution: {integrity: sha512-mKhiIL2DrQIsuXMgBgnfEHOZOryC7kY7YO//TN6c63wlEm3NG5tz+YgY5rVi29KCmq/QQjKYvM7a19+MDOTHOQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/clipboardy/-/clipboardy-2.3.0.tgz}
     name: clipboardy
@@ -5026,12 +5014,6 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: true
 
-  registry.npmmirror.com/delegate/3.2.0:
-    resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz}
-    name: delegate
-    version: 3.2.0
-    dev: false
-
   registry.npmmirror.com/depd/1.1.2:
     resolution: {integrity: sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/depd/-/depd-1.1.2.tgz}
     name: depd
@@ -6640,14 +6622,6 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmmirror.com/good-listener/1.2.2:
-    resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz}
-    name: good-listener
-    version: 1.2.2
-    dependencies:
-      delegate: registry.npmmirror.com/delegate/3.2.0
-    dev: false
-
   registry.npmmirror.com/graceful-fs/4.2.10:
     resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.10.tgz}
     name: graceful-fs
@@ -10777,12 +10751,6 @@ packages:
     version: 2.0.0
     dev: true
 
-  registry.npmmirror.com/select/1.1.2:
-    resolution: {integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/select/-/select-1.1.2.tgz}
-    name: select
-    version: 1.1.2
-    dev: false
-
   registry.npmmirror.com/selfsigned/1.10.14:
     resolution: {integrity: sha512-lkjaiAye+wBZDCBsu5BGi0XiLRxeUlsGod5ZP924CRSEoGuZAw/f7y9RKu28rwTfiHVhdavhB0qH0INV6P1lEA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/selfsigned/-/selfsigned-1.10.14.tgz}
     name: selfsigned
@@ -11832,12 +11800,6 @@ packages:
     version: 0.3.0
     dev: true
 
-  registry.npmmirror.com/tiny-emitter/2.1.0:
-    resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz}
-    name: tiny-emitter
-    version: 2.1.0
-    dev: false
-
   registry.npmmirror.com/tmp/0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tmp/-/tmp-0.0.33.tgz}
     name: tmp
@@ -12364,18 +12326,6 @@ packages:
     version: 2.3.4
     dev: true
 
-  registry.npmmirror.com/vue-json-viewer/2.2.22_vue@2.7.10:
-    resolution: {integrity: sha512-3oPH5BxoUWva/qp7wNJj+15FBXyi9Yu5VDW4mCWivjHR1pUpMv34fjqqxML7jh2uOqm1S/3Xks5nQ5JjC5+OWw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vue-json-viewer/-/vue-json-viewer-2.2.22.tgz}
-    id: registry.npmmirror.com/vue-json-viewer/2.2.22
-    name: vue-json-viewer
-    version: 2.2.22
-    peerDependencies:
-      vue: ^2.6.9
-    dependencies:
-      clipboard: registry.npmmirror.com/clipboard/2.0.11
-      vue: registry.npmmirror.com/vue/2.7.10
-    dev: false
-
   registry.npmmirror.com/vue-loader/15.10.0_geeguvfn2njjaew5w23blzhalq:
     resolution: {integrity: sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.0.tgz}
     id: registry.npmmirror.com/vue-loader/15.10.0

src/assets/styles/home.scss

@@ -302,6 +302,7 @@
 // config-manage-dialog
 .config-manage-dialog {
   .el-dialog__body {
+    padding-top: 90px !important;
     height: 100%;
     overflow: hidden;
     display: flex;
@@ -309,8 +310,23 @@
     align-items: stretch;
     flex-direction: column;
   }
+  .el-dialog__header {
+    padding-top: 20px;
+    padding-bottom: 5px;
+    .el-dialog__headerbtn {
+      top: 27px;
+      width: 20px;
+      height: 20px;
+    }
+  }
+  .dialog-title {
+    font-size: 16px;
+  }
+  .part-box-filter {
+    padding: 0;
+    margin-bottom: 0;
+  }
 
-  .part-box-filter,
   .tab-btns {
     flex-shrink: 0;
     flex-grow: 0;
@@ -320,6 +336,7 @@
     display: flex;
     justify-content: space-between;
     align-items: stretch;
+    overflow: hidden;
   }
   .config-guide {
     width: 300px;
@@ -342,6 +359,19 @@
         color: $--color-primary;
       }
     }
+
+    .group-count {
+      padding: 3px 5px;
+      font-size: 12px;
+      line-height: 1;
+      border-radius: 3px;
+      background-color: mix(#fff, $--color-primary, 88%);
+      margin-left: 5px;
+      color: $--color-primary;
+
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
   }
 
   .config-content {
@@ -359,16 +389,20 @@
 
     .el-button {
       font-size: 14px;
-      padding-top: 5px;
-      padding-bottom: 5px;
+      padding-top: 0;
+      padding-bottom: 0;
     }
 
     &-part {
       position: relative;
-      margin-bottom: 40px;
+      margin-bottom: 30px;
+
+      &:not(:first-child) {
+        margin-top: 30px;
+      }
     }
     &-none {
-      margin: 0;
+      margin: 0 !important;
     }
     &-title {
       color: $--color-text-gray-2;
@@ -380,6 +414,28 @@
       }
     }
 
+    &-item {
+      padding: 4px 0;
+      &:hover {
+        background-color: mix(#fff, $--color-primary, 90%);
+
+        .cont-edit {
+          visibility: visible;
+        }
+      }
+
+      &.is-danger {
+        .cont-mode {
+          color: mix(#fff, $--color-danger, 20%);
+        }
+        .config-content-cont {
+          color: $--color-danger;
+        }
+
+        background-color: mix(#fff, $--color-danger, 90%) !important;
+      }
+    }
+
     &-comment {
       color: $--color-text-gray-2;
       line-height: 20px;
@@ -389,21 +445,40 @@
         display: inline-block;
         vertical-align: middle;
         margin-right: 2px;
+        margin-top: -2px;
+        line-height: 1;
       }
     }
     &-cont {
-      font-size: 16px;
-      > span {
+      font-size: 15px;
+      line-height: 20px;
+      color: $--color-text-dark;
+
+      span {
         margin: 0 2px;
         font-weight: 600;
-        color: $--color-text-dark;
       }
       .cont-mode {
         color: $--color-text-gray-2;
-        margin: 0 15px;
-        font-weight: 300;
+        margin-right: 5px;
+        font-weight: 600;
         font-size: 14px;
       }
+      .cont-edit {
+        visibility: hidden;
+        margin-left: 15px;
+      }
+
+      &-mutable {
+        .cont-mode {
+          color: mix(#fff, $--color-primary, 20%);
+        }
+      }
+      &-override {
+        .cont-mode {
+          color: mix(#fff, $--color-warning, 20%);
+        }
+      }
     }
   }
 }

src/components/VersionSelect.vue

@@ -13,6 +13,7 @@
       :key="item.id"
       :value="item.id"
       :label="item.name"
+      :disabled="disabledOptions.includes(item.id)"
     >
     </el-option>
   </el-select>
@@ -28,7 +29,13 @@ export default {
     placeholder: { type: String, default: "请选择版本" },
     value: { type: [Number, String], default: "" },
     clearable: { type: Boolean, default: true },
-    appId: { type: [String, Number], default: "" }
+    appId: { type: [String, Number], default: "" },
+    disabledOptions: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
   },
   data() {
     return {

src/constants/app.js

@@ -8,7 +8,7 @@ if (process.env.VUE_APP_SELF_DEFINE_DOMAIN === "true") {
 if (!domain) domain = window.location.hostname.split(".")[0];
 export const ORG_CODE = domain;
 
-export const APP_TITLE = "应用配置管理";
+export const APP_TITLE = "运维管理平台";
 
 const ADMIN_CODE = "admin";
 

src/main.js

@@ -13,12 +13,10 @@ import VueLocalStorage from "vue-ls";
 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
 import "./assets/styles/index.scss";
-import JsonViewr from "vue-json-viewer";
 
 Vue.use(ElementUI, { size: "small" });
 Vue.use(VueLocalStorage, { namespace: "vs_", storage: "session" });
 Vue.use(globalVuePlugins);
-Vue.use(JsonViewr);
 
 Vue.prototype.GLOBAL = GLOBAL;
 Vue.config.productionTip = false;

src/modules/admin/components/AppConfigManage.vue

@@ -10,7 +10,7 @@
       fullscreen
       @opened="visibleChange"
     >
-      <div class="part-box part-box-filter part-box-flex">
+      <div class="part-box part-box-filter" slot="title">
         <el-form
           ref="FilterForm"
           label-position="left"
@@ -19,6 +19,9 @@
           :rules="rules"
           inline
         >
+          <el-form-item>
+            <h2 class="dialog-title">应用配置管理-{{ app.name }}</h2>
+          </el-form-item>
           <el-form-item prop="versionId" label="版本">
             <version-select
               v-model="filter.versionId"
@@ -75,11 +78,15 @@
         <div class="part-box part-box-pad config-guide">
           <ul>
             <li
+              class="box-justify"
               v-for="group in groupConfigList"
               :key="group.name"
               @click="scrollTo(group)"
             >
-              {{ group.name }}
+              <p>{{ group.name | groupNameFilter }}</p>
+              <span v-if="group.children.length" class="group-count">{{
+                group.children.length
+              }}</span>
             </li>
           </ul>
         </div>
@@ -110,19 +117,32 @@
               <div
                 v-for="item in group.children"
                 :key="item.key"
-                class="config-content-item"
+                :class="[
+                  'config-content-item',
+                  {
+                    'is-danger':
+                      item.mode === 'OVERRIDE' &&
+                      isEmpty(item.value) &&
+                      !IS_BASELINE
+                  }
+                ]"
               >
                 <div v-if="item.comment" class="config-content-comment">
                   {{ item.comment }}
                 </div>
-                <div class="config-content-cont">
+                <div
+                  :class="[
+                    'config-content-cont',
+                    `config-content-cont-${item.mode.toLowerCase()}`
+                  ]"
+                >
+                  <span class="cont-mode">[{{ modeMap[item.mode] }}]</span>
                   <span>{{ item.key }}</span>
                   <span>=</span>
                   <span>{{ item.value }}</span>
-                  <span class="cont-mode">[{{ modeMap[item.mode] }}]</span>
                   <el-button
                     v-if="checkEditPrivilege(item)"
-                    class="btn-primary"
+                    class="btn-primary cont-edit"
                     type="text"
                     @click="toEdit(item)"
                     >编辑</el-button
@@ -236,6 +256,9 @@ export default {
     }
   },
   methods: {
+    isEmpty(val) {
+      return val === null || val === "" || val === undefined;
+    },
     async visibleChange() {
       await this.getConfigModes();
       await this.appConfigGroups();
@@ -243,7 +266,6 @@ export default {
       this.filter.appId = this.app.id;
 
       await this.getEnvList();
-      // TODO:选择环境
       this.selectEnv({ id: null });
     },
     resetData() {
@@ -275,10 +297,13 @@ export default {
         (this.checkPrivilege("app_config_test_item_edit") &&
           this.curEnv.type === "TEST") ||
         (this.checkPrivilege("app_config_prod_item_edit") &&
-          this.curEnv.type === "PROD") ||
+          this.curEnv.type === "PROD");
+
+      return (
+        (item.mode !== "READONLY" && privilege) ||
         (this.checkPrivilege("app_config_baseline_item_edit") &&
-          this.IS_BASELINE);
-      return item.mode !== "READONLY" && privilege;
+          this.IS_BASELINE)
+      );
     },
     cancel() {
       this.modalIsShow = false;
@@ -402,14 +427,14 @@ export default {
             prefix: "",
             children: []
           };
-          groupConfigList.push(group);
+          groupConfigList.unshift(group);
         }
         group.children.push({
           ...configItem,
           available: { ...defaultAvailable }
         });
       });
-      groupConfigList.sort((a, b) => b.children.length - a.children.length);
+      // groupConfigList.sort((a, b) => b.children.length - a.children.length);
 
       this.groupConfigList = groupConfigList;
     },

src/modules/admin/components/UpdateAppBaseline.vue

@@ -33,6 +33,7 @@
         <version-select
           v-model="modalForm.inheritVersionId"
           :app-id="data.appId"
+          :disabled-options="[data.versionId]"
         ></version-select>
       </el-form-item>
     </el-form>

vue.config.js

@@ -16,7 +16,7 @@ var config = {
   chainWebpack: config => {
     // webpack-chain配置手册：github.com/neutrinojs/webpack-chain#getting-started
     config.plugin("html").tap(args => {
-      args[0].title = "应用配置管理";
+      args[0].title = "运维管理平台";
       return args;
     });
   }