Show tooltip of the type in site management page (#196)

sheepzh · sheepzh · commit 7dbb58d100e8 · 2023-03-23T22:59:04.000+08:00
diff --git a/src/app/components/site-manage/table/column/alias.ts b/src/app/components/site-manage/table/column/alias.ts
@@ -25,27 +25,23 @@ function handleChange(newAlias: string, row: timer.site.SiteInfo) {
     }
 }
 
-const _default = defineComponent({
-    name: "AliasColumn",
-    setup() {
-        return () => h(ElTableColumn, {
-            prop: 'host',
-            minWidth: 100,
-            align: 'center',
-        }, {
-            default: ({ row }: { row: timer.site.SiteInfo }) => h(Editable, {
-                modelValue: row.alias,
-                onChange: (newAlias: string) => handleChange(newAlias, row)
-            }),
-            header: () => {
-                const infoTooltip = h(ElTooltip,
-                    { content: tooltip, placement: 'top' },
-                    () => h(ElIcon, { size: 11 }, () => h(InfoFilled))
-                )
-                return [label, ' ', infoTooltip]
-            }
-        })
-    }
+const renderTooltip = () => h(ElTooltip,
+    { content: tooltip, placement: 'top' },
+    () => h(ElIcon, { size: 11 }, () => h(InfoFilled))
+)
+
+const render = () => h(ElTableColumn, {
+    prop: 'host',
+    minWidth: 100,
+    align: 'center',
+}, {
+    default: ({ row }: { row: timer.site.SiteInfo }) => h(Editable, {
+        modelValue: row.alias,
+        onChange: (newAlias: string) => handleChange(newAlias, row)
+    }),
+    header: () => [label, ' ', renderTooltip()]
 })
 
+const _default = defineComponent({ render })
+
 export default _default
diff --git a/src/app/components/site-manage/table/column/source.ts b/src/app/components/site-manage/table/column/source.ts
@@ -19,18 +19,15 @@ function renderSource(source: timer.site.AliasSource) {
     return h(ElTag, { type, size: 'small' }, () => SOURCE_DESC[source])
 }
 
-const _default = defineComponent({
-    name: "SourceColumn",
-    setup() {
-        return () => h(ElTableColumn, {
-            prop: 'source',
-            label: t(msg => msg.siteManage.column.source),
-            minWidth: 70,
-            align: 'center',
-        }, {
-            default: ({ row }: { row: timer.site.SiteInfo }) => row.source ? renderSource(row.source) : ''
-        })
-    }
+const render = () => h(ElTableColumn, {
+    prop: 'source',
+    label: t(msg => msg.siteManage.column.source),
+    minWidth: 70,
+    align: 'center',
+}, {
+    default: ({ row }: { row: timer.site.SiteInfo }) => row.source ? renderSource(row.source) : ''
 })
 
+const _default = defineComponent({ render })
+
 export default _default
diff --git a/src/app/components/site-manage/table/column/type.ts b/src/app/components/site-manage/table/column/type.ts
@@ -1,21 +1,24 @@
 import { t } from "@app/locale"
-import { ElTableColumn, ElTag } from "element-plus"
+import { ElIcon, ElTableColumn, ElTag, ElTooltip } from "element-plus"
+import { InfoFilled } from "@element-plus/icons-vue"
 import { defineComponent, h } from "vue"
+import { SiteManageMessage } from "@i18n/message/app/site-manage"
 
-const label = t(msg => msg.siteManage.column.type)
+type Type = keyof SiteManageMessage['type']
+const ALL_TYPES: Type[] = ['normal', 'merged', 'virtual']
 
-const normalType = t(msg => msg.siteManage.type.normal)
-const mergedType = t(msg => msg.siteManage.type.merged)
-const virtualType = t(msg => msg.siteManage.type.virtual)
+const label = t(msg => msg.siteManage.column.type)
 
 function cumputeText({ merged, virtual }: timer.site.SiteInfo): string {
+    let type: Type = undefined
     if (merged) {
-        return mergedType
+        type = 'merged'
     } else if (virtual) {
-        return virtualType
+        type = 'virtual'
     } else {
-        return normalType
+        type = 'normal'
     }
+    return t(msg => msg.siteManage.type[type].name)
 }
 
 function computeType({ merged, virtual }: timer.site.SiteInfo): 'info' | 'success' | '' {
@@ -28,21 +31,29 @@ function computeType({ merged, virtual }: timer.site.SiteInfo): 'info' | 'succes
     }
 }
 
-const _default = defineComponent({
-    name: "SiteType",
-    setup() {
-        return () => h(ElTableColumn, {
-            prop: 'host',
-            label,
-            minWidth: 60,
-            align: 'center',
-        }, {
-            default: ({ row }: { row: timer.site.SiteInfo }) => h(ElTag, {
-                size: 'small',
-                type: computeType(row),
-            }, () => cumputeText(row))
-        })
-    }
+const renderTooltip = () => h(ElTooltip, { placement: 'top' }, {
+    content: () => ALL_TYPES
+        .map((type: Type) => `${t(msg => msg.siteManage.type[type].name)} - ${t(msg => msg.siteManage.type[type].info)}`)
+        .reduce((a, b) => {
+            a.length && a.push(h('br'))
+            a.push(b)
+            return a
+        }, []),
+    default: () => h(ElIcon, { size: 11 }, () => h(InfoFilled)),
 })
 
+const renderContent = (row: timer.site.SiteInfo) => h(ElTag, {
+    size: 'small',
+    type: computeType(row),
+}, () => cumputeText(row))
+
+const _default = defineComponent(() => () => h(ElTableColumn, {
+    prop: 'host',
+    minWidth: 60,
+    align: 'center',
+}, {
+    header: () => [label, ' ', renderTooltip()],
+    default: ({ row }: { row: timer.site.SiteInfo }) => renderContent(row)
+}))
+
 export default _default
diff --git a/src/i18n/message/app/site-manage.ts b/src/i18n/message/app/site-manage.ts
@@ -18,11 +18,7 @@ export type SiteManageMessage = {
         source: string
         icon: string
     }
-    type: {
-        normal: string
-        merged: string
-        virtual: string
-    }
+    type: Record<'normal' | 'merged' | 'virtual', Record<'name' | 'info', string>>
     source: {
         user: string
         detected: string
@@ -60,9 +56,18 @@ const _default: Messages<SiteManageMessage> = {
             icon: '网站图标',
         },
         type: {
-            normal: '普通站点',
-            merged: '合并站点',
-            virtual: '自定义站点',
+            normal: {
+                name: '普通站点',
+                info: '按域名的维度统计',
+            },
+            merged: {
+                name: '合并站点',
+                info: '将多个相关的域名合并统计，合并规则可以自定义'
+            },
+            virtual: {
+                name: '自定义站点',
+                info: '统计 Ant Pattern 格式的任意 URL，可以在右上角新增自定义站点'
+            },
         },
         source: {
             user: '手动设置',
@@ -103,9 +108,18 @@ const _default: Messages<SiteManageMessage> = {
             detected: '自動抓取',
         },
         type: {
-            normal: '普通站點',
-            merged: '合併站點',
-            virtual: '自定義站點',
+            normal: {
+                name: '普通站點',
+                info: '按域名的維度統計',
+            },
+            merged: {
+                name: '合併站點',
+                info: '將多個相關的域名合併統計，合併規則可以自定義',
+            },
+            virtual: {
+                name: '自定義站點',
+                info: '統計 Ant Pattern 格式的任意 URL，可以在右上角新增自定義站點',
+            },
         },
         button: {
             add: '新增',
@@ -137,9 +151,18 @@ const _default: Messages<SiteManageMessage> = {
             icon: 'Icon',
         },
         type: {
-            normal: 'normal',
-            merged: 'merged',
-            virtual: 'virtual',
+            normal: {
+                name: 'normal',
+                info: 'statistics by domain name',
+            },
+            merged: {
+                name: 'merged',
+                info: 'merge statistics of multiple related domain names, and the merge rules can be customized',
+            },
+            virtual: {
+                name: 'virtual',
+                info: 'count any URL in Ant Pattern format, you can add a custom site in the upper right corner',
+            },
         },
         source: {
             user: 'user-maintained',
