完成对app-shared 的拆分

README.md

@@ -26,8 +26,8 @@
 ## 开发任务
 
 - [x] 基于DDD理念改造
-- [ ] 【即将完成】基于 vite-plugin-federation 拆分领域模块为联邦模块，实现微前端
+- [x] 基于 vite-plugin-federation 拆分领域模块为联邦模块，实现微前端
-- [ ] 领域模块实现 docker自动化构建部署上线
+- [ ] 领域模块实现 docker 自动化构建部署上线
 - [ ] Deno集成GraphQL
 
 ## 文件夹结构
@@ -39,8 +39,8 @@
 ├── back-end          # 【后端】基于Deno写的后端 测试接口，仅供测试
 ├── doc               # 一些markdown笔记
 ├── front-end         # 前端 微服务 项目
-│   ├── app-car       # 独立的【购物车】领域模块
 │   ├── app-product   # 独立的【商品】领域模块
+│   ├── app-shared    # 独立的 共享资源 模块
 │   ├── ....          # 实际项目还会有更多其他的领域模块
 │   └── main-app      # 主应用（入口应用）
 └── README.md         # 帮助文档

front-end/app-product/package.json

@@ -7,14 +7,12 @@
     "node": "^20.19.0 || >=22.12.0"
   },
   "scripts": {
-    "dev": "vite --port 5001 --strictPort",
+    "dev": "concurrently \"npm run build\" \"npm run serve\"",
-    "serve": "vite preview --port 5001 --strictPort",
+    "serve": "vite preview  --port 1301 --strictPort",
-    "build": "vite build",
+    "build": "vite build --watch",
-    "all": "npm run build && npm run serve",
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
-    "axios": "^1.12.2",
     "pinia": "^3.0.3",
     "vue": "^3.5.18",
     "vue-router": "^4.0.6"

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

@@ -1,9 +1,7 @@
 // 从商品联邦模块导入领域层资源
-import {
+import {ProductRepository} from "@domains/product/ports/repositories/ProductRepository";
-    ProductApplicationService,
+import {HttpProductRepository} from "@domains/product/infr/api/HttpProductRepository";
-    HttpProductRepository,
+import {ProductApplicationService} from "@domains/product/application/services/ProductApplicationService";
-    ProductRepository
-} from 'productModule/ProductDomain';
 
 /**
  * 商品领域的依赖注入配置

front-end/app-product/src/domains/product/infr/api/HttpProductRepository.ts

@@ -1,10 +1,10 @@
-import { Product } from "@domains/product/domain/entities/Product.ts";
+import {Product} from "@domains/product/domain/entities/Product.ts";
-import { ProductType } from "@domains/product/domain/type/ProductType.ts";
+import {ProductType} from "@domains/product/domain/type/ProductType.ts";
-import { ProductRepository } from "@domains/product/ports/repositories/ProductRepository";
+import {ProductRepository} from "@domains/product/ports/repositories/ProductRepository";
-// @ts-ignore
+import {http} from "shared/infra";
-import { http } from "mainApp/shared";
 import HttpConfig from "../config/HttpConfig";
 
+
 /**
  * HTTP商品仓储实现 - 实现商品数据的HTTP访问
  * 这是基础设施层，负责具体的数据获取实现 

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

@@ -1,7 +1,7 @@
-import { product } from 'mainApp/productService';
+import {product} from '@domains/product/di/productModule';
-import { ProductType } from '@domains/product/domain/type/ProductType';
+import {ProductType} from '@domains/product/domain/type/ProductType';
-import { defineComponent, onMounted, reactive } from 'vue'
+import {defineComponent, onMounted, reactive} from 'vue'
-import { useRoute } from 'vue-router'
+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 {defineComponent, onMounted, reactive} from 'vue'
-import { useRouter } from 'vue-router';
+import {useRouter} from 'vue-router';
-import { product } from 'mainApp/productService';
+import {product} from '@domains/product/di/productModule';
-import { ProductType } from '@domains/product/domain/type/ProductType';
+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,3 +1,3 @@
-declare module 'mainApp/productService' {
+declare module 'shared/infra' {
-    export const product: any;
+    export const http: any;
 }

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

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite';
+import {defineConfig} from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
@@ -6,13 +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: 'productModule', // 联邦模块名称（主应用通过此名称引用）
+            name: 'product',
-            filename: 'remoteEntry.js',
-            // 关键：声明远程模块（主模块）
             remotes: {
-                mainApp: "http://localhost:5000/assets/remoteEntry.js"
+                shared: 'http://localhost:1333/assets/remoteEntry.js'
             },
             exposes: { // 暴露给主应用的资源（按功能分组）
                 './ProductDomain': './src/domains/product/index.ts', // 领域层（实体、服务、接口等）
@@ -20,7 +23,6 @@ export default defineConfig({
             },
             shared: {
                 vue: { generate:false, requiredVersion: '^3.5.18' },
-                axios: { generate:false, requiredVersion: '^1.12.2' },
                 'vue-router': { generate:false, requiredVersion: '^4.0.6' },
                 pinia: { generate:false, requiredVersion: '^3.0.3' }
             }

front-end/app-shared/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "app-shared",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "dev": "concurrently \"npm run build\" \"npm run serve\"",
+    "serve": "vite preview  --port 1333 --strictPort",
+    "build": "vite build --watch",
+    "type-check": "vue-tsc --build"
+  },
+  "dependencies": {
+    "axios": "^1.12.2"
+  },
+  "devDependencies": {
+    "@originjs/vite-plugin-federation": "^1.4.1",
+    "typescript": "~5.8.0",
+    "vite": "^7.0.6"
+  }
+}

front-end/app-shared/src/config/index.ts

@@ -0,0 +1,2 @@
+export * from './HttpConfig';
+export * from './ThemeConfig';

front-end/app-shared/src/index.ts

@@ -0,0 +1,3 @@
+export * from './infra';
+export * from './utils';
+export * from './config';

front-end/app-shared/src/infra/AxiosInfra.ts

@@ -1,5 +1,5 @@
-import axios, { type AxiosInstance, AxiosError, type AxiosRequestConfig, type InternalAxiosRequestConfig } from "axios";
+import axios, {AxiosError, type AxiosInstance, type AxiosRequestConfig} from "axios";
-import { UrlCheckUtils } from '@shared/utils/index'
+import {UrlCheckUtils} from '../utils/index'
 
 
 class AxiosInfra {

front-end/app-shared/src/infra/index.ts

@@ -0,0 +1 @@
+export {default as http} from "./AxiosInfra"

front-end/app-shared/src/types/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

front-end/app-shared/src/utils/UrlCheckUtils.ts

@@ -1,6 +1,6 @@
-import { HttpConfig } from '@shared/config/HttpConfig'
+import {HttpConfig} from '../config'
 
-export default class UrlCheckUtils {
+export class UrlCheckUtils {
 
     public static check() {
         if (import.meta.env.MODE === 'production') {

front-end/app-shared/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './UrlCheckUtils';

front-end/app-shared/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.test.ts"
+  ],
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": false,
+    "target": "ES2020",
+    "module": "ESNext",
+    // 模块导出优化
+    "resolveJsonModule": true,
+    // 允许导入JSON文件
+    "isolatedModules": true,
+    // 确保每个文件可被独立转译（Vite等工具要求）
+    "skipLibCheck": true,
+    // 跳过库类型检查，加快编译速度
+
+    "paths": {
+      "@/*": [
+        "./src/app/*"
+      ],
+      "@shared/*": [
+        "./src/shared/*"
+      ],
+      "@features/*": [
+        "./src/features/*"
+      ],
+      "@domains/*": [
+        "./src/domains/*"
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+import {defineConfig} from 'vite'
+import federation from '@originjs/vite-plugin-federation';
+
+// https://vite.dev/config/
+export default defineConfig({
+    server: {
+        port: 1333,
+        host: '0.0.0.0',
+        strictPort: true,
+    },
+    plugins: [
+        federation({
+            name: 'shared',
+            exposes: {
+                "./config": "./src/config/index.ts",
+                "./infra": "./src/infra/index.ts",
+                "./utils": "./src/utils/index.ts",
+            },
+            shared: {
+                axios: {generate: false, requiredVersion: '^1.12.2'}
+            }
+        })
+    ],
+    build: {
+        target: 'esnext',
+        minify: false,
+        cssCodeSplit: true,
+        rollupOptions: {
+            input: './src/index.ts',
+            output: {
+                format: 'esm',
+                minifyInternalExports: false
+            }
+        }
+    }
+})

front-end/main-app/package.json

@@ -7,14 +7,12 @@
     "node": "^20.19.0 || >=22.12.0"
   },
   "scripts": {
-    "dev": "vite --port 5000 --strictPort",
+    "dev": "concurrently \"npm run build\" \"npm run serve\"",
-    "serve": "vite preview --port 5000 --strictPort",
+    "serve": "vite preview --port 1300 --strictPort",
-    "build": "vite build",
+    "build": "vite build --watch",
-    "all": "npm run build && npm run serve",
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
-    "axios": "^1.12.2",
     "pinia": "^3.0.3",
     "vue": "^3.5.18",
     "vue-router": "^4.0.6"

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

@@ -1,5 +1,6 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'
-import { productRouter } from 'productModule/ProductRouter'
+import {productRouter} from 'product/ProductRouter'
+
 
 const baseRouter: Array<RouteRecordRaw> = [
     {

front-end/main-app/src/app/views/Home.tsx

@@ -1,9 +1,8 @@
-import { defineComponent, reactive, onMounted } from 'vue'
+import {defineComponent, onMounted, reactive} from 'vue'
 import Header from '@/components/Header'
-import { HttpConfig } from '@shared/config/index'
+import {UrlCheckUtils} from 'shared/utils'
-import { UrlCheckUtils } from '@shared/utils'
+import {useCounterStore} from '@/stores/counter'
-import { useCounterStore } from '@/stores/counter'
+import {storeToRefs} from 'pinia'
-import { storeToRefs } from 'pinia'
 
 interface stateType {
   list: ListItemType[]

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

@@ -1,3 +0,0 @@
-export * from "./config/HttpConfig"
-export * from "./config/ThemeConfig"
-export { default as http } from "./infra/AxiosInfra"

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

@@ -1,6 +1,5 @@
 // 声明领域层类型
-declare module 'productModule/ProductDomain' {
+declare module 'product/ProductDomain' {
-    import type { DefineComponent } from 'vue';
     // 商品实体类型（与联邦模块一致）
     export class Product {
         id: number;
@@ -36,6 +35,10 @@ declare module 'productModule/ProductDomain' {
 //     export const ProductDetail: DefineComponent; // 商品详情页
 // }
 
-declare module 'productModule/ProductRouter' {
+declare module 'product/ProductRouter' {
     export const productRouter: RouteRecordRaw[];
 }
+
+declare module 'shared/utils' {
+    export const UrlCheckUtils: any;
+}

front-end/main-app/src/shared/types/shim.d.ts

@@ -1,4 +0,0 @@
-declare module '*.vue' {
-    import Vue from 'vue';
-    export default Vue;
-}

front-end/main-app/src/shared/utils/index.ts

@@ -1,3 +0,0 @@
-import UrlCheckUtils from './UrlCheckUtils';
-
-export { UrlCheckUtils };

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

@@ -1,6 +1,6 @@
-import { fileURLToPath, URL } from 'node:url'
+import {fileURLToPath, URL} from 'node:url'
 
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
@@ -8,6 +8,11 @@ import federation from '@originjs/vite-plugin-federation';
 
 // https://vite.dev/config/
 export default defineConfig({
+  server: {
+    port: 1300,
+    host: '0.0.0.0',
+    strictPort: true,
+  },
   plugins: [
     vue(),
     vueJsx(),
@@ -15,11 +20,8 @@ export default defineConfig({
     federation({
       name: 'mainApp', // 主应用模块名（联邦模块需通过此名引用）
       remotes: { // 配置远程联邦模块地址（开发/生产需对应）
-        productModule: 'http://localhost:5001/assets/remoteEntry.js'
+        product: 'http://localhost:1301/assets/remoteEntry.js',
-      },
+        shared: 'http://localhost:1333/assets/remoteEntry.js'
-      exposes: {
-        "./shared": "./src/shared/index.ts",
-        "./productService": "./src/app/di/productModule.ts",
       },
       shared: {
         vue: { requiredVersion: '^3.5.18' },