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>
<div class="layout-title">CWD 评论系统</div>
<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">
<option value="">全部域名</option>
<option v-for="item in domainOptions" :key="item" :value="item">
@@ -80,6 +80,14 @@
class="layout-sider"
: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">
<li
class="menu-item"
@@ -302,6 +310,10 @@ function handleLogoutFromActions() {
font-size: 13px;
}
.layout-sider-domain-filter {
display: none;
}
.layout-actions {
display: flex;
gap: 8px;
@@ -457,6 +469,20 @@ function handleLogoutFromActions() {
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 {
display: inline-flex;
}