@liujitcn/kratos-admin-core 0.0.1

package/dist/package/src/components/ProForm/components/DynamicList.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="dynamic-list">
+    <div v-for="(item, index) in modelValue" :key="index" class="dynamic-list__item">
+      <el-input v-model="modelValue[index]" v-bind="inputProps" />
+      <el-button :icon="Delete" circle type="danger" plain @click="handleRemove(index)" />
+    </div>
+    <el-button :icon="Plus" type="primary" plain @click="handleAdd">添加</el-button>
+  </div>
+</template>
+
+<script setup lang="ts" name="DynamicList">
+import { computed } from "vue";
+import { Delete, Plus } from "@element-plus/icons-vue";
+
+/** 动态字符串列表组件属性。 */
+interface DynamicListProps {
+  modelValue?: string[];
+  inputProps?: Record<string, any>;
+}
+
+const props = withDefaults(defineProps<DynamicListProps>(), {
+  modelValue: () => [],
+  inputProps: () => ({ placeholder: "请输入内容" })
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string[]];
+}>();
+
+/** 统一接管动态列表值。 */
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: value => emit("update:modelValue", value)
+});
+
+/** 新增一行动态输入。 */
+function handleAdd() {
+  modelValue.value = [...modelValue.value, ""];
+}
+
+/** 删除指定下标的动态输入。 */
+function handleRemove(index: number) {
+  modelValue.value = modelValue.value.filter((_, currentIndex) => currentIndex !== index);
+}
+</script>
+
+<style scoped lang="scss">
+.dynamic-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+.dynamic-list__item {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+</style>

package/dist/package/src/components/ProForm/components/KvList.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="kv-list">
+    <div v-for="(item, index) in modelValue" :key="index" class="kv-list__item">
+      <el-input v-model="item.key" v-bind="keyInputProps" />
+      <el-input v-model="item.value" v-bind="valueInputProps" />
+      <el-button :icon="Delete" circle type="danger" plain @click="handleRemove(index)" />
+    </div>
+    <el-button :icon="Plus" type="primary" plain v-bind="addButtonProps" @click="handleAdd">{{ addText }}</el-button>
+  </div>
+</template>
+
+<script setup lang="ts" name="KvList">
+import { computed } from "vue";
+import { Delete, Plus } from "@element-plus/icons-vue";
+
+/** 键值对列表单项。 */
+interface KvItem {
+  key: string;
+  value: string;
+}
+
+/** 键值对列表组件属性。 */
+interface KvListProps {
+  modelValue?: KvItem[];
+  keyInputProps?: Record<string, any>;
+  valueInputProps?: Record<string, any>;
+  addText?: string;
+  addButtonProps?: Record<string, any>;
+}
+
+const props = withDefaults(defineProps<KvListProps>(), {
+  modelValue: () => [],
+  keyInputProps: () => ({ placeholder: "参数名" }),
+  valueInputProps: () => ({ placeholder: "参数值" }),
+  addText: "添加",
+  addButtonProps: () => ({})
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: KvItem[]];
+}>();
+
+/** 统一接管键值对列表值。 */
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: value => emit("update:modelValue", value)
+});
+
+/** 新增一行键值对。 */
+function handleAdd() {
+  modelValue.value = [...modelValue.value, { key: "", value: "" }];
+}
+
+/** 删除指定下标的键值对。 */
+function handleRemove(index: number) {
+  modelValue.value = modelValue.value.filter((_, currentIndex) => currentIndex !== index);
+}
+</script>
+
+<style scoped lang="scss">
+.kv-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+.kv-list__item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+}
+</style>

package/dist/package/src/components/ProForm/components/ProFormItem.vue

@@ -0,0 +1,191 @@
+<template>
+  <el-input v-if="field.component === 'input'" v-model.trim="fieldValue" v-bind="fieldProps" />
+
+  <el-input
+    v-else-if="field.component === 'password'"
+    v-model.trim="fieldValue"
+    type="password"
+    show-password
+    v-bind="fieldProps"
+  />
+
+  <el-input v-else-if="field.component === 'textarea'" v-model.trim="fieldValue" type="textarea" v-bind="fieldProps" />
+
+  <el-input-number v-else-if="field.component === 'input-number'" v-model="fieldValue" v-bind="fieldProps" />
+
+  <el-segmented v-else-if="field.component === 'segmented'" v-model="fieldValue" :options="fieldOptions" v-bind="fieldProps" />
+
+  <el-checkbox v-else-if="field.component === 'checkbox'" v-model="fieldValue" v-bind="fieldProps">
+    {{ field.checkboxLabel ?? field.label }}
+  </el-checkbox>
+
+  <el-switch v-else-if="field.component === 'switch'" v-model="fieldValue" v-bind="fieldProps" />
+
+  <el-select v-else-if="field.component === 'select'" v-model="fieldValue" v-bind="fieldProps">
+    <el-option
+      v-for="option in fieldOptions"
+      :key="String(option.value)"
+      :label="option.label"
+      :value="option.value"
+      :disabled="option.disabled"
+    />
+  </el-select>
+
+  <el-radio-group v-else-if="field.component === 'radio-group'" v-model="fieldValue" v-bind="fieldProps">
+    <el-radio v-for="option in fieldOptions" :key="String(option.value)" :value="option.value" :disabled="option.disabled">
+      {{ option.label }}
+    </el-radio>
+  </el-radio-group>
+
+  <el-checkbox-group v-else-if="field.component === 'checkbox-group'" v-model="fieldValue" v-bind="fieldProps">
+    <el-checkbox v-for="option in fieldOptions" :key="String(option.value)" :label="option.value" :disabled="option.disabled">
+      {{ option.label }}
+    </el-checkbox>
+  </el-checkbox-group>
+
+  <el-tree-select v-else-if="field.component === 'tree-select'" v-model="fieldValue" :data="fieldOptions" v-bind="fieldProps" />
+
+  <el-date-picker v-else-if="field.component === 'date-picker'" v-model="fieldValue" v-bind="fieldProps" />
+
+  <CronExpression v-else-if="field.component === 'cron-expression'" v-model="fieldValue" v-bind="fieldProps" />
+
+  <Dict v-else-if="field.component === 'dict'" v-model="fieldValue" v-bind="fieldProps" />
+
+  <el-transfer
+    v-else-if="field.component === 'transfer'"
+    v-model="multipleFileValue"
+    :data="fieldOptions"
+    :props="{ key: 'value', label: 'label', disabled: 'disabled' }"
+    v-bind="fieldProps"
+  >
+    <template v-if="field.slotName" #default="slotScope">
+      <slot :name="field.slotName" :field="field" :model="model" v-bind="slotScope" />
+    </template>
+  </el-transfer>
+
+  <UploadImg v-else-if="field.component === 'image-upload'" v-model:image-url="fieldValue" v-bind="fieldProps" />
+
+  <UploadImgs v-else-if="field.component === 'images-upload'" v-model:file-list="multipleImageFileValue" v-bind="fieldProps" />
+
+  <UploadFile v-else-if="field.component === 'file-upload'" v-model:file-info="fieldValue" v-bind="fieldProps" />
+
+  <UploadFiles v-else-if="field.component === 'files-upload'" v-model:file-list="multipleFileValue" v-bind="fieldProps" />
+
+  <WangEditor v-else-if="field.component === 'rich-text'" v-model:value="fieldValue" v-bind="fieldProps" />
+
+  <DynamicList v-else-if="field.component === 'dynamic-list'" v-model="multipleStringValue" v-bind="fieldProps" />
+
+  <KvList v-else-if="field.component === 'kv-list'" v-model="multipleKvValue" v-bind="fieldProps" />
+
+  <slot v-else :name="field.slotName ?? field.prop" :field="field" :model="model" />
+</template>
+
+<script setup lang="ts" name="ProFormItem">
+import { computed, defineAsyncComponent } from "vue";
+import type { UploadUserFile } from "element-plus";
+import type { ProFormField, ProFormOption } from "../../../components/ProForm/interface";
+import Dict from "../../../components/Dict/index.vue";
+
+// 非基础表单控件按需加载，避免 ProForm 基础包携带上传、富文本、Cron 等重组件。
+const CronExpression = defineAsyncComponent(() => import("../../../components/CronExpression/index.vue"));
+const WangEditor = defineAsyncComponent(() => import("../../../components/WangEditor/index.vue"));
+const DynamicList = defineAsyncComponent(() => import("../../../components/ProForm/components/DynamicList.vue"));
+const KvList = defineAsyncComponent(() => import("../../../components/ProForm/components/KvList.vue"));
+const UploadFile = defineAsyncComponent(() => import("../../../components/Upload/File.vue"));
+const UploadFiles = defineAsyncComponent(() => import("../../../components/Upload/Files.vue"));
+const UploadImg = defineAsyncComponent(() => import("../../../components/Upload/Img.vue"));
+const UploadImgs = defineAsyncComponent(() => import("../../../components/Upload/Imgs.vue"));
+
+/** ProFormItem 组件属性。 */
+interface ProFormItemProps {
+  field: ProFormField;
+  model: Record<string, any>;
+}
+
+const props = defineProps<ProFormItemProps>();
+
+/** 解析字段组件参数，支持静态对象和函数。 */
+const fieldProps = computed(() => {
+  if (!props.field.props) return {};
+  return typeof props.field.props === "function" ? props.field.props(props.model) : props.field.props;
+});
+
+/** 解析字段选项参数，支持静态数组和函数。 */
+const fieldOptions = computed<ProFormOption[]>(() => {
+  if (!props.field.options) return [];
+  return typeof props.field.options === "function" ? props.field.options(props.model) : props.field.options;
+});
+
+/** 根据点路径读取字段值。 */
+function getFieldValue() {
+  return props.field.prop.split(".").reduce<any>((current, key) => current?.[key], props.model);
+}
+
+/** 根据点路径写入字段值。 */
+function setFieldValue(value: unknown) {
+  const pathList = props.field.prop.split(".");
+  const lastKey = pathList.pop();
+  if (!lastKey) return;
+
+  const target = pathList.reduce<Record<string, any>>((current, key) => {
+    if (!current[key] || typeof current[key] !== "object") {
+      current[key] = {};
+    }
+    return current[key];
+  }, props.model);
+
+  target[lastKey] = value;
+}
+
+/** 统一接管字段值的双向绑定。 */
+const fieldValue = computed({
+  get: () => getFieldValue(),
+  set: value => setFieldValue(value)
+});
+
+/** 统一处理数组型上传字段。 */
+const multipleFileValue = computed({
+  get: () => (Array.isArray(fieldValue.value) ? fieldValue.value : []),
+  set: value => setFieldValue(value)
+});
+
+/**
+ * 将多图上传字段兼容为 UploadImgs 所需的 UploadUserFile[]，
+ * 并在回写时根据原始数据结构恢复为 string[] 或 UploadUserFile[]。
+ */
+const multipleImageFileValue = computed<UploadUserFile[]>({
+  get: () => {
+    if (!Array.isArray(fieldValue.value)) return [];
+    return fieldValue.value.map((item: string | UploadUserFile) => {
+      if (typeof item === "string") {
+        return {
+          name: item.split("/").pop() ?? "image",
+          url: item
+        };
+      }
+      return item;
+    });
+  },
+  set: value => {
+    const shouldStoreObjectList =
+      Array.isArray(fieldValue.value) && fieldValue.value.some(item => typeof item === "object" && item !== null);
+    if (shouldStoreObjectList) {
+      setFieldValue(value);
+      return;
+    }
+    setFieldValue(value.map(item => item.url ?? "").filter(Boolean));
+  }
+});
+
+/** 统一处理字符串数组字段。 */
+const multipleStringValue = computed({
+  get: () => (Array.isArray(fieldValue.value) ? fieldValue.value : []),
+  set: value => setFieldValue(value)
+});
+
+/** 统一处理键值对数组字段。 */
+const multipleKvValue = computed({
+  get: () => (Array.isArray(fieldValue.value) ? fieldValue.value : []),
+  set: value => setFieldValue(value)
+});
+</script>

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

@@ -0,0 +1,120 @@
+<template>
+  <el-form ref="formRef" :model="model" :rules="formRules" :label-width="labelWidth" v-bind="$attrs">
+    <el-row :gutter="gutter">
+      <template v-for="field in visibleFields" :key="field.prop">
+        <span v-if="field.rowBreakBefore" class="pro-form__row-break" aria-hidden="true" />
+        <el-col :span="field.colSpan ?? colSpan">
+          <el-form-item :label="field.label" :prop="field.prop" :rules="field.rules" v-bind="resolveFieldItemProps(field)">
+            <template v-if="field.labelTooltip" #label>
+              <div class="pro-form__label">
+                <span>{{ field.label }}</span>
+                <el-tooltip placement="bottom" effect="light">
+                  <template #content>{{ field.labelTooltip }}</template>
+                  <el-icon class="pro-form__label-icon">
+                    <QuestionFilled />
+                  </el-icon>
+                </el-tooltip>
+              </div>
+            </template>
+            <ProFormItem :field="field" :model="model">
+              <template v-for="slotName in slotNames" #[slotName]="slotScope">
+                <slot :name="slotName" v-bind="slotScope" />
+              </template>
+            </ProFormItem>
+          </el-form-item>
+        </el-col>
+      </template>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup lang="ts" name="ProForm">
+import { computed, ref, useSlots } from "vue";
+import { QuestionFilled } from "@element-plus/icons-vue";
+import type { FormInstance, FormRules } from "element-plus";
+import type { ProFormField } from "../../components/ProForm/interface";
+import ProFormItem from "./components/ProFormItem.vue";
+
+/** ProForm 组件属性。 */
+interface ProFormProps {
+  model: Record<string, any>;
+  fields: ProFormField[];
+  rules?: FormRules;
+  labelWidth?: string;
+  gutter?: number;
+  colSpan?: number;
+}
+
+const props = withDefaults(defineProps<ProFormProps>(), {
+  rules: () => ({}),
+  labelWidth: "110px",
+  gutter: 20,
+  colSpan: 24
+});
+defineSlots<Record<string, (props: any) => any>>();
+
+const slots = useSlots();
+const formRef = ref<FormInstance>();
+
+/** 计算当前可见的表单字段。 */
+const visibleFields = computed(() => {
+  return props.fields.filter(field => (field.visible ? field.visible(props.model) : true));
+});
+
+/** 解析字段级表单项参数，支持静态对象和函数。 */
+function resolveFieldItemProps(field: ProFormField) {
+  if (!field.itemProps) return {};
+  return typeof field.itemProps === "function" ? field.itemProps(props.model) : field.itemProps;
+}
+
+/** 汇总外部传入的插槽名称，便于向下透传。 */
+const slotNames = computed(() => Object.keys(slots));
+
+/** 合并表单规则，优先使用字段自身规则。 */
+const formRules = computed(() => {
+  const mergedRules: FormRules = { ...props.rules };
+  visibleFields.value.forEach(field => {
+    if (!field.rules?.length) return;
+    mergedRules[field.prop] = field.rules;
+  });
+  return mergedRules;
+});
+
+/** 校验表单。 */
+async function validate() {
+  if (!formRef.value) return false;
+  return formRef.value.validate().catch(() => false);
+}
+
+/** 重置表单。 */
+function resetFields() {
+  formRef.value?.resetFields();
+}
+
+/** 清理表单校验状态。 */
+function clearValidate(props?: string | string[]) {
+  formRef.value?.clearValidate(props);
+}
+
+defineExpose({
+  validate,
+  resetFields,
+  clearValidate
+});
+</script>
+
+<style scoped lang="scss">
+.pro-form__row-break {
+  flex: 0 0 100%;
+  height: 0;
+}
+.pro-form__label {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+}
+.pro-form__label-icon {
+  color: var(--el-color-primary);
+  cursor: pointer;
+}
+</style>

package/dist/package/src/components/ProForm/interface/index.ts

@@ -0,0 +1,74 @@
+import type { FormItemRule } from "element-plus";
+
+/** ProForm 支持的字段组件类型。 */
+export type ProFormComponentType =
+  | "input"
+  | "password"
+  | "textarea"
+  | "input-number"
+  | "segmented"
+  | "switch"
+  | "checkbox"
+  | "select"
+  | "dict"
+  | "radio-group"
+  | "checkbox-group"
+  | "tree-select"
+  | "date-picker"
+  | "cron-expression"
+  | "transfer"
+  | "image-upload"
+  | "images-upload"
+  | "file-upload"
+  | "files-upload"
+  | "rich-text"
+  | "dynamic-list"
+  | "kv-list"
+  | "slot";
+
+/** ProForm 选择型字段选项。 */
+export interface ProFormOption {
+  label: string;
+  value: string | number | boolean;
+  disabled?: boolean;
+  children?: ProFormOption[];
+  /** Element Plus 懒加载树节点是否为叶子节点。 */
+  isLeaf?: boolean;
+}
+
+/** ProForm 字段配置。 */
+export interface ProFormField {
+  /** 字段绑定路径，支持点路径访问嵌套对象。 */
+  prop: string;
+  /** 表单项标题。 */
+  label: string;
+  /** 字段渲染组件类型。 */
+  component: ProFormComponentType;
+  /** 字段组件参数，支持按当前表单模型动态生成。 */
+  props?: Record<string, any> | ((model: Record<string, any>) => Record<string, any>);
+  /** Element Plus 表单项参数，支持按当前表单模型动态生成。 */
+  itemProps?: Record<string, any> | ((model: Record<string, any>) => Record<string, any>);
+  /** 选择型字段选项，支持按当前表单模型动态生成。 */
+  options?: ProFormOption[] | ((model: Record<string, any>) => ProFormOption[]);
+  /** 栅格占位列数。 */
+  colSpan?: number;
+  /** 是否在当前字段前强制换行。 */
+  rowBreakBefore?: boolean;
+  /** 自定义插槽名称。 */
+  slotName?: string;
+  /** 标题提示文案。 */
+  labelTooltip?: string;
+  /** 字段校验规则。 */
+  rules?: FormItemRule[];
+  /** 字段是否显示。 */
+  visible?: (model: Record<string, any>) => boolean;
+  /** 单个复选框显示文案，未配置时使用表单项标题。 */
+  checkboxLabel?: string;
+}
+
+/** ProForm 对外暴露的实例方法。 */
+export interface ProFormInstance {
+  validate: () => Promise<boolean | undefined> | undefined;
+  resetFields: () => void;
+  clearValidate: (props?: string | string[]) => void;
+}

package/dist/package/src/components/ProTable/components/ColSetting.vue

@@ -0,0 +1,45 @@
+<template>
+  <!-- 列设置 -->
+  <el-drawer v-model="drawerVisible" title="列设置" size="450px">
+    <div class="table-main">
+      <el-table :data="colSetting" :border="true" row-key="prop" default-expand-all :tree-props="{ children: '_children' }">
+        <el-table-column prop="label" align="left" label="列名" />
+        <el-table-column v-slot="scope" prop="isShow" align="center" label="显示">
+          <el-switch v-model="scope.row.isShow"></el-switch>
+        </el-table-column>
+        <el-table-column v-slot="scope" prop="sortable" align="center" label="排序">
+          <el-switch v-model="scope.row.sortable"></el-switch>
+        </el-table-column>
+        <template #empty>
+          <div class="table-empty">
+            <img src="../../../assets/images/notData.png" alt="notData" />
+            <div>暂无可配置列</div>
+          </div>
+        </template>
+      </el-table>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts" name="ColSetting">
+import { ref } from "vue";
+import { ColumnProps } from "../../../components/ProTable/interface";
+
+defineProps<{ colSetting: ColumnProps[] }>();
+
+const drawerVisible = ref<boolean>(false);
+
+const openColSetting = () => {
+  drawerVisible.value = true;
+};
+
+defineExpose({
+  openColSetting
+});
+</script>
+
+<style scoped lang="scss">
+.cursor-move {
+  cursor: move;
+}
+</style>

package/dist/package/src/components/ProTable/components/Pagination.vue

@@ -0,0 +1,58 @@
+<template>
+  <!-- 分页组件 -->
+  <el-pagination
+    background
+    :current-page="currentPage"
+    :page-size="pageSize"
+    :page-sizes="[10, 25, 50, 100]"
+    :total="pageable.total"
+    :size="globalStore?.assemblySize ?? 'default'"
+    layout="total, sizes, prev, pager, next, jumper"
+    @update:current-page="handleCurrentPageUpdate"
+    @update:page-size="handlePageSizeUpdate"
+  />
+</template>
+
+<script setup lang="ts" name="Pagination">
+import { computed } from "vue";
+import { useGlobalStore } from "../../../stores/modules/global";
+const globalStore = useGlobalStore();
+
+/** ProTable 分页状态。 */
+interface Pageable {
+  page_num: number;
+  page_size: number;
+  total: number;
+}
+
+/** ProTable 分页组件属性和变更回调。 */
+interface PaginationProps {
+  pageable: Pageable;
+  handleSizeChange: (size: number) => void;
+  handleCurrentChange: (currentPage: number) => void;
+}
+
+const props = defineProps<PaginationProps>();
+
+const currentPage = computed({
+  get: () => props.pageable.page_num,
+  set: value => props.handleCurrentChange(value)
+});
+
+const pageSize = computed({
+  get: () => props.pageable.page_size,
+  set: value => props.handleSizeChange(value)
+});
+
+/** 同步当前页码更新，兼容 Element Plus 当前推荐写法。 */
+function handleCurrentPageUpdate(value: number) {
+  if (value === currentPage.value) return;
+  currentPage.value = value;
+}
+
+/** 同步分页大小更新，兼容 Element Plus 当前推荐写法。 */
+function handlePageSizeUpdate(value: number) {
+  if (value === pageSize.value) return;
+  pageSize.value = value;
+}
+</script>