vuepress-plugin-md-power 1.0.0-rc.144 → 1.0.0-rc.146

package/lib/client/components/FileTreeNode.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import { FadeInExpandTransition } from '@vuepress/helper/client'
 import { inject, ref } from 'vue'
 
-import '@vuepress/helper/transition/fade-in-height-expand.css'
-
 const props = defineProps<{
   type: 'file' | 'folder'
   filename: string
+  level: number
+  diff?: 'add' | 'remove'
   expanded?: boolean
   focus?: boolean
+  filepath?: string
 }>()
 
 const activeFileTreeNode = inject<Ref<string>>('active-file-tree-node', ref(''))
@@ -24,7 +24,7 @@ function nodeClick() {
   if (props.filename === '…' || props.filename === '...')
     return
 
-  onNodeClick(props.filename, props.type)
+  onNodeClick(props.filepath || props.filename, props.type)
 }
 
 function toggle(ev: MouseEvent) {
@@ -48,19 +48,21 @@ function toggle(ev: MouseEvent) {
         [type]: true,
         focus,
         expanded: type === 'folder' ? active : false,
-        active: type === 'file' ? activeFileTreeNode === filename : false,
+        active: type === 'file' ? activeFileTreeNode === filepath : false,
+        diff,
+        add: diff === 'add',
+        remove: diff === 'remove',
       }"
+      :style="{ '--file-tree-level': -level }"
       @click="toggle"
     >
       <slot name="icon" />
       <span class="name" :class="[type]">{{ filename }}</span>
       <span v-if="$slots.comment" class="comment"><slot name="comment" /></span>
     </p>
-    <FadeInExpandTransition>
-      <div v-if="type === 'folder'" v-show="active" class="group">
-        <slot />
-      </div>
-    </FadeInExpandTransition>
+    <div v-if="type === 'folder'" v-show="active" class="group">
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -100,24 +102,40 @@ function toggle(ev: MouseEvent) {
 
 .vp-file-tree .vp-file-tree-info::after {
   position: absolute;
-  top: 1px;
-  right: 0;
-  bottom: 1px;
-  left: -16px;
+  top: 0;
+  right: -16px;
+  bottom: 0;
+  left: calc(var(--file-tree-level) * 28px - 32px);
   z-index: 0;
   display: block;
   pointer-events: none;
   content: "";
   background-color: transparent;
-  border-radius: 6px;
   transition: background-color var(--vp-t-color);
 }
 
 .vp-file-tree .vp-file-tree-info.active::after,
-.vp-file-tree .vp-file-tree-info:hover::after {
+.vp-file-tree .vp-file-tree-info:not(.diff):hover::after {
   background-color: var(--vp-c-default-soft);
 }
 
+.vp-file-tree .vp-file-tree-info.diff::after {
+  padding-left: 4px;
+  font-size: 1.25em;
+}
+
+.vp-file-tree .vp-file-tree-info.diff.add::after {
+  color: var(--vp-c-success-1);
+  content: "+";
+  background-color: var(--vp-c-success-soft);
+}
+
+.vp-file-tree .vp-file-tree-info.diff.remove::after {
+  color: var(--vp-c-danger-1);
+  content: "-";
+  background-color: var(--vp-c-danger-soft);
+}
+
 .vp-file-tree .vp-file-tree-info.folder {
   cursor: pointer;
 }

package/lib/client/components/VPCodeTree.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { onMounted, provide, ref, useTemplateRef, watch } from 'vue'
+
+const props = withDefaults(defineProps<{
+  title?: string
+  height?: string
+  entryFile?: string
+}>(), { height: '320px' })
+
+const activeNode = ref(props.entryFile || '')
+const isEmpty = ref(true)
+const codePanel = useTemplateRef<HTMLDivElement>('codePanel')
+
+provide('active-file-tree-node', activeNode)
+provide('on-file-tree-node-click', (filepath: string, type: 'file' | 'folder') => {
+  if (type === 'file') {
+    activeNode.value = filepath
+  }
+})
+
+onMounted(() => {
+  watch(
+    () => activeNode.value,
+    () => {
+      if (codePanel.value) {
+        const items = Array.from(codePanel.value.querySelectorAll('.code-block-title'))
+        let hasActive = false
+        items.forEach((item) => {
+          if (item.getAttribute('data-title') === activeNode.value) {
+            item.classList.add('active')
+            hasActive = true
+          }
+          else {
+            item.classList.remove('active')
+          }
+        })
+        isEmpty.value = !hasActive
+      }
+    },
+    { immediate: true },
+  )
+})
+</script>
+
+<template>
+  <div class="vp-code-tree">
+    <div class="code-tree-panel" :style="{ 'max-height': props.height }">
+      <div v-if="title" class="code-tree-title" :title="title">
+        <span>{{ title }}</span>
+      </div>
+      <div class="vp-file-tree">
+        <slot name="file-tree" />
+      </div>
+    </div>
+    <div ref="codePanel" class="code-panel" :style="{ height: props.height }">
+      <slot />
+      <div v-if="isEmpty" class="code-tree-empty">
+        <span class="vpi-code-tree-empty" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.vp-code-tree {
+  width: 100%;
+  margin: 16px 0;
+  overflow: hidden;
+  border: solid 1px var(--vp-c-divider);
+  border-radius: 6px;
+}
+
+@media (min-width: 768px) {
+  .vp-code-tree {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.vp-code-tree .code-tree-panel {
+  display: flex;
+  flex-direction: column;
+  border-bottom: solid 1px var(--vp-c-divider);
+}
+
+@media (min-width: 768px) {
+  .vp-code-tree .code-tree-panel {
+    border-right: solid 1px var(--vp-c-divider);
+    border-bottom: none;
+  }
+}
+
+.vp-code-tree .code-tree-panel .code-tree-title {
+  height: 40px;
+  padding: 0 16px;
+  overflow: hidden;
+  font-weight: 500;
+  line-height: 40px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-bottom: solid 1px var(--vp-c-divider);
+}
+
+.vp-code-tree .code-tree-panel .vp-file-tree {
+  flex: 1 2;
+  margin: 0;
+  overflow: auto;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+}
+
+.vp-code-tree .code-tree-panel .vp-file-tree .vp-file-tree-info.file {
+  cursor: pointer;
+}
+
+.vp-code-tree .code-panel {
+  grid-column: span 2 / span 2;
+}
+
+.vp-code-tree .code-panel [class*="language-"] {
+  flex: 1 2;
+  margin: 16px 0 0;
+  overflow: auto;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.vp-code-tree .code-panel .code-block-title {
+  display: none;
+  height: 100%;
+}
+
+.vp-code-tree .code-panel .code-block-title.active {
+  display: flex;
+  flex-direction: column;
+}
+
+.vp-code-tree .code-panel .code-block-title .code-block-title-bar {
+  margin-top: 0;
+  border-radius: 0;
+}
+
+.vp-code-tree .code-panel .code-tree-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.vp-code-tree .code-panel .code-tree-empty .vpi-code-tree-empty {
+  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m198.24 62.63l15.68-17.25a8 8 0 0 0-11.84-10.76L186.4 51.86A95.95 95.95 0 0 0 57.76 193.37l-15.68 17.25a8 8 0 1 0 11.84 10.76l15.68-17.24A95.95 95.95 0 0 0 198.24 62.63M48 128a80 80 0 0 1 127.6-64.25l-107 117.73A79.63 79.63 0 0 1 48 128m80 80a79.55 79.55 0 0 1-47.6-15.75l107-117.73A79.95 79.95 0 0 1 128 208'/%3E%3C/svg%3E");
+
+  width: 128px;
+  height: 128px;
+  color: var(--vp-c-default-soft);
+}
+</style>

package/lib/client/components/VPField.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+defineProps<{
+  name: string
+  type?: string
+  required?: boolean
+  optional?: boolean
+  defaultValue?: string
+}>()
+</script>
+
+<template>
+  <div class="vp-field">
+    <p class="field-meta">
+      <span class="name">{{ name }}</span>
+      <span v-if="required || optional" :class="{ required, optional }">{{ required ? 'Required' : optional ? 'Optional' : '' }}</span>
+      <span v-if="type" class="type"><code>{{ type }}</code></span>
+    </p>
+    <p v-if="defaultValue" class="default-value">
+      <code>{{ defaultValue }}</code>
+    </p>
+    <div v-if="$slots.default" class="description">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.vp-field {
+  width: 100%;
+  margin: 16px 0;
+  transition: border-color var(--vp-t-color);
+}
+
+.vp-field + .vp-field {
+  padding-top: 8px;
+  border-top: solid 1px var(--vp-c-divider);
+}
+
+.vp-field .field-meta {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  margin: 8px 0;
+}
+
+.vp-field .field-meta .name {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.vp-field .field-meta .required,
+.vp-field .field-meta .optional {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 12px;
+  font-style: italic;
+  line-height: 1;
+  border-radius: 8px;
+}
+
+.vp-field .field-meta .required {
+  color: var(--vp-c-success-2);
+  border: solid 1px var(--vp-c-success-2);
+}
+
+.vp-field .field-meta .optional {
+  color: var(--vp-c-text-3);
+  border: solid 1px var(--vp-c-divider);
+}
+
+.vp-field .field-meta .type {
+  flex: 1 2;
+  text-align: right;
+}
+
+.vp-field .default-value {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.vp-field .description :where(p, ul, ol) {
+  margin: 8px 0;
+  line-height: 24px;
+  color: var(--vp-c-text-2);
+}
+
+.vp-field-group {
+  padding: 0 20px;
+  margin: 16px 0;
+  border: solid 1px var(--vp-c-divider);
+  border-radius: 6px;
+}
+</style>

package/lib/node/index.d.ts

@@ -153,6 +153,11 @@ interface PlotOptions {
     trigger?: 'hover' | 'click';
 }
 
+interface CodeTreeOptions {
+    icon?: FileTreeIconMode;
+    height?: string | number;
+}
+
 type ThemeOptions = BuiltinTheme | {
     light: BuiltinTheme;
     dark: BuiltinTheme;
@@ -268,6 +273,12 @@ interface MarkdownPowerPluginOptions {
      * @default false
      */
     chat?: boolean;
+    /**
+     * 是否启用 field / field-group 容器
+     *
+     * @default false
+     */
+    field?: boolean;
     /**
      * 是否启用 bilibili 视频嵌入
      *
@@ -336,6 +347,20 @@ interface MarkdownPowerPluginOptions {
      * @default false
      */
     fileTree?: boolean | FileTreeOptions;
+    /**
+     * 是否启用 代码树 容器语法 和 嵌入语法
+     *
+     * ```md
+     * ::: code-tree
+     * :::
+     * ```
+     *
+     * `@[code-tree](file_path)`
+     *
+     *
+     * @default false
+     */
+    codeTree?: boolean | CodeTreeOptions;
     /**
      * 是否启用 demo 语法
      */

package/lib/node/index.js

@@ -947,7 +947,7 @@ import { fs, logger, path } from "vuepress/utils";
 
 // src/node/utils/resolveAttrs.ts
 import { camelCase } from "@pengzhanbo/utils";
-var RE_ATTR_VALUE = /(?:^|\s+)(?<attr>[\w-]+)(?:=\s*(?<quote>['"])(?<value>.+?)\k<quote>)?(?:\s+|$)/;
+var RE_ATTR_VALUE = /(?:^|\s+)(?<attr>[\w-]+)(?:=(?<quote>['"])(?<valueWithQuote>.+?)\k<quote>|=(?<valueWithoutQuote>\S+))?(?:\s+|$)/;
 function resolveAttrs(info) {
   info = info.trim();
   if (!info)
@@ -956,17 +956,25 @@ function resolveAttrs(info) {
   const rawAttrs = info;
   let matched;
   while (matched = info.match(RE_ATTR_VALUE)) {
-    const { attr, value = true } = matched.groups;
+    const { attr, valueWithQuote, valueWithoutQuote } = matched.groups;
+    const value = valueWithQuote || valueWithoutQuote || true;
     let v = typeof value === "string" ? value.trim() : value;
     if (v === "true")
       v = true;
     else if (v === "false")
       v = false;
+    else if (v === '""' || v === "''")
+      v = "";
     attrs2[camelCase(attr)] = v;
     info = info.slice(matched[0].length);
   }
   return { attrs: attrs2, rawAttrs };
 }
+function resolveAttr(info, key) {
+  const pattern = new RegExp(`(?:^|\\s+)${key}(?:=(?<quote>['"])(?<valueWithQuote>.+?)\\k<quote>|=(?<valueWithoutQuote>\\S+))?(?:\\s+|$)`);
+  const groups = info.match(pattern)?.groups;
+  return groups?.valueWithQuote || groups?.valueWithoutQuote;
+}
 
 // src/node/enhance/imageSize.ts
 var REG_IMG = /!\[.*?\]\(.*?\)/g;
@@ -1146,8 +1154,121 @@ async function resolveImageSize(app, url, remote = false) {
 import { addViteOptimizeDepsInclude } from "@vuepress/helper";
 import { isPackageExists as isPackageExists3 } from "local-pkg";
 
-// src/node/container/index.ts
-import { isPlainObject as isPlainObject2 } from "@vuepress/helper";
+// src/node/container/codeTree.ts
+import path3 from "node:path";
+import { globSync } from "tinyglobby";
+import { removeLeadingSlash } from "vuepress/shared";
+
+// src/node/demo/supports/file.ts
+import fs2 from "node:fs";
+import { createRequire } from "node:module";
+import path2 from "node:path";
+import process from "node:process";
+var require2 = createRequire(process.cwd());
+function findFile(app, env, url) {
+  if (url.startsWith("/"))
+    return app.dir.source(url.slice(1));
+  if (url.startsWith("./") || url.startsWith("../"))
+    return app.dir.source(path2.dirname(env.filePathRelative), url);
+  if (url.startsWith("@source/")) {
+    return app.dir.source(url.slice("@source/".length));
+  }
+  try {
+    return require2.resolve(url);
+  } catch {
+    return url;
+  }
+}
+function readFileSync(filepath2) {
+  try {
+    return fs2.readFileSync(filepath2, "utf-8");
+  } catch {
+    return false;
+  }
+}
+function writeFileSync(filepath2, content) {
+  const dirname = path2.dirname(filepath2);
+  fs2.mkdirSync(dirname, { recursive: true });
+  fs2.writeFileSync(filepath2, content, "utf-8");
+}
+
+// src/node/embed/createEmbedRuleBlock.ts
+function createEmbedRuleBlock(md, {
+  type,
+  name = type,
+  syntaxPattern,
+  beforeName = "import_code",
+  ruleOptions = { alt: ["paragraph", "reference", "blockquote", "list"] },
+  meta,
+  content
+}) {
+  const MIN_LENGTH = type.length + 5;
+  const START_CODES = [64, 91, ...type.split("").map((c) => c.charCodeAt(0))];
+  md.block.ruler.before(
+    beforeName,
+    name,
+    (state, startLine, endLine, silent) => {
+      const pos = state.bMarks[startLine] + state.tShift[startLine];
+      const max = state.eMarks[startLine];
+      if (pos + MIN_LENGTH > max)
+        return false;
+      for (let i = 0; i < START_CODES.length; i += 1) {
+        if (state.src.charCodeAt(pos + i) !== START_CODES[i])
+          return false;
+      }
+      const content2 = state.src.slice(pos, max);
+      const match = content2.match(syntaxPattern);
+      if (!match)
+        return false;
+      if (silent)
+        return true;
+      const token = state.push(name, "", 0);
+      token.meta = meta(match);
+      token.content = content2;
+      token.map = [startLine, startLine + 1];
+      state.line = startLine + 1;
+      return true;
+    },
+    ruleOptions
+  );
+  md.renderer.rules[name] = (tokens, index, _, env) => {
+    const token = tokens[index];
+    token.content = content(token.meta, token.content, env);
+    return token.content;
+  };
+}
+
+// src/node/utils/parseRect.ts
+function parseRect(str, unit = "px") {
+  if (Number.parseFloat(str) === Number(str))
+    return `${str}${unit}`;
+  return str;
+}
+
+// src/node/utils/stringifyAttrs.ts
+import { isBoolean, isNull, isNumber, isString, isUndefined, kebabCase } from "@pengzhanbo/utils";
+function stringifyAttrs(attrs2, withUndefined = false) {
+  const result = Object.entries(attrs2).map(([key, value]) => {
+    const k = kebabCase(key);
+    if (isUndefined(value) || value === "undefined")
+      return withUndefined ? `:${k}="undefined"` : "";
+    if (isNull(value) || value === "null")
+      return withUndefined ? `:${k}="null"` : "";
+    if (value === "true")
+      value = true;
+    if (value === "false")
+      value = false;
+    if (isBoolean(value))
+      return value ? `${k}` : "";
+    if (isNumber(value))
+      return `:${k}="${value}"`;
+    if (isString(value) && (value[0] === "{" || value[0] === "["))
+      return `:${k}="${value.replaceAll('"', "'")}"`;
+    const hasDynamic = key[0] === ":";
+    return `${hasDynamic ? ":" : ""}${k}="${String(value)}"`;
+  }).filter(Boolean).join(" ");
+  return result ? ` ${result}` : "";
+}
 
 // src/node/container/createContainer.ts
 import container from "markdown-it-container";
@@ -1210,6 +1331,161 @@ function createContainerSyntaxPlugin(md, type, render) {
   md.renderer.rules[`${type}_container`] = render ?? defaultRender;
 }
 
+// src/node/container/codeTree.ts
+var UNSUPPORTED_FILE_TYPES = [
+  /* image */
+  "jpg",
+  "jpeg",
+  "png",
+  "gif",
+  "avif",
+  "webp",
+  /* media */
+  "mp3",
+  "mp4",
+  "ogg",
+  "m3u8",
+  "m3u",
+  "flv",
+  "webm",
+  "wav",
+  "flac",
+  "aac",
+  /* document */
+  "pdf",
+  "doc",
+  "docx",
+  "ppt",
+  "pptx",
+  "xls",
+  "xlsx"
+];
+function parseFileNodes(files) {
+  const nodes = [];
+  for (const file of files) {
+    const parts = removeLeadingSlash(file).split("/");
+    let node = nodes;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      const isFile = i === parts.length - 1;
+      let child = node.find((n) => n.filename === part);
+      if (!child) {
+        child = {
+          level: i + 1,
+          filename: part,
+          filepath: isFile ? file : void 0,
+          children: isFile ? void 0 : []
+        };
+        node.push(child);
+      }
+      if (!isFile && child.children)
+        node = child.children;
+    }
+  }
+  return nodes;
+}
+function codeTreePlugin(md, app, options = {}) {
+  const getIcon = (filename, type, mode) => {
+    mode ||= options.icon || "colored";
+    if (mode === "simple")
+      return type === "folder" ? defaultFolder : defaultFile;
+    return getFileIcon(filename, type);
+  };
+  function renderFileTree(nodes, mode) {
+    return nodes.map((node) => {
+      const props = {
+        filename: node.filename,
+        level: node.level,
+        type: node.children?.length ? "folder" : "file",
+        expanded: true,
+        filepath: node.filepath
+      };
+      return `<FileTreeNode${stringifyAttrs(props)}>
+  <template #icon><VPIcon name="${getIcon(node.filename, props.type, mode)}" /></template>
+  ${node.children?.length ? renderFileTree(node.children, mode) : ""}
+</FileTreeNode>`;
+    }).join("\n");
+  }
+  createContainerPlugin(md, "code-tree", {
+    before: (info, tokens, index) => {
+      const files = [];
+      let activeFile;
+      for (let i = index + 1; !(tokens[i].nesting === -1 && tokens[i].type === "container_code-tree_close"); i++) {
+        const token = tokens[i];
+        if (token.type === "fence" && token.tag === "code") {
+          const fenceInfo = md.utils.unescapeAll(token.info);
+          const title2 = resolveAttr(fenceInfo, "title");
+          if (title2) {
+            files.push(title2);
+            if (fenceInfo.includes(":active"))
+              activeFile = title2;
+          }
+        }
+      }
+      const { attrs: attrs2 } = resolveAttrs(info);
+      const { title, icon, height, entry } = attrs2;
+      const fileTreeNodes = parseFileNodes(files);
+      const entryFile = activeFile || entry || files[0];
+      const h = height || String(options.height);
+      return `<VPCodeTree${stringifyAttrs({ title, entryFile, height: h ? parseRect(h) : void 0 })}><template #file-tree>${renderFileTree(fileTreeNodes, icon)}</template>`;
+    },
+    after: () => "</VPCodeTree>"
+  });
+  createEmbedRuleBlock(md, {
+    type: "code-tree",
+    syntaxPattern: /^@\[code-tree([^\]]*)\]\(([^)]*)\)/,
+    meta: ([, info, dir]) => {
+      const { attrs: attrs2 } = resolveAttrs(info);
+      const h = attrs2.height || String(options.height);
+      return {
+        title: attrs2.title,
+        entryFile: attrs2.entry,
+        icon: attrs2.icon,
+        height: h ? parseRect(h) : void 0,
+        dir
+      };
+    },
+    content: ({ dir, icon, ...props }, _, env) => {
+      const codeTreeFiles = env.codeTreeFiles ??= [];
+      const root = findFile(app, env, dir);
+      const files = globSync("**/*", {
+        cwd: root,
+        onlyFiles: true,
+        dot: true,
+        ignore: ["**/node_modules/**", "**/.DS_Store", "**/.gitkeep"]
+      }).sort((a, b) => {
+        const al = a.split("/").length;
+        const bl = b.split("/").length;
+        return bl - al;
+      });
+      props.entryFile ||= files[0];
+      const codeContent = files.map((file) => {
+        const ext = path3.extname(file).slice(1);
+        if (UNSUPPORTED_FILE_TYPES.includes(ext)) {
+          return "";
+        }
+        const filepath2 = path3.join(root, file);
+        codeTreeFiles.push(filepath2);
+        const content = readFileSync(filepath2);
+        return `\`\`\`${ext || "txt"} title="${file}"
+${content}
+\`\`\``;
+      }).filter(Boolean).join("\n");
+      const fileTreeNodes = parseFileNodes(files);
+      return `<VPCodeTree${stringifyAttrs(props)}><template #file-tree>${renderFileTree(fileTreeNodes, icon)}</template>${md.render(codeContent, cleanMarkdownEnv(env))}</VPCodeTree>`;
+    }
+  });
+}
+function extendsPageWithCodeTree(page) {
+  const markdownEnv = page.markdownEnv;
+  const codeTreeFiles = markdownEnv.codeTreeFiles ?? [];
+  if (codeTreeFiles.length)
+    page.deps.push(...codeTreeFiles);
+}
+
+// src/node/container/index.ts
+import { isPlainObject as isPlainObject2 } from "@vuepress/helper";
+
 // src/node/container/align.ts
 var alignList = ["left", "center", "right", "justify"];
 function alignPlugin(md) {
@@ -1220,31 +1496,6 @@ function alignPlugin(md) {
   }
 }
 
-// src/node/utils/stringifyAttrs.ts
-import { isBoolean, isNull, isNumber, isString, isUndefined, kebabCase } from "@pengzhanbo/utils";
-function stringifyAttrs(attrs2, withUndefined = false) {
-  const result = Object.entries(attrs2).map(([key, value]) => {
-    const k = kebabCase(key);
-    if (isUndefined(value) || value === "undefined")
-      return withUndefined ? `:${k}="undefined"` : "";
-    if (isNull(value) || value === "null")
-      return withUndefined ? `:${k}="null"` : "";
-    if (value === "true")
-      value = true;
-    if (value === "false")
-      value = false;
-    if (isBoolean(value))
-      return value ? `${k}` : "";
-    if (isNumber(value))
-      return `:${k}="${value}"`;
-    if (isString(value) && (value[0] === "{" || value[0] === "["))
-      return `:${k}="${value.replaceAll('"', "'")}"`;
-    const hasDynamic = key[0] === ":";
-    return `${hasDynamic ? ":" : ""}${k}="${String(value)}"`;
-  }).filter(Boolean).join(" ");
-  return result ? ` ${result}` : "";
-}
-
 // src/node/container/card.ts
 function cardPlugin(md) {
   createContainerPlugin(md, "card", {
@@ -1448,6 +1699,23 @@ function demoWrapperPlugin(md) {
   });
 }
 
+// src/node/container/field.ts
+import { isUndefined as isUndefined2 } from "@pengzhanbo/utils";
+function fieldPlugin(md) {
+  createContainerPlugin(md, "field", {
+    before: (info) => {
+      const { attrs: attrs2 } = resolveAttrs(info);
+      const { name, type, required, optional, default: defaultValue } = attrs2;
+      const props = stringifyAttrs({ name, required, optional });
+      return `<VPField${props}${!isUndefined2(type) ? ` type="${type}"` : ""}${!isUndefined2(defaultValue) ? ` default-value="${defaultValue}"` : ""}>`;
+    },
+    after: () => "</VPField>"
+  });
+  createContainerPlugin(md, "field-group", {
+    before: () => '<div class="vp-field-group">'
+  });
+}
+
 // src/node/container/fileTree.ts
 import { removeEndingSlash } from "vuepress/shared";
 function parseFileTreeRawContent(content) {
@@ -1477,6 +1745,14 @@ function parseFileTreeNodeInfo(info) {
   let focus = false;
   let expanded = true;
   let type = "file";
+  let diff;
+  if (info.startsWith("++")) {
+    info = info.slice(2).trim();
+    diff = "add";
+  } else if (info.startsWith("--")) {
+    info = info.slice(2).trim();
+    diff = "remove";
+  }
   info = info.replace(RE_FOCUS, (_, matched) => {
     filename = matched;
     focus = true;
@@ -1493,7 +1769,7 @@ function parseFileTreeNodeInfo(info) {
     expanded = false;
     filename = removeEndingSlash(filename);
   }
-  return { filename, comment, focus, expanded, type };
+  return { filename, comment, focus, expanded, type, diff };
 }
 function fileTreePlugin(md, options = {}) {
   const getIcon = (filename, type, mode) => {
@@ -1504,7 +1780,7 @@ function fileTreePlugin(md, options = {}) {
   };
   const renderFileTree = (nodes, meta) => nodes.map((node) => {
     const { info, level, children } = node;
-    const { filename, comment, focus, expanded, type } = parseFileTreeNodeInfo(info);
+    const { filename, comment, focus, expanded, type, diff } = parseFileTreeNodeInfo(info);
     const isOmit = filename === "\u2026" || filename === "...";
     if (children.length === 0 && type === "folder") {
       children.push({ info: "\u2026", level: level + 1, children: [] });
@@ -1516,7 +1792,9 @@ function fileTreePlugin(md, options = {}) {
       expanded: nodeType === "folder" ? expanded : false,
       focus,
       type: nodeType,
-      filename
+      diff,
+      filename,
+      level
     };
     return `<FileTreeNode${stringifyAttrs(props)}>
 ${renderedIcon}${renderedComment}${children.length > 0 ? renderFileTree(children, meta) : ""}
@@ -1536,9 +1814,9 @@ ${renderedIcon}${renderedComment}${children.length > 0 ? renderFileTree(children
 }
 
 // src/node/container/langRepl.ts
-import { promises as fs2 } from "node:fs";
+import { promises as fs3 } from "node:fs";
 import { resolveModule } from "local-pkg";
-import { colors, logger as logger2, path as path2 } from "vuepress/utils";
+import { colors, logger as logger2, path as path4 } from "vuepress/utils";
 async function langReplPlugin(app, md, {
   theme,
   go = false,
@@ -1562,10 +1840,10 @@ async function langReplPlugin(app, md, {
   theme ??= { light: "github-light", dark: "github-dark" };
   const data = { grammars: {} };
   try {
-    const themesPath = path2.dirname(resolveModule("tm-themes"));
-    const grammarsPath = path2.dirname(resolveModule("tm-grammars"));
-    const readTheme = (theme2) => read(path2.join(themesPath, "themes", `${theme2}.json`));
-    const readGrammar = (grammar) => read(path2.join(grammarsPath, "grammars", `${grammar}.json`));
+    const themesPath = path4.dirname(resolveModule("tm-themes"));
+    const grammarsPath = path4.dirname(resolveModule("tm-grammars"));
+    const readTheme = (theme2) => read(path4.join(themesPath, "themes", `${theme2}.json`));
+    const readGrammar = (grammar) => read(path4.join(grammarsPath, "grammars", `${grammar}.json`));
     if (typeof theme === "string") {
       data.theme = await readTheme(theme);
     } else {
@@ -1590,7 +1868,7 @@ async function langReplPlugin(app, md, {
 }
 async function read(file) {
   try {
-    const content = await fs2.readFile(file, "utf-8");
+    const content = await fs3.readFile(file, "utf-8");
     return JSON.parse(content);
   } catch {
   }
@@ -2089,96 +2367,22 @@ async function containerPlugin(app, md, options) {
   if (options.fileTree) {
     fileTreePlugin(md, isPlainObject2(options.fileTree) ? options.fileTree : {});
   }
+  if (options.codeTree) {
+    codeTreePlugin(md, app, isPlainObject2(options.codeTree) ? options.codeTree : {});
+  }
   if (options.timeline)
     timelinePlugin(md);
   if (options.collapse)
     collapsePlugin(md);
   if (options.chat)
     chatPlugin(md);
+  if (options.field)
+    fieldPlugin(md);
 }
 
 // src/node/demo/demo.ts
 import container2 from "markdown-it-container";
 
-// src/node/embed/createEmbedRuleBlock.ts
-function createEmbedRuleBlock(md, {
-  type,
-  name = type,
-  syntaxPattern,
-  beforeName = "import_code",
-  ruleOptions = { alt: ["paragraph", "reference", "blockquote", "list"] },
-  meta,
-  content
-}) {
-  const MIN_LENGTH = type.length + 5;
-  const START_CODES = [64, 91, ...type.split("").map((c) => c.charCodeAt(0))];
-  md.block.ruler.before(
-    beforeName,
-    name,
-    (state, startLine, endLine, silent) => {
-      const pos = state.bMarks[startLine] + state.tShift[startLine];
-      const max = state.eMarks[startLine];
-      if (pos + MIN_LENGTH > max)
-        return false;
-      for (let i = 0; i < START_CODES.length; i += 1) {
-        if (state.src.charCodeAt(pos + i) !== START_CODES[i])
-          return false;
-      }
-      const content2 = state.src.slice(pos, max);
-      const match = content2.match(syntaxPattern);
-      if (!match)
-        return false;
-      if (silent)
-        return true;
-      const token = state.push(name, "", 0);
-      token.meta = meta(match);
-      token.content = content2;
-      token.map = [startLine, startLine + 1];
-      state.line = startLine + 1;
-      return true;
-    },
-    ruleOptions
-  );
-  md.renderer.rules[name] = (tokens, index, _, env) => {
-    const token = tokens[index];
-    token.content = content(token.meta, token.content, env);
-    return token.content;
-  };
-}
-
-// src/node/demo/supports/file.ts
-import fs3 from "node:fs";
-import { createRequire } from "node:module";
-import path3 from "node:path";
-import process from "node:process";
-var require2 = createRequire(process.cwd());
-function findFile(app, env, url) {
-  if (url.startsWith("/"))
-    return app.dir.source(url.slice(1));
-  if (url.startsWith("./") || url.startsWith("../"))
-    return app.dir.source(path3.dirname(env.filePathRelative), url);
-  if (url.startsWith("@source/")) {
-    return app.dir.source(url.slice("@source/".length));
-  }
-  try {
-    return require2.resolve(url);
-  } catch {
-    return url;
-  }
-}
-function readFileSync(filepath2) {
-  try {
-    return fs3.readFileSync(filepath2, "utf-8");
-  } catch {
-    return false;
-  }
-}
-function writeFileSync(filepath2, content) {
-  const dirname = path3.dirname(filepath2);
-  fs3.mkdirSync(dirname, { recursive: true });
-  fs3.writeFileSync(filepath2, content, "utf-8");
-}
-
 // src/node/demo/markdown.ts
 function markdownEmbed(app, md, env, { url, title, desc, codeSetting = "", expanded = false }) {
   const filepath2 = findFile(app, env, url);
@@ -2214,7 +2418,7 @@ var markdownContainerRender = {
 
 // src/node/demo/normal.ts
 import fs5 from "node:fs";
-import path5 from "node:path";
+import path6 from "node:path";
 
 // src/node/demo/supports/compiler.ts
 import { isPackageExists } from "local-pkg";
@@ -2295,8 +2499,8 @@ function importer(func) {
 
 // src/node/demo/supports/insertScript.ts
 var SCRIPT_RE = /<script.*?>/;
-function insertSetupScript({ export: name, path: path9 }, env) {
-  const imports = `import ${name ? `${name} from ` : ""}'${path9}';`;
+function insertSetupScript({ export: name, path: path10 }, env) {
+  const imports = `import ${name ? `${name} from ` : ""}'${path10}';`;
   const scriptSetup = env.sfcBlocks.scriptSetup ??= {
     type: "script",
     content: "<script setup>\n</script>",
@@ -2312,7 +2516,7 @@ ${imports}`);
 
 // src/node/demo/watcher.ts
 import fs4 from "node:fs";
-import path4 from "node:path";
+import path5 from "node:path";
 import { watch } from "chokidar";
 var renderDone = null;
 var renderCount = 0;
@@ -2348,30 +2552,30 @@ function demoWatcher(app, watchers) {
   if (!watcher) {
     watcher = watch([], { ignoreInitial: true });
   }
-  Object.keys(tasks).forEach((path9) => {
-    watcher.add(path9);
+  Object.keys(tasks).forEach((path10) => {
+    watcher.add(path10);
   });
   const code = readFileSync(app.dir.temp(target));
   if (code) {
     const paths = JSON.parse(code || "{}");
-    Object.entries(paths).forEach(([path9, output]) => {
-      watcher.add(path9);
-      tasks[path9] = output;
+    Object.entries(paths).forEach(([path10, output]) => {
+      watcher.add(path10);
+      tasks[path10] = output;
     });
   }
   updateWatchFiles(app);
-  watcher.on("change", (path9) => {
-    if (tasks[path9]) {
-      const code2 = readFileSync(path9);
+  watcher.on("change", (path10) => {
+    if (tasks[path10]) {
+      const code2 = readFileSync(path10);
       if (code2 === false)
         return;
       const source = parseEmbedCode(code2);
-      compileCode(source, tasks[path9]);
+      compileCode(source, tasks[path10]);
     }
   });
-  watcher.on("unlink", (path9) => {
-    delete tasks[path9];
-    watcher.unwatch(path9);
+  watcher.on("unlink", (path10) => {
+    delete tasks[path10];
+    watcher.unwatch(path10);
   });
   watchers.push({
     close: () => {
@@ -2380,17 +2584,17 @@ function demoWatcher(app, watchers) {
     }
   });
 }
-function addTask(app, path9, output) {
-  if (tasks[path9])
+function addTask(app, path10, output) {
+  if (tasks[path10])
     return;
-  tasks[path9] = output;
+  tasks[path10] = output;
   if (watcher) {
-    watcher.add(path9);
+    watcher.add(path10);
   }
   updateWatchFiles(app);
 }
 async function updateWatchFiles(app) {
-  await fs4.promises.mkdir(app.dir.temp(path4.dirname(target)), { recursive: true });
+  await fs4.promises.mkdir(app.dir.temp(path5.dirname(target)), { recursive: true });
   await fs4.promises.writeFile(app.dir.temp(target), JSON.stringify(tasks));
 }
 
@@ -2482,7 +2686,7 @@ function normalEmbed(app, md, env, { url, title, desc, codeSetting = "", expande
   }
   const source = parseEmbedCode(code);
   const prefix = (env.filePathRelative || "").replace(/\.md$/, "").replace(/\//g, "-");
-  const basename = path5.basename(filepath2).replace(/-|\./g, "_");
+  const basename = path6.basename(filepath2).replace(/-|\./g, "_");
   const name = `Demo${basename[0].toUpperCase()}${basename.slice(1)}`;
   const demo = { type: "normal", export: name, path: filepath2 };
   const output = app.dir.temp(target2, `${prefix}-${name}.js`);
@@ -2502,7 +2706,7 @@ var normalContainerRender = {
     const { url, title, desc, expanded = false } = meta;
     const name = `DemoContainer${url}`;
     const prefix = (env.filePathRelative || "").replace(/\.md$/, "").replace(/\//g, "-");
-    const output = app.dir.temp(path5.join(target2, `${prefix}-${name}.js`));
+    const output = app.dir.temp(path6.join(target2, `${prefix}-${name}.js`));
     env.demoFiles ??= [];
     if (!env.demoFiles.some((d) => d.path === output)) {
       const demo = { type: "normal", export: name, gitignore: true, path: output };
@@ -2580,7 +2784,7 @@ function normalizeAlias(info) {
 }
 
 // src/node/demo/vue.ts
-import path6 from "node:path";
+import path7 from "node:path";
 function vueEmbed(app, md, env, { url, title, desc, codeSetting = "", expanded = false }) {
   const filepath2 = findFile(app, env, url);
   const code = readFileSync(filepath2);
@@ -2588,8 +2792,8 @@ function vueEmbed(app, md, env, { url, title, desc, codeSetting = "", expanded =
     console.warn("[vuepress-plugin-md-power] Cannot read vue file:", filepath2);
     return "";
   }
-  const basename = path6.basename(filepath2).replace(/-|\./g, "_");
-  const ext = path6.extname(filepath2).slice(1);
+  const basename = path7.basename(filepath2).replace(/-|\./g, "_");
+  const ext = path7.extname(filepath2).slice(1);
   const name = `Demo${basename[0].toUpperCase()}${basename.slice(1)}`;
   const demo = { type: "vue", export: name, path: filepath2 };
   env.demoFiles ??= [];
@@ -2613,7 +2817,7 @@ var vueContainerRender = {
     const componentName = `DemoContainer${url}`;
     const prefix = (env.filePathRelative || "").replace(/\.md$/, "").replace(/\//g, "-");
     env.demoFiles ??= [];
-    const output = app.dir.temp(path6.join(target3, `${prefix}-${componentName}`));
+    const output = app.dir.temp(path7.join(target3, `${prefix}-${componentName}`));
     if (codeMap.vue || codeMap.js || codeMap.ts) {
       let scriptOutput = output;
       let content = "";
@@ -2670,7 +2874,7 @@ var STYLE_RE2 = /<style.*?>/;
 function transformImports(code, filepath2) {
   return code.replace(IMPORT_RE, (matched, url) => {
     if (url.startsWith("./") || url.startsWith("../")) {
-      return matched.replace(url, `${path6.resolve(path6.dirname(filepath2), url)}`);
+      return matched.replace(url, `${path7.resolve(path7.dirname(filepath2), url)}`);
     }
     return matched;
   });
@@ -2768,10 +2972,10 @@ function extendsPageWithDemo(page) {
   const markdownEnv = page.markdownEnv;
   const demoFiles = markdownEnv.demoFiles ?? [];
   page.deps.push(
-    ...demoFiles.filter(({ type }) => type === "markdown").map(({ path: path9 }) => path9)
+    ...demoFiles.filter(({ type }) => type === "markdown").map(({ path: path10 }) => path10)
   );
   (page.frontmatter.gitInclude ??= []).push(
-    ...demoFiles.filter(({ gitignore }) => !gitignore).map(({ path: path9 }) => path9)
+    ...demoFiles.filter(({ gitignore }) => !gitignore).map(({ path: path10 }) => path10)
   );
 }
 
@@ -2904,13 +3108,6 @@ function resolveVersions(versions) {
   };
 }
 
-// src/node/utils/parseRect.ts
-function parseRect(str, unit = "px") {
-  if (Number.parseFloat(str) === Number(str))
-    return `${str}${unit}`;
-  return str;
-}
-
 // src/node/embed/code/codepen.ts
 var codepenPlugin = (md) => {
   createEmbedRuleBlock(md, {
@@ -3001,7 +3198,7 @@ var replitPlugin = (md) => {
 };
 
 // src/node/embed/pdf.ts
-import { path as path7 } from "vuepress/utils";
+import { path as path8 } from "vuepress/utils";
 var pdfPlugin = (md) => {
   createEmbedRuleBlock(md, {
     type: "pdf",
@@ -3017,7 +3214,7 @@ var pdfPlugin = (md) => {
         width: attrs2.width ? parseRect(attrs2.width) : "100%",
         height: attrs2.height ? parseRect(attrs2.height) : "",
         ratio: attrs2.ratio ? parseRect(attrs2.ratio) : "",
-        title: path7.basename(src || "")
+        title: path8.basename(src || "")
       };
     },
     content: (meta) => `<PDFViewer${stringifyAttrs(meta)} />`
@@ -3622,11 +3819,11 @@ function inlineSyntaxPlugin(md, options) {
 
 // src/node/prepareConfigFile.ts
 import { ensureEndingSlash } from "@vuepress/helper";
-import { getDirname, path as path8 } from "vuepress/utils";
+import { getDirname, path as path9 } from "vuepress/utils";
 var { url: filepath } = import.meta;
 var __dirname = getDirname(filepath);
 var CLIENT_FOLDER = ensureEndingSlash(
-  path8.resolve(__dirname, "../client")
+  path9.resolve(__dirname, "../client")
 );
 async function prepareConfigFile(app, options) {
   const imports = /* @__PURE__ */ new Set();
@@ -3675,10 +3872,14 @@ async function prepareConfigFile(app, options) {
     imports.add(`import CanIUse from '${CLIENT_FOLDER}components/CanIUse.vue'`);
     enhances.add(`app.component('CanIUseViewer', CanIUse)`);
   }
-  if (options.fileTree) {
+  if (options.fileTree || options.codeTree) {
     imports.add(`import FileTreeNode from '${CLIENT_FOLDER}components/FileTreeNode.vue'`);
     enhances.add(`app.component('FileTreeNode', FileTreeNode)`);
   }
+  if (options.codeTree) {
+    imports.add(`import VPCodeTree from '${CLIENT_FOLDER}components/VPCodeTree.vue'`);
+    enhances.add(`app.component('VPCodeTree', VPCodeTree)`);
+  }
   if (options.artPlayer) {
     imports.add(`import ArtPlayer from '${CLIENT_FOLDER}components/ArtPlayer.vue'`);
     enhances.add(`app.component('ArtPlayer', ArtPlayer)`);
@@ -3716,6 +3917,10 @@ async function prepareConfigFile(app, options) {
   if (options.chat) {
     imports.add(`import '${CLIENT_FOLDER}styles/chat.css'`);
   }
+  if (options.field) {
+    imports.add(`import VPField from '${CLIENT_FOLDER}components/VPField.vue'`);
+    enhances.add(`app.component('VPField', VPField)`);
+  }
   return app.writeTemp(
     "md-power/config.js",
     `import { defineClientConfig } from 'vuepress/client'
@@ -3780,6 +3985,8 @@ function markdownPowerPlugin(options = {}) {
     extendsPage: (page) => {
       if (options.demo)
         extendsPageWithDemo(page);
+      if (options.codeTree)
+        extendsPageWithCodeTree(page);
     }
   };
 }

package/lib/shared/index.d.ts

@@ -152,6 +152,11 @@ interface PlotOptions {
     trigger?: 'hover' | 'click';
 }
 
+interface CodeTreeOptions {
+    icon?: FileTreeIconMode;
+    height?: string | number;
+}
+
 type ThemeOptions = BuiltinTheme | {
     light: BuiltinTheme;
     dark: BuiltinTheme;
@@ -267,6 +272,12 @@ interface MarkdownPowerPluginOptions {
      * @default false
      */
     chat?: boolean;
+    /**
+     * 是否启用 field / field-group 容器
+     *
+     * @default false
+     */
+    field?: boolean;
     /**
      * 是否启用 bilibili 视频嵌入
      *
@@ -335,6 +346,20 @@ interface MarkdownPowerPluginOptions {
      * @default false
      */
     fileTree?: boolean | FileTreeOptions;
+    /**
+     * 是否启用 代码树 容器语法 和 嵌入语法
+     *
+     * ```md
+     * ::: code-tree
+     * :::
+     * ```
+     *
+     * `@[code-tree](file_path)`
+     *
+     *
+     * @default false
+     */
+    codeTree?: boolean | CodeTreeOptions;
     /**
      * 是否启用 demo 语法
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.144",
+  "version": "1.0.0-rc.146",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -33,7 +33,7 @@
   "peerDependencies": {
     "artplayer": "^5.2.3",
     "dashjs": "^5.0.1",
-    "esbuild": "^0.25.3",
+    "esbuild": "^0.25.4",
     "hls.js": "^1.6.2",
     "less": "^4.3.0",
     "markdown-it": "^14.1.0",
@@ -61,15 +61,15 @@
     }
   },
   "dependencies": {
-    "@mdit/plugin-attrs": "^0.16.7",
-    "@mdit/plugin-footnote": "^0.16.8",
-    "@mdit/plugin-mark": "^0.16.0",
-    "@mdit/plugin-sub": "^0.16.0",
-    "@mdit/plugin-sup": "^0.16.0",
-    "@mdit/plugin-tab": "^0.16.0",
-    "@mdit/plugin-tasklist": "^0.16.0",
+    "@mdit/plugin-attrs": "^0.18.0",
+    "@mdit/plugin-footnote": "^0.18.0",
+    "@mdit/plugin-mark": "^0.18.0",
+    "@mdit/plugin-sub": "^0.18.0",
+    "@mdit/plugin-sup": "^0.18.0",
+    "@mdit/plugin-tab": "^0.18.0",
+    "@mdit/plugin-tasklist": "^0.18.0",
     "@pengzhanbo/utils": "^2.1.0",
-    "@vuepress/helper": "2.0.0-rc.98",
+    "@vuepress/helper": "2.0.0-rc.99",
     "@vueuse/core": "^13.1.0",
     "chokidar": "3.6.0",
     "image-size": "^2.0.2",
@@ -78,6 +78,7 @@
     "markdown-it-container": "^4.0.0",
     "nanoid": "^5.1.5",
     "shiki": "^3.3.0",
+    "tinyglobby": "0.2.13",
     "tm-grammars": "^1.23.16",
     "tm-themes": "^1.10.5",
     "vue": "^3.5.13"