@a2simcode/ui 0.0.45 → 0.0.47

package/docs/examples/switch/size.vue

@@ -0,0 +1,15 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <j-switch v-model="value1" size="large" />
+    <j-switch v-model="value2" />
+    <j-switch v-model="value3" size="small" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(true)
+const value2 = ref(true)
+const value3 = ref(true)
+</script>

package/docs/examples/switch/text.vue

@@ -0,0 +1,13 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <j-switch v-model="value1" active-text="开" inactive-text="关" />
+    <j-switch v-model="value2" inline-prompt active-text="开启" inactive-text="关闭" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref(true)
+const value2 = ref(false)
+</script>

package/docs/examples/table/actions.vue

@@ -0,0 +1,116 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table :columns="columns" :records="records" :actions="actions" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const columns = ref([
+  {
+    id: 'name',
+    config: {
+      label: '名称',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'status',
+    config: {
+      label: '状态',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+  {
+    id: 'updateTime',
+    config: {
+      label: '最近更新时间',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: '1',
+    name: '项目A',
+    status: '进行中',
+    updateTime: '2025-12-25 20:55:52',
+  },
+  {
+    id: '2',
+    name: '项目B',
+    status: '已完成',
+    updateTime: '2025-12-25 20:51:17',
+  },
+  {
+    id: '3',
+    name: '项目C',
+    status: '待审核',
+    updateTime: '2025-12-25 20:51:11',
+  },
+  {
+    id: '4',
+    name: '项目D',
+    status: '已归档',
+    updateTime: '2025-12-24 16:43:50',
+  },
+  {
+    id: '5',
+    name: '项目E',
+    status: '进行中',
+    updateTime: '2025-12-23 17:22:07',
+  },
+])
+
+const actions = ref([
+  {
+    id: 'edit',
+    label: '编辑',
+    click: (row: Record<string, any>) => {
+      ElMessage.success(`编辑: ${row.name}`)
+    },
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    isDanger: true,
+    click: (row: Record<string, any>) => {
+      ElMessage.warning(`删除: ${row.name}`)
+    },
+  },
+  {
+    id: 'copy',
+    label: '复制',
+    click: (row: Record<string, any>) => {
+      ElMessage.info(`复制: ${row.name}`)
+    },
+  },
+  {
+    id: 'export',
+    label: '导出',
+    click: (row: Record<string, any>) => {
+      ElMessage.info(`导出: ${row.name}`)
+    },
+  },
+  {
+    id: 'preview',
+    label: '预览',
+    click: (row: Record<string, any>) => {
+      ElMessage.info(`预览: ${row.name}`)
+    },
+  },
+  {
+    id: 'history',
+    label: '历史记录',
+    click: (row: Record<string, any>) => {
+      ElMessage.info(`历史记录: ${row.name}`)
+    },
+  },
+])
+</script>

package/docs/examples/table/add-row.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div style="margin-bottom: 16px">
+      <j-button label="外部改变数据" @click="changeData" />
+    </div>
+    <div style="height: 400px">
+      <j-table
+        v-model="records"
+        :columns="columns"
+        :edit-config="{ isAddBtn: true, addBtnText: '新增人员', isRemoveBtn: true }"
+        @change="handleChange"
+      />
+    </div>
+    <div style="margin-top: 16px">
+      <h3>当前数据：</h3>
+      <pre>{{ records }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    type: 'j-input',
+    config: {
+      label: '姓名',
+      width: 120,
+      defaultValue: '新用户',
+    },
+  },
+  {
+    id: 'age',
+    type: 'j-number',
+    config: {
+      label: '年龄',
+      width: 100,
+      defaultValue: 18,
+    },
+  },
+  {
+    id: 'status',
+    type: 'j-select',
+    config: {
+      label: '状态',
+      width: 120,
+      options: [
+        { label: '在职', value: 'active' },
+        { label: '离职', value: 'inactive' },
+      ],
+      defaultValue: 'active',
+    },
+  },
+])
+
+const records = ref([
+  {
+    id: '1',
+    name: '张三',
+    age: 28,
+    status: 'active',
+  },
+  {
+    id: '2',
+    name: '李四',
+    age: 32,
+    status: 'inactive',
+  },
+])
+
+const handleChange = (params: any) => {
+  console.log('表格变更：', params)
+  if (params.type === 'add') {
+    // 新增行时，同步更新 records
+    records.value.push(params.value)
+  } else if (params.type === 'delete') {
+    // 删除行时，从 records 中移除对应的数据
+    const index = records.value.findIndex((item) => item.id === params.data.id)
+    if (index > -1) {
+      records.value.splice(index, 1)
+    }
+  }
+}
+
+const changeData = () => {
+  records.value = [
+    {
+      id: '3',
+      name: '王五',
+      age: 20,
+      status: 'active',
+    },
+    {
+      id: '4',
+      name: '赵六',
+      age: 25,
+      status: 'inactive',
+    },
+  ]
+}
+</script>

package/docs/examples/table/basic.vue

@@ -0,0 +1,168 @@
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table :columns="columns" :records="records" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'Order ID',
+    config: {
+      label: 'Order ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Customer ID',
+    config: {
+      label: 'Customer ID',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Product Name',
+    config: {
+      label: 'Product Name',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Category',
+    config: {
+      label: 'Category',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Sub-Category',
+    config: {
+      label: 'Sub-Category',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Region',
+    config: {
+      label: 'Region',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'City',
+    config: {
+      label: 'City',
+      width: 'auto',
+      align: 'left',
+    },
+  },
+  {
+    id: 'Order Date',
+    config: {
+      label: 'Order Date',
+      width: 'auto',
+      align: 'center',
+    },
+  },
+  {
+    id: 'Quantity',
+    config: {
+      label: 'Quantity',
+      width: 'auto',
+      align: 'right',
+    },
+  },
+  {
+    id: 'Sales',
+    config: {
+      label: 'Sales',
+      width: 'auto',
+      align: 'right',
+    },
+  },
+  {
+    id: 'Profit',
+    config: {
+      label: 'Profit',
+      width: 'auto',
+      align: 'right',
+    },
+  },
+])
+
+const records = ref([
+  {
+    'Order ID': 'CA-2016-152156',
+    'Customer ID': 'CG-12520',
+    'Product Name': 'Canon ImageCLASS 2200 Advanced Copier',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Copiers',
+    Region: 'West',
+    City: 'Los Angeles',
+    'Order Date': '2016-11-08',
+    Quantity: 2,
+    Sales: 2399.99,
+    Profit: 400.0,
+  },
+  {
+    'Order ID': 'CA-2017-152157',
+    'Customer ID': 'DV-13045',
+    'Product Name': 'Logitech Wireless Mouse',
+    Category: 'Technology',
+    'Sub-Category': 'Accessories',
+    Region: 'West',
+    City: 'San Francisco',
+    'Order Date': '2017-03-15',
+    Quantity: 3,
+    Sales: 89.97,
+    Profit: 25.5,
+  },
+  {
+    'Order ID': 'US-2017-108966',
+    'Customer ID': 'SO-20335',
+    'Product Name': 'HON Mesh Task Chair',
+    Category: 'Furniture',
+    'Sub-Category': 'Chairs',
+    Region: 'East',
+    City: 'New York',
+    'Order Date': '2017-06-21',
+    Quantity: 4,
+    Sales: 799.96,
+    Profit: 120.0,
+  },
+  {
+    'Order ID': 'US-2016-108967',
+    'Customer ID': 'AB-10015',
+    'Product Name': 'Avery Binder Labels',
+    Category: 'Office Supplies',
+    'Sub-Category': 'Labels',
+    Region: 'Central',
+    City: 'Chicago',
+    'Order Date': '2016-02-03',
+    Quantity: 10,
+    Sales: 15.9,
+    Profit: 5.2,
+  },
+  {
+    'Order ID': 'CA-2015-108968',
+    'Customer ID': 'ML-12515',
+    'Product Name': 'Apple iPhone 7',
+    Category: 'Technology',
+    'Sub-Category': 'Phones',
+    Region: 'South',
+    City: 'Dallas',
+    'Order Date': '2015-09-12',
+    Quantity: 1,
+    Sales: 699.0,
+    Profit: 80.0,
+  },
+])
+</script>

package/docs/examples/table/editable.vue

@@ -0,0 +1,261 @@
+<template>
+  <div>
+    <div style="position: relative; width: 100%; height: 600px">
+      <j-table :columns="columns" :records="records" :is-show-number="true" />
+    </div>
+    <div style="margin-top: 16px; padding: 12px; background: #f5f7fa; border-radius: 4px">
+      <div style="color: #909399">
+        点击单元格进行编辑... 所有表单组件类型都已集成到此可编辑表格中
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 表格列配置 - 包含所有可用的表单组件类型
+const columns = ref([
+  {
+    id: 'name',
+    type: 'j-input', // 文本输入框
+    config: {
+      label: '姓名',
+      width: 120,
+      placeholder: '请输入姓名',
+    },
+  },
+  {
+    id: 'age',
+    type: 'j-number', // 数字输入框
+    config: {
+      label: '年龄',
+      width: 100,
+      min: 0,
+      max: 150,
+      placeholder: '请输入年龄',
+    },
+  },
+  {
+    id: 'status',
+    type: 'j-select', // 下拉选择
+    config: {
+      label: '状态',
+      width: 120,
+      options: [
+        { label: '在职', value: 'active' },
+        { label: '离职', value: 'inactive' },
+        { label: '休假', value: 'vacation' },
+        { label: '试用期', value: 'probation' },
+      ],
+      placeholder: '请选择状态',
+    },
+  },
+  {
+    id: 'gender',
+    type: 'j-radio', // 单选框
+    config: {
+      label: '性别',
+      width: 150,
+      options: [
+        { label: '男', value: 'male' },
+        { label: '女', value: 'female' },
+        { label: '其他', value: 'other' },
+      ],
+    },
+  },
+  {
+    id: 'skills',
+    type: 'j-checkbox', // 多选框
+    config: {
+      label: '技能',
+      width: 200,
+      options: [
+        { label: 'JavaScript', value: 'js' },
+        { label: 'Vue', value: 'vue' },
+        { label: 'React', value: 'react' },
+        { label: 'Node.js', value: 'node' },
+        { label: 'Python', value: 'python' },
+      ],
+    },
+  },
+  {
+    id: 'isActive',
+    type: 'j-switch', // 开关
+    config: {
+      label: '是否在职',
+      width: 100,
+    },
+  },
+  {
+    id: 'description',
+    type: 'j-textarea', // 多行文本
+    config: {
+      label: '描述',
+      width: 200,
+      rows: 2,
+      placeholder: '请输入详细描述',
+    },
+  },
+  {
+    id: 'location',
+    type: 'j-cascader-select', // 级联选择
+    config: {
+      label: '地区',
+      width: 200,
+      options: [
+        {
+          value: 'beijing',
+          label: '北京',
+          children: [
+            { value: 'chaoyang', label: '朝阳区' },
+            { value: 'haidian', label: '海淀区' },
+          ],
+        },
+        {
+          value: 'shanghai',
+          label: '上海',
+          children: [
+            { value: 'pudong', label: '浦东新区' },
+            { value: 'jingan', label: '静安区' },
+          ],
+        },
+        {
+          value: 'guangdong',
+          label: '广东',
+          children: [
+            { value: 'guangzhou', label: '广州' },
+            { value: 'shenzhen', label: '深圳' },
+          ],
+        },
+      ],
+      placeholder: '请选择地区',
+    },
+  },
+  {
+    id: 'searchTerm',
+    type: 'j-autocomplete', // 自动补全
+    config: {
+      label: '搜索',
+      width: 150,
+      options: [
+        { label: 'Apple', value: 'apple' },
+        { label: 'Banana', value: 'banana' },
+        { label: 'Cherry', value: 'cherry' },
+        { label: 'Date', value: 'date' },
+        { label: 'Elderberry', value: 'elderberry' },
+      ],
+      placeholder: '请输入搜索词',
+    },
+  },
+  {
+    id: 'rating',
+    type: 'j-rate', // 评分
+    config: {
+      label: '评分',
+      width: 150,
+      max: 5,
+      allowHalf: true,
+    },
+  },
+  {
+    id: 'volume',
+    type: 'j-slider', // 滑块
+    config: {
+      label: '音量',
+      width: 150,
+      min: 0,
+      max: 100,
+      step: 10,
+    },
+  },
+  {
+    id: 'tags',
+    type: 'j-input-tag', // 标签输入
+    config: {
+      label: '标签',
+      width: 200,
+      placeholder: '输入标签，回车添加',
+    },
+  },
+])
+
+// 表格数据
+const records = ref([
+  {
+    name: '张三',
+    age: 28,
+    status: 'active',
+    gender: 'male',
+    skills: 'js,vue',
+    isActive: true,
+    description: '资深前端工程师',
+    verification: '',
+    location: 'beijing,chaoyang',
+    searchTerm: 'Apple',
+    rating: 4.5,
+    volume: 70,
+    tags: '技术专家,团队领导',
+  },
+  {
+    name: '李四',
+    age: 32,
+    status: 'active',
+    gender: 'female',
+    skills: 'react,node',
+    isActive: true,
+    description: '产品经理',
+    verification: '',
+    location: 'shanghai,pudong',
+    searchTerm: 'Banana',
+    rating: 4,
+    volume: 50,
+    tags: '产品专家',
+  },
+  {
+    name: '王五',
+    age: 25,
+    status: 'vacation',
+    gender: 'male',
+    skills: 'python,js',
+    isActive: false,
+    description: 'UI设计师',
+    verification: '',
+    location: 'guangdong,shenzhen',
+    searchTerm: 'Cherry',
+    rating: 5,
+    volume: 80,
+    tags: '设计师,创意',
+  },
+  {
+    name: '赵六',
+    age: 35,
+    status: 'inactive',
+    gender: 'female',
+    skills: 'js,react,node',
+    isActive: false,
+    description: '市场总监',
+    verification: '',
+    location: 'beijing,haidian',
+    searchTerm: 'Date',
+    rating: 3.5,
+    volume: 60,
+    tags: '市场,管理',
+  },
+  {
+    name: '钱七',
+    age: 29,
+    status: 'active',
+    gender: 'male',
+    skills: 'vue,node',
+    isActive: true,
+    description: '后端工程师',
+    verification: '',
+    location: 'shanghai,jingan',
+    searchTerm: 'Elderberry',
+    rating: 4,
+    volume: 40,
+    tags: '后端,架构',
+  },
+])
+</script>