refactor: 批量优化前端页面样式与组件交互

1. 统一调整表单组件label-width为100px，移除分页默认内边距
2. 新增表格按钮悬浮动效，优化弹窗抽屉样式与交互
3. 重构仪表盘页面，迁移旧演示组件到首页
4. 调整日志详情项排序与表单重置逻辑
5. 优化缓存监控图表样式与布局

frontend/web/src/components/forms/fa-button-table/index.vue

@@ -2,7 +2,7 @@
 <template>
   <div
     :class="[
-      'inline-flex items-center justify-center min-w-8 h-8 px-2.5 mr-2.5 text-sm c-p rounded-md align-middle',
+      'inline-flex items-center justify-center min-w-8 h-8 px-2.5 mr-2.5 text-sm c-p rounded-md align-middle transition-all duration-200 hover-btn',
       buttonClass,
     ]"
     :style="{ backgroundColor: buttonBgColor, color: iconColor }"

frontend/web/src/components/modal/fa-dialog/index.vue

@@ -18,22 +18,18 @@
         <span :id="titleId" :class="titleClass">{{ title }}</span>
         <div class="core-overlay-dialog__actions">
           <ElTooltip :content="fullscreen ? '还原' : '全屏'" placement="top">
-            <ElButton
+            <FaIconButton
               class="core-overlay-icon-btn"
-              text
-              type="primary"
+              :icon="fullscreen ? 'ri:fullscreen-exit-line' : 'ri:fullscreen-fill'"
               @click="fullscreen = !fullscreen"
-            >
-              <ElIcon>
-                <Fold v-if="fullscreen" />
-                <FullScreen v-else />
-              </ElIcon>
-            </ElButton>
+            />
           </ElTooltip>
           <ElTooltip content="关闭" placement="top">
-            <ElButton class="core-overlay-icon-btn" text @click="close">
-              <ElIcon><Close /></ElIcon>
-            </ElButton>
+            <FaIconButton
+              class="core-overlay-icon-btn"
+              icon="ri:close-line"
+              @click="close"
+            />
           </ElTooltip>
         </div>
       </div>
@@ -44,7 +40,7 @@
     </template>
     <template v-else-if="formMode" #footer>
       <div class="fa-dialog-footer" :style="'padding-right: var(--el-dialog-padding-primary)'">
-        <ElButton v-if="formMode !== 'detail'" @click="emit('cancel')">
+        <ElButton v-if="formMode !== 'detail'" type="primary" plain @click="emit('cancel')">
           {{ cancelText }}
         </ElButton>
         <ElButton type="primary" :loading="confirmLoading" @click="emit('confirm')">
@@ -56,9 +52,9 @@
 </template>
 
 <script setup lang="ts">
-import { Close, Fold, FullScreen } from "@element-plus/icons-vue";
 import type { DialogProps } from "element-plus";
 import { computed, ref, useAttrs, watch } from "vue";
+import FaIconButton from "@/components/widget/fa-icon-button/index.vue";
 
 defineOptions({ name: "FaDialog", inheritAttrs: false });
 
@@ -140,7 +136,15 @@ const dialogAttrs = computed(() => {
   display: flex;
   gap: 8px;
   justify-content: flex-end;
-  padding-top: 4px;
+
+  :deep(.el-button) {
+    transition: all 0.2s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+  }
 }
 
 .core-overlay-dialog__actions {
@@ -150,13 +154,13 @@ const dialogAttrs = computed(() => {
   align-items: center;
   margin-left: auto;
 
-  :deep(.core-overlay-icon-btn.el-button) {
+  :deep(.core-overlay-icon-btn) {
     min-width: 32px;
     padding: 6px;
     border-radius: var(--el-border-radius-base);
 
-    &.is-text:not(.is-disabled):hover {
-      border-radius: var(--el-border-radius-base);
+    &:hover {
+      color: var(--theme-color);
     }
   }
 }

frontend/web/src/components/modal/fa-drawer/index.vue

@@ -15,9 +15,11 @@
         <span class="core-overlay-drawer__title">{{ title }}</span>
         <div class="core-overlay-drawer__actions">
           <ElTooltip content="关闭" placement="top">
-            <ElButton class="core-overlay-icon-btn" text @click="visible = false">
-              <ElIcon><Close /></ElIcon>
-            </ElButton>
+            <FaIconButton
+              class="core-overlay-icon-btn"
+              icon="ri:close-line"
+              @click="visible = false"
+            />
           </ElTooltip>
         </div>
       </div>
@@ -40,9 +42,9 @@
 </template>
 
 <script setup lang="ts">
-import { Close } from "@element-plus/icons-vue";
 import type { DrawerProps } from "element-plus";
 import { computed, useAttrs } from "vue";
+import FaIconButton from "@/components/widget/fa-icon-button/index.vue";
 
 defineOptions({ name: "FaDrawer", inheritAttrs: false });
 
@@ -121,6 +123,15 @@ const drawerAttrs = computed(() => {
   gap: 8px;
   justify-content: flex-end;
   padding-top: 4px;
+
+  :deep(.el-button) {
+    transition: all 0.2s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+  }
 }
 
 .core-overlay-drawer__actions {
@@ -130,13 +141,13 @@ const drawerAttrs = computed(() => {
   align-items: center;
   margin-left: auto;
 
-  :deep(.core-overlay-icon-btn.el-button) {
+  :deep(.core-overlay-icon-btn) {
     min-width: 32px;
     padding: 6px;
     border-radius: var(--el-border-radius-base);
 
-    &.is-text:not(.is-disabled):hover {
-      border-radius: var(--el-border-radius-base);
+    &:hover {
+      color: var(--theme-color);
     }
   }
 }

frontend/web/src/components/others/fa-pagination/index.vue

@@ -104,6 +104,6 @@ function handleCurrentChange(val: number) {
 .pagination {
   display: flex;
   justify-content: center;
-  padding: 12px 0;
+  // padding: 12px 0;
 }
 </style>

frontend/web/src/components/others/fa-table-select/index.vue

@@ -125,6 +125,7 @@
         </ElTable>
         <!-- 分页 -->
         <FaPagination
+          class="mt-2"
           v-model:total="total"
           v-model:page="queryParams.page_no"
           v-model:limit="queryParams.page_size"
@@ -134,7 +135,7 @@
           <ElButton type="primary" size="small" @click="handleConfirm">
             {{ confirmText }}
           </ElButton>
-          <ElButton size="small" @click="handleClear">清 空</ElButton>
+          <ElButton type="danger" size="small" @click="handleClear">清 空</ElButton>
           <ElButton size="small" @click="handleClose">关 闭</ElButton>
         </div>
       </div>
@@ -351,6 +352,8 @@ const popoverContentRef = ref();
 </script>
 
 <style scoped lang="scss">
+@use "@styles/fa-table";
+
 .reference :deep(.el-input__wrapper),
 .reference :deep(.el-input__inner) {
   cursor: pointer;