后台布局
This commit is contained in:
李琦
@@ -48,6 +48,9 @@
|
||||
</nav>
|
||||
<div class="hidden md:flex items-center gap-4">
|
||||
<a href="#" class="text-art-muted hover:text-white transition-colors"><i data-lucide="github" class="w-5 h-5"></i></a>
|
||||
<a href="/admin" target="_blank" class="text-art-muted hover:text-white transition-colors" title="后台管理">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i>
|
||||
</a>
|
||||
<button @click="goTo('/services')" class="px-5 py-2 text-xs font-bold tracking-widest uppercase border border-white/20 hover:border-art-accent hover:text-art-accent transition-all rounded-full">
|
||||
合作
|
||||
</button>
|
||||
|
||||
@@ -1,7 +1,21 @@
|
||||
<template>
|
||||
<div class="w-full animate-reveal">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-serif italic text-white">{{ isEditing ? '编辑文章' : '新建文章' }}</h1>
|
||||
<div class="w-full animate-reveal h-[calc(100vh-8rem)] flex flex-col">
|
||||
<!-- Top Bar -->
|
||||
<div class="flex items-center justify-between mb-4 shrink-0">
|
||||
<div class="flex items-center gap-4">
|
||||
<h1 class="text-2xl font-serif italic text-white">{{ isEditing ? '编辑文章' : '新建文章' }}</h1>
|
||||
<button
|
||||
type="button"
|
||||
@click="toggleSidebar"
|
||||
class="p-2 rounded-md hover:bg-white/5 text-art-muted hover:text-white transition-colors border border-transparent hover:border-white/10"
|
||||
:title="isSidebarOpen ? '收起侧边栏' : '展开侧边栏'"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300" :class="{ 'rotate-180': !isSidebarOpen }">
|
||||
<rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
|
||||
<line x1="15" x2="15" y1="3" y2="21"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button type="button" class="admin-btn-secondary" @click="handleCancel">
|
||||
取消
|
||||
@@ -12,117 +26,105 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Left Column: Main Content -->
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<div class="admin-card p-6 space-y-6">
|
||||
<!-- Title Field -->
|
||||
<div class="space-y-2">
|
||||
<label for="title" class="block text-sm font-medium text-art-muted uppercase tracking-wider">文章标题</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
v-model="form.title"
|
||||
class="admin-input text-lg font-medium placeholder-white/20"
|
||||
placeholder="请输入文章标题"
|
||||
required
|
||||
/>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.title">
|
||||
{{ errors.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Field -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-art-muted uppercase tracking-wider">文章内容</label>
|
||||
<div class="border border-white/10 rounded-lg overflow-hidden focus-within:border-art-accent focus-within:ring-1 focus-within:ring-art-accent transition-all duration-200">
|
||||
<MdEditor
|
||||
v-model="form.content"
|
||||
theme="dark"
|
||||
:preview="false"
|
||||
placeholder="请输入 Markdown 内容..."
|
||||
class="custom-md-editor"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.content">
|
||||
{{ errors.content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Excerpt Field -->
|
||||
<div class="space-y-2">
|
||||
<label for="excerpt" class="block text-sm font-medium text-art-muted uppercase tracking-wider">文章摘要</label>
|
||||
<textarea
|
||||
id="excerpt"
|
||||
v-model="form.excerpt"
|
||||
rows="4"
|
||||
class="admin-input resize-none"
|
||||
placeholder="请输入文章摘要 (可选)"
|
||||
></textarea>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.excerpt">
|
||||
{{ errors.excerpt }}
|
||||
</div>
|
||||
</div>
|
||||
<form @submit.prevent="handleSubmit" class="flex-1 flex overflow-hidden gap-6 relative">
|
||||
<!-- Left Column: Main Editor -->
|
||||
<div class="flex-1 flex flex-col min-w-0 transition-all duration-300 ease-in-out h-full">
|
||||
<div class="admin-card flex-1 flex flex-col overflow-hidden border border-white/10 focus-within:border-art-accent/50 transition-colors">
|
||||
<MdEditor
|
||||
v-model="form.content"
|
||||
theme="dark"
|
||||
:preview="false"
|
||||
placeholder="开始创作..."
|
||||
class="custom-md-editor flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Meta & Settings -->
|
||||
<div class="space-y-6">
|
||||
<div class="admin-card p-6 space-y-6 sticky top-6">
|
||||
<h3 class="text-sm font-medium text-white border-b border-white/5 pb-4 mb-4 flex items-center gap-2">
|
||||
<span class="text-art-accent">⚙️</span> 发布设置
|
||||
</h3>
|
||||
|
||||
<!-- Category Field -->
|
||||
<div class="space-y-2">
|
||||
<label for="category" class="block text-xs font-medium text-art-muted uppercase tracking-wider">分类</label>
|
||||
<input
|
||||
type="text"
|
||||
id="category"
|
||||
v-model="form.category"
|
||||
class="admin-input"
|
||||
placeholder="文章分类"
|
||||
required
|
||||
/>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.category">
|
||||
{{ errors.category }}
|
||||
<!-- Right Column: Meta & Settings (Collapsible) -->
|
||||
<div
|
||||
class="shrink-0 transition-all duration-300 ease-[cubic-bezier(0.25,0.8,0.25,1)] overflow-hidden flex flex-col h-full"
|
||||
:class="[isSidebarOpen ? 'w-80 opacity-100 translate-x-0' : 'w-0 opacity-0 translate-x-10']"
|
||||
>
|
||||
<div class="w-80 space-y-6 overflow-y-auto pr-1 h-full custom-scrollbar pb-6">
|
||||
<div class="admin-card p-6 space-y-6">
|
||||
<h3 class="text-sm font-medium text-white border-b border-white/5 pb-4 mb-4 flex items-center gap-2">
|
||||
<span class="text-art-accent">📝</span> 文章属性
|
||||
</h3>
|
||||
|
||||
<!-- Title Field -->
|
||||
<div class="space-y-2">
|
||||
<label for="title" class="block text-xs font-medium text-art-muted uppercase tracking-wider">文章标题</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
v-model="form.title"
|
||||
class="admin-input font-medium"
|
||||
placeholder="请输入标题"
|
||||
required
|
||||
/>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.title">
|
||||
{{ errors.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date Field -->
|
||||
<div class="space-y-2">
|
||||
<label for="date" class="block text-xs font-medium text-art-muted uppercase tracking-wider">发布日期</label>
|
||||
<input
|
||||
type="date"
|
||||
id="date"
|
||||
v-model="form.date"
|
||||
class="admin-input"
|
||||
required
|
||||
/>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.date">
|
||||
{{ errors.date }}
|
||||
|
||||
<!-- Excerpt Field -->
|
||||
<div class="space-y-2">
|
||||
<label for="excerpt" class="block text-xs font-medium text-art-muted uppercase tracking-wider">摘要</label>
|
||||
<textarea
|
||||
id="excerpt"
|
||||
v-model="form.excerpt"
|
||||
rows="4"
|
||||
class="admin-input resize-none text-sm leading-relaxed"
|
||||
placeholder="简短的介绍..."
|
||||
></textarea>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.excerpt">
|
||||
{{ errors.excerpt }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Is Published Field -->
|
||||
<div class="space-y-2">
|
||||
<label for="isPublished" class="block text-xs font-medium text-art-muted uppercase tracking-wider">状态</label>
|
||||
<CustomSelect
|
||||
v-model="form.isPublished"
|
||||
:options="publishStatusOptions"
|
||||
placeholder="请选择发布状态"
|
||||
/>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.isPublished">
|
||||
{{ errors.isPublished }}
|
||||
|
||||
<!-- Category Field -->
|
||||
<div class="space-y-2">
|
||||
<label for="category" class="block text-xs font-medium text-art-muted uppercase tracking-wider">分类</label>
|
||||
<input
|
||||
type="text"
|
||||
id="category"
|
||||
v-model="form.category"
|
||||
class="admin-input"
|
||||
placeholder="文章分类"
|
||||
required
|
||||
/>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.category">
|
||||
{{ errors.category }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date Field -->
|
||||
<div class="space-y-2">
|
||||
<label for="date" class="block text-xs font-medium text-art-muted uppercase tracking-wider">发布日期</label>
|
||||
<input
|
||||
type="date"
|
||||
id="date"
|
||||
v-model="form.date"
|
||||
class="admin-input"
|
||||
required
|
||||
/>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.date">
|
||||
{{ errors.date }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Is Published Field -->
|
||||
<div class="space-y-2">
|
||||
<label for="isPublished" class="block text-xs font-medium text-art-muted uppercase tracking-wider">状态</label>
|
||||
<CustomSelect
|
||||
v-model="form.isPublished"
|
||||
:options="publishStatusOptions"
|
||||
placeholder="请选择发布状态"
|
||||
/>
|
||||
<div class="text-art-error text-xs mt-1" v-if="errors.isPublished">
|
||||
{{ errors.isPublished }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons (Mobile only, hidden on large screens) -->
|
||||
<div class="lg:hidden pt-4 border-t border-white/5 flex flex-col gap-3">
|
||||
<button type="button" class="admin-btn-primary w-full" @click="handleSubmit" :disabled="isSubmitting">
|
||||
{{ isSubmitting ? '提交中...' : (isEditing ? '更新文章' : '发布文章') }}
|
||||
</button>
|
||||
<button type="button" class="admin-btn-secondary w-full" @click="handleCancel">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -145,6 +147,12 @@ const router = useRouter()
|
||||
const route = useRoute()
|
||||
const toast = useToast()
|
||||
|
||||
// Sidebar toggle state
|
||||
const isSidebarOpen = ref(true)
|
||||
const toggleSidebar = () => {
|
||||
isSidebarOpen.value = !isSidebarOpen.value
|
||||
}
|
||||
|
||||
// Form state
|
||||
const isSubmitting = ref(false)
|
||||
const isEditing = computed(() => !!route.params.id)
|
||||
@@ -177,18 +185,22 @@ const validateForm = (): boolean => {
|
||||
if (!form.title.trim()) {
|
||||
errors.title = '文章标题不能为空'
|
||||
isValid = false
|
||||
// Auto open sidebar if there are errors in it
|
||||
isSidebarOpen.value = true
|
||||
}
|
||||
|
||||
// Validate category
|
||||
if (!form.category.trim()) {
|
||||
errors.category = '文章分类不能为空'
|
||||
isValid = false
|
||||
isSidebarOpen.value = true
|
||||
}
|
||||
|
||||
// Validate date
|
||||
if (!form.date) {
|
||||
errors.date = '发布日期不能为空'
|
||||
isValid = false
|
||||
isSidebarOpen.value = true
|
||||
}
|
||||
|
||||
// Validate content
|
||||
@@ -263,12 +275,13 @@ onMounted(async () => {
|
||||
--md-bk-color: transparent !important;
|
||||
--md-color: white !important;
|
||||
--md-border-color: transparent !important;
|
||||
height: 600px;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
:deep(.md-editor-toolbar-wrapper) {
|
||||
background-color: rgba(255, 255, 255, 0.02) !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
:deep(.md-editor-content) {
|
||||
@@ -279,4 +292,19 @@ onMounted(async () => {
|
||||
background-color: rgba(255, 255, 255, 0.02) !important;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar for sidebar */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user