docs: update vue3-advanced-demo and screenshot (originjs#307)

README-zh.md

@@ -12,9 +12,7 @@
  </p>
 
 支持模块联邦Module Federation的 Vite/Rollup 插件，可以与 [Webpack Module Federation](https://webpack.js.org/concepts/module-federation/) 兼容。
-## Star History
 
-[![Star History Chart](https://api.star-history.com/svg?repos=originjs/vite-plugin-federation&type=Date)](https://star-history.com/#originjs/vite-plugin-federation&Date)
 ## 运行效果
 
 ![Preview](./README-Preview.gif)
@@ -390,6 +388,9 @@ export default defineConfig({
   cacheDir: "node_modules/.cacheDir",
 }
 ```
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=originjs/vite-plugin-federation&type=Date)](https://star-history.com/#originjs/vite-plugin-federation&Date)
 
 ## Wiki
 

README.md

@@ -12,9 +12,7 @@ English | [简体中文](./README-zh.md)
 
 A Vite/Rollup plugin which support Module Federation.
 Inspired by Webpack and compatible with [Webpack Module Federation](https://webpack.js.org/concepts/module-federation/).
-## Star History
 
-[![Star History Chart](https://api.star-history.com/svg?repos=originjs/vite-plugin-federation&type=Date)](https://star-history.com/#originjs/vite-plugin-federation&Date)
 ## Running results
 
 ![Preview](./README-Preview.gif)
@@ -388,6 +386,10 @@ export default defineConfig({
 }
 ```
 
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=originjs/vite-plugin-federation&type=Date)](https://star-history.com/#originjs/vite-plugin-federation&Date)
+
 ## Wiki
 
 [Detailed design](https://github.com/originjs/vite-plugin-federation/wiki)

packages/examples/vue3-advanced-demo/team-green/vite.config.ts

@@ -17,7 +17,7 @@ export default defineConfig({
       shared: ['vue', 'pinia']
     })
   ],
-  base: 'http://127.0.0.1:5003',
+  base: 'http://localhost:5003',
   build: {
     minify: false,
     target: ["chrome89", "edge89", "firefox89", "safari15"]

packages/examples/vue3-advanced-demo/team-red/src/App.vue

@@ -5,9 +5,88 @@ import { ElButton } from 'element-plus'
 </script>
 
 <template>
-  <ProductPage name='porsche' />
+  <el-container class="container">
+      <el-aside class="aside">
+        <div class="head">
+          <div>
+            <img src="https://avatars.githubusercontent.com/u/81556572?s=200&v=4" alt="logo">
+            <span>vite-plugin-federation</span>
+          </div>
+        </div>
+
+        <el-menu>
+          <el-menu-item-group>
+            <el-menu-item index="/home">Home</el-menu-item>
+            <el-menu-item index="/store">Store</el-menu-item>
+            <el-menu-item index="/about">About</el-menu-item>
+          </el-menu-item-group>
+        </el-menu>
+      </el-aside>
+      <el-container class="content">
+        <component-header/>
+        <div class="main">
+          <ProductPage name='porsche' />
+        </div>
+        <component-footer/>
+      </el-container>
+    </el-container>
+
 </template>
 
 <style scoped>
+.layout {
+  min-height: 100vh;
+  background-color: #ffffff;
+}
+
+.container {
+  height: 100vh;
+}
+
+.aside {
+  width: 200px !important;
+  overflow: hidden;
+  overflow-y: auto;
+  -ms-overflow-style: none;
+  overflow: -moz-scrollbars-none;
+}
+
+.aside::-webkit-scrollbar {
+  display: none;
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+}
+
+.head > div {
+  display: flex;
+  align-items: center;
+}
+
+.head img {
+  width: 50px;
+  height: 50px;
+  margin-right: 10px;
+}
+
+.head span {
+  font-size: 16px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  max-height: 100vh;
+  overflow: hidden;
+}
 
+.main {
+  height: calc(100vh - 100px);
+  overflow: auto;
+  padding: 10px;
+}
 </style>

packages/examples/vue3-advanced-demo/team-red/src/components/ProductPage.vue

@@ -42,11 +42,6 @@ function clickProduct(sku: string) {
   font-family: "Helvetica Neue", Arial, sans-serif;
 }
 
-aside {
-  border-top: 1px solid gray;
-  padding-top: 20px;
-}
-
 dl {
   display: grid;
   grid-column-gap: 15px;
@@ -63,7 +58,7 @@ dd {
   margin: 0;
 }
 
-#app {
+.main {
   display: grid;
   grid-column-gap: 20px;
   grid-gap: 20px;
@@ -73,7 +68,7 @@ dd {
 }
 
 @media only screen and (max-width: 999px) {
-  #app {
+  .main {
     grid-template-areas:
       "store basket"
       "image name"
@@ -85,7 +80,7 @@ dd {
 }
 
 @media only screen and (min-width: 1000px) {
-  #app {
+  .main {
     grid-template-areas:
       "store basket  reco"
       "image name    reco"
@@ -159,7 +154,7 @@ dd {
   max-width: 100%;
 }
 
-#app {
+.main {
   outline: 3px dashed orangered;
   padding: 15px;
 }