From 445a940f7ddcb4efc73dc0a3816c089c767d45f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=82=89=E6=9C=AB?= <romer@roumodeMacBook-Air.local>
Date: Tue, 14 Jul 2026 13:01:44 +0800
Subject: [PATCH] feat: home composer and public wall UI

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/components/Composer.vue | 208 +++++++++++++++++++++++++++
 frontend/src/components/WallList.vue | 138 ++++++++++++++++++
 frontend/src/views/HomeView.vue      |  36 ++++-
 3 files changed, 378 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/Composer.vue
 create mode 100644 frontend/src/components/WallList.vue

diff --git a/frontend/src/components/Composer.vue b/frontend/src/components/Composer.vue
new file mode 100644
index 0000000..5a8a698
--- /dev/null
+++ b/frontend/src/components/Composer.vue
@@ -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>
diff --git a/frontend/src/components/WallList.vue b/frontend/src/components/WallList.vue
new file mode 100644
index 0000000..9711d19
--- /dev/null
+++ b/frontend/src/components/WallList.vue
@@ -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>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 76cbca7..2a83a71 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -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>