diff --git a/packages/flat-components/.eslintignore b/packages/flat-components/.eslintignore
index 16c6af043cd..c736f1c5f54 100644
--- a/packages/flat-components/.eslintignore
+++ b/packages/flat-components/.eslintignore
@@ -1,3 +1,5 @@
 node_modules/
 dist/
 public/
+storybook-static/
+.eslintrc.js
\ No newline at end of file
diff --git a/packages/flat-components/.eslintrc.js b/packages/flat-components/.eslintrc.js
index c1e250369c4..ecb3a867b90 100644
--- a/packages/flat-components/.eslintrc.js
+++ b/packages/flat-components/.eslintrc.js
@@ -1,15 +1,20 @@
 module.exports = {
+    parser: "@typescript-eslint/parser",
     extends: [
         "eslint:recommended",
         "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
         "react-app",
         "plugin:jsx-a11y/recommended",
         "plugin:@netless/recommended",
+        "plugin:prettier/recommended",
     ],
-    plugins: ["jsx-a11y", "react", "prettier"],
+    plugins: ["jsx-a11y", "react", "@netless", "prettier", "@typescript-eslint"],
     parserOptions: {
         ecmaVersion: 2018,
-        sourceType: "module",
+        project: "tsconfig.json",
+        tsconfigRootDir: __dirname,
         ecmaFeatures: {
             jsx: true,
         },
@@ -205,6 +210,56 @@ module.exports = {
         "@typescript-eslint/no-redeclare": "off",
         "no-use-before-define": "off",
         "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/array-type": [
+            "error",
+            {
+                default: "array-simple",
+                readonly: "array-simple",
+            },
+        ],
+        "@typescript-eslint/consistent-type-assertions": "error",
+        "@typescript-eslint/explicit-member-accessibility": [
+            "error",
+            {
+                accessibility: "explicit",
+                overrides: {
+                    accessors: "explicit",
+                    constructors: "explicit",
+                },
+            },
+        ],
+        "@typescript-eslint/member-delimiter-style": [
+            "error",
+            {
+                multiline: {
+                    delimiter: "semi",
+                    requireLast: true,
+                },
+                singleline: {
+                    delimiter: "semi",
+                    requireLast: false,
+                },
+            },
+        ],
+        "@typescript-eslint/no-unused-expressions": "error",
+        "@typescript-eslint/prefer-namespace-keyword": "error",
+        "@typescript-eslint/quotes": ["error", "double"],
+        "@typescript-eslint/semi": ["error", "always"],
+        "@typescript-eslint/type-annotation-spacing": "error",
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/no-unsafe-call": "off",
+        "@typescript-eslint/no-unsafe-return": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/ban-types": "off",
+        "@typescript-eslint/unbound-method": "off",
+        "@typescript-eslint/no-unsafe-assignment": "off",
+        "@typescript-eslint/no-unsafe-member-access": "off",
+        "prettier/prettier": "error",
+        "@typescript-eslint/restrict-template-expressions": "off",
+        "@typescript-eslint/no-misused-promises": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-var-requires": "off",
     },
 
     overrides: [
diff --git a/packages/flat-components/.storybook/main.js b/packages/flat-components/.storybook/main.js
index 043266e4869..afd173d287e 100644
--- a/packages/flat-components/.storybook/main.js
+++ b/packages/flat-components/.storybook/main.js
@@ -1,3 +1,7 @@
+const path = require("path");
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
+const ESLintPlugin = require("eslint-webpack-plugin");
+
 module.exports = {
     stories: [
         "../src/**/*.stories.mdx",
@@ -17,6 +21,23 @@ module.exports = {
     webpackFinal: async config => {
         setupUrlLoader(config);
 
+        config.plugins.push(
+            new ESLintPlugin({
+                fix: true,
+                extensions: ["ts", "tsx"],
+            }),
+            new ForkTsCheckerWebpackPlugin({
+                typescript: {
+                    configFile: path.resolve(__dirname, "..", "tsconfig.json"),
+                    diagnosticOptions: {
+                        semantic: true,
+                        syntactic: true,
+                        declaration: true,
+                    },
+                },
+            }),
+        );
+
         config.module.rules.unshift({
             test: /\.(sass|scss)(\?.*)?$/i,
             sideEffects: true,
diff --git a/packages/flat-components/package.json b/packages/flat-components/package.json
index 1bd37390be2..f203592526f 100644
--- a/packages/flat-components/package.json
+++ b/packages/flat-components/package.json
@@ -71,9 +71,10 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-app": "^6.2.2",
+    "eslint-webpack-plugin": "^3.0.1",
     "faker": "^5.4.0",
     "flat-types": "^0.1.0",
-    "fork-ts-checker-webpack-plugin": "^6.0.4",
+    "fork-ts-checker-webpack-plugin": "^6.3.2",
     "i18next": "^20.3.1",
     "i18next-browser-languagedetector": "^6.0.1",
     "less": "^3.12.2",
diff --git a/packages/flat-components/src/components/ClassroomPage/TopBar/TopBarRightBtn/TopBarRightBtn.stories.tsx b/packages/flat-components/src/components/ClassroomPage/TopBar/TopBarRightBtn/TopBarRightBtn.stories.tsx
index d0a299aff93..1487735a9eb 100644
--- a/packages/flat-components/src/components/ClassroomPage/TopBar/TopBarRightBtn/TopBarRightBtn.stories.tsx
+++ b/packages/flat-components/src/components/ClassroomPage/TopBar/TopBarRightBtn/TopBarRightBtn.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, Story } from "@storybook/react";
 import React from "react";
 import { TopBarRightBtn, TopBarRightBtnProps } from ".";
-import faker from "faker"
+import faker from "faker";
 import { UserAddOutlined } from "@ant-design/icons";
 
 const storyMeta: Meta = {
@@ -15,5 +15,5 @@ export const Overview: Story<TopBarRightBtnProps> = args => <TopBarRightBtn {...
 Overview.args = {
     title: "Hello, world",
     disabled: faker.random.boolean(),
-    icon: <UserAddOutlined />
+    icon: <UserAddOutlined />,
 };
diff --git a/packages/flat-components/src/components/ClassroomPage/TopBar/TopBarRoundBtn/TopBarRoundBtn.stories.tsx b/packages/flat-components/src/components/ClassroomPage/TopBar/TopBarRoundBtn/TopBarRoundBtn.stories.tsx
index 13cf9cde3e3..7068619b835 100644
--- a/packages/flat-components/src/components/ClassroomPage/TopBar/TopBarRoundBtn/TopBarRoundBtn.stories.tsx
+++ b/packages/flat-components/src/components/ClassroomPage/TopBar/TopBarRoundBtn/TopBarRoundBtn.stories.tsx
@@ -16,5 +16,5 @@ Overview.args = {
     dark: faker.random.boolean(),
     icon: <UserAddOutlined />,
     className: "pa2",
-    children: "Hello, world!"
+    children: "Hello, world!",
 };
diff --git a/packages/flat-components/src/components/CloudStorage/CloudStorageFileTitle/index.tsx b/packages/flat-components/src/components/CloudStorage/CloudStorageFileTitle/index.tsx
index 24d0bb79af2..bc2994ae213 100644
--- a/packages/flat-components/src/components/CloudStorage/CloudStorageFileTitle/index.tsx
+++ b/packages/flat-components/src/components/CloudStorage/CloudStorageFileTitle/index.tsx
@@ -53,8 +53,13 @@ export const CloudStorageFileTitle = React.memo<CloudStorageFileTitleProps>(
 
         return (
             <span
-                title={`${isConvertError ? t('transcoding-failure') : isConverting ? t('transcoding-in-progress') : ""
-                    }${fileName}`}
+                title={`${
+                    isConvertError
+                        ? t("transcoding-failure")
+                        : isConverting
+                        ? t("transcoding-in-progress")
+                        : ""
+                }${fileName}`}
                 {...restProps}
                 className={classNames(restProps.className, "cloud-storage-file-title", {
                     "is-convert-ready": !isConverting && !isConvertError,
diff --git a/packages/flat-components/src/components/CloudStorage/CloudStorageUploadItem/index.tsx b/packages/flat-components/src/components/CloudStorage/CloudStorageUploadItem/index.tsx
index de16a23cc30..cd05c6d5551 100644
--- a/packages/flat-components/src/components/CloudStorage/CloudStorageUploadItem/index.tsx
+++ b/packages/flat-components/src/components/CloudStorage/CloudStorageUploadItem/index.tsx
@@ -64,7 +64,9 @@ export const CloudStorageUploadItem: React.FC<CloudStorageUploadItemProps> = ({
             case "error": {
                 return (
                     <>
-                        <span className="cloud-storage-upload-status is-error">{t('upload-fail')}</span>
+                        <span className="cloud-storage-upload-status is-error">
+                            {t("upload-fail")}
+                        </span>
                         <Button
                             className="cloud-storage-upload-status-btn"
                             shape="circle"
@@ -79,7 +81,9 @@ export const CloudStorageUploadItem: React.FC<CloudStorageUploadItemProps> = ({
             case "success": {
                 return (
                     <>
-                        <span className="cloud-storage-upload-status is-success">{t('upload-success')}</span>
+                        <span className="cloud-storage-upload-status is-success">
+                            {t("upload-success")}
+                        </span>
                         <div className="cloud-storage-upload-status-btn">
                             <img width={22} height={22} src={checkSVG} aria-hidden />
                         </div>
@@ -89,7 +93,7 @@ export const CloudStorageUploadItem: React.FC<CloudStorageUploadItemProps> = ({
             default: {
                 return (
                     <>
-                        <span className="cloud-storage-upload-status">{t('pending-upload')}</span>
+                        <span className="cloud-storage-upload-status">{t("pending-upload")}</span>
                         <Button
                             className="cloud-storage-upload-status-btn"
                             shape="circle"
diff --git a/packages/flat-components/src/components/CloudStorage/CloudStorageUploadTitle/index.tsx b/packages/flat-components/src/components/CloudStorage/CloudStorageUploadTitle/index.tsx
index 38c6a9c2cdb..702b6901fa5 100644
--- a/packages/flat-components/src/components/CloudStorage/CloudStorageUploadTitle/index.tsx
+++ b/packages/flat-components/src/components/CloudStorage/CloudStorageUploadTitle/index.tsx
@@ -31,7 +31,11 @@ export const CloudStorageUploadTitle = React.memo<CloudStorageUploadTitleProps>(
                     />
                 )}
                 <h1 className="cloud-storage-upload-title-content">
-                    {finishWithError ? t('upload-exception') : isFinish ? t('upload-completed') : t('transfer-list')}
+                    {finishWithError
+                        ? t("upload-exception")
+                        : isFinish
+                        ? t("upload-completed")
+                        : t("transfer-list")}
                 </h1>
                 {!isFinish && !finishWithError && total && !Number.isNaN(finished) && (
                     <span className="cloud-storage-upload-title-count">
diff --git a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderBeginTimePicker.tsx b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderBeginTimePicker.tsx
index 4bbe3c0b194..8d5c9661438 100644
--- a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderBeginTimePicker.tsx
+++ b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderBeginTimePicker.tsx
@@ -34,7 +34,7 @@ export function renderBeginTimePicker(
 
     function validateTime(): RuleObject {
         return {
-            validator: async (_, value: Date) => {
+            validator: (_, value: Date): void => {
                 if (isBefore(value, getRoughNow())) {
                     throw new Error(t("begin-time-cannot-be-in-the-past"));
                 }
diff --git a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderEndTimePicker.tsx b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderEndTimePicker.tsx
index 58312f34330..84dcbde2854 100644
--- a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderEndTimePicker.tsx
+++ b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderEndTimePicker.tsx
@@ -25,7 +25,7 @@ export function renderEndTimePicker(
 
     function validateTime(): RuleObject {
         return {
-            validator: async (_, value: Date) => {
+            validator: (_, value: Date): void => {
                 const beginTime: EditRoomFormValues["beginTime"] = form.getFieldValue("beginTime");
                 const compareTime = addMinutes(beginTime, MIN_CLASS_DURATION);
                 if (isBefore(value, compareTime)) {
diff --git a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx
index 5e4de6e353d..0a02052dbf0 100644
--- a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx
+++ b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx
@@ -179,7 +179,7 @@ export const renderPeriodicForm = (t: TFunction<string>, lang: string) =>
 
         function validatePeriodicEndTime(): RuleObject {
             return {
-                validator: async (_, value: Date) => {
+                validator: (_, value: Date): void => {
                     const {
                         periodic,
                         beginTime,
diff --git a/packages/flat-components/src/components/HomePage/RoomList/index.tsx b/packages/flat-components/src/components/HomePage/RoomList/index.tsx
index 4dee190b48d..598d8b308b2 100644
--- a/packages/flat-components/src/components/HomePage/RoomList/index.tsx
+++ b/packages/flat-components/src/components/HomePage/RoomList/index.tsx
@@ -40,10 +40,9 @@ export interface RoomListItemButton<T extends string> {
     text: string;
     disabled?: boolean;
 }
-export type RoomListItemButtons<T extends string> = (
-    | RoomListItemButton<T>
-    | RoomListItemButton<T>[]
-)[];
+export type RoomListItemButtons<T extends string> = Array<
+    RoomListItemButton<T> | Array<RoomListItemButton<T>>
+>;
 
 export interface RoomListItemProps<T extends string> {
     title: string;
@@ -121,7 +120,7 @@ function renderButtons<T extends string>(
 }
 
 function renderSubMenu<T extends string>(
-    buttons: RoomListItemButton<T>[],
+    buttons: Array<RoomListItemButton<T>>,
     overlayClassName?: string,
     onClickMenu?: (key: T) => void,
 ): React.ReactNode {
@@ -186,10 +185,10 @@ export interface RoomListProps<T extends string> {
     /** will be hidden on mobile */
     title?: string;
     /** will be title on mobile */
-    filters?: {
+    filters?: Array<{
         title: string;
         key: T;
-    }[];
+    }>;
     activeTab?: T;
     onTabActive?: (key: T) => void;
     style?: React.CSSProperties;
diff --git a/packages/flat-components/src/components/InviteModal/InviteModal.stories.tsx b/packages/flat-components/src/components/InviteModal/InviteModal.stories.tsx
index a730ee4989e..608e9266c28 100644
--- a/packages/flat-components/src/components/InviteModal/InviteModal.stories.tsx
+++ b/packages/flat-components/src/components/InviteModal/InviteModal.stories.tsx
@@ -30,7 +30,8 @@ Overview.args = {
     baseUrl: "https://flat-web.whiteboard.agora.io/join/34513345f235",
     userName: "Flat",
     onCopy: () => {
-        message.success("复制成功");
+        void message.success("复制成功");
     },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onCancel: () => {},
 };
diff --git a/packages/flat-components/src/components/InviteModal/index.tsx b/packages/flat-components/src/components/InviteModal/index.tsx
index 372ff30b965..3082eca84e0 100644
--- a/packages/flat-components/src/components/InviteModal/index.tsx
+++ b/packages/flat-components/src/components/InviteModal/index.tsx
@@ -39,11 +39,11 @@ export const InviteModal: React.FC<InviteModalProps> = ({
             return "";
         }
 
-        const formatBeginTime = completeTimeFormat(beginTime!);
+        const formatBeginTime = completeTimeFormat(beginTime);
         const formatEndTime =
-            differenceInCalendarDays(beginTime!, endTime!) !== 0
-                ? completeTimeFormat(endTime!)
-                : onlySuffixTimeFormat(endTime!);
+            differenceInCalendarDays(beginTime, endTime) !== 0
+                ? completeTimeFormat(endTime)
+                : onlySuffixTimeFormat(endTime);
 
         return `${formatBeginTime}~${formatEndTime}`;
     }, [beginTime, endTime]);
diff --git a/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx b/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx
index ef88a904ba2..f55a45d34d0 100644
--- a/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx
+++ b/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx
@@ -41,7 +41,7 @@ export const LoginContent: React.FC<LoginContentProps> = ({ onLogin, privacyURL,
                             <LoginChannel
                                 onLogin={loginChannel => {
                                     if (!isChecked) {
-                                        message.info(t("agree-terms"));
+                                        void message.info(t("agree-terms"));
                                     } else {
                                         setInPageLogin(onLogin(loginChannel));
                                     }
diff --git a/packages/flat-components/src/components/LoginPage/index.tsx b/packages/flat-components/src/components/LoginPage/index.tsx
index aeba9fcc6a6..96f937695e9 100644
--- a/packages/flat-components/src/components/LoginPage/index.tsx
+++ b/packages/flat-components/src/components/LoginPage/index.tsx
@@ -15,7 +15,7 @@ export interface LoginPanelProps {
     serviceURL?: string;
 }
 
-export const LoginPanel: React.FC<LoginPanelProps> = (props) => {
+export const LoginPanel: React.FC<LoginPanelProps> = props => {
     return (
         <div className="login-panel-container">
             <div className="login-panel-cover">
diff --git a/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx b/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx
index 7c27b415141..1b218c7455e 100644
--- a/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx
+++ b/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx
@@ -64,7 +64,7 @@ export const MoreMenu: React.FC<MoreMenuProps> = ({
                             userName={userName}
                             onCopy={text => {
                                 onCopyInvitation(text);
-                                message.success(t("copy-success"));
+                                void message.success(t("copy-success"));
                                 setInviteRoomVisible(false);
                             }}
                             onCancel={() => setInviteRoomVisible(false)}
diff --git a/packages/flat-components/src/components/PeriodicRoomPage/index.tsx b/packages/flat-components/src/components/PeriodicRoomPage/index.tsx
index 1fe4e1cd0e3..689d9f86a46 100644
--- a/packages/flat-components/src/components/PeriodicRoomPage/index.tsx
+++ b/packages/flat-components/src/components/PeriodicRoomPage/index.tsx
@@ -13,7 +13,7 @@ import { CancelPeriodicRoomModal } from "./CancelPeriodicRoomModal";
 import { useTranslation } from "react-i18next";
 
 export interface PeriodicRoomPanelProps {
-    rooms: (RoomInfo | undefined)[];
+    rooms: Array<RoomInfo | undefined>;
     userName: string;
     isCreator: boolean;
     inviteBaseUrl: string;
diff --git a/packages/flat-components/src/components/RemoveRoomModal/RemoveRoomModal.stories.tsx b/packages/flat-components/src/components/RemoveRoomModal/RemoveRoomModal.stories.tsx
index 7381d91cfac..d86d11beca6 100644
--- a/packages/flat-components/src/components/RemoveRoomModal/RemoveRoomModal.stories.tsx
+++ b/packages/flat-components/src/components/RemoveRoomModal/RemoveRoomModal.stories.tsx
@@ -19,6 +19,8 @@ Overview.args = {
     isCreator: true,
     periodicUUID: "periodicUUID",
     isPeriodicDetailsPage: true,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onCancel: () => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onCancelRoom: () => {},
 };
diff --git a/packages/flat-components/src/components/RoomDetailPage/RoomDetailFooter/index.tsx b/packages/flat-components/src/components/RoomDetailPage/RoomDetailFooter/index.tsx
index 44ecf13534f..f6aa4e53471 100644
--- a/packages/flat-components/src/components/RoomDetailPage/RoomDetailFooter/index.tsx
+++ b/packages/flat-components/src/components/RoomDetailPage/RoomDetailFooter/index.tsx
@@ -91,7 +91,7 @@ export const RoomDetailFooter = observer<RoomDetailFooterProps>(function RoomDet
                 userName={userName}
                 onCopy={text => {
                     onCopyInvitation(text);
-                    message.success(t("copy-success"));
+                    void message.success(t("copy-success"));
                     hideInviteModal();
                 }}
                 onCancel={hideInviteModal}
diff --git a/packages/flat-components/src/containers/CloudStorageContainer/CloudStorageContainer.stories.tsx b/packages/flat-components/src/containers/CloudStorageContainer/CloudStorageContainer.stories.tsx
index f95ec86571e..b38e00a8a64 100644
--- a/packages/flat-components/src/containers/CloudStorageContainer/CloudStorageContainer.stories.tsx
+++ b/packages/flat-components/src/containers/CloudStorageContainer/CloudStorageContainer.stories.tsx
@@ -35,22 +35,22 @@ type FakeStoreImplProps = typeof fakeStoreImplProps[number];
 type FakeStoreConfig = Pick<CloudStorageStore, FakeStoreImplProps>;
 
 class FakeStore extends CloudStorageStore {
-    onBatchDelete;
-    onUpload;
-    onUploadCancel;
-    onUploadPanelClose;
-    onUploadRetry;
-    onItemMenuClick: FakeStoreConfig["onItemMenuClick"];
-    onItemTitleClick;
-    onNewFileName: FakeStoreConfig["onNewFileName"];
-
-    pendingUploadTasks: CloudStorageStore["pendingUploadTasks"] = [];
-    uploadingUploadTasks: CloudStorageStore["uploadingUploadTasks"] = [];
-    successUploadTasks: CloudStorageStore["successUploadTasks"] = [];
-    failedUploadTasks: CloudStorageStore["failedUploadTasks"] = [];
-    files: CloudStorageStore["files"] = [];
-
-    constructor(config: FakeStoreConfig) {
+    public onBatchDelete;
+    public onUpload;
+    public onUploadCancel;
+    public onUploadPanelClose;
+    public onUploadRetry;
+    public onItemMenuClick: FakeStoreConfig["onItemMenuClick"];
+    public onItemTitleClick;
+    public onNewFileName: FakeStoreConfig["onNewFileName"];
+
+    public pendingUploadTasks: CloudStorageStore["pendingUploadTasks"] = [];
+    public uploadingUploadTasks: CloudStorageStore["uploadingUploadTasks"] = [];
+    public successUploadTasks: CloudStorageStore["successUploadTasks"] = [];
+    public failedUploadTasks: CloudStorageStore["failedUploadTasks"] = [];
+    public files: CloudStorageStore["files"] = [];
+
+    public constructor(config: FakeStoreConfig) {
         super();
 
         this.files = Array(25)
@@ -144,7 +144,7 @@ class FakeStore extends CloudStorageStore {
         );
     }
 
-    fileMenus = (): Array<{ key: React.Key; name: React.ReactNode }> => [
+    public fileMenus = (): Array<{ key: React.Key; name: React.ReactNode }> => [
         { key: "download", name: "下载" },
         { key: "rename", name: "重命名" },
         { key: "delete", name: <span className="red">删除</span> },
diff --git a/packages/flat-components/src/containers/CloudStorageContainer/store.ts b/packages/flat-components/src/containers/CloudStorageContainer/store.ts
index 60ceb3c06f4..7a3fa338257 100644
--- a/packages/flat-components/src/containers/CloudStorageContainer/store.ts
+++ b/packages/flat-components/src/containers/CloudStorageContainer/store.ts
@@ -12,28 +12,28 @@ export type FileUUID = string;
 
 export abstract class CloudStorageStore {
     /** Compact UI for small panel */
-    compact = false;
+    public compact = false;
     /** User total cloud storage usage */
-    totalUsage = NaN;
+    public totalUsage = NaN;
     /** User selected file uuids */
-    selectedFileUUIDs = observable.array<FileUUID>();
+    public selectedFileUUIDs = observable.array<FileUUID>();
     /** It changes when user toggles the expand button */
-    isUploadPanelExpand = false;
+    public isUploadPanelExpand = false;
     /** UUID of file that is under renaming */
-    renamingFileUUID?: FileUUID = "";
+    public renamingFileUUID?: FileUUID = "";
 
     /** Display upload panel */
-    get isUploadPanelVisible(): boolean {
+    public get isUploadPanelVisible(): boolean {
         return this.uploadTotalCount > 0;
     }
 
     /** Human readable user total cloud storage usage */
-    get totalUsageHR(): string {
+    public get totalUsageHR(): string {
         return Number.isNaN(this.totalUsage) ? "" : prettyBytes(this.totalUsage);
     }
 
     /** Uploading -> Error -> Idle -> Success */
-    get sortedUploadTasks(): CloudStorageUploadTask[] {
+    public get sortedUploadTasks(): CloudStorageUploadTask[] {
         return observable.array([
             ...this.uploadingUploadTasks,
             ...this.failedUploadTasks,
@@ -43,7 +43,7 @@ export abstract class CloudStorageStore {
     }
 
     /** If upload finishes with error */
-    get uploadFinishWithError(): boolean {
+    public get uploadFinishWithError(): boolean {
         if (this.pendingUploadTasks.length > 0 || this.uploadingUploadTasks.length > 0) {
             return false;
         }
@@ -51,17 +51,17 @@ export abstract class CloudStorageStore {
     }
 
     /** Number of finished upload */
-    get uploadFinishedCount(): number {
+    public get uploadFinishedCount(): number {
         // @TODO use percentage instead
         return this.successUploadTasks.length;
     }
 
     /** Number of total upload */
-    get uploadTotalCount(): number {
+    public get uploadTotalCount(): number {
         return this.sortedUploadTasks.length;
     }
 
-    constructor() {
+    protected constructor() {
         makeObservable(this, {
             compact: observable,
             totalUsage: observable,
@@ -84,25 +84,25 @@ export abstract class CloudStorageStore {
         });
     }
 
-    setRenamePanel = (fileUUID?: FileUUID): void => {
+    public setRenamePanel = (fileUUID?: FileUUID): void => {
         this.renamingFileUUID = fileUUID;
     };
 
-    setPanelExpand = (isExpand: boolean): void => {
+    public setPanelExpand = (isExpand: boolean): void => {
         this.isUploadPanelExpand = isExpand;
     };
 
-    setCompact = (compact: boolean): void => {
+    public setCompact = (compact: boolean): void => {
         this.compact = compact;
     };
 
     /** When file list item selection changed */
-    onSelectionChange = (fileUUIDs: FileUUID[]): void => {
+    public onSelectionChange = (fileUUIDs: FileUUID[]): void => {
         this.selectedFileUUIDs.replace(fileUUIDs);
     };
 
     /** When a rename event is received. Could be empty. Put business logic in `onNewFileName` instead. */
-    onRename = (fileUUID: FileUUID, fileName?: CloudStorageFileName): void => {
+    public onRename = (fileUUID: FileUUID, fileName?: CloudStorageFileName): void => {
         // hide rename panel
         this.renamingFileUUID = "";
 
diff --git a/packages/flat-components/src/utils/room.ts b/packages/flat-components/src/utils/room.ts
index 20a0281d62d..bb668d79570 100644
--- a/packages/flat-components/src/utils/room.ts
+++ b/packages/flat-components/src/utils/room.ts
@@ -27,7 +27,7 @@ export const excludeRange = (slice1: number, slice2?: number): number[] =>
     slice2
         ? Array(slice2 - slice1 + 1)
               .fill(slice1)
-              .map((i, k) => i + k)
+              .map((i: number, k) => i + k)
         : Array.from(Array(slice1).keys());
 
 /** get a now Date object with 0 second and 0 millisecond */
@@ -156,7 +156,7 @@ export function syncPeriodicEndAmount(
 
     form.setFieldsValue({ periodic: newPeriodic });
 
-    form.validateFields();
+    void form.validateFields();
 }
 
 export function formatTime(time: number, lang: string): { date: string; time: string } | null {
diff --git a/packages/flat-components/tsconfig.json b/packages/flat-components/tsconfig.json
index e44db1324fd..457e910d1fb 100644
--- a/packages/flat-components/tsconfig.json
+++ b/packages/flat-components/tsconfig.json
@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig.base.json",
-  "include": ["src/**/*.ts", "src/**/*.tsx"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "theme/**/*.tsx"]
 }
diff --git a/yarn.lock b/yarn.lock
index 414034b45b4..0fea84a0d38 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2981,6 +2981,14 @@
     "@types/estree" "*"
     "@types/json-schema" "*"
 
+"@types/eslint@^7.2.14":
+  version "7.28.0"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.28.0.tgz#7e41f2481d301c68e14f483fe10b017753ce8d5a"
+  integrity sha512-07XlgzX0YJUn4iG1ocY4IX9DzKSmMGUs6ESKlxWhZRaa0fatIWaHWUVapcuGa8r5HFnTqzj+4OCjd5f7EZ/i/A==
+  dependencies:
+    "@types/estree" "*"
+    "@types/json-schema" "*"
+
 "@types/estree@*":
   version "0.0.46"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.46.tgz#0fb6bfbbeabd7a30880504993369c4bf1deab1fe"
@@ -3098,6 +3106,11 @@
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
   integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
 
+"@types/json-schema@^7.0.8":
+  version "7.0.9"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
+  integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -8347,6 +8360,17 @@ eslint-webpack-plugin@^2.5.4:
     normalize-path "^3.0.0"
     schema-utils "^3.0.0"
 
+eslint-webpack-plugin@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-webpack-plugin/-/eslint-webpack-plugin-3.0.1.tgz#0990a80e9d5927e7e68365f93426cb340679e88c"
+  integrity sha512-PAHHDjCg2yWBNoiBPYLZWcv+M83urkslQKER7XvK84lo5YLcihJK6qwnCH2Fkt3eVdX+G1iyGZRlKsIhTiczHw==
+  dependencies:
+    "@types/eslint" "^7.2.14"
+    jest-worker "^27.0.6"
+    micromatch "^4.0.4"
+    normalize-path "^3.0.0"
+    schema-utils "^3.1.0"
+
 eslint@^7.26.0:
   version "7.26.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.26.0.tgz#d416fdcdcb3236cd8f282065312813f8c13982f6"
@@ -9046,10 +9070,10 @@ fork-ts-checker-webpack-plugin@4.1.6, fork-ts-checker-webpack-plugin@^4.1.4:
     tapable "^1.0.0"
     worker-rpc "^0.1.0"
 
-fork-ts-checker-webpack-plugin@^6.0.4:
-  version "6.0.8"
-  resolved "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.0.8.tgz#437bcc0e4e1f9f56e08e61defa5df92648eef27d"
-  integrity sha512-2K6Ozamm6TSL5heFIwPhX5+VsOBiiKf9PzaPFS7kwzrILKX+jlN3DBQc5v/6YYZ2oKJyImg3bY0/uZc7cDbDYQ==
+fork-ts-checker-webpack-plugin@^6.2.8:
+  version "6.2.8"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.2.8.tgz#1728ea5a7790d5bdcebf2bde93861dc9c16bc3bb"
+  integrity sha512-KduEntkrnDejqZ6zw8+pRpsENPtBNP9J92bJIFXBi96tySa3csyZiVIyqKwdN3KqpVWwtQIcu3j91DDbvuWB4A==
   dependencies:
     "@babel/code-frame" "^7.8.3"
     "@types/json-schema" "^7.0.5"
@@ -9058,16 +9082,17 @@ fork-ts-checker-webpack-plugin@^6.0.4:
     cosmiconfig "^6.0.0"
     deepmerge "^4.2.2"
     fs-extra "^9.0.0"
+    glob "^7.1.6"
     memfs "^3.1.2"
     minimatch "^3.0.4"
     schema-utils "2.7.0"
     semver "^7.3.2"
     tapable "^1.0.0"
 
-fork-ts-checker-webpack-plugin@^6.2.8:
-  version "6.2.8"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.2.8.tgz#1728ea5a7790d5bdcebf2bde93861dc9c16bc3bb"
-  integrity sha512-KduEntkrnDejqZ6zw8+pRpsENPtBNP9J92bJIFXBi96tySa3csyZiVIyqKwdN3KqpVWwtQIcu3j91DDbvuWB4A==
+fork-ts-checker-webpack-plugin@^6.2.9:
+  version "6.2.9"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.2.9.tgz#08f51b685a48b09ab3ec079a8501762422443120"
+  integrity sha512-D/KSb/2VeiOy3odDerrC16WiZ1t5TLwiFfZmuDeTXcf3Km79M+f8nTCIdKkokxybybrgMcStbx0QpGaseePxnA==
   dependencies:
     "@babel/code-frame" "^7.8.3"
     "@types/json-schema" "^7.0.5"
@@ -9083,10 +9108,10 @@ fork-ts-checker-webpack-plugin@^6.2.8:
     semver "^7.3.2"
     tapable "^1.0.0"
 
-fork-ts-checker-webpack-plugin@^6.2.9:
-  version "6.2.9"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.2.9.tgz#08f51b685a48b09ab3ec079a8501762422443120"
-  integrity sha512-D/KSb/2VeiOy3odDerrC16WiZ1t5TLwiFfZmuDeTXcf3Km79M+f8nTCIdKkokxybybrgMcStbx0QpGaseePxnA==
+fork-ts-checker-webpack-plugin@^6.3.2:
+  version "6.3.2"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.3.2.tgz#96555f9f05c1cf44af3aef7db632489a3b6ff085"
+  integrity sha512-L3n1lrV20pRa7ocAuM2YW4Ux1yHM8+dV4shqPdHf1xoeG5KQhp3o0YySvNsBKBISQOCN4N2Db9DV4xYN6xXwyQ==
   dependencies:
     "@babel/code-frame" "^7.8.3"
     "@types/json-schema" "^7.0.5"
@@ -11282,6 +11307,15 @@ jest-worker@^26.2.1, jest-worker@^26.6.2:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
+jest-worker@^27.0.6:
+  version "27.0.6"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.0.6.tgz#a5fdb1e14ad34eb228cfe162d9f729cdbfa28aed"
+  integrity sha512-qupxcj/dRuA3xHPMUd40gr2EaAurFbkwzOh7wfPaeE9id7hyjURRQoqNfHifHK3XjJU6YJJUQKILGUnwGPEOCA==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
 jju@~1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz#a3abe2718af241a2b2904f84a625970f389ae32a"
@@ -16247,6 +16281,15 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+schema-utils@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
+  integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
 screenfull@^5.0.0, screenfull@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.1.0.tgz#85c13c70f4ead4c1b8a935c70010dfdcd2c0e5c8"
@@ -17300,6 +17343,13 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+supports-color@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
 svgo@^1.0.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"