### Stepper Component Theming Example

Source: https://github.com/tencent/tdesign-common/blob/develop/docs/mobile/api/stepper.md

Demonstrates different visual themes available for the Stepper component. This example is for Vue and showcases theme customization.

```vue
<template>
  <t-stepper v-model="value1" theme="column"></t-stepper>
  <t-stepper v-model="value2" theme="row-outline"></t-stepper>
  <t-stepper v-model="value3" theme="button-round"></t-stepper>
</template>

<script setup>
import { ref } from 'vue';

const value1 = ref(1);
const value2 = ref(2);
const value3 = ref(3);
</script>
```

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

### Image Display Best Practices (Good/Bad Examples) in HTML

Source: https://github.com/tencent/tdesign-common/blob/develop/docs/mobile/flutter_design/image.md

This HTML snippet presents examples of recommended and discouraged practices for displaying images when they are purely for visual presentation and lack preview functionality. It highlights the importance of appropriate image sizing to ensure clarity and accessibility of information.

```html
<div class="legend">
  <div class="item">
    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/image/image-4.png" />
    <img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://tdesign.gtimg.com/site/design/mobile-guide/image/image-5.png" />
    <img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
  </div>
</div>
```

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

### Basic Stepper Component Example

Source: https://github.com/tencent/tdesign-common/blob/develop/docs/mobile/api/stepper.md

Demonstrates the fundamental usage of the Stepper component for quantity adjustments. This example requires the TDesign Vue framework.

```vue
<template>
  <t-stepper v-model="value"></t-stepper>
</template>

<script setup>
import { ref } from 'vue';

const value = ref(1);
</script>
```

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

### Stepper Component Size Variants Example

Source: https://github.com/tencent/tdesign-common/blob/develop/docs/mobile/api/stepper.md

Presents various size options for the Stepper component, allowing adjustments to its visual dimensions. This example is for Vue.

```vue
<template>
  <t-stepper v-model="value1" size="small"></t-stepper>
  <t-stepper v-model="value2" size="medium"></t-stepper>
  <t-stepper v-model="value3" size="large"></t-stepper>
</template>

<script setup>
import { ref } from 'vue';

const value1 = ref(1);
const value2 = ref(2);
const value3 = ref(3);
</script>
```

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

### Typical Form Example

Source: https://github.com/tencent/tdesign-common/blob/develop/docs/web/api/form.md

Demonstrates a typical form structure with various input controls. It highlights how submit and reset buttons trigger events, and how instance methods can be used for submission and reset when buttons are absent.

```vue
<template>
  <t-form @submit="onSubmit" @reset="onReset">
    <t-form-item label="Name" name="name">
      <t-input v-model="formData.name"></t-input>
    </t-form-item>
    <t-form-item label="Age" name="age">
      <t-input-number v-model="formData.age"></t-input-number>
    </t-form-item>
    <t-form-item>
      <t-button theme="primary" type="submit">Submit</t-button>
      <t-button theme="default" type="reset">Reset</t-button>
    </t-form-item>
  </t-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const formData = ref({
  name: '',
  age: 0,
});

const onSubmit = ({ validateResult, firstError }) => {
  if (validateResult) {
    console.log('Form submitted:', formData.value);
  } else {
    console.log('Form validation failed:', firstError);
  }
};

const onReset = () => {
  console.log('Form reset');
};
</script>
```

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

### Form Alignment and Layout Examples

Source: https://github.com/tencent/tdesign-common/blob/develop/docs/web/api/form.md

Demonstrates different label alignment options (right, left, top) and layout configurations for form elements to suit various design needs.

```vue
<template>
  <div>
    <h6>Right Aligned (Default)</h6>
    <t-form :label-width="'80px'">
      <t-form-item label="Name">
        <t-input />
      </t-form-item>
    </t-form>

    <h6>Left Aligned</h6>
    <t-form label-align="left" :label-width="'80px'">
      <t-form-item label="Name">
        <t-input />
      </t-form-item>
    </t-form>

    <h6>Top Aligned</h6>
    <t-form label-align="top">
      <t-form-item label="Name">
        <t-input />
      </t-form-item>
    </t-form>

    <h6>Inline Layout</h6>
    <t-form layout="inline">
      <t-form-item label="Name">
        <t-input />
      </t-form-item>
      <t-form-item label="Age">
        <t-input-number />
      </t-form-item>
    </t-form>
  </div>
</template>

<script lang="ts" setup>
// No script needed for this example
</script>
```

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

### Loading Plugins Dynamically in ChatMarkdown (KaTeX)

Source: https://github.com/tencent/tdesign-common/blob/develop/docs/web/api/chat-markdown.md

Shows how to dynamically load plugins for the cherry-markdown engine used by ChatMarkdown. This example specifically demonstrates loading the KaTeX plugin for rendering mathematical formulas.

```vue
<template>
  <chat-markdown :content="markdownContent" :options="markdownOptions"></chat-markdown>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import ChatMarkdown from 'tdesign-common/components/ChatMarkdown';

export default defineComponent({
  components: {
    ChatMarkdown
  },
  data() {
    return {
      markdownContent: '$$ E = mc^2 $$',
      markdownOptions: {
        options: {
          plugins: [
            async () => {
              const { default: katex } = await import('katex');
              return {
                name: 'katex',
                render: (text: string) => katex.renderToString(text)
              };
            }
          ]
        }
      }
    };
  }
});
</script>
```

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

### Login Form Example

Source: https://github.com/tencent/tdesign-common/blob/develop/docs/web/api/form.md

A specialized form component designed for user authentication, typically including fields for username and password.

```vue
<template>
  <t-form @submit="onLogin" :model="loginData" :rules="loginRules">
    <t-form-item label="Username" name="username">
      <t-input v-model="loginData.username"></t-input>
    </t-form-item>
    <t-form-item label="Password" name="password">
      <t-input type="password" v-model="loginData.password"></t-input>
    </t-form-item>
    <t-form-item>
      <t-button theme="primary" type="submit">Login</t-button>
    </t-form-item>
  </t-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const loginData = ref({
  username: '',
  password: '',
});

const loginRules = {
  username: [{ required: true, message: 'Username is required', type: 'error' }],
  password: [{ required: true, message: 'Password is required', type: 'error' }],
};

const onLogin = ({ validateResult, firstError }) => {
  if (validateResult) {
    console.log('Login attempt:', loginData.value);
    // Handle login logic
  } else {
    console.log('Login failed:', firstError);
  }
};
</script>
```

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

### Stepper Component with Min/Max Limits

Source: https://github.com/tencent/tdesign-common/blob/develop/docs/mobile/api/stepper.md

Illustrates how to configure minimum and maximum values for the Stepper component to control the range of adjustments. This example is for Vue.

```vue
<template>
  <t-stepper v-model="value" :min="0" :max="10"></t-stepper>
</template>

<script setup>
import { ref } from 'vue';

const value = ref(5);
</script>
```

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

### TDesign Common Project Directory Structure

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

This Bash script illustrates the typical directory structure of the TDesign common project, showing output directories for different module formats (UMD, ESM, ES, CJS), component-specific files, and essential project files like LICENSE, CHANGELOG.md, README.md, and package.json.

```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                            ## es
│   ├─ button
│        ├─ button.js
│        ├─ button.d.ts
│        ├─ index.js
│        └─ index.d.ts
│   ├─ index.js
│   └─ index.d.ts
|
├─ ejs                            ## cjs
│   ├─ button
│        ├─ button.js
│        ├─ button.d.ts
│        ├─ index.js
│        └─ index.d.ts
│   ├─ index.js
│   └─ index.d.ts
│
├─ LICENSE
├─ CHANGELOG.md
├─ README.md
└─ package.json
```

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

### Disabled Stepper Component Example

Source: https://github.com/tencent/tdesign-common/blob/develop/docs/mobile/api/stepper.md

Shows how to disable the Stepper component, preventing any user interaction for quantity changes. This example is implemented in Vue.

```vue
<template>
  <t-stepper v-model="value" disabled></t-stepper>
</template>

<script setup>
import { ref } from 'vue';

const value = ref(1);
</script>
```

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

### Disabled Form Item Example

Source: https://github.com/tencent/tdesign-common/blob/develop/docs/web/api/form.md

Demonstrates how to disable individual form items using the `disabled` attribute, preventing user interaction and input.

```vue
<template>
  <t-form>
    <t-form-item label="Enabled Field">
      <t-input />
    </t-form-item>
    <t-form-item label="Disabled Field" :disabled="true">
      <t-input />
    </t-form-item>
  </t-form>
</template>

<script lang="ts" setup>
// No script needed for this example
</script>
```

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

### Configure Tree Structure Table with EnhancedTable

Source: https://github.com/tencent/tdesign-common/blob/develop/docs/web/api/table.en-US.md

Demonstrates how to configure the EnhancedTable component for tree structure display. It highlights key properties like `childrenKey`, `indent`, `treeNodeColumnIndex`, `checkStrictly`, and `defaultExpandAll` for customizing tree behavior and appearance.

```javascript
import EnhancedTable from 'tdesign-common/es/table/enhanced-table';

// Example configuration for tree structure
const tableConfig = {
  tree: {
    childrenKey: 'list', // Define alias for child nodes
    indent: 20, // Set indentation distance
    treeNodeColumnIndex: 1, // Set column for tree operations
    checkStrictly: true, // Independent row selection
    defaultExpandAll: true // Expand all nodes by default
  }
};

// Usage within a component
<EnhancedTable :data="treeData" :columns="columns" v-bind="tableConfig" />
```

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

### Configure Global Settings and Internationalization with TDesign

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

Demonstrates how to configure global settings such as CSS class prefixes, animation options, and component defaults. It also shows how to integrate different language locales for internationalization, providing examples for Chinese (zh_CN), English (en_US), and Japanese (ja_JP). This configuration is typically used with TDesign's ConfigProvider component in Vue or React.

```typescript
import defaultConfig from '@tdesign/common/js/global-config/default-config';
import zhCN from '@tdesign/common/js/global-config/locale/zh_CN';
import enUS from '@tdesign/common/js/global-config/locale/en_US';
import jaJP from '@tdesign/common/js/global-config/locale/ja_JP';

// 默认配置结构
const globalConfig = {
  classPrefix: 't',
  animation: {
    include: ['ripple', 'expand', 'fade'],
    exclude: [],
  },
  calendar: {
    firstDayOfWeek: 1,
    fillWithZero: true,
  },
  dialog: {
    closeOnEscKeydown: true,
    closeOnOverlayClick: true,
    confirmBtnTheme: {
      default: 'primary',
      warning: 'primary',
      danger: 'primary',
    },
  },
  drawer: {
    closeOnEscKeydown: true,
    closeOnOverlayClick: true,
    size: 'small',
  },
  table: {
    hideSortTips: false,
    size: 'medium',
  },
  datePicker: {
    firstDayOfWeek: 1,
  },
  ...defaultConfig,
};

// 国际化配置示例（中文）
const locale = {
  pagination: {
    itemsPerPage: '{size} 条/页',
    jumpTo: '跳至',
    page: '页',
    total: '共 {count} 条数据',
  },
  dialog: {
    confirm: '确认',
    cancel: '取消',
  },
  table: {
    empty: '暂无数据',
    loadingText: '正在加载中，请稍后',
    sortAscendingOperationText: '点击升序',
    sortDescendingOperationText: '点击降序',
  },
  datePicker: {
    placeholder: { date: '请选择日期', month: '请选择月份' },
    weekdays: ['一', '二', '三', '四', '五', '六', '日'],
    confirm: '确定',
  },
  upload: {
    sizeLimitMessage: '文件大小不能超过 {sizeLimit}',
    triggerUploadText: {
      fileInput: '选择文件',
      reupload: '重新选择',
      uploading: '上传中',
    },
  },
  form: {
    errorMessage: {
      required: '${name}必填',
      max: '${name}字符长度不能超过 ${validate} 个字符',
      pattern: '请输入正确的${name}',
    },
  },
  ...zhCN,
};

// 在 Vue/React 中使用 ConfigProvider
// Vue: <t-config-provider :globalConfig="globalConfig" :locale="locale">
// React: <ConfigProvider globalConfig={globalConfig} locale={locale}>

```

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

### BEM Structure Example

Source: https://github.com/tencent/tdesign-common/blob/develop/css-naming.md

Illustrates the standard BEM naming structure: prefix-block__element--modifier. This structure helps in organizing CSS classes for better maintainability and avoiding style conflicts.

```html
<div class="prefix-block__element-name--modifier-name">
  <!-- Content -->
</div>
```

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

### Control Tree Node Expansion and Collapse

Source: https://github.com/tencent/tdesign-common/blob/develop/docs/web/api/table.en-US.md

Illustrates how to programmatically control the expansion and collapse of nodes in a tree structure table using TDesign's EnhancedTable component instance methods. This includes expanding all, collapsing all, and toggling individual nodes.

```javascript
import EnhancedTable from 'tdesign-common/es/table/enhanced-table';

// Assuming 'enhancedTableRef' is a ref to the EnhancedTable component instance
const enhancedTableRef = ref(null);

// Expand all nodes
const expandAllNodes = () => {
  enhancedTableRef.value?.expandAll();
};

// Collapse all nodes
const collapseAllNodes = () => {
  enhancedTableRef.value?.foldAll();
};

// Toggle expansion of a specific node
const toggleNodeExpansion = (nodeId) => {
  enhancedTableRef.value?.toggleExpandData(nodeId);
};

// Refresh table data
const refreshTableData = () => {
  enhancedTableRef.value?.resetData();
};

// Get tree node data
const getTreeNodeData = (nodeId) => {
  return enhancedTableRef.value?.getTreeNode(nodeId);
};
```

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

### Form Reset Functionality Examples

Source: https://github.com/tencent/tdesign-common/blob/develop/docs/web/api/form.md

Illustrates different ways to reset form data: clearing all fields to empty, resetting to initial values, or selectively resetting specific fields using instance methods.

```vue
<template>
  <div>
    <h6>Reset to Empty</h6>
    <t-form ref="formEmptyRef" reset-type="empty">
      <t-form-item label="Name">
        <t-input />
      </t-form-item>
      <t-form-item>
        <t-button type="reset">Reset to Empty</t-button>
      </t-form-item>
    </t-form>

    <h6>Reset to Initial</h6>
    <t-form ref="formInitialRef" reset-type="initial">
      <t-form-item label="Name">
        <t-input />
      </t-form-item>
      <t-form-item>
        <t-button type="reset">Reset to Initial</t-button>
      </t-form-item>
    </t-form>

    <h6>Reset Specific Fields (via instance method)</h6>
    <t-form ref="formSpecificRef">
      <t-form-item label="Name">
        <t-input />
      </t-form-item>
      <t-form-item label="Age">
        <t-input-number />
      </t-form-item>
      <t-form-item>
        <t-button @click="resetSpecificFields">Reset Name Field</t-button>
      </t-form-item>
    </t-form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const formEmptyRef = ref();
const formInitialRef = ref();
const formSpecificRef = ref();

const resetSpecificFields = () => {
  formSpecificRef.value?.reset({ fields: ['name'] });
  console.log('Name field reset');
};
</script>
```

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

### Subscribe to Tool State Externally with useAgentState (React)

Source: https://github.com/tencent/tdesign-common/blob/develop/docs/web/api/chat-engine.md

Demonstrates how to use the `useAgentState` hook in a React component to subscribe to tool execution states. This allows external UI elements, like a global progress bar, to display real-time task progress and status updates pushed via `STATE_SNAPSHOT` and `STATE_DELTA` events.

```javascript
import React from 'react';
import { useAgentState } from '@tdesign/agent-ui'; // Assuming this is the correct import path

// External progress panel component
const GlobalProgressBar: React.FC = () => {
  // Use useAgentState to subscribe to state
  const { stateMap, currentStateKey } = useAgentState();

  /* Backend pushes state data via STATE_SNAPSHOT and STATE_DELTA events, simulated data as follows:
  //
  // STATE_SNAPSHOT (initial snapshot):
  // data: {"type":"STATE_SNAPSHOT","snapshot":{"task_xxx":{"progress":0,"message":"Preparing to plan...","items":[]}}}
  //
  // STATE_DELTA (incremental update, using JSON Patch format):
  // data: {"type":"STATE_DELTA","delta":[
  //   {"op":"replace","path":"/task_xxx/progress","value":20},
  //   {"op":"replace","path":"/task_xxx/message","value":"Analyzing destination information"},
  //   {"op":"replace","path":"/task_xxx/items","value":[{"label":"Analyzing destination information","status":"running"}]}
  // ]}
  */

  // useAgentState automatically handles these events and merges snapshot and delta into stateMap

  // Get current task state
  const currentState = currentStateKey ? stateMap[currentStateKey] : null;

  // items array contains information for each task step
  // Each item includes: label (step name), status (state: running/completed/failed)
  const items = currentState?.items || [];
  const completedCount = items.filter((item: any) => item.status === 'completed').length;

  return (
    <div>
      <div>
        Progress: {completedCount}/{items.length}
      </div>
      {items.map((item: any, index: any) => (
        <div key={index}>
          {item.label} - {item.status}
        </div>
      ))}
    </div>
  );
};

```

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

### Custom Syntax Rendering (Footnotes) in ChatMarkdown

Source: https://github.com/tencent/tdesign-common/blob/develop/docs/web/api/chat-markdown.md

Demonstrates how to implement custom syntax rendering in ChatMarkdown using the `createSyntaxHook` mechanism from cherry-markdown. This example shows how to create custom footnote syntax.

```vue
<template>
  <chat-markdown :content="markdownContent" :options="markdownOptions"></chat-markdown>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import ChatMarkdown from 'tdesign-common/components/ChatMarkdown';

export default defineComponent({
  components: {
    ChatMarkdown
  },
  data() {
    return {
      markdownContent: 'Here is a reference[^1]\n[^1]: My footnote content',
      markdownOptions: {
        options: {
          syntax: {
            hooks: {
              footnote: (meta: any) => {
                return `<sup id=\"fnref-${meta.index}\"><a href=\"#fn-${meta.index}\">${meta.index}</a></sup>`;
              },
              footnoteBlock: (meta: any) => {
                return `<div class=\"footnotes\">\n  <hr>\n  <ol>\n    ${meta.items.map((item: any) => `<li id=\"fn-${item.index}\">${item.content}</li>`).join('')}\n  </ol>\n</div>`;
              }
            }
          }
        }
      }
    };
  }
});
</script>
```