sun-card-design 1.3.3 → 1.3.5

package/README.md

@@ -74,10 +74,26 @@ import { PcPanel, MobilePanel } from 'sun-card-design'
 <template>
   <div class="container">
     <div class="pc-wrap">
-      <PcPanel :config="toolConfig" :record="record" @clickEvent="handleClickEvent" />
+      <PcPanel
+        :config="toolConfig"
+        :record="record"
+        @clickEvent="handleClickEvent"
+        @fileUpdateEvent="handleFileUpdate"
+        @clickColumnsEvent="handleClickColumns"
+        @clickLinkEvent="handleClickLink"
+        @uploadEvent="handleUpload"
+      />
     </div>
     <div class="mb-wrap">
-      <MobilePanel :config="toolConfig" :record="record" @clickEvent="handleClickEvent" />
+      <MobilePanel
+        :config="toolConfig"
+        :record="record"
+        @clickEvent="handleClickEvent"
+        @fileUpdateEvent="handleFileUpdate"
+        @clickColumnsEvent="handleClickColumns"
+        @clickLinkEvent="handleClickLink"
+        @uploadEvent="handleUpload"
+      />
     </div>
   </div>
 </template>
@@ -114,12 +130,73 @@ const toolConfig = ref({
   ]
 })
 
+// 组件点击
 const handleClickEvent = (record) => {
-  console.error(record)
+  console.log('clickEvent', record)
+}
+
+// 布局区域点击
+const handleClickColumns = (record) => {
+  console.log('clickColumnsEvent', record)
+}
+
+// 文件组件内容更新
+const handleFileUpdate = (record) => {
+  console.log('fileUpdateEvent', record)
+}
+
+// 文件链接点击
+const handleClickLink = (link) => {
+  console.log('clickLinkEvent', link)
+}
+
+// 文件上传点击（上传由宿主应用实现）
+const handleUpload = ({ url, callBack }) => {
+  console.log('uploadEvent url', url)
+
+  // 在这里发起实际的上传请求，拿到文件列表 list[]
+  // 假设上传完成后得到 filesList 数组：
+  const filesList = [] // TODO: 替换为真实上传返回的 list[]
+
+  // 上传完成后，通过 callBack 把文件列表回传给 card 预览组件
+  callBack(filesList)
 }
 </script>
 ```
 
+## 事件 API
+
+渲染面板组件（`PcPanel`、`MobilePanel`）会向外抛出一系列交互事件，便于在宿主应用中统一处理业务逻辑：
+
+- **clickEvent**：组件点击事件  
+  - **触发场景**：卡片内可点击基础组件（如按钮、图片、文件组件等）被用户点击时触发  
+  - **回调签名**：`(record) => void`  
+  - **参数说明**：`record` 为当前被点击组件的配置数据
+
+- **fileUpdateEvent**：文件组件内部文件列表更新事件  
+  - **触发场景**：在文件组件中执行“更新文件”等操作时触发  
+  - **回调签名**：`(record) => void`  
+  - **参数说明**：`record` 为当前文件组件的配置数据
+
+- **clickColumnsEvent**：布局区域（Grid 等）点击事件  
+  - **触发场景**：开启了点击行为的布局列/区域被点击时触发  
+  - **回调签名**：`(record) => void`  
+  - **参数说明**：`record` 为当前被点击的布局列配置
+
+- **clickLinkEvent**：文件链接点击事件  
+  - **触发场景**：文件组件中的链接被点击时触发  
+  - **回调签名**：`(link: string) => void`  
+  - **参数说明**：`link` 为当前文件的链接地址
+
+- **uploadEvent**：文件上传点击事件  
+  - **触发场景**：文件组件中点击“上传”入口时触发  
+  - **回调签名**：`(payload) => void`  
+  - **参数结构**：`payload` 为一个对象：`{ url, callBack }`  
+    - **url**：上传接口地址，类型为 `string`  
+    - **callBack**：上传完成后的回调函数，签名为 `(files: any[]) => void`，其中 `files` 为上传返回的文件列表 `list[]`；宿主应用在完成上传并拿到文件列表后，需要调用该回调将数据回传给预览面板
+
+> 建议在业务代码中统一封装这些事件的处理逻辑，以便在不同卡片、不同终端（PC/Mobile）之间复用。
+
 ## 外部依赖与对等依赖
 
 本库将以下依赖标记为 external/peer，不会被打入产物，请在宿主项目中自行安装与提供：
@@ -128,7 +205,6 @@ const handleClickEvent = (record) => {
   - `vue` ^3.5.0
   - `ant-design-vue` ^4.0.0
 
-> 某些组件（如图表/3D/截图）依赖上述库，只有在使用相关组件时才需要安装。
 
 ## 兼容性
 

package/dist/mobile/sun-card-design-mobile.es15.js

@@ -7,17 +7,17 @@ const _hoisted_2 = ["onClick"];
 const _sfc_main = {
   __name: "gridComp",
   props: ["record", "recordData", "columnsIndex", "variableList"],
-  emits: ["clickEvent", "clickColumnsEvent", "fileUpdateEvent"],
+  emits: ["clickEvent", "clickColumnsEvent", "fileUpdateEvent", "clickLinkEvent", "uploadEvent"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "f9f4701c": mainBackground.value,
-      "v5a5cd7ce": boxBackground.value,
-      "v73897268": boxBorder.value,
-      "c9cd5304": boxBorderRadius.value,
-      "v65c8851e": boxPadding.value,
-      "v712cdb2e": boxJustifyContent.value,
-      "v585a4779": boxMinHeight.value,
-      "v3a596880": boxShadow.value
+      "d08b17cc": mainBackground.value,
+      "v73ce06a6": boxBackground.value,
+      "v1485a1a4": boxBorder.value,
+      "v1cfa2f56": boxBorderRadius.value,
+      "v481cbd99": boxPadding.value,
+      "v54779541": boxJustifyContent.value,
+      "v171bdda1": boxMinHeight.value,
+      "v311da698": boxShadow.value
     }));
     const props = __props;
     const emit = __emit;
@@ -33,10 +33,16 @@ const _sfc_main = {
     const onUpdate = (record) => {
       emit("fileUpdateEvent", record);
     };
+    const onClickLink = (link) => {
+      emit("clickLinkEvent", link);
+    };
     const onClickColumns = (record) => {
       if (!record.options.clickEvent) return;
       emit("clickColumnsEvent", record);
     };
+    const onUpload = (uploadData) => {
+      emit("uploadEvent", uploadData);
+    };
     function isGradientColor(color) {
       return /^(linear|radial)-gradient\(.*\)$/.test(color);
     }
@@ -94,7 +100,9 @@ const _sfc_main = {
                         key: index2,
                         columnsIndex: getIndex(item.index),
                         onClickEvent: onClick,
-                        onFileUpdateEvent: onUpdate
+                        onFileUpdateEvent: onUpdate,
+                        onClickLinkEvent: onClickLink,
+                        onUploadEvent: onUpload
                       }, null, 8, ["record", "variableList", "columnsIndex"]);
                     }), 128))
                   ], 8, _hoisted_2)
@@ -109,7 +117,7 @@ const _sfc_main = {
     };
   }
 };
-const Grid = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-39c6b949"]]);
+const Grid = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-70d5add4"]]);
 export {
   Grid as default
 };

package/dist/mobile/sun-card-design-mobile.es16.js

@@ -1,16 +1,34 @@
-import { useCssVars, computed, resolveComponent, createElementBlock, openBlock, createVNode, withCtx, unref } from "vue";
+import { useCssVars, computed, ref, watch, resolveComponent, createElementBlock, openBlock, createVNode, withCtx, unref } from "vue";
 import { renderTextByVariables } from "./sun-card-design-mobile.es28.js";
 /* empty css                            */
 import _export_sfc from "./sun-card-design-mobile.es27.js";
 const _hoisted_1 = { class: "main-input" };
 const _sfc_main = {
   __name: "inputComp",
-  props: ["record", "variableList"],
+  props: ["record", "columnsIndex", "variableList"],
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v7df9848d": mainPadding.value
+      "v3367bba6": mainPadding.value
     }));
     const props = __props;
+    const inputValue = ref(renderTextByVariables(props.record.options.defaultValue, props.columnsIndex, props.variableList));
+    watch(
+      () => renderTextByVariables(props.record.options.defaultValue, props.columnsIndex, props.variableList),
+      (newValue) => {
+        inputValue.value = newValue;
+      }
+    );
+    const handleInputChange = (e) => {
+      const newValue = e.target.value;
+      inputValue.value = newValue;
+      if (props.record.options?.variableName) {
+        const variableName = props.record.options.variableName;
+        const variable = props.variableList?.find((v) => v && v.name === variableName);
+        if (variable) {
+          variable.defaultValue = newValue;
+        }
+      }
+    };
     const mainPadding = computed(() => {
       const tb = props.record.options?.style?.tbPadding ?? 0;
       const lr = props.record.options?.style?.lrPadding ?? 0;
@@ -26,13 +44,13 @@ const _sfc_main = {
         }, {
           default: withCtx(() => [
             createVNode(_component_a_form_item, {
-              label: unref(renderTextByVariables)(props.record.options.label, 0, props.variableList)
+              label: unref(renderTextByVariables)(props.record.options.label, props.columnsIndex, props.variableList)
             }, {
               default: withCtx(() => [
                 createVNode(_component_a_input, {
-                  value: props.record.options.defaultValue,
-                  "onUpdate:value": _cache[0] || (_cache[0] = ($event) => props.record.options.defaultValue = $event),
-                  placeholder: props.record.options.placeholder
+                  value: inputValue.value,
+                  placeholder: props.record.options.placeholder,
+                  onChange: handleInputChange
                 }, null, 8, ["value", "placeholder"])
               ]),
               _: 1
@@ -44,7 +62,7 @@ const _sfc_main = {
     };
   }
 };
-const Input = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a13d55b6"]]);
+const Input = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-eb38013e"]]);
 export {
   Input as default
 };

package/dist/mobile/sun-card-design-mobile.es2.js

@@ -5,8 +5,8 @@ import _export_sfc from "./sun-card-design-mobile.es27.js";
 const _sfc_main = {
   __name: "mobilePanel",
   props: ["record", "config"],
-  emits: ["clickEvent", "fileUpdateEvent"],
-  setup(__props, { emit: __emit }) {
+  emits: ["clickEvent", "fileUpdateEvent", "clickColumnsEvent", "clickLinkEvent", "uploadEvent"],
+  setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
     const props = __props;
     adapter(props.record.list, props.config?.variableList);
@@ -20,6 +20,18 @@ const _sfc_main = {
     const onClickColumns = (record) => {
       emit("clickColumnsEvent", record);
     };
+    const onClickLink = (link) => {
+      emit("clickLinkEvent", link);
+    };
+    const onUpload = (uploadData) => {
+      emit("uploadEvent", uploadData);
+    };
+    const getVariableData = () => {
+      return props.config?.variableList;
+    };
+    __expose({
+      getVariableData
+    });
     function adapter(recordList = [], variableList = []) {
       if (!Array.isArray(recordList)) return;
       recordList.forEach((item) => {
@@ -55,6 +67,24 @@ const _sfc_main = {
             });
           }
         }
+        if (item.type === "file") {
+          if (item.options.mode === "dynamic" && item.options.variableName) {
+            const variableItem = variableList.find(
+              (v) => v && v.name === item.options.variableName && v.type === "Array"
+            );
+            item.options.fileList = [];
+            if (variableItem && variableItem.defaultValue) {
+              const defaultValueArray = JSON.parse(variableItem.defaultValue);
+              const targetLength = defaultValueArray.length;
+              if (targetLength) {
+                const templateItem = JSON.parse(JSON.stringify(item.options.fileTemplate));
+                for (let index = 0; index < targetLength; index++) {
+                  item.options.fileList.push(JSON.parse(JSON.stringify(templateItem)));
+                }
+              }
+            }
+          }
+        }
       });
     }
     return (_ctx, _cache) => {
@@ -74,14 +104,16 @@ const _sfc_main = {
             key: index,
             onClickEvent: onClick,
             onFileUpdateEvent: onUpdated,
-            onClickColumnsEvent: onClickColumns
+            onClickColumnsEvent: onClickColumns,
+            onClickLinkEvent: onClickLink,
+            onUploadEvent: onUpload
           }, null, 8, ["recordData", "variableList", "record"]);
         }), 128))
       ], 4);
     };
   }
 };
-const MobilePanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-22934fb8"]]);
+const MobilePanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-802cc37f"]]);
 export {
   MobilePanel as default
 };

package/dist/mobile/sun-card-design-mobile.es25.js

@@ -1,4 +1,4 @@
-import { createElementBlock, createCommentVNode, openBlock, createBlock } from "vue";
+import { useCssVars, computed, createElementBlock, createCommentVNode, openBlock, createBlock } from "vue";
 import Title from "./sun-card-design-mobile.es3.js";
 import Text from "./sun-card-design-mobile.es4.js";
 import Button from "./sun-card-design-mobile.es5.js";
@@ -13,6 +13,7 @@ import Audio from "./sun-card-design-mobile.es9.js";
 import Select from "./sun-card-design-mobile.es17.js";
 import Video from "./sun-card-design-mobile.es8.js";
 import Input from "./sun-card-design-mobile.es16.js";
+import Textarea from "./sun-card-design-mobile.es56.js";
 import GenerateImg from "./sun-card-design-mobile.es14.js";
 import EnterpriseSearch from "./sun-card-design-mobile.es18.js";
 import Table from "./sun-card-design-mobile.es19.js";
@@ -22,11 +23,11 @@ import LineChart from "./sun-card-design-mobile.es24.js";
 import BarChart3D from "./sun-card-design-mobile.es21.js";
 import PieChart3D from "./sun-card-design-mobile.es23.js";
 import Panorama from "./sun-card-design-mobile.es13.js";
-import SunIcon from "./sun-card-design-mobile.es56.js";
-import SingleColumn from "./sun-card-design-mobile.es57.js";
-import MultipleColumn from "./sun-card-design-mobile.es58.js";
-import MultipleLine from "./sun-card-design-mobile.es59.js";
-import GridList from "./sun-card-design-mobile.es60.js";
+import SunIcon from "./sun-card-design-mobile.es57.js";
+import SingleColumn from "./sun-card-design-mobile.es58.js";
+import MultipleColumn from "./sun-card-design-mobile.es59.js";
+import MultipleLine from "./sun-card-design-mobile.es60.js";
+import GridList from "./sun-card-design-mobile.es61.js";
 /* empty css                            */
 import _export_sfc from "./sun-card-design-mobile.es27.js";
 const _hoisted_1 = {
@@ -36,8 +37,11 @@ const _hoisted_1 = {
 const _sfc_main = {
   __name: "formItem",
   props: ["record", "recordData", "columnsIndex", "variableList"],
-  emits: ["clickEvent", "fileUpdateEvent", "clickColumnsEvent"],
+  emits: ["clickEvent", "fileUpdateEvent", "clickColumnsEvent", "clickLinkEvent", "uploadEvent"],
   setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "v46a9ee3b": marginTop.value
+    }));
     const props = __props;
     const emit = __emit;
     const onClick = (record) => {
@@ -46,9 +50,19 @@ const _sfc_main = {
     const onUpdate = (record) => {
       emit("fileUpdateEvent", record);
     };
+    const onClickLink = (link) => {
+      emit("clickLinkEvent", link);
+    };
     const onClickColumns = (record) => {
       emit("clickColumnsEvent", record);
     };
+    const onUpload = (uploadData) => {
+      emit("uploadEvent", uploadData);
+    };
+    const marginTop = computed(() => {
+      const margin = props.record?.options?.style?.marginTop ?? 0;
+      return `${margin}px`;
+    });
     return (_ctx, _cache) => {
       return __props.record.state !== false ? (openBlock(), createElementBlock("div", _hoisted_1, [
         __props.record.type === "title" ? (openBlock(), createBlock(Title, {
@@ -77,8 +91,9 @@ const _sfc_main = {
           record: props.record,
           columnsIndex: props.columnsIndex,
           variableList: props.variableList,
-          onClickEvent: onClick,
-          onFileUpdateEvent: onUpdate
+          onFileUpdateEvent: onUpdate,
+          onClickLinkEvent: onClickLink,
+          onUploadEvent: onUpload
         }, null, 8, ["record", "columnsIndex", "variableList"])) : createCommentVNode("", true),
         __props.record.type === "upload" ? (openBlock(), createBlock(Upload, {
           key: 4,
@@ -133,23 +148,30 @@ const _sfc_main = {
         __props.record.type === "input" ? (openBlock(), createBlock(Input, {
           key: 12,
           record: props.record,
+          columnsIndex: props.columnsIndex,
           variableList: props.variableList
-        }, null, 8, ["record", "variableList"])) : createCommentVNode("", true),
-        __props.record.type === "generateImg" ? (openBlock(), createBlock(GenerateImg, {
+        }, null, 8, ["record", "columnsIndex", "variableList"])) : createCommentVNode("", true),
+        __props.record.type === "textarea" ? (openBlock(), createBlock(Textarea, {
           key: 13,
           record: props.record,
           columnsIndex: props.columnsIndex,
           variableList: props.variableList
         }, null, 8, ["record", "columnsIndex", "variableList"])) : createCommentVNode("", true),
-        __props.record.type === "sunIcon" ? (openBlock(), createBlock(SunIcon, {
+        __props.record.type === "generateImg" ? (openBlock(), createBlock(GenerateImg, {
           key: 14,
           record: props.record,
           columnsIndex: props.columnsIndex,
+          variableList: props.variableList
+        }, null, 8, ["record", "columnsIndex", "variableList"])) : createCommentVNode("", true),
+        __props.record.type === "sunIcon" ? (openBlock(), createBlock(SunIcon, {
+          key: 15,
+          record: props.record,
+          columnsIndex: props.columnsIndex,
           variableList: props.variableList,
           onClickEvent: onClick
         }, null, 8, ["record", "columnsIndex", "variableList"])) : createCommentVNode("", true),
         __props.record.type === "grid" ? (openBlock(), createBlock(Grid, {
-          key: 15,
+          key: 16,
           record: props.record,
           recordData: props.recordData,
           columnsIndex: props.columnsIndex,
@@ -159,7 +181,7 @@ const _sfc_main = {
           onClickColumnsEvent: onClickColumns
         }, null, 8, ["record", "recordData", "columnsIndex", "variableList"])) : createCommentVNode("", true),
         __props.record.type === "singleColumn" ? (openBlock(), createBlock(SingleColumn, {
-          key: 16,
+          key: 17,
           record: props.record,
           recordData: props.recordData,
           columnsIndex: props.columnsIndex,
@@ -169,7 +191,7 @@ const _sfc_main = {
           onClickColumnsEvent: onClickColumns
         }, null, 8, ["record", "recordData", "columnsIndex", "variableList"])) : createCommentVNode("", true),
         __props.record.type === "multipleColumn" ? (openBlock(), createBlock(MultipleColumn, {
-          key: 17,
+          key: 18,
           record: props.record,
           recordData: props.recordData,
           columnsIndex: props.columnsIndex,
@@ -179,7 +201,7 @@ const _sfc_main = {
           onClickColumnsEvent: onClickColumns
         }, null, 8, ["record", "recordData", "columnsIndex", "variableList"])) : createCommentVNode("", true),
         __props.record.type === "multipleLine" ? (openBlock(), createBlock(MultipleLine, {
-          key: 18,
+          key: 19,
           record: props.record,
           recordData: props.recordData,
           columnsIndex: props.columnsIndex,
@@ -189,7 +211,7 @@ const _sfc_main = {
           onClickColumnsEvent: onClickColumns
         }, null, 8, ["record", "recordData", "columnsIndex", "variableList"])) : createCommentVNode("", true),
         __props.record.type === "gridList" ? (openBlock(), createBlock(GridList, {
-          key: 19,
+          key: 20,
           record: props.record,
           recordData: props.recordData,
           columnsIndex: props.columnsIndex,
@@ -199,49 +221,49 @@ const _sfc_main = {
           onClickColumnsEvent: onClickColumns
         }, null, 8, ["record", "recordData", "columnsIndex", "variableList"])) : createCommentVNode("", true),
         __props.record.type === "enterpriseSearch" ? (openBlock(), createBlock(EnterpriseSearch, {
-          key: 20,
+          key: 21,
           record: props.record,
           columnsIndex: props.columnsIndex,
           variableList: props.variableList
         }, null, 8, ["record", "columnsIndex", "variableList"])) : createCommentVNode("", true),
         __props.record.type === "table" ? (openBlock(), createBlock(Table, {
-          key: 21,
+          key: 22,
           record: props.record,
           columnsIndex: props.columnsIndex,
           variableList: props.variableList
         }, null, 8, ["record", "columnsIndex", "variableList"])) : createCommentVNode("", true),
         __props.record.type === "barChart" ? (openBlock(), createBlock(BarChart, {
-          key: 22,
+          key: 23,
           record: props.record,
           columnsIndex: props.columnsIndex,
           variableList: props.variableList
         }, null, 8, ["record", "columnsIndex", "variableList"])) : createCommentVNode("", true),
         __props.record.type === "pieChart" ? (openBlock(), createBlock(PieChart, {
-          key: 23,
+          key: 24,
           record: props.record,
           columnsIndex: props.columnsIndex,
           variableList: props.variableList
         }, null, 8, ["record", "columnsIndex", "variableList"])) : createCommentVNode("", true),
         __props.record.type === "lineChart" ? (openBlock(), createBlock(LineChart, {
-          key: 24,
+          key: 25,
           record: props.record,
           columnsIndex: props.columnsIndex,
           variableList: props.variableList
         }, null, 8, ["record", "columnsIndex", "variableList"])) : createCommentVNode("", true),
         __props.record.type === "barChart3D" ? (openBlock(), createBlock(BarChart3D, {
-          key: 25,
+          key: 26,
           record: props.record,
           columnsIndex: props.columnsIndex,
           variableList: props.variableList
         }, null, 8, ["record", "columnsIndex", "variableList"])) : createCommentVNode("", true),
         __props.record.type === "pieChart3D" ? (openBlock(), createBlock(PieChart3D, {
-          key: 26,
+          key: 27,
           record: props.record,
           columnsIndex: props.columnsIndex,
           variableList: props.variableList
         }, null, 8, ["record", "columnsIndex", "variableList"])) : createCommentVNode("", true),
         __props.record.type === "panorama" ? (openBlock(), createBlock(Panorama, {
-          key: 27,
+          key: 28,
           record: props.record,
           columnsIndex: props.columnsIndex,
           variableList: props.variableList
@@ -250,7 +272,7 @@ const _sfc_main = {
     };
   }
 };
-const FormItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-900eaa67"]]);
+const FormItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8af7e919"]]);
 export {
   FormItem as default
 };

package/dist/mobile/sun-card-design-mobile.es4.js

@@ -18,18 +18,20 @@ const _sfc_main = {
   emits: ["clickEvent"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "v1a254b20": mainPadding.value,
-      "v76e511da": mainJustifyContent.value,
-      "v74bb918c": lineWidth.value,
-      "v74b9b02c": lineBorderRadius.value,
-      "v4e6acb82": lineMarginRight.value,
-      "v7c77d78c": lineBackground.value,
-      "v5654939a": lineHeight.value,
-      "v1c7e0184": textColor.value,
-      "v658dff35": textFontSize.value,
-      "v1cb93240": textAlign.value,
-      "v3c1299b5": textDecoration.value,
-      "v508a1c31": textIndent.value
+      "v70234d73": mainPadding.value,
+      "v77825c27": mainJustifyContent.value,
+      "v65d2b24d": lineWidth.value,
+      "v75b8a177": lineBorderRadius.value,
+      "d3ad2756": lineMarginRight.value,
+      "v77d6e5f2": lineBackground.value,
+      "v3ab49d80": lineHeight.value,
+      "dc1d0b5e": textColor.value,
+      "v615f717c": textFontSize.value,
+      "dc583c1a": textAlign.value,
+      "v3e631282": textDecoration.value,
+      "v932df904": textIndent.value,
+      "v4ff6c00d": textLineHeight.value,
+      "v805803aa": textLetterSpacing.value
     }));
     const props = __props;
     const emit = __emit;
@@ -83,6 +85,8 @@ const _sfc_main = {
     const textAlign = computed(() => props.record.options.style.textAlign);
     const textDecoration = computed(() => props.record.options.style.textDecoration);
     const textIndent = computed(() => props.record.options.style.textIndent + "em");
+    const textLineHeight = computed(() => props.record.options.style.lineHeight);
+    const textLetterSpacing = computed(() => props.record.options.style.letterSpacing + "px");
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         props.record.options.hasLine ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true),
@@ -99,7 +103,7 @@ const _sfc_main = {
     };
   }
 };
-const Text = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-16114cf4"]]);
+const Text = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0f119d8f"]]);
 export {
   Text as default
 };