feat(LayoutView): 在移动端侧边栏添加域名筛选器

在移动端视图中,将域名筛选器从顶部操作栏移至侧边栏,以改善移动设备上的用户体验。同时隐藏了桌面端顶部操作栏中的域名筛选器,确保界面整洁。
This commit is contained in:
anghunk
2026-01-27 11:11:15 +08:00
parent ba8349b04c
commit 5b408c8d41

View File

@@ -16,7 +16,7 @@
</button> </button>
<div class="layout-title">CWD 评论系统</div> <div class="layout-title">CWD 评论系统</div>
<div class="layout-actions-wrapper"> <div class="layout-actions-wrapper">
<div class="layout-domain-filter"> <div class="layout-domain-filter layout-domain-filter-header">
<select v-model="domainFilter" class="layout-domain-select"> <select v-model="domainFilter" class="layout-domain-select">
<option value="">全部域名</option> <option value="">全部域名</option>
<option v-for="item in domainOptions" :key="item" :value="item"> <option v-for="item in domainOptions" :key="item" :value="item">
@@ -80,6 +80,14 @@
class="layout-sider" class="layout-sider"
:class="{ 'layout-sider-mobile-open': isMobileSiderOpen }" :class="{ 'layout-sider-mobile-open': isMobileSiderOpen }"
> >
<div class="layout-sider-domain-filter">
<select v-model="domainFilter" class="layout-domain-select">
<option value="">全部域名</option>
<option v-for="item in domainOptions" :key="item" :value="item">
{{ item }}
</option>
</select>
</div>
<ul class="menu"> <ul class="menu">
<li <li
class="menu-item" class="menu-item"
@@ -302,6 +310,10 @@ function handleLogoutFromActions() {
font-size: 13px; font-size: 13px;
} }
.layout-sider-domain-filter {
display: none;
}
.layout-actions { .layout-actions {
display: flex; display: flex;
gap: 8px; gap: 8px;
@@ -457,6 +469,20 @@ function handleLogoutFromActions() {
display: none; display: none;
} }
.layout-domain-filter-header {
display: none;
}
.layout-sider-domain-filter {
display: block;
padding: 12px 16px 0;
}
.layout-sider-domain-filter .layout-domain-select {
width: 100%;
box-sizing: border-box;
}
.layout-actions-toggle { .layout-actions-toggle {
display: inline-flex; display: inline-flex;
} }