feat(ui): 优化移动端适配和修复PC端布局问题

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

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

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

- **代码优化**:
  - 在分组表单中为配置项增加了提示（Tooltip），增强了用户体验。
  - 统一和优化了部分组件的样式，使其在不同设备上表现更一致。

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;
   }
 

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
+                        <n-tooltip trigger="hover" placement="top">
-                          v-model:value="configItem.value"
+                          <template #trigger>
-                          placeholder="参数值"
+                            <n-input-number
-                          :precision="0"
+                              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>

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));
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 12px;
+  gap: 16px;
 }
 
 .key-card {

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">
+            <div class="filter-grid">
-              <n-date-picker
+              <div class="filter-item">
-                v-model:value="filters.start_time"
+                <n-input
-                type="datetime"
+                  v-model:value="filters.group_name"
-                clearable
+                  placeholder="分组名"
-                size="small"
+                  size="small"
-                placeholder="开始时间"
+                  clearable
-                style="width: 180px"
+                  @keyup.enter="handleSearch"
-              />
+                />
-            </div>
+              </div>
-            <div class="filter-group">
+              <div class="filter-item">
-              <n-date-picker
+                <n-input
-                v-model:value="filters.end_time"
+                  v-model:value="filters.key_value"
-                type="datetime"
+                  placeholder="密钥"
-                clearable
+                  size="small"
-                size="small"
+                  clearable
-                placeholder="结束时间"
+                  @keyup.enter="handleSearch"
-                style="width: 180px"
+                />
-              />
+              </div>
-            </div>
+              <div class="filter-item">
-            <div class="filter-group">
+                <n-input
-              <n-select
+                  v-model:value="filters.status_code"
-                v-model:value="filters.is_success"
+                  placeholder="状态码"
-                :options="successOptions"
+                  size="small"
-                size="small"
+                  clearable
-                style="width: 166px"
+                  @keyup.enter="handleSearch"
-                @update:value="handleSearch"
+                />
-              />
+              </div>
-            </div>
+              <div class="filter-item">
-            <div class="filter-group">
+                <n-select
-              <n-input
+                  v-model:value="filters.is_success"
-                v-model:value="filters.status_code"
+                  :options="successOptions"
-                placeholder="状态码"
+                  size="small"
-                size="small"
+                  @update:value="handleSearch"
-                clearable
+                />
-                style="width: 166px"
+              </div>
-                @keyup.enter="handleSearch"
+              <div class="filter-item">
-              />
+                <n-input
-            </div>
+                  v-model:value="filters.error_contains"
-            <div class="filter-group">
+                  placeholder="错误信息"
-              <n-input
+                  size="small"
-                v-model:value="filters.group_name"
+                  clearable
-                placeholder="分组名"
+                  @keyup.enter="handleSearch"
-                size="small"
+                />
-                clearable
+              </div>
-                style="width: 166px"
+              <div class="filter-item">
-                @keyup.enter="handleSearch"
+                <n-date-picker
-              />
+                  v-model:value="filters.start_time"
-            </div>
+                  type="datetime"
-            <div class="filter-group">
+                  clearable
-              <n-input
+                  size="small"
-                v-model:value="filters.key_value"
+                  placeholder="开始时间"
-                placeholder="密钥"
+                />
-                size="small"
+              </div>
-                clearable
+              <div class="filter-item">
-                style="width: 166px"
+                <n-date-picker
-                @keyup.enter="handleSearch"
+                  v-model:value="filters.end_time"
-              />
+                  type="datetime"
-            </div>
+                  clearable
-          </div>
+                  size="small"
-
+                  placeholder="结束时间"
-          <!-- 第二行：详细筛选和操作 -->
+                />
-          <div class="filter-row">
+              </div>
-            <div class="filter-group">
-              <n-input
-                v-model:value="filters.error_contains"
-                placeholder="错误信息"
-                size="small"
-                clearable
-                style="width: 384px"
-                @keyup.enter="handleSearch"
-              />
             </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;
+  flex-wrap: wrap;
-  gap: 8px;
+  gap: 12px;
+  flex: 1 1 auto; /* Let it take available space and wrap */
 }
 
-.filter-label {
+.filter-item {
-  font-size: 13px;
+  flex: 1 1 180px; /* Each item will have a base width of 180px and can grow */
-  color: #666;
+  min-width: 180px; /* Prevent from becoming too narrow */
-  white-space: nowrap;
-  min-width: 50px;
-}
-
-.filter-separator {
-  font-size: 12px;
-  color: #999;
-  margin: 0 4px;
 }
 
 .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;