@wg-song/bare 0.1.0 → 0.1.2

package/examples/user-management/index.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { PageShell, TableRead, confirm } from '@wg-song/bare'
+import type {
+  FormField,
+  PageShellProps,
+  ActionItem,
+  TableColumn,
+} from '@wg-song/bare'
+
+const searchSchemas: FormField[] = [
+  { field: 'userName', label: '用户名', component: 'input' },
+  { field: 'phone', label: '手机号', component: 'input' },
+]
+
+const columns: TableColumn[] = [
+  { field: 'userName', title: '用户名' },
+  { field: 'realName', title: '真实姓名' },
+  { field: 'phone', title: '手机号' },
+  {
+    field: 'status',
+    title: '状态',
+    component: 'tag',
+    tagColor: ({ value }) => (value === 1 ? 'success' : 'default'),
+  },
+  { field: 'createTime', title: '创建时间' },
+]
+
+const allRows = Array.from({ length: 28 }).map((_, i) => ({
+  id: i + 1,
+  userName: `user_${i + 1}`,
+  realName: `用户 ${i + 1}`,
+  phone: `1380000${String(i + 1).padStart(4, '0')}`,
+  status: i % 4 === 0 ? 0 : 1,
+  createTime: '2024-01-01 10:00:00',
+}))
+
+const toolbarActions: ActionItem[] = [
+  { label: '新增', type: 'primary', onClick: () => alert('打开新增弹窗') },
+]
+
+const loader: PageShellProps['loader'] = async ({ params, page, pageSize }) => {
+  await new Promise((resolve) => setTimeout(resolve, 300))
+  const filtered = allRows.filter((r) => {
+    if (params.userName && !r.userName.includes(String(params.userName))) return false
+    if (params.phone && !r.phone.includes(String(params.phone))) return false
+    return true
+  })
+  const start = (page - 1) * pageSize
+  return {
+    list: filtered.slice(start, start + pageSize),
+    total: filtered.length,
+  }
+}
+
+function rowActions(row: any): ActionItem[] {
+  return [
+    { label: '编辑', onClick: () => console.log('编辑', row) },
+    {
+      label: '删除',
+      danger: true,
+      onClick: async () => {
+        const ok = await confirm('确认删除该用户？')
+        if (!ok) return
+        // 业务侧调用删除 API
+      },
+    },
+  ]
+}
+</script>
+
+<template>
+  <PageShell
+    :search-schemas="searchSchemas"
+    :loader="loader"
+    :toolbar-actions="toolbarActions"
+  >
+    <template #default="{ data, loading }">
+      <TableRead
+        :data="data"
+        :columns="columns"
+        :loading="loading"
+        :get-row-actions="rowActions"
+      />
+    </template>
+  </PageShell>
+</template>