test/datacap
1
0
Fork 0
mirror of https://gitee.com/devlive-community/datacap.git synced 2024-11-30 02:57:37 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

refactor(page): refactor profile info

Browse Source
This commit is contained in:
qianmoQ 2024-11-03 12:03:34 +08:00
parent ce1401b8db
commit 04355d957e
2 changed files with 54 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
core/datacap-ui/src/views/pages/admin/user/profile/InfoHome.vue
View File

@ -1,21 +1,19 @@
<template>
<div class="w-full">
<div>
<h3 class="text-lg font-medium">{{ $t('user.common.info') }}</h3>
<p class="text-sm text-muted-foreground">{{ $t('user.tip.info') }}</p>
</div>
<Separator class="my-4"/>
<Card>
<CardHeader class="p-0">
<CardTitle class="pt-3 pl-3 pb-2">{{ $t('user.common.contribution') }}</CardTitle>
<Separator/>
<CardDescription class="pt-3 pl-3 pb-2 pr-2 min-w-full">{{ $t('user.tip.contribution') }}</CardDescription>
</CardHeader>
<CardContent class="pt-2">
<CircularLoading v-if="loading" :show="loading"/>
<CalendarHeatmap v-else :tooltip-unit="$t('heatmap.common.query')" :end-date="heatmap.endDate"
:round="50" :values="heatmap.data"
:locale="{
<ShadcnCard :border="false"
:title="$t('user.common.info')"
:description="$t('user.tip.info')">
<ShadcnRow :gutter="16">
<ShadcnCol :span="12">
<ShadcnCard only-content-loading
:title="$t('user.common.contribution')"
:description="$t('user.tip.contribution')"
:loading="loading">
<div class="p-2">
<CalendarHeatmap :tooltip-unit="$t('heatmap.common.query')"
:end-date="heatmap.endDate"
:round="10"
:values="heatmap.data"
:locale="{
months: [
$t('heatmap.common.jan'),
$t('heatmap.common.feb'),
@ -43,33 +41,29 @@
less : $t('heatmap.common.less'),
more : $t('heatmap.common.more')
}"/>
</CardContent>
</Card>
<div class="flex mt-2 space-x-4">
<Card class="w-1/2">
<CardHeader class="p-0">
<CardTitle class="pt-3 pl-3 pb-2">{{ $t('user.common.radar7Days') }}</CardTitle>
<Separator/>
<CardDescription class="pt-3 pl-3 pb-2 pr-2 min-w-full">{{ $t('user.tip.radar7Days') }}</CardDescription>
</CardHeader>
<CardContent class="pt-2">
<CircularLoading v-if="loading" :show="loading"/>
<VisualPie v-else-if="radar.configuration" :configuration="radar.configuration" :height="'200px'" :submitted="false"/>
</CardContent>
</Card>
</div>
</div>
</div>
</ShadcnCard>
</ShadcnCol>
<ShadcnCol :span="12">
<ShadcnCard only-content-loading
:title="$t('user.common.radar7Days')"
:description="$t('user.tip.radar7Days')"
:loading="loading">
<div class="p-2">
<VisualPie v-if="radar.configuration" :configuration="radar.configuration" :height="'200px'" :submitted="false"/>
</div>
</ShadcnCard>
</ShadcnCol>
</ShadcnRow>
</ShadcnCard>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Separator } from '@/components/ui/separator'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { CalendarHeatmap } from 'vue3-calendar-heatmap'
import './vue3-calendar-heatmap.css'
import { HttpUtils } from '@/utils/http'
import UserService from '@/services/user'
import CircularLoading from '@/views/components/loading/CircularLoading.vue'
import { Configuration } from '@/views/components/visual/Configuration'
import VisualPie from '@/views/components/visual/components/VisualPie.vue'
import { DateUtils } from '@/utils/date'
@ -78,9 +72,6 @@ export default defineComponent({
name: 'InfoHome',
components: {
VisualPie,
CircularLoading,
CardContent, CardDescription, CardHeader, Card, CardTitle,
Separator,
CalendarHeatmap
},
data()
@ -106,29 +97,29 @@ export default defineComponent({
this.loading = true
const axios = new HttpUtils().getAxios()
axios.all([UserService.getUserContribution(), UserService.getUserContributionRadar()])
.then(axios.spread((fetchContribution, fetchRadar) => {
if (fetchContribution.status) {
this.heatmap.data = fetchContribution.data
if (fetchContribution.data.length > 0) {
if (this.heatmap.data.length > 0) {
const item = this.heatmap.data[this.heatmap.data.length - 1] as any
this.heatmap.endDate = item.date
}
}
else {
const now = new Date()
this.heatmap.endDate = DateUtils.formatTime(now, 'YYYY-MM-DD')
}
}
if (fetchRadar.status) {
const configuration = new Configuration()
configuration.columns = fetchRadar.data
configuration.chartConfigure = {yAxis: 'count', xAxis: 'label', outerRadius: [1.2]}
this.radar.configuration = configuration
}
}))
.finally(() => this.loading = false)
.then(axios.spread((fetchContribution, fetchRadar) => {
if (fetchContribution.status) {
this.heatmap.data = fetchContribution.data
if (fetchContribution.data.length > 0) {
if (this.heatmap.data.length > 0) {
const item = this.heatmap.data[this.heatmap.data.length - 1] as any
this.heatmap.endDate = item.date
}
}
else {
const now = new Date()
this.heatmap.endDate = DateUtils.formatTime(now, 'YYYY-MM-DD')
}
}
if (fetchRadar.status) {
const configuration = new Configuration()
configuration.columns = fetchRadar.data
configuration.chartConfigure = { yAxis: 'count', xAxis: 'label', outerRadius: [1.2] }
this.radar.configuration = configuration
}
}))
.finally(() => this.loading = false)
}
}
});
})
</script>

2
core/datacap-ui/src/views/pages/admin/user/profile/vue3-calendar-heatmap.css
View File

@ -1 +1 @@
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.vch__container .vch__legend{display:flex;justify-content:space-between;align-items:center}.vch__container .vch__external-legend-wrapper{margin:0 8px}svg.vch__wrapper{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:10px;width:100%}svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label{font-size:8px}svg.vch__wrapper .vch__days__labels__wrapper text.vch__day__label,svg.vch__wrapper .vch__legend__wrapper text{font-size:8px}svg.vch__wrapper text.vch__month__label,svg.vch__wrapper text.vch__day__label,svg.vch__wrapper .vch__legend__wrapper text{fill:#767676}svg.vch__wrapper rect.vch__day__square:hover{stroke:#555;stroke-width:2px;paint-order:stroke}svg.vch__wrapper rect.vch__day__square:focus{outline:0}svg.vch__wrapper.dark-mode text.vch__month__label,svg.vch__wrapper.dark-mode text.vch__day__label,svg.vch__wrapper.dark-mode .vch__legend__wrapper text{fill:#fff}
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.vch__container .vch__legend{display:flex;justify-content:space-between;align-items:center;font-size:12px}.vch__container .vch__external-legend-wrapper{margin:0 8px}svg.vch__wrapper{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:10px;width:100%}svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label{font-size:6px}svg.vch__wrapper .vch__days__labels__wrapper text.vch__day__label,svg.vch__wrapper .vch__legend__wrapper text{font-size:6px}svg.vch__wrapper text.vch__month__label,svg.vch__wrapper text.vch__day__label,svg.vch__wrapper .vch__legend__wrapper text{fill:#767676}svg.vch__wrapper rect.vch__day__square:hover{stroke:#555;stroke-width:2px;paint-order:stroke}svg.vch__wrapper rect.vch__day__square:focus{outline:0}svg.vch__wrapper.dark-mode text.vch__month__label,svg.vch__wrapper.dark-mode text.vch__day__label,svg.vch__wrapper.dark-mode .vch__legend__wrapper text{fill:#fff}