feat: use action buttons

apps/web-antd/src/views/system/post/PostModal.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
 
 import { useVbenForm } from '#/adapter/form';
 import { createPost, getPost, updatePost } from '#/api/system/post';
@@ -29,14 +30,15 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (isOpen) {
       const { id } = modalApi.getData<Record<string, any>>();
-      isUpdate.value = !!id;
+
+      isUpdate.value = !isEmpty(id);
       if (id) {
         const values = await getPost(id);
         formApi.setValues(values);
       }
+      modalApi.setState({ title: isUpdate.value ? '编辑岗位' : '新增岗位' });
     }
   },
-  title: isUpdate.value ? '新增岗位' : '编辑岗位',
 });
 
 async function onSubmit(values: Record<string, any>) {
@@ -48,7 +50,7 @@ async function onSubmit(values: Record<string, any>) {
 }
 </script>
 <template>
-  <Modal class="w-1/2">
+  <Modal class="w-1/3">
     <Form />
   </Modal>
 </template>

apps/web-antd/src/views/system/post/index.vue

@@ -5,10 +5,11 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { Button, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { exportPost, getPostPage, type PostVO } from '#/api/system/post';
+import { ActionButtons, IconEnum } from '#/components/action-buttons';
 
 import { columns, formSchema } from './post.data';
 import PostModal from './PostModal.vue';
@@ -54,9 +55,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 function handleCreate() {
-  formModalApi.setData({
+  formModalApi.setData({});
-    valuse: {},
-  });
   formModalApi.open();
 }
 async function handleEdit(id: number) {
@@ -77,37 +76,44 @@ async function handleExport() {
   <Page auto-content-height>
     <Grid>
       <template #toolbar-actions>
-        <Button
+        <ActionButtons
-          type="primary"
+          :actions="[
-          v-access:code="['system:post:create']"
+            {
-          @click="handleCreate"
+              type: 'primary',
-        >
+              label: $t('page.action.add'),
-          {{ $t('page.action.add') }}
+              preIcon: IconEnum.ADD,
-        </Button>
+              auth: ['system:post:create'],
-        <Button
+              onClick: handleCreate.bind(null),
-          class="ml-4"
+            },
-          v-access:code="['system:post:export']"
+            {
-          @click="handleExport"
+              label: $t('page.action.export'),
-        >
+              preIcon: IconEnum.EXPORT,
-          {{ $t('page.action.export') }}
+              auth: ['system:post:export'],
-        </Button>
+              onClick: handleExport.bind(null),
+            },
+          ]"
+        />
       </template>
       <template #action="{ row }">
-        <Button
+        <ActionButtons
-          type="link"
+          :actions="[
-          v-access:code="['system:post:update']"
+            {
-          @click="handleEdit(row.id)"
+              type: 'link',
-        >
+              label: $t('page.action.edit'),
-          {{ $t('page.action.edit') }}
+              preIcon: IconEnum.EDIT,
-        </Button>
+              auth: ['system:post:update'],
-        <Button
+              onClick: handleEdit.bind(null, row.id),
-          danger
+            },
-          type="link"
+            {
-          v-access:code="['system:post:delete']"
+              type: 'link',
-          @click="handleDelete(row.id)"
+              danger: true,
-        >
+              label: $t('page.action.delete'),
-          {{ $t('page.action.delete') }}
+              preIcon: IconEnum.DELETE,
-        </Button>
+              auth: ['system:post:delete'],
+              onClick: handleDelete.bind(null, row.id),
+            },
+          ]"
+        />
       </template>
     </Grid>
     <FormModal />

packages/types/src/user.ts

@@ -15,4 +15,21 @@ interface AuthPermissionInfo {
   user: ExUserInfo;
 }
 
-export type { AuthPermissionInfo, ExUserInfo };
+/** 用户信息 */
+interface UserInfo extends BasicUserInfo {
+  /**
+   * 用户描述
+   */
+  desc: string;
+  /**
+   * 首页地址
+   */
+  homePath: string;
+
+  /**
+   * accessToken
+   */
+  token: string;
+}
+
+export type { AuthPermissionInfo, ExUserInfo, UserInfo };