diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml new file mode 100644 index 0000000..17e0377 --- /dev/null +++ b/.idea/codeStyles/Project.xml @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..79ee123 --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..7c4836f --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,7 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..d789b3f --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/vue2.iml b/.idea/vue2.iml new file mode 100644 index 0000000..0c8867d --- /dev/null +++ b/.idea/vue2.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/LICENSE b/LICENSE deleted file mode 100644 index b2a6de6..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2020 Baidu EFE team - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md index ba1f8f6..71a9504 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,4 @@ -# veui/docs - -> VEUI 文档。 +# 文档服务 ## 本地安装 @@ -11,8 +9,6 @@ npm i npm run dev ``` -后在浏览访问 `http://localhost:3000` 即可。 - ## 文档编写 开发相关文档位于 `one/docs/development` 下。文档目录结构与网站的目录结构一致,新建 `.md` 文件后需要在 `one/docs/nav.json` 中新建相应的条目,作为目录配置。添加 `sub: true` 将缩进一个层级。 @@ -55,70 +51,5 @@ npm run dev 路径为 demo 文件相对于当前文档文件的路径。Demo 文件是一个 Vue 单文件组件,最后会将代码展示到文档中。可以编写多个 ` diff --git a/components/OneEditLink.vue b/components/OneEditLink.vue index 06dd862..691765d 100644 --- a/components/OneEditLink.vue +++ b/components/OneEditLink.vue @@ -1,110 +1,121 @@ diff --git a/components/OneFooter.vue b/components/OneFooter.vue index e8614e5..161f516 100644 --- a/components/OneFooter.vue +++ b/components/OneFooter.vue @@ -1,203 +1,190 @@ diff --git a/components/OneLive.vue b/components/OneLive.vue index 04ba1eb..728c2fc 100644 --- a/components/OneLive.vue +++ b/components/OneLive.vue @@ -1,78 +1,60 @@ diff --git a/components/OneMenu.vue b/components/OneMenu.vue index 4028e00..2b9965e 100644 --- a/components/OneMenu.vue +++ b/components/OneMenu.vue @@ -1,124 +1,95 @@ diff --git a/components/OneRepl.vue b/components/OneRepl.vue index 4882a71..07a9ee1 100644 --- a/components/OneRepl.vue +++ b/components/OneRepl.vue @@ -1,136 +1,134 @@ + diff --git a/env.js b/env.js new file mode 100644 index 0000000..3bc3239 --- /dev/null +++ b/env.js @@ -0,0 +1,4 @@ +export default { + app_name: '文档服务', + github_repo: 'http://10.1.23.40:8081/web/jhuan/jhuan-mes-pc-v2/', +} diff --git a/nuxt.config.js b/nuxt.config.js index 62a565a..5b7a12a 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -1,11 +1,11 @@ const path = require('path') const MonacoEditorPlugin = require('monaco-editor-webpack-plugin') -function resolve (p) { +function resolve(p) { return path.resolve(__dirname, p) } -function appendLoader (config, loader) { +function appendLoader(config, loader) { config.module.rules.push(loader) } @@ -17,29 +17,35 @@ module.exports = { * Headers of the page */ head: { - title: 'VEUI', + title: '', htmlAttrs: { lang: 'zh-Hans' }, - meta: [ - { charset: 'utf-8' }, - { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + meta: [{ + charset: 'utf-8' + }, + { + name: 'viewport', + content: 'width=device-width, initial-scale=1' + }, { hid: 'description', name: 'description', - content: 'Website for VEUI: an enterprise component library for Vue.js.' + content: '' }, { name: 'theme-color', content: '#0052cc' } ], - link: [{ rel: 'shortcut icon', href: 'https://www.baidu.com/favicon.ico' }] + // link: [{ rel: 'shortcut icon', href: 'https://www.baidu.com/favicon.ico' }] }, /** * Customize the progress bar color */ - loading: { color: '#0052cc' }, + loading: { + color: '#0052cc' + }, pageTransition: { css: false @@ -52,13 +58,27 @@ module.exports = { 'veui-theme-dls/' ], - plugins: [ - { src: '~plugins/global.js' }, - { src: '~plugins/hm.js', ssr: false }, - { src: '~plugins/i18n.js' }, - { src: '~plugins/l10n.js' }, - { src: '~plugins/target.js', ssr: false }, - { src: '~plugins/prism.js', ssr: false } + plugins: [{ + src: '~plugins/global.js' + }, + { + src: '~plugins/hm.js', + ssr: false + }, + { + src: '~plugins/i18n.js' + }, + { + src: '~plugins/l10n.js' + }, + { + src: '~plugins/target.js', + ssr: false + }, + { + src: '~plugins/prism.js', + ssr: false + } ], /** @@ -101,7 +121,7 @@ module.exports = { }) ], - extend (config) { + extend(config) { /** * veui-loader */ @@ -111,13 +131,11 @@ module.exports = { loader: 'veui-loader', options: { locale: ['zh-Hans', 'en-US'], - modules: [ - { - package: 'veui-theme-dls', - fileName: '{module}.js', - transform: false - } - ] + modules: [{ + package: 'veui-theme-dls', + fileName: '{module}.js', + transform: false + }] }, include: [resolve('pages'), resolve('node_modules/veui')] }) diff --git a/one/docs/advanced/custom-rules.md b/one/docs/advanced/custom-rules.md deleted file mode 100644 index d271eed..0000000 --- a/one/docs/advanced/custom-rules.md +++ /dev/null @@ -1,91 +0,0 @@ -# 自定义校验规则 - -对于多值校验,`Form` 组件的 [`validators`](../components/form#props-validators) 属性提供了比较完善的功能来实现自定义校验。对于单值校验,`Field` 组件内置了 7 种常见规则,具体参考其 [`rule`](../components/field#props-rule) 属性。如果无法覆盖需求,`VEUI` 校验规则模块允许你添加自定义规则。 - -## 示例 - -```js -import ruleManager from 'veui/managers/rule' -ruleManager.addRule('range', { - validate (value, ruleValue) { - // 仅实现大小校验部分 - let range = value.split('-') - return +range[0] >= ruleValue.floor && +range[1] <= ruleValue.ceil - }, - message: '范围值必须在限定区间内', - priority: 100 -}) -``` - -```vue - -``` - -## API - -| 名称 | 类型 | 描述 | -| -- | -- | -- | -| `validate` | `function(value: *, ruleValue: ?*=)` | 校验逻辑,`value` 为 `Field` 需要校验的值,`ruleValue` 可选,根据规则需要添加,表示规则的限定值。 | -| `message` | `function | string` | [^message] | -| `priority` | `number` | [^priority] | - -^^^message -默认出错信息。 - -若类型为 `string`,可以通过 `{ruleValue}` 引用 `ruleValue`、`{value}` 引用 `value`。例如: - -```js -let minLengthRule = { - validate (value, ruleValue) { - return !isEmpty(value) ? val.length >= ruleValue : true - }, - message: '字符长度不能短于 {ruleValue},当前长度 {value}', - priority: 100 -} -``` - -若类型为 `function`,参数为 `(ruleValue: ?*=, value: *)`。例如: - -```js -let minLengthRule = { - validate (value, ruleValue) { - return !isEmpty(value) ? val.length >= ruleValue : true - }, - message (ruleValue, value) { - return `字符长度不能短于${ruleValue},当前长度${value}` - }, - priority: 100 -} -``` - -:::tip -如果需要支持运行时切换语言,`message` 必须使用 `function` 类型。 -::: -^^^ - -^^^priority -规则优先级。数值低优先级高。 - -+++目前内置的优先级 -| 名称 | 优先级 | -| -- | -- | -- | -| `required` | `0` | -| `numeric` | `10` | -| `pattern` | `50` | -| `maxLength` | `100` | -| `minLength` | `100` | -| `max` | `200` | -| `min` | `200` | -+++ diff --git a/one/docs/advanced/global-config.md b/one/docs/advanced/global-config.md deleted file mode 100644 index 3aa538f..0000000 --- a/one/docs/advanced/global-config.md +++ /dev/null @@ -1,61 +0,0 @@ -# 全局配置 - -VEUI 中很多组件都定义了全局配置项,允许开发者在使用时全局配置某个组件的行为细节。 - -例如,`Uploader` 组件可以统一配置上传模式,用户可以根据项目前后端接口、需要支持浏览器版本的具体情况选择使用 iframe 回调方式还是 XHR2 方式传递数据,也可以统一配置远端数据格式的转换函数。 - -VEUI 全局配置项可以通过 `veui/managers/config` 模块进行覆盖: - -```js -import config from 'veui/managers/config' - -config.set('uploader.requestMode', 'iframe') -config.set('uploader.convertResponse', ({ code, error, result }) => { - /** - * Transform from - * - * { - * code: 0, - * error: '...', - * result: { - * url: '...' - * } - * } - * - * to - * - * { - * success: true, - * message: '...', - * src: '...' - * } - */ - return { - success: code === 0, - src: error ? null : result.url, - message: error || null - } -}) -``` - -如果需要一次修改同一个组件的多项设置,可以使用如下写法: - -```js -import config from 'veui/managers/config' - -config.set({ - requestMode: 'iframe', - convertResponse: data => data -}, 'uploader') -``` - -`config.set()` 方法参数可为如下形式: - -* `(key: string, value: *, namespace: string)` -* `(values: Object<{key: string, value: *}>, namespace: string)` - -当提供了 `namespace` 参数时,最终生成的配置项键名为 \`${namespace}.${key}\`。 - -除此以外,还提供了相同参数列表的 `config.defaults()` 方法,区别在于当需要在配置项中写入的键值已经存在,则不会覆盖。 - -每个组件、指令等支持的全局配置请查看对应组件、指令的详情页。 diff --git a/one/docs/advanced/overlay.md b/one/docs/advanced/overlay.md deleted file mode 100644 index 67aff40..0000000 --- a/one/docs/advanced/overlay.md +++ /dev/null @@ -1,124 +0,0 @@ -# 浮层管理 - -在 VEUI 中,有大量组件使用到了浮层功能: - -* 各种类型的弹框:[对话框](../components/dialog)、[警告弹框](../components/alert-box)等; -* [下拉选择](../components/select); -* …… - -针对这些组件,我们抽离了具备如下功能的浮层模块: - -* 能够浮于页面上所有普通元素之上; -* 能够进行层叠顺序管理; -* 能够基于指定元素定位。 - -## 层叠覆盖 - -为了避免浮层被上层 `overflow: hidden` 的元素意外遮盖,我们将浮层根元素直接置于 `` 下统一管理。 - -在[浮层组件](../components/overlay)中,`.veui-overlay-box` 对应了浮层根元素,该元素在组件初始化的时候,会被放置到 `` 之下,组件销毁的时候,会被移除掉。 - -## 层叠顺序管理 - -在将浮层根元素置于 `` 下后,原有的层级嵌套关系会丢失,同时也无法通过原生的层叠上下文机制来控制浮层的层叠顺序。比如: - -* 某个对话框组件 A 上有一个下拉选择组件 B,那么 B 组件浮层应该位于 A 组件浮层之上。 -* 警告框浮层应该位于普通对话框浮层之上。 - -基于上述限制,浮层模块实现了自己的层叠顺序管理机制。整个浮层层级嵌套关系,是通过一棵树来表达的: - - - -树中每一个蓝色节点都对应关联到具体的[浮层组件](../components/overlay)实例。针对上图,树的构造顺序可以是: - -1. 弹出“对话框 1”,创建一个“对话框 1”节点,根据节点权重信息创建一个分组,然后将分组挂在 root 节点之下。 -2. 弹出“对话框 2”,创建一个“对话框 2”节点,发现已经存在相同权重的分组,就直接将“对话框 2”节点放置在该分组的末尾位置。 -3. 在“对话框 2”中实例化一个“下拉选择 1”组件实例,由于“对话框 2”组件实例是“下拉选择 1”组件实例的父级,因此对应的浮层节点也应当具备父子关系,因此按照类似于“步骤 1”的顺序在“对话框 2”节点下生成分组及“下拉选择 1”节点。 -4. 此时由于程序运行出现了故障,弹出了“警告弹框 1”,由于“警告弹框”类型的组件相对于“对话框”组件具备更高的层级权重,因此在 root 之下新建了一个靠右的分组,并将生成的“警告弹框 1”节点置于分组末尾。 - -有了树之后,就会按照深度优先的遍历顺序生成每个节点的 `z-index` 值。 - -其中,基准 `z-index` 值可以通过全局配置对象进行配置: - -```js -import config from 'veui/managers/config' - -config.set('overlay.baseZIndex', 200) -``` - -:::warning -必须在[浮层组件](../components/overlay)引入之前设置基准 `z-index`,不然不会生效。 -::: - -可以针对组件类型,甚至组件实例粒度设置层叠优先级,层叠优先级值越大,最终生成的 `z-index` 值就越大。具有相同层叠优先级的同级组件实例,越靠后实例化的组件,生成的 `z-index` 值越大。 - -浮层组件、对话框组件、弹框组件等提供了 `priority` 属性,用于自定义组件实例的层叠优先级: - -```html - -``` - -一些比较特殊的组件,会提供基于组件类型粒度的层叠优先级配置: - -| 组件 | 配置字段 | 默认值 | 修改配置示例 | -| -- | -- | -- | -- | -| 警告弹框 | `alertbox.priority` | `100` | [^alert-box] | -| 确认弹框 | `confirmbox.priority` | `100` | [^confirm-box] | -| 输入弹框 | `promptbox.priority` | `100` | [^prompt-box] | - -^^^alert-box -```js -import config from 'veui/managers/config' - -config.set('alertbox.priority', 100) -``` -^^^ - -^^^confirm-box -```js -import config from 'veui/managers/config' - -config.set('confirmbox.priority', 100) -``` -^^^ - -^^^prompt-box -```js -import config from 'veui/managers/config' - -config.set('promptbox.priority', 100) -``` -^^^ - -总结起来,确定某个浮层系组件实例的层叠优先级的逻辑流程为: - -* 如果能够设置组件实例级别的层叠优先级,并且设置了,那么就使用这个层叠优先级值,否则进入下一步; -* 如果能够设置组件类型级别的层叠优先级,并且设置了,那么就使用这个层叠优先级值,否则进入下一步; -* 使用默认的层叠优先级值:`1`。 - -## 定位 - -VEUI 中,浮层支持两种定位方式: - -* 在页面范围内,以坐标值的形式进行定位; -* 相对于某个元素,指定偏移和变换规则进行定位。 - -以坐标方式定位时,需要自己写 CSS 进行控制(浮层模块内部只会生成浮层根元素的 `z-index` 值)。 - -相对元素定位时,可以通过[浮层组件](../components/overlay)的 `options` 属性描述偏移和变换规则。由于目前内部采用 [Popper.js](https://popper.js.org/docs/v1/) 实现,因此完整的配置项可以参考 [Popper.js 官网](https://popper.js.org/docs/v1/#popperdefaults--codeobjectcode)。 - -## 样式 - -由于浮层根元素被手动放置到 `` 元素之下了,要设置浮层内容的样式,就需要给浮层根元素指定 `class`。所有浮层系组件都支持 `overlay-class` 属性,通过该属性为浮层根元素设置 `class`: - -```vue -