Refactor code structure and remove redundant changes

pages/channel/components/HotLlabel.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="box-border w-320px border border-[#EEEEEE] rounded-8px border-solid bg-[#FFFFFF] px-23px py-25px">
+    <div class="text-16px text-[#333333] font-normal">频道列表</div>
+    <div class="mt-30px">
+      <el-row>
+        <el-col v-for="(item, index) in channelIdList" :key="index" :span="8" class="mb-10px">
+          <span
+            class="cursor-pointer text-14px text-[#999999] font-normal"
+            :class="{ active: channelId === item.channelId }"
+            @click="handleClick(item.channelId)"
+            >{{ item.channelTitle }}</span
+          >
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { list } from '@/api/channel/index'
+
+  const channelId = defineModel('modelValue', {
+    required: true,
+  })
+  /** 获取频道列表 */
+  const channelIdList = ref<any>([])
+  const getChannelIdList = () => {
+    list().then((res) => {
+      channelIdList.value = res.data
+      if (channelIdList.value.length > 0) {
+        channelId.value = channelIdList.value[0].channelId
+      }
+    })
+  }
+  getChannelIdList()
+
+  const handleClick = (id: number) => {
+    console.log(id)
+    channelId.value = id
+  }
+</script>
+
+<style scoped lang="scss">
+  .active {
+    color: #1a65ff !important;
+  }
+</style>