zhouchengcheng/ctms
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

修复桌面端界面显示与稳定性问题

Browse Source
This commit is contained in:
Cheng Zhou
2026-07-09 13:53:01 +08:00
parent 0aceb1fd74
commit fd4208d06f
38 changed files with 136 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/DesktopPreferences.vue
+2 -3
View File
@@ -807,9 +807,8 @@ onBeforeUnmount(() => {
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
width: 100%;
/* height 让组件有确定高度，配合 dialog body 的 flex:1 撑满容器
* 若 dialog 比 700px 高，组件会通过 flex:1 继续撑大 */
height: min(700px, calc(100vh - 96px));
height: 700px;
max-height: calc(100vh - 96px);
overflow: hidden;
background: var(--pref-bg-pane);
border-radius: 8px;
frontend/src/views/DesktopProjectEntry.vue
+13 -24
View File
@@ -6,7 +6,7 @@
<aside class="entry-sidebar" data-tauri-drag-region>
<div class="sidebar-top">
<div class="sidebar-brand">
<div class="brand-mark"><span>CTMS</span></div>
<img class="brand-mark" src="/icons/ctms-icon-192.png" alt="" aria-hidden="true" />
<div class="brand-text">
<span class="brand-kicker">Desktop Workbench</span>
<h1>工作台总控</h1>
@@ -131,7 +131,7 @@
<!-- 空状态 -->
<div v-else class="empty-project-workspace">
<div class="empty-icon-capsule"><span>CTMS</span></div>
<img class="empty-icon-capsule" src="/icons/ctms-icon-192.png" alt="" aria-hidden="true" />
<h3>未检测到可用项目</h3>
<p>您的账号尚未关联至任何研究项目，请联系系统管理员进行项目授权与分配。</p>
</div>
@@ -141,7 +141,7 @@
<div class="transition-overlay" :class="{ active: isTransitioning }" aria-hidden="true">
<div class="overlay-glow"></div>
<div class="overlay-spinner">
<span class="spinner-brand">CTMS</span>
<img class="spinner-brand" src="/icons/ctms-icon-192.png" alt="" />
<div class="spinner-ring"></div>
</div>
</div>
@@ -293,19 +293,13 @@ onMounted(() => {
}
.brand-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid rgba(59, 130, 246, 0.1);
border-radius: 10px;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: #ffffff;
font-size: 13.5px;
font-weight: 900;
letter-spacing: 0.05em;
background: #ffffff;
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
object-fit: contain;
}
.brand-text h1 {
@@ -809,18 +803,13 @@ onMounted(() => {
}
.empty-icon-capsule {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 8px;
background: #eff6ff;
color: #2563eb;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.05em;
background: #ffffff;
margin-bottom: 12px;
object-fit: contain;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}
.empty-project-workspace h3 {
@@ -1064,11 +1053,11 @@ onMounted(() => {
}
.spinner-brand {
color: #ffffff;
font-size: 15px;
font-weight: 900;
letter-spacing: 0.1em;
text-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
width: 42px;
height: 42px;
border-radius: 10px;
object-fit: contain;
box-shadow: 0 0 20px rgba(59, 130, 246, 0.24);
animation: pulseBrand 1.4s ease-in-out infinite alternate;
}
frontend/src/views/DesktopSessionRestore.vue
+4 -8
View File
@@ -1,7 +1,7 @@
<template>
<div class="desktop-session-restore" data-tauri-drag-region>
<section class="restore-panel">
<div class="restore-mark">CTMS</div>
<img class="restore-mark" src="/icons/ctms-icon-192.png" alt="" aria-hidden="true" />
<div class="restore-copy">
<span class="restore-eyebrow">Desktop Session</span>
<h1>正在恢复登录状态</h1>
@@ -134,14 +134,10 @@ onBeforeUnmount(() => {
.restore-mark {
width: 64px;
height: 64px;
display: grid;
place-items: center;
border-radius: 16px;
background: #15344f;
color: #ffffff;
font-size: 15px;
font-weight: 800;
letter-spacing: 0;
background: #ffffff;
box-shadow: 0 14px 30px rgba(21, 52, 79, 0.18);
object-fit: contain;
}
.restore-copy {
frontend/src/views/Login.vue
+8 -24
View File
@@ -11,13 +11,7 @@
<div class="brand-content-wrapper">
<!-- 顶部系统微标 -->
<div class="brand-mini-logo">
<div class="mini-logo-icon">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
<path d="M2 17l10 5 10-5"/>
<path d="M2 12l10 5 10-5"/>
</svg>
</div>
<img class="mini-logo-icon" src="/icons/ctms-icon-192.png" alt="" aria-hidden="true" />
<span class="mini-logo-text">华邦制药 · CTMS</span>
</div>
@@ -84,13 +78,7 @@
<div class="login-card-container">
<!-- 顶部 Logo 组合 -->
<div class="login-brand-header">
<div class="brand-logo-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
<path d="M2 17l10 5 10-5"/>
<path d="M2 12l10 5 10-5"/>
</svg>
</div>
<img class="brand-logo-icon" src="/icons/ctms-icon-192.png" alt="" aria-hidden="true" />
<div class="brand-divider"></div>
<span class="brand-system-text">CTMS</span>
</div>
@@ -605,14 +593,12 @@ const onSubmit = async () => {
}
.mini-logo-icon {
display: flex;
align-items: center;
justify-content: center;
width: 55px;
height: 55px;
background: #2563eb;
background: #ffffff;
border-radius: 14px;
color: white;
box-shadow: 0 12px 26px rgba(37, 99, 235, 0.18);
object-fit: contain;
}
.mini-logo-text {
@@ -818,14 +804,12 @@ const onSubmit = async () => {
}
.brand-logo-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: #2563eb;
background: #ffffff;
border-radius: 9px;
color: white;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
object-fit: contain;
}
.brand-divider {
frontend/src/views/Register.vue
+8 -24
View File
@@ -8,13 +8,7 @@
<div class="brand-content-wrapper">
<!-- 顶部系统微标 -->
<div class="brand-mini-logo">
<div class="mini-logo-icon">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
<path d="M2 17l10 5 10-5"/>
<path d="M2 12l10 5 10-5"/>
</svg>
</div>
<img class="mini-logo-icon" src="/icons/ctms-icon-192.png" alt="" aria-hidden="true" />
<span class="mini-logo-text">华邦制药 · CTMS</span>
</div>
@@ -77,13 +71,7 @@
<div class="reg-card-container">
<!-- 顶部 Logo -->
<div class="reg-brand-header">
<div class="brand-logo-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
<path d="M2 17l10 5 10-5"/>
<path d="M2 12l10 5 10-5"/>
</svg>
</div>
<img class="brand-logo-icon" src="/icons/ctms-icon-192.png" alt="" aria-hidden="true" />
<div class="brand-divider"></div>
<span class="brand-system-text">新用户注册</span>
</div>
@@ -821,14 +809,12 @@ onUnmounted(() => {
}
.mini-logo-icon {
display: flex;
align-items: center;
justify-content: center;
width: 55px;
height: 55px;
background: #2563eb;
background: #ffffff;
border-radius: 14px;
color: white;
box-shadow: 0 12px 26px rgba(37, 99, 235, 0.18);
object-fit: contain;
}
.mini-logo-text {
@@ -989,14 +975,12 @@ onUnmounted(() => {
}
.brand-logo-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: #2563eb;
background: #ffffff;
border-radius: 9px;
color: white;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
object-fit: contain;
}
.brand-divider {
frontend/src/views/admin/Projects.test.ts
+9 -1
View File
@@ -73,11 +73,19 @@ describe("project management access", () => {
expect(source).toContain(`:label="TEXT.common.fields.protocolNo || '方案号'" show-overflow-tooltip`);
expect(source).toContain(':label="TEXT.common.fields.status" align="center"');
expect(source).toContain('label="锁定状态" align="center"');
expect(source).toContain(':label="TEXT.common.labels.actions" align="center"');
expect(source).toContain(':label="TEXT.common.labels.actions" align="center" width="320" class-name="project-actions-column"');
expect(source).not.toContain('projectColumnWidth');
expect(source).not.toContain('fixed="right"');
});
it("reserves enough width for the densest project action set", () => {
const source = readProjects();
expect(source).toContain('width="320" class-name="project-actions-column"');
expect(source).toContain(".project-table :deep(.project-actions-column .cell)");
expect(source).toContain("overflow: visible;");
});
it("keeps the project summary header compact", () => {
const source = readProjects();
frontend/src/views/admin/Projects.vue
+5 -1
View File
@@ -116,7 +116,7 @@
</span>
</template>
</el-table-column>
<el-table-column :label="TEXT.common.labels.actions" align="center">
<el-table-column :label="TEXT.common.labels.actions" align="center" width="320" class-name="project-actions-column">
<template #default="scope">
<div class="action-row">
<el-tooltip v-if="canProject(scope.row, 'project_members', 'read')" :content="TEXT.modules.adminProjects.members" placement="top">
@@ -580,6 +580,10 @@ onMounted(() => {
display: none;
}
.project-table :deep(.project-actions-column .cell) {
overflow: visible;
}
@media (max-width: 768px) {
.stats-row {
grid-template-columns: repeat(2, 1fr);