feat: 使用prettierrc对代码进行格式化

2026-09-30 07:46:10 +00:00 · 2024-11-09 10:32:26 +08:00
parent 87a4ce17e1
commit 7d9af64f6d
139 changed files with 12677 additions and 12656 deletions
@@ -1,6 +1,8 @@
 <template>
  <div>
-    <warning-bar title="id , created_at , updated_at , deleted_at 会自动生成请勿重复创建。搜索时如果条件为LIKE只支持字符串" />
+    <warning-bar
+      title="id , created_at , updated_at , deleted_at 会自动生成请勿重复创建。搜索时如果条件为LIKE只支持字符串"
+    />
    <el-form
      ref="fieldDialogForm"
      :model="middleDate"
@@ -9,65 +11,32 @@
      :rules="rules"
      class="grid grid-cols-2"
    >
-      <el-form-item
-        label="字段名称"
-        prop="fieldName"
-      >
+      <el-form-item label="字段名称" prop="fieldName">
        <el-input
          v-model="middleDate.fieldName"
          autocomplete="off"
-          style="width:80%"
+          style="width: 80%"
        />
-        <el-button
-          style="width:18%;margin-left:2%"
-          @click="autoFill"
-        >
+        <el-button style="width: 18%; margin-left: 2%" @click="autoFill">
          <span style="font-size: 12px">自动填充</span>
        </el-button>
      </el-form-item>
-      <el-form-item
-        label="字段中文名"
-        prop="fieldDesc"
-      >
-        <el-input
-          v-model="middleDate.fieldDesc"
-          autocomplete="off"
-        />
+      <el-form-item label="字段中文名" prop="fieldDesc">
+        <el-input v-model="middleDate.fieldDesc" autocomplete="off" />
      </el-form-item>
-      <el-form-item
-        label="字段JSON"
-        prop="fieldJson"
-      >
-        <el-input
-          v-model="middleDate.fieldJson"
-          autocomplete="off"
-        />
+      <el-form-item label="字段JSON" prop="fieldJson">
+        <el-input v-model="middleDate.fieldJson" autocomplete="off" />
      </el-form-item>
-      <el-form-item
-        label="数据库字段名"
-        prop="columnName"
-      >
-        <el-input
-          v-model="middleDate.columnName"
-          autocomplete="off"
-        />
+      <el-form-item label="数据库字段名" prop="columnName">
+        <el-input v-model="middleDate.columnName" autocomplete="off" />
      </el-form-item>
-      <el-form-item
-        label="数据库字段描述"
-        prop="comment"
-      >
-        <el-input
-          v-model="middleDate.comment"
-          autocomplete="off"
-        />
+      <el-form-item label="数据库字段描述" prop="comment">
+        <el-input v-model="middleDate.comment" autocomplete="off" />
      </el-form-item>
-      <el-form-item
-        label="字段类型"
-        prop="fieldType"
-      >
+      <el-form-item label="字段类型" prop="fieldType">
        <el-select
          v-model="middleDate.fieldType"
-          style="width:100%"
+          style="width: 100%"
          placeholder="请选择字段类型"
          clearable
          @change="clearOther"
@@ -87,17 +56,18 @@
      >
        <el-input
          v-model="middleDate.dataTypeLong"
-          :placeholder="middleDate.fieldType === 'enum'?`例:'北京','天津'`:'数据库类型长度'"
+          :placeholder="
+            middleDate.fieldType === 'enum'
+              ? `例:'北京','天津'`
+              : '数据库类型长度'
+          "
        />
      </el-form-item>
-      <el-form-item
-        label="字段查询条件"
-        prop="fieldSearchType"
-      >
+      <el-form-item label="字段查询条件" prop="fieldSearchType">
        <el-select
          v-model="middleDate.fieldSearchType"
          :disabled="middleDate.fieldType === 'json'"
-          style="width:100%"
+          style="width: 100%"
          placeholder="请选择字段查询条件"
          clearable
        >
@@ -110,14 +80,11 @@
          />
        </el-select>
      </el-form-item>
-      <el-form-item
-        label="关联字典"
-        prop="dictType"
-      >
+      <el-form-item label="关联字典" prop="dictType">
        <el-select
          v-model="middleDate.dictType"
-          style="width:100%"
-          :disabled="middleDate.fieldType!=='string'"
+          style="width: 100%"
+          :disabled="middleDate.fieldType !== 'string'"
          placeholder="请选择字典"
          clearable
        >
@@ -138,14 +105,11 @@
      <el-form-item label="主键">
        <el-checkbox v-model="middleDate.primaryKey" />
      </el-form-item>
-      <el-form-item
-        label="索引类型"
-        prop="fieldIndexType"
-      >
+      <el-form-item label="索引类型" prop="fieldIndexType">
        <el-select
          v-model="middleDate.fieldIndexType"
          :disabled="middleDate.fieldType === 'json'"
-          style="width:100%"
+          style="width: 100%"
          placeholder="请选择字段索引类型"
          clearable
        >
@@ -180,7 +144,10 @@
        <el-switch v-model="middleDate.clearable" />
      </el-form-item>
      <el-form-item label="隐藏查询条件">
-        <el-switch v-model="middleDate.fieldSearchHide" :disabled="!middleDate.fieldSearchType" />
+        <el-switch
+          v-model="middleDate.fieldSearchHide"
+          :disabled="!middleDate.fieldSearchType"
+        />
      </el-form-item>
      <el-form-item label="校验失败文案">
        <el-input v-model="middleDate.errorText" />
@@ -192,100 +159,124 @@
        name="1"
      >
        <el-row :gutter="8">
-          <el-col
-              :span="4"
-          >
+          <el-col :span="4">
            <el-select
-                v-model="middleDate.dataSource.dbName"
-                placeholder="数据库【不填则为GVA库】"
-                @change="dbNameChange"
-                clearable
+              v-model="middleDate.dataSource.dbName"
+              placeholder="数据库【不填则为GVA库】"
+              @change="dbNameChange"
+              clearable
            >
              <el-option
-                  v-for="item in dbList"
-                  :key="item.aliasName"
-                  :value="item.aliasName"
-                  :label="item.aliasName"
-                  :disabled="item.disable"
+                v-for="item in dbList"
+                :key="item.aliasName"
+                :value="item.aliasName"
+                :label="item.aliasName"
+                :disabled="item.disable"
              >
                <div>
                  <span>{{ item.aliasName }}</span>
-                  <span style="float:right;color:#8492a6;font-size:13px">{{ item.dbName }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{
+                    item.dbName
+                  }}</span>
                </div>
              </el-option>
            </el-select>
          </el-col>
-          <el-col
-            :span="4"
-          >
+          <el-col :span="4">
            <el-select
              v-model="middleDate.dataSource.association"
              placeholder="关联模式"
              @change="associationChange"
            >
-              <el-option
-                label="一对一"
-                :value="1"
-              />
-              <el-option
-                label="一对多"
-                :value="2"
-              />
+              <el-option label="一对一" :value="1" />
+              <el-option label="一对多" :value="2" />
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-select
-              v-model="middleDate.dataSource.table" placeholder="请选择数据源表"
-              filterable allow-create @focus="getDBTableList" @change="selectDB"
+              v-model="middleDate.dataSource.table"
+              placeholder="请选择数据源表"
+              filterable
+              allow-create
+              @focus="getDBTableList"
+              @change="selectDB"
            >
              <el-option
-                v-for="item in dbTableList" :key="item.tableName" :label="item.tableName"
+                v-for="item in dbTableList"
+                :key="item.tableName"
+                :label="item.tableName"
                :value="item.tableName"
              />
            </el-select>
          </el-col>
          <el-col :span="5">
-            <el-select v-model="middleDate.dataSource.value" placeholder="请先选择需要存储的数据">
+            <el-select
+              v-model="middleDate.dataSource.value"
+              placeholder="请先选择需要存储的数据"
+            >
              <template #label="{ value }">
                <span>存储: </span>
                <span style="font-weight: bold">{{ value }}</span>
              </template>
-              <el-option v-for="item in dbColumnList" :key="item.columnName" :value="item.columnName">
-                <span style="float: left"> <el-tag :type="item.isPrimary ? 'primary' : 'info'">
-                  {{ item.isPrimary ? "主&emsp;键" : "非主键" }}
-                </el-tag> {{ item.columnName }}</span>
+              <el-option
+                v-for="item in dbColumnList"
+                :key="item.columnName"
+                :value="item.columnName"
+              >
+                <span style="float: left">
+                  <el-tag :type="item.isPrimary ? 'primary' : 'info'">
+                    {{ item.isPrimary ? '主&emsp;键' : '非主键' }}
+                  </el-tag>
+                  {{ item.columnName }}</span
+                >
                <span
                  style="
-          float: right;
-          margin-left:5px;
-          color: var(--el-text-color-secondary);
-          font-size: 13px;
-        "
+                    float: right;
+                    margin-left: 5px;
+                    color: var(--el-text-color-secondary);
+                    font-size: 13px;
+                  "
                >
-                  类型：{{ item.type }} <block v-if="item.comment != ''">，字段说明：{{ item.comment }}</block>
+                  类型：{{ item.type }}
+                  <block v-if="item.comment != ''"
+                    >，字段说明：{{ item.comment }}</block
+                  >
                </span>
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
-            <el-select v-model="middleDate.dataSource.label" placeholder="请先选择需要展示的数据">
+            <el-select
+              v-model="middleDate.dataSource.label"
+              placeholder="请先选择需要展示的数据"
+            >
              <template #label="{ value }">
                <span>展示: </span>
                <span style="font-weight: bold">{{ value }}</span>
              </template>
-              <el-option v-for="item in dbColumnList" :key="item.columnName" :value="item.columnName">
-                <span style="float: left"> <el-tag :type="item.isPrimary ? 'primary' : 'info'">
-                  {{ item.isPrimary ? "主&emsp;键" : "非主键" }}
-                </el-tag> {{ item.columnName }}</span>
-                <span
-                    style="
-          float: right;
-          margin-left:5px;
-          color: var(--el-text-color-secondary);
-          font-size: 13px;
-        "
+              <el-option
+                v-for="item in dbColumnList"
+                :key="item.columnName"
+                :value="item.columnName"
+              >
+                <span style="float: left">
+                  <el-tag :type="item.isPrimary ? 'primary' : 'info'">
+                    {{ item.isPrimary ? '主&emsp;键' : '非主键' }}
+                  </el-tag>
+                  {{ item.columnName }}</span
                >
-                  类型：{{ item.type }} <span v-if="item.comment != ''">，字段说明：{{ item.comment }}</span>
+                <span
+                  style="
+                    float: right;
+                    margin-left: 5px;
+                    color: var(--el-text-color-secondary);
+                    font-size: 13px;
+                  "
+                >
+                  类型：{{ item.type }}
+                  <span v-if="item.comment != ''"
+                    >，字段说明：{{ item.comment }}</span
+                  >
                </span>
              </el-option>
            </el-select>
@@ -298,201 +289,203 @@
 </template>

 <script setup>
-import { toLowerCase, toSQLLine } from '@/utils/stringFun'
-import { getSysDictionaryList } from '@/api/sysDictionary'
-import WarningBar from '@/components/warningBar/warningBar.vue'
-import { ref,onMounted } from 'vue'
-import { ElMessageBox } from 'element-plus'
-import {getColumn, getDB, getTable} from "@/api/autoCode";
+  import { toLowerCase, toSQLLine } from '@/utils/stringFun'
+  import { getSysDictionaryList } from '@/api/sysDictionary'
+  import WarningBar from '@/components/warningBar/warningBar.vue'
+  import { ref, onMounted } from 'vue'
+  import { ElMessageBox } from 'element-plus'
+  import { getColumn, getDB, getTable } from '@/api/autoCode'

-defineOptions({
-  name: 'FieldDialog'
-})
-
-const props = defineProps({
-  dialogMiddle: {
-    type: Object,
-    default: function() {
-      return {}
-    }
-  },
-  typeOptions: {
-    type: Array,
-    default: function() {
-      return []
-    }
-  },
-  typeSearchOptions: {
-    type: Array,
-    default: function() {
-      return []
-    }
-  },
-  typeIndexOptions: {
-    type: Array,
-    default: function() {
-      return []
-    }
-  },
-})
-
-const activeNames = ref([])
-
-const middleDate = ref({})
-const dictOptions = ref([])
-
-const dbList = ref([])
-
-const getDbFunc = async() => {
-  const res = await getDB()
-  if (res.code === 0) {
-    dbList.value = res.data.dbList
-  }
-}
-
-const validateDataTypeLong = (rule, value, callback) => {
-  const regex = /^('([^']*)'(?:,'([^']+)'*)*)$/;
-  if (middleDate.value.fieldType == "enum" && !regex.test(value)) {
-    callback(new Error("枚举值校验错误"));
-  } else {
-    callback();
-  }
-};
-
-const rules = ref({
-  fieldName: [
-    { required: true, message: '请输入字段英文名', trigger: 'blur' }
-  ],
-  fieldDesc: [
-    { required: true, message: '请输入字段中文名', trigger: 'blur' }
-  ],
-  fieldJson: [
-    { required: true, message: '请输入字段格式化json', trigger: 'blur' }
-  ],
-  columnName: [
-    { required: true, message: '请输入数据库字段', trigger: 'blur' }
-  ],
-  fieldType: [
-    { required: true, message: '请选择字段类型', trigger: 'blur' }
-  ],
-  dataTypeLong: [
-    { validator: validateDataTypeLong, trigger: "blur" }
-  ],
-})
-
-const init = async() => {
-  middleDate.value = props.dialogMiddle
-  const dictRes = await getSysDictionaryList({
-    page: 1,
-    pageSize: 999999
+  defineOptions({
+    name: 'FieldDialog'
  })

-  dictOptions.value = dictRes.data
-}
-init()
-
-const autoFill = () => {
-  middleDate.value.fieldJson = toLowerCase(middleDate.value.fieldName)
-  middleDate.value.columnName = toSQLLine(middleDate.value.fieldJson)
-}
-
-const canSelect = (item) => {
-  const fieldType = middleDate.value.fieldType
-  if (fieldType !== 'string' && item === 'LIKE') {
-    return true
-  }
-
-  if ((fieldType !== 'int' && fieldType !== 'time.Time' && fieldType !== 'float64') && (item === 'BETWEEN' || item === 'NOT BETWEEN')) {
-    return true
-  }
-  return false
-}
-
-const clearOther = () => {
-  middleDate.value.fieldSearchType = ''
-  middleDate.value.dictType = ''
-}
-
-const associationChange = (val) => {
-  if (val === 2) {
-    ElMessageBox.confirm(
-      '一对多关联模式下，数据类型会改变为数组，后端表现为json，具体表现为数组模式，是否继续？',
-      '提示',
-      {
-        confirmButtonText: '继续',
-        cancelButtonText: '取消',
-        type: 'warning'
+  const props = defineProps({
+    dialogMiddle: {
+      type: Object,
+      default: function () {
+        return {}
      }
-    ).then(() => {
-      middleDate.value.fieldType = 'array'
-    }).catch(() => {
-      middleDate.value.dataSource.association = 1
-    })
-  }
-}
-
-
-const dbNameChange = () => {
-  getDBTableList()
-  middleDate.value.dataSource.table = ''
-  middleDate.value.dataSource.value = ''
-  middleDate.value.dataSource.label = ''
-}
-
-
-const dbTableList = ref([])
-
-const getDBTableList = async () => {
-  const res = await getTable({ businessDB: middleDate.value.dataSource.dbName })
-  if (res.code === 0) {
-    let list = res.data.tables; // 确保这里正确获取到 tables 数组
-    dbTableList.value = list.map(item => ({
-      tableName: item.tableName,
-      value: item.tableName // 这里假设 value 也是 tableName，如果不同请调整
-    }));
-  }
-  middleDate.value.dataSource.value = ''
-  middleDate.value.dataSource.label = ''
-}
-
-const dbColumnList = ref([])
-const selectDB = async (val,isInit) => {
-  middleDate.value.dataSource.hasDeletedAt = false
-  middleDate.value.dataSource.table = val
-  const res = await getColumn({
-    businessDB: middleDate.value.dataSource.dbName,
-    tableName: val
+    },
+    typeOptions: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    typeSearchOptions: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    typeIndexOptions: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
  })

-  if (res.code === 0) {
-    let list = res.data.columns; // 确保这里正确获取到 tables 数组
-    dbColumnList.value = list.map(item => {
-        if(item.columnName === 'deleted_at'){
+  const activeNames = ref([])
+
+  const middleDate = ref({})
+  const dictOptions = ref([])
+
+  const dbList = ref([])
+
+  const getDbFunc = async () => {
+    const res = await getDB()
+    if (res.code === 0) {
+      dbList.value = res.data.dbList
+    }
+  }
+
+  const validateDataTypeLong = (rule, value, callback) => {
+    const regex = /^('([^']*)'(?:,'([^']+)'*)*)$/
+    if (middleDate.value.fieldType == 'enum' && !regex.test(value)) {
+      callback(new Error('枚举值校验错误'))
+    } else {
+      callback()
+    }
+  }
+
+  const rules = ref({
+    fieldName: [
+      { required: true, message: '请输入字段英文名', trigger: 'blur' }
+    ],
+    fieldDesc: [
+      { required: true, message: '请输入字段中文名', trigger: 'blur' }
+    ],
+    fieldJson: [
+      { required: true, message: '请输入字段格式化json', trigger: 'blur' }
+    ],
+    columnName: [
+      { required: true, message: '请输入数据库字段', trigger: 'blur' }
+    ],
+    fieldType: [{ required: true, message: '请选择字段类型', trigger: 'blur' }],
+    dataTypeLong: [{ validator: validateDataTypeLong, trigger: 'blur' }]
+  })
+
+  const init = async () => {
+    middleDate.value = props.dialogMiddle
+    const dictRes = await getSysDictionaryList({
+      page: 1,
+      pageSize: 999999
+    })
+
+    dictOptions.value = dictRes.data
+  }
+  init()
+
+  const autoFill = () => {
+    middleDate.value.fieldJson = toLowerCase(middleDate.value.fieldName)
+    middleDate.value.columnName = toSQLLine(middleDate.value.fieldJson)
+  }
+
+  const canSelect = (item) => {
+    const fieldType = middleDate.value.fieldType
+    if (fieldType !== 'string' && item === 'LIKE') {
+      return true
+    }
+
+    if (
+      fieldType !== 'int' &&
+      fieldType !== 'time.Time' &&
+      fieldType !== 'float64' &&
+      (item === 'BETWEEN' || item === 'NOT BETWEEN')
+    ) {
+      return true
+    }
+    return false
+  }
+
+  const clearOther = () => {
+    middleDate.value.fieldSearchType = ''
+    middleDate.value.dictType = ''
+  }
+
+  const associationChange = (val) => {
+    if (val === 2) {
+      ElMessageBox.confirm(
+        '一对多关联模式下，数据类型会改变为数组，后端表现为json，具体表现为数组模式，是否继续？',
+        '提示',
+        {
+          confirmButtonText: '继续',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      )
+        .then(() => {
+          middleDate.value.fieldType = 'array'
+        })
+        .catch(() => {
+          middleDate.value.dataSource.association = 1
+        })
+    }
+  }
+
+  const dbNameChange = () => {
+    getDBTableList()
+    middleDate.value.dataSource.table = ''
+    middleDate.value.dataSource.value = ''
+    middleDate.value.dataSource.label = ''
+  }
+
+  const dbTableList = ref([])
+
+  const getDBTableList = async () => {
+    const res = await getTable({
+      businessDB: middleDate.value.dataSource.dbName
+    })
+    if (res.code === 0) {
+      let list = res.data.tables // 确保这里正确获取到 tables 数组
+      dbTableList.value = list.map((item) => ({
+        tableName: item.tableName,
+        value: item.tableName // 这里假设 value 也是 tableName，如果不同请调整
+      }))
+    }
+    middleDate.value.dataSource.value = ''
+    middleDate.value.dataSource.label = ''
+  }
+
+  const dbColumnList = ref([])
+  const selectDB = async (val, isInit) => {
+    middleDate.value.dataSource.hasDeletedAt = false
+    middleDate.value.dataSource.table = val
+    const res = await getColumn({
+      businessDB: middleDate.value.dataSource.dbName,
+      tableName: val
+    })
+
+    if (res.code === 0) {
+      let list = res.data.columns // 确保这里正确获取到 tables 数组
+      dbColumnList.value = list.map((item) => {
+        if (item.columnName === 'deleted_at') {
          middleDate.value.dataSource.hasDeletedAt = true
        }
-        return{
-            columnName: item.columnName,
-            value: item.columnName,
-            type: item.dataType,
-            isPrimary: item.primaryKey,
-            comment: item.columnComment
+        return {
+          columnName: item.columnName,
+          value: item.columnName,
+          type: item.dataType,
+          isPrimary: item.primaryKey,
+          comment: item.columnComment
        }
-    });
-    if (dbColumnList.value.length > 0 && !isInit) {
-      middleDate.value.dataSource.label = dbColumnList.value[0].columnName
-      middleDate.value.dataSource.value = dbColumnList.value[0].columnName
+      })
+      if (dbColumnList.value.length > 0 && !isInit) {
+        middleDate.value.dataSource.label = dbColumnList.value[0].columnName
+        middleDate.value.dataSource.value = dbColumnList.value[0].columnName
+      }
    }
  }
-}

+  const fieldDialogForm = ref(null)
+  defineExpose({ fieldDialogForm })

-const fieldDialogForm = ref(null)
-defineExpose({ fieldDialogForm })
-
-onMounted(()=>{
-  getDbFunc()
-  if(middleDate.value.dataSource.table){
-    selectDB(middleDate.value.dataSource.table,true)
-  }
-})
+  onMounted(() => {
+    getDbFunc()
+    if (middleDate.value.dataSource.table) {
+      selectDB(middleDate.value.dataSource.table, true)
+    }
+  })
 </script>
@@ -1,116 +1,119 @@
 <template>
-  <el-tabs v-model="activeName" tab-position="left" class="h-[calc(100vh-110px)]">
+  <el-tabs
+    v-model="activeName"
+    tab-position="left"
+    class="h-[calc(100vh-110px)]"
+  >
    <el-tab-pane
      v-for="(item, key) in useCode"
      :key="key"
      :label="key"
      :name="key"
    >
-      <div
-        :id="key"
-        class="h-[calc(100vh-110px)] px-5 overflow-y-scroll"
-      ></div>
+      <div :id="key" class="h-[calc(100vh-110px)] px-5 overflow-y-scroll"></div>
    </el-tab-pane>
  </el-tabs>
 </template>

 <script setup>
-import { Marked } from "marked";
-import { markedHighlight } from "marked-highlight";
-import hljs from 'highlight.js'
-import { ElMessage } from 'element-plus'
-import { onMounted, ref, watchEffect } from 'vue'
-import {useAppStore} from "@/pinia";
+  import { Marked } from 'marked'
+  import { markedHighlight } from 'marked-highlight'
+  import hljs from 'highlight.js'
+  import { ElMessage } from 'element-plus'
+  import { onMounted, ref, watchEffect } from 'vue'
+  import { useAppStore } from '@/pinia'

-const appStore = useAppStore()
+  const appStore = useAppStore()

-const useCode = ref({})
+  const useCode = ref({})

-const createKey = [
-    "enter.go",
-    "gorm_biz.go",
-    "router_biz.go",
-    "api",
-    "router",
-    "initialize",
-    "gen.go",
-]
+  const createKey = [
+    'enter.go',
+    'gorm_biz.go',
+    'router_biz.go',
+    'api',
+    'router',
+    'initialize',
+    'gen.go'
+  ]

-onMounted(() => {
-  const isDarkMode = appStore.config.darkMode === 'dark';
-  if (isDarkMode) {
-    import('highlight.js/styles/atom-one-dark.css');
-  } else {
-    import('highlight.js/styles/atom-one-light.css');
-  }
-});
-
-const props = defineProps({
-  previewCode: {
-    type: Object,
-    default() {
-      return {}
+  onMounted(() => {
+    const isDarkMode = appStore.config.darkMode === 'dark'
+    if (isDarkMode) {
+      import('highlight.js/styles/atom-one-dark.css')
+    } else {
+      import('highlight.js/styles/atom-one-light.css')
    }
-  },
-  isAdd: {
-    type: Boolean,
-    default: false
-  }
-})
+  })

-watchEffect(() => {
-  for (const key in props.previewCode) {
-    if (props.isAdd && createKey.some(createKeyItem => key.includes(createKeyItem))) {
-      continue;
+  const props = defineProps({
+    previewCode: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    isAdd: {
+      type: Boolean,
+      default: false
    }
-    useCode.value[key] = props.previewCode[key]
-  }
-})
+  })

-const activeName = ref('')
-onMounted(() => {
-  const marked = new Marked(
+  watchEffect(() => {
+    for (const key in props.previewCode) {
+      if (
+        props.isAdd &&
+        createKey.some((createKeyItem) => key.includes(createKeyItem))
+      ) {
+        continue
+      }
+      useCode.value[key] = props.previewCode[key]
+    }
+  })
+
+  const activeName = ref('')
+  onMounted(() => {
+    const marked = new Marked(
      markedHighlight({
        langPrefix: 'hljs language-',
        highlight(code, lang) {
-          const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+          const language = hljs.getLanguage(lang) ? lang : 'plaintext'
          if (lang === 'vue') {
-            return hljs.highlight(code, { language: 'html' }).value;
+            return hljs.highlight(code, { language: 'html' }).value
          }
-          return hljs.highlight(code, { language }).value;
+          return hljs.highlight(code, { language }).value
        }
      })
-  );
-  for (const key in useCode.value) {
-    if (activeName.value === '') {
-      activeName.value = key
+    )
+    for (const key in useCode.value) {
+      if (activeName.value === '') {
+        activeName.value = key
+      }
+      document.getElementById(key).innerHTML = marked.parse(useCode.value[key])
+    }
+  })
+
+  const selectText = () => {
+    const element = document.getElementById(activeName.value)
+    if (document.body.createTextRange) {
+      const range = document.body.createTextRange()
+      range.moveToElementText(element)
+      range.select()
+    } else if (window.getSelection) {
+      const selection = window.getSelection()
+      const range = document.createRange()
+      range.selectNodeContents(element)
+      selection.removeAllRanges()
+      selection.addRange(range)
+    } else {
+      alert('none')
    }
-    document.getElementById(key).innerHTML = marked.parse(useCode.value[key])
  }
-})
-
-const selectText = () => {
-  const element = document.getElementById(activeName.value)
-  if (document.body.createTextRange) {
-    const range = document.body.createTextRange()
-    range.moveToElementText(element)
-    range.select()
-  } else if (window.getSelection) {
-    const selection = window.getSelection()
-    const range = document.createRange()
-    range.selectNodeContents(element)
-    selection.removeAllRanges()
-    selection.addRange(range)
-  } else {
-    alert('none')
+  const copy = () => {
+    selectText()
+    document.execCommand('copy')
+    ElMessage.success('复制成功')
  }
-}
-const copy = () => {
-  selectText()
-  document.execCommand('copy')
-  ElMessage.success('复制成功')
-}
-
-defineExpose({ copy })

+  defineExpose({ copy })
 </script>