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 ? '修改配置' : '添加配置'"
   >
@@ -17,7 +17,7 @@
       <el-row>
         <el-col :span="12">
           <el-form-item label="上级" prop="pid">
-            <config-select :model-value="form.pid" :group="form.group" disabled />
+            <config-select :model-value="form.pid" :group="form.group" disabled/>
           </el-form-item>
           <el-form-item label="类型" prop="type">
             <el-select
@@ -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="备注" v-if="false">
+      <el-form-item label="配置说明">
+        <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>
@@ -134,26 +150,36 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, watch, computed } from 'vue';
-  import type { FormInstance, FormRules } from 'element-plus';
-  import { EleMessage } from 'ele-admin-plus';
-  import { useFormData } from '@/utils/use-form-data';
-  import type { Config } from '@/api/system/config/model';
-  import { addConfig, updateConfig } from '@/api/system/config';
-  import ConfigSelect from './config-select.vue';
-  import { ItemType, getItemLabel } from '@/enum/config-item-type.ts';
-  const HIDE_FORM_ITEM_WHERE: any = {
+import {ref, reactive, watch, computed} from 'vue';
+import type {FormInstance, FormRules} from 'element-plus';
+import {EleMessage} from 'ele-admin-plus';
+import {useFormData} from '@/utils/use-form-data';
+import type {Config} from '@/api/system/config/model';
+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;
+    return ['tabs', 'tabs_item', 'alert', 'card', 'separator'].indexOf(<string>form.type) == -1;
   },
-    value: ()=>{
+  value: () => {
     return ['tabs', 'tabs_item'].indexOf(<string>form.type) == -1
   },
-    option: ()=>{
+  option: () => {
     return ['tabs', 'tabs_item'].indexOf(<string>form.type) == -1
   }
-  };
-  const configItemType: any = computed(() => {
+};
+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) {
     if (props.parent.type == 'tabs') {
@@ -173,38 +199,38 @@
   } else {
     return list;
   }
-  });
-  const props = defineProps<{
+});
+const props = defineProps<{
   /** 修改回显的数据 */
   data?: Config | null;
   /** 父级元素 */
   parent?: Config | null;
   /** 配置所属组 */
   group?: string | null;
-  }>();
+}>();
 
-  const emit = defineEmits<{
+const emit = defineEmits<{
   (e: 'done'): void;
-  }>();
+}>();
 
-  /** 弹窗是否打开 */
-  const visible = defineModel({ type: Boolean });
+/** 弹窗是否打开 */
+const visible = defineModel({type: Boolean});
 
-  /** 是否是修改 */
-  const isUpdate = ref(false);
+/** 是否是修改 */
+const isUpdate = ref(false);
 
-  /** 提交状态 */
-  const loading = ref(false);
+/** 提交状态 */
+const loading = ref(false);
 
-  /** 表单实例 */
-  const formRef = ref<FormInstance | null>(null);
+/** 表单实例 */
+const formRef = ref<FormInstance | null>(null);
 
-  interface ConfigEdit extends Config {
+interface ConfigEdit extends Config {
   _type_readonly: boolean;
-  }
+}
 
-  /** 表单数据 */
-  const [form, resetFields, assignFields] = useFormData<ConfigEdit>({
+/** 表单数据 */
+const [form, resetFields, assignFields] = useFormData<ConfigEdit>({
   id: void 0,
   pid: 0,
   _type_readonly: false,
@@ -219,10 +245,10 @@
   itemBind: '',
   itemStyle: '',
   itemClass: ''
-  });
+});
 
-  /** 表单验证规则 */
-  const rules = reactive<FormRules>({
+/** 表单验证规则 */
+const rules = reactive<FormRules>({
   name: [
     {
       required: true,
@@ -239,15 +265,15 @@
       trigger: 'blur'
     }
   ]
-  });
+});
 
-  /** 关闭弹窗 */
-  const handleCancel = () => {
+/** 关闭弹窗 */
+const handleCancel = () => {
   visible.value = false;
-  };
+};
 
-  /** 保存编辑 */
-  const save = () => {
+/** 保存编辑 */
+const save = () => {
   formRef.value?.validate?.((valid) => {
     if (!valid) {
       return;
@@ -257,19 +283,19 @@
     saveOrUpdate(form)
       .then((msg) => {
         loading.value = false;
-          EleMessage.success({ message: msg, plain: true });
+        EleMessage.success({message: msg, plain: true});
         handleCancel();
         emit('done');
       })
       .catch((e) => {
         loading.value = false;
-          EleMessage.error({ message: e.message, plain: true });
+        EleMessage.error({message: e.message, plain: true});
       });
   });
-  };
+};
 
-  /** 监听弹窗打开 */
-  watch(visible, () => {
+/** 监听弹窗打开 */
+watch(visible, () => {
   if (visible.value) {
     if (props.data) {
       assignFields(props.data);
@@ -278,7 +304,7 @@
       resetFields();
       isUpdate.value = false;
       if (props.parent) {
-          let data: any = { pid: props.parent.id };
+        let data: any = {pid: props.parent.id};
         if (props.parent.type == 'tabs') {
           data.type = 'tabs_item';
           data._type_readonly = true;
@@ -291,5 +317,5 @@
     }
     form.group = props.group;
   }
-  });
+});
 </script>

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];