Auto-categorize

src/background/database/cate-database.ts

@@ -15,6 +15,10 @@ type Item = {
      * Name
      */
     n: string
+    /**
+     * Auto rules
+     */
+    a?: string[]
 }
 
 type Items = Record<number, Item>
@@ -36,43 +40,59 @@ class CateDatabase extends BaseDatabase {
 
     async listAll(): Promise<timer.site.Cate[]> {
         const items = await this.getItems()
-        return Object.entries(items).map(([id, { n = '' } = {}]) => {
+        return Object.entries(items).map(([id, { n = '', a } = {}]) => {
             return {
                 id: parseInt(id),
                 name: n,
+                autoRules: a ?? [],
             } satisfies timer.site.Cate
         })
     }
 
-    async add(name: string): Promise<timer.site.Cate> {
+    async add(toAdd: Omit<timer.site.Cate, 'id'>): Promise<timer.site.Cate> {
+        const { name, autoRules } = toAdd
         const items = await this.getItems()
         const existId = Object.entries(items).find(([_, v]) => v.n === name)?.[0]
         if (existId) {
             // Exist already
-            return { id: parseInt(existId), name }
+            return { id: parseInt(existId), name, autoRules }
         }
 
         const id = (Object.keys(items || {}).map(k => parseInt(k)).sort().reverse()?.[0] ?? 0) + 1
-        items[id] = { n: name ?? items[id]?.n }
+        items[id] = { n: name ?? items[id]?.n, a: autoRules }
 
         await this.saveItems(items)
-        return { name, id }
+        return { name, id, autoRules }
     }
 
-    async update(id: number, name: string): Promise<void> {
-        if (!name) return
-
+    private async updateWithReplacer(id: number, replacer: (exist: Item) => Item): Promise<void> {
         const items = await this.getItems()
-        const existId = Object.entries(items).find(([_, v]) => v.n === name)?.[0]
+        const exist = items[id]
+        if (!exist) return
 
-        if (existId) {
+        const replaced = replacer(exist)
+
+        if (Object.entries(items).some(([vid, v]) => v.n === replaced.n && parseInt(vid) !== id)) {
+            // Name exist already
             return
         }
 
-        items[id] = { ...items[id] || {}, n: name }
+        items[id] = replaced
         await this.saveItems(items)
     }
 
+    async updateName(id: number, name: string): Promise<void> {
+        await this.updateWithReplacer(id, exist => ({ ...exist, n: name }))
+    }
+
+    async update(cate: timer.site.Cate): Promise<void> {
+        await this.updateWithReplacer(cate.id, exist => ({
+            ...exist,
+            n: cate.name,
+            a: cate.autoRules,
+        }))
+    }
+
     async delete(id: number): Promise<void> {
         const items = await this.getItems()
 

src/background/install-handler/version/cate-initializer.ts

@@ -31,7 +31,7 @@ const DEMO_ITEMS: InitialCate[] = [
 
 async function initItem(item: InitialCate) {
     const { name, hosts } = item
-    const cate = await cateDatabase.add(name)
+    const cate = await cateDatabase.add({ name, autoRules: [] })
     const cateId = cate.id
     const siteKeys = hosts.map(host => ({ host, type: 'normal' } satisfies timer.site.SiteKey))
     await batchChangeCate(cateId, siteKeys)

src/background/message-dispatcher.ts

@@ -100,8 +100,8 @@ class MessageDispatcher {
             .register('option.weekStartTime', getWeekStartTime)
             // Category
             .register('cate.all', () => cateDatabase.listAll())
-            .register('cate.add', name => cateDatabase.add(name))
-            .register('cate.change', ({ id, name }) => cateDatabase.update(id, name))
+            .register('cate.add', data => cateDatabase.add(data))
+            .register('cate.change', data => cateDatabase.update(data))
             .register('cate.delete', id => cateDatabase.delete(id))
             // Meta information
             .register('meta.installTs', getInstallTime)

src/i18n/message/app/site-manage-resource.json

@@ -113,7 +113,8 @@
             "relatedMsg": "This category has been associated with {siteCount} sites and cannot be deleted",
             "removeConfirm": "Confirm to delete category: {category}?",
             "batchChange": "Change categories",
-            "batchDisassociate": "Disassociate categories"
+            "batchDisassociate": "Disassociate categories",
+            "autoRules": "Auto-categorization rules"
         },
         "form": {
             "emptyAlias": "Please enter site name",

src/i18n/message/app/site-manage.ts

@@ -23,6 +23,7 @@ export type SiteManageMessage = {
         batchChange: string
         batchDisassociate: string
         removeConfirm: string
+        autoRules: string
     }
     form: {
         emptyAlias: string

src/pages/app/components/Analysis/components/AnalysisFilter/TargetSelect.tsx

@@ -80,6 +80,12 @@ const SiteOption = defineComponent<{ value: timer.site.SiteInfo }>(props => {
     )
 }, { props: ['value'] })
 
+const notSetCate = (): timer.site.Cate => ({
+    id: CATE_NOT_SET_ID,
+    name: t(msg => msg.shared.cate.notSet),
+    autoRules: [],
+})
+
 const TargetSelect = defineComponent(() => {
     const cate = useCategory()
 
@@ -90,7 +96,7 @@ const TargetSelect = defineComponent(() => {
     })
 
     const { data: allItems } = useRequest(
-        () => fetchItems([...cate.all, { id: CATE_NOT_SET_ID, name: t(msg => msg.shared.cate.notSet) }]),
+        () => fetchItems([...cate.all, notSetCate()]),
         { defaultValue: [[], []], deps: [() => cate.all] },
     )
 

src/pages/app/components/Report/Table/index.tsx

@@ -105,6 +105,13 @@ const _default = defineComponent((_, ctx) => {
         () => filter.siteMerge,
     ], () => table.value?.doLayout?.())
 
+    const handleCateChange = (key: timer.site.SiteKey, newCateId: number | undefined) => {
+        data.value?.list
+            ?.filter(isSite)
+            ?.filter(item => siteEqual(item.siteKey, key))
+            ?.forEach(i => i.cateId = newCateId)
+    }
+
     return () => (
         <ContentCard>
             <Flex gap={23} width="100%" height="100%" column>
@@ -135,7 +142,7 @@ const _default = defineComponent((_, ctx) => {
                             />
                         </>}
                         {visible.value.group && <GroupColumn />}
-                        {visible.value.cate && <CateColumn onChange={refresh} />}
+                        {visible.value.cate && <CateColumn onChange={handleCateChange} />}
                         <TimeColumn dimension="focus" />
                         {runColVisible.value && <TimeColumn dimension="run" />}
                         <VisitColumn />

src/pages/app/components/common/Category/CategoryDialog.tsx

@@ -0,0 +1,106 @@
+
+import { t } from '@app/locale'
+import { ElButton, ElDialog, ElForm, ElFormItem, ElInput, ElInputTag, ElMessage } from 'element-plus'
+import { createVNode, defineComponent, reactive, ref, render } from 'vue'
+
+type Props = {
+    cate?: timer.site.Cate
+    onClose?: NoArgCallback
+    onSave?: (cate: timer.site.Cate) => void
+}
+
+const Component = defineComponent<Props>(props => {
+    const visible = ref(true)
+    const formData = reactive<Partial<timer.site.Cate>>({ ...props.cate })
+
+    const handleConfirm = () => {
+
+    }
+
+    const handleRulesChange = (rules: string[] | undefined = []) => {
+        if (new Set(rules).size < rules.length) {
+            ElMessage.warning('Rules contain duplicated items')
+        } else {
+            formData.autoRules = rules
+        }
+    }
+
+    return () => (
+        <ElDialog
+            modelValue={visible.value}
+            title={props.cate ? t(msg => msg.button.modify) : t(msg => msg.button.create)}
+            width={400}
+            destroyOnClose
+            beforeClose={props.onClose}
+            closeOnClickModal={false}
+            v-slots={{
+                footer: () => <>
+                    <ElButton onClick={props.onClose}>{t(msg => msg.button.cancel)}</ElButton>
+                    <ElButton type="primary" onClick={handleConfirm}>
+                        {t(msg => msg.button.confirm)}
+                    </ElButton>
+                </>
+            }}
+        >
+            <ElForm model={formData} labelPosition='top'>
+                <ElFormItem label={t(msg => msg.siteManage.cate.name)} prop="name" required>
+                    <ElInput v-model={formData.name} />
+                </ElFormItem>
+                <ElFormItem label={t(msg => msg.siteManage.cate.autoRules)} prop="autoRules">
+                    <ElInputTag
+                        placeholder='**.google.com, *.example.com'
+                        modelValue={formData.autoRules}
+                        trigger='Space'
+                        onChange={handleRulesChange}
+                    />
+                </ElFormItem>
+            </ElForm>
+        </ElDialog>
+    )
+}, { props: ['cate', 'onClose', 'onSave'] })
+
+interface DialogOptions {
+    cate?: timer.site.Cate
+}
+
+function open(options: DialogOptions = {}): Promise<timer.site.Cate> {
+    const { cate } = options
+
+    return new Promise<timer.site.Cate>((resolve, reject) => {
+        const container = document.createElement('div')
+        document.body.appendChild(container)
+
+        const cleanup = () => {
+            render(null, container)
+            document.body.removeChild(container)
+        }
+
+        const vnode = createVNode(Component, {
+            cate,
+            onClose: async (data: timer.site.Cate) => {
+                try {
+                    resolve(data)
+                } catch (error) {
+                    reject(error)
+                } finally {
+                    cleanup()
+                }
+            },
+            onCancel: () => {
+                reject()
+                cleanup()
+            }
+        })
+
+        render(vnode, container)
+    })
+}
+
+type CategoryDialogDef = typeof Component & {
+    open: typeof open
+}
+
+const CategoryDialog = Component as CategoryDialogDef
+CategoryDialog.open = open
+
+export default CategoryDialog

src/pages/app/components/common/Category/Editable.tsx

@@ -5,7 +5,7 @@ import { useManualRequest, useSwitch } from "@hooks"
 import Flex from "@pages/components/Flex"
 import { supportCategory } from "@util/site"
 import { ElIcon, ElTag } from "element-plus"
-import { computed, defineComponent, nextTick, ref } from "vue"
+import { computed, defineComponent, ref } from "vue"
 import Select, { type Instance } from "./Select"
 
 type Props = ModelValue<number | undefined> & {
@@ -34,10 +34,9 @@ const CategoryEditable = defineComponent<Props>(props => {
         },
     })
 
-    const handleEditClick = (ev: MouseEvent) => {
-        ev.stopImmediatePropagation()
+    const handleEdit = () => {
         openEditing()
-        nextTick(() => selectRef.value?.openOptions?.())
+        setTimeout(() => selectRef.value?.openOptions(), 100)
     }
 
     const selectRef = ref<Instance>()
@@ -64,7 +63,7 @@ const CategoryEditable = defineComponent<Props>(props => {
                             {current.value.name}
                         </ElTag>
                     }
-                    <Flex align="center" onClick={handleEditClick}>
+                    <Flex align="center" onClick={handleEdit}>
                         <ElIcon style={{ cursor: 'pointer' }}>
                             <Edit />
                         </ElIcon>