Merge branch 'main_dev' into ft

@@ -12,6 +12,7 @@
     "MQTT",
     "notif",
     "PROTOBUF",
+    "SCADA",
     "SNMP",
     "unref",
     "vben",

@@ -10,6 +10,7 @@ import { FileUploadResponse } from '../../oem/model';
 enum API {
   basicUrl = '/configuration/center',
   UPLOAD = '/oss/upload',
+  SHARE = '/configuration/center/share',
 }
 
 export const getPage = (params: queryPageParams) => {
@@ -49,3 +50,20 @@ export const saveOrUpdateConfigurationCenter = (
 export const uploadThumbnail = (file: FormData) => {
   return defHttp.post<FileUploadResponse>({ url: API.UPLOAD, params: file });
 };
+
+export const shareConfiguration = (record: {
+  id: string;
+  isShare: boolean;
+  accessCredentials: string;
+}) => {
+  const { accessCredentials, isShare, id } = record;
+  return defHttp.post(
+    {
+      url: `${API.SHARE}/${id}`,
+      params: { isShare, ...(accessCredentials ? { accessCredentials } : {}) },
+    },
+    {
+      joinParamsToUrl: true,
+    }
+  );
+};

@@ -6,6 +6,7 @@ export interface ConfigurationCenterItemsModal {
   createTime: string;
   creator: string;
   remark: string;
+  publicId?: string;
 }
 export type queryPageParams = BasicPageParams & {
   name?: Nullable<string>;

@@ -22,6 +22,7 @@ enum DataBoardUrl {
   DELETE_DATA_BOARD = '/data_board',
   UPDATE_DATA_BOARD = '/data_board/update',
   UPDATE_DATA_BOARD_LAYOUT = '/data_board',
+  SHARE_DATA_BOARD = '/data_board/share',
 }
 
 enum DataComponentUrl {
@@ -232,3 +233,16 @@ export const getDeviceRelation = (params: { deviceId: string; isSlave: boolean }
     params,
   });
 };
+
+export const shareBoard = (record: {
+  id: string;
+  accessCredentials?: string;
+  isShare?: boolean;
+}) => {
+  const { id, isShare, accessCredentials } = record;
+  return defHttp.post({
+    url: `${DataBoardUrl.SHARE_DATA_BOARD}/${id}?isShare=${isShare}${
+      accessCredentials ? `&accessCredentials=${accessCredentials}` : ''
+    }`,
+  });
+};

@@ -48,6 +48,8 @@ export interface DataBoardRecord {
   layout: Layout[];
   defaultConfig: string;
   tenantStatus: string;
+  publicId: string;
+  accessCredentials?: string;
 }
 
 export interface DataBoardList {

@@ -36,6 +36,10 @@ enum DeviceManagerApi {
   GATEWAY_DEVICE = '/device/gateway/list',
 
   DEVICE_STATE_LOG_URL = '/device/state/log',
+
+  DEVICE_PUBLIC = '/customer/public/device',
+
+  DEVICE_PRIVATE = '/customer/device',
 }
 
 export const devicePage = (params: DeviceQueryParam) => {
@@ -308,3 +312,21 @@ export const deviceStateLogPost = (data) => {
     // }
   );
 };
+
+export const publicDevice = (tbDeviceId: string) => {
+  return defHttp.post(
+    {
+      url: `${DeviceManagerApi.DEVICE_PUBLIC}/${tbDeviceId}`,
+    },
+    { joinPrefix: false }
+  );
+};
+
+export const privateDevice = (tbDeviceId: string) => {
+  return defHttp.delete(
+    {
+      url: `${DeviceManagerApi.DEVICE_PRIVATE}/${tbDeviceId}`,
+    },
+    { joinPrefix: false }
+  );
+};

@@ -186,6 +186,9 @@ export interface DeviceRecord {
     name: string;
     transportType: string;
   };
+  customerAdditionalInfo?: {
+    isPublic?: boolean;
+  };
 }
 
 export interface DeviceModelOfMatterAttrs {

+import { ViewTypeEnum } from '/@/views/sys/share/config/config';
+
+export interface ShareRouteParams {
+  id: string;
+  viewType: ViewTypeEnum;
+  publicId: string;
+}

+import { defHttp } from '/@/utils/http/axios';
+import { ViewTypeEnum } from '/@/views/sys/share/config/config';
+
+enum Api {
+  CHECK = '/share/check',
+  PUBLIC_LOGIN = '/auth/login/public',
+  SHARE_CONTENT = '/share',
+}
+
+export const checkShareAccessToken = (type: ViewTypeEnum, id: string) => {
+  return defHttp.get<Record<'data', boolean>>({
+    url: `${Api.CHECK}/${type}/${id}`,
+  });
+};
+
+export const sharePageLogin = (publicId: string) => {
+  return defHttp.post<Record<'token' | 'refreshToken', string>>(
+    {
+      url: Api.PUBLIC_LOGIN,
+      data: { publicId },
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
+
+export const getShareContent = (record: Record<'accessCredentials' | 'id', string>) => {
+  const { id, accessCredentials } = record;
+  return defHttp.get({
+    url: `${Api.SHARE_CONTENT}/${ViewTypeEnum.DATA_BOARD}/share_data/${id}`,
+    params: { accessCredentials },
+  });
+};

@@ -14,4 +14,6 @@ export const PageEnum = {
   //设备配置
   DEVICE_PROFILE: '/product/profiles',
   DEVICE_LIST: '/device/list',
+
+  SHARE_PAGE: '/share/:viewType/:id/:publicId',
 };

@@ -10,7 +10,8 @@ import { getAuthCache } from '/@/utils/auth';
 
 const LOGIN_PATH = PageEnum.BASE_LOGIN;
 const ROOT_PATH = RootRoute.path;
-const whitePathList: string[] = [LOGIN_PATH];
+const SHARE_PATH = PageEnum.SHARE_PAGE;
+const whitePathList: string[] = [LOGIN_PATH, SHARE_PATH];
 // const userInfo1 = getAuthCache(USER_INFO_KEY);
 // const userInfo = ref(userInfo1);
 
@@ -32,7 +33,7 @@ export function createPermissionGuard(router: Router) {
     const token = userStore.getJwtToken;
     // Whitelist can be directly entered
     // 路由守卫拦截, 如果是已经登陆情况, 就不要回到登陆页面了;
-    if (whitePathList.includes(to.path as PageEnum)) {
+    if (to.matched.find((item) => whitePathList.includes(item.path))) {
       if (to.path === LOGIN_PATH && token) {
         const isSessionTimeout = userStore.getSessionTimeout;
         try {

@@ -4,6 +4,7 @@ import { mainOutRoutes } from './mainOut';
 import { PageEnum } from '/@/enums/pageEnum';
 import { t } from '/@/hooks/web/useI18n';
 import { LAYOUT } from '../constant';
+import { PUBLIC_PAGE_ROUTER } from './public';
 
 const modules = import.meta.globEager('./modules/**/*.ts');
 const routeModuleList: AppRouteModule[] = [];
@@ -86,4 +87,5 @@ export const basicRoutes = [
   REDIRECT_ROUTE,
   PAGE_NOT_FOUND_ROUTE,
   DATA_BOARD_SHARE,
+  PUBLIC_PAGE_ROUTER,
 ];

+import { AppRouteRecordRaw } from '../types';
+import { PageEnum } from '/@/enums/pageEnum';
+
+export const PUBLIC_PAGE_ROUTER: AppRouteRecordRaw = {
+  path: PageEnum.SHARE_PAGE,
+  name: 'publicPage',
+  component: () => import('/@/views/sys/share/index.vue'),
+  meta: {
+    title: '公开',
+    hideBreadcrumb: true,
+    hideChildrenInMenu: true,
+  },
+};

+import { FormSchema } from '/@/components/Form';
+
+export enum ViewTypeEnum {
+  PRIVATE_VIEW = 'PRIVATE_VIEW',
+  PUBLIC_VIEW = 'PUBLIC_VIEW',
+}
+
+export enum ViewTypeNameEnum {
+  PRIVATE_VIEW = '私有',
+  PUBLIC_VIEW = '公共',
+}
+
+export enum FieldsEnum {
+  IS_SHARE = 'isShare',
+  ACCESS_CREDENTIALS = 'accessCredentials',
+}
+
+export const schemas: FormSchema[] = [
+  {
+    field: FieldsEnum.IS_SHARE,
+    label: '公开性',
+    component: 'Switch',
+    defaultValue: false,
+  },
+  {
+    field: FieldsEnum.ACCESS_CREDENTIALS,
+    label: '访问凭证',
+    component: 'Input',
+    ifShow: ({ model }) => model[FieldsEnum.IS_SHARE],
+    componentProps: {
+      maxLength: 64,
+    },
+  },
+];

+export { default as ShareModal } from './index.vue';

+<script lang="ts" setup>
+  import { BasicForm, useForm } from '/@/components/Form';
+  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 { ref, unref } from 'vue';
+  import { nextTick } from 'vue';
+
+  const props = defineProps<{
+    shareApi?: (...args: any[]) => Promise<any>;
+  }>();
+
+  const loading = ref(false);
+  const record = ref<DataBoardRecord>({} as unknown as DataBoardRecord);
+
+  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 [registerForm, { getFieldsValue, setFieldsValue }] = useForm({
+    schemas,
+    showActionButtonGroup: false,
+    layout: 'inline',
+    labelWidth: 120,
+  });
+
+  const emit = defineEmits(['register', 'success']);
+
+  const handleSubmit = async () => {
+    try {
+      loading.value = true;
+      const value = getFieldsValue();
+      const { id } = unref(record);
+      await props?.shareApi?.({ id, ...value });
+      closeModal();
+      emit('success');
+    } finally {
+      loading.value = false;
+    }
+  };
+</script>
+
+<template>
+  <BasicModal title="分享" @register="register" @ok="handleSubmit" :okButtonProps="{ loading }">
+    <Alert
+      class="!mb-4"
+      type="info"
+      message="私有视图只有项目成员可以浏览,公开视图拥有一个公开的 URL,任何人无需登录即可浏览."
+    />
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>

@@ -15,6 +15,8 @@ export enum ConfigurationPermission {
   DELETE = 'api:yt:configuration:center:delete',
   DESIGN = 'api:yt:configuration:center:get_configuration_info:design',
   PREVIEW = 'api:yt:configuration:center:get_configuration_info:preview',
+  SHARE = 'api:yt:configuration:center:share',
+  UN_SHARE = 'api:yt:configuration:center:monopoly',
 }
 
 export const PC_DEFAULT_CONTENT =

-<script setup lang="ts">
-  import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
-  import { ReloadOutlined } from '@ant-design/icons-vue';
-  import { computed, onMounted, reactive, ref, unref } from 'vue';
-  import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';
-  import {
-    deleteConfigurationCenter,
-    getPage,
-  } from '/@/api/configuration/center/configurationCenter';
-  import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
-  import { PageWrapper } from '/@/components/Page';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { ConfigurationPermission, searchFormSchema } from './center.data';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { Authority } from '/@/components/Authority';
-  import { isDevMode } from '/@/utils/env';
-  import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
-  import { useDrawer } from '/@/components/Drawer';
-  import { getBoundingClientRect } from '/@/utils/domUtils';
-  import configurationSrc from '/@/assets/icons/configuration.svg';
-  import { cloneDeep } from 'lodash';
-  import { usePermission } from '/@/hooks/web/usePermission';
-  import { useGlobSetting } from '/@/hooks/setting';
-  import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
-  import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
-
-  const listColumn = ref(5);
-
-  const { createMessage } = useMessage();
-
-  const organizationId = ref<Nullable<number>>(null);
-
-  const pagination = reactive<PaginationProps>({
-    size: 'small',
-    showTotal: (total: number) => `共 ${total} 条数据`,
-    current: 1,
-    pageSize: unref(listColumn) * 2,
-    onChange: (page: number) => {
-      pagination.current = page;
-      getListData();
-    },
-  });
-
-  const loading = ref(false);
-
-  const dataSource = ref<ConfigurationCenterItemsModal[]>([]);
-
-  const [registerForm, { getFieldsValue }] = useForm({
-    schemas: searchFormSchema,
-    showAdvancedButton: true,
-    labelWidth: 100,
-    compact: true,
-    resetFunc: () => {
-      resetFn();
-      organizationId.value = null;
-      return getListData();
-    },
-    submitFunc: async () => {
-      const value = getFieldsValue();
-      getListData(value);
-    },
-  });
-
-  async function getListData(value: Recordable = {}) {
-    try {
-      loading.value = true;
-      const pageSize = unref(listColumn) * 2;
-      const { items, total } = await getPage({
-        organizationId: unref(organizationId),
-        ...value,
-        page: pagination.current!,
-        pageSize,
-      });
-
-      dataSource.value = items;
-      Object.assign(pagination, { total, pageSize });
-    } catch (error) {
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  onMounted(() => {
-    getListData();
-  });
-
-  const searchInfo = reactive<Recordable>({});
-  const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
-  const handleSelect = (orgId: number) => {
-    organizationId.value = orgId;
-    getListData();
-  };
-
-  const [registerDrawer, { openDrawer }] = useDrawer();
-
-  const { hasPermission } = usePermission();
-
-  const getPreviewFlag = computed(() => {
-    return hasPermission(ConfigurationPermission.PREVIEW);
-  });
-
-  const getDesignFlag = computed(() => {
-    return hasPermission(ConfigurationPermission.DESIGN);
-  });
-
-  const handleCreateOrUpdate = (record?: ConfigurationCenterItemsModal) => {
-    if (record) {
-      openDrawer(true, {
-        isUpdate: true,
-        record: cloneDeep(record),
-      });
-    } else {
-      openDrawer(true, {
-        isUpdate: false,
-      });
-    }
-  };
-
-  const { configurationPrefix } = useGlobSetting();
-  const isDev = isDevMode();
-
-  const handlePreview = (record: ConfigurationCenterItemsModal) => {
-    if (!unref(getPreviewFlag)) return;
-    window.open(
-      `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}&lightbox=1`
-    );
-  };
-
-  const handleDesign = (record: ConfigurationCenterItemsModal) => {
-    if (!unref(getDesignFlag)) return;
-    window.open(`${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`);
-  };
-
-  const handleDelete = async (record: ConfigurationCenterItemsModal) => {
-    try {
-      await deleteConfigurationCenter([record.id]);
-      createMessage.success('删除成功');
-      await getListData();
-    } catch (error) {}
-  };
-
-  const handleCardLayoutChange = () => {
-    pagination.current = 1;
-    getListData();
-  };
-
-  const listEl = ref<Nullable<ComponentElRef>>(null);
-
-  onMounted(() => {
-    const clientHeight = document.documentElement.clientHeight;
-    const rect = getBoundingClientRect(unref(listEl)!.$el!) as DOMRect;
-    // margin-top 24 height 24
-    const paginationHeight = 24 + 24 + 8;
-    // list pading top 8 maring-top 8 extra slot 56
-    const listContainerMarginBottom = 8 + 8 + 56;
-    const listContainerHeight =
-      clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
-    const listContainerEl = (unref(listEl)!.$el as HTMLElement).querySelector(
-      '.ant-spin-container'
-    ) as HTMLElement;
-    listContainerEl &&
-      (listContainerEl.style.height = listContainerHeight + 'px') &&
-      (listContainerEl.style.overflowY = 'auto') &&
-      (listContainerEl.style.overflowX = 'hidden');
-  });
-</script>
-
-<template>
-  <PageWrapper dense contentFullHeight contentClass="flex">
-    <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
-    <section class="flex-auto p-4 w-3/4 xl:w-4/5 w-full configuration-list">
-      <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">
-        <BasicForm @register="registerForm" />
-      </div>
-      <List
-        ref="listEl"
-        :loading="loading"
-        class="flex-auto bg-light-50 dark:bg-dark-900 !p-2 !mt-4"
-        position="bottom"
-        :pagination="pagination"
-        :data-source="dataSource"
-        :grid="{ gutter: 4, column: listColumn }"
-      >
-        <template #header>
-          <div class="flex gap-3 justify-end">
-            <Authority :value="ConfigurationPermission.CREATE">
-              <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button>
-            </Authority>
-            <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
-            <Tooltip title="刷新">
-              <Button type="primary" @click="getListData">
-                <ReloadOutlined />
-              </Button>
-            </Tooltip>
-          </div>
-        </template>
-        <template #renderItem="{ item }">
-          <List.Item>
-            <Card hoverable>
-              <template #cover>
-                <div class="h-full w-full !flex justify-center items-center text-center p-1">
-                  <img
-                    class="w-full h-36"
-                    alt="example"
-                    :src="item.thumbnail || configurationSrc"
-                    @click="handlePreview(item)"
-                  />
-                </div>
-              </template>
-              <template class="ant-card-actions" #actions>
-                <Tooltip title="预览">
-                  <AuthIcon
-                    :auth="ConfigurationPermission.PREVIEW"
-                    class="!text-lg"
-                    icon="ant-design:eye-outlined"
-                    @click="handlePreview(item)"
-                  />
-                </Tooltip>
-                <Tooltip title="设计">
-                  <AuthIcon
-                    :auth="ConfigurationPermission.DESIGN"
-                    class="!text-lg"
-                    icon="ant-design:edit-outlined"
-                    @click="handleDesign(item)"
-                  />
-                </Tooltip>
-                <AuthDropDown
-                  :dropMenuList="[
-                    {
-                      text: '编辑',
-                      auth: ConfigurationPermission.UPDATE,
-                      icon: 'clarity:note-edit-line',
-                      event: '',
-                      onClick: handleCreateOrUpdate.bind(null, item),
-                    },
-                    {
-                      text: '删除',
-                      auth: ConfigurationPermission.DELETE,
-                      icon: 'ant-design:delete-outlined',
-                      event: '',
-                      popconfirm: {
-                        title: '是否确认删除操作?',
-                        onConfirm: handleDelete.bind(null, item),
-                      },
-                    },
-                  ]"
-                  :trigger="['hover']"
-                />
-              </template>
-              <Card.Meta>
-                <template #title>
-                  <span class="truncate">{{ item.name }}</span>
-                </template>
-                <template #description>
-                  <div class="truncate h-11">
-                    <div class="truncate">{{ item.organizationDTO.name }}</div>
-                    <div class="truncate">{{ item.remark || '' }} </div>
-                  </div>
-                </template>
-              </Card.Meta>
-            </Card>
-          </List.Item>
-        </template>
-      </List>
-    </section>
-    <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
-  </PageWrapper>
-</template>
-
-<style lang="less" scoped>
-  .configuration-list:deep(.ant-list-header) {
-    border-bottom: none !important;
-  }
-
-  .configuration-list:deep(.ant-list-pagination) {
-    height: 24px;
-  }
-
-  .configuration-list:deep(.ant-card-body) {
-    padding: 16px !important;
-  }
-
-  .configuration-list:deep(.ant-list-empty-text) {
-    @apply w-full h-full flex justify-center items-center;
-  }
-</style>
+<script setup lang="ts">
+  import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
+  import { ReloadOutlined } from '@ant-design/icons-vue';
+  import { computed, onMounted, reactive, ref, unref } from 'vue';
+  import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';
+  import {
+    deleteConfigurationCenter,
+    getPage,
+    shareConfiguration,
+  } from '/@/api/configuration/center/configurationCenter';
+  import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
+  import { PageWrapper } from '/@/components/Page';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { ConfigurationPermission, searchFormSchema } from './center.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Authority } from '/@/components/Authority';
+  import { isDevMode } from '/@/utils/env';
+  import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import { getBoundingClientRect } from '/@/utils/domUtils';
+  import configurationSrc from '/@/assets/icons/configuration.svg';
+  import { cloneDeep } from 'lodash';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
+  import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
+  import { ShareModal } from '/@/views/common/ShareModal';
+  import { ViewTypeNameEnum } from '../../common/ShareModal/config';
+  import { useModal } from '/@/components/Modal';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+
+  const listColumn = ref(5);
+
+  const { createMessage } = useMessage();
+
+  const organizationId = ref<Nullable<number>>(null);
+
+  const pagination = reactive<PaginationProps>({
+    size: 'small',
+    showTotal: (total: number) => `共 ${total} 条数据`,
+    current: 1,
+    pageSize: unref(listColumn) * 2,
+    onChange: (page: number) => {
+      pagination.current = page;
+      getListData();
+    },
+  });
+
+  const loading = ref(false);
+
+  const dataSource = ref<ConfigurationCenterItemsModal[]>([]);
+
+  const [registerForm, { getFieldsValue }] = useForm({
+    schemas: searchFormSchema,
+    showAdvancedButton: true,
+    labelWidth: 100,
+    compact: true,
+    resetFunc: () => {
+      resetFn();
+      organizationId.value = null;
+      return getListData();
+    },
+    submitFunc: async () => {
+      const value = getFieldsValue();
+      getListData(value);
+    },
+  });
+
+  async function getListData(value: Recordable = {}) {
+    try {
+      loading.value = true;
+      const pageSize = unref(listColumn) * 2;
+      const { items, total } = await getPage({
+        organizationId: unref(organizationId),
+        ...value,
+        page: pagination.current!,
+        pageSize,
+      });
+
+      dataSource.value = items;
+      Object.assign(pagination, { total, pageSize });
+    } catch (error) {
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  onMounted(() => {
+    getListData();
+  });
+
+  const searchInfo = reactive<Recordable>({});
+  const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+  const handleSelect = (orgId: number) => {
+    organizationId.value = orgId;
+    getListData();
+  };
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  const { hasPermission } = usePermission();
+
+  const getPreviewFlag = computed(() => {
+    return hasPermission(ConfigurationPermission.PREVIEW);
+  });
+
+  const getDesignFlag = computed(() => {
+    return hasPermission(ConfigurationPermission.DESIGN);
+  });
+
+  const getShareFlag = computed(() => {
+    return hasPermission(ConfigurationPermission.SHARE);
+  });
+
+  const handleCreateOrUpdate = (record?: ConfigurationCenterItemsModal) => {
+    if (record) {
+      openDrawer(true, {
+        isUpdate: true,
+        record: cloneDeep(record),
+      });
+    } else {
+      openDrawer(true, {
+        isUpdate: false,
+      });
+    }
+  };
+
+  const { configurationPrefix } = useGlobSetting();
+  const isDev = isDevMode();
+
+  const handlePreview = (record: ConfigurationCenterItemsModal) => {
+    if (!unref(getPreviewFlag)) return;
+    window.open(
+      `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}&lightbox=1`
+    );
+  };
+
+  const handleDesign = (record: ConfigurationCenterItemsModal) => {
+    if (!unref(getDesignFlag)) return;
+    window.open(`${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`);
+  };
+
+  const handleDelete = async (record: ConfigurationCenterItemsModal) => {
+    try {
+      await deleteConfigurationCenter([record.id]);
+      createMessage.success('删除成功');
+      await getListData();
+    } catch (error) {}
+  };
+
+  const handleCardLayoutChange = () => {
+    pagination.current = 1;
+    getListData();
+  };
+
+  const { clipboardRef, isSuccessRef } = useCopyToClipboard();
+  const handleCreateShareUrl = (record: ConfigurationCenterItemsModal) => {
+    if (!unref(getShareFlag)) return;
+    const { origin } = location;
+    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()}`;
+    clipboardRef.value = url;
+    if (unref(isSuccessRef)) {
+      createMessage.success('复制成功～');
+    }
+  };
+
+  const [registerShareModal, { openModal }] = useModal();
+
+  const handleOpenShareModal = (record: ConfigurationCenterItemsModal) => {
+    openModal(true, record);
+  };
+
+  const listEl = ref<Nullable<ComponentElRef>>(null);
+
+  onMounted(() => {
+    const clientHeight = document.documentElement.clientHeight;
+    const rect = getBoundingClientRect(unref(listEl)!.$el!) as DOMRect;
+    // margin-top 24 height 24
+    const paginationHeight = 24 + 24 + 8;
+    // list pading top 8 maring-top 8 extra slot 56
+    const listContainerMarginBottom = 8 + 8 + 56;
+    const listContainerHeight =
+      clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
+    const listContainerEl = (unref(listEl)!.$el as HTMLElement).querySelector(
+      '.ant-spin-container'
+    ) as HTMLElement;
+    listContainerEl &&
+      (listContainerEl.style.height = listContainerHeight + 'px') &&
+      (listContainerEl.style.overflowY = 'auto') &&
+      (listContainerEl.style.overflowX = 'hidden');
+  });
+</script>
+
+<template>
+  <PageWrapper dense contentFullHeight contentClass="flex">
+    <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
+    <section class="flex-auto p-4 w-3/4 xl:w-4/5 w-full configuration-list">
+      <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">
+        <BasicForm @register="registerForm" />
+      </div>
+      <List
+        ref="listEl"
+        :loading="loading"
+        class="flex-auto bg-light-50 dark:bg-dark-900 !p-2 !mt-4"
+        position="bottom"
+        :pagination="pagination"
+        :data-source="dataSource"
+        :grid="{ gutter: 4, column: listColumn }"
+      >
+        <template #header>
+          <div class="flex gap-3 justify-end">
+            <Authority :value="ConfigurationPermission.CREATE">
+              <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button>
+            </Authority>
+            <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
+            <Tooltip title="刷新">
+              <Button type="primary" @click="getListData">
+                <ReloadOutlined />
+              </Button>
+            </Tooltip>
+          </div>
+        </template>
+        <template #renderItem="{ item }">
+          <List.Item>
+            <Card hoverable class="card-container">
+              <template #cover>
+                <div
+                  class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative"
+                >
+                  <img
+                    class="w-full h-36"
+                    alt="example"
+                    :src="item.thumbnail || configurationSrc"
+                    @click="handlePreview(item)"
+                  />
+                  <span
+                    class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1"
+                  >
+                    {{ ViewTypeNameEnum[item.viewType] }}
+                  </span>
+                </div>
+              </template>
+              <template class="ant-card-actions" #actions>
+                <Tooltip title="预览">
+                  <AuthIcon
+                    :auth="ConfigurationPermission.PREVIEW"
+                    class="!text-lg"
+                    icon="ant-design:eye-outlined"
+                    @click="handlePreview(item)"
+                  />
+                </Tooltip>
+                <Tooltip title="设计">
+                  <AuthIcon
+                    :auth="ConfigurationPermission.DESIGN"
+                    class="!text-lg"
+                    icon="ant-design:edit-outlined"
+                    @click="handleDesign(item)"
+                  />
+                </Tooltip>
+                <Tooltip title="分享">
+                  <AuthIcon
+                    :auth="ConfigurationPermission.SHARE"
+                    class="!text-lg"
+                    icon="ant-design:share-alt-outlined"
+                    @click="handleCreateShareUrl(item)"
+                  />
+                </Tooltip>
+                <AuthDropDown
+                  :dropMenuList="[
+                    {
+                      text: '分享',
+                      auth: ConfigurationPermission.SHARE,
+                      icon: 'ant-design:share-alt-outlined',
+                      event: '',
+                      onClick: handleOpenShareModal.bind(null, item),
+                    },
+                    {
+                      text: '编辑',
+                      auth: ConfigurationPermission.UPDATE,
+                      icon: 'clarity:note-edit-line',
+                      event: '',
+                      onClick: handleCreateOrUpdate.bind(null, item),
+                    },
+                    {
+                      text: '删除',
+                      auth: ConfigurationPermission.DELETE,
+                      icon: 'ant-design:delete-outlined',
+                      event: '',
+                      popconfirm: {
+                        title: '是否确认删除操作?',
+                        onConfirm: handleDelete.bind(null, item),
+                      },
+                    },
+                  ]"
+                  :trigger="['hover']"
+                />
+              </template>
+              <Card.Meta>
+                <template #title>
+                  <span class="truncate">{{ item.name }}</span>
+                </template>
+                <template #description>
+                  <div class="truncate h-11">
+                    <div class="truncate">{{ item.organizationDTO.name }}</div>
+                    <div class="truncate">{{ item.remark || '' }} </div>
+                  </div>
+                </template>
+              </Card.Meta>
+            </Card>
+          </List.Item>
+        </template>
+      </List>
+    </section>
+    <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
+    <ShareModal
+      @register="registerShareModal"
+      :shareApi="shareConfiguration"
+      @success="getListData"
+    />
+  </PageWrapper>
+</template>
+
+<style lang="less" scoped>
+  .configuration-list:deep(.ant-list-header) {
+    border-bottom: none !important;
+  }
+
+  .configuration-list:deep(.ant-list-pagination) {
+    height: 24px;
+  }
+
+  .configuration-list:deep(.ant-card-body) {
+    padding: 16px !important;
+  }
+
+  .configuration-list:deep(.ant-list-empty-text) {
+    @apply w-full h-full flex justify-center items-center;
+  }
+
+  .card-container {
+    // background-color: red;
+    .img-container {
+      border-top-left-radius: 80px;
+      background-color: #fff;
+    }
+  }
+
+  .card-container:deep(.ant-card-cover) {
+    background-color: red;
+  }
+</style>

 import { formatToDate } from '/@/utils/dateUtil';
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
-import { DeviceTypeEnum, DeviceState } from '/@/api/device/model/deviceModel';
+import { DeviceTypeEnum, DeviceState, DeviceRecord } from '/@/api/device/model/deviceModel';
 import { deviceProfile } from '/@/api/device/deviceManager';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
 
 // 表格列数据
 export const columns: BasicColumn[] = [
@@ -50,9 +52,13 @@ export const columns: BasicColumn[] = [
     width: 100,
   },
   {
-    title: '标签',
-    dataIndex: 'label',
+    title: '公开',
+    dataIndex: 'public',
     width: 100,
+    customRender({ record }: { record: DeviceRecord }) {
+      const flag = record?.customerAdditionalInfo?.isPublic;
+      return h(Tag, { color: flag ? 'blue' : 'orange' }, () => (flag ? '公开' : '私有'));
+    },
   },
   {
     title: '最后连接时间',

@@ -146,6 +146,13 @@
                     onClick: handleDispatchCustomer.bind(null, record),
                   },
               {
+                label: record?.customerAdditionalInfo?.isPublic ? '私有' : '公开',
+                icon: record?.customerAdditionalInfo?.isPublic
+                  ? 'ant-design:lock-outlined'
+                  : 'ant-design:unlock-outlined',
+                onClick: handlePublicDevice.bind(null, record),
+              },
+              {
                 label: '上下线记录',
                 icon: 'ant-design:rise-outlined',
                 onClick: handleUpAndDownRecord.bind(null, record),
@@ -198,6 +205,8 @@
     checkDeviceOccupied,
     cancelDispatchCustomer,
     getGATEWAY,
+    privateDevice,
+    publicDevice,
   } from '/@/api/device/deviceManager';
   import { PageEnum } from '/@/enums/pageEnum';
   import { useGo } from '/@/hooks/web/usePage';
@@ -218,6 +227,7 @@
   import { Authority } from '/@/components/Authority';
   import { useRoute, useRouter } from 'vue-router';
   import { useBatchOperation } from '/@/utils/useBatchOperation';
+  import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
 
   export default defineComponent({
     name: 'DeviceManagement',
@@ -440,6 +450,28 @@
         reload();
       };
 
+      const { createSyncConfirm } = useSyncConfirm();
+      const handlePublicDevice = async (record: DeviceRecord) => {
+        try {
+          const publicFlag = record?.customerAdditionalInfo?.isPublic;
+          const type = publicFlag ? '私有' : '公开';
+          const flag = await createSyncConfirm({
+            iconType: 'warning',
+            title: `您确定要将设备 '${record.name}' 设为${type}吗？`,
+            content: `确认后，设备及其所有数据将被设为${type}并${
+              publicFlag ? '不' : ''
+            }可被其他人访问。`,
+          });
+          if (!flag) return;
+          if (publicFlag) {
+            await privateDevice(record.tbDeviceId);
+          } else {
+            await publicDevice(record.tbDeviceId);
+          }
+          reload();
+        } catch (error) {}
+      };
+
       onMounted(() => {
         const queryParams = ROUTE.query as Record<'deviceProfileId', undefined | string>;
         const { setFieldsValue } = getForm();
@@ -479,6 +511,7 @@
         registerImportModal,
         handleBatchImport,
         handleImportFinally,
+        handlePublicDevice,
       };
     },
   });

+import { useRouter } from 'vue-router';
+
+export enum ViewTypeEnum {
+  DATA_BOARD = 'DATA_BOARD',
+  LARGE_SCREEN = 'LARGE_SCREEN',
+  SCADA = 'SCADA',
+}
+
+export const goShareUrl = (options: { type: ViewTypeEnum; id: string }, openNew?: false) => {
+  const { type, id } = options;
+  const ROUTER = useRouter();
+  const { origin } = location;
+  const path = `/share/${type}/${id}`;
+  openNew ? ROUTER.push(path) : open(`${origin}${path}`);
+};

+<script lang="ts" setup>
+  import { onMounted } from 'vue';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { Spin } from 'ant-design-vue';
+  import { ref } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { checkShareAccessToken, sharePageLogin, getShareContent } from '/@/api/sys/share';
+  import { ShareRouteParams } from '/@/api/sys/model/shareModel';
+  import { useUserStore } from '/@/store/modules/user';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { FieldsEnum } from '/@/views/common/ShareModal/config';
+  import BoardDetail from '/@/views/visual/board/detail/index.vue';
+
+  const loading = ref(true);
+  const ROUTE = useRoute();
+  const contentData = ref<any>();
+  const canLoadComponent = ref(false);
+
+  const [register, { openModal }] = useModal();
+
+  const [registerForm, { getFieldsValue }] = useForm({
+    schemas: [
+      {
+        field: FieldsEnum.ACCESS_CREDENTIALS,
+        component: 'Input',
+        label: '访问令牌',
+      },
+    ],
+    showActionButtonGroup: false,
+    layout: 'inline',
+    labelWidth: 100,
+  });
+
+  const userStore = useUserStore();
+
+  const getShareToken = async () => {
+    const { params } = ROUTE;
+    const { publicId } = params as Partial<ShareRouteParams>;
+    const { token, refreshToken } = await sharePageLogin(publicId!);
+    userStore.storeToken(token, refreshToken);
+  };
+
+  const getCheckNeedAccessToken = async () => {
+    const { params } = ROUTE;
+    loading.value = true;
+    const { viewType, id } = params as Partial<ShareRouteParams>;
+    const { data } = await checkShareAccessToken(viewType!, id!);
+    data ? openModal(data) : await getContentData();
+  };
+
+  const getContentLoading = ref(false);
+  const getContentData = async () => {
+    try {
+      getContentLoading.value = true;
+      const { params } = ROUTE;
+      const { id } = params as unknown as ShareRouteParams;
+      const value = getFieldsValue() as Record<'accessCredentials', string>;
+      const result = await getShareContent({ id, ...value });
+      contentData.value = result;
+      loading.value = false;
+      canLoadComponent.value = true;
+      openModal(false);
+    } catch (error) {
+    } finally {
+      getContentLoading.value = false;
+    }
+  };
+
+  const handleSubmit = async () => {
+    await getContentData();
+  };
+
+  onMounted(async () => {
+    await getShareToken();
+    await getCheckNeedAccessToken();
+  });
+</script>
+
+<template>
+  <BasicModal
+    @register="register"
+    title="公开"
+    @ok="handleSubmit"
+    :showCancelBtn="false"
+    :okButtonProps="{ loading: getContentLoading }"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+  <Spin
+    :spinning="loading"
+    tip="正在加载中..."
+    size="large"
+    class="!flex justify-center items-center w-full h-full share-full-loading"
+  >
+    <BoardDetail v-if="canLoadComponent" :value="contentData" />
+  </Spin>
+</template>
+
+<style lang="less" scoped></style>

@@ -30,10 +30,18 @@
 
   const { createMessage } = useMessage();
 
+  const handleSubmitValue = (value: Recordable) => {
+    if (!Reflect.get(value, 'accessCredentials')) {
+      Reflect.deleteProperty(value, 'accessCredentials');
+    }
+    return value as any;
+  };
+
   const handleCreatePanel = async () => {
     await method.validate();
     try {
-      const value = method.getFieldsValue() as AddDataBoardParams;
+      let value = method.getFieldsValue() as AddDataBoardParams;
+      value = handleSubmitValue(value);
       loading.value = true;
       changeLoading(true);
       await addDataBoard(value);
@@ -52,7 +60,8 @@
     await method.validate();
     try {
       loading.value = true;
-      const value = method.getFieldsValue() as UpdateDataBoardParams;
+      let value = method.getFieldsValue() as UpdateDataBoardParams;
+      value = handleSubmitValue(value);
       value.id = unref(recordId) as string;
       changeLoading(true);
       await updateDataBoard(value);

+import { ViewTypeEnum } from '/@/views/sys/share/config/config';
+
 export enum MoreActionEvent {
   EDIT = 'edit',
   COPY = 'copy',
   DELETE = 'delete',
+  SHARE = 'share',
 }
 
 export enum VisualBoardPermission {
@@ -24,11 +27,8 @@ export const DEFAULT_WIDGET_HEIGHT = 6;
 export const DEFAULT_MIN_HEIGHT = 5;
 export const DEFAULT_MIN_WIDTH = 3;
 
-export const DATA_BOARD_SHARE_URL = (
-  boardId = ':boardId',
-  tenantId = ':tenantId',
-  name = ':boardName?'
-) => `/data/board/share/${boardId}/${tenantId}/${name}`;
+export const DATA_BOARD_SHARE_URL = (id: string, publicId: string) =>
+  `/share/${ViewTypeEnum.DATA_BOARD}/${id}/${publicId}`;
 
 export const isBataBoardSharePage = (url: string) => {
   const reg = /^\/data\/board\/share/g;

@@ -35,22 +35,6 @@ export const formSchema: FormSchema[] = [
     },
   },
   {
-    field: 'viewType',
-    label: '公开性',
-    component: 'RadioGroup',
-    defaultValue: ViewType.PRIVATE_VIEW,
-    helpMessage: [
-      '私有视图只有项目成员可以浏览。公开视图拥有一个公开的 URL,任何人无需登录即可浏览。    ',
-    ],
-    componentProps: {
-      placeholder: '请选择公开性',
-      options: [
-        { label: '私有看板', value: ViewType.PRIVATE_VIEW },
-        { label: '公开看板', value: ViewType.PUBLIC_VIEW, disabled: true },
-      ],
-    },
-  },
-  {
     field: 'remark',
     label: '备注',
     component: 'InputTextArea',

@@ -14,7 +14,6 @@
     DEFAULT_MIN_WIDTH,
     DEFAULT_WIDGET_HEIGHT,
     DEFAULT_WIDGET_WIDTH,
-    isBataBoardSharePage,
     MoreActionEvent,
     VisualComponentPermission,
   } from '../config/config';
@@ -22,7 +21,6 @@
     addDataComponent,
     deleteDataComponent,
     getDataComponent,
-    getShareBoardComponentInfo,
     updateDataBoardLayout,
   } from '/@/api/dataBoard';
   import { useRoute, useRouter } from 'vue-router';
@@ -48,6 +46,10 @@
   import { useScript } from '/@/hooks/web/useScript';
   import { BAI_DU_MAP_GL_LIB, BAI_DU_MAP_TRACK_ANIMATION } from '/@/utils/fnUtils';
 
+  const props = defineProps<{
+    value: Recordable;
+  }>();
+
   const ROUTE = useRoute();
 
   const ROUTER = useRouter();
@@ -67,13 +69,12 @@
     return decode((ROUTE.params as { boardName: string }).boardName || '');
   });
 
-  const getSharePageParams = computed(() => {
-    const { boardId, tenantId } = ROUTE.params as { boardId: string; tenantId: string };
-    return { boardId: decode(boardId), tenantId: decode(tenantId) };
+  const getSharePageData = computed(() => {
+    return props.value;
   });
 
   const getIsSharePage = computed(() => {
-    return isBataBoardSharePage(ROUTE.path);
+    return ROUTE.matched.find((item) => item.path === '/share/:viewType/:id/:publicId');
   });
 
   const widgetEl = new Map<string, Fn>();
@@ -220,19 +221,9 @@
     return {} as ComponentInfoDetail;
   };
 
-  const getSharePageComponentData = async () => {
-    try {
-      const params = unref(getSharePageParams);
-      return await getShareBoardComponentInfo(params);
-    } catch (error) {}
-    return {} as ComponentInfoDetail;
-  };
-
   const getDataBoradDetail = async () => {
     try {
-      return unref(getIsSharePage)
-        ? await getSharePageComponentData()
-        : await getBasePageComponentData();
+      return unref(getIsSharePage) ? unref(getSharePageData) : await getBasePageComponentData();
     } catch (error) {}
     return {} as ComponentInfoDetail;
   };
@@ -388,7 +379,7 @@
 
 <template>
   <section class="flex flex-col overflow-hidden h-full w-full board-detail">
-    <PageHeader>
+    <PageHeader v-if="!getIsSharePage">
       <template #title>
         <div class="flex items-center">
           <img

@@ -10,7 +10,7 @@
   import { DATA_BOARD_SHARE_URL, MoreActionEvent, VisualBoardPermission } from './config/config';
   import { useModal } from '/@/components/Modal';
   import PanelDetailModal from './components/PanelDetailModal.vue';
-  import { getDataBoardList, deleteDataBoard } from '/@/api/dataBoard';
+  import { getDataBoardList, deleteDataBoard, shareBoard } from '/@/api/dataBoard';
   import { DataBoardRecord } from '/@/api/dataBoard/model';
   import { ViewType } from './config/panelDetail';
   import { useRouter } from 'vue-router';
@@ -21,6 +21,7 @@
   import { encode } from './config/config';
   import { useForm, BasicForm } from '/@/components/Form';
   import { formSchema } from './config/searchForm';
+  import { ShareModal } from '/@/views/common/ShareModal';
 
   const ListItem = List.Item;
   const router = useRouter();
@@ -77,14 +78,15 @@
     getDatasource();
   }
 
-  const createShareUrl = (boardId: string, tenantId: string, name: string) => {
+  const createShareUrl = (record: DataBoardRecord) => {
     const { origin } = location;
-    return `${origin}${DATA_BOARD_SHARE_URL(encode(boardId), encode(tenantId), encode(name))}`;
+    const { id, publicId } = record;
+    return `${origin}${DATA_BOARD_SHARE_URL(id, publicId)}`;
   };
 
   const { clipboardRef } = useCopyToClipboard();
   const handleCopyShareUrl = (record: DataBoardRecord) => {
-    clipboardRef.value = createShareUrl(record.id, record.tenantId, record.name);
+    clipboardRef.value = createShareUrl(record);
     unref(clipboardRef) ? createMessage.success('复制成功') : createMessage.error('未找到分享链接');
   };
 
@@ -92,7 +94,13 @@
   const dropMenuList = computed<DropMenu[]>(() => {
     const hasUpdatePermission = hasPermission(VisualBoardPermission.UPDATE);
     const hasDeletePermission = hasPermission(VisualBoardPermission.DELETE);
-    const basicMenu: DropMenu[] = [];
+    const basicMenu: DropMenu[] = [
+      {
+        text: '分享',
+        event: MoreActionEvent.SHARE,
+        icon: 'ant-design:share-alt-outlined',
+      },
+    ];
     if (hasUpdatePermission)
       basicMenu.push({
         text: '编辑',
@@ -124,6 +132,10 @@
     }
   };
 
+  const handleOpenShareModal = (record: DataBoardRecord) => {
+    openShareModal(true, record);
+  };
+
   const handleMenuEvent = (event: DropMenu, record: DataBoardRecord) => {
     if (event.event === MoreActionEvent.EDIT) handleEdit(record);
     if (event.event === MoreActionEvent.DELETE) {
@@ -133,6 +145,7 @@
         onOk: () => handleRemove(record),
       });
     }
+    if (event.event === MoreActionEvent.SHARE) handleOpenShareModal(record);
   };
 
   const handleEdit = (record: DataBoardRecord) => {
@@ -156,6 +169,8 @@
 
   const [registerModal, { openModal }] = useModal();
 
+  const [registerShareModal, { openModal: openShareModal }] = useModal();
+
   const handleViewBoard = (record: DataBoardRecord) => {
     const hasDetailPermission = hasPermission(VisualBoardPermission.DETAIL);
     if (hasDetailPermission) {
@@ -238,10 +253,7 @@
                     <span>
                       {{ item.viewType === ViewType.PRIVATE_VIEW ? '私有看板' : '公共看板' }}
                     </span>
-                    <span
-                      style="display: none"
-                      v-if="item.viewType === ViewType.PUBLIC_VIEW && false"
-                    >
+                    <span v-if="item.viewType === ViewType.PUBLIC_VIEW">
                       <Tooltip title="点击复制分享链接">
                         <ShareAltOutlined class="ml-2" @click.stop="handleCopyShareUrl(item)" />
                       </Tooltip>
@@ -255,6 +267,7 @@
         </template>
       </List>
     </Spin>
+    <ShareModal @register="registerShareModal" :shareApi="shareBoard" @success="getDatasource" />
     <PanelDetailModal @register="registerModal" @change="getDatasource" />
   </PageWrapper>
 </template>