kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(widgets): add phase 4 validation and accessibility

Browse Source
This commit is contained in:
kate522
2026-08-17 19:14:40 +08:00
parent 8cad3c2d3d
commit e1723a8f08
117 changed files with 6 additions and 17338 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/src/pages/extensions/ExtensionTools.vue
-270
View File
@@ -1,270 +0,0 @@
<template>
<div class="aksrt-page-container">
<PageHeader title="系统工具" desc="额外运维工具与扩展能力。" />
<!-- Health Overview -->
<n-card title="系统健康" size="small" class="aksrt-tools__section">
<n-grid :cols="4" :x-gap="12" :y-gap="12">
<n-grid-item v-for="item in healthItems" :key="item.key">
<div class="aksrt-tools__health-card" :class="'aksrt-tools__health-card--' + item.status">
<FaIcon :icon="item.icon" :size="18" :color="item.color" />
<div>
<strong>{{ item.value }}</strong>
<p>{{ item.label }}</p>
</div>
</div>
</n-grid-item>
</n-grid>
</n-card>
<!-- Tool Categories -->
<n-card title="工具集合" size="small" class="aksrt-tools__section">
<n-grid :cols="3" :x-gap="12" :y-gap="12">
<n-grid-item v-for="tool in tools" :key="tool.key">
<div class="aksrt-tools__tool-card" @click="navigateTo(tool.route)">
<div class="aksrt-tools__tool-icon" :style="{ background: tool.bg }">
<FaIcon :icon="tool.icon" :size="18" color="#fff" />
</div>
<div class="aksrt-tools__tool-body">
<strong>{{ tool.title }}</strong>
<p>{{ tool.desc }}</p>
</div>
<FaIcon icon="fas fa-chevron-right" :size="12" color="#c0c4cc" />
</div>
</n-grid-item>
</n-grid>
</n-card>
<!-- Service Status -->
<n-card title="服务状态" size="small" class="aksrt-tools__section">
<n-list bordered size="small">
<n-list-item v-for="svc in services" :key="svc.key">
<n-thing :title="svc.name" :description="svc.description">
<template #avatar>
<FaIcon :icon="svc.icon" :size="16" :color="svc.color" />
</template>
<template #header-extra>
<n-tag :type="svc.available ? 'success' : 'warning'" size="small">
{{ svc.available ? '可用' : '未配置' }}
</n-tag>
</template>
</n-thing>
</n-list-item>
</n-list>
</n-card>
<!-- Quick Maintenance -->
<n-card title="手动维护" size="small" class="aksrt-tools__section">
<n-space>
<n-button @click="handleFlushCache">
<template #icon><FaIcon icon="fas fa-broom" :size="12" /></template>
清除缓存
</n-button>
<n-button @click="handleOptimizeDb">
<template #icon><FaIcon icon="fas fa-database" :size="12" /></template>
优化数据表
</n-button>
<n-button @click="handleRebuildIndex">
<template #icon><FaIcon icon="fas fa-sync-alt" :size="12" /></template>
重建索引
</n-button>
</n-space>
</n-card>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import PageHeader from '@/components/PageHeader.vue'
import FaIcon from '@/components/form/FaIcon.vue'
import api from '@/api/index.js'
const router = useRouter()
const message = useMessage()
const healthItems = ref([
{ key: 'php', icon: 'fas fa-code', color: '#1890ff', value: '—', label: 'PHP 版本', status: 'ok' },
{ key: 'wp', icon: 'fab fa-wordpress', color: '#722ed1', value: '—', label: 'WordPress', status: 'ok' },
{ key: 'db', icon: 'fas fa-database', color: '#52c41a', value: '—', label: '数据库', status: 'ok' },
{ key: 'uploads', icon: 'fas fa-folder-open', color: '#fa8c16', value: '—', label: '上传目录', status: 'ok' },
])
const tools = ref([
{ key: 'import-export', icon: 'fas fa-exchange-alt', bg: '#1890ff', title: '导入导出', desc: '设置导入、导出和重置', route: '/tools/import-export' },
{ key: 'health', icon: 'fas fa-heartbeat', bg: '#52c41a', title: '健康检查', desc: '系统状态检测和诊断', route: '/tools/health' },
{ key: 'email-rollback', icon: 'fas fa-undo', bg: '#fa8c16', title: '邮箱回滚', desc: '邮箱变更 14 天内回滚', route: '/tools/email-rollback' },
])
const services = ref([
{ key: 'sms', icon: 'fas fa-sms', color: '#1890ff', name: '短信服务', description: '验证码和通知短信', available: false },
{ key: 'wechat', icon: 'fab fa-weixin', color: '#52c41a', name: '微信通知', description: '微信模板消息和订阅通知', available: false },
{ key: 'captcha', icon: 'fas fa-shield-alt', color: '#722ed1', name: '验证码服务', description: '人机验证（极验/腾讯/阿里云）', available: false },
{ key: 'push', icon: 'fas fa-paper-plane', color: '#fa8c16', name: '搜索引擎推送', description: '百度/Google 主动推送', available: false },
{ key: 'audit', icon: 'fas fa-shield-virus', color: '#f5222d', name: '内容审核', description: '第三方内容安全审核 API', available: false },
])
onMounted(async () => {
try {
const res = await api.request('/tools/health')
if (res?.data) {
const d = res.data
if (d.php_version) healthItems.value[0].value = d.php_version
if (d.wp_version) healthItems.value[1].value = d.wp_version
if (d.db_status) {
healthItems.value[2].value = d.db_status
healthItems.value[2].status = d.db_ok ? 'ok' : 'warn'
}
if (d.upload_dir) {
healthItems.value[3].value = d.upload_dir
healthItems.value[3].status = d.upload_ok ? 'ok' : 'warn'
}
}
} catch {
// Endpoint may not exist yet
}
// Check service availability from structured status
try {
const settingsRes = await api.request('/settings/extensions')
if (settingsRes?.data) {
const s = settingsRes.data
// Prefer structured services if available
const svc = settingsRes.services || {}
services.value[0].available = !!(svc.sms?.available ?? s.sms_enabled)
services.value[0].status = svc.sms?.provider || (s.sms_enabled ? '已启用' : '未配置')
services.value[1].available = !!(svc.wechat?.available ?? s.wechat_enabled)
services.value[1].status = svc.wechat?.provider || (s.wechat_enabled ? '已启用' : '未配置')
services.value[2].available = !!(svc.captcha?.available ?? svc.captcha?.configured)
services.value[2].status = svc.captcha?.provider || (svc.captcha?.enabled ? '已启用' : '未配置')
services.value[3].available = !!(svc.push?.available ?? s.baidu_push_enabled)
services.value[3].status = svc.push?.provider || (s.baidu_push_enabled ? '已启用' : '未配置')
services.value[4].available = !!(svc.audit?.available ?? s.content_audit_enabled)
services.value[4].status = svc.audit?.provider || (s.content_audit_enabled ? '已启用' : '未配置')
}
} catch {
// Use defaults
}
})
function navigateTo(route) {
router.push(route)
}
async function handleFlushCache() {
message.info('正在清除缓存...')
try {
const res = await api.request('/tools/maintenance', {
method: 'POST',
body: JSON.stringify({ action: 'flush_cache' }),
})
message.success(res?.message || '缓存已清除')
} catch (err) {
message.error(err?.message || '清除缓存失败')
}
}
async function handleOptimizeDb() {
message.info('正在优化数据表...')
try {
const res = await api.request('/tools/maintenance', {
method: 'POST',
body: JSON.stringify({ action: 'optimize_db' }),
})
message.success(res?.message || '数据表已优化')
} catch (err) {
message.error(err?.message || '优化数据表失败')
}
}
async function handleRebuildIndex() {
message.info('正在重建索引...')
try {
const res = await api.request('/tools/maintenance', {
method: 'POST',
body: JSON.stringify({ action: 'rebuild_index' }),
})
message.success(res?.message || '索引重建完成')
} catch (err) {
message.error(err?.message || '重建索引失败')
}
}
</script>
<style scoped>
.aksrt-tools__section {
margin-bottom: 16px;
}
.aksrt-tools__health-card {
display: flex;
align-items: center;
gap: 10px;
padding: 14px;
border-radius: 8px;
background: #fafafa;
border: 1px solid #f0f0f0;
}
.aksrt-tools__health-card strong {
display: block;
font-size: 14px;
color: #1a1a2e;
}
.aksrt-tools__health-card p {
margin: 2px 0 0;
font-size: 12px;
color: #8a909c;
}
.aksrt-tools__health-card--warn {
border-color: #faad14;
background: #fffbe6;
}
.aksrt-tools__tool-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border-radius: 8px;
background: #fafafa;
border: 1px solid #f0f0f0;
cursor: pointer;
transition: all 0.2s;
}
.aksrt-tools__tool-card:hover {
border-color: #1890ff;
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
}
.aksrt-tools__tool-icon {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.aksrt-tools__tool-body {
flex: 1;
min-width: 0;
}
.aksrt-tools__tool-body strong {
display: block;
font-size: 14px;
color: #1a1a2e;
}
.aksrt-tools__tool-body p {
margin: 2px 0 0;
font-size: 12px;
color: #8a909c;
}
</style>