feat: 新增顶部功能

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 />

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>

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/#/ 还有很多

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: {
+    // 色相
+    // 饱和度
+    // 亮度
+    // 对比度
+    // 不透明度
+  }
+}

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>

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>

src/views/chart/layout/components/HeaderTitle/index.ts

@@ -0,0 +1,3 @@
+import HeaderTitle from './index.vue'
+
+export { HeaderTitle }

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>

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>
           <!-- 工具 -->