987 lines
38 KiB
Vue
987 lines
38 KiB
Vue
<template>
|
||
<div class="aksrt-page-container content-page">
|
||
<PageHeader title="页脚配置" desc="管理页脚区域的联系方式、快速链接、更多链接、友情链接和版权信息。">
|
||
<template #actions>
|
||
<n-button type="primary" :loading="saving" @click="handleSave">保存</n-button>
|
||
</template>
|
||
</PageHeader>
|
||
|
||
<n-spin :show="loading" style="width: 100%; min-height: 200px;">
|
||
<n-tabs
|
||
v-model:value="activeTab"
|
||
type="line"
|
||
animated
|
||
class="aksrt-tabs"
|
||
>
|
||
<!-- ============== 品牌与Logo ============== -->
|
||
<n-tab-pane name="brand" tab="品牌与Logo">
|
||
<n-card class="aksrt-section-card">
|
||
<div class="aksrt-section-header">
|
||
<span class="section-icon"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></span>
|
||
<h3>品牌列（第一列）</h3>
|
||
</div>
|
||
|
||
<n-form :model="form" label-placement="left" label-width="160" class="aksrt-form">
|
||
<n-form-item label="显示设备">
|
||
<n-checkbox-group v-model:value="form.footer_t1_m_s">
|
||
<n-space>
|
||
<n-checkbox value="pc" label="PC" />
|
||
<n-checkbox value="mobile" label="移动端" />
|
||
</n-space>
|
||
</n-checkbox-group>
|
||
</n-form-item>
|
||
<n-form-item label="页脚 Logo（日间）">
|
||
<div class="aksrt-media-row">
|
||
<n-input v-model:value="form.footer_t1_img" placeholder="图片 URL" readonly style="flex: 1;" />
|
||
<n-button size="small" @click="pickMedia('footer_t1_img')">选择</n-button>
|
||
<n-button size="small" quaternary type="error" :disabled="!form.footer_t1_img" @click="form.footer_t1_img = ''">清除</n-button>
|
||
</div>
|
||
<img v-if="form.footer_t1_img" :src="form.footer_t1_img" class="aksrt-media-preview" alt="footer logo day" />
|
||
</n-form-item>
|
||
<n-form-item label="页脚 Logo（夜间）">
|
||
<div class="aksrt-media-row">
|
||
<n-input v-model:value="form.footer_t1_img_dark" placeholder="图片 URL" readonly style="flex: 1;" />
|
||
<n-button size="small" @click="pickMedia('footer_t1_img_dark')">选择</n-button>
|
||
<n-button size="small" quaternary type="error" :disabled="!form.footer_t1_img_dark" @click="form.footer_t1_img_dark = ''">清除</n-button>
|
||
</div>
|
||
<img v-if="form.footer_t1_img_dark" :src="form.footer_t1_img_dark" class="aksrt-media-preview" alt="footer logo night" />
|
||
</n-form-item>
|
||
<n-form-item label="品牌标题">
|
||
<n-input v-model:value="form.footer_t1_t" placeholder="留空则使用站点名称" />
|
||
</n-form-item>
|
||
<n-form-item label="品牌列自定义代码">
|
||
<n-input v-model:value="form.fcode_t1_code" type="textarea" :rows="3" placeholder="可选，显示在品牌区域底部" />
|
||
</n-form-item>
|
||
</n-form>
|
||
</n-card>
|
||
</n-tab-pane>
|
||
|
||
<!-- ============== 联系方式 ============== -->
|
||
<n-tab-pane name="contacts" tab="联系方式">
|
||
<n-card class="aksrt-section-card">
|
||
<template #header>
|
||
<div class="aksrt-card-header-row">
|
||
<div class="aksrt-card-header-row__left">
|
||
<span class="header-icon"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg></span>
|
||
<strong class="aksrt-card-header-row__title">联系方式图标</strong>
|
||
</div>
|
||
<n-button type="primary" size="small" @click="addContact">+ 添加图标</n-button>
|
||
</div>
|
||
</template>
|
||
<p class="section-desc">页脚中的社交平台或联系入口。</p>
|
||
|
||
<n-data-table
|
||
v-if="form.contacts.length"
|
||
:columns="contactColumns"
|
||
:data="form.contacts"
|
||
:row-key="(row) => row._uid"
|
||
:bordered="false"
|
||
size="small"
|
||
/>
|
||
<n-empty v-else description="暂无联系方式图标" />
|
||
|
||
<n-divider>标准联系字段</n-divider>
|
||
<n-form :model="form" label-placement="left" label-width="160" class="aksrt-form">
|
||
<n-form-item label="显示设备">
|
||
<n-checkbox-group v-model:value="form.footer_contact_m_s">
|
||
<n-space>
|
||
<n-checkbox value="pc" label="PC" />
|
||
<n-checkbox value="mobile" label="移动端" />
|
||
</n-space>
|
||
</n-checkbox-group>
|
||
</n-form-item>
|
||
<n-form-item label="微信二维码">
|
||
<div class="aksrt-media-row">
|
||
<n-input v-model:value="form.footer_contact_wechat_img" placeholder="图片 URL" readonly style="flex: 1;" />
|
||
<n-button size="small" @click="pickMedia('footer_contact_wechat_img')">选择</n-button>
|
||
<n-button size="small" quaternary type="error" :disabled="!form.footer_contact_wechat_img" @click="form.footer_contact_wechat_img = ''">清除</n-button>
|
||
</div>
|
||
<img v-if="form.footer_contact_wechat_img" :src="form.footer_contact_wechat_img" class="aksrt-media-preview" alt="wechat qr" />
|
||
</n-form-item>
|
||
<n-form-item label="QQ">
|
||
<n-input v-model:value="form.footer_contact_qq" placeholder="QQ 号或链接" />
|
||
</n-form-item>
|
||
<n-form-item label="微博">
|
||
<n-input v-model:value="form.footer_contact_weibo" placeholder="微博链接" />
|
||
</n-form-item>
|
||
<n-form-item label="邮箱">
|
||
<n-input v-model:value="form.footer_contact_email" placeholder="邮箱地址" />
|
||
</n-form-item>
|
||
<n-form-item label="链接 HTML（fcode_t2_code_1）">
|
||
<n-input v-model:value="form.fcode_t2_code_1" type="textarea" :rows="3" placeholder="推荐直接写 <a href="/">首页</a> 等链接 HTML；为空时回退快速链接/友链/热门分类" />
|
||
</n-form-item>
|
||
<n-form-item label="链接下方自定义代码">
|
||
<n-input v-model:value="form.fcode_t2_code_2" type="textarea" :rows="2" placeholder="备案号等 HTML" />
|
||
</n-form-item>
|
||
</n-form>
|
||
|
||
<n-divider>更多联系项</n-divider>
|
||
<n-card class="aksrt-section-card" embedded>
|
||
<template #header>
|
||
<div class="aksrt-card-header-row">
|
||
<strong class="aksrt-card-header-row__title">扩展联系项</strong>
|
||
<n-button type="primary" size="small" @click="addContactMore">+ 添加</n-button>
|
||
</div>
|
||
</template>
|
||
<p class="section-desc">每项含描述、图标、链接、图片（hover 显示），用于补充标准联系方式。</p>
|
||
<n-data-table
|
||
v-if="form.footer_contact_more.length"
|
||
:columns="contactMoreColumns"
|
||
:data="form.footer_contact_more"
|
||
:row-key="(_, i) => i"
|
||
:bordered="false"
|
||
size="small"
|
||
/>
|
||
<n-empty v-else description="暂无扩展联系项" />
|
||
</n-card>
|
||
</n-card>
|
||
</n-tab-pane>
|
||
|
||
<!-- ============== 快速链接 ============== -->
|
||
<n-tab-pane name="quick" tab="快速链接">
|
||
<n-card class="aksrt-section-card">
|
||
<template #header>
|
||
<div class="aksrt-card-header-row">
|
||
<div class="aksrt-card-header-row__left">
|
||
<span class="header-icon"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span>
|
||
<strong class="aksrt-card-header-row__title">快速链接</strong>
|
||
</div>
|
||
<n-button type="primary" size="small" @click="openLinkEditor('quick_links')">+ 添加链接</n-button>
|
||
</div>
|
||
</template>
|
||
<p class="section-desc">页脚第二列的常用导航链接。</p>
|
||
|
||
<n-data-table
|
||
v-if="form.quick_links.length"
|
||
:columns="createLinkColumns('quick_links')"
|
||
:data="form.quick_links"
|
||
:row-key="(row) => row.id"
|
||
:bordered="false"
|
||
size="small"
|
||
/>
|
||
<n-empty v-else description="暂无快速链接" />
|
||
</n-card>
|
||
</n-tab-pane>
|
||
|
||
<!-- ============== 更多链接 ============== -->
|
||
<n-tab-pane name="more" tab="更多链接">
|
||
<n-card class="aksrt-section-card">
|
||
<template #header>
|
||
<div class="aksrt-card-header-row">
|
||
<div class="aksrt-card-header-row__left">
|
||
<span class="header-icon"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span>
|
||
<strong class="aksrt-card-header-row__title">更多链接</strong>
|
||
</div>
|
||
<n-button type="primary" size="small" @click="openLinkEditor('more_links')">+ 添加链接</n-button>
|
||
</div>
|
||
</template>
|
||
<p class="section-desc">页脚补充链接区域。</p>
|
||
|
||
<n-data-table
|
||
v-if="form.more_links.length"
|
||
:columns="createLinkColumns('more_links')"
|
||
:data="form.more_links"
|
||
:row-key="(row) => row.id"
|
||
:bordered="false"
|
||
size="small"
|
||
/>
|
||
<n-empty v-else description="暂无更多链接" />
|
||
</n-card>
|
||
</n-tab-pane>
|
||
|
||
<!-- ============== 友情链接 ============== -->
|
||
<n-tab-pane name="friends" tab="友情链接">
|
||
<n-card class="aksrt-section-card">
|
||
<template #header>
|
||
<div class="aksrt-card-header-row">
|
||
<div class="aksrt-card-header-row__left">
|
||
<span class="header-icon"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></span>
|
||
<strong class="aksrt-card-header-row__title">友情链接 ({{ friendLinks.length }})</strong>
|
||
</div>
|
||
<n-button type="primary" size="small" @click="openFriendEditor()">+ 添加友链</n-button>
|
||
</div>
|
||
</template>
|
||
<p class="section-desc">站点友情链接列表，支持 Logo 头像、名称、URL 与简短描述。</p>
|
||
|
||
<n-data-table
|
||
v-if="friendLinks.length"
|
||
:columns="friendColumns"
|
||
:data="friendLinks"
|
||
:row-key="(row) => row.id"
|
||
:bordered="false"
|
||
size="small"
|
||
/>
|
||
<n-empty v-else description="暂无友情链接" />
|
||
</n-card>
|
||
</n-tab-pane>
|
||
|
||
<!-- ============== 二维码图片组 ============== -->
|
||
<n-tab-pane name="mini_qr" tab="二维码图片组">
|
||
<n-card class="aksrt-section-card">
|
||
<template #header>
|
||
<div class="aksrt-card-header-row">
|
||
<div class="aksrt-card-header-row__left">
|
||
<span class="header-icon"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg></span>
|
||
<strong class="aksrt-card-header-row__title">二维码图片组（最多 4 个）</strong>
|
||
</div>
|
||
<n-button type="primary" size="small" :disabled="form.footer_mini_img.length >= 4" @click="addMiniImg">+ 添加</n-button>
|
||
</div>
|
||
</template>
|
||
<p class="section-desc">显示在页脚第三列区域，每项含文字描述和二维码图片。</p>
|
||
|
||
<n-form :model="form" label-placement="left" label-width="120" class="aksrt-form">
|
||
<n-form-item label="显示设备">
|
||
<n-checkbox-group v-model:value="form.footer_mini_img_m_s">
|
||
<n-space>
|
||
<n-checkbox value="pc" label="PC" />
|
||
<n-checkbox value="mobile" label="移动端" />
|
||
</n-space>
|
||
</n-checkbox-group>
|
||
</n-form-item>
|
||
</n-form>
|
||
|
||
<div v-for="(item, idx) in form.footer_mini_img" :key="idx" class="aksrt-mini-img-row">
|
||
<n-space align="center" :size="12" style="width: 100%;">
|
||
<n-input v-model:value="item.text" placeholder="文字描述" style="width: 160px;" />
|
||
<div class="aksrt-media-row" style="flex: 1;">
|
||
<n-input v-model:value="item.img" placeholder="二维码图片 URL" readonly style="flex: 1;" />
|
||
<n-button size="small" @click="pickMiniImg(idx)">选择</n-button>
|
||
</div>
|
||
<n-button size="small" quaternary type="error" @click="removeMiniImg(idx)">删除</n-button>
|
||
</n-space>
|
||
<img v-if="item.img" :src="item.img" class="aksrt-media-preview aksrt-media-preview--sm" :alt="item.text || 'qr'" />
|
||
</div>
|
||
<n-empty v-if="!form.footer_mini_img.length" description="暂无二维码图片" />
|
||
</n-card>
|
||
</n-tab-pane>
|
||
|
||
<!-- ============== 自定义代码 ============== -->
|
||
<n-tab-pane name="custom_code" tab="自定义代码">
|
||
<n-card class="aksrt-section-card">
|
||
<div class="aksrt-section-header">
|
||
<span class="section-icon"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg></span>
|
||
<h3>底部自定义代码</h3>
|
||
</div>
|
||
<p class="section-desc">插入在页脚底部区域（版权信息之后），支持 HTML。</p>
|
||
|
||
<n-form :model="form" label-placement="top" class="aksrt-form">
|
||
<n-form-item label="fcode_customize_code">
|
||
<n-input v-model:value="form.fcode_customize_code" type="textarea" :rows="6" placeholder="自定义 HTML 代码，显示在页脚最底部" />
|
||
</n-form-item>
|
||
</n-form>
|
||
</n-card>
|
||
</n-tab-pane>
|
||
|
||
<!-- ============== 版权与杂项 ============== -->
|
||
<n-tab-pane name="misc" tab="版权与杂项">
|
||
<n-card class="aksrt-section-card">
|
||
<div class="aksrt-section-header">
|
||
<span class="section-icon"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></span>
|
||
<h3>其他设置</h3>
|
||
</div>
|
||
|
||
<n-form :model="form" label-placement="left" label-width="140" class="aksrt-form">
|
||
<n-form-item label="页脚布局模板">
|
||
<n-radio-group v-model:value="form.layout_template">
|
||
<n-radio-button value="template_1">模板一（Zibll）</n-radio-button>
|
||
</n-radio-group>
|
||
</n-form-item>
|
||
<n-form-item label="热门分类数量">
|
||
<n-space align="center" :size="10">
|
||
<n-input-number v-model:value="form.hot_categories" :min="1" :max="20" style="width: 120px;" />
|
||
<span class="aksrt-hint-text">范围 1 - 20</span>
|
||
</n-space>
|
||
</n-form-item>
|
||
<n-form-item label="自定义版权文案">
|
||
<n-input
|
||
v-model:value="form.copyright_text"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="留空则使用默认版权信息"
|
||
/>
|
||
</n-form-item>
|
||
</n-form>
|
||
</n-card>
|
||
</n-tab-pane>
|
||
</n-tabs>
|
||
|
||
<div class="aksrt-form-actions">
|
||
<n-button type="primary" :loading="saving" @click="handleSave">保存页脚配置</n-button>
|
||
</div>
|
||
</n-spin>
|
||
|
||
<!-- ===== 联系方式 Modal ===== -->
|
||
<n-modal
|
||
v-model:show="showContactModal"
|
||
:mask-closable="false"
|
||
preset="card"
|
||
title="编辑联系方式图标"
|
||
class="aksrt-modal-card"
|
||
>
|
||
<n-form :model="editingContact" label-placement="top" class="aksrt-form">
|
||
<n-form-item label="图标类型">
|
||
<n-select v-model:value="editingContact.icon" :options="iconOptions" placeholder="选择图标" />
|
||
</n-form-item>
|
||
<n-form-item label="链接地址">
|
||
<n-input v-model:value="editingContact.url" placeholder="https://..." />
|
||
</n-form-item>
|
||
<n-form-item label="标题提示">
|
||
<n-input v-model:value="editingContact.title" placeholder="鼠标悬停提示文案" />
|
||
</n-form-item>
|
||
<n-form-item label="启用状态">
|
||
<n-switch v-model:value="editingContact.enabled" />
|
||
</n-form-item>
|
||
</n-form>
|
||
<template #footer>
|
||
<div class="aksrt-modal-footer">
|
||
<n-button @click="showContactModal = false">取消</n-button>
|
||
<n-button type="primary" @click="saveContact">保存</n-button>
|
||
</div>
|
||
</template>
|
||
</n-modal>
|
||
|
||
<!-- ===== 链接 Modal ===== -->
|
||
<n-modal
|
||
v-model:show="showLinkModal"
|
||
:mask-closable="false"
|
||
preset="card"
|
||
:title="editingLinkType === 'quick_links' ? '编辑快速链接' : '编辑更多链接'"
|
||
class="aksrt-modal-card"
|
||
>
|
||
<n-form :model="editingLink" label-placement="top" class="aksrt-form">
|
||
<n-form-item label="链接名称">
|
||
<n-input v-model:value="editingLink.name" placeholder="例如：首页" />
|
||
</n-form-item>
|
||
<n-form-item label="链接地址">
|
||
<n-input v-model:value="editingLink.url" placeholder="https:// 或 /path" />
|
||
</n-form-item>
|
||
<n-form-item label="启用状态">
|
||
<n-switch v-model:value="editingLink.enabled" />
|
||
</n-form-item>
|
||
</n-form>
|
||
<template #footer>
|
||
<div class="aksrt-modal-footer">
|
||
<n-button @click="showLinkModal = false">取消</n-button>
|
||
<n-button type="primary" @click="saveLink">保存</n-button>
|
||
</div>
|
||
</template>
|
||
</n-modal>
|
||
|
||
<!-- ===== 友情链接 Modal ===== -->
|
||
<n-modal
|
||
v-model:show="showFriendModal"
|
||
:mask-closable="false"
|
||
preset="card"
|
||
title="添加友情链接"
|
||
class="aksrt-modal-card"
|
||
>
|
||
<n-form :model="editingFriend" label-placement="top" class="aksrt-form">
|
||
<n-form-item label="站点名称">
|
||
<n-input v-model:value="editingFriend.name" placeholder="如：某人的博客" />
|
||
</n-form-item>
|
||
<n-form-item label="站点 URL">
|
||
<n-input v-model:value="editingFriend.url" placeholder="https://" />
|
||
</n-form-item>
|
||
<n-form-item label="Logo 图片 URL">
|
||
<n-input v-model:value="editingFriend.logo" placeholder="图标 URL（可选，方形 PNG 推荐）" />
|
||
</n-form-item>
|
||
<n-form-item label="描述">
|
||
<n-input v-model:value="editingFriend.description" placeholder="一句话简介（可选）" />
|
||
</n-form-item>
|
||
</n-form>
|
||
<template #footer>
|
||
<div class="aksrt-modal-footer">
|
||
<n-button @click="showFriendModal = false">取消</n-button>
|
||
<n-button type="primary" :loading="addingFriend" @click="saveFriend">保存</n-button>
|
||
</div>
|
||
</template>
|
||
</n-modal>
|
||
<!-- ===== 扩展联系项 Modal ===== -->
|
||
<n-modal
|
||
v-model:show="showContactMoreModal"
|
||
:mask-closable="false"
|
||
preset="card"
|
||
title="编辑扩展联系项"
|
||
class="aksrt-modal-card"
|
||
>
|
||
<n-form :model="editingContactMore" label-placement="top" class="aksrt-form">
|
||
<n-form-item label="描述">
|
||
<n-input v-model:value="editingContactMore.desc" placeholder="如：微信公众号" />
|
||
</n-form-item>
|
||
<n-form-item label="图标类名">
|
||
<n-input v-model:value="editingContactMore.icon" placeholder="如：fa fab fa-weixin" />
|
||
</n-form-item>
|
||
<n-form-item label="链接地址">
|
||
<n-input v-model:value="editingContactMore.link" placeholder="https://..." />
|
||
</n-form-item>
|
||
<n-form-item label="Hover 图片">
|
||
<n-input v-model:value="editingContactMore.img" placeholder="图片 URL（可选，hover 显示）" />
|
||
</n-form-item>
|
||
</n-form>
|
||
<template #footer>
|
||
<div class="aksrt-modal-footer">
|
||
<n-button @click="showContactMoreModal = false">取消</n-button>
|
||
<n-button type="primary" @click="saveContactMore">保存</n-button>
|
||
</div>
|
||
</template>
|
||
</n-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { h, onMounted, reactive, ref } from 'vue'
|
||
import { NAvatar, NButton, NTag, useDialog, useMessage } from 'naive-ui'
|
||
import api from '@/api'
|
||
import PageHeader from '@/components/PageHeader.vue'
|
||
import { openMediaPicker } from '@/utils/media'
|
||
|
||
const message = useMessage()
|
||
const dialog = useDialog()
|
||
const loading = ref(true)
|
||
const saving = ref(false)
|
||
|
||
const activeTab = ref('contacts')
|
||
|
||
const form = reactive({
|
||
contacts: [],
|
||
quick_links: [],
|
||
more_links: [],
|
||
hot_categories: 5,
|
||
copyright_text: '',
|
||
layout_template: 'template_1',
|
||
// §2.3 三列结构化字段
|
||
footer_t1_m_s: ['pc', 'mobile'],
|
||
footer_t1_img: '',
|
||
footer_t1_img_dark: '',
|
||
footer_t1_t: '',
|
||
fcode_t1_code: '',
|
||
footer_contact_wechat_img: '',
|
||
footer_contact_qq: '',
|
||
footer_contact_weibo: '',
|
||
footer_contact_email: '',
|
||
footer_contact_m_s: ['pc', 'mobile'],
|
||
footer_contact_more: [],
|
||
fcode_t2_code_1: '',
|
||
fcode_t2_code_2: '',
|
||
footer_mini_img_m_s: ['pc', 'mobile'],
|
||
footer_mini_img: [],
|
||
fcode_customize_code: '',
|
||
})
|
||
|
||
// ============== 联系方式 ==============
|
||
const showContactModal = ref(false)
|
||
const editingContactIndex = ref(-1)
|
||
const editingContact = reactive({
|
||
icon: '',
|
||
url: '',
|
||
title: '',
|
||
enabled: true,
|
||
})
|
||
|
||
let contactUid = 0
|
||
|
||
const iconOptions = [
|
||
{ label: 'GitHub', value: 'github' },
|
||
{ label: 'X (Twitter)', value: 'x' },
|
||
{ label: 'Email', value: 'email' },
|
||
{ label: '微信', value: 'wechat' },
|
||
{ label: 'QQ', value: 'qq' },
|
||
{ label: '微博', value: 'weibo' },
|
||
{ label: 'Telegram', value: 'telegram' },
|
||
{ label: 'Discord', value: 'discord' },
|
||
{ label: 'Bilibili', value: 'bilibili' },
|
||
{ label: 'LinkedIn', value: 'linkedin' },
|
||
{ label: 'Facebook', value: 'facebook' },
|
||
{ label: 'YouTube', value: 'youtube' },
|
||
{ label: 'Instagram', value: 'instagram' },
|
||
{ label: 'RSS / 网站', value: 'web' },
|
||
]
|
||
|
||
function addContact() {
|
||
Object.assign(editingContact, {
|
||
icon: '',
|
||
url: '',
|
||
title: '',
|
||
enabled: true,
|
||
})
|
||
editingContactIndex.value = -1
|
||
showContactModal.value = true
|
||
}
|
||
|
||
function editContact(row, index) {
|
||
Object.assign(editingContact, {
|
||
icon: row.icon,
|
||
url: row.url,
|
||
title: row.title,
|
||
enabled: row.enabled,
|
||
})
|
||
editingContactIndex.value = index
|
||
showContactModal.value = true
|
||
}
|
||
|
||
function saveContact() {
|
||
if (!editingContact.icon || !editingContact.url) {
|
||
message.warning('请填写图标类型和链接地址')
|
||
return
|
||
}
|
||
|
||
const item = {
|
||
_uid: editingContactIndex.value >= 0 ? form.contacts[editingContactIndex.value]._uid : ++contactUid,
|
||
icon: editingContact.icon,
|
||
url: editingContact.url,
|
||
title: editingContact.title,
|
||
enabled: editingContact.enabled,
|
||
}
|
||
|
||
if (editingContactIndex.value >= 0) {
|
||
form.contacts[editingContactIndex.value] = item
|
||
} else {
|
||
form.contacts.push(item)
|
||
}
|
||
|
||
showContactModal.value = false
|
||
}
|
||
|
||
function deleteContact(index) {
|
||
dialog.warning({
|
||
title: '确认删除',
|
||
content: '确定删除这个联系方式图标吗？',
|
||
positiveText: '删除',
|
||
negativeText: '取消',
|
||
onPositiveClick: () => {
|
||
form.contacts.splice(index, 1)
|
||
},
|
||
})
|
||
}
|
||
|
||
const contactColumns = [
|
||
{
|
||
title: '平台',
|
||
key: 'icon',
|
||
width: 120,
|
||
render: (row) => iconOptions.find((item) => item.value === row.icon)?.label || row.icon,
|
||
},
|
||
{
|
||
title: '链接',
|
||
key: 'url',
|
||
ellipsis: { tooltip: true },
|
||
},
|
||
{
|
||
title: '提示',
|
||
key: 'title',
|
||
ellipsis: { tooltip: true },
|
||
className: 'aksrt-table-mobile-hide',
|
||
},
|
||
{
|
||
title: '状态',
|
||
key: 'enabled',
|
||
width: 80,
|
||
render: (row) => h(
|
||
NTag,
|
||
{ size: 'small', type: row.enabled ? 'success' : 'default' },
|
||
{ default: () => (row.enabled ? '启用' : '禁用') }
|
||
),
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'actions',
|
||
width: 130,
|
||
render: (_, index) => h('div', { style: 'display:flex;gap:6px;' }, [
|
||
h(NButton, { size: 'tiny', onClick: () => editContact(form.contacts[index], index) }, { default: () => '编辑' }),
|
||
h(NButton, { size: 'tiny', type: 'error', quaternary: true, onClick: () => deleteContact(index) }, { default: () => '删除' }),
|
||
]),
|
||
},
|
||
]
|
||
|
||
// ============== 快速 / 更多链接 ==============
|
||
const showLinkModal = ref(false)
|
||
const editingLinkType = ref('quick_links')
|
||
const editingLinkIndex = ref(-1)
|
||
const editingLink = reactive({
|
||
id: '',
|
||
name: '',
|
||
url: '',
|
||
enabled: true,
|
||
sort_order: 0,
|
||
})
|
||
|
||
function openLinkEditor(type, row = null, index = -1) {
|
||
editingLinkType.value = type
|
||
editingLinkIndex.value = index
|
||
|
||
Object.assign(editingLink, row || {
|
||
id: '',
|
||
name: '',
|
||
url: '',
|
||
enabled: true,
|
||
sort_order: type === 'quick_links' ? form.quick_links.length : form.more_links.length,
|
||
})
|
||
|
||
showLinkModal.value = true
|
||
}
|
||
|
||
function saveLink() {
|
||
if (!editingLink.name || !editingLink.url) {
|
||
message.warning('请填写链接名称和链接地址')
|
||
return
|
||
}
|
||
|
||
const target = form[editingLinkType.value]
|
||
const item = {
|
||
id: editingLink.id || `link_${Date.now()}`,
|
||
name: editingLink.name,
|
||
url: editingLink.url,
|
||
enabled: editingLink.enabled,
|
||
sort_order: editingLink.sort_order ?? target.length,
|
||
}
|
||
|
||
if (editingLinkIndex.value >= 0) {
|
||
target[editingLinkIndex.value] = item
|
||
} else {
|
||
target.push(item)
|
||
}
|
||
|
||
showLinkModal.value = false
|
||
}
|
||
|
||
function deleteLink(type, index) {
|
||
dialog.warning({
|
||
title: '确认删除',
|
||
content: '确定删除这个链接吗？',
|
||
positiveText: '删除',
|
||
negativeText: '取消',
|
||
onPositiveClick: () => {
|
||
form[type].splice(index, 1)
|
||
},
|
||
})
|
||
}
|
||
|
||
function createLinkColumns(type) {
|
||
return [
|
||
{
|
||
title: '名称',
|
||
key: 'name',
|
||
width: 160,
|
||
},
|
||
{
|
||
title: 'URL',
|
||
key: 'url',
|
||
ellipsis: { tooltip: true },
|
||
},
|
||
{
|
||
title: '状态',
|
||
key: 'enabled',
|
||
width: 80,
|
||
render: (row) => h(
|
||
NTag,
|
||
{ size: 'small', type: row.enabled ? 'success' : 'default' },
|
||
{ default: () => (row.enabled ? '启用' : '禁用') }
|
||
),
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'actions',
|
||
width: 130,
|
||
render: (_, index) => h('div', { style: 'display:flex;gap:6px;' }, [
|
||
h(NButton, { size: 'tiny', onClick: () => openLinkEditor(type, form[type][index], index) }, { default: () => '编辑' }),
|
||
h(NButton, { size: 'tiny', type: 'error', quaternary: true, onClick: () => deleteLink(type, index) }, { default: () => '删除' }),
|
||
]),
|
||
},
|
||
]
|
||
}
|
||
|
||
// ============== 友情链接 ==============
|
||
const friendLinks = ref([])
|
||
const showFriendModal = ref(false)
|
||
const addingFriend = ref(false)
|
||
const editingFriend = reactive({
|
||
name: '',
|
||
url: '',
|
||
logo: '',
|
||
description: '',
|
||
})
|
||
|
||
const friendColumns = [
|
||
{
|
||
title: 'Logo',
|
||
key: 'logo',
|
||
width: 60,
|
||
render: (row) => row.logo ? h(NAvatar, { src: row.logo, size: 32, round: true }) : h('span', { style: 'color:#bbb;font-size:12px;' }, '—'),
|
||
},
|
||
{ title: '名称', key: 'name', width: 140, ellipsis: { tooltip: true } },
|
||
{ title: 'URL', key: 'url', ellipsis: { tooltip: true } },
|
||
{ title: '描述', key: 'description', ellipsis: { tooltip: true }, className: 'aksrt-table-mobile-hide' },
|
||
{
|
||
title: '操作',
|
||
key: 'actions',
|
||
width: 90,
|
||
render: (row) => h(NButton, {
|
||
quaternary: true,
|
||
type: 'error',
|
||
size: 'tiny',
|
||
onClick: () => deleteFriend(row),
|
||
}, { default: () => '删除' }),
|
||
},
|
||
]
|
||
|
||
function openFriendEditor() {
|
||
Object.assign(editingFriend, {
|
||
name: '',
|
||
url: '',
|
||
logo: '',
|
||
description: '',
|
||
})
|
||
showFriendModal.value = true
|
||
}
|
||
|
||
async function loadFriendLinks() {
|
||
try {
|
||
const res = await api.getFriendLinks()
|
||
if (res.code === 'success') friendLinks.value = res.data || []
|
||
} catch (e) {
|
||
console.error('[FriendLinks] load failed:', e)
|
||
}
|
||
}
|
||
|
||
async function saveFriend() {
|
||
if (!editingFriend.name || !editingFriend.url) {
|
||
message.warning('请填写站点名称和 URL')
|
||
return
|
||
}
|
||
addingFriend.value = true
|
||
try {
|
||
const res = await api.addFriendLink({
|
||
name: editingFriend.name,
|
||
url: editingFriend.url,
|
||
logo: editingFriend.logo,
|
||
description: editingFriend.description,
|
||
sort_order: friendLinks.value.length,
|
||
})
|
||
if (res.code === 'success') {
|
||
message.success(res.message || '已添加')
|
||
showFriendModal.value = false
|
||
await loadFriendLinks()
|
||
}
|
||
} catch (e) {
|
||
message.error(e.message || '添加失败')
|
||
} finally {
|
||
addingFriend.value = false
|
||
}
|
||
}
|
||
|
||
function deleteFriend(row) {
|
||
dialog.warning({
|
||
title: '确认删除',
|
||
content: `确定删除友链「${row.name}」？`,
|
||
positiveText: '删除',
|
||
negativeText: '取消',
|
||
onPositiveClick: async () => {
|
||
try {
|
||
await api.deleteFriendLink(row.id)
|
||
message.success('已删除')
|
||
await loadFriendLinks()
|
||
} catch (e) {
|
||
message.error(e.message || '删除失败')
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
// ============== 加载 / 保存 ==============
|
||
async function loadSettings() {
|
||
loading.value = true
|
||
try {
|
||
const [footerRes] = await Promise.all([
|
||
api.getFooterSettings(),
|
||
loadFriendLinks(),
|
||
])
|
||
if (footerRes.code === 'success' && footerRes.data) {
|
||
const data = footerRes.data
|
||
form.contacts = (data.contacts || []).map((item) => ({ ...item, _uid: ++contactUid }))
|
||
form.quick_links = data.quick_links || []
|
||
form.more_links = data.more_links || []
|
||
form.hot_categories = data.hot_categories ?? 5
|
||
form.copyright_text = data.copyright_text || ''
|
||
form.layout_template = 'template_1'
|
||
// §2.3 三列结构化字段
|
||
form.footer_t1_m_s = Array.isArray(data.footer_t1_m_s) ? data.footer_t1_m_s : ['pc', 'mobile']
|
||
form.footer_t1_img = data.footer_t1_img || ''
|
||
form.footer_t1_img_dark = data.footer_t1_img_dark || ''
|
||
form.footer_t1_t = data.footer_t1_t || ''
|
||
form.fcode_t1_code = data.fcode_t1_code || ''
|
||
form.footer_contact_wechat_img = data.footer_contact_wechat_img || ''
|
||
form.footer_contact_qq = data.footer_contact_qq || ''
|
||
form.footer_contact_weibo = data.footer_contact_weibo || ''
|
||
form.footer_contact_email = data.footer_contact_email || ''
|
||
form.footer_contact_m_s = Array.isArray(data.footer_contact_m_s) ? data.footer_contact_m_s : ['pc', 'mobile']
|
||
form.footer_contact_more = Array.isArray(data.footer_contact_more) ? data.footer_contact_more : []
|
||
form.fcode_t2_code_1 = data.fcode_t2_code_1 || ''
|
||
form.fcode_t2_code_2 = data.fcode_t2_code_2 || ''
|
||
form.footer_mini_img_m_s = Array.isArray(data.footer_mini_img_m_s) ? data.footer_mini_img_m_s : ['pc', 'mobile']
|
||
form.footer_mini_img = Array.isArray(data.footer_mini_img) ? data.footer_mini_img : []
|
||
form.fcode_customize_code = data.fcode_customize_code || ''
|
||
}
|
||
} catch (error) {
|
||
console.error('[Footer] load failed:', error)
|
||
message.error(error?.message || '加载失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
async function handleSave() {
|
||
saving.value = true
|
||
try {
|
||
const payload = {
|
||
contacts: form.contacts.map(({ _uid, ...rest }) => rest),
|
||
quick_links: form.quick_links,
|
||
more_links: form.more_links,
|
||
hot_categories: form.hot_categories,
|
||
copyright_text: form.copyright_text,
|
||
layout_template: form.layout_template,
|
||
// §2.3 三列结构化字段
|
||
footer_t1_m_s: form.footer_t1_m_s,
|
||
footer_t1_img: form.footer_t1_img,
|
||
footer_t1_img_dark: form.footer_t1_img_dark,
|
||
footer_t1_t: form.footer_t1_t,
|
||
fcode_t1_code: form.fcode_t1_code,
|
||
footer_contact_wechat_img: form.footer_contact_wechat_img,
|
||
footer_contact_qq: form.footer_contact_qq,
|
||
footer_contact_weibo: form.footer_contact_weibo,
|
||
footer_contact_email: form.footer_contact_email,
|
||
footer_contact_m_s: form.footer_contact_m_s,
|
||
footer_contact_more: form.footer_contact_more,
|
||
fcode_t2_code_1: form.fcode_t2_code_1,
|
||
fcode_t2_code_2: form.fcode_t2_code_2,
|
||
footer_mini_img_m_s: form.footer_mini_img_m_s,
|
||
footer_mini_img: form.footer_mini_img,
|
||
fcode_customize_code: form.fcode_customize_code,
|
||
}
|
||
const res = await api.saveFooterSettings(payload)
|
||
if (res.code === 'success') {
|
||
message.success(res.message || '保存成功')
|
||
} else {
|
||
message.error(res.message || '保存失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('[Footer] save failed:', error)
|
||
message.error(error?.message || '保存失败')
|
||
} finally {
|
||
saving.value = false
|
||
}
|
||
}
|
||
|
||
// ============== 媒体选择 ==============
|
||
async function pickMedia(field) {
|
||
try {
|
||
const media = await openMediaPicker({ title: '选择图片' })
|
||
if (media?.url) {
|
||
form[field] = media.url
|
||
}
|
||
} catch (e) {
|
||
if (e.message) message.warning(e.message)
|
||
}
|
||
}
|
||
|
||
// ============== 扩展联系项 ==============
|
||
function addContactMore() {
|
||
form.footer_contact_more.push({ desc: '', icon: '', link: '', img: '' })
|
||
}
|
||
|
||
function removeContactMore(index) {
|
||
form.footer_contact_more.splice(index, 1)
|
||
}
|
||
|
||
const showContactMoreModal = ref(false)
|
||
const editingContactMoreIndex = ref(-1)
|
||
const editingContactMore = reactive({ desc: '', icon: '', link: '', img: '' })
|
||
|
||
function editContactMore(row, index) {
|
||
Object.assign(editingContactMore, row)
|
||
editingContactMoreIndex.value = index
|
||
showContactMoreModal.value = true
|
||
}
|
||
|
||
function saveContactMore() {
|
||
const item = { ...editingContactMore }
|
||
if (editingContactMoreIndex.value >= 0) {
|
||
form.footer_contact_more[editingContactMoreIndex.value] = item
|
||
}
|
||
showContactMoreModal.value = false
|
||
}
|
||
|
||
const contactMoreColumns = [
|
||
{ title: '描述', key: 'desc', width: 120 },
|
||
{ title: '图标', key: 'icon', width: 100 },
|
||
{ title: '链接', key: 'link', ellipsis: { tooltip: true } },
|
||
{ title: '图片', key: 'img', width: 60, render: (row) => row.img ? h('img', { src: row.img, style: 'width:32px;height:32px;object-fit:cover;border-radius:4px;' }) : h('span', { style: 'color:#bbb;' }, '—') },
|
||
{
|
||
title: '操作',
|
||
key: 'actions',
|
||
width: 130,
|
||
render: (_, index) => h('div', { style: 'display:flex;gap:6px;' }, [
|
||
h(NButton, { size: 'tiny', onClick: () => editContactMore(form.footer_contact_more[index], index) }, { default: () => '编辑' }),
|
||
h(NButton, { size: 'tiny', type: 'error', quaternary: true, onClick: () => removeContactMore(index) }, { default: () => '删除' }),
|
||
]),
|
||
},
|
||
]
|
||
|
||
// ============== 二维码图片组 ==============
|
||
function addMiniImg() {
|
||
if (form.footer_mini_img.length < 4) {
|
||
form.footer_mini_img.push({ text: '', img: '' })
|
||
}
|
||
}
|
||
|
||
function removeMiniImg(idx) {
|
||
form.footer_mini_img.splice(idx, 1)
|
||
}
|
||
|
||
async function pickMiniImg(idx) {
|
||
try {
|
||
const media = await openMediaPicker({ title: '选择二维码图片' })
|
||
if (media?.url) {
|
||
form.footer_mini_img[idx].img = media.url
|
||
}
|
||
} catch (e) {
|
||
if (e.message) message.warning(e.message)
|
||
}
|
||
}
|
||
|
||
onMounted(loadSettings)
|
||
</script>
|
||
|
||
<style scoped>
|
||
.aksrt-modal-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
}
|
||
.aksrt-media-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
width: 100%;
|
||
}
|
||
.aksrt-media-preview {
|
||
display: block;
|
||
max-width: 200px;
|
||
max-height: 80px;
|
||
margin-top: 8px;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--n-border-color, #e0e0e6);
|
||
object-fit: contain;
|
||
}
|
||
.aksrt-media-preview--sm {
|
||
max-width: 64px;
|
||
max-height: 64px;
|
||
}
|
||
.aksrt-mini-img-row {
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid var(--n-border-color, #e0e0e6);
|
||
}
|
||
.aksrt-mini-img-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
</style>
|