rw-admin-ui 1.0.0

package/packages/basic-table/src/mixins/fetch.js

@@ -0,0 +1,117 @@
+/**
+ * 远程请求与结果应用混入（Fetch Mixin）
+ * 职责：
+ * - 构造请求参数（分页/搜索/钩子）
+ * - 执行接口调用并处理结果
+ * - 异常捕获与错误事件通知
+ * 性能与安全：
+ * - 避免不必要的重复请求（依赖调用方控制）
+ * - 捕获并记录异常，避免中断渲染
+ */
+import { createFetchParams, getByPath, ensureKeys as uEnsureKeys } from '../utils';
+
+export default {
+  methods: {
+    /**
+     * 为数据源补齐稳定的 key 字段
+     * @param {Array<Object>} list 原始数据源
+     * @returns {Array<Object>} 带 key 的数据源
+     */
+    ensureKeys(list) {
+      return uEnsureKeys(list, this.autoCreateKey, this.rowKey); // 使用工具函数补齐 key
+    },
+    /**
+     * 远程刷新数据（携带分页与搜索条件）
+     * @param {Object} [extraParams={}] 额外参数（可包含 pagination/searchInfo）
+     * @returns {void}
+     */
+    reload(extraParams = {}) {
+      const requestApi = this.api; // 请求函数由外部传入
+      if (typeof requestApi !== 'function') return; // 非函数时不执行
+      this.internalLoading = true; // 开始 loading
+      const currentPage = this.internalPagination.currentPage; // 当前页码
+      const pageSize = this.internalPagination.pageSize; // 每页条数
+      const formState = (this.formActions && typeof this.formActions.getFieldsValue === 'function')
+        ? (this.formActions.getFieldsValue() || {})
+        : (this.internalSearchInfo || {});
+      const extra = extraParams || {}; // 额外参数对象
+      const paginationPayload = (() => {
+        const basePagination = { currentPage, pageSize }; // 基础分页信息
+        if (extra && typeof extra.pagination === 'object') {
+          return { ...basePagination, ...extra.pagination }; // 优先使用对象覆盖
+        }
+        if (typeof extra.currentPage === 'number' || typeof extra.pageSize === 'number') {
+          const overridden = { ...basePagination }; // 单字段覆盖
+          if (typeof extra.currentPage === 'number') {
+            overridden.currentPage = extra.currentPage;
+          }
+          if (typeof extra.pageSize === 'number') {
+            overridden.pageSize = extra.pageSize;
+          }
+          return overridden;
+        }
+        return basePagination; // 默认返回
+      })();
+      const searchPayload = (() => {
+        if (extra && typeof extra.searchInfo === 'object') {
+          return { ...formState, ...extra.searchInfo }; // 显式 searchInfo
+        }
+        if (extra && Object.keys(extra).length) {
+          return { ...formState, ...extra }; // 其余字段并入
+        }
+        return { ...formState }; // 默认表单值
+      })();
+      const finalParams = createFetchParams({
+        pagination: paginationPayload,
+        fetchSetting: this.fetchSetting,
+        searchInfo: searchPayload,
+        beforeFetch: this.beforeFetch,
+        handleSearchInfoFn: this.handleSearchInfoFn
+      });
+      try {
+        const result = requestApi(finalParams); // 执行请求
+        if (result && result.then) {
+          result.then((response) => {
+            return this.applyApiResult(typeof this.afterFetch === 'function' ? this.afterFetch(response) : response);
+          }).catch((error) => {
+            this.lastFetchError = error; // 记录最近错误
+            this.$emit('fetch-error', error); // 对外通知错误
+          }).finally(() => {
+            this.internalLoading = false; // 结束 loading
+          });
+        } else {
+          this.applyApiResult(typeof this.afterFetch === 'function' ? this.afterFetch(result) : result);
+          this.internalLoading = false;
+        }
+      } catch (error) {
+        this.lastFetchError = error; // 同步错误
+        this.$emit('fetch-error', error); // 通知错误
+        this.internalLoading = false; // 结束 loading
+      }
+    },
+    /**
+     * 应用接口返回数据至表格
+     * @param {Object|Array} response 接口返回数据
+     * @returns {void}
+     */
+    applyApiResult(response) {
+      if (!response) {
+        this.internalData = []; this.rawResult = response; return; // 空响应直接清空
+      }
+      if (Array.isArray(response)) {
+        this.internalData = this.ensureKeys(response); // 直接数组时视为列表
+        this.rawResult = response; // 记录原始返回
+        return;
+      }
+      const { listField, totalField } = this.fetchSetting;
+      const listByMapping = getByPath(response, listField); // 按映射读取列表
+      const items = listByMapping != null ? listByMapping : (response.items || response.list || response.data || []); // 兼容多字段
+      const totalByMapping = getByPath(response, totalField); // 按映射读取总数
+      const total = totalByMapping != null ? totalByMapping : (response.page && response.page.total); // 兼容 page.total
+      this.internalData = Array.isArray(items) ? this.ensureKeys(items) : []; // 应用 key
+      if (typeof total === 'number') this.internalPagination.total = total; // 写入总数
+      this.rawResult = response; // 记录原始返回
+      this.$emit('fetch-success', { items: this.internalData, total: this.internalPagination.total }); // 对外通知成功
+    }
+  }
+};

package/packages/basic-table/src/mixins/form.js

@@ -0,0 +1,29 @@
+/**
+ * 搜索表单混入（Form Mixin）
+ * 职责：
+ * - 接收表单方法集（@register）
+ * - 处理表单提交事件并触发数据刷新
+ */
+export default {
+  methods: {
+    /**
+     * 表单注册回调
+     * @param {Object} actions 表单方法集（含 getFieldsValue 等）
+     * @returns {void}
+     */
+    onFormRegister(actions) {
+      this.formActions = actions; // 缓存方法集以供 reload 使用
+    },
+    /**
+     * 表单提交回调
+     * @param {Object} payload 表单提交的搜索条件
+     * @returns {void}
+     */
+    onFormSubmit(payload) {
+      this.internalSearchInfo = payload || {}; // 写入内部搜索条件
+      this.$emit('form-submit', payload); // 对外发出提交事件
+      this.$emit('update:searchInfo', payload); // 支持 v-model:searchInfo
+      this.reload({}); // 刷新数据
+    }
+  }
+};

package/packages/basic-table/src/mixins/pagination.js

@@ -0,0 +1,57 @@
+/**
+ * 分页行为混入（Pagination Mixin）
+ * 职责：
+ * - 归一化分页配置
+ * - 控制分页展示开关
+ * - 处理页码与页容量变化事件
+ * 类型提示：
+ * - 使用 JSDoc 描述参数与返回值，便于编辑器类型推断
+ */
+import { normalizePagination as uNormalizePagination } from '../utils';
+
+export default {
+  computed: {
+    /**
+     * 是否显示分页组件
+     * @returns {boolean}
+     */
+    showPagination() {
+      if (!this.showPaginationFlag) return false; // 显示开关为否时直接不显示
+      const p = this.internalPagination; // 读取内部分页状态
+      return !!p && (p.total != null || p.pageCount != null); // 只有在存在总数或页数时显示
+    }
+  },
+  methods: {
+    /**
+     * 归一化分页配置
+     * @param {Object} paginationConfig 原始分页配置
+     * @returns {Object} 规范化后的分页配置
+     */
+    normalizePagination(paginationConfig) {
+      return uNormalizePagination(paginationConfig); // 调用工具函数进行安全归一化
+    },
+    /**
+     * 处理页码变化
+     * @param {number} nextPage 新页码
+     * @returns {void}
+     */
+    handlePageChange(nextPage) {
+      this.internalPagination.currentPage = nextPage; // 更新页码
+      if (this.clearSelectOnPageChange) this.clearSelectedRowKeys(); // 清空选中行（可选）
+      this.reload(); // 重新请求数据
+      this.$emit('page-change', nextPage); // 对外通知
+    },
+    /**
+     * 处理每页容量变化
+     * @param {number} nextPageSize 新的每页容量
+     * @returns {void}
+     */
+    handlePageSizeChange(nextPageSize) {
+      this.internalPagination.pageSize = nextPageSize; // 更新容量
+      this.internalPagination.currentPage = 1; // 重置到第 1 页
+      if (this.clearSelectOnPageChange) this.clearSelectedRowKeys(); // 清空选中行（可选）
+      this.reload(); // 重新请求数据
+      this.$emit('page-size-change', nextPageSize); // 对外通知
+    }
+  }
+};

package/packages/basic-table/src/mixins/watchers.js

@@ -0,0 +1,60 @@
+/**
+ * 响应式监听混入（Watchers Mixin）
+ * 职责：
+ * - 同步外部 props 变更到内部状态
+ * - 保持组件受控/非受控的兼容性
+ */
+export default {
+  watch: {
+    dataSource: {
+      immediate: true,
+      /**
+       * 监听数据源变更，补齐 key 后写入内部态
+       * @param {Array<Object>} nextDataSource 新数据源
+       */
+      handler(nextDataSource) {
+        this.internalData = Array.isArray(nextDataSource) ? this.ensureKeys(nextDataSource) : [];
+      }
+    },
+    columns: {
+      immediate: true,
+      /**
+       * 监听列配置变更，写入内部态
+       * @param {Array<Object>} nextColumns 新列配置
+       */
+      handler(nextColumns) {
+        this.internalColumns = Array.isArray(nextColumns) ? nextColumns : [];
+      }
+    },
+    loading: {
+      immediate: true,
+      /**
+       * 监听外部 loading 状态
+       * @param {boolean} nextLoading 新的 loading 状态
+       */
+      handler(nextLoading) {
+        this.internalLoading = !!nextLoading;
+      }
+    },
+    pagination: {
+      immediate: true,
+      /**
+       * 监听分页配置变更
+       * @param {Object} nextPagination 新的分页配置
+       */
+      handler(nextPagination) {
+        this.internalPagination = this.normalizePagination(nextPagination);
+      }
+    },
+    searchInfo: {
+      immediate: true,
+      /**
+       * 监听外部搜索条件（受控）
+       * @param {Object} nextSearchInfo 新的搜索条件
+       */
+      handler(nextSearchInfo) {
+        this.internalSearchInfo = nextSearchInfo || {};
+      }
+    }
+  }
+};

package/packages/basic-table/src/overflow-cell.js

@@ -0,0 +1,35 @@
+/**
+ * 溢出单元格组件（OverflowCell）
+ * 职责：
+ * - 检测文本是否溢出
+ * - 溢出时使用 Popover 展示完整内容
+ */
+import ElPopover from 'rowinself-ui/packages/popover';
+
+export default {
+  name: 'ElBasicTableOverflowCell',
+  props: { text: String },
+  data() { return { overflow: false }; },
+  mounted() {
+    const el = this.$refs.ref; // 被测量的文本容器
+    if (el) this.overflow = el.scrollWidth > el.clientWidth; // 根据实际宽度判断是否溢出
+  },
+  render(h) {
+    // 渲染被测量文本节点
+    const refNode = h('span', {
+      ref: 'ref',
+      style: { display: 'block', width: '100%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
+      domProps: { innerText: this.text || '' }
+    });
+    // 当溢出时，使用 Popover 包裹并展示完整文本
+    if (this.overflow) {
+      return h(
+        ElPopover,
+        { props: { trigger: 'hover', placement: 'top', content: this.text || '' } },
+        [h('span', { slot: 'reference' }, [refNode])]
+      );
+    }
+    // 否则直接显示省略文本
+    return refNode;
+  }
+};

package/packages/basic-table/src/table-action.vue

@@ -0,0 +1,66 @@
+<script>
+import ElLink from 'rowinself-ui/packages/link';
+import ElPopconfirm from 'rowinself-ui/packages/popconfirm';
+
+export default {
+  name: 'TableAction',
+  components: { ElLink, ElPopconfirm },
+  props: {
+    actions: { type: Array, default: () => [] },
+    size: { type: String, default: 'mini' }
+  },
+  methods: {
+    renderButton(h, act) {
+      const type = act.color || act.type || 'primary';
+      const btn = h(
+        ElLink,
+        {
+          props: { type, size: this.size, icon: act.icon, underline: false },
+          on: {
+            click: () => {
+              if (!act.popConfirm && typeof act.onClick === 'function') {
+                act.onClick();
+              }
+            }
+          }
+        },
+        [act.text || act.label || '']
+      );
+
+      if (act.popConfirm) {
+        const pc = act.popConfirm || {};
+        return h(ElPopconfirm, {
+          props: {
+            title: pc.title || '',
+            confirmButtonType: pc.type || 'primary',
+            cancelButtonType: pc.cancelType || 'primary',
+            confirmButtonText: pc.okText || pc.confirmText || '确定',
+            cancelButtonText: pc.cancelText || '取消',
+            customClass: 'el-table-popconfirm'
+          },
+          on: {
+            confirm: () => {
+              if (typeof act.onClick === 'function') {
+                act.onClick();
+              }
+            }
+          }
+        }, [
+          h(ElLink, {
+            slot: 'reference',
+            props: { type, size: this.size, icon: act.icon, underline: false }
+          }, [act.text || act.label || ''])
+        ]);
+      }
+      return btn;
+    }
+  },
+  render(h) {
+    const children = (this.actions || []).map((a, i) => this.renderButton(h, a));
+    return h('span', {
+      class: 'el-table-action',
+      style: { }
+    }, children);
+  }
+};
+</script>

package/packages/basic-table/src/utils.js

@@ -0,0 +1,161 @@
+/**
+ * 工具函数集合：列映射、分页归一化、参数生成、数据补齐
+ * 类型提示：通过 JSDoc 提供函数参数与返回值类型信息
+ */
+
+/**
+ * 根据点号路径从对象中获取嵌套值
+ * @param {Object} obj 源对象
+ * @param {string} path 点号路径，如 'a.b.c'
+ * @returns {*|undefined} 取到的值或 undefined
+ */
+export function getByPath(obj, path) {
+  if (!obj || !path) return undefined;
+  const keys = String(path).split('.');
+  let result = obj;
+  for (const key of keys) {
+    if (result == null) return undefined;
+    result = result[key];
+  }
+  return result;
+}
+
+/**
+ * 为数据源补齐稳定的 key 字段
+ * @param {Array<Object>} list 原始数据源
+ * @param {boolean} [autoCreate=true] 是否自动生成 key
+ * @param {string|Function} rowKey 主键字段名或函数
+ * @returns {Array<Object>} 处理后的数组
+ */
+export function ensureKeys(list, autoCreate = true, rowKey) {
+  if (!Array.isArray(list)) return [];
+  const hasKey = list.every((r) => r && (r.key !== undefined));
+  if (hasKey || (!autoCreate && !rowKey)) return list;
+  return list.map((r, idx) => ({ key: r.key != null ? r.key : (r.id != null ? r.id : idx + 1), ...r }));
+}
+
+/**
+ * 归一化分页配置，提供默认值与安全检查
+ * @param {Object} p 原始分页配置
+ * @returns {Object} 规范化后的分页参数对象
+ */
+export function normalizePagination(p) {
+  const src = p || {};
+  /** 每页条数 */
+  const pageSize = typeof src.pageSize === 'number' ? src.pageSize : 10;
+  /** 当前页码 */
+  const currentPage = typeof src.currentPage === 'number' ? src.currentPage : 1;
+  return {
+    /** 总条数 */
+    total: typeof src.total === 'number' ? src.total : 0,
+    /** 总页数（可选） */
+    pageCount: typeof src.pageCount === 'number' ? src.pageCount : null,
+    /** 每页条数 */
+    pageSize,
+    /** 当前页码 */
+    currentPage,
+    /** 分页器按钮数量 */
+    pagerCount: typeof src.pagerCount === 'number' ? src.pagerCount : 5,
+    /** 分页布局 */
+    layout: src.layout || 'total, sizes, prev, pager, next, jumper',
+    /** 可选的每页条数 */
+    pageSizes: Array.isArray(src.pageSizes) ? src.pageSizes : [10, 20, 30, 40, 50, 100],
+    /** 背景样式开关 */
+    background: !!src.background,
+    /** 单页隐藏分页器 */
+    hideOnSinglePage: !!src.hideOnSinglePage,
+    /** 小尺寸分页器 */
+    small: !!src.small
+  };
+}
+
+/**
+ * 生成最终请求参数（分页 + 搜索 + 钩子）
+ * @param {Object} options 选项
+ * @param {Object} options.pagination 分页信息（含 currentPage/pageSize）
+ * @param {Object} options.fetchSetting 字段映射（pageField/sizeField）
+ * @param {Object} options.searchInfo 搜索条件
+ * @param {Function} [options.beforeFetch] 请求前处理钩子
+ * @param {Function} [options.handleSearchInfoFn] 搜索条件处理钩子
+ * @returns {Object} 最终请求参数
+ */
+export function createFetchParams({ pagination, fetchSetting, searchInfo, beforeFetch, handleSearchInfoFn }) {
+  const fs = fetchSetting || {};
+  // 支持点号路径：取最后一段作为请求字段名（如 'page.perPage' -> 'perPage'）
+  const pageFieldPath = fs.pageField || 'page';
+  const sizeFieldPath = fs.sizeField || 'pageSize';
+  const pageFieldKey = String(pageFieldPath).split('.').pop();
+  const sizeFieldKey = String(sizeFieldPath).split('.').pop();
+  // 组装分页参数（按映射字段名）
+  let params = { [pageFieldKey]: pagination.currentPage, [sizeFieldKey]: pagination.pageSize };
+  // 合并搜索条件（先处理 handleSearchInfoFn）
+  const si = searchInfo || {};
+  /** 处理后的搜索条件 */
+  const handledSI = typeof handleSearchInfoFn === 'function' ? handleSearchInfoFn(si) : si;
+  /** 请求前处理 */
+  params = Object.assign({}, handledSI, params);
+  // 请求前钩子处理 beforeFetch
+  return typeof beforeFetch === 'function' ? beforeFetch(params) : params;
+}
+
+/**
+ * 将列配置转换为渲染列（含前置特殊列）
+ * @param {Object} options 选项
+ * @param {Array<Object>} options.columns 列配置数组
+ * @param {boolean} options.ellipsis 全局溢出省略
+ * @param {boolean} options.showIndexColumn 是否显示索引列
+ * @param {string} options.indexColumnTitle 索引列标题
+ * @param {Object} options.indexColumnProps 索引列属性
+ * @param {Object|boolean} options.rowSelection 选择列配置或开关
+ * @returns {Array<Object>} 渲染列数组
+ */
+export function mapColumns({ columns, ellipsis, showIndexColumn, indexColumnTitle, indexColumnProps, rowSelection }) {
+  // console.log('mapColumns indexColumnProps:', indexColumnProps);
+  const baseCols = (columns || []).map((c, i) => ({
+    key: c.key != null ? c.key : (c.dataIndex != null ? c.dataIndex : (c.prop != null ? c.prop : (c.field != null ? c.field : `col_${i}`))),
+    title: c.title,
+    label: c.label,
+    // 将 field 作为 dataIndex/prop 的后备，以兼容新版配置
+    prop: c.prop != null ? c.prop : (c.dataIndex != null ? c.dataIndex : c.field),
+    dataIndex: c.dataIndex != null ? c.dataIndex : (c.prop != null ? c.prop : c.field),
+    // 同时保留 field 字段，便于 bodyCell 判断使用 column.field
+    field: c.field,
+    width: c.width,
+    minWidth: c.minWidth,
+    /** 对齐方式/表头对齐 */
+    align: c.align,
+    headerAlign: c.headerAlign,
+    /** 固定列（left/right） */
+    fixed: c.fixed,
+    /** 是否可排序 */
+    sortable: c.sortable,
+    /** 列类型（default/selection/index 等） */
+    type: c.type,
+    /** 具名插槽名称 */
+    slot: c.slot,
+    /** 溢出省略（优先列级；否则使用全局 ellipsis） */
+    showOverflowTooltip: c.showOverflowTooltip != null ? c.showOverflowTooltip : !!ellipsis,
+    children: Array.isArray(c.children) ? c.children : undefined,
+    /** 是否自动合并相同值的行 */
+    autoSpan: c.autoSpan
+  }));
+  // 前置特殊列（索引、选择）
+  const special = [];
+  if (showIndexColumn) {
+    console.log("indexColumnTitle::: ",indexColumnTitle)
+    special.push({
+      key: '__index__',
+      type: 'default', // 改为默认列以支持宽度自适应（type=index 时宽度固定）
+      title: indexColumnTitle !== undefined ? indexColumnTitle : '序号',
+      dataIndex: '',
+      align: (indexColumnProps && indexColumnProps.align) || 'center',
+      width: (indexColumnProps && indexColumnProps.width !== undefined) ? indexColumnProps.width : undefined,
+      minWidth: (indexColumnProps && indexColumnProps.minWidth !== undefined) ? indexColumnProps.minWidth : '45px',
+      index: (indexColumnProps && indexColumnProps.index) || undefined
+    });
+  }
+  if (rowSelection) {
+    special.push({ key: '__selection__', type: 'selection', align: 'center', title: '', dataIndex: '' });
+  }
+  return special.concat(baseCols);
+}

package/packages/basic-table-column/index.js

@@ -0,0 +1,7 @@
+import ElBasicTableColumn from '../basic-table/src/basic-table-column';
+
+ElBasicTableColumn.install = function(Vue) {
+  Vue.component(ElBasicTableColumn.name, ElBasicTableColumn);
+};
+
+export default ElBasicTableColumn;

package/packages/breadcrumb/index.js

@@ -0,0 +1,8 @@
+import ElBreadcrumb from './src/breadcrumb';
+
+/* istanbul ignore next */
+ElBreadcrumb.install = function(Vue) {
+  Vue.component(ElBreadcrumb.name, ElBreadcrumb);
+};
+
+export default ElBreadcrumb;

package/packages/breadcrumb/src/breadcrumb-item.vue

@@ -0,0 +1,44 @@
+<template>
+  <span class="el-breadcrumb__item">
+    <span
+      :class="['el-breadcrumb__inner', to ? 'is-link' : '']"
+      ref="link"
+      role="link">
+      <slot></slot>
+    </span>
+    <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>
+    <span v-else class="el-breadcrumb__separator" role="presentation">{{ separator }}</span>
+  </span>
+</template>
+<script>
+  export default {
+    name: 'ElBreadcrumbItem',
+    props: {
+      to: {
+        type: [String, Object],
+        default: ''
+      },
+      replace: Boolean
+    },
+    data() {
+      return {
+        separator: '',
+        separatorClass: ''
+      };
+    },
+
+    inject: ['elBreadcrumb'],
+
+    mounted() {
+      this.separator = this.elBreadcrumb.separator;
+      this.separatorClass = this.elBreadcrumb.separatorClass;
+      const link = this.$refs.link;
+      link.setAttribute('role', 'link');
+      link.addEventListener('click', _ => {
+        const { to, $router } = this;
+        if (!to || !$router) return;
+        this.replace ? $router.replace(to) : $router.push(to);
+      });
+    }
+  };
+</script>

package/packages/breadcrumb/src/breadcrumb.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="el-breadcrumb" aria-label="Breadcrumb" role="navigation">
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElBreadcrumb',
+
+    props: {
+      separator: {
+        type: String,
+        default: '/'
+      },
+      separatorClass: {
+        type: String,
+        default: ''
+      }
+    },
+
+    provide() {
+      return {
+        elBreadcrumb: this
+      };
+    },
+
+    mounted() {
+      const items = this.$el.querySelectorAll('.el-breadcrumb__item');
+      if (items.length) {
+        items[items.length - 1].setAttribute('aria-current', 'page');
+      }
+    }
+  };
+</script>

package/packages/breadcrumb-item/index.js

@@ -0,0 +1,8 @@
+import ElBreadcrumbItem from '../breadcrumb/src/breadcrumb-item';
+
+/* istanbul ignore next */
+ElBreadcrumbItem.install = function(Vue) {
+  Vue.component(ElBreadcrumbItem.name, ElBreadcrumbItem);
+};
+
+export default ElBreadcrumbItem;

package/packages/button/index.js

@@ -0,0 +1,8 @@
+import ElButton from './src/button';
+
+/* istanbul ignore next */
+ElButton.install = function(Vue) {
+  Vue.component(ElButton.name, ElButton);
+};
+
+export default ElButton;

package/packages/button/src/button-group.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="el-button-group">
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElButtonGroup'
+  };
+</script>