diff --git a/package.json b/package.json
index 055edbbd..85ccad51 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
},
"dependencies": {
"@vicons/carbon": "^0.11.0",
+ "animate.css": "^4.1.1",
"axios": "^0.23.0",
"crypto-ts": "^1.0.2",
"mockjs": "^1.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fd4d102a..669d9e21 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,6 +10,7 @@ specifiers:
'@vitejs/plugin-vue-jsx': ^1.2.0
'@vue/compiler-sfc': ^3.2.20
'@vueuse/core': ^7.3.0
+ animate.css: ^4.1.1
axios: ^0.23.0
crypto-ts: ^1.0.2
default-passive-events: ^2.0.0
@@ -38,6 +39,7 @@ specifiers:
dependencies:
'@vicons/carbon': r2.cnpmjs.org/@vicons/carbon/0.11.0
+ animate.css: r2.cnpmjs.org/animate.css/4.1.1
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
@@ -142,6 +144,12 @@ packages:
version: 0.11.0
dev: false
+ r2.cnpmjs.org/animate.css/4.1.1:
+ resolution: {integrity: sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==, registry: http://r.cnpmjs.org/, tarball: https://r2.cnpmjs.org/animate.css/-/animate.css-4.1.1.tgz}
+ name: animate.css
+ version: 4.1.1
+ 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/layout/components/TransitionMain/index.vue b/src/layout/components/TransitionMain/index.vue
index 73ec2715..e16e023e 100644
--- a/src/layout/components/TransitionMain/index.vue
+++ b/src/layout/components/TransitionMain/index.vue
@@ -1,7 +1,7 @@
<template>
<router-view #default="{ Component, route }">
<!-- todo 动画暂时不生效，待处理 -->
- <transition name="v-modal" mode="out-in" appear>
+ <transition name="fade" mode="out-in" appear>
<component
v-if="route.noKeepAlive"
:is="Component"
diff --git a/src/main.ts b/src/main.ts
index 2a07c89a..d1ad1f6f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,9 @@ import { setupNaive, setupDirectives, setupCustomComponents } from '@/plugins'
import { AppProvider } from '@/components/AppProvider/index'
import { setHtmlTheme } from '@/utils'
+// 引入动画
+import 'animate.css/animate.min.css'
+
async function appInit() {
const appProvider = createApp(AppProvider)
diff --git a/src/plugins/customComponents.ts b/src/plugins/customComponents.ts
index 9d3be473..29bd7710 100644
--- a/src/plugins/customComponents.ts
+++ b/src/plugins/customComponents.ts
@@ -2,7 +2,7 @@ import type { App } from 'vue'
import { Skeleton } from '@/components/Skeleton'
/**
- * 全局注册自定义组件 待完善
+ * 全局注册自定义组件
* @param app
*/
export function setupCustomComponents(app: App) {
diff --git a/src/styles/common/animation.scss b/src/styles/common/animation.scss
index 09bdf463..5720d743 100644
--- a/src/styles/common/animation.scss
+++ b/src/styles/common/animation.scss
@@ -30,17 +30,30 @@
opacity: 0;
}
100% {
+ opacity: 1;
}
}
@keyframes v-modal-out {
0% {
+ opacity: 1;
}
100% {
opacity: 0;
}
}
+// 渐变
+.fade-enter,
+.fade-leave-to {
+ opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity .2s ease;
+}
+
// 移动动画
.list-complete-item {
transition: all 1s;
diff --git a/src/views/chart/components/ContentBox/index.vue b/src/views/chart/components/ContentBox/index.vue
index 849a3f6b..063ae2b4 100644
--- a/src/views/chart/components/ContentBox/index.vue
+++ b/src/views/chart/components/ContentBox/index.vue
@@ -22,10 +22,8 @@
</n-space>
</div>
<aside class="content">
- <n-scrollbar x-scrollable>
- <n-scrollbar>
- <slot></slot>
- </n-scrollbar>
+ <n-scrollbar>
+ <slot></slot>
</n-scrollbar>
</aside>
<div v-if="showBottom" class="bottom go-mt-0">
diff --git a/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue b/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue
index 36ee7eba..4919edeb 100644
--- a/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue
+++ b/src/views/chart/components/ContentCharts/components/ChartCommon/index.vue
@@ -1,9 +1,54 @@
<template>
- <div>
- 我是图表咯
+ <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"></script>
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { renderLang } from '@/utils'
-<style lang="scss" scoped></style>
+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');
+ }
+}
+</style>
diff --git a/src/views/chart/components/ContentCharts/index.vue b/src/views/chart/components/ContentCharts/index.vue
index 1df9fbe5..b41f18c5 100644
--- a/src/views/chart/components/ContentCharts/index.vue
+++ b/src/views/chart/components/ContentCharts/index.vue
@@ -23,9 +23,11 @@
@update:value="clickItemHandle"
/>
<div class="menu-component-box">
- <keep-alive>
- <component :is="selectNode"></component>
- </keep-alive>
+ <transition name="component-fade" mode="out-in">
+ <keep-alive>
+ <component :is="selectNode"></component>
+ </keep-alive>
+ </transition>
</div>
</div>
</aside>
@@ -33,7 +35,7 @@
</template>
<script setup lang="ts">
-import { reactive, ref, toRefs, computed } from 'vue'
+import { reactive, ref, toRefs } from 'vue'
import { icon } from '@/plugins'
import { renderLang, renderIcon } from '@/utils'
import { ContentBox } from '../ContentBox/index'
@@ -47,7 +49,12 @@ import { DecorateCommon } from './components/DecorateCommon'
// 图标
const { BarChartIcon } = icon.ionicons5
-const { TableSplitIcon, RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon } = icon.carbon
+const {
+ TableSplitIcon,
+ RoadmapIcon,
+ SpellCheckIcon,
+ GraphicalDataFlowIcon
+} = icon.carbon
// 全局颜色
const designStore = useDesignStore()
@@ -104,7 +111,6 @@ const clickItemHandle = <T extends { node: any }>(key: string, item: T) => {
}
beforeSelect = key
}
-
</script>
<style lang="scss" scoped>
@@ -126,40 +132,42 @@ $topHeight: 36px;
display: flex;
height: calc(100vh - #{$--header-height} - #{$topHeight});
.menu-width {
- @include filter-bg-color('background-color2');
+ flex-shrink: 0;
+ @include filter-bg-color('background-color3');
}
.menu-component-box {
+ flex-shrink: 0;
width: $width - $widthScoped;
overflow: hidden;
}
}
@include deep() {
- .n-menu-item {
- /* position: relative; */
- height: auto !important;
- &.n-menu-item--selected {
- &::after {
- content: '';
- position: absolute;
- left: 2px;
- top: 0;
- height: 100%;
- width: 3px;
- background-color: v-bind('themeColor');
- /* background-color: rgb(62, 202, 172); */
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
+ .menu-width {
+ .n-menu-item {
+ height: auto !important;
+ &.n-menu-item--selected {
+ &::after {
+ content: '';
+ position: absolute;
+ left: 2px;
+ top: 0;
+ height: 100%;
+ width: 3px;
+ background-color: v-bind('themeColor');
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ }
+ }
+ .n-menu-item-content {
+ display: flex;
+ flex-direction: column;
+ padding: 6px 12px !important;
+ font-size: 12px !important;
+ }
+ .n-menu-item-content__icon {
+ font-size: 18px !important;
+ margin-right: 0 !important;
}
- }
- .n-menu-item-content {
- display: flex;
- flex-direction: column;
- padding: 6px 12px !important;
- font-size: 12px !important;
- }
- .n-menu-item-content__icon {
- font-size: 18px !important;
- margin-right: 0 !important;
}
}
}
diff --git a/src/views/chart/index.vue b/src/views/chart/index.vue
index 50804754..ef22c6fd 100644
--- a/src/views/chart/index.vue
+++ b/src/views/chart/index.vue
@@ -37,7 +37,8 @@ import { ContentDetails } from './components/ContentDetails/index'
<style lang="scss" scoped>
$height: 100vh;
@include go('bg-point') {
-
+ @include background-image('background-point');
+ @extend .go-point-bg;
}
@include go('chart') {
height: $height;