joy-admin-components 0.1.23 → 0.1.25

package/package.json

@@ -1,7 +1,18 @@
 {
   "name": "joy-admin-components",
-  "version": "0.1.23",
-  "main": "./src/index.js",
+  "version": "0.1.25",
+  "main": "./dist/joy-admin-components.umd.js",
+  "module": "./dist/joy-admin-components.es.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    "./components/*": {
+      "types": "./src/components/*/index.d.ts",
+      "import": "./src/components/*/index.vue"
+    }
+  },
+  "files": [
+    "src/components"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -15,7 +26,8 @@
     "vue": "^3.3.4",
     "element-plus": "^2.3.8",
     "@vitejs/plugin-vue": "^4.2.3",
-    "vite": "^4.4.6"
+    "vite": "^4.4.6",
+    "vue-i18n": "^9.10.1"
   },
   "devDependencies": {}
 }

package/src/components/CmpDictionary/index.d.ts

@@ -0,0 +1,43 @@
+import { DefineComponent } from 'vue';
+import { SelectProps } from 'element-plus';
+
+/**
+ * 字典选择器组件 - 基于 Element Plus Select 封装
+ * 支持 API 请求数据、全选、多语言等功能
+ */
+export interface CmpDictionaryProps extends /* @vue-ignore */ Partial<SelectProps> {
+  /** 获取下拉数据的 API 函数 */
+  api?: () => Promise<{ data: any[] }>;
+  /** 是否显示全选复选框（仅多选模式），默认 true */
+  showCheckAll?: boolean;
+  /** 选项点击回调函数 */
+  optionClick?: (item: any) => void;
+  /** 多选模式下的最大选择数量 */
+  maxLimit?: number;
+  /** 多选模式下的最小选择数量 */
+  minLimit?: number;
+  /** 静态数据源（如果提供则不使用 api） */
+  data?: any[];
+  /** 字段映射配置 */
+  labelValue?: {
+    label?: string;
+    labelEn?: string;
+    value?: string;
+  };
+  /** 是否使用本地 i18n 翻译 label，默认 false */
+  changeLocal?: boolean;
+  /** v-model 绑定值 */
+  modelValue?: any;
+}
+
+export interface CmpDictionaryEmits {
+  /** API 请求成功后触发 */
+  (e: 'success', data: any[]): void;
+  /** 选择值变化时触发 */
+  (e: 'change', value: any): void;
+  /** v-model 更新事件 */
+  (e: 'update:modelValue', value: any): void;
+}
+
+declare const CmpDictionary: DefineComponent<CmpDictionaryProps, {}, any, {}, {}, {}, {}, CmpDictionaryEmits>;
+export default CmpDictionary;

package/src/components/ConfrimButton/index.d.ts

@@ -0,0 +1,19 @@
+import { DefineComponent } from 'vue';
+import { PopconfirmProps } from 'element-plus';
+
+/**
+ * 确认按钮组件 - 基于 Element Plus Popconfirm 封装
+ * 点击后弹出确认气泡，确认后执行操作（自动防抖 500ms）
+ * 继承 Element Plus ElPopconfirm 所有属性
+ */
+export interface ConfrimButtonProps extends /* @vue-ignore */ Partial<PopconfirmProps> {}
+
+export interface ConfrimButtonEmits {
+  /** 确认操作时触发（已防抖处理） */
+  (e: 'ok'): void;
+  /** 取消操作时触发 */
+  (e: 'no'): void;
+}
+
+declare const ConfrimButton: DefineComponent<ConfrimButtonProps, {}, any, {}, {}, {}, {}, ConfrimButtonEmits>;
+export default ConfrimButton;

package/src/components/ImportButton/index.d.ts

@@ -0,0 +1,20 @@
+import { DefineComponent } from 'vue';
+
+/**
+ * 导入按钮组件 - 文件上传按钮
+ * 点击按钮选择文件，支持自定义文件类型
+ */
+export interface ImportButtonProps {
+  /** 接受的文件类型，默认 '.xlsx,.xls' */
+  accept?: string;
+  /** 按钮加载状态 */
+  loading?: boolean;
+}
+
+export interface ImportButtonEmits {
+  /** 文件选择后触发 */
+  (e: 'fileChange', file: File): void;
+}
+
+declare const ImportButton: DefineComponent<ImportButtonProps, {}, any, {}, {}, {}, {}, ImportButtonEmits>;
+export default ImportButton;

package/src/components/LayOutForm/index.d.ts

@@ -0,0 +1,20 @@
+import { DefineComponent } from 'vue';
+import { FormProps } from 'element-plus';
+
+/**
+ * LayOutForm 组件 - 带栅格布局的表单容器
+ * 继承 Element Plus ElForm 所有属性
+ * 自动为表单项添加栅格布局，支持多列表单
+ */
+export interface LayOutFormProps extends /* @vue-ignore */ FormProps {
+  /** 栅格间隔，默认 20 */
+  gutter?: number;
+}
+
+export interface LayOutFormEmits {
+  /** 组件挂载完成后触发，返回表单 ref */
+  (e: 'ref', formRef: any): void;
+}
+
+declare const LayOutForm: DefineComponent<LayOutFormProps, {}, any, {}, {}, {}, {}, LayOutFormEmits>;
+export default LayOutForm;

package/src/components/ListPage/index.d.ts

@@ -0,0 +1,92 @@
+import { DefineComponent } from 'vue';
+
+/** 搜索表单项 */
+export interface SearchFormItem {
+  /** 字段 key */
+  key: string;
+  /** 字段名称 */
+  name: string;
+  /** 字段值 */
+  value: any;
+  /** 表单项类型 */
+  type?: 'input' | 'select' | 'date' | 'custom' | 'br';
+  /** 日期类型 */
+  dateType?: 'date' | 'daterange' | 'datetimerange';
+  /** 是否隐藏 */
+  hidden?: boolean;
+  /** 自定义渲染函数（type 为 custom 时使用） */
+  render?: () => any;
+  /** 额外配置 */
+  option?: {
+    class?: string;
+    [key: string]: any;
+  };
+}
+
+/** 搜索表单配置 */
+export interface SearchFormConfig {
+  /** 表单项列表 */
+  items: SearchFormItem[];
+  /** 选中的行数据（多选） */
+  selections?: any[];
+  /** 是否显示搜索栏 */
+  showSearch?: boolean;
+  /** 是否显示分页 */
+  showPage?: boolean;
+  /** 是否显示阴影 */
+  showShadow?: boolean;
+  /** 是否显示复选框 */
+  showCheckBox?: boolean;
+}
+
+/** 表格配置 */
+export interface TableConfig {
+  /** 数据格式化函数 */
+  dataFormat?: (data: any[]) => any[];
+  /** 重置回调函数 */
+  reset?: () => void | Promise<void>;
+  /** 自定义配置 */
+  customConfig?: Record<string, any>;
+  /** 列配置 */
+  columnConfig?: Record<string, any>;
+  /** 表格高度 */
+  height?: number | string;
+  [key: string]: any;
+}
+
+/**
+ * ListPage 组件 - 列表页面容器
+ * 集成搜索栏、表格、分页等功能
+ * 基于 VxeTable 实现
+ */
+export interface ListPageProps {
+  /** 表格唯一标识，用于本地存储列设置 */
+  id: string;
+  /** 加载状态 */
+  loading?: boolean;
+  /** 是否立即请求数据，默认 true */
+  immediate?: boolean;
+  /** 搜索表单配置 */
+  searchForm?: SearchFormConfig;
+  /** 获取列表数据的 API 函数 */
+  api?: (params: any) => Promise<{ code: number; data: { rows: any[]; totalRows: number } }>;
+  /** 静态数据源（如果提供则不使用 api） */
+  data?: any[];
+  /** 表格配置 */
+  tableConfig?: TableConfig;
+}
+
+/** ListPage 暴露的方法 */
+export interface ListPageExpose {
+  /** VxeTable 实例 */
+  tableRef: any;
+  /** 刷新列表数据 */
+  getList: (params?: any) => void;
+  /** 获取当前搜索参数 */
+  getPrm: () => any;
+  /** 重新计算表格高度 */
+  calculateTableHeight: () => void;
+}
+
+declare const ListPage: DefineComponent<ListPageProps, {}, any>;
+export default ListPage;

package/src/components/SearchBar/index.d.ts

@@ -0,0 +1,51 @@
+import { DefineComponent } from 'vue';
+
+/** 搜索表单项 */
+export interface SearchBarFormItem {
+  /** 字段 key */
+  key: string;
+  /** 字段名称 */
+  name: string;
+  /** 字段值 */
+  value: any;
+  /** 表单项类型 */
+  type?: 'input' | 'select' | 'date' | 'custom' | 'br';
+  /** 日期类型 */
+  dateType?: 'date' | 'daterange' | 'datetimerange';
+  /** 是否隐藏 */
+  hidden?: boolean;
+  /** 自定义渲染函数（type 为 custom 时使用） */
+  render?: () => any;
+  /** 额外配置 */
+  option?: {
+    class?: string;
+    [key: string]: any;
+  };
+}
+
+/** 搜索表单配置 */
+export interface SearchBarForm {
+  /** 表单项列表 */
+  items: SearchBarFormItem[];
+  /** 表单数据对象 */
+  data?: Record<string, any>;
+}
+
+/**
+ * SearchBar 组件 - 搜索栏
+ * 支持多种表单项类型，可折叠展开
+ */
+export interface SearchBarProps {
+  /** 搜索表单配置 */
+  form: SearchBarForm;
+}
+
+export interface SearchBarEmits {
+  /** 筛选按钮点击时触发 */
+  (e: 'confirm'): void;
+  /** 重置按钮点击时触发 */
+  (e: 'reset'): void;
+}
+
+declare const SearchBar: DefineComponent<SearchBarProps, {}, any, {}, {}, {}, {}, SearchBarEmits>;
+export default SearchBar;

package/.nvmrc

@@ -1 +0,0 @@
-v18.18.0

package/index.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_2570680_gkyjimtz1d.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- <script src="https://cdn.staticfile.net/translate.js/3.1.2/translate.js"></script> -->
-    <title></title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-    <!-- <script>
-      translate.language.setLocal('chinese_simplified'); //设置本地语种（当前网页的语种）。如果不设置，默认自动识别当前网页显示文字的语种。 可填写如 'english'、'chinese_simplified' 等，具体参见文档下方关于此的说明。
-      translate.service.use('client.edge'); //设置机器翻译服务通道，直接客户端本身，不依赖服务端 。相关说明参考 http://translate.zvo.cn/43086.html
-      translate.execute(); //进行翻译
-      document.body.addEventListener('click', () => {
-        translate.execute(); //进行翻译
-      });
-    </script> -->
-  </body>
-</html>

package/src/App.vue

@@ -1,12 +0,0 @@
-<template>
-  <div id="app">
-    <JoyForm>
-      <el-form-item label="用户名" prop="username" :span="4">
-        <el-input  placeholder="请输入用户名"></el-input>
-      </el-form-item>
-    </JoyForm>
-  </div>
-</template>
-<script>
-
-</script>

package/src/index.js

@@ -1,3 +0,0 @@
-import LayOutForm from './components/LayOutForm/index.vue';
-
-export { LayOutForm };

package/src/main.js

@@ -1,16 +0,0 @@
-/*
- * @Date: 2022-05-22 20:44:25
- * @Description:
- */
-import { createApp } from 'vue';
-import App from './App.vue';
-import JoyAdminComponents from './index.js';
-import ElementPlus from "element-plus";
-import "element-plus/theme-chalk/display.css"; // 引入基于断点的隐藏类
-import "element-plus/dist/index.css";
-
-const app = createApp(App);
-app.use(JoyAdminComponents);
-app.use(ElementPlus);
-
-app.mount("#app");

package/vite.config.js

@@ -1,38 +0,0 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue()],
-  define: {
-    // enable hydration mismatch details in production build
-    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "true",
-  },
-  base: "./",
-  build: {
-    lib: {
-      entry: "./src/index.js",
-      name: "JoyAdminComponents",
-      fileName: (format) => `joy-admin-components.${format}.js`,
-    },
-    rollupOptions: {
-      external: ["vue", "element-plus"],
-      output: {
-        globals: {
-          vue: "Vue",
-          "element-plus": "ElementPlus",
-        },
-      },
-    },
-  },
-  server: {
-    watch: {
-      usePolling: true, // 修复HMR热更新失效
-      overlay: true,
-    },
-    port: 3008,
-    host: "0.0.0.0",
-    hmr: true,
-    open: true,
-  },
-});