分享媒体详情

Web/src/pages/page-web/projects/media/detail/components/FileInfo.vue

@@ -13,6 +13,7 @@
         </div>
         <div class="fileInfo-detail-info">
           <CloseOutlined class="fileInfo-detail-info-close" @click="onClose" />
+          <ShareAltOutlined class="fileInfo-detail-info-share" @click="onClickShare" />
           <div class="fileInfo-detail-info-title">
             详细信息
           </div>
@@ -142,7 +143,7 @@
 <script lang="ts" setup>
 import { ref, reactive, onMounted, nextTick } from 'vue';
 import { message } from 'ant-design-vue';
-import { CloseOutlined, EnvironmentOutlined, DownloadOutlined, AimOutlined, VerticalRightOutlined, VerticalLeftOutlined } from '@ant-design/icons-vue';
+import { CloseOutlined, ShareAltOutlined, EnvironmentOutlined, DownloadOutlined, AimOutlined, VerticalRightOutlined, VerticalLeftOutlined } from '@ant-design/icons-vue';
 import Panoramic from '/@/components/panoramic/index.vue';
 import { useGMapManage } from '/@/hooks/use-g-map';
 import { apis } from '/@/api/custom';
@@ -249,6 +250,12 @@ onMounted(async () => {
   scrollToSelected()
 })
 
+const onClickShare = () => {
+  const url = window.location.origin + `/mediaInfo?workspaceId=${getWorkspaceId()}&fileId=${state.currentId}`;
+  navigator.clipboard.writeText(url);
+  message.success('分享链接已复制到剪贴板');
+}
+
 // 点击下载
 const onClickDownload = async () => {
   state.downloadLoading = true;
@@ -392,6 +399,14 @@ const onClickSelected = async (id: string) => {
         cursor: pointer;
       }
 
+      &-share {
+        font-size: 20px;
+        position: absolute;
+        right: 58px;
+        top: 24px;
+        cursor: pointer;
+      }
+
       &-title {
         font-size: 16px;
         margin-bottom: 16px;