Pre Merge pull request !275 from kakajun/master

README.md

@@ -29,18 +29,6 @@
 
 <div>
   <div align="center" style="column-gap: 20px;">
-    <a
-      href="http://www.ccflow.org/?from=goviewGitee"
-      target="_blank"
-      style="
-        padding: 10px 20px;
-        display: inline-block;
-        border-radius: 10px;
-        background: #f9f9f9;
-      ">
-      <img src="readme/sponsors/ccflow-banner.png" alt="go-view" style="width: 250px;" width="250px" />
-    </a>
-    <span> &nbsp;</span>
     <a
       href="https://fastbee.cn/"
       target="_blank"
@@ -52,9 +40,8 @@
       ">
       <img src="readme/sponsors/fb-banner.gif" alt="go-view" style="width: 250px;" width="250px"/>
     </a>
-    <br/>
-    <br/>
-    <a
+    <span> &nbsp;</span>
+   <a
       href="https://www.mingdao.com?s=utm_88&utm_source=Goview&utm_medium=banner&utm_campaign=gitee&utm_content=IT%E8%B5%8B%E8%83%BD%E4%B8%9A%E5%8A%A1"
       target="_blank"
       style="
@@ -65,7 +52,9 @@
       ">
       <img src="readme/sponsors/mdy-banner.png" alt="go-view" style="width: 270px;" width="270px"/>
     </a>
-      <a
+    <br/>
+    <br/>
+    <a
       href="https://doc.hummingbird.winc-link.com?from=Goview"
       target="_blank"
       style="
@@ -76,8 +65,7 @@
       ">
       <img src="readme/sponsors/yingchuang-banner.png" alt="go-view" style="width: 270px;" width="270px"/>
     </a>
-    <br/>
-    <br/>
+    <span> &nbsp;</span>
     <a
       href="https://www.mtruning.club/chengDan/index.html"
       target="_blank"

src/views/chart/ContentConfigurations/index.vue

@@ -37,7 +37,13 @@
         </n-tabs>
 
         <!-- 编辑 -->
-        <n-tabs v-if="selectTarget" v-model:value="tabsSelect" class="tabs-box" size="small" type="segment">
+        <n-tabs
+          v-if="selectTarget"
+          v-model:value="tabsSelect"
+          class="tabs-box"
+          size="small"
+          type="segment"
+        >
           <n-tab-pane
             v-for="item in selectTarget.isGroup ? chartsDefaultTabList : chartsTabList"
             :key="item.key"
@@ -62,104 +68,107 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, watch, computed } from 'vue'
-import { icon } from '@/plugins'
-import { loadAsyncComponent } from '@/utils'
-import { ContentBox } from '../ContentBox/index'
-import { TabsEnum } from './index.d'
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { ref, toRefs, watch, computed } from "vue";
+import { icon } from "@/plugins";
+import { loadAsyncComponent } from "@/utils";
+import { ContentBox } from "../ContentBox/index";
+import { TabsEnum } from "./index.d";
+import { useChartLayoutStore } from "@/store/modules/chartLayoutStore/chartLayoutStore";
+import { ChartLayoutStoreEnum } from "@/store/modules/chartLayoutStore/chartLayoutStore.d";
+import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
 
-const { getDetails } = toRefs(useChartLayoutStore())
-const { setItem } = useChartLayoutStore()
-const chartEditStore = useChartEditStore()
+const { getDetails } = toRefs(useChartLayoutStore());
+const { setItem } = useChartLayoutStore();
+const chartEditStore = useChartEditStore();
 
-const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5
+const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5;
 
-const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
-const CanvasPage = loadAsyncComponent(() => import('./components/CanvasPage/index.vue'))
-const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'))
-const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'))
-const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'))
-const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'))
+const ContentEdit = loadAsyncComponent(() => import("../ContentEdit/index.vue"));
+const CanvasPage = loadAsyncComponent(() => import("./components/CanvasPage/index.vue"));
+const ChartSetting = loadAsyncComponent(() => import("./components/ChartSetting/index.vue"));
+const ChartData = loadAsyncComponent(() => import("./components/ChartData/index.vue"));
+const ChartEvent = loadAsyncComponent(() => import("./components/ChartEvent/index.vue"));
+const ChartAnimation = loadAsyncComponent(() => import("./components/ChartAnimation/index.vue"));
 
-const collapsed = ref<boolean>(getDetails.value)
-const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING)
+const collapsed = ref<boolean>(getDetails.value);
+const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING);
 
 const collapsedHandle = () => {
-  collapsed.value = true
-  setItem(ChartLayoutStoreEnum.DETAILS, true)
-}
+  collapsed.value = true;
+  setItem(ChartLayoutStoreEnum.DETAILS, true);
+};
 
 const expandHandle = () => {
-  collapsed.value = false
-  setItem(ChartLayoutStoreEnum.DETAILS, false)
-}
+  collapsed.value = false;
+  setItem(ChartLayoutStoreEnum.DETAILS, false);
+};
 
 const selectTarget = computed(() => {
-  const selectId = chartEditStore.getTargetChart.selectId
+  const selectId = chartEditStore.getTargetChart.selectId;
   // 排除多个
-  if (selectId.length !== 1) return undefined
-  const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
+  if (selectId.length !== 1) return undefined;
+  const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()];
   if (target?.isGroup) {
     // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    tabsSelect.value = TabsEnum.CHART_SETTING
+    tabsSelect.value = TabsEnum.CHART_SETTING;
   }
-  return target
-})
+  return target;
+});
 
-watch(getDetails, newData => {
+watch(getDetails, (newData) => {
   if (newData) {
-    collapsedHandle()
+    collapsedHandle();
   } else {
-    expandHandle()
+    expandHandle();
   }
-})
+});
 
 // 页面设置
 const globalTabList = [
   {
     key: TabsEnum.PAGE_SETTING,
-    title: '页面配置',
+    title: "页面配置",
     icon: DesktopOutlineIcon,
-    render: CanvasPage
-  }
-]
+    render: CanvasPage,
+  },
+];
 
 const chartsDefaultTabList = [
   {
     key: TabsEnum.CHART_SETTING,
-    title: '定制',
+    title: "定制",
     icon: ConstructIcon,
-    render: ChartSetting
+    render: ChartSetting,
   },
   {
     key: TabsEnum.CHART_ANIMATION,
-    title: '动画',
+    title: "动画",
     icon: LeafIcon,
-    render: ChartAnimation
-  }
-]
+    render: ChartAnimation,
+  },
+];
 
 const chartsTabList = [
   ...chartsDefaultTabList,
   {
     key: TabsEnum.CHART_DATA,
-    title: '数据',
+    title: "数据",
     icon: FlashIcon,
-    render: ChartData
+    render: ChartData,
   },
   {
     key: TabsEnum.CHART_EVENT,
-    title: '事件',
+    title: "事件",
     icon: RocketIcon,
-    render: ChartEvent
-  }
-]
+    render: ChartEvent,
+  },
+];
 </script>
 
 <style lang="scss" scoped>
+::v-deep .n-layout-toggle-bar {
+  z-index: 9;
+}
 @include go(content-configurations) {
   overflow: hidden;
   .tabs-box {