### Running Project Start Script

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This script command is used to start the TDesign Web Components project locally. It typically launches a development server, allowing developers to view and interact with the components in a browser, facilitating local development and testing.

```Bash
# 启动项目
npm run start
```

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

### Installing Project Dependencies with npm

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This command installs all necessary project dependencies defined in the `package.json` file. It's a standard first step after cloning the repository to ensure all required packages are available for development.

```Bash
npm i
```

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

### Starting Local Development Server for TDesign Web Components

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This command initiates the local development server, making the TDesign Web Components project accessible in a web browser. It typically serves the application at `http://127.0.0.1:15000` for live development and testing.

```Shell
npm run start
```

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

### Initializing New Component (Currently Unsupported)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This script command is intended for quickly creating new components and their associated files. However, the documentation explicitly states that this functionality is currently unsupported, requiring manual setup for new components.

```Bash
# 快速创建组件及其相关文件（暂不支持）
npm run init
```

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

### Running All Unit Tests Including SSR Examples

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This script command executes all unit test cases for the project, including Server-Side Rendering (SSR) tests for all component examples. It provides comprehensive test coverage to ensure component functionality and compatibility.

```Bash
# 运行全部单元测试用例(包括所有example的ssr测试)
npm run test
```

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

### Compiling Project Site

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This script command compiles the entire project site. This process typically involves building the documentation, examples, and other static assets required for the website, preparing it for deployment or preview.

```Bash
# 编译站点
npm run site
```

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

### Compiling and Previewing Project Site

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This script command compiles the project site and then launches a local server to preview the compiled output. It's useful for reviewing the site's appearance and functionality before final deployment.

```Bash
# 编译站点预览
npm run site:preview
```

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

### TDesign Web Components Project Directory Structure

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This snippet illustrates the core directory structure of the TDesign Web Components project. It highlights the `site` directory for site-specific code, `src` for component code, and specific subdirectories within `src/[组件]` for tests (`__tests__`) and examples (`_example`), along with a top-level `test` directory for general test configurations.

```Shell
├── site # 站点代码
├── src # 组件代码
├── src/[组件]/__tests__ # 测试文件
├── src/[组件]/_example # 演示文件
├── test # 测试配置
```

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

### Installing TDesign Web Components with pnpm

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/README.md

This command installs the TDesign Web Components library using the pnpm package manager. It adds the package as a dependency to your project, allowing the use of its UI components.

```shell
pnpm add tdesign-web-components
```

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

### Including Additional Demo in Markdown Documentation

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This Markdown snippet illustrates the syntax for embedding an additional demo, `PrimaryButton`, into a component's documentation. This mechanism allows developers to easily include various code examples and demonstrations within the Markdown files, enhancing the clarity and completeness of the component's usage guide.

```Markdown
{{ PrimaryButton }}
```

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

### Installing TDesign Web Components with Yarn

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/README.md

This command installs the TDesign Web Components library using the Yarn package manager. It adds the package as a dependency to your project, enabling access to its UI components.

```shell
yarn add tdesign-web-components
```

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

### Installing TDesign Web Components with npm

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/README.md

This command installs the TDesign Web Components library using the npm package manager. It adds the package as a dependency to your project, making its UI components available for use.

```shell
npm i tdesign-web-components
```

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

### Including Arrow Tooltip Demo in Markdown Documentation

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This Markdown snippet shows how to embed a specific demo, `arrow`, into the documentation for the Tooltip component. The `{{ arrow }}` syntax acts as a placeholder that will be replaced with the actual code example from the `_example` folder, ensuring consistent demo presentation across different technology stacks.

```Markdown
# Tooltip 文字提示

用于文字提示的气泡框。

### 带箭头的文字提示

{{ arrow }}

...
```

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

### Building Component Library

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This script command compiles the TDesign Web Components library itself. This process typically generates the production-ready bundles of the components, including minified JavaScript and CSS, for distribution and use in other projects.

```Bash
# 编译组件库
npm run build
```

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

### Running All Unit Tests

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This script command runs all unit test cases across the entire project. It's used to verify the individual functionalities of components and modules, ensuring their correctness and stability.

```Bash
# 运行全部单元测试用例
npm run test:unit
```

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

### Installing TDesign Web Components with npm

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/site/docs/react.md

This snippet demonstrates how to install the TDesign Web Components library using npm, which is the standard package manager for JavaScript projects. This is the first step to integrate the components into your application.

```bash
npm i tdesign-web-components
```

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

### Initializing Git Submodule for tdesign-common

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This command sequence initializes and updates the Git submodule, typically used after the initial cloning of the main repository. It ensures the `tdesign-common` sub-repository is properly set up and points to a specific commit, enabling access to shared styles and utility functions.

```Bash
git submodule init && git submodule update
```

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

### Running Specific Component Unit Tests

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This script command allows developers to run unit tests for one or more specified components. By replacing `xxx` with component directory names (e.g., `button affix`), it enables focused testing, saving time during development.

```Bash
# 运行指定组件单元测试用例，xxx表示组件目录名称, 多个组件用空格分开
# eg: npm run test:unit button affix
npm run test:unit xxx
```

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

### Running All End-to-End Tests

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This script command executes all end-to-end (e2e) test cases for the project. E2E tests simulate real user interactions to ensure that the entire application flow works as expected from a user's perspective.

```Bash
# 运行全部e2e测试用例
npm run test:e2e
```

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

### Viewing ESLint Errors

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This script command runs ESLint to check for code style and quality issues without automatically fixing them. It displays a list of detected errors and warnings, allowing developers to review and manually address them.

```Bash
# 查看 eslint 错误
npm run lint
```

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

### Generating Test Coverage Report

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This script command generates a comprehensive test coverage report for the project. It analyzes which parts of the code are covered by tests, providing insights into the effectiveness of the test suite and identifying areas that need more testing.

```Bash
# 生成测试覆盖率
npm run update:coverage-badge
```

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

### Updating Test Case Snapshots

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This script command updates the snapshots used in testing. Snapshots capture the rendered output of components, and this command is used to refresh them when intentional changes are made to the UI, ensuring tests remain accurate.

```Bash
# 更新测试用例snapshot
npm run test:update
```

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

### Running Specific Component End-to-End Tests

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This script command allows developers to run end-to-end tests specifically for one or more designated components. By providing component directory names, it enables targeted e2e testing, which is efficient for verifying changes to particular components.

```Bash
# 运行指定组件（空格分割）e2e测试用例，xxx表示组件目录名称
npm run test:e2e xxx
```

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

### Configuring Component Page Routes in TDesign Web Components

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This JavaScript object demonstrates how to configure routes for component documentation pages within the `sidebar.config.ts` file. Each component, like 'Button', is defined with a title, name, path, and a dynamic import for its corresponding Markdown documentation file, enabling modular and organized routing.

```JavaScript
{
  title: '基础组件',
  type: 'component', // 组件文档
  children: [
    {
        title: 'Button 按钮',
        name: 'button',
        path: '/components/button',
        component: () => import('tdesign-web-components/button/README.md'),
    },
    ...
  ],
},
```

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

### Running End-to-End Tests in GUI Mode

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This script command executes end-to-end tests in a graphical user interface (GUI) mode. This mode allows developers to visually observe the test execution, which is helpful for debugging and understanding test failures.

```Bash
# gui模式运行查看e2e测试用例
npm run test:e2e-gui
```

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

### Basic Usage of TDesign Web Components in TypeScript/JavaScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/README.md

This snippet demonstrates the basic integration of TDesign Web Components. It imports the necessary CSS styles and the 't-button' component, then dynamically adds a success-themed button to the document body. This requires a module bundler setup to resolve imports.

```tsx
import 'tdesign-web-components/lib/style/index.css'
import 'tdesign-web-components/lib/button'

document.body.innerHTML = `<t-button theme="success">按钮</t-button>`;
```

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

### Updating Website Component Unit Coverage Badge

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This script command updates the unit test coverage badge displayed on the project's website. It's used to reflect the current state of code coverage for the components, providing a visual indicator of testing completeness.

```Bash
# 更新网站组件单元覆盖率徽章
npm run update:coverage-badge
```

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

### Automatically Fixing ESLint Errors

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/DEVELOP_GUIDE.md

This script command automatically fixes fixable ESLint errors in the codebase. It helps maintain code quality and consistency by applying predefined linting rules, reducing manual code style corrections.

```Bash
# 自动修复 eslint 错误
npm run lint:fix
```

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

### Fine-grained Component Customization with Less Variables

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/site/docs/theme.md

This Less snippet illustrates how to customize specific component properties, using the Button component as an example. It shows how to modify variables like button heights and border-radius, allowing for detailed styling adjustments beyond global theme settings. This approach is suitable for projects using the Less technology stack.

```Less
// 以 Button 为例

@btn-height-s: 24px;
@btn-height-default: 32px;
@btn-height-l: 40px;

@btn-border-radius: @border-radius-default;
```

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

### Importing Specific Icons On-Demand - TDesign Web Components - JavaScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/icon/README.md

This snippet demonstrates how to import individual icons on demand. This approach is recommended to reduce the final bundle size by only including the necessary icon assets. It directly imports a specific icon component, such as 'add', from the `tdesign-icons-web-components` package.

```JavaScript
import 'tdesign-icons-web-components/esm/components/add';
```

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

### Importing IconFont Styles and Components - TDesign Web Components - JavaScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/icon/README.md

This code illustrates how to use icons in IconFont format. It requires importing both the minimal CSS definitions for the IconFont and the corresponding JavaScript component. This method allows for flexible icon usage, leveraging CSS for styling and the component for rendering.

```JavaScript
import 'tdesign-icons-web-components/esm/iconfont/index.css';

import 'tdesign-icons-web-components/esm/iconfont';
```

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

### Importing TDesign Components for Less Variable Customization

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/site/docs/theme.md

This JavaScript snippet shows the required import statements when customizing TDesign components using Less variables. It demonstrates how to import individual components and the global style resources from the ESM (ECMAScript Module) build, which is necessary to enable Less variable modification in your project.

```JavaScript
// tdesign-npm-name 替换为当前在使用的包名称，component-name替换为正在使用的组件名称
import "tdesign-npm-name/esm/component-name";
// 引入组件库全局样式资源
import "tdesign-npm-name/esm/style/index.js";
```

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

### Triggering File Selector in TDesign Upload (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

Component instance method to programmatically open the file selection dialog.

```TypeScript
triggerUpload(): void
```

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

### Handling Successful Upload in TDesign Upload (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

`context.currentFiles` refers to files uploaded in the current request (regardless of success/failure). `context.fileList` refers to successfully uploaded files. `context.response` is the upload request's return data. `context.results` contains response results for all files in a single selection, useful for overall success/failure notifications. Dependencies: `SuccessContext`.

```TypeScript
interface SuccessContext { e?: ProgressEvent; file?: UploadFile; fileList?: UploadFile[]; currentFiles?: UploadFile[]; response?: any; results?: SuccessContext[]; XMLHttpRequest?: XMLHttpRequest }
(context: SuccessContext) => void
```

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

### Setting Upload File Progress in TDesign Upload (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

Component instance method to manually set the upload progress for a specific file.

```TypeScript
uploadFilePercent(params: { file: UploadFile; percent: number }): void
```

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

### Defining Tips Property Type (tips) in TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

The `tips` property accepts either a string or a TNode, allowing for flexible text hints below the component. The text status can be defined using the `status` property.

```TypeScript
TS 类型：`string | TNode`
```

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

### Using TDesign Web Components in React

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/site/docs/react.md

This React component demonstrates importing TDesign styles and a specific component (`t-button`), managing component state with `useState`, handling events with `useEffect` and `useRef`, and rendering a TDesign web component. It shows how to dynamically change a component's theme based on user interaction.

```javascript
import 'tdesign-web-components/lib/style/index.css'; // 少量公共样式
import 'tdesign-web-components/lib/button';

const App = () => {
  const button = React.useRef();
  const [theme, setTheme] = React.useState('success')

  const clickFn = () => {
    setTheme(theme === 'success' ? 'warning' : 'success');
  }

  React.useEffect(() => {
    button.current.addEventListener('click', clickFn)
    return () => {
      button.current.removeEventListener('click', clickFn)
    }
  }, [theme])

  return (
    <t-button ref={button} theme={theme}>按钮</t-button>
  )
}
```

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

### Uploading Files in TDesign Upload (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

Component instance method. When called without parameters, it uploads all files that have not yet been successfully uploaded. When called with parameters, it uploads the specified files.

```TypeScript
uploadFiles(files?: UploadFile[]): void
```

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

### Retrieving All Icon Names - TDesign Web Components - JavaScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/icon/README.md

This snippet shows how to programmatically access a list of all available icon names. By importing the `manifest` object from the `tdesign-icons-web-components` package, developers can obtain a comprehensive array of icon identifiers, useful for dynamic icon selection or validation.

```JavaScript
import { manifest } from 'tdesign-icons-web-components'
```

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

### Defining AI Assistant Message Interface - TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/chatbot/README.md

This interface defines the structure for an AI assistant's message, extending `ChatBaseMessage`. It specifies the fixed 'assistant' role, an array of `AIMessageContent` for the message body, and an optional `comment` field for user feedback (good/bad).

```TypeScript
interface AIMessage extends ChatBaseMessage {
  role: 'assistant';  // 固定为'assistant'
  content: AIMessageContent[];  // 消息内容数组
  comment?: 'good' | 'bad';  // 用户反馈：'good'(点赞)、'bad'(点踩)
}
```

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

### Configuring Less Variables with modifyVars in Build Tools

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/site/docs/theme.md

This JavaScript configuration snippet demonstrates how to use `modifyVars` within a Less loader configuration (e.g., in Webpack) to override Less variables at build time. It shows how to set a new value for `@brand-color` and enables JavaScript execution within Less, facilitating dynamic theme adjustments during the build process.

```JavaScript
{
    loaderOptions: {
        less: {
            lessOptions: {
                modifyVars: {
                    '@brand-color': '#ebb105'
                },
                javascriptEnabled: true
            }
        }
    }
}
```

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

### Handling Upload Progress in TDesign Upload (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

Triggers when upload progress changes, for both real and mock progress. Small files might only trigger 0% and 100% progress. To show intermediate progress for small files, set `useMockProgress=true` and `mockProgressDuration` to a smaller value. `options.type='real'` indicates real progress, `options.type='mock'` indicates mock progress. Dependencies: `ProgressContext`, `UploadFile`, `UploadProgressType`.

```TypeScript
interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType; XMLHttpRequest?: XMLHttpRequest }
type UploadProgressType = 'real' | 'mock';
(options: ProgressContext) => void
```

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

### Defining Attachment Content and Item Interfaces - TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/chatbot/README.md

These interfaces define the structure for handling file attachments within an AI message. `AttachmentContent` holds an array of `AttachmentItem`s, each describing a single file with its type, name, URL, size, and optional metadata like dimensions and a reference flag.

```TypeScript
interface AttachmentContent {
  type: 'attachment';  // 固定为'attachment'
  data: AttachmentItem[];  // 附件项数组
  status?: ChatMessageStatus;  // 内容状态
  id?: string;  // 内容ID
}

interface AttachmentItem {
  fileType: AttachmentType;  // 文件类型：'image'|'video'|'audio'|'pdf'|'doc'|'ppt'|'txt'
  name: string;  // 文件名
  url: string;  // 文件URL
  size: number;  // 文件大小(字节)
  isReference?: boolean;  // 是否是引用文件
  width?: number;  // 图片/视频宽度(像素)
  height?: number;  // 图片/视频高度(像素)
  metadata?: Record<string, any>;  // 元数据
}
```

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

### Defining OnPreview Event Type (onPreview) in TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

The `onPreview` event is triggered when a user clicks on an image for preview. It provides context including the file object, its index in the list, and the mouse event.

```TypeScript
TS 类型：`(options: { file: UploadFile; index: number; e: MouseEvent }) => void`
```

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

### Configuring File Size Limit (sizeLimit) in TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

The `sizeLimit` property defines the maximum allowed size for image files, with a default unit of KB. It can be a number or an object specifying the size, unit (B, KB, MB, GB), and an optional custom message.

```TypeScript
TS 类型：`number | SizeLimitObj`
```

```TypeScript
interface SizeLimitObj { size: number; unit: SizeUnit ; message?: string }
```

```TypeScript
type SizeUnitArray = ['B', 'KB', 'MB', 'GB']
```

```TypeScript
type SizeUnit = SizeUnitArray[number]
```

```JavaScript
1000
```

```JavaScript
{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }
```

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

### Defining OnChange Event Type (onChange) in TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

The `onChange` event fires when the list of uploaded files changes. It provides the updated file list and a context object detailing the trigger source, response, and specific file information.

```TypeScript
TS 类型：`(value: Array<T>, context: UploadChangeContext) => void`
```

```TypeScript
interface UploadChangeContext { e?: MouseEvent | ProgressEvent; response?: any; trigger: UploadChangeTrigger; index?: number; file?: UploadFile; files?: UploadFile[] }
```

```TypeScript
type UploadChangeTrigger = 'add' | 'remove' | 'abort' | 'progress-success' | 'progress' | 'progress-fail' | 'default'
```

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

### Handling Waiting Upload Files Change in TDesign Upload (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

`context.files` are the waiting files, `context.trigger` indicates the source of the change (e.g., 'validate', 'remove', 'uploaded').

```TypeScript
(context: { files: Array<UploadFile>, trigger: 'validate' | 'remove' | 'uploaded' }) => void
```

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

### Customizing TDesign Theme with CSS Variables

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/site/docs/theme.md

This snippet demonstrates how to override TDesign's default Design Tokens using CSS Variables. By declaring same-named variables in your project, you can customize global theme aspects like colors (brand, warning, error, success) for a personalized look. This method is recommended for general theme configuration.

```CSS
--td-brand-color: orange;
--td-warning-color: yellow;
--td-error-color: red;
--td-success-color: green;
```

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

### Defining Text Content for AI Message - TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/chatbot/README.md

This interface specifies the structure for plain text content within an AI message. It includes the content type ('text'), the actual string data, and optional fields for `ChatMessageStatus` and a unique `id` for the content part.

```TypeScript
interface TextContent {
  type: 'text';  // 固定为'text'
  data: string;  // 文本内容
  status?: ChatMessageStatus;  // 内容状态
  id?: string;  // 内容ID
}
```

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

### Handling File Selection Change in TDesign Upload (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

Triggers after selecting files or images, but before uploading. Dependencies: `UploadSelectChangeContext`.

```TypeScript
interface UploadSelectChangeContext { currentSelectedFiles: UploadFile[] }
(files: File[], context: UploadSelectChangeContext) => void
```

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

### Defining OnOneFileSuccess Event Type (onOneFileSuccess) in TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

The `onOneFileSuccess` event is triggered after a single file successfully uploads, particularly in multi-file scenarios. It provides context including the event, the successfully uploaded file, the server response, and the XMLHttpRequest object.

```TypeScript
TS 类型：`(context: Pick<SuccessContext, 'e' | 'file' | 'response' | 'XMLHttpRequest'>) => void`
```

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

### TDesign UploadFile Interface Definition (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

Defines the structure of an `UploadFile` object, representing a file being managed by the upload component. It includes properties like `name`, `size`, `status`, `percent`, `url`, and `response` from the upload server. It also supports arbitrary additional properties via `PlainObject`.

```TypeScript
interface UploadFile {
  lastModified?: number;
  name?: string;
  percent?: number;
  raw?: File;
  response?: { [key: string]: any };
  size?: number;
  status?: 'success' | 'fail' | 'progress' | 'waiting';
  type?: string;
  uploadTime?: string;
  url?: string;
}
type PlainObject = { [key: string]: any };
```

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

### TDesign Component Style Property (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

Defines the `style` property, allowing standard React CSS properties to be applied to the component.

```TypeScript
style: React.CSSProperties;
```

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

### Defining OnOneFileFail Event Type (onOneFileFail) in TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

The `onOneFileFail` event is triggered when a single file fails to upload in a multi-file/image scenario. It provides the same context as `onFail` but is specific to individual file failures.

```TypeScript
TS 类型：`(options: UploadFailContext) => void`
```

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

### Handling Dialog Overlay Click Event (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/dialog/README.md

This event is triggered when the dialog's overlay (backdrop) is clicked, provided the overlay is present and interactive. The callback receives a context object containing the mouse event.

```TypeScript
(context: { e: MouseEvent }) => void
```

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

### Defining Custom Upload Method (requestMethod) in TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

The `requestMethod` property allows defining a custom upload function. It should return a Promise resolving to an object indicating upload status, error details, and response data. The response can include the uploaded file's URL or a list of files for multiple uploads.

```TypeScript
TS 类型：`(files: UploadFile | UploadFile[]) => Promise<RequestMethodResponse>`
```

```TypeScript
interface RequestMethodResponse { status: 'success' | 'fail'; error?: string; response: { url?: string; files?: UploadFile[]; [key: string]: any } }
```

```JavaScript
{ status: 'fail', error: '上传失败', response }
```

```JavaScript
{ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } }
```

```JavaScript
{ status: 'success', files: [{ url: 'https://xxx.png', name: 'xxx.png' }]}
```

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

### Defining OnFail Event Type (onFail) in TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

The `onFail` event is triggered after an upload operation fails. It provides context including failed files, current files, the response from the server, and the XMLHttpRequest object. If the response doesn't contain an 'error' field, `formatResponse` can be used.

```TypeScript
TS 类型：`(options: UploadFailContext) => void`
```

```TypeScript
interface UploadFailContext { e?: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile; XMLHttpRequest?: XMLHttpRequest}
```

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

### Defining Trigger Element Type (trigger) in TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

The `trigger` property specifies the element that initiates the upload. It is a TNode that provides context including `dragActive` status and the current list of `files`.

```TypeScript
TS 类型：`TNode<TriggerContext>`
```

```TypeScript
interface TriggerContext { dragActive?: boolean;  files: UploadFile[] }
```

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

### Handling Mouse Enter Event in TDesign SelectInput (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/select-input/README.md

This handler is triggered when the mouse pointer enters the SelectInput component's input area. It provides the mouse event object in its context.

```TypeScript
(context: { e: MouseEvent }) => void
```

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

### Handling Dialog Confirm Event (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/dialog/README.md

This event is triggered when the 'confirm' button of the dialog is clicked, or when the Enter key is pressed while the dialog is active. The callback receives a context object containing either a mouse or keyboard event.

```TypeScript
(context: { e: MouseEvent | KeyboardEvent }) => void
```

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

### Handling File Removal in TDesign Upload (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

Triggers when a file is removed. Dependencies: `UploadRemoveContext`.

```TypeScript
interface UploadRemoveContext { index?: number; file?: UploadFile; e: MouseEvent }
(context: UploadRemoveContext) => void
```

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

### TDesign Component Class Name Property (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

Defines the `className` property, allowing a string to be used for CSS class names on the component.

```TypeScript
className: string;
```

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

### Defining Upload Button Type (uploadButton) in TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

The `uploadButton` property is used for batch file/image uploads when `autoUpload` is false. It can be `null`, `ButtonProps`, or a TNode providing context for the upload button's state and actions.

```TypeScript
TS 类型：`null | ButtonProps | TNode<{ disabled: boolean; uploading: boolean; uploadFiles: () => void; uploadText: string }>`
```

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

### Handling Upload Validation in TDesign Upload (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

Triggers when file upload validation ends, such as file count/size limits exceeded, duplicate files (unless `allowUploadDuplicateFile=true`), or `beforeAllFilesUpload`/`beforeUpload` returning false. Combine with `status` and `tips` for error/warning messages. Dependencies: `UploadValidateType`.

```TypeScript
type UploadValidateType = 'FILE_OVER_SIZE_LIMIT' | 'FILES_OVER_LENGTH_LIMIT' | 'FILTER_FILE_SAME_NAME' | 'BEFORE_ALL_FILES_UPLOAD' | 'CUSTOM_BEFORE_UPLOAD';
(context: { type: UploadValidateType, files: UploadFile[] }) => void
```

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

### Handling Enter Key Press in TDesign SelectInput (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/select-input/README.md

This handler is triggered when the Enter key is pressed within the SelectInput component. It provides the current input value and context including the keyboard event and optional tag input value.

```TypeScript
(value: SelectInputValue, context: { e: KeyboardEvent; inputValue: string; tagInputValue?: TagInputValue }) => void
```

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

### Handling Mouse Leave Event in TDesign SelectInput (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/select-input/README.md

This handler is triggered when the mouse pointer leaves the SelectInput component's input area. It provides the mouse event object in its context.

```TypeScript
(context: { e: MouseEvent }) => void
```

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

### Defining OnCancelUpload Event Type (onCancelUpload) in TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

The `onCancelUpload` event is triggered when the 'Cancel Upload' button is clicked. It is a simple function with no parameters and no return value.

```TypeScript
TS 类型：`() => void`
```

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

### Defining OnDrop Event Type (onDrop) in TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

The `onDrop` event is triggered when a draggable item is dropped onto the upload component's drag area. It provides the original `DragEvent` in its context.

```TypeScript
TS 类型：`(context: { e: DragEvent }) => void`
```

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

### Handling Dialog ESC Keydown Event (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/dialog/README.md

This event is triggered when the ESC key is pressed while the dialog is open. The callback receives a context object containing the keyboard event.

```TypeScript
(context: { e: KeyboardEvent }) => void
```

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

### Defining Trigger Button Properties Type (triggerButtonProps) in TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

The `triggerButtonProps` property allows passing all standard Button properties directly to the selection button within the Upload component.

```TypeScript
TS 类型：`ButtonProps`
```

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

### Handling Popup Visibility Change in TDesign SelectInput (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/select-input/README.md

This handler is triggered when the dropdown (popup) associated with the SelectInput component becomes visible or hidden. It provides the new visibility state and a context object, which includes the PopupVisibleChangeContext from the '@Popup' module.

```TypeScript
(visible: boolean, context: PopupVisibleChangeContext) => void
```

```TypeScript
import { PopupVisibleChangeContext } from '@Popup'
```

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

### Handling Paste Event in TDesign SelectInput (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/select-input/README.md

This handler is triggered when content is pasted into the SelectInput component. It provides the clipboard event and the pasted string value.

```TypeScript
(context: { e: ClipboardEvent; pasteValue: string }) => void
```

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

### Handling Focus Event in TDesign SelectInput (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/select-input/README.md

This handler is triggered when the SelectInput component gains focus. It provides the current input value, optional tag input value, and the focus event object. Detailed type definition is available in the TDesign repository.

```TypeScript
(value: SelectInputValue, context: SelectInputFocusContext) => void
```

```TypeScript
interface SelectInputFocusContext { inputValue: string; tagInputValue?: TagInputValue; e: FocusEvent }
```

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

### Handling Dialog Close Event (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/dialog/README.md

This event is triggered when the dialog is closed by various means, including clicking the cancel button, close button, overlay, or pressing ESC. The callback provides a DialogCloseContext object detailing the trigger source and the associated event.

```TypeScript
(context: DialogCloseContext) => void
```

```TypeScript
type DialogEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay'
```

```TypeScript
interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent | KeyboardEvent }
```

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

### Handling Dialog Cancel Event (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/dialog/README.md

This event is triggered when the 'cancel' button of the dialog is clicked. It also simultaneously triggers the general close event. The callback receives a context object containing the mouse event.

```TypeScript
(context: { e: MouseEvent }) => void
```

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

### Handling Dialog Close Button Click Event (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/dialog/README.md

This event is specifically triggered when the close button in the top-right corner of the dialog is clicked. The callback receives a context object containing the mouse event.

```TypeScript
(context: { e: MouseEvent }) => void
```

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

### Handling Tag Value Change in TDesign SelectInput (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/select-input/README.md

This handler is triggered when the tag values within the SelectInput component change. The context provides details about the change, including the trigger source, index of the changed item, the item itself, and the event object. It uses the TagInputChangeContext type.

```TypeScript
(value: TagInputValue, context: SelectInputChangeContext) => void
```

```TypeScript
type SelectInputChangeContext = TagInputChangeContext
```

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

### Handling Dialog Opened Animation End Event (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/dialog/README.md

This event is triggered after the dialog's appearance animation has completed. It indicates that the dialog is fully visible.

```TypeScript
() => void
```

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

### Defining OnDragenter Event Type (onDragenter) in TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

The `onDragenter` event is triggered when a draggable item enters the upload component's drag area. It provides the original `DragEvent` in its context.

```TypeScript
TS 类型：`(context: { e: DragEvent }) => void`
```

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

### Handling Input Value Change in TDesign SelectInput (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/select-input/README.md

This handler is triggered when the input box value changes. The context indicates the source of the change, such as text input or clear button. Detailed type definition is available in the TDesign repository.

```TypeScript
(value: string, context?: SelectInputValueChangeContext) => void
```

```TypeScript
interface SelectInputValueChangeContext { e?: Event | InputEvent | MouseEvent | FocusEvent | KeyboardEvent | CompositionEvent; trigger: 'input' | 'clear' | 'blur' | 'focus' | 'initial' | 'change' }
```

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

### Defining OnDragleave Event Type (onDragleave) in TypeScript

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/upload/README.md

The `onDragleave` event is triggered when a draggable item leaves the upload component's drag area. It provides the original `DragEvent` in its context.

```TypeScript
TS 类型：`(context: { e: DragEvent }) => void`
```

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

### Handling Dialog Closed Animation End Event (TypeScript)

Source: https://github.com/tdesignoteam/tdesign-web-components/blob/develop/src/dialog/README.md

This event is triggered after the dialog's disappearance animation has completed. It indicates that the dialog is fully hidden from view.

```TypeScript
() => void
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.