工作台 Dashboard

企业后台的「门面页面」：完整应用骨架（侧边菜单 + 顶栏 + 面包屑）之内，除了 KPI 指标、趋势图表、最新业务明细的工作台主视图，侧边菜单的每个模块（订单管理 / 商品列表 / 分类管理 / 会员管理 / 营销中心）都是真实可操作的页面，不是占位图。此示例演示 AppLayout 一体化壳的接入方式，以及一套中型中后台的多模块组织。

在全屏示例中心打开「工作台」

在线预览

预览即 examples/ebui-example-dashboard 工程的真实页面：侧边菜单可切换、可折叠，顶栏可切换暗色，图表 hover 有 tooltip。

今日 GMV（元）

1286934

12.6%

有效订单

3245单

8.2%

支付转化率

4.7%

0.4%

活跃会员

28617人

3.1%

12 笔待审核退货单售后

「国庆大促」活动页待提审运营

3 款商品库存低于安全线库存

9 月会员日方案待评审运营

9.6 凌晨 02:00-04:00 仓配系统升级昨天 16:20

新版《商家结算规则》10 月 1 日生效09-04

抖音渠道 API 接入文档已更新至 v309-02

<template>
  <eb-app-layout
    title="云眠家居 · 运营中台"
    logo-text="云"
    :collapsed="collapsed"
    @update:collapsed="collapsed = $event"
    :is-dark="isDark"
    @toggle="toggleDark"
    :active-menu="activeMenu"
    :active-title="activeTitle"
  >
    <template #menu>
      <eb-menu-item index="dashboard" @click="switchView('dashboard')">
        <eb-icon name="dashboard" />
        <span>运营工作台</span>
      </eb-menu-item>
      <eb-menu-item index="orders" @click="switchView('orders')">
        <eb-icon name="bill" />
        <span>订单管理</span>
      </eb-menu-item>
      <eb-sub-menu index="goods">
        <template #title>
          <eb-icon name="goods" />
          <span>商品管理</span>
        </template>
        <eb-menu-item index="goods-list" @click="switchView('goods-list')">
          <eb-icon name="orderedlist" />
          <span>商品列表</span>
        </eb-menu-item>
        <eb-menu-item index="goods-category" @click="switchView('goods-category')">
          <eb-icon name="tags" />
          <span>分类管理</span>
        </eb-menu-item>
      </eb-sub-menu>
      <eb-menu-item index="members" @click="switchView('members')">
        <eb-icon name="customer" />
        <span>会员管理</span>
      </eb-menu-item>
      <eb-menu-item index="marketing" @click="switchView('marketing')">
        <eb-icon name="marketing" />
        <span>营销中心</span>
      </eb-menu-item>
    </template>

    <template #topbar-right>
      <div class="dash-topbar">
        <eb-badge :value="5" :max="99">
          <eb-icon name="bell" :size="18" />
        </eb-badge>
        <eb-avatar :size="28">运</eb-avatar>
      </div>
    </template>

    <!-- 工作台主视图 -->
    <div v-if="activeMenu === 'dashboard'" class="dash-page">
      <eb-page-header title="运营工作台" subtitle="数据截至 2026-09-06 12:00">
        <template #actions>
          <eb-button size="small" @click="refresh">
            <eb-icon name="refresh" :size="14" />
            刷新数据
          </eb-button>
          <eb-button type="primary" size="small">
            <eb-icon name="plus" :size="14" />
            新建活动
          </eb-button>
        </template>
      </eb-page-header>

      <!-- KPI 指标卡 -->
      <eb-row :gutter="16" class="dash-block" :key="refreshTick">
        <eb-col v-for="k in kpis" :key="k.label" :xs="24" :sm="12" :lg="6">
          <eb-stat-card :label="k.label" :value="k.value" :suffix="k.unit" :icon="k.icon" :type="k.type" :trend="k.trend" />
        </eb-col>
      </eb-row>

      <!-- 图表区 -->
      <eb-row :gutter="16" class="dash-block">
        <eb-col :xs="24" :lg="16">
          <eb-section-card title="近 7 日 GMV 趋势">
            <eb-chart :options="gmvOptions" :height="280" />
          </eb-section-card>
        </eb-col>
        <eb-col :xs="24" :lg="8">
          <eb-section-card title="销售渠道占比">
            <eb-chart :options="channelOptions" :height="280" />
          </eb-section-card>
        </eb-col>
      </eb-row>

      <!-- 明细区 -->
      <eb-row :gutter="16" class="dash-block">
        <eb-col :xs="24" :lg="16">
          <eb-section-card title="最新订单" :padding="false">
            <eb-data-table
              :columns="orderColumns"
              :data="recentOrders"
              :show-pagination="false"
              :show-total="false"
            >
              <template #status="{ row }">
                <eb-status-tag :value="row.status" :statuses="ORDER_STATUS" />
              </template>
            </eb-data-table>
          </eb-section-card>
        </eb-col>
        <eb-col :xs="24" :lg="8">
          <eb-section-card title="待办事项">
            <div v-for="t in todos" :key="t.id" class="dash-todo">
              <span class="dash-todo__title">
                <i v-if="t.urgent" class="dash-todo__dot" />
                {{ t.title }}
              </span>
              <eb-tag size="small" effect="plain">{{ t.tag }}</eb-tag>
            </div>
          </eb-section-card>
          <eb-section-card title="平台公告" class="dash-block--top">
            <div v-for="n in notices" :key="n.id" class="dash-notice">
              <eb-link type="primary">{{ n.title }}</eb-link>
              <span class="dash-notice__time">{{ n.time }}</span>
            </div>
          </eb-section-card>
        </eb-col>
      </eb-row>
    </div>

    <!-- 业务模块视图 -->
    <template v-else-if="activeMenu === 'orders'">
      <OrderListPage />
    </template>
    <template v-else-if="activeMenu === 'goods-list'">
      <GoodsListPage />
    </template>
    <template v-else-if="activeMenu === 'goods-category'">
      <CategoryPage />
    </template>
    <template v-else-if="activeMenu === 'members'">
      <MemberListPage />
    </template>
    <template v-else-if="activeMenu === 'marketing'">
      <MarketingPage />
    </template>
  </eb-app-layout>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useDarkMode } from '@wil-works/evoke-business-ui'
import { kpis, gmvTrend, channelShare, recentOrders, ORDER_STATUS, todos, notices } from './mock.js'
import OrderListPage from './modules/OrderListPage.vue'
import GoodsListPage from './modules/GoodsListPage.vue'
import CategoryPage from './modules/CategoryPage.vue'
import MarketingPage from './modules/MarketingPage.vue'
// 会员管理直接复用 CRUD 列表示例的页面（跨工程源码级复用）
import MemberListPage from '../../../ebui-example-crud-list/src/pages/MemberListPage.vue'

const { isDark, toggleDark } = useDarkMode()

/* ---------------- 侧边导航（无 vue-router，用 index 驱动视图切换） ---------------- */
const collapsed = ref(false)
const activeMenu = ref('dashboard')

const MENU_TITLES = {
  dashboard: '运营工作台',
  orders: '订单管理',
  'goods-list': '商品列表',
  'goods-category': '分类管理',
  members: '会员管理',
  marketing: '营销中心',
}
const activeTitle = computed(() => MENU_TITLES[activeMenu.value] ?? '运营工作台')

function switchView(index) {
  activeMenu.value = index
}

/* ---------------- KPI ---------------- */
const refreshTick = ref(0)

function refresh() {
  refreshTick.value++
}

/* ---------------- 图表 ---------------- */
const gmvOptions = {
  type: 'line',
  labels: gmvTrend.labels,
  series: gmvTrend.series,
  legend: { show: true },
  tooltip: { show: true },
}

const channelOptions = {
  type: 'doughnut',
  pieData: channelShare.pieData,
  legend: { show: true, position: 'bottom' },
}

/* ---------------- 最新订单 ---------------- */
const orderColumns = [
  { prop: 'orderNo', label: '订单号', width: 165 },
  { prop: 'buyer', label: '买家', width: 80 },
  { prop: 'channel', label: '渠道', width: 110 },
  { prop: 'amount', label: '金额（元）', align: 'right', width: 100 },
  { prop: 'status', label: '状态', slot: 'status', width: 88 },
]
</script>

<style scoped>
.dash-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dash-page {
  padding: 4px 16px 24px;
}
.dash-block {
  margin-top: 16px;
}
/* 行内卡片等高拉伸（如 KPI 卡有无趋势行时以最高者为准）；列内多卡保持纵向堆叠 */
.dash-block :deep(.eb-col) {
  display: flex;
  flex-direction: column;
}
.dash-block :deep(.eb-col > *) {
  flex: 1;
  width: 100%;
}
.dash-block--top {
  margin-top: 16px;
}
.dash-todo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
}
.dash-todo + .dash-todo {
  border-top: 1px solid var(--eb-border-color-extra-light, #f0f1f3);
}
.dash-todo__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--eb-font-size-base, 14px);
  color: var(--eb-text-color-primary, #1f2329);
}
.dash-todo__dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--eb-color-danger, #e34d59);
}
.dash-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
}
.dash-notice__time {
  flex-shrink: 0;
  font-size: var(--eb-font-size-xs, 12px);
  color: var(--eb-text-color-secondary, #8a9099);
}
</style>

组件构成

组件	在本场景中的角色
AppLayout	一体化后台壳：内置侧栏（菜单插槽 + 折叠）、顶栏（面包屑 / 主题切换 / 右侧操作）、内容区
Menu / MenuItem / SubMenu	侧边导航；示例未引入 vue-router，用 `index` 驱动视图切换
PageHeader	内容页页头（标题 + 副标题 + `#actions` 操作区）
StatCard	KPI 指标卡：数值千分位滚动、环比趋势、语义色图标
Chart（EcChart）	折线图（`labels + series`）与环形图（`pieData`），Canvas 自绘、容器自适应
DataTable + StatusTag	最新订单 / 商品列表 / 营销活动的表格载体（含 `operations` 插槽）
Tree	分类管理的左树右详情布局：`highlight-current` 选中、`filter-node-method` + `filter()` 搜索过滤、默认插槽自定义节点（名称 + 数量徽标）
DetailDescriptions	分类属性条与订单详情弹窗的配置式回显
SearchFilter + Pagination	订单管理模块的筛选与前端分页
Form / Dialog / Switch / Progress / Popconfirm	商品新建校验、上架开关、活动目标完成度、删除与停用确认
DetailDescriptions	订单详情弹窗的配置式回显
Row / Col	栅格排版（`:gutter` 间距 + `xs/sm/lg` 响应式断点）
SectionCard / Tag / Badge / Link / Avatar	区块标题、待办标记、消息数、公告链接、顶栏头像

模块页面集中在 pages/modules/ 下；「会员管理」未重复造轮子，直接跨工程源码级复用了 CRUD 列表示例的 MemberListPage —— 在线预览、全屏中心、独立工程三处看到的是同一份代码。

关键实现说明

无路由的视图切换。AppLayout 内置菜单为 router 模式，未装 vue-router 时点击只回发事件不跳转 —— 示例在 eb-menu-item 上直接监听原生 click 切换 activeMenu，activeMenu 同时回传给 default-active 保持高亮：

function switchView(index) {
  activeMenu.value = index
}

多模块内容组织。侧边每个菜单对应一个真实模块组件（pages/modules/ 下按模块拆分文件），v-else-if 按 activeMenu 挂载；模块自身保持自包含（自己的 mock、自己的状态），主视图与模块间零耦合。

分类管理的 master-detail 布局。左侧分类树（搜索过滤 + 选中高亮 + 数量徽标），右侧当前分类的路径面包屑、属性描述与子树聚合的商品表——树节点只做导航，操作全部收敛到右侧上下文区，这是企业中后台处理层级数据的经典形态：

// 选中节点 → 子树聚合商品
const selectedGoods = computed(() => {
  const ids = new Set(collectIds(selected.value))
  return goods.filter((g) => ids.has(g.categoryId))
})

KPI 刷新。StatCard 的数字滚动（countUp）在挂载时执行，给外层 eb-row 绑定 :key="refreshTick"，点「刷新数据」时递增即可整组重播滚动动画。

图表配置同构。折线与饼图只差数据字段：直角系用 labels + series，饼系用 pieData: [{ name, value }]，其余能力（图例、tooltip、标题）全部收敛在 options 单对象里。

本地运行

bash

pnpm example:ebui-dashboard   # http://localhost:8621

text

examples/ebui-example-dashboard/
  src/
    App.vue                   # 独立运行外壳（标题栏 + useDarkMode 暗色切换）
    pages/
      DashboardConsole.vue    # 本页预览的源码（骨架 + 工作台主视图）
      mock.js                 # KPI / 趋势 / 渠道 / 订单 / 待办 / 公告 / 各模块数据
      modules/
        OrderListPage.vue     # 订单管理（筛选 + 分页 + 详情弹窗 + 取消订单）
        GoodsListPage.vue     # 商品列表（新建校验 + 上架开关 + 低库存预警 + 删除）
        CategoryPage.vue      # 分类管理（树形表格 + 新增子分类 / 编辑 / 停用）
        MarketingPage.vue     # 营销中心（活动进度 + 提前结束）

接入真实业务

把 mock.js 的各数据源换成接口返回；eb-chart 的 options 是响应式的，数据到达后自动重绘（同结构数据走补间动画）。
菜单接 vue-router 时无需改动：AppLayout 内部菜单自带 router 集成，index 即路由路径。

工作台 Dashboard ​

在线预览 ​

运营工作台

近 7 日 GMV 趋势

销售渠道占比

最新订单

待办事项

平台公告

组件构成 ​

关键实现说明 ​

本地运行 ​

接入真实业务 ​

工作台 Dashboard

在线预览

组件构成

关键实现说明

本地运行

接入真实业务