improve(docs): Style for spec and blog

oceanbase · Sep 3, 2024 · 730a812 · 730a812
1 parent 43d65b6
commit 730a812
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 70 deletions.
diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx
@@ -182,7 +182,6 @@ const GlobalStyle: React.FC = () => {
         .markdown strong,
         .markdown b {
           font-weight: 500;
-          color: ${token.colorErrorText};
         }
 
         .markdown .dumi-default-source-code {

diff --git a/docs/blog/chart-classification-palette-design-guide.md b/docs/blog/chart-classification-palette-design-guide.md
@@ -101,7 +101,7 @@ OBCharts 色板设计的过程可以分为以下几个步骤：① 确定主题
 
 为了传递出科技、专业和可靠的感受，OceanBase 的 logo 确定了 3 个品牌色「橙」「蓝」「绿」，「蓝色」代表科技，「绿色」代表生活或生机，「橙色」代表希望和美好的未来。
 
-![1-最终确定版.jpg](https://mdn.alipayobjects.com/oceanbase_design/afts/img/44APQahoJX4AAAAAAAAAAAAADv3-AQBr/original)
+![1-最终确定版.jpg](https://mdn.alipayobjects.com/oceanbase_design/afts/img/o9ueQYIDjnkAAAAAAAAAAAAADv3-AQBr/original)
 
 OBUI 主题色是在 logo 品牌色的基础上做了微调，以便于适应工具产品的复杂场景。OBCharts 是 OBUI 生长出来的可视化图表，为了让图表和界面更好的融合，图表色板会采用 OBUI 的 3 个主题色。
 

diff --git a/docs/spec/chart-color.md b/docs/spec/chart-color.md
@@ -67,7 +67,7 @@ OB Charts 的颜色定义旨在传递 OceanBase科技且富有生机的品牌调
 
 基础色板共 10 色，当图例数量 <= 10 个时，使用基础色板，并按照色板顺序展示图表，色板参数如下：
 
-| 序号 | 颜色 | 名称 | 色值 | 色值 |
+| 序号 | 颜色 | 名称 | HEX 色值 | HSL 色值 |
 | --- | --- | --- | --- | --- |
 | 1 | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/kYiURIajuBYAAAAAAAAAAAAADv3-AQBr/original) | 蔚蓝色 | #3D88F2 | H:215 S:75 B:95 |
 | 2 | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/iDTDRpmJo8QAAAAAAAAAAAAADv3-AQBr/original) | 翡翠绿 | #41D9A6 | H:160 S:70 B:85 |
@@ -84,7 +84,7 @@ OB Charts 的颜色定义旨在传递 OceanBase科技且富有生机的品牌调
 
 图表中如果有超过 10 个图例的场景，则需要用到延伸色板，延伸色板共 20 色，是在基础色基础上调整 60% 不透明度的实色，穿插在基础色中使用，从而实现明暗交替；当图例数量 > 10 个时，需使用延伸色板，并按照色板顺序展示图表，色板参数如下：
 
-| 序号 | 颜色 | 名称 | 色值 | 色值 |
+| 序号 | 颜色 | 名称 | HEX 色值 | HSL 色值 |
 | --- | --- | --- | --- | --- |
 | 1 | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/egkJRL9xU3wAAAAAAAAAAAAADv3-AQBr/original) | 蔚蓝色 | #3D88F2 | H:215 S:75 B:95 |
 | 2 | ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/FlaZT5y4R_YAAAAAAAAAAAAADv3-AQBr/original) | 浅蔚蓝 | #8BB8F7 | H:215 S:44 B:97 |

diff --git a/docs/spec/navigation.md b/docs/spec/navigation.md
@@ -8,17 +8,17 @@ title: Navigation 导航
 
 ## 设计原则
 
-#### 清晰
+### 清晰
 
 明确告知用户当前所在位置与提供的内容，让用户不会在复杂的导航结构中迷失。
 
-#### 高效
+### 高效
 
 - 合理组织信息结构，避免过多的导航选项，提升用户查找效率。
 - 导航标签贴合用户认知，让用户可快速理解。
 - 提供便捷高效的导航操作路径，让用户3步之内可达。
 
-#### 可扩展
+### 可扩展
 
 考虑未来发展并提供扩展空间，为用户提供稳定的使用体验。
 
@@ -34,7 +34,7 @@ title: Navigation 导航
 4. 分隔线
 5. 文本标签
 
-#### 图标
+### 图标
 
 一级侧边导航图标为必要元素，二级及以上页面的侧边导航图标为可选元素，同一级导航图标风格需保持一致。
 
@@ -49,7 +49,7 @@ title: Navigation 导航
   </div>
 </div>
 
-#### 分隔线
+### 分隔线
 
 用于分隔产品功能的不同逻辑分组，当功能存在多层级嵌套关系时，分隔线则代表功能的一级分组。同一组功能菜单项建议不超过7个，超出时建议对菜单项进一步分组，降低记忆成本，提升检索效率。
 
@@ -64,7 +64,7 @@ title: Navigation 导航
   </div>
 </div>
 
-#### 文本标签
+### 文本标签
 
 菜单文本标签应尽量简洁，避免使用冗长或复杂的词语，菜单文案应由1~2个词组成，菜单项间彼此互斥，差异越明显用户决策越容易。
 
@@ -79,7 +79,7 @@ title: Navigation 导航
   </div>
 </div>
 
-#### 信息层级
+### 信息层级
 
 信息层级组织深度上建议不超过3级，尽可能让用户3步抵达目标对象。对于层级深且较为重要或高频的操作，建议提供快捷入口，提升操作效率。
 
@@ -96,21 +96,21 @@ title: Navigation 导航
 
 ## 导航类型
 
-#### 顶部导航
+### 顶部导航
 
 位于页面顶部，可展示产品全局性标识信息，并提供全局性的实用工具、服务和快捷操作，如通知、帮助、语言切换、用户信息等。
 
 ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/S21-Q6Xo4Y4AAAAAAAAAAAAADv3-AQBr/original)
 
-#### 侧边导航
+### 侧边导航
 
 侧边导航较顶部横向导航更灵活，易于向下扩展，且允许的文本标签长度较长，适合承载信息层级多、操作切换频率高的管理操作。根据使用形态可分为图标加文本标签式导航、文本标签式导航、图标式导航三种。
 
 侧边导航菜单项数量不限，可配合滚动条使用。菜单项按功能属性可划分成不同的功能组，不同功能组通过线条分隔，产品至少要有1个功能组。
 
 ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/dk18Q5eO-xcAAAAAAAAAAAAADv3-AQBr/original)
 
-#### 返回导航
+### 返回导航
 
 在标题前增加返回按钮，单击后返回进入前的页面，适用于信息结构较扁平的下钻场景。当信息层普遍是≥3级时，可结合面包屑一同使用，为用户提供更清晰的导航路径，同一产品内面包屑显示规则建议保持一致。
 
@@ -140,13 +140,13 @@ title: Navigation 导航
 
 提供产品中相关导航的最佳实践。
 
-#### 全局组合导航
+### 全局组合导航
 
 将顶部导航和侧边导航组合使用，通过顶部导航承载全局性的工具和服务，通过侧边导航承载产品核心功能架构，为产品后续发展提供高扩展性的导航框架。
 
 ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/GnlOTJ89t3YAAAAAAAAAAAAADv3-AQBr/original)
 
-#### 子站点下钻导航
+### 子站点下钻导航
 
 一种嵌入式子站点导航模式，进入子站点后，鼠标移入侧边图标导航可自动展开，便于用户快捷切换功能。常见的适用场景：
 
@@ -162,7 +162,7 @@ title: Navigation 导航
   </div>
 </div>
 
-#### 页面下钻导航
+### 页面下钻导航
 
 通过页标题返回导航，告知用户当前位置并提供便捷返回能力，适用于信息层级较浅的场景。
 

diff --git a/docs/spec/page-container.md b/docs/spec/page-container.md
@@ -23,7 +23,7 @@ title: PageContainer 页容器
 3. 页签
 4. 操作区
 
-#### 面包屑
+### 面包屑
 
 存在3级及以上的层级结构，并需要告知用户信息层级关系时可使用面包屑导航。L1 级别和L2级别默认不显示面包屑，建议下钻3级及以上时显示面包屑，同一产品内的面包屑显示规则需保持一致。
 
@@ -38,7 +38,7 @@ title: PageContainer 页容器
   </div>
 </div>
 
-#### 页标题
+### 页标题
 
 可承载页面标题、页面级的快捷操作及使用引导信息，如页面刷新、标题编辑、状态等。在页面下钻场景中，可在标题前增加 返回 箭头，承载导航功能。除编辑器等对空间诉求强、希望获得沉浸式编辑体验的特殊场景外，其它页面均需存在页标题。
 
@@ -53,7 +53,7 @@ title: PageContainer 页容器
   </div>
 </div>
 
-#### 页签
+### 页签
 
 存在多个子页面，且子页面存在需通过卡片形态区分不同信息区块时，可使用子页面页签。如各页签均为单卡片信息区块时，从提升信息内容整体性角度考虑，不建议使用页面级页签，建议使用区块级页签。
 
@@ -68,7 +68,7 @@ title: PageContainer 页容器
   </div>
 </div>
 
-#### 操作区
+### 操作区
 
 可承载数据筛选和页面级的操作，根据所属关系将操作区置于页面级操作区或子页面操作区中，两者不可同时存在。页头区需使用Large尺寸组件。
 
@@ -93,13 +93,13 @@ title: PageContainer 页容器
 2. 间距
 3. 卡片
 
-#### 间距
+### 间距
 
 内容距离页头需保留16px间距，内容卡片与内容区容器右、下、左间距均为24px，内容卡片之间间距为16px。
 
 ![image.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/F0F4RaJe9PIAAAAAAAAAAAAADv3-AQBr/original)
 
-#### 卡片投影
+### 卡片投影
 
 内容卡片需使用投影，以增强与内容区容器的空间距离，**默认使用一级投影样式**。
 

diff --git a/docs/spec/product-graphic.md b/docs/spec/product-graphic.md
@@ -10,11 +10,11 @@ title: Product graphic 产品缺省图
 
 ## 设计原则
 
-#### 品牌理念
+### 品牌理念
 
 通过情感化的品牌色彩，传达不同页面状态下的情绪，给予用户明确的反馈，确保在各种情况下都能保持专业度和用户互动性。蓝，黄，绿的配色则是继承于 OB 的品牌色。蓝色代表科技，寓意专业可靠，同时象征着生命之源-海洋。绿色代表生活，有了它的加入，可以为生活增添更多可能与生机。黄色代表未来，寓意对技术的不懈探索，象征更加美好的未来。![22.jpg](https://mdn.alipayobjects.com/oceanbase_design/afts/img/KtpxQK6e5T4AAAAAAAAAAAAADv3-AQBr/original)
 
-#### 设计方法
+### 设计方法
 
 OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮廓包裹插画，由品牌蓝及延展色组成单色图标，配合中性色，实现不同场景的层级区分。
 
@@ -70,7 +70,7 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮
   </div>
 </div>
 
-#### 圆角
+### 圆角
 
 正常情况下所有圆角统一为 2px 的倍数使用。只有在圆角特别小的情况下且 2px 圆角无法满足小圆角的诉求时，可将圆角设置成 1px 。
 
@@ -106,15 +106,15 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮
 3. 地面
 4. 底色
 
-#### 符号展示
+### 符号展示
 
 <div style="display: flex">
   <div>
-    <img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/P6QFTonopeUAAAAAAAAAAAAADv3-AQBr/original" />
+    <img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/isyNSp8sujYAAAAAAAAAAAAADv3-AQBr/original" />
     <div class="image-description">图标必须位于缺省图最上层</div>
   </div>
   <div>
-    <img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/my8QSYcrMboAAAAAAAAAAAAADv3-AQBr/original" />
+    <img src="https://mdn.alipayobjects.com/oceanbase_design/afts/img/dvyIR7rPeeUAAAAAAAAAAAAADv3-AQBr/original" />
     <div class="image-description">插画主体不能遮挡图标</div>
   </div>
 </div>
@@ -123,11 +123,11 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮
 
 在OB实际应用中，缺省图共分为三大类型，通过颜色和大小进行使用划分。
 
-#### 色彩缺省图
+### 色彩缺省图
 
 ![缺省图合集.jpg](https://mdn.alipayobjects.com/oceanbase_design/afts/img/58pJTpPL87AAAAAAAAAAAAAADv3-AQBr/original)
 
-##### 颜色规范
+#### 颜色规范
 
 插画主色为品牌蓝，可根据情况向上下延展一个色阶使用（占比60%-70%）；辅色为白色，根据情况向上延展两个色阶使用（占比30%-20%）；点缀色为橙色、红色（占比10%）。
 
@@ -147,7 +147,7 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮
   </div>
 </div>
 
-##### 无内容提示
+#### 无内容提示
 
 无内容提示的底色轮廓边界为176px\*176px，插画内容可超出轮廓范围，不可超出画板范围。
 
@@ -177,7 +177,7 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮
   </div>
 </div>
 
-##### 结果反馈
+#### 结果反馈
 
 底色轮廓尺寸为144px\*128px，图标外轮廓尺寸为176px\*176px，需在直径为88px-96px圆内绘制，两者重合后整体尺寸为160px\*144px。
 
@@ -211,7 +211,7 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮
   </div>
 </div>
 
-##### 暂无数据
+#### 暂无数据
 
 底色轮廓尺寸为 144px\*128px，图标外轮廓尺寸为 176px\*176px，需在直径为 88px-96px 圆内绘制，
 
@@ -247,7 +247,7 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮
   </div>
 </div>
 
-##### 新功能开通
+#### 新功能开通
 
 插画尺寸为176px\*112px，外轮廓无强制要求，使用矩形为外轮廓时，需保证圆角为18px。
 
@@ -267,11 +267,11 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮
   </div>
 </div>
 
-#### 单色缺省图
+### 单色缺省图
 
 ![缺省图规范2-63.jpg](https://mdn.alipayobjects.com/oceanbase_design/afts/img/Y1UIRJCjFnEAAAAAAAAAAAAADv3-AQBr/original)
 
-##### 颜色规范
+#### 颜色规范
 
 单色图标插画主色为品牌蓝【0181FD】（占比20-30%），点缀色为品牌蓝的延展色以及白色（占比70-80%）
 
@@ -286,7 +286,7 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮
   </div>
 </div>
 
-##### 绘制规范
+#### 绘制规范
 
 主体高度为 144px，主体宽度需在 144px - 120px 的范围内绘制；图标轮廓尺寸为 176px\*176px，需在直径为 88-96px 的圆内绘制。为保证缺省图插画，整体大小层级的视觉统一，建议绘制完成后根据实际情况需要 **等比缩放至 70% 左右** 大小使用。
 
@@ -320,11 +320,11 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮
   </div>
 </div>
 
-#### 中性色缺省图
+### 中性色缺省图
 
 ![缺省图规范2-64.jpg](https://mdn.alipayobjects.com/oceanbase_design/afts/img/UT-zRJLbDQoAAAAAAAAAAAAADv3-AQBr/original)
 
-##### 颜色规范
+#### 颜色规范
 
 图标主色为中性色「F8FAFE」，可根据情况向上延展两个色阶使用（占比90%），点缀色为品牌蓝以及白色（占比10%）。
 
@@ -339,7 +339,7 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮
   </div>
 </div>
 
-##### 绘制规范
+#### 绘制规范
 
 主体高度为 144px，主体宽度需在 140px-112px 的范围内绘制。为保证缺省图插画，整体大小层级的视觉统一，建议绘制完成后根据实际情况可 **等比缩放至 50% 左右** 大小使用。
 
@@ -365,23 +365,23 @@ OB 缺省图的差异与触感体现在物体颜色的划分上，使用外轮
   </div>
 </div>
 
-### 使用案例
+## 使用案例
 
 提供产品中相关缺省图的最佳实践。
 
-#### 色彩缺省图
+### 色彩缺省图
 
 在整个页面数据或内容为空时作为主视觉引导插图，为用户行为提供视觉指引。
 
-![截屏2024-08-06 14.30.59.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/FFijSpO_zLsAAAAAAAAAAAAADv3-AQBr/original)
+![截屏2024-08-06 14.30.59.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/aK9CT4xUXJIAAAAAAAAAAAAADv3-AQBr/original)
 
-#### 单色缺省图
+### 单色缺省图
 
 在需要对用户进行教育，新手引导时，作为品牌视觉元素，帮助用户聚焦任务场景。
 
 ![2 1 实例列表 创建完成引导@3x.png](https://mdn.alipayobjects.com/oceanbase_design/afts/img/0Ft4QIrM97wAAAAAAAAAAAAADv3-AQBr/original)
 
-#### 中性色缺省图
+### 中性色缺省图
 
 在次级下拉菜单数据或内容为空时，作为主要视觉元素，与用户进行交流。