BizWorkbench 个人工作台

个人办公门户组件：时段问候头（早安 / 午安 / 晚上好自动 + 用户名 + 日期星期）+ 五类业务卡片——我的待办（圆点勾选完成、24h 内临期红显）、通知速览（四色语义圆点 + 相对时间）、今日日程、快捷入口宫格（hover 上浮）、常用应用。卡片显隐与顺序由 cards.order 配置、条数由 cards.limits 控制，storageKey 注入后配置记忆到 localStorage；待办 / 通知支持 request 远端拉取。与 BizDashboardGrid（大屏指标墙）、BizLayout（导航壳）互补，本组件是个人办公聚合门户。

基础用法

下午好，张三

2026 年 10 月 26 日 · 星期一

我的待办

已完成 1 / 4

审批：市场部 Q4 活动预算10-26 19:08

回复工单 #1024（客户网络割接）10-27 19:08

评审新组件库第四批提案10-27 23:08

通知速览

3 条

你负责的合同「XX 科技服务协议」3 天后到期5 分钟前

张伟 转派给你一张工单46 分钟前

发薪日提醒：10 月工资条已生成刚刚

今日日程

09:30-10:00

晨会 · 研发中心长江会议室

14:00-15:00

新员工入职面谈洽谈室 2

16:30-17:30

四批组件需求评审线上 · 会议 882

快捷入口

常用应用

五卡片齐装：待办勾选与完成计数、通知语义色、日程时段、六个快捷入口与四个常用应用。

<script setup lang="ts">
/** 基础用法：五卡片齐装——待办（勾选/临期）、通知、日程、快捷入口、常用应用 */
import { ref } from 'vue'
import { BizWorkbench } from 'vue3-ep-biz-lib'
import type { BizWorkbenchNotice, BizWorkbenchSchedule, BizWorkbenchTodo } from 'vue3-ep-biz-lib'

const at = (offsetMin: number) => new Date(Date.now() + offsetMin * 60000).getTime()

const todos = ref<BizWorkbenchTodo[]>([
  { id: 't1', title: '审批：市场部 Q4 活动预算', due: at(60 * 2), level: 'urgent' },
  { id: 't2', title: '回复工单 #1024（客户网络割接）', due: at(60 * 26) },
  { id: 't3', title: '评审新组件库第四批提案', due: at(60 * 30) },
  { id: 't4', title: '提交本月 OKR 进度', done: true },
])

const notices = ref<BizWorkbenchNotice[]>([
  { id: 'n1', title: '你负责的合同「XX 科技服务协议」3 天后到期', type: 'warning', time: at(-5) },
  { id: 'n2', title: '张伟 转派给你一张工单', type: 'info', time: at(-46) },
  { id: 'n3', title: '发薪日提醒：10 月工资条已生成', type: 'success', time: at(60 * 5) },
])

const schedule = ref<BizWorkbenchSchedule[]>([
  { id: 's1', title: '晨会 · 研发中心', time: '09:30-10:00', location: '长江会议室' },
  { id: 's2', title: '新员工入职面谈', time: '14:00-15:00', location: '洽谈室 2' },
  { id: 's3', title: '四批组件需求评审', time: '16:30-17:30', location: '线上 · 会议 882' },
])
</script>

<template>
  <div style="max-width: 1080px">
    <BizWorkbench
      user-name="张三"
      :todos="todos"
      :notices="notices"
      :schedule="schedule"
      :quick-entries="[
        { key: 'approve', label: '审批中心', icon: '✅' },
        { key: 'order', label: '创建工单', icon: '🧾', color: 'var(--el-color-success-light-8)' },
        { key: 'meeting', label: '预约会议', icon: '📅', color: 'var(--el-color-warning-light-8)' },
        { key: 'visitor', label: '访客邀请', icon: '🪪', color: 'var(--el-color-danger-light-8)' },
        { key: 'salary', label: '我的工资条', icon: '💰', color: 'var(--el-color-primary-light-8)' },
        { key: 'help', label: '帮助中心', icon: '💬', color: 'var(--el-color-info-light-8)' },
      ]"
      :apps="[
        { key: 'oa', label: 'OA 审批', desc: '流程 · 发文 · 用章', icon: 'oa' },
        { key: 'hr', label: '人事系统', desc: '考勤 · 薪酬 · 假期', icon: 'hr' },
        { key: 'crm', label: '客户 CRM', desc: '线索 · 商机 · 合同', icon: 'crm' },
        { key: 'bi', label: '经营看板', desc: '营收 · 转化 · 交付', icon: 'bi' },
      ]"
    />
  </div>
</template>

显示代码

远程注入

下午好，接口模式

2026 年 10 月 26 日 · 星期一

我的待办

已完成 0 / 0

暂无待办，劳逸结合 🎉

通知速览

0 条

暂无通知

今日日程

今日暂无日程安排

快捷入口

常用应用

未配置常用应用

todo-request / notice-request 拉取（500ms 模拟延迟）；快捷入口接 expose.refresh() 重拉。

<script setup lang="ts">
/** 远程注入：todoRequest / noticeRequest 拉取（500ms 模拟延迟），refresh 可重拉 */
import { BizWorkbench } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'
import type { BizWorkbenchNotice, BizWorkbenchTodo } from 'vue3-ep-biz-lib'

const at = (m: number) => new Date(Date.now() + m * 60000).getTime()

const todoRequest = () =>
  new Promise<BizWorkbenchTodo[]>((resolve) =>
    setTimeout(() =>
      resolve([
        { id: 'rt1', title: '远端待办 · 补充供应商资质文件', due: at(60 * 8) },
        { id: 'rt2', title: '远端待办 · 季度安全培训完成确认', level: 'high' },
      ]), 500))

const noticeRequest = () =>
  new Promise<BizWorkbenchNotice[]>((resolve) =>
    setTimeout(() =>
      resolve([
        { id: 'rn1', title: '系统将于周六 02:00 例行维护', type: 'warning', time: at(-30) },
        { id: 'rn2', title: '你关注的看板「交付质量」有新数据', type: 'info', time: at(-120) },
      ]), 500))
</script>

<template>
  <div style="max-width: 1080px">
    <BizWorkbench
      user-name="接口模式"
      :todo-request="todoRequest"
      :notice-request="noticeRequest"
      :quick-entries="[{ key: 'refresh', label: '刷新数据', icon: '🔄' }]"
      @quick-click="ElMessage.success('quick-click 事件，业务侧调 expose.refresh()')"
    />
  </div>
</template>

显示代码

卡片配置

下午好，定制工作台

2026 年 10 月 26 日 · 星期一

通知速览

2 条

通知一1 分钟前

通知二10 分钟前

我的待办

已完成 0 / 4

待办一10-26 18:08

待办二

待办三

快捷入口

常用应用

cards.order 控制显隐与顺序（本例隐藏日程、通知置顶），cards.limits 控制各卡数据条数。

<script setup lang="ts">
/** 卡片配置：order 控制显隐与顺序（拖出日程、通知提前），limits 控制数据条数 */
import { BizWorkbench } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 1080px">
    <BizWorkbench
      user-name="定制工作台"
      :cards="{ order: ['notices', 'todos', 'quick', 'apps'], limits: { todos: 3, notices: 4 } }"
      :todos="[
        { id: 'a', title: '待办一', due: Date.now() + 3600_000 },
        { id: 'b', title: '待办二' },
        { id: 'c', title: '待办三' },
        { id: 'd', title: '待办四（超限隐藏）' },
      ]"
      :notices="[
        { id: 'n1', title: '通知一', type: 'warning', time: Date.now() - 60000 },
        { id: 'n2', title: '通知二', time: Date.now() - 600000 },
      ]"
      :quick-entries="[{ key: 'k', label: '入口', icon: '⚡' }]"
      :apps="[{ key: 'app', label: '应用', desc: '配置化' }]"
    />
  </div>
</template>

显示代码

配置持久化

下午好，配置持久化

2026 年 10 月 26 日 · 星期一

我的待办

已完成 0 / 1

刷新页面后布局保持

通知速览

1 条

配置已存 localStorage1 分钟前

今日日程

15:00-16:00

评审会长江会议室

快捷入口

未配置快捷入口

常用应用

未配置常用应用

storage-key 记忆卡片配置；expose.setCardsConfig() 运行时切换布局，刷新页面后保持。

<script setup lang="ts">
/** 配置持久化：storageKey 记忆卡片配置，expose setCardsConfig 运行时调整后刷新仍在 */
import { ref } from 'vue'
import { BizWorkbench } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const wb = ref<InstanceType<typeof BizWorkbench>>()

const applyLayout = (): void => {
  wb.value?.setCardsConfig({ order: ['schedule', 'notices', 'todos'], limits: { todos: 2 } })
  ElMessage.success('已切换为「日程优先」布局并写入 localStorage')
}

const resetLayout = (): void => {
  wb.value?.setCardsConfig({ order: ['todos', 'notices', 'schedule', 'quick', 'apps'], limits: {} })
  ElMessage.info('已恢复默认布局')
}
</script>

<template>
  <div style="max-width: 1080px">
    <div style="display: flex; gap: 8px; margin-bottom: 12px">
      <el-button size="small" @click="applyLayout">切换「日程优先」布局</el-button>
      <el-button size="small" @click="resetLayout">恢复默认</el-button>
    </div>
    <BizWorkbench
      ref="wb"
      user-name="配置持久化"
      storage-key="demo-wb"
      :todos="[{ id: 't', title: '刷新页面后布局保持' }]"
      :schedule="[{ id: 's', title: '评审会', time: '15:00-16:00', location: '长江会议室' }]"
      :notices="[{ id: 'n', title: '配置已存 localStorage', type: 'success', time: Date.now() - 60000 }]"
    />
  </div>
</template>

显示代码

待办互动

下午好

2026 年 10 月 26 日 · 星期一

我的待办

已完成 0 / 3

2 小时内截止的紧急待办（红显）10-26 19:08

三天后的常规待办10-29 17:08

无截止时间的待办

圆点勾选完成（计数联动）、todo-toggle / todo-click 事件外抛；24h 内截止的待办红显。

<script setup lang="ts">
/** 待办互动：勾选完成（圆点变实心 + 计数联动）、todo-toggle / todo-click 事件外抛、24h 临期红显 */
import { ref } from 'vue'
import { BizWorkbench } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'
import type { BizWorkbenchTodo } from 'vue3-ep-biz-lib'

const todos = ref<BizWorkbenchTodo[]>([
  { id: 'u1', title: '2 小时内截止的紧急待办（红显）', due: Date.now() + 2 * 3600_000, level: 'urgent' },
  { id: 'u2', title: '三天后的常规待办', due: Date.now() + 72 * 3600_000 },
  { id: 'u3', title: '无截止时间的待办' },
])
</script>

<template>
  <div style="max-width: 720px">
    <BizWorkbench
      :cards="{ order: ['todos'] }"
      :todos="todos"
      @todo-toggle="(t, done) => ElMessage.success(`${t.title} → ${done ? '已完成' : '重新打开'}`)"
      @todo-click="(t) => ElMessage.info(`点击待办：${t.title}`)"
    />
  </div>
</template>

显示代码

问候定制

欢迎回来，王芳（运营中心）

2026 年 10 月 26 日 · 星期一

快捷入口

greeting 覆盖自动时段问候；适合集团统一门户的固定欢迎语。

<script setup lang="ts">
/** 问候定制：greeting 覆盖自动时段问候；userName 缺省只显示问候语 */
import { BizWorkbench } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 720px">
    <BizWorkbench
      title="集团统一门户"
      greeting="欢迎回来"
      user-name="王芳（运营中心）"
      :cards="{ order: ['quick'] }"
      :quick-entries="[
        { key: 'data', label: '数据上报', icon: '📊' },
        { key: 'camp', label: '活动配置', icon: '🎯', color: 'var(--el-color-warning-light-8)' },
        { key: 'msg', label: '群发通知', icon: '📣', color: 'var(--el-color-success-light-8)' },
      ]"
    />
  </div>
</template>

显示代码

通知语义色

下午好

2026 年 10 月 26 日 · 星期一

通知速览

4 条

常规信息 · 系统公告已发布刚刚

成功 · 报销单已到账35 分钟前

警告 · 合同 3 天后到期5 小时前

紧急 · 服务器 CPU 告警1 天前

info / success / warning / danger 四色圆点 + 相对时间（刚刚 / N 分钟前 / N 小时前 / N 天前）。

<script setup lang="ts">
/** 通知语义色：info/success/warning/danger 四色圆点 + 相对时间（刚刚/N 分钟前/N 小时前/N 天前） */
import { ref } from 'vue'
import { BizWorkbench } from 'vue3-ep-biz-lib'
import type { BizWorkbenchNotice } from 'vue3-ep-biz-lib'

const m = (n: number) => Date.now() - n * 60000

const notices = ref<BizWorkbenchNotice[]>([
  { id: 'a', title: '常规信息 · 系统公告已发布', time: m(0.5) },
  { id: 'b', title: '成功 · 报销单已到账', type: 'success', time: m(35) },
  { id: 'c', title: '警告 · 合同 3 天后到期', type: 'warning', time: m(60 * 5) },
  { id: 'd', title: '紧急 · 服务器 CPU 告警', type: 'danger', time: m(60 * 30) },
])
</script>

<template>
  <div style="max-width: 720px">
    <BizWorkbench :cards="{ order: ['notices'], limits: { notices: 6 } }" :notices="notices" />
  </div>
</template>

显示代码

入口与应用跳转

下午好

2026 年 10 月 26 日 · 星期一

快捷入口

常用应用

quick-click / app-click 事件接路由跳转，跳转流水实时回显。

<script setup lang="ts">
/** 快捷入口与应用跳转：quick-click / app-click 事件接路由，hover 上浮动效 */
import { ref } from 'vue'
import { BizWorkbench } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const log = ref<string[]>([])
</script>

<template>
  <div style="max-width: 1080px">
    <BizWorkbench
      :cards="{ order: ['quick', 'apps'] }"
      :quick-entries="[
        { key: 'crm', label: '客户 CRM', icon: '🤝' },
        { key: 'bi', label: '经营看板', icon: '📈', color: 'var(--el-color-success-light-8)' },
        { key: 'flow', label: '流程设计', icon: '🔀', color: 'var(--el-color-warning-light-8)' },
        { key: 'file', label: '文档库', icon: '🗂', color: 'var(--el-color-danger-light-8)' },
      ]"
      :apps="[
        { key: 'ticket', label: '工单中心', desc: '服务请求全生命周期', icon: '🧾' },
        { key: 'ledger', label: '合同台账', desc: '到期预警 · 续签', icon: '📜', color: 'var(--el-color-success-light-8)' },
        { key: 'book', label: '预约中心', desc: '会议室 · 车辆 · 设备', icon: '📅', color: 'var(--el-color-warning-light-8)' },
      ]"
      @quick-click="(q) => { log.push(`入口 → ${q.label}`); ElMessage.success(`跳转 ${q.label}`) }"
      @app-click="(a) => { log.push(`应用 → ${a.label}`); ElMessage.info(`打开 ${a.label}`) }"
    />
    <p v-if="log.length" style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">跳转流水：{{ log.join(' ｜ ') }}</p>
  </div>
</template>

显示代码

插槽

下午好，插槽演示

2026 年 10 月 26 日 · 星期一

我的待办

已完成 0 / 1

待办事项

查看全部待办 →

通知速览

1 条

通知示例1 分钟前

今日日程

14:00-15:00

下午评审

打开完整日历 →

快捷入口

未配置快捷入口

常用应用

未配置常用应用

header-extra 头部搜索位、todos-extra / schedule-extra 卡片底部「查看全部」入口。

<script setup lang="ts">
/** 插槽：header-extra 头部搜索位 + todos-extra / schedule-extra 卡片底部「查看全部」 */
import { BizWorkbench } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'
</script>

<template>
  <div style="max-width: 1080px">
    <BizWorkbench
      user-name="插槽演示"
      :todos="[{ id: 't', title: '待办事项' }]"
      :schedule="[{ id: 's', title: '下午评审', time: '14:00-15:00' }]"
      :notices="[{ id: 'n', title: '通知示例', time: Date.now() - 60000 }]"
    >
      <template #header-extra>
        <el-input placeholder="全局搜索：工单 / 合同 / 帮助文档…" style="width: 260px" size="small" clearable @keyup.enter="ElMessage.success('回车搜索')" />
      </template>
      <template #todos-extra>
        <a style="font-size: 12px; color: var(--el-color-primary); cursor: pointer; margin-top: 4px" @click="ElMessage.success('跳转待办中心')">查看全部待办 →</a>
      </template>
      <template #schedule-extra>
        <a style="font-size: 12px; color: var(--el-color-primary); cursor: pointer; margin-top: 4px" @click="ElMessage.success('打开日历')">打开完整日历 →</a>
      </template>
    </BizWorkbench>
  </div>
</template>

显示代码

零数据兜底

下午好，新员工

2026 年 10 月 26 日 · 星期一

我的待办

已完成 0 / 0

暂无待办，劳逸结合 🎉

通知速览

0 条

暂无通知

今日日程

今日暂无日程安排

快捷入口

未配置快捷入口

常用应用

未配置常用应用

全部卡片空态提示（新员工首登场景），问候头正常渲染。

<script setup lang="ts">
/** 零数据兜底：全部卡片空态提示，问候头仍正常渲染 */
import { BizWorkbench } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 720px">
    <BizWorkbench user-name="新员工" />
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
title	string	'工作台'	面板标题
user-name	string	''	展示用户名
greeting	string	按时段自动	自定义问候语
todos	BizWorkbenchTodo[]	[]	待办：{ id, title, due?, level?, done? }
todo-request	() => Promise<BizWorkbenchTodo[]>	—	待办远端拉取
notices	BizWorkbenchNotice[]	[]	通知：{ id, title, type?, time }
notice-request	() => Promise<BizWorkbenchNotice[]>	—	通知远端拉取
schedule	BizWorkbenchSchedule[]	[]	今日日程：{ id, title, time, location? }
quick-entries	BizWorkbenchQuick[]	[]	快捷入口宫格：{ key, label, icon?, color? }
apps	BizWorkbenchApp[]	[]	常用应用：{ key, label, desc?, icon?, color? }
cards	BizWorkbenchCardsConfig	全量默认	卡片显隐顺序（order）与条数上限（limits）
storage-key	string	''	配置持久化 key（biz-workbench:cards:<key>）

Events

事件名	参数	说明
todo-toggle	(todo, done)	待办勾选 / 取消完成
todo-click	(todo)	待办行点击
notice-click	(notice)	通知条点击
quick-click	(quick)	快捷入口点击（接路由）
app-click	(app)	常用应用点击（接路由）

Slots

插槽名	说明
header-extra	问候头右侧（全局搜索位等）
todos-extra	{ todos } 待办卡底部（查看全部）
notices-extra	{ notices } 通知卡底部
schedule-extra	{ schedule } 日程卡底部（打开完整日历）

Expose

属性/方法	说明
refresh	() => Promise<void> 重新拉取远端数据
getCardsConfig	() => BizWorkbenchCardsConfig 当前生效卡片配置
setCardsConfig	(config) => void 更新卡片配置（storageKey 存在时写入 localStorage）

口径说明

• 问候口径：<6 夜深了 / <9 早上好 / <12 上午好 / <14 中午好 / <18 下午好 / 其余 晚上好；greeting 传入时直接覆盖。
• 临期口径：待办 due 距当前 <24h 或 level: 'urgent' 时标题红显；无 due 不参与。
• 配置合并：localStorage 记忆配置与 props.cards 按字段浅合并（存储优先）；order 中非法 key 自动剔除，未列出的卡片隐藏。
• 远端优先：todoRequest / noticeRequest 存在时忽略同名静态数据源，refresh 同时重拉两者。