360 Secure SkillHub
360 安全技能中心

Slidev Antd Dashboard

面向 Slidev 演示文稿的仪表盘与后台界面幻灯片构建指南：说明如何安装 ant-design-vue、@ant-design/icons-vue 与 ECharts，配置全局组件注册与主题暗色同步，并给出布局、栅格、间距、配色、导航规范以及四份可直接粘贴的示例幻灯片。

junwugit
junwugit
热度 16.36
最近更新 2026-06-26 00:55:53
分类：创作依赖：代码执行 / 读写文件应用场景：演示设计 / UI 原型 / 代码生成 / 模板

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add slidev-antd-dashboard
Metadata
name
slidev-antd-dashboard
description
Build dashboard and admin-UI slides in Slidev using ant-design-vue (the Vue 3 implementation of Ant Design). Use when creating Slidev presentations that need dashboards, admin layouts, side menus, data tables, KPI/stat cards, charts, forms, or any Ant Design components. Covers full setup, every ant-design-vue component, composition rules, menu/navigation design specs, and ready-to-paste example slides.

Slidev + Ant Design Dashboards

Build polished dashboard / admin-console mockups inside Slidev slides using ant-design-vue.

Read this first (critical context)

  1. Slidev is Vue 3. Use ant-design-vue, NOT React antd. The canonical antd package is React-only and cannot be dropped into Slidev. ant-design-vue is the official Ant Design implementation for Vue 3 — same design language, same component set, near-identical API. Every example here uses it.
  2. Globally-registered components use the a- prefix. After app.use(Antd), you write <a-button>, <a-table>, <a-layout-sider>, <a-menu>, <a-statistic>, etc. — not <Button>.
  3. ant-design-vue v4 uses CSS-in-JS. Component styles auto-inject; you do not need (and should avoid) globally importing ant-design-vue/dist/reset.css, because its global preflight overrides Slidev's slide typography. Theme via <a-config-provider> instead.
  4. Ant Design ships no charts. Use ECharts (vue-echarts) — see setup.md. @ant-design/charts is React-only; do not suggest it for Slidev.
  5. A slide is a fixed canvas (default 980×552 px). Real dashboards are designed for ~1440 px. Render at desktop density and let Slidev scale the slide down — set canvasWidth higher and/or use componentSize. See dashboard-rules.md.

Quickstart

# in a Slidev project (npm init slidev@latest)
npm i ant-design-vue@^4.2.6 @ant-design/icons-vue
npm i echarts vue-echarts          # charts (recommended)
  1. Copy assets/main.ts → setup/main.ts (registers antd, all icons, and <v-chart> globally).
  2. Copy assets/AntdThemeProvider.vue.md → components/AntdThemeProvider.vue.md (ConfigProvider + dark-mode sync + sane tokens).
  3. In slides.md headmatter, bump the canvas so dashboards aren't cramped: 
    ---
canvasWidth: 1280
---
  4. Wrap any dashboard slide content in <AntdThemeProvider> and use a full layout. Paste an example from examples/ to start.

Full, annotated instructions: references/setup.md.

The 5 golden rules (details in dashboard-rules.md)

  1. One Layout shell per dashboard: a-layout → a-layout-sider (nav) + a-layout-header (top bar) + a-layout-content (work area). Don't hand-roll flexbox for the frame.
  2. Everything sits on the 24-column grid (a-row/a-col with :gutter). KPI cards = 4–6 across; never free-position.
  3. 8 px spacing rhythm — gutters and margins in multiples of 8 (8/16/24). Use a-space instead of margin hacks.
  4. Color is semantic, not decorative — primary for the one main action per view; green/red/gold via a-tag/a-badge/Statistic only to encode meaning. ≤1 primary button per region.
  5. Show structure, not lorem — realistic labels and numbers; use a-skeleton/a-empty for loading/empty states in mockups.

What's in this skill

File Use it for
references/setup.md Install, setup/main.ts, theming, dark mode, scaling, charts, the React-antd→ant-design-vue translation table, pitfalls.
references/components.md Every ant-design-vue component, grouped, with key props + "use-in-dashboard" guidance and the a- tag name.
references/dashboard-rules.md Composition rules: layout, grid, spacing, color, density, KPI cards, tables, fitting onto a slide, do/don't.
references/navigation.md Menu & navigation design spec: sider vs top nav, IA depth, Menu/Breadcrumb/Tabs/Steps patterns, responsive, do/don't.
assets/ Drop-in main.ts, AntdThemeProvider.vue.md, styles.css.
examples/ 4 complete copy-paste dashboard slides: admin shell, analytics overview, data-table page, detail+form page.

Workflow when asked to "make a dashboard slide"

  1. Confirm the project is a Slidev project and the setup in setup.md is in place (or add it).
  2. Pick the closest example in examples/ as a skeleton.
  3. Choose the navigation pattern from navigation.md (sider menu is the default for admin dashboards).
  4. Lay out content on the grid per dashboard-rules.md; pick components from components.md.
  5. Wrap in <AntdThemeProvider>, set the slide layout: full, verify it fits the canvas (npm run dev).