测试案例完成

front-end/main-app/src/app/App.tsx

@@ -8,7 +8,8 @@ export default defineComponent({
             <>
                 <div id="nav">
                     <RouterLink to="/">首页</RouterLink> |
-                    <RouterLink to="/about">我的</RouterLink>
+                    <RouterLink to="/about">我的</RouterLink> |
+                    <RouterLink to="/Products">商品</RouterLink>
                 </div>
                 <RouterView></RouterView>
             </>

front-end/main-app/src/app/di/productModule.ts

@@ -0,0 +1,38 @@
+import { ProductApplicationService } from "../../domains/product/application/services/ProductApplicationService";
+import { HttpProductRepository } from "../../domains/product/infr/api/HttpProductRepository";
+import { ProductRepository } from "../../domains/product/ports/repositories/ProductRepository";
+
+
+/**
+ * 商品领域的依赖注入配置
+ * 将 接口 与 具体实现 绑定
+ * 
+ * 优点：是一个依赖工厂，它隐藏了对象创建的细节，
+ * 让业务代码只需要关心 “做什么”，而不用关心 “依赖从哪里来”
+ * 所有依赖关系都在di目录下集中配置，一目了然，后续维护时能快速找到所有依赖的创建逻辑。
+ * 
+ * 松耦合：
+ * 业务代码（ProductApplicationService）只依赖抽象接口（ProductRepository），
+ * 不依赖具体实现。如果未来需要改用其他数据来源（比如 WebSocket），
+ * 只需修改bindProductRepository的返回值，无需改动业务逻辑。
+ * 
+ * 易于测试：
+ * 测试时可以临时替换为模拟实现
+ * productModule.bindProductRepository = () => new MockProductRepository();
+ * 这样测试就可以脱离真实 API，使用预设的模拟数据。
+ */
+export const productModule = {
+
+    // 绑定 仓储抽象接口 到 HTTP具体实现
+    bindProductRepository: (): ProductRepository => {
+        // return new MockProductRepository 直接从真实接口数据改为测试模拟数据
+        return new HttpProductRepository;
+    },
+
+    // 创建应用服务实例
+    createProductApplicationService: (): ProductApplicationService => {
+        return new ProductApplicationService(
+            productModule.bindProductRepository()
+        );
+    }
+}

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

@@ -1,24 +1,30 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import { productRouter } from '@features/product/router'
+
+const baseRouter: Array<RouteRecordRaw> = [
+    {
+        path: '/',
+        name: 'home',
+        component: () => import('../views/Home'),
+    },
+    {
+        path: '/about',
+        name: 'about',
+        component: () => import('../views/About'),
+    },
+    {
+        path: '/:pathMatch(.*)*',
+        name: 'NotFound',
+        component: () => import('../views/NotFound')
+    }
+];
+
+// 聚合所有功能模块的路由
+const routes: RouteRecordRaw[] = [...baseRouter, ...productRouter];
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
-    routes: [
-        {
-            path: '/',
-            name: 'home',
-            component: () => import('../views/Home'),
-        },
-        {
-            path: '/about',
-            name: 'about',
-            component: () => import('../views/About'),
-        },
-        {
-            path: '/:pathMatch(.*)*',
-            name: 'NotFound',
-            component: () => import('../views/NotFound')
-        }
-    ],
+    routes,
 })
 
 export default router