diff --git a/WebVue/src/components/basic/DragModal.vue b/WebVue/src/components/basic/DragModal.vue index 75d720c..ba2f9fa 100644 --- a/WebVue/src/components/basic/DragModal.vue +++ b/WebVue/src/components/basic/DragModal.vue @@ -356,4 +356,14 @@ } } } + + /* ant-design-vue Modal 自带两个“焦点哨兵”（0x0、tabindex=0、aria-hidden=true 的 div）： + vc-dialog/Content.js 的 sentinelStyle。 + 弹窗显示时 antd 会把焦点移到哨兵上（vc-dialog/Dialog.js -> Content.focus()）， + 而哨兵带 aria-hidden="true"，Chrome 会报： + "Blocked aria-hidden on an element because its descendant retained focus"。 + 让它不再可聚焦即可消除该告警，不影响弹窗其它焦点行为。 */ + .draggable-modal .ant-modal > div[aria-hidden="true"][tabindex="0"] { + display: none !important; + } diff --git a/WebVue/src/components/basic/MyComputer.vue b/WebVue/src/components/basic/MyComputer.vue index 47f7472..388b89a 100644 --- a/WebVue/src/components/basic/MyComputer.vue +++ b/WebVue/src/components/basic/MyComputer.vue @@ -49,7 +49,7 @@ @@ -87,7 +87,7 @@ -
{{ record.OrgFileName }}
+
{{ record.OrgFileName }}
{{ formatSize(record.FileSize) }}
{{ formatDate(record.CreatedDatetime) }}
@@ -241,26 +241,32 @@ const formatDate = (date: any) => { .my-computer-body { flex: 1; overflow-y: auto; + overflow-x: hidden; padding: 4px; - display: flex; - flex-wrap: wrap; - align-content: flex-start; - gap: 16px; + display: grid; + /* 列宽与小屏保持一致，列数随宽度自由增减 */ + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + align-content: start; + gap: 8px; } .my-computer-body.list-body { + display: flex; flex-wrap: nowrap; flex-direction: column; gap: 0; } .file-card-wrapper { - width: 120px; + width: 100%; + min-width: 0; + max-width: 180px; + justify-self: center; display: flex; flex-direction: column; align-items: center; cursor: pointer; - padding: 8px; + padding: 4px; border-radius: 6px; transition: all 0.2s; position: relative; @@ -282,18 +288,19 @@ const formatDate = (date: any) => { flex-direction: column; align-items: center; width: 100%; + min-width: 0; } .folder-icon, .file-icon, .audio-icon { - font-size: 56px; + font-size: 42px; color: #faad14; display: flex; align-items: center; justify-content: center; - width: 80px; - height: 80px; + width: 60px; + height: 60px; } .file-icon { @@ -320,8 +327,8 @@ const formatDate = (date: any) => { .image-thumb, .video-thumb { - width: 100px; - height: 100px; + width: 68px; + height: 68px; border-radius: 4px; overflow: hidden; position: relative; @@ -345,7 +352,7 @@ const formatDate = (date: any) => { align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.2); - font-size: 36px; + font-size: 24px; color: #fff; opacity: 0; transition: opacity 0.2s; @@ -359,12 +366,25 @@ const formatDate = (date: any) => { font-size: 12px; margin-top: 4px; text-align: center; - max-width: 110px; + display: inline-block; + max-width: min(12ch, 100%); /* 与列表视图保持一致，按字符宽度截断，且不超出卡片 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +/* 大屏时文件名完整显示（换行展示，不截断） */ +@media (min-width: 1200px) { + .file-name { + max-width: 100%; + white-space: normal; + overflow: visible; + text-overflow: clip; + overflow-wrap: anywhere; + line-height: 1.2; + } +} + .list-item { display: flex; align-items: center; @@ -391,14 +411,32 @@ const formatDate = (date: any) => { justify-content: center; } +.list-name-wrap { + flex: 1 0 auto; + min-width: 0; + overflow: hidden; +} + .list-name { display: inline-block; - max-width: 14ch; /* 6个字符宽度，ch 按字符计算 */ + max-width: 12ch; /* 6个字符宽度，ch 按字符计算 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +/* 大屏时列表视图文件名完整显示（换行） */ +@media (min-width: 1200px) { + .list-name-wrap .list-name { + max-width: none; + white-space: normal; + overflow: visible; + text-overflow: clip; + overflow-wrap: anywhere; + line-height: 1.2; + } +} + .list-size, .list-date { color: #8c8c8c; diff --git a/WebVue/src/components/basic/MyComputerFamily.vue b/WebVue/src/components/basic/MyComputerFamily.vue index 921f469..9b233d4 100644 --- a/WebVue/src/components/basic/MyComputerFamily.vue +++ b/WebVue/src/components/basic/MyComputerFamily.vue @@ -94,7 +94,7 @@ }" > @@ -295,24 +295,30 @@ const formatDate = (date: any) => { .my-computer-body { flex: 1; overflow-y: auto; + overflow-x: hidden; padding: 4px; - display: flex; - flex-wrap: wrap; - align-content: flex-start; - gap: 16px; + display: grid; + /* 列宽与小屏保持一致，列数随宽度自由增减 */ + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + align-content: start; + gap: 8px; } .my-computer-body.list-body { + display: flex; flex-wrap: nowrap; flex-direction: column; gap: 0; } .file-card-wrapper { - width: 120px; + width: 100%; + min-width: 0; + max-width: 180px; + justify-self: center; display: flex; flex-direction: column; align-items: center; cursor: pointer; - padding: 8px; + padding: 4px; border-radius: 6px; transition: all 0.2s; position: relative; @@ -352,17 +358,18 @@ const formatDate = (date: any) => { flex-direction: column; align-items: center; width: 100%; + min-width: 0; } .folder-icon, .file-icon, .audio-icon { - font-size: 56px; + font-size: 42px; color: #faad14; display: flex; align-items: center; justify-content: center; - width: 80px; - height: 80px; + width: 60px; + height: 60px; } .file-icon { color: #8c8c8c; @@ -383,8 +390,8 @@ const formatDate = (date: any) => { } .image-thumb, .video-thumb { - width: 100px; - height: 100px; + width: 68px; + height: 68px; border-radius: 4px; overflow: hidden; position: relative; @@ -406,7 +413,7 @@ const formatDate = (date: any) => { align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.2); - font-size: 36px; + font-size: 24px; color: #fff; opacity: 0; transition: opacity 0.2s; @@ -418,11 +425,23 @@ const formatDate = (date: any) => { font-size: 12px; margin-top: 4px; text-align: center; - max-width: 110px; + display: inline-block; + max-width: min(14ch, 100%); /* 与列表视图保持一致，按字符宽度截断，且不超出卡片 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +/* 大屏时文件名完整显示（换行展示，不截断） */ +@media (min-width: 1200px) { + .file-name { + max-width: 100%; + white-space: normal; + overflow: visible; + text-overflow: clip; + overflow-wrap: anywhere; + line-height: 1.2; + } +} .list-item { display: flex; align-items: center; @@ -447,7 +466,7 @@ const formatDate = (date: any) => { } /* =========列表视图文件名+状态图标容器========= */ .list-name-wrap { - flex: 1; + flex: 1 0 auto; display: flex; align-items: center; gap: 6px; @@ -458,6 +477,17 @@ const formatDate = (date: any) => { text-overflow: ellipsis; white-space: nowrap; } +/* 大屏时列表视图文件名完整显示（换行） */ +@media (min-width: 1200px) { + .list-name-wrap .list-name { + max-width: none; + white-space: normal; + overflow: visible; + text-overflow: clip; + overflow-wrap: anywhere; + line-height: 1.2; + } +} .list-status-icon { display: flex; align-items: center; diff --git a/WebVue/src/components/basic/OperatorStationFamily.vue b/WebVue/src/components/basic/OperatorStationFamily.vue index 86727a2..f2c9376 100644 --- a/WebVue/src/components/basic/OperatorStationFamily.vue +++ b/WebVue/src/components/basic/OperatorStationFamily.vue @@ -44,8 +44,8 @@ - {{ favorite }} + diff --git a/WebVue/src/views/master/FamilyGroupEnquiry.vue b/WebVue/src/views/master/FamilyGroupEnquiry.vue index 79fbce6..5abd090 100644 --- a/WebVue/src/views/master/FamilyGroupEnquiry.vue +++ b/WebVue/src/views/master/FamilyGroupEnquiry.vue @@ -1,6 +1,7 @@