hzerojs-plugin-yqcloud-jssdk 1.0.19 → 1.0.21

package/lib/index.js

@@ -41,7 +41,7 @@ var import_index = require("./index.css");
 var YQ_API_HOST = "https://api.test.yqcloud.com";
 var src_default = (props) => {
   var _a, _b;
-  const { token, entryDetail, apiHost = YQ_API_HOST, tokenPath = "/iam/v1/zknow/encrypt/quick", modalBodyStyle, modalStyle } = props;
+  const { token, entryDetail, apiHost = YQ_API_HOST, tokenPath = "/iam/v1/zknow/encrypt/quick" } = props;
   const eleRef = import_react.default.useRef(null);
   const tenantIdRef = import_react.default.useRef(null);
   const [appConfig, setAppConfig] = import_react.default.useState(false);
@@ -130,13 +130,13 @@ var src_default = (props) => {
     const modal = import_modal.default.open({
       // title: '测试',
       maskClosable: true,
-      bodyStyle: modalBodyStyle || {
+      bodyStyle: {
         width: (openFunction == null ? void 0 : openFunction.viewSize) || 800,
         padding: 0,
         height: "100%",
         overflow: "hidden"
       },
-      style: modalStyle || {
+      style: {
         // top: 50,
       },
       contentStyle: {
@@ -158,7 +158,19 @@ var src_default = (props) => {
   function defaultIcon() {
     return /* @__PURE__ */ import_react.default.createElement("div", { type: "picture", style: { width: 18, height: 18, marginRight: 10, display: "inline-block" } });
   }
-  const menu = /* @__PURE__ */ import_react.default.createElement(import_menu.default, null, (_a = appConfig == null ? void 0 : appConfig.openFunctions) == null ? void 0 : _a.map((openFunction) => /* @__PURE__ */ import_react.default.createElement(import_menu.default.Item, { onClick: () => openModal(openFunction) }, openFunction.icon ? /* @__PURE__ */ import_react.default.createElement("img", { style: { width: 18, height: 18, marginRight: 10 }, src: `${apiHost}/hfle/yqc/v1/0/files/download-by-key?fileKey=${openFunction.icon}`, alt: "" }) : defaultIcon(), openFunction.displayName)));
+  const menu = /* @__PURE__ */ import_react.default.createElement(import_menu.default, null, (_a = appConfig == null ? void 0 : appConfig.openFunctions) == null ? void 0 : _a.map((openFunction) => {
+    if (openFunction.enabledFlag) {
+      return /* @__PURE__ */ import_react.default.createElement(import_menu.default.Item, { onClick: () => openModal(openFunction), key: openFunction.id }, openFunction.icon ? /* @__PURE__ */ import_react.default.createElement(
+        "img",
+        {
+          style: { width: 18, height: 18, marginRight: 10 },
+          src: `${apiHost}/hfle/yqc/v1/0/files/download-by-key?fileKey=${openFunction.icon}`,
+          alt: ""
+        }
+      ) : defaultIcon(), openFunction.displayName);
+    }
+    return null;
+  }));
   const onlyOneButton = /* @__PURE__ */ import_react.default.createElement("div", { className: "yq-hzero-jssdk-btn", style: { padding: 0 }, onClick: () => openModal(appConfig == null ? void 0 : appConfig.openFunctions[0]) }, appConfig.icon ? /* @__PURE__ */ import_react.default.createElement("img", { style: { width: 18, height: 18, marginRight: 10 }, src: `${apiHost}/hfle/yqc/v1/0/files/download-by-key?fileKey=${appConfig.icon}`, alt: "" }) : /* @__PURE__ */ import_react.default.createElement("div", { type: "picture", style: { width: 18, height: 18, marginRight: 10, display: "inline-block" } }), (entryDetail == null ? void 0 : entryDetail.entryName) || (appConfig == null ? void 0 : appConfig.displayName) || (appConfig == null ? void 0 : appConfig.name));
   return /* @__PURE__ */ import_react.default.createElement("div", { className: "yqcloud-hzero-jssdk", ref: eleRef }, ((_b = appConfig == null ? void 0 : appConfig.openFunctions) == null ? void 0 : _b.length) === 1 ? onlyOneButton : /* @__PURE__ */ import_react.default.createElement(import_popover.default, { overlayClassName: "yqcloud-hzero-jssdk-popover", overlayStyle: { padding: 0 }, openClassName: "yqcloud-hzero-jssdk-popover", content: menu, placement: "left" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "yq-hzero-jssdk-btn", style: { padding: 0 } }, appConfig.icon ? /* @__PURE__ */ import_react.default.createElement("img", { style: { width: 18, height: 18, marginRight: 10 }, src: `${apiHost}/hfle/yqc/v1/0/files/download-by-key?fileKey=${appConfig.icon}`, alt: "" }) : /* @__PURE__ */ import_react.default.createElement("div", { type: "picture", style: { width: 18, height: 18, marginRight: 10, display: "inline-block" } }), (entryDetail == null ? void 0 : entryDetail.entryName) || (appConfig == null ? void 0 : appConfig.displayName) || (appConfig == null ? void 0 : appConfig.name))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hzerojs-plugin-yqcloud-jssdk",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "main": "lib/index.js",
   "license": "MIT",
   "scripts": {
@@ -15,6 +15,7 @@
   },
   "files": [
     "lib",
-    "browsers"
+    "browsers",
+    "src"
   ]
 }

package/src/index.css

@@ -0,0 +1,14 @@
+.yqcloud-hzero-jssdk-popover .c7n-popover-inner-content{
+    padding: 0;
+}
+.yq-hzero-jssdk-btn:hover {
+  color: #0840f8;
+}
+.yq-hzero-jssdk-btn {
+  font-size: 13px;
+  color: #0f1358;
+  cursor: pointer;
+}
+.yqcloud-hzero-jssdk-popover.c7n-popover.c7n-popover .c7n-popover-content .c7n-popover-inner .c7n-popover-inner-content {
+  padding: 0;
+}

package/src/index.tsx

@@ -0,0 +1,184 @@
+import React, {useEffect} from 'react';
+import Modal from 'choerodon-ui/pro/es/modal';
+import Menu from 'choerodon-ui/pro/es/menu';
+import Popover from 'choerodon-ui/es/popover';
+import axios from 'axios';
+const YQ_API_HOST = 'https://api.test.yqcloud.com';
+import './index.css';
+// const TOKEN = '10ef346d-85fc-423a-9995-08731db60ba5';
+export default (props) => {
+  const { token, entryDetail, apiHost = YQ_API_HOST, tokenPath = '/iam/v1/zknow/encrypt/quick' } = props;
+  const eleRef = React.useRef( null);
+  const tenantIdRef = React.useRef(null);
+  const [appConfig, setAppConfig] = React.useState(false);
+  const [isVisible, setIsVisble] = React.useState(false);
+  React.useEffect(() => {
+    let observer: any = null;
+    if (eleRef.current && 'IntersectionObserver' in window &&
+            'IntersectionObserverEntry' in window &&
+            'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
+      observer = new IntersectionObserver(entries => {
+        if (entries[0].intersectionRatio === 1 ) {
+          setIsVisble(true);
+          // console.log('进入可视区域');
+          // do something
+        } else {
+          setIsVisble(false);
+          // console.log('移出可视区域');
+          // do something
+        }
+      });
+
+      observer.observe(eleRef.current);
+    }
+    return () => {
+      if(observer) {
+        observer.disconnect();
+      }
+    };
+  }, []);
+  React.useEffect(() => {
+    if(isVisible) {
+      console.log('悬浮窗展开了');
+    } else {
+      console.log('悬浮窗收起了');
+    }
+  }, [isVisible]);
+
+  async function yqRequest(url: string, method: string, data?: any) {
+    return new Promise<any>((resolve) => {
+      const xhr = new XMLHttpRequest();
+      xhr.withCredentials = false;
+
+      xhr.addEventListener('readystatechange', function () {
+        if (xhr.readyState === 4) {
+          try {
+            const res = JSON.parse(xhr.responseText);
+            resolve(res);
+          } catch (e) {
+            resolve(xhr.responseText);
+            // console.log('【YQCloud】xhr请求解析失败:', e, xhr.responseText);
+          }
+        }
+      });
+      xhr.open(
+        method,
+        url
+      );
+      xhr.setRequestHeader('Accept', 'application/json');
+      xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+      if (tenantIdRef.current) {
+        xhr.setRequestHeader('x-tenant-id', tenantIdRef.current);
+      }
+      xhr.send(JSON.stringify(data));
+    });
+  }
+
+  useEffect(() => {
+    const url = `${apiHost}/iam/yqc/open_apps/quick/${token}`;
+
+    yqRequest(url, 'GET').then(function(jsonData) {
+      try {
+        if (jsonData && jsonData.failed) {
+          console.log('【YQCloud】:', jsonData.message);
+        } else {
+          const appConfig = JSON.parse(jsonData.jsonConfig);
+          tenantIdRef.current = jsonData.tenantId;
+          setAppConfig(appConfig);
+          console.log('【YQCloud】解析配置成功:', appConfig);
+          // document.body.appendChild(component(appConfig));
+        }
+      } catch (e) {
+        console.log('【YQCloud】解析配置失败:', e);
+      }
+    });
+  }, [isVisible]);
+  const openModal = async (openFunction) => {
+
+    const secret = await axios.get(tokenPath || '/iam/v1/zknow/encrypt/quick');
+    const authUrl = `${apiHost}/oauth/public/quick_authentication?token=${token}`;
+    const res = await yqRequest(authUrl, 'POST',{
+      secret,
+      // code,
+    });
+
+    const authParam = `&redirectFlag&access_token=${res.accessToken}&token_type=bearer&state=&expires_in=86399&scope=default`;
+    // fields default value, ex: '{userName:"yqcloud"}'
+    const fieldData = sessionStorage.getItem('YQ_FIELD_DATA');
+    let urlParam = authParam;
+    if (fieldData) {
+      urlParam = `&fieldData=${fieldData}${authParam}`;
+    }
+
+    const modal = Modal.open({
+      // title: '测试',
+      maskClosable: true,
+      bodyStyle: {
+        width: openFunction?.viewSize || 800,
+        padding: 0,
+        height: '100%',
+        overflow: 'hidden'
+      },
+      style: {
+        // top: 50,
+      },
+      contentStyle: {
+        width: openFunction?.viewSize || 800,
+        height: 'calc(100vh - 100px)'
+      },
+      header: null,
+      children: (
+        <iframe id="yq-sdk-frame" style={{ width: '100%', height: '100%'}} src={`${openFunction.link}${urlParam}`} frameBorder="0"></iframe>
+      ),
+      footer: null,
+    });
+    function closeModal(e) {
+      if (e.data === 'yq_close_modal') {
+        modal.close();
+        window.removeEventListener('message', closeModal);
+      }
+    }
+    window.addEventListener('message', closeModal);
+  };
+  function defaultIcon() {
+    return <div type="picture" style={{width: 18, height: 18, marginRight: 10, display: 'inline-block'}} />;
+  }
+  const menu = (
+    <Menu>
+      {appConfig?.openFunctions?.map((openFunction) => {
+        if (openFunction.enabledFlag) {
+          return (
+            <Menu.Item onClick={() => openModal(openFunction)} key={openFunction.id}>
+              {openFunction.icon ? <img
+                style={{width: 18, height: 18, marginRight: 10}}
+                src={`${apiHost}/hfle/yqc/v1/0/files/download-by-key?fileKey=${openFunction.icon}`}
+                alt=""/> : defaultIcon()}
+              {openFunction.displayName}
+            </Menu.Item>
+          );
+        }
+        return null;
+      })}
+    </Menu>
+  );
+
+  const onlyOneButton = (
+    <div className="yq-hzero-jssdk-btn" style={{ padding: 0 }} onClick={() => openModal(appConfig?.openFunctions[0])}>
+      {appConfig.icon ? <img style={{width: 18, height: 18, marginRight: 10}} src={`${apiHost}/hfle/yqc/v1/0/files/download-by-key?fileKey=${appConfig.icon}`} alt=""/> : <div type="picture" style={{width: 18, height: 18, marginRight: 10, display: 'inline-block'}} />}
+      {entryDetail?.entryName || appConfig?.displayName || appConfig?.name}
+    </div>
+  );
+
+  return (
+    <div className="yqcloud-hzero-jssdk" ref={eleRef}>
+      {appConfig?.openFunctions?.length === 1 ? onlyOneButton : (
+        <Popover overlayClassName="yqcloud-hzero-jssdk-popover" overlayStyle={{ padding: 0 }} openClassName="yqcloud-hzero-jssdk-popover" content={menu} placement="left">
+          <div className="yq-hzero-jssdk-btn" style={{ padding: 0 }}>
+            {appConfig.icon ? <img style={{width: 18, height: 18, marginRight: 10}} src={`${apiHost}/hfle/yqc/v1/0/files/download-by-key?fileKey=${appConfig.icon}`} alt=""/> : <div type="picture" style={{width: 18, height: 18, marginRight: 10, display: 'inline-block'}} />}
+            {entryDetail?.entryName || appConfig?.displayName || appConfig?.name}
+          </div>
+        </Popover>
+      )}
+    </div>
+  );
+};

package/src/util.ts

@@ -0,0 +1,4 @@
+
+export function sayHello() {
+  console.log('Hello World.')
+}