菜单布局。动画。

docker/Dockerfile

@@ -0,0 +1,39 @@
+FROM nginx
+MAINTAINER jgiot@163.com
+RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
+VOLUME /tmp
+ENV LANG en_US.UTF-8
+RUN echo "server {  \
+                      listen       80; \
+                      client_max_body_size 100m;\
+                      location   /client-server/ { \
+                        proxy_pass              http://139.155.176.112:7101/; \
+                        proxy_redirect          off; \
+                        proxy_set_header        Host client-server; \
+                        proxy_set_header        X-Real-IP \$remote_addr; \
+                        proxy_set_header        X-Forwarded-For \$proxy_add_x_forwarded_for; \
+                     } \
+                      location /jgfile/ { \
+                              proxy_pass          http://139.155.176.112:19000/jgfile/; \
+                              proxy_redirect      off; \
+                              proxy_set_header    Host jgfile; \
+                              proxy_set_header    X-Real-IP \$remote_addr; \
+                              proxy_set_header    X-Forwarded-For \$proxy_add_x_forwarded_for; \
+                      } \
+                      #解决Router(mode: 'history')模式下，刷新路由地址不能找到页面的问题 \
+                      location / { \
+                         root   /var/www/html/; \
+                          index  index.html index.htm; \
+                          if (!-e \$request_filename) { \
+                              rewrite ^(.*)\$ /index.html?s=\$1 last; \
+                              break; \
+                          } \
+                      } \
+                      access_log  /var/log/nginx/access.log ; \
+              } " > /etc/nginx/conf.d/default.conf \
+    &&  mkdir  -p  /var/www \
+    &&  mkdir -p /var/www/html
+
+ADD dist/ /var/www/html/
+EXPOSE 80
+EXPOSE 443

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "dev": "vite serve --mode development",
-    "build:prod": "vite build --mode production && vue-tsc --noEmit",
+    "build": "vite build --mode production ",
     "lint:eslint": "eslint  --fix --ext .ts,.js,.vue ./src ",
     "lint:prettier": "prettier --write \"**/*.{js,cjs,ts,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint  \"**/*.{css,scss,vue}\" --fix",
@@ -46,7 +46,6 @@
     "@vueuse/core": "^10.9.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "5.1.10",
-    "animate.css": "^4.1.1",
     "axios": "^1.6.7",
     "echarts": "^5.5.0",
     "element-plus": "^2.6.0",

pnpm-lock.yaml

@@ -26,9 +26,6 @@ importers:
       '@wangeditor/editor-for-vue':
         specifier: 5.1.10
         version: 5.1.10(@wangeditor/editor@5.1.23)(vue@3.5.13(typescript@5.7.3))
-      animate.css:
-        specifier: ^4.1.1
-        version: 4.1.1
       axios:
         specifier: ^1.6.7
         version: 1.7.9
@@ -1444,9 +1441,6 @@ packages:
   alien-signals@1.0.3:
     resolution: {integrity: sha512-zQOh3wAYK5ujENxvBBR3CFGF/b6afaSzZ/c9yNhJ1ENrGHETvpUuKQsa93Qrclp0+PzTF93MaZ7scVp1uUozhA==}
 
-  animate.css@4.1.1:
-    resolution: {integrity: sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==}
-
   ansi-escapes@4.3.2:
     resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
     engines: {node: '>=8'}
@@ -6220,8 +6214,6 @@ snapshots:
 
   alien-signals@1.0.3: {}
 
-  animate.css@4.1.1: {}
-
   ansi-escapes@4.3.2:
     dependencies:
       type-fest: 0.21.3

src/main.ts

@@ -13,7 +13,6 @@ import "element-plus/dist/index.css";
 import "element-plus/theme-chalk/dark/css-vars.css";
 import "@/styles/index.scss";
 import "uno.css";
-import "animate.css";
 
 // avue
 import { setupEleAvue } from "@/plugins";

src/router/index.ts

@@ -15,6 +15,11 @@ export const constantRoutes: RouteRecordRaw[] = [
   //     },
   //   ],
   // },
+  {
+    path: "/",
+    redirect: "/main/home",
+    meta: { hidden: true },
+  },
 
   {
     path: "/main",

src/views/main/components/layout.vue

@@ -2,7 +2,11 @@
 
 <template>
   <div class="layout">
-    <router-view />
+    <router-view v-slot="{ Component }">
+      <transition name="fade" mode="out-in" appear>
+        <component :is="Component" />
+      </transition>
+    </router-view>
   </div>
 </template>
 
@@ -12,4 +16,24 @@
   flex: 1;
   border: 2px solid #0d9f12;
 }
+
+.fade-leave-active,
+.fade-enter-active {
+  transition: all 0.3s;
+}
+
+/* 可能为enter失效，拆分为 enter-from和enter-to */
+.fade-enter-from {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+.fade-enter-to {
+  opacity: 1;
+  transform: translateY(0px);
+}
+
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
 </style>

src/views/main/components/menu.vue

@@ -71,12 +71,11 @@ const handleMenuClick = (menu: MenuItem) => {
   border: 2px solid blue;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
-  padding: 45px;
+  padding: 150px 45px;
 
   .menu-box {
-    margin-bottom: 76px;
     width: 60px;
 
     .icon {