feat: 新增左侧图表数据

src/packages/components/Chart/Bars/BarCommon/index.ts

@@ -1,12 +1,12 @@
-import barCommon from './index.vue'
+import BarCommon from './index.vue'
 import image from '@/assets/images/chart/charts/bar_x.png'
 import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
-export const barCommonConfig: ConfigType = {
+export const BarCommonConfig: ConfigType = {
   key: 'BarCommon',
-  title: '基础',
+  title: '柱状图',
   category: ChatCategoryEnum.BAR,
-  node: barCommon,
+  node: BarCommon,
   image: image
 }

src/packages/components/Chart/Bars/BarCrossrange/index.ts

@@ -0,0 +1,12 @@
+import BarCrossrange from './index.vue'
+import image from '@/assets/images/chart/charts/bar_y.png'
+import { ConfigType } from '@/packages/index.d'
+import { ChatCategoryEnum } from '../../index.d'
+
+export const BarCrossrangefig: ConfigType = {
+  key: 'BarCrossrange',
+  title: '横向柱状图',
+  category: ChatCategoryEnum.BAR,
+  node: BarCrossrange,
+  image: image
+}

src/packages/components/Chart/Bars/BarCrossrange/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    柱状图组件渲染
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/packages/components/Chart/Bars/index.ts

@@ -1,3 +1,4 @@
-import { barCommonConfig } from './BarCommon/index'
+import { BarCommonConfig } from './BarCommon/index'
+import { BarCrossrangefig } from './BarCrossrange/index'
 
-export default [barCommonConfig]
+export default [BarCommonConfig, BarCrossrangefig]

src/packages/components/Chart/Lines/LineCommon/index.ts

@@ -0,0 +1,12 @@
+import LineCommon from './index.vue'
+import image from '@/assets/images/chart/charts/line.png'
+import { ConfigType } from '@/packages/index.d'
+import { ChatCategoryEnum } from '../../index.d'
+
+export const LineCommonConfig: ConfigType = {
+  key: 'LineCommon',
+  title: '折线图',
+  category: ChatCategoryEnum.LINE,
+  node: LineCommon,
+  image: image
+}

src/packages/components/Chart/Lines/LineCommon/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    line组件渲染
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/packages/components/Chart/Lines/LineGradientSingle/index.ts

@@ -0,0 +1,12 @@
+import LineGradientSingle from './index.vue'
+import image from '@/assets/images/chart/charts/line_gradient_single.png'
+import { ConfigType } from '@/packages/index.d'
+import { ChatCategoryEnum } from '../../index.d'
+
+export const LineGradientSingleConfig: ConfigType = {
+  key: 'LineGradientSingle',
+  title: '折线面积图',
+  category: ChatCategoryEnum.LINE,
+  node: LineGradientSingle,
+  image: image
+}

src/packages/components/Chart/Lines/LineGradientSingle/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    line组件渲染
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/packages/components/Chart/Lines/LineGradients/index.ts

@@ -0,0 +1,12 @@
+import LineGradients from './index.vue'
+import image from '@/assets/images/chart/charts/line_gradient2.png'
+import { ConfigType } from '@/packages/index.d'
+import { ChatCategoryEnum } from '../../index.d'
+
+export const LineGradientsConfig: ConfigType = {
+  key: 'LineGradientSingle',
+  title: '折线面积图',
+  category: ChatCategoryEnum.LINE,
+  node: LineGradients,
+  image: image
+}

src/packages/components/Chart/Lines/LineGradients/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    line组件渲染
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/packages/components/Chart/Lines/index.ts

@@ -0,0 +1,5 @@
+import { LineCommonConfig } from './LineCommon/index'
+import { LineGradientSingleConfig } from './LineGradientSingle/index'
+import { LineGradientsConfig } from './LineGradients/index'
+
+export default [LineCommonConfig, LineGradientSingleConfig, LineGradientsConfig]

src/packages/components/Chart/Mores/Variable/index.ts

@@ -0,0 +1,12 @@
+import Variable from './index.vue'
+import image from '@/assets/images/chart/charts/water_variable.png'
+import { ConfigType } from '@/packages/index.d'
+import { ChatCategoryEnum } from '../../index.d'
+
+export const VariableConfig: ConfigType = {
+  key: 'Variable',
+  title: '折线面积图',
+  category: ChatCategoryEnum.MORE,
+  node: Variable,
+  image: image
+}

src/packages/components/Chart/Mores/Variable/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    水波
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/packages/components/Chart/Mores/index.ts

@@ -0,0 +1,3 @@
+import { VariableConfig } from './Variable/index'
+
+export default [VariableConfig,]

src/packages/components/Chart/Pies/PieCommon/index.ts

@@ -1,12 +1,12 @@
-import node from './index.vue'
+import PieCommon from './index.vue'
 import image from '@/assets/images/chart/charts/pie.png'
 import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
-export const pieCommonConfig: ConfigType = {
+export const PieCommonConfig: ConfigType = {
   key: 'PieCommon',
-  title: '饼图',
+  title: '计量图',
   category: ChatCategoryEnum.PIE,
-  node: node,
+  node: PieCommon,
   image
 }

src/packages/components/Chart/Pies/index.ts

@@ -1,3 +1,3 @@
-import { pieCommonConfig } from './PieCommon/index'
+import { PieCommonConfig } from './PieCommon/index'
 
-export default [pieCommonConfig]
+export default [PieCommonConfig]

src/packages/components/Chart/index.d.ts

@@ -1,4 +1,6 @@
 export enum ChatCategoryEnum {
   BAR = '柱状图',
-  PIE = '饼图'
+  PIE = '饼图',
+  LINE = '折线图',
+  MORE = '更多'
 }

src/packages/components/Chart/index.ts

@@ -1,4 +1,6 @@
-import Bar from './Bars'
+import Bars from './Bars'
-import Pie from './Pies'
+import Pies from './Pies'
+import Lines from './Lines'
+import Mores from './Mores'
 
-export const ChartList = [...Bar, ...Pie]
+export const ChartList = [...Bars, ...Pies, ...Lines, ...Mores]

src/packages/components/Decorate/borders/borderCommon/index.ts

@@ -3,8 +3,8 @@ import image from '@/assets/images/chart/decorates/border.png'
 import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
-export const borderCommonConfig: ConfigType = {
+export const BorderCommonConfig: ConfigType = {
-  key: 'Border',
+  key: 'BorderCommon',
   title: '边框',
   category: ChatCategoryEnum.Border,
   node: BorderCommon,

src/packages/components/Decorate/borders/index.ts

@@ -1,3 +1,3 @@
-import { borderCommonConfig } from './BorderCommon/index'
+import { BorderCommonConfig } from './BorderCommon/index'
 
-export default [borderCommonConfig]
+export default [BorderCommonConfig]

src/packages/components/Information/Texts/TextCommon/index.ts

@@ -3,10 +3,10 @@ import image from '@/assets/images/chart/informations/text_static.png'
 import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../../index.d'
 
-export const textCommonConfig: ConfigType = {
+export const TextCommonConfig: ConfigType = {
   key: 'Text',
   title: '文字',
-  category: ChatCategoryEnum.text,
+  category: ChatCategoryEnum.TEXT,
   node: TextCommon,
   image
 }

src/packages/components/Information/Texts/index.ts

@@ -1,3 +1,3 @@
-import { textCommonConfig } from './TextCommon/index'
+import { TextCommonConfig } from './TextCommon/index'
 
-export default [textCommonConfig]
+export default [TextCommonConfig]

src/packages/components/Information/Titles/TitleCommon/index.ts

@@ -0,0 +1,12 @@
+import TitleCommon from './index.vue'
+import image from '@/assets/images/chart/informations/title_diamond.png'
+import { ConfigType } from '@/packages/index.d'
+import { ChatCategoryEnum } from '../../index.d'
+
+export const TitleCommonConfig: ConfigType = {
+  key: 'Text',
+  title: '标题',
+  category: ChatCategoryEnum.TITLE,
+  node: TitleCommon,
+  image
+}

src/packages/components/Information/Titles/TitleCommon/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    标题
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/packages/components/Information/Titles/index.ts

@@ -0,0 +1,3 @@
+import { TitleCommonConfig } from './TitleCommon/index'
+
+export default [TitleCommonConfig]

src/packages/components/Information/index.d.ts

@@ -1,3 +1,4 @@
 export enum ChatCategoryEnum {
-  text = '文本',
+  TEXT = '文本',
+  TITLE = '标题'
 }

src/packages/components/Information/index.ts

@@ -1,3 +1,4 @@
 import Texts from './Texts'
+import Titles from './Titles'
 
-export const InformationList = [...Texts]
+export const InformationList = [...Texts, ...Titles]

src/packages/components/Tables/TableCategory/index.ts

@@ -0,0 +1,12 @@
+import TableCategory from './index.vue'
+import image from '@/assets/images/chart/Tables/tables_categary.png'
+import { ConfigType } from '@/packages/index.d'
+import { ChatCategoryEnum } from '../index.d'
+
+export const TableCategoryConfig: ConfigType = {
+  key: 'TableCategory',
+  title: '归类表格',
+  category: ChatCategoryEnum.table,
+  node: TableCategory,
+  image
+}

src/packages/components/Tables/TableCategory/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    表格
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/packages/components/Tables/index.ts

@@ -1,3 +1,4 @@
-import { tableCommonConfig } from './tableCommon/index'
+import { TableCommonConfig } from './TableCommon/index'
+import { TableCategoryConfig } from './TableCategory/index'
 
-export const TableList = [tableCommonConfig]
+export const TableList = [TableCommonConfig, TableCategoryConfig]

src/packages/components/Tables/tableCommon/index.ts

@@ -3,8 +3,8 @@ import image from '@/assets/images/chart/Tables/tables.png'
 import { ConfigType } from '@/packages/index.d'
 import { ChatCategoryEnum } from '../index.d'
 
-export const tableCommonConfig: ConfigType = {
+export const TableCommonConfig: ConfigType = {
-  key: 'Border',
+  key: 'TableCommon',
   title: '表格',
   category: ChatCategoryEnum.table,
   node: TableCommon,

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

@@ -38,7 +38,16 @@ $centerHeight: 80px;
   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;
@@ -53,9 +62,11 @@ $centerHeight: 80px;
   .list-center {
     padding: 6px 0;
     height: $centerHeight;
+    overflow: hidden;
     .list-img {
       height: 100%;
       border-radius: 6px;
+      @extend .go-transition;
     }
   }
 }

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

@@ -10,13 +10,15 @@
       @update:value="clickItemHandle"
     />
     <div class="chart-content-list">
-      <ItemBox :menuOptions="packages.selectOptions" />
+      <n-scrollbar>
+        <ItemBox :menuOptions="packages.selectOptions" />
+      </n-scrollbar>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, markRaw, reactive, computed } from 'vue'
+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'
@@ -32,7 +34,7 @@ const props = defineProps({
 const settingStore = useSettingStore()
 
 const hidePackageOneCategory = computed(() => {
-  if (packages.categorysNum > 1) return true
+  if (packages.categorysNum > 2) return true
   return !settingStore.getHidePackageOneCategory
 })
 
@@ -45,7 +47,10 @@ let packages = reactive<{
   // 当前选择
   selectOptions: {},
   // 分类归档
-  categorys: {},
+  categorys: {
+    // 全部
+    '全部': []
+  },
   // 分类归档数量
   categorysNum: 0,
   // 存储不同类别组件进来的选中值
@@ -71,8 +76,8 @@ watch(
     newData.list.forEach((e: ConfigType) => {
       const value: ConfigType[] = (packages.categorys as any)[e.category]
       // @ts-ignore
-      packages.categorys[e.category] =
+      packages.categorys[e.category] = (value && value.length ? [...value, e] : [e])
-        value && value.length ? [...value, e] : [e]
+      packages.categorys['全部'].push(e)
     })
     for (const val in packages.categorys) {
       packages.categorysNum += 1
@@ -98,7 +103,7 @@ const clickItemHandle = (key: string) => {
 
 <style lang="scss" scoped>
 /* 此高度与 ContentBox 组件关联*/
-$topHeight: 60px;
+$topHeight: 36px;
 $menuWidth: 65px;
 @include go("chart-common") {
   display: flex;

src/views/chart/components/ContentCharts/hooks/asideHook.ts

@@ -30,7 +30,7 @@ const packagesListObj = {
     label: renderLang('信息')
   },
   [PackagesCategoryEnum.TABLES]: {
-    icon: renderIcon(GraphicalDataFlowIcon),
+    icon: renderIcon(TableSplitIcon),
     label: renderLang('表格')
   },
   [PackagesCategoryEnum.DECORATES]: {

src/views/chart/components/ContentDetails/index.vue

@@ -3,6 +3,7 @@
     class="go-content-layers go-boderbox"
     :class="{ scoped: !chartLayoutStore.getDetails }"
     :showTop="false"
+    :depth="2"
   >
     <n-tabs class="tabs-box" size="small" type="segment">
       <n-tab-pane