mdlook/apps/web/src/components/editor/editor-header/HelpDropdown.vue at main · ghzhost/mdlook · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<script setup lang="ts">
import { BookText, Download, Heart, HelpCircle, MessageSquare, Tag } from '@lucide/vue'
import { isFundFeatureEnabled } from '@/services/product/features'

const props = withDefaults(defineProps<{
  asSub?: boolean
}>(), {
  asSub: false,
})

const emit = defineEmits([`openAbout`, `openChangelog`, `openFeedback`, `openFund`, `openMarkdownHelp`])

const { asSub } = toRefs(props)
const showFundUi = isFundFeatureEnabled()

// 下载页地址随部署而变，不写死在源码里：自托管方在构建变量里指定，
// 没有配置时（如公开仓库的默认构建）直接隐藏入口，避免留下死链。
const downloadPageUrl = (import.meta.env.VITE_DOWNLOAD_PAGE_URL ?? ``).trim()
const showDownloadEntry = Boolean(downloadPageUrl)

function openAboutDialog() {
  emit('openAbout')
}

function openFundDialog() {
  emit('openFund')
}

function openMarkdownHelp() {
  emit(`openMarkdownHelp`)
}

function openFeedback() {
  emit(`openFeedback`)
}

function openChangelog() {
  emit(`openChangelog`)
}

function openDownloadPage() {
  if (!downloadPageUrl)
    return
  window.open(downloadPageUrl, `_blank`, `noopener,noreferrer`)
}
</script>

<template>
  <!-- 作为 MenubarSub 使用 -->
  <MenubarSub v-if="asSub">
    <MenubarSubTrigger>
      帮助
    </MenubarSubTrigger>
    <MenubarSubContent>
      <MenubarItem @click="openMarkdownHelp()">
        <BookText class="mr-2 h-4 w-4" />
        语法帮助
      </MenubarItem>
      <MenubarItem @click="openFeedback()">
        <MessageSquare class="mr-2 h-4 w-4" />
        反馈与建议
      </MenubarItem>
      <MenubarItem @click="openChangelog()">
        <Tag class="mr-2 h-4 w-4" />
        版本历史
      </MenubarItem>
      <MenubarItem v-if="showDownloadEntry" @click="openDownloadPage()">
        <Download class="mr-2 h-4 w-4" />
        下载 Mac 版
      </MenubarItem>
      <MenubarItem @click="openAboutDialog()">
        <HelpCircle class="mr-2 h-4 w-4" />
        关于 mdlook
      </MenubarItem>
      <MenubarItem v-if="showFundUi" @click="openFundDialog()">
        <Heart class="mr-2 h-4 w-4" />
        支持 mdlook
      </MenubarItem>
    </MenubarSubContent>
  </MenubarSub>

  <!-- 作为 MenubarMenu 使用（默认） -->
  <MenubarMenu v-else>
    <MenubarTrigger>帮助</MenubarTrigger>
    <MenubarContent align="start">
      <MenubarItem @click="openMarkdownHelp()">
        <BookText class="mr-2 h-4 w-4" />
        语法帮助
      </MenubarItem>
      <MenubarItem @click="openFeedback()">
        <MessageSquare class="mr-2 h-4 w-4" />
        反馈与建议
      </MenubarItem>
      <MenubarItem @click="openChangelog()">
        <Tag class="mr-2 h-4 w-4" />
        版本历史
      </MenubarItem>
      <MenubarItem v-if="showDownloadEntry" @click="openDownloadPage()">
        <Download class="mr-2 h-4 w-4" />
        下载 Mac 版
      </MenubarItem>
      <MenubarItem @click="openAboutDialog()">
        <HelpCircle class="mr-2 h-4 w-4" />
        关于 mdlook
      </MenubarItem>
      <MenubarItem v-if="showFundUi" @click="openFundDialog()">
        <Heart class="mr-2 h-4 w-4" />
        支持 mdlook
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</template>