mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-06-09 03:27:32 +08:00
fix: 迁移部分页面为setup
This commit is contained in:
Tim
@@ -88,335 +88,299 @@ import LoginOverlay from '~/components/LoginOverlay.vue'
|
||||
import PostEditor from '~/components/PostEditor.vue'
|
||||
import PostTypeSelect from '~/components/PostTypeSelect.vue'
|
||||
import TagSelect from '~/components/TagSelect.vue'
|
||||
import { API_BASE_URL, toast } from '~/main'
|
||||
import { toast } from '~/main'
|
||||
import { authState, getToken } from '~/utils/auth'
|
||||
const config = useRuntimeConfig()
|
||||
const API_BASE_URL = config.public.apiBaseUrl
|
||||
|
||||
export default {
|
||||
name: 'NewPostPageView',
|
||||
components: {
|
||||
PostEditor,
|
||||
CategorySelect,
|
||||
TagSelect,
|
||||
LoginOverlay,
|
||||
PostTypeSelect,
|
||||
AvatarCropper,
|
||||
FlatPickr,
|
||||
},
|
||||
setup() {
|
||||
const title = ref('')
|
||||
const content = ref('')
|
||||
const selectedCategory = ref('')
|
||||
const selectedTags = ref([])
|
||||
const postType = ref('NORMAL')
|
||||
const prizeIcon = ref('')
|
||||
const prizeIconFile = ref(null)
|
||||
const tempPrizeIcon = ref('')
|
||||
const showPrizeCropper = ref(false)
|
||||
const prizeName = ref('')
|
||||
const prizeCount = ref(1)
|
||||
const prizeDescription = ref('')
|
||||
const endTime = ref(null)
|
||||
const startTime = ref(null)
|
||||
const dateConfig = { enableTime: true, time_24hr: true, dateFormat: 'Y-m-d H:i' }
|
||||
const isWaitingPosting = ref(false)
|
||||
const isAiLoading = ref(false)
|
||||
const isLogin = computed(() => authState.loggedIn)
|
||||
const title = ref('')
|
||||
const content = ref('')
|
||||
const selectedCategory = ref('')
|
||||
const selectedTags = ref([])
|
||||
const postType = ref('NORMAL')
|
||||
const prizeIcon = ref('')
|
||||
const prizeIconFile = ref(null)
|
||||
const tempPrizeIcon = ref('')
|
||||
const showPrizeCropper = ref(false)
|
||||
const prizeName = ref('')
|
||||
const prizeCount = ref(1)
|
||||
const prizeDescription = ref('')
|
||||
const endTime = ref(null)
|
||||
const startTime = ref(null)
|
||||
const dateConfig = { enableTime: true, time_24hr: true, dateFormat: 'Y-m-d H:i' }
|
||||
const isWaitingPosting = ref(false)
|
||||
const isAiLoading = ref(false)
|
||||
const isLogin = computed(() => authState.loggedIn)
|
||||
|
||||
const onPrizeIconChange = (e) => {
|
||||
const file = e.target.files[0]
|
||||
if (file) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
tempPrizeIcon.value = reader.result
|
||||
showPrizeCropper.value = true
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
const onPrizeIconChange = (e) => {
|
||||
const file = e.target.files[0]
|
||||
if (file) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
tempPrizeIcon.value = reader.result
|
||||
showPrizeCropper.value = true
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
}
|
||||
|
||||
const onPrizeCropped = ({ file, url }) => {
|
||||
prizeIconFile.value = file
|
||||
prizeIcon.value = url
|
||||
}
|
||||
const onPrizeCropped = ({ file, url }) => {
|
||||
prizeIconFile.value = file
|
||||
prizeIcon.value = url
|
||||
}
|
||||
|
||||
watch(prizeCount, (val) => {
|
||||
if (!val || val < 1) prizeCount.value = 1
|
||||
watch(prizeCount, (val) => {
|
||||
if (!val || val < 1) prizeCount.value = 1
|
||||
})
|
||||
|
||||
const loadDraft = async () => {
|
||||
const token = getToken()
|
||||
if (!token) return
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/api/drafts/me`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
if (res.ok && res.status !== 204) {
|
||||
const data = await res.json()
|
||||
title.value = data.title || ''
|
||||
content.value = data.content || ''
|
||||
selectedCategory.value = data.categoryId || ''
|
||||
selectedTags.value = data.tagIds || []
|
||||
|
||||
const loadDraft = async () => {
|
||||
const token = getToken()
|
||||
if (!token) return
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/api/drafts/me`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
if (res.ok && res.status !== 204) {
|
||||
const data = await res.json()
|
||||
title.value = data.title || ''
|
||||
content.value = data.content || ''
|
||||
selectedCategory.value = data.categoryId || ''
|
||||
selectedTags.value = data.tagIds || []
|
||||
|
||||
toast.success('草稿已加载')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
toast.success('草稿已加载')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadDraft)
|
||||
onMounted(loadDraft)
|
||||
|
||||
const clearPost = async () => {
|
||||
title.value = ''
|
||||
content.value = ''
|
||||
selectedCategory.value = ''
|
||||
selectedTags.value = []
|
||||
postType.value = 'NORMAL'
|
||||
prizeIcon.value = ''
|
||||
prizeIconFile.value = null
|
||||
tempPrizeIcon.value = ''
|
||||
showPrizeCropper.value = false
|
||||
prizeDescription.value = ''
|
||||
prizeCount.value = 1
|
||||
endTime.value = null
|
||||
startTime.value = null
|
||||
const clearPost = async () => {
|
||||
title.value = ''
|
||||
content.value = ''
|
||||
selectedCategory.value = ''
|
||||
selectedTags.value = []
|
||||
postType.value = 'NORMAL'
|
||||
prizeIcon.value = ''
|
||||
prizeIconFile.value = null
|
||||
tempPrizeIcon.value = ''
|
||||
showPrizeCropper.value = false
|
||||
prizeDescription.value = ''
|
||||
prizeCount.value = 1
|
||||
endTime.value = null
|
||||
startTime.value = null
|
||||
|
||||
// 删除草稿
|
||||
const token = getToken()
|
||||
if (token) {
|
||||
const res = await fetch(`${API_BASE_URL}/api/drafts/me`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
if (res.ok) {
|
||||
toast.success('草稿已清空')
|
||||
} else {
|
||||
toast.error('云端草稿清空失败, 请稍后重试')
|
||||
}
|
||||
}
|
||||
// 删除草稿
|
||||
const token = getToken()
|
||||
if (token) {
|
||||
const res = await fetch(`${API_BASE_URL}/api/drafts/me`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
if (res.ok) {
|
||||
toast.success('草稿已清空')
|
||||
} else {
|
||||
toast.error('云端草稿清空失败, 请稍后重试')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const saveDraft = async () => {
|
||||
const token = getToken()
|
||||
if (!token) {
|
||||
toast.error('请先登录')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const tagIds = selectedTags.value.filter((t) => typeof t === 'number')
|
||||
const res = await fetch(`${API_BASE_URL}/api/drafts`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
title: title.value,
|
||||
content: content.value,
|
||||
categoryId: selectedCategory.value || null,
|
||||
tagIds,
|
||||
}),
|
||||
})
|
||||
if (res.ok) {
|
||||
toast.success('草稿已保存')
|
||||
} else {
|
||||
toast.error('保存失败')
|
||||
}
|
||||
} catch (e) {
|
||||
toast.error('保存失败')
|
||||
}
|
||||
const saveDraft = async () => {
|
||||
const token = getToken()
|
||||
if (!token) {
|
||||
toast.error('请先登录')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const tagIds = selectedTags.value.filter((t) => typeof t === 'number')
|
||||
const res = await fetch(`${API_BASE_URL}/api/drafts`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
title: title.value,
|
||||
content: content.value,
|
||||
categoryId: selectedCategory.value || null,
|
||||
tagIds,
|
||||
}),
|
||||
})
|
||||
if (res.ok) {
|
||||
toast.success('草稿已保存')
|
||||
} else {
|
||||
toast.error('保存失败')
|
||||
}
|
||||
const ensureTags = async (token) => {
|
||||
for (let i = 0; i < selectedTags.value.length; i++) {
|
||||
const t = selectedTags.value[i]
|
||||
if (typeof t === 'string' && t.startsWith('__new__:')) {
|
||||
const name = t.slice(8)
|
||||
const res = await fetch(`${API_BASE_URL}/api/tags`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({ name, description: '' }),
|
||||
})
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
selectedTags.value[i] = data.id
|
||||
// update local TagSelect options handled by component
|
||||
} else {
|
||||
let data
|
||||
try {
|
||||
data = await res.json()
|
||||
} catch (e) {
|
||||
data = null
|
||||
}
|
||||
toast.error((data && data.error) || '创建标签失败')
|
||||
throw new Error('create tag failed')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const aiGenerate = async () => {
|
||||
if (!content.value.trim()) {
|
||||
toast.error('内容为空，无法优化')
|
||||
return
|
||||
}
|
||||
isAiLoading.value = true
|
||||
try {
|
||||
toast.info('AI 优化中...')
|
||||
const token = getToken()
|
||||
const res = await fetch(`${API_BASE_URL}/api/ai/format`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({ text: content.value }),
|
||||
})
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
content.value = data.content || ''
|
||||
} else if (res.status === 429) {
|
||||
toast.error('今日AI优化次数已用尽')
|
||||
} else {
|
||||
toast.error('AI 优化失败')
|
||||
}
|
||||
} catch (e) {
|
||||
toast.error('AI 优化失败')
|
||||
} finally {
|
||||
isAiLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const submitPost = async () => {
|
||||
if (!title.value.trim()) {
|
||||
toast.error('标题不能为空')
|
||||
return
|
||||
}
|
||||
if (!content.value.trim()) {
|
||||
toast.error('内容不能为空')
|
||||
return
|
||||
}
|
||||
if (!selectedCategory.value) {
|
||||
toast.error('请选择分类')
|
||||
return
|
||||
}
|
||||
if (selectedTags.value.length === 0) {
|
||||
toast.error('请选择标签')
|
||||
return
|
||||
}
|
||||
if (postType.value === 'LOTTERY') {
|
||||
if (!prizeIcon.value) {
|
||||
toast.error('请上传奖品图片')
|
||||
return
|
||||
}
|
||||
if (!prizeCount.value || prizeCount.value < 1) {
|
||||
toast.error('奖品数量必须大于0')
|
||||
return
|
||||
}
|
||||
if (!prizeDescription.value) {
|
||||
toast.error('请输入奖品描述')
|
||||
return
|
||||
}
|
||||
if (!endTime.value) {
|
||||
toast.error('请选择抽奖结束时间')
|
||||
return
|
||||
}
|
||||
}
|
||||
try {
|
||||
const token = getToken()
|
||||
await ensureTags(token)
|
||||
isWaitingPosting.value = true
|
||||
let prizeIconUrl = prizeIcon.value
|
||||
if (postType.value === 'LOTTERY' && prizeIconFile.value) {
|
||||
const form = new FormData()
|
||||
form.append('file', prizeIconFile.value)
|
||||
const uploadRes = await fetch(`${API_BASE_URL}/api/upload`, {
|
||||
method: 'POST',
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
body: form,
|
||||
})
|
||||
const uploadData = await uploadRes.json()
|
||||
if (!uploadRes.ok || uploadData.code !== 0) {
|
||||
toast.error('奖品图片上传失败')
|
||||
return
|
||||
}
|
||||
prizeIconUrl = uploadData.data.url
|
||||
}
|
||||
const res = await fetch(`${API_BASE_URL}/api/posts`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
title: title.value,
|
||||
content: content.value,
|
||||
categoryId: selectedCategory.value,
|
||||
tagIds: selectedTags.value,
|
||||
type: postType.value,
|
||||
prizeIcon: postType.value === 'LOTTERY' ? prizeIconUrl : undefined,
|
||||
prizeName: postType.value === 'LOTTERY' ? prizeName.value : undefined,
|
||||
prizeCount: postType.value === 'LOTTERY' ? prizeCount.value : undefined,
|
||||
prizeDescription: postType.value === 'LOTTERY' ? prizeDescription.value : undefined,
|
||||
startTime:
|
||||
postType.value === 'LOTTERY' ? new Date(startTime.value).toISOString() : undefined,
|
||||
// 将时间转换为 UTC+8.5 时区 todo: 需要优化
|
||||
endTime:
|
||||
postType.value === 'LOTTERY'
|
||||
? new Date(new Date(endTime.value).getTime() + 8.02 * 60 * 60 * 1000).toISOString()
|
||||
: undefined,
|
||||
}),
|
||||
})
|
||||
} catch (e) {
|
||||
toast.error('保存失败')
|
||||
}
|
||||
}
|
||||
const ensureTags = async (token) => {
|
||||
for (let i = 0; i < selectedTags.value.length; i++) {
|
||||
const t = selectedTags.value[i]
|
||||
if (typeof t === 'string' && t.startsWith('__new__:')) {
|
||||
const name = t.slice(8)
|
||||
const res = await fetch(`${API_BASE_URL}/api/tags`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({ name, description: '' }),
|
||||
})
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
if (res.ok) {
|
||||
if (data.reward && data.reward > 0) {
|
||||
toast.success(`发布成功，获得 ${data.reward} 经验值`)
|
||||
} else {
|
||||
toast.success('发布成功')
|
||||
}
|
||||
if (data.id) {
|
||||
window.location.href = `/posts/${data.id}`
|
||||
}
|
||||
} else if (res.status === 429) {
|
||||
toast.error('发布过于频繁，请稍后再试')
|
||||
} else {
|
||||
toast.error(data.error || '发布失败')
|
||||
selectedTags.value[i] = data.id
|
||||
// update local TagSelect options handled by component
|
||||
} else {
|
||||
let data
|
||||
try {
|
||||
data = await res.json()
|
||||
} catch (e) {
|
||||
data = null
|
||||
}
|
||||
} catch (e) {
|
||||
toast.error('发布失败')
|
||||
} finally {
|
||||
isWaitingPosting.value = false
|
||||
toast.error((data && data.error) || '创建标签失败')
|
||||
throw new Error('create tag failed')
|
||||
}
|
||||
}
|
||||
return {
|
||||
title,
|
||||
content,
|
||||
selectedCategory,
|
||||
selectedTags,
|
||||
postType,
|
||||
prizeIcon,
|
||||
prizeCount,
|
||||
endTime,
|
||||
submitPost,
|
||||
saveDraft,
|
||||
clearPost,
|
||||
isWaitingPosting,
|
||||
aiGenerate,
|
||||
isAiLoading,
|
||||
isLogin,
|
||||
onPrizeIconChange,
|
||||
onPrizeCropped,
|
||||
showPrizeCropper,
|
||||
tempPrizeIcon,
|
||||
dateConfig,
|
||||
prizeName,
|
||||
prizeDescription,
|
||||
}
|
||||
}
|
||||
|
||||
const aiGenerate = async () => {
|
||||
if (!content.value.trim()) {
|
||||
toast.error('内容为空，无法优化')
|
||||
return
|
||||
}
|
||||
isAiLoading.value = true
|
||||
try {
|
||||
toast.info('AI 优化中...')
|
||||
const token = getToken()
|
||||
const res = await fetch(`${API_BASE_URL}/api/ai/format`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({ text: content.value }),
|
||||
})
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
content.value = data.content || ''
|
||||
} else if (res.status === 429) {
|
||||
toast.error('今日AI优化次数已用尽')
|
||||
} else {
|
||||
toast.error('AI 优化失败')
|
||||
}
|
||||
},
|
||||
} catch (e) {
|
||||
toast.error('AI 优化失败')
|
||||
} finally {
|
||||
isAiLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const submitPost = async () => {
|
||||
if (!title.value.trim()) {
|
||||
toast.error('标题不能为空')
|
||||
return
|
||||
}
|
||||
if (!content.value.trim()) {
|
||||
toast.error('内容不能为空')
|
||||
return
|
||||
}
|
||||
if (!selectedCategory.value) {
|
||||
toast.error('请选择分类')
|
||||
return
|
||||
}
|
||||
if (selectedTags.value.length === 0) {
|
||||
toast.error('请选择标签')
|
||||
return
|
||||
}
|
||||
if (postType.value === 'LOTTERY') {
|
||||
if (!prizeIcon.value) {
|
||||
toast.error('请上传奖品图片')
|
||||
return
|
||||
}
|
||||
if (!prizeCount.value || prizeCount.value < 1) {
|
||||
toast.error('奖品数量必须大于0')
|
||||
return
|
||||
}
|
||||
if (!prizeDescription.value) {
|
||||
toast.error('请输入奖品描述')
|
||||
return
|
||||
}
|
||||
if (!endTime.value) {
|
||||
toast.error('请选择抽奖结束时间')
|
||||
return
|
||||
}
|
||||
}
|
||||
try {
|
||||
const token = getToken()
|
||||
await ensureTags(token)
|
||||
isWaitingPosting.value = true
|
||||
let prizeIconUrl = prizeIcon.value
|
||||
if (postType.value === 'LOTTERY' && prizeIconFile.value) {
|
||||
const form = new FormData()
|
||||
form.append('file', prizeIconFile.value)
|
||||
const uploadRes = await fetch(`${API_BASE_URL}/api/upload`, {
|
||||
method: 'POST',
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
body: form,
|
||||
})
|
||||
const uploadData = await uploadRes.json()
|
||||
if (!uploadRes.ok || uploadData.code !== 0) {
|
||||
toast.error('奖品图片上传失败')
|
||||
return
|
||||
}
|
||||
prizeIconUrl = uploadData.data.url
|
||||
}
|
||||
const res = await fetch(`${API_BASE_URL}/api/posts`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
title: title.value,
|
||||
content: content.value,
|
||||
categoryId: selectedCategory.value,
|
||||
tagIds: selectedTags.value,
|
||||
type: postType.value,
|
||||
prizeIcon: postType.value === 'LOTTERY' ? prizeIconUrl : undefined,
|
||||
prizeName: postType.value === 'LOTTERY' ? prizeName.value : undefined,
|
||||
prizeCount: postType.value === 'LOTTERY' ? prizeCount.value : undefined,
|
||||
prizeDescription: postType.value === 'LOTTERY' ? prizeDescription.value : undefined,
|
||||
startTime:
|
||||
postType.value === 'LOTTERY' ? new Date(startTime.value).toISOString() : undefined,
|
||||
// 将时间转换为 UTC+8.5 时区 todo: 需要优化
|
||||
endTime:
|
||||
postType.value === 'LOTTERY'
|
||||
? new Date(new Date(endTime.value).getTime() + 8.02 * 60 * 60 * 1000).toISOString()
|
||||
: undefined,
|
||||
}),
|
||||
})
|
||||
const data = await res.json()
|
||||
if (res.ok) {
|
||||
if (data.reward && data.reward > 0) {
|
||||
toast.success(`发布成功，获得 ${data.reward} 经验值`)
|
||||
} else {
|
||||
toast.success('发布成功')
|
||||
}
|
||||
if (data.id) {
|
||||
window.location.href = `/posts/${data.id}`
|
||||
}
|
||||
} else if (res.status === 429) {
|
||||
toast.error('发布过于频繁，请稍后再试')
|
||||
} else {
|
||||
toast.error(data.error || '发布失败')
|
||||
}
|
||||
} catch (e) {
|
||||
toast.error('发布失败')
|
||||
} finally {
|
||||
isWaitingPosting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user