From feddfc2e6479049c7e0c76698d3575877d522938 Mon Sep 17 00:00:00 2001 From: yiqiu Date: Sun, 28 Dec 2025 13:57:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=EF=BC=8C?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=BC=81=E4=B8=9A=E4=BF=A1=E6=81=AF=E3=80=81?= =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=B5=AE=E7=AA=97=E3=80=81=E5=8F=8D=E9=A6=88?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E3=80=81SEO=E5=92=8C=E9=A6=96=E9=A1=B5?= =?UTF-8?q?=E8=BD=AE=E6=92=AD=E8=AE=BE=E7=BD=AE=EF=BC=8C=E5=B9=B6=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E4=BA=86=E6=A0=B7=E5=BC=8F=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../template/admin/index.html | 300 ++++-- .../template/admin/index.html.backup | 914 ++++++++++++++++++ .../template/admin/index_new.html | 914 ++++++++++++++++++ .../template/admin/index_new_part1.html | 255 +++++ .../template/admin/theme.css | 857 +++++++++------- 5 files changed, 2800 insertions(+), 440 deletions(-) create mode 100644 plugins/addon/theme_configurator/template/admin/index.html.backup create mode 100644 plugins/addon/theme_configurator/template/admin/index_new.html create mode 100644 plugins/addon/theme_configurator/template/admin/index_new_part1.html diff --git a/plugins/addon/theme_configurator/template/admin/index.html b/plugins/addon/theme_configurator/template/admin/index.html index fb1ce4f..e838815 100644 --- a/plugins/addon/theme_configurator/template/admin/index.html +++ b/plugins/addon/theme_configurator/template/admin/index.html @@ -1,10 +1,86 @@ -
- - - -
+
+ +
+
+ +
+
+ +
+
+ + +
+ + + + +
+ + +
+
+
+

企业信息

+
+
+
@@ -17,9 +93,9 @@
-
+
-
+
-
+
-
+
物理机/DCIM 链接
-
+
- +
- -

+

+
+

侧边浮窗

+
+
+

对应前台右侧悬浮工具条（电话咨询/在线客服/提交工单等），结构与模板中的 side_floating_window 一致。

-
+
还没有侧边浮窗，点击下方按钮添加。
@@ -108,14 +188,14 @@ 删除
-
+
-
+
-
+
-
+
@@ -134,13 +214,17 @@
新增浮窗 - +
- -

+

+
+

反馈类型

+
+
+

对应 /console/v1/feedback 的类型选项，ID 需与后端保持一致，仅建议修改名称与描述。

-
+
还没有反馈类型，点击下方按钮添加。
@@ -150,7 +234,7 @@ 删除
-
+
@@ -159,19 +243,23 @@
-
+
新增反馈类型 - - +
+
- - -
+
+
+
+

SEO 设置

+
+
+
@@ -180,18 +268,22 @@
-
+
- - +
+
- - -
+
+
+
+

首页轮播文案

+
+
+
还没有轮播文案，点击下方按钮添加。
-
+
-
+
-
+
描述
-
+
@@ -231,7 +323,7 @@
-
+
@@ -243,17 +335,21 @@
-
+
新增轮播 - +
- -
+
+
+

企业资质与荣誉

+
+
+
用于首页"荣誉资质"模块（honor）。
@@ -263,14 +359,14 @@ 删除
-
+
-
+
-
+
新增荣誉 - +
- +
- - -

+

- - -

+

- -

+

+
+

高级配置 (JSON)

+
+
+

用于暂未在 UI 中开放的配置项（如复杂导航结构 header_nav/footer_nav 等）。如非必要，建议优先使用上方表单编辑。

- +
同步当前配置 应用 JSON
- - +
+
@@ -491,8 +603,16 @@
- - + + \ No newline at end of file diff --git a/plugins/addon/theme_configurator/template/admin/index.html.backup b/plugins/addon/theme_configurator/template/admin/index.html.backup new file mode 100644 index 0000000..fb1ce4f --- /dev/null +++ b/plugins/addon/theme_configurator/template/admin/index.html.backup @@ -0,0 +1,914 @@ + + +
+ + + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + + 上传 + + +
+
+
+ +
+ + + + 上传 + + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + +

+ 对应前台右侧悬浮工具条（电话咨询/在线客服/提交工单等），结构与模板中的 + side_floating_window 一致。 +

+
+ 还没有侧边浮窗，点击下方按钮添加。 +
+
+
+

浮窗 {{ index + 1 }}

+ + 删除 + +
+
+
+ + +
+
+ +
+ + + + 上传 + + +
+
+
+ + +
+
+
+ 新增浮窗 + + + +

+ 对应 /console/v1/feedback 的类型选项，ID 需与后端保持一致，仅建议修改名称与描述。 +

+
+ 还没有反馈类型，点击下方按钮添加。 +
+
+
+

类型 {{ index + 1 }}

+ + 删除 + +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ 新增反馈类型 + + + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + + + +
+ 还没有轮播文案，点击下方按钮添加。 +
+ + 新增轮播 + + + +
+ 用于首页"荣誉资质"模块（honor）。 +
+
+
+

荣誉 {{ index + 1 }}

+ + 删除 + +
+
+
+ + +
+
+ +
+ + + + 上传 + + +
+
+
+
+ 新增荣誉 + + + + + + +

+ 控制站点顶部导航栏及其下拉菜单结构。第一个导航项用作 Logo 点击跳转地址。 +

+
+
+ + +
+
+ +

一级导航

+
+ 还没有自定义导航，请点击下方按钮新增。 +
+
+
+

导航 {{ index }}

+ + 删除 + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ +

下拉子菜单

+
+ 还没有子菜单，点击下方按钮新增。 +
+
+
+

子菜单 {{ cIndex + 1 }}

+ + 删除 + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + + 上传 + + +
+
+
+ + +
+
+
+ + 新增子菜单 + +
+ + 新增一级导航 + + + + + + +

+ 控制首页底部多列链接（如【热门产品】【客户支持】等），结构与模板中的 + footer_nav 一致。 +

+
+ 还没有底部栏目，点击下方按钮新增。 +
+
+
+

栏目 {{ index + 1 }}

+ + 删除 + +
+
+
+ + +
+
+

栏目链接

+
+ 还没有链接，点击下方按钮新增。 +
+
+
+

链接 {{ cIndex + 1 }}

+ + 删除 + +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + 新增链接 + +
+ + 新增栏目 + + + + +
+ 还没有友情链接，点击下方按钮添加。 +
+
+
+

链接 {{ index + 1 }}

+ + 删除 + +
+
+
+ + +
+
+ + +
+
+
+ 新增友情链接 + + + + + +

+ 用于暂未在 UI 中开放的配置项（如复杂导航结构 header_nav/footer_nav 等）。如非必要，建议优先使用上方表单编辑。 +

+ +
+ 同步当前配置 + 应用 JSON +
+ + + + +
+ 重新加载 + + 保存全部配置 + + + {{ showAdvanced ? "隐藏高级 JSON" : "显示高级 JSON" }} + +
+
+ + + + \ No newline at end of file diff --git a/plugins/addon/theme_configurator/template/admin/index_new.html b/plugins/addon/theme_configurator/template/admin/index_new.html new file mode 100644 index 0000000..c422ee7 --- /dev/null +++ b/plugins/addon/theme_configurator/template/admin/index_new.html @@ -0,0 +1,914 @@ + + +
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + + 上传 + + +
+
+
+ +
+ + + + 上传 + + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+

+ 对应前台右侧悬浮工具条（电话咨询/在线客服/提交工单等），结构与模板中的 + side_floating_window 一致。 +

+
+ 还没有侧边浮窗，点击下方按钮添加。 +
+
+
+

浮窗 {{ index + 1 }}

+ + 删除 + +
+
+
+ + +
+
+ +
+ + + + 上传 + + +
+
+
+ + +
+
+
+ 新增浮窗 +
+ +
+

+ 对应 /console/v1/feedback 的类型选项，ID 需与后端保持一致，仅建议修改名称与描述。 +

+
+ 还没有反馈类型，点击下方按钮添加。 +
+
+
+

类型 {{ index + 1 }}

+ + 删除 + +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ 新增反馈类型 +
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ +
+
+
+ 还没有轮播文案，点击下方按钮添加。 +
+ + 新增轮播 +
+ +
+
+ 用于首页"荣誉资质"模块（honor）。 +
+
+
+

荣誉 {{ index + 1 }}

+ + 删除 + +
+
+
+ + +
+
+ +
+ + + + 上传 + + +
+
+
+
+ 新增荣誉 +
+ +
+ + + + + + +
+

+ 用于暂未在 UI 中开放的配置项（如复杂导航结构 header_nav/footer_nav 等）。如非必要，建议优先使用上方表单编辑。 +

+ +
+ 同步当前配置 + 应用 JSON +
+
+ + + +
+ 重新加载 + + 保存全部配置 + + + {{ showAdvanced ? "隐藏高级 JSON" : "显示高级 JSON" }} + +
+
+ + + + \ No newline at end of file diff --git a/plugins/addon/theme_configurator/template/admin/index_new_part1.html b/plugins/addon/theme_configurator/template/admin/index_new_part1.html new file mode 100644 index 0000000..2c1e6b2 --- /dev/null +++ b/plugins/addon/theme_configurator/template/admin/index_new_part1.html @@ -0,0 +1,255 @@ + + +
+ +
+
+ +
+
+ +
+
+ + +
+ + + + +
+ +
+ +
+
+

企业信息

+

配置企业基础联系信息

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+

Logo与图片

+

上传网站Logo和二维码

+
+
+
+ +
+ + + + +
+
建议尺寸: 200×60 像素, PNG/SVG格式
+
+
+ +
+ + + + +
+
建议尺寸: 200×200 像素, PNG格式
+
+
+
+ + +
+
+

备案信息

+

网站备案和许可证信息

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+

页面链接

+

配置各类页面跳转链接

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + 由于文件太长,我需要分多次发送。让我先完成这一部分,然后继续下一部分。 + + 这个版本采用: + 1. ⭐ 侧边栏导航 + 2. ⭐ 卡片式内容 + 3. ⭐ 单列表单 + 4. ⭐ 现代化按钮 + + 是否继续创建剩余部分 (SEO设置、首页内容、导航配置等)? \ No newline at end of file diff --git a/plugins/addon/theme_configurator/template/admin/theme.css b/plugins/addon/theme_configurator/template/admin/theme.css index c74925a..0a05903 100644 --- a/plugins/addon/theme_configurator/template/admin/theme.css +++ b/plugins/addon/theme_configurator/template/admin/theme.css @@ -1,87 +1,229 @@ /* ============================================ - 黑果云模板控制器 - 清爽专业风格 - 设计理念：简洁、可靠、商务化 + 黑果云模板控制器 - 现代管理后台 + 设计风格: 侧边栏 + 卡片式 + Ant Design配色 ============================================ */ -/* CSS 变量定义 - 统一配色方案 */ :root { - /* 主色调 - 专业蓝 */ - --primary-color: #2563eb; - --primary-hover: #1d4ed8; - --primary-light: #eff6ff; + /* Ant Design 配色 */ + --primary: #1890ff; + --primary-hover: #40a9ff; + --primary-active: #096dd9; + --primary-light: #e6f7ff; - /* 背景色 - 清爽白灰 */ - --bg-page: #f8fafc; - --bg-card: #ffffff; - --bg-section: #f1f5f9; - --bg-input: #ffffff; + /* 背景色 */ + --bg-body: #f0f2f5; + --bg-container: #ffffff; + --bg-sidebar: #001529; + --bg-header: #ffffff; - /* 文字色 - 清晰层级 */ - --text-primary: #0f172a; - --text-secondary: #64748b; - --text-tertiary: #94a3b8; - --text-disabled: #cbd5e1; + /* 文字色 */ + --text-primary: #262626; + --text-secondary: #595959; + --text-tertiary: #8c8c8c; + --text-light: rgba(255, 255, 255, 0.85); /* 边框色 */ - --border-light: #e2e8f0; - --border-normal: #cbd5e1; - --border-dark: #94a3b8; - - /* 功能色 */ - --success: #10b981; - --warning: #f59e0b; - --danger: #ef4444; + --border: #d9d9d9; + --border-light: #e8e8e8; + --border-lighter: #f0f0f0; /* 间距 */ - --spacing-xs: 8px; - --spacing-sm: 12px; + --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; - --spacing-xl: 32px; - /* 圆角 */ - --radius-sm: 6px; - --radius-md: 8px; - --radius-lg: 12px; + /* 阴影 */ + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); } -/* 全局容器 */ -.template { - max-width: 1400px; - margin: 0 auto; - padding: var(--spacing-lg); - background: var(--bg-page); -} +/* ============================================ + 全局样式 + ============================================ */ -/* 隐藏加载时的闪烁 */ [v-cloak] { display: none; } -/* ============================================ - 卡片样式 - ============================================ */ - -.theme-card { - background: var(--bg-card); - border: 1px solid var(--border-light); - border-radius: var(--radius-md); - margin-bottom: var(--spacing-lg); - overflow: hidden; +body { + margin: 0; + padding: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + font-size: 14px; + color: var(--text-primary); + background: var(--bg-body); } -/* 卡片标题 */ -.theme-card .t-card__title { +/* ============================================ + 主容器 + ============================================ */ + +.admin-container { + min-height: 100vh; + display: flex; + flex-direction: column; +} + +/* ============================================ + 顶部工具栏 + ============================================ */ + +.admin-header { + height: 60px; + background: var(--bg-header); + border-bottom: 1px solid var(--border-light); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--spacing-lg); + position: sticky; + top: 0; + z-index: 100; + box-shadow: var(--shadow-sm); +} + +.admin-header__left { + display: flex; + align-items: center; +} + +.admin-logo { + display: flex; + align-items: center; + gap: 12px; font-size: 16px; font-weight: 600; color: var(--text-primary); - padding: 20px var(--spacing-lg); - border-bottom: 1px solid var(--bg-section); - background: var(--bg-card); } -/* 卡片内容 */ -.theme-card .t-card__body { +.admin-logo svg { + color: var(--primary); +} + +.admin-header__right { + display: flex; + align-items: center; + gap: 12px; +} + +/* ============================================ + 主体布局 + ============================================ */ + +.admin-layout { + display: flex; + flex: 1; + overflow: hidden; +} + +/* ============================================ + 侧边栏 + ============================================ */ + +.admin-sidebar { + width: 220px; + background: var(--bg-sidebar); + overflow-y: auto; + flex-shrink: 0; +} + +.sidebar-nav { + padding: var(--spacing-md) 0; +} + +.nav-item { + display: flex; + align-items: center; + gap: 12px; + padding: 12px var(--spacing-lg); + color: var(--text-light); + text-decoration: none; + transition: all 0.3s; + cursor: pointer; + border-left: 3px solid transparent; +} + +.nav-item svg { + flex-shrink: 0; + opacity: 0.7; +} + +.nav-item:hover { + background: rgba(255, 255, 255, 0.08); + color: #ffffff; +} + +.nav-item:hover svg { + opacity: 1; +} + +.nav-item.active { + background: var(--primary); + border-left-color: #ffffff; + color: #ffffff; +} + +.nav-item.active svg { + opacity: 1; +} + +/* ============================================ + 主内容区 + ============================================ */ + +.admin-main { + flex: 1; + overflow-y: auto; + padding: var(--spacing-lg); +} + +.config-section { + display: none; +} + +.config-section.active { + display: block; +} + +/* ============================================ + 区块卡片 + ============================================ */ + +.section-card { + background: var(--bg-container); + border-radius: 8px; + margin-bottom: 20px; + border: 1px solid var(--border-lighter); + overflow: hidden; +} + +.section-header { + padding: 20px var(--spacing-lg); + border-bottom: 1px solid var(--border-lighter); +} + +.section-header h2 { + margin: 0 0 4px 0; + font-size: 16px; + font-weight: 600; + color: var(--text-primary); + display: flex; + align-items: center; + gap: 8px; +} + +.section-header h2 svg { + color: var(--primary); + flex-shrink: 0; +} + +.section-desc { + margin: 0; + font-size: 13px; + color: var(--text-tertiary); +} + +.section-body { padding: var(--spacing-lg); } @@ -89,386 +231,397 @@ 表单样式 ============================================ */ -/* 表单网格布局 */ -.form-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: var(--spacing-lg) 20px; - padding: 4px 0; +.form-group { + margin-bottom: var(--spacing-lg); } -/* 表单项 */ -.form-item { - display: flex; - flex-direction: column; +.form-group:last-child { + margin-bottom: 0; } -.form-item--full { - grid-column: 1 / -1; -} - -/* 标签样式 */ -.form-item label { +.form-group label { + display: block; + margin-bottom: 8px; font-size: 14px; font-weight: 500; - color: var(--text-secondary); - margin-bottom: var(--spacing-xs); - line-height: 1.5; + color: var(--text-primary); } -/* Switch 开关布局 */ -.form-item--switch { - flex-direction: row; - align-items: center; - justify-content: space-between; - padding: var(--spacing-sm) var(--spacing-md); - background: var(--bg-section); - border-radius: var(--radius-sm); - border: 1px solid var(--border-light); +.form-group label .required { + color: #ff4d4f; + margin-left: 4px; } -.form-item--switch label { - margin-bottom: 0; - font-size: 14px; -} - -/* ============================================ - 输入框样式 - ============================================ */ - -.t-input, -.t-textarea { - border-radius: var(--radius-sm); - border: 1px solid var(--border-light); - transition: all 0.2s; -} - -.t-input:focus-within, -.t-textarea:focus-within { - border-color: var(--primary-color); - box-shadow: 0 0 0 3px var(--primary-light); -} - -/* ============================================ - 提示文本 - ============================================ */ - -.theme-tip { - margin: 0 0 var(--spacing-md); - padding: var(--spacing-sm) var(--spacing-md); - background: var(--primary-light); - border-left: 3px solid var(--primary-color); - border-radius: var(--radius-sm); - color: var(--text-secondary); - font-size: 13px; - line-height: 1.6; -} - -.theme-tip code { - padding: 2px var(--spacing-xs); - background: rgba(37, 99, 235, 0.1); +.form-control { + width: 100%; + height: 40px; + padding: 0 12px; + border: 1px solid var(--border); border-radius: 4px; - color: var(--primary-color); - font-family: 'Consolas', 'Monaco', 'Courier New', monospace; + font-size: 14px; + transition: all 0.3s; + background: var(--bg-container); +} + +.form-control:hover { + border-color: var(--primary); +} + +.form-control:focus { + border-color: var(--primary); + box-shadow: 0 0 0 2px var(--primary-light); + outline: none; +} + +.form-hint { + margin-top: 4px; font-size: 12px; + color: var(--text-tertiary); } /* ============================================ - JSON 编辑器 + 上传控件 ============================================ */ -.theme-textarea textarea { - font-family: 'Consolas', 'Monaco', 'Courier New', monospace; +.upload-control { + display: flex; + gap: var(--spacing-sm); +} + +.upload-control .t-input { + flex: 1; +} + +/* ============================================ + 按钮样式 + ============================================ */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 0 16px; + height: 36px; + font-size: 14px; + font-weight: 500; + border-radius: 4px; + border: 1px solid transparent; + cursor: pointer; + transition: all 0.3s; + background: transparent; +} + +.btn:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.btn svg { + flex-shrink: 0; +} + +/* 主按钮 */ +.btn-primary { + background: var(--primary); + color: #ffffff; + border-color: var(--primary); +} + +.btn-primary:hover:not(:disabled) { + background: var(--primary-hover); + border-color: var(--primary-hover); +} + +.btn-primary:active:not(:disabled) { + background: var(--primary-active); + border-color: var(--primary-active); +} + +/* 次要按钮 */ +.btn-secondary { + background: var(--bg-container); + color: var(--text-primary); + border-color: var(--border); +} + +.btn-secondary:hover:not(:disabled) { + color: var(--primary); + border-color: var(--primary); +} + +/* 危险按钮 */ +.btn-danger { + background: var(--bg-container); + color: #ff4d4f; + border-color: var(--border); +} + +.btn-danger:hover:not(:disabled) { + color: #ffffff; + background: #ff4d4f; + border-color: #ff4d4f; +} + +/* 大按钮 */ +.btn-lg { + height: 40px; + padding: 0 24px; + font-size: 15px; +} + +/* 小按钮 */ +.btn-sm { + height: 28px; + padding: 0 12px; font-size: 13px; - line-height: 1.6; - padding: var(--spacing-md) !important; - background: #1e293b; - color: #e2e8f0; - border: 1px solid #334155; - border-radius: var(--radius-sm); } -.theme-textarea textarea:focus { - background: #1e293b; - border-color: var(--primary-color); - box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); +/* 图标按钮 */ +.btn-icon { + width: 28px; + height: 28px; + padding: 0; + border: none; + background: transparent; + color: var(--text-secondary); + cursor: pointer; + border-radius: 4px; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 16px; + transition: all 0.3s; +} + +.btn-icon:hover { + background: var(--primary-light); + color: var(--primary); +} + +.btn-icon-danger:hover { + background: #fff1f0; + color: #ff4d4f; } /* ============================================ - 配置项卡片 (轮播、荣誉等) + 配置项列表 ============================================ */ -.banner-item, +.config-list { + display: flex; + flex-direction: column; + gap: var(--spacing-md); +} + .config-item { border: 1px solid var(--border-light); - border-radius: var(--radius-md); - padding: var(--spacing-lg); - margin-bottom: var(--spacing-lg); - background: var(--bg-card); + border-radius: 6px; + overflow: hidden; } -/* 配置项头部 */ -.banner-item__header, .config-item__header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: var(--spacing-md); - padding-bottom: var(--spacing-sm); - border-bottom: 1px solid var(--bg-section); + padding: 12px var(--spacing-md); + background: #fafafa; + border-bottom: 1px solid var(--border-light); } -.banner-item__header h4, -.config-item__header h4 { - margin: 0; - font-size: 16px; - font-weight: 600; +.config-item__title { + font-size: 14px; + font-weight: 500; color: var(--text-primary); } -/* ============================================ - 子标题 - ============================================ */ +.config-item__actions { + display: flex; + gap: 4px; +} -.sub-title { - margin: var(--spacing-xl) 0 var(--spacing-md); - padding-left: var(--spacing-sm); - font-size: 15px; - font-weight: 600; - color: var(--text-primary); - border-left: 3px solid var(--primary-color); +.config-item__body { + padding: var(--spacing-md); +} + +/* 添加按钮 */ +.btn-add-item { + width: 100%; + height: 48px; + border: 2px dashed var(--border); + background: #fafafa; + border-radius: 6px; + color: var(--text-tertiary); + font-size: 14px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + transition: all 0.3s; +} + +.btn-add-item:hover { + border-color: var(--primary); + color: var(--primary); + background: var(--primary-light); +} + +.btn-add-item svg { + font-size: 20px; } /* ============================================ 空状态 ============================================ */ -.empty-tip { - padding: var(--spacing-xl) var(--spacing-lg); - border: 2px dashed var(--border-normal); - border-radius: var(--radius-md); - color: var(--text-tertiary); - margin-bottom: var(--spacing-lg); - background: var(--bg-section); +.empty-state { + padding: 60px 20px; text-align: center; + color: var(--text-tertiary); +} + +.empty-state svg { + width: 64px; + height: 64px; + opacity: 0.3; + margin-bottom: 16px; +} + +.empty-state p { + margin: 0; font-size: 14px; +} + +/* ============================================ + 提示框 + ============================================ */ + +.alert { + padding: 12px 16px; + border-radius: 4px; + margin-bottom: var(--spacing-md); + font-size: 13px; line-height: 1.6; } -/* ============================================ - 上传行 - ============================================ */ - -.upload-row { - display: flex; - align-items: center; - gap: var(--spacing-sm); -} - -.upload-row .t-input { - flex: 1; -} - -.upload-row .t-button { - flex-shrink: 0; -} - -/* ============================================ - 底部操作栏 - ============================================ */ - -.action-bar { - display: flex; - justify-content: flex-end; - align-items: center; - gap: var(--spacing-sm); - margin-top: var(--spacing-xl); - padding: var(--spacing-md) var(--spacing-lg); - background: var(--bg-card); - border-radius: var(--radius-md); - border: 1px solid var(--border-light); - position: sticky; - bottom: 20px; - z-index: 100; -} - -/* 按钮样式 */ -.action-bar .t-button { - min-width: 120px; - font-weight: 500; - transition: all 0.2s; -} - -.action-bar .t-button--primary { - background: var(--primary-color); - border-color: var(--primary-color); -} - -.action-bar .t-button--primary:hover { - background: var(--primary-hover); - border-color: var(--primary-hover); -} - -/* ============================================ - Tab 标签页 - ============================================ */ - -.t-tabs__nav { - background: var(--bg-card); - border-bottom: 1px solid var(--border-light); - padding: 0; - margin-bottom: var(--spacing-lg); -} - -.t-tab { - font-weight: 500; - font-size: 14px; - color: var(--text-secondary); - padding: var(--spacing-sm) var(--spacing-md); - transition: all 0.2s; -} - -.t-tab:hover { - color: var(--primary-color); +.alert-info { background: var(--primary-light); + border-left: 3px solid var(--primary); + color: var(--text-secondary); } -.t-tab.t-is-active { - color: var(--primary-color) !important; - background: var(--primary-light) !important; - border-bottom: 2px solid var(--primary-color) !important; +.alert code { + padding: 2px 6px; + background: rgba(24, 144, 255, 0.1); + border-radius: 3px; + color: var(--primary); + font-family: 'Consolas', 'Monaco', monospace; + font-size: 12px; } /* ============================================ - 工具类 + Switch开关 ============================================ */ -.mt-10 { - margin-top: var(--spacing-md); -} - -.ml-10 { - margin-left: var(--spacing-sm); -} - -.mb-10 { +.form-switch { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px var(--spacing-md); + background: #fafafa; + border-radius: 6px; + border: 1px solid var(--border-light); margin-bottom: var(--spacing-md); } +.form-switch label { + margin: 0; + font-size: 14px; + font-weight: 400; +} + +/* ============================================ + JSON编辑器 + ============================================ */ + +.json-editor textarea { + font-family: 'Consolas', 'Monaco', 'Courier New', monospace; + font-size: 13px; + line-height: 1.6; + padding: 16px !important; + background: #1e1e1e; + color: #d4d4d4; + border: 1px solid #3c3c3c; + border-radius: 4px; + min-height: 400px; +} + +.json-editor textarea:focus { + border-color: var(--primary); + box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.15); +} + /* ============================================ 响应式 ============================================ */ +@media (max-width: 1024px) { + .admin-sidebar { + width: 180px; + } +} + @media (max-width: 768px) { - .template { - padding: var(--spacing-sm); + .admin-sidebar { + position: fixed; + left: -220px; + top: 60px; + bottom: 0; + z-index: 99; + transition: left 0.3s; } - .form-grid { - grid-template-columns: 1fr; - gap: var(--spacing-md); + .admin-sidebar.is-open { + left: 0; } - .banner-item, - .config-item { + .admin-main { padding: var(--spacing-md); } - .action-bar { - flex-direction: column; - gap: var(--spacing-sm); - position: relative; - bottom: 0; - } - - .action-bar .t-button { - width: 100%; - } - - .form-item--switch { - flex-direction: column; - align-items: flex-start; - gap: var(--spacing-sm); + .section-body { + padding: var(--spacing-md); } } /* ============================================ - 滚动条美化 (保持简洁) + TDesign组件覆盖 ============================================ */ -::-webkit-scrollbar { - width: 8px; - height: 8px; +.t-input, +.t-textarea, +.t-select { + border-radius: 4px !important; } -::-webkit-scrollbar-track { - background: var(--bg-section); +.t-input:hover, +.t-textarea:hover { + border-color: var(--primary) !important; } -::-webkit-scrollbar-thumb { - background: var(--border-normal); - border-radius: 4px; +.t-input:focus-within, +.t-textarea:focus-within { + border-color: var(--primary) !important; + box-shadow: 0 0 0 2px var(--primary-light) !important; } -::-webkit-scrollbar-thumb:hover { - background: var(--border-dark); +.t-button--primary { + background: var(--primary) !important; + border-color: var(--primary) !important; } -/* ============================================ - 按钮状态 - ============================================ */ - -.t-button--loading { - opacity: 0.6; - cursor: not-allowed; - pointer-events: none; -} - -.t-button--danger:hover { - background: #dc2626; - border-color: #dc2626; -} - -/* ============================================ - 表单验证提示 - ============================================ */ - -.form-error { - color: var(--danger); - font-size: 13px; - margin-top: var(--spacing-xs); - font-weight: 400; -} - -/* ============================================ - 成功提示 - ============================================ */ - -.success-indicator { - display: inline-flex; - align-items: center; - gap: var(--spacing-xs); - padding: 6px var(--spacing-sm); - background: var(--success); - color: white; - border-radius: 20px; - font-size: 13px; - font-weight: 500; -} - -/* ============================================ - 其他优化 - ============================================ */ - -/* 移除emoji标记,使用纯文本 */ -.form-item label::before, -.banner-item__header h4::before, -.config-item__header h4::before, -.empty-tip::before { - display: none; -} - -/* Switch 图标简化 */ -.switch-label-icon { - display: none; +.t-button--primary:hover { + background: var(--primary-hover) !important; + border-color: var(--primary-hover) !important; } \ No newline at end of file