From c9f8832d85b6a7aade2cbf930ba7c14edb38fce8 Mon Sep 17 00:00:00 2001
From: hechang27-sprt <hechang27@outlook.com>
Date: Thu, 26 Mar 2026 16:43:10 +0800
Subject: [PATCH] chore: update environment configs and menu-tree

- Update env files and vite config for development setup
- Menu tree changes for menu handling

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .env.development                   |   1 +
 .env.production                    |   3 +-
 packages/manage/head/menu-tree.vue | 189 +++++++++++++++++------------
 vite.config.ts                     |   2 +
 4 files changed, 117 insertions(+), 78 deletions(-)

diff --git a/.env.development b/.env.development
index 0a175e1..6d24e78 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,4 @@
 # VUE_APP_BASE_URL="http://172.16.16.120:8080"
 # VUE_APP_BASE_URL="http://10.100.0.108:8082"
 VUE_APP_BASE_URL="http://localhost:80"
+VITE_APP_VERSION=$npm_package_version
diff --git a/.env.production b/.env.production
index 28cc3da..86c2564 100644
--- a/.env.production
+++ b/.env.production
@@ -1,2 +1,3 @@
 NODE_ENV="production"
-VUE_APP_BASE_URL=""
\ No newline at end of file
+VUE_APP_BASE_URL=""
+VITE_APP_VERSION=$npm_package_version
diff --git a/packages/manage/head/menu-tree.vue b/packages/manage/head/menu-tree.vue
index e6e3d5d..f53a5cf 100644
--- a/packages/manage/head/menu-tree.vue
+++ b/packages/manage/head/menu-tree.vue
@@ -1,122 +1,157 @@
 <template>
-    <el-menu :default-active="active" router :mode="mode" :class="mode" :text-color="state.style.menuColor"
-        :background-color="mode == 'horizontal' ? state.style.headBg : state.style.menuBg"
-        :active-text-color="state.style.menuActiveColor" :size="state.size.size">
-        <div class="title" v-if="title">
-            <el-image class="logo" v-if="logo" :src="logo" fit="fit" />
-            {{ title || t('title') }}
-        </div>
-        <template v-for="menu in data || state.menus">
-            <template v-if="menu.children && menu.children.length > 0">
-                <el-sub-menu :index="getPath(menu)" :key="menu.path">
-                    <template #title>
-                        <component class="icon" :is="menu.icon || state.style.menuDefaultIcon">
-                        </component>
-                        <span>{{ menu.title || t(menu.i18n) }}</span>
-                    </template>
-                    <el-menu-item v-for="child in menu.children" :index="getPath(child)" :router="router">
-                        <component class="icon" :width="getters.menuIconSize" :height="getters.menuIconSize"
-                            :is="child.icon || state.style.menuDefaultIcon">
-                        </component>
-                        {{ child.title || t(child.i18n) }}
-                    </el-menu-item>
-                </el-sub-menu>
-            </template>
-            <template v-else>
-                <el-menu-item :index="getPath(menu)" :key="menu.path" :router="router">
-                    <component class="icon" :is="menu.icon || state.style.menuDefaultIcon"></component>
-                    <span>{{ menu.title || t(menu.i18n) }}</span>
-                </el-menu-item>
+  <div class="menu-container">
+    <el-menu
+      :default-active="active"
+      router
+      :mode="mode"
+      :class="mode"
+      :text-color="state.style.menuColor"
+      :background-color="mode == 'horizontal' ? state.style.headBg : state.style.menuBg"
+      :active-text-color="state.style.menuActiveColor"
+      :size="state.size.size"
+    >
+      <div class="title" v-if="title">
+        <el-image class="logo" v-if="logo" :src="logo" fit="fit" />
+        {{ title || t("title") }}
+      </div>
+      <template v-for="menu in data || state.menus">
+        <template v-if="menu.children && menu.children.length > 0">
+          <el-sub-menu :index="getPath(menu)" :key="menu.path">
+            <template #title>
+              <component class="icon" :is="menu.icon || state.style.menuDefaultIcon"> </component>
+              <span>{{ menu.title || t(menu.i18n) }}</span>
             </template>
+            <el-menu-item v-for="child in menu.children" :index="getPath(child)" :router="router">
+              <component
+                class="icon"
+                :width="getters.menuIconSize"
+                :height="getters.menuIconSize"
+                :is="child.icon || state.style.menuDefaultIcon"
+              >
+              </component>
+              {{ child.title || t(child.i18n) }}
+            </el-menu-item>
+          </el-sub-menu>
+        </template>
+        <template v-else>
+          <el-menu-item :index="getPath(menu)" :key="menu.path" :router="router">
+            <component class="icon" :is="menu.icon || state.style.menuDefaultIcon"></component>
+            <span>{{ menu.title || t(menu.i18n) }}</span>
+          </el-menu-item>
         </template>
+      </template>
     </el-menu>
+    <div class="menu-footer">
+      <slot name="footer" />
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
-import { ref, onMounted, reactive } from "vue"
+import { ref, onMounted, reactive } from "vue";
 import { useI18n } from "vue3-i18n";
 const { t } = useI18n();
 
-const { state, getters } = useStore()
+const { state, getters } = useStore();
 const props = defineProps({
-    mode: {
-        type: String,
-        default: 'vertical'
-    },
-    data: {
-        type: Array<any>(),
-        default: null
-    },
-    logo: {
-        type: String,
-        default: null,
-    },
-    title: {
-        type: String,
-        default: null,
-    },
+  mode: {
+    type: String,
+    default: "vertical",
+  },
+  data: {
+    type: Array<any>(),
+    default: null,
+  },
+  logo: {
+    type: String,
+    default: null,
+  },
+  title: {
+    type: String,
+    default: null,
+  },
 });
 
-const style = reactive({ 'margin-right': '10px', width: getters.menuIconSize, height: getters.menuIconSize })
+const { VITE_APP_VERSION, VITE_GIT_HASH } = import.meta.env;
+const style = reactive({ "margin-right": "10px", width: getters.menuIconSize, height: getters.menuIconSize });
 const router = useRouter();
 const getPath = (menu) => {
-    const prefix = menu.path.startsWith("/") ? "" : "/";
-    return prefix + menu.path;
+  const prefix = menu.path.startsWith("/") ? "" : "/";
+  return prefix + menu.path;
 };
 const active = ref("");
 onMounted(() => {
-    setTimeout(() => {
-        active.value = router.currentRoute.value.path.substring(1);
-    }, 200);
-    router.push(active.value);
-})
-
+  setTimeout(() => {
+    active.value = router.currentRoute.value.path.substring(1);
+  }, 200);
+  router.push(active.value);
+});
 </script>
 
 <style scoped lang="scss">
+.menu-container {
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .el-menu {
+    flex: 1;
+  }
+
+  .menu-footer {
+    background-color: v-bind("state.style.menuBg");
+    color: v-bind("state.style.menuColor");
+    font-size: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
 .title {
-    height: v-bind('state.size.headHeight');
-    width: v-bind('state.size.asideWidth');
-    text-align: center;
-    font-size: v-bind('state.size.titleSize');
-    line-height: v-bind('state.size.headHeight');
-    font-weight: bold;
-    color: v-bind('state.style.menuColor');
+  height: v-bind("state.size.headHeight");
+  width: v-bind("state.size.asideWidth");
+  text-align: center;
+  font-size: v-bind("state.size.titleSize");
+  line-height: v-bind("state.size.headHeight");
+  font-weight: bold;
+  color: v-bind("state.style.menuColor");
 }
 
 .horizontal {
-    padding-top: 1px;
-    height: v-bind('state.size.headHeight');
-    border: none;
-    // display: inline-flex;
+  padding-top: 1px;
+  height: v-bind("state.size.headHeight");
+  border: none;
+  // display: inline-flex;
 }
 
 .vertical {
-    padding-top: 1px;
-    // height: v-bind('state.size.mainHeight');
-    height: 100%;
-    border: none;
+  padding-top: 1px;
+  // height: v-bind('state.size.mainHeight');
+  height: 100%;
+  border: none;
 }
 
 .icon {
-    margin-right: 10px;
-    width: v-bind('state.size.menuIconSize');
-    height: v-bind('state.size.menuIconSize');
+  margin-right: 10px;
+  width: v-bind("state.size.menuIconSize");
+  height: v-bind("state.size.menuIconSize");
 }
 
 .el-menu-item.is-active {
-    background-color: v-bind('state.style.menuActiveBg');
+  background-color: v-bind("state.style.menuActiveBg");
 }
 
 .vertical .el-sub-menu,
 .vertical .el-menu-item {
-    min-width: v-bind('state.size.asideWidth') !important;
-    font-size: v-bind('state.size.fontSize') !important;
+  min-width: v-bind("state.size.asideWidth") !important;
+  font-size: v-bind("state.size.fontSize") !important;
 }
 
 .horizontal .el-sub-menu,
 .horizontal .el-menu-item {
-    font-size: v-bind('state.size.fontSize') !important;
+  font-size: v-bind("state.size.fontSize") !important;
 }
 </style>
diff --git a/vite.config.ts b/vite.config.ts
index 226598b..0cd0cac 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,9 +5,11 @@ import legacy from "@vitejs/plugin-legacy";
 import dts from "vite-plugin-dts";
 import VueDevTools from "vite-plugin-vue-devtools";
 import { resolve } from "path";
+import { execSync } from "child_process";
 
 export default defineConfig(({ command, mode }) => {
   const isLibBuild = process.env.BUILD_LIB === "true";
+  process.env.VITE_GIT_HASH = execSync("git ls-files -s | git hash-object --stdin").toString().trimEnd();
 
   return {
     envPrefix: ["VITE_", "VUE_"],