style: beautify the toolbar of option tabs (#487)

Author: sheepzh

package.json

@@ -34,7 +34,7 @@
         "@rsdoctor/rspack-plugin": "^1.1.4",
         "@rspack/cli": "^1.3.15",
         "@rspack/core": "^1.3.15",
-        "@swc/core": "^1.12.4",
+        "@swc/core": "^1.12.5",
         "@swc/jest": "^0.2.38",
         "@types/chrome": "0.0.326",
         "@types/decompress": "^4.2.7",

src/pages/app/components/Option/Tabs.tsx

@@ -1,64 +1,94 @@
 import { t } from "@app/locale"
 import { Download, Refresh, Upload } from "@element-plus/icons-vue"
-import { ElIcon, ElMessage, ElMessageBox, ElTabPane, ElTabs, TabPaneName } from "element-plus"
+import Flex from "@pages/components/Flex"
+import { ElLink, ElMessage, ElMessageBox, ElTabPane, ElTabs, ElTooltip, TabPaneName } from "element-plus"
 import { defineComponent, h, ref, useSlots } from "vue"
 import { useRouter } from "vue-router"
 import ContentContainer from "../common/ContentContainer"
 import { CATE_LABELS, changeQuery, type OptionCategory, parseQuery } from "./common"
-import { exportSettings, importSettings, createFileInput } from "./export-import"
+import { createFileInput, exportSettings, importSettings } from "./export-import"
 
-const resetButtonName = "reset"
-const exportButtonName = "export"
-const importButtonName = "import"
+const TOOLBAR_NAME = "toolbar"
 
-const _default = defineComponent({
-    emits: {
-        reset: (_cate: OptionCategory, _callback: () => void) => Promise.resolve(true),
-    },
-    setup: (_, ctx) => {
-        const tab = ref(parseQuery() || 'appearance')
-        const router = useRouter()
+type TooltipProps = {
+    onReset?: NoArgCallback
+}
 
-        const handleBeforeLeave = async (activeName: TabPaneName, oldActiveName: TabPaneName): Promise<boolean> => {
-            if (activeName === resetButtonName) {
-                const cate: OptionCategory = oldActiveName as OptionCategory
-                await new Promise<void>(res => ctx.emit('reset', cate, res))
-                ElMessage.success(t(msg => msg.option.resetSuccess))
-                return Promise.reject()
-            } else if (activeName === exportButtonName) {
-                try {
-                    await exportSettings()
-                    ElMessage.success(t(msg => msg.option.exportSuccess))
-                } catch (error) {
-                    ElMessage.error('Export failed: ' + (error as Error).message)
-                }
-                return Promise.reject()
-            } else if (activeName === importButtonName) {
-                try {
-                    const fileContent = await createFileInput()
-                    if (fileContent === null) {
-                        // User cancelled file selection, don't show any message
-                        return Promise.reject()
-                    }
+const Toolbar = defineComponent<TooltipProps>(props => {
+    const handleExport = async () => {
+        try {
+            await exportSettings()
+            ElMessage.success(t(msg => msg.option.exportSuccess))
+        } catch (error) {
+            ElMessage.error('Export failed: ' + (error as Error).message)
+        }
+    }
+
+    const handleImport = async () => {
+        try {
+            const fileContent = await createFileInput()
+            // User cancelled, don't show error message
+            if (!fileContent) return
+            await importSettings(fileContent)
+            ElMessageBox({
+                message: t(msg => msg.option.importConfirm),
+                type: "success",
+                confirmButtonText: t(msg => msg.option.reloadButton),
+                closeOnPressEscape: false,
+                closeOnClickModal: false
+            }).then(() => {
+                window.location.reload()
+            }).catch(() => {/* do nothing */ })
+        } catch (error) {
+            ElMessage.error(t(msg => msg.option.importError))
+        }
+    }
+
+    return () => (
+        <Flex align="center" gap={10} onClick={ev => ev.stopPropagation()}>
+            <ElTooltip content={t(msg => msg.option.exportButton)}>
+                <ElLink
+                    icon={Download}
+                    underline="never"
+                    onClick={handleExport}
+                />
+            </ElTooltip>
+            <ElTooltip content={t(msg => msg.option.importButton)}>
+                <ElLink
+                    icon={Upload}
+                    underline="never"
+                    onClick={handleImport}
+                />
+            </ElTooltip>
+            <ElLink
+                icon={Refresh}
+                underline="never"
+                onClick={() => props.onReset?.()}
+            >
+                {t(msg => msg.option.resetButton)}
+            </ElLink>
+        </Flex>
+    )
+}, {
+    props: ['onReset']
+})
 
-                    await importSettings(fileContent)
-                    ElMessageBox({
-                        message: t(msg => msg.option.importConfirm),
-                        type: "success",
-                        confirmButtonText: t(msg => msg.option.reloadButton),
-                        closeOnPressEscape: false,
-                        closeOnClickModal: false
-                    }).then(() => {
-                        window.location.reload()
-                    }).catch(() => {/* do nothing */ })
-                } catch (error) {
-                    ElMessage.error(t(msg => msg.option.importError))
-                }
+type Props = { onReset: (cate: OptionCategory) => Promise<void> | void }
+
+const _default = defineComponent<Props>(
+    props => {
+        const tab = ref(parseQuery() ?? 'appearance')
+        const router = useRouter()
+        const handleReset = () => props.onReset?.(tab.value)
+
+        const handleBeforeLeave = (activeName: TabPaneName): Promise<boolean> => {
+            if (activeName === TOOLBAR_NAME) {
+                // do nothing, and never happen
                 return Promise.reject()
             }
             // Change the query of current route
             changeQuery(activeName as OptionCategory, router)
-            return true
+            return Promise.resolve(true)
         }
         return () => (
             <ContentContainer>
@@ -74,46 +104,12 @@ const _default = defineComponent({
                         </ElTabPane>
                     ))}
                     <ElTabPane
-                        name={resetButtonName}
-                        v-slots={{
-                            label: () => (
-                                <div>
-                                    <ElIcon>
-                                        <Refresh />
-                                    </ElIcon>
-                                    {t(msg => msg.option.resetButton)}
-                                </div>
-                            )
-                        }}
-                    />
-                    <ElTabPane
-                        name={exportButtonName}
-                        v-slots={{
-                            label: () => (
-                                <div title={t(msg => msg.option.exportButton)}>
-                                    <ElIcon>
-                                        <Download />
-                                    </ElIcon>
-                                </div>
-                            )
-                        }}
-                    />
-                    <ElTabPane
-                        name={importButtonName}
-                        v-slots={{
-                            label: () => (
-                                <div title={t(msg => msg.option.importButton)}>
-                                    <ElIcon>
-                                        <Upload />
-                                    </ElIcon>
-                                </div>
-                            )
-                        }}
+                        name={TOOLBAR_NAME}
+                        v-slots={{ label: () => <Toolbar onReset={handleReset} /> }}
                     />
                 </ElTabs>
             </ContentContainer>
         )
-    }
-})
+    }, { props: ['onReset'] })
 
 export default _default

src/pages/app/components/Option/export-import.ts

@@ -5,9 +5,8 @@
  */
 
 import optionHolder from "@service/components/option-holder"
-import { exportJson } from "@util/file"
-import { deserialize } from "@util/file"
-import { defaultOption } from "@util/constant/option"
+import { deserialize, exportJson } from "@util/file"
+import { mergeObject } from '@util/lang'
 
 export interface ExportedSettings {
     version: string
@@ -23,7 +22,7 @@ export async function exportSettings(): Promise<void> {
     const exportData: ExportedSettings = {
         version: '1.0',
         timestamp: Date.now(),
-        settings
+        settings,
     }
 
     const fileName = `timer-settings-${new Date().toISOString().split('T')[0]}`
@@ -53,27 +52,9 @@ export async function importSettings(jsonString: string): Promise<void> {
 async function validateAndMergeSettings(importedSettings: Partial<timer.option.AllOption>): Promise<timer.option.AllOption> {
     // Get current user settings as defaults instead of default options
     const defaults = await optionHolder.get()
-
-    // Merge imported settings with defaults, giving preference to imported values
-    const mergedSettings: timer.option.AllOption = {
-        ...defaults,
-        ...importedSettings
-    }
-
-    // Ensure critical nested objects exist
-    if (importedSettings.backupAuths) {
-        mergedSettings.backupAuths = { ...defaults.backupAuths, ...importedSettings.backupAuths }
-    }
-
-    if (importedSettings.backupLogin) {
-        mergedSettings.backupLogin = { ...defaults.backupLogin, ...importedSettings.backupLogin }
-    }
-
-    if (importedSettings.backupExts) {
-        mergedSettings.backupExts = { ...defaults.backupExts, ...importedSettings.backupExts }
-    }
-
-    return mergedSettings
+    // Delete client name
+    delete importedSettings['clientName']
+    return mergeObject(defaults, importedSettings)
 }
 
 /**

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

@@ -39,10 +39,7 @@ const _default = defineComponent(() => {
         backup: () => <BackupOption ref={paneRefMap.backup} />,
     }
 
-    const handleReset = async (cate: OptionCategory, callback: () => void) => {
-        await paneRefMap[cate]?.value?.reset?.()
-        callback?.()
-    }
+    const handleReset = (cate: OptionCategory) => paneRefMap[cate]?.value?.reset?.()
 
     return () => mediaSize.value <= MediaSize.sm
         ? <Select v-slots={slots} />

src/pages/app/components/Option/style.sass

@@ -9,18 +9,9 @@
     // Keep the reset button top-right
     .el-tabs__nav
         float: none !important
-        #tab-reset, #tab-export, #tab-import
+        #tab-toolbar
             position: absolute
-            // Optimize the buttons
-            .el-icon
-                top: 2px
-                padding-inline-end: 4px
-        #tab-reset
             right: 0px
-        #tab-export
-            right: 76px
-        #tab-import
-            right: 112px
     .el-tabs__item
         font-size: 16px
         height: 43px

src/util/file.ts

@@ -26,7 +26,7 @@ export function exportCsv(titleAndData: any[][], fileName: string) {
  * @since 0.0.7
  */
 export function exportJson(data: any, fileName: string) {
-    const jsonStr = JSON.stringify(data)
+    const jsonStr = JSON.stringify(data, null, 4)
     var blob = new Blob([jsonStr], { type: 'text/json' })
 
     exportBlob(blob, fileName + '.json')

src/util/lang.ts

@@ -23,4 +23,14 @@ export const deepCopy = <T = any | null | undefined>(obj: T): T => {
         }
     })
     return deep as T
+}
+
+export const mergeObject = <T extends Record<string, any>>(defaults: T, newVal: Partial<T>): T => {
+    Object.entries(newVal).forEach(([k, v]) => {
+        if (typeof v === 'object' && !!v && !Array.isArray(v)) {
+            (defaults as any)[k] = mergeObject(defaults[k], v as Record<string, any>)
+        }
+        (defaults as any)[k] = v
+    })
+    return defaults
 }