feat：第一次提交，完成检查token、授权信息检测、浏览器检测、反调试功能

.gitignore

@@ -0,0 +1,2 @@
+package-lock.json
+node_modules

.npmrc

@@ -0,0 +1,4 @@
+# registry=https://registry.npmmirror.com
+
+
+# registry=https://packages.aliyun.com/63a3ac138d9a873a30aae3d2/npm/npm-registry/

README.md

@@ -0,0 +1,29 @@
+### jfcloud前端工具包说明 
+
+| **导出属性** | **使用方法**                                                 |
+| ------------ | ------------------------------------------------------------ |
+| mixins       | 混入                                                         |
+| components   | 在vue文件components注册组件                                  |
+| setupPlugins | 在main.js处使用  `setupPlugins(Vue, {   AntiDebugPlugin: {     enableAntiDebug: process.env.NODE_ENV !== "development",   }, });` |
+
+mixins：
+
+| **属性**   | **说明**                    | **回调参数**                                                 |
+| ---------- | --------------------------- | ------------------------------------------------------------ |
+| checkToken | 定期检查当前用户的token状态 | function({ url, token, interval }){ } url 默认 /auth/token/check_token token 默认使用项目中的this.$store.getters["user/token"]interval 默认 30s 单位ms |
+
+
+ components：
+
+| **组件**          | **说明**                     | **props**               |
+| ----------------- | ---------------------------- | ----------------------- |
+| BrowserTypePrompt | 检测浏览器是不是Edge或者谷歌 | 无                      |
+| ExpireModel       | 授权检测                     | licenseInfo：许可证信息 |
+
+
+
+setupPlugins：
+
+| **组件**        | **说明**   | **options**                                                  |
+| --------------- | ---------- | ------------------------------------------------------------ |
+| AntiDebugPlugin | 反调试插件 | {  enableAntiDebug：启用反调试   antiDebugKey：内部调试key 默认 jfcloudjfcloud} |

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@jfcloudvip/front-toolkit",
+  "author": "lh_hub <2844316064@qq.com>",
+  "version": "1.0.10",
+  "description": "jfcloud内部前端公共功能工具包",
+  "main": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "http://git.nzklabs.com:3000/lihe/jfcloud-front-toolkit.git"
+  },
+  "keywords": [],
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@jfcloudvip/vue-anti-debug-plugin": "latest"
+  }
+}

prettier.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  $schema: "https://json.schemastore.org/prettierrc",
+  printWidth: 80, // 指定换行的行长
+  tabWidth: 2, // 指定每个缩进级别的空格数
+  semi: true, // 在每个语句的末尾添加一个分号
+  singleQuote: false, // 使用双引号而不是单引号
+  trailingComma: "es5", // 在 ES5 中有效的尾随逗号（对象、数组等）。TypeScript 和 Flow 中类型参数中的尾随逗号。
+};

src/components/BrowserTypePrompt/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-dialog
+    title=""
+    width="660px"
+    :visible="visible"
+    :modal-append-to-body="true"
+    :append-to-body="true"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="false"
+    custom-class="expire-model-dialog"
+  >
+    <div class="expire-model">
+      <div class="content">
+        <div class="item">
+          <p>授权主体:</p>
+          <b>武汉博特睿达智能科技有限公司</b>
+        </div>
+
+        <div class="item-tip">
+          <img src="../../assets/image/guoqi_warning.png" />
+          <b>请使用 Edge 浏览器或谷歌浏览器</b>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { isEdgeOrChrome } from "../../utils/index.js";
+
+export default {
+  name: "BrowserTypePrompt",
+  computed: {
+    visible() {
+      return isEdgeOrChrome().flag;
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped>
+/* 隐藏 el-dialog 的默认 header 并调整 dialog 样式 */
+::v-deep .expire-model-dialog {
+  margin-top: 20vh !important;
+}
+
+::v-deep .expire-model-dialog .el-dialog__header {
+  display: none;
+}
+
+::v-deep .expire-model-dialog .el-dialog__body {
+  padding: 0;
+}
+
+/* 设置过期模型容器样式 */
+.expire-model {
+  width: 660px;
+  height: 400px;
+  background: url("../../assets/image/guoqi_bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+/* 内容区域样式 */
+.expire-model .content {
+  padding: 40px 40px;
+}
+
+/* 每个 item 样式 */
+.expire-model .item {
+  margin-bottom: 20px;
+}
+
+.expire-model .item p {
+  line-height: 2em;
+}
+
+.expire-model .item b {
+  font-size: 20px;
+}
+
+/* 提示项样式 */
+.expire-model .item-tip {
+  margin-top: 228px;
+  display: flex;
+  align-items: center;
+}
+
+.expire-model .item-tip img {
+  margin-right: 14px;
+}
+
+.expire-model .item-tip b {
+  font-size: 20px;
+  color: #ff5151;
+}
+</style>

src/components/ExpireModel/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <el-dialog
+    title=""
+    width="660px"
+    :visible="visible"
+    :modal-append-to-body="true"
+    :append-to-body="true"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="false"
+    custom-class="expire-model-dialog"
+  >
+    <div class="expire-model">
+      <div class="content">
+        <div class="item">
+          <p>授权主体:</p>
+          <b>武汉博特睿达智能科技有限公司</b>
+        </div>
+        <div class="item">
+          <p>授权截止时间</p>
+          <b>{{ expireTime }}</b>
+        </div>
+        <div class="item">
+          <p>已过期</p>
+          <b>{{ expiredDays }}天</b>
+        </div>
+        <div class="item-tip">
+          <img src="../../assets/image/guoqi_warning.png" />
+          <b>软件产品授权已过期，请联系供应商，谢谢！</b>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import dayjs from "dayjs";
+export default {
+  props: {
+    licenseInfo: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    visible() {
+      return this.licenseInfo && !this.licenseInfo.enable;
+    },
+  },
+  computed: {
+    expireTime() {
+      if (this.licenseInfo) {
+        return dayjs(this.licenseInfo.expiryTime).format("YYYY-MM-DD HH:mm:ss");
+      }
+      return "-----";
+    },
+    expiredDays() {
+      if (this.licenseInfo) {
+        const expireTime = dayjs(this.licenseInfo.expiryTime);
+        const issuedTime = dayjs(this.licenseInfo.issuedTime);
+        const days = expireTime.diff(issuedTime, "day");
+        return days > 0 ? days : 0;
+      }
+      return "0";
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 深度样式覆盖 Element UI 的 el-dialog 组件 */
+::v-deep .expire-model-dialog {
+  margin-top: 20vh !important;
+}
+
+::v-deep .expire-model-dialog .el-dialog__header {
+  display: none;
+}
+
+::v-deep .expire-model-dialog .el-dialog__body {
+  padding: 0;
+}
+
+/* 容器样式 */
+.expire-model {
+  width: 660px;
+  height: 400px;
+  background: url("../../assets/image/guoqi_bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+/* 内容区域样式 */
+.expire-model .content {
+  padding: 40px 40px;
+}
+
+.expire-model .content .item {
+  margin-bottom: 20px;
+}
+
+.expire-model .content .item p {
+  line-height: 2em;
+}
+
+.expire-model .content .item b {
+  font-size: 20px;
+}
+
+/* 提示项样式 */
+.expire-model .content .item-tip {
+  margin-top: 50px;
+  display: flex;
+  align-items: center;
+}
+
+.expire-model .content .item-tip img {
+  margin-right: 14px;
+}
+
+.expire-model .content .item-tip b {
+  font-size: 20px;
+  color: #ff5151;
+}
+</style>

src/components/index.js

@@ -0,0 +1,7 @@
+import BrowserTypePrompt from "./BrowserTypePrompt/index.vue";
+import ExpireModel from "./ExpireModel/index.vue";
+
+export default {
+  BrowserTypePrompt,
+  ExpireModel,
+};

src/index.js

@@ -0,0 +1,27 @@
+/**
+ * 导出 mixins、插件和组件，供外部使用
+ *
+ * 该文件用于整合项目中的全局混入（mixins）、插件（plugins）和组件（components），
+ * 并通过 export 提供具名导出，同时提供一个默认导出对象，方便在 Vue 项目中统一引入。
+ */
+
+// 引入全局混入逻辑
+import Mixins from "./mixins/index.js";
+
+// 引入插件安装逻辑（如 Vue.use(...) 的封装）
+import SetupPlugins from "./plugin/index.js";
+
+// 引入自定义组件集合
+import Components from "./components/index.js";
+
+// 将混入和插件安装函数作为命名导出，便于按需使用
+export const mixins = Mixins;
+export const setupPlugins = SetupPlugins;
+export const components = Components;
+
+// 默认导出所有模块，可用于 Vue 应用的全局注册或配置
+export default {
+  mixins,
+  components,
+  setupPlugins,
+};

src/mixins/checkToken/index.js

@@ -0,0 +1,55 @@
+export default {
+  name: "ToolkitMixCheckToken",
+  data() {
+    return {
+      toolkit_mix_Timer: null,
+    };
+  },
+  created() {
+    this.toolkit_mix_checkToken();
+  },
+  beforeDestroy() {
+    if (this.toolkit_mix_Timer) {
+      clearInterval(this.toolkit_mix_Timer);
+      this.toolkit_mix_Timer = null;
+    }
+  },
+  methods: {
+    /** 检查检测token状态
+     * @param { url, token, interval } opt  interval 默认30s 单位ms
+     */
+    toolkit_mix_checkToken(opt) {
+      const {
+        url = "/auth/token/check_token",
+        token,
+        interval = 1000 * 30,
+      } = opt || {};
+      try {
+        const tokenVal = token || this.$store.getters["user/token"];
+        if (!tokenVal) {
+          return console.warn(
+            `jfcloud-front-toolkit/toolkit_mix_checkToken: 无法获取token：${
+              tokenVal + ""
+            }`
+          );
+        }
+        if (!this.$http) {
+          return console.warn(
+            `jfcloud-front-toolkit/toolkit_mix_checkToken: this.$http不存在请手动重写toolkit_mix_checkToken`
+          );
+        }
+        this.toolkit_mix_Timer = setInterval(() => {
+          this.$http({
+            url: url,
+            method: "get",
+            params: { token: tokenVal },
+          });
+        }, interval);
+      } catch (e) {
+        return console.error(
+          `jfcloud-front-toolkit/toolkit_mix_checkToken: ${e}`
+        );
+      }
+    },
+  },
+};

src/mixins/index.js

@@ -0,0 +1,5 @@
+import checkToken from "./checkToken/index.js";
+
+export default {
+  checkToken,
+};

src/plugin/index.js

@@ -0,0 +1,32 @@
+import AntiDebugPlugin from "@jfcloudvip/vue-anti-debug-plugin";
+
+/**
+ * 安装插件
+ *
+ * @param {Object} Vue - The Vue constructor
+ * @param {Object} option - Configuration options for plugins
+ * @param {Array} option.exclude - Plugins to be excluded
+ * @param {Object} option.AntiDebugPlugin - Options for the AntiDebugPlugin
+ */
+const setupPlugins = (Vue, option) => {
+  try {
+    // Destructuring assignment with default value for the exclude option
+    const { exclude = [] } = option || {};
+
+    // Check if AntiDebugPlugin is not in the exclusion list and use it
+    // AntiDebugPlugin
+    if (
+      !exclude.includes("AntiDebugPlugin") &&
+      option.AntiDebugPlugin.enableAntiDebug
+    )
+      Vue.use(AntiDebugPlugin, {
+        enableAntiDebug: true,
+        antiDebugKey: option.AntiDebugPlugin.antiDebugKey || "jfcloudjfcloud",
+      });
+  } catch (e) {
+    // Error handling: log errors during plugin setup
+    console.error(`jfcloud-front-toolkit/setupPlugins: ${e}`);
+  }
+};
+
+export default setupPlugins;

src/utils/index.js

@@ -0,0 +1,27 @@
+/** 判断是否是Edge浏览器或者Chrome浏览器 */
+export function isEdgeOrChrome() {
+  const ua = navigator.userAgent.toLowerCase();
+
+  const edgeRegExp = /edg\/[0-9]{0,4}\.0\.0\.0/;
+  const chromeRegExp = /chrome\/[0-9]{0,4}\.0\.0\.0\ssafari\/537\.36$/;
+  const regExp360_1 = /wow64/;
+  const regExp360_2 =
+    /chrome\/[0-9]{0,4}\.0\.[0-9]{0,4}\.[0-9]{0,4}\ssafari\/537\.36$/;
+
+  // 判断是否是 Edge 浏览器
+  if (edgeRegExp.test(ua)) {
+    return { flag: true, browser: "Edge" };
+  }
+
+  // 判断是否是 Chrome 浏览器
+  if (chromeRegExp.test(ua)) {
+    return { flag: true, browser: "Chrome" };
+  }
+
+  // 进一步判断360浏览器
+  if (regExp360_1.test(ua) || regExp360_2.test(ua)) {
+    return { flag: false, browser: "360" };
+  }
+
+  return { flag: false, browser: "other" };
+}