74 lines
1.8 KiB
Vue
74 lines
1.8 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue';
|
||
|
|
import WorkbenchModuleCard from './workbench-module-card.vue';
|
||
|
|
|
||
|
|
defineOptions({ name: 'WorkbenchPersonalItem' });
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
editing?: boolean;
|
||
|
|
collapsed?: boolean;
|
||
|
|
}
|
||
|
|
withDefaults(defineProps<Props>(), { editing: false, collapsed: false });
|
||
|
|
defineEmits<{ (e: 'hide'): void; (e: 'toggle-collapse'): void }>();
|
||
|
|
|
||
|
|
interface ItemRow {
|
||
|
|
id: string;
|
||
|
|
title: string;
|
||
|
|
done: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const items = ref<ItemRow[]>([
|
||
|
|
{ id: 'p1', title: '周会准备 · 跨境支付方案 PPT', done: false },
|
||
|
|
{ id: 'p2', title: '整理 Q2 OKR 复盘材料', done: false },
|
||
|
|
{ id: 'p3', title: '回复采购系统迁移邮件', done: true },
|
||
|
|
{ id: 'p4', title: '技术分享话题征集', done: false },
|
||
|
|
{ id: 'p5', title: '新人 Onboarding · 文档整理', done: false }
|
||
|
|
]);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<WorkbenchModuleCard
|
||
|
|
title="我的个人事项"
|
||
|
|
icon="mdi:format-list-checks"
|
||
|
|
:badge-count="items.filter(i => !i.done).length"
|
||
|
|
:editing="editing"
|
||
|
|
:collapsed="collapsed"
|
||
|
|
@hide="$emit('hide')"
|
||
|
|
@toggle-collapse="$emit('toggle-collapse')"
|
||
|
|
>
|
||
|
|
<ul class="item-list">
|
||
|
|
<li v-for="item in items" :key="item.id" class="item-row">
|
||
|
|
<ElCheckbox v-model="item.done" />
|
||
|
|
<span class="item-text" :class="{ 'item-done': item.done }">{{ item.title }}</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</WorkbenchModuleCard>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.item-list {
|
||
|
|
list-style: none;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.item-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
padding: 8px 4px;
|
||
|
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
||
|
|
}
|
||
|
|
.item-row:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
.item-text {
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
.item-done {
|
||
|
|
text-decoration: line-through;
|
||
|
|
color: var(--el-text-color-placeholder);
|
||
|
|
}
|
||
|
|
</style>
|