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