mdlook/apps/web/src/components/WelcomeGuideDialog.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<script setup lang="ts">
import { Copy, FolderOpen, ImageUp, Palette, X } from '@lucide/vue'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { addPrefix } from '@/utils'

const GUIDE_SEEN_KEY = addPrefix(`welcome_guide_seen`)

const open = ref(false)

function closeGuide() {
  open.value = false
  try {
    localStorage.setItem(GUIDE_SEEN_KEY, `1`)
  }
  catch { /* ignore */ }
}

function openStylePanel() {
  window.dispatchEvent(new CustomEvent(`mdlook:open-style-panel`))
  closeGuide()
}

onMounted(() => {
  try {
    open.value = localStorage.getItem(GUIDE_SEEN_KEY) !== `1`
  }
  catch {
    open.value = true
  }
})
</script>

<template>
  <Dialog :open="open" @update:open="value => !value && closeGuide()">
    <DialogContent class="sm:max-w-xl gap-0 p-0 overflow-hidden">
      <DialogHeader class="px-6 pt-6 pb-4 border-b">
        <DialogTitle>开始用 mdlook</DialogTitle>
        <DialogDescription>
          写 Markdown，选一套顺眼的主题，然后复制到公众号后台。
        </DialogDescription>
      </DialogHeader>

      <div class="px-6 py-5 grid gap-3">
        <div class="guide-row">
          <Palette class="guide-icon" />
          <div>
            <p class="guide-title">
              先定风格
            </p>
            <p class="guide-text">
              默认 Claude 阅读风，也可以在样式里导入 Linear、Apple、Figma 等 DESIGN.md 主题。
            </p>
          </div>
        </div>
        <div class="guide-row">
          <ImageUp class="guide-icon" />
          <div>
            <p class="guide-title">
              图片先粘贴进来
            </p>
            <p class="guide-text">
              直接复制图片后粘贴到编辑器，图床上传成功后再去公众号后台粘贴。
            </p>
          </div>
        </div>
        <div class="guide-row">
          <Copy class="guide-icon" />
          <div>
            <p class="guide-title">
              最后一键复制
            </p>
            <p class="guide-text">
              普通复制适合大多数文章；配置公众号后端后，可用“微信图片”先转换图片地址。
            </p>
          </div>
        </div>
        <div class="guide-row">
          <FolderOpen class="guide-icon" />
          <div>
            <p class="guide-title">
              Mac App 还能管本地文件
            </p>
            <p class="guide-text">
              桌面端可以打开 Markdown 文件夹、预览、编辑并保存回源文件。
            </p>
          </div>
        </div>
      </div>

      <DialogFooter class="px-6 py-4 border-t bg-muted/30 gap-2">
        <Button variant="outline" class="gap-2" @click="closeGuide">
          <X class="h-4 w-4" />
          稍后再说
        </Button>
        <Button class="gap-2" @click="openStylePanel">
          <Palette class="h-4 w-4" />
          去选主题
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

<style scoped>
.guide-row {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.75rem;
  align-items: start;
}

.guide-icon {
  width: 1rem;
  height: 1rem;
  margin: 0.25rem auto 0;
  color: hsl(var(--primary));
}

.guide-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.guide-text {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: hsl(var(--muted-foreground));
}
</style>