Semi

src/app/components/Report/common/CompositionTable.tsx → src/app/components/Report/CompositionTable.tsx

@@ -5,7 +5,7 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { computed, ComputedRef, defineComponent, PropType } from "vue"
+import { computed, defineComponent, PropType } from "vue"
 import { ElTable, ElTableColumn } from "element-plus"
 import { sum } from "@util/array"
 import { t } from "@app/locale"
@@ -34,13 +34,20 @@ function computeRows(data: timer.stat.RemoteCompositionVal[]): Row[] {
     return rows
 }
 
+const formatValue = (value: number, valueFormatter?: ValueFormatter) => {
+    if (valueFormatter) {
+        return valueFormatter(value)
+    }
+    return value?.toString?.()
+}
+
 const _default = defineComponent({
     props: {
         data: Array as PropType<timer.stat.RemoteCompositionVal[]>,
         valueFormatter: Function as PropType<ValueFormatter>,
     },
     setup(props) {
-        const rows: ComputedRef<Row[]> = computed(() => computeRows(props.data))
+        const rows = computed(() => computeRows(props.data))
         return () => (
             <div style={{ width: "400px" }}>
                 <ElTable data={rows.value} size="small" border>
@@ -52,7 +59,7 @@ const _default = defineComponent({
                     />
                     <ElTableColumn
                         label={VALUE}
-                        formatter={(r: Row) => props.valueFormatter?.(r.value)}
+                        formatter={(r: Row) => formatValue(r.value, props.valueFormatter)}
                         align="center"
                         width={150}
                     />

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

@@ -1,41 +1,45 @@
-import { Effect, ElDescriptions, ElDescriptionsItem, ElDivider, ElIcon, ElLink, ElTag, ElTooltip } from "element-plus"
-import { computed, defineComponent, PropType } from "vue"
+import { Effect, ElCheckbox, ElDivider, ElIcon, ElTag } from "element-plus"
+import { computed, defineComponent, PropType, ref, watch } 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 CompositionTable from "../CompositionTable"
 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>
-        )
-    }
-})
+import PopupConfirmButton from "@app/components/common/PopupConfirmButton"
+import { computeDeleteConfirmMsg, handleDelete } from "../common"
 
 const _default = defineComponent({
     props: {
         value: Object as PropType<timer.stat.Row>,
     },
+    emits: {
+        selectedChange: (_val: boolean) => true,
+        delete: (_val: timer.stat.Row) => true,
+    },
     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 || {}
+        const selected = ref(false)
+        watch(selected, val => ctx.emit('selectedChange', val))
+
+        const canDelete = computed(() => !filter.value?.mergeHost && !filter.value.readRemote)
+        const onDelete = async () => {
+            await handleDelete(props.value, filter.value)
+            ctx.emit('delete', props.value)
+        }
         return () => <>
             <div class="report-item">
-                <div class="report-item-title">
-                    <div>
+                <div class="report-item-head">
+                    <div class="report-item-title">
+                        <ElCheckbox
+                            v-show={canDelete.value}
+                            size="small"
+                            value={selected.value}
+                            onChange={val => selected.value = !!val}
+                        />
                         <TooltipWrapper
                             placement="bottom"
                             effect={Effect.LIGHT}
@@ -57,10 +61,13 @@ const _default = defineComponent({
                             />
                         </TooltipWrapper>
                     </div>
-                    <ElLink
-                        type="danger"
-                        icon={<Delete />}
-                        onClick={() => console.log()}
+                    <PopupConfirmButton
+                        buttonIcon={Delete}
+                        buttonType="danger"
+                        confirmText={computeDeleteConfirmMsg(props.value, filter.value)}
+                        visible={canDelete.value}
+                        onConfirm={onDelete}
+                        text
                     />
                 </div>
                 <ElDivider style={{ margin: "5px 0" }} />

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

@@ -1,41 +1,51 @@
-import { defineComponent } from "vue"
+import { computed, defineComponent, ref } from "vue"
 import Item from "./Item"
-import "./style"
 import { ElCard } from "element-plus"
 import { t } from "@app/locale"
-import { useState } from "@hooks/useState"
 import { DisplayComponent, useReportFilter } from "../context"
 import { useScrollRequest } from "@hooks/useScrollRequest"
-import { cvtOption2Param } from "../ReportFilter/common"
 import statService from "@service/stat-service"
+import { cvtOption2Param } from "../common"
+import "./style"
 
 const _default = defineComponent({
     setup(_, ctx) {
         const filterOption = useReportFilter()
+        const param = computed(() => cvtOption2Param(filterOption.value))
 
-        const { data, loading, loadMoreAsync, end } = useScrollRequest(async (num, size) => {
-            const param = cvtOption2Param(filterOption.value)
-            const pagination = await statService.selectByPage(param, { num, size })
-            return pagination.list
-        })
+        const { data, loading, loadMoreAsync, end, reset } = useScrollRequest(async (num, size) => {
+            const pagination = await statService.selectByPage(param.value, { num, size }, true)
+            return pagination?.list
+        }, { manual: true, resetDeps: param })
 
-        const [selected, setSelected] = useState<timer.stat.Row[]>([])
+        const selected = ref<number[]>([])
 
         ctx.expose({
-            getSelected: () => selected.value,
-            refresh: () => { },
+            getSelected: () => selected.value?.map(idx => data.value?.[idx])?.filter(i => !!i) ?? [],
+            refresh: reset,
         } satisfies DisplayComponent)
 
+        const handleSelectedChange = (val: boolean, idx: number) => {
+            const newSelected = selected.value?.filter(v => v !== idx) || []
+            val && newSelected.push(idx)
+            return selected.value = newSelected
+        }
+
         return () => <>
             <div class="report-list-wrapper">
                 <div
                     class="report-list"
                     v-infinite-scroll={loadMoreAsync}
                     infinite-scroll-disabled={end.value || loading.value}
                 >
-                    {data.value?.map(row => (
+                    {data.value?.map((row, idx) => (
                         <ElCard>
-                            <Item value={row} />
+                            <Item
+                                key={`row-${row.host}-${idx}`}
+                                value={row}
+                                onSelectedChange={val => handleSelectedChange(val, idx)}
+                                onDelete={() => reset()}
+                            />
                         </ElCard>
                     ))}
                 </div>

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

@@ -11,9 +11,17 @@
     text-align: center
     color: var(--el-text-color-regular)
 .report-item
-    .report-item-title
+    .report-item-head
         display: flex
         justify-content: space-between
+        .report-item-title
+            display: inline-flex
+            align-items: center
+            gap: 2px
+            .el-checkbox
+                height: 100%
+        >button
+            padding: 0
     .report-item-content
         display: flex
         gap: 5px

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

@@ -6,35 +6,38 @@
  */
 
 import { t } from "@app/locale"
-import { Effect, ElTableColumn, ElTooltip } from "element-plus"
+import { Effect, ElTableColumn } from "element-plus"
 import { defineComponent } from "vue"
 import { periodFormatter } from "@app/util/time"
-import CompositionTable from '../../common/CompositionTable'
+import CompositionTable from '../../CompositionTable'
 import { ElTableRowScope } from "@src/element-ui/table"
 import { useReportFilter } from "../../context"
+import TooltipWrapper from "@app/components/common/TooltipWrapper"
 
 const _default = defineComponent(() => {
     const filter = useReportFilter()
     const formatter = (focus: number): string => periodFormatter(focus, { format: filter.value?.timeFormat })
     return () => (
-        <ElTableColumn prop="focus" label={t(msg => msg.item.focus)} minWidth={130} align="center" sortable="custom">
-            {
-                ({ row }: ElTableRowScope<timer.stat.Row>) => {
-                    const valueStr = formatter(row.focus)
-                    return filter.value?.readRemote
-                        ? <ElTooltip
-                            placement="top"
-                            effect={Effect.LIGHT}
-                            offset={10}
-                            v-slots={{
-                                content: () => <CompositionTable valueFormatter={formatter} data={row.composition?.focus || []} />
-                            }}
-                        >
-                            {valueStr}
-                        </ElTooltip>
-                        : valueStr
-                }
-            }
+        <ElTableColumn
+            prop="focus"
+            label={t(msg => msg.item.focus)}
+            minWidth={130}
+            align="center"
+            sortable="custom"
+        >
+            {({ row }: ElTableRowScope<timer.stat.Row>) => (
+                <TooltipWrapper
+                    showPopover={filter.value?.readRemote}
+                    placement="top"
+                    effect={Effect.LIGHT}
+                    offset={10}
+                    v-slots={{
+                        content: () => <CompositionTable valueFormatter={formatter} data={row.composition?.focus || []} />
+                    }}
+                >
+                    {formatter(row.focus)}
+                </TooltipWrapper>
+            )}
         </ElTableColumn>
     )
 })

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

@@ -5,34 +5,44 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { ElTableColumn } from "element-plus"
+import { Effect, ElTableColumn } from "element-plus"
 import { defineComponent } from "vue"
 import { t } from "@app/locale"
 import HostAlert from "@app/components/common/HostAlert"
 import { isRemainHost } from "@util/constant/remain-host"
 import { ElTableRowScope } from "@src/element-ui/table"
 import { useReportFilter } from "../../context"
-import HostMergedAlert from "../../common/HostMergedAlert"
+import TooltipWrapper from "@app/components/common/TooltipWrapper"
 
 const columnLabel = t(msg => msg.item.host)
 
 const _default = defineComponent(() => {
     const filter = useReportFilter()
     return () => (
         <ElTableColumn prop="host" label={columnLabel} minWidth={210} sortable="custom" align="center">
-            {
-                ({ row }: ElTableRowScope<timer.stat.Row>) => filter.value?.mergeHost
-                    ? <HostMergedAlert mergedHost={row.host}>
-                        {row.mergedHosts.map(({ host, iconUrl }) =>
+            {({ row: { mergedHosts, host, iconUrl } }: ElTableRowScope<timer.stat.Row>) => (
+                <TooltipWrapper
+                    showPopover={filter.value?.mergeHost}
+                    effect={Effect.LIGHT}
+                    offset={10}
+                    placement="left"
+                    v-slots={{
+                        content: () => mergedHosts?.map(({ host, iconUrl }) =>
                             <p>
                                 <HostAlert host={host} iconUrl={iconUrl} clickable={!isRemainHost(host)} />
                             </p>
-                        )}
-                    </HostMergedAlert>
-                    : <div style={{ margin: 'auto', width: 'fit-content' }}>
-                        <HostAlert {...row} clickable={!isRemainHost(row.host)} />
+                        )
+                    }}
+                >
+                    <div style={{ margin: 'auto', width: 'fit-content' }}>
+                        <HostAlert
+                            host={host}
+                            iconUrl={iconUrl}
+                            clickable={!isRemainHost(host)}
+                        />
                     </div>
-            }
+                </TooltipWrapper>
+            )}
         </ElTableColumn>
     )
 })