refactor: 创建群组modal UI

web/src/components/Modal.tsx

@@ -9,11 +9,9 @@ import { PortalAdd, PortalRemove } from './Portal';
 import { Typography } from 'antd';
 import { Icon } from '@iconify/react';
 import { CSSTransition } from 'react-transition-group';
-// import { animated, useSpring } from 'react-spring';
-// import { easeQuadInOut } from 'd3-ease';
-// import { Iconfont } from './Iconfont';
 
 import './Modal.less';
+import clsx from 'clsx';
 
 const transitionEndListener = (node: HTMLElement, done: () => void) =>
   node.addEventListener('transitionend', done, false);
@@ -82,13 +80,13 @@ export const Modal: React.FC<ModalProps> = React.memo((props) => {
       appear={true}
     >
       <div
-        className="absolute left-0 right-0 top-0 bottom-0 bg-black bg-opacity-50 flex justify-center items-center"
+        className="absolute left-0 right-0 top-0 bottom-0 bg-black bg-opacity-60 flex justify-center items-center"
         onClick={handleClose}
       >
         <ModalContext.Provider value={{ closeModal: handleClose }}>
           {/* Inner */}
           <div
-            className="modal-inner bg-gray-800 rounded overflow-auto relative"
+            className="modal-inner bg-gray-700 rounded overflow-auto relative"
             style={{ maxHeight: '80vh', maxWidth: '80vw' }}
             onClick={stopPropagation}
           >
@@ -163,25 +161,22 @@ export function useModalContext() {
 /**
  * 标准模态框包装器
  */
-// const ModalWrapperContainer = styled.div`
-//   padding: 16px;
-//   min-width: 300px;
-//   ${(props) => props.theme.mixins.desktop('min-width: 420px;')}
-// `;
 export const ModalWrapper: React.FC<{
   title?: string;
+  className?: string;
+  style?: React.CSSProperties;
 }> = React.memo((props) => {
   const title = _isString(props.title) ? (
-    <Typography.Title
+    <Typography.Title level={4} className="text-center mb-4">
-      level={4}
-      style={{ textAlign: 'center', marginBottom: 16 }}
-    >
       {props.title}
     </Typography.Title>
   ) : null;
 
   return (
-    <div className="p-4" style={{ minWidth: 300 }}>
+    <div
+      className={clsx('p-4', props.className)}
+      style={{ minWidth: 300, ...props.style }}
+    >
       {title}
       {props.children}
     </div>

web/src/components/modals/CreateGroup.tsx

@@ -0,0 +1,88 @@
+import { Button, Carousel, Divider, Input, Typography } from 'antd';
+import type { CarouselRef } from 'antd/lib/carousel';
+import React, { useCallback, useRef, useState } from 'react';
+import { Avatar } from '../Avatar';
+import { ModalWrapper } from '../Modal';
+
+export const ModalCreateGroup: React.FC = React.memo(() => {
+  const carouselRef = useRef<CarouselRef>(null);
+  const [name, setName] = useState('');
+
+  const handleSelectTemplate = useCallback(() => {
+    // TODO
+    carouselRef.current?.next();
+  }, []);
+
+  const handleBack = useCallback(() => {
+    carouselRef.current?.prev();
+  }, []);
+
+  const handleCreate = useCallback(() => {
+    console.log({ name });
+  }, [name]);
+
+  return (
+    <ModalWrapper style={{ width: 440 }}>
+      <Carousel ref={carouselRef} dots={false}>
+        <div>
+          <Typography.Title level={4} className="text-center mb-4">
+            创建群组
+          </Typography.Title>
+
+          <Typography.Paragraph className="mb-4 text-center">
+            选择以下模板, 开始创建属于自己的群组吧!
+          </Typography.Paragraph>
+
+          <div
+            className="w-full border rounded text-base py-2 px-3 cursor-pointer font-bold hover:bg-white hover:bg-opacity-10"
+            onClick={handleSelectTemplate}
+          >
+            默认群组
+          </div>
+        </div>
+
+        <div>
+          <Typography.Title level={4} className="text-center mb-4">
+            自定义你的群组
+          </Typography.Title>
+
+          <Typography.Paragraph className="text-center mb-2">
+            不要担心, 在此之后你可以随时进行变更
+          </Typography.Paragraph>
+
+          <div className="text-center mb-2">
+            {/* TODO */}
+            <Avatar size={80} name={name} />
+          </div>
+
+          <div>
+            <div>群组名称:</div>
+
+            <Input
+              className="shadow-none"
+              size="large"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+
+          <Divider />
+
+          <div className="flex justify-between">
+            <Button
+              type="link"
+              onClick={handleBack}
+              className="text-white font-bold"
+            >
+              返回
+            </Button>
+            <Button type="primary" onClick={handleCreate}>
+              确认创建
+            </Button>
+          </div>
+        </div>
+      </Carousel>
+    </ModalWrapper>
+  );
+});
+ModalCreateGroup.displayName = 'ModalCreateGroup';

web/src/routes/Main/Navbar/GroupNav.tsx

@@ -1,5 +1,6 @@
 import { Avatar } from '@/components/Avatar';
 import { openModal } from '@/components/Modal';
+import { ModalCreateGroup } from '@/components/modals/CreateGroup';
 import { Icon } from '@iconify/react';
 import React, { useCallback, useMemo } from 'react';
 import { GroupInfo, useAppSelector } from 'tailchat-shared';
@@ -17,7 +18,7 @@ export const GroupNav: React.FC = React.memo(() => {
   const groups = useGroups();
 
   const handleCreateGroup = useCallback(() => {
-    openModal(<div className="w-60 h-48">新增群组</div>);
+    openModal(<ModalCreateGroup />);
   }, []);
 
   return (

web/src/styles/antd/dark.less

@@ -21,4 +21,9 @@
     background-color: transparent;
     border: 1px solid rgba(255,255,255,0.12);
   }
+
+  // 走马灯
+  .ant-carousel {
+    color: rgba(255,255,255,0.65);
+  }
 }