Browse Source

fix: 修改市场列表渲染等

liaojiaxing 1 month ago
parent
commit
335f9a8182

+ 1 - 0
src/components/ai/MarkdownViewer.tsx

@@ -38,6 +38,7 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({ content }) => {
     setCopiedIndex(index);
     setTimeout(() => setCopiedIndex(null), 2000);
   };
+  console.log(content);
 
   return (
     <ReactMarkdown

+ 2 - 0
src/hooks/useChat.ts

@@ -123,6 +123,7 @@ export function useChat({ app_name, onSuccess, onUpdate, onError }: ChatProps) {
       setMessages([]);
       return;
     }
+    cancel();
     setLoadingMessages(true);
     // 获取会话内容
     try {
@@ -279,6 +280,7 @@ export function useChat({ app_name, onSuccess, onUpdate, onError }: ChatProps) {
    * 新增会话
    */
   const addConversation = () => {
+    cancel();
     setMessages([]);
     setActiveConversation("1");
     // 还没产生对话时 直接清除当前对话

+ 8 - 5
src/pages/ai/Assistant.tsx

@@ -65,7 +65,7 @@ const roles: GetProp<typeof Bubble.List, "roles"> = {
     ),
     messageRender: (content) => {
       return typeof content === "string" ? (
-        <Typography>
+        <Typography className={content?.includes('```') ? 'w-full' : ''}>
           <MarkdownViewer content={content} />
         </Typography>
       ) : (
@@ -235,9 +235,12 @@ export default (props: AssistantProps) => {
   };
   useEffect(() => {
     setHeight();
-    window.addEventListener("resize", setHeight);
+    const resizeObserver = new ResizeObserver(() => {
+      setHeight();
+    });
+    resizeObserver.observe(contentRef.current!);
     return () => {
-      window.removeEventListener("resize", setHeight);
+      resizeObserver.disconnect();
     };
   }, []);
 
@@ -409,9 +412,9 @@ export default (props: AssistantProps) => {
               </div>
             </Spin>
             <Divider type="vertical" style={{ height: "100%" }} />
-            <Flex vertical style={{ flex: 1 }} gap={8}>
+            <Flex vertical style={{ flex: 1, overflow: 'hidden', height: '100%' }} gap={8}>
               <div
-                className="flex-1"
+                className="flex-1 overflow-hidden"
                 ref={contentRef}
                 style={{ height: contentHeight }}
               >

+ 18 - 0
src/pages/ai/data.tsx

@@ -130,4 +130,22 @@ export const assistantList: AgentItem[] = [
       },
     ]
   },
+  {
+    key: "code_generate",
+    name: "代码生成",
+    icon: icon6,
+    description: "我可以帮你生成页面代码、JS代码、后端代码、SQL代码等",
+    promptsItems: [
+      {
+        key: "1",
+        icon: <SmileOutlined style={{ color: "#52C41A" }} />,
+        description: "写一个登陆页面",
+      },
+      {
+        key: "2",
+        icon: <SmileOutlined style={{ color: "#52C41A" }} />,
+        description: "帮我写一个登陆方法?",
+      },
+    ]
+  },
 ];

+ 3 - 0
src/pages/ai/index.less

@@ -5,4 +5,7 @@
   background: #fff;
   color: #344054;
   font-weight: 500;
+}
+#root {
+  height: 100vh;
 }

+ 1 - 0
src/pages/ai/index.tsx

@@ -3,6 +3,7 @@ import Assistant from "./Assistant";
 import data from "@emoji-mart/data";
 import { init } from "emoji-mart";
 import styles from "./index.less";
+import "./index.less";
 import logo from "@/assets/shalu-new1.png";
 import { assistantList } from "./data";
 

+ 39 - 9
src/pages/application/index.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
 import ItemCard from "@/components/ItemCard";
-import { Input, Empty, Spin } from "antd";
+import { Input, Empty, Spin, Pagination } from "antd";
 import { GetAppPublicList } from "@/api/appStore";
 import { useRequest } from "umi";
 import { INDUSTRIE_OPTIONS, APPLICATION_SCENARIOS_OPTIONS } from "@/constants";
 import noDataImg from "@/assets/no-data.svg";
+import "@/style/index.less";
 
 type SceneItem = {
   label: string;
@@ -25,11 +26,12 @@ export default function Home() {
   const [search, setSearch] = useState("");
   const [industryFilter, setIndustryFilter] = useState("all");
   const [sceneFilter, setSceneFilter] = useState("recommend");
+  const [currentPage, setCurrentPage] = useState(1);
   const { data, run, loading } = useRequest(GetAppPublicList, {
     defaultParams: [
       {
         currentPage: 1,
-        pageSize: 1000,
+        pageSize: 20,
         filters: [
           { name: "isDel", value: 0 },
           { name: "isOnMarket", value: 1 },
@@ -39,9 +41,10 @@ export default function Home() {
   });
 
   useEffect(() => {
+    setCurrentPage(1);
     run({
       currentPage: 1,
-      pageSize: 1000,
+      pageSize: 20,
       filters: [
         { name: "isDel", value: 0 },
         { name: "isOnMarket", value: 1 },
@@ -58,6 +61,27 @@ export default function Home() {
     });
   }, [industryFilter, sceneFilter, search]);
 
+  const handleChangePage = (page: number) => {
+    setCurrentPage(page);
+    run({
+      currentPage: page,
+      pageSize: 20,
+      filters: [
+        { name: "isDel", value: 0 },
+        { name: "isOnMarket", value: 1 },
+        { name: "name", value: search },
+        {
+          name: "industries",
+          value: industryFilter === "all" ? "" : industryFilter,
+        },
+        {
+          name: "applicationScenarios",
+          value: sceneFilter === "recommend" ? "" : sceneFilter,
+        },
+      ],
+    });
+  };
+
   const handleToAppDetail = (id: string) => {
     window.open(`#/detail/application/${id}`, "_blank");
   };
@@ -111,21 +135,27 @@ export default function Home() {
         </div>
 
         <div className="relative flex flex-1 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow mt-4 relative">
-          <nav
-            className="grid content-start shrink-0 gap-4 px-6 sm:px-12"
-            style={{ gridTemplateColumns: "repeat(3,minmax(0,1fr))" }}
-          >
+          <nav className="style_appList grid content-start shrink-0 gap-4 px-6 sm:px-12">
             {(data?.result?.model || []).map((item: any, index: number) => (
               <ItemCard data={item} key={index} onClick={handleToAppDetail} />
             ))}
           </nav>
+          
+          <Pagination
+            className="mt-6"
+            align="center"
+            hideOnSinglePage
+            current={currentPage}
+            total={data?.result?.totalCount || 0}
+            onChange={handleChangePage}
+          />
 
           {!data?.result.model.length && !loading && (
             <Empty description="暂无数据" image={noDataImg} />
           )}
-          
+
           <div className="h-200px w-full absolute left-0 top0 flex items-center justify-center pointer-events-none">
-            <Spin spinning={loading}/>
+            <Spin spinning={loading} />
           </div>
         </div>
       </div>

+ 1 - 2
src/pages/management/AddAppDrawer.tsx

@@ -130,12 +130,11 @@ export default ({
               { max: 30, message: "名称不能超过30个字符" },
             ]}
           />
-          <ProFormText
+          <ProFormTextArea
             width="md"
             name="trialUrl"
             label="试用地址"
             placeholder="请输入名称"
-            rules={[{ max: 100, message: "名称不能超过100个字符" }]}
           />
           <ProFormUploadButton
             fieldProps={{

+ 2 - 4
src/pages/management/AppTab.tsx

@@ -5,7 +5,7 @@ import {
   TableDropdown,
 } from "@ant-design/pro-components";
 import { ProTable } from "@ant-design/pro-components";
-import { Popconfirm, Tag, message } from "antd";
+import { Popconfirm, Tag, Tooltip, message } from "antd";
 import AddAppDrawer from "./AddAppDrawer";
 import {
   GetAppList,
@@ -144,9 +144,7 @@ export default () => {
       search: false,
       renderText: (text) =>
         text ? (
-          <a target="_blank" rel="noopener noreferrer" href={text}>
-            {text}
-          </a>
+          <Tooltip title={text}><a target="_blank" rel="noopener noreferrer" href={text}>试用链接</a></Tooltip>
         ) : (
           "-"
         ),

+ 37 - 5
src/pages/template/index.tsx

@@ -3,9 +3,10 @@ import ItemCard from "@/components/ItemCard";
 import { APPLICATION_SCENARIOS_OPTIONS } from "@/constants";
 import { useRequest } from "umi";
 import { GetTemplatePublicList } from "@/api/templateStore";
-import { Input, Spin, Empty } from "antd";
+import { Input, Spin, Empty, Pagination } from "antd";
 import { MODULE_TEMPLATE_TYPE } from "@/constants";
 import noDataImg from "@/assets/no-data.svg";
+import '@/style/index.less';
 
 type OptionItem = {
   label: string;
@@ -30,11 +31,12 @@ export default function Template() {
   const [search, setSearch] = useState("");
   const [industryFilter, setIndustryFilter] = useState("all");
   const [sceneFilter, setSceneFilter] = useState("recommend");
+  const [currentPage, setCurrentPage] = useState(1);
   const { data, run, loading } = useRequest(GetTemplatePublicList, {
     defaultParams: [
       {
         currentPage: 1,
-        pageSize: 1000,
+        pageSize: 20,
         filters: [
           { name: "isDel", value: 0 },
           { name: "isOnMarket", value: 1 },
@@ -44,9 +46,10 @@ export default function Template() {
   });
 
   useEffect(() => {
+    setCurrentPage(1);
     run({
       currentPage: 1,
-      pageSize: 1000,
+      pageSize: 20,
       filters: [
         { name: "isDel", value: 0 },
         { name: "isOnMarket", value: 1 },
@@ -63,6 +66,27 @@ export default function Template() {
     });
   }, [industryFilter, sceneFilter, search]);
 
+  const handleChangePage = (page: number) => {
+    setCurrentPage(page);
+    run({
+      currentPage: page,
+      pageSize: 20,
+      filters: [
+        { name: "isDel", value: 0 },
+        { name: "isOnMarket", value: 1 },
+        { name: "name", value: search },
+        {
+          name: "industries",
+          value: industryFilter === "all" ? "" : industryFilter,
+        },
+        {
+          name: "applicationScenarios",
+          value: sceneFilter === "recommend" ? "" : sceneFilter,
+        },
+      ],
+    });
+  };
+
   const handleToAppDetail = (id: string) => {
     window.open(`#/detail/template/${id}`, "_blank");
   };
@@ -117,14 +141,22 @@ export default function Template() {
 
         <div className="relative flex flex-1 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow mt-4">
           <nav
-            className="grid content-start shrink-0 gap-4 px-6 sm:px-12"
-            style={{ gridTemplateColumns: "repeat(3,minmax(0,1fr))" }}
+            className="style_appList grid content-start shrink-0 gap-4 px-6 sm:px-12"
           >
             {(data?.result?.model || []).map((item: any, index: number) => (
               <ItemCard data={item} key={index} onClick={handleToAppDetail} />
             ))}
           </nav>
 
+          <Pagination
+            className="mt-6"
+            align="center"
+            hideOnSinglePage
+            current={currentPage}
+            total={data?.result?.totalCount || 0}
+            onChange={handleChangePage}
+          />
+
           {!data?.result.model.length && !loading && (
             <Empty description="暂无数据" image={noDataImg} />
           )}

+ 17 - 0
src/style/index.less

@@ -0,0 +1,17 @@
+@media (min-width: 1624px) {
+  .style_appList {
+      grid-template-columns:repeat(4,minmax(0,1fr))
+  }
+}
+
+@media (min-width: 1300px) and (max-width:1624px) {
+  .style_appList {
+      grid-template-columns:repeat(3,minmax(0,1fr))
+  }
+}
+
+@media (min-width: 1025px) and (max-width:1300px) {
+  .style_appList {
+      grid-template-columns:repeat(2,minmax(0,1fr))
+  }
+}