初始化
This commit is contained in:
李琦
@@ -38,9 +38,15 @@
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/admin/snippets" class="nav-link" active-class="active">
|
||||
<span class="nav-icon">💻</span>
|
||||
<span class="nav-text">代码片段</span>
|
||||
<router-link to="/admin/tags" class="nav-link" active-class="active">
|
||||
<span class="nav-icon">🏷️</span>
|
||||
<span class="nav-text">标签管理</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/admin/about" class="nav-link" active-class="active">
|
||||
<span class="nav-icon"><EFBFBD></span>
|
||||
<span class="nav-text">关于页面</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
245
client/src/pages/admin/About.vue
Normal file
245
client/src/pages/admin/About.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div class="admin-about">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">关于页面管理</h1>
|
||||
<button @click="$router.push('/admin/about/create')" class="btn btn-primary">
|
||||
<span class="icon">+</span> 新增资料
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>头衔/简介</th>
|
||||
<th>主要展示</th>
|
||||
<th>最后更新</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="profile in profiles" :key="profile.id">
|
||||
<td>
|
||||
<div class="flex items-center gap-3">
|
||||
<img :src="profile.avatar" alt="avatar" class="w-8 h-8 rounded-full object-cover" v-if="profile.avatar">
|
||||
<span>{{ profile.name }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="bio-cell">{{ truncate(profile.bio, 50) }}</td>
|
||||
<td>
|
||||
<span v-if="profile.isPrimary" class="badge badge-success">是</span>
|
||||
<span v-else class="badge badge-secondary">否</span>
|
||||
</td>
|
||||
<td>{{ formatDate(profile.updatedAt) }}</td>
|
||||
<td class="actions">
|
||||
<button @click="$router.push(`/admin/about/edit/${profile.id}`)" class="btn btn-sm btn-secondary">
|
||||
编辑
|
||||
</button>
|
||||
<button @click="handleDelete(profile.id)" class="btn btn-sm btn-danger">
|
||||
删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="profiles.length === 0">
|
||||
<td colspan="5" class="text-center py-4 text-gray-400">暂无数据</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getAdminAboutProfiles, deleteAboutProfile, AboutProfile } from '../../services/api'
|
||||
import { useToast } from '../../composables/useToast'
|
||||
|
||||
const profiles = ref<AboutProfile[]>([])
|
||||
const toast = useToast()
|
||||
|
||||
const fetchProfiles = async () => {
|
||||
try {
|
||||
profiles.value = await getAdminAboutProfiles()
|
||||
} catch (error) {
|
||||
console.error('Error fetching profiles:', error)
|
||||
toast.error('获取资料列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
if (confirm('确定要删除这条资料吗？')) {
|
||||
try {
|
||||
await deleteAboutProfile(id)
|
||||
toast.success('删除成功')
|
||||
fetchProfiles()
|
||||
} catch (error) {
|
||||
console.error('Error deleting profile:', error)
|
||||
toast.error('删除失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const truncate = (text: string, length: number) => {
|
||||
if (!text) return ''
|
||||
// Strip HTML tags
|
||||
const plainText = text.replace(/<[^>]+>/g, '')
|
||||
return plainText.length > length ? plainText.substring(0, length) + '...' : plainText
|
||||
}
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
if (!dateStr) return '-'
|
||||
return new Date(dateStr).toLocaleDateString()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchProfiles()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-about {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #d4b383;
|
||||
font-family: 'Inter', sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.admin-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.admin-table th,
|
||||
.admin-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.admin-table th {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
font-weight: 600;
|
||||
color: #d4b383;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-table tr:hover {
|
||||
background: rgba(212, 179, 131, 0.05);
|
||||
}
|
||||
|
||||
.bio-cell {
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
border: 1px solid transparent;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #d4b383;
|
||||
color: #050505;
|
||||
border-color: #d4b383;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: transparent;
|
||||
color: #d4b383;
|
||||
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: rgba(212, 179, 131, 0.1);
|
||||
border-color: #d4b383;
|
||||
color: #d4b383;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: rgba(239, 68, 68, 0.2);
|
||||
color: #ef4444;
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: rgba(239, 68, 68, 0.3);
|
||||
border-color: #ef4444;
|
||||
box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.25em 0.6em;
|
||||
font-size: 75%;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background-color: rgba(16, 185, 129, 0.2);
|
||||
color: #34d399;
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
background-color: rgba(107, 114, 128, 0.2);
|
||||
color: #9ca3af;
|
||||
border: 1px solid rgba(107, 114, 128, 0.3);
|
||||
}
|
||||
</style>
|
||||
430
client/src/pages/admin/AboutForm.vue
Normal file
430
client/src/pages/admin/AboutForm.vue
Normal file
@@ -0,0 +1,430 @@
|
||||
<template>
|
||||
<div class="about-form-container">
|
||||
<h1 class="page-title">{{ isEditing ? '编辑资料' : '新建资料' }}</h1>
|
||||
|
||||
<div class="form-container">
|
||||
<form @submit.prevent="handleSubmit" class="about-form">
|
||||
<!-- Basic Info Section -->
|
||||
<h3 class="section-title">基本信息</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="form-group">
|
||||
<label for="name">姓名</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
placeholder="请输入姓名"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="avatar">头像 URL</label>
|
||||
<input
|
||||
type="text"
|
||||
id="avatar"
|
||||
v-model="form.avatar"
|
||||
placeholder="请输入头像链接"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="form-group">
|
||||
<label for="location">所在地</label>
|
||||
<input
|
||||
type="text"
|
||||
id="location"
|
||||
v-model="form.location"
|
||||
placeholder="例如：中国 · 杭州"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">邮箱</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
placeholder="example@domain.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="form-group">
|
||||
<label for="wechat">微信</label>
|
||||
<input
|
||||
type="text"
|
||||
id="wechat"
|
||||
v-model="form.wechat"
|
||||
placeholder="微信号"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group flex items-end pb-3">
|
||||
<label class="checkbox-container">
|
||||
<input type="checkbox" v-model="form.isPrimary">
|
||||
<span class="checkmark"></span>
|
||||
<span class="label-text">设为主页展示资料</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="bio">个人简介 (支持 HTML)</label>
|
||||
<textarea
|
||||
id="bio"
|
||||
v-model="form.bio"
|
||||
rows="4"
|
||||
placeholder="请输入个人简介..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Tech Stack Section -->
|
||||
<h3 class="section-title mt-8">技术栈</h3>
|
||||
<div class="form-group">
|
||||
<label for="techStack">技术标签 (用英文逗号分隔)</label>
|
||||
<input
|
||||
type="text"
|
||||
id="techStack"
|
||||
v-model="techStackInput"
|
||||
placeholder="Vue 3, React, TypeScript, Golang..."
|
||||
/>
|
||||
<div class="tech-tags mt-2 flex flex-wrap gap-2" v-if="techStackPreview.length">
|
||||
<span v-for="(tag, idx) in techStackPreview" :key="idx" class="badge">{{ tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Experience Section -->
|
||||
<h3 class="section-title mt-8 flex justify-between items-center">
|
||||
<span>工作经历</span>
|
||||
<button type="button" @click="addExperience" class="btn btn-sm btn-secondary">+ 添加经历</button>
|
||||
</h3>
|
||||
|
||||
<div class="experiences-list space-y-4">
|
||||
<div v-for="(exp, index) in form.experiences" :key="index" class="experience-item p-4 border border-white/10 rounded-lg bg-white/5 relative">
|
||||
<button type="button" @click="removeExperience(index)" class="absolute top-2 right-2 text-red-500 hover:text-red-400">×</button>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="form-group mb-0">
|
||||
<label class="text-xs text-white/60 mb-1 block">年份/时间段</label>
|
||||
<input type="text" v-model="exp.year" placeholder="2023 - 至今" class="text-sm">
|
||||
</div>
|
||||
<div class="form-group mb-0">
|
||||
<label class="text-xs text-white/60 mb-1 block">职位/角色</label>
|
||||
<input type="text" v-model="exp.role" placeholder="高级前端工程师" class="text-sm">
|
||||
</div>
|
||||
<div class="form-group mb-0">
|
||||
<label class="text-xs text-white/60 mb-1 block">公司/组织</label>
|
||||
<input type="text" v-model="exp.company" placeholder="某某科技有限公司" class="text-sm">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="form.experiences.length === 0" class="text-center text-white/40 py-4">
|
||||
暂无工作经历，请点击右上角添加
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Buttons -->
|
||||
<div class="form-actions mt-8">
|
||||
<button type="button" class="cancel-btn" @click="$router.push('/admin/about')">
|
||||
取消
|
||||
</button>
|
||||
<button type="submit" class="submit-btn" :disabled="isSubmitting">
|
||||
{{ isSubmitting ? '提交中...' : (isEditing ? '更新资料' : '创建资料') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed, onMounted, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useToast } from '../../composables/useToast'
|
||||
import { createAboutProfile, updateAboutProfile, getAdminAboutProfiles, AboutProfile, Experience } from '../../services/api'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const toast = useToast()
|
||||
|
||||
const isSubmitting = ref(false)
|
||||
const isEditing = computed(() => route.params.id !== undefined && route.params.id !== 'create')
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
avatar: '',
|
||||
location: '',
|
||||
bio: '',
|
||||
email: '',
|
||||
wechat: '',
|
||||
isPrimary: false,
|
||||
experiences: [] as Experience[]
|
||||
})
|
||||
|
||||
const techStackInput = ref('')
|
||||
|
||||
const techStackPreview = computed(() => {
|
||||
return techStackInput.value.split(',').map(t => t.trim()).filter(t => t)
|
||||
})
|
||||
|
||||
const addExperience = () => {
|
||||
form.experiences.push({ year: '', role: '', company: '' })
|
||||
}
|
||||
|
||||
const removeExperience = (index: number) => {
|
||||
form.experiences.splice(index, 1)
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
isSubmitting.value = true
|
||||
try {
|
||||
const payload = {
|
||||
...form,
|
||||
techStack: techStackPreview.value
|
||||
}
|
||||
|
||||
if (isEditing.value) {
|
||||
await updateAboutProfile(Number(route.params.id), payload)
|
||||
toast.success('资料更新成功')
|
||||
} else {
|
||||
await createAboutProfile(payload)
|
||||
toast.success('资料创建成功')
|
||||
}
|
||||
router.push('/admin/about')
|
||||
} catch (error: any) {
|
||||
console.error('Error submitting form:', error)
|
||||
toast.error(error.message || '操作失败')
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (isEditing.value) {
|
||||
try {
|
||||
// API currently doesn't have fetchAboutProfileById (public one is singleton),
|
||||
// but admin list returns all. We can fetch list and find by ID, or rely on update API if it returns data?
|
||||
// Actually standard way is `fetchAboutProfile(id)`.
|
||||
// I only added `getAdminAboutProfiles` (list) in api.ts.
|
||||
// I should have added `getAdminAboutProfile(id)` in backend and frontend.
|
||||
// For now, let's fetch list and find. It's not efficient but works for small data.
|
||||
const profiles = await getAdminAboutProfiles()
|
||||
const profile = profiles.find(p => p.id === Number(route.params.id))
|
||||
|
||||
if (profile) {
|
||||
form.name = profile.name
|
||||
form.avatar = profile.avatar
|
||||
form.location = profile.location
|
||||
form.bio = profile.bio
|
||||
form.email = profile.email
|
||||
form.wechat = profile.wechat
|
||||
form.isPrimary = profile.isPrimary
|
||||
form.experiences = profile.experiences || []
|
||||
techStackInput.value = (profile.techStack || []).join(', ')
|
||||
} else {
|
||||
toast.error('未找到该资料')
|
||||
router.push('/admin/about')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading profile:', error)
|
||||
toast.error('加载资料失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.about-form-container {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: #d4b383;
|
||||
margin-bottom: 1.5rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #d4b383;
|
||||
margin-bottom: 1.25rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: white;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #d4b383;
|
||||
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.checkbox-container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.checkbox-container:hover input ~ .checkmark {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.checkbox-container input:checked ~ .checkmark {
|
||||
background-color: #d4b383;
|
||||
border-color: #d4b383;
|
||||
}
|
||||
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark:after {
|
||||
left: 7px;
|
||||
top: 3px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid #050505;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.cancel-btn:hover {
|
||||
background: rgba(212, 179, 131, 0.1);
|
||||
border-color: #d4b383;
|
||||
color: #d4b383;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: #d4b383;
|
||||
color: #050505;
|
||||
border: 1px solid #d4b383;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.submit-btn:hover:not(:disabled) {
|
||||
background-color: transparent;
|
||||
color: #d4b383;
|
||||
}
|
||||
|
||||
.submit-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: rgba(212, 179, 131, 0.1);
|
||||
border-color: #d4b383;
|
||||
color: #d4b383;
|
||||
}
|
||||
</style>
|
||||
@@ -53,6 +53,11 @@ const routes = [
|
||||
{ path: 'tags/create', name: 'admin-tags-create', component: () => import('./pages/admin/TagForm.vue') },
|
||||
{ path: 'tags/:id/edit', name: 'admin-tags-edit', component: () => import('./pages/admin/TagForm.vue') },
|
||||
|
||||
// 关于页面管理
|
||||
{ path: 'about', name: 'admin-about', component: () => import('./pages/admin/About.vue') },
|
||||
{ path: 'about/create', name: 'admin-about-create', component: () => import('./pages/admin/AboutForm.vue') },
|
||||
{ path: 'about/edit/:id', name: 'admin-about-edit', component: () => import('./pages/admin/AboutForm.vue') },
|
||||
|
||||
// 系统配置
|
||||
{ path: 'settings', name: 'admin-settings', component: () => import('./pages/admin/Settings.vue') },
|
||||
|
||||
|
||||
@@ -891,3 +891,69 @@ export const fetchAboutProfile = async (): Promise<AboutProfile> => {
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
export const getAdminAboutProfiles = async (): Promise<AboutProfile[]> => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/admin/about`, {
|
||||
headers: getAuthHeaders()
|
||||
})
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json()
|
||||
throw new Error(errorData.error || '获取个人资料列表失败')
|
||||
}
|
||||
return await response.json()
|
||||
} catch (error) {
|
||||
console.error('Get admin about profiles error:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
export const createAboutProfile = async (profileData: Omit<AboutProfile, 'id' | 'createdAt' | 'updatedAt'>): Promise<void> => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/admin/about`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify(profileData)
|
||||
})
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json()
|
||||
throw new Error(errorData.error || '创建个人资料失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Create about profile error:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
export const updateAboutProfile = async (id: number, profileData: Omit<AboutProfile, 'id' | 'createdAt' | 'updatedAt'>): Promise<void> => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/admin/about/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify(profileData)
|
||||
})
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json()
|
||||
throw new Error(errorData.error || '更新个人资料失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Update about profile error:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
export const deleteAboutProfile = async (id: number): Promise<void> => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/admin/about/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
})
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json()
|
||||
throw new Error(errorData.error || '删除个人资料失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Delete about profile error:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user