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) {
-  return requestClient.get<DictType[]>(Api.dictTypeList, { params });
+export function dictTypeList(params?: PageQuery) {
+  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>
-    在线设备
-    <div>先不做</div>
+    <BasicTable>
+      <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,38 +153,37 @@ 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"
+          v-access:code="['system:client:edit']"
+          @click="handleEdit(row)"
+        >
+          {{ $t('pages.common.edit') }}
+        </a-button>
+        <Popconfirm
+          :disabled="row.id === 1"
+          placement="left"
+          title="确认删除？"
+          @confirm="handleDelete(row)"
+        >
           <a-button
+            :disabled="row.id === 1"
+            danger
             size="small"
             type="link"
-            v-access:code="['system:client:edit']"
-            @click="handleEdit(row)"
+            v-access:code="['system:client:remove']"
+            @click.stop=""
           >
-            {{ $t('pages.common.edit') }}
+            {{ $t('pages.common.delete') }}
           </a-button>
-          <Popconfirm
-            placement="left"
-            title="确认删除？"
-            @confirm="handleDelete(row)"
-          >
-            <a-button
-              :disabled="row.id === 1"
-              danger
-              size="small"
-              type="link"
-              v-access:code="['system:client:remove']"
-              @click.stop=""
-            >
-              {{ $t('pages.common.delete') }}
-            </a-button>
-          </Popconfirm>
-        </Space>
+        </Popconfirm>
       </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,31 +162,29 @@ async function handleRefreshCache() {
         </Space>
       </template>
       <template #action="{ row }">
-        <Space>
+        <a-button
+          size="small"
+          type="link"
+          v-access:code="['system:config: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:config:edit']"
-            @click="handleEdit(row)"
+            v-access:code="['system:config:remove']"
+            @click.stop=""
           >
-            {{ $t('pages.common.edit') }}
+            {{ $t('pages.common.delete') }}
           </a-button>
-          <Popconfirm
-            placement="left"
-            title="确认删除？"
-            @confirm="handleDelete(row)"
-          >
-            <a-button
-              danger
-              size="small"
-              type="link"
-              v-access:code="['system:config:delete']"
-              @click.stop=""
-            >
-              {{ $t('pages.common.delete') }}
-            </a-button>
-          </Popconfirm>
-        </Space>
+        </Popconfirm>
       </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 { $t } from '@vben/locales';
+import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 
-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({
-  // 默认展开
-  collapsed: false,
-  // 所有表单项共用，可单独在表单内覆盖
-  commonConfig: {
-    // 所有表单项
-    componentProps: {
-      class: 'w-full',
+async function handleEdit(record: Recordable<any>) {
+  drawerApi.setData({
+    dictType: dictType.value,
+    dictCode: record.dictCode,
+  });
+  drawerApi.open();
+}
+
+async function handleDelete(row: Recordable<any>) {
+  await dictDataRemove(row.dictCode);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  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();
     },
-  },
-  schema: querySchema(),
-  // 是否可展开
-  showCollapseButton: true,
-  submitButtonOptions: {
-    text: '查询',
-  },
-  wrapperClass: 'grid-cols-1 md:grid-cols-2',
-});
+  });
+}
 
-const testValue = ref('');
-
-emitter.on('rowClick', (dictType) => {
-  testValue.value = dictType;
+emitter.on('rowClick', async (value) => {
+  dictType.value = value;
+  await tableApi.query();
 });
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
-    <Card>
-      <QueryForm />
-    </Card>
-    <Card>
-      <a-button type="primary" @click="handleAdd">
-        {{ $t('pages.common.add') }}
-      </a-button>
-    </Card>
-    {{ testValue }}
-    <DictDataDrawer />
-  </div>
+  <Page :auto-content-height="true">
+    <BasicTable>
+      <template #toolbar-actions>
+        <span class="pl-[7px] text-[16px]">字典数据列表</span>
+      </template>
+      <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>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <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">
-    <DictTypePanel class="flex-1" />
-    <DictDataPanel class="flex-1" />
+  <Page :auto-content-height="true" content-class="flex flex-col lg:flex-row">
+    <DictTypePanel class="flex-1 overflow-hidden" />
+    <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 { $t } from '@vben/locales';
+import type { Recordable } from '@vben/types';
 
-import { Card } from 'ant-design-vue';
-import { uniqueId } from 'lodash-es';
+import { ref } from 'vue';
 
-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 dictTypeModel from './dict-type-model.vue';
+import { columns, querySchema } from './data';
+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({
-  // 默认展开
-  collapsed: false,
-  // 所有表单项共用，可单独在表单内覆盖
-  commonConfig: {
-    // 所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: querySchema(),
-  // 是否可展开
-  showCollapseButton: true,
-  submitButtonOptions: {
-    text: '查询',
-  },
-  wrapperClass: 'grid-cols-1 md:grid-cols-2',
-});
+async function handleEdit(record: Recordable<any>) {
+  modalApi.setData({ id: record.dictId });
+  modalApi.open();
+}
 
-function handleRowClickTest() {
-  emitter.emit('rowClick', uniqueId('mitt-'));
+async function handleDelete(row: Recordable<any>) {
+  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">
-    <Card>
-      <QueryForm />
-    </Card>
-    <Card>
-      <a-button type="primary" @click="handleAdd">
-        {{ $t('pages.common.add') }}
-      </a-button>
-    </Card>
-    <Card>
-      <a-button @click="handleRowClickTest">测试mitt</a-button>
-      左侧向右侧传值
-    </Card>
-    <DictTypeModal />
-  </div>
+  <Page :auto-content-height="true">
+    <BasicTable>
+      <template #toolbar-actions>
+        <span class="pl-[7px] text-[16px]">字典类型列表</span>
+      </template>
+      <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>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <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>
+    <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,31 +145,29 @@ function handleMultiDelete() {
         </Space>
       </template>
       <template #action="{ row }">
-        <Space>
+        <a-button
+          size="small"
+          type="link"
+          v-access:code="['system:notice: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:notice:edit']"
-            @click="handleEdit(row)"
+            v-access:code="['system:notice:remove']"
+            @click.stop=""
           >
-            {{ $t('pages.common.edit') }}
+            {{ $t('pages.common.delete') }}
           </a-button>
-          <Popconfirm
-            placement="left"
-            title="确认删除？"
-            @confirm="handleDelete(row)"
-          >
-            <a-button
-              danger
-              size="small"
-              type="link"
-              v-access:code="['system:notice:delete']"
-              @click.stop=""
-            >
-              {{ $t('pages.common.delete') }}
-            </a-button>
-          </Popconfirm>
-        </Space>
+        </Popconfirm>
       </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,37 +154,35 @@ 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"
+          v-access:code="['system:ossConfig: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:ossConfig:edit']"
-            @click="handleEdit(row)"
+            v-access:code="['system:ossConfig:remove']"
+            @click.stop=""
           >
-            {{ $t('pages.common.edit') }}
+            {{ $t('pages.common.delete') }}
           </a-button>
-          <Popconfirm
-            placement="left"
-            title="确认删除？"
-            @confirm="handleDelete(row)"
-          >
-            <a-button
-              danger
-              size="small"
-              type="link"
-              v-access:code="['system:ossConfig:remove']"
-              @click.stop=""
-            >
-              {{ $t('pages.common.delete') }}
-            </a-button>
-          </Popconfirm>
-        </Space>
+        </Popconfirm>
       </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',
-    label: 'id',
+    fieldName: 'postId',
+    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: 'row',
+    trigger: 'cell',
   },
   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,55 +1,200 @@
 <script setup lang="ts">
-import { Page, useVbenDrawer } from '@vben/common-ui';
-import { $t } from '@vben/locales';
+import type { Recordable } from '@vben/types';
 
-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({
-  // 默认展开
-  collapsed: false,
-  // 所有表单项共用，可单独在表单内覆盖
-  commonConfig: {
-    // 所有表单项
-    componentProps: {
-      class: 'w-full',
+async function handleEdit(record: Recordable<any>) {
+  drawerApi.setData({ id: record.id });
+  drawerApi.open();
+}
+
+async function handleDelete(row: Recordable<any>) {
+  await tenantRemove(row.id);
+  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>
-    <Card>
-      <QueryForm />
-    </Card>
-    <a-button
-      type="primary"
-      v-access:code="['system:tenant:add']"
-      @click="handleAdd"
-    >
-      {{ $t('pages.common.add') }}
-    </a-button>
-    <TenantDrawer />
+  <Page :auto-content-height="true">
+    todo 新增修改删除与store同步 修改不显示密码
+    <BasicTable>
+      <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']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </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 { $t } from '@vben/locales';
+import type { Recordable } from '@vben/types';
 
+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>
-    <a-button type="primary" @click="handleAdd">
-      {{ $t('pages.common.add') }}
-    </a-button>
-    <TenantPackageDrawer />
+  <Page :auto-content-height="true">
+    <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>
+        </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,95 +164,133 @@ 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]">
-    <DeptTree
-      v-model:select-dept-id="selectDeptId"
-      :height="300"
-      class="w-[260px]"
-      @select="() => tableApi.query()"
-    />
-    <BasicTable class="flex-1">
-      <template #toolbar-actions>
-        <span class="pl-[7px] text-[16px]">用户列表</span>
-      </template>
-      <template #toolbar-tools>
-        <Space>
-          <a-button
-            v-access:code="['system:user:export']"
-            @click="downloadExcel(userExport, '用户管理', {})"
-          >
-            {{ $t('pages.common.export') }}
-          </a-button>
-          <a-button
-            v-access:code="['system:user:import']"
-            @click="handleImport"
-          >
-            {{ $t('pages.common.import') }}
-          </a-button>
-          <a-button
-            :disabled="!checked"
-            danger
-            type="primary"
-            v-access:code="['system:user:remove']"
-            @click="handleMultiDelete"
-          >
-            {{ $t('pages.common.delete') }}
-          </a-button>
-          <a-button
-            type="primary"
-            v-access:code="['system:user:add']"
-            @click="handleAdd"
-          >
-            {{ $t('pages.common.add') }}
-          </a-button>
-        </Space>
-      </template>
-      <template #avatar="{ row }">
-        <Avatar v-if="row.avatar" :src="row.avatar" />
-        <Avatar
-          v-else
-          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
-        />
-      </template>
-      <template #status="{ row }">
-        <TableSwitch
-          v-model="row.status"
-          :api="() => userStatusChange(row)"
-          :disabled="row.userId === 1"
-          :reload="() => tableApi.query()"
-        />
-      </template>
-      <template #action="{ row }">
-        <Space v-if="row.userId !== 1">
-          <a-button
-            size="small"
-            type="primary"
-            v-access:code="['system:user:edit']"
-            @click.stop="handleEdit(row)"
-          >
-            {{ $t('pages.common.edit') }}
-          </a-button>
-          <Popconfirm
-            placement="left"
-            title="确认删除？"
-            @confirm="handleDelete(row)"
-          >
+  <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 overflow-hidden">
+        <template #toolbar-actions>
+          <span class="pl-[7px] text-[16px]">用户列表</span>
+        </template>
+        <template #toolbar-tools>
+          <Space>
             <a-button
+              v-access:code="['system:user:export']"
+              @click="downloadExcel(userExport, '用户管理', {})"
+            >
+              {{ $t('pages.common.export') }}
+            </a-button>
+            <a-button
+              v-access:code="['system:user:import']"
+              @click="handleImport"
+            >
+              {{ $t('pages.common.import') }}
+            </a-button>
+            <a-button
+              :disabled="!checked"
               danger
-              size="small"
+              type="primary"
               v-access:code="['system:user:remove']"
-              @click.stop=""
+              @click="handleMultiDelete"
             >
               {{ $t('pages.common.delete') }}
             </a-button>
-          </Popconfirm>
-        </Space>
-      </template>
-    </BasicTable>
+            <a-button
+              type="primary"
+              v-access:code="['system:user:add']"
+              @click="handleAdd"
+            >
+              {{ $t('pages.common.add') }}
+            </a-button>
+          </Space>
+        </template>
+        <template #avatar="{ row }">
+          <Avatar v-if="row.avatar" :src="row.avatar" />
+          <Avatar
+            v-else
+            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
+          />
+        </template>
+        <template #status="{ row }">
+          <TableSwitch
+            v-model="row.status"
+            :api="() => userStatusChange(row)"
+            :disabled="row.userId === 1"
+            :reload="() => tableApi.query()"
+          />
+        </template>
+        <template #action="{ row }">
+          <template v-if="row.userId !== 1">
+            <a-button
+              size="small"
+              type="link"
+              v-access:code="['system:user:edit']"
+              @click.stop="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:user:remove']"
+                @click.stop=""
+              >
+                {{ $t('pages.common.delete') }}
+              </a-button>
+            </Popconfirm>
+            <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="重置密码">
-    <Description @register="registerDescription" />
-    <BasicForm />
+  <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>