refactor: options

Author: sheepzh

src/i18n/message/app/index.ts

@@ -19,6 +19,7 @@ import dashboardMessages, { type DashboardMessage } from "./dashboard"
 import dataManageMessages, { type DataManageMessage } from "./data-manage"
 import habitMessages, { type HabitMessage } from "./habit"
 import helpUsMessages, { type HelpUsMessage } from "./help-us"
+import integrationMessages, { type IntegrationMessage } from './integration'
 import limitMessages, { type LimitMessage } from "./limit"
 import menuMessages, { type MenuMessage } from "./menu"
 import mergeRuleMessages, { type MergeRuleMessage } from "./merge-rule"
@@ -38,6 +39,7 @@ export type AppMessage = {
     whitelist: WhitelistMessage
     mergeRule: MergeRuleMessage
     option: OptionMessage
+    integration: IntegrationMessage
     analysis: AnalysisMessage
     menu: MenuMessage
     habit: HabitMessage
@@ -63,6 +65,7 @@ const MESSAGE_ROOT: MessageRoot<AppMessage> = {
     whitelist: whitelistMessages,
     mergeRule: mergeRuleMessages,
     option: optionMessages,
+    integration: integrationMessages,
     analysis: analysisMessages,
     menu: menuMessages,
     habit: habitMessages,

src/i18n/message/app/integration-resource.json

@@ -0,0 +1,7 @@
+{
+    "en": {
+        "notification": {
+            "title": "Notification"
+        }
+    }
+}

src/i18n/message/app/integration.ts

@@ -0,0 +1,9 @@
+import resource from './integration-resource.json'
+
+export type IntegrationMessage = {
+    notification: { title: string }
+}
+
+const _default: Messages<IntegrationMessage> = resource
+
+export default _default

src/i18n/message/app/menu-resource.json

@@ -46,6 +46,7 @@
         "siteManage": "Site Management",
         "whitelist": "Whitelist",
         "mergeRule": "Merge-site Rules",
+        "integration": "Integrations",
         "other": "Other Features",
         "helpUs": "Help Translation",
         "about": "About"

src/i18n/message/app/menu.ts

@@ -20,6 +20,7 @@ export type MenuMessage = {
     siteManage: string
     whitelist: string
     mergeRule: string
+    integration: string
     other: string
     helpUs: string
     about: string

src/pages/app/Layout/menu/item.ts

@@ -8,7 +8,7 @@
 
 import { type I18nKey } from "@app/locale"
 import { ANALYSIS_ROUTE, MERGE_ROUTE } from "@app/router/constants"
-import { Aim, Connection, HelpFilled, Histogram, Memo, MoreFilled, Rank, SetUp, Stopwatch, Timer, View } from "@element-plus/icons-vue"
+import { Aim, Connection, Cpu, HelpFilled, Histogram, Memo, MoreFilled, Rank, SetUp, Stopwatch, Timer, View } from "@element-plus/icons-vue"
 import { getGuidePageUrl } from "@util/constant/url"
 import { type Component } from 'vue'
 import About from "../icons/About"
@@ -95,6 +95,10 @@ export const menuGroups = (): MenuGroup[] => [{
         title: msg => msg.menu.mergeRule,
         route: MERGE_ROUTE,
         icon: Rank
+    }, {
+        title: msg => msg.menu.integration,
+        route: '/additional/integration',
+        icon: Cpu,
     }, {
         title: msg => msg.base.option,
         route: '/additional/option',

src/pages/app/components/Integration/Select.tsx

@@ -0,0 +1,26 @@
+import { ElCard, ElSelect } from "element-plus"
+import { defineComponent, h, useSlots } from "vue"
+import ContentContainer from "../common/ContentContainer"
+import { useCategory } from './useCategory'
+
+const _default = defineComponent(() => {
+    const { category, setCategory, getLabel } = useCategory()
+
+    const slots = useSlots()
+
+    return () => (
+        <ContentContainer v-slots={{
+            filter: () => (
+                <ElSelect modelValue={category.value} onChange={setCategory}>
+                    {Object.keys(slots).map(c => <ElSelect.Option value={c} label={getLabel(c)} />)}
+                </ElSelect>
+            ),
+            default: () => {
+                const slot = slots[category.value]
+                return !!slot && <ElCard style={{ "--el-card-padding": '20px 10px' }}>{h(slot)}</ElCard>
+            }
+        }} />
+    )
+})
+
+export default _default

src/pages/app/components/Integration/Tabs.ts

@@ -0,0 +1,11 @@
+import { defineComponent } from 'vue'
+
+const Integration = defineComponent(() => {
+    return () => (
+        <div class="integration">
+            <h1>Integration</h1>
+        </div>
+    )
+})
+
+export default Integration

src/pages/app/components/Integration/index.tsx

@@ -0,0 +1,49 @@
+import { type I18nKey, t } from '@app/locale'
+import { createStringUnionGuard } from 'typescript-guard'
+import { computed, type ShallowRef } from 'vue'
+import { type LocationQuery, useRoute, useRouter } from 'vue-router'
+
+export type IntegrationCategory = 'backup' | 'notification'
+const isCategory = createStringUnionGuard<IntegrationCategory>('backup', 'notification')
+
+const CATE_LABELS: Record<IntegrationCategory, I18nKey> = {
+    backup: msg => msg.option.backup.title,
+    notification: msg => msg.integration.notification.title,
+}
+
+const PARAM = "i"
+
+function parseInit(query: LocationQuery): IntegrationCategory | undefined {
+    const initialQuery = query[PARAM]
+    const queryVal = Array.isArray(initialQuery) ? initialQuery[0] : initialQuery
+    return isCategory(queryVal) ? queryVal : undefined
+}
+
+export const useCategory = (): {
+    category: ShallowRef<IntegrationCategory>
+    setCategory: (value: unknown) => void
+    getLabel: (value: unknown) => string | undefined
+} => {
+    const route = useRoute()
+    const router = useRouter()
+
+    const category = computed({
+        set(value: IntegrationCategory) {
+            const oldQuery = route.query
+            const query: LocationQuery = {
+                ...oldQuery,
+                [PARAM]: value,
+            }
+            router.replace({ query })
+        },
+        get: () => parseInit(route.query) ?? 'backup',
+    })
+
+    const setCategory = (value: unknown) => isCategory(value) && (category.value = value)
+    const getLabel = (value: unknown) => {
+        const key = isCategory(value) ? CATE_LABELS[value] : undefined
+        return key ? t(key) : undefined
+    }
+
+    return { category, setCategory, getLabel }
+}