* 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>
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 |
数据状态
无数据
无数据用 --
表述。
数据加载
数据加载用「骨架屏」表示。