fix: bugs in ui

web/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx

@@ -93,8 +93,8 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>((props,
       
       {pluginList.map((vo, index) => {
         return (
-          <div key={index} onClick={() => handlePluginClick(vo)}>
-            <PluginCardComponent cardVO={vo} />
+          <div key={index}>
+            <PluginCardComponent cardVO={vo} onCardClick={() => handlePluginClick(vo)} />
           </div>
         );
       })}

web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx

@@ -8,13 +8,16 @@ import { Button } from "@/components/ui/button"
 
 export default function PluginCardComponent({
   cardVO,
+  onCardClick,
 }: {
   cardVO: PluginCardVO;
+  onCardClick: () => void;
 }) {
   const [enabled, setEnabled] = useState(cardVO.enabled);
   const [switchEnable, setSwitchEnable] = useState(true);
 
-  function handleEnable() {
+  function handleEnable(e: React.MouseEvent) {
+    e.stopPropagation(); // 阻止事件冒泡
     setSwitchEnable(false);
     httpClient
       .togglePlugin(cardVO.author, cardVO.name, !enabled)
@@ -29,7 +32,7 @@ export default function PluginCardComponent({
       });
   }
   return (
-    <div className={`${styles.cardContainer}`}>
+    <div className={`${styles.cardContainer}`} onClick={onCardClick}>
       <div className={styles.contentContainer}>
         <svg className={styles.pluginIcon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 4C8 2.34315 9.34315 1 11 1C12.6569 1 14 2.34315 14 4C14 4.35064 13.9398 4.68722 13.8293 5H18C18.5523 5 19 5.44772 19 6V10.1707C19.3128 10.0602 19.6494 10 20 10C21.6569 10 23 11.3431 23 13C23 14.6569 21.6569 16 20 16C19.6494 16 19.3128 15.9398 19 15.8293V20C19 20.5523 18.5523 21 18 21H4C3.44772 21 3 20.5523 3 20V6C3 5.44772 3.44772 5 4 5H8.17071C8.06015 4.68722 8 4.35064 8 4Z"></path></svg>
 
@@ -66,8 +69,9 @@ export default function PluginCardComponent({
         <div className={styles.operationContainer}>
           <div className={styles.operationTop}>
             <Switch
+              className='cursor-pointer'
               checked={enabled}
-              onCheckedChange={handleEnable}
+              onClick={(e) => handleEnable(e)}
               disabled={!switchEnable}
             />
           </div>