From b2a8aa545ec9c5474ee49ee3227e64331542aedf Mon Sep 17 00:00:00 2001
From: fhysy <1149505133@qq.com>
Date: Mon, 25 Aug 2025 15:08:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E3=80=81=E8=BF=90=E8=A1=8C=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E3=80=81=E8=AE=BE=E5=A4=87=E6=A8=A1=E6=8B=9F=E3=80=81=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增日志管理组件
- 重构运行状态组件，采用标签页布局
- 新增事件面板组件
- 优化参数模态框，支持数据类型和表单类型联动
- 调整设备模拟组件名称
---
 .../detail/components/DeviceSimulation.vue    |  69 ++
 .../detail/components/LogManagement.vue       | 257 +++++
 .../detail/components/RunningStatus.vue       | 570 +---------
 .../detail/components/running/EventsPanel.vue | 219 ++++
 .../components/running/RealtimePanel.vue      | 481 +++++++++
 .../simulation/FunctionSimulation.vue         | 975 ++++++++++++++++++
 .../src/views/device/device/detail/index.vue  |  30 +-
 .../detail/components/ParameterModal.vue      | 177 +++-
 8 files changed, 2194 insertions(+), 584 deletions(-)
 create mode 100644 apps/web-antd/src/views/device/device/detail/components/DeviceSimulation.vue
 create mode 100644 apps/web-antd/src/views/device/device/detail/components/LogManagement.vue
 create mode 100644 apps/web-antd/src/views/device/device/detail/components/running/EventsPanel.vue
 create mode 100644 apps/web-antd/src/views/device/device/detail/components/running/RealtimePanel.vue
 create mode 100644 apps/web-antd/src/views/device/device/detail/components/simulation/FunctionSimulation.vue

diff --git a/apps/web-antd/src/views/device/device/detail/components/DeviceSimulation.vue b/apps/web-antd/src/views/device/device/detail/components/DeviceSimulation.vue
new file mode 100644
index 0000000..0ca9811
--- /dev/null
+++ b/apps/web-antd/src/views/device/device/detail/components/DeviceSimulation.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { TabPane, Tabs } from 'ant-design-vue';
+
+import FunctionSimulation from './simulation/FunctionSimulation.vue';
+
+interface Props {
+  deviceId: string;
+  deviceInfo: any;
+}
+
+const props = defineProps<Props>();
+
+// 当前激活的tab
+const activeTab = ref('function');
+
+// 获取物模型数据，优先使用设备信息中的物模型，否则使用模拟数据
+const getMetadata = () => {
+  try {
+    const raw = props.deviceInfo?.productObj?.metadata;
+    if (!raw) return { functions: [] } as any;
+    const obj = JSON.parse(raw || '{}');
+    return {
+      functions: obj?.functions || [],
+    };
+  } catch (error) {
+    console.warn('parse metadata error', error);
+    return { functions: [] } as any;
+  }
+};
+
+// 获取当前物模型数据
+const metadata = computed(() => getMetadata());
+
+// 功能列表
+const functionList = computed(() => {
+  return metadata.value.functions || [];
+});
+</script>
+
+<template>
+  <div class="device-simulation">
+    <Tabs v-model:active-key="activeTab">
+      <TabPane key="property" tab="属性">
+        <div>属性功能开发中...</div>
+      </TabPane>
+      <TabPane key="function" tab="功能">
+        <FunctionSimulation
+          :device-id="deviceId"
+          :device-info="deviceInfo"
+          :function-list="functionList"
+        />
+      </TabPane>
+      <TabPane key="event" tab="事件">
+        <div>事件功能开发中...</div>
+      </TabPane>
+      <TabPane key="online" tab="上下线">
+        <div>上下线功能开发中...</div>
+      </TabPane>
+    </Tabs>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.device-simulation {
+  // 样式可以根据需要添加
+}
+</style>
diff --git a/apps/web-antd/src/views/device/device/detail/components/LogManagement.vue b/apps/web-antd/src/views/device/device/detail/components/LogManagement.vue
new file mode 100644
index 0000000..589da6d
--- /dev/null
+++ b/apps/web-antd/src/views/device/device/detail/components/LogManagement.vue
@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import {
+  Button,
+  DatePicker,
+  Empty,
+  Modal,
+  Select,
+  Space,
+  Table,
+  Tag,
+} from 'ant-design-vue';
+import { Dayjs } from 'dayjs';
+
+interface Props {
+  deviceId: string;
+  deviceInfo: any;
+}
+
+const props = defineProps<Props>();
+
+// 查询条件
+const logType = ref<string>('');
+const timeRange = ref<[Dayjs, Dayjs] | undefined>();
+
+// 列表数据
+const loading = ref(false);
+const dataSource = ref<any[]>([]);
+const pagination = ref({ current: 1, pageSize: 10, total: 0 });
+
+// 日志类型选项
+const logTypeOptions = [
+  { label: '全部', value: '' },
+  { label: '上报', value: 'upload' },
+  { label: '下发', value: 'download' },
+];
+
+// 表格列
+const columns = [
+  { title: '类型', dataIndex: 'logType', key: 'logType', width: 120 },
+  { title: '名称内容', dataIndex: 'content', key: 'content', ellipsis: true },
+  { title: '时间', dataIndex: 'timestamp', key: 'timestamp', width: 200 },
+  { title: '操作', key: 'action', width: 100 },
+];
+
+// 详情弹窗
+const viewVisible = ref(false);
+const viewRecord = ref<any>(null);
+
+const openView = (record: any) => {
+  viewRecord.value = record;
+  viewVisible.value = true;
+};
+
+const closeView = () => {
+  viewVisible.value = false;
+  viewRecord.value = null;
+};
+
+// 加载日志列表
+const loadList = async () => {
+  try {
+    loading.value = true;
+    const [start, end] = timeRange.value || [];
+    const params = {
+      deviceId: props.deviceId,
+      startTime: start?.format('YYYY-MM-DD HH:mm:ss'),
+      endTime: end?.format('YYYY-MM-DD HH:mm:ss'),
+      logType: logType.value || undefined,
+      pageNo: pagination.value.current,
+      pageSize: pagination.value.pageSize,
+    };
+    console.log('query logs with', params);
+
+    // TODO: 替换为真实接口
+    const mock = [
+      {
+        id: 1,
+        timestamp: '2025-01-20 10:30:15',
+        logType: '上报',
+        content: '设备启动成功，固件版本：v1.0.0',
+      },
+      {
+        id: 2,
+        timestamp: '2025-01-20 10:30:20',
+        logType: '下发',
+        content: '{"switch": "on"}',
+      },
+      {
+        id: 3,
+        timestamp: '2025-01-20 10:30:25',
+        logType: '上报',
+        content: '网络连接不稳定，重试次数：3',
+      },
+      {
+        id: 4,
+        timestamp: '2025-01-20 10:30:30',
+        logType: '下发',
+        content:
+          '功能执行失败，错误码：E001，错误信息：参数无效功能执行失败，错误码：E001，错误信息：参数无效功能执行失败，错误码：E001，错误信息：参数无效功能执行失败，错误码：E001，错误信息：参数无效',
+      },
+      {
+        id: 5,
+        timestamp: '2025-01-20 10:30:35',
+        logType: '上报',
+        content: '调试信息：设备响应时间 150ms',
+      },
+    ];
+    dataSource.value = mock;
+    pagination.value.total = mock.length;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleSearch = () => {
+  pagination.value.current = 1;
+  loadList();
+};
+
+const handleReset = () => {
+  logType.value = '';
+  timeRange.value = undefined;
+  pagination.value.current = 1;
+  loadList();
+};
+
+const handleTableChange = (page: any) => {
+  pagination.value.current = page.current;
+  pagination.value.pageSize = page.pageSize;
+  loadList();
+};
+
+onMounted(() => {
+  loadList();
+});
+</script>
+
+<template>
+  <div class="log-management">
+    <!-- 查询区 -->
+    <div class="query-bar">
+      <Space>
+        <span>日志类型:</span>
+        <Select
+          v-model:value="logType"
+          :options="logTypeOptions"
+          allow-clear
+          placeholder="请选择日志类型"
+          style="width: 220px"
+        />
+        <span>时间范围:</span>
+        <DatePicker.RangePicker
+          v-model:value="timeRange"
+          :show-time="true"
+          format="YYYY-MM-DD HH:mm:ss"
+          style="width: 360px"
+        />
+        <Button @click="handleReset">重置</Button>
+        <Button type="primary" @click="handleSearch">查询</Button>
+      </Space>
+    </div>
+
+    <!-- 列表 -->
+    <Table
+      :columns="columns"
+      :data-source="dataSource"
+      :loading="loading"
+      :pagination="pagination"
+      row-key="id"
+      @change="handleTableChange"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'logType'">
+          <Tag :color="record.logType === '上报' ? 'blue' : 'green'">
+            {{ record.logType }}
+          </Tag>
+        </template>
+        <template v-if="column.key === 'action'">
+          <Button type="link" size="small" @click="openView(record)">
+            查看
+          </Button>
+        </template>
+      </template>
+    </Table>
+
+    <div v-if="!loading && dataSource.length === 0" class="empty-wrap">
+      <Empty />
+    </div>
+
+    <!-- 查看内容弹窗 -->
+    <Modal
+      v-model:open="viewVisible"
+      title="日志详情"
+      width="720px"
+      @cancel="closeView"
+      :footer="null"
+    >
+      <div class="log-detail">
+        <div class="detail-item">
+          <span class="label">类型:</span>
+          <Tag :color="viewRecord?.logType === '上报' ? 'blue' : 'green'">
+            {{ viewRecord?.logType }}
+          </Tag>
+        </div>
+        <div class="detail-item">
+          <span class="label">时间:</span>
+          <span>{{ viewRecord?.timestamp }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="label">内容:</span>
+          <pre class="content-view">{{ viewRecord?.content }}</pre>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.log-management {
+  .query-bar {
+    margin-bottom: 16px;
+  }
+
+  .empty-wrap {
+    padding: 40px 0;
+    text-align: center;
+  }
+}
+
+.log-detail {
+  .detail-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 16px;
+
+    .label {
+      flex-shrink: 0;
+      width: 40px;
+      font-weight: 500;
+    }
+
+    .content-view {
+      flex: 1;
+      max-height: 300px;
+      padding: 12px;
+      margin: 0;
+      overflow: auto;
+      word-break: break-all;
+      white-space: pre-wrap;
+      background: #fafafa;
+      border-radius: 4px;
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/device/device/detail/components/RunningStatus.vue b/apps/web-antd/src/views/device/device/detail/components/RunningStatus.vue
index a8b41c4..f99942f 100644
--- a/apps/web-antd/src/views/device/device/detail/components/RunningStatus.vue
+++ b/apps/web-antd/src/views/device/device/detail/components/RunningStatus.vue
@@ -1,26 +1,10 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed } from 'vue';
 
-import { EllipsisText } from '@vben/common-ui';
+import { TabPane, Tabs } from 'ant-design-vue';
 
-import { LineChartOutlined, UnorderedListOutlined } from '@ant-design/icons-vue';
-import {
-  Button,
-  Card,
-  Checkbox,
-  Col,
-  DatePicker,
-  Empty,
-  Modal,
-  RadioButton,
-  RadioGroup,
-  Row,
-  Select,
-  Space,
-  Table,
-  Tabs,
-} from 'ant-design-vue';
-import dayjs from 'dayjs';
+import EventsPanel from './running/EventsPanel.vue';
+import RealtimePanel from './running/RealtimePanel.vue';
 
 interface Props {
   deviceId: string;
@@ -29,543 +13,41 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const loading = ref(false);
-const selectedGroup = ref('all');
-const selectedTypes = ref(['R', 'RW']); // 默认选中读写和只读
-const metadata = ref({ properties: [], propertyGroups: [] });
-
-// // 物模型数据
-// const metadata = computed(() => {
-//   if (props.deviceInfo?.productObj?.metadata) {
-//     try {
-//       return JSON.parse(props.deviceInfo.productObj.metadata);
-//     } catch {
-//       return { properties: [], propertyGroups: [] };
-//     }
-//   }
-//   return { properties: [], propertyGroups: [] };
-// });
-
-const getMetadata = () => {
-  let metadataObj = { properties: [], propertyGroups: [] };
-  if (props.deviceInfo?.productObj?.metadata) {
-    metadataObj = JSON.parse(props.deviceInfo.productObj.metadata);
-  }
-  metadataObj.properties = metadataObj.properties.map((prop: any) => ({
-    ...prop,
-    value: null,
-    timestamp: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-  }));
-  metadata.value = metadataObj;
-};
-
-// 属性分组选项
-const groupOptions = computed(() => {
-  const groups = metadata.value.propertyGroups || [];
-  return [
-    { label: '全部', value: 'all' },
-    ...groups.map((group: any) => ({
-      label: group.name,
-      value: group.id,
-    })),
-  ];
-});
-
-// 过滤后的属性列表
-const filteredProperties = computed(() => {
-  let properties = metadata.value.properties || [];
-
-  // 按分组筛选
-  if (selectedGroup.value !== 'all') {
-    const group = metadata.value.propertyGroups?.find((g: any) => g.id === selectedGroup.value);
-    if (group?.properties) {
-      const groupPropertyIds = new Set(group.properties.map((p: any) => p.id));
-      properties = properties.filter((p: any) => groupPropertyIds.has(p.id));
-    }
-  }
-
-  // 按读写类型筛选
-  properties = properties.filter((p: any) => {
-    const type = p.expands?.type || 'R';
-    return selectedTypes.value.includes(type);
-  });
-
-  // 为每个属性添加value字段
-  return properties;
-});
-
-// 属性日志弹窗
-const logModalVisible = ref(false);
-const currentProperty = ref<any>(null);
-const logTabActiveKey = ref('list');
-const activeQuickTime = ref('today');
-const logDateRange = ref([dayjs().startOf('day'), dayjs()]);
-const logLoading = ref(false);
-const logData = ref<any[]>([]);
-
-// 日志表格列配置
-const logColumns = [
-  {
-    title: '时间',
-    dataIndex: 'timestamp',
-    key: 'timestamp',
-    width: 200,
-  },
-  {
-    title: '值',
-    dataIndex: 'value',
-    key: 'value',
-    width: 150,
-  },
-  {
-    title: '操作',
-    key: 'action',
-    width: 100,
-  },
-];
-
-// 打开属性日志弹窗
-const openPropertyLog = (property: any) => {
-  currentProperty.value = property;
-  logModalVisible.value = true;
-  loadPropertyLog();
-};
-
-// 加载属性日志数据
-const loadPropertyLog = async () => {
-  if (!currentProperty.value) return;
-
+// 一次性解析物模型并向下传递
+const metadata = computed(() => {
   try {
-    logLoading.value = true;
-    // TODO: 调用API获取属性日志数据
-    // const res = await getPropertyLog({
-    //   deviceId: props.deviceId,
-    //   propertyId: currentProperty.value.id,
-    //   startTime: logDateRange.value[0]?.format('YYYY-MM-DD HH:mm:ss'),
-    //   endTime: logDateRange.value[1]?.format('YYYY-MM-DD HH:mm:ss')
-    // });
-    // logData.value = res.data || [];
-
-    // 模拟数据
-    logData.value = [
-      { timestamp: '2025-08-19 16:19:40', value: '0.5' },
-      { timestamp: '2025-08-19 16:18:40', value: '0.4' },
-      { timestamp: '2025-08-19 16:17:40', value: '0.3' },
-    ];
+    const raw = props.deviceInfo?.productObj?.metadata;
+    if (!raw) return { properties: [], propertyGroups: [], events: [] } as any;
+    const obj = JSON.parse(raw || '{}');
+    return {
+      properties: obj?.properties || [],
+      propertyGroups: obj?.propertyGroups || [],
+      events: obj?.events || [],
+    };
   } catch (error) {
-    console.error('获取属性日志失败:', error);
-  } finally {
-    logLoading.value = false;
+    console.warn('parse metadata error', error);
+    return { properties: [], propertyGroups: [], events: [] } as any;
   }
-};
-
-// 时间范围变化
-const handleDateRangeChange = (dates: any) => {
-  logDateRange.value = dates;
-  if (dates && dates.length === 2) {
-    loadPropertyLog();
-  }
-};
-
-// 快速时间选择
-const handleQuickTimeSelect = (type: string) => {
-  console.log(type);
-  const now = dayjs();
-  switch (type.target.value) {
-    case 'month': {
-      logDateRange.value = [now.subtract(1, 'month'), now];
-      break;
-    }
-    case 'today': {
-      logDateRange.value = [now.startOf('day'), now];
-      break;
-    }
-    case 'week': {
-      logDateRange.value = [now.subtract(7, 'day'), now];
-      break;
-    }
-  }
-  loadPropertyLog();
-};
-
-// 格式化数值显示
-const formatValue = (property: any) => {
-  const { value, valueParams } = property;
-  if (value === undefined || value === null) return '--';
-
-  let displayValue = value;
-
-  if (valueParams?.formType === 'input' && valueParams?.length) {
-    displayValue = value.slice(0, valueParams.length);
-  }
-
-  // 根据数据类型格式化
-  if (valueParams?.formType === 'switch') {
-    return value.toString() === valueParams.trueValue ? valueParams.trueText : valueParams.falseText;
-  }
-
-  if (valueParams?.formType === 'select') {
-    return valueParams.enumConf.find((item: any) => item.value === value)?.text;
-  }
-
-  if (valueParams?.formType === 'time') {
-    return dayjs(value).format(valueParams.format);
-  }
-
-  if (valueParams?.formType === 'number' || valueParams?.formType === 'progress') {
-    if (valueParams?.scale) {
-      return value.toFixed(valueParams.scale);
-    }
-    return value;
-  }
-
-  // displayValue = `${value}`;
-
-  return displayValue;
-};
-
-// 判断是否显示图表
-const canShowChart = (property: any) => {
-  const { valueParams } = property;
-  const numericTypes = ['int', 'float', 'double'];
-  return numericTypes.includes(valueParams?.dataType);
-};
-
-// 关闭日志弹窗
-const closeLogModal = () => {
-  logModalVisible.value = false;
-  currentProperty.value = null;
-  logData.value = [];
-};
-
-// 定时刷新数据
-let refreshTimer: NodeJS.Timeout | null = null;
-
-const generateRandomString = (length: number) => {
-  // 定义字符池
-  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  let result = '';
-  for (let i = 0; i < length; i++) {
-    // 从字符池中随机选取一个字符
-    result += chars.charAt(Math.floor(Math.random() * chars.length));
-  }
-  return result;
-};
-
-const startRefreshTimer = () => {
-  refreshTimer = setInterval(() => {
-    // TODO: 刷新属性值
-    console.log('刷新属性值');
-    metadata.value.properties.forEach((item: any) => {
-      switch (item.valueParams?.dataType) {
-        case 'boolean': {
-          item.value = Math.random() > 0.5 ? 'true' : 'false';
-
-          break;
-        }
-        case 'date': {
-          item.value = Date.now();
-
-          break;
-        }
-        case 'double':
-        case 'float':
-        case 'int':
-        case 'long': {
-          item.value = Math.random() * 100;
-
-          break;
-        }
-        case 'enum': {
-          item.value = item.valueParams.enumConf[Math.floor(Math.random() * item.valueParams.enumConf.length)].value;
-
-          break;
-        }
-        case 'string': {
-          item.value = generateRandomString(Math.floor(Math.random() * 1_000_000));
-
-          break;
-        }
-        // No default
-      }
-      item.timestamp = dayjs().format('YYYY-MM-DD HH:mm:ss');
-    });
-    console.log(metadata.value.properties);
-  }, 3000); // 30秒刷新一次
-};
-
-const stopRefreshTimer = () => {
-  if (refreshTimer) {
-    clearInterval(refreshTimer);
-    refreshTimer = null;
-  }
-};
-
-onMounted(() => {
-  startRefreshTimer();
-  getMetadata();
 });
-
-onUnmounted(() => {
-  stopRefreshTimer();
-});
-
-// 监听设备信息变化
-watch(
-  () => props.deviceInfo,
-  () => {
-    // 设备信息变化时重新加载数据
-  },
-  { deep: true },
-);
 </script>
 
 <template>
   <div class="running-status">
-    <!-- 控制面板 -->
-    <div class="control-panel">
-      <div class="control-item">
-        <span class="control-label">属性分组:</span>
-        <Select
-          v-model:value="selectedGroup"
-          :options="groupOptions"
-          style="width: 200px"
-          placeholder="请选择属性分组"
-        />
-      </div>
-      <div class="control-item">
-        <span class="control-label">访问权限:</span>
-        <Checkbox.Group v-model:value="selectedTypes">
-          <Checkbox value="RW">读写</Checkbox>
-          <Checkbox value="R">只读</Checkbox>
-          <Checkbox value="W">只写</Checkbox>
-        </Checkbox.Group>
-      </div>
-    </div>
-
-    <!-- 属性卡片网格 -->
-    <div class="property-grid">
-      <Row :gutter="16">
-        <Col v-for="property in filteredProperties" :key="property.id" :span="6" class="property-col">
-          <Card class="property-card" :loading="loading">
-            <div class="property-header">
-              <h4 class="property-title">{{ property.name }}</h4>
-              <Button type="text" size="small" class="property-log-btn" @click="openPropertyLog(property)">
-                <UnorderedListOutlined />
-              </Button>
-            </div>
-
-            <div class="property-content">
-              <EllipsisText class="property-value" :line="3" expand>
-                {{ formatValue(property) }}
-              </EllipsisText>
-              <div class="property-unit">
-                {{ property.valueParams?.unit || '' }}
-              </div>
-            </div>
-
-            <div class="property-footer">
-              <span class="property-timestamp">{{ property.timestamp }}</span>
-            </div>
-          </Card>
-        </Col>
-      </Row>
-
-      <!-- 空状态 -->
-      <div v-if="filteredProperties.length === 0" class="empty-state">
-        <Empty description="暂无属性数据" />
-      </div>
-    </div>
-
-    <!-- 属性日志弹窗 -->
-    <Modal
-      v-model:open="logModalVisible"
-      :title="`${currentProperty?.name || ''} - 详情`"
-      width="800px"
-      @cancel="closeLogModal"
-      :footer="null"
-    >
-      <div class="log-modal-content">
-        <!-- 时间选择 -->
-        <div class="time-selection">
-          <Space>
-            <RadioGroup v-model:value="activeQuickTime" @change="handleQuickTimeSelect" button-style="solid">
-              <RadioButton value="today">今日</RadioButton>
-              <RadioButton value="week">近一周</RadioButton>
-              <RadioButton value="month">近一月</RadioButton>
-            </RadioGroup>
-            <!-- <Button
-              type="primary"
-              size="small"
-              @click="handleQuickTimeSelect('today')"
-            >
-              今日
-            </Button>
-            <Button size="small" @click="handleQuickTimeSelect('week')">
-              近一周
-            </Button>
-            <Button size="small" @click="handleQuickTimeSelect('month')">
-              近一月
-            </Button> -->
-            <DatePicker.RangePicker
-              v-model:value="logDateRange"
-              :show-time="true"
-              format="YYYY-MM-DD HH:mm:ss"
-              @change="handleDateRangeChange"
-            />
-          </Space>
-        </div>
-
-        <!-- 标签页 -->
-        <Tabs v-model:active-key="logTabActiveKey" class="log-tabs">
-          <Tabs.TabPane key="list" tab="列表">
-            <Table
-              :columns="logColumns"
-              :data-source="logData"
-              :loading="logLoading"
-              :pagination="false"
-              size="small"
-              row-key="timestamp"
-            >
-              <template #bodyCell="{ column }">
-                <template v-if="column.key === 'action'">
-                  <Button type="link" size="small">查看</Button>
-                </template>
-              </template>
-            </Table>
-          </Tabs.TabPane>
-
-          <Tabs.TabPane v-if="currentProperty && canShowChart(currentProperty)" key="chart" tab="图表">
-            <div class="chart-container">
-              <div class="chart-placeholder">
-                <LineChartOutlined style="font-size: 48px; color: #d9d9d9" />
-                <p>图表功能开发中...</p>
-              </div>
-            </div>
-          </Tabs.TabPane>
-        </Tabs>
-      </div>
-    </Modal>
+    <Tabs type="card">
+      <TabPane key="realtime" tab="实时数据">
+        <RealtimePanel :device-id="props.deviceId" :metadata="metadata" />
+      </TabPane>
+      <TabPane key="events" tab="事件">
+        <EventsPanel :device-id="props.deviceId" :metadata="metadata" />
+      </TabPane>
+    </Tabs>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .running-status {
-  .control-panel {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    margin-bottom: 20px;
-
-    .control-item {
-      display: flex;
-      gap: 12px;
-      align-items: center;
-
-      .control-label {
-        font-weight: 500;
-        color: #262626;
-        white-space: nowrap;
-      }
-    }
+  :deep(.ant-tabs-content-holder) {
+    padding-top: 0;
   }
-
-  .property-grid {
-    .property-col {
-      margin-bottom: 16px;
-    }
-
-    .property-card {
-      height: 100%;
-
-      .property-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 16px;
-
-        .property-title {
-          margin: 0;
-          font-size: 16px;
-          font-weight: 600;
-          color: #262626;
-        }
-
-        .property-log-btn {
-          padding: 4px;
-          color: #8c8c8c;
-
-          &:hover {
-            color: #1890ff;
-          }
-        }
-      }
-
-      .property-content {
-        position: relative;
-
-        .property-value {
-          display: flex;
-          align-items: center;
-          height: 80px;
-          margin-bottom: 12px;
-          font-size: 32px;
-          font-weight: 700;
-          color: #1890ff;
-        }
-
-        .property-unit {
-          position: absolute;
-          right: 0;
-          bottom: 0;
-          font-size: 20px;
-          color: #8c8c8c;
-          text-align: right;
-        }
-
-        .property-info {
-          display: flex;
-          gap: 8px;
-          justify-content: center;
-        }
-      }
-
-      .property-footer {
-        .property-timestamp {
-          font-size: 12px;
-          color: #8c8c8c;
-        }
-      }
-    }
-  }
-
-  .empty-state {
-    padding: 60px 0;
-    text-align: center;
-  }
-}
-
-.log-modal-content {
-  .time-selection {
-    padding: 16px 0;
-  }
-
-  .log-tabs {
-    .chart-container {
-      .chart-placeholder {
-        padding: 60px 0;
-        color: #8c8c8c;
-        text-align: center;
-
-        p {
-          margin: 16px 0 0;
-        }
-      }
-    }
-  }
-}
-
-:deep(.ant-card-body) {
-  padding: 12px;
 }
 </style>
diff --git a/apps/web-antd/src/views/device/device/detail/components/running/EventsPanel.vue b/apps/web-antd/src/views/device/device/detail/components/running/EventsPanel.vue
new file mode 100644
index 0000000..050338e
--- /dev/null
+++ b/apps/web-antd/src/views/device/device/detail/components/running/EventsPanel.vue
@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+
+import {
+  Button,
+  DatePicker,
+  Empty,
+  Input,
+  Modal,
+  Select,
+  Space,
+  Table,
+} from 'ant-design-vue';
+import dayjs, { Dayjs } from 'dayjs';
+
+interface Props {
+  deviceId: string;
+  metadata: any;
+}
+
+const props = defineProps<Props>();
+
+// 查询条件
+const messageId = ref<string>('');
+const timeRange = ref<[Dayjs, Dayjs] | undefined>();
+const selectedEventId = ref<string | undefined>();
+
+// 列表数据
+const loading = ref(false);
+const dataSource = ref<any[]>([]);
+const pagination = ref({ current: 1, pageSize: 10, total: 0 });
+
+// 事件映射（id -> name）
+const eventNameMap = computed<Record<string, string>>(() => {
+  const map: Record<string, string> = {};
+  (props.metadata?.events || []).forEach((e: any) => {
+    map[e.id] = e.name || e.id;
+  });
+  return map;
+});
+
+// 下拉选项（来自物模型）
+const eventOptions = computed(() => {
+  return (props.metadata?.events || []).map((e: any) => ({
+    label: e.name || e.id,
+    value: e.id,
+  }));
+});
+
+// 表格列
+const columns = [
+  { title: '消息ID', dataIndex: 'messageId', key: 'messageId', width: 220 },
+  { title: '名称', dataIndex: 'eventName', key: 'eventName', width: 160 },
+  { title: '标识', dataIndex: 'eventId', key: 'eventId', width: 160 },
+  { title: '时间', dataIndex: 'timestamp', key: 'timestamp', width: 200 },
+  { title: '操作', key: 'action', width: 100 },
+];
+
+// 详情弹窗
+const viewVisible = ref(false);
+const viewRecord = ref<any>(null);
+
+const openView = (record: any) => {
+  viewRecord.value = record;
+  viewVisible.value = true;
+};
+
+const closeView = () => {
+  viewVisible.value = false;
+  viewRecord.value = null;
+};
+
+// 加载事件列表（占位，后续接入API）
+const loadList = async () => {
+  try {
+    loading.value = true;
+    const [start, end] = timeRange.value || [];
+    const params = {
+      deviceId: props.deviceId,
+      startTime: start?.format('YYYY-MM-DD HH:mm:ss'),
+      endTime: end?.format('YYYY-MM-DD HH:mm:ss'),
+      messageId: messageId.value?.trim() || undefined,
+      eventId: selectedEventId.value || undefined,
+      pageNo: pagination.value.current,
+      pageSize: pagination.value.pageSize,
+    };
+    console.log('query events with', params);
+
+    // TODO: 替换为真实接口
+    const eid =
+      selectedEventId.value || props.metadata?.events?.[0]?.id || 'temple';
+    const mock = Array.from({ length: 5 }).map((_, i) => ({
+      messageId: `${Date.now()}_${i}`,
+      eventId: eid,
+      eventName: eventNameMap.value[eid] || '事件',
+      payload: { level: 'info', msg: '模拟事件' },
+      timestamp: dayjs().format('YYYY-MM-DD HH:mm:ss.SSS'),
+    }));
+    dataSource.value = mock;
+    pagination.value.total = mock.length;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleSearch = () => {
+  pagination.value.current = 1;
+  loadList();
+};
+
+const handleReset = () => {
+  messageId.value = '';
+  timeRange.value = undefined;
+  selectedEventId.value = undefined;
+  pagination.value.current = 1;
+  loadList();
+};
+
+const handleTableChange = (page: any) => {
+  pagination.value.current = page.current;
+  pagination.value.pageSize = page.pageSize;
+  loadList();
+};
+
+onMounted(() => {
+  loadList();
+});
+</script>
+
+<template>
+  <div class="events-panel">
+    <!-- 查询区 -->
+    <div class="query-bar">
+      <Space>
+        <span>消息ID:</span>
+        <Input
+          v-model:value="messageId"
+          placeholder="请输入"
+          style="width: 220px"
+          allow-clear
+        />
+        <span>事件:</span>
+        <Select
+          v-model:value="selectedEventId"
+          :options="eventOptions"
+          allow-clear
+          placeholder="请选择事件"
+          style="width: 220px"
+        />
+        <span>时间范围:</span>
+        <DatePicker.RangePicker
+          v-model:value="timeRange"
+          :show-time="true"
+          format="YYYY-MM-DD HH:mm:ss"
+          style="width: 360px"
+        />
+        <Button @click="handleReset">重置</Button>
+        <Button type="primary" @click="handleSearch">查询</Button>
+      </Space>
+    </div>
+
+    <!-- 列表 -->
+    <Table
+      :columns="columns"
+      :data-source="dataSource"
+      :loading="loading"
+      :pagination="pagination"
+      row-key="messageId"
+      @change="handleTableChange"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <Button type="link" size="small" @click="openView(record)">
+            查看
+          </Button>
+        </template>
+      </template>
+    </Table>
+
+    <div v-if="!loading && dataSource.length === 0" class="empty-wrap">
+      <Empty />
+    </div>
+
+    <!-- 查看内容弹窗 -->
+    <Modal
+      v-model:open="viewVisible"
+      title="事件内容"
+      width="720px"
+      @cancel="closeView"
+      :footer="null"
+    >
+      <pre class="json-view">{{
+        JSON.stringify(viewRecord?.payload ?? {}, null, 2)
+      }}</pre>
+    </Modal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.events-panel {
+  .query-bar {
+    margin-bottom: 16px;
+  }
+
+  .empty-wrap {
+    padding: 40px 0;
+    text-align: center;
+  }
+
+  .json-view {
+    max-height: 420px;
+    padding: 12px;
+    margin: 0;
+    overflow: auto;
+    background: #fafafa;
+    border-radius: 4px;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/device/device/detail/components/running/RealtimePanel.vue b/apps/web-antd/src/views/device/device/detail/components/running/RealtimePanel.vue
new file mode 100644
index 0000000..2c76b07
--- /dev/null
+++ b/apps/web-antd/src/views/device/device/detail/components/running/RealtimePanel.vue
@@ -0,0 +1,481 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { EllipsisText } from '@vben/common-ui';
+
+import {
+  LineChartOutlined,
+  UnorderedListOutlined,
+} from '@ant-design/icons-vue';
+import {
+  Button,
+  Card,
+  Checkbox,
+  Col,
+  DatePicker,
+  Empty,
+  Modal,
+  RadioButton,
+  RadioGroup,
+  Row,
+  Select,
+  Space,
+  Table,
+  Tabs,
+} from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+interface Props {
+  deviceId: string;
+  metadata: any;
+}
+
+const props = defineProps<Props>();
+
+const loading = ref(false);
+const selectedGroup = ref('all');
+const selectedTypes = ref(['R', 'RW']);
+
+// 本地运行态属性（不修改入参metadata）
+const runtimeProperties = ref<any[]>([]);
+
+const initRuntime = () => {
+  const properties = (props.metadata?.properties || []).map((prop: any) => ({
+    ...prop,
+    value: null,
+    timestamp: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+  }));
+  runtimeProperties.value = properties;
+};
+
+// 属性分组选项
+const groupOptions = computed(() => {
+  const groups = props.metadata?.propertyGroups || [];
+  return [
+    { label: '全部', value: 'all' },
+    ...groups.map((group: any) => ({ label: group.name, value: group.id })),
+  ];
+});
+
+// 过滤后的属性列表
+const filteredProperties = computed(() => {
+  let properties = [...runtimeProperties.value];
+
+  if (selectedGroup.value !== 'all') {
+    const group = (props.metadata?.propertyGroups || []).find(
+      (g: any) => g.id === selectedGroup.value,
+    );
+    if (group?.properties) {
+      const ids = new Set(group.properties.map((p: any) => p.id));
+      properties = properties.filter((p: any) => ids.has(p.id));
+    }
+  }
+
+  properties = properties.filter((p: any) => {
+    const type = p.expands?.type || 'R';
+    return selectedTypes.value.includes(type);
+  });
+
+  return properties;
+});
+
+// 属性日志弹窗
+const logModalVisible = ref(false);
+const currentProperty = ref<any>(null);
+const logTabActiveKey = ref('list');
+const activeQuickTime = ref('today');
+const logDateRange = ref([dayjs().startOf('day'), dayjs()]);
+const logLoading = ref(false);
+const logData = ref<any[]>([]);
+
+const logColumns = [
+  { title: '时间', dataIndex: 'timestamp', key: 'timestamp', width: 200 },
+  { title: '值', dataIndex: 'value', key: 'value', width: 150 },
+  { title: '操作', key: 'action', width: 100 },
+];
+
+const openPropertyLog = (property: any) => {
+  currentProperty.value = property;
+  logModalVisible.value = true;
+  loadPropertyLog();
+};
+
+const loadPropertyLog = async () => {
+  if (!currentProperty.value) return;
+  try {
+    logLoading.value = true;
+    // TODO: 调用属性日志接口
+    logData.value = [
+      { timestamp: '2025-08-19 16:19:40', value: '0.5' },
+      { timestamp: '2025-08-19 16:18:40', value: '0.4' },
+      { timestamp: '2025-08-19 16:17:40', value: '0.3' },
+    ];
+  } finally {
+    logLoading.value = false;
+  }
+};
+
+const handleDateRangeChange = (dates: any) => {
+  logDateRange.value = dates;
+  if (dates && dates.length === 2) loadPropertyLog();
+};
+
+const handleQuickTimeSelect = (e: any) => {
+  const now = dayjs();
+  switch (e?.target?.value) {
+    case 'month': {
+      logDateRange.value = [now.subtract(1, 'month'), now];
+      break;
+    }
+    case 'week': {
+      logDateRange.value = [now.subtract(7, 'day'), now];
+      break;
+    }
+    default: {
+      logDateRange.value = [now.startOf('day'), now];
+    }
+  }
+  loadPropertyLog();
+};
+
+const formatValue = (property: any) => {
+  const { value, valueParams } = property;
+  if (value === undefined || value === null) return '--';
+
+  let displayValue = value;
+
+  if (valueParams?.formType === 'input' && valueParams?.length) {
+    displayValue = value.slice(0, valueParams.length);
+  }
+
+  if (valueParams?.formType === 'switch') {
+    return value.toString() === valueParams.trueValue
+      ? valueParams.trueText
+      : valueParams.falseText;
+  }
+
+  if (valueParams?.formType === 'select') {
+    return valueParams.enumConf.find((item: any) => item.value === value)?.text;
+  }
+
+  if (valueParams?.formType === 'time') {
+    return dayjs(value).format(valueParams.format);
+  }
+
+  if (
+    valueParams?.formType === 'number' ||
+    valueParams?.formType === 'progress'
+  ) {
+    if (valueParams?.scale) return value.toFixed(valueParams.scale);
+    return value;
+  }
+
+  return displayValue;
+};
+
+const canShowChart = (property: any) => {
+  const { valueParams } = property;
+  const numericTypes = ['int', 'float', 'double'];
+  return numericTypes.includes(valueParams?.dataType);
+};
+
+const closeLogModal = () => {
+  logModalVisible.value = false;
+  currentProperty.value = null;
+  logData.value = [];
+};
+
+let refreshTimer: NodeJS.Timeout | null = null;
+
+const generateRandomString = (length: number) => {
+  const chars =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let result = '';
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return result;
+};
+
+const startRefreshTimer = () => {
+  console.log('开始生成随机数据');
+  refreshTimer = setInterval(() => {
+    runtimeProperties.value.forEach((item: any) => {
+      switch (item.valueParams?.dataType) {
+        case 'boolean': {
+          item.value = Math.random() > 0.5 ? 'true' : 'false';
+          break;
+        }
+        case 'date': {
+          item.value = Date.now();
+          break;
+        }
+        case 'double':
+        case 'float':
+        case 'int':
+        case 'long': {
+          item.value = Math.random() * 100;
+          break;
+        }
+        case 'enum': {
+          item.value =
+            item.valueParams.enumConf[
+              Math.floor(Math.random() * item.valueParams.enumConf.length)
+            ].value;
+          break;
+        }
+        case 'string': {
+          item.value = generateRandomString(
+            Math.floor(Math.random() * 1_000_000),
+          );
+          break;
+        }
+        // No default
+      }
+      item.timestamp = dayjs().format('YYYY-MM-DD HH:mm:ss');
+    });
+  }, 3000);
+};
+
+const stopRefreshTimer = () => {
+  console.log('停止生成随机数据');
+  if (refreshTimer) {
+    clearInterval(refreshTimer);
+    refreshTimer = null;
+  }
+};
+
+onMounted(() => {
+  initRuntime();
+  startRefreshTimer();
+});
+
+onUnmounted(() => {
+  stopRefreshTimer();
+});
+
+watch(
+  () => props.metadata,
+  () => initRuntime(),
+  { deep: true },
+);
+</script>
+
+<template>
+  <div class="realtime-panel">
+    <!-- 控制面板 -->
+    <div class="control-panel">
+      <div class="control-item">
+        <span class="control-label">属性分组:</span>
+        <Select
+          v-model:value="selectedGroup"
+          :options="groupOptions"
+          style="width: 200px"
+          placeholder="请选择属性分组"
+        />
+      </div>
+      <div class="control-item">
+        <span class="control-label">访问权限:</span>
+        <Checkbox.Group v-model:value="selectedTypes">
+          <Checkbox value="RW">读写</Checkbox>
+          <Checkbox value="R">只读</Checkbox>
+          <Checkbox value="W">只写</Checkbox>
+        </Checkbox.Group>
+      </div>
+    </div>
+
+    <!-- 属性卡片网格 -->
+    <div class="property-grid">
+      <Row :gutter="16">
+        <Col
+          v-for="property in filteredProperties"
+          :key="property.id"
+          :span="6"
+          class="property-col"
+        >
+          <Card class="property-card" :loading="loading">
+            <div class="property-header">
+              <h4 class="property-title">{{ property.name }}</h4>
+              <Button
+                type="text"
+                size="small"
+                class="property-log-btn"
+                @click="openPropertyLog(property)"
+              >
+                <UnorderedListOutlined />
+              </Button>
+            </div>
+
+            <div class="property-content">
+              <EllipsisText class="property-value" :line="3" expand>
+                {{ formatValue(property) }}
+              </EllipsisText>
+              <div class="property-unit">
+                {{ property.valueParams?.unit || '' }}
+              </div>
+            </div>
+
+            <div class="property-footer">
+              <span class="property-timestamp">{{ property.timestamp }}</span>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+
+      <div v-if="filteredProperties.length === 0" class="empty-state">
+        <Empty description="暂无属性数据" />
+      </div>
+    </div>
+
+    <!-- 属性日志弹窗 -->
+    <Modal
+      v-model:open="logModalVisible"
+      :title="`${currentProperty?.name || ''} - 详情`"
+      width="800px"
+      @cancel="closeLogModal"
+      :footer="null"
+    >
+      <div class="log-modal-content">
+        <div class="time-selection">
+          <Space>
+            <RadioGroup
+              v-model:value="activeQuickTime"
+              @change="handleQuickTimeSelect"
+              button-style="solid"
+            >
+              <RadioButton value="today">今日</RadioButton>
+              <RadioButton value="week">近一周</RadioButton>
+              <RadioButton value="month">近一月</RadioButton>
+            </RadioGroup>
+            <DatePicker.RangePicker
+              v-model:value="logDateRange"
+              :show-time="true"
+              format="YYYY-MM-DD HH:mm:ss"
+              @change="handleDateRangeChange"
+            />
+          </Space>
+        </div>
+
+        <Tabs v-model:active-key="logTabActiveKey" class="log-tabs">
+          <Tabs.TabPane key="list" tab="列表">
+            <Table
+              :columns="logColumns"
+              :data-source="logData"
+              :loading="logLoading"
+              :pagination="false"
+              size="small"
+              row-key="timestamp"
+            >
+              <template #bodyCell="{ column }">
+                <template v-if="column.key === 'action'">
+                  <Button type="link" size="small">查看</Button>
+                </template>
+              </template>
+            </Table>
+          </Tabs.TabPane>
+
+          <Tabs.TabPane
+            v-if="currentProperty && canShowChart(currentProperty)"
+            key="chart"
+            tab="图表"
+          >
+            <div class="chart-container">
+              <div class="chart-placeholder">
+                <LineChartOutlined style="font-size: 48px; color: #d9d9d9" />
+                <p>图表功能开发中...</p>
+              </div>
+            </div>
+          </Tabs.TabPane>
+        </Tabs>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.realtime-panel {
+  .control-panel {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .control-item {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+
+      .control-label {
+        font-weight: 500;
+        color: #262626;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .property-grid {
+    .property-col {
+      margin-bottom: 16px;
+    }
+
+    .property-card {
+      height: 100%;
+
+      .property-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 16px;
+
+        .property-title {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 600;
+          color: #262626;
+        }
+
+        .property-log-btn {
+          padding: 4px;
+          color: #8c8c8c;
+
+          &:hover {
+            color: #1890ff;
+          }
+        }
+      }
+
+      .property-content {
+        position: relative;
+
+        .property-value {
+          display: flex;
+          align-items: center;
+          height: 80px;
+          margin-bottom: 12px;
+          font-size: 32px;
+          font-weight: 700;
+          color: #1890ff;
+        }
+
+        .property-unit {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          font-size: 20px;
+          color: #8c8c8c;
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  .empty-state {
+    padding: 60px 0;
+    text-align: center;
+  }
+}
+
+:deep(.ant-card-body) {
+  padding: 12px;
+}
+</style>
diff --git a/apps/web-antd/src/views/device/device/detail/components/simulation/FunctionSimulation.vue b/apps/web-antd/src/views/device/device/detail/components/simulation/FunctionSimulation.vue
new file mode 100644
index 0000000..25b4cba
--- /dev/null
+++ b/apps/web-antd/src/views/device/device/detail/components/simulation/FunctionSimulation.vue
@@ -0,0 +1,975 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import {
+  Button,
+  DatePicker,
+  Form,
+  Input,
+  InputNumber,
+  message,
+  Modal,
+  Select,
+  SelectOption,
+  Slider,
+  Switch,
+  Table,
+  TabPane,
+  Tabs,
+  TimePicker,
+} from 'ant-design-vue';
+
+import MonacoEditor from '#/components/MonacoEditor/index.vue';
+import { dataTypeOptions } from '#/constants/dicts';
+
+interface Props {
+  deviceId: string;
+  deviceInfo: any;
+  functionList: any[];
+}
+
+const props = defineProps<Props>();
+
+// 当前选中的功能
+const selectedFunctionId = ref('');
+// 当前模式：simple(精简模式) / advanced(高级模式)
+const currentMode = ref('simple');
+// 表单引用
+const formRef = ref();
+// JSON编辑器内容
+const jsonContent = ref('{}');
+// 参数框内容
+const parameterContent = ref('');
+// 提交结果
+const submitResult = ref('');
+
+// 当前选中的功能详情
+const currentFunction = ref();
+
+// 当前功能的输入参数
+const currentInputs = ref([]);
+
+// 选中的参数行
+const selectedRowKeys = ref([]);
+
+// 表单数据
+const formData = ref({});
+
+// 预检查弹窗相关
+const preCheckVisible = ref(false);
+const preCheckType = ref('');
+const preCheckForm = ref({
+  password: '',
+  phone: '',
+  smsCode: '',
+});
+const preCheckFormRef = ref();
+const smsCodeLoading = ref(false);
+const smsCountdown = ref(0);
+
+// 表格列配置
+const columns = [
+  {
+    title: '参数名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 150,
+  },
+  {
+    title: '输入类型',
+    dataIndex: 'dataType',
+    key: 'dataType',
+    width: 100,
+  },
+  {
+    title: '值',
+    dataIndex: 'value',
+    key: 'value',
+  },
+];
+
+// 表格数据源
+const tableDataSource = computed(() => {
+  return currentInputs.value.map((input) => ({
+    key: input.id,
+    id: input.id,
+    name: input.name,
+    dataType:
+      dataTypeOptions.find(
+        (option) => option.value === input.valueParams.dataType,
+      )?.label || input.valueParams.dataType,
+    required: input.required,
+    formType: input.valueParams.formType,
+    valueParams: input.valueParams,
+  }));
+});
+
+// 表格行选择配置
+const rowSelection = computed(() => ({
+  selectedRowKeys: selectedRowKeys.value,
+  onChange: (selectedKeys: string[]) => {
+    selectedRowKeys.value = selectedKeys;
+  },
+  onSelectAll: (selected: boolean) => {
+    selectedRowKeys.value = selected ? tableDataSource.value.map((row) => row.key) : tableDataSource.value
+      .filter((row) => row.required)
+      .map((row) => row.key);
+  },
+  onSelect: (record: any, selected: boolean) => {
+    if (record.required && !selected) {
+      // 必填项不能取消选择
+      return;
+    }
+
+    selectedRowKeys.value = selected
+      ? [...selectedRowKeys.value, record.key]
+      : selectedRowKeys.value.filter((key) => key !== record.key);
+  },
+  getCheckboxProps: (record: any) => ({
+    disabled: record.required, // 必填项禁用取消选择
+  }),
+}));
+
+// 初始化选中行（默认选中必填项）
+const initializeSelectedRows = () => {
+  selectedRowKeys.value = currentInputs.value
+    .filter((input) => input.required)
+    .map((input) => input.id);
+};
+
+// 初始化表单默认值
+const initializeFormData = () => {
+  const defaultData = {};
+  currentInputs.value.forEach((input) => {
+    const { formType } = input.valueParams;
+
+    // 为不同类型的组件设置默认值
+    switch (formType) {
+      // case 'number': {
+      //   // 数字输入框默认为最小值或0
+      //   defaultData[input.id] = input.valueParams.min || 0;
+      //   break;
+      // }
+      case 'progress': {
+        // 滚动条默认为最小值
+        defaultData[input.id] = input.valueParams.min || 0;
+        break;
+      }
+      // case 'select': {
+      //   // 下拉框默认为第一个选项
+      //   if (
+      //     input.valueParams.enumConf &&
+      //     input.valueParams.enumConf.length > 0
+      //   ) {
+      //     defaultData[input.id] = input.valueParams.enumConf[0].value;
+      //   }
+      //   break;
+      // }
+      case 'switch': {
+        // 开关默认值根据数据类型设置
+        defaultData[input.id] = input.valueParams.dataType === 'boolean' ? false : input.valueParams.falseValue || 'false' ;
+        break;
+      }
+      default: {
+        // 其他类型保持undefined，让用户手动输入
+        break;
+      }
+    }
+  });
+
+  formData.value = { ...defaultData };
+};
+
+// 获取短信验证码
+const getSmsCode = async () => {
+  if (!preCheckForm.value.phone) {
+    message.error('请输入手机号');
+    return;
+  }
+
+  // 手机号格式验证
+  const phoneRegex = /^1[3-9]\d{9}$/;
+  if (!phoneRegex.test(preCheckForm.value.phone)) {
+    message.error('请输入正确的手机号');
+    return;
+  }
+
+  try {
+    smsCodeLoading.value = true;
+    // 模拟发送短信验证码
+    console.log('发送短信验证码到:', preCheckForm.value.phone);
+
+    // 开始倒计时
+    smsCountdown.value = 60;
+    const timer = setInterval(() => {
+      smsCountdown.value--;
+      if (smsCountdown.value <= 0) {
+        clearInterval(timer);
+      }
+    }, 1000);
+
+    message.success('验证码已发送');
+  } catch {
+    message.error('发送验证码失败');
+  } finally {
+    smsCodeLoading.value = false;
+  }
+};
+
+// 监听功能切换，重置表单和内容
+watch(selectedFunctionId, (newFunctionId) => {
+  if (newFunctionId) {
+    // 更新当前功能和输入参数
+    const selectedFunc = props.functionList.find(
+      (func) => func.id === newFunctionId,
+    );
+    if (selectedFunc) {
+      currentFunction.value = selectedFunc;
+      currentInputs.value = selectedFunc.inputs || [];
+      // 初始化选中行
+      initializeSelectedRows();
+      // 初始化表单默认值
+      initializeFormData();
+    } else {
+      resetForm();
+    }
+  } else {
+    resetForm();
+  }
+
+  generateDefaultContent();
+});
+
+// 监听模式切换，重置表单
+watch(currentMode, () => {
+  resetForm();
+  generateDefaultContent();
+});
+
+// 重置表单
+const resetForm = () => {
+  if (formRef.value) {
+    formRef.value.resetFields();
+  }
+  formData.value = {};
+  submitResult.value = '';
+};
+
+// 生成默认内容
+const generateDefaultContent = () => {
+  if (!currentFunction.value) return;
+
+  if (currentMode.value === 'advanced') {
+    // 高级模式：所有属性key:null
+    const params = {};
+    currentInputs.value.forEach((item) => {
+      params[item.id] = null;
+    });
+    jsonContent.value = JSON.stringify(params, null, 2);
+    parameterContent.value = '';
+  } else {
+    // 精简模式：清空参数框
+    parameterContent.value = '';
+  }
+};
+
+// 处理JSON编辑器变化
+const handleJsonChange = (value: string) => {
+  jsonContent.value = value;
+};
+
+// 检查是否需要预检查
+const checkPreCheck = () => {
+  const currentFunc = currentFunction.value;
+  if (currentFunc?.expands?.preCheck) {
+    preCheckType.value = currentFunc.expands.checkType || 'userPassword';
+    preCheckForm.value = {
+      password: '',
+      phone: '',
+      smsCode: '',
+    };
+    preCheckVisible.value = true;
+    return true;
+  }
+  return false;
+};
+
+// 执行实际提交
+const executeSubmit = async (checkValue?: string) => {
+  try {
+    let parameters = {};
+
+    if (currentMode.value === 'simple') {
+      // 检查是否有选中的参数
+      if (selectedRowKeys.value.length === 0) {
+        message.error('请至少选择一个参数');
+        return;
+      }
+
+      // 精简模式：验证表单并获取值
+      await formRef.value.validate();
+      const formValues = formData.value;
+      console.log('表单值:', formValues);
+
+      // 只验证选中的必填参数
+      // for (const input of currentInputs.value) {
+      //   if (
+      //     input.required &&
+      //     selectedRowKeys.value.includes(input.id) &&
+      //     (formValues[input.id] === undefined ||
+      //       formValues[input.id] === null ||
+      //       formValues[input.id] === '' ||
+      //       (typeof formValues[input.id] === 'string' &&
+      //         formValues[input.id].trim() === ''))
+      //   ) {
+      //     message.error(`请填写必填参数：${input.name}`);
+      //     return;
+      //   }
+      // }
+
+      for (const input of currentInputs.value) {
+        if (selectedRowKeys.value.includes(input.id)) {
+          const value = formValues[input.id];
+          const { formType } = input.valueParams;
+
+          // 根据不同的表单类型判断是否为空值
+          let isEmpty = false;
+
+          isEmpty = formType === 'switch'
+            ? value === undefined || value === null  // if 分支
+            : value === undefined || value === null || value === '' ||  // else 分支
+            (typeof value === 'string' && value.trim() === '');
+
+          if (isEmpty) {
+            message.error(`请填写参数：${input.name}`);
+            return;
+          }
+        }
+      }
+      // 只提交选中的参数，构造key:value对象
+      parameters = {};
+      selectedRowKeys.value.forEach((key) => {
+        const value = formValues[key];
+        // 对于开关类型，false 也是有效值，不应该被过滤掉
+        const input = currentInputs.value.find((item) => item.id === key);
+        const isSwitch = input?.valueParams?.formType === 'switch';
+
+        if (
+          (value !== undefined && value !== null) ||
+          (isSwitch && value === false)
+        ) {
+          if (input) {
+            const { dataType, formType } = input.valueParams;
+            let processedValue = value;
+
+            // 根据dataType和formType处理数据类型转换
+            if (formType === 'switch') {
+              if (dataType === 'boolean') {
+                // boolean类型的开关，提交布尔值
+                processedValue = Boolean(value);
+              } else if (dataType === 'string') {
+                // string类型的开关，提交字符串值
+                processedValue = value
+                  ? input.valueParams.trueValue || 'true'
+                  : input.valueParams.falseValue || 'false';
+              }
+            } else if (formType === 'time' && dataType === 'date') {
+              // date类型的时间选择器，提交时间戳
+              if (value && typeof value === 'object' && value.valueOf) {
+                processedValue = value.valueOf(); // 转换为时间戳
+                console.log(
+                  `时间字段 ${key} (date): ${value} -> ${processedValue}`,
+                );
+              } else if (value && typeof value === 'string') {
+                processedValue = new Date(value).getTime(); // 字符串转时间戳
+              }
+            }
+
+            parameters[key] = processedValue;
+          } else {
+            parameters[key] = value;
+          }
+        }
+      });
+    } else {
+      // 高级模式：验证JSON格式
+      try {
+        parameters = JSON.parse(jsonContent.value);
+      } catch {
+        message.error('JSON格式错误，请检查格式');
+        return;
+      }
+    }
+
+    // 构造提交数据格式
+    const submitData: any = {
+      deviceId: props.deviceId,
+      functionId: selectedFunctionId.value,
+      parameter: parameters,
+    };
+
+    // 如果有预检查值，添加到提交数据中
+    if (checkValue) {
+      submitData.checkValue = checkValue;
+    }
+
+    // 更新参数框内容
+    parameterContent.value = JSON.stringify(submitData, null, 2);
+
+    // 模拟API调用
+    console.log('执行功能:', submitData);
+    console.log('选中的参数keys:', selectedRowKeys.value);
+    console.log('提交的参数对象:', parameters);
+
+    // 模拟返回结果
+    const mockResult = {
+      success: true,
+      message: '执行成功',
+      data: {
+        deviceId: props.deviceId,
+        functionId: selectedFunctionId.value,
+        executeTime: new Date().toISOString(),
+        result: 'OK',
+      },
+    };
+
+    submitResult.value = JSON.stringify(mockResult, null, 2);
+    message.success('执行成功');
+  } catch (error) {
+    message.error('执行失败');
+    console.error('执行错误:', error);
+  }
+};
+
+// 主要的提交函数
+const handleSubmit = async () => {
+  // 检查是否需要预检查
+  if (checkPreCheck()) {
+    return; // 显示预检查弹窗，等待用户输入
+  }
+
+  // 直接执行提交
+  await executeSubmit();
+};
+
+// 预检查确认
+const handlePreCheckConfirm = async () => {
+  try {
+    await preCheckFormRef.value.validate();
+
+    let checkValue = '';
+
+    // 根据预检查类型构造checkValue
+    switch (preCheckType.value) {
+      case 'staticPassword': {
+        checkValue = preCheckForm.value.password;
+        break;
+      }
+      case 'userPassword': {
+        checkValue = preCheckForm.value.password;
+        break;
+      }
+      case 'userSms': {
+        checkValue = preCheckForm.value.smsCode;
+        break;
+      }
+    }
+
+    // 关闭预检查弹窗
+    preCheckVisible.value = false;
+
+    // 执行实际提交
+    await executeSubmit(checkValue);
+  } catch (error) {
+    console.error('预检查验证失败:', error);
+  }
+};
+
+// 取消预检查
+const handlePreCheckCancel = () => {
+  preCheckVisible.value = false;
+  preCheckForm.value = {
+    password: '',
+    phone: '',
+    smsCode: '',
+  };
+};
+
+// 获取预检查弹窗标题
+const getPreCheckTitle = () => {
+  switch (preCheckType.value) {
+    case 'staticPassword': {
+      return '固定密码验证';
+    }
+    case 'userPassword': {
+      return '用户密码验证';
+    }
+    case 'userSms': {
+      return '短信验证';
+    }
+    default: {
+      return '身份验证';
+    }
+  }
+};
+
+onMounted(() => {
+  // 初始化选中第一个功能
+  if (props.functionList.length > 0 && !selectedFunctionId.value) {
+    selectedFunctionId.value = props.functionList[0].id;
+    currentFunction.value = props.functionList[0];
+    currentInputs.value = props.functionList[0].inputs || [];
+    // 初始化选中行
+    initializeSelectedRows();
+    // 初始化表单默认值
+    initializeFormData();
+    // 初始化
+    generateDefaultContent();
+  }
+});
+</script>
+
+<template>
+  <div class="function-simulation">
+    <div class="function-content">
+      <!-- 左侧功能列表 -->
+      <div class="function-sidebar">
+        <div class="sidebar-header">功能列表</div>
+        <div
+          v-for="func in functionList"
+          :key="func.id"
+          class="sidebar-item"
+          :class="{ active: selectedFunctionId === func.id }"
+          @click="selectedFunctionId = func.id"
+        >
+          <div class="function-name">{{ func.name }}</div>
+          <div class="function-id">{{ func.id }}</div>
+        </div>
+      </div>
+
+      <!-- 右侧内容区域 -->
+      <div class="function-main">
+        <!-- 模式切换 -->
+        <div class="mode-tabs">
+          <Tabs v-model:active-key="currentMode">
+            <TabPane key="simple" tab="精简模式">
+              <div class="mode-info">
+                <ExclamationCircleOutlined />
+                精简模式下参数只支持输入框的方式录入
+              </div>
+            </TabPane>
+            <TabPane key="advanced" tab="高级模式">
+              <div class="mode-info">
+                <ExclamationCircleOutlined />
+                高级模式下支持JSON格式直接编辑
+              </div>
+            </TabPane>
+          </Tabs>
+        </div>
+
+        <div class="content-area">
+          <!-- 左侧参数输入 -->
+          <div class="input-section">
+            <div v-if="currentMode === 'simple'" class="simple-form">
+              <Form ref="formRef" :model="formData" layout="vertical">
+                <Table
+                  :columns="columns"
+                  :data-source="tableDataSource"
+                  :row-selection="rowSelection"
+                  :pagination="false"
+                  :scroll="{ y: 300 }"
+                  size="small"
+                >
+                  <template #bodyCell="{ column, record }">
+                    <template v-if="column.key === 'name'">
+                      <span>{{ record.name }}</span>
+                    </template>
+                    <template v-else-if="column.key === 'value'">
+                      <Form.Item
+                        :name="record.id"
+                        :rules="
+                          record.required
+                            ? [
+                                {
+                                  required: true,
+                                  message: `请输入${record.name}`,
+                                },
+                              ]
+                            : []
+                        "
+                        style="margin-bottom: 0"
+                      >
+                        <Input
+                          v-if="record?.valueParams?.formType === 'input'"
+                          v-model:value="formData[record.id]"
+                          :maxlength="record?.valueParams?.length || null"
+                          :placeholder="`请输入${record.name}`"
+                          style="width: 100%"
+                        />
+                        <InputNumber
+                          v-else-if="record?.valueParams?.formType === 'number'"
+                          v-model:value="formData[record.id]"
+                          type="number"
+                          :min="record?.valueParams?.min || null"
+                          :max="record?.valueParams?.max || null"
+                          :precision="record?.valueParams?.scale || 0"
+                          :placeholder="`请输入${record.name}`"
+                          style="width: 100%"
+                        />
+                        <Slider
+                          v-else-if="
+                            record?.valueParams?.formType === 'progress'
+                          "
+                          v-model:value="formData[record.id]"
+                          :min="record?.valueParams?.min || 0"
+                          :max="record?.valueParams?.max || 100"
+                          style="width: 99%"
+                        />
+                        <Select
+                          v-else-if="record?.valueParams?.formType === 'select'"
+                          v-model:value="formData[record.id]"
+                          :placeholder="`请选择${record.name}`"
+                          style="width: 100%"
+                        >
+                          <SelectOption
+                            v-for="item in record.valueParams.enumConf"
+                            :key="item.value"
+                            :value="item.value"
+                          >
+                            {{ item.text }}
+                          </SelectOption>
+                        </Select>
+                        <Switch
+                          v-else-if="
+                            record?.valueParams?.formType === 'switch' &&
+                            record.valueParams.dataType === 'boolean'
+                          "
+                          v-model:checked="formData[record.id]"
+                          :checked-children="
+                            record?.valueParams?.trueText || '是'
+                          "
+                          :un-checked-children="
+                            record?.valueParams?.falseText || '否'
+                          "
+                        />
+                        <Switch
+                          v-else-if="
+                            record?.valueParams?.formType === 'switch' &&
+                            record.valueParams.dataType === 'string'
+                          "
+                          v-model:checked="formData[record.id]"
+                          :checked-children="
+                            record?.valueParams?.trueText || '是'
+                          "
+                          :checked-value="
+                            record?.valueParams?.trueValue || true
+                          "
+                          :un-checked-children="
+                            record?.valueParams?.falseText || '否'
+                          "
+                          :un-checked-value="
+                            record?.valueParams?.falseValue || false
+                          "
+                        />
+                        <DatePicker
+                          v-else-if="
+                            record?.valueParams?.formType === 'time' &&
+                            record?.valueParams?.format?.includes('YYYY-MM-DD')
+                          "
+                          v-model:value="formData[record.id]"
+                          :show-time="
+                            record?.valueParams?.format?.includes('HH:mm:ss')
+                          "
+                          :format="record?.valueParams?.format"
+                          :value-format="record?.valueParams?.format"
+                          style="width: 100%"
+                        />
+                        <TimePicker
+                          v-else-if="
+                            record?.valueParams?.formType === 'time' &&
+                            record?.valueParams?.format?.includes('HH:mm:ss')
+                          "
+                          v-model:value="formData[record.id]"
+                          :format="record?.valueParams?.format"
+                          :value-format="record?.valueParams?.format"
+                          style="width: 100%"
+                        />
+                      </Form.Item>
+                    </template>
+                  </template>
+                </Table>
+              </Form>
+            </div>
+
+            <div v-else class="advanced-form">
+              <MonacoEditor
+                v-model="jsonContent"
+                lang="json"
+                theme="vs-dark"
+                style="
+                  height: 300px;
+                  border: 1px solid #d9d9d9;
+                  border-radius: 6px;
+                "
+                @update:model-value="handleJsonChange"
+              />
+            </div>
+
+            <div class="execute-button">
+              <Button type="primary" @click="handleSubmit">执行</Button>
+            </div>
+          </div>
+
+          <!-- 右侧参数框和结果 -->
+          <div class="result-section">
+            <div class="parameter-box">
+              <div class="parameter-header">参数:</div>
+              <div class="parameter-content">
+                <pre>{{ parameterContent || '点击执行后显示执行参数' }}</pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 预检查弹窗 -->
+    <Modal
+      :open="preCheckVisible"
+      :title="getPreCheckTitle()"
+      @ok="handlePreCheckConfirm"
+      @cancel="handlePreCheckCancel"
+    >
+      <Form ref="preCheckFormRef" :model="preCheckForm" layout="vertical">
+        <!-- 用户密码 -->
+        <Form.Item
+          v-if="preCheckType === 'userPassword'"
+          label="请输入用户密码"
+          name="password"
+          :rules="[{ required: true, message: '请输入密码' }]"
+        >
+          <Input.Password
+            v-model:value="preCheckForm.password"
+            placeholder="请输入密码"
+          />
+        </Form.Item>
+
+        <!-- 固定密码 -->
+        <Form.Item
+          v-if="preCheckType === 'staticPassword'"
+          label="请输入固定密码"
+          name="password"
+          :rules="[{ required: true, message: '请输入密码' }]"
+        >
+          <Input.Password
+            v-model:value="preCheckForm.password"
+            placeholder="请输入密码"
+          />
+        </Form.Item>
+
+        <!-- 用户短信 -->
+        <template v-if="preCheckType === 'userSms'">
+          <Form.Item
+            label="手机号"
+            name="phone"
+            :rules="[
+              { required: true, message: '请输入手机号' },
+              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
+            ]"
+          >
+            <Input
+              v-model:value="preCheckForm.phone"
+              placeholder="请输入手机号"
+            />
+          </Form.Item>
+
+          <Form.Item
+            label="验证码"
+            name="smsCode"
+            :rules="[{ required: true, message: '请输入验证码' }]"
+          >
+            <div style="display: flex; gap: 8px">
+              <Input
+                v-model:value="preCheckForm.smsCode"
+                placeholder="请输入验证码"
+                style="flex: 1"
+              />
+              <Button
+                :loading="smsCodeLoading"
+                :disabled="smsCountdown > 0"
+                @click="getSmsCode"
+              >
+                {{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }}
+              </Button>
+            </div>
+          </Form.Item>
+        </template>
+      </Form>
+    </Modal>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.function-simulation {
+  .function-content {
+    display: flex;
+    gap: 16px;
+    min-height: 600px;
+
+    .function-sidebar {
+      width: 200px;
+      background: #fafafa;
+      border: 1px solid #d9d9d9;
+      border-radius: 6px;
+
+      .sidebar-header {
+        padding: 10px;
+        font-weight: 500;
+        color: #262626;
+        background: #f0f0f0;
+        border-bottom: 1px solid #d9d9d9;
+        border-radius: 6px 6px 0 0;
+      }
+
+      .sidebar-item {
+        padding: 10px;
+        cursor: pointer;
+        border-bottom: 1px solid #f0f0f0;
+        transition: all 0.3s;
+
+        &:hover {
+          background: #e6f7ff;
+        }
+
+        &.active {
+          color: white;
+          background: #1890ff;
+
+          .function-id {
+            color: rgb(255 255 255 / 80%);
+          }
+        }
+
+        .function-name {
+          font-size: 14px;
+          font-weight: 500;
+        }
+
+        .function-id {
+          font-size: 12px;
+          color: #8c8c8c;
+        }
+      }
+    }
+
+    .function-main {
+      flex: 1;
+
+      .mode-tabs {
+        margin-bottom: 16px;
+
+        .mode-info {
+          display: flex;
+          gap: 8px;
+          align-items: center;
+          padding: 8px 0;
+          font-size: 14px;
+          color: #8c8c8c;
+
+          .info-icon {
+            font-weight: bold;
+            color: #1890ff;
+          }
+        }
+      }
+
+      .content-area {
+        display: flex;
+        gap: 16px;
+
+        .input-section {
+          flex: 5;
+          min-height: 300px;
+          border: 1px solid #d9d9d9;
+          border-radius: 6px;
+
+          .simple-form {
+            :deep(.ant-table) {
+              .ant-table-thead > tr > th {
+                font-weight: 500;
+                background: #fafafa;
+              }
+
+              .ant-table-tbody > tr > td {
+                vertical-align: middle;
+              }
+            }
+
+            :deep(.ant-form-item) {
+              margin-bottom: 0;
+            }
+          }
+
+          .execute-button {
+            margin: 10px;
+            margin-top: 15px;
+            text-align: right;
+          }
+        }
+
+        .result-section {
+          display: flex;
+          flex: 2;
+          flex-direction: column;
+          gap: 16px;
+          min-width: 300px;
+          min-height: 300px;
+
+          .parameter-box {
+            height: 100%;
+          }
+
+          .parameter-box,
+          .result-box {
+            padding: 16px;
+            border: 1px solid #d9d9d9;
+            border-radius: 6px;
+
+            .parameter-header,
+            .result-header {
+              margin-bottom: 12px;
+              font-weight: 500;
+              color: #262626;
+            }
+
+            .parameter-content,
+            .result-content {
+              min-height: calc(100% - 32px);
+              padding: 12px;
+              background: #f5f5f5;
+              border-radius: 4px;
+
+              pre {
+                margin: 0;
+                font-size: 12px;
+                line-height: 1.5;
+                color: #262626;
+                word-break: break-all;
+                white-space: pre-wrap;
+              }
+            }
+          }
+
+          .result-box {
+            .result-content {
+              background: #f0f9ff;
+              border: 1px solid #91d5ff;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/device/device/detail/index.vue b/apps/web-antd/src/views/device/device/detail/index.vue
index d0dadb8..1a6200a 100644
--- a/apps/web-antd/src/views/device/device/detail/index.vue
+++ b/apps/web-antd/src/views/device/device/detail/index.vue
@@ -12,7 +12,7 @@ import { deviceStateOptions } from '#/constants/dicts';
 import { useDeviceStore } from '#/store/device';
 
 import BasicInfo from './components/BasicInfo.vue';
-import DeviceFunction from './components/DeviceFunction.vue';
+import DeviceSimulation from './components/DeviceSimulation.vue';
 import LogManagement from './components/LogManagement.vue';
 import RunningStatus from './components/RunningStatus.vue';
 
@@ -36,12 +36,12 @@ const loadDeviceInfo = async () => {
 // 处理状态变更
 const handleStatusChange = async (checked: boolean) => {
   try {
-    console.log('checked', checked);
     // await deviceUpdateStatus({
     //   id: deviceId.value,
     //   enabled: checked,
     // });
     // await loadDeviceInfo();
+    console.log("checked",checked)
   } catch {
     message.error('状态更新失败');
   }
@@ -98,7 +98,11 @@ onUnmounted(() => {
                 :class="deviceStateOptions.find((item) => item.value === currentDevice.deviceState)?.type"
               >•</span>
               <span class="status-text">
-                {{ deviceStateOptions.find((item) => item.value === currentDevice.deviceState)?.label }}
+                {{
+                  deviceStateOptions.find(
+                    (item) => item.value === currentDevice.deviceState,
+                  )?.label
+                }}
               </span>
               <Switch
                 :checked="currentDevice.enabled === '1'"
@@ -138,15 +142,23 @@ onUnmounted(() => {
       </div>
 
       <!-- 标签页内容 -->
-      <Tabs v-model:active-key="activeTab" class="detail-tabs" @change="handleTabChange">
+      <Tabs
+        v-model:active-key="activeTab"
+        class="detail-tabs"
+        @change="handleTabChange"
+        :destroy-inactive-tab-pane="true"
+      >
         <TabPane key="BasicInfo" tab="实例信息">
           <BasicInfo :device-info="currentDevice" @refresh="loadDeviceInfo" />
         </TabPane>
         <TabPane key="RunningStatus" tab="运行状态">
           <RunningStatus :device-id="deviceId" :device-info="currentDevice" />
         </TabPane>
-        <TabPane key="DeviceFunction" tab="设备功能">
-          <DeviceFunction :device-id="deviceId" :device-info="currentDevice" />
+        <TabPane key="DeviceSimulation" tab="设备模拟">
+          <DeviceSimulation
+            :device-id="deviceId"
+            :device-info="currentDevice"
+          />
         </TabPane>
         <TabPane key="LogManagement" tab="日志管理">
           <LogManagement :device-id="deviceId" :device-info="currentDevice" />
@@ -264,11 +276,5 @@ onUnmounted(() => {
       }
     }
   }
-
-  .detail-tabs {
-    :deep(.ant-tabs-content-holder) {
-      padding-top: 16px;
-    }
-  }
 }
 </style>
diff --git a/apps/web-antd/src/views/device/product/detail/components/ParameterModal.vue b/apps/web-antd/src/views/device/product/detail/components/ParameterModal.vue
index 4ebbae8..ecb31ad 100644
--- a/apps/web-antd/src/views/device/product/detail/components/ParameterModal.vue
+++ b/apps/web-antd/src/views/device/product/detail/components/ParameterModal.vue
@@ -13,20 +13,43 @@ import {
   Modal,
   Row,
   Select,
-  SelectOption,
   Switch,
 } from 'ant-design-vue';
 
-import { dataTypeOptions, formTypeOptions } from '#/constants/dicts';
+import {
+  dataTypeOptions,
+  formTypeOptions,
+  timeOptions,
+} from '#/constants/dicts';
 
 import EnumListModal from './EnumListModal.vue';
 
 interface ParameterItem {
   id: string;
   name: string;
-  dataType: string;
+  sort: number;
+  description: string;
   required: boolean;
-  formType: string;
+  expands: {
+    source: string;
+    type: string;
+  };
+  valueParams: {
+    dataType: string;
+    enumConf: any[];
+    falseText?: string;
+    falseValue?: string;
+    format?: string;
+    formType: string;
+    length: any;
+    max?: number;
+    min?: number;
+    scale?: number;
+    trueText?: string;
+    trueValue?: string;
+    unit: string;
+    viewType: string;
+  };
 }
 
 interface Props {
@@ -48,8 +71,66 @@ const visible = computed({
   set: (value) => emit('update:open', value),
 });
 
+// 根据数据类型过滤表单类型选项
+const filterFormTypeOptions = computed(() => {
+  switch (formData?.value?.valueParams?.dataType) {
+    case 'boolean': {
+      return formTypeOptions.filter((item) => {
+        return item.value === 'switch';
+      });
+    }
+    case 'date': {
+      return formTypeOptions.filter((item) => {
+        return item.value === 'time';
+      });
+    }
+    case 'double':
+    case 'float':
+    case 'int':
+    case 'long': {
+      return formTypeOptions.filter((item) => {
+        return item.value === 'number' || item.value === 'progress';
+      });
+    }
+    case 'enum': {
+      return formTypeOptions.filter((item) => {
+        return item.value === 'select';
+      });
+    }
+    case 'string': {
+      return formTypeOptions.filter((item) => {
+        return (
+          item.value === 'input' ||
+          item.value === 'switch' ||
+          item.value === 'select' ||
+          item.value === 'time'
+        );
+      });
+    }
+    default: {
+      return formTypeOptions;
+    }
+  }
+});
+
+// 根据数据类型过滤时间格式选项
+const filterTimeOptions = computed(() => {
+  switch (formData?.value?.valueParams?.dataType) {
+    case 'date': {
+      return timeOptions.filter((item) => {
+        return (
+          item.value === 'YYYY-MM-DD' || item.value === 'YYYY-MM-DD HH:mm:ss'
+        );
+      });
+    }
+    default: {
+      return timeOptions;
+    }
+  }
+});
+
 // 默认数据
-const defaultPropertyData: PropertyData = {
+const defaultPropertyData: ParameterItem = {
   id: '',
   name: '',
   sort: 1,
@@ -114,6 +195,36 @@ const modalTitle = computed(() => {
   return props.parameterType === 'add' ? '新增参数' : '编辑参数';
 });
 
+// 处理数据类型变化
+const handleDataTypeChange = (value: string) => {
+  switch (value) {
+    case 'boolean': {
+      formData.value.valueParams.formType = 'switch';
+      break;
+    }
+    case 'date': {
+      formData.value.valueParams.formType = 'time';
+      break;
+    }
+    case 'double':
+    case 'float':
+    case 'int':
+    case 'long': {
+      formData.value.valueParams.formType = 'number';
+      break;
+    }
+    case 'enum': {
+      formData.value.valueParams.formType = 'select';
+      break;
+    }
+    case 'string': {
+      formData.value.valueParams.formType = 'input';
+      break;
+    }
+    // No default
+  }
+};
+
 // 验证数据
 const validateData = (): boolean => {
   try {
@@ -162,6 +273,19 @@ watch(
   },
   { immediate: true },
 );
+
+// 监听表单类型变化，设置开关默认值
+watch(
+  () => formData.value.valueParams.formType,
+  (newVal) => {
+    if (newVal === 'switch') {
+      formData.value.valueParams.trueText = '是';
+      formData.value.valueParams.trueValue = 'true';
+      formData.value.valueParams.falseText = '否';
+      formData.value.valueParams.falseValue = 'false';
+    }
+  },
+);
 </script>
 
 <template>
@@ -192,32 +316,17 @@ watch(
           <Select
             v-model:value="formData.valueParams.dataType"
             placeholder="请选择数据类型"
-            style="width: 100%"
-          >
-            <SelectOption
-              v-for="option in dataTypeOptions"
-              :key="option.value"
-              :value="option.value"
-            >
-              {{ option.label }}
-            </SelectOption>
-          </Select>
+            :options="dataTypeOptions"
+            @change="handleDataTypeChange"
+          />
         </FormItem>
 
         <FormItem label="表单类型" name="valueParams.formType">
           <Select
             v-model:value="formData.valueParams.formType"
             placeholder="请选择表单类型"
-            style="width: 100%"
-          >
-            <SelectOption
-              v-for="option in formTypeOptions"
-              :key="option.value"
-              :value="option.value"
-            >
-              {{ option.label }}
-            </SelectOption>
-          </Select>
+            :options="filterFormTypeOptions"
+          />
         </FormItem>
 
         <!-- 开关类型配置 -->
@@ -312,6 +421,12 @@ watch(
               <InputNumber
                 style="width: 100%"
                 v-model:value="formData.valueParams.min"
+                :precision="
+                  formData.valueParams.dataType === 'double' ||
+                  formData.valueParams.dataType === 'float'
+                    ? undefined
+                    : 0
+                "
                 placeholder="请输入最小值"
               />
             </FormItem>
@@ -321,6 +436,12 @@ watch(
               <InputNumber
                 style="width: 100%"
                 v-model:value="formData.valueParams.max"
+                :precision="
+                  formData.valueParams.dataType === 'double' ||
+                  formData.valueParams.dataType === 'float'
+                    ? undefined
+                    : 0
+                "
                 placeholder="请输入最大值"
               />
             </FormItem>
@@ -330,8 +451,8 @@ watch(
           label="小数位"
           name="valueParams.scale"
           v-if="
-            formData.valueParams.formType === 'number' ||
-            formData.valueParams.formType === 'progress'
+            formData.valueParams.dataType === 'double' ||
+            formData.valueParams.dataType === 'float'
           "
         >
           <InputNumber
@@ -359,7 +480,7 @@ watch(
           <Select
             v-model:value="formData.valueParams.format"
             placeholder="请选择时间格式"
-            :options="timeOptions"
+            :options="filterTimeOptions"
           />
         </FormItem>