feat: home composer and public wall UI
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
肉末
@@ -0,0 +1,208 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import type { UploadRequestOptions } from 'element-plus'
|
||||||
|
|
||||||
|
import { createItem, uploadItem, type TTLOption } from '../api/client'
|
||||||
|
|
||||||
|
const emit = defineEmits<{ published: [] }>()
|
||||||
|
|
||||||
|
const body = ref('')
|
||||||
|
const ttl = ref<TTLOption>('24h')
|
||||||
|
const burnAfterRead = ref(false)
|
||||||
|
const linkOnly = ref(false)
|
||||||
|
const publishing = ref(false)
|
||||||
|
const uploading = ref(false)
|
||||||
|
const shareUrl = ref('')
|
||||||
|
|
||||||
|
const accept =
|
||||||
|
'.png,.jpg,.jpeg,.gif,.webp,.svg,.txt,.md,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.csv,.zip,.7z,.tar,.gz,.rar,.json'
|
||||||
|
|
||||||
|
const isPublic = computed(() => !linkOnly.value)
|
||||||
|
|
||||||
|
function sharePath(slug: string): string {
|
||||||
|
return `${window.location.origin}/p/${slug}`
|
||||||
|
}
|
||||||
|
|
||||||
|
async function publishText() {
|
||||||
|
const text = body.value.trim()
|
||||||
|
if (!text) {
|
||||||
|
ElMessage.warning('请输入要发布的内容')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
publishing.value = true
|
||||||
|
try {
|
||||||
|
const item = await createItem({
|
||||||
|
body: text,
|
||||||
|
is_public: isPublic.value,
|
||||||
|
burn_after_read: burnAfterRead.value,
|
||||||
|
ttl: ttl.value,
|
||||||
|
})
|
||||||
|
shareUrl.value = sharePath(item.slug)
|
||||||
|
body.value = ''
|
||||||
|
ElMessage.success('发布成功')
|
||||||
|
emit('published')
|
||||||
|
} catch (err) {
|
||||||
|
ElMessage.error(err instanceof Error ? err.message : '发布失败')
|
||||||
|
} finally {
|
||||||
|
publishing.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function customUpload(options: UploadRequestOptions) {
|
||||||
|
uploading.value = true
|
||||||
|
try {
|
||||||
|
const form = new FormData()
|
||||||
|
form.append('file', options.file)
|
||||||
|
form.append('is_public', String(isPublic.value))
|
||||||
|
form.append('burn_after_read', String(burnAfterRead.value))
|
||||||
|
form.append('ttl', ttl.value)
|
||||||
|
const item = await uploadItem(form)
|
||||||
|
shareUrl.value = sharePath(item.slug)
|
||||||
|
ElMessage.success('上传成功')
|
||||||
|
options.onSuccess?.(item as unknown as never)
|
||||||
|
emit('published')
|
||||||
|
} catch (err) {
|
||||||
|
const message = err instanceof Error ? err.message : '上传失败'
|
||||||
|
ElMessage.error(message)
|
||||||
|
options.onError?.(err as never)
|
||||||
|
} finally {
|
||||||
|
uploading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function copyShareUrl() {
|
||||||
|
if (!shareUrl.value) return
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(shareUrl.value)
|
||||||
|
ElMessage.success('链接已复制')
|
||||||
|
} catch {
|
||||||
|
ElMessage.error('复制失败，请手动选择链接')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section class="composer">
|
||||||
|
<h2>发布</h2>
|
||||||
|
<el-input
|
||||||
|
v-model="body"
|
||||||
|
type="textarea"
|
||||||
|
:rows="8"
|
||||||
|
placeholder="支持 Markdown…"
|
||||||
|
maxlength="20000"
|
||||||
|
show-word-limit
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<div class="control-row">
|
||||||
|
<span class="label">有效期</span>
|
||||||
|
<el-select v-model="ttl" style="width: 100%">
|
||||||
|
<el-option label="1 小时" value="1h" />
|
||||||
|
<el-option label="24 小时" value="24h" />
|
||||||
|
<el-option label="7 天" value="7d" />
|
||||||
|
<el-option label="永不" value="never" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="switches">
|
||||||
|
<el-switch v-model="burnAfterRead" active-text="阅后即焚" />
|
||||||
|
<el-switch v-model="linkOnly" active-text="仅链接可见" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
class="full-width-xs"
|
||||||
|
:loading="publishing"
|
||||||
|
@click="publishText"
|
||||||
|
>
|
||||||
|
发布
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-upload
|
||||||
|
class="uploader"
|
||||||
|
drag
|
||||||
|
:accept="accept"
|
||||||
|
:show-file-list="false"
|
||||||
|
:http-request="customUpload"
|
||||||
|
:disabled="uploading"
|
||||||
|
>
|
||||||
|
<div class="upload-inner">
|
||||||
|
<p>拖拽文件到此处，或点击选择</p>
|
||||||
|
<p class="hint">手机可直接打开文件选择器</p>
|
||||||
|
</div>
|
||||||
|
</el-upload>
|
||||||
|
|
||||||
|
<div v-if="shareUrl" class="share">
|
||||||
|
<el-input v-model="shareUrl" readonly>
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="copyShareUrl">复制链接</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.composer h2 {
|
||||||
|
margin: 0 0 12px;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
margin-top: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switches {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 16px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
margin: 14px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploader {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploader :deep(.el-upload),
|
||||||
|
.uploader :deep(.el-upload-dragger) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-inner {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-inner p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
margin-top: 6px !important;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.share {
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,138 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, onUnmounted, ref } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
|
||||||
|
import { fetchWall, type Item } from '../api/client'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const items = ref<Item[]>([])
|
||||||
|
const loading = ref(false)
|
||||||
|
let timer: number | undefined
|
||||||
|
|
||||||
|
async function loadWall(silent = false) {
|
||||||
|
if (!silent) loading.value = true
|
||||||
|
try {
|
||||||
|
const data = await fetchWall(1, 30)
|
||||||
|
items.value = data.items
|
||||||
|
} catch (err) {
|
||||||
|
if (!silent) {
|
||||||
|
ElMessage.error(err instanceof Error ? err.message : '加载公共墙失败')
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openItem(item: Item) {
|
||||||
|
router.push(`/p/${item.slug}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatTime(value: string): string {
|
||||||
|
try {
|
||||||
|
return new Date(value).toLocaleString('zh-CN', { hour12: false })
|
||||||
|
} catch {
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function refresh() {
|
||||||
|
void loadWall(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ refresh })
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
void loadWall()
|
||||||
|
timer = window.setInterval(() => {
|
||||||
|
void loadWall(true)
|
||||||
|
}, 15_000)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (timer !== undefined) {
|
||||||
|
window.clearInterval(timer)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section class="wall">
|
||||||
|
<div class="wall-head">
|
||||||
|
<h2>公共墙</h2>
|
||||||
|
<el-button text type="primary" :loading="loading" @click="loadWall()">刷新</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-empty v-if="!loading && items.length === 0" description="暂无公开内容" />
|
||||||
|
|
||||||
|
<div v-else class="wall-list">
|
||||||
|
<button
|
||||||
|
v-for="item in items"
|
||||||
|
:key="item.slug"
|
||||||
|
type="button"
|
||||||
|
class="wall-item"
|
||||||
|
@click="openItem(item)"
|
||||||
|
>
|
||||||
|
<div class="title">{{ item.title || item.file_name || item.slug }}</div>
|
||||||
|
<div class="meta">
|
||||||
|
<span>{{ item.kind === 'file' ? '文件' : '文本' }}</span>
|
||||||
|
<span>{{ formatTime(item.created_at) }}</span>
|
||||||
|
<span v-if="item.burn_after_read">阅后即焚</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.wall-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wall-head h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wall-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wall-item {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 14px 12px;
|
||||||
|
min-height: 56px;
|
||||||
|
cursor: pointer;
|
||||||
|
font: inherit;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wall-item:active {
|
||||||
|
background: #f0f2f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px 12px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,9 +1,37 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
import Composer from '../components/Composer.vue'
|
||||||
|
import WallList from '../components/WallList.vue'
|
||||||
|
|
||||||
|
const wallRef = ref<InstanceType<typeof WallList> | null>(null)
|
||||||
|
|
||||||
|
function onPublished() {
|
||||||
|
wallRef.value?.refresh()
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<el-row :gutter="16">
|
||||||
<h2>首页</h2>
|
<el-col :xs="24" :md="12">
|
||||||
<p>发布与公共墙将在此显示。</p>
|
<Composer @published="onPublished" />
|
||||||
</div>
|
</el-col>
|
||||||
|
<el-col :xs="24" :md="12">
|
||||||
|
<div class="wall-col">
|
||||||
|
<WallList ref="wallRef" />
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.wall-col {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.wall-col {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user