@a2simcode/ui 0.0.45 → 0.0.47

package/docs/examples/tree/checkable.vue

@@ -0,0 +1,52 @@
+<template>
+  <div style="height: 400px">
+    <j-tree
+      :list="treeList"
+      checkable
+      :default-checked-keys="['1-1']"
+      @check="handleCheck"
+    />
+  </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',
+      },
+    ],
+  },
+])
+
+const handleCheck = (checkedKeys: any[], data: any) => {
+  console.log('选中的节点：', checkedKeys)
+  console.log('选中的节点数据：', data)
+}
+</script>

package/docs/examples/tree/custom-keys.vue

@@ -0,0 +1,39 @@
+<template>
+  <div style="height: 400px">
+    <j-tree
+      :list="treeList"
+      label-key="name"
+      value-key="id"
+      pid-key="parentId"
+      id-key="id"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 使用自定义字段名的数据
+const treeList = ref([
+  {
+    name: '一级 1',
+    id: '1',
+    parentId: '',
+  },
+  {
+    name: '二级 1-1',
+    id: '1-1',
+    parentId: '1',
+  },
+  {
+    name: '一级 2',
+    id: '2',
+    parentId: '',
+  },
+  {
+    name: '二级 2-1',
+    id: '2-1',
+    parentId: '2',
+  },
+])
+</script>

package/docs/examples/tree/default-expanded.vue

@@ -0,0 +1,52 @@
+<template>
+  <div style="height: 400px">
+    <j-tree
+      :list="treeList"
+      :default-expanded-keys="['1', '2']"
+      :default-expand-all="false"
+    />
+  </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: '一级 3',
+    value: '3',
+    children: [
+      {
+        label: '二级 3-1',
+        value: '3-1',
+      },
+    ],
+  },
+])
+</script>

package/docs/examples/tree/draggable.vue

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

package/docs/examples/tree/expand-on-click.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <h3>点击节点不展开（默认）</h3>
+    <div style="height: 200px; margin-bottom: 20px">
+      <j-tree :list="treeList" />
+    </div>
+    <h3>点击节点展开</h3>
+    <div style="height: 200px">
+      <j-tree :list="treeList" expand-on-click-node />
+    </div>
+  </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',
+    children: [
+      {
+        label: '二级 2-1',
+        value: '2-1',
+      },
+    ],
+  },
+])
+</script>

package/docs/examples/tree/flat-data.vue

@@ -0,0 +1,20 @@
+<template>
+  <div style="height: 400px">
+    <j-tree :list="flatList" :is-tree-data="false" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 扁平数组数据，会自动转换为树形结构
+const flatList = ref([
+  { label: '一级 1', value: '1', pid: '' },
+  { label: '二级 1-1', value: '1-1', pid: '1' },
+  { label: '三级 1-1-1', value: '1-1-1', pid: '1-1' },
+  { label: '一级 2', value: '2', pid: '' },
+  { label: '二级 2-1', value: '2-1', pid: '2' },
+  { label: '二级 2-2', value: '2-2', pid: '2' },
+  { label: '一级 3', value: '3', pid: '' },
+])
+</script>

package/docs/examples/tree/icon.vue

@@ -0,0 +1,40 @@
+<template>
+  <div style="height: 400px">
+    <j-tree
+      :list="treeList"
+      default-icon="material-symbols-light:folder"
+      default-icon-color="#1890ff"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const treeList = ref([
+  {
+    label: '一级 1',
+    value: '1',
+    nodeIcon: 'material-symbols-light:home',
+    nodeIconColor: '#52c41a',
+    children: [
+      {
+        label: '二级 1-1',
+        value: '1-1',
+        nodeIcon: 'material-symbols-light:settings',
+        nodeIconColor: '#ff4d4f',
+      },
+    ],
+  },
+  {
+    label: '一级 2',
+    value: '2',
+    children: [
+      {
+        label: '二级 2-1',
+        value: '2-1',
+      },
+    ],
+  },
+])
+</script>

package/docs/examples/tree/load-data.vue

@@ -0,0 +1,37 @@
+<template>
+  <div style="height: 400px">
+    <j-tree :load-data="loadData" :after-load-data="afterLoadData" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const loadData = async () => {
+  // 模拟异步加载数据
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        {
+          label: '一级 1',
+          value: '1',
+          children: [
+            {
+              label: '二级 1-1',
+              value: '1-1',
+            },
+          ],
+        },
+        {
+          label: '一级 2',
+          value: '2',
+        },
+      ])
+    }, 1000)
+  })
+}
+
+const afterLoadData = (treeData: any[], list: any[]) => {
+  console.log('数据加载完成：', treeData, list)
+}
+</script>

package/docs/examples/tree/methods.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div style="margin-bottom: 20px">
+      <j-button label="设置选中节点为 2-1" @click="handleSetValue" />
+      <j-button label="获取选中节点" style="margin-left: 10px" @click="handleGetValue" />
+      <j-button label="设置选中 ['1-1', '2-1']" style="margin-left: 10px" @click="handleSetCheck" />
+      <j-button label="获取选中节点" style="margin-left: 10px" @click="handleGetCheck" />
+      <j-button label="刷新数据" style="margin-left: 10px" @click="handleRefresh" />
+    </div>
+    <div style="height: 400px">
+      <j-tree
+        ref="treeRef"
+        :list="treeList"
+        checkable
+        :default-checked-keys="['1-1']"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const treeRef = ref()
+
+const treeList = ref([
+  {
+    label: '一级 1',
+    value: '1',
+    children: [
+      {
+        label: '二级 1-1',
+        value: '1-1',
+      },
+    ],
+  },
+  {
+    label: '一级 2',
+    value: '2',
+    children: [
+      {
+        label: '二级 2-1',
+        value: '2-1',
+      },
+      {
+        label: '二级 2-2',
+        value: '2-2',
+      },
+    ],
+  },
+])
+
+const handleSetValue = () => {
+  treeRef.value?.setValue('2-1')
+}
+
+const handleGetValue = () => {
+  const value = treeRef.value?.getValue()
+  console.log('当前选中节点：', value)
+}
+
+const handleSetCheck = () => {
+  treeRef.value?.setCheck(['1-1', '2-1'])
+}
+
+const handleGetCheck = () => {
+  const checked = treeRef.value?.getCheck()
+  console.log('选中的节点：', checked)
+}
+
+const handleRefresh = () => {
+  treeRef.value?.refreshData()
+}
+</script>

package/docs/examples/tree/theme.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <h3>默认主题</h3>
+    <div style="height: 200px; margin-bottom: 20px">
+      <j-tree :list="treeList" theme="default" />
+    </div>
+    <h3>菜单主题</h3>
+    <div style="height: 200px">
+      <j-tree :list="treeList" theme="menu" />
+    </div>
+  </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',
+  },
+])
+</script>

package/docs/examples/upload/accept.vue

@@ -0,0 +1,31 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <div>
+      <p style="margin-bottom: 8px">只接受 PDF 文件：</p>
+      <j-upload
+        v-model="pdfFile"
+        placeholder="上传PDF"
+        :is-not-api="true"
+        accept=".pdf"
+        :is-tip="true"
+      />
+    </div>
+    <div>
+      <p style="margin-bottom: 8px">只接受 Excel 文件：</p>
+      <j-upload
+        v-model="excelFile"
+        placeholder="上传Excel"
+        :is-not-api="true"
+        accept=".xlsx,.xls"
+        :is-tip="true"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const pdfFile = ref('')
+const excelFile = ref('')
+</script>

package/docs/examples/upload/basic.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <j-upload v-model="fileId" placeholder="点击上传" :is-not-api="true" />
+    <p v-if="fileId" style="margin-top: 12px; color: #606266">文件ID: {{ fileId }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const fileId = ref('')
+</script>

package/docs/examples/upload/drag.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <j-upload v-model="fileId" placeholder="拖拽上传文件" :is-not-api="true" :drag="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const fileId = ref('')
+</script>

package/docs/examples/upload/image.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <j-upload
+      v-model="fileId"
+      placeholder="上传图片"
+      :is-not-api="true"
+      :is-upload-img="true"
+      :limit="3"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const fileId = ref('')
+</script>

package/docs/examples/upload/limit.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <j-upload
+      v-model="fileId"
+      placeholder="限制上传数量"
+      :is-not-api="true"
+      :multiple="true"
+      :limit="3"
+      :is-tip="true"
+      :max-size="10"
+      size-type="MB"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const fileId = ref('')
+</script>

package/docs/examples/upload/multiple.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <j-upload
+      v-model="fileId"
+      placeholder="选择多个文件"
+      :is-not-api="true"
+      :multiple="true"
+      :limit="-1"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const fileId = ref('')
+</script>

package/docs/examples/upload/readonly.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <j-upload
+      v-model="fileId"
+      placeholder="点击上传"
+      :is-not-api="true"
+      :readonly="true"
+      btn-text="查看文件"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const fileId = ref('')
+</script>