diff --git a/src/components/ErrorComponent/index.ts b/src/components/ErrorComponent/index.ts
new file mode 100644
index 00000000..bae99e7d
--- /dev/null
+++ b/src/components/ErrorComponent/index.ts
@@ -0,0 +1,3 @@
+import ErrorComponent from './index.vue';
+
+export { ErrorComponent };
diff --git a/src/components/ErrorComponent/index.vue b/src/components/ErrorComponent/index.vue
new file mode 100644
index 00000000..92c8ff88
--- /dev/null
+++ b/src/components/ErrorComponent/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <n-result status="error" title="错误" description="加载失败啦"> </n-result>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/LoadingComponent/index.ts b/src/components/LoadingComponent/index.ts
new file mode 100644
index 00000000..5f8c69de
--- /dev/null
+++ b/src/components/LoadingComponent/index.ts
@@ -0,0 +1,3 @@
+import LoadingComponent from './index.vue';
+
+export { LoadingComponent };
diff --git a/src/components/LoadingComponent/index.vue b/src/components/LoadingComponent/index.vue
new file mode 100644
index 00000000..9d36943b
--- /dev/null
+++ b/src/components/LoadingComponent/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <Skeleton repeat="3" :load="true"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Skeleton } from '@/components/Skeleton/index'
+</script>
\ No newline at end of file
diff --git a/src/views/chart/components/ContentDetails/index.vue b/src/views/chart/components/ContentDetails/index.vue
index bc130ba1..2abb3510 100644
--- a/src/views/chart/components/ContentDetails/index.vue
+++ b/src/views/chart/components/ContentDetails/index.vue
@@ -27,7 +27,6 @@
 
 <script setup lang="ts">
 import { reactive, shallowRef } from 'vue'
-import { renderIcon } from '@/utils'
 import { icon } from '@/plugins'
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
@@ -42,13 +41,13 @@ const tabList = reactive([
   {
     key: 'setting',
     title: '配置项',
-    icon: renderIcon(CubeIcon),
+    icon: CubeIcon,
     render: shallowRef(Setting)
   },
   {
     key: 'behind',
     title: '后端数据',
-    icon: renderIcon(FlashIcon),
+    icon: FlashIcon,
     render: shallowRef(Behind)
   }
 ])