ant-design/docs/spec/data-format.zh-CN.md
二货爱吃白萝卜 cbcfd38ca7
docs: v5 site upgrade (#38328)
* 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 028265d3ba.

* 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>
2022-11-09 12:28:04 +08:00

9.7 KiB
Raw Blame History

group type order title
设计模式 全局规则 5 数据格式

设计目标

规范数据表达,保证直观准确一致地理解数据。

类型

数值

数值用来表示计量大小,可单独出现或搭配数字符号进行使用。

符号格式 如何使用及何时使用 例子
千分位 默认使用千分位帮助用户阅读。 123,220
计量单位 计量单位默认用小写字母。 123,220kg
百分比 比例问题等。 12.32%
正斜杠 用分数的形式表示事项进展。 12/30

推荐示例 不推荐示例

位置排列:便于用户直观而又准确地读取数据,要做到一眼观定、简洁明了。在表格中,诸如金额、数量等数值分布排列时,通常采用“右对齐”方式,既方便用户快捷读取数据,还可以使用户进行纵向数据对比。


推荐示例 不推荐示例

计量单位:在表格中,计量单位默认放在表头,并默认右对齐。

金额

**小写金额:**规范格式为「货币符号+数字」的格式例如“CNY1,123.00"。 货币符号:表示货币种类的符号代码(货币符号表),分为字母和字符两种:

货币符号 如何使用及何时使用 例子
字符 以人民币为例,金额前带货币单位标志¥ ¥123.00
字母 以人民币为例,推荐使用 CNYCNY 为国际上通用的货币代码。 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

数据状态

无数据

推荐示例 不推荐示例

无数据用 -- 表述。

数据加载

数据加载用「骨架屏」表示。

参考文档