Web/cn-rdms-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects): 工作台小组件设计

Browse Source
This commit is contained in:
hongawen
2026-05-28 08:20:01 +08:00
parent 3988eaf910
commit 4ed4b537ad
54 changed files with 4726 additions and 2720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

383
src/views/workbench/modules/workbench-banner.vue
View File

@@ -1,273 +1,302 @@
<script setup lang="ts">
import { computed } from 'vue';
import { computed, ref } from 'vue';
import dayjs from 'dayjs';
import { useAuthStore } from '@/store/modules/auth';
import { getGreeting, getTodayLabel } from '../homepage';
import type { WorkbenchBannerSummary } from '../homepage';
import { getGreeting } from '../homepage';
defineOptions({ name: 'WorkbenchBanner' });
interface Props {
summary: WorkbenchBannerSummary;
interface NoticeRow {
id: string;
title: string;
timeLabel: string;
}
const props = defineProps<Props>();
const authStore = useAuthStore();
const displayName = computed(() => authStore.userInfo.nickname || authStore.userInfo.userName || '同学');
const greeting = computed(() => getGreeting());
const todayLabel = computed(() => getTodayLabel());
const rhythmItems = computed(() => [
{ label: '本周完成', value: `${props.summary.weekDone} / ${props.summary.weekTotal}`, tone: 'emerald' as const },
{ label: '进行中', value: String(props.summary.weekInProgress), tone: 'sky' as const },
{ label: '逾期', value: String(props.summary.weekOverdue), tone: 'rose' as const }
]);
const weekdayNames = ['', '周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const dateContext = computed(() => {
const now = dayjs();
return {
date: now.format('YYYY-MM-DD'),
weekday: weekdayNames[now.isoWeekday()] ?? '',
week: `第 ${now.isoWeek()} 周`
};
});
// 公告 mock：banner 阶段本地维护，等公告中心接口落地再迁移至 mock.ts
const allNotices: NoticeRow[] = [
{ id: 'n1', title: '【运维】本周六 02:00-04:00 数据库主从切换', timeLabel: '2 天前' },
{ id: 'n2', title: '【HR】Q2 OKR 复盘截止 06-05', timeLabel: '3 天前' },
{ id: 'n3', title: '【流程】工单 SLA 新规则即将上线', timeLabel: '1 周前' },
{ id: 'n4', title: '【系统】新版本 25.06 发布日程公告', timeLabel: '2 周前' },
{ id: 'n5', title: '【行政】6 月端午节放假安排', timeLabel: '3 周前' },
{ id: 'n6', title: '【安全】禁止使用未受控外部 AI 工具处理客户数据', timeLabel: '1 个月前' }
];
const previewNotices = computed(() => allNotices.slice(0, 3));
const drawerOpen = ref(false);
function openDrawer() {
drawerOpen.value = true;
}
function closeDrawer() {
drawerOpen.value = false;
}
</script>
<template>
<section class="workbench-banner">
<div class="workbench-banner__identity">
<div class="workbench-banner__title-group">
<h1 class="workbench-banner__title">{{ greeting }}，{{ displayName }}</h1>
</div>
<p class="workbench-banner__subtitle">{{ todayLabel }}</p>
<div class="workbench-banner__digest">
<div class="workbench-banner__digest-item">
<span class="workbench-banner__digest-label">今日待办</span>
<strong class="workbench-banner__digest-value">{{ summary.todoCount }}</strong>
<span class="workbench-banner__digest-unit">项</span>
</div>
<span class="workbench-banner__digest-sep">·</span>
<div class="workbench-banner__digest-item">
<span class="workbench-banner__digest-label">即将到期</span>
<strong class="workbench-banner__digest-value workbench-banner__digest-value--warn">
{{ summary.upcomingCount }}
</strong>
<span class="workbench-banner__digest-unit">项</span>
</div>
</div>
<h1 class="workbench-banner__title">{{ greeting }}，{{ displayName }}</h1>
<p class="workbench-banner__meta">
{{ dateContext.date }} {{ dateContext.weekday }}
<span class="workbench-banner__meta-dot">·</span>
{{ dateContext.week }}
</p>
</div>
<div class="workbench-banner__rhythm">
<div class="workbench-banner__rhythm-header">
<h2 class="workbench-banner__rhythm-title">本周节奏</h2>
<span class="workbench-banner__rhythm-rate">完成率 {{ summary.weekCompletionRate }}%</span>
</div>
<div class="workbench-banner__rhythm-bar">
<div class="workbench-banner__rhythm-bar-inner" :style="{ width: `${summary.weekCompletionRate}%` }" />
</div>
<ul class="workbench-banner__rhythm-list">
<li
v-for="item in rhythmItems"
:key="item.label"
class="workbench-banner__rhythm-item"
:class="`workbench-banner__rhythm-item--${item.tone}`"
>
<span class="workbench-banner__rhythm-item-label">{{ item.label }}</span>
<strong class="workbench-banner__rhythm-item-value">{{ item.value }}</strong>
<div class="workbench-banner__notice">
<header class="workbench-banner__notice-header">
<span class="workbench-banner__notice-title">
<SvgIcon icon="mdi:bullhorn-outline" class="workbench-banner__notice-icon" />
公告
<span class="workbench-banner__notice-count">{{ allNotices.length }}</span>
</span>
<button class="workbench-banner__notice-more" type="button" @click="openDrawer">
更多
<SvgIcon icon="mdi:arrow-right" />
</button>
</header>
<ul class="workbench-banner__notice-list">
<li v-for="row in previewNotices" :key="row.id" class="workbench-banner__notice-row">
<span class="workbench-banner__notice-row-title">{{ row.title }}</span>
<span class="workbench-banner__notice-row-time">{{ row.timeLabel }}</span>
</li>
</ul>
</div>
<ElDrawer v-model="drawerOpen" title="全部公告" size="480px">
<ElScrollbar>
<ul class="workbench-banner__drawer-list">
<li v-for="row in allNotices" :key="row.id" class="workbench-banner__drawer-row">
<div class="workbench-banner__drawer-row-title">{{ row.title }}</div>
<div class="workbench-banner__drawer-row-time">{{ row.timeLabel }}</div>
</li>
</ul>
</ElScrollbar>
<template #footer>
<ElButton @click="closeDrawer">关闭</ElButton>
</template>
</ElDrawer>
</section>
</template>
<style scoped>
.workbench-banner {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
gap: 16px;
padding: 24px;
border: 1px solid rgb(226 232 240 / 92%);
border-radius: 24px;
background:
radial-gradient(circle at top left, rgb(14 116 144 / 14%), transparent 34%),
radial-gradient(circle at bottom right, rgb(15 118 110 / 10%), transparent 28%),
linear-gradient(135deg, rgb(255 255 255 / 99%), rgb(248 250 252 / 98%));
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
align-items: stretch;
gap: 24px;
padding: 22px 28px;
border: 1px solid rgb(226 232 240 / 88%);
border-radius: 20px;
background-color: rgb(255 255 255 / 96%);
}
.workbench-banner__identity {
display: flex;
flex-direction: column;
gap: 14px;
justify-content: center;
gap: 8px;
min-width: 0;
}
.workbench-banner__title-group {
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
}
.workbench-banner__title {
margin: 0;
color: rgb(15 23 42 / 98%);
font-size: 32px;
line-height: 1.15;
letter-spacing: -0.02em;
font-size: 26px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
}
.workbench-banner__subtitle {
.workbench-banner__meta {
margin: 0;
color: rgb(100 116 139 / 92%);
font-size: 14px;
}
.workbench-banner__digest {
display: flex;
align-items: baseline;
gap: 12px;
padding: 14px 16px;
border: 1px solid rgb(226 232 240 / 88%);
border-radius: 18px;
background-color: rgb(255 255 255 / 78%);
}
.workbench-banner__digest-item {
display: flex;
align-items: baseline;
gap: 8px;
}
.workbench-banner__digest-label {
color: rgb(100 116 139 / 92%);
font-size: 13px;
}
.workbench-banner__digest-value {
color: rgb(15 23 42 / 98%);
font-size: 24px;
line-height: 1;
}
.workbench-banner__digest-value--warn {
color: rgb(217 119 6 / 94%);
}
.workbench-banner__digest-unit {
color: rgb(100 116 139 / 90%);
font-size: 12px;
}
.workbench-banner__digest-sep {
.workbench-banner__meta-dot {
margin: 0 6px;
color: rgb(203 213 225 / 96%);
font-size: 18px;
user-select: none;
}
.workbench-banner__rhythm {
.workbench-banner__notice {
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px 20px;
border: 1px solid rgb(226 232 240 / 88%);
border-radius: 20px;
background: linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(241 245 249 / 98%));
gap: 10px;
min-width: 0;
padding-left: 24px;
border-left: 1px solid rgb(226 232 240 / 88%);
}
.workbench-banner__rhythm-header {
.workbench-banner__notice-header {
display: flex;
align-items: baseline;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.workbench-banner__rhythm-title {
margin: 0;
color: rgb(15 23 42 / 98%);
font-size: 15px;
font-weight: 700;
.workbench-banner__notice-title {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgb(15 23 42 / 96%);
font-size: 14px;
font-weight: 600;
}
.workbench-banner__rhythm-rate {
color: rgb(5 150 105 / 94%);
.workbench-banner__notice-icon {
color: rgb(14 116 144 / 92%);
font-size: 16px;
}
.workbench-banner__notice-count {
display: inline-flex;
align-items: center;
padding: 1px 8px;
border-radius: 999px;
background-color: rgb(241 245 249 / 96%);
color: rgb(71 85 105 / 96%);
font-size: 11px;
font-weight: 500;
}
.workbench-banner__notice-more {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 6px;
border: none;
border-radius: 6px;
background-color: transparent;
color: rgb(14 116 144 / 96%);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition:
background-color 160ms ease,
color 160ms ease;
}
.workbench-banner__rhythm-bar {
position: relative;
height: 8px;
border-radius: 999px;
background-color: rgb(226 232 240 / 80%);
overflow: hidden;
.workbench-banner__notice-more:hover {
background-color: rgb(236 254 255 / 92%);
color: rgb(8 90 110 / 96%);
}
.workbench-banner__rhythm-bar-inner {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, rgb(14 116 144 / 92%), rgb(16 185 129 / 88%));
transition: width 240ms ease;
.workbench-banner__notice-more:focus-visible {
outline: 2px solid rgb(14 116 144 / 60%);
outline-offset: 2px;
}
.workbench-banner__rhythm-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
.workbench-banner__notice-list {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
max-height: 108px;
overflow-y: auto;
}
.workbench-banner__rhythm-item {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 12px;
border-radius: 14px;
background-color: rgb(248 250 252 / 96%);
.workbench-banner__notice-list::-webkit-scrollbar {
width: 6px;
}
.workbench-banner__rhythm-item--emerald {
background-color: rgb(236 253 245 / 88%);
.workbench-banner__notice-list::-webkit-scrollbar-thumb {
background-color: rgb(203 213 225 / 70%);
border-radius: 3px;
}
.workbench-banner__rhythm-item--sky {
background-color: rgb(240 249 255 / 88%);
.workbench-banner__notice-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 12px;
padding: 6px 0;
border-bottom: 1px dashed rgb(226 232 240 / 70%);
}
.workbench-banner__rhythm-item--rose {
background-color: rgb(255 241 242 / 88%);
.workbench-banner__notice-row:last-child {
border-bottom: none;
}
.workbench-banner__rhythm-item-label {
.workbench-banner__notice-row-title {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: rgb(30 41 59 / 96%);
font-size: 13px;
}
.workbench-banner__notice-row-time {
color: rgb(100 116 139 / 92%);
font-size: 12px;
white-space: nowrap;
}
.workbench-banner__drawer-list {
margin: 0;
padding: 0 4px 0 0;
list-style: none;
}
.workbench-banner__drawer-row {
padding: 12px 0;
border-bottom: 1px solid rgb(226 232 240 / 80%);
}
.workbench-banner__drawer-row:last-child {
border-bottom: none;
}
.workbench-banner__drawer-row-title {
color: rgb(15 23 42 / 96%);
font-size: 14px;
line-height: 1.5;
}
.workbench-banner__drawer-row-time {
margin-top: 4px;
color: rgb(100 116 139 / 92%);
font-size: 12px;
}
.workbench-banner__rhythm-item-value {
color: rgb(15 23 42 / 98%);
font-size: 20px;
line-height: 1.1;
}
.workbench-banner__rhythm-item--emerald .workbench-banner__rhythm-item-value {
color: rgb(5 150 105 / 96%);
}
.workbench-banner__rhythm-item--sky .workbench-banner__rhythm-item-value {
color: rgb(14 116 144 / 96%);
}
.workbench-banner__rhythm-item--rose .workbench-banner__rhythm-item-value {
color: rgb(225 29 72 / 94%);
}
@media (width <= 1280px) {
@media (width <= 1024px) {
.workbench-banner {
grid-template-columns: 1fr;
}
.workbench-banner__notice {
padding-left: 0;
padding-top: 16px;
border-left: none;
border-top: 1px solid rgb(226 232 240 / 88%);
}
}
@media (width <= 768px) {
.workbench-banner {
padding: 18px;
padding: 18px 20px;
}
.workbench-banner__title {
font-size: 26px;
font-size: 22px;
}
}
</style>