@a2simcode/ui 0.0.256 → 0.0.258

package/docs/examples/table-panel/button-visibility.vue

@@ -1,88 +1,88 @@
-<template>
-  <div style="position: relative; width: 100%; height: 620px">
-    <div style="margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px">
-      <label style="display: flex; align-items: center; gap: 6px">
-        <input v-model="showFilterButton" type="checkbox" />
-        筛选
-      </label>
-      <label style="display: flex; align-items: center; gap: 6px">
-        <input v-model="showOrderButton" type="checkbox" />
-        排序
-      </label>
-      <label style="display: flex; align-items: center; gap: 6px">
-        <input v-model="showColumnButton" type="checkbox" />
-        列管理
-      </label>
-      <label style="display: flex; align-items: center; gap: 6px">
-        <input v-model="showRefreshButton" type="checkbox" />
-        刷新
-      </label>
-      <label style="display: flex; align-items: center; gap: 6px">
-        <input v-model="showFullscreenButton" type="checkbox" />
-        全屏
-      </label>
-    </div>
-
-    <j-table-panel
-      row-key="orderId"
-      :columns="columns"
-      :load-data="loadData"
-      :show-filter-button="showFilterButton"
-      :show-order-button="showOrderButton"
-      :show-column-button="showColumnButton"
-      :show-refresh-button="showRefreshButton"
-      :show-fullscreen-button="showFullscreenButton"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const showFilterButton = ref(true)
-const showOrderButton = ref(true)
-const showColumnButton = ref(true)
-const showRefreshButton = ref(true)
-const showFullscreenButton = ref(true)
-
-const columns = ref([
-  {
-    id: 'orderId',
-    type: '',
-    config: {
-      label: '订单号',
-      width: 150,
-      filter: { isSearchKeyword: true },
-    },
-  },
-  {
-    id: 'customerId',
-    type: '',
-    config: {
-      label: '客户编号',
-      width: 120,
-      filter: { isSearchKeyword: true },
-    },
-  },
-  {
-    id: 'productName',
-    type: '',
-    config: {
-      label: '产品名称',
-      filter: { isSearchKeyword: true },
-    },
-  },
-])
-
-const mockData = [
-  { orderId: 'CA-2016-152156', customerId: 'CG-12520', productName: 'Canon ImageCLASS 2200' },
-  { orderId: 'CA-2017-152157', customerId: 'DV-13045', productName: 'Logitech Mouse' },
-  { orderId: 'US-2017-108966', customerId: 'SO-20335', productName: 'HON Mesh Task Chair' },
-]
-
-const loadData = async () => {
-  return new Promise((resolve) => {
-    setTimeout(() => resolve(mockData), 200)
-  })
-}
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 620px">
+    <div style="margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px">
+      <label style="display: flex; align-items: center; gap: 6px">
+        <input v-model="showFilterButton" type="checkbox" />
+        筛选
+      </label>
+      <label style="display: flex; align-items: center; gap: 6px">
+        <input v-model="showOrderButton" type="checkbox" />
+        排序
+      </label>
+      <label style="display: flex; align-items: center; gap: 6px">
+        <input v-model="showColumnButton" type="checkbox" />
+        列管理
+      </label>
+      <label style="display: flex; align-items: center; gap: 6px">
+        <input v-model="showRefreshButton" type="checkbox" />
+        刷新
+      </label>
+      <label style="display: flex; align-items: center; gap: 6px">
+        <input v-model="showFullscreenButton" type="checkbox" />
+        全屏
+      </label>
+    </div>
+
+    <j-table-panel
+      row-key="orderId"
+      :columns="columns"
+      :load-data="loadData"
+      :show-filter-button="showFilterButton"
+      :show-order-button="showOrderButton"
+      :show-column-button="showColumnButton"
+      :show-refresh-button="showRefreshButton"
+      :show-fullscreen-button="showFullscreenButton"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const showFilterButton = ref(true)
+const showOrderButton = ref(true)
+const showColumnButton = ref(true)
+const showRefreshButton = ref(true)
+const showFullscreenButton = ref(true)
+
+const columns = ref([
+  {
+    id: 'orderId',
+    type: '',
+    config: {
+      label: '订单号',
+      width: 150,
+      filter: { isSearchKeyword: true },
+    },
+  },
+  {
+    id: 'customerId',
+    type: '',
+    config: {
+      label: '客户编号',
+      width: 120,
+      filter: { isSearchKeyword: true },
+    },
+  },
+  {
+    id: 'productName',
+    type: '',
+    config: {
+      label: '产品名称',
+      filter: { isSearchKeyword: true },
+    },
+  },
+])
+
+const mockData = [
+  { orderId: 'CA-2016-152156', customerId: 'CG-12520', productName: 'Canon ImageCLASS 2200' },
+  { orderId: 'CA-2017-152157', customerId: 'DV-13045', productName: 'Logitech Mouse' },
+  { orderId: 'US-2017-108966', customerId: 'SO-20335', productName: 'HON Mesh Task Chair' },
+]
+
+const loadData = async () => {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(mockData), 200)
+  })
+}
+</script>

package/docs/examples/table-panel/card.vue

@@ -1,101 +1,101 @@
-<template>
-  <div style="position: relative; width: 100%; height: 520px">
-    <j-table-panel
-      view-mode="card"
-      row-key="id"
-      :columns="columns"
-      :load-data="loadData"
-      :actions="actions"
-      :is-page="true"
-      card-label-key="name"
-      :card-load-src="cardLoadSrc"
-      :card-width="25"
-      :card-show-big-edit-button="true"
-      card-image-fit="cover"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const columns = ref([
-  {
-    id: 'id',
-    type: '',
-    config: {
-      label: 'ID',
-      width: 80,
-    },
-  },
-  {
-    id: 'name',
-    type: '',
-    config: {
-      label: '名称',
-      filter: {
-        isSearchKeyword: true,
-      },
-    },
-  },
-  {
-    id: 'category',
-    type: '',
-    config: {
-      label: '分类',
-      width: 120,
-      filter: {
-        isSearchKeyword: true,
-      },
-    },
-  },
-])
-
-const actions = ref([
-  {
-    id: 'edit',
-    label: '编辑',
-    config: { icon: 'mdi:pencil' },
-    click: (row: Record<string, any>) => {
-      ElMessage.info(`编辑：${row.name}`)
-    },
-  },
-  {
-    id: 'delete',
-    label: '删除',
-    config: { icon: 'mdi:delete', status: 'danger' },
-    click: (row: Record<string, any>) => {
-      ElMessage.warning(`删除：${row.name}`)
-    },
-  },
-])
-
-const mockData = Array.from({ length: 30 }).map((_, index) => {
-  const id = index + 1
-  const category = ['办公用品', '科技产品', '家具'][id % 3]
-  return {
-    id,
-    name: `示例数据 ${id}`,
-    category,
-    cover: `https://picsum.photos/seed/table-panel-card-${id}/400/300`,
-  }
-})
-
-const cardLoadSrc = (item: Record<string, any>) => {
-  return item.cover || ''
-}
-
-const loadData = async (params: any) => {
-  const rows = params?.pagination?.rows ?? 12
-  const page = params?.pagination?.page ?? 1
-
-  const start = Math.max(0, (page - 1) * rows)
-  const end = start + rows
-
-  return {
-    rows: mockData.slice(start, end),
-    records: mockData.length,
-  }
-}
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 520px">
+    <j-table-panel
+      view-mode="card"
+      row-key="id"
+      :columns="columns"
+      :load-data="loadData"
+      :actions="actions"
+      :is-page="true"
+      card-label-key="name"
+      :card-load-src="cardLoadSrc"
+      :card-width="25"
+      :card-show-big-edit-button="true"
+      card-image-fit="cover"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const columns = ref([
+  {
+    id: 'id',
+    type: '',
+    config: {
+      label: 'ID',
+      width: 80,
+    },
+  },
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '名称',
+      filter: {
+        isSearchKeyword: true,
+      },
+    },
+  },
+  {
+    id: 'category',
+    type: '',
+    config: {
+      label: '分类',
+      width: 120,
+      filter: {
+        isSearchKeyword: true,
+      },
+    },
+  },
+])
+
+const actions = ref([
+  {
+    id: 'edit',
+    label: '编辑',
+    config: { icon: 'mdi:pencil' },
+    click: (row: Record<string, any>) => {
+      ElMessage.info(`编辑：${row.name}`)
+    },
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    config: { icon: 'mdi:delete', status: 'danger' },
+    click: (row: Record<string, any>) => {
+      ElMessage.warning(`删除：${row.name}`)
+    },
+  },
+])
+
+const mockData = Array.from({ length: 30 }).map((_, index) => {
+  const id = index + 1
+  const category = ['办公用品', '科技产品', '家具'][id % 3]
+  return {
+    id,
+    name: `示例数据 ${id}`,
+    category,
+    cover: `https://picsum.photos/seed/table-panel-card-${id}/400/300`,
+  }
+})
+
+const cardLoadSrc = (item: Record<string, any>) => {
+  return item.cover || ''
+}
+
+const loadData = async (params: any) => {
+  const rows = params?.pagination?.rows ?? 12
+  const page = params?.pagination?.page ?? 1
+
+  const start = Math.max(0, (page - 1) * rows)
+  const end = start + rows
+
+  return {
+    rows: mockData.slice(start, end),
+    records: mockData.length,
+  }
+}
+</script>

package/docs/examples/table-panel/column-filter.vue

@@ -1,116 +1,116 @@
-<template>
-  <div style="position: relative; width: 100%; height: 560px">
-    <div style="display: flex; align-items: center; gap: 8px; padding: 0 0 10px">
-      <div>当前隐藏列: {{ hiddenColumnsLabel }}</div>
-      <j-button type="text" label="隐藏状态列" @click="hide('status')" />
-      <j-button type="text" label="显示状态列" @click="show('status')" />
-      <j-button type="text" label="隐藏更新时间列" @click="hide('updateTime')" />
-      <j-button type="text" label="显示更新时间列" @click="show('updateTime')" />
-      <j-button type="text" label="重置" @click="reset()" />
-    </div>
-    <j-table-panel
-      row-key="id"
-      :columns="columns"
-      :load-data="loadData"
-      :column-filter="hiddenColumns"
-      :show-filter-button="false"
-      :show-order-button="false"
-      :show-column-button="false"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-const columns = ref([
-  {
-    id: 'name',
-    type: '',
-    config: {
-      label: '名称',
-      width: 'auto',
-      align: 'left',
-    },
-  },
-  {
-    id: 'status',
-    type: '',
-    config: {
-      label: '状态',
-      width: 'auto',
-      align: 'center',
-    },
-  },
-  {
-    id: 'updateTime',
-    type: '',
-    config: {
-      label: '最近更新时间',
-      width: 'auto',
-      align: 'center',
-    },
-  },
-  {
-    id: 'owner',
-    type: '',
-    config: {
-      label: '负责人',
-      width: 'auto',
-      align: 'center',
-    },
-  },
-])
-
-const records = ref([
-  {
-    id: 'A',
-    name: '项目A',
-    status: '进行中',
-    updateTime: '2025-12-25 20:55:52',
-    owner: '张三',
-  },
-  {
-    id: 'B',
-    name: '项目B',
-    status: '已完成',
-    updateTime: '2025-12-25 20:51:17',
-    owner: '李四',
-  },
-  {
-    id: 'C',
-    name: '项目C',
-    status: '待审核',
-    updateTime: '2025-12-25 20:51:11',
-    owner: '王五',
-  },
-])
-
-const loadData = async () => {
-  return records.value
-}
-
-const hiddenColumns = ref<string[]>(['status'])
-
-const hide = (id: string) => {
-  if (!hiddenColumns.value.includes(id)) {
-    hiddenColumns.value.push(id)
-  }
-}
-
-const show = (id: string) => {
-  const index = hiddenColumns.value.indexOf(id)
-  if (index >= 0) {
-    hiddenColumns.value.splice(index, 1)
-  }
-}
-
-const reset = () => {
-  hiddenColumns.value.splice(0, hiddenColumns.value.length)
-}
-
-const hiddenColumnsLabel = computed(() => {
-  return hiddenColumns.value.length > 0 ? hiddenColumns.value.join('、') : '无'
-})
-</script>
-
+<template>
+  <div style="position: relative; width: 100%; height: 560px">
+    <div style="display: flex; align-items: center; gap: 8px; padding: 0 0 10px">
+      <div>当前隐藏列: {{ hiddenColumnsLabel }}</div>
+      <j-button type="text" label="隐藏状态列" @click="hide('status')" />
+      <j-button type="text" label="显示状态列" @click="show('status')" />
+      <j-button type="text" label="隐藏更新时间列" @click="hide('updateTime')" />
+      <j-button type="text" label="显示更新时间列" @click="show('updateTime')" />
+      <j-button type="text" label="重置" @click="reset()" />
+    </div>
+    <j-table-panel
+      row-key="id"
+      :columns="columns"
+      :load-data="loadData"
+      :column-filter="hiddenColumns"
+      :show-filter-button="false"
+      :show-order-button="false"
+      :show-column-button="false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '名称',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'status',
+    type: '',
+    config: {
+      label: '状态',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+  {
+    id: 'updateTime',
+    type: '',
+    config: {
+      label: '最近更新时间',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+  {
+    id: 'owner',
+    type: '',
+    config: {
+      label: '负责人',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: 'A',
+    name: '项目A',
+    status: '进行中',
+    updateTime: '2025-12-25 20:55:52',
+    owner: '张三',
+  },
+  {
+    id: 'B',
+    name: '项目B',
+    status: '已完成',
+    updateTime: '2025-12-25 20:51:17',
+    owner: '李四',
+  },
+  {
+    id: 'C',
+    name: '项目C',
+    status: '待审核',
+    updateTime: '2025-12-25 20:51:11',
+    owner: '王五',
+  },
+])
+
+const loadData = async () => {
+  return records.value
+}
+
+const hiddenColumns = ref<string[]>(['status'])
+
+const hide = (id: string) => {
+  if (!hiddenColumns.value.includes(id)) {
+    hiddenColumns.value.push(id)
+  }
+}
+
+const show = (id: string) => {
+  const index = hiddenColumns.value.indexOf(id)
+  if (index >= 0) {
+    hiddenColumns.value.splice(index, 1)
+  }
+}
+
+const reset = () => {
+  hiddenColumns.value.splice(0, hiddenColumns.value.length)
+}
+
+const hiddenColumnsLabel = computed(() => {
+  return hiddenColumns.value.length > 0 ? hiddenColumns.value.join('、') : '无'
+})
+</script>
+