chore(button): split taro demo & doc (#2729)

jdf2e · Dec 11, 2023 · afd305e · afd305e
1 parent ab4bd7e
commit afd305e
Show file tree

Hide file tree

Showing 21 changed files with 282 additions and 240 deletions.
diff --git a/packages/nutui-taro-demo/src/basic/pages/button/block.vue b/packages/nutui-taro-demo/src/basic/pages/button/block.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-button block type="primary">Block</nut-button>
+</template>
diff --git a/packages/nutui-taro-demo/src/basic/pages/button/color.vue b/packages/nutui-taro-demo/src/basic/pages/button/color.vue
@@ -0,0 +1,5 @@
+<template>
+  <nut-button color="#7232dd">Pure</nut-button>
+  <nut-button color="#7232dd" plain>Pure</nut-button>
+  <nut-button color="linear-gradient(to right, #ff6034, #ee0a24)"> Gradient </nut-button>
+</template>
diff --git a/packages/nutui-taro-demo/src/basic/pages/button/disabled.vue b/packages/nutui-taro-demo/src/basic/pages/button/disabled.vue
@@ -0,0 +1,5 @@
+<template>
+  <nut-button disabled type="primary">Disabled</nut-button>
+  <nut-button plain disabled type="info">Disabled</nut-button>
+  <nut-button plain disabled type="primary">Disabled</nut-button>
+</template>
diff --git a/packages/nutui-taro-demo/src/basic/pages/button/icon.vue b/packages/nutui-taro-demo/src/basic/pages/button/icon.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-button shape="square" plain type="primary">
+    <template #icon>
+      <StarFill />
+    </template>
+  </nut-button>
+  <nut-button shape="square" type="primary">
+    <template #icon>
+      <Star />
+    </template>
+    Star
+  </nut-button>
+</template>
+<script setup lang="ts">
+import { StarFill, Star } from '@nutui/icons-vue';
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/button/index.vue b/packages/nutui-taro-demo/src/basic/pages/button/index.vue
@@ -1,105 +1,78 @@
 <template>
-  <Demo>
-    <h2>按钮类型</h2>
-    <div class="demo-button-row">
-      <nut-button type="primary">主要按钮</nut-button>
-      <nut-button type="info">信息按钮</nut-button>
-      <nut-button type="default">默认按钮</nut-button>
-    </div>
-    <div class="demo-button-row2">
-      <nut-button type="danger">危险按钮</nut-button>
-      <nut-button type="warning">警告按钮</nut-button>
-      <nut-button type="success">成功按钮</nut-button>
-    </div>
-    <h2>朴素按钮</h2>
-    <div class="demo-button-row2">
-      <nut-button plain type="primary">朴素按钮</nut-button>
-      <nut-button plain type="info">朴素按钮</nut-button>
-    </div>
-    <h2>禁用状态</h2>
-    <div class="demo-button-row2">
-      <nut-button disabled type="primary">禁用状态</nut-button>
-      <nut-button plain disabled type="info">禁用状态</nut-button>
-      <nut-button plain disabled type="primary">禁用状态</nut-button>
-    </div>
-    <h2>按钮形状</h2>
-    <div class="demo-button-row2">
-      <nut-button shape="square" type="primary">方形按钮</nut-button>
-      <nut-button type="info">圆形按钮</nut-button>
-    </div>
-    <h2>加载状态</h2>
-    <div class="demo-button-row2">
-      <nut-button loading type="info"></nut-button>
-      <nut-button loading type="warning">加载中...</nut-button>
-      <nut-button :loading="isLoading" type="success" @click="changeLoading">Click me!</nut-button>
-    </div>
-    <h2>图标按钮</h2>
-    <div class="demo-button-row2">
-      <nut-button shape="square" plain type="primary">
-        <template #icon>
-          <StarFill />
-        </template>
-      </nut-button>
-      <nut-button shape="square" type="primary">
-        <template #icon>
-          <Star />
-        </template>
-        收藏
-      </nut-button>
-    </div>
+  <Demo class="demo-button">
+    <h2>{{ t('type') }}</h2>
+    <Type />
 
-    <h2>按钮尺寸</h2>
-    <div class="demo-button-row2">
-      <nut-button size="large" type="primary" style="margin-bottom: 10px">大号按钮</nut-button>
-      <nut-button type="primary">普通按钮</nut-button>
-      <nut-button size="small" type="primary">小型按钮</nut-button>
-      <nut-button size="mini" type="primary">迷你按钮</nut-button>
-    </div>
-    <h2>块级元素</h2>
-    <div class="demo-button-row2">
-      <nut-button block type="primary">块级元素</nut-button>
-    </div>
-    <h2>自定义颜色</h2>
-    <div class="demo-button-row2">
-      <nut-button color="#7232dd">单色按钮</nut-button>
-      <nut-button color="#7232dd" plain>单色按钮</nut-button>
-      <nut-button color="linear-gradient(to right, #ff6034, #ee0a24)"> 渐变按钮 </nut-button>
-    </div>
+    <h2>{{ t('plain') }}</h2>
+    <Plain />
+
+    <h2>{{ t('disabled') }}</h2>
+    <Disabled />
+
+    <h2>{{ t('shape') }}</h2>
+    <Shape />
+
+    <h2>{{ t('loading') }}</h2>
+    <Loading />
+
+    <h2>{{ t('icon') }}</h2>
+    <Icon />
+
+    <h2>{{ t('size') }}</h2>
+    <Size />
+
+    <h2>{{ t('block') }}</h2>
+    <Block />
+
+    <h2>{{ t('color') }}</h2>
+    <Color />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { StarFill, Star } from '@nutui/icons-vue-taro';
-const isLoading = ref(false);
-const changeLoading = () => {
-  isLoading.value = true;
-  setTimeout(() => {
-    isLoading.value = false;
-  }, 3000);
-};
+import { useTranslate } from '../../../utils';
+import Type from './type.vue';
+import Plain from './plain.vue';
+import Disabled from './disabled.vue';
+import Shape from './shape.vue';
+import Loading from './loading.vue';
+import Icon from './icon.vue';
+import Size from './size.vue';
+import Block from './block.vue';
+import Color from './color.vue';
+const t = useTranslate({
+  'zh-CN': {
+    type: '按钮类型',
+    plain: '朴素按钮',
+    disabled: '禁用状态',
+    shape: '按钮形状',
+    loading: '加载状态',
+    icon: '图标按钮',
+    size: '按钮尺寸',
+    block: '块级元素',
+    color: '自定义颜色'
+  },
+  'en-US': {
+    type: 'Type',
+    plain: 'Plain',
+    disabled: 'Disabled',
+    shape: 'Shape',
+    loading: 'Loading',
+    icon: 'Icon',
+    size: 'Size',
+    block: 'Block',
+    color: 'Custom Color'
+  }
+});
 </script>
 
 <style lang="scss">
-.demo-button-row {
-  margin-bottom: 20px;
+.demo-button {
   .nut-button {
-    margin-right: 15px;
-    &:last-child {
-      margin-bottom: 0;
-      margin-right: 0;
-    }
-  }
-}
-.demo-button-row2 {
-  margin-bottom: 10px;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  .nut-button {
-    margin-right: 15px;
+    margin-right: 5px;
+    margin-bottom: 5px;
+
     &:last-child {
-      margin-bottom: 0;
       margin-right: 0;
     }
   }

diff --git a/packages/nutui-taro-demo/src/basic/pages/button/loading.vue b/packages/nutui-taro-demo/src/basic/pages/button/loading.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-button loading type="info"></nut-button>
+  <nut-button loading type="warning">Loading...</nut-button>
+  <nut-button :loading="isLoading" type="success" @click="onChange">Click me!</nut-button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const isLoading = ref(false);
+const onChange = () => {
+  isLoading.value = true;
+  setTimeout(() => {
+    isLoading.value = false;
+  }, 3000);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/button/plain.vue b/packages/nutui-taro-demo/src/basic/pages/button/plain.vue
@@ -0,0 +1,4 @@
+<template>
+  <nut-button plain type="primary">Plain</nut-button>
+  <nut-button plain type="info">Plain</nut-button>
+</template>
diff --git a/packages/nutui-taro-demo/src/basic/pages/button/shape.vue b/packages/nutui-taro-demo/src/basic/pages/button/shape.vue
@@ -0,0 +1,4 @@
+<template>
+  <nut-button shape="square" type="primary">Square</nut-button>
+  <nut-button shape="round" type="info">Round</nut-button>
+</template>
diff --git a/packages/nutui-taro-demo/src/basic/pages/button/size.vue b/packages/nutui-taro-demo/src/basic/pages/button/size.vue
@@ -0,0 +1,6 @@
+<template>
+  <nut-button size="large" type="primary">Large</nut-button>
+  <nut-button type="primary">Normal</nut-button>
+  <nut-button size="small" type="primary">Small</nut-button>
+  <nut-button size="mini" type="primary">Mini</nut-button>
+</template>
diff --git a/packages/nutui-taro-demo/src/basic/pages/button/type.vue b/packages/nutui-taro-demo/src/basic/pages/button/type.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-button type="primary">Primary</nut-button>
+  <nut-button type="info">Info</nut-button>
+  <nut-button type="default">Default</nut-button>
+  <nut-button type="danger">Danger</nut-button>
+  <nut-button type="warning">Warning</nut-button>
+  <nut-button type="success">Success</nut-button>
+</template>
diff --git a/packages/nutui-taro-demo/src/utils/index.ts b/packages/nutui-taro-demo/src/utils/index.ts
@@ -0,0 +1 @@
+export * from './useTranslate';
diff --git a/packages/nutui-taro-demo/src/utils/useTranslate.ts b/packages/nutui-taro-demo/src/utils/useTranslate.ts
@@ -0,0 +1,37 @@
+import Locale from '@/packages/locale';
+import { useLocale } from '@/packages/utils/useLocale';
+export const currentLang = Locale.currentLang;
+
+export const useTranslate = <
+  T1 extends {
+    [key: string]: any;
+  },
+  T2 extends T1
+>(object: {
+  'zh-CN': T1;
+  'en-US': T2;
+}) => {
+  for (const [key, value] of Object.entries(object)) {
+    Locale.merge(key, value);
+  }
+  return useLocale<Exclude<Extract<keyof T1, keyof T2>, number | symbol>>();
+};
+
+export const translateChange = () => {
+  let href = '';
+  const location = window.parent.location;
+  const currentLang = Locale.currentLang;
+  if (currentLang.value == 'zh-CN') {
+    href = location.href.replace('zh-CN', 'en-US');
+    Locale.use('en-US');
+  } else {
+    href = location.href.replace('en-US', 'zh-CN');
+    Locale.use('zh-CN');
+  }
+  location.href = href;
+};
+
+export const initSiteLang = () => {
+  const lang = location.href.includes('zh-CN') ? 'zh-CN' : 'en-US';
+  Locale.use(lang);
+};
diff --git a/packages/nutui-vite-plugins/src/markdown.ts b/packages/nutui-vite-plugins/src/markdown.ts
@@ -12,6 +12,7 @@ function compressText(str: string): any {
 }
 
 interface MarkdownOptions {
+  docTaroRoot: string;
   docRoot: string;
 }
 
@@ -25,13 +26,15 @@ const TransformMarkdownDemo = (options: MarkdownOptions): Plugin => {
       if (fileRegex.test(id)) {
         return {
           code: src.replace(/> demo: ([0-9a-z .]*)[\n|\r\n]/g, (_match, $1: string) => {
-            const [left, right] = $1.split(' ');
+            const [comp, demo, type] = $1.split(' ');
+            const docPath = type
+              ? path.resolve(options.docTaroRoot, type, 'pages', comp, `${demo}.vue`)
+              : path.resolve(options.docRoot, comp, 'demo', `${demo}.vue`);
             let code = '';
             try {
-              code = fs.readFileSync(path.resolve(options.docRoot, left, 'demo', `${right}.vue`), 'utf-8');
+              code = fs.readFileSync(docPath, 'utf-8');
             } catch (err) {
-              code =
-                '[@nutui/vite-plugins] File not found: ' + path.resolve(options.docRoot, left, 'demo', `${right}.vue`);
+              code = '[@nutui/vite-plugins] File not found: ' + docPath;
               console.warn(code);
             }
             return code

diff --git a/scripts/copytaro.cjs b/scripts/copytaro.cjs
@@ -1,10 +1,43 @@
 const targetBaseUrl = `${process.cwd()}/site_docs`;
+const fs = require('fs');
 const fse = require('fs-extra');
+const path = require('path');
+const replaceFile = (file) => {
+  fs.readFile(file, 'utf8', function(err, data) {
+    if (err) throw err;
+
+    // 修改文件内容
+    data = data.replace(/> demo: ([0-9a-z .]*)[\n|\r\n]/g, (_match, $1) => {
+      const [left, right, type] = $1.split(' ');
+      const target = path.resolve('packages/nutui-taro-demo/src', type, 'pages', left, `${right}.vue`);
+      let code = '';
+      try {
+        code = fs.readFileSync(target, 'utf-8');
+      } catch (err) {
+        code =
+          '[script] copy:h5 File not found: ' + target;
+        console.warn(code);
+      }
+      return code ? `:::demo
+
+\`\`\`vue
+${code}
+\`\`\`
+
+:::\n` : '';
+    });
+
+    fs.writeFile(file, data, function(err) {
+      if (err) throw err;
+    });
+  });
+}
 const copyFile = (from, to) => {
   fse
     .copy(from, to)
     .then(() => {
       console.log('success!>', to);
+      replaceFile(to);
     })
     .catch((err) => {
       console.error(err);