ow

WebVue/src/components/basic/OperatorStation.vue

@@ -14,18 +14,25 @@
               <a-tooltip title="上传文件">
                 <a-button v-if="canCreate" :icon="h(UploadOutlined)" type="primary" class="nav-btn"
                   @click="triggerUpload">
-                </a-button> </a-tooltip></a-col>
+                </a-button> </a-tooltip>
-            <a-col flex="32px" v-if="!isDirectorySelected && isSingleItem">
-              <a-tooltip title="下载">
-                <a-button class="nav-btn" :icon="h(DownloadOutlined)" :disabled="!canAmend"
-                  @click="onDownload"></a-button>
-              </a-tooltip>
             </a-col>
             <a-col flex="32px" v-if="!isDirectorySelected && (isSingleItem || isSameMediaTypeSelected)">
               <a-tooltip title="共享">
                 <a-button class="nav-btn" :icon="h(ShareAltOutlined)" @click="onShare"></a-button>
               </a-tooltip>
             </a-col>
+            <a-col flex="32px" v-if="!isDirectorySelected && (isSingleItem || isSameMediaTypeSelected)">
+              <a-tooltip :title="publishTooltip">
+                <a-button class="nav-btn" :icon="h(NotificationOutlined)" @click="onPublish"></a-button>
+              </a-tooltip>
+            </a-col>
+            <a-col flex="32px" v-if="!isDirectorySelected && isSingleItem">
+              <a-tooltip title="下载">
+                <a-button class="nav-btn" :icon="h(DownloadOutlined)" :disabled="!canAmend"
+                  @click="onDownload"></a-button>
+              </a-tooltip>
+            </a-col>
+
             <a-col flex="32px" v-if="isSingleItem">
               <a-tooltip title="重命名">
                 <a-button class="nav-btn" :icon="h(EditOutlined)" :disabled="!canAmend"
@@ -46,11 +53,6 @@
                 </a-popconfirm>
               </a-tooltip>
             </a-col>
-            <a-col flex="32px" v-if="!isDirectorySelected && (isSingleItem || isSameMediaTypeSelected)">
-              <a-tooltip :title="publishTooltip">
-                <a-button class="nav-btn" :icon="h(NotificationOutlined)" @click="onPublish"></a-button>
-              </a-tooltip>
-            </a-col>
             <a-col flex="32px" v-if="!isDirectorySelected && isSingleItem">
               <a-tooltip :title="previewTooltip">
                 <a-button class="nav-btn" @click="onViewPreview"><cust-icon-font size="16"
@@ -302,7 +304,8 @@ const onContinueAudio = () => {
    原来是靠 24 栅格 span=2 撑开的，间距会随容器宽度变化（400px 时只有 1px 左右），
    现在按钮列固定 32px（与 .nav-btn 同宽），真正的间距交给 gap：8px */
 .ops-row {
-  gap: 8px;
+  gap: 4px;
+  margin-top: 4px;
   flex-wrap: nowrap;
 }
 
@@ -312,7 +315,7 @@ const onContinueAudio = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 8px;
+  border-radius: 4px;
 }
 
 .nav-btn:hover:not(:disabled) {

WebVue/src/components/basic/OperatorStationDelete.vue

@@ -2,22 +2,22 @@
     <a-row :wrap="false">
         <a-col flex="auto">
             <a-row>
-                <a-col flex="300px">
+                <a-col flex="400px">
                     <a-row justify="start" class="ops-row">
-                        <a-col flex="28px" style="margin-left: 8px">
+                        <a-col flex="32px" style="margin-left: 8px">
                             <a-tooltip title="还原">
                                 <a-button class="nav-btn" :icon="h(UndoOutlined)" style="color:green;"
                                     :disabled="!hasSelection" @click="$emit('restore', selectedItems)"></a-button>
                             </a-tooltip>
                         </a-col>
-                        <a-col flex="28px">
+                        <a-col flex="32px">
                             <a-tooltip title="下载">
                                 <a-button class="nav-btn" :icon="h(DownloadOutlined)"
                                     :disabled="!hasSelection || isDirectorySelected || !isSingleItem"
                                     @click="onDownload"></a-button>
                             </a-tooltip>
                         </a-col>
-                        <a-col flex="28px" v-if="hasSelection">
+                        <a-col flex="32px" v-if="hasSelection">
                             <a-tooltip title="删除">
                                 <a-popconfirm title="确定是否删除?" ok-text="是" cancel-text="否"
                                     @confirm="$emit('delete', selectedItems)">
@@ -25,13 +25,13 @@
                                         :disabled="!canCreate"></a-button></a-popconfirm>
                             </a-tooltip>
                         </a-col>
-                        <a-col flex="28px" v-if="!isDirectorySelected && isSingleItem && isSingleVideo">
+                        <a-col flex="32px" v-if="!isDirectorySelected && isSingleItem && isSingleVideo">
                             <a-tooltip>
                                 <a-button class="nav-btn" @click="onPlayVideo"><cust-icon-font size="16"
                                         type="icon-foldervideo" /></a-button>
                             </a-tooltip>
                         </a-col>
-                        <a-col flex="28px" v-if="!isDirectorySelected && isSingleItem && isSingleAudio">
+                        <a-col flex="32px" v-if="!isDirectorySelected && isSingleItem && isSingleAudio">
                             <a-tooltip v-if="selectedItem.IsPlay != 'Y'">
                                 <a-button class="nav-btn" :icon="h(PlayCircleOutlined, { style: { color: 'red' } })"
                                     @click="onPlayAudio"></a-button>
@@ -188,17 +188,19 @@ const onContinueAudio = () => {
    原来是靠 24 栅格 span=3 撑开的，间距会随容器宽度变化，
    现在按钮列固定 28px（与 .nav-btn 同宽），真正的间距交给 gap */
 .ops-row {
-    gap: 8px;
+  gap: 4px;
-    flex-wrap: nowrap;
+  margin-top: 4px;
+  flex-wrap: nowrap;
 }
 
+
 .nav-btn {
-    width: 28px;
+  width: 32px;
-    height: 26px;
+  height: 32px;
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    justify-content: center;
+  justify-content: center;
-    border-radius: 4px;
+  border-radius: 4px;
 }
 
 .nav-btn:hover:not(:disabled) {

WebVue/src/components/basic/OperatorStationFamily.vue

@@ -2,7 +2,7 @@
   <a-row :wrap="false">
     <a-col flex="auto">
       <a-row>
-        <a-col flex="300px">
+        <a-col flex="400px">
           <a-row justify="start" class="ops-row">
             <a-col flex="32px" style="margin-left: 8px">
               <a-tooltip title="新建文件夹">
@@ -215,7 +215,8 @@ const onContinueAudio = () => {
    原来是靠 24 栅格 span=3 撑开的，间距会随容器宽度变化，
    现在按钮列固定 32px，真正的间距交给 gap */
 .ops-row {
-  gap: 8px;
+  gap: 4px;
+  margin-top: 4px;
   flex-wrap: nowrap;
 }
 

WebVue/src/components/basic/Toolbar.vue

@@ -2,183 +2,109 @@
   <a-row :wrap="false">
     <a-col flex="auto">
       <a-row>
-        <a-col flex="100px">
+        <a-col>
-          <a-row justify="start">
+          <a-row justify="start" class="ops-row" style="margin-left: 8px">
-            <a-col :span="8"
+            <a-col :span="8"><a-tooltip title="返回顶层">
-              ><a-tooltip title="返回顶层">
+                <a-button class="nav-btn" :disabled="!canGoTop" @click="$emit('go-top')">
-                <a-button
-                  type="text"
-                  class="nav-btn"
-                  :disabled="!canGoTop"
-                  @click="$emit('go-top')"
-                >
                   <HomeOutlined />
-                </a-button> </a-tooltip
+                </a-button> </a-tooltip></a-col>
-            ></a-col>
+            <a-col :span="8"><a-tooltip title="返回上层">
-            <a-col :span="8"
+                <a-button class="nav-btn" :disabled="!canGoBack" @click="$emit('go-back')">
-              ><a-tooltip title="返回上层">
-                <a-button
-                  type="text"
-                  class="nav-btn"
-                  :disabled="!canGoBack"
-                  @click="$emit('go-back')"
-                >
                   <ArrowLeftOutlined />
-                </a-button> </a-tooltip
+                </a-button> </a-tooltip></a-col>
-            ></a-col>
+            <a-col :span="8"><a-tooltip title="刷新">
-            <a-col :span="8"
+                <a-button class="nav-btn" :loading="loading" @click="onRefresh">
-              ><a-tooltip title="刷新">
-                <a-button
-                  type="text"
-                  class="nav-btn"
-                  :loading="loading"
-                  @click="onRefresh"
-                >
                   <ReloadOutlined />
-                </a-button> </a-tooltip
+                </a-button> </a-tooltip></a-col>
-            ></a-col>
           </a-row>
         </a-col>
         <a-col :xs="0" :sm="0" :lg="20" flex="auto">
-          <div
+          <div class="toolbar-center" style="margin-top: 5px; margin-left: 10px">
-            class="toolbar-center"
-            style="margin-top: 5px; margin-left: 10px"
-          >
             <a-breadcrumb class="breadcrumb">
-              <a-breadcrumb-item
+              <a-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index"
-                v-for="(item, index) in breadcrumbItems"
+                @click="onBreadcrumbClick(item, index)" :class="{ clickable: index < breadcrumbItems.length - 1 }">
-                :key="index"
-                @click="onBreadcrumbClick(item, index)"
-                :class="{ clickable: index < breadcrumbItems.length - 1 }"
-              >
                 <template v-if="index === 0">
                   <LaptopOutlined style="margin-right: 4px" />
                 </template>
                 <template v-else>
                   <FolderOutlined style="margin-right: 4px" />
                 </template>
-                <span
+                <span :style="{
-                  :style="{
+                  cursor:
-                    cursor:
+                    index < breadcrumbItems.length - 1
-                      index < breadcrumbItems.length - 1
+                      ? 'pointer'
-                        ? 'pointer'
+                      : 'default',
-                        : 'default',
+                  color: index < breadcrumbItems.length - 1 ? '#1677ff' : '',
-                    color: index < breadcrumbItems.length - 1 ? '#1677ff' : '',
+                }">{{ item.displayName }}</span>
-                  }"
-                  >{{ item.displayName }}</span
-                >
               </a-breadcrumb-item>
             </a-breadcrumb>
           </div>
         </a-col>
-        <a-col :xs="10" :sm="10" :lg="0" flex="auto">
+        <a-col :xs="20" :sm="20" :lg="0" flex="auto" :style="viewMode === 'list' ? {
-          <div
+    border: '1px solid #e5e5e5',
-            v-if="viewMode == 'list'"
+    borderLeft: 'none',
-            style="
+    borderRight: 'none'
+  } : {}">
+          <div v-if="viewMode == 'list'" style="
               margin-top: 8px;
               margin-left: 10px;
               display: flex;
               align-items: center;
-            "
+            ">
-          >
             <FolderOutlined style="margin-right: 4px" />
-            <span class="breadcrumb-text">{{
+            <span  @click="viewMode = 'search'" class="breadcrumb-text">{{
               breadcrumbItems.length > 0
                 ? breadcrumbItems[breadcrumbItems.length - 1].displayName
                 : ""
             }}</span>
           </div>
-          <div
+          <div style="
-            style="
               max-width: 260px;
               min-width: 220px;
-              margin-left: 20px;
-              margin-top: -2px;
               display: flex;
               justify-content: center;
+              margin-left:6px;
               gap: 4px;
-            "
+            " v-else>
-            v-else
+            <a-input-search v-model:value="searchKeyword" placeholder="搜索文件名称" allow-clear @search="onSearch"
-          >
+              @pressEnter="onSearch">
-            <a-input-search
-              v-model:value="searchKeyword"
-              placeholder="搜索文件名称"
-              allow-clear
-              @search="onSearch"
-              @pressEnter="onSearch"
-            >
             </a-input-search>
-            <a-button size="small" type="default"  @click="viewMode = 'list'" style="height: 32px;">
+            <!-- <a-button size="small" type="default" @click="viewMode = 'list'" style="height: 32px;">
-              <cust-icon-font  size="32" type="icon-gongcheng" />
+              <cust-icon-font size="32" type="icon-gongcheng" />
-            </a-button>
+            </a-button> -->
           </div>
-        </a-col> </a-row
+        </a-col>
-    ></a-col>
+      </a-row>
+    </a-col>
     <a-col :xs="0" :sm="0" :lg="10" flex="none">
       <div style="margin-bottom: 8px; margin-right: 8px">
-        <a-input-search
+        <a-input-search v-model:value="searchKeyword" placeholder="搜索文件名称" allow-clear @search="onSearch"
-          v-model:value="searchKeyword"
+          @pressEnter="onSearch">
-          placeholder="搜索文件名称"
-          allow-clear
-          @search="onSearch"
-          @pressEnter="onSearch"
-        >
         </a-input-search>
       </div>
     </a-col>
     <a-col :xs="4" :sm="4" :lg="0" flex="none">
-      <div
+      <div v-if="viewMode == 'list'" style="
-        v-if="viewMode == 'list'"
-        style="
           margin-right: 20px;
           display: flex;
           justify-content: center;
-          gap: 8px;
+          gap: 2px;
-        "
+        ">
-      >
+        <a-button class="nav-btn" @click="viewMode = 'search'">
-        <a-button size="small" type="default" @click="viewMode = 'search'">
           <cust-icon-font size="14" type="icon-sousuo" />
         </a-button>
-        <a-button
+        <!-- <a-button size="small" type="default" title="使用帮助" @click="helpVisible = true">
-          size="small"
-          type="default"
-          title="使用帮助"
-          @click="helpVisible = true"
-        >
           <cust-icon-font size="14" type="icon-help" />
-        </a-button>
+        </a-button> -->
       </div>
     </a-col>
     <a-col :xs="0" :sm="0" :lg="1" flex="none">
-      <div
+
-        v-if="viewMode == 'list'"
-        style="
-          margin-right: 20px;
-          display: flex;
-          justify-content: center;
-          gap: 8px;
-        "
-      >
-        <a-button
-          style="height: 32px"
-          size="small"
-          type="default"
-          title="使用帮助"
-          @click="helpVisible = true"
-        >
-          <cust-icon-font size="16" type="icon-help" />
-        </a-button>
-      </div>
     </a-col>
 
     <!-- 使用帮助弹窗：内容默认取「我的云盘」页面说明，父组件可用 #help 插槽覆盖 -->
     <!-- 宽度不写死：跟随 DragModal 的默认宽度（视口 90%） -->
-    <dragModal
+    <dragModal v-model:open="helpVisible" title="我的云盘 · 使用帮助" :footer="null" :fullscreen="width < 640">
-      v-model:open="helpVisible"
-      title="我的云盘 · 使用帮助"
-      :footer="null"
-      :fullscreen="width < 640"
-    >
       <slot name="help">
         <DmsFileEnquiryHelp />
       </slot>
@@ -254,6 +180,7 @@ const onBreadcrumbClick = (item: BreadcrumbItem, index: number) => {
  * 不能取第一个节点，否则会把路径截回到根目录，变成跳转而不是刷新。
  */
 const onRefresh = () => {
+  viewMode.value = 'list';
   const lastIndex = breadcrumbItems.value.length - 1;
   if (lastIndex < 0) return;
   onBreadcrumbClick(breadcrumbItems.value[lastIndex], lastIndex);
@@ -261,13 +188,21 @@ const onRefresh = () => {
 </script>
 
 <style lang="less">
+/* 按钮之间统一 8px 间距。
+   原来是靠 24 栅格 span=2 撑开的，间距会随容器宽度变化（400px 时只有 1px 左右），
+   现在按钮列固定 32px（与 .nav-btn 同宽），真正的间距交给 gap：8px */
+.ops-row {
+  gap: 2px;
+  flex-wrap: nowrap;
+}
+
 .nav-btn {
-  width: 36px;
+  width: 32px;
-  height: 36px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 8px;
+  border-radius: 4px;
 }
 
 .nav-btn:hover:not(:disabled) {
@@ -303,7 +238,8 @@ const onRefresh = () => {
 
 .breadcrumb-text {
   display: inline-block;
-  max-width: 16ch; /* 6个字符宽度，ch 按字符计算 */
+  max-width: 16ch;
+  /* 6个字符宽度，ch 按字符计算 */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

WebVue/src/layout/index.vue

@@ -1,97 +1,63 @@
 <template>
   <a-layout class="layout" has-sider>
-    <a-layout-sider
+    <a-layout-sider :collapsed-width="collapsedWidth" class="layout-sider" theme="light" :width="sideBarWidth" :style="{
-      :collapsed-width="collapsedWidth"
+      overflow: 'auto',
-      class="layout-sider"
+      height: '100vh',
-      theme="light"
+      position: 'fixed',
-      :width="sideBarWidth"
+      left: 0,
-      :style="{
+      top: 0,
-        overflow: 'auto',
+      bottom: 0,
-        height: '100vh',
+      'z-index': 1000,
-        position: 'fixed',
+      'box-shadow': '0px 0px 10px rgba(0, 0, 0, 0.9)',
-        left: 0,
+    }" v-model:collapsed="collapsed" collapsible>
-        top: 0,
-        bottom: 0,
-        'z-index': 1000,
-        'box-shadow': '0px 0px 10px rgba(0, 0, 0, 0.9)',
-      }"
-      v-model:collapsed="collapsed"
-      collapsible
-    >
       <div class="logo" />
-      <a-menu
+      <a-menu class="layout-menu" v-model:selectedKeys="selectedMenuKeys" mode="inline" @click="handleClick"
-        class="layout-menu"
+        :items="menuItems" />
-        v-model:selectedKeys="selectedMenuKeys"
-        mode="inline"
-        @click="handleClick"
-        :items="menuItems"
-      />
     </a-layout-sider>
-    <a-layout
+    <a-layout :style="{
-      :style="{
+      marginLeft: sideBarWidth,
-        marginLeft: sideBarWidth,
+      height: '100vh',
-        height: '100vh',
+      transition: 'margin-left 200ms',
-        transition: 'margin-left 200ms',
+    }" class="layout-main">
-      }"
-      class="layout-main"
-    >
       <a-layout-header class="layout-header">
         <a-tooltip :title="t('layout.header.backToDashboard')" placement="bottomLeft">
           <div class="layout-header-left" @click="onpush()">
             <a-avatar shape="square" size="large" src="/youjia.svg" />
-            <a-page-header style="padding-left: 4px" :title="compnentTitle" />
+            <a-page-header style="padding-left: 4px" :title="compnentTitle"> </a-page-header>
           </div>
         </a-tooltip>
-        <a-menu
+
-          mode="horizontal"
+        <a-menu mode="horizontal" v-model:selectedKeys="selectedHeaderKeys" :items="headerItems" breakpoint="lg"
-          v-model:selectedKeys="selectedHeaderKeys"
+          @click="headerHandleClick" />
-          :items="headerItems"
-          breakpoint="lg"
-          @click="headerHandleClick"
-        />
       </a-layout-header>
       <a-config-provider :locale="locale === 'en' ? enUS : zhCN">
         <a-layout-content class="layout-content">
           <div class="layout-page-header">
-            <MenuUnfoldOutlined
+            <MenuUnfoldOutlined :style="{ fontSize: '22px', color: '#08c' }" @click="collapsedHandle"
-              :style="{ fontSize: '22px', color: '#08c' }"
+              v-if="collapsed" />
-              @click="collapsedHandle"
+            <MenuFoldOutlined :style="{ fontSize: '22px', color: '#08c' }" @click="collapsedHandle" v-if="!collapsed" />
-              v-if="collapsed"
+            <a-page-header style="
-            />
-            <MenuFoldOutlined
-              :style="{ fontSize: '22px', color: '#08c' }"
-              @click="collapsedHandle"
-              v-if="!collapsed"
-            />
-            <a-page-header
-              style="
                 border: 0px none rgb(235, 237, 240);
                 padding: 0;
                 padding-left: 8px;
-              "
+              " :title="titleHeader" />
-              :title="titleHeader"
-            />
             <!-- 常驻可见的首页入口：手机端没有 hover，提示必须一直显示在那里才有用。
                  已经在首页时不显示，避免点了没反应。 -->
-            <a-button
+            <!-- <a-button
               v-if="!isWelcome"
-              type="link"
+              class="home-entry nav-btn"
-              class="home-entry"
               @click="onpush()"
             >
               <template #icon><DashboardOutlined /></template>
               {{ t("layout.header.backToDashboard") }}
-            </a-button>
+            </a-button> -->
           </div>
-          <div
+          <div class="layout-content-view" :style="{
-            class="layout-content-view"
+            height:
-            :style="{
+              bsInfo.height -
-              height:
+              (bsInfo.size.sm || !isWelcome ? 100 : 140) +
-                bsInfo.height -
+              'px',
-                (bsInfo.size.sm || !isWelcome ? 100 : 140) +
+          }">
-                'px',
-            }"
-          >
             <router-view />
           </div>
         </a-layout-content>
@@ -99,10 +65,7 @@
         <changeLocalName v-model:showModel="showChangeUserLocalName" />
         <changeBiometricEnrollCard v-model:showModel="showBiometricEnroll" />
       </a-config-provider>
-      <a-layout-footer
+      <a-layout-footer v-if="!bsInfo.size.sm && isWelcome" class="layout-footer">
-        v-if="!bsInfo.size.sm && isWelcome"
-        class="layout-footer"
-      >
         <div>{{ copy }}</div>
         <div>
           <a href="https://beian.miit.gov.cn/">{{ beian }}</a>
@@ -565,7 +528,7 @@ const headerHandleClick: MenuProps["onClick"] = (menuInfo) => {
   } else if (menuInfo.key == "amentPassword") {
     showChangePassword.value = true;
   } else if (menuInfo.key == "biometricButton") {
-    showBiometricEnroll.value=true;
+    showBiometricEnroll.value = true;
   } else if (menuInfo.key == "amentUserLocalName") {
     showChangeUserLocalName.value = true;
   } else if (menuInfo.key == "chinese") {
@@ -643,8 +606,7 @@ provide(layoutProviderMethodKey, {
   height: calc(100vh - 48px);
 }
 
-.layout-main {
+.layout-main {}
-}
 
 .layout-header {
   background-color: white;
@@ -686,10 +648,11 @@ provide(layoutProviderMethodKey, {
   flex: none;
   align-self: center;
   margin-left: auto;
-  margin-right: 8px;
+  margin-right: 12px;
   padding-inline: 4px;
 }
 
+
 .layout-page-header .ant-page-header-heading {
   //background-color: silver;
   padding: 0;