82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import WorkbenchModuleCard from './workbench-module-card.vue';
|
||
|
|
|
||
|
|
defineOptions({ name: 'WorkbenchRecentVisit' });
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
editing?: boolean;
|
||
|
|
collapsed?: boolean;
|
||
|
|
}
|
||
|
|
withDefaults(defineProps<Props>(), { editing: false, collapsed: false });
|
||
|
|
defineEmits<{ (e: 'hide'): void; (e: 'toggle-collapse'): void }>();
|
||
|
|
|
||
|
|
interface VisitRow {
|
||
|
|
id: string;
|
||
|
|
title: string;
|
||
|
|
type: '项目' | '执行' | '产品' | '需求';
|
||
|
|
timeLabel: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const rows: VisitRow[] = [
|
||
|
|
{ id: 'v1', title: '商城 V2 升级', type: '项目', timeLabel: '2h 前' },
|
||
|
|
{ id: 'v2', title: '迭代 24.05', type: '执行', timeLabel: '今日' },
|
||
|
|
{ id: 'v3', title: '分片设计评审', type: '需求', timeLabel: '昨日' },
|
||
|
|
{ id: 'v4', title: '收银台', type: '产品', timeLabel: '2 天前' },
|
||
|
|
{ id: 'v5', title: '风控引擎接入', type: '项目', timeLabel: '3 天前' }
|
||
|
|
];
|
||
|
|
|
||
|
|
function typeTag(t: VisitRow['type']): 'primary' | 'success' | 'warning' | 'info' {
|
||
|
|
return ({ 项目: 'primary', 执行: 'success', 产品: 'warning', 需求: 'info' } as const)[t];
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<WorkbenchModuleCard
|
||
|
|
title="最近访问"
|
||
|
|
icon="mdi:history"
|
||
|
|
:badge-count="rows.length"
|
||
|
|
:editing="editing"
|
||
|
|
:collapsed="collapsed"
|
||
|
|
@hide="$emit('hide')"
|
||
|
|
@toggle-collapse="$emit('toggle-collapse')"
|
||
|
|
>
|
||
|
|
<ul class="visit-list">
|
||
|
|
<li v-for="row in rows" :key="row.id" class="visit-item">
|
||
|
|
<ElTag size="small" :type="typeTag(row.type)">{{ row.type }}</ElTag>
|
||
|
|
<span class="visit-title">{{ row.title }}</span>
|
||
|
|
<span class="visit-time">{{ row.timeLabel }}</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</WorkbenchModuleCard>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.visit-list {
|
||
|
|
list-style: none;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
.visit-item {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: auto 1fr auto;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
padding: 8px 4px;
|
||
|
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
.visit-item:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
.visit-title {
|
||
|
|
min-width: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.visit-time {
|
||
|
|
font-size: 11px;
|
||
|
|
color: var(--el-text-color-secondary);
|
||
|
|
}
|
||
|
|
</style>
|