fix: 修改闭合组件不规范的问题

src/App.vue

@@ -5,10 +5,10 @@
     :date-locale="dateZhCN"
     :theme-overrides="getThemeOverrides"
   >
-    <AppProvider>
-      <I18n />
-      <router-view />
-    </AppProvider>
+    <app-provider>
+      <i18n></i18n>
+      <router-view></router-view>
+    </app-provider>
   </n-config-provider>
 </template>
 

src/components/AppProvider/AppProvider.vue

@@ -1,11 +1,11 @@
 <template>
   <n-loading-bar-provider>
     <n-dialog-provider>
-      <DialogContent />
-      <LoadingContent />
+      <dialog-content></dialog-content>
+      <loading-content></loading-content>
       <n-notification-provider>
         <n-message-provider>
-          <MessageContent />
+          <message-content></message-content>
           <slot></slot>
         </n-message-provider>
       </n-notification-provider>

src/components/ChartItemSetting/CollapseItem.vue

@@ -1,15 +1,15 @@
 <template>
-  <n-divider style="margin: 10px 0;" />
+  <n-divider style="margin: 10px 0;"></n-divider>
   <n-collapse arrow-placement="right" :default-expanded-names="expanded ? name : null" accordion>
     <!-- 右侧 -->
     <template #header-extra>
       <div @click="click">
-        <slot name="header" />
+        <slot name="header"></slot>
       </div>
     </template>
 
     <n-collapse-item :title="name" :name="name">
-      <slot />
+      <slot></slot>
     </n-collapse-item>
   </n-collapse>
 </template>

src/components/ChartItemSetting/GlobalSetting.vue

@@ -1,237 +1,286 @@
 <template>
-  <CollapseItem v-if="title" name="标题">
+  <collapse-item v-if="title" name="标题">
     <template #header>
-      <n-switch v-show="inChart" v-model:value="title.show" size="small" />
+      <n-switch
+        v-show="inChart"
+        v-model:value="title.show"
+        size="small"
+      ></n-switch>
     </template>
-    <SettingItemBox name="标题">
-      <SettingItem name="颜色">
-        <n-color-picker v-model:value="title.textStyle.color" size="small" />
-      </SettingItem>
-      <SettingItem name="大小">
+    <setting-item-box name="标题">
+      <setting-item name="颜色">
+        <n-color-picker
+          v-model:value="title.textStyle.color"
+          size="small"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="大小">
         <n-input-number
           v-model:value="title.textStyle.fontSize"
           :min="1"
           size="small"
-        />
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="副标题">
-      <SettingItem name="颜色">
-        <n-color-picker size="small" v-model:value="title.subtextStyle.color" />
-      </SettingItem>
-      <SettingItem name="大小">
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="副标题">
+      <setting-item name="颜色">
+        <n-color-picker
+          size="small"
+          v-model:value="title.subtextStyle.color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="大小">
         <n-input-number
           v-model:value="title.subtextStyle.fontSize"
           :min="1"
           size="small"
-        />
-      </SettingItem>
-    </SettingItemBox>
-  </CollapseItem>
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
 
-  <CollapseItem v-if="xAxis" name="X轴">
+  <collapse-item v-if="xAxis" name="X轴">
     <template #header>
-      <n-switch v-show="inChart" v-model:value="xAxis.show" size="small" />
+      <n-switch
+        v-show="inChart"
+        v-model:value="xAxis.show"
+        size="small"
+      ></n-switch>
     </template>
-    <SettingItemBox name="名称">
-      <SettingItem name="颜色">
+    <setting-item-box name="名称">
+      <setting-item name="颜色">
         <n-color-picker
           size="small"
           v-model:value="xAxis.nameTextStyle.color"
-        />
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="标签">
-      <SettingItem v-show="inChart" name="展示">
+        ></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="标签">
+      <setting-item v-show="inChart" name="展示">
         <n-space>
-          <n-switch v-model:value="xAxis.axisLabel.show" size="small" />
+          <n-switch
+            v-model:value="xAxis.axisLabel.show"
+            size="small"
+          ></n-switch>
         </n-space>
-      </SettingItem>
-      <SettingItem name="颜色">
-        <n-color-picker size="small" v-model:value="xAxis.axisLabel.color" />
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="轴线">
-      <SettingItem name="颜色">
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker
+          size="small"
+          v-model:value="xAxis.axisLabel.color"
+        ></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="轴线">
+      <setting-item name="颜色">
         <n-color-picker
           v-model:value="xAxis.axisLine.lineStyle.color"
           size="small"
-        />
-      </SettingItem>
-      <SettingItem name="粗细">
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="粗细">
         <n-input-number
           v-model:value="xAxis.axisLine.lineStyle.width"
           :min="1"
           size="small"
-        />
-      </SettingItem>
-      <SettingItem name="对齐零">
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="对齐零">
         <n-space>
-          <n-switch v-model:value="xAxis.axisLine.onZero" size="small" />
+          <n-switch
+            v-model:value="xAxis.axisLine.onZero"
+            size="small"
+          ></n-switch>
         </n-space>
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="刻度">
-      <SettingItem v-show="inChart" name="展示">
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="刻度">
+      <setting-item v-show="inChart" name="展示">
         <n-space>
-          <n-switch v-model:value="xAxis.axisTick.show" size="small" />
+          <n-switch v-model:value="xAxis.axisTick.show" size="small"></n-switch>
         </n-space>
-      </SettingItem>
-      <SettingItem name="长度">
+      </setting-item>
+      <setting-item name="长度">
         <n-input-number
           v-model:value="xAxis.axisTick.length"
           :min="1"
           size="small"
-        />
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="分割线">
-      <SettingItem v-show="inChart" name="展示">
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="分割线">
+      <setting-item v-show="inChart" name="展示">
         <n-space>
-          <n-switch v-model:value="xAxis.splitLine.show" size="small" />
+          <n-switch
+            v-model:value="xAxis.splitLine.show"
+            size="small"
+          ></n-switch>
         </n-space>
-      </SettingItem>
-      <SettingItem name="颜色">
+      </setting-item>
+      <setting-item name="颜色">
         <n-color-picker
           v-model:value="xAxis.splitLine.lineStyle.color"
           size="small"
-        />
-      </SettingItem>
-      <SettingItem name="粗细">
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="粗细">
         <n-input-number
           v-model:value="xAxis.splitLine.lineStyle.width"
           :min="1"
           size="small"
-        />
-      </SettingItem>
-      <SettingItem name="类型">
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="类型">
         <n-select
           v-model:value="xAxis.splitLine.lineStyle.type"
           size="small"
           :options="axisConf.splitLint.lineStyle.type"
-        />
-      </SettingItem>
-      <SettingItem name="位置">
+        ></n-select>
+      </setting-item>
+      <setting-item name="位置">
         <n-select
           v-model:value="xAxis.position"
           size="small"
           :options="axisConf.xposition"
-        />
-      </SettingItem>
-    </SettingItemBox>
-  </CollapseItem>
+        ></n-select>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
 
-  <CollapseItem v-if="yAxis" name="Y轴">
+  <collapse-item v-if="yAxis" name="Y轴">
     <template #header>
-      <n-switch v-show="inChart" v-model:value="yAxis.show" size="small" />
+      <n-switch
+        v-show="inChart"
+        v-model:value="yAxis.show"
+        size="small"
+      ></n-switch>
     </template>
-    <SettingItemBox name="名称">
-      <SettingItem name="颜色">
+    <setting-item-box name="名称">
+      <setting-item name="颜色">
         <n-color-picker
           size="small"
           v-model:value="yAxis.nameTextStyle.color"
-        />
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="标签">
-      <SettingItem v-show="inChart" name="展示">
+        ></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="标签">
+      <setting-item v-show="inChart" name="展示">
         <n-space>
-          <n-switch v-model:value="yAxis.axisLabel.show" size="small" />
+          <n-switch
+            v-model:value="yAxis.axisLabel.show"
+            size="small"
+          ></n-switch>
         </n-space>
-      </SettingItem>
-      <SettingItem name="颜色">
-        <n-color-picker size="small" v-model:value="yAxis.axisLabel.color" />
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="轴线">
-      <SettingItem v-show="inChart" name="展示">
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker
+          size="small"
+          v-model:value="yAxis.axisLabel.color"
+        ></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="轴线">
+      <setting-item v-show="inChart" name="展示">
         <n-space>
-          <n-switch v-model:value="yAxis.axisLine.show" size="small" />
+          <n-switch v-model:value="yAxis.axisLine.show" size="small"></n-switch>
         </n-space>
-      </SettingItem>
-      <SettingItem name="颜色">
+      </setting-item>
+      <setting-item name="颜色">
         <n-color-picker
           v-model:value="yAxis.axisLine.lineStyle.color"
           size="small"
-        />
-      </SettingItem>
-      <SettingItem name="粗细">
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="粗细">
         <n-input-number
           v-model:value="yAxis.axisLine.lineStyle.width"
           :min="1"
           size="small"
-        />
-      </SettingItem>
-      <SettingItem name="对齐零">
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="对齐零">
         <n-space>
-          <n-switch v-model:value="yAxis.axisLine.onZero" size="small" />
+          <n-switch
+            v-model:value="yAxis.axisLine.onZero"
+            size="small"
+          ></n-switch>
         </n-space>
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="刻度">
-      <SettingItem v-show="inChart" name="展示">
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="刻度">
+      <setting-item v-show="inChart" name="展示">
         <n-space>
-          <n-switch v-model:value="yAxis.axisTick.show" size="small" />
+          <n-switch v-model:value="yAxis.axisTick.show" size="small"></n-switch>
         </n-space>
-      </SettingItem>
-      <SettingItem name="长度">
+      </setting-item>
+      <setting-item name="长度">
         <n-input-number
           v-model:value="yAxis.axisTick.length"
           :min="1"
           size="small"
-        />
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="分割线">
-      <SettingItem v-show="inChart" name="展示">
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="分割线">
+      <setting-item v-show="inChart" name="展示">
         <n-space>
-          <n-switch v-model:value="yAxis.splitLine.show" size="small" />
+          <n-switch
+            v-model:value="yAxis.splitLine.show"
+            size="small"
+          ></n-switch>
         </n-space>
-      </SettingItem>
-      <SettingItem name="颜色">
+      </setting-item>
+      <setting-item name="颜色">
         <n-color-picker
           v-model:value="yAxis.splitLine.lineStyle.color"
           size="small"
-        />
-      </SettingItem>
-      <SettingItem name="粗细">
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="粗细">
         <n-input-number
           v-model:value="yAxis.splitLine.lineStyle.width"
           :min="1"
           size="small"
-        />
-      </SettingItem>
-      <SettingItem name="类型">
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="类型">
         <n-select
           v-model:value="yAxis.splitLine.lineStyle.type"
           size="small"
           :options="axisConf.splitLint.lineStyle.type"
-        />
-      </SettingItem>
-      <SettingItem name="位置">
+        ></n-select>
+      </setting-item>
+      <setting-item name="位置">
         <n-select
           v-model:value="yAxis.position"
           size="small"
           :options="axisConf.yposition"
-        />
-      </SettingItem>
-    </SettingItemBox>
-  </CollapseItem>
+        ></n-select>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
 
-  <CollapseItem v-if="legend" name="图例">
+  <collapse-item v-if="legend" name="图例">
     <template #header>
-      <n-switch v-show="inChart" v-model:value="legend.show" size="small" />
+      <n-switch
+        v-show="inChart"
+        v-model:value="legend.show"
+        size="small"
+      ></n-switch>
     </template>
-    <SettingItemBox name="图例文字">
-      <SettingItem>
-        <n-color-picker size="small" v-model:value="legend.textStyle.color" />
-      </SettingItem>
-    </SettingItemBox>
-  </CollapseItem>
+    <setting-item-box name="图例文字">
+      <setting-item>
+        <n-color-picker
+          size="small"
+          v-model:value="legend.textStyle.color"
+        ></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
 </template>
 
 <script setup lang="ts">
-import { toRefs, PropType, watchEffect, computed } from 'vue'
+import { PropType, computed } from 'vue'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { axisConf } from '@/packages/chartConfiguration/echarts/index'
 import {

src/components/ChartItemSetting/PositionSetting.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-divider style="margin: 10px 0;" />
+  <n-divider style="margin: 10px 0;" ></n-divider>
   <n-space :size="8" justify="space-between" style="margin-top: 10px;">
     <n-button
       secondary
@@ -8,12 +8,11 @@
       @click="positonHandle(item.key)"
     >
       <template #icon>
-        <component :is="item.icon" />
+        <component :is="item.icon" ></component>
       </template>
     </n-button>
   </n-space>
-  <!-- </SettingItemBox> -->
-  <SettingItemBox name="边距">
+  <setting-item-box name="边距">
     <n-input-number
       v-model:value="chartAttr.y"
       :min="0"
@@ -34,7 +33,7 @@
         <n-text depth="3">左</n-text>
       </template>
     </n-input-number>
-  </SettingItemBox>
+  </setting-item-box>
 </template>
 
 <script setup lang="ts">

src/components/ChartItemSetting/SettingItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="go-setting-item" :style="{ width: width + 'px' }">
-    <slot />
+    <slot ></slot>
     <n-text class="name" depth="3">{{ name }}</n-text>
   </div>
 </template>

src/components/ChartItemSetting/SettingItemBox.vue

@@ -4,7 +4,7 @@
     <div class="item-right" justify="space-between" :style="{
       gridTemplateColumns: alone? '1fr': '1fr 1fr'
     }">
-      <slot />
+      <slot></slot>
     </div>
   </div>
 </template>

src/components/ChartItemSetting/SizeSetting.vue

@@ -1,5 +1,5 @@
 <template>
-  <SettingItemBox name="尺寸">
+  <setting-item-box name="尺寸">
     <n-input-number
       v-model:value="chartAttr.w"
       :min="50"
@@ -20,7 +20,7 @@
         <n-text depth="3">高度</n-text>
       </template>
     </n-input-number>
-  </SettingItemBox>
+  </setting-item-box>
 </template>
 
 <script setup lang="ts">

src/components/ChartItemSetting/StylesSetting.vue

@@ -1,15 +1,15 @@
 <template>
-  <CollapseItem name="通用样式">
-    <SettingItemBox name="透明度" :alone="true">
+  <collapse-item name="通用样式">
+    <setting-item-box name="透明度" :alone="true">
       <!-- 透明度 -->
       <n-slider
         v-model:value="chartStyles.opacity"
         :step="0.1"
         :min="0"
         :max="1"
-      />
-    </SettingItemBox>
-  </CollapseItem>
+      ></n-slider>
+    </setting-item-box>
+  </collapse-item>
 </template>
 
 <script setup lang="ts">

src/components/Doc/index.vue

@@ -1,7 +1,7 @@
 <template>
   <n-button quaternary @click="handleClick" title="说明文档">
     <n-icon size="20" :depth="1">
-      <DocumentTextIcon />
+      <document-text-icon></document-text-icon>
     </n-icon>
   </n-button>
 </template>

src/components/LangSelect/index.vue

@@ -7,7 +7,7 @@
   >
     <n-button quaternary>
       <n-icon size="20" :depth="1">
-        <LanguageIcon />
+        <language-icon></language-icon>
       </n-icon>
     </n-button>
   </n-dropdown>

src/components/LoadingComponent/Skeleton.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
     <!-- 骨架图 -->
-     <Skeleton :repeat="3" :show="true"/>
+     <go-skeleton :repeat="3" :show="true"></go-skeleton>
   </div>
 </template>

src/components/LoadingComponent/index.ts

@@ -1,7 +1,7 @@
 import type { App } from 'vue'
 import LoadingComponent from './index.vue'
 import AsyncLoading from './index.vue'
-import AsyncSkeletonLoading from './Skeleton.vue'
+import AsyncSkeletonLoading from './GoSkeleton.vue'
 
 // 正常组件
 export { LoadingComponent }

src/components/LoadingComponent/index.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- svg加载图 -->
   <div class="go-loading-svg go-flex-center">
-    <img src="~@/assets/images/tips/loadingSvg.svg" alt="" />
+    <img src="~@/assets/images/tips/loadingSvg.svg" alt=""></div>
   </div>
 </template>
 <style lang="scss" scoped>

src/components/MacOsControlBtn/index.vue

@@ -7,7 +7,7 @@
         @click.stop="handleClick(item.key)"
       >
         <n-icon size="10" class="icon-base" :class="{ hover: !disabled }">
-          <component :is="item.icon" />
+          <component :is="item.icon"></component>
         </n-icon>
       </div>
     </template>

src/components/Skeleton/index.ts

@@ -1,3 +1,3 @@
-import Skeleton from './index.vue';
+import GoSkeleton from './index.vue';
 
-export { Skeleton };
+export { GoSkeleton };

src/components/Skeleton/index.vue

@@ -1,16 +1,16 @@
 <template>
   <div v-show="load">
     <div v-show="repeat == 1">
-      <n-skeleton v-bind="$attrs" />
+      <n-skeleton v-bind="$attrs"></n-skeleton>
     </div>
     <div v-show="repeat == 2">
-      <n-skeleton v-bind="$attrs" />
-      <n-skeleton v-bind="$attrs" style="width: 60%;" />
+      <n-skeleton v-bind="$attrs"></n-skeleton>
+      <n-skeleton v-bind="$attrs" style="width: 60%;"></n-skeleton>
     </div>
     <div v-show="repeat > 2">
-      <n-skeleton v-bind="$attrs" :repeat="repeat - 2" />
-      <n-skeleton v-bind="$attrs" style="width: 60%;" />
-      <n-skeleton v-bind="$attrs" style="width: 50%;" />
+      <n-skeleton v-bind="$attrs" :repeat="repeat - 2"></n-skeleton>
+      <n-skeleton v-bind="$attrs" style="width: 60%;"></n-skeleton>
+      <n-skeleton v-bind="$attrs" style="width: 50%;"></n-skeleton>
     </div>
   </div>
 </template>

src/components/SystemSet/index.vue

@@ -5,7 +5,7 @@
         <n-space justify="space-between">
           <n-h3 class="go-mb-0">系统设置</n-h3>
           <n-icon size="20" class="go-cursor-pointer" @click="closeHandle">
-            <CloseIcon />
+            <close-icon></close-icon>
           </n-icon>
         </n-space>
       </template>
@@ -19,7 +19,7 @@
                 v-model:value="item.value"
                 size="small"
                 @update:value="handleChange($event, item)"
-              />
+              ></n-switch>
             </template>
             <template v-else-if="item.type === 'number'">
               <n-input-number
@@ -30,7 +30,7 @@
                 :suffix="item.suffix || null"
                 :min="item.min || 0"
                 @update:value="handleChange($event, item)"
-              />
+              ></n-input-number>
             </template>
           </n-space>
           <n-space>
@@ -38,7 +38,7 @@
             <n-tooltip v-if="item.tip" trigger="hover">
               <template #trigger>
                 <n-icon size="21">
-                  <HelpOutlineIcon />
+                  <help-outline-icon></help-outline-icon>
                 </n-icon>
               </template>
               <span>{{ item.tip }}</span>

src/components/ThemeColorSelect/components/ColorList.vue

@@ -8,7 +8,7 @@
       @click="colorSelectHandle(item)"
     >
       <n-space>
-        <div class="content-left-item-color" :style="{ backgroundColor: item.hex }" />
+        <div class="content-left-item-color" :style="{ backgroundColor: item.hex }"></div>
         <n-space vertical>
           <n-space>
             <span :style="{ color: item.hex }">{{ item.name }}</span>
@@ -16,7 +16,7 @@
           </n-space>
           <n-text>
             {{ item.hex }}
-            <n-divider vertical />
+            <n-divider vertical></n-divider>
             {{
               `rgb(${item.RGB[0]}, ${item.RGB[1]}, ${item.RGB[2]})`
             }}
@@ -24,7 +24,7 @@
         </n-space>
       </n-space>
     </div>
-    <n-divider />
+    <n-divider></n-divider>
     <div
       class="content-left-item go-transition-quick"
       span="12 1000:6 1400:4 1800:4 2200:2"
@@ -33,7 +33,7 @@
       @click="colorSelectHandle(item)"
     >
       <n-space>
-        <div class="content-left-item-color" :style="{ backgroundColor: item.hex }" />
+        <div class="content-left-item-color" :style="{ backgroundColor: item.hex }"></div>
         <n-space vertical>
           <n-space>
             <span :style="{ color: item.hex }">{{ item.name }}</span>
@@ -41,7 +41,7 @@
           </n-space>
           <n-text>
             {{ item.hex }}
-            <n-divider vertical />
+            <n-divider vertical></n-divider>
             {{
               `rgb(${item.RGB[0]}, ${item.RGB[1]}, ${item.RGB[2]})`
             }}

src/components/ThemeColorSelect/index.vue

@@ -1,7 +1,7 @@
 <template>
   <n-button quaternary @click="modelShow = true" title="颜色">
     <n-icon size="20" :depth="1">
-      <ColorWandIcon />
+      <ColorWandIcon></ColorWandIcon>
     </n-icon>
   </n-button>
   <n-modal v-model:show="modelShow">
@@ -9,13 +9,13 @@
       <n-space justify="space-between">
         <n-h3 class="title">主题颜色选择</n-h3>
         <n-icon size="20" class="go-cursor-pointer" @click="modelShow = false">
-          <CloseIcon />
+          <CloseIcon></CloseIcon>
         </n-icon>
       </n-space>
-      <n-divider />
+      <n-divider></n-divider>
       <div class="model-content" ref="contentLeftRef">
         <div class="content-left" v-if="modelShow">
-          <ColorList :designColor="designColorSplit" @colorSelectHandle="colorSelectHandle" />
+          <ColorList :designColor="designColorSplit" @colorSelectHandle="colorSelectHandle"></ColorList>
         </div>
         <div class="content-right">
           <div class="color-name-detail">
@@ -29,7 +29,7 @@
               v-if="appThemeDetail"
               class="select-color"
               :style="{ backgroundColor: designStore.appTheme }"
-            />
+            ></div>
           </div>
           <img :src="themeColorLogo" />
         </div>

src/components/ThemeSelect/index.vue

@@ -1,8 +1,8 @@
 <template>
   <n-button quaternary @click="changeTheme" title="主题">
     <n-icon size="20" :depth="1">
-      <MoonIcon v-if="designStore.darkTheme" />
-      <SunnyIcon v-else />
+      <moon-icon v-if="designStore.darkTheme"></moon-icon>
+      <sunny-icon v-else></sunny-icon>
     </n-icon>
   </n-button>
 </template>

src/components/UserInfo/index.vue

@@ -6,7 +6,7 @@
     :options="options"
   >
     <div class="user-info-box">
-      <PersonIcon v-if="fallback" />
+      <person-icon v-if="fallback"></person-icon>
       <n-avatar
         v-if="!fallback"
         round
@@ -14,12 +14,12 @@
         size="medium"
         :src="Person"
         @error="errorHandle"
-      />
+      ></n-avatar>
     </div>
   </n-dropdown>
 
   <!-- 系统设置 model -->
-  <SystemSet v-model:modelShow="modelShow" />
+  <system-set v-model:modelShow="modelShow"></system-set>
 </template>
 
 <script lang="ts" setup>

src/layout/components/Footer/index.ts

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

src/layout/components/GoFooter/index.ts

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

src/layout/components/GoHeader/index.ts

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

src/layout/components/Header/index.vue → src/layout/components/GoHeader/index.vue

@@ -12,9 +12,9 @@
       <div>
         <n-space>
           <slot name="ri-left"> </slot>
-          <LangSelect />
-          <ThemeSelect />
-          <ThemeColorSelect />
+          <lang-select></lang-select>
+          <Theme-select></Theme-select>
+          <theme-color-select></theme-color-select>
           <slot name="ri-right"> </slot>
         </n-space>
       </div>

src/layout/components/Header/index.ts

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

src/layout/components/HeaderPro/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Header>
+  <GoHeader>
     <template #left>
       <slot name="left"></slot>
     </template>
@@ -10,12 +10,12 @@
       <slot name="ri-left"></slot>
     </template>
     <template #ri-right>
-      <UserInfo />
+      <uer-info></uer-info>
       <slot name="ri-right"></slot>
     </template>
-  </Header>
+  </GoHeader>
 </template>
 <script setup lang="ts">
-import { Header } from '@/layout/components/Header'
+import { GoHeader } from '@/layout/components/GoHeader'
 import { UserInfo } from '@/components/UserInfo'
 </script>

src/layout/components/Main/index.vue

@@ -5,9 +5,9 @@
         v-if="route.noKeepAlive"
         :is="Component"
         :key="route.fullPath"
-      />
+      ></component>
       <keep-alive v-else>
-        <component :is="Component" :key="route.fullPath" />
+        <component :is="Component" :key="route.fullPath"></component>
       </keep-alive>
     </template>
   </router-view>

src/layout/components/TransitionMain/index.vue

@@ -6,9 +6,9 @@
         v-if="route.noKeepAlive"
         :is="Component"
         :key="route.fullPath"
-      />
+      ></component>
       <keep-alive v-else>
-        <component :is="Component" :key="route.fullPath" />
+        <component :is="Component" :key="route.fullPath"></component>
       </keep-alive>
     </transition>
   </router-view>

src/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <MainView />
+  <MainView></MainView>
 </template>
 
 <script lang="ts" setup>

src/layout/parentLayout.vue

@@ -1,3 +1,3 @@
 <template>
-  <router-view />
+  <router-view></router-view>
 </template>

src/packages/components/Charts/Bars/BarCommon/config.vue

@@ -1,27 +1,38 @@
 <template>
-  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    :name="`柱状图-${index + 1}`"
+    :expanded="true"
+  >
     <SettingItemBox name="图形">
       <SettingItem name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color" />
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.itemStyle.color"
+        ></n-color-picker>
       </SettingItem>
       <SettingItem>
-        <n-button size="small" @click="item.itemStyle.color = null">恢复默认</n-button>
+        <n-button size="small" @click="item.itemStyle.color = null">
+          恢复默认
+        </n-button>
       </SettingItem>
       <SettingItem name="宽度">
-          <n-input-number
+        <n-input-number
           v-model:value="item.barWidth"
           :min="1"
           :max="100"
           size="small"
           placeholder="自动计算"
-        />
+        ></n-input-number>
       </SettingItem>
       <SettingItem name="圆角">
-          <n-input-number
+        <n-input-number
           v-model:value="item.itemStyle.borderRadius"
           :min="0"
           size="small"
-        />
+        ></n-input-number>
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
@@ -29,7 +40,11 @@
 
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
-import { CollapseItem, SettingItemBox, SettingItem } from '@/components/ChartItemSetting/index'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/ChartItemSetting/index'
 import { option } from './config'
 
 const props = defineProps({

src/packages/components/Charts/Bars/BarCommon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <VChart :theme="themeColor" :option="option" autoresize />
+  <VChart :theme="themeColor" :option="option" autoresize></VChart>
 </template>
 
 <script setup lang="ts">

src/packages/components/Charts/Bars/BarCrossrange/config.vue

@@ -2,7 +2,7 @@
   <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
     <SettingItemBox name="图形">
       <SettingItem name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color" />
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
       </SettingItem>
       <SettingItem>
         <n-button size="small" @click="item.itemStyle.color = null">恢复默认</n-button>
@@ -14,14 +14,14 @@
           :max="100"
           size="small"
           placeholder="自动计算"
-        />
+       ></n-input-number>
       </SettingItem>
       <SettingItem name="圆角">
           <n-input-number
           v-model:value="item.itemStyle.borderRadius"
           :min="0"
           size="small"
-        />
+       ></n-input-number>
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>

src/packages/components/Charts/Bars/BarCrossrange/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <VChart :theme="themeColor" :option="option" autoresize />
+  <VChart :theme="themeColor" :option="option" autoresize></VChart>
 </template>
 
 <script setup lang="ts">

src/packages/components/Charts/Lines/LineCommon/config.vue

@@ -11,14 +11,14 @@
           size="small"
           :modes="['hex']"
           v-model:value="item.lineStyle.color.colorStops[0].color"
-        />
+       ></n-color-picker>
       </SettingItem>
       <SettingItem name="颜色">
         <n-color-picker
           size="small"
           :modes="['hex']"
           v-model:value="item.lineStyle.color.colorStops[1].color"
-        />
+       ></n-color-picker>
       </SettingItem>
       <SettingItem name="宽度">
         <n-input-number
@@ -27,21 +27,21 @@
           :max="100"
           size="small"
           placeholder="自动计算"
-        />
+       ></n-input-number>
       </SettingItem>
       <SettingItem name="类型">
         <n-select
           v-model:value="item.lineStyle.type"
           size="small"
           :options="lineConf.lineStyle.type"
-        />
+       ></n-select>
       </SettingItem>
       <SettingItem name="类型">
         <n-select
           v-model:value="item.lineStyle.type"
           size="small"
           :options="lineConf.lineStyle.type"
-        />
+       ></n-select>
       </SettingItem>
     </SettingItemBox>
     <SettingItemBox name="阴影" :alone="true">
@@ -50,7 +50,7 @@
           size="small"
           :modes="['hex']"
           v-model:value="item.lineStyle.shadowColor"
-        />
+      ></n-color-picker>
       </SettingItem>
       
     </SettingItemBox>

src/packages/components/Charts/Lines/LineCommon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <VChart :theme="themeColor" :option="option.options" autoresize />
+  <VChart :theme="themeColor" :option="option.options" autoresize></VChart>
 </template>
 
 <script setup lang="ts">

src/packages/components/Charts/Lines/LineGradientSingle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <VChart :theme="themeColor" :option="option.options" autoresize />
+  <VChart :theme="themeColor" :option="option.options" autoresize></VChart>
 </template>
 
 <script setup lang="ts">

src/packages/components/Charts/Lines/LineGradients/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <VChart :theme="themeColor" :option="option.options" autoresize />
+  <VChart :theme="themeColor" :option="option.options" autoresize></VChart>
 </template>
 
 <script setup lang="ts">

src/packages/components/Charts/Pies/PieCommon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <VChart :theme="themeColor" :option="option" autoresize />
+  <VChart :theme="themeColor" :option="option" autoresize></VChart>
 </template>
 
 <script setup lang="ts">

src/plugins/customComponents.ts

@@ -1,5 +1,5 @@
 import type { App } from 'vue'
-import { Skeleton } from '@/components/Skeleton'
+import { GoSkeleton } from '@/components/GoSkeleton'
 import { LoadingComponent } from '@/components/LoadingComponent'
 
 /**
@@ -7,6 +7,6 @@ import { LoadingComponent } from '@/components/LoadingComponent'
  * @param app
  */
 export function setupCustomComponents(app: App) {
-  app.component('Skeleton', Skeleton)
+  app.component('GoSkeleton', GoSkeleton)
   app.component('LoadingComponent', LoadingComponent)
 }

src/views/chart/ContentBox/index.vue

@@ -18,7 +18,7 @@
           class="go-cursor-pointer"
           @click="backHandle"
         >
-          <ChevronBackOutlineIcon />
+          <ChevronBackOutlineIcon></ChevronBackOutlineIcon>
         </n-icon>
       </n-space>
     </div>

src/views/chart/ContentCharts/components/OptionContent/index.vue

@@ -9,10 +9,10 @@
       :icon-size="16"
       :indent="18"
       @update:value="clickItemHandle"
-    />
+   ></n-menu>
     <div class="chart-content-list">
       <n-scrollbar>
-        <ItemBox :menuOptions="packages.selectOptions" />
+        <ItemBox :menuOptions="packages.selectOptions"></ItemBox>
       </n-scrollbar>
     </div>
   </div>

src/views/chart/ContentCharts/index.vue

@@ -9,7 +9,7 @@
   >
     <template #icon>
       <n-icon size="14" :depth="2">
-        <BarChartIcon />
+        <BarChartIcon></BarChartIcon>
       </n-icon>
     </template>
     <!-- 图表 -->
@@ -22,20 +22,20 @@
           :icon-size="16"
           :indent="18"
           @update:value="clickItemHandle"
-        />
+       ></n-menu>
         <div class="menu-component-box">
-          <Skeleton
+          <GoSkeleton
             :load="!selectOptions"
             round
             text
             :repeat="2"
             style="width: 90%;"
-          />
+         ></GoSkeleton>
           <OptionContent
             v-if="selectOptions"
             :selectOptions="selectOptions"
             :key="selectValue"
-          />
+         ></OptionContent>
         </div>
       </div>
     </aside>

src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue

@@ -17,7 +17,7 @@
           v-for="colorItem in fetchShowColors(value.color)"
           :key="colorItem"
           :style="{ backgroundColor: colorItem }"
-        />
+       ></span>
       </div>
       <div
         class="theme-bottom"

src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

@@ -8,7 +8,7 @@
           v-model:value="canvasConfig.width"
           :validator="validator"
           @update:value="changeSizeHandle"
-        />
+       ></n-input-number>
       </n-form-item>
       <n-form-item label="高度">
         <n-input-number
@@ -16,7 +16,7 @@
           v-model:value="canvasConfig.height"
           :validator="validator"
           @update:value="changeSizeHandle"
-        />
+       ></n-input-number>
       </n-form-item>
     </n-form>
 
@@ -52,7 +52,7 @@
           :showPreview="true"
           :swatches="swatchesColors"
           v-model:value="canvasConfig.background"
-        />
+       ></n-color-picker>
       </n-space>
       <n-space>
         <n-text>使用颜色</n-text>
@@ -63,7 +63,7 @@
           :round="false"
           :disabled="!canvasConfig.backgroundImage"
           :onUpdate="switchSelectColorHandle"
-        />
+       ></n-switch>
       </n-space>
       <n-space>
         <n-text>背景</n-text>

src/views/chart/ContentConfigurations/components/ChartSetting/index.vue

@@ -9,18 +9,18 @@
         placeholder="请输入图表名称"
         size="small"
         v-model:value="targetData.chartConfig.title"
-      />
+     ></n-input>
     </SettingItemBox>
     <!-- 尺寸 -->
-    <SizeSetting :chartAttr="targetData.attr" />
+    <SizeSetting :chartAttr="targetData.attr"></SizeSetting>
     <!-- 位置 -->
     <PositionSetting :chartAttr="targetData.attr" :canvasConfig="chartEditStore.getEditCanvasConfig"/>
     <!-- 样式 -->
-    <StylesSetting :chartStyles="targetData.styles" />
+    <StylesSetting :chartStyles="targetData.styles"></StylesSetting>
     <!-- 自定义配置项 -->
     <component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component>
     <!-- 全局设置 --> 
-    <GlobalSetting :optionData="targetData.option" :in-chart="true" />
+    <GlobalSetting :optionData="targetData.option" :in-chart="true"></GlobalSetting>
   </div>
 </template>
 

src/views/chart/ContentConfigurations/index.vue

@@ -2,7 +2,7 @@
   <n-layout has-sider sider-placement="right">
     <n-layout-content>
       <!-- 图表拖拽区域 -->
-      <ContentEdit />
+      <ContentEdit></ContentEdit>
     </n-layout-content>
     <n-layout-sider
       collapse-mode="transform"

src/views/chart/ContentEdit/components/EditAlignLine/index.vue

@@ -9,7 +9,7 @@
         line['select'].has(item) && 'visible'
       ]"
       :style="useComponentStyle(line['select'].get(item))"
-    />
+  ></div>
   </div>
 </template>
 

src/views/chart/ContentEdit/components/EditBottom/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="go-edit-bottom">
-    <EditHistory />
+    <EditHistory></EditHistory>
 
     <n-space class="bottom-ri">
       <!-- 快捷键提示 -->
       <n-popselect :options="shortcutKeyOptions" size="medium">
         <n-button class="scale-btn" quaternary size="mini">
           <n-icon class="lock-icon" size="18" :depth="2">
-            <DicomOverlayIcon />
+            <DicomOverlayIcon></DicomOverlayIcon>
           </n-icon>
         </n-button>
       </n-popselect>
@@ -20,7 +20,7 @@
         size="mini"
         :options="filterOptions"
         @update:value="selectHandle"
-      />
+     ></n-select>
 
       <!-- 锁定缩放 -->
       <n-tooltip trigger="hover">
@@ -32,8 +32,8 @@
               size="18"
               :depth="2"
             >
-              <LockClosedOutlineIcon v-if="lockScale" />
-              <LockOpenOutlineIcon v-else />
+              <LockClosedOutlineIcon v-if="lockScale"></LockClosedOutlineIcon>
+              <LockOpenOutlineIcon v-else></LockOpenOutlineIcon>
             </n-icon>
           </n-button>
         </template>
@@ -52,7 +52,7 @@
         :disabled="lockScale"
         :marks="sliderMaks"
         @update:value="sliderHandle"
-      />
+     ></n-slider>
     </n-space>
   </div>
 </template>

src/views/chart/ContentEdit/components/EditHistory/index.vue

@@ -22,7 +22,7 @@
     <n-tooltip trigger="hover">
       <template #trigger>
         <n-icon size="21" :depth="3">
-          <HelpOutlineIcon />
+          <HelpOutlineIcon></HelpOutlineIcon>
         </n-icon>
       </template>
       <span>最多只保留 20 条记录</span>

src/views/chart/ContentEdit/components/EditRange/index.vue

@@ -6,7 +6,7 @@
   >
     <slot></slot>
     <!-- 拖拽时的辅助线 -->
-    <EditAlignLine />
+    <EditAlignLine></EditAlignLine>
   </div>
 </template>
 

src/views/chart/ContentEdit/components/EditShapeBox/index.vue

@@ -8,15 +8,15 @@
       :key="index"
       :style="usePointStyle(point, index, item.attr, cursorResize)"
       @mousedown="useMousePointHandle($event, point, item.attr)"
-    />
+   ></div>
 
     <!-- 选中 -->
     <div class="shape-modal" :style="useSizeStyle(item.attr)">
-      <div class="shape-modal-select" :class="{ active: select }" />
+      <div class="shape-modal-select" :class="{ active: select }"></div>
       <div
         class="shape-modal-change"
         :class="{ selectActive: select, hoverActive: hover }"
-      />
+     ></div>
     </div>
   </div>
 </template>

src/views/chart/ContentEdit/index.vue

@@ -32,13 +32,13 @@
             :themeSetting="themeSetting"
             :themeColor="themeColor"
             :style="useSizeStyle(item.attr)"
-          />
+         ></component>
         </EditShapeBox>
       </EditRange>
     </div>
     <!-- 底部控制 -->
     <template #bottom>
-      <EditBottom />
+      <EditBottom></EditBottom>
     </template>
   </ContentBox>
 </template>

src/views/chart/ContentLayers/components/ListItem/index.vue

@@ -10,14 +10,14 @@
         preview-disabled
         :src="image"
         :fallback-src="requireErrorImg()"
-      />
+     ></n-image>
       <n-ellipsis>
         <n-text class="list-text">
           {{ props.componentData.chartConfig.title }}
         </n-text>
       </n-ellipsis>
     </div>
-    <div :class="{ 'select-modal': select }" />
+    <div :class="{ 'select-modal': select }"></div>
   </div>
 </template>
 

src/views/chart/ContentLayers/index.vue

@@ -8,7 +8,7 @@
   >
     <template #icon>
       <n-icon size="16" :depth="2">
-        <component :is="LayersIcon" />
+        <component :is="LayersIcon"></component>
       </n-icon>
     </template>
 
@@ -21,7 +21,7 @@
       @mouseenter="mouseenterHandle(item)"
       @mouseleave="mouseleaveHandle(item)"
       @contextmenu="handleContextMenu($event)"
-    />
+   ></ListItem>
   </ContentBox>
 </template>
 

src/views/chart/HeaderLeftBtn/index.vue

@@ -3,7 +3,7 @@
     <n-button size="small" quaternary @click="goHomeHandle()">
       <template #icon>
         <n-icon :depth="3">
-          <HomeIcon />
+          <HomeIcon></HomeIcon>
         </n-icon>
       </template>
     </n-button>

src/views/chart/HeaderTitle/index.vue

@@ -1,7 +1,7 @@
 <template>
   <n-space>
     <n-icon size="20" :depth="3">
-      <FishIcon />
+      <FishIcon></FishIcon>
     </n-icon>
     <n-text @click="handleFocus">
       工作空间 -
@@ -19,7 +19,7 @@
       placeholder="请输入项目名称"
       v-model:value.trim="title"
       @blur="handleBlur"
-    />
+   ></n-input>
   </n-space>
 </template>
 

src/views/chart/index.vue

@@ -4,19 +4,19 @@
     <n-layout>
       <HeaderPro>
         <template #left>
-          <HeaderLeftBtn />
+          <HeaderLeftBtn></HeaderLeftBtn>
         </template>
         <template #center>
-          <HeaderTitle />
+          <HeaderTitle></HeaderTitle>
         </template>
         <template #ri-left>
-          <HeaderRightBtn />
+          <HeaderRightBtn></HeaderRightBtn>
         </template>
       </HeaderPro>
       <n-layout-content content-style="overflow:hidden; display: flex">
-        <ContentCharts />
-        <ContentLayers />
-        <ContentConfigurations />
+        <ContentCharts></ContentCharts>
+        <ContentLayers></ContentLayers>
+        <ContentConfigurations></ContentConfigurations>
       </n-layout-content>
     </n-layout>
   </div>
@@ -31,7 +31,7 @@
     :show="chartEditStore.getRightMenuShow"
     :on-clickoutside="onClickoutside"
     @select="handleMenuSelect"
-  />
+  ></n-dropdown>
 </template>
 
 <script setup lang="ts">

src/views/login/index.vue

@@ -15,13 +15,13 @@
         </transition-group>
       </aside>
     </div>
-    <Header>
+    <GoHeader>
       <template #left></template>
       <template #right>
-        <LangSelect />
-        <ThemeSelect />
+        <LangSelect></LangSelect>
+        <ThemeSelect></ThemeSelect>
       </template>
-    </Header>
+    </GoHeader>
     <div class="go-login">
       <div class="go-login-carousel">
         <n-carousel
@@ -63,7 +63,7 @@
                   >
                     <template #prefix>
                       <n-icon size="18">
-                        <PersonOutlineIcon />
+                        <PersonOutlineIcon></PersonOutlineIcon>
                       </n-icon>
                     </template>
                   </n-input>
@@ -77,7 +77,7 @@
                   >
                     <template #prefix>
                       <n-icon size="18">
-                        <LockClosedOutlineIcon />
+                        <LockClosedOutlineIcon></LockClosedOutlineIcon>
                       </n-icon>
                     </template>
                   </n-input>
@@ -109,7 +109,7 @@
     </div>
 
     <div class="go-login-box-footer">
-      <Footer />
+      <GoFooter></GoFooter>
     </div>
   </div>
 </template>
@@ -126,8 +126,8 @@ import { carouselInterval } from '@/settings/designSetting'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { ThemeSelect } from '@/components/ThemeSelect'
 import { LangSelect } from '@/components/LangSelect'
-import { Header } from '@/layout/components/Header'
-import { Footer } from '@/layout/components/Footer'
+import { GoHeader } from '@/layout/components/GoHeader'
+import { GoFooter } from '@/layout/components/GoFooter'
 import { PageEnum } from '@/enums/pageEnum'
 import { icon } from '@/plugins'
 import { StorageEnum } from '@/enums/storageEnum'

src/views/preview/components/RenderList/index.vue

@@ -11,7 +11,7 @@
       :chartConfig="item"
       :themeSetting="themeSetting"
       :themeColor="themeColor"
-    />
+    ></component>
   </div>
 </template>
 

src/views/preview/index.vue

@@ -5,7 +5,7 @@
       <!-- 展示层 -->
       <div :style="previewRefStyle" v-if="show">
         <!-- 渲染层 -->
-        <RenderList :localStorageInfo="localStorageInfo" />
+        <render-list :localStorageInfo="localStorageInfo"></render-list>
       </div>
     </div>
   </div>

src/views/project/index.vue

@@ -2,10 +2,10 @@
   <div class="go-project">
     <n-layout has-sider position="absolute">
       <n-space vertical>
-        <Sider />
+        <Sider></Sider>
       </n-space>
       <n-layout>
-        <HeaderPro />
+        <HeaderPro></HeaderPro>
         <n-layout
           id="go-project-content-top"
           class="content-top"
@@ -14,7 +14,7 @@
         >
           <n-layout-content>
             <TransitionMain>
-              <router-view />
+              <router-view></router-view>
             </TransitionMain>
           </n-layout-content>
         </n-layout>

src/views/project/items/components/Card/index.vue

@@ -9,7 +9,7 @@
             :hidden="['remove']"
             @close="deleteHanlde"
             @resize="resizeHandle"
-          />
+         ></MacOsControlBtn>
         </div>
         <!-- 中间 -->
         <div class="list-content-img" @click="resizeHandle">
@@ -22,7 +22,7 @@
             "
             :alt="cardData.title"
             :fallback-src="requireErrorImg()"
-          />
+         ></n-image>
         </div>
       </div>
       <template #action>
@@ -37,7 +37,7 @@
                 class="animation-twinkle"
                 dot
                 :color="cardData.release ? '#34c749' : '#fcbc40'"
-              />
+             ></n-badge>
               {{
                 cardData.release
                   ? $t('project.release')
@@ -56,7 +56,7 @@
                 >
                   <n-button size="small">
                     <template #icon>
-                      <component :is="item.icon" />
+                      <component :is="item.icon"></component>
                     </template>
                   </n-button>
                 </n-dropdown>
@@ -66,7 +66,7 @@
                 <template #trigger>
                   <n-button size="small" @click="handleSelect(item.key)">
                     <template #icon>
-                      <component :is="item.icon" />
+                      <component :is="item.icon"></component>
                     </template>
                   </n-button>
                 </template>

src/views/project/items/components/List/index.vue

@@ -7,12 +7,12 @@
       responsive="screen"
     >
       <n-grid-item v-for="(item, index) in list" :key="item.id">
-        <Card
+        <card
           :cardData="item"
           @resize="resizeHandle"
           @delete="deleteHandle($event, index)"
           @edit="editHandle"
-        />
+       ></card>
       </n-grid-item>
     </n-grid>
   </div>
@@ -22,7 +22,7 @@
     :cardData="modalData"
     @close="closeModal"
     @edit="editHandle"
-  />
+ ></ModalCard>
 </template>
 
 <script setup lang="ts">

src/views/project/items/components/ModalCard/index.vue

@@ -21,7 +21,7 @@
             :narrow="true"
             :hidden="['close']"
             @remove="closeHandle"
-          />
+         ></MacOsControlBtn>
         </n-space>
         <!-- 中间 -->
         <div class="list-content-img">
@@ -37,7 +37,7 @@
         <n-space class="list-footer" justify="space-between">
           <n-text depth="3">
             {{ $t('project.last_edit') }}:
-            <n-time :time="new Date()" format="yyyy-MM-dd hh:mm" />
+            <n-time :time="new Date()" format="yyyy-MM-dd hh:mm"></n-time>
           </n-text>
           <!-- 工具 -->
           <n-space>
@@ -46,7 +46,7 @@
                 class="animation-twinkle"
                 dot
                 :color="cardData?.release ? '#34c749' : '#fcbc40'"
-              />
+             ></n-badge>
               {{
                 cardData?.release
                   ? $t('project.release')
@@ -59,7 +59,7 @@
                 <template #trigger>
                   <n-button size="small" @click="handleSelect(item.key)">
                     <template #icon>
-                      <component :is="item.icon" />
+                      <component :is="item.icon"></component>
                     </template>
                   </n-button>
                 </template>

src/views/project/items/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="go-project-items">
-    <List />
+    <List></List>
   </div>
 </template>
 

src/views/project/layout/components/AsideFooter/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="go-aside-footer">
-    <n-divider class="go-mt-0" />
+    <n-divider class="go-mt-0"></n-divider>
     <n-space justify="space-around">
       <n-tooltip v-if="collapsed" placement="right" trigger="hover">
         <template #trigger>
           <n-button secondary @click="handleDoc">
             <template #icon>
               <n-icon size="18">
-                <HelpOutlineIcon />
+                <HelpOutlineIcon></HelpOutlineIcon>
               </n-icon>
             </template>
           </n-button>
@@ -20,7 +20,7 @@
       <n-button v-else secondary @click="handleDoc">
         <template #icon>
           <n-icon size="18">
-            <HelpOutlineIcon />
+            <HelpOutlineIcon></HelpOutlineIcon>
           </n-icon>
         </template>
         <n-text>{{ $t('global.help') }}</n-text>
@@ -31,7 +31,7 @@
           <n-button secondary @click="handleDoc">
             <template #icon>
               <n-icon size="18">
-                <CodeSlashIcon />
+                <CodeSlashIcon></CodeSlashIcon>
               </n-icon>
             </template>
           </n-button>
@@ -44,7 +44,7 @@
       <n-button v-else secondary @click="handleCode">
         <template #icon>
           <n-icon size="18">
-            <CodeSlashIcon />
+            <CodeSlashIcon></CodeSlashIcon>
           </n-icon>
         </template>
         <n-text v-show="!collapsed">{{ $t('global.code_addr') }}</n-text>

src/views/project/layout/components/Create/components/CreateModal/index.vue

@@ -8,7 +8,7 @@
         <template #header-extra>
           <n-text @click="closeHandle">
             <n-icon size="20">
-              <component :is="CloseIcon" />
+              <component :is="CloseIcon"></component>
             </n-icon>
           </n-text>
         </template>
@@ -23,7 +23,7 @@
             <component :is="item.title"></component>
             <template #icon>
               <n-icon size="18">
-                <component :is="item.icon" />
+                <component :is="item.icon"></component>
               </n-icon>
             </template>
           </n-button>

src/views/project/layout/components/Create/index.vue

@@ -5,8 +5,8 @@
         <n-button ghost type="primary" size="small">
           <template #icon>
             <n-icon>
-              <DuplicateOutlineIcon v-show="designStore.getDarkTheme" />
-              <DuplicateIcon v-show="!designStore.getDarkTheme" />
+              <DuplicateOutlineIcon v-show="designStore.getDarkTheme"></DuplicateOutlineIcon>
+              <DuplicateIcon v-show="!designStore.getDarkTheme"></DuplicateOutlineIcon>
             </n-icon>
           </template>
         </n-button>
@@ -18,8 +18,8 @@
     <n-button v-else ghost type="primary">
       <template #icon>
         <n-icon>
-          <DuplicateOutlineIcon v-show="designStore.getDarkTheme" />
-          <DuplicateIcon v-show="!designStore.getDarkTheme" />
+          <DuplicateOutlineIcon v-show="designStore.getDarkTheme"></DuplicateOutlineIcon>
+          <DuplicateIcon v-show="!designStore.getDarkTheme"></DuplicateOutlineIcon>
         </n-icon>
       </template>
       <span>
@@ -27,7 +27,7 @@
       </span>
     </n-button>
   </div>
-  <CreateModal :show="modalShow" @close="closeHandle" />
+  <CreateModal :show="modalShow" @close="closeHandle"></CreateModal>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'

src/views/project/layout/components/Header/index.ts

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

src/views/project/layout/components/Header/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <Header>
+  <go-header>
     <template #ri-left>
     </template>
     <template #ri-right>
-      <UserInfo />
+      <user-info></user-info>
     </template>
-  </Header>
+  </go-header>
 </template>
 <script setup lang="ts">
-import { Header } from '@/layout/components/Header'
+import { GoHeader } from '@/layout/components/GoHeader'
 import { UserInfo } from '@/components/UserInfo'
 </script>

src/views/project/layout/components/Sider/index.vue

@@ -14,7 +14,7 @@
     <div class="go-project-sider-flex">
       <aside>
         <n-space vertical class="go-project-sider-top">
-          <Create :collapsed="collapsed" />
+          <Create :collapsed="collapsed"></Create>
         </n-space>
         <n-menu
           :value="menuValue"
@@ -22,11 +22,11 @@
           :collapsed-width="getAsideCollapsedWidth"
           :collapsed-icon-size="22"
           :default-expanded-keys="defaultExpandedKeys"
-        />
+       ></n-menu>
       </aside>
       <!-- 底部提示 -->
       <div class="sider-bottom">
-        <AsideFooter :collapsed="collapsed" />
+        <AsideFooter :collapsed="collapsed"></AsideFooter>
       </div>
     </div>
   </n-layout-sider>

src/views/project/mtTemplate/index.vue

@@ -6,7 +6,7 @@
         height="300"
         preview-disabled
         :src="requireErrorImg()"
-      />
+     ></n-image>
       <n-h3>暂时还没有东西呢</n-h3>
     </n-space>
   </div>

src/views/project/templateMarket/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="go-project-template-market">
     <n-space vertical>
-      <n-image object-fit="contain" height="300" preview-disabled :src="requireErrorImg()" />
+      <n-image object-fit="contain" height="300" preview-disabled :src="requireErrorImg()"></n-image>
       <n-h3>暂时还没有东西呢</n-h3>
     </n-space>
   </div>