feat(storage): migrating data for Android (#613)

Author: sheepzh

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

@@ -61,7 +61,8 @@ export const MENU_GROUPS: MenuGroup[] = [{
     }, {
         title: msg => msg.menu.dataClear,
         route: '/data/manage',
-        icon: Database
+        icon: Database,
+        mobile: true,
     }]
 }, {
     title: msg => msg.menu.behavior,

src/pages/app/components/DataManage/ClearPanel/index.tsx

@@ -8,10 +8,10 @@
 import { t } from "@app/locale"
 import db, { type StatCondition } from "@db/stat-database"
 import { MILL_PER_DAY, MILL_PER_SECOND } from "@util/time"
-import { ElAlert, ElCard, ElMessage, ElMessageBox } from "element-plus"
+import { ElCard, ElMessage, ElMessageBox } from "element-plus"
 import { defineComponent, type StyleValue } from "vue"
-import { alertProps } from "../common"
 import { useDataMemory } from "../context"
+import DataManageAlert from '../DataManageAlert'
 import ClearFilter from "./ClearFilter"
 
 type FilterOption = {
@@ -102,7 +102,7 @@ const _default = defineComponent(() => {
 
     return () => (
         <ElCard style={{ width: '100%' } satisfies StyleValue}>
-            <ElAlert {...alertProps} title={t(msg => msg.dataManage.operationAlert)} />
+            <DataManageAlert text={msg => msg.dataManage.operationAlert} />
             <ClearFilter onDelete={(date, focus, time) => handleClick({ date, focus, time })} />
         </ElCard>
     )

src/pages/app/components/DataManage/DataManageAlert.tsx

@@ -0,0 +1,23 @@
+import { t, type I18nKey } from '@app/locale'
+import { ElAlert, type AlertProps } from 'element-plus'
+import { computed, defineComponent } from 'vue'
+
+type Props = {
+    type?: AlertProps['type']
+    text: I18nKey | string
+}
+
+const DataManageAlert = defineComponent<Props>(props => {
+    const text = computed(() => {
+        const text = props.text
+        return typeof text === 'string' ? text : t(text)
+    })
+
+    return () => (
+        <ElAlert type={props.type ?? 'info'} closable={false} center>
+            {text.value}
+        </ElAlert>
+    )
+}, { props: ['text', 'type'] })
+
+export default DataManageAlert

src/pages/app/components/DataManage/MemoryInfo.tsx

@@ -7,10 +7,10 @@
 
 import { t } from "@app/locale"
 import Flex from "@pages/components/Flex"
-import { ElAlert, ElCard, ElProgress } from "element-plus"
+import { ElCard, ElProgress } from "element-plus"
 import { computed, defineComponent, type StyleValue } from "vue"
-import { alertProps } from "./common"
 import { useDataMemory } from "./context"
+import DataManageAlert from './DataManageAlert'
 
 const byte2Mb = (size: number) => Math.round((size || 0) / 1024.0 / 1024.0 * 1000) / 1000
 
@@ -44,15 +44,13 @@ const _default = defineComponent(() => {
             bodyStyle={{ height: '100%', boxSizing: 'border-box' }}
         >
             <Flex column height='100%' align="center">
-                <ElAlert
-                    {...alertProps}
+                <DataManageAlert
                     type={totalMb.value ? "info" : "warning"}
-                    title={totalTitle(totalMb.value)}
+                    text={totalTitle(totalMb.value)}
                 />
                 <Flex flex={1} height={0}>
                     <ElProgress
-                        width={260}
-                        strokeWidth={30}
+                        strokeWidth={10}
                         percentage={percentage.value}
                         type="circle"
                         color={color.value}

src/pages/app/components/DataManage/Migration/index.tsx

@@ -11,9 +11,9 @@ import Flex from "@pages/components/Flex"
 import Immigration from "@service/components/immigration"
 import { exportJson } from "@util/file"
 import { formatTime } from "@util/time"
-import { ElAlert, ElButton, ElCard } from "element-plus"
+import { ElButton, ElCard } from "element-plus"
 import { type FunctionalComponent, type StyleValue } from "vue"
-import { alertProps } from "../common"
+import DataManageAlert from '../DataManageAlert'
 import ImportButton from "./ImportButton"
 import ImportOtherButton from "./ImportOtherButton"
 
@@ -26,15 +26,10 @@ async function handleExport() {
 }
 
 const Migration: FunctionalComponent = () => (
-    <ElCard
-        style={{ width: '100%' } satisfies StyleValue}
-        bodyStyle={{ height: '100%', boxSizing: 'border-box' } as StyleValue}
-    >
-        <Flex justify="center" height="100%" align="center">
-            <Flex column gap={20} height="100%" maxWidth={190} flex={3}>
-                <ElAlert style={{ flex: 1 }} {...alertProps} >
-                    {t(msg => msg.dataManage.migrationAlert)}
-                </ElAlert>
+    <ElCard style={{ width: '100%' } satisfies StyleValue}>
+        <Flex column gap={20} justify="center" height="100%" align="center">
+            <DataManageAlert text={msg => msg.dataManage.migrationAlert} />
+            <Flex column gap={20} maxWidth={350} flex={1}>
                 <ElButton
                     size="large"
                     type="success"

src/pages/app/components/DataManage/common.ts

@@ -5,31 +5,34 @@
  * https://opensource.org/licenses/MIT
  */
 
+import { MediaSize, useMediaSize } from '@hooks/useMediaSize'
 import Flex from "@pages/components/Flex"
 import { ElScrollbar } from 'element-plus'
-import { defineComponent, type StyleValue } from "vue"
+import { computed, defineComponent, type StyleValue } from "vue"
 import ContentContainer from "../common/ContentContainer"
-import ClearPanel from "./ClearPanel"
+import ClearPanel from './ClearPanel'
 import MemoryInfo from "./MemoryInfo"
 import Migration from "./Migration"
 import { initDataManage } from "./context"
 
 export default defineComponent(() => {
     initDataManage()
+    const mediaSize = useMediaSize()
+    const ltSm = computed(() => mediaSize.value < MediaSize.sm)
 
     return () => (
         <ElScrollbar height="100%" style={{ width: '100%' } satisfies StyleValue}>
             <ContentContainer>
-                <Flex gap={22} height={490}>
-                    <Flex height='100%' flex={8}>
-                        <MemoryInfo />
-                    </Flex>
-                    <Flex height='100%' flex={11}>
-                        <ClearPanel />
-                    </Flex>
-                    <Flex height='100%' flex={5}>
-                        <Migration />
+                <Flex column gap={22}>
+                    <Flex gap={22} height={ltSm.value ? undefined : 300} column={ltSm.value}>
+                        <Flex height='100%' flex={5}>
+                            <MemoryInfo />
+                        </Flex>
+                        <Flex height='100%' flex={5}>
+                            <Migration />
+                        </Flex>
                     </Flex>
+                    <ClearPanel />
                 </Flex>
             </ContentContainer >
         </ElScrollbar>