fix：更新优化

src/common/components/schema/MyFormItems.tsx

@@ -53,13 +53,19 @@ export const MyFormItems = {
     uploadType = 'image',
     ...rest
   }: {
-    max?: number;
+    max?: number | undefined;
     help?: string;
     uploadType?: 'image' | 'file' | 'video' | 'audio' | undefined;
   } & PropsType): ReturnType {
     return {
       renderFormItem() {
-        return <MyUploadImages max={max} uploadType={uploadType} />;
+        return (
+          <MyUploadImages
+            max={max}
+            uploadType={uploadType}
+            {...rest?.fieldProps}
+          />
+        );
       },
       formItemProps: {
         help,

src/common/utils/wxCustomerConfig.ts

@@ -0,0 +1,38 @@
+export const defaultMenu = [
+  {
+    pagePath: 'pages/index/index',
+    text: '首页',
+    iconPath: [
+      {
+        name: '首页默认图标',
+        url: 'https://pay-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KFMAHSTNJRDJQAY3ZMY5PZXV.png',
+        uid: 123123,
+      },
+    ],
+    selectedIconPath: [
+      {
+        name: '首页高亮图标',
+        url: 'https://pay-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KFMAG5PNHCWCMQMYEXFC8XV2.png',
+        uid: 321321,
+      },
+    ],
+  },
+  {
+    text: '我的',
+    pagePath: 'pages/me/index',
+    iconPath: [
+      {
+        name: '我的默认图标',
+        url: 'https://pay-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KFMAJ8EYMS0TTNG482YGVWQ1.png',
+        uid: 234234,
+      },
+    ],
+    selectedIconPath: [
+      {
+        name: '我的高亮图标',
+        url: 'https://pay-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KFMAJZYRFEYY8T5VJVYH6XJ1.png',
+        uid: 432432,
+      },
+    ],
+  },
+];

src/pages/company/list/pages/set_page_info.tsx

@@ -4,11 +4,12 @@ import {
   MyModalFormProps,
   MyPageContainer,
 } from '@/common';
+import { defaultMenu } from '@/common/utils/wxCustomerConfig';
 import { Apis } from '@/gen/Apis';
 import { CaretDownOutlined } from '@ant-design/icons';
-import { BetaSchemaForm } from '@ant-design/pro-components';
+import { BetaSchemaForm, ProCard } from '@ant-design/pro-components';
 import { useSearchParams } from '@umijs/max';
-import { Card, Col, Flex, Form, message, Row, Tag } from 'antd';
+import { Card, Col, Flex, Form, message, Row, Space, Tag } from 'antd';
 import { useEffect, useState } from 'react';
 import './style.scss';
 
@@ -18,16 +19,19 @@ interface FormData {
   pageColor: string;
   pageColorValue?: string[];
   admin_logo?: { url: string }[];
+  menu?: typeof defaultMenu;
 }
 
 export default function Index({ title = '小程序页面配置' }) {
   const [form] = Form.useForm<FormData>();
+  const [menuIndex, setMenuIndex] = useState<number>(0);
   const [getShowData, setShowData] = useState<any>({});
   const [searchParams] = useSearchParams();
   const [formValues, setFormValues] = useState<FormData>({
     logo: [],
     admin_logo: [],
     color: '#1890ff',
+    menu: defaultMenu,
     // pageColor: `linear-gradient(180deg,rgba(255, 255, 255, 0.44) 0%,rgba(255, 255, 255, 0) 100%),linear-gradient(146deg,#d3d7ff 0%,rgba(255, 255, 255, 0) 37%),linear-gradient(194deg,#dffff3 0%,#f8f8f8 30%)`,
     pageColor: `linear-gradient(180deg, rgba(208, 229, 255, 0.44) 0%, #f7f7f7 100%, rgba(255, 255, 255, 0) 100%), linear-gradient(145deg, #D3D7FF 3%, rgba(255, 255, 255, 0) 49%), linear-gradient(222deg, #84FFD8 0%, #F7F7F7 67%)`,
   });
@@ -53,6 +57,7 @@ export default function Index({ title = '小程序页面配置' }) {
         logo: row?.logo || formValues?.logo,
         pageColorValue: formValues?.pageColorValue,
         admin_logo: row?.admin_logo,
+        menu: row?.menu?.length ? row?.menu : defaultMenu,
       },
     };
 
@@ -87,6 +92,7 @@ export default function Index({ title = '小程序页面配置' }) {
         setFormValues({
           ...res?.data?.config_value,
           pageColor: newCss,
+          menu: defaultMenu,
         });
         console.log('newCss', newCss);
         form.setFieldsValue({
@@ -249,6 +255,127 @@ export default function Index({ title = '小程序页面配置' }) {
                       },
                     },
                   },
+                  {
+                    valueType: 'divider',
+                    fieldProps: {
+                      orientation: 'left',
+                      children: '首屏底部菜单图标',
+                    },
+                  },
+                  {
+                    valueType: 'formList',
+                    dataIndex: 'menu',
+                    fieldProps: {
+                      copyIconProps: false,
+                      deleteIconProps: false,
+                      creatorButtonProps: false,
+                    },
+                    formItemProps: {
+                      onChange: () => {
+                        let formValues = form.getFieldsValue();
+                        setFormValues({
+                          ...formValues,
+                          menu: formValues?.menu,
+                        });
+                      },
+                      style: {
+                        borderRadius: '6px',
+                        marginBottom: 0,
+                      },
+                      itemRender: (
+                        { listDom, action }: any,
+                        { index }: { index: number },
+                      ) => {
+                        return (
+                          <ProCard
+                            bordered
+                            style={{ marginBlockEnd: 10 }}
+                            title={`菜单设置`}
+                            size="small"
+                            headerBordered
+                            extra={
+                              <Space>
+                                <div
+                                  style={{ fontSize: '12px', color: '#666' }}
+                                >
+                                  请上传正方形图标，建议81*81起的菜单图标
+                                </div>
+                                {/* {index ? (
+                                  <div
+                                    onClick={() => {
+                                      // 确认删除操作
+                                      // 获取当前表单值
+                                      const formValues = form.getFieldsValue();
+                                      // 检查menu数组是否存在
+                                      if (
+                                        formValues?.menu &&
+                                        Array.isArray(formValues.menu)
+                                      ) {
+                                        // 创建新的menu数组，删除指定下标项
+                                        const newMenu = formValues.menu.filter(
+                                          (_, i) => i !== index,
+                                        );
+                                        // 更新表单值
+                                        setFormValues({
+                                          ...formValues,
+                                          menu: newMenu,
+                                        });
+                                        form.setFieldsValue({
+                                          ...formValues,
+                                          menu: newMenu,
+                                        });
+                                      }
+                                    }}
+                                    style={{
+                                      cursor: 'pointer',
+                                      padding: '4px',
+                                      borderRadius: '4px',
+                                    }}
+                                  >
+                                    <DeleteFilled />
+                                  </div>
+                                ) : (
+                                  ''
+                                )} */}
+                              </Space>
+                            }
+                          >
+                            {listDom}
+                          </ProCard>
+                        );
+                      },
+                    },
+                    columns: [
+                      {
+                        valueType: 'group',
+                        colProps: { span: 24 },
+                        columns: [
+                          {
+                            title: '菜单名称',
+                            key: 'text',
+                            colProps: { span: 4 },
+                          },
+                          {
+                            title: '跳转链接',
+                            key: 'pagePath',
+                            colProps: { span: 8 },
+                          },
+                          MyFormItems.UploadImages({
+                            key: 'iconPath',
+                            title: '默认图标',
+                            max: 1,
+                            colProps: { span: 4 },
+                          }),
+                          MyFormItems.UploadImages({
+                            key: 'selectedIconPath',
+                            title: '选中图标',
+                            max: 1,
+                            colProps: { span: 4 },
+                          }),
+                        ],
+                      },
+                    ],
+                  },
                 ]}
               />
             </Card>
@@ -346,6 +473,29 @@ export default function Index({ title = '小程序页面配置' }) {
                       </Flex>
                     </div>
                   </div>
+                  <div className="menu-content">
+                    {formValues?.menu?.map((item: any, index: number) => (
+                      <div
+                        key={`item_${index}`}
+                        className="item"
+                        onClick={() => {
+                          setMenuIndex(index);
+                        }}
+                      >
+                        <img
+                          src={
+                            index === menuIndex
+                              ? item?.selectedIconPath?.[0]?.url
+                              : item?.iconPath?.[0]?.url
+                          }
+                          width="28"
+                          height="28"
+                          alt=""
+                        />
+                        <div>{item?.text}</div>
+                      </div>
+                    ))}
+                  </div>
                 </div>
               </div>
             </Card>

src/pages/company/list/pages/style.scss

@@ -53,18 +53,18 @@
   }
 
   // 手机底部home键
-  &::after {
+  // &::after {
-    content: '';
+  //   content: '';
-    position: absolute;
+  //   position: absolute;
-    bottom: 10px;
+  //   bottom: 10px;
-    left: 50%;
+  //   left: 50%;
-    transform: translateX(-50%);
+  //   transform: translateX(-50%);
-    width: 50px;
+  //   width: 50px;
-    height: 50px;
+  //   height: 50px;
-    border: 2px solid #333;
+  //   border: 2px solid #333;
-    border-radius: 50%;
+  //   border-radius: 50%;
-    z-index: 1;
+  //   z-index: 1;
-  }
+  // }
 }
 
 .phone-screen {
@@ -154,6 +154,7 @@
 
   .tab-content {
     padding: 15px 0 0 0;
+    position: relative;
   }
   .phone-button {
     padding: 4px 12px;
@@ -196,3 +197,20 @@
     }
   }
 }
+
+.menu-content {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background-color: #fff;
+  font-size: 12px;
+  .item {
+    text-align: center;
+    padding: 10px 0;
+    width: 50%;
+    cursor: pointer;
+  }
+}

src/pages/company/list/table/CustomerEnd.tsx

@@ -8,7 +8,7 @@ export default function CustomerEnd(props: MyBetaModalFormProps) {
     <div>
       <ProCard title="客户端小程序配置" bordered headerBordered gutter={16}>
         <ProCard
-          title="品牌主色、全局渐变色配置"
+          title="底部菜单图标、品牌主色、全局渐变色配置"
           type="inner"
           bordered
           extra={
@@ -25,7 +25,7 @@ export default function CustomerEnd(props: MyBetaModalFormProps) {
           }
         >
           <div style={{ height: '80px' }}>
-            替换系统默认的颜色统一调整为机构主色，保持视觉格一致
+            替换系统默认的颜色统一调整为机构主色，保持视觉格一致，以及首屏底部菜单图标。
           </div>
         </ProCard>
         <ProCard
@@ -40,18 +40,6 @@ export default function CustomerEnd(props: MyBetaModalFormProps) {
             品牌主色是机构在小程序中最核心的视觉代表色。通过配置品牌主色，你可以让整个小程序的交互组件自动统一为机构专属风格，提升品牌识别度。
           </div>
         </ProCard>
-        <ProCard
-          title="小程序首屏底部菜单图标"
-          type="inner"
-          bordered
-          extra={
-            <MyButtons.Default title="去配置" type="primary" size="small" />
-          }
-        >
-          <div style={{ height: '80px' }}>
-            配置客户端小程序首屏底部菜单图标，请上传png格式图标
-          </div>
-        </ProCard>
       </ProCard>
     </div>
   );