diff --git a/shared/index.tsx b/shared/index.tsx
index 7dcec451..322a5b5c 100644
--- a/shared/index.tsx
+++ b/shared/index.tsx
@@ -61,6 +61,7 @@ export {
   createGroupInviteCode,
   getGroupBasicInfo,
   applyGroupInvite,
+  modifyGroupField,
 } from './model/group';
 export type { GroupPanel, GroupInfo, GroupBasicInfo } from './model/group';
 export type { ChatMessage } from './model/message';
diff --git a/shared/model/group.ts b/shared/model/group.ts
index 9cb44530..5fb5a438 100644
--- a/shared/model/group.ts
+++ b/shared/model/group.ts
@@ -76,6 +76,25 @@ export async function getGroupBasicInfo(
   return data;
 }
 
+/**
+ * 修改群组属性
+ * @param groupId 群组ID
+ * @param fieldName 要修改的群组属性
+ * @param fieldValue 要修改的属性的值
+ */
+type AllowedModifyField = 'name' | 'avatar' | 'panels' | 'roles';
+export async function modifyGroupField(
+  groupId: string,
+  fieldName: AllowedModifyField,
+  fieldValue: unknown
+) {
+  await request.post('/api/group/updateGroupField', {
+    groupId,
+    fieldName,
+    fieldValue,
+  });
+}
+
 /**
  * 创建群组邀请码
  * 邀请码默认 7天有效期
diff --git a/web/src/components/modals/GroupDetail/Panel/index.tsx b/web/src/components/modals/GroupDetail/Panel/index.tsx
index ecfa8615..0c654561 100644
--- a/web/src/components/modals/GroupDetail/Panel/index.tsx
+++ b/web/src/components/modals/GroupDetail/Panel/index.tsx
@@ -1,5 +1,12 @@
 import React, { useCallback, useState } from 'react';
-import { useGroupInfo, GroupPanel as GroupPanelInfo, t } from 'tailchat-shared';
+import {
+  useGroupInfo,
+  GroupPanel as GroupPanelInfo,
+  t,
+  modifyGroupField,
+  useAsyncRequest,
+  showToasts,
+} from 'tailchat-shared';
 import { Button } from 'antd';
 import _isEqual from 'lodash/isEqual';
 import { GroupPanelTree } from './GroupPanelTree';
@@ -16,8 +23,9 @@ export const GroupPanel: React.FC<{
     setEditingGroupPanels(newGroupPanels);
   }, []);
 
-  const handleSave = useCallback(() => {
-    console.log('editingGroupPanels', editingGroupPanels);
+  const [{ loading }, handleSave] = useAsyncRequest(async () => {
+    await modifyGroupField(groupId, 'panels', editingGroupPanels);
+    showToasts(t('保存成功'), 'success');
   }, [editingGroupPanels]);
 
   return (
@@ -28,7 +36,7 @@ export const GroupPanel: React.FC<{
       />
 
       {!_isEqual(groupPanels, editingGroupPanels) && (
-        <Button className="mt-2" onClick={handleSave}>
+        <Button className="mt-2" loading={loading} onClick={handleSave}>
           {t('保存')}
         </Button>
       )}