feat: now client part supports multiple channels for the same type (#50)

2023-05-06 10:15:18 +08:00
parent 3a8d625201
commit 91725aeba7
16 changed files with 1070 additions and 131 deletions
@@ -16,6 +16,8 @@ import PasswordResetConfirm from './components/PasswordResetConfirm';
 import { UserContext } from './context/User';
 import { StatusContext } from './context/Status';
 import Message from './pages/Message';
+import Channel from './pages/Channel';
+import EditChannel from './pages/Channel/EditChannel';

 const Home = lazy(() => import('./pages/Home'));
 const About = lazy(() => import('./pages/About'));
@@ -107,6 +109,30 @@ function App() {
          </Suspense>
        }
      />
+      <Route
+        path='/channel'
+        element={
+          <PrivateRoute>
+            <Channel />
+          </PrivateRoute>
+        }
+      />
+      <Route
+        path='/channel/edit/:id'
+        element={
+          <Suspense fallback={<Loading></Loading>}>
+            <EditChannel />
+          </Suspense>
+        }
+      />
+      <Route
+        path='/channel/add'
+        element={
+          <Suspense fallback={<Loading></Loading>}>
+            <EditChannel />
+          </Suspense>
+        }
+      />
      <Route
        path='/message'
        element={
@@ -0,0 +1,333 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Label, Pagination, Table } from 'semantic-ui-react';
+import { Link } from 'react-router-dom';
+import { API, showError, showSuccess } from '../helpers';
+
+import { ITEMS_PER_PAGE } from '../constants';
+import { renderChannel, renderTimestamp } from '../helpers/render';
+
+const ChannelsTable = () => {
+  const [channels, setChannels] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [activePage, setActivePage] = useState(1);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [searching, setSearching] = useState(false);
+  const [user, setUser] = useState({ username: '', token: '' });
+
+  const loadChannels = async (startIdx) => {
+    const res = await API.get(`/api/channel/?p=${startIdx}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (startIdx === 0) {
+        setChannels(data);
+      } else {
+        let newChannels = channels;
+        newChannels.push(...data);
+        setChannels(newChannels);
+      }
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const onPaginationChange = (e, { activePage }) => {
+    (async () => {
+      if (activePage === Math.ceil(channels.length / ITEMS_PER_PAGE) + 1) {
+        // In this case we have to load more data and then append them.
+        await loadChannels(activePage - 1);
+      }
+      setActivePage(activePage);
+    })();
+  };
+
+  useEffect(() => {
+    loadChannels(0)
+      .then()
+      .catch((reason) => {
+        showError(reason);
+      });
+    loadUser()
+      .then()
+      .catch((reason) => {
+        showError(reason);
+      });
+  }, []);
+
+  const manageChannel = async (id, action, idx) => {
+    let data = { id };
+    let res;
+    switch (action) {
+      case 'delete':
+        res = await API.delete(`/api/channel/${id}/`);
+        break;
+      case 'enable':
+        data.status = 1;
+        res = await API.put('/api/channel/?status_only=true', data);
+        break;
+      case 'disable':
+        data.status = 2;
+        res = await API.put('/api/channel/?status_only=true', data);
+        break;
+    }
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('操作成功完成！');
+      let channel = res.data.data;
+      let newChannels = [...channels];
+      let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
+      if (action === 'delete') {
+        newChannels[realIdx].deleted = true;
+      } else {
+        newChannels[realIdx].status = channel.status;
+      }
+      setChannels(newChannels);
+    } else {
+      showError(message);
+    }
+  };
+
+  const renderStatus = (status) => {
+    switch (status) {
+      case 1:
+        return <Label basic>已启用</Label>;
+      case 2:
+        return (
+          <Label basic color='red'>
+            已禁用
+          </Label>
+        );
+      default:
+        return (
+          <Label basic color='grey'>
+            未知状态
+          </Label>
+        );
+    }
+  };
+
+  const searchChannels = async () => {
+    if (searchKeyword === '') {
+      // if keyword is blank, load files instead.
+      await loadChannels(0);
+      setActivePage(1);
+      return;
+    }
+    setSearching(true);
+    const res = await API.get(`/api/channel/search?keyword=${searchKeyword}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setChannels(data);
+      setActivePage(1);
+    } else {
+      showError(message);
+    }
+    setSearching(false);
+  };
+
+  const handleKeywordChange = async (e, { value }) => {
+    setSearchKeyword(value.trim());
+  };
+
+  const sortChannel = (key) => {
+    if (channels.length === 0) return;
+    setLoading(true);
+    let sortedChannels = [...channels];
+    sortedChannels.sort((a, b) => {
+      return ('' + a[key]).localeCompare(b[key]);
+    });
+    if (sortedChannels[0].id === channels[0].id) {
+      sortedChannels.reverse();
+    }
+    setChannels(sortedChannels);
+    setLoading(false);
+  };
+
+  const loadUser = async () => {
+    let res = await API.get(`/api/user/self`);
+    const { success, message, data } = res.data;
+    if (success) {
+      setUser(data);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+
+  const test = async (channel) => {
+    let res = await API.get(
+      `/push/${user.username}?token=${user.token}&channel=${channel}&title=消息推送服务&description=配置成功！`
+    );
+    const { success, message } = res.data;
+    if (success) {
+      showSuccess('测试消息已发送');
+    } else {
+      showError(message);
+    }
+  };
+
+  return (
+    <>
+      <Form onSubmit={searchChannels}>
+        <Form.Input
+          icon='search'
+          fluid
+          iconPosition='left'
+          placeholder='搜索通道的 ID 或名称 ...'
+          value={searchKeyword}
+          loading={searching}
+          onChange={handleKeywordChange}
+        />
+      </Form>
+
+      <Table basic>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortChannel('id');
+              }}
+            >
+              ID
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortChannel('name');
+              }}
+            >
+              名称
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortChannel('description');
+              }}
+            >
+              备注
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortChannel('type');
+              }}
+            >
+              类型
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortChannel('status');
+              }}
+            >
+              状态
+            </Table.HeaderCell>
+            <Table.HeaderCell
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                sortChannel('created_time');
+              }}
+            >
+              创建时间
+            </Table.HeaderCell>
+            <Table.HeaderCell>操作</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+
+        <Table.Body>
+          {channels
+            .slice(
+              (activePage - 1) * ITEMS_PER_PAGE,
+              activePage * ITEMS_PER_PAGE
+            )
+            .map((channel, idx) => {
+              if (channel.deleted) return <></>;
+              return (
+                <Table.Row key={channel.id}>
+                  <Table.Cell>{channel.id}</Table.Cell>
+                  <Table.Cell>{channel.name}</Table.Cell>
+                  <Table.Cell>
+                    {channel.description ? channel.description : '无备注信息'}
+                  </Table.Cell>
+                  <Table.Cell>{renderChannel(channel.type)}</Table.Cell>
+                  <Table.Cell>{renderStatus(channel.status)}</Table.Cell>
+                  <Table.Cell>
+                    {renderTimestamp(channel.created_time)}
+                  </Table.Cell>
+                  <Table.Cell>
+                    <div>
+                      <Button
+                        size={'small'}
+                        negative
+                        onClick={() => {
+                          manageChannel(channel.id, 'delete', idx).then();
+                        }}
+                      >
+                        删除
+                      </Button>
+                      <Button
+                        size={'small'}
+                        onClick={() => {
+                          test(channel.name).then();
+                        }}
+                      >
+                        测试
+                      </Button>
+                      <Button
+                        size={'small'}
+                        onClick={() => {
+                          manageChannel(
+                            channel.id,
+                            channel.status === 1 ? 'disable' : 'enable',
+                            idx
+                          ).then();
+                        }}
+                      >
+                        {channel.status === 1 ? '禁用' : '启用'}
+                      </Button>
+                      <Button
+                        size={'small'}
+                        as={Link}
+                        to={'/channel/edit/' + channel.id}
+                      >
+                        编辑
+                      </Button>
+                    </div>
+                  </Table.Cell>
+                </Table.Row>
+              );
+            })}
+        </Table.Body>
+
+        <Table.Footer>
+          <Table.Row>
+            <Table.HeaderCell colSpan='7'>
+              <Button
+                size='small'
+                as={Link}
+                to='/channel/add'
+                loading={loading}
+              >
+                添加新的通道
+              </Button>
+              <Pagination
+                floated='right'
+                activePage={activePage}
+                onPageChange={onPaginationChange}
+                size='small'
+                siblingRange={1}
+                totalPages={
+                  Math.ceil(channels.length / ITEMS_PER_PAGE) +
+                  (channels.length % ITEMS_PER_PAGE === 0 ? 1 : 0)
+                }
+              />
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Footer>
+      </Table>
+    </>
+  );
+};
+
+export default ChannelsTable;
@@ -18,6 +18,11 @@ const headerButtons = [
    to: '/message',
    icon: 'mail',
  },
+  {
+    name: '通道',
+    to: '/channel',
+    icon: 'sitemap',
+  },
  {
    name: '用户',
    to: '/user',
@@ -1,81 +1,16 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Button, Form, Label, Modal, Pagination, Table } from 'semantic-ui-react';
-import { API, openPage, showError, showSuccess, showWarning, timestamp2string } from '../helpers';
+import {
+  Button,
+  Form,
+  Label,
+  Modal,
+  Pagination,
+  Table,
+} from 'semantic-ui-react';
+import { API, openPage, showError, showSuccess, showWarning } from '../helpers';

 import { ITEMS_PER_PAGE } from '../constants';
-
-function renderChannel(channel) {
-  switch (channel) {
-    case 'email':
-      return <Label color='green'>邮件</Label>;
-    case 'test':
-      return (
-        <Label style={{ backgroundColor: '#2cbb00', color: 'white' }}>
-          微信测试号
-        </Label>
-      );
-    case 'corp_app':
-      return (
-        <Label style={{ backgroundColor: '#5fc9ec', color: 'white' }}>
-          企业微信应用号
-        </Label>
-      );
-    case 'corp':
-      return (
-        <Label style={{ backgroundColor: '#019d82', color: 'white' }}>
-          企业微信群机器人
-        </Label>
-      );
-    case 'lark':
-      return (
-        <Label style={{ backgroundColor: '#00d6b9', color: 'white' }}>
-          飞书群机器人
-        </Label>
-      );
-    case 'ding':
-      return (
-        <Label style={{ backgroundColor: '#007fff', color: 'white' }}>
-          钉钉群机器人
-        </Label>
-      );
-    case 'bark':
-      return (
-        <Label style={{ backgroundColor: '#ff3b30', color: 'white' }}>
-          Bark App
-        </Label>
-      );
-    case 'client':
-      return (
-        <Label style={{ backgroundColor: '#121212', color: 'white' }}>
-          WebSocket 客户端
-        </Label>
-      );
-    case 'telegram':
-      return (
-        <Label style={{ backgroundColor: '#29a9ea', color: 'white' }}>
-          Telegram 机器人
-        </Label>
-      );
-    case 'discord':
-      return (
-        <Label style={{ backgroundColor: '#404eed', color: 'white' }}>
-          Discord 群机器人
-        </Label>
-      );
-    case 'none':
-      return <Label>无</Label>;
-    default:
-      return <Label color='grey'>未知通道</Label>;
-  }
-}
-
-function renderTimestamp(timestamp) {
-  return (
-    <>
-      {timestamp2string(timestamp)}
-    </>
-  );
-}
+import { renderChannel, renderTimestamp } from '../helpers/render';

 function renderStatus(status) {
  switch (status) {
@@ -119,8 +54,8 @@ const MessagesTable = () => {
    title: '消息标题',
    description: '消息描述',
    content: '消息内容',
-    link: ''
-  });  // Message to be viewed
+    link: '',
+  }); // Message to be viewed
  const [viewModalOpen, setViewModalOpen] = useState(false);

  const loadMessages = async (startIdx) => {
@@ -277,7 +212,7 @@ const MessagesTable = () => {
          autoRefreshSecondsRef.current = 10;
        } else {
          autoRefreshSecondsRef.current -= 1;
-          setAutoRefreshSeconds(autoRefreshSeconds => autoRefreshSeconds - 1); // Important!
+          setAutoRefreshSeconds((autoRefreshSeconds) => autoRefreshSeconds - 1); // Important!
        }
      }, 1000);
    }
@@ -285,7 +220,6 @@ const MessagesTable = () => {
    return () => clearInterval(intervalId);
  }, [autoRefresh]);

-
  return (
    <>
      <Form onSubmit={searchMessages}>
@@ -405,16 +339,26 @@ const MessagesTable = () => {
        <Table.Footer>
          <Table.Row>
            <Table.HeaderCell colSpan='6'>
-              <Button size='small' loading={loading} onClick={() => {
-                refresh().then();
-              }}>
+              <Button
+                size='small'
+                loading={loading}
+                onClick={() => {
+                  refresh().then();
+                }}
+              >
                手动刷新
              </Button>
-              <Button size='small' loading={loading} onClick={() => {
-                setAutoRefresh(!autoRefresh);
-                setAutoRefreshSeconds(10);
-              }}>
-                {autoRefresh ? `自动刷新中（${autoRefreshSeconds} 秒后刷新）` : '自动刷新'}
+              <Button
+                size='small'
+                loading={loading}
+                onClick={() => {
+                  setAutoRefresh(!autoRefresh);
+                  setAutoRefreshSeconds(10);
+                }}
+              >
+                {autoRefresh
+                  ? `自动刷新中（${autoRefreshSeconds} 秒后刷新）`
+                  : '自动刷新'}
              </Button>
              <Pagination
                floated='right'
@@ -431,28 +375,33 @@ const MessagesTable = () => {
          </Table.Row>
        </Table.Footer>
      </Table>
-      <Modal
-        size='tiny'
-        open={viewModalOpen}
-      >
+      <Modal size='tiny' open={viewModalOpen}>
        <Modal.Header>{message.title ? message.title : '无标题'}</Modal.Header>
        <Modal.Content>
-          {message.description ? <p className={'quote'}>{message.description}</p> : ''}
+          {message.description ? (
+            <p className={'quote'}>{message.description}</p>
+          ) : (
+            ''
+          )}
          {message.content ? <p>{message.content}</p> : ''}
        </Modal.Content>
        <Modal.Actions>
-          <Button onClick={() => {
-            if (message.URL) {
-              openPage(message.URL);
-            } else {
-              openPage(`/message/${message.link}`);
-            }
-          }}>
+          <Button
+            onClick={() => {
+              if (message.URL) {
+                openPage(message.URL);
+              } else {
+                openPage(`/message/${message.link}`);
+              }
+            }}
+          >
            打开
          </Button>
-          <Button onClick={() => {
-            setViewModalOpen(false);
-          }}>
+          <Button
+            onClick={() => {
+              setViewModalOpen(false);
+            }}
+          >
            关闭
          </Button>
        </Modal.Actions>
@@ -0,0 +1,38 @@
+export const CHANNEL_OPTIONS = [
+  { key: 'email', text: '邮件', value: 'email', color: '#4285f4' },
+  { key: 'test', text: '微信测试号', value: 'test', color: '#2cbb00' },
+  {
+    key: 'corp_app',
+    text: '企业微信应用号',
+    value: 'corp_app',
+    color: '#5fc9ec',
+  },
+  { key: 'corp', text: '企业微信群机器人', value: 'corp', color: '#019d82' },
+  { key: 'lark', text: '飞书群机器人', value: 'lark', color: '#00d6b9' },
+  { key: 'ding', text: '钉钉群机器人', value: 'ding', color: '#007fff' },
+  { key: 'bark', text: 'Bark App', value: 'bark', color: '#ff3b30' },
+  {
+    key: 'client',
+    text: 'WebSocket 客户端',
+    value: 'client',
+    color: '#121212',
+  },
+  {
+    key: 'telegram',
+    text: 'Telegram 机器人',
+    value: 'telegram',
+    color: '#29a9ea',
+  },
+  {
+    key: 'discord',
+    text: 'Discord 群机器人',
+    value: 'discord',
+    color: '#404eed',
+  },
+  {
+    key: 'none',
+    text: '不推送',
+    value: 'none',
+    color: '#808080',
+  },
+];
@@ -1,3 +1,4 @@
 export * from './toast.constants';
 export * from './user.constants';
-export * from './common.constant';
+export * from './common.constant';
+export * from './channel.constants';
@@ -0,0 +1,32 @@
+import { Label } from 'semantic-ui-react';
+import { timestamp2string } from './utils';
+import React from 'react';
+import { CHANNEL_OPTIONS } from '../constants';
+
+let channelMap = undefined;
+
+export function renderChannel(key) {
+  if (channelMap === undefined) {
+    channelMap = new Map();
+    CHANNEL_OPTIONS.forEach((option) => {
+      channelMap[option.key] = option;
+    });
+  }
+  let channel = channelMap[key];
+  if (channel) {
+    return (
+      <Label basic style={{ backgroundColor: channel.color, color: 'white' }}>
+        {channel.text}
+      </Label>
+    );
+  }
+  return (
+    <Label basic color='red'>
+      未知通道
+    </Label>
+  );
+}
+
+export function renderTimestamp(timestamp) {
+  return <>{timestamp2string(timestamp)}</>;
+}
@@ -0,0 +1,520 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Form, Header, Message, Segment } from 'semantic-ui-react';
+import { useParams } from 'react-router-dom';
+import { API, showError, showSuccess } from '../../helpers';
+import { CHANNEL_OPTIONS } from '../../constants';
+import axios from 'axios';
+
+const EditChannel = () => {
+  const params = useParams();
+  const channelId = params.id;
+  const isEditing = channelId !== undefined;
+  const [loading, setLoading] = useState(isEditing);
+  const originInputs = {
+    type: 'none',
+    name: '',
+    description: '',
+    secret: '',
+    app_id: '',
+    account_id: '',
+    url: '',
+    other: '',
+    corp_id: '', // only for corp_app
+    agent_id: '', // only for corp_app
+  };
+
+  const [inputs, setInputs] = useState(originInputs);
+  const { type, name, description, secret, app_id, account_id, url, other } =
+    inputs;
+
+  const handleInputChange = (e, { name, value }) => {
+    setInputs((inputs) => ({ ...inputs, [name]: value }));
+  };
+
+  const loadChannel = async () => {
+    let res = await API.get(`/api/channel/${channelId}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (data.type === 'corp_app') {
+        const [corp_id, agent_id] = data.app_id.split('|');
+        data.corp_id = corp_id;
+        data.agent_id = agent_id;
+      }
+      setInputs(data);
+    } else {
+      showError(message);
+    }
+    setLoading(false);
+  };
+  useEffect(() => {
+    if (isEditing) {
+      loadChannel().then();
+    }
+  }, []);
+
+  const submit = async () => {
+    if (!name) return;
+    let res = undefined;
+    let localInputs = { ...inputs };
+    switch (inputs.type) {
+      case 'corp_app':
+        localInputs.app_id = `${inputs.corp_id}|${inputs.agent_id}`;
+        break;
+      case 'bark':
+        localInputs.url = 'https://api.day.app';
+    }
+    if (isEditing) {
+      res = await API.put(`/api/channel/`, {
+        ...localInputs,
+        id: parseInt(channelId),
+      });
+    } else {
+      res = await API.post(`/api/channel`, localInputs);
+    }
+    const { success, message } = res.data;
+    if (success) {
+      if (isEditing) {
+        showSuccess('通道信息更新成功！');
+      } else {
+        showSuccess('通道创建成功！');
+        setInputs(originInputs);
+      }
+    } else {
+      showError(message);
+    }
+  };
+
+  const getTelegramChatId = async () => {
+    if (inputs.telegram_bot_token === '') {
+      showError('请先输入 Telegram 机器人令牌！');
+      return;
+    }
+    let res = await axios.get(
+      `https://api.telegram.org/bot${inputs.secret}/getUpdates`
+    );
+    const { ok } = res.data;
+    if (ok) {
+      let result = res.data.result;
+      if (result.length === 0) {
+        showError(`请先向你的机器人发送一条任意消息！`);
+      } else {
+        let id = result[0]?.message?.chat?.id;
+        id = id.toString();
+        setInputs((inputs) => ({ ...inputs, account_id: id }));
+        showSuccess('会话 ID 获取成功！');
+      }
+    } else {
+      showError(`发生错误：${res.description}`);
+    }
+  };
+
+  const renderChannelForm = () => {
+    switch (type) {
+      case 'email':
+        return (
+          <>
+            <Message>
+              邮件推送方式（email）需要设置邮箱，请前往个人设置页面绑定邮箱地址，之后系统将自动为你创建邮箱推送通道。
+            </Message>
+          </>
+        );
+      case 'test':
+        return (
+          <>
+            <Message>
+              通过微信测试号进行推送，点击前往配置：
+              <a
+                target='_blank'
+                href='https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index'
+              >
+                微信公众平台接口测试帐号
+              </a>
+              。
+              <br />
+              <br />
+              需要新增测试模板，模板标题推荐填写为「消息推送」，模板内容必须填写为
+              {' {{'}text.DATA{'}}'}。
+            </Message>
+            <Form.Group widths={3}>
+              <Form.Input
+                label='测试号 ID'
+                name='app_id'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.app_id}
+                placeholder='测试号信息 -> appID'
+              />
+              <Form.Input
+                label='测试号密钥'
+                name='secret'
+                type='password'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.secret}
+                placeholder='测试号信息 -> appsecret'
+              />
+              <Form.Input
+                label='测试模板 ID'
+                name='other'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.other}
+                placeholder='模板消息接口 -> 模板 ID'
+              />
+            </Form.Group>
+            <Form.Group widths={3}>
+              <Form.Input
+                label='用户 Open ID'
+                name='account_id'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.account_id}
+                placeholder='扫描测试号二维码 -> 用户列表 -> 微信号'
+              />
+            </Form.Group>
+          </>
+        );
+      case 'corp_app':
+        return (
+          <>
+            <Message>
+              通过企业微信应用号进行推送，点击前往配置：
+              <a
+                target='_blank'
+                href='https://work.weixin.qq.com/wework_admin/frame#apps'
+              >
+                企业微信应用管理
+              </a>
+              。
+              <br />
+              <br />
+              注意，企业微信要求配置可信 IP，步骤：应用管理 -> 自建 -> 创建应用
+              -> 应用设置页面下拉中找到「企业可信 IP」，点击配置 -> 设置可信域名
+              -> 在「可调用
+              JS-SDK、跳转小程序的可信域名」下面填写一个域名，然后点击「申请校验域名」，根据提示完成校验
+              -> 之后填写服务器 IP 地址（此 IP
+              地址是消息推送服务所部署在的服务器的 IP
+              地址，未必是上面校验域名中记录的 IP 地址）。
+            </Message>
+            <Form.Group widths={3}>
+              <Form.Input
+                label='企业 ID'
+                name='corp_id'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.corp_id}
+                placeholder='我的企业 -> 企业信息 -> 企业 ID'
+              />
+              <Form.Input
+                label='应用 AgentId'
+                name='agent_id'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.agent_id}
+                placeholder='应用管理 -> 自建 -> 创建应用 -> AgentId'
+              />
+              <Form.Input
+                label='应用 Secret'
+                name='secret'
+                type='password'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.secret}
+                placeholder='应用管理 -> 自建 -> 创建应用 -> Secret'
+              />
+            </Form.Group>
+            <Form.Group widths={3}>
+              <Form.Input
+                label='用户账号'
+                name='account_id'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.account_id}
+                placeholder='通讯录 -> 点击姓名 -> 账号'
+              />
+              <Form.Select
+                label='微信企业号客户端类型'
+                name='other'
+                options={[
+                  {
+                    key: 'plugin',
+                    text: '微信中的企业微信插件',
+                    value: 'plugin',
+                  },
+                  { key: 'app', text: '企业微信 APP', value: 'app' },
+                ]}
+                value={inputs.other}
+                onChange={handleInputChange}
+              />
+            </Form.Group>
+          </>
+        );
+      case 'corp':
+        return (
+          <>
+            <Message>
+              通过企业微信群机器人进行推送，配置流程：选择一个群聊 -> 设置 ->
+              群机器人 -> 添加 -> 新建 -> 输入名字，点击添加 -> 点击复制 Webhook
+              地址
+            </Message>
+            <Form.Group widths={2}>
+              <Form.Input
+                label='Webhook 地址'
+                name='url'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.url}
+                placeholder='在此填写企业微信提供的 Webhook 地址'
+              />
+            </Form.Group>
+          </>
+        );
+      case 'lark':
+        return (
+          <>
+            <Message>
+              通过飞书群机器人进行推送，飞书桌面客户端的配置流程：选择一个群聊
+              -> 设置 -> 群机器人 -> 添加机器人 -> 自定义机器人 -> 添加（
+              <strong>注意选中「签名校验」</strong>）。具体参见：
+              <a
+                target='_blank'
+                href='https://open.feishu.cn/document/ukTMukTMukTM/ucTM5YjL3ETO24yNxkjN'
+              >
+                飞书开放文档
+              </a>
+            </Message>
+            <Form.Group widths={2}>
+              <Form.Input
+                label='Webhook 地址'
+                name='url'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.url}
+                placeholder='在此填写飞书提供的 Webhook 地址'
+              />
+              <Form.Input
+                label='签名校验密钥'
+                name='secret'
+                type='password'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.secret}
+                placeholder='在此填写飞书提供的签名校验密钥'
+              />
+            </Form.Group>
+          </>
+        );
+      case 'ding':
+        return (
+          <>
+            <Message>
+              通过钉钉群机器人进行推送，钉钉桌面客户端的配置流程：选择一个群聊
+              -> 群设置 -> 智能群助手 -> 添加机器人（点击右侧齿轮图标） ->
+              自定义 -> 添加（
+              <strong>注意选中「加密」</strong>）。具体参见：
+              <a
+                target='_blank'
+                href='https://open.dingtalk.com/document/robots/custom-robot-access'
+              >
+                钉钉开放文档
+              </a>
+            </Message>
+            <Form.Group widths={2}>
+              <Form.Input
+                label='Webhook 地址'
+                name='url'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.url}
+                placeholder='在此填写钉钉提供的 Webhook 地址'
+              />
+              <Form.Input
+                label='签名校验密钥'
+                name='secret'
+                type='password'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.secret}
+                placeholder='在此填写钉钉提供的签名校验密钥'
+              />
+            </Form.Group>
+          </>
+        );
+      case 'bark':
+        return (
+          <>
+            <Message>
+              通过 Bark 进行推送，下载 Bark 后按提示注册设备，之后会看到一个
+              URL，例如 <code>https://api.day.app/wrsVSDRANDOM/Body Text</code>
+              ，其中 <code>wrsVSDRANDOM</code> 就是你的推送 key。
+            </Message>
+            <Form.Group widths={2}>
+              <Form.Input
+                label='服务器地址'
+                name='url'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.url}
+                placeholder='在此填写 Bark 服务器地址，不填则使用默认值'
+              />
+              <Form.Input
+                label='推送 key'
+                name='secret'
+                type='password'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.secret}
+                placeholder='在此填写 Bark 推送 key'
+              />
+            </Form.Group>
+          </>
+        );
+      case 'client':
+        return (
+          <>
+            <Message>
+              通过 WebSocket
+              客户端进行推送，可以使用官方客户端实现，或者根据协议自行实现。官方客户端
+              <a
+                target='_blank'
+                href='https://github.com/songquanpeng/personal-assistant'
+              >
+                详见此处
+              </a>
+              。
+            </Message>
+            <Form.Group widths={2}>
+              <Form.Input
+                label='客户端连接密钥'
+                name='secret'
+                type='password'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.secret}
+                placeholder='在此设置客户端连接密钥'
+              />
+            </Form.Group>
+          </>
+        );
+      case 'telegram':
+        return (
+          <>
+            <Message>
+              通过 Telegram 机器人进行消息推送。首先向
+              <a href='https://t.me/botfather' target='_blank'>
+                {' '}
+                Bot Father{' '}
+              </a>
+              申请创建一个新的机器人，之后在下方输入获取到的令牌，然后点击你的机器人，随便发送一条消息，之后点击下方的「获取会话
+              ID」按钮，系统将自动为你填写会话
+              ID，最后点击保存按钮保存设置即可。
+            </Message>
+            <Form.Group widths={2}>
+              <Form.Input
+                label='Telegram 机器人令牌'
+                name='secret'
+                type='password'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.secret}
+                placeholder='在此设置 Telegram 机器人令牌'
+              />
+              <Form.Input
+                label='Telegram 会话 ID'
+                name='account_id'
+                type='text'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.account_id}
+                placeholder='在此设置 Telegram 会话 ID'
+              />
+            </Form.Group>
+            <Button onClick={getTelegramChatId} loading={loading}>
+              获取会话 ID
+            </Button>
+          </>
+        );
+      case 'discord':
+        return (
+          <>
+            <Message>
+              通过 Discord 群机器人进行推送，配置流程：选择一个 channel -> 设置
+              -> 整合 -> 创建 Webhook -> 点击复制 Webhook URL
+            </Message>
+            <Form.Group widths={2}>
+              <Form.Input
+                label='Webhook 地址'
+                name='url'
+                onChange={handleInputChange}
+                autoComplete='new-password'
+                value={inputs.url}
+                placeholder='在此填写 Discord 提供的 Webhook 地址'
+              />
+            </Form.Group>
+          </>
+        );
+      case 'none':
+        return (
+          <>
+            <Message>
+              仅保存消息，不做推送，可以在 Web
+              端查看，需要用户具有消息持久化的权限。
+            </Message>
+          </>
+        );
+      default:
+        return (
+          <>
+            <Message>未知通道类型！</Message>
+          </>
+        );
+    }
+  };
+
+  return (
+    <>
+      <Segment loading={loading}>
+        <Header as='h3'>{isEditing ? '更新通道配置' : '新建消息通道'}</Header>
+        <Form autoComplete='new-password'>
+          <Form.Field>
+            <Form.Input
+              label='名称'
+              name='name'
+              placeholder={
+                '请输入通道名称，请仅使用英文字母和下划线，该名称必须唯一'
+              }
+              onChange={handleInputChange}
+              value={name}
+              autoComplete='new-password'
+              required
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label='备注'
+              name='description'
+              type={'text'}
+              placeholder={'请输入备注信息'}
+              onChange={handleInputChange}
+              value={description}
+              autoComplete='new-password'
+            />
+          </Form.Field>
+          <Form.Select
+            label='通道类型'
+            name='type'
+            options={CHANNEL_OPTIONS}
+            value={type}
+            onChange={handleInputChange}
+          />
+          {renderChannelForm()}
+          <Button disabled={type === 'email'} onClick={submit}>
+            提交
+          </Button>
+        </Form>
+      </Segment>
+    </>
+  );
+};
+
+export default EditChannel;
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Header, Segment } from 'semantic-ui-react';
+import ChannelsTable from '../../components/ChannelsTable';
+
+const Channel = () => (
+  <>
+    <Segment>
+      <Header as='h3'>我的通道</Header>
+      <ChannelsTable />
+    </Segment>
+  </>
+);
+
+export default Channel;
@@ -30,38 +30,38 @@ const AddUser = () => {
  return (
    <>
      <Segment>
-        <Header as="h3">创建新用户账户</Header>
-        <Form autoComplete="off">
+        <Header as='h3'>创建新用户账户</Header>
+        <Form autoComplete='new-password'>
          <Form.Field>
            <Form.Input
-              label="用户名"
-              name="username"
+              label='用户名'
+              name='username'
              placeholder={'请输入用户名'}
              onChange={handleInputChange}
              value={username}
-              autoComplete="off"
+              autoComplete='new-password'
              required
            />
          </Form.Field>
          <Form.Field>
            <Form.Input
-              label="显示名称"
-              name="display_name"
+              label='显示名称'
+              name='display_name'
              placeholder={'请输入显示名称'}
              onChange={handleInputChange}
              value={display_name}
-              autoComplete="off"
+              autoComplete='new-password'
            />
          </Form.Field>
          <Form.Field>
            <Form.Input
-              label="密码"
-              name="password"
+              label='密码'
+              name='password'
              type={'password'}
              placeholder={'请输入密码'}
              onChange={handleInputChange}
              value={password}
-              autoComplete="off"
+              autoComplete='new-password'
              required
            />
          </Form.Field>