feat(share): 新增分享页面

+import { ViewTypeEnum } from "@/enums/external/viewEnum"
+import { defHttp } from "@/utils/external/http/axios"
+
+enum Api {
+  TOKEN = '/auth/login/public',
+
+  CHECK = '/share/check',
+
+  SHARE_CONTENT = '/share'
+}
+
+/**
+ * @description 获取token
+ * @param publicId string
+ */
+export const getPublicToken = (publicId: string) => {
+  return defHttp.post<Record<'token' | 'refreshToken', string>>({
+    url: Api.TOKEN,
+    data: { publicId }
+  }, { joinPrefix: false })
+}
+
+/**
+ * @description 检查时候需要访问令牌
+ * @param id string
+ */
+export const checkSharePageNeedAccessToken = (id: string) => {
+  return defHttp.get<{data: boolean}>({
+    url: `${Api.CHECK}/${ViewTypeEnum.LARGE_SCREEN}/${id}`
+  })
+}
+
+/**
+ * @description 获取分享的数据内容
+ * @param options 
+ */
+export const getShareContentData = (options: Record<'id' | 'accessCredentials', string>) => {
+  return defHttp.get<{ data: any }>({
+    url: `${Api.SHARE_CONTENT}/${ViewTypeEnum.LARGE_SCREEN}/share_data/${options.id}`,
+    params: { accessCredentials: options.accessCredentials }
+  })
+}

@@ -9,4 +9,10 @@ export enum PageEnum {
   // 未发布
   REDIRECT_UN_PUBLISH = '/redirect/unPublish',
   REDIRECT_UN_PUBLISH_NAME = 'redirect-un-publish',
+ 
+}
+
+export enum ShareEnum {
+  SHARE_PATH = '/share/preview/:id/:publicId',
+  SHARE_PATH_NAME = 'ChartSharePreview'
 }

+export enum ViewTypeEnum {
+  DATA_BOARD = 'DATA_BOARD',
+  LARGE_SCREEN = 'LARGE_SCREEN',
+  SCADA = 'SCADA'
+}

@@ -2,7 +2,6 @@ import { Router } from "vue-router"
 import { createErrorGuard } from "./errorGuard"
 import { createLoadingGuard } from "./loadingGuard"
 import { createPermissionGuard } from "./permissionGuard"
-
 export const setupRouterGuard = (router: Router) => {
   createPermissionGuard(router)
   createErrorGuard(router)

 import { ProjectRuntimeEnvEnum } from "@/enums/external/envEnum";
-import { PageEnum } from "@/enums/external/pageEnum";
+import { PageEnum, ShareEnum } from "@/enums/external/pageEnum";
 import { useUserStoreWithOut } from "@/store/external/modules/user";
 import { NavigationGuardNext, NavigationGuardWithThis, RouteLocationNormalized, RouteLocationRaw, Router } from "vue-router";
 
 
-const whitePathList: string[] = [PageEnum.BASE_LOGIN];
+const whitePathList: string[] = [PageEnum.BASE_LOGIN, ShareEnum.SHARE_PATH];
 
 const isAloneMode = [ProjectRuntimeEnvEnum.DEV_ALONE, ProjectRuntimeEnvEnum.PROD_ALONE].includes(import.meta.env.MODE as ProjectRuntimeEnvEnum)
 
 const toIotPlatformLogin = ({ to, from, next }: { to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext }) => {
   const { origin, port } = window.location
+
   if (Number(port) === Number(import.meta.env.VITE_DEV_PORT)) {
-    if (whitePathList.includes(to.path)) {
+    if (to.matched.find(item => whitePathList.includes(item.path))) {
       next()
       return
     } else {
@@ -36,8 +37,9 @@ export function createPermissionGuard(router: Router) {
     }
 
     const token = userStore.getJwtToken
+    console.log(token)
 
-    if (whitePathList.includes(to.path)) {
+    if (to.matched.find(item => whitePathList.includes(item.path))) {
       if (to.path === PageEnum.BASE_LOGIN && token) {
         const isSessionTimeout = userStore.getSessionTimeout
         try {
@@ -47,6 +49,9 @@ export function createPermissionGuard(router: Router) {
         } catch (error) {
           console.error(error)
         }
+      } else if (to.matched.find(item => ShareEnum.SHARE_PATH)) {
+        next()
+        return
       }
       else {
         if (!isAloneMode) {

+import { RouteRecordRaw } from 'vue-router'
+import { ShareEnum } from '@/enums/external/pageEnum'
+
+// 引入路径
+const importPath = {
+  [ShareEnum.SHARE_PATH_NAME]: () => import('@/views/share/index.vue')
+}
+
+export const shareRoutes: RouteRecordRaw = {
+  path: ShareEnum.SHARE_PATH,
+  name: ShareEnum.SHARE_PATH_NAME,
+  component: importPath[ShareEnum.SHARE_PATH_NAME],
+  meta: {
+    title: '分享',
+    isRoot: true
+  }
+}
++ 
\ No newline at end of file

@@ -7,7 +7,10 @@ import { HttpErrorPage, LoginRoute, ReloadRoute } from '@/router/base'
 import { Layout } from '@/router/constant'
 
 import modules from '@/router/modules'
+// THINGS_KIT 重写路由拦截逻辑
 import { setupRouterGuard } from './external/guard'
+// THINGS_KIT 新增分享路由
+import { shareRoutes } from './external/share.route'
 
 const RootRoute: Array<RouteRecordRaw> = [
   {
@@ -23,7 +26,9 @@ const RootRoute: Array<RouteRecordRaw> = [
       modules.projectRoutes,
       modules.chartRoutes,
       modules.previewRoutes,
-      modules.editRoutes
+      modules.editRoutes,
+      // THINGS_KIT 新增分享路由
+      shareRoutes
     ]
   }
 ]

@@ -5,7 +5,8 @@ import { DateViewConfigurationInfoType } from '@/api/external/contentSave/model/
 export enum ProjectInfoEnum {
   INFO = 'info',
   SAVE_STATUS = 'saveStatus',
-  DATA_VIEW_NAME = 'dataViewName'
+  DATA_VIEW_NAME = 'dataViewName',
+  ACCESS_CREDENTIALS = 'accessCredentials'
 }
 
 export enum EEditCanvasTypeEnum {
@@ -17,4 +18,6 @@ export interface ProjectInfoStoreType {
   [ProjectInfoEnum.INFO]: DateViewConfigurationInfoType
 
   [ProjectInfoEnum.SAVE_STATUS]: SyncEnum
+
+  [ProjectInfoEnum.ACCESS_CREDENTIALS]: string
 }

@@ -6,10 +6,10 @@ import { SyncEnum } from "@/enums/external/editPageEnum";
 export const useProjectInfoStore = defineStore({
   id: 'useProjectInfoStore',
   state: (): ProjectInfoStoreType => ({
-    info: { 
+    info: {
     } as ProjectInfoStoreType['info'],
-
-    saveStatus: SyncEnum.FAILURE
+    saveStatus: SyncEnum.FAILURE,
+    accessCredentials: ''
   }),
   getters: {
     getProjectInfo(): ProjectInfoStoreType[ProjectInfoEnum.INFO] {
@@ -28,6 +28,9 @@ export const useProjectInfoStore = defineStore({
     },
     setSaveStatus(status: SyncEnum) {
       this[ProjectInfoEnum.SAVE_STATUS] = status
+    },
+    setAccessCredentials(string: string) {
+      this[ProjectInfoEnum.ACCESS_CREDENTIALS] = string
     }
   }
 })

@@ -2,13 +2,22 @@ import { fetchRouteParamsLocation, JSONParse, } from '@/utils'
 import { getDataView } from '@/api/external/contentSave/content'
 import { ChartEditStorageType } from '..'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useRoute } from 'vue-router'
+import { ShareEnum } from '@/enums/external/pageEnum'
+
+
+const isSharePageMode = () => {
+  const ROUTE = useRoute()
+  return ROUTE.matched.find(item => item.path === ShareEnum.SHARE_PATH)
+}
 
 export const getSessionStorageInfo = async () => {
+  if (isSharePageMode()) return
   const id = fetchRouteParamsLocation()
   const chartEditStore = useChartEditStore()
   const res = await getDataView(id)
   if (res) {
-    const { dataViewContent, dataViewName, dataViewId } = res
+    const { dataViewContent } = res
     const content = JSONParse(dataViewContent.content) as ChartEditStorageType
     if (content) {
       const { editCanvasConfig, requestGlobalConfig, componentList } = content

 <template>
-  <!-- THINGS_KIT 预览时需要异步请求接口 改为异步加载组件 -->
-  <Suspense>
-    <preview :key="key"></preview>
-  </Suspense>
+  <preview :key="key"></preview>
 </template>
 
 <script setup lang="ts">
@@ -16,13 +13,13 @@ import Preview from './index.vue'
 
 let key = ref(Date.now())
 
-// 数据变更 -> 组件销毁重建
-;[SavePageEnum.JSON, SavePageEnum.CHART].forEach((saveEvent: string) => {
-  if (!window.opener) return
-  window.opener.addEventListener(saveEvent, async (e: any) => {
-    const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
-    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
-    key.value = Date.now()
+  // 数据变更 -> 组件销毁重建
+  ;[SavePageEnum.JSON, SavePageEnum.CHART].forEach((saveEvent: string) => {
+    if (!window.opener) return
+    window.opener.addEventListener(saveEvent, async (e: any) => {
+      const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
+      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
+      key.value = Date.now()
+    })
   })
-})
 </script>

+<template>
+  <section>
+    <preview v-if="!allowLoadPreviewPage" :key="key"></preview>
+    <NModal :show="allowLoadPreviewPage" :maskClosable="false" :closable="false" style="width: 300px;">
+      <NCard>
+        <NForm @keyup.enter="handleSubmit">
+          <NFormItem label="访问令牌">
+            <NInput v-model:value="accessCredentials" type="password" />
+          </NFormItem>
+          <NFormItem :showLabel="false">
+            <NButton :loading="loading" type="primary" style="width: 100%;" @click="handleSubmit">访问</NButton>
+          </NFormItem>
+        </NForm>
+      </NCard>
+    </NModal>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { NModal, NCard, NForm, NFormItem, NInput, NButton, } from 'naive-ui'
+import { getSessionStorageInfo } from '../preview/utils'
+import type { ChartEditStorageType } from '../preview/index.d'
+import { SavePageEnum } from '@/enums/editPageEnum'
+import { JSONParse, setSessionStorage } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+import { onMounted, ref, unref } from 'vue'
+import Preview from '../preview/index.vue'
+import { useRoute } from 'vue-router'
+import { useUserStore } from '@/store/external/modules/user'
+import { checkSharePageNeedAccessToken, getPublicToken, getShareContentData } from '@/api/external/sys/share'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+const allowLoadPreviewPage = ref(true)
+const ROUTE = useRoute()
+const accessCredentials = ref('')
+const loading = ref(false)
+const userStore = useUserStore()
+const chartEditStore = useChartEditStore()
+
+const getToken = async () => {
+  const { params } = ROUTE
+  const { publicId } = params as Record<'id' | 'publicId', string>
+  const { token, refreshToken } = await getPublicToken(publicId)
+  userStore.storeToken(token, refreshToken)
+}
+
+const checkNeedAccessToken = async () => {
+  const { params } = ROUTE
+  const { id } = params as Record<'id' | 'publicId', string>
+  const res = await checkSharePageNeedAccessToken(id)
+  return res.data
+}
+
+const sharePageHandlerProcess = async () => {
+  await getToken()
+  const flag = await checkNeedAccessToken()
+  if (!flag) {
+    allowLoadPreviewPage.value = false
+  }
+}
+
+const getSharePageContentData = async () => {
+  try {
+    const { params } = ROUTE
+    const { id } = params as Record<'id' | 'publicId', string>
+    loading.value = true
+    const res = await getShareContentData({ id, accessCredentials: unref(accessCredentials) })
+    const { dataViewContent, dataViewName, dataViewId } = res.data
+    const content = JSONParse(dataViewContent.content) as ChartEditStorageType
+    if (content) {
+      const { editCanvasConfig, requestGlobalConfig, componentList } = content
+      chartEditStore.editCanvasConfig = editCanvasConfig
+      chartEditStore.requestGlobalConfig = requestGlobalConfig
+      chartEditStore.componentList = componentList
+    }
+    allowLoadPreviewPage.value = false
+  } catch (error) {
+    console.log(error)
+  } finally {
+    loading.value = false
+  }
+
+}
+
+const handleSubmit = () => {
+  getSharePageContentData()
+}
+
+onMounted(() => {
+  sharePageHandlerProcess()
+})
+
+let key = ref(Date.now())
+
+  // 数据变更 -> 组件销毁重建
+  ;[SavePageEnum.JSON, SavePageEnum.CHART].forEach((saveEvent: string) => {
+    if (!window.opener) return
+    window.opener.addEventListener(saveEvent, async (e: any) => {
+      const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
+      setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
+      key.value = Date.now()
+    })
+  })
+</script>