fix: 修改文件结构

src/views/chart/ContentCharts/components/ItemBox/index.ts

@@ -0,0 +1,3 @@
+import ItemBox from './index.vue'
+
+export { ItemBox }

src/views/chart/ContentCharts/components/ItemBox/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="go-content-charts-item-box">
+    <!-- 每一项组件的渲染 -->
+    <div
+      class="item-box"
+      v-for="(item, index) in menuOptions"
+      :key="index"
+      draggable
+      @dragstart="handleDragStart($event, item)"
+    >
+      <div class="list-header">
+        <AppleControlBtn :mini="true" :disabled="true"></AppleControlBtn>
+        <n-text class="list-header-text" depth="3">{{ item.title }}</n-text>
+      </div>
+      <div class="list-center go-flex-center">
+        <n-image
+          class="list-img"
+          object-fit="contain"
+          preview-disabled
+          :src="item.image"
+          :fallback-src="requireFallbackImg()"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AppleControlBtn } from '@/components/AppleControlBtn/index'
+import { requireFallbackImg } from '@/utils'
+import { DragKeyEnum } from '@/enums/editPageEnum'
+import { ConfigType } from '@/packages/index.d'
+import omit from 'lodash/omit'
+
+defineProps({
+  menuOptions: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// 拖拽处理
+const handleDragStart = (e: DragEvent, item: ConfigType) => {
+  // 将配置项绑定到拖拽属性上
+  e!.dataTransfer!.setData(DragKeyEnum.DROG_KEY, JSON.stringify(omit(item, ['node', 'image'])))
+}
+</script>
+
+<style lang="scss" scoped>
+/* 列表项宽度 */
+$itemWidth: 86%;
+/* 内容高度 */
+$centerHeight: 100px;
+@include go('content-charts-item-box') {
+  .item-box {
+    margin: 0 7%;
+    margin-bottom: 15px;
+    width: $itemWidth;
+    overflow: hidden;
+    border-radius: 6px;
+    cursor: pointer;
+    border: 1px solid rgba(0, 0, 0, 0);
+    @include filter-bg-color('background-color2');
+    @extend .go-transition;
+    &:hover {
+      @include hover-border-color('background-color4');
+      .list-img {
+        transform: scale(1.1);
+      }
+    }
+    .list-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 2px 15px;
+      @include filter-bg-color('background-color3');
+      &-text {
+        font-size: 12px;
+        margin-left: 8px;
+      }
+    }
+    .list-center {
+      padding: 6px 0;
+      height: $centerHeight;
+      overflow: hidden;
+      .list-img {
+        height: 100%;
+        border-radius: 6px;
+        @extend .go-transition;
+      }
+    }
+  }
+}
+</style>

src/views/chart/ContentCharts/components/OptionContent/index.ts

@@ -0,0 +1,3 @@
+import OptionContent from './index.vue'
+
+export { OptionContent }

src/views/chart/ContentCharts/components/OptionContent/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <!-- 侧边栏和数据分发处理 -->
+  <div class="go-chart-common">
+    <n-menu
+      v-show="hidePackageOneCategory"
+      class="chart-menu-width"
+      v-model:value="selectValue"
+      :options="packages.menuOptions"
+      :icon-size="16"
+      :indent="18"
+      @update:value="clickItemHandle"
+    />
+    <div class="chart-content-list">
+      <n-scrollbar>
+        <ItemBox :menuOptions="packages.selectOptions" />
+      </n-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, reactive, computed } from 'vue'
+import { ItemBox } from '../ItemBox/index'
+import { ConfigType } from '@/packages/index.d'
+import { useSettingStore } from '@/store/modules/settingStore/settingStore'
+
+const props = defineProps({
+  selectOptions: {
+    type: Object,
+    default: () => []
+  }
+})
+
+// 隐藏设置
+const settingStore = useSettingStore()
+
+const hidePackageOneCategory = computed(() => {
+  if (packages.categorysNum > 2) return true
+  return !settingStore.getHidePackageOneCategory
+})
+
+// TODO 调试结束改成 markeRaw
+let packages = reactive<{
+  [T: string]: any
+}>({
+  // 侧边栏
+  menuOptions: [],
+  // 当前选择
+  selectOptions: {},
+  // 分类归档
+  categorys: {
+    // todo 先用中文, 后面需要换成关键key
+    all: []
+  },
+  categoryNames: {
+    all: '所有'
+  },
+  // 分类归档数量
+  categorysNum: 0,
+  // 存储不同类别组件进来的选中值
+  saveSelectOptions: {}
+})
+
+const selectValue = ref<string>()
+
+// 设置初始列表
+const setSelectOptions = (categorys: any) => {
+  for (const val in categorys) {
+    packages.selectOptions = categorys[val]
+    break
+  }
+}
+
+watch(
+  // @ts-ignore
+  () => props.selectOptions,
+  (newData: { list: ConfigType[] }) => {
+    packages.categorysNum = 0
+    if (!newData) return
+    newData.list.forEach((e: ConfigType) => {
+      const value: ConfigType[] = (packages.categorys as any)[e.category]
+      // @ts-ignore
+      packages.categorys[e.category] = value && value.length ? [...value, e] : [e]
+      packages.categoryNames[e.category] = e.categoryName
+      packages.categorys['all'].push(e)
+    })
+    for (const val in packages.categorys) {
+      packages.categorysNum += 1
+      packages.menuOptions.push({
+        key: val,
+        label: packages.categoryNames[val]
+      })
+    }
+    setSelectOptions(packages.categorys)
+    // 默认选中处理
+    selectValue.value = packages.menuOptions[0]['key']
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+// 处理点击事件
+const clickItemHandle = (key: string) => {
+  packages.selectOptions = packages.categorys[key]
+}
+</script>
+
+<style lang="scss" scoped>
+/* 此高度与 ContentBox 组件关联*/
+$topHeight: 36px;
+$menuWidth: 65px;
+@include go('chart-common') {
+  display: flex;
+  height: calc(100vh - #{$--header-height} - #{$topHeight});
+  .chart-menu-width {
+    width: $menuWidth;
+    flex-shrink: 0;
+    @include filter-bg-color('background-color2-shallow');
+  }
+  .chart-content-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px 0;
+  }
+  @include deep() {
+    .n-menu-item {
+      height: 30px;
+      &.n-menu-item--selected {
+        &::before {
+          background-color: rgba(0, 0, 0, 0);
+        }
+      }
+      .n-menu-item-content {
+        text-align: center;
+        padding: 0px 14px !important;
+        font-size: 12px !important;
+      }
+    }
+  }
+}
+</style>

src/views/chart/ContentCharts/hooks/useAside.hook.ts

@@ -0,0 +1,86 @@
+import { reactive, ref } from 'vue'
+import { icon } from '@/plugins'
+import { renderLang, renderIcon } from '@/utils'
+import { themeColor, setItem, getCharts } from './useLayout.hook'
+import { PackagesCategoryEnum, PackagesCategoryName } from '@/packages/index.d'
+// 图表
+import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+// 图标
+const { BarChartIcon } = icon.ionicons5
+const {
+  TableSplitIcon,
+  RoadmapIcon,
+  SpellCheckIcon,
+  GraphicalDataFlowIcon,
+} = icon.carbon
+
+// 图表
+const { getPackagesList } = usePackagesStore()
+const menuOptions = reactive<{
+  [T: string]: any
+}>([])
+
+const packagesListObj = {
+  [PackagesCategoryEnum.CHARTS]: {
+    icon: renderIcon(RoadmapIcon),
+    label: renderLang(PackagesCategoryName.CHARTS),
+  },
+  [PackagesCategoryEnum.INFORMATION]: {
+    icon: renderIcon(SpellCheckIcon),
+    label: renderLang(PackagesCategoryName.INFORMATION),
+  },
+  [PackagesCategoryEnum.TABLES]: {
+    icon: renderIcon(TableSplitIcon),
+    label: renderLang(PackagesCategoryName.TABLES),
+  },
+  [PackagesCategoryEnum.DECORATES]: {
+    icon: renderIcon(GraphicalDataFlowIcon),
+    label: renderLang(PackagesCategoryName.DECORATES),
+  },
+}
+
+// 处理列表
+const handlePackagesList = () => {
+  for (const val in getPackagesList) {
+    menuOptions.push({
+      key: val,
+      // @ts-ignore
+      icon: packagesListObj[val].icon,
+      // @ts-ignore
+      label: packagesListObj[val].label,
+      // @ts-ignore
+      list: getPackagesList[val],
+    })
+  }
+}
+handlePackagesList()
+
+// 记录选中值
+let beforeSelect: string = menuOptions[0]['key']
+const selectValue = ref<string>(menuOptions[0]['key'])
+
+// 选中的对象值
+const selectOptions = ref(menuOptions[0])
+
+// 点击 item
+const clickItemHandle = (key: string, item: any) => {
+  selectOptions.value = item
+  // 处理折叠
+  if (beforeSelect === key) {
+    setItem(ChartLayoutStoreEnum.CHARTS, !getCharts.value)
+  } else {
+    setItem(ChartLayoutStoreEnum.CHARTS, true)
+  }
+  beforeSelect = key
+}
+
+export {
+  getCharts,
+  BarChartIcon,
+  themeColor,
+  selectOptions,
+  selectValue,
+  clickItemHandle,
+  menuOptions,
+}

src/views/chart/ContentCharts/hooks/useLayout.hook.ts

@@ -0,0 +1,20 @@
+import { ref, toRefs } from 'vue'
+
+// 布局
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+// 样式
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+
+// 全局颜色
+const designStore = useDesignStore()
+const themeColor = ref(designStore.getAppTheme)
+
+// 结构控制
+const { setItem } = useChartLayoutStore()
+const { getCharts } = toRefs(useChartLayoutStore())
+
+export {
+  themeColor,
+  setItem,
+  getCharts
+}

src/views/chart/ContentCharts/index.ts

@@ -0,0 +1,3 @@
+import ContentCharts from './index.vue'
+
+export { ContentCharts }

src/views/chart/ContentCharts/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <!-- 左侧所有组件的展示列表 -->
+  <ContentBox
+    class="go-content-charts"
+    :class="{ scoped: !getCharts }"
+    title="组件"
+    :depth="1"
+    :backIcon="false"
+  >
+    <template #icon>
+      <n-icon size="14" :depth="2">
+        <BarChartIcon />
+      </n-icon>
+    </template>
+    <!-- 图表 -->
+    <aside>
+      <div class="menu-width-box">
+        <n-menu
+          class="menu-width"
+          v-model:value="selectValue"
+          :options="menuOptions"
+          :icon-size="16"
+          :indent="18"
+          @update:value="clickItemHandle"
+        />
+        <div class="menu-component-box">
+          <Skeleton
+            :load="!selectOptions"
+            round
+            text
+            :repeat="2"
+            style="width: 90%;"
+          />
+          <OptionContent
+            v-if="selectOptions"
+            :selectOptions="selectOptions"
+            :key="selectValue"
+          />
+        </div>
+      </div>
+    </aside>
+  </ContentBox>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, toRefs } from 'vue'
+import { ContentBox } from '../ContentBox/index'
+import { OptionContent } from './components/OptionContent'
+import {
+  getCharts,
+  BarChartIcon,
+  themeColor,
+  selectOptions,
+  selectValue,
+  clickItemHandle,
+  menuOptions
+} from './hooks/useAside.hook'
+</script>
+
+<style lang="scss" scoped>
+/* 整体宽度 */
+$width: 330px;
+/* 列表的宽度 */
+$widthScoped: 65px;
+/* 此高度与 ContentBox 组件关联*/
+$topHeight: 36px;
+
+@include go(content-charts) {
+  width: $width;
+  @extend .go-transition;
+  &.scoped,
+  .menu-width {
+    width: $widthScoped;
+  }
+  .menu-width-box {
+    display: flex;
+    height: calc(100vh - #{$--header-height} - #{$topHeight});
+    .menu-width {
+      flex-shrink: 0;
+      @include filter-bg-color('background-color2');
+    }
+    .menu-component-box {
+      flex-shrink: 0;
+      width: $width - $widthScoped;
+      overflow: hidden;
+    }
+  }
+  @include deep() {
+    .menu-width {
+      .n-menu-item {
+        height: auto !important;
+        &.n-menu-item--selected {
+          &::after {
+            content: '';
+            position: absolute;
+            left: 2px;
+            top: 0;
+            height: 100%;
+            width: 3px;
+            background-color: v-bind('themeColor');
+            border-top-right-radius: 3px;
+            border-bottom-right-radius: 3px;
+          }
+        }
+        .n-menu-item-content {
+          display: flex;
+          flex-direction: column;
+          padding: 6px 12px !important;
+          font-size: 14px !important;
+        }
+        .n-menu-item-content__icon {
+          font-size: 18px !important;
+          margin-right: 0 !important;
+        }
+      }
+    }
+  }
+}
+</style>