style: beautify ui

Author: sheepzh

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

@@ -5,14 +5,7 @@
             "title1": "近一年上网总时长不足 1 小时"
         },
         "topK": {
-            "title": "近 {day} 天最常访问 TOP {k}",
-            "filter": {
-                "chartType": {
-                    "pie": "玫瑰图",
-                    "bar": "条形图",
-                    "halfPie": "半环图"
-                }
-            }
+            "title": "近 {day} 天最常访问 TOP {k}"
         },
         "indicator": {
             "installedDays": "已使用 {number} 天",
@@ -30,14 +23,7 @@
             "title1": "近一年瀏覽時數少於 1 小時"
         },
         "topK": {
-            "title": "近 {day} 天最常造訪 TOP {k}",
-            "filter": {
-                "chartType": {
-                    "pie": "玫瑰圖",
-                    "bar": "條形圖",
-                    "halfPie": "半環圖"
-                }
-            }
+            "title": "近 {day} 天最常造訪 TOP {k}"
         },
         "indicator": {
             "installedDays": "已使用 {number} 天",
@@ -55,14 +41,7 @@
             "title1": "Browsed less than 1 hour last year"
         },
         "topK": {
-            "title": "TOP {k} most visited in the past {day} days",
-            "filter": {
-                "chartType": {
-                    "pie": "Nightingale",
-                    "bar": "Bar",
-                    "halfPie": "Half Doughnut"
-                }
-            }
+            "title": "TOP {k} most visited in the past {day} days"
         },
         "indicator": {
             "installedDays": "Installed for {number} days",

src/i18n/message/app/dashboard.ts

@@ -14,13 +14,6 @@ export type DashboardMessage = {
     },
     topK: {
         title: string
-        filter: {
-            chartType: {
-                pie: string
-                bar: string
-                halfPie: string
-            }
-        }
     }
     indicator: {
         installedDays: string

src/pages/app/components/Dashboard/DashboardCard.tsx

@@ -13,7 +13,7 @@ const _default = defineComponent<{ span: number }>(props => {
 
     return () => (
         <ElCol span={props.span}>
-            <ElCard style={{ height: "100%" }} v-slots={slots} />
+            <ElCard style={{ height: '320px' }} v-slots={slots} />
         </ElCol>
     )
 }, { props: ['span'] })

src/pages/app/components/Dashboard/components/Calendar/index.tsx

@@ -11,6 +11,7 @@ import { t } from "@app/locale"
 import { REPORT_ROUTE } from "@app/router/constants"
 import { useRequest } from "@hooks"
 import { useEcharts } from "@hooks/useEcharts"
+import Flex from "@pages/components/Flex"
 import weekHelper from "@service/components/week-helper"
 import statService from "@service/stat-service"
 import { groupBy, sum } from "@util/array"
@@ -80,10 +81,10 @@ const _default = defineComponent(() => {
     })
 
     return () => (
-        <div class="calendar-container">
+        <Flex height="100%" gap={4} column>
             <ChartTitle text={titleText(data.value)} />
             <div ref={elRef} style={{ flex: 1 }} />
-        </div>
+        </Flex>
     )
 })
 

…Dashboard/components/Indicator/index.tsx …nents/Dashboard/components/Indicator.tsxsrc/pages/app/components/Dashboard/components/Indicator/index.tsx renamed to src/pages/app/components/Dashboard/components/Indicator.tsx src/pages/app/components/Dashboard/components/Indicator/index.tsx renamed to src/pages/app/components/Dashboard/components/Indicator.tsx

@@ -9,13 +9,13 @@ import NumberGrow from "@app/components/common/NumberGrow"
 import { tN, type I18nKey } from "@app/locale"
 import PeriodDatabase from "@db/period-database"
 import { Sunrise } from "@element-plus/icons-vue"
-import { useRequest } from "@hooks"
+import { useRequest, useXsState } from "@hooks"
+import Flex from "@pages/components/Flex"
 import statService from "@service/stat-service"
 import { calcMostPeriodOf2Hours } from "@util/period"
 import { getStartOfDay, MILL_PER_DAY, MILL_PER_MINUTE } from "@util/time"
 import { ElIcon } from "element-plus"
 import { computed, defineComponent, toRef, type VNode } from "vue"
-import "./style"
 
 const periodDatabase = new PeriodDatabase(chrome.storage.local)
 
@@ -84,7 +84,7 @@ const IndicatorLabel = defineComponent<Props>(props => {
     const i18nParam = computed(() => computeI18nParam(param.value, props.duration))
 
     return () => (
-        <div class="indicator-label" >
+        <div style={{ paddingInlineStart: '10px', paddingBottom: '10px', fontSize: '15px' }}>
             {param.value && tN(props.path, i18nParam.value)}
         </div>
     )
@@ -100,15 +100,16 @@ const computeMost2HourParam = (value: _Value | undefined): { start: number, end:
 
 const _default = defineComponent(() => {
     const { data } = useRequest(query)
+    const isXs = useXsState()
     const most2HourParam = computed(() => computeMost2HourParam(data.value))
 
     return () => (
-        <div class="indicator-container">
-            <div class="indicator-icon-header">
-                <ElIcon>
+        <Flex column gap={4} style={{ textAlign: isXs.value ? 'center' : undefined }}>
+            <Flex align="center" justify="center" marginBlock="0 15px">
+                <ElIcon size={45}>
                     <Sunrise />
                 </ElIcon>
-            </div>
+            </Flex>
             <IndicatorLabel
                 v-show={data.value?.installedDays}
                 path={msg => msg.dashboard.indicator.installedDays}
@@ -130,7 +131,7 @@ const _default = defineComponent(() => {
                 param={most2HourParam.value}
                 duration={2.25}
             />
-        </div>
+        </Flex>
     )
 })
 

src/pages/app/components/Dashboard/components/Indicator/style.sass

@@ -75,15 +75,27 @@ function optionOf(lastPeriodItems: Row[], thisPeriodItems: Row[], domWidth: numb
                 stack: "one",
                 type: 'bar',
                 barCategoryGap: `${domWidth < 500 ? 30 : 55}%`,
-                itemStyle: { color: color1, borderRadius: [10, 10, 0, 0] },
-                data: thisPeriodItems.map(row => ({ value: row.total, row })),
+                itemStyle: { color: color1 },
+                data: thisPeriodItems.map((row, idx) => {
+                    const otherIsEmpty = lastPeriodItems[idx].total === 0
+                    return {
+                        value: row.total, row,
+                        itemStyle: { borderRadius: otherIsEmpty ? 10 : [10, 10, 0, 0] },
+                    }
+                }),
             }, {
                 name: "Last Month",
                 stack: "one",
                 type: 'bar',
-                itemStyle: { color: color2, borderRadius: [0, 0, 10, 10] },
-                data: lastPeriodItems.map(row => ({ value: -row.total, row })),
-            }
+                itemStyle: { color: color2 },
+                data: lastPeriodItems.map((row, idx) => {
+                    const otherIsEmpty = thisPeriodItems[idx].total === 0
+                    return {
+                        value: -row.total, row,
+                        itemStyle: { borderRadius: otherIsEmpty ? 10 : [0, 0, 10, 10] },
+                    }
+                }),
+            },
         ],
     }
 }

src/pages/app/components/Dashboard/components/MonthOnMonth/Wrapper.ts

@@ -1,5 +1,6 @@
 import { t } from "@app/locale"
 import { useEcharts } from "@hooks/useEcharts"
+import Flex from "@pages/components/Flex"
 import statService from "@service/stat-service"
 import { groupBy, sum } from "@util/array"
 import DateIterator from "@util/date-iterator"
@@ -46,10 +47,10 @@ const fetchData = async (): Promise<[thisMonth: Row[], lastMonth: Row[]]> => {
 const _default = defineComponent(() => {
     const { elRef } = useEcharts(Wrapper, fetchData)
     return () => (
-        <div class="mom-container">
+        <Flex height="100%" column gap={4}>
             <ChartTitle text={t(msg => msg.dashboard.monthOnMonth.title, { k: TOP_NUM })} />
             <div ref={elRef} style={{ flex: 1 }} />
-        </div>
+        </Flex>
     )
 })
 

src/pages/app/components/Dashboard/components/MonthOnMonth/index.tsx

@@ -1,17 +1,12 @@
 import { useEcharts } from "@hooks/useEcharts"
-import { defineComponent, type StyleValue } from "vue"
+import { defineComponent } from "vue"
 import { useTopKValue } from "../context"
 import Wrapper from "./Wrapper"
 
-const CONTAINER_STYLE: StyleValue = {
-    width: "100%",
-    height: "220%",
-}
-
 const _default = defineComponent(() => {
     const value = useTopKValue()
     const { elRef } = useEcharts(Wrapper, value, { manual: true })
-    return () => <div style={CONTAINER_STYLE} ref={elRef} />
+    return () => <div style={{ width: '100%' }} ref={elRef} />
 })
 
 export default _default