Merge pull request #47 from alibaba/releases/1108

Releases/1108 Add new components, support theme customization, responsive layout and internationalization

.dumi/pages/index-en/index.ts

@@ -0,0 +1,3 @@
+import Homepage from '../index';
+
+export default Homepage;

docs/components/home-page.less → .dumi/pages/index/index.less

@@ -1,4 +1,4 @@
-@import (reference) '../../.dumi/theme/styles/variables.less';
+@import (reference) '../../theme/styles/variables.less';
 
 .main-container {
   background: #fff;
@@ -214,3 +214,19 @@
     }
   }
 }
+
+.dumi-default-doc-layout-content.home-page {
+  .side {
+    display: none;
+  }
+
+  .left {
+    display: none;
+  }
+
+  .right {
+    .dumi-default-content {
+      padding: 0;
+    }
+  }
+}

docs/components/home-page.tsx → .dumi/pages/index/index.tsx

@@ -1,33 +1,37 @@
+/* eslint-disable react/display-name */
 import React from 'react';
-import Dm from './user-icon/dm';
-import Tpp from './user-icon/tpp';
 import { Button } from '@bifrostui/react';
-import { usePrefersColor, useNavigate } from 'dumi';
+import { usePrefersColor, useNavigate, useIntl, useLocale } from 'dumi';
 import { ToTopOutlinedIcon } from '@bifrostui/icons';
-import './home-page.less';
+import Tpp from './user-icon/tpp';
+import Dm from './user-icon/dm';
+import './index.less';
+import locales from './locales';
 
 export default () => {
   const [color] = usePrefersColor();
+  const { locale } = useIntl();
+  const current = locale === 'zh-CN' ? 'zhCN' : 'enUS';
   const navigate = useNavigate();
   return (
-    <div className="main-container">
+    <div className="main-container home-page">
       <div className="main-head">
         <div>
           <img
             className="main-logo"
             src="https://gw.alicdn.com/imgextra/i2/O1CN01Bqi4MA1USNSLdER5C_!!6000000002516-55-tps-190-90.svg"
           />
-          <div className="main-desc">一款简洁灵活的跨端组件库</div>
+          <div className="main-desc">{locales[current].description}</div>
           <Button
             size="large"
             variant="contained"
             className="start-btn"
             endIcon={<ToTopOutlinedIcon />}
             onClick={() => {
-              navigate("/guide/introduce", { replace: true });
+              navigate('/guide/introduce', { replace: true });
             }}
           >
-            开始体验
+            {locales[current].start}
           </Button>
         </div>
         <img
@@ -41,51 +45,61 @@ export default () => {
             className="introduce-icon"
             src="https://gw.alicdn.com/imgextra/i1/O1CN01y4iaZr1aLP2g7R9xm_!!6000000003313-2-tps-160-160.png"
           />
-          <div className="introduce-title">一码多端</div>
+          <div className="introduce-title">
+            {locales[current].features[0].title}
+          </div>
           <div className="introduce-desc">
-            同时支持H5和小程序
+            {locales[current].features[0].desc}
           </div>
         </div>
         <div className="introduce-item">
           <img
             className="introduce-icon"
             src="https://gw.alicdn.com/imgextra/i4/O1CN01fvzf101QVLTsWkcrR_!!6000000001981-2-tps-160-160.png"
           />
-          <div className="introduce-title">高定制</div>
+          <div className="introduce-title">
+            {locales[current].features[1].title}
+          </div>
           <div className="introduce-desc">
-            一致优雅的API帮助您快速创造新主题
+            {locales[current].features[1].desc}
           </div>
         </div>
         <div className="introduce-item">
           <img
             className="introduce-icon"
             src="https://gw.alicdn.com/imgextra/i4/O1CN01CCqAR028qGfPoYba0_!!6000000007983-2-tps-160-160.png"
           />
-          <div className="introduce-title">高可用</div>
+          <div className="introduce-title">
+            {locales[current].features[2].title}
+          </div>
           <div className="introduce-desc">
-            完善的配套，丰富的组件，开箱即用
+            {locales[current].features[2].desc}
           </div>
         </div>
       </div>
       <div className="main-resource">
         <div className="resource-item">
-          <div className="resource-title">设计语言</div>
+          <div className="resource-title">
+            {locales[current].subTitle[0].title}
+          </div>
           <div className="resource-content">
             <div>
-              <div className="content-title">设计语言</div>
+              <div className="content-title">
+                {locales[current].subTitle[0].title}
+              </div>
               <div className="content-desc">
-                基于阿里影业的众多业务实践沉淀的设计语言和设计系统
+                {locales[current].subTitle[0].desc}
               </div>
               <Button
                 size="large"
                 variant="contained"
                 style={{ '--bg-color': '#2356df', '--text-color': '#fff' }}
                 endIcon={<ToTopOutlinedIcon />}
                 onClick={() => {
-                  navigate("/design/colors", { replace: true });
+                  navigate('/design/colors', { replace: true });
                 }}
               >
-                查看详情
+                {locales[current].subTitle[0].btn}
               </Button>
             </div>
             <img
@@ -95,23 +109,27 @@ export default () => {
           </div>
         </div>
         <div className="resource-item">
-          <div className="resource-title">组件列表</div>
+          <div className="resource-title">
+            {locales[current].subTitle[1].title}
+          </div>
           <div className="resource-content">
             <div>
-              <div className="content-title">组件列表</div>
+              <div className="content-title">
+                {locales[current].subTitle[1].title}
+              </div>
               <div className="content-desc">
-                一致的API、丰富的组件帮助您快速构建前端应用
+                {locales[current].subTitle[1].desc}
               </div>
               <Button
                 size="large"
                 variant="contained"
                 style={{ '--bg-color': '#2356df', '--text-color': '#fff' }}
                 endIcon={<ToTopOutlinedIcon />}
                 onClick={() => {
-                  navigate("/cores/button", { replace: true });
+                  navigate('/cores/button', { replace: true });
                 }}
               >
-                查看详情
+                {locales[current].subTitle[1].btn}
               </Button>
             </div>
             <img
@@ -123,7 +141,7 @@ export default () => {
       </div>
 
       <div className="main-users">
-        <div className="users-title">谁在使用</div>
+        <div className="users-title">{locales[current].subTitle[2].title}</div>
         <div className="user-list">
           <Tpp color={color === 'light' ? '#eee' : '#5F6672'} />
           <Dm color={color === 'light' ? '#eee' : '#5F6672'} />

.dumi/pages/index/locales.ts

@@ -0,0 +1,68 @@
+export default {
+  zhCN: {
+    description: '一款简洁灵活的跨端组件库',
+    start: '开始体验',
+    features: [
+      {
+        title: '一码多端',
+        desc: '同时支持H5和小程序',
+      },
+      {
+        title: '高定制',
+        desc: '一致优雅的API帮助您快速创造新主题',
+      },
+      {
+        title: '高可用',
+        desc: '完善的配套，丰富的组件，开箱即用',
+      },
+    ],
+    subTitle: [
+      {
+        title: '设计语言',
+        desc: '基于阿里影业的众多业务实践沉淀的设计语言和设计系统',
+        btn: '查看详情',
+      },
+      {
+        title: '组件列表',
+        desc: '一致的API、丰富的组件帮助您快速构建前端应用',
+        btn: '查看详情',
+      },
+      {
+        title: '谁在使用',
+      },
+    ],
+  },
+  enUS: {
+    description: 'A concise and flexible cross-end component library',
+    start: 'Start to experience',
+    features: [
+      {
+        title: 'One code for multiple terminals',
+        desc: 'Supports both H5 and mini programs',
+      },
+      {
+        title: 'High customization',
+        desc: 'Consistent and elegant API helps you quickly create new themes',
+      },
+      {
+        title: 'High availability',
+        desc: 'Complete supporting facilities, rich components, ready to use',
+      },
+    ],
+    subTitle: [
+      {
+        title: 'Design language',
+        desc: 'Design language and design system based on the numerous business practices of Alibaba Pictures',
+        btn: 'View details',
+      },
+      {
+        title: 'Component list',
+        desc: 'Consistent API and rich components help you quickly build front-end applications',
+        btn: 'View details',
+      },
+      {
+        title: 'Who is using it',
+      },
+    ],
+  },
+};

.dumi/pages/index/user-icon/dm.tsx

@@ -0,0 +1,16 @@
+export default ({ color = '#eee' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 171 54"
+      width="100%"
+      height="100%"
+    >
+      <path
+        d="M.084 24.05a4.263 4.263 0 0 1 5.828-3.101l19.375 8.114-21.006.081A4.263 4.263 0 0 1 .084 24.05Zm4.554-10.997a4.263 4.263 0 0 1 6.571-.634L26.005 27.33 6.567 19.367a4.264 4.264 0 0 1-1.93-6.314Zm8.416-8.415a4.263 4.263 0 0 1 6.313 1.928l7.963 19.439-14.91-14.796a4.263 4.263 0 0 1 .634-6.571ZM24.05.083a4.264 4.264 0 0 1 5.094 4.198l-.081 21.006-8.114-19.375a4.264 4.264 0 0 1 3.1-5.829Zm7.85 36.314 8.205 14.306C40.948 52.17 39.89 54 38.196 54h-16.41c-1.692 0-2.752-1.83-1.91-3.297l8.205-14.306c.847-1.476 2.974-1.476 3.82 0ZM30 31.302c-11.386 6.569-6.726 15.835-22.57 18.907.408-3.58-2.182-5.491-3.845-6.222 8.913.08 11.98-3.14 15.298-6.423l.4-.394c2.477-2.43 5.226-4.823 10.717-5.868Zm3.995 1.368 19.439 7.963a4.264 4.264 0 1 1-4.643 6.948L33.995 32.67Zm21.724-1.814a4.263 4.263 0 0 1 4.198 5.095 4.263 4.263 0 0 1-5.828 3.1l-19.377-8.113 21.007-.082Zm-51.438 0 21.006.081-19.375 8.114a4.263 4.263 0 1 1-1.63-8.195Zm49.808-9.908a4.264 4.264 0 1 1 1.63 8.196l-21.006-.081ZM48.79 12.42a4.263 4.263 0 0 1 6.57.635 4.263 4.263 0 0 1-1.927 6.313l-19.44 7.964Zm-8.158-5.852a4.263 4.263 0 1 1 6.948 4.642L32.67 26.005ZM30.856 4.28A4.263 4.263 0 0 1 35.95.084a4.263 4.263 0 0 1 3.1 5.828l-8.113 19.375ZM96.496 6v7.714h19.766v5.944H97.498c2.182 8.276 8.443 16.763 18.117 21.18v7.029c-13.974-5.384-20.3-15.698-22.984-22.695-2.685 6.997-9.011 17.311-22.985 22.695v-7.03c9.674-4.416 15.936-12.903 18.117-21.179H69v-5.943l19.765-.001V6h7.732Zm27.243 31.232v-5.741c3.893-.756 6.347-2.978 7.65-4.558h-7.65v-4.889h20.096V19.74h-18.73v-4.098l18.73-.001v-2.306h-20.096V8.448l20.096-.001V6h7.069l-.001 2.446H171v4.89l-20.097-.001v2.306h18.732v4.1l-18.732-.001v2.305H171v4.89l-32.732-.001c-.071.122-.571.958-1.5 2.114h28.002a3.564 3.564 0 0 1 3.563 3.564c0 .934-.36 1.833-1.018 2.496-1.832 1.846-5.305 4.41-10.264 6.765 3.923.57 8.52.768 13.95.426v5.57c-9.092.523-16.658-.698-22.762-2.652-6.703 1.971-14.928 3.202-24.5 2.651v-5.57c6.34.43 11.737.224 16.394-.457-3.7-1.938-6.495-4.019-8.419-5.734h9.656a32.97 32.97 0 0 0 7.338 3.724 40.764 40.764 0 0 0 11.347-5.894h-28.538c-2.102 1.441-4.695 2.7-7.778 3.296Z"
+        fill={color}
+        fill-rule="evenodd"
+      />
+    </svg>
+  );
+};

.dumi/pages/index/user-icon/tpp.tsx

@@ -0,0 +1,16 @@
+export default ({ color = '#eee' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 190 54"
+      width="100%"
+      height="100%"
+    >
+      <path
+        d="M144.848 33.778v3.604h-16.292v7.327c0 2.925-1.458 3.29-10.51 3.29-.146-.203-1.351-4.5-1.351-4.5h.621c3.02-.003 4.688-.037 4.688-.694v-5.423h-18.079v-3.604h40.923Zm-35.679 4.793 6.845 2.288c-1.753 2.442-4.551 5.243-6.493 7.14l-5.596-1.882c1.589-1.676 3.814-4.763 5.244-7.546Zm29.657.091c1.939 2.147 4.288 4.702 6.022 7.22l-7.005 2.117c-1.029-2.49-2.454-5.648-4.366-7.557Zm-32.422-6.79h35.961v-3.604h-35.96v3.604Zm15.779-17.859h4.664v-2.471h-4.664v2.471Zm10.598 8.592h4.77V17.77h-4.77v4.834Zm-10.598 0h4.664V17.77h-4.664v4.834Zm-10.917 0h4.77V17.77h-4.77v4.834Zm4.77-8.592h-10.6v12.35h37.944v-12.35h-10.6v-2.471h11.978v-4.08h-40.7v4.08h11.978v2.471ZM190 33.778v3.604h-16.293v7.327c0 2.925-1.458 3.29-10.509 3.29-.147-.203-1.352-4.5-1.352-4.5h.622c3.019-.003 4.687-.037 4.687-.694v-5.423h-18.079v-3.604H190Zm-35.68 4.793 6.845 2.288c-1.752 2.442-4.551 5.243-6.493 7.14l-5.596-1.882c1.589-1.676 3.814-4.763 5.244-7.546Zm29.657.091c1.94 2.147 4.288 4.702 6.022 7.22l-7.005 2.117c-1.029-2.49-2.454-5.648-4.366-7.557Zm-32.421-6.79h35.96v-3.604h-35.96v3.604Zm15.778-17.859h4.664v-2.471h-4.664v2.471Zm10.598 8.592h4.77V17.77h-4.77v4.834Zm-10.599 0h4.664V17.77h-4.664v4.834Zm-10.916 0h4.77V17.77h-4.77v4.834Zm4.77-8.592h-10.599v12.35h37.943v-12.35h-10.599v-2.471h11.977v-4.08H149.21v4.08h11.977v2.471ZM65.36 29.99l4.693 2.034c-1.352 5.11-4.151 11.898-6.718 15.976L58 42.282c3.62-3.89 5.926-8.035 7.36-12.292ZM80.278 6c-.187.903-.657 2.014-1.316 3.18h20.47v36.052c0 2.454-5.953 2.768-15.624 2.768-.145-.208-1.332-4.606-1.332-4.606 1.039 0 2.47.058 3.95.074l.525.004c3.151.01 6.349-.221 6.349-1.65V13.905H75.395c-1.341 1.364-2.792 2.447-4.134 2.887l-2.379-3.422C71.728 10.92 72.96 9.32 73.13 6Zm-.953 9.806c-.095.453-.293.977-.57 1.536h11.314v3.652h-5.898v4.778h7.056v4.017H84.17v7.013h2.276v-4.25h4.286v8.678l-18.61-.155v-8.523h4.048v4.25h2.513v-7.013H71.63v-4.017h7.054v-4.778h-2.485c-1.275 1.41-2.742 2.597-4.019 3.016l-1.52-2.492c2.165-1.863 3.101-3.188 3.231-5.712Zm-17.521 2.348c1.957.793 5.744 2.32 7.854 3.806l-3.606 5.856c-2.621-2.42-4.927-3.948-7.656-5.764Zm.411-10.837c1.855.752 5.444 2.199 7.443 3.607l-3.417 5.55c-2.484-2.294-4.669-3.74-7.256-5.462ZM48.308 25.128c-.004.064-.065.398-.39.481-.015.003-.029.012-.044.018-.419.19-1.057.728-1.283 2.246-.083.684-.219 1.4-.366 2.17l-.002.01c-.418 2.186-1.087 4.003-1.989 5.398-1.263 1.95-2.978 3.037-4.963 3.143-1.448.076-2.666.082-3.722.014-3.06-.196-4.813-1-6.055-2.78-1.67-2.393-2.435-6.744-3.426-6.744-.991 0-1.755 4.35-3.426 6.744-1.241 1.78-2.996 2.584-6.055 2.78-1.056.068-2.273.062-3.722-.014-1.985-.106-3.7-1.193-4.962-3.143-.903-1.395-1.572-3.212-1.99-5.399l-.001-.01c-.147-.769-.284-1.485-.367-2.17-.226-1.517-.863-2.055-1.282-2.245-.015-.006-.03-.015-.045-.018-.324-.083-.386-.417-.39-.48-.037-.615-.188-1.982-.24-2.837-.04-.636.476-.719.574-.725 3.611-.232 11.99-.688 15.797.321 1.138.303 4.392.93 6.11.93 1.716 0 4.97-.627 6.108-.93 3.81-1.01 12.187-.553 15.797-.321.098.006.615.09.576.725-.054.855-.204 2.222-.242 2.836M33.001 7.042C28.626 5.863 27.281 0 19.101 0c2.961 3.452 1.595 6.482-.626 7.178C7.636 10.116-.492 19.388.023 32.203.552 45.396 11.653 54 26 54c14.346 0 25.447-8.604 25.977-21.797C52.5 19.183 44.1 9.82 33 7.042M19.037 24.876a13.584 13.584 0 0 0-.27-.054c-1.356-.257-4.122-.612-6.26-.476-.943.06-1.764.216-2.29.517-1.301.749-1.407 1.925-1.187 3.505.063.459.155.951.252 1.477.52 2.818 1.75 5.818 4.312 5.968 1.15.068 2.093.073 2.874.023 2.404-.153 3.27-.819 3.868-1.72 3.415-5.15 2.064-8.533-1.299-9.24m14.062 0 .27-.054c1.357-.257 4.122-.612 6.26-.476.943.06 1.764.216 2.289.517 1.303.749 1.408 1.925 1.189 3.505-.064.459-.156.951-.252 1.477-.522 2.818-1.751 5.818-4.313 5.968-1.15.068-2.093.073-2.874.023-2.404-.153-3.27-.819-3.867-1.72-3.416-5.15-2.065-8.533 1.298-9.24"
+        fill={color}
+        fill-rule="evenodd"
+      />
+    </svg>
+  );
+};