fix: 优化组件渲染方式

2026-04-23 00:00:12 +08:00 · 2022-01-14 22:07:02 +08:00
parent 8bdacd82c7
commit 0f7fbfcce8
35 changed files with 359 additions and 232 deletions
@@ -1,3 +0,0 @@
-import Charts from './index.vue'
-
-export { Charts }
@@ -1,108 +0,0 @@
-<template>
-  <div class="go-chart-common">
-    <n-menu
-      class="chart-menu-width"
-      v-model:value="selectValue"
-      :options="menuOptions"
-      :icon-size="16"
-      :indent="18"
-    />
-    <div class="chart-content-list">
-      <div class="item-box" v-for="(item, index) in menuOptions" :key="index">
-        <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">
-          <img class="list-img" :src="item.image" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref, watchEffect } from 'vue'
-import { AppleControlBtn } from '@/components/AppleControlBtn/index'
-
-const props = defineProps({
-  packagesList: {
-    type: Array,
-    default: () => []
-  }
-})
-
-let menuOptions: any[] = reactive([])
-
-watchEffect(() => {
-  console.log(props.packagesList)
-  menuOptions = props.packagesList
-})
-
-const selectValue = ref<string>(menuOptions[0]['key'])
-</script>
-
-<style lang="scss" scoped>
-/* 此高度与 ContentBox 组件关联*/
-$topHeight: 60px;
-/* 列表项宽度 */
-$itemWidth: 86%;
-/* 图片高度 */
-$imgWidth: 90%;
-@include go('chart-common') {
-  display: flex;
-  height: calc(100vh - #{$--header-height} - #{$topHeight});
-  .chart-menu-width {
-    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;
-    .item-box {
-      margin: 0 7%;
-      margin-top: 5px;
-      width: $itemWidth;
-      overflow: hidden;
-      border-radius: 6px;
-      @include filter-bg-color('background-color2');
-      .list-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 4px 15px;
-        @include filter-bg-color('background-color4');
-        &-text {
-          font-size: 12px;
-          margin-left: 8px;
-        }
-      }
-      .list-center {
-        padding: 6px 0;
-        .list-img {
-          width: $imgWidth;
-          border-radius: 6px;
-        }
-      }
-    }
-  }
-  @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>
@@ -1,3 +0,0 @@
-import Decorates from './index.vue'
-
-export { Decorates }
@@ -1,9 +0,0 @@
-<template>
-  <div>
-    我是装饰咯
-  </div>
-</template>
-
-<script setup lang="Ts"></script>
-
-<style lang="scss" scoped></style>
@@ -0,0 +1,3 @@
+import ItemBox from './index.vue'
+
+export { ItemBox }
@@ -0,0 +1,55 @@
+<template>
+  <div class="item-box" v-for="(item, index) in menuOptions" :key="index">
+    <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">
+      <img class="list-img" :src="item.image" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AppleControlBtn } from '@/components/AppleControlBtn/index'
+defineProps({
+  menuOptions: {
+    type: Array,
+    default: () => []
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+/* 列表项宽度 */
+$itemWidth: 86%;
+/* 内容高度 */
+$centerHeight: 80px;
+.item-box {
+  margin: 0 7%;
+  margin-bottom: 15px;
+  width: $itemWidth;
+  overflow: hidden;
+  border-radius: 6px;
+  @include filter-bg-color('background-color2');
+  .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;
+    .list-img {
+      height: 100%;
+      border-radius: 6px;
+    }
+  }
+}
+</style>
@@ -0,0 +1,29 @@
+import { reactive, ref, watch } from 'vue'
+import { ConfigType } from '@/packages/index.d'
+
+export const useHandleOptions = (packages) => {
+  watch(
+    // @ts-ignore
+    () => props.selectOptions,
+    (newData: { list: ConfigType[] }) => {
+      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]
+      })
+      for (const val in packages.categorys) {
+        packages.menuOptions.push({
+          key: val,
+          label: val
+        })
+      }
+      selectValue.value = packages.menuOptions[0]['key']
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  )
+}
@@ -0,0 +1,3 @@
+import OptionContent from './index.vue'
+
+export { OptionContent }
@@ -0,0 +1,120 @@
+<template>
+  <div class="go-chart-common">
+    <n-menu
+      class="chart-menu-width"
+      v-model:value="selectValue"
+      :options="packages.menuOptions"
+      :icon-size="16"
+      :indent="18"
+      @update:value="clickItemHandle"
+    />
+    <div class="chart-content-list">
+      <ItemBox :menuOptions="packages.selectOptions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import { ItemBox } from '../ItemBox/index'
+import { ConfigType } from '@/packages/index.d'
+
+const props = defineProps({
+  selectOptions: {
+    type: Object,
+    default: () => []
+  }
+})
+
+let packages = reactive<{
+  [T: string]: any
+}>({
+  // 侧边栏
+  menuOptions: [],
+  // 当前选择
+  selectOptions: {},
+  // 分类归档
+  categorys: {},
+  // 存储不同类别组件进来的选中值
+  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[] }) => {
+    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]
+    })
+    for (const val in packages.categorys) {
+      packages.menuOptions.push({
+        key: val,
+        label: 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: 60px;
+$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>
@@ -1,3 +0,0 @@
-import Tables from './index.vue'
-
-export { Tables }
@@ -1,9 +0,0 @@
-<template>
-  <div>
-    我是表格咯
-  </div>
-</template>
-
-<script setup lang="Ts"></script>
-
-<style lang="scss" scoped></style>
@@ -1,3 +0,0 @@
-import Texts from './index.vue'
-
-export { Texts }
@@ -1,9 +0,0 @@
-<template>
-  <div>
-    我是信息咯
-  </div>
-</template>
-
-<script setup lang="Ts"></script>
-
-<style lang="scss" scoped></style>
@@ -1,11 +1,8 @@
 import { reactive, ref } from 'vue'
 import { icon } from '@/plugins'
-import { Charts } from '../components/Charts'
-import { Tables } from '../components/Tables'
-import { Texts } from '../components/Texts'
-import { Decorates } from '../components/Decorates'
 import { renderLang, renderIcon } from '@/utils'
 import { themeColor, setItem, getCharts } from './layoutHook'
+import { PackagesCategoryEnum } from '@/packages/index.d'
 // 图表
 import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
 // 图标
@@ -18,65 +15,56 @@ const {
 } = icon.carbon

 // 图表
-const { packagesList } = usePackagesStore()
-const menuOptions: any[] = reactive([])
+const { getPackagesList } = usePackagesStore()
+const menuOptions = reactive<{
+  [T: string]: any
+}>([])

-const infoObj = new Map([
-  [
-    'Charts',
-    {
-      icon: renderIcon(RoadmapIcon),
-      label: renderLang('图表'),
-      node: Charts
-    }
-  ],
-  [
-    'Tables',
-    {
-      icon: renderIcon(TableSplitIcon),
-      label: renderLang('表格'),
-      node: Tables
-    }
-  ],
-  [
-    'Texts',
-    {
-      icon: renderIcon(SpellCheckIcon),
-      label: renderLang('信息'),
-      node: Tables
-    }
-  ],
-  [
-    'Decorates',
-    {
-      icon: renderIcon(GraphicalDataFlowIcon),
-      label: renderLang('表格'),
-      node: Decorates
-    }
-  ],
-])
+const packagesListObj = {
+  [PackagesCategoryEnum.CHARTS]: {
+    icon: renderIcon(RoadmapIcon),
+    label: renderLang('图表')
+  },
+  // [PackagesCategoryEnum.TEXTS]: {
+  //   icon: renderIcon(SpellCheckIcon),
+  //   label: renderLang('信息')
+  // },
+  // [PackagesCategoryEnum.TABLES]: {
+  //   icon: renderIcon(GraphicalDataFlowIcon),
+  //   label: renderLang('表格')
+  // },
+  [PackagesCategoryEnum.DECORATES]: {
+    icon: renderIcon(GraphicalDataFlowIcon),
+    label: renderLang('装饰')
+  }
+}

-Object.getOwnPropertyNames(packagesList).forEach(function (key) {
-  menuOptions.push({
-    key: key,
-    icon: infoObj.get(key)?.icon,
-    label: infoObj.get(key)?.label,
-    node: infoObj.get(key)?.node,
-    // @ts-ignore string 赋值给 any 的问题
-    packagesList: packagesList[key]
-  })
-})
+// 处理列表
+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 selecOptions = ref(menuOptions[0])
+const selectOptions = ref(menuOptions[0])

 // 点击 item
-const clickItemHandle = <T extends { node: any }>(key: string, item: T) => {
-  // 处理渲染的 node
-  selecOptions.value = item
+const clickItemHandle = (key: string, item: any) => {
+  selectOptions.value = item
  // 处理折叠
  if (beforeSelect === key) {
    setItem('charts', !getCharts.value)
@@ -90,7 +78,7 @@ export {
  getCharts,
  BarChartIcon,
  themeColor,
-  selecOptions,
+  selectOptions,
  selectValue,
  clickItemHandle,
  menuOptions
@@ -23,11 +23,14 @@
          @update:value="clickItemHandle"
        />
        <div class="menu-component-box">
-          <transition name="component-fade" mode="out-in">
-            <keep-alive>
-              <component :is="selecOptions.node" :packagesList="selecOptions.packagesList" :key="selectValue"></component>
-            </keep-alive>
-          </transition>
+          <Skeleton
+            :load="!selectOptions"
+            round
+            text
+            :repeat="2"
+            style="width: 90%;"
+          />
+          <OptionContent v-if="selectOptions" :selectOptions="selectOptions" :key="selectValue" />
        </div>
      </div>
    </aside>
@@ -37,11 +40,12 @@
 <script setup lang="ts">
 import { reactive, ref, toRefs } from 'vue'
 import { ContentBox } from '../ContentBox/index'
+import { OptionContent } from './components/OptionContent'
 import {
  getCharts,
  BarChartIcon,
  themeColor,
-  selecOptions,
+  selectOptions,
  selectValue,
  clickItemHandle,
  menuOptions