refactor: 插件管理页面 UI 改造
All checks were successful
continuous-integration/drone/push Build is passing

- Tab 合并 6→4:SEO 并入基础配置,JSON 并入高级配置
- 表单双列 grid 布局,短字段两两并排
- section-body 加 20px 24px 内边距
- 配置项可折叠(▼箭头,点击 header 切换)
- 响应式 768px 以下回退单列
- 版权信息和 SEO 描述加 form-item--full 整行
This commit is contained in:
yiqiu
2026-03-18 23:57:37 +08:00
parent a6c1d8cf35
commit 75756e5a64
2 changed files with 60 additions and 41 deletions

View File

@@ -144,13 +144,18 @@ body {
}
.section-body {
padding: 0;
padding: 20px 24px;
}
/* 表单 */
.form-fields {
display: grid;
gap: var(--spacing-lg);
grid-template-columns: 1fr 1fr;
gap: 16px 24px;
}
.form-item--full {
grid-column: 1 / -1;
}
.form-item {
@@ -312,6 +317,28 @@ textarea.form-control {
padding: 16px;
}
/* 折叠 */
.config-item__header {
cursor: pointer;
user-select: none;
}
.config-item__header h4::before {
content: '▼';
display: inline-block;
margin-right: 6px;
font-size: 10px;
transition: transform 0.2s ease;
}
.config-item.collapsed .config-item__header h4::before {
transform: rotate(-90deg);
}
.config-item.collapsed .config-item__body {
display: none;
}
/* JSON编辑器 */
.json-editor {
width: 100%;
@@ -366,4 +393,12 @@ textarea.form-control {
.tab-item {
flex-shrink: 0;
}
.form-fields {
grid-template-columns: 1fr;
}
.section-body {
padding: 16px;
}
}