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>
3 months ago · c9f8832d85
4 changed files with 117 additions and 78 deletions
--- a/.env.development
+++ b/.env.development
@ -1,3 +1,4 @@
				@@ -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
--- a/.env.production
+++ b/.env.production
@ -1,2 +1,3 @@
				@@ -1,2 +1,3 @@
 NODE_ENV="production"
-VUE_APP_BASE_URL=""
+VUE_APP_BASE_URL=""
+VITE_APP_VERSION=$npm_package_version
--- a/packages/manage/head/menu-tree.vue
+++ b/packages/manage/head/menu-tree.vue
@ -1,122 +1,157 @@
				@@ -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>
--- a/vite.config.ts
+++ b/vite.config.ts
@ -5,9 +5,11 @@ import legacy from "@vitejs/plugin-legacy";
				@@ -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_"],