Pārlūkot izejas kodu

feat: add UploaderGrid

王晓东 2 mēneši atpakaļ
vecāks
revīzija
403495e4e6

+ 0 - 0
src/pages/knowledge-item-editor/components/media-grid/index.module.less → src/components/UploaderGrid/index.module.less


+ 42 - 0
src/components/UploaderGrid/index.tsx

@@ -0,0 +1,42 @@
+import { View } from "@tarojs/components";
+import MediaItem from "@/components/media-item/index";
+import style from "./index.module.less";
+import IconDeleteGray16 from "@/components/icon/IconDeleteGray16";
+import IconPlusGray16 from "@/components/icon/IconPlusGray16";
+import type { TMediaType } from "@/types/index";
+
+export interface IndexProps {
+  list: TMediaType[];
+  onChange?: (list: TMediaType[]) => void;
+  onDelete?: (index:number, item: TMediaType) => void;
+}
+
+const Index = ({ list, onChange, onDelete }: IndexProps) => {
+
+  return (
+    <View className="grid grid-cols-3 gap-x-8 gap-y-12 justify-center">
+      <View className="flex">
+        <View className={style.addImageBtn}>
+          <IconPlusGray16 />
+        </View>
+      </View>
+      {list.map((item, index) => {
+        return (
+          <View className="flex">
+            <View className={style.imageItem}>
+              <MediaItem media={item}></MediaItem>
+              <View className={style.deleteButton} onClick={(e:any)=> {
+                e.stopPropagation();
+                onDelete && onDelete(index, item)
+              }}>
+                <IconDeleteGray16 />
+              </View>
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+export default Index;

+ 5 - 2
src/pages/agent-gen/components/step/StepConfirm.tsx

@@ -29,7 +29,10 @@ export default React.memo(function Index({prev}:IProps) {
         }
       }
     })
-    
+  }
+
+  const handleConfirm = () => {
+    Taro.navigateTo({url: '/pages/agent/index'})
   }
   return (
     <View>
@@ -62,7 +65,7 @@ export default React.memo(function Index({prev}:IProps) {
       <View className="bottom-bar">
         <View className="grid grid-cols-2 gap-8 px-20 py-12">
           <View className={`button-rounded`} onClick={prev}>更换形象</View>
-          <View className={`button-rounded primary opacity-20`}>确定</View>
+          <View className={`button-rounded primary opacity-20`} onClick={handleConfirm}>确定</View>
         </View>
       </View>
     </View>

+ 9 - 0
src/pages/agent/components/AgentSetting/components/AgentKnowledgeLib/index.tsx

@@ -7,6 +7,7 @@ import WemetaSwitch from "@/components/wemeta-switch";
 import IconArrow from "@/components/icon/icon-arrow";
 
 import IconPageColor from "@/components/icon/icon-page-color";
+import Taro from "@tarojs/taro";
 
 export default function Index() {
   
@@ -24,12 +25,20 @@ export default function Index() {
     );
   };
 
+  const handleClick = ()=> {
+    Taro.switchTab({
+      url: '/pages/knowledge/index'
+    })
+    
+  }
+
   return (
     <CardList>
             <CardListItem
               className="pl-16 pr-8"
               leftRenderer={IconPageColor}
               rightRenderer={IconArrowRight}
+              onClick={handleClick}
             >
               <View className="text-14 py-18 font-medium leading-22">
                 知识库

+ 0 - 83
src/pages/knowledge-item-editor/components/media-grid/index.tsx

@@ -1,83 +0,0 @@
-import { View } from "@tarojs/components";
-import MediaItem from "@/components/media-item/index";
-import style from './index.module.less'
-import IconDeleteGray16 from "@/components/icon/IconDeleteGray16";
-import IconPlusGray16 from "@/components/icon/IconPlusGray16";
-const Index = () => {
-  const handleDelete = (e:any)=> {
-    e.stopPropagation();
-    console.log('delete')
-  }
-  return (
-    <View className="grid grid-cols-3 gap-x-8 gap-y-12 justify-center">
-      <View className="flex">
-        <View className={style.addImageBtn}>
-          <IconPlusGray16/>
-        </View>
-      </View>
-      <View className="flex">
-        <View className={style.imageItem}>
-          <MediaItem media={{fileType: 'image',url: 'https://cdn.wehome.cn/cmn/png/53/META-H8UKWHWU-2JNUAG2BARJF55VHU9QS3-YBQGHDAM-IW.png'}}></MediaItem>
-
-          <View
-            className={style.deleteButton}
-            onClick={handleDelete}
-          >
-            
-            <IconDeleteGray16/>
-          </View>
-        </View>
-      </View>
-      <View className="flex">
-        <View className={style.imageItem}>
-          <MediaItem media={{fileType: 'image',url: 'https://cdn.wehome.cn/cmn/png/53/META-H8UKWHWU-2JNUAG2BARJF55VHU9QS3-YBQGHDAM-IW.png'}}></MediaItem>
-
-          <View
-            className={style.deleteButton}
-            onClick={handleDelete}
-          >
-            <IconDeleteGray16/>
-          </View>
-        </View>
-      </View>
-      <View className="flex">
-        <View className={style.imageItem}>
-          <MediaItem media={{fileType: 'image',url: 'https://cdn.wehome.cn/cmn/png/53/META-H8UKWHWU-2JNUAG2BARJF55VHU9QS3-YBQGHDAM-IW.png'}}></MediaItem>
-
-          <View
-            className={style.deleteButton}
-            onClick={handleDelete}
-          >
-            <IconDeleteGray16/>
-          </View>
-        </View>
-      </View>
-      <View className="flex">
-        <View className={style.imageItem}>
-          <MediaItem media={{fileType: 'image',url: 'https://cdn.wehome.cn/cmn/png/53/META-H8UKWHWU-2JNUAG2BARJF55VHU9QS3-YBQGHDAM-IW.png'}}></MediaItem>
-
-          <View
-            className={style.deleteButton}
-            onClick={handleDelete}
-          >
-            <IconDeleteGray16/>
-          </View>
-        </View>
-      </View>
-      <View className="flex">
-        <View className={style.imageItem}>
-          <MediaItem media={{fileType: 'image',url: 'https://cdn.wehome.cn/cmn/png/53/META-H8UKWHWU-2JNUAG2BARJF55VHU9QS3-YBQGHDAM-IW.png'}}></MediaItem>
-
-          <View
-            className={style.deleteButton}
-            onClick={handleDelete}
-          >
-            <IconDeleteGray16/>
-          </View>
-        </View>
-      </View>
-    </View>
-  )
-}
-
-export default Index;

+ 105 - 40
src/pages/knowledge-item-editor/index.tsx

@@ -10,50 +10,107 @@ import BottomBar from "@/components/BottomBar";
 
 import IconQ from "@/components/icon/IconQ";
 import IconA from "@/components/icon/IconA";
-import IconAImage from "@/components/icon/IconAImage";
+
 import IconPlusColor14 from "@/components/icon/IconPlusColor14";
 import IconALink from "@/components/icon/IconALink";
 import IconDeleteGray16 from "@/components/icon/IconDeleteGray16";
 import { useState } from "react";
-import Taro from "@tarojs/taro";
-import WemetaTextarea from '@/components/wemeta-textarea'
-import WemetaInput from '@/components/wemeta-input'
-import MediaGrid from './components/media-grid'
+import IconAImage from "@/components/icon/IconAImage";
+import WemetaTextarea from "@/components/wemeta-textarea";
+import WemetaInput from "@/components/wemeta-input";
+import UploaderGrid from '@/components/UploaderGrid'
+import type { TMediaType } from "@/types/index";
 
+type TFormdata = {q:string, a: string, links: string[], mediaList: TMediaType[]}
+
+interface IProps {
+  initialData?: TFormdata
+}
+export default function Index({ initialData }: IProps) {
+  
+  const [formData, setFormData] = useState<TFormdata>(
+    initialData || {
+      q: "手术费用大概多少?能刷医保吗?",
+      a: "全飞秒手术费用通常在1.5万-2万元左右,半飞秒约1.2万起,ICL晶体术因晶体品牌不同在2.5万-4万元不等。屈光手术属于择业性消费,一般不纳入医保范围,但部分城市可用商业保险或税优健康险报销。",
+      links: ["baidu.com"],
+      mediaList: [{fileType: 'image',url: 'https://cdn.wehome.cn/cmn/png/53/META-H8UKWHWU-2JNUAG2BARJF55VHU9QS3-YBQGHDAM-IW.png'}]
+    }
+  );
 
-export default function Index() {
-  const [value, setValue] = useState("手术费用大概多少?能刷医保吗?");
-  const [valueA, setValueA] = useState("全飞秒手术费用通常在1.5万-2万元左右,半飞秒约1.2万起,ICL晶体术因晶体品牌不同在2.5万-4万元不等。屈光手术属于择业性消费,一般不纳入医保范围,但部分城市可用商业保险或税优健康险报销。");
   const handleInput = (value: string) => {
-    setValue(value);
+    setFormData({
+      ...formData,
+      q: value,
+    });
   };
   const handleValueAInput = (value: string) => {
-    setValueA(value);
+    setFormData({
+      ...formData,
+      a: value,
+    });
   };
-  const handleDelete = (e:any)=> {
+
+  // 添加链接
+  const addLink = () => {
+    setFormData({
+      ...formData,
+      links: [...formData.links, ""],
+    });
+  };
+
+  // 删除链接
+  const removeLink = (e, index) => {
     e.stopPropagation();
-    console.log('delete')
-  }
+    const newLinks = [...formData.links];
+    newLinks.splice(index, 1);
+    setFormData({
+      ...formData,
+      links: newLinks,
+    });
+  };
 
-  const handleAddLink = ()=> {
+  // 更新单个链接
+  const handleLinkChange = (index, value) => {
+    const newLinks = [...formData.links];
+    newLinks[index] = value;
+    setFormData({
+      ...formData,
+      links: newLinks,
+    });
+  };
 
+  const handleDeleteMedia = (index:number) => {
+    setFormData(prev => ({
+      ...prev,
+      mediaList: prev.mediaList.filter((_, i) => i !== index)
+    }));
+  };
+
+  const handleSubmit = ()=> {
+    // 过滤掉空的链接
+    const dataToSubmit = {
+      ...formData,
+      links: formData.links.filter(link => link.trim() !== '')
+    }
+    console.log(dataToSubmit)
   }
 
   return (
     <PageCustom>
-      <NavBarNormal backText="飞秒小知识"></NavBarNormal>
+      <NavBarNormal scrollFadeIn backText="飞秒小知识"></NavBarNormal>
       <View className="w-full pb-120">
         <View className="p-16">
           <View className="flex flex-col gap-16">
-
             <View className="flex flex-col">
               <View className="flex items-start gap-8 mb-6">
-                <View className="flex-center h-28"><IconQ/></View>
+                <View className="flex-center h-28">
+                  <IconQ />
+                </View>
                 <View className="flex-1 text-14 leading-28">问题描述</View>
               </View>
               <View className="">
                 <WemetaTextarea
-                  value={value}
+                  value={formData.q}
                   onInput={handleInput}
                   placeholder="描述你想要生成的画面和动作。例如:职场精英在点头微笑"
                 />
@@ -63,12 +120,14 @@ export default function Index() {
             {/* 回答 */}
             <View className="flex flex-col">
               <View className="flex items-start gap-8 mb-6">
-                <View className="flex-center h-28"><IconA/></View>
+                <View className="flex-center h-28">
+                  <IconA />
+                </View>
                 <View className="flex-1 text-14 leading-28">回答</View>
               </View>
               <View>
                 <WemetaTextarea
-                  value={valueA}
+                  value={formData.a}
                   onInput={handleValueAInput}
                   placeholder="描述你想要生成的画面和动作。例如:职场精英在点头微笑"
                 />
@@ -78,43 +137,49 @@ export default function Index() {
             {/* 链接 */}
             <View className="flex flex-col">
               <View className="flex items-start gap-8 mb-6">
-                <View className="flex-center h-28"><IconALink/></View>
+                <View className="flex-center h-28">
+                  <IconALink />
+                </View>
                 <View className="flex-1 text-14 leading-28">链接</View>
-                <View className="flex-center px-8 gap-4" onClick={handleAddLink}>
-                  <IconPlusColor14/>
+                <View className="flex-center px-8 gap-4" onClick={addLink}>
+                  <IconPlusColor14 />
                   <View className="text-primary">新增</View>
                 </View>
               </View>
               <View className="flex flex-col gap-8">
-                <WemetaInput
-                  value={valueA}
-                  onInput={handleValueAInput}
-                  suffix={()=> <View onClick={handleDelete}><IconDeleteGray16/></View>}
-                  placeholder="请输入查看链接,支持长按粘贴..."
-                />
-                
-                <WemetaInput
-                  value=""
-                  onInput={()=> {}}
-                  suffix={()=> <View onClick={handleDelete}><IconDeleteGray16/></View>}
-                  placeholder="请输入查看链接,支持长按粘贴..."
-                />
+                {formData.links.map((link, index) => {
+                  return (
+                    <WemetaInput
+                      value={link}
+                      onInput={(value) => handleLinkChange(index, value)}
+                      suffix={() => (
+                        <View onClick={(e) => removeLink(e, index)}>
+                          <IconDeleteGray16 />
+                        </View>
+                      )}
+                      placeholder="请输入查看链接,支持长按粘贴..."
+                    />
+                  );
+                })}
               </View>
             </View>
 
             {/* 图片 */}
             <View className="flex flex-col">
               <View className="flex items-start gap-8 mb-6">
-                <View className="flex-center h-28"><IconAImage/></View>
+                <View className="flex-center h-28">
+                  <IconAImage />
+                </View>
                 <View className="flex-1 text-14 leading-28">图片</View>
               </View>
-              <MediaGrid />
+              <UploaderGrid  list = {formData.mediaList} onChange={()=> {}} onDelete={handleDeleteMedia} />
             </View>
+            
           </View>
         </View>
-        
+
         <BottomBar>
-          <View className="button-rounded button-primary flex-1">保存</View>
+          <View className="button-rounded button-primary flex-1" onClick={handleSubmit}>保存</View>
         </BottomBar>
       </View>
     </PageCustom>