802 lines
20 KiB
Vue
802 lines
20 KiB
Vue
|
<template>
|
|||
|
|
<div class="page-wrap">
|
|||
|
|
<div class="container">
|
|||
|
|
<!-- 顶部：左右对称 -->
|
|||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|||
|
|
<!-- 左：标题说明 -->
|
|||
|
|
<div class="panel h-full">
|
|||
|
|
<h1 class="text-2xl font-semibold text-slate-900">
|
|||
|
|
{{ isEditing ? '编辑资讯文章' : '发布资讯文章' }}
|
|||
|
|
</h1>
|
|||
|
|
<p class="text-sm text-slate-500 mt-2">
|
|||
|
|
支持粘贴图片、丰富排版、表格与高亮。可直接粘贴截图或拖拽图片到编辑区。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 右：当前用户 -->
|
|||
|
|
<div class="panel h-full">
|
|||
|
|
<div class="flex items-start justify-between">
|
|||
|
|
<div>
|
|||
|
|
<div class="text-sm text-slate-500">当前用户</div>
|
|||
|
|
<div v-if="me" class="mt-1.5">
|
|||
|
|
<div class="text-slate-900 font-medium leading-6 truncate">
|
|||
|
|
昵称：{{ me.username }}
|
|||
|
|
</div>
|
|||
|
|
<div class="text-slate-500 text-sm leading-5 truncate">
|
|||
|
|
邮箱：{{ me.email }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="mt-1.5 text-slate-400 text-sm">读取中…</div>
|
|||
|
|
</div>
|
|||
|
|
<span
|
|||
|
|
v-if="me"
|
|||
|
|
class="inline-flex items-center gap-2 text-xs text-emerald-600"
|
|||
|
|
>
|
|||
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
|||
|
|
已登录
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="mt-4 grid grid-cols-2 gap-3 text-xs text-slate-500">
|
|||
|
|
<div>自动保存：开启</div>
|
|||
|
|
<div v-if="autoSavedAt" class="text-right">
|
|||
|
|
最近：{{ fromNow(autoSavedAt) }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 提示条 -->
|
|||
|
|
<transition name="fade">
|
|||
|
|
<div
|
|||
|
|
v-if="tip"
|
|||
|
|
class="rounded-md p-3 text-sm border mb-4"
|
|||
|
|
:class="
|
|||
|
|
tip.type === 'error'
|
|||
|
|
? 'bg-rose-50 border-rose-200 text-rose-700'
|
|||
|
|
: 'bg-emerald-50 border-emerald-200 text-emerald-700'
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
{{ tip.message }}
|
|||
|
|
</div>
|
|||
|
|
</transition>
|
|||
|
|
|
|||
|
|
<!-- 表单卡片 -->
|
|||
|
|
<div class="panel shadow-card">
|
|||
|
|
<div class="grid gap-6">
|
|||
|
|
<!-- 标题 -->
|
|||
|
|
<div>
|
|||
|
|
<label class="label">
|
|||
|
|
标题 <span class="text-rose-500">*</span>
|
|||
|
|
</label>
|
|||
|
|
<div class="relative">
|
|||
|
|
<input
|
|||
|
|
v-model.trim="form.title"
|
|||
|
|
type="text"
|
|||
|
|
required
|
|||
|
|
class="ui-input"
|
|||
|
|
placeholder="例如：AI 在营销自动化中的 5 个落地案例"
|
|||
|
|
maxlength="120"
|
|||
|
|
/>
|
|||
|
|
<span class="counter">{{ form.title?.length || 0 }}/120</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 摘要 -->
|
|||
|
|
<div>
|
|||
|
|
<div class="flex items-baseline justify-between">
|
|||
|
|
<label class="label">
|
|||
|
|
摘要 <span class="text-slate-400 text-xs">(选填)</span>
|
|||
|
|
</label>
|
|||
|
|
<span class="text-xs text-slate-400">
|
|||
|
|
{{ form.description?.length || 0 }}/200
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<textarea
|
|||
|
|
v-model.trim="form.description"
|
|||
|
|
rows="3"
|
|||
|
|
maxlength="200"
|
|||
|
|
class="ui-textarea"
|
|||
|
|
placeholder="一句话或一小段话，概括文章要点…"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 封面图片（选填） -->
|
|||
|
|
<div>
|
|||
|
|
<label class="label">
|
|||
|
|
封面图片 <span class="text-slate-400 text-xs">(选填)</span>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<div class="cover-upload">
|
|||
|
|
<!-- 预览：本地 blob 优先，其次使用已保存 URL -->
|
|||
|
|
<div v-if="form.coverPreview || form.cover" class="cover-preview">
|
|||
|
|
<img
|
|||
|
|
:src="form.coverPreview || form.cover"
|
|||
|
|
alt="封面预览"
|
|||
|
|
class="cover-img"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 选择封面（仅本地预览，不立刻上传） -->
|
|||
|
|
<label class="btn btn-outline btn-xs">
|
|||
|
|
选择封面
|
|||
|
|
<input
|
|||
|
|
class="cover-input"
|
|||
|
|
type="file"
|
|||
|
|
accept="image/*"
|
|||
|
|
@change="onPickCover"
|
|||
|
|
/>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<!-- 移除封面 -->
|
|||
|
|
<button
|
|||
|
|
v-if="form.coverPreview || form.cover"
|
|||
|
|
type="button"
|
|||
|
|
class="btn btn-ghost btn-xs"
|
|||
|
|
@click="removeCover"
|
|||
|
|
>
|
|||
|
|
移除
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p class="mt-1 text-[10px] text-slate-400">
|
|||
|
|
建议尺寸 800x400 或相似比例，体积 < 500KB。
|
|||
|
|
封面文件仅在文章发布成功时上传保存。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 正文 -->
|
|||
|
|
<div>
|
|||
|
|
<div class="flex items-center justify-between mb-2">
|
|||
|
|
<label class="label">
|
|||
|
|
正文 <span class="text-rose-500">*</span>
|
|||
|
|
</label>
|
|||
|
|
<div class="text-xs text-slate-400">字数：{{ wordCount }}</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<RichEditor v-model="form.body" />
|
|||
|
|
|
|||
|
|
<p class="mt-2 text-xs text-slate-500">
|
|||
|
|
小技巧：截屏后直接
|
|||
|
|
<kbd class="kbd">Ctrl</kbd>+<kbd class="kbd">V</kbd>
|
|||
|
|
即可插入图片（正文内图片会即时上传）。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 标签 -->
|
|||
|
|
<div>
|
|||
|
|
<label class="label mb-1">标签</label>
|
|||
|
|
<div class="flex gap-2">
|
|||
|
|
<input
|
|||
|
|
v-model.trim="tagInput"
|
|||
|
|
@keydown.enter.prevent="addTag()"
|
|||
|
|
@keydown.,.prevent="addTag()"
|
|||
|
|
class="ui-input flex-1"
|
|||
|
|
placeholder="例如：AI, 营销, OpenAI"
|
|||
|
|
/>
|
|||
|
|
<button type="button" class="btn btn-outline" @click="addTag()">
|
|||
|
|
添加
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-if="form.tagList.length" class="mt-3 flex flex-wrap gap-2">
|
|||
|
|
<span v-for="(t, i) in form.tagList" :key="t + i" class="chip">
|
|||
|
|
{{ t }}
|
|||
|
|
<button type="button" class="chip-close" @click="removeTag(i)">
|
|||
|
|
✕
|
|||
|
|
</button>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 操作区 -->
|
|||
|
|
<div class="actions">
|
|||
|
|
<span v-if="autoSavedAt" class="text-xs text-emerald-600 mr-auto">
|
|||
|
|
已自动保存 {{ fromNow(autoSavedAt) }}
|
|||
|
|
</span>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
class="btn btn-ghost"
|
|||
|
|
@click="saveDraftManually"
|
|||
|
|
>
|
|||
|
|
手动保存草稿
|
|||
|
|
</button>
|
|||
|
|
<button type="button" class="btn btn-ghost" @click="clearDraft">
|
|||
|
|
清空草稿
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
class="btn btn-primary"
|
|||
|
|
:disabled="submitting"
|
|||
|
|
@click="submit"
|
|||
|
|
>
|
|||
|
|
<svg v-if="submitting" class="spinner" viewBox="0 0 50 50">
|
|||
|
|
<circle
|
|||
|
|
class="path"
|
|||
|
|
cx="25"
|
|||
|
|
cy="25"
|
|||
|
|
r="20"
|
|||
|
|
fill="none"
|
|||
|
|
stroke-width="5"
|
|||
|
|
/>
|
|||
|
|
</svg>
|
|||
|
|
<span>
|
|||
|
|
{{
|
|||
|
|
submitting
|
|||
|
|
? (isEditing ? '保存中…' : '发布中…')
|
|||
|
|
: (isEditing ? '保存修改' : '发布文章')
|
|||
|
|
}}
|
|||
|
|
</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 额外说明 -->
|
|||
|
|
<p class="text-xs text-slate-500 mt-3">
|
|||
|
|
发布须知：请确保不含敏感信息；正文图片为即时上传，封面图片在发布时统一写入后端。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
|||
|
|
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
|
|||
|
|
import { navigateTo } from '#app'
|
|||
|
|
import RichEditor from '@/components/RichEditor.vue'
|
|||
|
|
import { useAuthToken, useApi } from '@/composables/useApi'
|
|||
|
|
import { useUpload } from '@/composables/useUpload'
|
|||
|
|
import { useImageExtractor } from '@/composables/useImageExtractor'
|
|||
|
|
|
|||
|
|
const route = useRoute()
|
|||
|
|
const { token } = useAuthToken()
|
|||
|
|
const api = useApi()
|
|||
|
|
const { uploadImage } = useUpload()
|
|||
|
|
const { extractFirstImage } = useImageExtractor()
|
|||
|
|
const editSlug = computed(() =>
|
|||
|
|
typeof route.query.slug === 'string' ? route.query.slug : null,
|
|||
|
|
)
|
|||
|
|
const isEditing = computed(() => Boolean(editSlug.value))
|
|||
|
|
|
|||
|
|
// 当前用户
|
|||
|
|
const me = ref(null)
|
|||
|
|
async function fetchMe() {
|
|||
|
|
if (!token.value) return
|
|||
|
|
try {
|
|||
|
|
const resp = await api.get('/user')
|
|||
|
|
me.value = resp?.user ?? null
|
|||
|
|
} catch {
|
|||
|
|
me.value = null
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 表单
|
|||
|
|
const form = reactive({
|
|||
|
|
title: '',
|
|||
|
|
description: '',
|
|||
|
|
body: '',
|
|||
|
|
tagList: [],
|
|||
|
|
cover: '', // 最终写入后端的 URL
|
|||
|
|
coverPreview: '', // 本地预览 blob
|
|||
|
|
})
|
|||
|
|
const coverFile = ref(null)
|
|||
|
|
|
|||
|
|
const tagInput = ref('')
|
|||
|
|
const submitting = ref(false)
|
|||
|
|
const tip = ref(null)
|
|||
|
|
const previewHtml = computed(() => form.body || '')
|
|||
|
|
|
|||
|
|
function resetForm() {
|
|||
|
|
form.title = ''
|
|||
|
|
form.description = ''
|
|||
|
|
form.body = ''
|
|||
|
|
form.tagList = []
|
|||
|
|
form.cover = ''
|
|||
|
|
if (form.coverPreview && form.coverPreview.startsWith('blob:')) {
|
|||
|
|
URL.revokeObjectURL(form.coverPreview)
|
|||
|
|
}
|
|||
|
|
form.coverPreview = ''
|
|||
|
|
coverFile.value = null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function loadArticleForEdit(slug) {
|
|||
|
|
try {
|
|||
|
|
const res = await api.get(`/articles/${slug}`)
|
|||
|
|
const data = res?.article
|
|||
|
|
if (!data) return
|
|||
|
|
form.title = data.title || ''
|
|||
|
|
form.description = data.description || ''
|
|||
|
|
form.body = data.body || ''
|
|||
|
|
const tags = Array.isArray(data.tagList) ? data.tagList : data.tags
|
|||
|
|
form.tagList = Array.isArray(tags) ? [...tags] : []
|
|||
|
|
form.cover = data.cover || ''
|
|||
|
|
form.coverPreview = ''
|
|||
|
|
coverFile.value = null
|
|||
|
|
autoSavedAt.value = Date.now()
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('[edit-article] load article failed:', error)
|
|||
|
|
tip.value = { type: 'error', message: '加载文章详情失败' }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 生命周期
|
|||
|
|
function applyDraftData(draft = {}) {
|
|||
|
|
form.title = draft.title || ''
|
|||
|
|
form.description = draft.description || ''
|
|||
|
|
form.body = draft.body || ''
|
|||
|
|
form.tagList = Array.isArray(draft.tagList) ? [...draft.tagList] : []
|
|||
|
|
form.cover = draft.cover || ''
|
|||
|
|
if (form.coverPreview && form.coverPreview.startsWith('blob:')) {
|
|||
|
|
URL.revokeObjectURL(form.coverPreview)
|
|||
|
|
}
|
|||
|
|
form.coverPreview = ''
|
|||
|
|
coverFile.value = null
|
|||
|
|
autoSavedAt.value = Date.now()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function readDraft() {
|
|||
|
|
if (!process.client) return { loaded: false, hasContent: false, data: null }
|
|||
|
|
const raw = localStorage.getItem(draftKey.value)
|
|||
|
|
if (!raw) return { loaded: false, hasContent: false, data: null }
|
|||
|
|
try {
|
|||
|
|
const data = JSON.parse(raw) || {}
|
|||
|
|
const hasContent = Boolean(
|
|||
|
|
data.title ||
|
|||
|
|
data.description ||
|
|||
|
|
data.body ||
|
|||
|
|
(Array.isArray(data.tagList) && data.tagList.length) ||
|
|||
|
|
data.cover,
|
|||
|
|
)
|
|||
|
|
return { loaded: true, hasContent, data }
|
|||
|
|
} catch {
|
|||
|
|
return { loaded: false, hasContent: false, data: null }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function initEditor(slug) {
|
|||
|
|
resetForm()
|
|||
|
|
if (slug) {
|
|||
|
|
await loadArticleForEdit(slug)
|
|||
|
|
} else {
|
|||
|
|
const draftInfo = readDraft()
|
|||
|
|
if (draftInfo.hasContent && draftInfo.data) {
|
|||
|
|
applyDraftData(draftInfo.data)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(async () => {
|
|||
|
|
if (!token.value) {
|
|||
|
|
navigateTo('/login')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
await fetchMe()
|
|||
|
|
await initEditor(editSlug.value)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onBeforeRouteUpdate(async (to, from, next) => {
|
|||
|
|
const slug =
|
|||
|
|
typeof to.query.slug === 'string'
|
|||
|
|
? to.query.slug
|
|||
|
|
: null
|
|||
|
|
await initEditor(slug)
|
|||
|
|
next()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 正文字数
|
|||
|
|
const wordCount = computed(
|
|||
|
|
() => form.body.replace(/<[^>]+>/g, '').trim().length,
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
// 标签
|
|||
|
|
function addTag() {
|
|||
|
|
if (!tagInput.value) return
|
|||
|
|
tagInput.value
|
|||
|
|
.split(/[，,]/)
|
|||
|
|
.map(s => s.trim())
|
|||
|
|
.filter(Boolean)
|
|||
|
|
.forEach((t) => {
|
|||
|
|
if (!form.tagList.includes(t)) form.tagList.push(t)
|
|||
|
|
})
|
|||
|
|
tagInput.value = ''
|
|||
|
|
}
|
|||
|
|
function removeTag(i) {
|
|||
|
|
form.tagList.splice(i, 1)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 选择封面：仅更新本地预览 & 待上传文件
|
|||
|
|
function onPickCover(e) {
|
|||
|
|
const file = e.target.files?.[0]
|
|||
|
|
e.target.value = ''
|
|||
|
|
if (!file) return
|
|||
|
|
|
|||
|
|
if (form.coverPreview && form.coverPreview.startsWith('blob:')) {
|
|||
|
|
URL.revokeObjectURL(form.coverPreview)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
coverFile.value = file
|
|||
|
|
form.coverPreview = URL.createObjectURL(file)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 移除封面
|
|||
|
|
function removeCover() {
|
|||
|
|
if (form.coverPreview && form.coverPreview.startsWith('blob:')) {
|
|||
|
|
URL.revokeObjectURL(form.coverPreview)
|
|||
|
|
}
|
|||
|
|
coverFile.value = null
|
|||
|
|
form.coverPreview = ''
|
|||
|
|
form.cover = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 草稿
|
|||
|
|
const draftKey = computed(() =>
|
|||
|
|
editSlug.value ? `article:edit:${editSlug.value}` : 'article:new:draft:v2',
|
|||
|
|
)
|
|||
|
|
const autoSavedAt = ref(0)
|
|||
|
|
|
|||
|
|
function loadDraft() {
|
|||
|
|
const info = readDraft()
|
|||
|
|
if (!editSlug.value && info.hasContent && info.data) {
|
|||
|
|
applyDraftData(info.data)
|
|||
|
|
return { loaded: true, hasContent: true }
|
|||
|
|
}
|
|||
|
|
return info
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function saveDraft() {
|
|||
|
|
if (!process.client) return
|
|||
|
|
const payload = {
|
|||
|
|
title: form.title,
|
|||
|
|
description: form.description,
|
|||
|
|
body: form.body,
|
|||
|
|
tagList: form.tagList,
|
|||
|
|
cover: form.cover,
|
|||
|
|
}
|
|||
|
|
localStorage.setItem(draftKey.value, JSON.stringify(payload))
|
|||
|
|
autoSavedAt.value = Date.now()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function saveDraftManually() {
|
|||
|
|
saveDraft()
|
|||
|
|
tip.value = { type: 'success', message: '草稿已保存到本地' }
|
|||
|
|
setTimeout(() => { tip.value = null }, 1500)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function clearDraft() {
|
|||
|
|
if (process.client) localStorage.removeItem(draftKey.value)
|
|||
|
|
if (form.coverPreview && form.coverPreview.startsWith('blob:')) {
|
|||
|
|
URL.revokeObjectURL(form.coverPreview)
|
|||
|
|
}
|
|||
|
|
form.title = ''
|
|||
|
|
form.description = ''
|
|||
|
|
form.body = ''
|
|||
|
|
form.tagList = []
|
|||
|
|
form.cover = ''
|
|||
|
|
form.coverPreview = ''
|
|||
|
|
coverFile.value = null
|
|||
|
|
tip.value = { type: 'success', message: '草稿已清空' }
|
|||
|
|
setTimeout(() => { tip.value = null }, 1500)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let t = null
|
|||
|
|
watch(
|
|||
|
|
() => ({
|
|||
|
|
title: form.title,
|
|||
|
|
description: form.description,
|
|||
|
|
body: form.body,
|
|||
|
|
tagList: form.tagList,
|
|||
|
|
cover: form.cover,
|
|||
|
|
}),
|
|||
|
|
() => {
|
|||
|
|
clearTimeout(t)
|
|||
|
|
t = setTimeout(saveDraft, 500)
|
|||
|
|
},
|
|||
|
|
{ deep: true },
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
function fromNow(ts) {
|
|||
|
|
const s = Math.max(1, Math.round((Date.now() - ts) / 1000))
|
|||
|
|
if (s < 60) return `${s}s 前`
|
|||
|
|
const m = Math.round(s / 60)
|
|||
|
|
if (m < 60) return `${m} 分钟前`
|
|||
|
|
return `${Math.round(m / 60)} 小时前`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提交
|
|||
|
|
async function submit() {
|
|||
|
|
if (!form.title?.trim() || !form.body?.trim()) {
|
|||
|
|
tip.value = { type: 'error', message: '标题与正文为必填项' }
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!token.value) {
|
|||
|
|
tip.value = { type: 'error', message: '请先登录' }
|
|||
|
|
navigateTo('/login')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
submitting.value = true
|
|||
|
|
tip.value = null
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 1. 有新封面则先上传
|
|||
|
|
let coverUrl = form.cover || ''
|
|||
|
|
if (coverFile.value) {
|
|||
|
|
const url = await uploadImage(coverFile.value)
|
|||
|
|
coverUrl = url
|
|||
|
|
form.cover = url // ✅ 回写，确保 payload / 草稿里都有
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 2. 如果没有封面，尝试从正文中提取第一张图片
|
|||
|
|
if (!coverUrl && form.body) {
|
|||
|
|
const firstImage = extractFirstImage(form.body)
|
|||
|
|
if (firstImage) {
|
|||
|
|
coverUrl = firstImage
|
|||
|
|
console.log('📸 自动提取封面图片:', firstImage)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 3. 创建文章
|
|||
|
|
const payload = {
|
|||
|
|
article: {
|
|||
|
|
title: form.title.trim(),
|
|||
|
|
description: form.description?.trim() || '',
|
|||
|
|
body: form.body,
|
|||
|
|
tagList: form.tagList,
|
|||
|
|
cover: coverUrl || null,
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let res
|
|||
|
|
if (isEditing.value && editSlug.value) {
|
|||
|
|
res = await api.put(`/articles/${editSlug.value}`, payload)
|
|||
|
|
} else {
|
|||
|
|
res = await api.post('/articles', payload)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
clearDraft()
|
|||
|
|
tip.value = {
|
|||
|
|
type: 'success',
|
|||
|
|
message: isEditing.value ? '修改已保存！' : '发布成功！',
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const slug = res?.article?.slug || editSlug.value
|
|||
|
|
setTimeout(() => {
|
|||
|
|
navigateTo(slug ? `/articles/${slug}` : '/')
|
|||
|
|
}, 600)
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('[new-article] submit error:', e)
|
|||
|
|
tip.value = {
|
|||
|
|
type: 'error',
|
|||
|
|
message:
|
|||
|
|
e?.statusMessage ||
|
|||
|
|
e?.data?.detail ||
|
|||
|
|
e?.data?.errors?.[0] ||
|
|||
|
|
'发布失败，请稍后重试',
|
|||
|
|
}
|
|||
|
|
} finally {
|
|||
|
|
submitting.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/* 样式保持你的原版，这里不改动 */
|
|||
|
|
.page-wrap {
|
|||
|
|
margin: 100px 5%;
|
|||
|
|
}
|
|||
|
|
.container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
}
|
|||
|
|
.panel {
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #e5e7eb;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 16px 18px;
|
|||
|
|
min-height: 120px;
|
|||
|
|
}
|
|||
|
|
.shadow-card {
|
|||
|
|
box-shadow: 0 8px 28px rgba(10, 18, 33, 0.12);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.actions {
|
|||
|
|
position: sticky;
|
|||
|
|
bottom: 0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
padding-top: 12px;
|
|||
|
|
margin-top: 8px;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
180deg,
|
|||
|
|
rgba(255, 255, 255, 0) 0%,
|
|||
|
|
#fff 24px
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
.label {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
line-height: 1.25rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #334155;
|
|||
|
|
margin-bottom: 0.25rem;
|
|||
|
|
}
|
|||
|
|
.ui-input,
|
|||
|
|
.ui-textarea {
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 14px;
|
|||
|
|
border: 1px solid #e5e7eb;
|
|||
|
|
padding: 10px 14px;
|
|||
|
|
outline: none;
|
|||
|
|
background: #fff;
|
|||
|
|
transition: box-shadow 0.15s ease, border-color 0.15s ease,
|
|||
|
|
transform 0.02s ease;
|
|||
|
|
box-shadow: 0 1px 0 rgba(2, 6, 23, 0.02) inset;
|
|||
|
|
}
|
|||
|
|
.ui-input::placeholder,
|
|||
|
|
.ui-textarea::placeholder {
|
|||
|
|
color: #9aa3b2;
|
|||
|
|
}
|
|||
|
|
.ui-input:hover,
|
|||
|
|
.ui-textarea:hover {
|
|||
|
|
border-color: #d2d6dc;
|
|||
|
|
}
|
|||
|
|
.ui-input:focus,
|
|||
|
|
.ui-textarea:focus {
|
|||
|
|
border-color: #6366f1;
|
|||
|
|
box-shadow: inset 0 0 0 1px #6366f1;
|
|||
|
|
}
|
|||
|
|
.ui-textarea {
|
|||
|
|
min-height: 110px;
|
|||
|
|
resize: vertical;
|
|||
|
|
}
|
|||
|
|
.counter {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 10px;
|
|||
|
|
bottom: 8px;
|
|||
|
|
font-size: 11px;
|
|||
|
|
color: #98a2b3;
|
|||
|
|
}
|
|||
|
|
.cover-upload {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
.cover-input {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.cover-preview {
|
|||
|
|
width: 110px;
|
|||
|
|
height: 66px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
border: 1px solid #e5e7eb;
|
|||
|
|
background: #f8fafc;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.cover-img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
.btn-xs {
|
|||
|
|
height: 30px;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
.btn {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
line-height: 1;
|
|||
|
|
border: 1px solid transparent;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: transform 0.02s ease, box-shadow 0.15s ease,
|
|||
|
|
background 0.15s ease, border-color 0.15s ease;
|
|||
|
|
}
|
|||
|
|
.btn {
|
|||
|
|
height: 40px;
|
|||
|
|
padding: 0 14px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
.btn:active {
|
|||
|
|
transform: translateY(0.5px);
|
|||
|
|
}
|
|||
|
|
.btn:disabled {
|
|||
|
|
opacity: 0.6;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
.btn-primary {
|
|||
|
|
color: #fff;
|
|||
|
|
background: linear-gradient(135deg, #4f46e5, #2563eb);
|
|||
|
|
box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
|
|||
|
|
}
|
|||
|
|
.btn-primary:hover {
|
|||
|
|
filter: brightness(1.03);
|
|||
|
|
box-shadow: 0 8px 22px rgba(37, 99, 235, 0.28);
|
|||
|
|
}
|
|||
|
|
.btn-outline {
|
|||
|
|
background: #fff;
|
|||
|
|
border-color: #e5e7eb;
|
|||
|
|
color: #334155;
|
|||
|
|
}
|
|||
|
|
.btn-outline:hover {
|
|||
|
|
border-color: #cbd5e1;
|
|||
|
|
box-shadow: 0 6px 16px rgba(2, 6, 23, 0.06);
|
|||
|
|
}
|
|||
|
|
.btn-ghost {
|
|||
|
|
background: #fff;
|
|||
|
|
border-color: #e5e7eb;
|
|||
|
|
color: #475569;
|
|||
|
|
}
|
|||
|
|
.btn-ghost:hover {
|
|||
|
|
background: #f8fafc;
|
|||
|
|
}
|
|||
|
|
.chip {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
padding: 6px 8px 6px 12px;
|
|||
|
|
background: #f1f5f9;
|
|||
|
|
color: #334155;
|
|||
|
|
border: 1px solid #e2e8f0;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
}
|
|||
|
|
.chip-close {
|
|||
|
|
color: #64748b;
|
|||
|
|
}
|
|||
|
|
.chip-close:hover {
|
|||
|
|
color: #ef4444;
|
|||
|
|
}
|
|||
|
|
.kbd {
|
|||
|
|
padding: 0 0.4rem;
|
|||
|
|
border: 1px solid #cbd5e1;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
background: #f8fafc;
|
|||
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|||
|
|
}
|
|||
|
|
.spinner {
|
|||
|
|
width: 18px;
|
|||
|
|
height: 18px;
|
|||
|
|
}
|
|||
|
|
.spinner .path {
|
|||
|
|
stroke: #fff;
|
|||
|
|
stroke-linecap: round;
|
|||
|
|
animation: dash 1.2s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
@keyframes dash {
|
|||
|
|
0% {
|
|||
|
|
stroke-dasharray: 1, 150;
|
|||
|
|
stroke-dashoffset: 0;
|
|||
|
|
}
|
|||
|
|
50% {
|
|||
|
|
stroke-dasharray: 90, 150;
|
|||
|
|
stroke-dashoffset: -35;
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
stroke-dasharray: 90, 150;
|
|||
|
|
stroke-dashoffset: -124;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.fade-enter-active,
|
|||
|
|
.fade-leave-active {
|
|||
|
|
transition: opacity 0.18s ease;
|
|||
|
|
}
|
|||
|
|
.fade-enter-from,
|
|||
|
|
.fade-leave-to {
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
</style>
|