From 1e5302ee641096e0f9708dfa429bba9ebd397803 Mon Sep 17 00:00:00 2001
From: fhysy <1149505133@qq.com>
Date: Wed, 13 Aug 2025 12:01:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E4=BA=A7=E5=93=81?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2,=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E9=85=8D=E7=BD=AE=E4=BF=A1=E6=81=AF=E9=A1=B5?=
 =?UTF-8?q?=E5=92=8C=E5=8F=82=E6=95=B0=E9=85=8D=E7=BD=AE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加产品详情页面路由和访问权限
- 实现产品基本信息展示和编辑功能
- 增加产品参数编辑功能
- 实现产品状态变更和配置应用
- 添加设备数量统计和跳转功能
---
 apps/web-antd/src/api/device/product/index.ts |  30 ++
 .../src/api/device/product/model.d.ts         |  10 +
 apps/web-antd/src/router/access.ts            |   6 +
 apps/web-antd/src/store/index.ts              |   1 +
 apps/web-antd/src/store/product.ts            |  92 ++++++
 .../web-antd/src/views/device/product/data.ts |  10 +
 .../product/detail/components/BasicInfo.vue   | 269 ++++++++++++++++
 .../detail/components/ProductParamDrawer.vue  | 297 ++++++++++++++++++
 .../src/views/device/product/detail/index.vue | 219 +++++++++++++
 .../src/views/device/product/index.vue        |  19 ++
 .../src/views/operations/network/index.vue    |  34 +-
 .../src/views/operations/protocol/data.ts     |   2 +-
 .../src/views/operations/protocol/index.vue   |  10 +-
 13 files changed, 970 insertions(+), 29 deletions(-)
 create mode 100644 apps/web-antd/src/store/product.ts
 create mode 100644 apps/web-antd/src/views/device/product/detail/components/BasicInfo.vue
 create mode 100644 apps/web-antd/src/views/device/product/detail/components/ProductParamDrawer.vue
 create mode 100644 apps/web-antd/src/views/device/product/detail/index.vue

diff --git a/apps/web-antd/src/api/device/product/index.ts b/apps/web-antd/src/api/device/product/index.ts
index 75515ab..4765ea8 100644
--- a/apps/web-antd/src/api/device/product/index.ts
+++ b/apps/web-antd/src/api/device/product/index.ts
@@ -52,6 +52,24 @@ export function productUpdate(data: ProductForm) {
   return requestClient.putWithMsg<void>('/device/product', data);
 }
 
+/**
+ * 更新设备产品（部分）
+ * @param data
+ * @returns void
+ */
+export function productUpdateById(id: ID, data: ProductForm) {
+  return requestClient.putWithMsg<void>(`/device/product/${id}`, data);
+}
+
+/**
+ * 更新设备产品状态
+ * @param data
+ * @returns void
+ */
+export function productUpdateStatus(data: ProductForm) {
+  return requestClient.putWithMsg<void>('/device/product/enable', data);
+}
+
 /**
  * 删除设备产品
  * @param id id
@@ -60,3 +78,15 @@ export function productUpdate(data: ProductForm) {
 export function productRemove(id: ID | IDS) {
   return requestClient.deleteWithMsg<void>(`/device/product/${id}`);
 }
+
+/**
+ * 查询产品存储策略列表
+ * @param params
+ * @returns 产品存储策略列表
+ */
+export function getPoliciesList(params?: any) {
+  return requestClient.get<PageResult<GatewayVO>>(
+    '/device/product/storage/policies',
+    { params },
+  );
+}
diff --git a/apps/web-antd/src/api/device/product/model.d.ts b/apps/web-antd/src/api/device/product/model.d.ts
index 0cae991..e4a248b 100644
--- a/apps/web-antd/src/api/device/product/model.d.ts
+++ b/apps/web-antd/src/api/device/product/model.d.ts
@@ -65,6 +65,11 @@ export interface ProductVO {
    * 存储策略配置
    */
   storePolicyConf: string;
+
+  /**
+   * 产品参数
+   */
+  productParam?: string;
 }
 
 export interface ProductForm extends BaseEntity {
@@ -132,6 +137,11 @@ export interface ProductForm extends BaseEntity {
    * 存储策略配置
    */
   storePolicyConf?: string;
+
+  /**
+   * 产品参数
+   */
+  productParam?: string;
 }
 
 export interface ProductQuery extends PageQuery {
diff --git a/apps/web-antd/src/router/access.ts b/apps/web-antd/src/router/access.ts
index aea6399..dab9a73 100644
--- a/apps/web-antd/src/router/access.ts
+++ b/apps/web-antd/src/router/access.ts
@@ -31,6 +31,12 @@ const routeMetaMapping: Record<string, Omit<RouteMeta, 'title'>> = {
     activePath: '/system/role',
     requireHomeRedirect: true,
   },
+
+  '/device/product/detail/:id': {
+    activePath: '/device/product',
+    requireHomeRedirect: true,
+  },
+
   '/system/oss-config/index': {
     activePath: '/system/oss',
     requireHomeRedirect: true,
diff --git a/apps/web-antd/src/store/index.ts b/apps/web-antd/src/store/index.ts
index 7750334..f52e0db 100644
--- a/apps/web-antd/src/store/index.ts
+++ b/apps/web-antd/src/store/index.ts
@@ -1,2 +1,3 @@
 export * from './auth';
 export * from './notify';
+export * from './product';
diff --git a/apps/web-antd/src/store/product.ts b/apps/web-antd/src/store/product.ts
new file mode 100644
index 0000000..aa2f409
--- /dev/null
+++ b/apps/web-antd/src/store/product.ts
@@ -0,0 +1,92 @@
+import type { ProductVO } from '#/api/device/product/model';
+
+import { defineStore } from 'pinia';
+
+import { productInfo } from '#/api/device/product';
+
+export interface ProductDetailState {
+  current: Partial<ProductVO>;
+  detail: Partial<ProductVO>;
+  tabActiveKey: string;
+  deviceCount: number;
+}
+
+export const useProductStore = defineStore('product', {
+  state: (): ProductDetailState => ({
+    current: {},
+    detail: {},
+    tabActiveKey: 'BasicInfo',
+    deviceCount: 0,
+  }),
+
+  getters: {
+    getCurrentProduct: (state) => state.current,
+    getDetailProduct: (state) => state.detail,
+    getTabActiveKey: (state) => state.tabActiveKey,
+    getDeviceCount: (state) => state.deviceCount,
+  },
+
+  actions: {
+    /**
+     * 设置当前产品信息
+     */
+    setCurrent(current: Partial<ProductVO>) {
+      this.current = current;
+      this.detail = current;
+    },
+
+    /**
+     * 获取产品详情
+     */
+    async getDetail(id: number | string) {
+      try {
+        const resp = await productInfo(id);
+        if (resp) {
+          this.current = {
+            ...this.current,
+            ...resp,
+          };
+          this.detail = resp;
+        }
+      } catch (error) {
+        console.error('获取产品详情失败:', error);
+      }
+    },
+
+    /**
+     * 刷新产品信息和设备数量
+     */
+    async refresh(id: number | string) {
+      await this.getDetail(id);
+      // TODO: 这里需要添加获取设备数量的 API 调用
+      // const res = await getDeviceNumber({ productId: id });
+      // if (res) {
+      //   this.deviceCount = res;
+      // }
+    },
+
+    /**
+     * 设置选中的 tab
+     */
+    setTabActiveKey(key: string) {
+      this.tabActiveKey = key;
+    },
+
+    /**
+     * 设置设备数量
+     */
+    setDeviceCount(count: number) {
+      this.deviceCount = count;
+    },
+
+    /**
+     * 重置状态
+     */
+    reset() {
+      this.current = {};
+      this.detail = {};
+      this.tabActiveKey = 'BasicInfo';
+      this.deviceCount = 0;
+    },
+  },
+});
diff --git a/apps/web-antd/src/views/device/product/data.ts b/apps/web-antd/src/views/device/product/data.ts
index 271da7b..2794bcd 100644
--- a/apps/web-antd/src/views/device/product/data.ts
+++ b/apps/web-antd/src/views/device/product/data.ts
@@ -6,6 +6,11 @@ import { h } from 'vue';
 import { deviceTypeOptions, enabledOptions } from '#/constants/dicts';
 
 export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'productKey',
+    label: '产品编码',
+  },
   {
     component: 'Input',
     fieldName: 'productName',
@@ -53,9 +58,14 @@ export const columns: VxeGridProps['columns'] = [
     title: '产品名称',
     field: 'productName',
   },
+  {
+    title: '产品分类',
+    field: 'categoryName',
+  },
   {
     title: '设备类型',
     field: 'deviceType',
+    slots: { default: 'deviceType' },
   },
   {
     title: '启用状态',
diff --git a/apps/web-antd/src/views/device/product/detail/components/BasicInfo.vue b/apps/web-antd/src/views/device/product/detail/components/BasicInfo.vue
new file mode 100644
index 0000000..c0d34c4
--- /dev/null
+++ b/apps/web-antd/src/views/device/product/detail/components/BasicInfo.vue
@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import type { ProductVO } from '#/api/device/product/model';
+
+import { computed } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { EditOutlined } from '@ant-design/icons-vue';
+import { Button, Descriptions, DescriptionsItem } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { deviceTypeOptions } from '#/constants/dicts';
+import { useProductStore } from '#/store/product';
+
+import productDrawer from '../../product-drawer.vue';
+import productParamDrawer from './ProductParamDrawer.vue';
+
+const props = defineProps<{
+  productInfo: ProductVO;
+}>();
+
+const emit = defineEmits<{
+  refresh: [];
+}>();
+
+const productStore = useProductStore();
+
+const [ProductDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: productDrawer,
+});
+
+const [ProductParamDrawer, paramDrawerApi] = useVbenDrawer({
+  connectedComponent: productParamDrawer,
+});
+
+// 编辑配置信息
+const handleEdit = () => {
+  drawerApi.setData({ id: props.productInfo.id });
+  drawerApi.open();
+};
+
+// 编辑产品参数
+const handleEditParams = () => {
+  paramDrawerApi.setData({
+    productId: props.productInfo.id,
+    productParam: props.productInfo.productParam,
+  });
+  paramDrawerApi.open();
+};
+
+// 配置接入方式
+const handleAccessConfig = () => {
+  productStore.setTabActiveKey('DeviceAccess');
+};
+
+// 格式化时间
+const formatTime = (time: string) => {
+  return time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '-';
+};
+
+// 解析产品参数
+const parseProductParams = (productParam?: string) => {
+  if (!productParam) return [];
+
+  try {
+    return JSON.parse(productParam);
+  } catch (error) {
+    console.error('解析产品参数失败:', error);
+    return [];
+  }
+};
+
+// 获取产品参数
+const productParams = computed(() =>
+  parseProductParams(props.productInfo.productParam),
+);
+</script>
+
+<template>
+  <div class="basic-info">
+    <div class="info-header">
+      <h3>配置信息</h3>
+      <div class="header-actions">
+        <Button
+          type="link"
+          @click="handleEdit"
+          v-access:code="['device:product:edit']"
+        >
+          <template #icon>
+            <EditOutlined />
+          </template>
+          编辑
+        </Button>
+      </div>
+    </div>
+
+    <Descriptions bordered :column="3">
+      <DescriptionsItem label="产品ID">
+        {{ productInfo.id }}
+      </DescriptionsItem>
+      <DescriptionsItem label="产品KEY">
+        {{ productInfo.productKey }}
+      </DescriptionsItem>
+      <DescriptionsItem label="产品名称">
+        {{ productInfo.productName }}
+      </DescriptionsItem>
+      <DescriptionsItem label="产品分类">
+        {{ productInfo.categoryName }}
+      </DescriptionsItem>
+      <DescriptionsItem label="设备类型">
+        {{
+          deviceTypeOptions.find(
+            (option) => option.value === productInfo.deviceType,
+          )?.label
+        }}
+      </DescriptionsItem>
+      <DescriptionsItem label="接入方式">
+        <Button
+          type="link"
+          @click="handleAccessConfig"
+          v-access:code="['device:product:edit']"
+        >
+          {{ productInfo.provider || '配置接入方式' }}
+        </Button>
+      </DescriptionsItem>
+      <DescriptionsItem label="创建时间">
+        {{ formatTime(productInfo.createTime) }}
+      </DescriptionsItem>
+      <DescriptionsItem label="更新时间">
+        {{ formatTime(productInfo.updateTime) }}
+      </DescriptionsItem>
+      <DescriptionsItem label="描述" :span="2">
+        {{ productInfo.description || '暂无描述' }}
+      </DescriptionsItem>
+    </Descriptions>
+
+    <!-- 产品参数展示 -->
+    <div class="product-params-section">
+      <div class="section-header">
+        <h3>产品参数</h3>
+        <Button
+          type="link"
+          size="small"
+          @click="handleEditParams"
+          v-access:code="['device:product:edit']"
+        >
+          <template #icon>
+            <EditOutlined />
+          </template>
+          编辑参数
+        </Button>
+      </div>
+
+      <div v-if="productParams.length === 0" class="empty-params">
+        <p>暂无产品参数</p>
+      </div>
+
+      <Descriptions bordered :column="3" v-else>
+        <DescriptionsItem
+          v-for="param in productParams"
+          :key="param.key"
+          :label="param.label"
+        >
+          {{ param.value }}
+        </DescriptionsItem>
+      </Descriptions>
+    </div>
+
+    <ProductDrawer @reload="emit('refresh')" />
+    <ProductParamDrawer
+      :product-id="productInfo.id"
+      :product-param="productInfo.productParam"
+      @refresh="emit('refresh')"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.basic-info {
+  .info-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    h3 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: #262626;
+    }
+
+    .header-actions {
+      display: flex;
+      gap: 8px;
+    }
+  }
+
+  .product-params-section {
+    padding: 16px 0;
+    margin-top: 24px;
+    border-radius: 6px;
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+
+      h3 {
+        margin: 0;
+        font-size: 16px;
+        font-weight: 600;
+        color: #262626;
+      }
+    }
+
+    .empty-params {
+      padding: 20px 0;
+      color: #8c8c8c;
+      text-align: center;
+
+      p {
+        margin: 0;
+        font-size: 14px;
+      }
+    }
+
+    .params-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: 12px;
+
+      .param-card {
+        padding: 12px;
+        background: #fff;
+        border: 1px solid #f0f0f0;
+        border-radius: 4px;
+
+        .param-key {
+          margin-bottom: 4px;
+          font-size: 12px;
+          color: #8c8c8c;
+        }
+
+        .param-label {
+          margin-bottom: 8px;
+          font-size: 14px;
+          font-weight: 500;
+          color: #262626;
+        }
+
+        .param-value {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  :deep(.ant-descriptions-item-label) {
+    font-weight: 500;
+    color: #595959;
+  }
+
+  :deep(.ant-descriptions-item-content) {
+    color: #262626;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/device/product/detail/components/ProductParamDrawer.vue b/apps/web-antd/src/views/device/product/detail/components/ProductParamDrawer.vue
new file mode 100644
index 0000000..a909769
--- /dev/null
+++ b/apps/web-antd/src/views/device/product/detail/components/ProductParamDrawer.vue
@@ -0,0 +1,297 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import { Button, Input, message } from 'ant-design-vue';
+
+import { productUpdateById } from '#/api/device/product';
+
+interface ProductParam {
+  key: string;
+  label: string;
+  value: string;
+}
+
+const props = defineProps<{
+  productId: number | string;
+  productParam?: string;
+}>();
+
+const emit = defineEmits<{
+  refresh: [];
+}>();
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  class: 'w-[600px]',
+  onConfirm: handleConfirm,
+});
+
+const params = ref<ProductParam[]>([]);
+const loading = ref(false);
+
+// 监听产品参数变化
+watch(
+  () => props.productParam,
+  (newVal) => {
+    if (newVal) {
+      try {
+        params.value = JSON.parse(newVal);
+      } catch {
+        params.value = [];
+      }
+    } else {
+      params.value = [];
+    }
+  },
+  { immediate: true },
+);
+
+// 添加参数
+const addParam = () => {
+  params.value.push({
+    key: '',
+    label: '',
+    value: '',
+  });
+};
+
+// 删除参数
+const removeParam = (index: number) => {
+  params.value.splice(index, 1);
+};
+
+// 更新参数
+const updateParam = (
+  index: number,
+  field: keyof ProductParam,
+  value: string,
+) => {
+  if (params.value[index]) {
+    params.value[index][field] = value;
+  }
+};
+
+// 确认保存
+async function handleConfirm() {
+  try {
+    loading.value = true;
+
+    // 验证参数
+    const validParams = params.value.filter(
+      (param) => param.key.trim() && param.label.trim() && param.value.trim(),
+    );
+
+    if (validParams.length === 0) {
+      message.warning('请至少添加一个有效的产品参数');
+      return;
+    }
+
+    // 检查是否有重复的key
+    const keys = validParams.map((param) => param.key.trim());
+    const uniqueKeys = new Set(keys);
+    if (keys.length !== uniqueKeys.size) {
+      message.error('参数key不能重复');
+      return;
+    }
+
+    // 转换为JSON字符串
+    const productParam = JSON.stringify(validParams);
+
+    // 调用API更新产品参数
+    await updateProductParam(props.productId, productParam);
+
+    message.success('产品参数保存成功');
+    emit('refresh');
+    drawerApi.close();
+  } catch (error) {
+    console.error('保存产品参数失败:', error);
+    message.error('保存失败，请重试');
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 更新产品参数API调用
+async function updateProductParam(id: number | string, productParam: string) {
+  await productUpdateById(id, { id, productParam });
+}
+
+// 打开抽屉
+const open = () => {
+  drawerApi.open();
+};
+
+// 暴露方法给父组件
+defineExpose({
+  open,
+});
+</script>
+
+<template>
+  <BasicDrawer title="编辑产品参数" :loading="loading">
+    <div class="product-param-editor">
+      <div class="param-header">
+        <span class="param-title">产品参数配置</span>
+        <Button type="primary" @click="addParam">
+          <template #icon>
+            <PlusOutlined />
+          </template>
+          添加参数
+        </Button>
+      </div>
+
+      <div class="param-list">
+        <div v-if="params.length === 0" class="empty-state">
+          <p>暂无产品参数，请点击"添加参数"按钮添加</p>
+        </div>
+
+        <div v-else class="param-items header-item">
+          <div class="param-item">
+            <div class="param-row">
+              <div class="param-field">
+                <label>参数key:</label>
+              </div>
+
+              <div class="param-field">
+                <label>参数名(单位):</label>
+              </div>
+
+              <div class="param-field">
+                <label>参数值:</label>
+              </div>
+            </div>
+          </div>
+          <div v-for="(param, index) in params" :key="index" class="param-item">
+            <div class="param-row">
+              <div class="param-field">
+                <Input
+                  :value="param.key"
+                  placeholder="请输入参数key"
+                  @input="(e) => updateParam(index, 'key', e.target.value)"
+                />
+              </div>
+
+              <div class="param-field">
+                <Input
+                  :value="param.label"
+                  placeholder="请输入参数名和单位，如：电压(V)"
+                  @input="(e) => updateParam(index, 'label', e.target.value)"
+                />
+              </div>
+
+              <div class="param-field">
+                <Input
+                  :value="param.value"
+                  placeholder="请输入参数值"
+                  @input="(e) => updateParam(index, 'value', e.target.value)"
+                />
+              </div>
+
+              <Button
+                type="text"
+                danger
+                @click="removeParam(index)"
+                class="delete-btn"
+              >
+                <template #icon>
+                  <DeleteOutlined />
+                </template>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="param-tips">
+        <p class="tip-text">
+          <strong>说明：</strong>
+          参数key用于标识参数，参数名(单位)用于显示，参数值为默认值
+        </p>
+      </div>
+    </div>
+  </BasicDrawer>
+</template>
+
+<style lang="scss" scoped>
+.product-param-editor {
+  .param-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 12px;
+    margin-bottom: 16px;
+
+    .param-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #262626;
+    }
+  }
+
+  .param-list {
+    margin-bottom: 16px;
+
+    .empty-state {
+      padding: 40px 0;
+      color: #8c8c8c;
+      text-align: center;
+
+      p {
+        margin: 0;
+        font-size: 14px;
+      }
+    }
+
+    .param-items {
+      border-bottom: 1px solid #f0f0f0;
+
+      .param-item {
+        padding: 16px;
+        background: #fafafa;
+        border: 1px solid #f0f0f0;
+        border-bottom: none;
+
+        .param-row {
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr auto;
+          gap: 12px;
+          align-items: end;
+
+          .param-field {
+            display: flex;
+            flex-direction: column;
+
+            label {
+              margin-bottom: 6px;
+              font-size: 12px;
+              font-weight: 500;
+              color: #595959;
+            }
+          }
+
+          .delete-btn {
+            height: 32px;
+            padding: 4px 8px;
+          }
+        }
+      }
+    }
+  }
+
+  .param-tips {
+    padding: 12px 16px;
+    background: #f6ffed;
+    border: 1px solid #b7eb8f;
+    border-radius: 6px;
+
+    .tip-text {
+      margin: 0;
+      font-size: 12px;
+      line-height: 1.5;
+      color: #52c41a;
+    }
+  }
+}
+</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
new file mode 100644
index 0000000..54ec2e7
--- /dev/null
+++ b/apps/web-antd/src/views/device/product/detail/index.vue
@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useAccess } from '@vben/access';
+import { Page } from '@vben/common-ui';
+
+import { ArrowLeftOutlined } from '@ant-design/icons-vue';
+import { message, Switch, TabPane, Tabs } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { productUpdate, productUpdateStatus } from '#/api/device/product';
+import { useProductStore } from '#/store/product';
+
+import BasicInfo from './components/BasicInfo.vue';
+import DeviceAccess from './components/DeviceAccess.vue';
+import Metadata from './components/Metadata.vue';
+
+const route = useRoute();
+const router = useRouter();
+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);
+
+// 加载产品信息
+const loadProductInfo = async () => {
+  try {
+    await productStore.getDetail(productId.value);
+    // TODO: 这里需要添加获取设备数量的逻辑
+    // 暂时设置为 0
+    productStore.setDeviceCount(0);
+  } catch {
+    message.error('加载产品信息失败');
+  }
+};
+
+// 处理状态变更
+const handleStatusChange = async (checked: boolean) => {
+  try {
+    await productUpdateStatus({
+      id: productId.value,
+      enabled: checked,
+    });
+    await loadProductInfo();
+  } catch {
+    message.error('状态更新失败');
+  }
+};
+
+// 应用配置
+const handleApplyConfig = async () => {
+  try {
+    await productUpdate({
+      id: productId.value,
+      enabled: '1',
+    });
+    message.success('配置应用成功');
+    await loadProductInfo();
+  } catch {
+    message.error('配置应用失败');
+  }
+};
+
+// 跳转到设备列表
+const jumpToDevices = () => {
+  router.push({
+    path: '/device/instance',
+    query: {
+      productId: productId.value,
+    },
+  });
+};
+
+// 返回上一页
+const goBack = () => {
+  router.back();
+};
+
+// 标签页切换
+const handleTabChange = (key: string) => {
+  productStore.setTabActiveKey(key);
+  if (key === 'BasicInfo') {
+    loadProductInfo();
+  }
+};
+
+onMounted(() => {
+  loadProductInfo();
+});
+
+// 组件销毁时重置 store
+onUnmounted(() => {
+  productStore.reset();
+});
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <div class="product-detail">
+      <!-- 页面头部 -->
+      <div class="detail-header">
+        <div class="header-left">
+          <a-button @click="goBack" class="back-btn">
+            <template #icon>
+              <ArrowLeftOutlined />
+            </template>
+            返回
+          </a-button>
+          <div class="product-info">
+            <h2 class="product-name">{{ currentProduct.productName }}</h2>
+            <div class="product-status">
+              <Switch
+                :checked="currentProduct.enabled"
+                checked-children="启用"
+                un-checked-children="禁用"
+                checked-value="1"
+                un-checked-value="0"
+                @change="handleStatusChange"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="header-right">
+          <a-button
+            type="primary"
+            @click="handleApplyConfig"
+            :disabled="currentProduct.enabled === '0'"
+            v-access:code="['device:product:edit']"
+          >
+            应用配置
+          </a-button>
+        </div>
+      </div>
+
+      <!-- 产品统计信息 -->
+      <div class="product-stats">
+        <span>设备数量：</span><a @click="jumpToDevices">{{ deviceCount }}</a>
+      </div>
+
+      <!-- 标签页内容 -->
+      <Tabs
+        v-model:active-key="activeTab"
+        class="detail-tabs"
+        @change="handleTabChange"
+      >
+        <TabPane key="BasicInfo" tab="配置信息">
+          <BasicInfo
+            :product-info="currentProduct"
+            @refresh="loadProductInfo"
+          />
+        </TabPane>
+        <TabPane key="Metadata" tab="物模型">
+          <Metadata :product-id="productId" />
+        </TabPane>
+        <TabPane key="DeviceAccess" tab="设备接入">
+          <DeviceAccess
+            :product-info="currentProduct"
+            @refresh="loadProductInfo"
+          />
+        </TabPane>
+      </Tabs>
+    </div>
+  </Page>
+</template>
+
+<style lang="scss" scoped>
+.product-detail {
+  padding: 24px;
+  background: #fff;
+
+  .detail-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 16px;
+
+    .header-left {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+
+      .back-btn {
+        // margin-right: 16px;
+      }
+
+      .product-info {
+        display: flex;
+        gap: 16px;
+        align-items: center;
+
+        .product-name {
+          margin: 0;
+          font-size: 20px;
+          font-weight: 600;
+          color: #262626;
+        }
+
+        .product-status {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
+
+  .product-stats {
+    padding: 10px 0;
+  }
+
+  .detail-tabs {
+    :deep(.ant-tabs-content-holder) {
+      padding-top: 16px;
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/device/product/index.vue b/apps/web-antd/src/views/device/product/index.vue
index ec3d1b5..0478286 100644
--- a/apps/web-antd/src/views/device/product/index.vue
+++ b/apps/web-antd/src/views/device/product/index.vue
@@ -4,6 +4,8 @@ import type { VbenFormProps } from '@vben/common-ui';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { ProductForm } from '#/api/device/product/model';
 
+import { useRouter } from 'vue-router';
+
 import { Page, useVbenDrawer } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
 
@@ -16,6 +18,8 @@ import {
   productRemove,
 } from '#/api/device/product';
 import { productCategoryTreeList } from '#/api/device/productCategory';
+import { deviceTypeOptions } from '#/constants/dicts';
+import { useProductStore } from '#/store/product';
 import { commonDownloadExcel } from '#/utils/file/download';
 
 import { columns, querySchema } from './data';
@@ -40,6 +44,8 @@ const formOptions: VbenFormProps = {
   //  ],
   // ],
 };
+const router = useRouter();
+const productStore = useProductStore();
 
 const gridOptions: VxeGridProps = {
   checkboxConfig: {
@@ -111,6 +117,11 @@ function handleAdd() {
 }
 
 async function handleView(row: Required<ProductForm>) {
+  // 保存产品信息到 store
+  productStore.setCurrent(row);
+  // 设置默认选中的 tab
+  productStore.setTabActiveKey('BasicInfo');
+  // 跳转到详情页
   router.push(`/device/product/detail/${row.id}`);
 }
 
@@ -179,6 +190,14 @@ function handleDownloadExcel() {
           </a-button>
         </Space>
       </template>
+      <template #deviceType="{ row }">
+        <Tag color="processing">
+          {{
+            deviceTypeOptions.find((option) => option.value === row.deviceType)
+              ?.label
+          }}
+        </Tag>
+      </template>
       <template #enabled="{ row }">
         <Tag :color="row.enabled === '1' ? 'success' : 'error'">
           {{ row.enabled === '1' ? '启用' : '禁用' }}
diff --git a/apps/web-antd/src/views/operations/network/index.vue b/apps/web-antd/src/views/operations/network/index.vue
index cd75f2b..6046684 100644
--- a/apps/web-antd/src/views/operations/network/index.vue
+++ b/apps/web-antd/src/views/operations/network/index.vue
@@ -15,6 +15,7 @@ import {
   networkList,
   networkRemove,
 } from '#/api/operations/network';
+import { networkTypeOptions } from '#/constants/dicts';
 import { commonDownloadExcel } from '#/utils/file/download';
 
 import { columns, querySchema } from './data';
@@ -122,31 +123,6 @@ function handleDownloadExcel() {
   );
 }
 
-// 解析网络配置JSON
-function parseNetworkConfig(networkConfig: string) {
-  try {
-    return JSON.parse(networkConfig);
-  } catch (error) {
-    console.error('解析网络配置失败:', error);
-    return null;
-  }
-}
-
-// 格式化网络配置显示
-function formatNetworkConfig(row: any) {
-  const config = parseNetworkConfig(row.networkConfig);
-  if (!config) {
-    return '配置解析失败';
-  }
-
-  if (row.networkType === 'HTTP_SERVER') {
-    return `本地: ${config.localAddress}:${config.localPort} | 公网: ${config.publicAddress}:${config.publicPort} | TLS: ${config.enableTls === '1' ? '是' : '否'}`;
-  } else if (row.networkType === 'MQTT_CLIENT') {
-    return `远程: ${config.remoteAddress}:${config.remotePort} | ClientId: ${config.clientId} | TLS: ${config.enableTls === '1' ? '是' : '否'}`;
-  }
-
-  return '未知配置';
-}
 </script>
 
 <template>
@@ -179,7 +155,13 @@ function formatNetworkConfig(row: any) {
         </Space>
       </template>
       <template #networkType="{ row }">
-        <Tag color="processing">{{ row.networkType }}</Tag>
+        <Tag color="processing">
+          {{
+            networkTypeOptions.find(
+              (option) => option.value === row.networkType,
+            )?.label
+          }}
+        </Tag>
       </template>
       <template #enabled="{ row }">
         <Tag :color="row.enabled === '1' ? 'success' : 'error'">
diff --git a/apps/web-antd/src/views/operations/protocol/data.ts b/apps/web-antd/src/views/operations/protocol/data.ts
index 5b84f6c..e73156f 100644
--- a/apps/web-antd/src/views/operations/protocol/data.ts
+++ b/apps/web-antd/src/views/operations/protocol/data.ts
@@ -3,7 +3,7 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { enabledOptions } from '#/constants/dicts';
 
-const protocolTypeOptions = [
+export const protocolTypeOptions = [
   { label: 'local', value: 'local' },
   { label: 'jar', value: 'jar' },
 ];
diff --git a/apps/web-antd/src/views/operations/protocol/index.vue b/apps/web-antd/src/views/operations/protocol/index.vue
index 2d45d6e..de5bffd 100644
--- a/apps/web-antd/src/views/operations/protocol/index.vue
+++ b/apps/web-antd/src/views/operations/protocol/index.vue
@@ -17,7 +17,7 @@ import {
 } from '#/api/operations/protocol';
 import { commonDownloadExcel } from '#/utils/file/download';
 
-import { columns, querySchema } from './data';
+import { columns, protocolTypeOptions, querySchema } from './data';
 import protocolDrawer from './protocol-drawer.vue';
 
 const formOptions: VbenFormProps = {
@@ -153,7 +153,13 @@ function handleDownloadExcel() {
         </Space>
       </template>
       <template #protocolType="{ row }">
-        <Tag color="processing">{{ row.protocolType }}</Tag>
+        <Tag color="processing">
+          {{
+            protocolTypeOptions.find(
+              (option) => option.value === row.protocolType,
+            )?.label
+          }}
+        </Tag>
       </template>
       <template #enabled="{ row }">
         <Tag :color="row.enabled === '1' ? 'success' : 'error'">