fix: 优化布局以及bug修改
This commit is contained in:
王天骄
+29
-1
@@ -26,6 +26,8 @@ export interface UserListItem {
|
||||
trainingStage: string
|
||||
status: 0 | 1
|
||||
institutionId: string
|
||||
teachers: string
|
||||
students: string
|
||||
}
|
||||
|
||||
export interface UserListResult {
|
||||
@@ -142,6 +144,30 @@ function getString(record: Record<string, unknown>, keys: string[], fallback = '
|
||||
return fallback
|
||||
}
|
||||
|
||||
function formatRelationValue(value: unknown): string {
|
||||
if (Array.isArray(value)) {
|
||||
const items = value
|
||||
.map(item => formatRelationValue(item))
|
||||
.filter(item => item && item !== '-')
|
||||
return items.length ? items.join('、') : '-'
|
||||
}
|
||||
|
||||
if (value && typeof value === 'object') {
|
||||
const record = value as Record<string, unknown>
|
||||
return getString(record, ['real_name', 'realName', 'name', 'username', 'phone', 'mobile', 'id'], '-')
|
||||
}
|
||||
|
||||
if (typeof value === 'string' && value.trim()) {
|
||||
return value
|
||||
}
|
||||
|
||||
if (typeof value === 'number') {
|
||||
return String(value)
|
||||
}
|
||||
|
||||
return '-'
|
||||
}
|
||||
|
||||
function getBoolean(record: Record<string, unknown>, keys: string[], fallback = true): boolean {
|
||||
for (const key of keys) {
|
||||
const value = record[key]
|
||||
@@ -293,7 +319,9 @@ function normalizeUser(item: unknown, index: number): UserListItem {
|
||||
major: getString(record, ['major']),
|
||||
trainingStage: getString(record, ['training_stage', 'trainingStage']),
|
||||
status,
|
||||
institutionId
|
||||
institutionId,
|
||||
teachers: formatRelationValue(record.teachers),
|
||||
students: formatRelationValue(record.students)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+138
-17
@@ -24,12 +24,13 @@ html,
|
||||
body,
|
||||
#app {
|
||||
width: 100%;
|
||||
min-width: 1180px;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
color: var(--text);
|
||||
font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
|
||||
background: var(--bg);
|
||||
@@ -195,14 +196,18 @@ p {
|
||||
}
|
||||
|
||||
.admin-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 260px 1fr;
|
||||
--sidebar-width: 260px;
|
||||
--sidebar-bg: #13233a;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
background: var(--bg);
|
||||
transition: grid-template-columns 0.22s ease;
|
||||
|
||||
&.collapsed {
|
||||
grid-template-columns: 88px 1fr;
|
||||
--sidebar-width: 88px;
|
||||
|
||||
.brand-copy,
|
||||
.nav-section-title,
|
||||
@@ -261,14 +266,21 @@ p {
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: var(--sidebar-width);
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
overflow: hidden;
|
||||
color: #dbeafe;
|
||||
background: #13233a;
|
||||
background: var(--sidebar-bg);
|
||||
transition: width 0.22s ease;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
@@ -336,6 +348,7 @@ p {
|
||||
|
||||
.sidebar-scroll {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
@@ -389,6 +402,8 @@ p {
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
flex: 0 0 auto;
|
||||
margin-top: auto;
|
||||
padding: 16px;
|
||||
border-top: 1px solid rgb(255 255 255 / 10%);
|
||||
}
|
||||
@@ -397,7 +412,7 @@ p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.user-meta {
|
||||
@@ -420,7 +435,12 @@ p {
|
||||
}
|
||||
|
||||
.main-panel {
|
||||
width: 100%;
|
||||
width: calc(100% - var(--sidebar-width));
|
||||
min-width: 0;
|
||||
margin-left: var(--sidebar-width);
|
||||
overflow-x: hidden;
|
||||
transition: width 0.22s ease, margin-left 0.22s ease;
|
||||
}
|
||||
|
||||
.top-header {
|
||||
@@ -430,8 +450,10 @@ p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
height: 72px;
|
||||
padding: 0 24px;
|
||||
min-width: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: rgb(255 255 255 / 86%);
|
||||
backdrop-filter: blur(14px);
|
||||
@@ -448,31 +470,57 @@ p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
flex: 1 1 auto;
|
||||
|
||||
.el-breadcrumb {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.header-user {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
padding-left: 10px;
|
||||
border-left: 1px solid var(--border);
|
||||
|
||||
strong {
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
span {
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.content-area {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow-x: hidden;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.page-stack {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.hero-strip,
|
||||
@@ -640,12 +688,24 @@ p {
|
||||
|
||||
.chart-panel,
|
||||
.data-section {
|
||||
min-width: 0;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.data-section {
|
||||
overflow: hidden;
|
||||
|
||||
.el-table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.table-pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
@@ -793,8 +853,20 @@ p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
min-width: 0;
|
||||
padding: 20px;
|
||||
|
||||
> div:first-child {
|
||||
min-width: min(100%, 260px);
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
@@ -807,44 +879,55 @@ p {
|
||||
|
||||
.filter-bar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 1fr) 180px 180px 96px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
|
||||
> * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.el-button,
|
||||
.el-input,
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-user-filter {
|
||||
grid-template-columns: minmax(220px, 1fr) 150px 150px 130px 130px 96px 96px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
||||
}
|
||||
|
||||
.institution-filter {
|
||||
grid-template-columns: minmax(240px, 1fr) 150px 150px 150px 96px 96px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
}
|
||||
|
||||
.role-user-filter {
|
||||
grid-template-columns: minmax(260px, 1fr) 150px 150px 96px 96px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
}
|
||||
|
||||
.relation-filter {
|
||||
grid-template-columns: minmax(240px, 1fr) 140px 140px 130px 96px 96px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
||||
}
|
||||
|
||||
.case-filter {
|
||||
grid-template-columns: minmax(260px, 1fr) 160px 140px 150px 96px 96px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
}
|
||||
|
||||
.content-case-filter {
|
||||
grid-template-columns: minmax(220px, 1fr) 140px 130px 120px 120px 120px 140px 96px 96px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
}
|
||||
|
||||
.case-review-filter {
|
||||
grid-template-columns: minmax(260px, 1fr) 150px 96px 96px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
}
|
||||
|
||||
.training-record-filter {
|
||||
grid-template-columns: minmax(220px, 1fr) 110px 110px 140px 140px 140px 140px 260px 100px 100px 96px 96px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
}
|
||||
|
||||
.teacher-training-record-filter {
|
||||
grid-template-columns: minmax(220px, 1fr) 110px 110px 140px 140px 140px 260px 100px 100px 96px 96px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
}
|
||||
|
||||
.ranking-kpis {
|
||||
@@ -1147,6 +1230,15 @@ p {
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.login-page {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.login-visual {
|
||||
min-height: auto;
|
||||
padding: 48px 32px;
|
||||
}
|
||||
|
||||
.stats-grid,
|
||||
.institution-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -1163,6 +1255,35 @@ p {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.admin-shell,
|
||||
.admin-shell.collapsed {
|
||||
--sidebar-width: 0px;
|
||||
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.main-panel {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.top-header {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: min(470px, calc(100% - 32px));
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.overview-grid > .chart-panel,
|
||||
.overview-grid > .data-section,
|
||||
.overview-grid > .stats-grid,
|
||||
|
||||
@@ -56,6 +56,8 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="org" label="所属机构" min-width="180" />
|
||||
<el-table-column prop="teachers" label="所属医生" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="students" label="名下学生" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column label="性别" width="90">
|
||||
<template #default="{ row }">
|
||||
{{ genderLabel(row.gender) }}
|
||||
|
||||
Reference in New Issue
Block a user