diff --git a/src/router/index.ts b/src/router/index.ts
index a529ca0..0771d30 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -16,7 +16,6 @@ import nestedRouter from './modules/nested'
 import systemRouter from './modules/system'
 import chartsRouter from './modules/charts'
 import chatRouter from './modules/chat'
-import componentsRouter from './modules/components'
 import othersRouter from './modules/other'
 import externalLink from './modules/externalLink'
 import formRouter from './modules/from'
@@ -118,10 +117,10 @@ export const asyncRoutes = [
     externalLink,
     clipboardTable,
     systemRouter,
-    // {
-    //     path: '/:pathMatch(.*)',
-    //     redirect: '/error/404'
-    // }
+    {
+        path: '/:pathMatch(.*)',
+        redirect: '/error/404'
+    }
 ]
 
 const router = createRouter({
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
deleted file mode 100644
index 2c9070a..0000000
--- a/src/router/modules/components.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-/** When your routing table is too long, you can split it into small modules**/
-
-import Layout from "@/layout/index.vue";
-
-const componentsRouter = {
-    path: '/components',
-    component: Layout,
-    redirect: 'noRedirect',
-    name: 'components',
-    meta: {
-        title: '基础组件',
-        icon: 'Histogram',
-        roles:['other']
-    },
-    children: [
-        {
-            path: 'button',
-            component: () => import('@/views/components-demo/button.vue'),
-            name: 'button',
-            meta: { title: '按钮', icon: 'MenuIcon'  }
-        },
-
-
-        {
-            path: 'link',
-            component: () => import('@/views/components-demo/link.vue'),
-            name: 'link',
-            meta: { title: '文字链接',   roles:['other'], icon: 'MenuIcon'}
-        },
-        {
-            path: 'radio',
-            component: () => import('@/views/components-demo/radio.vue'),
-            name: 'radio',
-            meta: { title: '单选框',  roles:['other'], icon: 'MenuIcon'}
-        },
-        {
-            path: 'checkbox',
-            component: () => import('@/views/components-demo/checkbox.vue'),
-            name: 'checkbox',
-            meta: { title: '多选框',  roles:['other'], icon: 'MenuIcon'}
-        },
-        {
-            path: 'input',
-            component: () => import('@/views/components-demo/input.vue'),
-            name: 'components-input',
-            meta: { title: '输入框',  roles:['other'], icon: 'MenuIcon'}
-        },
-        {
-            path: 'components-inputnumber',
-            component: () => import('@/views/components-demo/inputnumber.vue'),
-            name: 'components-inputnumber',
-            meta: { title: '数字输入框',  roles:['other'], icon: 'MenuIcon'}
-        },
-        {
-            path: 'timepicker',
-            component: () => import('@/views/components-demo/timepicker.vue'),
-            name: 'timepicker',
-            meta: { title: '时间选择器',  roles:['other'], icon: 'MenuIcon'}
-        },
-        {
-            path: 'datetimepicker',
-            component: () => import('@/views/components-demo/datetimepicker.vue'),
-            name: 'datetimepicker',
-            meta: { title: '日期时间选择器',  roles:['other'], icon: 'MenuIcon'}
-        },
-        {
-            path: 'scroll',
-            component: () => import('@/views/components-demo/scroll.vue'),
-            name: 'scroll',
-            meta: { title: '无限滚动', icon: 'MenuIcon' }
-        },
-
-
-
-    ]
-}
-
-export default componentsRouter
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 2f5f33b..670451e 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,6 +1,3 @@
-/**
- * Created by PanJiaChen on 16/11/18.
- */
 
 /**
  * Parse the time to string
diff --git a/src/utils/validate.ts b/src/utils/validate.ts
index 2ab4cc9..e039421 100644
--- a/src/utils/validate.ts
+++ b/src/utils/validate.ts
@@ -1,6 +1,3 @@
-/**
- * Created by PanJiaChen on 16/11/18.
- */
 
 /**
  * @param {string} path
diff --git a/src/views/components-demo/button.vue b/src/views/components-demo/button.vue
deleted file mode 100644
index 2a4eb3f..0000000
--- a/src/views/components-demo/button.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
-  <u-container-layout>
-    <div>
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>基础用法 </span>
-          </div>
-        </template>
-        <div>
-          <el-button class="item">Default</el-button>
-          <el-button type="primary" class="item">Primary</el-button>
-          <el-button type="success" class="item">Success</el-button>
-          <el-button type="info" class="item">Info</el-button>
-          <el-button type="warning" class="item">Warning</el-button>
-          <el-button type="danger" class="item">Danger</el-button>
-          <el-button class="item">中文</el-button>
-          <el-button plain class="item">Plain</el-button>
-          <el-button type="primary" plain class="item">Primary</el-button>
-          <el-button type="success" plain class="item">Success</el-button>
-          <el-button type="info" plain class="item">Info</el-button>
-          <el-button type="warning" plain class="item">Warning</el-button>
-          <el-button type="danger" plain class="item">Danger</el-button>
-          <el-button round class="item">Round</el-button>
-          <el-button type="primary" round class="item">Primary</el-button>
-          <el-button type="success" round class="item">Success</el-button>
-          <el-button type="info" round class="item">Info</el-button>
-          <el-button type="warning" round class="item">Warning</el-button>
-          <el-button type="danger" round class="item">Danger</el-button>
-          <el-button :icon="Search" circle class="item" />
-          <el-button type="primary" :icon="Edit" circle class="item" />
-          <el-button type="success" :icon="Check" circle class="item" />
-          <el-button type="info" :icon="Message" circle class="item" />
-          <el-button type="warning" :icon="Star" circle class="item" />
-          <el-button type="danger" :icon="Delete" circle class="item" />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>禁用状态 </span>
-          </div>
-        </template>
-        <div>
-          <el-button disabled class="item">Default</el-button>
-          <el-button type="primary" disabled class="item">Primary</el-button>
-          <el-button type="success" disabled class="item">Success</el-button>
-          <el-button type="info" disabled class="item">Info</el-button>
-          <el-button type="warning" disabled class="item">Warning</el-button>
-          <el-button type="danger" disabled class="item">Danger</el-button>
-          <el-button plain disabled class="item">Plain</el-button>
-          <el-button type="primary" plain disabled class="item">Primary</el-button>
-          <el-button type="success" plain disabled class="item">Success</el-button>
-          <el-button type="info" plain disabled class="item"> Info</el-button>
-          <el-button type="warning" plain disabled class="item">Warning</el-button>
-          <el-button type="danger" plain disabled class="item">Danger</el-button>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>文字按钮 </span>
-          </div>
-        </template>
-        <div>
-          <el-button type="primary" link class="item">文字按钮</el-button>
-          <el-button type="primary" link disabled class="item">文字按钮</el-button>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>图标按钮 </span>
-          </div>
-        </template>
-        <div>
-          <el-button type="primary" :icon="Edit" class="item" />
-          <el-button type="primary" :icon="Share" class="item" />
-          <el-button type="primary" :icon="Delete" class="item" />
-          <el-button type="primary" :icon="Search" class="item">Search</el-button>
-          <el-button type="primary" class="item">
-            Upload<el-icon class="el-icon--right"><Upload /></el-icon>
-          </el-button>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>按钮组 </span>
-          </div>
-        </template>
-        <div>
-          <el-button type="primary" icon="ArrowLeft" class="item">上一页</el-button>
-          <el-button type="primary" class="item">
-            下一页<el-icon class="el-icon--right"><ArrowRight /></el-icon>
-          </el-button>
-          <el-button type="primary" :icon="Edit" class="item" />
-          <el-button type="primary" :icon="Share" class="item" />
-          <el-button type="primary" :icon="Delete" class="item" />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>加载中 </span>
-          </div>
-        </template>
-        <div>
-          <el-button type="primary" loading class="item">Loading</el-button>
-          <el-button type="primary" loading-icon="Eleme" loading class="item">Loading</el-button>
-          <el-button type="primary" loading class="item">
-            <template #loading>
-              <div class="custom-loading">
-                <svg class="circular" viewBox="-10, -10, 50, 50">
-                  <path
-                    class="path"
-                    d="
-            M 30 15
-            L 28 17
-            M 25.61 25.61
-            A 15 15, 0, 0, 1, 15 30
-            A 15 15, 0, 1, 1, 27.99 7.5
-            L 15 15
-          "
-                    style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
-                  />
-                </svg>
-              </div>
-            </template>
-            Loading
-          </el-button>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>自定义颜色 </span>
-          </div>
-        </template>
-        <div>
-          <el-button color="#626aef" class="item">Default</el-button>
-          <el-button color="#626aef" plain class="item">Plain</el-button>
-
-          <el-button color="#626aef" disabled class="item">Disabled</el-button>
-          <el-button color="#626aef" disabled plain class="item">Disabled Plain</el-button>
-        </div>
-      </el-card>
-    </div>
-  </u-container-layout>
-</template>
-<script lang="ts" setup>
-  import { Check, Delete, Edit, Message, Search, Share, Star } from '@element-plus/icons-vue'
-</script>
-<style>
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .text {
-    font-size: 14px;
-  }
-
-  .item {
-    margin-bottom: 18px;
-  }
-
-  .box-card {
-    width: 100%;
-    margin-bottom: 20px;
-  }
-</style>
diff --git a/src/views/components-demo/checkbox.vue b/src/views/components-demo/checkbox.vue
deleted file mode 100644
index 6047a59..0000000
--- a/src/views/components-demo/checkbox.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-  <u-container-layout>
-    <div>
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>基础用法 </span>
-          </div>
-        </template>
-        <div>
-          <el-checkbox v-model="checked1" label="备选项1" />
-          <el-checkbox v-model="checked2" label="备选项1" />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>禁用状态 </span>
-          </div>
-        </template>
-        <div>
-          <el-checkbox v-model="checked1" disabled>备选项11</el-checkbox>
-          <el-checkbox v-model="checked2">备选项2</el-checkbox>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>多选框组 </span>
-          </div>
-        </template>
-        <div>
-          <el-checkbox-group v-model="checkList">
-            <el-checkbox label="备选项 A" />
-            <el-checkbox label="备选项 B" />
-            <el-checkbox label="备选项 C" />
-            <el-checkbox label="禁用" disabled />
-            <el-checkbox label="选中且禁用" disabled />
-          </el-checkbox-group>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>中间状态 </span>
-          </div>
-        </template>
-        <div>
-          <el-checkbox
-            v-model="checkAll"
-            :indeterminate="isIndeterminate"
-            @change="handleCheckAllChange"
-            >全选</el-checkbox
-          >
-          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
-            <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
-          </el-checkbox-group>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>按钮样式 </span>
-          </div>
-        </template>
-        <div>
-          <el-checkbox-group v-model="checkboxGroup1">
-            <el-checkbox-button v-for="city in cities" :key="city" :label="city">
-              {{ city }}
-            </el-checkbox-button>
-          </el-checkbox-group>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>带有边框 </span>
-          </div>
-        </template>
-        <div>
-          <el-checkbox v-model="checked1" label="备选项1" border />
-          <el-checkbox v-model="checked2" label="备选项2" border />
-        </div>
-      </el-card>
-    </div>
-  </u-container-layout>
-</template>
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  const checked1 = ref(false)
-  const checked2 = ref(true)
-  const checkList = ref(['选中且禁用', '备选项 A'])
-  const cities = ['上海', '北京', '广州', '深圳']
-  const checkAll = ref(false)
-  const isIndeterminate = ref(true)
-  const checkedCities = ref(['上海', '北京'])
-  const checkboxGroup1 = ref(['上海'])
-  const handleCheckAllChange = (val: boolean) => {
-    checkedCities.value = val ? cities : []
-    isIndeterminate.value = false
-  }
-  const handleCheckedCitiesChange = (value: string[]) => {
-    const checkedCount = value.length
-    checkAll.value = checkedCount === cities.length
-    isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
-  }
-</script>
-<style>
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .el-link {
-    margin-right: 8px;
-  }
-  .el-link .el-icon--right.el-icon {
-    vertical-align: text-bottom;
-  }
-  .text {
-    font-size: 14px;
-  }
-
-  .item {
-    margin-bottom: 18px;
-  }
-
-  .box-card {
-    width: 100%;
-    margin-bottom: 20px;
-  }
-</style>
diff --git a/src/views/components-demo/datetimepicker.vue b/src/views/components-demo/datetimepicker.vue
deleted file mode 100644
index f2dbecc..0000000
--- a/src/views/components-demo/datetimepicker.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<template>
-  <u-container-layout>
-    <div>
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>日期和时间点 </span>
-          </div>
-        </template>
-        <div>
-          <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间点" />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>日期时间格式 </span>
-          </div>
-        </template>
-        <div>
-          <el-date-picker
-            v-model="value4"
-            type="datetime"
-            placeholder="选择时间"
-            format="YYYY/MM/DD hh:mm:ss"
-          />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>日期和时间范围 </span>
-          </div>
-        </template>
-        <div>
-          <el-date-picker
-            :shortcuts="shortcuts1"
-            v-model="value3"
-            type="datetimerange"
-            range-separator="-"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>默认的起始与结束时刻 </span>
-          </div>
-        </template>
-        <div>
-          <el-date-picker
-            v-model="value5"
-            type="datetimerange"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            :default-time="defaultTime1"
-          />
-        </div>
-      </el-card>
-    </div>
-  </u-container-layout>
-</template>
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  const value1 = ref('')
-  const value4 = ref('')
-  const value5 = ref('')
-  const defaultTime1 = [new Date(2000, 1, 1, 12, 0, 0)]
-  const value3 = ref([new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)])
-  const shortcuts = [
-    {
-      text: 'Today',
-      value: new Date(),
-    },
-    {
-      text: 'Yesterday',
-      value: () => {
-        const date = new Date()
-        date.setTime(date.getTime() - 3600 * 1000 * 24)
-        return date
-      },
-    },
-    {
-      text: 'A week ago',
-      value: () => {
-        const date = new Date()
-        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
-        return date
-      },
-    },
-  ]
-
-  const shortcuts1 = [
-    {
-      text: 'Last week',
-      value: () => {
-        const end = new Date()
-        const start = new Date()
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-        return [start, end]
-      },
-    },
-    {
-      text: 'Last month',
-      value: () => {
-        const end = new Date()
-        const start = new Date()
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-        return [start, end]
-      },
-    },
-    {
-      text: 'Last 3 months',
-      value: () => {
-        const end = new Date()
-        const start = new Date()
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-        return [start, end]
-      },
-    },
-  ]
-</script>
-<style>
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .el-link {
-    margin-right: 8px;
-  }
-  .el-link .el-icon--right.el-icon {
-    vertical-align: text-bottom;
-  }
-  .text {
-    font-size: 14px;
-  }
-
-  .item {
-    margin-bottom: 18px;
-  }
-
-  .box-card {
-    width: 100%;
-    margin-bottom: 20px;
-  }
-</style>
diff --git a/src/views/components-demo/flow-chart.vue b/src/views/components-demo/flow-chart.vue
deleted file mode 100644
index 971c0a3..0000000
--- a/src/views/components-demo/flow-chart.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <u-container-layout>
-    <zb-pipeline />
-  </u-container-layout>
-</template>
-
-<script lang="ts" setup>
-  import ZbPipeline from '@/components/pipeline/index.vue'
-</script>
-
-<style></style>
diff --git a/src/views/components-demo/input.vue b/src/views/components-demo/input.vue
deleted file mode 100644
index aa51f60..0000000
--- a/src/views/components-demo/input.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <u-container-layout>
-    <div>
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>基础用法 </span>
-          </div>
-        </template>
-        <div>
-          <el-input v-model="input" placeholder="请输入内容" />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>禁用状态 </span>
-          </div>
-        </template>
-        <div>
-          <el-input v-model="input" disabled placeholder="请输入内容" />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>一键清空 </span>
-          </div>
-        </template>
-        <div>
-          <el-input v-model="input" placeholder="请输入内容" clearable />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>格式化 </span>
-          </div>
-        </template>
-        <div>
-          <el-input
-            v-model="input"
-            placeholder="请输入内容"
-            :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
-            :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
-          />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>密码框 </span>
-          </div>
-        </template>
-        <div>
-          <el-input v-model="input" type="password" placeholder="请输入密码" show-password />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>带 icon 的输入框 </span>
-          </div>
-        </template>
-        <div>
-          <el-input v-model="input" placeholder="请输入内容" :suffix-icon="Calendar" />
-          <el-input v-model="input2" placeholder="请输入内容" :prefix-icon="Search" />
-        </div>
-      </el-card>
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>文本域 </span>
-          </div>
-        </template>
-        <div>
-          <el-input v-model="textarea" :rows="2" type="textarea" placeholder="请输入内容" />
-        </div>
-      </el-card>
-    </div>
-  </u-container-layout>
-</template>
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  import { Calendar, Search } from '@element-plus/icons-vue'
-  const input = ref('')
-  const input2 = ref('')
-  const textarea = ref('')
-</script>
-<style>
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .box-card {
-    width: 100%;
-    margin-bottom: 20px;
-  }
-</style>
diff --git a/src/views/components-demo/inputnumber.vue b/src/views/components-demo/inputnumber.vue
deleted file mode 100644
index ac124e9..0000000
--- a/src/views/components-demo/inputnumber.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <u-container-layout>
-    <div>
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>基础用法 </span>
-          </div>
-        </template>
-        <div>
-          <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>禁用状态 </span>
-          </div>
-        </template>
-        <div>
-          <el-input-number v-model="num" :disabled="true" />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>步进 </span>
-          </div>
-        </template>
-        <div>
-          <el-input-number v-model="num" :step="2" />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>严格步进 </span>
-          </div>
-        </template>
-        <div>
-          <el-input-number v-model="num" :step="2" step-strictly />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>精度 </span>
-          </div>
-        </template>
-        <div>
-          <el-input-number v-model="num" :precision="2" :step="0.1" :max="10" />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>按钮位置 </span>
-          </div>
-        </template>
-        <div>
-          <el-input-number
-            v-model="num"
-            class="mx-4"
-            :min="1"
-            :max="10"
-            controls-position="right"
-            @change="handleChange"
-          />
-        </div>
-      </el-card>
-    </div>
-  </u-container-layout>
-</template>
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  const num = ref(1)
-  const handleChange = (value: number) => {
-    console.log(value)
-  }
-</script>
-<style>
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .el-link {
-    margin-right: 8px;
-  }
-  .el-link .el-icon--right.el-icon {
-    vertical-align: text-bottom;
-  }
-  .text {
-    font-size: 14px;
-  }
-
-  .item {
-    margin-bottom: 18px;
-  }
-
-  .box-card {
-    width: 100%;
-    margin-bottom: 20px;
-  }
-</style>
diff --git a/src/views/components-demo/link.vue b/src/views/components-demo/link.vue
deleted file mode 100644
index 4005950..0000000
--- a/src/views/components-demo/link.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <u-container-layout>
-    <div>
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>基础用法 </span>
-          </div>
-        </template>
-        <div>
-          <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
-          <el-link type="primary">主要链接</el-link>
-          <el-link type="success">成功链接</el-link>
-          <el-link type="warning">警告链接</el-link>
-          <el-link type="danger">危险链接</el-link>
-          <el-link type="info">信息链接</el-link>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>禁用状态 </span>
-          </div>
-        </template>
-        <div>
-          <el-link disabled>默认链接</el-link>
-          <el-link type="primary" disabled>主要链接</el-link>
-          <el-link type="success" disabled>成功链接</el-link>
-          <el-link type="warning" disabled>警告链接</el-link>
-          <el-link type="danger" disabled>危险链接</el-link>
-          <el-link type="info" disabled>信息链接</el-link>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>下划线 </span>
-          </div>
-        </template>
-        <div>
-          <el-link :underline="false">无下划线</el-link>
-          <el-link>有下划线</el-link>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>图标 </span>
-          </div>
-        </template>
-        <div>
-          <el-link :icon="Edit">编辑</el-link>
-          <el-link>
-            查看<el-icon class="el-icon--right"><icon-view /></el-icon>
-          </el-link>
-        </div>
-      </el-card>
-    </div>
-  </u-container-layout>
-</template>
-<script lang="ts" setup>
-  import { Edit, View as IconView } from '@element-plus/icons-vue'
-</script>
-<style lang="scss" scoped>
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .el-link {
-    margin-right: 8px;
-  }
-  .el-link .el-icon--right.el-icon {
-    vertical-align: text-bottom;
-  }
-  .text {
-    font-size: 14px;
-  }
-
-  .item {
-    margin-bottom: 18px;
-  }
-
-  .box-card {
-    width: 100%;
-    margin-bottom: 20px;
-  }
-</style>
diff --git a/src/views/components-demo/radio.vue b/src/views/components-demo/radio.vue
deleted file mode 100644
index 154e59c..0000000
--- a/src/views/components-demo/radio.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <u-container-layout>
-    <div>
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>基础用法 </span>
-          </div>
-        </template>
-        <div>
-          <el-radio v-model="radio4" label="1">备选项</el-radio>
-          <el-radio v-model="radio4" label="2">备选项1</el-radio>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>禁用状态 </span>
-          </div>
-        </template>
-        <div>
-          <el-radio v-model="radio1" disabled label="disabled">备选项 1</el-radio>
-          <el-radio v-model="radio1" disabled label="selected and disabled">备选项 2</el-radio>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>单选框组 </span>
-          </div>
-        </template>
-        <div>
-          <el-radio-group v-model="radio">
-            <el-radio :label="3">备选项 1</el-radio>
-            <el-radio :label="6">备选项 2</el-radio>
-            <el-radio :label="9">备选项 3</el-radio>
-          </el-radio-group>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>按钮样式 </span>
-          </div>
-        </template>
-        <div>
-          <el-radio-group v-model="radio2">
-            <el-radio-button label="上海" />
-            <el-radio-button label="北京" />
-            <el-radio-button label="广州" />
-            <el-radio-button label="深圳" />
-          </el-radio-group>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>带有边框 </span>
-          </div>
-        </template>
-        <div>
-          <el-radio v-model="radio3" label="1" border>备选项1</el-radio>
-          <el-radio v-model="radio3" label="2" border>备选项2</el-radio>
-        </div>
-      </el-card>
-    </div>
-  </u-container-layout>
-</template>
-<script lang="ts" setup>
-  import { Edit, View as IconView } from '@element-plus/icons-vue'
-  import { ref } from 'vue'
-
-  const radio = ref(3)
-  const radio1 = ref('selected and disabled')
-  const radio2 = ref('上海')
-  const radio3 = ref('1')
-  const radio4 = ref('1')
-</script>
-<style scoped>
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .el-link {
-    margin-right: 8px;
-  }
-  .el-link .el-icon--right.el-icon {
-    vertical-align: text-bottom;
-  }
-  .text {
-    font-size: 14px;
-  }
-
-  .item {
-    margin-bottom: 18px;
-  }
-
-  .box-card {
-    width: 100%;
-    margin-bottom: 20px;
-  }
-</style>
diff --git a/src/views/components-demo/scroll.vue b/src/views/components-demo/scroll.vue
deleted file mode 100644
index 5406564..0000000
--- a/src/views/components-demo/scroll.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <u-container-layout>
-    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
-      <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
-      <div
-        v-if="isLoading"
-        style="
-          height: 50px;
-          width: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        "
-        >正在加载中...</div
-      >
-    </ul>
-  </u-container-layout>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  const count = ref(0)
-  const isLoading = ref(true)
-  const load = () => {
-    count.value += 3
-  }
-</script>
-
-<style>
-  .infinite-list {
-    height: 300px;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-  .infinite-list .infinite-list-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 50px;
-    background: var(--el-color-primary-light-9);
-    margin: 10px;
-    color: var(--el-color-primary);
-  }
-  .infinite-list .infinite-list-item + .list-item {
-    margin-top: 10px;
-  }
-</style>
diff --git a/src/views/components-demo/slider.vue b/src/views/components-demo/slider.vue
deleted file mode 100644
index 6047a59..0000000
--- a/src/views/components-demo/slider.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-  <u-container-layout>
-    <div>
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>基础用法 </span>
-          </div>
-        </template>
-        <div>
-          <el-checkbox v-model="checked1" label="备选项1" />
-          <el-checkbox v-model="checked2" label="备选项1" />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>禁用状态 </span>
-          </div>
-        </template>
-        <div>
-          <el-checkbox v-model="checked1" disabled>备选项11</el-checkbox>
-          <el-checkbox v-model="checked2">备选项2</el-checkbox>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>多选框组 </span>
-          </div>
-        </template>
-        <div>
-          <el-checkbox-group v-model="checkList">
-            <el-checkbox label="备选项 A" />
-            <el-checkbox label="备选项 B" />
-            <el-checkbox label="备选项 C" />
-            <el-checkbox label="禁用" disabled />
-            <el-checkbox label="选中且禁用" disabled />
-          </el-checkbox-group>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>中间状态 </span>
-          </div>
-        </template>
-        <div>
-          <el-checkbox
-            v-model="checkAll"
-            :indeterminate="isIndeterminate"
-            @change="handleCheckAllChange"
-            >全选</el-checkbox
-          >
-          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
-            <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
-          </el-checkbox-group>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>按钮样式 </span>
-          </div>
-        </template>
-        <div>
-          <el-checkbox-group v-model="checkboxGroup1">
-            <el-checkbox-button v-for="city in cities" :key="city" :label="city">
-              {{ city }}
-            </el-checkbox-button>
-          </el-checkbox-group>
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>带有边框 </span>
-          </div>
-        </template>
-        <div>
-          <el-checkbox v-model="checked1" label="备选项1" border />
-          <el-checkbox v-model="checked2" label="备选项2" border />
-        </div>
-      </el-card>
-    </div>
-  </u-container-layout>
-</template>
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  const checked1 = ref(false)
-  const checked2 = ref(true)
-  const checkList = ref(['选中且禁用', '备选项 A'])
-  const cities = ['上海', '北京', '广州', '深圳']
-  const checkAll = ref(false)
-  const isIndeterminate = ref(true)
-  const checkedCities = ref(['上海', '北京'])
-  const checkboxGroup1 = ref(['上海'])
-  const handleCheckAllChange = (val: boolean) => {
-    checkedCities.value = val ? cities : []
-    isIndeterminate.value = false
-  }
-  const handleCheckedCitiesChange = (value: string[]) => {
-    const checkedCount = value.length
-    checkAll.value = checkedCount === cities.length
-    isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
-  }
-</script>
-<style>
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .el-link {
-    margin-right: 8px;
-  }
-  .el-link .el-icon--right.el-icon {
-    vertical-align: text-bottom;
-  }
-  .text {
-    font-size: 14px;
-  }
-
-  .item {
-    margin-bottom: 18px;
-  }
-
-  .box-card {
-    width: 100%;
-    margin-bottom: 20px;
-  }
-</style>
diff --git a/src/views/components-demo/split-pane.vue b/src/views/components-demo/split-pane.vue
deleted file mode 100644
index b8799d8..0000000
--- a/src/views/components-demo/split-pane.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <div class="components-container">
-    <!--    <aside><strong>SplitPane</strong> If you've used-->
-    <!--      <a href="https://codepen.io/" target="_blank"> codepen</a>,-->
-    <!--      <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.-->
-    <!--      <a href="https://github.com/PanJiaChen/vue-split-pane" target="_blank"> Github repository</a>-->
-    <!--    </aside>-->
-    <!--    <split-pane split="vertical">-->
-    <!--      <template slot="paneL">-->
-    <!--        <div class="left-container" />-->
-    <!--      </template>-->
-    <!--      <template slot="paneR">-->
-    <!--        <split-pane split="horizontal">-->
-    <!--          <template slot="paneL">-->
-    <!--            <div class="top-container" />-->
-    <!--          </template>-->
-    <!--          <template slot="paneR">-->
-    <!--            <div class="bottom-container" />-->
-    <!--          </template>-->
-    <!--        </split-pane>-->
-    <!--      </template>-->
-    <!--    </split-pane>-->
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import SplitPane from 'vue-splitpane'
-
-  // export default {
-  //   name: 'SplitpaneDemo',
-  //   components: { splitPane },
-  //   methods: {
-  //     resize() {
-  //       console.log('resize')
-  //     }
-  //   }
-  // }
-</script>
-
-<style scoped>
-  .components-container {
-    position: relative;
-    height: 100vh;
-  }
-
-  .left-container {
-    background-color: #f38181;
-    height: 100%;
-  }
-
-  .right-container {
-    background-color: #fce38a;
-    height: 200px;
-  }
-
-  .top-container {
-    background-color: #fce38a;
-    width: 100%;
-    height: 100%;
-  }
-
-  .bottom-container {
-    width: 100%;
-    background-color: #95e1d3;
-    height: 100%;
-  }
-</style>
diff --git a/src/views/components-demo/timepicker.vue b/src/views/components-demo/timepicker.vue
deleted file mode 100644
index 075ad0d..0000000
--- a/src/views/components-demo/timepicker.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <u-container-layout>
-    <div>
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>任意时间点 </span>
-          </div>
-        </template>
-        <div>
-          <el-time-picker v-model="value4" placeholder="选择时间" />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>限制时间选择范围 </span>
-          </div>
-        </template>
-        <div>
-          <el-time-picker
-            v-model="value1"
-            :disabled-hours="disabledHours"
-            :disabled-minutes="disabledMinutes"
-            :disabled-seconds="disabledSeconds"
-            placeholder="选择时间"
-          />
-        </div>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <div class="card-header">
-            <span>任意时间范围 </span>
-          </div>
-        </template>
-        <div>
-          <el-time-picker
-            v-model="value3"
-            is-range
-            range-separator="-"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-          />
-        </div>
-      </el-card>
-    </div>
-  </u-container-layout>
-</template>
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  const value4 = ref()
-  const value1 = ref(new Date(2016, 9, 10, 18, 30))
-  const value3 = ref([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)])
-  const value2 = ref([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)])
-  const makeRange = (start: number, end: number) => {
-    const result: number[] = []
-    for (let i = start; i <= end; i++) {
-      result.push(i)
-    }
-    return result
-  }
-  const disabledHours = () => {
-    return makeRange(0, 16).concat(makeRange(19, 23))
-  }
-  const disabledMinutes = (hour: number) => {
-    if (hour === 17) {
-      return makeRange(0, 29)
-    }
-    if (hour === 18) {
-      return makeRange(31, 59)
-    }
-  }
-  const disabledSeconds = (hour: number, minute: number) => {
-    if (hour === 18 && minute === 30) {
-      return makeRange(1, 59)
-    }
-  }
-</script>
-<style>
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .el-link {
-    margin-right: 8px;
-  }
-  .el-link .el-icon--right.el-icon {
-    vertical-align: text-bottom;
-  }
-  .text {
-    font-size: 14px;
-  }
-
-  .item {
-    margin-bottom: 18px;
-  }
-
-  .box-card {
-    width: 100%;
-    margin-bottom: 20px;
-  }
-</style>
diff --git a/src/views/components-demo/watermark.vue b/src/views/components-demo/watermark.vue
deleted file mode 100644
index e69de29..0000000