优化: 响应式布局走查修复(断点统一+窄屏适配)

- 统一断点: Dashboard/Ideas/Projects/ProjectDetail 的响应式断点
  从 900px 改为 768px,与 AppLayout/AppSidebar 对齐(消除中间区间挤压)
- filter-bar 全局加 flex-wrap:wrap(窄屏自动换行,Ideas/Tasks/AuditLog 受益)
- IdeaDetail debate-container 窄屏双栏堆叠(@media 760px 切单列)
- modal-box min-width 改用 min(360px,90vw)(超小窗口不撑破)
- Tasks search-input 改 flex 布局(窄屏自适应宽度)
This commit is contained in:
lxy
2026-07-03 02:35:14 +08:00
parent 89cfbc7499
commit aa0701a2ea
7 changed files with 16 additions and 10 deletions
+2 -2
View File
@@ -140,8 +140,8 @@ onMounted(() => {
/* ═══ Responsive ═══ */
/* 窄窗口:单栏 */
@media (max-width: 900px) {
/* 窄窗口:单栏(与 AppLayout 768px 断点对齐) */
@media (max-width: 768px) {
.dashboard { padding: 12px 14px 16px; }
.dash-grid { grid-template-columns: 1fr; }
.dash-right { flex-direction: row; flex-wrap: wrap; gap: 10px; }
+1 -4
View File
@@ -498,14 +498,11 @@ watch(() => route.params.id, (id) => {
/* empty-state / empty-icon 已提取到 global.css 全局 */
/* ===== 响应式 ===== */
@media (max-width: 900px) {
@media (max-width: 768px) {
.ideas { padding: 16px; }
.ideas-layout {
grid-template-columns: 1fr;
}
.filter-bar {
flex-wrap: wrap;
}
.search-box {
max-width: 100%;
order: -1;
+1 -1
View File
@@ -821,7 +821,7 @@ onUnmounted(() => {
}
/* ===== 响应式 ===== */
@media (max-width: 900px) {
@media (max-width: 768px) {
.project-detail { padding: 16px; }
.detail-grid {
grid-template-columns: 1fr;
+1 -1
View File
@@ -496,7 +496,7 @@ async function runImport() {
.trash-actions { display: flex; gap: 8px; }
/* ===== 响应式 ===== */
@media (max-width: 900px) {
@media (max-width: 768px) {
.projects { padding: 16px; }
.project-grid {
grid-template-columns: 1fr;
+2
View File
@@ -458,6 +458,8 @@ onUnmounted(() => {
/* 搜索框 */
.search-input {
width: 220px;
max-width: 100%;
flex: 1 1 220px;
padding: 6px 12px;
border: 0.5px solid var(--df-border);
border-radius: var(--df-radius-sm);