feat(ui): 优化移动端适配和修复PC端布局问题
本次提交主要对上一个移动端适配commit进行了优化和问题修复。 - **PC端布局修复**: - 修复了密钥表格在PC端显示为2列的问题，恢复为3列布局，优化了视觉效果。 - 重新设计了日志页面的筛选器布局，从多行改为响应式网格布局，解决了PC端筛选栏显示混乱的问题。 - **移动端适配优化**: - 完善了页脚（Footer）在移动端的显示，确保所有链接和信息都能完整展示。 - 对编辑分组的表单进行了移动端适配，优化了表单项的排列方式，提升了在小屏幕上的可用性。 - **代码优化**: - 在分组表单中为配置项增加了提示（Tooltip），增强了用户体验。 - 统一和优化了部分组件的样式，使其在不同设备上表现更一致。
This commit is contained in:
OrzMiku
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user