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

本次提交主要对上一个移动端适配commit进行了优化和问题修复。 - **PC端布局修复**: - 修复了密钥表格在PC端显示为2列的问题，恢复为3列布局，优化了视觉效果。 - 重新设计了日志页面的筛选器布局，从多行改为响应式网格布局，解决了PC端筛选栏显示混乱的问题。 - **移动端适配优化**: - 完善了页脚（Footer）在移动端的显示，确保所有链接和信息都能完整展示。 - 对编辑分组的表单进行了移动端适配，优化了表单项的排列方式，提升了在小屏幕上的可用性。 - **代码优化**: - 在分组表单中为配置项增加了提示（Tooltip），增强了用户体验。 - 统一和优化了部分组件的样式，使其在不同设备上表现更一致。
2025-07-31 01:53:15 +08:00
parent 2dd6957ae9
commit e9b9e94142
4 changed files with 159 additions and 123 deletions
--- 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;
  }

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