配置样式调整

src/assets/styles/base.scss

@@ -386,6 +386,19 @@ body {
     background-color: transparent !important;
   }
 }
+.btn-success {
+  &.el-button--text:not(.is-disabled) {
+    color: $--color-success !important;
+
+    &:hover {
+      font-weight: 600;
+      color: mix(#000, $--color-success, 20%) !important;
+    }
+  }
+  &.is-disabled {
+    background-color: transparent !important;
+  }
+}
 
 .btn-white {
   background-color: #fff !important;

src/assets/styles/home.scss

@@ -299,25 +299,6 @@
   }
 }
 
-.table-part {
-  margin-bottom: 30px;
-
-  &-title {
-    margin-bottom: 10px;
-    font-size: 16px;
-
-    &::before {
-      content: "";
-      display: inline-block;
-      vertical-align: middle;
-      width: 0;
-      height: 0;
-      border: 5px solid $--color-primary;
-      margin-right: 10px;
-    }
-  }
-}
-
 // config-manage-dialog
 .config-manage-dialog {
   .el-dialog__body {
@@ -334,49 +315,92 @@
     flex-shrink: 0;
     flex-grow: 0;
   }
-  .config-table {
+  .config-body {
     flex-grow: 2;
-
     display: flex;
     justify-content: space-between;
     align-items: stretch;
+  }
+  .config-guide {
+    width: 300px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    margin-bottom: 0;
+    li {
+      padding: 10px 5px;
+      line-height: 20px;
+      border-bottom: 1px dashed $--color-text-gray-5;
+      cursor: pointer;
 
-    &-guide {
-      width: 300px;
-      flex-shrink: 0;
-      flex-grow: 0;
-      margin-bottom: 0;
-      li {
-        padding: 10px 5px;
-        line-height: 20px;
-        border-bottom: 1px dashed $--color-text-gray-5;
-        cursor: pointer;
-
-        &:first-child {
-          border-top: 1px dashed $--color-text-gray-5;
-        }
-
-        &:hover {
-          color: $--color-primary;
-        }
+      &:first-child {
+        border-top: 1px dashed $--color-text-gray-5;
       }
+
+      &:hover {
+        color: $--color-primary;
+      }
+    }
+  }
+
+  .config-content {
+    flex-grow: 2;
+    margin-bottom: 0;
+    margin-left: 20px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: relative;
+    &::after {
+      content: "";
+      display: block;
+      height: 50%;
+    }
+
+    .el-button {
+      font-size: 14px;
+      padding-top: 5px;
+      padding-bottom: 5px;
     }
 
-    &-body {
-      flex-grow: 2;
-      margin-bottom: 0;
-      margin-left: 20px;
-      overflow-x: hidden;
-      overflow-y: auto;
+    &-part {
       position: relative;
-      &::after {
-        content: "";
-        display: block;
-        height: 100%;
+      margin-bottom: 40px;
+    }
+    &-none {
+      margin: 0;
+    }
+    &-title {
+      color: $--color-text-gray-2;
+
+      > h3 {
+        display: inline-block;
+        margin-right: 10px;
+        line-height: 26px;
       }
     }
-    .table-part {
-      position: relative;
+
+    &-comment {
+      color: $--color-text-gray-2;
+      line-height: 20px;
+
+      &::before {
+        content: "#";
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 2px;
+      }
+    }
+    &-cont {
+      font-size: 16px;
+      > span {
+        margin: 0 2px;
+        font-weight: 600;
+        color: $--color-text-dark;
+      }
+      .cont-mode {
+        color: $--color-text-gray-2;
+        margin: 0 15px;
+        font-weight: 300;
+      }
     }
   }
 }

src/modules/admin/components/AppConfigManage.vue

@@ -61,8 +61,8 @@
         </el-button>
       </div>
 
-      <div class="config-table">
-        <div class="part-box part-box-pad config-table-guide">
+      <div class="config-body">
+        <div class="part-box part-box-pad config-guide">
           <ul>
             <li
               v-for="group in groupConfigList"
@@ -74,51 +74,52 @@
           </ul>
         </div>
 
-        <div
-          ref="ConfigTableBody"
-          class="part-box part-box-pad config-table-body"
-        >
+        <div ref="ConfigTableBody" class="part-box part-box-pad config-content">
           <div
             v-for="group in groupConfigList"
             :key="group.name"
-            class="table-part"
+            :class="[
+              'config-content-part',
+              { 'config-content-none': !group.children.length }
+            ]"
             :id="group.name"
           >
-            <div class="box-justify mb-2">
-              <h3 class="table-part-title">
+            <div class="config-content-title">
+              <h3>
                 {{ group.name | groupNameFilter }}
               </h3>
               <el-button
                 v-if="group.name !== 'custom' && !IS_BASELINE"
-                size="mini"
-                type="primary"
+                class="btn-success"
+                type="text"
                 @click="toAddGroupConfigItem(group)"
                 >新增</el-button
               >
             </div>
-            <el-table ref="TableList" :data="group.children" border>
-              <el-table-column prop="key" label="配置项"> </el-table-column>
-              <el-table-column prop="value" label="配置值"> </el-table-column>
-              <el-table-column prop="mode" label="模式" width="100">
-                <span slot-scope="scope">{{ modeMap[scope.row.mode] }}</span>
-              </el-table-column>
-              <el-table-column prop="comment" label="注释"> </el-table-column>
-              <el-table-column
-                label="操作"
-                width="80"
-                class-name="action-column"
+            <div class="config-content-list">
+              <div
+                v-for="item in group.children"
+                :key="item.key"
+                class="config-content-item"
               >
-                <template slot-scope="scope">
+                <div v-if="item.comment" class="config-content-comment">
+                  {{ item.comment }}
+                </div>
+                <div class="config-content-cont">
+                  <span>{{ item.key }}</span>
+                  <span>=</span>
+                  <span>{{ item.value }}</span>
+                  <span class="cont-mode">[{{ modeMap[item.mode] }}]</span>
                   <el-button
-                    v-if="scope.row.mode !== 'READONLY'"
+                    v-if="item.mode !== 'READONLY'"
                     class="btn-primary"
                     type="text"
-                    @click="toEdit(scope.row)"
+                    @click="toEdit(item)"
                     >编辑</el-button
                   >
-                </template>
-              </el-table-column>
-            </el-table>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -157,6 +158,7 @@ import {
 import UpdateAppBaseline from "../components/UpdateAppBaseline.vue";
 import ModifyAppBaselineItem from "../components/ModifyAppBaselineItem.vue";
 import ModifyAppConfigItem from "../components/ModifyAppConfigItem.vue";
+import { deepCopy } from "@/plugins/utils";
 
 export default {
   name: "app-config-manage",
@@ -339,23 +341,23 @@ export default {
       this.configList = configList;
     },
     buildGroupConfigList(dataList) {
-      let groupConfigList = [];
+      let groupConfigList = deepCopy(this.configGroups);
+      groupConfigList.forEach(item => {
+        item.children = [];
+      });
+      const defaultAvailable = {
+        type: "string"
+      };
+
       dataList.forEach(configItem => {
         const info = this.getConfigItemGroupPosInfo(configItem.key);
         if (info) {
           let group = groupConfigList.find(
             gitem => gitem.name === info.group.name
           );
-          if (!group) {
-            group = {
-              ...info.group,
-              children: []
-            };
-            groupConfigList.push(group);
-          }
           group.children.push({
             ...configItem,
-            available: info.available
+            available: info.available || { ...defaultAvailable }
           });
           return;
         }
@@ -371,15 +373,16 @@ export default {
         }
         group.children.push({
           ...configItem,
-          available: null
+          available: { ...defaultAvailable }
         });
       });
+      groupConfigList.sort((a, b) => b.children.length - a.children.length);
 
       this.groupConfigList = groupConfigList;
     },
     getConfigItemGroupPosInfo(configItemKey) {
       const curGroup = this.configGroups.find(group =>
-        configItemKey.includes(group.prefix)
+        configItemKey.startsWith(group.prefix)
       );
       if (!curGroup) return;
       let groupData = {
@@ -428,10 +431,11 @@ export default {
         return;
       }
 
-      const unvalidKeys = group.children.map(item => item.key);
+      const unvalidKeys = this.configList.map(item => item.key);
       this.curGroupForAdd = { ...ginfo, unvalidKeys };
+      const groupUnvalidKeys = group.children.map(item => item.key);
       this.curGroupForAdd.available = this.curGroupForAdd.available.filter(
-        item => !unvalidKeys.includes(item.key)
+        item => !groupUnvalidKeys.includes(item.key)
       );
       if (!this.curGroupForAdd.available.length && ginfo.available.length) {
         this.$message.error("当前分组不可添加配置项！");

src/modules/admin/components/ModifyAppConfigItem.vue

@@ -17,7 +17,7 @@
       label-width="100px"
     >
       <el-form-item
-        v-if="!isEdit"
+        v-if="!isEdit && group && group.available && group.available.length"
         prop="selectAvailableKey"
         label="可选配置项："
       >
@@ -89,6 +89,7 @@ export default {
         return {};
       }
     },
+    //  name,prefix,available,unvalidKeys
     group: {
       type: Object,
       default: null
@@ -98,13 +99,24 @@ export default {
     const keyValidator = (rule, value, callback) => {
       if (this.isEdit) return callback();
 
+      if (
+        this.group &&
+        this.group.available &&
+        !this.group.available.length &&
+        !value.startsWith(this.group.prefix)
+      ) {
+        return callback(
+          new Error(`配置项需要带有${this.group.prefix}的前缀。`)
+        );
+      }
+
       if (this.selectAvailableKey.includes(".*.")) {
         const regCont = this.selectAvailableKey
           .split(".")
           .join("\\.")
           .replace("*", ".*");
         const reg = new RegExp(`^${regCont}$`);
-        if (!reg.test(value)) {
+        if (!reg.test(value) || value === this.selectAvailableKey) {
           return callback(
             new Error(`配置项需要满足${this.selectAvailableKey}的格式。`)
           );
@@ -184,6 +196,9 @@ export default {
       this.$refs.modalFormComp.clearValidate();
     },
     visibleChange() {
+      this.selectAvailableKey = "";
+      this.selectAvailable = {};
+      this.isStrictKey = true;
       this.initData(this.instance);
     },
     cancel() {
@@ -198,6 +213,8 @@ export default {
       );
       this.isStrictKey = !this.selectAvailableKey.includes(".*.");
       this.modalForm.key = this.selectAvailableKey;
+      if (this.selectAvailable.defaultValue)
+        this.modalForm.value = this.selectAvailable.defaultValue;
     },
     async submit() {
       const valid = await this.$refs.modalFormComp.validate().catch(() => {});