mirror of https://github.com/certd/certd
chore: 1
xiaojunnuo
parent
ceb4b76cdb
commit
8cc2b64066
|
|
@ -18,6 +18,7 @@ export interface UserInfoRes {
|
|||
id: string | number;
|
||||
username: string;
|
||||
nickName: string;
|
||||
avatar: string;
|
||||
roleIds: number[];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -64,6 +64,10 @@ h1, h2, h3, h4, h5, h6 {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.flex-inline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
|
|
@ -84,7 +88,16 @@ h1, h2, h3, h4, h5, h6 {
|
|||
.m-3{
|
||||
margin:3px
|
||||
}
|
||||
.m-5{
|
||||
margin:5px
|
||||
}
|
||||
.m-10 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.m-20{
|
||||
margin:20px
|
||||
}
|
||||
.mb-2 {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
|
@ -136,9 +149,6 @@ h1, h2, h3, h4, h5, h6 {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.m-10 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.p-5 {
|
||||
padding: 5px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div class="dashboard-user">
|
||||
<div class="header-profile">
|
||||
<div class="avatar">
|
||||
<a-avatar size="large" :src="userStore?.userInfo?.avatar"></a-avatar>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div>您好，{{ userStore?.userInfo?.nickName || userStore?.userInfo?.username }}</div>
|
||||
<div>
|
||||
<a-tag color="green" class="flex-inline"> <fs-icon icon="ion:time-outline" class="mr-5"></fs-icon> {{ now }}</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="statistic-data m-20">
|
||||
<a-row gutter="20">
|
||||
<a-col span="6">
|
||||
<statistic-card title="流水线数量"></statistic-card>
|
||||
</a-col>
|
||||
<a-col span="6">
|
||||
<statistic-card title="授权数量"></statistic-card>
|
||||
</a-col>
|
||||
<a-col span="6">
|
||||
<statistic-card title="下次触发时间"></statistic-card>
|
||||
</a-col>
|
||||
<a-col span="6">
|
||||
<statistic-card title="下次证书更新时间"></statistic-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { FsIcon } from "@fast-crud/fast-crud";
|
||||
|
||||
defineOptions({
|
||||
name: "DashboardUser"
|
||||
});
|
||||
import { useUserStore } from "/@/store/modules/user";
|
||||
import { computed, ref } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import StatisticCard from "/@/views/framework/home/dashboard/statistic-card.vue";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const now = computed(() => {
|
||||
return dayjs().format("YYYY-MM-DD HH:mm:ss");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.dashboard-user {
|
||||
.header-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
.avatar {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<template>
|
||||
<div class="statistic-card">
|
||||
<a-card>
|
||||
<div class="data-item">
|
||||
<div class="header">
|
||||
<div class="title">{{ title }}</div>
|
||||
<div class="more"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="statistic">
|
||||
<div class="value">80</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="icon-text"><fs-icon icon="ion:settings-outline" /> 管理流水线</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { FsIcon } from "@fast-crud/fast-crud";
|
||||
const props = defineProps<{
|
||||
title: string;
|
||||
}>();
|
||||
</script>
|
||||
<style lang="less">
|
||||
.statistic-card {
|
||||
.icon-text {
|
||||
display: inline-flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
.fs-icon {
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.data-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
//padding-bottom: 10px;
|
||||
color: #8077a4;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100px;
|
||||
.statistic {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.value {
|
||||
font-size: 50px;
|
||||
font-weight: 700;
|
||||
color: #2c254e;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
color: #8077a4;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
border-color: #e8e8e8;
|
||||
border-style: dashed;
|
||||
border-width: 1px 0 0;
|
||||
padding-top: 15px;
|
||||
> * {
|
||||
cursor: pointer;
|
||||
}
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +1,16 @@
|
|||
<template>
|
||||
<fs-page class="home—index">
|
||||
<page-content />
|
||||
<!-- <page-content />-->
|
||||
<dashboard-user />
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import PageContent from "./content/index.vue";
|
||||
export default defineComponent({
|
||||
components: { PageContent },
|
||||
setup() {}
|
||||
});
|
||||
<script lang="ts" setup>
|
||||
// import PageContent from "./content/index.vue";
|
||||
import DashboardUser from "./dashboard/index.vue";
|
||||
</script>
|
||||
<style lang="less"></style>
|
||||
<style lang="less">
|
||||
.home—index {
|
||||
background-color: #eee;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue