fix: 优化布局以及bug修改

src/api/users.ts

@@ -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)
   }
 }
 

src/assets/styles/main.scss

@@ -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;
+  --sidebar-width: 260px;
-  grid-template-columns: 260px 1fr;
+  --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,

src/views/UsersView.vue

@@ -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) }}