1.代码注释

src/components/model-article-list/model-article-list-setting.vue

@@ -10,7 +10,7 @@
 </template>
 <script setup lang="ts">
 /**
- * @description: 文章列表（切换）
+ * @description: 文章选项卡列表（设置）
  * @param type{String} 类型是进入内容组件还是样式组件
  * @param value{Object} 样式数据
  */

src/components/model-article-tabs/index.vue

@@ -12,7 +12,7 @@
 import { common_img_computer, common_styles_computer } from '@/utils';
 import { cloneDeep } from 'lodash';
 /**
- * @description: 文章选项啊哭列表（渲染）
+ * @description: 文章选项卡列表（渲染）
  * @param value{Object} 样式数据
  */
 const props = defineProps({

src/components/model-article-tabs/model-article-tabs-content.vue

@@ -97,9 +97,14 @@
 </template>
 <script setup lang="ts">
 import { get_math, tabs_style } from '@/utils';
-import ArticleAPI from '@/api/article';
 import { commonStore } from '@/store';
 const common_store = commonStore();
+/**
+ * @description: 文章选项卡列表（内容）
+ * @param value{Object} 内容数据
+ * @param tabsStyle{Object} tabs样式数据
+ * @param defaultConfig{Object} 默认配置
+ */
 const props = defineProps({
     value: {
         type: Object,
@@ -167,6 +172,7 @@ onMounted(() => {
         }
     });
 });
+// 监听tabs_theme_list的变化
 const article_theme_change = (val: any) => {
     if (val == '3' || val == '4') {
         form.field_show = ['1'];
@@ -194,6 +200,8 @@ const article_theme_change = (val: any) => {
 
 // 开启关闭链接
 const url_value_dialog_visible = ref(false);
+
+// 选项卡点击
 const tabs_list_click = (item: any, index: number) => {
     form.tabs_active_index = index;
 };
@@ -211,11 +219,12 @@ const tabs_list_remove = (index: number) => {
         ElMessage.warning('至少保留一个选项卡');
     }
 };
+// 拖拽排序
 const tabs_list_sort = (item: any) => {
     // 拖拽完成后更新数组
     form.tabs_list = item;
 };
-
+// 添加选项卡
 const tabs_add = () => {
     form.tabs_list.push({
         id: get_math(),
@@ -236,12 +245,15 @@ const tabs_add = () => {
 const data_list_remove = (index: number, article_index: number) => {
     form.tabs_list[article_index].data_list.splice(index, 1);
 };
+// 拖拽排序
 const data_list_sort = (item: any, index: number) => {
     form.tabs_list[index].data_list = item;
 };
 
 const url_value_multiple_bool = ref(true);
 const data_list_replace_index = ref(0);
+
+// 替换
 const data_list_replace = (index: number) => {
     data_list_replace_index.value = index;
     url_value_multiple_bool.value = false;
@@ -249,11 +261,13 @@ const data_list_replace = (index: number) => {
 };
 
 const article_index = ref(0);
+// 添加文章
 const article_add = (index: number) => {
     url_value_multiple_bool.value = true;
     url_value_dialog_visible.value = true;
     article_index.value = index;
 };
+// 添加回调
 const url_value_dialog_call_back = (item: any[]) => {
     if (url_value_multiple_bool.value) {
         item.forEach((child: any) => {
@@ -275,10 +289,13 @@ const url_value_dialog_call_back = (item: any[]) => {
 };
 
 const styles = reactive(props.tabStyle);
+// 颜色主题切换
 const tabs_theme_change = (val: string | number | boolean | undefined): void => {
     styles.tabs_color_checked = tabs_style(styles.tabs_color_checked, val);
 };
+// 监听是否开启沉浸式
 const is_immersion_model = computed(() => common_store.is_immersion_model);
+// 监听沉浸式开启
 watchEffect(() => {
     if (is_immersion_model.value) {
         form.tabs_top_up = '0';

src/components/model-article-tabs/model-article-tabs-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-article-tabs/model-article-tabs-styles.vue

@@ -84,6 +84,13 @@
     </div>
 </template>
 <script setup lang="ts">
+/**
+ * @description: 文章选项卡列表（样式）
+ * @param value{Object} 样式数据
+ * @param content{Object} 内容数据
+ * @param defaultConfig{Object} 默认配置
+ * @param tabsStyle{String} 选项卡风格
+ */
 const props = defineProps({
     value: {
         type: Object,
@@ -113,7 +120,9 @@ const state = reactive({
 });
 // 如果需要解构，确保使用toRefs
 const { form, data } = toRefs(state);
+// 主题
 const theme = computed(() => data.value.article_theme);
+// 兼容旧数据
 if (theme.value == '0') {
     if (form.value.img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
         form.value.img_radius.radius = props.defaultConfig.img_radius_0;
@@ -131,10 +140,12 @@ if (theme.value == '0') {
         form.value.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
     }
 }
+//  选项卡选中事件
 const tabs_checked_event = (arry: string[], type: number) => {
     form.value.tabs_checked = arry;
     form.value.tabs_direction = type.toString();
 };
+// 通用样式回调
 const common_styles_update = (val: Object) => {
     form.value.common_style = val;
 };

src/components/model-auxiliary-line/index.vue

@@ -7,6 +7,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,
@@ -17,6 +21,7 @@ const props = defineProps({
 const style = ref('');
 const style_container = ref('');
 const style_img_container = ref('');
+// 监听数据变化
 watch(
     props.value,
     (newVal, oldValue) => {

src/components/model-auxiliary-line/model-auxiliary-line-content.vue

@@ -21,6 +21,10 @@
     </div>
 </template>
 <script setup lang="ts">
+/**
+ * @description: 辅助线（内容）
+ * @param value{Object} 内容数据
+ */
 const props = defineProps({
     value: {
         type: Object,
@@ -28,6 +32,7 @@ const props = defineProps({
     },
 });
 const form = reactive(props.value);
+// 线条样式切换
 const line_change = (val: any) => {
     form.styles = val;
 };

src/components/model-auxiliary-line/model-auxiliary-line-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-auxiliary-line/model-auxiliary-line-styles.vue

@@ -16,6 +16,10 @@
     </div>
 </template>
 <script setup lang="ts">
+/**
+ * @description: 辅助线（样式）
+ * @param value{Object} 样式数据
+ */
 const props = defineProps({
     value: {
         type: Object,
@@ -35,6 +39,7 @@ const state = reactive({
 });
 // 如果需要解构，确保使用toRefs
 const { form } = toRefs(state);
+// 公共样式的变化回调
 const common_styles_update = (val: Object) => {
     form.value.common_style = val;
 };

src/components/model-coupon/index.vue

@@ -145,6 +145,10 @@ import CouponAPI from '@/api/coupon';
 import { commonStore } from '@/store';
 const common_store = commonStore();
 const currency_symbol = common_store.common.config.currency_symbol;
+/**
+ * @description: 优惠券（渲染）
+ * @param value{Object} 样式数据
+ */
 const props = defineProps({
     value: {
         type: Object,
@@ -188,6 +192,7 @@ const theme_bg_img = ref<themeBgImg>({
     url_2: ``,
     url_3: ``,
 });
+// 初始化数据
 onMounted(() => {
     if (!isEmpty(form.value.data_list) && form.value.data_type == '1') {
         data_list.value = form.value.data_list;
@@ -206,6 +211,7 @@ onMounted(() => {
         url_3: form.value.theme_5_static_img[0].url,
     };
 });
+// 获取优惠券列表
 const get_coupon = () => {
     const { number, type } = form.value;
     const params = {
@@ -222,10 +228,12 @@ const get_coupon = () => {
         }
     });
 };
+// 监听数据类型
 const data_list_computer = computed(() => {
     const { data_type, type, number, data_list } = form.value;
     return { data_type, type, number, data_list };
 });
+// 监听数据类型变化
 watch(
     () => data_list_computer.value,
     (new_value) => {
@@ -241,7 +249,9 @@ watch(
     },
     { deep: true }
 );
+// 主题
 const theme = computed(() => props.value?.content?.theme);
+// 主题样式
 const theme_style = computed(() => {
     const new_background = gradient_computer({ color_list: props.value?.style?.background, direction: props.value?.style?.direction }, false);
     const new_background_inside = gradient_computer({ color_list: props.value?.style?.background_inside, direction: props.value?.style?.direction_inside }, false);
@@ -263,9 +273,11 @@ const theme_style = computed(() => {
         ...(!['1', '2', '3', '5', '6', '7'].includes(theme.value) && { content_desc_color: props.value?.style?.content_desc_color }),
     };
 });
+// 主题3边框样式
 const theme_3_border_style = computed(() => {
     return props.value?.style?.background[0].color;
 });
+// 主题7背景样式
 const theme_7_background_style = computed(() => {
     if (props.value?.style?.common_style.color_list.length > 0) {
         return props.value?.style?.common_style.color_list[0].color;

src/components/model-coupon/model-coupon-content.vue

@@ -54,6 +54,12 @@
 import { online_url, is_obj_empty } from '@/utils';
 import { commonStore } from '@/store';
 const common_store = commonStore();
+/**
+ * @description: 文章选项卡列表（内容）
+ * @param value{Object} 内容数据
+ * @param styles{Object} 样式数据
+ * @param defaultConfig{Object} 默认配置
+ */
 const props = defineProps({
     value: {
         type: Object,
@@ -84,7 +90,9 @@ const base_list = reactive({
     coupon_type_list: [] as select_2[],
 });
 onMounted(async () => {
+    // 获取图片地址
     new_url.value = await online_url('/static/plugins/coupon/images/diy/').then((res) => res);
+    // 添加图片地址
     base_list.themeList.forEach((item) => {
         item.url = `${new_url.value}${item.url}`;
     });
@@ -96,18 +104,23 @@ onMounted(async () => {
     });
 });
 const emit = defineEmits(['update:change-theme']);
+// 触发主题切换事件
 const themeChange = (val: string) => {
     emit('update:change-theme', val);
 };
+// 移除
 const remove = (index: number) => {
     form.value.data_list.splice(index, 1);
 };
+// 排序
 const on_sort = (item: any) => {
     form.value.data_list = item;
 };
+// 新增
 const add = () => {
     url_value_dialog_visible.value = true;
 };
+// 弹窗回调
 const url_value_dialog_call_back = (item: any[]) => {
     item.forEach((child: any) => {
         form.value.data_list.push(child);

src/components/model-coupon/model-coupon-setting.vue

@@ -10,6 +10,11 @@
 </template>
 <script setup lang="ts">
 import { online_url } from '@/utils';
+/**
+ * @description: 优惠券（设置）
+ * @param type{String} 类型（1：内容，2：样式）
+ * @param value{Object} 传过来的数据，用于数据渲染
+ */
 const props = defineProps({
     type: {
         type: String,

src/views/layout/components/main/index.scss

@@ -260,6 +260,7 @@
 @media screen and (max-width: 1560px) {
     .siderbar {
         width: 32rem;
+        padding: 0.5rem 1rem;
     }
     .drawer-container {
         width: 0 !important;