辣评用户界面与交互优化（八）

<template>
  <div class="login-container">
    <el-form :model="form" @submit.prevent="handleLogin">
      <el-form-item label="用户名">
        <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-button type="primary" @click="handleLogin">登录</el-button>
    </el-form>
  </div>
</template>

<template>
  <div class="profile-container">
    <div class="profile-header">
      <img :src="user.avatar" class="avatar">
      <div class="user-info">
        <h2></h2>
        <p></p>
      </div>
    </div>
    <div class="profile-tabs">
      <el-tabs>
        <el-tab-pane label="我的投稿">
          <!-- 投稿列表 -->
        </el-tab-pane>
        <el-tab-pane label="我的评论">
          <!-- 评论列表 -->
        </el-tab-pane>
        <el-tab-pane label="任务追踪">
          <!-- 任务信息 -->
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<template>
  <div class="comment-card">
    <div class="comment-header">
      <img :src="comment.user.avatar" class="avatar">
      <div class="user-info">
        <span class="username"></span>
        <span class="time"></span>
      </div>
      <el-rate v-model="comment.score" disabled></el-rate>
    </div>
    <div class="comment-content">
      
    </div>
    <div class="comment-actions">
      <el-button type="text" @click="handleEdit">编辑</el-button>
      <el-button type="text" @click="handleDelete">删除</el-button>
    </div>
  </div>
</template>

<template>
  <div class="filter-bar">
    <el-select v-model="filters.type" placeholder="选择类型" @change="handleFilterChange">
      <el-option label="全部" value=""></el-option>
      <el-option label="科幻" value="sci-fi"></el-option>
      <el-option label="悬疑" value="mystery"></el-option>
    </el-select>
    <el-select v-model="filters.status" placeholder="选择状态" @change="handleFilterChange">
      <el-option label="全部" value=""></el-option>
      <el-option label="已发布" value="published"></el-option>
      <el-option label="草稿" value="draft"></el-option>
    </el-select>
    <el-input v-model="filters.keyword" placeholder="搜索关键词" @input="handleSearch"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: {
        type: '',
        status: '',
        keyword: ''
      }
    }
  },
  methods: {
    handleFilterChange() {
      this.$emit('filter-change', this.filters)
    },
    handleSearch() {
      this.$emit('search', this.filters.keyword)
    }
  }
}
</script>

<template>
  <div class="statistics-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card">
          <div class="stat-value"></div>
          <div class="stat-label">总投稿数</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card">
          <div class="stat-value"></div>
          <div class="stat-label">总评论数</div>
        </div>
      </el-col>
    </el-row>
    <el-chart :option="chartOption"></el-chart>
  </div>
</template>