mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-09-24 05:26:58 +00:00
feat: 添加高亮行与序号列,优化全屏及缓存布局
This commit is contained in:
@@ -14,6 +14,7 @@
|
||||
:stripe="false"
|
||||
:header-cell-style="{ background: 'transparent' }"
|
||||
>
|
||||
<ElTableColumn type="index" label="序号" width="60" />
|
||||
<ElTableColumn prop="name" label="产品名称" width="200" />
|
||||
<ElTableColumn prop="popularity" label="销量">
|
||||
<template #default="scope">
|
||||
|
||||
@@ -1082,6 +1082,11 @@ const currentUser = {
|
||||
.dashboard-container {
|
||||
position: relative;
|
||||
|
||||
:deep(.el-card) {
|
||||
--el-card-border-radius: calc(var(--custom-radius) + 2px);
|
||||
border: 1px solid var(--fa-card-border);
|
||||
}
|
||||
|
||||
.github-corner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<FaBasicBanner
|
||||
class="justify-center !h-53 mb-5 max-sm:!pt-8 max-sm:!h-48 max-sm:mb-4"
|
||||
:title="`欢迎回来 ${userInfo?.name}`"
|
||||
:title="`欢迎回来 ${userInfo?.username}`"
|
||||
boxStyle="!bg-theme/10"
|
||||
titleColor="var(--fa-gray-900)"
|
||||
:decoration="false"
|
||||
@@ -54,7 +54,7 @@ const userStore = useUserStore();
|
||||
/**
|
||||
* 获取当前用户信息
|
||||
*/
|
||||
const userInfo = computed(() => userStore.getUserInfo);
|
||||
const userInfo = computed(() => userStore.basicInfo);
|
||||
|
||||
/**
|
||||
* 处理横幅点击事件
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
:header-cell-style="{ background: 'transparent' }"
|
||||
>
|
||||
<template #default>
|
||||
<ElTableColumn type="index" label="序号" width="60" />
|
||||
<ElTableColumn label="产品" prop="product" width="220px">
|
||||
<template #default="scope">
|
||||
<div class="flex-c">
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
:header-cell-style="{ background: 'transparent' }"
|
||||
>
|
||||
<template #default>
|
||||
<ElTableColumn type="index" label="序号" width="60" />
|
||||
<ElTableColumn label="头像" prop="avatar" width="150px">
|
||||
<template #default="scope">
|
||||
<div style="display: flex; align-items: center">
|
||||
|
||||
+2
-2
@@ -125,7 +125,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 聊天输入区域 -->
|
||||
<div class="p-4">
|
||||
<div class="p-4 flex-shrink-0">
|
||||
<ElInput
|
||||
v-model="messageText"
|
||||
type="textarea"
|
||||
@@ -171,7 +171,7 @@ import avatar9 from "@imgs/avatar/avatar9.webp";
|
||||
import avatar10 from "@imgs/avatar/avatar10.webp";
|
||||
import { useAutoLayoutHeight } from "@/hooks/core/useLayoutHeight";
|
||||
|
||||
defineOptions({ name: "TemplateChat" });
|
||||
defineOptions({ name: "FastlinkFachat" });
|
||||
|
||||
const { containerMinHeight } = useAutoLayoutHeight();
|
||||
|
||||
@@ -381,6 +381,7 @@ const {
|
||||
page_size: 10,
|
||||
},
|
||||
columnsFactory: (): ColumnOption<DemoTable>[] => [
|
||||
{ type: "globalIndex", width: 56, label: "序号" },
|
||||
{ type: "selection", width: 48, fixed: "left" },
|
||||
{ prop: "id", label: "ID", width: 72 },
|
||||
{ prop: "name", label: "名称", minWidth: 120, showOverflowTooltip: true },
|
||||
|
||||
@@ -277,6 +277,7 @@ const {
|
||||
page_size: 10,
|
||||
},
|
||||
columnsFactory: (): ColumnOption<Demo01Table>[] => [
|
||||
{ type: "globalIndex", width: 56, label: "序号" },
|
||||
{ type: "selection", width: 48, fixed: "left" },
|
||||
{ prop: "name", label: "名称", minWidth: 120, showOverflowTooltip: true },
|
||||
{ prop: "uuid", label: "UUID", minWidth: 168, showOverflowTooltip: true },
|
||||
|
||||
+69
-8
@@ -145,7 +145,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<div class="cache-table-wrap">
|
||||
<ElTable :loading="loading" :data="cacheNames" row-key="cache_name" height="100%">
|
||||
<ElTable :loading="loading" :data="cacheNames" row-key="cache_name">
|
||||
<template #empty>
|
||||
<ElEmpty :image-size="80" description="暂无数据" />
|
||||
</template>
|
||||
@@ -219,7 +219,6 @@
|
||||
:loading="subLoading"
|
||||
:data="cacheKeys.map((key) => ({ cacheKey: key }))"
|
||||
row-key="cacheKey"
|
||||
height="100%"
|
||||
>
|
||||
<template #empty>
|
||||
<ElEmpty :image-size="80" description="暂无数据" />
|
||||
@@ -549,8 +548,32 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 让 el-tabs 填满父容器高度
|
||||
.fa-full-height {
|
||||
:deep(.el-tabs) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
> .el-tabs__content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
|
||||
> .el-tab-pane {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.monitor-tab {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
@@ -560,7 +583,6 @@ onUnmounted(() => {
|
||||
|
||||
.monitor-charts-row {
|
||||
flex: 1;
|
||||
align-items: stretch;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@@ -586,12 +608,11 @@ onUnmounted(() => {
|
||||
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
// === 缓存管理三栏 ===
|
||||
.cache-mgmt-tab {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
@@ -600,7 +621,6 @@ onUnmounted(() => {
|
||||
|
||||
.cache-mgmt-row {
|
||||
flex: 1;
|
||||
align-items: stretch;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@@ -631,13 +651,34 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.cache-table-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.el-table) {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
height: auto;
|
||||
|
||||
.el-table__inner-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-table__header-wrapper {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cache-form-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.el-form {
|
||||
display: flex;
|
||||
@@ -646,4 +687,24 @@ onUnmounted(() => {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 缓存内容 textarea 填满剩余空间,但不超过 60%
|
||||
.cache-value-item {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
max-height: 60%;
|
||||
|
||||
:deep(.el-form-item__content) {
|
||||
height: 100%;
|
||||
|
||||
.el-textarea {
|
||||
height: 100%;
|
||||
|
||||
textarea {
|
||||
height: 100% !important;
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -161,6 +161,7 @@ const {
|
||||
page_size: 10,
|
||||
},
|
||||
columnsFactory: (): ColumnOption<OnlineUserTable>[] => [
|
||||
{ type: "globalIndex", width: 56, label: "序号" },
|
||||
{
|
||||
prop: "session_id",
|
||||
label: "会话编号",
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
<!-- 更新日志(平台右上角头像下拉入口) -->
|
||||
<template>
|
||||
<div class="mx-auto pt-5 mb-5">
|
||||
<h3 class="text-2xl font-medium text-g-900 mb-8">更新日志</h3>
|
||||
|
||||
<div class="space-y-5">
|
||||
<div
|
||||
v-for="item in upgradeLogList"
|
||||
:key="item.version"
|
||||
class="fa-card-sm rounded-lg p-6 transition-shadow max-md:p-4"
|
||||
>
|
||||
<div class="flex-cb gap-3 mb-4 flex-wrap">
|
||||
<span class="px-3 py-1 bg-theme/10 text-theme text-sm font-medium rounded-full">
|
||||
{{ item.version }}
|
||||
</span>
|
||||
<span class="text-sm text-g-500">{{ item.date }}</span>
|
||||
</div>
|
||||
|
||||
<h4 class="text-lg font-medium text-g-900 mb-3">{{ item.title }}</h4>
|
||||
|
||||
<ul v-if="item.detail?.length" class="space-y-2 mb-4">
|
||||
<li
|
||||
v-for="(detail, index) in item.detail"
|
||||
:key="index"
|
||||
class="flex-c gap-2 text-sm text-g-600"
|
||||
>
|
||||
<span class="mt-0.5">•</span>
|
||||
<span class="text-g-700">{{ detail }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div v-if="item.remark" class="text-sm text-g-800 bg-g-300/60 rounded p-3 mb-3">
|
||||
{{ item.remark }}
|
||||
</div>
|
||||
|
||||
<ElTag v-if="item.requireReLogin" type="warning" size="small">需要重新登录</ElTag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { upgradeLogList } from "@/mock/upgrade/changeLog";
|
||||
|
||||
defineOptions({ name: "SystemChangeLog" });
|
||||
</script>
|
||||
@@ -336,6 +336,7 @@ const opCtx = {
|
||||
|
||||
const { columnChecks, columns } = useTableColumns<DeptTable>(() => [
|
||||
{ type: "selection", width: 48, fixed: "left" },
|
||||
{ type: "globalIndex", width: 56, label: "序号" },
|
||||
{ prop: "name", label: "部门名称", minWidth: 120, showOverflowTooltip: true },
|
||||
{ prop: "code", label: "部门编码", minWidth: 120, showOverflowTooltip: true },
|
||||
{
|
||||
|
||||
@@ -446,6 +446,7 @@ const {
|
||||
},
|
||||
columnsFactory: (): ColumnOption<DictDataTable>[] => [
|
||||
{ type: "selection", width: 48, fixed: "left" },
|
||||
{ type: "globalIndex", width: 56, label: "序号" },
|
||||
{ prop: "dict_label", label: "标签", minWidth: 150, showOverflowTooltip: true },
|
||||
{
|
||||
prop: "status",
|
||||
|
||||
@@ -283,6 +283,7 @@ const {
|
||||
},
|
||||
columnsFactory: (): ColumnOption<DictTable>[] => [
|
||||
{ type: "selection", width: 48, fixed: "left" },
|
||||
{ type: "globalIndex", width: 56, label: "序号" },
|
||||
{ prop: "dict_name", label: "字典名称", minWidth: 140, showOverflowTooltip: true },
|
||||
{
|
||||
prop: "dict_type",
|
||||
|
||||
@@ -289,6 +289,7 @@ const {
|
||||
},
|
||||
columnsFactory: (): ColumnOption<LogTable>[] => [
|
||||
{ type: "selection", width: 48, fixed: "left" },
|
||||
{ type: "globalIndex", width: 56, label: "序号" },
|
||||
{
|
||||
prop: "type",
|
||||
label: "日志类型",
|
||||
|
||||
@@ -345,6 +345,7 @@ const {
|
||||
},
|
||||
columnsFactory: (): ColumnOption<NoticeTable>[] => [
|
||||
{ type: "selection", width: 48, fixed: "left" },
|
||||
{ type: "globalIndex", width: 56, label: "序号" },
|
||||
{ prop: "notice_title", label: "通知标题", minWidth: 140, showOverflowTooltip: true },
|
||||
{
|
||||
prop: "status",
|
||||
|
||||
@@ -294,6 +294,7 @@ const {
|
||||
},
|
||||
columnsFactory: (): ColumnOption<ConfigTable>[] => [
|
||||
{ type: "selection", width: 48, fixed: "left" },
|
||||
{ type: "globalIndex", width: 56, label: "序号" },
|
||||
{ prop: "config_name", label: "配置名称", minWidth: 120, showOverflowTooltip: true },
|
||||
{ prop: "config_key", label: "配置键", minWidth: 200, showOverflowTooltip: true },
|
||||
{ prop: "config_value", label: "配置值", minWidth: 200, showOverflowTooltip: true },
|
||||
|
||||
@@ -452,6 +452,7 @@ const {
|
||||
},
|
||||
columnsFactory: (): ColumnOption<PositionTable>[] => [
|
||||
{ type: "selection", width: 48, fixed: "left" },
|
||||
{ type: "globalIndex", width: 56, label: "序号" },
|
||||
{ prop: "name", label: "岗位名称", minWidth: 100, showOverflowTooltip: true },
|
||||
{
|
||||
prop: "status",
|
||||
|
||||
@@ -459,6 +459,7 @@ const {
|
||||
},
|
||||
columnsFactory: (): ColumnOption<RoleTable>[] => [
|
||||
{ type: "selection", width: 48, fixed: "left" },
|
||||
{ type: "globalIndex", width: 56, label: "序号" },
|
||||
{ prop: "name", label: "角色名称", minWidth: 100, showOverflowTooltip: true },
|
||||
{ prop: "code", label: "角色编码", minWidth: 100, showOverflowTooltip: true },
|
||||
{
|
||||
|
||||
@@ -411,6 +411,7 @@ const {
|
||||
},
|
||||
columnsFactory: (): ColumnOption<TenantTable>[] => [
|
||||
{ type: "selection", width: 48, fixed: "left" },
|
||||
{ type: "globalIndex", width: 56, label: "序号" },
|
||||
{ prop: "name", label: "租户名称", minWidth: 140, showOverflowTooltip: true },
|
||||
{ prop: "code", label: "租户编码", minWidth: 120, showOverflowTooltip: true },
|
||||
{
|
||||
|
||||
@@ -616,6 +616,7 @@ const {
|
||||
},
|
||||
columnsFactory: (): import("@/types/component").ColumnOption<UserInfo>[] => [
|
||||
{ type: "selection", width: 48, fixed: "left" },
|
||||
{ type: "globalIndex", width: 56, label: "序号" },
|
||||
{
|
||||
prop: "avatar",
|
||||
label: "头像",
|
||||
|
||||
Reference in New Issue
Block a user