ow

WebVue/src/components/basic/Toolbar.vue

@@ -139,16 +139,56 @@
         <a-button size="small" type="default" @click="viewMode = 'search'">
           <cust-icon-font size="14" type="icon-sousuo" />
         </a-button>
-        <a-button size="small" type="default" @click="">
+        <a-button
+          size="small"
+          type="default"
+          title="使用帮助"
+          @click="helpVisible = true"
+        >
           <cust-icon-font size="14" type="icon-help" />
         </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: 4px;
+        "
+      >
+        <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
+      v-model:open="helpVisible"
+      title="我的云盘 · 使用帮助"
+      :footer="null"
+      :fullscreen="width < 640"
+    >
+      <slot name="help">
+        <DmsFileEnquiryHelp />
+      </slot>
+    </dragModal>
   </a-row>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
+import { useWindowSize } from "@vueuse/core";
 import {
   HomeOutlined,
   ArrowLeftOutlined,
@@ -157,6 +197,8 @@ import {
   FolderOutlined,
   SearchOutlined,
 } from "@ant-design/icons-vue";
+import dragModal from "@/components/basic/DragModal.vue";
+import DmsFileEnquiryHelp from "@/components/basic/DmsFileEnquiryHelp.vue";
 
 interface BreadcrumbItem {
   value: string;
@@ -181,6 +223,12 @@ const searchKeyword = ref("");
 
 const viewMode = ref<"search" | "list">("list");
 
+/** 使用帮助弹窗显示状态 */
+const helpVisible = ref(false);
+
+/** 小屏（手机）下帮助弹窗全屏显示 */
+const { width } = useWindowSize();
+
 const canGoTop = computed(() => {
   return props.pathStack.length > 1;
 });