@a2simcode/ui 0.0.46 → 0.0.48

package/docs/examples/table-panel/multiple-selection.vue

@@ -0,0 +1,243 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table-panel
+      row-key="orderId"
+      :columns="columns"
+      :load-data="loadData"
+      :buttons="buttons"
+      :actions="actions"
+      is-multiple
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+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,
+      },
+    },
+  },
+  {
+    id: 'category',
+    type: '',
+    config: {
+      label: '类别',
+      width: 120,
+      dataType: 'options',
+      options: [
+        { label: '办公用品', value: '办公用品' },
+        { label: '科技产品', value: '科技产品' },
+        { label: '家具', value: '家具' },
+      ],
+    },
+  },
+  {
+    id: 'region',
+    type: '',
+    config: {
+      label: '区域',
+      width: 100,
+    },
+  },
+  {
+    id: 'orderDate',
+    type: '',
+    config: {
+      label: '订单日期',
+      width: 120,
+      dataType: 'dateTime',
+    },
+  },
+  {
+    id: 'quantity',
+    type: '',
+    config: {
+      label: '数量',
+      width: 80,
+      align: 'right',
+    },
+  },
+  {
+    id: 'sales',
+    type: '',
+    config: {
+      label: '销售额',
+      width: 100,
+      align: 'right',
+    },
+  },
+])
+
+const buttons = ref([
+  {
+    label: '新增',
+    icon: 'mdi:add',
+    type: 'primary',
+    click: () => {
+      ElMessage.success('点击新增按钮')
+    },
+  },
+  {
+    label: '导出',
+    icon: 'mdi:download',
+    click: () => {
+      ElMessage.info('点击导出按钮')
+    },
+  },
+])
+
+const actions = ref([
+  {
+    id: 'edit',
+    label: '编辑',
+    click: (row: Record<string, any>) => {
+      ElMessage.info(`编辑: ${row.orderId}`)
+    },
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    isDanger: true,
+    click: (row: Record<string, any>) => {
+      ElMessage.warning(`删除: ${row.orderId}`)
+    },
+  },
+])
+
+const mockData = [
+  {
+    id: '1',
+    orderId: 'CA-2016-152156',
+    customerId: 'CG-12520',
+    productName: 'Canon ImageCLASS 2200 Advanced Copier',
+    category: '办公用品',
+    region: '华东',
+    orderDate: '2016-11-08',
+    quantity: 2,
+    sales: 2399.99,
+  },
+  {
+    id: '2',
+    orderId: 'CA-2017-152157',
+    customerId: 'DV-13045',
+    productName: 'Logitech Wireless Mouse',
+    category: '科技产品',
+    region: '华南',
+    orderDate: '2017-03-15',
+    quantity: 3,
+    sales: 89.97,
+  },
+  {
+    id: '3',
+    orderId: 'US-2017-108966',
+    customerId: 'SO-20335',
+    productName: 'HON Mesh Task Chair',
+    category: '家具',
+    region: '华北',
+    orderDate: '2017-06-21',
+    quantity: 4,
+    sales: 799.96,
+  },
+  {
+    id: '4',
+    orderId: 'US-2016-108967',
+    customerId: 'AB-10015',
+    productName: 'Avery Binder Labels',
+    category: '办公用品',
+    region: '华中',
+    orderDate: '2016-02-03',
+    quantity: 10,
+    sales: 15.9,
+  },
+  {
+    id: '5',
+    orderId: 'CA-2015-108968',
+    customerId: 'ML-12515',
+    productName: 'Apple iPhone 7',
+    category: '科技产品',
+    region: '西南',
+    orderDate: '2015-09-12',
+    quantity: 1,
+    sales: 699.0,
+  },
+  {
+    id: '6',
+    orderId: 'CA-2018-108969',
+    customerId: 'ML-12516',
+    productName: 'Samsung Galaxy S8',
+    category: '科技产品',
+    region: '华南',
+    orderDate: '2018-05-20',
+    quantity: 2,
+    sales: 1398.0,
+  },
+  {
+    id: '7',
+    orderId: 'US-2019-108970',
+    customerId: 'AB-10016',
+    productName: 'Office Chair',
+    category: '家具',
+    region: '华东',
+    orderDate: '2019-08-15',
+    quantity: 5,
+    sales: 2495.0,
+  },
+]
+
+const loadData = async (loadDataParams: any) => {
+  console.log(loadDataParams, 'loadDataParams')
+
+  // 检测是否有查询过滤参数
+  const hasKeyword = loadDataParams.keyword?.value
+  const hasFilter = loadDataParams.filter?.cond?.length > 0
+
+  if (hasKeyword || hasFilter) {
+    ElMessageBox.alert(
+      '查询过滤功能需要后端支持。在实际使用中，请将查询参数（keyword 和 filter）传递给后端接口进行数据过滤。',
+      '提示',
+      {
+        confirmButtonText: '知道了',
+        type: 'info',
+      }
+    )
+  }
+
+  // 模拟异步加载数据
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(mockData)
+    }, 300)
+  })
+}
+</script>

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

@@ -0,0 +1,133 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table-panel
+      ref="tablePanelRef"
+      row-key="orderId"
+      :columns="columns"
+      :load-data="loadData"
+      :is-page="true"
+      :page-size="10"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessageBox } from 'element-plus'
+
+const tablePanelRef = ref()
+
+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,
+      },
+    },
+  },
+  {
+    id: 'category',
+    type: '',
+    config: {
+      label: '类别',
+      width: 120,
+    },
+  },
+  {
+    id: 'region',
+    type: '',
+    config: {
+      label: '区域',
+      width: 100,
+    },
+  },
+  {
+    id: 'sales',
+    type: '',
+    config: {
+      label: '销售额',
+      width: 100,
+      align: 'right',
+    },
+  },
+])
+
+// 生成模拟数据
+const generateMockData = (count: number) => {
+  const categories = ['办公用品', '科技产品', '家具']
+  const regions = ['华东', '华南', '华北', '华中', '西南', '西北']
+  const data = []
+
+  for (let i = 1; i <= count; i++) {
+    data.push({
+      orderId: `ORD-${String(i).padStart(6, '0')}`,
+      customerId: `CUS-${String(Math.floor(Math.random() * 10000)).padStart(5, '0')}`,
+      productName: `产品名称 ${i}`,
+      category: categories[Math.floor(Math.random() * categories.length)],
+      region: regions[Math.floor(Math.random() * regions.length)],
+      sales: (Math.random() * 10000).toFixed(2),
+    })
+  }
+
+  return data
+}
+
+const allData = generateMockData(100)
+
+const loadData = async (params: Record<string, any>) => {
+  // 检测是否有查询过滤参数
+  const hasKeyword = params.keyword?.value
+  const hasFilter = params.filter?.cond?.length > 0
+  
+  if (hasKeyword || hasFilter) {
+    ElMessageBox.alert(
+      '查询过滤功能需要后端支持。在实际使用中，请将查询参数（keyword 和 filter）传递给后端接口进行数据过滤。',
+      '提示',
+      {
+        confirmButtonText: '知道了',
+        type: 'info',
+      }
+    )
+  }
+  
+  // 模拟异步分页加载
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const { pagination } = params
+      const { rows, page } = pagination || { rows: 10, page: 1 }
+      const start = (page - 1) * rows
+      const end = start + rows
+
+      resolve({
+        rows: allData.slice(start, end),
+        records: allData.length,
+      })
+    }, 300)
+  })
+}
+</script>

package/docs/examples/tabs/basic.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="tabs-demo">
+    <div class="demo-item">
+      <p>基础用法</p>
+      <j-tabs v-model="activeName1">
+        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </j-tabs>
+    </div>
+
+    <div class="demo-item">
+      <p>卡片风格</p>
+      <j-tabs v-model="activeName2" type="card">
+        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </j-tabs>
+    </div>
+
+    <div class="demo-item">
+      <p>边框卡片风格</p>
+      <j-tabs v-model="activeName3" type="border-card">
+        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </j-tabs>
+    </div>
+
+    <div class="demo-item" style="height: 300px">
+      <p>标签位置</p>
+      <div class="j-block" style="height: 0; flex: 1">
+        <j-tabs v-model="activeName4" tab-position="left">
+          <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+        </j-tabs>
+      </div>
+    </div>
+
+    <div class="demo-item">
+      <p>可关闭标签</p>
+      <j-tabs v-model="activeName5" type="card" closable>
+        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </j-tabs>
+    </div>
+
+    <div class="demo-item">
+      <p>可增加标签</p>
+      <j-tabs v-model="activeName6" type="card" addable>
+        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </j-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeName1 = ref('first')
+const activeName2 = ref('first')
+const activeName3 = ref('first')
+const activeName4 = ref('first')
+const activeName5 = ref('first')
+const activeName6 = ref('first')
+</script>
+
+<style scoped>
+.tabs-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.demo-item p {
+  margin: 0 0 12px;
+  font-size: 14px;
+  color: var(--j-color-text-2);
+  font-weight: 500;
+}
+
+.demo-item {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/docs/examples/title/basic.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="title-demo">
+    <div class="demo-item">
+      <p>基础用法</p>
+      <j-title title="这是一个标题" />
+    </div>
+
+    <div class="demo-item">
+      <p>设置颜色</p>
+      <j-title title="蓝色标题" color="#1890ff" />
+    </div>
+
+    <div class="demo-item">
+      <p>设置大小</p>
+      <j-title title="小标题" :size="14" />
+      <j-title title="默认标题" :size="16" />
+      <j-title title="大标题" :size="24" />
+    </div>
+
+    <div class="demo-item">
+      <p>设置粗细</p>
+      <j-title title="正常粗细" weight="normal" />
+      <j-title title="加粗标题" weight="bold" />
+      <j-title title="特粗标题" weight="900" />
+    </div>
+
+    <div class="demo-item">
+      <p>组合使用</p>
+      <j-title
+        title="自定义样式标题"
+        color="#f53f3f"
+        :size="20"
+        weight="bold"
+        class="custom-title"
+      />
+    </div>
+
+    <div class="demo-item">
+      <p>使用 style 对象</p>
+      <j-title
+        title="复杂样式标题"
+        :style="{
+          color: '#00b42a',
+          fontSize: '18px',
+          fontWeight: 'bold',
+          textDecoration: 'underline',
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 示例代码无需额外逻辑
+</script>
+
+<style scoped>
+.title-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.demo-item {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.demo-item p {
+  margin: 0;
+  font-size: 14px;
+  color: var(--j-color-text-2);
+  font-weight: 500;
+}
+
+.custom-title {
+  letter-spacing: 1px;
+}
+</style>

package/docs/examples/tree/accordion.vue

@@ -0,0 +1,46 @@
+<template>
+  <div style="height: 400px">
+    <j-tree :list="treeList" accordion />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const treeList = ref([
+  {
+    label: '一级 1',
+    value: '1',
+    children: [
+      {
+        label: '二级 1-1',
+        value: '1-1',
+        children: [
+          {
+            label: '三级 1-1-1',
+            value: '1-1-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: '一级 2',
+    value: '2',
+    children: [
+      {
+        label: '二级 2-1',
+        value: '2-1',
+      },
+      {
+        label: '二级 2-2',
+        value: '2-2',
+      },
+    ],
+  },
+  {
+    label: '一级 3',
+    value: '3',
+  },
+])
+</script>

package/docs/examples/tree/basic.vue

@@ -0,0 +1,50 @@
+<template>
+  <div style="height: 400px">
+    <j-tree :list="treeList" @click="handleClick" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const treeList = ref([
+  {
+    label: '一级 1',
+    value: '1',
+    children: [
+      {
+        label: '二级 1-1',
+        value: '1-1',
+        children: [
+          {
+            label: '三级 1-1-1',
+            value: '1-1-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: '一级 2',
+    value: '2',
+    children: [
+      {
+        label: '二级 2-1',
+        value: '2-1',
+      },
+      {
+        label: '二级 2-2',
+        value: '2-2',
+      },
+    ],
+  },
+  {
+    label: '一级 3',
+    value: '3',
+  },
+])
+
+const handleClick = (value: any, node: any, event: any) => {
+  console.log('点击节点：', value, node)
+}
+</script>

package/docs/examples/tree/buttons.vue

@@ -0,0 +1,53 @@
+<template>
+  <div style="height: 400px">
+    <j-tree :list="treeList" :tree-buttons="treeButtons" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const treeList = ref([
+  {
+    label: '一级 1',
+    value: '1',
+    children: [
+      {
+        label: '二级 1-1',
+        value: '1-1',
+      },
+    ],
+  },
+  {
+    label: '一级 2',
+    value: '2',
+  },
+])
+
+const treeButtons = ref([
+  {
+    prop: 'edit',
+    label: '编辑',
+    icon: 'material-symbols-light:edit',
+    children: [
+      {
+        prop: 'edit-item',
+        label: '编辑项',
+        icon: 'material-symbols-light:edit',
+        click: (row: any) => {
+          console.log('编辑：', row)
+        },
+      },
+      {
+        prop: 'delete-item',
+        label: '删除项',
+        icon: 'material-symbols-light:delete',
+        danger: true,
+        click: (row: any) => {
+          console.log('删除：', row)
+        },
+      },
+    ],
+  },
+])
+</script>