@liujitcn/kratos-admin-core 0.0.1

package/dist/package/src/components/Dialog/FormDialog.vue

@@ -0,0 +1,160 @@
+<template>
+  <ProDialog
+    :model-value="modelValue"
+    :title="title"
+    :width="width"
+    :top="top"
+    :confirm-text="confirmText"
+    :cancel-text="cancelText"
+    :confirm-loading="confirmLoading"
+    :destroy-on-close="destroyOnClose"
+    :close-on-click-modal="closeOnClickModal"
+    :close-on-press-escape="closeOnPressEscape"
+    v-bind="$attrs"
+    @update:model-value="handleVisibleChange"
+    @confirm="handleConfirm"
+    @cancel="handleCancel"
+    @close="handleClose"
+    @closed="handleClosed"
+  >
+    <ProForm
+      ref="proFormRef"
+      :model="model"
+      :fields="fields"
+      :rules="rules"
+      :label-width="labelWidth"
+      :gutter="gutter"
+      :col-span="colSpan"
+      v-bind="formProps"
+    >
+      <template v-for="slotName in slotNames" #[slotName]="slotScope">
+        <slot :name="slotName" v-bind="slotScope" />
+      </template>
+    </ProForm>
+
+    <template #footer>
+      <slot name="footer">
+        <div class="dialog-footer">
+          <el-button @click="handleCancel">{{ cancelText }}</el-button>
+          <el-button type="primary" :loading="confirmLoading" @click="handleConfirm">{{ confirmText }}</el-button>
+        </div>
+      </slot>
+    </template>
+  </ProDialog>
+</template>
+
+<script setup lang="ts" name="FormDialog">
+import { computed, nextTick, ref, useSlots, watch } from "vue";
+import type { FormRules } from "element-plus";
+import ProDialog from "../../components/Dialog/ProDialog.vue";
+import ProForm from "../../components/ProForm/index.vue";
+import type { ProFormField, ProFormInstance } from "../../components/ProForm/interface";
+
+/** 表单弹窗组件属性。 */
+interface FormDialogProps {
+  modelValue: boolean;
+  title?: string;
+  width?: string | number;
+  top?: string;
+  model: Record<string, any>;
+  fields: ProFormField[];
+  rules?: FormRules;
+  labelWidth?: string;
+  gutter?: number;
+  colSpan?: number;
+  confirmText?: string;
+  cancelText?: string;
+  confirmLoading?: boolean;
+  destroyOnClose?: boolean;
+  closeOnClickModal?: boolean;
+  closeOnPressEscape?: boolean;
+  formProps?: Record<string, any>;
+}
+
+const props = withDefaults(defineProps<FormDialogProps>(), {
+  title: "",
+  width: "500px",
+  top: "8vh",
+  rules: () => ({}),
+  labelWidth: "110px",
+  gutter: 20,
+  colSpan: 24,
+  confirmText: "确定",
+  cancelText: "取消",
+  confirmLoading: false,
+  destroyOnClose: false,
+  closeOnClickModal: true,
+  closeOnPressEscape: true,
+  formProps: () => ({})
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  confirm: [];
+  cancel: [];
+  close: [];
+  closed: [];
+}>();
+
+const slots = useSlots();
+const proFormRef = ref<ProFormInstance>();
+
+/** 弹窗打开后再清理校验状态，兼容异步加载选项后才显示的表单。 */
+watch(
+  () => props.modelValue,
+  value => {
+    if (!value) return;
+    nextTick(() => proFormRef.value?.clearValidate());
+  }
+);
+
+/** 汇总外部透传的插槽名称，统一转发到内部 ProForm。 */
+const slotNames = computed(() => Object.keys(slots).filter(slotName => slotName !== "footer"));
+
+/** 同步弹窗显示状态到外部。 */
+function handleVisibleChange(value: boolean) {
+  emit("update:modelValue", value);
+}
+
+/** 对外透传确定事件，保持页面业务提交流程不变。 */
+function handleConfirm() {
+  emit("confirm");
+}
+
+/** 关闭弹窗并对外透传取消事件。 */
+function handleCancel() {
+  emit("update:modelValue", false);
+  emit("cancel");
+}
+
+/** 对外透传弹窗关闭事件。 */
+function handleClose() {
+  emit("close");
+}
+
+/** 对外透传弹窗完全关闭事件。 */
+function handleClosed() {
+  emit("closed");
+}
+
+/** 校验内部 ProForm。 */
+async function validate() {
+  return proFormRef.value?.validate();
+}
+
+/** 重置内部 ProForm。 */
+function resetFields() {
+  proFormRef.value?.resetFields();
+}
+
+/** 清理内部 ProForm 校验状态。 */
+function clearValidate(props?: string | string[]) {
+  proFormRef.value?.clearValidate(props);
+}
+
+defineExpose({
+  validate,
+  resetFields,
+  clearValidate
+});
+</script>

package/dist/package/src/components/Dialog/ProDialog.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    :title="title"
+    :width="width"
+    :top="top"
+    :destroy-on-close="destroyOnClose"
+    :close-on-click-modal="closeOnClickModal"
+    :close-on-press-escape="closeOnPressEscape"
+    v-bind="$attrs"
+    @update:model-value="handleVisibleChange"
+    @close="handleClose"
+    @closed="handleClosed"
+  >
+    <template v-if="$slots.header" #header="headerProps">
+      <slot name="header" v-bind="headerProps" />
+    </template>
+
+    <slot />
+
+    <template v-if="showFooter && $slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+    <template v-else-if="showFooter" #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel"> {{ cancelText }} </el-button>
+        <el-button type="primary" :loading="confirmLoading" @click="handleConfirm"> {{ confirmText }} </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="ProDialog">
+/** 通用弹窗组件属性。 */
+interface ProDialogProps {
+  modelValue: boolean;
+  title?: string;
+  width?: string | number;
+  top?: string;
+  confirmText?: string;
+  cancelText?: string;
+  confirmLoading?: boolean;
+  destroyOnClose?: boolean;
+  closeOnClickModal?: boolean;
+  closeOnPressEscape?: boolean;
+  /** 是否展示弹窗底部操作区。 */
+  showFooter?: boolean;
+}
+
+withDefaults(defineProps<ProDialogProps>(), {
+  title: "",
+  width: "500px",
+  top: "8vh",
+  confirmText: "确定",
+  cancelText: "取消",
+  confirmLoading: false,
+  destroyOnClose: false,
+  closeOnClickModal: true,
+  closeOnPressEscape: true,
+  showFooter: true
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  confirm: [];
+  cancel: [];
+  close: [];
+  closed: [];
+}>();
+
+/** 同步弹窗显示状态到外部。 */
+function handleVisibleChange(value: boolean) {
+  emit("update:modelValue", value);
+}
+
+/** 处理点击确定按钮后的回调。 */
+function handleConfirm() {
+  emit("confirm");
+}
+
+/** 处理点击取消按钮后的回调，并主动关闭弹窗。 */
+function handleCancel() {
+  emit("update:modelValue", false);
+  emit("cancel");
+}
+
+/** 处理弹窗关闭时的回调。 */
+function handleClose() {
+  emit("close");
+}
+
+/** 处理弹窗完全关闭后的回调。 */
+function handleClosed() {
+  emit("closed");
+}
+</script>

package/dist/package/src/components/Dict/DictLabel.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-tag v-if="tagType" :type="tagType" :size="size">{{ label }}</el-tag>
+  <span v-else>{{ label }}</span>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useDictStore } from "../../stores/modules/dict";
+
+/** Element Plus 标签支持的展示类型。 */
+type TagType = "success" | "warning" | "info" | "primary" | "danger";
+
+/** 字典标签组件属性。 */
+interface DictLabelProps {
+  code: string;
+  modelValue?: string | number;
+  size?: "default" | "large" | "small";
+}
+
+const props = withDefaults(defineProps<DictLabelProps>(), {
+  size: "default"
+});
+
+const dictStore = useDictStore();
+const label = ref("");
+const tagType = ref<TagType | undefined>();
+
+/**
+ * 过滤后端返回的 tag 类型，确保只传递 Element Plus 支持的枚举值。
+ */
+function normalizeTagType(rawTagType?: string): TagType | undefined {
+  const supportedTagTypes: TagType[] = ["success", "warning", "info", "primary", "danger"];
+  if (!rawTagType) return undefined;
+  return supportedTagTypes.find(tag => tag === rawTagType);
+}
+
+/**
+ * 根据字典值刷新标签文本和标签类型。
+ */
+async function refreshLabelAndTag() {
+  if (!props.code) {
+    label.value = "";
+    tagType.value = undefined;
+    return;
+  }
+
+  // 字典缓存可能来自持久化旧数据，按当前编码兜底刷新一次。
+  const dictList = await dictStore.ensureDictionary(props.code);
+
+  const matchedItem = dictList.find(dictItem => dictItem.value == props.modelValue);
+  label.value = matchedItem?.label ?? "";
+  tagType.value = normalizeTagType(matchedItem?.tag_type);
+}
+
+watch(
+  () => [props.code, props.modelValue],
+  async () => {
+    await refreshLabelAndTag();
+  },
+  { immediate: true }
+);
+</script>

package/dist/package/src/components/Dict/index.vue

@@ -0,0 +1,157 @@
+<template>
+  <el-select
+    v-if="type === 'select'"
+    v-model="selectedSingleValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    clearable
+    :style="style"
+    @change="handleSingleChange"
+  >
+    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" />
+  </el-select>
+
+  <el-radio-group
+    v-else-if="type === 'radio'"
+    v-model="selectedSingleValue"
+    :disabled="disabled"
+    :style="style"
+    @change="handleSingleChange"
+  >
+    <el-radio v-for="option in options" :key="option.value" :value="option.value">
+      {{ option.label }}
+    </el-radio>
+  </el-radio-group>
+
+  <el-checkbox-group
+    v-else-if="type === 'checkbox'"
+    v-model="selectedMultiValue"
+    :disabled="disabled"
+    :style="style"
+    @change="handleMultiChange"
+  >
+    <el-checkbox v-for="option in options" :key="option.value" :value="option.value">
+      {{ option.label }}
+    </el-checkbox>
+  </el-checkbox-group>
+</template>
+
+<script setup lang="ts">
+import type { CSSProperties } from "vue";
+import { ref, watch } from "vue";
+import { useDictStore } from "../../stores/modules/dict";
+import type { OptionBaseDictResponse_BaseDictItem } from "../../rpc/system/admin/v1/base_dict";
+
+/** 字典组件支持的控件类型。 */
+type DictType = "select" | "radio" | "checkbox";
+/** 字典值转换后的目标类型。 */
+type DictCodeType = "string" | "number";
+/** 字典组件对外绑定值类型。 */
+type DictValue = string | number;
+
+/** 字典组件属性。 */
+interface DictProps {
+  code: string;
+  codeType?: DictCodeType;
+  modelValue?: DictValue | DictValue[];
+  type?: DictType;
+  placeholder?: string;
+  disabled?: boolean;
+  style?: CSSProperties;
+}
+
+const props = withDefaults(defineProps<DictProps>(), {
+  codeType: "number",
+  type: "select",
+  placeholder: "请选择",
+  disabled: false,
+  style: () =>
+    ({
+      width: "300px"
+    }) as CSSProperties
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: DictValue | DictValue[] | undefined): void;
+}>();
+
+const dictStore = useDictStore();
+const options = ref<Array<{ label: string; value: DictValue }>>([]);
+const selectedSingleValue = ref<DictValue | undefined>();
+const selectedMultiValue = ref<DictValue[]>([]);
+
+/**
+ * 同步外部传入值到组件内部值。
+ */
+function syncSelectedValue(modelValue: DictValue | DictValue[] | undefined) {
+  if (props.type === "checkbox") {
+    selectedMultiValue.value = Array.isArray(modelValue) ? modelValue : [];
+    return;
+  }
+  selectedSingleValue.value = Array.isArray(modelValue) ? undefined : modelValue;
+}
+
+/**
+ * 按配置将字典值转换为字符串或数字。
+ */
+function convertDictValue(dictItem: OptionBaseDictResponse_BaseDictItem): DictValue {
+  if (props.codeType === "number") return Number(dictItem.value);
+  return dictItem.value;
+}
+
+/**
+ * 加载当前字典选项，若本地无缓存则自动拉取。
+ */
+async function loadOptions() {
+  // 按当前字典编码兜底刷新，避免持久化旧缓存里缺少该字典导致下拉无数据。
+  const dictList = await dictStore.ensureDictionary(props.code);
+
+  options.value = dictList.map(dictItem => ({
+    label: dictItem.label,
+    value: convertDictValue(dictItem)
+  }));
+}
+
+/**
+ * 校验当前值是否仍在可选项内，避免字典切换后残留无效值。
+ */
+function ensureSelectedValueValid() {
+  if (props.type === "checkbox") return;
+  if (selectedSingleValue.value === undefined || selectedSingleValue.value === null || selectedSingleValue.value === "") return;
+  const matched = options.value.some(option => option.value === selectedSingleValue.value);
+  if (matched) return;
+  selectedSingleValue.value = undefined;
+  emit("update:modelValue", undefined);
+}
+
+/**
+ * 对外派发单选值变化。
+ */
+function handleSingleChange(value: string | number | boolean | undefined) {
+  emit("update:modelValue", value as DictValue | undefined);
+}
+
+/**
+ * 对外派发多选值变化。
+ */
+function handleMultiChange(value: Array<string | number | boolean>) {
+  emit("update:modelValue", value as DictValue[]);
+}
+
+watch(
+  () => props.modelValue,
+  modelValue => {
+    syncSelectedValue(modelValue);
+  },
+  { immediate: true }
+);
+
+watch(
+  () => [props.code, props.codeType],
+  async () => {
+    await loadOptions();
+    ensureSelectedValueValid();
+  },
+  { immediate: true }
+);
+</script>

package/dist/package/src/components/ECharts/config/index.ts

@@ -0,0 +1,45 @@
+import * as echarts from "echarts/core";
+import { BarChart, LineChart, PieChart } from "echarts/charts";
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+  DataZoomComponent
+} from "echarts/components";
+import { LabelLayout, UniversalTransition } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+import type { BarSeriesOption, LineSeriesOption, PieSeriesOption } from "echarts/charts";
+import type { TitleComponentOption, TooltipComponentOption, GridComponentOption, DatasetComponentOption } from "echarts/components";
+import type { ComposeOption } from "echarts/core";
+
+/** 管理后台 ECharts 组件统一支持的图表配置类型。 */
+export type ECOption = ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | PieSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | DatasetComponentOption
+>;
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+  DataZoomComponent,
+  BarChart,
+  LineChart,
+  PieChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer
+]);
+
+export default echarts;

package/dist/package/src/components/ECharts/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div id="echarts" ref="chartRef" :style="echartsStyle" />
+</template>
+
+<script setup lang="ts" name="ECharts">
+import { ref, onMounted, onBeforeUnmount, watch, computed, markRaw, nextTick, onActivated } from "vue";
+import { EChartsType, ECElementEvent } from "echarts/core";
+import echarts, { ECOption } from "./config";
+import { useDebounceFn } from "@vueuse/core";
+import { useGlobalStore } from "../../stores/modules/global";
+import { storeToRefs } from "pinia";
+
+// ECharts 组件入参，控制图表配置、渲染方式、尺寸和事件回调。
+interface Props {
+  option: ECOption;
+  renderer?: "canvas" | "svg";
+  resize?: boolean;
+  theme?: object | string;
+  width?: number | string;
+  height?: number | string;
+  onClick?: (event: ECElementEvent) => any;
+  onMouseup?: (event: ECElementEvent) => any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  renderer: "canvas",
+  resize: true
+});
+
+const echartsStyle = computed(() => {
+  return props.width || props.height
+    ? { height: props.height + "px", width: props.width + "px" }
+    : { height: "100%", width: "100%" };
+});
+
+const chartRef = ref<HTMLDivElement | HTMLCanvasElement>();
+const chartInstance = ref<EChartsType>();
+
+const draw = () => {
+  if (chartInstance.value) {
+    chartInstance.value.setOption(props.option, { notMerge: true });
+  }
+};
+
+watch(props, () => {
+  draw();
+});
+
+const handleClick = (event: ECElementEvent) => props.onClick && props.onClick(event);
+const handleMouseup = (event: ECElementEvent) => props.onMouseup && props.onMouseup(event);
+
+const init = () => {
+  if (!chartRef.value) return;
+  chartInstance.value = echarts.getInstanceByDom(chartRef.value);
+
+  if (!chartInstance.value) {
+    chartInstance.value = markRaw(
+      echarts.init(chartRef.value, props.theme, {
+        renderer: props.renderer
+      })
+    );
+    chartInstance.value.on("click", handleClick);
+    chartInstance.value.on("mouseup", handleMouseup);
+    draw();
+  }
+};
+
+const resize = () => {
+  if (chartInstance.value && props.resize) {
+    chartInstance.value.resize({ animation: { duration: 300 } });
+  }
+};
+
+const debouncedResize = useDebounceFn(resize, 300, { maxWait: 800 });
+
+const globalStore = useGlobalStore();
+const { maximize, isCollapse, tabs, footer } = storeToRefs(globalStore);
+
+watch(
+  () => [maximize, isCollapse, tabs, footer],
+  () => {
+    debouncedResize();
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  nextTick(() => init());
+  window.addEventListener("resize", debouncedResize);
+});
+
+onActivated(() => {
+  if (chartInstance.value) {
+    chartInstance.value.resize();
+  }
+});
+
+onBeforeUnmount(() => {
+  chartInstance.value?.dispose();
+  window.removeEventListener("resize", debouncedResize);
+});
+
+defineExpose({
+  getInstance: () => chartInstance.value,
+  resize,
+  draw
+});
+</script>

package/dist/package/src/components/ErrorMessage/index.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts" name="ErrorMessage">
+import { useRouter } from "vue-router";
+
+/** 错误状态展示属性。 */
+interface ErrorMessageProps {
+  /** HTTP 状态码。 */
+  code: string;
+  /** 状态插图地址。 */
+  image: string;
+  /** 用户提示文案。 */
+  message: string;
+}
+
+defineProps<ErrorMessageProps>();
+
+const router = useRouter();
+</script>
+
+<template>
+  <div class="not-container">
+    <img :src="image" class="not-img" :alt="code" />
+    <div class="not-detail">
+      <h2>{{ code }}</h2>
+      <h4>{{ message }}</h4>
+      <el-button type="primary" @click="router.back()"> 返回上一页 </el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.not-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  .not-img {
+    margin-right: 120px;
+  }
+  .not-detail {
+    display: flex;
+    flex-direction: column;
+    h2,
+    h4 {
+      padding: 0;
+      margin: 0;
+    }
+    h2 {
+      font-size: 60px;
+      color: var(--el-text-color-primary);
+    }
+    h4 {
+      margin: 30px 0 20px;
+      font-size: 19px;
+      font-weight: normal;
+      color: var(--el-text-color-regular);
+    }
+    .el-button {
+      width: 100px;
+    }
+  }
+}
+</style>