xuewuerduo f468d532b1 feat: 初始化tansci资产管理项目

包含以下模块：
- antdv-next-admin: Vue 3 + TypeScript + Ant Design Vue 管理后台
  - 设备/许可证/配件/耗材 CRUD 管理页面
  - 基础数据管理 (分类/位置/制造商/型号/供应商)
  - 业务管理 (故障报修/盘点/资产分配/资产申请/交易记录)
  - 下拉选项改造 (ID输入框 → 搜索下拉选择)
  - 资产状态字典化 (接入sys_dict系统)
  - 界面文案优化 (设备→资产, 在库/在用/维修中/已报废)
  - 修复 console 警告 (popupClassName, 重复组件注册)
- our-itam: Java Spring Boot + magic-api 后端服务
- fantastic-admin: 前端底层框架 (pnpm monorepo)
- ciyo-itasset: CIYO 资产模块
- magic-script-skill: Claude Code skill 定义
- .claude: 对话历史记录

Co-Authored-By: Claude Code <noreply@anthropic.com>

2026-05-17 21:41:22 +08:00

5.8 KiB

Raw Blame History

Fantastic Admin 内建组件目录

本文档列出所有可用的框架内建组件及其使用场景。组件位于 packages/components/src/。

提示: 每个组件目录下都有 README.md 使用文档，包含完整的 API 说明 (Props/Slots/Events/Methods) 和示例代码。查阅方式：Read: packages/components/src/<component-name>/README.md

基础组件

FaButton

用途: 按钮组件，支持多种样式和状态变体: default, destructive, outline, secondary, ghost, link 特性: loading 状态、disabled 状态

FaIcon

用途: 图标组件，基于 iconify 示例:

FaKbd / FaKbdGroup

用途: 键盘按键显示组件

FaLabel

用途: 表单标签组件

布局组件

FaCard

用途: 卡片容器，支持标题、描述、内容、底部插槽特性: title, description, footer slot

FaDivider

用途: 分割线组件

FaPageHeader

用途: 页面头部组件

FaPageMain

用途: 页面主体容器

FaScrollArea

用途: 滚动区域容器

FaScrollingText

用途: 滚动文字特效

表单组件

FaInput

用途: 输入框组件，支持 v-model 特性: placeholder, disabled 等标准输入属性

FaTextarea

用途: 多行文本输入

FaCheckbox

用途: 复选框组件

FaSwitch

用途: 开关切换组件

FaSelect

用途: 下拉选择组件

FaSlider

用途: 滑块组件

FaNumberField

用途: 数字输入组件

FaInputOTP

用途: OTP 验证码输入组件

FaPasswordStrength

用途: 密码强度显示组件

FaFileUpload

用途: 文件上传组件

FaImageUpload

用途: 图片上传组件

FaIconPicker

用途: 图标选择器

FaSearchBar

用途: 搜索栏组件

FaCascader

用途: 级联选择组件，支持多级树形数据选择

交互组件

FaModal

用途: 模态对话框，支持拖拽、最大化等功能特性: maximizable, closable, draggable, alignCenter, loading, before-close API: useFaModal() 用于编程式调用

FaDrawer

用途: 抽屉组件

FaDropdown

用途: 下拉菜单

FaContextMenu

用途: 右键上下文菜单

FaPopover

用途: 弹出框组件

FaTooltip

用途: 工具提示

FaHoverCard

用途: 悬停卡片

FaCollapsible

用途: 可折叠容器

反馈组件

FaToast

用途: 轻提示组件

FaLoading

用途: 加载状态组件

FaProgress

用途: 进度条组件

FaEmpty

用途: 空状态组件

数据展示组件

FaTabs

用途: 标签页组件

FaTimeline

用途: 时间轴组件

FaTree

用途: 树形组件

FaPagination

用途: 分页组件特性: page, size, total

FaAvatar

用途: 头像组件

FaCarousel

用途: 轮播图组件

FaImagePreview

用途: 图片预览组件

数据可视化组件

FaSparkline

用途: 迷你图表组件

FaTrend

用途: 趋势指示器

FaCountTo

用途: 数字动画组件

FaAnimatedCountTo

用途: 动画数字组件

FaAnimatedCountToGroup

用途: 动画数字组组件

特效组件

FaBorderBeam

用途: 边框光束特效

FaGlowyCard / FaGlowyCardWrapper

用途: 发光卡片特效

FaSpotlightCard

用途: 聚光灯卡片特效

FaParticlesBg

用途: 粒子背景特效

FaPatternBg

用途: 图案背景

FaBlurReveal

用途: 模糊揭示特效

FaAnimatedBeam

用途: 动画光束特效

FaFlipCard

用途: 翻转卡片

FaFlipWords

用途: 翻转文字特效

FaSparklesText

用途: 闪光文字特效

FaTextHighlight

用途: 文字高亮特效

FaMarquee

用途: 跑马灯组件

FaSmoothSwipe

用途: 平滑滑动组件

高级组件

FaButtonGroup

用途: 按钮组组件

FaGradientButton

用途: 渐变按钮

FaInteractiveButton

用途: 交互式按钮

FaDigitalCard

用途: 数字卡片

FaMultiStepLoader

用途: 多步骤加载器

FaLinkPreview

用途: 链接预览组件

FaTimeAgo

用途: 相对时间显示

FaCode

用途: 代码展示组件

FaCodePreview

用途: 代码预览组件

FaQrcode

用途: 二维码生成组件

FaStorageBox

用途: 存储盒组件

FaScratchOff

用途: 刮刮卡组件

FaBackToTop

用途: 返回顶部按钮

FaFixedBar

用途: 固定栏组件

组件选择指南

替换原生 HTML 元素

原生元素	推荐组件	说明
`<button>`	`FaButton`	统一的按钮样式和状态管理
`<input>`	`FaInput`	统一的输入框样式
`<textarea>`	`FaTextarea`	统一的多行输入样式
`<select>`	`FaSelect`	更好的下拉选择体验
`<div class="card">`	`FaCard`	标准化的卡片布局
`<hr>`	`FaDivider`	统一的分割线样式
`<img>` (头像)	`FaAvatar`	头像专用组件

替换常见功能实现

功能	推荐组件	说明
模态对话框	`FaModal`	替代自定义 modal 实现
分页逻辑	`FaPagination`	替代自定义分页组件
加载状态	`FaLoading`	替代自定义 loading 动画
空状态提示	`FaEmpty`	替代自定义空状态页面
消息提示	`FaToast`	替代 alert 或自定义提示
标签页切换	`FaTabs`	替代自定义 tab 实现
树形数据	`FaTree`	替代自定义树形组件
图片预览	`FaImagePreview`	替代自定义图片查看器
搜索框	`FaSearchBar`	替代普通 input + 搜索逻辑
级联选择	`FaCascader`	替代自定义多级联动下拉选择

5.8 KiB Raw Blame History