From ac343f006afccddf3278f32357c56535f0b93e5a Mon Sep 17 00:00:00 2001
From: fhysy <1149505133@qq.com>
Date: Tue, 16 Sep 2025 17:10:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E5=B9=B6=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=96=B0=E5=8A=9F=E8=83=BD=E3=80=81=E8=8E=B7=E5=8F=96=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E8=AE=BE=E5=A4=87=E5=9B=BE=E7=89=87=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E5=88=B0vuex?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构了设备列表页面的布局和样式，增加了卡片视图和列表视图的切换功能
- 添加了设备默认图片功能，新建或编辑设备时自动加载默认图片
- 优化了设备列表的搜索、筛选和分页功能
- 更新了设备详情和编辑页面的样式
- 调整了产品列表和设备列表的关联逻辑
---
 apps/web-antd/src/layouts/basic.vue           |   7 +-
 apps/web-antd/src/store/device.ts             |  14 +
 .../components/running/FunctionPanel.vue      |   1 +
 .../src/views/device/device/device-drawer.vue |  23 +-
 .../src/views/device/device/index.vue         | 770 +++++++++++++-----
 .../src/views/device/product/detail/index.vue |   8 +-
 .../src/views/device/product/index.vue        |  76 +-
 .../views/device/product/product-drawer.vue   |  22 +-
 apps/web-antd/vite.config.mts                 |   3 +-
 9 files changed, 670 insertions(+), 254 deletions(-)

diff --git a/apps/web-antd/src/layouts/basic.vue b/apps/web-antd/src/layouts/basic.vue
index 24ef10b..83f0676 100644
--- a/apps/web-antd/src/layouts/basic.vue
+++ b/apps/web-antd/src/layouts/basic.vue
@@ -28,12 +28,14 @@ import { TenantToggle } from '#/components/tenant-toggle';
 import { $t } from '#/locales';
 import { resetRoutes } from '#/router';
 import { useAuthStore, useNotifyStore } from '#/store';
+import { useDeviceStore } from '#/store/device';
 import { useTenantStore } from '#/store/tenant';
 import LoginForm from '#/views/_core/authentication/login.vue';
 
 const userStore = useUserStore();
 const authStore = useAuthStore();
 const accessStore = useAccessStore();
+const deviceStore = useDeviceStore();
 const router = useRouter();
 const { destroyWatermark, updateWatermark } = useWatermark();
 
@@ -106,7 +108,10 @@ async function handleLogout() {
 }
 
 const notifyStore = useNotifyStore();
-onMounted(() => notifyStore.startListeningMessage());
+onMounted(() => {
+  notifyStore.startListeningMessage();
+  deviceStore.updateDefaultDeviceImgId(); // 这样调用
+});
 
 function handleViewAll() {
   message.warning('暂未开放');
diff --git a/apps/web-antd/src/store/device.ts b/apps/web-antd/src/store/device.ts
index 7729dcc..20c4394 100644
--- a/apps/web-antd/src/store/device.ts
+++ b/apps/web-antd/src/store/device.ts
@@ -1,18 +1,21 @@
 import { defineStore } from 'pinia';
 
 import { deviceInfo } from '#/api/device/device';
+import { configInfoByKey } from '#/api/system/config';
 
 export const useDeviceStore = defineStore('device', {
   state: () => ({
     currentDevice: {} as any,
     tabActiveKey: 'BasicInfo',
     deviceCount: 0,
+    defaultDeviceImgId: '',
   }),
 
   getters: {
     getCurrentDevice: (state) => state.currentDevice,
     getTabActiveKey: (state) => state.tabActiveKey,
     getDeviceCount: (state) => state.deviceCount,
+    getDefaultDeviceImgId: (state) => state.defaultDeviceImgId,
   },
 
   actions: {
@@ -32,6 +35,17 @@ export const useDeviceStore = defineStore('device', {
       this.currentDevice.deviceState = state;
     },
 
+    async updateDefaultDeviceImgId() {
+      try {
+        const res = await configInfoByKey('device.defaultDeviceImgId');
+        this.defaultDeviceImgId = res;
+        return res;
+      } catch (error) {
+        console.error('获取设备默认图片失败:', error);
+        throw error;
+      }
+    },
+
     async getDetail(id: string) {
       try {
         const res = await deviceInfo(id);
diff --git a/apps/web-antd/src/views/device/device/detail/components/running/FunctionPanel.vue b/apps/web-antd/src/views/device/device/detail/components/running/FunctionPanel.vue
index 1fccd0c..60c07c6 100644
--- a/apps/web-antd/src/views/device/device/detail/components/running/FunctionPanel.vue
+++ b/apps/web-antd/src/views/device/device/detail/components/running/FunctionPanel.vue
@@ -103,6 +103,7 @@ const loadList = async () => {
       productKey: props.deviceInfo.productObj.productKey,
       msgId: messageId.value?.trim() || undefined,
       funcId: selectedFuncId.value || undefined,
+      orderByColumn: 'createTime',
       isAsc: 'desc',
       pageNum: pagination.value.current,
       pageSize: pagination.value.pageSize,
diff --git a/apps/web-antd/src/views/device/device/device-drawer.vue b/apps/web-antd/src/views/device/device/device-drawer.vue
index c83d720..23ecba9 100644
--- a/apps/web-antd/src/views/device/device/device-drawer.vue
+++ b/apps/web-antd/src/views/device/device/device-drawer.vue
@@ -8,12 +8,15 @@ import { cloneDeep } from '@vben/utils';
 import { useVbenForm } from '#/adapter/form';
 import { deviceAdd, deviceInfo, deviceUpdate } from '#/api/device/device';
 import { productList } from '#/api/device/product';
+import { useDeviceStore } from '#/store/device';
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { drawerSchema } from './data';
 
 const emit = defineEmits<{ reload: [] }>();
 
+const deviceStore = useDeviceStore();
+
 const isUpdate = ref(false);
 const title = computed(() => {
   return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
@@ -35,10 +38,12 @@ const [BasicForm, formApi] = useVbenForm({
   wrapperClass: 'grid-cols-2',
 });
 
-const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff({
-  initializedGetter: defaultFormValueGetter(formApi),
-  currentGetter: defaultFormValueGetter(formApi),
-});
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
 
 const [BasicDrawer, drawerApi] = useVbenDrawer({
   // 在这里更改宽度
@@ -63,7 +68,10 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
     if (isUpdate.value && id) {
       const record = await deviceInfo(id);
       await formApi.setValues(record);
+    } else {
+      await formApi.setFieldValue('imgId', deviceStore.getDefaultDeviceImgId);
     }
+
     await markInitialized();
 
     drawerApi.drawerLoading(false);
@@ -80,6 +88,9 @@ async function handleConfirm() {
     }
     // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
     const data = cloneDeep(await formApi.getValues());
+    if (data.imgId === undefined || data.imgId === '') {
+      data.imgId = deviceStore.getDefaultDeviceImgId;
+    }
     await (isUpdate.value ? deviceUpdate(data) : deviceAdd(data));
     resetInitialized();
     emit('reload');
@@ -120,7 +131,9 @@ async function getProductOptionList() {
           onChange: (value: number | string) => {
             // 当产品选择变化时，自动设置设备图片
             if (value) {
-              const selectedProduct = productOptions.find((option) => option.value === value);
+              const selectedProduct = productOptions.find(
+                (option) => option.value === value,
+              );
               formApi.setFieldValue('imgId', selectedProduct?.imgId || '');
             }
           },
diff --git a/apps/web-antd/src/views/device/device/index.vue b/apps/web-antd/src/views/device/device/index.vue
index ec317c7..0c82c0b 100644
--- a/apps/web-antd/src/views/device/device/index.vue
+++ b/apps/web-antd/src/views/device/device/index.vue
@@ -1,274 +1,634 @@
-<script setup lang="ts">
-import type { VbenFormProps } from '@vben/common-ui';
-
-import type { VxeGridProps } from '#/adapter/vxe-table';
+<script setup lang="ts" name="DeviceIndex">
 import type { DeviceForm } from '#/api/device/device/model';
 
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-
-import { Page, useVbenDrawer } from '@vben/common-ui';
-import { getVxePopupContainer } from '@vben/utils';
-
-import { AppstoreOutlined, MenuOutlined } from '@ant-design/icons-vue';
 import {
+  h,
+  nextTick,
+  onActivated,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+} from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { EllipsisText, Page, useVbenDrawer } from '@vben/common-ui';
+
+import {
+  AppstoreOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  MenuOutlined,
+  ReloadOutlined,
+} from '@ant-design/icons-vue';
+import {
+  Button,
+  Card,
+  Form,
+  FormItem,
+  Input,
+  List,
+  ListItem,
   Modal,
+  Pagination,
   Popconfirm,
   RadioButton,
   RadioGroup,
+  Select,
+  SelectOption,
   Space,
+  Table,
   Tag,
 } from 'ant-design-vue';
 
-import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
 import { deviceExport, deviceList, deviceRemove } from '#/api/device/device';
 import { productList } from '#/api/device/product';
 import { deviceStateOptions, deviceTypeOptions } from '#/constants/dicts';
 import { commonDownloadExcel } from '#/utils/file/download';
 
-import { columns, querySchema } from './data';
 import deviceDrawer from './device-drawer.vue';
 
 const router = useRouter();
+const route = useRoute();
+// 视图模式：card | list
+const activeListType = ref<'card' | 'list'>('card');
+
+// 搜索表单
+const formModel = reactive({
+  deviceKey: undefined as string | undefined,
+  deviceName: undefined as string | undefined,
+  productId: undefined as string | undefined,
+  deviceState: undefined as string | undefined,
+  deviceType: undefined as string | undefined,
+});
 
 const productOptions = ref<{ label: string; value: string }[]>([]);
 
-const activeListType = ref('list');
+// 表格/卡片数据与分页
+const loading = ref(false);
+const dataSource = ref<Required<DeviceForm>[]>([] as any);
+const pagination = reactive({
+  current: 1,
+  pageSize: 12,
+  total: 0,
+});
 
-const changeListType = (e: any) => {
-  console.log('切换表格类型', e.target.value);
+const pageSizeOptions = ref<string[]>(['12', '24', '36', '48', '60']);
+
+// 选中行
+const selectedRowKeys = ref<(number | string)[]>([]);
+const onSelectChange = (keys: (number | string)[]) => {
+  selectedRowKeys.value = keys;
 };
 
-const formOptions: VbenFormProps = {
-  collapsed: true,
-  commonConfig: {
-    labelWidth: 80,
-    componentProps: {
-      allowClear: true,
+// 列定义
+const columns = [
+  { title: '设备KEY', dataIndex: 'deviceKey', align: 'center' },
+  { title: '设备名称', dataIndex: 'deviceName', align: 'center' },
+  {
+    title: '所属产品',
+    dataIndex: ['productObj', 'productName'],
+    align: 'center',
+  },
+  { title: '设备类型', dataIndex: 'deviceType', width: 100, align: 'center' },
+  { title: '设备状态', dataIndex: 'deviceState', width: 100, align: 'center' },
+  { title: '描述', dataIndex: 'description', align: 'center' },
+  { title: '操作', key: 'action', width: 200, fixed: 'right', align: 'center' },
+];
+
+const getDeviceTypeLabel = (value?: string) => {
+  const match = deviceTypeOptions.find((option) => option.value === value);
+  return match ? match.label : '-';
+};
+
+const getDeviceStateMeta = (value?: string) => {
+  const match = deviceStateOptions.find((option) => option.value === value);
+  return {
+    label: match ? match.label : '-',
+    type: match ? match.type : 'default',
+  } as any;
+};
+
+const fetchData = async () => {
+  try {
+    loading.value = true;
+    const { rows = [], total = 0 } = (await deviceList({
+      pageNum: pagination.current,
+      pageSize: pagination.pageSize,
+      ...formModel,
+    })) as any;
+    dataSource.value = rows as any;
+    pagination.total = total as number;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const onSearch = () => {
+  pagination.current = 1;
+  fetchData();
+};
+
+const onReset = () => {
+  formModel.deviceKey = undefined;
+  formModel.deviceName = undefined;
+  formModel.productId = undefined;
+  formModel.deviceType = undefined;
+  formModel.deviceState = undefined;
+  pagination.current = 1;
+  fetchData();
+};
+
+const handleAdd = () => {
+  drawerApi.setData({});
+  drawerApi.open();
+};
+
+const handleView = async (row: any) => {
+  router.push(`/device/device/detail/${row.id}`);
+};
+
+const handleEdit = async (row: any) => {
+  drawerApi.setData({ id: row.id });
+  drawerApi.open();
+};
+
+const handleDelete = async (row: Required<DeviceForm>) => {
+  await deviceRemove(row.id);
+  await fetchData();
+};
+
+const handleMultiDelete = () => {
+  if (selectedRowKeys.value.length === 0) return;
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${selectedRowKeys.value.length}条记录吗？`,
+    onOk: async () => {
+      await deviceRemove(selectedRowKeys.value);
+      selectedRowKeys.value = [];
+      await fetchData();
     },
-  },
-  schema: querySchema(),
-  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
-  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
-  // 不需要直接删除
-  // fieldMappingTime: [
-  //  [
-  //    'createTime',
-  //    ['params[beginTime]', 'params[endTime]'],
-  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
-  //  ],
-  // ],
+  });
 };
 
-const gridOptions: VxeGridProps = {
-  checkboxConfig: {
-    // 高亮
-    highlight: true,
-    // 翻页时保留选中状态
-    reserve: true,
-    // 点击行选中
-    // trigger: 'row',
-  },
-  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
-  // columns: columns(),
-  columns,
-  height: 'auto',
-  keepSource: true,
-  pagerConfig: {},
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues = {}) => {
-        return await deviceList({
-          pageNum: page.currentPage,
-          pageSize: page.pageSize,
-          ...formValues,
-        });
-      },
-    },
-  },
-  rowConfig: {
-    keyField: 'id',
-  },
-  // 表格全局唯一表示 保存列配置需要用到
-  id: 'device-device-index',
+const handleDownloadExcel = () => {
+  commonDownloadExcel(deviceExport, '设备数据', { ...formModel }, {});
 };
 
-const [BasicTable, tableApi] = useVbenVxeGrid({
-  formOptions,
-  gridOptions,
+const tableScrollHeight = ref(400);
+
+const updateTableHeight = () => {
+  nextTick(() => {
+    setTimeout(() => {
+      const container: any = document.querySelector('.table-container');
+      if (container) {
+        const height = container?.offsetHeight - 40;
+        tableScrollHeight.value = Math.max(height, 200);
+      }
+    }, 100);
+  });
+};
+
+const loadProducts = async () => {
+  const res = await productList({ pageNum: 1, pageSize: 1000 } as any);
+  productOptions.value = (res?.rows || []).map((item: any) => ({
+    label: item.productName,
+    value: item.id,
+  }));
+};
+// 2. 在顶层直接调用
+onActivated(() => {
+  console.log('组件被激活了！');
+  // 这里可以执行重新加载数据等操作
+});
+
+onMounted(async () => {
+  console.log('onMounted');
+  updateTableHeight();
+  window.addEventListener('resize', updateTableHeight);
+  await Promise.all([loadProducts(), fetchData()]);
+  if (
+    route.query.productId !== undefined &&
+    route.query.productId !== formModel.productId
+  ) {
+    formModel.productId = route.query.productId as string;
+    onSearch();
+  }
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateTableHeight);
 });
 
 const [DeviceDrawer, drawerApi] = useVbenDrawer({
   connectedComponent: deviceDrawer,
 });
-
-function handleAdd() {
-  drawerApi.setData({});
-  drawerApi.open();
-}
-
-// 查看设备详情
-async function handleView(row: any) {
-  router.push(`/device/device/detail/${row.id}`);
-}
-
-// 编辑设备
-async function handleEdit(row: any) {
-  drawerApi.setData({ id: row.id });
-  drawerApi.open();
-}
-
-async function handleDelete(row: Required<DeviceForm>) {
-  await deviceRemove(row.id);
-  await tableApi.query();
-}
-
-function handleMultiDelete() {
-  const rows = tableApi.grid.getCheckboxRecords();
-  const ids = rows.map((row: Required<DeviceForm>) => row.id);
-  Modal.confirm({
-    title: '提示',
-    okType: 'danger',
-    content: `确认删除选中的${ids.length}条记录吗？`,
-    onOk: async () => {
-      await deviceRemove(ids);
-      await tableApi.query();
-    },
-  });
-}
-
-function handleDownloadExcel() {
-  commonDownloadExcel(deviceExport, '设备数据', tableApi.formApi.form.values, {
-    fieldMappingTime: formOptions.fieldMappingTime,
-  });
-}
-
-async function getProductOptionList() {
-  try {
-    const res = await productList({
-      pageNum: 1,
-      pageSize: 1000,
-    });
-    productOptions.value = res.rows.map((item) => ({
-      label: item.productName,
-      value: item.id,
-    }));
-    const placeholder = productOptions.value.length > 0 ? '请选择' : '暂无产品';
-    tableApi.formApi.updateSchema([
-      {
-        componentProps: {
-          options: productOptions.value || [],
-          placeholder,
-        },
-        fieldName: 'productId',
-      },
-    ]);
-  } catch (error) {
-    console.error('获取产品列表失败:', error);
-  }
-}
-
-getProductOptionList();
 </script>
 
 <template>
-  <Page :auto-content-height="true">
-    <BasicTable table-title="设备列表">
-      <template #toolbar-tools>
+  <Page :auto-content-height="true" content-class="flex flex-col">
+    <Space class="bg-background main-box-header mb-3 rounded-lg p-5">
+      <Form layout="inline" :model="formModel">
+        <FormItem label="设备KEY">
+          <Input
+            v-model:value="formModel.deviceKey"
+            allow-clear
+            placeholder="请输入"
+          />
+        </FormItem>
+        <FormItem label="设备名称">
+          <Input
+            v-model:value="formModel.deviceName"
+            allow-clear
+            placeholder="请输入"
+          />
+        </FormItem>
+        <FormItem label="所属产品">
+          <Select
+            v-model:value="formModel.productId"
+            allow-clear
+            style="min-width: 200px"
+          >
+            <SelectOption
+              v-for="opt in productOptions"
+              :key="opt.value"
+              :value="opt.value"
+            >
+              {{ opt.label }}
+            </SelectOption>
+          </Select>
+        </FormItem>
+        <FormItem label="设备类型">
+          <Select
+            v-model:value="formModel.deviceType"
+            allow-clear
+            style="min-width: 160px"
+          >
+            <SelectOption
+              v-for="opt in deviceTypeOptions"
+              :key="opt.value"
+              :value="opt.value"
+            >
+              {{ opt.label }}
+            </SelectOption>
+          </Select>
+        </FormItem>
+        <FormItem label="设备状态">
+          <Select
+            v-model:value="formModel.deviceState"
+            allow-clear
+            style="min-width: 120px"
+          >
+            <SelectOption
+              v-for="opt in deviceStateOptions"
+              :key="opt.value"
+              :value="opt.value"
+            >
+              {{ opt.label }}
+            </SelectOption>
+          </Select>
+        </FormItem>
+        <div class="search-box">
+          <FormItem>
+            <Space>
+              <Button type="primary" @click="onSearch">查询</Button>
+              <Button @click="onReset">重置</Button>
+            </Space>
+          </FormItem>
+        </div>
+      </Form>
+    </Space>
+    <div class="bg-background main-box-content">
+      <Space class="mb-2 flex justify-between p-2 pb-0">
+        <div class="mr-1 pl-1 text-[1rem]">设备列表</div>
         <Space>
-          <a-button
+          <Button
             v-access:code="['device:device:export']"
             @click="handleDownloadExcel"
           >
             {{ $t('pages.common.export') }}
-          </a-button>
-          <a-button
-            :disabled="!vxeCheckboxChecked(tableApi)"
+          </Button>
+          <Button
+            :disabled="selectedRowKeys.length === 0"
             danger
             type="primary"
             v-access:code="['device:device:remove']"
             @click="handleMultiDelete"
           >
             {{ $t('pages.common.delete') }}
-          </a-button>
-          <a-button
+          </Button>
+          <Button
             type="primary"
             v-access:code="['device:device:add']"
             @click="handleAdd"
           >
             {{ $t('pages.common.add') }}
-          </a-button>
+          </Button>
           <RadioGroup
             v-model:value="activeListType"
             option-type="button"
             button-style="solid"
-            @change="changeListType"
           >
             <RadioButton value="card"><AppstoreOutlined /></RadioButton>
             <RadioButton value="list"><MenuOutlined /></RadioButton>
           </RadioGroup>
+          <Button :loading="loading" @click="fetchData">
+            <ReloadOutlined />
+          </Button>
         </Space>
-      </template>
-      <template #deviceType="{ row }">
-        <Tag color="processing">
-          {{
-            deviceTypeOptions.find((option) => option.value === row.deviceType)
-              ?.label
-          }}
-        </Tag>
-      </template>
-      <template #deviceState="{ row }">
-        <Tag
-          :color="
-            deviceStateOptions.find(
-              (option) => option.value === row.deviceState,
-            )?.type
+      </Space>
+      <div class="table-container p-2 pb-0 pt-0">
+        <template v-if="activeListType === 'list'">
+          <Table
+            class="content-table"
+            row-key="id"
+            :loading="loading"
+            :columns="columns"
+            :data-source="dataSource"
+            size="small"
+            :scroll="{ y: tableScrollHeight }"
+            :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
+            :pagination="false"
+          >
+            <template #bodyCell="{ column, record, text }">
+              <template v-if="column.dataIndex === 'deviceType'">
+                <Tag color="processing">{{ getDeviceTypeLabel(text) }}</Tag>
+              </template>
+              <template v-else-if="column.dataIndex === 'deviceState'">
+                <Tag :color="getDeviceStateMeta(text).type">
+                  {{ getDeviceStateMeta(text).label }}
+                </Tag>
+              </template>
+              <template v-else-if="column.key === 'action'">
+                <Space>
+                  <ghost-button
+                    v-access:code="['device:device:view']"
+                    @click.stop="handleView(record)"
+                  >
+                    详情
+                  </ghost-button>
+                  <ghost-button
+                    v-access:code="['device:device:edit']"
+                    @click.stop="handleEdit(record)"
+                  >
+                    {{ $t('pages.common.edit') }}
+                  </ghost-button>
+                  <Popconfirm
+                    title="确认删除？"
+                    @confirm="handleDelete(record)"
+                  >
+                    <ghost-button
+                      danger
+                      v-access:code="['device:device:remove']"
+                    >
+                      {{ $t('pages.common.delete') }}
+                    </ghost-button>
+                  </Popconfirm>
+                </Space>
+              </template>
+            </template>
+          </Table>
+        </template>
+        <template v-else>
+          <List
+            :loading="loading"
+            class="content-list"
+            :grid="{ gutter: 20, xs: 1, sm: 1, md: 2, lg: 3, xl: 4, xxl: 4 }"
+            :data-source="dataSource"
+          >
+            <template #renderItem="{ item }">
+              <ListItem>
+                <Card
+                  class="relative cursor-pointer hover:shadow-lg"
+                  @click.stop="handleView(item)"
+                >
+                  <div class="text-muted-foreground flex text-sm">
+                    <div class="card-img">
+                      <img
+                        :src="item.imgUrl || '/images/device/device-card.png'"
+                        alt="设备图片"
+                        class="h-full w-full"
+                      />
+                    </div>
+                    <div class="ml-3 min-w-0 flex-1">
+                      <!-- <div class="mb-1 text-lg font-medium">
+                        {{ item.deviceName || '-' }}
+                      </div> -->
+                      <EllipsisText class="mb-1 text-lg font-medium">
+                        {{ item.deviceName || '-' }}
+                      </EllipsisText>
+                      <div>
+                        所属产品：{{ item.productObj?.productName || '-' }}
+                      </div>
+                      <div>
+                        设备类型：{{ getDeviceTypeLabel(item.deviceType) }}
+                      </div>
+                      <div
+                        class="card-status"
+                        :class="
+                          getDeviceStateMeta(item.deviceState).type ===
+                          'success'
+                            ? 'enabled'
+                            : 'disabled'
+                        "
+                      >
+                        {{ getDeviceStateMeta(item.deviceState).label }}
+                      </div>
+                    </div>
+                  </div>
+                  <template #actions>
+                    <Button
+                      type="link"
+                      v-access:code="['device:device:edit']"
+                      :icon="h(EditOutlined)"
+                      @click.stop="handleEdit(item)"
+                    >
+                      {{ $t('pages.common.edit') }}
+                    </Button>
+                    <Popconfirm
+                      title="确认删除？"
+                      @confirm.stop="handleDelete(item)"
+                    >
+                      <Button
+                        type="link"
+                        :icon="h(DeleteOutlined)"
+                        danger
+                        @click.stop
+                        v-access:code="['device:device:remove']"
+                      >
+                        {{ $t('pages.common.delete') }}
+                      </Button>
+                    </Popconfirm>
+                  </template>
+                </Card>
+              </ListItem>
+            </template>
+          </List>
+        </template>
+      </div>
+      <div class="flex justify-end p-2">
+        <Pagination
+          :current="pagination.current"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-size-options="pageSizeOptions"
+          :show-total="(total) => `共 ${total} 条记录`"
+          show-size-changer
+          size="small"
+          @change="
+            (p, s) => {
+              pagination.current = p;
+              pagination.pageSize = s;
+              fetchData();
+            }
           "
-        >
-          {{
-            deviceStateOptions.find(
-              (option) => option.value === row.deviceState,
-            )?.label
-          }}
-        </Tag>
-      </template>
-      <template #action="{ row }">
-        <Space>
-          <ghost-button
-            v-access:code="['device:device:view']"
-            @click.stop="handleView(row)"
-          >
-            详情
-          </ghost-button>
-          <ghost-button
-            v-access:code="['device:device:edit']"
-            @click.stop="handleEdit(row)"
-          >
-            {{ $t('pages.common.edit') }}
-          </ghost-button>
-          <Popconfirm
-            :get-popup-container="getVxePopupContainer"
-            placement="left"
-            title="确认删除？"
-            @confirm="handleDelete(row)"
-          >
-            <ghost-button
-              danger
-              v-access:code="['device:device:remove']"
-              @click.stop=""
-            >
-              {{ $t('pages.common.delete') }}
-            </ghost-button>
-          </Popconfirm>
-        </Space>
-      </template>
-    </BasicTable>
-    <DeviceDrawer @reload="tableApi.query()" />
+          @show-size-change="
+            (p, s) => {
+              pagination.current = 1;
+              pagination.pageSize = s;
+              fetchData();
+            }
+          "
+        />
+      </div>
+    </div>
+
+    <DeviceDrawer @reload="fetchData()" />
   </Page>
 </template>
 
-<style>
-.ant-radio-button-wrapper {
-  padding: 0 10px;
+<style scoped lang="scss">
+.main-box-header {
+  width: 100%;
+  padding: 20px;
+  padding-bottom: 8px;
+}
+
+:deep(.main-box-header .ant-space-item) {
+  width: 100%;
+}
+
+.search-box {
+  margin-left: auto;
+}
+
+.main-box-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.table-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden auto; // 防止内容溢出
+}
+
+.content-table {
+  flex: 1;
+  overflow: hidden;
+  border: 1px solid hsl(var(--border)) !important;
+  border-radius: 6px;
+}
+
+:deep(.ant-pagination) {
+  position: relative;
+  width: 100%;
+  text-align: right;
+
+  .ant-pagination-total-text {
+    position: absolute;
+    left: 5px;
+  }
+
+  .ant-pagination-options {
+    position: absolute;
+    left: 95px;
+  }
+}
+
+:deep(.ant-form-inline .ant-form-item) {
+  margin-bottom: 12px;
+}
+
+:deep(.ant-table .ant-table-tbody > tr.ant-table-row-selected td) {
+  background-color: hsl(var(--accent)) !important;
+}
+
+:deep(.ant-table .ant-table-tbody > tr:hover td) {
+  background-color: hsl(var(--accent-hover)) !important;
+}
+
+.content-list {
+  flex: 1;
+}
+
+.card-img {
+  width: 80px;
+  height: 80px;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+:deep(.ant-list-item) {
+  padding: 12px 0;
+  margin-bottom: 20px !important;
+}
+
+:deep(.ant-card-body) {
+  padding: 25px 20px;
+}
+
+.card-status {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 70px;
+  height: 30px;
+  font-size: 12px;
+  color: #000;
+  text-indent: 10px;
+  border-radius: 0 6px;
+
+  &::after {
+    position: absolute;
+    top: 11px;
+    left: 11px;
+    width: 8px;
+    height: 8px;
+    content: '';
+    border-radius: 50%;
+  }
+
+  &.enabled {
+    background-color: #d9dffd;
+
+    &::after {
+      background-color: hsl(var(--primary));
+    }
+  }
+
+  &.disabled {
+    background-color: #fad7d9;
+
+    &::after {
+      background-color: hsl(var(--destructive));
+    }
+  }
+}
+
+:deep(.ant-card .ant-card-actions > li) {
+  padding: 8px 0 !important;
+  margin: 0 !important;
 }
 </style>
diff --git a/apps/web-antd/src/views/device/product/detail/index.vue b/apps/web-antd/src/views/device/product/detail/index.vue
index 97791a4..7e6ebb9 100644
--- a/apps/web-antd/src/views/device/product/detail/index.vue
+++ b/apps/web-antd/src/views/device/product/detail/index.vue
@@ -23,7 +23,6 @@ const productStore = useProductStore();
 
 const productId = computed(() => route.params.id as string);
 const activeTab = computed(() => productStore.getTabActiveKey);
-const deviceCount = computed(() => productStore.getDeviceCount);
 const currentProduct = computed(() => productStore.getCurrentProduct);
 
 // 加载产品信息
@@ -74,9 +73,9 @@ const handleApplyConfig = async () => {
 // 跳转到设备列表
 const jumpToDevices = () => {
   router.push({
-    path: '/device/instance',
+    path: '/device/device',
     query: {
-      productId: productId.value,
+      productId: currentProduct.value.id,
     },
   });
 };
@@ -148,7 +147,8 @@ onUnmounted(() => {
           <Image :width="55" :src="currentProduct.imgUrl" />
         </div>
         <div class="basic-item">
-          <span>设备数量：</span><a @click="jumpToDevices">{{ deviceCount }}</a>
+          <span>设备数量：</span>
+          <a @click="jumpToDevices">{{ currentProduct.deviceCount }}</a>
         </div>
       </div>
 
diff --git a/apps/web-antd/src/views/device/product/index.vue b/apps/web-antd/src/views/device/product/index.vue
index be40a20..ef7d845 100644
--- a/apps/web-antd/src/views/device/product/index.vue
+++ b/apps/web-antd/src/views/device/product/index.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" name="ProductIndex">
 import type { ProductForm } from '#/api/device/product/model';
 
 import { h, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
@@ -80,9 +80,9 @@ const pageSizeOptions = ref<string[]>(['12', '24', '36', '48', '60']);
 
 // 选中行
 const selectedRowKeys = ref<(number | string)[]>([]);
-function onSelectChange(keys: (number | string)[]) {
+const onSelectChange = (keys: (number | string)[]) => {
   selectedRowKeys.value = keys;
-}
+};
 
 // 列定义
 const columns = [
@@ -95,12 +95,12 @@ const columns = [
   { title: '操作', key: 'action', width: 200, fixed: 'right', align: 'center' },
 ];
 
-function getDeviceTypeLabel(value?: string) {
+const getDeviceTypeLabel = (value?: string) => {
   const match = deviceTypeOptions.find((option) => option.value === value);
   return match ? match.label : '-';
-}
+};
 
-async function fetchData() {
+const fetchData = async () => {
   try {
     loading.value = true;
     const { rows = [], total = 0 } = (await productList({
@@ -113,14 +113,14 @@ async function fetchData() {
   } finally {
     loading.value = false;
   }
-}
+};
 
-function onSearch() {
+const onSearch = () => {
   pagination.current = 1;
   fetchData();
-}
+};
 
-function onReset() {
+const onReset = () => {
   formModel.productKey = undefined;
   formModel.productName = undefined;
   formModel.categoryId = undefined;
@@ -128,30 +128,30 @@ function onReset() {
   formModel.enabled = undefined;
   pagination.current = 1;
   fetchData();
-}
+};
 
-function handleAdd() {
+const handleAdd = () => {
   drawerApi.setData({});
   drawerApi.open();
-}
+};
 
-async function handleView(row: Required<ProductForm>) {
+const handleView = async (row: Required<ProductForm>) => {
   productStore.setCurrent(row);
   productStore.setTabActiveKey('BasicInfo');
   router.push(`/device/product/detail/${row.id}`);
-}
+};
 
-async function handleEdit(row: Required<ProductForm>) {
+const handleEdit = async (row: Required<ProductForm>) => {
   drawerApi.setData({ id: row.id });
   drawerApi.open();
-}
+};
 
-async function handleDelete(row: Required<ProductForm>) {
+const handleDelete = async (row: Required<ProductForm>) => {
   await productRemove(row.id);
   await fetchData();
-}
+};
 
-function handleMultiDelete() {
+const handleMultiDelete = () => {
   if (selectedRowKeys.value.length === 0) return;
   Modal.confirm({
     title: '提示',
@@ -163,18 +163,18 @@ function handleMultiDelete() {
       await fetchData();
     },
   });
-}
+};
 
-function handleDownloadExcel() {
+const handleDownloadExcel = () => {
   commonDownloadExcel(productExport, '设备产品数据', { ...formModel }, {});
-}
+};
 
-async function handleToggleEnabled(row: Required<ProductForm>) {
+const handleToggleEnabled = async (row: Required<ProductForm>) => {
   const next = row.enabled === '1' ? '0' : '1';
   await (productUpdateStatus as any)({ id: row.id, enabled: next });
   message.success(next === '1' ? '已启用' : '已禁用');
   await fetchData();
-}
+};
 
 const tableScrollHeight = ref(400);
 
@@ -191,9 +191,9 @@ const updateTableHeight = () => {
   });
 };
 
-async function loadCategories() {
+const loadCategories = async () => {
   categoryTree.value = await productCategoryTreeList();
-}
+};
 
 onMounted(async () => {
   updateTableHeight();
@@ -272,12 +272,14 @@ const [ProductDrawer, drawerApi] = useVbenDrawer({
             </SelectOption>
           </Select>
         </FormItem>
-        <FormItem>
-          <Space>
-            <Button type="primary" @click="onSearch">查询</Button>
-            <Button @click="onReset">重置</Button>
-          </Space>
-        </FormItem>
+        <div class="search-box">
+          <FormItem>
+            <Space>
+              <Button type="primary" @click="onSearch">查询</Button>
+              <Button @click="onReset">重置</Button>
+            </Space>
+          </FormItem>
+        </div>
       </Form>
     </Space>
     <div class="bg-background main-box-content">
@@ -505,6 +507,14 @@ const [ProductDrawer, drawerApi] = useVbenDrawer({
   padding-bottom: 8px;
 }
 
+:deep(.main-box-header .ant-space-item) {
+  width: 100%;
+}
+
+.search-box {
+  margin-left: auto;
+}
+
 .main-box-content {
   display: flex;
   flex: 1;
diff --git a/apps/web-antd/src/views/device/product/product-drawer.vue b/apps/web-antd/src/views/device/product/product-drawer.vue
index 21e8e36..cce4ce6 100644
--- a/apps/web-antd/src/views/device/product/product-drawer.vue
+++ b/apps/web-antd/src/views/device/product/product-drawer.vue
@@ -8,12 +8,15 @@ import { cloneDeep } from '@vben/utils';
 import { useVbenForm } from '#/adapter/form';
 import { productAdd, productInfo, productUpdate } from '#/api/device/product';
 import { productCategoryTreeList } from '#/api/device/productCategory';
+import { useDeviceStore } from '#/store/device';
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { drawerSchema } from './data';
 
 const emit = defineEmits<{ reload: [] }>();
 
+const deviceStore = useDeviceStore();
+
 const isUpdate = ref(false);
 const title = computed(() => {
   return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
@@ -35,10 +38,12 @@ const [BasicForm, formApi] = useVbenForm({
   wrapperClass: 'grid-cols-2',
 });
 
-const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff({
-  initializedGetter: defaultFormValueGetter(formApi),
-  currentGetter: defaultFormValueGetter(formApi),
-});
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
 
 const [BasicDrawer, drawerApi] = useVbenDrawer({
   // 在这里更改宽度
@@ -55,11 +60,15 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
 
     const { id } = drawerApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
-    formApi.updateSchema([{ componentProps: { disabled: isUpdate.value }, fieldName: 'productKey' }]);
+    formApi.updateSchema([
+      { componentProps: { disabled: isUpdate.value }, fieldName: 'productKey' },
+    ]);
 
     if (isUpdate.value && id) {
       const record = await productInfo(id);
       await formApi.setValues(record);
+    } else {
+      await formApi.setFieldValue('imgId', deviceStore.getDefaultDeviceImgId);
     }
     await markInitialized();
 
@@ -77,6 +86,9 @@ async function handleConfirm() {
     }
     // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
     const data = cloneDeep(await formApi.getValues());
+    if (data.imgId === undefined || data.imgId === '') {
+      data.imgId = deviceStore.getDefaultDeviceImgId;
+    }
     await (isUpdate.value ? productUpdate(data) : productAdd(data));
     resetInitialized();
     emit('reload');
diff --git a/apps/web-antd/vite.config.mts b/apps/web-antd/vite.config.mts
index 49ed448..8709af5 100644
--- a/apps/web-antd/vite.config.mts
+++ b/apps/web-antd/vite.config.mts
@@ -29,7 +29,8 @@ export default defineConfig(async () => {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/api/, ''),
             // mock代理目标地址
-            target: 'http://192.168.1.17:6666',
+            // target: 'http://192.168.1.17:6666',
+            target: 'http://192.168.1.100:6666',
             ws: true,
           },
         },