feat(web): 增加创建频道的功能

src/shared/redux/actions/group.ts

@@ -776,3 +776,29 @@ export const setGroupStatus = function(groupUUID, groupStatus) {
     );
   };
 };
+
+/**
+ * 创建团频道
+ * @param groupUUID 所属团UUID
+ * @param name 频道名
+ * @param desc 频道描述
+ */
+export const createGroupChannel = function(
+  groupUUID: string,
+  name: string,
+  desc: string
+): TRPGAction {
+  return function(dispatch, getState) {
+    return api.emit(
+      'group::createGroupChannel',
+      { groupUUID, name, desc },
+      function(data) {
+        if (data.result) {
+          dispatch(hideModal());
+        } else {
+          dispatch(showAlert(data.msg));
+        }
+      }
+    );
+  };
+};

src/web/components/popover/index.tsx

@@ -8,6 +8,7 @@ export const TPopoverContext = React.createContext({ closePopover: () => {} });
 /**
  * 重新封装一层Popover
  * 管理Popover的显示与隐藏
+ * 可以由Context来让子节点关闭popover
  */
 export const TPopover: React.FC<PopoverProps> = TMemo((props) => {
   const [visible, setVisible] = useState(false);

src/web/containers/main/group/GroupDetail.tsx

@@ -42,6 +42,8 @@ import { TRPGState } from '@redux/types/__all__';
 import GroupRule from './GroupRule';
 import { GroupInfoContext } from '@shared/context/GroupInfoContext';
 import { UserSelector } from '@web/components/modal/UserSelector';
+import { checkIsTestUser } from '@web/utils/debug-helper';
+import { GroupChannelCreate } from './modal/GroupChannelCreate';
 
 interface Props extends DispatchProp<any> {
   selectedUUID: string;
@@ -202,9 +204,24 @@ class GroupDetail extends React.Component<Props> {
   };
 
   actions = [
+    ...(checkIsTestUser()
+      ? [
+          {
+            name: '创建频道',
+            icon: '&#xe61c;',
+            onClick: () => {
+              this.props.dispatch(
+                showModal(
+                  <GroupChannelCreate groupUUID={this.props.selectedUUID} />
+                )
+              );
+            },
+          },
+        ]
+      : []),
     {
       name: '添加团员',
-      icon: '&#xe61c;',
+      icon: '&#xe61d;',
       onClick: () => {
         this.props.dispatch(
           showModal(<UserSelector onConfirm={this.handleSendGroupInvite} />)

src/web/containers/main/group/modal/GroupChannelCreate.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { TMemo } from '@shared/components/TMemo';
+import ModalPanel from '@web/components/ModalPanel';
+import { useFormik } from 'formik';
+import { Form, Button, Input } from 'antd';
+import { useTRPGDispatch } from '@shared/hooks/useTRPGSelector';
+import { createGroupChannel } from '@redux/actions/group';
+
+interface ChannelFormValues {
+  name: string;
+  desc: string;
+}
+
+const initialValues: ChannelFormValues = {
+  name: '',
+  desc: '',
+};
+
+interface Props {
+  groupUUID: string;
+}
+export const GroupChannelCreate: React.FC<Props> = TMemo((props) => {
+  const dispatch = useTRPGDispatch();
+  const { values, handleSubmit, handleChange } = useFormik<ChannelFormValues>({
+    initialValues,
+    onSubmit: async (values) => {
+      const { name, desc } = values;
+      dispatch(createGroupChannel(props.groupUUID, name, desc));
+    },
+  });
+
+  return (
+    <ModalPanel
+      title="创建频道"
+      actions={<Button onClick={() => handleSubmit()}>提交</Button>}
+      style={{ width: 425 }}
+    >
+      <Form layout="horizontal" labelCol={{ sm: 6 }} wrapperCol={{ sm: 18 }}>
+        <Form.Item label="频道名称:">
+          <Input
+            name="name"
+            size="large"
+            value={values.name}
+            onChange={handleChange}
+          />
+        </Form.Item>
+        <Form.Item label="频道描述:">
+          <Input.TextArea
+            name="desc"
+            autoSize={{
+              maxRows: 4,
+              minRows: 2,
+            }}
+            value={values.desc}
+            onChange={handleChange}
+          />
+        </Form.Item>
+      </Form>
+    </ModalPanel>
+  );
+});
+GroupChannelCreate.displayName = 'GroupChannelCreate';