fix

src/models/appPageConifg.tsx

@@ -13,6 +13,7 @@ type State = {
     isWorkDirection: boolean,//当前页面是否存在男频女频
     compAc: string,//当前选中的组件,切换tabs请0
     index: number,//每次操作修改数据都递增，为了检测到数据变动
+    openEdit:boolean,//是否打开了编辑窗口
     activePage: string,//当前选中的页面
     templateName:string,//模板名称
     pageConfigList: {
@@ -29,7 +30,6 @@ type State = {
             }[]
         }[]
     }[],
-    
 }
 type Action = {
     params?: any,

src/pages/MiniApp/AdBack/index.tsx

@@ -31,8 +31,10 @@ function Auth() {
                 }).then(res => {
                     if (res.code === 200) {
                         message.success("授权成功")
-                        history.push("/miniApp/adBack")
                     }
+                   setTimeout(()=>{
+                    history.push("/miniApp/adBack")
+                   },1000)
                 })
             }
         }

src/pages/MiniApp/CompConfig/DrawerBox/compConfig.tsx

@@ -1,6 +1,6 @@
 import { BetaSchemaForm, ProFormInstance } from "@ant-design/pro-components";
 import { useEffect, useMemo, useRef } from "react";
-import { bannersConfig, hotBooksConfig, hotCategoryConfig } from "./compFormConfig";
+import { bannersConfig, bestBooksConfig, bestReviewsConfig, classicBooksConfig, hotBooksConfig, hotCategoryConfig, hotRecConfig, newBooksConfig } from "./compFormConfig";
 import { useModel } from "@umijs/max";
 import { Button, Popconfirm } from "antd";
 import { useAjax } from "@/Hook/useAjax";
@@ -9,7 +9,7 @@ import { Config } from "@/models/appPageConifg";
 
 type Props = {
     pageList?: any[]
-    compName: "banners" | "hot_books" | "hot_category",
+    compName: "banners" | "hot_books" | "hot_category" | "new_books" | "hot_rec" | "best_reviews" |"classic_books" | "classic_books" | "best_books",
 }
 export function CompConfig(props: Props) {
     let { pageList = [], compName } = props
@@ -31,9 +31,19 @@ export function CompConfig(props: Props) {
             case "hot_books":
                 return hotBooksConfig();
             case "hot_category":
-                return hotCategoryConfig(QueryCategoryList?.data?.data,formRef);
+                return hotCategoryConfig(QueryCategoryList?.data?.data, formRef);
+            case "new_books":
+                return newBooksConfig()
+            case "hot_rec":
+                return hotRecConfig()
+            case "best_reviews":
+                return bestReviewsConfig()
+            case "classic_books":
+                return classicBooksConfig()
+            case "best_books":
+                return bestBooksConfig()
         }
-    }, [compName, pageList, QueryCategoryList?.data?.data,formRef])
+    }, [compName, pageList, QueryCategoryList?.data?.data, formRef])
 
     // 获取当前页面配置表
     const list = useMemo(() => {
@@ -54,27 +64,27 @@ export function CompConfig(props: Props) {
         }
         return list
     }, [state])
- 
+
     // 提交表单
     const submit = async (values: any) => {
     }
     // 初始化内容
     useEffect(() => {
         let thatConfig = list.find(item => item.componentType === compName)
-        console.log("初始化内容",thatConfig)
+        console.log("初始化内容", thatConfig)
         formRef.current?.setFieldsValue(thatConfig)
     }, [list])
     // 值变化
     const handelValues = (values: any, isDel?: boolean) => {
         // 处理分类 书籍 需要的完整数据
-        if(values){
+        if (values) {
             for (let config of values?.configs) {
                 if (config?.bookId && typeof config.bookId !== "number") {
                     config.bookInfo = config.bookId
                     config.bookId = config.bookInfo.id
                 }
                 if (config?.categoryId) {
-                    config.categoryInfo = QueryCategoryList?.data?.data?.find((item: { id: any; })=>item.id == config.categoryId) 
+                    config.categoryInfo = QueryCategoryList?.data?.data?.find((item: { id: any; }) => item.id == config.categoryId)
                     config.categoryId = config.categoryInfo.id
                 }
                 if (config?.bookIds) {
@@ -90,7 +100,7 @@ export function CompConfig(props: Props) {
         // 修改组件的内容
         if (thatConfig) {
             thatConfig.configs = values ? values.configs : []
-            if(values?.componentName){
+            if (values?.componentName) {
                 thatConfig.componentName = values?.componentName
                 thatConfig.showRightButton = values?.showRightButton
             }

src/pages/MiniApp/CompConfig/DrawerBox/compFormConfig.tsx

@@ -5,7 +5,7 @@ import styles from './index.less'
 import { Select, Tooltip } from "antd";
 import BookSelect from "@/components/bookSelect";
 import BookSelectDrawer from "@/components/bookSelect/drawer";
-
+// banners
 export function bannersConfig(pageList: any[]): ProFormColumnsType<any>[] {
     return [
         {
@@ -36,6 +36,7 @@ export function bannersConfig(pageList: any[]): ProFormColumnsType<any>[] {
                             title: 'banner类型',
                             dataIndex: 'bannerType',
                             valueType: 'radio',
+                            initialValue:1,
                             convertValue: (value) => {
                                 return value?.toString()
                             },
@@ -147,7 +148,7 @@ export function bannersConfig(pageList: any[]): ProFormColumnsType<any>[] {
 
     ]
 }
-
+// 今日热书
 export function hotBooksConfig(): ProFormColumnsType<any>[] {
     return [
         {
@@ -235,6 +236,7 @@ export function hotBooksConfig(): ProFormColumnsType<any>[] {
 
     ]
 }
+// 热门分类
 export function hotCategoryConfig(tags: any[], formRef: React.MutableRefObject<ProFormInstance | undefined>): ProFormColumnsType<any>[] {
     return [
         {
@@ -334,5 +336,445 @@ export function hotCategoryConfig(tags: any[], formRef: React.MutableRefObject<P
             ]
         },
 
+    ]
+}
+// 热门推荐
+export function hotRecConfig(): ProFormColumnsType<any>[] {
+    return [
+        {
+            title: '标题名称',
+            dataIndex: 'componentName',
+            colProps: {
+                span: 12
+            },
+            fieldProps: {
+                allowClear: true,
+                placeholder: '请输入名称'
+            },
+            formItemProps: {
+                style: { marginBottom: 10 },
+            }
+        },
+        {
+            title: '显示右侧按钮',
+            dataIndex: 'showRightButton',
+            valueType: "radio",
+            valueEnum: new Map([{ value: true, text: "是" }, { value: false, text: "否" }].map(item => [item.value, item.text])),
+            formItemProps: {
+                style: { marginBottom: 10 },
+            },
+            colProps: {
+                span: 12
+            },
+        },
+        {
+            valueType: 'divider',
+        },
+        {
+            valueType: 'formList',
+            dataIndex: "configs",
+            colProps: {
+                span: 24
+            },
+            fieldProps: {
+                max: 3,
+                min: 3,
+                creatorButtonProps: {
+                    creatorButtonText: "添加一本书",
+                },
+                alwaysShowItemLabel: true,//全部展示title
+                actionRender: (field: any, action: any, defaultActionDom: any, count: any) => {//自定义按钮
+                    return [...defaultActionDom,
+                    field.name < count - 1 && <Tooltip title="向下移动" key={`move-down-${field.name}`}><ArrowDownOutlined className={styles.upDownBtn} onClick={() => { action.move(field.name + 1, field.name) }} /></Tooltip>,
+                    field.name > 0 && <Tooltip title="向上移动" key={`move-up-${field.name}`}><ArrowUpOutlined className={styles.upDownBtn} onClick={() => { action.move(field.name - 1, field.name) }} /></Tooltip>]
+                }
+            },
+            columns: [
+                {
+                    valueType: 'group',
+                    colProps: {
+                        span: 24
+                    },
+                    columns: [
+                        {
+                            dataIndex: "bookId",
+                            title: '小说',
+                            colProps: {
+                                span: 24
+                            },
+                            formItemProps: {
+                                style: { marginBottom: 10 },
+                                rules: [
+                                    {
+                                        required: true,
+                                        message: '此项为必填项',
+                                    },
+                                ],
+                            },
+                            renderFormItem(schema, config, form, action) {
+                                // return <BookSelect />
+                                return <BookSelectDrawer />
+                            },
+                        },
+                        {
+                            valueType: 'divider',
+                        }
+                    ]
+                }
+            ]
+        },
+
+    ]
+}
+// 重磅新书
+export function newBooksConfig(): ProFormColumnsType<any>[] {
+    return [
+        {
+            title: '标题名称',
+            dataIndex: 'componentName',
+            colProps: {
+                span: 12
+            },
+            fieldProps: {
+                allowClear: true,
+                placeholder: '请输入名称'
+            },
+            formItemProps: {
+                style: { marginBottom: 10 },
+            }
+        },
+        {
+            title: '显示右侧按钮',
+            dataIndex: 'showRightButton',
+            valueType: "radio",
+            valueEnum: new Map([{ value: true, text: "是" }, { value: false, text: "否" }].map(item => [item.value, item.text])),
+            formItemProps: {
+                style: { marginBottom: 10 },
+            },
+            colProps: {
+                span: 12
+            },
+        },
+        {
+            valueType: 'divider',
+        },
+        {
+            valueType: 'formList',
+            dataIndex: "configs",
+            colProps: {
+                span: 24
+            },
+            fieldProps: {
+                max: 3,
+                min: 3,
+                creatorButtonProps: {
+                    creatorButtonText: "添加一本书",
+                },
+                alwaysShowItemLabel: true,//全部展示title
+                actionRender: (field: any, action: any, defaultActionDom: any, count: any) => {//自定义按钮
+                    return [...defaultActionDom,
+                    field.name < count - 1 && <Tooltip title="向下移动" key={`move-down-${field.name}`}><ArrowDownOutlined className={styles.upDownBtn} onClick={() => { action.move(field.name + 1, field.name) }} /></Tooltip>,
+                    field.name > 0 && <Tooltip title="向上移动" key={`move-up-${field.name}`}><ArrowUpOutlined className={styles.upDownBtn} onClick={() => { action.move(field.name - 1, field.name) }} /></Tooltip>]
+                }
+            },
+            columns: [
+                {
+                    valueType: 'group',
+                    colProps: {
+                        span: 24
+                    },
+                    columns: [
+                        {
+                            dataIndex: "bookId",
+                            title: '小说',
+                            colProps: {
+                                span: 24
+                            },
+                            formItemProps: {
+                                style: { marginBottom: 10 },
+                                rules: [
+                                    {
+                                        required: true,
+                                        message: '此项为必填项',
+                                    },
+                                ],
+                            },
+                            renderFormItem(schema, config, form, action) {
+                                // return <BookSelect />
+                                return <BookSelectDrawer />
+                            },
+                        },
+                        {
+                            valueType: 'divider',
+                        }
+                    ]
+                }
+            ]
+        },
+
+    ]
+}
+// 口碑佳作
+export function bestReviewsConfig(): ProFormColumnsType<any>[] {
+    return [
+        {
+            title: '标题名称',
+            dataIndex: 'componentName',
+            colProps: {
+                span: 12
+            },
+            fieldProps: {
+                allowClear: true,
+                placeholder: '请输入名称'
+            },
+            formItemProps: {
+                style: { marginBottom: 10 },
+            }
+        },
+        {
+            title: '显示右侧按钮',
+            dataIndex: 'showRightButton',
+            valueType: "radio",
+            valueEnum: new Map([{ value: true, text: "是" }, { value: false, text: "否" }].map(item => [item.value, item.text])),
+            formItemProps: {
+                style: { marginBottom: 10 },
+            },
+            colProps: {
+                span: 12
+            },
+        },
+        {
+            valueType: 'divider',
+        },
+        {
+            valueType: 'formList',
+            dataIndex: "configs",
+            colProps: {
+                span: 24
+            },
+            fieldProps: {
+                max: 4,
+                min: 4,
+                creatorButtonProps: {
+                    creatorButtonText: "添加一本书",
+                },
+                alwaysShowItemLabel: true,//全部展示title
+                actionRender: (field: any, action: any, defaultActionDom: any, count: any) => {//自定义按钮
+                    return [...defaultActionDom,
+                    field.name < count - 1 && <Tooltip title="向下移动" key={`move-down-${field.name}`}><ArrowDownOutlined className={styles.upDownBtn} onClick={() => { action.move(field.name + 1, field.name) }} /></Tooltip>,
+                    field.name > 0 && <Tooltip title="向上移动" key={`move-up-${field.name}`}><ArrowUpOutlined className={styles.upDownBtn} onClick={() => { action.move(field.name - 1, field.name) }} /></Tooltip>]
+                }
+            },
+            columns: [
+                {
+                    valueType: 'group',
+                    colProps: {
+                        span: 24
+                    },
+                    columns: [
+                        {
+                            dataIndex: "bookId",
+                            title: '小说',
+                            colProps: {
+                                span: 24
+                            },
+                            formItemProps: {
+                                style: { marginBottom: 10 },
+                                rules: [
+                                    {
+                                        required: true,
+                                        message: '此项为必填项',
+                                    },
+                                ],
+                            },
+                            renderFormItem(schema, config, form, action) {
+                                // return <BookSelect />
+                                return <BookSelectDrawer />
+                            },
+                        },
+                        {
+                            valueType: 'divider',
+                        }
+                    ]
+                }
+            ]
+        },
+
+    ]
+}
+// 经典热书
+export function classicBooksConfig(): ProFormColumnsType<any>[] {
+    return [
+        {
+            title: '标题名称',
+            dataIndex: 'componentName',
+            colProps: {
+                span: 12
+            },
+            fieldProps: {
+                allowClear: true,
+                placeholder: '请输入名称'
+            },
+            formItemProps: {
+                style: { marginBottom: 10 },
+            }
+        },
+        {
+            title: '显示右侧按钮',
+            dataIndex: 'showRightButton',
+            valueType: "radio",
+            valueEnum: new Map([{ value: true, text: "是" }, { value: false, text: "否" }].map(item => [item.value, item.text])),
+            formItemProps: {
+                style: { marginBottom: 10 },
+            },
+            colProps: {
+                span: 12
+            },
+        },
+        {
+            valueType: 'divider',
+        },
+        {
+            valueType: 'formList',
+            dataIndex: "configs",
+            colProps: {
+                span: 24
+            },
+            fieldProps: {
+                max: 8,
+                min: 8,
+                creatorButtonProps: {
+                    creatorButtonText: "添加一本书",
+                },
+                alwaysShowItemLabel: true,//全部展示title
+                actionRender: (field: any, action: any, defaultActionDom: any, count: any) => {//自定义按钮
+                    return [...defaultActionDom,
+                    field.name < count - 1 && <Tooltip title="向下移动" key={`move-down-${field.name}`}><ArrowDownOutlined className={styles.upDownBtn} onClick={() => { action.move(field.name + 1, field.name) }} /></Tooltip>,
+                    field.name > 0 && <Tooltip title="向上移动" key={`move-up-${field.name}`}><ArrowUpOutlined className={styles.upDownBtn} onClick={() => { action.move(field.name - 1, field.name) }} /></Tooltip>]
+                }
+            },
+            columns: [
+                {
+                    valueType: 'group',
+                    colProps: {
+                        span: 24
+                    },
+                    columns: [
+                        {
+                            dataIndex: "bookId",
+                            title: '小说',
+                            colProps: {
+                                span: 24
+                            },
+                            formItemProps: {
+                                style: { marginBottom: 10 },
+                                rules: [
+                                    {
+                                        required: true,
+                                        message: '此项为必填项',
+                                    },
+                                ],
+                            },
+                            renderFormItem(schema, config, form, action) {
+                                // return <BookSelect />
+                                return <BookSelectDrawer />
+                            },
+                        },
+                        {
+                            valueType: 'divider',
+                        }
+                    ]
+                }
+            ]
+        },
+
+    ]
+}
+// 必看好书
+export function bestBooksConfig(): ProFormColumnsType<any>[] {
+    return [
+        {
+            title: '标题名称',
+            dataIndex: 'componentName',
+            colProps: {
+                span: 12
+            },
+            fieldProps: {
+                allowClear: true,
+                placeholder: '请输入名称'
+            },
+            formItemProps: {
+                style: { marginBottom: 10 },
+            }
+        },
+        {
+            title: '显示右侧按钮',
+            dataIndex: 'showRightButton',
+            valueType: "radio",
+            valueEnum: new Map([{ value: true, text: "是" }, { value: false, text: "否" }].map(item => [item.value, item.text])),
+            formItemProps: {
+                style: { marginBottom: 10 },
+            },
+            colProps: {
+                span: 12
+            },
+        },
+        {
+            valueType: 'divider',
+        },
+        {
+            valueType: 'formList',
+            dataIndex: "configs",
+            colProps: {
+                span: 24
+            },
+            fieldProps: {
+                max: 3,
+                min: 3,
+                creatorButtonProps: {
+                    creatorButtonText: "添加一本书",
+                },
+                alwaysShowItemLabel: true,//全部展示title
+                actionRender: (field: any, action: any, defaultActionDom: any, count: any) => {//自定义按钮
+                    return [...defaultActionDom,
+                    field.name < count - 1 && <Tooltip title="向下移动" key={`move-down-${field.name}`}><ArrowDownOutlined className={styles.upDownBtn} onClick={() => { action.move(field.name + 1, field.name) }} /></Tooltip>,
+                    field.name > 0 && <Tooltip title="向上移动" key={`move-up-${field.name}`}><ArrowUpOutlined className={styles.upDownBtn} onClick={() => { action.move(field.name - 1, field.name) }} /></Tooltip>]
+                }
+            },
+            columns: [
+                {
+                    valueType: 'group',
+                    colProps: {
+                        span: 24
+                    },
+                    columns: [
+                        {
+                            dataIndex: "bookId",
+                            title: '小说',
+                            colProps: {
+                                span: 24
+                            },
+                            formItemProps: {
+                                style: { marginBottom: 10 },
+                                rules: [
+                                    {
+                                        required: true,
+                                        message: '此项为必填项',
+                                    },
+                                ],
+                            },
+                            renderFormItem(schema, config, form, action) {
+                                // return <BookSelect />
+                                return <BookSelectDrawer />
+                            },
+                        },
+                        {
+                            valueType: 'divider',
+                        }
+                    ]
+                }
+            ]
+        },
+
     ]
 }

src/pages/MiniApp/CompConfig/DrawerBox/content.tsx

@@ -7,6 +7,12 @@ import { useModel } from "@umijs/max";
 import { HotBooks } from "../components/hot_books";
 import { HotCategory } from "../components/hot_category";
 import { Config } from "@/models/appPageConifg";
+import { NewBooks } from "../components/new_books";
+import { HotRec } from "../components/hot_rec";
+import { BestReviews } from "../components/best_reviews";
+import { ClassicBooks } from "../components/classic_books";
+import { BestBooks } from "../components/best_books";
+import { GuessLike } from "../components/guess_like";
 
 // 使用 forwardRef 以支持传递 ref
 const DragItem = () => {
@@ -58,6 +64,36 @@ const DragItem = () => {
                     newConfig.componentName = "热门分类"
                     newConfig.showRightButton = true
                     break;
+                case "new_books":
+                    newConfig.configs = [{}, {}, {}]
+                    newConfig.componentName = "重磅新书"
+                    newConfig.showRightButton = true
+                    break;
+                case "hot_rec":
+                    newConfig.configs = [{}, {}, {}]
+                    newConfig.componentName = "热门推荐"
+                    newConfig.showRightButton = true
+                    break;
+                case "best_reviews":
+                    newConfig.configs = [{}, {}, {}, {}]
+                    newConfig.componentName = "口碑佳作"
+                    newConfig.showRightButton = true
+                    break;
+                case "classic_books":
+                    newConfig.configs = [{}, {}, {}, {}, {}, {}, {}, {}]
+                    newConfig.componentName = "经典热书"
+                    newConfig.showRightButton = true
+                    break;
+                case "best_books":
+                    newConfig.configs = [{}, {}, {}]
+                    newConfig.componentName = "必看好书"
+                    newConfig.showRightButton = true
+                    break;
+                case "guess_like":
+                    newConfig.configs = []
+                    newConfig.componentName = "猜你喜欢"
+                    newConfig.showRightButton = true
+                    break;
             }
             let { tabs, pageConfigList, activePage, isWorkDirection } = state
             let pageConfig = pageConfigList.find(page => page.pageUrl === activePage)
@@ -86,7 +122,19 @@ const DragItem = () => {
             if (isWorkDirection && pageConfig?.workDirectionList) {
                 for (let page of pageConfig?.workDirectionList) {
                     if (page.workDirection == tabs) {
-                        page.componentConfigList = [...page.componentConfigList, newConfig]
+                        let arr = [...page.componentConfigList, newConfig]
+                        function moveToPosition(arr: any[], target: any, position: "first" | "last") {
+                            return arr.sort((a, b) => {
+                                if (a.componentType === target) return position === 'first' ? -1 : 1;  // 根据位置决定是放第一个还是最后一个
+                                if (b.componentType === target) return position === 'first' ? 1 : -1;  // 同上
+                                return 0;  // 保持其他元素的相对顺序不变
+                            });
+                        }
+                        //将强制banners放顶部
+                        arr = moveToPosition(arr, "banners", 'first')
+                        //将强制guess_like放底部
+                        arr = moveToPosition(arr, "guess_like", 'last')
+                        page.componentConfigList = arr
                     }
                 }
             } else if (pageConfig?.workDirectionList) {// 不存在男女频页面
@@ -116,6 +164,18 @@ const DragItem = () => {
                         {item.componentType === "hot_books" && <HotBooks data={item} />}
                         {/* 热门分类 */}
                         {item.componentType === "hot_category" && <HotCategory data={item} />}
+                        {/* 重磅新书 */}
+                        {item.componentType === "new_books" && <NewBooks data={item} />}
+                        {/* 热门推荐 */}
+                        {item.componentType === "hot_rec" && <HotRec data={item} />}
+                        {/* 口碑佳作 */}
+                        {item.componentType === "best_reviews" && <BestReviews data={item} />}
+                        {/* 经典热书 */}
+                        {item.componentType === "classic_books" && <ClassicBooks data={item} />}
+                        {/* 必看好书 */}
+                        {item.componentType === "best_books" && <BestBooks data={item} />}
+                        {/* 猜你喜欢 */}
+                        {item.componentType === "guess_like" && <GuessLike data={item} />}
                     </div>
                     <div className={styles.compBoxM} />
                 </React.Fragment>

src/pages/MiniApp/CompConfig/DrawerBox/index.tsx

@@ -26,7 +26,6 @@ const ModalForm = forwardRef((props: Props, ref) => {
     const [templateName, setTemplateName] = useState("")
     const AppComponentConfigGetAppPageList = useAjax((params) => appComponentConfigGetAppPageList(params))
     const AppComponentConfigAddOrUpdate = useAjax((params) => appComponentConfigAddOrUpdate(params))//添加
-    // console.log("props", props)
     // 接口公共参数
     let publicData = useMemo(() => {
         return {
@@ -55,8 +54,10 @@ const ModalForm = forwardRef((props: Props, ref) => {
                 isWorkDirection: false,
                 compAc: "",
                 index: 0,
+                openEdit:false,
                 activePage: "",
-                pageConfigList: []
+                pageConfigList: [],
+                templateName:""
             }
         })
         setTemplateName("")
@@ -101,6 +102,7 @@ const ModalForm = forwardRef((props: Props, ref) => {
                 <Button type='primary' onClick={save}>保存配置</Button>
             </Space>}
             maskClosable={false}
+            destroyOnClose
         >
             <Row wrap style={{ height: `calc(100vh - ${(headerSize?.height || 0) + 50}px)` }}>
                 {/* 左侧页面列表 pageList*/}

src/pages/MiniApp/CompConfig/DrawerBox/pageList.tsx

@@ -93,7 +93,7 @@ const PageList = forwardRef((props: Props, ref) => {
                         <Typography.Title level={4} >内容组件</Typography.Title>
                         <Space wrap>
                             {
-                                item?.appComponentList?.filter((i: Item) => i.componentName !== 'banners')?.map((comp: Item) => {
+                                item?.appComponentList?.filter((i: Item) => i.componentName !== 'banners' && i.componentName !== 'guess_like')?.map((comp: Item) => {
                                     let newComp = { ...comp, pagePath: item.pagePath }
                                     let appType = initialState?.selectApp?.appType || 0
                                     let pageConfig = state.pageConfigList?.find((page: { pageUrl: any; }) => page.pageUrl === item.pagePath)
@@ -107,6 +107,22 @@ const PageList = forwardRef((props: Props, ref) => {
                             }
                         </Space>
                     </Col>
+                    <Col span={24} style={{ order: 0 }}>
+                        <Typography.Title level={4} >底部组件</Typography.Title>
+                        {
+                            item?.appComponentList?.filter((i: Item) => i.componentName === 'guess_like')?.map((comp: Item) => {
+                                let newComp = { ...comp, pagePath: item.pagePath }
+                                let appType = initialState?.selectApp?.appType || 0
+                                let pageConfig = state.pageConfigList?.find(page => page.pageUrl === item.pagePath)
+                                let thePage = pageConfig?.workDirectionList?.find(page => page.workDirection == state.tabs)
+                                let list = thePage?.componentConfigList || []
+                                newComp.disabled = !!list.find(i => i.appComponentId == newComp.id)
+                                if (newComp.enabledAppTypes.includes(appType)) {
+                                    return <Comp item={newComp} key={item.id} />
+                                }
+                            })
+                        }
+                    </Col>
                 </Row> : <>无组件</>,
             }
         })} />

src/pages/MiniApp/CompConfig/DrawerBox/set.tsx

@@ -21,6 +21,11 @@ const SetData = forwardRef((props: Props, ref) => {
             {state.compAc === 'banners' && <div> <CompConfig compName="banners" pageList={pageList} /></div>}
             {state.compAc === 'hot_books' && <div> <CompConfig compName="hot_books" /></div>}
             {state.compAc === 'hot_category' && <div> <CompConfig compName="hot_category" /></div>}
+            {state.compAc === 'new_books' && <div> <CompConfig compName="new_books" /></div>}
+            {state.compAc === 'hot_rec' && <div> <CompConfig compName="hot_rec" /></div>}
+            {state.compAc === 'best_reviews' && <div> <CompConfig compName="best_reviews" /></div>}
+            {state.compAc === 'classic_books' && <div> <CompConfig compName="classic_books" /></div>}
+            {state.compAc === 'best_books' && <div> <CompConfig compName="best_books" /></div>}
             {!state.compAc && <div>选中组件可设置内容</div>}
         </div>
     </>

src/pages/MiniApp/CompConfig/components/banners.tsx

@@ -1,14 +1,12 @@
-import { BetaSchemaForm, useToken } from "@ant-design/pro-components";
 import { Carousel, Empty } from "antd";
 import styles from './index.less'
 export function Banners(props: { data: any[] }) {
-    const { token } = useToken()
     let { data } = props
     return <Carousel autoplay autoplaySpeed={5000} className={styles.banners}>
         {
             data?.length === 0 ? <div style={{ borderRadius: "10px" }}>
                 <div className={styles.banners_box} style={{ display: "flex", alignItems: 'center', justifyContent: 'center' }}>
-                    <div style={{ justifyContent: 'center', display: 'flex', width: '100%' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据请选中后设置" /></div>
+                    <div style={{ justifyContent: 'center', display: 'flex', width: '100%' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据请选中后设置(需自行设置)" /></div>
                 </div>
             </div> : data?.map((item: any, index: number) => {
                 return <div key={index} style={{ borderRadius: "10px" }}>

src/pages/MiniApp/CompConfig/components/best_books.tsx

@@ -0,0 +1,50 @@
+import styles from './index.less'
+import Header from "./header";
+import { Empty, Space, Tag } from "antd";
+import { ReactElement, JSXElementConstructor, ReactNode, ReactPortal, Key } from "react";
+import { MyIcon } from "@/global";
+import { RedoOutlined } from '@ant-design/icons';
+// 必看好书
+export function BestBooks(props: {
+    data: {
+        appComponentId: number | string;
+        componentType: string;
+        showRightButton?: boolean;
+        componentName?: string;
+        remark?: string;
+        configs?: any[];
+    }
+}) {
+    const { data: { configs, componentName, showRightButton } } = props
+    return <div className={`${styles.hot_rec}`}>
+        <Header title={componentName || "必看好书"} showBtn={showRightButton} element={<Space>换一换<RedoOutlined style={{color:'#f25d5d'}}/></Space>} />
+        {configs?.[0]?.bookInfo ? <>
+            <div className={styles.list}>
+                {
+                    configs?.map((item: { bookInfo: any }, index: Key | null | undefined) => {
+                        return <div className={styles.top} key={index}>
+                            <span>
+                                {item?.bookInfo?.vipFree && <MyIcon type="icon-vipmianfei" style={{ fontSize: 35, position: 'absolute', zIndex: 1 }} />}
+                                <img src={item?.bookInfo?.picUrl} onError={(e: any) => {
+                                    e.target.src = localStorage.getItem("nocover")
+                                }} />
+                            </span>
+                            <div>
+                                <strong>{item?.bookInfo?.bookName || "书名"}</strong>
+                                <span>{item?.bookInfo?.bookDesc || "描述"}</span>
+                                <div>
+                                    <span>{item?.bookInfo?.authorInfo?.authorName || item?.bookInfo?.authorName}·{item?.bookInfo?.wordCount}万字·{item?.bookInfo?.bookStatus == 0 ? "连载中" : "完结"}</span>
+                                    <Tag >{item?.bookInfo?.labelInfoList?.[0]?.name}</Tag>
+                                </div>
+                            </div>
+                        </div>
+                    })
+                }
+            </div>
+        </> : <div className={styles.banners_box} style={{ display: "flex", alignItems: 'center', justifyContent: 'center', minHeight: 'calc(100vw / 10)', }}>
+            <div style={{ justifyContent: 'center', display: 'flex', width: '100%' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据请选中后设置,不配置将使用系统默认配置" /></div>
+        </div>
+        }
+    </div>
+}
+

src/pages/MiniApp/CompConfig/components/best_reviews.tsx

@@ -0,0 +1,42 @@
+import styles from './index.less'
+import Header from "./header";
+import { Empty, Tag } from "antd";
+import { ReactElement, JSXElementConstructor, ReactNode, ReactPortal, Key } from "react";
+import { MyIcon } from "@/global";
+// 口碑佳作
+export function BestReviews(props: {
+    data: {
+        appComponentId: number | string;
+        componentType: string;
+        showRightButton?: boolean;
+        componentName?: string;
+        remark?: string;
+        configs?: any[];
+    }
+}) {
+    const { data: { configs, componentName, showRightButton } } = props
+    return <div className={`${styles.hot_books}`}>
+        <Header title={componentName || "口碑佳作"} showBtn={showRightButton} />
+        {configs?.[0]?.bookInfo ? <>
+            <div className={styles.list}>
+                {
+                    configs?.map((item: { bookInfo: { vipFree: any, picUrl: string | undefined; bookName: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined; }; }, index: Key | null | undefined) => {
+                        return <div key={index} className={styles.box}>
+                            <div>
+                                {item?.bookInfo?.vipFree && <MyIcon type="icon-vipmianfei" style={{ fontSize: 35, position: 'absolute', zIndex: 1 }} />}
+                                <img src={item?.bookInfo?.picUrl} onError={(e: any) => {
+                                    e.target.src = localStorage.getItem("nocover")
+                                }} />
+                            </div>
+                            <span>{item?.bookInfo?.bookName}</span>
+                        </div>
+                    })
+                }
+            </div>
+        </> : <div className={styles.banners_box} style={{ display: "flex", alignItems: 'center', justifyContent: 'center', minHeight: 'calc(100vw / 10)', }}>
+            <div style={{ justifyContent: 'center', display: 'flex', width: '100%' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据请选中后设置,不配置将使用系统默认配置" /></div>
+        </div>
+        }
+    </div>
+}
+

src/pages/MiniApp/CompConfig/components/classic_books.tsx

@@ -0,0 +1,42 @@
+import styles from './index.less'
+import Header from "./header";
+import { Empty, Tag } from "antd";
+import { ReactElement, JSXElementConstructor, ReactNode, ReactPortal, Key } from "react";
+import { MyIcon } from "@/global";
+// 口碑佳作
+export function ClassicBooks(props: {
+    data: {
+        appComponentId: number | string;
+        componentType: string;
+        showRightButton?: boolean;
+        componentName?: string;
+        remark?: string;
+        configs?: any[];
+    }
+}) {
+    const { data: { configs, componentName, showRightButton } } = props
+    return <div className={`${styles.classic_books}`}>
+        <Header title={componentName || "经典热书"} showBtn={showRightButton} />
+        {configs?.[0]?.bookInfo ? <>
+            <div className={styles.list}>
+                {
+                    configs?.map((item: { bookInfo: { vipFree: any, picUrl: string | undefined; bookName: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined; }; }, index: Key | null | undefined) => {
+                        return <div key={index} className={styles.box}>
+                            <div>
+                                {item?.bookInfo?.vipFree && <MyIcon type="icon-vipmianfei" style={{ fontSize: 35, position: 'absolute', zIndex: 1 }} />}
+                                <img src={item?.bookInfo?.picUrl} onError={(e: any) => {
+                                    e.target.src = localStorage.getItem("nocover")
+                                }} />
+                            </div>
+                            <span>{item?.bookInfo?.bookName}</span>
+                        </div>
+                    })
+                }
+            </div>
+        </> : <div className={styles.banners_box} style={{ display: "flex", alignItems: 'center', justifyContent: 'center', minHeight: 'calc(100vw / 10)', }}>
+            <div style={{ justifyContent: 'center', display: 'flex', width: '100%' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据请选中后设置,不配置将使用系统默认配置" /></div>
+        </div>
+        }
+    </div>
+}
+

src/pages/MiniApp/CompConfig/components/guess_like.tsx

@@ -0,0 +1,49 @@
+import styles from './index.less'
+import Header from "./header";
+import { Empty, Tag } from "antd";
+import { ReactElement, JSXElementConstructor, ReactNode, ReactPortal, Key } from "react";
+import { MyIcon } from "@/global";
+// 猜你喜欢
+export function GuessLike(props: {
+    data: {
+        appComponentId: number | string;
+        componentType: string;
+        showRightButton?: boolean;
+        componentName?: string;
+        remark?: string;
+        configs?: any[];
+    }
+}) {
+    const { data: { configs, componentName, showRightButton } } = props
+    return <div className={`${styles.hot_rec}`}>
+        <Header title={componentName || "猜你喜欢"} showBtn={false} />
+        {configs?.[0]?.bookInfo ? <>
+            <div className={styles.list}>
+                {
+                    configs?.map((item: { bookInfo: any }, index: Key | null | undefined) => {
+                        return <div className={styles.top} key={index}>
+                            <span>
+                                {item?.bookInfo?.vipFree && <MyIcon type="icon-vipmianfei" style={{ fontSize: 35, position: 'absolute', zIndex: 1 }} />}
+                                <img src={item?.bookInfo?.picUrl} onError={(e: any) => {
+                                    e.target.src = localStorage.getItem("nocover")
+                                }} />
+                            </span>
+                            <div>
+                                <strong>{item?.bookInfo?.bookName || "书名"}</strong>
+                                <span>{item?.bookInfo?.bookDesc || "描述"}</span>
+                                <div>
+                                    <span>{item?.bookInfo?.authorInfo?.authorName || item?.bookInfo?.authorName}·{item?.bookInfo?.wordCount}万字·{item?.bookInfo?.bookStatus == 0 ? "连载中" : "完结"}</span>
+                                    <Tag >{item?.bookInfo?.labelInfoList?.[0]?.name}</Tag>
+                                </div>
+                            </div>
+                        </div>
+                    })
+                }
+            </div>
+        </> : <div className={styles.banners_box} style={{ display: "flex", alignItems: 'center', justifyContent: 'center', minHeight: 'calc(100vw / 10)', }}>
+            <div style={{ justifyContent: 'center', display: 'flex', width: '100%' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="此组件无自定义配置,由系统自动生成内容" /></div>
+        </div>
+        }
+    </div>
+}
+

src/pages/MiniApp/CompConfig/components/header.tsx

@@ -1,8 +1,8 @@
 import styles from './index.less'
-function Header(props?: { title: string, btnText?: string, showBtn?: boolean }) {
+function Header(props?: { title: string, btnText?: any, element?: any, showBtn?: boolean }) {
     return <div className={styles.header}>
         <strong>{props?.title}</strong>
-        {props?.showBtn && <span>{props?.btnText || "更多"}</span>}
+        {props?.showBtn ? props?.element ? <div>{props?.element}</div> : <span>{props?.btnText || "更多"}</span> : null}
     </div>
 }
 

src/pages/MiniApp/CompConfig/components/hot_books.tsx

@@ -1,10 +1,7 @@
-import { useToken } from "@ant-design/pro-components";
 import styles from './index.less'
 import Header from "./header";
 import { Empty, Tag } from "antd";
-import { useModel } from "@umijs/max";
 import { ReactElement, JSXElementConstructor, ReactNode, ReactPortal, Key } from "react";
-import { Config } from "@/models/appPageConifg";
 import { MyIcon } from "@/global";
 // 热门书
 export function HotBooks(props: {
@@ -17,8 +14,6 @@ export function HotBooks(props: {
         configs?: any[];
     }
 }) {
-    const { token } = useToken()
-    let { initialState } = useModel("@@initialState")
     const { data: { configs, componentName, showRightButton } } = props
     return <div className={`${styles.hot_books}`}>
         <Header title={componentName || "今日热书"} showBtn={showRightButton} />
@@ -34,7 +29,7 @@ export function HotBooks(props: {
                     <strong>{configs?.[0]?.bookInfo?.bookName || "书名"}</strong>
                     <span>{configs?.[0]?.bookInfo?.bookDesc || "描述"}</span>
                     <div>
-                        <span>{configs?.[0]?.bookInfo?.authorInfo?.authorName}·{configs?.[0]?.bookInfo?.wordCount}万字·{configs?.[0]?.bookInfo?.bookStatus == 0 ? "连载中" : "完结"}</span>
+                        <span>{configs?.[0]?.bookInfo?.authorInfo?.authorName || configs?.[0]?.bookInfo?.authorName }·{configs?.[0]?.bookInfo?.wordCount}万字·{configs?.[0]?.bookInfo?.bookStatus == 0 ? "连载中" : "完结"}</span>
                         <Tag >{configs?.[0]?.bookInfo?.labelInfoList?.[0]?.name}</Tag>
                     </div>
                 </div>
@@ -55,7 +50,7 @@ export function HotBooks(props: {
                 }
             </div>
         </> : <div className={styles.banners_box} style={{ display: "flex", alignItems: 'center', justifyContent: 'center', minHeight: 'calc(100vw / 10)', }}>
-            <div style={{ justifyContent: 'center', display: 'flex', width: '100%' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据请选中后设置" /></div>
+            <div style={{ justifyContent: 'center', display: 'flex', width: '100%' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据请选中后设置,不配置将使用系统默认配置" /></div>
         </div>
         }
     </div>

src/pages/MiniApp/CompConfig/components/hot_category.tsx

@@ -1,15 +1,13 @@
-import { BetaSchemaForm, useToken } from "@ant-design/pro-components";
 import styles from './index.less'
 import Header from "./header";
 import { useModel } from "@umijs/max";
-import { Key, useEffect, useMemo, useState } from "react";
-import { Config } from "@/models/appPageConifg";
+import { useEffect, useMemo, useState } from "react";
 import { useAjax } from "@/Hook/useAjax";
 import useApi from "@/Hook/useApi";
 import { Empty, Spin } from "antd";
 import usePrevious from "@/Hook/usePrevious";
 import { MyIcon } from "@/global";
-// 热门书
+// 热门分类
 export function HotCategory(props: {
     data: {
         appComponentId: number | string;
@@ -21,7 +19,6 @@ export function HotCategory(props: {
     }
     tabs?: any
 }) {
-    const { token } = useToken()
     const [tag, setTag] = useState<any>(null)
     const prevTag = usePrevious(tag);
     let { initialState } = useModel("@@initialState")
@@ -103,7 +100,7 @@ export function HotCategory(props: {
                             </div>
                             <span>{item?.longBookInfo?.bookName || item?.shortBookInfoVO?.bookName}</span>
                         </div>
-                    }) : <div style={{ justifyContent: 'center', display: 'flex', width: '100%' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据请选中后设置" /></div>
+                    }) : <div style={{ justifyContent: 'center', display: 'flex', width: '100%' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据请选中后设置,不配置将使用系统默认配置" /></div>
                 }
             </div>
         </div>

src/pages/MiniApp/CompConfig/components/hot_rec.tsx

@@ -0,0 +1,49 @@
+import styles from './index.less'
+import Header from "./header";
+import { Empty, Tag } from "antd";
+import { ReactElement, JSXElementConstructor, ReactNode, ReactPortal, Key } from "react";
+import { MyIcon } from "@/global";
+// 热门推荐
+export function HotRec(props: {
+    data: {
+        appComponentId: number | string;
+        componentType: string;
+        showRightButton?: boolean;
+        componentName?: string;
+        remark?: string;
+        configs?: any[];
+    }
+}) {
+    const { data: { configs, componentName, showRightButton } } = props
+    return <div className={`${styles.hot_rec}`}>
+        <Header title={componentName || "热门推荐"} showBtn={showRightButton} />
+        {configs?.[0]?.bookInfo ? <>
+            <div className={styles.list}>
+                {
+                    configs?.map((item: { bookInfo: any }, index: Key | null | undefined) => {
+                        return <div className={styles.top} key={index}>
+                            <span>
+                                {item?.bookInfo?.vipFree && <MyIcon type="icon-vipmianfei" style={{ fontSize: 35, position: 'absolute', zIndex: 1 }} />}
+                                <img src={item?.bookInfo?.picUrl} onError={(e: any) => {
+                                    e.target.src = localStorage.getItem("nocover")
+                                }} />
+                            </span>
+                            <div>
+                                <strong>{item?.bookInfo?.bookName || "书名"}</strong>
+                                <span>{item?.bookInfo?.bookDesc || "描述"}</span>
+                                <div>
+                                    <span>{item?.bookInfo?.authorInfo?.authorName || item?.bookInfo?.authorName}·{item?.bookInfo?.wordCount}万字·{item?.bookInfo?.bookStatus == 0 ? "连载中" : "完结"}</span>
+                                    <Tag >{item?.bookInfo?.labelInfoList?.[0]?.name}</Tag>
+                                </div>
+                            </div>
+                        </div>
+                    })
+                }
+            </div>
+        </> : <div className={styles.banners_box} style={{ display: "flex", alignItems: 'center', justifyContent: 'center', minHeight: 'calc(100vw / 10)', }}>
+            <div style={{ justifyContent: 'center', display: 'flex', width: '100%' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据请选中后设置,不配置将使用系统默认配置" /></div>
+        </div>
+        }
+    </div>
+}
+

src/pages/MiniApp/CompConfig/components/index.less

@@ -15,8 +15,14 @@
     justify-content: space-between;
     align-items: center;
     font-size: calc(100vw / 120);
-
-    span {
+    >div{
+        color: #949BAB;
+        font-size: calc(100vw / 170);
+        display: flex;
+        align-items: center;
+        margin-right: calc(100vw / 500);
+    }
+    >span {
         color: #949BAB;
         font-size: calc(100vw / 170);
         display: flex;
@@ -167,6 +173,56 @@
         }
     }
 }
+// 经典热书
+.classic_books {
+    .list {
+        margin-top: calc(100vw / 170);
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        .box {
+            display: flex;
+            flex-flow: column;
+            >div {
+                position: relative;
+                img {
+                    width: calc(100vw / 30);
+                    height: calc(100vw / 22.4);
+                    background: #D8D8D8;
+                    border-radius: calc(100vw / 500);
+                    margin-right: calc(100vw / 170);
+                    margin-bottom: calc(100vw / 420);
+                }
+            }
+            &:nth-child(-n+4) {
+                margin-bottom: calc(100vw / 150);
+            }
+            span {
+                width: calc(100vw / 30);
+                height: calc(100vw / 60);
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: calc(100vw / 170);
+                color: #333333;
+                line-height: calc(100vw / 120);
+                text-align: left;
+                font-style: normal;
+                display: -webkit-box;
+                /* 创建弹性盒子模型 */
+                -webkit-box-orient: vertical;
+                /* 设置盒子方向为垂直 */
+                -webkit-line-clamp: 2;
+                /* 限制显示两行 */
+                overflow: hidden;
+                /* 超出部分隐藏 */
+                text-overflow: ellipsis;
+                /* 溢出显示省略号 */
+                white-space: normal;
+                /* 允许文本换行 */
+            }
+        }
+    }
+}
 
 // 热门分类
 .hot_category {
@@ -211,8 +267,6 @@
         .box {
             display: flex;
             flex-flow: column;
-            margin-bottom: calc(100vw / 150);
-
             img {
                 width: calc(100vw / 30);
                 height: calc(100vw / 22.4);
@@ -221,7 +275,9 @@
                 margin-right: calc(100vw / 170);
                 margin-bottom: calc(100vw / 420);
             }
-
+            &:nth-child(-n+4) {
+                margin-bottom: calc(100vw / 150);
+            }
             span {
                 width: calc(100vw / 30);
                 height: calc(100vw / 60);
@@ -247,4 +303,148 @@
             }
         }
     }
+}
+
+// 重磅新书
+.new_books {
+    .list {
+        margin-top: calc(100vw / 170);
+        display: flex;
+        justify-content: space-between;
+        .box {
+            display: flex;
+            flex-flow: column;
+            >div {
+                position: relative;
+                img {
+                    width: calc(100vw / 20);
+                    height: calc(100vw / 14);
+                    background: #D8D8D8;
+                    border-radius: calc(100vw / 500);
+                    margin-right: calc(100vw / 170);
+                    margin-bottom: calc(100vw / 420);
+                }
+            }
+            span {
+                width: calc(100vw / 20);
+                height: calc(100vw / 120);
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: calc(100vw / 170);
+                color: #333333;
+                line-height: calc(100vw / 120);
+                text-align: left;
+                font-style: normal;
+                display: -webkit-box;
+                /* 创建弹性盒子模型 */
+                -webkit-box-orient: vertical;
+                /* 设置盒子方向为垂直 */
+                -webkit-line-clamp: 1;
+                /* 限制显示两行 */
+                overflow: hidden;
+                /* 超出部分隐藏 */
+                text-overflow: ellipsis;
+                /* 溢出显示省略号 */
+                white-space: normal;
+                /* 允许文本换行 */
+            }
+            small{
+                color: #999;
+                width: calc(100vw / 20);
+                height: calc(100vw / 120);
+                line-height: calc(100vw / 120);
+                font-weight: 400;
+                font-size: calc(100vw / 200);
+            }
+        }
+    }
+}
+// 热门推荐
+.hot_rec {
+    .top {
+        margin-top: calc(100vw / 170);
+        display: flex;
+
+        >span {
+            float: left;
+            position: relative;
+
+            img {
+                width: calc(100vw / 30);
+                height: calc(100vw / 22.4);
+                background: #D8D8D8;
+                border-radius: calc(100vw / 500);
+                margin-right: calc(100vw / 170);
+            }
+        }
+
+        >div {
+            float: left;
+            display: flex;
+            flex-flow: column;
+            width: calc(100vw / 8);
+
+            strong {
+                height: calc(100vw / 100);
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 500;
+                font-size: calc(100vw / 140);
+                color: #333333;
+                line-height: calc(100vw / 100);
+                text-align: left;
+                font-style: normal;
+                white-space: nowrap;
+                /* 强制文本在一行内显示 */
+                overflow: hidden;
+                /* 隐藏溢出内容 */
+                text-overflow: ellipsis;
+                /* 显示省略号 */
+            }
+
+            >span {
+                height: calc(100vw / 65);
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: calc(100vw / 180);
+                color: #666666;
+                line-height: calc(100vw / 130);
+                text-align: left;
+                font-style: normal;
+                margin-top: calc(100vw / 320);
+                display: -webkit-box;
+                /* 创建弹性盒子模型 */
+                -webkit-box-orient: vertical;
+                /* 设置盒子方向为垂直 */
+                -webkit-line-clamp: 2;
+                /* 限制显示两行 */
+                overflow: hidden;
+                /* 超出部分隐藏 */
+                text-overflow: ellipsis;
+                /* 溢出显示省略号 */
+                white-space: normal;
+                /* 允许文本换行 */
+            }
+
+            >div {
+                display: flex;
+                justify-content: space-between;
+                margin-top: calc(100vw / 320);
+
+                span {
+                    height: calc(100vw / 140);
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: calc(100vw / 210);
+                    color: #949BAB;
+                    line-height: calc(100vw / 140);
+                    text-align: left;
+                    font-style: normal;
+                }
+            }
+        }
+    }
+    .list {
+        display: flex;
+        flex-flow: column;
+    }
 }

src/pages/MiniApp/CompConfig/components/new_books.tsx

@@ -0,0 +1,43 @@
+import styles from './index.less'
+import Header from "./header";
+import { Empty } from "antd";
+import { ReactElement, JSXElementConstructor, ReactNode, ReactPortal, Key } from "react";
+import { MyIcon } from "@/global";
+// 重磅新书
+export function NewBooks(props: {
+    data: {
+        appComponentId: number | string;
+        componentType: string;
+        showRightButton?: boolean;
+        componentName?: string;
+        remark?: string;
+        configs?: any[];
+    }
+}) {
+    const { data: { configs, componentName, showRightButton } } = props
+    return <div className={`${styles.new_books}`}>
+        <Header title={componentName || "重磅新书"} showBtn={showRightButton} />
+        {configs?.[0]?.bookInfo ? <>
+            <div className={styles.list}>
+                {
+                    configs?.map((item: { bookInfo: {authorName:any,authorInfo:any, vipFree: any, picUrl: string | undefined; bookName: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined; }; }, index: Key | null | undefined) => {
+                        return <div key={index} className={styles.box}>
+                            <div>
+                                {item?.bookInfo?.vipFree && <MyIcon type="icon-vipmianfei" style={{ fontSize: 40, position: 'absolute', zIndex: 1 ,height:'calc(100vw / 30)'}} />}
+                                <img src={item?.bookInfo?.picUrl} onError={(e: any) => {
+                                    e.target.src = localStorage.getItem("nocover")
+                                }} />
+                            </div>
+                            <span>{item?.bookInfo?.bookName}</span>
+                            <small>{item?.bookInfo?.authorInfo?.authorName||item?.bookInfo?.authorName}</small>
+                        </div>
+                    })
+                }
+            </div>
+        </> : <div className={styles.banners_box} style={{ display: "flex", alignItems: 'center', justifyContent: 'center', minHeight: 'calc(100vw / 10)', }}>
+            <div style={{ justifyContent: 'center', display: 'flex', width: '100%' }}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据请选中后设置,不配置将使用系统默认配置" /></div>
+        </div>
+        }
+    </div>
+}
+

src/pages/MiniApp/CompConfig/index.tsx

@@ -100,7 +100,7 @@ const Page: React.FC = () => {
     const edit = (data: any) => {
         console.log(" data?.templateName", data?.templateName, formRef.current[data?.templateName])
         let that = formRef.current[data?.templateName]
-        dispatch({ type: 'setAll', params: { templateName: data?.templateName, pageConfigList: that?.pageConfigList } })
+        dispatch({ type: 'setAll', params: { templateName: data?.templateName, pageConfigList: that?.pageConfigList,openEdit:true } })
         DrawerBoxRef?.current?.openDrawer();
 
     }

src/pages/MiniApp/CompConfig/template.tsx

@@ -1,6 +1,6 @@
 import { useAjax } from "@/Hook/useAjax";
-import { appComponentConfigGetAppPageList, getHotCategory, getShortBookBanners, getShortBookHotBooks } from "@/services/miniApp/compConfig";
-import { Card, Col, Row, Space, Spin } from "antd";
+import { appComponentConfigGetAppPageList, getBestBooks, getBestReviews, getClassicBooks, getGuessLike, getHotCategory, getHotRec, getNewBooks, getShortBookBanners, getShortBookHotBooks } from "@/services/miniApp/compConfig";
+import { Space, Spin } from "antd";
 import styles from './DrawerBox/index.less'
 import { useEffect, useMemo, useReducer } from "react";
 import React from "react";
@@ -8,8 +8,12 @@ import { Banners } from "./components/banners";
 import { HotBooks } from "./components/hot_books";
 import { HotCategory } from "./components/hot_category";
 import { useModel } from "@umijs/max";
-import { useToken } from "@ant-design/pro-components";
-import { kebabCase } from "lodash";
+import { NewBooks } from "./components/new_books";
+import { HotRec } from "./components/hot_rec";
+import { BestBooks } from "./components/best_books";
+import { BestReviews } from "./components/best_reviews";
+import { ClassicBooks } from "./components/classic_books";
+import { GuessLike } from "./components/guess_like";
 type Config = {
     bannerType?: number,//banner类型; 0:小说 1:页面路径 banners组件使用
     activityPagePath?: string,//banner类型 1的时候使用页面路径
@@ -56,8 +60,8 @@ export function reducer(state: State, action: Action) {
 }
 export function Template(params: { data: any, formRef: any }) {
     let { data, formRef } = params
-    let { token } = useToken()
     let { initialState } = useModel("@@initialState")
+    let { state: pageState } = useModel('appPageConifg')
     // 接口公共参数
     let publicData = useMemo(() => {
         return {
@@ -111,6 +115,12 @@ export function Template(params: { data: any, formRef: any }) {
     const GetShortBookHotBooks = useAjax((params) => getShortBookHotBooks(params))
     const GetShortBookBanners = useAjax((params) => getShortBookBanners(params))
     const GetHotCategory = useAjax((params) => getHotCategory(params))
+    const GetNewBooks = useAjax((params) => getNewBooks(params))
+    const GetHotRec = useAjax((params) => getHotRec(params))
+    const GetBestReviews = useAjax((params) => getBestReviews(params))
+    const GetClassicBooks = useAjax((params) => getClassicBooks(params))
+    const GetBestBooks = useAjax((params) => getBestBooks(params))
+    const GetGuessLike = useAjax((params) => getGuessLike(params))
     const AppComponentConfigGetAppPageList = useAjax((params) => appComponentConfigGetAppPageList(params))
     // 获取对应组件数据
     useEffect(() => {
@@ -145,6 +155,66 @@ export function Template(params: { data: any, formRef: any }) {
                                         }
                                     })
                                     break;
+                                case "new_books":
+                                    await GetNewBooks.run({ templateName: data?.templateName, workDirection: wd?.workDirection, ...publicData }).then(res => {
+                                        if (res.data) {
+                                            let newData = res.data?.shortBookInfoAppVOS?.filter((item: any, index: number) => index < 3)
+                                            comp.configs = newData?.map((item: { bookId: any; }) => {
+                                                return { bookId: item.bookId, bookInfo: item }
+                                            })
+                                        }
+                                    })
+                                    break;
+                                case "hot_rec":
+                                    await GetHotRec.run({ templateName: data?.templateName, workDirection: wd?.workDirection, ...publicData }).then(res => {
+                                        if (res.data) {
+                                            let newData = res.data?.shortBookInfoAppVOS?.filter((item: any, index: number) => index < 3)
+                                            comp.configs = newData?.map((item: { bookId: any; }) => {
+                                                return { bookId: item.bookId, bookInfo: item }
+                                            })
+                                        }
+                                    })
+                                    break;
+                                case "best_reviews":
+                                    await GetBestReviews.run({ templateName: data?.templateName, workDirection: wd?.workDirection, ...publicData }).then(res => {
+                                        if (res.data) {
+                                            let newData = res.data?.shortBookInfoAppVOS?.filter((item: any, index: number) => index < 4)
+                                            comp.configs = newData?.map((item: { bookId: any; }) => {
+                                                return { bookId: item.bookId, bookInfo: item }
+                                            })
+                                        }
+                                    })
+                                    break;
+                                case "classic_books":
+                                    await GetClassicBooks.run({ templateName: data?.templateName, workDirection: wd?.workDirection, ...publicData }).then(res => {
+                                        if (res.data) {
+                                            let newData = res.data?.shortBookInfoAppVOS?.filter((item: any, index: number) => index < 8)
+                                            comp.configs = newData?.map((item: { bookId: any; }) => {
+                                                return { bookId: item.bookId, bookInfo: item }
+                                            })
+                                        }
+                                    })
+                                    break;
+                                case "best_books":
+                                    await GetBestBooks.run({ templateName: data?.templateName, workDirection: wd?.workDirection, ...publicData }).then(res => {
+                                        if (res.data) {
+                                            let newData = res.data?.shortBookInfoAppVOS?.filter((item: any, index: number) => index < 3)
+                                            comp.configs = newData?.map((item: { bookId: any; }) => {
+                                                return { bookId: item.bookId, bookInfo: item }
+                                            })
+                                        }
+                                    })
+                                    break;
+                                case "guess_like":
+                                    await GetGuessLike.run({ templateName: data?.templateName, workDirection: wd?.workDirection, ...publicData,pageSize:20,pageNum:1 }).then(res => {
+                                        if (res.data) {
+                                            let newData = res.data?.shortBookInfoAppVOS?.records
+                                            comp.configs = newData?.map((item: { bookId: any; }) => {
+                                                return { bookId: item.bookId, bookInfo: item }
+                                            })
+                                        }
+                                    })
+                                    break;
                             }
                         }
                     }
@@ -158,7 +228,7 @@ export function Template(params: { data: any, formRef: any }) {
             }
         }
         getData()
-    }, [formRef])
+    }, [formRef, pageState.openEdit])
     // 获取配置页面的列表
     return <Spin spinning={GetShortBookHotBooks?.loading || GetShortBookBanners?.loading || GetHotCategory?.loading || AppComponentConfigGetAppPageList?.loading}>
         <div className={styles.phone}>
@@ -197,6 +267,18 @@ export function Template(params: { data: any, formRef: any }) {
                                     {item.componentType === "hot_books" && <HotBooks data={item} />}
                                     {/* 热门分类 */}
                                     {item.componentType === "hot_category" && <HotCategory data={item} tabs={state.tabs} />}
+                                    {/* 重磅新书 */}
+                                    {item.componentType === "new_books" && <NewBooks data={item} />}
+                                    {/* 热门推荐 */}
+                                    {item.componentType === "hot_rec" && <HotRec data={item} />}
+                                    {/* 口碑佳作 */}
+                                    {item.componentType === "best_reviews" && <BestReviews data={item}/>}
+                                    {/* 经典热书 */}
+                                    {item.componentType === "classic_books" && <ClassicBooks data={item}/>}
+                                    {/* 必看好书 */}
+                                    {item.componentType === "best_books" && <BestBooks data={item}/>}
+                                    {/* 猜你喜欢 */}
+                                    {item.componentType === "guess_like" && <GuessLike data={item}/>}
                                 </div>
                                 <div className={styles.compBoxM} />
                             </React.Fragment>

src/pages/MiniApp/EmsCnpl/Auth/index.tsx

@@ -40,10 +40,10 @@ const Page: React.FC = () => {
                 }).then(res => {
                     if (res.code === 200) {
                         message.success("授权成功")
-                        setTimeout(()=>{
-                            history.push("/miniApp/emsCnpl/auth")
-                        },1000)
                     }
+                    setTimeout(()=>{
+                        history.push("/miniApp/emsCnpl/auth")
+                    },1000)
                 })
             }
         }

src/services/miniApp/compConfig/index.tsx

@@ -83,3 +83,49 @@ export async function getHotCategory(params: CompParams) {
     });
 }
 
+/**获取重磅新书 */
+export async function getNewBooks(params: CompParams) {
+    return request(api + '/admin/appComponentConfig/getNewBooks', {
+        method: 'GET',
+        params
+    });
+}
+
+/**获取热门推荐 */
+export async function getHotRec(params: CompParams) {
+    return request(api + '/admin/appComponentConfig/getHotRec', {
+        method: 'GET',
+        params
+    });
+}
+/**获取口碑佳作 */
+export async function getBestReviews(params: CompParams) {
+    return request(api + '/admin/appComponentConfig/getBestReviews', {
+        method: 'GET',
+        params
+    });
+}
+
+/**获取经典热书 */
+export async function getClassicBooks(params: CompParams) {
+    return request(api + '/admin/appComponentConfig/getClassicBooks', {
+        method: 'GET',
+        params
+    });
+}
+
+/**获取必看好书 */
+export async function getBestBooks(params: CompParams) {
+    return request(api + '/admin/appComponentConfig/getBestBooks', {
+        method: 'GET',
+        params
+    });
+}
+/**获取必看好书 */
+export async function getGuessLike(params: CompParams) {
+    return request(api + '/admin/appComponentConfig/getGuessLike', {
+        method: 'GET',
+        params
+    });
+}
+