feat: DEFECT-1123 分享功能新增分享链接

@@ -3,9 +3,13 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { FieldsEnum, schemas, ViewTypeEnum } from './config';
   import { DataBoardRecord } from '/@/api/dataBoard/model';
-  import { Alert } from 'ant-design-vue';
+  import { Alert, Button, Tooltip } from 'ant-design-vue';
   import { ref, unref } from 'vue';
   import { nextTick } from 'vue';
+  import { ModalParamsType } from '/#/utils';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { computed } from 'vue';
 
   const props = defineProps<{
     shareApi?: (...args: any[]) => Promise<any>;
@@ -13,15 +17,20 @@
 
   const loading = ref(false);
   const record = ref<DataBoardRecord>({} as unknown as DataBoardRecord);
+  const link = ref('');
 
-  const [register, { closeModal }] = useModalInner(async (data: DataBoardRecord) => {
-    record.value = data;
-    await nextTick();
-    setFieldsValue({
-      [FieldsEnum.IS_SHARE]: data.viewType === ViewTypeEnum.PUBLIC_VIEW,
-      [FieldsEnum.ACCESS_CREDENTIALS]: data.accessCredentials,
-    });
-  });
+  const [register, { closeModal }] = useModalInner(
+    async (data: ModalParamsType<DataBoardRecord>) => {
+      const { record: value, href } = data;
+      record.value = value;
+      link.value = href;
+      await nextTick();
+      setFieldsValue({
+        [FieldsEnum.IS_SHARE]: value.viewType === ViewTypeEnum.PUBLIC_VIEW,
+        [FieldsEnum.ACCESS_CREDENTIALS]: value.accessCredentials,
+      });
+    }
+  );
 
   const [registerForm, { getFieldsValue, setFieldsValue }] = useForm({
     schemas,
@@ -32,6 +41,10 @@
 
   const emit = defineEmits(['register', 'success']);
 
+  const handleOpenLink = () => {
+    window.open(unref(link));
+  };
+
   const handleSubmit = async () => {
     try {
       loading.value = true;
@@ -44,6 +57,19 @@
       loading.value = false;
     }
   };
+
+  const isPublicState = computed(() => {
+    return unref(record).viewType === ViewTypeEnum.PUBLIC_VIEW;
+  });
+
+  const { clipboardRef, isSuccessRef } = useCopyToClipboard();
+  const { createMessage } = useMessage();
+  const handleCopy = () => {
+    clipboardRef.value = unref(link);
+    if (unref(isSuccessRef)) {
+      createMessage.success('复制成功~');
+    }
+  };
 </script>
 
 <template>
@@ -54,5 +80,27 @@
       message="私有视图只有项目成员可以浏览,公开视图拥有一个公开的 URL,任何人无需登录即可浏览."
     />
     <BasicForm @register="registerForm" />
+    <section>
+      <div v-if="isPublicState" class="mt-4">
+        <span> 设置分享后, 可通过如下 </span>
+        <Button type="link" class="!px-1" @click="handleOpenLink"> 链接 </Button>
+        <span>访问:</span>
+      </div>
+      <Tooltip v-if="isPublicState" title="点击复制链接">
+        <div
+          class="px-4 py-2 my-2 bg-gray-50 font-semibold tracking-wider text-base cursor-pointer truncate"
+          @click="handleCopy"
+        >
+          <span>{{ link }}</span>
+        </div>
+      </Tooltip>
+
+      <Alert type="warning">
+        <template #message>
+          <span class="font-bold mr-1">提示:</span>
+          <span>不要忘记将相关设备 <span class="mx-1 font-bold">公开</span> 以访问其数据</span>
+        </template>
+      </Alert>
+    </section>
   </BasicModal>
 </template>

@@ -153,17 +153,20 @@
     getListData();
   };
 
-  const { clipboardRef, isSuccessRef } = useCopyToClipboard();
-  const handleCreateShareUrl = (record: ConfigurationCenterItemsModal) => {
-    if (!unref(getShareFlag)) return;
-    const { origin } = location;
+  const createShareUrl = (record: ConfigurationCenterItemsModal) => {
     const searchParams = new URLSearchParams();
     isDev && searchParams.set('dev', '1');
     searchParams.set('share', 'SCADA');
     searchParams.set('configurationId', record.id);
     searchParams.set('publicId', record.publicId || '');
     searchParams.set('lightbox', '1');
-    const url = `${origin}${configurationPrefix}/?${searchParams.toString()}`;
+    return `${origin}${configurationPrefix}/?${searchParams.toString()}`;
+  };
+
+  const { clipboardRef, isSuccessRef } = useCopyToClipboard();
+  const handleCreateShareUrl = (record: ConfigurationCenterItemsModal) => {
+    if (!unref(getShareFlag)) return;
+    const url = createShareUrl(record);
     clipboardRef.value = url;
     if (unref(isSuccessRef)) {
       createMessage.success('复制成功～');
@@ -173,7 +176,7 @@
   const [registerShareModal, { openModal }] = useModal();
 
   const handleOpenShareModal = (record: ConfigurationCenterItemsModal) => {
-    openModal(true, record);
+    openModal(true, { record, href: createShareUrl(record) });
   };
 
   const listEl = ref<Nullable<ComponentElRef>>(null);

@@ -163,15 +163,18 @@
   const getPublicApiListData = () => {};
 
   const [registerShareModal, { openModal }] = useModal();
-  const handleOpenShareModal = (item: BigScreenCenterItemsModel) => {
-    openModal(true, item);
+  const handleOpenShareModal = (record: BigScreenCenterItemsModel) => {
+    openModal(true, { record, href: createShareUrl(record) });
+  };
+
+  const createShareUrl = (record: BigScreenCenterItemsModel) => {
+    const { origin } = location;
+    return `${origin}${largeDesignerPrefix}/#/share/preview/${record.id}/${record.publicId}`;
   };
 
   const { clipboardRef, isSuccessRef } = useCopyToClipboard();
   const handleCreateShareUrl = (record: BigScreenCenterItemsModel) => {
-    const { origin } = location;
-    const { largeDesignerPrefix } = useGlobSetting();
-    clipboardRef.value = `${origin}${largeDesignerPrefix}/#/share/preview/${record.id}/${record.publicId}`;
+    clipboardRef.value = createShareUrl(record);
     if (unref(isSuccessRef)) {
       createMessage.success('复制成功～');
     }

@@ -22,6 +22,8 @@
   import { useForm, BasicForm } from '/@/components/Form';
   import { formSchema } from './config/searchForm';
   import { ShareModal } from '/@/views/common/ShareModal';
+  import { ModalParamsType } from '/#/utils';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
 
   const ListItem = List.Item;
   const router = useRouter();
@@ -133,7 +135,11 @@
   };
 
   const handleOpenShareModal = (record: DataBoardRecord) => {
-    openShareModal(true, record);
+    openShareModal(true, {
+      record,
+      mode: DataActionModeEnum.READ,
+      href: createShareUrl(record),
+    } as ModalParamsType<DataBoardRecord>);
   };
 
   const handleMenuEvent = (event: DropMenu, record: DataBoardRecord) => {

@@ -8,4 +8,5 @@ export type DynamicProps<T> = {
 export interface ModalParamsType<T = Recordable> {
   mode: DataActionModeEnum;
   record: T;
+  [key: string]: any;
 }