Skip to content

Commit 5569d04

Browse files
ChuChenchengChuChencheng
committed
feat: finish doc
1 parent 5f41b35 commit 5569d04

14 files changed

+348
-351
lines changed

‎.github/workflows/deploy.yml

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程
2+
#
3+
name: Deploy VitePress site to Pages
4+
5+
on:
6+
# 在针对 `main` 分支的推送上运行。如果你
7+
# 使用 `master` 分支作为默认分支，请将其更改为 `master`
8+
push:
9+
branches: [dev]
10+
11+
# 允许你从 Actions 选项卡手动运行此工作流程
12+
workflow_dispatch:
13+
14+
# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages
15+
permissions:
16+
contents: read
17+
pages: write
18+
id-token: write
19+
20+
# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
21+
# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
22+
concurrency:
23+
group: pages
24+
cancel-in-progress: false
25+
26+
jobs:
27+
# 构建工作
28+
build:
29+
runs-on: ubuntu-latest
30+
steps:
31+
- name: Checkout
32+
uses: actions/checkout@v4
33+
with:
34+
fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
35+
- uses: pnpm/action-setup@v3 # 如果使用 pnpm，请取消注释
36+
# - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释
37+
- name: Setup Node
38+
uses: actions/setup-node@v4
39+
with:
40+
node-version: 20
41+
cache: pnpm # 或 pnpm / yarn
42+
- name: Setup Pages
43+
uses: actions/configure-pages@v4
44+
- name: Install dependencies
45+
run: pnpm install # 或 pnpm install / yarn install / bun install
46+
- name: Build with VitePress
47+
run: pnpm docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build
48+
- name: Upload artifact
49+
uses: actions/upload-pages-artifact@v3
50+
with:
51+
path: site/.vitepress/dist
52+
53+
# 部署工作
54+
deploy:
55+
environment:
56+
name: github-pages
57+
url: ${{ steps.deployment.outputs.page_url }}
58+
needs: build
59+
runs-on: ubuntu-latest
60+
name: Deploy
61+
steps:
62+
- name: Deploy to GitHub Pages
63+
id: deployment
64+
uses: actions/deploy-pages@v4

‎README.md

+4-300
Large diffs are not rendered by default.

‎README_EN.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Vue-Tree 4.x
2+
3+
[简体中文](https://github.com/wsfe/vue-tree) | English
4+
5+
[API Document & Online Demo](https://wsfe.github.io/vue-tree/en/)
6+
7+
A high performance Vue3 tree component optimized using virtual list. It supports searching, node locating, drag-and-drop, etc. This component is built based on business, providing rich and powerful APIs which can meet your various needs for a tree component.
8+
9+
For Vue2 users, please use [`@wsfe/ctree`](https://github.com/wsfe/vue-tree/tree/2.x) (Chinese doc only)

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,10 @@
6464
"@faker-js/faker": "^8.4.1",
6565
"@vitejs/plugin-vue": "^5.0.5",
6666
"@vue/babel-preset-app": "^5.0.8",
67+
"@vue/repl": "^4.3.0",
6768
"@vue/test-utils": "^2.4.6",
6869
"@vue/vue3-jest": "^29.2.6",
70+
"@wsfe/vue-tree": "^4.0.1",
6971
"autoprefixer": "^10.4.19",
7072
"happy-dom": "^14.12.0",
7173
"less": "^4.2.0",

‎pnpm-lock.yaml

+14
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/.vitepress/components/Playground.vue

+116-13
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,135 @@
11
<template>
2+
<div class="header">
3+
<div class="header-title"><b>Vue Tree Playground</b></div>
4+
<div class="version"><VersionSelect :name="wsfePackageName" :packageName="wsfePackageName" v-model="treeVersion" /></div>
5+
<div class="version"><VersionSelect name="Vue" packageName="vue" v-model="vueVersion" /></div>
6+
<div class="version"><VersionSelect name="TypeScript" packageName="typescript" v-model="store.typescriptVersion" /></div>
7+
<button class="copy-button" @click="handleCopy">
8+
<span v-if="copied">Copied!</span>
9+
<span v-else>Copy sharable URL</span>
10+
</button>
11+
<a class="link" href="https://github.com/wsfe/vue-tree" target="_blank" rel="noreferrer noopener">GitHub↗</a>
12+
</div>
213
<Repl :editor="Monaco" :store="store" />
314
</template>
415

516
<script setup lang="ts">
6-
import { ref } from 'vue'
7-
import { Repl, useStore, useVueImportMap } from '@vue/repl'
17+
import { nextTick, ref, watch, watchEffect } from 'vue'
18+
import { Repl, useStore } from '@vue/repl'
819
import Monaco from '@vue/repl/monaco-editor'
920
10-
const query = new URLSearchParams(location.search)
21+
import VersionSelect from './VersionSelect.vue'
1122
12-
const {
13-
importMap: builtinImportMap,
14-
vueVersion,
15-
} = useVueImportMap()
23+
const wsfePackageName = '@wsfe/vue-tree'
24+
const importMapFile = 'import-map.json'
1625
1726
const store = useStore(
18-
{
19-
// pre-set import map
20-
builtinImportMap,
21-
vueVersion,
22-
},
27+
{},
2328
// initialize repl with previously serialized state
2429
location.hash,
2530
)
31+
32+
// #region tree version
33+
const treeVersion = ref('latest')
34+
35+
const importMap = store.getImportMap()
36+
const treeLink = importMap.imports?.[wsfePackageName]
37+
38+
if (treeLink) {
39+
const currentVersion = treeLink.match(/@wsfe\/vue-tree@(.+?)\//)?.[1]
40+
if (currentVersion) {
41+
treeVersion.value = currentVersion
42+
}
43+
}
44+
45+
watch(treeVersion, () => {
46+
const currentImportMap = store.getImportMap()
47+
store.setFiles({
48+
...store.getFiles(),
49+
[importMapFile]: JSON.stringify({
50+
...currentImportMap,
51+
imports: {
52+
...currentImportMap.imports,
53+
'@wsfe/vue-tree': `https://cdn.jsdelivr.net/npm/@wsfe/vue-tree@${treeVersion.value}/dist/vue-tree.mjs`,
54+
},
55+
}, null, 2),
56+
})
57+
})
58+
// #endregion
59+
60+
// #region vue version
61+
const vueVersion = ref(store.vueVersion)
62+
63+
if (!vueVersion.value) {
64+
vueVersion.value = 'latest'
65+
}
66+
67+
watch(vueVersion, () => {
68+
nextTick(() => {
69+
store.vueVersion = vueVersion.value
70+
})
71+
}, {
72+
immediate: true,
73+
})
74+
// #endregion
75+
76+
// persist state
77+
watchEffect(() => {
78+
const newHash = store.serialize()
79+
history.replaceState({}, '', newHash)
80+
})
81+
82+
const isCopying = ref(false)
83+
const copied = ref(false)
84+
85+
const handleCopy = async () => {
86+
if (isCopying.value) return
87+
isCopying.value = true
88+
try {
89+
await navigator.clipboard.writeText(location.href)
90+
copied.value = true
91+
setTimeout(() => {
92+
copied.value = false
93+
}, 1000)
94+
} finally {
95+
isCopying.value = false
96+
}
97+
}
2698
</script>
2799

28100
<style scoped>
101+
.header {
102+
width: 100%;
103+
height: 50px;
104+
border-bottom: 1px solid lightgray;
105+
display: flex;
106+
align-items: center;
107+
padding: 0 20px;
108+
}
109+
110+
.header-title {
111+
flex: 1;
112+
}
113+
114+
.version {
115+
font-size: 14px;
116+
margin-right: 20px;
117+
}
118+
119+
.copy-button {
120+
font-size: 12px;
121+
border: 1px solid lightgray;
122+
border-radius: 4px;
123+
padding: 0 8px;
124+
margin-right: 20px;
125+
width: 130px;
126+
}
127+
128+
.link:hover {
129+
color: #3ca877;
130+
}
131+
29132
.vue-repl {
30-
height: 100vh;
133+
height: calc(100vh - 50px);
31134
}
32135
</style>

‎site/.vitepress/components/PlaygroundLink.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
2-
<a :href="`/playground${serializedCode}`" target="_blank" rel="noreferrer noopener">{{ text || i18n.openInPlayground }}</a>
2+
<a :href="withBase(`/playground${serializedCode}`)" target="_blank" rel="noreferrer noopener">{{ text || i18n.openInPlayground }}</a>
33
</template>
44

55
<script setup lang="ts">
66
import { ref } from 'vue'
7-
import { useData } from 'vitepress'
7+
import { withBase, useData } from 'vitepress'
88
import { useStore } from '@vue/repl'
99
1010
import { data as sourceCodeMap } from '../data/code.data'

0 commit comments

Comments
 (0)