gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf(plugin-md-power): add support file-tree title

Browse Source
This commit is contained in:
pengzhanbo 2024-09-11 22:12:52 +08:00
parent 3a787897ab
commit cd6edc89a5
2 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
plugins/plugin-md-power/src/client/components/FileTreeItem.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { onMounted, onUnmounted, ref } from 'vue'
const props = defineProps<{
type: 'file' | 'folder'
@ -10,13 +10,22 @@ const props = defineProps<{
const active = ref(!!props.expanded)
const el = ref<HTMLElement>()
function toggle() {
active.value = !active.value
}
onMounted(() => {
if (!el.value || props.type !== 'folder')
return
el.value.querySelector('.tree-node.folder')?.addEventListener('click', () => {
active.value = !active.value
})
el.value.querySelector('.tree-node.folder')?.addEventListener('click', toggle)
})
onUnmounted(() => {
if (!el.value || props.type !== 'folder')
return
el.value.querySelector('.tree-node.folder')?.removeEventListener('click', toggle)
})
</script>
@ -45,6 +54,15 @@ onMounted(() => {
transition: border var(--t-color), background-color var(--t-color);
}
.vp-file-tree .vp-file-tree-title {
padding-left: 16px;
margin: -16px -16px 0;
font-weight: bold;
color: var(--vp-c-text-1);
border-bottom: solid 1px var(--vp-c-divider);
transition: color var(--t-color), border-color var(--t-color);
}
.vp-file-tree ul {
padding: 0 !important;
margin: 0 !important;

5
plugins/plugin-md-power/src/node/features/fileTree/index.ts
View File

@ -46,7 +46,10 @@ export async function fileTreePlugin(app: App, md: Markdown) {
token.tag = componentName
}
}
return '<div class="vp-file-tree">'
const info = tokens[idx].info.trim()
const title = info.slice(type.length).trim()
return `<div class="vp-file-tree">${title ? `<p class="vp-file-tree-title">${title}</p>` : ''}`
}
else {
return '</div>'