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

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

@@ -0,0 +1,56 @@
+import { FC, useCallback } from 'react';
+import { Menu, Dropdown } from 'antd';
+import { GlobalOutlined, DownOutlined } from '@ant-design/icons';
+import { langList, gLang } from '@/lang/utils';
+import Cookies from 'js-cookie';
+import styles from './index.module.less';
+import { useTranslation } from 'react-i18next';
+interface Lang {
+  label: string;
+  value: string;
+}
+export interface IBSwitchLangProps {
+  lang?: Lang[];
+  className?: string;
+  toChangeLang?: (lang: string) => void;
+}
+
+const BSwitchLang: FC<IBSwitchLangProps> = (props) => {
+  const { className, toChangeLang } = props;
+  const { t } = useTranslation();
+  const onLangChange = useCallback((e) => {
+    if (Cookies.get('main-i18next') !== e.key) {
+      toChangeLang(e.key);
+    }
+  }, []);
+  const supported_language = window._SDF?.saas?.supported_language;
+
+  return (
+    <div>
+      {langList().length === 1 ? null : (
+        <Dropdown
+          className={className}
+          overlay={
+            <Menu onClick={onLangChange}>
+              {langList().map((item) => (
+                <Menu.Item key={item.value}>{item.label}</Menu.Item>
+              ))}
+            </Menu>
+          }
+        >
+          <span className={styles.switchLang}>
+            <GlobalOutlined style={{ fontSize: '22px', margin: '0px 10px' }} />
+            <span style={{ marginRight: 10, whiteSpace: 'nowrap' }}>
+              {supported_language
+                ? supported_language[gLang()]
+                : t('login.lang')}
+            </span>
+            <DownOutlined />
+          </span>
+        </Dropdown>
+      )}
+    </div>
+  );
+};
+
+export default BSwitchLang;

package/src/components/BHeaderUser/components/Badge/components/Notice/Drawer/Content.tsx

@@ -0,0 +1,199 @@
+import { Tabs, Switch, Checkbox, Row, Col, Space, Button } from 'antd';
+import cx from 'classnames';
+import styled from './index.module.less';
+const { TabPane } = Tabs;
+
+const Content = () => {
+  const callback = (key) => {};
+  function CheckboxonChange(e) {}
+  const onChange = (checked) => {};
+  return (
+    <Tabs defaultActiveKey="1" onChange={callback}>
+      <TabPane tab="告警消息" key="1">
+        <Space direction="vertical" size={24}>
+          <Row>
+            <Col>
+              <span className={styled['drawer-tab-title']}>会议通知</span>
+              <Switch defaultChecked onChange={onChange} />
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <Checkbox
+                className={cx(
+                  styled['drawer-tab-check-title'],
+                  'main-app-message-drawer-tab-check-title',
+                )}
+                onChange={CheckboxonChange}
+              >
+                App Push
+              </Checkbox>
+              <span
+                className={cx(
+                  styled['drawer-tab-check-describe'],
+                  'main-app-message-drawer-tab-check-describe',
+                )}
+              >
+                消息通过 App Push 发送给用户
+              </span>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <Checkbox onChange={CheckboxonChange}>邮件通知</Checkbox>
+              <span
+                className={cx(
+                  styled['drawer-tab-check-describe'],
+                  'main-app-message-drawer-tab-check-describe',
+                )}
+              >
+                消息通过邮件发送给用户
+              </span>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <Checkbox onChange={CheckboxonChange}>短信通知</Checkbox>
+              <span
+                className={cx(
+                  styled['drawer-tab-check-describe'],
+                  'main-app-message-drawer-tab-check-describe',
+                )}
+              >
+                消息通过短信发送给用户
+              </span>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <span className={styled['drawer-tab-title']}>
+                IoT平台消息通知
+              </span>
+              <Switch defaultChecked onChange={onChange} />
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <span className={styled['drawer-tab-title']}>设备告警</span>
+              <Switch defaultChecked onChange={onChange} />
+            </Col>
+          </Row>
+        </Space>
+      </TabPane>
+      <TabPane tab="业务消息" key="2">
+        <Space direction="vertical" size={24}>
+          <Row>
+            <Col>
+              <span className={styled['drawer-tab-title']}>会议通知</span>
+              <Switch defaultChecked onChange={onChange} />
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <Checkbox
+                className={cx(
+                  styled['drawer-tab-check-title'],
+                  'main-app-message-drawer-tab-check-title',
+                )}
+                onChange={CheckboxonChange}
+              >
+                App Push
+              </Checkbox>
+              <span
+                className={cx(
+                  styled['drawer-tab-check-describe'],
+                  'main-app-message-drawer-tab-check-describe',
+                )}
+              >
+                消息通过 App Push 发送给用户
+              </span>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <Checkbox onChange={CheckboxonChange}>邮件通知</Checkbox>
+              <span
+                className={cx(
+                  styled['drawer-tab-check-describe'],
+                  'main-app-message-drawer-tab-check-describe',
+                )}
+              >
+                消息通过邮件发送给用户
+              </span>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <Checkbox onChange={CheckboxonChange}>短信通知</Checkbox>
+              <span
+                className={cx(
+                  styled['drawer-tab-check-describe'],
+                  'main-app-message-drawer-tab-check-describe',
+                )}
+              >
+                消息通过短信发送给用户
+              </span>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <span className={styled['drawer-tab-title']}>
+                场景自动化/模板
+              </span>
+              <Switch defaultChecked onChange={onChange} />
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <Checkbox
+                className={cx(
+                  styled['drawer-tab-check-title'],
+                  'main-app-message-drawer-tab-check-title',
+                )}
+                onChange={CheckboxonChange}
+              >
+                App Push
+              </Checkbox>
+              <span
+                className={cx(
+                  styled['drawer-tab-check-describe'],
+                  'main-app-message-drawer-tab-check-describe',
+                )}
+              >
+                消息通过 App Push 发送给用户
+              </span>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <Checkbox onChange={CheckboxonChange}>邮件通知</Checkbox>
+              <span
+                className={cx(
+                  styled['drawer-tab-check-describe'],
+                  'main-app-message-drawer-tab-check-describe',
+                )}
+              >
+                消息通过邮件发送给用户
+              </span>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <Checkbox onChange={CheckboxonChange}>短信通知</Checkbox>
+              <span
+                className={cx(
+                  styled['drawer-tab-check-describe'],
+                  'main-app-message-drawer-tab-check-describe',
+                )}
+              >
+                消息通过短信发送给用户
+              </span>
+            </Col>
+          </Row>
+        </Space>
+      </TabPane>
+    </Tabs>
+  );
+};
+
+export default Content;

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

@@ -0,0 +1,11 @@
+.drawer-tab-title {
+  font-size: 16px;
+  margin-right: 16px;
+  font-weight: 500;
+}
+.drawer-tab-check-describe,
+.drawer-tab-check-title {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+}

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

@@ -0,0 +1,27 @@
+import IconFont from '@/components/IconFont';
+import { Drawer as DrawerAntd } from 'antd';
+import Content from './Content';
+
+const Drawer = ({ setVisible, visible }) => {
+  const onClose = () => {
+    setVisible(false);
+  };
+  return (
+    <DrawerAntd
+      title="消息配置"
+      placement="right"
+      closable={false}
+      width={520}
+      onClose={onClose}
+      visible={visible}
+      extra={
+        <div onClick={onClose} style={{ transform: 'rotate(45deg)' }}>
+          <IconFont type="icon-tianjia"></IconFont>
+        </div>
+      }
+    >
+      <Content />
+    </DrawerAntd>
+  );
+};
+export default Drawer;

package/src/components/BHeaderUser/components/Badge/components/Notice/hooks.ts

@@ -0,0 +1,104 @@
+import { useState, useEffect } from 'react';
+import { api, URLS } from '@/api';
+
+export interface Inotice {
+  message_id: string; // 通知消息 ID
+  message_content: string; // 消息内容
+  read_status: string; // 消息状态
+  message_category: string; // 消息来源
+  message_category_description: string; // 消息来源描述
+  message_type: string; // 通知消息类型
+  message_type_description: string; //消息类型描述
+  create_time: string; // 创建时间
+}
+
+export interface Ipagination {
+  pageSize: number;
+  current: number;
+  total: number;
+}
+
+/**
+ * get请求 拼接url参数地址
+ * @param url 原url地址
+ * @param body 传入的参数
+ * @returns 返回拼接的url地址
+ */
+function getTransUrl(url, body: Record<string, any>) {
+  const queryArr = Object.keys(body)
+    .map((key) => (body[key] !== void 0 ? `${key}=${body[key]}` : null))
+    .filter((v) => v);
+  if (url.indexOf('?') !== -1) {
+    url = `${url}&${queryArr.join('&')}`;
+  } else {
+    url = `${url}?${queryArr.join('&')}`;
+  }
+  return url;
+}
+
+export const useReadCount = () => {
+  const [count, setCount] = useState<number>(0);
+  const [d, setD] = useState<any>({});
+  const getData = async () => {
+    const count = (await api.get(
+      `${URLS.NOTICE_UNREAD_COUNT_GET}?message_type=`
+    )) as any;
+    setCount(count || 0);
+    setD({});
+  };
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return [count, getData] as const;
+};
+
+export const useNoticeList = (
+  type: string,
+  origin: string,
+  status: string,
+  pageSize: number
+) => {
+  const [list, setList] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const [total, setTotal] = useState(0);
+
+  const getData = async (pageSize: number, current: number) => {
+    const url = getTransUrl(URLS.NOTICE_QUERY_LIST_GET, {
+      messageType: type,
+      microAppCode: origin,
+      read_flag: status,
+      page_no: current,
+      page_size: pageSize,
+    });
+    setLoading(true);
+    const result = await api.get(url);
+    setLoading(false);
+    setList(result?.data || []);
+    setTotal(result?.total || 0);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    getData(pageSize, 1);
+  }, [type, origin, status]);
+
+  return { loading, list, getData, total } as const;
+};
+
+export const noticeDelete = async (checked: string[]) => {
+  const result = await api.delete(
+    `${URLS.NOTICE_DELETE_DELETE}${checked.join(',')}`
+  );
+  return result;
+};
+
+export const readStatus = async (read_flag: string, checked: string[]) => {
+  const result = await api.put(
+    `${URLS.NOTICE_HANDLE_READ_PUT}/${read_flag}?message_ids=${checked.join(
+      ','
+    )}`
+  );
+  return result;
+};

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

@@ -0,0 +1,70 @@
+.notice {
+  padding: 0px 32px 24px;
+  width: 1000px;
+  height: calc(100% - 64px);
+  margin: 32px auto;
+  overflow-y: auto;
+
+  .header {
+    display: flex;
+    line-height: 56px;
+    justify-items: center;
+    align-items: center;
+    h3 {
+      margin-left: 10px;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 24px;
+    }
+  }
+
+  .selected {
+    overflow: hidden;
+    margin-bottom: 16px;
+    &-left {
+      float: left;
+      div {
+        margin-right: 8px;
+      }
+    }
+    &-right {
+      float: right;
+      button {
+        margin-left: 8px;
+      }
+    }
+  }
+
+  .tools {
+    .noChecked {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .checked {
+      overflow: hidden;
+      width: 100%;
+      height: 54px;
+      line-height: 54px;
+      margin: 0 0 16px;
+      &-left {
+        float: left;
+        button {
+          margin-right: 8px;
+        }
+      }
+      &-right {
+        float: right;
+        button {
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+
+  .action {
+    height: 22px;
+    line-height: 22px;
+    display: inline-block;
+  }
+}

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

@@ -0,0 +1,184 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Table from './table';
+import Tools from './tools';
+import Back from '@/components/Back';
+
+import { useNoticeList } from './hooks';
+
+import styles from './index.module.less';
+import cx from 'classnames';
+import { Button, Select, Form } from 'antd';
+const { Option } = Select;
+
+const XTitle = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.header}>
+      <Back />
+      <span style={{ fontSize: '16px', fontWeight: '600', marginLeft: '10px' }}>
+        {t('notice.title')}
+      </span>
+    </div>
+  );
+};
+
+const MessageTypeSelect = ({ setType }) => {
+  const { t } = useTranslation();
+  return (
+    <Form.Item label={t('notice.typeSelect.placeholder')}>
+      <Select
+        dropdownMatchSelectWidth={false}
+        style={{ width: 114 }}
+        defaultValue=""
+        onChange={(value) => setType(value)}
+      >
+        <Option value="">{t('notice.typeSelect.all')}</Option>
+        <Option value="1">{t('notice.typeSelect.alert')}</Option>
+        <Option value="3">{t('notice.typeSelect.message')}</Option>
+      </Select>
+    </Form.Item>
+  );
+};
+
+const apps = () => {
+  const entry_info = window?._SDF?.saasInfo?.entry_info || {};
+  const microApps = window?._SDF?.saasInfo?.apps;
+  if (entry_info?.entry_mode === 'normal') {
+    return entry_info.entries.map((entry) => {
+      return {
+        ...entry,
+        microAppCode: microApps.find(
+          (app) => app.oem_micro_app_id === entry.oem_micro_app_id,
+        ).microAppCode,
+      };
+    });
+  } else {
+    let entries = [];
+    entry_info.entries.forEach((entry) => {
+      entries = [...entries, ...entry.sub_entry_list];
+    });
+    return entries.map((entry) => {
+      return {
+        ...entry,
+        microAppCode: microApps.find(
+          (app) => app.oem_micro_app_id === entry.oem_micro_app_id,
+        ).microAppCode,
+      };
+    });
+  }
+};
+
+const MessageOriginSelect = ({ setOrigin }) => {
+  const { t } = useTranslation();
+  return (
+    <Form.Item label={t('notice.originSelect.placeholder')}>
+      <Select
+        style={{ width: 114 }}
+        dropdownMatchSelectWidth={false}
+        defaultValue=""
+        onChange={(value) => setOrigin(value)}
+      >
+        <Option value="">{t('notice.originSelect.all')}</Option>
+
+        {apps().map((app) => {
+          return (
+            <Option key={app.microAppCode} value={app.microAppCode}>
+              {app.entry_name}
+            </Option>
+          );
+        })}
+      </Select>
+    </Form.Item>
+  );
+};
+
+const MessageStatusSelect = ({ setStatus }) => {
+  const { t } = useTranslation();
+  return (
+    <Form.Item label={t('notice.StatusSelect.placeholder')}>
+      <Select
+        style={{ width: 114 }}
+        defaultValue="0"
+        onChange={(value) => setStatus(value)}
+      >
+        <Option value="">{t('notice.StatusSelect.all')}</Option>
+        <Option value="1">{t('notice.StatusSelect.readed')}</Option>
+        <Option value="0">{t('notice.StatusSelect.unread')}</Option>
+      </Select>
+    </Form.Item>
+  );
+};
+
+const MarkButtons = () => {
+  const { t } = useTranslation();
+  const onClick = () => {
+    //TODO 标记所有消息已读
+  };
+
+  return (
+    <div className={styles['selected-right']}>
+      <Button type="primary" onClick={onClick}>
+        {t('notice.buttons.read')}
+      </Button>
+    </div>
+  );
+};
+
+const SearchForm = ({ setType, setOrigin, setStatus }) => {
+  return (
+    <div className={styles.selected}>
+      <Form className={styles['selected-left']} layout="inline">
+        <MessageTypeSelect setType={setType} />
+        <MessageOriginSelect setOrigin={setOrigin} />
+        <MessageStatusSelect setStatus={setStatus} />
+      </Form>
+    </div>
+  );
+};
+
+const Notice = () => {
+  const [type, setType] = useState('');
+  const [origin, setOrigin] = useState('');
+  const [status, setStatus] = useState('0');
+  const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
+  const [current, setCurrent] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const { loading, list, getData, total } = useNoticeList(
+    type,
+    origin,
+    status,
+    pageSize,
+  );
+
+  return (
+    <div className={cx(styles.notice, 'main-app-notice')}>
+      <XTitle />
+      <SearchForm
+        setType={setType}
+        setOrigin={setOrigin}
+        setStatus={setStatus}
+      />
+      <Tools
+        pageSize={pageSize}
+        getData={getData}
+        selectedRowKeys={selectedRowKeys}
+        setSelectedRowKeys={setSelectedRowKeys}
+      />
+      <Table
+        list={list}
+        loading={loading}
+        total={total}
+        pageSize={pageSize}
+        setPageSize={setPageSize}
+        current={current}
+        setCurrent={setCurrent}
+        getData={getData}
+        selectedRowKeys={selectedRowKeys}
+        setSelectedRowKeys={setSelectedRowKeys}
+      />
+    </div>
+  );
+};
+
+export default Notice;