16 changed files with 195 additions and 103 deletions
@ -1,56 +0,0 @@ |
|||
# Ant Design Pro |
|||
|
|||
This project is initialized with [Ant Design Pro](https://pro.ant.design). Follow is the quick guide for how to use. |
|||
|
|||
## Environment Prepare |
|||
|
|||
Install `node_modules`: |
|||
```bash |
|||
npm install |
|||
``` |
|||
|
|||
or |
|||
|
|||
```bash |
|||
yarn |
|||
``` |
|||
|
|||
## Provided Scripts |
|||
|
|||
Ant Design Pro provides some useful script to help you quick start and build with web project, code style check and test. |
|||
|
|||
Scripts provided in `package.json`. It's safe to modify or add additional script: |
|||
|
|||
### Start project |
|||
|
|||
```bash |
|||
npm start |
|||
``` |
|||
|
|||
### Build project |
|||
|
|||
```bash |
|||
npm run build |
|||
``` |
|||
|
|||
### Check code style |
|||
|
|||
```bash |
|||
npm run lint |
|||
``` |
|||
|
|||
You can also use script to auto fix some lint error: |
|||
|
|||
```bash |
|||
npm run lint:fix |
|||
``` |
|||
|
|||
### Test code |
|||
|
|||
```bash |
|||
npm test |
|||
``` |
|||
|
|||
## More |
|||
|
|||
You can view full document on our [official website](https://pro.ant.design). And welcome any feedback in our [github](https://github.com/ant-design/ant-design-pro). |
|||
@ -0,0 +1,27 @@ |
|||
// eslint-disable-next-line eslint-comments/disable-enable-pair
|
|||
/* eslint-disable import/no-extraneous-dependencies */ |
|||
import client from 'webpack-theme-color-replacer/client'; |
|||
import generate from '@ant-design/colors/lib/generate'; |
|||
|
|||
export default { |
|||
primaryColor: '#1890ff', |
|||
getAntdSerials(color) { |
|||
// 淡化(即less的tint)
|
|||
const lightens = new Array(9).fill().map((t, i) => { |
|||
return client.varyColor.lighten(color, i / 10); |
|||
}); |
|||
const colorPalettes = generate(color); |
|||
return lightens.concat(colorPalettes); |
|||
}, |
|||
changeColor(newColor) { |
|||
const lastColor = this.lastColor || this.primaryColor; |
|||
const options = { |
|||
cssUrl: '/css/theme-colors.css', // hash模式下用相对路径
|
|||
oldColors: this.getAntdSerials(lastColor), // current colors array. The same as `matchColors`
|
|||
newColors: this.getAntdSerials(newColor || this.primaryColor), // new colors array, one-to-one corresponde with `oldColors`
|
|||
}; |
|||
const promise = client.changer.changeColor(options, Promise); |
|||
this.lastColor = lastColor; |
|||
return promise; |
|||
}, |
|||
}; |
|||
@ -1,18 +1,24 @@ |
|||
/* eslint no-useless-escape:0 import/prefer-default-export:0 */ |
|||
const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/; |
|||
|
|||
export function isUrl(path: string): string { |
|||
const isUrl = (path: string): boolean => { |
|||
return reg.test(path); |
|||
} |
|||
}; |
|||
|
|||
// 给官方演示站点用,用于关闭真实开发环境不需要使用的特性
|
|||
export function isAntDesignProOrDev(): boolean { |
|||
const { NODE_ENV } = process.env; |
|||
const isAntDesignPro = (): boolean => { |
|||
if (ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site') { |
|||
return true; |
|||
} |
|||
return window.location.hostname === 'preview.pro.ant.design'; |
|||
}; |
|||
|
|||
// 给官方演示站点用,用于关闭真实开发环境不需要使用的特性
|
|||
const isAntDesignProOrDev = (): boolean => { |
|||
const { NODE_ENV } = process.env; |
|||
if (NODE_ENV === 'development') { |
|||
return true; |
|||
} |
|||
return window.location.hostname === 'preview.pro.ant.design'; |
|||
} |
|||
return isAntDesignPro(); |
|||
}; |
|||
|
|||
export { isAntDesignProOrDev, isAntDesignPro, isUrl }; |
|||
|
|||
Loading…
Reference in new issue