feat: user

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]">
+  <Page :auto-content-height="true">
-    <DeptTree
+    <div class="flex h-full gap-[8px]">
-      v-model:select-dept-id="selectDeptId"
+      <DeptTree
-      :height="300"
+        v-model:select-dept-id="selectDeptId"
-      class="w-[260px]"
+        :height="300"
-      @select="() => tableApi.query()"
+        class="w-[260px]"
-    />
+        @select="() => tableApi.query()"
-    <BasicTable class="flex-1">
+      />
-      <template #toolbar-actions>
+      <BasicTable class="flex-1 overflow-hidden">
-        <span class="pl-[7px] text-[16px]">用户列表</span>
+        <template #toolbar-actions>
-      </template>
+          <span class="pl-[7px] text-[16px]">用户列表</span>
-      <template #toolbar-tools>
+        </template>
-        <Space>
+        <template #toolbar-tools>
-          <a-button
+          <Space>
-            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)"
-          >
             <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>
+            <a-button
-        </Space>
+              type="primary"
-      </template>
+              v-access:code="['system:user:add']"
-    </BasicTable>
+              @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) {
@@ -94,8 +98,14 @@ async function handleCancel() {
 </script>
 
 <template>
-  <BasicModal :close-on-click-modal="false" title="重置密码">
+  <BasicModal
-    <Description @register="registerDescription" />
+    :close-on-click-modal="false"
-    <BasicForm />
+    :fullscreen-button="false"
+    title="重置密码"
+  >
+    <div class="flex flex-col gap-[12px]">
+      <Description @register="registerDescription" />
+      <BasicForm />
+    </div>
   </BasicModal>
 </template>