修改页面设计

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;
+  }
 </style>

WebVue/src/components/basic/MyComputer.vue

@@ -49,7 +49,7 @@
 
           <template v-else-if="isAudio(record.OrderKey)">
             <div class="audio-icon" :class="{ playing: record.IsPlay == 'Y' && record.IsPause != 'Y' }">
-              <cust-icon-font size="54" type="icon-playmp3" style="color: #ff7878" />
+              <cust-icon-font size="40" type="icon-playmp3" style="color: #ff7878" />
             </div>
             <div class="file-name" :title="record.OrgFileName">{{ record.OrgFileName }}</div>
           </template>
@@ -87,7 +87,7 @@
             <FileOutlined style="color: #8c8c8c" />
           </template>
         </div>
-        <div :title="record.OrgFileName"><span class="list-name" >{{ record.OrgFileName }}</span></div>
+        <div class="list-name-wrap" :title="record.OrgFileName"><span class="list-name">{{ record.OrgFileName }}</span></div>
         <div class="list-size">{{ formatSize(record.FileSize) }}</div>
         <div class="list-date">{{ formatDate(record.CreatedDatetime) }}</div>
       </div>
@@ -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;

WebVue/src/components/basic/MyComputerFamily.vue

@@ -94,7 +94,7 @@
               }"
             >
               <cust-icon-font
-                size="54"
+                size="40"
                 type="icon-playmp3"
                 style="color: #ff7878"
               />
@@ -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;

WebVue/src/components/basic/OperatorStationFamily.vue

@@ -44,8 +44,8 @@
             </a-col>
             <a-col :span="3" v-if="isDirectorySelected">
               <a-tooltip :title="favorite">
-                <a-button style="width:100px;" class="nav-btn" :icon="h(ShareAltOutlined)"
-                  @click="$emit('set-share-folder')">{{ favorite }}</a-button>
+                <a-button class="nav-btn" :icon="h(ShareAltOutlined)"
+                  @click="$emit('set-share-folder')"></a-button>
               </a-tooltip>
             </a-col>