@a2simcode/ui 0.0.69 → 0.0.70

package/docs/examples/page/log.vue

@@ -0,0 +1,207 @@
+<template> 
+   <div class="j-block j-user-center-log" style="height: 600px;"> 
+     <j-page :noPadding="true" :schema="schema" ref="indexRef" /> 
+   </div> 
+ </template> 
+ <script lang="ts" setup> 
+ import type { TableColumnCompConfig, ColumnSchemaConfig,LayerParamType } from '@a2simcode/ui'; 
+ 
+ import { ref, h, defineComponent, resolveComponent } from 'vue'; 
+ import { iconLoaded, loadIcon } from '@iconify/vue'; 
+ 
+ const indexRef = ref(); 
+ 
+ const ExecuteResultLayer = defineComponent({ 
+   name: 'ExecuteResultLayer', 
+   props: { 
+     text: { 
+       type: String, 
+       default: '', 
+     }, 
+   }, 
+   setup(props) { 
+     const JCodeMirror = resolveComponent('j-code-mirror'); 
+     return () => 
+       h( 
+         JCodeMirror, 
+         { 
+           readOnly: true, 
+           value: props.text || '', 
+         } 
+       ); 
+   }, 
+ }); 
+ 
+ const browsers = [ 
+   { name: 'Chrome', icon: 'logos:chrome' }, 
+   { name: 'Firefox', icon: 'logos:firefox' }, 
+   { name: 'Safari', icon: 'logos:safari' }, 
+   { name: 'Edge', icon: 'logos:microsoft-edge' }, 
+ ]; 
+ 
+ interface ColumnType {
+    label: string;
+    id: string;
+ }
+
+ const columns: ColumnType[] = [ 
+   { label: '浏览器', id: 'j_BrowserTag' }, 
+   { 
+     label: '类型', 
+     id: 'j_CategoryId', 
+   }, 
+   { label: '时间', id: 'j_CreateDate' }, 
+   { label: '时长(ms)', id: 'j_Times' }, 
+   { label: '请求接口', id: 'j_Url' }, 
+   { label: '请求类型', id: 'j_OperateType' }, 
+   { label: 'IP', id: 'j_IPAddress' }, 
+   { label: '结果', id: 'j_Result' }, 
+   { label: '描述', id: 'j_ExecuteResult' }, 
+ ]; 
+ 
+ const columnsConfig: Record<string, TableColumnCompConfig> = { 
+   j_BrowserTag: { 
+     width: 72, 
+     type: 'j-icon', 
+     align: 'center', 
+   }, 
+   j_CategoryId: { 
+     type: 'j-tag', 
+     width: 72, 
+     align: 'center', 
+     dataType: 'options', 
+     options: [ 
+       { label: '登录', value: 1, color: '#e8ffea' }, 
+       { label: '访问', value: 2, color: '#e8f3ff' }, 
+       { label: '操作', value: 3, color: '#e5f9f8' }, 
+       { label: '文件下载', value: 5, color: '#fff7e8' }, 
+       { label: '文件预览', value: 6, color: '#f5f2ff' }, 
+       { label: '接口请求', value: 7, color: '#f0f5ff' }, 
+       { label: '接口限流', value: 8, color: '#fffce8' }, 
+       { label: '接口熔断', value: 9, color: '#fff2e8' }, 
+       { label: '异常', value: 4, color: '#ffece8' }, 
+     ], 
+   }, 
+   j_CreateDate: { 
+     width: 160, 
+     dataType: 'dateTime', 
+   }, 
+   j_Times: { 
+     width: 80, 
+     align: 'center', 
+   }, 
+   j_Url: { 
+     width: 200, 
+     isSearchKeyword: true, 
+   }, 
+   j_OperateType: { 
+     width: 80, 
+     align: 'center', 
+   }, 
+ 
+   j_IPAddress: { 
+     width: 120, 
+     isSearchKeyword: true, 
+   }, 
+   j_Result: { 
+     type: 'j-tag', 
+     width: 72, 
+     align: 'center', 
+     dataType: 'options', 
+     fieldFormat: (row: Record<string, any>) => (row.j_Result === 1 ? 1 : 2), 
+     options: [ 
+       { label: '成功', value: 1, color: '#e8ffea' }, 
+       { label: '失败', value: 2, color: '#ffece8' }, 
+     ], 
+   }, 
+   j_ExecuteResult: { 
+     type: 'link', 
+     width: 60, 
+     align: 'center', 
+     fieldFormat: () => '查看', 
+     click: ({ row, openLayer }: { row: any,openLayer: (params: LayerParamType) => void }) => { 
+       openLayer({ 
+         title: '描述', 
+         name: ExecuteResultLayer, 
+         config: { text: row?.j_ExecuteResult || '' }, 
+         width: 1000, 
+         height: 600, 
+         hasBtns: false, 
+       }); 
+     }, 
+   }, 
+ }; 
+ 
+ const myColumns: ColumnSchemaConfig[] = []; 
+ columns.forEach((item) => { 
+   const config = columnsConfig[item.id || ''] || {}; 
+   const schemaItem: ColumnSchemaConfig = { 
+     id: item.id || '', 
+     type: config.type || '', 
+     config: { ...config, label: item.label || '' }, 
+   }; 
+   myColumns.push(schemaItem); 
+ }); 
+ 
+ // Mock API
+ const api = {
+    getMyPage: async (params: any) => {
+        // Simulate API call
+        await new Promise(resolve => setTimeout(resolve, 300));
+        return {
+            total: 20,
+            rows: Array.from({ length: 10 }).map((_, i) => ({
+                j_Id: i + 1,
+                j_BrowserTag: browsers[i % browsers.length].name,
+                j_CategoryId: (i % 9) + 1,
+                j_CreateDate: new Date().toISOString(),
+                j_Times: Math.floor(Math.random() * 1000),
+                j_Url: `/api/v1/resource/${i}`,
+                j_OperateType: ['GET', 'POST', 'PUT', 'DELETE'][i % 4],
+                j_IPAddress: `192.168.1.${i}`,
+                j_Result: i % 5 === 0 ? 2 : 1,
+                j_ExecuteResult: JSON.stringify({ status: 200, message: 'Success' })
+            }))
+        }
+    }
+ }
+
+ const schema = [ 
+     { 
+       id: 'mainTable', 
+       type: 'j-table-panel', 
+       config: { 
+         columns: myColumns, 
+         rowKey: 'j_Id', 
+         sort: 'j_CreateDate DESC', 
+         isPage: true, 
+         loadData: async (params: Record<string, any>) => { 
+           let res = await api.getMyPage(params); 
+           if (res && res.rows) { 
+             const iconsToLoad = new Set(); 
+             res.rows.forEach((item: any) => { 
+               const browser = browsers.find( 
+                 (b) => item.j_BrowserTag && item.j_BrowserTag === b.name 
+               ); 
+               if (browser) { 
+                 item.j_BrowserTag = browser.icon; 
+                 iconsToLoad.add(browser.icon); 
+               } 
+             }); 
+ 
+             await Promise.all( 
+               [...iconsToLoad].map(async (icon) => { 
+                 if (!iconLoaded(icon as string)) { 
+                   await loadIcon(icon as string); 
+                 } 
+               }) 
+             ); 
+           } 
+ 
+           console.log(res, 'res'); 
+           return res; 
+         }, 
+       }, 
+     }, 
+   ];
+ </script> 

package/docs/examples/table-panel/sub-table-lazy.vue

@@ -0,0 +1,100 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table-panel
+      :columns="columns"
+      :load-data="loadData"
+      :sub-columns="subColumns"
+      :load-children="loadChildren"
+      row-key="id"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ColumnSchemaConfig } from '@a2simcode/ui'
+
+const columns: ColumnSchemaConfig[] = [
+  {
+    id: 'id',
+    type: '',
+    config: {
+      align: 'center',
+      label: 'ID',
+      width: 100,
+    },
+  },
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '名称',
+      width: 200,
+    },
+  },
+  {
+    id: 'value',
+    type: 'j-switch',
+    config: {
+      label: '值',
+      width: 100,
+      align: 'center',
+      activeValue: 1,
+      inactiveValue: 0,
+    },
+  },
+]
+
+const subColumns: ColumnSchemaConfig[] = [
+  {
+    id: 'id',
+    type: '',
+    config: {
+      label: '子ID',
+      width: 100,
+    },
+  },
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '子名称',
+      width: 200,
+    },
+  },
+  {
+    id: 'value',
+    type: '',
+    config: {
+      label: '子值',
+      width: 100,
+    },
+  },
+]
+
+const loadData = async (params: Record<string, any>) => {
+  console.log('Loading main table data with params:', params)
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const data = [
+        { id: '1', name: 'Parent 1', value: 1, children: true },
+        { id: '2', name: 'Parent 2', value: 0, children: true },
+      ]
+      resolve(data)
+    }, 500)
+  })
+}
+
+const loadChildren = async (record: Record<string, any>): Promise<any[]> => {
+  console.log('Loading children for record:', record)
+  // 模拟异步加载数据
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const children = [
+        { id: record.id + '-1', name: record.name + ' Child 1', value: Math.random() * 100 },
+        { id: record.id + '-2', name: record.name + ' Child 2', value: Math.random() * 100 },
+      ]
+      resolve(children)
+    }, 1000)
+  })
+}
+</script>

package/package.json

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