diff --git a/CloudBuilder/CloudBuilder.Master.Service/DmsFileService.auto.cs b/CloudBuilder/CloudBuilder.Master.Service/DmsFileService.auto.cs
index 597ad52..dac23b3 100644
--- a/CloudBuilder/CloudBuilder.Master.Service/DmsFileService.auto.cs
+++ b/CloudBuilder/CloudBuilder.Master.Service/DmsFileService.auto.cs
@@ -17,6 +17,7 @@ using SixLabors.ImageSharp;
 using SixLabors.ImageSharp.PixelFormats;
 using SixLabors.ImageSharp.Processing;
 using System;
+using System.Linq;
 using static System.Net.Mime.MediaTypeNames;
 using Image = SixLabors.ImageSharp.Image;
 namespace CloudBuilder.Master.Service
@@ -255,8 +256,8 @@ namespace CloudBuilder.Master.Service
             {
                 sqlWhere = sqlWhere + string.Format(" and {0} ='{1}' ", FamilyDmsFileViewEntity.DB_CREATED_BY, service.UserId);
             }
-
-            if (string.IsNullOrEmpty(sqlWhere)) sqlWhere = " and 1=0 ";
+            //取了顶级目录
+            if (string.IsNullOrEmpty(sqlWhere)) sqlWhere = string.Format(" and {0} ={1} ", FamilyDmsFileViewEntity.DB_FAMILY_NAME, FamilyDmsFileViewEntity.DB_FILE_PATH);
 
             FamilyDmsFileViewEntity entity = FamilyDmsFileViewEntity.GetInstance(repository.GetDbContext().Database.ProviderName);
             string sql = entity.GetSelectTopFrom(criteria.limit, criteria.page, criteria.orderby.StringToDbField(), criteria.orderbytag, sqlWhere);
@@ -320,11 +321,16 @@ namespace CloudBuilder.Master.Service
                 {
                     item.Url = FileTypePolicy.PackUrl(service, item.CreatedBy, item.OrderKey, item.TranscodeIndc);
                 }
+
+                data.Families = list.Select(x => new FamilyDmsFileViewDisplayData(x)
+                {
+                    FileType = FileTypePolicy.GetType(x.OrderKey),
+                    FormattedPic = FileTypePolicy.PackUrl(service, x.CreatedBy, x.OrderKey, YesNoPolicy.YES)
+                }).ToArray();
             }
 
             data.Limit = criteria.limit;
             data.Page = criteria.page;
-            data.Families = list.Select(x => new FamilyDmsFileViewDisplayData(x) { FileType = FileTypePolicy.GetType(x.OrderKey) }).ToArray();
             data.Total = count;
             //data.Sql = sql;
             data.ErrorMessage = err;
@@ -1504,7 +1510,7 @@ namespace CloudBuilder.Master.Service
         {
             IRepository<FamilyGroupManagerUserViewEntity> repositoryFamilyGroupManager = repository.GetRepository<IRepository<FamilyGroupManagerUserViewEntity>>();
 
-            FamilyGroupManagerUserViewEntity[] ents = repositoryFamilyGroupManager.DetachedEntities.Where(x => x.UserName == service.UserId).ToArray();
+            FamilyGroupManagerUserViewEntity[] ents = repositoryFamilyGroupManager.DetachedEntities.Where(x => x.UserName == service.UserId && x.ValidIndc=="Y").ToArray();
             List<SelectOption> l = new List<SelectOption>();
             SelectOption selectOption;
 
@@ -1530,7 +1536,7 @@ namespace CloudBuilder.Master.Service
 
             IRepository<FamilyGroupEntity> repositoryFamilyGroup = repository.GetRepository<IRepository<FamilyGroupEntity>>();
 
-            FamilyGroupEntity group = repositoryFamilyGroup.DetachedEntities.Where(x => x.FamilyName == familyName).FirstOrDefault()!;
+            FamilyGroupEntity group = repositoryFamilyGroup.DetachedEntities.Where(x => x.FamilyName == familyName && x.ValidIndc==YesNoPolicy.YES).FirstOrDefault()!;
             if (group == null) return l.ToArray();
 
             selectOption = new SelectOption();
diff --git a/CloudBuilder/CloudBuilder.Master.Service/FamilyGroupService.auto.cs b/CloudBuilder/CloudBuilder.Master.Service/FamilyGroupService.auto.cs
index ce9b160..58d27fa 100644
--- a/CloudBuilder/CloudBuilder.Master.Service/FamilyGroupService.auto.cs
+++ b/CloudBuilder/CloudBuilder.Master.Service/FamilyGroupService.auto.cs
@@ -152,6 +152,19 @@ namespace CloudBuilder.Master.Service
                     IsSharePermission = true,
                 }).ToArray();
             }
+            else
+            {
+                data.FamilyGroupManagers = null;
+                fgms = repositoryFamilyGroupManager.DetachedEntities.Where(x => x.FamilyName == key && x.UserName == service.UserId).ToArray();
+                if (fgms != null && fgms.Length > 0)
+                {
+                    data.FamilyGroupManagers = fgms.Where(x => x.ValidIndc == YesNoPolicy.YES)!.Select(x => new FamilyGroupManagerDisplayData(x)
+                    { UserLocalName = users!.Where(y => y.UserName == x.UserName).FirstOrDefault()!.UserLocalName }).ToArray();
+
+                    data.FamilyGroupRequests = fgms.Where(x => x.ValidIndc == YesNoPolicy.NO)!.Select(x => new FamilyGroupManagerDisplayData(x)
+                    { UserLocalName = users!.Where(y => y.UserName == x.UserName).FirstOrDefault()!.UserLocalName }).ToArray();
+                }
+            }
 
             data.IsManager = isManager;
 
@@ -570,7 +583,7 @@ namespace CloudBuilder.Master.Service
             bool isManager = false;
 
             IRepository<FamilyGroupManagerEntity> repositoryFamilyGroupManager = repository.GetRepository<IRepository<FamilyGroupManagerEntity>>();
-            FamilyGroupManagerEntity[] fgms = repositoryFamilyGroupManager.DetachedEntities.Where(x => x.ManagerIndc == YesNoPolicy.YES && x.FamilyName == key && x.ValidIndc == YesNoPolicy.YES).ToArray();
+            FamilyGroupManagerEntity[] fgms = repositoryFamilyGroupManager.DetachedEntities.Where(x => x.ManagerIndc == YesNoPolicy.YES && x.UserName == service.UserId && x.FamilyName == key && x.ValidIndc == YesNoPolicy.YES).ToArray();
             if (fgms == null || fgms.Length == 0)
             {
                 throw new ValidatedException("您不是管理员,不能解散");
@@ -588,7 +601,7 @@ namespace CloudBuilder.Master.Service
         {
             IRepository<FamilyGroupManagerEntity> repositoryFamilyGroupManager = repository.GetRepository<IRepository<FamilyGroupManagerEntity>>();
             FamilyGroupManagerEntity org = repositoryFamilyGroupManager.DetachedEntities.Where(x => x.FamilyName == manager.FamilyName && x.UserName == service.UserId).FirstOrDefault()!;
-            if (org != null) { return; }
+            if (org != null) { throw new ValidatedException("您已申请加入,耐心等待审核。"); }
 
             org = new FamilyGroupManagerEntity();
             org.FamilyName = manager.FamilyName;
@@ -623,6 +636,13 @@ namespace CloudBuilder.Master.Service
         public void UpdateFamilyGroupManager(FamilyGroupManagerEntity manager)
         {
             IRepository<FamilyGroupManagerEntity> repositoryFamilyGroupManager = repository.GetRepository<IRepository<FamilyGroupManagerEntity>>();
+
+            FamilyGroupManagerEntity[] fgms = repositoryFamilyGroupManager.DetachedEntities.Where(x => x.ManagerIndc == YesNoPolicy.YES && x.UserName == service.UserId && x.FamilyName == manager.FamilyName && x.ValidIndc == YesNoPolicy.YES).ToArray();
+            if (fgms == null || fgms.Length == 0)
+            {
+                throw new ValidatedException("您不是管理员");
+            }
+
             FamilyGroupManagerEntity org = repositoryFamilyGroupManager.DetachedEntities.Where(x => x.FamilyName == manager.FamilyName && x.UserName == manager.UserName).FirstOrDefault()!;
             if (org == null) { return; }
 
@@ -636,6 +656,13 @@ namespace CloudBuilder.Master.Service
         public void DeleteFamilyGroupManager(FamilyGroupManagerEntity manager)
         {
             IRepository<FamilyGroupManagerEntity> repositoryFamilyGroupManager = repository.GetRepository<IRepository<FamilyGroupManagerEntity>>();
+
+            FamilyGroupManagerEntity[] fgms = repositoryFamilyGroupManager.DetachedEntities.Where(x => x.ManagerIndc == YesNoPolicy.YES && x.UserName == service.UserId && x.FamilyName == manager.FamilyName && x.ValidIndc == YesNoPolicy.YES).ToArray();
+            if (fgms == null || fgms.Length == 0)
+            {
+                throw new ValidatedException("您不是管理员");
+            }
+
             FamilyGroupManagerEntity org = repositoryFamilyGroupManager.DetachedEntities.Where(x => x.FamilyName == manager.FamilyName && x.UserName == manager.UserName).FirstOrDefault()!;
             if (org == null) { return; }
 
diff --git a/CloudBuilder/CloudBuilder.Master/Data/FamilyDmsFileViewDisplayData.cs b/CloudBuilder/CloudBuilder.Master/Data/FamilyDmsFileViewDisplayData.cs
index 5c426e7..a312787 100644
--- a/CloudBuilder/CloudBuilder.Master/Data/FamilyDmsFileViewDisplayData.cs
+++ b/CloudBuilder/CloudBuilder.Master/Data/FamilyDmsFileViewDisplayData.cs
@@ -32,5 +32,7 @@ namespace CloudBuilder.Master.Data
         public string? IsPlay { get; set; }
 
         public string? IsPause { get; set; }
+
+        public string? FormattedPic { get; set; }
     }
 }
diff --git a/CloudBuilder/CloudBuilder.Web.Entry/appsettings.json b/CloudBuilder/CloudBuilder.Web.Entry/appsettings.json
index 18e7ad2..56133b1 100644
--- a/CloudBuilder/CloudBuilder.Web.Entry/appsettings.json
+++ b/CloudBuilder/CloudBuilder.Web.Entry/appsettings.json
@@ -38,7 +38,7 @@
       "Issuer": "Owen Chen",
       "Audience": "Cloud Builder",
       "Secret": "{8619F7C3-B53C-4B85-99F0-983D351ECD82}",
-      "AccessExpireMins": 120, //4小时过期
+      "AccessExpireMins": 480, //8小时过期
       "RefreshExpireMins": 1440, // 1天
       "IsRefreshAbsoluteExpired": false
     },
diff --git a/WebVue/src/components/basic/MyComputerFamily.vue b/WebVue/src/components/basic/MyComputerFamily.vue
new file mode 100644
index 0000000..6328b7f
--- /dev/null
+++ b/WebVue/src/components/basic/MyComputerFamily.vue
@@ -0,0 +1,488 @@
+<template>
+  <div class="my-computer" ref="containerRef">
+    <div class="my-computer-header">
+      <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)"
+      >
+        <!-- checkbox -->
+        <div class="file-checkbox-wrapper">
+          <a-checkbox
+            :checked="isSelected(record)"
+            @click.stop="toggleSelect(record)"
+          />
+        </div>
+        <!-- 状态角标：右上角 -->
+        <div class="file-status-badge">
+          <LockOutlined
+            v-if="record.PermissionIndc === 'N'"
+            class="badge-lock"
+          />
+          <template v-if="record.PermissionIndc === 'Y'">
+            <UnlockOutlined class="badge-unlock" />
+            <ShareAltOutlined
+              v-if="record.FavoriteIndc === 'Y'"
+              class="badge-share"
+            />
+          </template>
+        </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-wrap">
+          <span class="list-name" :title="record.OrgFileName">{{
+            record.OrgFileName
+          }}</span>
+          <span class="list-status-icon">
+            <LockOutlined
+              v-if="record.PermissionIndc === 'N'"
+              class="icon-lock"
+            />
+            <template v-if="record.PermissionIndc === 'Y'">
+              <UnlockOutlined class="icon-unlock" />
+              <ShareAltOutlined
+                v-if="record.FavoriteIndc === 'Y'"
+                class="icon-share"
+              />
+            </template>
+          </span>
+        </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 } from "vue";
+import {
+  FolderOutlined,
+  FileOutlined,
+  FileImageOutlined,
+  VideoCameraOutlined,
+  PlayCircleOutlined,
+  UnorderedListOutlined,
+  AppstoreOutlined,
+  LockOutlined,
+  UnlockOutlined,
+  ShareAltOutlined,
+} from "@ant-design/icons-vue";
+import { FamilyDmsFileViewDisplayData } from "@/data/auto/familyDmsFileViewDisplayData";
+import { notification } from "ant-design-vue";
+const props = defineProps<{
+  datas: FamilyDmsFileViewDisplayData[];
+  selectedKeys: FamilyDmsFileViewDisplayData[];
+}>();
+const emit = defineEmits([
+  "update:selectedKeys",
+  "select-change",
+  "open-folder",
+  "open-file",
+  "preview-image",
+]);
+const viewMode = ref<"icon" | "list">("icon");
+const isSelected = (record: FamilyDmsFileViewDisplayData) => {
+  return props.selectedKeys.some((s) => s.FileId === record.FileId);
+};
+/**
+ * 单选逻辑：
+ * 如果当前已经选中，则清空；否则选中当前这一项
+ */
+const toggleSelect = (record: FamilyDmsFileViewDisplayData) => {
+  let newKeys: FamilyDmsFileViewDisplayData[];
+  if (isSelected(record)) {
+    // 点击已选中项 → 取消选择
+    newKeys = [];
+  } else {
+    // 点击未选中项 → 只选中当前一个
+    newKeys = [record];
+  }
+  emit("update:selectedKeys", newKeys);
+  emit("select-change", newKeys);
+};
+const onCardClick = (record: FamilyDmsFileViewDisplayData) => {
+  toggleSelect(record);
+};
+const onCardDblClick = (record: FamilyDmsFileViewDisplayData) => {
+  if (record.IsDirectoryIndc == "Y") {
+    if (record.PermissionIndc == "Y") emit("open-folder", record);
+    else {
+      notification.info({
+        message: "系统提示：",
+        description: "你还没有权限访问该文件夹",
+        placement: "topRight",
+      });
+    }
+  } 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: flex-end;
+  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-status-badge {
+  position: absolute;
+  top: 2px;
+  right: 4px;
+  z-index: 1;
+  display: flex;
+  gap: 4px;
+}
+.badge-lock {
+  font-size: 16px;
+  color: #8c8c8c;
+}
+.badge-unlock {
+  font-size: 16px;
+  color: #52c41a;
+}
+.badge-share {
+  font-size: 16px;
+  color: #1890ff;
+}
+.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-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  overflow: hidden;
+}
+.list-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.list-status-icon {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.icon-lock {
+  font-size: 14px;
+  color: #8c8c8c;
+}
+.icon-unlock {
+  font-size: 14px;
+  color: #52c41a;
+}
+.icon-share {
+  font-size: 14px;
+  color: #1890ff;
+}
+.list-size,
+.list-date {
+  color: #8c8c8c;
+  font-size: 13px;
+  width: 120px;
+  text-align: right;
+}
+.list-date {
+  width: 160px;
+}
+</style>
diff --git a/WebVue/src/components/basic/OperatorStationFamily.vue b/WebVue/src/components/basic/OperatorStationFamily.vue
new file mode 100644
index 0000000..eb60b4f
--- /dev/null
+++ b/WebVue/src/components/basic/OperatorStationFamily.vue
@@ -0,0 +1,287 @@
+<template>
+  <div class="operator-station" v-if="!isDirectoryTop">
+    <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>
+    </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>
+
+        <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>
+      <template v-else-if="isDirectorySelected">
+        <a-tooltip :title="favorite">
+          <a-button type="text" :icon="h(ShareAltOutlined)" @click="$emit('set-share-folder')"
+            >{{favorite}}</a-button
+          >
+        </a-tooltip>
+      </template>
+    </div>
+
+    <a-divider type="vertical" v-if="hasSelection" />
+
+    <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 { FamilyDmsFileViewDisplayData } from "@/data/auto/familyDmsFileViewDisplayData";
+import type { UploadProps } from "ant-design-vue";
+interface BreadcrumbItem {
+  value: string;
+  displayName: string;
+}
+
+const props = defineProps<{
+  selectedItems: FamilyDmsFileViewDisplayData[];
+  pathStack: BreadcrumbItem[];
+  uploadUrl: string;
+  headers: any;
+  canCreate: boolean;
+  canAmend: boolean;
+  canDelete: boolean;
+  canView: boolean;
+}>();
+
+const emit = defineEmits([
+  "create-folder",
+  "set-share-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 favorite = computed(() => {
+  // 单选模式，取第一条选中
+  const record = props.selectedItems[0];
+  if (!record) return "";
+  // 无权限，不支持分享
+  if (record.PermissionIndc !== "Y") return "";
+
+  if (record.FavoriteIndc === "N") {
+    return "设置分享";
+  } else if (record.FavoriteIndc === "Y") {
+    return "取消分享";
+  }
+  return "";
+});
+
+
+const isDirectoryTop = computed(() => props.pathStack.length < 2);
+
+const isSingleItem = computed(() => props.selectedItems.length === 1);
+
+const selectedItem = computed(() => {
+  return props.selectedItems[0] || ({} as FamilyDmsFileViewDisplayData);
+});
+
+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>
diff --git a/WebVue/src/views/master/FamilyGroupOperation.vue b/WebVue/src/views/master/FamilyGroupOperation.vue
index 0f661f0..27cc1f9 100644
--- a/WebVue/src/views/master/FamilyGroupOperation.vue
+++ b/WebVue/src/views/master/FamilyGroupOperation.vue
@@ -223,7 +223,7 @@
             </template>
           </a-collapse-panel>
         </a-collapse>
-        <a-collapse v-model:activeKey="activeKey" v-if="data.IsManager">
+        <a-collapse v-model:activeKey="activeKey">
           <a-collapse-panel key="2" header="待审核成员名单">
             <a-table
               bordered
@@ -252,8 +252,8 @@
                 >
                   {{ datas.record.Notice }}
                 </template>
-                <template
-                  v-else-if="datas.column.dataIndex === 'ok' && !isEdit"
+                <template 
+                  v-else-if="data.IsManager && datas.column.dataIndex === 'ok' && !isEdit"
                 >
                   <CheckCircleTwoTone
                     :style="{ fontSize: '24px', color: 'green' }"
@@ -266,7 +266,7 @@
                   />
                 </template>
                 <template
-                  v-else-if="datas.column.dataIndex === 'reject' && !isEdit"
+                  v-else-if="data.IsManager && datas.column.dataIndex === 'reject' && !isEdit"
                 >
                   <CloseCircleOutlined
                     :style="{ fontSize: '24px', color: 'red' }"
diff --git a/WebVue/src/views/master/FamilyGroupShare.vue b/WebVue/src/views/master/FamilyGroupShare.vue
index c2cdd4f..e171780 100644
--- a/WebVue/src/views/master/FamilyGroupShare.vue
+++ b/WebVue/src/views/master/FamilyGroupShare.vue
@@ -1,303 +1,53 @@
 <template>
   <a-spin size="large" :spinning="loading" :tip="spinTip">
-    <search
-      @on-submit="onSubmit"
-      @on-print="onPrint"
-      @on-reset="onReset"
-      @use-pagination="onPagination"
-      :scrollx="200"
-      @handle-change-bind-value="handleChangeBindValue"
-      :is-modal="isModal"
-      :loading="loading"
-      :pagination="result"
-      :rowSelectionType="selectionType"
-      @on-select-change="onSelectChange"
-    >
-      <template #control>
-        <a-button
-          type="primary"
-          v-if="canCreate && !isModal"
-          :icon="h(FolderAddOutlined)"
-          @click.prevent="onCreate"
-          >新增文件夹</a-button
-        >
-      </template>
+    <div class="dms-file-enquiry">
+      <Toolbar
+        :path-stack="pathStack"
+        :root-path="rootPath"
+        :loading="loading"
+        @go-top="onGoTop"
+        @go-back="onGoBack"
+        @refresh="onReSearch"
+        @search="onSearchByName"
+        @breadcrumb-click="onBreadcrumbClick"
+      />
 
-      <template #headerCell="{ column }">
-        <template v-if="column.dataIndex === FamilyDmsFileViewEntity.URL">
-          <span
-            style="color: darkgoldenrod; font-size: large; cursor: pointer"
-            @click.prevent="onChangeFolder(rootPath)"
-          >
-            <LaptopOutlined
-              style="color: darkgoldenrod; font-size: larger"
-              title="返回顶层"
-            />返回顶层
-          </span>
-          <span
-            style="color: darkgoldenrod; font-size: large; cursor: pointer"
-            @click.prevent="onLastFolder()"
-          >
-            <RollbackOutlined
-              style="color: darkgoldenrod; font-size: larger; margin-left: 16px"
-              title="返回上层"
-            />返回上层
-          </span>
-        </template>
-      </template>
+      <OperatorStationFamily
+        :selected-items="keys"
+        :path-stack="pathStack"
+        :upload-url="uploadUrl"
+        :headers="headers"
+        :can-create="canCreate"
+        :can-amend="canAmend"
+        :can-delete="canDelete"
+        :can-view="canView"
+        @create-folder="onCreate"
+        @set-share-folder="onShareFolder"
+        @before-upload="beforeUpload"
+        @download="onDownloadSelected"
+        @share="onShareSelected"
+        @publish="onPublishSelected"
+        @view-preview="onViewPreviewSelected"
+        @play-video="onUrlVideoPlayItem"
+        @play-audio="onPlayAudioItem"
+        @pause-audio="onPauseAudio"
+        @continue-audio="onContinueAudio"
+        @preview="onPreviewSelected"
+        @rename="onAmendSelected"
+        @move="onMoveSelected"
+        @delete="onDeleteSelected"
+      />
 
-      <template #bodyCell="{ column, record, index }">
-        <template v-if="column.dataIndex === FamilyDmsFileViewEntity.URL">
-          <template v-if="!fileTypePolicy.isImage(record.OrderKey)">
-            <template v-if="record.IsDirectoryIndc == 'Y'">
-              <a-card hoverable style="width: 300px">
-                <a-card-meta>
-                  <template #description>
-                    <span
-                      style="
-                        color: darkgoldenrod;
-                        margin-left: 4pxr;
-                        cursor: pointer;
-                        font-size: 26px;
-                      "
-                      @click.prevent="onChangeFolder(record.FileName)"
-                    >
-                      <FolderOutlined
-                        style="color: darkgoldenrod; font-size: 48px"
-                        title="打开文件夹"
-                      />{{ record.OrgFileName }}
-                    </span>
-                  </template>
-                </a-card-meta>
-                <template #actions>
-                  <template v-if="record.PermissionIndc == 'Y'">
-                    <span style="font-size: 24px">
-                      <CheckCircleTwoTone
-                        style="color: darkgoldenrod; font-size: larger"
-                      />有权限
-                    </span>
-                  </template>
-                  <template v-if="record.PermissionIndc == 'N'">
-                    <span style="font-size: 24px">
-                      <CloseCircleOutlined
-                        style="color: rgb(19, 185, 190); font-size: larger"
-                      />无权限
-                    </span>
-                  </template>
-                  <template
-                    v-if="
-                      record.FavoriteIndc == 'Y' && record.PermissionIndc == 'Y'
-                    "
-                  >
-                    <span
-                      style="font-size: 24px; cursor: pointer; color: salmon"
-                      @click.prevent="
-                        onDeleteFamilyFolderFavorite(record.FolderName)
-                      "
-                    >
-                      <heart-two-tone
-                        two-tone-color="salmon"
-                        style="font-size: 24px"
-                      />已分享
-                    </span>
-                  </template>
-                  <template
-                    v-if="
-                      record.FavoriteIndc == 'N' && record.PermissionIndc == 'Y'
-                    "
-                  >
-                    <span
-                      style="font-size: 24px; cursor: pointer"
-                      @click.prevent="
-                        onInsertFamilyFolderFavorite(record.FolderName)
-                      "
-                    >
-                      <LoginOutlined
-                        two-tone-color="#0010"
-                        style="font-size: 24px"
-                      />未分享
-                    </span>
-                  </template>
-                  <template v-if="record.PermissionIndc == 'N'">
-                    <span style="font-size: 24px">
-                      <LoginOutlined
-                        two-tone-color="green"
-                        style="font-size: 24px"
-                      />不能分享
-                    </span>
-                  </template>
-                </template>
-              </a-card>
-            </template>
-            <template v-else-if="fileTypePolicy.isVideo(record.OrderKey)">
-              <a-card style="width: 300px">
-                <template #cover>
-                  <img
-                    style="height: 220px"
-                    :src="record.Url.replace('.m3u8', '.png')"
-                    :title="record.OrgFileName"
-                  />
-                </template>
-                <a-card-meta>
-                  <template #description>
-                    <a-flex>
-                      <cust-icon-font
-                        size="26"
-                        type="icon-foldervideo"
-                        @click.prevent="
-                          onUrlVideoPlay(record.Url, record.OrgFileName)
-                        "
-                      />
-                      <span
-                        style="
-                          color: darkgoldenrod;
-                          margin-left: 4pxr;
-                          margin-top: 2px;
-                        "
-                      >
-                        {{ record.OrgFileName }}
-                      </span>
-                      <cust-icon-font
-                        size="26"
-                        type="icon-mp3-play"
-                        @click.prevent="onVideoPlay(record.FileId)"
-                      />
-                    </a-flex>
-                  </template>
-                </a-card-meta>
-              </a-card>
-            </template>
-            <template v-else-if="fileTypePolicy.isAudio(record.OrderKey)">
-              <a-card hoverable style="width: 300px">
-                <a-flex>
-                  <cust-icon-font
-                    size="60"
-                    type="icon-foldermp3"
-                    @click.prevent="onPlayAudio(toFamilyView(record))"
-                  />
-                  <span
-                    style="
-                      color: darkgoldenrod;
-                      margin-left: 4pxr;
-                      margin-top: 10px;
-                    "
-                  >
-                    {{ record.OrgFileName }}
-                  </span>
-                  <div
-                    v-if="record.IsPlay == 'Y'"
-                    style="margin-left: 16px; height: 60px; width: 60px"
-                    :class="record.IsPause == '' ? 'rotating-element' : ''"
-                  >
-                    <cust-icon-font
-                      size="60"
-                      type="icon-playmp3"
-                      v-if="record.IsPause == ''"
-                      @click.prevent="onPauseAudio(toFamilyView(record))"
-                    />
-                    <cust-icon-font
-                      size="54"
-                      type="icon-mp3-play"
-                      style="color: #ff7878"
-                      v-if="record.IsPlay == 'Y' && record.IsPause == 'Y'"
-                      @click.prevent="onContinueAudio(toFamilyView(record))"
-                    />
-                  </div>
-                </a-flex>
-              </a-card>
-            </template>
-            <template v-else>
-              <DownloadOutlined
-                style="
-                  color: rgb(19, 185, 190);
-                  font-size: larger;
-                  margin-right: 12px;
-                "
-                title="下载"
-                @click.prevent="
-                  onDownloadFile(record.FileId, record.OrgFileName)
-                "
-              />
-              <span>{{ record.OrgFileName }} </span>
-            </template>
-          </template>
-          <template v-else>
-            <a-card hoverable style="width: 300px">
-              <template #cover>
-                <img
-                  style="height: 260px; object-fit: cover"
-                  :src="record.Url"
-                  :title="record.OrgFileName"
-                  @click="onPreviewFile(record.CreatedBy, record.OrderKey)"
-                />
-              </template>
-              <a-card-meta>
-                <template #description>
-                  <span
-                    style="color: darkgoldenrod; margin-left: 4pxr"
-                    @click.prevent="
-                      onViewPictureFile(record.FileId, record.OrgFileName)
-                    "
-                  >
-                    <cust-icon-font size="26" type="icon-source-pic" />
-                    {{ record.OrgFileName }}
-                  </span>
-                </template>
-              </a-card-meta>
-            </a-card>
-          </template>
-        </template>
-      </template>
+      <MyComputerFamily
+        :datas="datas"
+        v-model:selected-keys="keys"
+        @select-change="onSelectChange"
+        @open-folder="onOpenFolder"
+        @open-file="onOpenFile"
+        @preview-image="onPreviewOrgFile"
+      />
+    </div>
 
-      <template #footer>
-        <div v-if="!isModal" class="page-footer">
-          <a-row :gutter="24">
-            <a-col :lg="24" :sm="24">
-              <a-row v-if="!isEdit" :gutter="[16, 8]">
-                <a-space>
-                  <a-button
-                    type="primary"
-                    v-if="canAmend"
-                    :icon="h(FileImageOutlined)"
-                    :disabled="!(keys && keys.length > 0)"
-                    @click.prevent="onViewPic"
-                    >预览</a-button
-                  >
-                  <a-popconfirm
-                    :disabled="
-                      !(
-                        keys &&
-                        keys.length > 0 &&
-                        keys[0].PermissionIndc == 'Y'
-                      )
-                    "
-                    title="确定是否删除这条记录?"
-                    ok-text="是"
-                    cancel-text="否"
-                    @confirm="onDelete"
-                  >
-                    <a-button
-                      type="primary"
-                      danger
-                      :icon="h(DeleteOutlined)"
-                      :disabled="
-                        !(
-                          keys &&
-                          keys.length > 0 &&
-                          keys[0].PermissionIndc == 'Y'
-                        )
-                      "
-                      v-if="canDelete"
-                      >删除</a-button
-                    >
-                  </a-popconfirm>
-                </a-space>
-              </a-row>
-            </a-col>
-          </a-row>
-        </div>
-      </template>
-    </search>
     <a-image
       :width="1024"
       :style="{ display: 'none' }"
@@ -309,121 +59,123 @@
     />
     <dmsFolder @on-submit="onReload"></dmsFolder>
     <videoPlay></videoPlay>
+    <dragModal
+      v-model:open="showModalShare"
+      width="60%"
+      title="分享管理查询"
+      :mask-closable="false"
+      :fullscreen="width < 640"
+      @ok="handleSelectShare"
+    >
+      <DmsFileShareModal ref="shareEnquiry"></DmsFileShareModal>
+    </dragModal>
+    <dragModal
+      v-model:open="showModalPublishPhoto"
+      width="60%"
+      title="相册专辑查询"
+      :mask-closable="false"
+      :fullscreen="width < 640"
+      @ok="handleSelectPublishPhoto"
+    >
+      <PublishPhotoEnquiry ref="publishPhotoEnquiry"></PublishPhotoEnquiry>
+    </dragModal>
+    <dragModal
+      v-model:open="showModalPublishAudio"
+      width="60%"
+      title="音乐专辑查询"
+      :mask-closable="false"
+      :fullscreen="width < 640"
+      @ok="handleSelectPublishAudio"
+    >
+      <PublishAudioEnquiry ref="publishAudioEnquiry"></PublishAudioEnquiry>
+    </dragModal>
+    <dragModal
+      v-model:open="showModalPublishVideo"
+      width="60%"
+      title="影视专辑查询"
+      :mask-closable="false"
+      :fullscreen="width < 640"
+      @ok="handleSelectPublishVideo"
+    >
+      <PublishVideoEnquiry ref="publishVideoEnquiry"></PublishVideoEnquiry>
+    </dragModal>
   </a-spin>
 </template>
 
 <script setup lang="ts">
-import {
-  reactive,
-  inject,
-  onUnmounted,
-  onMounted,
-  ref,
-  unref,
-  provide,
-  h,
-} from "vue";
+import { reactive, onMounted, onUnmounted, ref, unref, h, provide } from "vue";
 import { BindOption } from "@/data/custom/bindOption";
 import { SelectOption } from "@/data/auto/selectOption";
-import search from "@/components/basic/Search.vue";
-import {
-  DeleteOutlined,
-  LoginOutlined,
-  LaptopOutlined,
-  CheckCircleTwoTone,
-  RollbackOutlined,
-  CheckSquareTwoTone,
-  NotificationOutlined,
-  PictureOutlined,
-  HeartTwoTone,
-  CloseCircleOutlined,
-  FolderAddOutlined,
-  DownloadOutlined,
-  FolderOutlined,
-  FileImageOutlined,
-  CrownOutlined,
-} from "@ant-design/icons-vue";
-import { DmsFileEntity } from "@/data/auto/dmsFileEntity";
-import { DmsFileResultData } from "@/data/auto/dmsFileResultData";
-import { FamilyGroupFolderEntity } from "@/data/auto/familyGroupFolderEntity";
-import { FamilyDmsFileViewEntity } from "@/data/auto/familyDmsFileViewEntity";
+import { FamilyDmsFileViewDisplayData } from "@/data/auto/familyDmsFileViewDisplayData";
 import { SearchFilter } from "@/data/auto/searchFilter";
 import dmsFileService from "@/service/master/dmsFileService";
-import { DmsFileSearchCriteria } from "@/data/auto/dmsFileSearchCriteria";
-import FamilyGroupService from "@/service/master/familyGroupService";
 import publishPhotoService from "@/service/master/publishPhotoService";
-import { SearchCriteriaResultData } from "@/data/auto/searchCriteriaResultData";
+import publishAudioService from "@/service/master/publishAudioService";
+import { DmsFileSearchCriteria } from "@/data/auto/dmsFileSearchCriteria";
+import dragModal from "@/components/basic/DragModal.vue";
+import DmsFileShareModal from "./DmsFileShareModal.vue";
+import PublishPhotoEnquiry from "./PublishPhotoEnquiry.vue";
+import PublishAudioEnquiry from "./PublishAudioEnquiry.vue";
+import PublishVideoEnquiry from "./PublishVideoEnquiry.vue";
+import { FamilyGroupFolderEntity } from "@/data/auto/familyGroupFolderEntity";
 import {
   PermissionContext,
   usePermissionContext,
 } from "@/hooks/PermissionContext";
 import { useRoute, useRouter } from "vue-router";
-
 import { useBindOption } from "@/hooks/useBindOption";
 import { SearchFilterOperatorPolicy } from "@/data/custom/searchFilterOperatorPolicy";
 import { SearchFilterTypePolicy } from "@/data/custom/searchFilterTypePolicy";
 import { notification } from "ant-design-vue";
-import { GridColumnInfo } from "@/data/auto/gridColumnInfo";
-import { useGridColumnInfo } from "@/hooks/gridColumnInfo";
+import { SearchCriteriaResultData } from "@/data/auto/searchCriteriaResultData";
 import dmsFolder from "./DmsFolderModal.vue";
-
 import { useLoginProfileStore } from "@/store/modules/loginProfile";
 import type { UploadProps } from "ant-design-vue";
 import { WebSitePolicy } from "@/policy/custom/webSitePolicy";
-import { forEach, orderBy } from "lodash-es";
-import { bsInfo } from "@/utils/browser";
+import { orderBy } from "lodash-es";
 import axios from "axios";
-import { getuid } from "process";
 import VideoPlay from "./PlayVideo.vue";
-import {
-  enquiryMethodKey,
-  searchCriteriaManagerKey,
-  masterOperationToEnquiryMethodKey,
-  MasterOperationToEnquiryModelOption,
-  layoutProviderMethodKey,
-} from "@/injections";
-import { useOrderedChildren } from "@/hooks/use-ordered-children";
-import { SearchCriteriaContext } from "@/injections";
+import { Howl } from "howler";
+import { PublishVideoEntity } from "@/data/auto/publishVideoEntity";
+import publishVideoService from "@/service/master/publishVideoService";
+import { useWindowSize } from "@vueuse/core";
 import fileTypePolicy from "@/policy/custom/fileTypePolicy";
-import { Howl, Howler } from "howler";
-import { FamilyDmsFileViewDisplayData } from "@/data/auto/familyDmsFileViewDisplayData";
+import { PublishAudioEntity } from "@/data/auto/publishAudioEntity";
+import { v4 as uuidv4 } from "uuid";
+import { FamilyFolderFavoriteViewEntity } from "@/data/auto/familyFolderFavoriteViewEntity";
+import { DmsFileEntity } from "@/data/auto/dmsFileEntity";
+import { PublishData } from "@/data/auto/publishData";
+import { PublishPhotoEntity } from "@/data/auto/publishPhotoEntity";
 
-//page from-----------------------------------------------------------------------------------------------------------------------------------
-//================inject================
-//报表名称
-const layoutProviderMethod = inject(layoutProviderMethodKey);
+import MyComputerFamily from "@/components/basic/MyComputerFamily.vue";
+import Toolbar from "@/components/basic/Toolbar.vue";
+import OperatorStationFamily from "@/components/basic/OperatorStationFamily.vue";
+import { FamilyDmsFileViewEntity } from "@/data/auto/familyDmsFileViewEntity.ts";
+import FamilyGroupService from "@/service/master/familyGroupService";
 
-//当前是弹出的Modal,还是Page
-const isModal = ref(inject("isModalFamilyDmsFile", false) as boolean);
-//初始化查询条件的值
-const initBindOptions = ref(
-  inject("initBindOptionsFamilyDmsFile", []) as BindOption[],
-);
-//记录单选还是多选
-const selectionType = ref(
-  inject("selectionTypeFamilyDmsFile", "radio") as string,
-);
-
-//================inject================
-
-const widthColumn = ref<string>("3%");
-if (bsInfo.size.sm) {
-  widthColumn.value = "8%";
-} else {
-  widthColumn.value = "3%";
+interface BreadcrumbItem {
+  value: string;
+  displayName: string;
 }
-const spinTip = ref<string>("加載中...");
+
+const { width } = useWindowSize();
+
+const showModalShare = ref<boolean>(false);
+const sharedFileRecord = ref<FamilyDmsFileViewDisplayData | null>(null);
+const showModalPublishPhoto = ref<boolean>(false);
+const showModalPublishAudio = ref<boolean>(false);
+const showModalPublishVideo = ref<boolean>(false);
+const spinTip = ref<string>("加载中...");
 const loading = ref<boolean>(false);
-const isEdit = ref<boolean>(false);
 const canView = ref<boolean>(false);
 const canAmend = ref<boolean>(false);
 const canDelete = ref<boolean>(false);
 const canCreate = ref<boolean>(false);
-const modalTitle = ref<string>("新增文件夹");
 const rootPath = ref<string>("");
 const imageSrc = ref<string>("");
 const route = useRoute();
 const router = useRouter();
+const previousFilePath = ref<string>("");
 
 const fileList = ref<UploadProps["fileList"]>([]);
 const uploadUrl = ref<string>(WebSitePolicy.WebApiRoot + "DmsFile/UploadFile");
@@ -432,37 +184,20 @@ if (process.env.NODE_ENV === "development") {
 } else {
   uploadUrl.value = WebSitePolicy.WebApiRoot + "/DmsFile/UploadFile";
 }
-const previousFilePath = ref<string>("");
+
 const currFilePath = ref<string>("");
+
 const headers = ref({
   Authorization: useLoginProfileStore().getToken(),
   "Content-Type": "multipart/form-data",
   FilePath: currFilePath.value,
 });
 
-const columns = ref([
-  {
-    title: "",
-    dataIndex: FamilyDmsFileViewEntity.URL,
-    sorter: false,
-    width: "50%",
-    sequence: 1,
-    hidden: "N",
-  },
-]);
-
-const viewOption = {
-  Value: "default",
-  SelectOptions: [{ BindValue: "default", DisplayName: "默认" }],
-  Columns: [{ BindValue: "default", BindColumn: columns }],
-};
-
 const bindOptions = ref<BindOption[]>([]);
 const datas = ref<FamilyDmsFileViewDisplayData[]>([]);
-const pagingParams = ref<PagingParams>({ pageSize: 20, page: 1 });
+const pagingParams = ref<PagingParams>({ pageSize: 999999, page: 1 });
 const result = ref<SearchCriteriaResultData>(new SearchCriteriaResultData());
 
-const data = ref<DmsFileResultData>(new DmsFileResultData());
 const currentFilter = ref<SearchFilter[]>([]);
 const isSearched = ref<boolean>(false);
 const currentSearchCriteria = ref<DmsFileSearchCriteria>(
@@ -477,66 +212,39 @@ const dmsFolderIsMove = ref<boolean>(false);
 const entity = ref<DmsFileEntity>(new DmsFileEntity());
 const videoPlayModal = ref<boolean>(false);
 const videoSrc = ref<string>("");
+const videoPoster = ref<string>("");
 const videoType = ref<string>("");
 const videoPlayTitle = ref<string>("");
+const visible = ref<boolean>(false);
 const currentFamilyName = ref<string>("");
-
-const {
-  children: items,
-  addChild: addItem,
-  removeChild: removeItem,
-} = useOrderedChildren<SearchCriteriaContext>();
-
-//================provide================
-//初始化查询条件UI
-
-provide("dmsFolderModal", dmsFolderModal);
-provide("dmsFolderTitle", dmsFolderTitle);
-provide("dmsFolderIsRename", dmsFolderIsRename);
-provide("dmsFolderIsMove", dmsFolderIsMove);
-provide("dmsFolderIsFamilyGroup", true);
-provide("dmsFolderFamilyName", currentFamilyName);
-provide("DmsFileEntity", entity);
-
-provide("videoPlayModal", videoPlayModal);
-provide("videoPlayTitle", videoPlayTitle);
-provide("videoSrc", videoSrc);
-provide("videoType", videoType);
-provide(enquiryMethodKey, {
-  getLayoutSetting: () => {
-    return {
-      controlLeft: 16,
-      controlRight: 8,
-      space: true,
-      soltLeft: 24,
-      soltRight: 24,
-    };
-  },
-  getBindOptions: () => {
-    return unref(bindOptions);
-  },
-  getViewOption: () => {
-    return unref(viewOption);
-  },
-  getDatas: () => {
-    return datas;
-  },
-});
-
-provide(
-  searchCriteriaManagerKey,
-  reactive({
-    items,
-    addItem,
-    removeItem,
-  }),
+const firstItem = ref<FamilyDmsFileViewDisplayData>(
+  new FamilyDmsFileViewDisplayData(),
 );
-//================provide================
+const pathStack = ref<BreadcrumbItem[]>([]);
+
+interface PublishPhotoEnquiry {
+  keys: PublishPhotoEntity[];
+}
+const publishPhotoEnquiry = ref<PublishPhotoEnquiry | null>(null);
+
+interface PublishAudioEnquiry {
+  keys: PublishAudioEntity[];
+}
+const publishAudioEnquiry = ref<PublishAudioEnquiry | null>(null);
+
+interface PublishVideoEnquiry {
+  keys: PublishVideoEntity[];
+}
+const publishVideoEnquiry = ref<PublishVideoEnquiry | null>(null);
+
+interface ShareEnquiry {
+  keys: FamilyFolderFavoriteViewEntity[];
+}
+const shareEnquiry = ref<ShareEnquiry | null>(null);
 
 const sound = ref();
 
-// 表格 bodyCell 的 record 被透传为 Record<string, any>，转成具体展示类型
-const toFamilyView = (r: Record<string, any>): FamilyDmsFileViewDisplayData =>
+const toUploadView = (r: Record<string, any>): FamilyDmsFileViewDisplayData =>
   r as FamilyDmsFileViewDisplayData;
 
 onUnmounted(() => {
@@ -556,17 +264,7 @@ const play = (src: string) => {
     loop: false,
     html5: true,
     preload: true,
-    onload: () => {
-      // console.log('loaded');
-    },
-    onplay: () => {
-      // console.log('play');
-    },
-    onpause: () => {
-      // console.log('pause');
-    },
     onend: () => {
-      // console.log('end');
       datas.value.forEach((element) => {
         element.IsPlay = "";
       });
@@ -578,12 +276,12 @@ const play = (src: string) => {
 
 const onPauseAudio = (record: FamilyDmsFileViewDisplayData) => {
   record.IsPause = "Y";
-  sound.value.pause();
+  sound.value?.pause();
 };
 
 const onContinueAudio = (record: FamilyDmsFileViewDisplayData) => {
   record.IsPause = "";
-  sound.value.play();
+  sound.value?.play();
 };
 
 const onPlayAudio = (record: FamilyDmsFileViewDisplayData) => {
@@ -611,9 +309,28 @@ const onPlayAudio = (record: FamilyDmsFileViewDisplayData) => {
   play(record.Url);
 };
 
+//================provide================
+provide("dmsFolderModal", dmsFolderModal);
+provide("dmsFolderTitle", dmsFolderTitle);
+provide("dmsFolderIsRename", dmsFolderIsRename);
+provide("dmsFolderIsMove", dmsFolderIsMove);
+provide("DmsFileEntity", entity);
+provide("dmsFolderIsFamilyGroup", true);
+provide("dmsFolderFamilyName", currentFamilyName);
+
+provide("videoPlayModal", videoPlayModal);
+provide("videoPlayTitle", videoPlayTitle);
+provide("videoSrc", videoSrc);
+provide("videoPoster", videoPoster);
+provide("videoType", videoType);
+provide("isModalPublishVideo", showModalPublishVideo);
+provide("isModalPublishAudio", showModalPublishAudio);
+provide("isModalPublishPhoto", showModalPublishPhoto);
+
+//================provide================
+
 defineExpose({
   keys,
-  initBindOptions,
 });
 
 onMounted(async () => {
@@ -625,52 +342,145 @@ onMounted(async () => {
 
   await initBindOption("");
 
+  pathStack.value = [{ value: rootPath.value, displayName: "我的云盘" }];
+
   onSearchByFilePath(rootPath.value);
 });
 
-const onViewPreview = async () => {
-  router.push({
-    name: "Preview",
-    params: { id: currentFamilyName.value, mode: "view" },
-  });
+const beforeUpload: UploadProps["beforeUpload"] = async (file) => {
+  if (!file || typeof file.size !== "number") {
+    return false;
+  }
+  loading.value = true;
+  fileList.value = [...(fileList.value || []), file];
+  const chunks = splitFile(file);
+
+  let bindOption: BindOption = bindOptions.value.filter(
+    (x) => x.BindValue == FamilyDmsFileViewDisplayData.DB_FILE_PATH,
+  )[0];
+  currFilePath.value = headers.value.FilePath = bindOption.Value;
+  let i = 1;
+  let fileSize = file.size;
+  let uid: string = uuidv4();
+  spinTip.value = "上传中(1/" + chunks.length + ")...";
+  await uploadChunk(chunks, file.name, uid, i);
+
+  spinTip.value = "加载中...";
+  return false;
+};
+
+const uploadChunk = async (
+  chunks: any,
+  fileName: string,
+  uid: string,
+  index: number,
+) => {
+  const formData = new FormData();
+
+  const fileExtension = fileName.split(".").pop();
+  formData.append(
+    fileName,
+    chunks[index - 1],
+    uid +
+      "-" +
+      index.toString() +
+      "-" +
+      chunks.length.toString() +
+      "." +
+      fileExtension,
+  );
+
+  if (process.env.NODE_ENV === "development") {
+    axios.defaults.baseURL = WebSitePolicy.WebApiRootDev;
+    axios.defaults.withCredentials = true;
+  } else {
+    axios.defaults.baseURL = WebSitePolicy.WebApiRoot;
+  }
+  try {
+    let response = await axios.create().request({
+      url: "/DmsFile/UploadFile",
+      method: "post",
+      data: formData,
+      headers: headers.value,
+    });
+
+    if (response.status == 200 && index < chunks.length) {
+      spinTip.value = "上传中(" + (index + 1) + "/" + chunks.length + ")...";
+      await uploadChunk(chunks, fileName, uid, index + 1);
+    } else if (index == chunks.length) {
+      let sec: number = 2500;
+      if (index > 25) sec = index * 100;
+      spinTip.value = "加载中...";
+      setTimeout(function () {
+        onReSearch();
+      }, sec);
+    }
+  } catch (error) {
+    loading.value = false;
+    spinTip.value = "加载中...";
+  }
+};
+
+const CHUNK_SIZE = 1024 * 1024;
+
+const splitFile = (file: any) => {
+  const chunks: Blob[] = [];
+  if (
+    !file ||
+    typeof file.size !== "number" ||
+    typeof file.slice !== "function"
+  ) {
+    return chunks;
+  }
+  let start = 0;
+  while (start < file.size) {
+    const end = Math.min(start + CHUNK_SIZE, file.size);
+    const chunk = file.slice(start, end);
+    chunks.push(chunk);
+    start += CHUNK_SIZE;
+  }
+  return chunks;
 };
 
 const onSelectChange = (selected: FamilyDmsFileViewDisplayData[]) => {
   keys.value = selected;
 };
 
-const onPoublicFile = async (fid: number) => {
-  // publishPhotoService.InsertPublishPhotoDetailByFamilyGroup(fid).then(() => {
-  //     notification.info({
-  //         message: '系统提示：',
-  //         description: '图片已发布',
-  //         placement: "topRight",
-  //     });
-  // });
+const onViewPreviewPhoto = async (filePath: string) => {
+  router.push({ name: "Preview", params: { id: filePath, mode: "list" } });
+};
+
+const onViewPreviewAudio = async (filePath: string) => {
+  router.push({
+    name: "PreviewAudio",
+    params: { id: filePath, mode: "list" },
+  });
+};
+
+const onViewPreviewVideo = async (filePath: string) => {
+  router.push({
+    name: "PreviewVideo",
+    params: { id: filePath, mode: "list" },
+  });
 };
 
 const onChangeFolder = async (fvalue: string) => {
   onSearchByFilePath(fvalue);
 };
 
-const onLastFolder = async () => {
-  if (!datas.value || datas.value.length == 0) {
-    onSearchByFilePath(previousFilePath.value);
-  } else {
-    onPreviousFolder();
-  }
-};
-
-const onPreviousFolder = async () => {
-  let filePath: string = "";
-  if (datas.value && datas.value.length > 0) filePath = datas.value[0].FilePath;
-  dmsFileService.FindFolderNameParentByFolderName(filePath).then((res) => {
-    if (res && res.length > 0) onSearchByFilePath(res);
+const onUrlVideoPlay = (url: string, title: string, poster: string) => {
+  sound.value?.stop();
+  datas.value.forEach((element) => {
+    element.IsPlay = "";
   });
+  videoPoster.value = poster;
+  videoType.value = "m3u8";
+  videoSrc.value = url;
+  videoPlayModal.value = true;
+  videoPlayTitle.value = title;
 };
 
 const onVideoPlay = async (fid: number) => {
-  //从服务器取出源视频
   dmsFileService
     .FindSourceVideoPath(fid)
     .then((res) => {
@@ -683,6 +493,51 @@ const onVideoPlay = async (fid: number) => {
     });
 };
 
+const onPreviewFile = async (usernameOrRecord: any, orderKey?: string) => {
+  let username: string;
+  let fname: string;
+  if (typeof usernameOrRecord === "object") {
+    username = usernameOrRecord.CreatedBy;
+    fname = usernameOrRecord.OrderKey;
+  } else {
+    username = usernameOrRecord;
+    fname = orderKey!;
+  }
+  loading.value = true;
+  getPreviewFile(username, fname);
+};
+
+const onPreviewOrgFile = async (usernameOrRecord: any, orderKey?: string) => {
+  let fileId: number;
+  let orgFileName: string;
+  if (typeof usernameOrRecord === "object") {
+    fileId = usernameOrRecord.FileId;
+    orgFileName = usernameOrRecord.OrgFileName;
+  } else {
+    fileId = usernameOrRecord;
+    orgFileName = orderKey!;
+  }
+  loading.value = true;
+  onViewPictureFile(fileId, orgFileName);
+};
+
+const getPreviewFile = (username: string, fname: string) => {
+  let dms: DmsFileEntity = new DmsFileEntity();
+  dms.CreatedBy = username;
+  dms.OrderKey = fname;
+  dmsFileService
+    .DownloadFilePreview(dms)
+    .then((res) => {
+      const downloadUrl = window.URL.createObjectURL(new Blob([res]));
+      imageSrc.value = downloadUrl;
+      loading.value = false;
+      setPicVisible(true);
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+};
+
 const DownloadFileCombine = (
   fs: string[],
   mergedData: Uint8Array,
@@ -712,7 +567,9 @@ const DownloadFileCombine = (
       } else if (index == total) {
         loading.value = false;
         spinTip.value = "加载中...";
-        const downloadUrl = window.URL.createObjectURL(new Blob([mergedData]));
+        const downloadUrl = window.URL.createObjectURL(
+          new Blob([mergedData as unknown as BlobPart]),
+        );
         imageSrc.value = downloadUrl;
         if (!preview) {
           const link = document.createElement("a");
@@ -731,43 +588,49 @@ const DownloadFileCombine = (
     });
 };
 
+const onLastFolder = async () => {
+  if (!datas.value || datas.value.length == 0) {
+    onSearchByFilePath(previousFilePath.value);
+  } else {
+    onPreviousFolder();
+  }
+};
+
+const onPreviousFolder = async () => {
+  let filePath: string = "";
+  if (datas.value && datas.value.length > 0) filePath = datas.value[0].FilePath;
+  dmsFileService.FindFolderNameParentByFolderName(filePath).then((res) => {
+    if (res && res.length > 0) onSearchByFilePath(res);
+  });
+};
+
+const onPublishPhoto = async () => {
+  showModalPublishPhoto.value = true;
+};
+
+const onPublishAudio = async () => {
+  showModalPublishAudio.value = true;
+};
+
+const onPublishVideo = async () => {
+  showModalPublishVideo.value = true;
+};
+
+const onShareFamily = async (record: Record<string, any>) => {
+  sharedFileRecord.value = toUploadView(record);
+  showModalShare.value = true;
+};
+
 const onDownloadFile = async (fid: number, fname: string) => {
   GetOrgPictureFile(fid, fname, false);
 };
 
-const onPreviewFile = async (username: string, orderKey: string) => {
-  loading.value = true;
-  getPreviewFile(username, orderKey);
-};
-
-const getPreviewFile = (username: string, fname: string) => {
-  let dms: DmsFileEntity = new DmsFileEntity();
-  dms.CreatedBy = username;
-  dms.OrderKey = fname;
-  dmsFileService
-    .DownloadFilePreview(dms)
-    .then((res) => {
-      const downloadUrl = window.URL.createObjectURL(new Blob([res]));
-      imageSrc.value = downloadUrl;
-      loading.value = false;
-      setPicVisible(true);
-    })
-    .catch(() => {
-      loading.value = false;
-    });
-};
-
 const GetOrgPictureFile = async (
   fid: number,
   fname: string,
   preview: boolean,
 ) => {
   if (fileTypePolicy.isVideo(fname)) {
-    onVideoPlay(keys.value[0].FileId);
-    return;
-  }
-  if (preview && !fileTypePolicy.isImage(fname)) {
-    onPreviewFile(keys.value[0].CreatedBy, keys.value[0].OrderKey);
     return;
   }
 
@@ -797,43 +660,10 @@ const GetOrgPictureFile = async (
     });
 };
 
-const onUrlVideoPlay = (url: string, title: string) => {
-  sound.value?.stop();
-  datas.value.forEach((element) => {
-    element.IsPlay = "";
-  });
-  videoType.value = "m3u8";
-  videoSrc.value = url;
-  videoPlayModal.value = true;
-  videoPlayTitle.value = title;
-};
-
 const onViewPictureFile = async (fid: number, fname: string) => {
   GetOrgPictureFile(fid, fname, true);
 };
 
-const onDeleteFamilyFolderFavorite = async (folderName: string) => {
-  FamilyGroupService.DeleteFamilyFolderFavorite(folderName).then(() => {
-    notification.info({
-      message: "系统提示：",
-      description: "收藏分享成功移除",
-      placement: "topRight",
-    });
-    onReload();
-  });
-};
-
-const onInsertFamilyFolderFavorite = async (folderName: string) => {
-  FamilyGroupService.InsertFamilyFolderFavorite(folderName).then(() => {
-    notification.info({
-      message: "系统提示：",
-      description: "收藏分享成功加入",
-      placement: "topRight",
-    });
-    onReload();
-  });
-};
-
 const onSearchByFilePath = async (fvalue: string) => {
   setBindOptionValue(
     FamilyDmsFileViewEntity.DB_FILE_PATH,
@@ -867,45 +697,13 @@ const onSearchByFilePath = async (fvalue: string) => {
   await findBySearchCriteria(unref(currentSearchCriteria));
 };
 
-const onReset = () => {
-  keys.value = [];
-  result.value.Total = 0;
-  setBindOptionValue(
-    FamilyDmsFileViewEntity.DB_FAMILY_NAME,
-    currentFamilyName.value,
-    "",
-    [currentFamilyName.value],
-    false,
-  );
-  setBindOptionValue(
-    FamilyDmsFileViewEntity.DB_FILE_PATH,
-    currentFamilyName.value,
-    "",
-    [currentFamilyName.value],
-    false,
-  );
-};
-
 const onViewPic = () => {
   if (keys.value.length == 0) return;
   if (keys.value[0].IsDirectoryIndc == "Y") {
     onChangeFolder(keys.value[0].FileName);
-  } else if (
-    keys.value[0].OrgFileName.toLowerCase().indexOf("png") > 0 ||
-    keys.value[0].OrgFileName.toLowerCase().indexOf("jpg") > 0 ||
-    keys.value[0].OrgFileName.toLowerCase().indexOf("jpeg") > 0 ||
-    keys.value[0].OrgFileName.toLowerCase().indexOf("gif") > 0
-  ) {
+  } else if (fileTypePolicy.isImage(keys.value[0].OrgFileName)) {
     onPreviewFile(keys.value[0].CreatedBy, keys.value[0].OrderKey);
-  } else if (
-    keys.value[0].OrgFileName.toLowerCase().indexOf("mp4") > 0 ||
-    keys.value[0].OrgFileName.toLowerCase().indexOf("mp3") > 0 ||
-    keys.value[0].OrgFileName.toLowerCase().indexOf("rm") > 0 ||
-    keys.value[0].OrgFileName.toLowerCase().indexOf("mpeg") > 0 ||
-    keys.value[0].OrgFileName.toLowerCase().indexOf("mov") > 0 ||
-    keys.value[0].OrgFileName.toLowerCase().indexOf("wmv") > 0 ||
-    keys.value[0].OrgFileName.toLowerCase().indexOf("avi") > 0
-  ) {
+  } else if (fileTypePolicy.isVideo(keys.value[0].OrgFileName)) {
     onVideoPlay(keys.value[0].FileId);
   } else {
     notification.info({
@@ -916,21 +714,11 @@ const onViewPic = () => {
   }
 };
 
-const visible = ref<boolean>(false);
 const setPicVisible = (value: boolean): void => {
   visible.value = value;
 };
 
 const onCreate = () => {
-  if (currFilePath.value == currentFamilyName.value) {
-    notification.info({
-      message: "系统提示：",
-      description: "群组一级目录,请在群组管理创建.",
-      placement: "topRight",
-    });
-    return;
-  }
-
   dmsFolderTitle.value = "新增文件夹";
   dmsFolderIsRename.value = false;
   dmsFolderIsMove.value = false;
@@ -950,28 +738,93 @@ const onCreate = () => {
   currFilePath.value = bindOption.Value;
 };
 
-const onDelete = async () => {
-  let fgfs: FamilyGroupFolderEntity[] = [];
-  let fgf: FamilyGroupFolderEntity;
-  keys.value.forEach((element) => {
-    fgf = new FamilyGroupFolderEntity();
-    fgf.FamilyName = element.FamilyName;
-    fgf.FolderName = keys.value[0].FolderName;
-    fgf.TopFolderName = element.TopFolderName;
-    fgf.FilePath = element.FilePath;
-    fgfs.push(fgf);
-  });
+const onShareFolder = () => {
+  if (keys.value.length == 0) return;
+  if (
+    keys.value[0].FavoriteIndc == "N" &&
+    keys.value[0].PermissionIndc == "Y"
+  ) {
+    onInsertFamilyFolderFavorite(keys.value[0].FileName);
+  } else {
+    onDeleteFamilyFolderFavorite(keys.value[0].FileName);
+  }
+};
 
-  await dmsFileService.DeleteFamilyGroupFolder(fgfs).then(() => {
+const onDeleteFamilyFolderFavorite = async (folderName: string) => {
+  FamilyGroupService.DeleteFamilyFolderFavorite(folderName).then(() => {
     notification.info({
       message: "系统提示：",
-      description: "记录删除成功",
+      description: "分享成功移除",
       placement: "topRight",
     });
     onReload();
   });
 };
 
+const onInsertFamilyFolderFavorite = async (folderName: string) => {
+  FamilyGroupService.InsertFamilyFolderFavorite(folderName).then(() => {
+    notification.info({
+      message: "系统提示：",
+      description: "分享成功加入",
+      placement: "topRight",
+    });
+    onReload();
+  });
+};
+
+const onAmend = () => {
+  if (keys.value[0].IsDirectoryIndc == "Y") {
+    dmsFolderTitle.value = "重命名文件夹";
+  } else {
+    dmsFolderTitle.value = "重命名文件";
+  }
+  dmsFolderIsRename.value = true;
+  dmsFolderModal.value = true;
+  dmsFolderIsMove.value = false;
+  entity.value = new DmsFileEntity();
+
+  entity.value.FileId = keys.value[0].FileId;
+  entity.value.FilePath = keys.value[0].FolderLocalName;
+  if (keys.value[0].CreatedBy == keys.value[0].FolderLocalName) {
+    entity.value.FilePath = "";
+  }
+  entity.value.FileName = keys.value[0].OrgFileName;
+};
+
+const onMove = () => {
+  if (keys.value[0].IsDirectoryIndc == "Y") {
+    dmsFolderTitle.value = "移动文件夹";
+  } else {
+    dmsFolderTitle.value = "移动文件";
+  }
+  dmsFolderIsRename.value = false;
+  dmsFolderIsMove.value = true;
+  dmsFolderModal.value = true;
+
+  entity.value = new DmsFileEntity();
+
+  entity.value.FileId = keys.value[0].FileId;
+  entity.value.FilePath = keys.value[0].FolderLocalName;
+  if (keys.value[0].CreatedBy == keys.value[0].FolderLocalName) {
+    entity.value.FilePath = "";
+  }
+  entity.value.FileName = keys.value[0].FileName;
+  entity.value.OrgFileName = keys.value[0].OrgFileName;
+};
+
+const onDelete = async () => {
+  for (let i = 0; i < keys.value.length; i++) {
+    await dmsFileService.Delete(keys.value[i].FileId);
+  }
+
+  notification.info({
+    message: "系统提示：",
+    description: "记录删除成功",
+    placement: "topRight",
+  });
+  onReload();
+};
+
 const setBindOptionValue = (
   bindValue: string,
   value: string,
@@ -989,18 +842,6 @@ const setBindOptionValue = (
   bindOption.disabled = disabled;
 };
 
-const setBindSelectOption = (
-  bindValue: string,
-  SelectOptions: SelectOption[],
-) => {
-  let bindOption: BindOption = bindOptions.value.filter(
-    (x) => x.BindValue == bindValue,
-  )[0];
-  if (!bindOption) return;
-  bindOption.SelectOptions = SelectOptions;
-};
-
-//初始化查询条件
 const initBindOption = async (familyName: string) => {
   let ubo = useBindOption();
   bindOptions.value = [];
@@ -1047,26 +888,18 @@ const initBindOption = async (familyName: string) => {
   //bindOption.lg = 24;
   bindOptions.value.push(bindOption);
 
-  initBindOptions.value.forEach((element) => {
-    setBindOptionValue(
-      element.BindValue,
-      element.Value,
-      element.Value1,
-      element.Values,
-      element.disabled,
-    );
-  });
-
   setBindOptionValue(
     FamilyDmsFileViewEntity.DB_FAMILY_NAME,
-    currentFamilyName.value,
     "",
-    [currentFamilyName.value],
+    "",
+    [""],
     false,
   );
-};
 
-//table from-----------------------------------------------------------------------------------------------------------------------------------
+  setBindOptionValue(FamilyDmsFileViewEntity.DB_FILE_PATH, "", "", [""], false);
+  currFilePath.value="";
+  console.log(currFilePath.value)
+};
 
 result.value.Page = pagingParams.value.page ?? 1;
 result.value.Limit = pagingParams.value.pageSize;
@@ -1075,7 +908,7 @@ const onSubmit = async (filters: SearchFilter[]) => {
   loading.value = true;
   let c: DmsFileSearchCriteria = new DmsFileSearchCriteria();
   currentFilter.value = filters;
-  isSearched.value = true;
+
   c.Filter = filters;
   c.limit = pagingParams.value.pageSize;
   c.page = pagingParams.value.page ?? 1;
@@ -1085,122 +918,40 @@ const onSubmit = async (filters: SearchFilter[]) => {
   await findBySearchCriteria(c);
 };
 
-const handleChangeBindValue = async (bindValue: string, value: string) => {
-  if (value == FamilyDmsFileViewEntity.DB_FAMILY_NAME) {
-    let rps: SelectOption[] =
-      await dmsFileService.FindFamilyDmsFoldersByFamilyName(bindValue);
-
-    setBindSelectOption(FamilyDmsFileViewEntity.DB_FILE_PATH, rps);
-
-    if (rps && rps.length > 0) {
-      currentFamilyName.value = rootPath.value = rps[0].BindValue;
-
-      currentSearchCriteria.value.Filter = [];
-      let filter: SearchFilter;
-      filter = new SearchFilter();
-      filter.Column = FamilyDmsFileViewEntity.DB_FAMILY_NAME;
-      filter.Type = "SingleSelection";
-      filter.Operator = "single";
-      let bindOption: BindOption = bindOptions.value.filter(
-        (x) => x.BindValue == FamilyDmsFileViewEntity.DB_FAMILY_NAME,
-      )[0];
-      filter.Value = bindOption.Value;
-
-      currentSearchCriteria.value.Filter.push(filter);
-      filter = new SearchFilter();
-      filter.Column = FamilyDmsFileViewEntity.DB_FILE_PATH;
-      filter.Type = "SingleSelection";
-      filter.Operator = "single";
-      filter.Value = bindOption.Value;
-      currentSearchCriteria.value.Filter.push(filter);
-
-      currFilePath.value = filter.Value;
-      setBindOptionValue(
-        FamilyDmsFileViewEntity.DB_FILE_PATH,
-        currentFamilyName.value,
-        "",
-        [currentFamilyName.value],
-        false,
-      );
-
-      await findBySearchCriteria(unref(currentSearchCriteria));
-    }
-  } else if (value == FamilyDmsFileViewEntity.DB_FILE_PATH) {
-    currentSearchCriteria.value.Filter = [];
-    let filter: SearchFilter;
-    filter = new SearchFilter();
-    filter.Column = FamilyDmsFileViewEntity.DB_FILE_PATH;
-    filter.Type = "SingleSelection";
-    filter.Operator = "single";
-    let bindOption: BindOption = bindOptions.value.filter(
-      (x) => x.BindValue == FamilyDmsFileViewEntity.DB_FILE_PATH,
-    )[0];
-
-    currFilePath.value = filter.Value = bindOption.Value;
-
-    currentSearchCriteria.value.Filter.push(filter);
-
-    await findBySearchCriteria(unref(currentSearchCriteria));
-  }
-};
-const onPrint = async () => {
-  loading.value = true;
-  let c: DmsFileSearchCriteria = new DmsFileSearchCriteria();
-  if (currentFilter.value.length > 0) c.Filter = currentFilter.value;
-  else c.Filter = [];
-
-  c.limit = pagingParams.value.pageSize;
-  c.page = pagingParams.value.page ?? 1;
-  c.GridColumns = useGridColumnInfo().getGridColumnInfo(unref(columns));
-  c.ReportName = layoutProviderMethod?.getLayoutProvider().layoutTitle!;
-  try {
-    //let sss = await dmsFileService.PrintBySearchCriteria(c);
-  } catch (error) {
-    console.log(error);
-  }
-};
-
 const findBySearchCriteria = async (c: DmsFileSearchCriteria) => {
   keys.value = [];
   try {
     if (c.limit == 0) c.limit = pagingParams.value.pageSize;
     if (c.page == 0) c.page = pagingParams.value.page ?? 1;
-    data.value = await dmsFileService.FindFamilyBySearchCriteria(c);
-    result.value.Total = data.value.Total;
-    result.value.Page = data.value.Page;
-    result.value.Limit = data.value.Limit;
-    if (data.value.Families)
-      data.value.Families = orderBy(
-        data.value.Families,
-        (x) => x.IsDirectoryIndc,
-        "desc",
-      );
+console.log('findBySearchCriteria'+currFilePath.value  );
+    currentFilter.value = c.Filter;
+    let data = await dmsFileService.FindFamilyBySearchCriteria(c);
 
-    datas.value = data.value.Families;
+    isSearched.value = true;
+    result.value.Total = data.Total;
+    result.value.Page = data.Page;
+    result.value.Limit = data.Limit;
+    const rawList = data.Families ?? [];
+
+    // 始终排序，空数组orderBy也安全
+    datas.value = orderBy(
+      rawList,
+      (x: FamilyDmsFileViewDisplayData) => x.IsDirectoryIndc,
+      "desc",
+    );
+    if (!data.Families || data.Families.length == 0) return;
+    firstItem.value = data.Families[0];
     loading.value = false;
-  } catch (error) {
-    loading.value = false;
-    console.log(error);
-  }
-};
-
-const onPagination = async (params: PagingParams) => {
-  try {
-    if (!isSearched.value) return;
-    let c: DmsFileSearchCriteria = new DmsFileSearchCriteria();
-
-    if (currentFilter.value.length > 0) c.Filter = currentFilter.value;
-    else c.Filter = [];
-
-    c.limit = params.pageSize;
-    c.page = params.page ?? 1;
-    if (params.sortField) c.orderby = params.sortField!;
-    if (params.sortOrder)
-      c.orderbytag = params.sortOrder?.toString().substring(0, 4)!;
-    c.GridColumns = [];
-    loading.value = true;
-    currentSearchCriteria.value = c;
-    await findBySearchCriteria(c);
+    if (
+      data.Families &&
+      data.Families.length > 0 &&
+      fileTypePolicy.isAudio(data.Families[0].OrderKey)
+    ) {
+      onPlayAudio(data.Families[0]);
+      onPauseAudio(data.Families[0]);
+    } else {
+      sound.value?.stop();
+    }
   } catch (error) {
     loading.value = false;
     console.log(error);
@@ -1209,66 +960,317 @@ const onPagination = async (params: PagingParams) => {
 
 const onReSearch = async () => {
   setBindOptionValue(
-    FamilyDmsFileViewEntity.DB_FAMILY_NAME,
-    currentFamilyName.value,
-    "",
-    [currentFamilyName.value],
-    false,
-  );
-  await findBySearchCriteria(unref(currentSearchCriteria));
-};
-
-const onReload = async () => {
-  let orgFn: string = currentFamilyName.value;
-  let orgFp: string = currFilePath.value;
-
-  await initBindOption(currentFamilyName.value);
-
-  currentFamilyName.value = orgFn;
-  currFilePath.value = orgFp;
-
-  setBindOptionValue(
-    FamilyDmsFileViewEntity.DB_FAMILY_NAME,
-    currentFamilyName.value,
-    "",
-    [currentFamilyName.value],
-    false,
-  );
-  setBindOptionValue(
-    FamilyDmsFileViewEntity.DB_FILE_PATH,
+    FamilyDmsFileViewDisplayData.DB_FILE_PATH,
     currFilePath.value,
     "",
     [currFilePath.value],
     false,
   );
+  await findBySearchCriteria(unref(currentSearchCriteria));
+  loading.value = false;
+  spinTip.value = "加载中...";
+};
 
+const onReload = async () => {
+  let cfp: string = currFilePath.value;
+  await initBindOption("");
+  setBindOptionValue(
+    FamilyDmsFileViewDisplayData.DB_FILE_PATH,
+    cfp,
+    "",
+    [cfp],
+    false,
+  );
   await findBySearchCriteria(unref(currentSearchCriteria));
 };
-//table end-----------------------------------------------------------------------------------------------------------------------------------
+
+const handleSelectShare = async () => {
+  if (shareEnquiry.value) {
+    if (shareEnquiry.value.keys.length > 0) {
+      let fgps: FamilyGroupFolderEntity[] = [];
+      let fgp: FamilyGroupFolderEntity;
+      shareEnquiry.value.keys.forEach((element) => {
+        fgp = new FamilyGroupFolderEntity();
+        fgp.FamilyName = element.FamilyName;
+        fgp.TopFolderName = element.TopFolderName;
+        fgp.FolderName = sharedFileRecord.value?.FileName ?? "";
+        fgp.FolderLocalName = sharedFileRecord.value?.OrgFileName ?? "";
+        fgp.FilePath = element.FolderName;
+
+        fgps.push(fgp);
+      });
+
+      await dmsFileService.CreateFamilyGroupFolder(fgps);
+      showModalShare.value = false;
+    } else {
+      notification.info({
+        message: "系统提示：",
+        description: "请选择一条记录",
+        placement: "topRight",
+      });
+    }
+  }
+};
+
+const handleSelectPublishPhoto = async () => {
+  if (publishPhotoEnquiry.value) {
+    if (publishPhotoEnquiry.value.keys.length > 0) {
+      let data: PublishData;
+      for (let i = 0; i < keys.value.length; i++) {
+        data = new PublishData();
+        data.FileId = keys.value[i].FileId;
+        data.PublishName = publishPhotoEnquiry.value.keys[0].PublishName;
+
+        await publishPhotoService.InsertPublishPhotoDetail(data);
+      }
+      showModalPublishPhoto.value = false;
+
+      notification.info({
+        message: "系统提示：",
+        description: "作品发布成功",
+        placement: "topRight",
+      });
+    } else {
+      notification.info({
+        message: "系统提示：",
+        description: "请选择一条记录",
+        placement: "topRight",
+      });
+    }
+  }
+};
+
+const handleSelectPublishAudio = async () => {
+  if (publishAudioEnquiry.value) {
+    if (publishAudioEnquiry.value.keys.length > 0) {
+      let data: PublishData;
+      for (let i = 0; i < keys.value.length; i++) {
+        data = new PublishData();
+        data.FileId = keys.value[i].FileId;
+        data.PublishName = publishAudioEnquiry.value.keys[0].PublishName;
+
+        await publishAudioService.InsertPublishAudioDetail(data);
+      }
+      showModalPublishAudio.value = false;
+
+      notification.info({
+        message: "系统提示：",
+        description: "专辑发布成功",
+        placement: "topRight",
+      });
+    } else {
+      notification.info({
+        message: "系统提示：",
+        description: "请选择一条记录",
+        placement: "topRight",
+      });
+    }
+  }
+};
+
+const handleSelectPublishVideo = async () => {
+  if (publishVideoEnquiry.value) {
+    if (publishVideoEnquiry.value.keys.length > 0) {
+      let data: PublishData;
+      for (let i = 0; i < keys.value.length; i++) {
+        data = new PublishData();
+        data.FileId = keys.value[i].FileId;
+        data.PublishName = publishVideoEnquiry.value.keys[0].PublishName;
+
+        await publishVideoService.InsertPublishVideoDetail(data);
+      }
+      showModalPublishVideo.value = false;
+
+      notification.info({
+        message: "系统提示：",
+        description: "专辑发布成功",
+        placement: "topRight",
+      });
+    } else {
+      notification.info({
+        message: "系统提示：",
+        description: "请选择一条记录",
+        placement: "topRight",
+      });
+    }
+  }
+};
+
+const onGoTop = () => {
+  pathStack.value = [{ value: rootPath.value, displayName: "我的文件" }];
+  onSearchByFilePath(rootPath.value);
+};
+
+const onGoBack = () => {
+  if (pathStack.value.length > 1) {
+    pathStack.value.pop();
+    const prev = pathStack.value[pathStack.value.length - 1];
+    onSearchByFilePath(prev.value);
+  }
+};
+
+const onBreadcrumbClick = (item: BreadcrumbItem, index: number) => {
+  pathStack.value = pathStack.value.slice(0, index + 1);
+  onSearchByFilePath(item.value);
+};
+
+const onSearchByName = (keyword: string) => {
+  let c: DmsFileSearchCriteria = new DmsFileSearchCriteria();
+  let filters: SearchFilter[] = [];
+
+  let filePathFilter: SearchFilter = new SearchFilter();
+  filePathFilter.Column = FamilyDmsFileViewDisplayData.DB_FILE_PATH;
+  filePathFilter.Type = "SingleSelection";
+  filePathFilter.Operator = "single";
+  filePathFilter.Value = currFilePath.value;
+  filters.push(filePathFilter);
+
+  if (keyword && keyword.trim()) {
+    let nameFilter: SearchFilter = new SearchFilter();
+    nameFilter.Column = FamilyDmsFileViewDisplayData.DB_ORG_FILE_NAME;
+    nameFilter.Type = SearchFilterTypePolicy.TEXT;
+    nameFilter.Operator = SearchFilterOperatorPolicy.CONTAIN;
+    nameFilter.Value = keyword.trim();
+    filters.push(nameFilter);
+  }
+
+  c.Filter = filters;
+  c.limit = pagingParams.value.pageSize;
+  c.page = 1;
+  c.GridColumns = [];
+
+  currentSearchCriteria.value = c;
+  setBindOptionValue(
+    FamilyDmsFileViewDisplayData.DB_FILE_PATH,
+    currFilePath.value,
+    "",
+    [currFilePath.value],
+    false,
+  );
+  pagingParams.value.page = 1;
+  findBySearchCriteria(c);
+};
+
+const onOpenFolder = (record: FamilyDmsFileViewDisplayData) => {
+  if (record.IsDirectoryIndc == "Y" && record.PermissionIndc == "Y") {
+    pathStack.value.push({
+      value: record.FileName,
+      displayName: record.OrgFileName,
+    });
+    onChangeFolder(record.FileName);
+  }
+};
+
+const onOpenFile = (record: FamilyDmsFileViewDisplayData) => {
+  if (fileTypePolicy.isImage(record.OrgFileName)) {
+    onPreviewFile(record.CreatedBy, record.OrderKey);
+  } else if (fileTypePolicy.isVideo(record.OrgFileName)) {
+    onVideoPlay(record.FileId);
+  } else if (fileTypePolicy.isAudio(record.OrgFileName)) {
+    onPlayAudio(toUploadView(record));
+  } else {
+    onDownloadFile(record.FileId, record.OrgFileName);
+  }
+};
+
+const onDownloadSelected = (items: FamilyDmsFileViewDisplayData[]) => {
+  items.forEach((item) => {
+    if (item.IsDirectoryIndc != "Y") {
+      onDownloadFile(item.FileId, item.OrgFileName);
+    }
+  });
+};
+
+const onShareSelected = (items: FamilyDmsFileViewDisplayData[]) => {
+  if (items.length > 0) {
+    onShareFamily(items[0]);
+  }
+};
+
+const onPublishSelected = (items: FamilyDmsFileViewDisplayData[]) => {
+  if (items.length === 0) return;
+  const first = items[0];
+  if (
+    fileTypePolicy.isImage(first.OrderKey) ||
+    fileTypePolicy.isImage(first.OrgFileName)
+  ) {
+    onPublishPhoto();
+  } else if (
+    fileTypePolicy.isVideo(first.OrderKey) ||
+    fileTypePolicy.isVideo(first.OrgFileName)
+  ) {
+    onPublishVideo();
+  } else if (
+    fileTypePolicy.isAudio(first.OrderKey) ||
+    fileTypePolicy.isAudio(first.OrgFileName)
+  ) {
+    onPublishAudio();
+  }
+};
+
+const onViewPreviewSelected = (items: FamilyDmsFileViewDisplayData[]) => {
+  if (items.length === 0) return;
+  const first = items[0];
+  if (
+    fileTypePolicy.isImage(first.OrderKey) ||
+    fileTypePolicy.isImage(first.OrgFileName)
+  ) {
+    onViewPreviewPhoto(first.FilePath);
+  } else if (
+    fileTypePolicy.isVideo(first.OrderKey) ||
+    fileTypePolicy.isVideo(first.OrgFileName)
+  ) {
+    onViewPreviewVideo(first.FilePath);
+  } else if (
+    fileTypePolicy.isAudio(first.OrderKey) ||
+    fileTypePolicy.isAudio(first.OrgFileName)
+  ) {
+    onViewPreviewAudio(first.FilePath);
+  }
+};
+
+const onUrlVideoPlayItem = (record: FamilyDmsFileViewDisplayData) => {
+  onUrlVideoPlay(
+    record.Url,
+    record.OrgFileName,
+    record.FormattedPic.replace(".m3u8", ".png"),
+  );
+};
+
+const onPlayAudioItem = (record: FamilyDmsFileViewDisplayData) => {
+  onPlayAudio(record);
+};
+
+const onPreviewSelected = (items: FamilyDmsFileViewDisplayData[]) => {
+  if (items.length > 0) {
+    keys.value = items;
+    onViewPic();
+  }
+};
+
+const onAmendSelected = (items: FamilyDmsFileViewDisplayData[]) => {
+  if (items.length === 1) {
+    keys.value = items;
+    onAmend();
+  }
+};
+
+const onMoveSelected = (items: FamilyDmsFileViewDisplayData[]) => {
+  if (items.length === 1) {
+    keys.value = items;
+    onMove();
+  }
+};
+
+const onDeleteSelected = () => {
+  onDelete();
+};
 </script>
+
 <style scoped>
-.folder-list {
-  height: 80px;
-  width: 90vw;
-  border-bottom: 1px solid #ccc;
-}
-
-.folder-right {
-  position: relative;
-  right: 0;
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.rotating-element {
-  animation: rotate 2s linear infinite;
+.dms-file-enquiry {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 120px);
 }
 </style>
diff --git a/WebVue/src/views/master/OrgFamilyGroupShare.vue b/WebVue/src/views/master/OrgFamilyGroupShare.vue
new file mode 100644
index 0000000..01a9812
--- /dev/null
+++ b/WebVue/src/views/master/OrgFamilyGroupShare.vue
@@ -0,0 +1,1274 @@
+<template>
+  <a-spin size="large" :spinning="loading" :tip="spinTip">
+    <search
+      @on-submit="onSubmit"
+      @on-print="onPrint"
+      @on-reset="onReset"
+      @use-pagination="onPagination"
+      :scrollx="200"
+      @handle-change-bind-value="handleChangeBindValue"
+      :is-modal="isModal"
+      :loading="loading"
+      :pagination="result"
+      :rowSelectionType="selectionType"
+      @on-select-change="onSelectChange"
+    >
+      <template #control>
+        <a-button
+          type="primary"
+          v-if="canCreate && !isModal"
+          :icon="h(FolderAddOutlined)"
+          @click.prevent="onCreate"
+          >新增文件夹</a-button
+        >
+      </template>
+
+      <template #headerCell="{ column }">
+        <template v-if="column.dataIndex === FamilyDmsFileViewEntity.URL">
+          <span
+            style="color: darkgoldenrod; font-size: large; cursor: pointer"
+            @click.prevent="onChangeFolder(rootPath)"
+          >
+            <LaptopOutlined
+              style="color: darkgoldenrod; font-size: larger"
+              title="返回顶层"
+            />返回顶层
+          </span>
+          <span
+            style="color: darkgoldenrod; font-size: large; cursor: pointer"
+            @click.prevent="onLastFolder()"
+          >
+            <RollbackOutlined
+              style="color: darkgoldenrod; font-size: larger; margin-left: 16px"
+              title="返回上层"
+            />返回上层
+          </span>
+        </template>
+      </template>
+
+      <template #bodyCell="{ column, record, index }">
+        <template v-if="column.dataIndex === FamilyDmsFileViewEntity.URL">
+          <template v-if="!fileTypePolicy.isImage(record.OrderKey)">
+            <template v-if="record.IsDirectoryIndc == 'Y'">
+              <a-card hoverable style="width: 300px">
+                <a-card-meta>
+                  <template #description>
+                    <span
+                      style="
+                        color: darkgoldenrod;
+                        margin-left: 4pxr;
+                        cursor: pointer;
+                        font-size: 26px;
+                      "
+                      @click.prevent="onChangeFolder(record.FileName)"
+                    >
+                      <FolderOutlined
+                        style="color: darkgoldenrod; font-size: 48px"
+                        title="打开文件夹"
+                      />{{ record.OrgFileName }}
+                    </span>
+                  </template>
+                </a-card-meta>
+                <template #actions>
+                  <template v-if="record.PermissionIndc == 'Y'">
+                    <span style="font-size: 24px">
+                      <CheckCircleTwoTone
+                        style="color: darkgoldenrod; font-size: larger"
+                      />有权限
+                    </span>
+                  </template>
+                  <template v-if="record.PermissionIndc == 'N'">
+                    <span style="font-size: 24px">
+                      <CloseCircleOutlined
+                        style="color: rgb(19, 185, 190); font-size: larger"
+                      />无权限
+                    </span>
+                  </template>
+                  <template
+                    v-if="
+                      record.FavoriteIndc == 'Y' && record.PermissionIndc == 'Y'
+                    "
+                  >
+                    <span
+                      style="font-size: 24px; cursor: pointer; color: salmon"
+                      @click.prevent="
+                        onDeleteFamilyFolderFavorite(record.FolderName)
+                      "
+                    >
+                      <heart-two-tone
+                        two-tone-color="salmon"
+                        style="font-size: 24px"
+                      />已分享
+                    </span>
+                  </template>
+                  <template
+                    v-if="
+                      record.FavoriteIndc == 'N' && record.PermissionIndc == 'Y'
+                    "
+                  >
+                    <span
+                      style="font-size: 24px; cursor: pointer"
+                      @click.prevent="
+                        onInsertFamilyFolderFavorite(record.FolderName)
+                      "
+                    >
+                      <LoginOutlined
+                        two-tone-color="#0010"
+                        style="font-size: 24px"
+                      />未分享
+                    </span>
+                  </template>
+                  <template v-if="record.PermissionIndc == 'N'">
+                    <span style="font-size: 24px">
+                      <LoginOutlined
+                        two-tone-color="green"
+                        style="font-size: 24px"
+                      />不能分享
+                    </span>
+                  </template>
+                </template>
+              </a-card>
+            </template>
+            <template v-else-if="fileTypePolicy.isVideo(record.OrderKey)">
+              <a-card style="width: 300px">
+                <template #cover>
+                  <img
+                    style="height: 220px"
+                    :src="record.Url.replace('.m3u8', '.png')"
+                    :title="record.OrgFileName"
+                  />
+                </template>
+                <a-card-meta>
+                  <template #description>
+                    <a-flex>
+                      <cust-icon-font
+                        size="26"
+                        type="icon-foldervideo"
+                        @click.prevent="
+                          onUrlVideoPlay(record.Url, record.OrgFileName)
+                        "
+                      />
+                      <span
+                        style="
+                          color: darkgoldenrod;
+                          margin-left: 4pxr;
+                          margin-top: 2px;
+                        "
+                      >
+                        {{ record.OrgFileName }}
+                      </span>
+                      <cust-icon-font
+                        size="26"
+                        type="icon-mp3-play"
+                        @click.prevent="onVideoPlay(record.FileId)"
+                      />
+                    </a-flex>
+                  </template>
+                </a-card-meta>
+              </a-card>
+            </template>
+            <template v-else-if="fileTypePolicy.isAudio(record.OrderKey)">
+              <a-card hoverable style="width: 300px">
+                <a-flex>
+                  <cust-icon-font
+                    size="60"
+                    type="icon-foldermp3"
+                    @click.prevent="onPlayAudio(toFamilyView(record))"
+                  />
+                  <span
+                    style="
+                      color: darkgoldenrod;
+                      margin-left: 4pxr;
+                      margin-top: 10px;
+                    "
+                  >
+                    {{ record.OrgFileName }}
+                  </span>
+                  <div
+                    v-if="record.IsPlay == 'Y'"
+                    style="margin-left: 16px; height: 60px; width: 60px"
+                    :class="record.IsPause == '' ? 'rotating-element' : ''"
+                  >
+                    <cust-icon-font
+                      size="60"
+                      type="icon-playmp3"
+                      v-if="record.IsPause == ''"
+                      @click.prevent="onPauseAudio(toFamilyView(record))"
+                    />
+                    <cust-icon-font
+                      size="54"
+                      type="icon-mp3-play"
+                      style="color: #ff7878"
+                      v-if="record.IsPlay == 'Y' && record.IsPause == 'Y'"
+                      @click.prevent="onContinueAudio(toFamilyView(record))"
+                    />
+                  </div>
+                </a-flex>
+              </a-card>
+            </template>
+            <template v-else>
+              <DownloadOutlined
+                style="
+                  color: rgb(19, 185, 190);
+                  font-size: larger;
+                  margin-right: 12px;
+                "
+                title="下载"
+                @click.prevent="
+                  onDownloadFile(record.FileId, record.OrgFileName)
+                "
+              />
+              <span>{{ record.OrgFileName }} </span>
+            </template>
+          </template>
+          <template v-else>
+            <a-card hoverable style="width: 300px">
+              <template #cover>
+                <img
+                  style="height: 260px; object-fit: cover"
+                  :src="record.Url"
+                  :title="record.OrgFileName"
+                  @click="onPreviewFile(record.CreatedBy, record.OrderKey)"
+                />
+              </template>
+              <a-card-meta>
+                <template #description>
+                  <span
+                    style="color: darkgoldenrod; margin-left: 4pxr"
+                    @click.prevent="
+                      onViewPictureFile(record.FileId, record.OrgFileName)
+                    "
+                  >
+                    <cust-icon-font size="26" type="icon-source-pic" />
+                    {{ record.OrgFileName }}
+                  </span>
+                </template>
+              </a-card-meta>
+            </a-card>
+          </template>
+        </template>
+      </template>
+
+      <template #footer>
+        <div v-if="!isModal" class="page-footer">
+          <a-row :gutter="24">
+            <a-col :lg="24" :sm="24">
+              <a-row v-if="!isEdit" :gutter="[16, 8]">
+                <a-space>
+                  <a-button
+                    type="primary"
+                    v-if="canAmend"
+                    :icon="h(FileImageOutlined)"
+                    :disabled="!(keys && keys.length > 0)"
+                    @click.prevent="onViewPic"
+                    >预览</a-button
+                  >
+                  <a-popconfirm
+                    :disabled="
+                      !(
+                        keys &&
+                        keys.length > 0 &&
+                        keys[0].PermissionIndc == 'Y'
+                      )
+                    "
+                    title="确定是否删除这条记录?"
+                    ok-text="是"
+                    cancel-text="否"
+                    @confirm="onDelete"
+                  >
+                    <a-button
+                      type="primary"
+                      danger
+                      :icon="h(DeleteOutlined)"
+                      :disabled="
+                        !(
+                          keys &&
+                          keys.length > 0 &&
+                          keys[0].PermissionIndc == 'Y'
+                        )
+                      "
+                      v-if="canDelete"
+                      >删除</a-button
+                    >
+                  </a-popconfirm>
+                </a-space>
+              </a-row>
+            </a-col>
+          </a-row>
+        </div>
+      </template>
+    </search>
+    <a-image
+      :width="1024"
+      :style="{ display: 'none' }"
+      :preview="{
+        visible,
+        onVisibleChange: setPicVisible,
+      }"
+      :src="imageSrc"
+    />
+    <dmsFolder @on-submit="onReload"></dmsFolder>
+    <videoPlay></videoPlay>
+  </a-spin>
+</template>
+
+<script setup lang="ts">
+import {
+  reactive,
+  inject,
+  onUnmounted,
+  onMounted,
+  ref,
+  unref,
+  provide,
+  h,
+} from "vue";
+import { BindOption } from "@/data/custom/bindOption";
+import { SelectOption } from "@/data/auto/selectOption";
+import search from "@/components/basic/Search.vue";
+import {
+  DeleteOutlined,
+  LoginOutlined,
+  LaptopOutlined,
+  CheckCircleTwoTone,
+  RollbackOutlined,
+  CheckSquareTwoTone,
+  NotificationOutlined,
+  PictureOutlined,
+  HeartTwoTone,
+  CloseCircleOutlined,
+  FolderAddOutlined,
+  DownloadOutlined,
+  FolderOutlined,
+  FileImageOutlined,
+  CrownOutlined,
+} from "@ant-design/icons-vue";
+import { DmsFileEntity } from "@/data/auto/dmsFileEntity";
+import { DmsFileResultData } from "@/data/auto/dmsFileResultData";
+import { FamilyGroupFolderEntity } from "@/data/auto/familyGroupFolderEntity";
+import { FamilyDmsFileViewEntity } from "@/data/auto/familyDmsFileViewEntity";
+import { SearchFilter } from "@/data/auto/searchFilter";
+import dmsFileService from "@/service/master/dmsFileService";
+import { DmsFileSearchCriteria } from "@/data/auto/dmsFileSearchCriteria";
+import FamilyGroupService from "@/service/master/familyGroupService";
+import publishPhotoService from "@/service/master/publishPhotoService";
+import { SearchCriteriaResultData } from "@/data/auto/searchCriteriaResultData";
+import {
+  PermissionContext,
+  usePermissionContext,
+} from "@/hooks/PermissionContext";
+import { useRoute, useRouter } from "vue-router";
+
+import { useBindOption } from "@/hooks/useBindOption";
+import { SearchFilterOperatorPolicy } from "@/data/custom/searchFilterOperatorPolicy";
+import { SearchFilterTypePolicy } from "@/data/custom/searchFilterTypePolicy";
+import { notification } from "ant-design-vue";
+import { GridColumnInfo } from "@/data/auto/gridColumnInfo";
+import { useGridColumnInfo } from "@/hooks/gridColumnInfo";
+import dmsFolder from "./DmsFolderModal.vue";
+
+import { useLoginProfileStore } from "@/store/modules/loginProfile";
+import type { UploadProps } from "ant-design-vue";
+import { WebSitePolicy } from "@/policy/custom/webSitePolicy";
+import { forEach, orderBy } from "lodash-es";
+import { bsInfo } from "@/utils/browser";
+import axios from "axios";
+import { getuid } from "process";
+import VideoPlay from "./PlayVideo.vue";
+import {
+  enquiryMethodKey,
+  searchCriteriaManagerKey,
+  masterOperationToEnquiryMethodKey,
+  MasterOperationToEnquiryModelOption,
+  layoutProviderMethodKey,
+} from "@/injections";
+import { useOrderedChildren } from "@/hooks/use-ordered-children";
+import { SearchCriteriaContext } from "@/injections";
+import fileTypePolicy from "@/policy/custom/fileTypePolicy";
+import { Howl, Howler } from "howler";
+import { FamilyDmsFileViewDisplayData } from "@/data/auto/familyDmsFileViewDisplayData";
+
+//page from-----------------------------------------------------------------------------------------------------------------------------------
+//================inject================
+//报表名称
+const layoutProviderMethod = inject(layoutProviderMethodKey);
+
+//当前是弹出的Modal,还是Page
+const isModal = ref(inject("isModalFamilyDmsFile", false) as boolean);
+//初始化查询条件的值
+const initBindOptions = ref(
+  inject("initBindOptionsFamilyDmsFile", []) as BindOption[],
+);
+//记录单选还是多选
+const selectionType = ref(
+  inject("selectionTypeFamilyDmsFile", "radio") as string,
+);
+
+//================inject================
+
+const widthColumn = ref<string>("3%");
+if (bsInfo.size.sm) {
+  widthColumn.value = "8%";
+} else {
+  widthColumn.value = "3%";
+}
+const spinTip = ref<string>("加載中...");
+const loading = ref<boolean>(false);
+const isEdit = ref<boolean>(false);
+const canView = ref<boolean>(false);
+const canAmend = ref<boolean>(false);
+const canDelete = ref<boolean>(false);
+const canCreate = ref<boolean>(false);
+const modalTitle = ref<string>("新增文件夹");
+const rootPath = ref<string>("");
+const imageSrc = ref<string>("");
+const route = useRoute();
+const router = useRouter();
+
+const fileList = ref<UploadProps["fileList"]>([]);
+const uploadUrl = ref<string>(WebSitePolicy.WebApiRoot + "DmsFile/UploadFile");
+if (process.env.NODE_ENV === "development") {
+  uploadUrl.value = WebSitePolicy.WebApiRootDev + "/DmsFile/UploadFile";
+} else {
+  uploadUrl.value = WebSitePolicy.WebApiRoot + "/DmsFile/UploadFile";
+}
+const previousFilePath = ref<string>("");
+const currFilePath = ref<string>("");
+const headers = ref({
+  Authorization: useLoginProfileStore().getToken(),
+  "Content-Type": "multipart/form-data",
+  FilePath: currFilePath.value,
+});
+
+const columns = ref([
+  {
+    title: "",
+    dataIndex: FamilyDmsFileViewEntity.URL,
+    sorter: false,
+    width: "50%",
+    sequence: 1,
+    hidden: "N",
+  },
+]);
+
+const viewOption = {
+  Value: "default",
+  SelectOptions: [{ BindValue: "default", DisplayName: "默认" }],
+  Columns: [{ BindValue: "default", BindColumn: columns }],
+};
+
+const bindOptions = ref<BindOption[]>([]);
+const datas = ref<FamilyDmsFileViewDisplayData[]>([]);
+const pagingParams = ref<PagingParams>({ pageSize: 20, page: 1 });
+const result = ref<SearchCriteriaResultData>(new SearchCriteriaResultData());
+
+const data = ref<DmsFileResultData>(new DmsFileResultData());
+const currentFilter = ref<SearchFilter[]>([]);
+const isSearched = ref<boolean>(false);
+const currentSearchCriteria = ref<DmsFileSearchCriteria>(
+  new DmsFileSearchCriteria(),
+);
+
+const keys = ref<FamilyDmsFileViewDisplayData[]>([]);
+const dmsFolderModal = ref<boolean>(false);
+const dmsFolderTitle = ref<string>("新增文件夹");
+const dmsFolderIsRename = ref<boolean>(false);
+const dmsFolderIsMove = ref<boolean>(false);
+const entity = ref<DmsFileEntity>(new DmsFileEntity());
+const videoPlayModal = ref<boolean>(false);
+const videoSrc = ref<string>("");
+const videoType = ref<string>("");
+const videoPlayTitle = ref<string>("");
+const currentFamilyName = ref<string>("");
+
+const {
+  children: items,
+  addChild: addItem,
+  removeChild: removeItem,
+} = useOrderedChildren<SearchCriteriaContext>();
+
+//================provide================
+//初始化查询条件UI
+
+provide("dmsFolderModal", dmsFolderModal);
+provide("dmsFolderTitle", dmsFolderTitle);
+provide("dmsFolderIsRename", dmsFolderIsRename);
+provide("dmsFolderIsMove", dmsFolderIsMove);
+provide("dmsFolderIsFamilyGroup", true);
+provide("dmsFolderFamilyName", currentFamilyName);
+provide("DmsFileEntity", entity);
+
+provide("videoPlayModal", videoPlayModal);
+provide("videoPlayTitle", videoPlayTitle);
+provide("videoSrc", videoSrc);
+provide("videoType", videoType);
+provide(enquiryMethodKey, {
+  getLayoutSetting: () => {
+    return {
+      controlLeft: 16,
+      controlRight: 8,
+      space: true,
+      soltLeft: 24,
+      soltRight: 24,
+    };
+  },
+  getBindOptions: () => {
+    return unref(bindOptions);
+  },
+  getViewOption: () => {
+    return unref(viewOption);
+  },
+  getDatas: () => {
+    return datas;
+  },
+});
+
+provide(
+  searchCriteriaManagerKey,
+  reactive({
+    items,
+    addItem,
+    removeItem,
+  }),
+);
+//================provide================
+
+const sound = ref();
+
+// 表格 bodyCell 的 record 被透传为 Record<string, any>，转成具体展示类型
+const toFamilyView = (r: Record<string, any>): FamilyDmsFileViewDisplayData =>
+  r as FamilyDmsFileViewDisplayData;
+
+onUnmounted(() => {
+  sound.value?.stop();
+});
+
+const play = (src: string) => {
+  sound.value?.stop();
+  if (!src || src == undefined || src == "") {
+    return;
+  }
+
+  sound.value = new Howl({
+    src: src,
+    volume: 0.5,
+    autoplay: true,
+    loop: false,
+    html5: true,
+    preload: true,
+    onload: () => {
+      // console.log('loaded');
+    },
+    onplay: () => {
+      // console.log('play');
+    },
+    onpause: () => {
+      // console.log('pause');
+    },
+    onend: () => {
+      // console.log('end');
+      datas.value.forEach((element) => {
+        element.IsPlay = "";
+      });
+    },
+  });
+
+  sound.value.play();
+};
+
+const onPauseAudio = (record: FamilyDmsFileViewDisplayData) => {
+  record.IsPause = "Y";
+  sound.value.pause();
+};
+
+const onContinueAudio = (record: FamilyDmsFileViewDisplayData) => {
+  record.IsPause = "";
+  sound.value.play();
+};
+
+const onPlayAudio = (record: FamilyDmsFileViewDisplayData) => {
+  datas.value.forEach((element) => {
+    if (element.FileId == record.FileId && element.IsPlay == "Y") {
+      element.IsPlay = "";
+    } else if (
+      element.FileId == record.FileId &&
+      (element.IsPlay == "" ||
+        element.IsPlay == null ||
+        element.IsPlay == undefined)
+    ) {
+      element.IsPlay = "Y";
+    } else {
+      element.IsPlay = "";
+    }
+    record.IsPause = "";
+  });
+
+  if (record.IsPlay == "") {
+    sound.value?.stop();
+    return;
+  }
+
+  play(record.Url);
+};
+
+defineExpose({
+  keys,
+  initBindOptions,
+});
+
+onMounted(async () => {
+  let pContext: PermissionContext = usePermissionContext();
+  canView.value = pContext.canView(route.meta.permission as string);
+  canAmend.value = pContext.canAmend(route.meta.permission as string);
+  canDelete.value = pContext.canDelete(route.meta.permission as string);
+  canCreate.value = pContext.canCreate(route.meta.permission as string);
+
+  await initBindOption("");
+
+  onSearchByFilePath(rootPath.value);
+});
+
+const onViewPreview = async () => {
+  router.push({
+    name: "Preview",
+    params: { id: currentFamilyName.value, mode: "view" },
+  });
+};
+
+const onSelectChange = (selected: FamilyDmsFileViewDisplayData[]) => {
+  keys.value = selected;
+};
+
+const onPoublicFile = async (fid: number) => {
+  // publishPhotoService.InsertPublishPhotoDetailByFamilyGroup(fid).then(() => {
+  //     notification.info({
+  //         message: '系统提示：',
+  //         description: '图片已发布',
+  //         placement: "topRight",
+  //     });
+  // });
+};
+
+const onChangeFolder = async (fvalue: string) => {
+  onSearchByFilePath(fvalue);
+};
+
+const onLastFolder = async () => {
+  if (!datas.value || datas.value.length == 0) {
+    onSearchByFilePath(previousFilePath.value);
+  } else {
+    onPreviousFolder();
+  }
+};
+
+const onPreviousFolder = async () => {
+  let filePath: string = "";
+  if (datas.value && datas.value.length > 0) filePath = datas.value[0].FilePath;
+  dmsFileService.FindFolderNameParentByFolderName(filePath).then((res) => {
+    if (res && res.length > 0) onSearchByFilePath(res);
+  });
+};
+
+const onVideoPlay = async (fid: number) => {
+  //从服务器取出源视频
+  dmsFileService
+    .FindSourceVideoPath(fid)
+    .then((res) => {
+      videoType.value = "video/mp4";
+      videoSrc.value = res;
+      videoPlayModal.value = true;
+    })
+    .catch(() => {
+      videoPlayModal.value = false;
+    });
+};
+
+const DownloadFileCombine = (
+  fs: string[],
+  mergedData: Uint8Array,
+  index: number,
+  ttl: number,
+  total: number,
+  preview: boolean,
+  fname: string,
+) => {
+  loading.value = true;
+  fs[fs.length - 2] = index.toString();
+  spinTip.value = "加载中(" + index + "/" + total + ")...";
+  dmsFileService
+    .DownloadFileCombine(fs.toString().replace(/,/g, "-"))
+    .then((res) => {
+      mergedData.set(new Uint8Array(res), ttl);
+      if (index < total) {
+        DownloadFileCombine(
+          fs,
+          mergedData,
+          index + 1,
+          ttl + res.byteLength,
+          total,
+          preview,
+          fname,
+        );
+      } else if (index == total) {
+        loading.value = false;
+        spinTip.value = "加载中...";
+        const downloadUrl = window.URL.createObjectURL( new Blob([mergedData as unknown as BlobPart]),);
+        imageSrc.value = downloadUrl;
+        if (!preview) {
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute("download", fname);
+          document.body.appendChild(link);
+          link.click();
+        } else {
+          setPicVisible(true);
+        }
+      }
+    })
+    .catch(() => {
+      spinTip.value = "加载中...";
+      loading.value = false;
+    });
+};
+
+const onDownloadFile = async (fid: number, fname: string) => {
+  GetOrgPictureFile(fid, fname, false);
+};
+
+const onPreviewFile = async (username: string, orderKey: string) => {
+  loading.value = true;
+  getPreviewFile(username, orderKey);
+};
+
+const getPreviewFile = (username: string, fname: string) => {
+  let dms: DmsFileEntity = new DmsFileEntity();
+  dms.CreatedBy = username;
+  dms.OrderKey = fname;
+  dmsFileService
+    .DownloadFilePreview(dms)
+    .then((res) => {
+      const downloadUrl = window.URL.createObjectURL(new Blob([res]));
+      imageSrc.value = downloadUrl;
+      loading.value = false;
+      setPicVisible(true);
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+};
+
+const GetOrgPictureFile = async (
+  fid: number,
+  fname: string,
+  preview: boolean,
+) => {
+  if (fileTypePolicy.isVideo(fname)) {
+    onVideoPlay(keys.value[0].FileId);
+    return;
+  }
+  if (preview && !fileTypePolicy.isImage(fname)) {
+    onPreviewFile(keys.value[0].CreatedBy, keys.value[0].OrderKey);
+    return;
+  }
+
+  loading.value = true;
+  dmsFileService
+    .FindByKey(fid)
+    .then((res) => {
+      let fs: string[] = res.OrderKey.split("-");
+      let index: string = fs[fs.length - 2];
+      let total: string = fs[fs.length - 1].split(".")[0];
+      var mergedData = new Uint8Array((res.FileSize + 1) * 1024);
+      let ttl: number = 0;
+      fs[fs.length - 2] = "1";
+      spinTip.value = "加载中(1/" + total + ")...";
+      DownloadFileCombine(
+        fs,
+        mergedData,
+        1,
+        ttl,
+        parseInt(total),
+        preview,
+        fname,
+      );
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+};
+
+const onUrlVideoPlay = (url: string, title: string) => {
+  sound.value?.stop();
+  datas.value.forEach((element) => {
+    element.IsPlay = "";
+  });
+  videoType.value = "m3u8";
+  videoSrc.value = url;
+  videoPlayModal.value = true;
+  videoPlayTitle.value = title;
+};
+
+const onViewPictureFile = async (fid: number, fname: string) => {
+  GetOrgPictureFile(fid, fname, true);
+};
+
+const onDeleteFamilyFolderFavorite = async (folderName: string) => {
+  FamilyGroupService.DeleteFamilyFolderFavorite(folderName).then(() => {
+    notification.info({
+      message: "系统提示：",
+      description: "收藏分享成功移除",
+      placement: "topRight",
+    });
+    onReload();
+  });
+};
+
+const onInsertFamilyFolderFavorite = async (folderName: string) => {
+  FamilyGroupService.InsertFamilyFolderFavorite(folderName).then(() => {
+    notification.info({
+      message: "系统提示：",
+      description: "收藏分享成功加入",
+      placement: "topRight",
+    });
+    onReload();
+  });
+};
+
+const onSearchByFilePath = async (fvalue: string) => {
+  setBindOptionValue(
+    FamilyDmsFileViewEntity.DB_FILE_PATH,
+    fvalue,
+    "",
+    [fvalue],
+    false,
+  );
+  previousFilePath.value = unref(currFilePath.value);
+  currFilePath.value = fvalue;
+
+  currentSearchCriteria.value.Filter = [];
+  let filter: SearchFilter;
+  filter = new SearchFilter();
+  filter.Column = FamilyDmsFileViewEntity.DB_FAMILY_NAME;
+  filter.Type = "SingleSelection";
+  filter.Operator = "single";
+  let bindOption: BindOption = bindOptions.value.filter(
+    (x) => x.BindValue == FamilyDmsFileViewEntity.DB_FAMILY_NAME,
+  )[0];
+  filter.Value = bindOption.Value;
+
+  currentSearchCriteria.value.Filter.push(filter);
+  filter = new SearchFilter();
+  filter.Column = FamilyDmsFileViewEntity.DB_FILE_PATH;
+  filter.Type = "SingleSelection";
+  filter.Operator = "single";
+  filter.Value = fvalue;
+  currentSearchCriteria.value.Filter.push(filter);
+
+  await findBySearchCriteria(unref(currentSearchCriteria));
+};
+
+const onReset = () => {
+  keys.value = [];
+  result.value.Total = 0;
+  setBindOptionValue(
+    FamilyDmsFileViewEntity.DB_FAMILY_NAME,
+    currentFamilyName.value,
+    "",
+    [currentFamilyName.value],
+    false,
+  );
+  setBindOptionValue(
+    FamilyDmsFileViewEntity.DB_FILE_PATH,
+    currentFamilyName.value,
+    "",
+    [currentFamilyName.value],
+    false,
+  );
+};
+
+const onViewPic = () => {
+  if (keys.value.length == 0) return;
+  if (keys.value[0].IsDirectoryIndc == "Y") {
+    onChangeFolder(keys.value[0].FileName);
+  } else if (
+    keys.value[0].OrgFileName.toLowerCase().indexOf("png") > 0 ||
+    keys.value[0].OrgFileName.toLowerCase().indexOf("jpg") > 0 ||
+    keys.value[0].OrgFileName.toLowerCase().indexOf("jpeg") > 0 ||
+    keys.value[0].OrgFileName.toLowerCase().indexOf("gif") > 0
+  ) {
+    onPreviewFile(keys.value[0].CreatedBy, keys.value[0].OrderKey);
+  } else if (
+    keys.value[0].OrgFileName.toLowerCase().indexOf("mp4") > 0 ||
+    keys.value[0].OrgFileName.toLowerCase().indexOf("mp3") > 0 ||
+    keys.value[0].OrgFileName.toLowerCase().indexOf("rm") > 0 ||
+    keys.value[0].OrgFileName.toLowerCase().indexOf("mpeg") > 0 ||
+    keys.value[0].OrgFileName.toLowerCase().indexOf("mov") > 0 ||
+    keys.value[0].OrgFileName.toLowerCase().indexOf("wmv") > 0 ||
+    keys.value[0].OrgFileName.toLowerCase().indexOf("avi") > 0
+  ) {
+    onVideoPlay(keys.value[0].FileId);
+  } else {
+    notification.info({
+      message: "系统提示：",
+      description: "未知格式无法预览",
+      placement: "topRight",
+    });
+  }
+};
+
+const visible = ref<boolean>(false);
+const setPicVisible = (value: boolean): void => {
+  visible.value = value;
+};
+
+const onCreate = () => {
+  if (currFilePath.value == currentFamilyName.value) {
+    notification.info({
+      message: "系统提示：",
+      description: "群组一级目录,请在群组管理创建.",
+      placement: "topRight",
+    });
+    return;
+  }
+
+  dmsFolderTitle.value = "新增文件夹";
+  dmsFolderIsRename.value = false;
+  dmsFolderIsMove.value = false;
+  dmsFolderModal.value = true;
+
+  entity.value = new DmsFileEntity();
+  let bindOption: BindOption = bindOptions.value.filter(
+    (x) => x.BindValue == FamilyDmsFileViewEntity.DB_FILE_PATH,
+  )[0];
+
+  entity.value.FilePath = bindOption.SelectOptions.filter(
+    (x) => x.BindValue == bindOption.Value,
+  )[0].DisplayName;
+  entity.value.OrgFileName = bindOption.Value;
+
+  previousFilePath.value = unref(currFilePath.value);
+  currFilePath.value = bindOption.Value;
+};
+
+const onDelete = async () => {
+  let fgfs: FamilyGroupFolderEntity[] = [];
+  let fgf: FamilyGroupFolderEntity;
+  keys.value.forEach((element) => {
+    fgf = new FamilyGroupFolderEntity();
+    fgf.FamilyName = element.FamilyName;
+    fgf.FolderName = keys.value[0].FolderName;
+    fgf.TopFolderName = element.TopFolderName;
+    fgf.FilePath = element.FilePath;
+    fgfs.push(fgf);
+  });
+
+  await dmsFileService.DeleteFamilyGroupFolder(fgfs).then(() => {
+    notification.info({
+      message: "系统提示：",
+      description: "记录删除成功",
+      placement: "topRight",
+    });
+    onReload();
+  });
+};
+
+const setBindOptionValue = (
+  bindValue: string,
+  value: string,
+  value1: string,
+  values: string[],
+  disabled: boolean,
+) => {
+  let bindOption: BindOption = bindOptions.value.filter(
+    (x) => x.BindValue == bindValue,
+  )[0];
+  if (!bindOption) return;
+  bindOption.Value = value;
+  bindOption.Value1 = value1;
+  bindOption.Values = values;
+  bindOption.disabled = disabled;
+};
+
+const setBindSelectOption = (
+  bindValue: string,
+  SelectOptions: SelectOption[],
+) => {
+  let bindOption: BindOption = bindOptions.value.filter(
+    (x) => x.BindValue == bindValue,
+  )[0];
+  if (!bindOption) return;
+  bindOption.SelectOptions = SelectOptions;
+};
+
+//初始化查询条件
+const initBindOption = async (familyName: string) => {
+  let ubo = useBindOption();
+  bindOptions.value = [];
+  bindOptions.value.splice(0, bindOptions.value.length);
+  let bindOption: BindOption = ubo.getBindOption(
+    FamilyDmsFileViewEntity.DB_ORG_FILE_NAME,
+    "名称",
+    SearchFilterTypePolicy.TEXT,
+    SearchFilterOperatorPolicy.CONTAIN,
+  );
+  bindOptions.value.push(bindOption);
+  let fps: SelectOption[] = [];
+  fps.push({ BindValue: "", DisplayName: "" });
+
+  let rps: SelectOption[] = await dmsFileService.FindFamilyDmsFolders();
+  if (rps && rps.length > 0) {
+    if (familyName && familyName.length > 0) {
+      currentFamilyName.value = rootPath.value = familyName;
+    } else {
+      currentFamilyName.value = rootPath.value = rps[0].BindValue;
+    }
+    fps = await dmsFileService.FindFamilyDmsFoldersByFamilyName(
+      currentFamilyName.value,
+    );
+  }
+
+  bindOption = ubo.getBindSelectOption(
+    FamilyDmsFileViewEntity.DB_FAMILY_NAME,
+    "当前群组",
+    SearchFilterTypePolicy.SINGLE_SELECTION,
+    SearchFilterOperatorPolicy.SINGLE,
+    rps,
+  );
+  bindOptions.value.push(bindOption);
+
+  bindOption = ubo.getBindSelectOption(
+    FamilyDmsFileViewEntity.DB_FILE_PATH,
+    "当前路径",
+    SearchFilterTypePolicy.SINGLE_SELECTION,
+    SearchFilterOperatorPolicy.SINGLE,
+    fps,
+  );
+  //bindOption.disabled = true;
+  //bindOption.lg = 24;
+  bindOptions.value.push(bindOption);
+
+  initBindOptions.value.forEach((element) => {
+    setBindOptionValue(
+      element.BindValue,
+      element.Value,
+      element.Value1,
+      element.Values,
+      element.disabled,
+    );
+  });
+
+  setBindOptionValue(
+    FamilyDmsFileViewEntity.DB_FAMILY_NAME,
+    currentFamilyName.value,
+    "",
+    [currentFamilyName.value],
+    false,
+  );
+};
+
+//table from-----------------------------------------------------------------------------------------------------------------------------------
+
+result.value.Page = pagingParams.value.page ?? 1;
+result.value.Limit = pagingParams.value.pageSize;
+
+const onSubmit = async (filters: SearchFilter[]) => {
+  loading.value = true;
+  let c: DmsFileSearchCriteria = new DmsFileSearchCriteria();
+  currentFilter.value = filters;
+  isSearched.value = true;
+  c.Filter = filters;
+  c.limit = pagingParams.value.pageSize;
+  c.page = pagingParams.value.page ?? 1;
+  c.GridColumns = [];
+  currentSearchCriteria.value = c;
+
+  await findBySearchCriteria(c);
+};
+
+const handleChangeBindValue = async (bindValue: string, value: string) => {
+  if (value == FamilyDmsFileViewEntity.DB_FAMILY_NAME) {
+    let rps: SelectOption[] =
+      await dmsFileService.FindFamilyDmsFoldersByFamilyName(bindValue);
+
+    setBindSelectOption(FamilyDmsFileViewEntity.DB_FILE_PATH, rps);
+
+    if (rps && rps.length > 0) {
+      currentFamilyName.value = rootPath.value = rps[0].BindValue;
+
+      currentSearchCriteria.value.Filter = [];
+      let filter: SearchFilter;
+      filter = new SearchFilter();
+      filter.Column = FamilyDmsFileViewEntity.DB_FAMILY_NAME;
+      filter.Type = "SingleSelection";
+      filter.Operator = "single";
+      let bindOption: BindOption = bindOptions.value.filter(
+        (x) => x.BindValue == FamilyDmsFileViewEntity.DB_FAMILY_NAME,
+      )[0];
+      filter.Value = bindOption.Value;
+
+      currentSearchCriteria.value.Filter.push(filter);
+      filter = new SearchFilter();
+      filter.Column = FamilyDmsFileViewEntity.DB_FILE_PATH;
+      filter.Type = "SingleSelection";
+      filter.Operator = "single";
+      filter.Value = bindOption.Value;
+      currentSearchCriteria.value.Filter.push(filter);
+
+      currFilePath.value = filter.Value;
+      setBindOptionValue(
+        FamilyDmsFileViewEntity.DB_FILE_PATH,
+        currentFamilyName.value,
+        "",
+        [currentFamilyName.value],
+        false,
+      );
+
+      await findBySearchCriteria(unref(currentSearchCriteria));
+    }
+  } else if (value == FamilyDmsFileViewEntity.DB_FILE_PATH) {
+    currentSearchCriteria.value.Filter = [];
+    let filter: SearchFilter;
+    filter = new SearchFilter();
+    filter.Column = FamilyDmsFileViewEntity.DB_FILE_PATH;
+    filter.Type = "SingleSelection";
+    filter.Operator = "single";
+    let bindOption: BindOption = bindOptions.value.filter(
+      (x) => x.BindValue == FamilyDmsFileViewEntity.DB_FILE_PATH,
+    )[0];
+
+    currFilePath.value = filter.Value = bindOption.Value;
+
+    currentSearchCriteria.value.Filter.push(filter);
+
+    await findBySearchCriteria(unref(currentSearchCriteria));
+  }
+};
+const onPrint = async () => {
+  loading.value = true;
+  let c: DmsFileSearchCriteria = new DmsFileSearchCriteria();
+  if (currentFilter.value.length > 0) c.Filter = currentFilter.value;
+  else c.Filter = [];
+
+  c.limit = pagingParams.value.pageSize;
+  c.page = pagingParams.value.page ?? 1;
+  c.GridColumns = useGridColumnInfo().getGridColumnInfo(unref(columns));
+  c.ReportName = layoutProviderMethod?.getLayoutProvider().layoutTitle!;
+  try {
+    //let sss = await dmsFileService.PrintBySearchCriteria(c);
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+const findBySearchCriteria = async (c: DmsFileSearchCriteria) => {
+  keys.value = [];
+  try {
+    if (c.limit == 0) c.limit = pagingParams.value.pageSize;
+    if (c.page == 0) c.page = pagingParams.value.page ?? 1;
+    data.value = await dmsFileService.FindFamilyBySearchCriteria(c);
+    result.value.Total = data.value.Total;
+    result.value.Page = data.value.Page;
+    result.value.Limit = data.value.Limit;
+    if (data.value.Families)
+      data.value.Families = orderBy(
+        data.value.Families,
+        (x) => x.IsDirectoryIndc,
+        "desc",
+      );
+
+    datas.value = data.value.Families;
+    loading.value = false;
+  } catch (error) {
+    loading.value = false;
+    console.log(error);
+  }
+};
+
+const onPagination = async (params: PagingParams) => {
+  try {
+    if (!isSearched.value) return;
+    let c: DmsFileSearchCriteria = new DmsFileSearchCriteria();
+
+    if (currentFilter.value.length > 0) c.Filter = currentFilter.value;
+    else c.Filter = [];
+
+    c.limit = params.pageSize;
+    c.page = params.page ?? 1;
+    if (params.sortField) c.orderby = params.sortField!;
+    if (params.sortOrder)
+      c.orderbytag = params.sortOrder?.toString().substring(0, 4)!;
+    c.GridColumns = [];
+    loading.value = true;
+    currentSearchCriteria.value = c;
+    await findBySearchCriteria(c);
+  } catch (error) {
+    loading.value = false;
+    console.log(error);
+  }
+};
+
+const onReSearch = async () => {
+  setBindOptionValue(
+    FamilyDmsFileViewEntity.DB_FAMILY_NAME,
+    currentFamilyName.value,
+    "",
+    [currentFamilyName.value],
+    false,
+  );
+  await findBySearchCriteria(unref(currentSearchCriteria));
+};
+
+const onReload = async () => {
+  let orgFn: string = currentFamilyName.value;
+  let orgFp: string = currFilePath.value;
+
+  await initBindOption(currentFamilyName.value);
+
+  currentFamilyName.value = orgFn;
+  currFilePath.value = orgFp;
+
+  setBindOptionValue(
+    FamilyDmsFileViewEntity.DB_FAMILY_NAME,
+    currentFamilyName.value,
+    "",
+    [currentFamilyName.value],
+    false,
+  );
+  setBindOptionValue(
+    FamilyDmsFileViewEntity.DB_FILE_PATH,
+    currFilePath.value,
+    "",
+    [currFilePath.value],
+    false,
+  );
+
+  await findBySearchCriteria(unref(currentSearchCriteria));
+};
+//table end-----------------------------------------------------------------------------------------------------------------------------------
+</script>
+<style scoped>
+.folder-list {
+  height: 80px;
+  width: 90vw;
+  border-bottom: 1px solid #ccc;
+}
+
+.folder-right {
+  position: relative;
+  right: 0;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.rotating-element {
+  animation: rotate 2s linear infinite;
+}
+</style>