测试案例完成

front-end/main-app/src/features/product/views/ProductDetail.tsx

@@ -0,0 +1,53 @@
+import { productModule } from '@/di/productModule';
+import { ProductType } from '@domains/product/domain/type/ProductType';
+import { defineComponent, onMounted, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+
+interface storeType {
+    item: ProductType
+    id: number
+}
+
+export default defineComponent({
+    name: "productModule-ProductDetail",
+    setup() {
+        const route = useRoute();
+        const productService = productModule.createProductApplicationService();
+
+        const state = reactive<storeType>({
+            item: {} as ProductType,
+            id: 0
+        })
+
+        onMounted(() => {
+            if (!route.query.id) {
+                throw new Error("缺少id参数");
+            }
+
+            state.id = Number(route.query.id)
+            console.log("id: ", state.id);
+            loadProductDetail()
+        })
+
+        const loadProductDetail = async () => {
+            state.item = await productService.getProductInfo(state.id);
+            console.log("state.item: ", state.item);
+        }
+
+        return () => (
+            <div class="ProductDetail">
+                <h1>商品领域模块 - 商品详情页面</h1>
+                <hr />
+                <p>商品id：{state.id}</p>
+                {state.item.name}
+                <ul>
+                    {
+                        Object.entries(state.item).map(([key, value]) =>
+                            <li>{key}: {value}</li>
+                        )
+                    }
+                </ul>
+            </div>
+        )
+    }
+})