Auto-categorize

package.json

@@ -71,4 +71,4 @@
     "engines": {
         "node": ">=22"
     }
-}
+}

src/database/site-cate-database.ts

@@ -15,6 +15,10 @@ type Item = {
      * Name
      */
     n: string
+    /**
+     * Auto rules
+     */
+    a?: string[]
 }
 
 type Items = Record<number, Item>
@@ -49,43 +53,58 @@ class SiteCateDatabase 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(name: string, autoRules: string[]): Promise<timer.site.Cate> {
         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 importData(data: any): Promise<void> {
         let toImport = data[KEY] as Items
         // Not import

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/Report/ReportTable/index.tsx

@@ -108,6 +108,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>
@@ -138,7 +145,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/SiteManage/SiteManageTable/index.tsx

@@ -10,7 +10,7 @@ import Flex from "@pages/components/Flex"
 import { removeIconUrl, saveSiteRunState } from '@service/site-service'
 import { ElSwitch, ElTable, ElTableColumn, type RenderRowData } from "element-plus"
 import { defineComponent } from "vue"
-import CategoryEditable from "../../common/category/CategoryEditable"
+import Category from "../../common/category/CategoryEditable"
 import { useSiteManageTable } from '../useSiteManage'
 import AliasColumn from "./column/AliasColumn"
 import OperationColumn from "./column/OperationColumn"
@@ -70,7 +70,7 @@ const _default = defineComponent<{}>(() => {
                 minWidth={140}
                 align="center"
                 v-slots={({ row }: RenderRowData<timer.site.SiteInfo>) => (
-                    <CategoryEditable siteKey={row} modelValue={row?.cate} onChange={val => row.cate = val} />
+                    <Category siteKey={row} modelValue={row?.cate} onChange={val => row.cate = val} />
                 )}
             />
             <ElTableColumn

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/CategoryEditable.tsx

@@ -5,8 +5,8 @@ import Flex from "@pages/components/Flex"
 import { saveSiteCate } from '@service/site-service'
 import { supportCategory } from "@util/site"
 import { ElIcon, ElTag } from "element-plus"
-import { computed, defineComponent, nextTick, ref } from "vue"
-import CategorySelect, { CategorySelectInstance } from "./CategorySelect"
+import { computed, defineComponent } from "vue"
+import CategorySelect from "./CategorySelect"
 
 type Props = ModelValue<number | undefined> & {
     siteKey: timer.site.SiteKey
@@ -34,18 +34,10 @@ const CategoryEditable = defineComponent<Props>(props => {
         },
     })
 
-    const handleEditClick = () => {
-        openEditing()
-        nextTick(() => selectRef.value?.openOptions?.())
-    }
-
-    const selectRef = ref<CategorySelectInstance>()
-
     return () => supportCategory(props.siteKey) ?
         <Flex width="100%" height="100%" justify="center">
             {editing.value ?
                 <CategorySelect
-                    ref={selectRef}
                     size="small"
                     width="100px"
                     modelValue={props.modelValue}
@@ -63,7 +55,7 @@ const CategoryEditable = defineComponent<Props>(props => {
                             {current.value.name}
                         </ElTag>
                     }
-                    <Flex align="center" onClick={handleEditClick}>
+                    <Flex align="center" onClick={openEditing}>
                         <ElIcon style={{ cursor: 'pointer' }}>
                             <Edit />
                         </ElIcon>