qy-better-lib 0.0.1

package/src/views/docs/hooks.ts

@@ -0,0 +1,600 @@
+import { reactive, computed, onMounted, onUnmounted } from 'vue';
+import MarkdownIt from 'markdown-it';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/gradient-dark.css';
+import type { DocsState, DocItem, ModuleChild, ModuleData } from './type';
+import { on, off } from '@qy_better_lib/core';
+import { guid } from '@qy_better_lib/core';
+import core_md from '@/document/core.md?raw';
+import hooks_md from '@/document/hooks.md?raw';
+import pc_components_md from '@/document/pc_components.md?raw';
+
+// 公共响应式状态
+export const state = reactive<DocsState>({
+  search_query: '',
+  all_docs: [],
+  selected_doc: null,
+  default_openeds: [],
+  doc_content_map: {}
+});
+
+
+
+/**
+ * 解析 MD 文件内容，提取函数和组件信息
+ * @param content MD 文件内容
+ * @param module 模块名称
+ * @returns 解析后的文档项数组
+ */
+/**
+ * 保存当前解析的文档项目
+ * @param docs 文档项目数组
+ * @param current_item 当前项目名称
+ * @param current_description 当前项目描述
+ * @param current_content 当前项目内容
+ * @param current_parent 当前项目父级ID
+ * @param module 模块名称
+ */
+function save_current_item(
+  docs: DocItem[],
+  current_item: string | null,
+  current_description: string,
+  current_content: string,
+  current_parent: string | null,
+  module: string
+): void {
+  if (current_item) {
+    const item_guid = guid();
+    state.doc_content_map[item_guid] = current_content.trim();
+
+    docs.push({
+      id: item_guid,
+      name: current_item,
+      description: current_description,
+      module,
+      type: module === 'pc_components' ? 'component' : 'function',
+      content: current_content.trim(),
+      path: `packages/${module}/DOCUMENTATION.md`,
+      parentId: current_parent
+    });
+  }
+}
+
+/**
+ * 处理hooks模块的一级菜单
+ * @param original_item 原始菜单文本
+ * @returns 处理后的项目信息
+ */
+function process_hooks_menu(original_item: string): { item: string; description: string; parent: null } {
+  const parts = original_item.split(' - ');
+  if (parts.length >= 2) {
+    const first_part = parts[0].trim();
+    const function_name = first_part.replace(/^\d+\.\s+/, '').trim();
+    const func_description = parts.slice(1).join(' - ').trim();
+    return {
+      item: `${func_description}(${function_name})`,
+      description: func_description,
+      parent: null
+    };
+  } else {
+    return {
+      item: original_item,
+      description: '',
+      parent: null
+    };
+  }
+}
+
+/**
+ * 处理core模块的一级菜单
+ * @param original_item 原始菜单文本
+ * @returns 处理后的项目信息
+ */
+function process_core_menu(original_item: string): { item: null; description: string; parent: string } {
+  return {
+    item: null,
+    description: '',
+    parent: original_item.replace(/^\d+\.\s+/, '')
+  };
+}
+
+/**
+ * 处理pc_components模块的一级菜单
+ * @param original_item 原始菜单文本
+ * @returns 处理后的项目信息
+ */
+function process_pc_components_menu(original_item: string): { item: string; description: string; parent: null } {
+  const original_item_clean = original_item.replace(/^\d+\.\s+/, '');
+  let item_name = original_item_clean;
+  let description = '';
+
+  if (original_item_clean.includes('-')) {
+    const parts = original_item_clean.split('-');
+    item_name = parts[0].trim();
+    description = parts.slice(1).join('-').trim();
+    return {
+      item: `${description}(${item_name})`,
+      description,
+      parent: null
+    };
+  } else {
+    return {
+      item: item_name,
+      description: '',
+      parent: null
+    };
+  }
+}
+
+/**
+ * 处理core模块的三级菜单
+ * @param original_item 原始菜单文本
+ * @returns 处理后的项目信息
+ */
+function process_level3_menu(original_item: string): { item: string; description: string } {
+  let item_name = original_item.replace(/^\d+\.\s+/, '');
+  let description = '';
+
+  if (item_name.includes('-')) {
+    const parts = item_name.split('-');
+    item_name = parts[0].trim();
+    description = parts.slice(1).join('-').trim();
+  }
+
+  return {
+    item: item_name,
+    description
+  };
+}
+
+/**
+ * 解析 MD 文件内容，提取函数和组件信息
+ * @param content MD 文件内容
+ * @param module 模块名称
+ * @returns 解析后的文档项数组
+ */
+function parse_md_content(content: string, module: string): DocItem[] {
+  const docs: DocItem[] = [];
+  const lines = content.split('\n');
+  let current_item: string | null = null;
+  let current_description = '';
+  let current_content = '';
+  let current_parent: string | null = null; // 用于core模块的一级菜单
+
+  lines.forEach(line => {
+    // 匹配一级菜单（以 ### 开头）
+    const level1_match = line.match(/^###\s+([^\n]+)$/);
+    // 匹配三级菜单（以 #### 开头，仅用于core模块）
+    const level3_match = line.match(/^####\s+([^\n]+)$/);
+
+    if (level1_match) {
+      // 如果已经有一个项目在解析中，先保存它
+      save_current_item(docs, current_item, current_description, current_content, current_parent, module);
+
+      // 开始解析新的一级菜单
+      const original_item = level1_match[1].trim();
+
+      if (module === 'hooks') {
+        const result = process_hooks_menu(original_item);
+        current_item = result.item;
+        current_description = result.description;
+        current_parent = result.parent;
+      } else if (module === 'core') {
+        const result = process_core_menu(original_item);
+        current_item = result.item;
+        current_description = result.description;
+        current_parent = result.parent;
+      } else {
+        const result = process_pc_components_menu(original_item);
+        current_item = result.item;
+        current_description = result.description;
+        current_parent = result.parent;
+      }
+      // 不包含标题行，只包含内容
+      current_content = '';
+    } else if (level3_match && module === 'core') {
+      // 如果已经有一个项目在解析中，先保存它
+      save_current_item(docs, current_item, current_description, current_content, current_parent, module);
+
+      // 开始解析新的三级菜单（仅用于core模块）
+      const result = process_level3_menu(level3_match[1].trim());
+      current_item = result.item;
+      current_description = result.description;
+      // 不包含标题行，只包含内容
+      current_content = '';
+    } else if (current_item) {
+      // 继续收集项目内容
+      current_content += line + '\n';
+    }
+  });
+
+  // 保存最后一个项目
+  save_current_item(docs, current_item, current_description, current_content, current_parent, module);
+
+  return docs;
+}
+
+/**
+ * 生成功能概览内容
+ * @param core_docs core模块文档
+ * @param hooks_docs hooks模块文档
+ * @param pc_components_docs pc_components模块文档
+ * @returns 功能概览内容
+ */
+function generate_overview_content(core_docs: DocItem[], hooks_docs: DocItem[], pc_components_docs: DocItem[]): string {
+  let overview_content = '';
+
+  // 生成 core 模块概览（只显示名称）
+  overview_content += '## Core 工具函数\n\n';
+  overview_content += '<div class="overview-cards">\n';
+  const core_parent_set = new Set<string>();
+  core_docs.forEach(doc => {
+    if (doc.parentId) {
+      core_parent_set.add(doc.parentId);
+    }
+  });
+  core_parent_set.forEach(parent_name => {
+    // 解析格式：数字处理工具 (number.ts)
+    const match = parent_name.match(/^([^\(]+)\s*\(([^\)]+)\)/);
+    if (match) {
+      const description = match[1].trim();
+      const file_name = match[2].split('.')[0].trim(); // 提取number.ts中的number
+      // 找到该父级下的第一个文档项
+      const first_doc = core_docs.find(doc => doc.parentId === parent_name);
+      const doc_id = first_doc ? first_doc.id : '';
+      overview_content += `<div class="overview-card" data-id="${doc_id}" onclick="window.dispatchEvent(new CustomEvent('card-click', { detail: { id: '${doc_id}' } }))"><div class="card-name">${file_name}</div><div class="card-desc">${description}</div></div>\n`;
+    } else {
+      // 如果格式不符合，直接显示原始名称
+      overview_content += `<div class="overview-card">${parent_name}</div>\n`;
+    }
+  });
+  overview_content += '</div>\n\n';
+
+  // 生成 hooks 模块概览（只显示名称）
+  overview_content += '## Hooks 函数\n\n';
+  overview_content += '<div class="overview-cards">\n';
+  hooks_docs.forEach(doc => {
+    // 解析格式：打印功能(use-print)
+    const match = doc.name.match(/^([^\(]+)\(([^\)]+)\)/);
+    if (match) {
+      const description = match[1].trim();
+      const function_name = match[2].trim();
+      overview_content += `<div class="overview-card" data-id="${doc.id}" onclick="window.dispatchEvent(new CustomEvent('card-click', { detail: { id: '${doc.id}' } }))"><div class="card-name">${function_name}</div><div class="card-desc">${description}</div></div>\n`;
+    } else {
+      // 如果格式不符合，直接显示原始名称
+      overview_content += `<div class="overview-card" data-id="${doc.id}" onclick="window.dispatchEvent(new CustomEvent('card-click', { detail: { id: '${doc.id}' } }))">${doc.name}</div>\n`;
+    }
+  });
+  overview_content += '</div>\n\n';
+
+  // 生成 pc_components 模块概览（只显示名称）
+  overview_content += '## PC 组件\n\n';
+  overview_content += '<div class="overview-cards">\n';
+  pc_components_docs.forEach(doc => {
+    // 解析格式：表格扩展组件(tableExtend)
+    const match = doc.name.match(/^([^\(]+)\(([^\)]+)\)/);
+    if (match) {
+      const description = match[1].trim();
+      const component_name = match[2].trim();
+      overview_content += `<div class="overview-card" data-id="${doc.id}" onclick="window.dispatchEvent(new CustomEvent('card-click', { detail: { id: '${doc.id}' } }))"><div class="card-name">${component_name}</div><div class="card-desc">${description}</div></div>\n`;
+    } else {
+      // 如果格式不符合，直接显示原始名称
+      overview_content += `<div class="overview-card" data-id="${doc.id}" onclick="window.dispatchEvent(new CustomEvent('card-click', { detail: { id: '${doc.id}' } }))">${doc.name}</div>\n`;
+    }
+  });
+  overview_content += '</div>\n';
+
+  return overview_content;
+}
+
+/**
+ * 设置默认选中的文档和展开的菜单
+ * @param parsed_docs 解析后的文档列表
+ */
+function set_default_selection(parsed_docs: DocItem[]): void {
+  if (parsed_docs.length > 0) {
+    // 首先查找功能概览文档
+    const overview_doc = parsed_docs.find(doc => doc.module === 'overview');
+    if (overview_doc) {
+      // 选中功能概览
+      state.selected_doc = overview_doc;
+      console.log('默认选中菜单:', state.selected_doc?.name);
+
+      // 设置默认展开的菜单
+      state.default_openeds = ['功能概览'];
+    } else {
+      // 找到core模块的第一个一级菜单对应的所有三级菜单
+      const core_module_docs = parsed_docs.filter(doc => doc.module === 'core');
+      if (core_module_docs.length > 0) {
+        // 选中第一个三级菜单
+        state.selected_doc = core_module_docs[0];
+        console.log('默认选中菜单:', state.selected_doc?.name);
+
+        // 设置默认展开的菜单
+        // 展开core模块菜单
+        state.default_openeds = ['Core 工具函数'];
+        // 找到对应的一级菜单ID并展开
+        if (core_module_docs[0].parentId) {
+          state.default_openeds.push(core_module_docs[0].parentId);
+        }
+      } else if (parsed_docs.length > 0) {
+        // 如果没有core模块的文档，选中第一个文档
+        state.selected_doc = parsed_docs[0];
+        console.log('默认选中菜单:', state.selected_doc?.name);
+
+        // 设置默认展开的菜单
+        const module_name = parsed_docs[0].module === 'hooks' ? 'Hooks 函数' : 'PC 组件';
+        state.default_openeds = [module_name];
+      }
+    }
+  }
+}
+
+/**
+ * 处理更新选中文档的事件
+ * @param event 自定义事件对象
+ */
+const handle_update_selected_doc = (event: CustomEvent<{ id: string }>) => {
+  const doc_id = event.detail?.id;
+  if (doc_id) {
+    state.selected_doc = state.all_docs.find(doc => doc.id === doc_id) || null;
+    console.log('通过卡片点击选中文档:', state.selected_doc?.name);
+  }
+};
+
+/**
+ * 处理菜单选择事件
+ * @param node 选中的菜单节点
+ */
+const handle_select = (node: ModuleChild): void => {
+  state.selected_doc = state.all_docs.find(doc => doc.id === node.id) || null;
+};
+
+/**
+ * 处理搜索选择事件
+ * @param event 自定义事件对象
+ */
+const handle_search_select = (event: CustomEvent<{ id: string }>) => {
+  const doc_id = event.detail?.id;
+  if (doc_id) {
+    state.selected_doc = state.all_docs.find(doc => doc.id === doc_id) || null;
+    console.log('通过搜索选中文档:', state.selected_doc?.name);
+  }
+};
+
+/**
+ * 文档管理Hook
+ */
+export function useDocs() {
+  /**
+   * Markdown渲染器
+   */
+  const md: any = new MarkdownIt({
+    html: true,
+    linkify: true,
+    highlight: function (str: string, lang: string) {
+      // 处理Vue相关的语言标记
+      if (lang === 'vue' || lang === 'template' || lang === 'vue-template') {
+        // 对于Vue代码，使用xml语言进行高亮
+        return hljs.highlight(str, { language: 'xml' }).value;
+      } else if (lang && hljs.getLanguage(lang)) {
+        try {
+          return hljs.highlight(str, { language: lang }).value;
+        } catch (__) {
+          // 如果高亮失败，返回原始代码
+          return md.utils.escapeHtml(str);
+        }
+      }
+      // 如果没有指定语言，返回原始代码
+      return md.utils.escapeHtml(str);
+    }
+  });
+
+  /**
+   * 渲染后的内容
+   */
+  const rendered_content = computed(() => {
+    if (!state.selected_doc) return '';
+    return md.render(state.selected_doc.content);
+  });
+
+  /**
+   * 树形数据
+   */
+  const tree_data = computed<ModuleData[]>(() => {
+    const modules = {
+      overview: { label: '功能概览', children: [] as ModuleChild[] },
+      core: { label: 'Core 工具函数', children: [] as ModuleChild[] },
+      hooks: { label: 'Hooks 函数', children: [] as ModuleChild[] },
+      pc_components: { label: 'PC 组件', children: [] as ModuleChild[] }
+    };
+
+    // 为core模块创建一级菜单和二级菜单结构
+    if (state.all_docs.length > 0) {
+      process_overview_module(modules);
+      process_core_module(modules);
+      process_hooks_module(modules);
+      process_pc_components_module(modules);
+    }
+
+    return Object.values(modules).filter(module => module.children.length > 0);
+  });
+
+  // 生命周期钩子
+  onMounted(() => {
+    try {
+      // 解析文档内容
+      const parsed_docs: DocItem[] = [];
+
+      // 解析 core 模块
+      const core_docs = parse_md_content(core_md, 'core');
+      parsed_docs.push(...core_docs);
+
+      // 解析 hooks 模块
+      const hooks_docs = parse_md_content(hooks_md, 'hooks');
+      parsed_docs.push(...hooks_docs);
+
+      // 解析 pc_components 模块
+      const pc_components_docs = parse_md_content(pc_components_md, 'pc_components');
+      parsed_docs.push(...pc_components_docs);
+
+      // 单独为功能概览生成内容（只显示名称）
+      const overview_id = guid();
+      const overview_content = generate_overview_content(core_docs, hooks_docs, pc_components_docs);
+
+      // 添加功能概览文档到 parsed_docs（单独解析，和其他菜单分开）
+      parsed_docs.unshift({
+        id: overview_id,
+        name: '功能概览',
+        description: '所有功能模块的概览',
+        module: 'overview',
+        type: 'overview',
+        content: overview_content,
+        path: '',
+        parentId: null
+      });
+
+      // 更新 all_docs
+      state.all_docs = parsed_docs;
+
+      // 设置默认选中的文档和展开的菜单
+      set_default_selection(parsed_docs);
+
+      // 监听更新选中文档的事件
+      on(window, 'update-selected-doc', handle_update_selected_doc as EventListener);
+      // 监听搜索选择事件
+      on(window, 'search-select', handle_search_select as EventListener);
+    } catch (error) {
+      console.error('Error loading documentation:', error);
+    }
+  });
+
+  // 组件卸载时清理事件监听器
+  onUnmounted(() => {
+    off(window, 'update-selected-doc', handle_update_selected_doc as EventListener);
+    off(window, 'search-select', handle_search_select as EventListener);
+    // 重置公共变量
+    reset_docs_variables();
+  });
+
+  /**
+ * 从文档内容中提取功能描述
+ * @param content 文档内容
+ * @param default_description 默认描述
+ * @returns 提取的功能描述
+ */
+function extract_function_description(content: string, default_description: string): string {
+  if (!content) return default_description;
+  
+  const lines = content.split('\n');
+  for (const line of lines) {
+    if (line.includes('**功能**: ')) {
+      const match = line.match(/\-\s*\*\*功能\*\*:\s*(.+)/);
+      if (match && match[1]) {
+        return match[1].trim();
+      }
+    }
+  }
+  return default_description;
+}
+
+/**
+ * 处理功能概览模块
+ * @param modules 模块数据对象
+ */
+function process_overview_module(modules: Record<string, { label: string; children: ModuleChild[] }>): void {
+  const overview_doc = state.all_docs.find(doc => doc.module === 'overview');
+  if (overview_doc) {
+    modules.overview.children.push({
+      id: overview_doc.id,
+      label: overview_doc.name,
+      description: overview_doc.description
+    });
+  }
+}
+
+/**
+ * 处理core模块
+ * @param modules 模块数据对象
+ */
+function process_core_module(modules: Record<string, { label: string; children: ModuleChild[] }>): void {
+  const core_module_docs = state.all_docs.filter(doc => doc.module === 'core');
+  if (core_module_docs.length > 0) {
+    // 按parentId分组
+    const parent_map = new Map<string, ModuleChild[]>();
+    core_module_docs.forEach(doc => {
+      if (doc.parentId) {
+        if (!parent_map.has(doc.parentId)) {
+          parent_map.set(doc.parentId, []);
+        }
+        
+        const extracted_description = extract_function_description(doc.content, doc.description);
+        parent_map.get(doc.parentId)?.push({
+          id: doc.id,
+          label: doc.name,
+          description: extracted_description
+        });
+      }
+    });
+
+    // 为每个一级菜单创建子菜单
+    parent_map.forEach((children, parent_name) => {
+      modules.core.children.push({
+        id: guid(),
+        label: parent_name,
+        description: '',
+        children
+      });
+    });
+  }
+}
+
+/**
+ * 处理hooks模块
+ * @param modules 模块数据对象
+ */
+function process_hooks_module(modules: Record<string, { label: string; children: ModuleChild[] }>): void {
+  const hooks_module_docs = state.all_docs.filter(doc => doc.module === 'hooks');
+  hooks_module_docs.forEach(doc => {
+    modules.hooks.children.push({
+      id: doc.id,
+      label: doc.name,
+      description: doc.description
+    });
+  });
+}
+
+/**
+ * 处理pc_components模块
+ * @param modules 模块数据对象
+ */
+function process_pc_components_module(modules: Record<string, { label: string; children: ModuleChild[] }>): void {
+  const pc_components_module_docs = state.all_docs.filter(doc => doc.module === 'pc_components');
+  pc_components_module_docs.forEach(doc => {
+    modules.pc_components.children.push({
+      id: doc.id,
+      label: doc.name,
+      description: doc.description
+    });
+  });
+}
+
+/**
+ * 重置所有公共变量
+ */
+function reset_docs_variables() {
+  state.search_query = '';
+  state.all_docs = [];
+  state.selected_doc = null;
+  state.default_openeds = [];
+  state.doc_content_map = {};
+}
+
+  return {
+    state,
+    rendered_content,
+    tree_data,
+    handle_select,
+    reset_docs_variables
+  };
+}

package/src/views/docs/index.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import DocsHeader from './docs-header.vue';
+import DocsSidebar from './docs-sidebar.vue';
+import DocsContent from './docs-content.vue';
+import { useDocs } from './hooks';
+
+// 使用文档管理Hook
+const { state, rendered_content, tree_data, handle_select } = useDocs();
+</script>
+
+<template>
+  <div class="docs-container">
+    <!-- 头部组件 -->
+    <DocsHeader v-model:searchQuery="state.search_query" :treeData="tree_data" />
+
+    <!-- 内容区 -->
+    <div class="docs-content">
+      <!-- 左侧文档列表组件 -->
+      <DocsSidebar :treeData="tree_data" :selectedDocId="state.selected_doc?.id" :defaultOpeneds="state.default_openeds"
+        @select="handle_select" />
+      <!-- 右侧文档详情组件 -->
+      <DocsContent :selectedDoc="state.selected_doc" :renderedContent="rendered_content" />
+    </div>
+
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use './styles/index.scss';
+</style>