feat: add AddChannelDialog component and integrate channel settings in TaskCenter

src/pages/home/TaskCenter.vue

@@ -5,9 +5,13 @@
         </div>
 
         <div class="grid grid-cols-2 gap-4 max-[800px]:grid-cols-1">
-            <div v-for="item in taskList" :key="item.id" class="flex gap-3 items-start p-3.5
+            <div v-for="item in taskList" :key="item.id" class="relative flex gap-3 items-start p-3.5
                   rounded-[10px] border border-[#dfeaf6] dark:border-[#2a2a2d] bg-white dark:bg-[#1f1f22] cursor-pointer hover:bg-[#F5F7FA] dark:hover:bg-[#2a2a2d]"
                 @click="handleTaskItem(item)">
+                <Settings v-if="item.type === 'channel'"
+                    class="absolute top-2 right-2 w-4 h-4 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 cursor-pointer"
+                    @click.stop="handleChannelSetting" />
+
                 <div class="w-11 h-11 bg-[#EFF6FF] dark:bg-[#222225] rounded-lg
                     border border-dashed border-[#9fc0e8] dark:border-gray-700
                     flex items-center justify-center
@@ -30,6 +34,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { Settings } from '@lucide/vue'
 import { taskCenterList, taskCenterItem } from '@constant/taskCenterList'
 import { channels } from '@constant/channel'
 import emitter from '@utils/emitter'
@@ -40,11 +45,14 @@ const taskList = computed(() => taskCenterList)
 const handleTaskItem = (item: taskCenterItem) => {
     // 一键打开各渠道
     if (item.type === 'channel') {
-        window.api.openChannel(channels)
+        window.api.openChannel(channels.value)
         return
     }
 
     // 操作房型
     emitter.emit('OPERATION_CHANNEL', item)
 }
+
+// 渠道设置
+const handleChannelSetting = () => emitter.emit('ADD_CHANNEL')
 </script>