refactor: add tc role

web/src/routes/Main/Content/Group/Sidebar.tsx

@@ -35,7 +35,7 @@ export const Sidebar: React.FC = React.memo(() => {
     );
 
   return (
-    <div>
+    <div data-tc-role="sidebar-group">
       <GroupHeader groupId={groupId} />
 
       <div className="p-2 space-y-1">

web/src/routes/Main/Content/Group/index.tsx

@@ -7,7 +7,7 @@ import { Sidebar } from './Sidebar';
 
 export const Group: React.FC = React.memo(() => {
   return (
-    <PageContent sidebar={<Sidebar />}>
+    <PageContent data-tc-role="content-group" sidebar={<Sidebar />}>
       <Switch>
         <Route
           path="/main/group/:groupId/:panelId"

web/src/routes/Main/Content/PageContent.tsx

@@ -9,10 +9,6 @@ const PageContentRoot: React.FC = (props) => (
   <div className="flex flex-row flex-1 overflow-hidden">{props.children}</div>
 );
 
-interface PageContentProps {
-  sidebar?: React.ReactNode;
-}
-
 const PageGestureWrapper: React.FC = React.memo((props) => {
   const { setShowSidebar } = useSidebarContext();
 
@@ -36,6 +32,10 @@ const PageGestureWrapper: React.FC = React.memo((props) => {
 });
 PageGestureWrapper.displayName = 'PageGestureWrapper';
 
+interface PageContentProps {
+  sidebar?: React.ReactNode;
+  'data-tc-role'?: string;
+}
 /**
  * 用于渲染实际页面的组件，即除了导航栏剩余的内容
  */
@@ -85,7 +85,10 @@ export const PageContent: React.FC<PageContentProps> = React.memo((props) => {
     <>
       {sidebarEl}
 
-      <div className="flex flex-auto bg-content-light dark:bg-content-dark relative overflow-auto">
+      <div
+        className="flex flex-auto bg-content-light dark:bg-content-dark relative overflow-auto"
+        data-tc-role={props['data-tc-role']}
+      >
         {contentMaskEl}
         {contentEl}
       </div>

web/src/routes/Main/Content/Personal/Sidebar.tsx

@@ -32,7 +32,7 @@ export const PersonalSidebar: React.FC = React.memo(() => {
   const userInfo = useUserInfo();
 
   return (
-    <div>
+    <div data-tc-role="sidebar-personal">
       <SectionHeader>{userInfo?.nickname}</SectionHeader>
 
       <div className="p-2">

web/src/routes/Main/Content/Personal/index.tsx

@@ -8,7 +8,7 @@ import { PersonalSidebar } from './Sidebar';
 
 export const Personal: React.FC = React.memo(() => {
   return (
-    <PageContent sidebar={<PersonalSidebar />}>
+    <PageContent data-tc-role="content-personal" sidebar={<PersonalSidebar />}>
       <Switch>
         <Route path="/main/personal/friends" component={FriendPanel} />
 

web/src/routes/Main/Navbar/GroupNav.tsx

@@ -38,7 +38,7 @@ export const GroupNav: React.FC = React.memo(() => {
   }, []);
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-2" data-tc-role="navbar-groups">
       {Array.isArray(groups) &&
         groups.map((group) => (
           <div key={group._id}>

web/src/routes/Main/Navbar/PersonalNav.tsx

@@ -16,6 +16,7 @@ export const PersonalNav: React.FC = React.memo(() => {
   const unread = usePersonalUnread();
 
   return (
+    <div data-tc-role="navbar-personal">
       <NavbarNavItem
         name={t('我')}
         to={'/main/personal'}
@@ -29,6 +30,7 @@ export const PersonalNav: React.FC = React.memo(() => {
           src={userInfo?.avatar}
         />
       </NavbarNavItem>
+    </div>
   );
 });
 PersonalNav.displayName = 'PersonalNav';

web/src/routes/Main/Navbar/index.tsx

@@ -10,7 +10,10 @@ import { PersonalNav } from './PersonalNav';
  */
 export const Navbar: React.FC = React.memo(() => {
   return (
-    <div className="w-18 bg-navbar-light dark:bg-navbar-dark flex flex-col justify-start items-center pt-4 pb-4">
+    <div
+      data-tc-role="navbar"
+      className="w-18 bg-navbar-light dark:bg-navbar-dark flex flex-col justify-start items-center pt-4 pb-4"
+    >
       <MobileMenuBtn />
 
       {/* Navbar */}
@@ -24,7 +27,7 @@ export const Navbar: React.FC = React.memo(() => {
         <GroupNav />
       </div>
 
-      <div>
+      <div data-tc-role="navbar-settings">
         <SettingBtn />
       </div>
     </div>