完成对app-shared 的拆分

front-end/app-product/package.json

@@ -7,10 +7,9 @@
     "node": "^20.19.0 || >=22.12.0"
   },
   "scripts": {
-    "dev": "vite --port 5001 --strictPort",
-    "serve": "vite preview --port 5001 --strictPort",
-    "build": "vite build",
-    "all": "npm run build && npm run serve",
+    "dev": "concurrently \"npm run build\" \"npm run serve\"",
+    "serve": "vite preview  --port 1301 --strictPort",
+    "build": "vite build --watch",
     "type-check": "vue-tsc --build"
   },
   "dependencies": {

front-end/app-product/src/domains/product/di/productModule.ts

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

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

@@ -1,7 +1,7 @@
-import { product } from 'mainApp/productService';
-import { ProductType } from '@domains/product/domain/type/ProductType';
-import { defineComponent, onMounted, reactive } from 'vue'
-import { useRoute } from 'vue-router'
+import {product} from '@domains/product/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
@@ -9,7 +9,6 @@ interface storeType {
 }
 
 export default defineComponent({
-    name: "productModule-ProductDetail",
     setup() {
         const route = useRoute();
         const productService = product.createProductApplicationService();

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

@@ -1,14 +1,13 @@
-import { defineComponent, onMounted, reactive } from 'vue'
-import { useRouter } from 'vue-router';
-import { product } from 'mainApp/productService';
-import { ProductType } from '@domains/product/domain/type/ProductType';
+import {defineComponent, onMounted, reactive} from 'vue'
+import {useRouter} from 'vue-router';
+import {product} from '@domains/product/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();
@@ -30,7 +29,7 @@ export default defineComponent({
 
         return () => (
             <div class="ProductList">
-                <h1>商品领域模块 - 商品列表页面</h1>
+                <h1>商品领域模块 - 商品列表页面3</h1>
                 <hr />
                 <h2>从Deno 后端 加载的数据，点击进详情</h2>
                 <ul>

front-end/app-product/src/shared/types/product-federation.d.ts

@@ -1,7 +1,3 @@
-declare module 'mainApp/productService' {
-    export const product: any;
-}
-
 declare module 'shared/infra' {
     export const http: any;
 }

front-end/app-product/vite.config.ts

@@ -6,12 +6,16 @@ import federation from '@originjs/vite-plugin-federation';
 import {fileURLToPath, URL} from "node:url";
 
 export default defineConfig({
+    server: {
+        port: 1301,
+        host: '0.0.0.0',
+        strictPort: true,
+    },
     plugins: [
         federation({
             name: 'product',
             remotes: {
-                mainApp: "http://localhost:5000/assets/remoteEntry.js",
-                shared: 'http://localhost:5555/assets/remoteEntry.js'
+                shared: 'http://localhost:1333/assets/remoteEntry.js'
             },
             exposes: { // 暴露给主应用的资源（按功能分组）
                 './ProductDomain': './src/domains/product/index.ts', // 领域层（实体、服务、接口等）