From e8c010c88387f0a1c6e635c764c1c9e68c4c4319 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Wed, 11 Sep 2024 11:35:24 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/common-styles/index.vue | 76 +++++++++----------
 src/components/model-article-tabs/index.vue   |  6 +-
 2 files changed, 35 insertions(+), 47 deletions(-)

diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index 025d6eba..5e3bc385 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -65,7 +65,32 @@ import { pick } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
-        default: () => ({}),
+        default: () => ({
+            direction: '180deg',
+            background_img: [] as uploadList[],
+            color_list: [{ color: '', color_percentage: undefined }] as color_list[],
+            background_img_style: 2,
+            padding: 0,
+            padding_top: 0,
+            padding_bottom: 0,
+            padding_left: 0,
+            padding_right: 0,
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+            box_shadow_color: '',
+            box_shadow_x: 0,
+            box_shadow_y: 0,
+            box_shadow_blur: 0,
+            box_shadow_spread: 0,
+        }),
     },
     isMargin: {
         type: Boolean,
@@ -84,63 +109,30 @@ const props = defineProps({
         default: true,
     },
 });
-// 初始化表单数据
-const init_form = reactive({
-    direction: '180deg',
-    background_img: [] as uploadList[],
-    color_list: [{ color: '', color_percentage: undefined }] as color_list[],
-    background_img_style: 2,
-    padding: 0,
-    padding_top: 0,
-    padding_bottom: 0,
-    padding_left: 0,
-    padding_right: 0,
-    margin: 0,
-    margin_top: 0,
-    margin_bottom: 0,
-    margin_left: 0,
-    margin_right: 0,
-    radius: 0,
-    radius_top_left: 0,
-    radius_top_right: 0,
-    radius_bottom_left: 0,
-    radius_bottom_right: 0,
-    box_shadow_color: '',
-    box_shadow_x: 0,
-    box_shadow_y: 0,
-    box_shadow_blur: 0,
-    box_shadow_spread: 0,
-});
 // value 和初始化数据合并数据
-let form = reactive(Object.assign({}, init_form, props.value));
+let form = ref(props.value);
 const emit = defineEmits(['update:value']);
 
 const mult_color_picker_event = (arry: color_list[], type: number) => {
-    form.color_list = arry;
-    form.direction = type.toString();
-    emit('update:value', form);
+    form.value.color_list = arry;
+    form.value.direction = type.toString();
 };
 const background_img_style_change = (style: any) => {
-    form.background_img_style = style;
-    emit('update:value', form);
+    form.value.background_img_style = style;
 };
 const background_img_change = (arry: uploadList[]) => {
-    form.background_img = arry;
-    emit('update:value', form);
+    form.value.background_img = arry;
 };
 const radius_change = (radius: any) => {
-    form = Object.assign(form, pick(radius, ['radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right']));
-    emit('update:value', form);
+    form.value = Object.assign(form, pick(radius, ['radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right']));
 };
 
 const margin_change = (margin: any) => {
-    form = Object.assign(form, pick(margin, ['margin', 'margin_top', 'margin_bottom', 'margin_left', 'margin_right']));
-    emit('update:value', form);
+    form.value = Object.assign(form, pick(margin, ['margin', 'margin_top', 'margin_bottom', 'margin_left', 'margin_right']));
 };
 
 const padding_change = (padding: any) => {
-    form = Object.assign(form, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
-    emit('update:value', form);
+    form.value = Object.assign(form, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/model-article-tabs/index.vue b/src/components/model-article-tabs/index.vue
index 8ead6ff1..d0abd43c 100644
--- a/src/components/model-article-tabs/index.vue
+++ b/src/components/model-article-tabs/index.vue
@@ -38,8 +38,4 @@ watch(
     { immediate: true, deep: true }
 );
 </script>
-<style lang="scss" scoped>
-.video {
-    height: 22rem;
-}
-</style>
+<style lang="scss" scoped></style>