@liujitcn/kratos-admin-system 0.0.1

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

@@ -0,0 +1,275 @@
+<template>
+  <div v-loading="loading" class="app-container code-gen-sub-page">
+    <div class="api-doc-page__layout">
+      <el-card class="code-gen-sub-card api-doc-page__navigation" shadow="never">
+        <template #header>
+          <div class="api-doc-page__panel-title">文档服务</div>
+        </template>
+        <div v-if="documents.length" class="api-doc-page__document-list">
+          <button
+            v-for="document in documents"
+            :key="document.key"
+            type="button"
+            class="api-doc-page__document"
+            :class="{ 'is-active': selectedDocumentKey === document.key }"
+            @click="handleDocumentChange(document.key)"
+          >
+            <span class="api-doc-page__document-name">{{ document.name }}</span>
+            <span class="api-doc-page__document-key">{{ document.key }}</span>
+          </button>
+        </div>
+        <el-empty v-else :image-size="56" description="暂无文档" />
+      </el-card>
+      <el-card class="code-gen-sub-card api-doc-page__card" shadow="never">
+        <template #header>
+          <div class="api-doc-page__panel-title">{{ selectedDocumentName }}</div>
+        </template>
+        <div ref="swaggerRootRef" class="api-doc-page__swagger" />
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SwaggerUIBundle from "swagger-ui-dist/swagger-ui-bundle.js";
+import "swagger-ui-dist/swagger-ui.css";
+import { getRequestAccessToken } from "@liujitcn/kratos-admin-core/request";
+import { defBaseApiService } from "@liujitcn/kratos-admin-system/api/system/base_api";
+import type { OpenApiServiceOption } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/base_api";
+
+const swaggerRootRef = ref<HTMLElement>();
+const loading = ref(true);
+const documents = ref<OpenApiServiceOption[]>([]);
+const selectedDocumentKey = ref("");
+const selectedDocumentName = computed(
+  () => documents.value.find(document => document.key === selectedDocumentKey.value)?.name ?? "API 文档"
+);
+
+/** 初始化携带当前登录令牌的 Swagger UI。 */
+function initializeSwaggerUI(documentKey: string) {
+  const swaggerRoot = swaggerRootRef.value;
+  if (!swaggerRoot) return;
+
+  loading.value = true;
+  swaggerRoot.replaceChildren();
+  SwaggerUIBundle({
+    domNode: swaggerRoot,
+    url: `/api/docs/openapi/${encodeURIComponent(documentKey)}`,
+    deepLinking: true,
+    displayOperationId: true,
+    displayRequestDuration: true,
+    docExpansion: "list",
+    defaultModelsExpandDepth: -1,
+    filter: true,
+    onComplete: () => {
+      loading.value = false;
+    },
+    persistAuthorization: false,
+    tryItOutEnabled: true,
+    validatorUrl: null,
+    requestInterceptor: async request => {
+      const accessToken = await getRequestAccessToken();
+      if (accessToken) {
+        request.headers = {
+          ...request.headers,
+          Authorization: accessToken
+        };
+      }
+      return request;
+    }
+  });
+}
+
+/** 切换当前展示的 OpenAPI 文档。 */
+function handleDocumentChange(documentKey: string) {
+  if (documentKey === selectedDocumentKey.value) return;
+  selectedDocumentKey.value = documentKey;
+  initializeSwaggerUI(documentKey);
+}
+
+/** 加载可访问的 OpenAPI 文档并初始化默认文档。 */
+async function loadOpenAPIDocuments() {
+  try {
+    const response = await defBaseApiService.OptionOpenApiService({});
+    documents.value = response.list;
+    const defaultDocument = response.list[0];
+    if (!defaultDocument) {
+      loading.value = false;
+      return;
+    }
+    selectedDocumentKey.value = defaultDocument.key;
+    initializeSwaggerUI(defaultDocument.key);
+  } catch {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  loadOpenAPIDocuments();
+});
+
+onBeforeUnmount(() => {
+  swaggerRootRef.value?.replaceChildren();
+});
+</script>
+
+<style scoped lang="scss">
+.code-gen-sub-page {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+.code-gen-sub-card {
+  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);
+}
+.api-doc-page__layout {
+  display: grid;
+  flex: 1;
+  grid-template-columns: 240px minmax(0, 1fr);
+  gap: 12px;
+  min-height: 0;
+  overflow: hidden;
+}
+.api-doc-page__navigation,
+.api-doc-page__card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+.api-doc-page__panel-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--admin-page-text-primary);
+  white-space: nowrap;
+}
+.api-doc-page__document-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.api-doc-page__document {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  width: 100%;
+  min-width: 0;
+  padding: 10px 12px;
+  font: inherit;
+  color: var(--admin-page-text-primary);
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+.api-doc-page__document:hover {
+  background: var(--el-fill-color-light);
+}
+.api-doc-page__document.is-active {
+  color: var(--admin-page-accent-soft-text);
+  background: var(--admin-page-accent-soft-bg);
+  box-shadow: inset 3px 0 0 var(--el-color-primary);
+}
+.api-doc-page__document-name,
+.api-doc-page__document-key {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.api-doc-page__document-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+.api-doc-page__document-key {
+  font-size: 12px;
+  color: var(--admin-page-text-secondary);
+}
+.api-doc-page__swagger {
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+}
+:deep(.api-doc-page__navigation .el-card__body),
+:deep(.api-doc-page__card .el-card__body) {
+  flex: 1;
+  min-height: 0;
+}
+:deep(.api-doc-page__navigation .el-card__body) {
+  padding: 8px;
+  overflow-y: auto;
+}
+:deep(.api-doc-page__card .el-card__body) {
+  height: 100%;
+  padding: 0;
+}
+:deep(.api-doc-page__navigation .el-empty) {
+  padding: 32px 0;
+}
+:deep(.swagger-ui) {
+  color: var(--el-text-color-primary);
+}
+:deep(.swagger-ui .information-container) {
+  display: none;
+}
+:deep(.swagger-ui .info .title),
+:deep(.swagger-ui .info p),
+:deep(.swagger-ui .opblock-tag),
+:deep(.swagger-ui .opblock .opblock-summary-description),
+:deep(.swagger-ui .opblock .opblock-summary-path),
+:deep(.swagger-ui .parameter__name),
+:deep(.swagger-ui .parameter__type),
+:deep(.swagger-ui table thead tr td),
+:deep(.swagger-ui table thead tr th) {
+  color: var(--el-text-color-primary);
+}
+:deep(.swagger-ui .scheme-container),
+:deep(.swagger-ui .opblock .opblock-section-header),
+:deep(.swagger-ui .opblock-body pre),
+:deep(.swagger-ui .model-box),
+:deep(.swagger-ui .dialog-ux .modal-ux) {
+  background: var(--el-fill-color-light);
+  box-shadow: none;
+}
+:deep(.swagger-ui .opblock),
+:deep(.swagger-ui .opblock-tag),
+:deep(.swagger-ui .model-box),
+:deep(.swagger-ui .dialog-ux .modal-ux),
+:deep(.swagger-ui .dialog-ux .modal-ux-content) {
+  border-color: var(--el-border-color-light);
+}
+:deep(.swagger-ui input[type="text"]),
+:deep(.swagger-ui textarea),
+:deep(.swagger-ui select) {
+  color: var(--el-text-color-primary);
+  background: var(--el-bg-color);
+  border-color: var(--el-border-color);
+}
+
+@media (width <= 720px) {
+  .code-gen-sub-page {
+    height: auto;
+    min-height: 100%;
+  }
+  .api-doc-page__layout {
+    display: flex;
+    flex-direction: column;
+    overflow: visible;
+  }
+  .api-doc-page__navigation {
+    flex: 0 0 auto;
+    max-height: 240px;
+  }
+  .api-doc-page__card {
+    min-height: 600px;
+  }
+}
+</style>

package/dist/package/src/views/tool/code-gen/code-preview/index.vue

@@ -0,0 +1,233 @@
+<!-- 代码生成文件预览 -->
+<template>
+  <div class="app-container code-gen-code-preview-page">
+    <el-card class="code-gen-sub-card" shadow="never">
+      <div v-if="BUTTONS['tool:code-gen-table:generate']" class="code-gen-toolbar">
+        <div class="code-gen-code-preview-actions">
+          <el-button :icon="Clock" :disabled="!progressTaskAvailable" @click="handleOpenProgress">最近任务</el-button>
+          <el-button :icon="Promotion" type="primary" :loading="generating" @click="handleGenerate">生成</el-button>
+        </div>
+      </div>
+
+      <el-alert v-if="previewError" class="code-gen-code-preview-alert" :title="previewError" type="warning" :closable="false" />
+      <CodePreviewPane v-if="loading || files.length" class="code-gen-code-preview-table" :files="files" :loading="loading" />
+      <el-empty v-else class="code-gen-code-preview-empty" description="暂无生成文件，请先确认表配置和 Proto 接口配置后再生成或预览" />
+    </el-card>
+
+    <CodeGenProgressDialog
+      v-model="progressDialogVisible"
+      :task-id="progressTaskId"
+      @update:model-value="handleProgressDialogVisibleChange"
+      @completed="handleProgressCompleted"
+      @unavailable="handleProgressUnavailable"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { Clock, Promotion } from "@element-plus/icons-vue";
+import { useRoute } from "vue-router";
+import { useAuthButtons } from "@liujitcn/kratos-admin-core/auth";
+import { useTabsStore } from "@liujitcn/kratos-admin-core/stores/runtime";
+import { defCodeGenService } from "@liujitcn/kratos-admin-system/api/system/code_gen";
+import { defCodeGenTableService } from "@liujitcn/kratos-admin-system/api/system/code_gen_table";
+import type { CodeGenPreviewFile } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/code_gen";
+import type { CodeGenTableForm } from "@liujitcn/kratos-admin-system/rpc/system/admin/v1/code_gen_table";
+import { CodeGenTableStatus } from "@liujitcn/kratos-admin-system/rpc/system/common/v1/enum";
+import CodeGenProgressDialog from "../components/CodeGenProgressDialog.vue";
+import CodePreviewPane from "../components/CodePreviewPane.vue";
+
+defineOptions({
+  name: "CodeGenCodePreview",
+  inheritAttrs: false
+});
+
+const codeGenTaskStorageKey = "code-gen-progress-task-id";
+const codeGenProgressDialogVisibleStorageKey = "code-gen-progress-dialog-visible";
+const codeGenProgressSelectedTableIdsStorageKey = "code-gen-progress-selected-table-ids";
+const codeGenStatusDisabled = CodeGenTableStatus.DISABLED_CGTS;
+
+const route = useRoute();
+const tabsStore = useTabsStore();
+const { BUTTONS } = useAuthButtons();
+const table = ref<CodeGenTableForm>();
+const files = ref<CodeGenPreviewFile[]>([]);
+const loading = ref(false);
+const previewError = ref("");
+const progressTaskId = ref(typeof window === "undefined" ? "" : (window.sessionStorage.getItem(codeGenTaskStorageKey) ?? ""));
+const progressDialogVisible = ref(
+  !!progressTaskId.value &&
+    typeof window !== "undefined" &&
+    window.sessionStorage.getItem(codeGenProgressDialogVisibleStorageKey) === "true"
+);
+const progressTaskAvailable = ref(!!progressTaskId.value);
+const generating = ref(!!progressTaskId.value);
+
+/** 当前代码生成表配置 ID。 */
+const tableId = computed(() => {
+  const value = route.params.tableId;
+  const id = Number(Array.isArray(value) ? value[0] : value);
+  return Number.isFinite(id) && id > 0 ? id : 0;
+});
+
+/** 当前代码预览页标题。 */
+const pageTitle = computed(() => table.value?.comment || table.value?.name || "代码预览");
+
+// 路由生成对象变化时重新载入对应代码预览。
+watch(
+  tableId,
+  () => {
+    void loadCodePreview();
+  },
+  { immediate: true }
+);
+
+/** 加载当前表配置与固定项目路径下的代码预览。 */
+async function loadCodePreview() {
+  table.value = undefined;
+  files.value = [];
+  previewError.value = "";
+  if (!tableId.value) return;
+  loading.value = true;
+  try {
+    const currentTable = await defCodeGenTableService.GetCodeGenTable({ id: tableId.value });
+    table.value = currentTable;
+    try {
+      const preview = await defCodeGenService.PreviewCodeGen({ table_id: tableId.value, output_paths: undefined });
+      files.value = preview.files ?? [];
+      if (!files.value.length) previewError.value = "当前没有可预览的生成文件，请先检查是否已配置生成字段、接口和输出路径。";
+    } catch {
+      // 预览错误在页面内转成可操作提示，避免全局错误弹窗只显示“系统出错”。
+      previewError.value = "代码预览加载失败，请先检查表配置、字段配置、Proto 接口配置和父级菜单是否完整。";
+    }
+    syncWorkspaceTitle();
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 同步代码预览页签和浏览器标题。 */
+function syncWorkspaceTitle() {
+  const title = `${pageTitle.value}代码预览`;
+  tabsStore.setTabsTitle(title);
+  document.title = `${title} - ${import.meta.env.VITE_GLOB_APP_TITLE}`;
+}
+
+/** 启动当前生成对象的代码生成任务。 */
+async function handleGenerate() {
+  if (!table.value) return;
+  if (table.value.status === codeGenStatusDisabled) {
+    ElMessage.warning(`代码生成表配置 ${table.value.name} 已停用`);
+    return;
+  }
+  try {
+    await ElMessageBox.confirm(`确认生成业务表：${table.value.name}？`, "提示", {
+      confirmButtonText: "确认",
+      cancelButtonText: "取消",
+      type: "warning"
+    });
+  } catch {
+    return;
+  }
+  generating.value = true;
+  try {
+    const data = await defCodeGenService.StartCodeGenTask({
+      table_ids: [table.value.id]
+    });
+    progressTaskId.value = data.task_id;
+    progressTaskAvailable.value = true;
+    window.sessionStorage.setItem(codeGenTaskStorageKey, data.task_id);
+    window.sessionStorage.removeItem(codeGenProgressSelectedTableIdsStorageKey);
+    handleProgressDialogVisibleChange(true);
+  } catch (error) {
+    generating.value = false;
+    throw error;
+  }
+}
+
+/** 打开最近一次代码生成任务。 */
+function handleOpenProgress() {
+  if (progressTaskId.value) handleProgressDialogVisibleChange(true);
+}
+
+/** 同步进度弹窗可见状态，确保热更新后仅恢复任务运行期间主动打开的弹窗。 */
+function handleProgressDialogVisibleChange(visible: boolean) {
+  progressDialogVisible.value = visible;
+  if (visible) {
+    window.sessionStorage.setItem(codeGenProgressDialogVisibleStorageKey, "true");
+    return;
+  }
+  window.sessionStorage.removeItem(codeGenProgressDialogVisibleStorageKey);
+}
+
+/** 生成任务结束后解除当前页面生成锁定。 */
+function handleProgressCompleted() {
+  generating.value = false;
+  window.sessionStorage.removeItem(codeGenProgressDialogVisibleStorageKey);
+  window.sessionStorage.removeItem(codeGenProgressSelectedTableIdsStorageKey);
+}
+
+/** 清理不可恢复的最近任务。 */
+function handleProgressUnavailable() {
+  generating.value = false;
+  progressTaskId.value = "";
+  progressTaskAvailable.value = false;
+  handleProgressDialogVisibleChange(false);
+  window.sessionStorage.removeItem(codeGenProgressSelectedTableIdsStorageKey);
+  window.sessionStorage.removeItem(codeGenTaskStorageKey);
+}
+
+</script>
+
+<style scoped lang="scss">
+.code-gen-code-preview-page {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+.code-gen-sub-card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  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);
+}
+:deep(.code-gen-sub-card .el-card__body) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+:deep(.code-gen-toolbar) {
+  display: flex;
+  flex: none;
+  gap: 10px;
+  align-items: center;
+  justify-content: flex-end;
+  margin-bottom: 14px;
+}
+.code-gen-code-preview-table,
+.code-gen-code-preview-empty {
+  flex: 1;
+  min-height: 0;
+}
+.code-gen-code-preview-alert {
+  flex: none;
+  margin-bottom: 12px;
+}
+
+@media (width <= 640px) {
+  .code-gen-code-preview-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>