feat(vtable): add audio cell type support

docs/assets/demo/en/cell-type/multi-type.md

@@ -14,26 +14,34 @@ Specify the cell content type by cellType. Image video source: https://birdsofth
 
 ## Key Configurations
 
-headerType: 'text' | 'link' | 'image' | 'video';
+headerType: 'text' | 'link' | 'image' | 'video' | 'audio';
 
 cellType:
 'Text'
 | 'link'
 | 'image'
 | 'video'
+| 'audio'
 | 'Sparkline'
 | 'progressbar'
 | 'chart';
 
 ## Code demo
 
 ```javascript livedemo template=vtable
+const audioFiles = [
+  'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/demo/vtable-demo-bright-melody.mp3',
+  'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/demo/vtable-demo-soft-loop.mp3',
+  'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/demo/vtable-demo-calm-theme.mp3'
+];
+
 const records = [
   {
     name: 'pigeon',
     introduction: 'The pigeon is a common urban bird with gray plumage and a short, stout beak',
     image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/pigeon.jpeg',
     video: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/pigeon.mp4',
+    audio: audioFiles[0],
     YoY: 50,
     QoQ: 10,
     trend: [
@@ -50,6 +58,7 @@ const records = [
     introduction: 'Swallow is a kind of bird that is good at flying, usually perches near houses and buildings.',
     image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/swallow.jpeg',
     video: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/swallow.mp4',
+    audio: audioFiles[1],
     YoY: 10,
     QoQ: -10,
     trend: [
@@ -66,6 +75,7 @@ const records = [
       'The magpie is a common small bird mainly found in Asia. They are small in size with a black head and throat, gray back and white belly. Magpies are social animals and often live in woods Breeding nests in China or in urban parks, feeding on insects, fruit and seeds. They are also highly intelligent and social, and are considered an intelligent, playful bird.',
     image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/Magpie.jpeg',
     video: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/Magpie.mp4',
+    audio: audioFiles[2],
     YoY: -10,
     QoQ: -10,
     trend: [
@@ -82,6 +92,7 @@ const records = [
       'The peacock is a large, beautiful bird with brilliant blue-green plumage and a long tail. Native to South Asia, it feeds on insects, fruit, and seeds.',
     image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/peacock.jpeg',
     video: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/peacock.mp4',
+    audio: audioFiles[0],
     YoY: -10,
     QoQ: -10,
     trend: [
@@ -98,6 +109,7 @@ const records = [
       'The flamingo is a beautiful pink bird with long legs and neck, good at swimming, and is a common bird in tropical areas.',
     image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/flamingo.jpeg',
     video: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/flamingo.mp4',
+    audio: audioFiles[1],
     YoY: -1,
     QoQ: -6,
     trend: [
@@ -114,6 +126,7 @@ const records = [
       'The ostrich is a large bird that cannot fly and runs fast. It is one of the largest birds in the world',
     image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/ostrich.jpeg',
     video: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/ostrich.mp4',
+    audio: audioFiles[2],
     YoY: -3,
     QoQ: 10,
     trend: [
@@ -130,6 +143,7 @@ const records = [
       'Mandarin duck is a kind of two-winged bird. The head of the male bird is blue and the head of the female bird is brown. It usually perches and mates in pairs. It is one of the symbols in Chinese culture.',
     image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/Mandarin.jpeg',
     video: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/Mandarin.mp4',
+    audio: audioFiles[0],
     YoY: 10,
     QoQ: 16,
     trend: [
@@ -171,6 +185,12 @@ const columns = [
     width: 150
     // imageSizing : 'keep-aspect-ratio',
   },
+  {
+    field: 'audio',
+    title: 'bird audio',
+    cellType: 'audio',
+    width: 150
+  },
   {
     field: 'YoY',
     title: 'count Year-over-Year',

docs/assets/demo/en/cell-type/progressbar.md

@@ -14,7 +14,7 @@ Demonstrate multiple ways to use stripe types
 
 ## Key Configurations
 
-headerType: 'text' | 'link' | 'image' | 'video';
+headerType: 'text' | 'link' | 'image' | 'video' | 'audio';
 
 cellType:
 'Text'

docs/assets/demo/zh/cell-type/multi-type.md

@@ -14,26 +14,34 @@ option: ListTable-columns-text#cellType
 
 ## 关键配置
 
-headerType: 'text' | 'link' | 'image' | 'video';
+headerType: 'text' | 'link' | 'image' | 'video' | 'audio';
 
 cellType:
 'text'
 | 'link'
 | 'image'
 | 'video'
+| 'audio'
 | 'sparkline'
 | 'progressbar'
 | 'chart';
 
 ## 代码演示
 
 ```javascript livedemo template=vtable
+const audioFiles = [
+  'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/demo/vtable-demo-bright-melody.mp3',
+  'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/demo/vtable-demo-soft-loop.mp3',
+  'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/demo/vtable-demo-calm-theme.mp3'
+];
+
 const records = [
   {
     name: 'pigeon',
     introduction: 'The pigeon is a common urban bird with gray plumage and a short, stout beak',
     image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/pigeon.jpeg',
     video: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/pigeon.mp4',
+    audio: audioFiles[0],
     YoY: 50,
     QoQ: 10,
     trend: [
@@ -50,6 +58,7 @@ const records = [
     introduction: 'Swallow is a kind of bird that is good at flying, usually perches near houses and buildings.',
     image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/swallow.jpeg',
     video: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/swallow.mp4',
+    audio: audioFiles[1],
     YoY: 10,
     QoQ: -10,
     trend: [
@@ -66,6 +75,7 @@ const records = [
       'The magpie is a common small bird mainly found in Asia. They are small in size with a black head and throat, gray back and white belly. Magpies are social animals and often live in woods Breeding nests in China or in urban parks, feeding on insects, fruit and seeds. They are also highly intelligent and social, and are considered an intelligent, playful bird.',
     image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/Magpie.jpeg',
     video: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/Magpie.mp4',
+    audio: audioFiles[2],
     YoY: -10,
     QoQ: -10,
     trend: [
@@ -82,6 +92,7 @@ const records = [
       'The peacock is a large, beautiful bird with brilliant blue-green plumage and a long tail. Native to South Asia, it feeds on insects, fruit, and seeds.',
     image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/peacock.jpeg',
     video: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/peacock.mp4',
+    audio: audioFiles[0],
     YoY: -10,
     QoQ: -10,
     trend: [
@@ -98,6 +109,7 @@ const records = [
       'The flamingo is a beautiful pink bird with long legs and neck, good at swimming, and is a common bird in tropical areas.',
     image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/flamingo.jpeg',
     video: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/flamingo.mp4',
+    audio: audioFiles[1],
     YoY: -1,
     QoQ: -6,
     trend: [
@@ -114,6 +126,7 @@ const records = [
       'The ostrich is a large bird that cannot fly and runs fast. It is one of the largest birds in the world',
     image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/ostrich.jpeg',
     video: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/ostrich.mp4',
+    audio: audioFiles[2],
     YoY: -3,
     QoQ: 10,
     trend: [
@@ -130,6 +143,7 @@ const records = [
       'Mandarin duck is a kind of two-winged bird. The head of the male bird is blue and the head of the female bird is brown. It usually perches and mates in pairs. It is one of the symbols in Chinese culture.',
     image: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/Mandarin.jpeg',
     video: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/Mandarin.mp4',
+    audio: audioFiles[0],
     YoY: 10,
     QoQ: 16,
     trend: [
@@ -171,6 +185,12 @@ const columns = [
     width: 150
     // imageSizing : 'keep-aspect-ratio',
   },
+  {
+    field: 'audio',
+    title: 'bird audio',
+    cellType: 'audio',
+    width: 150
+  },
   {
     field: 'YoY',
     title: 'count Year-over-Year',

docs/assets/demo/zh/cell-type/progressbar.md

@@ -14,7 +14,7 @@ option: ListTable-columns-progressbar#cellType
 
 ## 关键配置
 
-headerType: 'text' | 'link' | 'image' | 'video';
+headerType: 'text' | 'link' | 'image' | 'video' | 'audio';
 
 cellType:
 'text'

docs/assets/guide/en/basic_function/row_series_number.md

@@ -16,7 +16,8 @@ export interface IRowSeriesNumber {
   title?: string;
   field?: string | number;
   format?: (col?: number, row?: number, table?: BaseTableAPI) => any;
-  cellType?: 'text' | 'link' | 'image' | 'video' | 'checkbox';
+  headerType?: 'text' | 'link' | 'image' | 'video' | 'audio' | 'checkbox';
+  cellType?: 'text' | 'link' | 'image' | 'video' | 'audio' | 'checkbox' | 'radio';
   style?: ITextStyleOption | ((styleArg: StylePropertyFunctionArg) => ITextStyleOption);
   headerStyle?: ITextStyleOption | ((styleArg: StylePropertyFunctionArg) => ITextStyleOption);
   headerIcon?: string | ColumnIconOption | (string | ColumnIconOption)[];

docs/assets/guide/en/cell_type/cellType.md

@@ -1,20 +1,25 @@
 # data type
 
-In the field of data analytics and visualization, one of the typical applications of VTable is to display and present various types of data. The so-called types here include: text, links, pictures, videos, progress bars, and charts. By supporting multiple column types, VTable can provide users with a richer and more diverse data experience, allowing users to observe and understand data from different perspectives and Dimensions.
+In the field of data analytics and visualization, one of the typical applications of VTable is to display and present various types of data. The so-called types here include: text, links, pictures, videos, audio, progress bars, and charts. By supporting multiple column types, VTable can provide users with a richer and more diverse data experience, allowing users to observe and understand data from different perspectives and Dimensions.
 
 Next, this article will focus on the various column types and their usage and characteristics to help you gain insight into data lake visualization using VTable.
 
 ## Support type
 
-There are 7 data types supported by VTable, namely:
+There are 12 data types supported by VTable, namely:
 
 1.  Text
 2.  Link
 3.  Image
 4.  Video
-5.  progressbar
-6.  Sparkline
-7.  Chart
+5.  Audio
+6.  progressbar
+7.  Sparkline
+8.  Chart
+9.  Checkbox
+10. Radio
+11. Switch
+12. Button
 
 Next, we'll cover each column type one by one.
 
@@ -119,6 +124,10 @@ Through the above settings, we can customize the columns of the "image" type to
 
 When the column type is "video", it is used to display the data of the video type. All configuration items of "video" are the same as image, you can refer to the image type configuration item.
 
+## Audio
+
+When the column type is "audio", it is used to display audio data. The cell displays an audio icon, and clicking it opens the preview window with audio playback controls. Audio shares media preview options such as `clickToPreview`; image-specific options such as `keepAspectRatio` and `imageAutoSizing` do not apply.
+
 ## progressbar
 
 When the column type is "progressbar", it is used to display the data of the progress bar type. The progress bar data can be processed by setting the type of the progress bar, the data range of the progress bar, etc.
@@ -258,7 +267,7 @@ The headerType in the rows and columns of the pivot table, and the cellType in t
 
 ## Extension: Custom Column Types (TypeScript)
 
-In real-world applications, in addition to VTable’s built-in `cellType` values (such as `text`, `link`, `image`, `video`, `progressbar`, `sparkline`, and `chart`), it is often necessary to attach **business-specific configurations** to column definitions, for example:
+In real-world applications, in addition to VTable’s built-in `cellType` values (such as `text`, `link`, `image`, `video`, `audio`, `progressbar`, `sparkline`, and `chart`), it is often necessary to attach **business-specific configurations** to column definitions, for example:
 
 - Permission or visibility control: `permissionKey`
 - Tracking and analytics metadata: `trackId` / `trackParams`

docs/assets/guide/en/cell_type/image_video.md

@@ -1,8 +1,8 @@
 # Multimedia Type
 
-Tables can display various types of data, such as text, numbers, charts, etc. Among them, the display of multimedia types (such as images and videos) in some scenes is particularly important, they can visually display information and help users quickly obtain key data. For example, e-commerce websites can display product pictures in tables, which is convenient for store owners to quickly view product information; video websites can display video preview diagrams in tables, which is convenient for users to quickly understand video content. By displaying multimedia types in tables, the effect of data display and user experience can be effectively improved.
+Tables can display various types of data, such as text, numbers, charts, etc. Among them, the display of multimedia types (such as images, videos, and audio) in some scenes is particularly important, they can visually display information and help users quickly obtain key data. For example, e-commerce websites can display product pictures in tables, which is convenient for store owners to quickly view product information; video websites can display video preview diagrams in tables; audio libraries can display playable audio entries in tables. By displaying multimedia types in tables, the effect of data display and user experience can be effectively improved.
 
-Note: The following descriptions are based on image types, and video types are also applicable.
+Note: The following descriptions are based on image types. Video and audio share media capabilities such as click preview; image-specific options such as `keepAspectRatio`, `imageAutoSizing`, and image styles do not apply to audio.
 
 ## Introduction to unique configuration items
 
@@ -45,5 +45,5 @@ Image type specific configuration items in terms of style style:
 
 ## Click preview of image
 
-In some scenes, we want to click on the image to preview the larger image. VTable defaults to clicking on the multimedia (including videos and pictures) cell to pop up the preview window.
+In some scenes, we want to click on the image to preview the larger image. VTable defaults to clicking on the multimedia (including images, videos, and audio) cell to pop up the preview window. The audio type displays an audio player in the preview window.
 ![image](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/03421afda76ced0240204bf01.gif)

docs/assets/guide/en/custom_define/custom_icon.md

@@ -210,7 +210,7 @@ The list of resettable internal icons is as follows:
 | Fixed Column                   | VTable. TYPES. IconFuncTypeEnum.frozen    | "freeze"         | Fixed Column Function Icon, Fixed State                             |
 | Fixed Columns                  | VTable. TYPES. IconFuncTypeEnum.frozen    | "frozen"         | Fixed Columns Function Icon, Fixed Status                           |
 | Fixed Columns                  | VTable. TYPES. IconFuncTypeEnum.frozen    | "frozenCurrent"  | Fixed Columns Function Icon, Frozen When Columns                    |
-| Image or video address invalid | VTable. TYPES. IconFuncTypeEnum.damagePic | "damage_pic"     | Multimedia resource parsing failed                                  |
+| Image, video, or audio address invalid | VTable. TYPES. IconFuncTypeEnum.damagePic | "damage_pic"     | Multimedia resource parsing failed                                  |
 | Loading                        | VTable. TYPES. IconFuncTypeEnum.loading_pic | "loading_pic"   | Loading status                                                        |
 | Image image type parsing failed | VTable. TYPES. IconFuncTypeEnum.imageDamagePic | "image_damage_pic" | Image resource parsing failed |
 | Video video type parsing failed | VTable. TYPES. IconFuncTypeEnum.videoDamagePic | "video_damage_pic" | Video resource parsing failed |

docs/assets/guide/en/table_type/List_table/list_table_define_and_generate.md

@@ -6,7 +6,7 @@ The following are the Key Configurations items of the basic table and their desc
 
 *   `container`: The container DOM element of the table, which needs to have width and height.
 *   `records`: The data of the table, represented as an array.
-*   `columns`: Configuration of table columns, each column needs to set configuration items separately, including column type, width, title, etc. Supported column types are: 'text', 'link', 'image', 'video', 'sparkline', 'progressbar', 'chart'. The configuration items for each column type are slightly different, please flexibly add specific configurations according to the required type, you can refer to[Document](../../guide/cell_type/cellType).
+*   `columns`: Configuration of table columns, each column needs to set configuration items separately, including column type, width, title, etc. Supported column types are: 'text', 'link', 'image', 'video', 'audio', 'sparkline', 'progressbar', 'chart', 'checkbox', 'radio', 'switch', 'button'. The configuration items for each column type are slightly different, please flexibly add specific configurations according to the required type, you can refer to[Document](../../guide/cell_type/cellType).
 *   `frozenColCount`: Specifies the number of frozen columns.
 *   `transpose`: Whether to transpose the table, the default is false.
 *   `showHeader`: Whether to display the header, the default is true.

docs/assets/guide/zh/basic_function/row_series_number.md

@@ -16,7 +16,8 @@ export interface IRowSeriesNumber {
   title?: string;
   field?: string | number;
   format?: (col?: number, row?: number, table?: BaseTableAPI) => any;
-  cellType?: 'text' | 'link' | 'image' | 'video' | 'checkbox';
+  headerType?: 'text' | 'link' | 'image' | 'video' | 'audio' | 'checkbox';
+  cellType?: 'text' | 'link' | 'image' | 'video' | 'audio' | 'checkbox' | 'radio';
   style?: ITextStyleOption | ((styleArg: StylePropertyFunctionArg) => ITextStyleOption);
   headerStyle?: ITextStyleOption | ((styleArg: StylePropertyFunctionArg) => ITextStyleOption);
   headerIcon?: string | ColumnIconOption | (string | ColumnIconOption)[];