1.代码注释

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: {

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} 默认配置

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} 传过来的数据，用于数据渲染
  */

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} 默认配置

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: {

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') {

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

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

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;

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,

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

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,

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 = '';

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,

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

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) => {

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,

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,

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

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,

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,

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,

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