mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-10-04 17:14:21 +00:00
refactor: 批量优化前端页面样式与组件交互
1. 统一调整表单组件label-width为100px，移除分页默认内边距 2. 新增表格按钮悬浮动效，优化弹窗抽屉样式与交互 3. 重构仪表盘页面，迁移旧演示组件到首页 4. 调整日志详情项排序与表单重置逻辑 5. 优化缓存监控图表样式与布局
This commit is contained in:
zhangtao
@@ -18,321 +18,6 @@
|
||||
<ElCol :xl="7" :lg="7" :xs="24"><VolumeServiceLevel /></ElCol>
|
||||
</ElRow>
|
||||
|
||||
<!-- 卡片组件演示区 ← workplace -->
|
||||
<div class="console-cards-showcase border-g-200 mt-4">
|
||||
<div class="py-5">
|
||||
<h2 class="page-title">统计卡片（文字）</h2>
|
||||
<ElRow :gutter="20">
|
||||
<ElCol
|
||||
v-for="card in statsCards"
|
||||
:key="`t-${card.id}`"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="6"
|
||||
class="mb-5"
|
||||
>
|
||||
<FaStatsCard
|
||||
:icon="card.icon"
|
||||
:iconStyle="card.iconStyle"
|
||||
:title="card.title"
|
||||
:description="card.description"
|
||||
:showArrow="card.showArrow"
|
||||
/>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
|
||||
<h2 class="page-title">统计卡片（数字滚动）</h2>
|
||||
<ElRow :gutter="20">
|
||||
<ElCol
|
||||
v-for="card in statsCards"
|
||||
:key="`n-${card.id}`"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="6"
|
||||
class="mb-5"
|
||||
>
|
||||
<FaStatsCard
|
||||
:icon="card.icon"
|
||||
:iconStyle="card.iconStyle"
|
||||
:title="card.title"
|
||||
:description="card.description"
|
||||
:count="card.count"
|
||||
:decimals="0"
|
||||
:showArrow="card.showArrow"
|
||||
separator=","
|
||||
/>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
|
||||
<h2 class="page-title">统计卡片（自定义样式）</h2>
|
||||
<ElRow :gutter="20">
|
||||
<ElCol
|
||||
v-for="card in statsCards"
|
||||
:key="`c-${card.id}`"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="6"
|
||||
class="mb-5"
|
||||
>
|
||||
<FaStatsCard
|
||||
:icon="card.icon"
|
||||
:iconStyle="card.customIconStyle"
|
||||
:boxStyle="card.boxStyle"
|
||||
:title="card.title"
|
||||
:description="card.description"
|
||||
:textColor="card.textColor"
|
||||
:showArrow="card.showArrow"
|
||||
/>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
|
||||
<h2 class="page-title">进度卡片</h2>
|
||||
<ElRow :gutter="20">
|
||||
<ElCol
|
||||
v-for="card in progressCards"
|
||||
:key="`p-${card.id}`"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="6"
|
||||
class="mb-5"
|
||||
>
|
||||
<FaProgressCard :percentage="card.percentage" :title="card.title" :color="card.color" />
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
|
||||
<h2 class="page-title">进度卡片（icon）</h2>
|
||||
<ElRow :gutter="20">
|
||||
<ElCol
|
||||
v-for="card in progressCards"
|
||||
:key="`pi-${card.id}`"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="6"
|
||||
class="mb-5"
|
||||
>
|
||||
<FaProgressCard
|
||||
:percentage="card.percentage"
|
||||
:title="card.title"
|
||||
:color="card.color"
|
||||
:icon="card.icon"
|
||||
:iconStyle="card.iconStyle"
|
||||
/>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
|
||||
<h2 class="page-title">图表卡片</h2>
|
||||
<ElRow :gutter="20">
|
||||
<ElCol :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaLineChartCard
|
||||
:isMiniChart="true"
|
||||
:value="2545"
|
||||
label="新用户"
|
||||
date="过去7天"
|
||||
:percentage="1.2"
|
||||
:height="9.5"
|
||||
:chartData="[120, 132, 101, 134, 90, 230, 210]"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaBarChartCard
|
||||
:isMiniChart="true"
|
||||
:value="15480"
|
||||
label="浏览量"
|
||||
date="过去14天"
|
||||
:percentage="-4.15"
|
||||
:height="9.5"
|
||||
barWidth="45%"
|
||||
:chartData="[120, 100, 150, 140, 90, 120, 130]"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaLineChartCard
|
||||
:isMiniChart="true"
|
||||
:value="2545"
|
||||
label="粉丝数"
|
||||
date="过去30天"
|
||||
:percentage="1.2"
|
||||
:height="9.5"
|
||||
:showAreaColor="true"
|
||||
:chartData="[150, 180, 160, 200, 180, 220, 240]"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaDonutChartCard
|
||||
:value="36358"
|
||||
title="粉丝量"
|
||||
:percentage="18"
|
||||
percentageLabel="较去年"
|
||||
:data="[50, 40]"
|
||||
:height="9.5"
|
||||
currentValue="2022"
|
||||
previousValue="2021"
|
||||
:radius="['50%', '70%']"
|
||||
/>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
|
||||
<h2 class="page-title">图表卡片（大）</h2>
|
||||
<ElRow :gutter="20">
|
||||
<ElCol :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaLineChartCard
|
||||
:value="2545"
|
||||
label="新用户"
|
||||
:percentage="1.2"
|
||||
:height="11"
|
||||
:chartData="[120, 132, 101, 134, 90, 230, 210]"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaBarChartCard
|
||||
:value="15480"
|
||||
label="浏览量"
|
||||
:percentage="-4.15"
|
||||
:height="11"
|
||||
:chartData="[120, 100, 150, 140, 90, 120, 130, 110]"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaLineChartCard
|
||||
:value="2545"
|
||||
label="粉丝数"
|
||||
:percentage="1.2"
|
||||
:height="11"
|
||||
:showAreaColor="true"
|
||||
:chartData="[150, 180, 160, 200, 180, 220, 240]"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaDonutChartCard
|
||||
:value="36358"
|
||||
title="粉丝量"
|
||||
:percentage="-18"
|
||||
percentageLabel="较2021年"
|
||||
:data="[70, 30]"
|
||||
:height="11"
|
||||
currentValue="12月"
|
||||
previousValue="11月"
|
||||
/>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
|
||||
<h2 class="page-title">数据列表卡片</h2>
|
||||
<ElRow :gutter="20">
|
||||
<ElCol :xs="24" :sm="12" :lg="8" class="mb-5">
|
||||
<FaDataListCard :list="dataList" title="待办事项" subtitle="今日待处理任务" />
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :lg="8" class="mb-5">
|
||||
<FaDataListCard
|
||||
:maxCount="4"
|
||||
:list="dataList"
|
||||
title="最近活动"
|
||||
subtitle="近期活动列表"
|
||||
:showMoreButton="true"
|
||||
@more="handleMore"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :lg="8" class="mb-5">
|
||||
<FaTimelineListCard :list="timelineData" title="最近交易" subtitle="2024年12月20日" />
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
|
||||
<h2 class="page-title">图片卡片</h2>
|
||||
<ElRow :gutter="20">
|
||||
<ElCol v-for="card in imageCards" :key="card.id" :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaImageCard
|
||||
:imageUrl="card.imageUrl"
|
||||
:title="card.title"
|
||||
:category="card.category"
|
||||
:readTime="card.readTime"
|
||||
:views="card.views"
|
||||
:comments="card.comments"
|
||||
:date="card.date"
|
||||
@click="handleImageCardClick(card)"
|
||||
/>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
|
||||
<h2 class="page-title">基础 & 自定义按钮+背景色</h2>
|
||||
<ElRow :gutter="20">
|
||||
<ElCol :xs="24" :sm="12" :md="12" class="mb-5">
|
||||
<FaBasicBanner
|
||||
title="数据中心运行状态"
|
||||
subtitle="系统访问量同比增长 23%，所有服务运行稳定，数据监控正常。"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="12" class="mb-5">
|
||||
<FaBasicBanner
|
||||
title="欢迎使用 Art Design Pro"
|
||||
subtitle="基于 Vue 3 + TypeScript + Element Plus 构建的现代化管理系统。"
|
||||
titleColor="#333"
|
||||
subtitleColor="#666"
|
||||
boxStyle="bg-[#D4F1F7]!"
|
||||
:buttonConfig="{
|
||||
show: true,
|
||||
text: '开始探索',
|
||||
color: 'var(--fa-success)',
|
||||
textColor: '#fff',
|
||||
radius: '6px',
|
||||
}"
|
||||
@buttonClick="handleBannerDemoClick"
|
||||
/>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
|
||||
<h2 class="page-title">卡片横幅</h2>
|
||||
<ElRow :gutter="20">
|
||||
<ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
|
||||
<FaCardBanner
|
||||
title="系统运行正常"
|
||||
description="所有核心服务运行稳定，响应时间在正常范围内。"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
|
||||
<FaCardBanner
|
||||
:image="bannerIcon2"
|
||||
title="重要消息通知"
|
||||
description="您有 3 条待处理的重要消息，请及时查看。"
|
||||
:button="{
|
||||
show: true,
|
||||
text: '查看详情',
|
||||
color: 'var(--fa-warning)',
|
||||
textColor: '#fff',
|
||||
}"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
|
||||
<FaCardBanner
|
||||
:image="bannerIcon3"
|
||||
title="数据分析报告"
|
||||
description="本周业务数据分析报告已完成，请查看关键指标。"
|
||||
:button="{
|
||||
show: true,
|
||||
text: '下载报告',
|
||||
color: 'var(--fa-error)',
|
||||
textColor: '#fff',
|
||||
}"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
|
||||
<FaCardBanner
|
||||
:image="bannerIcon4"
|
||||
title="版本更新提醒"
|
||||
description="Art Design Pro v2.1.0 已发布，包含性能优化和新功能。"
|
||||
:button="{
|
||||
show: true,
|
||||
text: '立即更新',
|
||||
color: 'var(--theme-color)',
|
||||
textColor: '#fff',
|
||||
}"
|
||||
:cancelButton="{ show: true, text: '稍后提醒', color: '#eee', textColor: '#333' }"
|
||||
@click="handleBannerDemoConfirm"
|
||||
@cancel="handleBannerDemoCancel"
|
||||
/>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图表演示区 -->
|
||||
<ElRow :gutter="20">
|
||||
<ElCol :xs="24" :md="12" :lg="8" class="mb-5">
|
||||
@@ -573,14 +258,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { LineDataItem } from "@/types/component/chart";
|
||||
import { ref } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import cover1 from "@imgs/cover/img1.webp";
|
||||
import cover2 from "@imgs/cover/img2.webp";
|
||||
import cover3 from "@imgs/cover/img3.webp";
|
||||
import cover4 from "@imgs/cover/img4.webp";
|
||||
import bannerIcon2 from "@imgs/3d/icon2.webp";
|
||||
import bannerIcon3 from "@imgs/3d/icon3.webp";
|
||||
import bannerIcon4 from "@imgs/3d/icon4.webp";
|
||||
|
||||
import TodaySales from "./modules/today-sales.vue";
|
||||
import VisitorInsights from "./modules/visitor-insights.vue";
|
||||
@@ -595,17 +272,6 @@ defineOptions({ name: "Analysis" });
|
||||
|
||||
const FaMapChart = defineAsyncComponent(() => import("@/components/charts/fa-map-chart/index.vue"));
|
||||
|
||||
// === 横幅组件演示 ===
|
||||
function handleBannerDemoClick() {
|
||||
console.log("banner clicked");
|
||||
}
|
||||
function handleBannerDemoConfirm() {
|
||||
console.log("confirm clicked");
|
||||
}
|
||||
function handleBannerDemoCancel() {
|
||||
console.log("cancel clicked");
|
||||
}
|
||||
|
||||
// === 图表演示数据 ===
|
||||
const multiLineData: LineDataItem[] = [
|
||||
{
|
||||
@@ -630,195 +296,6 @@ const stackBarData = ref([
|
||||
{ name: "Q2", data: [30, 35, 40, 45, 50], stack: "total" },
|
||||
]);
|
||||
const stackXAxisData = ref(["产品A", "产品B", "产品C", "产品D", "产品E"]);
|
||||
|
||||
// === 卡片演示数据 ← workplace ===
|
||||
const statsCards = [
|
||||
{
|
||||
id: 1,
|
||||
title: "销售产品",
|
||||
count: 1235,
|
||||
description: "鞋子、牛仔裤、派对服装、手表",
|
||||
icon: "ri:bar-chart-box-line",
|
||||
boxStyle: "bg-theme/10!",
|
||||
customIconStyle: "text-theme! text-3xl!",
|
||||
iconStyle: "bg-info",
|
||||
textColor: "var(--theme-color)",
|
||||
showArrow: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "活跃用户",
|
||||
count: 5000,
|
||||
description: "日活跃用户超过5,000+",
|
||||
icon: "ri:account-box-2-line",
|
||||
boxStyle: "bg-warning/10!",
|
||||
customIconStyle: "text-warning! text-3xl!",
|
||||
iconStyle: "bg-warning",
|
||||
textColor: "var(--fa-warning)",
|
||||
showArrow: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "总收入",
|
||||
count: 35000,
|
||||
description: "月收入超过¥350,000+",
|
||||
icon: "ri:money-cny-box-line",
|
||||
boxStyle: "bg-secondary/10!",
|
||||
customIconStyle: "text-secondary! text-3xl!",
|
||||
iconStyle: "bg-secondary",
|
||||
textColor: "var(--fa-secondary)",
|
||||
showArrow: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "客户评价",
|
||||
count: 4800,
|
||||
description: "平均评分4.8/5",
|
||||
icon: "ri:message-3-line",
|
||||
boxStyle: "bg-error/10!",
|
||||
customIconStyle: "text-error! text-3xl!",
|
||||
iconStyle: "bg-error",
|
||||
textColor: "var(--fa-error)",
|
||||
showArrow: false,
|
||||
},
|
||||
];
|
||||
const progressCards = [
|
||||
{
|
||||
id: 1,
|
||||
title: "完成进度",
|
||||
percentage: 75,
|
||||
color: "var(--fa-success)",
|
||||
icon: "ri:arrow-up-circle-line",
|
||||
iconStyle: "bg-success/12 text-success",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "项目进度",
|
||||
percentage: 65,
|
||||
color: "var(--theme-color)",
|
||||
icon: "ri:twitch-line",
|
||||
iconStyle: "bg-theme/12 text-theme",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "学习进度",
|
||||
percentage: 45,
|
||||
color: "var(--fa-error)",
|
||||
icon: "ri:game-line",
|
||||
iconStyle: "bg-error/12! text-error",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "任务进度",
|
||||
percentage: 90,
|
||||
color: "var(--fa-secondary)",
|
||||
icon: "ri:flag-2-line",
|
||||
iconStyle: "bg-secondary/12 text-secondary",
|
||||
},
|
||||
];
|
||||
const imageCards = [
|
||||
{
|
||||
id: 1,
|
||||
imageUrl: cover1,
|
||||
title: "AI技术在医疗领域的创新应用与发展前景",
|
||||
category: "社交",
|
||||
readTime: "2分钟",
|
||||
views: 9125,
|
||||
comments: 3,
|
||||
date: "12月19日 周一",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imageUrl: cover2,
|
||||
title: "大数据分析助力企业决策的实践案例",
|
||||
category: "技术",
|
||||
readTime: "3分钟",
|
||||
views: 7234,
|
||||
comments: 5,
|
||||
date: "12月20日 周二",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
imageUrl: cover3,
|
||||
title: "区块链技术在供应链管理中的应用",
|
||||
category: "科技",
|
||||
readTime: "4分钟",
|
||||
views: 5678,
|
||||
comments: 8,
|
||||
date: "12月21日 周三",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
imageUrl: cover4,
|
||||
title: "云计算技术发展趋势与未来展望",
|
||||
category: "云技术",
|
||||
readTime: "5分钟",
|
||||
views: 4321,
|
||||
comments: 6,
|
||||
date: "12月22日 周四",
|
||||
},
|
||||
];
|
||||
const dataList = [
|
||||
{
|
||||
title: "新加坡之行",
|
||||
status: "进行中",
|
||||
time: "5分钟",
|
||||
class: "bg-theme/12 text-theme",
|
||||
icon: "ri:camera-4-line",
|
||||
},
|
||||
{
|
||||
title: "归档数据",
|
||||
status: "进行中",
|
||||
time: "10分钟",
|
||||
class: "bg-secondary/12 text-secondary",
|
||||
icon: "ri:bar-chart-box-line",
|
||||
},
|
||||
{
|
||||
title: "客户会议",
|
||||
status: "待处理",
|
||||
time: "15分钟",
|
||||
class: "bg-warning/12 text-warning",
|
||||
icon: "ri:user-3-line",
|
||||
},
|
||||
{
|
||||
title: "筛选任务团队",
|
||||
status: "进行中",
|
||||
time: "20分钟",
|
||||
class: "bg-error/12 text-error",
|
||||
icon: "ri:account-circle-line",
|
||||
},
|
||||
{
|
||||
title: "发送信封给小王",
|
||||
status: "已完成",
|
||||
time: "20分钟",
|
||||
class: "bg-success/12 text-success",
|
||||
icon: "ri:message-3-line",
|
||||
},
|
||||
];
|
||||
const timelineData = [
|
||||
{
|
||||
time: "上午 09:30",
|
||||
status: "rgb(73, 190, 255)",
|
||||
content: "收到 John Doe 支付的 385.90 美元",
|
||||
},
|
||||
{ time: "上午 10:00", status: "rgb(54, 158, 255)", content: "新销售记录", code: "ML-3467" },
|
||||
{ time: "上午 12:00", status: "rgb(103, 232, 207)", content: "向 Michael 支付了 64.95 美元" },
|
||||
{ time: "下午 14:30", status: "rgb(255, 193, 7)", content: "系统维护通知", code: "MT-2023" },
|
||||
{
|
||||
time: "下午 15:45",
|
||||
status: "rgb(255, 105, 105)",
|
||||
content: "紧急订单取消提醒",
|
||||
code: "OR-9876",
|
||||
},
|
||||
{ time: "下午 17:00", status: "rgb(103, 232, 207)", content: "完成每日销售报表" },
|
||||
];
|
||||
|
||||
function handleMore() {
|
||||
ElMessage.info("查看更多");
|
||||
}
|
||||
function handleImageCardClick(card: (typeof imageCards)[0]) {
|
||||
console.log("点击卡片:", card);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,66 +1,88 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<FaGithubCorner class="github-corner" />
|
||||
|
||||
<!-- 问候 + 外链 -->
|
||||
<ElCard shadow="hover">
|
||||
<div class="flex flex-wrap items-center gap-y-3">
|
||||
<div class="flex min-w-0 flex-1 items-center">
|
||||
<div class="size-20 shrink-0 rounded-full bg-g-100 flex items-center justify-center">
|
||||
<ElAvatar
|
||||
v-if="userStore.basicInfo.avatar"
|
||||
size="large"
|
||||
:src="userStore.basicInfo.avatar"
|
||||
class="workplace-hero__avatar"
|
||||
/>
|
||||
<ElIcon v-else :size="40" class="text-g-600"><UserFilled /></ElIcon>
|
||||
</div>
|
||||
<div>
|
||||
<div class="workplace-hero__greeting">
|
||||
{{ timefix }}{{ currentUser.name }}，{{ welcome }}
|
||||
</div>
|
||||
<ElText class="workplace-hero__meta">
|
||||
<p class="text-sm text-g-600">
|
||||
{{ currentUser.username }} · {{ currentUser.dept_name }} ·
|
||||
{{ currentUser.description }}
|
||||
</p>
|
||||
</ElText>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden shrink-0 sm:block">
|
||||
<div class="flex items-center space-x-6">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center text-sm font-bold text-[#4080ff]">
|
||||
<ElIcon class="mr-0.5"><Document /></ElIcon>
|
||||
文档
|
||||
<!-- 卡片组件演示区 ← workplace -->
|
||||
<ElRow :gutter="20">
|
||||
<ElCol :xs="24" class="mb-5">
|
||||
<!-- 问候 + 外链 -->
|
||||
<ElCard shadow="hover">
|
||||
<div class="flex flex-wrap items-center gap-y-3">
|
||||
<div class="flex min-w-0 flex-1 items-center">
|
||||
<div class="size-20 shrink-0 rounded-full bg-g-100 flex items-center justify-center">
|
||||
<ElAvatar
|
||||
v-if="userStore.basicInfo.avatar"
|
||||
size="large"
|
||||
:src="userStore.basicInfo.avatar"
|
||||
class="workplace-hero__avatar"
|
||||
/>
|
||||
<ElIcon v-else :size="40" class="text-g-600"><UserFilled /></ElIcon>
|
||||
</div>
|
||||
<div class="mt-3 whitespace-nowrap">
|
||||
<ElLink
|
||||
href="https://blog.csdn.net/weixin_46768253/article/details/149569141"
|
||||
target="_blank"
|
||||
>
|
||||
<FaSvgIcon :icon="resolveIconForFaSvgIcon('csdn')" class="text-lg" />
|
||||
</ElLink>
|
||||
<div>
|
||||
<div class="workplace-hero__greeting">
|
||||
{{ timefix }}{{ currentUser.name }}，{{ welcome }}
|
||||
</div>
|
||||
<ElText class="workplace-hero__meta">
|
||||
<p class="text-sm text-g-600">
|
||||
{{ currentUser.username }} · {{ currentUser.dept_name }} ·
|
||||
{{ currentUser.description }}
|
||||
</p>
|
||||
</ElText>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center text-sm font-bold text-[#ff9a2e]">
|
||||
<ElIcon class="mr-0.5"><Folder /></ElIcon>
|
||||
仓库
|
||||
<div class="hidden shrink-0 sm:block">
|
||||
<div class="flex items-center space-x-6">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center text-sm font-bold text-[#4080ff]">
|
||||
<ElIcon class="mr-0.5"><Document /></ElIcon>
|
||||
文档
|
||||
</div>
|
||||
<div class="mt-3 whitespace-nowrap">
|
||||
<ElLink
|
||||
href="https://blog.csdn.net/weixin_46768253/article/details/149569141"
|
||||
target="_blank"
|
||||
>
|
||||
<FaSvgIcon :icon="resolveIconForFaSvgIcon('csdn')" class="text-lg" />
|
||||
</ElLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center text-sm font-bold text-[#ff9a2e]">
|
||||
<ElIcon class="mr-0.5"><Folder /></ElIcon>
|
||||
仓库
|
||||
</div>
|
||||
<div class="mt-3 whitespace-nowrap">
|
||||
<ElLink href="https://gitee.com/fastapiadmin/FastapiAdmin" target="_blank">
|
||||
<FaSvgIcon
|
||||
:icon="resolveIconForFaSvgIcon('gitee')"
|
||||
class="text-lg text-[#F76560]"
|
||||
/>
|
||||
</ElLink>
|
||||
<ElDivider direction="vertical" />
|
||||
<ElLink href="https://github.com/fastapiadmin/FastapiAdmin" target="_blank">
|
||||
<FaSvgIcon
|
||||
:icon="resolveIconForFaSvgIcon('github')"
|
||||
class="text-lg text-[#4080FF]"
|
||||
/>
|
||||
</ElLink>
|
||||
<ElDivider direction="vertical" />
|
||||
<ElLink href="https://gitcode.com/qq_36002987/FastapiAdmin" target="_blank">
|
||||
<FaSvgIcon
|
||||
:icon="resolveIconForFaSvgIcon('gitcode')"
|
||||
class="text-lg text-[#FF9A2E]"
|
||||
/>
|
||||
</ElLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 whitespace-nowrap">
|
||||
</div>
|
||||
<div class="w-full sm:hidden">
|
||||
<div class="flex justify-end space-x-4 overflow-x-auto">
|
||||
<ElLink href="https://gitee.com/fastapiadmin/FastapiAdmin" target="_blank">
|
||||
<FaSvgIcon
|
||||
:icon="resolveIconForFaSvgIcon('gitee')"
|
||||
class="text-lg text-[#F76560]"
|
||||
/>
|
||||
<FaSvgIcon :icon="resolveIconForFaSvgIcon('gitee')" class="text-lg text-[#F76560]" />
|
||||
</ElLink>
|
||||
<ElDivider direction="vertical" />
|
||||
<ElLink href="https://github.com/fastapiadmin/FastapiAdmin" target="_blank">
|
||||
<FaSvgIcon
|
||||
:icon="resolveIconForFaSvgIcon('github')"
|
||||
class="text-lg text-[#4080FF]"
|
||||
/>
|
||||
<FaSvgIcon :icon="resolveIconForFaSvgIcon('github')" class="text-lg text-[#4080FF]" />
|
||||
</ElLink>
|
||||
<ElDivider direction="vertical" />
|
||||
<ElLink href="https://gitcode.com/qq_36002987/FastapiAdmin" target="_blank">
|
||||
@@ -72,37 +94,39 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full sm:hidden">
|
||||
<div class="flex justify-end space-x-4 overflow-x-auto">
|
||||
<ElLink href="https://gitee.com/fastapiadmin/FastapiAdmin" target="_blank">
|
||||
<FaSvgIcon :icon="resolveIconForFaSvgIcon('gitee')" class="text-lg text-[#F76560]" />
|
||||
</ElLink>
|
||||
<ElDivider direction="vertical" />
|
||||
<ElLink href="https://github.com/fastapiadmin/FastapiAdmin" target="_blank">
|
||||
<FaSvgIcon :icon="resolveIconForFaSvgIcon('github')" class="text-lg text-[#4080FF]" />
|
||||
</ElLink>
|
||||
<ElDivider direction="vertical" />
|
||||
<ElLink href="https://gitcode.com/qq_36002987/FastapiAdmin" target="_blank">
|
||||
<FaSvgIcon
|
||||
:icon="resolveIconForFaSvgIcon('gitcode')"
|
||||
class="text-lg text-[#FF9A2E]"
|
||||
/>
|
||||
</ElLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ElCard>
|
||||
|
||||
<!-- CardList 概览统计（含在线用户/UV/PV/访问量等） -->
|
||||
<CardList />
|
||||
|
||||
<!-- 关于项目 + 我的收藏 -->
|
||||
<ElRow :gutter="16">
|
||||
<ElCol :xs="24" :span="12" class="flex flex-col">
|
||||
</ElCard>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="12" class="mb-5">
|
||||
<FaBasicBanner
|
||||
title="数据中心运行状态"
|
||||
subtitle="系统访问量同比增长 23%，所有服务运行稳定，数据监控正常。"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="12" class="mb-5">
|
||||
<FaBasicBanner
|
||||
title="欢迎使用 Fastapi Admin"
|
||||
subtitle="基于 Vue 3 + TypeScript + Element Plus 构建的现代化管理系统。"
|
||||
titleColor="#333"
|
||||
subtitleColor="#666"
|
||||
boxStyle="bg-[#D4F1F7]!"
|
||||
:buttonConfig="{
|
||||
show: true,
|
||||
text: '开始探索',
|
||||
color: 'var(--fa-success)',
|
||||
textColor: '#fff',
|
||||
radius: '6px',
|
||||
}"
|
||||
@buttonClick="handleBannerDemoClick"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" class="mb-5">
|
||||
<!-- CardList 概览统计（含在线用户/UV/PV/访问量等） -->
|
||||
<CardList />
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="12" class="mb-5">
|
||||
<AboutProject />
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :span="12" class="flex flex-col">
|
||||
<ElCol :xs="24" :sm="12" :md="12" class="mb-5">
|
||||
<ElCard shadow="hover" class="flex flex-col h-full">
|
||||
<template #header>
|
||||
<div class="workplace-bookmarks-card__header">
|
||||
@@ -203,11 +227,7 @@
|
||||
</ElEmpty>
|
||||
</ElCard>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
|
||||
<!-- 日程日历 + 最新动态 -->
|
||||
<ElRow :gutter="16">
|
||||
<ElCol :span="12" class="flex flex-col">
|
||||
<ElCol :xs="24" :sm="12" :md="12" class="mb-5">
|
||||
<ElCard shadow="hover" class="workplace-surface workplace-ops-card flex flex-col h-full">
|
||||
<template #header>
|
||||
<div class="workplace-section-card__head">
|
||||
@@ -224,7 +244,7 @@
|
||||
</div>
|
||||
</ElCard>
|
||||
</ElCol>
|
||||
<ElCol :span="12" class="flex flex-col">
|
||||
<ElCol :xs="24" :sm="12" :md="12" class="mb-5">
|
||||
<ElCard shadow="hover" class="h-full flex flex-col">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
@@ -275,6 +295,249 @@
|
||||
</ElScrollbar>
|
||||
</ElCard>
|
||||
</ElCol>
|
||||
<ElCol
|
||||
v-for="card in statsCards"
|
||||
:key="`t-${card.id}`"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="6"
|
||||
class="mb-5"
|
||||
>
|
||||
<FaStatsCard
|
||||
:icon="card.icon"
|
||||
:iconStyle="card.iconStyle"
|
||||
:title="card.title"
|
||||
:description="card.description"
|
||||
:showArrow="card.showArrow"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol
|
||||
v-for="card in statsCards"
|
||||
:key="`n-${card.id}`"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="6"
|
||||
class="mb-5"
|
||||
>
|
||||
<FaStatsCard
|
||||
:icon="card.icon"
|
||||
:iconStyle="card.iconStyle"
|
||||
:title="card.title"
|
||||
:description="card.description"
|
||||
:count="card.count"
|
||||
:decimals="0"
|
||||
:showArrow="card.showArrow"
|
||||
separator=","
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol
|
||||
v-for="card in statsCards"
|
||||
:key="`c-${card.id}`"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="6"
|
||||
class="mb-5"
|
||||
>
|
||||
<FaStatsCard
|
||||
:icon="card.icon"
|
||||
:iconStyle="card.customIconStyle"
|
||||
:boxStyle="card.boxStyle"
|
||||
:title="card.title"
|
||||
:description="card.description"
|
||||
:textColor="card.textColor"
|
||||
:showArrow="card.showArrow"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol
|
||||
v-for="card in progressCards"
|
||||
:key="`p-${card.id}`"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="6"
|
||||
class="mb-5"
|
||||
>
|
||||
<FaProgressCard :percentage="card.percentage" :title="card.title" :color="card.color" />
|
||||
</ElCol>
|
||||
<ElCol
|
||||
v-for="card in progressCards"
|
||||
:key="`pi-${card.id}`"
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="6"
|
||||
class="mb-5"
|
||||
>
|
||||
<FaProgressCard
|
||||
:percentage="card.percentage"
|
||||
:title="card.title"
|
||||
:color="card.color"
|
||||
:icon="card.icon"
|
||||
:iconStyle="card.iconStyle"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaLineChartCard
|
||||
:isMiniChart="true"
|
||||
:value="2545"
|
||||
label="新用户"
|
||||
date="过去7天"
|
||||
:percentage="1.2"
|
||||
:height="9.5"
|
||||
:chartData="[120, 132, 101, 134, 90, 230, 210]"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaBarChartCard
|
||||
:isMiniChart="true"
|
||||
:value="15480"
|
||||
label="浏览量"
|
||||
date="过去14天"
|
||||
:percentage="-4.15"
|
||||
:height="9.5"
|
||||
barWidth="45%"
|
||||
:chartData="[120, 100, 150, 140, 90, 120, 130]"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaLineChartCard
|
||||
:isMiniChart="true"
|
||||
:value="2545"
|
||||
label="粉丝数"
|
||||
date="过去30天"
|
||||
:percentage="1.2"
|
||||
:height="9.5"
|
||||
:showAreaColor="true"
|
||||
:chartData="[150, 180, 160, 200, 180, 220, 240]"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaDonutChartCard
|
||||
:value="36358"
|
||||
title="粉丝量"
|
||||
:percentage="18"
|
||||
percentageLabel="较去年"
|
||||
:data="[50, 40]"
|
||||
:height="9.5"
|
||||
currentValue="2022"
|
||||
previousValue="2021"
|
||||
:radius="['50%', '70%']"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaLineChartCard
|
||||
:value="2545"
|
||||
label="新用户"
|
||||
:percentage="1.2"
|
||||
:height="11"
|
||||
:chartData="[120, 132, 101, 134, 90, 230, 210]"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaBarChartCard
|
||||
:value="15480"
|
||||
label="浏览量"
|
||||
:percentage="-4.15"
|
||||
:height="11"
|
||||
:chartData="[120, 100, 150, 140, 90, 120, 130, 110]"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaLineChartCard
|
||||
:value="2545"
|
||||
label="粉丝数"
|
||||
:percentage="1.2"
|
||||
:height="11"
|
||||
:showAreaColor="true"
|
||||
:chartData="[150, 180, 160, 200, 180, 220, 240]"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaDonutChartCard
|
||||
:value="36358"
|
||||
title="粉丝量"
|
||||
:percentage="-18"
|
||||
percentageLabel="较2021年"
|
||||
:data="[70, 30]"
|
||||
:height="11"
|
||||
currentValue="12月"
|
||||
previousValue="11月"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :lg="8" class="mb-5">
|
||||
<FaDataListCard :list="dataList" title="待办事项" subtitle="今日待处理任务" />
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :lg="8" class="mb-5">
|
||||
<FaDataListCard
|
||||
:maxCount="4"
|
||||
:list="dataList"
|
||||
title="最近活动"
|
||||
subtitle="近期活动列表"
|
||||
:showMoreButton="true"
|
||||
@more="handleMore"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :lg="8" class="mb-5">
|
||||
<FaTimelineListCard :list="timelineData" title="最近交易" subtitle="2024年12月20日" />
|
||||
</ElCol>
|
||||
<ElCol v-for="card in imageCards" :key="card.id" :xs="24" :sm="12" :md="6" class="mb-5">
|
||||
<FaImageCard
|
||||
:imageUrl="card.imageUrl"
|
||||
:title="card.title"
|
||||
:category="card.category"
|
||||
:readTime="card.readTime"
|
||||
:views="card.views"
|
||||
:comments="card.comments"
|
||||
:date="card.date"
|
||||
@click="handleImageCardClick(card)"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
|
||||
<FaCardBanner
|
||||
title="系统运行正常"
|
||||
description="所有核心服务运行稳定，响应时间在正常范围内。"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
|
||||
<FaCardBanner
|
||||
:image="bannerIcon2"
|
||||
title="重要消息通知"
|
||||
description="您有 3 条待处理的重要消息，请及时查看。"
|
||||
:button="{
|
||||
show: true,
|
||||
text: '查看详情',
|
||||
color: 'var(--fa-warning)',
|
||||
textColor: '#fff',
|
||||
}"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
|
||||
<FaCardBanner
|
||||
:image="bannerIcon3"
|
||||
title="数据分析报告"
|
||||
description="本周业务数据分析报告已完成，请查看关键指标。"
|
||||
:button="{
|
||||
show: true,
|
||||
text: '下载报告',
|
||||
color: 'var(--fa-error)',
|
||||
textColor: '#fff',
|
||||
}"
|
||||
/>
|
||||
</ElCol>
|
||||
<ElCol :xs="24" :sm="12" :md="12" :lg="6" class="mb-5">
|
||||
<FaCardBanner
|
||||
:image="bannerIcon4"
|
||||
title="版本更新提醒"
|
||||
description="Art Design Pro v2.1.0 已发布，包含性能优化和新功能。"
|
||||
:button="{
|
||||
show: true,
|
||||
text: '立即更新',
|
||||
color: 'var(--theme-color)',
|
||||
textColor: '#fff',
|
||||
}"
|
||||
:cancelButton="{ show: true, text: '稍后提醒', color: '#eee', textColor: '#333' }"
|
||||
@click="handleBannerDemoConfirm"
|
||||
@cancel="handleBannerDemoCancel"
|
||||
/>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</div>
|
||||
</template>
|
||||
@@ -307,6 +570,23 @@ import {
|
||||
} from "@element-plus/icons-vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { dayjs } from "element-plus";
|
||||
import bannerIcon2 from "@imgs/3d/icon2.webp";
|
||||
import bannerIcon3 from "@imgs/3d/icon3.webp";
|
||||
import bannerIcon4 from "@imgs/3d/icon4.webp";
|
||||
import cover1 from "@imgs/cover/img1.webp";
|
||||
import cover2 from "@imgs/cover/img2.webp";
|
||||
import cover3 from "@imgs/cover/img3.webp";
|
||||
import cover4 from "@imgs/cover/img4.webp";
|
||||
import FaCardBanner from "@/components/banners/fa-card-banner/index.vue";
|
||||
import FaDonutChartCard from "@/components/cards/fa-donut-chart-card/index.vue";
|
||||
import FaImageCard from "@/components/cards/fa-image-card/index.vue";
|
||||
import FaDataListCard from "@/components/cards/fa-data-list-card/index.vue";
|
||||
import FaLineChartCard from "@/components/cards/fa-line-chart-card/index.vue";
|
||||
import FaStatsCard from "@/components/cards/fa-stats-card/index.vue";
|
||||
import FaProgressCard from "@/components/cards/fa-progress-card/index.vue";
|
||||
import FaBarChartCard from "@/components/cards/fa-bar-chart-card/index.vue";
|
||||
import FaTimelineListCard from "@/components/cards/fa-timeline-list-card/index.vue";
|
||||
import FaBasicBanner from "@/components/banners/fa-basic-banner/index.vue";
|
||||
|
||||
const timefix = greetings();
|
||||
const userStore = useUserStore();
|
||||
@@ -412,6 +692,205 @@ const clearBookmarks = async () => {
|
||||
const updateQuickLinks = (links: QuickLink[]) => {
|
||||
quickLinks.value = links;
|
||||
};
|
||||
|
||||
// === 横幅组件演示 ===
|
||||
function handleBannerDemoClick() {
|
||||
console.log("banner clicked");
|
||||
}
|
||||
function handleBannerDemoConfirm() {
|
||||
console.log("confirm clicked");
|
||||
}
|
||||
function handleBannerDemoCancel() {
|
||||
console.log("cancel clicked");
|
||||
}
|
||||
// === 卡片演示数据 ← workplace ===
|
||||
const statsCards = [
|
||||
{
|
||||
id: 1,
|
||||
title: "销售产品",
|
||||
count: 1235,
|
||||
description: "鞋子、牛仔裤、派对服装、手表",
|
||||
icon: "ri:bar-chart-box-line",
|
||||
boxStyle: "bg-theme/10!",
|
||||
customIconStyle: "text-theme! text-3xl!",
|
||||
iconStyle: "bg-info",
|
||||
textColor: "var(--theme-color)",
|
||||
showArrow: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "活跃用户",
|
||||
count: 5000,
|
||||
description: "日活跃用户超过5,000+",
|
||||
icon: "ri:account-box-2-line",
|
||||
boxStyle: "bg-warning/10!",
|
||||
customIconStyle: "text-warning! text-3xl!",
|
||||
iconStyle: "bg-warning",
|
||||
textColor: "var(--fa-warning)",
|
||||
showArrow: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "总收入",
|
||||
count: 35000,
|
||||
description: "月收入超过¥350,000+",
|
||||
icon: "ri:money-cny-box-line",
|
||||
boxStyle: "bg-secondary/10!",
|
||||
customIconStyle: "text-secondary! text-3xl!",
|
||||
iconStyle: "bg-secondary",
|
||||
textColor: "var(--fa-secondary)",
|
||||
showArrow: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "客户评价",
|
||||
count: 4800,
|
||||
description: "平均评分4.8/5",
|
||||
icon: "ri:message-3-line",
|
||||
boxStyle: "bg-error/10!",
|
||||
customIconStyle: "text-error! text-3xl!",
|
||||
iconStyle: "bg-error",
|
||||
textColor: "var(--fa-error)",
|
||||
showArrow: false,
|
||||
},
|
||||
];
|
||||
const progressCards = [
|
||||
{
|
||||
id: 1,
|
||||
title: "完成进度",
|
||||
percentage: 75,
|
||||
color: "var(--fa-success)",
|
||||
icon: "ri:arrow-up-circle-line",
|
||||
iconStyle: "bg-success/12 text-success",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "项目进度",
|
||||
percentage: 65,
|
||||
color: "var(--theme-color)",
|
||||
icon: "ri:twitch-line",
|
||||
iconStyle: "bg-theme/12 text-theme",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "学习进度",
|
||||
percentage: 45,
|
||||
color: "var(--fa-error)",
|
||||
icon: "ri:game-line",
|
||||
iconStyle: "bg-error/12! text-error",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "任务进度",
|
||||
percentage: 90,
|
||||
color: "var(--fa-secondary)",
|
||||
icon: "ri:flag-2-line",
|
||||
iconStyle: "bg-secondary/12 text-secondary",
|
||||
},
|
||||
];
|
||||
const imageCards = [
|
||||
{
|
||||
id: 1,
|
||||
imageUrl: cover1,
|
||||
title: "AI技术在医疗领域的创新应用与发展前景",
|
||||
category: "社交",
|
||||
readTime: "2分钟",
|
||||
views: 9125,
|
||||
comments: 3,
|
||||
date: "12月19日 周一",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imageUrl: cover2,
|
||||
title: "大数据分析助力企业决策的实践案例",
|
||||
category: "技术",
|
||||
readTime: "3分钟",
|
||||
views: 7234,
|
||||
comments: 5,
|
||||
date: "12月20日 周二",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
imageUrl: cover3,
|
||||
title: "区块链技术在供应链管理中的应用",
|
||||
category: "科技",
|
||||
readTime: "4分钟",
|
||||
views: 5678,
|
||||
comments: 8,
|
||||
date: "12月21日 周三",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
imageUrl: cover4,
|
||||
title: "云计算技术发展趋势与未来展望",
|
||||
category: "云技术",
|
||||
readTime: "5分钟",
|
||||
views: 4321,
|
||||
comments: 6,
|
||||
date: "12月22日 周四",
|
||||
},
|
||||
];
|
||||
const dataList = [
|
||||
{
|
||||
title: "新加坡之行",
|
||||
status: "进行中",
|
||||
time: "5分钟",
|
||||
class: "bg-theme/12 text-theme",
|
||||
icon: "ri:camera-4-line",
|
||||
},
|
||||
{
|
||||
title: "归档数据",
|
||||
status: "进行中",
|
||||
time: "10分钟",
|
||||
class: "bg-secondary/12 text-secondary",
|
||||
icon: "ri:bar-chart-box-line",
|
||||
},
|
||||
{
|
||||
title: "客户会议",
|
||||
status: "待处理",
|
||||
time: "15分钟",
|
||||
class: "bg-warning/12 text-warning",
|
||||
icon: "ri:user-3-line",
|
||||
},
|
||||
{
|
||||
title: "筛选任务团队",
|
||||
status: "进行中",
|
||||
time: "20分钟",
|
||||
class: "bg-error/12 text-error",
|
||||
icon: "ri:account-circle-line",
|
||||
},
|
||||
{
|
||||
title: "发送信封给小王",
|
||||
status: "已完成",
|
||||
time: "20分钟",
|
||||
class: "bg-success/12 text-success",
|
||||
icon: "ri:message-3-line",
|
||||
},
|
||||
];
|
||||
const timelineData = [
|
||||
{
|
||||
time: "上午 09:30",
|
||||
status: "rgb(73, 190, 255)",
|
||||
content: "收到 John Doe 支付的 385.90 美元",
|
||||
},
|
||||
{ time: "上午 10:00", status: "rgb(54, 158, 255)", content: "新销售记录", code: "ML-3467" },
|
||||
{ time: "上午 12:00", status: "rgb(103, 232, 207)", content: "向 Michael 支付了 64.95 美元" },
|
||||
{ time: "下午 14:30", status: "rgb(255, 193, 7)", content: "系统维护通知", code: "MT-2023" },
|
||||
{
|
||||
time: "下午 15:45",
|
||||
status: "rgb(255, 105, 105)",
|
||||
content: "紧急订单取消提醒",
|
||||
code: "OR-9876",
|
||||
},
|
||||
{ time: "下午 17:00", status: "rgb(103, 232, 207)", content: "完成每日销售报表" },
|
||||
];
|
||||
|
||||
function handleMore() {
|
||||
ElMessage.info("查看更多");
|
||||
}
|
||||
function handleImageCardClick(card: (typeof imageCards)[0]) {
|
||||
console.log("点击卡片:", card);
|
||||
}
|
||||
onMounted(() => {
|
||||
quickStartManager.addListener(updateQuickLinks);
|
||||
});
|
||||
|
||||
@@ -125,7 +125,7 @@
|
||||
:items="memoryDialogFormItems"
|
||||
:rules="rules"
|
||||
label-suffix=":"
|
||||
:label-width="'70px'"
|
||||
:label-width="100"
|
||||
label-position="right"
|
||||
:span="24"
|
||||
:gutter="16"
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
:items="demoDialogFormItems"
|
||||
:rules="rules"
|
||||
label-suffix=":"
|
||||
:label-width="'auto'"
|
||||
:label-width="100"
|
||||
label-position="right"
|
||||
:span="24"
|
||||
:gutter="16"
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
:items="demo01DialogFormItems"
|
||||
:rules="rules"
|
||||
label-suffix=":"
|
||||
:label-width="'auto'"
|
||||
:label-width="100"
|
||||
label-position="right"
|
||||
:span="24"
|
||||
:gutter="16"
|
||||
|
||||
+17
-5
@@ -409,11 +409,14 @@ const initCharts = () => {
|
||||
name: "命令",
|
||||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: [15, 95],
|
||||
center: ["50%", "38%"],
|
||||
radius: ["20%", "70%"],
|
||||
center: ["50%", "50%"],
|
||||
data: cache.value.command_stats || [],
|
||||
animationEasing: "cubicInOut",
|
||||
animationDuration: 1000,
|
||||
label: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
@@ -427,8 +430,12 @@ const initCharts = () => {
|
||||
type: "gauge",
|
||||
min: 0,
|
||||
max: 1000,
|
||||
detail: { formatter: usedMemory },
|
||||
radius: "70%",
|
||||
detail: { formatter: usedMemory, fontSize: 16 },
|
||||
data: [{ value: parseFloat(usedMemory) || 0, name: "内存消耗" }],
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
@@ -491,17 +498,22 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
height: 100%;
|
||||
|
||||
:deep(.el-card__body) {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
min-height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
// === 缓存管理三栏 ===
|
||||
|
||||
@@ -98,7 +98,7 @@
|
||||
<span class="font-medium">服务器基本信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<FaDescriptions :column="2" size="small" :scrollbar="false">
|
||||
<FaDescriptions :column="1" size="small" :scrollbar="false">
|
||||
<ElDescriptionsItem label="服务器名称">
|
||||
{{ server.sys?.computer_name || "-" }}
|
||||
</ElDescriptionsItem>
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
:items="deptDialogFormItems"
|
||||
:rules="rules"
|
||||
label-suffix=":"
|
||||
:label-width="'auto'"
|
||||
:label-width="100"
|
||||
label-position="right"
|
||||
:span="24"
|
||||
:gutter="16"
|
||||
|
||||
@@ -90,7 +90,7 @@
|
||||
:items="dictDataDialogFormItems"
|
||||
:rules="rules"
|
||||
label-suffix=":"
|
||||
:label-width="'auto'"
|
||||
:label-width="100"
|
||||
label-position="right"
|
||||
:span="24"
|
||||
:gutter="16"
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
:items="dictDialogFormItems"
|
||||
:rules="rules"
|
||||
label-suffix=":"
|
||||
:label-width="'auto'"
|
||||
:label-width="100"
|
||||
label-position="right"
|
||||
:span="24"
|
||||
:gutter="16"
|
||||
|
||||
@@ -350,18 +350,23 @@ const logExportContentConfig = computed(() => ({
|
||||
const formData = ref<LogTable>({});
|
||||
|
||||
const logDetailItems: import("@/components/others/fa-descriptions/index.vue").DescriptionsItem[] = [
|
||||
// 基础信息
|
||||
{ label: "日志类型", prop: "type", slot: "type" },
|
||||
{ label: "描述", prop: "description", span: 4 },
|
||||
// 请求信息
|
||||
{ label: "请求路径", prop: "request_path" },
|
||||
{ label: "请求方法", prop: "request_method", slot: "request_method" },
|
||||
{ label: "响应状态码", prop: "response_code", slot: "response_code" },
|
||||
{ label: "请求IP", prop: "request_ip" },
|
||||
{ label: "处理时间", prop: "process_time" },
|
||||
{ label: "登录地点", prop: "login_location" },
|
||||
{ label: "浏览器", prop: "request_browser" },
|
||||
{ label: "操作系统", prop: "request_os" },
|
||||
{ label: "请求参数", prop: "request_payload", slot: "request_payload", span: 4 },
|
||||
{ label: "响应数据", prop: "response_json", slot: "response_json", span: 4 },
|
||||
{ label: "登录地点", prop: "login_location" },
|
||||
{ label: "描述", prop: "description", span: 4 },
|
||||
// 响应信息
|
||||
{ label: "响应状态码", prop: "response_code", slot: "response_code" },
|
||||
{ label: "处理时间", prop: "process_time" },
|
||||
// 详细数据（各占一行）
|
||||
{ label: "请求参数", prop: "request_payload", slot: "request_payload", span: 8 },
|
||||
{ label: "响应数据", prop: "response_json", slot: "response_json", span: 8 },
|
||||
// 元信息
|
||||
{ label: "创建人", prop: "created_by.name" },
|
||||
{ label: "更新人", prop: "updated_by.name" },
|
||||
{ label: "创建时间", prop: "created_time" },
|
||||
@@ -416,7 +421,7 @@ function onResetSearch() {
|
||||
}
|
||||
|
||||
async function resetForm() {
|
||||
Object.assign(formData, {});
|
||||
Object.assign(formData.value, {});
|
||||
}
|
||||
|
||||
async function handleCloseDialog() {
|
||||
@@ -427,7 +432,7 @@ async function handleCloseDialog() {
|
||||
async function handleOpenDialog(id: number) {
|
||||
dialogVisible.title = "日志详情";
|
||||
const response = await LogAPI.detailLog(id);
|
||||
Object.assign(formData, response.data.data ?? {});
|
||||
Object.assign(formData.value, response.data.data ?? {});
|
||||
dialogVisible.visible = true;
|
||||
}
|
||||
|
||||
|
||||
@@ -112,7 +112,7 @@
|
||||
:items="menuDialogFormItems"
|
||||
:rules="rules"
|
||||
label-suffix=":"
|
||||
:label-width="'auto'"
|
||||
:label-width="100"
|
||||
label-position="right"
|
||||
:span="24"
|
||||
:gutter="16"
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
:items="positionDialogFormItems"
|
||||
:rules="rules"
|
||||
label-suffix=":"
|
||||
:label-width="'auto'"
|
||||
:label-width="100"
|
||||
label-position="right"
|
||||
:span="24"
|
||||
:gutter="16"
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
:items="roleDialogFormItems"
|
||||
:rules="rules"
|
||||
label-suffix=":"
|
||||
:label-width="'auto'"
|
||||
:label-width="100"
|
||||
label-position="right"
|
||||
:span="24"
|
||||
:gutter="16"
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
:items="tenantDialogFormItems"
|
||||
:rules="rules"
|
||||
label-suffix=":"
|
||||
:label-width="'auto'"
|
||||
:label-width="100"
|
||||
label-position="right"
|
||||
:span="24"
|
||||
:gutter="16"
|
||||
|
||||
@@ -140,7 +140,7 @@
|
||||
:items="userDialogFormItems"
|
||||
:rules="rules"
|
||||
label-suffix=":"
|
||||
:label-width="'auto'"
|
||||
:label-width="100"
|
||||
label-position="right"
|
||||
:span="24"
|
||||
:gutter="16"
|
||||
|
||||
Reference in New Issue
Block a user