feat: 更新超级麦吉代码，修复若干体验问题

Author: Peter_Tan

frontend/magic-web/src/opensource/layouts/BaseLayout/components/Sider/styles.ts

@@ -4,16 +4,16 @@ import { SupportLocales } from "@/const/locale"
 
 export const useStyles = createStyles(
 	(
-		{isDarkMode, css, token, prefixCls},
-		{collapsed, language}: { collapsed: boolean; language: string },
+		{ isDarkMode, css, token, prefixCls },
+		{ collapsed, language }: { collapsed: boolean; language: string },
 	) => {
 		return {
 			sider: css`
 				box-sizing: border-box;
-				border-right: 1px solid ${ token.colorBorder };
+				border-right: 1px solid ${token.colorBorder};
 				height: 100%;
 				min-width: 56px;
-				width: ${ collapsed ? "56px" : "auto" };
+				width: ${collapsed ? "56px" : "auto"};
 				padding: 10px 10px;
 				flex-shrink: 0;
 				transition: width 0.2s ease-in-out;
@@ -53,8 +53,8 @@ export const useStyles = createStyles(
 					}
 				}
 
-				.${ prefixCls }-menu-item:hover {
-					.${ prefixCls }-menu-item-icon {
+				.${prefixCls}-menu-item:hover {
+					.${prefixCls}-menu-item-icon {
 						stroke-dasharray: 100;
 						stroke-dashoffset: 100;
 						animation: stroke 1.5s forwards;
@@ -68,28 +68,28 @@ export const useStyles = createStyles(
 			menus: css`
 				width: 100%;
 
-				> .${ prefixCls }-menu:not(:first-child) {
-					border-top: 1px solid ${ token.colorBorder };
+				> .${prefixCls}-menu:not(:first-child) {
+					border-top: 1px solid ${token.colorBorder};
 					padding-top: 5px;
 					margin-top: 5px;
 				}
 			`,
 			menu: css`
-				--${ prefixCls }-menu-item-selected-bg: ${ token.magicColorUsages.primaryLight.default } !important;
+				--${prefixCls}-menu-item-selected-bg: ${token.magicColorUsages.primaryLight.default} !important;
 
-				--${ prefixCls }-menu-item-color: ${ token.magicColorUsages.text[1] } !important;
+				--${prefixCls}-menu-item-color: ${token.magicColorUsages.text[1]} !important;
 
-				--${ prefixCls }-menu-item-selected-color: ${ isDarkMode ? token.colorPrimary : token.magicColorUsages.text[1] } !important;
+				--${prefixCls}-menu-item-selected-color: ${isDarkMode ? token.colorPrimary : token.magicColorUsages.text[1]} !important;
 
-				.${ prefixCls }-menu-item-selected {
-					color: ${ isDarkMode ? token.colorPrimary : token.magicColorUsages.text[1] } !important;
+				.${prefixCls}-menu-item-selected {
+					color: ${isDarkMode ? token.colorPrimary : token.magicColorUsages.text[1]} !important;
 				}
 
 				background: transparent;
 				border-inline-end: none !important;
-				width: ${ collapsed ? "100%" : "100%" };
+				width: ${collapsed ? "100%" : "100%"};
 
-				> .${ prefixCls }-menu-item {
+				> .${prefixCls}-menu-item {
 					width: 100%;
 					height: 30px;
 					margin-left: 0;
@@ -98,9 +98,9 @@ export const useStyles = createStyles(
 					gap: 4px;
 				}
 
-				.${ prefixCls }-menu-title-content {
+				.${prefixCls}-menu-title-content {
 					margin-left: 0 !important;
-					font-size: ${ language === SupportLocales.zhCN ? "14px" : "12px" };
+					font-size: ${language === SupportLocales.zhCN ? "14px" : "12px"};
 				}
 			`,
 			icon: css`
@@ -111,25 +111,25 @@ export const useStyles = createStyles(
 				justify-content: center;
 				cursor: pointer;
 				flex: none;
-				background-color: ${ token.magicColorUsages.fill[1] };
-				border-radius: ${ token.borderRadiusLG }px;
+				background-color: ${token.magicColorUsages.fill[1]};
+				border-radius: ${token.borderRadiusLG}px;
 
 				&:hover {
-					background-color: ${ token.magicColorUsages.fill[0] };
+					background-color: ${token.magicColorUsages.fill[0]};
 				}
 
 				&:active {
-					background-color: ${ token.magicColorUsages.fill[2] };
+					background-color: ${token.magicColorUsages.fill[2]};
 				}
 			`,
 			organizationSwitchWrapper: css`
-				flex-direction: ${ collapsed ? "column" : "row" };
+				flex-direction: ${collapsed ? "column" : "row"};
 			`,
 		}
 	},
 )
 
-export const useSideMenuStyle = createStyles(({css}) => {
+export const useSideMenuStyle = createStyles(({ css }) => {
 	return {
 		navIcon: css`
 			font-size: 18px;

frontend/magic-web/src/opensource/layouts/BaseLayout/styles.ts

@@ -18,23 +18,21 @@ export const useStyles = createStyles(
 			},
 			header: {
 				backgroundColor: token.magicColorUsages.bg[0],
-				borderBottom: `1px solid ${
-					isDarkMode ? token.magicColorScales.grey[1] : token.colorBorder
-				}`,
+				borderBottom: `1px solid ${isDarkMode ? token.magicColorScales.grey[1] : token.colorBorder
+					}`,
 			},
 			wrapper: {
 				height: `calc(100vh - ${token.titleBarHeight}px)`,
 			},
 			sider: {
 				backgroundColor: token.magicColorUsages.bg[0],
-				borderRight: `1px solid ${
-					isDarkMode ? token.magicColorScales.grey[1] : token.colorBorder
-				}`,
+				borderRight: `1px solid ${isDarkMode ? token.magicColorScales.grey[1] : token.colorBorder
+					}`,
 			},
 			subSider: {},
 			content: css`
 				width: calc(100% - var(--sider-width));
-				height: 100%;
+				height: calc(100% - 44px);
 			`,
 		}
 	},

frontend/magic-web/src/opensource/pages/superMagic/utils/api.ts

@@ -132,7 +132,7 @@ export const getMessagesByConversationId = async ({
 	page_token?: string
 }): Promise<any> => {
 	return magicClient.post(
-		`/api/v1/im/conversations/${conversation_id}/messages/queries`,
+		`/api/v2/magic/conversations/${conversation_id}/message/queries`,
 		{
 			limit,
 			order,