UNI-DATA

# 支持的 UI 组件库

# Naive UI (opens new window)

一个 Vue 3 组件库，使用 TypeScript。

#

基于 Vue 3，面向设计师和开发者的组件库。Element Plus 支持 自定义主题配置

# 用前概览

为什么选择这两款 UI 组件库

  1. Naive UI 和 Element Plus 都是基于 Vue 3 和 TypeScript 的先进组件库，它们各自具有独特的优势和应用场景。
  2. Naive UI 则是专为低代码大屏 (opens new window)应用设计的组件库，它提供了丰富的组件选择和详尽的文档支持。在完成大屏设计后，由于其组件的特定功能需求，导出代码部份组件会依赖它，所以选择 Naive UI（必须引入）。
  3. Element Plus 是 Element UI 的 Vue 3 版本，它继承了 Element UI 的设计理念，并针对 Vue 3 进行了优化升级，提供了一套成熟且易于使用的组件，深受前端开发者的喜爱（按需引入）。
  4. 在项目开发中，两个组件库可以并行使用，根据具体需求和场景选择适合的组件，以实现最佳的开发效果和用户体验。这种灵活的组件选择策略，可以充分发挥 Naive UI (opens new window)和Element Plus (opens new window)的长处，满足多样化的开发需求。

友情提示：使用前请阅读

组件库使用说明

在导出的代码后，项目二次开发中已集成了这两个组件库。为了简化开发流程并降低风险，提供以下建议：

  1. 组件选择：根据自身熟悉度、项目需求和场景选择合适的组件库，以实现最佳的开发效果和用户体验。
  2. 专库专用：尽量将 Element Plus 和 Naive UI 分别用于它们最擅长的场景。
  3. 避免混用：尽量不要在一个库的组件里面使用另一个库的组件(嵌套使用)，以减少潜在的兼容性问题。

# 主题配置

Element Plus 自定义主题配置

  1. 主题默认是暗黑模式，如果需要自定义主题模式，以下配置参数供参考，配置前和配置后的效果对比。
  2. 如果需要切换到亮色模式，请修改html标签的class属性，将dark去掉即可。

# 配置前

点击展示/隐藏主题风格
html.dark {
  /* 页面背景色、一般背景色、遮罩层背景色的定义 */
  --el-bg-color-page: rgba(255, 255, 255, 0.05);
  --el-bg-color: #2c408d;
  --el-bg-color-overlay: #2e4bb8;

  /* 文本颜色的定义 */
  /* 定义主要文本颜色变量，用于显示关键信息 */
  --el-text-color-primary: #9cd6ff;
  /* 定义常规文本颜色变量，用于显示普通文本 */
  --el-text-color-regular: #cfd3dc;
  /* 定义次要文本颜色变量，用于显示次级信息 */
  --el-text-color-secondary: #9cd6ff;
  /* 定义占位符文本颜色变量，用于显示表单占位符文本 */
  --el-text-color-placeholder: #9cd6ff;
  /* 定义禁用状态文本颜色变量，用于显示不可交互元素的文本 */
  --el-text-color-disabled: #6c6e72;

  /* 填充颜色的定义 */
  --el-fill-color-light: #2c408d;
  --el-fill-color-lighter: #1d1d1d;
  --el-fill-color-extra-light: #191919;
  --el-fill-color-blank: transparent;

  /* 遮罩颜色的定义 */
  --el-mask-color: rgba(0, 0, 0, 0.8);
  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);

  /* 定义不同阴影效果的变量 */
  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.16), 0px 8px 20px rgba(0, 0, 0, 0.72);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.32);
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.32);
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.32), 0px 12px 32px
      #000000, 0px 8px 16px -8px #000000;

  /* 边框颜色的定义 这些变量从深到浅提供了不同的色调*/
  --el-border-color-darker: #9cd6ff;
  --el-border-color-dark: #9cd6ff;
  --el-border-color: rgba(156, 214, 255, 0.25);
  --el-border-color-light: #414243;
  --el-border-color-lighter: transparent;
  --el-border-color-extra-light: #2b2b2c;
}
变量名 描述 示例值
--el-bg-color-page 页面背景色 rgba(255, 255, 255, 0.05)
--el-bg-color 一般背景色 #2c408d
--el-bg-color-overlay 遮罩层背景色 #2e4bb8
--el-text-color-primary 主要文本颜色 #9cd6ff
--el-text-color-regular 常规文本颜色 #cfd3dc
--el-text-color-secondary 次要文本颜色 #9cd6ff
--el-text-color-placeholder 占位符文本颜色 #9cd6ff
--el-text-color-disabled 禁用状态文本颜色 #6c6e72
--el-fill-color-light 填充颜色（浅） #2c408d
--el-fill-color-lighter 填充颜色（更浅） #1d1d1d
--el-fill-color-extra-light 填充颜色（极浅） #191919
--el-fill-color-blank 填充颜色（空白） transparent
--el-mask-color 遮罩颜色 rgba(0, 0, 0, 0.8)
--el-mask-color-extra-light 遮罩颜色（极浅） rgba(0, 0, 0, 0.3)
--el-box-shadow 阴影效果（标准） ...
--el-box-shadow-light 阴影效果（轻） ...
--el-box-shadow-lighter 阴影效果（更轻） ...
--el-box-shadow-dark 阴影效果（深） ...
--el-border-color-darker 边框颜色（较深） #9cd6ff
--el-border-color-dark 边框颜色（深） #9cd6ff
--el-border-color 边框颜色 rgba(156, 214, 255, 0.25)
--el-border-color-light 边框颜色（浅） #414243
--el-border-color-lighter 边框颜色（更浅） transparent
--el-border-color-extra-light 边框颜色（极浅） #2b2b2c

# 配置后