feat(views): 更新页面组件和视图

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

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

提升页面展示效果和用户交互

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>
+</style>

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>
+</style>

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>
+</style>

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">