59 lines
2.2 KiB
Vue
59 lines
2.2 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 { Settings } from '@lucide/vue'
|
|
import { taskCenterList, taskCenterItem } from '@constant/taskCenterList'
|
|
import { channels } from '@constant/channel'
|
|
import emitter from '@utils/emitter'
|
|
|
|
const taskList = computed(() => taskCenterList)
|
|
|
|
// 点击任务项
|
|
const handleTaskItem = (item: taskCenterItem) => {
|
|
// 一键打开各渠道
|
|
if (item.type === 'channel') {
|
|
window.api.openChannel(channels.value)
|
|
return
|
|
}
|
|
|
|
// 操作房型
|
|
emitter.emit('OPERATION_CHANNEL', item)
|
|
}
|
|
|
|
// 渠道设置
|
|
const handleChannelSetting = () => emitter.emit('ADD_CHANNEL')
|
|
</script>
|