Demo：部分功能转为网页版试用功能

2025-04-29 18:18:25 +08:00 · 2025-04-22 11:47:58 +08:00 · 2025-04-22 11:47:58 +08:00 · 80ca74e477
commit 80ca74e477
parent c67bebb384
12 changed files with 144 additions and 22 deletions
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@ -215,7 +215,8 @@ export default {
    ai: 'AI dialogue',
    downloadClient: 'Download client',
    site: 'Official website',
-    current: 'Current:'
+    current: 'Current:',
+    downloadDesc: 'You can download it from the following address:'
  },
  nodeHyperlink: {
    title: 'Link',
@ -369,7 +370,12 @@ export default {
      'Detected imported rich text content, automatically enabled rich text mode',
    localStorageExceededTip:
      'The volume of the mind map you created has exceeded the maximum storage limit allowed by the browser. Please export it immediately, otherwise the data will be lost! It is recommended to download the client for use, as there is no size limit for the client.',
-    withBg: 'With background image'
+    withBg: 'With background image',
+    tryTipTitle: 'Function trial prompt',
+    tryTipDesc:
+      'This feature is a trial feature in the web version. Please download the client to use it:',
+    downBaidu: 'Go to Baidu Netdisk to download',
+    downGithub: 'Download from Github'
  },
  mouseAction: {
    tip1:
--- a/web/src/lang/vi_vn.js
+++ b/web/src/lang/vi_vn.js
@ -214,7 +214,8 @@ export default {
    ai: 'Đối thoại AI',
    downloadClient: 'Tải về khách hàng',
    site: 'Trang web chính thức',
-    current: 'Hiện tại:'
+    current: 'Hiện tại:',
+    downloadDesc: 'Có thể download từ địa chỉ sau:'
  },
  nodeHyperlink: {
    title: 'Liên kết',
@ -367,7 +368,12 @@ export default {
      'Phát hiện nội dung văn bản phong phú nhập vào, tự động bật chế độ văn bản phong phú',
    localStorageExceededTip:
      'Dung lượng sơ đồ tư duy bạn tạo đã vượt quá giới hạn lưu trữ tối đa cho phép của trình duyệt. Vui lòng xuất ngay lập tức, nếu không dữ liệu sẽ bị mất! Nên tải xuống ứng dụng khách để sử dụng, vì không có giới hạn kích thước khi sử dụng ứng dụng khách.',
-    withBg: 'Với Background'
+    withBg: 'Với Background',
+    tryTipTitle: 'Mẹo dùng thử chức năng',
+    tryTipDesc:
+      'Chức năng này là chức năng dùng thử trong phiên bản web, xin vui lòng tải xuống để khách hàng sử dụng:',
+    downBaidu: 'Tải xuống Baidu',
+    downGithub: 'Tải xuống Github'
  },
  mouseAction: {
    tip1:
@ -536,4 +542,4 @@ export default {
    tip4: 'Xóa thành công',
    tip5: 'Nút liên kết không tồn tại. Có nên xóa liên kết không?'
  }
-}
+}
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@ -209,7 +209,8 @@ export default {
    ai: 'AI对话',
    downloadClient: '下载客户端',
    site: '官方网站',
-    current: '当前：'
+    current: '当前：',
+    downloadDesc: '可从如下地址下载：'
  },
  nodeHyperlink: {
    title: '超链接',
@ -358,7 +359,11 @@ export default {
    autoOpenNodeRichTextTip: '检测到导入了富文本内容，已自动开启富文本模式',
    localStorageExceededTip:
      '你创建的思维导图体积已经超过浏览器允许存储的上限，请立即导出，否则数据将丢失！建议下载客户端进行使用，客户端无大小限制。',
-    withBg: '带背景'
+    withBg: '带背景',
+    tryTipTitle: '功能试用提示',
+    tryTipDesc: '该功能在网页版中为试用功能，请下载客户端使用：',
+    downBaidu: '去百度网盘下载',
+    downGithub: '去Github下载'
  },
  mouseAction: {
    tip1: '当前：左键拖动画布，右键框选节点',
--- a/web/src/lang/zh_tw.js
+++ b/web/src/lang/zh_tw.js
@ -211,7 +211,7 @@ export default {
    downloadClient: '下載客戶端',
    site: '官方網站',
    current: '當前：',
-    withBg: '帶背景'
+    downloadDesc: '可從如下地址下載：'
  },
  nodeHyperlink: {
    title: '超連結',
@ -358,7 +358,12 @@ export default {
    dragTip: '在此釋放以匯入檔案',
    autoOpenNodeRichTextTip: '檢測到導入了富文本內容，已自動開啓富文本模式',
    localStorageExceededTip:
-      '你創建的思維導圖體積已經超過浏覽器允許存儲的上限，請立即導出，否則數據將丟失！建議下載客戶端進行使用，客戶端無大小限制。'
+      '你創建的思維導圖體積已經超過浏覽器允許存儲的上限，請立即導出，否則數據將丟失！建議下載客戶端進行使用，客戶端無大小限制。',
+    withBg: '帶背景',
+    tryTipTitle: '功能試用提示',
+    tryTipDesc: '該功能在網頁版中為試用功能，請下載用戶端使用：',
+    downBaidu: '去百度網盤下載',
+    downGithub: '去Github下載'
  },
  mouseAction: {
    tip1: '目前：左鍵拖曳畫布，右鍵框選節點',
--- a/web/src/pages/Edit/components/Contextmenu.vue
+++ b/web/src/pages/Edit/components/Contextmenu.vue
@ -62,7 +62,7 @@
      <div class="item" @click="exec('EXPAND_ALL')">
        <span class="name">{{ $t('contextmenu.expandNodeChild') }}</span>
      </div>
-      <div class="item" v-if="supportNumbers">
+      <div class="item vip" v-if="supportNumbers">
        <span class="name">{{ $t('contextmenu.number') }}</span>
        <span class="el-icon-arrow-right"></span>
        <div
@ -92,7 +92,7 @@
          </div>
        </div>
      </div>
-      <div class="item" @click="setCheckbox" v-if="supportCheckbox">
+      <div class="item vip" @click="setCheckbox" v-if="supportCheckbox">
        <span class="name">{{
          hasCheckbox ? $t('contextmenu.removeToDo') : $t('contextmenu.addToDo')
        }}</span>
@ -134,14 +134,14 @@
      <div class="item" @click="exec('REMOVE_NOTE')" v-if="hasNote">
        <span class="name">{{ $t('contextmenu.removeNote') }}</span>
      </div>
-      <div class="item" @click="exec('LINK_NODE')">
+      <div class="item vip" @click="exec('LINK_NODE')">
        <span class="name">{{
          hasNodeLink
            ? $t('contextmenu.modifyNodeLink')
            : $t('contextmenu.linkToNode')
        }}</span>
      </div>
-      <div class="item" @click="exec('REMOVE_LINK_NODE')" v-if="hasNodeLink">
+      <div class="item vip" @click="exec('REMOVE_LINK_NODE')" v-if="hasNodeLink">
        <span class="name">{{ $t('contextmenu.removeNodeLink') }}</span>
      </div>
      <div class="item" @click="exec('REMOVE_CUSTOM_STYLES')">
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@ -141,6 +141,7 @@ import NodeIconToolbar from './NodeIconToolbar.vue'
 import OutlineEdit from './OutlineEdit.vue'
 import { showLoading, hideLoading } from '@/utils/loading'
 import handleClipboardText from '@/utils/handleClipboardText'
+import { getParentWithClass } from '@/utils'
 import Scrollbar from './Scrollbar.vue'
 import exampleData from 'simple-mind-map/example/exampleData'
 import FormulaSidebar from './FormulaSidebar.vue'
@ -294,6 +295,9 @@ export default {
    this.$bus.$on('showLoading', this.handleShowLoading)
    this.$bus.$on('localStorageExceeded', this.onLocalStorageExceeded)
    window.addEventListener('resize', this.handleResize)
+    document.body.addEventListener('click', this.onVipCheckClick)
+    this.$bus.$on('showDownloadTip', this.showDownloadTip)
+    this.$bus.$on('vipCheckClick', this.onVipCheckClick)
  },
  beforeDestroy() {
    this.$bus.$off('execCommand', this.execCommand)
@ -308,6 +312,9 @@ export default {
    this.$bus.$off('showLoading', this.handleShowLoading)
    this.$bus.$off('localStorageExceeded', this.onLocalStorageExceeded)
    window.removeEventListener('resize', this.handleResize)
+    document.body.removeEventListener('click', this.onVipCheckClick)
+    this.$bus.$off('showDownloadTip', this.showDownloadTip)
+    this.$bus.$off('vipCheckClick', this.onVipCheckClick)
    this.mindMap.destroy()
  },
  methods: {
@ -1025,6 +1032,74 @@ export default {
      const file = dt.files && dt.files[0]
      if (!file) return
      this.$bus.$emit('importFile', file)
+    },
+
+    // 网页版功能试用提示
+    onVipCheckClick(e) {
+      const el = getParentWithClass(e.target, 'vip')
+      if (el) {
+        const className = el.classList.value.split(/\s+/).join('_')
+        const storageKey = 'VIP_USAGE_TIP'
+        let data = localStorage.getItem(storageKey)
+        if (data) {
+          data = JSON.parse(data)
+        } else {
+          data = {}
+        }
+        if (!data[className]) {
+          data[className] = 0
+        }
+        data[className]++
+        if (data[className] > 3) {
+          this.showDownloadTip(
+            this.$t('edit.tryTipTitle'),
+            this.$t('edit.tryTipDesc')
+          )
+        }
+        localStorage.setItem(storageKey, JSON.stringify(data))
+      }
+    },
+
+    showDownloadTip(title, desc) {
+      const h = this.$createElement
+      this.$msgbox({
+        title,
+        message: h('div', null, [
+          h('p', null, desc),
+          h('div', null, [
+            h(
+              'a',
+              {
+                attrs: {
+                  href:
+                    'https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3',
+                  target: '_blank'
+                },
+                style: {
+                  color: '#409eff',
+                  marginRight: '12px'
+                }
+              },
+              this.$t('edit.downBaidu')
+            ),
+            h(
+              'a',
+              {
+                attrs: {
+                  href: 'https://github.com/wanglin2/mind-map/releases',
+                  target: '_blank'
+                },
+                style: {
+                  color: '#409eff'
+                }
+              },
+              this.$t('edit.downGithub')
+            )
+          ])
+        ]),
+        showCancelButton: false,
+        showConfirmButton: false
+      })
    }
  }
 }
--- a/web/src/pages/Edit/components/Export.vue
+++ b/web/src/pages/Edit/components/Export.vue
@ -20,7 +20,10 @@
            class="downloadTypeItem"
            v-for="item in downTypeList"
            :key="item.type"
-            :class="{ active: exportType === item.type }"
+            :class="{
+              active: exportType === item.type,
+              vip: ['mm', 'xlsx'].includes(item.type)
+            }"
            @click="exportType = item.type"
          >
            <div class="typeIcon" :class="[item.type]"></div>
@ -77,7 +80,7 @@
                    <span class="name">{{ $t('export.format') }}</span>
                    <el-radio-group v-model="imageFormat">
                      <el-radio label="png">PNG</el-radio>
-                      <el-radio label="jpg">JPG</el-radio>
+                      <el-radio label="jpg" class="vip">JPG</el-radio>
                    </el-radio-group>
                  </div>
                  <div class="valueSubItem">
--- a/web/src/pages/Edit/components/Import.vue
+++ b/web/src/pages/Edit/components/Import.vue
@ -25,6 +25,7 @@
          size="small"
          style="margin-left: 10px;"
          @click="mdImportDialogVisible = true"
+          class="vip"
          >{{ $t('import.mdImportDialogTitle') }}</el-button
        >
        <div slot="tip" class="el-upload__tip">
@ -33,7 +34,7 @@
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
-        <el-button type="primary" @click="confirm">{{
+        <el-button class="vip" type="primary" @click="confirm">{{
          $t('dialog.confirm')
        }}</el-button>
      </span>
--- a/web/src/pages/Edit/components/NavigatorToolbar.vue
+++ b/web/src/pages/Edit/components/NavigatorToolbar.vue
@ -209,6 +209,13 @@ export default {
      } else if (command === 'aiChat') {
        this.setActiveSidebar('ai')
        return
+      } else if (command === 'client') {
+        this.$bus.$emit(
+          'showDownloadTip',
+          this.$t('navigatorToolbar.downloadClient'),
+          this.$t('navigatorToolbar.downloadDesc')
+        )
+        return
      }
      let url = ''
      switch (command) {
@ -228,8 +235,7 @@ export default {
        case 'issue':
          url = 'https://github.com/wanglin2/mind-map/issues/new'
          break
-        case 'client':
-          url = 'https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3'
+
        default:
          break
      }
--- a/web/src/pages/Edit/components/NodeAnnotationBtn.vue
+++ b/web/src/pages/Edit/components/NodeAnnotationBtn.vue
@ -89,7 +89,7 @@
    </div>
    <div
      slot="reference"
-      class="toolbarBtn"
+      class="toolbarBtn vip"
      :style="{
        marginLeft: dir === 'v' || rightHasBtn ? '0px' : '20px',
        marginTop: dir === 'v' ? '10px' : '0px',
--- a/web/src/pages/Edit/components/Setting.vue
+++ b/web/src/pages/Edit/components/Setting.vue
@ -4,6 +4,7 @@
      class="sidebarContent customScrollbar"
      :class="{ isDark: isDark }"
      v-if="configData"
+      @click="onClick"
    >
      <!-- 水印 -->
      <div class="row">
@ -257,7 +258,7 @@
        </div>
      </div>
      <!-- 是否开启手绘风格 -->
-      <div class="row" v-if="supportHandDrawnLikeStyle">
+      <div class="row vip" v-if="supportHandDrawnLikeStyle">
        <div class="rowItem">
          <el-checkbox
            v-model="localConfigs.isUseHandDrawnLikeStyle"
@ -267,7 +268,7 @@
        </div>
      </div>
      <!-- 是否开启动量效果 -->
-      <div class="row" v-if="supportMomentum">
+      <div class="row vip" v-if="supportMomentum">
        <div class="rowItem">
          <el-checkbox
            v-model="localConfigs.isUseMomentum"
@ -277,7 +278,7 @@
        </div>
      </div>
      <!-- 是否开启演示模式的填空功能 -->
-      <div class="row">
+      <div class="row vip">
        <div class="rowItem">
          <el-checkbox
            v-model="config.demonstrateConfig.openBlankMode"
@ -627,6 +628,10 @@ export default {
      this.setLocalConfig({
        [key]: value
      })
+    },
+
+    onClick(e) {
+      this.$bus.$emit('vipCheckClick', e)
    }
  }
 }
--- a/web/src/utils/index.js
+++ b/web/src/utils/index.js
@ -83,3 +83,13 @@ export const printOutline = el => {
    document.body.removeChild(iframe)
  }, 500)
 }
+
+export const getParentWithClass = (el, className) => {
+  if (el.classList.contains(className)) {
+    return el
+  }
+  if (el.parentNode && el.parentNode !== document.body) {
+    return getParentWithClass(el.parentNode, className)
+  }
+  return null
+}