411f4f3421
- Removed hardcoded channel data from `channel.ts` and replaced it with a dynamic channel dictionary. - Introduced a new Pinia store `channel.ts` to manage selected and available channels. - Reworked `AddChannelDialog.vue` to allow users to search and select channels dynamically. - Updated `TaskCenter.vue` to utilize the new channel store and handle empty channel selections gracefully. - Enhanced IPC communication for loading and saving selected channels in the configuration. - Adjusted `runTaskOperationService.ts` to ensure proper handling of channel data. - Improved styling and structure of UI components for better user experience.
65 lines
2.5 KiB
Vue
65 lines
2.5 KiB
Vue
<template>
|
|
<div class="pl-6 pr-6 pb-6">
|
|
<div class="flex justify-between items-center pb-4">
|
|
<h3 class="text-base font-semibold">任务中心</h3>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4 max-[800px]:grid-cols-1">
|
|
<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
|
|
text-[#3b82f6] text-[23px]">
|
|
{{ item.icon }}
|
|
</div>
|
|
|
|
<div>
|
|
<div class="font-semibold dark:text-gray-100">
|
|
{{ item.title }}
|
|
</div>
|
|
<div class="text-[#9aa5b1] dark:text-gray-400 text-[13px] mt-1.5">
|
|
{{ item.desc }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { Settings } from '@lucide/vue'
|
|
import { taskCenterList, taskCenterItem } from '@constant/taskCenterList'
|
|
import { useChannelStore } from '@stores/channel'
|
|
import emitter from '@utils/emitter'
|
|
|
|
const channelStore = useChannelStore()
|
|
const taskList = computed(() => taskCenterList)
|
|
|
|
// 点击任务项
|
|
const handleTaskItem = (item: taskCenterItem) => {
|
|
// 一键打开各渠道
|
|
if (item.type === 'channel') {
|
|
if (!channelStore.selectedChannels || channelStore.selectedChannels.length === 0) {
|
|
ElMessage.warning('请先配置渠道')
|
|
return
|
|
}
|
|
window.api.openChannel(JSON.parse(JSON.stringify(channelStore.selectedChannels)))
|
|
return
|
|
}
|
|
|
|
// 操作房型
|
|
emitter.emit('OPERATION_CHANNEL', item)
|
|
}
|
|
|
|
// 渠道设置
|
|
const handleChannelSetting = () => emitter.emit('ADD_CHANNEL')
|
|
</script>
|