optimize: optimize command-item

Author: Ohh-889

packages/ui/src/components/command/CommandItem.tsx

@@ -23,7 +23,7 @@ const CommandItem = (props: CommandItemProps) => {
     >
       {isValidElement(leading) ? withClassName(leading, itemIcon()) : leading}
 
-      <span>{children}</span>
+      {children}
 
       {trailing}
 

playground/src/app/(demo)/combobox/modules/ComboboxDemo.tsx

@@ -9,66 +9,38 @@ const ComboboxDemo = () => {
 
   const frameworks = [
     {
-      label: (
-        <div className="flex items-center gap-2">
-          <span>Vue</span>
-          <Check className={cn('ml-auto', value === 'vue' ? 'opacity-100' : 'opacity-0')} />
-        </div>
-      ),
+      label: 'Vue',
+      trailing: <Check className={cn('ml-auto', value === 'vue' ? 'opacity-100' : 'opacity-0')} />,
       value: 'vue'
     },
     {
-      label: (
-        <div className="flex items-center gap-2">
-          <span>React</span>
-          <Check className={cn('ml-auto', value === 'react' ? 'opacity-100' : 'opacity-0')} />
-        </div>
-      ),
+      label: 'React',
+      trailing: <Check className={cn('ml-auto', value === 'react' ? 'opacity-100' : 'opacity-0')} />,
       value: 'react'
     },
     {
-      label: (
-        <div className="flex items-center gap-2">
-          <span>Next.js</span>
-          <Check className={cn('ml-auto', value === 'nextjs' ? 'opacity-100' : 'opacity-0')} />
-        </div>
-      ),
+      label: 'Next.js',
+      trailing: <Check className={cn('ml-auto', value === 'nextjs' ? 'opacity-100' : 'opacity-0')} />,
       value: 'nextjs'
     },
     {
-      label: (
-        <div className="flex items-center gap-2">
-          <span>SvelteKit</span>
-          <Check className={cn('ml-auto', value === 'sveltekit' ? 'opacity-100' : 'opacity-0')} />
-        </div>
-      ),
+      label: 'SvelteKit',
+      trailing: <Check className={cn('ml-auto', value === 'sveltekit' ? 'opacity-100' : 'opacity-0')} />,
       value: 'sveltekit'
     },
     {
-      label: (
-        <div className="flex items-center gap-2">
-          <span>Nuxt</span>
-          <Check className={cn('ml-auto', value === 'nuxt' ? 'opacity-100' : 'opacity-0')} />
-        </div>
-      ),
+      label: 'Nuxt',
+      trailing: <Check className={cn('ml-auto', value === 'nuxt' ? 'opacity-100' : 'opacity-0')} />,
       value: 'nuxt'
     },
     {
-      label: (
-        <div className="flex items-center gap-2">
-          <span>Remix</span>
-          <Check className={cn('ml-auto', value === 'remix' ? 'opacity-100' : 'opacity-0')} />
-        </div>
-      ),
+      label: 'Remix',
+      trailing: <Check className={cn('ml-auto', value === 'remix' ? 'opacity-100' : 'opacity-0')} />,
       value: 'remix'
     },
     {
-      label: (
-        <div className="flex items-center gap-2">
-          <span>Astro</span>
-          <Check className={cn('ml-auto', value === 'astro' ? 'opacity-100' : 'opacity-0')} />
-        </div>
-      ),
+      label: 'Astro',
+      trailing: <Check className={cn('ml-auto', value === 'astro' ? 'opacity-100' : 'opacity-0')} />,
       value: 'astro'
     }
   ];

playground/src/app/(demo)/layout.tsx

@@ -4,11 +4,19 @@ import process from 'node:process';
 
 import Link from 'next/link';
 import React from 'react';
-import { Card, ScrollArea } from 'soybean-react-ui';
+import { Card } from 'soybean-react-ui';
 
 import DemoTabs from './modules/DemoTabs';
 import DemoTitle from './modules/DemoTitle';
 
+const extensions = [
+  {
+    children: null,
+    label: 'Combobox',
+    value: 'combobox'
+  }
+];
+
 // 动态读取组件目录的函数
 function getComponentDirectories() {
   try {
@@ -28,7 +36,7 @@ function getComponentDirectories() {
         value: dir.name
       }));
 
-    return componentDirs;
+    return [...componentDirs, ...extensions];
   } catch (error) {
     console.error('读取组件目录失败:', error);
     // 如果读取失败，返回默认值