firefly-portal-web 1.0.0

package/src/components/PortalPreview/index.ts

@@ -0,0 +1,31 @@
+
+import portalPreview from './index.vue';
+import type { PortalPreviewProps, PortalPreviewData, PortalPreviewEmits } from './types';
+import ElementPlus from 'element-plus';
+import 'firefly-plus-components/index.css'
+import 'element-plus/dist/index.css';
+import gridLayout from 'vue-grid-layout';
+import type { App } from 'vue';
+// 使用轻量覆盖替代 @/styles/tailwindcss.css（后者含 @tailwind utilities，生成约 17,000+ 行无用工具类）
+import '@/styles/tailwindcss.css';
+// 保留设计变量和全局样式，但移除 Windi/Tailwind base
+import '@/design/windi-base.css';  // 已移除：WindI CSS 变量和动画类与组件无关
+import '@/design/index.less';
+import '../VisualPortal/style/index.less'
+import './fonts/ym/iconfont.css'
+import './fonts/ym-custom/iconfont.css'
+
+ portalPreview.install = (app: App) => {
+     app.use(ElementPlus);
+  // 注册 Grid Layout 插件
+  app.use(gridLayout);
+    const compName = portalPreview.name || portalPreview.displayName;
+    if (!compName) return;
+    app.component(compName, portalPreview);
+
+  };
+
+const PortalPreview = portalPreview;
+export { PortalPreview };
+
+export type { PortalPreviewProps, PortalPreviewData, PortalPreviewEmits };

package/src/components/PortalPreview/index.vue

@@ -0,0 +1,329 @@
+<template>
+  <div class="jnpf-content-wrapper">
+    <div v-if="isShow">
+      <PortalDesign @register="registerPortalDesign" @reload="onReload" />
+      <PreviewModal @register="registerPreviewModal" @previewPc="onPreviewPc" />
+      <Preview @register="registerPreview" :isHome="isHome" @reload="onReload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue';
+import Preview from '@/components/VisualPortal/Design/components/Preview.vue';
+import { PreviewModal } from '@/components/CommonModal';
+import PortalDesign from '@/components/VisualPortal/Design/index.vue';
+import { useModal } from '@/components/Modal';
+import { getPageHome, getWorkbench, getAdminWorkbench, portalAccessRecordAdd } from '@/api/newApi/newApi';
+
+// 门户数据结构
+interface PortalPreviewData {
+  id?: string;
+  layout?: any[];
+  formData?: string;
+  header?: any;
+  type?: number;
+  linkType?: number;
+  customUrl?: string;
+}
+
+const props = withDefaults(defineProps<{
+  /** 门户数据，若提供则直接使用，跳过 URL 解析和 API 请求 */
+  data?: PortalPreviewData;
+  /** 是否启用数据埋点记录 */
+  collectData?: boolean;
+  /** 是否监听来自父窗口的 message 事件 */
+  listenMessage?: boolean;
+  /** 接口基础 URL，若为空则使用当前项目配置 */
+  apiUrl?: string;
+  /** URL 参数名：用于获取门户 ID 的参数名（默认 data） */
+  dataParamName?: string;
+  /** URL 参数名：用于获取全员门户参数名（默认 allData） */
+  allDataParamName?: string;
+  /** 是否在 URL 中包含 'preview' 时隐藏操作按钮 */
+  isPreviewMode?: boolean;
+  /** 额外的访问记录参数 */
+  accessExtra?: Record<string, any>;
+  /** 加载失败后跳转路径，若为空则不跳转 */
+  fallbackRedirect?: string;
+}>(), {
+  collectData: false,
+  listenMessage: false,
+  dataParamName: 'data',
+  allDataParamName: 'allData',
+  isPreviewMode: false,
+  fallbackRedirect: '',
+});
+
+const emit = defineEmits<{
+  (e: 'load', data: PortalPreviewData): void;
+  (e: 'reload'): void;
+  (e: 'error', err: any): void;
+}>();
+
+// 是否为首页模式：预览页或首页
+const isHome = computed(() => !!props.isPreviewMode);
+
+// 控制是否显示组件
+const isShow = ref(true);
+
+// 注册 PortalDesign 和 PreviewModal
+const [registerPortalDesign, { openModal: openPortalDesign }] = useModal();
+const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
+// 注册 Preview
+const [registerPreview, { openModal: openPreview }] = useModal();
+
+/**
+ * 解析 URL 参数
+ */
+function queryURLParams(url: string, paramName: string): string {
+  const pattern = /([^?&=]+)=([^&]+)/g;
+  const params: Record<string, string | string[]> = {};
+  let match: RegExpExecArray | null;
+
+  while ((match = pattern.exec(url)) !== null) {
+    const key = decodeURIComponent(match[1]);
+    const value = decodeURIComponent(match[2]);
+
+    if (params[key]) {
+      if (Array.isArray(params[key])) {
+        (params[key] as string[]).push(value);
+      } else {
+        params[key] = [params[key] as string, value];
+      }
+    } else {
+      params[key] = value;
+    }
+  }
+
+  if (!paramName) {
+    return JSON.stringify(params);
+  } else {
+    const p = params[paramName];
+    if (p) {
+      return Array.isArray(p) ? p[0] : p;
+    }
+    return '';
+  }
+}
+
+function isObject(obj: unknown): boolean {
+  return Object.prototype.toString.call(obj) === '[object Object]';
+}
+
+/**
+ * 解析门户表单数据
+ */
+function parseFormData(data: any): PortalPreviewData {
+  if (!data || !data.formData) {
+    return { layout: [] };
+  }
+  try {
+    const formData = isObject(data.formData) ? data.formData : JSON.parse(data.formData);
+    const res = isObject(formData.formData) ? formData.formData : JSON.parse(formData.formData);
+    return res;
+  } catch (e) {
+    return { layout: [] };
+  }
+}
+
+/**
+ * 处理从接口获取的数据
+ */
+function handlePortalData(data: any) {
+  const items = parseFormData(data);
+  emit('load', items);
+  openPreview(true, items);
+}
+
+/**
+ * 处理从接口获取的数据（全员）
+ */
+function handleAdminData(data: any) {
+  const items = parseFormData(data);
+  emit('load', items);
+  openPreview(true, items);
+}
+
+/**
+ * 处理工作台数据
+ */
+function handleWorkBench(data: any) {
+  const items = parseFormData(data);
+  emit('load', items);
+  openPreview(true, items);
+}
+
+/**
+ * 初始化数据
+ */
+async function initData() {
+  // 若 props.data 提供，直接使用
+  if (props.data) {
+    emit('load', props.data);
+    openPreview(true, props.data);
+    return;
+  }
+
+  const url = location.href;
+  const dataParam = queryURLParams(url, props.dataParamName || 'data');
+  const allDataParam = queryURLParams(url, props.allDataParamName || 'allData');
+
+  // URL 中有 data 参数
+  if (dataParam) {
+    try {
+      const items = isObject(dataParam)
+        ? dataParam
+        : JSON.parse(dataParam);
+      emit('load', items);
+      openPreview(true, items);
+    } catch (e) {
+      emit('error', e);
+    }
+    return;
+  }
+
+  // URL 中有 allData 参数（查询全员工作台）
+  if (allDataParam) {
+    try {
+      const res = await getAdminWorkbench();
+      handleAdminData(res.data);
+    } catch (err) {
+      emit('error', err);
+    }
+    return;
+  }
+
+  // 默认查询个人工作台
+  try {
+    const res = await getWorkbench();
+    handleWorkBench(res.data);
+  } catch (err) {
+    emit('error', err);
+    if (props.fallbackRedirect) {
+      window.open(location.origin + props.fallbackRedirect, '_self');
+    }
+  }
+}
+
+/**
+ * 数据埋点
+ */
+function collectAccess(urlResult: string) {
+  if (!props.collectData) return;
+  const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+  portalAccessRecordAdd({
+    clientType: isMobile ? 'app' : 'pc',
+    iconName: '',
+    linkUrl: urlResult || '',
+    loginType: localStorage.getItem('Authorization') ? 1 : 0,
+    portalType: 1,
+    title: '门户',
+    accessUrl: location.href,
+    ...props.accessExtra,
+  }).catch(() => {});
+}
+
+/**
+ * 监听父窗口消息（用于 iframe 跨窗口通信）
+ */
+function handleMessage(event: MessageEvent) {
+  if (!props.listenMessage) return;
+  if (event.data?.type === 'msic' && event.data.data) {
+    try {
+      const data: any = JSON.parse(event.data.data);
+      if (data.isRefresh) {
+        refreshByUrl();
+      }
+    } catch (e) {
+      emit('error', e);
+    }
+  }
+}
+
+/**
+ * 根据 URL 参数刷新数据
+ */
+async function refreshByUrl() {
+  const url = location.href;
+  const dataParam = queryURLParams(url, props.dataParamName || 'data');
+  const allDataParam = queryURLParams(url, props.allDataParamName || 'allData');
+
+  if (dataParam) {
+    try {
+      const items = JSON.parse(dataParam);
+      openPreview(true, items);
+    } catch (e) {
+      emit('error', e);
+    }
+    return;
+  }
+
+  if (allDataParam) {
+    try {
+      const res = await getAdminWorkbench();
+      handleAdminData(res.data);
+    } catch (err) {
+      emit('error', err);
+    }
+    return;
+  }
+
+  try {
+    const res = await getWorkbench();
+    handleWorkBench(res.data);
+  } catch (err) {
+    emit('error', err);
+  }
+}
+
+// 事件处理
+function onReload() {
+  emit('reload');
+}
+
+function onPreviewPc() {
+  // 触发父窗口预览PC
+}
+
+// 监听 props.data 变化
+watch(
+  () => props.data,
+  (newData) => {
+    if (newData) {
+      emit('load', newData);
+      openPreview(true, newData);
+    }
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  const url = location.href;
+  const parts = url.split('/');
+  const lastPart = parts[parts.length - 1];
+  let result = lastPart;
+  if (lastPart.includes('?')) {
+    result = lastPart.substring(0, lastPart.lastIndexOf('?'));
+  }
+  console.log(1231231)
+  initData();
+  collectAccess(result);
+
+  if (props.listenMessage) {
+    window.addEventListener('message', handleMessage, false);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (props.listenMessage) {
+    window.removeEventListener('message', handleMessage, false);
+  }
+});
+</script>
+
+<style lang="less">
+.jnpf-content-wrapper {
+  /* 继承父容器样式 */
+}
+</style>

package/src/components/PortalPreview/style/overrides.css

@@ -0,0 +1,15 @@
+/* PortalPreview 组件自定义样式覆盖 */
+/* 不包含 @tailwind utilities，避免生成大量无用工具类 */
+
+.ant-table-tbody > tr > td {
+  border-color: transparent !important;
+}
+
+.ant-modal .ant-modal-footer {
+  border-top: none;
+}
+
+html[data-theme='dark'] span,
+html[data-theme='dark'] p {
+  color: var(--gp-text-color-primary) !important;
+}

package/src/components/PortalPreview/types.ts

@@ -0,0 +1,61 @@
+/**
+ * PortalPreview 组件属性类型定义
+ * @description 该文件定义了 PortalPreview 组件的 Props 和 Emits 类型
+ * @packageDocumentation
+ */
+
+/**
+ * 门户预览数据结构
+ */
+export interface PortalPreviewData {
+  /** 门户ID，若存在则从接口获取详情 */
+  id?: string;
+  /** 布局数据 */
+  layout?: any[];
+  /** 表单数据（包含 layout 和 header） */
+  formData?: string;
+  /** 头部配置 */
+  header?: any;
+  /** 类型，用于区分自定义页和工作台 */
+  type?: number;
+  /** 链接类型 */
+  linkType?: number;
+  /** 自定义 URL（嵌入iframe时使用） */
+  customUrl?: string;
+}
+
+/**
+ * PortalPreview 组件属性
+ */
+export interface PortalPreviewProps {
+  /** 门户数据，若提供则直接使用，跳过 URL 解析和 API 请求 */
+  data?: PortalPreviewData;
+  /** 是否启用数据埋点记录 */
+  collectData?: boolean;
+  /** 是否监听来自父窗口的 message 事件 */
+  listenMessage?: boolean;
+  /** 接口基础 URL，若为空则使用当前项目配置 */
+  apiUrl?: string;
+  /** URL 参数名：用于获取门户 ID 的参数名（默认 data） */
+  dataParamName?: string;
+  /** URL 参数名：用于获取全员门户参数名（默认 allData） */
+  allDataParamName?: string;
+  /** 是否在 URL 中包含 'preview' 时隐藏操作按钮 */
+  isPreviewMode?: boolean;
+  /** 额外的访问记录参数 */
+  accessExtra?: Record<string, any>;
+  /** 加载失败后跳转路径，若为空则不跳转 */
+  fallbackRedirect?: string;
+}
+
+/**
+ * 组件事件
+ */
+export interface PortalPreviewEmits {
+  /** 预加载完成时触发 */
+  (e: 'load', data: PortalPreviewData): void;
+  /** 数据刷新完成时触发 */
+  (e: 'reload'): void;
+  /** 加载错误时触发 */
+  (e: 'error', err: any): void;
+}