@liujitcn/kratos-admin-system 0.0.1

package/dist/package/src/views/tool/project-doc/index.vue

@@ -0,0 +1,561 @@
+<template>
+  <div v-loading="loading" class="table-box project-doc-page">
+    <main class="project-doc-shell">
+      <aside class="document-navigation" aria-label="项目文档目录">
+        <header class="navigation-header">
+          <el-input v-model="keyword" clearable placeholder="搜索项目或路径" :prefix-icon="Search" />
+          <span class="document-count">{{ filteredDocumentCount }} / {{ documents.length }}</span>
+        </header>
+
+        <div v-if="documents.length" class="document-tree-scroll">
+          <el-tree
+            v-show="filteredDocumentCount > 0"
+            ref="documentTreeRef"
+            class="document-tree"
+            :data="documentTree"
+            node-key="key"
+            :props="{ children: 'children', label: 'label' }"
+            :current-node-key="selectedDocumentNodeKey"
+            :filter-node-method="filterTreeNode"
+            default-expand-all
+            highlight-current
+            @node-click="handleTreeNodeClick"
+          >
+            <template #default="{ data }">
+              <span class="document-tree-node" :class="`is-${data.kind}`" :title="data.path || data.label">
+                <el-icon v-if="data.kind === 'document'" class="document-tree-node__icon"><Document /></el-icon>
+                <span class="document-tree-node__label">{{ data.label }}</span>
+                <time
+                  v-if="data.kind === 'document' && data.document?.updated_at"
+                  class="document-tree-node__updated-at"
+                  :datetime="data.document.updated_at"
+                  :title="data.document.updated_at"
+                >
+                  {{ formatDocumentUpdatedAt(data.document.updated_at) }}
+                </time>
+                <code v-if="data.kind === 'project'">{{ data.projectKey }}</code>
+              </span>
+            </template>
+          </el-tree>
+          <el-empty v-if="filteredDocumentCount === 0" description="暂无匹配文档" :image-size="72" />
+        </div>
+        <el-empty v-else description="暂无项目文档" :image-size="72" />
+      </aside>
+
+      <section class="document-reader">
+        <div v-if="detailLoading && !selectedDocument" class="reader-loading">
+          <el-skeleton :rows="10" animated />
+        </div>
+        <template v-else-if="selectedDocument">
+          <div ref="readerScrollRef" v-loading="detailLoading" class="reader-scroll">
+            <div ref="markdownRef" @click="handleMarkdownClick">
+              <MarkdownRenderer
+                class="project-markdown"
+                :markdown="selectedDocument.content"
+                :allow-html="false"
+                :sanitize="true"
+                :enable-breaks="true"
+                :enable-latex="false"
+                :enable-animate="false"
+                :enable-shiki="false"
+                :enable-mermaid="false"
+                :is-dark="globalStore.isDark"
+                :show-code-block-header="true"
+                :sticky-code-block-header="false"
+                :enable-code-line-number="false"
+                code-max-height="480px"
+                :style="markdownRootStyle"
+              />
+            </div>
+          </div>
+        </template>
+        <el-empty v-else description="请选择一篇项目文档" />
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { Search } from "@element-plus/icons-vue";
+import type { TreeNodeData } from "element-plus";
+import { MarkdownRenderer } from "x-markdown-vue";
+import "x-markdown-vue/style";
+import { defProjectDocumentService } from "@liujitcn/kratos-admin-system/api/system/project_document";
+import type {
+  ProjectDocument,
+  ProjectDocumentDirectory,
+  ProjectDocumentListItem,
+  ProjectDocumentProject
+} from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/project_document";
+import { useGlobalStore } from "@liujitcn/kratos-admin-core/stores/runtime";
+
+defineOptions({
+  name: "ProjectDocument",
+  inheritAttrs: false
+});
+
+/** 项目文档树节点类型。 */
+type ProjectDocumentTreeNodeKind = "project" | "directory" | "document";
+
+/** 管理端项目文档树节点。 */
+interface ProjectDocumentTreeNode {
+  /** 树节点稳定标识。 */
+  key: string;
+  /** 树节点展示名称。 */
+  label: string;
+  /** 树节点类型。 */
+  kind: ProjectDocumentTreeNodeKind;
+  /** 所属项目标识。 */
+  projectKey: string;
+  /** 所属项目名称。 */
+  projectName: string;
+  /** 项目内相对路径。 */
+  path: string;
+  /** 文档叶子节点数据。 */
+  document?: ProjectDocumentListItem;
+  /** 子节点。 */
+  children: ProjectDocumentTreeNode[];
+}
+
+const globalStore = useGlobalStore();
+const loading = ref(false);
+const detailLoading = ref(false);
+const keyword = ref("");
+const projects = ref<ProjectDocumentProject[]>([]);
+const selectedDocumentId = ref("");
+const selectedDocument = ref<ProjectDocument>();
+const detailRequestToken = ref(0);
+const documentTreeRef = ref<InstanceType<typeof ElTree>>();
+const markdownRef = ref<HTMLElement>();
+const readerScrollRef = ref<HTMLElement>();
+const markdownRootStyle = {
+  padding: "0",
+  color: "inherit",
+  backgroundColor: "transparent"
+};
+const documentUpdatedAtFormatter = new Intl.DateTimeFormat("zh-CN", {
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  hourCycle: "h23"
+});
+const documentTree = computed<ProjectDocumentTreeNode[]>(() => projects.value.map(buildProjectTreeNode));
+const documents = computed<ProjectDocumentTreeNode[]>(() => flattenDocumentTree(documentTree.value));
+const documentPathIndex = computed(() => {
+  const index = new Map<string, ProjectDocumentListItem>();
+  for (const node of documents.value) {
+    if (node.document) {
+      index.set(`${node.projectKey}\0${node.path}`, node.document);
+    }
+  }
+  return index;
+});
+const filteredDocumentCount = computed(() => {
+  const search = keyword.value.trim().toLocaleLowerCase();
+  if (!search) return documents.value.length;
+  return documents.value.filter(node =>
+    [node.projectKey, node.projectName, node.path].some(value => value.toLocaleLowerCase().includes(search))
+  ).length;
+});
+const selectedDocumentNodeKey = computed(() => (selectedDocumentId.value ? buildDocumentNodeKey(selectedDocumentId.value) : ""));
+
+/** 加载项目文档目录并恢复当前选择。 */
+async function loadDocuments() {
+  loading.value = true;
+  try {
+    const response = await defProjectDocumentService.TreeProjectDocument({});
+    projects.value = response.projects ?? [];
+    const nextId = documents.value.some(node => node.document?.id === selectedDocumentId.value)
+      ? selectedDocumentId.value
+      : (documents.value[0]?.document?.id ?? "");
+    await nextTick();
+    documentTreeRef.value?.filter(keyword.value);
+    if (nextId) {
+      await selectDocument(nextId);
+    } else {
+      selectedDocumentId.value = "";
+      selectedDocument.value = undefined;
+      detailRequestToken.value += 1;
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 选择项目文档并加载 Markdown 详情。 */
+async function selectDocument(id: string, anchor = "") {
+  if (!id) return;
+  selectedDocumentId.value = id;
+  detailLoading.value = true;
+  const requestToken = detailRequestToken.value + 1;
+  detailRequestToken.value = requestToken;
+  try {
+    const detail = await defProjectDocumentService.GetProjectDocument({ id });
+    if (detailRequestToken.value === requestToken && selectedDocumentId.value === id) {
+      selectedDocument.value = detail;
+      await nextTick();
+      documentTreeRef.value?.setCurrentKey(buildDocumentNodeKey(id));
+      scrollToAnchor(anchor);
+    }
+  } finally {
+    if (detailRequestToken.value === requestToken) {
+      detailLoading.value = false;
+    }
+  }
+}
+
+/** 处理项目文档树节点选择。 */
+function handleTreeNodeClick(node: ProjectDocumentTreeNode) {
+  if (!node.document) return;
+  void selectDocument(node.document.id);
+}
+
+/** 按项目、目录或路径过滤项目文档树。 */
+function filterTreeNode(value: unknown, data: TreeNodeData) {
+  const node = data as ProjectDocumentTreeNode;
+  const search = String(value ?? "")
+    .trim()
+    .toLocaleLowerCase();
+  if (!search) return true;
+  return [node.label, node.projectKey, node.projectName, node.path].some(field => field.toLocaleLowerCase().includes(search));
+}
+
+/** 处理 Markdown 中的页内锚点、相对文档和外部链接。 */
+function handleMarkdownClick(event: MouseEvent) {
+  const target = event.target;
+  if (!(target instanceof Element)) return;
+  const anchor = target.closest("a");
+  const href = anchor?.getAttribute("href");
+  if (!anchor || !href || !selectedDocument.value) return;
+  if (href.startsWith("#")) {
+    event.preventDefault();
+    scrollToAnchor(href.slice(1));
+    return;
+  }
+  if (/^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(href)) {
+    event.preventDefault();
+    window.open(href, "_blank", "noopener,noreferrer");
+    return;
+  }
+
+  event.preventDefault();
+  const [rawPath, rawAnchor = ""] = href.split("#", 2);
+  const linkPath = decodeURIComponent(rawPath.split("?", 1)[0] ?? "");
+  const documentPath = resolveDocumentPath(selectedDocument.value.path, linkPath);
+  const linkedDocument = documentPathIndex.value.get(`${selectedDocument.value.project_key}\0${documentPath}`);
+  if (!linkedDocument) {
+    ElMessage.warning(`未收集引用文档：${documentPath}`);
+    return;
+  }
+  void selectDocument(linkedDocument.id, decodeURIComponent(rawAnchor));
+}
+
+/** 基于当前文档目录解析项目内相对路径。 */
+function resolveDocumentPath(currentPath: string, linkPath: string) {
+  const baseSegments = linkPath.startsWith("/") ? [] : currentPath.split("/").slice(0, -1);
+  for (const segment of linkPath.split("/")) {
+    if (!segment || segment === ".") continue;
+    if (segment === "..") {
+      baseSegments.pop();
+      continue;
+    }
+    baseSegments.push(segment);
+  }
+  return baseSegments.join("/");
+}
+
+/** 在当前 Markdown 阅读区滚动到指定标题锚点。 */
+function scrollToAnchor(anchor: string) {
+  if (!anchor) {
+    readerScrollRef.value?.scrollTo({ top: 0 });
+    return;
+  }
+  const decodedAnchor = decodeURIComponent(anchor);
+  const heading = markdownRef.value?.querySelector<HTMLElement>(`#${CSS.escape(decodedAnchor)}`);
+  heading?.scrollIntoView({ block: "start" });
+}
+
+/** 将 RFC3339 更新时间格式化为紧凑的本地时间。 */
+function formatDocumentUpdatedAt(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return documentUpdatedAtFormatter.format(date).replaceAll("/", "-");
+}
+
+/** 将接口项目节点转换为管理端树节点。 */
+function buildProjectTreeNode(project: ProjectDocumentProject): ProjectDocumentTreeNode {
+  return {
+    key: `project:${project.key}`,
+    label: project.name,
+    kind: "project",
+    projectKey: project.key,
+    projectName: project.name,
+    path: "",
+    children: [
+      ...(project.documents ?? []).map(document => buildDocumentTreeNode(document, project.key, project.name)),
+      ...(project.directories ?? []).map(directory => buildDirectoryTreeNode(directory, project.key, project.name))
+    ]
+  };
+}
+
+/** 递归转换接口目录节点。 */
+function buildDirectoryTreeNode(
+  directory: ProjectDocumentDirectory,
+  projectKey: string,
+  projectName: string
+): ProjectDocumentTreeNode {
+  return {
+    key: `directory:${projectKey}:${directory.path}`,
+    label: directory.name,
+    kind: "directory",
+    projectKey,
+    projectName,
+    path: directory.path,
+    children: [
+      ...(directory.documents ?? []).map(document => buildDocumentTreeNode(document, projectKey, projectName)),
+      ...(directory.directories ?? []).map(child => buildDirectoryTreeNode(child, projectKey, projectName))
+    ]
+  };
+}
+
+/** 将接口文档目录项转换为树叶子节点。 */
+function buildDocumentTreeNode(
+  document: ProjectDocumentListItem,
+  projectKey: string,
+  projectName: string
+): ProjectDocumentTreeNode {
+  return {
+    key: buildDocumentNodeKey(document.id),
+    label: document.path.split("/").at(-1) ?? document.path,
+    kind: "document",
+    projectKey,
+    projectName,
+    path: document.path,
+    document,
+    children: []
+  };
+}
+
+/** 构造文档树叶子节点稳定标识。 */
+function buildDocumentNodeKey(id: string) {
+  return `document:${id}`;
+}
+
+/** 将树中的文档叶子节点展开为导航节点。 */
+function flattenDocumentTree(nodes: ProjectDocumentTreeNode[]): ProjectDocumentTreeNode[] {
+  const documents: ProjectDocumentTreeNode[] = [];
+  for (const node of nodes) {
+    if (node.document) {
+      documents.push(node);
+    }
+    documents.push(...flattenDocumentTree(node.children));
+  }
+  return documents;
+}
+
+watch(keyword, value => {
+  documentTreeRef.value?.filter(value);
+});
+
+onMounted(() => {
+  void loadDocuments();
+});
+</script>
+
+<style scoped lang="scss">
+.project-doc-page {
+  box-sizing: border-box;
+  color: var(--admin-page-text-primary);
+  background: var(--el-bg-color-page);
+}
+
+.project-doc-shell {
+  display: grid;
+  flex: 1;
+  grid-template-columns: 340px minmax(0, 1fr);
+  min-width: 0;
+  min-height: 520px;
+  overflow: hidden;
+  background: var(--admin-page-card-bg);
+  border: 1px solid var(--admin-page-card-border);
+  border-radius: var(--admin-page-radius);
+  box-shadow: var(--admin-page-shadow);
+}
+
+.document-navigation,
+.document-reader {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.document-navigation {
+  border-right: 1px solid var(--admin-page-divider);
+}
+
+.navigation-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border-bottom: 1px solid var(--admin-page-divider);
+}
+
+.document-count {
+  flex: 0 0 auto;
+  font-size: 12px;
+  color: var(--admin-page-text-secondary);
+  white-space: nowrap;
+}
+
+.document-tree-scroll {
+  flex: 1;
+  min-height: 0;
+  padding: 8px;
+  overflow-y: auto;
+}
+
+.document-tree {
+  min-width: 100%;
+  color: var(--admin-page-text-primary);
+  background: transparent;
+  --el-tree-node-hover-bg-color: var(--el-fill-color-light);
+}
+
+.document-tree :deep(.el-tree-node__content) {
+  height: 34px;
+  padding-right: 8px;
+  border-radius: 4px;
+}
+
+.document-tree :deep(.el-tree-node.is-current > .el-tree-node__content) {
+  color: var(--el-color-primary);
+  background: var(--admin-page-accent-soft-bg);
+  box-shadow: inset 3px 0 0 var(--el-color-primary);
+}
+
+.document-tree-node {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  gap: 7px;
+  overflow: hidden;
+}
+
+.document-tree-node__icon {
+  flex: 0 0 auto;
+  font-size: 15px;
+  color: var(--admin-page-text-secondary);
+}
+
+.document-tree-node__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.document-tree-node.is-project .document-tree-node__label {
+  font-weight: 650;
+}
+
+.document-tree-node.is-directory .document-tree-node__label {
+  font-weight: 550;
+}
+
+.document-tree-node code,
+.document-tree-node__updated-at {
+  flex: 0 0 auto;
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--admin-page-text-secondary);
+}
+
+.document-tree-node__updated-at {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.reader-scroll {
+  flex: 1;
+  min-height: 0;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.project-markdown {
+  width: 100%;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.project-markdown :deep(.x-md-core > :first-child) {
+  margin-top: 0;
+}
+
+.project-markdown :deep(.x-md-core > :last-child) {
+  margin-bottom: 0;
+}
+
+.project-markdown :deep(h1),
+.project-markdown :deep(h2),
+.project-markdown :deep(h3),
+.project-markdown :deep(h4),
+.project-markdown :deep(h5),
+.project-markdown :deep(h6) {
+  color: var(--admin-page-text-primary);
+  scroll-margin-top: 16px;
+}
+
+.project-markdown :deep(a) {
+  color: var(--el-color-primary);
+}
+
+.project-markdown :deep(blockquote) {
+  border-left-color: var(--el-border-color);
+}
+
+.project-markdown :deep(table) {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.reader-loading {
+  padding: 24px;
+}
+
+@media (max-width: 900px) {
+  .project-doc-shell {
+    grid-template-columns: 280px minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 720px) {
+  .project-doc-shell {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .document-navigation {
+    height: 320px;
+    flex: 0 0 auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--admin-page-divider);
+  }
+
+  .document-reader {
+    min-height: 520px;
+  }
+
+  .reader-scroll {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+}
+</style>

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@liujitcn/kratos-admin-system",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "description": "kratos-admin system management module",
+  "license": "MIT",
+  "homepage": "https://github.com/liujitcn/kratos-admin",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:liujitcn/kratos-admin.git"
+  },
+  "dependencies": {
+    "@microsoft/fetch-event-source": "^2.0.1",
+    "@shikijs/core": "^3.23.0",
+    "sortablejs": "^1.15.2",
+    "swagger-ui-dist": "^5.32.9",
+    "vue-element-plus-x": "^2.0.3",
+    "x-markdown-vue": "^0.0.200",
+    "@liujitcn/kratos-admin-core": "0.0.1"
+  },
+  "peerDependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "@vueuse/core": "^14.3.0",
+    "element-plus": "^2.7.6",
+    "vue": "^3.5.35",
+    "vue-router": "^5.0.7"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/package/declarations/index.d.ts",
+      "default": "./dist/package/src/index.ts"
+    },
+    "./api/*": {
+      "types": "./dist/package/declarations/src/api/*.d.ts",
+      "default": "./dist/package/src/api/*.ts"
+    },
+    "./rpc/*": {
+      "types": "./dist/package/declarations/src/rpc/*.d.ts",
+      "default": "./dist/package/src/rpc/*.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/package",
+    "package.json",
+    "tsconfig.json"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "pnpm build:package",
+    "build:package": "node ../../../scripts/build-package.mjs .",
+    "type:check": "vue-tsc --noEmit --skipLibCheck"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": [
+    "../../../packages/core/types/generated/auto-imports.d.ts",
+    "../../../packages/core/types/generated/components.d.ts",
+    "../../../packages/core/src/typings/*.d.ts",
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "exclude": ["node_modules", "dist", "**/*.js"]
+}