开发: 添加小屏幕css[少], 聊天记录投票. 客户中心修改, 工作台支持小屏

2023-04-21 14:53:54 +08:00
parent 2156976a8c
commit 5f4acf4317
20 changed files with 619 additions and 322 deletions
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -58,7 +58,9 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
    // actionsRender: () => [<Question key="doc" />, <SelectLang key="SelectLang" />],
    actionsRender: () => [],
    avatarProps: {
-      src: initialState?.currentUser?.avatar ? '/api/' + initialState?.currentUser?.avatar : AvatarSvg,
+      src: initialState?.currentUser?.avatar
+        ? '/api/' + initialState?.currentUser?.avatar
+        : AvatarSvg,
      title: <AvatarName />,
      render: (_, avatarChildren) => {
        return <AvatarDropdown>{avatarChildren}</AvatarDropdown>;
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -6,6 +6,7 @@ const Footer: React.FC = () => {
    <DefaultFooter
      style={{
        background: 'none',
+        paddingBottom: 8,
      }}
      copyright={`2021 - 2028 福州晨丰科技有限公司`}
      links={[
--- a/src/components/SearchBarPlugin/index.tsx
+++ b/src/components/SearchBarPlugin/index.tsx
@@ -1,16 +1,17 @@
 import { getDevice } from '@/services/utils';
+import { Button, Drawer } from 'antd';

-import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import React, { useRef, useState } from 'react';
-import styles from './index.module.scss';

 interface IProps {
-  children: React.ReactNode;
+  body: React.ReactNode;
+  footer: React.ReactNode;
 }

 export const SearchBarPlugin: React.FC<IProps> = (props) => {
  // const [device, setDevice] = useState(window.innerWidth);
  const isPhone = getDevice() === 'phone';
+  const [open, setOpen] = useState(false);
  const [searchBarText, setSearchBarText] = useState('展开');
  // useEffect(() => {
  //   const handleResize =  (e: any) => {
@@ -39,24 +40,60 @@ export const SearchBarPlugin: React.FC<IProps> = (props) => {
  };

  return (
-    <div style={{ background: '#fff', padding: 16, paddingBottom: 0, borderRadius: 6 }}>
+    <>
+      {isPhone ? (
+        <>
+          <Drawer title="筛选条件" open={open} onClose={() => setOpen(false)}>
+            <div>{props.body}</div>
            <div
-        className={styles.searchBarContent}
-        style={{ height: isPhone ? 76 : 'auto' }}
+              style={{ paddingBottom: 16 }}
+              onClick={() => {
+                setOpen(false);
+              }}
+            >
+              {props.footer}
+            </div>
+          </Drawer>
+          <div
+            style={{
+              background: '#fff',
+              display: 'flex',
+              justifyContent: 'flex-end',
+              padding: '8px 0',
+              borderRadius: 6,
+            }}
+          >
+            <Button
+              type="default"
+              onClick={() => {
+                setOpen(true);
+              }}
+            >
+              筛选
+            </Button>
+          </div>
+        </>
+      ) : (
+        <div
+          className="SearchBarPlugin"
+          style={{ background: '#fff', padding: 16, paddingBottom: 0, borderRadius: 6 }}
+        >
+          <div
+            // className={styles.searchBarContent}
+            // style={{ height: isPhone ? 76 : 'auto' }}
            ref={searchBarContentRef}
          >
-        {props.children}
+            {props.body}
          </div>
-      <div className={styles.searchBar}>
+          <div style={{ background: '#fff', paddingBottom: 16 }}>{props.footer}</div>
+          {/* <div className={styles.searchBar}>
        <div onClick={changeSearchbar}>
          <div style={{ display: 'inline-block', verticalAlign: 'middle' }}>{searchBarText}</div>
          {searchBarText == '展开' ? <DownOutlined /> : <UpOutlined />}
        </div>
+      </div> */}
        </div>
-    </div>
+      )}
+    </>
  );
 };
-
-export const SearchBottonsCardPlugin: React.FC<IProps> = (props) => {
-  return <div style={{ background: '#fff', paddingBottom: 16 }}>{props.children}</div>;
-};
--- a/src/global.less
+++ b/src/global.less
@@ -48,6 +48,10 @@ ol {
  padding-right: 24px !important;
 }

+.ant-pro-global-footer-list {
+  margin-bottom: 0 !important;
+}
+
 input {
  background-clip: text;
  -webkit-text-fill-color: #000; // 改变了字体颜色
@@ -85,4 +89,10 @@ input {
      }
    }
  }
+
+  .ant-pro-page-container-children-content,
+  .ant-page-header {
+    padding-left: 12px !important;
+    padding-right: 12px !important;
+  }
 }
--- a/src/pages/ChatLogs/ChatLogsType.ts
+++ b/src/pages/ChatLogs/ChatLogsType.ts
@@ -43,6 +43,7 @@ export interface ICustFollow {
  avatar: string;

  gender: number;
+  add_staff_tot?: number | undefined;
  name: string;
  staff_name?: string;

@@ -72,6 +73,7 @@ export interface IGroup {
  owner: string;
  staff_name?: string;
  state: number;
+
  status: number;
  sync_time: string;
  notice: string;
@@ -99,6 +101,7 @@ export interface IChat {
  action: string;
  content: string;
  msg_from: string;
+  doc?: string;
  msg_id: string;
  msg_time: string;
  msg_to_list: string;
--- a/src/pages/ChatLogs/components/ChatCollect.tsx
+++ b/src/pages/ChatLogs/components/ChatCollect.tsx
@@ -8,7 +8,7 @@ export const ChatCollect: React.FC<IChatItem> = (props) => {
        <div>
          <div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
            <div style={{ wordBreak: 'break-all' }}>群名：{msg.room_name}</div>
-            <div style={{ wordBreak: 'break-all' }}>创建者：{msg.creator}</div>
+            <div style={{ wordBreak: 'break-all' }}>群主：{msg.creator}</div>
            <div style={{ wordBreak: 'break-all' }}>表名：{msg.title}</div>
            <div
              style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}
--- a/src/pages/ChatLogs/components/ChatVote.tsx
+++ b/src/pages/ChatLogs/components/ChatVote.tsx
@@ -1,15 +1,80 @@
+import { SignalFilled } from '@ant-design/icons';
+import { Modal } from 'antd';
+import { useEffect, useState } from 'react';
 import { IChatItem } from '../ChatLogsType';
+import styles from './index.module.scss';

 export const ChatVote: React.FC<IChatItem> = (props) => {
-  const votetype: any = { 101: '发起投票', 102: '参与投票' };
+  const votetype: any = { '101': '发起投票', '102': '参与投票' };
+  const [open, setOpen] = useState(false);
+  const [voteitem, setVoteitem] = useState([]);
+
+  useEffect(() => {
+    try {
+      const msg = JSON.parse(props.chat?.content as string);
+      setVoteitem(msg?.voteitem);
+    } catch (e) {}
+  }, [props.chat]);

  function content() {
+    try {
+      const msg = JSON.parse(props.chat?.content as string);
+
+      return (
+        <>
+          <div
+            style={{ display: 'flex', color: '#000', flexDirection: 'column', cursor: 'pointer' }}
+            onClick={() => setOpen(true)}
+          >
+            <div style={{ wordBreak: 'break-all', fontWeight: 'bold' }}>{msg?.votetitle}</div>
+            <div style={{ wordBreak: 'break-all' }}>
+              {Array.isArray(msg?.voteitem)
+                ? [0, 1, 2].map((item) => {
+                    return msg?.voteitem[item] ? (
+                      <div className={styles.voteitem}>{msg?.voteitem[item]}</div>
+                    ) : (
+                      <></>
+                    );
+                  })
+                : null}
+            </div>
+            <div
+              style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}
+            >
+              <SignalFilled style={{ color: '#F0B40E' }} /> 投票 [
+              {votetype[msg?.votetype as string]}]
+            </div>
+          </div>
+          <Modal
+            open={open}
+            title={msg?.votetitle}
+            centered
+            onCancel={() => {
+              setOpen(false);
+            }}
+            footer={false}
+          >
+            <div style={{ maxHeight: '75vh', overflow: 'auto' }}>
+              {Array.isArray(voteitem)
+                ? voteitem.map((item) => {
+                    return (
+                      <div key={item} className={styles.voteitem}>
+                        {item}
+                      </div>
+                    );
+                  })
+                : null}
+            </div>
+          </Modal>
+        </>
+      );
+    } catch (e) {}
+
    return (
      <div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
-        <div style={{ wordBreak: 'break-all' }}>{props.chat?.votetitle}</div>
-        <div style={{ wordBreak: 'break-all' }}>{props.chat?.voteitem}</div>
+        <div style={{ wordBreak: 'break-all' }}>{props.chat?.content}</div>
        <div style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}>
-          投票 [{votetype[props.chat?.votetype as string]}]
+          <SignalFilled style={{ color: '#F0B40E' }} /> 投票
        </div>
      </div>
    );
--- a/src/pages/ChatLogs/components/EmojiFormat.tsx
+++ b/src/pages/ChatLogs/components/EmojiFormat.tsx
@@ -7,6 +7,7 @@ type IProps = {
 export const EmojiFormat: React.FC<IProps> = (props) => {
  const format = () => {
    let txt = props.content;
+    if (txt.includes('[') && txt.includes(']')) {
      emoji.forEach((item) => {
        const reg = new RegExp(`\\[${item}\\]`, 'g');
        txt = txt.replace(
@@ -14,6 +15,8 @@ export const EmojiFormat: React.FC<IProps> = (props) => {
          `<img style="width: 24px;height:24px" src="/api/assets/wechat/emoji/${item}.png" alt="" />`,
        );
      });
+    }
+
    return txt;
  };

--- a/src/pages/ChatLogs/components/Svgs.tsx
+++ b/src/pages/ChatLogs/components/Svgs.tsx
@@ -1,7 +1,7 @@
 export const OwnerSvg = () => {
  return (
    <span
-      title="创建者"
+      title="群主"
      style={{
        display: 'inline-flex',
        alignItems: 'center',
--- a/src/pages/ChatLogs/components/index.module.scss
+++ b/src/pages/ChatLogs/components/index.module.scss
@@ -42,6 +42,7 @@
  justify-content: center;
  min-height: 40px;
  padding: 12px;
+  white-space: pre-wrap;
  word-break: break-all;
  background-color: #fff;
  border-radius: 4px;
@@ -153,3 +154,20 @@
  background-color: #8c8c8c;
  border-radius: 40px;
 }
+
+.voteitem {
+  position: relative;
+  padding-left: 16px;
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border: 2px solid #ccc;
+    border-radius: 8px;
+    transform: translateY(-50%);
+    content: '';
+  }
+}
--- a/src/pages/ChatLogs/index.module.scss
+++ b/src/pages/ChatLogs/index.module.scss
@@ -17,11 +17,14 @@
  align-items: center;
  justify-content: flex-start;
  height: 65px;
+
  margin-bottom: 12px;
  padding: 0 12px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
-
+  &:first-child {
+    margin-top: 1px;
+  }
  &:hover {
    background-color: #bae0ff;
  }
@@ -80,7 +83,9 @@
  height: 34px;
  background-color: #fff;
  transition: top 0.3s, height 0.3s;
-
+  .chatB {
+    margin-top: 0;
+  }
  &.delFollowListShow {
    top: 164px;
    height: calc(100% - 164px);
--- a/src/pages/ChatLogs/index.tsx
+++ b/src/pages/ChatLogs/index.tsx
@@ -201,7 +201,7 @@ const ChatLogs: React.FC = () => {
              other.push(item);
            }
          });
-          // 对群员 创建者 > 管理员 > 普通成员 排序
+          // 对群员 群主 > 管理员 > 普通成员 排序
          setGroupMembersList([...owner, ...admin_list, ...other]);
          page(1);
        }
@@ -242,8 +242,8 @@ const ChatLogs: React.FC = () => {
          // });
          setStaffsList(res.data);
          setInnerStaffsList(res.data);
-          getCustFollowsList();
-          getGroupList();
+          // getCustFollowsList();
+          // getGroupList();
        }
      }
    });
@@ -566,8 +566,11 @@ const ChatLogs: React.FC = () => {
                    setSelectStaff({ ...item });
                    selectStaffRef.current = { ...item };
                    setFlolowsBox(false);
+                    if (tabKey == '1') {
                      getCustFollowsList();
+                    } else if (tabKey == '2') {
                      getGroupList();
+                    }
                  }}
                  style={{ background: selectStaff?.user_id == item.user_id ? '#bae0ff' : '' }}
                >
@@ -651,6 +654,11 @@ const ChatLogs: React.FC = () => {
            tabBarGutter={12}
            onChange={(val) => {
              setTabKey(val);
+              if (val == '1') {
+                getCustFollowsList();
+              } else if (val == '2') {
+                getGroupList();
+              }
            }}
          />
          <div className={styles.chatBBox}>{tabContent()}</div>
@@ -724,7 +732,7 @@ const ChatLogs: React.FC = () => {
                  {groupMembersList.map((item) => {
                    return item.group_members_type == '2' || item.state == 0
                      ? null
-                      : groupMembersListItem(item, selectGroupRef.current);
+                      : groupMembersListItem(item, selectGroupRef.current as IGroup);
                  })}
                  {groupMembersCount2(groupMembersList, '2', 1) != 0 ? (
                    <div
@@ -742,7 +750,7 @@ const ChatLogs: React.FC = () => {
                  {groupMembersList.map((item) => {
                    return item.group_members_type == '1' || item.state == 0
                      ? null
-                      : groupMembersListItem(item, selectGroupRef.current);
+                      : groupMembersListItem(item, selectGroupRef.current as IGroup);
                  })}
                  {groupMembersCount(groupMembersList, 0) != 0 ? (
                    <div
@@ -760,7 +768,7 @@ const ChatLogs: React.FC = () => {
                  {groupMembersList.map((item) => {
                    return item.state == 1
                      ? null
-                      : groupMembersListItem(item, selectGroupRef.current);
+                      : groupMembersListItem(item, selectGroupRef.current as IGroup);
                  })}
                </div>
              )}
--- a/src/pages/CustomList/components/CustDetailContent.tsx
+++ b/src/pages/CustomList/components/CustDetailContent.tsx
@@ -1,8 +1,11 @@
 import { ICustFollow } from '@/pages/ChatLogs/ChatLogsType';
 import { formatTags } from '@/pages/ChatLogs/ChatUtils';
 import { Gender } from '@/pages/ChatLogs/components/Gender';
+import { post } from '@/services/ajax';
 import { AddWay, CustType } from '@/services/config';
-import React from 'react';
+import { Spin, Steps } from 'antd';
+import { stringify } from 'qs';
+import React, { useEffect, useState } from 'react';
 import styles from './index.module.scss';

 type IProps = {
@@ -16,6 +19,39 @@ type IProps = {
 */
 export const CustDetailContent: React.FC<IProps> = (props) => {
  const { record } = props;
+  const [timeLine, setTimeLine] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const getList = () => {
+    setLoading(true);
+    post({
+      url: '/CustFollows/CustPath',
+      data: stringify({
+        cust_id: record.cust_id,
+      }),
+    }).then((res) => {
+      setLoading(false);
+      if (res.err_code == 0) {
+        if (Array.isArray(res.data)) {
+          let arr: any = [];
+          res.data.forEach((item: any) => {
+            arr.push({
+              title: item.staff_name + ' 添加了好友',
+              description: item.create_time,
+            });
+          });
+          setTimeLine(arr);
+        }
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (props.record.cust_id) {
+      getList();
+    }
+  }, [props.record]);
+
  return (
    <div>
      <div
@@ -45,7 +81,7 @@ export const CustDetailContent: React.FC<IProps> = (props) => {
      <div>添加时间：{record?.create_time}</div>
      <div
        style={{
-          paddingTop: 12,
+          paddingTop: 24,
          marginBottom: 12,
          paddingBottom: 12,
          borderBottom: '1px solid #ddd',
@@ -56,6 +92,22 @@ export const CustDetailContent: React.FC<IProps> = (props) => {
        标签
      </div>
      {formatTags(record?.tags)}
+
+      <div
+        style={{
+          paddingTop: 24,
+          marginBottom: 12,
+          paddingBottom: 12,
+          borderBottom: '1px solid #ddd',
+          fontSize: 16,
+          fontWeight: 'bold',
+        }}
+      >
+        客户轨迹
+      </div>
+      <Spin spinning={loading}>
+        <Steps progressDot items={timeLine} direction="vertical" current={timeLine.length} />
+      </Spin>
    </div>
  );
 };
--- a/src/pages/CustomList/index.tsx
+++ b/src/pages/CustomList/index.tsx
@@ -1,4 +1,4 @@
-import { SearchBarPlugin, SearchBottonsCardPlugin } from '@/components/SearchBarPlugin';
+import { SearchBarPlugin } from '@/components/SearchBarPlugin';
 import { post } from '@/services/ajax';
 import { AddWay, CustType } from '@/services/config';
 import { PageContainer } from '@ant-design/pro-components';
@@ -79,7 +79,8 @@ const CustomList: React.FC = () => {
  return (
    <PageContainer>
      <div style={{ flexGrow: 1, minWidth: 0 }}>
-        <SearchBarPlugin>
+        <SearchBarPlugin
+          body={
            <Form>
              <Row gutter={{ xs: 0, sm: 16 }}>
                <Col xs={24} sm={12} lg={8} xxl={6}>
@@ -169,8 +170,8 @@ const CustomList: React.FC = () => {
                </Col>
              </Row>
            </Form>
-        </SearchBarPlugin>
-        <SearchBottonsCardPlugin>
+          }
+          footer={
            <Row justify={'center'}>
              <Button
                type="primary"
@@ -182,7 +183,9 @@ const CustomList: React.FC = () => {
                搜索
              </Button>
            </Row>
-        </SearchBottonsCardPlugin>
+          }
+        />
+
        <Table
          tableLayout="fixed"
          size="middle"
@@ -194,6 +197,20 @@ const CustomList: React.FC = () => {
            return `${record.cust_id}_${record.user_id}`;
          }}
          loading={loading}
+          onRow={(record: ICustFollow) => {
+            if (
+              record?.add_staff_tot &&
+              !isNaN(record?.add_staff_tot) &&
+              Number(record?.add_staff_tot) > 1
+            ) {
+              return {
+                style: {
+                  background: '#fcffe6',
+                },
+              };
+            }
+            return {};
+          }}
        >
          <Table.Column
            title="客户"
--- a/src/pages/DepartmentsList/index.tsx
+++ b/src/pages/DepartmentsList/index.tsx
@@ -1,4 +1,4 @@
-import { SearchBarPlugin, SearchBottonsCardPlugin } from '@/components/SearchBarPlugin';
+import { SearchBarPlugin } from '@/components/SearchBarPlugin';
 import { post } from '@/services/ajax';
 import { PageContainer } from '@ant-design/pro-components';
 import {
@@ -247,7 +247,8 @@ const DepartmentsList: React.FC = () => {
          </Form>
        </Modal> */}
        <div style={{ flexGrow: 1, minWidth: 0 }}>
-          <SearchBarPlugin>
+          <SearchBarPlugin
+            body={
              <Form autoComplete="off">
                <Row gutter={{ xs: 0, sm: 16 }}>
                  <Col xs={24} lg={12} xl={8}>
@@ -288,8 +289,8 @@ const DepartmentsList: React.FC = () => {
                  </Col>
                </Row>
              </Form>
-          </SearchBarPlugin>
-          <SearchBottonsCardPlugin>
+            }
+            footer={
              <Row justify={'center'}>
                <Button
                  type="primary"
@@ -318,7 +319,9 @@ const DepartmentsList: React.FC = () => {
                  同步员工
                </Button>
              </Row>
-          </SearchBottonsCardPlugin>
+            }
+          ></SearchBarPlugin>
+
          <Table
            tableLayout="fixed"
            size="middle"
--- a/src/pages/GroupList/components/GroupDetailContent.tsx
+++ b/src/pages/GroupList/components/GroupDetailContent.tsx
@@ -11,6 +11,7 @@ import {
 } from '@/pages/ChatLogs/ChatUtils';
 import { Spin } from 'antd';
 import { stringify } from 'qs';
+import styles from './index.mudule.scss';

 type Iprops = {
  record: IGroup;
@@ -51,7 +52,7 @@ export const GroupDetailContent: React.FC<Iprops> = (props) => {
              other.push(item);
            }
          });
-          // 对群员 创建者 > 管理员 > 普通成员 排序
+          // 对群员 群主 > 管理员 > 普通成员 排序
          setGroupMembersList([...owner, ...admin_list, ...other]);
        }
      }
@@ -62,6 +63,8 @@ export const GroupDetailContent: React.FC<Iprops> = (props) => {
    <Spin spinning={loading} style={{ minHeight: 400, display: 'block' }}>
      {groupMembersList.length ? (
        <div>
+          <div className={styles.groupMsgBox}>
+            <div className={styles.groupMsg}>
              <div style={{ marginBottom: 8, textIndent: '2em' }}>
                群主：
                {groupMembersObjRef.current[record?.owner as string]?.name}
@@ -70,7 +73,23 @@ export const GroupDetailContent: React.FC<Iprops> = (props) => {
                {adminList(record?.admin_list, groupMembersObjRef.current)}
              </div>
              <div style={{ marginBottom: 8 }}>创建时间：{record?.create_time}</div>
-          <div style={{ textIndent: '1em' }}>群公告：{record?.notice}</div>
+            </div>
+            <div className={styles.notice}>
+              <div style={{ textIndent: '1em' }}>
+                <div
+                  style={{
+                    fontWeight: 'bold',
+                    borderBlockEnd: '1px solid #eee',
+                    lineHeight: '34px',
+                  }}
+                >
+                  群公告
+                </div>
+                <div style={{ paddingTop: 4, paddingBottom: 4 }}>{record?.notice || '未设置'}</div>
+              </div>
+            </div>
+          </div>
+
          <div
            style={{
              fontWeight: 'bold',
--- a/src/pages/GroupList/components/index.mudule.scss
+++ b/src/pages/GroupList/components/index.mudule.scss
@@ -0,0 +1,15 @@
+.groupMsgBox {
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 100px;
+}
+
+.groupMsg {
+  flex: 1;
+}
+
+.notice {
+  width: 240px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+}
--- a/src/pages/GroupList/index.tsx
+++ b/src/pages/GroupList/index.tsx
@@ -1,4 +1,4 @@
-import { SearchBarPlugin, SearchBottonsCardPlugin } from '@/components/SearchBarPlugin';
+import { SearchBarPlugin } from '@/components/SearchBarPlugin';
 import { post } from '@/services/ajax';
 import { groupStatus } from '@/services/config';
 import { PageContainer } from '@ant-design/pro-components';
@@ -52,7 +52,8 @@ const GroupList: React.FC = () => {
  return (
    <PageContainer>
      <div style={{ flexGrow: 1, minWidth: 0 }}>
-        <SearchBarPlugin>
+        <SearchBarPlugin
+          body={
            <Form>
              <Row gutter={{ xs: 0, sm: 16 }}>
                <Col xs={24} sm={12} lg={8} xxl={6}>
@@ -68,9 +69,9 @@ const GroupList: React.FC = () => {
                  </Form.Item>
                </Col>
                <Col xs={24} sm={12} lg={8} xxl={6}>
-                <Form.Item label={<span style={{ textIndent: '1em' }}>创建者</span>}>
+                  <Form.Item label={<span style={{ textIndent: '2em' }}>群主</span>}>
                    <Input
-                    placeholder="请输入创建者"
+                      placeholder="请输入群主"
                      onChange={(e) => {
                        param.owner = e.target.value.trim();
                      }}
@@ -129,8 +130,8 @@ const GroupList: React.FC = () => {
                </Col>
              </Row>
            </Form>
-        </SearchBarPlugin>
-        <SearchBottonsCardPlugin>
+          }
+          footer={
            <Row justify={'center'}>
              <Button
                type="primary"
@@ -142,7 +143,9 @@ const GroupList: React.FC = () => {
                搜索
              </Button>
            </Row>
-        </SearchBottonsCardPlugin>
+          }
+        />
+
        <Table
          tableLayout="fixed"
          size="middle"
@@ -192,7 +195,7 @@ const GroupList: React.FC = () => {
            }}
          />
          <Table.Column
-            title="创建者"
+            title="群主"
            width={120}
            render={(v, r: IGroup) => {
              return <>{r?.staff_name}</>;
--- a/src/pages/Workbench/index.module.scss
+++ b/src/pages/Workbench/index.module.scss
@@ -1,9 +1,17 @@
+.dataSumBox {
+  display: flex;
+}
+
 .dataSum {
  margin-bottom: 24px;
  padding: 24px;
  color: #000;
  background-color: #fff;
  border-radius: 8px;
+
+  &:last-child {
+    margin-bottom: 12px;
+  }
 }

 .dataItem {
@@ -20,6 +28,7 @@

 .dataIconBox {
  display: flex;
+  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 64px;
@@ -35,8 +44,8 @@
 }

 .dataCount {
-  font-size: 26px;
  font-weight: 500;
+  font-size: 26px;
 }

 .dataCardBox {
@@ -51,3 +60,30 @@
  border: 1px solid #ddd;
  border-radius: 12px;
 }
+
+@media only screen and (max-width: 768px) {
+  .dataSumBox,
+  .dataCardBox {
+    flex-direction: column;
+  }
+
+  .dataItem {
+    display: flex;
+    width: 100%;
+    padding-bottom: 12px;
+    border-right: none;
+
+    &:last-child {
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  .dataCard {
+    margin-bottom: 12px;
+  }
+
+  .dataSum {
+    margin-bottom: 16px;
+  }
+}
--- a/src/pages/Workbench/index.tsx
+++ b/src/pages/Workbench/index.tsx
@@ -99,7 +99,7 @@ const Workbench: React.FC = () => {
          <span style={{ fontSize: 18 }}>数据总览</span>
          {/* <span style={{ color: '#999' }}>更新时间：2022-12-12 23:30:30</span> */}
        </div>
-        <div style={{ display: 'flex' }}>
+        <div className={styles.dataSumBox}>
          <DataSumItemCard
            title="客户数量"
            content="全部客户数量(含重复)"