569 lines
15 KiB
Vue
Vendored
569 lines
15 KiB
Vue
Vendored
<script setup lang="ts">
|
||
import { computed, reactive, ref, watch } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
|
||
import AppShell from '../components/AppShell.vue'
|
||
import UserAvatar from '../components/UserAvatar.vue'
|
||
import { ApiError } from '../api/client'
|
||
import * as accountApi from '../api/account'
|
||
import * as likeApi from '../api/like'
|
||
import type { Video } from '../api/types'
|
||
import * as videoApi from '../api/video'
|
||
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 busy = ref(false)
|
||
const loginForm = reactive({ username: '', password: '' })
|
||
|
||
const me = computed(() => ({
|
||
id: auth.claims?.account_id ?? 0,
|
||
username: auth.claims?.username ?? '',
|
||
}))
|
||
|
||
const myVideos = reactive({
|
||
loading: false,
|
||
error: '',
|
||
items: [] as Video[],
|
||
})
|
||
|
||
type VideoTab = 'works' | 'likes'
|
||
const videoTab = ref<VideoTab>('works')
|
||
|
||
let myVideosReq = 0
|
||
async function loadMyVideos() {
|
||
const id = me.value.id
|
||
if (!auth.isLoggedIn || !id) {
|
||
myVideos.items = []
|
||
myVideos.error = ''
|
||
myVideos.loading = false
|
||
return
|
||
}
|
||
if (myVideos.loading) return
|
||
|
||
const req = ++myVideosReq
|
||
myVideos.loading = true
|
||
myVideos.error = ''
|
||
try {
|
||
const vids = await videoApi.listByAuthorId(id)
|
||
if (req !== myVideosReq) return
|
||
myVideos.items = vids
|
||
} catch (e) {
|
||
if (req !== myVideosReq) return
|
||
myVideos.error = e instanceof ApiError ? e.message : String(e)
|
||
myVideos.items = []
|
||
} finally {
|
||
if (req === myVideosReq) myVideos.loading = false
|
||
}
|
||
}
|
||
|
||
const likedVideos = reactive({
|
||
loading: false,
|
||
loaded: false,
|
||
error: '',
|
||
items: [] as Video[],
|
||
})
|
||
|
||
let likedVideosReq = 0
|
||
async function loadLikedVideos() {
|
||
if (!auth.isLoggedIn || !me.value.id) {
|
||
likedVideosReq += 1
|
||
likedVideos.loading = false
|
||
likedVideos.loaded = false
|
||
likedVideos.error = ''
|
||
likedVideos.items = []
|
||
return
|
||
}
|
||
if (likedVideos.loading) return
|
||
|
||
const req = ++likedVideosReq
|
||
likedVideos.loading = true
|
||
likedVideos.error = ''
|
||
try {
|
||
const vids = await likeApi.listMyLikedVideos()
|
||
if (req !== likedVideosReq) return
|
||
likedVideos.items = vids
|
||
likedVideos.loaded = true
|
||
} catch (e) {
|
||
if (req !== likedVideosReq) return
|
||
likedVideos.error = e instanceof ApiError ? e.message : String(e)
|
||
likedVideos.items = []
|
||
likedVideos.loaded = true
|
||
} finally {
|
||
if (req === likedVideosReq) likedVideos.loading = false
|
||
}
|
||
}
|
||
|
||
async function goVideo(id: number) {
|
||
await router.push(`/video/${id}`)
|
||
}
|
||
|
||
function openWorksVideos() {
|
||
videoTab.value = 'works'
|
||
void loadMyVideos()
|
||
}
|
||
|
||
function openLikedVideos() {
|
||
videoTab.value = 'likes'
|
||
void loadLikedVideos()
|
||
}
|
||
|
||
async function onLogin() {
|
||
if (busy.value) return
|
||
const username = loginForm.username.trim()
|
||
const password = loginForm.password.trim()
|
||
if (!username || !password) {
|
||
toast.error('请输入用户名和密码')
|
||
return
|
||
}
|
||
|
||
busy.value = true
|
||
try {
|
||
const res = await accountApi.login(username, password)
|
||
auth.setTokens(res.token, res.refresh_token ?? '')
|
||
toast.success('登录成功')
|
||
await social.refreshMine()
|
||
await loadMyVideos()
|
||
} catch (e) {
|
||
const msg = e instanceof ApiError ? e.message : String(e)
|
||
toast.error(msg)
|
||
} finally {
|
||
busy.value = false
|
||
}
|
||
}
|
||
|
||
async function goRegister() {
|
||
await router.push('/account/register')
|
||
}
|
||
|
||
async function goChangePassword() {
|
||
await router.push('/account/change-password')
|
||
}
|
||
|
||
async function goSettings() {
|
||
await router.push('/settings')
|
||
}
|
||
|
||
type ListTab = 'followers' | 'following'
|
||
const drawer = reactive({
|
||
open: false,
|
||
tab: 'followers' as ListTab,
|
||
})
|
||
|
||
function openFollowers() {
|
||
drawer.tab = 'followers'
|
||
drawer.open = true
|
||
}
|
||
|
||
function openFollowing() {
|
||
drawer.tab = 'following'
|
||
drawer.open = true
|
||
}
|
||
|
||
function closeDrawer() {
|
||
drawer.open = false
|
||
}
|
||
|
||
const listTitle = computed(() => (drawer.tab === 'followers' ? '粉丝' : '关注'))
|
||
const listItems = computed(() => (drawer.tab === 'followers' ? social.followers : social.vloggers))
|
||
const drawerLoading = computed(() => (drawer.tab === 'followers' ? social.followersLoading : social.vloggersLoading))
|
||
const drawerError = computed(() => (drawer.tab === 'followers' ? social.followersError : social.vloggersError))
|
||
const socialErrorHint = computed(() => social.followersError || social.vloggersError)
|
||
|
||
async function goUser(id: number) {
|
||
drawer.open = false
|
||
await router.push(`/u/${id}`)
|
||
}
|
||
|
||
watch(
|
||
() => auth.isLoggedIn,
|
||
(v) => {
|
||
if (!v) {
|
||
drawer.open = false
|
||
myVideosReq += 1
|
||
myVideos.loading = false
|
||
myVideos.items = []
|
||
myVideos.error = ''
|
||
|
||
likedVideosReq += 1
|
||
likedVideos.loading = false
|
||
likedVideos.loaded = false
|
||
likedVideos.items = []
|
||
likedVideos.error = ''
|
||
|
||
videoTab.value = 'works'
|
||
}
|
||
},
|
||
)
|
||
|
||
watch(
|
||
() => me.value.id,
|
||
(id) => {
|
||
if (auth.isLoggedIn && id) {
|
||
void loadMyVideos()
|
||
if (videoTab.value === 'likes') void loadLikedVideos()
|
||
}
|
||
},
|
||
{ immediate: true },
|
||
)
|
||
</script>
|
||
|
||
<template>
|
||
<AppShell>
|
||
<div v-if="!auth.isLoggedIn" class="login-wrap">
|
||
<div class="card login-card">
|
||
<p class="title">登录</p>
|
||
<div class="grid" style="margin-top: 10px">
|
||
<div>
|
||
<label>username</label>
|
||
<input v-model.trim="loginForm.username" autocomplete="username" />
|
||
</div>
|
||
<div>
|
||
<label>password</label>
|
||
<input v-model.trim="loginForm.password" type="password" autocomplete="current-password" @keydown.enter="onLogin" />
|
||
</div>
|
||
<button class="primary" type="button" :disabled="busy" @click="onLogin">登录</button>
|
||
</div>
|
||
|
||
<div class="row" style="justify-content: space-between; margin-top: 14px">
|
||
<button class="ghost" type="button" :disabled="busy" @click="goRegister">注册账号</button>
|
||
<button class="ghost" type="button" :disabled="busy" @click="goChangePassword">修改密码</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<template v-else>
|
||
<div class="card">
|
||
<div class="row" style="justify-content: space-between; align-items: flex-start">
|
||
<div class="row" style="gap: 12px; align-items: center">
|
||
<UserAvatar :username="me.username" :id="me.id" :size="64" />
|
||
<div>
|
||
<div class="title" style="margin: 0">@{{ me.username }}</div>
|
||
<div class="subtle mono">#{{ me.id }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<button class="ghost" type="button" @click="goSettings">设置</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row" style="margin-top: 14px">
|
||
<button class="metric" type="button" :disabled="social.followersLoading" @click="openFollowers">
|
||
<div class="metric-num">{{ social.followersLoading ? '…' : social.followerCount }}</div>
|
||
<div class="metric-label">粉丝</div>
|
||
</button>
|
||
<button class="metric" type="button" :disabled="social.vloggersLoading" @click="openFollowing">
|
||
<div class="metric-num">{{ social.vloggersLoading ? '…' : social.followingCount }}</div>
|
||
<div class="metric-label">关注</div>
|
||
</button>
|
||
<button class="metric" type="button" :class="{ active: videoTab === 'works' }" @click="openWorksVideos">
|
||
<div class="metric-num">{{ myVideos.loading ? '…' : myVideos.items.length }}</div>
|
||
<div class="metric-label">作品</div>
|
||
</button>
|
||
<button class="metric" type="button" :class="{ active: videoTab === 'likes' }" @click="openLikedVideos">
|
||
<div class="metric-num">{{ likedVideos.loading ? '…' : likedVideos.loaded ? likedVideos.items.length : '—' }}</div>
|
||
<div class="metric-label">点赞</div>
|
||
</button>
|
||
<div v-if="socialErrorHint" class="subtle" style="margin-left: 8px">社交信息加载失败：{{ socialErrorHint }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" style="margin-top: 14px">
|
||
<div class="row" style="justify-content: space-between">
|
||
<p class="title" style="margin: 0">{{ videoTab === 'works' ? '作品' : '点赞视频' }}</p>
|
||
<div class="subtle">点击封面进入播放页</div>
|
||
</div>
|
||
|
||
<template v-if="videoTab === 'works'">
|
||
<div v-if="myVideos.loading" class="hint" style="margin-top: 12px">加载中…</div>
|
||
<div v-else-if="myVideos.error" class="hint bad" style="margin-top: 12px">{{ myVideos.error }}</div>
|
||
<div v-else-if="myVideos.items.length === 0" class="hint" style="margin-top: 12px">暂无作品</div>
|
||
|
||
<div v-else class="video-grid" style="margin-top: 12px">
|
||
<button v-for="v in myVideos.items" :key="v.id" class="video-card" type="button" @click="goVideo(v.id)">
|
||
<img class="video-cover" :src="v.cover_url" :alt="v.title" loading="lazy" />
|
||
<div class="video-meta">
|
||
<div class="video-title">{{ v.title }}</div>
|
||
<div class="video-sub subtle">❤️ {{ v.likes_count }} · {{ new Date(v.create_time).toLocaleDateString() }}</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div v-if="likedVideos.loading" class="hint" style="margin-top: 12px">加载中…</div>
|
||
<div v-else-if="likedVideos.error" class="hint bad" style="margin-top: 12px">{{ likedVideos.error }}</div>
|
||
<div v-else-if="likedVideos.items.length === 0" class="hint" style="margin-top: 12px">暂无点赞视频</div>
|
||
|
||
<div v-else class="video-grid" style="margin-top: 12px">
|
||
<button v-for="v in likedVideos.items" :key="v.id" class="video-card" type="button" @click="goVideo(v.id)">
|
||
<img class="video-cover" :src="v.cover_url" :alt="v.title" loading="lazy" />
|
||
<div class="video-meta">
|
||
<div class="video-title">{{ v.title }}</div>
|
||
<div class="video-sub subtle">❤️ {{ v.likes_count }} · {{ new Date(v.create_time).toLocaleDateString() }}</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<div v-if="drawer.open" class="drawer-backdrop" @click.self="closeDrawer">
|
||
<div class="drawer">
|
||
<div class="drawer-head">
|
||
<div class="drawer-title">{{ listTitle }}</div>
|
||
<button class="drawer-x" type="button" @click="closeDrawer">×</button>
|
||
</div>
|
||
<div class="drawer-body">
|
||
<div v-if="drawerLoading" class="drawer-hint">加载中…</div>
|
||
<div v-else-if="drawerError" class="drawer-hint bad">{{ drawerError }}</div>
|
||
<div v-else-if="listItems.length === 0" class="drawer-hint">暂无</div>
|
||
|
||
<button v-for="u in listItems" v-if="!drawerLoading && !drawerError" :key="u.id" class="user-row" type="button" @click="goUser(u.id)">
|
||
<UserAvatar :username="u.username" :id="u.id" :size="40" />
|
||
<div class="user-meta">
|
||
<div class="user-name">@{{ u.username }}</div>
|
||
<div class="user-id mono">#{{ u.id }}</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AppShell>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.login-wrap {
|
||
display: grid;
|
||
justify-items: center;
|
||
align-content: start;
|
||
padding: clamp(56px, 14vh, 160px) 16px 40px;
|
||
}
|
||
|
||
.login-card {
|
||
width: min(420px, 100%);
|
||
}
|
||
|
||
.ghost {
|
||
border: 1px solid var(--border);
|
||
background: rgba(255, 255, 255, 0.055);
|
||
color: var(--text);
|
||
border-radius: 8px;
|
||
padding: 10px 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.ghost:hover {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.metric {
|
||
border: 1px solid var(--border);
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border-radius: 8px;
|
||
padding: 12px 14px;
|
||
min-width: 120px;
|
||
cursor: pointer;
|
||
display: grid;
|
||
gap: 4px;
|
||
text-align: left;
|
||
}
|
||
|
||
.metric:hover {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.metric.active {
|
||
background: rgba(43, 161, 255, 0.14);
|
||
border-color: rgba(43, 161, 255, 0.55);
|
||
}
|
||
|
||
.metric.static {
|
||
cursor: default;
|
||
}
|
||
|
||
.metric:disabled {
|
||
opacity: 0.55;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.metric-num {
|
||
font-size: 18px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
.metric-label {
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.hint {
|
||
color: var(--muted);
|
||
}
|
||
|
||
.hint.bad {
|
||
color: var(--danger);
|
||
}
|
||
|
||
.drawer-backdrop {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.55);
|
||
backdrop-filter: blur(10px);
|
||
z-index: 120;
|
||
display: grid;
|
||
justify-items: center;
|
||
align-items: center;
|
||
padding: 16px;
|
||
}
|
||
|
||
.drawer {
|
||
width: min(520px, calc(100vw - 18px));
|
||
max-height: min(78vh, 720px);
|
||
background: rgba(13, 18, 29, 0.92);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
display: grid;
|
||
grid-template-rows: auto 1fr;
|
||
}
|
||
|
||
.drawer-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 14px 14px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.drawer-title {
|
||
font-weight: 900;
|
||
}
|
||
|
||
.drawer-x {
|
||
width: 34px;
|
||
height: 34px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--border);
|
||
background: rgba(255, 255, 255, 0.06);
|
||
color: rgba(255, 255, 255, 0.9);
|
||
cursor: pointer;
|
||
font-size: 20px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.drawer-body {
|
||
overflow: auto;
|
||
padding: 12px 14px;
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.drawer-hint {
|
||
color: var(--muted);
|
||
padding: 12px 0;
|
||
}
|
||
|
||
.drawer-hint.bad {
|
||
color: var(--danger);
|
||
}
|
||
|
||
.video-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.video-grid {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
@media (max-width: 800px) {
|
||
.video-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
.video-card {
|
||
border: 1px solid var(--border);
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.video-card:hover {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.video-cover {
|
||
width: 100%;
|
||
aspect-ratio: 9/12;
|
||
object-fit: cover;
|
||
display: block;
|
||
background: rgba(0, 0, 0, 0.35);
|
||
}
|
||
|
||
.video-meta {
|
||
padding: 10px 10px;
|
||
}
|
||
|
||
.video-title {
|
||
font-weight: 800;
|
||
font-size: 13px;
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.video-sub {
|
||
margin-top: 6px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.user-row {
|
||
text-align: left;
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 12px;
|
||
align-items: center;
|
||
padding: 10px 10px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--border);
|
||
background: rgba(255, 255, 255, 0.05);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.user-row:hover {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.user-meta {
|
||
min-width: 0;
|
||
}
|
||
|
||
.user-name {
|
||
font-weight: 800;
|
||
}
|
||
|
||
.user-id {
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.mono {
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||
}
|
||
</style>
|