牧安云哨-前端

vue2/apps/web-antd/src/adapter/component/index.ts

@@ -372,6 +372,20 @@ async function initComponentAdapter() {
         modelPropName: 'value',
       },
     ),
+    ApiCombobox: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiCombobox',
+      },
+    'select',
+  {
+    component: Select,
+      loadingSlot: 'suffixIcon',
+    visibleEvent: 'onDropdownVisibleChange',
+    modelPropName: 'value',
+    props: ['mode', 'allowClear', 'filterOption'],
+  },
+),
     ApiTreeSelect: withDefaultPlaceholder(
       {
         ...ApiComponent,

vue2/apps/web-antd/src/api/index.ts

@@ -1,4 +1,6 @@
 export * from './core';
 export * from './cv';
+export * from './iot';
 export * from './llm';
 export * from './manager';
+export * from './sentinel';

vue2/apps/web-antd/src/api/iot/device.ts

@@ -0,0 +1,80 @@
+import type { Recordable } from '@vben/types';
+
+import { sha256 } from 'js-sha256';
+
+import { pyRequestClient } from '#/api/request';
+
+export namespace SystemDeviceApi {
+  export interface SystemDevice {
+    [key: string]: any;
+    id: string;
+    remark?: string;
+    name: string;
+    roles: string[];
+    status: 0 | 1;
+    is_superuser: 0 | 1;
+    dept_id?: string;
+    dept_name?: string;
+  }
+}
+
+/**
+ * 获取设备列表数据
+ */
+async function getDeviceList(params: Recordable<any>) {
+  return pyRequestClient.get<Array<SystemDeviceApi.SystemDevice>>(
+    '/iot/common/device/list',
+    { params },
+  );
+}
+
+/**
+ * 创建设备
+ * @param data 设备数据
+ */
+async function createDevice(data: Omit<SystemDeviceApi.SystemDevice, 'id'>) {
+  data.password_hash = sha256(data.password?.toString() || '');
+  delete data.password;
+  return pyRequestClient.post('/iot/common/device', data);
+}
+
+/**
+ * 更新设备
+ *
+ * @param id 设备 ID
+ * @param data 设备数据
+ */
+async function updateDevice(
+  id: string,
+  data: Omit<SystemDeviceApi.SystemDevice, 'id'>,
+) {
+  return pyRequestClient.put(`/iot/common/device/${id}`, data);
+}
+/**
+ * 更新设备（部分更新）
+ *
+ * @param id 设备 ID
+ * @param data 需要更新的字段（部分字段即可）
+ */
+async function updateDevicePatch(
+  id: string,
+  data: Partial<Omit<SystemDeviceApi.SystemDevice, 'id'>>,
+) {
+  return pyRequestClient.patch(`/iot/common/device/${id}`, data);
+}
+
+/**
+ * 删除设备
+ * @param id 设备 ID
+ */
+async function deleteDevice(id: string) {
+  return pyRequestClient.delete(`/iot/common/device/${id}`);
+}
+
+export {
+  createDevice,
+  deleteDevice,
+  getDeviceList,
+  updateDevice,
+  updateDevicePatch,
+};

vue2/apps/web-antd/src/api/iot/index.ts

@@ -0,0 +1 @@
+export * from './device';

vue2/apps/web-antd/src/api/manager/dept.ts

@@ -10,6 +10,16 @@ export namespace SystemDeptApi {
   }
 }
 
+export namespace SystemDeptDetailApi {
+  export interface SystemDept {
+    [key: string]: any;
+    children?: SystemDept[];
+    id: string;
+    name: string;
+    comment?: string;
+  }
+}
+
 /**
  * 获取部门列表数据
  */

vue2/apps/web-antd/src/api/manager/dict.ts

@@ -0,0 +1,105 @@
+import { pyRequestClient } from '#/api/request';
+
+export namespace SystemDictApi {
+  export interface SystemDict {
+    [key: string]: any;
+    id: string;
+    name: string;
+    key: string;
+    remark?: string;
+  }
+}
+
+/**
+ * 获取字典列表数据
+ */
+async function getDictList(name = '', page = 1, pageSize = 9) {
+  return pyRequestClient.get<Array<SystemDictApi.SystemDict>>(
+    '/system/dict/list',
+    { params: { name, page, page_size: pageSize } },
+  );
+}
+/**
+ * 创建字典
+ * @param data 字典数据
+ */
+async function createDict(data: Omit<SystemDictApi.SystemDict, 'id'>) {
+  return pyRequestClient.post('/system/dict', data);
+}
+
+/**
+ * 更新字典
+ *
+ * @param id 字典 ID
+ * @param data 字典数据
+ */
+async function updateDict(
+  id: string,
+  data: Omit<SystemDictApi.SystemDict, 'id'>,
+) {
+  return pyRequestClient.put(`/system/dict/${id}`, data);
+}
+
+/**
+ * 删除字典
+ * @param id 字典 ID
+ */
+async function deleteDict(id: string) {
+  return pyRequestClient.delete(`/system/dict/${id}`);
+}
+export namespace SystemDictDetailApi {
+  export interface DictDetail {
+    id: string;
+    value: string;
+    sort?: number;
+    pid?: null | string;
+    dict_id: string;
+    remark?: string;
+    created_at?: string;
+    updated_at?: string;
+  }
+}
+
+/**
+ * 获取字典详情列表（不分页）
+ */
+export async function getDictDetail(dictId: string) {
+  return pyRequestClient.get<Array<SystemDictDetailApi.DictDetail>>(
+    '/system/dict/detail/list',
+    { params: { dictId } },
+  );
+}
+
+/**
+ * 新增字典详情
+ */
+export async function createDictDetail(
+  data: Omit<
+    SystemDictDetailApi.DictDetail,
+    'created_at' | 'id' | 'updated_at'
+  >,
+) {
+  return pyRequestClient.post('/system/dict/detail', data);
+}
+
+/**
+ * 更新字典详情
+ */
+export async function updateDictDetail(
+  id: string,
+  data: Partial<
+    Omit<SystemDictDetailApi.DictDetail, 'created_at' | 'id' | 'updated_at'>
+  >,
+) {
+  return pyRequestClient.put(`/system/dict/detail/${id}`, data);
+}
+
+/**
+ * 删除字典详情
+ */
+export async function deleteDictDetail(id: string) {
+  return pyRequestClient.delete(`/system/dict/detail/${id}`);
+}
+
+
+export { createDict, deleteDict, getDictList, updateDict };

vue2/apps/web-antd/src/api/manager/index.ts

@@ -1,4 +1,6 @@
 export * from './dept';
+export * from './dict';
 export * from './menu';
 export * from './role';
 export * from './user';
+export * from './sys';

vue2/apps/web-antd/src/api/manager/sys.ts

@@ -0,0 +1,25 @@
+import { pyRequestClient } from '#/api/request';
+// system/dict.ts 或 system/dictDetail.ts
+
+export namespace SystemDictApi {
+  export interface DictDetail {
+    id: string;
+    value: string;
+    label: string;
+    sort: number;
+    pid?: string | null;
+    remark?: string;
+    created_at?: string;
+  }
+}
+/**
+ * 根据字典 key 获取字典详情列表
+ */
+export async function getDictDetailList(key: string) {
+  return pyRequestClient.get<Array<SystemDictApi.DictDetail>>(
+    '/system/dict/getValue',
+    {
+      params: { key },
+    },
+  );
+}

vue2/apps/web-antd/src/api/manager/user.ts

@@ -1,11 +1,14 @@
 import type { Recordable } from '@vben/types';
 
+import { sha256 } from 'js-sha256';
+
+import { SystemMenuApi } from '#/api';
 import { pyRequestClient } from '#/api/request';
-import { sha256 } from "js-sha256";
 
 export namespace SystemUserApi {
   export interface SystemUser {
     [key: string]: any;
+
     id: string;
     email?: string;
     name: string;
@@ -37,18 +40,15 @@ async function createUser(data: Omit<SystemUserApi.SystemUser, 'id'>) {
   return pyRequestClient.post('/system/user', data);
 }
 
-/**
+async function isUserNameExists(
- * 更新用户
+  username: string,
- *
+  id?: SystemMenuApi.SystemMenu['id'],
- * @param id 用户 ID
- * @param data 用户数据
- */
-async function updateUser(
-  id: string,
-  data: Omit<SystemUserApi.SystemUser, 'id'>,
 ) {
-  return pyRequestClient.put(`/system/user/${id}`, data);
+  return pyRequestClient.get<boolean>('/system/user/name-exists', {
+    params: { id, username },
+  });
 }
+
 /**
  * 更新用户（部分更新）
  *
@@ -59,6 +59,14 @@ async function updateUserPatch(
   id: string,
   data: Partial<Omit<SystemUserApi.SystemUser, 'id'>>,
 ) {
+  if (
+    data.password !== null &&
+    data.password !== undefined &&
+    data.password.trim() !== ''
+  ) {
+    data.password_hash = sha256(data.password?.toString() || '');
+  }
+  delete data.password;
   return pyRequestClient.patch(`/system/user/${id}`, data);
 }
 
@@ -70,4 +78,10 @@ async function deleteUser(id: string) {
   return pyRequestClient.delete(`/system/user/${id}`);
 }
 
-export { createUser, deleteUser, getUserList, updateUser,updateUserPatch };
+export {
+  createUser,
+  deleteUser,
+  getUserList,
+  isUserNameExists,
+  updateUserPatch,
+};

vue2/apps/web-antd/src/api/sentinel/device.ts

@@ -0,0 +1,81 @@
+import type { Recordable } from '@vben/types';
+
+import { pyRequestClient } from '#/api/request';
+
+export namespace SentinelApi {
+  export interface Record {
+    id: string;
+    name: string;
+    is_inspected: 0 | 1;
+    license_plate?: string;
+    vehicle_type?: string;
+    license_plate_image?: string;
+    vehicle_image?: string;
+    livestock_type?: string;
+    livestock_source?: string;
+    created_at?: string;
+    updated_at?: string;
+    remark?: string;
+    dept_id?: string;
+    dept_name?: string;
+  }
+}
+
+/**
+ * 获取记录列表数据
+ */
+async function getSentinelRecordList(params: Recordable<any>) {
+  return pyRequestClient.get<Array<SentinelApi.Record>>(
+    '/iot/sentinel/record/list',
+    { params },
+  );
+}
+
+/**
+ * 创建记录
+ * @param data 记录数据
+ */
+async function createSentinelRecord(data: Omit<SentinelApi.Record, 'id'>) {
+  return pyRequestClient.post('/iot/sentinel/record', data);
+}
+
+/**
+ * 更新记录
+ *
+ * @param id 记录 ID
+ * @param data 记录数据
+ */
+async function updateSentinelRecord(
+  id: string,
+  data: Omit<SentinelApi.Record, 'id'>,
+) {
+  return pyRequestClient.put(`/iot/sentinel/record/${id}`, data);
+}
+/**
+ * 更新记录（部分更新）
+ *
+ * @param id 记录 ID
+ * @param data 需要更新的字段（部分字段即可）
+ */
+async function updateSentinelRecordPatch(
+  id: string,
+  data: Partial<Omit<SentinelApi.Record, 'id'>>,
+) {
+  return pyRequestClient.patch(`/iot/sentinel/record/${id}`, data);
+}
+
+/**
+ * 删除记录
+ * @param id 记录 ID
+ */
+async function deleteSentinelRecord(id: string) {
+  return pyRequestClient.delete(`/iot/sentinel/record/${id}`);
+}
+
+export {
+  createSentinelRecord,
+  deleteSentinelRecord,
+  getSentinelRecordList,
+  updateSentinelRecord,
+  updateSentinelRecordPatch,
+};

vue2/apps/web-antd/src/api/sentinel/index.ts

@@ -0,0 +1 @@
+export * from './device';

vue2/apps/web-antd/src/router/routes/modules/manager.ts

@@ -20,22 +20,11 @@ const routes: RouteRecordRaw[] = [
         meta: {
           authority: ['manager'],
           icon: 'mdi:office-building-cog-outline',
-          title: '部门管理',
+          title: '组织管理',
           keepAlive: true,
         },
         component: () => import('#/views/manager/department/index.vue'),
       },
-      {
-        name: 'M-user',
-        path: '/manager/user',
-        meta: {
-          authority: ['manager'],
-          icon: 'mdi:account-cog-outline',
-          title: '用户管理',
-          keepAlive: true,
-        },
-        component: () => import('#/views/manager/user/index.vue'),
-      },
       {
         name: 'M-role',
         path: '/manager/role',
@@ -47,13 +36,35 @@ const routes: RouteRecordRaw[] = [
         },
         component: () => import('#/views/manager/role/index.vue'),
       },
+      {
+        name: 'M-user',
+        path: '/manager/user',
+        meta: {
+          authority: ['manager'],
+          icon: 'mdi:account-cog-outline',
+          title: '用户管理',
+          keepAlive: true,
+        },
+        component: () => import('#/views/manager/user/index.vue'),
+      },
+      {
+        name: 'M-dict',
+        path: '/manager/dict',
+        meta: {
+          authority: ['manager'],
+          icon: 'mdi:book-open-outline',
+          title: '字典管理',
+          keepAlive: true,
+        },
+        component: () => import('#/views/manager/dict/index.vue'),
+      },
       {
         name: 'M-perm',
         path: '/manager/perm',
         meta: {
           authority: ['manager'],
           icon: 'mdi:menu',
-          title: '菜单-AI实验室',
+          title: '菜单-实验室',
           keepAlive: true,
         },
         component: () => import('#/views/manager/menu/index.vue'),
@@ -64,7 +75,7 @@ const routes: RouteRecordRaw[] = [
         meta: {
           authority: ['manager'],
           icon: 'mdi:menu',
-          title: '菜单-大数据可视化平台',
+          title: '菜单-大数据',
           keepAlive: true,
         },
         component: () => import('#/views/manager/menu/index2.vue'),

vue2/apps/web-antd/src/views/iot/data.ts

@@ -0,0 +1,224 @@
+import { type VbenFormSchema, z } from "#/adapter/form";
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api';
+
+import * as api from '#/api';
+import { $t } from "@vben/locales";
+
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '设备账号',
+      rules: z
+        .string({
+          required_error: $t('ui.formRules.required', ['设备账号']),
+          invalid_type_error: $t('ui.formRules.required', ['设备账号']),
+        })
+        .min(4, $t('ui.formRules.minLength', ['设备账号', 4]))
+        .max(20, $t('ui.formRules.maxLength', ['设备账号', 20])),
+      componentProps: {
+        allowClear: true,
+      },
+    },
+    {
+      component: 'InputPassword',
+      fieldName: 'password',
+      label: '密码',
+      description: '123456',
+    },
+    {
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: api.getDeptList,
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+      },
+      fieldName: 'dept_id',
+      label: '所属组织',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'remark',
+      label: '备注',
+      componentProps: {
+        allowClear: true,
+      },
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: '可用', value: 1 },
+          { label: '不可用', value: 0 },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: 1,
+      fieldName: 'status',
+      label: '可用性',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: '是', value: 1 },
+          { label: '否', value: 0 },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: 0,
+      fieldName: 'is_superuser',
+      label: '管理员',
+    },
+  ];
+}
+
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      label: '设备编号',
+      componentProps: {
+        allowClear: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '设备名称',
+      componentProps: {
+        allowClear: true,
+      },
+      // componentProps: {
+      //   readonly: true, // 如果组件支持 readonly
+      // },
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: '启用中', value: 1 },
+          { label: '已禁用', value: 0 },
+        ],
+      },
+      fieldName: 'status',
+      label: '可用性',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: '是', value: 1 },
+          { label: '否', value: 0 },
+        ],
+      },
+      fieldName: 'is_superuser',
+      label: '管理员',
+    },
+    {
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: api.getDeptList,
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+      },
+      fieldName: 'dept_id',
+      label: '所属组织',
+    },
+    {
+      component: 'RangePicker',
+      fieldName: 'createTime',
+      label: '创建时间',
+    },
+  ];
+}
+
+export function useColumns<T = SystemUserApi.SystemUser>(
+  onActionClick: OnActionClickFn<T>,
+  onStatusChange?: (newStatus: any, row: T) => PromiseLike<boolean | undefined>,
+  onIsSuperUserChange?: (
+    newStatus: any,
+    row: T,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '设备编号',
+      width: 100,
+    },
+    {
+      field: 'online',
+      slots: { default: 'status' },
+      title: '当前状态',
+      width: 100,
+    },
+    {
+      field: 'name',
+      title: '设备账号',
+      width: 150,
+    },
+    {
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: onStatusChange ? 'CellSwitch' : 'CellTag',
+      },
+      field: 'status',
+      title: '可用性',
+      width: 100,
+    },
+    {
+      cellRender: {
+        attrs: { beforeChange: onIsSuperUserChange },
+        name: onIsSuperUserChange ? 'CellSwitch' : 'CellTag',
+      },
+      field: 'is_superuser',
+      title: '管理员',
+      width: 100,
+    },
+    {
+      field: 'dept_name',
+      minWidth: 120,
+      title: '所属组织',
+    },
+    {
+      field: 'created_at',
+      title: '创建时间',
+      width: 200,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      width: 200,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: '设备名称',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+      },
+      field: 'operation',
+      fixed: 'right',
+      title: '操作',
+      width: 130,
+    },
+  ];
+}

vue2/apps/web-antd/src/views/iot/form.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import type { DataNode } from 'ant-design-vue/es/tree';
+
+import type { Recordable } from '@vben/types';
+
+import type { SystemUserApi } from '#/api';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { Tree, useVbenDrawer } from '@vben/common-ui';
+
+import { Spin } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createDevice, updateDevice } from '#/api';
+import { $t } from '#/locales';
+
+import { useFormSchema } from './data';
+
+const emits = defineEmits(['success']);
+
+const formData = ref<SystemUserApi.SystemUser>();
+
+const [Form, formApi] = useVbenForm({
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const roles = ref<DataNode[]>([]);
+const loadingRoles = ref(false);
+
+const id = ref();
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) return;
+    const values = await formApi.getValues();
+    drawerApi.lock();
+    (id.value ? updateDevice(id.value, values) : createDevice(values))
+      .then(() => {
+        emits('success');
+        drawerApi.close();
+      })
+      .catch(() => {
+        drawerApi.unlock();
+      });
+  },
+
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = drawerApi.getData<SystemUserApi.SystemUser>();
+      formApi.resetForm();
+
+      if (data) {
+        formData.value = data;
+        id.value = data.id;
+      } else {
+        id.value = undefined;
+      }
+
+      // Wait for Vue to flush DOM updates (form fields mounted)
+      await nextTick();
+      if (data) {
+        formApi.setValues(data);
+      }
+    }
+  },
+});
+
+
+const getDrawerTitle = computed(() => {
+  return formData.value?.id
+    ? $t('common.edit', $t('system.role.name'))
+    : $t('common.create', $t('system.role.name'));
+});
+
+function getNodeClass(node: Recordable<any>) {
+  const classes: string[] = [];
+  if (node.value?.type === 'button') {
+    classes.push('inline-flex');
+  }
+
+  return classes.join(' ');
+}
+</script>
+<template>
+  <Drawer :title="getDrawerTitle">
+    <Form>
+      <template #roles="slotProps">
+        <Spin :spinning="loadingRoles" wrapper-class-name="w-full">
+          <Tree
+            :tree-data="roles"
+            multiple
+            bordered
+            :default-expanded-level="2"
+            :get-node-class="getNodeClass"
+            v-bind="slotProps"
+            value-field="id"
+            label-field="title"
+          >
+            <template #node="{ value }">
+              {{ $t(value.title) }}
+            </template>
+          </Tree>
+        </Spin>
+      </template>
+    </Form>
+  </Drawer>
+</template>
+<style lang="css" scoped>
+:deep(.ant-tree-title) {
+  .tree-actions {
+    display: none;
+    margin-left: 20px;
+  }
+}
+
+:deep(.ant-tree-title:hover) {
+  .tree-actions {
+    display: flex;
+    flex: auto;
+    justify-content: flex-end;
+    margin-left: 20px;
+  }
+}
+</style>

vue2/apps/web-antd/src/views/iot/index.vue

@@ -0,0 +1,213 @@
+<script lang="ts" setup>
+import type { Recordable } from '@vben/types';
+
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { SystemDeviceApi } from '#/api';
+
+import { onBeforeUnmount, onMounted, reactive } from 'vue';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { Plus } from '@vben/icons';
+
+import { Button, message, Modal, Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteDevice, getDeviceList, updateDevicePatch } from '#/api';
+
+import { useColumns, useGridFormSchema } from './data';
+import Form from './form.vue';
+
+const [FormDrawer, formDrawerApi] = useVbenDrawer({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/**
+ * 状态开关即将改变
+ * @param newStatus 期望改变的状态值
+ * @param row 行数据
+ * @returns 返回false则中止改变，返回其他值（undefined、true）则允许改变
+ */
+async function onStatusChange(
+  newStatus: number,
+  row: SystemDeviceApi.SystemDevice,
+) {
+  const status: Recordable<string> = {
+    0: '禁用',
+    1: '启用',
+  };
+  try {
+    await confirm(
+      `你要将${row.name}的状态切换为 【${status[newStatus.toString()]}】 吗？`,
+      `切换状态`,
+    );
+    await updateDevicePatch(row.id, { status: newStatus });
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function onIsSuperUserChange(
+  newStatus: number,
+  row: SystemDeviceApi.SystemDevice,
+) {
+  const status: Recordable<string> = {
+    0: '普通用户',
+    1: '超级用户',
+  };
+  try {
+    await confirm(
+      `你要将${row.name}切换为 【${status[newStatus.toString()]}】 吗？`,
+      `切换状态`,
+    );
+    await updateDevicePatch(row.id, { is_superuser: newStatus });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
+    schema: useGridFormSchema(),
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useColumns(onActionClick, onStatusChange, onIsSuperUserChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const res = await getDeviceList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+          return {
+            items: res.list,
+            total: res.total,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+
+    toolbarConfig: {
+      custom: true,
+      export: false,
+      refresh: true,
+      search: true,
+      zoom: true,
+    },
+  } as VxeTableGridOptions<SystemDeviceApi.SystemDevice>,
+});
+
+function onActionClick(e: OnActionClickParams<SystemDeviceApi.SystemDevice>) {
+  switch (e.code) {
+    case 'delete': {
+      onDelete(e.row);
+      break;
+    }
+    case 'edit': {
+      onEdit(e.row);
+      break;
+    }
+  }
+}
+
+/**
+ * 将Antd的Modal.confirm封装为promise，方便在异步函数中调用。
+ * @param content 提示内容
+ * @param title 提示标题
+ */
+function confirm(content: string, title: string) {
+  return new Promise((reslove, reject) => {
+    Modal.confirm({
+      content,
+      onCancel() {
+        reject(new Error('已取消'));
+      },
+      onOk() {
+        reslove(true);
+      },
+      title,
+    });
+  });
+}
+
+function onEdit(row: SystemDeviceApi.SystemDevice) {
+  formDrawerApi.setData(row).open();
+}
+
+function onDelete(row: SystemDeviceApi.SystemDevice) {
+  const hideLoading = message.loading({
+    content: `正在删除设备：${[row.name]}`,
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  deleteDevice(row.id)
+    .then(() => {
+      message.success({
+        content: `已删除设备：${[row.name]}`,
+        key: 'action_process_msg',
+      });
+      onRefresh();
+    })
+    .catch(() => {
+      hideLoading();
+    });
+}
+
+function onRefresh() {
+  gridApi.query();
+}
+
+function onCreate() {
+  formDrawerApi.setData({}).open();
+}
+
+const wsState = reactive({
+  ws: null as null | WebSocket,
+});
+
+onMounted(() => {
+  const ws = new WebSocket('wss://ai.ronsunny.cn:8090/ai/iot/ws/device-status');
+  wsState.ws = ws;
+
+  ws.onmessage = async (e) => {
+    const msg = JSON.parse(e.data);
+    console.log('WS 事件', msg);
+
+    // 简单策略：任何设备上下线都刷新列表 后续改进针对单行
+    await gridApi.query();
+  };
+});
+
+onBeforeUnmount(() => {
+  if (wsState.ws) wsState.ws.close();
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <FormDrawer @success="onRefresh" />
+    <Grid :table-title="设备列表">
+      <template #toolbar-tools>
+        <Button type="primary" @click="onCreate">
+          <Plus class="size-5" />
+          新增设备
+        </Button>
+      </template>
+      <template #status="{ row }">
+        <Tag v-if="row.online" style="color: green">在线</Tag>
+        <Tag v-else style="color: gray">离线</Tag>
+      </template>
+    </Grid>
+  </Page>
+</template>

vue2/apps/web-antd/src/views/manager/department/data.ts

@@ -17,11 +17,11 @@ export function useSchema(): VbenFormSchema[] {
     {
       component: 'Input',
       fieldName: 'name',
-      label: '部门名',
+      label: '组织名',
       rules: z
         .string()
-        .min(2, $t('ui.formRules.minLength', ['部门名', 2]))
+        .min(2, $t('ui.formRules.minLength', ['组织名', 2]))
-        .max(20, $t('ui.formRules.maxLength', ['部门名', 20])),
+        .max(20, $t('ui.formRules.maxLength', ['组织名', 20])),
     },
     {
       component: 'ApiTreeSelect',
@@ -34,7 +34,7 @@ export function useSchema(): VbenFormSchema[] {
         childrenField: 'children',
       },
       fieldName: 'pid',
-      label: '父部门',
+      label: '父组织',
     },
     {
       component: 'Textarea',
@@ -66,9 +66,9 @@ export function useColumns(
       align: 'left',
       field: 'name',
       fixed: 'left',
-      title: '部门名',
+      title: '组织名',
       treeNode: true,
-      width: 150,
+      width: 300,
     },
     {
       field: 'createTime',
@@ -90,7 +90,7 @@ export function useColumns(
       cellRender: {
         attrs: {
           nameField: 'name',
-          nameTitle: '部门名',
+          nameTitle: '组织名',
           onClick: onActionClick,
         },
         name: 'CellOperation',

vue2/apps/web-antd/src/views/manager/department/form.vue

@@ -17,8 +17,8 @@ const emit = defineEmits(['success']);
 const formData = ref<SystemDeptApi.SystemDept>();
 const getTitle = computed(() => {
   return formData.value?.id
-    ? $t('ui.actionTitle.edit', ['部门'])
+    ? $t('ui.actionTitle.edit', ['组织'])
-    : $t('ui.actionTitle.create', ['部门']);
+    : $t('ui.actionTitle.create', ['组织']);
 });
 
 const [Form, formApi] = useVbenForm({

vue2/apps/web-antd/src/views/manager/department/index.vue

@@ -31,7 +31,7 @@ function onEdit(row: SystemDeptApi.SystemDept) {
 }
 
 /**
- * 添加下级部门
+ * 添加下级组织
  * @param row
  */
 function onAppend(row: SystemDeptApi.SystemDept) {
@@ -39,14 +39,14 @@ function onAppend(row: SystemDeptApi.SystemDept) {
 }
 
 /**
- * 创建新部门
+ * 创建新组织
  */
 function onCreate() {
   formModalApi.setData(null).open();
 }
 
 /**
- * 删除部门
+ * 删除组织
  * @param row
  */
 function onDelete(row: SystemDeptApi.SystemDept) {
@@ -132,11 +132,11 @@ function refreshGrid() {
 <template>
   <Page auto-content-height>
     <FormModal @success="refreshGrid" />
-    <Grid table-title="部门列表">
+    <Grid table-title="组织列表">
       <template #toolbar-tools>
         <Button type="primary" @click="onCreate">
           <Plus class="size-5" />
-          新增部门
+          新增组织
         </Button>
       </template>
     </Grid>

vue2/apps/web-antd/src/views/manager/dict/data.ts

@@ -0,0 +1,66 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemDictApi } from '#/api';
+
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'value',
+      label: '值',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'remark',
+      label: '备注',
+    },
+  ];
+}
+
+export function useColumns<T = SystemDictApi.SystemDict>(
+  onActionClick: OnActionClickFn<T>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      width: 200,
+    },
+    {
+      field: 'value',
+      title: '值',
+      width: 200,
+    },
+    {
+      field: 'remark',
+      minWidth: 100,
+      title: '备注',
+    },
+    {
+      field: 'created_at',
+      title: '创建时间',
+      width: 200,
+    },
+    {
+      field: 'updated_at',
+      title: '最后更新时间',
+      width: 200,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: '项名称',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+      },
+      field: 'operation',
+      fixed: 'right',
+      title: '操作',
+      width: 130,
+    },
+  ];
+}

vue2/apps/web-antd/src/views/manager/dict/form.vue

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+import type { DataNode } from 'ant-design-vue/es/tree';
+
+import type { Recordable } from '@vben/types';
+
+import type { SystemDictApi } from '#/api/manager/dict';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { Tree, useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Spin } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { getMenuListForAll } from '#/api';
+import { createDictDetail, updateDictDetail } from '#/api/manager/dict';
+import { $t } from '#/locales';
+
+import { useFormSchema } from './data';
+
+// 🔹 在最上面声明 props
+const props = defineProps<{ dictId: string }>();
+
+const emits = defineEmits(['success']);
+
+const formData = ref<SystemDictApi.SystemDict>();
+const [Form, formApi] = useVbenForm({
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const permissions = ref<DataNode[]>([]);
+const loadingPermissions = ref(false);
+const id = ref();
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) return;
+
+    const values = await formApi.getValues();
+    drawerApi.lock();
+
+    // 在这里使用 props.dictId
+    (id.value
+      ? updateDictDetail(id.value, values)
+      : createDictDetail({ ...values, dict_id: props.dictId })
+    )
+      .then(() => {
+        emits('success');
+        drawerApi.close();
+      })
+      .catch(() => {
+        drawerApi.unlock();
+      });
+  },
+
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = drawerApi.getData<SystemDictApi.SystemDict>();
+      formApi.resetForm();
+
+      if (data) {
+        formData.value = data;
+        id.value = data.id;
+      } else {
+        id.value = undefined;
+      }
+
+      if (permissions.value.length === 0) {
+        await loadPermissions();
+      }
+      await nextTick();
+      if (data) {
+        formApi.setValues(data);
+      }
+    }
+  },
+});
+
+async function loadPermissions() {
+  loadingPermissions.value = true;
+  try {
+    const res = await getMenuListForAll(-1);
+    permissions.value = res as unknown as DataNode[];
+  } finally {
+    loadingPermissions.value = false;
+  }
+}
+
+const getDrawerTitle = computed(() => {
+  return formData.value?.id ? '修改字典项' : '新增菜单项';
+});
+
+function getNodeClass(node: Recordable<any>) {
+  const classes: string[] = [];
+  if (node.value?.type === 'button') {
+    classes.push('inline-flex');
+  }
+  return classes.join(' ');
+}
+</script>
+
+<template>
+  <Drawer :title="getDrawerTitle">
+    <Form>
+      <template #permissions="slotProps">
+        <Spin :spinning="loadingPermissions" wrapper-class-name="w-full">
+          <Tree
+            :tree-data="permissions"
+            multiple
+            bordered
+            :default-expanded-level="2"
+            :get-node-class="getNodeClass"
+            v-bind="slotProps"
+            value-field="id"
+            label-field="meta.title"
+            icon-field="meta.icon"
+          >
+            <template #node="{ value }">
+              <IconifyIcon v-if="value.meta.icon" :icon="value.meta.icon" />
+              {{ $t(value.meta.title) }}
+            </template>
+          </Tree>
+        </Spin>
+      </template>
+    </Form>
+  </Drawer>
+</template>

vue2/apps/web-antd/src/views/manager/dict/index.vue

@@ -0,0 +1,407 @@
+<script lang="ts" setup>
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import { getDictDetail, type SystemDictApi } from "#/api";
+
+import {
+  computed,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  ref,
+  watch,
+} from 'vue';
+
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+import { Plus } from '@vben/icons';
+
+import { Button,Form, Input, message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as api from '#/api';
+
+import { useColumns } from './data';
+import ItemForm from './form.vue';
+
+const list = ref<any[]>([]);
+const error = ref<null | string>(null);
+const filterKeyword = ref('');
+const selectedItem = ref<any>(null);
+
+async function loadList() {
+  error.value = null;
+  const res = await api.getDictList(
+    filterKeyword.value,
+    page.value,
+    pageSize.value,
+  );
+  list.value = res.items || [];
+  total.value = res.total;
+}
+function refreshList() {
+  filterKeyword.value = '';
+  loadList();
+  message.success('列表加载完成');
+}
+
+async function selectItem(item: any) {
+  selectedItem.value = item;
+  gridApi.query();
+}
+// 监听关键词变化，调用防抖接口
+watch(filterKeyword, () => {
+  loadList();
+});
+watch(selectedItem, () => {});
+onMounted(() => {
+  loadList();
+});
+const [FormDrawer, formDrawerApi] = useVbenDrawer({
+  connectedComponent: ItemForm,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async (formValues) => {
+          const res = await getDictDetail(selectedItem.value.id);
+          return {
+            items: res.list,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+
+    toolbarConfig: {
+      custom: true,
+      export: false,
+      refresh: true,
+      zoom: true,
+    },
+  } as VxeTableGridOptions<SystemDictApi.SystemDict>,
+});
+
+function onActionClick(e: OnActionClickParams<SystemDictApi.SystemDict>) {
+  switch (e.code) {
+    case 'delete': {
+      onDelete(e.row);
+      break;
+    }
+    case 'edit': {
+      onEdit(e.row);
+      break;
+    }
+  }
+}
+
+function onEdit(row: SystemDictApi.SystemDict) {
+  formDrawerApi.setData(row).open();
+}
+
+function onDelete(row: SystemDictApi.SystemDict) {
+  const hideLoading = message.loading({
+    content: `正在删除字典项：${[row.name]}`,
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  api
+    .deleteDictDetail(row.id)
+    .then(() => {
+      message.success({
+        content: `已删除字典项：${[row.name]}`,
+        key: 'action_process_msg',
+      });
+      onRefresh();
+    })
+    .catch(() => {
+      hideLoading();
+    });
+}
+
+function onRefresh() {
+  gridApi.query();
+}
+
+function onCreate() {
+  formDrawerApi.setData({}).open();
+}
+
+onDeactivated(() => {
+  // 离开路由时清理状态
+  selectedItem.value = null;
+});
+
+onActivated(() => {
+  // 回来的时候重新刷新一次列表
+  loadList();
+});
+const mode = ref<'create' | 'edit'>('create');
+const currentDictId = ref<string | null>(null);
+const dict_name = ref('');
+const dict_key = ref('');
+const dict_desc = ref('');
+function resetForm() {
+  currentDictId.value = '';
+  dict_name.value = '';
+  dict_key.value = '';
+  dict_desc.value = '';
+}
+
+/**
+ * 将Antd的Modal.confirm封装为promise，方便在异步函数中调用。
+ * @param content 提示内容
+ * @param title 提示标题
+ */
+function confirm(content: string, title: string) {
+  return new Promise((reslove, reject) => {
+    Modal.confirm({
+      content,
+      onCancel() {
+        reject(new Error('已取消'));
+      },
+      onOk() {
+        reslove(true);
+      },
+      title,
+    });
+  });
+}
+const [Modal2, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm() {
+    if (!dict_name.value || !dict_key.value) {
+      message.warning('请输入字典名与字典代码');
+      return;
+    }
+
+    if (mode.value === 'create') {
+      addDict();
+    } else {
+      editDict();
+    }
+  },
+});
+
+function createTask() {
+  mode.value = 'create';
+  resetForm();
+
+  modalApi.setState({
+    title: '新建字典',
+  });
+
+  modalApi.open();
+}
+
+async function deleteItem(item) {
+  const ok = await confirm(
+    `确定要删除「${item.name}」字典吗？此操作不可恢复。`,
+    '删除确认',
+  );
+
+  if (!ok) return;
+
+  await api.deleteDict(item.id);
+  message.success('删除成功');
+
+  // 可选：刷新列表 / 清理选中态
+  refreshList();
+}
+function buildPayload(): Omit<SystemDictApi.SystemDict, 'id'> {
+  return {
+    name: dict_name.value,
+    key: dict_key.value,
+    remark: dict_desc.value,
+  };
+}
+async function addDict() {
+  try {
+    const data = buildPayload();
+
+    await api.createDict(data);
+
+    message.success('创建成功');
+    modalApi.close();
+
+    refreshList();
+  } catch (err) {
+    console.error(err);
+    message.error('创建失败');
+  }
+}
+async function editDict() {
+  if (!currentDictId.value) {
+    message.error('缺少字典 ID');
+    return;
+  }
+
+  try {
+    const data = buildPayload();
+
+    await api.updateDict(currentDictId.value, data);
+
+    message.success('更新成功');
+    modalApi.close();
+
+    refreshList?.();
+  } catch (err) {
+    console.error(err);
+    message.error('更新失败');
+  }
+}
+
+async function editItem(item) {
+  mode.value = 'edit';
+
+  // 回填数据
+  currentDictId.value = item.id;
+  dict_name.value = item.name;
+  dict_key.value = item.key;
+  dict_desc.value = item.remark;
+
+  modalApi.setState({
+    title: '编辑字典',
+  });
+
+  modalApi.open();
+}
+
+// 分页参数
+const page = ref(1);
+const pageSize = ref(9);
+const total = ref(0); // 总条数
+// 计算总页数
+const totalPages = computed(() => Math.ceil(total.value / pageSize.value));
+
+function changePage(newPage) {
+  page.value = newPage;
+  loadList();
+}
+</script>
+<template>
+  <Page auto-content-height>
+    <div class="flex h-[90dvh] w-full flex-col">
+      <Modal2>
+        <Form layout="vertical">
+          <Form.Item label="字典名称" required>
+            <Input v-model:value="dict_name" />
+          </Form.Item>
+          <Form.Item label="字典Key" required>
+            <Input v-model:value="dict_key" />
+          </Form.Item>
+          <Form.Item label="描述">
+            <Input v-model:value="dict_desc" />
+          </Form.Item>
+        </Form>
+      </Modal2>
+      <div class="flex h-full w-full bg-gray-50">
+        <!-- 左侧：筛选 + 列表 -->
+        <div class="flex w-64 flex-col border-r bg-white p-4">
+          <!-- 按钮组 -->
+          <div class="mb-4 flex justify-between space-x-2">
+            <Button type="primary" @click="createTask" class="flex-1">
+              新建字典
+            </Button>
+            <Button @click="refreshList" class="flex-1"> 刷新列表 </Button>
+          </div>
+          <!-- 筛选框 -->
+          <input
+            v-model="filterKeyword"
+            placeholder="筛选字典"
+            class="mb-4 rounded-md border px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary"
+          />
+          <div class="flex-1 space-y-2 overflow-auto">
+            <div
+              v-for="item in list"
+              :key="item.id"
+              @click="selectItem(item)"
+              class="group cursor-pointer rounded border p-3 transition hover:bg-gray-100"
+              :class="{ 'bg-gray-100': item.id === selectedItem?.id }"
+            >
+              <!-- 第一行：标题 + 操作 -->
+              <div class="flex items-start justify-between">
+                <div class="text-base font-medium">
+                  {{ item.name }}
+                </div>
+
+                <div
+                  class="flex gap-2 opacity-0 transition group-hover:opacity-100"
+                  @click.stop
+                >
+                  <Button size="small" type="text" @click="editItem(item)">
+                    ✏️
+                  </Button>
+
+                  <Button
+                    size="small"
+                    type="text"
+                    danger
+                    @click="deleteItem(item)"
+                  >
+                    🗑️
+                  </Button>
+                </div>
+              </div>
+
+              <!-- 第二行：描述 -->
+              <div class="mt-1 text-sm text-gray-500">
+                {{ item.remark || '—' }}
+              </div>
+
+              <!-- 第三行：时间 -->
+              <div class="mt-1 text-xs text-gray-400">
+                {{ item.created_at }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 分页 -->
+          <div class="mt-2 flex justify-center space-x-2">
+            <button
+              :disabled="page === 1"
+              @click="changePage(page - 1)"
+              class="rounded border px-1"
+            >
+              上一页
+            </button>
+
+            <span>第 {{ page }} 页 / 共 {{ totalPages }} 页</span>
+
+            <button
+              :disabled="page === totalPages"
+              @click="changePage(page + 1)"
+              class="rounded border px-1"
+            >
+              下一页
+            </button>
+          </div>
+        </div>
+
+        <!-- 右侧：Tab 内容区 -->
+        <div class="flex flex-1 flex-col overflow-hidden p-6">
+          <FormDrawer :dict-id="selectedItem?.id" @success="onRefresh" />
+          <Grid :table-title="字典项">
+            <template #toolbar-tools>
+              <Button type="primary" @click="onCreate">
+                <Plus class="size-5" />
+                新增项
+              </Button>
+            </template>
+          </Grid>
+        </div>
+      </div>
+    </div>
+  </Page>
+</template>

vue2/apps/web-antd/src/views/manager/role/data.ts

@@ -66,7 +66,7 @@ export function useColumns<T = SystemRoleApi.SystemRole>(
       title: '备注',
     },
     {
-      field: 'createTime',
+      field: 'created_at',
       title: '创建时间',
       width: 200,
     },

vue2/apps/web-antd/src/views/manager/user/data.ts

@@ -1,35 +1,66 @@
+import type { Ref } from 'vue';
+
 import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemUserApi } from '#/api';
 
+import { computed } from 'vue';
+
+import { z } from '#/adapter/form';
+import { isUserNameExists } from '#/api';
 import * as api from '#/api';
 
-export function useFormSchema(): VbenFormSchema[] {
+export function useFormSchema(
+  formData: Ref<SystemUserApi.SystemUser | undefined>,
+): VbenFormSchema[] {
   return [
     {
       component: 'Input',
       fieldName: 'name',
       label: '昵称',
+      componentProps: { allowClear: true },
     },
     {
       component: 'Input',
       fieldName: 'email',
       label: '登录账号',
-      rules: 'required',
+      componentProps: { allowClear: true },
+      rules: computed(() => {
+        if (formData.value?.id) {
+          // 编辑时只做长度校验
+          return z
+            .string()
+            .min(1, '登录账号至少1个字符')
+            .max(30, '登录账号最多30个字符');
+        } else {
+          // 新增时校验唯一性
+          return z
+            .string()
+            .min(1, '登录账号至少1个字符')
+            .max(30, '登录账号最多30个字符')
+            .refine(
+              async (value: string) => !(await isUserNameExists(value)),
+              (value) => ({ message: `登录账号${value}已存在` }),
+            );
+        }
+      }),
     },
     {
       component: 'Input',
       fieldName: 'phone',
       label: '手机号',
+      componentProps: { allowClear: true },
     },
     {
       component: 'InputPassword',
       fieldName: 'password',
-      rules: 'required',
       label: '密码',
+      rules: computed(() => (formData.value?.id ? undefined : 'required')), // 编辑时密码可不填
     },
     {
       component: 'ApiTreeSelect',
+      fieldName: 'dept_id',
+      label: '所属组织',
       componentProps: {
         allowClear: true,
         api: api.getDeptList,
@@ -38,11 +69,12 @@ export function useFormSchema(): VbenFormSchema[] {
         valueField: 'id',
         childrenField: 'children',
       },
-      fieldName: 'dept_id',
-      label: '所属部门',
     },
     {
       component: 'RadioGroup',
+      fieldName: 'status',
+      label: '状态',
+      defaultValue: 1,
       componentProps: {
         buttonStyle: 'solid',
         options: [
@@ -51,9 +83,6 @@ export function useFormSchema(): VbenFormSchema[] {
         ],
         optionType: 'button',
       },
-      defaultValue: 1,
-      fieldName: 'status',
-      label: '状态',
     },
     {
       component: 'Input',
@@ -71,8 +100,18 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       fieldName: 'name',
       label: '用户名称',
+      componentProps: {
+        allowClear: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'id',
+      label: '用户编号',
+      componentProps: {
+        allowClear: true,
+      },
     },
-    { component: 'Input', fieldName: 'id', label: '用户编号' },
     {
       component: 'Select',
       componentProps: {
@@ -96,7 +135,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         childrenField: 'children',
       },
       fieldName: 'dept_id',
-      label: '所属部门',
+      label: '所属组织',
     },
     {
       component: 'RangePicker',
@@ -133,7 +172,7 @@ export function useColumns<T = SystemUserApi.SystemUser>(
     {
       field: 'dept_name',
       minWidth: 120,
-      title: '所属部门',
+      title: '所属组织',
     },
     {
       field: 'created_at',

vue2/apps/web-antd/src/views/manager/user/form.vue

@@ -3,7 +3,7 @@ import type { DataNode } from 'ant-design-vue/es/tree';
 
 import type { Recordable } from '@vben/types';
 
-import type { SystemUserApi } from '#/api';
+import { type SystemUserApi, updateUserPatch } from "#/api";
 
 import { computed, nextTick, ref } from 'vue';
 
@@ -12,7 +12,7 @@ import { Tree, useVbenDrawer } from '@vben/common-ui';
 import { Spin } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import { createUser, getAllRoleList, updateUser } from '#/api';
+import { createUser, getAllRoleList } from '#/api';
 import { $t } from '#/locales';
 
 import { useFormSchema } from './data';
@@ -20,9 +20,8 @@ import { useFormSchema } from './data';
 const emits = defineEmits(['success']);
 
 const formData = ref<SystemUserApi.SystemUser>();
-
 const [Form, formApi] = useVbenForm({
-  schema: useFormSchema(),
+  schema: useFormSchema(formData),
   showDefaultActions: false,
 });
 
@@ -36,7 +35,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
     if (!valid) return;
     const values = await formApi.getValues();
     drawerApi.lock();
-    (id.value ? updateUser(id.value, values) : createUser(values))
+    (id.value ? updateUserPatch(id.value, values) : createUser(values))
       .then(() => {
         emits('success');
         drawerApi.close();

vue2/apps/web-antd/src/views/sentinel/device/data.ts

@@ -0,0 +1,237 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api';
+
+import * as api from '#/api';
+
+/**
+ * 新增/修改
+ */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'license_plate',
+      label: '车牌',
+      componentProps: {
+        allowClear: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'vehicle_type',
+      label: '车型',
+      componentProps: {
+        allowClear: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'livestock_type',
+      label: '牲畜种类',
+      componentProps: {
+        allowClear: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'livestock_source',
+      label: '牲畜来源',
+      componentProps: {
+        allowClear: true,
+      },
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: '已检疫', value: 1 },
+          { label: '未检疫', value: 0 },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: 0,
+      fieldName: 'is_inspected',
+      label: '检疫状态',
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'remark',
+      label: '备注',
+      componentProps: {
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/**
+ * 筛选
+ */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      label: '编号',
+      componentProps: {
+        allowClear: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'license_plate',
+      label: '车牌',
+      componentProps: {
+        allowClear: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'vehicle_type',
+      label: '车型',
+      componentProps: {
+        allowClear: true,
+      },
+    },
+    {
+      component: 'ApiCombobox',
+      fieldName: 'livestock_type',
+      label: '牲畜种类',
+      componentProps: {
+        api: () => api.getDictDetailList('livestock_type'),
+        labelField: 'value',
+        valueField: 'value',
+        showSearch: true,
+        mode: 'combobox', // 可选 combobox / tags
+        allowClear: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'livestock_source',
+      label: '牲畜来源',
+      componentProps: {
+        allowClear: true,
+      },
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: '已检疫', value: 1 },
+          { label: '未检疫', value: 0 },
+        ],
+      },
+      fieldName: 'is_inspected',
+      label: '检疫状态',
+    },
+    {
+      component: 'RangePicker',
+      fieldName: 'createTime',
+      label: '录入时间',
+    },
+  ];
+}
+
+/**
+ * 列表展示
+ * @param onActionClick
+ * @param onStatusChange
+ */
+export function useColumns<T = SystemUserApi.SystemUser>(
+  onActionClick: OnActionClickFn<T>,
+  onStatusChange?: (newStatus: any, row: T) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      width: 100,
+    },
+    {
+      field: 'license_plate',
+      title: '车牌',
+      width: 150,
+    },
+    {
+      cellRender: { name: 'CellImage' },
+      field: 'license_plate_image',
+      title: '车牌照',
+      width: 150,
+    },
+    {
+      field: 'vehicle_type',
+      title: '车型',
+      width: 150,
+    },
+    {
+      cellRender: { name: 'CellImage' },
+      field: 'vehicle_image',
+      title: '车身照',
+      width: 150,
+    },
+    {
+      field: 'livestock_type',
+      title: '牲畜种类',
+      width: 100,
+    },
+    {
+      field: 'livestock_source',
+      title: '牲畜来源',
+      width: 200,
+    },
+    {
+      field: 'is_inspected',
+      title: '检疫状态',
+      width: 100,
+      cellRender: {
+        name: 'CellSwitch',
+        props: {
+          checkedChildren: '已检疫',
+          unCheckedChildren: '未检疫',
+        },
+        attrs: {
+          beforeChange: onStatusChange,
+        },
+      },
+    },
+    {
+      field: 'created_at',
+      title: '录入时间',
+      width: 150,
+    },
+    {
+      field: 'updated_at',
+      title: '最后更新时间',
+      width: 150,
+    },
+    {
+      field: 'dept_name',
+      title: '所属组织',
+      width: 300,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      width: 300,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: '设备名称',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+      },
+      field: 'operation',
+      fixed: 'right',
+      title: '操作',
+      width: 100,
+    },
+  ];
+}

vue2/apps/web-antd/src/views/sentinel/device/form.vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { DataNode } from 'ant-design-vue/es/tree';
+
+import type { Recordable } from '@vben/types';
+
+import type { SentinelApi } from '#/api';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { Tree, useVbenDrawer } from '@vben/common-ui';
+
+import { Spin } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createSentinelRecord, updateSentinelRecord } from '#/api';
+import { $t } from '#/locales';
+
+import { useFormSchema } from './data';
+
+const emits = defineEmits(['success']);
+
+const formData = ref<SentinelApi.Record>();
+
+const [Form, formApi] = useVbenForm({
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const roles = ref<DataNode[]>([]);
+const loadingRoles = ref(false);
+
+const id = ref();
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) return;
+    const values = await formApi.getValues();
+    drawerApi.lock();
+    (id.value
+      ? updateSentinelRecord(id.value, values)
+      : createSentinelRecord(values)
+    )
+      .then(() => {
+        emits('success');
+        drawerApi.close();
+      })
+      .catch(() => {
+        drawerApi.unlock();
+      });
+  },
+
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = drawerApi.getData<SentinelApi.Record>();
+      formApi.resetForm();
+
+      if (data) {
+        formData.value = data;
+        id.value = data.id;
+      } else {
+        id.value = undefined;
+      }
+
+      // Wait for Vue to flush DOM updates (form fields mounted)
+      await nextTick();
+      if (data) {
+        formApi.setValues(data);
+      }
+    }
+  },
+});
+
+const getDrawerTitle = computed(() => {
+  return formData.value?.id
+    ? $t('common.edit', $t('system.role.name'))
+    : $t('common.create', $t('system.role.name'));
+});
+
+function getNodeClass(node: Recordable<any>) {
+  const classes: string[] = [];
+  if (node.value?.type === 'button') {
+    classes.push('inline-flex');
+  }
+
+  return classes.join(' ');
+}
+</script>
+<template>
+  <Drawer :title="getDrawerTitle">
+    <Form>
+      <template #roles="slotProps">
+        <Spin :spinning="loadingRoles" wrapper-class-name="w-full">
+          <Tree
+            :tree-data="roles"
+            multiple
+            bordered
+            :default-expanded-level="2"
+            :get-node-class="getNodeClass"
+            v-bind="slotProps"
+            value-field="id"
+            label-field="title"
+          >
+            <template #node="{ value }">
+              {{ $t(value.id) }}
+            </template>
+          </Tree>
+        </Spin>
+      </template>
+    </Form>
+  </Drawer>
+</template>
+<style lang="css" scoped>
+:deep(.ant-tree-title) {
+  .tree-actions {
+    display: none;
+    margin-left: 20px;
+  }
+}
+
+:deep(.ant-tree-title:hover) {
+  .tree-actions {
+    display: flex;
+    flex: auto;
+    justify-content: flex-end;
+    margin-left: 20px;
+  }
+}
+</style>

vue2/apps/web-antd/src/views/sentinel/device/index.vue

@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import type { Recordable } from '@vben-core/typings';
+
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import { deleteDevice, deleteSentinelRecord, type SentinelApi, type SystemDeviceApi } from "#/api";
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { Plus } from '@vben/icons';
+
+import { Button, message } from "ant-design-vue";
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSentinelRecordList, updateSentinelRecordPatch } from '#/api';
+
+import { useColumns, useGridFormSchema } from './data';
+import Form from './form.vue';
+
+const [FormDrawer, formDrawerApi] = useVbenDrawer({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/**
+ * 状态开关即将改变
+ * @param newStatus 期望改变的状态值
+ * @param row 行数据
+ * @returns 返回false则中止改变，返回其他值（undefined、true）则允许改变
+ */
+async function onStatusChange(newStatus: number, row: SentinelApi.Record) {
+  const status: Recordable<string> = {
+    0: '不通过',
+    1: '通过',
+  };
+  try {
+    await confirm(
+      `你要将记录编号为${row.id}的检查状态切换为【${status[newStatus.toString()]}】 吗？`,
+      `切换检查状态`,
+    );
+    await updateSentinelRecordPatch(row.id, { is_inspected: newStatus });
+    return true;
+  } catch {
+    return false;
+  }
+}
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
+    schema: useGridFormSchema(),
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useColumns(onActionClick, onStatusChange),
+    height: 'auto',
+
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const res = await getSentinelRecordList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+          return {
+            items: res.list,
+            total: res.total,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+
+    toolbarConfig: {
+      custom: true,
+      export: false,
+      refresh: true,
+      search: true,
+      zoom: true,
+    },
+  } as VxeTableGridOptions<SentinelApi.Record>,
+});
+
+function onActionClick(e: OnActionClickParams<SentinelApi.Record>) {
+  switch (e.code) {
+    case 'delete': {
+      onDelete(e.row);
+      break;
+    }
+    case 'edit': {
+      onEdit(e.row);
+      break;
+    }
+  }
+}
+
+function onEdit(row: SentinelApi.Record) {
+  formDrawerApi.setData(row).open();
+}
+
+function onDelete(row: SentinelApi.Record) {
+  const hideLoading = message.loading({
+    content: `正在删除记录：${[row.id]}`,
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  deleteSentinelRecord(row.id)
+    .then(() => {
+      message.success({
+        content: `已删除记录：${[row.id]}`,
+        key: 'action_process_msg',
+      });
+      onRefresh();
+    })
+    .catch(() => {
+      hideLoading();
+    });
+}
+
+function onRefresh() {
+  gridApi.query();
+}
+function onCreate() {
+  formDrawerApi.setData({}).open();
+}
+</script>
+<template>
+  <Page auto-content-height>
+    <FormDrawer @success="onRefresh" />
+    <Grid :table-title="设备列表">
+      <template #toolbar-tools>
+        <Button type="primary" @click="onCreate">
+          <Plus class="size-5" />
+          手动新增记录
+        </Button>
+      </template>
+    </Grid>
+  </Page>
+</template>