fix(website): Fixed the Roadmap module(stoneatom#1255)

- Fixed the Roadmap style error on the home page - Fixed Roadmap issue where the Chinese page could not locate the latest R&D block - Other style optimization
konghaiya · Mar 7, 2023 · 0f32d5e · 0f32d5e
1 parent 2bcc7b0
commit 0f32d5e
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 17 deletions.
diff --git a/...ent-docs/current/02-getting-started/quick-deployment/deploy-stonedb-with-deb.md b/...ent-docs/current/02-getting-started/quick-deployment/deploy-stonedb-with-deb.md
@@ -3,7 +3,7 @@ id: deploy-stonedb-with-deb
 sidebar_position: 3.14
 ---
 
-# **Ubuntu 20 下通过 DEB 包部署 StoneDB**
+# Ubuntu 20 下通过 DEB 包部署 StoneDB
 
 ## 步骤 1：安装 StoneDB
 1. 下载 StoneDB 软件包。您可以通过以下两种方式进行下载：

diff --git a/...ent-docs/current/02-getting-started/quick-deployment/deploy-stonedb-with-tar.md b/...ent-docs/current/02-getting-started/quick-deployment/deploy-stonedb-with-tar.md
@@ -3,7 +3,7 @@ id: deploy-stonedb-with-tar
 sidebar_position: 3.13
 ---
 
-# **使用 TAR 包快速部署 StoneDB**
+# 使用 TAR 包快速部署 StoneDB
 
 ## 步骤 1：安装 StoneDB
 1. 下载 StoneDB 软件包。

diff --git a/website/i18n/zh/docusaurus-plugin-content-pages/index.md b/website/i18n/zh/docusaurus-plugin-content-pages/index.md
@@ -79,22 +79,22 @@ StoneDB for MySQL
                 - 减少企业的TCO成本，人人皆可获得低成本的数据服务。
 ```
 
-```custom-roadMap 2023 年 01 月 15 日
+```custom-roadMap 2023-01-15
 - Roadmap
     - StoneDB_5.6_v1.0.0
         1. 一体化行列混存+内存计算架构
         2. 基于代价的智能HTAP查询引擎
         3. 智能压缩技术
-        - 2022 年 6 月 29 日
+        - 2022-06-29
     - StoneDB_5.7_v1.0.0
         - 适配 MySQL 5.7
-        - 2022 年 8 月 31 日
+        - 2022-08-31
     - StoneDB_5.7_v1.0.1
         1. 提升TPC-H中8个慢SQL
         2. 优化查询模块
         3. 增加 delete 功能
         4. 增加 binlog 复制，支持 row 格式
-        - 2022 年 10 月 24 日
+        - 2022-10-24
     - StoneDB_5.7_v1.0.2
         1. 支持自定义函数。
         2. 支持转义功能。
@@ -106,29 +106,29 @@ StoneDB for MySQL
         6. 支持 replace into 功能。
         7. 支持(语法上)支持unsigned 和zerofill。
         8. sql_mode增加强制Tianmu引擎参数：MANDATORY_TIANMU。
-        - 2023 年 01 月 15 日
+        - 2023-01-15
     - StoneDB_5.7_v1.0.3
         1. 主备集群能力增强
         2. 部分数据对象的定义
         3. Binlog 改造
         4. 主备集群自动寻主功能
-        - 2023 年 02 月 30 日
+        - 2023-02-30
     - StoneDB_5.7_v1.0.4
         1. 存储过程增强
         2. MySQL Event（批量加工能力）
         3. 窗口函数
         4. 安全功能-身份鉴别增强、存储加密
-        - 2023 年 04 月 30 日
+        - 2023-04-30
     - StoneDB_5.7_v1.0.5
         1. 性能增强-并行执行能力（Parallel）
         2. 性能增强-向量计算
         3. 多主一从架构
         4. 数据交换（多种导出格式）
         5. 安全功能-传输加密、数据脱敏
-        - 2023 年 06 月 30 日
+        - 2023-06-30
     - StoneDB_8.0_v1.0.0
         - 适配 MySQL 8.0
-        - 2023 年 03 月 06 日
+        - 2023-03-06
     - StoneDB_v2.0.0
         - 全新架构
         - 2023年~

diff --git a/website/src/components/roadMap/step/index.tsx b/website/src/components/roadMap/step/index.tsx
@@ -6,7 +6,7 @@ import {StepWrap, StepItemWrap, StepContext, ButtonWrap, ButtonIcon, Logo} from
 export const Step: React.FC<IStep> = ({dataSource, value}) => {
   const [scroll, setScroll] = useState(0);
   const { ref, inView } = useInView({
-    threshold: 0,
+    threshold: 0.8,
   });
 
   const checkActive = (time: string) => {
@@ -29,12 +29,12 @@ export const Step: React.FC<IStep> = ({dataSource, value}) => {
   }
 
   const scrollNext = () => {
-    setScroll((scroll) => scroll += 300)
+    setScroll((scroll) => scroll += 320)
   }
 
   return (
     <StepWrap>
-      <StepContext scroll={scroll}>
+      <StepContext scroll={scroll} counts={dataSource?.length ?? 0}>
         <div className='wrap'>
         {
           dataSource.map(({title, desc, time, list}, index: number) => {

diff --git a/website/src/components/roadMap/step/styles.ts b/website/src/components/roadMap/step/styles.ts
@@ -123,6 +123,7 @@ export const StepItemWrap: StyledComponent<"div", any, {active?: boolean;disable
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    overflow-y: auto;
     p {
       font-size: 18px;
       font-weight: 400;
@@ -149,10 +150,11 @@ export const StepContext = styled(Context)`
   padding: 0;
   z-index: 0;
   .wrap{
-    width: 200%;
+    min-width: 100%;
     height: 100%;
-    ${({scroll}: any) => `
-      transform: translateX(-${scroll}px);
+    ${({scroll, counts}: any) => `
+      width: ${counts*320}px;
+      transform: translateX(-${scroll <=0 ? 0 : scroll}px);
     `}
   }
 `