chore: rename web_ui dir to web

web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import styles from "@/app/home/plugins/plugins.module.css";
+import { PluginMarketCardVO } from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO";
+import PluginMarketCardComponent from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent";
+import { Input, Pagination } from "antd";
+import { spaceClient } from "@/app/infra/http/HttpClient";
+
+export default function PluginMarketComponent() {
+  const [marketPluginList, setMarketPluginList] = useState<
+    PluginMarketCardVO[]
+  >([]);
+  const [totalCount, setTotalCount] = useState(0);
+  const [nowPage, setNowPage] = useState(1);
+  const [searchKeyword, setSearchKeyword] = useState("");
+
+  useEffect(() => {
+    initData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  function initData() {
+    getPluginList();
+  }
+
+  function onInputSearchKeyword(keyword: string) {
+    // 这里记得加防抖，暂时没加
+    setSearchKeyword(keyword);
+    setNowPage(1);
+    getPluginList(1, keyword);
+  }
+
+  function getPluginList(
+    page: number = nowPage,
+    keyword: string = searchKeyword
+  ) {
+    spaceClient.getMarketPlugins(page, 10, keyword).then((res) => {
+      setMarketPluginList(
+        res.plugins.map(
+          (marketPlugin) =>
+            new PluginMarketCardVO({
+              author: marketPlugin.author,
+              description: marketPlugin.description,
+              githubURL: marketPlugin.repository,
+              name: marketPlugin.name,
+              pluginId: String(marketPlugin.ID),
+              starCount: marketPlugin.stars
+            })
+        )
+      );
+      setTotalCount(res.total);
+      console.log("market plugins:", res);
+    });
+  }
+
+  return (
+    <div className={`${styles.marketComponentBody}`}>
+      <Input
+        style={{
+          width: "300px",
+          marginTop: "10px"
+        }}
+        value={searchKeyword}
+        placeholder="搜索插件"
+        onChange={(e) => onInputSearchKeyword(e.target.value)}
+      />
+      <div className={`${styles.pluginListContainer}`}>
+        {marketPluginList.map((vo, index) => {
+          return (
+            <div key={index}>
+              <PluginMarketCardComponent cardVO={vo} />
+            </div>
+          );
+        })}
+      </div>
+      <Pagination
+        defaultCurrent={1}
+        total={totalCount}
+        onChange={(pageNumber) => {
+          setNowPage(pageNumber);
+          getPluginList(pageNumber);
+        }}
+      />
+    </div>
+  );
+}

web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx

@@ -0,0 +1,56 @@
+import styles from "./pluginMarketCard.module.css"
+import {GithubOutlined, StarOutlined} from '@ant-design/icons';
+import {PluginMarketCardVO} from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO";
+import {Button} from "antd";
+
+export default function PluginMarketCardComponent({
+     cardVO
+}: {
+    cardVO: PluginMarketCardVO
+}) {
+
+
+    function handleInstallClick (pluginId: string) {
+        console.log("Install plugin: ", pluginId)
+    }
+
+    return (
+        <div className={`${styles.cardContainer}`}>
+            {/*  header  */}
+            <div className={`${styles.cardHeader}`}>
+                {/* left author */}
+                <div className={`${styles.fontGray}`}>{cardVO.author}</div>
+                {/*  right icon */}
+                <GithubOutlined
+                    style={{fontSize: '26px'}}
+                    type="setting"
+                />
+            </div>
+            {/*  content  */}
+            <div className={`${styles.cardContent}`}>
+                <div className={`${styles.boldFont}`}>{cardVO.name}</div>
+                <div className={`${styles.fontGray}`}>{cardVO.description}</div>
+            </div>
+            {/*  footer  */}
+            <div className={`${styles.cardFooter}`}>
+                <div className={`${styles.linkSettingContainer}`}>
+                    <div className={`${styles.link}`}>
+                        <StarOutlined
+                            style={{fontSize: '22px'}}
+                        />
+                        <span>{cardVO.starCount}</span>
+                    </div>
+                </div>
+                <Button
+                    type="primary"
+                    size={"small"}
+                    onClick={() => {
+                        handleInstallClick(cardVO.pluginId)
+                    }}
+                >
+                    安装
+                </Button>
+            </div>
+        </div>
+    );
+}

web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO.ts

@@ -0,0 +1,26 @@
+export interface IPluginMarketCardVO {
+    pluginId: string;
+    author: string,
+    name: string,
+    description: string,
+    starCount: number,
+    githubURL: string,
+}
+
+export class PluginMarketCardVO implements IPluginMarketCardVO {
+    pluginId: string;
+    description: string;
+    name: string;
+    author: string;
+    githubURL: string;
+    starCount: number;
+
+    constructor(prop: IPluginMarketCardVO) {
+        this.description = prop.description
+        this.name = prop.name
+        this.author = prop.author
+        this.githubURL = prop.githubURL
+        this.starCount = prop.starCount
+        this.pluginId = prop.pluginId
+    }
+}

web/src/app/home/plugins/plugin-market/plugin-market-card/pluginMarketCard.module.css

@@ -0,0 +1,77 @@
+.cardContainer {
+    width: 360px;
+    height: 140px;
+    box-sizing: border-box;
+    background-color: #FFF;
+    border-radius: 9px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px -1px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+.cardHeader {
+    width: 90%;
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    .iconVersionContainer {
+        width: 90px;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+    }
+}
+
+.cardContent {
+    width: 90%;
+
+    height: 70px;
+}
+
+.cardFooter {
+    width: 90%;
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+
+.fontGray {
+    color: #6C6C6C;
+}
+
+.boldFont {
+    font-size: 22px;
+    font-weight: bold;
+}
+
+.linkSettingContainer {
+    width: 80px;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    .link {
+        width: 32px;
+        cursor: pointer;
+        text-align: center;
+        display: flex;
+        flex-direction: row;
+        color: #6062E7;
+        align-self: center;
+        justify-content: space-between;
+    }
+}