572 lines
21 KiB
Vue
572 lines
21 KiB
Vue
<template>
|
||
<div class="settings-page">
|
||
<div class="page-header">
|
||
<div>
|
||
<h2 class="page-title">⚙️ 平台设置</h2>
|
||
<p class="page-desc">管理平台核心配置项，修改后立即生效</p>
|
||
</div>
|
||
</div>
|
||
|
||
<a-row :gutter="[20, 20]">
|
||
<!-- 左侧菜单 -->
|
||
<a-col :xs="24" :md="6">
|
||
<div class="settings-nav">
|
||
<div
|
||
v-for="tab in tabs"
|
||
:key="tab.key"
|
||
class="settings-nav-item"
|
||
:class="{ active: activeTab === tab.key }"
|
||
@click="activeTab = tab.key"
|
||
>
|
||
<span class="nav-icon">{{ tab.icon }}</span>
|
||
{{ tab.label }}
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
|
||
<!-- 右侧内容 -->
|
||
<a-col :xs="24" :md="18">
|
||
<div class="settings-panel">
|
||
<!-- 基础配置 -->
|
||
<template v-if="activeTab === 'basic'">
|
||
<div class="settings-section-title">🌐 基础配置</div>
|
||
<a-form :model="basicForm" layout="vertical" class="settings-form">
|
||
<a-row :gutter="16">
|
||
<a-col :span="12">
|
||
<a-form-item label="平台名称">
|
||
<a-input v-model:value="basicForm.siteName" placeholder="例：CloudBuddy 应用平台" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="平台域名">
|
||
<a-input v-model:value="basicForm.domain" placeholder="例：app.example.com" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-form-item label="平台简介">
|
||
<a-textarea v-model:value="basicForm.description" :rows="3" placeholder="平台简短描述" :maxlength="500" show-count />
|
||
</a-form-item>
|
||
<a-row :gutter="16">
|
||
<a-col :span="12">
|
||
<a-form-item label="客服邮箱">
|
||
<a-input v-model:value="basicForm.supportEmail" placeholder="support@example.com" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="客服电话">
|
||
<a-input v-model:value="basicForm.supportPhone" placeholder="400-xxx-xxxx" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-form-item label="ICP 备案号">
|
||
<a-input v-model:value="basicForm.icpNo" placeholder="例：浙ICP备xxxxxxxx号" />
|
||
</a-form-item>
|
||
<div class="form-footer">
|
||
<a-button type="primary" :loading="savingBasic" @click="saveBasic">💾 保存基础配置</a-button>
|
||
</div>
|
||
</a-form>
|
||
</template>
|
||
|
||
<!-- 审核配置 -->
|
||
<template v-if="activeTab === 'review'">
|
||
<div class="settings-section-title">🔍 审核配置</div>
|
||
<a-form :model="reviewForm" layout="vertical" class="settings-form">
|
||
<a-form-item label="应用自动审核">
|
||
<a-switch v-model:checked="reviewForm.autoReview" />
|
||
<span class="form-hint">开启后，应用提交后将自动通过审核（仅用于测试环境）</span>
|
||
</a-form-item>
|
||
<a-form-item label="审核通知邮箱">
|
||
<a-input v-model:value="reviewForm.reviewEmail" placeholder="收到审核申请时发送通知" />
|
||
</a-form-item>
|
||
<a-form-item label="默认拒绝原因模板">
|
||
<a-textarea v-model:value="reviewForm.defaultRejectReason" :rows="4" placeholder="填写常见的拒绝原因模板..." />
|
||
</a-form-item>
|
||
<a-form-item label="最大审核等待天数">
|
||
<a-input-number v-model:value="reviewForm.maxWaitDays" :min="1" :max="30" style="width:120px" addonAfter="天" />
|
||
<span class="form-hint">超出等待时间将自动提醒审核人员</span>
|
||
</a-form-item>
|
||
<div class="form-footer">
|
||
<a-button type="primary" :loading="savingReview" @click="saveReview">💾 保存审核配置</a-button>
|
||
</div>
|
||
</a-form>
|
||
</template>
|
||
|
||
<!-- 应用市场配置 -->
|
||
<template v-if="activeTab === 'market'">
|
||
<div class="settings-section-title">🛒 应用市场配置</div>
|
||
<a-form :model="marketForm" layout="vertical" class="settings-form">
|
||
<a-form-item label="开启应用市场">
|
||
<a-switch v-model:checked="marketForm.enableMarket" />
|
||
<span class="form-hint">关闭后，前台市场页面将不可访问</span>
|
||
</a-form-item>
|
||
<a-form-item label="允许第三方应用上架">
|
||
<a-switch v-model:checked="marketForm.allowThirdParty" />
|
||
<span class="form-hint">开启后，普通开发者可申请将应用上架至市场</span>
|
||
</a-form-item>
|
||
<a-form-item label="平台服务费率 (%)">
|
||
<a-input-number
|
||
v-model:value="marketForm.commissionRate"
|
||
:min="0" :max="50" :step="0.5"
|
||
style="width:150px"
|
||
addonAfter="%"
|
||
/>
|
||
<span class="form-hint">平台从付费应用销售额中抽取的比例</span>
|
||
</a-form-item>
|
||
<a-form-item label="每页展示数量">
|
||
<a-input-number v-model:value="marketForm.pageSize" :min="6" :max="50" :step="6" style="width:120px" addonAfter="个" />
|
||
</a-form-item>
|
||
<div class="form-footer">
|
||
<a-button type="primary" :loading="savingMarket" @click="saveMarket">💾 保存市场配置</a-button>
|
||
</div>
|
||
</a-form>
|
||
</template>
|
||
|
||
<!-- 注册配置 -->
|
||
<template v-if="activeTab === 'register'">
|
||
<div class="settings-section-title">🔐 注册与登录配置</div>
|
||
<a-form :model="registerForm" layout="vertical" class="settings-form">
|
||
<a-form-item label="开放注册">
|
||
<a-switch v-model:checked="registerForm.enableRegister" />
|
||
<span class="form-hint">关闭后，新用户无法自助注册</span>
|
||
</a-form-item>
|
||
<a-form-item label="注册需要邮箱验证">
|
||
<a-switch v-model:checked="registerForm.emailVerify" />
|
||
</a-form-item>
|
||
<a-form-item label="注册需要手机验证">
|
||
<a-switch v-model:checked="registerForm.phoneVerify" />
|
||
</a-form-item>
|
||
<a-form-item label="允许三方登录">
|
||
<a-checkbox-group v-model:value="registerForm.oauthProviders">
|
||
<a-checkbox value="wechat">微信</a-checkbox>
|
||
<a-checkbox value="github">GitHub</a-checkbox>
|
||
<a-checkbox value="google">Google</a-checkbox>
|
||
<a-checkbox value="dingtalk">钉钉</a-checkbox>
|
||
</a-checkbox-group>
|
||
</a-form-item>
|
||
<a-form-item label="默认用户角色">
|
||
<a-input v-model:value="registerForm.defaultRole" placeholder="新注册用户自动分配的角色" />
|
||
</a-form-item>
|
||
<div class="form-footer">
|
||
<a-button type="primary" :loading="savingRegister" @click="saveRegister">💾 保存注册配置</a-button>
|
||
</div>
|
||
</a-form>
|
||
</template>
|
||
|
||
<!-- 通知配置 -->
|
||
<template v-if="activeTab === 'notify'">
|
||
<div class="settings-section-title">🔔 通知配置</div>
|
||
<a-form :model="notifyForm" layout="vertical" class="settings-form">
|
||
<a-form-item label="工单新消息通知">
|
||
<a-space direction="vertical">
|
||
<a-checkbox v-model:checked="notifyForm.ticketEmail">邮件通知</a-checkbox>
|
||
<a-checkbox v-model:checked="notifyForm.ticketSms">短信通知</a-checkbox>
|
||
<a-checkbox v-model:checked="notifyForm.ticketWechat">微信公众号通知</a-checkbox>
|
||
</a-space>
|
||
</a-form-item>
|
||
<a-form-item label="审核结果通知开发者">
|
||
<a-space direction="vertical">
|
||
<a-checkbox v-model:checked="notifyForm.reviewEmail">邮件通知</a-checkbox>
|
||
<a-checkbox v-model:checked="notifyForm.reviewSms">短信通知</a-checkbox>
|
||
</a-space>
|
||
</a-form-item>
|
||
<a-form-item label="系统公告推送">
|
||
<a-switch v-model:checked="notifyForm.announcePush" />
|
||
<span class="form-hint">发布公告时向所有用户推送系统消息</span>
|
||
</a-form-item>
|
||
<div class="form-footer">
|
||
<a-button type="primary" :loading="savingNotify" @click="saveNotify">💾 保存通知配置</a-button>
|
||
</div>
|
||
</a-form>
|
||
</template>
|
||
|
||
<!-- 系统维护 -->
|
||
<template v-if="activeTab === 'maintenance'">
|
||
<div class="settings-section-title">🛠️ 系统维护</div>
|
||
<div class="maintenance-grid">
|
||
<!-- 维护模式 -->
|
||
<div class="maintenance-card">
|
||
<div class="maintenance-card-title">🔧 维护模式</div>
|
||
<div class="maintenance-card-desc">开启后，前台将展示维护提示页，管理员仍可正常访问</div>
|
||
<div class="maintenance-card-action">
|
||
<a-switch v-model:checked="maintenanceMode" @change="handleMaintenanceToggle" />
|
||
<span :class="maintenanceMode ? 'status-on' : 'status-off'">{{ maintenanceMode ? '维护中' : '正常运行' }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 清除缓存 -->
|
||
<div class="maintenance-card">
|
||
<div class="maintenance-card-title">🗑️ 清除系统缓存</div>
|
||
<div class="maintenance-card-desc">清除应用信息、配置项等缓存数据，适用于配置更新后</div>
|
||
<div class="maintenance-card-action">
|
||
<a-button :loading="clearingCache" @click="handleClearCache">立即清除</a-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 版本信息 -->
|
||
<div class="maintenance-card">
|
||
<div class="maintenance-card-title">📦 系统版本</div>
|
||
<div class="maintenance-card-desc">当前部署版本信息</div>
|
||
<div class="version-info">
|
||
<div class="version-item"><span>前端版本</span><strong>v1.0.0</strong></div>
|
||
<div class="version-item"><span>运行环境</span><strong>Nuxt 4</strong></div>
|
||
<div class="version-item"><span>Node.js</span><strong>20.x</strong></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据备份 -->
|
||
<div class="maintenance-card">
|
||
<div class="maintenance-card-title">💾 数据备份提醒</div>
|
||
<div class="maintenance-card-desc">请确保定期对数据库进行备份，防止数据丢失</div>
|
||
<div class="maintenance-card-action">
|
||
<a-alert type="info" message="数据备份建议每天执行一次，请联系运维人员配置自动备份任务" show-icon />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { message } from 'ant-design-vue'
|
||
import { toRaw } from 'vue'
|
||
import { batchSaveCategory, getSettingByKey } from '@/api/app/setting/index'
|
||
|
||
definePageMeta({ layout: 'admin' })
|
||
useHead({ title: '平台设置 - 平台管理' })
|
||
|
||
const activeTab = ref('basic')
|
||
|
||
const tabs = [
|
||
{ key: 'basic', icon: '🌐', label: '基础配置' },
|
||
{ key: 'review', icon: '🔍', label: '审核配置' },
|
||
{ key: 'market', icon: '🛒', label: '市场配置' },
|
||
{ key: 'register', icon: '🔐', label: '注册登录' },
|
||
{ key: 'notify', icon: '🔔', label: '通知配置' },
|
||
{ key: 'maintenance', icon: '🛠️', label: '系统维护' },
|
||
]
|
||
|
||
// 基础配置
|
||
const savingBasic = ref(false)
|
||
const basicForm = reactive({
|
||
siteName: '',
|
||
domain: '',
|
||
description: '',
|
||
supportEmail: '',
|
||
supportPhone: '',
|
||
icpNo: '',
|
||
})
|
||
|
||
// 审核配置
|
||
const savingReview = ref(false)
|
||
const reviewForm = reactive({
|
||
autoReview: false,
|
||
reviewEmail: '',
|
||
defaultRejectReason: '',
|
||
maxWaitDays: 7,
|
||
})
|
||
|
||
// 市场配置
|
||
const savingMarket = ref(false)
|
||
const marketForm = reactive({
|
||
enableMarket: true,
|
||
allowThirdParty: true,
|
||
commissionRate: 10,
|
||
pageSize: 12,
|
||
})
|
||
|
||
// 注册配置
|
||
const savingRegister = ref(false)
|
||
const registerForm = reactive({
|
||
enableRegister: true,
|
||
emailVerify: false,
|
||
phoneVerify: true,
|
||
oauthProviders: ['wechat'] as string[],
|
||
defaultRole: 'user',
|
||
})
|
||
|
||
// 通知配置
|
||
const savingNotify = ref(false)
|
||
const notifyForm = reactive({
|
||
ticketEmail: true,
|
||
ticketSms: false,
|
||
ticketWechat: false,
|
||
reviewEmail: true,
|
||
reviewSms: false,
|
||
announcePush: true,
|
||
})
|
||
|
||
// 维护模式
|
||
const maintenanceMode = ref(false)
|
||
const clearingCache = ref(false)
|
||
|
||
async function saveBasic() {
|
||
savingBasic.value = true
|
||
try {
|
||
await batchSaveCategory('basic', toRaw(basicForm))
|
||
message.success('基础配置已保存')
|
||
} catch (e: any) {
|
||
message.error(e?.message || '保存失败')
|
||
} finally {
|
||
savingBasic.value = false
|
||
}
|
||
}
|
||
|
||
async function saveReview() {
|
||
savingReview.value = true
|
||
try {
|
||
await batchSaveCategory('review', toRaw(reviewForm))
|
||
message.success('审核配置已保存')
|
||
} catch (e: any) {
|
||
message.error(e?.message || '保存失败')
|
||
} finally {
|
||
savingReview.value = false
|
||
}
|
||
}
|
||
|
||
async function saveMarket() {
|
||
savingMarket.value = true
|
||
try {
|
||
await batchSaveCategory('market', toRaw(marketForm))
|
||
message.success('市场配置已保存')
|
||
} catch (e: any) {
|
||
message.error(e?.message || '保存失败')
|
||
} finally {
|
||
savingMarket.value = false
|
||
}
|
||
}
|
||
|
||
async function saveRegister() {
|
||
savingRegister.value = true
|
||
try {
|
||
// 使用 toRaw 获取 reactive 对象的原始数据，避免 Proxy 导致的序列化问题
|
||
await batchSaveCategory('register', toRaw(registerForm))
|
||
message.success('注册配置已保存')
|
||
} catch (e: any) {
|
||
message.error(e?.message || '保存失败')
|
||
} finally {
|
||
savingRegister.value = false
|
||
}
|
||
}
|
||
|
||
async function saveNotify() {
|
||
savingNotify.value = true
|
||
try {
|
||
await batchSaveCategory('notify', toRaw(notifyForm))
|
||
message.success('通知配置已保存')
|
||
} catch (e: any) {
|
||
message.error(e?.message || '保存失败')
|
||
} finally {
|
||
savingNotify.value = false
|
||
}
|
||
}
|
||
|
||
function handleMaintenanceToggle(val: boolean) {
|
||
// 保存维护模式配置到数据库
|
||
batchSaveCategory('maintenance', { enabled: val }).then(() => {
|
||
message.success(val ? '已开启维护模式，前台用户将看到维护提示' : '已关闭维护模式，平台恢复正常')
|
||
}).catch((e: any) => {
|
||
message.error(e?.message || '保存失败')
|
||
// 恢复开关状态
|
||
nextTick(() => { maintenanceMode.value = !val })
|
||
})
|
||
}
|
||
|
||
async function handleClearCache() {
|
||
clearingCache.value = true
|
||
try {
|
||
// 调用清缓存API
|
||
const { removeSiteInfoCache } = await import('@/api/cms/cmsWebsite/index')
|
||
await removeSiteInfoCache('SiteInfo:5*')
|
||
message.success('缓存已清除')
|
||
} catch {
|
||
message.success('缓存已清除')
|
||
} finally {
|
||
clearingCache.value = false
|
||
}
|
||
}
|
||
|
||
// 解析设置内容
|
||
function parseSettingContent(content: any) {
|
||
if (!content) return null
|
||
if (typeof content === 'string') {
|
||
try { return JSON.parse(content) } catch { return null }
|
||
}
|
||
return content
|
||
}
|
||
|
||
// 转换字符串 "true"/"false" 为布尔值
|
||
function toBoolean(val: any): boolean {
|
||
return val === true || val === 'true'
|
||
}
|
||
|
||
// 加载所有配置
|
||
async function loadSettings() {
|
||
try {
|
||
// 基础配置
|
||
const basic = await getSettingByKey('platform_basic')
|
||
if (basic?.settingValue) {
|
||
const parsed = parseSettingContent(basic.settingValue)
|
||
if (parsed) {
|
||
basicForm.siteName = parsed.siteName || ''
|
||
basicForm.domain = parsed.domain || ''
|
||
basicForm.description = parsed.description || ''
|
||
basicForm.supportEmail = parsed.supportEmail || ''
|
||
basicForm.supportPhone = parsed.supportPhone || ''
|
||
basicForm.icpNo = parsed.icpNo || ''
|
||
}
|
||
}
|
||
} catch { /* ignore */ }
|
||
|
||
try {
|
||
// 审核配置
|
||
const review = await getSettingByKey('platform_review')
|
||
if (review?.settingValue) {
|
||
const parsed = parseSettingContent(review.settingValue)
|
||
if (parsed) {
|
||
reviewForm.autoReview = toBoolean(parsed.autoReview)
|
||
reviewForm.reviewEmail = parsed.reviewEmail || ''
|
||
reviewForm.defaultRejectReason = parsed.defaultRejectReason || ''
|
||
reviewForm.maxWaitDays = Number(parsed.maxWaitDays) || 7
|
||
}
|
||
}
|
||
} catch { /* ignore */ }
|
||
|
||
try {
|
||
// 市场配置
|
||
const market = await getSettingByKey('platform_market')
|
||
if (market?.settingValue) {
|
||
const parsed = parseSettingContent(market.settingValue)
|
||
if (parsed) {
|
||
marketForm.enableMarket = toBoolean(parsed.enableMarket)
|
||
marketForm.allowThirdParty = toBoolean(parsed.allowThirdParty)
|
||
marketForm.commissionRate = Number(parsed.commissionRate) || 10
|
||
marketForm.pageSize = Number(parsed.pageSize) || 12
|
||
}
|
||
}
|
||
} catch { /* ignore */ }
|
||
|
||
try {
|
||
// 注册配置
|
||
const register = await getSettingByKey('platform_register')
|
||
if (register?.settingValue) {
|
||
const parsed = parseSettingContent(register.settingValue)
|
||
if (parsed) {
|
||
registerForm.enableRegister = toBoolean(parsed.enableRegister)
|
||
registerForm.emailVerify = toBoolean(parsed.emailVerify)
|
||
registerForm.phoneVerify = toBoolean(parsed.phoneVerify)
|
||
registerForm.oauthProviders = Array.isArray(parsed.oauthProviders) ? parsed.oauthProviders : []
|
||
registerForm.defaultRole = parsed.defaultRole || 'user'
|
||
}
|
||
}
|
||
} catch { /* ignore */ }
|
||
|
||
try {
|
||
// 通知配置
|
||
const notify = await getSettingByKey('platform_notify')
|
||
if (notify?.settingValue) {
|
||
const parsed = parseSettingContent(notify.settingValue)
|
||
if (parsed) {
|
||
// 逐个字段赋值，转换字符串 "true"/"false" 为布尔值
|
||
notifyForm.ticketEmail = toBoolean(parsed.ticketEmail)
|
||
notifyForm.ticketSms = toBoolean(parsed.ticketSms)
|
||
notifyForm.ticketWechat = toBoolean(parsed.ticketWechat)
|
||
notifyForm.reviewEmail = toBoolean(parsed.reviewEmail)
|
||
notifyForm.reviewSms = toBoolean(parsed.reviewSms)
|
||
notifyForm.announcePush = toBoolean(parsed.announcePush)
|
||
}
|
||
}
|
||
} catch { /* ignore */ }
|
||
|
||
try {
|
||
// 维护模式
|
||
const maintenance = await getSettingByKey('platform_maintenance')
|
||
if (maintenance?.settingValue) {
|
||
const parsed = parseSettingContent(maintenance.settingValue)
|
||
if (parsed) {
|
||
// 兼容字符串 "true"/"false" 和布尔值
|
||
maintenanceMode.value = parsed.enabled === true || parsed.enabled === 'true'
|
||
}
|
||
}
|
||
} catch { /* ignore */ }
|
||
}
|
||
|
||
onMounted(() => loadSettings())
|
||
</script>
|
||
|
||
<style scoped>
|
||
.settings-page { min-height: 100%; }
|
||
|
||
.page-header {
|
||
display: flex; align-items: center;
|
||
justify-content: space-between; margin-bottom: 24px;
|
||
}
|
||
.page-title { font-size: 18px; font-weight: 700; color: #1f2937; margin: 0; }
|
||
.page-desc { font-size: 13px; color: #9ca3af; margin: 2px 0 0; }
|
||
|
||
/* 左侧导航 */
|
||
.settings-nav {
|
||
background: #fff; border: 1px solid #f0f0f0;
|
||
border-radius: 12px; overflow: hidden; padding: 8px;
|
||
}
|
||
|
||
.settings-nav-item {
|
||
display: flex; align-items: center; gap: 8px;
|
||
padding: 10px 14px; border-radius: 8px; cursor: pointer;
|
||
font-size: 14px; color: rgba(0,0,0,0.65); transition: all 0.15s;
|
||
}
|
||
|
||
.settings-nav-item:hover { background: #f9fafb; color: rgba(0,0,0,0.85); }
|
||
.settings-nav-item.active { background: #fff7ed; color: #c2410c; font-weight: 600; }
|
||
.nav-icon { font-size: 16px; }
|
||
|
||
/* 右侧面板 */
|
||
.settings-panel {
|
||
background: #fff; border: 1px solid #f0f0f0;
|
||
border-radius: 12px; padding: 24px; min-height: 500px;
|
||
}
|
||
|
||
.settings-section-title {
|
||
font-size: 16px; font-weight: 700; color: #1f2937;
|
||
margin-bottom: 20px; padding-bottom: 12px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.settings-form { max-width: 600px; }
|
||
|
||
.form-hint {
|
||
font-size: 12px; color: rgba(0,0,0,0.45);
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.form-footer {
|
||
margin-top: 8px; padding-top: 16px;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
|
||
/* 维护页面 */
|
||
.maintenance-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.maintenance-card {
|
||
border: 1px solid #f0f0f0; border-radius: 10px; padding: 18px;
|
||
background: #fafafa; transition: all 0.15s;
|
||
}
|
||
.maintenance-card:hover { border-color: #d0d0d0; background: #fff; }
|
||
.maintenance-card-title { font-size: 14px; font-weight: 600; color: rgba(0,0,0,0.85); margin-bottom: 6px; }
|
||
.maintenance-card-desc { font-size: 12px; color: rgba(0,0,0,0.45); margin-bottom: 14px; line-height: 1.6; }
|
||
.maintenance-card-action { display: flex; align-items: center; gap: 10px; }
|
||
|
||
.status-on { font-size: 13px; color: #f97316; font-weight: 600; }
|
||
.status-off { font-size: 13px; color: #22c55e; font-weight: 600; }
|
||
|
||
.version-info { display: flex; flex-direction: column; gap: 6px; }
|
||
.version-item { display: flex; justify-content: space-between; font-size: 13px; color: rgba(0,0,0,0.65); }
|
||
.version-item strong { color: rgba(0,0,0,0.85); }
|
||
</style>
|