feat: 添加微语功能
- 新增微语页面,类似 Twitter/QQ 空间的短内容发布平台 - 添加 GitHub 风格热力图组件展示发布活动 - 支持发布微语、图片上传、标签、Emoji - 支持点赞、评论功能 - 右侧栏显示统计数据和热门标签 - 支持按标签筛选微语 - 后端新增微语相关 API(CRUD、点赞、评论、标签) Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
44
src/pages/micro.astro
Normal file
44
src/pages/micro.astro
Normal file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import MicroFeed from '../components/MicroFeed.vue';
|
||||
import MicroSidebar from '../components/MicroSidebar.vue';
|
||||
|
||||
// API 基础 URL
|
||||
const API_BASE = import.meta.env.PUBLIC_API_BASE || 'http://localhost:8080';
|
||||
---
|
||||
|
||||
<BaseLayout title="微语 - NovaBlog" description="分享生活点滴,记录灵感瞬间">
|
||||
<div class="content-width py-8">
|
||||
<!-- 页面标题 -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold mb-2">微语</h1>
|
||||
<p class="text-foreground/60">分享生活点滴,记录灵感瞬间</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- 左侧:发布框和动态列表 -->
|
||||
<div class="lg:col-span-2">
|
||||
<MicroFeed
|
||||
client:load
|
||||
apiBaseUrl={`${API_BASE}/api`}
|
||||
onPublished="handlePublished"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 右侧:热力图和统计 -->
|
||||
<MicroSidebar
|
||||
client:load
|
||||
apiBaseUrl={`${API_BASE}/api`}
|
||||
ref="sidebarRef"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
|
||||
<script>
|
||||
// 通过自定义事件实现组件间通信
|
||||
window.addEventListener('micro-published', () => {
|
||||
// 触发侧边栏刷新
|
||||
window.dispatchEvent(new CustomEvent('refresh-sidebar'));
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user