@pluve/antd-rest

基于后台设计规范（1366*768）为参考，重置了antd的样式 基于运营门户紧凑版为参考，重置了antd的样式

简介

本文只针对 antd@4、ant-design-vue@3的组件库进行内部的规范样式调整，antd@5暂未支持。 插件分两个版本

| 版本 | 说明 | | :-- | :-- | | V1 | 针对antd@4、ant-design-vue@3，有个性化的css样式 | |V2|针对antd@5以上、ant-design-vue@4的版本，能修改ant的css变量,有个性化的css样式|

安装

yarn add @pluve/antd-rest

npm install @pluve/antd-rest

字体字号

基础样式不区分版本

引入

import "@pluve/antd-rest/dist/style/antd-rest.base.min.css";

字号

字体

v2使用

1.在App.vue文件中引入token

import { getAntdToken } from '@pluve/antd-rest';

<a-config-provider :theme="themeConfig">
    <router-view />
</a-config-provider>

const themeConfig = getAntdToken().default

2.引入个性化样式文件

// 可以在入口ts文件内引入
import '@pluve/antd-rest/dist/style/antd-rest.base.min.css';
import "@pluve/antd-rest/dist/style/v2/antd-rest.v2.component.min.css";
// 也可以在入口css或者全局css内引入
@import '@pluve/antd-rest/dist/style/antd-rest.base.min.css';
@import "@pluve/antd-rest/dist/style/v2/antd-rest.v2.component.min.css";

3.引入less变量

根据UX标准定义了部分变量名

import '@pluve/antd-rest/dist/style/v2/antd-base.var.less';

| 变量名 | 色值| 说明 | | -- | -- | --| | @pluve-color-title | #222222 |标题/主要文本色 | | @pluve-color-secondary | #555555 | 常规/次要按钮 | | @pluve-color-subtitle | #888888 |副文案/辅助说明信息 | | @pluve-color-popover | rgba(0, 0, 0, 0.8) | 气泡背景层 | | @pluve-color-mask | rgba(0, 0, 0, 0.5) | 背景蒙层 | | @pluve-color-disabled | #bbbbbb | 弱文案提示/失效、不可点击 | | @pluve-color-border | #cacaca | 输入框/选择边框 | | @pluve-color-border-split | #eeeeee | 分割线 | | @pluve-color-bg-layout | #f5f5f5 | 分割面/背景色 | | @pluve-color-bg-white | #ffffff | 白色背景/反白文字底色 | | @primary-color | #009639 | 主题色/链接色 | | @warning-color | #ff8f1f | 警告色/强调色 | | @error-color | #ff3b30 | 错误提示色 |

v1使用

1.导出 modifyVars 变量

import { theme } from '@pluve/antd-rest';
// 或者
const { theme } = require('@pluve/antd-rest');

// 如需要紧凑版的样式变量
import { setThemePrefix } from '@pluve/antd-rest';

const theme = setThemePrefix({
    // 是否移除'@'前缀  { '@primary-color':  }
    stripPrefix: true,
    // 开启紧凑模式
    compact: false,
    // 版本号 v1/v2 默认v2 
    version: 'v2',
  },
});

2.引入个性化样式文件

// 可以在入口ts文件内引入
import "@pluve/antd-rest/dist/style/antd-rest.min.css";
// 也可以在入口css或者全局css内引入
@import "~@pluve/antd-rest/dist/style/antd-rest.min.css";

// 紧凑模式的css
import "@pluve/antd-rest/dist/style/antd-rest.compact.min.css";

3.通过 less 的 modifyVars 进行变量覆盖

webpack

module.exports = {
  rules: [
    {
      test: /\.less$/,
      use: [
        // ...其他loader
        {
          loader: 'less-loader',
          options: {
            lessOptions: {
              javascriptEnabled: true,
              modifyVars: {
                ...theme,
              },
            },
          },
        },
      ],
    },
  ],
};

注意

• lessOptions 最低版本需要 [email protected]。

create-react-app + customize-cra

// config-overrides.js
const { override,addLessLoader } = = require("customize-cra");

module.exports = override(
    addLessLoader({
          lessOptions: {
            javascriptEnabled: true,
            modifyVars: { ...theme },
      },
    })
)

注意

• 因为 create-react-app 与 react-app-rewired 是基于 webpack4 来开发的,所以 less-loader 的版本也不能太高，推荐 6 - 7 的版本。

vite

// vite.config.ts
import { defineConfig } from 'vite';
export default () => {
  defineConfig({
    plugins: [
      Components({
        resolvers: [
          AntDesignVueResolver({
            importStyle: 'less',
            resolveIcons: true,
          }),
        ],
      }),
    ],
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          modifyVars: {
            ...theme,
          },
        },
      },
    },
  });
};

其他功能

1.如何获取插件内使用到的 less 变量文件？

@import "~@pluve/antd-rest/dist/style/antd-rest.var.less"

// 紧凑模式
@import "~@pluve/antd-rest/dist/style/antd-rest.compact.var.less"

2.如何获取theme的数据，不带有@符号？

import { setThemePrefix } from '@pluve/antd-rest';
const theme = setThemePrefix(true);
//  { 'primary-color': '#1890ff', ... }

说明

如在使用中遇到样式不符合或未按照 UI 规范重写的问题，请在前端群反馈。