Semi

src/api/crowdin.ts

@@ -1,5 +1,4 @@
-
-/**
+ /**
  * Copyright (c) 2022-present Hengyang Zhang
  *
  * This software is released under the MIT License.

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

@@ -2,7 +2,7 @@ import type { BarSeriesOption, ComposeOption, GridComponentOption, LegendCompone
 
 import { getCompareColor, getDiffColor, tooltipDot } from "@app/util/echarts"
 import { cvt2LocaleTime } from "@app/util/time"
-import { EchartsWrapper } from "@hooks"
+import { EchartsWrapper } from "@hooks/useEcharts"
 import { formatPeriodCommon } from "@util/time"
 import { TopLevelFormatterParams } from "echarts/types/dist/shared"
 

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

@@ -1,6 +1,6 @@
 import { defineComponent } from "vue"
 import ChartTitle from "../../ChartTitle"
-import { useEcharts } from "@hooks"
+import { useEcharts } from "@hooks/useEcharts"
 import Wrapper from "./Wrapper"
 import { groupBy, sum } from "@util/array"
 import DateIterator from "@util/date-iterator"

src/app/components/Report/ReportList/Item.tsx

@@ -1,90 +1,104 @@
-import { Effect, ElButton, ElDescriptions, ElDescriptionsItem, ElLink, ElTooltip } from "element-plus"
-import { defineComponent, PropType } from "vue"
+import { Effect, ElDescriptions, ElDescriptionsItem, ElDivider, ElIcon, ElLink, ElTag, ElTooltip } from "element-plus"
+import { computed, defineComponent, PropType } from "vue"
 import { useReportFilter } from "../context"
 import HostMergedAlert from "../common/HostMergedAlert"
 import HostAlert from "@app/components/common/HostAlert"
 import { t } from "@app/locale"
 import { cvt2LocaleTime, periodFormatter } from "@app/util/time"
 import CompositionTable from "../common/CompositionTable"
-import { Delete } from "@element-plus/icons-vue"
+import { Calendar, Delete, Mouse, QuartzWatch } from "@element-plus/icons-vue"
+import TooltipWrapper from "@app/components/common/TooltipWrapper"
+
+const FocusTag = defineComponent({
+    props: {
+        value: Number,
+    },
+    setup(props) {
+        const filter = useReportFilter()
+        return () => (
+            <ElTag type="primary">
+                {t(msg => msg.item.focus)}: {periodFormatter(props.value, { format: filter.value?.timeFormat })}
+            </ElTag>
+        )
+    }
+})
 
 const _default = defineComponent({
     props: {
         value: Object as PropType<timer.stat.Row>,
     },
     setup(props, ctx) {
         const filter = useReportFilter()
+        const mergeHost = computed(() => !!filter.value?.mergeHost)
         const formatter = (focus: number): string => periodFormatter(focus, { format: filter.value?.timeFormat })
         const { iconUrl, host, mergedHosts, date, focus, composition, time } = props.value || {}
         return () => <>
-            <ElDescriptions
-                size="small"
-                border
-                column={1}
-                v-slots={{
-                    title: () => (
-                        <div>
-                            {filter.value?.mergeHost
-                                ? <HostMergedAlert mergedHost={host}>
-                                    {mergedHosts?.map(({ host, iconUrl }) =>
-                                        <p>
-                                            <HostAlert host={host} iconUrl={iconUrl} clickable={false} />
-                                        </p>
-                                    )}
-                                </HostMergedAlert>
-                                : <HostAlert host={host} iconUrl={iconUrl} clickable={false} />
-                            }
-                        </div>
-                    ),
-                    extra: () => <ElLink
+            <div class="report-item">
+                <div class="report-item-title">
+                    <div>
+                        <TooltipWrapper
+                            placement="bottom"
+                            effect={Effect.LIGHT}
+                            offset={10}
+                            trigger="click"
+                            showPopover={mergeHost.value}
+                            v-slots={{
+                                content: () => mergedHosts?.map(({ host, iconUrl }) => (
+                                    <p>
+                                        <HostAlert host={host} iconUrl={iconUrl} clickable={false} />
+                                    </p>
+                                )),
+                            }}
+                        >
+                            <HostAlert
+                                host={host}
+                                iconUrl={mergeHost.value ? null : iconUrl}
+                                clickable={false}
+                            />
+                        </TooltipWrapper>
+                    </div>
+                    <ElLink
                         type="danger"
                         icon={<Delete />}
                         onClick={() => console.log()}
-                    />,
-                    default: () => <>
-                        <ElDescriptionsItem
-                            v-show={!filter.value?.mergeDate}
-                            label={t(msg => msg.item.date)}
-                        >
-                            {cvt2LocaleTime(date)}
-                        </ElDescriptionsItem>
-                        <ElDescriptionsItem label={t(msg => msg.item.focus)}>
-                            {filter.value?.readRemote
-                                ? <ElTooltip
-                                    placement="top"
-                                    effect={Effect.LIGHT}
-                                    offset={10}
-                                    v-slots={{
-                                        content: () => <CompositionTable valueFormatter={formatter} data={composition?.focus || []} />
-                                    }}
-                                >
-                                    {formatter(focus)}
-                                </ElTooltip>
-                                : formatter(focus)
-                            }
-                        </ElDescriptionsItem>
-                        <ElDescriptionsItem label={t(msg => msg.item.time)} span={24}>
-                            {filter.value?.readRemote
-                                ? <ElTooltip
-                                    placement="top"
-                                    effect={Effect.LIGHT}
-                                    offset={10}
-                                    v-slots={{
-                                        content: () => <CompositionTable
-                                            valueFormatter={v => v?.toString?.() || "0"}
-                                            data={composition?.time || []}
-                                        />
-                                    }}
-                                >
-                                    {time}
-                                </ElTooltip>
-                                : time
-                            }
-                        </ElDescriptionsItem>
-                    </>
-                }}>
-
-            </ElDescriptions>
+                    />
+                </div>
+                <ElDivider style={{ margin: "5px 0" }} />
+                <div class="report-item-content">
+                    <ElTag v-show={!filter.value?.mergeDate} type="info" size="small">
+                        <ElIcon><Calendar /></ElIcon>
+                        <span>{cvt2LocaleTime(date)}</span>
+                    </ElTag>
+                    <TooltipWrapper
+                        placement="top"
+                        effect={Effect.LIGHT}
+                        offset={10}
+                        trigger="click"
+                        v-slots={{
+                            content: () => <CompositionTable valueFormatter={formatter} data={composition?.focus || []} />,
+                        }}
+                    >
+                        <ElTag type="primary" size="small">
+                            <ElIcon><QuartzWatch /></ElIcon>
+                            <span>{periodFormatter(focus, { format: filter.value?.timeFormat })}</span>
+                        </ElTag>
+                    </TooltipWrapper>
+                    <TooltipWrapper
+                        placement="top"
+                        effect={Effect.LIGHT}
+                        offset={10}
+                        trigger="click"
+                        v-slots={{
+                            content: () => <CompositionTable data={composition?.time || []} />,
+                        }}
+                    >
+                        <ElTag type="warning" size="small">
+                            <ElIcon><Mouse /></ElIcon>
+                            <span>{time ?? 0}</span>
+                        </ElTag>
+                    </TooltipWrapper>
+                </div>
+            </div>
         </>
     },
 })

src/app/components/Report/ReportList/style.sass

@@ -3,3 +3,16 @@
     display: flex
     flex-direction: column
     gap: 10px
+    .el-card__body
+        padding: 15px
+.report-item
+    .report-item-title
+        display: flex
+        justify-content: space-between
+    .report-item-content
+        display: flex
+        gap: 5px
+        .el-tag__content
+            display: flex
+            align-items: center
+            gap: 2px

src/app/components/Report/common/HostMergedAlert.tsx

@@ -1,5 +1,5 @@
 import { Effect, ElTooltip } from "element-plus"
-import { defineComponent, h } from "vue"
+import { defineComponent, h, PropType } from "vue"
 
 /**
  * Merged host column
@@ -11,14 +11,16 @@ const default_ = defineComponent({
         mergedHost: {
             type: String,
             required: true
-        }
+        },
+        trigger: String as PropType<"click" | "hover">,
     },
     setup(props, ctx) {
         return () => (
             <ElTooltip
                 placement="left"
                 effect={Effect.LIGHT}
                 offset={10}
+                trigger={props.trigger}
                 v-slots={{ content: () => h(ctx.slots.default) }}
             >
                 <a class="el-link el-link--default is-underline">

src/app/components/common/HostAlert.tsx

@@ -33,20 +33,29 @@ const _default = defineComponent({
         const href = computed(() => props.clickable ? `http://${props.host}` : '')
         const target = computed(() => props.clickable ? '_blank' : '')
         const cursor = computed(() => props.clickable ? "cursor" : "default")
-        return () => IS_SAFARI
-            ? <ElLink href={href.value} target={target.value} underline={props.clickable} style={{ cursor: cursor.value }}>
-                {props.host}
-            </ElLink>
-            : <div style={{ display: 'flex', alignItems: 'center', gap: '3px' }}>
-                <ElLink href={href.value} target={target.value} underline={props.clickable} style={{ cursor: cursor.value }}>
+        return () => <div style={{ wordBreak: "break-all" }}>
+            {IS_SAFARI ? (
+                <ElLink
+                    href={href.value}
+                    target={target.value}
+                    underline={props.clickable}
+                    style={{ cursor: cursor.value }}
+                >
                     {props.host}
                 </ElLink>
-                {props.iconUrl &&
-                    <div style={{ display: 'inline-flex', alignItems: 'center' }}>
-                        <img src={props.iconUrl} width={12} height={12} />
-                    </div>
-                }
-            </div>
+            ) : (
+                <div style={{ display: 'flex', alignItems: 'center', gap: '3px' }}>
+                    <ElLink href={href.value} target={target.value} underline={props.clickable} style={{ cursor: cursor.value }}>
+                        {props.host}
+                    </ElLink>
+                    {props.iconUrl &&
+                        <div style={{ display: 'inline-flex', alignItems: 'center' }}>
+                            <img src={props.iconUrl} width={12} height={12} />
+                        </div>
+                    }
+                </div>
+            )}
+        </div>
     }
 })
 

src/app/components/common/TooltipWrapper.tsx

@@ -0,0 +1,32 @@
+import { useShadow } from "@hooks"
+import { ElTooltip, type Placement, type PopperEffect, type PopperTrigger } from "element-plus"
+import { defineComponent, h, PropType } from "vue"
+
+const _default = defineComponent({
+    props: {
+        showPopover: Boolean,
+        placement: String as PropType<Placement>,
+        effect: String as PropType<PopperEffect>,
+        trigger: String as PropType<PopperTrigger>,
+        offset: Number,
+    },
+    setup(props, ctx) {
+
+        const [show] = useShadow(() => props.showPopover)
+
+        return () => {
+            if (!show.value) return h(ctx.slots?.default)
+            return (
+                <ElTooltip
+                    placement={props.placement}
+                    effect={props.effect}
+                    offset={props.offset}
+                    trigger={props.trigger}
+                    v-slots={ctx.slots}
+                />
+            )
+        }
+    }
+})
+
+export default _default