feat: 前端界面
This commit is contained in:
Leon
@@ -1,225 +1,346 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { onUnmounted, reactive, ref, watch } from 'vue'
|
||||
import { RouterLink, useRouter } from 'vue-router'
|
||||
|
||||
import AppShell from '../components/AppShell.vue'
|
||||
import JsonBox from '../components/JsonBox.vue'
|
||||
import UserAvatar from '../components/UserAvatar.vue'
|
||||
import { ApiError } from '../api/client'
|
||||
import * as videoApi from '../api/video'
|
||||
import type { Video } from '../api/types'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { useSocialStore } from '../stores/social'
|
||||
import { useToastStore } from '../stores/toast'
|
||||
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
const social = useSocialStore()
|
||||
const toast = useToastStore()
|
||||
const myId = computed(() => auth.claims?.account_id ?? 0)
|
||||
|
||||
const last = reactive<{ action: string; loading: boolean; data: unknown }>({
|
||||
action: '',
|
||||
loading: false,
|
||||
data: null,
|
||||
const busy = ref(false)
|
||||
const stage = ref('')
|
||||
const published = ref<Video | null>(null)
|
||||
|
||||
const videoInput = ref<HTMLInputElement | null>(null)
|
||||
const coverInput = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const publishForm = reactive({
|
||||
title: '',
|
||||
description: '',
|
||||
video: null as File | null,
|
||||
cover: null as File | null,
|
||||
})
|
||||
|
||||
async function exec(action: string, fn: () => Promise<unknown>) {
|
||||
last.action = action
|
||||
last.loading = true
|
||||
last.data = null
|
||||
try {
|
||||
const res = await fn()
|
||||
last.data = res
|
||||
return res
|
||||
} catch (e) {
|
||||
const msg = e instanceof ApiError ? e.message : String(e)
|
||||
toast.error(msg)
|
||||
last.data = e instanceof ApiError ? e.payload : null
|
||||
return null
|
||||
} finally {
|
||||
last.loading = false
|
||||
}
|
||||
const preview = reactive({
|
||||
videoUrl: '',
|
||||
coverUrl: '',
|
||||
})
|
||||
|
||||
function setPreviewVideo(file: File | null) {
|
||||
if (preview.videoUrl) URL.revokeObjectURL(preview.videoUrl)
|
||||
preview.videoUrl = file ? URL.createObjectURL(file) : ''
|
||||
}
|
||||
|
||||
const publishForm = reactive({ title: '', description: '', play_url: '', cover_url: '' })
|
||||
const listAuthorId = ref<number>(1)
|
||||
const detailId = ref<number>(1)
|
||||
function setPreviewCover(file: File | null) {
|
||||
if (preview.coverUrl) URL.revokeObjectURL(preview.coverUrl)
|
||||
preview.coverUrl = file ? URL.createObjectURL(file) : ''
|
||||
}
|
||||
|
||||
const listResult = ref<Video[] | null>(null)
|
||||
const followBusy = reactive<Record<string, boolean>>({})
|
||||
watch(
|
||||
() => publishForm.video,
|
||||
(f) => setPreviewVideo(f),
|
||||
)
|
||||
|
||||
watch(
|
||||
() => publishForm.cover,
|
||||
(f) => setPreviewCover(f),
|
||||
)
|
||||
|
||||
onUnmounted(() => {
|
||||
setPreviewVideo(null)
|
||||
setPreviewCover(null)
|
||||
})
|
||||
|
||||
function pickVideo(e: Event) {
|
||||
const input = e.target as HTMLInputElement
|
||||
publishForm.video = input.files?.[0] ?? null
|
||||
}
|
||||
|
||||
function pickCover(e: Event) {
|
||||
const input = e.target as HTMLInputElement
|
||||
publishForm.cover = input.files?.[0] ?? null
|
||||
}
|
||||
|
||||
function openVideoPicker() {
|
||||
videoInput.value?.click()
|
||||
}
|
||||
|
||||
function openCoverPicker() {
|
||||
coverInput.value?.click()
|
||||
}
|
||||
|
||||
function clearVideo() {
|
||||
publishForm.video = null
|
||||
if (videoInput.value) videoInput.value.value = ''
|
||||
}
|
||||
|
||||
function clearCover() {
|
||||
publishForm.cover = null
|
||||
if (coverInput.value) coverInput.value.value = ''
|
||||
}
|
||||
|
||||
async function onPublish() {
|
||||
const res = await exec('发布视频', () => videoApi.publishVideo(publishForm))
|
||||
if (res) toast.success('已发布')
|
||||
}
|
||||
|
||||
async function onListByAuthor() {
|
||||
await exec('按作者列出视频', async () => {
|
||||
const res = await videoApi.listByAuthorId(listAuthorId.value)
|
||||
listResult.value = res
|
||||
return res
|
||||
})
|
||||
}
|
||||
|
||||
async function onGetDetail() {
|
||||
await exec('获取视频详情', () => videoApi.getDetail(detailId.value))
|
||||
}
|
||||
|
||||
async function toggleFollow(authorId: number) {
|
||||
if (busy.value) return
|
||||
if (!auth.isLoggedIn) {
|
||||
toast.error('请先登录')
|
||||
await router.push('/account')
|
||||
return
|
||||
}
|
||||
if (myId.value && myId.value === authorId) return
|
||||
|
||||
const key = String(authorId)
|
||||
if (followBusy[key]) return
|
||||
followBusy[key] = true
|
||||
const title = publishForm.title.trim()
|
||||
const description = publishForm.description.trim()
|
||||
if (!title) {
|
||||
toast.error('请输入 title')
|
||||
return
|
||||
}
|
||||
if (!publishForm.video) {
|
||||
toast.error('请选择视频文件（.mp4）')
|
||||
return
|
||||
}
|
||||
if (!publishForm.cover) {
|
||||
toast.error('请选择封面图片（jpg/png/webp）')
|
||||
return
|
||||
}
|
||||
|
||||
busy.value = true
|
||||
stage.value = ''
|
||||
published.value = null
|
||||
try {
|
||||
if (social.isFollowing(authorId)) {
|
||||
await social.unfollow(authorId)
|
||||
toast.info('已取关')
|
||||
} else {
|
||||
await social.follow(authorId)
|
||||
toast.success('已关注')
|
||||
stage.value = '上传封面'
|
||||
const coverRes = await videoApi.uploadCover(publishForm.cover!)
|
||||
|
||||
stage.value = '上传视频'
|
||||
const videoRes = await videoApi.uploadVideo(publishForm.video!)
|
||||
|
||||
const coverUrl = coverRes.url || coverRes.cover_url || ''
|
||||
const playUrl = videoRes.url || videoRes.play_url || ''
|
||||
if (!coverUrl || !playUrl) {
|
||||
toast.error('上传成功但缺少 url')
|
||||
return
|
||||
}
|
||||
|
||||
stage.value = '发布视频'
|
||||
const res = await videoApi.publishVideo({ title, description, play_url: playUrl, cover_url: coverUrl })
|
||||
|
||||
published.value = res
|
||||
toast.success('已发布')
|
||||
|
||||
publishForm.title = ''
|
||||
publishForm.description = ''
|
||||
clearVideo()
|
||||
clearCover()
|
||||
} catch (e) {
|
||||
const msg = e instanceof ApiError ? e.message : String(e)
|
||||
toast.error(msg)
|
||||
} finally {
|
||||
followBusy[key] = false
|
||||
busy.value = false
|
||||
stage.value = ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppShell>
|
||||
<div class="grid two">
|
||||
<div class="card">
|
||||
<p class="title">视频</p>
|
||||
<p class="subtle">发布需要 JWT；列表/详情无需 JWT。</p>
|
||||
<div class="publish-wrap">
|
||||
<div class="card publish-card">
|
||||
<div class="row" style="justify-content: space-between; align-items: baseline">
|
||||
<p class="title" style="margin: 0">发布视频</p>
|
||||
<div v-if="busy" class="pill">进行中：{{ stage || '…' }}</div>
|
||||
</div>
|
||||
<p class="subtle" style="margin-top: 10px">选择视频文件与封面图片，上传到本机后自动生成 URL，再写入 `/video/publish`。</p>
|
||||
|
||||
<div class="card" style="margin-top: 12px">
|
||||
<p class="title">发布视频（JWT）</p>
|
||||
<div class="grid form-grid" style="margin-top: 16px">
|
||||
<div>
|
||||
<label>title</label>
|
||||
<input v-model.trim="publishForm.title" class="big-input" :disabled="busy" />
|
||||
</div>
|
||||
<div>
|
||||
<label>description</label>
|
||||
<textarea v-model.trim="publishForm.description" class="big-input" :disabled="busy" />
|
||||
</div>
|
||||
<div class="grid two">
|
||||
<div>
|
||||
<label>title</label>
|
||||
<input v-model.trim="publishForm.title" />
|
||||
</div>
|
||||
<div>
|
||||
<label>description</label>
|
||||
<input v-model.trim="publishForm.description" />
|
||||
</div>
|
||||
<div>
|
||||
<label>play_url</label>
|
||||
<input v-model.trim="publishForm.play_url" placeholder="http://..." />
|
||||
</div>
|
||||
<div>
|
||||
<label>cover_url</label>
|
||||
<input v-model.trim="publishForm.cover_url" placeholder="http://..." />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 10px">
|
||||
<button class="primary" type="button" :disabled="last.loading" @click="onPublish">发布</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid two" style="margin-top: 12px">
|
||||
<div class="card">
|
||||
<p class="title">按作者列出</p>
|
||||
<div class="grid">
|
||||
<div>
|
||||
<label>author_id</label>
|
||||
<input v-model.number="listAuthorId" type="number" min="1" />
|
||||
</div>
|
||||
<button class="primary" type="button" :disabled="last.loading" @click="onListByAuthor">查询</button>
|
||||
<div v-if="listResult" class="subtle">共 {{ listResult.length }} 条</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">详情</p>
|
||||
<div class="grid">
|
||||
<div>
|
||||
<label>id</label>
|
||||
<input v-model.number="detailId" type="number" min="1" />
|
||||
</div>
|
||||
<button class="primary" type="button" :disabled="last.loading" @click="onGetDetail">获取</button>
|
||||
<RouterLink class="pill" :to="`/video/${detailId}`">打开详情页（含评论/点赞）</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="listResult" class="card" style="margin-top: 12px">
|
||||
<p class="title">列表结果</p>
|
||||
<div class="grid" style="gap: 10px">
|
||||
<div v-for="v in listResult" :key="v.id" class="card" style="background: rgba(255, 255, 255, 0.05)">
|
||||
<div class="row" style="justify-content: space-between">
|
||||
<div>
|
||||
<div class="title">
|
||||
<RouterLink :to="`/video/${v.id}`">{{ v.title }}</RouterLink>
|
||||
</div>
|
||||
<div class="row" style="gap: 10px; margin-top: 6px">
|
||||
<RouterLink class="author-link" :to="`/u/${v.author_id}`">
|
||||
<UserAvatar :username="v.username" :id="v.author_id" :size="28" />
|
||||
<span class="author-name">@{{ v.username }}</span>
|
||||
</RouterLink>
|
||||
<span class="subtle mono">#{{ v.author_id }}</span>
|
||||
<span class="subtle">❤️ {{ v.likes_count }}</span>
|
||||
<span class="subtle">{{ new Date(v.create_time).toLocaleString() }}</span>
|
||||
</div>
|
||||
<label>video (.mp4)</label>
|
||||
<input ref="videoInput" class="file-native" type="file" accept="video/mp4" :disabled="busy" @change="pickVideo" />
|
||||
<div class="file-box">
|
||||
<button type="button" :disabled="busy" @click="openVideoPicker">选择视频</button>
|
||||
<div class="file-name" :class="publishForm.video ? '' : 'muted'">
|
||||
{{ publishForm.video ? publishForm.video.name : '未选择文件' }}
|
||||
</div>
|
||||
<div class="row">
|
||||
<button
|
||||
v-if="auth.isLoggedIn && (!myId || myId !== v.author_id)"
|
||||
class="primary"
|
||||
type="button"
|
||||
style="padding: 8px 10px"
|
||||
:disabled="!!followBusy[String(v.author_id)]"
|
||||
@click.stop="toggleFollow(v.author_id)"
|
||||
>
|
||||
{{ social.isFollowing(v.author_id) ? '已关注' : '关注' }}
|
||||
</button>
|
||||
<RouterLink class="pill" :to="`/video/${v.id}`">详情</RouterLink>
|
||||
<button v-if="publishForm.video" type="button" :disabled="busy" @click="clearVideo">清除</button>
|
||||
</div>
|
||||
<div v-if="publishForm.video" class="subtle" style="margin-top: 6px">
|
||||
已选择：{{ publishForm.video.name }}（{{ Math.ceil(publishForm.video.size / 1024 / 1024) }} MB）
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label>cover (jpg/png/webp)</label>
|
||||
<input
|
||||
ref="coverInput"
|
||||
class="file-native"
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
:disabled="busy"
|
||||
@change="pickCover"
|
||||
/>
|
||||
<div class="file-box">
|
||||
<button type="button" :disabled="busy" @click="openCoverPicker">选择封面</button>
|
||||
<div class="file-name" :class="publishForm.cover ? '' : 'muted'">
|
||||
{{ publishForm.cover ? publishForm.cover.name : '未选择文件' }}
|
||||
</div>
|
||||
<button v-if="publishForm.cover" type="button" :disabled="busy" @click="clearCover">清除</button>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 10px">
|
||||
<a class="pill mono" :href="v.play_url" target="_blank" rel="noreferrer">play_url</a>
|
||||
<a class="pill mono" :href="v.cover_url" target="_blank" rel="noreferrer">cover_url</a>
|
||||
</div>
|
||||
<div v-if="publishForm.cover" class="subtle" style="margin-top: 6px">已选择：{{ publishForm.cover.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="preview.coverUrl || preview.videoUrl" class="grid two">
|
||||
<div v-if="preview.coverUrl" class="preview-card">
|
||||
<div class="subtle">封面预览</div>
|
||||
<img class="cover" :src="preview.coverUrl" alt="cover preview" />
|
||||
</div>
|
||||
<div v-if="preview.videoUrl" class="preview-card">
|
||||
<div class="subtle">视频预览</div>
|
||||
<video class="video" :src="preview.videoUrl" controls playsinline preload="metadata" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="justify-content: flex-end; margin-top: 8px">
|
||||
<button class="primary big-btn" type="button" :disabled="busy" @click="onPublish">发布</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="published" class="card" style="margin-top: 14px">
|
||||
<p class="title">已发布</p>
|
||||
<div class="row" style="justify-content: space-between">
|
||||
<div>
|
||||
<div class="title" style="margin: 0">{{ published.title }}</div>
|
||||
<div class="subtle mono">#{{ published.id }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<RouterLink class="pill" :to="`/video/${published.id}`">去播放</RouterLink>
|
||||
<a class="pill mono" :href="published.play_url" target="_blank" rel="noreferrer">play_url</a>
|
||||
<a class="pill mono" :href="published.cover_url" target="_blank" rel="noreferrer">cover_url</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<p class="title">最近响应</p>
|
||||
<div class="row" style="margin-bottom: 10px">
|
||||
<span class="pill">动作：{{ last.action || '-' }}</span>
|
||||
<span v-if="last.loading" class="pill">请求中…</span>
|
||||
</div>
|
||||
<JsonBox :value="last.data" />
|
||||
</div>
|
||||
</div>
|
||||
</AppShell>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.author-link {
|
||||
display: inline-flex;
|
||||
.publish-wrap {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.publish-card {
|
||||
width: min(980px, 100%);
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-grid .grid.two {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-grid .grid.two > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.form-grid input[type='file'] {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.file-native {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.file-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 14px;
|
||||
min-height: 46px;
|
||||
}
|
||||
|
||||
.author-link:hover {
|
||||
text-decoration: none;
|
||||
.file-box button {
|
||||
padding: 8px 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.author-name {
|
||||
font-weight: 800;
|
||||
.file-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
.muted {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.big-input {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 12px 14px;
|
||||
font-size: 14px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.big-btn {
|
||||
padding: 12px 18px;
|
||||
font-size: 14px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 100%;
|
||||
aspect-ratio: 9/12;
|
||||
object-fit: cover;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.video {
|
||||
width: 100%;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user