Semi

sheepzh · Aug 22, 2024 · 4501d96 · 4501d96
1 parent fc9e1e5
commit 4501d96
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 49 deletions.
diff --git a/src/app/components/Analysis/components/Summary/index.tsx b/src/app/components/Analysis/components/Summary/index.tsx
@@ -46,37 +46,25 @@ const _default = defineComponent(() => {
 
     return () => (
         <KanbanCard title={t(msg => msg.analysis.summary.title)}>
-            <ElRow>
-                <ElCol span={12} style={{ borderRight: "1px var(--el-border-color) var(--el-border-style)" }}>
-                    <KanbanIndicatorRow style={{ borderBottom: "1px var(--el-border-color) var(--el-border-style)" }}>
-                        <ElCol span={12}>
-                            <Site />
-                        </ElCol>
-                        <ElCol span={12}>
-                            <KanbanIndicatorCell
-                                mainName={FOCUS_LABEL}
-                                mainValue={periodFormatter(summary.value?.focus, { format: timeFormat.value })}
-                            />
-                        </ElCol>
-                    </KanbanIndicatorRow>
-                    <KanbanIndicatorRow>
-                        <ElCol span={12}>
-                            <KanbanIndicatorCell
-                                mainName={DAYS_LABEL}
-                                mainValue={summary.value?.day?.toString?.() || '-'}
-                                subTips={msg => msg.analysis.summary.firstDay}
-                                subValue={summary.value?.firstDay ? `@${cvt2LocaleTime(summary.value?.firstDay)}` : ''}
-                            />
-                        </ElCol>
-                        <ElCol span={12}>
-                            <KanbanIndicatorCell mainName={VISIT_LABEL} mainValue={summary.value?.visit?.toString?.() || '-'} />
-                        </ElCol>
-                    </KanbanIndicatorRow>
-                </ElCol>
-                <ElCol span={12}>
+            <div class="analysis-summary-container">
+                <div class='indicator-area' style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, max(300px, 50%)), 1fr))' }}>
+                    <Site />
+                    <KanbanIndicatorCell
+                        mainName={FOCUS_LABEL}
+                        mainValue={periodFormatter(summary.value?.focus, { format: timeFormat.value })}
+                    />
+                    <KanbanIndicatorCell
+                        mainName={DAYS_LABEL}
+                        mainValue={summary.value?.day?.toString?.() || '-'}
+                        subTips={msg => msg.analysis.summary.firstDay}
+                        subValue={summary.value?.firstDay ? `@${cvt2LocaleTime(summary.value?.firstDay)}` : ''}
+                    />
+                    <KanbanIndicatorCell mainName={VISIT_LABEL} mainValue={summary.value?.visit?.toString?.() || '-'} />
+                </div>
+                <div>
                     <Calendar />
-                </ElCol>
-            </ElRow>
+                </div>
+            </div>
         </KanbanCard>
     )
 })

diff --git a/src/app/components/Analysis/components/Summary/summary.sass b/src/app/components/Analysis/components/Summary/summary.sass
@@ -1,20 +1,23 @@
-.kanban-indicator-row
-    .site-container
-        position: relative
-        top: 50%
-        transform: translateY(-50%)
-        text-align: center
-        padding: 0 25px
-        .site-alias
-            font-size: 26px
-            margin-block-start: 0.2em
-            margin-block-end: 0.5em
-        .site-host
-            font-size: 14px
-            color: var(--el-text-color-secondary)
-        .site-host,.site-alias
-            white-space: nowrap
-            overflow: hidden
-            text-overflow: ellipsis
+.analysis-summary-container
+    display: grid
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(500px, 50%)), 1fr))
+    .indicator-area
+        .site-container
+            position: relative
+            top: 50%
+            transform: translateY(-50%)
+            text-align: center
+            padding: 0 25px
+            .site-alias
+                font-size: 26px
+                margin-block-start: 0.2em
+                margin-block-end: 0.5em
+            .site-host
+                font-size: 14px
+                color: var(--el-text-color-secondary)
+            .site-host,.site-alias
+                white-space: nowrap
+                overflow: hidden
+                text-overflow: ellipsis
 .analysis-calendar-chart
     height: 280px
diff --git a/src/app/components/Report/ReportFilter/index.tsx b/src/app/components/Report/ReportFilter/index.tsx
@@ -22,7 +22,7 @@ import { useState } from "@hooks"
 import { ReportFilterOption } from "../context"
 import { exportCsv, exportJson } from "../file-export"
 import statService from "@service/stat-service"
-import { cvtOption2Param } from "./common"
+import { cvtOption2Param } from "../common"
 
 function datePickerShortcut(text: string, agoOfStart?: number, agoOfEnd?: number): ElementDatePickerShortcut {
     const value = daysAgo(agoOfStart || 0, agoOfEnd || 0)

diff --git a/src/app/components/common/kanban/indicator-cell.sass b/src/app/components/common/kanban/indicator-cell.sass
@@ -6,6 +6,7 @@
     padding-top: 10px
     padding-bottom: 10px
     padding-right: 20px
+    min-height: 140px
     .kanban-indicator-cell-name
         font-size: 14px
         color: var(--el-text-color-secondary)