fix: fix site docs and format (#182)

* fix: fix route * docs: remove nosense docs * refactor: format code and docs * chore: update package script
antvis · Jan 8, 2025 · 600eb24 · 600eb24
1 parent f7a143c
commit 600eb24
Show file tree

Hide file tree

Showing 82 changed files with 1,102 additions and 1,673 deletions.
diff --git a/.dumi/pages/case/index.en.tsx b/.dumi/pages/case/index.en.tsx
@@ -1,8 +1,8 @@
-import Case from './index'
 import React from 'react';
+import Case from './index';
 
 const CaseIndex: React.FC = () => {
-  return <Case></Case>
+  return <Case></Case>;
 };
 
-export default CaseIndex
+export default CaseIndex;
diff --git a/.dumi/pages/case/index.tsx b/.dumi/pages/case/index.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
 import SEO from '@antv/dumi-theme-antv/dist/common/SEO';
-import ShowCase from 'site/components/ShowCase/ShowCase';
-import { useIntl, useLocale } from 'dumi';
-import { Header } from '@antv/dumi-theme-antv/dist/slots/Header';
 import { Footer } from '@antv/dumi-theme-antv/dist/slots/Footer';
+import { Header } from '@antv/dumi-theme-antv/dist/slots/Header';
+import { useIntl, useLocale } from 'dumi';
+import React from 'react';
+import ShowCase from 'site/components/ShowCase/ShowCase';
 
 const CaseIndex: React.FC = () => {
   const locale = useLocale();

diff --git a/.dumi/pages/quick/index.en.tsx b/.dumi/pages/quick/index.en.tsx
@@ -1,8 +1,8 @@
-import Case from './index'
 import React from 'react';
+import Case from './index';
 
 const QuickIssueIndex: React.FC = () => {
-  return <Case></Case>
+  return <Case></Case>;
 };
 
-export default QuickIssueIndex
+export default QuickIssueIndex;
diff --git a/.dumi/pages/quick/index.tsx b/.dumi/pages/quick/index.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
 import SEO from '@antv/dumi-theme-antv/dist/common/SEO';
-import { useIntl, useLocale } from 'dumi';
-import { Header } from '@antv/dumi-theme-antv/dist/slots/Header';
 import { Footer } from '@antv/dumi-theme-antv/dist/slots/Footer';
+import { Header } from '@antv/dumi-theme-antv/dist/slots/Header';
+import { useIntl, useLocale } from 'dumi';
+import React from 'react';
 import QuickIssue from 'site/components/quickIssue/QuickIssue';
 
 const QuickIssueIndex: React.FC = () => {

diff --git a/.dumi/theme/locales/en.json b/.dumi/theme/locales/en.json
@@ -329,11 +329,11 @@
   "邻近顺序色板，均基于分类色板生长而来，为加大辨识度也可使用邻近色相，通过明度或饱和度的渐变，常用来表示同一事物中的数值大小或梯度变化，如排行榜等级变化、一个国家或地区的新增人口数对比、风险等级变化等。": "Adjacent sequential color palette, all based on the growth of the classification color palette, in order to increase the recognition can also use adjacent colors, through the gradual change of brightness or saturation, commonly used to represent the value size or gradient change in the same thing, such as ranking change, comparison of the number of new population in a country or region, risk level change.",
   "点再到正向值的连续变化区间，显示相对立的两个值的大小关系，常用于气温的冷热、海拔高低、股票涨跌等。": "The continuous change interval from the point to the positive value shows the size relationship between the two opposite values, which is often used for the cold and hot temperature, altitude, stock rise and fall, etc.",
   "柱形图、饼图、关系图、地图、多维表格等260+丰富图表随心选用": "Column、Pie、Graph、Map、Dimensions Table and other 260+ rich chart choice at will.",
-  
+
   "设计语言与研发框架": "Design language and R&D framework",
   "资产一览，让你快速搭建网站应用": "Assets list, let you quickly build a website application.",
   "Ant Design / AntV 设计负责人": "Ant Design / AntV Design Leader",
   "地理空间数据": "For Geospacial Data",
   "267 全系 F 版": "F2、6、7",
   "蚂蚁企业级数据可视化解决方案，让人们在数据世界里获得视觉化思考能力": "Ant enterprise data visualization solutions, so that people in the data world to get the ability to think visually."
-}
+}
diff --git a/.dumi/theme/locales/zh.json b/.dumi/theme/locales/zh.json
@@ -328,4 +328,4 @@
   "地理空间数据": "地理空间数据",
   "267 全系 F 版": "267 全系 F 版",
   "蚂蚁企业级数据可视化解决方案，让人们在数据世界里获得视觉化思考能力": "蚂蚁企业级数据可视化解决方案，让人们在数据世界里获得视觉化思考能力"
-}
+}
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -1,32 +1,39 @@
 import { defineConfig } from 'dumi';
-import { repository, version, homepage } from './package.json';
+import { homepage, repository } from './package.json';
 export default defineConfig({
-  locales: [{ id: 'zh', name: '中文' }, { id: 'en', name: 'English' }],
-  favicons: ['https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7svFR6wkPMoAAAAAAAAAAAAADmJ7AQ/original'], // 网站 favicon
-  metas: [                                                              // 自定义 meta 标签  
+  locales: [
+    { id: 'zh', name: '中文' },
+    { id: 'en', name: 'English' },
+  ],
+  favicons: [
+    'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7svFR6wkPMoAAAAAAAAAAAAADmJ7AQ/original',
+  ], // 网站 favicon
+  metas: [
+    // 自定义 meta 标签
     { name: 'keywords', content: 'AntV' },
     { name: 'description', content: 'Ant Visualization solution' },
   ],
   themeConfig: {
     title: 'AntV',
     description: 'Ant Visualization solution',
-    defaultLanguage: 'zh',                                              // 默认语言
-    isAntVSite: true,                                                   // 是否是 AntV 的大官网
+    defaultLanguage: 'zh', // 默认语言
+    isAntVSite: true, // 是否是 AntV 的大官网
     footerTheme: 'light',
-    siteUrl: homepage,                                     // 官网地址
-    githubUrl: repository.url,                                          // GitHub 地址
-    showSearch: true,                                                   // 是否显示搜索框
-    showGithubCorner: true,                                             // 是否显示头部的 GitHub icon
-    showAntVProductsCard: true,                                         // 是否显示 AntV 产品汇总的卡片
-    showLanguageSwitcher: true,                                         // 是否显示官网语言切换
-    showWxQrcode: true,                                                 // 是否显示头部菜单的微信公众号
-    docsearchOptions: {                                                 // 头部搜索框配置
+    siteUrl: homepage, // 官网地址
+    githubUrl: repository.url, // GitHub 地址
+    showSearch: true, // 是否显示搜索框
+    showGithubCorner: true, // 是否显示头部的 GitHub icon
+    showAntVProductsCard: true, // 是否显示 AntV 产品汇总的卡片
+    showLanguageSwitcher: true, // 是否显示官网语言切换
+    showWxQrcode: true, // 是否显示头部菜单的微信公众号
+    docsearchOptions: {
+      // 头部搜索框配置
       apiKey: '9d1cd586972bb492b7b41b13a949ef30',
       indexName: 'antv_g6',
     },
     navs: [
       {
-        slug: 'docs/specification',
+        slug: 'docs/specification/principles/basic',
         title: {
           zh: '设计语言',
           en: 'Design',
@@ -43,12 +50,12 @@ export default defineConfig({
         slug: 'quick',
         title: {
           zh: '提交 Issue',
-          en: 'Quick Issue'
-        }
-      }
+          en: 'Quick Issue',
+        },
+      },
     ],
-    ecosystems: [                                                       // 头部的菜单中的「周边生态」
-
+    ecosystems: [
+      // 头部的菜单中的「周边生态」
     ],
     docs: [
       {
@@ -118,8 +125,7 @@ export default defineConfig({
         order: 1,
       },
     ],
-    examples: [
-    ],
+    examples: [],
     mdPlayground: {
       // 第一个分块的大小
       splitPaneMainSize: '62%',
@@ -152,8 +158,6 @@ export default defineConfig({
     // 百度统计的 key
     // baidu: 'baidu_tongji_key',
   },
-  links: [
-  ],
-  scripts: [
-  ],
+  links: [],
+  scripts: [],
 });
diff --git a/docs/specification/language/basic.en.md b/docs/specification/language/basic.en.md
@@ -3,4 +3,4 @@ title: Visual
 order: 0
 ---
 
-<embed src="@/docs/specification/language/basic.zh.md"></embed>
+<embed src="./basic.zh.md"></embed>
diff --git a/docs/specification/language/interact.en.md b/docs/specification/language/interact.en.md
@@ -3,4 +3,4 @@ title: Interact
 order: 2
 ---
 
-<embed src="@/docs/specification/language/interact.zh.md"></embed>
+<embed src="./interact.zh.md"></embed>
diff --git a/docs/specification/language/interact.zh.md b/docs/specification/language/interact.zh.md
@@ -11,11 +11,9 @@ Shneiderman [1] 提出了经典的可视化信息交互策略：概览、缩放
 
 经过业务的实践和沉淀，AntV 从用户视角出发，按照用户的目标和行为对可视化交互进行梳理。我们发现用户在进行可视化数据分析时，通常会经历三个步骤，分别为「看数-分析-洞察」。
 
-**看数：** 主要指用户获取数据并初步可视化加工和阅读查看的行为。
-**分析：** 主要指用户对数据进行调整，从更多角度进行看数的行为。
-**洞察：** 主要指用户通过交互强化洞见，并对结果进行流转的行为。
+**看数：** 主要指用户获取数据并初步可视化加工和阅读查看的行为。 **分析：** 主要指用户对数据进行调整，从更多角度进行看数的行为。 **洞察：** 主要指用户通过交互强化洞见，并对结果进行流转的行为。
 
-基于更多的业务调研和桌面调研，我们总结出常见的24类可视化交互，这是我们从用户视角出发的最全归纳。
+基于更多的业务调研和桌面调研，我们总结出常见的 24 类可视化交互，这是我们从用户视角出发的最全归纳。
 
 <img src='https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7_pEQayJZzYAAAAAAAAAAAAADmJ7AQ/original' alt='' />
 
@@ -53,24 +51,24 @@ AntV 5.0 的设计价目标是让用户更有信任感、轻松感和意义感
 
 除了少思考和少操作以外，我们建议可以提供类似右键菜单的能力，让用户产生分析意图时即可所见即所得的获取分析工具，并对对象快速进行分析探索。
 
-### 意义感 
+### 意义感
 
 增强分析的能力，让用户更易洞察。
 
 <img src='https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*BaTcRKwYhTYAAAAAAAAAAAAADmJ7AQ/original' alt='' />
 
-用户在分析探索时，适时的画龙点睛之笔可以让洞察更直观的展现在分析者面前，一条辅助线和一块参考区间便可以快速的将机会点或者风险点清晰的暴露出来。但是如果这个时候如果用户需要填写复杂的表单才能记录自己的洞察，那么在复杂的操作间，灵感可能会稍纵即逝。
-我们建议为用户匹配更直观的交互语言，让用户抓住时机，快速沉淀洞察记录观点。如上图：用户在标注辅助线时原需要填写复杂的表单才能完成诉求，如果我们支持用直接长按坐标轴X即可添加辅助线，那么用户将获得更自由的交互体验，洞察也可被更快获取。
+用户在分析探索时，适时的画龙点睛之笔可以让洞察更直观的展现在分析者面前，一条辅助线和一块参考区间便可以快速的将机会点或者风险点清晰的暴露出来。但是如果这个时候如果用户需要填写复杂的表单才能记录自己的洞察，那么在复杂的操作间，灵感可能会稍纵即逝。我们建议为用户匹配更直观的交互语言，让用户抓住时机，快速沉淀洞察记录观点。如上图：用户在标注辅助线时原需要填写复杂的表单才能完成诉求，如果我们支持用直接长按坐标轴 X 即可添加辅助线，那么用户将获得更自由的交互体验，洞察也可被更快获取。
 
 &nbsp;
+
 ## 03 设计策略
 
-带着上面三个目标，我们对24种常见交互进行了设计迭代，沉淀了9+设计策略和20+设计案例，且会持续更新。
-本篇将对每个策略挑选一个案例进行简单说明。
+带着上面三个目标，我们对 24 种常见交互进行了设计迭代，沉淀了 9+设计策略和 20+设计案例，且会持续更新。本篇将对每个策略挑选一个案例进行简单说明。
 
 <img src='https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eyBiQKJ1gNUAAAAAAAAAAAAADmJ7AQ/original' alt='' />
 
 &nbsp;
+
 ### 信任感
 
 #### 👀 有前馈
@@ -122,7 +120,7 @@ AntV 5.0 的设计价目标是让用户更有信任感、轻松感和意义感
 <img src='https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ZEPRSb71URgAAAAAAAAAAAAADmJ7AQ/original' alt='' />
 &nbsp;
 
-更多设计案例和设计Tips可查看： <a href='https://www.yuque.com/antv/operation/lb0y0d6umtqay0ow'>AntV 交互设计工具箱</a>
+更多设计案例和设计 Tips 可查看： <a href='https://www.yuque.com/antv/operation/lb0y0d6umtqay0ow'>AntV 交互设计工具箱</a>
 
 &nbsp;
 
@@ -146,6 +144,7 @@ AntV 5.0 的设计价目标是让用户更有信任感、轻松感和意义感
 </table>
 
 &nbsp;
+
 ### 分析
 
 <table style="border: none;">
@@ -176,6 +175,7 @@ AntV 5.0 的设计价目标是让用户更有信任感、轻松感和意义感
 </table>
 
 &nbsp;
+
 ### 洞察
 
 <table style="border: none;">
@@ -189,9 +189,4 @@ AntV 5.0 的设计价目标是让用户更有信任感、轻松感和意义感
 
 ## 参考文献
 
-[1] Schneiderman B. The eyes have it: a task by data type taxonomy forinformation\visualizations[J]. Craft of Information Visualization, 1996:364-371.
-[2] Dix, Alan, Ellis, Geoffrey. Starting simple: adding value to static visualisation throughsimple interaction[J]. 1998.
-[3]李洪海，齐兵．界面设计中交互行为的分类［J］．艺术与设计：理论，2013（11）：119-121．
-[4]Landesberger T V, Fiebig S, Bremm S, et al. Interaction Taxonomy for Tracking of UserActions in Visual Analytics Applications[J]. 2014:653-670.
-[5] Gotz D, Zhou M X. Characterizing users' visual analytic activity for insightprovenance[C]// IEEE Symposium on Visual Analytics Science & Technology. 2008.
-[6]:Donald A.Norman.《设计心理学1》[M]．
+[1] Schneiderman B. The eyes have it: a task by data type taxonomy forinformation\visualizations[J]. Craft of Information Visualization, 1996:364-371. [2] Dix, Alan, Ellis, Geoffrey. Starting simple: adding value to static visualisation throughsimple interaction[J]. 1998. [3]李洪海，齐兵．界面设计中交互行为的分类［J］．艺术与设计：理论，2013（11）：119-121． [4]Landesberger T V, Fiebig S, Bremm S, et al. Interaction Taxonomy for Tracking of UserActions in Visual Analytics Applications[J]. 2014:653-670. [5] Gotz D, Zhou M X. Characterizing users' visual analytic activity for insightprovenance[C]// IEEE Symposium on Visual Analytics Science & Technology. 2008. [6]:Donald A.Norman.《设计心理学 1》[M]．
diff --git a/docs/specification/language/media.en.md b/docs/specification/language/media.en.md
@@ -3,89 +3,4 @@ title: Media
 order: 3
 ---
 
-## 为什么需要响应式
-
-数据可视化始终面对无限（海量）数据与有限屏幕空间的冲突，如何解决不同端、不同屏幕尺寸下内容的适配问题，在有限的空间内帮助用户更快地理解信息和获取洞见，是我们一直致力研究的问题。如果可视化图表缺少合适的布局方案，看似美好的设计稿，在灌入未知体量的数据或者改变尺寸时会变得惨不忍睹。
-
-![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*J33ZRbJy4swAAAAAAAAAAAAAARQnAQ)
-
-## 挑战
-
-- 图表本身构成复杂；
-- 数据体量不可预知；
-- 设计者对显示的不足做点状修补，无法给出体系化的解决方案；
-- 开发者欠缺专业的可视化知识；
-- 开发者依赖底层组件能力，无法二次改造。
-
-## 如何解决
-
-### 信息响应原则
-
-- **宏观：**保证核心信息优先展示，体现数据主要特征。
-
-折线图展现趋势和变化，柱形图展现排名和分布，饼图展示占比。
-
-- **微观：**空间有限时，体现主要信息，保留图形特征。
-
-所有尺寸下细节信息都能通过交互获取到。
-
-### 对应技术方案
-
-数据可视化的响应式设计包括“响应式”与“自适应”
-
-- Responsive design 响应式：缩放图表其结构和外观保持不变，能适应显示区域。
-- Adaptive design 自适应：根据显示区域调整图表的结构和外观，如图表布局、信息密度、交互方式等。
-
-![111.gif](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*kI7lQqlScEAAAAAAAAAAAAAAARQnAQ)
-
-## 设计流程
-
-不同于传统的 UI 组件，图表的多端适配显示既要考虑报表的整体与页面其他元素/图表的响应式布局，也要考虑图表内组件之间的自适应布局。在 Ant Design 的可视化体系中，我们自研出一套适用于全量图表的布局适应规则，从整体图表、图表内原子组件梳理了适用于所有图表的布局适应体系，设计流程如下图：
-
-![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*QbsmSp_lWIAAAAAAAAAAAAAAARQnAQ)
-
-### 1.定义经典布局
-
-考虑到信息展现地尽量完整和美观，图表的布局规则会相对灵活和细致。同时，PC 端，移动端和大屏，不同端的交互方式也要求图表的组件做到相应的转换和适配。
-
-作为开始，我们可以针对图表，找到最频繁显示图表的屏幕尺寸。如 PC 端一行放三个图表，560px 的宽度，和移动端一行放一个图表，350px 的宽度。本示例中还包含了极小尺寸下的迷你布局。
-
-对三种尺寸的图表（PC、Mobile、Mini），分别定义经典布局。
-
-![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*yrLpSLLqDpUAAAAAAAAAAAAAARQnAQ)
-
-### 2. 拆解构成
-
-取单个经典布局，拆解为图表组件级的构成。如下图，统计图表 Chart&Plot 可以拆解为 Title，Toolbar，Axes，Element，Label，InfoComponent-legend，Guideline 等。之后我们将对每个图表组件、以及组件之间的关系为切入点，约束布局。
-
-![视觉-平面构成.jpg](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*PAoUTJTT6BgAAAAAAAAAAAAAARQnAQ)
-
-### 3. 确定信息优先级
-
-![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*UAXeQJbDyrkAAAAAAAAAAAAAARQnAQ)
-
-### 4. 明确约束条件
-
-**外部约束：**包含屏幕尺寸和设备属性。前者可拆解出断点范围，后者进一步约束了交互状态。
-
-**内部约束：**包含组件所在的大小，组件内元素个数和间距。
-
-![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*CdDuRpbruiUAAAAAAAAAAAAAARQnAQ)
-
-![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*83S4RrimvY0AAAAAAAAAAAAAARQnAQ)
-
-### 5. 采取响应策略
-
-其中，省略、换行、旋转、抽样，依赖于数据属性。转化方式依赖于设备的限制。
-
-![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*A29USbqd4LkAAAAAAAAAAAAAARQnAQ)
-
-### 6. 布局适应规则
-
-![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*ooAbTblu2YEAAAAAAAAAAAAAARQnAQ)
-
-##
-
-## 案例
-
-![image.png](https://gw.alipayobjects.com/mdn/rms_a8a5bf/afts/img/A*HU3-TYt4628AAAAAAAAAAAAAARQnAQ)
+<embed src="./media.zh.md"></embed>
diff --git a/docs/specification/language/palette.en.md b/docs/specification/language/palette.en.md
@@ -3,4 +3,4 @@ title: Color Palette
 order: 1
 ---
 
-<embed src="@/docs/specification/language/palette.zh.md"></embed>
+<embed src="./palette.zh.md"></embed>