Semi

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

@@ -0,0 +1,92 @@
+import { Effect, ElButton, ElDescriptions, ElDescriptionsItem, ElLink, ElTooltip } from "element-plus"
+import { 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"
+
+const _default = defineComponent({
+ props: {
+ value: Object as PropType<timer.stat.Row>,
+ },
+ setup(props, ctx) {
+ const filter = useReportFilter()
+ 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
+ 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>
+ </>
+ },
+})
+
+export default _default

src/app/components/Report/ReportCardList/index.tsx → src/app/components/Report/ReportList/index.tsx

@@ -1,6 +1,7 @@
 import { defineComponent, PropType } from "vue"
 import Item from "./Item"
 import "./style"
+import { ElCard } from "element-plus"
 
 const _default = defineComponent({
  props: {
@@ -10,9 +11,11 @@ const _default = defineComponent({
  setup(props, ctx) {
 
  return () => (
- <div class="report-card-list">
+ <div class="report-list">
  {props.data?.map(row => (
- <Item value={row} />
+ <ElCard>
+ <Item value={row} />
+ </ElCard>
  ))}
  </div>
  )

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

@@ -1,4 +1,4 @@
-.report-card-list
+.report-list
  width: 100%
  display: flex
  flex-direction: column

src/app/components/Report/ReportTable/columns/DateColumn.tsx

@@ -1,6 +1,6 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */

src/app/components/Report/ReportTable/columns/FocusColumn.tsx

@@ -9,7 +9,7 @@ import { t } from "@app/locale"
 import { Effect, ElTableColumn, ElTooltip } from "element-plus"
 import { defineComponent } from "vue"
 import { periodFormatter } from "@app/util/time"
-import CompositionTable from './CompositionTable'
+import CompositionTable from '../../common/CompositionTable'
 import { ElTableRowScope } from "@src/element-ui/table"
 import { useReportFilter } from "../../context"
 

src/app/components/Report/ReportTable/columns/HostColumn.tsx

@@ -29,7 +29,9 @@ const _default = defineComponent(() => {
  </p>
  )}
  </HostMergedAlert>
- : <HostAlert {...row} clickable={!isRemainHost(row.host)} />
+ : <div style={{ margin: 'auto', width: 'fit-content' }}>
+ <HostAlert {...row} clickable={!isRemainHost(row.host)} />
+ </div>
  }
  </ElTableColumn>
  )

src/app/components/Report/ReportTable/columns/TimeColumn.tsx

@@ -8,7 +8,7 @@
 import { defineComponent } from "vue"
 import { Effect, ElTableColumn, ElTooltip } from "element-plus"
 import { t } from "@app/locale"
-import CompositionTable from "./CompositionTable"
+import CompositionTable from "../../common/CompositionTable"
 import { useReportFilter } from "../../context"
 import { ElTableRowScope } from "@src/element-ui/table"
 

src/app/components/Report/index.tsx

@@ -13,7 +13,7 @@ import { I18nKey, t } from "@app/locale"
 import statService from "@service/stat-service"
 import './styles/element'
 import ReportTable, { TableInstance } from "./ReportTable"
-import ReportCardList from "./ReportCardList"
+import ReportList from "./ReportList"
 import ReportFilter from "./ReportFilter"
 import Pagination from "../common/Pagination"
 import ContentContainer from "../common/ContentContainer"
@@ -222,7 +222,7 @@ const _default = defineComponent(() => {
  ),
  default: () => isXs.value
  ? (
- <ReportCardList
+ <ReportList
  data={pagination.value?.list}
  />
  ) : (

src/app/components/common/HostAlert.tsx

@@ -37,7 +37,7 @@ const _default = defineComponent({
  ? <ElLink href={href.value} target={target.value} underline={props.clickable} style={{ cursor: cursor.value }}>
  {props.host}
  </ElLink>
- : <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '3px' }}>
+ : <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>

src/hooks/useMediaSize.ts

@@ -1,5 +1,5 @@
 import { useWindowSize } from "@vueuse/core"
-import { computed, ref } from "vue"
+import { computed } from "vue"
 
 export type MediaSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'