yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增主题配置管理页面，支持企业信息、侧边浮窗、反馈类型、SEO和首页轮播设置，并更新了样式。
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2025-12-28 13:57:10 +08:00
parent dbe2090549
commit feddfc2e64
5 changed files with 2800 additions and 440 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
plugins/addon/theme_configurator/template/admin/index.html
View File

@@ -1,10 +1,86 @@
<link rel="stylesheet" href="/plugins/addon/theme_configurator/template/admin/theme.css" />
<div id="theme-config-app" class="template" v-cloak>
<t-tabs v-model="activeTab" placement="top">
<t-tab-panel value="basic" label="基础信息">
<t-card class="theme-card" title="企业信息" bordered>
<div class="form-grid">
<div id="theme-config-app" class="admin-container" v-cloak>
<!-- 顶部工具栏 -->
<header class="admin-header">
<div class="admin-header__left">
<div class="admin-logo">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>黑果云模板控制器</span>
</div>
</div>
<div class="admin-header__right">
<button class="btn btn-primary btn-lg" @click="saveConfig" :disabled="saving">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" v-if="!saving">
<path d="M13.5 2.5H2.5V13.5H13.5V2.5Z" stroke="currentColor" stroke-width="1.5"/>
<path d="M10.5 2.5V6.5H5.5V2.5" stroke="currentColor" stroke-width="1.5"/>
<path d="M5.5 9.5H10.5V13.5H5.5V9.5Z" stroke="currentColor" stroke-width="1.5"/>
</svg>
<span v-if="saving">保存中...</span>
<span v-else>保存全部配置</span>
</button>
</div>
</header>
<!-- 主体布局 -->
<div class="admin-layout">
<!-- 侧边栏导航 -->
<aside class="admin-sidebar">
<nav class="sidebar-nav">
<a href="#basic" class="nav-item" :class="{active: activeSection === 'basic'}" @click="activeSection = 'basic'">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
<line x1="3" y1="9" x2="21" y2="9" stroke="currentColor" stroke-width="2"/>
<line x1="9" y1="21" x2="9" y2="9" stroke="currentColor" stroke-width="2"/>
</svg>
<span>基础配置</span>
</a>
<a href="#seo" class="nav-item" :class="{active: activeSection === 'seo'}" @click="activeSection = 'seo'">
<svg width="18" height="18" 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>
<span>SEO设置</span>
</a>
<a href="#home" class="nav-item" :class="{active: activeSection === 'home'}" @click="activeSection = 'home'">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="currentColor" stroke-width="2"/>
</svg>
<span>首页内容</span>
</a>
<a href="#nav" class="nav-item" :class="{active: activeSection === 'nav'}" @click="activeSection = 'nav'">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<line x1="3" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="3" y1="6" x2="21" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<line x1="3" y1="18" x2="21" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<span>导航配置</span>
</a>
<a href="#advanced" class="nav-item" :class="{active: activeSection === 'advanced'}" @click="activeSection = 'advanced'">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
<path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<span>高级设置</span>
</a>
</nav>
</aside>
<!-- 主内容区 -->
<main class="admin-main">
<section id="basic" class="config-section" :class="{active: activeSection === 'basic'}">
<div class="section-card">
<div class="section-header">
<h2>企业信息</h2>
</div>
<div class="section-body">
<div class="form-fields">
<div class="form-item">
<label>企业名称</label>
<t-input v-model="fullConfig.site_config.enterprise_name" placeholder="主题云"></t-input>
@@ -17,9 +93,9 @@
<label>联系邮箱</label>
<t-input v-model="fullConfig.site_config.enterprise_mailbox" placeholder="support@example.com"></t-input>
</div>
<div class="form-item form-item--full">
<div class="form-item form-item">
<label>Logo 地址</label>
<div class="upload-row">
<div class="upload-control">
<t-input v-model="fullConfig.site_config.official_website_logo" placeholder="/upload/logo.png"></t-input>
<t-upload theme="custom" :action="uploadUrl" :headers="uploadHeaders"
:format-response="uploadFormatResponse" :show-upload-progress="false" :max="1"
@@ -30,9 +106,9 @@
</t-upload>
</div>
</div>
<div class="form-item form-item--full">
<div class="form-item form-item">
<label>二维码地址</label>
<div class="upload-row">
<div class="upload-control">
<t-input v-model="fullConfig.site_config.enterprise_qrcode" placeholder="/upload/qrcode.png"></t-input>
<t-upload theme="custom" :action="uploadUrl" :headers="uploadHeaders"
:format-response="uploadFormatResponse" :show-upload-progress="false" :max="1"
@@ -86,19 +162,23 @@
<label>物理机/DCIM 链接</label>
<t-input v-model="fullConfig.site_config.dcim_product_link" placeholder="/cart/goods.htm?id=2"></t-input>
</div>
<div class="form-item form-item--full">
<div class="form-item form-item">
<label>版权信息</label>
<t-input v-model="fullConfig.site_config.copyright_info" placeholder="© 2025 主题云"></t-input>
</div>
</div>
</t-card>
</div>
<t-card class="theme-card" title="侧边浮窗" bordered>
<p class="theme-tip">
<div class="section-card">
<div class="section-header">
<h2>侧边浮窗</h2>
</div>
<div class="section-body">
<p class="alert alert-info">
对应前台右侧悬浮工具条（电话咨询/在线客服/提交工单等），结构与模板中的
<code>side_floating_window</code> 一致。
</p>
<div v-if="!fullConfig.side.length" class="empty-tip">
<div v-if="!fullConfig.side.length" class="empty-state">
还没有侧边浮窗，点击下方按钮添加。
</div>
<div class="config-item" v-for="(item, index) in fullConfig.side" :key="'side-' + index">
@@ -108,14 +188,14 @@
删除
</t-button>
</div>
<div class="form-grid">
<div class="form-fields">
<div class="form-item">
<label>名称</label>
<t-input v-model="item.name" placeholder="电话咨询"></t-input>
</div>
<div class="form-item form-item--full">
<div class="form-item form-item">
<label>图标地址</label>
<div class="upload-row">
<div class="upload-control">
<t-input v-model="item.icon" placeholder="/upload/side-phone.png"></t-input>
<t-upload theme="custom" :action="uploadUrl" :headers="uploadHeaders"
:format-response="uploadFormatResponse" :show-upload-progress="false" :max="1"
@@ -126,7 +206,7 @@
</t-upload>
</div>
</div>
<div class="form-item form-item--full">
<div class="form-item form-item">
<label>内容（支持 HTML）</label>
<t-textarea v-model="item.content" :autosize="{ minRows: 2, maxRows: 4 }"
placeholder="<p>7x24 小时不间断服务</p>"></t-textarea>
@@ -134,13 +214,17 @@
</div>
</div>
<t-button theme="primary" variant="outline" @click="addSide">新增浮窗</t-button>
</t-card>
</div>
<t-card class="theme-card" title="反馈类型" bordered>
<p class="theme-tip">
<div class="section-card">
<div class="section-header">
<h2>反馈类型</h2>
</div>
<div class="section-body">
<p class="alert alert-info">
对应 <code>/console/v1/feedback</code> 的类型选项，ID 需与后端保持一致，仅建议修改名称与描述。
</p>
<div v-if="!fullConfig.feedback_type.length" class="empty-tip">
<div v-if="!fullConfig.feedback_type.length" class="empty-state">
还没有反馈类型，点击下方按钮添加。
</div>
<div class="config-item" v-for="(item, index) in fullConfig.feedback_type" :key="'feedback-' + index">
@@ -150,7 +234,7 @@
删除
</t-button>
</div>
<div class="form-grid">
<div class="form-fields">
<div class="form-item">
<label>类型 ID</label>
<t-input v-model="item.id" placeholder="1"></t-input>
@@ -159,19 +243,23 @@
<label>名称</label>
<t-input v-model="item.name" placeholder="产品建议"></t-input>
</div>
<div class="form-item form-item--full">
<div class="form-item form-item">
<label>描述</label>
<t-input v-model="item.description" placeholder="用于产品体验、功能建议等"></t-input>
</div>
</div>
</div>
<t-button theme="primary" variant="outline" @click="addFeedbackType">新增反馈类型</t-button>
</t-card>
</t-tab-panel>
</div>
</section>
<t-tab-panel value="seo" label="SEO 管理">
<t-card class="theme-card" title="SEO 设置" bordered>
<div class="form-grid">
<section id="seo" class="config-section" :class="{active: activeSection === 'seo'}">
<div class="section-card">
<div class="section-header">
<h2>SEO 设置</h2>
</div>
<div class="section-body">
<div class="form-fields">
<div class="form-item">
<label>站点标题</label>
<t-input v-model="fullConfig.seo.title" placeholder="首页标题"></t-input>
@@ -180,18 +268,22 @@
<label>关键词</label>
<t-input v-model="fullConfig.seo.keywords" placeholder="关键词，逗号分隔"></t-input>
</div>
<div class="form-item form-item--full">
<div class="form-item form-item">
<label>描述</label>
<t-textarea v-model="fullConfig.seo.description" :autosize="{ minRows: 2, maxRows: 4 }"
placeholder="站点描述"></t-textarea>
</div>
</div>
</t-card>
</t-tab-panel>
</div>
</section>
<t-tab-panel value="home" label="首页内容">
<t-card class="theme-card" title="首页轮播文案" bordered>
<div v-if="!bannerList.length" class="empty-tip">
<section id="home" class="config-section" :class="{active: activeSection === 'home'}">
<div class="section-card">
<div class="section-header">
<h2>首页轮播文案</h2>
</div>
<div class="section-body">
<div v-if="!bannerList.length" class="empty-state">
还没有轮播文案，点击下方按钮添加。
</div>
<div class="banner-item" v-for="(banner, index) in bannerList" :key="index">
@@ -201,14 +293,14 @@
删除
</t-button>
</div>
<div class="form-grid">
<div class="form-fields">
<div class="form-item">
<label>标题</label>
<t-input v-model="banner.title" placeholder="如：弹性算力"></t-input>
</div>
<div class="form-item form-item--full">
<div class="form-item form-item">
<label>图片地址</label>
<div class="upload-row">
<div class="upload-control">
<t-input v-model="banner.img" placeholder="/upload/banner-1.png"></t-input>
<t-upload theme="custom" :action="uploadUrl" :headers="uploadHeaders"
:format-response="uploadFormatResponse" :show-upload-progress="false" :max="1"
@@ -223,7 +315,7 @@
<label>描述</label>
<t-input v-model="banner.description" placeholder="一句宣传语"></t-input>
</div>
<div class="form-item form-item--full">
<div class="form-item form-item">
<label>标签</label>
<t-input v-model="banner.tags" placeholder="如：高速,低价,安全（多个标签用逗号分隔）"></t-input>
</div>
@@ -231,7 +323,7 @@
<label>跳转链接</label>
<t-input v-model="banner.url" placeholder="/cloud.html"></t-input>
</div>
<div class="form-item form-item--switch">
<div class="form-item form-switch">
<label><span class="switch-label-icon">🔗</span>新窗口</label>
<t-switch size="large" v-model="banner.blank"></t-switch>
</div>
@@ -243,17 +335,21 @@
<label>按钮链接</label>
<t-input v-model="banner.button_link" placeholder="/cloud.html"></t-input>
</div>
<div class="form-item form-item--switch">
<div class="form-item form-switch">
<label><span class="switch-label-icon">🔗</span>按钮新窗口</label>
<t-switch size="large" v-model="banner.button_blank"></t-switch>
</div>
</div>
</div>
<t-button theme="primary" variant="outline" @click="addBanner">新增轮播</t-button>
</t-card>
</div>
<t-card class="theme-card" title="企业资质与荣誉" bordered>
<div v-if="!fullConfig.honor.length" class="empty-tip">
<div class="section-card">
<div class="section-header">
<h2>企业资质与荣誉</h2>
</div>
<div class="section-body">
<div v-if="!fullConfig.honor.length" class="empty-state">
用于首页"荣誉资质"模块（honor）。
</div>
<div class="config-item" v-for="(item, index) in fullConfig.honor" :key="'honor-' + index">
@@ -263,14 +359,14 @@
删除
</t-button>
</div>
<div class="form-grid">
<div class="form-fields">
<div class="form-item">
<label>名称</label>
<t-input v-model="item.name" placeholder="高新技术企业"></t-input>
</div>
<div class="form-item form-item--full">
<div class="form-item form-item">
<label>图片地址</label>
<div class="upload-row">
<div class="upload-control">
<t-input v-model="item.img" placeholder="/upload/honor.png"></t-input>
<t-upload theme="custom" :action="uploadUrl" :headers="uploadHeaders"
:format-response="uploadFormatResponse" :show-upload-progress="false" :max="1"
@@ -284,24 +380,28 @@
</div>
</div>
<t-button theme="primary" variant="outline" @click="addHonor">新增荣誉</t-button>
</t-card>
</div>
</t-tab-panel>
</section>
<t-tab-panel value="nav" label="导航配置">
<t-card class="theme-card" title="顶部导航（header_nav）" bordered>
<p class="theme-tip">
<section id="nav" class="config-section" :class="{active: activeSection === 'nav'}">
<div class="section-card">
<div class="section-header">
<h2>顶部导航（header_nav）</h2>
</div>
<div class="section-body">
<p class="alert alert-info">
控制站点顶部导航栏及其下拉菜单结构。第一个导航项用作 Logo 点击跳转地址。
</p>
<div class="form-grid">
<div class="form-item form-item--full">
<div class="form-fields">
<div class="form-item form-item">
<label>Logo 点击跳转地址</label>
<t-input v-model="homeNav.file_address" placeholder="index.html 或 /index.html"></t-input>
</div>
</div>
<h4 class="sub-title mt-10">一级导航</h4>
<div v-if="headerNavList.length <= 1" class="empty-tip">
<div v-if="headerNavList.length <= 1" class="empty-state">
还没有自定义导航，请点击下方按钮新增。
</div>
<div class="config-item" v-for="(item, index) in headerNavList" :key="'nav-' + index" v-if="index > 0">
@@ -311,7 +411,7 @@
删除
</t-button>
</div>
<div class="form-grid">
<div class="form-fields">
<div class="form-item">
<label>名称</label>
<t-input v-model="item.name" placeholder="如：产品"></t-input>
@@ -320,14 +420,14 @@
<label>点击链接（可选）</label>
<t-input v-model="item.file_address" placeholder="/cloud.html"></t-input>
</div>
<div class="form-item form-item--switch">
<div class="form-item form-switch">
<label><span class="switch-label-icon">🔗</span>新窗口</label>
<t-switch v-model="item.blank"></t-switch>
</div>
</div>
<h4 class="sub-title mt-10">下拉子菜单</h4>
<div v-if="!getHeaderChildren(item).length" class="empty-tip">
<div v-if="!getHeaderChildren(item).length" class="empty-state">
还没有子菜单，点击下方按钮新增。
</div>
<div class="config-item" v-for="(child, cIndex) in getHeaderChildren(item)"
@@ -338,7 +438,7 @@
删除
</t-button>
</div>
<div class="form-grid">
<div class="form-fields">
<div class="form-item">
<label>名称</label>
<t-input v-model="child.name" placeholder="如：云服务器"></t-input>
@@ -347,13 +447,13 @@
<label>链接地址</label>
<t-input v-model="child.file_address" placeholder="/cloud.html"></t-input>
</div>
<div class="form-item form-item--switch">
<div class="form-item form-switch">
<label><span class="switch-label-icon">🔗</span>新窗口</label>
<t-switch v-model="child.blank"></t-switch>
</div>
<div class="form-item form-item--full">
<div class="form-item form-item">
<label>图标地址</label>
<div class="upload-row">
<div class="upload-control">
<t-input v-model="child.icon" placeholder="/upload/nav-icon.png"></t-input>
<t-upload theme="custom" :action="uploadUrl" :headers="uploadHeaders"
:format-response="uploadFormatResponse" :show-upload-progress="false" :max="1" @success="
@@ -365,7 +465,7 @@
</t-upload>
</div>
</div>
<div class="form-item form-item--full">
<div class="form-item form-item">
<label>描述</label>
<t-textarea v-model="child.description" :autosize="{ minRows: 2, maxRows: 3 }"
placeholder="如：高可用的弹性计算服务"></t-textarea>
@@ -379,16 +479,20 @@
<t-button class="mt-10" theme="primary" variant="outline" @click="addHeaderNav">
新增一级导航
</t-button>
</t-card>
</t-tab-panel>
</div>
</section>
<t-tab-panel value="footer" label="底部栏目">
<t-card class="theme-card" title="底部栏目（footer_nav）" bordered>
<p class="theme-tip">
<section id="footer" class="config-section" :class="{active: activeSection === 'footer'}">
<div class="section-card">
<div class="section-header">
<h2>底部栏目（footer_nav）</h2>
</div>
<div class="section-body">
<p class="alert alert-info">
控制首页底部多列链接（如【热门产品】【客户支持】等），结构与模板中的
<code>footer_nav</code> 一致。
</p>
<div v-if="!footerNavList.length" class="empty-tip">
<div v-if="!footerNavList.length" class="empty-state">
还没有底部栏目，点击下方按钮新增。
</div>
<div class="config-item" v-for="(group, index) in footerNavList" :key="'footer-' + index">
@@ -398,14 +502,14 @@
删除
</t-button>
</div>
<div class="form-grid">
<div class="form-fields">
<div class="form-item">
<label>栏目标题</label>
<t-input v-model="group.name" placeholder="如：热门产品"></t-input>
</div>
</div>
<h4 class="sub-title mt-10">栏目链接</h4>
<div v-if="!getFooterChildren(group).length" class="empty-tip">
<div v-if="!getFooterChildren(group).length" class="empty-state">
还没有链接，点击下方按钮新增。
</div>
<div class="config-item" v-for="(link, cIndex) in getFooterChildren(group)"
@@ -416,7 +520,7 @@
删除
</t-button>
</div>
<div class="form-grid">
<div class="form-fields">
<div class="form-item">
<label>名称</label>
<t-input v-model="link.name" placeholder="如：云服务器"></t-input>
@@ -425,7 +529,7 @@
<label>链接地址</label>
<t-input v-model="link.url" placeholder="/cloud.html"></t-input>
</div>
<div class="form-item form-item--switch">
<div class="form-item form-switch">
<label><span class="switch-label-icon">🔗</span>新窗口</label>
<t-switch v-model="link.blank"></t-switch>
</div>
@@ -438,10 +542,14 @@
<t-button class="mt-10" theme="primary" variant="outline" @click="addFooterNav">
新增栏目
</t-button>
</t-card>
</div>
<t-card class="theme-card" title="友情链接" bordered>
<div v-if="!fullConfig.friendly_link.length" class="empty-tip">
<div class="section-card">
<div class="section-header">
<h2>友情链接</h2>
</div>
<div class="section-body">
<div v-if="!fullConfig.friendly_link.length" class="empty-state">
还没有友情链接，点击下方按钮添加。
</div>
<div class="config-item" v-for="(item, index) in fullConfig.friendly_link" :key="index">
@@ -451,33 +559,37 @@
删除
</t-button>
</div>
<div class="form-grid">
<div class="form-fields">
<div class="form-item">
<label>名称</label>
<t-input v-model="item.name" placeholder="合作伙伴名称"></t-input>
</div>
<div class="form-item form-item--full">
<div class="form-item form-item">
<label>链接地址</label>
<t-input v-model="item.url" placeholder="https://example.com"></t-input>
</div>
</div>
</div>
<t-button theme="primary" variant="outline" @click="addFriendlyLink">新增友情链接</t-button>
</t-card>
</t-tab-panel>
</div>
</section>
<t-tab-panel v-if="showAdvanced" value="advanced" label="高级设置(JSON)">
<t-card class="theme-card" title="高级配置 (JSON)" bordered>
<p class="theme-tip">
<div class="section-card">
<div class="section-header">
<h2>高级配置 (JSON)</h2>
</div>
<div class="section-body">
<p class="alert alert-info">
用于暂未在 UI 中开放的配置项（如复杂导航结构 header_nav/footer_nav 等）。如非必要，建议优先使用上方表单编辑。
</p>
<t-textarea v-model="advancedText" :autosize="{ minRows: 14 }" class="theme-textarea"></t-textarea>
<t-textarea v-model="advancedText" :autosize="{ minRows: 14 }" class="json-editor"></t-textarea>
<div class="mt-10">
<t-button variant="outline" @click="syncJson">同步当前配置</t-button>
<t-button class="ml-10" @click="applyAdvanced">应用 JSON</t-button>
</div>
</t-card>
</t-tab-panel>
</div>
</section>
</t-tabs>
<div class="action-bar">
@@ -491,8 +603,16 @@
</div>
</div>
<script src="/plugins/addon/theme_configurator/template/admin/lang/index.js"></script>
<script src="/plugins/addon/theme_configurator/template/admin/js/axios.min.js"></script>
<script src="/plugins/addon/theme_configurator/template/admin/lang/index.js"> </main>
</div>
</div>
</script>
<script src="/plugins/addon/theme_configurator/template/admin/js/axios.min.js"> </main>
</div>
</div>
</script>
<script>
(function () {
const host = location.origin;
@@ -552,7 +672,7 @@
fullConfig: createDefaultConfig(),
advancedText: "",
showAdvanced: false,
activeTab: "basic",
activeSection: "basic",
uploadUrl: `${host}/${adminPath}/v1/upload`,
uploadHeaders: {
Authorization: "Bearer " + localStorage.getItem("backJwt"),
@@ -911,4 +1031,8 @@
},
});
})();
</main>
</div>
</div>
</script>