feat: 新增定位和style处理

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>

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>

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>

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 }

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/#/ 还有很多

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

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'
 

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,

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: {

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
+  }
+}