feat: add task management and progress reporting
- Implemented task and subtask structures with progress tracking. - Added reporting functionality to log progress at various stages in hotel room status management scripts. - Created a task store to manage tasks and their states, including persistence to local storage. - Updated UI components to display task lists and handle task actions (retry, remove). - Removed deprecated TaskCard and TaskList components, replacing them with a new structure for better maintainability. - Enhanced script execution service to emit progress events for UI updates.
This commit is contained in:
DEV_DSW
@@ -1,63 +0,0 @@
|
||||
<!--
|
||||
* @Author: kongbeiwu lishaohua-520@qq.com
|
||||
* @Date: 2025-12-21 23:02:06
|
||||
* @LastEditors: kongbeiwu lishaohua-520@qq.com
|
||||
* @LastEditTime: 2025-12-28 11:09:00
|
||||
* @FilePath: /project/zn-ai/src/renderer/components/TaskList/Card.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<template>
|
||||
<div v-for="item in task" :key="item.id"
|
||||
class="border border-solid border-[#E5E8EE] dark:border-[#2a2a2d] rounded-[12px] p-[12px] mb-[12px] task dark:bg-[#1f1f22]">
|
||||
<div class="flex items-center pb-[12px] border-b border-dashed border-[#E5E8EE] dark:border-[#2a2a2d]">
|
||||
<!-- <img class="w-[24px] h-[24px] rounded-[8px]] mr-[4px]" src="@assets/images/task/xc.png" /> -->
|
||||
<div
|
||||
class="w-[24px] h-[24px] rounded-[4px] bg-[#EFF6FF] dark:bg-[#1f1f22] text-[#2B7FFF] text-[14px] font-bold border border-solid border-[#BEDBFF] dark:border-[#2a2a2d] flex justify-center items-center">
|
||||
{{ item.name[0] }}</div>
|
||||
<div class="text-[16px] text-[#171717] dark:text-gray-100 font-bold mr-[8px] ml-[4px]">{{ item.name }}</div>
|
||||
<div class="pl-[8px] pr-[8px] text-[12px] rounded-[100px]" :class="item.statusColor">{{
|
||||
item.statusText }}</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-[12px]">
|
||||
<component :is="item.desIcon" :color="item.color" class="w-[15px] mr-[4px]" />
|
||||
<div class="text-[14px]" :class="`text-[${item.color}]`" :style="{ color: item.color }">{{ item.des }}</div>
|
||||
</div>
|
||||
<div class="mt-[24px]">
|
||||
<button class="w-[100%] h-[40px] bg-[#2B7FFF] text-white text-[14px] rounded-[12px]">{{ item.statusColor !==
|
||||
'error' ? '查看' : '处理' }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { task } from '@constant/task'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.task {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: all .2s linear;
|
||||
}
|
||||
|
||||
.task .success {
|
||||
background-color: #E0FAEC;
|
||||
color: #1FC16B;
|
||||
}
|
||||
|
||||
.task .error {
|
||||
background-color: #FFEBEC;
|
||||
color: #FB3748;
|
||||
}
|
||||
|
||||
.task .warning {
|
||||
background-color: #FFF3EB;
|
||||
color: #FA7319;
|
||||
}
|
||||
|
||||
.task:hover {
|
||||
z-index: 2;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
|
||||
transform: translate3d(0, -2px, 0);
|
||||
}</style>
|
||||
@@ -1,77 +0,0 @@
|
||||
<template>
|
||||
<div class="task p-3">
|
||||
<div class="flex border border-[#BEDBFF] dark:border-[#2a2a2d] h-12 p-1 rounded-[10px] bg-[#EFF6FF] dark:bg-[#1f1f22] task-tab">
|
||||
<div v-for="item in tabs" :key="item.value" class="flex-1 flex text-center items-center h-full align-middle text" :class="active === item.value && 'active'" @click="changeTab(item.value)">
|
||||
<div class="flex-1">{{ item.name }}<span v-if="item.total">{{`（${item.total > 98 && item.total + '+' || item.total}）`}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-3 mb-3 text-[14px]">
|
||||
<div class="text-[#171717] dark:text-gray-100">今天</div>
|
||||
<div class="text-[#99A0AE] dark:text-gray-500">02:32:05</div>
|
||||
</div>
|
||||
<div>
|
||||
<Card />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from './Card.vue';
|
||||
import { ref, reactive } from "vue";
|
||||
|
||||
const tabs = reactive([
|
||||
{
|
||||
name: '待处理',
|
||||
value: 1,
|
||||
total: 10,
|
||||
},
|
||||
{
|
||||
name: '已处理',
|
||||
value: 2,
|
||||
total: 99,
|
||||
}
|
||||
])
|
||||
const active = ref(1);
|
||||
const changeTab = (val:number) => {
|
||||
active.value = val;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.task-tab .text {
|
||||
color: #525866;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:global(.dark) .task-tab .text {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.task-tab .active {
|
||||
position: relative;
|
||||
color: #2B7FFF;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
:global(.dark) .task-tab .active {
|
||||
color: #2B7FFF;
|
||||
background: #1f1f22;
|
||||
}
|
||||
|
||||
.task-tab .active::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
border-radius: 8px;
|
||||
border: 1px solid #2B7FFF;
|
||||
}
|
||||
|
||||
:global(.dark) .task-tab .active::after {
|
||||
border: 1px solid #2B7FFF;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user