优化全局样式和 element ui框架，修改nacos-federation，增加打包依赖分析等

front-end/app-product/package.json

@@ -20,13 +20,16 @@
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
     "@originjs/vite-plugin-federation": "^1.4.1",
     "@tsconfig/node22": "^22.0.2",
     "@types/node": "^22.18.6",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitejs/plugin-vue-jsx": "^5.1.1",
     "@vue/tsconfig": "^0.7.0",
+    "element-plus": "^2.11.3",
     "npm-run-all2": "^8.0.4",
+    "rollup-plugin-visualizer": "^6.0.3",
     "typescript": "~5.8.3",
     "vite": "^7.1.6",
     "vite-plugin-vue-devtools": "^8.0.2",

front-end/app-product/src/features/product/views/ProductDetail/ProductDetail.module.less

@@ -0,0 +1,5 @@
+.ProductDetail {
+  .title {
+    color: blue;
+  }
+}

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

@@ -1,3 +1,5 @@
+import styles from './ProductDetail.module.less'
+
 import { product } from '@domains/product/di/productModule';
 import { ProductType } from '@domains/product/domain/type/ProductType';
 import { defineComponent, onMounted, reactive } from 'vue'
@@ -34,8 +36,8 @@ export default defineComponent({
         }
 
         return () => (
-            <div class="ProductDetail">
-                <h1>商品领域模块 - 商品详情页面</h1>
+            <div class={ styles.ProductDetail }>
+                <h1 class={ styles.title }>商品领域模块 - 商品详情页面</h1>
                 <hr/>
                 <p>商品id：{ state.id }</p>
                 { state.item.name }

front-end/app-product/src/features/product/views/ProductList/ProductList.module.less

@@ -1,5 +1,5 @@
 .ProductList {
   .test {
-    color: red;
+    color: var(--theme-color);
   }
 }

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

@@ -4,6 +4,7 @@ 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';
+import { ElCard, ElIcon, Icons } from "shared/element-plus";
 
 interface storeType {
     list: Array<ProductType>
@@ -29,25 +30,41 @@ export default defineComponent({
             console.log("state.list: ", state.list);
         }
 
+        const ElCardHeader = () => {
+            return (
+                <div class="card-header">
+                    <ElIcon size={ 15 }>
+                        <Icons.Position></Icons.Position>
+                    </ElIcon>
+                    <span>Card 头部</span>
+                </div>
+            )
+        }
+
+        const ElCardFooter = () => {
+            return <div>Footer 底部</div>
+        }
+
         return () => (
             <div class={ styles.ProductList }>
                 <h1 class={ styles.test }>商品领域模块 - 商品列表页面3</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>
+                <ElCard>
+                    { {
+                        header: () => ElCardHeader(),
+                        footer: () => ElCardFooter(),
+                        default: () =>
+                            state.list.map(item =>
+                                <p key={ item.id } onClick={ () => {
+                                    router.push({ name: 'ProductDetail', query: { id: item.id } });
+                                } }>
+                                    { item.id } | { item.name } | ¥{ item.price }
+                                </p>
+                            )
+                    } }
+                </ElCard>
+
             </div>
         )
     }

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

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

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

@@ -0,0 +1,29 @@
+/// <reference types="vite/client" />
+
+declare module 'shared/infra' {
+    export const http: any;
+}
+
+declare module 'shared/utils' {
+    export const UrlCheckUtils: any;
+}
+
+declare module 'shared/element-plus' {
+    import * as ElementPlus from 'element-plus';
+    import * as ElementPlusIcons from '@element-plus/icons-vue';
+    import type { App } from 'vue';
+    export * from 'element-plus';
+    export import Icons = ElementPlusIcons;
+
+    export function init(app: App): void;
+
+    const defaultExport: typeof ElementPlus & {
+        Icons: typeof ElementPlusIcons;
+        init: typeof init;
+    };
+    export default defaultExport;
+}
+
+declare module 'shared/normalize' {
+    export const init: () => void;
+}

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

@@ -5,6 +5,7 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 import federation from '@originjs/vite-plugin-federation';
 import { fileURLToPath, URL } from "node:url";
 import { nacosRegVitePlugin } from "nacos-federation";
+import { visualizer } from 'rollup-plugin-visualizer';
 
 export default defineConfig(async ({ mode }) => {
     const env = loadEnv(mode, process.cwd());
@@ -35,7 +36,14 @@ export default defineConfig(async ({ mode }) => {
             }),
             vue(),
             vueJsx(),
-            vueDevTools()
+            vueDevTools(),
+            visualizer({
+                title: "商品模块依赖分析",
+                filename: 'dist/stats.html', // 分析文件输出路径
+                open: false, // 构建完成后自动打开
+                gzipSize: true, // 显示gzip后的大小
+                brotliSize: true, // 显示brotli后的大小
+            })
         ],
         build: {
             target: 'esnext',