docs: Optimize scrolling

easy-form · May 20, 2024 · 50b313e · 50b313e
2 parents 186575c + d59213b
commit 50b313e
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 25 deletions.
diff --git a/.dumi/component/ScrollBar/index.tsx b/.dumi/component/ScrollBar/index.tsx
@@ -9,14 +9,14 @@ export function ScrollBar(props: any) {
   const mouses = noEvent
     ? {}
     : {
-        onMouseEnter() {
-          document.body.style.overflow = 'hidden';
-          document.body.style.paddingRight = '17px';
-        },
-        onMouseLeave() {
-          document.body.style.overflow = 'auto';
-          document.body.style.paddingRight = '0px';
-        },
+        // onMouseEnter() {
+        //   document.body.style.overflow = 'hidden';
+        //   document.body.style.paddingRight = '17px';
+        // },
+        // onMouseLeave() {
+        //   document.body.style.overflow = 'auto';
+        //   document.body.style.paddingRight = '0px';
+        // },
       };
   return (
     <SimpleBar className="dumi-default-simpleBar" {...rests} {...mouses}>

diff --git a/.dumi/pages/index.tsx b/.dumi/pages/index.tsx
@@ -1,4 +1,3 @@
-import { ReactFormSandpack } from '@components/Codesandbox';
 import { GetStarted, Github } from '@components/Hero/ActionButton';
 import { CodeLight } from '@components/Hero/CodeLight';
 import { Desc } from '@components/Hero/Desc';
@@ -34,7 +33,7 @@ export default function App() {
         <Feature />
         {/* <Gif /> */}
         <div style={{ marginTop: '180px' }}>{/* <Design /> */}</div>
-        <div style={{ marginTop: '180px', marginBottom: '180px' }}>
+        {/* <div style={{ marginTop: '180px', marginBottom: '180px' }}>
           <div
             style={{
               fontSize: '38px',
@@ -46,7 +45,7 @@ export default function App() {
             {format({ id: 'hero.feature.sandPackage' })}
           </div>
           <ReactFormSandpack />
-        </div>
+        </div> */}
       </div>
     </div>
   );

diff --git a/.dumi/theme/locales/en-US.json b/.dumi/theme/locales/en-US.json
@@ -15,6 +15,12 @@
   "hero.feature.typeTitle": "Type Inference",
   "hero.feature.type": "Provide complete type inference and form model data inference.",
   "hero.feature.sandPackage": "Online quiz",
+  "hero.footer.source": "Related Resources",
+  "hero.footer.useCase": "Use Cases",
+  "hero.footer.plan": "Implementation Plan for Controlled React Forms",
+  "hero.footer.license": "License",
+  "hero.footer.wxin": "wxin",
+  "hero.footer.friendshipLink": "Friendship Link",
   "footer.desc.star.text": "If it makes your form development easier, please add a star to us",
   "footer.desc.issue.text": "If you encounter difficulties during use, please let us know",
   "API.useForm.render.desc": "The form item rendering function accepts two parameters, the first parameter is the form item field, and the second parameter is the form item configuration.<div>More configurations: <a href='/intro/api#formitem'>FormItem</a></div>",
@@ -84,4 +90,4 @@
   "API.form.global.props.formItem.requireIndicator": "Form item required indicator. The default is *. Versions after 1.5.1 include 1.5.1 support for passing in custom components.",
   "API.form.global.props.formItem.label": "Form item label.",
   "API.form.global.props.formItem.getContent": "When using the FormItem component to create a controlled form item, you need to pass in this method, which returns the content that needs to be rendered. The parameters of getContent include the form item's API, the form item's model data, verification status, and attrs that conform to native attributes. Developers can perform corresponding logical processing on these parameters. In the form item API returned by the parameter, developers can directly call it to trigger the corresponding event of the form item to achieve more precise and detailed control."
-}
+}
diff --git a/.dumi/theme/locales/zh-CN.json b/.dumi/theme/locales/zh-CN.json
@@ -15,6 +15,12 @@
   "hero.feature.typeTitle": "类型推断",
   "hero.feature.type": "提供完整的类型推断, 表单模型数据推断。",
   "hero.feature.sandPackage": "在线小试",
+  "hero.footer.source": "相关资源",
+  "hero.footer.useCase": "使用案例",
+  "hero.footer.plan": "react表单受控的实现方案",
+  "hero.footer.license": "协议",
+  "hero.footer.wxin": "微信",
+  "hero.footer.friendshipLink": "友情推荐",
   "footer.desc.star.text": "如果让你的表单开发变得更加容易，请给我们加颗星",
   "footer.desc.issue.text": "如果你在使用过程中遇到了困难，请给我们提",
   "API.useForm.render.desc": "表单项渲染函数，接收两个参数，第一个参数为表单项字段，第二个参数为表单项配置。<div>更多配置：<a href='/zh-CN/intro/api#formitem'>FormItem</a</div>",
@@ -84,4 +90,4 @@
   "API.form.global.props.formItem.requireIndicator": "表单项必填指示器。默认为*，在1.5.1之后的版本包含1.5.1支持传入自定义组件。",
   "API.form.global.props.formItem.label": "表单项标签。",
   "API.form.global.props.formItem.getContent": "使用 FormItem 组件形式创建一个受控表单项时，需要传入这个方法，方法返回需要渲染的内容。getContent 的参数包含有该表单项的 API、该表单项的模型数据、校验状态以及符合原生属性的 attrs，开发者可以针对这些参数做相应的逻辑处理。在参数返回的表单项 API 中，开发者可以直接调用来触发该表单项的对应事件以达到更精确更细度的控制。"
-}
+}
diff --git a/.dumi/theme/slots/Footer/index.tsx b/.dumi/theme/slots/Footer/index.tsx
@@ -1,5 +1,5 @@
 import { IconFont } from '@components/IconFont';
-import { Box, Popover } from '@mui/material';
+import { Popover } from '@mui/material';
 import { useSiteData } from 'dumi';
 import React, { useImperativeHandle, useRef, useState, type FC } from 'react';
 import { useLocalFormat } from 'useLocalFormat';
@@ -53,22 +53,24 @@ const Footer: FC = () => {
   const { themeConfig } = useSiteData();
   const modalRef = useRef();
 
+  const { format } = useLocalFormat();
+
   const { resource, friendLink, author, group } = {
     resource: [
       {
         label: 'Github',
         href: 'https://github.com/easy-form/react-form-simple',
       },
       {
-        label: '使用案例',
+        label: format({ id: 'hero.footer.useCase' }),
         href: 'https://github.com/easy-form/react-form-simple?tab=readme-ov-file#-demo',
       },
       {
-        label: 'react表单受控的实现方案',
+        label: format({ id: 'hero.footer.plan' }),
         href: 'https://juejin.cn/post/7309692103055867939',
       },
       {
-        label: '协议',
+        label: format({ id: 'hero.footer.license' }),
         href: 'https://github.com/easy-form/react-form-simple/blob/main/LICENSE',
       },
     ],
@@ -79,7 +81,7 @@ const Footer: FC = () => {
     ],
     group: [
       {
-        label: '微信',
+        label: format({ id: 'hero.footer.wxin' }),
         icon: 'weixin',
         size: 20,
         href: 'https://github.com/easy-form/react-form-simple/tree/main?tab=readme-ov-file#join-wechat-group',
@@ -89,14 +91,13 @@ const Footer: FC = () => {
 
   if (!themeConfig.footer) return null;
 
-  const { format } = useLocalFormat();
   const year = new Date().getFullYear();
   return (
     <>
       <div className="dumi-default-footer">
         <div className="dumi-default-footer-content">
           <div>
-            <Title>相关资源</Title>
+            <Title>{format({ id: 'hero.footer.source' })}</Title>
             <div style={{ marginTop: '20px' }}>
               {resource.map((v) => (
                 <div style={{ marginBottom: '10px' }} key={v.href}>
@@ -114,7 +115,7 @@ const Footer: FC = () => {
             </div>
           </div>
           <div>
-            <Title>友情推荐</Title>
+            <Title>{format({ id: 'hero.footer.friendshipLink' })}</Title>
             <div style={{ marginTop: '20px' }}>
               {friendLink.map((v) => (
                 <div style={{ marginBottom: '10px' }} key={v.href}>
@@ -131,7 +132,7 @@ const Footer: FC = () => {
               ))}
             </div>
           </div>
-          <div>
+          {/* <div>
             <Title>关于作者</Title>
             <div style={{ marginTop: '20px' }}>
               {author.map((v) => (
@@ -152,8 +153,8 @@ const Footer: FC = () => {
                 </div>
               ))}
             </div>
-          </div>
-          <div>
+          </div> */}
+          {/* <div>
             <Title>社群</Title>
             <div style={{ marginTop: '20px' }}>
               {group.map((v) => {
@@ -219,7 +220,7 @@ const Footer: FC = () => {
                 </Box>
               </div>
             </div>
-          </div>
+          </div> */}
         </div>
         <div
           style={{