@tuya-sat/sdf-main-sdk 0.0.1-beta.1

package/src/components/BHeaderUser/components/Badge/components/Notice/table/index.tsx

@@ -0,0 +1,184 @@
+import { Table, Typography } from 'antd';
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSaasInfo } from '@/hooks';
+import styles from '../index.module.less';
+import Read from './read';
+import { eventEmiter, eventNames } from '@/utils';
+
+const { Text, Link } = Typography;
+
+const NoticeTable = (props) => {
+  const { t } = useTranslation();
+  const { saasIdInfoList } = useSaasInfo();
+
+  // 触发每条消息的已读
+  const {
+    selectedRowKeys,
+    setSelectedRowKeys,
+    loading,
+    list,
+    total,
+    pageSize,
+    current,
+    setCurrent,
+    setPageSize,
+    getData,
+  } = props;
+
+  const [dataList, setDataList] = useState(list);
+  useEffect(() => {
+    setDataList(list);
+  }, [list]);
+  const columns = [
+    {
+      title: t('notice.table.column.content'),
+      dataIndex: 'message_content',
+      width: '40%',
+      render: (text, record) => {
+        if (
+          record.action_url &&
+          record.action_url.includes('tuyaSmart://microApp')
+        ) {
+          const queryString = record.action_url.replace(
+            'tuyaSmart://microApp?',
+            ''
+          );
+          const searchParams = new URLSearchParams(queryString);
+          const universal_id = searchParams.get('universalId');
+          const path = searchParams.get('path');
+          const query = searchParams.get('query');
+
+          return (
+            <Text
+              ellipsis={{ tooltip: record.message_content }}
+              style={{ color: 'var(--ant-primary-color)', cursor: 'pointer' }}
+              onClick={() => {
+                let pathUrl = '';
+                if (path) {
+                  pathUrl = path;
+                  if (atob(query)) {
+                    pathUrl += `?${atob(query)}`;
+                  }
+                }
+                const appId =
+                  saasIdInfoList.find(
+                    (item) => item.universal_id === universal_id
+                  ).oem_micro_app_id || '';
+                if (appId) {
+                  window.open(
+                    `${window.location.origin}/apps/${appId}${pathUrl}`
+                  );
+                }
+              }}
+            >
+              {record.message_content}
+            </Text>
+          );
+        } else {
+          return (
+            <Text ellipsis={{ tooltip: record.message_content }}>
+              {record.message_content}
+            </Text>
+          );
+        }
+      },
+    },
+    {
+      title: t('notice.table.column.status'),
+      dataIndex: 'read_status',
+      render: (text) =>
+        text === '0'
+          ? t('notice.table.render.status.unread')
+          : t('notice.table.render.status.read'),
+    },
+    {
+      title: t('notice.table.column.type'),
+      dataIndex: 'message_type',
+      render: (text) =>
+        text === '1'
+          ? t('notice.typeSelect.alert')
+          : t('notice.typeSelect.message'),
+    },
+    {
+      title: t('notice.table.column.source'),
+      render: (text, record) => {
+        if (record.micro_universal_id) {
+          return (
+            <Link
+              onClick={() => {
+                const appId =
+                  saasIdInfoList.find(
+                    (item) => item.universal_id === record.micro_universal_id
+                  ).oem_micro_app_id || '';
+                appId && window.open(`${window.location.origin}/apps/${appId}`);
+              }}
+            >
+              {record.source_name}
+            </Link>
+          );
+        } else {
+          return <Text>{record.source_name}</Text>;
+        }
+      },
+    },
+    {
+      title: t('notice.table.column.time'),
+      dataIndex: 'create_time',
+      width: '170px',
+      render: (text, record) => {
+        return rowKey === record.message_id ? (
+          <Read record={record} setDataList={setDataList} />
+        ) : (
+          <Text className={styles.action}>{text}</Text>
+        );
+      },
+    },
+  ];
+
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: (selectedRowKeys) => {
+      console.log('selectedRowKeys', selectedRowKeys.length);
+      setSelectedRowKeys(selectedRowKeys);
+    },
+  };
+  const [rowKey, setRowKey] = useState(null);
+  return (
+    <Table
+      rowKey="message_id"
+      rowSelection={rowSelection}
+      columns={columns}
+      dataSource={dataList}
+      sticky
+      loading={loading}
+      scroll={{ y: '560px' }}
+      onRow={(record) => {
+        return {
+          onMouseEnter: () => {
+            setRowKey(record.message_id);
+          }, // 鼠标移入行
+          onMouseLeave: () => {
+            setRowKey(null);
+          },
+        };
+      }}
+      pagination={{
+        total,
+        current,
+        pageSize,
+        showSizeChanger: true,
+        showQuickJumper: true,
+        pageSizeOptions: ['10', '20', '40', '50'],
+        onChange: (current: number, pageSize: number) => {
+          setCurrent(current);
+          setPageSize(pageSize);
+          getData(pageSize, current);
+          eventEmiter.emit(eventNames.HIDE_MSG_TOOL);
+        },
+      }}
+    />
+  );
+};
+
+export default NoticeTable;

package/src/components/BHeaderUser/components/Badge/components/Notice/table/read.tsx

@@ -0,0 +1,67 @@
+import { Typography, Divider, Popconfirm } from 'antd';
+import cx from 'classnames';
+import styles from '../index.module.less';
+import { useTranslation } from 'react-i18next';
+import { readStatus, noticeDelete } from '../hooks';
+import EventBus from '@/utils/eventBus';
+import { EVENT_NOTICE } from '@/constant';
+
+const { Text, Link } = Typography;
+const Read = ({ record, setDataList }) => {
+  const { t } = useTranslation();
+
+  const changItem = (read_status: string) => {
+    setDataList((prev) => {
+      const newList = prev.map((item) => {
+        if (item.message_id === record.message_id) {
+          item.read_status = read_status;
+        }
+        return item;
+      });
+      return newList;
+    });
+    setTimeout(() => {
+      EventBus.dispatchEvent(EVENT_NOTICE);
+    }, 500);
+  };
+  const markStatus = () => {
+    if (record.read_status == 0) {
+      readStatus('1', [record.message_id]).then(() => changItem('1'));
+    } else {
+      readStatus('0', [record.message_id]).then(() => changItem('0'));
+    }
+  };
+
+  const del = () => {
+    noticeDelete([record.message_id]).then(() => {
+      setDataList((prev) =>
+        prev.filter((item) => item.message_id !== record.message_id)
+      );
+      if (record.read_status == 0) {
+        setTimeout(() => {
+          EventBus.dispatchEvent(EVENT_NOTICE);
+        }, 500);
+      }
+    });
+  };
+  return (
+    <>
+      <Link className={styles.action} onClick={() => markStatus()}>
+        {record.read_status == 0
+          ? t('notice.table.hover.read')
+          : t('notice.table.hover.unread')}
+      </Link>
+      <Divider type="vertical" />
+      <Popconfirm title={t('notice.table.delTip')} onConfirm={() => del()}>
+        <Text
+          className={cx(styles.action)}
+          style={{ cursor: 'pointer' }}
+          type="danger"
+        >
+          {t('notice.table.hover.del')}
+        </Text>
+      </Popconfirm>
+    </>
+  );
+};
+export default Read;

package/src/components/BHeaderUser/components/Badge/components/Notice/tools/index.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useMemo, useEffect } from 'react';
+import { Modal, Typography } from 'antd';
+
+import eventBus from '@/utils/eventBus';
+import { EVENT_NOTICE } from '@/constant';
+import { useTranslation } from 'react-i18next';
+import { readStatus, noticeDelete, useReadCount } from '../hooks';
+
+const { Link, Text } = Typography;
+import styles from '../index.module.less';
+import classnames from 'classnames';
+import { eventEmiter, eventNames } from '@/utils';
+
+interface Iprops {
+  pageSize: number;
+  selectedRowKeys: string[];
+  setSelectedRowKeys: (selectedRowKeys: string[]) => void;
+  getData: (page: number, pageSize: number) => void;
+}
+const Tools = ({
+  selectedRowKeys,
+  getData,
+  setSelectedRowKeys,
+  pageSize,
+}: Iprops) => {
+  const { t } = useTranslation();
+
+  const [count] = useReadCount();
+
+  const resultBack = () => {
+    setTimeout(() => {
+      getData(pageSize, 1);
+      setSelectedRowKeys([]);
+      eventBus.dispatchEvent(EVENT_NOTICE);
+    }, 500);
+  };
+
+  useEffect(() => {
+    eventEmiter.addListener(eventNames.HIDE_MSG_TOOL, () => {
+      setSelectedRowKeys([]);
+    });
+  }, []);
+
+  const onDelete = useCallback(async () => {
+    const onOk = async () => {
+      const result = await noticeDelete(selectedRowKeys);
+      result && resultBack();
+    };
+    Modal.confirm({
+      title: t('notice.tools.popconfirm.title'),
+      content: t('notice.tools.popconfirm.content'),
+      okText: t('notice.tools.popconfirm.ok'),
+      onOk: () => onOk(),
+      cancelText: t('notice.tools.popconfirm.cancel'),
+    });
+  }, [getData, selectedRowKeys]);
+
+  const onReadStatus = useCallback(
+    async (type: string) => {
+      const result = await readStatus(type, selectedRowKeys);
+      result && resultBack();
+    },
+    [getData, selectedRowKeys]
+  );
+
+  const selectNone = () => {
+    setSelectedRowKeys([]);
+  };
+
+  const checked = useMemo(() => {
+    return (
+      <div className={classnames(styles.checked, 'main-notice-tools-bg')}>
+        <div className={styles['checked-left']}>
+          <Text style={{ marginLeft: '16px' }}>
+            {t('notice.tools.itemsNums', {
+              num: selectedRowKeys.length,
+            })}
+          </Text>
+
+          <Link style={{ marginLeft: '16px' }} onClick={selectNone}>
+            {t('notice.tools.cancelSelect')}
+          </Link>
+        </div>
+        <div className={styles['checked-right']}>
+          <Link
+            style={{ marginRight: '16px' }}
+            onClick={() => onReadStatus('1')}
+          >
+            {t('notice.tools.pread')}
+          </Link>
+          <Link
+            style={{ marginRight: '16px' }}
+            onClick={() => onReadStatus('0')}
+          >
+            {t('notice.tools.punread')}
+          </Link>
+          <Text
+            style={{ marginRight: '16px', cursor: 'pointer' }}
+            type="danger"
+            onClick={() => onDelete()}
+          >
+            {t('notice.tools.pdelete')}
+          </Text>
+        </div>
+      </div>
+    );
+  }, [onDelete, onReadStatus]);
+
+  return (
+    <div className={styles.tools}>
+      {selectedRowKeys && selectedRowKeys.length > 0 && checked}
+    </div>
+  );
+};
+
+export default Tools;

package/src/components/BHeaderUser/components/Badge/index.module.less

@@ -0,0 +1,99 @@
+// 单行
+.single-warp() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 两行
+.multi-warp {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.resetPopover {
+  :global {
+    .main-popover-inner-content {
+      padding: 0;
+    }
+
+    .main-list-header {
+      height: 32px;
+      line-height: 32px;
+      padding: 0;
+      font-weight: 500;
+      font-size: 14px;
+      padding-left: 20px;
+    }
+
+    .main-spin-nested-loading {
+      padding: 0 20px;
+    }
+
+    .main-list-item {
+      height: 79px;
+    }
+  }
+}
+
+.resetList {
+  :global {
+    .main-list-item-meta-title {
+      font-size: 12px;
+      .single-warp();
+    }
+
+    .main-list-item-meta-description {
+      font-size: 14px;
+      font-weight: 400;
+      .multi-warp();
+    }
+  }
+}
+
+.multiple {
+  :global {
+    .main-badge-multiple-words {
+      padding: 0 4px;
+    }
+  }
+}
+
+.iconMargin {
+  margin-right: 5px;
+}
+
+.circle {
+  height: 24px;
+  .icon {
+    cursor: pointer;
+    color: #555;
+    &:hover {
+      color: rgb(24, 144, 255);
+    }
+  }
+}
+
+.footer {
+  height: 18px;
+  display: flex;
+  align-self: center;
+  justify-content: center;
+
+  span {
+    cursor: pointer;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+.wrap-badge {
+  height: 24px;
+  margin-left: 24px;
+  line-height: 24px;
+  margin-left: 24px;
+}

package/src/components/BHeaderUser/components/Badge/index.tsx

@@ -0,0 +1,179 @@
+import { useEffect, useState } from 'react';
+import { Badge, List, Popover, Typography } from 'antd';
+import cn from 'classnames';
+import { useHistory, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import IconFont from '@/components/IconFont';
+import EventBus from '@/utils/eventBus';
+import { useSaasInfo } from '@/hooks';
+import { EVENT_NOTICE } from '@/constant';
+import {
+  useReadCount,
+  useNoticeList,
+  Inotice,
+} from '@/components/BHeaderUser/components/Badge/components/Notice/hooks';
+
+import styles from './index.module.less';
+
+const { Text } = Typography;
+
+const Notice = () => {
+  const { t } = useTranslation();
+  const { saasIdInfoList } = useSaasInfo();
+
+  const [count, getReadCount] = useReadCount();
+
+  const { list, getData } = useNoticeList('', '', '0', 10);
+
+  const [visible, setVisible] = useState(false);
+
+  const history = useHistory();
+
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    const cb = () => {
+      getReadCount();
+      getData(10, 1);
+    };
+    EventBus.addEventListener(EVENT_NOTICE, cb);
+    return () => {
+      EventBus.removeEventListener(EVENT_NOTICE, cb);
+    };
+  }, []);
+
+  const jumpNotice = () => {
+    // 点击后关闭弹窗
+    setVisible(false);
+    if (pathname === '/application/notification') return;
+
+    if (pathname === '/application/setting') {
+      history.replace('/application/notification');
+    } else {
+      history.push('/application/notification');
+    }
+  };
+
+  const onVisibleChange = (visible: boolean) => {
+    setVisible(visible);
+  };
+
+  const offset = (count: number): [number, number] => {
+    if (count <= 99 && count > 9) {
+      return [3, 0];
+    }
+    if (count > 99) {
+      return [8, 0];
+    }
+    return [-1, 0];
+  };
+
+  const Desc = ({ record }) => {
+    if (
+      record.action_url &&
+      record.action_url.includes('tuyaSmart://microApp')
+    ) {
+      const queryString = record.action_url.replace(
+        'tuyaSmart://microApp?',
+        ''
+      );
+      const searchParams = new URLSearchParams(queryString);
+      const universal_id = searchParams.get('universalId');
+      const path = searchParams.get('path');
+      const query = searchParams.get('query');
+      return (
+        <Text
+          ellipsis
+          style={{ color: 'var(--ant-primary-color)', cursor: 'pointer' }}
+          onClick={() => {
+            let pathUrl = '';
+            if (path) {
+              pathUrl = path;
+              if (atob(query)) {
+                pathUrl += `?${atob(query)}`;
+              }
+            }
+            const appId =
+              saasIdInfoList.find((item) => item.universal_id === universal_id)
+                .oem_micro_app_id || '';
+            appId &&
+              window.open(`${window.location.origin}/apps/${appId}${pathUrl}`);
+          }}
+        >
+          {record.message_content}
+        </Text>
+      );
+    } else {
+      return <Text ellipsis>{record.message_content}</Text>;
+    }
+  };
+
+  const content = (
+    <List
+      className={cn(styles.resetList, 'main-app-message')}
+      header={
+        <span className={'main-app-message-title'}>
+          {t('notice.badge.title')}
+        </span>
+      }
+      itemLayout="horizontal"
+      dataSource={(list || []).slice(0, 4)}
+      footer={
+        <div className={cn(styles.footer, 'main-app-message-footer')}>
+          <span onClick={() => jumpNotice()}>{t('notice.badge.message')}</span>
+        </div>
+      }
+      renderItem={(item: Inotice) => (
+        <List.Item>
+          <List.Item.Meta
+            title={
+              <>
+                【
+                {item.message_type === '1'
+                  ? t('notice.typeSelect.alert')
+                  : t('notice.typeSelect.message')}
+                】{item.create_time}
+              </>
+            }
+            description={<Desc record={item} />}
+          />
+        </List.Item>
+      )}
+    />
+  );
+
+  return (
+    <Popover
+      content={content}
+      trigger="hover"
+      visible={visible}
+      mouseLeaveDelay={0.3}
+      arrowPointAtCenter
+      placement="bottomRight"
+      onVisibleChange={onVisibleChange}
+      overlayStyle={{ width: 400 }}
+      overlayClassName={styles.resetPopover}
+    >
+      <div className={styles['wrap-badge']}>
+        <Badge
+          count={count}
+          size="small"
+          className={cn(styles.circle, {
+            [styles.multiple]: count > 9,
+            [styles.iconMargin]: count > 99,
+          })}
+          offset={offset(count)}
+        >
+          <a onClick={() => jumpNotice()}>
+            <IconFont
+              type="icon-bell"
+              className={cn(styles.icon, 'main-nav-text-color')}
+            />
+          </a>
+        </Badge>
+      </div>
+    </Popover>
+  );
+};
+
+export default Notice;