feat: switch tab component in plugins to shadcn

web/src/app/home/plugins/page.tsx

@@ -1,41 +1,36 @@
 'use client';
-import { Radio } from 'antd';
-import { useState } from 'react';
 import PluginInstalledComponent from '@/app/home/plugins/plugin-installed/PluginInstalledComponent';
 import PluginMarketComponent from '@/app/home/plugins/plugin-market/PluginMarketComponent';
 import styles from './plugins.module.css';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { PlusIcon } from "lucide-react";
 
 export default function PluginConfigPage() {
-  enum PageType {
-    INSTALLED = 'installed',
-    MARKET = 'market',
-  }
-
-  const [nowPageType, setNowPageType] = useState(PageType.INSTALLED);
-
   return (
     <div className={styles.pageContainer}>
-      <Radio.Group
-        block
-        options={[
-          { label: '已安装', value: PageType.INSTALLED },
-          { label: '插件市场', value: PageType.MARKET },
-        ]}
-        defaultValue={PageType.INSTALLED}
-        value={nowPageType}
-        optionType="button"
-        buttonStyle="solid"
-        style={{ marginBottom: '20px' }}
-        onChange={(e) => {
-          setNowPageType(e.target.value as PageType);
-        }}
-      />
+      <Tabs defaultValue="installed" className="w-full">
+        <div className='flex flex-row justify-between items-center'>
+          <TabsList className='shadow-md py-5 bg-[#f0f0f0]'>
+            <TabsTrigger value="installed" className="px-6 py-4">已安装</TabsTrigger>
+            <TabsTrigger value="market" className="px-6 py-4">插件市场</TabsTrigger>
 
-      {nowPageType === PageType.INSTALLED ? (
-        <PluginInstalledComponent />
-      ) : (
-        <PluginMarketComponent />
-      )}
+          </TabsList>
+
+          <div className='flex flex-row justify-end items-center'>
+            <Button variant="default" className='px-6 py-4'>
+              <PlusIcon className='w-4 h-4' />
+              安装
+            </Button>
+          </div>
+        </div>
+        <TabsContent value="installed">
+          <PluginInstalledComponent />
+        </TabsContent>
+        <TabsContent value="market">
+          <PluginMarketComponent />
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }

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

@@ -5,9 +5,17 @@ import CreateCardComponent from '@/app/infra/basic-component/create-card-compone
 import { PluginCardVO } from '@/app/home/plugins/plugin-installed/PluginCardVO';
 import PluginCardComponent from '@/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent';
 import styles from '@/app/home/plugins/plugins.module.css';
-import { Modal, Input } from 'antd';
-import { GithubOutlined } from '@ant-design/icons';
+import { GithubIcon } from 'lucide-react';
 import { httpClient } from '@/app/infra/http/HttpClient';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 
 export default function PluginInstalledComponent() {
   const [pluginList, setPluginList] = useState<PluginCardVO[]>([]);
@@ -56,33 +64,33 @@ export default function PluginInstalledComponent() {
         console.log('error when install plugin:', err);
       });
   }
+  
   return (
     <div className={`${styles.pluginListContainer}`}>
-      <Modal
-        title={
-          <div className={`${styles.modalTitle}`}>
-            <GithubOutlined
-              style={{
-                fontSize: '30px',
-                marginRight: '20px',
-              }}
+      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+        <DialogContent className="w-[500px] p-6">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-4">
+              <GithubIcon className="size-6" />
+              <span>从GitHub安装插件</span>
+            </DialogTitle>
+          </DialogHeader>
+          <div className="mt-4">
+            <p className="mb-2">目前仅支持从 GitHub 安装</p>
+            <Input
+              placeholder="请输入插件的Github链接"
+              value={githubURL}
+              onChange={(e) => setGithubURL(e.target.value)}
+              className="mb-4"
             />
           </div>
-        }
-        open={modalOpen}
-        onOk={handleModalConfirm}
-        onCancel={() => setModalOpen(false)}
-        destroyOnClose={true}
-      >
-        <div className={`${styles.modalBody}`}>
-          <div>目前仅支持从 GitHub 安装</div>
-          <Input
-            placeholder="请输入插件的Github链接"
-            value={githubURL}
-            onChange={(e) => setGithubURL(e.target.value)}
-          />
-        </div>
-      </Modal>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setModalOpen(false)}>取消</Button>
+            <Button onClick={handleModalConfirm}>确认</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      
       {pluginList.map((vo, index) => {
         return (
           <div key={index}>
@@ -90,6 +98,7 @@ export default function PluginInstalledComponent() {
           </div>
         );
       })}
+      
       <CreateCardComponent
         height={'140px'}
         plusSize={'90px'}

web/src/app/home/plugins/plugins.module.css

@@ -31,4 +31,4 @@
     display: flex;
     flex-direction: column;
     justify-content: space-around;
-}
+}