From ef989a36242b97b3bec58856b16ea6cb3b9803ad Mon Sep 17 00:00:00 2001
From: Frederik Shull <zlyfer@pm.me>
Date: Thu, 26 Feb 2026 03:48:13 +0100
Subject: [PATCH 1/6] i18n: fix typo (#690)

fixed a typo I found
tab group
---
 src/i18n/message/app/option-resource.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/message/app/option-resource.json b/src/i18n/message/app/option-resource.json
index a16f19e9..e79fe62a 100644
--- a/src/i18n/message/app/option-resource.json
+++ b/src/i18n/message/app/option-resource.json
@@ -299,7 +299,7 @@
             "localFileTime": "local files",
             "localFilesInfo": "Supports files of types such as PDF, image, txt and json.",
             "countTabGroup": "{input} Whether to track the time of tab groups {info}",
-            "tabGroupInfo": "When you delete a tag group, the data will also be deleted.",
+            "tabGroupInfo": "When you delete a tab group, the data will also be deleted.",
             "tabGroupsPermGrant": "This feature requires relevant permissions",
             "fileAccessDisabled": "Access to file URLs is currently not allowed. Please enable it on the manage page first",
             "weekStart": "The first day for each week {input}",
@@ -1595,4 +1595,4 @@
         "reloadButton": "Odśwież",
         "defaultValue": "Domyślnie: {default}"
     }
-}
\ No newline at end of file
+}

From ac9f1b6f9e2ea3f9e1827c385fbb9be3a0715f19 Mon Sep 17 00:00:00 2001
From: sheepie <returnzhy1996@outlook.com>
Date: Fri, 27 Feb 2026 00:25:02 +0800
Subject: [PATCH 2/6] fix: upgrade idb (#691)

---
 package.json                                |   2 +-
 src/background/index.ts                     |   2 +-
 src/background/migrator/indexed-migrator.ts |  20 +-
 src/database/common/indexed-storage.ts      | 195 +++++++++++++++-----
 src/database/stat-database/idb.ts           |  34 +---
 test/database/idb.ts                        |  17 --
 test/database/stat-database/idb.test.ts     |  12 +-
 7 files changed, 187 insertions(+), 95 deletions(-)
 delete mode 100644 test/database/idb.ts

diff --git a/package.json b/package.json
index e470059d..d587a9b2 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
         "@types/chrome": "0.1.37",
         "@types/decompress": "^4.2.7",
         "@types/jest": "^30.0.0",
-        "@types/node": "^25.3.0",
+        "@types/node": "^25.3.1",
         "@types/punycode": "^2.1.4",
         "@vue/babel-plugin-jsx": "^2.0.1",
         "babel-loader": "^10.0.0",
diff --git a/src/background/index.ts b/src/background/index.ts
index 1c6fbfa0..4dbad3cb 100644
--- a/src/background/index.ts
+++ b/src/background/index.ts
@@ -15,7 +15,7 @@ import badgeTextManager from "./badge-manager"
 import initBrowserAction from "./browser-action-manager"
 import initCsHandler from "./content-script-handler"
 import initDataCleaner from "./data-cleaner"
-import handleInstall from "./install-handler"
+import handleInstall from './install-handler'
 import initLimitProcessor from "./limit-processor"
 import MessageDispatcher from "./message-dispatcher"
 import VersionMigrator from "./migrator"
diff --git a/src/background/migrator/indexed-migrator.ts b/src/background/migrator/indexed-migrator.ts
index 5c2c7119..63ee0169 100644
--- a/src/background/migrator/indexed-migrator.ts
+++ b/src/background/migrator/indexed-migrator.ts
@@ -1,10 +1,28 @@
+import { BaseIDBStorage } from '@db/common/indexed-storage'
+import { IDBStatDatabase } from '@db/stat-database/idb'
 import timelineDatabase from '@db/timeline-database'
+import IDBTimelineDatabase from '@db/timeline-database/idb'
 import type { Migrator } from './types'
 
+async function upgradeIndexedDB() {
+    try {
+        const storages: BaseIDBStorage<any>[] = [new IDBStatDatabase(), new IDBTimelineDatabase()]
+        for (const storage of storages) {
+            await storage.upgrade()
+        }
+        console.log('IndexedDB upgraded successfully')
+    } catch (error) {
+        console.error('Failed to upgrade IndexedDB', error)
+    }
+}
+
 class IndexedMigrator implements Migrator {
     onInstall(): void {
     }
-    onUpdate(_version: string): void {
+
+    async onUpdate(_version: string): Promise<void> {
+        await upgradeIndexedDB()
+
         timelineDatabase.migrateFromClassic()
             .then(() => console.log('Timeline data migrated to IndexedDB'))
             .catch(e => console.error('Failed to migrate timeline data to IndexedDB', e))
diff --git a/src/database/common/indexed-storage.ts b/src/database/common/indexed-storage.ts
index 893d19be..b228bb5f 100644
--- a/src/database/common/indexed-storage.ts
+++ b/src/database/common/indexed-storage.ts
@@ -63,6 +63,21 @@ export async function iterateCursor<T = unknown>(
     })
 }
 
+type TransactionError = 'Connection' | 'StoreNotFound' | 'Unknown'
+
+const detectTransactionError = (err: unknown): TransactionError => {
+    if (!(err instanceof DOMException)) {
+        return 'Unknown'
+    }
+    if (err.name === 'InvalidStateError' || err.name === 'AbortError') {
+        return 'Connection'
+    }
+    if (err.name === 'NotFoundError') {
+        return 'StoreNotFound'
+    }
+    return 'Unknown'
+}
+
 export function closedRangeKey(lower: IDBValidKey | undefined, upper: IDBValidKey | undefined): IDBKeyRange | undefined {
     if (lower !== undefined && upper !== undefined) {
         if (lower > upper) {
@@ -87,6 +102,8 @@ export abstract class BaseIDBStorage<T = Record<string, unknown>> {
     private DB_NAME = `tt4b_${chrome.runtime.id}` as const
 
     private db: IDBDatabase | undefined
+    private static initPromises = new Map<string, Promise<IDBDatabase>>()
+
     abstract indexes: Index<T>[]
     abstract key: Key<T> | Key<T>[]
     abstract table: Table
@@ -94,46 +111,122 @@ export abstract class BaseIDBStorage<T = Record<string, unknown>> {
     protected async initDb(): Promise<IDBDatabase> {
         if (this.db) return this.db
 
+        let initPromise = BaseIDBStorage.initPromises.get(this.table)
+        if (!initPromise) {
+            initPromise = this.doInitDb()
+            BaseIDBStorage.initPromises.set(this.table, initPromise)
+        }
+
+        try {
+            this.db = await initPromise
+            this.setupDbCloseHandler(this.db)
+            return this.db
+        } catch (error) {
+            BaseIDBStorage.initPromises.delete(this.table)
+            throw error
+        }
+    }
+
+    private setupDbCloseHandler(db: IDBDatabase): void {
+        db.onclose = () => {
+            if (this.db !== db) return
+
+            this.db = undefined
+            BaseIDBStorage.initPromises.delete(this.table)
+        }
+    }
+
+    private async doInitDb(): Promise<IDBDatabase> {
         const factory = typeof window !== 'undefined' ? window.indexedDB : globalThis.indexedDB
-        const checkRequest = factory.open(this.DB_NAME)
 
-        return new Promise((resolve, reject) => {
-            checkRequest.onsuccess = () => {
-                const db = checkRequest.result
-                const storeExisted = db.objectStoreNames.contains(this.table)
-                const needUpgrade = !storeExisted || this.needUpgradeIndexes(db)
+        const checkDb = await new Promise<IDBDatabase>((resolve, reject) => {
+            const checkRequest = factory.open(this.DB_NAME)
+            checkRequest.onsuccess = () => resolve(checkRequest.result)
+            checkRequest.onerror = () => reject(checkRequest.error || new Error("Failed to open database"))
+        })
 
-                if (!needUpgrade) {
-                    this.db = db
-                    return resolve(db)
-                }
+        return checkDb
+    }
+
+    // Only used for testing, be careful when using in production
+    public async clear(): Promise<void> {
+        await this.withStore(store => store.clear(), 'readwrite')
+    }
+
+    async upgrade(): Promise<void> {
+        const factory = typeof window !== 'undefined' ? window.indexedDB : globalThis.indexedDB
+
+        const checkDb = await new Promise<IDBDatabase>((resolve, reject) => {
+            const checkRequest = factory.open(this.DB_NAME)
+            checkRequest.onsuccess = () => resolve(checkRequest.result)
+            checkRequest.onerror = () => reject(checkRequest.error || new Error("Failed to open database"))
+            checkRequest.onblocked = () => {
+                console.warn(`Database check blocked for "${this.table}" (DB: ${this.DB_NAME}), waiting for other connections to close`)
+            }
+        })
+
+        const storeExisted = checkDb.objectStoreNames.contains(this.table)
+        const needUpgrade = !storeExisted || this.needUpgradeIndexes(checkDb)
+
+        if (!needUpgrade) {
+            checkDb.close()
+            return
+        }
 
-                const currentVersion = db.version
-                db.close()
+        const currentVersion = checkDb.version
+        checkDb.close()
 
-                const upgradeRequest = factory.open(this.DB_NAME, currentVersion + 1)
+        return new Promise<void>((resolve, reject) => {
+            const upgradeRequest = factory.open(this.DB_NAME, currentVersion + 1)
 
-                upgradeRequest.onupgradeneeded = () => {
+            upgradeRequest.onupgradeneeded = () => {
+                try {
                     const upgradeDb = upgradeRequest.result
                     const transaction = upgradeRequest.transaction
-                    if (!transaction) return reject("Failed to get transaction of upgrading request")
+                    if (!transaction) {
+                        reject(new Error("Failed to get transaction of upgrading request"))
+                        return
+                    }
+
+                    transaction.onerror = () => {
+                        reject(transaction.error || new Error("Transaction failed"))
+                    }
+
+                    transaction.onabort = () => {
+                        reject(new Error("Upgrade transaction was aborted"))
+                    }
 
                     let store = upgradeDb.objectStoreNames.contains(this.table)
                         ? transaction.objectStore(this.table)
-                        : upgradeDb.createObjectStore(this.table, { keyPath: this.key })
+                        : upgradeDb.createObjectStore(this.table, { keyPath: this.key as string | string[] })
                     this.createIndexes(store)
+                } catch (error) {
+                    console.error("Failed to upgrade database in onupgradeneeded", error)
+                    upgradeRequest.transaction?.abort()
+                    reject(error instanceof Error ? error : new Error(String(error)))
                 }
+            }
 
-                upgradeRequest.onsuccess = () => {
-                    console.log("IndexedDB upgraded")
-                    this.db = upgradeRequest.result
-                    resolve(upgradeRequest.result)
-                }
+            upgradeRequest.onsuccess = () => {
+                console.log(`IndexedDB upgraded for table "${this.table}"`)
+                upgradeRequest.result.close()
+                resolve()
+            }
 
-                upgradeRequest.onerror = () => reject(upgradeRequest.error)
+            upgradeRequest.onerror = (event) => {
+                console.error("Failed to upgrade database", event, upgradeRequest.error)
+                reject(upgradeRequest.error || new Error("Failed to upgrade database"))
             }
 
-            checkRequest.onerror = () => reject(checkRequest.error)
+            upgradeRequest.onblocked = () => {
+                const blockingTables = Array.from(BaseIDBStorage.initPromises.keys())
+                    .filter(table => table !== this.table)
+                console.warn(
+                    `Database upgrade blocked for table "${this.table}" (DB: ${this.DB_NAME}), ` +
+                    `waiting for other connections to close. ` +
+                    `Other tables with active connections: ${blockingTables.length > 0 ? blockingTables.join(', ') : 'none'}`
+                )
+            }
         })
     }
 
@@ -170,27 +263,45 @@ export abstract class BaseIDBStorage<T = Record<string, unknown>> {
     }
 
     protected async withStore<T = unknown>(operation: (store: IDBObjectStore) => T | Promise<T>, mode?: IDBTransactionMode): Promise<T> {
-        const db = await this.initDb()
-        const trans = db.transaction(this.table, mode ?? 'readwrite')
-        try {
-            const store = trans.objectStore(this.table)
-            const result = await operation(store)
-            // Waiting for transaction completed
-            await new Promise<void>((resolve, reject) => {
-                trans.oncomplete = () => resolve()
-                trans.onerror = () => reject(trans.error)
-                trans.onabort = () => reject(new Error('Transaction aborted'))
-            })
-            return result
-        } catch (e) {
-            console.error("Failed to process with transaction", e)
-            if (!trans.error && trans.mode !== 'readonly') {
-                try {
-                    trans.abort()
-                } catch (ignored) { }
+        let db = await this.initDb()
+
+        for (let retryCount = 0; retryCount < 2; retryCount++) {
+            let trans: IDBTransaction | undefined
+            try {
+                trans = db.transaction(this.table, mode ?? 'readwrite')
+                const store = trans.objectStore(this.table)
+                const result = await operation(store)
+                const transaction = trans
+                await new Promise<void>((resolve, reject) => {
+                    transaction.oncomplete = () => resolve()
+                    transaction.onerror = () => reject(transaction.error)
+                    transaction.onabort = () => reject(new Error('Transaction aborted'))
+                })
+                return result
+            } catch (e) {
+                const errorType = detectTransactionError(e)
+
+                if (errorType === 'Unknown') {
+                    console.error("Failed to process with transaction", e)
+                    if (trans && !trans.error && trans.mode !== 'readonly') {
+                        try {
+                            trans.abort()
+                        } catch (ignored) { }
+                    }
+                    throw e
+                }
+
+                if (errorType === 'StoreNotFound') {
+                    this.db?.close()
+                    await this.upgrade()
+                }
+
+                this.db = undefined
+                BaseIDBStorage.initPromises.delete(this.table)
+                db = await this.initDb()
             }
-            throw e
         }
+        throw new Error("Max retries exceeded")
     }
 
     protected assertIndex(store: IDBObjectStore, key: Key<T> | Key<T>[]): IDBIndex {
diff --git a/src/database/stat-database/idb.ts b/src/database/stat-database/idb.ts
index b24b99fe..f9e7fba5 100644
--- a/src/database/stat-database/idb.ts
+++ b/src/database/stat-database/idb.ts
@@ -1,5 +1,5 @@
 import { BaseIDBStorage, closedRangeKey, IndexResult, iterateCursor, type Key, req2Promise, type Table } from '@db/common/indexed-storage'
-import { cvtGroupId2Host, formatDateStr, increase, zeroRow } from './common'
+import { cvtGroupId2Host, formatDateStr, GROUP_PREFIX, increase, zeroRow } from './common'
 import { filterDate, filterHost, filterNumberRange, processCondition, type ProcessedCondition } from './condition'
 import type { StatCondition, StatDatabase } from './types'
 
@@ -8,15 +8,7 @@ type StoredRow = timer.core.Row & {
     groupId?: number
 }
 
-function fromStoredRow(stored: StoredRow): timer.core.Row {
-    if (stored.groupId !== undefined) {
-        const { groupId, ...row } = stored
-        return { ...row, host: cvtGroupId2Host(groupId) }
-    }
-    return stored
-}
-
-const GROUP_HOST_PATTERN = /^_g_(\d+)$/
+const GROUP_HOST_PATTERN = new RegExp(`^${GROUP_PREFIX}(\\d+)$`)
 
 const INDEXES: (Key<StoredRow> | Key<StoredRow>[])[] = [
     'date', 'host', 'groupId',
@@ -144,12 +136,7 @@ export class IDBStatDatabase extends BaseIDBStorage<StoredRow> implements StatDa
 
         const rows = await iterateCursor<StoredRow>(cursorReq)
         for (const row of rows) {
-            if (expectGroup) {
-                if (!isGroup(row)) continue
-            } else {
-                if (isGroup(row)) continue
-            }
-
+            if (expectGroup !== isGroup(row)) continue
             if (!filter(row)) continue
 
             if (expectGroup) {
@@ -196,9 +183,8 @@ export class IDBStatDatabase extends BaseIDBStorage<StoredRow> implements StatDa
 
             await iterateCursor(cursorReq, cursor => {
                 const stored = cursor.value as StoredRow | undefined
-                if (stored && !isGroup(stored)) {
-                    toUpdate[stored.host] = fromStoredRow(stored)
-                }
+                if (!stored || isGroup(stored)) return
+                toUpdate[stored.host] = stored
             })
 
             for (const [host, result] of Object.entries(data)) {
@@ -332,15 +318,7 @@ export class IDBStatDatabase extends BaseIDBStorage<StoredRow> implements StatDa
     }
 
     forceUpdate(...rows: timer.core.Row[]): Promise<void> {
-        return this.withStore(store => {
-            for (const row of rows) {
-                const { host, date, time, focus, run } = row
-                const groupMatch = host.match(GROUP_HOST_PATTERN)
-                const newData: StoredRow = { host, date, time, focus, run }
-                groupMatch && (newData.groupId = parseInt(groupMatch[1]))
-                store.put(newData)
-            }
-        }, 'readwrite')
+        return this.withStore(store => rows.forEach(row => store.put(row)), 'readwrite')
     }
 
     forceUpdateGroup(...rows: timer.core.Row[]): Promise<void> {
diff --git a/test/database/idb.ts b/test/database/idb.ts
deleted file mode 100644
index 1295425f..00000000
--- a/test/database/idb.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { } from 'fake-indexeddb'
-import 'fake-indexeddb/auto'
-
-/**
- * Clean up all IndexedDB databases
- */
-export async function cleanupIDB() {
-    return new Promise((resolve) => {
-        try {
-            global.indexedDB = new IDBFactory()
-            setTimeout(resolve, 0)
-        } catch (error) {
-            console.error('Failed to cleanup database:', error)
-            resolve(undefined)
-        }
-    })
-}
\ No newline at end of file
diff --git a/test/database/stat-database/idb.test.ts b/test/database/stat-database/idb.test.ts
index 4f0ed31f..b5afe6a3 100644
--- a/test/database/stat-database/idb.test.ts
+++ b/test/database/stat-database/idb.test.ts
@@ -2,9 +2,7 @@ import { zeroResult, zeroRow } from '@db/stat-database/common'
 import { IDBStatDatabase } from '@db/stat-database/idb'
 import 'fake-indexeddb/auto'
 import { mockRuntime } from '../../__mock__/runtime'
-import { cleanupIDB } from '../idb'
 
-let db: IDBStatDatabase
 const GOOGLE = 'www.google.com'
 const GITHUB = 'www.github.com'
 const GITHUB_VIRTUAL = 'www.github.com/sheepzh/**'
@@ -12,13 +10,17 @@ const GROUP_1 = 1
 const GROUP_2 = 2
 const MAYBE_GROUP_1 = '1'
 
+let db: IDBStatDatabase
+
 describe('stat-database/idb', () => {
-    beforeAll(() => mockRuntime())
-    beforeEach(async () => {
-        await cleanupIDB()
+    beforeAll(async () => {
+        mockRuntime()
         db = new IDBStatDatabase()
+        await db.upgrade()
     })
 
+    beforeEach(() => db.clear())
+
     test('accumulate', async () => {
         await db.accumulate(GITHUB, '20240601', { focus: 10, time: 20 })
         await db.accumulate(GOOGLE, new Date(2025, 10, 1), { focus: 1, time: 0 })

From a72908ebbb81510d19e683e99dc79142e4ff6704 Mon Sep 17 00:00:00 2001
From: sheepzh <returnzhy1996@outlook.com>
Date: Fri, 27 Feb 2026 00:42:12 +0800
Subject: [PATCH 3/6] v4.0.1

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 914d110c..ba8942f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to Time Tracker will be documented in this file.
 
 It is worth mentioning that the release time of each change refers to the time when the installation package is submitted to the webstore. It is about one week for Firefox to moderate packages, while only 1-2 days for Chrome and Edge.
 
+## [4.0.1] - 2026-02-27
+
+-  Fixed an IndexedDB upgrade bug on Edge
+
 ## [4.0.0] - 2026-02-26
 
 -  Supported IndexedDB to store the tracking data
diff --git a/package.json b/package.json
index d587a9b2..cd87a5fa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "timer",
-    "version": "4.0.0",
+    "version": "4.0.1",
     "description": "Time tracker for browser",
     "homepage": "https://www.wfhg.cc",
     "scripts": {

From 834a7d833cea846f1d315f9b8f6123f177090e41 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 27 Feb 2026 13:14:27 +0800
Subject: [PATCH 4/6] i18n(download): download translations by bot (#692)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 src/i18n/message/app/data-manage-resource.json | 1 +
 src/i18n/message/app/option-resource.json      | 6 ++++--
 src/i18n/message/popup/header-resource.json    | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/i18n/message/app/data-manage-resource.json b/src/i18n/message/app/data-manage-resource.json
index 7b3df4c3..697882a9 100644
--- a/src/i18n/message/app/data-manage-resource.json
+++ b/src/i18n/message/app/data-manage-resource.json
@@ -324,6 +324,7 @@
         "totalMemoryAlert": "Tarayıcı, her uzantı için yerel verileri depolamak üzere {size} MB alan sağlar",
         "totalMemoryAlert1": "Tarayıcı tarafından izin verilen maksimum depolama alanı belirlenemiyor",
         "usedMemoryAlert": "Şu anda {size} MB kullanılıyor",
+        "idbAlert": "Depolama kullanımını azaltmak için verilerinizi IndexedDB'ye taşı",
         "operationAlert": "Depolama alanını azaltmak için önemsiz verileri silebilirsiniz",
         "filterItems": "Verileri filtrele",
         "filterFocus": "Günün gezinme süresi {start} saniye ile {end} saniye arasındadır",
diff --git a/src/i18n/message/app/option-resource.json b/src/i18n/message/app/option-resource.json
index e79fe62a..07a31146 100644
--- a/src/i18n/message/app/option-resource.json
+++ b/src/i18n/message/app/option-resource.json
@@ -1405,7 +1405,9 @@
             "tabGroupsPermGrant": "Bu özellik ilgili izinleri gerektirir",
             "fileAccessDisabled": "Dosya URL'lerine erişim şu anda izin verilmiyor. Lütfen önce yönetim sayfasında bunu etkinleştirin",
             "weekStart": "Her haftanın ilk günü {input}",
-            "weekStartAsNormal": "Normal"
+            "weekStartAsNormal": "Normal",
+            "storage": "İzleme verilerini {input} içinde saklayın.",
+            "storageConfirm": "Depolama türünü {type} olarak değiştirmek ister misiniz?"
         },
         "limit": {
             "prompt": "Kısıtlı olduğunda gösterilecek uyarı {input}",
@@ -1595,4 +1597,4 @@
         "reloadButton": "Odśwież",
         "defaultValue": "Domyślnie: {default}"
     }
-}
+}
\ No newline at end of file
diff --git a/src/i18n/message/popup/header-resource.json b/src/i18n/message/popup/header-resource.json
index 6efdaf2a..c6a2299c 100644
--- a/src/i18n/message/popup/header-resource.json
+++ b/src/i18n/message/popup/header-resource.json
@@ -43,6 +43,7 @@
     },
     "ar": {},
     "tr": {
+        "rating": "Değerlendirmeyi Gönder",
         "showSiteName": "Site adını göster",
         "showTopN": "En iyi {n} göster",
         "donutChart": "Halka grafik olarak göster"

From 6dce672268a5a72e773a62001f5fb5e43441beb0 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 1 Mar 2026 16:01:21 +0800
Subject: [PATCH 5/6] chore(psl): update PSL list by bot (#694)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 src/util/psl/rules.json | 92 +++++++++++++++++++++++++++++++----------
 1 file changed, 70 insertions(+), 22 deletions(-)

diff --git a/src/util/psl/rules.json b/src/util/psl/rules.json
index 63a73990..751dbeee 100644
--- a/src/util/psl/rules.json
+++ b/src/util/psl/rules.json
@@ -2134,7 +2134,18 @@
                     "es-1": 1
                 }
             },
-            "convex": 1,
+            "begetcdn": {
+                "c": {
+                    "*": 1
+                }
+            },
+            "convex": {
+                "c": {
+                    "eu-west-1": 1,
+                    "us-east-1": 1
+                },
+                "l": 1
+            },
             "diadem": 1,
             "elementor": 1,
             "emergent": 1,
@@ -2620,6 +2631,7 @@
                 }
             },
             "180r": 1,
+            "1cooldns": 1,
             "1kapp": 1,
             "3utilities": 1,
             "4u": 1,
@@ -4145,6 +4157,7 @@
             "bplaced": 1,
             "br": 1,
             "builtwithdark": 1,
+            "bumbleshrimp": 1,
             "cafjs": 1,
             "canva-apps": 1,
             "canva-hosted-embed": 1,
@@ -4219,6 +4232,7 @@
             "dattoweb": 1,
             "ddnsfree": 1,
             "ddnsgeek": 1,
+            "ddnsguru": 1,
             "ddnsking": 1,
             "de": 1,
             "deus-canvas": 1,
@@ -4247,6 +4261,7 @@
             "dopaas": 1,
             "drayddns": 1,
             "dreamhosters": 1,
+            "drive-platform": 1,
             "dsmynas": 1,
             "durumis": 1,
             "dyn-o-saur": 1,
@@ -4266,6 +4281,8 @@
             "dyndns-wiki": 1,
             "dyndns-work": 1,
             "dynns": 1,
+            "dynuddns": 1,
+            "dynuhosting": 1,
             "elasticbeanstalk": {
                 "c": {
                     "af-south-1": 1,
@@ -4499,15 +4516,6 @@
                     "demo": 1
                 }
             },
-            "joyent": {
-                "c": {
-                    "cns": {
-                        "c": {
-                            "*": 1
-                        }
-                    }
-                }
-            },
             "jpn": 1,
             "kasserver": 1,
             "kozow": 1,
@@ -4648,6 +4656,7 @@
                 }
             },
             "pgfog": 1,
+            "pivohosting": 1,
             "pixolino": 1,
             "playstation-cloud": 1,
             "pleskns": 1,
@@ -4822,6 +4831,7 @@
                     "pages": 1
                 }
             },
+            "wiredbladehosting": 1,
             "withgoogle": 1,
             "withyoutube": 1,
             "wixsite": 1,
@@ -4861,7 +4871,12 @@
         },
         "l": 1
     },
-    "company": 1,
+    "company": {
+        "c": {
+            "mybox": 1
+        },
+        "l": 1
+    },
     "compare": 1,
     "computer": 1,
     "comsec": 1,
@@ -5168,7 +5183,6 @@
     },
     "dev": {
         "c": {
-            "12chars": 1,
             "barsy": 1,
             "bearblog": 1,
             "botdash": 1,
@@ -5443,7 +5457,8 @@
     "dish": 1,
     "diy": {
         "c": {
-            "discourse": 1
+            "discourse": 1,
+            "imagine": 1
         },
         "l": 1
     },
@@ -5634,6 +5649,7 @@
                     "on": 1
                 }
             },
+            "intouch": 1,
             "tawk": {
                 "c": {
                     "p": 1
@@ -5899,6 +5915,7 @@
             "gouv": 1,
             "greta": 1,
             "huissier-justice": 1,
+            "kdns": 1,
             "medecin": 1,
             "myspreadshop": 1,
             "nom": 1,
@@ -6072,7 +6089,6 @@
     "gold": 1,
     "goldpoint": 1,
     "golf": 1,
-    "goo": 1,
     "goodyear": 1,
     "goog": {
         "c": {
@@ -6592,6 +6608,7 @@
             "darklang": 1,
             "dedyn": 1,
             "definima": 1,
+            "drive-platform": 1,
             "editorx": 1,
             "edu": 1,
             "edugit": 1,
@@ -6802,7 +6819,6 @@
     "it": {
         "c": {
             "123homepage": 1,
-            "12chars": 1,
             "16-b": 1,
             "32-b": 1,
             "64-b": 1,
@@ -9507,8 +9523,13 @@
     },
     "kh": {
         "c": {
-            "*": 1
-        }
+            "com": 1,
+            "edu": 1,
+            "gov": 1,
+            "net": 1,
+            "org": 1
+        },
+        "l": 1
     },
     "ki": {
         "c": {
@@ -9947,6 +9968,7 @@
             "loginto": 1,
             "lohmus": 1,
             "mcdir": 1,
+            "mybox": 1,
             "myds": 1,
             "net": 1,
             "nohost": 1,
@@ -10369,7 +10391,12 @@
             "de5": 1,
             "debian": 1,
             "definima": 1,
-            "deno": 1,
+            "deno": {
+                "c": {
+                    "sandbox": 1
+                },
+                "l": 1
+            },
             "dns-cloud": 1,
             "dns-dynamic": 1,
             "dnsalias": 1,
@@ -10381,6 +10408,7 @@
             "dynalias": 1,
             "dynathome": 1,
             "dynu": 1,
+            "dynuddns": 1,
             "dynv6": 1,
             "eating-organic": 1,
             "edgekey": 1,
@@ -10500,11 +10528,13 @@
             "myradweb": 1,
             "mysecuritycamera": 1,
             "myspreadshop": 1,
+            "mysynology": 1,
             "nhlfan": 1,
             "no-ip": 1,
             "now-dns": 1,
             "office-on-the": 1,
             "oninferno": 1,
+            "opik": 1,
             "ovh": {
                 "c": {
                     "hosting": {
@@ -10553,6 +10583,7 @@
             "server-on": 1,
             "shopselect": 1,
             "siteleaf": 1,
+            "spryt": 1,
             "square7": 1,
             "squares": 1,
             "srcf": {
@@ -10589,10 +10620,18 @@
             "uni5": 1,
             "usgovcloudapi": {
                 "c": {
+                    "core": {
+                        "c": {
+                            "blob": 1,
+                            "file": 1,
+                            "web": 1
+                        }
+                    },
                     "servicebus": 1
                 }
             },
             "usgovcloudapp": 1,
+            "usgovtrafficmanager": 1,
             "vpndns": 1,
             "vps-host": {
                 "c": {
@@ -10612,7 +10651,9 @@
                 "c": {
                     "core": {
                         "c": {
-                            "blob": 1
+                            "blob": 1,
+                            "file": 1,
+                            "web": 1
                         }
                     },
                     "servicebus": 1
@@ -11939,6 +11980,7 @@
             "read-books": 1,
             "readmyblog": 1,
             "routingthecloud": 1,
+            "roxa": 1,
             "selfip": 1,
             "sellsyourhome": 1,
             "servebbs": 1,
@@ -12007,6 +12049,7 @@
             "deuxfleurs": 1,
             "heyflow": 1,
             "hlx": 1,
+            "mybox": 1,
             "pdns": 1,
             "plesk": 1,
             "prvcy": 1,
@@ -12442,7 +12485,6 @@
     "prime": 1,
     "pro": {
         "c": {
-            "12chars": 1,
             "aaa": 1,
             "aca": 1,
             "acct": 1,
@@ -13023,7 +13065,13 @@
                 }
             },
             "co": 1,
-            "convex": 1,
+            "convex": {
+                "c": {
+                    "eu-west-1": 1,
+                    "us-east-1": 1
+                },
+                "l": 1
+            },
             "cpanel": 1,
             "cyon": 1,
             "fastvps": 1,
@@ -14440,6 +14488,7 @@
             "haugiang": 1,
             "health": 1,
             "hoabinh": 1,
+            "hue": 1,
             "hungyen": 1,
             "id": 1,
             "info": 1,
@@ -14542,7 +14591,6 @@
     "wine": 1,
     "winners": 1,
     "wme": 1,
-    "wolterskluwer": 1,
     "woodside": 1,
     "work": {
         "c": {

From 4457cc6b7ebb21dfb557febcbe31f5b3826a3458 Mon Sep 17 00:00:00 2001
From: sheepie <returnzhy1996@outlook.com>
Date: Sun, 1 Mar 2026 16:55:22 +0800
Subject: [PATCH 6/6] feat: support site blocking for mobile (#579)

---
 package.json                                  |   6 +-
 .../limit/modal/components/Alert.tsx          |   9 +-
 .../limit/modal/components/Reason.tsx         |  19 +-
 src/pages/app/Layout/menu/item.ts             |   3 +-
 src/pages/app/components/Dashboard/index.tsx  |   2 +-
 .../Limit/LimitModify/Sop/Step3/TimeInput.tsx | 258 ------------------
 .../Limit/LimitTable/RuleContent.tsx          |  78 ------
 .../app/components/Limit/LimitTable/Waste.tsx |  52 ----
 .../Filter.tsx}                               |  21 +-
 .../components/Limit/components/List/Card.tsx | 111 ++++++++
 .../components/Limit/components/List/Rule.tsx | 115 ++++++++
 .../Limit/components/List/index.tsx           |  28 ++
 .../Modify}/Sop/Step1.tsx                     |   6 +-
 .../Modify}/Sop/Step2/SiteInput.tsx           |   0
 .../Modify}/Sop/Step2/index.tsx               |   0
 .../Modify}/Sop/Step3/PeriodInput.tsx         |  46 ++--
 .../components/Modify/Sop/Step3/TimeInput.tsx | 251 +++++++++++++++++
 .../Modify}/Sop/Step3/index.tsx               |  14 +-
 .../Modify}/Sop/context.ts                    |   2 +-
 .../Modify}/Sop/index.tsx                     |  37 ++-
 .../Modify}/index.tsx                         |  11 +-
 .../Table/OperationColumn.tsx}                |   4 +-
 .../Limit/components/Table/Rule.tsx           |  68 +++++
 .../Limit/components/Table/Waste.tsx          |  48 ++++
 .../Table}/Weekday.tsx                        |   0
 .../Table}/index.tsx                          |  25 +-
 .../{LimitTest.tsx => components/Test.tsx}    |   8 +-
 .../app/components/Limit/components/index.tsx |   5 +
 .../app/components/Limit/components/style.ts  |   5 +
 src/pages/app/components/Limit/context.ts     |  33 ++-
 src/pages/app/components/Limit/index.tsx      |  20 +-
 src/pages/app/components/Option/Select.tsx    |  11 +-
 .../Option/components/LimitOption/index.tsx   |   2 +-
 .../app/components/common/TooltipWrapper.tsx  |   4 +-
 .../common/filter/ButtonFilterItem.tsx        |  21 +-
 src/pages/components/Flex.tsx                 |  50 ++--
 src/pages/popup/components/Header/index.tsx   |   4 +-
 src/util/time.ts                              |  52 ++--
 test-e2e/common/base.ts                       |   2 +-
 .../{whitelist.ts => whitelist.test.ts}       |  16 +-
 test-e2e/tracker/base.test.ts                 |   2 +-
 test-e2e/tracker/run-time.test.ts             |   2 +-
 42 files changed, 897 insertions(+), 554 deletions(-)
 delete mode 100644 src/pages/app/components/Limit/LimitModify/Sop/Step3/TimeInput.tsx
 delete mode 100644 src/pages/app/components/Limit/LimitTable/RuleContent.tsx
 delete mode 100644 src/pages/app/components/Limit/LimitTable/Waste.tsx
 rename src/pages/app/components/Limit/{LimitFilter.tsx => components/Filter.tsx} (85%)
 create mode 100644 src/pages/app/components/Limit/components/List/Card.tsx
 create mode 100644 src/pages/app/components/Limit/components/List/Rule.tsx
 create mode 100644 src/pages/app/components/Limit/components/List/index.tsx
 rename src/pages/app/components/Limit/{LimitModify => components/Modify}/Sop/Step1.tsx (90%)
 rename src/pages/app/components/Limit/{LimitModify => components/Modify}/Sop/Step2/SiteInput.tsx (100%)
 rename src/pages/app/components/Limit/{LimitModify => components/Modify}/Sop/Step2/index.tsx (100%)
 rename src/pages/app/components/Limit/{LimitModify => components/Modify}/Sop/Step3/PeriodInput.tsx (82%)
 create mode 100644 src/pages/app/components/Limit/components/Modify/Sop/Step3/TimeInput.tsx
 rename src/pages/app/components/Limit/{LimitModify => components/Modify}/Sop/Step3/index.tsx (80%)
 rename src/pages/app/components/Limit/{LimitModify => components/Modify}/Sop/context.ts (98%)
 rename src/pages/app/components/Limit/{LimitModify => components/Modify}/Sop/index.tsx (54%)
 rename src/pages/app/components/Limit/{LimitModify => components/Modify}/index.tsx (91%)
 rename src/pages/app/components/Limit/{LimitTable/column/LimitOperationColumn.tsx => components/Table/OperationColumn.tsx} (93%)
 create mode 100644 src/pages/app/components/Limit/components/Table/Rule.tsx
 create mode 100644 src/pages/app/components/Limit/components/Table/Waste.tsx
 rename src/pages/app/components/Limit/{LimitTable => components/Table}/Weekday.tsx (100%)
 rename src/pages/app/components/Limit/{LimitTable => components/Table}/index.tsx (92%)
 rename src/pages/app/components/Limit/{LimitTest.tsx => components/Test.tsx} (87%)
 create mode 100644 src/pages/app/components/Limit/components/index.tsx
 create mode 100644 src/pages/app/components/Limit/components/style.ts
 rename test-e2e/common/{whitelist.ts => whitelist.test.ts} (70%)

diff --git a/package.json b/package.json
index cd87a5fa..4c7f19ce 100644
--- a/package.json
+++ b/package.json
@@ -34,12 +34,12 @@
         "@rsdoctor/rspack-plugin": "^1.5.2",
         "@rspack/cli": "^1.7.6",
         "@rspack/core": "^1.7.6",
-        "@swc/core": "^1.15.13",
+        "@swc/core": "^1.15.17",
         "@swc/jest": "^0.2.39",
         "@types/chrome": "0.1.37",
         "@types/decompress": "^4.2.7",
         "@types/jest": "^30.0.0",
-        "@types/node": "^25.3.1",
+        "@types/node": "^25.3.2",
         "@types/punycode": "^2.1.4",
         "@vue/babel-plugin-jsx": "^2.0.1",
         "babel-loader": "^10.0.0",
@@ -64,7 +64,7 @@
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.2",
         "echarts": "^6.0.0",
-        "element-plus": "2.13.2",
+        "element-plus": "2.13.3",
         "punycode": "^2.3.1",
         "typescript-guard": "^0.2.1",
         "vue": "^3.5.29",
diff --git a/src/content-script/limit/modal/components/Alert.tsx b/src/content-script/limit/modal/components/Alert.tsx
index b8d96977..af0ce41d 100644
--- a/src/content-script/limit/modal/components/Alert.tsx
+++ b/src/content-script/limit/modal/components/Alert.tsx
@@ -1,5 +1,6 @@
 import { getUrl } from "@api/chrome/runtime"
 import { t } from "@cs/locale"
+import { useXsState } from '@hooks/useMediaSize'
 import { useRequest } from "@hooks/useRequest"
 import Box from '@pages/components/Box'
 import Flex from '@pages/components/Flex'
@@ -21,13 +22,19 @@ const _default = defineComponent(() => {
         return option?.limitPrompt || defaultPrompt
     }, { defaultValue: defaultPrompt })
 
+    const isXs = useXsState()
+
     return () => (
         <Flex marginBottom={80} column align='center'>
             <Flex as='h2' align='center' lineHeight='2em'>
                 <img src={ICON_URL} style={IMG_STYLE} />
                 <span>{t(msg => msg.meta.name)?.toUpperCase()}</span>
             </Flex>
-            <Box fontSize='2.7em' maxWidth='50vw' marginBlock='0.67em'>
+            <Box
+                fontSize={`${isXs.value ? 1 : 2.7}em`}
+                maxWidth={`${isXs.value ? 80 : 50}vw`}
+                marginBlock={`${isXs.value ? .3 : .67}em`}
+            >
                 {prompt.value}
             </Box>
         </Flex>
diff --git a/src/content-script/limit/modal/components/Reason.tsx b/src/content-script/limit/modal/components/Reason.tsx
index 78bbe160..1dc2204e 100644
--- a/src/content-script/limit/modal/components/Reason.tsx
+++ b/src/content-script/limit/modal/components/Reason.tsx
@@ -1,4 +1,5 @@
 import { t } from "@cs/locale"
+import { useXsState } from '@hooks/index'
 import { useRequest } from "@hooks/useRequest"
 import Flex from "@pages/components/Flex"
 import { matchCond, meetLimit, meetTimeLimit, period2Str } from "@util/limit"
@@ -7,8 +8,13 @@ import { ElDescriptions, ElDescriptionsItem, ElTag } from 'element-plus'
 import { computed, defineComponent, type StyleValue } from "vue"
 import { useGlobalParam, useReason, useRule } from "../context"
 
-const DESCRIPTIONS_STYLE: StyleValue = {
-    width: '400px',
+const useDescriptions = () => {
+    const isXs = useXsState()
+    const style = computed(() => ({
+        width: isXs.value ? '90vw' : '400px',
+    } satisfies StyleValue))
+    const size = computed(() => isXs.value ? 'small' : undefined)
+    return { style, size }
 }
 
 const renderBaseItems = (rule: timer.limit.Rule | null, url: string) => <>
@@ -35,12 +41,13 @@ const TimeDescriptions = defineComponent({
         const rule = useRule()
         const reason = useReason()
         const { url } = useGlobalParam()
+        const { style, size } = useDescriptions()
 
         const timeLimited = computed(() => meetTimeLimit(props.time ?? 0, props.waste ?? 0, !!reason.value?.allowDelay, reason.value?.delayCount ?? 0))
         const visitLimited = computed(() => meetLimit(props.count ?? 0, props.visit ?? 0))
 
         return () => (
-            <ElDescriptions border column={1} labelWidth={130} style={DESCRIPTIONS_STYLE}>
+            <ElDescriptions border column={1} size={size.value} style={style.value}>
                 {renderBaseItems(rule.value, url)}
                 <ElDescriptionsItem label={props.ruleLabel} labelAlign="right">
                     <Flex gap={5} width={200}>
@@ -90,6 +97,8 @@ const _default = defineComponent(() => {
 
     setInterval(refreshBrowsingTime, 1000)
 
+    const { style, size } = useDescriptions()
+
     return () => (
         <Flex justify='center' marginBottom={30}>
             <TimeDescriptions
@@ -110,7 +119,7 @@ const _default = defineComponent(() => {
                 ruleLabel={t(msg => msg.limit.item.weekly)}
                 dataLabel={t(msg => msg.calendar.range.thisWeek)}
             />
-            <ElDescriptions v-show={type.value === 'VISIT'} border column={1} style={DESCRIPTIONS_STYLE}>
+            <ElDescriptions v-show={type.value === 'VISIT'} border column={1} style={style.value} size={size.value}>
                 {renderBaseItems(rule.value, url)}
                 <ElDescriptionsItem label={t(msg => msg.limit.item.visitTime)} labelAlign="right">
                     {formatPeriodCommon((rule.value?.visitTime ?? 0) * MILL_PER_SECOND) || '-'}
@@ -124,7 +133,7 @@ const _default = defineComponent(() => {
                     {reason.value?.delayCount ?? 0}
                 </ElDescriptionsItem>
             </ElDescriptions>
-            <ElDescriptions v-show={type.value === 'PERIOD'} border column={1} style={DESCRIPTIONS_STYLE}>
+            <ElDescriptions v-show={type.value === 'PERIOD'} border column={1} style={style.value} size={size.value}>
                 {renderBaseItems(rule.value, url)}
                 <ElDescriptionsItem label={t(msg => msg.limit.item.period)} labelAlign="right">
                     {rule.value?.periods?.length
diff --git a/src/pages/app/Layout/menu/item.ts b/src/pages/app/Layout/menu/item.ts
index c8f1c4b2..90c9f206 100644
--- a/src/pages/app/Layout/menu/item.ts
+++ b/src/pages/app/Layout/menu/item.ts
@@ -76,7 +76,8 @@ export const menuGroups = (): MenuGroup[] => [{
     }, {
         title: msg => msg.menu.limit,
         route: '/behavior/limit',
-        icon: Timer
+        icon: Timer,
+        mobile: true,
     }]
 }, {
     title: msg => msg.menu.additional,
diff --git a/src/pages/app/components/Dashboard/index.tsx b/src/pages/app/components/Dashboard/index.tsx
index 55673ab9..c9d9d62b 100644
--- a/src/pages/app/components/Dashboard/index.tsx
+++ b/src/pages/app/components/Dashboard/index.tsx
@@ -12,7 +12,7 @@ import Flex from "@pages/components/Flex"
 import { recommendRate, saveFlag } from "@service/meta-service"
 import { REVIEW_PAGE } from "@util/constant/url"
 import { ElRow, ElScrollbar } from "element-plus"
-import { computed, defineComponent, FunctionalComponent } from "vue"
+import { computed, defineComponent, type FunctionalComponent } from "vue"
 import { useRouter } from "vue-router"
 import ContentContainer from "../common/ContentContainer"
 import Calendar from "./components/Calendar"
diff --git a/src/pages/app/components/Limit/LimitModify/Sop/Step3/TimeInput.tsx b/src/pages/app/components/Limit/LimitModify/Sop/Step3/TimeInput.tsx
deleted file mode 100644
index fde155be..00000000
--- a/src/pages/app/components/Limit/LimitModify/Sop/Step3/TimeInput.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-import { CircleClose, Clock } from "@element-plus/icons-vue"
-import { useDebounceFn, useState } from "@hooks"
-import { getStyle } from "@pages/util/style"
-import { range } from "@util/array"
-import { Effect, ElIcon, ElInput, ElPopover, ElScrollbar, ScrollbarInstance, useLocale, useNamespace } from "element-plus"
-import { computed, defineComponent, nextTick, onMounted, ref, Transition, watch } from "vue"
-
-function computeSecond2LimitInfo(time: number): [number, number, number] {
-    time = time || 0
-    const second = time % 60
-    const totalMinutes = (time - second) / 60
-    const minute = totalMinutes % 60
-    const hour = (totalMinutes - minute) / 60
-    return [hour, minute, second]
-}
-
-const formatTimeVal = (val: number): string => {
-    return val?.toString?.()?.padStart?.(2, '0') ?? 'NaN'
-}
-
-const TimeSpinner = defineComponent({
-    props: {
-        max: {
-            type: Number,
-            required: true,
-        },
-        visible: Boolean,
-        modelValue: {
-            type: Number,
-            required: true,
-        },
-    },
-    emits: {
-        change: (_val: number) => true,
-    },
-    setup(props, ctx) {
-        const ns = useNamespace('time')
-        const scrollbar = ref<ScrollbarInstance>()
-        const scrolling = ref(false)
-
-        const debounceChangeValue = useDebounceFn((val: number) => {
-            scrolling.value = false
-            ctx.emit('change', val)
-        }, 200)
-
-        const getScrollbarElement = () => {
-            const el = scrollbar.value?.$el
-            return el?.querySelector(`.${ns.namespace.value}-scrollbar__wrap`) as HTMLElement
-        }
-
-        const adjustSpinner = (value: number) => {
-            let scrollbarEl = getScrollbarElement()
-            if (!scrollbarEl) return
-
-            scrollbarEl.scrollTop = Math.max(0, value * typeItemHeight())
-        }
-
-        watch(() => props.modelValue, () => adjustSpinner(props.modelValue))
-        watch(() => props.visible, () => props.visible && nextTick(() => adjustSpinner(props.modelValue)))
-
-        const typeItemHeight = (): number => {
-            const listItem = scrollbar.value?.$el.querySelector('li') as HTMLLinkElement
-            if (listItem) {
-                return Number.parseFloat(getStyle(listItem, 'height')) || 0
-            }
-            return 0
-        }
-
-        const bindScroll = () => {
-            let scrollbarEl = getScrollbarElement()
-            if (!scrollbarEl) return
-
-            scrollbarEl.addEventListener('scroll', () => {
-                scrolling.value = true
-                const scrollTop = getScrollbarElement()?.scrollTop ?? 0
-                const scrollbarH = (scrollbar.value?.$el as HTMLUListElement)!.offsetHeight ?? 0
-                const itemH = typeItemHeight()
-                const estimatedIdx = Math.round((scrollTop - (scrollbarH * 0.5 - 10) / itemH + 3) / itemH)
-                const value = Math.min(estimatedIdx, props.max - 1)
-                debounceChangeValue(value)
-            }, { passive: true })
-        }
-
-        onMounted(() => {
-            bindScroll()
-            adjustSpinner(props.modelValue)
-        })
-
-        return () => (
-            <ElScrollbar
-                ref={scrollbar}
-                class={ns.be('spinner', 'wrapper')}
-                viewClass={ns.be('spinner', 'list')}
-                noresize
-                wrapStyle={{ maxHeight: 'inherit' }}
-                tag="ul"
-            >
-                {range(props.max).map(idx => (
-                    <li
-                        onClick={() => ctx.emit('change', idx)}
-                        class={[
-                            ns.be('spinner', 'item'),
-                            ns.is('active', idx === props.modelValue),
-                        ]}
-                    >
-                        {idx.toString().padStart(2, '0')}
-                    </li>
-                ))}
-            </ElScrollbar>
-        )
-    },
-})
-
-const useTimeInput = (source: () => number) => {
-    const [initialHour, initialMin, initialSec] = computeSecond2LimitInfo(source?.() ?? 0)
-    const [hour, setHour] = useState(initialHour)
-    const [minute, setMinute] = useState(initialMin)
-    const [second, setSecond] = useState(initialSec)
-
-    const reset = () => {
-        const [hour, min, sec] = computeSecond2LimitInfo(source?.() ?? 0)
-        setHour(hour)
-        setMinute(min)
-        setSecond(sec)
-    }
-
-    watch(source, reset)
-
-    const getTotalSecond = () => {
-        let time = 0
-        time += (hour.value ?? 0) * 3600
-        time += (minute.value ?? 0) * 60
-        time += (second.value ?? 0)
-        return time
-    }
-
-    return {
-        hour, minute, second,
-        setHour, setMinute, setSecond,
-        reset, getTotalSecond,
-    }
-}
-
-/**
- * Rewrite
- *
- * https://github.com/element-plus/element-plus/blob/dev/packages/components/time-picker/src/time-picker-com/panel-time-pick.vue
- */
-const TimeInput = defineComponent({
-    props: {
-        modelValue: {
-            type: Number,
-            required: true,
-        },
-        hourMax: Number,
-    },
-    emits: {
-        change: (_val: number) => true,
-    },
-    setup(props, ctx) {
-        const [popoverVisible, setPopoverVisible] = useState(false)
-        const {
-            hour, minute, second,
-            setHour, setMinute, setSecond,
-            reset, getTotalSecond,
-        } = useTimeInput(() => props.modelValue)
-
-        const inputText = computed(() => `${formatTimeVal(hour.value)} h ${formatTimeVal(minute.value)} m ${formatTimeVal(second.value)} s`)
-
-        const ns = useNamespace('time')
-        const nsDate = useNamespace('date')
-        const nsInput = useNamespace('input')
-
-        const { t: tEle } = useLocale()
-
-        const transitionName = computed(() => popoverVisible.value ? '' : `${ns.namespace.value}-zoom-in-top`)
-
-        const handleCancel = () => {
-            reset()
-            setPopoverVisible(false)
-        }
-
-        const handleConfirm = () => {
-            ctx.emit('change', getTotalSecond())
-            setPopoverVisible(false)
-        }
-
-        const handleVisibleChange = (newVal: boolean) => {
-            setPopoverVisible(newVal)
-            !newVal && handleCancel()
-        }
-
-        const handleClear = (ev: MouseEvent) => {
-            ctx.emit('change', 0)
-            ev.stopPropagation()
-        }
-
-        return () => (
-            <ElPopover
-                trigger='click'
-                effect={Effect.LIGHT}
-                visible={popoverVisible.value}
-                transition={`${nsDate.namespace.value}-zoom-in-top`}
-                popperClass={`${nsDate.namespace.value}-picker__popper`}
-                onUpdate:visible={handleVisibleChange}
-                v-slots={{
-                    reference: () => (
-                        <ElInput
-                            class={[nsDate.b('editor'), nsDate.bm('editor', 'time')]}
-                            prefixIcon={Clock}
-                            modelValue={inputText.value}
-                            inputStyle={{ cursor: 'pointer', width: '100px' }}
-                            readonly
-                            v-slots={{
-                                suffix: () => !!props.modelValue && (
-                                    <div onClick={handleClear}>
-                                        <ElIcon class={[nsInput.e('icon'), 'clear-icon']}>
-                                            <CircleClose />
-                                        </ElIcon>
-                                    </div>
-                                )
-                            }}
-                        />
-                    )
-                }}>
-                <Transition name={transitionName.value}>
-                    <div class={ns.b('panel')} style={{ width: '100%' }}>
-                        <div class={[ns.be('panel', 'content'), 'has-seconds']}>
-                            <div class={[ns.b('spinner'), 'has-seconds']}>
-                                <TimeSpinner max={props.hourMax ?? 24} modelValue={hour.value} onChange={setHour} visible={popoverVisible.value} />
-                                <TimeSpinner max={60} modelValue={minute.value} onChange={setMinute} visible={popoverVisible.value} />
-                                <TimeSpinner max={60} modelValue={second.value} onChange={setSecond} visible={popoverVisible.value} />
-                            </div>
-                        </div>
-                        <div class={[ns.be('panel', 'footer')]}>
-                            <button
-                                type="button"
-                                class={[ns.be('panel', 'btn'), 'cancel']}
-                                onClick={handleCancel}
-                            >
-                                {tEle('el.datepicker.cancel')}
-                            </button>
-                            <button
-                                type="button"
-                                class={[ns.be('panel', 'btn'), 'confirm']}
-                                onClick={handleConfirm}
-                            >
-                                {tEle('el.datepicker.confirm')}
-                            </button>
-                        </div>
-                    </div>
-                </Transition>
-            </ElPopover>
-        )
-    },
-})
-
-export default TimeInput
\ No newline at end of file
diff --git a/src/pages/app/components/Limit/LimitTable/RuleContent.tsx b/src/pages/app/components/Limit/LimitTable/RuleContent.tsx
deleted file mode 100644
index 0a969f2c..00000000
--- a/src/pages/app/components/Limit/LimitTable/RuleContent.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { t } from "@app/locale"
-import Flex from "@pages/components/Flex"
-import { period2Str } from "@util/limit"
-import { formatPeriod, MILL_PER_SECOND } from "@util/time"
-import { ElTag } from "element-plus"
-import { computed, defineComponent, toRef, type PropType } from "vue"
-
-const TIME_FORMAT = {
-    dayMsg: '{day}d{hour}h{minute}m{second}s',
-    hourMsg: '{hour}h{minute}m{second}s',
-    minuteMsg: '{minute}m{second}s',
-    secondMsg: '{second}s',
-}
-
-const TimeCountTag = defineComponent({
-    props: {
-        time: Number,
-        count: Number,
-        label: String,
-    },
-    setup(props) {
-        const visible = computed(() => !!props.time || !!props.count)
-        const content = computed(() => {
-            const timeContent = props.time ? formatPeriod(props.time * MILL_PER_SECOND, TIME_FORMAT) : ''
-            const countContent = props.count ? `${props.count} ${t(msg => msg.limit.item.visits)}` : ''
-            return [timeContent, countContent].filter(str => !!str).join(` ${t(msg => msg.limit.item.or)} `)
-        })
-
-        return () => (
-            <div v-show={visible.value}>
-                <ElTag size="small">
-                    {props.label}: {content.value}
-                </ElTag>
-            </div>
-        )
-    },
-})
-
-const RuleContent = defineComponent({
-    props: {
-        value: Object as PropType<timer.limit.Item>
-    },
-    setup(props) {
-        const row = toRef(props, 'value')
-
-        return () => (
-            <Flex column gap={4}>
-                <TimeCountTag
-                    time={row.value?.time}
-                    count={row.value?.count}
-                    label={t(msg => msg.limit.item.daily)}
-                />
-                <TimeCountTag
-                    time={row.value?.weekly}
-                    count={row.value?.weeklyCount}
-                    label={t(msg => msg.limit.item.weekly)}
-                />
-                {!!row.value?.visitTime && (
-                    <div>
-                        <ElTag size="small" type="danger">
-                            {t(msg => msg.limit.item.visitTime)}: {formatPeriod(row.value?.visitTime * MILL_PER_SECOND, TIME_FORMAT)}
-                        </ElTag>
-                    </div>
-                )}
-                {!!row.value?.periods?.length && <>
-                    <div>
-                        <ElTag size="small" type="info">{t(msg => msg.limit.item.period)}</ElTag>
-                    </div>
-                    <Flex justify="center" gap={4} wrap="wrap">
-                        {row.value?.periods?.map(p => <ElTag size="small" type="info">{period2Str(p)}</ElTag>)}
-                    </Flex>
-                </>}
-            </Flex>
-        )
-    },
-})
-
-export default RuleContent
\ No newline at end of file
diff --git a/src/pages/app/components/Limit/LimitTable/Waste.tsx b/src/pages/app/components/Limit/LimitTable/Waste.tsx
deleted file mode 100644
index 0b1baa8f..00000000
--- a/src/pages/app/components/Limit/LimitTable/Waste.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import TooltipWrapper from "@app/components/common/TooltipWrapper"
-import { t } from "@app/locale"
-import Flex from "@pages/components/Flex"
-import { meetLimit, meetTimeLimit } from "@util/limit"
-import { formatPeriodCommon } from "@util/time"
-import { ElTag } from "element-plus"
-import { computed, defineComponent } from "vue"
-
-const Waste = defineComponent({
-    props: {
-        time: Number,
-        waste: {
-            type: Number,
-            required: true,
-        },
-        count: Number,
-        visit: Number,
-        delayCount: Number,
-        allowDelay: Boolean,
-    },
-    setup(props) {
-        const timeType = computed(() => meetTimeLimit(props.time, props.waste, props.allowDelay, props.delayCount) ? 'danger' : 'info')
-        const visitType = computed(() => meetLimit(props.count, props.visit) ? 'danger' : 'info')
-
-        return () => (
-            <Flex column gap={5}>
-                <div>
-                    <TooltipWrapper
-                        trigger="hover"
-                        usePopover={props.allowDelay && !!props.time}
-                        placement="top"
-                        v-slots={{
-                            content: () => `${t(msg => msg.limit.item.delayCount)}: ${props.delayCount ?? 0}`,
-                            default: () => (
-                                <ElTag size="small" type={timeType.value}>
-                                    {formatPeriodCommon(props.waste)}
-                                </ElTag>
-                            ),
-                        }}
-                    />
-                </div>
-                <div>
-                    <ElTag size="small" type={visitType.value}>
-                        {props.visit ?? 0} {t(msg => msg.limit.item.visits)}
-                    </ElTag>
-                </div>
-            </Flex>
-        )
-    },
-})
-
-export default Waste
\ No newline at end of file
diff --git a/src/pages/app/components/Limit/LimitFilter.tsx b/src/pages/app/components/Limit/components/Filter.tsx
similarity index 85%
rename from src/pages/app/components/Limit/LimitFilter.tsx
rename to src/pages/app/components/Limit/components/Filter.tsx
index f7089654..0c230209 100644
--- a/src/pages/app/components/Limit/LimitFilter.tsx
+++ b/src/pages/app/components/Limit/components/Filter.tsx
@@ -12,18 +12,19 @@ import SwitchFilterItem from "@app/components/common/filter/SwitchFilterItem"
 import { t } from "@app/locale"
 import { OPTION_ROUTE } from "@app/router/constants"
 import { Delete, Open, Operation, Plus, SetUp, TurnOff, WarningFilled } from "@element-plus/icons-vue"
+import { useXsState } from '@hooks/useMediaSize'
 import Flex from "@pages/components/Flex"
 import { getAppPageUrl } from "@util/constant/url"
 import { ElIcon, ElText, ElTooltip } from 'element-plus'
-import { defineComponent, ref, Ref, watch } from "vue"
-import DropdownButton, { type DropdownButtonItem } from "../common/DropdownButton"
-import { useLimitAction, useLimitBatch, useLimitFilter } from "./context"
+import { computed, defineComponent, ref, Ref, watch } from "vue"
+import DropdownButton, { type DropdownButtonItem } from "../../common/DropdownButton"
+import { useLimitAction, useLimitBatch, useLimitFilter } from "../context"
 
 const optionPageUrl = getAppPageUrl(OPTION_ROUTE, { i: 'limit' })
 
 type BatchOpt = 'delete' | 'enable' | 'disable'
 
-const useCreateTip = (empty: Ref<boolean>) => {
+const useCreateTip = (empty: Ref<boolean>, isXs: Ref<boolean>) => {
     const tipVisible = ref(false)
     let initialized = false
     watch(empty, emptyVal => {
@@ -33,12 +34,14 @@ const useCreateTip = (empty: Ref<boolean>) => {
         setTimeout(closeTip, 10000)
     })
     const closeTip = () => tipVisible.value = false
-    return { tipVisible, closeTip }
+    const finalVisible = computed(() => !isXs.value && tipVisible.value)
+    return { tipVisible: finalVisible, closeTip }
 }
 
 const _default = defineComponent(() => {
     const { create, test, empty } = useLimitAction()
-    const { tipVisible, closeTip } = useCreateTip(empty)
+    const isXs = useXsState()
+    const { tipVisible, closeTip } = useCreateTip(empty, isXs)
     const filter = useLimitFilter()
     const { batchDelete, batchDisable, batchEnable } = useLimitBatch()
 
@@ -75,20 +78,22 @@ const _default = defineComponent(() => {
                     onSearch={val => filter.url = val}
                 />
                 <SwitchFilterItem
+                    v-show={!isXs.value}
                     historyName="onlyEnabled"
                     label={t(msg => msg.limit.filterDisabled)}
                     defaultValue={filter.onlyEnabled}
                     onChange={val => filter.onlyEnabled = val}
                 />
             </Flex>
-            <Flex gap={10}>
-                <DropdownButton items={batchItems} />
+            <Flex gap={10} align='center'>
+                <DropdownButton v-show={!isXs.value} items={batchItems} />
                 <ButtonFilterItem
                     text={msg => msg.limit.button.test}
                     icon={Operation}
                     onClick={test}
                 />
                 <ButtonFilterItem
+                    v-show={!isXs.value}
                     text={msg => msg.base.option}
                     icon={SetUp}
                     onClick={() => createTabAfterCurrent(optionPageUrl)}
diff --git a/src/pages/app/components/Limit/components/List/Card.tsx b/src/pages/app/components/Limit/components/List/Card.tsx
new file mode 100644
index 00000000..d09ec6e2
--- /dev/null
+++ b/src/pages/app/components/Limit/components/List/Card.tsx
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+import { t } from "@app/locale"
+import { Delete, EditPen } from "@element-plus/icons-vue"
+import { css } from '@emotion/css'
+import Flex from "@pages/components/Flex"
+import { ElButton, ElCard, ElDivider, ElMessageBox, ElTag, type TagProps, useNamespace } from "element-plus"
+import { defineComponent, type FunctionalComponent, type StyleValue } from "vue"
+import { verifyCanModify } from "../../common"
+import { useLimitAction, useLimitData } from "../../context"
+import Rule from "./Rule"
+
+type Props = {
+    value: timer.limit.Item
+}
+
+const CARD_PADDING = 10
+
+const useStyle = () => {
+    const cardNs = useNamespace('card')
+    const cardCls = css`
+        .${cardNs.e('body')}  {
+            padding: ${CARD_PADDING}px;
+        }
+    `
+    return cardCls
+}
+
+const ALL_WEEKDAYS = t(msg => msg.calendar.weekDays).split('|')
+
+const Divider: FunctionalComponent<{}> = () => {
+    const marginInline = `${-CARD_PADDING}px`
+    const width = `calc(100% + ${CARD_PADDING * 2}px)`
+    return <ElDivider style={{ marginBlock: '6px', marginInline, width } satisfies StyleValue} />
+}
+
+const EffectiveDays: FunctionalComponent<{ weekdays?: number[] }> = ({ weekdays = [] }) => {
+    const weekdayNum = weekdays?.length
+    let text: string = ''
+    let type: TagProps['type'] | undefined = undefined
+    if (!weekdayNum || weekdayNum === 7) {
+        text = t(msg => msg.calendar.range.everyday)
+        type = 'success'
+    } else if (weekdayNum === 1) {
+        text = ALL_WEEKDAYS[weekdays[0]]
+    } else {
+        const firstDay = ALL_WEEKDAYS[weekdays[0]]
+        text = `${firstDay}...${weekdayNum}`
+    }
+
+    return <ElTag size="small" type={type}>{text}</ElTag>
+}
+
+const _default = defineComponent<Props>(props => {
+    const { deleteRow } = useLimitData()
+    const { modify } = useLimitAction()
+
+    const handleModify = () => verifyCanModify(props.value)
+        .then(() => modify(props.value))
+        .catch(() => {/** Do nothing */ })
+
+    const handleDelete = () => verifyCanModify(props.value)
+        .then(() => ElMessageBox.confirm(t(msg => msg.limit.message.deleteConfirm, { name: props.value.name })))
+        .then(() => deleteRow(props.value))
+        .catch(() => {/** Do nothing */ })
+
+    const clz = useStyle()
+
+    return () => (
+        <ElCard class={clz} shadow="hover">
+            <Flex column gap={8}>
+                <Flex justify="space-between" align="center">
+                    <Flex align="center" gap={8}>
+                        <span style={{ fontWeight: 'bold' }}>
+                            {props.value.name ?? 'Unnamed'}
+                        </span>
+                        <EffectiveDays weekdays={props.value.weekdays} />
+                    </Flex>
+                    <ElButton
+                        size="small"
+                        type='danger'
+                        text
+                        icon={Delete}
+                        onClick={handleDelete}
+                    />
+                </Flex>
+                <Divider />
+                {/* Sites */}
+                <Flex gap={2}>
+                    {props.value.cond.map((c, idx) => <ElTag key={idx} type='info'>{c}</ElTag>)}
+                </Flex>
+                <Divider />
+                {/** Content */}
+                <Rule value={props.value} />
+                <Divider />
+                {/* Footer Button */}
+                <Flex justify='end'>
+                    <ElButton text icon={EditPen} onClick={handleModify} size='small'>
+                        {t(msg => msg.button.modify)}
+                    </ElButton>
+                </Flex>
+            </Flex>
+        </ElCard >
+    )
+}, { props: ['value'] })
+
+export default _default
diff --git a/src/pages/app/components/Limit/components/List/Rule.tsx b/src/pages/app/components/Limit/components/List/Rule.tsx
new file mode 100644
index 00000000..b53664d7
--- /dev/null
+++ b/src/pages/app/components/Limit/components/List/Rule.tsx
@@ -0,0 +1,115 @@
+import { t } from '@app/locale'
+import Flex from '@pages/components/Flex'
+import { isEffective, meetLimit, meetTimeLimit, period2Str } from '@util/limit'
+import { formatPeriodCommon, MILL_PER_SECOND } from '@util/time'
+import { ElDescriptions, ElDescriptionsItem, ElTag } from 'element-plus'
+import { computed, defineComponent, type FunctionalComponent, toRefs } from 'vue'
+import { DAILY_WEEKLY_TAG_TYPE, PERIOD_TAG_TYPE, VISIT_TAG_TYPE } from '../style'
+
+type Props = {
+    value: timer.limit.Item
+}
+
+const TimeCountPair: FunctionalComponent<{ time?: number, count?: number }> = ({ time, count }) => {
+    if (!time && !count) return null
+    return (
+        <Flex gap={2} wrap>
+            {!!time && (
+                <ElTag size="small" type={DAILY_WEEKLY_TAG_TYPE}>{formatPeriodCommon(time * MILL_PER_SECOND, true)}</ElTag>
+            )}
+            {!!count && (
+                <ElTag size="small" type={DAILY_WEEKLY_TAG_TYPE}>{`${count} ${t(msg => msg.limit.item.visits)}`}</ElTag>
+            )}
+        </Flex>
+    )
+}
+
+type WastePairProps = {
+    time?: number
+    waste: number
+    count?: number
+    visit?: number
+    delayCount?: number
+    allowDelay?: boolean
+}
+
+const WastePair: FunctionalComponent<WastePairProps> = props => {
+    const timeType = computed(() => meetTimeLimit(props.time, props.waste, props.allowDelay, props.delayCount) ? 'danger' : 'info')
+    const visitType = computed(() => meetLimit(props.count, props.visit) ? 'danger' : 'info')
+
+    return (
+        <Flex gap={2}>
+            <ElTag size="small" type={timeType.value}>
+                {formatPeriodCommon(props.waste)}
+            </ElTag>
+            <ElTag size="small" type={visitType.value}>
+                {props.visit ?? 0} {t(msg => msg.limit.item.visits)}
+            </ElTag>
+        </Flex>
+    )
+}
+
+const Rule = defineComponent<Props>(({ value }) => {
+    const {
+        time, count, waste, visit,
+        weekly, weeklyCount, weeklyWaste, weeklyVisit,
+        visitTime, periods,
+        weekdays,
+        allowDelay, delayCount, weeklyDelayCount,
+    } = toRefs(value)
+
+    return () => <>
+        <ElDescriptions border size='small' column={1} labelWidth={130}>
+            <ElDescriptionsItem label={t(msg => msg.limit.item.daily)} v-show={time?.value || count?.value}>
+                <TimeCountPair time={time?.value} count={count?.value} />
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label={t(msg => msg.limit.item.weekly)} v-show={weekly?.value || weeklyCount?.value}>
+                <TimeCountPair time={weekly?.value} count={weeklyCount?.value} />
+            </ElDescriptionsItem>
+            {!!visitTime?.value && (
+                <ElDescriptionsItem label={t(msg => msg.limit.item.visitTime)}>
+                    <ElTag size="small" type={VISIT_TAG_TYPE}>{formatPeriodCommon(visitTime.value * MILL_PER_SECOND, true)}</ElTag>
+                </ElDescriptionsItem>
+            )}
+            {!!periods?.value?.length && (
+                <ElDescriptionsItem label={t(msg => msg.limit.item.period)}>
+                    <Flex gap={2} wrap>
+                        {periods.value.map((p, idx) => (
+                            <ElTag key={idx} size="small" type={PERIOD_TAG_TYPE}>{period2Str(p)}</ElTag>
+                        ))}
+                    </Flex>
+                </ElDescriptionsItem>
+            )}
+        </ElDescriptions>
+        <ElDescriptions border size='small' column={1} labelWidth={130}>
+            <ElDescriptionsItem label={t(msg => msg.calendar.range.today)}>
+                {isEffective(weekdays?.value) ? (
+                    <WastePair
+                        waste={waste?.value}
+                        time={time?.value}
+                        count={count?.value}
+                        visit={visit?.value}
+                        allowDelay={allowDelay?.value}
+                        delayCount={delayCount?.value}
+                    />
+                ) : (
+                    <ElTag type="info" size="small">
+                        {t(msg => msg.limit.item.notEffective)}
+                    </ElTag>
+                )}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label={t(msg => msg.calendar.range.thisWeek)}>
+                <WastePair
+                    waste={weeklyWaste?.value}
+                    time={weekly?.value}
+                    count={weeklyCount?.value}
+                    visit={weeklyVisit?.value}
+                    allowDelay={allowDelay?.value}
+                    delayCount={weeklyDelayCount?.value}
+                />
+            </ElDescriptionsItem>
+        </ElDescriptions>
+    </>
+}, { props: ['value'] })
+
+export default Rule
\ No newline at end of file
diff --git a/src/pages/app/components/Limit/components/List/index.tsx b/src/pages/app/components/Limit/components/List/index.tsx
new file mode 100644
index 00000000..5dd51920
--- /dev/null
+++ b/src/pages/app/components/Limit/components/List/index.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2021 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+import Flex from '@pages/components/Flex'
+import { ElScrollbar } from 'element-plus'
+import { defineComponent } from "vue"
+import { useLimitData } from "../../context"
+import Card from "./Card"
+
+const _default = defineComponent(() => {
+    const { list } = useLimitData()
+
+    return () => (
+        <ElScrollbar>
+            <Flex
+                column padding={8} gap={15} height="100%"
+                style={{ overflow: 'auto' }}
+            >
+                {list.value.map(row => <Card key={row.id} value={row} />)}
+            </Flex>
+        </ElScrollbar>
+    )
+})
+
+export default _default
diff --git a/src/pages/app/components/Limit/LimitModify/Sop/Step1.tsx b/src/pages/app/components/Limit/components/Modify/Sop/Step1.tsx
similarity index 90%
rename from src/pages/app/components/Limit/LimitModify/Sop/Step1.tsx
rename to src/pages/app/components/Limit/components/Modify/Sop/Step1.tsx
index c27a9713..e9f4d1de 100644
--- a/src/pages/app/components/Limit/LimitModify/Sop/Step1.tsx
+++ b/src/pages/app/components/Limit/components/Modify/Sop/Step1.tsx
@@ -1,15 +1,17 @@
 import { t } from "@app/locale"
+import { useXsState } from '@hooks/useMediaSize'
 import { ElCol, ElForm, ElFormItem, ElInput, ElRow, ElSelect, ElSwitch } from "element-plus"
 import { defineComponent } from "vue"
 import { useSopData } from "./context"
 
 const _default = defineComponent(() => {
     const data = useSopData()
+    const isXs = useXsState()
 
     return () => (
         <ElForm labelWidth={130} labelPosition="left">
             <ElRow gutter={30}>
-                <ElCol span={12}>
+                <ElCol span={isXs.value ? 24 : 12}>
                     <ElFormItem label={t(msg => msg.limit.item.name)} required>
                         <ElInput
                             modelValue={data.name} onInput={val => data.name = val}
@@ -17,7 +19,7 @@ const _default = defineComponent(() => {
                         />
                     </ElFormItem>
                 </ElCol>
-                <ElCol span={12}>
+                <ElCol span={isXs.value ? 24 : 12}>
                     <ElFormItem label={t(msg => msg.limit.item.enabled)} required>
                         <ElSwitch modelValue={data.enabled} onChange={v => data.enabled = !!v} />
                     </ElFormItem>
diff --git a/src/pages/app/components/Limit/LimitModify/Sop/Step2/SiteInput.tsx b/src/pages/app/components/Limit/components/Modify/Sop/Step2/SiteInput.tsx
similarity index 100%
rename from src/pages/app/components/Limit/LimitModify/Sop/Step2/SiteInput.tsx
rename to src/pages/app/components/Limit/components/Modify/Sop/Step2/SiteInput.tsx
diff --git a/src/pages/app/components/Limit/LimitModify/Sop/Step2/index.tsx b/src/pages/app/components/Limit/components/Modify/Sop/Step2/index.tsx
similarity index 100%
rename from src/pages/app/components/Limit/LimitModify/Sop/Step2/index.tsx
rename to src/pages/app/components/Limit/components/Modify/Sop/Step2/index.tsx
diff --git a/src/pages/app/components/Limit/LimitModify/Sop/Step3/PeriodInput.tsx b/src/pages/app/components/Limit/components/Modify/Sop/Step3/PeriodInput.tsx
similarity index 82%
rename from src/pages/app/components/Limit/LimitModify/Sop/Step3/PeriodInput.tsx
rename to src/pages/app/components/Limit/components/Modify/Sop/Step3/PeriodInput.tsx
index 6c90e74d..59f1fcb3 100644
--- a/src/pages/app/components/Limit/LimitModify/Sop/Step3/PeriodInput.tsx
+++ b/src/pages/app/components/Limit/components/Modify/Sop/Step3/PeriodInput.tsx
@@ -8,7 +8,7 @@
 import { t } from "@app/locale"
 import { Check, Close, Plus } from "@element-plus/icons-vue"
 import { css } from '@emotion/css'
-import { useState, useSwitch } from "@hooks"
+import { useState, useSwitch, useXsState } from "@hooks"
 import Flex from "@pages/components/Flex"
 import { dateMinute2Idx, period2Str } from "@util/limit"
 import { MILL_PER_HOUR } from "@util/time"
@@ -95,6 +95,7 @@ const usePickerStyle = () => {
 const PeriodInput = defineComponent<ModelValue<timer.limit.Period[]>>(props => {
     const [editing, openEditing, closeEditing] = useSwitch(false)
     const [editingRange, setEditingRange] = useState(rangeInitial())
+    const isXs = useXsState()
 
     const handleEdit = () => {
         openEditing()
@@ -118,17 +119,19 @@ const PeriodInput = defineComponent<ModelValue<timer.limit.Period[]>>(props => {
     const pickerCls = usePickerStyle()
 
     return () => (
-        <Flex gap={5}>
-            {props.modelValue?.map((p, idx) =>
-                <ElTag
-                    size="large"
-                    closable
-                    onClose={() => handleDelete(idx)}
-                >
-                    {period2Str(p)}
-                </ElTag>
-            )}
-            <div v-show={editing.value}>
+        <Flex gap={5} column={isXs.value}>
+            <Flex gap={5} wrap>
+                {props.modelValue?.map((p, idx) =>
+                    <ElTag
+                        size={isXs.value ? 'small' : 'large'}
+                        closable
+                        onClose={() => handleDelete(idx)}
+                    >
+                        {period2Str(p)}
+                    </ElTag>
+                )}
+            </Flex>
+            <Flex v-show={editing.value} wrap={false}>
                 <ElTimePicker
                     class={pickerCls}
                     modelValue={editingRange.value}
@@ -148,15 +151,18 @@ const PeriodInput = defineComponent<ModelValue<timer.limit.Period[]>>(props => {
                     onClick={handleSave}
                     style={{ ...BUTTON_STYLE, marginInlineStart: 0 } satisfies StyleValue}
                 />
+            </Flex>
+            <div>
+                <ElButton
+                    v-show={!editing.value}
+                    icon={Plus}
+                    onClick={handleEdit}
+                    style={BUTTON_STYLE}
+                    size={isXs.value ? 'small' : undefined}
+                >
+                    {t(msg => msg.button.create)}
+                </ElButton>
             </div>
-            <ElButton
-                v-show={!editing.value}
-                icon={Plus}
-                onClick={handleEdit}
-                style={BUTTON_STYLE}
-            >
-                {t(msg => msg.button.create)}
-            </ElButton>
         </Flex>
     )
 }, { props: ['modelValue', 'onChange'] })
diff --git a/src/pages/app/components/Limit/components/Modify/Sop/Step3/TimeInput.tsx b/src/pages/app/components/Limit/components/Modify/Sop/Step3/TimeInput.tsx
new file mode 100644
index 00000000..a04b4dc9
--- /dev/null
+++ b/src/pages/app/components/Limit/components/Modify/Sop/Step3/TimeInput.tsx
@@ -0,0 +1,251 @@
+import { CircleClose, Clock } from "@element-plus/icons-vue"
+import { useDebounceFn, useState, useXsState } from "@hooks"
+import { getStyle } from "@pages/util/style"
+import { range } from "@util/array"
+import {
+    Effect, ElIcon, ElInput, ElPopover, ElScrollbar,
+    type ScrollbarInstance,
+    useLocale, useNamespace
+} from "element-plus"
+import { computed, defineComponent, nextTick, onMounted, ref, Transition, watch } from "vue"
+
+function computeSecond2LimitInfo(time: number): [number, number, number] {
+    time = time || 0
+    const second = time % 60
+    const totalMinutes = (time - second) / 60
+    const minute = totalMinutes % 60
+    const hour = (totalMinutes - minute) / 60
+    return [hour, minute, second]
+}
+
+const formatTimeVal = (val: number): string => {
+    return val?.toString?.()?.padStart?.(2, '0') ?? 'NaN'
+}
+
+type TimeSpinnerProps = {
+    max: number
+    modelValue: number
+    visible: boolean
+    onChange?: (val: number) => void
+}
+
+const TimeSpinner = defineComponent<TimeSpinnerProps>(props => {
+    const ns = useNamespace('time')
+    const scrollbar = ref<ScrollbarInstance>()
+    const scrolling = ref(false)
+
+    const debounceChangeValue = useDebounceFn((val: number) => {
+        scrolling.value = false
+        props.onChange?.(val)
+    }, 200)
+
+    const getScrollbarElement = () => {
+        const el = scrollbar.value?.$el
+        return el?.querySelector(`.${ns.namespace.value}-scrollbar__wrap`) as HTMLElement
+    }
+
+    const adjustSpinner = (value: number) => {
+        let scrollbarEl = getScrollbarElement()
+        if (!scrollbarEl) return
+
+        scrollbarEl.scrollTop = Math.max(0, value * typeItemHeight())
+    }
+
+    watch(() => props.modelValue, () => adjustSpinner(props.modelValue))
+    watch(() => props.visible, () => props.visible && nextTick(() => adjustSpinner(props.modelValue)))
+
+    const typeItemHeight = (): number => {
+        const listItem = scrollbar.value?.$el.querySelector('li') as HTMLLinkElement
+        if (listItem) {
+            return Number.parseFloat(getStyle(listItem, 'height')) || 0
+        }
+        return 0
+    }
+
+    const bindScroll = () => {
+        let scrollbarEl = getScrollbarElement()
+        if (!scrollbarEl) return
+
+        scrollbarEl.addEventListener('scroll', () => {
+            scrolling.value = true
+            const scrollTop = getScrollbarElement()?.scrollTop ?? 0
+            const scrollbarH = (scrollbar.value?.$el as HTMLUListElement)!.offsetHeight ?? 0
+            const itemH = typeItemHeight()
+            const estimatedIdx = Math.round((scrollTop - (scrollbarH * 0.5 - 10) / itemH + 3) / itemH)
+            const value = Math.min(estimatedIdx, props.max - 1)
+            debounceChangeValue(value)
+        }, { passive: true })
+    }
+
+    onMounted(() => {
+        bindScroll()
+        adjustSpinner(props.modelValue)
+    })
+
+    return () => (
+        <ElScrollbar
+            ref={scrollbar}
+            class={ns.be('spinner', 'wrapper')}
+            viewClass={ns.be('spinner', 'list')}
+            noresize
+            wrapStyle={{ maxHeight: 'inherit' }}
+            tag="ul"
+        >
+            {range(props.max).map(idx => (
+                <li
+                    onClick={() => props.onChange?.(idx)}
+                    class={[
+                        ns.be('spinner', 'item'),
+                        ns.is('active', idx === props.modelValue),
+                    ]}
+                >
+                    {idx.toString().padStart(2, '0')}
+                </li>
+            ))}
+        </ElScrollbar>
+    )
+}, { props: ['max', 'modelValue', 'visible', 'onChange'] })
+
+const useTimeInput = (source: () => number) => {
+    const [initialHour, initialMin, initialSec] = computeSecond2LimitInfo(source?.() ?? 0)
+    const [hour, setHour] = useState(initialHour)
+    const [minute, setMinute] = useState(initialMin)
+    const [second, setSecond] = useState(initialSec)
+
+    const reset = () => {
+        const [hour, min, sec] = computeSecond2LimitInfo(source?.() ?? 0)
+        setHour(hour)
+        setMinute(min)
+        setSecond(sec)
+    }
+
+    watch(source, reset)
+
+    const getTotalSecond = () => {
+        let time = 0
+        time += (hour.value ?? 0) * 3600
+        time += (minute.value ?? 0) * 60
+        time += (second.value ?? 0)
+        return time
+    }
+
+    return {
+        hour, minute, second,
+        setHour, setMinute, setSecond,
+        reset, getTotalSecond,
+    }
+}
+
+type TimeInputProps = {
+    modelValue: number
+    hourMax?: number
+    onChange?: (val: number) => void
+}
+
+/**
+ * Rewrite
+ *
+ * https://github.com/element-plus/element-plus/blob/dev/packages/components/time-picker/src/time-picker-com/panel-time-pick.vue
+ */
+const TimeInput = defineComponent<TimeInputProps>(props => {
+    const [popoverVisible, setPopoverVisible] = useState(false)
+    const {
+        hour, minute, second,
+        setHour, setMinute, setSecond,
+        reset, getTotalSecond,
+    } = useTimeInput(() => props.modelValue)
+
+    const inputText = computed(() => `${formatTimeVal(hour.value)} h ${formatTimeVal(minute.value)} m ${formatTimeVal(second.value)} s`)
+
+    const ns = useNamespace('time')
+    const nsDate = useNamespace('date')
+    const nsInput = useNamespace('input')
+
+    const { t: tEle } = useLocale()
+
+    const transitionName = computed(() => popoverVisible.value ? '' : `${ns.namespace.value}-zoom-in-top`)
+
+    const handleCancel = () => {
+        reset()
+        setPopoverVisible(false)
+    }
+
+    const handleConfirm = () => {
+        props.onChange?.(getTotalSecond())
+        setPopoverVisible(false)
+    }
+
+    const handleVisibleChange = (newVal: boolean) => {
+        setPopoverVisible(newVal)
+        !newVal && handleCancel()
+    }
+
+    const handleClear = (ev: MouseEvent) => {
+        props.onChange?.(0)
+        ev.stopPropagation()
+    }
+
+    const isXs = useXsState()
+
+    return () => (
+        <ElPopover
+            trigger='click'
+            effect={Effect.LIGHT}
+            visible={popoverVisible.value}
+            transition={`${nsDate.namespace.value}-zoom-in-top`}
+            popperClass={`${nsDate.namespace.value}-picker__popper`}
+            onUpdate:visible={handleVisibleChange}
+            v-slots={{
+                reference: () => (
+                    <ElInput
+                        class={[nsDate.b('editor'), nsDate.bm('editor', 'time')]}
+                        prefixIcon={Clock}
+                        modelValue={inputText.value}
+                        inputStyle={{ cursor: 'pointer' }}
+                        style={{ '--el-date-editor-width': '160px' }}
+                        size={isXs.value ? 'small' : undefined}
+                        readonly
+                        v-slots={{
+                            suffix: () => !!props.modelValue && (
+                                <div onClick={handleClear}>
+                                    <ElIcon class={[nsInput.e('icon'), 'clear-icon']}>
+                                        <CircleClose />
+                                    </ElIcon>
+                                </div>
+                            )
+                        }}
+                    />
+                )
+            }}>
+            <Transition name={transitionName.value}>
+                <div class={ns.b('panel')} style={{ width: '100%' }}>
+                    <div class={[ns.be('panel', 'content'), 'has-seconds']}>
+                        <div class={[ns.b('spinner'), 'has-seconds']}>
+                            <TimeSpinner max={props.hourMax ?? 24} modelValue={hour.value} onChange={setHour} visible={popoverVisible.value} />
+                            <TimeSpinner max={60} modelValue={minute.value} onChange={setMinute} visible={popoverVisible.value} />
+                            <TimeSpinner max={60} modelValue={second.value} onChange={setSecond} visible={popoverVisible.value} />
+                        </div>
+                    </div>
+                    <div class={[ns.be('panel', 'footer')]}>
+                        <button
+                            type="button"
+                            class={[ns.be('panel', 'btn'), 'cancel']}
+                            onClick={handleCancel}
+                        >
+                            {tEle('el.datepicker.cancel')}
+                        </button>
+                        <button
+                            type="button"
+                            class={[ns.be('panel', 'btn'), 'confirm']}
+                            onClick={handleConfirm}
+                        >
+                            {tEle('el.datepicker.confirm')}
+                        </button>
+                    </div>
+                </div>
+            </Transition>
+        </ElPopover>
+    )
+}, { props: ['hourMax', 'modelValue', 'onChange'] })
+
+export default TimeInput
\ No newline at end of file
diff --git a/src/pages/app/components/Limit/LimitModify/Sop/Step3/index.tsx b/src/pages/app/components/Limit/components/Modify/Sop/Step3/index.tsx
similarity index 80%
rename from src/pages/app/components/Limit/LimitModify/Sop/Step3/index.tsx
rename to src/pages/app/components/Limit/components/Modify/Sop/Step3/index.tsx
index 25acb2b8..6c815967 100644
--- a/src/pages/app/components/Limit/LimitModify/Sop/Step3/index.tsx
+++ b/src/pages/app/components/Limit/components/Modify/Sop/Step3/index.tsx
@@ -6,6 +6,7 @@
  */
 
 import { t } from "@app/locale"
+import { useXsState } from '@hooks/useMediaSize'
 import Flex from "@pages/components/Flex"
 import { ElForm, ElFormItem, ElInputNumber } from "element-plus"
 import { defineComponent } from "vue"
@@ -17,32 +18,35 @@ const MAX_HOUR_WEEKLY = 7 * 24
 
 const _default = defineComponent(() => {
     const data = useSopData()
+    const isXs = useXsState()
 
     return () => (
         <Flex justify="center">
-            <ElForm labelWidth={150} labelPosition="left">
+            <ElForm labelWidth={150} labelPosition='left'>
                 <ElFormItem label={t(msg => msg.limit.item.daily)}>
-                    <Flex gap={10}>
+                    <Flex gap={10} column={isXs.value}>
                         <TimeInput modelValue={data.time} onChange={v => data.time = v} />
-                        {t(msg => msg.limit.item.or)}
+                        {!isXs.value && t(msg => msg.limit.item.or)}
                         <ElInputNumber
                             min={0}
                             step={10}
                             modelValue={data.count}
                             onChange={v => data.count = v ?? 0}
+                            size={isXs.value ? 'small' : undefined}
                             v-slots={{ suffix: () => t(msg => msg.limit.item.visits) }}
                         />
                     </Flex>
                 </ElFormItem>
                 <ElFormItem label={t(msg => msg.limit.item.weekly)}>
-                    <Flex gap={10}>
+                    <Flex gap={10} column={isXs.value}>
                         <TimeInput modelValue={data.weekly} onChange={v => data.weekly = v} hourMax={MAX_HOUR_WEEKLY} />
-                        {t(msg => msg.limit.item.or)}
+                        {!isXs.value && t(msg => msg.limit.item.or)}
                         <ElInputNumber
                             min={0}
                             step={10}
                             modelValue={data.weeklyCount}
                             onChange={v => data.weeklyCount = v ?? 0}
+                            size={isXs.value ? 'small' : undefined}
                             v-slots={{ suffix: () => t(msg => msg.limit.item.visits) }}
                         />
                     </Flex>
diff --git a/src/pages/app/components/Limit/LimitModify/Sop/context.ts b/src/pages/app/components/Limit/components/Modify/Sop/context.ts
similarity index 98%
rename from src/pages/app/components/Limit/LimitModify/Sop/context.ts
rename to src/pages/app/components/Limit/components/Modify/Sop/context.ts
index 51eb12b7..d2ea4273 100644
--- a/src/pages/app/components/Limit/LimitModify/Sop/context.ts
+++ b/src/pages/app/components/Limit/components/Modify/Sop/context.ts
@@ -4,7 +4,7 @@ import { range } from "@util/array"
 import { ElMessage } from "element-plus"
 import { type Reactive, reactive, type Ref, ref, toRaw } from "vue"
 
-type Step = 0 | 1 | 2
+export type Step = 0 | 1 | 2
 
 type SopData = Required<Omit<timer.limit.Rule, 'id'>>
 
diff --git a/src/pages/app/components/Limit/LimitModify/Sop/index.tsx b/src/pages/app/components/Limit/components/Modify/Sop/index.tsx
similarity index 54%
rename from src/pages/app/components/Limit/LimitModify/Sop/index.tsx
rename to src/pages/app/components/Limit/components/Modify/Sop/index.tsx
index 6dbd7b5a..a3d5a11f 100644
--- a/src/pages/app/components/Limit/LimitModify/Sop/index.tsx
+++ b/src/pages/app/components/Limit/components/Modify/Sop/index.tsx
@@ -7,9 +7,11 @@
 
 import DialogSop from "@app/components/common/DialogSop"
 import { t } from "@app/locale"
-import { ElStep, ElSteps } from "element-plus"
-import { computed, defineComponent } from "vue"
-import { initSop } from "./context"
+import { useXsState } from '@hooks'
+import Flex from '@pages/components/Flex'
+import { ElDivider, ElStep, ElSteps, ElText } from "element-plus"
+import { computed, defineComponent, StyleValue } from "vue"
+import { initSop, type Step } from "./context"
 import Step1 from "./Step1"
 import Step2 from "./Step2"
 import Step3 from "./Step3"
@@ -26,12 +28,20 @@ type Props = {
     onSave?: ArgCallback<MakeOptional<timer.limit.Rule, 'id'>>
 }
 
+const STEP_TITLE: Record<Step, string> = {
+    0: t(msg => msg.limit.step.base),
+    1: t(msg => msg.limit.step.url),
+    2: t(msg => msg.limit.step.rule),
+}
+
 const _default = defineComponent<Props>(({ onSave, onCancel }, ctx) => {
     const { reset, step, handleNext } = initSop({ onSave })
     const last = computed(() => step.value === 2)
     const first = computed(() => step.value === 0)
     ctx.expose({ reset } satisfies SopInstance)
 
+    const isXs = useXsState()
+
     return () => (
         <DialogSop
             last={last.value}
@@ -41,13 +51,20 @@ const _default = defineComponent<Props>(({ onSave, onCancel }, ctx) => {
             onNext={handleNext}
             onFinish={handleNext}
             v-slots={{
-                steps: () => (
-                    <ElSteps space={200} finishStatus="success" active={step.value} alignCenter>
-                        <ElStep title={t(msg => msg.limit.step.base)} />
-                        <ElStep title={t(msg => msg.limit.step.url)} />
-                        <ElStep title={t(msg => msg.limit.step.rule)} />
-                    </ElSteps>
-                ),
+                steps: () => isXs.value
+                    ? (
+                        <Flex column align='center'>
+                            <ElText size='large'>{STEP_TITLE[step.value]}</ElText>
+                            <ElDivider style={{ marginBlockStart: '5px' } satisfies StyleValue} />
+                        </Flex>
+                    )
+                    : (
+                        <ElSteps space={200} finishStatus="success" active={step.value} alignCenter>
+                            <ElStep title={STEP_TITLE[0]} />
+                            <ElStep title={STEP_TITLE[1]} />
+                            <ElStep title={STEP_TITLE[2]} />
+                        </ElSteps>
+                    ),
                 content: () => <>
                     <Step1 v-show={step.value === 0} />
                     <Step2 v-show={step.value === 1} />
diff --git a/src/pages/app/components/Limit/LimitModify/index.tsx b/src/pages/app/components/Limit/components/Modify/index.tsx
similarity index 91%
rename from src/pages/app/components/Limit/LimitModify/index.tsx
rename to src/pages/app/components/Limit/components/Modify/index.tsx
index 2abe7dbe..1a01ad79 100644
--- a/src/pages/app/components/Limit/LimitModify/index.tsx
+++ b/src/pages/app/components/Limit/components/Modify/index.tsx
@@ -6,17 +6,17 @@
  */
 
 import { t } from "@app/locale"
-import { useSwitch } from "@hooks"
+import { useSwitch, useXsState } from "@hooks"
 import limitService from "@service/limit-service"
 import { ElDialog, ElMessage } from "element-plus"
 import { computed, defineComponent, nextTick, ref, toRaw } from "vue"
-import { type ModifyInstance, useLimitTable } from "../context"
+import { type ModifyInstance, useLimitData } from "../../context"
 import Sop, { type SopInstance } from "./Sop"
 
 type Mode = "create" | "modify"
 
 const _default = defineComponent((_, ctx) => {
-    const { refresh } = useLimitTable()
+    const { refresh } = useLimitData()
     const [visible, open, close] = useSwitch()
     const sop = ref<SopInstance>()
     const mode = ref<Mode>()
@@ -68,12 +68,15 @@ const _default = defineComponent((_, ctx) => {
         },
     } satisfies ModifyInstance)
 
+    const isXs = useXsState()
+
     return () => (
         <ElDialog
             title={title.value}
             modelValue={visible.value}
             closeOnClickModal={false}
-            width={800}
+            fullscreen={isXs.value}
+            width={isXs.value ? '100%' : 800}
             onClose={close}
         >
             <Sop ref={sop} onSave={handleSave} onCancel={close} />
diff --git a/src/pages/app/components/Limit/LimitTable/column/LimitOperationColumn.tsx b/src/pages/app/components/Limit/components/Table/OperationColumn.tsx
similarity index 93%
rename from src/pages/app/components/Limit/LimitTable/column/LimitOperationColumn.tsx
rename to src/pages/app/components/Limit/components/Table/OperationColumn.tsx
index 3d6e7f08..9d531f12 100644
--- a/src/pages/app/components/Limit/LimitTable/column/LimitOperationColumn.tsx
+++ b/src/pages/app/components/Limit/components/Table/OperationColumn.tsx
@@ -10,7 +10,7 @@ import { locale } from "@i18n"
 import { ElButton, ElTableColumn, type RenderRowData } from "element-plus"
 import { defineComponent } from "vue"
 import { verifyCanModify } from "../../common"
-import { useLimitAction, useLimitTable } from "../../context"
+import { useLimitAction, useLimitData } from "../../context"
 
 const LOCALE_WIDTH: { [locale in timer.Locale]: number } = {
     en: 220,
@@ -29,7 +29,7 @@ const LOCALE_WIDTH: { [locale in timer.Locale]: number } = {
 }
 
 const _default = defineComponent<{}>(() => {
-    const { deleteRow } = useLimitTable()
+    const { deleteRow } = useLimitData()
     const { modify } = useLimitAction()
 
     const handleModify = (row: timer.limit.Item) => verifyCanModify(row)
diff --git a/src/pages/app/components/Limit/components/Table/Rule.tsx b/src/pages/app/components/Limit/components/Table/Rule.tsx
new file mode 100644
index 00000000..6ed4ce8e
--- /dev/null
+++ b/src/pages/app/components/Limit/components/Table/Rule.tsx
@@ -0,0 +1,68 @@
+import { t } from "@app/locale"
+import Flex from "@pages/components/Flex"
+import { period2Str } from '@util/limit'
+import { formatPeriodCommon, MILL_PER_SECOND } from '@util/time'
+import { ElTag, TagProps } from 'element-plus'
+import { defineComponent, type FunctionalComponent, toRef } from "vue"
+import { DAILY_WEEKLY_TAG_TYPE, VISIT_TAG_TYPE } from '../style'
+
+type TimeCountPairProps = {
+    time?: number
+    count?: number
+    label: string
+    type?: TagProps['type']
+}
+
+const TimeCountPair: FunctionalComponent<TimeCountPairProps> = ({ time, count, label, type = DAILY_WEEKLY_TAG_TYPE }) => {
+    if (!time && !count) return null
+
+    const timeContent = time ? formatPeriodCommon(time * MILL_PER_SECOND, true) : null
+    const countContent = count ? `${count} ${t(msg => msg.limit.item.visits)}` : null
+    const content = [timeContent, countContent].filter(str => !!str).join(` ${t(msg => msg.limit.item.or)} `)
+
+    return (
+        <div>
+            <ElTag size="small" type={type}>{label}: {content}</ElTag>
+        </div>
+    )
+}
+
+const PeriodTag: FunctionalComponent<{ periods?: timer.limit.Period[], }> = ({ periods }) => {
+    if (!periods?.length) return null
+
+    return <>
+        <div>
+            <ElTag size="small" type="info">{t(msg => msg.limit.item.period)}</ElTag>
+        </div>
+        <Flex justify="center" gap={4} wrap="wrap">
+            {periods.map((p, idx) => <ElTag key={idx} size="small" type="info">{period2Str(p)}</ElTag>)}
+        </Flex>
+    </>
+}
+
+const Rule = defineComponent<{ value: timer.limit.Item }>(props => {
+    const row = toRef(props, 'value')
+
+    return () => (
+        <Flex column gap={4}>
+            <TimeCountPair
+                time={row.value?.time}
+                count={row.value?.count}
+                label={t(msg => msg.limit.item.daily)}
+            />
+            <TimeCountPair
+                time={row.value?.weekly}
+                count={row.value?.weeklyCount}
+                label={t(msg => msg.limit.item.weekly)}
+            />
+            <TimeCountPair
+                time={row.value?.visitTime}
+                label={t(msg => msg.limit.item.visitTime)}
+                type={VISIT_TAG_TYPE}
+            />
+            <PeriodTag periods={row.value?.periods} />
+        </Flex>
+    )
+}, { props: ['value'] })
+
+export default Rule
\ No newline at end of file
diff --git a/src/pages/app/components/Limit/components/Table/Waste.tsx b/src/pages/app/components/Limit/components/Table/Waste.tsx
new file mode 100644
index 00000000..226a05ac
--- /dev/null
+++ b/src/pages/app/components/Limit/components/Table/Waste.tsx
@@ -0,0 +1,48 @@
+import TooltipWrapper from "@app/components/common/TooltipWrapper"
+import { t } from "@app/locale"
+import Flex from "@pages/components/Flex"
+import { meetLimit, meetTimeLimit } from "@util/limit"
+import { formatPeriodCommon } from "@util/time"
+import { ElTag } from "element-plus"
+import { computed, defineComponent } from "vue"
+
+type Props = {
+    time?: number
+    waste: number
+    count?: number
+    visit?: number
+    delayCount?: number
+    allowDelay?: boolean
+}
+
+const Waste = defineComponent<Props>(props => {
+    const timeType = computed(() => meetTimeLimit(props.time, props.waste, props.allowDelay, props.delayCount) ? 'danger' : 'info')
+    const visitType = computed(() => meetLimit(props.count, props.visit) ? 'danger' : 'info')
+
+    return () => (
+        <Flex column gap={5}>
+            <div>
+                <TooltipWrapper
+                    trigger="hover"
+                    usePopover={props.allowDelay && !!props.time}
+                    placement="top"
+                    v-slots={{
+                        content: () => `${t(msg => msg.limit.item.delayCount)}: ${props.delayCount ?? 0}`,
+                        default: () => (
+                            <ElTag size="small" type={timeType.value}>
+                                {formatPeriodCommon(props.waste)}
+                            </ElTag>
+                        ),
+                    }}
+                />
+            </div>
+            <div>
+                <ElTag size="small" type={visitType.value}>
+                    {props.visit ?? 0} {t(msg => msg.limit.item.visits)}
+                </ElTag>
+            </div>
+        </Flex>
+    )
+}, { props: ['time', 'waste', 'count', 'visit', 'allowDelay', 'delayCount'] })
+
+export default Waste
\ No newline at end of file
diff --git a/src/pages/app/components/Limit/LimitTable/Weekday.tsx b/src/pages/app/components/Limit/components/Table/Weekday.tsx
similarity index 100%
rename from src/pages/app/components/Limit/LimitTable/Weekday.tsx
rename to src/pages/app/components/Limit/components/Table/Weekday.tsx
diff --git a/src/pages/app/components/Limit/LimitTable/index.tsx b/src/pages/app/components/Limit/components/Table/index.tsx
similarity index 92%
rename from src/pages/app/components/Limit/LimitTable/index.tsx
rename to src/pages/app/components/Limit/components/Table/index.tsx
index ea7c6401..18f80643 100644
--- a/src/pages/app/components/Limit/LimitTable/index.tsx
+++ b/src/pages/app/components/Limit/components/Table/index.tsx
@@ -9,11 +9,11 @@ import { t } from "@app/locale"
 import { useLocalStorage, useRequest, useState } from "@hooks"
 import weekHelper from "@service/components/week-helper"
 import { isEffective } from "@util/limit"
-import { ElSwitch, ElTable, ElTableColumn, ElTag, type RenderRowData, type Sort } from "element-plus"
-import { defineComponent, watch } from "vue"
-import { useLimitTable } from "../context"
-import LimitOperationColumn from "./column/LimitOperationColumn"
-import RuleContent from "./RuleContent"
+import { ElSwitch, ElTable, ElTableColumn, ElTag, type RenderRowData, type Sort, type TableInstance } from "element-plus"
+import { defineComponent, ref, watch } from "vue"
+import { useLimitData, type LimitInstance } from "../../context"
+import LimitOperationColumn from "./OperationColumn"
+import Rule from "./Rule"
 import Waste from "./Waste"
 import Weekday from "./Weekday"
 
@@ -27,17 +27,14 @@ const sortMethodByNumVal = (key: keyof timer.limit.Item & 'waste' | 'weeklyWaste
 
 const sortByEffectiveDays = ({ weekdays: a }: timer.limit.Item, { weekdays: b }: timer.limit.Item) => (a?.length ?? 0) - (b?.length ?? 0)
 
-const _default = defineComponent(() => {
+const _default = defineComponent((_, ctx) => {
     const { data: weekStartName } = useRequest(async () => {
         const offset = await weekHelper.getRealWeekStart()
         const name = t(msg => msg.calendar.weekDays)?.split('|')?.[offset]
         return name || 'NaN'
     })
 
-    const {
-        list, table,
-        changeEnabled, changeDelay, changeLocked
-    } = useLimitTable()
+    const { list, changeEnabled, changeDelay, changeLocked } = useLimitData()
 
     const [cachedSort, setCachedSort] = useLocalStorage<Sort>(
         '__limit_sort_default__', { prop: DEFAULT_SORT_COL, order: 'descending' }
@@ -46,6 +43,12 @@ const _default = defineComponent(() => {
     const [sort, setSort] = useState(cachedSort)
     watch(sort, () => setCachedSort(sort.value))
 
+    const table = ref<TableInstance>()
+
+    ctx.expose({
+        getSelected: () => table.value?.getSelectionRows?.() ?? []
+    } satisfies LimitInstance)
+
     return () => (
         <ElTable
             ref={table}
@@ -78,7 +81,7 @@ const _default = defineComponent(() => {
                 minWidth={200}
                 align="center"
             >
-                {({ row }: RenderRowData<timer.limit.Item>) => <RuleContent value={row} />}
+                {({ row }: RenderRowData<timer.limit.Item>) => <Rule value={row} />}
             </ElTableColumn>
             <ElTableColumn
                 prop='effectiveDays'
diff --git a/src/pages/app/components/Limit/LimitTest.tsx b/src/pages/app/components/Limit/components/Test.tsx
similarity index 87%
rename from src/pages/app/components/Limit/LimitTest.tsx
rename to src/pages/app/components/Limit/components/Test.tsx
index 3a6c37c0..bcd74c0c 100644
--- a/src/pages/app/components/Limit/LimitTest.tsx
+++ b/src/pages/app/components/Limit/components/Test.tsx
@@ -6,13 +6,13 @@
  */
 
 import { t } from "@app/locale"
-import { useDebounce, useRequest, useState, useSwitch } from "@hooks"
+import { useDebounce, useRequest, useState, useSwitch, useXsState } from "@hooks"
 import Flex from '@pages/components/Flex'
 import limitService from "@service/limit-service"
 import { ElDialog, ElInput } from "element-plus"
 import { defineComponent } from "vue"
-import AlertLines, { type AlertLinesProps } from '../common/AlertLines'
-import { type TestInstance } from "./context"
+import AlertLines, { type AlertLinesProps } from '../../common/AlertLines'
+import { type TestInstance } from "../context"
 
 async function fetchResult(url: string | undefined): Promise<AlertLinesProps> {
     if (!url) {
@@ -35,6 +35,7 @@ const _default = defineComponent((_props, ctx) => {
     const debouncedUrl = useDebounce(url)
     const [visible, open, close] = useSwitch()
     const { data: result } = useRequest(() => fetchResult(debouncedUrl.value), { deps: debouncedUrl })
+    const isXs = useXsState()
 
     ctx.expose({
         show: () => {
@@ -49,6 +50,7 @@ const _default = defineComponent((_props, ctx) => {
             modelValue={visible.value}
             closeOnClickModal={false}
             onClose={close}
+            fullscreen={isXs.value}
         >
             <Flex gap={18} column>
                 <ElInput
diff --git a/src/pages/app/components/Limit/components/index.tsx b/src/pages/app/components/Limit/components/index.tsx
new file mode 100644
index 00000000..353a8404
--- /dev/null
+++ b/src/pages/app/components/Limit/components/index.tsx
@@ -0,0 +1,5 @@
+export { default as Filter } from './Filter'
+export { default as List } from './List'
+export { default as Modify } from './Modify'
+export { default as Table } from './Table'
+export { default as Test } from './Test'
diff --git a/src/pages/app/components/Limit/components/style.ts b/src/pages/app/components/Limit/components/style.ts
new file mode 100644
index 00000000..56001cd0
--- /dev/null
+++ b/src/pages/app/components/Limit/components/style.ts
@@ -0,0 +1,5 @@
+import { type TagProps } from 'element-plus'
+
+export const DAILY_WEEKLY_TAG_TYPE = 'primary' satisfies TagProps['type']
+export const VISIT_TAG_TYPE = 'danger' satisfies TagProps['type']
+export const PERIOD_TAG_TYPE = 'info' satisfies TagProps['type']
\ No newline at end of file
diff --git a/src/pages/app/components/Limit/context.ts b/src/pages/app/components/Limit/context.ts
index 3f7ab563..d3b39189 100644
--- a/src/pages/app/components/Limit/context.ts
+++ b/src/pages/app/components/Limit/context.ts
@@ -1,7 +1,7 @@
 import { t } from "@app/locale"
 import { useDocumentVisibility, useManualRequest, useProvide, useProvider, useRequest } from "@hooks"
 import limitService from "@service/limit-service"
-import { ElMessage, ElMessageBox, type TableInstance } from "element-plus"
+import { ElMessage, ElMessageBox } from "element-plus"
 import { computed, Reactive, reactive, ref, toRaw, watch, type Ref } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { verifyCanModify } from "./common"
@@ -16,10 +16,14 @@ export type TestInstance = {
     show(): void
 }
 
+export type LimitInstance = {
+    getSelected(): timer.limit.Item[]
+}
+
 type Context = {
-    table: Ref<TableInstance | undefined>
     filter: Reactive<LimitFilterOption>
-    list: Ref<timer.limit.Item[]>, refresh: NoArgCallback,
+    list: Ref<timer.limit.Item[]>
+    refresh: NoArgCallback
     deleteRow: ArgCallback<timer.limit.Item>
     batchDelete: NoArgCallback
     batchEnable: NoArgCallback
@@ -69,10 +73,10 @@ export const useLimitProvider = () => {
         }
     })
 
-    const table = ref<TableInstance>()
+    const inst = ref<LimitInstance>()
 
     const selectedAndThen = (then: (list: timer.limit.Item[]) => void): void => {
-        const list = table.value?.getSelectionRows?.()
+        const list = inst.value?.getSelected?.()
         if (!list?.length) {
             ElMessage.info('No limit rule selected')
             return
@@ -85,10 +89,14 @@ export const useLimitProvider = () => {
         refresh()
     }
 
-    const handleBatchDelete = (list: timer.limit.Item[]) => verifyCanModify(...list)
-        .then(() => limitService.remove(...list))
-        .then(onBatchSuccess)
-        .catch(() => { })
+    const handleBatchDelete = (list: timer.limit.Item[]) => {
+        const names = list.map(item => item.name ?? item.id).join(', ')
+        verifyCanModify(...list)
+            .then(() => ElMessageBox.confirm(t(msg => msg.limit.message.deleteConfirm, { name: names }), { type: "warning" }))
+            .then(() => limitService.remove(...list))
+            .then(onBatchSuccess)
+            .catch(() => { })
+    }
 
     const handleBatchEnable = (list: timer.limit.Item[]) => {
         list.forEach(item => item.enabled = true)
@@ -149,7 +157,6 @@ export const useLimitProvider = () => {
     const empty = computed(() => !loading.value && !list.value.length)
 
     useProvide<Context>(NAMESPACE, {
-        table,
         filter,
         list, empty, refresh,
         deleteRow,
@@ -160,13 +167,13 @@ export const useLimitProvider = () => {
         modify, create, test,
     })
 
-    return { modifyInst, testInst }
+    return { modifyInst, testInst, inst }
 }
 
 export const useLimitFilter = (): Reactive<LimitFilterOption> => useProvider<Context, 'filter'>(NAMESPACE, "filter").filter
 
-export const useLimitTable = () => useProvider<Context, 'list' | 'table' | 'refresh' | 'deleteRow' | 'changeEnabled' | 'changeDelay' | 'changeLocked'>(
-    NAMESPACE, 'list', 'table', 'refresh', 'deleteRow', 'changeEnabled', 'changeDelay', 'changeLocked'
+export const useLimitData = () => useProvider<Context, 'list' | 'refresh' | 'deleteRow' | 'changeEnabled' | 'changeDelay' | 'changeLocked'>(
+    NAMESPACE, 'list', 'refresh', 'deleteRow', 'changeEnabled', 'changeDelay', 'changeLocked'
 )
 
 export const useLimitBatch = () => useProvider<Context, 'batchDelete' | 'batchEnable' | 'batchDisable'>(
diff --git a/src/pages/app/components/Limit/index.tsx b/src/pages/app/components/Limit/index.tsx
index 77877f85..611ca303 100644
--- a/src/pages/app/components/Limit/index.tsx
+++ b/src/pages/app/components/Limit/index.tsx
@@ -5,24 +5,24 @@
  * https://opensource.org/licenses/MIT
  */
 
+import { useXsState } from '@hooks'
 import { defineComponent } from "vue"
+import ContentCard from '../common/ContentCard'
 import ContentContainer from "../common/ContentContainer"
+import { Filter, List, Modify, Table, Test } from "./components"
 import { useLimitProvider } from "./context"
-import LimitFilter from "./LimitFilter"
-import LimitModify from "./LimitModify"
-import LimitTable from "./LimitTable"
-import LimitTest from "./LimitTest"
 
 const _default = defineComponent(() => {
-    const { modifyInst, testInst } = useLimitProvider()
+    const { modifyInst, testInst, inst } = useLimitProvider()
+    const isXs = useXsState()
 
     return () => (
         <ContentContainer v-slots={{
-            filter: () => <LimitFilter />,
-            content: () => <>
-                <LimitTable />
-                <LimitModify ref={modifyInst} />
-                <LimitTest ref={testInst} />
+            filter: () => <Filter />,
+            default: () => <>
+                {isXs.value ? <List /> : <ContentCard><Table ref={inst} /></ContentCard>}
+                <Modify ref={modifyInst} />
+                <Test ref={testInst} />
             </>
         }} />
     )
diff --git a/src/pages/app/components/Option/Select.tsx b/src/pages/app/components/Option/Select.tsx
index 77f880af..d1c17871 100644
--- a/src/pages/app/components/Option/Select.tsx
+++ b/src/pages/app/components/Option/Select.tsx
@@ -5,8 +5,6 @@ import { useRouter } from "vue-router"
 import ContentContainer from "../common/ContentContainer"
 import { CATE_LABELS, changeQuery, type OptionCategory, parseQuery } from "./common"
 
-const IGNORED_CATE: OptionCategory[] = ['limit']
-
 const _default = defineComponent(() => {
     const tab = ref<OptionCategory>(parseQuery() || 'appearance')
     const router = useRouter()
@@ -21,12 +19,9 @@ const _default = defineComponent(() => {
                     modelValue={tab.value}
                     onChange={val => tab.value = val}
                 >
-                    {Object.keys(slots)
-                        .filter(key => !IGNORED_CATE.includes(key as OptionCategory) && key !== 'default')
-                        .map(cate => (
-                            <ElSelect.Option value={cate} label={t(CATE_LABELS[cate as OptionCategory])} />
-                        ))
-                    }
+                    {Object.keys(slots).map(cate => (
+                        <ElSelect.Option value={cate} label={t(CATE_LABELS[cate as OptionCategory])} />
+                    ))}
                 </ElSelect>
             ),
             default: () => {
diff --git a/src/pages/app/components/Option/components/LimitOption/index.tsx b/src/pages/app/components/Option/components/LimitOption/index.tsx
index b414d8d7..aebf7517 100644
--- a/src/pages/app/components/Option/components/LimitOption/index.tsx
+++ b/src/pages/app/components/Option/components/LimitOption/index.tsx
@@ -126,7 +126,7 @@ const _default = defineComponent((_, ctx) => {
                 default: () => (
                     <ElSwitch
                         modelValue={option.limitReminder}
-                        onChange={val => option.limitReminder = val as boolean}
+                        onChange={val => option.limitReminder = !!val}
                     />
                 ),
                 minInput: () => (
diff --git a/src/pages/app/components/common/TooltipWrapper.tsx b/src/pages/app/components/common/TooltipWrapper.tsx
index 3d502c14..e4f15b18 100644
--- a/src/pages/app/components/common/TooltipWrapper.tsx
+++ b/src/pages/app/components/common/TooltipWrapper.tsx
@@ -1,7 +1,7 @@
-import { ElTooltip, ElTooltipProps } from "element-plus"
+import { ElTooltip, type UseTooltipProps } from "element-plus"
 import { defineComponent, ref, useSlots } from "vue"
 
-type Props = PartialPick<ElTooltipProps, 'placement' | 'effect' | 'trigger' | 'offset'> & {
+type Props = PartialPick<UseTooltipProps, 'placement' | 'effect' | 'trigger' | 'offset'> & {
     usePopover?: boolean
 }
 
diff --git a/src/pages/app/components/common/filter/ButtonFilterItem.tsx b/src/pages/app/components/common/filter/ButtonFilterItem.tsx
index 4e173b2e..9eda1817 100644
--- a/src/pages/app/components/common/filter/ButtonFilterItem.tsx
+++ b/src/pages/app/components/common/filter/ButtonFilterItem.tsx
@@ -5,6 +5,7 @@
  * https://opensource.org/licenses/MIT
  */
 import { type I18nKey, t } from '@app/locale'
+import { useXsState } from '@hooks/useMediaSize'
 import { type ButtonProps, ElButton } from "element-plus"
 import { defineComponent } from "vue"
 
@@ -16,11 +17,21 @@ type Props = {
 }
 
 const ButtonFilterItem = defineComponent<Props>(props => {
-    return () => (
-        <ElButton type={props.type ?? 'primary'} icon={props.icon} onClick={props.onClick}>
-            {t(props.text)}
-        </ElButton>
-    )
+    const isXs = useXsState()
+    return () => isXs.value
+        ? (
+            <ElButton
+                circle
+                size='small'
+                type={props.type ?? 'primary'}
+                icon={props.icon}
+                onClick={props.onClick}
+            />
+        ) : (
+            <ElButton type={props.type ?? 'primary'} icon={props.icon} onClick={props.onClick}>
+                {t(props.text)}
+            </ElButton>
+        )
 }, { props: ['icon', 'onClick', 'text', 'type'] })
 
 export default ButtonFilterItem
\ No newline at end of file
diff --git a/src/pages/components/Flex.tsx b/src/pages/components/Flex.tsx
index f611489a..711c256f 100644
--- a/src/pages/components/Flex.tsx
+++ b/src/pages/components/Flex.tsx
@@ -23,32 +23,34 @@ type Props = {
 } & BaseProps
 
 const Flex = defineComponent<Props>(props => {
-    const { default: defaultSlots } = useSlots()
     const Comp = props.as ?? 'div'
 
-    return () => (
-        <Comp
-            id={props.id}
-            class={props.class}
-            onClick={props.onClick}
-            style={{
-                display: props.inline ? 'inline-flex' : 'flex',
-                flex: props.flex,
-                flexDirection: props?.column ? 'column' : props.direction,
-                alignItems: props.align,
-                justifyContent: props.justify,
-                flexWrap: cvtFlexWrap(props.wrap),
-                columnGap: cvtPxScale(props.columnGap),
-                rowGap: cvtPxScale(props.rowGap),
-                gap: cvtPxScale(props.gap),
-                ...cvt2BaseStyle(props),
-            }}
-            href={props.href}
-            target={props.target}
-        >
-            {defaultSlots && h(defaultSlots)}
-        </Comp>
-    )
+    return () => {
+        const { default: defaultSlots } = useSlots()
+        return (
+            <Comp
+                id={props.id}
+                class={props.class}
+                onClick={props.onClick}
+                style={{
+                    display: props.inline ? 'inline-flex' : 'flex',
+                    flex: props.flex,
+                    flexDirection: props?.column ? 'column' : props.direction,
+                    alignItems: props.align,
+                    justifyContent: props.justify,
+                    flexWrap: cvtFlexWrap(props.wrap),
+                    columnGap: cvtPxScale(props.columnGap),
+                    rowGap: cvtPxScale(props.rowGap),
+                    gap: cvtPxScale(props.gap),
+                    ...cvt2BaseStyle(props),
+                }}
+                href={props.href}
+                target={props.target}
+            >
+                {defaultSlots && h(defaultSlots)}
+            </Comp>
+        )
+    }
 }, { props: [...ALL_BASE_PROPS, 'direction', 'column', 'flex', 'align', 'justify', 'gap', 'columnGap', 'rowGap', 'wrap', 'as'] })
 
 export default Flex
\ No newline at end of file
diff --git a/src/pages/popup/components/Header/index.tsx b/src/pages/popup/components/Header/index.tsx
index 41aa376b..caaf3366 100644
--- a/src/pages/popup/components/Header/index.tsx
+++ b/src/pages/popup/components/Header/index.tsx
@@ -6,7 +6,7 @@ import { t } from "@popup/locale"
 import { IS_ANDROID } from "@util/constant/environment"
 import { getAppPageUrl } from "@util/constant/url"
 import { ElLink } from "element-plus"
-import { FunctionalComponent } from "vue"
+import type { FunctionalComponent } from "vue"
 import DarkSwitch from "./DarkSwitch"
 import Logo from "./Logo"
 import MoreInfo from './MoreInfo'
@@ -29,7 +29,7 @@ const openAppPage = async () => {
     await createTab(appPageUrl)
 }
 
-const Header: FunctionalComponent = () => (
+const Header: FunctionalComponent<{}> = () => (
     <Flex justify="space-between" padding='0 10px' color='text-primary'>
         <Logo />
         <Flex gap={10}>
diff --git a/src/util/time.ts b/src/util/time.ts
index 8cb3e195..9d5dd137 100644
--- a/src/util/time.ts
+++ b/src/util/time.ts
@@ -51,10 +51,12 @@ export function formatTimeYMD(time: Date | number) {
     return formatTime(time, '{y}{m}{d}')
 }
 
+type PeriodMsgFormat = Record<'dayMsg' | 'hourMsg' | 'minuteMsg' | 'secondMsg', string>
+
 /**
  * Format milliseconds for display
  */
-export function formatPeriod(milliseconds: number, message: Record<'dayMsg' | 'hourMsg' | 'minuteMsg' | 'secondMsg', string>): string {
+export function formatPeriod(milliseconds: number, message: PeriodMsgFormat): string {
     const prefix = milliseconds < 0 ? '-' : ''
     milliseconds = Math.abs(milliseconds)
     const { dayMsg, hourMsg, minuteMsg, secondMsg } = message
@@ -82,29 +84,45 @@ export function formatPeriod(milliseconds: number, message: Record<'dayMsg' | 'h
     return prefix + result
 }
 
+const PERIOD_RTL: PeriodMsgFormat = {
+    dayMsg: 's{second} m{minute} h{hour} d{day}',
+    hourMsg: 's{second} m{minute} h{hour}',
+    minuteMsg: 's{second} m{minute}',
+    secondMsg: 's{second}',
+}
+const PERIOD_RTL_SIMPLIFIED: PeriodMsgFormat = {
+    dayMsg: 's{second}m{minute}h{hour}d{day}',
+    hourMsg: 's{second}m{minute}h{hour}',
+    minuteMsg: 's{second}m{minute}',
+    secondMsg: 's{second}',
+}
+const PERIOD_LTR: PeriodMsgFormat = {
+    dayMsg: '{day}d {hour}h {minute}m {second}s',
+    hourMsg: '{hour}h {minute}m {second}s',
+    minuteMsg: '{minute}m {second}s',
+    secondMsg: '{second}s',
+}
+const PERIOD_LTR_SIMPLIFIED: PeriodMsgFormat = {
+    dayMsg: '{day}d{hour}h{minute}m{second}s',
+    hourMsg: '{hour}h{minute}m{second}s',
+    minuteMsg: '{minute}m{second}s',
+    secondMsg: '{second}s',
+}
+
 /**
  * e.g.
  *
- * 100h0m0s
- * 20h10m59s
- * 20h0m1s
- * 10m20s
+ * 2d 10h 0m 0s
+ * 20h 0m 1s
+ * 10m 20s
  * 30s
  *
  * @return (xx+h)(xx+m)xx+s
  */
-export function formatPeriodCommon(milliseconds: number): string {
-    const defaultMessage = isRtl() ? {
-        dayMsg: 's{second} m{minute} h{hour} d{day}',
-        hourMsg: 's{second} m{minute} h{hour}',
-        minuteMsg: 's{second} m{minute}',
-        secondMsg: 's{second}',
-    } : {
-        dayMsg: '{day}d {hour}h {minute}m {second}s',
-        hourMsg: '{hour}h {minute}m {second}s',
-        minuteMsg: '{minute}m {second}s',
-        secondMsg: '{second}s',
-    }
+export function formatPeriodCommon(milliseconds: number, simplified?: boolean): string {
+    const defaultMessage = isRtl()
+        ? (simplified ? PERIOD_RTL_SIMPLIFIED : PERIOD_RTL)
+        : (simplified ? PERIOD_LTR_SIMPLIFIED : PERIOD_LTR)
     return formatPeriod(milliseconds, defaultMessage)
 }
 
diff --git a/test-e2e/common/base.ts b/test-e2e/common/base.ts
index eb5e75e3..1ce96271 100644
--- a/test-e2e/common/base.ts
+++ b/test-e2e/common/base.ts
@@ -1,6 +1,6 @@
 import { type Browser, launch, type Page } from "puppeteer"
 import { E2E_OUTPUT_PATH } from "../../rspack/constant"
-import { removeAllWhitelist } from './whitelist'
+import { removeAllWhitelist } from './whitelist.test'
 
 const USE_HEADLESS_PUPPETEER = !!process.env['USE_HEADLESS_PUPPETEER']
 
diff --git a/test-e2e/common/whitelist.ts b/test-e2e/common/whitelist.test.ts
similarity index 70%
rename from test-e2e/common/whitelist.ts
rename to test-e2e/common/whitelist.test.ts
index 357e7afc..c15ed833 100644
--- a/test-e2e/common/whitelist.ts
+++ b/test-e2e/common/whitelist.test.ts
@@ -1,4 +1,4 @@
-import { type LaunchContext, sleep } from "./base"
+import { launchBrowser, type LaunchContext, sleep } from "./base"
 
 export async function createWhitelist(context: LaunchContext, white: string) {
     const whitePage = await context.openAppPage('/additional/whitelist')
@@ -11,8 +11,10 @@ export async function createWhitelist(context: LaunchContext, white: string) {
     await input?.focus()
     await whitePage.keyboard.type(white)
     await sleep(.4)
-    const selectItem = await whitePage.waitForSelector('.el-popper .el-select-dropdown li:nth-child(1)')
-    await selectItem?.click()
+    await whitePage.keyboard.press('ArrowDown')
+    await sleep(.2)
+    await whitePage.keyboard.press('Enter')
+
     await whitePage.click('.el-button:nth-child(3)')
     const checkBtn = await whitePage.waitForSelector('.el-overlay.is-message-box .el-button.el-button--primary')
     await checkBtn?.click()
@@ -25,4 +27,10 @@ export async function removeAllWhitelist(context: LaunchContext) {
         await chrome.storage.local.remove('__timer__WHITELIST')
     })
     await whitePage.close()
-}
\ No newline at end of file
+}
+
+// Run to test the function, but skip it in normal test runs
+test.skip('create whitelist', async () => {
+    const context = await launchBrowser()
+    await createWhitelist(context, 'example.com')
+})
\ No newline at end of file
diff --git a/test-e2e/tracker/base.test.ts b/test-e2e/tracker/base.test.ts
index aeb4fccf..3857b394 100644
--- a/test-e2e/tracker/base.test.ts
+++ b/test-e2e/tracker/base.test.ts
@@ -1,6 +1,6 @@
 import { launchBrowser, type LaunchContext, MOCK_HOST, MOCK_URL, MOCK_URL_2, sleep } from "../common/base"
 import { readRecordsOfFirstPage } from "../common/record"
-import { createWhitelist } from "../common/whitelist"
+import { createWhitelist } from "../common/whitelist.test"
 
 let context: LaunchContext
 
diff --git a/test-e2e/tracker/run-time.test.ts b/test-e2e/tracker/run-time.test.ts
index 238791bf..ce35a29f 100644
--- a/test-e2e/tracker/run-time.test.ts
+++ b/test-e2e/tracker/run-time.test.ts
@@ -1,6 +1,6 @@
 import { launchBrowser, MOCK_HOST, MOCK_URL, sleep, type LaunchContext } from "../common/base"
 import { parseTime2Sec, readRecordsOfFirstPage } from "../common/record"
-import { createWhitelist } from "../common/whitelist"
+import { createWhitelist } from "../common/whitelist.test"
 
 let context: LaunchContext