feat: 增加alpha模式，并将虚拟列表丢到alpha模式中

client/shared/components/AlphaContainer.tsx

@@ -0,0 +1,15 @@
+import React, { Fragment, PropsWithChildren } from 'react';
+import { useAlphaMode } from '../hooks/useAlphaMode';
+
+/**
+ * Alpha 容器
+ * 在 alpha 模式下可以看到一些可以被公开但是还在测试中的功能
+ */
+export const AlphaContainer: React.FC<PropsWithChildren> = React.memo(
+  (props) => {
+    const { isAlphaMode } = useAlphaMode();
+
+    return isAlphaMode ? <Fragment>{props.children}</Fragment> : null;
+  }
+);
+AlphaContainer.displayName = 'AlphaContainer';

client/shared/components/DevContainer.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment, PropsWithChildren } from 'react';
-import { isDevelopment } from 'tailchat-shared';
+import { isDevelopment } from '../utils/environment';
 
 /**
  * 开发中容器

client/shared/hooks/useAlphaMode.ts

@@ -0,0 +1,16 @@
+import { useStorage } from '../manager/storage';
+
+const alphaModeKey = 'alphaMode';
+
+/**
+ * 是否为 alpha 模式
+ * 在 alpha 模式下可以看到一些可以被公开但是还在测试中的功能
+ */
+export function useAlphaMode() {
+  const [isAlphaMode, { save: setAlphaMode }] = useStorage<boolean>(
+    alphaModeKey,
+    false
+  );
+
+  return { isAlphaMode, setAlphaMode };
+}

client/shared/index.tsx

@@ -16,6 +16,8 @@ export { useCachedUserInfo, useCachedOnlineStatus } from './cache/useCache';
 
 // components
 export { buildPortal, DefaultEventEmitter } from './components/Portal';
+export { AlphaContainer } from './components/AlphaContainer';
+export { DevContainer } from './components/DevContainer';
 export { TcProvider } from './components/Provider';
 
 // contexts
@@ -56,6 +58,7 @@ export {
   useUserSettings,
   useSingleUserSetting,
 } from './hooks/model/useUserSettings';
+export { useAlphaMode } from './hooks/useAlphaMode';
 export { useAsync } from './hooks/useAsync';
 export { useAsyncFn } from './hooks/useAsyncFn';
 export { useAsyncRefresh } from './hooks/useAsyncRefresh';

client/web/src/components/SidebarView.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext, PropsWithChildren } from 'react';
 import _get from 'lodash/get';
-import { DevContainer } from './DevContainer';
+import { DevContainer } from 'tailchat-shared';
 import clsx from 'clsx';
 
 export interface SidebarViewMenuItemType {

client/web/src/components/modals/GroupDetail/Role/tabs/summary.tsx

@@ -1,4 +1,3 @@
-import { DevContainer } from '@/components/DevContainer';
 import {
   DefaultFullModalInputEditorRender,
   FullModalField,

client/web/src/components/modals/SettingsView/System.tsx

@@ -3,7 +3,13 @@ import { LanguageSelect } from '@/components/LanguageSelect';
 import { pluginColorScheme } from '@/plugin/common';
 import { Select, Switch } from 'antd';
 import React from 'react';
-import { t, useColorScheme, useSingleUserSetting } from 'tailchat-shared';
+import {
+  AlphaContainer,
+  t,
+  useAlphaMode,
+  useColorScheme,
+  useSingleUserSetting,
+} from 'tailchat-shared';
 
 export const SettingsSystem: React.FC = React.memo(() => {
   const { colorScheme, setColorScheme } = useColorScheme();
@@ -12,6 +18,7 @@ export const SettingsSystem: React.FC = React.memo(() => {
     setValue: setMessageListVirtualization,
     loading,
   } = useSingleUserSetting('messageListVirtualization', false);
+  const { isAlphaMode, setAlphaMode } = useAlphaMode();
 
   return (
     <div>
@@ -39,15 +46,31 @@ export const SettingsSystem: React.FC = React.memo(() => {
       />
 
       <FullModalField
-        title={t('聊天列表虚拟化') + ' (Beta)'}
+        title={t('Alpha测试开关')}
+        tip={t(
+          '在 Alpha 模式下会有一些尚处于测试阶段的功能将会被开放，如果出现问题欢迎反馈'
+        )}
         content={
           <Switch
             disabled={loading}
-            checked={messageListVirtualization}
+            checked={isAlphaMode}
-            onChange={(checked) => setMessageListVirtualization(checked)}
+            onChange={(checked) => setAlphaMode(checked)}
           />
         }
       />
+
+      {isAlphaMode && (
+        <FullModalField
+          title={t('聊天列表虚拟化') + ' (Beta)'}
+          content={
+            <Switch
+              disabled={loading}
+              checked={messageListVirtualization}
+              onChange={(checked) => setMessageListVirtualization(checked)}
+            />
+          }
+        />
+      )}
     </div>
   );
 });

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

@@ -1,11 +1,15 @@
 import React, { PropsWithChildren } from 'react';
 import { Icon } from 'tailchat-design';
 import { SidebarItem } from '../SidebarItem';
-import { t, useDMConverseList, useUserInfo } from 'tailchat-shared';
+import {
+  t,
+  useDMConverseList,
+  useUserInfo,
+  DevContainer,
+} from 'tailchat-shared';
 import { SidebarDMItem } from './SidebarDMItem';
 import { openModal } from '@/components/Modal';
 import { CreateDMConverse } from '@/components/modals/CreateDMConverse';
-import { DevContainer } from '@/components/DevContainer';
 import { SectionHeader } from '@/components/SectionHeader';
 import { CommonSidebarWrapper } from '@/components/CommonSidebarWrapper';
 import { pluginCustomPanel } from '@/plugin/common';

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

@@ -4,7 +4,7 @@ import { MobileMenuBtn } from './MobileMenuBtn';
 import { SettingBtn } from './SettingBtn';
 import { Divider } from 'antd';
 import { PersonalNav } from './PersonalNav';
-import { DevContainer } from '@/components/DevContainer';
+import { DevContainer } from 'tailchat-shared';
 import { InboxNav } from './InboxNav';
 import { InstallBtn } from './InstallBtn';
 import { ReactQueryDevBtn } from './ReactQueryDevBtn';

client/web/src/styles/antd/dark.less

@@ -60,6 +60,16 @@
     }
   }
 
+  .ant-switch {
+    &:focus {
+      box-shadow: none;
+    }
+
+    &.ant-switch-checked:focus {
+      box-shadow: none;
+    }
+  }
+
   // 表单
   .ant-form {
     // 表单