diff --git a/.dumi/rehypePlugin.ts b/.dumi/rehypePlugin.ts index fdc1c25b0..6ec2792a9 100644 --- a/.dumi/rehypePlugin.ts +++ b/.dumi/rehypePlugin.ts @@ -63,12 +63,15 @@ function rehypeAntd(): UnifiedTransformer { if (!node.properties) return; node.properties.className ??= []; (node.properties.className as string[]).push('component-api-table'); + } else if (node.type === 'element' && (node.tagName === 'Link' || node.tagName === 'a')) { + const href = (node.properties?.href || node.properties?.to) as string; + // 外部链接新开标签页跳转 + if (href?.startsWith('http')) { + node.properties!.target = '_blank'; + } + // node.properties!.sourceType = tagName; + // node.tagName = 'LocaleLink'; } - // else if (node.type === 'element' && (node.tagName === 'Link' || node.tagName === 'a')) { - // const { tagName } = node; - // node.properties!.sourceType = tagName; - // node.tagName = 'LocaleLink'; - // } // else if (node.type === 'element' && node.tagName === 'video') { // node.tagName = 'VideoPlayer'; // } diff --git a/.dumi/theme/builtins/Caution.tsx b/.dumi/theme/builtins/Caution.tsx index 6fff34728..e3c57ad99 100644 --- a/.dumi/theme/builtins/Caution.tsx +++ b/.dumi/theme/builtins/Caution.tsx @@ -21,5 +21,5 @@ const useStyle = () => { export default function Caution({}: CautionProps) { const styles = useStyle(); - return Caution; + return
Caution
; } diff --git a/.dumi/theme/builtins/Do.tsx b/.dumi/theme/builtins/Do.tsx index fe76edd34..6df1b841a 100644 --- a/.dumi/theme/builtins/Do.tsx +++ b/.dumi/theme/builtins/Do.tsx @@ -21,5 +21,5 @@ const useStyle = () => { export default function Do({}: DoProps) { const styles = useStyle(); - return Do; + return
Do
; } diff --git a/.dumi/theme/builtins/Donot.tsx b/.dumi/theme/builtins/Donot.tsx index b73924f9b..4e89cdf4c 100644 --- a/.dumi/theme/builtins/Donot.tsx +++ b/.dumi/theme/builtins/Donot.tsx @@ -21,5 +21,5 @@ const useStyle = () => { export default function Do({}: DonotProps) { const styles = useStyle(); - return Don't; + return
Don't
; } diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx index 3b84f95b4..b233ea57f 100644 --- a/.dumi/theme/common/styles/Markdown.tsx +++ b/.dumi/theme/common/styles/Markdown.tsx @@ -23,15 +23,13 @@ const GlobalStyle: React.FC = () => { line-height: 1.5; } - // 非段落图片最大宽度: 100% - 32px .markdown img { - max-width: calc(100% - 32px); + max-width: 100%; max-height: 100%; } - // 段落图片最大宽度: 100% - .markdown p > img { - max-width: 100%; + .markdown > div[style^='display: flex'] { + gap: 32px; } // 暂时去掉段落图片的阴影 @@ -47,12 +45,10 @@ const GlobalStyle: React.FC = () => { .markdown .image-description { color: ${token.colorTextDescription}; - margin-right: 16px; } .markdown .image-description-center { color: ${token.colorTextDescription}; - margin-right: 16px; text-align: center; } @@ -186,6 +182,7 @@ const GlobalStyle: React.FC = () => { .markdown strong, .markdown b { font-weight: 500; + color: ${token.colorErrorText}; } .markdown .dumi-default-source-code { @@ -350,15 +347,15 @@ const GlobalStyle: React.FC = () => { font-weight: 500; white-space: nowrap; background: rgba(0, 0, 0, 0.02); - border-width: 1px 1px 2px; + border-width: 1px 1px 1px; } tbody tr { transition: all 0.3s; - &:hover { - background: rgba(60, 90, 100, 0.04); - } + // &:hover { + // background: rgba(60, 90, 100, 0.04); + // } } } @@ -373,7 +370,7 @@ const GlobalStyle: React.FC = () => { border-width: 0 1px; th { - border-width: 1px 0 2px; + border-width: 1px 0 1px; } td { diff --git a/docs/blog/chart-classification-palette-design-guide.md b/docs/blog/chart-classification-palette-design-guide.md index da71980ac..ba52a0d35 100644 --- a/docs/blog/chart-classification-palette-design-guide.md +++ b/docs/blog/chart-classification-palette-design-guide.md @@ -20,21 +20,16 @@ title: 图表分类色板设计方法 ### 常用配色方法 -常用的色环配色法，有「邻近色配色法」「对比色配色法」「互补色配色法」「分裂互补色」「三角配色」「四分配色」等等。:::tips +常用的色环配色法，有「邻近色配色法」「对比色配色法」「互补色配色法」「分裂互补色」「三角配色」「四分配色」等等。 - 邻近色：在色相环中，相差 15°的颜色为邻近色，凡在 60°范围内的颜色都属于邻近色的范围。邻近色之间往往是我中有你，你中有我，色彩之间比较和谐。 - 对比色：在色相环中，角度相差 120°-180°之间的色彩。 - 互补色：在色相环中成 180°角的两种颜色，互为补色，当这两种颜色彼此相邻放置时，它们会为这两种特定颜色创造最强烈的对比度。 -- 分裂互补色：也叫等腰三角形配色，以互补色为中心，左右15°- 60°区间内的颜色。::: +- 分裂互补色：也叫等腰三角形配色，以互补色为中心，左右15°- 60°区间内的颜色。 -
-
- -
-
- -
-
+![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/5-Z9QIRe6nsAAAAAAAAAAAAADv3-AQBr/original) + +![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/ZtKwRZNGQKMAAAAAAAAAAAAADv3-AQBr/original) 竞品的颜色色相会根据自身的业务特性和要传递的品牌调性选择合适的配色方法，除了「Grafana」是比较标准的邻近色配色，其他竞品没有严谨的规律可寻，但可以找到大致的配色方向，比如：「AntV」和「Tableau」更像是分裂互补色配色，「Echarts」更偏向于四分法配色。 @@ -42,9 +37,10 @@ title: 图表分类色板设计方法 配色方案除了设计师发挥自身的经验价值，还可以利用配色工具让方案更加科学，这里推荐给大家两个好用的配色工具，分别是[「Adobe Color」](https://color.adobe.com/zh/create/color-wheel)和[「Paletton」](http://paletton.com/#uid=703101kl6lPhAQkk2vSnjcbop3Ykm9lG3nsycJpjuWi1Sde2klzD09LrHgcwwq1NJuaXxkOmeQNQ7rAgfrX0m9T0Cn)。「Adobe Color」支持的配色方法很多，覆盖了上述所有配色方法，「Paletton」支持的方法相对基础，目前有邻近色、对比色和四分色三个配色模式，如：分裂互补色、三角配色等可以通过手动调节来完成。 -![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/n0GjRaGBMuYAAAAAAAAAAAAADv3-AQBr/original) - -Adobe Color 配色方法 +
+ +
Adobe Color 配色方法
+
## 图表配色原则 @@ -198,11 +194,13 @@ OBUI 主题色是在 logo 品牌色的基础上做了微调，以便于适应工
-
图2 +
图2
+
+
-橙红色与警告色相近，避免产生歧义，可将橙红色明度饱和度降低作为新的颜色（图3）；为了能拉开色彩差距，让色相分布更均匀，再插入了一个色相为320的颜色（图4），可得到完整色板。 +橙红色与警告色相近，避免产生歧义，可将橙红色明度饱和度降低作为新的颜色（图3）；为了能拉开色彩差距，让色相分布更均匀，再插入了一个色相为320的颜色（图4），可得到完整色板。 - +
图3
@@ -213,9 +211,10 @@ OBUI 主题色是在 logo 品牌色的基础上做了微调，以便于适应工
-![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/9_VNRJmASNIAAAAAAAAAAAAADv3-AQBr/original) - -完整色板 +
+ +
完整色板
+
### 可读性验证 @@ -223,17 +222,21 @@ OBUI 主题色是在 logo 品牌色的基础上做了微调，以便于适应工 通过工具 ColorLab 进行验证，在 LAB 色彩空间下，基本符合明暗交替原则。 -![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/Y2tpTKyEwaIAAAAAAAAAAAAADv3-AQBr/original) + #### 视障可读 符合明暗交替的原则，视障人群（色弱色盲人群）可辨别色板颜色。 -![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/bpNMSIQMNqMAAAAAAAAAAAAADv3-AQBr/original) - -1.普通人群视觉效果 - -2.色弱人群视觉效果 +
+
+ +
+
+
1.普通人群视觉效果
+
2.色弱人群视觉效果
+
+
#### 欧氏距离 @@ -250,35 +253,42 @@ OBUI 主题色是在 logo 品牌色的基础上做了微调，以便于适应工
+ +
+
+
+
+
+
+ +
-![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/QY9mToqPEAUAAAAAAAAAAAAADv3-AQBr/original) - -**参考文档** +## 参考文档 -Material 色彩与设计科学 +Material 色彩与设计科学 https://material.io/blog/science-of-color-design -Material 色彩体系 +Material 色彩体系 https://m3.material.io/styles/color/the-color-system/key-colors-tones -京东色彩构建 +京东色彩构建 https://www.uisdc.com/color-system -Adobe 调色板 +Adobe 调色板 https://color.adobe.com/zh/explore?page=7 -Paletton 配色工具 +Paletton 配色工具 http://paletton.com/#uid=54e1a0kr0pdobS5pLzuq+enoy6j -Tableau 博客 +Tableau 博客 https://www.tableau.com/blog/colors-upgrade-tableau-10-56782 -色相环比较 +色相环比较 http://www.handprint.com/HP/WCL/vismixmap.html#harris -色彩空间 +色彩空间 http://www.handprint.com/HP/WCL/color7.html#CIELAB -色彩体验 +色彩体验 http://www.handprint.com/CE/book.html diff --git a/docs/blog/chart-semantic-palette-design-guide.md b/docs/blog/chart-semantic-palette-design-guide.md index febcdd47a..a810e789a 100644 --- a/docs/blog/chart-semantic-palette-design-guide.md +++ b/docs/blog/chart-semantic-palette-design-guide.md @@ -22,13 +22,13 @@ title: 图表语义色板设计推导 由于 OBUI 功能色饱和度明度偏高，不适合用在图表中，因此将颜色的饱和度收敛至65-75范围内，使色彩更加柔和；中性色本身属于灰色范畴，不需要在此环节调整饱和度。 -![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/HjITR6ncSUkAAAAAAAAAAAAADv3-AQBr/original) + ## 生成色阶 将上述颜色作为基准色，用 ColorLab 工具生成10色色阶，可得出如下色板： -![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/GbdgQagxaNMAAAAAAAAAAAAADv3-AQBr/original) + ## 定义色板 @@ -39,12 +39,12 @@ title: 图表语义色板设计推导 | 语义色板 | 色值 | 名称 | 色号 | 语义 | 表达含义 | | --- | --- | --- | --- | --- | --- | | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/A1UUTqdajt0AAAAAAAAAAAAADv3-AQBr/original) | 9DAAC6 | 灰 | 4 | 中性的 | 表示：默认的、其他、剩余、失效的 | -| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/JF3UQLMU4z4AAAAAAAAAAAAADv3-AQBr/original) | 3983ED | 蓝 | 7 | | 表示：常规的、常态的、默认的 | +| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/JF3UQLMU4z4AAAAAAAAAAAAADv3-AQBr/original) | 3983ED | 蓝 | 7 | 中性的 | 表示：常规的、常态的、默认的 | | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/LJwkRqOXqckAAAAAAAAAAAAADv3-AQBr/original) | 42C79B | 绿 | 7 | 正向的 | 表示：成功的、安全的、可行的、可获得的 | | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/pspsSqsFZVwAAAAAAAAAAAAADv3-AQBr/original) | F9B048 | 黄 | 7 | 负向的 | 表示：提醒、注意、警示、低风险（严重等级 1） | -| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/MPigSIef6nEAAAAAAAAAAAAADv3-AQBr/original) | F97A3B | 橙 | 7 | | 表示：警告、严重、中风险（严重等级 2） | -| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/xbRkS4Dl-XoAAAAAAAAAAAAADv3-AQBr/original) | E5363B | 红 | 7 | | 表示：危险、失败、严重、错误（严重等级 3） | -| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/Q0JxTLe8LyIAAAAAAAAAAAAADv3-AQBr/original) | 89273F | 紫红 | 7 | | 表示：非常严重、高风险、停服（严重等级 4） | +| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/MPigSIef6nEAAAAAAAAAAAAADv3-AQBr/original) | F97A3B | 橙 | 7 | 负向的 | 表示：警告、严重、中风险（严重等级 2） | +| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/xbRkS4Dl-XoAAAAAAAAAAAAADv3-AQBr/original) | E5363B | 红 | 7 | 负向的 | 表示：危险、失败、严重、错误（严重等级 3） | +| ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/Q0JxTLe8LyIAAAAAAAAAAAAADv3-AQBr/original) | 89273F | 紫红 | 7 | 负向的 | 表示：非常严重、高风险、停服（严重等级 4） | ## 应用效果 @@ -53,23 +53,29 @@ title: 图表语义色板设计推导
-
兼容性概览
+
兼容性概览
+
+ +
-
慢 SQL 指标
+
慢 SQL 指标
-
资源水位
+
资源水位
+
+ +
-
备份任务状态
+
备份任务状态
-
迁移任务状态
+
迁移任务状态
@@ -78,21 +84,23 @@ title: 图表语义色板设计推导
-
异常数据点标记
+
异常数据点标记
-
异常检测标记
+
异常检测标记
-![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/KrdvS7IctOoAAAAAAAAAAAAADv3-AQBr/original) - -CPU 使用率 - -![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/wfgeSJlUTqMAAAAAAAAAAAAADv3-AQBr/original) +
+ +
CPU 使用率
+
-CPU 消耗比 +
+ +
CPU 消耗比
+