GuangYu/guanwang
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 初始化慧遇书院官网一期

Browse Source
This commit is contained in:
Nelson
2026-08-12 18:01:17 +08:00
commit 5d31ee5743
101 changed files with 17259 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
app/pages/admin/content.vue Normal file
View File

@@ -0,0 +1,149 @@
<script setup lang="ts">
import { PhCheckCircle, PhFloppyDisk, PhPlus, PhTrash, PhUploadSimple } from '@phosphor-icons/vue'
import { apiErrorMessage } from '~/composables/useUnsavedChanges'
import type { SiteDocument } from '../../../server/utils/site-schema'
definePageMeta({ layout: false })
useHead(() => ({ title: `内容管理｜${document.value?.brand.name || '慧遇书院'}` }))
type ContentTab = 'products' | 'articles' | 'team'
const tab = ref<ContentTab>('products')
const selected = reactive({ products: 0, articles: 0, team: 0 })
const document = ref<SiteDocument>()
const loading = ref(true)
const busy = ref(false)
const message = ref('')
const { dirty, markClean } = useUnsavedChanges(document)
onMounted(async () => {
try {
await $fetch('/api/auth/me')
document.value = (await $fetch<{ data: SiteDocument }>('/api/admin/site')).data
await nextTick()
markClean()
} catch { await navigateTo('/admin/login') }
finally { loading.value = false }
})
const currentProduct = computed(() => document.value?.products[selected.products])
const currentArticle = computed(() => document.value?.articles[selected.articles])
const currentMember = computed(() => document.value?.team[selected.team])
function makeSlug(prefix: string) { return `${prefix}-${Date.now().toString(36)}` }
function addItem() {
if (!document.value) return
if (tab.value === 'products') {
document.value.products.push({ slug: makeSlug('product'), title: '新产品', subtitle: '', type: 'course', summary: '', content: '', image: '/images/hero-bg-v3.webp', href: '', status: 'draft' })
selected.products = document.value.products.length - 1
} else if (tab.value === 'articles') {
document.value.articles.push({ slug: makeSlug('article'), type: 'news', title: '新内容', summary: '', content: '', cover: '/images/hero-bg-v3.webp', publishedAt: new Date().toISOString().slice(0, 10), status: 'draft', statementNo: '', sourceName: '', sourceUrl: '' })
selected.articles = document.value.articles.length - 1
} else {
document.value.team.push({ slug: makeSlug('member'), name: '新成员', role: '', summary: '', avatar: '/images/lu-hui-portrait.jpg', specialties: [], status: 'draft' })
selected.team = document.value.team.length - 1
}
}
function removeItem() {
if (!document.value || !window.confirm('确定删除当前内容吗？保存后生效。')) return
document.value[tab.value].splice(selected[tab.value], 1 as never)
selected[tab.value] = Math.max(0, selected[tab.value] - 1)
}
async function save(publish = false) {
if (!document.value) return
busy.value = true
message.value = ''
try {
await $fetch('/api/admin/site', { method: 'PUT', body: document.value })
if (publish) {
const result = await $fetch<{ version: number }>('/api/admin/site/publish', { method: 'POST' })
message.value = `已发布 V${result.version}`
} else message.value = '草稿已保存'
markClean()
} catch (error: any) { message.value = apiErrorMessage(error, '保存失败，请检查必填项和英文标识') }
finally { busy.value = false }
}
const previewHref = computed(() => {
if (tab.value === 'products' && currentProduct.value) return `/products/${currentProduct.value.slug}?preview=draft`
if (tab.value === 'articles' && currentArticle.value) return `${currentArticle.value.type === 'statement' ? '/statements' : '/news'}/${currentArticle.value.slug}?preview=draft`
return '/team?preview=draft'
})
async function uploadImage(event: Event, apply: (url: string) => void) {
const input = event.target as HTMLInputElement
const file = input.files?.[0]
if (!file) return
busy.value = true
try {
const body = new FormData(); body.append('file', file)
const result = await $fetch<{ url: string }>('/api/admin/media', { method: 'POST', body })
apply(result.url); message.value = '图片已上传，请保存并发布'
} catch (error: any) { message.value = error?.data?.statusMessage || '图片上传失败' }
finally { busy.value = false; input.value = '' }
}
</script>
<template>
<main class="admin-shell">
<AdminSidebar active="content" :logo="document?.brand.logo" :brand-name="document?.brand.name" :english-name="document?.brand.englishName" />
<section class="admin-main">
<header class="admin-topbar">
<div><p>内容管理</p><small>课程产品、品牌动态、官方声明与陪伴团队</small></div>
<div class="admin-actions">
<span v-if="dirty" class="dirty-indicator">有未保存修改</span>
<span v-if="message" class="save-message"><PhCheckCircle :size="18" />{{ message }}</span>
<a :href="previewHref" target="_blank">预览草稿</a>
<button :disabled="busy" @click="save(false)"><PhFloppyDisk :size="18" />保存草稿</button>
<button class="publish-button" :disabled="busy" @click="save(true)"><PhUploadSimple :size="18" />发布更新</button>
</div>
</header>
<div v-if="loading" class="admin-loading">正在加载内容…</div>
<div v-else-if="document" class="content-admin-body">
<div class="content-tabs">
<button v-for="item in ([['products','课程与产品'],['articles','动态与声明'],['team','陪伴团队']] as const)" :key="item[0]" :class="{ active: tab === item[0] }" @click="tab = item[0]">{{ item[1] }}</button>
</div>
<div class="content-layout">
<aside class="content-list">
<button class="add-content" @click="addItem"><PhPlus :size="18" />新建内容</button>
<template v-if="tab === 'products'">
<button v-for="(item, index) in document.products" :key="item.slug" :class="{ active: selected.products === index }" @click="selected.products = index"><strong>{{ item.title }}</strong><small>{{ item.status }} · {{ item.slug }}</small></button>
</template>
<template v-if="tab === 'articles'">
<button v-for="(item, index) in document.articles" :key="item.slug" :class="{ active: selected.articles === index }" @click="selected.articles = index"><strong>{{ item.title }}</strong><small>{{ item.type }} · {{ item.status }}</small></button>
</template>
<template v-if="tab === 'team'">
<button v-for="(item, index) in document.team" :key="item.slug" :class="{ active: selected.team === index }" @click="selected.team = index"><strong>{{ item.name }}</strong><small>{{ item.role || '未填写角色' }} · {{ item.status }}</small></button>
</template>
</aside>
<section class="content-editor">
<div class="panel-heading"><div><span>编辑</span><h1>{{ tab === 'products' ? '课程与产品' : tab === 'articles' ? '动态与声明' : '陪伴团队' }}</h1></div><button class="danger-link" :disabled="!(document[tab]?.length)" @click="removeItem"><PhTrash :size="17" />删除</button></div>
<div v-if="tab === 'products' && currentProduct" class="form-grid">
<label>标题<input v-model="currentProduct.title" maxlength="60"></label><label>英文标识<input v-model="currentProduct.slug" placeholder="family-course"></label>
<label>类型<select v-model="currentProduct.type"><option value="course">课程</option><option value="service">服务</option><option value="tool">工具</option></select></label><label>状态<select v-model="currentProduct.status"><option value="draft">草稿</option><option value="published">已发布</option><option value="offline">已下线</option></select></label>
<label class="full">副标题<input v-model="currentProduct.subtitle"></label><label class="full">摘要<textarea v-model="currentProduct.summary" rows="3" /></label><label class="full">正文<textarea v-model="currentProduct.content" rows="12" /></label>
<label class="full">封面地址<input v-model="currentProduct.image"><span class="compact-upload"><input type="file" accept="image/png,image/jpeg,image/webp" @change="uploadImage($event, url => currentProduct!.image = url)">上传本地图片</span><MediaPicker v-model="currentProduct.image" /></label>
</div>
<div v-else-if="tab === 'articles' && currentArticle" class="form-grid">
<label>标题<input v-model="currentArticle.title"></label><label>英文标识<input v-model="currentArticle.slug"></label>
<label>类型<select v-model="currentArticle.type"><option value="news">品牌动态</option><option value="statement">官方声明</option><option value="media">媒体报道</option></select></label><label>状态<select v-model="currentArticle.status"><option value="draft">草稿</option><option value="published">已发布</option><option value="offline">已下线</option></select></label>
<label>发布日期<input v-model="currentArticle.publishedAt" type="date"></label><label>声明编号<input v-model="currentArticle.statementNo"></label>
<label class="full">摘要<textarea v-model="currentArticle.summary" rows="3" /></label><label class="full">正文<textarea v-model="currentArticle.content" rows="14" /></label>
<label>来源名称<input v-model="currentArticle.sourceName"></label><label>来源链接<input v-model="currentArticle.sourceUrl"></label>
<label class="full">封面地址<input v-model="currentArticle.cover"><span class="compact-upload"><input type="file" accept="image/png,image/jpeg,image/webp" @change="uploadImage($event, url => currentArticle!.cover = url)">上传本地图片</span><MediaPicker v-model="currentArticle.cover" /></label>
</div>
<div v-else-if="tab === 'team' && currentMember" class="form-grid">
<label>姓名<input v-model="currentMember.name"></label><label>英文标识<input v-model="currentMember.slug"></label>
<label>角色<input v-model="currentMember.role"></label><label>状态<select v-model="currentMember.status"><option value="draft">草稿</option><option value="published">已发布</option><option value="offline">已下线</option></select></label>
<label class="full">简介<textarea v-model="currentMember.summary" rows="5" /></label><label class="full">专长（用中文逗号分隔）<input :value="currentMember.specialties.join('，')" @input="currentMember.specialties = ($event.target as HTMLInputElement).value.split(/[，,]/).map(v => v.trim()).filter(Boolean).slice(0, 8)"></label>
<label class="full">头像地址<input v-model="currentMember.avatar"><span class="compact-upload"><input type="file" accept="image/png,image/jpeg,image/webp" @change="uploadImage($event, url => currentMember!.avatar = url)">上传本地图片</span><MediaPicker v-model="currentMember.avatar" /></label>
</div>
<div v-else class="empty-editor">当前分类暂无内容，点击“新建内容”开始编辑。</div>
</section>
</div>
</div>
</section>
</main>
</template>

176
app/pages/admin/index.vue Normal file
View File

@@ -0,0 +1,176 @@
<script setup lang="ts">
import {
PhArrowSquareOut as ArrowSquareOut,
PhCheckCircle as CheckCircle,
PhFloppyDisk as FloppyDisk,
PhImageSquare as ImageSquare,
PhUploadSimple as UploadSimple,
} from '@phosphor-icons/vue'
import { apiErrorMessage } from '~/composables/useUnsavedChanges'
import type { SiteDocument } from '../../../server/utils/site-schema'
definePageMeta({ layout: false })
useHead(() => ({ title: `首页管理｜${document.value?.brand.name || '慧遇书院'}` }))
const loading = ref(true)
const saving = ref(false)
const publishing = ref(false)
const message = ref('')
const document = ref<SiteDocument>()
const user = ref<{ displayName: string }>()
const uploadBusy = ref<string>()
const { dirty, markClean } = useUnsavedChanges(document)
onMounted(async () => {
try {
const [me, site] = await Promise.all([
$fetch<{ user: { displayName: string } }>('/api/auth/me'),
$fetch<{ data: SiteDocument }>('/api/admin/site'),
])
user.value = me.user
document.value = site.data
await nextTick()
markClean()
} catch {
await navigateTo('/admin/login')
} finally {
loading.value = false
}
})
async function save() {
if (!document.value) return
saving.value = true
message.value = ''
try {
await $fetch('/api/admin/site', { method: 'PUT', body: document.value })
message.value = '草稿已保存'
markClean()
} catch (error: any) {
message.value = apiErrorMessage(error, '保存失败，请检查页面内容')
} finally {
saving.value = false
}
}
async function publish() {
await save()
publishing.value = true
try {
const result = await $fetch<{ version: number }>('/api/admin/site/publish', { method: 'POST' })
message.value = `已发布 V${result.version}`
markClean()
} catch (error: any) {
message.value = apiErrorMessage(error, '发布失败，请检查页面内容')
} finally {
publishing.value = false
}
}
async function uploadImage(event: Event, target: 'brand.logo' | 'hero.backgroundImage' | 'teacher.portrait') {
const input = event.target as HTMLInputElement
const file = input.files?.[0]
if (!file || !document.value) return
uploadBusy.value = target
message.value = ''
try {
const body = new FormData()
body.append('file', file)
const result = await $fetch<{ url: string }>('/api/admin/media', { method: 'POST', body })
if (target === 'brand.logo') document.value.brand.logo = result.url
if (target === 'hero.backgroundImage') document.value.hero.backgroundImage = result.url
if (target === 'teacher.portrait') document.value.teacher.portrait = result.url
message.value = '图片已上传，请保存草稿并发布'
} catch (error: any) {
message.value = error?.data?.statusMessage || '图片上传失败'
} finally {
uploadBusy.value = undefined
input.value = ''
}
}
</script>
<template>
<main class="admin-shell">
<AdminSidebar active="home" :logo="document?.brand.logo" :brand-name="document?.brand.name" :english-name="document?.brand.englishName" />
<section class="admin-main">
<header class="admin-topbar">
<div><p>首页管理</p><small>维护官网核心文案并实时预览</small></div>
<div class="admin-actions">
<span v-if="dirty" class="dirty-indicator">有未保存修改</span>
<span v-if="message" class="save-message"><CheckCircle :size="18" />{{ message }}</span>
<a href="/?preview=draft" target="_blank"><ArrowSquareOut :size="19" />预览草稿</a>
<button type="button" :disabled="saving" @click="save"><FloppyDisk :size="19" />{{ saving ? '保存中' : '保存草稿' }}</button>
<button class="publish-button" type="button" :disabled="publishing" @click="publish"><UploadSimple :size="19" />{{ publishing ? '发布中' : '发布更新' }}</button>
</div>
</header>
<div v-if="loading" class="admin-loading">正在加载配置…</div>
<div v-else-if="document" class="admin-workspace">
<section class="editor-panel">
<div class="panel-heading"><div><span>00</span><h1>公司与品牌</h1></div><small>全站统一信息</small></div>
<div class="form-grid">
<label>官网展示名称<input v-model="document.brand.name" maxlength="40" placeholder="例如：慧遇书院"></label>
<label>公司主体全称<input v-model="document.brand.companyName" maxlength="100" placeholder="营业执照登记名称"></label>
<label>英文名称<input v-model="document.brand.englishName" maxlength="80"></label>
<label>品牌主张<input v-model="document.brand.slogan" maxlength="40"></label>
<label>品牌副文案<input v-model="document.brand.subSlogan" maxlength="80"></label>
<label class="full upload-field">品牌 Logo
<span class="image-input"><img :src="document.brand.logo" alt="当前品牌 Logo"><input type="file" accept="image/png,image/jpeg,image/webp" @change="uploadImage($event, 'brand.logo')"><b>{{ uploadBusy === 'brand.logo' ? '上传中…' : '选择图片' }}</b></span>
<MediaPicker v-model="document.brand.logo" />
</label>
</div>
<div class="panel-heading secondary"><div><span>01</span><h2>英雄区</h2></div><small>首屏核心信息</small></div>
<div class="form-grid">
<label>第一行标题<input v-model="document.hero.titleLine1" maxlength="20"></label>
<label>第二行标题<input v-model="document.hero.titleLine2" maxlength="20"></label>
<label class="full">副标题<input v-model="document.hero.subtitle" maxlength="80"></label>
<label>按钮文字<input v-model="document.hero.cta" maxlength="20"></label>
<label>SEO 标题<input v-model="document.seo.title" maxlength="70"></label>
<label class="full upload-field">首屏背景图
<span class="image-input"><img :src="document.hero.backgroundImage" alt="当前首屏背景"><input type="file" accept="image/png,image/jpeg,image/webp" @change="uploadImage($event, 'hero.backgroundImage')"><b>{{ uploadBusy === 'hero.backgroundImage' ? '上传中…' : '选择图片' }}</b></span>
<MediaPicker v-model="document.hero.backgroundImage" />
</label>
</div>
<div id="teacher-form" class="panel-heading secondary"><div><span>02</span><h2>卢慧老师</h2></div><small>首页展示摘要</small></div>
<div class="form-grid">
<label>姓名<input v-model="document.teacher.name" maxlength="30"></label>
<label>身份说明<input v-model="document.teacher.title" maxlength="80"></label>
<label class="full">简介<textarea v-model="document.teacher.summary" rows="5" maxlength="400" /></label>
<label class="full upload-field">人物肖像
<span class="image-input portrait"><img :src="document.teacher.portrait" :alt="document.teacher.name"><input type="file" accept="image/png,image/jpeg,image/webp" @change="uploadImage($event, 'teacher.portrait')"><b>{{ uploadBusy === 'teacher.portrait' ? '上传中…' : '选择图片' }}</b></span>
<MediaPicker v-model="document.teacher.portrait" />
</label>
</div>
<div class="panel-heading secondary"><div><span>03</span><h2>联系与搜索信息</h2></div><small>页脚和搜索引擎展示</small></div>
<div class="form-grid">
<label>联系电话<input v-model="document.contact.phone" maxlength="30"></label>
<label>联系邮箱<input v-model="document.contact.email" maxlength="100"></label>
<label class="full">公司地址<input v-model="document.contact.address" maxlength="160"></label>
<label class="full">SEO 描述<textarea v-model="document.seo.description" rows="3" maxlength="180" /></label>
</div>
<div id="media" class="media-placeholder">
<ImageSquare :size="32" weight="light" />
<div><strong>本地素材存储</strong><p>一期图片保存在服务器数据卷；Logo、首屏背景与人物肖像已支持上传配置。</p></div>
</div>
</section>
<aside class="preview-panel">
<div class="preview-label"><span>网站实时预览</span><small>{{ user?.displayName }}</small></div>
<div class="preview-window" :style="{ backgroundImage: `url(${document.hero.backgroundImage})` }">
<BrandLogo :src="document.brand.logo" :name="document.brand.name" :english-name="document.brand.englishName" />
<div><h2>{{ document.hero.titleLine1 }}<br>{{ document.hero.titleLine2 }}</h2><p>{{ document.hero.subtitle }}</p><span>{{ document.hero.cta }} →</span></div>
</div>
<div class="preview-teacher">
<img :src="document.teacher.portrait" :alt="document.teacher.name">
<div><h3>{{ document.teacher.name }}</h3><p>{{ document.teacher.title }}</p><small>{{ document.teacher.summary }}</small></div>
</div>
</aside>
</div>
</section>
</main>
</template>

58
app/pages/admin/login.vue Normal file
View File

@@ -0,0 +1,58 @@
<script setup lang="ts">
import {
PhArrowRight as ArrowRight,
PhEye as Eye,
PhEyeSlash as EyeSlash,
PhLockKey as LockKey,
PhUser as User,
} from '@phosphor-icons/vue'
definePageMeta({ layout: false })
const { data: publicSite } = await useFetch<{ data: { brand: { name: string; englishName: string; logo: string; subSlogan: string } } }>('/api/public/site')
const loginBrand = computed(() => publicSite.value?.data.brand ?? { name: '慧遇书院', englishName: 'HUIYU ACADEMY', logo: '/images/brand-mark-v2.png', subSlogan: '用科技与专业，陪伴每一次心灵的成长' })
useHead(() => ({ title: `后台管理登录｜${loginBrand.value.name}` }))
const form = reactive({ username: 'admin', password: '' })
const showPassword = ref(false)
const loading = ref(false)
const error = ref('')
async function login() {
error.value = ''
loading.value = true
try {
await $fetch('/api/auth/login', { method: 'POST', body: form })
await navigateTo('/admin')
} catch (cause: any) {
error.value = cause?.data?.statusMessage || '登录失败，请稍后重试'
} finally {
loading.value = false
}
}
</script>
<template>
<main class="login-page">
<div class="login-brand">
<BrandLogo :src="loginBrand.logo" :name="loginBrand.name" :english-name="loginBrand.englishName" />
<div>
<h1>身心疗愈<br>科技赋能</h1>
<p>{{ loginBrand.subSlogan }}</p>
</div>
</div>
<section class="login-card">
<p class="eyebrow">HUIYU CONTENT SYSTEM</p>
<h2>后台管理登录</h2>
<p class="login-intro">欢迎回来，请登录管理员账号</p>
<form @submit.prevent="login">
<label>账号</label>
<div class="field"><User :size="22" /><input v-model.trim="form.username" autocomplete="username" placeholder="请输入账号" required></div>
<label>密码</label>
<div class="field"><LockKey :size="22" /><input v-model="form.password" :type="showPassword ? 'text' : 'password'" autocomplete="current-password" placeholder="请输入密码" required><button type="button" aria-label="切换密码显示" @click="showPassword = !showPassword"><EyeSlash v-if="showPassword" :size="21" /><Eye v-else :size="21" /></button></div>
<p v-if="error" class="form-error" role="alert">{{ error }}</p>
<button class="login-submit" type="submit" :disabled="loading"><span>{{ loading ? '登录中…' : '登录后台' }}</span><ArrowRight :size="21" /></button>
</form>
<p class="security-note">安全连接已启用，登录状态受保护</p>
</section>
</main>
</template>

111
app/pages/admin/media.vue Normal file
View File

@@ -0,0 +1,111 @@
<script setup lang="ts">
import { PhArrowCounterClockwise, PhCheckCircle, PhFloppyDisk, PhImageSquare, PhTrash, PhUploadSimple } from '@phosphor-icons/vue'
import type { SiteDocument } from '../../../server/utils/site-schema'
definePageMeta({ layout: false })
useHead(() => ({ title: `素材中心｜${site.value?.brand.name || '慧遇书院'}` }))
interface MediaAsset {
id: number; key: string; originalName: string; mimeType: string; bytes: number; width: number; height: number
url: string; thumbnailUrl: string; altText: string; source: string; copyright: string
authorizationStatus: 'pending' | 'authorized' | 'restricted'; status: 'active' | 'trash' | 'deleted'; referenced: boolean
createdAt: string; deletedAt: string | null
}
const site = ref<SiteDocument>()
const items = ref<MediaAsset[]>([])
const selectedId = ref<number>()
const view = ref<'active' | 'trash'>('active')
const loading = ref(true), busy = ref(false), message = ref('')
const uploadMeta = reactive({ altText: '', source: '', copyright: '', authorizationStatus: 'pending' as MediaAsset['authorizationStatus'] })
const selected = computed(() => items.value.find(item => item.id === selectedId.value))
onMounted(async () => {
try {
await $fetch('/api/auth/me')
site.value = (await $fetch<{ data: SiteDocument }>('/api/admin/site')).data
await loadItems()
} catch { await navigateTo('/admin/login') }
finally { loading.value = false }
})
async function loadItems() {
const result = await $fetch<{ data: MediaAsset[] }>('/api/admin/media', { query: { status: view.value } })
items.value = result.data
selectedId.value = items.value[0]?.id
}
async function changeView(next: 'active' | 'trash') { view.value = next; message.value = ''; await loadItems() }
async function upload(event: Event) {
const input = event.target as HTMLInputElement
const file = input.files?.[0]
if (!file) return
busy.value = true; message.value = ''
try {
const body = new FormData(); body.append('file', file)
Object.entries(uploadMeta).forEach(([key, value]) => body.append(key, value))
const result = await $fetch<{ media: MediaAsset }>('/api/admin/media', { method: 'POST', body })
items.value.unshift(result.media); selectedId.value = result.media.id
uploadMeta.altText = ''; uploadMeta.source = ''; uploadMeta.copyright = ''; uploadMeta.authorizationStatus = 'pending'
message.value = '素材已上传并生成 WebP 与缩略图'
} catch (error: any) { message.value = error?.data?.statusMessage || '上传失败' }
finally { busy.value = false; input.value = '' }
}
async function saveMetadata() {
if (!selected.value) return
busy.value = true; message.value = ''
try {
await $fetch(`/api/admin/media/${selected.value.id}`, { method: 'PATCH', body: { altText: selected.value.altText, source: selected.value.source, copyright: selected.value.copyright, authorizationStatus: selected.value.authorizationStatus } })
message.value = '素材信息已保存'
} catch (error: any) { message.value = error?.data?.statusMessage || '保存失败' }
finally { busy.value = false }
}
async function trash() {
if (!selected.value || !window.confirm('确定把该素材移入回收站吗？')) return
busy.value = true; message.value = ''
try { await $fetch(`/api/admin/media/${selected.value.id}`, { method: 'DELETE' }); message.value = '素材已移入回收站'; await loadItems() }
catch (error: any) { message.value = error?.data?.statusMessage || '删除失败' }
finally { busy.value = false }
}
async function restore() {
if (!selected.value) return
busy.value = true
try { await $fetch(`/api/admin/media/${selected.value.id}/restore`, { method: 'POST' }); message.value = '素材已恢复'; await loadItems() }
catch (error: any) { message.value = error?.data?.statusMessage || '恢复失败' }
finally { busy.value = false }
}
const formatBytes = (bytes: number) => bytes < 1024 * 1024 ? `${Math.ceil(bytes / 1024)} KB` : `${(bytes / 1024 / 1024).toFixed(1)} MB`
</script>
<template>
<main class="admin-shell">
<AdminSidebar active="media" :logo="site?.brand.logo" :brand-name="site?.brand.name" :english-name="site?.brand.englishName" />
<section class="admin-main">
<header class="admin-topbar"><div><p>素材中心</p><small>原图、WebP 衍生图、授权信息与安全回收站</small></div><div class="admin-actions"><span v-if="message" class="save-message"><PhCheckCircle :size="18" />{{ message }}</span><button :class="{ 'publish-button': view === 'active' }" @click="changeView('active')">素材库</button><button :class="{ 'publish-button': view === 'trash' }" @click="changeView('trash')">回收站</button></div></header>
<div v-if="loading" class="admin-loading">正在加载素材…</div>
<div v-else class="media-admin-body">
<section v-if="view === 'active'" class="media-upload-panel editor-panel">
<div><PhUploadSimple :size="30" /><strong>上传新图片</strong><small>支持 JPG、PNG、WebP；最大 8MB、4000 万像素</small></div>
<div class="media-upload-meta"><input v-model="uploadMeta.altText" placeholder="ALT 描述（建议填写）"><input v-model="uploadMeta.source" placeholder="素材来源"><input v-model="uploadMeta.copyright" placeholder="版权/授权说明"><select v-model="uploadMeta.authorizationStatus"><option value="pending">待核验</option><option value="authorized">已授权</option><option value="restricted">限制使用</option></select></div>
<label class="media-upload-button"><input type="file" accept="image/jpeg,image/png,image/webp" :disabled="busy" @change="upload">{{ busy ? '处理中…' : '选择并上传图片' }}</label>
</section>
<div class="media-library-layout">
<section class="media-grid-panel">
<div v-if="!items.length" class="empty-editor"><PhImageSquare :size="38" /><p>{{ view === 'active' ? '尚未上传素材' : '回收站为空' }}</p></div>
<button v-for="item in items" :key="item.id" :class="['media-tile', { active: item.id === selectedId }]" @click="selectedId = item.id"><img :src="item.thumbnailUrl" :alt="item.altText || item.originalName"><span>{{ item.originalName }}</span><small>{{ item.width }}×{{ item.height }} · {{ formatBytes(item.bytes) }}</small><b v-if="item.referenced">使用中</b></button>
</section>
<aside v-if="selected" class="media-detail editor-panel">
<img :src="selected.url" :alt="selected.altText || selected.originalName"><div class="media-detail-meta"><strong>{{ selected.originalName }}</strong><small>{{ selected.mimeType }} · {{ selected.width }}×{{ selected.height }} · {{ formatBytes(selected.bytes) }}</small><a :href="selected.url" target="_blank">打开衍生图</a></div>
<div v-if="view === 'active'" class="form-grid"><label class="full">ALT 描述<input v-model="selected.altText" maxlength="160"></label><label class="full">素材来源<input v-model="selected.source" maxlength="200"></label><label class="full">版权/授权说明<input v-model="selected.copyright" maxlength="200"></label><label class="full">授权状态<select v-model="selected.authorizationStatus"><option value="pending">待核验</option><option value="authorized">已授权</option><option value="restricted">限制使用</option></select></label></div>
<div class="media-detail-actions"><template v-if="view === 'active'"><button :disabled="busy" @click="saveMetadata"><PhFloppyDisk :size="17" />保存信息</button><button class="danger-link" :disabled="busy || selected.referenced" @click="trash"><PhTrash :size="17" />{{ selected.referenced ? '页面使用中' : '移入回收站' }}</button></template><button v-else :disabled="busy" @click="restore"><PhArrowCounterClockwise :size="17" />恢复素材</button></div>
</aside>
</div>
</div>
</section>
</main>
</template>

76
app/pages/admin/settings.vue Normal file
View File

@@ -0,0 +1,76 @@
<script setup lang="ts">
import { PhCheckCircle, PhFloppyDisk, PhPlus, PhTrash, PhUploadSimple } from '@phosphor-icons/vue'
import { apiErrorMessage } from '~/composables/useUnsavedChanges'
import type { SiteDocument } from '../../../server/utils/site-schema'
definePageMeta({ layout: false })
useHead(() => ({ title: `网站设置｜${document.value?.brand.name || '慧遇书院'}` }))
const document = ref<SiteDocument>()
const loading = ref(true), busy = ref(false), message = ref('')
const revisions = ref<Array<{ version: number; action: string; comment: string | null; createdAt: string }>>([])
const auditLogs = ref<Array<{ id: number; action: string; entityType: string; entityKey: string | null; ipAddress: string | null; createdAt: string; operator: string }>>([])
type HealthStatus = { status: string; version: string; checks: { database: string; uploads: string; freeBytes: number } }
const health = ref<HealthStatus>()
const passwords = reactive({ currentPassword: '', newPassword: '', confirmPassword: '' })
const { dirty, markClean } = useUnsavedChanges(document)
onMounted(async () => {
try {
await $fetch('/api/auth/me')
const [siteResult, revisionResult, auditResult, healthResult] = await Promise.all([$fetch<{ data: SiteDocument }>('/api/admin/site'), $fetch<{ data: typeof revisions.value }>('/api/admin/site/revisions'), $fetch<{ data: typeof auditLogs.value }>('/api/admin/audit'), $fetch<HealthStatus>('/api/health')])
document.value = siteResult.data; revisions.value = revisionResult.data; auditLogs.value = auditResult.data; health.value = healthResult
await nextTick(); markClean()
}
catch { await navigateTo('/admin/login') }
finally { loading.value = false }
})
async function save(publish = false) {
if (!document.value) return
busy.value = true; message.value = ''
try {
await $fetch('/api/admin/site', { method: 'PUT', body: document.value })
if (publish) { const result = await $fetch<{ version: number }>('/api/admin/site/publish', { method: 'POST' }); message.value = `已发布 V${result.version}` }
else message.value = '草稿已保存'
markClean()
} catch (error: any) { message.value = apiErrorMessage(error, '保存失败，请检查内容长度') }
finally { busy.value = false }
}
async function restoreVersion(version: number) {
if (!window.confirm(`确定把 V${version} 恢复为当前草稿吗？已发布网站不会立即变化。`)) return
busy.value = true
try { document.value = (await $fetch<{ data: SiteDocument }>(`/api/admin/site/revisions/${version}/restore`, { method: 'POST' })).data; await nextTick(); markClean(); message.value = `V${version} 已恢复为草稿，请检查后再发布` }
catch (error: any) { message.value = error?.data?.statusMessage || '恢复失败' }
finally { busy.value = false }
}
async function changePassword() {
if (passwords.newPassword !== passwords.confirmPassword) { message.value = '两次输入的新密码不一致'; return }
busy.value = true
try {
await $fetch('/api/auth/password', { method: 'PUT', body: { currentPassword: passwords.currentPassword, newPassword: passwords.newPassword } })
passwords.currentPassword = ''; passwords.newPassword = ''; passwords.confirmPassword = ''; message.value = '管理员密码已修改'
} catch (error: any) { message.value = error?.data?.statusMessage || error?.data?.data?.issues?.[0]?.message || '密码修改失败' }
finally { busy.value = false }
}
</script>
<template>
<main class="admin-shell"><AdminSidebar active="settings" :logo="document?.brand.logo" :brand-name="document?.brand.name" :english-name="document?.brand.englishName" />
<section class="admin-main"><header class="admin-topbar"><div><p>网站设置</p><small>公司主体、人物资料、官方渠道与法律文本</small></div><div class="admin-actions"><span v-if="dirty" class="dirty-indicator">有未保存修改</span><span v-if="message" class="save-message"><PhCheckCircle :size="18" />{{ message }}</span><a href="/luhui?preview=draft" target="_blank">预览人物页</a><button :disabled="busy" @click="save(false)"><PhFloppyDisk :size="18" />保存草稿</button><button class="publish-button" :disabled="busy" @click="save(true)"><PhUploadSimple :size="18" />发布更新</button></div></header>
<div v-if="loading" class="admin-loading">正在加载设置…</div>
<div v-else-if="document" class="settings-admin-body">
<section class="editor-panel"><div class="panel-heading"><div><span>01</span><h1>公司主体信息</h1></div><small>正式上线前必须核验</small></div><div class="form-grid">
<label>官网展示名称<input v-model="document.brand.name" placeholder="例如：慧遇书院"></label><label>公司主体全称<input v-model="document.brand.companyName" placeholder="营业执照登记名称"></label><label>统一社会信用代码<input v-model="document.brand.creditCode"></label><label>版权信息<input v-model="document.brand.copyright"></label><label>ICP备案<input v-model="document.brand.icp"></label><label>公安备案<input v-model="document.brand.policeRecord"></label><label class="full">公司介绍<textarea v-model="document.brand.introduction" rows="5" /></label>
</div></section>
<section class="editor-panel"><div class="panel-heading"><div><span>02</span><h2>卢慧老师完整资料</h2></div><small>请以本人确认内容为准</small></div><div class="form-grid">
<label class="full">完整介绍<textarea v-model="document.teacher.fullBio" rows="12" /></label><label class="full">标签（用中文逗号分隔）<input :value="document.teacher.tags.join('，')" @input="document.teacher.tags = ($event.target as HTMLInputElement).value.split(/[，,]/).map(v => v.trim()).filter(Boolean).slice(0, 6)"></label><label class="full">代表成果（每行一项）<textarea :value="document.teacher.achievements.join('\n')" rows="6" @input="document.teacher.achievements = ($event.target as HTMLTextAreaElement).value.split('\n').map(v => v.trim()).filter(Boolean).slice(0, 12)" /></label>
</div><div class="subsection-heading"><h3>经历与实践</h3><button class="inline-add" @click="document.teacher.experiences.push({ year: '', title: '新经历', description: '' })"><PhPlus :size="17" />新增经历</button></div><div class="repeat-settings"><article v-for="(experience, index) in document.teacher.experiences" :key="index"><div class="form-grid"><label>年份<input v-model="experience.year"></label><label>标题<input v-model="experience.title"></label><label class="full">说明<textarea v-model="experience.description" rows="3" /></label></div><button class="danger-link" @click="document.teacher.experiences.splice(index, 1)"><PhTrash :size="16" />移除</button></article></div><div class="subsection-heading"><h3>外部权威链接</h3><button class="inline-add" @click="document.teacher.externalLinks.push({ label: '新链接', url: '' })"><PhPlus :size="17" />新增链接</button></div><div class="repeat-settings"><article v-for="(link, index) in document.teacher.externalLinks" :key="index"><div class="form-grid"><label>名称<input v-model="link.label"></label><label>链接<input v-model="link.url"></label></div><button class="danger-link" @click="document.teacher.externalLinks.splice(index, 1)"><PhTrash :size="16" />移除</button></article></div></section>
<section class="editor-panel"><div class="panel-heading"><div><span>03</span><h2>官方渠道</h2></div><button class="inline-add" @click="document.channels.push({ name: '新渠道', account: '', url: '', qrCode: '' })"><PhPlus :size="17" />新增渠道</button></div><div class="repeat-settings"><article v-for="(channel, index) in document.channels" :key="index"><div class="form-grid"><label>渠道名称<input v-model="channel.name"></label><label>账号<input v-model="channel.account"></label><label>跳转链接<input v-model="channel.url"></label><label>二维码图片地址<input v-model="channel.qrCode"><MediaPicker v-model="channel.qrCode" label="从素材库选择二维码" /></label></div><button class="danger-link" @click="document.channels.splice(index, 1)"><PhTrash :size="16" />移除</button></article></div></section>
<section class="editor-panel"><div class="panel-heading"><div><span>04</span><h2>法律文本</h2></div><small>纯文本安全展示</small></div><div class="form-grid"><label>隐私政策标题<input v-model="document.legal.privacyTitle"></label><label>服务条款标题<input v-model="document.legal.termsTitle"></label><label class="full">隐私政策<textarea v-model="document.legal.privacyContent" rows="12" /></label><label class="full">服务条款<textarea v-model="document.legal.termsContent" rows="12" /></label></div></section>
<section class="editor-panel"><div class="panel-heading"><div><span>05</span><h2>发布版本</h2></div><small>最近 20 个发布快照</small></div><div class="revision-list"><article v-for="revision in revisions" :key="revision.version"><div><strong>V{{ revision.version }}</strong><small>{{ new Date(revision.createdAt).toLocaleString('zh-CN') }}</small></div><button :disabled="busy" @click="restoreVersion(revision.version)">恢复为草稿</button></article><p v-if="!revisions.length">尚无发布历史</p></div></section>
<section class="editor-panel"><div class="panel-heading"><div><span>06</span><h2>管理员密码</h2></div><small>至少 12 位，包含大小写、数字和特殊字符</small></div><form class="form-grid" @submit.prevent="changePassword"><label>当前密码<input v-model="passwords.currentPassword" type="password" autocomplete="current-password"></label><label>新密码<input v-model="passwords.newPassword" type="password" autocomplete="new-password"></label><label>确认新密码<input v-model="passwords.confirmPassword" type="password" autocomplete="new-password"></label><div class="password-action"><button class="inline-add" :disabled="busy">修改密码</button></div></form></section>
<section class="editor-panel"><div class="panel-heading"><div><span>07</span><h2>系统状态与操作记录</h2></div><small v-if="health" class="health-ok">运行正常 · {{ health.version }} · 可用空间 {{ (health.checks.freeBytes / 1024 / 1024 / 1024).toFixed(1) }} GB</small></div><div class="audit-list"><article v-for="log in auditLogs.slice(0, 20)" :key="log.id"><div><strong>{{ log.action }}</strong><span>{{ log.entityType }}<template v-if="log.entityKey"> · {{ log.entityKey }}</template></span></div><small>{{ log.operator }} · {{ new Date(log.createdAt).toLocaleString('zh-CN') }}</small></article><p v-if="!auditLogs.length">暂无操作记录</p></div></section>
</div>
</section>
</main>
</template>