YingXingAI/pages/home/conversations/index.vue

<template>
  <div class="home-page">
    <!-- 使用PageHeader组件 -->
    <PageHeader 
      title="会话列表" 
      :is-back="false"
      :border-bottom="true"
      :background="headerBackground"
    />
    
    <div class="content-wrapper">
      <!-- 这里是会话列表内容 -->
      <div class="placeholder">会话列表内容区域</div>
    </div>
    
    <!-- 使用TabBar组件 -->
    <TabBar :currentPath="'/pages/home/index'" @change="handleTabChange" />
  </div>
</template>

<script>
import TabBar from '@/components/TabBar.vue';
import PageHeader from '@/components/PageHeader.vue';

export default {
  name: 'HomePage',
  components: {
    TabBar,
    PageHeader
  },
  data() {
    return {
      headerBackground: {
        background: 'linear-gradient(to right, #e0eafc, #cfdef3)'
      }
    };
  },
  methods: {
    handleTabChange(path, index) {
      console.log('切换到标签页:', path, index);
    }
  }
}
</script>

<style scoped>
.home-page {
  height: 100vh;
  background-color: #f5f6fa;
  display: flex;
  flex-direction: column;
  position: relative;
}

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 15px;
  padding-bottom: 60px; /* 为底部导航栏预留空间 */
  overflow: hidden; /* 防止滚动条出现 */
}

.placeholder {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  color: #999;
}
</style>