测试案例完成

front-end/main-app/src/features/product/router/index.ts

@@ -0,0 +1,17 @@
+import { RouteRecordRaw } from 'vue-router';
+
+
+export const productRouter: Array<RouteRecordRaw> = [
+    {
+        path: '/Products',
+        name: 'ProductList',
+        component: () => import('../views/ProductList.tsx'),
+        meta: { title: '商品列表' }
+    },
+    {
+        path: '/ProductDetail',
+        name: 'ProductDetail',
+        component: () => import('../views/ProductDetail.tsx'),
+        meta: { title: '商品详情' }
+    },
+]

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>
+        )
+    }
+})

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

@@ -0,0 +1,53 @@
+import { defineComponent, onMounted, reactive } from 'vue'
+import { useRouter } from 'vue-router';
+import { productModule } from '@/di/productModule';
+import { ProductType } from '@domains/product/domain/type/ProductType';
+
+interface storeType {
+    list: Array<ProductType>
+}
+
+export default defineComponent({
+    name: "productModule-ProductList",
+    setup() {
+
+        const router = useRouter();
+        const productService = productModule.createProductApplicationService();
+
+        const state = reactive<storeType>({
+            list: []
+        })
+
+
+        onMounted(() => {
+            loadProductList()
+        })
+
+        const loadProductList = async () => {
+            state.list = await productService.getProductList();
+            console.log("state.list: ", state.list);
+        }
+
+        return () => (
+            <div class="ProductList">
+                <h1>商品领域模块 - 商品列表页面</h1>
+                <hr />
+                <h2>从Deno 后端 加载的数据，点击进详情</h2>
+                <ul>
+                    {
+                        state.list.map(item =>
+                            <li key={item.id} onClick={() => {
+                                router.push({
+                                    name: 'ProductDetail',
+                                    query: { id: item.id }
+                                });
+                            }}>
+                                {item.id} | {item.name} | ¥{item.price}
+                            </li>
+                        )
+                    }
+                </ul>
+            </div>
+        )
+    }
+})