From 7892c9c600fec51c583a5397c851acdb8ccec387 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sat, 11 Feb 2023 16:14:58 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ReTypeit/index.ts              |   2 +-
 src/views/able/barcode.vue                    |   2 +-
 src/views/able/cascader.vue                   |   2 +-
 src/views/able/debounce.vue                   |   4 +-
 src/views/able/download.vue                   |   2 +-
 src/views/able/execl.vue                      |   2 +-
 src/views/able/icon-select.vue                |   2 +-
 src/views/able/infinite-scroll.vue            |   2 +-
 src/views/able/line-tree.vue                  |   6 +-
 src/views/able/menu-tree.vue                  |   2 +-
 src/views/able/pdf.vue                        |   2 +-
 src/views/able/print.vue                      |   2 +-
 src/views/able/qrcode.vue                     |   2 +-
 src/views/able/swiper.vue                     |   2 +-
 src/views/able/timeline.vue                   |   2 +-
 src/views/able/virtual-list/index.vue         |   2 +-
 src/views/able/watermark.vue                  |   2 +-
 src/views/about/index.vue                     |   6 +-
 src/views/components/button/index.vue         |   2 +-
 src/views/components/contextmenu/index.vue    |   2 +-
 src/views/components/count-to/index.vue       |   2 +-
 src/views/components/cropping/index.vue       |   2 +-
 src/views/components/danmaku/index.vue        |   2 +-
 src/views/components/draggable/index.vue      |   8 +-
 src/views/components/json-editor/index.vue    |   2 +-
 src/views/components/message/index.vue        |   2 +-
 .../components/seamless-scroll/index.vue      |   2 +-
 src/views/components/selector/index.vue       |   7 +-
 src/views/components/split-pane/index.vue     |   2 +-
 src/views/components/typeit/index.vue         |   2 +-
 src/views/components/video/index.vue          |   2 +-
 src/views/editor/index.vue                    |   2 +-
 src/views/flow-chart/index.vue                |   2 +-
 src/views/guide/index.vue                     |   2 +-
 src/views/pure-table/high.vue                 |   2 +-
 src/views/pure-table/index.vue                |   2 +-
 src/views/result/fail.vue                     |   2 +-
 src/views/result/success.vue                  |   2 +-
 src/views/tabs/index.vue                      |   2 +-
 src/views/welcome/components/Bar.vue          |  68 ++++-
 src/views/welcome/components/Github.vue       |   1 -
 src/views/welcome/components/Line.vue         | 160 ++++++++++--
 src/views/welcome/components/Pie.vue          |  28 +--
 src/views/welcome/components/columns.tsx      |  12 +-
 src/views/welcome/index.vue                   | 236 +++++-------------
 45 files changed, 333 insertions(+), 271 deletions(-)

diff --git a/src/components/ReTypeit/index.ts b/src/components/ReTypeit/index.ts
index e8e01ad32..4c34bae62 100644
--- a/src/components/ReTypeit/index.ts
+++ b/src/components/ReTypeit/index.ts
@@ -5,7 +5,7 @@ import TypeIt from "typeit";
 export default defineComponent({
   name: "TypeIt",
   props: {
-    /** 打字速度，以每一步之间的毫秒数为单位 */
+    /** 打字速度，以每一步之间的毫秒数为单位，默认`200` */
     speed: {
       type: Number,
       default: 200
diff --git a/src/views/able/barcode.vue b/src/views/able/barcode.vue
index e7300eb61..86c358000 100644
--- a/src/views/able/barcode.vue
+++ b/src/views/able/barcode.vue
@@ -31,7 +31,7 @@ const barcodes = [
 
 <template>
   <div>
-    <el-card>
+    <el-card shadow="never">
       <template #header>
         <div class="font-medium">
           条形码（基于
diff --git a/src/views/able/cascader.vue b/src/views/able/cascader.vue
index c1fdec467..3c80a603a 100644
--- a/src/views/able/cascader.vue
+++ b/src/views/able/cascader.vue
@@ -24,7 +24,7 @@ const handleChange = value => {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header> 区域级联选择器 </template>
     <el-row :gutter="20">
       <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
diff --git a/src/views/able/debounce.vue b/src/views/able/debounce.vue
index 5df193819..b2b420b4a 100644
--- a/src/views/able/debounce.vue
+++ b/src/views/able/debounce.vue
@@ -17,7 +17,7 @@ const throttleClick = throttle(handle);
 
 <template>
   <div>
-    <el-card class="mb-5">
+    <el-card class="mb-5" shadow="never">
       <template #header>
         <div>防抖：debounce</div>
       </template>
@@ -32,7 +32,7 @@ const throttleClick = throttle(handle);
         连续点击我，只会执行最后一次点击事件，延后执行
       </el-button>
     </el-card>
-    <el-card>
+    <el-card shadow="never">
       <template #header>
         <div>节流：throttle</div>
       </template>
diff --git a/src/views/able/download.vue b/src/views/able/download.vue
index db22b4d72..96f2f2796 100644
--- a/src/views/able/download.vue
+++ b/src/views/able/download.vue
@@ -26,7 +26,7 @@ function down() {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <span class="font-medium">文件下载功能</span>
     </template>
diff --git a/src/views/able/execl.vue b/src/views/able/execl.vue
index 4340a3ab6..ddf710533 100644
--- a/src/views/able/execl.vue
+++ b/src/views/able/execl.vue
@@ -69,7 +69,7 @@ const exportExcel = () => {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="font-medium">
         导出Execl（
diff --git a/src/views/able/icon-select.vue b/src/views/able/icon-select.vue
index 2c921fd93..a00de3455 100644
--- a/src/views/able/icon-select.vue
+++ b/src/views/able/icon-select.vue
@@ -10,7 +10,7 @@ const icon = ref("ep:add-location");
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">图标选择器</span>
diff --git a/src/views/able/infinite-scroll.vue b/src/views/able/infinite-scroll.vue
index e70248313..83e747898 100644
--- a/src/views/able/infinite-scroll.vue
+++ b/src/views/able/infinite-scroll.vue
@@ -32,7 +32,7 @@ const load = () => {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="font-medium">
         表格无限滚动（
diff --git a/src/views/able/line-tree.vue b/src/views/able/line-tree.vue
index 1a3b9c9f5..aa25f07fb 100644
--- a/src/views/able/line-tree.vue
+++ b/src/views/able/line-tree.vue
@@ -22,7 +22,7 @@ const dataProps = {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">
@@ -33,7 +33,7 @@ const dataProps = {
 
     <el-row :gutter="24">
       <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-[20px]">
-        <el-card>
+        <el-card shadow="never">
           <template #header>
             <div class="card-header">
               <span class="font-medium"> 普通树结构 </span>
@@ -62,7 +62,7 @@ const dataProps = {
       </el-col>
 
       <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
-        <el-card>
+        <el-card shadow="never">
           <template #header>
             <div class="card-header">
               <span class="font-medium"> 虚拟树结构 </span>
diff --git a/src/views/able/menu-tree.vue b/src/views/able/menu-tree.vue
index 36a9a3c97..4dab1347f 100644
--- a/src/views/able/menu-tree.vue
+++ b/src/views/able/menu-tree.vue
@@ -43,7 +43,7 @@ const filterMethod = (query: string, node: treeNode) => {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">
diff --git a/src/views/able/pdf.vue b/src/views/able/pdf.vue
index 0cb75c11d..c9020b4f6 100644
--- a/src/views/able/pdf.vue
+++ b/src/views/able/pdf.vue
@@ -34,7 +34,7 @@ const onPrint = () => {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="font-medium">
         PDF预览（
diff --git a/src/views/able/print.vue b/src/views/able/print.vue
index bad2735e4..4f2a77a18 100644
--- a/src/views/able/print.vue
+++ b/src/views/able/print.vue
@@ -77,7 +77,7 @@ const tableData: User[] = [
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">打印功能（报表、图表、图片）</span>
diff --git a/src/views/able/qrcode.vue b/src/views/able/qrcode.vue
index 9da62435e..7384384bb 100644
--- a/src/views/able/qrcode.vue
+++ b/src/views/able/qrcode.vue
@@ -23,7 +23,7 @@ const disabledClick = () => {
 
 <template>
   <div>
-    <el-card>
+    <el-card shadow="never">
       <template #header>
         <div class="font-medium">
           二维码（基于
diff --git a/src/views/able/swiper.vue b/src/views/able/swiper.vue
index 376a9bca6..5539c96c0 100644
--- a/src/views/able/swiper.vue
+++ b/src/views/able/swiper.vue
@@ -84,7 +84,7 @@ const swiperExample: any[] = [
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="font-medium">
         Swiper插件（
diff --git a/src/views/able/timeline.vue b/src/views/able/timeline.vue
index dc63b366c..b64b8a214 100644
--- a/src/views/able/timeline.vue
+++ b/src/views/able/timeline.vue
@@ -41,7 +41,7 @@ const activities = [
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">时间线</span>
diff --git a/src/views/able/virtual-list/index.vue b/src/views/able/virtual-list/index.vue
index cfce090be..5b3ff66d3 100644
--- a/src/views/able/virtual-list/index.vue
+++ b/src/views/able/virtual-list/index.vue
@@ -9,7 +9,7 @@ defineOptions({
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="font-medium">
         虚拟列表组件（
diff --git a/src/views/able/watermark.vue b/src/views/able/watermark.vue
index 078dde93f..b88715469 100644
--- a/src/views/able/watermark.vue
+++ b/src/views/able/watermark.vue
@@ -32,7 +32,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
index f1b6a2ca8..e19079751 100644
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@@ -40,7 +40,7 @@ Object.keys(devDependencies).forEach(key => {
       </span>
     </el-card>
 
-    <el-card class="box-card m-4" shadow="hover">
+    <el-card class="box-card m-4" shadow="never">
       <template #header>
         <div class="card-header">
           <span class="font-medium">项目信息</span>
@@ -49,7 +49,7 @@ Object.keys(devDependencies).forEach(key => {
       <PureDescriptions :columns="columns" border :column="3" align="left" />
     </el-card>
 
-    <el-card class="box-card m-4" shadow="hover">
+    <el-card class="box-card m-4" shadow="never">
       <template #header>
         <div class="card-header">
           <span class="font-medium">生产环境依赖</span>
@@ -73,7 +73,7 @@ Object.keys(devDependencies).forEach(key => {
       </el-descriptions>
     </el-card>
 
-    <el-card class="box-card m-4" shadow="hover">
+    <el-card class="box-card m-4" shadow="never">
       <template #header>
         <div class="card-header">
           <span class="font-medium">开发环境依赖</span>
diff --git a/src/views/components/button/index.vue b/src/views/components/button/index.vue
index 298126552..17893137f 100644
--- a/src/views/components/button/index.vue
+++ b/src/views/components/button/index.vue
@@ -11,7 +11,7 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">通过iframe引入按钮页面</span>
diff --git a/src/views/components/contextmenu/index.vue b/src/views/components/contextmenu/index.vue
index 101ff1baa..64dd93b21 100644
--- a/src/views/components/contextmenu/index.vue
+++ b/src/views/components/contextmenu/index.vue
@@ -10,7 +10,7 @@ defineOptions({
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">右键菜单组件</span>
diff --git a/src/views/components/count-to/index.vue b/src/views/components/count-to/index.vue
index 70ae357da..b74885de8 100644
--- a/src/views/components/count-to/index.vue
+++ b/src/views/components/count-to/index.vue
@@ -7,7 +7,7 @@ defineOptions({
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">数字动画组件</span>
diff --git a/src/views/components/cropping/index.vue b/src/views/components/cropping/index.vue
index 7fbbdbe67..12b95a5c9 100644
--- a/src/views/components/cropping/index.vue
+++ b/src/views/components/cropping/index.vue
@@ -26,7 +26,7 @@ const onCropper = (): void => {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">图片裁剪组件</span>
diff --git a/src/views/components/danmaku/index.vue b/src/views/components/danmaku/index.vue
index da16bc0d9..5d024a73a 100644
--- a/src/views/components/danmaku/index.vue
+++ b/src/views/components/danmaku/index.vue
@@ -102,7 +102,7 @@ function addDanmu() {
 }
 </script>
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">
diff --git a/src/views/components/draggable/index.vue b/src/views/components/draggable/index.vue
index 67d40681f..adfee4e1e 100644
--- a/src/views/components/draggable/index.vue
+++ b/src/views/components/draggable/index.vue
@@ -56,7 +56,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">
@@ -76,7 +76,7 @@ onMounted(() => {
       <!-- grid列表拖拽 -->
       <el-row :gutter="25">
         <el-col :xs="25" :sm="8" :md="8" :lg="8">
-          <el-card>
+          <el-card shadow="never">
             <template #header>
               <div class="card-header">
                 <span>grid列表拖拽</span>
@@ -100,7 +100,7 @@ onMounted(() => {
         </el-col>
 
         <el-col :xs="25" :sm="8" :md="8" :lg="8">
-          <el-card>
+          <el-card shadow="never">
             <template #header>
               <div class="card-header">
                 <span>单列拖拽</span>
@@ -123,7 +123,7 @@ onMounted(() => {
         </el-col>
 
         <el-col :xs="25" :sm="8" :md="8" :lg="8">
-          <el-card>
+          <el-card shadow="never">
             <template #header>
               <div class="card-header">
                 <span>拖拽实现元素位置交换</span>
diff --git a/src/views/components/json-editor/index.vue b/src/views/components/json-editor/index.vue
index 61a9f1119..599d1fba4 100644
--- a/src/views/components/json-editor/index.vue
+++ b/src/views/components/json-editor/index.vue
@@ -72,7 +72,7 @@ watch(
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">
diff --git a/src/views/components/message/index.vue b/src/views/components/message/index.vue
index bc3e37271..58f6c364b 100644
--- a/src/views/components/message/index.vue
+++ b/src/views/components/message/index.vue
@@ -11,7 +11,7 @@ defineOptions({
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium"> Message提示 </span>
diff --git a/src/views/components/seamless-scroll/index.vue b/src/views/components/seamless-scroll/index.vue
index 89a7d16e6..9fd588116 100644
--- a/src/views/components/seamless-scroll/index.vue
+++ b/src/views/components/seamless-scroll/index.vue
@@ -50,7 +50,7 @@ function changeDirection(val) {
 
 <template>
   <el-space wrap>
-    <el-card class="box-card">
+    <el-card class="box-card" shadow="never">
       <template #header>
         <div class="card-header">
           <span>无缝滚动示例</span>
diff --git a/src/views/components/selector/index.vue b/src/views/components/selector/index.vue
index 1acfb7b37..623449335 100644
--- a/src/views/components/selector/index.vue
+++ b/src/views/components/selector/index.vue
@@ -27,7 +27,12 @@ const selectedVal = ({ left, right }): void => {
 
 <template>
   <div>
-    <el-card class="box-card" v-for="(item, key) in dataLists" :key="key">
+    <el-card
+      class="box-card"
+      v-for="(item, key) in dataLists"
+      :key="key"
+      shadow="never"
+    >
       <template #header>
         <div class="card-header">
           <span>{{ item.title }}</span>
diff --git a/src/views/components/split-pane/index.vue b/src/views/components/split-pane/index.vue
index 53a88caa3..bf5c2b57e 100644
--- a/src/views/components/split-pane/index.vue
+++ b/src/views/components/split-pane/index.vue
@@ -20,7 +20,7 @@ const settingTB: ContextProps = reactive({
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">切割面板组件</span>
diff --git a/src/views/components/typeit/index.vue b/src/views/components/typeit/index.vue
index 20da6d8fd..c79820755 100644
--- a/src/views/components/typeit/index.vue
+++ b/src/views/components/typeit/index.vue
@@ -7,7 +7,7 @@ defineOptions({
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium"> 打字机组件 </span>
diff --git a/src/views/components/video/index.vue b/src/views/components/video/index.vue
index 485121e09..d5844958c 100644
--- a/src/views/components/video/index.vue
+++ b/src/views/components/video/index.vue
@@ -31,7 +31,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">
diff --git a/src/views/editor/index.vue b/src/views/editor/index.vue
index eb41ca85e..b0d7b5b9a 100644
--- a/src/views/editor/index.vue
+++ b/src/views/editor/index.vue
@@ -39,7 +39,7 @@ const handleCreated = editor => {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">
diff --git a/src/views/flow-chart/index.vue b/src/views/flow-chart/index.vue
index 4d1d8c752..e7aae7770 100644
--- a/src/views/flow-chart/index.vue
+++ b/src/views/flow-chart/index.vue
@@ -65,7 +65,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">
diff --git a/src/views/guide/index.vue b/src/views/guide/index.vue
index 71b72e8a4..ab48e5917 100644
--- a/src/views/guide/index.vue
+++ b/src/views/guide/index.vue
@@ -41,7 +41,7 @@ const guide = () => {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">
diff --git a/src/views/pure-table/high.vue b/src/views/pure-table/high.vue
index db9235de2..44c073014 100644
--- a/src/views/pure-table/high.vue
+++ b/src/views/pure-table/high.vue
@@ -14,7 +14,7 @@ function tabClick({ index }) {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">
diff --git a/src/views/pure-table/index.vue b/src/views/pure-table/index.vue
index 50e66311d..546ef86fe 100644
--- a/src/views/pure-table/index.vue
+++ b/src/views/pure-table/index.vue
@@ -14,7 +14,7 @@ function tabClick({ index }) {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">
diff --git a/src/views/result/fail.vue b/src/views/result/fail.vue
index 88a719a70..25b13ac1e 100644
--- a/src/views/result/fail.vue
+++ b/src/views/result/fail.vue
@@ -8,7 +8,7 @@ const { columns } = useColumns();
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">失败页</span>
diff --git a/src/views/result/success.vue b/src/views/result/success.vue
index 7f4251cdd..8ce8683e8 100644
--- a/src/views/result/success.vue
+++ b/src/views/result/success.vue
@@ -22,7 +22,7 @@ const columns = [
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div class="card-header">
         <span class="font-medium">成功页</span>
diff --git a/src/views/tabs/index.vue b/src/views/tabs/index.vue
index f65a47576..6a0579b33 100644
--- a/src/views/tabs/index.vue
+++ b/src/views/tabs/index.vue
@@ -46,7 +46,7 @@ function onCloseTags() {
 </script>
 
 <template>
-  <el-card>
+  <el-card shadow="never">
     <template #header>
       <div>标签页复用，超出限制自动关闭</div>
     </template>
diff --git a/src/views/welcome/components/Bar.vue b/src/views/welcome/components/Bar.vue
index f87b91704..fc5ff3dbc 100644
--- a/src/views/welcome/components/Bar.vue
+++ b/src/views/welcome/components/Bar.vue
@@ -7,6 +7,7 @@ import {
   useECharts,
   type EchartOptions
 } from "@pureadmin/utils";
+import * as echarts from "echarts/core";
 
 const { isDark } = useDark();
 
@@ -28,11 +29,13 @@ setOptions(
       }
     },
     grid: {
-      containLabel: true,
-      top: "10px",
-      bottom: "0",
-      left: "0",
-      right: "0"
+      bottom: "20px",
+      right: "10px"
+    },
+    legend: {
+      //@ts-expect-error
+      right: true,
+      data: ["watchers", "fork", "star"]
     },
     xAxis: [
       {
@@ -45,7 +48,7 @@ setOptions(
           // width: "70",
           // overflow: "truncate"
         },
-        data: ["open_issues", "forks", "watchers", "star"],
+        data: ["2021", "2022", "2023"],
         triggerEvent: true
       }
     ],
@@ -57,9 +60,58 @@ setOptions(
     ],
     series: [
       {
-        name: "GitHub信息",
+        name: "watchers",
         type: "bar",
-        data: [1000, 10000, 20000, 66666]
+        barWidth: "15%",
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#e6a23c"
+            },
+            {
+              offset: 1,
+              color: "#eebe77"
+            }
+          ])
+        },
+        data: [200, 320, 800]
+      },
+      {
+        name: "fork",
+        type: "bar",
+        barWidth: "15%",
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#f56c6c"
+            },
+            {
+              offset: 1,
+              color: "#f89898"
+            }
+          ])
+        },
+        data: [1600, 2460, 4500]
+      },
+      {
+        name: "star",
+        type: "bar",
+        barWidth: "15%",
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#409EFF"
+            },
+            {
+              offset: 1,
+              color: "#53a7ff"
+            }
+          ])
+        },
+        data: [1450, 3620, 7500]
       }
     ],
     addTooltip: true
diff --git a/src/views/welcome/components/Github.vue b/src/views/welcome/components/Github.vue
index a3af5e9f6..37b67d2b6 100644
--- a/src/views/welcome/components/Github.vue
+++ b/src/views/welcome/components/Github.vue
@@ -24,7 +24,6 @@ const list = [
     :key="index"
     :columns="item.columns"
     :column="item.column"
-    class="margin-top"
     direction="vertical"
     border
   />
diff --git a/src/views/welcome/components/Line.vue b/src/views/welcome/components/Line.vue
index b62d9e887..67f2ea495 100644
--- a/src/views/welcome/components/Line.vue
+++ b/src/views/welcome/components/Line.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useIntervalFn } from "@vueuse/core";
 import { ref, computed, watch, type Ref } from "vue";
 import { useAppStoreHook } from "@/store/modules/app";
 import {
@@ -11,43 +12,129 @@ import {
 const { isDark } = useDark();
 
 const theme: EchartOptions["theme"] = computed(() => {
-  return isDark.value ? "dark" : "light";
+  return isDark.value ? "dark" : "default";
 });
 
 const lineChartRef = ref<HTMLDivElement | null>(null);
-const { setOptions, resize } = useECharts(lineChartRef as Ref<HTMLDivElement>, {
-  theme
-});
+const { setOptions, getInstance, resize } = useECharts(
+  lineChartRef as Ref<HTMLDivElement>,
+  { theme }
+);
+
+const xData = (() => {
+  const data: any[] = [];
+  for (let i = 1; i < 31; i++) {
+    data.push(`${i}日`);
+  }
+  return data;
+})();
 
 setOptions(
   {
     tooltip: {
-      trigger: "item"
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
     },
     grid: {
-      containLabel: true,
-      top: "10px",
-      bottom: "0",
-      left: "0",
-      right: "0"
+      bottom: "20px",
+      right: "10px"
     },
-    xAxis: {
-      type: "category",
-      axisLabel: {
-        interval: 0
-      },
-      data: ["open_issues", "forks", "watchers", "star"],
-      triggerEvent: true
-    },
-    yAxis: {
-      type: "value",
-      triggerEvent: true
+    legend: {
+      //@ts-expect-error
+      right: true,
+      data: ["fork", "star"]
     },
+    calculable: true,
+    xAxis: [
+      {
+        triggerEvent: true,
+        type: "category",
+        splitLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        data: xData
+      }
+    ],
+    yAxis: [
+      {
+        triggerEvent: true,
+        type: "value",
+        splitLine: {
+          show: false
+        },
+        axisLine: {
+          show: true
+        }
+      }
+    ],
+    dataZoom: [
+      {
+        type: "slider",
+        show: false,
+        realtime: true,
+        startValue: 0,
+        endValue: 24
+      }
+    ],
     series: [
       {
-        data: [1000, 10000, 20000, 66666],
+        name: "fork",
         type: "line",
-        areaStyle: {}
+        symbolSize: 10,
+        symbol: "circle",
+        color: "#f56c6c",
+        markPoint: {
+          label: {
+            color: "#fff"
+          },
+          data: [
+            {
+              type: "max",
+              name: "最大值"
+            },
+            {
+              type: "min",
+              name: "最小值"
+            }
+          ]
+        },
+        data: [
+          509, 917, 2455, 2610, 2719, 3033, 3044, 3085, 2708, 2809, 2117, 2000,
+          1455, 1210, 719, 733, 944, 2285, 2208, 3372, 3936, 3693, 2962, 2810,
+          3519, 2455, 2610, 2719, 2484, 2078
+        ]
+      },
+      {
+        name: "star",
+        type: "line",
+        symbolSize: 10,
+        symbol: "circle",
+        color: "#53a7ff",
+        markPoint: {
+          label: {
+            color: "#fff"
+          },
+          data: [
+            {
+              type: "max",
+              name: "最大值"
+            },
+            {
+              type: "min",
+              name: "最小值"
+            }
+          ]
+        },
+        data: [
+          2136, 3693, 2962, 3810, 3519, 3484, 3915, 3823, 3455, 4310, 4019,
+          3433, 3544, 3885, 4208, 3372, 3484, 3915, 3748, 3675, 4009, 4433,
+          3544, 3285, 4208, 3372, 3484, 3915, 3823, 4265, 4298
+        ]
       }
     ],
     addTooltip: true
@@ -57,9 +144,36 @@ setOptions(
     callback: params => {
       console.log("click", params);
     }
+  },
+  {
+    name: "contextmenu",
+    callback: params => {
+      console.log("contextmenu", params);
+    }
+  },
+  // 点击空白处
+  {
+    type: "zrender",
+    name: "click",
+    callback: params => {
+      console.log("点击空白处", params);
+    }
   }
 );
 
+let a = 1;
+useIntervalFn(() => {
+  if (a == xData.length - 24) {
+    a = 0;
+  }
+  getInstance()!.dispatchAction({
+    type: "dataZoom",
+    startValue: a,
+    endValue: a + 24
+  });
+  a++;
+}, 2000);
+
 watch(
   () => useAppStoreHook().getSidebarStatus,
   () => {
diff --git a/src/views/welcome/components/Pie.vue b/src/views/welcome/components/Pie.vue
index 9ec9b3237..4b1ac85f3 100644
--- a/src/views/welcome/components/Pie.vue
+++ b/src/views/welcome/components/Pie.vue
@@ -25,8 +25,8 @@ setOptions(
       trigger: "item"
     },
     legend: {
-      orient: "vertical",
-      // @ts-expect-error
+      icon: "circle",
+      //@ts-expect-error
       right: true
     },
     series: [
@@ -36,19 +36,19 @@ setOptions(
         top: "20%",
         radius: "80%",
         center: ["40%", "50%"],
+        color: ["#e6a23c", "#f56c6c", "#53a7ff"],
         data: [
-          { value: 20000, name: "watchers" },
-          { value: 66666, name: "star" },
-          { value: 10000, name: "forks" },
-          { value: 1000, name: "open_issues" }
-        ],
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: "rgba(0, 0, 0, 0.5)"
-          }
-        }
+          { value: 400, name: "watchers" },
+          { value: 1600, name: "forks" },
+          { value: 7200, name: "star" }
+        ]
+        // emphasis: {
+        //   itemStyle: {
+        //     shadowBlur: 10,
+        //     shadowOffsetX: 0,
+        //     shadowColor: "rgba(0, 0, 0, 0.5)"
+        //   }
+        // }
       }
     ]
   },
diff --git a/src/views/welcome/components/columns.tsx b/src/views/welcome/components/columns.tsx
index 862222451..3d1586ac0 100644
--- a/src/views/welcome/components/columns.tsx
+++ b/src/views/welcome/components/columns.tsx
@@ -25,7 +25,7 @@ export function useColumns() {
           用户名
         </div>
       ),
-      value: "xiaoxian"
+      value: "乐于分享的程序员小铭"
     },
     {
       labelRenderer: () => (
@@ -47,7 +47,7 @@ export function useColumns() {
           居住地
         </div>
       ),
-      value: "杭州"
+      value: "中国"
     }
   ];
 
@@ -80,7 +80,7 @@ export function useColumns() {
           联系地址
         </div>
       ),
-      value: "杭州市西湖区"
+      value: "中华人民共和国"
     }
   ];
 
@@ -91,15 +91,15 @@ export function useColumns() {
           <el-icon>
             <iconify-icon-offline icon={Notebook} />
           </el-icon>
-          好好学习，天天向上
+          个性签名
         </div>
       ),
       cellRenderer: () => (
         <TypeIt
           className={"github"}
-          values={["Coding as art. Keep open source. Enjoy open source."]}
+          values={["办法总比困难多"]}
           cursor={false}
-          speed={40}
+          speed={100}
         />
       )
     }
diff --git a/src/views/welcome/index.vue b/src/views/welcome/index.vue
index db440ff5c..f5f58e982 100644
--- a/src/views/welcome/index.vue
+++ b/src/views/welcome/index.vue
@@ -2,41 +2,20 @@
 import dayjs from "dayjs";
 import axios from "axios";
 import MdEditor from "md-editor-v3";
-import VueDanmaku from "vue3-danmaku";
 import Bar from "./components/Bar.vue";
 import Pie from "./components/Pie.vue";
 import Line from "./components/Line.vue";
 import TypeIt from "@/components/ReTypeit";
+import { ref, computed, markRaw } from "vue";
 import Github from "./components/Github.vue";
-import { openLink, randomColor } from "@pureadmin/utils";
+import { randomColor } from "@pureadmin/utils";
 import { useRenderFlicker } from "@/components/ReFlicker";
-import { ref, computed, markRaw, onMounted, onUnmounted } from "vue";
 
 defineOptions({
   name: "Welcome"
 });
 
-const danmus = [
-  "太好用了吧",
-  "so easy",
-  "效率大大提高呀",
-  "还有精简版，还分国际化和非国际化，Perfect 😘",
-  "好多组件呀，爱啦爱啦 ❤️",
-  "精简版开发体验也太赞了吧 🙀",
-  "pure-admin-table 真方便呀",
-  "哇塞，pure-admin-utils 好多常用、易用的工具呀",
-  "我要 star 这个项目，爱啦爱啦",
-  "免费、开源做到这个程度，真不错 👍",
-  "文档简单易懂，上手真快",
-  "呀！还有免费的教学视频呢，我要去学习一下咯",
-  "稳定、可靠，未来可期呀，加油！",
-  "太卷了，太卷了，慢点让我跟上 😄"
-];
-
-let timer = 0;
 const list = ref();
-const danmaku = ref();
-const date: Date = new Date();
 const loading = ref<boolean>(true);
 const titleClass = computed(() => {
   return ["text-base", "font-medium"];
@@ -46,23 +25,6 @@ setTimeout(() => {
   loading.value = !loading.value;
 }, 800);
 
-const greetings = computed(() => {
-  if (date.getHours() >= 0 && date.getHours() < 12) {
-    return "上午阳光明媚，祝你薪水翻倍🌞！";
-  } else if (date.getHours() >= 12 && date.getHours() < 18) {
-    return "下午小风娇好，愿你青春不老😃！";
-  } else {
-    return "折一根天使羽毛，愿拂去您的疲惫烦恼忧伤🌛！";
-  }
-});
-
-function resizeHandler() {
-  if (timer) clearTimeout(timer);
-  timer = window.setTimeout(() => {
-    danmaku.value.resize();
-  }, 500);
-}
-
 axios
   .get("https://api.github.com/repos/pure-admin/vue-pure-admin/releases")
   .then(res => {
@@ -78,42 +40,18 @@ axios
       };
     });
   });
-
-onMounted(() => {
-  window.onresize = () => resizeHandler();
-});
-
-onUnmounted(() => {
-  window.onresize = null;
-});
 </script>
 
 <template>
-  <div class="welcome">
-    <el-card class="top-content dark:border-none">
-      <div class="left-mark select-none">
-        <img
-          src="https://avatars.githubusercontent.com/u/44761321?v=4"
-          title="直达仓库地址"
-          @click="openLink('https://github.com/pure-admin/vue-pure-admin')"
-        />
-        <TypeIt
-          :className="'type-it0'"
-          :values="[greetings]"
-          :cursor="false"
-          :speed="60"
-        />
-      </div>
-    </el-card>
-
-    <el-row :gutter="24" style="margin: 20px">
+  <div>
+    <el-row :gutter="24">
       <el-col
         :xs="24"
         :sm="24"
         :md="12"
         :lg="12"
         :xl="12"
-        style="margin-bottom: 20px"
+        class="mb-[18px]"
         v-motion
         :initial="{
           opacity: 0,
@@ -127,66 +65,7 @@ onUnmounted(() => {
           }
         }"
       >
-        <el-card style="height: 410px">
-          <template #header>
-            <a
-              :class="titleClass"
-              href="https://github.com/xiaoxian521"
-              target="_black"
-            >
-              <TypeIt
-                :className="'type-it1'"
-                :values="['GitHub信息']"
-                :cursor="false"
-                :speed="120"
-              />
-            </a>
-          </template>
-          <el-skeleton animated :rows="7" :loading="loading">
-            <template #default>
-              <Github />
-              <vue-danmaku
-                ref="danmaku"
-                loop
-                useSlot
-                isSuspend
-                randomChannel
-                :debounce="1200"
-                :danmus="danmus"
-                style="width: 100%; height: 80px"
-              >
-                <template v-slot:dm="{ danmu }">
-                  <p :style="{ color: randomColor({ type: 'hex' }) as string }">
-                    {{ danmu }}
-                  </p>
-                </template>
-              </vue-danmaku>
-            </template>
-          </el-skeleton>
-        </el-card>
-      </el-col>
-
-      <el-col
-        :xs="24"
-        :sm="24"
-        :md="12"
-        :lg="12"
-        :xl="12"
-        style="margin-bottom: 20px"
-        v-motion
-        :initial="{
-          opacity: 0,
-          y: 100
-        }"
-        :enter="{
-          opacity: 1,
-          y: 0,
-          transition: {
-            delay: 200
-          }
-        }"
-      >
-        <el-card style="height: 410px">
+        <el-card shadow="never" style="height: 347px">
           <template #header>
             <a
               :class="titleClass"
@@ -225,9 +104,9 @@ onUnmounted(() => {
         :xs="24"
         :sm="24"
         :md="12"
-        :lg="8"
-        :xl="8"
-        style="margin-bottom: 20px"
+        :lg="12"
+        :xl="12"
+        class="mb-[18px]"
         v-motion
         :initial="{
           opacity: 0,
@@ -237,20 +116,20 @@ onUnmounted(() => {
           opacity: 1,
           y: 0,
           transition: {
-            delay: 400
+            delay: 200
           }
         }"
       >
-        <el-card>
+        <el-card shadow="never" style="height: 347px">
           <template #header>
             <a
               :class="titleClass"
-              href="https://github.com/pure-admin/vue-pure-admin"
+              href="https://github.com/xiaoxian521"
               target="_black"
             >
               <TypeIt
-                :className="'type-it3'"
-                :values="['GitHub饼图信息']"
+                :className="'type-it1'"
+                :values="['GitHub信息']"
                 :cursor="false"
                 :speed="120"
               />
@@ -258,7 +137,7 @@ onUnmounted(() => {
           </template>
           <el-skeleton animated :rows="7" :loading="loading">
             <template #default>
-              <Pie />
+              <Github />
             </template>
           </el-skeleton>
         </el-card>
@@ -270,7 +149,7 @@ onUnmounted(() => {
         :md="12"
         :lg="8"
         :xl="8"
-        style="margin-bottom: 20px"
+        class="mb-[18px]"
         v-motion
         :initial="{
           opacity: 0,
@@ -284,7 +163,7 @@ onUnmounted(() => {
           }
         }"
       >
-        <el-card>
+        <el-card shadow="never">
           <template #header>
             <a
               :class="titleClass"
@@ -310,10 +189,10 @@ onUnmounted(() => {
       <el-col
         :xs="24"
         :sm="24"
-        :md="24"
+        :md="12"
         :lg="8"
         :xl="8"
-        style="margin-bottom: 20px"
+        class="mb-[18px]"
         v-motion
         :initial="{
           opacity: 0,
@@ -327,7 +206,50 @@ onUnmounted(() => {
           }
         }"
       >
-        <el-card>
+        <el-card shadow="never">
+          <template #header>
+            <a
+              :class="titleClass"
+              href="https://github.com/pure-admin/vue-pure-admin"
+              target="_black"
+            >
+              <TypeIt
+                :className="'type-it3'"
+                :values="['GitHub饼图信息']"
+                :cursor="false"
+                :speed="120"
+              />
+            </a>
+          </template>
+          <el-skeleton animated :rows="7" :loading="loading">
+            <template #default>
+              <Pie />
+            </template>
+          </el-skeleton>
+        </el-card>
+      </el-col>
+
+      <el-col
+        :xs="24"
+        :sm="24"
+        :md="24"
+        :lg="8"
+        :xl="8"
+        class="mb-[18px]"
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 400
+          }
+        }"
+      >
+        <el-card shadow="never">
           <template #header>
             <a
               :class="titleClass"
@@ -359,36 +281,6 @@ onUnmounted(() => {
 }
 
 .main-content {
-  margin: 0 !important;
-}
-
-.welcome {
-  height: 100%;
-
-  .top-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 60px;
-    background: var(--el-bg-color);
-
-    .left-mark {
-      display: flex;
-      align-items: center;
-
-      img {
-        display: block;
-        width: 50px;
-        height: 50px;
-        border-radius: 50%;
-        margin-right: 10px;
-        cursor: pointer;
-      }
-
-      span {
-        font-size: 14px;
-      }
-    }
-  }
+  margin: 20px 20px 0 20px !important;
 }
 </style>