mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
cbcfd38ca7
* build: try to use dumi as doc tool * docs: migrate demo structure to dumi way * refactor: use type export & import * docs: migrate demo previewer to dumi * docs: create empty layout & components * docs: apply custom rehype plugin * docs: create empty extra pages * docs: Add Banner component * chore: move theme tsconfig.json * docs: home page init * docs: migrate header (#37896) * docs: header * docs: update * docs: home init * clean up * test: fix site lint * chore: tsc ignore demo * chore: dumi demo migrate script * chore: cards * docs: home layout * docs: Update locale logic * docs: fix getLink logic * chore: fix ci (#37899) * chore: fix ci * ci: remove check-ts-demo * ci: preview build * test: ignore demo.tsx * chore: update script * test: update snapshot * test: update node and image test * chore: add .surgeignore * docs: layout providers (#37908) * docs: add components sidebar (#37923) * docs: sidebar * docs: update docs title * docs: update design doc * chore: code clean * docs: handle changelog page * docs: add title * docs: add subtitle * docs: active header nav * chore: code clean * docs: overview * chore: code clean * docs: update intl (#37918) * docs: update intl * chore: code clean * docs: update favicons * chore: update testPathIgnorePatterns * chore: code clean * chore: code clean * chore: copy 404.html (#37996) * docs: Home page theme picker * chore: Update migrate script * docs: home page update * docs: theme editor style * docs: theme lang * chore: update migrate.js * docs: fix demo (#38094) * chore: update migrate.js * docs: update md * docs: update demo * test: fix snapshot * chore: move debug to code attr in migrate script * chore: update md Co-authored-by: PeachScript <scdzwyxst@gmail.com> * feat: overview page * feat: Migrate `404` page (#38118) * feat: migrate IconSearch component (#37916) * feat<site/IconSearch>: copy IconDisplay from site to .dumi * feat<site/IconSearch>: change docs of icon * feat<site/IconSearch>: tweak * feat<site/IconSearch>: use useIntl instead of injectIntl * feat<site/IconSearch>: fix ts type error * feat<site/IconSearch>: use intl.formatMessage to render text * docs: Adjust home btn sizw * docs: Update doc * feat: v5 site overview page (#38131) * feat: site * fix: fix * feat: v5 site overview page * fix: fix path * fix: fix * fix: fix * docs: fix margin logic * feat: v5 site change-log page (#38137) * feat: v5 site change-log page (#38162) * docs: site redirect to home pag * docs: theme picker * docs: use react-intl from dumi (#38183) * docs: Theme Picker * docs: update dumi config * docs: home back fix * docs: picker colorful * docs: locale of it * docs: update components desc * docs: site of links * docs: update components list * docs: update desc * feat: Migrate `DemoWrapper` component (#38166) * feat: Migrate `DemoWrapper` component * feat: remove invalid comments and add comment for `key` prop * docs: FloatButton pure panel * chore: update demo * chore: update dumi config * Revert "chore: update demo" This reverts commit 028265d3ba5987df5f13c3e9d42cf76cb1812b2e. * chore: test logic adjust to support cnpm modules * chore: add locale alias * docs: /index to / * docs: add locale redirect head script * chore: adjust compact * docs: fix missing token * feat: compact switch * chore: code clean * docs: update home * docs: fix radius token * docs: hash of it * chore: adjust home page * docs: Add background map * docs: site theme bac logic * docs: avatar * docs: update logo color * docs: home banner * docs: adjust tour size * docs: purepanl update * docs: transfooter * docs: update banner gif * docs: content (#38361) * docs: title & EditButton * docs: content * chore: fix toc * docs: resource page * docs: transform resource data from hast * docs: filename & Resource Card * chore: enable prerender * chore: remove less * docs: toc style * chore: fix lint * docs: fix Layout page * docs: fix CP page * chore: update demos * docs: workaround for export dynamic html * chore: enable demo eslint * docs: table style * fix: header shadow * chore: update snapshot * fix: toc style * docs: add title * docs: Adjust site * feat: helmet * docs: site css * fix: description * feat: toc debug * docs: update config-provider * feat: use colorPanel * fix: colorPanel value * feat: anchor ink ball style * feat: apply theme editor * fix: code block style * chore: update demo * chore: fix lint * chore: code clean * chore: update snapshot * feat: ts2js * chore: description * docs: site ready for ssr includes: - move client render logic to useEffect in site theme - extract antd cssinjs to a single css file like bisheng - workaround to support react@18 pipeableStream for emotion * chore: bump testing lib * docs: font size of title * chore: remove react-sortable-hoc * chore: update snapshot * chore: update script Co-authored-by: PeachScript <scdzwyxst@gmail.com> Co-authored-by: MadCcc <1075746765@qq.com> Co-authored-by: zqran <uuxnet@gmail.com> Co-authored-by: TrickyPi <530257315@qq.com> Co-authored-by: lijianan <574980606@qq.com>
9.7 KiB
9.7 KiB
| group | type | order | title |
|---|---|---|---|
| 设计模式 | 全局规则 | 5 | 数据格式 |
设计目标
规范数据表达，保证直观准确一致地理解数据。
类型
数值
数值用来表示计量大小，可单独出现或搭配数字符号进行使用。
| 符号格式 | 如何使用及何时使用 | 例子 |
|---|---|---|
| 千分位 | 默认使用千分位帮助用户阅读。 | 123,220 |
| 计量单位 | 计量单位默认用小写字母。 | 123,220kg |
| 百分比 | 比例问题等。 | 12.32% |
| 正斜杠 | 用分数的形式表示事项进展。 | 12/30 |
位置排列：便于用户直观而又准确地读取数据，要做到一眼观定、简洁明了。在表格中，诸如金额、数量等数值分布排列时，通常采用“右对齐”方式，既方便用户快捷读取数据，还可以使用户进行纵向数据对比。
计量单位：在表格中，计量单位默认放在表头，并默认右对齐。
金额
**小写金额：**规范格式为「货币符号+数字」的格式，例如“CNY1,123.00"。 货币符号：表示货币种类的符号代码（货币符号表），分为字母和字符两种：
| 货币符号 | 如何使用及何时使用 | 例子 |
|---|---|---|
| 字符 | 以人民币为例，金额前带货币单位标志¥ |
¥123.00 |
| 字母 | 以人民币为例，推荐使用 CNY，CNY 为国际上通用的货币代码。 |
CNY123.00 |
**大写金额：**一般用于银行、公司或个人的重要结算凭证和各种交易票据，需要使用大写数字以确保数据无法涂改，规范格式为「货币名称+金额数字」。
**大额计量：**如果一个金额很大，那么数值中的“万”“亿”单位可采用汉字。如果一个数值很大，那么数值中的“万”“亿”单位可采用汉字。
日期时间
绝对时间
针对时间精确度要求较高的用户，强调信息发布的精确时间点，有回顾过去内容并通过绝对时间用来检索信息的诉求。
**日期格式：**可用如下标准化计法：
| 格式 | 如何使用及何时使用 | 例子 |
|---|---|---|
| 年、月、日 | 中国默认使用 yyyy-mm-dd 格式。（其它国家参考链接）。 |
2019-12-08 |
| 专用名词 | 含有月日的专用名词采用阿拉伯数字表示时，应采用间隔号 · 将月、日分开，并在数字前后加引号。 |
6.1 儿童节 |
| 日期范围 | 在日期或时间范围之间显示一个波浪号 （前后需要空格）。 | 2018-12-08 ～ 2019-12-07 |
时间格式：默认使用二十四小时制：
| 时间制 | 如何使用及何时使用 | 例子 |
|---|---|---|
| 二十四小时制 | 二十四小时时间格式 HH:mm:ss 。 |
14:08:00 |
| 十二小时制 | 十二小时时间格式 h:mm:ss 。 |
2:08:00 PM | 2:08:00 AM |
标准格式：日期与时间连在一起时，两者之间用「空格」隔开，如“2019-12-08 06:00:00”。
相对时间
时间的精确度对于用户并不十分重要，重要的是信息的即时性。在中后台中，相对时间一般用于消息、通知类功能，用户往往更关注于书面形式的时间单位，而不必去往前推算出发布的具体时间点。
| 时间 | 展示形式 |
|---|---|
| 1 分钟以内的时间 | 刚刚 |
| 1 小时以内的时间 | N 分钟前 |
| 24 小时以内的时间 | N 小时前 |
| 24 小时以外的时间 | 用 mm-dd HH:mm 的形式表示，即 12-08 08:00 |
| 超过一年的时间 | 用 yyyy-mm-dd HH:mm 的形式表示，即 2019-12-08 08:00 |
数字脱敏
数据脱敏是指对某些敏感信息通过脱敏规则进行数据变形，实现敏感隐私数据的可靠保护。此处给出的脱敏规则为通用产品规范，遇到数据安全性较强的业务场景，可根据业务场景自行调整。
全部脱敏
一般用于金额、时间等特别重要敏感的信息，需要对所有数字进行脱敏。数据用一个 *** 代替。
部分脱敏
一般用于需要部分信息进行识别的状况，只需要对部分信息进行脱敏处理，但数字真实位数保留。数据脱敏部分用 * 代替。
| 脱敏类型 | 如何使用 | 例子 |
|---|---|---|
| 姓名 | 两个字的姓名：显示第一个字符，后面的隐藏为 *。 |
仲* |
三个字及三个字以上的姓名：显示第一个字符和最后一个字符，中间字符为 *。 |
仲*妮 仲**妮 |
|
| 手机号码 | 保留手机号码前 3 位与后 4 位。 | 186 **** 1402 |
| 身份证号码 | 公民身份号码由六位地址码，八位出生日期码，三位顺序码和一位校验码组成。脱敏规则分为高、中、低级： 高级：保留前一位与后一位，其余 * 表示，仅能识别该人属于哪个地区。中级：保留前三位与后三位，其余 * 表示，仅能识别该人的省市与是男是女。低级：保留前六位与后四位，其余 * 表示，仅能识别该人的省市区与是男是女。 |
6*************2 213***********203 212912******2233 |
| 联系地址 | 保留省市区，后面的用 * 表述。 |
浙江省杭州市 西湖区 ***** |
| 邮箱 | 保留邮箱主机名与前三位字符，其余 * 表示。 |
123*******@163.com |
| 银行卡号码 | 银行卡号码由发卡行标识代码（六到十二位不等），个人账号标识（六到十二位不等），一位校验码组成。脱敏规则分为高、中、低级： 高级：保留后四位，其余 * 表示，仅能识别部份个人账号标识。中级：保留前六位与后四位，其余 * 表示，仅能识别发卡行与小部份个人账号标识。低级：保留前四位与后六位，其余 * 表示。仅能识别发卡行与大部份个人账号标识。 |
**********1208 620121****1208 620121****111208 |
数据状态
无数据
无数据用 -- 表述。
数据加载
数据加载用「骨架屏」表示。