From 1689a497d0570e2e2e034b4fd45ea86d97d154ae Mon Sep 17 00:00:00 2001
From: wf <2547096351@qq.com>
Date: Wed, 5 Jun 2024 20:13:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20code-view=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/code-view/index.vue            | 25 +++++++++++++------
 .../dynamic-form/dynamic-form.vue             |  2 +-
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/code-view/index.vue b/src/components/code-view/index.vue
index ab3b18c..063ee3c 100644
--- a/src/components/code-view/index.vue
+++ b/src/components/code-view/index.vue
@@ -1,10 +1,9 @@
 <template>
   <code-mirror
-    basic
     v-model="codeValue"
     :extensions="extensions"
-    :tab-size="config.tabSize"
     :basic="config.basic"
+    :tab-size="config.tabSize"
     :dark="config.dark"
     :readonly="config.readonly"
   />
@@ -26,21 +25,25 @@ interface Props {
 // withDefaults为defineProps标注类型
 // https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
 const props = withDefaults(defineProps<Props>(), {
-  type: "javascript",
-  codeJson: ""
+  type: "javascript", // 默认类型
+  codeJson: "" // 默认值
 });
 
+// 通过计算属性实现数据实时更新
+// 将序列化的字符串美观输出，\t 换行
 const codeValue = computed(() => JSON.stringify(props.codeJson, null, "\t"));
 
-const defaultConfig = {
+// 基础配置
+const config = ref({
   tabSize: 2,
   basic: true,
   dark: true,
   readonly: true
-};
-const config = defaultConfig;
+});
 
 // 扩展
+// 基础扩展：黑暗模式
+// 根据默认值来判断添加什么扩展
 const extensions = computed(() => {
   const arr = [oneDark];
   if (props.type === "javascript") {
@@ -59,6 +62,12 @@ const extensions = computed(() => {
 <style lang="scss" scoped>
 // 修改code中的字体样式
 :deep(.ͼ1 .cm-scroller) {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
+  font-family:
+    source-code-pro,
+    Menlo,
+    Monaco,
+    Consolas,
+    Courier New,
+    monospace;
 }
 </style>
diff --git a/src/views/form-management/dynamic-form/dynamic-form.vue b/src/views/form-management/dynamic-form/dynamic-form.vue
index e0d425e..f702918 100644
--- a/src/views/form-management/dynamic-form/dynamic-form.vue
+++ b/src/views/form-management/dynamic-form/dynamic-form.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>动态表单</div>
+  <div class="dc-page">动态表单</div>
 </template>
 
 <script setup lang="ts"></script>