前端样式修改

1. Home.vue中的heard样式修改
   Home.vue中的template代码替换为如下内容：

<!-- src/views/Home.vue -->
<template>
    <div class="home-container">
        <!-- 固定头部（新布局） -->
        <div class="header">
            <h2 class="title">微头条首页</h2>
            <div class="welcome">欢迎，{{ userStore.username }}</div>
            <div class="actions">
                <button class="publish-btn" @click="goToPublish">+ 发布微头条</button>
                <button class="logout-btn" @click="logout">退出登录</button>
            </div>
        </div>

        <!-- 可滚动的内容区域（新闻列表 + 分页） -->
        <div class="scroll-area">
            <div class="content-wrapper">
                <!-- 新闻列表 -->
                <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">
                            <button @click="homeViewDetail(item.id)">🔍 查看详情</button>
                            <button @click="homeDeleteNews(item.id)">🗑️ 删除</button>
                            <button @click="homeLikeNews(item.id, item.likes)">👍 点赞 {{ item.likes }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分页组件 -->
        <div class="pagination-wrapper">
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :total="total"
                @current-change="loadNews" layout="prev, pager, next" />
        </div>
    </div>
</template>
Home.vue中的style样式代码替换为如下内容：

<style scoped>
/* 整体容器 */
.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);
    border-bottom: 1px solid #e8e8e8;
}

.header .title {
    margin: 0;
    color: #333;
    font-size: 20px;
    font-weight: 600;
}

/* 欢迎信息 – 居中显示，普通文本 */
.header .welcome {
    font-size: 16px;
    color: #555;
    /* 使用 flex:1 让它在剩余空间中居中 */
    flex: 1;
    text-align: center;
}

/* 右侧操作按钮组 */
.header .actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 统一按钮基础样式 */
.header .actions button {
    padding: 6px 18px;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s, transform 0.1s;
}

.header .actions button:hover {
    transform: scale(1.02);
}

/* 发布按钮 – 蓝色 */
.header .actions .publish-btn {
    background: #1890ff;
    color: white;
}

.header .actions .publish-btn:hover {
    background: #0c7bdf;
}

/* 退出按钮 – 红色 */
.header .actions .logout-btn {
    background: #ff4d4f;
    color: white;
}

.header .actions .logout-btn:hover {
    background: #ff7875;
}

/* ===== 滚动区域 ===== */
.scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.content-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

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

.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: 0 0 8px 0;
    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 button {
    margin-right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.actions button:first-child {
    color: #1890ff;
}

.actions button:nth-child(2) {
    color: #ff4d4f;
}

.actions button:last-child {
    color: #52c41a;
}

.actions button:hover {
    background: rgba(0, 0, 0, 0.04);
}

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

/* 分页容器 */
.pagination-wrapper {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding: 16px 0 20px 0;
    background: #f5f5f5;
}
</style>

2. 让发布页面的发布微头条标题居中

打开Publish.vue,在style样式标签中添加如下css

.publish-container h2 {
    margin-bottom: 20px;
    text-align: center;
}

3. 重写注册页面Register.vue，使其风格与登录页面统一
   整体代码替换为如下：

<template>
    <div class="register-page">
        <div class="register-card">
            <h2>微头条注册</h2>

            <el-form :model="form" :rules="rules" ref="formRef" @keyup.enter="handleRegister">
                <el-form-item prop="username">
                    <el-input v-model="form.username" placeholder="用户名" clearable />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" type="password" placeholder="密码" clearable show-password />
                </el-form-item>
                <el-form-item prop="confirmPassword">
                    <el-input v-model="form.confirmPassword" type="password" placeholder="确认密码" clearable
                        show-password />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleRegister" :loading="loading" class="register-btn">
                        注册
                    </el-button>
                </el-form-item>
            </el-form>

            <div class="login-link">
                <router-link to="/login">已有账号？去登录</router-link>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { register } from '../api/user'
import { ElMessage } from 'element-plus'

const form = reactive({
    username: '',
    password: '',
    confirmPassword: ''
})

const rules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== form.password) {
                    callback(new Error('两次输入密码不一致'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ]
}

const router = useRouter()
const formRef = ref(null)
const loading = ref(false)

const handleRegister = async () => {
    if (!formRef.value) return
    if (loading.value) return

    try {
        await formRef.value.validate()
        loading.value = true
        const res = await register({
            username: form.username,
            password: form.password
        })
        if (res.code === 200) {
            ElMessage.success('注册成功，请登录')
            router.push('/login')
        } else {
            ElMessage.error(res.message || '注册失败')
        }
    } catch (error) {
        if (error?.response?.data?.message) {
            ElMessage.error(error.response.data.message)
        } else if (error !== false) {
            ElMessage.error('请求失败，请检查网络')
        }
    } finally {
        loading.value = false
    }
}

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

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

<style scoped>
/* ===== 页面背景（与登录一致） ===== */
.register-page {
    height: 100vh;
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ===== 卡片样式（完全复制登录页 .login-card） ===== */
.register-card {
    width: 360px;
    /* 与登录卡片宽度一致 */
    background: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.register-card h2 {
    text-align: center;
    margin-bottom: 24px;
    color: #333;
}

/* ===== 覆盖 Element Plus 输入框样式，使其与原生 input 完全一致 ===== */
:deep(.el-input__wrapper) {
    padding: 0 12px;
    height: 40px; /* 与登录输入框高度一致（padding 12px + font-size 14px ≈ 40px） */
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: none !important;
    transition: border-color 0.2s;
}

:deep(.el-input__wrapper:hover) {
    box-shadow: none !important;
}

:deep(.el-input__wrapper.is-focus) {
    border-color: #667eea;
    box-shadow: none !important;
}

:deep(.el-input__inner) {
    height: 100%;
    line-height: 40px; /* 垂直居中 */
    font-size: 14px;
}

/* 表单每个输入框下方间距（与登录一致） */
:deep(.el-form-item) {
    margin-bottom: 16px;
}

/* ===== 覆盖 El-Button 样式，使其与登录按钮一致 ===== */
.register-btn {
    width: 100%;
    padding: 12px !important;
    height: 40px; /* 与输入框高度对齐 */
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    background-color: #667eea !important;
    color: white !important;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.register-btn:hover {
    background-color: #5a67d8 !important;
}

/* ===== 登录链接样式（与登录页一致） ===== */
.login-link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #666;
}

.login-link a {
    color: #667eea;
    text-decoration: none;
}

.login-link a:hover {
    text-decoration: underline;
}
</style>