From e9b9e9414213d3b85e52d3c5196d0a2c2822cc22 Mon Sep 17 00:00:00 2001
From: OrzMiku <miku@ecy.pink>
Date: Thu, 31 Jul 2025 01:53:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E4=BC=98=E5=8C=96=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E9=80=82=E9=85=8D=E5=92=8C=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?PC=E7=AB=AF=E5=B8=83=E5=B1=80=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

本次提交主要对上一个移动端适配commit进行了优化和问题修复。

- **PC端布局修复**:
  - 修复了密钥表格在PC端显示为2列的问题，恢复为3列布局，优化了视觉效果。
  - 重新设计了日志页面的筛选器布局，从多行改为响应式网格布局，解决了PC端筛选栏显示混乱的问题。

- **移动端适配优化**:
  - 完善了页脚（Footer）在移动端的显示，确保所有链接和信息都能完整展示。
  - 对编辑分组的表单进行了移动端适配，优化了表单项的排列方式，提升了在小屏幕上的可用性。

- **代码优化**:
  - 在分组表单中为配置项增加了提示（Tooltip），增强了用户体验。
  - 统一和优化了部分组件的样式，使其在不同设备上表现更一致。
---
 web/src/components/AppFooter.vue           |   8 +-
 web/src/components/keys/GroupFormModal.vue |  76 +++++++-
 web/src/components/keys/KeyTable.vue       |   4 +-
 web/src/components/logs/LogTable.vue       | 194 +++++++++------------
 4 files changed, 159 insertions(+), 123 deletions(-)

diff --git a/web/src/components/AppFooter.vue b/web/src/components/AppFooter.vue
index 86df4d2..15410d9 100644
--- a/web/src/components/AppFooter.vue
+++ b/web/src/components/AppFooter.vue
@@ -218,7 +218,7 @@ onMounted(() => {
   border-top: 1px solid rgba(0, 0, 0, 0.08);
   padding: 12px 24px;
   font-size: 14px;
-  height: 52px;
+  min-height: 52px;
 }
 
 .footer-container {
@@ -231,7 +231,6 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   gap: 16px;
-  flex-wrap: wrap;
   line-height: 1.4;
 }
 
@@ -269,6 +268,7 @@ onMounted(() => {
   font-weight: 500;
   font-size: 13px;
   color: #666;
+  white-space: nowrap;
 }
 
 .version-clickable {
@@ -301,6 +301,7 @@ onMounted(() => {
   border-radius: 4px;
   transition: all 0.2s ease;
   font-size: 13px;
+  white-space: nowrap;
 }
 
 .footer-link:hover {
@@ -345,6 +346,7 @@ onMounted(() => {
 @media (max-width: 768px) {
   .app-footer {
     padding: 10px 16px;
+    height: auto;
   }
 
   .footer-main {
@@ -353,7 +355,7 @@ onMounted(() => {
     text-align: center;
   }
 
-  .divider {
+  .footer-main :deep(.n-divider) {
     display: none;
   }
 
diff --git a/web/src/components/keys/GroupFormModal.vue b/web/src/components/keys/GroupFormModal.vue
index 1b60c53..f4654e1 100644
--- a/web/src/components/keys/GroupFormModal.vue
+++ b/web/src/components/keys/GroupFormModal.vue
@@ -366,6 +366,10 @@ function handleConfigKeyChange(index: number, key: string) {
   }
 }
 
+const getConfigOption = (key: string) => {
+  return configOptions.value.find(opt => opt.key === key);
+};
+
 // 关闭弹窗
 function handleClose() {
   emit("update:show", false);
@@ -440,7 +444,7 @@ async function handleSubmit() {
 <template>
   <n-modal :show="show" @update:show="handleClose" class="group-form-modal">
     <n-card
-      style="width: 800px"
+      class="group-form-card"
       :title="group ? '编辑分组' : '创建分组'"
       :bordered="false"
       size="huge"
@@ -462,6 +466,7 @@ async function handleSubmit() {
         label-placement="left"
         label-width="120px"
         require-mark-placement="right-hanging"
+        class="group-form"
       >
         <!-- 基础信息 -->
         <div class="form-section">
@@ -677,9 +682,14 @@ async function handleSubmit() {
               </div>
               <div class="upstream-weight">
                 <span class="weight-label">权重</span>
-                <n-tooltip trigger="hover" placement="top">
+                <n-tooltip trigger="hover" placement="top" style="width: 100%">
                   <template #trigger>
-                    <n-input-number v-model:value="upstream.weight" :min="1" placeholder="权重" />
+                    <n-input-number
+                      v-model:value="upstream.weight"
+                      :min="1"
+                      placeholder="权重"
+                      style="width: 100%"
+                    />
                   </template>
                   负载均衡权重，数值越大被选中的概率越高。例如：权重为2的上游被选中的概率是权重为1的两倍
                 </n-tooltip>
@@ -771,11 +781,16 @@ async function handleSubmit() {
                         />
                       </div>
                       <div class="config-value">
-                        <n-input-number
-                          v-model:value="configItem.value"
-                          placeholder="参数值"
-                          :precision="0"
-                        />
+                        <n-tooltip trigger="hover" placement="top">
+                          <template #trigger>
+                            <n-input-number
+                              v-model:value="configItem.value"
+                              placeholder="参数值"
+                              :precision="0"
+                            />
+                          </template>
+                          {{ getConfigOption(configItem.key)?.description || "设置此配置项的值" }}
+                        </n-tooltip>
                       </div>
                       <div class="config-actions">
                         <n-button
@@ -1106,4 +1121,49 @@ async function handleSubmit() {
   display: flex;
   justify-content: center;
 }
+
+@media (max-width: 768px) {
+  .group-form-card {
+    width: 100vw !important;
+  }
+
+  .group-form {
+    label-width: auto !important;
+  }
+
+  .form-row {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .form-item-half {
+    width: 100%;
+  }
+
+  .section-title {
+    font-size: 0.9rem;
+  }
+
+  .upstream-row,
+  .config-item-content {
+    flex-direction: column;
+    gap: 8px;
+    align-items: stretch;
+  }
+
+  .upstream-weight {
+    flex: 1;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .config-value {
+    flex: 1;
+  }
+
+  .upstream-actions,
+  .config-actions {
+    justify-content: flex-end;
+  }
+}
 </style>
diff --git a/web/src/components/keys/KeyTable.vue b/web/src/components/keys/KeyTable.vue
index 87bac6c..6331597 100644
--- a/web/src/components/keys/KeyTable.vue
+++ b/web/src/components/keys/KeyTable.vue
@@ -815,8 +815,8 @@ function resetPage() {
 
 .keys-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
 }
 
 .key-card {
diff --git a/web/src/components/logs/LogTable.vue b/web/src/components/logs/LogTable.vue
index b43f90f..66721a9 100644
--- a/web/src/components/logs/LogTable.vue
+++ b/web/src/components/logs/LogTable.vue
@@ -235,80 +235,70 @@ function changePageSize(size: number) {
       <!-- 工具栏 -->
       <div class="toolbar">
         <div class="filter-section">
-          <!-- 第一行：基础筛选 -->
           <div class="filter-row">
-            <div class="filter-group">
-              <n-date-picker
-                v-model:value="filters.start_time"
-                type="datetime"
-                clearable
-                size="small"
-                placeholder="开始时间"
-                style="width: 180px"
-              />
-            </div>
-            <div class="filter-group">
-              <n-date-picker
-                v-model:value="filters.end_time"
-                type="datetime"
-                clearable
-                size="small"
-                placeholder="结束时间"
-                style="width: 180px"
-              />
-            </div>
-            <div class="filter-group">
-              <n-select
-                v-model:value="filters.is_success"
-                :options="successOptions"
-                size="small"
-                style="width: 166px"
-                @update:value="handleSearch"
-              />
-            </div>
-            <div class="filter-group">
-              <n-input
-                v-model:value="filters.status_code"
-                placeholder="状态码"
-                size="small"
-                clearable
-                style="width: 166px"
-                @keyup.enter="handleSearch"
-              />
-            </div>
-            <div class="filter-group">
-              <n-input
-                v-model:value="filters.group_name"
-                placeholder="分组名"
-                size="small"
-                clearable
-                style="width: 166px"
-                @keyup.enter="handleSearch"
-              />
-            </div>
-            <div class="filter-group">
-              <n-input
-                v-model:value="filters.key_value"
-                placeholder="密钥"
-                size="small"
-                clearable
-                style="width: 166px"
-                @keyup.enter="handleSearch"
-              />
-            </div>
-          </div>
-
-          <!-- 第二行：详细筛选和操作 -->
-          <div class="filter-row">
-            <div class="filter-group">
-              <n-input
-                v-model:value="filters.error_contains"
-                placeholder="错误信息"
-                size="small"
-                clearable
-                style="width: 384px"
-                @keyup.enter="handleSearch"
-              />
+            <div class="filter-grid">
+              <div class="filter-item">
+                <n-input
+                  v-model:value="filters.group_name"
+                  placeholder="分组名"
+                  size="small"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </div>
+              <div class="filter-item">
+                <n-input
+                  v-model:value="filters.key_value"
+                  placeholder="密钥"
+                  size="small"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </div>
+              <div class="filter-item">
+                <n-input
+                  v-model:value="filters.status_code"
+                  placeholder="状态码"
+                  size="small"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </div>
+              <div class="filter-item">
+                <n-select
+                  v-model:value="filters.is_success"
+                  :options="successOptions"
+                  size="small"
+                  @update:value="handleSearch"
+                />
+              </div>
+              <div class="filter-item">
+                <n-input
+                  v-model:value="filters.error_contains"
+                  placeholder="错误信息"
+                  size="small"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </div>
+              <div class="filter-item">
+                <n-date-picker
+                  v-model:value="filters.start_time"
+                  type="datetime"
+                  clearable
+                  size="small"
+                  placeholder="开始时间"
+                />
+              </div>
+              <div class="filter-item">
+                <n-date-picker
+                  v-model:value="filters.end_time"
+                  type="datetime"
+                  clearable
+                  size="small"
+                  placeholder="结束时间"
+                />
+              </div>
             </div>
             <div class="filter-actions">
               <n-button ghost size="small" :disabled="loading" @click="handleSearch">
@@ -322,7 +312,7 @@ function changePageSize(size: number) {
                 <template #icon>
                   <n-icon :component="DownloadOutline" />
                 </template>
-                导出密钥
+                导出日志
               </n-button>
             </div>
           </div>
@@ -400,63 +390,47 @@ function changePageSize(size: number) {
 
 .filter-row {
   display: flex;
-  align-items: center;
-  gap: 24px;
   flex-wrap: wrap;
+  align-items: flex-end; /* Aligns buttons with the bottom of the filter items */
+  gap: 16px;
 }
 
-.filter-group {
+.filter-grid {
   display: flex;
-  align-items: center;
-  gap: 8px;
+  flex-wrap: wrap;
+  gap: 12px;
+  flex: 1 1 auto; /* Let it take available space and wrap */
 }
 
-.filter-label {
-  font-size: 13px;
-  color: #666;
-  white-space: nowrap;
-  min-width: 50px;
-}
-
-.filter-separator {
-  font-size: 12px;
-  color: #999;
-  margin: 0 4px;
+.filter-item {
+  flex: 1 1 180px; /* Each item will have a base width of 180px and can grow */
+  min-width: 180px; /* Prevent from becoming too narrow */
 }
 
 .filter-actions {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-left: auto;
 }
 
 @media (max-width: 768px) {
-  .filter-row {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 12px;
-  }
-
-  .filter-group {
-    width: 100%;
-  }
-
-  .filter-group > * {
-    width: 100% !important;
-  }
-
-  .filter-actions {
-    width: 100%;
-    justify-content: space-between;
-  }
-
   .pagination-container {
     flex-direction: column;
     gap: 12px;
   }
 }
 
+@media (max-width: 480px) {
+  .filter-actions {
+    width: 100%;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .filter-actions .n-button {
+    width: 100%;
+  }
+}
+
 .table-main {
   background: white;
   border-radius: 8px;