feat(website): 新建时添加默认组件

project.private.config.json

@@ -11,14 +11,14 @@
         {
           "name": "pages/profile/index",
           "pathName": "pages/profile/index",
-          "query": "agentId=p_391b4d3fdeaY2zRc-agent_2775",
-          "scene": null,
-          "launchMode": "default"
+          "query": "agentId=p_2e73c9d7efaYfDo2-agent_3890",
+          "launchMode": "default",
+          "scene": null
         },
         {
           "name": "pages/profile/index",
           "pathName": "pages/profile/index",
-          "query": "agentId=p_2e73c9d7efaYfDo2-agent_3111&shareKey=2%241%24AAABSUpQ0nQXN5a4xNIfMbQKVG3v5DTlxCsNAxgHBEda7IoGdYnJ%2BH6auz2jwoCu0FzODnGgcOF6uyAUOMIbQNu%2Bms6XM8hDFvFaSf9B2%2B%2FglMEC",
+          "query": "agentId=p_391b4d3fdeaY2zRc-agent_2775",
           "launchMode": "default",
           "scene": null
         }

src/components/AgentPage/index.tsx

@@ -93,7 +93,7 @@ export default function Index({ agentId }: IProps) {
       <View className="blur-rounded-container" id="BlurRoundedContainer" style={{marginTop: `${marginTop}px`}}>
         {(!!agent) ? <AgentActionBar isVisitor={false} agent={agent}></AgentActionBar> : <></>}
         <View className={`flex flex-col gap-12 w-full p-16`}>
-          <ComponentList components={components}></ComponentList>
+          <ComponentList isVisitor={false} components={components}></ComponentList>
         </View>
       </View>
     </PageCustom>

src/components/component-list/components/card-link/index.tsx

@@ -12,6 +12,7 @@ import { TComponentItem } from "@/types/agent";
 interface Props {
   index: number;
   editMode: boolean;
+  isVisitor: boolean;
   component: TComponentItem;
   components: TComponentItem[];
   onSwitchChanged: (c: TComponentItem, checked: boolean) => void;
@@ -28,6 +29,7 @@ interface Props {
 export default ({
   index,
   editMode,
+  isVisitor,
   component,
   components,
   onSwitchChanged,
@@ -71,7 +73,14 @@ export default ({
 
   const handleClick = () => {
     const linkValue = data?.link ?? "";
-    if (!editMode) {
+    if (isVisitor) {
+      if(linkValue.length <= 0){
+        console.log('连接为空')
+        Taro.showToast({
+          title: '链接未配置'
+        })
+        return;
+      }
       // 如果链接是小程序链接，则直接跳转
       if (linkValue.indexOf("#小程序://") > -1) {
         openMiniProgram(linkValue);
@@ -136,7 +145,7 @@ export default ({
         } truncate`}
       >
         <Text className="block truncate">{data?.text ? data?.text : (data?.link ?  data?.link: data.placeholder)}</Text>
-        
+
       </View>
     );
   };
@@ -156,7 +165,7 @@ export default ({
         editMode={editMode}
         onDelete={() => onDelete(component)}
         onMove={(direction) => onMove(component, direction)}
-        
+
         onChanged={() => {
           if (component.data?.layout === "left") {
             onStyleChanged({

src/components/component-list/components/card-media/index.tsx

@@ -30,19 +30,20 @@ export default ({
   onClick,
   onStyleChanged,
 }: Props) => {
-    
+
   // 非编辑模式下样式需要特殊处理，与其它组件不同
   if(!editMode){
     return (
       <>
         <WidgetMedia
+          onClick={onClick}
           layout={component.data?.layout}
           mediaList={component.data?.media}
         ></WidgetMedia>
       </>
     )
   }
-  
+
   return (
     <>
       <WidgetCard

src/components/component-list/components/social-media/index.tsx

@@ -53,6 +53,7 @@ export default ({
         className={mediaItem.className}
         mediaItem={mediaItem}
         rightArrow={true}
+        onClick={onClick}
         data={component.data}
         editMode={editMode}
         setShow={showMediaLink}
@@ -61,4 +62,4 @@ export default ({
       </WidgetTypeRow>
     </WidgetCard>
   </>
-}
+}

src/components/component-list/index.tsx

@@ -30,8 +30,9 @@ import { EComponentType } from "@/consts/enum";
 interface Props {
   components: TComponentItem[];
   editMode?: boolean;
+  isVisitor?: boolean; // 是否是访客
 }
-export default ({ components, editMode = false }: Props) => {
+export default ({ components, editMode = false, isVisitor = true }: Props) => {
   const {
     delComponent,
     setCurrentComponent,
@@ -50,7 +51,7 @@ export default ({ components, editMode = false }: Props) => {
   const {handleChooseAddress, openNavigation} = useAddress()
 
   const handleMapClick = (editMode:boolean, c: TComponentItem)=> {
-    if(editMode){
+    if(editMode || !isVisitor){
       handleChooseAddress(c.data, c)
     }else{
       openNavigation(c.data)
@@ -59,6 +60,15 @@ export default ({ components, editMode = false }: Props) => {
 
   const showMediaLink = (mediaItem: TSocialMediaItem, link: string, c: TEntityComponent) => {
     console.log(c,  SocialMediaType.shiping.value, link)
+    if(!isVisitor){
+      return;
+    }
+    if(link.length <= 0 ){
+      Taro.showToast({
+        title: '链接未配置'
+      })
+      return
+    }
     // 微信公众号直接跳转
     if(c?.type === SocialMediaType.wechat.value){
       // 跳转的公众号需与小程序为同主体或关联主体
@@ -83,17 +93,20 @@ export default ({ components, editMode = false }: Props) => {
       })
       return
     }
-    
+
     setCurrentMediaItem(mediaItem);
     setCurrentLink(link);
     setShow(true);
   };
-  
+
   const handleDelete = (c: TComponentItem) => {
-    
+
     delComponent(c);
   };
   const handleNavigate = (c: TComponentItem, url: string) => {
+    if(isVisitor){
+      return
+    }
     setInsertIndex(-1);
     setCurrentComponent(c);
     let _url = url;
@@ -105,9 +118,9 @@ export default ({ components, editMode = false }: Props) => {
     Taro.navigateTo({ url: _url });
   };
 
-  
 
-  
+
+
 
   const handleSort = async (c: TComponentItem, direction: number) => {
     console.log(c, direction)
@@ -145,7 +158,7 @@ export default ({ components, editMode = false }: Props) => {
   };
 
 
-  
+
   // 渲染组件列表
   const renderComponents = () => {
     if (!components) {
@@ -193,7 +206,7 @@ export default ({ components, editMode = false }: Props) => {
             ),
           };
         }
-        
+
         // 联系人
         if(c.type === "bluebook"){
           return {
@@ -210,7 +223,6 @@ export default ({ components, editMode = false }: Props) => {
                 onMove={handleSort}
                 onStyleChanged={changeStyle}
                 onClick={() =>
-                  editMode &&
                   handleNavigate(
                     c,
                     `/pages/editor-pages/editor-link-contact/index`
@@ -220,15 +232,15 @@ export default ({ components, editMode = false }: Props) => {
             ),
           };
         }
-        
+
         // 社交媒体组件
         if (c?.type && SocialMediaType[c?.type]) {
-          
+
           const { value } = SocialMediaType[c.type];
           return {
             component: c,
             renderer: (
-              <SocialMedia 
+              <SocialMedia
                   index={index}
                   mediaItem={SocialMediaType[c.type]}
                   onSwitchChanged={handleSwitchChanged}
@@ -236,12 +248,12 @@ export default ({ components, editMode = false }: Props) => {
                   components={components}
                   editMode={editMode}
                   onDelete={handleDelete}
-                  onClick={() =>
-                    editMode &&
-                    handleNavigate(
-                      c,
-                      `/pages/editor-pages/editor-link-social/index?mediaType=${value}`
-                    )
+                  onClick={() =>{
+                      handleNavigate(
+                        c,
+                        `/pages/editor-pages/editor-link-social/index?mediaType=${value}`
+                      )
+                    }
                   }
                   onMove={handleSort}
                   showMediaLink={(mediaItem, link)=> showMediaLink(mediaItem, link, c)}
@@ -294,7 +306,6 @@ export default ({ components, editMode = false }: Props) => {
                   <WidgetContent
                     editMode={editMode}
                     onClick={() =>
-                      editMode &&
                       handleNavigate(
                         c,
                         `/pages/editor-pages/editor-textarea/index`
@@ -311,15 +322,16 @@ export default ({ components, editMode = false }: Props) => {
           };
         }
 
-        
+
         // 普通链接及公众号文章
         if (c.type === 'link' || c.type === 'wechatArticle') {
-          
+
           return {
             component: c,
             renderer: (
               <CardLink
                   index={index}
+                  isVisitor={isVisitor}
                   onSwitchChanged={handleSwitchChanged}
                   components={components}
                   component={c}
@@ -328,13 +340,13 @@ export default ({ components, editMode = false }: Props) => {
                   onMove={handleSort}
                   onStyleChanged={changeStyle}
                   onClick={(c, link, mediaItem) =>{
-                    if(editMode){
+                    if(!isVisitor){
                       handleNavigate(
                         c,
                         `/pages/editor-pages/editor-link/index?linkType=${c.data.linkType}&title=${c.data.title}`,
                       )
                     }else{
-                      
+
                       showMediaLink(mediaItem, link, c)
                     }
                   }}
@@ -343,15 +355,15 @@ export default ({ components, editMode = false }: Props) => {
           };
         }
 
-        
 
-        
+
+
         // 电话
         if (c.type === "tel") {
           return {
             component: c,
             renderer: (
-              <CardTel 
+              <CardTel
               index={index}
               onSwitchChanged={handleSwitchChanged}
               component={c}
@@ -385,9 +397,9 @@ export default ({ components, editMode = false }: Props) => {
                   components={components}
                   editMode={editMode}
                   onDelete={() => handleDelete(c)}
-                  onClick={() =>
-                    editMode &&
-                    handleNavigate(c, "/pages/editor-pages/editor-media/index")
+                  onClick={() => {
+                      handleNavigate(c, "/pages/editor-pages/editor-media/index")
+                    }
                   }
                   onMove={handleSort}
                   onStyleChanged={changeStyle}
@@ -424,7 +436,7 @@ export default ({ components, editMode = false }: Props) => {
                   >
                     {c.data.name}
                   </WidgetMap>
-                  
+
                 </WidgetCard>
               </>
             ),
@@ -432,7 +444,7 @@ export default ({ components, editMode = false }: Props) => {
         }
       })
       .filter((item) => !!item);
-    
+
     // 如果是编辑模式则显示 “添加组件” 按钮
     if (editMode) {
       const _components: JSX.Element[] = [renderNewCompButton(-1)];
@@ -445,9 +457,9 @@ export default ({ components, editMode = false }: Props) => {
     }
     return componentsWithJSX.map((item) => item.renderer);
   };
-  
+
   return (
-    
+
     <>
       {currentMediaItem && (
         <PopupLinkCopyer

src/components/widgets/widget-card/index.tsx

@@ -117,7 +117,7 @@ const Index: React.FC<Props> = ({
                   src={IconDelete}
                   mode="widthFix"
                   className={`w-20 h-20`}
-                ></Image> 
+                ></Image>
             </View>
             <WemetaSwitch
               checked={enabled}

src/components/widgets/widget-media/index.tsx

@@ -6,11 +6,12 @@ import type { TMediaType } from "@/types/index";
 interface Props {
   mediaList: TMediaType[];
   layout: string;
+  onClick: () => void,
   editMode?: boolean
 }
 
-const Index: React.FC<Props> = ({ layout, mediaList, editMode=false }) => {
-  
+const Index: React.FC<Props> = ({ layout, mediaList, editMode=false, onClick }) => {
+
   // 预览媒体
   const handlePreview = (e: any, index: number, item: TMediaType) => {
     if(editMode){
@@ -30,7 +31,7 @@ const Index: React.FC<Props> = ({ layout, mediaList, editMode=false }) => {
   };
 
   const renderEmpty = ()=> {
-    return <View className={editMode ? 'px-16': ''}><View className="component-card-empty">
+    return <View className={editMode ? 'px-16': ''} onClick={onClick}><View className="component-card-empty">
       <View className="component-card-content">
         <View className="component-card-empty-figure"></View>
         <View className="component-card-empty-tips">点击配置图片/视频</View>
@@ -48,12 +49,12 @@ const Index: React.FC<Props> = ({ layout, mediaList, editMode=false }) => {
     if (mediaList.length === 1) {
       const item = mediaList[0];
       return (
-        <View className={editMode ? "px-16": ''}>
+        <View className={editMode ? "px-16": ''} onClick={onClick}>
           <View
             className={editMode ? style.figureSingle: style.figureSingleLarge}
             onClick={(e) => handlePreview(e, 0, item)}
           >
-            <MediaItem mode="widthFix" media={item} extraClass={style.singleMedia} isAspectRatio></MediaItem> 
+            <MediaItem mode="widthFix" media={item} extraClass={style.singleMedia} isAspectRatio></MediaItem>
           </View>
         </View>
       );
@@ -70,7 +71,7 @@ const Index: React.FC<Props> = ({ layout, mediaList, editMode=false }) => {
                 onClick={(e) => handlePreview(e, index, item)}
               >
                 <MediaItem  isAspectRatio mode="widthFix" media={item} extraClass={editMode ? style.mediaFull: style.mediaFullLarge}></MediaItem>
-                
+
               </View>
             );
           })}

src/components/widgets/widget-type-row/index.tsx

@@ -29,21 +29,21 @@ const Index: React.FC<Props> = ({
   onClick,
   setShow,
 }) => {
-  
+
   const center =
     layout === "center" || layout === "simple" ? "justify-center" : "";
-  
+
 
   const handleCopy = (e: any) => {
     if (mediaItem) {
       e.stopPropagation();
       setShow && setShow(mediaItem, data?.link ?? data?.value)
-      return;
     }
     onClick && onClick(e);
   };
 
   const handleClick = (e: any) => {
+    e.stopPropagation();
     onClick && onClick(e);
   };
   if (!editMode) {
@@ -69,7 +69,7 @@ const Index: React.FC<Props> = ({
         {children}
       </View>
       <View className={style.copyText} onClick={(e) => handleCopy(e)}>
-          
+
         </View>
     </View>
   );

src/config/default-components.ts

@@ -0,0 +1,130 @@
+import { EComponentType } from "@/consts/enum";
+export const DefaultWebsiteComponents = [
+    {
+      type: EComponentType.address,
+      data: {
+        address: "浙江省杭州市西湖区文一西路西溪首座b3座",
+        latitude: 30.28809928894043,
+        longitude: 120.07521057128906,
+        name: "深圳小蓝本网络技术有限公司杭州总部",
+      }
+    },
+    {
+      type: EComponentType.title,
+      data: {
+        text: '产品服务',
+        placeholder: '默认标题',
+        layout: 'left'
+      }
+    },
+    {
+      type: EComponentType.media,
+
+      data: {
+        media: [],
+        layout: 'mini',
+      }
+    },
+    {
+      type: EComponentType.media,
+      data: {
+        media: [],
+        layout: 'mini',
+      }
+    },
+    {
+      type: EComponentType.media,
+      data: {
+        media: [],
+        layout: 'mini',
+      }
+    },
+    {
+      type: EComponentType.title,
+      data: {
+        text: '客户案例',
+        placeholder: '默认标题',
+        layout: 'left'
+      }
+    },
+    {
+      type: EComponentType.link,
+      data: {
+        link: '',
+        layout: 'left',
+        poster: '',
+        linkType: '',
+        text: '客户案例1',
+        placeholder: '默认链接',
+      }
+    },
+    {
+      type: EComponentType.link,
+      data: {
+        link: '',
+        layout: 'left',
+        poster: '',
+        linkType: '',
+        text: '客户案例2',
+        placeholder: '默认链接',
+      }
+    },
+    {
+      type: EComponentType.title,
+      data: {
+        text: '关于我们',
+        placeholder: '默认标题',
+        layout: 'left'
+      }
+    },
+    {
+      type: EComponentType.media,
+      data: {
+        media: [],
+        layout: 'mini',
+      }
+    },
+    {
+      type: EComponentType.text,
+      data: {
+        text: '企业简介 核心优势',
+        placeholder: '点击编辑输入您的文本内容',
+        layout: 'left'
+      }
+    },
+    {
+      type: EComponentType.title,
+      data: {
+        text: '核心团队',
+        placeholder: '默认标题',
+        layout: 'left'
+      }
+    },
+    {
+      type: EComponentType.bluebook,
+      data: {
+        values: [],
+        layout: 'mini',
+      }
+    },
+    {
+      type: EComponentType.shiping,
+      data: {
+        layout: 'left',
+        value: '',
+        text: '视频号',
+        placeholder: '视频号',
+      }
+    },
+    {
+      type: EComponentType.wechatArticle,
+      data: {
+        link: '',
+        layout: 'left',
+        poster: '',
+        linkType: 'weixinOfficialAccountArticle',
+        text: '公众号文章',
+        placeholder: '公众号文章',
+      }
+    },
+  ]

src/config/index.ts

@@ -5,6 +5,7 @@ const APP_NAME = process.env.TARO_APP_NAME ?? 'miniGreenLeaf'
 let appVersion = '1.0.26'
 let envVersion:"develop" | "trial" | "release" = 'develop'
 
+// !!! 小蓝本的请求地址配置不起作用,在 api/index.ts 内配置
 // 小程序 api 地址
 // let baseUrlDev = 'http://192.168.1.113:3000/'
 let baseUrlDev = 'https://dev-api.xiaolvye.cn/'
@@ -28,10 +29,11 @@ if(process.env.TARO_ENV == "weapp"){
 		appVersion = version
 		homeUrl = homeUrlProd
 		console.log('online version:', version)
-	}	
+	}
 }
 
 const BASE_URL = baseUrl
+
 const APP_VERSION =  appVersion
 const APP_ENV_VERSION =  envVersion
 const HOME_URL = homeUrl
@@ -68,7 +70,7 @@ export {
 	DEFAULT_AVATAR_BG,
 	DEFAULT_AVATAR_SHARE_BG,
 }
- 
+
 
 // 合作方域名链接，用于 webview
 export const CORP_DOMAINS = [

src/pages/agent/components/AgentWebsite/index.tsx

@@ -5,12 +5,12 @@ import Taro from "@tarojs/taro";
 import ComponentList from "@/components/component-list";
 import { useComponentStore } from "@/store/componentStore";
 export default function Index() {
-  
+
   const components = useComponentStore((state) => state.components);
 
   return (
     <View className="flex flex-col gap-12">
-      <ComponentList editMode components={components}></ComponentList>
+      <ComponentList editMode isVisitor={false} components={components}></ComponentList>
     </View>
   );
 }

src/pages/component-library/components/createComponentData.ts

@@ -24,7 +24,7 @@ export function createComponentData(type: EComponentType): Record<string, any> |
       placeholder: '默认链接',
     }
   }
-  
+
   if(type === EComponentType.wechatArticle){
     return {
       link: '',
@@ -65,7 +65,7 @@ export function createComponentData(type: EComponentType): Record<string, any> |
     }
   }
   // 微信公众号(文章)
-  // wx.openOfficialAccountProfile 
+  // wx.openOfficialAccountProfile
   if(type === EComponentType.wechat){
     return  {
       value: '',
@@ -114,4 +114,4 @@ export function createComponentData(type: EComponentType): Record<string, any> |
 
 
   return null
-}
+}

src/pages/profile/index.tsx

@@ -270,7 +270,7 @@ export default function Profile() {
           >
             <AgentActionBar isVisitor agent={agentProfile}></AgentActionBar>
             <View className="flex flex-col w-full p-16 gap-12">
-              <ComponentList components={components}></ComponentList>
+              <ComponentList isVisitor components={components}></ComponentList>
             </View>
           </View>
         )}

src/store/agentStore.ts

@@ -1,4 +1,8 @@
 import { create } from "zustand";
+
+import { generateRandomId } from "@/utils/index";
+import { DefaultWebsiteComponents } from '@/config/default-components'
+
 import {
   getAgents,
   getMyAgent as _getMyAgent,
@@ -61,6 +65,21 @@ export interface AgentStoreState {
   };
 }
 
+// 默认website组件 Agent 默认设置一些组件
+function getDefaultWebsiteComponents(){
+  return DefaultWebsiteComponents.map((item, index)=> {
+    return  {
+      ...item,
+      enabled: true,
+      data: {
+        ...item.data,
+        index,
+        id: generateRandomId()
+      }
+    }
+  })
+}
+
 export const useAgentStore = create<AgentStoreState>((set, get) => ({
   agents: [],
   // 存储自己当前的 agent 信息
@@ -224,14 +243,23 @@ export const useAgentStore = create<AgentStoreState>((set, get) => ({
         questionGuides: mixedAgent.questionGuides ?? undefined,
         voiceId: mixedAgent.voiceId ?? undefined,
         voiceName: mixedAgent.voiceName ?? undefined,
+
       };
 
       const response = await createNewAgent(createData);
       const result = isSuccess(response.status);
 
       if (result) {
+        //todo: 由于创建时不支持直接传入组件, 创建成功后,需要先设置默认的一些 website 组件, 后期希望后端支持创建时传入组件,
+        await get().actions.editAgentWebsite(response.data.agentId, getDefaultWebsiteComponents())
         // 创建成功后立即设置为当前默认智能体
-        const newAgent = await get().actions.setDefaultAgent(response.data.agentId);
+        await get().actions.setDefaultAgent(response.data.agentId);
+        //todo: ^_^! 重新由于更新了 website 组件 需要获取最新 agent, 为什么后端每个接口都不直接返回修改后的 agent 数组???
+        const newAgent = await get().actions.fetchAgent(response.data.agentId)
+        if(!newAgent){
+          return null
+        }
+
         if (newAgent) {
           set((state) => ({
             agents: [...state.agents, newAgent as TAgent],