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>