插件UI
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
yiqiu
2025-12-28 14:04:05 +08:00
parent feddfc2e64
commit 4c8fb130ba
2 changed files with 192 additions and 282 deletions

View File

@@ -3,75 +3,76 @@
<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 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>
<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>
</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>
<!-- Tab导航 -->
<nav class="admin-tabs">
<a class="tab-item" :class="{active: activeSection === 'basic'}" @click.prevent="activeSection = 'basic'">
<svg 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>
基础配置
</a>
<a class="tab-item" :class="{active: activeSection === 'seo'}" @click.prevent="activeSection = '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" :class="{active: activeSection === 'home'}" @click.prevent="activeSection = 'home'">
<svg 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>
首页内容
</a>
<a class="tab-item" :class="{active: activeSection === 'nav'}" @click.prevent="activeSection = 'nav'">
<svg 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>
导航配置
</a>
<a class="tab-item" :class="{active: activeSection === 'footer'}" @click.prevent="activeSection = 'footer'">
<svg viewBox="0 0 24 24" fill="none">
<rect x="3" y="17" width="18" height="4" stroke="currentColor" stroke-width="2"/>
<line x1="3" y1="3" x2="21" y2="3" stroke="currentColor" stroke-width="2"/>
<line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"/>
</svg>
底部/链接
</a>
<a class="tab-item" :class="{active: activeSection === 'advanced'}" @click.prevent="activeSection = 'advanced'" v-if="showAdvanced">
<svg 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>
高级设置
</a>
</nav>
<!-- 主内容区 -->
<main class="admin-main">
<!-- 主内容区 -->
<main class="admin-main">
<section id="basic" class="config-section" :class="{active: activeSection === 'basic'}">
@@ -600,7 +601,7 @@
<t-button class="ml-10" variant="outline" @click="toggleAdvanced">
{{ showAdvanced ? "隐藏高级 JSON" : "显示高级 JSON" }}
</t-button>
</div>
</main>
</div>
<script src="/plugins/addon/theme_configurator/template/admin/lang/index.js"> </main>