From 18f05812ad0c5212b2b854e5f389a3799e9dde5b Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Wed, 6 Mar 2024 20:24:09 +0000
Subject: [PATCH] feat: convert style panel component to composition API

---
 src/components/modules/panel/stylePanel.vue | 102 +++++++++++---------
 1 file changed, 54 insertions(+), 48 deletions(-)

diff --git a/src/components/modules/panel/stylePanel.vue b/src/components/modules/panel/stylePanel.vue
index 1bc0d14..e50deab 100644
--- a/src/components/modules/panel/stylePanel.vue
+++ b/src/components/modules/panel/stylePanel.vue
@@ -6,7 +6,7 @@
     </div>
     <div v-show="activeTab === 0" class="style-wrap">
       <div v-show="showGroupCombined" style="padding: 2rem 0">
-        <el-button plain type="primary" class="gounp__btn" @click="realCombined">成组</el-button>
+        <el-button plain type="primary" class="gounp__btn" @click="handleCombine">成组</el-button>
         <icon-item-select label="" :data="alignIconList" @finish="alignAction" />
       </div>
       <component :is="dActiveElement.type + '-style'" v-show="!showGroupCombined" v-if="dActiveElement.type" />
@@ -17,58 +17,64 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 // 样式设置面板
-const NAME = 'style-panel'
-import { mapGetters, mapActions } from 'vuex'
-import alignIconList from '@/assets/data/AlignListData'
+// const NAME = 'style-panel'
+import { useStore } from 'vuex'
+import alignIconList, { AlignListData } from '@/assets/data/AlignListData'
 import iconItemSelect from '../settings/iconItemSelect.vue'
+import { ref, watch } from 'vue';
+import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 
-export default {
-  name: NAME,
-  components: { iconItemSelect },
-  data() {
-    return {
-      activeTab: 0,
-      alignIconList,
-      showGroupCombined: false,
-    }
-  },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dWidgets', 'dSelectWidgets']),
-  },
-  watch: {
-    dSelectWidgets: {
-      handler(items) {
-        setTimeout(() => {
-          this.showGroupCombined = items.length > 1
-        }, 100)
-      },
-      deep: true,
-    },
-  },
-  methods: {
-    ...mapActions(['selectWidget', 'updateAlign', 'updateHoverUuid', 'getCombined', 'realCombined', 'ungroup', 'pushHistory']),
-    alignAction(item) {
-      const sWidgets = JSON.parse(JSON.stringify(this.dSelectWidgets))
-      this.getCombined().then((group) => {
-        for (let i = 0; i < sWidgets.length; i++) {
-          const element = sWidgets[i]
-          this.updateAlign({
-            align: item.value,
-            uuid: element.uuid,
-            group,
-          })
-        }
-        this.pushHistory()
-      })
-    },
-    layerChange(newLayer) {
-      this.$store.commit('setDWidgets', newLayer.reverse())
-      this.$store.commit('setShowMoveable', false)
-    },
+const store = useStore();
+
+const activeTab = ref(0)
+const iconList = ref<AlignListData[]>(alignIconList)
+const showGroupCombined = ref(false)
+
+const { dActiveElement, dWidgets, dSelectWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dSelectWidgets'])
+
+watch(
+  dSelectWidgets,
+  (items) => {
+    setTimeout(() => {
+      showGroupCombined.value = items.length > 1
+    }, 100)
   },
+  {
+    deep: true
+  }
+)
+
+function handleCombine() {
+  store.dispatch('realCombined')
 }
+
+// ...mapActions(['selectWidget', 'updateAlign', 'updateHoverUuid', 'getCombined', 'realCombined', 'ungroup', 'pushHistory']),
+function alignAction(item: AlignListData) {
+  const sWidgets = JSON.parse(JSON.stringify(dSelectWidgets.value))
+  store.dispatch('getCombined').then((group) => {
+    sWidgets.forEach((element: Record<string, any>) => {
+      store.dispatch('updateAlign', {
+        align: item.value,
+        uuid: element.uuid,
+        group,
+      })
+      // updateAlign({
+      //   align: item.value,
+      //   uuid: element.uuid,
+      //   group,
+      // })
+    });
+    store.dispatch('pushHistory')
+    // pushHistory()
+  })
+}
+function layerChange(newLayer: Record<string, any>[]) {
+  store.commit('setDWidgets', newLayer.toReversed())
+  store.commit('setShowMoveable', false)
+}
+
 </script>
 
 <style lang="less" scoped>