diff --git a/src/App.vue b/src/App.vue
index ca86ca91..7f644b1b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
     :theme-overrides="getThemeOverrides"
   >
     <app-provider>
-      <i18n></i18n>
+      <I18n></I18n>
       <router-view></router-view>
     </app-provider>
   </n-config-provider>
diff --git a/src/components/Skeleton/index.ts b/src/components/GoSkeleton/index.ts
similarity index 100%
rename from src/components/Skeleton/index.ts
rename to src/components/GoSkeleton/index.ts
diff --git a/src/components/Skeleton/index.vue b/src/components/GoSkeleton/index.vue
similarity index 100%
rename from src/components/Skeleton/index.vue
rename to src/components/GoSkeleton/index.vue
diff --git a/src/components/LoadingComponent/Skeleton.vue b/src/components/LoadingComponent/LoadingSkeleton.vue
similarity index 100%
rename from src/components/LoadingComponent/Skeleton.vue
rename to src/components/LoadingComponent/LoadingSkeleton.vue
diff --git a/src/components/LoadingComponent/index.ts b/src/components/LoadingComponent/index.ts
index 35d4f341..fbda4abe 100644
--- a/src/components/LoadingComponent/index.ts
+++ b/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 './GoSkeleton.vue'
+import AsyncSkeletonLoading from './LoadingSkeleton.vue'
 
 // 正常组件
 export { LoadingComponent }
diff --git a/src/components/LoadingComponent/index.vue b/src/components/LoadingComponent/index.vue
index f99998a4..34ff91fd 100644
--- a/src/components/LoadingComponent/index.vue
+++ b/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=""></div>
+    <img src="~@/assets/images/tips/loadingSvg.svg" alt="" />
   </div>
 </template>
 <style lang="scss" scoped>
diff --git a/src/components/ThemeColorSelect/index.vue b/src/components/ThemeColorSelect/index.vue
index cd8368a4..96ce958c 100644
--- a/src/components/ThemeColorSelect/index.vue
+++ b/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>
+      <color-wand-icon></color-wand-icon>
     </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>
+          <close-icon></close-icon>
         </n-icon>
       </n-space>
       <n-divider></n-divider>
       <div class="model-content" ref="contentLeftRef">
         <div class="content-left" v-if="modelShow">
-          <ColorList :designColor="designColorSplit" @colorSelectHandle="colorSelectHandle"></ColorList>
+          <color-list :designColor="designColorSplit" @colorSelectHandle="colorSelectHandle"></color-list>
         </div>
         <div class="content-right">
           <div class="color-name-detail">
diff --git a/src/layout/components/GoFooter/index.ts b/src/layout/components/GoFooter/index.ts
deleted file mode 100644
index 74abc28e..00000000
--- a/src/layout/components/GoFooter/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import GoFooter from './index.vue'
-
-export { GoFooter }
\ No newline at end of file
diff --git a/src/layout/components/GoHeader/index.ts b/src/layout/components/GoHeader/index.ts
deleted file mode 100644
index bd3b1802..00000000
--- a/src/layout/components/GoHeader/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import GoHeader from './index.vue'
-
-export { GoHeader }
\ No newline at end of file
diff --git a/src/layout/components/HeaderPro/index.ts b/src/layout/components/HeaderPro/index.ts
deleted file mode 100644
index b134fd42..00000000
--- a/src/layout/components/HeaderPro/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import HeaderPro from './index.vue'
-
-export { HeaderPro }
\ No newline at end of file
diff --git a/src/layout/components/LayoutFooter/index.ts b/src/layout/components/LayoutFooter/index.ts
new file mode 100644
index 00000000..9bf22e3d
--- /dev/null
+++ b/src/layout/components/LayoutFooter/index.ts
@@ -0,0 +1,3 @@
+import LayoutFooter from './index.vue'
+
+export { LayoutFooter }
\ No newline at end of file
diff --git a/src/layout/components/GoFooter/index.vue b/src/layout/components/LayoutFooter/index.vue
similarity index 100%
rename from src/layout/components/GoFooter/index.vue
rename to src/layout/components/LayoutFooter/index.vue
diff --git a/src/layout/components/LayoutHeader/index.ts b/src/layout/components/LayoutHeader/index.ts
new file mode 100644
index 00000000..a77dcf16
--- /dev/null
+++ b/src/layout/components/LayoutHeader/index.ts
@@ -0,0 +1,3 @@
+import LayoutHeader from './index.vue'
+
+export { LayoutHeader }
\ No newline at end of file
diff --git a/src/layout/components/GoHeader/index.vue b/src/layout/components/LayoutHeader/index.vue
similarity index 100%
rename from src/layout/components/GoHeader/index.vue
rename to src/layout/components/LayoutHeader/index.vue
diff --git a/src/layout/components/LayoutHeaderPro/index.ts b/src/layout/components/LayoutHeaderPro/index.ts
new file mode 100644
index 00000000..b83135d5
--- /dev/null
+++ b/src/layout/components/LayoutHeaderPro/index.ts
@@ -0,0 +1,3 @@
+import LayoutHeaderPro from './index.vue'
+
+export { LayoutHeaderPro }
\ No newline at end of file
diff --git a/src/layout/components/HeaderPro/index.vue b/src/layout/components/LayoutHeaderPro/index.vue
similarity index 75%
rename from src/layout/components/HeaderPro/index.vue
rename to src/layout/components/LayoutHeaderPro/index.vue
index 65538899..ce188e01 100644
--- a/src/layout/components/HeaderPro/index.vue
+++ b/src/layout/components/LayoutHeaderPro/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <GoHeader>
+  <layout-header>
     <template #left>
       <slot name="left"></slot>
     </template>
@@ -10,12 +10,12 @@
       <slot name="ri-left"></slot>
     </template>
     <template #ri-right>
-      <uer-info></uer-info>
+      <user-info></user-info>
       <slot name="ri-right"></slot>
     </template>
-  </GoHeader>
+  </layout-header>
 </template>
 <script setup lang="ts">
-import { GoHeader } from '@/layout/components/GoHeader'
+import { LayoutHeader } from '@/layout/components/LayoutHeader'
 import { UserInfo } from '@/components/UserInfo'
 </script>
diff --git a/src/layout/components/LayoutMain/index.ts b/src/layout/components/LayoutMain/index.ts
new file mode 100644
index 00000000..e58df035
--- /dev/null
+++ b/src/layout/components/LayoutMain/index.ts
@@ -0,0 +1,3 @@
+import LayoutMain from './index.vue';
+
+export { LayoutMain };
diff --git a/src/layout/components/Main/index.vue b/src/layout/components/LayoutMain/index.vue
similarity index 100%
rename from src/layout/components/Main/index.vue
rename to src/layout/components/LayoutMain/index.vue
diff --git a/src/layout/components/LayoutTransitionMain/index.ts b/src/layout/components/LayoutTransitionMain/index.ts
new file mode 100644
index 00000000..ea4d731f
--- /dev/null
+++ b/src/layout/components/LayoutTransitionMain/index.ts
@@ -0,0 +1,3 @@
+import LayoutTransitionMain from './index.vue';
+
+export { LayoutTransitionMain };
diff --git a/src/layout/components/TransitionMain/index.vue b/src/layout/components/LayoutTransitionMain/index.vue
similarity index 100%
rename from src/layout/components/TransitionMain/index.vue
rename to src/layout/components/LayoutTransitionMain/index.vue
diff --git a/src/layout/components/Main/index.ts b/src/layout/components/Main/index.ts
deleted file mode 100644
index f63218e3..00000000
--- a/src/layout/components/Main/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import MainView from './index.vue';
-
-export { MainView };
diff --git a/src/layout/components/TransitionMain/index.ts b/src/layout/components/TransitionMain/index.ts
deleted file mode 100644
index b236a3ec..00000000
--- a/src/layout/components/TransitionMain/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import TransitionMain from './index.vue';
-
-export { TransitionMain };
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 0704623a..1835c883 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <MainView></MainView>
+  <layout-main></layout-main>
 </template>
 
 <script lang="ts" setup>
-import { MainView } from '@/layout/components/Main/index'
+import { LayoutMain } from '@/layout/components/LayoutMain/index'
 </script>
\ No newline at end of file
diff --git a/src/views/chart/ContentBox/index.vue b/src/views/chart/ContentBox/index.vue
index 032f9b18..f676f844 100644
--- a/src/views/chart/ContentBox/index.vue
+++ b/src/views/chart/ContentBox/index.vue
@@ -18,7 +18,7 @@
           class="go-cursor-pointer"
           @click="backHandle"
         >
-          <ChevronBackOutlineIcon></ChevronBackOutlineIcon>
+          <chevron-back-outline-icon></chevron-back-outline-icon>
         </n-icon>
       </n-space>
     </div>
@@ -46,12 +46,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { icon } from '@/plugins'
 const { ChevronBackOutlineIcon } = icon.ionicons5
 
-const chartEditStore = useChartEditStore()
 const emit = defineEmits(['back'])
 
 defineProps({
diff --git a/src/views/chart/ContentCharts/components/ItemBox/index.vue b/src/views/chart/ContentCharts/components/ItemBox/index.vue
index f6035d2c..7424602e 100644
--- a/src/views/chart/ContentCharts/components/ItemBox/index.vue
+++ b/src/views/chart/ContentCharts/components/ItemBox/index.vue
@@ -9,7 +9,7 @@
       @dragstart="handleDragStart($event, item)"
     >
       <div class="list-header">
-        <MacOsControlBtn :mini="true" :disabled="true"></MacOsControlBtn>
+        <mac-os-control-btn :mini="true" :disabled="true"></mac-os-control-btn>
         <n-text class="list-header-text" depth="3">{{ item.title }}</n-text>
       </div>
       <div class="list-center go-flex-center">
diff --git a/src/views/chart/ContentCharts/components/OptionContent/index.vue b/src/views/chart/ContentCharts/components/OptionContent/index.vue
index 4791bade..e673acd0 100644
--- a/src/views/chart/ContentCharts/components/OptionContent/index.vue
+++ b/src/views/chart/ContentCharts/components/OptionContent/index.vue
@@ -12,7 +12,7 @@
    ></n-menu>
     <div class="chart-content-list">
       <n-scrollbar>
-        <ItemBox :menuOptions="packages.selectOptions"></ItemBox>
+        <item-box :menuOptions="packages.selectOptions"></item-box>
       </n-scrollbar>
     </div>
   </div>
diff --git a/src/views/chart/ContentCharts/index.vue b/src/views/chart/ContentCharts/index.vue
index 5b6f55c8..75a6cda3 100644
--- a/src/views/chart/ContentCharts/index.vue
+++ b/src/views/chart/ContentCharts/index.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 左侧所有组件的展示列表 -->
-  <ContentBox
+  <content-box
     class="go-content-charts"
     :class="{ scoped: !getCharts }"
     title="组件"
@@ -9,7 +9,7 @@
   >
     <template #icon>
       <n-icon size="14" :depth="2">
-        <BarChartIcon></BarChartIcon>
+        <bar-chart-icon></bar-chart-icon>
       </n-icon>
     </template>
     <!-- 图表 -->
@@ -24,22 +24,22 @@
           @update:value="clickItemHandle"
        ></n-menu>
         <div class="menu-component-box">
-          <GoSkeleton
+          <go-skeleton
             :load="!selectOptions"
             round
             text
             :repeat="2"
             style="width: 90%;"
-         ></GoSkeleton>
-          <OptionContent
+         ></go-skeleton>
+          <option-content
             v-if="selectOptions"
             :selectOptions="selectOptions"
             :key="selectValue"
-         ></OptionContent>
+         ></option-content>
         </div>
       </div>
     </aside>
-  </ContentBox>
+  </content-box>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue b/src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue
index a9f8ef77..c6f7c396 100644
--- a/src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue
@@ -7,7 +7,7 @@
     >
       清除动画
     </n-button>
-    <CollapseItem
+    <collapse-item
       v-for="(item, index) in animations"
       :key="index"
       :name="item.label"
@@ -29,7 +29,7 @@
           {{ childrenItem.label }}
         </n-grid-item>
       </n-grid>
-    </CollapseItem>
+    </collapse-item>
   </div>
 </template>
 
diff --git a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue b/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
index 4c69424d..fcb4bedc 100644
--- a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="go-chart-configurations-setting" v-if="targetData">
     <!-- 名称 -->
-    <SettingItemBox name="名称">
+    <setting-item-box name="名称">
       <n-input
         type="text"
         maxlength="6"
@@ -10,17 +10,17 @@
         size="small"
         v-model:value="targetData.chartConfig.title"
      ></n-input>
-    </SettingItemBox>
+    </setting-item-box>
     <!-- 尺寸 -->
-    <SizeSetting :chartAttr="targetData.attr"></SizeSetting>
+    <size-setting :chartAttr="targetData.attr"></size-setting>
     <!-- 位置 -->
-    <PositionSetting :chartAttr="targetData.attr" :canvasConfig="chartEditStore.getEditCanvasConfig"/>
+    <position-setting :chartAttr="targetData.attr" :canvasConfig="chartEditStore.getEditCanvasConfig"/>
     <!-- 样式 -->
-    <StylesSetting :chartStyles="targetData.styles"></StylesSetting>
+    <styles-setting :chartStyles="targetData.styles"></styles-setting>
     <!-- 自定义配置项 -->
     <component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component>
     <!-- 全局设置 --> 
-    <GlobalSetting :optionData="targetData.option" :in-chart="true"></GlobalSetting>
+    <global-setting :optionData="targetData.option" :in-chart="true"></global-setting>
   </div>
 </template>
 
diff --git a/src/views/chart/ContentConfigurations/index.vue b/src/views/chart/ContentConfigurations/index.vue
index 91b69963..ea84e234 100644
--- a/src/views/chart/ContentConfigurations/index.vue
+++ b/src/views/chart/ContentConfigurations/index.vue
@@ -2,7 +2,7 @@
   <n-layout has-sider sider-placement="right">
     <n-layout-content>
       <!-- 图表拖拽区域 -->
-      <ContentEdit></ContentEdit>
+      <content-edit></content-edit>
     </n-layout-content>
     <n-layout-sider
       collapse-mode="transform"
@@ -14,7 +14,7 @@
       @collapse="collapsedHindle"
       @expand="expandHindle"
     >
-      <ContentBox
+      <content-box
         class="go-content-layers go-boderbox"
         :showTop="false"
         :depth="2"
@@ -70,7 +70,7 @@
             <component :is="item.render"></component>
           </n-tab-pane>
         </n-tabs>
-      </ContentBox>
+      </content-box>
     </n-layout-sider>
   </n-layout>
 </template>
diff --git a/src/views/chart/ContentEdit/components/EditBottom/index.vue b/src/views/chart/ContentEdit/components/EditBottom/index.vue
index bd53716a..8f69a91c 100644
--- a/src/views/chart/ContentEdit/components/EditBottom/index.vue
+++ b/src/views/chart/ContentEdit/components/EditBottom/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="go-edit-bottom">
-    <EditHistory></EditHistory>
+    <edit-history></edit-history>
 
     <n-space class="bottom-ri">
       <!-- 快捷键提示 -->
@@ -32,8 +32,8 @@
               size="18"
               :depth="2"
             >
-              <LockClosedOutlineIcon v-if="lockScale"></LockClosedOutlineIcon>
-              <LockOpenOutlineIcon v-else></LockOpenOutlineIcon>
+              <lock-closed-outline-icon v-if="lockScale"></lock-closed-outline-icon>
+              <lock-open-outline-icon v-else></lock-open-outline-icon>
             </n-icon>
           </n-button>
         </template>
diff --git a/src/views/chart/ContentEdit/components/EditHistory/index.vue b/src/views/chart/ContentEdit/components/EditHistory/index.vue
index 41988760..c38df282 100644
--- a/src/views/chart/ContentEdit/components/EditHistory/index.vue
+++ b/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>
+          <help-outline-icon></help-outline-icon>
         </n-icon>
       </template>
       <span>最多只保留 20 条记录</span>
diff --git a/src/views/chart/ContentEdit/components/EditRange/index.vue b/src/views/chart/ContentEdit/components/EditRange/index.vue
index 47fc99a3..8a376559 100644
--- a/src/views/chart/ContentEdit/components/EditRange/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRange/index.vue
@@ -6,7 +6,7 @@
   >
     <slot></slot>
     <!-- 拖拽时的辅助线 -->
-    <EditAlignLine></EditAlignLine>
+    <edit-align-line></edit-align-line>
   </div>
 </template>
 
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index e9bac159..0a2931f0 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <ContentBox
+  <content-box
     id="go-chart-edit-layout"
     :flex="true"
     :showTop="false"
@@ -11,9 +11,9 @@
   >
     <div id="go-chart-edit-content">
       <!-- 展示 -->
-      <EditRange ref="editRangeRef">
+      <edit-range ref="editRangeRef">
         <!-- 图表 -->
-        <EditShapeBox
+        <edit-shape-box
           v-for="(item, index) in chartEditStore.getComponentList"
           :key="item.id"
           :data-id="item.id"
@@ -33,14 +33,14 @@
             :themeColor="themeColor"
             :style="useSizeStyle(item.attr)"
          ></component>
-        </EditShapeBox>
-      </EditRange>
+        </edit-shape-box>
+      </edit-range>
     </div>
     <!-- 底部控制 -->
     <template #bottom>
       <EditBottom></EditBottom>
     </template>
-  </ContentBox>
+  </content-box>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue
index 4b8a8faa..af4156a5 100644
--- a/src/views/chart/ContentLayers/index.vue
+++ b/src/views/chart/ContentLayers/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <ContentBox
+  <content-box
     class="go-content-layers"
     :class="{ scoped: !chartLayoutStore.getLayers }"
     title="图层"
@@ -13,7 +13,7 @@
     </template>
 
     <!-- 图层内容 -->
-    <ListItem
+    <list-item
       v-for="item in  reverseList"
       :key="item.id"
       :componentData="item"
@@ -21,8 +21,8 @@
       @mouseenter="mouseenterHandle(item)"
       @mouseleave="mouseleaveHandle(item)"
       @contextmenu="handleContextMenu($event)"
-   ></ListItem>
-  </ContentBox>
+   ></list-item>
+  </content-box>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/chart/HeaderLeftBtn/index.vue b/src/views/chart/HeaderLeftBtn/index.vue
index ece776f6..c356871b 100644
--- a/src/views/chart/HeaderLeftBtn/index.vue
+++ b/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>
+          <home-icon></home-icon>
         </n-icon>
       </template>
     </n-button>
diff --git a/src/views/chart/HeaderTitle/index.vue b/src/views/chart/HeaderTitle/index.vue
index 2de0996f..09408297 100644
--- a/src/views/chart/HeaderTitle/index.vue
+++ b/src/views/chart/HeaderTitle/index.vue
@@ -1,7 +1,7 @@
 <template>
   <n-space>
     <n-icon size="20" :depth="3">
-      <FishIcon></FishIcon>
+      <fish-icon></fish-icon>
     </n-icon>
     <n-text @click="handleFocus">
       工作空间 -
diff --git a/src/views/chart/index.vue b/src/views/chart/index.vue
index 88738c59..3be623d5 100644
--- a/src/views/chart/index.vue
+++ b/src/views/chart/index.vue
@@ -2,21 +2,21 @@
   <!-- 工作台相关 -->
   <div class="go-chart">
     <n-layout>
-      <HeaderPro>
+      <layout-header-pro>
         <template #left>
-          <HeaderLeftBtn></HeaderLeftBtn>
+          <header-left-btn></header-left-btn>
         </template>
         <template #center>
-          <HeaderTitle></HeaderTitle>
+          <header-title></header-title>
         </template>
         <template #ri-left>
-          <HeaderRightBtn></HeaderRightBtn>
+          <header-right-btn></header-right-btn>
         </template>
-      </HeaderPro>
+      </layout-header-pro>
       <n-layout-content content-style="overflow:hidden; display: flex">
-        <ContentCharts></ContentCharts>
-        <ContentLayers></ContentLayers>
-        <ContentConfigurations></ContentConfigurations>
+        <content-charts></content-charts>
+        <content-layers></content-layers>
+        <content-configurations></content-configurations>
       </n-layout-content>
     </n-layout>
   </div>
@@ -36,7 +36,7 @@
 
 <script setup lang="ts">
 import { loadAsyncComponent } from '@/utils'
-import { HeaderPro } from '@/layout/components/HeaderPro'
+import { LayoutHeaderPro } from '@/layout/components/LayoutHeaderPro'
 import { useContextMenu } from './hooks/useContextMenu.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 464b026b..3edaa7f2 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -15,13 +15,13 @@
         </transition-group>
       </aside>
     </div>
-    <GoHeader>
+    <layout-header>
       <template #left></template>
       <template #right>
-        <LangSelect></LangSelect>
-        <ThemeSelect></ThemeSelect>
+        <lang-select></lang-select>
+        <theme-select></theme-select>
       </template>
-    </GoHeader>
+    </layout-header>
     <div class="go-login">
       <div class="go-login-carousel">
         <n-carousel
@@ -109,7 +109,7 @@
     </div>
 
     <div class="go-login-box-footer">
-      <GoFooter></GoFooter>
+      <layout-footer></layout-footer>
     </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 { GoHeader } from '@/layout/components/GoHeader'
-import { GoFooter } from '@/layout/components/GoFooter'
+import { LayoutHeader } from '@/layout/components/LayoutHeader'
+import { LayoutFooter } from '@/layout/components/LayoutFooter'
 import { PageEnum } from '@/enums/pageEnum'
 import { icon } from '@/plugins'
 import { StorageEnum } from '@/enums/storageEnum'
diff --git a/src/views/preview/components/PreviewRenderList/index.ts b/src/views/preview/components/PreviewRenderList/index.ts
new file mode 100644
index 00000000..5dacecde
--- /dev/null
+++ b/src/views/preview/components/PreviewRenderList/index.ts
@@ -0,0 +1,3 @@
+import PreviewRenderList from './index.vue'
+
+export { PreviewRenderList }
diff --git a/src/views/preview/components/RenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue
similarity index 100%
rename from src/views/preview/components/RenderList/index.vue
rename to src/views/preview/components/PreviewRenderList/index.vue
diff --git a/src/views/preview/components/RenderList/index.ts b/src/views/preview/components/RenderList/index.ts
deleted file mode 100644
index 24ccdfea..00000000
--- a/src/views/preview/components/RenderList/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import RenderList from './index.vue'
-
-export { RenderList }
diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue
index 57b08fd4..04043752 100644
--- a/src/views/preview/index.vue
+++ b/src/views/preview/index.vue
@@ -5,7 +5,7 @@
       <!-- 展示层 -->
       <div :style="previewRefStyle" v-if="show">
         <!-- 渲染层 -->
-        <render-list :localStorageInfo="localStorageInfo"></render-list>
+        <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
       </div>
     </div>
   </div>
@@ -14,7 +14,7 @@
 <script setup lang="ts">
 import { onUnmounted, ref, nextTick, computed } from 'vue'
 import { usePreviewScale } from '@/hooks/index'
-import { RenderList } from './components/RenderList/index'
+import { PreviewRenderList } from './components/PreviewRenderList/index'
 import { ChartEditStorageType } from './index.d'
 import { useEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
 import { CreateComponentType } from '@/packages/index.d'
diff --git a/src/views/project/index.vue b/src/views/project/index.vue
index c70ec87f..9a8b96d1 100644
--- a/src/views/project/index.vue
+++ b/src/views/project/index.vue
@@ -2,10 +2,10 @@
   <div class="go-project">
     <n-layout has-sider position="absolute">
       <n-space vertical>
-        <Sider></Sider>
+        <project-layout-sider></project-layout-sider>
       </n-space>
       <n-layout>
-        <HeaderPro></HeaderPro>
+        <layout-header-pro></layout-header-pro>
         <n-layout
           id="go-project-content-top"
           class="content-top"
@@ -13,9 +13,9 @@
           :native-scrollbar="false"
         >
           <n-layout-content>
-            <TransitionMain>
+            <layout-transition-main>
               <router-view></router-view>
-            </TransitionMain>
+            </layout-transition-main>
           </n-layout-content>
         </n-layout>
       </n-layout>
@@ -24,9 +24,9 @@
 </template>
 
 <script setup lang="ts">
-import { Sider } from './layout/components/Sider'
-import { HeaderPro } from '@/layout/components/HeaderPro'
-import { TransitionMain } from '@/layout/components/TransitionMain/index'
+import { ProjectLayoutSider } from './layout/components/ProjectLayoutSider'
+import { LayoutHeaderPro } from '@/layout/components/LayoutHeaderPro'
+import { LayoutTransitionMain } from '@/layout/components/LayoutTransitionMain/index'
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/project/items/components/Card/index.ts b/src/views/project/items/components/Card/index.ts
deleted file mode 100644
index eb4d8cfa..00000000
--- a/src/views/project/items/components/Card/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Card from './index.vue'
-
-export { Card }
diff --git a/src/views/project/items/components/List/index.ts b/src/views/project/items/components/List/index.ts
deleted file mode 100644
index f9c6a72f..00000000
--- a/src/views/project/items/components/List/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import List from './index.vue'
-
-export { List }
diff --git a/src/views/project/items/components/ModalCard/index.ts b/src/views/project/items/components/ModalCard/index.ts
deleted file mode 100644
index 45d13bff..00000000
--- a/src/views/project/items/components/ModalCard/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import ModalCard from './index.vue'
-
-export { ModalCard }
diff --git a/src/views/project/items/components/ProjectItemsCard/index.ts b/src/views/project/items/components/ProjectItemsCard/index.ts
new file mode 100644
index 00000000..304ac608
--- /dev/null
+++ b/src/views/project/items/components/ProjectItemsCard/index.ts
@@ -0,0 +1,3 @@
+import ProjectItemsCard from './index.vue'
+
+export { ProjectItemsCard }
diff --git a/src/views/project/items/components/Card/index.vue b/src/views/project/items/components/ProjectItemsCard/index.vue
similarity index 98%
rename from src/views/project/items/components/Card/index.vue
rename to src/views/project/items/components/ProjectItemsCard/index.vue
index ed22bfa0..d2c389f3 100644
--- a/src/views/project/items/components/Card/index.vue
+++ b/src/views/project/items/components/ProjectItemsCard/index.vue
@@ -4,12 +4,12 @@
       <div class="list-content">
         <!-- 顶部按钮 -->
         <div class="list-content-top">
-          <MacOsControlBtn
+          <mac-os-control-btn
             class="top-btn"
             :hidden="['remove']"
             @close="deleteHanlde"
             @resize="resizeHandle"
-         ></MacOsControlBtn>
+         ></mac-os-control-btn>
         </div>
         <!-- 中间 -->
         <div class="list-content-img" @click="resizeHandle">
diff --git a/src/views/project/items/components/List/hooks/useData.hook.ts b/src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts
similarity index 96%
rename from src/views/project/items/components/List/hooks/useData.hook.ts
rename to src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts
index 79a5dcbc..3ce496e3 100644
--- a/src/views/project/items/components/List/hooks/useData.hook.ts
+++ b/src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts
@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import { goDialog } from '@/utils'
 import { DialogEnum } from '@/enums/pluginEnum'
-import { ChartList } from '../../../index.d'
+import { ChartList } from '../../..'
 // 数据初始化
 export const useDataListInit = () => {
   const list = ref<ChartList>([
diff --git a/src/views/project/items/components/List/hooks/useModal.hook.ts b/src/views/project/items/components/ProjectItemsList/hooks/useModal.hook.ts
similarity index 95%
rename from src/views/project/items/components/List/hooks/useModal.hook.ts
rename to src/views/project/items/components/ProjectItemsList/hooks/useModal.hook.ts
index 2c64bf8e..89894b03 100644
--- a/src/views/project/items/components/List/hooks/useModal.hook.ts
+++ b/src/views/project/items/components/ProjectItemsList/hooks/useModal.hook.ts
@@ -1,7 +1,7 @@
 import { ref, Ref } from 'vue'
 import { ChartEnum } from '@/enums/pageEnum'
 import { fetchPathByName, routerTurnByPath } from '@/utils'
-import { Chartype } from '../../../index.d'
+import { Chartype } from '../../..'
 export const useModalDataInit = () => {
   const modalShow = ref<boolean>(false)
   const modalData = ref<Chartype | null>(null)
diff --git a/src/views/project/items/components/ProjectItemsList/index.ts b/src/views/project/items/components/ProjectItemsList/index.ts
new file mode 100644
index 00000000..f4b5290e
--- /dev/null
+++ b/src/views/project/items/components/ProjectItemsList/index.ts
@@ -0,0 +1,3 @@
+import ProjectItemsList from './index.vue'
+
+export { ProjectItemsList }
diff --git a/src/views/project/items/components/List/index.vue b/src/views/project/items/components/ProjectItemsList/index.vue
similarity index 81%
rename from src/views/project/items/components/List/index.vue
rename to src/views/project/items/components/ProjectItemsList/index.vue
index 2e648f19..37782fe4 100644
--- a/src/views/project/items/components/List/index.vue
+++ b/src/views/project/items/components/ProjectItemsList/index.vue
@@ -7,27 +7,27 @@
       responsive="screen"
     >
       <n-grid-item v-for="(item, index) in list" :key="item.id">
-        <card
+        <project-items-card
           :cardData="item"
           @resize="resizeHandle"
           @delete="deleteHandle($event, index)"
           @edit="editHandle"
-       ></card>
+       ></project-items-card>
       </n-grid-item>
     </n-grid>
   </div>
-  <ModalCard
+  <project-items-modal-card
     v-if="modalData"
     v-model:modalShow="modalShow"
     :cardData="modalData"
     @close="closeModal"
     @edit="editHandle"
- ></ModalCard>
+ ></project-items-modal-card>
 </template>
 
 <script setup lang="ts">
-import { Card } from '../Card/index'
-import { ModalCard } from '../ModalCard/index'
+import { ProjectItemsCard } from '../ProjectItemsCard/index'
+import { ProjectItemsModalCard } from '../ProjectItemsModalCard/index'
 import { icon } from '@/plugins'
 import { useModalDataInit } from './hooks/useModal.hook'
 import { useDataListInit } from './hooks/useData.hook'
diff --git a/src/views/project/items/components/ProjectItemsModalCard/index.ts b/src/views/project/items/components/ProjectItemsModalCard/index.ts
new file mode 100644
index 00000000..d5b8a582
--- /dev/null
+++ b/src/views/project/items/components/ProjectItemsModalCard/index.ts
@@ -0,0 +1,3 @@
+import ProjectItemsModalCard from './index.vue'
+
+export { ProjectItemsModalCard }
diff --git a/src/views/project/items/components/ModalCard/index.vue b/src/views/project/items/components/ProjectItemsModalCard/index.vue
similarity index 98%
rename from src/views/project/items/components/ModalCard/index.vue
rename to src/views/project/items/components/ProjectItemsModalCard/index.vue
index d9ad3f5e..c3e8629a 100644
--- a/src/views/project/items/components/ModalCard/index.vue
+++ b/src/views/project/items/components/ProjectItemsModalCard/index.vue
@@ -17,11 +17,11 @@
         </n-space>
         <!-- 顶部按钮 -->
         <n-space class="list-content-top">
-          <MacOsControlBtn
+          <mac-os-control-btn
             :narrow="true"
             :hidden="['close']"
             @remove="closeHandle"
-         ></MacOsControlBtn>
+         ></mac-os-control-btn>
         </n-space>
         <!-- 中间 -->
         <div class="list-content-img">
diff --git a/src/views/project/items/index.vue b/src/views/project/items/index.vue
index d8e2ac3f..4f42236c 100644
--- a/src/views/project/items/index.vue
+++ b/src/views/project/items/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="go-project-items">
-    <List></List>
+    <project-items-list></project-items-list>
   </div>
 </template>
 
 <script setup lang="ts">
-import { List } from './components/List'
+import { ProjectItemsList } from './components/ProjectItemsList'
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/project/layout/components/AsideFooter/index.ts b/src/views/project/layout/components/AsideFooter/index.ts
deleted file mode 100644
index 52da003a..00000000
--- a/src/views/project/layout/components/AsideFooter/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import AsideFooter from './index.vue'
-
-export { AsideFooter }
diff --git a/src/views/project/layout/components/Create/index.ts b/src/views/project/layout/components/Create/index.ts
deleted file mode 100644
index f2debf3c..00000000
--- a/src/views/project/layout/components/Create/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Create from './index.vue'
-
-export { Create }
diff --git a/src/views/project/layout/components/Header/index.ts b/src/views/project/layout/components/Header/index.ts
deleted file mode 100644
index 1579ac92..00000000
--- a/src/views/project/layout/components/Header/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import GoHeader from './index.vue'
-
-export { GoHeader }
diff --git a/src/views/project/layout/components/Header/index.vue b/src/views/project/layout/components/Header/index.vue
deleted file mode 100644
index e037f2d9..00000000
--- a/src/views/project/layout/components/Header/index.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <go-header>
-    <template #ri-left>
-    </template>
-    <template #ri-right>
-      <user-info></user-info>
-    </template>
-  </go-header>
-</template>
-<script setup lang="ts">
-import { GoHeader } from '@/layout/components/GoHeader'
-import { UserInfo } from '@/components/UserInfo'
-</script>
diff --git a/src/views/project/layout/components/ProjectLayoutAsideFooter/index.ts b/src/views/project/layout/components/ProjectLayoutAsideFooter/index.ts
new file mode 100644
index 00000000..6032c13c
--- /dev/null
+++ b/src/views/project/layout/components/ProjectLayoutAsideFooter/index.ts
@@ -0,0 +1,3 @@
+import ProjectLayoutAsideFooter from './index.vue'
+
+export { ProjectLayoutAsideFooter }
diff --git a/src/views/project/layout/components/AsideFooter/index.vue b/src/views/project/layout/components/ProjectLayoutAsideFooter/index.vue
similarity index 89%
rename from src/views/project/layout/components/AsideFooter/index.vue
rename to src/views/project/layout/components/ProjectLayoutAsideFooter/index.vue
index f76c373b..aab278f6 100644
--- a/src/views/project/layout/components/AsideFooter/index.vue
+++ b/src/views/project/layout/components/ProjectLayoutAsideFooter/index.vue
@@ -7,7 +7,7 @@
           <n-button secondary @click="handleDoc">
             <template #icon>
               <n-icon size="18">
-                <HelpOutlineIcon></HelpOutlineIcon>
+                <help-outline-icon></help-outline-icon>
               </n-icon>
             </template>
           </n-button>
@@ -20,7 +20,7 @@
       <n-button v-else secondary @click="handleDoc">
         <template #icon>
           <n-icon size="18">
-            <HelpOutlineIcon></HelpOutlineIcon>
+            <help-outline-icon></help-outline-icon>
           </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>
+                <code-slash-icon></code-slash-icon>
               </n-icon>
             </template>
           </n-button>
@@ -44,7 +44,7 @@
       <n-button v-else secondary @click="handleCode">
         <template #icon>
           <n-icon size="18">
-            <CodeSlashIcon></CodeSlashIcon>
+            <code-slash-icon></code-slash-icon>
           </n-icon>
         </template>
         <n-text v-show="!collapsed">{{ $t('global.code_addr') }}</n-text>
diff --git a/src/views/project/layout/components/Create/components/CreateModal/index.ts b/src/views/project/layout/components/ProjectLayoutCreate/components/CreateModal/index.ts
similarity index 100%
rename from src/views/project/layout/components/Create/components/CreateModal/index.ts
rename to src/views/project/layout/components/ProjectLayoutCreate/components/CreateModal/index.ts
diff --git a/src/views/project/layout/components/Create/components/CreateModal/index.vue b/src/views/project/layout/components/ProjectLayoutCreate/components/CreateModal/index.vue
similarity index 100%
rename from src/views/project/layout/components/Create/components/CreateModal/index.vue
rename to src/views/project/layout/components/ProjectLayoutCreate/components/CreateModal/index.vue
diff --git a/src/views/project/layout/components/ProjectLayoutCreate/index.ts b/src/views/project/layout/components/ProjectLayoutCreate/index.ts
new file mode 100644
index 00000000..d732e526
--- /dev/null
+++ b/src/views/project/layout/components/ProjectLayoutCreate/index.ts
@@ -0,0 +1,3 @@
+import ProjectLayoutCreate from './index.vue'
+
+export { ProjectLayoutCreate }
diff --git a/src/views/project/layout/components/Create/index.vue b/src/views/project/layout/components/ProjectLayoutCreate/index.vue
similarity index 97%
rename from src/views/project/layout/components/Create/index.vue
rename to src/views/project/layout/components/ProjectLayoutCreate/index.vue
index 36791259..12f294f9 100644
--- a/src/views/project/layout/components/Create/index.vue
+++ b/src/views/project/layout/components/ProjectLayoutCreate/index.vue
@@ -6,7 +6,7 @@
           <template #icon>
             <n-icon>
               <DuplicateOutlineIcon v-show="designStore.getDarkTheme"></DuplicateOutlineIcon>
-              <DuplicateIcon v-show="!designStore.getDarkTheme"></DuplicateOutlineIcon>
+              <DuplicateIcon v-show="!designStore.getDarkTheme"></DuplicateIcon>
             </n-icon>
           </template>
         </n-button>
@@ -19,7 +19,7 @@
       <template #icon>
         <n-icon>
           <DuplicateOutlineIcon v-show="designStore.getDarkTheme"></DuplicateOutlineIcon>
-          <DuplicateIcon v-show="!designStore.getDarkTheme"></DuplicateOutlineIcon>
+          <DuplicateIcon v-show="!designStore.getDarkTheme"></DuplicateIcon>
         </n-icon>
       </template>
       <span>
diff --git a/src/views/project/layout/components/ProjectLayoutSider/index.ts b/src/views/project/layout/components/ProjectLayoutSider/index.ts
new file mode 100644
index 00000000..d870ccec
--- /dev/null
+++ b/src/views/project/layout/components/ProjectLayoutSider/index.ts
@@ -0,0 +1,3 @@
+import ProjectLayoutSider from './index.vue'
+
+export { ProjectLayoutSider }
diff --git a/src/views/project/layout/components/Sider/index.vue b/src/views/project/layout/components/ProjectLayoutSider/index.vue
similarity index 85%
rename from src/views/project/layout/components/Sider/index.vue
rename to src/views/project/layout/components/ProjectLayoutSider/index.vue
index e04faf77..6fb5d600 100644
--- a/src/views/project/layout/components/Sider/index.vue
+++ b/src/views/project/layout/components/ProjectLayoutSider/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>
+          <project-layout-create :collapsed="collapsed"></project-layout-create>
         </n-space>
         <n-menu
           :value="menuValue"
@@ -26,7 +26,7 @@
       </aside>
       <!-- 底部提示 -->
       <div class="sider-bottom">
-        <AsideFooter :collapsed="collapsed"></AsideFooter>
+        <project-layout-aside-footer :collapsed="collapsed"></project-layout-aside-footer>
       </div>
     </div>
   </n-layout-sider>
@@ -34,9 +34,9 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, toRefs } from 'vue'
-import { Create } from '../Create/index'
-import { AsideFooter } from '../AsideFooter/index'
-import { asideWidth, asideCollapsedWidth } from '@/settings/designSetting'
+import { ProjectLayoutCreate } from '../ProjectLayoutCreate/index'
+import { ProjectLayoutAsideFooter } from '../ProjectLayoutAsideFooter/index'
+import { asideWidth } from '@/settings/designSetting'
 import { useRoute } from 'vue-router'
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { menuOptionsInit, expandedKeys } from './menu'
diff --git a/src/views/project/layout/components/Sider/menu.ts b/src/views/project/layout/components/ProjectLayoutSider/menu.ts
similarity index 100%
rename from src/views/project/layout/components/Sider/menu.ts
rename to src/views/project/layout/components/ProjectLayoutSider/menu.ts
diff --git a/src/views/project/layout/components/Sider/index.ts b/src/views/project/layout/components/Sider/index.ts
deleted file mode 100644
index 6f637c45..00000000
--- a/src/views/project/layout/components/Sider/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Sider from './index.vue'
-
-export { Sider }