fix: hide tab group merge if disbaled

Author: sheepzh

src/pages/app/components/Report/ReportFilter/MergeFilterItem.tsx

@@ -1,14 +1,12 @@
 import { useCategory } from '@app/context'
 import { t } from "@app/locale"
 import { Calendar, Collection, Link, Menu } from "@element-plus/icons-vue"
+import { useSiteMerge } from '@hooks'
 import Flex from "@pages/components/Flex"
-import { IS_ANDROID } from "@util/constant/environment"
-import { ALL_MERGE_METHODS } from "@util/merge"
 import { ElCheckboxButton, ElCheckboxGroup, ElIcon, ElText, ElTooltip } from "element-plus"
 import { computed, defineComponent, StyleValue } from "vue"
 import { type JSX } from "vue/jsx-runtime"
 import { useReportFilter } from "../context"
-import type { ReportFilterOption } from "../types"
 
 const METHOD_ICONS: Record<timer.stat.MergeMethod, JSX.Element> = {
     cate: <Collection />,
@@ -17,11 +15,16 @@ const METHOD_ICONS: Record<timer.stat.MergeMethod, JSX.Element> = {
     group: <Menu />,
 }
 
-const METHODS = IS_ANDROID ? ALL_MERGE_METHODS.filter(m => m !== 'group') : ALL_MERGE_METHODS
-
 const MergeFilterItem = defineComponent<{}>(() => {
     const filter = useReportFilter()
     const cate = useCategory()
+    const { mergeItems: siteMergeItems } = useSiteMerge({
+        onGroupDisabled: () => mergeMethod.value.filter(v => v !== 'group')
+    })
+    const mergeItems = computed(() => {
+        const res = ['date', ...siteMergeItems.value] satisfies timer.stat.MergeMethod[]
+        return cate.enabled ? res : res.filter(m => m !== 'cate')
+    })
     const mergeMethod = computed({
         get: () => {
             const { mergeDate, siteMerge } = filter
@@ -33,7 +36,7 @@ const MergeFilterItem = defineComponent<{}>(() => {
         set: val => {
             filter.mergeDate = val.includes('date')
             const oldSiteMerge = filter.siteMerge
-            const newSiteMerge = (['cate', 'domain', 'group'] satisfies ReportFilterOption['siteMerge'][])
+            const newSiteMerge = siteMergeItems.value
                 .filter(t => val.includes(t))
                 .sort(t => oldSiteMerge?.includes(t) ? 1 : -1)[0]
             filter.siteMerge = newSiteMerge
@@ -50,7 +53,7 @@ const MergeFilterItem = defineComponent<{}>(() => {
                 modelValue={mergeMethod.value}
                 onChange={val => mergeMethod.value = val as timer.stat.MergeMethod[]}
             >
-                {METHODS.filter(m => m !== 'cate' || cate.enabled).map(method => (
+                {mergeItems.value.map(method => (
                     <ElCheckboxButton value={method}>
                         <ElTooltip content={t(msg => msg.shared.merge.mergeMethod[method])} offset={20} placement="top">
                             <span style={{ margin: '-6px' } satisfies StyleValue}>

src/pages/hooks/index.ts

@@ -8,6 +8,7 @@ export * from "./useProvider"
 export * from "./useRequest"
 export * from "./useScrollRequest"
 export * from "./useShadow"
+export * from "./useSiteMerge"
 export * from "./useState"
 export * from "./useSwitch"
 export * from "./useWindowFocus"

src/pages/hooks/useSiteMerge.ts

@@ -0,0 +1,22 @@
+import optionHolder from '@service/components/option-holder'
+import { computed } from 'vue'
+import { useRequest } from './useRequest'
+
+type Options = {
+    onGroupDisabled?: NoArgCallback
+}
+
+export const useSiteMerge = ({ onGroupDisabled }: Options) => {
+    const { data: countTabGroup } = useRequest(() => optionHolder.get().then(o => o.countTabGroup), {
+        defaultValue: false,
+        onSuccess: v => !v && onGroupDisabled?.()
+    })
+
+    const mergeItems = computed(() => {
+        const res: (Exclude<timer.stat.MergeMethod, 'date'>)[] = ['cate', 'domain']
+        countTabGroup.value && res.push('group')
+        return res
+    })
+
+    return { mergeItems, countTabGroup }
+}

src/pages/popup/components/Footer/index.tsx

@@ -1,3 +1,4 @@
+import { useSiteMerge } from '@hooks/useSiteMerge'
 import Flex from "@pages/components/Flex"
 import DurationSelect from "@popup/components/Footer/DurationSelect"
 import { useQuery } from "@popup/context"
@@ -9,6 +10,9 @@ import Menu from "./Menu"
 
 const Footer = defineComponent(() => {
     const query = useQuery()
+    const { mergeItems } = useSiteMerge({
+        onGroupDisabled: () => query.mergeMethod === 'group' && (query.mergeMethod = undefined)
+    })
 
     return () => (
         <Flex justify="space-between" width="100%">
@@ -26,7 +30,7 @@ const Footer = defineComponent(() => {
                         style={{ width: '90px' }}
                     >
                         <ElOption value='' label={t(msg => msg.shared.merge.mergeMethod.notMerge)} />
-                        {(['domain', 'cate', 'group'] satisfies timer.stat.MergeMethod[]).map(method => (
+                        {mergeItems.value.map(method => (
                             <ElOption value={method} label={t(msg => msg.shared.merge.mergeMethod[method])} />
                         ))}
                     </ElSelect>