2026.6.11

Router 工程代码

<template>
    <div class="home-container">
        <!-- 固定头部 -->
        <div class="header">
            <h2>微头条首页</h2>
            <button @click="logout">退出登录</button>
        </div>
        <!-- 可滚动的内容区域（发布区 + 新闻列表） -->
        <div class="scroll-area">
            <div class="content-wrapper">
                <!-- 发布区域 -->
                <div class="publish-area">
                    <input type="text" v-model="newTitle" placeholder="新闻标题" @keyup.enter="addNews" />
                    <input type="text" v-model="newContent" placeholder="新闻内容" />
                    <button @click="addNews">+ 发布微头条</button>
                </div>

                <!-- 新闻列表 -->
                <div class="news-list">
                    <div v-if="newsList.length === 0" class="empty">
                        暂无新闻，快去发布一条吧
                    </div>
                    <div v-for="item in newsList" :key="item.id" class="news-item">
                        <h3>{{ item.title }}</h3>
                        <div class="time">{{ item.time }}</div>
                        <div class="content">{{ item.content }}</div>
                        <div class="actions">
                            <a href="javascript:;">📚 查看详情</a>
                            <button @click="deleteNews(item.id)">🗑 删除</button>
                            <button @click="likeNews(item.id)">💗 点赞 {{ item.likes }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref, onMounted, onUnmounted } from 'vue'

const newsList = ref([
    {
        id: 1,
        title: '微头条1.0 正式发布',
        time: '2025-06-01 10:30',
        content: '微头条是一个轻量级信息分享平台，采用 Vue3 + SpringBoot 技术栈。',
        likes: 0
    },
    {
        id: 2,
        title: 'Vue3 组合式 API 学习心得',
        time: '2025-06-02 15:20',
        content: 'setup 语法糖非常简洁，ref和reactive让数据响应式变得容易。',
        likes: 2
    }
])

const newTitle = ref('')
const newContent = ref('')
let nextId = 3

const addNews = () => {
    if (!newTitle.value.trim()) {
        alert('请输入标题')
        return
    }
    const newNews = {
        id: nextId++,
        title: newTitle.value,
        content: newContent.value || '暂无内容',
        time: new Date().toLocaleString(),
        likes: 0
    }
    newsList.value.unshift(newNews)
    newTitle.value = ''
    newContent.value = ''
}

const deleteNews = (id) => {
    newsList.value = newsList.value.filter(item => item.id !== id)
}

const likeNews = (id) => {
    const item = newsList.value.find(item => item.id === id)
    if (item) {
        item.likes++
    }
}

const router = useRouter()
const logout = () => {
    localStorage.removeItem('token')
    router.push('/login')
}

onMounted(() => {
    document.body.style.overflow = 'hidden'
})

onUnmounted(() => {
    document.body.style.overflow = ''
})
</script>

<style scoped>
/* 整体容器：占满视口，flex 纵向排列 */
.home-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 固定头部 */
.header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    border-bottom: 5px solid #e0e0e0;
}

.header h2 {
    margin: 0;
    color: #333;
}

.header button {
    background: #ff4d4f;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    cursor: pointer;
}

.header button:hover {
    background: #ff7875;
}

/* 滚动区域：占据剩余高度，内部滚动 */
.scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px 20px 20px 20px;
    /* 左右内边距，底部留白 */
}

/* 内容包装器：限制最大宽度并居中 */
.content-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

/* 发布区域 */
.publish-area {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.publish-area input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 24px;
}

.publish-area button {
    display: block;
    width: 180px;
    background: #1890ff;
    color: white;
    border: none;
    border-radius: 24px;
    padding: 10px 0;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.publish-area button:hover {
    background: #0c7bdf;
}

/* 新闻列表 */
.news-list {
    margin-top: 20px;
}

/* 新闻卡片 */
.news-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.news-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.news-item h3 {
    margin-bottom: 8px;
    color: #333;
}

.time {
    font-size: 12px;
    color: #999;
    margin-bottom: 12px;
}

.content {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 12px;
}

.actions a {
    color: #1890ff;
    text-decoration: none;
    margin-right: 10px;
    font-size: 14px;
}

.actions a:hover {
    text-decoration: underline;
}

.actions button {
    margin-right: 10px;
    background: none;
    border: none;
    color: #e5152d;
    cursor: pointer;
}

.actions button:hover {
    text-decoration: underline;
}

.actions button:last-child {
    color: #0ae411;
}

.empty {
    text-align: center;
    color: #999;
    padding: 40px;
}
</style>