From 75756e5a64445396a85360f8f31d7d222b2f1161 Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Wed, 18 Mar 2026 23:57:37 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8F=92=E4=BB=B6=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2=20UI=20=E6=94=B9=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Tab 合并 6→4：SEO 并入基础配置，JSON 并入高级配置
- 表单双列 grid 布局，短字段两两并排
- section-body 加 20px 24px 内边距
- 配置项可折叠（▼箭头，点击 header 切换）
- 响应式 768px 以下回退单列
- 版权信息和 SEO 描述加 form-item--full 整行
---
 .../template/admin/index.html                 | 62 +++++++------------
 .../template/admin/theme.css                  | 39 +++++++++++-
 2 files changed, 60 insertions(+), 41 deletions(-)

diff --git a/plugins/addon/theme_configurator/template/admin/index.html b/plugins/addon/theme_configurator/template/admin/index.html
index 3bce964..513a0bb 100644
--- a/plugins/addon/theme_configurator/template/admin/index.html
+++ b/plugins/addon/theme_configurator/template/admin/index.html
@@ -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('开始加载配置...');
diff --git a/plugins/addon/theme_configurator/template/admin/theme.css b/plugins/addon/theme_configurator/template/admin/theme.css
index d4912c8..8e8778c 100644
--- a/plugins/addon/theme_configurator/template/admin/theme.css
+++ b/plugins/addon/theme_configurator/template/admin/theme.css
@@ -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;
+  }
 }
\ No newline at end of file