@a2simcode/ui 0.0.75 → 0.0.76

package/docs/components/meta/button.ts

@@ -2,20 +2,20 @@ export default {
   "props": [
     {
       "name": "type",
-      "description": "按钮的类型，分为五种：主要按钮、幽灵按钮、虚框按钮、链接按钮、文字按钮、次要按钮。",
-      "type": "'primary' | 'dashed' | 'link' | 'text' | 'default'",
+      "description": "按钮的类型，分为五种：主要按钮、幽灵按钮、虚框按钮、链接按钮、文字按钮、次要按钮",
+      "type": "\"primary\" | \"dashed\" | \"link\" | \"text\" | \"default\"",
       "default": "'default'"
     },
     {
       "name": "size",
       "description": "设置按钮大小",
-      "type": "'large' | 'default' | 'small'",
+      "type": "\"large\" | \"default\" | \"small\"",
       "default": "'default'"
     },
     {
       "name": "shape",
       "description": "设置按钮形状",
-      "type": "'default' | 'circle' | 'round'",
+      "type": "\"default\" | \"circle\" | \"round\"",
       "default": "'default'"
     },
     {
@@ -26,7 +26,7 @@ export default {
     },
     {
       "name": "disabled",
-      "description": "按钮不可用状态。",
+      "description": "按钮不可用状态",
       "type": "boolean",
       "default": "false"
     },
@@ -46,7 +46,7 @@ export default {
       "name": "loading",
       "description": "设置按钮载入状态",
       "type": "boolean | { delay?: number }",
-      "default": "(): boolean | { delay?: number } => false"
+      "default": "false"
     },
     {
       "name": "icon",
@@ -81,17 +81,20 @@ export default {
     {
       "name": "compact",
       "description": "是否紧凑模式",
-      "type": "boolean"
+      "type": "boolean",
+      "default": "false"
     },
     {
       "name": "lastCompactItem",
       "description": "",
-      "type": "boolean"
+      "type": "boolean",
+      "default": "false"
     },
     {
       "name": "firstCompactItem",
       "description": "",
-      "type": "boolean"
+      "type": "boolean",
+      "default": "false"
     }
   ],
   "events": [
@@ -119,5 +122,91 @@ export default {
       "type": "() => void"
     }
   ],
-  "types": []
+  "types": [
+    {
+      "name": "ButtonProps",
+      "properties": [
+        {
+          "name": "type",
+          "type": "'primary' | 'dashed' | 'link' | 'text' | 'default'",
+          "description": "按钮的类型，分为五种：主要按钮、幽灵按钮、虚框按钮、链接按钮、文字按钮、次要按钮"
+        },
+        {
+          "name": "size",
+          "type": "'large' | 'default' | 'small'",
+          "description": "设置按钮大小"
+        },
+        {
+          "name": "shape",
+          "type": "'default' | 'circle' | 'round'",
+          "description": "设置按钮形状"
+        },
+        {
+          "name": "ghost",
+          "type": "boolean",
+          "description": "幽灵属性，使按钮背景透明"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "description": "按钮不可用状态"
+        },
+        {
+          "name": "danger",
+          "type": "boolean",
+          "description": "设置危险按钮"
+        },
+        {
+          "name": "block",
+          "type": "boolean",
+          "description": "将按钮宽度调整为其父宽度的选项"
+        },
+        {
+          "name": "loading",
+          "type": "boolean | { delay?: number }",
+          "description": "设置按钮载入状态"
+        },
+        {
+          "name": "icon",
+          "type": "string",
+          "description": "图标"
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "description": "点击跳转的地址，指定此属性 button 的行为和 a 链接一致"
+        },
+        {
+          "name": "target",
+          "type": "string",
+          "description": "相当于 a 链接的 target 属性，href 存在时生效"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "description": "按钮内容"
+        },
+        {
+          "name": "notLabel",
+          "type": "boolean",
+          "description": "是否不要文字"
+        },
+        {
+          "name": "compact",
+          "type": "boolean",
+          "description": "是否紧凑模式"
+        },
+        {
+          "name": "lastCompactItem",
+          "type": "boolean",
+          "description": ""
+        },
+        {
+          "name": "firstCompactItem",
+          "type": "boolean",
+          "description": ""
+        }
+      ]
+    }
+  ]
 }

package/docs/components/meta/buttons.ts

@@ -22,17 +22,32 @@ export default {
   "slots": [],
   "methods": [],
   "types": [
+    {
+      "name": "ButtonClickScope",
+      "properties": [
+        {
+          "name": "data",
+          "type": "Record<string, any>",
+          "description": ""
+        },
+        {
+          "name": "openLayer",
+          "type": "(options: LayerParamType) => void",
+          "description": ""
+        }
+      ]
+    },
     {
       "name": "ButtonCompActionType",
       "properties": [
         {
           "name": "config",
-          "type": "Record<string, any>",
+          "type": "ButtonProps",
           "description": "按钮配置"
         },
         {
           "name": "click",
-          "type": "(scope: {\n    data?: Record<string, any>\n    openLayer: (options: LayerParamType) => void\n  }) => void",
+          "type": "(scope: ButtonClickScope) => void",
           "description": "按钮点击方法"
         }
       ]

package/docs/components/meta/form.ts

@@ -81,6 +81,16 @@ export default {
     }
   ],
   "types": [
+    {
+      "name": "FormSchemaCompConfig",
+      "properties": [
+        {
+          "name": "config",
+          "type": "{\n    /**\n     * @zh 绑定表\n     */\n    table?: string\n    /**\n     * @zh 绑定字段\n     */\n    field?: string\n    /**\n     * @zh 父级表格ID\n     */\n    parentTableId?: string\n    /**\n     * @zh 校验规则\n     */\n    rule?: RuleType[]\n  } & BaseCompConfig",
+          "description": "配置信息"
+        }
+      ]
+    },
     {
       "name": "FormSchemaConfig",
       "properties": [
@@ -94,11 +104,6 @@ export default {
           "type": "string",
           "description": "组件类型"
         },
-        {
-          "name": "config",
-          "type": "{\n    /**\n     * @zh 绑定表\n     */\n    table?: string\n    /**\n     * @zh 绑定字段\n     */\n    field?: string\n    /**\n     * @zh 父级表格ID\n     */\n    parentTableId?: string\n\n    /**\n     * @zh 数据类型\n     */\n    dataType?: string\n    /**\n     * @zh 数据编码\n     */\n    dataCode?: string\n    /**\n     * @zh 数据\n     */\n    options?: Record<string, any>\n    /**\n     * @zh 过滤数据id\n     */\n    dataFilterIds?: string[]\n    /**\n     * @zh 值键值\n     */\n    valueKey?: string\n    /**\n     * @zh 显示键值\n     */\n    labelKey?: string\n    /**\n     * @zh id键值\n     */\n    idKey?: string\n    /**\n     * @zh 父级键值\n     */\n    pidKey?: string\n    /**\n     * @zh 上级参数别名\n     */\n    upKeys?: string\n    /**\n     * @zh 数据源参数\n     */\n    params?: Record<string, any>\n    /**\n     * @zh 默认数据\n     */\n    defaultValue?: any\n    /**\n     * @zh 赋值字段名，实现不同组件使用同一个字段的值\n     */\n    inputValueKey?: string\n\n    /**\n     * @zh 校验规则\n     */\n    rule?: RuleType[]\n  } & BaseCompConfig",
-          "description": "配置信息"
-        },
         {
           "name": "children",
           "type": "FormSchemaConfig[]",

package/docs/components/page.md

@@ -41,6 +41,19 @@
   </template>
 </Demo>
 
+## 用户管理页面示例
+
+参考业务项目中的写法，展示了如何在 `j-page` 内嵌 `j-table-panel`，并完成“新增 / 编辑 / 重置密码 / 删除 / 状态开关”等常见交互。
+
+<Demo :source-code="pageUserManagementCode">
+  <template #source>
+    <page-user-management />
+  </template>
+  <template #description>
+    示例使用 Mock 数据模拟分页接口，并通过 `openLayer` 打开表单弹窗；保存/删除后通过 `j-page.call('mainTable','refreshData')` 刷新表格。
+  </template>
+</Demo>
+
 ## API
 
 <ApiTable :data="pageApi" componentName="page" />
@@ -49,9 +62,11 @@
 import PageBasic from '../examples/page/basic.vue'
 import PageInit from '../examples/page/init.vue'
 import PageLog from '../examples/page/log.vue'
+import PageUserManagement from '../examples/page/user-management.vue'
 import pageApi from './meta/page'
 
 import pageBasicCode from '../examples/page/basic.vue?raw'
 import pageInitCode from '../examples/page/init.vue?raw'
 import pageLogCode from '../examples/page/log.vue?raw'
+import pageUserManagementCode from '../examples/page/user-management.vue?raw'
 </script>

package/docs/examples/page/user-management.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="j-block" style="height: 600px">
+    <j-page ref="pageRef" :noPadding="true" :schema="schema" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ButtonClickScope, TableColumnCompConfig } from '@a2simcode/ui'
+
+import { ref, defineComponent, h } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+interface UserRecord {
+  j_Id: number
+  j_Account: string
+  j_Name: string
+  j_EnabledMark: 0 | 1
+  j_CreateUserName: string
+  j_CreateDate: string
+  j_ModifyDate: string
+}
+
+const randomFrom = <T,>(arr: T[]) => arr[Math.floor(Math.random() * arr.length)]
+
+const createUsers = (count: number): UserRecord[] => {
+  const names = ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十']
+  const creators = ['系统', '管理员', '运维', '审计']
+  const now = Date.now()
+
+  return Array.from({ length: count }).map((_, i) => {
+    const id = i + 1
+    const createTime = new Date(now - Math.floor(Math.random() * 20 * 24 * 60 * 60 * 1000))
+    const modifyTime = new Date(
+      createTime.getTime() + Math.floor(Math.random() * 5 * 24 * 60 * 60 * 1000)
+    )
+    return {
+      j_Id: id,
+      j_Account: `user_${String(id).padStart(3, '0')}`,
+      j_Name: randomFrom(names),
+      j_EnabledMark: Math.random() > 0.2 ? 1 : 0,
+      j_CreateUserName: randomFrom(creators),
+      j_CreateDate: createTime.toISOString(),
+      j_ModifyDate: modifyTime.toISOString(),
+    }
+  })
+}
+
+const users = ref<UserRecord[]>(createUsers(57))
+
+const api = {
+  getPage: async (params: Record<string, any>) => {
+    const keyword = String(params?.keyword?.value || '').trim()
+    const { pagination } = params || {}
+    const { rows = 10, page = 1 } = pagination || {}
+
+    let list = [...users.value]
+    if (keyword) {
+      list = list.filter((u) => u.j_Name.includes(keyword) || u.j_Account.includes(keyword))
+    }
+
+    const start = (page - 1) * rows
+    const end = start + rows
+
+    return {
+      rows: list.slice(start, end),
+      records: list.length,
+    }
+  },
+  updateState: async (id: number, enabled: 0 | 1) => {
+    const target = users.value.find((u) => u.j_Id === id)
+    if (!target) return false
+    target.j_EnabledMark = enabled
+    target.j_ModifyDate = new Date().toISOString()
+    return true
+  },
+  upsert: async (data: Pick<UserRecord, 'j_Account' | 'j_Name'> & { j_Id?: number }) => {
+    const now = new Date().toISOString()
+    if (!data.j_Id) {
+      const nextId = Math.max(0, ...users.value.map((u) => u.j_Id)) + 1
+      users.value.unshift({
+        j_Id: nextId,
+        j_Account: data.j_Account,
+        j_Name: data.j_Name,
+        j_EnabledMark: 1,
+        j_CreateUserName: '管理员',
+        j_CreateDate: now,
+        j_ModifyDate: now,
+      })
+      return true
+    }
+
+    const target = users.value.find((u) => u.j_Id === data.j_Id)
+    if (!target) return false
+    target.j_Account = data.j_Account
+    target.j_Name = data.j_Name
+    target.j_ModifyDate = now
+    return true
+  },
+  resetPassword: async () => true,
+  remove: async (id: number) => {
+    const idx = users.value.findIndex((u) => u.j_Id === id)
+    if (idx < 0) return false
+    users.value.splice(idx, 1)
+    return true
+  },
+}
+
+const UserFormLayer = defineComponent({
+  name: 'UserFormLayer',
+  setup(_, { expose }) {
+    const isEdit = ref(false)
+    const currentId = ref<number | undefined>(undefined)
+    const formData = ref({
+      j_Account: '',
+      j_Name: '',
+    })
+
+    const open = async (param: any) => {
+      isEdit.value = !!param?.isEdit
+      const record = param?.record as UserRecord | undefined
+      currentId.value = record?.j_Id
+      formData.value = {
+        j_Account: record?.j_Account || '',
+        j_Name: record?.j_Name || '',
+      }
+      return true
+    }
+
+    const ok = async () => {
+      const account = formData.value.j_Account.trim()
+      const name = formData.value.j_Name.trim()
+      if (!account) {
+        ElMessage.warning('请输入账号')
+        return false
+      }
+      if (!name) {
+        ElMessage.warning('请输入姓名')
+        return false
+      }
+
+      const res = await api.upsert({
+        j_Id: currentId.value,
+        j_Account: account,
+        j_Name: name,
+      })
+      if (!res) {
+        ElMessage.warning('保存失败')
+      }
+      return res
+    }
+
+    expose({ open, ok })
+
+    return () =>
+      h('div', { style: 'padding: 16px' }, [
+        h('div', { style: 'margin-bottom: 12px' }, [
+          h('div', { style: 'margin-bottom: 6px; color: var(--j-color-text-2)' }, '账号'),
+          h('input', {
+            value: formData.value.j_Account,
+            onInput: (e: any) => (formData.value.j_Account = e?.target?.value || ''),
+            placeholder: '请输入账号',
+            style:
+              'width: 100%; padding: 6px 10px; border: 1px solid var(--j-color-border); border-radius: 4px; outline: none;',
+          }),
+        ]),
+        h('div', { style: 'margin-bottom: 12px' }, [
+          h('div', { style: 'margin-bottom: 6px; color: var(--j-color-text-2)' }, '姓名'),
+          h('input', {
+            value: formData.value.j_Name,
+            onInput: (e: any) => (formData.value.j_Name = e?.target?.value || ''),
+            placeholder: '请输入姓名',
+            style:
+              'width: 100%; padding: 6px 10px; border: 1px solid var(--j-color-border); border-radius: 4px; outline: none;',
+          }),
+        ]),
+        h(
+          'div',
+          { style: 'color: var(--j-color-text-3); font-size: 12px' },
+          isEdit.value ? '编辑模式：修改后点击确定保存' : '新增模式：填写后点击确定创建'
+        ),
+      ])
+  },
+})
+
+const pageRef = ref()
+
+const refreshTable = () => {
+  pageRef.value?.call('mainTable', 'refreshData')
+}
+
+const columnsConfig: Record<string, TableColumnCompConfig> = {
+  j_Name: { width: 120, filter: { isSearchKeyword: true } },
+  j_Account: { width: 140, filter: { isSearchKeyword: true } },
+  j_EnabledMark: {
+    type: 'j-switch',
+    activeValue: 1,
+    inactiveValue: 0,
+    width: 72,
+    change: async ({ row }: { row: UserRecord }) => {
+      const res = await api.updateState(row.j_Id, row.j_EnabledMark)
+      if (res) {
+        ElMessage.success('更新成功')
+        refreshTable()
+      } else {
+        ElMessage.warning('更新失败')
+      }
+    },
+  },
+  j_CreateUserName: { filter: { isSearchKeyword: true } },
+  j_CreateDate: { type: 'dateTime', width: 168 },
+  j_ModifyDate: { type: 'dateTime', width: 168 },
+}
+
+const columns = [
+  { id: 'j_Name', label: '姓名' },
+  { id: 'j_Account', label: '账号' },
+  { id: 'j_EnabledMark', label: '有效' },
+  { id: 'j_CreateUserName', label: '创建用户' },
+  { id: 'j_CreateDate', label: '创建时间' },
+  { id: 'j_ModifyDate', label: '最后更新时间' },
+].map((item) => {
+  const cfg = columnsConfig[item.id] || {}
+  return {
+    id: item.id,
+    type: cfg.type || '',
+    config: { ...cfg, label: item.label },
+  }
+})
+
+const buttons = [
+  {
+    id: 'add',
+    label: '新增',
+    config: { icon: 'mdi:add', type: 'primary' },
+    click: ({ openLayer }: ButtonClickScope) => {
+      openLayer({
+        title: '新增用户',
+        name: UserFormLayer,
+        width: 520,
+        height: 240,
+        param: { isEdit: false },
+        afterOk: refreshTable,
+      })
+    },
+  },
+]
+
+const actions = [
+  {
+    id: 'edit',
+    label: '编辑',
+    click: ({ openLayer, data }: ButtonClickScope) => {
+      openLayer({
+        title: '编辑用户',
+        name: UserFormLayer,
+        width: 520,
+        height: 240,
+        param: { isEdit: true, record: data },
+        afterOk: refreshTable,
+      })
+    },
+  },
+  {
+    id: 'resetPassword',
+    label: '重置密码',
+    click: async ({ data }: ButtonClickScope) => {
+      await ElMessageBox.confirm(`您确定重置【${data?.j_Name}】密码吗?`, '提示', {
+        type: 'warning',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+      })
+      const res = await api.resetPassword()
+      if (res) {
+        ElMessage.success('重置成功')
+      }
+    },
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    config: { danger: true },
+    click: async ({ data }: ButtonClickScope) => {
+      await ElMessageBox.confirm(`您确定删除【${data?.j_Name}】吗?`, '提示', {
+        type: 'warning',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+      })
+      const res = await api.remove(data.j_Id)
+      if (res) {
+        ElMessage.success('删除成功')
+        refreshTable()
+      }
+    },
+  },
+]
+
+const schema = ref([
+  {
+    id: 'mainTable',
+    type: 'j-table-panel',
+    config: {
+      columns,
+      buttons,
+      actions,
+      rowKey: 'j_Id',
+      isPage: true,
+      sort: 'j_CreateDate DESC',
+      loadData: async (params: Record<string, any>) => api.getPage(params),
+    },
+  },
+])
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2simcode/ui",
-  "version": "0.0.75",
+  "version": "0.0.76",
   "description": "A Vue 3 UI Component Library",
   "type": "module",
   "main": "./dist/simcode-ui.umd.js",