From 6ff682798a5d78abf76f5e565061fe9ad49bc64e Mon Sep 17 00:00:00 2001
From: chansee97 <chen.dev@foxmail.com>
Date: Sun, 31 Mar 2024 20:07:35 +0800
Subject: [PATCH] style(workbench): perfect style

---
 src/components/common/ErrorTip.vue            |   2 +-
 src/views/about/index.vue                     |  14 +-
 .../dashboard/workbench/components/chart.vue  | 114 +++++++
 src/views/dashboard/workbench/index.vue       | 288 +++++++-----------
 src/views/login/components/Login/index.vue    |  13 -
 5 files changed, 235 insertions(+), 196 deletions(-)
 create mode 100644 src/views/dashboard/workbench/components/chart.vue

diff --git a/src/components/common/ErrorTip.vue b/src/components/common/ErrorTip.vue
index d3a24d9..7d5656e 100644
--- a/src/components/common/ErrorTip.vue
+++ b/src/components/common/ErrorTip.vue
@@ -7,7 +7,7 @@ const router = useRouter()
 </script>
 
 <template>
-  <div class="flex-col-center">
+  <div class="flex-col-center h-full">
     <img
       v-if="type === '403'"
       src="@/assets/svg/error-403.svg"
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
index a7165b9..28efd7e 100644
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@@ -5,8 +5,7 @@ import lib from '@/../package.json'
 <template>
   <n-space vertical>
     <n-card title="关于">
-      Nova-admin是一款基于Vue3+vite+TypeScript+Navie
-      UI的后台管理模板，力求使用简约的代码实现完备功能，降低学习门槛和维护成本，让大家能早点下班做自己的事情
+      Nova-admin是一款基于Vue3+vite+TypeScript+NavieUI的后台管理模板，力求使用简约的代码实现完备功能，降低学习门槛和维护成本，让大家能早点下班做自己的事情
     </n-card>
     <n-card title="信息">
       <n-descriptions
@@ -25,6 +24,17 @@ import lib from '@/../package.json'
             Github
           </n-button>
         </n-descriptions-item>
+        <n-descriptions-item label="Github">
+          <n-button
+            text
+            tag="a"
+            href="https://gitee.com/chansee97/nova-admin"
+            target="_blank"
+            type="primary"
+          >
+            Gitee
+          </n-button>
+        </n-descriptions-item>
         <n-descriptions-item label="预览地址">
           <n-button
             text
diff --git a/src/views/dashboard/workbench/components/chart.vue b/src/views/dashboard/workbench/components/chart.vue
new file mode 100644
index 0000000..ddb6f4c
--- /dev/null
+++ b/src/views/dashboard/workbench/components/chart.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { type ECOption, useEcharts } from '@/hooks'
+// 折线图
+const lineOptions = ref<ECOption>({
+  tooltip: {
+    trigger: 'axis',
+  },
+  grid: {
+    left: '2%',
+    right: '2%',
+    bottom: '0%',
+    top: '0%',
+    containLabel: true,
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      show: false,
+    },
+
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      show: false,
+    },
+  },
+  series: [
+    {
+      color: '#37a2da',
+      name: 'Email',
+      type: 'line',
+      smooth: true,
+      stack: 'Total',
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0.25,
+              color: '#37a2da',
+            },
+            {
+              offset: 1,
+              color: '#fff',
+            },
+          ],
+        },
+      },
+      emphasis: {
+        focus: 'series',
+      },
+      data: [120, 132, 101, 134, 90, 230, 210],
+    },
+    {
+      color: '#9fe6b8',
+      name: 'Union Ads',
+      type: 'line',
+      smooth: true,
+      stack: 'Total',
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0.25,
+              color: '#9fe6b8',
+            },
+            {
+              offset: 1,
+              color: '#fff',
+            },
+          ],
+        },
+      },
+      emphasis: {
+        focus: 'series',
+      },
+      data: [220, 182, 191, 234, 290, 330, 310],
+    },
+  ],
+}) as Ref<ECOption>
+const { domRef: lineRef } = useEcharts(lineOptions)
+</script>
+
+<template>
+  <div
+    ref="lineRef"
+    class="h-400px"
+  />
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/views/dashboard/workbench/index.vue b/src/views/dashboard/workbench/index.vue
index b622bbe..1907d13 100644
--- a/src/views/dashboard/workbench/index.vue
+++ b/src/views/dashboard/workbench/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Chart from './components/chart.vue'
 import { useAuthStore } from '@/store'
 
 const { userInfo } = useAuthStore()
@@ -9,144 +10,89 @@ const { userInfo } = useAuthStore()
     :x-gap="16"
     :y-gap="16"
   >
-    <n-gi :span="24">
-      <n-card>
-        <n-space justify="space-between">
-          <div class="flex-y-center">
-            <n-avatar
-              round
-              :size="64"
-              :src="userInfo?.avatar"
-            />
-            <div class="pl-12px">
-              <h3 class="text-18px font-semibold">
-                您好，{{ userInfo?.nickname }},今天又是充满活力的一天！
-              </h3>
-              <p class="leading-30px text-[#999]">
-                今日多云转晴，20℃ - 25℃！
-              </p>
-            </div>
-          </div>
-          <n-row class="w-450px">
-            <n-col :span="10">
-              <n-statistic
-                label="统计数据"
-                :value="99"
-              >
-                <template #prefix>
-                  <i-icon-park-outline-chart-histogram />
-                </template>
-                <template #suffix>
-                  / 100
-                </template>
-              </n-statistic>
-            </n-col>
-            <n-col :span="10">
-              <n-statistic
-                label="活跃用户"
-                value="34,123"
-              >
-                <template #prefix>
-                  <i-icon-park-outline-customer />
-                </template>
-              </n-statistic>
-            </n-col>
-            <n-col :span="4">
-              <n-statistic
-                label="待办"
-                :value="18"
-              >
-                <template #prefix>
-                  <i-icon-park-outline-list-checkbox />
-                </template>
-              </n-statistic>
-            </n-col>
-          </n-row>
-        </n-space>
-      </n-card>
-    </n-gi>
-    <n-gi :span="17">
+    <n-gi :span="16">
       <n-space
         vertical
         :size="16"
       >
-        <n-card title="项目">
-          <template #header-extra>
-            <n-button
-              type="primary"
-              quaternary
-            >
-              更多
-            </n-button>
-          </template>
+        <n-card style="--n-padding-left: 0;">
+          <Chart />
+        </n-card>
+        <n-card>
           <n-grid
             :x-gap="8"
             :y-gap="8"
           >
-            <n-gi :span="8">
-              <n-card
-                title="卡片"
-                hoverable
-              >
-                卡片内容
-                <template #action>
-                  #action
-                </template>
+            <n-gi :span="6">
+              <n-card>
+                <n-thing>
+                  <template #avatar>
+                    <n-el>
+                      <n-icon-wrapper :size="46" color="var(--success-color)" :border-radius="999">
+                        <e-icon :size="26" icon="icon-park-outline:user" />
+                      </n-icon-wrapper>
+                    </n-el>
+                  </template>
+                  <template #header>
+                    <n-statistic label="活跃用户">
+                      <n-number-animation show-separator :from="0" :to="12039" />
+                    </n-statistic>
+                  </template>
+                </n-thing>
               </n-card>
             </n-gi>
-            <n-gi :span="8">
-              <n-card
-                title="卡片"
-                hoverable
-              >
-                卡片内容
-                <template #action>
-                  #action
-                </template>
+            <n-gi :span="6">
+              <n-card>
+                <n-thing>
+                  <template #avatar>
+                    <n-el>
+                      <n-icon-wrapper :size="46" color="var(--success-color)" :border-radius="999">
+                        <e-icon :size="26" icon="icon-park-outline:every-user" />
+                      </n-icon-wrapper>
+                    </n-el>
+                  </template>
+                  <template #header>
+                    <n-statistic label="用户">
+                      <n-number-animation show-separator :from="0" :to="44039" />
+                    </n-statistic>
+                  </template>
+                </n-thing>
               </n-card>
             </n-gi>
-            <n-gi :span="8">
-              <n-card
-                title="卡片"
-                hoverable
-              >
-                卡片内容
-                <template #action>
-                  #action
-                </template>
+            <n-gi :span="6">
+              <n-card>
+                <n-thing>
+                  <template #avatar>
+                    <n-el>
+                      <n-icon-wrapper :size="46" color="var(--success-color)" :border-radius="999">
+                        <e-icon :size="26" icon="icon-park-outline:preview-open" />
+                      </n-icon-wrapper>
+                    </n-el>
+                  </template>
+                  <template #header>
+                    <n-statistic label="浏览量">
+                      <n-number-animation show-separator :from="0" :to="551039" />
+                    </n-statistic>
+                  </template>
+                </n-thing>
               </n-card>
             </n-gi>
-            <n-gi :span="8">
-              <n-card
-                title="卡片"
-                hoverable
-              >
-                卡片内容
-                <template #action>
-                  #action
-                </template>
-              </n-card>
-            </n-gi>
-            <n-gi :span="8">
-              <n-card
-                title="卡片"
-                hoverable
-              >
-                卡片内容
-                <template #action>
-                  #action
-                </template>
-              </n-card>
-            </n-gi>
-            <n-gi :span="8">
-              <n-card
-                title="卡片"
-                hoverable
-              >
-                卡片内容
-                <template #action>
-                  #action
-                </template>
+            <n-gi :span="6">
+              <n-card>
+                <n-thing>
+                  <template #avatar>
+                    <n-el>
+                      <n-icon-wrapper :size="46" color="var(--success-color)" :border-radius="999">
+                        <e-icon :size="26" icon="icon-park-outline:star" />
+                      </n-icon-wrapper>
+                    </n-el>
+                  </template>
+                  <template #header>
+                    <n-statistic label="收藏数">
+                      <n-number-animation show-separator :from="0" :to="7739" />
+                    </n-statistic>
+                  </template>
+                </n-thing>
               </n-card>
             </n-gi>
           </n-grid>
@@ -221,7 +167,7 @@ const { userInfo } = useAuthStore()
         </n-card>
       </n-space>
     </n-gi>
-    <n-gi :span="7">
+    <n-gi :span="8">
       <n-space
         vertical
         :size="16"
@@ -280,61 +226,43 @@ const { userInfo } = useAuthStore()
             </n-list-item>
           </n-list>
         </n-card>
-        <n-card title="快捷入口">
-          <n-grid
-            :x-gap="8"
-            :y-gap="8"
-          >
-            <n-gi :span="8">
-              <n-card
-                title="卡片"
-                hoverable
-              >
-                卡片内容
-              </n-card>
-            </n-gi>
-            <n-gi :span="8">
-              <n-card
-                title="卡片"
-                hoverable
-              >
-                卡片内容
-              </n-card>
-            </n-gi>
-            <n-gi :span="8">
-              <n-card
-                title="卡片"
-                hoverable
-              >
-                卡片内容
-              </n-card>
-            </n-gi>
-            <n-gi :span="8">
-              <n-card
-                title="卡片"
-                hoverable
-              >
-                卡片内容
-              </n-card>
-            </n-gi>
-            <n-gi :span="8">
-              <n-card
-                title="卡片"
-                hoverable
-              >
-                卡片内容
-              </n-card>
-            </n-gi>
-            <n-gi :span="8">
-              <n-card
-                title="卡片"
-                hoverable
-              >
-                卡片内容
-              </n-card>
-            </n-gi>
-          </n-grid>
-        </n-card>
+        <n-grid
+          :x-gap="8"
+          :y-gap="8"
+        >
+          <n-gi :span="12">
+            <n-card>
+              <n-flex vertical align="center">
+                <n-text depth="3">
+                  订单数
+                </n-text>
+                <n-icon-wrapper :size="46" :border-radius="999">
+                  <e-icon :size="26" icon="icon-park-outline:all-application" />
+                </n-icon-wrapper>
+                <n-text strong class="text-2xl">
+                  1,234,123
+                </n-text>
+              </n-flex>
+            </n-card>
+          </n-gi>
+          <n-gi :span="12">
+            <n-card>
+              <n-flex vertical align="center">
+                <n-text depth="3">
+                  待办
+                </n-text>
+                <n-el>
+                  <n-icon-wrapper :size="46" color="var(--warning-color)" :border-radius="999">
+                    <e-icon :size="26" icon="icon-park-outline:list-bottom" />
+                  </n-icon-wrapper>
+                </n-el>
+                <n-text strong class="text-2xl">
+                  78
+                </n-text>
+              </n-flex>
+            </n-card>
+          </n-gi>
+        </n-grid>
         <n-card title="任务进度">
           <n-timeline>
             <n-timeline-item content="啊" />
diff --git a/src/views/login/components/Login/index.vue b/src/views/login/components/Login/index.vue
index 86a7f84..260ee40 100644
--- a/src/views/login/components/Login/index.vue
+++ b/src/views/login/components/Login/index.vue
@@ -21,17 +21,10 @@ const rules = {
     trigger: 'blur',
     message: '请输入密码',
   },
-  code: {
-    required: true,
-    trigger: 'blur',
-    min: 4,
-    message: '最短长度为 4',
-  },
 }
 const formValue = ref({
   account: 'super',
   pwd: '123456',
-  code: '1234',
 })
 const isRemember = ref(false)
 const isLoading = ref(false)
@@ -83,12 +76,6 @@ checkUserAccount()
           </template>
         </n-input>
       </n-form-item>
-      <n-form-item path="code">
-        <n-space align="center">
-          <n-input v-model:value="formValue.code" clearable placeholder="输入验证码" :maxlength="4" />
-          <div>验证码</div>
-        </n-space>
-      </n-form-item>
       <n-space vertical :size="20">
         <div class="flex-y-center justify-between">
           <n-checkbox v-model:checked="isRemember">