xs-common-plugins 1.3.7 → 1.3.9

package/.idea/codeStyles/Project.xml

@@ -0,0 +1,60 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <option name="RIGHT_MARGIN" value="300" />
+    <HTMLCodeStyleSettings>
+      <option name="HTML_ATTRIBUTE_WRAP" value="0" />
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="400" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="4" />
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="400" />
+      <indentOptions>
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="400" />
+      <indentOptions>
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="400" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="4" />
+        <option name="TAB_SIZE" value="4" />
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>

package/.prettierrc

@@ -0,0 +1,14 @@
+{
+    "useTabs": true,
+    "tabWidth": 4,
+    "printWidth": 400,
+    "singleQuote": true,
+    "jsxSingleQuote": true,
+    "trailingComma": "none",
+    "semi": false,
+    "arrowParens": "avoid",
+    "bracketSameLine": true,
+    "vueIndentScriptAndStyle": false,
+    "embeddedLanguageFormatting": "auto",
+    "htmlWhitespaceSensitivity": "css"
+}

package/README.md

@@ -324,3 +324,13 @@
    2.新增 ca.js 用于埋点统计
    3.修改 permission.js 页面路由beforeEach方法，增加埋点数据发送
 ```
+```
+   1.3.8
+   1. Navbar 新增 ChangeLog 组件
+```
+
+```
+   1.3.9
+   1. 新增UpdateChecker组件， 用于检测更新
+   2. 优化了买点发送函数
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xs-common-plugins",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "private": false,
   "description": "向上公共代码部分",
   "author": "祝玲云 <1902733517@qq.com>",

package/src/App.vue

@@ -2,10 +2,18 @@
     <div id="app">
         <router-view/>
         <router-view name="websocket"/>
+        <UpdateChecker />
     </div>
 </template>
 
 <script>
+import UpdateChecker from './components/UpdateChecker'
+export default {
+  name: 'App',
+  components: {
+    UpdateChecker
+  }
+}
 
 </script>
 

package/src/components/UpdateChecker/index.vue

@@ -0,0 +1,88 @@
+<script>
+import md5 from 'js-md5'
+import { defineComponent } from 'vue'
+import trackerSend from "@/router/ca";
+
+function trackerSendUpdateChecker({action} = {}) {
+  trackerSend({
+    title: "检测到新版本",
+    action
+  })
+}
+
+const DURATION = 1000 * 60 * 60 * 2
+export default {
+  name: 'UpdateChecker',
+  data () {
+    return {
+      md5: '',
+      interval: null
+    }
+  },
+  methods: {
+    check() {
+      return fetch(`${location.origin}${location.pathname}`, {
+        cache: 'no-cache',
+      }).then(async (res) => {
+        return res.text()
+      })
+    },
+    start() {
+      this.stop()
+      this.interval = setInterval(() => {
+        this.check().then(text => {
+          const newMd5 = md5(text)
+          if (newMd5 !== this.md5) {
+            this.stop()
+            this.notify()
+            trackerSendUpdateChecker({action: "检测到新版本通知用户"})
+          }
+        })
+      }, DURATION)
+    },
+    stop() {
+      if (!this.interval) return
+      clearInterval(this.interval)
+    },
+    refresh() {
+      trackerSendUpdateChecker({action: "检测到新版本刷新页面"})
+      window.location.reload()
+    },
+    onClose() {
+      this.start()
+      trackerSendUpdateChecker({action: "检测到新版本关闭提示"})
+    },
+    notify() {
+      this.$common.popup({
+        title: '检测到新版本',
+        component: defineComponent({
+          template: `<div>
+              <div style="font-size: 14px;color: #606266;line-height: 20px;padding: 10px 20px">
+                检测到有新版本已经发布，请刷新页面
+              </div>
+              <div style="text-align: center"><el-button type="primary" @click="refresh">刷新</el-button></div>
+            </div>`,
+          methods: {
+            refresh: () => this.refresh(),
+            beforeClose: (done) => {done(); this.onClose()}
+          },
+        }),
+        dialogCfg: {
+          closeOnClickModal: false,
+          closeOnPressEscape: false
+        }
+      })
+    }
+  },
+  mounted() {
+    this.check().then(text => {
+      this.md5 = md5(text)
+      this.start()
+    })
+  },
+  render() {
+    return null
+  }
+}
+  
+</script>

package/src/router/ca.js

@@ -1,21 +1,40 @@
 import tracker from "./tracker";
 import moment from "moment";
-export default function trackerSend({userName, router = {}, clientId}) {
-  tracker.send({
-    title: "页面访问",
-    action: "后台页面路由跳转",
-    url: location.href,
-    qt: {
-      clientId,
-      userName,
-      date: moment(Date.now()).format("YYYY-MM-DD HH:mm:ss"),
-      fullPath: router.fullPath,
-      title: getRouterBreadcrumbs(router)
-    }
-  });
+import { getToken } from "@/utils/auth"; // get token from cookie
+import { getConfig } from "@/utils/global-config";
+
+/**
+ * Sends tracking data to the tracker.
+ *
+ * @param {Object} options - The options for tracking.
+ * @param {string} options.title - The title of the tracking event.
+ * @param {string} options.action - The action being tracked.
+ * @param {Object} [options.qt] - Additional tracking data.
+ * @return {void}
+ */
+export default function trackerSend({title, action, qt}) {
+  try {
+    tracker.send({
+      title,
+      action,
+      url: location.href,
+      qt: {
+        clientId: getConfig("CLIENT_ID"),
+        userName: getToken("LoginUserName"),
+        date: moment(Date.now()).format("YYYY-MM-DD HH:mm:ss"),
+        ...qt
+      }
+    });
+  } catch (error) {}
 }
 
-function getRouterBreadcrumbs(router) {
+/**
+ * Returns a string representing the breadcrumbs of the current router.
+ *
+ * @param {Object} router - The router object.
+ * @return {string} The breadcrumbs string.
+ */
+export function getRouterBreadcrumbs(router) {
   return router.matched
     .map((item) => (item.meta && item.meta.title) || item.name)
     .filter((item) => item && item !== "首页")

package/src/router/permission.js

@@ -10,7 +10,7 @@ import "nprogress/nprogress.css"; // progress bar style
 import Oidc from "oidc-client";
 import { requestApi as HTTP } from "xs-request";
 import router from "./index";
-import trackerSend from "./ca";
+import trackerSend, {getRouterBreadcrumbs} from "./ca";
 
 NProgress.configure({
   showSpinner: false,
@@ -73,9 +73,12 @@ router.beforeEach((to, from, next) => {
   } // 没登录 & 没在登录页 => 跳转到登录页
 
   trackerSend({
-    clientId: id4config.client_id,
-    userName: getToken("LoginUserName"),
-    router: to
+    title: "页面访问",
+    action: "前台页面路由跳转",
+    qt: {  
+      fullPath: to.fullPath,
+      title: getRouterBreadcrumbs(to)
+    }
   })
 });
 

package/src/views/layout/components/ChangeLog/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div v-if="list.length > 0">
+    <el-dropdown :hide-on-click="false" @command="handleCommand">
+      <el-badge is-dot class="item">
+        <i class="el-icon-bell"></i>
+      </el-badge>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="(item, index) in list" :key="index" :command="index">{{ item.title }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
+</template>
+
+<script>
+import {defineComponent, h} from "vue";
+import { getConfig } from "@/utils/global-config";
+export default {
+  name: 'changeLog',
+  data () {
+    return {
+      list: []
+    }
+  },
+  methods: {
+    handleCommand (command) {
+      this.$common.popup({
+        title: this.list[command].remark,
+        component: defineComponent({
+          template: `<div>
+              <div style="font-size: 14px;color: #606266;line-height: 20px;padding: 10px 20px">${this.list[command].remark}</div>
+              <div style="text-align: center"><el-button type="primary" @click="$emit('close')">关闭</el-button></div>
+            </div>`
+        })
+      });
+    },
+    getChangeLog () {
+      this.$ask.commng.api.commmng.Banner.Query.post({pageInfo: {
+          page: 1,
+          pageSize: 3
+        },
+        codeLike: `changelog#${getConfig('CLIENT_ID')}`
+      }).then((result) => {
+        if (result.code === 0 && result.data.data.length > 0) {
+          this.list = result.data.data;
+        }
+      }).catch((err) => {
+        
+      }).finally(() => {
+        setTimeout(() => {
+          this.getChangeLog();
+        }, 1000 * 60 * 60 * 12);
+      })
+    }
+  },
+  mounted () {
+    this.getChangeLog();
+  }
+}
+</script>

package/src/views/layout/components/Navbar.vue

@@ -45,6 +45,9 @@
           />
         </el-badge>
       </div>
+      <div class="changelog">
+        <ChangeLog />
+      </div>
       <div>
         <el-tag style="margin: 0 3px;">{{
           userProfile &&
@@ -116,6 +119,7 @@ import { mapGetters } from "vuex";
 import Breadcrumb from "@/components/Breadcrumb";
 import Hamburger from "@/components/Hamburger";
 import AllSearch from "./AllSearch";
+import ChangeLog from "./ChangeLog";
 import { getConfig } from "@/utils/global-config";
 import { getToken, removeToken, removeLocalToken } from "@/utils/auth"; // get token from cookie
 import ImCom from "@/components/im";
@@ -129,6 +133,7 @@ export default {
     Hamburger,
     AllSearch,
     ImCom,
+    ChangeLog,
   },
   data() {
     return {
@@ -393,4 +398,15 @@ export default {
     }
   }
 }
+.changelog {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  line-height: 16px;
+  margin: 0 8px;
+  &:empty {
+    display: none;
+  }
+}
 </style>