📝 docs: update snippet doc

src/Snippet/index.md

@@ -1,14 +1,23 @@
 ---
 nav: 组件
-group: Content
-title: Snippet
-description: The Snippet component is used to display a code snippet with syntax highlighting. It can be customized with a symbol before the content and a language for syntax highlighting. The component is also copyable with a CopyButton included by default.
+group: 基础组件
+title: Snippet 代码片段
+description: Snippet 组件用于显示带有语法突出显示的代码片段。可以在内容之前使用符号和语法突出显示的语言进行自定义。该组件还可以通过默认包含的 CopyButton 进行复制
 ---
 
+# Snippet 代码片段
+
 ## Default
 
 <code src="./demos/index.tsx" nopadding></code>
 
 ## APIs
 
-<API></API>
+| 参数      | 说明                   | 类型               | 默认值  |
+| :-------- | :--------------------- | :----------------- | :------ |
+| children  | 组件内显示的内容       | string             | -       |
+| copyable  | 内容是否可以复制       | boolean            | true    |
+| language  | 组件内容的语言         | string             | 'tsx'   |
+| spotlight | 是否添加聚光灯背景效果 | boolean            | false   |
+| symbol    | 组件内容前显示的符号   | string             | -       |
+| type      | 组件的渲染类型         | 'ghost' \| 'block' | 'ghost' |

src/Snippet/index.tsx

@@ -9,30 +9,30 @@ import { useStyles } from './style';
 
 export interface SnippetProps extends DivProps {
   /**
-   * @description The content to be displayed inside the Snippet component
+   * @description 内容区域
    */
   children: string;
   /**
-   * @description Whether the Snippet component is copyable or not
+   * @description 是否支持可复制的能力
    * @default true
    */
   copyable?: boolean;
   /**
-   * @description The language of the content inside the Snippet component
+   * @description 指定渲染的语言类型
    * @default 'tsx'
    */
   language?: string;
   /**
-   * @description Whether add spotlight background
+   * @description 是否添加聚光灯背景
    * @default false
    */
   spotlight?: boolean;
   /**
-   * @description The symbol to be displayed before the content inside the Snippet component
+   * @description 开头渲染的符号标志
    */
   symbol?: string;
   /**
-   * @description The type of the Snippet component
+   * @description 组件的渲染类型
    * @default 'ghost'
    */
   type?: 'ghost' | 'block';
@@ -63,7 +63,7 @@ const Snippet = memo<SnippetProps>((props) => {
     <div className={cx(styles.container, className)} {...rest}>
       {spotlight && <Spotlight />}
       <HighLighter language={language} prefixCls={prefixCls} theme={isDarkMode ? 'dark' : 'light'}>
-        {[symbol, children].filter(Boolean).join(' ')}
+        {symbol ? [symbol, children].join(' ') : children}
       </HighLighter>
       {copyable && <CopyButton content={children} />}
     </div>