front-pc/pages/channel/components/ChannelHeader.vue

<template>
  <div class="channel-header">
    <div class="header-container">
      <!-- Logo and Title Section -->
      <div class="logo-title-section">
        <div class="logo">
          <img :src="lunTanRes.channelIcon" alt="JRS Logo" />
        </div>
        <div class="title-section">
          <h1 class="main-title">#{{ lunTanRes.channelTitle }}</h1>
          <div class="action-buttons">
            <el-button v-if="!lunTanRes.isFollow" type="danger" class="subscribe-btn" @click="handleFollow"
              ><el-icon class="mr-4px color-#fff!"><Plus /></el-icon> 关注
            </el-button>
            <el-button v-else type="danger" class="subscribe-btn" @click="handleUnfollow"> 取消关注 </el-button>
            <el-button type="danger" class="post-btn" @click="handleClick">
              <el-icon class="mr-4px color-#fff!"><EditPen /></el-icon> 发帖
            </el-button>
          </div>

          <!-- Channel Info -->
          <div class="channel-info">
            <span class="info-item">话题介绍</span>
            <span class="info-item">{{ lunTanRes.channelProfile }}</span>
          </div>

          <!-- Stats -->
          <div class="channel-stats">
            <div class="stats-item">
              <span class="stats-label">话题热度</span>
              <span class="stats-value"><i class="el-icon-arrow-up"></i> 220.4w</span>
            </div>
            <div class="stats-item">
              <span class="stats-label">关注人数</span>
              <span class="stats-value"><i class="el-icon-arrow-up"></i> {{ lunTanRes.followCount }}人</span>
            </div>
            <div class="stats-item">
              <span class="stats-label">当前有</span>
              <span class="stats-value"><i class="el-icon-arrow-up"></i> {{ lunTanRes.chatUserCount }}人聊天</span>
              <span class="stats-value ml-2px cursor-pointer color-#1a65ff!" @click="handleChat">立即加入</span>
            </div>
          </div>

          <!-- Tags -->
          <div class="channel-tags">
            <span class="tag-label">标签:</span>
            <span v-for="(item, index) in lunTanRes.hotTags" :key="index" class="tag-item"
              >{{ item }}{{ index === lunTanRes.hotTags.length - 1 ? '' : '、' }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 打开群聊窗口 -->
    <ChatPage
      v-if="isChat"
      v-model:is-chat="isChat"
      :chat-title="lunTanRes.channelTitle"
      :chat-description="lunTanRes.channelProfile"
      :channel-id="lunTanRes.channelId"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { Plus, EditPen } from '@element-plus/icons-vue'
  import { ChannelRespVO } from '@/api/channel/types'
  import { createChannelFollow, deleteChannelFollow } from '@/api/channel/index'
  import ChatPage from '@/pages/chat-page/index.vue'
  import useUserStore from '@/store/user'
  const userStore = useUserStore()

  const lunTanRes = defineModel<ChannelRespVO>('modelValue', {
    required: true,
  })

  const handleClick = () => {
    window.open('/channel/create?channelId=' + lunTanRes.value.channelId, '_blank')
  }
  const handleFollow = () => {
    createChannelFollow({ channelId: lunTanRes.value.channelId }).then((res) => {
      if (res.code === 0) {
        lunTanRes.value.isFollow = true
        ElMessage.success('关注成功')
      }
    })
  }
  const handleUnfollow = () => {
    deleteChannelFollow({ channelId: lunTanRes.value.channelId }).then((res) => {
      if (res.code === 0) {
        lunTanRes.value.isFollow = false
        ElMessage.success('取消关注成功')
      }
    })
  }

  // 订阅群聊
  const isChat = ref(false)
  const handleChat = async () => {
    // 登录判断
    if (!userStore.token) {
      ElMessage.warning('请先登录')
      return
    }
    await userStore.mqttClient?.subscribe(`zbjk_message_group/${lunTanRes.value.channelId}`)
    isChat.value = true
  }
</script>

<style scoped>
  .channel-header {
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
    border: 1px solid #eeeeee;
    margin-bottom: 16px;
  }

  .header-container {
    display: flex;
  }

  .logo-title-section {
    display: flex;
    align-items: flex-start;
  }

  .logo {
    width: 80px;
    height: 80px;
    margin-right: 16px;
  }

  .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .title-section {
    flex: 1;
  }

  .main-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 0 0 12px 0;
  }

  .action-buttons {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
  }

  .subscribe-btn,
  .post-btn {
    font-size: 14px;
    padding: 0px 12px !important;
  }

  .channel-info {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
  }

  .channel-stats {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
  }

  .stats-value {
    color: #333;
    font-weight: 500;
  }

  .channel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 14px;
    color: #666;
  }

  .tag-label {
    font-weight: 500;
  }

  .tag-item {
    color: #1a65ff;
  }
</style>