@liujitcn/kratos-admin-bi 0.0.0-stage → 0.1.6

package/dist/package/src/views/source/index.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="table-box">
+    <ProTable ref="table" row-key="id" :columns="columns" :header-actions="headerActions" :request-api="requestTable" />
+    <FormDialog
+      ref="dialogRef"
+      v-model="dialog.visible"
+      :title="dialog.editing ? t('bi.source.title.edit') : t('bi.source.title.create')"
+      width="min(1040px, 96vw)"
+      label-width="10em"
+      :model="form"
+      :fields="fields"
+      :rules="rules"
+      :form-props="{ disabled: testing }"
+      @confirm="submit"
+      @close="resetForm"
+    >
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :disabled="testing" @click="dialog.visible = false">{{ t("common.action.cancel") }}</el-button>
+          <el-button type="primary" plain :icon="Connection" :loading="testing" @click="testSource">{{ t("bi.source.action.test") }}</el-button>
+          <el-button type="primary" :disabled="testing" @click="submit">{{ t("common.action.confirm") }}</el-button>
+        </div>
+      </template>
+    </FormDialog>
+    <BiSourceModelDialog v-model="modelDialog" :source="modelSource" @saved="handleModelSaved" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { CirclePlus, Connection, Delete, EditPen, SetUp } from "@element-plus/icons-vue";
+import ProTable from "@liujitcn/kratos-admin-core/components/ProTable";
+import FormDialog from "@liujitcn/kratos-admin-core/components/Dialog/FormDialog.vue";
+import type { ProFormField } from "@liujitcn/kratos-admin-core/components/ProForm/interface";
+import type { ColumnProps, HeaderActionProps, ProTableInstance } from "@liujitcn/kratos-admin-core/components/ProTable/interface";
+import { useAuthButtons } from "@liujitcn/kratos-admin-core/auth";
+import { encodeSecretFields } from "@liujitcn/kratos-admin-core/security";
+import { buildPageRequest } from "@liujitcn/kratos-admin-core/table";
+import { useTenantScope } from "@liujitcn/kratos-admin-core/tenant";
+import { t } from "@liujitcn/kratos-admin-core";
+import { defBiSourceService } from "../../api/bi/admin/v1/bi_source";
+import BiSourceModelDialog from "../../components/BiSourceModelDialog.vue";
+import type { BiSource, BiSourceForm, PageBiSourceRequest } from "../../rpc/bi/admin/v1/bi_source";
+
+interface BiSourceFormState extends BiSourceForm {
+  password_configured: boolean;
+}
+
+defineOptions({name: "BiSource", inheritAttrs: false});
+
+const { BUTTONS } = useAuthButtons();
+const { isDefaultTenant } = useTenantScope();
+const table = ref<ProTableInstance>();
+const dialogRef = ref<InstanceType<typeof FormDialog>>();
+const dialog = reactive({visible: false, editing: false});
+const form = reactive<BiSourceFormState>(defaultForm());
+const modelDialog = ref(false);
+const modelSource = ref<BiSource>();
+const editingModelConfigured = ref(false);
+const testing = ref(false);
+const driverOptions = [
+  {label: "MySQL", value: "mysql"},
+  {label: "PostgreSQL", value: "postgres"},
+  {label: "Doris", value: "doris"},
+  {label: "TiDB", value: "tidb"}
+];
+const driverDefaultPorts: Record<string, number> = {mysql: 3306, postgres: 5432, doris: 9030, tidb: 4000};
+
+const fields = computed<ProFormField[]>(() => [
+  {prop: "code", label: t("bi.source.field.code"), component: "input", colSpan: 12, props: {maxlength: 128, disabled: dialog.editing}},
+  {prop: "name", label: t("bi.source.field.name"), component: "input", colSpan: 12, props: {maxlength: 128}},
+  {prop: "description", label: t("bi.source.field.description"), component: "input", colSpan: 24, props: {maxlength: 500}},
+  {
+    prop: "source_name",
+    label: t("bi.source.field.source_name"),
+    component: "input",
+    colSpan: 24,
+    visible: () => isDefaultTenant.value,
+    props: {maxlength: 64, placeholder: t("bi.source.placeholder.source_name")}
+  },
+  {prop: "driver", label: t("bi.source.field.driver"), component: "select", colSpan: 12, options: driverOptions, props: {onChange: handleDriverChange}},
+  ...(!form.source_name ? [
+    {prop: "host", label: t("bi.source.field.host"), component: "input" as const, colSpan: 12, props: {maxlength: 255}},
+    {prop: "port", label: t("bi.source.field.port"), component: "input-number" as const, colSpan: 12, props: {min: 1, max: 65535, precision: 0, controlsPosition: "right"}},
+    {prop: "database_name", label: t("bi.source.field.database_name"), component: "input" as const, colSpan: 12, props: {maxlength: 128}},
+    {prop: "username", label: t("bi.source.field.username"), component: "input" as const, colSpan: 12, props: {maxlength: 128, autocomplete: "off"}},
+    {prop: "password", label: t("bi.source.field.password"), component: "input" as const, colSpan: 12, secret: {resource: "bi_source", field: "password"}, props: {type: "password", showPassword: true, maxlength: 512, autocomplete: "new-password", placeholder: form.password_configured ? t("bi.source.placeholder.keep_password") : t("bi.source.placeholder.password")}},
+    {prop: "ssl_mode", label: t("bi.source.field.ssl_mode"), component: "input" as const, colSpan: 12, props: {maxlength: 32, placeholder: "disable"}}
+  ] : []),
+  {prop: "schema_name", label: t("bi.source.field.schema_name"), component: "input", colSpan: 12, props: {maxlength: 128}},
+  {prop: "max_rows", label: t("bi.source.field.max_rows"), component: "input-number", colSpan: 12, props: {min: 1, max: 1000, precision: 0, controlsPosition: "right"}}
+]);
+
+const rules = computed(() => ({
+  code: [{required: true, message: t("bi.source.validation.code"), trigger: "blur"}],
+  name: [{required: true, message: t("bi.source.validation.name"), trigger: "blur"}],
+  driver: [{required: true, message: t("bi.source.validation.driver"), trigger: "change"}],
+  host: [{required: !form.source_name, message: t("bi.source.validation.host"), trigger: "blur"}],
+  database_name: [{required: !form.source_name, message: t("bi.source.validation.database_name"), trigger: "blur"}],
+  username: [{required: !form.source_name, message: t("bi.source.validation.username"), trigger: "blur"}],
+  password: [{required: !form.source_name && !dialog.editing, message: t("bi.source.validation.password"), trigger: "blur"}]
+}));
+
+const columns = computed<ColumnProps[]>(() => [
+  {prop: "code", label: t("bi.source.field.code"), minWidth: 150, search: {el: "input"}},
+  {prop: "name", label: t("bi.source.field.name"), minWidth: 140},
+  {prop: "driver", label: t("bi.source.field.driver"), width: 110},
+  {prop: "source_name", label: t("bi.source.field.connection"), minWidth: 190, render: ({row}) => row.host ? `${row.host}:${row.port}/${row.database_name}` : row.source_name},
+  {prop: "table_count", label: t("bi.source.model.field.tables"), width: 120, render: ({row}) => row.model_configured ? String(row.table_count) : t("bi.source.value.not_configured")},
+  {prop: "password_configured", label: t("bi.source.field.password"), width: 120, render: ({row}) => row.password_configured ? t("bi.source.value.configured") : t("bi.source.value.not_configured")},
+  {prop: "status", label: t("common.field.status"), width: 100, cellType: "status", statusProps: {activeValue: 1, inactiveValue: 2, activeText: t("common.status.enabled"), inactiveText: t("common.status.disabled"), disabled: scope => !BUTTONS.value["bi:source:status"] || !(scope.row as BiSource).model_configured, beforeChange: async scope => { await setStatus(scope.row as BiSource); return true; }}},
+  {prop: "updated_at", label: t("common.field.updated_at"), minWidth: 175},
+  {prop: "operation", label: t("common.field.operation"), cellType: "actions", fixed: "right", width: 250, actions: [
+    {label: t("bi.source.model.action.configure"), link: true, icon: SetUp, hidden: () => !BUTTONS.value["bi:source:update"], onClick: scope => openModel((scope.row as BiSource).id)},
+    {label: t("common.action.edit"), link: true, icon: EditPen, hidden: () => !BUTTONS.value["bi:source:update"], onClick: scope => openDialog((scope.row as BiSource).id)},
+    {label: t("common.action.delete"), type: "danger", link: true, icon: Delete, hidden: () => !BUTTONS.value["bi:source:delete"], onClick: scope => remove(scope.row as BiSource)}
+  ]}
+]);
+
+const headerActions = computed<HeaderActionProps[]>(() => [{label: t("common.action.create"), type: "primary", icon: CirclePlus, hidden: () => !BUTTONS.value["bi:source:create"], onClick: () => openDialog()}]);
+
+/** 创建空的数据源连接表单。 */
+function defaultForm(): BiSourceFormState {
+  return {id: 0, code: "", name: "", description: "", source_name: "", driver: "mysql", host: "", port: 3306, database_name: "", username: "", password: undefined, password_configured: false, ssl_mode: "disable", schema_name: "", max_rows: 100, status: 2};
+}
+
+/** 根据所选数据库驱动更新默认端口。 */
+function handleDriverChange(driver: string) {
+  form.port = driverDefaultPorts[driver] ?? 3306;
+}
+
+/** 请求数据源列表。 */
+async function requestTable(params: Record<string, unknown>) {
+  const data = await defBiSourceService.PageBiSource(buildPageRequest<PageBiSourceRequest>(params as unknown as PageBiSourceRequest));
+  return {data: {list: data.sources ?? [], total: data.total}};
+}
+
+/** 打开连接表单，普通租户的已有宿主绑定需要改为独立连接。 */
+async function openDialog(id?: number) {
+  const source = id ? await defBiSourceService.GetBiSource({id}) : undefined;
+  await dialogRef.value?.open({
+    load: () => source,
+    commit: value => {
+      Object.assign(form, defaultForm(), value ?? {});
+      if (!isDefaultTenant.value) form.source_name = "";
+      dialog.editing = Boolean(id);
+      editingModelConfigured.value = Boolean((value as BiSource | undefined)?.model_configured);
+    }
+  });
+}
+
+/** 保存连接配置，连接变化导致模型失效时重新配置。 */
+async function submit() {
+  const valid = await dialogRef.value?.validate();
+  if (!valid) return;
+  const encoded = await encodeSecretFields(fields.value, form);
+  const {password_configured: _passwordConfigured, ...source} = encoded as BiSourceFormState;
+  const result = dialog.editing ? await defBiSourceService.UpdateBiSource({source}) : await defBiSourceService.CreateBiSource({source});
+  ElMessage.success(t(dialog.editing ? "bi.source.message.update_success" : "bi.source.message.create_success"));
+  dialog.visible = false;
+  resetForm();
+  table.value?.getTableList();
+  if (editingModelConfigured.value && !result.model_configured) await openModel(result);
+}
+
+/** 测试表单中的连接，不要求先选择表。 */
+async function testSource() {
+  const valid = await dialogRef.value?.validate();
+  if (!valid) return;
+  testing.value = true;
+  try {
+    const encoded = await encodeSecretFields(fields.value, form);
+    const {password_configured: _passwordConfigured, ...source} = encoded as BiSourceFormState;
+    const result = await defBiSourceService.TestBiSource({source});
+    ElMessage[result.success ? "success" : "warning"](result.message || t(result.success ? "bi.source.message.test_success" : "bi.source.message.test_failed"));
+  } finally {
+    testing.value = false;
+  }
+}
+
+/** 打开表结构与关系模型配置。 */
+async function openModel(sourceOrID: BiSource | number) {
+  modelSource.value = typeof sourceOrID === "number" ? await defBiSourceService.GetBiSource({id: sourceOrID}) : sourceOrID;
+  modelDialog.value = true;
+}
+
+/** 保存模型后刷新连接列表。 */
+function handleModelSaved(source: BiSource) {
+  modelSource.value = source;
+  table.value?.getTableList();
+}
+
+/** 切换数据源启用状态。 */
+async function setStatus(row: BiSource) {
+  await defBiSourceService.SetBiSourceStatus({id: row.id, status: row.status === 1 ? 2 : 1});
+  table.value?.getTableList();
+}
+
+/** 删除数据源连接。 */
+async function remove(row: BiSource) {
+  await ElMessageBox.confirm(t("bi.source.dialog.delete_confirm", {name: row.name}), t("common.title.warning"));
+  await defBiSourceService.DeleteBiSource({id: row.id});
+  ElMessage.success(t("bi.source.message.delete_success"));
+  table.value?.getTableList();
+}
+
+/** 重置表单和校验状态。 */
+function resetForm() {
+  Object.assign(form, defaultForm());
+  dialog.editing = false;
+  editingModelConfigured.value = false;
+}
+</script>

package/dist/package/src/views/workbench/index.vue

@@ -0,0 +1,208 @@
+<template>
+  <main class="bi-workbench">
+    <el-skeleton v-if="loading" :rows="6" animated /><el-empty
+      v-else-if="!dashboards.length"
+      :description="t('bi.workbench.empty')"
+      ><el-button @click="router.push('/bi/manage')">{{ t("bi.dashboard.manage") }}</el-button></el-empty
+    >
+    <div v-else class="bi-workbench__grid" :aria-busy="saving">
+      <article
+        v-for="(item, index) in dashboards"
+        :key="item.id"
+        class="bi-workbench__entry"
+        :class="{ 'is-dragging': dragged === index }"
+        :draggable="!saving"
+        tabindex="0"
+        :aria-label="`${item.name}：${t('bi.workbench.drag')}`"
+        aria-keyshortcuts="Alt+ArrowLeft Alt+ArrowRight"
+        @dragstart="startDrag($event, index)"
+        @dragend="dragged = -1"
+        @dragover.prevent
+        @drop.prevent="move(dragged, index)"
+        @keydown.alt.left.prevent="move(index, index - 1)"
+        @keydown.alt.right.prevent="move(index, index + 1)"
+      >
+        <BiWorkbenchPreview :key="`${item.id}:${item.published_version}`" :dashboard="item" />
+        <div class="bi-workbench__info">
+          <div class="bi-workbench__title">
+            <h3 :title="item.name">{{ item.name }}</h3>
+            <el-tag size="small" effect="light">{{ t("bi.dashboard.status_published") }}</el-tag>
+          </div>
+          <p class="bi-workbench__meta">
+            {{ t("bi.card.total", { count: parseDashboardLayout(item.schema_json).cards.length }) }} · v{{
+              item.published_version
+            }}
+          </p>
+          <p v-if="item.description" class="bi-workbench__description">{{ item.description }}</p>
+          <footer>
+            <el-button type="primary" @click="router.push(`/bi/dashboard/${item.id}`)"
+              >{{ t("bi.workbench.open_dashboard") }}<el-icon class="el-icon--right"><ArrowRight /></el-icon
+            ></el-button>
+          </footer>
+        </div>
+      </article>
+    </div>
+  </main>
+</template>
+<script setup lang="ts">
+import { onActivated, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { t } from "@liujitcn/kratos-admin-core";
+import type { BiDashboard } from "../../rpc/bi/admin/v1/bi_dashboard";
+import { orderWorkbenchDashboards } from "../../card-schema";
+import { defBiCardService } from "../../api/bi/admin/v1/bi_card";
+import { parseDashboardLayout } from "../../bi-dashboard-schema";
+import BiWorkbenchPreview from "../../components/BiWorkbenchPreview.vue";
+defineOptions({ name: "BiWorkbench", inheritAttrs: false });
+const router = useRouter(),
+  dashboards = ref<BiDashboard[]>([]),
+  loading = ref(false),
+  saving = ref(false),
+  dragged = ref(-1);
+let loaded = false;
+/** 读取收藏的仪表盘，重新进入时同步管理页的收藏变化。 */
+async function load() {
+  loading.value = true;
+  try {
+    const config = await defBiCardService.GetBiWorkbench({});
+    dashboards.value = orderWorkbenchDashboards(config.dashboard_ids, config.dashboards);
+    loaded = true;
+  } catch (cause) {
+    ElMessage.error(cause instanceof Error ? cause.message : t("bi.query.error"));
+  } finally {
+    loading.value = false;
+  }
+}
+/** 卡片默认允许拖动，按钮保留原有点击操作。 */
+function startDrag(event: DragEvent, index: number) {
+  if (saving.value || (event.target as HTMLElement).closest("button")) {
+    event.preventDefault();
+    return;
+  }
+  dragged.value = index;
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", String(dashboards.value[index].id));
+  }
+}
+/** 拖动或键盘排序后自动保存，失败恢复原顺序并保留卡片收藏。 */
+async function move(from: number, to: number) {
+  if (saving.value || from === to || from < 0 || to < 0 || from >= dashboards.value.length || to >= dashboards.value.length)
+    return;
+  const previous = dashboards.value;
+  const next = [...previous];
+  const [item] = next.splice(from, 1);
+  next.splice(to, 0, item);
+  dashboards.value = next;
+  dragged.value = -1;
+  saving.value = true;
+  try {
+    const latest = await defBiCardService.GetBiWorkbench({});
+    const saved = await defBiCardService.SaveBiWorkbench({
+      dashboard_ids: dashboards.value.map(item => item.id),
+      favorite_ids: latest.favorite_ids
+    });
+    dashboards.value = orderWorkbenchDashboards(saved.dashboard_ids, saved.dashboards);
+    ElMessage.success(t("bi.workbench.saved"));
+  } catch (cause) {
+    dashboards.value = previous;
+    ElMessage.error(cause instanceof Error ? cause.message : t("bi.query.error"));
+  } finally {
+    saving.value = false;
+  }
+}
+onMounted(() => void load());
+onActivated(() => {
+  if (loaded && !saving.value) void load();
+});
+</script>
+<style scoped>
+.bi-workbench {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+.bi-workbench__grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+.bi-workbench__entry {
+  min-width: 0;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: var(--admin-page-radius);
+  overflow: hidden;
+  background: var(--admin-page-card-bg);
+  cursor: grab;
+}
+.bi-workbench__entry:active {
+  cursor: grabbing;
+}
+.bi-workbench__entry:focus-visible {
+  outline: 2px solid var(--el-color-primary);
+  outline-offset: 2px;
+}
+.bi-workbench__entry.is-dragging {
+  border-color: var(--el-color-primary-light-5);
+  opacity: 0.5;
+}
+.bi-workbench__info {
+  padding: 16px;
+}
+.bi-workbench__title {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+.bi-workbench__title .el-tag {
+  flex: none;
+}
+.bi-workbench h3 {
+  color: var(--el-text-color-primary);
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 22px;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.bi-workbench__meta,
+.bi-workbench__description {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+.bi-workbench__meta {
+  margin: 6px 0 10px;
+}
+.bi-workbench__description {
+  margin: 0 0 10px;
+}
+.bi-workbench footer {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding-top: 12px;
+  margin-top: 12px;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+@container (max-width: 1400px) {
+  .bi-workbench__grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@container (max-width: 1050px) {
+  .bi-workbench__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@container (max-width: 650px) {
+  .bi-workbench__grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/package.json

@@ -1,6 +1,70 @@
 {
   "name": "@liujitcn/kratos-admin-bi",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "private": false,
+  "version": "0.1.6",
+  "type": "module",
+  "description": "kratos-admin BI analysis and semantic query module",
+  "license": "MIT",
+  "homepage": "https://github.com/liujitcn/kratos-admin",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:liujitcn/kratos-admin.git"
+  },
+  "dependencies": {
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/controls": "^1.1.3",
+    "@vue-flow/core": "^1.48.2",
+    "@vue-flow/minimap": "^1.5.4",
+    "echarts": "^6.1.0",
+    "@liujitcn/kratos-admin-system": "0.1.6",
+    "@liujitcn/kratos-admin-core": "0.1.6"
+  },
+  "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": "^24.0.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"
+    },
+    "./views/*": {
+      "types": "./dist/package/declarations/src/views/*.d.ts",
+      "default": "./dist/package/src/views/*"
+    },
+    "./locales/*": "./dist/package/src/locales/*",
+    "./module": {
+      "types": "./dist/package/declarations/src/module.d.ts",
+      "default": "./dist/package/src/module.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 .",
+    "test": "node --test tests/*.test.mjs",
+    "type:check": "vue-tsc --noEmit --skipLibCheck"
+  }
 }

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "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/**/*.vue"
+  ],
+  "exclude": ["node_modules", "dist", "**/*.js"]
+}