Merge branch 'main' of https://gitee.com/dapppp/ruoyi-plus-vben5

apps/web-antd/src/api/system/dict/dict-type.ts

@@ -1,6 +1,6 @@
 import type { DictType } from './dict-type-model';
 
-import type { ID, IDS, PageQuery } from '#/api/common';
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
 
 import { commonExport } from '#/api/helper';
 import { requestClient } from '#/api/request';
@@ -18,8 +18,8 @@ enum Api {
  * @param params 请求参数
  * @returns list
  */
-export function dictList(params?: PageQuery) {
+export function dictTypeList(params?: PageQuery) {
-  return requestClient.get<DictType[]>(Api.dictTypeList, { params });
+  return requestClient.get<PageResult<DictType>>(Api.dictTypeList, { params });
 }
 
 /**
@@ -27,7 +27,7 @@ export function dictList(params?: PageQuery) {
  * @param data 表单参数
  * @returns blob
  */
-export function dictExport(data: any) {
+export function dictTypeExport(data: any) {
   return commonExport(Api.dictTypeExport, data);
 }
 

apps/web-antd/src/api/system/tenant-package/index.ts

@@ -1,6 +1,6 @@
 import type { TenantPackage } from './model';
 
-import type { ID, IDS, PageQuery } from '#/api/common';
+import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
 
 import { commonExport } from '#/api/helper';
 import { requestClient } from '#/api/request';
@@ -14,7 +14,9 @@ enum Api {
 }
 
 export function packageList(params?: PageQuery) {
-  return requestClient.get<TenantPackage[]>(Api.packageList, { params });
+  return requestClient.get<PageResult<TenantPackage>>(Api.packageList, {
+    params,
+  });
 }
 
 // 下拉框

apps/web-antd/src/views/_core/profile/components/online-device.vue

@@ -1,8 +1,53 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
+import { forceLogout2, onlineDeviceList } from '#/api/monitor/online';
+import { columns } from '#/views/monitor/online/data';
+
+const gridOptions: VxeGridProps = {
+  columns,
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async () => {
+        return await onlineDeviceList();
+      },
+    },
+  },
+  rowConfig: {
+    isHover: true,
+    keyField: 'tokenId',
+  },
+  round: true,
+  align: 'center',
+  showOverflow: true,
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({ gridOptions });
+
+async function handleForceOffline(row: Recordable<any>) {
+  await forceLogout2(row.tokenId);
+  await tableApi.query();
+}
+</script>
 
 <template>
   <div>
-    在线设备
+    <BasicTable>
-    <div>先不做</div>
+      <template #toolbar-actions>
+        <span class="pl-[7px] text-[16px]">我的在线设备</span>
+      </template>
+      <template #action="{ row }">
+        <Popconfirm
+          :title="`确认强制下线[${row.userName}]?`"
+          placement="left"
+          @confirm="handleForceOffline(row)"
+        >
+          <a-button danger size="small" type="link">强制下线</a-button>
+        </Popconfirm>
+      </template>
+    </BasicTable>
   </div>
 </template>

apps/web-antd/src/views/_core/profile/index.vue

@@ -40,7 +40,12 @@ async function handleUploadFinish() {
       <!-- 左侧 -->
       <ProfilePanel :profile="profile" @upload-finish="handleUploadFinish" />
       <!-- 右侧 -->
-      <SettingPanel v-if="profile" :profile="profile" @reload="loadProfile" />
+      <SettingPanel
+        v-if="profile"
+        :profile="profile"
+        class="flex-1 overflow-hidden"
+        @reload="loadProfile"
+      />
     </div>
   </Page>
 </template>

apps/web-antd/src/views/monitor/logininfor/index.vue

@@ -110,6 +110,7 @@ function handleMultiDelete() {
     onOk: async () => {
       await loginInfoRemove(ids);
       await tableApi.query();
+      checked.value = false;
     },
   });
 }

apps/web-antd/src/views/monitor/online/index.vue

@@ -11,6 +11,9 @@ import { forceLogout, onlineList } from '#/api/monitor/online';
 import { columns, querySchema } from './data';
 
 const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+  },
   schema: querySchema(),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
 };
@@ -44,7 +47,7 @@ const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
 
 async function handleForceOffline(row: Recordable<any>) {
   await forceLogout(row.tokenId);
-  await tableApi.reload();
+  await tableApi.query();
 }
 </script>
 
@@ -52,7 +55,7 @@ async function handleForceOffline(row: Recordable<any>) {
   <Page :auto-content-height="true">
     <BasicTable>
       <template #toolbar-actions>
-        <span class="pl-[7px] text-[16px]">操作日志列表</span>
+        <span class="pl-[7px] text-[16px]">在线用户列表</span>
       </template>
       <template #action="{ row }">
         <Popconfirm

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
+import { ref } from 'vue';
+
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 
@@ -20,6 +22,9 @@ import clientDrawer from './client-drawer.vue';
 import { columns, querySchema } from './data';
 
 const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+  },
   schema: querySchema(),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
 };
@@ -52,13 +57,27 @@ const gridOptions: VxeGridProps = {
   rowConfig: {
     isHover: true,
     keyField: 'id',
+    height: 90,
   },
   round: true,
   align: 'center',
   showOverflow: true,
 };
 
-const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
+const checked = ref(false);
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    checkboxChange: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+    checkboxAll: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+  },
+});
+
 const [ClientDrawer, drawerApi] = useVbenDrawer({
   connectedComponent: clientDrawer,
 });
@@ -75,7 +94,7 @@ async function handleEdit(record: Recordable<any>) {
 
 async function handleDelete(row: Recordable<any>) {
   await clientRemove(row.id);
-  await tableApi.reload();
+  await tableApi.query();
 }
 
 function handleMultiDelete() {
@@ -87,7 +106,7 @@ function handleMultiDelete() {
     content: `确认删除选中的${ids.length}条记录吗？`,
     onOk: async () => {
       await clientRemove(ids);
-      await tableApi.reload();
+      await tableApi.query();
     },
   });
 }
@@ -110,6 +129,7 @@ const { hasAccessByCodes } = useAccess();
             {{ $t('pages.common.export') }}
           </a-button>
           <a-button
+            :disabled="!checked"
             danger
             type="primary"
             v-access:code="['system:client:remove']"
@@ -133,11 +153,10 @@ const { hasAccessByCodes } = useAccess();
           v-model="row.status"
           :api="() => clientChangeStatus(row)"
           :disabled="row.id === 1 || !hasAccessByCodes(['system:client:edit'])"
-          :reload="() => tableApi.reload()"
+          :reload="() => tableApi.query()"
         />
       </template>
       <template #action="{ row }">
-        <Space>
         <a-button
           size="small"
           type="link"
@@ -147,6 +166,7 @@ const { hasAccessByCodes } = useAccess();
           {{ $t('pages.common.edit') }}
         </a-button>
         <Popconfirm
+          :disabled="row.id === 1"
           placement="left"
           title="确认删除？"
           @confirm="handleDelete(row)"
@@ -162,9 +182,8 @@ const { hasAccessByCodes } = useAccess();
             {{ $t('pages.common.delete') }}
           </a-button>
         </Popconfirm>
-        </Space>
       </template>
     </BasicTable>
-    <ClientDrawer @reload="tableApi.reload()" />
+    <ClientDrawer @reload="tableApi.query()" />
   </Page>
 </template>

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
+import { ref } from 'vue';
+
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
@@ -19,6 +21,9 @@ import configModal from './config-modal.vue';
 import { columns, querySchema } from './data';
 
 const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+  },
   schema: querySchema(),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
 };
@@ -71,7 +76,19 @@ const gridOptions: VxeGridProps = {
   showOverflow: true,
 };
 
-const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
+const checked = ref(false);
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    checkboxChange: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+    checkboxAll: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+  },
+});
 const [ConfigModal, modalApi] = useVbenModal({
   connectedComponent: configModal,
 });
@@ -127,9 +144,10 @@ async function handleRefreshCache() {
             {{ $t('pages.common.export') }}
           </a-button>
           <a-button
+            :disabled="!checked"
             danger
             type="primary"
-            v-access:code="['system:config:delete']"
+            v-access:code="['system:config:remove']"
             @click="handleMultiDelete"
           >
             {{ $t('pages.common.delete') }}
@@ -144,7 +162,6 @@ async function handleRefreshCache() {
         </Space>
       </template>
       <template #action="{ row }">
-        <Space>
         <a-button
           size="small"
           type="link"
@@ -162,13 +179,12 @@ async function handleRefreshCache() {
             danger
             size="small"
             type="link"
-              v-access:code="['system:config:delete']"
+            v-access:code="['system:config:remove']"
             @click.stop=""
           >
             {{ $t('pages.common.delete') }}
           </a-button>
         </Popconfirm>
-        </Space>
       </template>
     </BasicTable>
     <ConfigModal @reload="tableApi.reload()" />

apps/web-antd/src/views/system/dict/data/data.ts

@@ -1,11 +1,14 @@
-import type { FormSchemaGetter } from '#/adapter';
+import type { FormSchemaGetter, VxeGridProps } from '#/adapter';
 
 import { getPopupContainer } from '@vben/utils';
 
+import { renderDictTag } from '#/utils/render';
+
 export const querySchema: FormSchemaGetter = () => [
   {
     component: 'Select',
     componentProps: {
+      placeholder: 'TODO: 字典类型',
       getPopupContainer,
     },
     fieldName: 'dictType',
@@ -18,6 +21,43 @@ export const querySchema: FormSchemaGetter = () => [
   },
 ];
 
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '字典标签',
+    field: 'cssClass',
+    slots: {
+      default: ({ row }) => {
+        const { dictValue } = row;
+        return renderDictTag(dictValue, [row as any]);
+      },
+    },
+  },
+  {
+    title: '字典键值',
+    field: 'dictValue',
+  },
+  {
+    title: '字典排序',
+    field: 'dictSort',
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    title: '创建时间',
+    field: 'createTime',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
 export const drawerSchema: FormSchemaGetter = () => [
   {
     component: 'Input',

apps/web-antd/src/views/system/dict/data/index.vue

@@ -1,63 +1,203 @@
 <script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
 import { ref } from 'vue';
 
-import { useVbenDrawer } from '@vben/common-ui';
+import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
-import { $t } from '@vben/locales';
 
-import { Card } from 'ant-design-vue';
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import dayjs from 'dayjs';
 
-import { useVbenForm } from '#/adapter';
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
+import {
+  dictDataExport,
+  dictDataList,
+  dictDataRemove,
+} from '#/api/system/dict/dict-data';
+import { downloadExcel } from '#/utils/file/download';
 
 import { emitter } from '../mitt';
-import { querySchema } from './data';
+import { columns, querySchema } from './data';
 import dictDataDrawer from './dict-data-drawer.vue';
 
+const dictType = ref('');
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        // 区间选择器处理
+        if (formValues?.createTime) {
+          formValues.params = {
+            beginTime: dayjs(formValues.createTime[0]).format(
+              'YYYY-MM-DD 00:00:00',
+            ),
+            endTime: dayjs(formValues.createTime[1]).format(
+              'YYYY-MM-DD 23:59:59',
+            ),
+          };
+          Reflect.deleteProperty(formValues, 'createTime');
+        } else {
+          Reflect.deleteProperty(formValues, 'params');
+        }
+
+        const params: any = {
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        };
+        if (dictType.value) {
+          params.dictType = dictType.value;
+        }
+
+        return await dictDataList(params);
+      },
+    },
+  },
+  rowConfig: {
+    isHover: true,
+    keyField: 'dictCode',
+  },
+  round: true,
+  align: 'center',
+  showOverflow: true,
+};
+
+const checked = ref(false);
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    checkboxChange: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+    checkboxAll: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+  },
+});
+
 const [DictDataDrawer, drawerApi] = useVbenDrawer({
   connectedComponent: dictDataDrawer,
 });
 
 function handleAdd() {
-  drawerApi.setData({ dictType: 'aa_bb_cc' });
+  drawerApi.setData({ dictType: dictType.value });
   drawerApi.open();
 }
 
-const [QueryForm] = useVbenForm({
+async function handleEdit(record: Recordable<any>) {
-  // 默认展开
+  drawerApi.setData({
-  collapsed: false,
+    dictType: dictType.value,
-  // 所有表单项共用，可单独在表单内覆盖
+    dictCode: record.dictCode,
-  commonConfig: {
-    // 所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: querySchema(),
-  // 是否可展开
-  showCollapseButton: true,
-  submitButtonOptions: {
-    text: '查询',
-  },
-  wrapperClass: 'grid-cols-1 md:grid-cols-2',
   });
+  drawerApi.open();
+}
 
-const testValue = ref('');
+async function handleDelete(row: Recordable<any>) {
+  await dictDataRemove(row.dictCode);
+  await tableApi.query();
+}
 
-emitter.on('rowClick', (dictType) => {
+function handleMultiDelete() {
-  testValue.value = dictType;
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: any) => row.dictCode);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await dictDataRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+emitter.on('rowClick', async (value) => {
+  dictType.value = value;
+  await tableApi.query();
 });
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
+  <Page :auto-content-height="true">
-    <Card>
+    <BasicTable>
-      <QueryForm />
+      <template #toolbar-actions>
-    </Card>
+        <span class="pl-[7px] text-[16px]">字典数据列表</span>
-    <Card>
+      </template>
-      <a-button type="primary" @click="handleAdd">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['system:dict:export']"
+            @click="downloadExcel(dictDataExport, '字典数据', {})"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!checked"
+            danger
+            type="primary"
+            v-access:code="['system:dict:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            :disabled="dictType === ''"
+            type="primary"
+            v-access:code="['system:dict:add']"
+            @click="handleAdd"
+          >
             {{ $t('pages.common.add') }}
           </a-button>
-    </Card>
+        </Space>
-    {{ testValue }}
+      </template>
-    <DictDataDrawer />
+      <template #action="{ row }">
-  </div>
+        <a-button
+          size="small"
+          type="link"
+          v-access:code="['system:dict:edit']"
+          @click="handleEdit(row)"
+        >
+          {{ $t('pages.common.edit') }}
+        </a-button>
+        <Popconfirm
+          placement="left"
+          title="确认删除？"
+          @confirm="handleDelete(row)"
+        >
+          <a-button
+            danger
+            size="small"
+            type="link"
+            v-access:code="['system:dict:remove']"
+            @click.stop=""
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+        </Popconfirm>
+      </template>
+    </BasicTable>
+    <DictDataDrawer @reload="tableApi.query()" />
+  </Page>
 </template>

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

@@ -6,8 +6,17 @@ import DictTypePanel from './type/index.vue';
 </script>
 
 <template>
-  <Page content-class="flex flex-col gap-[16px] lg:flex-row">
+  <Page :auto-content-height="true" content-class="flex flex-col lg:flex-row">
-    <DictTypePanel class="flex-1" />
+    <DictTypePanel class="flex-1 overflow-hidden" />
-    <DictDataPanel class="flex-1" />
+    <DictDataPanel class="flex-1 overflow-hidden" />
   </Page>
 </template>
+
+<style scoped>
+/**
+TODO: ugly code
+*/
+:deep(.p-4) {
+  padding: 6px;
+}
+</style>

apps/web-antd/src/views/system/dict/type/data.ts

@@ -1,4 +1,4 @@
-import { type FormSchemaGetter, z } from '#/adapter';
+import { type FormSchemaGetter, type VxeGridProps, z } from '#/adapter';
 
 export const querySchema: FormSchemaGetter = () => [
   {
@@ -13,6 +13,33 @@ export const querySchema: FormSchemaGetter = () => [
   },
 ];
 
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '字典名称',
+    field: 'dictName',
+  },
+  {
+    title: '字典类型',
+    field: 'dictType',
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    title: '创建时间',
+    field: 'createTime',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
 export const modalSchema: FormSchemaGetter = () => [
   {
     component: 'Input',

apps/web-antd/src/views/system/dict/type/index.vue

@@ -1,65 +1,197 @@
 <script setup lang="ts">
-import { useVbenModal } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
-import { $t } from '@vben/locales';
 
-import { Card } from 'ant-design-vue';
+import { ref } from 'vue';
-import { uniqueId } from 'lodash-es';
 
-import { useVbenForm } from '#/adapter';
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
+import {
+  dictTypeExport,
+  dictTypeList,
+  dictTypeRemove,
+} from '#/api/system/dict/dict-type';
+import { downloadExcel } from '#/utils/file/download';
 
 import { emitter } from '../mitt';
-import { querySchema } from './data';
+import { columns, querySchema } from './data';
-import dictTypeModel from './dict-type-model.vue';
+import dictTypeModal from './dict-type-modal.vue';
 
-defineOptions({ name: 'DictTypePanel' });
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 70,
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+};
 
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        // 区间选择器处理
+        if (formValues?.createTime) {
+          formValues.params = {
+            beginTime: dayjs(formValues.createTime[0]).format(
+              'YYYY-MM-DD 00:00:00',
+            ),
+            endTime: dayjs(formValues.createTime[1]).format(
+              'YYYY-MM-DD 23:59:59',
+            ),
+          };
+          Reflect.deleteProperty(formValues, 'createTime');
+        } else {
+          Reflect.deleteProperty(formValues, 'params');
+        }
+
+        return await dictTypeList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    isHover: true,
+    keyField: 'dictId',
+  },
+  round: true,
+  align: 'center',
+  showOverflow: true,
+};
+
+const checked = ref(false);
+const lastDictType = ref('');
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    cellClick: (e: any) => {
+      const { row } = e;
+      if (lastDictType.value === row.dictType) {
+        return;
+      }
+      emitter.emit('rowClick', row.dictType);
+      lastDictType.value = row.dictType;
+    },
+    checkboxChange: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+    checkboxAll: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+  },
+});
 const [DictTypeModal, modalApi] = useVbenModal({
-  connectedComponent: dictTypeModel,
+  connectedComponent: dictTypeModal,
 });
 
 function handleAdd() {
-  modalApi.setData({ update: false });
+  modalApi.setData({});
   modalApi.open();
 }
 
-const [QueryForm] = useVbenForm({
+async function handleEdit(record: Recordable<any>) {
-  // 默认展开
+  modalApi.setData({ id: record.dictId });
-  collapsed: false,
+  modalApi.open();
-  // 所有表单项共用，可单独在表单内覆盖
+}
-  commonConfig: {
-    // 所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: querySchema(),
-  // 是否可展开
-  showCollapseButton: true,
-  submitButtonOptions: {
-    text: '查询',
-  },
-  wrapperClass: 'grid-cols-1 md:grid-cols-2',
-});
 
-function handleRowClickTest() {
+async function handleDelete(row: Recordable<any>) {
-  emitter.emit('rowClick', uniqueId('mitt-'));
+  await dictTypeRemove(row.dictId);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: any) => row.dictId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await dictTypeRemove(ids);
+      await tableApi.query();
+    },
+  });
 }
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
+  <Page :auto-content-height="true">
-    <Card>
+    <BasicTable>
-      <QueryForm />
+      <template #toolbar-actions>
-    </Card>
+        <span class="pl-[7px] text-[16px]">字典类型列表</span>
-    <Card>
+      </template>
-      <a-button type="primary" @click="handleAdd">
+      <template #toolbar-tools>
+        <Space>
+          <a-button danger type="primary">缓存(TODO)</a-button>
+          <a-button
+            v-access:code="['system:dict:export']"
+            @click="downloadExcel(dictTypeExport, '字典类型数据', {})"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!checked"
+            danger
+            type="primary"
+            v-access:code="['system:dict:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['system:dict:add']"
+            @click="handleAdd"
+          >
             {{ $t('pages.common.add') }}
           </a-button>
-    </Card>
+        </Space>
-    <Card>
+      </template>
-      <a-button @click="handleRowClickTest">测试mitt</a-button>
+      <template #action="{ row }">
-      左侧向右侧传值
+        <a-button
-    </Card>
+          size="small"
-    <DictTypeModal />
+          type="link"
-  </div>
+          v-access:code="['system:dict:edit']"
+          @click="handleEdit(row)"
+        >
+          {{ $t('pages.common.edit') }}
+        </a-button>
+        <Popconfirm
+          placement="left"
+          title="确认删除？"
+          @confirm="handleDelete(row)"
+        >
+          <a-button
+            danger
+            size="small"
+            type="link"
+            v-access:code="['system:dict:remove']"
+            @click.stop=""
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+        </Popconfirm>
+      </template>
+    </BasicTable>
+    <DictTypeModal @reload="tableApi.query()" />
+  </Page>
 </template>

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
+import { ref } from 'vue';
+
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
@@ -13,6 +15,9 @@ import { columns, querySchema } from './data';
 import noticeModal from './notice-modal.vue';
 
 const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+  },
   schema: querySchema(),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
 };
@@ -65,7 +70,20 @@ const gridOptions: VxeGridProps = {
   showOverflow: true,
 };
 
-const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
+const checked = ref(false);
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    checkboxChange: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+    checkboxAll: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+  },
+});
+
 const [NoticeModal, modalApi] = useVbenModal({
   connectedComponent: noticeModal,
 });
@@ -109,9 +127,10 @@ function handleMultiDelete() {
       <template #toolbar-tools>
         <Space>
           <a-button
+            :disabled="!checked"
             danger
             type="primary"
-            v-access:code="['system:notice:delete']"
+            v-access:code="['system:notice:remove']"
             @click="handleMultiDelete"
           >
             {{ $t('pages.common.delete') }}
@@ -126,7 +145,6 @@ function handleMultiDelete() {
         </Space>
       </template>
       <template #action="{ row }">
-        <Space>
         <a-button
           size="small"
           type="link"
@@ -144,13 +162,12 @@ function handleMultiDelete() {
             danger
             size="small"
             type="link"
-              v-access:code="['system:notice:delete']"
+            v-access:code="['system:notice:remove']"
             @click.stop=""
           >
             {{ $t('pages.common.delete') }}
           </a-button>
         </Popconfirm>
-        </Space>
       </template>
     </BasicTable>
     <NoticeModal @reload="tableApi.reload()" />

apps/web-antd/src/views/system/oss-config/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
+import { ref } from 'vue';
+
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 
@@ -71,7 +73,20 @@ const gridOptions: VxeGridProps = {
   showOverflow: true,
 };
 
-const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
+const checked = ref(false);
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    checkboxChange: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+    checkboxAll: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+  },
+});
+
 const [OssConfigDrawer, drawerApi] = useVbenDrawer({
   connectedComponent: ossConfigDrawer,
 });
@@ -88,7 +103,7 @@ async function handleEdit(record: Recordable<any>) {
 
 async function handleDelete(row: Recordable<any>) {
   await ossConfigRemove(row.ossConfigId);
-  await tableApi.reload();
+  await tableApi.query();
 }
 
 function handleMultiDelete() {
@@ -100,7 +115,7 @@ function handleMultiDelete() {
     content: `确认删除选中的${ids.length}条记录吗？`,
     onOk: async () => {
       await ossConfigRemove(ids);
-      await tableApi.reload();
+      await tableApi.query();
     },
   });
 }
@@ -117,6 +132,7 @@ const { hasAccessByCodes } = useAccess();
       <template #toolbar-tools>
         <Space>
           <a-button
+            :disabled="!checked"
             danger
             type="primary"
             v-access:code="['system:ossConfig:remove']"
@@ -138,11 +154,10 @@ const { hasAccessByCodes } = useAccess();
           v-model="row.status"
           :api="() => ossConfigChangeStatus(row)"
           :disabled="!hasAccessByCodes(['system:ossConfig:edit'])"
-          :reload="() => tableApi.reload()"
+          :reload="() => tableApi.query()"
         />
       </template>
       <template #action="{ row }">
-        <Space>
         <a-button
           size="small"
           type="link"
@@ -166,9 +181,8 @@ const { hasAccessByCodes } = useAccess();
             {{ $t('pages.common.delete') }}
           </a-button>
         </Popconfirm>
-        </Space>
       </template>
     </BasicTable>
-    <OssConfigDrawer @reload="tableApi.reload()" />
+    <OssConfigDrawer @reload="tableApi.query()" />
   </Page>
 </template>

apps/web-antd/src/views/system/post/data.ts

@@ -74,8 +74,8 @@ export const drawerSchema: FormSchemaGetter = () => [
       show: () => false,
       triggerFields: [''],
     },
-    fieldName: 'id',
+    fieldName: 'postId',
-    label: 'id',
+    label: 'postId',
   },
   {
     component: 'TreeSelect',

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

@@ -16,21 +16,28 @@ import DeptTree from '#/views/system/user/dept-tree.vue';
 import { columns, querySchema } from './data';
 import postDrawer from './post-drawer.vue';
 
-const formOptions: VbenFormProps = {
-  schema: querySchema(),
-  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
-};
-
 // 左边部门用
 const selectDeptId = ref<string[]>([]);
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  handleReset: async () => {
+    selectDeptId.value = [];
+    // eslint-disable-next-line no-use-before-define
+    await tableApi.query();
+  },
+};
+
 const gridOptions: VxeGridProps = {
   checkboxConfig: {
     // 高亮
     highlight: true,
     // 翻页时保留选中状态
     reserve: true,
-    // 点击行选中
+    trigger: 'cell',
-    // trigger: 'row',
   },
   columns,
   height: 'auto',
@@ -78,7 +85,20 @@ const gridOptions: VxeGridProps = {
   showOverflow: true,
 };
 
-const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
+const checked = ref(false);
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    checkboxChange: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+    checkboxAll: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+  },
+});
+
 const [PostDrawer, drawerApi] = useVbenDrawer({
   connectedComponent: postDrawer,
 });
@@ -95,7 +115,7 @@ async function handleEdit(record: Recordable<any>) {
 
 async function handleDelete(row: Recordable<any>) {
   await postRemove(row.postId);
-  await tableApi.reload();
+  await tableApi.query();
 }
 
 function handleMultiDelete() {
@@ -119,9 +139,9 @@ function handleMultiDelete() {
       v-model:select-dept-id="selectDeptId"
       :height="300"
       class="w-[260px]"
-      @select="() => tableApi.reload()"
+      @select="() => tableApi.query()"
     />
-    <BasicTable class="flex-1">
+    <BasicTable class="flex-1 overflow-hidden">
       <template #toolbar-actions>
         <span class="pl-[7px] text-[16px]">岗位列表</span>
       </template>
@@ -134,9 +154,10 @@ function handleMultiDelete() {
             {{ $t('pages.common.export') }}
           </a-button>
           <a-button
+            :disabled="!checked"
             danger
             type="primary"
-            v-access:code="['system:post:delete']"
+            v-access:code="['system:post:remove']"
             @click="handleMultiDelete"
           >
             {{ $t('pages.common.delete') }}
@@ -169,7 +190,7 @@ function handleMultiDelete() {
               danger
               size="small"
               type="link"
-              v-access:code="['system:post:delete']"
+              v-access:code="['system:post:remove']"
               @click.stop=""
             >
               {{ $t('pages.common.delete') }}
@@ -178,6 +199,6 @@ function handleMultiDelete() {
         </Space>
       </template>
     </BasicTable>
-    <PostDrawer @reload="tableApi.reload()" />
+    <PostDrawer @reload="tableApi.query()" />
   </Page>
 </template>

apps/web-antd/src/views/system/tenant/data.tsx

@@ -2,7 +2,7 @@ import { getPopupContainer } from '@vben/utils';
 
 import dayjs from 'dayjs';
 
-import { type FormSchemaGetter, z } from '#/adapter';
+import { type FormSchemaGetter, type VxeGridProps, z } from '#/adapter';
 
 export const querySchema: FormSchemaGetter = () => [
   {
@@ -27,6 +27,48 @@ export const querySchema: FormSchemaGetter = () => [
   },
 ];
 
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '租户编号',
+    field: 'tenantId',
+  },
+  {
+    title: '租户名称',
+    field: 'companyName',
+  },
+  {
+    title: '联系人',
+    field: 'contactUserName',
+  },
+  {
+    title: '联系电话',
+    field: 'contactPhone',
+  },
+  {
+    title: '到期时间',
+    field: 'expireTime',
+    formatter: ({ cellValue }) => {
+      if (!cellValue) {
+        return '无期限';
+      }
+      return cellValue;
+    },
+  },
+  {
+    title: '租户状态',
+    field: 'status',
+    slots: { default: 'status' },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
 const defaultExpireTime = dayjs()
   .add(365, 'days')
   .startOf('day')

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

@@ -1,48 +1,157 @@
 <script setup lang="ts">
-import { Page, useVbenDrawer } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
-import { $t } from '@vben/locales';
 
-import { Card } from 'ant-design-vue';
+import { ref } from 'vue';
 
-import { useVbenForm } from '#/adapter';
+import { useAccess } from '@vben/access';
+import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 
-import { querySchema } from './data';
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
+import {
+  tenantExport,
+  tenantList,
+  tenantRemove,
+  tenantStatusChange,
+} from '#/api/system/tenant';
+import { TableSwitch } from '#/components/table';
+import { downloadExcel } from '#/utils/file/download';
+
+import { columns, querySchema } from './data';
 import tenantDrawer from './tenant-drawer.vue';
 
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // 区间选择器处理
+        if (formValues?.createTime) {
+          formValues.params = {
+            beginTime: dayjs(formValues.createTime[0]).format(
+              'YYYY-MM-DD 00:00:00',
+            ),
+            endTime: dayjs(formValues.createTime[1]).format(
+              'YYYY-MM-DD 23:59:59',
+            ),
+          };
+          Reflect.deleteProperty(formValues, 'createTime');
+        } else {
+          Reflect.deleteProperty(formValues, 'params');
+        }
+
+        return await tenantList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    isHover: true,
+    keyField: 'id',
+  },
+  round: true,
+  align: 'center',
+  showOverflow: true,
+};
+
+const checked = ref(false);
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    checkboxChange: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+    checkboxAll: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+  },
+});
+
 const [TenantDrawer, drawerApi] = useVbenDrawer({
   connectedComponent: tenantDrawer,
 });
 
 function handleAdd() {
-  drawerApi.setData({ update: false });
+  drawerApi.setData({});
   drawerApi.open();
 }
 
-const [QueryForm] = useVbenForm({
+async function handleEdit(record: Recordable<any>) {
-  // 默认展开
+  drawerApi.setData({ id: record.id });
-  collapsed: false,
+  drawerApi.open();
-  // 所有表单项共用，可单独在表单内覆盖
+}
-  commonConfig: {
+
-    // 所有表单项
+async function handleDelete(row: Recordable<any>) {
-    componentProps: {
+  await tenantRemove(row.id);
-      class: 'w-full',
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: any) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await tenantRemove(ids);
+      await tableApi.query();
+      checked.value = false;
     },
-  },
-  schema: querySchema(),
-  // 是否可展开
-  showCollapseButton: true,
-  submitButtonOptions: {
-    text: '查询',
-  },
-  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
   });
+}
+const { hasAccessByCodes } = useAccess();
 </script>
 
 <template>
-  <Page>
+  <Page :auto-content-height="true">
-    <Card>
+    todo 新增修改删除与store同步 修改不显示密码
-      <QueryForm />
+    <BasicTable>
-    </Card>
+      <template #toolbar-actions>
+        <span class="pl-[7px] text-[16px]">租户列表 </span>
+      </template>
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['system:tenant:export']"
+            @click="downloadExcel(tenantExport, '租户数据', {})"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!checked"
+            danger
+            type="primary"
+            v-access:code="['system:tenant:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
           <a-button
             type="primary"
             v-access:code="['system:tenant:add']"
@@ -50,6 +159,42 @@ const [QueryForm] = useVbenForm({
           >
             {{ $t('pages.common.add') }}
           </a-button>
-    <TenantDrawer />
+        </Space>
+      </template>
+      <template #status="{ row }">
+        <TableSwitch
+          v-model="row.status"
+          :api="() => tenantStatusChange(row)"
+          :disabled="row.id === 1 || !hasAccessByCodes(['system:tenant:edit'])"
+          :reload="() => tableApi.query()"
+        />
+      </template>
+      <template #action="{ row }">
+        <a-button
+          size="small"
+          type="link"
+          v-access:code="['system:tenant:edit']"
+          @click="handleEdit(row)"
+        >
+          {{ $t('pages.common.edit') }}
+        </a-button>
+        <Popconfirm
+          placement="left"
+          title="确认删除？"
+          @confirm="handleDelete(row)"
+        >
+          <a-button
+            danger
+            size="small"
+            type="link"
+            v-access:code="['system:tenant:remove']"
+            @click.stop=""
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+        </Popconfirm>
+      </template>
+    </BasicTable>
+    <TenantDrawer @reload="tableApi.query()" />
   </Page>
 </template>

apps/web-antd/src/views/system/tenantPackage/data.ts

@@ -1,4 +1,4 @@
-import type { FormSchemaGetter } from '#/adapter';
+import type { FormSchemaGetter, VxeGridProps } from '#/adapter';
 
 export const querySchema: FormSchemaGetter = () => [
   {
@@ -8,6 +8,30 @@ export const querySchema: FormSchemaGetter = () => [
   },
 ];
 
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '套餐名称',
+    field: 'packageName',
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    title: '租户状态',
+    field: 'status',
+    slots: { default: 'status' },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
 export const drawerSchema: FormSchemaGetter = () => [
   {
     component: 'Input',

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

@@ -1,24 +1,200 @@
 <script setup lang="ts">
-import { Page, useVbenDrawer } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
-import { $t } from '@vben/locales';
 
+import { ref } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
+import {
+  packageChangeStatus,
+  packageExport,
+  packageList,
+  packageRemove,
+} from '#/api/system/tenant-package';
+import { TableSwitch } from '#/components/table';
+import { downloadExcel } from '#/utils/file/download';
+
+import { columns, querySchema } from './data';
 import tenantPackageDrawer from './tenant-package-drawer.vue';
 
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // 区间选择器处理
+        if (formValues?.createTime) {
+          formValues.params = {
+            beginTime: dayjs(formValues.createTime[0]).format(
+              'YYYY-MM-DD 00:00:00',
+            ),
+            endTime: dayjs(formValues.createTime[1]).format(
+              'YYYY-MM-DD 23:59:59',
+            ),
+          };
+          Reflect.deleteProperty(formValues, 'createTime');
+        } else {
+          Reflect.deleteProperty(formValues, 'params');
+        }
+
+        return await packageList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    isHover: true,
+    keyField: 'packageId',
+  },
+  round: true,
+  align: 'center',
+  showOverflow: true,
+};
+
+const checked = ref(false);
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    checkboxChange: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+    checkboxAll: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+  },
+});
+
 const [TenantPackageDrawer, drawerApi] = useVbenDrawer({
   connectedComponent: tenantPackageDrawer,
 });
 
 function handleAdd() {
-  drawerApi.setData({ update: false });
+  drawerApi.setData({});
   drawerApi.open();
 }
+
+async function handleEdit(record: Recordable<any>) {
+  drawerApi.setData({ id: record.packageId });
+  drawerApi.open();
+}
+
+async function handleDelete(row: Recordable<any>) {
+  await packageRemove(row.packageId);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: any) => row.packageId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await packageRemove(ids);
+      await tableApi.query();
+      checked.value = false;
+    },
+  });
+}
+
+const { hasAccessByCodes } = useAccess();
 </script>
 
 <template>
-  <Page>
+  <Page :auto-content-height="true">
-    <a-button type="primary" @click="handleAdd">
+    <BasicTable>
+      <template #toolbar-actions>
+        <span class="pl-[7px] text-[16px]">租户套餐列表</span>
+      </template>
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['system:tenantPackage:export']"
+            @click="downloadExcel(packageExport, '租户套餐数据', {})"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!checked"
+            danger
+            type="primary"
+            v-access:code="['system:tenantPackage:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['system:tenantPackage:add']"
+            @click="handleAdd"
+          >
             {{ $t('pages.common.add') }}
           </a-button>
-    <TenantPackageDrawer />
+        </Space>
+      </template>
+      <template #status="{ row }">
+        <TableSwitch
+          v-model="row.status"
+          :api="() => packageChangeStatus(row)"
+          :disabled="!hasAccessByCodes(['system:tenantPackage:edit'])"
+          :reload="() => tableApi.query()"
+        />
+      </template>
+      <template #action="{ row }">
+        <a-button
+          size="small"
+          type="link"
+          v-access:code="['system:tenantPackage:edit']"
+          @click="handleEdit(row)"
+        >
+          {{ $t('pages.common.edit') }}
+        </a-button>
+        <Popconfirm
+          placement="left"
+          title="确认删除？"
+          @confirm="handleDelete(row)"
+        >
+          <a-button
+            danger
+            size="small"
+            type="link"
+            v-access:code="['system:tenantPackage:remove']"
+            @click.stop=""
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+        </Popconfirm>
+      </template>
+    </BasicTable>
+    <TenantPackageDrawer @reload="tableApi.query()" />
   </Page>
 </template>

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

@@ -10,8 +10,17 @@ import {
   type VbenFormProps,
 } from '@vben/common-ui';
 import { $t } from '@vben/locales';
+import { getPopupContainer } from '@vben/utils';
 
-import { Avatar, Modal, Popconfirm, Space } from 'ant-design-vue';
+import {
+  Avatar,
+  Dropdown,
+  Menu,
+  MenuItem,
+  Modal,
+  Popconfirm,
+  Space,
+} from 'ant-design-vue';
 import dayjs from 'dayjs';
 
 import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
@@ -28,6 +37,8 @@ import { columns, querySchema } from './data';
 import DeptTree from './dept-tree.vue';
 import userDrawer from './user-drawer.vue';
 import userImportModal from './user-import-modal.vue';
+import userInfoModal from './user-info-modal.vue';
+import userResetPwdModal from './user-reset-pwd-modal.vue';
 
 /**
  * 导入
@@ -100,6 +111,7 @@ const gridOptions: VxeGridProps = {
   rowConfig: {
     isHover: true,
     keyField: 'userId',
+    height: 48,
   },
   round: true,
   align: 'center',
@@ -152,17 +164,35 @@ function handleMultiDelete() {
     },
   });
 }
+
+const [UserInfoModal, userInfoModalApi] = useVbenModal({
+  connectedComponent: userInfoModal,
+});
+function handleUserInfo(row: Recordable<any>) {
+  userInfoModalApi.setData({ userId: row.userId });
+  userInfoModalApi.open();
+}
+
+const [UserResetPwdModal, userResetPwdModalApi] = useVbenModal({
+  connectedComponent: userResetPwdModal,
+});
+
+function handleResetPwd(record: Recordable<any>) {
+  userResetPwdModalApi.setData({ record });
+  userResetPwdModalApi.open();
+}
 </script>
 
 <template>
-  <Page :auto-content-height="true" content-class="flex gap-[8px]">
+  <Page :auto-content-height="true">
+    <div class="flex h-full gap-[8px]">
       <DeptTree
         v-model:select-dept-id="selectDeptId"
         :height="300"
         class="w-[260px]"
         @select="() => tableApi.query()"
       />
-    <BasicTable class="flex-1">
+      <BasicTable class="flex-1 overflow-hidden">
         <template #toolbar-actions>
           <span class="pl-[7px] text-[16px]">用户列表</span>
         </template>
@@ -214,10 +244,10 @@ function handleMultiDelete() {
           />
         </template>
         <template #action="{ row }">
-        <Space v-if="row.userId !== 1">
+          <template v-if="row.userId !== 1">
             <a-button
               size="small"
-            type="primary"
+              type="link"
               v-access:code="['system:user:edit']"
               @click.stop="handleEdit(row)"
             >
@@ -231,16 +261,36 @@ function handleMultiDelete() {
               <a-button
                 danger
                 size="small"
+                type="link"
                 v-access:code="['system:user:remove']"
                 @click.stop=""
               >
                 {{ $t('pages.common.delete') }}
               </a-button>
             </Popconfirm>
-        </Space>
+            <Dropdown
+              :get-popup-container="getPopupContainer"
+              placement="bottomRight"
+            >
+              <template #overlay>
+                <Menu>
+                  <MenuItem key="1" @click="handleUserInfo(row)">
+                    用户信息
+                  </MenuItem>
+                  <MenuItem key="2" @click="handleResetPwd(row)">
+                    重置密码
+                  </MenuItem>
+                </Menu>
+              </template>
+              <a-button size="small" type="link">更多</a-button>
+            </Dropdown>
+          </template>
         </template>
       </BasicTable>
+    </div>
     <UserImpotModal />
     <UserDrawer @reload="tableApi.query()" />
+    <UserInfoModal />
+    <UserResetPwdModal />
   </Page>
 </template>

apps/web-antd/src/views/system/user/info.tsx

@@ -5,10 +5,12 @@ import { DictEnum } from '@vben/constants';
 import { Tag } from 'ant-design-vue';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
 
 import { renderDict } from '#/utils/render';
 
 dayjs.extend(duration);
+dayjs.extend(relativeTime);
 
 function renderTags(list: string[]) {
   return (
@@ -100,7 +102,7 @@ export const descSchema: DescItem[] = [
       // 默认en显示
       dayjs.locale('zh-cn');
       // 计算相差秒数
-      const diffSeconds = dayjs(new Date()).diff(dayjs(value), 'second');
+      const diffSeconds = dayjs().diff(dayjs(value), 'second');
       /**
        * 转为时间显示(x月 x天)
        * https://dayjs.fenxianglu.cn/category/duration.html#%E4%BA%BA%E6%80%A7%E5%8C%96

apps/web-antd/src/views/system/user/user-info-modal.vue

@@ -50,7 +50,7 @@ async function handleOpenChange(open: boolean) {
 </script>
 
 <template>
-  <BasicModal :footer="false" title="用户信息">
+  <BasicModal :footer="false" :fullscreen-button="false" title="用户信息">
     <Description @register="registerDescription" />
   </BasicModal>
 </template>

apps/web-antd/src/views/system/user/user-reset-pwd-modal.vue

@@ -46,7 +46,7 @@ const [BasicForm, formApi] = useVbenForm({
       rules: 'required',
     },
     {
-      component: 'StrengthMeter',
+      component: 'InputPassword',
       componentProps: {
         placeholder: '请输入新的密码, 密码长度为5 - 20',
       },
@@ -58,6 +58,10 @@ const [BasicForm, formApi] = useVbenForm({
         .max(20, { message: '密码长度为5 - 20' }),
     },
   ],
+  showDefaultActions: false,
+  commonConfig: {
+    labelWidth: 80,
+  },
 });
 
 async function handleOpenChange(open: boolean) {
@@ -76,7 +80,7 @@ async function handleSubmit() {
     if (!valid) {
       return;
     }
-    const data = formApi.getValues();
+    const data = await formApi.getValues();
     await userResetPassword(data as any);
     emit('reload');
     handleCancel();
@@ -94,8 +98,14 @@ async function handleCancel() {
 </script>
 
 <template>
-  <BasicModal :close-on-click-modal="false" title="重置密码">
+  <BasicModal
+    :close-on-click-modal="false"
+    :fullscreen-button="false"
+    title="重置密码"
+  >
+    <div class="flex flex-col gap-[12px]">
       <Description @register="registerDescription" />
       <BasicForm />
+    </div>
   </BasicModal>
 </template>

apps/web-antd/src/views/tool/gen/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
@@ -69,7 +70,19 @@ const gridOptions: VxeGridProps = {
   showOverflow: true,
 };
 
-const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
+const checked = ref(false);
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    checkboxChange: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+    checkboxAll: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+  },
+});
 
 const [CodePreviewModal, previewModalApi] = useVbenModal({
   connectedComponent: codePreviewModal,
@@ -87,7 +100,7 @@ function handleEdit(record: Recordable<any>) {
 
 async function handleSync(record: Recordable<any>) {
   await syncDb(record.tableId);
-  await tableApi.reload();
+  await tableApi.query();
 }
 
 /**
@@ -130,7 +143,7 @@ async function handleDownload(record: Recordable<any>) {
  */
 async function handleDelete(record: Recordable<any>) {
   await genRemove(record.tableId);
-  await tableApi.reload();
+  await tableApi.query();
 }
 
 function handleMultiDelete() {
@@ -142,7 +155,8 @@ function handleMultiDelete() {
     content: `确认删除选中的${ids.length}条记录吗？`,
     onOk: async () => {
       await genRemove(ids);
-      await tableApi.reload();
+      await tableApi.query();
+      checked.value = false;
     },
   });
 }
@@ -164,10 +178,15 @@ function handleImport() {
       </template>
       <template #toolbar-tools>
         <Space>
-          <a-button danger type="primary" @click="handleMultiDelete">
+          <a-button
+            :disabled="!checked"
+            danger
+            type="primary"
+            @click="handleMultiDelete"
+          >
             {{ $t('pages.common.delete') }}
           </a-button>
-          <a-button @click="handleBatchGen">
+          <a-button :disabled="!checked" @click="handleBatchGen">
             {{ $t('pages.common.generate') }}
           </a-button>
           <a-button type="primary" @click="handleImport">
@@ -206,6 +225,6 @@ function handleImport() {
       </template>
     </BasicTable>
     <CodePreviewModal />
-    <TableImportModal @reload="tableApi.reload()" />
+    <TableImportModal @reload="tableApi.query()" />
   </Page>
 </template>

apps/web-ele/src/api/core/auth.ts

@@ -3,8 +3,8 @@ import { baseRequestClient, requestClient } from '#/api/request';
 export namespace AuthApi {
   /** 登录接口参数 */
   export interface LoginParams {
-    password: string;
+    password?: string;
-    username: string;
+    username?: string;
   }
 
   /** 登录接口返回值 */

apps/web-naive/src/adapter/form.ts

@@ -84,7 +84,10 @@ setupVbenForm<FormComponentType>({
     Upload: NUpload,
   },
   config: {
+    // naive-ui组件不接受onChang事件，所以需要禁用
     disabledOnChangeListener: true,
+    // naive-ui组件的空值为null,不能是undefined，否则重置表单时不生效
+    emptyStateValue: null,
     baseModelPropName: 'value',
     modelPropNameMap: {
       Checkbox: 'checked',

apps/web-naive/src/api/core/auth.ts

@@ -3,8 +3,8 @@ import { baseRequestClient, requestClient } from '#/api/request';
 export namespace AuthApi {
   /** 登录接口参数 */
   export interface LoginParams {
-    password: string;
+    password?: string;
-    username: string;
+    username?: string;
   }
 
   /** 登录接口返回值 */

packages/@core/ui-kit/form-ui/src/components/form-actions.vue

@@ -30,12 +30,12 @@ const submitButtonOptions = computed(() => {
   };
 });
 
-const isQueryForm = computed(() => {
+// const isQueryForm = computed(() => {
-  return !!unref(rootProps).showCollapseButton;
+//   return !!unref(rootProps).showCollapseButton;
-});
+// });
 
 const queryFormStyle = computed(() => {
-  if (isQueryForm.value) {
+  if (!unref(rootProps).actionWrapperClass) {
     return {
       'grid-column': `-2 / -1`,
       marginLeft: 'auto',

packages/@core/ui-kit/form-ui/src/config.ts

@@ -45,8 +45,13 @@ export function setupVbenForm<
 >(options: VbenFormAdapterOptions<T>) {
   const { components, config, defineRules } = options;
 
-  DEFAULT_FORM_COMMON_CONFIG.disabledOnChangeListener =
+  const { disabledOnChangeListener = false, emptyStateValue = undefined } =
-    config?.disabledOnChangeListener ?? false;
+    (config || {}) as FormCommonConfig;
+
+  Object.assign(DEFAULT_FORM_COMMON_CONFIG, {
+    disabledOnChangeListener,
+    emptyStateValue,
+  });
 
   if (defineRules) {
     for (const key of Object.keys(defineRules)) {

packages/@core/ui-kit/form-ui/src/form-render/form-field.vue

@@ -33,6 +33,7 @@ const {
   description,
   disabled,
   disabledOnChangeListener,
+  emptyStateValue,
   fieldName,
   formFieldProps,
   label,
@@ -55,7 +56,7 @@ const formApi = formRenderProps.form;
 
 const isInValid = computed(() => errors.value?.length > 0);
 
-const fieldComponent = computed(() => {
+const FieldComponent = computed(() => {
   const finalComponent = isString(component)
     ? componentMap.value[component]
     : component;
@@ -213,7 +214,7 @@ function fieldBindEvent(slotProps: Record<string, any>) {
   if (bindEventField) {
     return {
       [`onUpdate:${bindEventField}`]: handler,
-      [bindEventField]: value,
+      [bindEventField]: value === undefined ? emptyStateValue : value,
       onChange: disabledOnChangeListener
         ? undefined
         : (e: Record<string, any>) => {
@@ -300,7 +301,7 @@ function autofocus() {
             }"
           >
             <component
-              :is="fieldComponent"
+              :is="FieldComponent"
               ref="fieldComponentRef"
               :class="{
                 'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':

packages/@core/ui-kit/form-ui/src/form-render/form.vue

@@ -87,6 +87,7 @@ const computedSchema = computed(
       controlClass = '',
       disabled,
       disabledOnChangeListener = false,
+      emptyStateValue = undefined,
       formFieldProps = {},
       formItemClass = '',
       hideLabel = false,
@@ -107,6 +108,7 @@ const computedSchema = computed(
       return {
         disabled,
         disabledOnChangeListener,
+        emptyStateValue,
         hideLabel,
         hideRequiredMark,
         labelWidth,

packages/@core/ui-kit/form-ui/src/types.ts

@@ -153,6 +153,10 @@ export interface FormCommonConfig {
    * @default false
    */
   disabledOnChangeListener?: boolean;
+  /**
+   * 所有表单项的空状态值,默认都是undefined，naive-ui的空状态值是null
+   */
+  emptyStateValue?: null | undefined;
   /**
    * 所有表单项的控件样式
    * @default {}
@@ -341,6 +345,7 @@ export interface VbenFormAdapterOptions<
   config?: {
     baseModelPropName?: string;
     disabledOnChangeListener?: boolean;
+    emptyStateValue?: null | undefined;
     modelPropNameMap?: Partial<Record<T, string>>;
   };
   defineRules?: {

packages/effects/plugins/src/vxe-table/theme.css

@@ -76,3 +76,7 @@
     }
   }
 }
+
+.vxe-pager--wrapper {
+  @apply justify-center md:justify-end;
+}

packages/effects/plugins/src/vxe-table/use-vxe-grid.vue

@@ -19,6 +19,7 @@ import {
 import { usePriorityValues } from '@vben/hooks';
 import { EmptyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
+import { usePreferences } from '@vben/preferences';
 import { cloneDeep, cn, mergeWithArrayOverride } from '@vben/utils';
 import { VbenLoading } from '@vben-core/shadcn-ui';
 
@@ -48,6 +49,8 @@ const {
   formOptions,
 } = usePriorityValues(props, state);
 
+const { isMobile } = usePreferences();
+
 const slots = useSlots();
 
 const [Form, formApi] = useTableForm({});
@@ -60,6 +63,8 @@ const options = computed(() => {
   const slotActions = slots['toolbar-actions']?.();
   const slotTools = slots['toolbar-tools']?.();
 
+  const globalGridConfig = VxeUI?.getConfig()?.grid ?? {};
+
   const forceUseToolbarOptions = showToolbar.value
     ? {
         toolbarConfig: {
@@ -76,6 +81,7 @@ const options = computed(() => {
       {},
       forceUseToolbarOptions,
       toRaw(gridOptions.value),
+      globalGridConfig,
     ),
   );
 
@@ -91,6 +97,20 @@ const options = computed(() => {
   }
 
   if (mergedOptions.pagerConfig) {
+    const mobileLayouts = [
+      'PrevJump',
+      'PrevPage',
+      'Number',
+      'NextPage',
+      'NextJump',
+    ] as any;
+    const layouts = [
+      'Total',
+      'Sizes',
+      'Home',
+      ...mobileLayouts,
+      'End',
+    ] as readonly string[];
     mergedOptions.pagerConfig = mergeWithArrayOverride(
       {},
       mergedOptions.pagerConfig,
@@ -99,18 +119,7 @@ const options = computed(() => {
         background: true,
         pageSizes: [10, 20, 30, 50, 100, 200],
         className: 'mt-2 w-full',
-        layouts: [
+        layouts: isMobile.value ? mobileLayouts : layouts,
-          'Total',
-          'Sizes',
-          'Home',
-          'PrevJump',
-          'PrevPage',
-          'Number',
-          'NextPage',
-          'NextJump',
-          'End',
-          // 'FullJump',
-        ] as any[],
         size: 'mini' as const,
       },
     );
@@ -138,7 +147,6 @@ const vbenFormOptions = computed(() => {
       const formValues = formApi.form.values;
       props.api.reload(formValues);
     },
-    collapseTriggerResize: true,
     commonConfig: {
       componentProps: {
         class: 'w-full',
@@ -150,8 +158,15 @@ const vbenFormOptions = computed(() => {
     },
     wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
   };
+  const finalFormOptions: VbenFormProps = mergeWithArrayOverride(
+    {},
+    formOptions.value,
+    defaultFormProps,
+  );
+
   return {
-    ...mergeWithArrayOverride({}, formOptions.value, defaultFormProps),
+    ...finalFormOptions,
+    collapseTriggerResize: !!finalFormOptions.showCollapseButton,
   };
 });
 
@@ -193,8 +208,8 @@ async function init() {
   }
 
   // form 由 vben-form代替，所以不适配formConfig，这里给出警告
-  const formConfig = defaultGridOptions.formConfig;
+  const formConfig = gridOptions.value?.formConfig;
-  if (formConfig?.enabled) {
+  if (formConfig) {
     console.warn(
       '[Vben Vxe Table]: The formConfig in the grid is not supported, please use the `formOptions` props',
     );
@@ -244,7 +259,7 @@ onMounted(() => {
             </Form>
           </slot>
           <div
-            class="bg-background-deep z-100 absolute -left-2 bottom-2 h-4 w-[calc(100%+1rem)] overflow-hidden"
+            class="bg-background-deep z-100 absolute -left-2 bottom-1 h-2 w-[calc(100%+1rem)] overflow-hidden md:bottom-2 md:h-3"
           ></div>
         </div>
       </template>

packages/stores/src/modules/user.ts

@@ -1,6 +1,7 @@
 import { acceptHMRUpdate, defineStore } from 'pinia';
 
 interface BasicUserInfo {
+  [key: string]: any;
   /**
    * 头像
    */

packages/utils/src/index.ts

@@ -1,3 +1,4 @@
 export * from './helpers';
+export * from '@vben-core/shared/cache';
 export * from '@vben-core/shared/color';
 export * from '@vben-core/shared/utils';

playground/src/api/core/auth.ts

@@ -3,8 +3,8 @@ import { baseRequestClient, requestClient } from '#/api/request';
 export namespace AuthApi {
   /** 登录接口参数 */
   export interface LoginParams {
-    password: string;
+    password?: string;
-    username: string;
+    username?: string;
   }
 
   /** 登录接口返回值 */

playground/src/locales/langs/zh-CN.json

@@ -92,7 +92,7 @@
         "editCell": "单元格编辑",
         "editRow": "行编辑",
         "custom-cell": "自定义单元格",
-        "form": "开启搜索表单"
+        "form": "搜索表单"
       },
       "captcha": {
         "title": "验证码",