From a4672836183a06dc94dadcc66a8a894849626152 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Wed, 9 Mar 2022 17:37:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=AE=9A=E4=BD=8D?=
 =?UTF-8?q?=E5=92=8Cstyle=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChartItemSetting/PositionSetting.vue      | 97 ++++++++++++++++++-
 .../ChartItemSetting/SettingItemBox.vue       |  9 +-
 .../ChartItemSetting/StylesSetting.vue        | 31 ++++++
 src/components/ChartItemSetting/index.ts      |  4 +-
 src/plugins/icon.ts                           | 14 ++-
 .../components/ChartAnimation/index.vue       |  2 +-
 .../components/ChartSetting/index.vue         |  6 +-
 src/views/chart/HeaderRightBtn/index.vue      |  4 +-
 .../preview/components/RenderList/index.vue   |  4 +-
 src/views/preview/utils/style.ts              |  7 ++
 10 files changed, 167 insertions(+), 11 deletions(-)
 create mode 100644 src/components/ChartItemSetting/StylesSetting.vue

diff --git a/src/components/ChartItemSetting/PositionSetting.vue b/src/components/ChartItemSetting/PositionSetting.vue
index 503433fa..0c05f489 100644
--- a/src/components/ChartItemSetting/PositionSetting.vue
+++ b/src/components/ChartItemSetting/PositionSetting.vue
@@ -1,4 +1,18 @@
 <template>
+  <n-divider style="margin: 10px 0;" />
+  <n-space :size="8" justify="space-between" style="margin-top: 10px;">
+    <n-button
+      secondary
+      v-for="item in positionList"
+      :key="item.key"
+      @click="positonHandle(item.key)"
+    >
+      <template #icon>
+        <component :is="item.icon" />
+      </template>
+    </n-button>
+  </n-space>
+  <!-- </SettingItemBox> -->
   <SettingItemBox name="边距">
     <n-input-number
       v-model:value="chartAttr.y"
@@ -27,11 +41,92 @@
 import { PropType } from 'vue'
 import { PickCreateComponentType } from '@/packages/index.d'
 import { SettingItemBox } from '@/components/ChartItemSetting/index'
+import { renderIcon } from '@/utils'
+import { icon } from '@/plugins/index'
+import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+
+const {
+  AlignHorizontalLeftIcon,
+  AlignVerticalCenterIcon,
+  AlignVerticalTopIcon,
+  AlignHorizontalCenterIcon,
+  AlignHorizontalRightIcon,
+  AlignVerticalBottomIcon
+} = icon.carbon
+
+const positionList = [
+  {
+    key: 'AlignHorizontalLeftIcon',
+    lable: '局左',
+    icon: renderIcon(AlignHorizontalLeftIcon)
+  },
+  {
+    key: 'AlignVerticalCenterIcon',
+    lable: 'X轴居中',
+    icon: renderIcon(AlignVerticalCenterIcon)
+  },
+  {
+    key: 'AlignHorizontalRightIcon',
+    lable: '局右',
+    icon: renderIcon(AlignHorizontalRightIcon)
+  },
+  {
+    key: 'AlignVerticalTopIcon',
+    lable: '顶部',
+    icon: renderIcon(AlignVerticalTopIcon)
+  },
+  {
+    key: 'AlignHorizontalCenterIcon',
+    lable: 'Y轴居中',
+    icon: renderIcon(AlignHorizontalCenterIcon)
+  },
+  {
+    key: 'AlignVerticalBottomIcon',
+    lable: '底部',
+    icon: renderIcon(AlignVerticalBottomIcon)
+  }
+]
 
 const props = defineProps({
+  canvasConfig: {
+    type: Object as PropType<EditCanvasConfigType>,
+    required: true
+  },
   chartAttr: {
-    type: Object as PropType<Omit<PickCreateComponentType<'attr'>, 'node' | 'conNode'>>,
+    type: Object as PropType<
+      Omit<PickCreateComponentType<'attr'>, 'node' | 'conNode'>
+    >,
     required: true
   }
 })
+
+const positonHandle = (key: string) => {
+  console.log(key)
+  switch (key) {
+    // 局左
+    case positionList[0]['key']:
+      props.chartAttr.x = 0
+      break
+    // X轴居中
+    case positionList[1]['key']:
+      props.chartAttr.y = (props.canvasConfig.height - props.chartAttr.h) / 2
+      break
+    // 局右
+    case positionList[2]['key']:
+      props.chartAttr.x = props.canvasConfig.width - props.chartAttr.w
+      break
+    // 顶部
+    case positionList[3]['key']:
+      props.chartAttr.y = 0
+      break
+    // Y轴居中
+    case positionList[4]['key']:
+      props.chartAttr.x = (props.canvasConfig.width - props.chartAttr.w) / 2
+      break
+    // 底部
+    case positionList[5]['key']:
+      props.chartAttr.y = props.canvasConfig.height - props.chartAttr.h
+      break
+  }
+}
 </script>
diff --git a/src/components/ChartItemSetting/SettingItemBox.vue b/src/components/ChartItemSetting/SettingItemBox.vue
index d0fd93b9..e66ec22b 100644
--- a/src/components/ChartItemSetting/SettingItemBox.vue
+++ b/src/components/ChartItemSetting/SettingItemBox.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="go-config-item-box">
     <n-text class="item-left" depth="2">{{ name }}</n-text>
-    <div class="item-right" justify="space-between">
+    <div class="item-right" justify="space-between" :style="{
+      gridTemplateColumns: alone? '1fr': '1fr 1fr'
+    }">
       <slot />
     </div>
   </div>
@@ -12,6 +14,11 @@ defineProps({
   name: {
     type: String,
     required: true
+  },
+  alone: {
+    type: Boolean,
+    default: false,
+    required: false
   }
 })
 </script>
diff --git a/src/components/ChartItemSetting/StylesSetting.vue b/src/components/ChartItemSetting/StylesSetting.vue
new file mode 100644
index 00000000..04a55210
--- /dev/null
+++ b/src/components/ChartItemSetting/StylesSetting.vue
@@ -0,0 +1,31 @@
+<template>
+  <CollapseItem name="通用样式" :expanded="true">
+    <SettingItemBox name="透明度" :alone="true">
+      <!-- 透明度 -->
+      <n-slider
+        v-model:value="chartStyles.opacity"
+        :step="0.1"
+        :min="0"
+        :max="1"
+      />
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { PickCreateComponentType } from '@/packages/index.d'
+import {
+  SettingItemBox,
+  CollapseItem
+} from '@/components/ChartItemSetting/index'
+
+const props = defineProps({
+  chartStyles: {
+    type: Object as PropType<PickCreateComponentType<'styles'>>,
+    required: true
+  }
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/ChartItemSetting/index.ts b/src/components/ChartItemSetting/index.ts
index ff561729..e0a722cc 100644
--- a/src/components/ChartItemSetting/index.ts
+++ b/src/components/ChartItemSetting/index.ts
@@ -9,5 +9,7 @@ import GlobalSetting from './GlobalSetting.vue'
 import PositionSetting from './PositionSetting.vue'
 // 尺寸
 import SizeSetting from './SizeSetting.vue'
+// 样式
+import StylesSetting from './StylesSetting.vue'
 
-export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, PositionSetting, SizeSetting }
+export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, PositionSetting, SizeSetting, StylesSetting }
diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index 0afc534a..fee522a4 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -63,6 +63,12 @@ import {
   StackedMove as StackedMoveIcon,
   PaintBrush as PaintBrushIcon,
   ComposerEdit as ZAxisIcon,
+  AlignHorizontalLeft as AlignHorizontalLeftIcon,
+  AlignVerticalCenter as AlignVerticalCenterIcon,
+  AlignVerticalTop as AlignVerticalTopIcon,
+  AlignHorizontalCenter as AlignHorizontalCenterIcon,
+  AlignHorizontalRight as AlignHorizontalRightIcon,
+  AlignVerticalBottom as AlignVerticalBottomIcon
 } from '@vicons/carbon'
 
 const ionicons5 = {
@@ -190,7 +196,13 @@ const carbon = {
   // 清空剪切板（刷子）
   PaintBrushIcon,
   // 坐标轴
-  ZAxisIcon
+  ZAxisIcon,
+  AlignHorizontalLeftIcon,
+  AlignVerticalCenterIcon,
+  AlignVerticalTopIcon,
+  AlignHorizontalCenterIcon,
+  AlignHorizontalRightIcon,
+  AlignVerticalBottomIcon
 }
 
 // https://www.xicons.org/#/ 还有很多
diff --git a/src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue b/src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue
index 4103981d..a9f8ef77 100644
--- a/src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue
@@ -54,7 +54,7 @@ const targetData: Ref<CreateComponentType> = computed(() => {
   return list[targetIndex]
 })
 
-// * 选中样式
+// * 选中的动画样式
 const activeIndex = (value: string) => {
   const selectValue = targetData.value.styles.animations
   if (!selectValue.length) return false
diff --git a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue b/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
index e7173eac..1011763f 100644
--- a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
@@ -14,7 +14,9 @@
     <!-- 尺寸 -->
     <SizeSetting :chartAttr="targetData.attr" />
     <!-- 位置 -->
-    <PositionSetting :chartAttr="targetData.attr" />
+    <PositionSetting :chartAttr="targetData.attr" :canvasConfig="chartEditStore.getEditCanvasConfig"/>
+    <!-- 样式 -->
+    <StylesSetting :chartStyles="targetData.styles" />
     <!-- 自定义配置项 -->
     <component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component>
     <!-- 全局设置 --> 
@@ -25,7 +27,7 @@
 <script setup lang="ts">
 import { computed, Ref } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { GlobalSetting, PositionSetting, SizeSetting } from '@/components/ChartItemSetting/index'
+import { GlobalSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/ChartItemSetting/index'
 import { CreateComponentType } from '@/packages/index.d'
 import { SettingItemBox } from '@/components/ChartItemSetting/index'
 
diff --git a/src/views/chart/HeaderRightBtn/index.vue b/src/views/chart/HeaderRightBtn/index.vue
index ea1f9197..18edcb5d 100644
--- a/src/views/chart/HeaderRightBtn/index.vue
+++ b/src/views/chart/HeaderRightBtn/index.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { shallowReactive } from 'vue'
 import { renderIcon, fetchPathByName, routerTurnByPath, setLocalStorage, getLocalStorage } from '@/utils'
 import { PreviewEnum } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
@@ -58,7 +58,7 @@ const sendHandle = () => {
   window['$message'].warning('该功能暂未实现（因为压根没有后台）')
 }
 
-const btnList = reactive([
+const btnList = shallowReactive([
   {
     key: '',
     select: true,
diff --git a/src/views/preview/components/RenderList/index.vue b/src/views/preview/components/RenderList/index.vue
index f303604b..e2c2970b 100644
--- a/src/views/preview/components/RenderList/index.vue
+++ b/src/views/preview/components/RenderList/index.vue
@@ -4,7 +4,7 @@
     :class="animationsClass(item.styles.animations)"
     v-for="(item, index) in localStorageInfo.componentList"
     :key="item.id"
-    :style="{ ...useComponentAttrStyle(item.attr, index), ...useSizeStyle(item.attr) }"
+    :style="{ ...useComponentAttrStyle(item.attr, index), ...useSizeStyle(item.attr), ...useStyle(item.styles)}"
   >
     <component
       :is="item.key"
@@ -19,7 +19,7 @@
 import { PropType, computed } from 'vue'
 import { ChartEditStorageType } from '../../index.d'
 import { chartColors } from '@/settings/chartThemes/index'
-import { useSizeStyle, useComponentAttrStyle, animationsClass } from '../../utils'
+import { useSizeStyle, useStyle, useComponentAttrStyle, animationsClass } from '../../utils'
 
 const props = defineProps({
   localStorageInfo: {
diff --git a/src/views/preview/utils/style.ts b/src/views/preview/utils/style.ts
index fd666d6e..36353aea 100644
--- a/src/views/preview/utils/style.ts
+++ b/src/views/preview/utils/style.ts
@@ -43,3 +43,10 @@ export const animationsClass = (animations: string[]) => {
   }
   return ''
 }
+
+export const useStyle = (styles: StylesType) => {
+  return {
+    // 透明度
+    opacity: styles.opacity
+  }
+}