diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000000..c8c621a5f1 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,7 @@ +language: node_js +node_js: + - 10.15.0 +cache: yarn +script: + - yarn + - yarn run build \ No newline at end of file diff --git a/README.md b/README.md index 6e1f9dae07..c5044af582 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,9 @@ -Ant Design Pro Vue -==== +

Ant Design Pro Vue

+ +
+An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on Ant Design of Vue +
+ @@ -33,8 +37,10 @@ Overview ![权限结构](https://static-2.loacg.com/open/static/github/permissions.png) + 环境和依赖 ---- + - node - yarn - webpack @@ -45,6 +51,8 @@ Overview - [@antv/g2](https://antv.alipay.com/zh-cn/index.html) - Alipay AntV 数据可视化图表 - [Viser-vue](https://viserjs.github.io/docs.html#/viser/guide/installation) - antv/g2 封装实现 +> 请注意，我们强烈建议本项目使用 [Yarn](https://yarnpkg.com/) 包管理工具，这样可以与本项目演示站所加载完全相同的依赖版本 (yarn.lock) 。由于我们没有对依赖进行强制的版本控制，采用非 yarn 包管理进行引入时，可能由于 Pro 所依赖的库已经升级版本，而引入了新版本所照成的问题。本作者可能会由于时间问题无法及时排查而导致您采用本项目作为基项目而出现问题。 + 项目下载和运行 @@ -81,11 +89,13 @@ yarn run lint 其他说明 ---- +- **关于 Issue 反馈 (重要!重要!重要!) 请在开 *Issue* 时，描述清楚您的使用环境，所使用 Pro 版本或分支，出现的情况等...** 另外，若有疑问也可加入 QQ群 （Ant Design Vue 原作者使用讨论群 217490093，**非 Pro 群**），本项目的几位维护者也在该群 + - 项目使用的 [vue-cli3](https://cli.vuejs.org/guide/), 请更新您的 cli - 关闭 Eslint (不推荐) 移除 `package.json` 中 `eslintConfig` 整个节点代码 -- 项目使用了在线 mock，[easy-mock](https://www.easy-mock.com/) 项目所用的 mock 数据 [点击查看(请勿改动接口返回数据)](https://www.easy-mock.com/project/5b7bce071f130e5b7fe8cd7d) +- 项目使用了在线 mock，[easy-mock](https://www.easy-mock.com/) 项目所用的 mock 数据 [点击查看(请勿改动接口返回数据)](https://www.easy-mock.com/project/5b7bce071f130e5b7fe8cd7d)，也可以下载 [ANTD-PRO-Easy-Mock-API.zip](https://github.com/sendya/ant-design-pro-vue/files/2682711/ANTD-PRO-Easy-Mock-API.zip) 然后自行导入到自己的 mock 服务上 - 修改 Ant Design 配色，在文件 `vue.config.js` 中，其他 less 变量覆盖参考 [ant design](https://ant.design/docs/react/customize-theme-cn) 官方说明 ```ecmascript 6 @@ -106,16 +116,22 @@ yarn run lint ``` - 附属文档 ---- - [路由/菜单说明](https://github.com/sendya/ant-design-pro-vue/blob/master/src/router/README.md) - - [Table 重封装组件](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/table/README.md) - -- [ANTD 默认配置项](https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultConfig.js) - +- [ANTD 默认配置项](https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultSettings.js) +- [按需加载/减少打包大小](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/LoadOnDemand.md) +- [为首屏增加 Loading 动画](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/Add-Page-Loading-Animate.md) +- [为项目增加依赖项分析工具 analyzer](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/webpack-bundle-analyzer.md) +- ANTD PRO 额外组件 + - Trend 趋势标记 [Trend.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Trend/index.md) + - AvatarList 用户头像列表 [AvatarList.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/AvatarList/index.md) + - CountDown 倒计时 [CountDown.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/CountDown/index.md) + - Ellipsis 文本自动省略号 [Ellipsis.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Ellipsis/index.md) + - NumberInfo 数据文本 [NumberInfo.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/NumberInfo/index.md) + - FooterToolbar 底部工具栏 [FooterToolbar.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/FooterToolbar/index.md) - 其他待补充... diff --git a/docs/Add-Page-Loading-Animate.md b/docs/Add-Page-Loading-Animate.md new file mode 100644 index 0000000000..b808c944a5 --- /dev/null +++ b/docs/Add-Page-Loading-Animate.md @@ -0,0 +1,31 @@ +为首屏增加 加载动画 +==== + + + +## 需求 + +> 为了缓解用户第一次访问时，加载 JS 过大所导致用户等待白屏时间过长导致的用户体验不好，进行的一个优化动效。 + + + +## 实现方案 + +1. 将 动画加载 dom 元素放在 #app 内，Vue 生命周期开始时，会自动清掉 #app 下的所有元素。 +2. 将 动画加载 dom 元素放在 body 下，Vue 生命周期开始时 App.vue (created, mounted) 调用 `@/utils/utll` 下的 removeLoadingAnimate(#id, timeout) 则会移除加载动画 + +最后一步： +​ 将样式插入到 `public/index.html` 文件的 `` 最好写成内联 `` + + + +---- + +目前提供有两个样式，均在 `public/loading` 文件夹内。且 pro 已经默认使用了一套 loading 动画方案，可以直接参考 `public/index.html` + + +## 写在最后 + +目前 pro 有页面 overflow 显示出浏览器滚动条时，页面会抖动一下的问题。 + +欢迎各位提供能解决的方案和实现 demo。如果在条件允许的情况下，建议请直接使用 pro 进行改造，也欢迎直接 PR 到 pro 的仓库 \ No newline at end of file diff --git a/docs/LoadOnDemand.md b/docs/LoadOnDemand.md new file mode 100644 index 0000000000..3449a440f5 --- /dev/null +++ b/docs/LoadOnDemand.md @@ -0,0 +1,101 @@ +按需加载 减小打包 +==== + + + +## 按需引入组件依赖 + +`Ant Design Pro Vue` 默认编码工作并不支持按需引入，不过可以通过以下操作结合 [Ant Design Of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) 官方文档来进行按需引入。 + +- 增加项目按需引入依赖 +- 修改引入组件方式 + + + +1. 增加按需引入所需依赖 `babel-plugin-import` +并且修改文件 `babel.config.js` + ```ecmascript 6 + module.exports = { + presets: [ + '@vue/app' + ], + plugins: [ + [ "import", { + "libraryName": "ant-design-vue", + "libraryDirectory": "es", + "style": "css" + } ] + ] + } + ``` + + +2. 修改引入组件方式 (注意，这只是一个例子，请完整引入你所需要的组件) + + 文件 `@/components/use.js` + + ```javascript + import Vue from 'vue' + import { + Input, + Button, + Select, + Card, + Form, + Row, + Col, + Modal, + Table, + notification + } from 'ant-design-vue' + + Vue.use(Input) + Vue.use(Button) + Vue.use(Select) + Vue.use(Card) + Vue.use(Form) + Vue.use(Row) + Vue.use(Col) + Vue.use(Modal) + Vue.use(Table) + Vue.use(notification) + + Vue.prototype.$notification = notification; + ``` + + +3. 最后在 `main.js` 中引入 `@/components/use.js` 文件即可，如下 + + ```javascript + + import Vue from 'vue' + import App from './App' + + // 引入 按需组件的统一引入文件 + import './components/use' + + import './style/index.less' + + + Vue.config.productionTip = false + + new Vue({ + render: h => h(App), + }).$mount('#app') + + ``` + +**具体完整实现可参考分支 [feature/demand_load](https://github.com/sendya/ant-design-pro-vue/tree/feature/demand_load)** + + + + + + + +## 其他 减少打包大小 + + + +1. Ant Design Vue 1.2.x 版本起，采用的 ant-design 官方方案 svg Icon 组件，整个项目打包会变大很多，图标进行按需加载可参考 https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo +2. moment 按需加载 可参考 https://github.com/jmblog/how-to-optimize-momentjs-with-webpack \ No newline at end of file diff --git a/docs/webpack-bundle-analyzer.md b/docs/webpack-bundle-analyzer.md new file mode 100644 index 0000000000..c313767609 --- /dev/null +++ b/docs/webpack-bundle-analyzer.md @@ -0,0 +1,40 @@ +先增加依赖 + +```bash +// npm +$ npm install --save-dev webpack-bundle-analyzer + +// or yarn +$ yarn add webpack-bundle-analyzer -D +``` + +配置文件 `vue.config.js` 增加 `configureWebpack.plugins` 参数 + +``` +const path = require('path') +const webpack = require('webpack') +const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin + +function resolve (dir) { + return path.join(__dirname, dir) +} + +// vue.config.js +module.exports = { + configureWebpack: { + plugins: [ + // Ignore all locale files of moment.js + new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), + // 依赖大小分析工具 + new BundleAnalyzerPlugin(), + ] + }, + + + ... +} +``` + + + +启动 `cli` 的 `build` 命令进行项目编译，编译完成时，会自动运行一个 http://localhost:8888 的地址，完整显示了支持库依赖 \ No newline at end of file diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 0000000000..29fee32be8 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,23 @@ +module.exports = { + moduleFileExtensions: [ + 'js', + 'jsx', + 'json', + 'vue' + ], + transform: { + '^.+\\.vue$': 'vue-jest', + '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub', + '^.+\\.jsx?$': 'babel-jest' + }, + moduleNameMapper: { + '^@/(.*)$': '/src/$1' + }, + snapshotSerializers: [ + 'jest-serializer-vue' + ], + testMatch: [ + '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)' + ], + testURL: 'http://localhost/' +} diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000000..1bd0da4c96 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "target": "es6", + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + }, + "exclude": ["node_modules", "dist"], + "include": ["src/**/*"] +} diff --git a/package.json b/package.json index 7b4556f0ef..1e0fc570d9 100644 --- a/package.json +++ b/package.json @@ -5,20 +5,23 @@ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", - "lint": "vue-cli-service lint" + "lint": "vue-cli-service lint", + "test:unit": "vue-cli-service test:unit" }, "dependencies": { "@antv/data-set": "^0.10.1", - "ant-design-vue": "^1.1.10", + "ant-design-vue": "~1.2.2", "axios": "^0.18.0", "dayjs": "^1.7.5", "enquire.js": "^2.1.6", "js-cookie": "^2.2.0", "lodash.get": "^4.4.2", + "lodash.pick": "^4.4.0", "md5": "^2.2.1", "nprogress": "^0.2.0", "viser-vue": "^2.3.3", "vue": "^2.5.17", + "vue-clipboard2": "^0.2.1", "vue-cropper": "^0.4.4", "vue-ls": "^3.2.0", "vue-router": "^3.0.1", @@ -27,9 +30,13 @@ "devDependencies": { "@vue/cli-plugin-babel": "^3.2.0", "@vue/cli-plugin-eslint": "^3.2.0", + "@vue/cli-plugin-unit-jest": "^3.3.0", "@vue/cli-service": "^3.2.0", "@vue/eslint-config-standard": "^4.0.0", + "@vue/test-utils": "^1.0.0-beta.20", + "babel-core": "7.0.0-bridge.0", "babel-eslint": "^10.0.1", + "babel-jest": "^23.6.0", "eslint": "^5.8.0", "eslint-plugin-vue": "^5.0.0-0", "less": "^3.8.1", @@ -73,7 +80,29 @@ "vue/no-use-v-if-with-v-for": 0, "vue/html-closing-bracket-newline": 0, "vue/no-parsing-error": 0, - "no-console": 0 + "no-console": 0, + "quotes": [ + 2, + "single", + { + "avoidEscape": true, + "allowTemplateLiterals": true + } + ], + "semi": [ + 2, + "never", + { + "beforeStatementContinuationChars": "never" + } + ], + "no-delete-var": 2, + "prefer-const": [ + 2, + { + "ignoreReadBeforeAssign": false + } + ] } }, "postcss": { @@ -86,4 +115,4 @@ "last 2 versions", "not ie <= 8" ] -} \ No newline at end of file +} diff --git a/public/index.html b/public/index.html index 0c1bfedd93..2a77655bd8 100644 --- a/public/index.html +++ b/public/index.html @@ -6,11 +6,17 @@ Ant Design Pro + +
+
+ +
+
diff --git a/public/loading/loading.css b/public/loading/loading.css new file mode 100644 index 0000000000..a899eac790 --- /dev/null +++ b/public/loading/loading.css @@ -0,0 +1 @@ +#preloadingAnimation{position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;z-index: 9999;overflow: hidden}.lds-roller{display:inline-block;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:32px 32px;}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#13c2c2;margin:-3px 0 0 -3px;}.lds-roller div:nth-child(1){animation-delay:-0.036s;}.lds-roller div:nth-child(1):after{top:50px;left:50px;}.lds-roller div:nth-child(2){animation-delay:-0.072s;}.lds-roller div:nth-child(2):after{top:54px;left:45px;}.lds-roller div:nth-child(3){animation-delay:-0.108s;}.lds-roller div:nth-child(3):after{top:57px;left:39px;}.lds-roller div:nth-child(4){animation-delay:-0.144s;}.lds-roller div:nth-child(4):after{top:58px;left:32px;}.lds-roller div:nth-child(5){animation-delay:-0.18s;}.lds-roller div:nth-child(5):after{top:57px;left:25px;}.lds-roller div:nth-child(6){animation-delay:-0.216s;}.lds-roller div:nth-child(6):after{top:54px;left:19px;}.lds-roller div:nth-child(7){animation-delay:-0.252s;}.lds-roller div:nth-child(7):after{top:50px;left:14px;}.lds-roller div:nth-child(8){animation-delay:-0.288s;}.lds-roller div:nth-child(8):after{top:45px;left:10px;}#preloadingAnimation .load-tips{color: #13c2c2;font-size:2rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:80px;text-align:center;width:400px;height:64px;} @keyframes lds-roller{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}} \ No newline at end of file diff --git a/public/loading/loading.html b/public/loading/loading.html new file mode 100644 index 0000000000..9b9319650f --- /dev/null +++ b/public/loading/loading.html @@ -0,0 +1 @@ +
Loading
\ No newline at end of file diff --git a/public/loading/option2/html_code_segment.html b/public/loading/option2/html_code_segment.html new file mode 100644 index 0000000000..df81b262b3 --- /dev/null +++ b/public/loading/option2/html_code_segment.html @@ -0,0 +1,5 @@ +
+
+ +
+
\ No newline at end of file diff --git a/public/loading/option2/loading.css b/public/loading/option2/loading.css new file mode 100644 index 0000000000..c35cd73ad5 --- /dev/null +++ b/public/loading/option2/loading.css @@ -0,0 +1 @@ +.preloading-animate{background:#ffffff;width:100%;height:100%;position:fixed;left:0;top:0;z-index:299;}.preloading-animate .preloading-wrapper{position:absolute;width:5rem;height:5rem;left:50%;top:50%;transform:translate(-50%,-50%);}.preloading-animate .preloading-wrapper .preloading-balls{font-size:5rem;} \ No newline at end of file diff --git a/public/loading/option2/loading.svg b/public/loading/option2/loading.svg new file mode 100644 index 0000000000..7ff7322d7f --- /dev/null +++ b/public/loading/option2/loading.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 747ca31e99..b68bbf2fd7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,34 +5,37 @@ + \ No newline at end of file diff --git a/src/components/AvatarList/List.vue b/src/components/AvatarList/List.vue new file mode 100644 index 0000000000..039f19f272 --- /dev/null +++ b/src/components/AvatarList/List.vue @@ -0,0 +1,100 @@ + + + \ No newline at end of file diff --git a/src/components/AvatarList/index.js b/src/components/AvatarList/index.js new file mode 100644 index 0000000000..52f8b31767 --- /dev/null +++ b/src/components/AvatarList/index.js @@ -0,0 +1,4 @@ +import AvatarList from './List' +import './index.less' + +export default AvatarList \ No newline at end of file diff --git a/src/components/AvatarList/index.less b/src/components/AvatarList/index.less new file mode 100644 index 0000000000..9ce073fd14 --- /dev/null +++ b/src/components/AvatarList/index.less @@ -0,0 +1,60 @@ +@import "../index"; + +@avatar-list-prefix-cls: ~"@{ant-pro-prefix}-avatar-list"; +@avatar-list-item-prefix-cls: ~"@{ant-pro-prefix}-avatar-list-item"; + +.@{avatar-list-prefix-cls} { + display: inline-block; + + ul { + list-style: none; + display: inline-block; + padding: 0; + margin: 0 0 0 8px; + font-size: 0; + } +} + +.@{avatar-list-item-prefix-cls} { + display: inline-block; + font-size: @font-size-base; + margin-left: -8px; + width: @avatar-size-base; + height: @avatar-size-base; + + :global { + .ant-avatar { + border: 1px solid #fff; + cursor: pointer; + } + } + + &.large { + width: @avatar-size-lg; + height: @avatar-size-lg; + } + + &.small { + width: @avatar-size-sm; + height: @avatar-size-sm; + } + + &.mini { + width: 20px; + height: 20px; + + :global { + .ant-avatar { + width: 20px; + height: 20px; + line-height: 20px; + + .ant-avatar-string { + font-size: 12px; + line-height: 18px; + } + } + } + } +} + diff --git a/src/components/AvatarList/index.md b/src/components/AvatarList/index.md new file mode 100644 index 0000000000..dc9c092005 --- /dev/null +++ b/src/components/AvatarList/index.md @@ -0,0 +1,64 @@ +# AvatarList 用户头像列表 + + +一组用户头像，常用在项目/团队成员列表。可通过设置 `size` 属性来指定头像大小。 + + + +引用方式： + +```javascript +import AvatarList from '@/components/AvatarList' +const AvatarListItem = AvatarList.AvatarItem + +export default { + components: { + AvatarList, + AvatarListItem + } +} +``` + + + +## 代码演示 [demo](https://pro.loacg.com/test/home) + +```html + + + + + +``` +或 +```html + + + + + + + + + +``` + + + +## API + +### AvatarList + +| 参数 | 说明 | 类型 | 默认值 | +| ---------------- | -------- | ---------------------------------- | --------- | +| size | 头像大小 | `large`、`small` 、`mini`, `default` | `default` | +| maxLength | 要显示的最大项目 | number | - | +| excessItemsStyle | 多余的项目风格 | CSSProperties | - | + +### AvatarList.Item + +| 参数 | 说明 | 类型 | 默认值 | +| ---- | ------ | --------- | --- | +| tips | 头像展示文案 | string | - | +| src | 头像图片连接 | string | - | + diff --git a/src/components/ChartCard.vue b/src/components/ChartCard.vue index 8acb150d6f..42c57b4ab5 100644 --- a/src/components/ChartCard.vue +++ b/src/components/ChartCard.vue @@ -24,7 +24,7 @@ + + \ No newline at end of file diff --git a/src/components/CountDown/index.js b/src/components/CountDown/index.js new file mode 100644 index 0000000000..3015cc5b9b --- /dev/null +++ b/src/components/CountDown/index.js @@ -0,0 +1,3 @@ +import CountDown from './CountDown' + +export default CountDown \ No newline at end of file diff --git a/src/components/CountDown/index.md b/src/components/CountDown/index.md new file mode 100644 index 0000000000..fd46809b6a --- /dev/null +++ b/src/components/CountDown/index.md @@ -0,0 +1,34 @@ +# CountDown 倒计时 + +倒计时组件。 + + + +引用方式： + +```javascript +import CountDown from '@/components/CountDown/CountDown' + +export default { + components: { + CountDown + } +} +``` + + + +## 代码演示 [demo](https://pro.loacg.com/test/home) + +```html + +``` + + + +## API + +| 参数 | 说明 | 类型 | 默认值 | +|----------|------------------------------------------|-------------|-------| +| target | 目标时间 | Date | - | +| onEnd | 倒计时结束回调 | funtion | -| diff --git a/src/components/Ellipsis/Ellipsis.vue b/src/components/Ellipsis/Ellipsis.vue new file mode 100644 index 0000000000..2941d2d553 --- /dev/null +++ b/src/components/Ellipsis/Ellipsis.vue @@ -0,0 +1,64 @@ + diff --git a/src/components/Ellipsis/index.js b/src/components/Ellipsis/index.js new file mode 100644 index 0000000000..d257156b3a --- /dev/null +++ b/src/components/Ellipsis/index.js @@ -0,0 +1,3 @@ +import Ellipsis from './Ellipsis' + +export default Ellipsis \ No newline at end of file diff --git a/src/components/Ellipsis/index.md b/src/components/Ellipsis/index.md new file mode 100644 index 0000000000..f528ac7f9f --- /dev/null +++ b/src/components/Ellipsis/index.md @@ -0,0 +1,38 @@ +# Ellipsis 文本自动省略号 + +文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。 + + + +引用方式： + +```javascript +import Ellipsis from '@/components/Ellipsis' + +export default { + components: { + Ellipsis + } +} +``` + + + +## 代码演示 [demo](https://pro.loacg.com/test/home) + +```html + + There were injuries alleged in three cases in 2015, and a + fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall. + +``` + + + +## API + + +参数 | 说明 | 类型 | 默认值 +----|------|-----|------ +tooltip | 移动到文本展示完整内容的提示 | boolean | - +length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | - \ No newline at end of file diff --git a/src/components/FooterToolbar/FooterToolBar.vue b/src/components/FooterToolbar/FooterToolBar.vue new file mode 100644 index 0000000000..5757b9ffaa --- /dev/null +++ b/src/components/FooterToolbar/FooterToolBar.vue @@ -0,0 +1,30 @@ + + + + + \ No newline at end of file diff --git a/src/components/FooterToolbar/index.js b/src/components/FooterToolbar/index.js new file mode 100644 index 0000000000..cd45903141 --- /dev/null +++ b/src/components/FooterToolbar/index.js @@ -0,0 +1,4 @@ +import FooterToolBar from './FooterToolBar' +import './index.less' + +export default FooterToolBar \ No newline at end of file diff --git a/src/components/FooterToolbar/index.less b/src/components/FooterToolbar/index.less new file mode 100644 index 0000000000..f56273ffb9 --- /dev/null +++ b/src/components/FooterToolbar/index.less @@ -0,0 +1,23 @@ +@import "../index"; + +@footer-toolbar-prefix-cls: ~"@{ant-pro-prefix}-footer-toolbar"; + +.@{footer-toolbar-prefix-cls} { + position: fixed; + width: 100%; + bottom: 0; + right: 0; + height: 56px; + line-height: 56px; + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03); + background: #fff; + border-top: 1px solid #e8e8e8; + padding: 0 24px; + z-index: 9; + + &:after { + content: ""; + display: block; + clear: both; + } +} \ No newline at end of file diff --git a/src/components/FooterToolbar/index.md b/src/components/FooterToolbar/index.md new file mode 100644 index 0000000000..c1aec2c4ca --- /dev/null +++ b/src/components/FooterToolbar/index.md @@ -0,0 +1,48 @@ +# FooterToolbar 底部工具栏 + +固定在底部的工具栏。 + + + +## 何时使用 + +固定在内容区域的底部，不随滚动条移动，常用于长页面的数据搜集和提交工作。 + + + +引用方式： + +```javascript +import FooterToolBar from '@/components/FooterToolbar' + +export default { + components: { + FooterToolBar + } +} +``` + + + +## 代码演示 + +```html + + 提交 + +``` +或 +```html + + 提交 + +``` + + +## API + +参数 | 说明 | 类型 | 默认值 +----|------|-----|------ +children (slot) | 工具栏内容，向右对齐 | - | - +extra | 额外信息，向左对齐 | String, Object | - + diff --git a/src/components/NumberInfo/NumberInfo.vue b/src/components/NumberInfo/NumberInfo.vue new file mode 100644 index 0000000000..81508780b9 --- /dev/null +++ b/src/components/NumberInfo/NumberInfo.vue @@ -0,0 +1,54 @@ + + + + + \ No newline at end of file diff --git a/src/components/NumberInfo/index.js b/src/components/NumberInfo/index.js new file mode 100644 index 0000000000..a471501ab7 --- /dev/null +++ b/src/components/NumberInfo/index.js @@ -0,0 +1,3 @@ +import NumberInfo from './NumberInfo' + +export default NumberInfo \ No newline at end of file diff --git a/src/components/NumberInfo/index.less b/src/components/NumberInfo/index.less new file mode 100644 index 0000000000..719113da96 --- /dev/null +++ b/src/components/NumberInfo/index.less @@ -0,0 +1,55 @@ +@import "../index"; + +@numberInfo-prefix-cls: ~"@{ant-pro-prefix}-number-info"; + +.@{numberInfo-prefix-cls} { + + .ant-pro-number-info-subtitle { + color: @text-color-secondary; + font-size: @font-size-base; + height: 22px; + line-height: 22px; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; + white-space: nowrap; + } + + .number-info-value { + margin-top: 4px; + font-size: 0; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; + white-space: nowrap; + + & > span { + color: @heading-color; + display: inline-block; + line-height: 32px; + height: 32px; + font-size: 24px; + margin-right: 32px; + } + + .sub-total { + color: @text-color-secondary; + font-size: @font-size-lg; + vertical-align: top; + margin-right: 0; + i { + font-size: 12px; + transform: scale(0.82); + margin-left: 4px; + } + :global { + .anticon-caret-up { + color: @red-6; + } + .anticon-caret-down { + color: @green-6; + } + } + } + } +} \ No newline at end of file diff --git a/src/components/NumberInfo/index.md b/src/components/NumberInfo/index.md new file mode 100644 index 0000000000..147adc4357 --- /dev/null +++ b/src/components/NumberInfo/index.md @@ -0,0 +1,43 @@ +# NumberInfo 数据文本 + +常用在数据卡片中，用于突出展示某个业务数据。 + + + +引用方式： + +```javascript +import NumberInfo from '@/components/NumberInfo' + +export default { + components: { + NumberInfo + } +} +``` + + + +## 代码演示 [demo](https://pro.loacg.com/test/home) + +```html + +``` + + + +## API + +参数 | 说明 | 类型 | 默认值 +----|------|-----|------ +title | 标题 | ReactNode\|string | - +subTitle | 子标题 | ReactNode\|string | - +total | 总量 | ReactNode\|string | - +subTotal | 子总量 | ReactNode\|string | - +status | 增加状态 | 'up \| down' | - +theme | 状态样式 | string | 'light' +gap | 设置数字和描述之间的间距（像素）| number | 8 diff --git a/src/components/Trend/Trend.vue b/src/components/Trend/Trend.vue new file mode 100644 index 0000000000..1be8e91581 --- /dev/null +++ b/src/components/Trend/Trend.vue @@ -0,0 +1,41 @@ + + + + + \ No newline at end of file diff --git a/src/components/Trend/index.js b/src/components/Trend/index.js new file mode 100644 index 0000000000..761366d5f9 --- /dev/null +++ b/src/components/Trend/index.js @@ -0,0 +1,3 @@ +import Trend from './Trend.vue' + +export default Trend \ No newline at end of file diff --git a/src/components/Trend/index.less b/src/components/Trend/index.less new file mode 100644 index 0000000000..8a3d24cfb5 --- /dev/null +++ b/src/components/Trend/index.less @@ -0,0 +1,42 @@ +@import "../index"; + +@trend-prefix-cls: ~"@{ant-pro-prefix}-trend"; + +.@{trend-prefix-cls} { + display: inline-block; + font-size: @font-size-base; + line-height: 22px; + + .up, + .down { + margin-left: 4px; + position: relative; + top: 1px; + + i { + font-size: 12px; + transform: scale(0.83); + } + } + + .item-text { + display: inline-block; + margin-left: 8px; + color: rgba(0,0,0,.85); + } + + .up { + color: @red-6; + } + .down { + color: @green-6; + top: -1px; + } + + &.reverse-color .up { + color: @green-6; + } + &.reverse-color .down { + color: @red-6; + } +} \ No newline at end of file diff --git a/src/components/Trend/index.md b/src/components/Trend/index.md new file mode 100644 index 0000000000..8881f0e1a2 --- /dev/null +++ b/src/components/Trend/index.md @@ -0,0 +1,45 @@ +# Trend 趋势标记 + +趋势符号，标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。 + + + +引用方式： + +```javascript +import Trend from '@/components/Trend' + +export default { + components: { + Trend + } +} +``` + + + +## 代码演示 [demo](https://pro.loacg.com/test/home) + +```html +5% +``` +或 +```html + + 工资 + 5% + +``` +或 +```html +5% +``` + + +## API + +| 参数 | 说明 | 类型 | 默认值 | +|----------|------------------------------------------|-------------|-------| +| flag | 上升下降标识：`up|down` | string | - | +| reverseColor | 颜色反转 | Boolean | false | + diff --git a/src/components/_util/StringUtil.js b/src/components/_util/StringUtil.js new file mode 100644 index 0000000000..29aed19bc7 --- /dev/null +++ b/src/components/_util/StringUtil.js @@ -0,0 +1,25 @@ + +export const getStrFullLength = (str = '') => + str.split('').reduce((pre, cur) => { + const charCode = cur.charCodeAt(0) + if (charCode >= 0 && charCode <= 128) { + return pre + 1 + } + return pre + 2 + }, 0) + +export const cutStrByFullLength = (str = '', maxLength) => { + let showLength = 0 + return str.split('').reduce((pre, cur) => { + const charCode = cur.charCodeAt(0) + if (charCode >= 0 && charCode <= 128) { + showLength += 1 + } else { + showLength += 2 + } + if (showLength <= maxLength) { + return pre + cur + } + return pre + }, '') +} \ No newline at end of file diff --git a/src/components/_util/util.js b/src/components/_util/util.js new file mode 100644 index 0000000000..98752a94c6 --- /dev/null +++ b/src/components/_util/util.js @@ -0,0 +1,12 @@ +/** + * components util + */ + +/** + * 清理空值，对象 + * @param children + * @returns {*[]} + */ +export function filterEmpty (children = []) { + return children.filter(c => c.tag || (c.text && c.text.trim() !== '')) +} \ No newline at end of file diff --git a/src/components/chart/Bar.vue b/src/components/chart/Bar.vue index 0a103c634a..ff8ff7e758 100644 --- a/src/components/chart/Bar.vue +++ b/src/components/chart/Bar.vue @@ -39,7 +39,7 @@ }] export default { - name: "Bar", + name: 'Bar', props: { title: { type: String, diff --git a/src/components/chart/Liquid.vue b/src/components/chart/Liquid.vue index fdf58ee5bb..761ed1d872 100644 --- a/src/components/chart/Liquid.vue +++ b/src/components/chart/Liquid.vue @@ -48,7 +48,7 @@ diff --git a/src/components/layouts/PageView.vue b/src/components/layouts/PageView.vue index dc3ae085b3..eaf7f44977 100644 --- a/src/components/layouts/PageView.vue +++ b/src/components/layouts/PageView.vue @@ -1,7 +1,7 @@