diff --git a/web/src/components/DevContainer.tsx b/web/src/components/DevContainer.tsx
index 8259e1cf..12efe5ec 100644
--- a/web/src/components/DevContainer.tsx
+++ b/web/src/components/DevContainer.tsx
@@ -1,9 +1,11 @@
 import React, { Fragment } from 'react';
 import { isDevelopment } from 'tailchat-shared';
 
+/**
+ * 开发中容器
+ * 在容器下的组件在生产环境下不会被渲染
+ */
 export const DevContainer: React.FC = React.memo((props) => {
   return isDevelopment ? <Fragment>{props.children}</Fragment> : null;
 });
 DevContainer.displayName = 'DevContainer';
-
-export default DevContainer;
diff --git a/web/src/routes/Main/Content/Personal/Sidebar.tsx b/web/src/routes/Main/Content/Personal/Sidebar.tsx
index 1a656006..aca0a37b 100644
--- a/web/src/routes/Main/Content/Personal/Sidebar.tsx
+++ b/web/src/routes/Main/Content/Personal/Sidebar.tsx
@@ -5,7 +5,7 @@ import { t, useDMConverseList, useUserInfo } from 'tailchat-shared';
 import { SidebarDMItem } from './SidebarDMItem';
 import { openModal } from '@/components/Modal';
 import { CreateDMConverse } from '@/components/modals/CreateDMConverse';
-import DevContainer from '@/components/DevContainer';
+import { DevContainer } from '@/components/DevContainer';
 import { SectionHeader } from '@/components/SectionHeader';
 
 const SidebarSection: React.FC<{