完成 微前端拆分 提交遗漏文件

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

@@ -0,0 +1,61 @@
+import { product } from 'mainApp/productService';
+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 = product.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>
+        )
+    }
+})
+
+// export default defineComponent({
+//     setup() {
+//         return () => (
+//             <div>商品详情</div>
+//         )
+//     }
+// })