ow

WebVue/src/components/basic/MyComputer.vue

@@ -0,0 +1,416 @@
+<template>
+  <div class="my-computer" ref="containerRef">
+    <div class="my-computer-header">
+      <a-checkbox :checked="isAllChecked" :indeterminate="isIndeterminate" @change="onToggleSelectAll">全选</a-checkbox>
+      <div class="view-toggles">
+        <a-tooltip title="列表视图">
+          <a-button size="small" :type="viewMode === 'list' ? 'primary' : 'default'" @click="viewMode = 'list'">
+            <UnorderedListOutlined />
+          </a-button>
+        </a-tooltip>
+        <a-tooltip title="图标视图">
+          <a-button size="small" :type="viewMode === 'icon' ? 'primary' : 'default'" @click="viewMode = 'icon'">
+            <AppstoreOutlined />
+          </a-button>
+        </a-tooltip>
+      </div>
+    </div>
+
+    <div class="my-computer-body" v-if="viewMode === 'icon'">
+      <div v-for="record in datas" :key="record.FileId + '-' + record.FileName" class="file-card-wrapper"
+        @click="onCardClick(record)" @dblclick="onCardDblClick(record)">
+        <div class="file-checkbox-wrapper">
+          <a-checkbox :checked="isSelected(record)" @click.stop="toggleSelect(record)" />
+        </div>
+        <div class="file-content">
+          <template v-if="record.IsDirectoryIndc == 'Y'">
+            <div class="folder-icon">
+              <FolderOutlined />
+            </div>
+            <div class="file-name" :title="record.OrgFileName">{{ record.OrgFileName }}</div>
+          </template>
+
+          <template v-else-if="isImage(record.OrderKey)">
+            <div class="image-thumb">
+              <img :src="record.Url" :title="record.OrgFileName" @click.stop="$emit('preview-image', record)" />
+            </div>
+            <div class="file-name" :title="record.OrgFileName">{{ record.OrgFileName }}</div>
+          </template>
+
+          <template v-else-if="isVideo(record.OrderKey)">
+            <div class="video-thumb">
+              <img :src="record.FormattedPic.replace('.m3u8', '.png')" :title="record.OrgFileName" />
+              <div class="play-overlay">
+                <PlayCircleOutlined />
+              </div>
+            </div>
+            <div class="file-name" :title="record.OrgFileName">{{ record.OrgFileName }}</div>
+          </template>
+
+          <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" />
+            </div>
+            <div class="file-name" :title="record.OrgFileName">{{ record.OrgFileName }}</div>
+          </template>
+
+          <template v-else>
+            <div class="file-icon">
+              <FileOutlined />
+            </div>
+            <div class="file-name" :title="record.OrgFileName">{{ record.OrgFileName }}</div>
+          </template>
+        </div>
+      </div>
+
+      <a-empty v-if="!datas || datas.length === 0" description="暂无文件" />
+    </div>
+
+    <div class="my-computer-body list-body" v-else>
+      <div v-for="record in datas" :key="record.FileId + '-' + record.FileName" class="list-item"
+        :class="{ selected: isSelected(record) }" @click="onCardClick(record)" @dblclick="onCardDblClick(record)">
+        <a-checkbox :checked="isSelected(record)" @click.stop="toggleSelect(record)" />
+        <div class="list-icon">
+          <template v-if="record.IsDirectoryIndc == 'Y'">
+            <FolderOutlined style="color: #faad14" />
+          </template>
+          <template v-else-if="isImage(record.OrderKey)">
+            <FileImageOutlined style="color: #52c41a" />
+          </template>
+          <template v-else-if="isVideo(record.OrderKey)">
+            <VideoCameraOutlined style="color: #1890ff" />
+          </template>
+          <template v-else-if="isAudio(record.OrderKey)">
+            <PlayCircleOutlined style="color: #eb2f96" />
+          </template>
+          <template v-else>
+            <FileOutlined style="color: #8c8c8c" />
+          </template>
+        </div>
+        <div class="list-name" :title="record.OrgFileName">{{ record.OrgFileName }}</div>
+        <div class="list-size">{{ formatSize(record.FileSize) }}</div>
+        <div class="list-date">{{ formatDate(record.CreatedDatetime) }}</div>
+      </div>
+
+      <a-empty v-if="!datas || datas.length === 0" description="暂无文件" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import {
+  FolderOutlined,
+  FileOutlined,
+  FileImageOutlined,
+  VideoCameraOutlined,
+  PlayCircleOutlined,
+  UnorderedListOutlined,
+  AppstoreOutlined,
+} from "@ant-design/icons-vue";
+import { DmsFileUploadViewDisplayData } from "@/data/auto/dmsFileUploadViewDisplayData";
+
+const props = defineProps<{
+  datas: DmsFileUploadViewDisplayData[];
+  selectedKeys: DmsFileUploadViewDisplayData[];
+}>();
+
+const emit = defineEmits([
+  "update:selectedKeys",
+  "select-change",
+  "open-folder",
+  "open-file",
+  "preview-image",
+]);
+
+const viewMode = ref<"icon" | "list">("icon");
+
+const isAllChecked = computed(() => {
+  if (!props.datas || props.datas.length === 0) return false;
+  return props.datas.every((d) => props.selectedKeys.some((s) => s.FileId === d.FileId));
+});
+
+const isIndeterminate = computed(() => {
+  if (!props.datas || props.datas.length === 0) return false;
+  const checkedCount = props.datas.filter((d) =>
+    props.selectedKeys.some((s) => s.FileId === d.FileId),
+  ).length;
+  return checkedCount > 0 && checkedCount < props.datas.length;
+});
+
+const isSelected = (record: DmsFileUploadViewDisplayData) => {
+  return props.selectedKeys.some((s) => s.FileId === record.FileId);
+};
+
+const toggleSelect = (record: DmsFileUploadViewDisplayData) => {
+  let newKeys: DmsFileUploadViewDisplayData[];
+  if (isSelected(record)) {
+    newKeys = props.selectedKeys.filter((s) => s.FileId !== record.FileId);
+  } else {
+    newKeys = [...props.selectedKeys, record];
+  }
+  emit("update:selectedKeys", newKeys);
+  emit("select-change", newKeys);
+};
+
+const onToggleSelectAll = (e: any) => {
+  if (e.target.checked) {
+    emit("update:selectedKeys", [...props.datas]);
+    emit("select-change", [...props.datas]);
+  } else {
+    emit("update:selectedKeys", []);
+    emit("select-change", []);
+  }
+};
+
+const onCardClick = (record: DmsFileUploadViewDisplayData) => {
+  toggleSelect(record);
+};
+
+const onCardDblClick = (record: DmsFileUploadViewDisplayData) => {
+  if (record.IsDirectoryIndc == "Y") {
+    emit("open-folder", record);
+  } else {
+    emit("open-file", record);
+  }
+};
+
+const isImage = (key: string) => {
+  if (!key) return false;
+  return /\.(png|jpe?g|gif|bmp|webp)$/i.test(key);
+};
+
+const isVideo = (key: string) => {
+  if (!key) return false;
+  return /\.(mp4|m3u8|rm|mpeg|mov|wmv|avi)$/i.test(key);
+};
+
+const isAudio = (key: string) => {
+  if (!key) return false;
+  return /\.(mp3|wav|flac|aac|ogg|wma)$/i.test(key);
+};
+
+const formatSize = (size: number) => {
+  size = size * 1024;
+  if (!size) return "-";
+  if (size < 1024) return size + " B";
+  if (size < 1024 * 1024) return (size / 1024).toFixed(1) + " KB";
+  if (size < 1024 * 1024 * 1024)
+    return (size / 1024 / 1024).toFixed(1) + " MB";
+  return (size / 1024 / 1024 / 1024).toFixed(2) + " GB";
+};
+
+const formatDate = (date: any) => {
+  if (!date) return "-";
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return "-";
+  return (
+    d.getFullYear() +
+    "-" +
+    String(d.getMonth() + 1).padStart(2, "0") +
+    "-" +
+    String(d.getDate()).padStart(2, "0") +
+    " " +
+    String(d.getHours()).padStart(2, "0") +
+    ":" +
+    String(d.getMinutes()).padStart(2, "0")
+  );
+};
+</script>
+
+<style scoped>
+.my-computer {
+  padding: 8px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.my-computer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 4px;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 8px;
+}
+
+.view-toggles {
+  display: flex;
+  gap: 4px;
+}
+
+.my-computer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 16px;
+}
+
+.my-computer-body.list-body {
+  flex-wrap: nowrap;
+  flex-direction: column;
+  gap: 0;
+}
+
+.file-card-wrapper {
+  width: 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 6px;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.file-card-wrapper:hover {
+  background: #f5f5f5;
+}
+
+.file-checkbox-wrapper {
+  position: absolute;
+  top: 2px;
+  left: 4px;
+  z-index: 1;
+}
+
+.file-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.folder-icon,
+.file-icon,
+.audio-icon {
+  font-size: 56px;
+  color: #faad14;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+}
+
+.file-icon {
+  color: #8c8c8c;
+}
+
+.audio-icon {
+  color: #eb2f96;
+}
+
+.audio-icon.playing {
+  animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.image-thumb,
+.video-thumb {
+  width: 100px;
+  height: 100px;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+  background: #f0f0f0;
+}
+
+.image-thumb img,
+.video-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.video-thumb .play-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.2);
+  font-size: 36px;
+  color: #fff;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.video-thumb:hover .play-overlay {
+  opacity: 1;
+}
+
+.file-name {
+  font-size: 12px;
+  margin-top: 4px;
+  text-align: center;
+  max-width: 110px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.15s;
+  gap: 12px;
+}
+
+.list-item:hover {
+  background: #f5f5f5;
+}
+
+.list-item.selected {
+  background: #e6f4ff;
+}
+
+.list-icon {
+  font-size: 20px;
+  width: 28px;
+  display: flex;
+  justify-content: center;
+}
+
+.list-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.list-size,
+.list-date {
+  color: #8c8c8c;
+  font-size: 13px;
+  width: 120px;
+  text-align: right;
+}
+
+.list-date {
+  width: 160px;
+}
+</style>

WebVue/src/components/basic/OperatorStation.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="operator-station">
+    <div class="operator-group main-actions">
+      <a-tooltip title="新增文件夹">
+        <a-button type="primary" v-if="canCreate" :icon="h(FolderAddOutlined)"
+          @click="$emit('create-folder')">新增文件夹</a-button>
+      </a-tooltip>
+      <a-tooltip title="上传文件">
+        <a-button type="primary" v-if="canCreate" :icon="h(UploadOutlined)" @click="triggerUpload">上传</a-button>
+      </a-tooltip>
+    </div>
+
+    <a-divider type="vertical" v-if="hasSelection" />
+
+    <div class="operator-group selection-actions" v-if="hasSelection">
+      <template v-if="!isDirectorySelected && isSingleItem">
+        <a-tooltip title="下载">
+          <a-button type="text" :icon="h(DownloadOutlined)" :disabled="!canAmend" @click="onDownload" >下载</a-button>
+        </a-tooltip>
+
+        <a-tooltip title="共享">
+          <a-button type="text" :icon="h(ShareAltOutlined)" @click="onShare">共享</a-button>
+        </a-tooltip>
+
+        <a-tooltip :title="publishTooltip">
+          <a-button type="text" :icon="h(NotificationOutlined)" @click="onPublish" >{{ publishTooltip }}</a-button>
+        </a-tooltip>
+
+        <a-tooltip :title="previewTooltip">
+          <a-button type="text" :icon="h(UnorderedListOutlined)" @click="onViewPreview" >{{ previewTooltip }}</a-button>
+        </a-tooltip>
+
+        <template v-if="isSingleVideo">
+          <a-tooltip title="播放">
+            <a-button type="text" :icon="h(PlayCircleOutlined, { style: { color: 'red' } })" @click="onPlayVideo"  >播放</a-button>
+          </a-tooltip>
+        </template>
+
+        <template v-if="isSingleAudio">
+          <a-tooltip v-if="selectedItem.IsPlay != 'Y'" title="播放">
+            <a-button type="text" :icon="h(PlayCircleOutlined, { style: { color: 'red' } })" @click="onPlayAudio"  >播放</a-button>
+          </a-tooltip>
+          <a-tooltip v-else-if="selectedItem.IsPause != 'Y'" title="暂停">
+            <a-button type="text" :icon="h(PauseCircleOutlined)" @click="onPauseAudio" >暂停</a-button>
+          </a-tooltip>
+          <a-tooltip v-else title="继续">
+            <a-button type="text" :icon="h(PlayCircleOutlined, { style: { color: 'red' } })" @click="onContinueAudio" >继续</a-button>
+          </a-tooltip>
+        </template>
+      </template>
+    </div>
+
+    <a-divider type="vertical" v-if="hasSelection" />
+
+    <div class="operator-group more-actions">
+      <a-dropdown>
+        <a-button>
+          更多
+          <DownOutlined />
+        </a-button>
+        <template #overlay>
+          <a-menu>
+            <a-menu-item key="preview" v-if="isImage(selectedOrderKey) && isSingleItem" :disabled="!canAmend" @click="$emit('preview', selectedItems)">
+              <EyeOutlined /> 预览
+            </a-menu-item>
+            <a-menu-item key="rename" v-if="isSingleItem" :disabled="!canAmend" @click="$emit('rename', selectedItems)">
+              <EditOutlined /> 重命名
+            </a-menu-item>
+            <a-menu-item key="move" v-if="isSingleItem" :disabled="!canView" @click="$emit('move', selectedItems)">
+              <ScissorOutlined /> 移动
+            </a-menu-item>
+            <a-menu-divider />
+            <a-menu-item key="delete":disabled="!canDelete" @click="$emit('delete', selectedItems)">
+              <DeleteOutlined /> 删除
+            </a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+    </div>
+
+    <div style="display: none">
+      <a-upload v-if="canCreate" v-model:file-list="fileList" name="file" :before-upload="onBeforeUpload"
+        :headers="headers" :show-upload-list="false" :action="uploadUrl" ref="uploadRef">
+      </a-upload>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, h } from "vue";
+import {
+  UploadOutlined,
+  FolderAddOutlined,
+  DownloadOutlined,
+  ShareAltOutlined,
+  NotificationOutlined,
+  UnorderedListOutlined,
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+  EyeOutlined,
+  EditOutlined,
+  ScissorOutlined,
+  DeleteOutlined,
+  DownOutlined,
+} from "@ant-design/icons-vue";
+import { DmsFileUploadViewDisplayData } from "@/data/auto/dmsFileUploadViewDisplayData";
+import type { UploadProps } from "ant-design-vue";
+
+const props = defineProps<{
+  selectedItems: DmsFileUploadViewDisplayData[];
+  uploadUrl: string;
+  headers: any;
+  canCreate: boolean;
+  canAmend: boolean;
+  canDelete: boolean;
+  canView: boolean;
+}>();
+
+const emit = defineEmits([
+  "create-folder",
+  "before-upload",
+  "download",
+  "share",
+  "publish",
+  "view-preview",
+  "play-video",
+  "play-audio",
+  "pause-audio",
+  "continue-audio",
+  "preview",
+  "rename",
+  "move",
+  "delete",
+]);
+
+const fileList = ref<UploadProps["fileList"]>([]);
+const uploadRef = ref<any>(null);
+
+const hasSelection = computed(() => props.selectedItems.length > 0);
+const isDirectorySelected = computed(() =>
+  props.selectedItems.some((s) => s.IsDirectoryIndc == "Y"),
+);
+const isSingleItem = computed(() => props.selectedItems.length === 1);
+
+const selectedItem = computed(() => {
+  return props.selectedItems[0] || ({} as DmsFileUploadViewDisplayData);
+});
+
+const selectedOrderKey = computed(() => {
+  return selectedItem.value?.OrderKey || selectedItem.value?.OrgFileName || "";
+});
+
+const isImage = (key: string) => {
+  if (!key) return false;
+  return /\.(png|jpe?g|gif|bmp|webp)$/i.test(key);
+};
+
+const isVideo = (key: string) => {
+  if (!key) return false;
+  return /\.(mp4|m3u8|rm|mpeg|mov|wmv|avi)$/i.test(key);
+};
+
+const isAudio = (key: string) => {
+  if (!key) return false;
+  return /\.(mp3|wav|flac|aac|ogg|wma)$/i.test(key);
+};
+
+const isSingleVideo = computed(() => {
+  return isSingleItem.value && isVideo(selectedOrderKey.value);
+});
+
+const isSingleAudio = computed(() => {
+  return isSingleItem.value && isAudio(selectedOrderKey.value);
+});
+
+const publishTooltip = computed(() => {
+  if (isImage(selectedOrderKey.value)) return "发布相册";
+  if (isVideo(selectedOrderKey.value)) return "发布影视专辑";
+  if (isAudio(selectedOrderKey.value)) return "发布音乐专辑";
+  return "发布";
+});
+
+const previewTooltip = computed(() => {
+  if (isImage(selectedOrderKey.value)) return "相册展览";
+  if (isVideo(selectedOrderKey.value)) return "影视厅播放";
+  if (isAudio(selectedOrderKey.value)) return "音乐厅播放";
+  return "预览";
+});
+
+const triggerUpload = () => {
+  uploadRef.value?.$el?.querySelector("input")?.click();
+};
+
+const onBeforeUpload: UploadProps["beforeUpload"] = (file) => {
+  emit("before-upload", file);
+  return false;
+};
+
+const onDownload = () => {
+  emit("download", props.selectedItems);
+};
+
+const onShare = () => {
+  emit("share", props.selectedItems);
+};
+
+const onPublish = () => {
+  emit("publish", props.selectedItems);
+};
+
+const onViewPreview = () => {
+  emit("view-preview", props.selectedItems);
+};
+
+const onPlayVideo = () => {
+  emit("play-video", selectedItem.value);
+};
+
+const onPlayAudio = () => {
+  emit("play-audio", selectedItem.value);
+};
+
+const onPauseAudio = () => {
+  emit("pause-audio", selectedItem.value);
+};
+
+const onContinueAudio = () => {
+  emit("continue-audio", selectedItem.value);
+};
+</script>
+
+<style scoped>
+.operator-station {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  background: #fafafa;
+  border-bottom: 1px solid #e8e8e8;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.operator-group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.main-actions :deep(.ant-btn) {
+  height: 32px;
+}
+
+.selection-actions :deep(.ant-btn) {
+  padding: 4px 8px;
+  font-size: 16px;
+}
+</style>

WebVue/src/components/basic/Search.vue

@@ -162,7 +162,7 @@ const paginationJ = ref(props["pagination"]);
 const rowSelectionType = ref(props["rowSelectionType"]);
 const tableY = ref(props["scrolly"]);
 
-const enquiry = inject(enquiryMethodKey);
+const enquiry = inject(enquiryMethodKey, undefined);
 
 const datas = enquiry?.getDatas()!;
 

WebVue/src/components/basic/Toolbar.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="toolbar">
+    <div class="toolbar-left">
+      <a-tooltip title="返回顶层">
+        <a-button
+          type="text"
+          class="nav-btn"
+          :disabled="!canGoTop"
+          @click="$emit('go-top')"
+        >
+          <HomeOutlined />
+        </a-button>
+      </a-tooltip>
+      <a-tooltip title="返回上层">
+        <a-button
+          type="text"
+          class="nav-btn"
+          :disabled="!canGoBack"
+          @click="$emit('go-back')"
+        >
+          <ArrowLeftOutlined />
+        </a-button>
+      </a-tooltip>
+      <a-tooltip title="刷新">
+        <a-button
+          type="text"
+          class="nav-btn"
+          :loading="loading"
+          @click="$emit('refresh')"
+        >
+          <ReloadOutlined />
+        </a-button>
+      </a-tooltip>
+    </div>
+
+    <div class="toolbar-center">
+      <a-breadcrumb class="breadcrumb">
+        <a-breadcrumb-item
+          v-for="(item, index) in breadcrumbItems"
+          :key="index"
+          @click="onBreadcrumbClick(item, index)"
+          :class="{ clickable: index < breadcrumbItems.length - 1 }"
+        >
+          <template v-if="index === 0">
+            <LaptopOutlined style="margin-right: 4px" />
+          </template>
+         <span :style="{ cursor: index < breadcrumbItems.length - 1 ? 'pointer' : 'default',
+    color: index < breadcrumbItems.length - 1 ? '#1677ff' : '' }">{{ item.displayName }}</span> 
+        </a-breadcrumb-item>
+      </a-breadcrumb>
+    </div>
+
+    <div class="toolbar-right">
+      <a-input-search
+        v-model:value="searchKeyword"
+        placeholder="搜索文件名称"
+        allow-clear
+        style="width: 240px"
+        @search="onSearch"
+        @pressEnter="onSearch"
+      >
+        <template #prefix>
+          <SearchOutlined />
+        </template>
+      </a-input-search>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import {
+  HomeOutlined,
+  ArrowLeftOutlined,
+  ReloadOutlined,
+  LaptopOutlined,
+  SearchOutlined,
+} from "@ant-design/icons-vue";
+
+interface BreadcrumbItem {
+  value: string;
+  displayName: string;
+}
+
+const props = defineProps<{
+  pathStack: BreadcrumbItem[];
+  rootPath: string;
+  loading: boolean;
+}>();
+
+const emit = defineEmits([
+  "go-top",
+  "go-back",
+  "refresh",
+  "search",
+  "breadcrumb-click",
+]);
+
+const searchKeyword = ref("");
+
+const canGoTop = computed(() => {
+  return props.pathStack.length > 1;
+});
+
+const canGoBack = computed(() => {
+  return props.pathStack.length > 1;
+});
+
+const breadcrumbItems = computed(() => {
+  return props.pathStack;
+});
+
+const onSearch = () => {
+  emit("search", searchKeyword.value);
+};
+
+const onBreadcrumbClick = (item: BreadcrumbItem, index: number) => {
+  emit("breadcrumb-click", item, index);
+};
+</script>
+
+<style lang="less">
+.toolbar {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  background: #fafafa;
+  border-bottom: 1px solid #e8e8e8;
+  gap: 12px;
+}
+
+.toolbar-left {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.nav-btn {
+  width: 36px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.nav-btn:hover:not(:disabled) {
+  background: #e6f4ff;
+  color: #1677ff;
+}
+
+.nav-btn:disabled {
+  color: #bfbfbf;
+}
+
+.toolbar-center {
+  flex: 1;
+  overflow: hidden;
+}
+
+.breadcrumb {
+  margin: 0;
+  font-size: 14px;
+}
+
+.breadcrumb-item.clickable {
+  cursor: pointer;
+}
+.breadcrumb-item.clickable:hover {
+  color: #1677ff;
+}
+
+.toolbar-right {
+  flex-shrink: 0;
+}
+
+
+
+</style>