From 1bef077ccabb030593a22f35c7b05946a1966cb6 Mon Sep 17 00:00:00 2001 From: liuxy0551 Date: Wed, 19 Jun 2024 09:55:33 +0800 Subject: [PATCH] docs: markdown grammar --- components/breadcrumb/index.zh-CN.md | 6 ++++-- components/button/index.zh-CN.md | 4 +++- components/card/index.zh-CN.md | 10 ++++------ components/checkbox/index.zh-CN.md | 4 +++- components/collapse/index.zh-CN.md | 6 +++++- components/datepicker/index.zh-CN.md | 8 ++++---- components/dropdown/index.zh-CN.md | 2 +- components/input-number/index.zh-CN.md | 9 +++++---- components/input/index.zh-CN.md | 10 ++++++++-- components/notification/index.zh-CN.md | 9 ++++----- components/pagination/index.zh-CN.md | 3 ++- components/popover/index.zh-CN.md | 9 ++++++--- components/select/index.zh-CN.md | 3 ++- components/steps/index.zh-CN.md | 8 ++++++-- components/tab/index.zh-CN.md | 2 +- components/tag/index.zh-CN.md | 5 ++++- components/timepicker/index.zh-CN.md | 3 ++- components/tooltip/index.zh-CN.md | 9 ++++++--- components/tree/index.zh-CN.md | 3 ++- components/treeselect/index.zh-CN.md | 3 ++- package.json | 3 +++ 21 files changed, 77 insertions(+), 42 deletions(-) diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md index 693f9b65..dc82a7bf 100755 --- a/components/breadcrumb/index.zh-CN.md +++ b/components/breadcrumb/index.zh-CN.md @@ -9,10 +9,12 @@ subtitle: 面包屑 ## 设计规范 -面包屑文字大小 12px，当前页字体颜色#3D446E Regular，非当前页字体颜色为#8B8FA8 Regular，分隔符填充颜色为#B1B4C5，整体面包屑行高（文本行高）20px +- 面包屑文字大小 12px +- 当前页字体颜色#3D446E Regular，非当前页字体颜色为#8B8FA8 Regular +- 分隔符填充颜色为#B1B4C5，整体面包屑行高（文本行高）20px ## 何时使用 - 当系统拥有超过两级以上的层级结构时； - 当需要告知用户『你在哪里』时； -- 当需要向上导航的功能时。 \ No newline at end of file +- 当需要向上导航的功能时。 diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index 41801e67..2a3cf88a 100755 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -9,7 +9,9 @@ subtitle: 按钮 ## 设计规范 -按钮圆角半径统一为4px（常规尺寸）和2px（小尺寸），文字大小12px，左右上下居中对齐，左右间距固定16px（常规尺寸）和8px（小尺寸），宽度随着文字的长度变化而变化，高度分为32px（常规尺寸）和24px（小尺寸）两种。 +- 按钮圆角半径统一为 4px（常规尺寸）和 2px（小尺寸），文字大小 12px； +- 左右上下居中对齐，左右间距固定 16px（常规尺寸）和 8px（小尺寸）； +- 宽度随着文字的长度变化而变化，高度分为 32px（常规尺寸）和 24px（小尺寸）两种； ## API diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md index 480a8310..3e144955 100644 --- a/components/card/index.zh-CN.md +++ b/components/card/index.zh-CN.md @@ -15,14 +15,12 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg ## 设计规范 -卡片式列表的标题字体16px #3D446E 居左 Medium，副标题文本字体12px #8B8FA8 居左 Regular ; - -卡片背景填充#FFFFFF，边1px#EBECF0，圆角: 4px; - -典型卡片边1px#EAF0FC，投影 0px 2px 30px 0px #EAECF4; +- 卡片式列表的标题字体 16px #3D446E 居左 Medium，副标题文本字体 12px #8B8FA8 居左 Regular； +- 卡片背景填充 #FFFFFF，边 1px#EBECF0，圆角 4px； +- 典型卡片边 1px/#EAF0FC，投影 0px 2px 30px 0px #EAECF4； ## API |类名 |说明 |使用示例 | |---------|---------|---------| -|.dt-card-shadow | 设置典型卡片的边框和投影 | 典型卡片 | \ No newline at end of file +|.dt-card-shadow | 设置典型卡片的边框和投影 | 典型卡片 | diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md index 3d65ec5e..068d2ead 100644 --- a/components/checkbox/index.zh-CN.md +++ b/components/checkbox/index.zh-CN.md @@ -10,7 +10,9 @@ cols: 1 ## 设计规范 -- 复选框占位高度32px，上下间距6px,字体12px,行高20px，字体颜色#3D446E; 失效状态字体12px，字体颜色B1B4C5； +- 复选框占位高度32px，上下间距6px +- 字体12px，行高20px，字体颜色#3D446E； +- 失效状态字体12px，字体颜色B1B4C5； ## API diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index 3ba70d96..e32838c7 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -9,7 +9,11 @@ cols: 1 用于将复杂的内容区域分组和隐藏，可折叠或展开，默认可以展开多个面板，也可以只展开某几个面板。 ## 设计规范 -单列面板默认高度40px,一级面板背景色#FFFFFF，边框颜色1px/#EBECF0,字体颜色14px/#3D446E;二级面板距离边缘40px,背景色#F9F9FA，边框颜色1px/#EBECF0,字体颜色14px/#3D446E；里层内容背景色#FFFFFF，边框颜色1px/#EBECF0;边缘线之间重叠； + +- 单列面板默认高度 40px，一级面板背景色 #FFFFFF，边框颜色 1px/#EBECF0，字体颜色 14px/#3D446E； +- 二级面板距离边缘 40px，背景色 #F9F9FA，边框颜色 1px/#EBECF0，字体颜色 14px/#3D446E； +- 里层内容背景色 #FFFFFF，边框颜色 1px/#EBECF0； +- 边缘线之间重叠； ## API diff --git a/components/datepicker/index.zh-CN.md b/components/datepicker/index.zh-CN.md index be57a464..ff5d2fea 100755 --- a/components/datepicker/index.zh-CN.md +++ b/components/datepicker/index.zh-CN.md @@ -9,10 +9,10 @@ title: DatePicker ## 设计规范 -- 日期选择框常规高度为 32px ,小尺寸的高度为 24px ,边框颜色 #D8DAE2 , 填充色 #FFFFFF， 4px 圆角，提示字 12px，颜色 #B1B4C5 ,输入颜色 #3D446E ; -- hover状态边框颜色 #1D78FF ; -- 点击状态边框颜色 #005CE6，下划线 #005CE6，2px ; -- 禁用状态底色 #EBECF0，文字 #B1B4C5 ; +- 日期选择框常规高度为 32px，小尺寸的高度为 24px，边框颜色 #D8DAE2，填充色 #FFFFFF，4px 圆角，提示字 12px，颜色 #B1B4C5，输入颜色 #3D446E; +- hover状态边框颜色 #1D78FF； +- 点击状态边框颜色 #005CE6，下划线 #005CE6，2px； +- 禁用状态底色 #EBECF0，文字 #B1B4C5； ## API diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index d85f532e..77b1b35e 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -9,7 +9,7 @@ subtitle: 下拉菜单 ## 设计规范 -上下间距8px; +- 上下间距8px; ## 何时使用 diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md index 62d6ec61..708989f3 100644 --- a/components/input-number/index.zh-CN.md +++ b/components/input-number/index.zh-CN.md @@ -9,9 +9,10 @@ title: InputNumber ## 设计规范 -默认宽度100px，边框颜色#D8DAE2，4px圆角；hover 状态边框颜色#1D78FF；点击状态边框颜色#005CE6； - -前后缀单位背景#F9F9FA，边框#D8DAE2，左右边距16px，字体12px/#3D446E居中,默认宽度208px； +- 默认宽度 100px，边框颜色 #D8DAE2，4px 圆角； +- hover 状态边框颜色 #1D78FF； +- 点击状态边框颜色 #005CE6； +- 前后缀单位背景 #F9F9FA，边框 #D8DAE2，左右边距 16px，字体 12px/#3D446E 居中，默认宽度 208px； ## 何时使用 @@ -21,4 +22,4 @@ title: InputNumber |类名 |说明 |使用示例 | |---------|---------|---------| -|.dt-input-number-disabled | 禁用状态的颜色 | 禁用状态 | \ No newline at end of file +|.dt-input-number-disabled | 禁用状态的颜色 | 禁用状态 | diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md index 941170b8..5abd035e 100755 --- a/components/input/index.zh-CN.md +++ b/components/input/index.zh-CN.md @@ -11,11 +11,17 @@ title: Input #### 默认主题 -输入框常规高度为 32px，小尺寸的高度为 24px，边框颜色#D8DAE2，填充色#FFFFFF，4px 圆角; 提示文字 12px，颜色#B1B4C5，输入颜色#3D446E；hover 状态边框颜色#1D78FF；点击状态边框颜色#005CE6；禁用状态底色#EBECF0，文字#B1B4C5；错误样式边框颜色#F96C5B； +- 输入框常规高度为 32px，小尺寸的高度为 24px，边框颜色#D8DAE2，填充色#FFFFFF，4px 圆角； +- 提示文字 12px，颜色 #B1B4C5，输入颜色 #3D446E； +- hover 状态边框颜色#1D78FF； +- 点击状态边框颜色 #005CE6； +- 禁用状态底色 #EBECF0，文字 #B1B4C5； +- 错误样式边框颜色 #F96C5B； #### 暗黑主题 -输入框常规高度为 32px ,小尺寸的高度为 28px ,边框颜色 #2C3047 , 4px 圆角，提示字颜色 #666666 ,输入颜色 #BFBFBF ，宽度根据具体情况而定。 +- 输入框常规高度为 32px，小尺寸的高度为 28px，边框颜色 #2C3047，4px 圆角，宽度根据具体情况而定； +- 提示字颜色 #666666，输入颜色 #BFBFBF； ## API diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md index 2a2149be..cb1da7a0 100755 --- a/components/notification/index.zh-CN.md +++ b/components/notification/index.zh-CN.md @@ -9,11 +9,10 @@ title: Notification ## 设计规范 -弹窗标题字体 14px/#3D446E/居左 Medium，副文本内容 12/#8B8FA8/居左/Regular;提醒框在内容的基础上留有适当的边距，建议左右边距为 16px，上下边距 16px; - -背景#FFFFFF，投影#3D446E 20%，Y5px，模糊度 22 - -注意: 通知弹窗的宽度 360px。默认 4.5 秒后自动关闭 +- 弹窗标题字体 14px/#3D446E/居左 Medium，副文本内容 12/#8B8FA8/居左/Regular; +- 提醒框在内容的基础上留有适当的边距，建议左右边距为 16px，上下边距 16px; +- 背景#FFFFFF，投影#3D446E 20%，Y5px，模糊度 22; +- 注意: 通知弹窗的宽度 360px。默认 4.5 秒后自动关闭 ## 何时使用 diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md index c06a72ef..d257e9fd 100644 --- a/components/pagination/index.zh-CN.md +++ b/components/pagination/index.zh-CN.md @@ -8,7 +8,8 @@ cols: 1 ## 设计规范 -最多显示 5 页内容，当数量多时默认显示前 5 页以及最后 1 页。若选中的是中间的页数，则除了固定显示第 1 页和最后 1 页之外，显示以选中的页数为中间数，向前和向后各 2 页。 +- 最多显示 5 页内容，当数量多时默认显示前 5 页以及最后 1 页； +- 若选中的是中间的页数，则除了固定显示第 1 页和最后 1 页之外，显示已选中的页数为中间数，向前和向后各 2 页； ## API diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md index 831b30ad..b9002ca2 100644 --- a/components/popover/index.zh-CN.md +++ b/components/popover/index.zh-CN.md @@ -8,9 +8,12 @@ title: Popover -点击/鼠标移入元素，弹出气泡式的卡片浮层。 ## 设计规范 -标题字体大小14px，Medium，字体颜色#3D446E；辅助文本12px,字体颜色#8B8FA8；气泡框在内容的基础上留有适当的边距，建议左右边距为16px，上下边距16px; -气泡提示默认280，最长宽度为 400px。同一业务内建议采用统一的尺寸。 -背景#FFFFFF，投影#3D446E 20%，Y5px，模糊度22； + +- 标题字体大小 14px，Medium，字体颜色 #3D446E； +- 辅助文本 12px，字体颜色 #8B8FA8； +- 气泡框在内容的基础上留有适当的边距，建议左右边距为 16px，上下边距 16px； +- 气泡提示默认 280，最长宽度为 400px。同一业务内建议采用统一的尺寸； +- 背景 #FFFFFF，投影 #3D446E 20%，Y5px，模糊度 22； ## 何时使用 diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index aa40f04a..a419b1fa 100755 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -20,7 +20,8 @@ title: Select #### 暗黑主题 -下拉框常规高度为 32px，小尺寸的高度为 24px ,边框颜色 #2C3047 , 4px 圆角，提示字颜色 #666666 ,输入颜色 #BFBFBF ，宽度根据具体情况而定。 +- 下拉框常规高度为 32px，小尺寸的高度为 24px，边框颜色 #2C3047，4px 圆角，宽度根据具体情况而定； +- 提示字颜色 #666666，输入颜色 #BFBFBF； ## API diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md index c9fcdad2..41601a5b 100755 --- a/components/steps/index.zh-CN.md +++ b/components/steps/index.zh-CN.md @@ -10,9 +10,13 @@ subtitle: 标准导航步骤页 ## 设计规范 -标准导航步骤页分为步骤条头部、内容区域、尾部操作栏。 +标准导航步骤页分为步骤条头部、内容区域、尾部操作栏。其中: -其中，步骤条头部未处理流程底颜色为 `#EEEEEE`，正在处理流程底颜色为 `#3F87FF`，已处理流程底颜色为 `#FFFFFF`，内容区域和尾部操作栏底颜色 `#FAFAFA`，尾部操作栏高度为 56 px。 +- 步骤条头部未处理流程底颜色为 `#EEEEEE` +- 正在处理流程底颜色为 `#3F87FF` +- 已处理流程底颜色为 `#FFFFFF` +- 内容区域和尾部操作栏底颜色 `#FAFAFA` +- 尾部操作栏高度为 56 px。 ## API diff --git a/components/tab/index.zh-CN.md b/components/tab/index.zh-CN.md index 72e0d3f0..64782c5b 100644 --- a/components/tab/index.zh-CN.md +++ b/components/tab/index.zh-CN.md @@ -16,7 +16,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/lkI2hNEDr2V/Tabs.svg ## 设计规范 -每个标签文字最多 6 个字，标签数量最多 7 个，建议出现 4 个以内。 +- 每个标签文字最多 6 个字，标签数量最多 7 个，建议出现 4 个以内。 ## API diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md index d56ac3c7..6f9215da 100644 --- a/components/tag/index.zh-CN.md +++ b/components/tag/index.zh-CN.md @@ -10,7 +10,10 @@ cols: 1 用于标记事物的属性和维度 -边框#EBECF0，底色#F9F9FA，字号 12px,字体颜色#3D446E + +## 设计规范 + +- 边框 #EBECF0，底色 #F9F9FA，字号 12px，字体颜色 #3D446E； ## API diff --git a/components/timepicker/index.zh-CN.md b/components/timepicker/index.zh-CN.md index 15795614..568e2491 100755 --- a/components/timepicker/index.zh-CN.md +++ b/components/timepicker/index.zh-CN.md @@ -9,7 +9,8 @@ title: TimePicker ## 设计规范 -时间选择框常规高度为 32px ,小尺寸的高度为 24px ,边框颜色 #D8DAE2 , 4px 圆角，提示字颜色 #B1B4C5 ,输入颜色 #3D446E ，宽度根据具体情况而定。 +- 时间选择框常规高度为 32px，小尺寸的高度为 24px，边框颜色 #D8DAE2，4px 圆角，宽度根据具体情况而定； +- 提示字颜色 #B1B4C5，输入颜色 #3D446E； ## API diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md index 74d260ca..915ff3e3 100644 --- a/components/tooltip/index.zh-CN.md +++ b/components/tooltip/index.zh-CN.md @@ -9,8 +9,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg 鼠标悬停、聚焦或点击在某个组件时，弹出的文字提示。 ## 设计规范 -字体大小 12px，字体颜色#FFFFFF；提示框在内容的基础上留有适当的边距，建议左右边距为 8px，单行高度默认为 32px,上下边距 6px;同一业务内建议采用统一的尺寸。 -底色#000000，75%； + +- 字体大小 12px，字体颜色 #FFFFFF； +- 提示框在内容的基础上留有适当的边距，建议左右边距为 8px，单行高度默认为 32px，上下边距 6px； +- 底色 #000000，75%； +- 同一业务内建议采用统一的尺寸； ## 何时使用 @@ -20,4 +23,4 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg 注意： - 不要将完成任务所需的重要信息放在文字气泡内，重要的信息不应隐藏，应当始终直接展示在页面中； -- 文字气泡不应承载可交互的操作信息。当需要展示操作时，可考虑使用气泡卡片。 \ No newline at end of file +- 文字气泡不应承载可交互的操作信息。当需要展示操作时，可考虑使用气泡卡片。 diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index e8ca0fbb..52c7687c 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -9,4 +9,5 @@ subtitle: 树形控件 ## 何时使用 -文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用 `树控件` 可以完整展现其中的层级关系，并具有展开收起选择等交互功能。 +- 文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构； +- 使用 `树控件` 可以完整展现其中的层级关系，并具有展开收起选择等交互功能； diff --git a/components/treeselect/index.zh-CN.md b/components/treeselect/index.zh-CN.md index f4eb99ac..3462b52d 100755 --- a/components/treeselect/index.zh-CN.md +++ b/components/treeselect/index.zh-CN.md @@ -9,7 +9,8 @@ title: TreeSelect ## 设计规范 -树型选择控件。常规高度为 32px ,小尺寸的高度为 24px ,边框颜色 #D8DAE2 , 4px 圆角，提示字颜色 #B1B4C5 ,输入颜色 #3D446E ，宽度根据具体情况而定。 +- 树型选择控件。常规高度为 32px，小尺寸的高度为 24px，边框颜色 #D8DAE2，4px 圆角，宽度根据具体情况而定； +- 提示字颜色 #B1B4C5，输入颜色 #3D446E； ## API diff --git a/package.json b/package.json index f5b18a3a..2276ba14 100755 --- a/package.json +++ b/package.json @@ -70,5 +70,8 @@ }, "publishConfig": { "registry": "https://registry.npmjs.org/" + }, + "engines": { + "node": "<=16" } }