Ant Design Vue主题介绍

一、Ant Design Vue 主题特点

1. 具有高度统一的视觉风格，遵循严格设计规范，增强连贯性，降低认知成本，提升品质感，适合企业级应用。
2. 可深度定制，能调整颜色、字体等，满足不同品牌形象和设计要求，可通过多种方式定制且保持兼容性。
3. 具备良好响应式特性，适应不同屏幕尺寸和设备类型，确保最佳用户体验，提高可用性和可访问性。
4. 有精心设计的色彩体系，搭配和谐，具视觉吸引力且保证可读性和对比度，考虑用户心理和情感因素。
5. 采用简洁明了布局，注重信息层次结构和可读性，避免视觉混乱，提高操作效率。

二、应用场景

1. 企业级管理系统：适合各类企业管理系统，确保界面风格统一，提高使用效率和体验，可融入企业品牌元素。
2. 数据可视化平台：简洁布局和丰富色彩体系利于数据展示和分析，可根据需求定制，确保不同设备良好展示。
3. 电商平台：打造美观易用界面，通过定制突出商品和促销信息，响应式设计提高可用性和满意度。
4. 金融科技应用：传达可靠专业形象，增强用户信任感，满足复杂业务需求，可根据行业特点定制。

三、组件目录

Jeecg组件

1. BasicTable 表格 https://help.jeecg.com/component/BasicTable.html
2. BasicForm 表单 https://help.jeecg.com/component/basicForm.html
3. BasicModal 弹窗 https://help.jeecg.com/component/Model.html
4. JVxeTable 表格 https://help.jeecg.com/component/JVxeTable.html
   • 组件配置文档 https://help.jeecg.com/component/JVxeTable/config.html
   • 自定义组件 https://help.jeecg.com/component/JVxeTable/zidingyizujian.html
     • 封装自定义组件 https://help.jeecg.com/component/JVxeTable/extend.html
     • 自定义组件增强 https://help.jeecg.com/component/JVxeTable/enhance.html
   • 多级联动配置 https://help.jeecg.com/component/JVxeTable/liandong.html
   • 使用示例 https://help.jeecg.com/component/JVxeTable/demo.html
   • 常见问题解答 https://help.jeecg.com/component/JVxeTable/qa.html
5. BasicDrawer抽屉组件 https://help.jeecg.com/component/Drawer.html
6. Icon 图标组件 https://help.jeecg.com/component/icon.html
7. Button 按钮 https://help.jeecg.com/component/button.html
8. JSelectUser选择用户 https://help.jeecg.com/component/JSelectUser.html
9. JSelectPosition岗位选择 https://help.jeecg.com/component/JSelectPosition.html
10. JSelectDept部门选择 https://help.jeecg.com/component/JSelectDept.html
11. JDictSelectTag字典标签 https://help.jeecg.com/component/JDictSelectTag.html
12. JCheckbox多选 https://help.jeecg.com/component/JCheckbox.html
13. JSearchSelect字典表搜索组件 https://help.jeecg.com/component/JSearchSelectTag.html
14. JSelectMultiple下拉多选 https://help.jeecg.com/component/JSelectMultiple.html
15. 表字典规则说明 https://help.jeecg.com/component/tablesql.html
16. JPopup弹窗选择组件 https://help.jeecg.com/component/JPopup.html
17. JSwitch开关组件 https://help.jeecg.com/component/JSwitch.html
18. JUpload 上传组件 https://help.jeecg.com/component/JUpload.html
19. JImageUpload 图片上传 https://help.jeecg.com/component/JImageUpload.html
20. JTreeDict分类字典树形组件 https://help.jeecg.com/component/JTreeDict.html
21. JCategorySelect 分类字典树 https://help.jeecg.com/component/JCategorySelect.html
22. JSelectInput 可输入下拉框 https://help.jeecg.com/component/JSelectInput.html
23. JAreaSelect 省市县级联组件 https://help.jeecg.com/component/JAreaSelect.html
24. JEllipsis 超长截取显示组件 https://help.jeecg.com/component/JEllipsis.html
25. JInputPopup 多行输入窗口组件 https://help.jeecg.com/component/JInputPopup.html
26. JSelectUserByDept 根据部门选择用户 https://help.jeecg.com/component/JSelectUserByDept.html
27. JSelectRole 选择角色 https://help.jeecg.com/component/JSelectRole.html
28. JFormContainer表单禁用 https://help.jeecg.com/component/JFormContainer.html
29. JImportModal导入弹窗组件 https://help.jeecg.com/component/JImportModal.html
30. JInput特殊查询组件 https://help.jeecg.com/component/JInput.html
31. SuperQuery 高级查询 https://help.jeecg.com/component/SuperQuery.html
32. JEditor 富文本编辑器 https://help.jeecg.com/component/JEditor.html
33. JMarkdownEditor Markdown编辑器 https://help.jeecg.com/component/JMarkdownEditor.html
34. JAreaLinkage省市县联动组件 https://help.jeecg.com/component/JAreaLinkage.html
35. UserSelect用户选择组件 https://help.jeecg.com/component/UserSelect.html
36. JEasyCron定时表达式选择组件 https://help.jeecg.com/component/JEasyCron.html
37. JTreeSelect下拉树 https://help.jeecg.com/component/JTreeSelect.html
38. JPopupDict popup字典 https://help.jeecg.com/JPopupDict.html

39. JModal https://help.jeecg.com/component/JModal.html

40. 更多基础组件

41. Basic 基础组件 https://help.jeecg.com/component/Basic.html

42. CollapseContainer 折叠容器 https://help.jeecg.com/component/CollapseContainer.html
43. LazyContainer 懒加载容器 https://help.jeecg.com/component/LazyContainer.html
44. Page页面 https://help.jeecg.com/component/Page.html
45. CodeEditor 代码编辑器 https://help.jeecg.com/component/CodeEditor.html
46. Authority 权限 https://help.jeecg.com/component/Authority.html
47. JsonPreviewJSON 预览 https://help.jeecg.com/component/JsonPreview.html
48. CountDown 倒计时 https://help.jeecg.com/component/CountDown.html
49. ClickOutSide 点击外部 https://help.jeecg.com/component/ClickOutSide.html
50. Description 详情组件 https://help.jeecg.com/component/Description.html
51. CountTo 计数到 https://help.jeecg.com/component/CountTo.html
52. FlowChart 流程图 https://help.jeecg.com/component/FlowChart.html
53. PopConfirmButton 弹出确认按钮 https://help.jeecg.com/component/PopConfirmButton.html
54. Qrcode 二维码 https://help.jeecg.com/component/Qrcode.html
55. Upload 上传 https://help.jeecg.com/component/Upload.html
56. ScrollContainer 滚动容器 https://help.jeecg.com/component/ScrollContainer.html
57. Excel 电子表格 https://help.jeecg.com/component/Excel.html
58. Tree 树状结构 https://help.jeecg.com/component/Tree.html
59. Time 时间 https://help.jeecg.com/component/Time.html
60. Tinymce 富文本编辑器 https://help.jeecg.com/component/Tinymce.html
61. ContextMenu 上下文菜单 https://help.jeecg.com/component/ContextMenu.html
62. Transition 过渡效果 https://help.jeecg.com/component/Transition.html
63. VirtualScroll 虚拟滚动 https://help.jeecg.com/component/VirtualScroll.html
64. StrengthMeter 强度计 https://help.jeecg.com/component/StrengthMeter.html
65. Cropper 裁剪器 https://help.jeecg.com/component/Cropper.html
66. Loading 加载中 https://help.jeecg.com/component/Loading.html
67. Preview 预览 https://help.jeecg.com/component/Preview.html
68. BasicDragVerify 基础拖拽验证 https://help.jeecg.com/component/Verify.html
69. MarkdownMarkdown 文本 https://help.jeecg.com/component/Markdown.html
70. BasicTable 基础表格 https://help.jeecg.com/component/Table_bak.html
71. BasicForm 基础表单 https://help.jeecg.com/component/FormBak.html

Tailwind CSS组件

1. Marketing
   • Page Section 页面部分
   • Hero Sections 英雄板块 https://tailwindui.com/components/marketing/sections/heroes
   • Feature Sections 特色板块 https://tailwindui.com/components/marketing/sections/feature-sections
   • CTA Sections CTA板块 https://tailwindui.com/components/marketing/sections/cta-sections
   • Bento Grids 便当网格 https://tailwindui.com/components/marketing/sections/bento-grids
   • Pricing Sections 价格板块 https://tailwindui.com/components/marketing/sections/pricing
   • Header Sections 头部板块 https://tailwindui.com/components/marketing/sections/header
   • Newsletter Sections 新闻通讯板块 https://tailwindui.com/components/marketing/sections/newsletter-sections
   • Stats 统计数据 https://tailwindui.com/components/marketing/sections/stats-sections
   • Testimonials 客户评价 https://tailwindui.com/components/marketing/sections/testimonials
   • Blog Sections 博客板块 https://tailwindui.com/components/marketing/sections/blog-sections
   • Contact Sections 接触板块 https://tailwindui.com/components/marketing/sections/contact-sections
   • Team Sections 团队板块 https://tailwindui.com/components/marketing/sections/team-sections
   • Content Sections 内容板块 https://tailwindui.com/components/marketing/sections/content-sections
   • Logo Clouds 标志云 https://tailwindui.com/components/marketing/sections/logo-clouds
   • FAQs 常见问题解答 https://tailwindui.com/components/marketing/sections/faq-sections
   • Footers 页脚 https://tailwindui.com/components/marketing/sections/footers
   • Elements 元件
   • Headers 页眉 https://tailwindui.com/components/marketing/elements/headers
   • Flyout Menus 弹出菜单 https://tailwindui.com/components/marketing/elements/flyout-menus
   • Banners 横幅广告 https://tailwindui.com/components/marketing/elements/banners
   • Feedback 反馈
   • 404 Pages 404页面 https://tailwindui.com/components/marketing/feedback/404-pages
   • Page Examples 页面示例
   • Landing Pages 登录页面 https://tailwindui.com/components/marketing/page-examples/landing-pages
   • Pricing Pages 定价页面 https://tailwindui.com/components/marketing/page-examples/pricing-pages
   • About Pages 关于页面 https://tailwindui.com/components/marketing/page-examples/about-pages
2. Application UI
   • Application Shells 应用程序外观
   • Stacked Layouts 堆叠布局 https://tailwindui.com/components/application-ui/application-shells/stacked
   • Sidebar Layouts 提要字段版面配置 https://tailwindui.com/components/application-ui/application-shells/sidebar
   • Multi-Column Layouts 多栏布局 https://tailwindui.com/components/application-ui/application-shells/multi-column
   • Headings 标题
   • Page Headings 页面标题 https://tailwindui.com/components/application-ui/headings/page-headings
   • Card Headings 卡片标题 https://tailwindui.com/components/application-ui/headings/card-headings
   • Section Headings 章节标题 https://tailwindui.com/components/application-ui/headings/section-headings
   • Data Display 数据显示
   • Description Lists 描述列表 https://tailwindui.com/components/application-ui/data-display/description-lists
   • Stats 统计数据 https://tailwindui.com/components/application-ui/data-display/stats
   • Calendars 日历 https://tailwindui.com/components/application-ui/data-display/calendars
   • Lists 列出
   • Stacked Lists 堆叠列表 https://tailwindui.com/components/application-ui/lists/stacked-lists
   • Tables 表 https://tailwindui.com/components/application-ui/lists/tables
   • Grid Lists 网格列出 https://tailwindui.com/components/application-ui/lists/grid-lists
   • Feeds 提要 https://tailwindui.com/components/application-ui/lists/feeds
   • Forms 形式
   • Form Layouts 表单布局 https://tailwindui.com/components/application-ui/forms/form-layouts
   • Input Groups 输入组 https://tailwindui.com/components/application-ui/forms/input-groups
   • Select Menus 选择菜单 https://tailwindui.com/components/application-ui/forms/select-menus
   • Sign-in and Registration 登录和注册 https://tailwindui.com/components/application-ui/forms/sign-in-forms
   • Text areas 文本区域 https://tailwindui.com/components/application-ui/forms/textareas
   • Radio Groups 无线电群组 https://tailwindui.com/components/application-ui/forms/radio-groups
   • Checkboxes 复选框 https://tailwindui.com/components/application-ui/forms/checkboxes
   • Toggles 切换 https://tailwindui.com/components/application-ui/forms/toggles
   • Action Panels 行动小组 https://tailwindui.com/components/application-ui/forms/action-panels
   • Comboboxes 组合框 https://tailwindui.com/components/application-ui/forms/comboboxes
   • Feedback 反馈
   • Alerts 警报 https://tailwindui.com/components/application-ui/feedback/alerts
   • Empty States 空态 https://tailwindui.com/components/application-ui/feedback/empty-states
   • Navigation 导航
   • Navbars 导航栏组件 https://tailwindui.com/components/application-ui/navigation/navbars
   • Pagination 分页 https://tailwindui.com/components/application-ui/navigation/pagination
   • Tabs 选项卡 https://tailwindui.com/components/application-ui/navigation/tabs
   • Vertical Navigation 垂直导航 https://tailwindui.com/components/application-ui/navigation/vertical-navigation
   • Sidebar Navigation 侧边栏导航 https://tailwindui.com/components/application-ui/navigation/sidebar-navigation
   • Breadcrumbs 面包屑 https://tailwindui.com/components/application-ui/navigation/breadcrumbs
   • Progress Bars 进度条 https://tailwindui.com/components/application-ui/navigation/progress-bars
   • Command Palettes 命令选项板 https://tailwindui.com/components/application-ui/navigation/command-palettes
   • Overlays 覆盖
   • Modal Dialogs 模态对话框 https://tailwindui.com/components/application-ui/overlays/modal-dialogs
   • Drawers 抽屉 https://tailwindui.com/components/application-ui/overlays/drawers
   • Notifications 通知 https://tailwindui.com/components/application-ui/overlays/notifications
   • Elements 元件
   • Avatars 头像 https://tailwindui.com/components/application-ui/elements/avatars
   • Badges 徽章 https://tailwindui.com/components/application-ui/elements/badges
   • Dropdowns 下拉菜单 https://tailwindui.com/components/application-ui/elements/dropdowns
   • Buttons 按钮 https://tailwindui.com/components/application-ui/elements/buttons
   • Button Groups 按钮组 https://tailwindui.com/components/application-ui/elements/button-groups
   • Layout 布局
   • Containers 容器 https://tailwindui.com/components/application-ui/layout/containers
   • Cards 卡 https://tailwindui.com/components/application-ui/layout/cards
   • List containers 列表容器 https://tailwindui.com/components/application-ui/layout/list-containers
   • Media Objects 媒体对象 https://tailwindui.com/components/application-ui/layout/media-objects
   • Dividers 分隔器 https://tailwindui.com/components/application-ui/layout/dividers
   • Page Examples 页面示例
   • Home Screens 主屏幕 https://tailwindui.com/components/application-ui/page-examples/home-screens
   • Detail Screens 细节屏幕 https://tailwindui.com/components/application-ui/page-examples/detail-screens
   • Settings Screens 设置屏面 https://tailwindui.com/components/application-ui/page-examples/settings-screens
3. Ecommerce
   • Components 组件
   • Product Overviews 产品概述 https://tailwindui.com/components/ecommerce/components/product-overviews
   • Product Lists 产品清单 https://tailwindui.com/components/ecommerce/components/product-lists
   • Category Previews 类别预览 https://tailwindui.com/components/ecommerce/components/category-previews
   • Shopping Carts 购物车 https://tailwindui.com/components/ecommerce/components/shopping-carts
   • Category Filters 类别过滤器 https://tailwindui.com/components/ecommerce/components/category-filters
   • Product Quickviews 产品快速浏览 https://tailwindui.com/components/ecommerce/components/product-quickviews
   • Product Features 产品功能 https://tailwindui.com/components/ecommerce/components/product-features
   • Store Navigation 存储导航 https://tailwindui.com/components/ecommerce/components/store-navigation
   • Promo Sections 促销部分 https://tailwindui.com/components/ecommerce/components/promo-sections
   • Checkout Forms 结账表格 https://tailwindui.com/components/ecommerce/components/checkout-forms
   • Reviews 评论 https://tailwindui.com/components/ecommerce/components/reviews
   • Order Summaries 订单汇总 https://tailwindui.com/components/ecommerce/components/order-summaries
   • Order History 订单历史 https://tailwindui.com/components/ecommerce/components/order-history
   • Incentives 激励 https://tailwindui.com/components/ecommerce/components/incentives
   • Page Examples 页面示例
   • Storefront Pages 店面页面 https://tailwindui.com/components/ecommerce/page-examples/storefront-pages
   • Product Pages 产品页面 https://tailwindui.com/components/ecommerce/page-examples/product-pages
   • Category Pages 类别页面 https://tailwindui.com/components/ecommerce/page-examples/category-pages
   • Shopping Cart Pages 购物车页面 https://tailwindui.com/components/ecommerce/page-examples/shopping-cart-pages
   • Checkout Pages 结账页面 https://tailwindui.com/components/ecommerce/page-examples/checkout-pages
   • Order Detail Pages 订单详细信息页面 https://tailwindui.com/components/ecommerce/page-examples/order-detail-pages
   • Order History Pages 订单历史页面 https://tailwindui.com/components/ecommerce/page-examples/order-history-pages

ScriptEcho整理组件集合

1. 2D/3D/XR组件
   • @egjs/view3d组件 https://naver.github.io/egjs-view3d/docs
   • 3Dmol.js https://3dmol.org/doc/
   • potree组件 https://github.com/potree/potree/
   • three.js组件 https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
   • pixijs https://pixijs.com/8.x/tutorials/getting-started#1
   • two.js https://two.js.org/examples/#official-examples
   • Matter.js https://github.com/liabru/matter-js/tree/master/examples
   • PlayCanvasEngine https://developer.playcanvas.com/user-manual/
   • vue-3d-model组件 https://gitee.com/happinessllw/vue-3d-model
2. AntV组件
   • antvs2组件 https://s2.antv.antgroup.com/manual/introduction
   • antvx6组件 https://x6.antv.vision/zh/docs/tutorial/about
   • antvl7组件 https://www.yuque.com/antv/l7/wyb66y
   • antvg6组件 https://www.yuque.com/antv/g6/intro
   • antvg2组件 https://www.yuque.com/antv/g2-docs/get-started
   • antvf2组件 https://www.yuque.com/antv/f2/grammar
   • antv/f6组件 https://f6.antv.vision/zh/docs/manual/introduction/
3. 地图组件
   • https://ivan-94.github.io/react-bdmap/#/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B
   • inmap https://fengluhome.github.io/inmap-doc/#/docs/v2/introduce
4. 动画组件
   • AnimeJS组件 https://animejs.com/documentation/#cssSelector
   • vue3-lottie组件 https://gitee.com/xilong008/vue-lottie/#wapper-of-bodymovinjs
   • p5.js https://p5js.org/tutorials/
5. 企业协作组件
   • @xpyjs/gantt组件 https://xpyjs.github.io/gantt/docs/root.html
   • gantt-schedule-timeline-calendar组件 https://gitee.com/endfalse/gantt-schedule-timeline-calendar#install
6. 音视频组件
   • jessibuca.js组件 https://jessibuca.com/document.html
   • vidstack/vue组件 https://www.vidstack.io/docs/player/getting-started/installation?styling=default-layout&provider=video
   • vue-record-audio组件 https://www.npmjs.com/package/vue-record-audio
7. 在线文档组件
   • CodeMirror组件 https://codemirror.net/docs/guide/
   • drauu组件 https://github.com/antfu/drauu
   • mind-elixir组件 https://mind-elixir.com/docs/getting-started/quick-start
   • tinymce组件 https://www.tiny.cloud/docs/tinymce/latest/basic-setup/
   • tiptap组件 https://tiptap.dev/docs/editor/getting-started/install
   • Univer组件 https://univer.ai/zh-CN/guides/sheet/getting-started/quickstart
   • vue-office组件 https://501351981.github.io/vue-office/examples/docs/config/
   • WangEditor组件 https://www.wangeditor.com/v5/getting-started.html
   • vue-markdown-it https://freedomevenden.com/projects/vue-markdown-it#usage
8. 拓扑图
   • Cytoscape.js https://js.cytoscape.org/#getting-started
   • neovis.js https://github.com/neo4j-contrib/neovis.js
   • WebCola https://github.com/tgdwyer/WebCola/tree/master/website/examples
9. 图形组件
   • BPMN.js https://bpmn.io/toolkit/bpmn-js/walkthrough/
   • JSXGraph https://jsxgraph.org/wp/docs/index.html
   • LiteGraph.js https://github.com/jagenjo/litegraph.js
   • Rough.js https://roughjs.com/
10. 图形处理
    • OpenCV.js https://docs.opencv.org/3.4/d5/d10/tutorial_js_root.html
    • WASM-ImageMagick https://github.com/ImageMagick/ImageMagick
11. 其他
    • uiverse卡片 https://uiverse.io/elements
    • WebSight1 https://docs.websight.io/cms/quick-start/
    • WebSight2 https://docs.websight.io/cms/quick-start/
    • 人工智能组件 https://www.llama.com/docs/how-to-guides/
    • ECharts图表 https://echarts.apache.org/zh/option.html#title