前端AI 技能【免费下载链接】basic⭐⭐⭐⭐⭐ 面向 AI 编程的管理系统框架兼容PC、移动端。AI-oriented management system framework, compatible with PC and mobile device.项目地址https://gitcode.com/GitHub_Trending/ba/basic点击查看免费下载导读在 Fantastic-admin 管理系统中页面常会出现自造轮子的代码——手写的button、自定义弹窗、手写分页、alert提示等。这些实现不仅重复劳动还会破坏整站 UI 一致性。本篇指南以仓库内 页面优化器技能 为骨架完整介绍如何利用框架位于 packages/components/src/basic 的 70 内建 Fa 组件替换自定义实现和原生 HTML从分析页面 → 查找组件 → 参考模式 → 实施替换 → 验证五步走完整个优化工作流。读完你将掌握 FaButton、FaModal、FaPagination、FaToast 等核心组件的实战用法、编程式组合式函数useFaModal()/useFaToast()/useFaLoading()的调用方式以及一套可复用的前后对比优化范式。优化工作流总览页面优化不是直接上手改代码而是遵循一套固定的五步流程。该流程定义在 SKILL.md 中步骤动作关键资源步骤 1分析页面识别替换机会目标页面源码步骤 2查找合适的框架组件组件目录 各组件 README步骤 3参考优化模式可选优化模式参考步骤 4实施替换组合式函数 API步骤 5验证组件 README API 核对每个组件目录下都有README.md使用文档包含完整的 API 说明Props / Slots / Events / Methods和示例代码查阅方式为packages/components/src/component-name/README.md。README 是最权威的用法来源不确定时优先看文档而不是猜。优化前的强制步骤确认目标应用本项目是 monorepo 架构apps/目录下存放各应用。在执行任何文件读写操作之前必须先确认目标应用执行ls apps/列出所有可用应用如core、example等立即向用户提问明确询问要优化哪个应用中的页面并停止等待回复收到用户明确回复后才能继续后续步骤严格规则如果用户没有在请求中明确说明目标应用例如在 example 应用中、apps/core则必须提问不得自行猜测或默认选择任何应用。确认后后续所有页面路径均在apps/app/src/views/下。这一步保障了 monorepo 下不会改错应用、改错文件。步骤 1分析页面识别三类替换机会读取目标页面后重点寻找三类可优化点原生 HTML 元素button、input、select、自定义卡片 div 等重复造轮子的自定义组件自定义弹窗、分页、加载状态、提示消息等可简化的内联逻辑手动标签页切换、手动状态管理等步骤 2查找合适的框架组件先查组件目录确认有哪些可用组件Read: references/components-catalog.md。确定组件后读取对应 README 了解完整 APIprops、slots、events。步骤 3参考优化模式可选如果不确定如何替换查看 前后对比示例。步骤 4实施替换替换时保留所有原始功能不要改变业务逻辑。框架组件通常提供组合式函数用于编程式控制优先使用useFaModal()— 编程式打开/关闭弹窗、confirm 确认框useFaToast()— 显示成功/错误提示useFaLoading()— 控制加载遮罩组件可以组合使用例如FaCard title用户列表 FaSearchBar v-modelkeyword / FaEmpty v-ifusers.length 0 / template #footer FaPagination :pagepage :sizesize :totaltotal / /template /FaCard步骤 5验证Fa 组件通过unplugin-auto-import自动导入无需手动写 import 语句。在 apps/core/vite/plugins.ts 中可以看到Vite 插件配置引入了unplugin-auto-import/vite并通过FantasticAdminComponentsAutoImports与FantasticAdminComposablesAutoImports来自 packages/components/resolver.ts自动完成组件与组合式函数的按需导入。替换后确认 props 和 v-model 绑定符合组件 API如有问题回到packages/components/src/component-name/README.md核对。内建组件目录与选型指南组件全部位于 packages/components/src/basic按功能分为八类基础组件FaButton、FaIcon基于 iconify如FaIcon namei-mdi:home /、FaKbd / FaKbdGroup、FaLable布局组件FaCard、FaDivider、FaPageHeader、FaPageMain、FaScrollArea、FaScrollingText表单组件FaInput、FaTextarea、FaCheckbox、FaSwitch、FaSelect、FaSlider、FaNumberField、FaInputOTP、FaPasswordStrength、FaFileUpload、FaImageUpload、FaIconPicker、FaSearchBar、FaCascader交互组件FaModal支持拖拽、最大化、FaDrawer、FaDropdown、FaContextMenu、FaPopover、FaTooltip、FaHoverCard、FaCollapsible反馈组件FaToast、FaLoading、FaProgress、FaEmpty数据展示组件FaTabs、FaTimeline、FaTree、FaPagination、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 元素替换对照表原生元素推荐组件说明buttonFaButton统一的按钮样式和状态管理inputFaInput统一的输入框样式textareaFaTextarea统一的多行输入样式selectFaSelect更好的下拉选择体验div classcardFaCard标准化的卡片布局hrFaDivider统一的分割线样式img(头像)FaAvatar头像专用组件常见功能实现替换对照表功能推荐组件说明模态对话框FaModal替代自定义 modal 实现分页逻辑FaPagination替代自定义分页组件加载状态FaLoading替代自定义 loading 动画空状态提示FaEmpty替代自定义空状态页面消息提示FaToast替代 alert 或自定义提示标签页切换FaTabs替代自定义 tab 实现树形数据FaTree替代自定义树形组件图片预览FaImagePreview替代自定义图片查看器搜索框FaSearchBar替代普通 input 搜索逻辑级联选择FaCascader替代自定义多级联动下拉选择核心组件 API 深度解读FaButton统一按钮样式与状态按钮组件支持 7 种变体与多种尺寸源码文档位于 packages/components/src/basic/button/README.md属性类型默认值说明variantdefault \| destructive \| outline \| secondary \| ghost \| link \| expanddefault按钮样式变体sizedefault \| sm \| lg \| icon \| icon-sm \| icon-lgdefault按钮尺寸disabledbooleanfalse是否禁用loadingbooleanfalse是否显示加载状态classHTMLAttributes[class]-自定义 CSS 类关键用法要点loading 状态设置loading为true时按钮会自动显示旋转加载图标并禁用点击替代了手写span v-ifloading加载中.../span的逻辑icon 尺寸sizeicon36px 正方形、sizeicon-sm32px、sizeicon-lg40px适合放置纯图标变体选择default主操作、secondary次要操作、destructive删除/危险操作、outline低优先级边框按钮、ghost更次要操作、link链接样式、expand展开动画按钮。同目录下的FaButtonGroup按钮组支持orientationhorizontal | vertical排列方向与separator分割线属性。FaCard标准化卡片容器卡片由 CardHeader、CardContent、CardFooter 三部分组成文档见 packages/components/src/basic/card/README.md属性类型说明titlestring卡片标题descriptionstring卡片描述class/headerClass/contentClass/footerClassHTMLAttributes[class]各区域 CSS 类插槽header覆盖title和description、default内容、footer页脚。只有提供对应内容props 或 slots的区域才会显示卡片宽度自适应父容器可通过class设置固定宽度。FaModal取代自定义弹窗与确认框模态对话框组件支持拖拽、最大化、自定义内容和多种显示模式完整 API 见 packages/components/src/basic/modal/README.md源码实现位于 packages/components/src/basic/modal含useModal.ts、use-draggable.ts等。常用 Props节选属性类型默认值说明modelValuebooleanfalse是否打开对话框v-modeltitle/descriptionstring \| () string-标题 / 描述文字iconinfo \| success \| warning \| error-图标类型loadingbooleanfalse是否显示加载状态closablebooleantrue是否显示关闭按钮maximizablebooleanfalse是否显示最大化按钮draggablebooleanfalse是否可拖拽alignCenterbooleanfalse对话框是否垂直居中overlayBlurbooleanfalse遮罩是否模糊showConfirmButtonbooleantrue是否显示确定按钮showCancelButtonbooleanfalse是否显示取消按钮confirmButtonText/cancelButtonTextstring \| () string确定/取消按钮文字confirmButtonDisabled/confirmButtonLoadingbooleanfalse确定按钮禁用 / 加载状态beforeClose(action, done) void-关闭前回调closeOnClickOverlay/closeOnPressEscapebooleantrue点击遮罩 / ESC 关闭destroyOnClosebooleantrue关闭时销毁内容事件update:modelValue、open、opened、close、closed、confirm、cancel其中opened/closed在动画完成后触发。编程式调用替代自定义 confirm 逻辑script setup langts const modal useFaModal() function showConfirm() { modal.confirm({ title: 确认, content: 确定要删除吗, onConfirm: () { console.log(删除) }, }) } function showSuccess() { modal.success({ title: 成功, content: 操作成功完成 }) } /script template FaButton clickshowConfirm确认对话框/FaButton FaButton clickshowSuccess成功提示/FaButton /templateuseFaModal()提供info、success、warning、error、confirm五种方法。注意beforeClose回调接收actionconfirm/cancel/close和done函数拖拽仅在有标题栏且非最大化状态下有效。FaPagination功能完整的分页组件分页组件支持总条数显示、每页条数选择、页码跳转和自定义布局文档见 packages/components/src/basic/pagination/README.md属性类型默认值说明totalnumber必需数据总条数sizesnumber[][10, 20, 30, 40, 50, 100]每页条数选项layoutstringtotal, sizes, -, pager, jumper布局配置pagenumber必需当前页码支持 v-modelsizenumber必需每页条数支持 v-modeltextTemplatesobject见下方文本模板配置用于国际化事件pageChangepage: number、sizeChangesize: number。layout 布局元素total总条数、sizes每页条数选择器、pager页码按钮组、jumper页码跳转输入框、-弹性占位符将后续元素推到右侧。布局示例!-- 左侧总条数中间页码右侧跳转 -- FaPagination layouttotal, -, pager, jumper / !-- 仅显示页码 -- FaPagination layoutpager / !-- 总条数 每页条数 分页器 -- FaPagination layouttotal, sizes, pager /textTemplates 国际化配置属性类型默认值说明total(total: number) string(total) \共 ${total} 条总条数文本格式化函数sizes(size: number) string(size) \${size} 条/页每页条数文本格式化函数jumper{ before: string, after: string }{ before: 前往, after: 页 }页码跳转前后文本配合vue-i18n的国际化示例script setup import { useI18n } from vue-i18n const { t } useI18n() /script template FaPagination :text-templates{ total: (total) t(pagination.total, { total }), sizes: (size) t(pagination.sizes, { size }), jumper: { before: t(pagination.jumperBefore), after: t(pagination.jumperAfter), }, } / /template使用注意total、page、size为必需属性page和size支持v-model双向绑定跳转页码会自动限制在有效范围内跳转输入框获得焦点时自动选中文本按回车键可触发跳转。FaToast全局轻提示轻提示组件用于展示操作反馈消息文档见 packages/components/src/basic/toast/README.md无 Props全部通过useFaToast()函数调用配置方法说明useFaToast()(message)普通提示useFaToast().success(message)成功提示useFaToast().error(message)错误提示useFaToast().warning(message)警告提示useFaToast().info(message)信息提示useFaToast().loading(message)加载提示useFaToast().promise(promise, options)Promise 提示注意FaToast /需要在应用根组件中添加一次全局组件提示默认 3 秒后自动消失多个提示会堆叠显示每个提示都可手动点击关闭。前后对比六类典型替换模式以下优化模式完整收录于 优化模式参考是页面重构最直接的可复制范本。1. 基础元素替换按钮、输入框、卡片优化前button classcustom-button :disabledloading span v-ifloading加载中.../span span v-else提交/span /button div classform-group input v-modelusername typetext classform-control placeholder请输入用户名 /div div classcard div classcard-header h3卡片标题/h3 p classtext-muted卡片描述/p /div div classcard-body卡片内容/div div classcard-footer底部内容/div /div优化后FaButton :loadingloading提交/FaButton FaInput v-modelusername placeholder请输入用户名 / FaCard title卡片标题 description卡片描述 卡片内容 template #footer 底部内容 /template /FaCard2. 模态对话框替换手写弹窗需要管理visible、title、content多个 ref还要手写遮罩层、关闭按钮和上百行样式替换后只需一个v-modelscript setup const modal ref(false) /script template FaButton clickmodal true打开对话框/FaButton FaModal v-modelmodal title标题 内容 /FaModal /template3. 分页替换手写分页需要自己计算totalPages、维护上一页/下一页禁用逻辑框架组件一行搞定FaPagination :pagepage :sizesize :totaltotal / script setup const page ref(1) const size ref(10) const total ref(100) /script4. 加载状态与空状态替换自定义 loading 遮罩需要手写 fixed 定位与动画样式编程式加载使用组合式函数script setup import { useFaLoading } from /ui/components/FaLoading async function fetchData() { const { close } useFaLoading() try { await api.getData() } finally { close() } } /script空状态直接使用组件FaEmpty v-iflist.length 0 description暂无数据 /5. 消息提示替换alert()或手写消息队列均可替换为useFaToast()script setup import { useFaToast } from /ui/components/FaToast const toast useFaToast() function showMessage(message: string) { toast.success(message) } /script6. 级联选择替换自定义多级联动需要手动维护每一层的选中状态与 disabled 逻辑FaCascader通过树形options数据一步到位script setup const selected refstring | undefined() const options [ { label: 浙江省, value: zj, children: [ { label: 杭州市, value: hz, children: [ { label: 西湖区, value: xh }, { label: 余杭区, value: yh }, ], }, ], }, ] /script template FaCascader v-modelselected :optionsoptions placeholder请选择地区 clearable / /template进阶数据展示与页面结构优化标签页替换手写 tabs 需要自己维护activeTab状态与高亮 class使用FaTabs后状态收敛为单个 refFaTabs v-modelactiveTab :tabstabs template #tab1内容1/template template #tab2内容2/template /FaTabs script setup const activeTab ref(tab1) const tabs [ { key: tab1, label: 标签1 }, { key: tab2, label: 标签2 }, ] /script头像显示替换手写头像需要处理图片加载失败回退、圆形裁剪样式FaAvatar直接接管FaAvatar :srcuser.avatar :altuser.name /页面结构标准化手写.page.page-header.page-content布局与样式替换为语义化的FaPageHeaderFaPageMaintemplate FaPageHeader title页面标题 template #actions FaButton操作/FaButton /template /FaPageHeader FaPageMain !-- 内容 -- /FaPageMain /template特效组件锦上添花对数据卡片、首页标题等场景可以叠加特效组件增强视觉表现而不改动业务逻辑!-- 发光卡片 -- FaGlowyCard卡片内容/FaGlowyCard !-- 聚光灯卡片 -- FaSpotlightCard卡片内容/FaSpotlightCard !-- 边框光束 -- FaCard FaBorderBeam / 卡片内容 /FaCard !-- 闪光文字 -- FaSparklesText text欢迎使用 / !-- 翻转文字 -- FaFlipWords :words[欢迎, Welcome, Bienvenue] /常见场景映射速查表场景原实现框架组件用户列表自定义表格 分页FaCard FaPagination表单提交原生 form inputFaInput FaButton FaModal数据加载自定义 loadingFaLoading错误提示alert / 自定义 toastFaToast确认对话框confirm / 自定义 modalFaModal (useFaModal)图片上传自定义上传组件FaImageUpload搜索功能input 搜索逻辑FaSearchBar级联选择多级联动 selectFaCascader数据统计自定义数字展示FaCountTo / FaAnimatedCountTo趋势展示自定义图表FaSparkline FaTrend时间显示自定义格式化FaTimeAgo优化原则与自检清单遵循 优化模式参考 中沉淀的六条原则优先使用框架组件检查packages/components/src/basic/是否有对应的内建组件参考组件源码查看组件实现了解使用方式和 API组件源码位于 packages/components/src/basic 各子目录如 modal、pagination保持功能一致确保替换后的组件功能与原代码一致简化代码移除不必要的自定义样式和逻辑统一风格使用框架组件可以保持整个应用的视觉一致性提升可维护性框架组件有统一的 API 和文档更易维护替换完成后建议按以下清单复核props 与 v-model 绑定是否与组件 API 一致回到对应 README 核对loading / disabled 状态是否被正确接管业务逻辑是否被完整保留FaToast /是否已在根组件挂载最终视觉效果是否与整站统一。至此一个页面的优化便完成了从识别轮子到验证通过的闭环。赞分享前端AI 技能【免费下载链接】basic⭐⭐⭐⭐⭐ 面向 AI 编程的管理系统框架兼容PC、移动端。AI-oriented management system framework, compatible with PC and mobile device.项目地址https://gitcode.com/GitHub_Trending/ba/basic点击查看免费下载相关推荐Fantastic Admin 内建组件目录全解析70 组件的分类选型与页面优化实战Fantastic Admin 内建组件目录全解析70 组件的分类选型与页面优化实战 组件化是现代 Vue 管理系统的核心工程实践。Fantastic Ad前端AI 技能fantastic-admin 页面优化实战用框架内建组件替换自定义代码的完整指南fantastic admin 页面优化实战用框架内建组件替换自定义代码的完整指南 本篇指南以 fantastic admin 的页面优化模式文档 skil前端AI 技能VitePress 团队页面指南用内置 Team 组件构建成员档案页VitePress 团队页面指南用内置 Team 组件构建成员档案页 在 VitePress 中你可以用默认主题内置的 Team 组件 VPTeamMem前端文档上一篇Yuzu模拟器卡顿闪退排查完全指南30分钟让帧率稳定60帧的调优清单下一篇如何在Windows上快速安装带Play商店与Root的WSA安卓子系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考