From e9e1c6d0e62f7198f7f519f862d2fe1cac985c65 Mon Sep 17 00:00:00 2001
From: zhuzhutx <867963316@qq.com>
Date: Mon, 22 Aug 2022 09:14:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=A7=BB=E9=99=A4=E5=8D=95?=
 =?UTF-8?q?=E4=B8=AA=E7=BB=84=E4=BB=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/style/ButtonStyle.vue | 12 +++++++++-
 src/components/style/ImageStyle.vue  | 14 ++++++++++--
 src/components/style/LinkStyle.vue   | 12 +++++++++-
 src/components/style/PageStyle.vue   | 34 +++++++++++++++-------------
 src/components/style/TextStyle.vue   | 12 +++++++++-
 src/components/style/VideoStyle.vue  | 12 +++++++++-
 src/store/index.ts                   | 15 ++++++++++--
 7 files changed, 87 insertions(+), 24 deletions(-)

diff --git a/src/components/style/ButtonStyle.vue b/src/components/style/ButtonStyle.vue
index 2b4b923..9948917 100644
--- a/src/components/style/ButtonStyle.vue
+++ b/src/components/style/ButtonStyle.vue
@@ -81,6 +81,7 @@
     </el-form>
     <div style="text-align: center">
       <el-button type="primary" icon="Refresh" @click="updateConf(form, props.index)">更新</el-button>
+      <el-button type="danger" icon="Delete" @click="removeComponent(props.index)">移除</el-button>
     </div>
   </div>
 </template>
@@ -99,7 +100,7 @@ const mainStore = userMainStore();
 
 const form = reactive(utils.deepCopy(props.data))
 
-function updateConf(conf: Object, index: number) {
+function updateConf(conf: Object, index: number): void {
   /**
    * 触发更新tList中对应组件配置的action
    *
@@ -108,6 +109,15 @@ function updateConf(conf: Object, index: number) {
    */
   mainStore.updateConfig(utils.deepCopy(conf), index);
 }
+
+function removeComponent(index: number): void {
+  /**
+   * 触发删除tList中对应组件的action
+   *
+   * @param {number} index 组件在tList中的位置
+   */
+  mainStore.deleteComponent(index);
+}
 </script>
 
 <script lang="ts">
diff --git a/src/components/style/ImageStyle.vue b/src/components/style/ImageStyle.vue
index 1fe575b..5b5acc2 100644
--- a/src/components/style/ImageStyle.vue
+++ b/src/components/style/ImageStyle.vue
@@ -35,10 +35,11 @@
           </el-radio-button>
         </el-radio-group>
       </el-form-item>
-      
+
     </el-form>
     <div style="text-align: center">
       <el-button type="primary" icon="Refresh" @click="updateConf(form, props.index)">更新</el-button>
+      <el-button type="danger" icon="Delete" @click="removeComponent(props.index)">移除</el-button>
     </div>
   </div>
 </template>
@@ -58,7 +59,7 @@ const mainStore = userMainStore();
 const form = reactive(utils.deepCopy(props.data))
 const fits: Array<string> = ['fill', 'contain', 'cover', 'none', 'scale-down']
 
-function updateConf(conf: Object, index: number) {
+function updateConf(conf: Object, index: number): void {
   /**
    * 触发更新tList中对应组件配置的action
    *
@@ -67,6 +68,15 @@ function updateConf(conf: Object, index: number) {
    */
   mainStore.updateConfig(utils.deepCopy(conf), index);
 }
+
+function removeComponent(index: number): void {
+  /**
+   * 触发删除tList中对应组件的action
+   *
+   * @param {number} index 组件在tList中的位置
+   */
+  mainStore.deleteComponent(index);
+}
 </script>
 
 <script lang="ts">
diff --git a/src/components/style/LinkStyle.vue b/src/components/style/LinkStyle.vue
index 50b0e38..6a105f7 100644
--- a/src/components/style/LinkStyle.vue
+++ b/src/components/style/LinkStyle.vue
@@ -52,6 +52,7 @@
     </el-form>
     <div style="text-align: center">
       <el-button type="primary" icon="Refresh" @click="updateConf(form, props.index)">更新</el-button>
+      <el-button type="danger" icon="Delete" @click="removeComponent(props.index)">移除</el-button>
     </div>
   </div>
 </template>
@@ -70,7 +71,7 @@ const mainStore = userMainStore();
 
 const form = reactive(utils.deepCopy(props.data))
 
-function updateConf(conf: Object, index: number) {
+function updateConf(conf: Object, index: number): void {
   /**
    * 触发更新tList中对应组件配置的action
    *
@@ -79,6 +80,15 @@ function updateConf(conf: Object, index: number) {
    */
   mainStore.updateConfig(utils.deepCopy(conf), index);
 }
+
+function removeComponent(index: number): void {
+  /**
+   * 触发删除tList中对应组件的action
+   *
+   * @param {number} index 组件在tList中的位置
+   */
+  mainStore.deleteComponent(index);
+}
 </script>
 
 <script lang="ts">
diff --git a/src/components/style/PageStyle.vue b/src/components/style/PageStyle.vue
index 2ce06e0..67edd11 100644
--- a/src/components/style/PageStyle.vue
+++ b/src/components/style/PageStyle.vue
@@ -1,32 +1,34 @@
 <template>
-    <el-dialog v-model="flog" title="页面配置">
-        <el-form :model="tree" label-width="100px">
-            <el-form-item label="页面标题">
-                <el-input type="textarea" v-model="tree.title" />
-            </el-form-item>
-            <el-form-item label="背景颜色">
-                <el-color-picker v-model="tree.style[0].val"></el-color-picker>
-            </el-form-item>
-        </el-form>
-        <template #footer>
+  <el-dialog v-model="flog" title="页面配置">
+    <el-form :model="tree" label-width="100px">
+      <el-form-item label="页面标题">
+        <el-input type="textarea" v-model="tree.title"/>
+      </el-form-item>
+      <el-form-item label="背景颜色">
+        <el-color-picker v-model="tree.style[0].val"></el-color-picker>
+      </el-form-item>
+    </el-form>
+    <template #footer>
             <span class="dialog-footer">
                 <el-button @click="flog = false">取消</el-button>
                 <el-button type="primary" @click="flog = false">确认</el-button>
             </span>
-        </template>
-    </el-dialog>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
-import { userMainStore } from "@/store";
-import { storeToRefs } from "pinia";
+import {userMainStore} from "@/store";
+import {storeToRefs} from "pinia";
+
 const mainStore = userMainStore();
-const { tree } = storeToRefs(mainStore); // 解构并使数据动态化
+const {tree} = storeToRefs(mainStore); // 解构并使数据动态化
 const props = defineProps<{
-    flog: boolean
+  flog: boolean
 }>();
 
 
 </script>
+
 <style scoped>
 </style>
\ No newline at end of file
diff --git a/src/components/style/TextStyle.vue b/src/components/style/TextStyle.vue
index 46f3018..52f48d1 100644
--- a/src/components/style/TextStyle.vue
+++ b/src/components/style/TextStyle.vue
@@ -44,6 +44,7 @@
     </el-form>
     <div style="text-align: center">
       <el-button type="primary" icon="Refresh" @click="updateConf(form, props.index)">更新</el-button>
+      <el-button type="danger" icon="Delete" @click="removeComponent(props.index)">移除</el-button>
     </div>
   </div>
 </template>
@@ -70,7 +71,7 @@ for (let i: number = 12; i <= 30; i++) {
   fontSizeArr.push(`${i}px`);
 }
 
-function updateConf(conf: Object, index: number) {
+function updateConf(conf: Object, index: number): void {
   /**
    * 触发更新tList中对应组件配置的action
    *
@@ -79,6 +80,15 @@ function updateConf(conf: Object, index: number) {
    */
   mainStore.updateConfig(utils.deepCopy(conf), index);
 }
+
+function removeComponent(index: number): void {
+  /**
+   * 触发删除tList中对应组件的action
+   *
+   * @param {number} index 组件在tList中的位置
+   */
+  mainStore.deleteComponent(index);
+}
 </script>
 
 <script lang="ts">
diff --git a/src/components/style/VideoStyle.vue b/src/components/style/VideoStyle.vue
index 535d4e1..e8f00d5 100644
--- a/src/components/style/VideoStyle.vue
+++ b/src/components/style/VideoStyle.vue
@@ -17,6 +17,7 @@
     </el-form>
     <div style="text-align: center">
       <el-button type="primary" icon="Refresh" @click="updateConf(form, props.index)">更新</el-button>
+      <el-button type="danger" icon="Delete" @click="removeComponent(props.index)">移除</el-button>
     </div>
   </div>
 </template>
@@ -36,7 +37,7 @@ const mainStore = userMainStore();
 const form = reactive(utils.deepCopy(props.data))
 const fits: Array<string> = ['fill', 'contain', 'cover', 'none', 'scale-down']
 
-function updateConf(conf: Object, index: number) {
+function updateConf(conf: Object, index: number): void {
   /**
    * 触发更新tList中对应组件配置的action
    *
@@ -45,6 +46,15 @@ function updateConf(conf: Object, index: number) {
    */
   mainStore.updateConfig(utils.deepCopy(conf), index);
 }
+
+function removeComponent(index: number): void {
+  /**
+   * 触发删除tList中对应组件的action
+   *
+   * @param {number} index 组件在tList中的位置
+   */
+  mainStore.deleteComponent(index);
+}
 </script>
 
 <script lang="ts">
diff --git a/src/store/index.ts b/src/store/index.ts
index 871ad8b..e5d6df0 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,9 +1,9 @@
-import { defineStore } from 'pinia';
+import {defineStore} from 'pinia';
 import config from "@/config/editor.config";
 import data from "@/config/data.json";
 import cArgs from "@/config/component.config";
 import utils from "@/utils/tools"
-import { ElMessage } from "element-plus/es";
+import {ElMessage} from "element-plus/es";
 
 export const userMainStore = defineStore('mainStore', {
     state: () => ({
@@ -77,6 +77,17 @@ export const userMainStore = defineStore('mainStore', {
                 type: 'success',
                 message: '导入JSON成功'
             })
+        },
+        deleteComponent(index: number): void {
+            /**
+             * 删除tList中对应组件的action
+             *
+             * @param {number} index 组件在tList中的位置
+             */
+            let tList = utils.deepCopy(this.tList)
+            tList.splice(index, 1)
+            this.tList = utils.deepCopy(tList) as [];
+            this.saveCurrentPage()
         }
     }
 });
\ No newline at end of file
-- 
Gitee