From e04a756ff1cc32f6b0c814d9dbc29af2195d37d4 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Sun, 6 Jul 2025 00:59:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(views):=20=E6=9B=B4=E6=96=B0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=BB=84=E4=BB=B6=E5=92=8C=E8=A7=86=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 更新仪表板监控组件
  * 优化图表组件(chart.vue, chart2.vue, chart3.vue)
  * 改进数据可视化展示

- 完善登录页面组件
  * 优化登录表单组件(Login/index.vue)
  * 改进用户登录体验

提升页面展示效果和用户交互
---
 .../dashboard/monitor/components/chart.vue    | 10 +++-
 .../dashboard/monitor/components/chart2.vue   | 10 +++-
 .../dashboard/monitor/components/chart3.vue   | 10 +++-
 src/views/login/components/Login/index.vue    | 58 ++++++++++++++++++-
 4 files changed, 76 insertions(+), 12 deletions(-)

diff --git a/src/views/dashboard/monitor/components/chart.vue b/src/views/dashboard/monitor/components/chart.vue
index 8f68d16..085d70e 100644
--- a/src/views/dashboard/monitor/components/chart.vue
+++ b/src/views/dashboard/monitor/components/chart.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="chart-placeholder h-200px w-full flex-center">
     <div class="text-center">
-      <div class="text-lg font-bold text-gray-400 mb-2">监控图表</div>
-      <div class="text-sm text-gray-500">图表功能已简化</div>
+      <div class="text-lg font-bold text-gray-400 mb-2">
+        监控图表
+      </div>
+      <div class="text-sm text-gray-500">
+        图表功能已简化
+      </div>
     </div>
   </div>
 </template>
@@ -17,4 +21,4 @@
   border-radius: 8px;
   border: 1px solid #e0e0e0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboard/monitor/components/chart2.vue b/src/views/dashboard/monitor/components/chart2.vue
index e1f2209..34c931c 100644
--- a/src/views/dashboard/monitor/components/chart2.vue
+++ b/src/views/dashboard/monitor/components/chart2.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="chart-placeholder h-200px w-full flex-center">
     <div class="text-center">
-      <div class="text-lg font-bold text-gray-400 mb-2">柱状图</div>
-      <div class="text-sm text-gray-500">图表功能已简化</div>
+      <div class="text-lg font-bold text-gray-400 mb-2">
+        柱状图
+      </div>
+      <div class="text-sm text-gray-500">
+        图表功能已简化
+      </div>
     </div>
   </div>
 </template>
@@ -17,4 +21,4 @@
   border-radius: 8px;
   border: 1px solid #e0e0e0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboard/monitor/components/chart3.vue b/src/views/dashboard/monitor/components/chart3.vue
index 8c006c1..db4d302 100644
--- a/src/views/dashboard/monitor/components/chart3.vue
+++ b/src/views/dashboard/monitor/components/chart3.vue
@@ -5,8 +5,12 @@
 <template>
   <div class="chart-placeholder h-200px w-full flex-center">
     <div class="text-center">
-      <div class="text-lg font-bold text-gray-400 mb-2">饼图</div>
-      <div class="text-sm text-gray-500">图表功能已简化</div>
+      <div class="text-lg font-bold text-gray-400 mb-2">
+        饼图
+      </div>
+      <div class="text-sm text-gray-500">
+        图表功能已简化
+      </div>
     </div>
   </div>
 </template>
@@ -17,4 +21,4 @@
   border-radius: 8px;
   border: 1px solid #e0e0e0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/login/components/Login/index.vue b/src/views/login/components/Login/index.vue
index 74da373..a9b21a0 100644
--- a/src/views/login/components/Login/index.vue
+++ b/src/views/login/components/Login/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { FormInst } from 'naive-ui'
 import { useAuthStore } from '@/store'
+import { fetchCaptchaPng } from '@/service'
 import { local } from '@/utils'
 
 const emit = defineEmits(['update:modelValue'])
@@ -24,15 +25,39 @@ const rules = computed(() => {
       trigger: 'blur',
       message: t('login.passwordRuleTip'),
     },
+    securityCode: {
+      required: true,
+      trigger: 'blur',
+      message: '请输入验证码',
+    },
   }
 })
 const formValue = ref({
   account: 'admin',
   pwd: '123456',
+  securityCode: '',
 })
 const isRemember = ref(false)
 const isLoading = ref(false)
 
+// 验证码相关
+const captchaImage = ref('')
+const captchaKey = ref('')
+
+// 获取验证码
+async function getCaptcha() {
+  try {
+    const { isSuccess, data } = await fetchCaptchaPng()
+    if (isSuccess) {
+      captchaImage.value = data.captchaPicture
+      captchaKey.value = data.codeKey
+    }
+  }
+  catch (e) {
+    console.warn('[获取验证码失败]:', e)
+  }
+}
+
 const formRef = ref<FormInst | null>(null)
 function handleLogin() {
   formRef.value?.validate(async (errors) => {
@@ -40,25 +65,28 @@ function handleLogin() {
       return
 
     isLoading.value = true
-    const { account, pwd } = formValue.value
+    const { account, pwd, securityCode } = formValue.value
 
     if (isRemember.value)
       local.set('loginAccount', { account, pwd })
     else local.remove('loginAccount')
 
-    await authStore.login(account, pwd)
+    await authStore.login(account, pwd, captchaKey.value, securityCode, isRemember.value)
     isLoading.value = false
   })
 }
+
 onMounted(() => {
   checkUserAccount()
+  getCaptcha()
 })
+
 function checkUserAccount() {
   const loginAccount = local.get('loginAccount')
   if (!loginAccount)
     return
 
-  formValue.value = loginAccount
+  formValue.value = { ...formValue.value, ...loginAccount }
   isRemember.value = true
 }
 </script>
@@ -82,6 +110,30 @@ function checkUserAccount() {
           </template>
         </n-input>
       </n-form-item>
+      <n-form-item path="securityCode">
+        <div class="flex w-full gap-3">
+          <n-input
+            v-model:value="formValue.securityCode"
+            placeholder="请输入验证码"
+            clearable
+            class="flex-1"
+            maxlength="5"
+          />
+          <div
+            class="w-32 h-12 cursor-pointer rounded border-2 border-gray-300 hover:border-blue-400 flex items-center justify-center overflow-hidden bg-white transition-colors duration-200"
+            title="点击刷新验证码"
+            @click="getCaptcha"
+          >
+            <img
+              v-if="captchaImage"
+              :src="captchaImage"
+              alt="验证码"
+              class="w-full h-full object-contain"
+            >
+            <span v-else class="text-sm text-gray-500">点击获取验证码</span>
+          </div>
+        </div>
+      </n-form-item>
       <n-space vertical :size="20">
         <div class="flex-y-center justify-between">
           <n-checkbox v-model:checked="isRemember">