up.

z_ele/src/api/system/config/model/index.ts

@@ -12,6 +12,7 @@ export interface Config {
   itemStyle?: string;
   itemBind?: string;
   itemClass?: string;
+  option?: string;
 }
 
 /**

z_ele/src/views/system/config-set/components/config-form-item.vue

@@ -3,6 +3,9 @@
     <template v-if="props.type === 'text'">
       <el-input v-model="dataValue" :placeholder="'请输入' + props.title" v-bind="itemBind"/>
     </template>
+    <template v-if="props.type === 'json'">
+      <el-input v-model="props.value" :placeholder="'请输入' + props.title" v-bind="itemBind"/>
+    </template>
     <template v-else-if="props.type === 'textarea'">
       <el-input type="textarea"
                 v-model="dataValue"
@@ -75,7 +78,7 @@
 
 <script setup lang="ts">
 import {ref, onMounted} from "vue";
-import {strToBind, strToOption, strToValue} from "@/utils/sys-config";
+import { strToValue} from "@/utils/sys-config";
 
 const props = defineProps<{
   name: string;

z_ele/src/views/system/config/components/config-edit.vue

@@ -3,7 +3,7 @@
   <ele-modal
     form
     destroy-on-close
-    :width="960"
+    :width="980"
     v-model="visible"
     :title="isUpdate ? '修改配置' : '添加配置'"
   >
@@ -78,17 +78,10 @@
                 placeholder="请输入配置项"
               />
             </el-form-item>
-            <el-form-item label="配置说明">
+
-              <el-input
-                :rows="4"
-                type="textarea"
-                v-model="form.tips"
-                placeholder="请输入配置说明"
-              />
-            </el-form-item>
           </template>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="11" :offset="1">
           <el-form-item label="BIND">
             <el-input
               :rows="4"
@@ -112,15 +105,38 @@
               placeholder="请输入渲染框Style样式"
             />
           </el-form-item>
+          <el-divider/>
+          <el-card header="样式预览:" style="margin-bottom: 30px;">
+            <config-form-item
+              :name="preview.name"
+              :title="preview.title"
+              :type="preview.type"
+              :value="preview.value"
+              :option="preview.option"
+              :item-bind="preview.bind"
+              :key="preview.id"
+            />
+            <el-form-item v-if="preview.tips">
+              <ele-text type="placeholder" style="line-height: 1.6">
+                {{ preview.tips }}
+              </ele-text>
+            </el-form-item>
+          </el-card>
         </el-col>
       </el-row>
-
+      <el-form-item label="配置说明">
-      <el-form-item label="备注" v-if="false">
+        <el-input
+          type="textarea"
+          v-model="form.tips"
+          placeholder="请输入配置说明(在配置页简短提示作用)"
+        />
+      </el-form-item>
+      <el-divider/>
+      <el-form-item label="备注">
         <el-input
-          :rows="4"
           type="textarea"
           v-model="form.comments"
-          placeholder="请输入备注"
+          placeholder="请输入备注(详细描述此配置的功能和作用) - 此备注仅开发人员可见"
         />
       </el-form-item>
     </el-form>
@@ -142,6 +158,9 @@
 import {addConfig, updateConfig} from '@/api/system/config';
 import ConfigSelect from './config-select.vue';
 import {ItemType, getItemLabel} from '@/enum/config-item-type.ts';
+import ConfigFormItem from "@/views/system/config-set/components/config-form-item.vue";
+import {strToBind, strToOption} from "@/utils/sys-config";
+
 const HIDE_FORM_ITEM_WHERE: any = {
   name: () => {
     return ['tabs', 'tabs_item', 'alert', 'card', 'separator'].indexOf(<string>form.type) == -1;
@@ -153,6 +172,13 @@
     return ['tabs', 'tabs_item'].indexOf(<string>form.type) == -1
   }
 };
+const preview = computed(() => {
+  return {
+    ...form,
+    bind: strToBind(<string>form.type, <string>form.itemBind),
+    option: strToOption(<string>form.type, <string>form.option)
+  }
+})
 const configItemType: any = computed(() => {
   let list = {};
   if (props.parent) {

z_ele/src/views/system/config/index.vue

@@ -55,6 +55,10 @@
               删除
             </el-link>
           </template>
+          <el-divider direction="vertical" />
+          <el-link type="primary" underline="never" @click="openLog(row)" title="查看配置变更日志记录">
+            日志
+          </el-link>
         </template>
         <template #status="{ row }">
           <el-switch
@@ -155,7 +159,7 @@
     {
       columnKey: 'action',
       label: '操作',
-      width: 200,
+      width: 280,
       align: 'right' /* ,
       fixed: 'right' */,
       slot: 'action',
@@ -203,7 +207,11 @@
     showEdit.value = true;
     parent.value = parentRow;
   };
-
+  const showLog = ref(false);
+  const openLog = (row?:Config)=>{
+    current.value = row ?? null;
+    showLog.value = true;
+  }
   /** 删除单个 */
   const remove = (row?: Config) => {
     const rows = row == null ? selections.value : [row];