### Local Documentation Site Development Setup

Source: https://context7.com/tencent/tdesign/llms.txt

Commands for setting up the TDesign documentation site locally using pnpm workspaces. Includes cloning, installing dependencies, building site components, and starting the dev server.

```bash
# Prerequisites
node >= 16.0.0
pnpm >= 9.0.0

# Clone with submodule (tdesign-common shares styles across all repos)
git clone git@github.com:Tencent/tdesign.git
cd tdesign
git submodule init && git submodule update

# Install all workspace dependencies
pnpm install

# Build site-components (required before running the site)
pnpm run build:components

# Start the documentation site dev server
pnpm run dev:site

# Build everything for production
pnpm run site

# Develop @tdesign/site-components in isolation
pnpm run dev:components

# Develop @tdesign/theme-generator with hot reload
pnpm run dev:theme-generator
```

--------------------------------

### Install and Develop TDesign Site Web Components

Source: https://github.com/tencent/tdesign/blob/main/packages/site-components/README.md

Use these npm commands to install dependencies and start the development server for TDesign site web components.

```bash
npm install

npm dev
```

--------------------------------

### Start Development Server

Source: https://github.com/tencent/tdesign/blob/main/site/README.md

Run this command to start the local development server for TDesign Official Site.

```bash
npm run dev
```

--------------------------------

### Install @tdesign/site-components

Source: https://context7.com/tencent/tdesign/llms.txt

Install the package using npm. This is the first step to using the TDesign site components.

```bash
npm install @tdesign/site-components
```

--------------------------------

### Component File Structure Example

Source: https://github.com/tencent/tdesign/blob/main/docs/tech.md

Illustrates a typical file structure for a component, including its stylesheet and implementation file.

```plaintext
├── button.less
├── button.tsx
```

--------------------------------

### Install and Use TDesign Theme Generator

Source: https://context7.com/tencent/tdesign/llms.txt

Instructions for installing the `@tdesign/theme-generator` package and using it as a Web Component. Examples cover desktop, mobile/miniProgram variants, and fallback usage via direct DOM manipulation.

```bash
npm install @tdesign/theme-generator
```

```javascript
// Desktop — import and mount as a custom element
import '@tdesign/theme-generator';

// In HTML template / Vue template
// <td-theme-generator />

// Mobile / MiniProgram variant
import '@tdesign/theme-generator';
// <td-theme-generator device="mobile" />

// Fallback for environments where attribute binding is unreliable
const generator = document.createElement('td-theme-generator');
generator.setAttribute('device', 'mobile'); // 'mobile' | 'mini-program'
document.body.appendChild(generator);
```

--------------------------------

### TNode Usage Examples Across Frameworks

Source: https://github.com/tencent/tdesign/wiki/Component-API-Guide

Illustrates how to use TNode for custom content in React, Vue, Angular, and Miniprogram components.

```javascript
/** TNode: React Props (children) */
<TButton>按钮</TButton>

/** TNode: React Props (content) */
<TButton content='按钮'>
<TButton content={<div><TIcon />按钮</div>}>

/** TNode: Vue Slot */
<t-button>按钮</t-button>
<t-button><template #content>按钮</template></t-button>

/** TNode: Vue Props */
<t-button default={(() => <div><TIcon />按钮</div>}></t-button>
<t-button content={(() => <div><TIcon />按钮</div>}></t-button>

/** TNode: Angular TemplateRef */
<t-button>按钮</t-button>

/** TNode: Miniprogram Slot */
<view>
  <t-button>按钮</t-button>
</view>
<t-button content='按钮'></t-button>
```

--------------------------------

### Install TDesign Theme Generator

Source: https://github.com/tencent/tdesign/blob/main/packages/theme-generator/README.md

Install the theme generator plugin using npm. This is the first step to integrate it into your project.

```bash
npm i @tdesign/theme-generator
```

--------------------------------

### Install TDesign Component Libraries via npm

Source: https://context7.com/tencent/tdesign/llms.txt

Install the appropriate TDesign package for your framework using npm. Ensure you select the correct package for your project's technology stack.

```bash
# Vue 3 (desktop)
npm install tdesign-vue-next

# Vue 2 (desktop)
npm install tdesign-vue

# React (desktop)
npm install tdesign-react

# Mobile Vue 3
npm install tdesign-mobile-vue

# WeChat MiniProgram
npm install tdesign-miniprogram

# UniApp
npm install @tdesign/uniapp
```

--------------------------------

### Full Documentation Page Layout

Source: https://context7.com/tencent/tdesign/llms.txt

Example of the complete documentation page layout using various TDesign site components like `td-doc-layout`, `td-header`, `td-doc-aside`, `td-doc-content`, `td-doc-tabs`, `td-doc-demo`, and `td-doc-footer`.

```html
<!-- Full documentation page layout -->
<td-doc-layout>
  <!-- Site-wide header with navigation, theme toggle, GitHub link -->
  <td-header
    slot="header"
    platform="web"
    framework="vue-next"
    disabled-theme="false"
  ></td-header>

  <!-- Sidebar navigation -->
  <td-doc-aside slot="doc-aside" title="Vue for Web">
    <!-- routerList is set programmatically -->
  </td-doc-aside>

  <!-- Main content area -->
  <td-doc-content slot="doc-content">
    <!-- Per-page header with version badge and issue link -->
    <td-doc-header slot="doc-header">
      <img slot="badge" src="https://img.shields.io/npm/v/tdesign-vue-next" />
    </td-doc-header>

    <!-- Demo / API / Guide tab switcher -->
    <td-doc-tabs tab="demo"></td-doc-tabs>

    <!-- Component demo sandbox with collapsible source code -->
    <td-doc-demo
      code="<t-button theme='primary'>Click</t-button>"
      language="markup"
    >
      <t-button theme="primary">Click</t-button>
    </td-doc-demo>

    <!-- Interactive usage panel with config controls -->
    <td-doc-usage
      code="<t-button :theme='theme'>{{ label }}</t-button>"
      language="markup"
    ></td-doc-usage>

    <td-doc-footer slot="doc-footer"></td-doc-footer>
  </td-doc-content>
</td-doc-layout>
```

--------------------------------

### Vue vs. React Event Naming Example

Source: https://github.com/tencent/tdesign/wiki/【API-规范】事件命名规范-和-事件参数规范

Illustrates the difference in event naming conventions between Vue (kebab-case) and React (camelCase). Use kebab-case for Vue and camelCase for React when defining events.

```text
cellClick 在 Vue 中表示为 cell-click，在 React 中表示为 onCellClick
```

--------------------------------

### React On-Demand Import with TDesign

Source: https://context7.com/tencent/tdesign/llms.txt

Import specific TDesign components and styles for React applications. This example demonstrates importing `Button` and `Space` components.

```javascript
// React — on-demand import
import { Button, Space } from 'tdesign-react';
import 'tdesign-react/es/style/index.css';

function App() {
  return (
    <Space>
      <Button theme="primary">Primary</Button>
      <Button theme="danger" variant="outline">Danger</Button>
    </Space>
  );
}
```

--------------------------------

### Programmatic Theme Mode Toggling

Source: https://context7.com/tencent/tdesign/llms.txt

Provides JavaScript snippets for programmatically switching between dark and light modes, or resetting to system default. It also includes an example using `document.startViewTransition` for smooth, animated theme transitions in modern browsers.

```javascript
// Programmatically toggle dark / light mode
document.documentElement.setAttribute('theme-mode', 'dark');
document.documentElement.setAttribute('theme-mode', 'light');
document.documentElement.removeAttribute('theme-mode'); // system default

// Using document.startViewTransition for smooth animated switch (modern browsers)
if (document.startViewTransition) {
  document.startViewTransition(() => {
    document.documentElement.setAttribute('theme-mode', 'dark');
  });
}
```

--------------------------------

### Button Component API with JSDoc Comments

Source: https://github.com/tencent/tdesign/wiki/API注释规范

Example of a Button component's API definition using JSDoc comments for properties like 'type' and 'loadingText'. This structure aids in generating Vetur helper files for API auto-completion.

```javascript
export default {
  name: 'TButton',
  props: {
    /**
     * @description 按钮类型
     * @attribute type
     * @enum ['default', 'primary', 'warning', 'gray']
     * @default default
     */
    type: {
      type: String,
      default: 'default',
      validator: val =>
        ['default', 'primary', 'warning', 'gray'].indexOf(
          val
        ) !== -1
    },
    /**
     * @description 加载状态提示文字
     * @attribute loading-text
     */
    loadingText: String
  }
};
```

--------------------------------

### Global Theme Customization with CSS Design Tokens

Source: https://context7.com/tencent/tdesign/llms.txt

Shows how to override TDesign's global design tokens using CSS custom properties. This allows for consistent branding across the application. The example includes overrides for brand colors, typography, border radius, and spacing. Dark mode theming is also demonstrated.

```css
:root,
page {
  --td-brand-color: #0052d9;           /* primary brand color */
  --td-brand-color-hover: #2b6de4;
  --td-brand-color-active: #003cab;
  --td-brand-color-disabled: #a1bfee;
  --td-brand-color-light: #edf3fe;

  /* Typography */
  --td-font-size-base: 14px;
  --td-font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* Border radius */
  --td-radius-default: 3px;
  --td-radius-medium: 6px;

  /* Spacing */
  --td-comp-paddingLR-m: 16px;
}

/* Dark mode — TDesign applies [theme-mode="dark"] on <html> */
[theme-mode='dark'] {
  --td-bg-color-page: #1a1a1a;
  --td-text-color-primary: rgba(255, 255, 255, 0.9);
}
```

--------------------------------

### Build TDesign Site Web Components

Source: https://github.com/tencent/tdesign/blob/main/packages/site-components/README.md

Run this npm command to build the TDesign site web components for production.

```bash
npm build
```

--------------------------------

### Initialize Git Submodules

Source: https://github.com/tencent/tdesign/blob/main/docs/tech.md

Run these commands after cloning the source code to initialize and update submodules.

```bash
git submodule init && git submodule update
```

--------------------------------

### Notice Service Configuration

Source: https://context7.com/tencent/tdesign/llms.txt

Configure announcement banners for site headers using the `services/notice.json` file. Updates are fetched at runtime.

```json
{
  "all": {},
  "site": {},
  "vue": {
    "title": "🎉 tdesign-vue 1.4.0 released — see what's new",
    "type": "primary",
    "actionUrl": "https://tdesign.tencent.com/vue/components/changelog",
    "closeable": true
  },
  "vue-next": {},
  "react": {},
  "miniprogram": {
    "title": "🗓 tdesign-uniapp official site is live — try it now",
    "type": "primary",
    "actionUrl": "https://tdesign.tencent.com/uniapp",
    "closeable": true
  }
}
```

--------------------------------

### Create Interactive Component Playground (`td-doc-usage`)

Source: https://context7.com/tencent/tdesign/llms.txt

Use `td-doc-usage` to create an interactive playground with a configuration panel that regenerates a live code preview. Define available panels and configuration options using `panelList` and `configList` properties.

```html
<td-doc-usage
  code="<t-button :theme='theme' :variant='variant'>Click</t-button>"
  language="markup"
>
  <!-- Render slots correspond to panelList values -->
  <div slot="Vue">
    <t-button theme="primary" variant="base">Click</t-button>
  </div>
  <div slot="React">
    <Button theme="primary" variant="base">Click</Button>
  </div>
</td-doc-usage>
```

--------------------------------

### Use `td-header` in a Vue SFC

Source: https://context7.com/tencent/tdesign/llms.txt

Example of embedding the `td-header` web component within a Vue Single File Component (SFC) to serve as a documentation site shell.

```html
<!-- In a Vue SFC used as a documentation site shell -->
<template>
  <td-doc-layout>
    <td-header
      slot="header"
      platform="web"
      framework="react"
      :disabled-theme="false"
    ></td-header>
    <slot />
  </td-doc-layout>
</template>
```

--------------------------------

### Vue 3 Full Import with TDesign

Source: https://context7.com/tencent/tdesign/llms.txt

Import all TDesign components and styles for Vue 3 applications. This method is suitable for projects where tree-shaking is not a primary concern or for initial setup.

```javascript
// Vue 3 — full import
import { createApp } from 'vue';
import TDesign from 'tdesign-vue-next';
import 'tdesign-vue-next/es/style/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(TDesign);
app.mount('#app');
```

--------------------------------

### Build Project Dependencies

Source: https://github.com/tencent/tdesign/wiki/release-guid

Before building and releasing, ensure local dependencies are up-to-date and the project builds successfully. This step prevents issues during the GitHub Actions build.

```bash
npm run build
```

--------------------------------

### Create Feature or Fix Branch

Source: https://github.com/tencent/tdesign/blob/main/docs/contributing.md

Creates a new branch for new features or bug fixes. Feature branches should start with 'feat/' and bug fixes with 'fix/'. Always branch from 'develop'.

```Shell
git checkout develop
git checkout -b feat/xxx
```

--------------------------------

### Apply Dark Mode Styles

Source: https://github.com/tencent/tdesign/blob/main/site/spline/design/color_dark/index.html

Sets up basic CSS for a dark theme, fixing the viewport and setting a dark background. Use this for the initial page structure.

```css
body { width: 100%; height: 100%; margin: 0; position: fixed; background: rgba(36,36,36, 1); }
canvas { width: 100%; height: 100%; outline: none; }
#container { width: 100%; height: 100%; position: relative; }
```

--------------------------------

### 引入临时样式文件

Source: https://github.com/tencent/tdesign/blob/main/docs/tech_zh-CN.md

在 UI 开发完成前，组件开发时可引入临时的 less 文件用于开发功能。待 UI 样式完成后，需与 UI 样式对齐并删除此临时 less 文件。

```javascript
// button.tsx

// 先引入临时的样式文件用于开发功能，待 UI 开发完成之后需要与 UI 样式对齐并删除 less 文件
import "./button.less";
```

--------------------------------

### Import Component Bundle and Styles

Source: https://context7.com/tencent/tdesign/llms.txt

Import the main component bundle and its associated stylesheets. Optional imports for syntax highlighting themes are also included.

```javascript
// Import the component bundle and its stylesheet
import '@tdesign/site-components';
import '@tdesign/site-components/lib/styles/style.css';
// Optional: syntax highlighting themes
import '@tdesign/site-components/lib/styles/prism-theme.less';
import '@tdesign/site-components/lib/styles/prism-theme-dark.less';

// Register locale switching support (English / Chinese)
import { registerLocaleChange } from '@tdesign/site-components';
registerLocaleChange();
```

--------------------------------

### Configure and Handle Events for `td-doc-usage`

Source: https://context7.com/tencent/tdesign/llms.txt

Configure `td-doc-usage` by setting `panelList` and `configList` properties. Listen for 'ConfigChange' and 'PanelChange' events to react to user interactions and update the code preview.

```javascript
const usage = document.querySelector('td-doc-usage');

usage.panelList = [
  { label: 'Vue',   value: 'Vue' },
  { label: 'React', value: 'React' },
];

usage.configList = [
  {
    name: 'disabled',
    type: 'Boolean',
    defaultValue: false,
  },
  {
    name: 'theme',
    type: 'Enum',
    defaultValue: 'primary',
    options: [
      { label: 'primary', value: 'primary' },
      { label: 'default', value: 'default' },
      { label: 'danger',  value: 'danger'  },
      { label: 'warning', value: 'warning' },
      { label: 'success', value: 'success' },
    ],
  },
];

// Fired when user changes a config control
usage.addEventListener('ConfigChange', (e) => {
  const { name, value, type } = e.detail;
  // Rebuild code string and re-render the slot
  console.log(`${name} changed to`, value);
});

// Fired when user switches framework panel
usage.addEventListener('PanelChange', (e) => {
  console.log('active panel:', e.detail.value); // 'Vue' | 'React'
});
```

--------------------------------

### Display Live Component Demo with Source Code (`td-doc-demo`)

Source: https://context7.com/tencent/tdesign/llms.txt

Use `td-doc-demo` to wrap a live component preview with a collapsible, syntax-highlighted source code panel. Supports multi-language code tabs by providing code via `data-*` attributes.

```html
<td-doc-demo
  code="<t-button theme='primary'>Primary</t-button>"
  language="markup"
>
  <!-- Live rendered component goes here as slotted content -->
  <t-button theme="primary">Primary</t-button>
</td-doc-demo>
```

```html
<td-doc-demo
  languages="Vue,React"
  language="markup"
  data-vue="<t-button theme='primary'>Primary</t-button>"
  data-react="<Button theme='primary'>Primary</Button>"
>
  <t-button theme="primary">Primary</t-button>
</td-doc-demo>
```

```html
<td-doc-demo mode="open" code="<t-input placeholder='Enter text' />" language="markup">
  <t-input placeholder="Enter text" />
</td-doc-demo>
```

--------------------------------

### TDesign Site Component Initialization

Source: https://github.com/tencent/tdesign/blob/main/packages/site-components/index.html

Initializes various TDesign site components by setting their properties and event listeners. This script configures routing, analytics, demo display, and more.

```javascript
import './lib/site.es.js';
// import './lib/styles/style.css';
import './src/main.js';
import './config/mock.js';

document.querySelector('td-doc-aside').routerList = window.routerList;
document.querySelector('td-doc-aside').onchange = (e) => {
  history.pushState({}, '', e.detail);
  document.querySelector('td-stats').track();
};
document.querySelector('td-doc-header').docInfo = window.docInfo;
document.querySelector('td-doc-demo').oncopy = (e) => console.log('copy:', e);
document.querySelector('td-doc-demo').languages = 'JavaScript,TypeScript,CompositionAPI';
document.querySelector('td-doc-demo').dataset['JavaScript'] = window.code;
document.querySelector('td-doc-demo').dataset['TypeScript'] = window.tsCode;
document.querySelector('td-doc-demo').dataset['CompositionAPI'] = window.compositionCode;
document.querySelectorAll('td-doc-demo').forEach((e) => (e.code = window.code));
document.querySelector('td-contributors').contributors = window.contributors;
document.querySelector('td-doc-search').docsearchInfo = {
  indexName: 'tdesign_doc_react'
};
document.querySelector('td-select').options = [1, 2, 3, 4, 5].map((i) => ({
  label: i,
  value: i
}));
document.querySelector('td-select').onchange = ({ detail }) => console.log('detail', detail);
// document.querySelector('td-switch').onchange = ({ detail }) => console.log('detail', detail)
document.querySelector('td-doc-usage').configList = window.usageConfig;
document.querySelector('td-doc-usage').panelList = window.usagePanelList;
document.querySelector('td-doc-usage').onConfigChange = ({ detail }) => console.log('detail', detail);
// document.querySelector('td-doc-tabs').tabs = [{ tab: 'demo', name: '示例1' }];
// const tdDocPhone = document.querySelector('td-doc-phone');
// tdDocPhone.qrcodeUrl = 'http://localhost:3000/';
// tdDocPhone.QRCode.toCanvas(tdDocPhone.qrCanvas, 'https://github.com/soldair/node-qrcode', {
//   width: 84,
//   height: 84
// });
```

--------------------------------

### Implement Algolia-Powered Search (`td-doc-search`)

Source: https://context7.com/tencent/tdesign/llms.txt

Use `td-doc-search` for a full-featured documentation search with recent history and keyboard navigation. Configure Algolia credentials, filter results by URL, and control programmatic open/close states.

```html
<td-doc-search
  placeholder="Search docs"
  recent-title="Recent"
  empty-title="Start typing to search"
  no-result-title='No results for "{query}"'
  loading-title='Searching "{query}"…'
></td-doc-search>
```

--------------------------------

### Initialize TDesign Application

Source: https://github.com/tencent/tdesign/blob/main/site/spline/design/color_light/index.html

Loads the scene from a JSON file and initializes the TDesign application. It also suppresses console logs, warnings, and errors.

```javascript
import { Application } from '../assets/runtime.js';
const app = new Application();
app.load('./scene.json');
console.log = function() {}
console.warn = function() {}
console.error = function() {}
```

--------------------------------

### Initialize TDesign Application

Source: https://github.com/tencent/tdesign/blob/main/site/spline/design/color_dark/index.html

Loads a scene from a JSON file using the TDesign Application class. This is a common pattern for initializing TDesign experiences.

```javascript
import { Application } from '../assets/runtime.js';

const app = new Application();
app.load('./scene.json');

console.log = function() {}
console.warn = function() {}
console.error = function() {}
```

--------------------------------

### Importing Single Component CSS in ESM

Source: https://context7.com/tencent/tdesign/llms.txt

Demonstrates how to import CSS for a single component using the ESM build, either with compiled CSS or directly from the Less source, optimizing for tree-shaking.

```javascript
// Import only a single component's CSS (optimal tree-shaking)
import { Button } from 'tdesign-vue-next/es/button';
import 'tdesign-vue-next/es/button/style/css.js';

// Or via the Less source (requires Less loader in build config)
import 'tdesign-vue-next/esm/button/style/index.js';
```

--------------------------------

### Contributing Workflow for TDesign

Source: https://context7.com/tencent/tdesign/llms.txt

Steps for contributing to the TDesign repository, including cloning, setting up remotes, syncing with upstream, creating feature branches, and running lint/test commands before committing.

```bash
# Contributing workflow
git clone git@github.com:${YOUR_USERNAME}/tdesign.git
cd tdesign
git remote add upstream https://github.com/Tencent/tdesign.git

# Sync before starting work
git fetch upstream
git rebase upstream/develop

# Create feature branch from develop
git checkout develop
git checkout -b feat/my-improvement

# Lint and run tests before committing
npm run lint
npm run test
```

--------------------------------

### TDesign Component Directory Structure

Source: https://github.com/tencent/tdesign/blob/main/docs/develop-install.md

Illustrates the standard output directory structure for TDesign components, including UMD, ESM, ES, and CommonJS formats.

```bash
├─ dist                        ## umd
│   ├─ tdesign.js
│   ├─ tdesign.js.map
│   ├─ tdesign.min.js
│   ├─ tdesign.min.js.map
│   ├─ tdesign.css
│   ├─ tdesign.css.map
│   └─ tdesign.min.css
├─ esm                                ## esm
│   ├─ button
│        ├─ style
│             └─  index.js
│        ├─ button.js
│        ├─ button.d.ts
│        ├─ index.js
│        └─ index.d.ts
│   ├─ index.js
│   └─ index.d.ts
│
├─ es                                ## es
│   ├─ button
│        ├─ style
│             ├─ css.js
│             ├─ index.css
│             └─ index.js
│        ├─ button.js
│        ├─ button.d.ts
│        ├─ index.js
│        └─ index.d.ts
│   ├─ index.js
│   └─ index.d.ts
│
├─ lib                            ## cjs
│   ├─ button
│        ├─ button.js
│        ├─ button.d.ts
│        ├─ index.js
│        └─ index.d.ts
│   ├─ index.js
│   └─ index.d.ts
│
├─ LICENSE
├─ CHANGELOG.md
├─ README.md
└─ package.json
```

--------------------------------

### Publish npm Package and Deploy Website

Source: https://github.com/tencent/tdesign/wiki/release-guid

After merging the release PR, the CI pipeline automatically publishes the npm package and deploys the new website. Manual verification of the npm publish and website deployment is required.

```bash
npm publish
```

--------------------------------

### Generate Release Notes on GitHub

Source: https://github.com/tencent/tdesign/wiki/release-guid

After publishing the release, navigate to the GitHub repository to create a new release. GitHub's 'Auto-generate release notes' feature can be used to populate initial release information.

```bash
Auto-generate release notes
```

--------------------------------

### Framework Event Naming Convention

Source: https://github.com/tencent/tdesign/wiki/Component-API-Guide

Demonstrates how event names differ across frameworks (React, Vue, Angular, Miniprogram) and how TDesign aims for consistency.

```javascript
<!-- For React -->
<Checkbox onChange={onChange} />

<!-- For Vue -->
<checkbox @change={onChange} />

<!-- For Vue, This won't work in JSX, only works in template -->
<checkbox onChange={onChange} />
```

--------------------------------

### Event Handling in Different Frameworks

Source: https://github.com/tencent/tdesign/wiki/Component-API-Guide

Shows how event handlers are implemented for Vue Props, Vue Emit Events, React Props, Angular Events, and Miniprogram Emit Events.

```javascript
<div :onClick="onClick">For Vue Props</div>

<div @click="onClick">For Vue Emit Event</div>

<div onClick={onClick}>For React Props</div>

<div (cancelClick)="onCancelClick()">For Angular Event</div>

<div bindtap={onTag}>For Miniprogram Emit Event</div>
```

--------------------------------

### Run Lint and Test Commands

Source: https://github.com/tencent/tdesign/blob/main/docs/contributing.md

Executes linting and testing to ensure code quality and check for snapshot changes. Use `npm run lint:fix` to automatically fix linting issues.

```Shell
npm run lint
npm run test
```

--------------------------------

### Configure Git Account

Source: https://github.com/tencent/tdesign/blob/main/docs/contributing.md

Configure your local Git username and email to avoid exposing personal or company information in commit history. This is crucial before submitting code.

```Shell
## cd ${PROJECT}
$ git config user.name "your name"
$ git config user.email "your email address"
```

--------------------------------

### Handle Language Tab Switch in `td-doc-demo`

Source: https://context7.com/tencent/tdesign/llms.txt

Listen for the 'click' event on `td-doc-demo` to detect when a user switches language tabs. The event detail provides the index and name of the selected language.

```javascript
const demo = document.querySelector('td-doc-demo');
demo.addEventListener('click', (e) => {
  // Fired when user switches language tab
  console.log('language tab index:', e.detail.index);
  console.log('language name:',      e.detail.lang);  // 'Vue' | 'React'
});
```

--------------------------------

### CSS for TDesign Light Mode Layout

Source: https://github.com/tencent/tdesign/blob/main/site/spline/design/mode_light/index.html

Sets up the basic layout and styling for the TDesign light mode, ensuring full viewport coverage and a clean background. This CSS should be applied globally.

```css
body { width: 100%; height: 100%; margin: 0; position: fixed; background: rgba(255,255,255, 1); }
canvas { width: 100%; height: 100%; outline: none; }
#container { width: 100%; height: 100%; position: relative; }
```

--------------------------------

### Configure `td-header` Web Component Programmatically

Source: https://context7.com/tencent/tdesign/llms.txt

Programmatically configure the `td-header` component's properties such as platform, framework, and theme/locale toggle visibility. Also demonstrates listening for language change events.

```javascript
// Programmatic configuration
const header = document.querySelector('td-header');
header.platform  = 'web';        // 'web' | 'mobile'
header.framework = 'vue-next';   // 'vue' | 'vue-next' | 'react' | 'miniprogram' | ...
header.disabledTheme  = false;   // hide theme toggle
header.disabledLocale = false;   // hide language toggle

// Language toggle event (dispatched on the document)
document.addEventListener('tdesign_site_lang', (e) => {
  console.log('switched to:', e.detail); // 'zh' | 'en'
});
```

--------------------------------

### Generate Release Changelog

Source: https://github.com/tencent/tdesign/wiki/release-guid

After creating a release branch and updating the version in package.json, a Pull Request is created. CI bots automatically comment with the generated changelog for the release cycle.

```bash
git checkout -b release/x.y.z

```

```bash
npm run robot
```