From f18e756514f192670f4f9ca4fe018a483f220b94 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Fri, 18 Oct 2024 15:57:45 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BB=A3=E7=A0=81=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-article-tabs/index.vue            |  4 ++--
 .../model-article-tabs/model-article-tabs-content.vue  |  2 +-
 .../model-article-tabs/model-article-tabs-setting.vue  |  2 +-
 .../model-article-tabs/model-article-tabs-styles.vue   |  2 +-
 src/components/model-coupon/index.vue                  |  2 +-
 src/components/model-coupon/model-coupon-setting.vue   |  3 +++
 src/components/model-coupon/model-coupon-styles.vue    |  9 +++++++++
 src/components/model-hot-zone/index.vue                | 10 ++++++++--
 .../model-hot-zone/model-hot-zone-content.vue          |  6 +++++-
 .../model-hot-zone/model-hot-zone-setting.vue          |  5 +++++
 .../model-hot-zone/model-hot-zone-styles.vue           |  5 +++++
 src/components/model-rich-text/index.vue               |  4 ++++
 .../model-rich-text/model-rich-text-content.vue        |  8 ++++++++
 .../model-rich-text/model-rich-text-setting.vue        |  5 +++++
 .../model-rich-text/model-rich-text-styles.vue         |  5 +++++
 src/components/model-user-info/index.vue               |  6 ++++++
 .../model-user-info/model-user-info-content.vue        |  4 ++++
 .../model-user-info/model-user-info-setting.vue        |  5 +++++
 .../model-user-info/model-user-info-styles.vue         |  7 ++++++-
 src/components/model-video/index.vue                   |  4 ++++
 src/components/model-video/model-video-content.vue     |  4 ++++
 src/components/model-video/model-video-setting.vue     |  5 +++++
 src/components/model-video/model-video-styles.vue      |  5 +++++
 23 files changed, 102 insertions(+), 10 deletions(-)

diff --git a/src/components/model-article-tabs/index.vue b/src/components/model-article-tabs/index.vue
index b9c80382..246789f1 100644
--- a/src/components/model-article-tabs/index.vue
+++ b/src/components/model-article-tabs/index.vue
@@ -12,8 +12,8 @@
 import { common_img_computer, common_styles_computer } from '@/utils';
 import { cloneDeep } from 'lodash';
 /**
- * @description: 文章选项卡列表（渲染）
- * @param value{Object} 样式数据
+ * @description: 文章选项卡列表 （渲染）
+ * @param value{Object} 传过来的数据，用于数据渲染
  */
 const props = defineProps({
     value: {
diff --git a/src/components/model-article-tabs/model-article-tabs-content.vue b/src/components/model-article-tabs/model-article-tabs-content.vue
index be19f7d6..9d2b51f4 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -100,7 +100,7 @@ import { get_math, tabs_style } from '@/utils';
 import { commonStore } from '@/store';
 const common_store = commonStore();
 /**
- * @description: 文章选项卡列表（内容）
+ * @description: 文章选项卡列表 （内容）
  * @param value{Object} 内容数据
  * @param tabsStyle{Object} tabs样式数据
  * @param defaultConfig{Object} 默认配置
diff --git a/src/components/model-article-tabs/model-article-tabs-setting.vue b/src/components/model-article-tabs/model-article-tabs-setting.vue
index 22038731..6708f36a 100644
--- a/src/components/model-article-tabs/model-article-tabs-setting.vue
+++ b/src/components/model-article-tabs/model-article-tabs-setting.vue
@@ -10,7 +10,7 @@
 </template>
 <script setup lang="ts">
 /**
- * @description: 文章选项卡列表（设置）
+ * @description: 文章选项卡列表 （设置）
  * @param type{String} 类型（1：内容，2：样式）
  * @param value{Object} 传过来的数据，用于数据渲染
  */
diff --git a/src/components/model-article-tabs/model-article-tabs-styles.vue b/src/components/model-article-tabs/model-article-tabs-styles.vue
index 5f745786..789078b4 100644
--- a/src/components/model-article-tabs/model-article-tabs-styles.vue
+++ b/src/components/model-article-tabs/model-article-tabs-styles.vue
@@ -85,7 +85,7 @@
 </template>
 <script setup lang="ts">
 /**
- * @description: 文章选项卡列表（样式）
+ * @description: 文章选项卡列表 （样式）
  * @param value{Object} 样式数据
  * @param content{Object} 内容数据
  * @param defaultConfig{Object} 默认配置
diff --git a/src/components/model-coupon/index.vue b/src/components/model-coupon/index.vue
index 086aebb8..a0bfdce6 100644
--- a/src/components/model-coupon/index.vue
+++ b/src/components/model-coupon/index.vue
@@ -147,7 +147,7 @@ const common_store = commonStore();
 const currency_symbol = common_store.common.config.currency_symbol;
 /**
  * @description: 优惠券（渲染）
- * @param value{Object} 样式数据
+ * @param value{Object} 传过来的数据，用于数据渲染
  */
 const props = defineProps({
     value: {
diff --git a/src/components/model-coupon/model-coupon-setting.vue b/src/components/model-coupon/model-coupon-setting.vue
index ea6d79b8..f04fc500 100644
--- a/src/components/model-coupon/model-coupon-setting.vue
+++ b/src/components/model-coupon/model-coupon-setting.vue
@@ -27,6 +27,7 @@ const props = defineProps({
 });
 const form = ref(props.value);
 const new_url = ref('');
+// 默认配置
 const default_config = ref({
     style: {
         theme_1: {
@@ -205,10 +206,12 @@ const default_config = ref({
         },
     },
 });
+// 获取图片路径
 onMounted(async () => {
     new_url.value = await online_url('/static/plugins/coupon/images/diy/').then((res) => res);
     default_config.value.common_style.theme_2.background_img = [{ url: new_url.value + 'theme-2-bg.png' }];
 });
+// 切换主题
 const change_theme = (val: string) => {
     if (val) {
         if (val == '2') {
diff --git a/src/components/model-coupon/model-coupon-styles.vue b/src/components/model-coupon/model-coupon-styles.vue
index 19f75510..6d3b3ded 100644
--- a/src/components/model-coupon/model-coupon-styles.vue
+++ b/src/components/model-coupon/model-coupon-styles.vue
@@ -61,6 +61,11 @@
 </template>
 <script setup lang="ts">
 import { cloneDeep } from 'lodash';
+/**
+ * @description: 优惠券（样式）
+ * @param value{Object} 样式数据
+ * @param theme{String} 主题
+ */
 const props = defineProps({
     value: {
         type: Object,
@@ -76,22 +81,26 @@ const emit = defineEmits(['update:value']);
 let form = reactive(props.value);
 let clone_form = cloneDeep(props.value);
 
+// 背景色
 const background_event = (arry: color_list[], type: number) => {
     form.background = arry;
     form.direction = type.toString();
     emit('update:value', form);
 };
+// 内背景色
 const background_inside_event = (arry: color_list[], type: number) => {
     form.background_inside = arry;
     form.direction_inside = type.toString();
     emit('update:value', form);
 };
 
+// 按钮背景色
 const btn_background_event = (arry: color_list[], type: number) => {
     form.btn_background = arry;
     form.btn_direction = type.toString();
     emit('update:value', form);
 };
+// 公共样式回调
 const common_styles_update = (val: Object) => {
     form.common_style = val;
 };
diff --git a/src/components/model-hot-zone/index.vue b/src/components/model-hot-zone/index.vue
index 5a6f78eb..075a97fc 100644
--- a/src/components/model-hot-zone/index.vue
+++ b/src/components/model-hot-zone/index.vue
@@ -10,6 +10,10 @@
 </template>
 <script setup lang="ts">
 import { common_img_computer, common_styles_computer } from '@/utils';
+/**
+ * @description: 热区（渲染）
+ * @param value{Object} 传过来的数据，用于数据渲染
+ */
 const props = defineProps({
     value: {
         type: Object,
@@ -45,7 +49,7 @@ watch(
     },
     { immediate: true, deep: true }
 );
-
+// 图片加载完毕
 const on_load_img = () => {
     container_ref_h.value = containerRef.value?.clientHeight || 0;
     container_ref_w.value = containerRef.value?.clientWidth || 0;
@@ -57,6 +61,7 @@ const w_scale1 = computed(() => {
     // 此处使用容器高度，因为图片是按照容器高度等比缩放的
     return container_ref_h.value / img_width.value;
 });
+// containerRef的宽高
 const h_scale1 = computed(() => {
     return container_ref_h.value / img_height.value;
 });
@@ -64,10 +69,11 @@ const h_scale1 = computed(() => {
 const w_scale2 = computed(() => {
     return hot_ref_w.value / container_ref_h.value;
 });
+//  hotRef的宽高
 const h_scale2 = computed(() => {
     return hot_ref_h.value / container_ref_h.value;
 });
-
+// 计算坐标和宽高的比例
 const rect_style = computed(() => {
     return (start: rectCoords, end: rectCoords) => {
         return `left: ${start.x * w_scale1.value * w_scale2.value}px;top: ${start.y * h_scale1.value * h_scale2.value}px;width: ${Math.max(end.width * w_scale1.value * w_scale2.value, 1)}px;height: ${Math.max(end.height * h_scale1.value * h_scale2.value, 1)}px;display: flex;`;
diff --git a/src/components/model-hot-zone/model-hot-zone-content.vue b/src/components/model-hot-zone/model-hot-zone-content.vue
index 675dcfbe..cc23bee9 100644
--- a/src/components/model-hot-zone/model-hot-zone-content.vue
+++ b/src/components/model-hot-zone/model-hot-zone-content.vue
@@ -12,6 +12,10 @@
     </div>
 </template>
 <script setup lang="ts">
+/**
+ * @description: 热曲（内容）
+ * @param value{Object} 内容数据
+ */
 const props = defineProps({
     value: {
         type: Object,
@@ -22,7 +26,7 @@ const props = defineProps({
     },
 });
 const form = ref(props.value);
-
+// 监听图片上传
 const update_upload_data = (val: any) => {
     if (val.length > 0) {
         form.value.hot.img = val[0].url;
diff --git a/src/components/model-hot-zone/model-hot-zone-setting.vue b/src/components/model-hot-zone/model-hot-zone-setting.vue
index 54bb1213..822c4974 100644
--- a/src/components/model-hot-zone/model-hot-zone-setting.vue
+++ b/src/components/model-hot-zone/model-hot-zone-setting.vue
@@ -9,6 +9,11 @@
     </div>
 </template>
 <script setup lang="ts">
+/**
+ * @description: 热区（设置）
+ * @param type{String} 类型（1：内容，2：样式）
+ * @param value{Object} 传过来的数据，用于数据渲染
+ */
 const props = defineProps({
     type: {
         type: String,
diff --git a/src/components/model-hot-zone/model-hot-zone-styles.vue b/src/components/model-hot-zone/model-hot-zone-styles.vue
index 412cb369..0f2b3468 100644
--- a/src/components/model-hot-zone/model-hot-zone-styles.vue
+++ b/src/components/model-hot-zone/model-hot-zone-styles.vue
@@ -4,6 +4,10 @@
     </div>
 </template>
 <script setup lang="ts">
+/**
+ * @description: 热区（样式）
+ * @param value{Object} 样式数据
+ */
 const props = defineProps({
     value: {
         type: Object,
@@ -14,6 +18,7 @@ const props = defineProps({
 });
 // 默认值
 let form = ref(props.value);
+// 公共样式回调
 const common_styles_update = (val: Object) => {
     form.value.common_style = val;
 };
diff --git a/src/components/model-rich-text/index.vue b/src/components/model-rich-text/index.vue
index 099e4d5f..41daeb8b 100644
--- a/src/components/model-rich-text/index.vue
+++ b/src/components/model-rich-text/index.vue
@@ -9,6 +9,10 @@
 import { common_img_computer, common_styles_computer } from '@/utils';
 // 引入dompurify模块 安全地清理HTML内容，确保插入到DOM中的内容不会导致XSS攻击。
 import DOMPurify from 'dompurify';
+/**
+ * @description: 富文本（渲染）
+ * @param value{Object} 传过来的数据，用于数据渲染
+ */
 const props = defineProps({
     value: {
         type: Object,
diff --git a/src/components/model-rich-text/model-rich-text-content.vue b/src/components/model-rich-text/model-rich-text-content.vue
index 0991418a..b5cc39f1 100644
--- a/src/components/model-rich-text/model-rich-text-content.vue
+++ b/src/components/model-rich-text/model-rich-text-content.vue
@@ -15,6 +15,10 @@
 <script setup lang="ts">
 import '@wangeditor/editor/dist/css/style.css'; // 引入 css
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+/**
+ * @description: 富文本（内容）
+ * @param value{Object} 内容数据
+ */
 const props = defineProps({
     value: {
         type: Object,
@@ -40,6 +44,7 @@ const rich_upload_type = ref('img');
 interface InsertFnType {
     (url: string, alt?: string, link?: string): void;
 }
+// 编辑器配置
 const editor_config = ref({
     placeholder: '请输入内容...',
     MENU_CONF: {
@@ -66,14 +71,17 @@ const editor_config = ref({
 });
 // 获取到对应的触发事件
 const upload_insert = ref<any>(null);
+// 创建编辑器实例
 const handle_created = (editor: any) => {
     editor_ref.value = editor; // 记录 editor 实例，重要！
 };
 
 const emit = defineEmits(['update:value']);
+// 内容改变
 const handle_change = (editor: any) => {
     form.html = editor.getHtml();
 };
+// 上传列表改变
 const upload_list_change = (arry: uploadList[]) => {
     const editor = editor_ref.value;
     let new_html = '';
diff --git a/src/components/model-rich-text/model-rich-text-setting.vue b/src/components/model-rich-text/model-rich-text-setting.vue
index b7b69085..d9a3705e 100644
--- a/src/components/model-rich-text/model-rich-text-setting.vue
+++ b/src/components/model-rich-text/model-rich-text-setting.vue
@@ -9,6 +9,11 @@
     </div>
 </template>
 <script setup lang="ts">
+/**
+ * @description: 富文本（设置）
+ * @param type{String} 类型（1：内容，2：样式）
+ * @param value{Object} 传过来的数据，用于数据渲染
+ */
 const props = defineProps({
     type: {
         type: String,
diff --git a/src/components/model-rich-text/model-rich-text-styles.vue b/src/components/model-rich-text/model-rich-text-styles.vue
index 435c7adc..58f0944a 100644
--- a/src/components/model-rich-text/model-rich-text-styles.vue
+++ b/src/components/model-rich-text/model-rich-text-styles.vue
@@ -4,6 +4,10 @@
     </div>
 </template>
 <script setup lang="ts">
+/**
+ * @description: 富文本（样式）
+ * @param value{Object} 样式数据
+ */
 const props = defineProps({
     value: {
         type: Object,
@@ -15,6 +19,7 @@ const props = defineProps({
 const emit = defineEmits(['update:value']);
 // 默认值
 let form = reactive(props.value);
+// 公共样式回调
 const common_styles_update = (val: Object) => {
     form.common_style = val;
 };
diff --git a/src/components/model-user-info/index.vue b/src/components/model-user-info/index.vue
index cc4746c8..a2dc5288 100644
--- a/src/components/model-user-info/index.vue
+++ b/src/components/model-user-info/index.vue
@@ -31,6 +31,10 @@
 </template>
 <script setup lang="ts">
 import { common_styles_computer, gradient_computer, common_img_computer } from '@/utils';
+/**
+ * @description: 用户信息（渲染）
+ * @param value{Object} 传过来的数据，用于数据渲染
+ */
 const props = defineProps({
     value: {
         type: Object,
@@ -58,6 +62,7 @@ const icon_setting = ref<icon_params[]>([
     { id: '1', img: [], icon: '', link: {} },
     { id: '2', img: [], icon: '', link: {} },
 ]);
+// 数据
 const base_data = reactive({
     // 头像大小
     user_avatar_size: '60',
@@ -102,6 +107,7 @@ const user_name_style = ref('');
 const number_code_style = ref('');
 const stats_name_style = ref('');
 const stats_number_style = ref('');
+// 监听
 watch(
     props.value,
     (newVal, oldValue) => {
diff --git a/src/components/model-user-info/model-user-info-content.vue b/src/components/model-user-info/model-user-info-content.vue
index 9f15ad25..71025de5 100644
--- a/src/components/model-user-info/model-user-info-content.vue
+++ b/src/components/model-user-info/model-user-info-content.vue
@@ -28,6 +28,10 @@
 </template>
 <script setup lang="ts">
 import { get_math } from '@/utils';
+/**
+ * @description: 用户信息（内容）
+ * @param value{Object} 内容数据
+ */
 const props = defineProps({
     value: {
         type: Object,
diff --git a/src/components/model-user-info/model-user-info-setting.vue b/src/components/model-user-info/model-user-info-setting.vue
index 5e62a262..d977123a 100644
--- a/src/components/model-user-info/model-user-info-setting.vue
+++ b/src/components/model-user-info/model-user-info-setting.vue
@@ -9,6 +9,11 @@
     </div>
 </template>
 <script setup lang="ts">
+/**
+ * @description: 用户信息（设置）
+ * @param type{String} 类型（1：内容，2：样式）
+ * @param value{Object} 传过来的数据，用于数据渲染
+ */
 const props = defineProps({
     type: {
         type: String,
diff --git a/src/components/model-user-info/model-user-info-styles.vue b/src/components/model-user-info/model-user-info-styles.vue
index 29173b9c..b5cc5142 100644
--- a/src/components/model-user-info/model-user-info-styles.vue
+++ b/src/components/model-user-info/model-user-info-styles.vue
@@ -99,7 +99,10 @@
     </div>
 </template>
 <script setup lang="ts">
-import { omit } from 'lodash';
+/**
+ * @description: 用户信息 （样式）
+ * @param value{Object} 样式数据
+ */
 const props = defineProps({
     value: {
         type: Object,
@@ -112,10 +115,12 @@ const font_weight = reactive([
 ]);
 // 默认值
 let form = ref(props.value);
+// 多颜色选择器事件
 const mult_color_picker_event = (arry: string[], type: number) => {
     form.value.number_code_color_list = arry;
     form.value.number_code_direction = type.toString();
 };
+// 公共样式回调
 const common_styles_update = (val: Object) => {
     form.value.common_style = val;
 };
diff --git a/src/components/model-video/index.vue b/src/components/model-video/index.vue
index 1bb0325f..d4657769 100644
--- a/src/components/model-video/index.vue
+++ b/src/components/model-video/index.vue
@@ -15,6 +15,10 @@
 </template>
 <script setup lang="ts">
 import { common_styles_computer, common_img_computer } from '@/utils';
+/**
+ * @description: 视频 （渲染）
+ * @param value{Object} 传过来的数据，用于数据渲染
+ */
 const props = defineProps({
     value: {
         type: Object,
diff --git a/src/components/model-video/model-video-content.vue b/src/components/model-video/model-video-content.vue
index 50c7027b..d7b91646 100644
--- a/src/components/model-video/model-video-content.vue
+++ b/src/components/model-video/model-video-content.vue
@@ -21,6 +21,10 @@
     </div>
 </template>
 <script setup lang="ts">
+/**
+ * @description: 视频 （内容）
+ * @param value{Object} 内容数据
+ */
 const props = defineProps({
     value: {
         type: Object,
diff --git a/src/components/model-video/model-video-setting.vue b/src/components/model-video/model-video-setting.vue
index 6450fd27..0fc4fce1 100644
--- a/src/components/model-video/model-video-setting.vue
+++ b/src/components/model-video/model-video-setting.vue
@@ -9,6 +9,11 @@
     </div>
 </template>
 <script setup lang="ts">
+/**
+ * @description: 视频 （设置）
+ * @param type{String} 类型（1：内容，2：样式）
+ * @param value{Object} 传过来的数据，用于数据渲染
+ */
 const props = defineProps({
     type: {
         type: String,
diff --git a/src/components/model-video/model-video-styles.vue b/src/components/model-video/model-video-styles.vue
index 435c7adc..f3493eb9 100644
--- a/src/components/model-video/model-video-styles.vue
+++ b/src/components/model-video/model-video-styles.vue
@@ -4,6 +4,10 @@
     </div>
 </template>
 <script setup lang="ts">
+/**
+ * @description: 视频 （样式）
+ * @param value{Object} 样式数据
+ */
 const props = defineProps({
     value: {
         type: Object,
@@ -15,6 +19,7 @@ const props = defineProps({
 const emit = defineEmits(['update:value']);
 // 默认值
 let form = reactive(props.value);
+// 公共样式回调
 const common_styles_update = (val: Object) => {
     form.common_style = val;
 };