feat: 完成创建小组和邀请成员的表单，表单验证待完成。

src/api/portal.ts

@@ -1,5 +1,5 @@
 import axios from '@/utils/axios';
 
-export const getUserIdByPhoneNumber = (phone: number) => axios.get(
+export const getUserIdByPhoneNumber = (phone: string) => axios.get(
   `http://${process.env.VUE_APP_PORTAL_HOST}/api/user/findIdByPhone/${phone}`,
 );

src/components/Menu.vue

@@ -27,8 +27,7 @@
       <template v-if="userLoggedIn">
         <ElSubmenu index="user" class="user">
           <template #title>{{userInfo.username}}</template>
-          <ElMenuItem index="user-create">创建小组</ElMenuItem>
-          <ElMenuItem index="user-join">加入小组</ElMenuItem>
+          <ElMenuItem index="user-group">创建小组 / 邀请成员</ElMenuItem>
           <ElMenuItem index="user-logout">登出</ElMenuItem>
         </ElSubmenu>
       </template>
@@ -36,21 +35,92 @@
         <ElLink type="primary" href="/login" class="user">登录</ElLink>
       </template>
   </ElMenu>
+  <ElDrawer v-model="showGroupDrawer" style="width:400px;">
+    <template #title><span>创建小组 / 邀请成员</span></template>
+    <ElRow type="flex" justify="center">
+      <ElCol :span="24">
+        <ElDivider content-position="left">创建小组</ElDivider>
+        <ElForm :inline="true" :model="createGroupForm">
+          <ElFormItem label="组名" prop="groupName">
+            <ElInput v-model="createGroupForm.groupName" placeholder="请输入要创建的小组名"></ElInput>
+          </ElFormItem>
+          <ElFormItem>
+            <ElButton @click="createGroup" type="primary">创建</ElButton>
+          </ElFormItem>
+        </ElForm>
+        <ElDivider content-position="left">邀请成员</ElDivider>
+        <ElForm :model="inviteGroupForm" label-width="72px">
+          <ElFormItem label="小组" prop="groupId">
+            <ElSelect v-model="inviteGroupForm.groupId" placeholder="请选择成员将要加入的小组">
+              <ElOption v-for="group in groupList" :key="group.id" :value="group.id" :label="group.name"></ElOption>
+            </ElSelect>
+          </ElFormItem>
+          <ElFormItem label="手机号" prop="phone">
+            <ElInput v-model="inviteGroupForm.phone" placeholder="请输入成员注册所用手机号"></ElInput>
+          </ElFormItem>
+          <ElFormItem>
+            <ElButton @click="inviteMember" type="primary">邀请</ElButton>
+          </ElFormItem>
+        </ElForm>
+      </ElCol>
+    </ElRow>
+  </ElDrawer>
 </template>
 
 <script lang="ts">
+import { ElMessage } from 'element-plus';
+
 import { useProjectList } from '@/composable/useProject';
 import { useGroupList } from '@/composable/useGroup';
 import { useUser } from '@/composable/useUser';
-import { defineComponent } from 'vue';
+import { defineComponent, ref, reactive } from 'vue';
+import { UserAPI, PortalAPI } from '@/api';
 
 export default defineComponent({
   name: 'Menu',
-  setup(_, { emit }) {
+  setup() {
     const { projectListOfCurrentGroup: projectList, selectedProject, handleProjectChange } = useProjectList();
     const { groupList, selectedGroup, handleGroupChange } = useGroupList();
     const { userInfo, userLoggedIn, userLogOut } = useUser();
 
+    // TODO: 自定义两个表单验证
+    const showGroupDrawer = ref(false);
+
+    const openGroupDrawer = () => {
+      showGroupDrawer.value = true;
+    };
+    const createGroupForm = reactive({
+      groupName: '',
+    });
+    const createGroup = () => {
+      UserAPI.createGroup(createGroupForm.groupName);
+    };
+
+    const inviteGroupForm = reactive({
+      groupId: undefined,
+      phone: '',
+    });
+    const inviteMember = async () => {
+      let invitedUserId: number;
+
+      const res = await PortalAPI.getUserIdByPhoneNumber(inviteGroupForm.phone) as unknown as {id: number};
+
+      if (res) {
+        invitedUserId = res.id;
+      } else {
+        ElMessage({
+          type: 'error',
+          message: '成员不存在，请再次确认手机号',
+        });
+        return;
+      }
+
+      UserAPI.addGroupMember({
+        groupId: inviteGroupForm.groupId!,
+        invitedUserId,
+      });
+    };
+
     const handleSelect = (index: string) => {
       const [type, id] = index.split('-');
       switch (type) {
@@ -66,10 +136,8 @@ export default defineComponent({
           break;
         }
         case 'user': {
-          if (id === 'create') {
-            emit('show-create-group-drawer');
-          } else if (id === 'join') {
-            emit('show-join-group-drawer');
+          if (id === 'group') {
+            openGroupDrawer();
           } else if (id === 'logout') {
             userLogOut();
           }
@@ -84,12 +152,21 @@ export default defineComponent({
     return {
       projectList,
       selectedProject,
+
       groupList,
       selectedGroup,
+
       handleSelect,
+
       userInfo,
       userLoggedIn,
       userLogOut,
+
+      showGroupDrawer,
+      createGroupForm,
+      createGroup,
+      inviteGroupForm,
+      inviteMember,
     };
   },
 });

src/element-plus.ts

@@ -5,6 +5,7 @@ import {
   ElCarouselItem,
   ElContainer,
   ElDivider,
+  ElDrawer,
   ElHeader,
   ElLink,
   ElMain,
@@ -41,6 +42,7 @@ export const Components = [
   ElMain,
   ElMenu,
   ElDialog,
+  ElDrawer,
   ElLink,
   ElMenuItem,
   ElCarousel,