qy-better-lib 0.0.1

package/src/types/app.d.ts

@@ -0,0 +1,23 @@
+import Vue from "vue";
+
+declare global {
+  interface Window {}
+
+  interface ImportMetaEnv {
+    /** 接口默认入口 */
+    readonly VITE_DEFAULT_API: string;
+    // 根路径
+    readonly BASE_URL: string;
+    // 环境类型
+    readonly MODE: string;
+  }
+
+  interface ImportMeta {
+    readonly env: ImportMetaEnv;
+    glob<T = unknown>(
+      globPath: string | string[],
+      options?: any
+    ): Record<string, T>;
+    globEager<T = unknown>(globPath: string): Record<string, T>;
+  }
+}

package/src/types/echarts.d.ts

@@ -0,0 +1,5 @@
+declare module 'echarts' {
+  const echarts: any;
+  export default echarts;
+  export = echarts;
+}

package/src/types/index.d.ts

@@ -0,0 +1 @@
+declare type $TODO = any

package/src/types/json.d.ts

@@ -0,0 +1,4 @@
+declare module "*.json" {
+    const value: any;
+    export default value;
+}

package/src/types/scss.d.ts

@@ -0,0 +1,9 @@
+interface ICSSModuleExport {
+  [className: string]: string
+}
+
+declare const cssModuleExport: ICSSModuleExport
+
+declare module '*.scss' {
+  export = cssModuleExport
+}

package/src/types/vue.shim.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { ComponentOptions } from 'vue'
+  const Component: ComponentOptions
+  export default Component
+}

package/src/views/docs/docs-content.vue

@@ -0,0 +1,379 @@
+<script setup lang="ts">
+import type { DocItem } from './type';
+import { onMounted, onUnmounted, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import { on, off } from '@qy_better_lib/core';
+
+const props = defineProps<{
+  /**
+   * 选中的文档
+   */
+  selectedDoc: DocItem | null;
+  /**
+   * 渲染后的内容
+   */
+  renderedContent: string;
+}>();
+
+/**
+ * 声明MutationObserver变量
+ */
+let observer: any = null;
+
+// 监听内容变化
+watch(() => props.renderedContent, () => {
+  // 等待DOM更新
+  setTimeout(add_copy_buttons, 100);
+});
+
+// 组件挂载后添加复制按钮
+onMounted(() => {
+  add_copy_buttons();
+
+  // 使用MutationObserver监听DOM变化
+  observer = new MutationObserver(() => {
+    add_copy_buttons();
+  });
+
+  const content_element = document.querySelector('.doc-content');
+  if (content_element && observer) {
+    observer.observe(content_element, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  // 监听卡片点击事件
+  on(window, 'card-click', handle_card_click);
+});
+
+// 组件卸载时停止观察
+onUnmounted(() => {
+  if (observer) {
+    observer.disconnect();
+    observer = null;
+  }
+
+  // 移除卡片点击事件监听器
+  off(window, 'card-click', handle_card_click);
+});
+
+/**
+ * 复制到剪贴板
+ * @param text 要复制的文本
+ * @param id 按钮ID
+ */
+function copy_to_clipboard(text: string, id: string) {
+  navigator.clipboard.writeText(text).then(() => {
+    ElMessage({
+      message: '已复制',
+      type: 'success',
+      duration: 2000
+    });
+  }).catch(err => {
+    console.error('复制失败:', err);
+    ElMessage({
+      message: '复制失败',
+      type: 'error',
+      duration: 2000
+    });
+  });
+}
+
+/**
+ * 为代码块添加复制按钮
+ */
+function add_copy_buttons() {
+  const pre_elements = document.querySelectorAll('.doc-content pre');
+
+  pre_elements.forEach((pre, index) => {
+    // 避免重复添加
+    if (!pre.querySelector('.copy-btn')) {
+      const code_element = pre.querySelector('code');
+      if (code_element) {
+        const code_text = code_element.textContent || '';
+        const btn_id = `copy-btn-${index}-${Date.now()}`;
+
+        // 创建复制按钮
+        const copy_btn = document.createElement('button');
+        copy_btn.className = 'copy-btn';
+        copy_btn.id = btn_id;
+        copy_btn.textContent = '复制';
+        copy_btn.title = '复制代码到剪贴板';
+
+        // 添加点击事件
+        copy_btn.addEventListener('click', () => {
+          copy_to_clipboard(code_text, btn_id);
+        });
+
+        // 添加到pre元素
+        pre.appendChild(copy_btn);
+      }
+    }
+  });
+}
+
+/**
+ * 卡片点击事件处理函数
+ * @param event 自定义事件对象
+ */
+function handle_card_click(event: any) {
+  const doc_id = event.detail?.id;
+  if (doc_id) {
+    // 触发自定义事件，通知父组件更新选中的文档
+    window.dispatchEvent(new CustomEvent('update-selected-doc', { detail: { id: doc_id } }));
+  }
+}
+</script>
+
+<template>
+  <main class="docs-main">
+    <template v-if="selectedDoc" class="doc-detail">
+      <!-- 只对非功能概览文档显示标题 -->
+      <div v-if="selectedDoc.type !== 'overview'" class="doc-header">
+        <h2>{{ selectedDoc.name }}</h2>
+      </div>
+
+      <div class="doc-content">
+        <!-- 只对非功能概览文档显示详细说明标题 -->
+        <h3 v-if="selectedDoc.type !== 'overview'">详细说明</h3>
+        <div v-html="renderedContent"></div>
+      </div>
+    </template>
+    <div v-else class="doc-empty">
+      <div class="empty-content">
+        <p>请选择一个文档查看详情</p>
+      </div>
+    </div>
+  </main>
+</template>
+
+<style lang="scss" scoped>
+@use './styles/docs-content.scss';
+</style>
+
+<style lang="scss">
+pre {
+  background-color: var(--el-fill-color) !important;
+  border-radius: 8px !important;
+  padding: 16px !important;
+  margin: 20px 0 !important;
+  overflow-x: auto !important;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
+  font-size: 14px !important;
+  line-height: 1.6 !important;
+  box-shadow: var(--el-box-shadow-dark) !important;
+  position: relative !important;
+  border: none !important;
+}
+
+// 复制按钮样式
+.copy-btn {
+  position: absolute !important;
+  top: 8px !important;
+  right: 8px !important;
+  padding: 4px 12px !important;
+  background-color: var(--el-color-primary) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 4px !important;
+  font-size: 12px !important;
+  cursor: pointer !important;
+  transition: all 0.3s !important;
+  opacity: 0.7 !important;
+  z-index: 10 !important;
+
+  &:hover {
+    opacity: 1 !important;
+    background-color: var(--el-color-primary-light-3) !important;
+  }
+
+  &:active {
+    transform: translateY(1px) !important;
+  }
+}
+
+// 确保highlight.js的代码正确显示
+.docs-main .doc-detail .doc-content pre code {
+  background-color: transparent !important;
+  padding: 0 !important;
+  color: var(--el-text-color-regular) !important;
+  display: block !important;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
+  font-size: 14px !important;
+  line-height: 1.6 !important;
+}
+
+// 确保highlight.js的语法高亮样式生效
+.docs-main .doc-detail .doc-content pre.hljs {
+  background: transparent !important;
+  padding: 0 !important;
+}
+
+// 美化内联代码
+code {
+  background-color: var(--el-fill-color-light);
+  padding: 4px 8px;
+  border-radius: 3px;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 14px;
+  color: var(--el-color-danger);
+
+  &.language-typescript,
+  &.language-vue {
+    background-color: transparent;
+    padding: 0;
+  }
+}
+
+// 美化段落
+p {
+  margin: 12px 0;
+  color: var(--el-text-color-secondary);
+}
+
+// 美化列表
+ul,
+ol {
+  margin: 12px 0;
+  padding-left: 24px;
+
+  li {
+    margin: 10px 0;
+    color: var(--el-text-color-secondary);
+  }
+}
+
+// 美化标题层级
+h3:not(:first-child) {
+  margin: 48px 0 24px 0;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+  padding-bottom: 12px;
+  border-bottom: 2px solid var(--el-border-color);
+  text-transform: capitalize;
+}
+
+h4 {
+  margin: 36px 0 18px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--el-text-color-regular);
+  padding-left: 12px;
+  border-left: 4px solid var(--el-color-primary);
+}
+
+h5 {
+  padding: 16px 8px;
+  font-size: 16px;
+  font-weight: 600;
+  background-color: var(--el-fill-color-light);
+  padding-left: 16px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 4px;
+
+  &::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--el-color-success);
+  }
+}
+
+// 美化表格
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 16px 0;
+  font-size: 14px;
+
+  th,
+  td {
+    padding: 12px;
+    text-align: left;
+    border-bottom: 1px solid var(--el-border-color);
+    color: var(--el-text-color-secondary);
+  }
+
+  th {
+    background-color: var(--el-fill-color);
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+  }
+
+  tr:hover {
+    background-color: var(--el-fill-color-light);
+  }
+}
+
+// 美化链接
+a {
+  color: var(--el-color-primary);
+  text-decoration: none;
+  transition: color 0.2s;
+
+  &:hover {
+    color: var(--el-color-primary-light-3);
+    text-decoration: underline;
+  }
+}
+
+// 美化引用
+blockquote {
+  border-left: 4px solid var(--el-border-color);
+  margin: 16px 0;
+  padding: 12px 20px;
+  background-color: var(--el-fill-color);
+  color: var(--el-text-color-placeholder);
+}
+
+// 概览卡片样式
+.overview-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: min-content;
+  gap: 12px;
+  margin: 16px 0;
+}
+
+.overview-card {
+  flex: 0 0 calc(25% - 9px);
+  padding: 16px;
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+  border: 1px solid var(--el-border-color);
+  background-color: var(--el-fill-color);
+  border-radius: 4px;
+  transition: all 0.3s;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--el-fill-color-light);
+    color: var(--el-color-primary);
+    border-color: var(--el-color-primary);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
+  }
+
+  .card-name {
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--el-text-color-primary);
+  }
+
+  .card-desc {
+    font-size: 14px;
+    color: var(--el-text-color-secondary);
+    line-height: 1.4;
+  }
+}
+</style>

package/src/views/docs/docs-header.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import type { ModuleData } from './type';
+
+/**
+ * 搜索关键词
+ */
+const search_query = defineModel<string>('searchQuery', {
+  default: ''
+});
+
+/**
+ * 树形数据
+ */
+const props = defineProps<{
+  /**
+   * 树形数据
+   */
+  treeData: ModuleData[];
+}>();
+
+/**
+ * 搜索方法
+ */
+const search = (query: string, callback: (data: Array<{
+  value: string;
+  label: string;
+  module: string;
+  id: string;
+}>) => void) => {
+  // 从树形数据中提取搜索数据
+  const extract_search_data = (treeData: ModuleData[]): Array<{
+    value: string;
+    label: string;
+    module: string;
+    id: string;
+  }> => {
+    const data: Array<{
+      value: string;
+      label: string;
+      module: string;
+      id: string;
+    }> = [];
+
+    treeData.forEach(module => {
+      module.children.forEach(item => {
+        if (item.children && item.children.length > 0) {
+          // 处理有子菜单的项目
+          item.children.forEach(child => {
+            data.push({
+              value: child.label,
+              label: child.label + (child.description ? ` - ${child.description}` : ''),
+              module: module.label,
+              id: child.id
+            });
+          });
+        } else {
+          // 处理没有子菜单的项目
+          data.push({
+            value: item.label,
+            label: item.label + (item.description ? ` - ${item.description}` : ''),
+            module: module.label,
+            id: item.id
+          });
+        }
+      });
+    });
+
+    return data;
+  };
+
+  const search_data = extract_search_data(props.treeData);
+  const filtered_data = search_data.filter(item =>
+    item.value.toLowerCase().includes(query.toLowerCase()) ||
+    item.label.toLowerCase().includes(query.toLowerCase())
+  );
+
+  callback(filtered_data);
+};
+
+/**
+ * 选择建议项
+ */
+const handle_select = (item: {
+  value: string;
+  label: string;
+  module: string;
+  id: string;
+}) => {
+  search_query.value = item.value;
+  // 触发搜索事件，通知父组件
+  window.dispatchEvent(new CustomEvent('search-select', {
+    detail: { id: item.id }
+  }));
+};
+</script>
+
+<template>
+  <header class="docs-header">
+    <h1>组件库使用文档</h1>
+    <div class="search-box">
+      <el-autocomplete style="width: 400px;" v-model="search_query" :fetch-suggestions="search" @select="handle_select"
+        placeholder="输入关键词搜索文档..." class="search-input" clearable />
+    </div>
+  </header>
+</template>
+
+<style lang="scss" scoped>
+// Docs Header Styles
+.docs-header {
+  background-color: var(--el-bg-color);
+  padding: 20px 40px;
+  box-shadow: var(--el-box-shadow-dark);
+  display: flex;
+  gap: 16px;
+
+  h1 {
+    margin: 0;
+    color: var(--el-color-primary);
+    font-size: 20px;
+    font-weight: 500;
+    align-self: flex-start;
+  }
+
+  .search-box {
+    flex: 1 0 0;
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>

package/src/views/docs/docs-sidebar.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ModuleChild, ModuleData } from './type';
+
+defineProps<{
+  /**
+   * 树形数据
+   */
+  treeData: ModuleData[];
+  /**
+   * 选中的文档ID
+   */
+  selectedDocId: string | undefined;
+  /**
+   * 默认展开的菜单索引
+   */
+  defaultOpeneds?: string[];
+}>();
+
+const emit = defineEmits<{
+  /**
+   * 选择文档事件
+   */
+  (e: 'select', node: ModuleChild): void;
+}>();
+
+/**
+ * 处理节点点击
+ */
+function handle_node_click(node: ModuleChild) {
+  emit('select', node);
+}
+</script>
+
+<template>
+  <aside class="docs-sidebar">
+    <div class="sidebar-header">
+      <h2>文档列表</h2>
+    </div>
+    <div class="docs-list">
+      <el-menu :default-active="selectedDocId" :default-openeds="defaultOpeneds" unique-opened accordion>
+        <template v-for="module in treeData" :key="module.label">
+          <el-sub-menu :index="module.label">
+            <template #title>
+              <span>{{ module.label }}</span>
+            </template>
+            <template v-for="item in module.children" :key="item.id">
+              <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.id">
+                <template #title>
+                  <span>{{ item.label }}</span>
+                </template>
+                <el-menu-item :class="{ 'last-menu-item': child.description }" v-for="child in item.children"
+                  :key="child.id" :index="child.id" @click="handle_node_click(child)">
+                  <template #title>
+                    <div class="menu-item-content">
+                      <div class="menu-item-name">{{ child.label }}</div>
+                      <div v-if="child.description" class="menu-item-desc">{{ child.description }}</div>
+                    </div>
+                  </template>
+                </el-menu-item>
+              </el-sub-menu>
+              <el-menu-item v-else :index="item.id" @click="handle_node_click(item)">
+                <template #title>
+                  <span>{{ item.label }}</span>
+                </template>
+              </el-menu-item>
+            </template>
+          </el-sub-menu>
+        </template>
+      </el-menu>
+    </div>
+  </aside>
+</template>
+
+<style lang="scss" scoped>
+@use './styles/docs-sidebar.scss';
+</style>