cleaning - 前端基础样式调整v1.0 (#2)

## 描述

将 `cleaning` 开发分支合并到 `master`。

主要改动包括：
- 基础前端页面调整为初版设计

`cleaning` 分支中包含了多个开发过程的提交，本次合并计划 **使用 Squash 合并为一次提交**，以保持 `master` 分支历史清晰。

## 类型

- [ ] Bug 修复（非破坏性修改）
- [x] 新功能（非破坏性新增功能）
- [ ] 破坏性修改（修改会影响现有功能）
- [ ] 需要更新文档
- [x] 除非引入新的测试示例，否则不修改 `pnpm-lock.yaml`

Reviewed-on: http://124.221.55.225:3000/XW-AIOT/aiot-platform-ui/pulls/2

packages/effects/layouts/src/authentication/icons/login-illustration.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'LoginIllustration',
+});
+
+defineProps<{
+  alt?: string;
+}>();
+</script>
+
+<template>
+  <div class="login-illustration-container">
+    <img
+      src="/login-illustration.svg"
+      :alt="alt || 'Login Illustration'"
+      class="animate-float w-full opacity-40"
+      style="max-width: none; height: auto"
+    />
+  </div>
+</template>
+
+<style scoped>
+@keyframes float-smooth {
+  0%,
+  100% {
+    transform: scale(1.2) translateY(0);
+  }
+
+  50% {
+    transform: scale(1.2) translateY(-15px);
+  }
+}
+
+.login-illustration-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.login-illustration-container img {
+  min-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  transform: scale(1.2);
+}
+
+/* 覆盖 Tailwind 的 animate-float，使用更快速流畅的动画 */
+.login-illustration-container img.animate-float {
+  animation: float-smooth 3s ease-in-out 0ms infinite;
+}
+</style>

packages/effects/layouts/src/authentication/index.ts

@@ -1,2 +1,3 @@
 export { default as AuthPageLayout } from './authentication.vue';
+export { default as LoginIllustration } from './icons/login-illustration.vue';
 export * from './types';

packages/effects/layouts/src/authentication/toolbar.vue

@@ -6,7 +6,6 @@ import { computed } from 'vue';
 import { preferences } from '@vben/preferences';
 
 import {
-  AuthenticationColorToggle,
   AuthenticationLayoutToggle,
   LanguageToggle,
   ThemeToggle,
@@ -24,7 +23,7 @@ const props = withDefaults(defineProps<Props>(), {
   toolbarList: () => ['color', 'language', 'layout', 'theme'],
 });
 
-const showColor = computed(() => props.toolbarList.includes('color'));
+// const showColor = computed(() => props.toolbarList.includes('color'));
 const showLayout = computed(() => props.toolbarList.includes('layout'));
 const showLanguage = computed(() => props.toolbarList.includes('language'));
 const showTheme = computed(() => props.toolbarList.includes('theme'));
@@ -39,7 +38,7 @@ const showTheme = computed(() => props.toolbarList.includes('theme'));
   >
     <!-- Only show on medium and larger screens -->
     <div class="hidden md:flex">
-      <AuthenticationColorToggle v-if="showColor" />
+      <!-- <AuthenticationColorToggle v-if="showColor" /> -->
       <AuthenticationLayoutToggle v-if="showLayout" />
     </div>
     <!-- Always show Language and Theme toggles -->

packages/effects/layouts/src/basic/header/header.vue

@@ -8,13 +8,7 @@ import { useAccessStore } from '@vben/stores';
 
 import { VbenFullScreen, VbenIconButton } from '@vben-core/shadcn-ui';
 
-import {
-  GlobalSearch,
-  LanguageToggle,
-  PreferencesButton,
-  ThemeToggle,
-  TimezoneButton,
-} from '../../widgets';
+import { GlobalSearch, LanguageToggle, TimezoneButton } from '../../widgets';
 
 interface Props {
   /**
@@ -158,15 +152,15 @@ function clearPreferencesAndLogout() {
           />
         </template>
 
-        <template v-else-if="slot.name === 'preferences'">
+        <!-- <template v-else-if="slot.name === 'preferences'">
           <PreferencesButton
             class="mr-1"
             @clear-preferences-and-logout="clearPreferencesAndLogout"
           />
-        </template>
-        <template v-else-if="slot.name === 'theme-toggle'">
+        </template> -->
+        <!-- <template v-else-if="slot.name === 'theme-toggle'">
           <ThemeToggle class="mr-1 mt-[2px]" />
-        </template>
+        </template> -->
         <template v-else-if="slot.name === 'language-toggle'">
           <LanguageToggle class="mr-1" />
         </template>

packages/effects/layouts/src/widgets/help/help.vue

@@ -3,7 +3,7 @@ import { $t } from '@vben/locales';
 import { openWindow } from '@vben/utils';
 
 import { useVbenModal } from '@vben-core/popup-ui';
-import { Badge, VbenButton, VbenButtonGroup } from '@vben-core/shadcn-ui';
+import { VbenButton, VbenButtonGroup } from '@vben-core/shadcn-ui';
 
 import { useMagicKeys, whenever } from '@vueuse/core';
 
@@ -26,81 +26,61 @@ const [Modal, modalApi] = useVbenModal({
 });
 </script>
 <template>
-  <Modal class="w-1/3" :title="$t('ui.widgets.qa')">
-    <div class="mt-2 flex flex-col">
-      <div class="mt-2 flex flex-col">
-        <VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
-          <p class="w-24 p-2">项目地址:</p>
-          <VbenButton
-            variant="link"
-            @click="
-              openWindow('https://gitee.com/yudaocode/yudao-ui-admin-vben')
-            "
-          >
-            Gitee
-          </VbenButton>
-          <VbenButton
-            variant="link"
-            @click="
-              openWindow('https://github.com/yudaocode/yudao-ui-admin-vben')
-            "
-          >
-            Github
-          </VbenButton>
-        </VbenButtonGroup>
-
-        <VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
-          <p class="w-24 p-2">issues:</p>
-          <VbenButton
-            variant="link"
-            @click="
-              openWindow(
-                'https://gitee.com/yudaocode/yudao-ui-admin-vben/issues',
-              )
-            "
-          >
-            Gitee
-          </VbenButton>
-          <VbenButton
-            variant="link"
-            @click="
-              openWindow(
-                'https://github.com/yudaocode/yudao-ui-admin-vben/issues',
-              )
-            "
-          >
-            Github
-          </VbenButton>
-        </VbenButtonGroup>
-
-        <VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
-          <p class="w-24 p-2">开发文档:</p>
-          <VbenButton
-            variant="link"
-            @click="openWindow('https://doc.iocoder.cn/quick-start/')"
-          >
-            项目文档
-          </VbenButton>
-          <VbenButton variant="link" @click="openWindow('https://antdv.com/')">
-            antdv 文档
-          </VbenButton>
-        </VbenButtonGroup>
+  <Modal class="w-[500px]" :title="$t('ui.widgets.qa')">
+    <div class="mt-2 flex flex-col gap-4">
+      <!-- 使用指南 -->
+      <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
+        <h4 class="mb-2 text-sm font-semibold text-slate-700">使用指南</h4>
+        <ul class="space-y-1 text-xs text-slate-600">
+          <li>• 工作台：查看实时客流监测、工单趋势和待办事项</li>
+          <li>• 任务管理：点击任务可查看详情、标记完成或删除</li>
+          <li>• 数据筛选：使用筛选功能按优先级查看任务</li>
+          <li>• 快捷键：Alt + H 打开帮助，Alt + L 锁定屏幕，Alt + Q 退出登录</li>
+        </ul>
       </div>
 
-      <div class="mt-2 flex justify-start">
-        <p class="w-24 p-2">软件外包:</p>
-        <img
-          src="/wx-xingyu.png"
-          alt="数舵科技"
-          class="cursor-pointer"
-          width="80%"
-          @click="openWindow('https://shuduokeji.com')"
-        />
+      <!-- 常见问题 -->
+      <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
+        <h4 class="mb-2 text-sm font-semibold text-slate-700">常见问题</h4>
+        <div class="space-y-2 text-xs text-slate-600">
+          <div>
+            <p class="font-medium">Q: 如何查看任务详情？</p>
+            <p class="ml-4 text-slate-500">A: 点击任务列表中的任意任务即可查看详情</p>
+          </div>
+          <div>
+            <p class="font-medium">Q: 如何筛选任务？</p>
+            <p class="ml-4 text-slate-500">A: 点击任务列表右上角的"筛选"按钮，选择优先级</p>
+          </div>
+          <div>
+            <p class="font-medium">Q: 图表数据如何刷新？</p>
+            <p class="ml-4 text-slate-500">A: 点击卡片右上角的刷新按钮即可更新数据</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 联系方式 -->
+      <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
+        <h4 class="mb-2 text-sm font-semibold text-slate-700">技术支持</h4>
+        <VbenButtonGroup class="w-full" :gap="2" border size="large">
+          <VbenButton
+            variant="outline"
+            class="flex-1"
+            @click="modalApi.close()"
+          >
+            AI咨询
+          </VbenButton>
+          <VbenButton
+            variant="outline"
+            class="flex-1"
+            @click="modalApi.close()"
+          >
+            联系客服
+          </VbenButton>
+        </VbenButtonGroup>
+        <p class="mt-2 text-center text-xs text-slate-500">
+          如有问题，请联系系统管理员或技术支持团队
+        </p>
       </div>
-      <p class="mt-2 flex justify-center pt-4 text-sm italic">
-        本项目采用 <Badge class="mx-2" variant="destructive">MIT</Badge>
-        开源协议，个人与企业可100% 免费使用
-      </p>
     </div>
   </Modal>
 </template>