chore: lint docs

wangdicoder · wangdicoder · commit 60a7545bc381 · 2026-03-26T11:59:40.000+11:00
diff --git a/apps/docs/guides/get-started.md b/apps/docs/guides/get-started.md
@@ -1,3 +1,13 @@
+import { Tabs } from '@tiny-design/react';
+import { NpmIcon, YarnIcon, PnpmIcon, BunIcon } from './pkg-icons';
+import { HighlightedCode } from '../src/components/highlighted-code';
+
+export const CodeBlock = ({ children }) => (
+  <div className="markdown__pre-container">
+    <HighlightedCode className="language-bash">{children}</HighlightedCode>
+  </div>
+);
+
 # Get Started
 
 ## Install
@@ -6,19 +16,16 @@
 
 You first need to install and configure the `Node.js` environment properly locally.
 
-```bash
-$ npm install tiny-design
-```
-<br />
-
-```bash
-$ yarn add tiny-design
-```
-<br />
-
-```bash
-$ pnpm add tiny-design
-```
+<Tabs
+  animated={false}
+  defaultActiveKey="npm"
+  items={[
+    { key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>$ npm install @tiny-design/react</CodeBlock> },
+    { key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>$ yarn add @tiny-design/react</CodeBlock> },
+    { key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>$ pnpm add @tiny-design/react</CodeBlock> },
+    { key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>$ bun add @tiny-design/react</CodeBlock> },
+  ]}
+/>
 
 ## Usage
 
diff --git a/apps/docs/guides/get-started.zh_CN.md b/apps/docs/guides/get-started.zh_CN.md
@@ -1,3 +1,13 @@
+import { Tabs } from '@tiny-design/react';
+import { NpmIcon, YarnIcon, PnpmIcon, BunIcon } from './pkg-icons';
+import { HighlightedCode } from '../src/components/highlighted-code';
+
+export const CodeBlock = ({ children }) => (
+  <div className="markdown__pre-container">
+    <HighlightedCode className="language-bash">{children}</HighlightedCode>
+  </div>
+);
+
 # 快速上手
 
 ## 安装
@@ -6,19 +16,16 @@
 
 你需要先在本地正确安装和配置好 `Node.js` 环境。
 
-```bash
-$ npm install tiny-design
-```
-<br />
-
-```bash
-$ yarn add tiny-design
-```
-<br />
-
-```bash
-$ pnpm add tiny-design
-```
+<Tabs
+  animated={false}
+  defaultActiveKey="npm"
+  items={[
+    { key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>$ npm install @tiny-design/react</CodeBlock> },
+    { key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>$ yarn add @tiny-design/react</CodeBlock> },
+    { key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>$ pnpm add @tiny-design/react</CodeBlock> },
+    { key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>$ bun add @tiny-design/react</CodeBlock> },
+  ]}
+/>
 
 ## 引入方式
 
diff --git a/apps/docs/guides/pkg-icons.tsx b/apps/docs/guides/pkg-icons.tsx
@@ -0,0 +1,29 @@
+import React, { CSSProperties } from 'react';
+
+const iconStyle: CSSProperties = { verticalAlign: '-0.125em', marginRight: 6 };
+
+export const NpmIcon = () => (
+  <svg viewBox="0 0 24 24" width="16" height="16" style={iconStyle}>
+    <path fill="#CB3837" d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z" />
+  </svg>
+);
+
+export const YarnIcon = () => (
+  <svg viewBox="0 0 24 24" width="16" height="16" style={iconStyle}>
+    <path fill="#2C8EBB" d="M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06zm.006.7c-.507.016-1.001 1.519-1.001 1.519s-1.27-.204-2.266.871c-.199.218-.468.334-.746.44-.079.028-.176.023-.417.672-.371.991.625 2.094.625 2.094s-1.186.839-1.626 1.881c-.486 1.144-.338 2.261-.338 2.261s-.843.732-.899 1.487c-.051.663.139 1.2.343 1.515.227.343.51.176.51.176s-.561.653-.037.931c.477.25 1.283.394 1.71-.037.31-.31.371-1.001.486-1.283.028-.065.12.111.209.199.097.093.264.195.264.195s-.755.324-.445 1.066c.102.246.468.403 1.066.398.222-.005 2.664-.139 3.313-.296.375-.088.505-.283.505-.283s1.566-.431 2.998-1.357c.917-.598 1.293-.76 2.034-.936.612-.148.57-1.098-.241-1.084-.839.009-1.575.44-2.196.825-1.163.718-1.742.672-1.742.672l-.018-.032c-.079-.13.371-1.293-.134-2.678-.547-1.515-1.413-1.881-1.344-1.997.297-.5 1.038-1.297 1.334-2.78.176-.899.13-2.377-.269-3.151-.074-.144-.732.241-.732.241s-.616-1.371-.788-1.483a.271.271 0 0 0-.157-.046z" />
+  </svg>
+);
+
+export const PnpmIcon = () => (
+  <svg viewBox="0 0 24 24" width="16" height="16" style={iconStyle}>
+    <path fill="#F69220" d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5z" />
+    <path fill="#4E4E4E" d="M0 8.25v7.5h7.5v-7.5zm0 8.25V24h7.5v-7.5zm8.25 0V24h7.498v-7.5z" />
+  </svg>
+);
+
+export const BunIcon = () => (
+  <svg viewBox="0 0 24 24" width="16" height="16" style={iconStyle}>
+    <path fill="#FBF0DF" stroke="#14151A" strokeWidth="0.6" d="M12 22.596c6.628 0 12-4.338 12-9.688 0-3.318-2.057-6.248-5.219-7.986-1.286-.715-2.297-1.357-3.139-1.89C14.058 2.025 13.08 1.404 12 1.404c-1.097 0-2.334.785-3.966 1.821a49.92 49.92 0 0 1-2.816 1.697C2.057 6.66 0 9.59 0 12.908c0 5.35 5.372 9.687 12 9.687v.001Z" />
+    <path fill="#14151A" d="M10.599 4.715c.334-.759.503-1.58.498-2.409 0-.145.202-.187.23-.029.658 2.783-.902 4.162-2.057 4.624-.124.048-.199-.121-.103-.209a5.763 5.763 0 0 0 1.432-1.977Zm2.058-.102a5.82 5.82 0 0 0-.782-2.306v-.016c-.069-.123.086-.263.185-.172 1.962 2.111 1.307 4.067.556 5.051-.082.103-.23-.003-.189-.126a5.85 5.85 0 0 0 .23-2.431Zm1.776-.561a5.727 5.727 0 0 0-1.612-1.806v-.014c-.112-.085-.024-.274.114-.218 2.595 1.087 2.774 3.18 2.459 4.407a.116.116 0 0 1-.049.071.11.11 0 0 1-.153-.026.122.122 0 0 1-.022-.083 5.891 5.891 0 0 0-.737-2.331Zm-5.087.561c-.617.546-1.282.76-2.063 1-.117 0-.195-.078-.156-.181 1.752-.909 2.376-1.649 2.999-2.778 0 0 .155-.118.188.085 0 .304-.349 1.329-.968 1.874Zm4.945 11.237a2.957 2.957 0 0 1-.937 1.553c-.346.346-.8.565-1.286.62a2.178 2.178 0 0 1-1.327-.62 2.955 2.955 0 0 1-.925-1.553.244.244 0 0 1 .064-.198.234.234 0 0 1 .193-.069h3.965a.226.226 0 0 1 .19.07c.05.053.073.125.063.197Zm-5.458-2.176a1.862 1.862 0 0 1-2.384-.245 1.98 1.98 0 0 1-.233-2.447c.207-.319.503-.566.848-.713a1.84 1.84 0 0 1 1.092-.11c.366.075.703.261.967.531a1.98 1.98 0 0 1 .408 2.114 1.931 1.931 0 0 1-.698.869v.001Zm8.495.005a1.86 1.86 0 0 1-2.381-.253 1.964 1.964 0 0 1-.547-1.366c0-.384.11-.76.32-1.079.207-.319.503-.567.849-.713a1.844 1.844 0 0 1 1.093-.108c.367.076.704.262.968.534a1.98 1.98 0 0 1 .4 2.117 1.932 1.932 0 0 1-.702.868Z" />
+  </svg>
+);
diff --git a/apps/docs/guides/use-react-app.md b/apps/docs/guides/use-react-app.md
@@ -1,14 +1,29 @@
+import { Tabs } from '@tiny-design/react';
+import { NpmIcon, YarnIcon, PnpmIcon, BunIcon } from './pkg-icons';
+import { HighlightedCode } from '../src/components/highlighted-code';
+
+export const CodeBlock = ({ children }) => (
+  <div className="markdown__pre-container">
+    <HighlightedCode className="language-bash">{children}</HighlightedCode>
+  </div>
+);
+
 # Use with Vite
 
 [Vite](https://vite.dev/) is the recommended way to scaffold a new React project. This guide walks through setting up tiny-design in a Vite-based app.
 
 ## Create a project
 
-```bash
-$ npm create vite@latest my-app -- --template react-ts
-$ cd my-app
-$ npm install
-```
+<Tabs
+  animated={false}
+  defaultActiveKey="npm"
+  items={[
+    { key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>{'$ npm create vite@latest my-app -- --template react-ts\n$ cd my-app\n$ npm install'}</CodeBlock> },
+    { key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>{'$ yarn create vite my-app --template react-ts\n$ cd my-app\n$ yarn'}</CodeBlock> },
+    { key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>{'$ pnpm create vite my-app --template react-ts\n$ cd my-app\n$ pnpm install'}</CodeBlock> },
+    { key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>{'$ bun create vite my-app --template react-ts\n$ cd my-app\n$ bun install'}</CodeBlock> },
+  ]}
+/>
 
 Start the dev server to verify everything works:
 
@@ -20,9 +35,16 @@ Open http://localhost:5173/ in your browser.
 
 ## Install tiny-design
 
-```bash
-$ npm install tiny-design
-```
+<Tabs
+  animated={false}
+  defaultActiveKey="npm"
+  items={[
+    { key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>$ npm install @tiny-design/react</CodeBlock> },
+    { key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>$ yarn add @tiny-design/react</CodeBlock> },
+    { key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>$ pnpm add @tiny-design/react</CodeBlock> },
+    { key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>$ bun add @tiny-design/react</CodeBlock> },
+  ]}
+/>
 
 Edit `src/App.tsx` to import a Button component from tiny-design:
 
diff --git a/apps/docs/guides/use-react-app.zh_CN.md b/apps/docs/guides/use-react-app.zh_CN.md
@@ -1,14 +1,29 @@
+import { Tabs } from '@tiny-design/react';
+import { NpmIcon, YarnIcon, PnpmIcon, BunIcon } from './pkg-icons';
+import { HighlightedCode } from '../src/components/highlighted-code';
+
+export const CodeBlock = ({ children }) => (
+  <div className="markdown__pre-container">
+    <HighlightedCode className="language-bash">{children}</HighlightedCode>
+  </div>
+);
+
 # 在 Vite 中使用
 
 [Vite](https://vite.dev/) 是目前推荐的 React 项目脚手架工具。本指南将介绍如何在 Vite 项目中使用 tiny-design。
 
 ## 创建项目
 
-```bash
-$ npm create vite@latest my-app -- --template react-ts
-$ cd my-app
-$ npm install
-```
+<Tabs
+  animated={false}
+  defaultActiveKey="npm"
+  items={[
+    { key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>{'$ npm create vite@latest my-app -- --template react-ts\n$ cd my-app\n$ npm install'}</CodeBlock> },
+    { key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>{'$ yarn create vite my-app --template react-ts\n$ cd my-app\n$ yarn'}</CodeBlock> },
+    { key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>{'$ pnpm create vite my-app --template react-ts\n$ cd my-app\n$ pnpm install'}</CodeBlock> },
+    { key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>{'$ bun create vite my-app --template react-ts\n$ cd my-app\n$ bun install'}</CodeBlock> },
+  ]}
+/>
 
 启动开发服务器，确认一切正常：
 
@@ -20,9 +35,16 @@ $ npm run dev
 
 ## 安装 tiny-design
 
-```bash
-$ npm install tiny-design
-```
+<Tabs
+  animated={false}
+  defaultActiveKey="npm"
+  items={[
+    { key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>$ npm install @tiny-design/react</CodeBlock> },
+    { key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>$ yarn add @tiny-design/react</CodeBlock> },
+    { key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>$ pnpm add @tiny-design/react</CodeBlock> },
+    { key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>$ bun add @tiny-design/react</CodeBlock> },
+  ]}
+/>
 
 修改 `src/App.tsx`，从 tiny-design 引入 Button 组件：
 
diff --git a/packages/react/src/tabs/demo/Animated.tsx b/packages/react/src/tabs/demo/Animated.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Tabs } from '@tiny-design/react';
+
+export default function AnimatedDemo() {
+  const items = [
+    { key: '1', label: 'Tab 1', children: 'Content of Tab 1' },
+    { key: '2', label: 'Tab 2', children: 'Content of Tab 2' },
+    { key: '3', label: 'Tab 3', children: 'Content of Tab 3' },
+  ];
+  return <Tabs defaultActiveKey="1" items={items} animated={false} />;
+}
diff --git a/packages/react/src/tabs/index.md b/packages/react/src/tabs/index.md
@@ -10,6 +10,8 @@ import PositionDemo from './demo/Position';
 import PositionSource from './demo/Position.tsx?raw';
 import EditableDemo from './demo/Editable';
 import EditableSource from './demo/Editable.tsx?raw';
+import AnimatedDemo from './demo/Animated';
+import AnimatedSource from './demo/Animated.tsx?raw';
 
 # Tabs
 
@@ -51,6 +53,15 @@ Add and remove tabs dynamically with the `editable-card` type.
 
 <DemoBlock component={EditableDemo} source={EditableSource} />
 
+    </Demo>
+    <Demo>
+
+### No Animation
+
+Disable the tab switching animation by setting `animated` to `false`.
+
+<DemoBlock component={AnimatedDemo} source={AnimatedSource} />
+
     </Demo>
   </Column>
   <Column>
diff --git a/packages/react/src/tabs/index.zh_CN.md b/packages/react/src/tabs/index.zh_CN.md
@@ -10,6 +10,8 @@ import EditableDemo from './demo/Editable';
 import EditableSource from './demo/Editable.tsx?raw';
 import ExtraDemo from './demo/Extra';
 import ExtraSource from './demo/Extra.tsx?raw';
+import AnimatedDemo from './demo/Animated';
+import AnimatedSource from './demo/Animated.tsx?raw';
 
 # Tabs
 
@@ -51,6 +53,15 @@ import { Tabs } from 'tiny-design';
 
 <DemoBlock component={EditableDemo} source={EditableSource} />
 
+    </Demo>
+    <Demo>
+
+### 无动画
+
+将 `animated` 设置为 `false` 以禁用选项卡切换动画。
+
+<DemoBlock component={AnimatedDemo} source={AnimatedSource} />
+
     </Demo>
   </Column>
   <Column>
diff --git a/packages/react/src/tabs/style/index.scss b/packages/react/src/tabs/style/index.scss
@@ -108,6 +108,10 @@ $tab-prefix: #{$prefix}-tabs;
     &_animated {
       transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     }
+
+    &_static {
+      display: block;
+    }
   }
 
   &__panel {
@@ -267,6 +271,10 @@ $tab-prefix: #{$prefix}-tabs;
       }
     }
 
+    .#{$tab-prefix}__nav-wrap {
+      overflow: visible;
+    }
+
     .#{$tab-prefix}__nav-list {
       flex-direction: column;
     }
@@ -279,6 +287,8 @@ $tab-prefix: #{$prefix}-tabs;
     .#{$tab-prefix}__ink-bar {
       width: 2px;
       height: auto;
+      top: 0;
+      bottom: auto;
     }
 
     .#{$tab-prefix}__content {
diff --git a/packages/react/src/tabs/tabs.tsx b/packages/react/src/tabs/tabs.tsx
@@ -335,12 +335,14 @@ function renderPanels(
   baseId?: string
 ): React.ReactNode {
   const activeIdx = items.findIndex((item) => item.key === currentKey);
-  const containerStyle: CSSProperties = animated && isHorizontal
+  const useSlide = animated && isHorizontal;
+  const containerStyle: CSSProperties = useSlide
     ? { transform: `translate3d(${-activeIdx * 100}%, 0, 0)` }
     : {};
 
   const containerCls = classNames(`${prefixCls}__content-inner`, {
-    [`${prefixCls}__content-inner_animated`]: animated && isHorizontal,
+    [`${prefixCls}__content-inner_animated`]: useSlide,
+    [`${prefixCls}__content-inner_static`]: !useSlide,
   });
 
   return (

Original file line number	Diff line number	Diff line change
`@@ -108,6 +108,10 @@ $tab-prefix: #{$prefix}-tabs;`
`108`	`108`	`&_animated {`
`109`	`109`	`transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);`
`110`	`110`	`}`
	`111`	`+`
	`112`	`+ &_static {`
	`113`	`+ display: block;`
	`114`	`+ }`
`111`	`115`	`}`
`112`	`116`
`113`	`117`	`&__panel {`
`@@ -267,6 +271,10 @@ $tab-prefix: #{$prefix}-tabs;`
`267`	`271`	`}`
`268`	`272`	`}`
`269`	`273`
	`274`	`+ .#{$tab-prefix}__nav-wrap {`
	`275`	`+ overflow: visible;`
	`276`	`+ }`
	`277`	`+`
`270`	`278`	`.#{$tab-prefix}__nav-list {`
`271`	`279`	`flex-direction: column;`
`272`	`280`	`}`
`@@ -279,6 +287,8 @@ $tab-prefix: #{$prefix}-tabs;`
`279`	`287`	`.#{$tab-prefix}__ink-bar {`
`280`	`288`	`width: 2px;`
`281`	`289`	`height: auto;`
	`290`	`+ top: 0;`
	`291`	`+ bottom: auto;`
`282`	`292`	`}`
`283`	`293`
`284`	`294`	`.#{$tab-prefix}__content {`