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/App.vue
+1
View File
@@ -30,5 +30,6 @@ initDesktopUpdateManager();
.app-shell {
min-height: 100vh;
min-height: 100dvh;
background: var(--ctms-bg-base);
}
</style>
frontend/src/components/DesktopLayout.vue
+21 -8
View File
@@ -3,7 +3,10 @@
<aside class="desktop-sidebar">
<header class="sidebar-head">
<div class="sidebar-title-row">
<h1>{{ TEXT.common.appName }}</h1>
<div class="sidebar-app-brand">
<img class="sidebar-app-icon" src="/icons/ctms-icon-192.png" alt="" aria-hidden="true" />
<h1>{{ TEXT.common.appName }}</h1>
</div>
<button v-if="showSidebarProjectChooser" class="study-switcher-trigger empty" type="button" @click="openDesktopProjectEntry">
选择项目
@@ -1383,6 +1386,23 @@ useDesktopShortcuts(
white-space: nowrap;
}
.sidebar-app-brand {
display: inline-grid;
min-width: 0;
grid-template-columns: 30px minmax(0, 1fr);
align-items: center;
gap: 9px;
}
.sidebar-app-icon {
width: 30px;
height: 30px;
border-radius: 8px;
background: #ffffff;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
object-fit: contain;
}
.icon-button {
width: 32px;
height: 32px;
@@ -2357,13 +2377,6 @@ useDesktopShortcuts(
:global(.desktop-preferences-dialog .el-dialog__body) {
padding: 0;
background: transparent;
display: flex;
flex-direction: column;
}
:global(.desktop-preferences-dialog .el-dialog__body > *) {
flex: 1;
min-height: 0;
}
:global([data-ctms-theme="dark"] .desktop-workbench) {
frontend/src/components/Layout.desktop.test.ts
+8 -2
View File
@@ -109,6 +109,8 @@ describe("desktop layout shell", () => {
expect(tauriConfig).toContain('"decorations": true');
expect(tauriConfig).toContain('"titleBarStyle": "Overlay"');
expect(tauriConfig).toContain('"hiddenTitle": true');
expect(tauriConfig).toContain('"backgroundColor": "#f9fafb"');
expect(tauriConfig).toContain('"backgroundThrottling": "disabled"');
expect(tauriConfig).toContain('"trafficLightPosition": { "x": 16, "y": 18 }');
expect(layout).toContain("padding: 44px 10px 10px;");
expect(layout).toContain("-webkit-app-region: drag;");
@@ -159,7 +161,8 @@ describe("desktop layout shell", () => {
expect(preferences).toContain('class="preferences-pane"');
expect(preferences).toContain("const activeSectionId = ref<PreferenceSectionId>");
expect(preferences).toContain('grid-template-columns: 232px minmax(0, 1fr);');
expect(preferences).toContain("height: min(700px, calc(100vh - 96px));");
expect(preferences).toContain("height: 700px;");
expect(preferences).toContain("max-height: calc(100vh - 96px);");
expect(preferences).toContain("scrollbar-gutter: stable;");
expect(preferences).toContain('{ id: "connection", label: "连接"');
expect(preferences).toContain('{ id: "appearance", label: "外观"');
@@ -193,6 +196,7 @@ describe("desktop layout shell", () => {
expect(desktopLayout).not.toContain(':global([data-ctms-theme="dark"]) .desktop-workbench');
expect(desktopLayout).toContain('width="940px"');
expect(webLayout).toContain('width="940px"');
expect(desktopLayout).not.toContain(":global(.desktop-preferences-dialog .el-dialog__body > *)");
expect(desktopLayout).toContain('title: "连接设置"');
expect(webLayout).toContain('title: "连接设置"');
expect(desktopLayout).not.toContain('router.push("/desktop/server-settings")');
@@ -484,7 +488,9 @@ describe("desktop layout shell", () => {
expect(styles).toContain("body.is-desktop-runtime .el-message-box__header");
expect(styles).toContain("body.is-desktop-runtime .desktop-preferences-dialog");
expect(styles).toContain("body.is-desktop-runtime .desktop-preferences-dialog .el-dialog__body");
expect(styles).toContain("body.is-desktop-runtime .desktop-preferences-dialog .el-dialog__body {\n padding: 0;");
expect(styles).toContain("body.is-desktop-runtime .desktop-preferences-dialog .el-dialog__body {\n height: 700px;");
expect(styles).toContain("max-height: calc(100vh - 96px);");
expect(styles).toContain("padding: 0;");
expect(styles).toContain("body.is-desktop-runtime .el-message-box__btns");
expect(styles).toContain("body.is-desktop-runtime .dialog-fade-enter-from .el-dialog");
expect(styles).toContain("body.is-desktop-runtime .msgbox-fade-enter-from .el-message-box");
frontend/src/components/WebLayout.vue
+2 -1
View File
@@ -2,7 +2,7 @@
<el-container class="layout-container web-layout-container">
<el-aside :width="isCollapsed ? '68px' : '200px'" class="layout-aside" :class="{ collapsed: isCollapsed }">
<div class="aside-logo">
<div class="logo-icon"></div>
<img class="logo-icon" src="/icons/ctms-icon-192.png" alt="" aria-hidden="true" />
<span class="logo-text">{{ TEXT.common.appName }}</span>
</div>
<el-menu
@@ -1309,6 +1309,7 @@ useDesktopShortcuts(
border-radius: 8px;
margin-right: 12px;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.26);
object-fit: contain;
}
.logo-text {
frontend/src/styles/main.css
+3
View File
@@ -121,6 +121,7 @@ html,
body,
#app {
min-height: 100%;
background: var(--ctms-bg-base);
}
body {
@@ -1114,6 +1115,8 @@ body.is-desktop-runtime .desktop-preferences-dialog {
}
body.is-desktop-runtime .desktop-preferences-dialog .el-dialog__body {
height: 700px;
max-height: calc(100vh - 96px);
padding: 0;
background: transparent !important;
}
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);