From 1a659d4a607c16a406d91b3ec0f5b65e1a8b176f Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Wed, 5 Jan 2022 20:52:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A1=B6=E9=83=A8?=
=?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/layout/components/Header/index.vue | 7 ++-
src/layout/components/HeaderPro/index.vue | 3 ++
src/plugins/icon.ts | 9 +++-
.../chartLayoutStore/chartLayoutStore.d.ts | 20 +++++++
src/views/chart/index.vue | 8 +--
.../layout/components/HeaderLeftBtn/index.vue | 35 +++++++++++--
.../layout/components/HeaderTitle/index.ts | 3 ++
.../layout/components/HeaderTitle/index.vue | 52 +++++++++++++++++++
.../items/components/ModalCard/index.vue | 2 +-
9 files changed, 126 insertions(+), 13 deletions(-)
create mode 100644 src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
create mode 100644 src/views/chart/layout/components/HeaderTitle/index.ts
create mode 100644 src/views/chart/layout/components/HeaderTitle/index.vue
diff --git a/src/layout/components/Header/index.vue b/src/layout/components/Header/index.vue
index 5c6896ec..8d742f59 100644
--- a/src/layout/components/Header/index.vue
+++ b/src/layout/components/Header/index.vue
@@ -1,12 +1,15 @@
<template>
<n-layout-header bordered class="go-header">
<header class="go-header-box">
- <div class="li">
+ <div>
<n-space>
<slot name="left"></slot>
</n-space>
</div>
- <div class="ri">
+ <div>
+ <slot name="center"></slot>
+ </div>
+ <div>
<n-space>
<slot name="ri-left"> </slot>
<LangSelect />
diff --git a/src/layout/components/HeaderPro/index.vue b/src/layout/components/HeaderPro/index.vue
index bc69d4d3..9a6cc34b 100644
--- a/src/layout/components/HeaderPro/index.vue
+++ b/src/layout/components/HeaderPro/index.vue
@@ -3,6 +3,9 @@
<template #left>
<slot name="left"></slot>
</template>
+ <template #center>
+ <slot name="center"></slot>
+ </template>
<template #ri-left>
<slot name="ri-left"></slot>
</template>
diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index eab1cbc5..faef3a20 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -31,7 +31,9 @@ import {
DuplicateOutline as DuplicateOutlineIcon,
Fish as FishIcon,
BarChart as BarChartIcon,
- Albums as AlbumsIcon
+ Layers as LayersIcon,
+ Prism as PrismIcon,
+ CubeOutline as CubeIcon
} from '@vicons/ionicons5'
// ionicons5 在这里
@@ -101,7 +103,10 @@ const ionicons5 = {
// 图表
BarChartIcon,
// 图层
- AlbumsIcon
+ LayersIcon,
+ // 组件详情设置（三棱镜）
+ PrismIcon,
+ CubeIcon
}
// https://www.xicons.org/#/ 还有很多
diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
new file mode 100644
index 00000000..b6f553cd
--- /dev/null
+++ b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
@@ -0,0 +1,20 @@
+import { ThemeEnum } from '@/enums/styleEnum'
+
+export interface ChartLayoutType {
+ // 图层控制
+ layers: true,
+ // 图表组件
+ charts: true,
+ // 详情设置
+ details: true,
+ // 对齐线
+ alignLine: true,
+ // 滤镜
+ filter: {
+ // 色相
+ // 饱和度
+ // 亮度
+ // 对比度
+ // 不透明度
+ }
+}
diff --git a/src/views/chart/index.vue b/src/views/chart/index.vue
index e632f9a0..37a720bc 100644
--- a/src/views/chart/index.vue
+++ b/src/views/chart/index.vue
@@ -5,13 +5,14 @@
<template #left>
<HeaderLeftBtn />
</template>
+ <template #center>
+ <HeaderTitle />
+ </template>
<template #ri-left>
<HeaderRightBtn />
</template>
</HeaderPro>
- <n-layout-content>
-
- </n-layout-content>
+ <n-layout-content> </n-layout-content>
</n-layout>
</div>
</template>
@@ -20,6 +21,7 @@
import { HeaderPro } from '@/layout/components/HeaderPro'
import { HeaderLeftBtn } from './layout/components/HeaderLeftBtn/index'
import { HeaderRightBtn } from './layout/components/HeaderRightBtn/index'
+import { HeaderTitle } from './layout/components/HeaderTitle/index'
</script>
<style lang="scss" scoped>
diff --git a/src/views/chart/layout/components/HeaderLeftBtn/index.vue b/src/views/chart/layout/components/HeaderLeftBtn/index.vue
index eb1bf861..347bba8a 100644
--- a/src/views/chart/layout/components/HeaderLeftBtn/index.vue
+++ b/src/views/chart/layout/components/HeaderLeftBtn/index.vue
@@ -1,5 +1,5 @@
<template>
- <n-space>
+ <n-space class="header-left-btn">
<n-tooltip
v-for="item in btnList"
:key="item.title"
@@ -7,7 +7,7 @@
trigger="hover"
>
<template #trigger>
- <n-button type="info" size="small" ghost>
+ <n-button type="info" size="small" ghost @click="item.fn">
<component :is="item.icon"></component>
</n-button>
</template>
@@ -20,20 +20,45 @@
<script setup lang="ts">
import { reactive } from 'vue'
-import { icon } from '@/plugins'
-const { AlbumsIcon, BarChartIcon } = icon.ionicons5
import { renderIcon } from '@/utils'
+import { icon } from '@/plugins'
+const { LayersIcon, BarChartIcon, PrismIcon } = icon.ionicons5
+
+const layers = () => {
+ console.log('选择了图层控制')
+}
+
+const charts = () => {
+ console.log('选择了图表组件')
+}
+
+const details = () => {
+ console.log('选择了详情')
+}
const btnList = reactive([
{
+ fn: layers,
select: true,
title: '图层控制',
- icon: renderIcon(AlbumsIcon)
+ icon: renderIcon(LayersIcon)
},
{
+ fn: charts,
select: true,
title: '图表组件',
icon: renderIcon(BarChartIcon)
+ },
+ {
+ fn: details,
+ select: true,
+ title: '详情设置',
+ icon: renderIcon(PrismIcon)
}
])
</script>
+<style lang="scss" scoped>
+.header-left-btn {
+ padding-right: 212px;
+}
+</style>
diff --git a/src/views/chart/layout/components/HeaderTitle/index.ts b/src/views/chart/layout/components/HeaderTitle/index.ts
new file mode 100644
index 00000000..19b5dbcb
--- /dev/null
+++ b/src/views/chart/layout/components/HeaderTitle/index.ts
@@ -0,0 +1,3 @@
+import HeaderTitle from './index.vue'
+
+export { HeaderTitle }
diff --git a/src/views/chart/layout/components/HeaderTitle/index.vue b/src/views/chart/layout/components/HeaderTitle/index.vue
new file mode 100644
index 00000000..744f61a6
--- /dev/null
+++ b/src/views/chart/layout/components/HeaderTitle/index.vue
@@ -0,0 +1,52 @@
+<template>
+ <n-space>
+ <n-icon size="20" :depth="3">
+ <FishIcon />
+ </n-icon>
+ <n-text @click="handleFocus">
+ 工作空间 -
+ <n-button v-show="!focus" secondary round size="tiny">
+ {{ comTitle }}
+ </n-button>
+ </n-text>
+
+ <n-input
+ v-show="focus"
+ ref="inputInstRef"
+ size="small"
+ type="text"
+ maxlength="16"
+ show-count
+ round
+ placeholder="请输入项目名称"
+ v-model:value.trim="title"
+ @blur="handleBlur"
+ />
+ </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, computed } from 'vue'
+import { icon } from '@/plugins'
+const { FishIcon } = icon.ionicons5
+
+const focus = ref<boolean>(false)
+const title = ref<string>('')
+const inputInstRef = ref(null)
+
+const comTitle = computed(() => {
+ title.value = title.value.replace(/\s/g,"");
+ return title.value.length ? title.value : '新项目'
+})
+
+const handleFocus = () => {
+ focus.value = true
+ nextTick(() => {
+ ;(<any>inputInstRef).value.focus()
+ })
+}
+
+const handleBlur = () => {
+ focus.value = false
+}
+</script>
diff --git a/src/views/project/items/components/ModalCard/index.vue b/src/views/project/items/components/ModalCard/index.vue
index 95634dd2..e943c746 100644
--- a/src/views/project/items/components/ModalCard/index.vue
+++ b/src/views/project/items/components/ModalCard/index.vue
@@ -36,7 +36,7 @@
<template #action>
<n-space class="list-footer" justify="space-between">
<n-text depth="3">
- {{$t('project.last_edit')}}：
+ {{$t('project.last_edit')}}:
<n-time :time="new Date()" format="yyyy-MM-dd hh:mm" />
</n-text>
<!-- 工具 -->