feat: API access key management #2846 (#2865)

### What problem does this PR solve?

feat: API access key management #2846
feat: Render markdown file with remark-loader #2846

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

web/src/pages/user-setting/constants.tsx

@@ -1,3 +1,4 @@
+import { ReactComponent as ApiIcon } from '@/assets/svg/api.svg';
 import { ReactComponent as LogoutIcon } from '@/assets/svg/logout.svg';
 import { ReactComponent as ModelIcon } from '@/assets/svg/model-providers.svg';
 import { ReactComponent as PasswordIcon } from '@/assets/svg/password.svg';
@@ -13,6 +14,7 @@ export const UserSettingIconMap = {
   [UserSettingRouteKey.System]: <MonitorOutlined style={{ fontSize: 24 }} />,
   [UserSettingRouteKey.Team]: <TeamIcon />,
   [UserSettingRouteKey.Logout]: <LogoutIcon />,
+  [UserSettingRouteKey.Api]: <ApiIcon />,
 };
 
 export * from '@/constants/setting';

web/src/pages/user-setting/setting-api/index.less

@@ -0,0 +1,7 @@
+.apiWrapper {
+  width: 100%;
+
+  div[class^='chartWrapper'] {
+    height: auto !important;
+  }
+}

web/src/pages/user-setting/setting-api/index.tsx

@@ -0,0 +1,13 @@
+import ApiContent from '@/components/api-service/chat-overview-modal/api-content';
+
+import styles from './index.less';
+
+const ApiPage = () => {
+  return (
+    <div className={styles.apiWrapper}>
+      <ApiContent idKey="dialogId" hideChatPreviewCard></ApiContent>
+    </div>
+  );
+};
+
+export default ApiPage;