🔥[doc] 完善示例demo (#78)

* 💄💄[style] - 调整代码格式

* 💄💄[style] - 完善代码风格

* 🎨🎨 [doc] 基础表格完善

* 💡💡[doc] - 添加treeTable基本Demo

* 🚧[wip]: 菜单完善

* merge

* ➕[comp]:新增Alert组件

* ➕ [demo] 新增Modal菜单Demo

* 🔥🔥[doc] add new demo

* Revert "Merge branch 'master' of github.com:Ya2gLu/vben3"

This reverts commit 1bc05be, reversing
changes made to b49f48f.

* Revert "Revert "Merge branch 'master' of github.com:Ya2gLu/vben3""

This reverts commit ce60779.

* update lock.yaml

apps/admin/init-components.ts

@@ -92,6 +92,7 @@ import naive, {
   NTab,
   NResult,
   NAffix,
+  NAlert,
   NGradientText,
 } from 'naive-ui'
 import { initVbenComponent, setNotice, setMessage } from '@vben/vbencomponents'
@@ -101,6 +102,7 @@ export async function registerComponents(app) {
     Affix: NAffix,
     Avatar: NAvatar,
     AutoComplete: NAutoComplete,
+    Alert: NAlert,
 
     Badge: NBadge,
     Button: NButton,

apps/admin/mock/demo/table.ts

@@ -1,49 +1,108 @@
 import { MockMethod } from 'vite-plugin-mock'
 import { resultError, resultSuccess } from '@vben/utils/mock-util'
 
-export function createFakeTableData() {
-  return {
-    items: [
-      {
-        userId: '1',
-        username: 'vben',
-        realname: 'Vben Admin',
-        avatar: 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640',
-        desc: 'manager',
-        password: '123456',
-        accessToken: 'fakeToken1',
-        address:'呼伦贝尔市',
-        startTime:'1997-01-26 10:45:00',
-        endTime:'2022-08-08 17:02:15',
-        roles: [
-          {
-            name: 'Super Admin',
-            value: 'super',
-          },
-        ],
-      },
+// export function createFakeTableData() {
+//   return {
+//     items: [
+//       {
+//         userId: '1',
+//         username: 'vben',
+//         realname: 'Vben Admin',
+//         avatar: 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640',
+//         desc: 'manager',
+//         password: '123456',
+//         accessToken: 'fakeToken1',
+//         address:'呼伦贝尔市',
+//         startTime:'1997-01-26 10:45:00',
+//         endTime:'2022-08-08 17:02:15',
+//         roles: [
+//           {
+//             name: 'Super Admin',
+//             value: 'super',
+//           },
+//         ],
+//       },
+//       {
+//         userId: '2',
+//         username: 'test',
+//         password: '123456',
+//         realname: 'test user',
+//         avatar: 'https://q1.qlogo.cn/g?b=qq&nk=339449197&s=640',
+//         desc: 'tester',
+//         accessToken: 'fakeToken2',
+//         address:'鹤壁市',
+//         startTime:'2010-07-29 09:23:46	',
+//         endTime:'1998-02-27 02:14:58',
+//         roles: [
+//           {
+//             name: 'Tester',
+//             value: 'test',
+//           },
+//         ],
+//       },
+//     ],
+//     total: 2,
+//   }
+// }
+
+const fakeTableData = (() => {
+  const result: any[] = []
+  for (let i = 1; i <= 50; i++) {
+    result.push({
+      userId: `${i}`,
+      username: '@cname',
+      password: '@natural',
+      realname: '@name',
+      avatar: `@dataImage('50 * 50')`,
+      desc: '@word',
+      accessToken: '@guid',
+      address: '@city',
+      startTime: `@datetime()`,
+      endTime: '@datetime',
+      'roles|1-2': [
+        {
+          name: 'Admin',
+          value: 'admin'
+        },
+        {
+          name: 'superAdmin',
+          value: 'superAdmin'
+        },
+        {
+          name: 'Tester',
+          value: 'test'
+        }
+      ]
+    })
+  }
+  return result;
+})()
+
+const fakeTreeTableData = (() => {
+  const result: any[] = []
+  for (let i = 1; i <= 5; i++) {
+    result.push({
+      id: `${i}`,
+      parentId: null,
+      userName: '@cname',
+      address: '@city',
+      startTime: '@datetime()',
+      endTime: '@datetime()',
+      description: '@word'
+    },
       {
-        userId: '2',
-        username: 'test',
-        password: '123456',
-        realname: 'test user',
-        avatar: 'https://q1.qlogo.cn/g?b=qq&nk=339449197&s=640',
-        desc: 'tester',
-        accessToken: 'fakeToken2',
-        address:'鹤壁市',
-        startTime:'2010-07-29 09:23:46	',
-        endTime:'1998-02-27 02:14:58',
-        roles: [
-          {
-            name: 'Tester',
-            value: 'test',
-          },
-        ],
-      },
-    ],
-    total: 2,
+        id: '@id',
+        'parentId|1-5': 1,
+        userName: '@cname',
+        address: '@city',
+        startTime: '@datetime()',
+        endTime: '@datetime()',
+        description: '@word'
+      })
   }
-}
+
+  return result;
+})()
 
 export default [
   // mock user login
@@ -52,7 +111,15 @@ export default [
     timeout: 200,
     method: 'post',
     response: ({ body }) => {
-      return resultSuccess(createFakeTableData())
+      return resultSuccess(fakeTableData)
     },
   },
+  {
+    url: '/basic-api/demo/treeTable',
+    timeout: 200,
+    method: 'post',
+    response: () => {
+      return resultSuccess(fakeTreeTableData)
+    }
+  }
 ] as MockMethod[]

apps/admin/src/pages/demo/Modal.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+import { Modal } from '@vben/demo'
+</script>
+<template>
+  <Modal />
+</template>

apps/admin/src/pages/demo/table/TreeTable.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+import { TreeTable } from "@vben/demo"
+</script>
+<template>
+  <TreeTable />
+</template>

apps/admin/src/router/routes/modules/test/test.ts

@@ -7,7 +7,7 @@ const test: RouteRecordItem = {
   redirect: '/test/test',
   meta: {
     orderNo: 1,
-    icon: 'ph:code-bold',
+    icon: 'solar:test-tube-outline',
     title: '测试',
     root: true,
   },

packages/demo/index.ts

@@ -3,3 +3,5 @@ export { default as Form } from './src/Form/index.vue'
 export { default as Table } from './src/Table/index.vue'
 export { default as BasicTable } from './src/Table/basic.vue'
 export { default as FixedColumn } from './src/Table/fixedColumn.vue'
+export { default as TreeTable } from './src/Table/TreeTable.vue'
+export { default as Modal } from './src/Modal/index.vue'

packages/demo/src/Card/index.vue

@@ -1,6 +1,66 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+
+import { ref, reactive } from 'vue'
+
+const aTitle = ref<string>('基础卡片')
+const aContent = ref('别有幽愁暗恨生，此时无声胜有声.')
+let tabsType = ref<string>('line')
+const radioArr = reactive([{ value: 'line', label: 'line' }, { value: 'bar', label: 'bar' }, { value: 'card', label: 'card' }, { value: 'segment', label: 'segment' }])
+
+function radioChange(e: Event) {
+  tabsType.value = (e.target as HTMLInputElement).value
+  return console.log('val ->', (e.target as HTMLInputElement).value);
+}
+
+function handleClose() {
+  return 
+}
+</script>
+
 <template>
-  <div class="p-2">
-    <VbenCard class="w-1/3" title="title">content</VbenCard>
+  <div class="p-2 h-full grid grid-cols-12  gap-4">
+
+    <div class="col-start-1 col-span-6 ">
+      <VbenCard :title="aTitle"> {{ aContent }} </VbenCard>
+    </div>
+
+    <div class="col-start-7 col-span-6 ">
+      <VbenCard contentStyle="padding: 0">
+        <VbenTabs :type="tabsType" size="large" :tabsPadding="20" paneStyle="padding: 20px;">
+          <VbenTabPane name="tabs1">
+            这是一个Tabs卡片(👁️🐽👁️)
+            <p> 你可以选择Tabs的类型: </p>
+            <!-- TODO: VbenRadioGroup似乎有bug,点击后的样式无法正常显示 -->
+            <!-- TODO: VbenRadioGroup tabsType设置默认值后不起作用 -->
+            <VbenRadioGroup name="radio-group" :value="tabsType" :options="radioArr"
+              @change="radioChange" />
+          </VbenTabPane>
+          <VbenTabPane name="tabs2">我本将心向明月,奈何明月照沟渠.</VbenTabPane>
+        </VbenTabs>
+      </VbenCard>
+    </div>
+
+    <div class="col-start-1 col-span-3">
+      <VbenCard title="带封面的卡片" hoverable>
+        <template #cover>
+          <img src="@/assets/images/cover.png" alt="cover.png">
+        </template>
+        样式丰富了许多,不是吗🥳
+      </VbenCard>
+    </div>
+
+    <div class="col-start-7 col-span-6">
+      <VbenCard title="提示" closable @close="handleClose">
+        有时候我们需要在插槽里定制一些丰富的交互🤔
+        <template #action>
+          <VbenSpace>
+            <VbenButton strong secondary type="tertiary">不用了</VbenButton>
+            <VbenButton strong secondary type="primary">确定</VbenButton>
+          </VbenSpace>
+        </template>
+      </VbenCard>
+    </div>
+
   </div>
 </template>
+

packages/demo/src/Modal/index.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+let alertInfo = ref('这个模态框本质是一个弹出的遮罩层,在遮罩层里你可以定义任意类型的 Card, Dialog, 或者不定义😶‍🌫️, Vben并没有封装默认的类型,所以你可以根据自己的实际业务定制😋')
+let defaultModalShow = ref(false)
+let isModalShow = ref(false)
+const cTitle = ref('这个模态框里装了一个卡片📇')
+const cContent = ref('🚧山重水复疑无路🚧')
+const aTitle = ref('Card类型的Modal')
+const bTitle = ref("默认的Modal")
+const dTitle = ref('Dialog类型的Modal')
+
+</script>
+
+<template>
+  <div class="m-2 grid grid-cols-12 gap-4">
+    <div class="col-start-1 col-span-8">
+      <VbenAlert type="info" :bordered="false">{{ alertInfo }}</VbenAlert>
+    </div>
+    <div class="col-start-1 col-span-3">
+      <VbenCard :title="bTitle">
+        <VbenButton @click="defaultModalShow = true">点我</VbenButton>
+      </VbenCard>
+    </div>
+    <div class="col-start-4 col-span-3">
+      <VbenCard :title="aTitle">
+        <VbenButton @click="isModalShow = true">点我</VbenButton>
+      </VbenCard>
+    </div>
+
+    <div class="col-start-7 col-span-3">
+      <VbenCard :title="dTitle">
+        <VbenButton>点我</VbenButton>
+      </VbenCard>
+    </div>
+
+    <VbenModal :show="defaultModalShow" @maskClick="() => defaultModalShow = !defaultModalShow">
+      <p>这是默认的样式,没有任何样式,会弹出一个遮罩层,你可以自己定义🥸</p>
+    </VbenModal>
+
+    <VbenModal :show="isModalShow" @maskClick="() => isModalShow = !isModalShow">
+      <VbenCard class="w-1/2" :title="cTitle" role="dialog">{{ cContent }}</VbenCard>
+    </VbenModal>
+
+  </div>
+</template>
+
+<style lang="less" scoped></style>

packages/demo/src/Table/TreeTable.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { Data, treeColumns } from './schemas'
+import { getTreeTableData } from '../apis/table'
+import { ref, reactive } from 'vue'
+
+const treeData = reactive<Data>({
+  table: {
+    items: [],
+    total: 0,
+  },
+})
+const treeTable = ref(null)
+
+getTreeTableData().then((res: any) => {
+    console.log('treeData:', res)
+    treeData.table.items = res
+  }).catch((err) => {
+    console.log('err:', err)
+  })
+
+function toggleExpandChangeEvent(e: any) {
+  console.log(
+    '节点展开事件',
+    e.expanded,
+    '获取父节点：',
+    e.$table.getParentRow(e.row),
+  )
+  return
+}
+
+function handleSelected() {
+  return null
+}
+
+function handleExpanded() {
+  return null
+}
+
+function handleExpandAll() {
+  return null
+}
+
+function handleCloseAll() {
+  return null
+}
+</script>
+<template>
+  <div class="p-2 h-full">
+    <VbenTable ref="treeTableRef" :options="{ title: '基础树形表格', border: 'inner', pagination: true, }"
+      :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId', iconOpen: 'vxe-icon-square-minus', iconClose: 'vxe-icon-square-plus', }"
+      :column-config="{ resizable: true }" :columns="treeColumns" :data="treeData.table.items"
+      :checkbox-config="{ labelField: 'id', highlight: true }" @toggle-tree-expand="toggleExpandChangeEvent">
+      >
+      <template #toolbar>
+        <div class="pb-2">
+          <VbenButton class="ml-2" type="info"  @click="handleSelected">获取选中</VbenButton>
+          <VbenButton class="ml-2" type="info"  @click="handleExpanded">获取已展开</VbenButton>
+          <VbenButton class="ml-2" type="info"  @click="handleExpandAll">展开所有</VbenButton>
+          <VbenButton class="ml-2" type="info"  @click="handleCloseAll">关闭所有</VbenButton>
+        </div>
+      </template>
+    </VbenTable>
+  </div>
+</template>
+
+<style lang="less" scoped></style>