优化桌面端标签导航与后台交互
This commit is contained in:
Cheng Zhou
@@ -122,6 +122,36 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-else-if="activeSectionId === 'shortcuts'" key="shortcuts" class="preference-panel">
|
||||
<div class="shortcut-settings">
|
||||
<div class="shortcut-settings-head">
|
||||
<div>
|
||||
<div class="row-title">标签页导航</div>
|
||||
<div class="row-desc">快捷键仅作用于当前激活标签，点击快捷键后按下新的组合键</div>
|
||||
</div>
|
||||
<el-button size="small" @click="resetDesktopShortcuts">恢复默认</el-button>
|
||||
</div>
|
||||
|
||||
<div class="shortcut-list">
|
||||
<div v-for="item in shortcutDefinitions" :key="item.action" class="shortcut-row">
|
||||
<div>
|
||||
<div class="row-title">{{ item.label }}</div>
|
||||
<div class="row-desc">{{ item.description }}</div>
|
||||
</div>
|
||||
<button
|
||||
class="shortcut-recorder"
|
||||
:class="{ capturing: capturingShortcutAction === item.action }"
|
||||
type="button"
|
||||
@click="startDesktopShortcutCapture($event, item.action)"
|
||||
>
|
||||
<kbd>{{ formatDesktopShortcut(desktopShortcuts[item.action]) }}</kbd>
|
||||
<span>{{ capturingShortcutAction === item.action ? "请按组合键" : "点击修改" }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-else-if="activeSectionId === 'notifications'" key="notifications" class="preference-panel">
|
||||
<div class="preference-row">
|
||||
<div>
|
||||
@@ -189,24 +219,31 @@
|
||||
import { computed, onBeforeUnmount, onMounted, ref, type Component } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { Bell, Close, Download, InfoFilled, Link, Monitor, Moon, Sunny } from "@element-plus/icons-vue";
|
||||
import { Bell, Close, Download, InfoFilled, Key, Link, Monitor, Moon, Sunny } from "@element-plus/icons-vue";
|
||||
import {
|
||||
getDesktopNotificationSubscription,
|
||||
setDesktopNotificationSubscription,
|
||||
} from "../api/desktopNotifications";
|
||||
import {
|
||||
clientRuntime,
|
||||
desktopShortcutFromKeyboardEvent,
|
||||
formatDesktopShortcut,
|
||||
getAppMetadata,
|
||||
getDesktopServerUrl,
|
||||
getNotificationPermission,
|
||||
isDesktopUpdaterAvailable,
|
||||
normalizeDesktopServerUrl,
|
||||
readDesktopShortcutPreferences,
|
||||
readDesktopThemePreference,
|
||||
requestNotificationPermission,
|
||||
resetDesktopShortcutPreferences,
|
||||
setDesktopShortcutPreference,
|
||||
setDesktopServerUrl,
|
||||
setDesktopThemePreference,
|
||||
showSystemNotificationProbe,
|
||||
type DesktopThemePreference,
|
||||
type DesktopShortcutAction,
|
||||
type DesktopShortcutPreferences,
|
||||
type NotificationPermissionState,
|
||||
} from "../runtime";
|
||||
import {
|
||||
@@ -227,7 +264,7 @@ const emit = defineEmits<{
|
||||
const router = useRouter();
|
||||
const auth = useAuthStore();
|
||||
const studyStore = useStudyStore();
|
||||
type PreferenceSectionId = "connection" | "appearance" | "notifications" | "updates" | "diagnostics";
|
||||
type PreferenceSectionId = "connection" | "appearance" | "shortcuts" | "notifications" | "updates" | "diagnostics";
|
||||
|
||||
const preferenceSections: Array<{
|
||||
id: PreferenceSectionId;
|
||||
@@ -237,6 +274,7 @@ const preferenceSections: Array<{
|
||||
}> = [
|
||||
{ id: "connection", label: "连接", description: "服务器入口与在线状态", icon: Link },
|
||||
{ id: "appearance", label: "外观", description: "主题与界面偏好", icon: Monitor },
|
||||
{ id: "shortcuts", label: "快捷键", description: "当前标签的导航与刷新操作", icon: Key },
|
||||
{ id: "notifications", label: "通知", description: "系统通知权限与投递状态", icon: Bell },
|
||||
{ id: "updates", label: "更新", description: "桌面端签名更新与安装状态", icon: Download },
|
||||
{ id: "diagnostics", label: "诊断信息", description: "客户端版本、平台与能力", icon: InfoFilled },
|
||||
@@ -267,6 +305,9 @@ const desktopNotificationLoading = ref(false);
|
||||
const desktopNotificationTestLoading = ref(false);
|
||||
const desktopUpdateChecking = ref(false);
|
||||
const desktopTheme = ref<DesktopThemePreference>(readDesktopThemePreference());
|
||||
const desktopShortcuts = ref<DesktopShortcutPreferences>(readDesktopShortcutPreferences());
|
||||
const capturingShortcutAction = ref<DesktopShortcutAction | null>(null);
|
||||
const shortcutCaptureElement = ref<HTMLElement | null>(null);
|
||||
const notificationPermission = ref<NotificationPermissionState>("unsupported");
|
||||
const desktopUpdateStatus = ref<DesktopUpdateStatusSnapshot>(getDesktopUpdateStatus());
|
||||
let updateStatusUnlisten: (() => void) | undefined;
|
||||
@@ -275,6 +316,15 @@ const themeOptions = [
|
||||
{ value: "light" as const, label: "明亮", icon: Sunny },
|
||||
{ value: "dark" as const, label: "暗黑", icon: Moon },
|
||||
];
|
||||
const shortcutDefinitions: Array<{
|
||||
action: DesktopShortcutAction;
|
||||
label: string;
|
||||
description: string;
|
||||
}> = [
|
||||
{ action: "back", label: "后退", description: "返回当前标签的上一页面" },
|
||||
{ action: "forward", label: "前进", description: "前往当前标签的下一页面" },
|
||||
{ action: "refresh", label: "刷新", description: "重新加载当前标签的数据" },
|
||||
];
|
||||
const HEALTH_TIMEOUT_MS = 10_000;
|
||||
|
||||
const clientMetadataRows = computed(() => [
|
||||
@@ -645,6 +695,59 @@ const setTheme = (theme: DesktopThemePreference) => {
|
||||
desktopTheme.value = setDesktopThemePreference(theme);
|
||||
};
|
||||
|
||||
const clearDesktopShortcutCapture = () => {
|
||||
capturingShortcutAction.value = null;
|
||||
shortcutCaptureElement.value = null;
|
||||
};
|
||||
|
||||
const startDesktopShortcutCapture = (event: MouseEvent, action: DesktopShortcutAction) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
capturingShortcutAction.value = action;
|
||||
shortcutCaptureElement.value = event.currentTarget as HTMLElement | null;
|
||||
shortcutCaptureElement.value?.focus();
|
||||
};
|
||||
|
||||
const captureDesktopShortcut = (event: KeyboardEvent) => {
|
||||
const action = capturingShortcutAction.value;
|
||||
if (!action) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.stopImmediatePropagation();
|
||||
if (event.key === "Escape") {
|
||||
clearDesktopShortcutCapture();
|
||||
return;
|
||||
}
|
||||
const shortcut = desktopShortcutFromKeyboardEvent(event);
|
||||
if (!shortcut) {
|
||||
if (!["Meta", "Control", "Shift", "Alt"].includes(event.key)) {
|
||||
ElMessage.warning("请按下包含 Command（或 Ctrl）的组合键");
|
||||
}
|
||||
return;
|
||||
}
|
||||
const result = setDesktopShortcutPreference(action, shortcut);
|
||||
if (!result.ok) {
|
||||
ElMessage.warning(result.reason);
|
||||
return;
|
||||
}
|
||||
desktopShortcuts.value = result.shortcuts;
|
||||
ElMessage.success("快捷键已更新");
|
||||
clearDesktopShortcutCapture();
|
||||
};
|
||||
|
||||
const cancelDesktopShortcutCaptureOnPointerDown = (event: PointerEvent) => {
|
||||
if (!capturingShortcutAction.value) return;
|
||||
const target = event.target;
|
||||
if (target instanceof Node && shortcutCaptureElement.value?.contains(target)) return;
|
||||
clearDesktopShortcutCapture();
|
||||
};
|
||||
|
||||
const resetDesktopShortcuts = () => {
|
||||
desktopShortcuts.value = resetDesktopShortcutPreferences();
|
||||
clearDesktopShortcutCapture();
|
||||
ElMessage.success("快捷键已恢复默认");
|
||||
};
|
||||
|
||||
const copyClientMetadata = async () => {
|
||||
const text = clientMetadataRows.value.map((row) => `${row.label}: ${row.value}`).join("\n");
|
||||
if (!navigator.clipboard?.writeText) {
|
||||
@@ -656,6 +759,8 @@ const copyClientMetadata = async () => {
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("keydown", captureDesktopShortcut, { capture: true });
|
||||
window.addEventListener("pointerdown", cancelDesktopShortcutCaptureOnPointerDown, { capture: true });
|
||||
updateStatusUnlisten = listenDesktopUpdateStatus((status) => {
|
||||
desktopUpdateStatus.value = status;
|
||||
});
|
||||
@@ -663,6 +768,8 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("keydown", captureDesktopShortcut, { capture: true });
|
||||
window.removeEventListener("pointerdown", cancelDesktopShortcutCaptureOnPointerDown, { capture: true });
|
||||
clearConnectionPendingTimer();
|
||||
updateStatusUnlisten?.();
|
||||
});
|
||||
@@ -983,6 +1090,7 @@ h3 {
|
||||
.preferences-panel-enter-active .connection-alert,
|
||||
.preferences-panel-enter-active .connection-diagnostic,
|
||||
.preferences-panel-enter-active .preference-row,
|
||||
.preferences-panel-enter-active .shortcut-settings,
|
||||
.preferences-panel-enter-active .metadata-panel {
|
||||
animation: preference-card-rise 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
||||
}
|
||||
@@ -1004,6 +1112,7 @@ h3 {
|
||||
* ===================================================== */
|
||||
.server-overview,
|
||||
.preference-row,
|
||||
.shortcut-settings,
|
||||
.metadata-panel {
|
||||
border: 1px solid var(--pref-border-card);
|
||||
border-radius: 10px;
|
||||
@@ -1178,6 +1287,73 @@ h3 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* =====================================================
|
||||
* 快捷键
|
||||
* ===================================================== */
|
||||
.shortcut-settings {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shortcut-settings-head,
|
||||
.shortcut-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.shortcut-settings-head {
|
||||
border-bottom: 1px solid var(--pref-border);
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.shortcut-list {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.shortcut-row + .shortcut-row {
|
||||
border-top: 1px solid var(--pref-border);
|
||||
}
|
||||
|
||||
.shortcut-recorder {
|
||||
appearance: none;
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
min-width: 126px;
|
||||
gap: 3px;
|
||||
padding: 7px 9px;
|
||||
border: 1px solid var(--pref-border-card);
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
color: var(--pref-text-secondary);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
|
||||
}
|
||||
|
||||
.shortcut-recorder:hover,
|
||||
.shortcut-recorder:focus-visible,
|
||||
.shortcut-recorder.capturing {
|
||||
border-color: var(--pref-accent);
|
||||
background: var(--pref-accent-light);
|
||||
box-shadow: 0 0 0 3px rgba(30, 77, 130, 0.1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.shortcut-recorder kbd {
|
||||
color: var(--pref-text-primary);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.shortcut-recorder span {
|
||||
color: var(--pref-text-muted);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* =====================================================
|
||||
* 主题切换器
|
||||
* ===================================================== */
|
||||
@@ -1349,6 +1525,7 @@ code {
|
||||
:global([data-ctms-theme="dark"] .desktop-preferences .server-config-form),
|
||||
:global([data-ctms-theme="dark"] .desktop-preferences .connection-diagnostic),
|
||||
:global([data-ctms-theme="dark"] .desktop-preferences .preference-row),
|
||||
:global([data-ctms-theme="dark"] .desktop-preferences .shortcut-settings),
|
||||
:global([data-ctms-theme="dark"] .desktop-preferences .metadata-panel) {
|
||||
border-color: var(--pref-border-card);
|
||||
background: var(--pref-bg-card);
|
||||
@@ -1388,6 +1565,17 @@ code {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
:global([data-ctms-theme="dark"] .desktop-preferences .shortcut-settings-head),
|
||||
:global([data-ctms-theme="dark"] .desktop-preferences .shortcut-recorder) {
|
||||
background: #101827;
|
||||
}
|
||||
|
||||
:global([data-ctms-theme="dark"] .desktop-preferences .shortcut-recorder:hover),
|
||||
:global([data-ctms-theme="dark"] .desktop-preferences .shortcut-recorder:focus-visible),
|
||||
:global([data-ctms-theme="dark"] .desktop-preferences .shortcut-recorder.capturing) {
|
||||
background: var(--pref-accent-light);
|
||||
}
|
||||
|
||||
:global([data-ctms-theme="dark"] .desktop-preferences .server-status-dot.connected) {
|
||||
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
|
||||
}
|
||||
|
||||
@@ -279,9 +279,9 @@ onMounted(() => {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 40px 28px;
|
||||
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 10px 0 40px rgba(15, 23, 42, 0.15);
|
||||
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border-right: 1px solid #e2e8f0;
|
||||
box-shadow: 6px 0 30px rgba(15, 23, 42, 0.02);
|
||||
}
|
||||
|
||||
/* 顶部品牌与Logo */
|
||||
@@ -298,19 +298,19 @@ onMounted(() => {
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
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;
|
||||
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
|
||||
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
|
||||
}
|
||||
|
||||
.brand-text h1 {
|
||||
margin: 1px 0 0;
|
||||
color: #ffffff;
|
||||
color: #0f172a;
|
||||
font-size: 17.5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
@@ -318,14 +318,14 @@ onMounted(() => {
|
||||
|
||||
.brand-kicker {
|
||||
display: block;
|
||||
color: rgba(147, 197, 253, 0.65);
|
||||
color: #2563eb;
|
||||
font-size: 9.5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* 个人信息卡片（暗色拟物化） */
|
||||
/* 个人信息卡片（浅色拟物化） */
|
||||
.sidebar-account {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -333,9 +333,9 @@ onMounted(() => {
|
||||
text-align: center;
|
||||
padding: 24px 20px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(226, 232, 240, 0.9);
|
||||
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02);
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
@@ -354,7 +354,7 @@ onMounted(() => {
|
||||
color: #ffffff;
|
||||
font-size: 21px;
|
||||
font-weight: 800;
|
||||
box-shadow: 0 8px 24px rgba(29, 78, 216, 0.3);
|
||||
box-shadow: 0 8px 24px rgba(29, 78, 216, 0.15);
|
||||
}
|
||||
|
||||
.status-dot-active {
|
||||
@@ -363,7 +363,7 @@ onMounted(() => {
|
||||
right: -2px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2.5px solid #1e293b;
|
||||
border: 2.5px solid #ffffff;
|
||||
border-radius: 50%;
|
||||
background: #10b981;
|
||||
}
|
||||
@@ -377,7 +377,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.account-details small {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: #64748b;
|
||||
font-size: 9.5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.05em;
|
||||
@@ -385,16 +385,15 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.account-details strong {
|
||||
color: #ffffff;
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.account-email {
|
||||
color: #94a3b8;
|
||||
color: #475569;
|
||||
font-size: 11.5px;
|
||||
word-break: break-all;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
@@ -405,10 +404,10 @@ onMounted(() => {
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: #475569;
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
@@ -416,12 +415,12 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-color: rgba(239, 68, 68, 0.2);
|
||||
color: #f87171;
|
||||
background: rgba(239, 68, 68, 0.05);
|
||||
border-color: rgba(239, 68, 68, 0.15);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* 常驻管理后台卡片（精致深黑流光） */
|
||||
/* 常驻管理后台卡片（精致浅色流光） */
|
||||
.sidebar-admin {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -433,13 +432,13 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(59, 130, 246, 0.12);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #090d16 0%, #111827 100%);
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
|
||||
color: #0f172a;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.04);
|
||||
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
@@ -450,15 +449,15 @@ onMounted(() => {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
background: rgba(59, 130, 246, 0.06);
|
||||
filter: blur(15px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.admin-action-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
box-shadow: 0 16px 30px rgba(59, 130, 246, 0.12);
|
||||
border-color: rgba(59, 130, 246, 0.28);
|
||||
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.08);
|
||||
}
|
||||
|
||||
.admin-card-head {
|
||||
@@ -475,8 +474,8 @@ onMounted(() => {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
color: #3b82f6;
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
color: #2563eb;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@@ -486,7 +485,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.admin-kicker {
|
||||
color: rgba(59, 130, 246, 0.7);
|
||||
color: #2563eb;
|
||||
font-size: 8.5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.05em;
|
||||
@@ -494,13 +493,14 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.admin-text-box strong {
|
||||
color: #0f172a;
|
||||
font-size: 13.5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.admin-desc {
|
||||
margin: 0 0 12px;
|
||||
color: #64748b;
|
||||
color: #475569;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@@ -509,7 +509,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #3b82f6;
|
||||
color: #2563eb;
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<div class="redirecting ctms-page-shell page--flush">
|
||||
<section class="unified-action-bar bar--flush">
|
||||
<div class="redirecting-title">{{ TEXT.menu.fileVersionManagement }}</div>
|
||||
</section>
|
||||
<section class="unified-shell">
|
||||
<section class="unified-section section--flush">
|
||||
<el-empty :description="`${TEXT.common.loading}...`" />
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useStudyStore } from "../../store/study";
|
||||
import { TEXT } from "../../locales";
|
||||
|
||||
const router = useRouter();
|
||||
const study = useStudyStore();
|
||||
|
||||
onMounted(() => {
|
||||
const currentStudy = study.currentStudy?.id;
|
||||
if (currentStudy) {
|
||||
router.replace(`/trial/${currentStudy}/documents`);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.redirecting {
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.redirecting-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--ctms-text-main);
|
||||
}
|
||||
</style>
|
||||
@@ -38,4 +38,18 @@ describe("MaterialEquipment desktop list workflow", () => {
|
||||
expect(source).toContain("if (!isDesktop || !row?.id) return;");
|
||||
expect(source).toContain('v-if="!isDesktop && (canUpdate || canDelete)"');
|
||||
});
|
||||
|
||||
it("aligns the desktop preview pane with the drug shipment preview layout", () => {
|
||||
const source = readSource();
|
||||
|
||||
expect(source).toContain("grid-template-columns: minmax(0, 1fr) 316px;");
|
||||
expect(source).toContain(".equipment-preview-pane");
|
||||
expect(source).toContain("background: #f8fafc;");
|
||||
expect(source).toContain("grid-template-columns: 78px minmax(0, 1fr);");
|
||||
expect(source).toContain("gap: 10px 12px;");
|
||||
expect(source).toContain("font-weight: 650;");
|
||||
expect(source).not.toContain("float: left;");
|
||||
expect(source).not.toContain("border-radius: 10px;");
|
||||
expect(source).not.toContain("box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -117,9 +117,6 @@
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="preview-empty">
|
||||
<div class="empty-icon">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/></svg>
|
||||
</div>
|
||||
<span>选择一行查看详情摘要</span>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -725,7 +722,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
.equipment-workbench.is-desktop {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 304px;
|
||||
grid-template-columns: minmax(0, 1fr) 316px;
|
||||
/* 桌面端：不限定固定高度，由父容器 flex 撑满 */
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
@@ -753,10 +750,9 @@ onBeforeUnmount(() => {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: linear-gradient(180deg, #f5f8ff 0%, #eef3fb 100%);
|
||||
border-left: 1px solid rgba(79, 126, 207, 0.1);
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.equipment-table {
|
||||
@@ -852,70 +848,46 @@ onBeforeUnmount(() => {
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid rgba(79, 126, 207, 0.12);
|
||||
}
|
||||
|
||||
.preview-kicker {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: #4f7ecf;
|
||||
font-size: 10px;
|
||||
margin-bottom: 5px;
|
||||
color: #6b7e95;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
background: rgba(79, 126, 207, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
margin-top: 8px;
|
||||
color: #0f172a;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
color: #142033;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
word-break: break-word;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.3;
|
||||
line-height: 1.35;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.preview-list {
|
||||
display: block;
|
||||
display: grid;
|
||||
grid-template-columns: 78px minmax(0, 1fr);
|
||||
gap: 10px 12px;
|
||||
margin: 0;
|
||||
border: 1px solid rgba(79, 126, 207, 0.1);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
|
||||
/* dt/dd float 布局：dt 左浮动作为标签列，dd 跟随在右侧 */
|
||||
.preview-list dt {
|
||||
float: left;
|
||||
clear: left;
|
||||
width: 64px;
|
||||
padding: 9px 6px 9px 14px;
|
||||
color: #7a8ca8;
|
||||
font-size: 11px;
|
||||
color: #7b8da3;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.preview-list dd {
|
||||
margin-left: 0;
|
||||
padding: 9px 14px 9px 78px;
|
||||
border-bottom: 1px solid rgba(79, 126, 207, 0.07);
|
||||
color: #1a2540;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
overflow-wrap: anywhere;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.preview-list dd:last-child {
|
||||
border-bottom: none;
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
color: #223349;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.preview-actions {
|
||||
@@ -923,18 +895,16 @@ onBeforeUnmount(() => {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: auto;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.preview-empty {
|
||||
min-height: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 180px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
color: #94a3b8;
|
||||
color: #7b8da3;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -1163,4 +1133,41 @@ onBeforeUnmount(() => {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:global([data-ctms-theme="dark"] .equipment-page--desktop .table-card) {
|
||||
background: #172033;
|
||||
}
|
||||
|
||||
:global([data-ctms-theme="dark"] .equipment-page--desktop .equipment-preview-pane) {
|
||||
border-color: #26364a;
|
||||
background: #111827;
|
||||
}
|
||||
|
||||
:global([data-ctms-theme="dark"] .equipment-page--desktop .preview-title),
|
||||
:global([data-ctms-theme="dark"] .equipment-page--desktop .preview-list dd) {
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
:global([data-ctms-theme="dark"] .equipment-page--desktop .preview-kicker),
|
||||
:global([data-ctms-theme="dark"] .equipment-page--desktop .preview-list dt),
|
||||
:global([data-ctms-theme="dark"] .equipment-page--desktop .preview-empty) {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:global([data-ctms-theme="dark"] .equipment-page--desktop .equipment-context-menu) {
|
||||
border-color: #334155;
|
||||
background: #172033;
|
||||
}
|
||||
|
||||
:global([data-ctms-theme="dark"] .equipment-page--desktop .equipment-context-menu button) {
|
||||
color: #dbe5f1;
|
||||
}
|
||||
|
||||
:global([data-ctms-theme="dark"] .equipment-page--desktop .equipment-context-menu button:hover:not(:disabled)) {
|
||||
background: #243247;
|
||||
}
|
||||
|
||||
:global([data-ctms-theme="dark"] .equipment-page--desktop .equipment-context-menu button.danger) {
|
||||
color: #fca5a5;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user