refactor: 插件管理页面 UI 改造
All checks were successful
continuous-integration/drone/push Build is passing
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
@@ -60,13 +60,6 @@
|
||||
</svg>
|
||||
基础配置
|
||||
</a>
|
||||
<a class="tab-item" data-tab="seo">
|
||||
<svg viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2" />
|
||||
<path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
SEO设置
|
||||
</a>
|
||||
<a class="tab-item" data-tab="home">
|
||||
<svg viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
@@ -91,21 +84,13 @@
|
||||
<circle cx="5" cy="12" r="1" fill="currentColor" />
|
||||
<circle cx="19" cy="12" r="1" fill="currentColor" />
|
||||
</svg>
|
||||
其他配置
|
||||
</a>
|
||||
<a class="tab-item" data-tab="json">
|
||||
<svg viewBox="0 0 24 24" fill="none">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" />
|
||||
<path d="M8 8L12 12L8 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
<path d="M12 8L16 12L12 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
JSON编辑器
|
||||
高级配置
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="admin-main">
|
||||
<!-- 基础配置 -->
|
||||
<!-- 基础配置（含 SEO） -->
|
||||
<section id="tab-basic" class="config-section active">
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
@@ -120,24 +105,23 @@
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>联系电话</label>
|
||||
<input type="text" class="form-control" name="site_config.enterprise_telephone"
|
||||
placeholder="400-000-0000">
|
||||
<input type="text" class="form-control" name="site_config.enterprise_telephone" placeholder="400-000-0000">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>联系邮箱</label>
|
||||
<input type="text" class="form-control" name="site_config.enterprise_mailbox"
|
||||
placeholder="support@example.com">
|
||||
<input type="text" class="form-control" name="site_config.enterprise_mailbox" placeholder="support@example.com">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>ICP备案号</label>
|
||||
<input type="text" class="form-control" name="site_config.icp_info" placeholder="京ICP备XXXX号">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>网站Logo</label>
|
||||
<div class="upload-control">
|
||||
<input type="text" class="form-control" name="site_config.official_website_logo"
|
||||
placeholder="/upload/logo.png">
|
||||
<input type="text" class="form-control" name="site_config.official_website_logo" placeholder="/upload/logo.png">
|
||||
<button class="btn btn-secondary upload-btn" data-target="site_config.official_website_logo">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none">
|
||||
<path
|
||||
d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10"
|
||||
stroke="currentColor" stroke-width="1.5" />
|
||||
<path d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10" stroke="currentColor" stroke-width="1.5" />
|
||||
<path d="M11.3333 5.33333L8 2L4.66667 5.33333" stroke="currentColor" stroke-width="1.5" />
|
||||
<path d="M8 2V10" stroke="currentColor" stroke-width="1.5" />
|
||||
</svg>
|
||||
@@ -151,24 +135,18 @@
|
||||
<input type="text" class="form-control" name="site_config.logo_link" placeholder="index.html">
|
||||
<div class="form-hint">点击Logo跳转的链接地址，默认为首页</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<label>ICP备案号</label>
|
||||
<input type="text" class="form-control" name="site_config.icp_info" placeholder="京ICP备XXXX号">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item form-item--full">
|
||||
<label>版权信息</label>
|
||||
<input type="text" class="form-control" name="site_config.copyright_info" placeholder="© 2025 主题云">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SEO设置 -->
|
||||
<section id="tab-seo" class="config-section">
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<h2>SEO设置</h2>
|
||||
<p class="section-desc">搜索引擎优化配置</p>
|
||||
</div>
|
||||
<div class="section-body">
|
||||
<div class="form-fields">
|
||||
@@ -180,7 +158,7 @@
|
||||
<label>关键词</label>
|
||||
<input type="text" class="form-control" name="seo.keywords" placeholder="关键词,逗号分隔">
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item form-item--full">
|
||||
<label>描述</label>
|
||||
<textarea class="form-control" name="seo.description" rows="3" placeholder="站点描述"></textarea>
|
||||
</div>
|
||||
@@ -245,7 +223,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 其他配置 -->
|
||||
<!-- 高级配置（友情链接 + 反馈类型 + JSON编辑器） -->
|
||||
<section id="tab-other" class="config-section">
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
@@ -266,10 +244,7 @@
|
||||
<button class="btn btn-secondary" id="addFeedbackTypeBtn">+ 添加</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- JSON编辑器 -->
|
||||
<section id="tab-json" class="config-section">
|
||||
<div class="section-card">
|
||||
<div class="section-header">
|
||||
<h2>JSON配置编辑器</h2>
|
||||
@@ -323,6 +298,15 @@
|
||||
});
|
||||
});
|
||||
|
||||
// 配置项折叠 — 点击 header 切换
|
||||
document.addEventListener('click', (e) => {
|
||||
const header = e.target.closest('.config-item__header');
|
||||
if (!header) return;
|
||||
// 如果点的是 header 内的按钮（如删除），不触发折叠
|
||||
if (e.target.closest('button')) return;
|
||||
header.closest('.config-item').classList.toggle('collapsed');
|
||||
});
|
||||
|
||||
// 加载配置
|
||||
function loadConfig() {
|
||||
console.log('开始加载配置...');
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user