create-lumfall 1.0.1 → 1.1.1

package/templates/document/app/pages/docs/components/doc-navbar.vue

@@ -1,103 +0,0 @@
-<template>
-  <header class="doc-navbar">
-    <div class="doc-navbar-left">
-      <button
-        v-if="showSidebarToggle"
-        class="doc-navbar-burger"
-        type="button"
-        aria-label="打开目录"
-        @click="$emit('toggle-sidebar')"
-      >
-        <icon-menu />
-      </button>
-
-      <router-link class="doc-navbar-brand" to="/view/docs">
-        <img class="doc-navbar-logo" :src="logo" alt="logo" />
-        <span class="doc-navbar-title">{{ site.title }}</span>
-      </router-link>
-
-      <nav class="doc-navbar-nav">
-        <template v-for="item in nav" :key="item.text">
-          <router-link
-            v-if="item.path"
-            :to="item.path"
-            class="doc-navbar-link"
-            :class="{ active: isActive(item) }"
-          >
-            {{ item.text }}
-          </router-link>
-          <a
-            v-else
-            :href="item.link"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="doc-navbar-link"
-          >
-            {{ item.text }}
-          </a>
-        </template>
-      </nav>
-    </div>
-
-    <div class="doc-navbar-right">
-      <button class="doc-search-trigger" type="button" @click="$emit('open-search')">
-        <icon-search />
-        <span class="doc-search-trigger-text">搜索文档</span>
-        <kbd>Ctrl K</kbd>
-      </button>
-
-      <button
-        class="doc-icon-btn"
-        type="button"
-        :aria-label="isDark ? '切换到亮色' : '切换到暗色'"
-        @click="handleToggleTheme"
-      >
-        <icon-sun-fill v-if="isDark" />
-        <icon-moon-fill v-else />
-      </button>
-
-      <a
-        v-if="site.repo"
-        class="doc-icon-btn"
-        :href="site.repo"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="GitHub 仓库"
-      >
-        <icon-github />
-      </a>
-    </div>
-  </header>
-</template>
-
-<script setup>
-import { computed, ref } from "vue";
-import { useRoute } from "vue-router";
-import docsConfig from "../docs-config";
-import { toggleTheme } from "../theme";
-import logo from "../assets/docs-logo.svg";
-
-defineProps({
-  showSidebarToggle: { type: Boolean, default: false },
-});
-
-defineEmits(["toggle-sidebar", "open-search"]);
-
-const route = useRoute();
-const site = docsConfig.site;
-const nav = docsConfig.nav;
-const isDark = ref(document.body.getAttribute("arco-theme") === "dark");
-
-const handleToggleTheme = () => {
-  isDark.value = toggleTheme() === "dark";
-};
-
-// 导航高亮：按 path 的前三级（/view/docs/<section>）匹配当前路由
-const isActive = (item) => {
-  if (!item.path) {
-    return false;
-  }
-  const section = item.path.split("/").slice(0, 4).join("/");
-  return route.path === section || route.path.startsWith(`${section}/`);
-};
-</script>

package/templates/document/app/pages/docs/components/doc-search.vue

@@ -1,131 +0,0 @@
-<template>
-  <Teleport to="body">
-    <Transition name="doc-fade">
-      <div v-if="modelValue" class="doc-search-mask" @click.self="close">
-        <div class="doc-search-panel">
-          <div class="doc-search-input-row">
-            <icon-search class="doc-search-icon" />
-            <input
-              ref="inputRef"
-              v-model="keyword"
-              class="doc-search-input"
-              type="text"
-              placeholder="搜索文档，如：配置 / 路由 / 插件"
-              @keydown="onKeydown"
-            />
-            <kbd class="doc-search-kbd">ESC</kbd>
-          </div>
-
-          <div class="doc-search-results">
-            <template v-if="keyword.trim()">
-              <div v-if="!results.length" class="doc-search-empty">
-                没有找到与「{{ keyword }}」相关的内容
-              </div>
-              <a
-                v-for="(item, i) in results"
-                :key="`${item.docPath}-${item.anchor}-${i}`"
-                class="doc-search-item"
-                :class="{ active: i === activeIndex }"
-                @click="go(item)"
-                @mouseenter="activeIndex = i"
-              >
-                <div class="doc-search-item-title" v-html="item.titleHtml"></div>
-                <div v-if="item.heading" class="doc-search-item-heading">
-                  <icon-right /> {{ item.heading }}
-                </div>
-                <div
-                  v-if="item.snippet"
-                  class="doc-search-item-snippet"
-                  v-html="item.snippet"
-                ></div>
-              </a>
-            </template>
-            <div v-else class="doc-search-empty">
-              输入关键词开始搜索，支持标题与正文匹配
-            </div>
-          </div>
-
-          <div class="doc-search-footer">
-            <span><kbd>↑</kbd><kbd>↓</kbd> 选择</span>
-            <span><kbd>Enter</kbd> 打开</span>
-            <span><kbd>ESC</kbd> 关闭</span>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup>
-import { computed, nextTick, ref, watch } from "vue";
-import { useRouter } from "vue-router";
-import docsConfig from "../docs-config";
-import { searchDocs } from "../search";
-
-const props = defineProps({
-  modelValue: { type: Boolean, default: false },
-});
-const emit = defineEmits(["update:modelValue"]);
-
-const router = useRouter();
-const keyword = ref("");
-const activeIndex = ref(0);
-const inputRef = ref(null);
-
-const results = computed(() => {
-  const list = searchDocs(keyword.value, docsConfig);
-  if (activeIndex.value >= list.length) {
-    activeIndex.value = 0;
-  }
-  return list;
-});
-
-watch(
-  () => props.modelValue,
-  (open) => {
-    if (open) {
-      keyword.value = "";
-      activeIndex.value = 0;
-      nextTick(() => inputRef.value && inputRef.value.focus());
-    }
-  }
-);
-
-watch(keyword, () => {
-  activeIndex.value = 0;
-});
-
-const close = () => emit("update:modelValue", false);
-
-const go = (item) => {
-  close();
-  const path = `/view/docs/${item.docPath}`;
-  if (item.anchor) {
-    router.push({ path, hash: `#${item.anchor}` });
-  } else {
-    router.push(path);
-  }
-};
-
-const onKeydown = (e) => {
-  if (e.key === "Escape") {
-    close();
-  } else if (e.key === "ArrowDown") {
-    e.preventDefault();
-    activeIndex.value = (activeIndex.value + 1) % Math.max(results.value.length, 1);
-  } else if (e.key === "ArrowUp") {
-    e.preventDefault();
-    activeIndex.value =
-      (activeIndex.value - 1 + results.value.length) %
-      Math.max(results.value.length, 1);
-  } else if (e.key === "Enter") {
-    const item = results.value[activeIndex.value];
-    if (item) {
-      go(item);
-    }
-  }
-};
-
-// 暴露给全局快捷键：layout 或页面可通过 ref 调 open()（本模板用 v-model 控制即可）
-defineExpose({ close });
-</script>

package/templates/document/app/pages/docs/components/doc-sidebar.vue

@@ -1,29 +0,0 @@
-<template>
-  <aside class="doc-sidebar">
-    <div v-for="group in sidebar" :key="group.text" class="doc-sidebar-group">
-      <div class="doc-sidebar-group-title">{{ group.text }}</div>
-      <router-link
-        v-for="item in group.items"
-        :key="item.path"
-        :to="item.path"
-        class="doc-sidebar-link"
-        :class="{ active: isActive(item.path) }"
-        @click="$emit('navigate')"
-      >
-        {{ item.text }}
-      </router-link>
-    </div>
-  </aside>
-</template>
-
-<script setup>
-import { useRoute } from "vue-router";
-import docsConfig from "../docs-config";
-
-defineEmits(["navigate"]);
-
-const route = useRoute();
-const sidebar = docsConfig.sidebar;
-
-const isActive = (path) => route.path === path || route.path === `${path}/`;
-</script>

package/templates/document/app/pages/docs/components/doc-toc.vue

@@ -1,21 +0,0 @@
-<template>
-  <div v-if="items.length" class="doc-toc">
-    <div class="doc-toc-title">页面内容</div>
-    <a
-      v-for="item in items"
-      :key="item.id"
-      :href="`#${item.id}`"
-      class="doc-toc-link"
-      :class="[`level-${item.level}`, { active: item.id === activeId }]"
-    >
-      {{ item.text }}
-    </a>
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  items: { type: Array, default: () => [] },
-  activeId: { type: String, default: "" },
-});
-</script>

package/templates/document/app/pages/docs/content.js

@@ -1,28 +0,0 @@
-// markdown 文档内容加载器。
-// 约定：文档放在项目根目录 docs/ 下（相对本文件 ../../../docs），
-// 构建时全部按原始文本打进产物，页面按路径读取并渲染。
-// 要调整内容目录位置时，只需要改 require.context 的第一个参数。
-const context = require.context("../../../docs", true, /\.md$/);
-
-const moduleMap = {};
-
-context.keys().forEach((key) => {
-  // key 形如 "./guide/introduction.md" → "guide/introduction"
-  const docPath = key.replace(/^\.\//, "").replace(/\.md$/, "");
-  const mod = context(key);
-  moduleMap[docPath] = typeof mod === "string" ? mod : mod.default ?? mod;
-});
-
-/**
- * 按 docs/ 相对路径取 markdown 原文
- * @param {string} docPath 例如 "guide/introduction"
- * @returns {string|undefined}
- */
-export function getDocSource(docPath) {
-  return moduleMap[docPath];
-}
-
-/** 全部文档：{ "guide/introduction": "# ...", ... } */
-export function getAllDocs() {
-  return moduleMap;
-}

package/templates/document/app/pages/docs/docs-config.js

@@ -1,68 +0,0 @@
-/**
- * 文档站配置 —— 使用本模板时主要改这个文件。
- *
- * 换成自己的站点只需两步：
- *   1. 改本文件的 site / nav / sidebar / hero / footer
- *   2. 把 docs/ 目录下的 markdown 换成自己的内容（目录结构随意，两级以内最佳）
- */
-
-// 站内文档的 URL 前缀 = /view/<页面目录名>
-const DOCS_BASE = "/view/docs";
-
-const doc = (path) => `${DOCS_BASE}/${path}`;
-
-export default {
-  // 站点信息
-  site: {
-    title: "Your Docs",
-    description: "基于 lumfall 的技术文档站",
-    // 右上角仓库链接，不需要就置空
-    repo: "",
-  },
-
-  // 顶部导航：path 为站内路由（高亮按第一级 section 匹配），link 为外链
-  nav: [{ text: "文档", path: doc("guide/introduction") }],
-
-  // 侧边栏分组。items 的 path 必须对应 docs/ 下真实存在的 markdown 文件
-  // （例如 doc("guide/introduction") 对应 docs/guide/introduction.md）
-  sidebar: [
-    {
-      text: "开始",
-      items: [
-        { text: "介绍", path: doc("guide/introduction") },
-        { text: "示例页面", path: doc("guide/example") },
-      ],
-    },
-  ],
-
-  // 首页 hero
-  hero: {
-    name: "Your Docs",
-    tagline: "基于 lumfall 的技术文档站模板",
-    text: "把 docs/ 目录下的 markdown 换成你的内容，再修改本文件（app/pages/docs/docs-config.js），即可拥有完整的文档站点。",
-    actions: [{ text: "开始使用", path: doc("guide/introduction"), theme: "brand" }],
-    features: [
-      {
-        icon: "📝",
-        title: "Markdown 驱动",
-        details:
-          "docs/ 目录即内容，支持相对链接、标题锚点、提示块、代码高亮与一键复制。",
-      },
-      {
-        icon: "🔍",
-        title: "站内搜索",
-        details: "Ctrl/Cmd + K 唤起，标题与正文加权匹配，纯前端实现无需后端。",
-      },
-      {
-        icon: "🌗",
-        title: "亮暗主题",
-        details: "跟随系统并支持手动切换，样式由 CSS 变量驱动，改一个变量即换主题色。",
-      },
-    ],
-  },
-
-  // 首页与文档页底部
-  footer: {
-    text: "基于 lumfall-document 模板构建",
-  },
-};

package/templates/document/app/pages/docs/docs.vue

@@ -1,24 +0,0 @@
-<template>
-  <a-config-provider :locale="zhCN">
-    <router-view />
-  </a-config-provider>
-</template>
-
-<script setup>
-import { onMounted } from "vue";
-import zhCN from "@arco-design/web-vue/es/locale/lang/zh-cn";
-import favicon from "./assets/docs-logo.svg";
-import "./styles/vars.less";
-import "./styles/docs.less";
-
-onMounted(() => {
-  // 框架通用模板没有 favicon 位，这里在运行时注入
-  if (!document.querySelector('link[rel="icon"]')) {
-    const link = document.createElement("link");
-    link.rel = "icon";
-    link.type = "image/svg+xml";
-    link.href = favicon;
-    document.head.appendChild(link);
-  }
-});
-</script>

package/templates/document/app/pages/docs/entry.docs.js

@@ -1,26 +0,0 @@
-import boot from "$lumfallBoot";
-import Docs from "./docs.vue";
-import { initTheme } from "./theme";
-
-// 尽早应用主题（localStorage / 系统偏好），避免首屏闪白
-initTheme();
-
-// 文档站是单个页面（app/pages/docs），站内路由：
-//   /view/docs            首页（hero + 特性卡片）
-//   /view/docs/<path>     文档页（path 对应 docs/<path>.md）
-// 页面目录名决定挂载路径（本页是 docs）；要改名时同步调整 docs-config.js 里的
-// DOCS_BASE 与上面两个路由 path。
-boot(Docs, {
-  routes: [
-    {
-      path: "/view/docs",
-      name: "doc-home",
-      component: () => import("./views/doc-home.vue"),
-    },
-    {
-      path: "/view/docs/:path(.*)",
-      name: "doc-page",
-      component: () => import("./views/doc-page.vue"),
-    },
-  ],
-});

package/templates/document/app/pages/docs/markdown/highlight.js

@@ -1,30 +0,0 @@
-// highlight.js 按需注册：只打包文档站实际用到的语言，控制 vendor 体积。
-import hljs from "highlight.js/lib/core";
-import javascript from "highlight.js/lib/languages/javascript";
-import typescript from "highlight.js/lib/languages/typescript";
-import xml from "highlight.js/lib/languages/xml";
-import css from "highlight.js/lib/languages/css";
-import less from "highlight.js/lib/languages/less";
-import json from "highlight.js/lib/languages/json";
-import bash from "highlight.js/lib/languages/bash";
-import yaml from "highlight.js/lib/languages/yaml";
-import markdown from "highlight.js/lib/languages/markdown";
-import plaintext from "highlight.js/lib/languages/plaintext";
-
-[
-  ["javascript", javascript],
-  ["typescript", typescript],
-  ["xml", xml],
-  ["css", css],
-  ["less", less],
-  ["json", json],
-  ["bash", bash],
-  ["yaml", yaml],
-  ["markdown", markdown],
-  ["plaintext", plaintext],
-].forEach(([name, language]) => hljs.registerLanguage(name, language));
-
-// highlight.js 11 不内置 vue 语法，用 xml 规则近似高亮 .vue / 模板块
-hljs.registerAliases(["vue", "html"], { languageName: "xml" });
-
-export default hljs;

package/templates/document/app/pages/docs/markdown/index.js

@@ -1,129 +0,0 @@
-// markdown-it 渲染器：标题锚点 + TOC 收集、代码块外壳（语言标签 + 复制按钮）、
-// 外链新窗口打开、文档内 .md 相对链接转站内路由、::: tip/warning/danger 提示块。
-import MarkdownIt from "markdown-it";
-import MarkdownItContainer from "markdown-it-container";
-import hljs from "./highlight";
-import { slugify, resolveDocHref } from "../utils";
-
-const md = new MarkdownIt({
-  html: true,
-  linkify: true,
-  breaks: false,
-  typographer: false,
-});
-
-// ::: <type> [自定义标题] 提示块（tip / info / warning / danger）
-const CONTAINER_DEFAULT_TITLES = {
-  tip: "提示",
-  info: "说明",
-  warning: "注意",
-  danger: "危险",
-};
-
-Object.keys(CONTAINER_DEFAULT_TITLES).forEach((type) => {
-  md.use(MarkdownItContainer, type, {
-    render(tokens, idx) {
-      if (tokens[idx].nesting === 1) {
-        const info = tokens[idx].info.trim().slice(type.length).trim();
-        const title = info || CONTAINER_DEFAULT_TITLES[type];
-        return (
-          `<div class="doc-container doc-container-${type}">` +
-          `<p class="doc-container-title">${md.utils.escapeHtml(title)}</p>`
-        );
-      }
-      return "</div>";
-    },
-  });
-});
-
-// 代码块：highlight.js 高亮（未识别语言则原样转义），外层加语言标签与复制按钮
-md.renderer.rules.fence = (tokens, idx) => {
-  const token = tokens[idx];
-  const lang = (token.info || "").trim().split(/\s+/)[0];
-
-  let codeHtml;
-  if (lang && hljs.getLanguage(lang)) {
-    try {
-      codeHtml = hljs.highlight(token.content, {
-        language: lang,
-        ignoreIllegals: true,
-      }).value;
-    } catch (e) {
-      codeHtml = md.utils.escapeHtml(token.content);
-    }
-  } else {
-    codeHtml = md.utils.escapeHtml(token.content);
-  }
-
-  const langLabel = md.utils.escapeHtml(lang || "text");
-  return (
-    `<div class="doc-code-block">` +
-    `<div class="doc-code-bar"><span class="doc-code-lang">${langLabel}</span>` +
-    `<button class="doc-code-copy" type="button">复制</button></div>` +
-    `<pre><code class="hljs">${codeHtml}</code></pre></div>\n`
-  );
-};
-
-// 标题开标签：生成唯一 id（供 TOC / 锚点 / 搜索跳转），并收集 h2/h3 进 TOC
-md.renderer.rules.heading_open = (tokens, idx, options, env, self) => {
-  const token = tokens[idx];
-  const level = Number(token.tag.slice(1));
-  const inline = tokens[idx + 1];
-  const text = (inline ? inline.content : "").trim();
-
-  const base = slugify(text) || `heading-${idx}`;
-  const count = env.slugCount[base] || 0;
-  env.slugCount[base] = count + 1;
-  const id = count ? `${base}-${count + 1}` : base;
-
-  token.attrSet("id", id);
-  env.currentHeadingId = id;
-  if (level >= 2 && level <= 3) {
-    env.toc.push({ level, text, id });
-  }
-  return self.renderToken(tokens, idx, options);
-};
-
-// 标题闭标签：在标题内部追加悬停可见的 # 锚点链接
-md.renderer.rules.heading_close = (tokens, idx, options, env, self) => {
-  const id = env.currentHeadingId || "";
-  const anchor = id
-    ? `<a class="doc-header-anchor" href="#${id}" aria-hidden="true">#</a>`
-    : "";
-  return anchor + self.renderToken(tokens, idx, options);
-};
-
-// 链接开标签：外链新窗口；文档内相对 .md 链接（./xx.md、../xx.md）转站内路由
-const defaultLinkOpen =
-  md.renderer.rules.link_open ||
-  ((tokens, idx, options, env, self) => self.renderToken(tokens, idx, options));
-
-md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
-  const token = tokens[idx];
-  const href = token.attrGet("href") || "";
-
-  if (/^https?:\/\//i.test(href)) {
-    token.attrSet("target", "_blank");
-    token.attrSet("rel", "noopener noreferrer");
-  } else if (!href.startsWith("#") && env.docPath) {
-    const resolved = resolveDocHref(env.docPath, href);
-    if (resolved) {
-      token.attrSet("href", resolved.path + resolved.hash);
-    }
-  }
-  return defaultLinkOpen(tokens, idx, options, env, self);
-};
-
-/**
- * 渲染 markdown
- * @param {string} source markdown 原文
- * @param {string} docPath 当前文档路径（相对 docs/），用于解析相对链接
- * @returns {{ html: string, toc: Array<{level:number, text:string, id:string}> }}
- */
-export function renderMarkdown(source, docPath) {
-  const env = { toc: [], slugCount: {}, docPath };
-  const html = md.render(source, env);
-  return { html, toc: env.toc };
-}
-
-export default md;