public/FastapiAdmin
1
0
Fork 0
mirror of https://github.com/fastapiadmin/FastapiAdmin.git synced 2026-10-01 00:05:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

发布v2.0.0分支

Browse Source
This commit is contained in:
zhangtao
2025-07-13 19:31:23 +08:00
parent 4150a39713
commit 6a8ca3becc
342 changed files with 39441 additions and 14737 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/dashboard/analysis.vue
+554 -645
View File
File diff suppressed because it is too large Load Diff
frontend/src/views/dashboard/workplace.vue
+374 -257
View File
@@ -1,200 +1,341 @@
<template>
<div class="container">
<div class="page-header-content" style="display: flex; justify-content: space-between; padding-bottom: 20px;">
<a-row align="middle">
<a-col class="avatar">
<a-avatar v-if="userInfo.avatar" :src="userInfo.avatar" :size="75" />
<a-avatar v-else :size="75">
<template #icon><UserOutlined /></template>
</a-avatar>
</a-col>
<a-col class="content" style="margin-left: 20px;">
<div class="content-title"
style="font-size: 20px; font-weight: 500; margin-bottom: 12px;">
{{ timefix }}, {{ userInfo.name }}<span class="welcome-text">, {{ welcome }}</span>
</div>
</a-col>
</a-row>
<a-row class="extra-content" justify="space-around">
<a-col class="stat-item">
<a-statistic title="项目数" :value="56" />
</a-col>
<a-col class="stat-item">
<a-statistic title="团队内排名" :value="8" suffix="/ 24" />
</a-col>
<a-col class="stat-item">
<a-statistic title="项目访问" :value="2223" />
</a-col>
</a-row>
</div>
<div class="app-container">
<div>
<a-row :gutter="24">
<a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
<a-card title="进行中的项目">
<template #extra>
<a>全部项目</a>
</template>
<a-card-grid :key="i" v-for="(item, i) in projectItems" style="width: 33.33%;">
<a-skeleton :loading="loading">
<a-card-meta>
<template #title>
<a-avatar :size="30" :src="item.avatar" />
<a class="a-hover" style="margin-left: 10px; ">{{ item.title }}</a>
</template>
<template #description>
<div style="min-height: 45px;">{{ item.description }}</div>
</template>
</a-card-meta>
<div class="project-item">
<a class="a-hover" >{{ item.author }}</a>
<span class="item-datetime">{{ item.datetime }}</span>
</div>
</a-skeleton>
</a-card-grid>
</a-card>
<a-card title="动态" :bodyStyle="{ padding: '10px' }" style="margin-top: 20px;">
<a-list item-layout="horizontal" :data-source="activities">
<template #renderItem="{ item }">
<a-list-item>
<a-skeleton :loading="loading" active avatar>
<a-list-item-meta>
<template #avatar>
<a-avatar :src="item.avatar" />
</template>
<template #title>
<a class="a-hover">{{ item.username }}</a>
<span>
在
<a>{{ item.project }}</a>
{{ item.action }}
<a>{{ item.event }}</a>
</span>
</template>
<template #description>
<span class="item-datetime">几秒前</span>
</template>
</a-list-item-meta>
</a-skeleton>
</a-list-item>
</template>
</a-list>
</a-card>
</a-col>
<a-col :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
<a-card title="快速开始 / 便捷导航" :bodyStyle="{ padding: '20px 0 8px 24px' }">
<a-button type="primary" size="small" ghost>
<template #icon>
<PlusOutlined />
</template>
添加
</a-button>
</a-card>
<a-card title="XX 指数" style="margin-top: 20px;">
<a-skeleton :loading="loading">
<v-chart class="chart" :option="chartOptions" autoresize />
</a-skeleton>
</a-card>
<a-card title="团队" :bodyStyle="{ padding: '10px' }" style="margin-top: 20px;">
<a-skeleton :loading="loading">
<div class="members">
<a-row>
<a-col :span="12" v-for="(item, index) in teams" :key="index" style="padding-left: 10px">
<a>
<a-avatar size="small" :src="item.avatar" />
<span class="member">{{ item.name }}</span>
</a>
</a-col>
</a-row>
<ElCard shadow="hover">
<div class="flex flex-wrap justify-between items-center">
<div class="flex items-center md:mb-0">
<ElAvatar size="large" :src="currentUser.avatar" class="mr-20px" />
<div>
<div class="text-20px font-bold">
{{ timefix }}{{ currentUser.name }}，{{ welcome }}
</div>
</a-skeleton>
</a-card>
</a-col>
</a-row>
<el-text>
{{ currentUser.username }} | {{ currentUser.dept_name }} | {{ currentUser.description }}
</el-text>
</div>
</div>
<!-- 最近登录时间 -->
<div class="statItem text-14px text-gray-600 text-right">
<el-text>最近登录时间</el-text>
<div class="mt-5px text-20px">{{ currentUser.last_login }}</div>
</div>
</div>
</ElCard>
</div>
<div class="mt-4">
<ElRow :gutter="16" justify="space-between">
<!-- 左侧：进行中的项目 + 动态 -->
<ElCol :xl="16" :lg="16" :md="24" :sm="24" :xs="24">
<!-- 进行中的项目 -->
<ElCard shadow="hover" title="进行中的项目">
<template #header>
<span class="font-bold">进行中的项目</span>
<ElLink href="" type="primary" underline="never" style="float: right">全部项目</ElLink>
</template>
<ElRow>
<ElCol v-for="item in projectNotice" :key="`card-${item.id}`" :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
<ElCard :key="item.id" shadow="hover">
<ElDescriptions :column="1">
<ElDescriptionsItem>
<div class="flex items-center">
<ElAvatar :src="item.avatar" size="small" class="mr-20px" />
<ElLink :href="item.href" underline="never">{{ item.title }}</ElLink>
</div>
</ElDescriptionsItem>
<ElDescriptionsItem>
<el-tooltip placement="top" :content="item.description">
<el-text line-clamp=1 class="truncate-text">{{ item.description }}</el-text>
</el-tooltip>
</ElDescriptionsItem>
<ElDescriptionsItem>
<div class="flex justify-between items-center">
<ElLink :href="item.memberLink" underline="never">{{ item.member || "" }}</ElLink>
<span>{{ item.updatedAt }}</span>
</div>
</ElDescriptionsItem>
</ElDescriptions>
</ElCard>
</ElCol>
</ElRow>
</ElCard>
<!-- 动态 -->
<ElCard shadow="hover" title="动态" class="mt-4">
<template #header>
<span class="font-bold">动态</span>
<ElLink href="" type="primary" underline="never" style="float: right">更多</ElLink>
</template>
<ElTimeline>
<ElTimelineItem v-for="item in activities" :key="item.id">
<div class="flex justify-between items-center">
<div class="flex items-center">
<ElAvatar :src="item.user.avatar" size="small" class="mr-20px">{{ item.user?.name }}</ElAvatar>
<span>{{ item.template1 }}</span>
<span>&nbsp;</span>
<ElLink :href="item.group?.link" type="primary" underline="never">{{ item?.group?.name }}</ElLink>
<span>&nbsp;</span>
<span>{{ item.template2 }}</span>
<span>&nbsp;</span>
<ElLink :href="item.project?.link" type="primary" underline="never">{{ item?.project?.name }}
</ElLink>
</div>
<span>{{ item.updatedAt }}</span>
</div>
</ElTimelineItem>
</ElTimeline>
</ElCard>
</ElCol>
<!-- 右侧：快速开始 / 便捷导航 + XX 指数 + 团队 -->
<ElCol :xl="8" :lg="8" :md="12" :sm="12" :xs="24">
<!-- 快速开始 / 便捷导航 -->
<ElCard class="mb-4 font-bold">
<template #header>
<span class="font-bold">快速开始 / 便捷导航</span>
<ElButton size="small" type="primary" plain style="float: right">
<el-icon>
<Plus />
</el-icon> {{ t('common.add') }}
</ElButton>
</template>
<div class="linkGroup">
<ElLink v-for="(item, index) in links" :key="index" underline="never" :href="item.href">
{{ item.title }}
</ElLink>
</div>
</ElCard>
<!-- XX 指数 -->
<ElCard class="mb-4 font-bold" header="XX 指数">
<ECharts class="chart" :options="chartOptions" height="450px" autoresize :init-options="{ renderer: 'canvas' }" />
</ElCard>
<!-- 团队 -->
<ElCard class="mb-4 font-bold" header="团队">
<div class="members">
<ElRow :gutter="48">
<ElCol v-for="item in projectNotice" :key="`members-item-${item.id}`" :span="12">
<ElLink underline="never" :href="item.href">
<ElAvatar :src="item.avatar" size="small" />
<span class="member">{{ item.member }}</span>
</ElLink>
</ElCol>
</ElRow>
</div>
</ElCard>
</ElCol>
</ElRow>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { timeFix } from '@/utils/util';
import { PlusOutlined, UserOutlined } from '@ant-design/icons-vue';
<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import { EChartsOption } from 'echarts'
import { useUserStore } from "@/store/index";
import { greetings } from '@/utils/common';
const { t } = useI18n();
const userStore = useUserStore();
const timefix = greetings();
const loading = ref(true);
let timefix = timeFix();
const userInfo = userStore.basicInfo;
defineOptions({
name: "DashBoard",
});
const welcome = '祝你开心每一天！';
const projectItems = [
{ title: 'Ant Design Vue', avatar: 'https://aliyuncdn.antdv.com/favicon.ico', description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆', author: '中二少女团', datetime: '几秒前' },
{ title: 'Ant Design Pro', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', description: '那时候我只会想自己想要什么，从不想自己拥有什么', author: '程序员日常', datetime: '7年前' },
{ title: 'Fastapi', avatar: 'https://fastapi.tiangolo.com/img/favicon.png', description: '那是一种内在的东西，他们到达不了，也无法触及的', author: '科学搬砖组', datetime: '几秒前' },
{ title: 'Vite', avatar: 'https://vitejs.dev/logo.svg', description: '生命就像一盒巧克力，结果往往出人意料', author: '骗你来学计算机', datetime: '7年前' },
{ title: 'Vue', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', description: '希望是一个好东西，也许是最好的，好东西是不会消亡的', author: '全组都是吴彦祖', datetime: '几秒前' },
{ title: 'Python', avatar: 'https://python.p2hp.com/static/favicon.ico', description: '人生苦短，我用Python', author: '高逼格语言天团', datetime: '7年前' }
]
const currentUser = {
avatar: userStore.basicInfo.avatar || "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
name: userStore.basicInfo.name || "吴彦祖",
username: userStore.basicInfo.username || "账号信息",
description: userStore.basicInfo.description || "用户说明",
dept_name: userStore.basicInfo.dept_name || "软件专业部",
last_login: userStore.basicInfo.last_login || "2023-01-01 00:00:00",
};
const projectNotice = [
{
id: "xxx1",
title: "Mysql",
avatar: "https://labs.mysql.com/common/themes/sakila/favicon.ico",
description: "最流行的关系型数据库",
updatedAt: "几秒前",
member: "科学搬砖组",
href: "https://www.mysql.com/",
memberLink: "",
},
{
id: "xxx2",
title: "Fastapi",
avatar: "https://fastapi.tiangolo.com/img/favicon.png",
description: "一个现代、快速(高性能)的 web 框架",
updatedAt: "6 年前",
member: "全组都是吴彦祖",
href: "https://fastapi.tiangolo.com/zh/",
memberLink: "",
},
{
id: "xxx3",
title: "Element-plus",
avatar: "https://element-plus.org/images/element-plus-logo-small.svg",
description: "面向设计师和开发者的组件库",
updatedAt: "几秒前",
member: "中二少女团",
href: "https://element-plus.org/zh-CN/",
memberLink: "",
},
{
id: "xxx4",
title: "Vue",
avatar: "https://cn.vuejs.org/logo.svg",
description: "渐进式 JavaScript 框架",
updatedAt: "6 年前",
member: "程序员日常",
href: "https://cn.vuejs.org/",
memberLink: "",
},
{
id: "xxx5",
title: "Vite",
avatar: "https://vitejs.cn/vite3-cn/logo.svg",
description: "Vite 下一代的前端工具链",
updatedAt: "6 年前",
member: "高逼格设计天团",
href: "https://cn.vitejs.dev/",
memberLink: "",
},
{
id: "xxx6",
title: "Python",
avatar: "https://python.p2hp.com/static/favicon.ico",
description: "一种解释型、面向对象类型编程语言",
updatedAt: "6 年前",
member: "骗你来学计算机",
href: "",
memberLink: "",
},
];
const activities = [
{
username: '曲丽丽',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
project: '高逼格设计天团',
action: '新建项目',
event: '六月迭代'
id: "trend-1",
updatedAt: "几秒前",
user: {
name: "曲丽丽",
avatar:
"https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
},
group: {
name: "高逼格设计天团",
link: "http://github.com/",
},
project: {
name: "六月迭代",
link: "http://github.com/",
},
template1: "在",
template2: "新建项目",
},
{
username: '付小小',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
project: '高逼格设计天团',
action: '更新项目',
event: '六月迭代'
id: "trend-2",
updatedAt: "几分钟前",
user: {
name: "付小小",
avatar:
"https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png",
},
group: {
name: "高逼格设计天团",
link: "http://github.com/",
},
project: {
name: "六月迭代",
link: "http://github.com/",
},
template1: "在",
template2: "新建项目",
},
{
username: '林东东',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',
project: '中二少女团',
action: '新建项目',
event: '六月迭代'
id: "trend-3",
updatedAt: "10 分钟前",
user: {
name: "林东东",
avatar:
"https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png",
},
group: {
name: "中二少女团",
link: "http://github.com/",
},
project: {
name: "六月迭代",
link: "http://github.com/",
},
template1: "在",
template2: "新建项目",
},
{
username: '周星星',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',
project: '白鹭酱油开发组',
action: '更新项目',
event: '番组计划'
id: "trend-4",
updatedAt: "1小时前",
user: {
name: "周星星",
avatar:
"https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png",
},
group: {
name: "5 月日常迭代",
link: "http://github.com/",
},
template1: "将",
template2: "更新至已发布状态",
},
{
username: '朱偏右',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',
project: '工程效能',
action: '发布了',
event: '留言'
}
// ,{
// username: '乐哥',
// avatar: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
// project: '程序员日常',
// action: '新建项目',
// event: '品牌迭代'
// }
id: "trend-5",
updatedAt: "1周前",
user: {
name: "朱偏右",
avatar:
"https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png",
},
group: {
name: "工程效能",
link: "http://github.com/",
},
project: {
name: "留言",
link: "http://github.com/",
},
template1: "在",
template2: "发布了",
},
{
id: "trend-6",
updatedAt: "1个月前",
user: {
name: "乐哥",
avatar:
"https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png",
},
group: {
name: "程序员日常",
link: "http://github.com/",
},
project: {
name: "品牌迭代",
link: "http://github.com/",
},
template1: "在",
template2: "新建项目",
},
];
const chartOptions = {
tooltip: {
trigger: 'item'
},
legend: {
icon: 'path://M773.12 870.4c-163.84 0-225.28-184.32-276.48-343.04C440.32 363.52 399.36 256 312.32 256 225.28 256 179.2 256 102.4 558.08c-5.12 25.6-35.84 46.08-61.44 35.84-25.6-5.12-46.08-35.84-35.84-61.44C76.8 230.4 143.36 153.6 312.32 153.6c163.84 0 225.28 184.32 276.48 343.04 56.32 163.84 97.28 271.36 184.32 271.36 40.96 0 117.76 0 143.36-174.08 5.12-25.6 30.72-46.08 56.32-40.96 25.6 5.12 46.08 30.72 40.96 56.32-20.48 174.08-102.4 261.12-240.64 261.12z',
data: ['个人', '团队', '部门'],
bottom: 10,
itemHeight: 7,
},
const chartOptions = reactive<EChartsOption>({
tooltip: { trigger: 'item' },
legend: { data: ['个人', '团队', '部门'] },
radar: {
shape: 'circle',
indicator: [
@@ -205,110 +346,86 @@ const chartOptions = {
{ name: '口碑', max: 10 }
]
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
areaStyle: {},
symbol: 'none',
emphasis: {
focus: 'self'
},
data: [
{
value: [10, 7, 5, 4, 8],
name: '个人'
},
{
value: [3, 1, 3, 6, 9],
name: '团队'
},
{
value: [4, 7, 5, 6, 1],
name: '部门'
}
]
}
]
}
series: [{
name: 'Budget vs spending',
type: 'radar',
areaStyle: {},
symbol: 'none',
emphasis: { focus: 'self' },
data: [
{ value: [10, 7, 5, 4, 8], name: '个人' },
{ value: [3, 1, 3, 6, 9], name: '团队' },
{ value: [4, 7, 5, 6, 1], name: '部门' }
]
}]
});
const teams = [
{ avatar: 'https://aliyuncdn.antdv.com/favicon.ico', name: '中二少女团' },
{ avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', name: '程序员日常' },
{ avatar: 'https://fastapi.tiangolo.com/img/favicon.png', name: '科学搬砖组' },
{ avatar: 'https://vitejs.dev/logo.svg', name: '骗你来学计算机' },
{ avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', name: '全组都是吴彦祖' },
{ avatar: 'https://python.p2hp.com/static/favicon.ico', name: '高逼格语言天团' }
]
const links = [
{
title: "操作一",
href: "",
},
{
title: "操作二",
href: "",
},
{
title: "操作三",
href: "",
},
{
title: "操作四",
href: "",
},
{
title: "操作五",
href: "",
},
{
title: "操作六",
href: "",
},
];
setTimeout(() => {
loading.value = false;
}, 500);
</script>
<style lang="scss" scoped>
.stat-item:not(:last-child)::after {
position: absolute;
top: 8px;
right: 0;
width: 1px;
height: 45px;
content: '';
}
.stat-item {
padding: 0 25px;
}
.project-item {
margin-top: 10px;
font-size: 12px;
display: flex;
gap: 8px;
}
.item-datetime {
float: right;
}
.a-hover:hover {
color: #1890ff !important;
}
:deep(.ant-list-item-meta-content) {
h4 {
font-size: 14px;
font-weight: normal;
}
}
.chart {
width: 450px;
height: 350px;
}
.members {
a {
display: block;
margin: 12px 0;
line-height: 24px;
height: 24px;
margin: 8px 0;
transition: all 0.3s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.member {
margin-left: 8px;
font-size: 14px;
line-height: 24px;
max-width: 100px;
vertical-align: top;
margin-left: 12px;
transition: all 0.3s;
display: inline-block;
}
&:hover {
span {
color: #1890ff;
}
color: #1890ff;
}
}
}
</style>
.linkGroup {
padding: 20px 0 8px 24px;
font-size: 0;
&>a {
display: inline-block;
width: 25%;
margin-bottom: 13px;
font-size: 14px;
&:hover {
color: #1890ff;
}
}
}
</style>