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">
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h2>首页</h2>
|
||||
<p>发布与公共墙将在此显示。</p>
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :xs="24" :md="12">
|
||||
<Composer @published="onPublished" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="12">
|
||||
<div class="wall-col">
|
||||
<WallList ref="wallRef" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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