From b03a4957129e37225c167c2562021118d02117bf Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Fri, 14 Jan 2022 16:17:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Echart=E7=BB=84?=
=?UTF-8?q?=E4=BB=B6=E6=95=B0=E6=8D=AE=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.css | 85 ++++++++++++++
index.html | 45 ++++----
src/components/AppleControlBtn/index.vue | 51 +++++----
.../components/Chart/bar/barCommon/index.ts | 11 ++
.../components/Chart/bar/barCommon/index.vue | 13 +++
src/packages/components/Chart/index.ts | 3 +
.../Decorate/border/borderCommon/index.ts | 11 ++
.../Decorate/border/borderCommon/index.vue | 13 +++
src/packages/components/Decorate/index.ts | 3 +
src/packages/index.d.ts | 14 +++
src/packages/index.ts | 9 ++
.../modules/packagesStore/packagesStore.d.ts | 7 ++
.../modules/packagesStore/packagesStore.ts | 18 +++
src/styles/common/var.scss | 2 +-
.../components/ChartCommon/index.ts | 3 -
.../components/ChartCommon/index.vue | 54 ---------
.../ContentCharts/components/Charts/index.ts | 3 +
.../ContentCharts/components/Charts/index.vue | 108 ++++++++++++++++++
.../components/DecorateCommon/index.ts | 3 -
.../components/Decorates/index.ts | 3 +
.../{DecorateCommon => Decorates}/index.vue | 0
.../components/TableCommon/index.ts | 3 -
.../ContentCharts/components/Tables/index.ts | 3 +
.../{TableCommon => Tables}/index.vue | 0
.../components/TextCommon/index.ts | 3 -
.../ContentCharts/components/Texts/index.ts | 3 +
.../{TextCommon => Texts}/index.vue | 0
.../ContentCharts/hooks/asideHook.ts | 97 ++++++++++++++++
.../ContentCharts/hooks/layoutHook.ts | 20 ++++
.../chart/components/ContentCharts/index.vue | 89 ++-------------
types/config.d.ts | 0
types/global.d.ts | 3 +-
32 files changed, 493 insertions(+), 187 deletions(-)
create mode 100644 index.css
create mode 100644 src/packages/components/Chart/bar/barCommon/index.ts
create mode 100644 src/packages/components/Chart/bar/barCommon/index.vue
create mode 100644 src/packages/components/Chart/index.ts
create mode 100644 src/packages/components/Decorate/border/borderCommon/index.ts
create mode 100644 src/packages/components/Decorate/border/borderCommon/index.vue
create mode 100644 src/packages/components/Decorate/index.ts
create mode 100644 src/packages/index.d.ts
create mode 100644 src/store/modules/packagesStore/packagesStore.d.ts
create mode 100644 src/store/modules/packagesStore/packagesStore.ts
delete mode 100644 src/views/chart/components/ContentCharts/components/ChartCommon/index.ts
delete mode 100644 src/views/chart/components/ContentCharts/components/ChartCommon/index.vue
create mode 100644 src/views/chart/components/ContentCharts/components/Charts/index.ts
create mode 100644 src/views/chart/components/ContentCharts/components/Charts/index.vue
delete mode 100644 src/views/chart/components/ContentCharts/components/DecorateCommon/index.ts
create mode 100644 src/views/chart/components/ContentCharts/components/Decorates/index.ts
rename src/views/chart/components/ContentCharts/components/{DecorateCommon => Decorates}/index.vue (100%)
delete mode 100644 src/views/chart/components/ContentCharts/components/TableCommon/index.ts
create mode 100644 src/views/chart/components/ContentCharts/components/Tables/index.ts
rename src/views/chart/components/ContentCharts/components/{TableCommon => Tables}/index.vue (100%)
delete mode 100644 src/views/chart/components/ContentCharts/components/TextCommon/index.ts
create mode 100644 src/views/chart/components/ContentCharts/components/Texts/index.ts
rename src/views/chart/components/ContentCharts/components/{TextCommon => Texts}/index.vue (100%)
create mode 100644 src/views/chart/components/ContentCharts/hooks/asideHook.ts
create mode 100644 src/views/chart/components/ContentCharts/hooks/layoutHook.ts
delete mode 100644 types/config.d.ts
diff --git a/index.css b/index.css
new file mode 100644
index 00000000..3e422da2
--- /dev/null
+++ b/index.css
@@ -0,0 +1,85 @@
+* {
+ margin: 0;
+}
+.first-loading-wrp {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: #17171a;
+}
+.first-loading-wrp > h1 {
+ font-size: 128px;
+}
+.first-loading-wrp .loading-wrp {
+ padding: 98px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.dot {
+ animation: antRotate 1.2s infinite linear;
+ transform: rotate(45deg);
+ position: relative;
+ display: inline-block;
+ font-size: 32px;
+ width: 32px;
+ height: 32px;
+ box-sizing: border-box;
+}
+.dot i {
+ width: 14px;
+ height: 14px;
+ position: absolute;
+ display: block;
+ background-color: #1890ff;
+ border-radius: 100%;
+ transform: scale(0.75);
+ transform-origin: 50% 50%;
+ opacity: 0.3;
+ animation: antSpinMove 1s infinite linear alternate;
+}
+.dot i:nth-child(1) {
+ top: 0;
+ left: 0;
+}
+.dot i:nth-child(2) {
+ top: 0;
+ right: 0;
+ -webkit-animation-delay: 0.4s;
+ animation-delay: 0.4s;
+}
+.dot i:nth-child(3) {
+ right: 0;
+ bottom: 0;
+ -webkit-animation-delay: 0.8s;
+ animation-delay: 0.8s;
+}
+.dot i:nth-child(4) {
+ bottom: 0;
+ left: 0;
+ -webkit-animation-delay: 1.2s;
+ animation-delay: 1.2s;
+}
+@keyframes antRotate {
+ to {
+ -webkit-transform: rotate(405deg);
+ transform: rotate(405deg);
+ }
+}
+@-webkit-keyframes antRotate {
+ to {
+ -webkit-transform: rotate(405deg);
+ transform: rotate(405deg);
+ }
+}
+@keyframes antSpinMove {
+ to {
+ opacity: 1;
+ }
+}
+@-webkit-keyframes antSpinMove {
+ to {
+ opacity: 1;
+ }
+}
diff --git a/index.html b/index.html
index b65bd6d6..ca956930 100644
--- a/index.html
+++ b/index.html
@@ -1,26 +1,27 @@
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
-<head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
- <meta name="renderer" content="webkit"/>
- <meta
- name="viewport"
- content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
- />
- <link rel="icon" href="./favicon.ico"/>
- <title>GoView</title>
- <style>*{margin: 0;}.first-loading-wrp{display:flex;justify-content:center;align-items:center;height:100vh;background-color: #17171a;}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
-</head>
-<body>
-<div id="appProvider" style="display: none"></div>
-<div id="app">
- <div class="first-loading-wrp">
- <div class="loading-wrp">
- <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+ <meta name="renderer" content="webkit" />
+ <meta
+ name="viewport"
+ content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+ />
+ <link rel="icon" href="./favicon.ico" />
+ <title>GoView</title>
+ <link rel="stylesheet" href="./index.css">
+
+ </head>
+ <body>
+ <div id="appProvider" style="display: none;"></div>
+ <div id="app">
+ <div class="first-loading-wrp">
+ <div class="loading-wrp">
+ <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+ </div>
+ </div>
</div>
- </div>
-</div>
-<script type="module" src="/src/main.ts"></script>
-</body>
+ <script type="module" src="/src/main.ts"></script>
+ </body>
</html>
diff --git a/src/components/AppleControlBtn/index.vue b/src/components/AppleControlBtn/index.vue
index b377dda4..21d1063f 100644
--- a/src/components/AppleControlBtn/index.vue
+++ b/src/components/AppleControlBtn/index.vue
@@ -3,7 +3,7 @@
<template v-for="item in filterBtnList" :key="item.key">
<div
class="btn"
- :class="[item.key, disabled && 'disabled']"
+ :class="[item.key, disabled && 'disabled', mini && 'mini']"
@click.stop="handleClick(item.key)"
>
<n-icon size="10" class="icon-base" :class="{ hover: !disabled }">
@@ -21,6 +21,12 @@ import { screenfullFn } from '@/utils'
const emit = defineEmits(['close', 'remove', 'resize', 'fullResize'])
const props = defineProps({
+ // mini 版本
+ mini: {
+ request: false,
+ type: Boolean,
+ default: false
+ },
// 禁用所有按钮
disabled: {
request: false,
@@ -55,26 +61,26 @@ const isFull = computed(() => {
})
const btnList: {
- title: string,
- key: "close" | "remove" | "resize" | "fullResize",
+ title: string
+ key: 'close' | 'remove' | 'resize' | 'fullResize'
icon: any
}[] = [
- {
- title: '关闭',
- key: 'close',
- icon: CloseIcon
- },
- {
- title: '缩小',
- key: 'remove',
- icon: RemoveIcon
- },
- {
- title: isFull ? '缩小' : '放大',
- key: props.narrow ? 'fullResize' : 'resize',
- icon: ResizeIcon
- }
- ]
+ {
+ title: '关闭',
+ key: 'close',
+ icon: CloseIcon
+ },
+ {
+ title: '缩小',
+ key: 'remove',
+ icon: RemoveIcon
+ },
+ {
+ title: isFull ? '缩小' : '放大',
+ key: props.narrow ? 'fullResize' : 'resize',
+ icon: ResizeIcon
+ }
+]
const handleClick = (key: 'close' | 'remove' | 'resize' | 'fullResize') => {
if (key === 'fullResize') screenfullFn()
@@ -85,7 +91,7 @@ const handleClick = (key: 'close' | 'remove' | 'resize' | 'fullResize') => {
</script>
<style lang="scss" scoped>
-@include go("apple-control-btn") {
+@include go('apple-control-btn') {
display: flex;
&:hover {
.btn {
@@ -105,6 +111,11 @@ const handleClick = (key: 'close' | 'remove' | 'resize' | 'fullResize') => {
color: $--color-text;
font-weight: bold;
border-radius: 50%;
+ &.mini {
+ width: 10px;
+ height: 10px;
+ margin: 0 2px;
+ }
&.disabled {
pointer-events: none;
}
diff --git a/src/packages/components/Chart/bar/barCommon/index.ts b/src/packages/components/Chart/bar/barCommon/index.ts
new file mode 100644
index 00000000..d8cd9c49
--- /dev/null
+++ b/src/packages/components/Chart/bar/barCommon/index.ts
@@ -0,0 +1,11 @@
+import barCommon from './index.vue'
+import barImg from '@/assets/images/chart/bar_y.png'
+import { ConfigType } from '@/packages/index.d'
+
+// 柱状图
+export const barCommonConfig: ConfigType = {
+ key: 'Bar',
+ title: '基础',
+ node: barCommon,
+ image: barImg
+}
diff --git a/src/packages/components/Chart/bar/barCommon/index.vue b/src/packages/components/Chart/bar/barCommon/index.vue
new file mode 100644
index 00000000..f3abbb36
--- /dev/null
+++ b/src/packages/components/Chart/bar/barCommon/index.vue
@@ -0,0 +1,13 @@
+<template>
+ <div>
+ 柱状图组件渲染
+ </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/packages/components/Chart/index.ts b/src/packages/components/Chart/index.ts
new file mode 100644
index 00000000..e0ef5df2
--- /dev/null
+++ b/src/packages/components/Chart/index.ts
@@ -0,0 +1,3 @@
+import { barCommonConfig } from './bar/barCommon/index'
+
+export const BarList = [barCommonConfig]
diff --git a/src/packages/components/Decorate/border/borderCommon/index.ts b/src/packages/components/Decorate/border/borderCommon/index.ts
new file mode 100644
index 00000000..bfb03a8f
--- /dev/null
+++ b/src/packages/components/Decorate/border/borderCommon/index.ts
@@ -0,0 +1,11 @@
+import BorderCommon from './index.vue'
+import barImg from '@/assets/images/chart/bar_y.png'
+import { ConfigType } from '@/packages/index.d'
+
+// 柱状图
+export const barCommonConfig: ConfigType = {
+ key: 'Border',
+ title: '柱状图',
+ node: BorderCommon,
+ coverGraph: barImg
+}
diff --git a/src/packages/components/Decorate/border/borderCommon/index.vue b/src/packages/components/Decorate/border/borderCommon/index.vue
new file mode 100644
index 00000000..f3abbb36
--- /dev/null
+++ b/src/packages/components/Decorate/border/borderCommon/index.vue
@@ -0,0 +1,13 @@
+<template>
+ <div>
+ 柱状图组件渲染
+ </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/packages/components/Decorate/index.ts b/src/packages/components/Decorate/index.ts
new file mode 100644
index 00000000..401a72ce
--- /dev/null
+++ b/src/packages/components/Decorate/index.ts
@@ -0,0 +1,3 @@
+import { barCommonConfig } from './border/borderCommon/index'
+
+export const BarList = [barCommonConfig]
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
new file mode 100644
index 00000000..dca310fd
--- /dev/null
+++ b/src/packages/index.d.ts
@@ -0,0 +1,14 @@
+import { Component } from '@/router/types'
+
+// import { ConfigType } from '@/packages/index.d'
+export type ConfigType = {
+ key: string
+ title: string
+ node: Component
+ image: string
+ [T: string]: unknown
+}
+
+export type PackagesType = {
+ Charts: ConfigType[]
+}
diff --git a/src/packages/index.ts b/src/packages/index.ts
index e69de29b..a26ebf5f 100644
--- a/src/packages/index.ts
+++ b/src/packages/index.ts
@@ -0,0 +1,9 @@
+import { PackagesType } from '@/packages/index.d'
+import { BarList } from '@/packages/components/Chart/index'
+
+// 所有图表
+let packagesList: PackagesType = {
+ Charts: BarList
+}
+
+export { packagesList }
diff --git a/src/store/modules/packagesStore/packagesStore.d.ts b/src/store/modules/packagesStore/packagesStore.d.ts
new file mode 100644
index 00000000..b5100701
--- /dev/null
+++ b/src/store/modules/packagesStore/packagesStore.d.ts
@@ -0,0 +1,7 @@
+import { PackagesType, ConfigType } from '@/packages/index.d'
+
+export { ConfigType }
+
+export interface PackagesStoreType {
+ packagesList: PackagesType
+}
diff --git a/src/store/modules/packagesStore/packagesStore.ts b/src/store/modules/packagesStore/packagesStore.ts
new file mode 100644
index 00000000..93fef87b
--- /dev/null
+++ b/src/store/modules/packagesStore/packagesStore.ts
@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia'
+import { PackagesStoreType, ConfigType } from './packagesStore.d'
+import { packagesList } from '@/packages/index'
+
+export const usePackagesStore = defineStore({
+ id: 'usePackagesStore',
+ state: (): PackagesStoreType => ({
+ packagesList
+ }),
+ getters: {
+ getPackagesList(): ConfigType | {} {
+ if (this.packagesList && this.packagesList.charts) {
+ return this.packagesList.charts
+ }
+ return {}
+ }
+ }
+})
diff --git a/src/styles/common/var.scss b/src/styles/common/var.scss
index 13787d32..d08beb2e 100644
--- a/src/styles/common/var.scss
+++ b/src/styles/common/var.scss
@@ -21,7 +21,7 @@ $--color-light-bg-2: #f2f3f5;
$--color-light-bg-2-shallow: lighten($--color-light-bg-2, $--light-shalow);
$--color-light-bg-3: #e5e6eb;
$--color-light-bg-3-shallow: lighten($--color-light-bg-3, $--light-shalow);
-$--color-light-bg-4: #c9cdd4;
+$--color-light-bg-4: #e3e3e4;
$--color-light-bg-4-shallow: lighten($--color-light-bg-4, $--light-shalow);
$--color-light-bg-5: #bebebe;
$--color-light-bg-5-shallow: lighten($--color-light-bg-5, $--light-shalow);
diff --git a/src/views/chart/components/ContentCharts/components/ChartCommon/index.ts b/src/views/chart/components/ContentCharts/components/ChartCommon/index.ts
deleted file mode 100644
index 31fa457e..00000000
--- a/src/views/chart/components/ContentCharts/components/ChartCommon/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import ChartCommon from './index.vue'
-
-export { ChartCommon }
\ No newline at end of file
diff --git a/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue b/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue
deleted file mode 100644
index b4afcc42..00000000
--- a/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
- <div class="go-chart-common">
- <n-menu
- class="common-menu-width"
- v-model:value="selectValue"
- :options="menuOptions"
- :icon-size="16"
- :indent="18"
- />
- <div>
- 右侧的小组将列表
- </div>
- </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref } from 'vue'
-import { renderLang } from '@/utils'
-
-const menuOptions = reactive([
- {
- key: 'ChartCommon',
- label: renderLang('图表')
- },
- {
- key: 'TextCommon',
- label: renderLang('信息')
- },
- {
- key: 'TableCommon',
- label: renderLang('表格')
- },
- {
- key: 'DecorateCommon',
- label: renderLang('装饰')
- }
-])
-
-
-
-const selectValue = ref<string>(menuOptions[0]['key'])
-</script>
-
-<style lang="scss" scoped>
-/* 列表的宽度 */
-$topHeight: 36px;
-@include go('chart-common') {
- display: flex;
- height: calc(100vh - #{$--header-height} - #{$topHeight});
- .common-menu-width {
- @include filter-bg-color('background-color2-shallow');
- }
-}
-</style>
diff --git a/src/views/chart/components/ContentCharts/components/Charts/index.ts b/src/views/chart/components/ContentCharts/components/Charts/index.ts
new file mode 100644
index 00000000..9b34a4bc
--- /dev/null
+++ b/src/views/chart/components/ContentCharts/components/Charts/index.ts
@@ -0,0 +1,3 @@
+import Charts from './index.vue'
+
+export { Charts }
diff --git a/src/views/chart/components/ContentCharts/components/Charts/index.vue b/src/views/chart/components/ContentCharts/components/Charts/index.vue
new file mode 100644
index 00000000..4eaad232
--- /dev/null
+++ b/src/views/chart/components/ContentCharts/components/Charts/index.vue
@@ -0,0 +1,108 @@
+<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: 0 15px;
+ @include filter-bg-color('background-color4');
+ &-text {
+ font-size: 12px;
+ margin-left: 8px;
+ }
+ }
+ .list-center {
+ padding: 10px 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>
diff --git a/src/views/chart/components/ContentCharts/components/DecorateCommon/index.ts b/src/views/chart/components/ContentCharts/components/DecorateCommon/index.ts
deleted file mode 100644
index 8be65690..00000000
--- a/src/views/chart/components/ContentCharts/components/DecorateCommon/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import DecorateCommon from './index.vue'
-
-export { DecorateCommon }
diff --git a/src/views/chart/components/ContentCharts/components/Decorates/index.ts b/src/views/chart/components/ContentCharts/components/Decorates/index.ts
new file mode 100644
index 00000000..18e31ce5
--- /dev/null
+++ b/src/views/chart/components/ContentCharts/components/Decorates/index.ts
@@ -0,0 +1,3 @@
+import Decorates from './index.vue'
+
+export { Decorates }
diff --git a/src/views/chart/components/ContentCharts/components/DecorateCommon/index.vue b/src/views/chart/components/ContentCharts/components/Decorates/index.vue
similarity index 100%
rename from src/views/chart/components/ContentCharts/components/DecorateCommon/index.vue
rename to src/views/chart/components/ContentCharts/components/Decorates/index.vue
diff --git a/src/views/chart/components/ContentCharts/components/TableCommon/index.ts b/src/views/chart/components/ContentCharts/components/TableCommon/index.ts
deleted file mode 100644
index a717f771..00000000
--- a/src/views/chart/components/ContentCharts/components/TableCommon/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import TableCommon from './index.vue'
-
-export { TableCommon }
diff --git a/src/views/chart/components/ContentCharts/components/Tables/index.ts b/src/views/chart/components/ContentCharts/components/Tables/index.ts
new file mode 100644
index 00000000..315cfb7b
--- /dev/null
+++ b/src/views/chart/components/ContentCharts/components/Tables/index.ts
@@ -0,0 +1,3 @@
+import Tables from './index.vue'
+
+export { Tables }
diff --git a/src/views/chart/components/ContentCharts/components/TableCommon/index.vue b/src/views/chart/components/ContentCharts/components/Tables/index.vue
similarity index 100%
rename from src/views/chart/components/ContentCharts/components/TableCommon/index.vue
rename to src/views/chart/components/ContentCharts/components/Tables/index.vue
diff --git a/src/views/chart/components/ContentCharts/components/TextCommon/index.ts b/src/views/chart/components/ContentCharts/components/TextCommon/index.ts
deleted file mode 100644
index 1e94511e..00000000
--- a/src/views/chart/components/ContentCharts/components/TextCommon/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import TextCommon from './index.vue'
-
-export { TextCommon }
diff --git a/src/views/chart/components/ContentCharts/components/Texts/index.ts b/src/views/chart/components/ContentCharts/components/Texts/index.ts
new file mode 100644
index 00000000..084b3202
--- /dev/null
+++ b/src/views/chart/components/ContentCharts/components/Texts/index.ts
@@ -0,0 +1,3 @@
+import Texts from './index.vue'
+
+export { Texts }
diff --git a/src/views/chart/components/ContentCharts/components/TextCommon/index.vue b/src/views/chart/components/ContentCharts/components/Texts/index.vue
similarity index 100%
rename from src/views/chart/components/ContentCharts/components/TextCommon/index.vue
rename to src/views/chart/components/ContentCharts/components/Texts/index.vue
diff --git a/src/views/chart/components/ContentCharts/hooks/asideHook.ts b/src/views/chart/components/ContentCharts/hooks/asideHook.ts
new file mode 100644
index 00000000..0f9e6877
--- /dev/null
+++ b/src/views/chart/components/ContentCharts/hooks/asideHook.ts
@@ -0,0 +1,97 @@
+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 { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
+// 图标
+const { BarChartIcon } = icon.ionicons5
+const {
+ TableSplitIcon,
+ RoadmapIcon,
+ SpellCheckIcon,
+ GraphicalDataFlowIcon
+} = icon.carbon
+
+// 图表
+const { packagesList } = usePackagesStore()
+const menuOptions: any[] = reactive([])
+
+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
+ }
+ ],
+])
+
+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]
+ })
+})
+
+// 记录选中值
+let beforeSelect: string = menuOptions[0]['key']
+const selectValue = ref<string>(menuOptions[0]['key'])
+// 选中的对象值
+const selecOptions = ref(menuOptions[0])
+
+// 点击 item
+const clickItemHandle = <T extends { node: any }>(key: string, item: T) => {
+ // 处理渲染的 node
+ selecOptions.value = item
+ // 处理折叠
+ if (beforeSelect === key) {
+ setItem('charts', !getCharts.value)
+ } else {
+ setItem('charts', true)
+ }
+ beforeSelect = key
+}
+
+export {
+ getCharts,
+ BarChartIcon,
+ themeColor,
+ selecOptions,
+ selectValue,
+ clickItemHandle,
+ menuOptions
+}
diff --git a/src/views/chart/components/ContentCharts/hooks/layoutHook.ts b/src/views/chart/components/ContentCharts/hooks/layoutHook.ts
new file mode 100644
index 00000000..1e355338
--- /dev/null
+++ b/src/views/chart/components/ContentCharts/hooks/layoutHook.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
+}
\ No newline at end of file
diff --git a/src/views/chart/components/ContentCharts/index.vue b/src/views/chart/components/ContentCharts/index.vue
index 5b0180de..c01f6c62 100644
--- a/src/views/chart/components/ContentCharts/index.vue
+++ b/src/views/chart/components/ContentCharts/index.vue
@@ -25,7 +25,7 @@
<div class="menu-component-box">
<transition name="component-fade" mode="out-in">
<keep-alive>
- <component :is="selectNode"></component>
+ <component :is="selecOptions.node" :packagesList="selecOptions.packagesList" :key="selectValue"></component>
</keep-alive>
</transition>
</div>
@@ -36,86 +36,21 @@
<script setup lang="ts">
import { reactive, ref, toRefs } from 'vue'
-import { icon } from '@/plugins'
-import { renderLang, renderIcon } from '@/utils'
import { ContentBox } from '../ContentBox/index'
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { useDesignStore } from '@/store/modules/designStore/designStore'
-
-import { ChartCommon } from './components/ChartCommon'
-import { TableCommon } from './components/TableCommon'
-import { TextCommon } from './components/TextCommon'
-import { DecorateCommon } from './components/DecorateCommon'
-
-// 图标
-const { BarChartIcon } = icon.ionicons5
-const {
- TableSplitIcon,
- RoadmapIcon,
- SpellCheckIcon,
- GraphicalDataFlowIcon
-} = icon.carbon
-
-// 全局颜色
-const designStore = useDesignStore()
-const themeColor = ref(designStore.getAppTheme)
-
-// 结构控制
-const { setItem } = useChartLayoutStore()
-const { getCharts } = toRefs(useChartLayoutStore())
-
-// 菜单
-const collapsed = ref(false)
-const menuOptions = reactive([
- {
- key: 'ChartCommon',
- icon: renderIcon(RoadmapIcon),
- label: renderLang('图表'),
- node: ChartCommon
- },
- {
- key: 'TextCommon',
- icon: renderIcon(SpellCheckIcon),
- label: renderLang('信息'),
- node: TableCommon
- },
- {
- key: 'TableCommon',
- icon: renderIcon(TableSplitIcon),
- label: renderLang('表格'),
- node: TextCommon
- },
- {
- key: 'DecorateCommon',
- icon: renderIcon(GraphicalDataFlowIcon),
- label: renderLang('装饰'),
- node: DecorateCommon
- }
-])
-
-// 记录选中值
-let beforeSelect: string = menuOptions[0]['key']
-const selectValue = ref<string>(menuOptions[0]['key'])
-// 渲染的组件控制
-const selectNode = ref(menuOptions[0]['node'])
-
-// 点击 item
-const clickItemHandle = <T extends { node: any }>(key: string, item: T) => {
- // 处理渲染的 node
- selectNode.value = item.node
- // 处理折叠
- if (beforeSelect === key) {
- setItem('charts', !getCharts.value)
- } else {
- setItem('charts', true)
- }
- beforeSelect = key
-}
+import {
+ getCharts,
+ BarChartIcon,
+ themeColor,
+ selecOptions,
+ selectValue,
+ clickItemHandle,
+ menuOptions
+} from './hooks/asideHook'
</script>
<style lang="scss" scoped>
/* 整体宽度 */
-$width: 300px;
+$width: 330px;
/* 列表的宽度 */
$widthScoped: 65px;
/* 此高度与 ContentBox 组件关联*/
@@ -162,7 +97,7 @@ $topHeight: 36px;
display: flex;
flex-direction: column;
padding: 6px 12px !important;
- font-size: 12px !important;
+ font-size: 14px !important;
}
.n-menu-item-content__icon {
font-size: 18px !important;
diff --git a/types/config.d.ts b/types/config.d.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/types/global.d.ts b/types/global.d.ts
index d0448a1a..7d5bb691 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -4,4 +4,5 @@ interface Window {
$dialog: any
$t: any
}
-declare type Recordable<T = any> = Record<string, T>
+
+declare type Recordable<T = any> = Record<string, T>
\ No newline at end of file