fix： 去除 layout 文件夹

src/views/chart/components/HeaderLeftBtn/index.ts

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

src/views/chart/components/HeaderLeftBtn/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <n-space class="header-left-btn">
+    <n-tooltip
+      v-for="item in btnList"
+      :key="item.title"
+      placement="bottom"
+      trigger="hover"
+    >
+      <template #trigger>
+        <n-button type="info" size="small" ghost @click="item.fn">
+          <component :is="item.icon"></component>
+        </n-button>
+      </template>
+      <span>
+        {{ item.title }}
+      </span>
+    </n-tooltip>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+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(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/components/HeaderRightBtn/index.ts

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

src/views/chart/components/HeaderRightBtn/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <n-space class="go-mt-0">
+    <n-button v-for="item in btnList" :key="item.title" ghost>
+      <template #icon>
+        <component :is="item.icon"></component>
+      </template>
+      <span>
+        {{ item.title }}
+      </span>
+    </n-button>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { renderIcon } from '@/utils'
+import { icon } from '@/plugins'
+const { DesktopOutlineIcon, SendIcon } = icon.ionicons5
+
+const btnList = reactive([
+  {
+    select: true,
+    title: '预览',
+    icon: renderIcon(DesktopOutlineIcon)
+  },
+  {
+    select: true,
+    title: '发布',
+    icon: renderIcon(SendIcon)
+  }
+])
+</script>
+<style lang="scss" scoped>
+.align-center {
+  margin-top: -4px;
+}
+</style>

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

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

src/views/chart/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>