@a2simcode/ui 0.0.107 → 0.0.108

package/docs/examples/page/log.vue

@@ -1,453 +1,453 @@
-<template>
-  <div class="j-block j-user-center-log" style="height: 600px">
-    <j-page :noPadding="true" :schema="schema" />
-  </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 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',
-    dataType: 'options',
-    fieldFormat: (row: Record<string, any>) =>
-      browsers.find((b) => b.name === row.j_BrowserTag)?.icon || '',
-    options: browsers.map((b) => ({ label: b.name, value: b.name })),
-  },
-  j_CategoryId: {
-    type: 'j-tag',
-    width: 100,
-    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: 168,
-    type: 'dateTime',
-  },
-  j_Times: {
-    width: 80,
-    align: 'center',
-    type: 'number',
-  },
-  j_Url: {
-    width: 200,
-    isSearchKeyword: true,
-  },
-  j_OperateType: {
-    width: 96,
-    align: 'center',
-    type: 'j-tag',
-    dataType: 'options',
-    options: [
-      { label: 'GET', value: 'GET', color: '#e8f3ff' },
-      { label: 'POST', value: 'POST', color: '#e8ffea' },
-      { label: 'PUT', value: 'PUT', color: '#fff7e8' },
-      { label: 'DELETE', value: 'DELETE', color: '#ffece8' },
-    ],
-  },
-
-  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',
-    frozen: 'right',
-    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 mockData = Array.from({ length: 100 }).map((_, i) => ({
-  j_Id: i + 1,
-  j_BrowserTag: browsers[i % browsers.length].name,
-  j_CategoryId: (i % 9) + 1,
-  j_CreateDate: new Date(Date.now() - Math.floor(Math.random() * 1000000000)).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 api = {
-  getMyPage: async (params: any) => {
-    console.log(JSON.stringify(params), 'params')
-    // Simulate API call
-    await new Promise((resolve) => setTimeout(resolve, 300))
-
-    let result = [...mockData]
-
-    // Filter
-    if (params.filter && params.filter.cond && params.filter.cond.length > 0) {
-      const { rel, cond } = params.filter
-      const parseDateVal = (s: string) => {
-        if (!s) return NaN
-        const str = s.includes('T') ? s : s.replace(' ', 'T')
-        const d = new Date(str)
-        return d.getTime()
-      }
-      const dayStart = (d: Date) =>
-        new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0).getTime()
-      const dayEnd = (d: Date) =>
-        new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59, 999).getTime()
-      const monthStart = (y: number, m: number) => new Date(y, m, 1, 0, 0, 0, 0).getTime()
-      const monthEnd = (y: number, m: number) => new Date(y, m + 1, 0, 23, 59, 59, 999).getTime()
-      const quarterRange = (y: number, q: number) => {
-        const startMonth = (q - 1) * 3
-        const start = monthStart(y, startMonth)
-        const end = monthEnd(y, startMonth + 2)
-        return [start, end] as const
-      }
-      const weekStartEnd = (d: Date) => {
-        const dow = (d.getDay() + 6) % 7
-        const startD = new Date(d)
-        startD.setDate(d.getDate() - dow)
-        const endD = new Date(startD)
-        endD.setDate(startD.getDate() + 6)
-        return [dayStart(startD), dayEnd(endD)] as const
-      }
-      const rangeFromFormula = (f: string) => {
-        const now = new Date()
-        if (f === 'today') return [dayStart(now), dayEnd(now)] as const
-        if (f === 'yesterday') {
-          const d = new Date(now)
-          d.setDate(now.getDate() - 1)
-          return [dayStart(d), dayEnd(d)] as const
-        }
-        if (f === 'tomorrow') {
-          const d = new Date(now)
-          d.setDate(now.getDate() + 1)
-          return [dayStart(d), dayEnd(d)] as const
-        }
-        if (f === 'last7days') {
-          const end = dayEnd(now)
-          const d = new Date(now)
-          d.setDate(now.getDate() - 6)
-          const start = dayStart(d)
-          return [start, end] as const
-        }
-        if (f === 'last30days') {
-          const end = dayEnd(now)
-          const d = new Date(now)
-          d.setDate(now.getDate() - 29)
-          const start = dayStart(d)
-          return [start, end] as const
-        }
-        if (f === 'thisWeek') return weekStartEnd(now)
-        if (f === 'lastWeek') {
-          const d = new Date(now)
-          d.setDate(now.getDate() - 7)
-          return weekStartEnd(d)
-        }
-        if (f === 'nextWeek') {
-          const d = new Date(now)
-          d.setDate(now.getDate() + 7)
-          return weekStartEnd(d)
-        }
-        if (f === 'thisMonth') {
-          const y = now.getFullYear()
-          const m = now.getMonth()
-          return [monthStart(y, m), monthEnd(y, m)] as const
-        }
-        if (f === 'lastMonth') {
-          const d = new Date(now)
-          d.setMonth(now.getMonth() - 1)
-          const y = d.getFullYear()
-          const m = d.getMonth()
-          return [monthStart(y, m), monthEnd(y, m)] as const
-        }
-        if (f === 'nextMonth') {
-          const d = new Date(now)
-          d.setMonth(now.getMonth() + 1)
-          const y = d.getFullYear()
-          const m = d.getMonth()
-          return [monthStart(y, m), monthEnd(y, m)] as const
-        }
-        if (f === 'thisQuarter') {
-          const y = now.getFullYear()
-          const q = Math.floor(now.getMonth() / 3) + 1
-          return quarterRange(y, q)
-        }
-        if (f === 'lastQuarter') {
-          let y = now.getFullYear()
-          let q = Math.floor(now.getMonth() / 3)
-          if (q === 0) {
-            q = 4
-            y = y - 1
-          }
-          return quarterRange(y, q)
-        }
-        if (f === 'nextQuarter') {
-          let y = now.getFullYear()
-          let q = Math.floor(now.getMonth() / 3) + 2
-          if (q === 5) {
-            q = 1
-            y = y + 1
-          }
-          return quarterRange(y, q)
-        }
-        if (f === 'thisYear') {
-          const y = now.getFullYear()
-          return [
-            new Date(y, 0, 1).getTime(),
-            new Date(y, 11, 31, 23, 59, 59, 999).getTime(),
-          ] as const
-        }
-        if (f === 'lastYear') {
-          const y = now.getFullYear() - 1
-          return [
-            new Date(y, 0, 1).getTime(),
-            new Date(y, 11, 31, 23, 59, 59, 999).getTime(),
-          ] as const
-        }
-        if (f === 'nextYear') {
-          const y = now.getFullYear() + 1
-          return [
-            new Date(y, 0, 1).getTime(),
-            new Date(y, 11, 31, 23, 59, 59, 999).getTime(),
-          ] as const
-        }
-        return [NaN, NaN] as const
-      }
-      result = result.filter((item) => {
-        const matches = cond.map((c: any) => {
-          const rawVal = item[c.field as keyof typeof item]
-          const val = rawVal == null ? '' : String(rawVal)
-          const target = c.value == null ? '' : String(c.value)
-
-          if (c.type === 'dateTime') {
-            const ts = parseDateVal(val)
-            if (c.method === 'eq') {
-              const t = parseDateVal(target)
-              return ts === t
-            } else if (c.method === 'ne') {
-              const t = parseDateVal(target)
-              return ts !== t
-            } else if (c.method === 'gte') {
-              const t = parseDateVal(target)
-              return ts >= t
-            } else if (c.method === 'lte') {
-              const t = parseDateVal(target)
-              return ts <= t
-            } else if (c.method === 'range') {
-              if (!target) return true
-              const [s, e] = target.split(',')
-              const st = parseDateVal(s)
-              const et = parseDateVal(e)
-              if (isNaN(st) && isNaN(et)) return true
-              if (!isNaN(st) && !isNaN(et)) return ts >= st && ts <= et
-              if (!isNaN(st) && isNaN(et)) return ts >= st
-              if (isNaN(st) && !isNaN(et)) return ts <= et
-              return true
-            } else if (c.method === 'formula') {
-              const [st, et] = rangeFromFormula(target)
-              if (isNaN(st) || isNaN(et)) return true
-              return ts >= st && ts <= et
-            } else if (c.method === 'not_empty') {
-              return val !== '' && val !== 'null' && val !== 'undefined'
-            } else if (c.method === 'empty') {
-              return val === '' || val === 'null' || val === 'undefined'
-            }
-            return false
-          } else {
-            if (
-              c.method === 'gt' ||
-              c.method === 'gte' ||
-              c.method === 'lt' ||
-              c.method === 'lte'
-            ) {
-              const nVal = Number(val)
-              const nTarget = Number(target)
-              if (isNaN(nVal) || isNaN(nTarget)) return false
-              if (c.method === 'gt') return nVal > nTarget
-              if (c.method === 'gte') return nVal >= nTarget
-              if (c.method === 'lt') return nVal < nTarget
-              if (c.method === 'lte') return nVal <= nTarget
-            }
-            if (c.method === 'eq') {
-              return val === target
-            } else if (c.method === 'ne') {
-              return val !== target
-            } else if (c.method === 'like') {
-              return val.includes(target)
-            } else if (c.method === 'unlike') {
-              return !val.includes(target)
-            } else if (c.method === 'in') {
-              const targetList = target.split(',')
-              return targetList.includes(val)
-            } else if (c.method === 'nin') {
-              const targetList = target.split(',')
-              return !targetList.includes(val)
-            } else if (c.method === 'not_empty') {
-              return val !== '' && val !== 'null' && val !== 'undefined'
-            } else if (c.method === 'empty') {
-              return val === '' || val === 'null' || val === 'undefined'
-            }
-          }
-          return false
-        })
-
-        if (rel === 'and') return matches.every((x: boolean) => x)
-        if (rel === 'or') return matches.some((x: boolean) => x)
-        return true
-      })
-    }
-
-    // Sort
-    if (params.pagination && params.pagination.sort) {
-      const [field, order] = params.pagination.sort.split(' ')
-      result.sort((a, b) => {
-        const valA = a[field as keyof typeof a]
-        const valB = b[field as keyof typeof b]
-        if (valA < valB) return order === 'ASC' ? -1 : 1
-        if (valA > valB) return order === 'ASC' ? 1 : -1
-        return 0
-      })
-    }
-
-    // Pagination
-    const page = params.pagination?.page || 1
-    const rows = params.pagination?.rows || 20
-    const start = (page - 1) * rows
-    const end = start + rows
-
-    return {
-      total: result.length,
-      rows: result.slice(start, end),
-    }
-  },
-}
-
-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) {
-              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>
+<template>
+  <div class="j-block j-user-center-log" style="height: 600px">
+    <j-page :noPadding="true" :schema="schema" />
+  </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 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',
+    dataType: 'options',
+    fieldFormat: (row: Record<string, any>) =>
+      browsers.find((b) => b.name === row.j_BrowserTag)?.icon || '',
+    options: browsers.map((b) => ({ label: b.name, value: b.name })),
+  },
+  j_CategoryId: {
+    type: 'j-tag',
+    width: 100,
+    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: 168,
+    type: 'dateTime',
+  },
+  j_Times: {
+    width: 80,
+    align: 'center',
+    type: 'number',
+  },
+  j_Url: {
+    width: 200,
+    isSearchKeyword: true,
+  },
+  j_OperateType: {
+    width: 96,
+    align: 'center',
+    type: 'j-tag',
+    dataType: 'options',
+    options: [
+      { label: 'GET', value: 'GET', color: '#e8f3ff' },
+      { label: 'POST', value: 'POST', color: '#e8ffea' },
+      { label: 'PUT', value: 'PUT', color: '#fff7e8' },
+      { label: 'DELETE', value: 'DELETE', color: '#ffece8' },
+    ],
+  },
+
+  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',
+    frozen: 'right',
+    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 mockData = Array.from({ length: 100 }).map((_, i) => ({
+  j_Id: i + 1,
+  j_BrowserTag: browsers[i % browsers.length].name,
+  j_CategoryId: (i % 9) + 1,
+  j_CreateDate: new Date(Date.now() - Math.floor(Math.random() * 1000000000)).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 api = {
+  getMyPage: async (params: any) => {
+    console.log(JSON.stringify(params), 'params')
+    // Simulate API call
+    await new Promise((resolve) => setTimeout(resolve, 300))
+
+    let result = [...mockData]
+
+    // Filter
+    if (params.filter && params.filter.cond && params.filter.cond.length > 0) {
+      const { rel, cond } = params.filter
+      const parseDateVal = (s: string) => {
+        if (!s) return NaN
+        const str = s.includes('T') ? s : s.replace(' ', 'T')
+        const d = new Date(str)
+        return d.getTime()
+      }
+      const dayStart = (d: Date) =>
+        new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0).getTime()
+      const dayEnd = (d: Date) =>
+        new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59, 999).getTime()
+      const monthStart = (y: number, m: number) => new Date(y, m, 1, 0, 0, 0, 0).getTime()
+      const monthEnd = (y: number, m: number) => new Date(y, m + 1, 0, 23, 59, 59, 999).getTime()
+      const quarterRange = (y: number, q: number) => {
+        const startMonth = (q - 1) * 3
+        const start = monthStart(y, startMonth)
+        const end = monthEnd(y, startMonth + 2)
+        return [start, end] as const
+      }
+      const weekStartEnd = (d: Date) => {
+        const dow = (d.getDay() + 6) % 7
+        const startD = new Date(d)
+        startD.setDate(d.getDate() - dow)
+        const endD = new Date(startD)
+        endD.setDate(startD.getDate() + 6)
+        return [dayStart(startD), dayEnd(endD)] as const
+      }
+      const rangeFromFormula = (f: string) => {
+        const now = new Date()
+        if (f === 'today') return [dayStart(now), dayEnd(now)] as const
+        if (f === 'yesterday') {
+          const d = new Date(now)
+          d.setDate(now.getDate() - 1)
+          return [dayStart(d), dayEnd(d)] as const
+        }
+        if (f === 'tomorrow') {
+          const d = new Date(now)
+          d.setDate(now.getDate() + 1)
+          return [dayStart(d), dayEnd(d)] as const
+        }
+        if (f === 'last7days') {
+          const end = dayEnd(now)
+          const d = new Date(now)
+          d.setDate(now.getDate() - 6)
+          const start = dayStart(d)
+          return [start, end] as const
+        }
+        if (f === 'last30days') {
+          const end = dayEnd(now)
+          const d = new Date(now)
+          d.setDate(now.getDate() - 29)
+          const start = dayStart(d)
+          return [start, end] as const
+        }
+        if (f === 'thisWeek') return weekStartEnd(now)
+        if (f === 'lastWeek') {
+          const d = new Date(now)
+          d.setDate(now.getDate() - 7)
+          return weekStartEnd(d)
+        }
+        if (f === 'nextWeek') {
+          const d = new Date(now)
+          d.setDate(now.getDate() + 7)
+          return weekStartEnd(d)
+        }
+        if (f === 'thisMonth') {
+          const y = now.getFullYear()
+          const m = now.getMonth()
+          return [monthStart(y, m), monthEnd(y, m)] as const
+        }
+        if (f === 'lastMonth') {
+          const d = new Date(now)
+          d.setMonth(now.getMonth() - 1)
+          const y = d.getFullYear()
+          const m = d.getMonth()
+          return [monthStart(y, m), monthEnd(y, m)] as const
+        }
+        if (f === 'nextMonth') {
+          const d = new Date(now)
+          d.setMonth(now.getMonth() + 1)
+          const y = d.getFullYear()
+          const m = d.getMonth()
+          return [monthStart(y, m), monthEnd(y, m)] as const
+        }
+        if (f === 'thisQuarter') {
+          const y = now.getFullYear()
+          const q = Math.floor(now.getMonth() / 3) + 1
+          return quarterRange(y, q)
+        }
+        if (f === 'lastQuarter') {
+          let y = now.getFullYear()
+          let q = Math.floor(now.getMonth() / 3)
+          if (q === 0) {
+            q = 4
+            y = y - 1
+          }
+          return quarterRange(y, q)
+        }
+        if (f === 'nextQuarter') {
+          let y = now.getFullYear()
+          let q = Math.floor(now.getMonth() / 3) + 2
+          if (q === 5) {
+            q = 1
+            y = y + 1
+          }
+          return quarterRange(y, q)
+        }
+        if (f === 'thisYear') {
+          const y = now.getFullYear()
+          return [
+            new Date(y, 0, 1).getTime(),
+            new Date(y, 11, 31, 23, 59, 59, 999).getTime(),
+          ] as const
+        }
+        if (f === 'lastYear') {
+          const y = now.getFullYear() - 1
+          return [
+            new Date(y, 0, 1).getTime(),
+            new Date(y, 11, 31, 23, 59, 59, 999).getTime(),
+          ] as const
+        }
+        if (f === 'nextYear') {
+          const y = now.getFullYear() + 1
+          return [
+            new Date(y, 0, 1).getTime(),
+            new Date(y, 11, 31, 23, 59, 59, 999).getTime(),
+          ] as const
+        }
+        return [NaN, NaN] as const
+      }
+      result = result.filter((item) => {
+        const matches = cond.map((c: any) => {
+          const rawVal = item[c.field as keyof typeof item]
+          const val = rawVal == null ? '' : String(rawVal)
+          const target = c.value == null ? '' : String(c.value)
+
+          if (c.type === 'dateTime') {
+            const ts = parseDateVal(val)
+            if (c.method === 'eq') {
+              const t = parseDateVal(target)
+              return ts === t
+            } else if (c.method === 'ne') {
+              const t = parseDateVal(target)
+              return ts !== t
+            } else if (c.method === 'gte') {
+              const t = parseDateVal(target)
+              return ts >= t
+            } else if (c.method === 'lte') {
+              const t = parseDateVal(target)
+              return ts <= t
+            } else if (c.method === 'range') {
+              if (!target) return true
+              const [s, e] = target.split(',')
+              const st = parseDateVal(s)
+              const et = parseDateVal(e)
+              if (isNaN(st) && isNaN(et)) return true
+              if (!isNaN(st) && !isNaN(et)) return ts >= st && ts <= et
+              if (!isNaN(st) && isNaN(et)) return ts >= st
+              if (isNaN(st) && !isNaN(et)) return ts <= et
+              return true
+            } else if (c.method === 'formula') {
+              const [st, et] = rangeFromFormula(target)
+              if (isNaN(st) || isNaN(et)) return true
+              return ts >= st && ts <= et
+            } else if (c.method === 'not_empty') {
+              return val !== '' && val !== 'null' && val !== 'undefined'
+            } else if (c.method === 'empty') {
+              return val === '' || val === 'null' || val === 'undefined'
+            }
+            return false
+          } else {
+            if (
+              c.method === 'gt' ||
+              c.method === 'gte' ||
+              c.method === 'lt' ||
+              c.method === 'lte'
+            ) {
+              const nVal = Number(val)
+              const nTarget = Number(target)
+              if (isNaN(nVal) || isNaN(nTarget)) return false
+              if (c.method === 'gt') return nVal > nTarget
+              if (c.method === 'gte') return nVal >= nTarget
+              if (c.method === 'lt') return nVal < nTarget
+              if (c.method === 'lte') return nVal <= nTarget
+            }
+            if (c.method === 'eq') {
+              return val === target
+            } else if (c.method === 'ne') {
+              return val !== target
+            } else if (c.method === 'like') {
+              return val.includes(target)
+            } else if (c.method === 'unlike') {
+              return !val.includes(target)
+            } else if (c.method === 'in') {
+              const targetList = target.split(',')
+              return targetList.includes(val)
+            } else if (c.method === 'nin') {
+              const targetList = target.split(',')
+              return !targetList.includes(val)
+            } else if (c.method === 'not_empty') {
+              return val !== '' && val !== 'null' && val !== 'undefined'
+            } else if (c.method === 'empty') {
+              return val === '' || val === 'null' || val === 'undefined'
+            }
+          }
+          return false
+        })
+
+        if (rel === 'and') return matches.every((x: boolean) => x)
+        if (rel === 'or') return matches.some((x: boolean) => x)
+        return true
+      })
+    }
+
+    // Sort
+    if (params.pagination && params.pagination.sort) {
+      const [field, order] = params.pagination.sort.split(' ')
+      result.sort((a, b) => {
+        const valA = a[field as keyof typeof a]
+        const valB = b[field as keyof typeof b]
+        if (valA < valB) return order === 'ASC' ? -1 : 1
+        if (valA > valB) return order === 'ASC' ? 1 : -1
+        return 0
+      })
+    }
+
+    // Pagination
+    const page = params.pagination?.page || 1
+    const rows = params.pagination?.rows || 20
+    const start = (page - 1) * rows
+    const end = start + rows
+
+    return {
+      total: result.length,
+      rows: result.slice(start, end),
+    }
+  },
+}
+
+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) {
+              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>