diff --git a/package.json b/package.json
index d15c5830..055edbbd 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
"lint": "eslint \"{src}/**/*.{vue,ts,tsx}\" --fix --ext"
},
"dependencies": {
+ "@vicons/carbon": "^0.11.0",
"axios": "^0.23.0",
"crypto-ts": "^1.0.2",
"mockjs": "^1.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2a016fcb..fd4d102a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,7 @@ specifiers:
'@types/node': ^16.11.1
'@typescript-eslint/eslint-plugin': ^5.6.0
'@typescript-eslint/parser': ^5.6.0
+ '@vicons/carbon': ^0.11.0
'@vicons/ionicons5': ~0.11.0
'@vitejs/plugin-vue': ^1.9.3
'@vitejs/plugin-vue-jsx': ^1.2.0
@@ -36,6 +37,7 @@ specifiers:
vue-tsc: ^0.28.7
dependencies:
+ '@vicons/carbon': r2.cnpmjs.org/@vicons/carbon/0.11.0
axios: rg.cnpmjs.org/axios/0.23.0
crypto-ts: r2.cnpmjs.org/crypto-ts/1.0.2
mockjs: rg.cnpmjs.org/mockjs/1.1.0
@@ -134,6 +136,12 @@ packages:
version: 14.14.45
dev: false
+ r2.cnpmjs.org/@vicons/carbon/0.11.0:
+ resolution: {integrity: sha512-+Wkl8wOP1GR7jS+OKcsJ58NnZr4i+BZhbpLRtgpZQui1zFpYjoWinwvYKLjGKJ/oiR10Q237cBDjGwmMSzXqTg==, registry: http://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/@vicons/carbon/-/carbon-0.11.0.tgz}
+ name: '@vicons/carbon'
+ version: 0.11.0
+ dev: false
+
r2.cnpmjs.org/ansi-regex/5.0.1:
resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==, registry: http://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz}
name: ansi-regex
diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index 12c21cd2..c7e5d6e9 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -37,10 +37,16 @@ import {
ChevronBackOutline as ChevronBackOutlineIcon,
Flash as FlashIcon,
SettingsSharp as SettingsSharpIcon,
- Home as HomeIcon
+ Home as HomeIcon,
+ Card as CardIcon
} from '@vicons/ionicons5'
-// ionicons5 在这里
+import {
+ TableSplit as TableSplitIcon,
+ Roadmap as RoadmapIcon,
+ SpellCheck as SpellCheckIcon
+} from '@vicons/carbon'
+
const ionicons5 = {
// 帮助
HelpOutlineIcon,
@@ -53,7 +59,7 @@ const ionicons5 = {
// 退出
LogOutOutlineIcon,
// 锁
- LockClosedOutlineIcon,
+ LockClosedOutlineIcon,
// 人
PersonIcon,
// 人2
@@ -119,11 +125,23 @@ const ionicons5 = {
// 设置（齿轮）
SettingsSharpIcon,
// 回退
- HomeIcon
+ HomeIcon,
+ // 控件(卡片)
+ CardIcon
+}
+
+const carbon = {
+ // 信息
+ SpellCheckIcon,
+ // 图表
+ RoadmapIcon,
+ // 表格
+ TableSplitIcon
}
// https://www.xicons.org/#/ 还有很多
export const icon = {
- ionicons5
+ ionicons5,
+ carbon
}
diff --git a/src/styles/common/mixins/mixins.scss b/src/styles/common/mixins/mixins.scss
index 887beeb5..abc145e5 100644
--- a/src/styles/common/mixins/mixins.scss
+++ b/src/styles/common/mixins/mixins.scss
@@ -52,14 +52,12 @@
}
}
-//获取边框颜色
+//设置边框颜色
@mixin filter-border-color($target) {
@include themeify {
border-color: themed($target);
}
}
-
-//获取边框颜色
@mixin hover-border-color($target) {
@include themeify {
border: 1px solid themed($target);
diff --git a/src/styles/common/var.scss b/src/styles/common/var.scss
index 5bc7f8cf..95dfe8a0 100644
--- a/src/styles/common/var.scss
+++ b/src/styles/common/var.scss
@@ -17,7 +17,7 @@ $--color-light-bg-2: #f2f3f5;
$--color-light-bg-3: #e5e6eb;
$--color-light-bg-4: #c9cdd4;
$--color-light-bg-5: #bebebe;
-$--color-dark-border: #efeff5;
+$--color-light-border: #efeff5;
// 黑色
$--color-dark-black: #000;
@@ -42,6 +42,5 @@ $--filter-color-login-light: rgba(240, 240, 240, 0.8);
// 边框
$--border-radius-base: 8px;
-$--border-bottom-style: 1px solid $--color-dark-border;
// 阴影
$--border-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
diff --git a/src/views/chart/components/ContentBox/index.vue b/src/views/chart/components/ContentBox/index.vue
index 4dab72ca..849a3f6b 100644
--- a/src/views/chart/components/ContentBox/index.vue
+++ b/src/views/chart/components/ContentBox/index.vue
@@ -119,6 +119,10 @@ $topHeight: 36px;
margin-top: 2px;
}
}
+ .top {
+ border-bottom: 1px solid;
+ @include filter-border-color('background-color1');
+ }
.content {
height: calc(100vh - #{$--header-height} - #{$topHeight});
overflow: hidden;
diff --git a/src/views/chart/components/ContentCharts/components/ChartCommon/index.ts b/src/views/chart/components/ContentCharts/components/ChartCommon/index.ts
new file mode 100644
index 00000000..31fa457e
--- /dev/null
+++ b/src/views/chart/components/ContentCharts/components/ChartCommon/index.ts
@@ -0,0 +1,3 @@
+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
new file mode 100644
index 00000000..36ee7eba
--- /dev/null
+++ b/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue
@@ -0,0 +1,9 @@
+<template>
+ <div>
+ 我是图表咯
+ </div>
+</template>
+
+<script setup lang="Ts"></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/chart/components/ContentCharts/components/TableCommon/index.ts b/src/views/chart/components/ContentCharts/components/TableCommon/index.ts
new file mode 100644
index 00000000..a717f771
--- /dev/null
+++ b/src/views/chart/components/ContentCharts/components/TableCommon/index.ts
@@ -0,0 +1,3 @@
+import TableCommon from './index.vue'
+
+export { TableCommon }
diff --git a/src/views/chart/components/ContentCharts/components/TableCommon/index.vue b/src/views/chart/components/ContentCharts/components/TableCommon/index.vue
new file mode 100644
index 00000000..caa4a8c3
--- /dev/null
+++ b/src/views/chart/components/ContentCharts/components/TableCommon/index.vue
@@ -0,0 +1,9 @@
+<template>
+ <div>
+ 我是表格咯
+ </div>
+</template>
+
+<script setup lang="Ts"></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/chart/components/ContentCharts/components/TextCommon/index.ts b/src/views/chart/components/ContentCharts/components/TextCommon/index.ts
new file mode 100644
index 00000000..1e94511e
--- /dev/null
+++ b/src/views/chart/components/ContentCharts/components/TextCommon/index.ts
@@ -0,0 +1,3 @@
+import TextCommon from './index.vue'
+
+export { TextCommon }
diff --git a/src/views/chart/components/ContentCharts/components/TextCommon/index.vue b/src/views/chart/components/ContentCharts/components/TextCommon/index.vue
new file mode 100644
index 00000000..23687bd9
--- /dev/null
+++ b/src/views/chart/components/ContentCharts/components/TextCommon/index.vue
@@ -0,0 +1,9 @@
+<template>
+ <div>
+ 我是信息咯
+ </div>
+</template>
+
+<script setup lang="Ts"></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/chart/components/ContentCharts/index.vue b/src/views/chart/components/ContentCharts/index.vue
index 402b53bb..993cc044 100644
--- a/src/views/chart/components/ContentCharts/index.vue
+++ b/src/views/chart/components/ContentCharts/index.vue
@@ -2,35 +2,126 @@
<ContentBox
class="go-content-charts"
:class="{ scoped: !getCharts }"
- title="图表"
- :depth="2"
+ title="全部组件"
+ :depth="1"
:backIcon="false"
>
<template #icon>
<n-icon size="14" :depth="2">
- <BarChartIcon />
+ <!-- <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">
+ <keep-alive>
+ <component :is="selectNode"></component>
+ </keep-alive>
+ </div>
+ </div>
+ </aside>
</ContentBox>
</template>
<script setup lang="ts">
-import { toRefs } from 'vue'
+import { reactive, ref, toRefs, computed } from 'vue'
import { icon } from '@/plugins'
-const { BarChartIcon } = icon.ionicons5
+import { renderLang, renderIcon } from '@/utils'
import { ContentBox } from '../ContentBox/index'
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+
+import { ChartCommon } from './components/ChartCommon'
+import { TableCommon } from './components/TableCommon'
+import { TextCommon } from './components/TextCommon'
+
+const { BarChartIcon } = icon.ionicons5
+const { TableSplitIcon, RoadmapIcon, SpellCheckIcon } = icon.carbon
+
+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
+ }
+])
+
+// 记录选中值
+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
+}
</script>
<style lang="scss" scoped>
-$wight: 300px;
-$wightScoped: 80px;
+$width: 300px;
+$widthScoped: 80px;
+/* 此高度与 ContentBox 组件关联*/
+$topHeight: 36px;
@include go(content-charts) {
- width: $wight;
+ width: $width;
@extend .go-transition;
- &.scoped {
- width: $wightScoped;
+ &.scoped,
+ .menu-width {
+ width: $widthScoped;
+ }
+ .menu-width-box {
+ display: flex;
+ height: calc(100vh - #{$--header-height} - #{$topHeight});
+ .menu-width {
+ @include filter-bg-color('background-color2');
+ }
+ .menu-component-box {
+ width: $width - $widthScoped;
+ overflow: hidden;
+ }
+ }
+ @include deep() {
+ .n-menu-item-content {
+ padding: 0 12px !important;
+ }
+ .n-menu-item-content__icon {
+ margin-right: 0 !important;
+ }
}
}
</style>
diff --git a/src/views/chart/components/ContentLayers/index.vue b/src/views/chart/components/ContentLayers/index.vue
index 71b745f2..bce9aff1 100644
--- a/src/views/chart/components/ContentLayers/index.vue
+++ b/src/views/chart/components/ContentLayers/index.vue
@@ -3,6 +3,7 @@
class="go-content-layers"
:class="{ scoped: !chartLayoutStore.getLayers }"
title="图层"
+ :depth="2"
@back="backHandle"
>
<template #icon>
diff --git a/src/views/chart/components/HeaderLeftBtn/index.vue b/src/views/chart/components/HeaderLeftBtn/index.vue
index 1065a158..3887a99d 100644
--- a/src/views/chart/components/HeaderLeftBtn/index.vue
+++ b/src/views/chart/components/HeaderLeftBtn/index.vue
@@ -1,12 +1,19 @@
<template>
<n-space class="header-left-btn" :size="25">
- <n-button size="small" quaternary #icon @click="goHomeHandle()">
- <n-icon :depth="3">
- <HomeIcon />
- </n-icon>
+ <n-button size="small" quaternary @click="goHomeHandle()">
+ <template #icon>
+ <n-icon :depth="3">
+ <HomeIcon />
+ </n-icon>
+ </template>
</n-button>
<n-space>
- <n-tooltip v-for="item in btnList" :key="item.key" placement="bottom" trigger="hover">
+ <n-tooltip
+ v-for="item in btnList"
+ :key="item.key"
+ placement="bottom"
+ trigger="hover"
+ >
<template #trigger>
<n-button
:type="item.select ? 'success' : ''"
@@ -34,9 +41,9 @@ const { setItem } = useChartLayoutStore()
const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
type ItemType = {
- key: string;
- select: Ref<boolean> | boolean;
- title: string;
+ key: string
+ select: Ref<boolean> | boolean
+ title: string
icon: any
}
@@ -69,11 +76,9 @@ const goHomeHandle = () => {
goDialog({
message: '返回将不会保存任何操作',
isMaskClosable: true,
- onPositiveCallback: goHome,
+ onPositiveCallback: goHome
})
-
}
-
</script>
<style lang="scss" scoped>
.header-left-btn {