emqx · ysfscream · Jun 24, 2024 · Jun 24, 2024
diff --git a/web/package.json b/web/package.json
@@ -26,6 +26,7 @@
     "json-bigint": "^1.0.0",
     "lodash-id": "^0.14.0",
     "lowdb": "^1.0.0",
+    "markdown-it": "^14.1.0",
     "moment": "^2.29.4",
     "monaco-editor": "^0.25.2",
     "mqtt": "4.3.7",
@@ -50,6 +51,7 @@
     "@types/json-bigint": "^1.0.4",
     "@types/lodash": "^4.14.142",
     "@types/lowdb": "^1.0.9",
+    "@types/markdown-it": "^14.1.1",
     "@types/mocha": "^5.2.7",
     "@types/node": "14.0.27",
     "@types/ws": "^8.5.3",
@@ -70,6 +72,7 @@
     "http-server": "^14.1.1",
     "monaco-editor-webpack-plugin": "^4.0.0",
     "prettier": "^2.0.5",
+    "raw-loader": "^4.0.2",
     "sass": "1.32.13",
     "sass-loader": "^10.1.1",
     "typescript": "^3.7.4",

diff --git a/web/src/assets/doc/policy/data-collection-en.md b/web/src/assets/doc/policy/data-collection-en.md
@@ -0,0 +1,10 @@
+# Data Collection Disclaimer
+
+We prioritize your data privacy and security. Please note the following:
+
+* All configuration data is processed locally on your machine and never leaves your browser.
+* Any topic and message data is solely related to the MQTT Broker you are connected to.
+* We do not perform any cloud operations or data processing.
+* We use Google Tag Manager (GTM) and Google Analytics (GA) only to collect page visit metrics, and no user privacy data is involved.
+
+Thank you for your trust and support.
diff --git a/web/src/assets/doc/policy/data-collection-ja.md b/web/src/assets/doc/policy/data-collection-ja.md
@@ -0,0 +1,10 @@
+# データ収集の免責事項
+
+お客様のデータプライバシーとセキュリティを最優先に考えています。以下をご注意ください：
+
+* すべての設定データはお客様の端末でローカルに処理され、ブラウザから外部に送信されることはありません。
+* トピックやメッセージデータは、接続しているMQTTブローカーに関連するものです。
+* クラウド操作やデータ処理は行っていません。
+* Google Tag Manager（GTM）とGoogle Analytics（GA）を使用してページ訪問メトリクスを収集していますが、ユーザープライバシーデータは関与していません。
+
+ご信頼とサポートありがとうございます。
diff --git a/web/src/assets/doc/policy/data-collection-zh.md b/web/src/assets/doc/policy/data-collection-zh.md
@@ -0,0 +1,10 @@
+# 数据收集声明
+
+我们重视您的数据隐私和安全。请注意以下几点：
+
+* 所有配置数据均在您的机器上本地处理，数据不会离开您的浏览器。
+* 任何主题和消息数据仅与您连接的 MQTT Broker 相关。
+* 我们不进行任何云端操作或数据处理。
+* 我们使用 Google Tag Manager (GTM) 和 Google Analytics (GA) 仅收集页面访问指标，不涉及任何用户隐私数据。
+
+感谢您的信任与支持。
diff --git a/web/src/components/DataCollectionPolicy.vue b/web/src/components/DataCollectionPolicy.vue
@@ -0,0 +1,78 @@
+<template>
+  <my-dialog
+    :title="$t('about.dataCollectionPolicy')"
+    class="data-collection-policy-dialog"
+    :visible.sync="showDialog"
+    width="540px"
+    @confirm="handleClose"
+    @close="handleClose"
+  >
+    <div v-html="renderedContent" class="data-collection-policy-dialog__content"></div>
+  </my-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Getter } from 'vuex-class'
+import MyDialog from './MyDialog.vue'
+import markdownit from 'markdown-it'
+
+@Component({
+  components: {
+    MyDialog,
+  },
+})
+export default class Leftbar extends Vue {
+  @Getter('currentLang') private getterLang!: Language
+
+  @Prop({ default: false }) public visible!: boolean
+
+  private showDialog: boolean = this.visible
+  private renderedContent: string = ''
+
+  @Watch('visible')
+  private onVisibleChanged(val: boolean) {
+    this.showDialog = val
+  }
+
+  @Watch('getterLang')
+  private onLangChanged() {
+    this.loadAndRenderMarkdown()
+  }
+
+  private handleClose() {
+    this.showDialog = false
+    this.$emit('update:visible', false)
+  }
+
+  private async loadAndRenderMarkdown() {
+    const md = markdownit()
+    try {
+      const markdownFile = require(`@/assets/doc/policy/data-collection-${this.getterLang}.md`)
+      this.renderedContent = md.render(markdownFile.default)
+    } catch (error) {
+      console.error('Error loading the markdown file:', error)
+    }
+  }
+
+  private mounted() {
+    this.loadAndRenderMarkdown()
+  }
+}
+</script>
+
+<style lang="scss">
+@import '~@/assets/scss/variable.scss';
+
+.data-collection-policy-dialog {
+  .dialog-footer .cancel {
+    display: none;
+  }
+  &__content {
+    color: var(--color-text-default);
+    h1 {
+      margin-bottom: 24px;
+    }
+  }
+}
+</style>
diff --git a/web/src/lang/about.ts b/web/src/lang/about.ts
@@ -19,6 +19,11 @@ export default {
     en: 'Support',
     ja: 'サポート',
   },
+  dataCollectionPolicy: {
+    zh: '数据收集政策',
+    en: 'Data Collection Policy',
+    ja: 'データ収集ポリシー',
+  },
   releases: {
     zh: '更新日志',
     en: 'Releases',

diff --git a/web/src/types/locale.d.ts b/web/src/types/locale.d.ts
@@ -11,3 +11,8 @@ declare module '*.json' {
   const value: any
   export default value
 }
+
+declare module '*.md' {
+  const value: string
+  export default value
+}
diff --git a/web/src/views/about/index.vue b/web/src/views/about/index.vue
@@ -15,6 +15,9 @@
             <a class="web-link" href="https://github.com/emqx/MQTTX/issues" target="_blank" rel="noopener noreferrer">
               {{ $t('about.support') }}
             </a>
+            <a class="web-link" href="javascript:;" @click="openDataCollectionPolicyDialog()">
+              {{ $t('about.dataCollectionPolicy') }}
+            </a>
           </p>
           <div class="description">
             <p>{{ $t('about.mqttxDesc') }}</p>
@@ -69,14 +72,21 @@
         </div>
       </div>
     </div>
+
+    <DataCollectionPolicy :visible.sync="showDataCollectionPolicyDialog" />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
+import DataCollectionPolicy from '@/components/DataCollectionPolicy.vue'
 
-@Component
+@Component({
+  components: {
+    DataCollectionPolicy,
+  },
+})
 export default class About extends Vue {
   @Getter('currentTheme') private getterTheme!: Theme
   @Getter('currentLang') private getterLang!: Language
@@ -85,6 +95,8 @@ export default class About extends Vue {
   private utm = '?utm_source=emqx.com&utm_medium=referral&utm_campaign='
   private version = `${process.env.VUE_APP_VERSION}`
 
+  private showDataCollectionPolicyDialog = false
+
   get fullYear(): number {
     return new Date().getFullYear()
   }
@@ -137,6 +149,10 @@ export default class About extends Vue {
       windowUrl.opener = null
     }
   }
+
+  private openDataCollectionPolicyDialog() {
+    this.showDataCollectionPolicyDialog = true
+  }
 }
 </script>
 

diff --git a/web/vue.config.js b/web/vue.config.js
@@ -54,5 +54,18 @@ module.exports = {
         ],
       }),
     ],
+    module: {
+      rules: [
+        {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: 'javascript/auto',
+        },
+        {
+          test: /\.md$/,
+          use: 'raw-loader',
+        },
+      ],
+    },
   },
 }
diff --git a/web/yarn.lock b/web/yarn.lock
@@ -1018,6 +1018,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
+"@types/linkify-it@^5":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-5.0.0.tgz#21413001973106cda1c3a9b91eedd4ccd5469d76"
+  integrity sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==
+
 "@types/lodash@*", "@types/lodash@^4.14.142":
   version "4.14.182"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
@@ -1030,6 +1035,19 @@
   dependencies:
     "@types/lodash" "*"
 
+"@types/markdown-it@^14.1.1":
+  version "14.1.1"
+  resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-14.1.1.tgz#06bafb7a4e3f77b62b1f308acf7df76687887e0b"
+  integrity sha512-4NpsnpYl2Gt1ljyBGrKMxFYAYvpqbnnkgP/i/g+NLpjEUa3obn1XJCur9YbEXKDAkaXqsR1LbDnGEJ0MmKFxfg==
+  dependencies:
+    "@types/linkify-it" "^5"
+    "@types/mdurl" "^2"
+
+"@types/mdurl@^2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-2.0.0.tgz#d43878b5b20222682163ae6f897b20447233bdfd"
+  integrity sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==
+
 "@types/minimatch@*":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
@@ -1740,6 +1758,11 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -3778,6 +3801,11 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@^4.4.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -5957,6 +5985,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+linkify-it@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-5.0.0.tgz#9ef238bfa6dc70bd8e7f9572b52d369af569b421"
+  integrity sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==
+  dependencies:
+    uc.micro "^2.0.0"
+
 listr-silent-renderer@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
@@ -6244,6 +6279,18 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-it@^14.1.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-14.1.0.tgz#3c3c5992883c633db4714ccb4d7b5935d98b7d45"
+  integrity sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==
+  dependencies:
+    argparse "^2.0.1"
+    entities "^4.4.0"
+    linkify-it "^5.0.0"
+    mdurl "^2.0.0"
+    punycode.js "^2.3.1"
+    uc.micro "^2.1.0"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -6263,6 +6310,11 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
+mdurl@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-2.0.0.tgz#80676ec0433025dd3e17ee983d0fe8de5a2237e0"
+  integrity sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -7836,6 +7888,11 @@ pumpify@^1.3.3:
     inherits "^2.0.3"
     pump "^2.0.0"
 
+punycode.js@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.3.1.tgz#6b53e56ad75588234e79f4affa90972c7dd8cdb7"
+  integrity sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==
+
 punycode@1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
@@ -7936,6 +7993,14 @@ raw-body@2.5.2:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+raw-loader@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
+  integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 read-pkg@^5.0.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
@@ -9438,6 +9503,11 @@ typescript@^3.7.4:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8"
   integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==
 
+uc.micro@^2.0.0, uc.micro@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-2.1.0.tgz#f8d3f7d0ec4c3dea35a7e3c8efa4cb8b45c9e7ee"
+  integrity sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==
+
 uglify-js@3.4.x:
   version "3.4.10"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"