更新若干功能

backend/src/components/CommonAside.vue

@@ -1,7 +1,10 @@
 <template>
   <el-aside
     :width="width"
-    :class="['common-aside', { 'is-collapsed': isCollapse }]"
+    :class="[
+      'common-aside',
+      { 'is-collapsed': isCollapse, 'has-footer': miniApps.length > 0 },
+    ]"
   >
     <!-- 加载状态 -->
     <div v-if="loading" class="loading-spinner">
@@ -164,6 +167,26 @@
         </el-sub-menu>
       </template>
     </el-menu>
+
+    <!-- 底部：平台「小程序配置」里的小程序码，吸附侧栏底部 -->
+    <div v-if="miniApps.length" class="aside-footer">
+      <div class="mini-qrcode" :class="{ 'is-collapsed': isCollapse }">
+        <el-image
+          :src="miniApps[0].qrcodeSrc"
+          :preview-src-list="miniQrcodePreview"
+          :initial-index="0"
+          preview-teleported
+          hide-on-click-modal
+          fit="contain"
+          class="mini-qrcode-img"
+          :title="miniApps[0].name || '小程序码'"
+        />
+        <div v-if="!isCollapse" class="mini-qrcode-name">
+          {{ miniApps[0].name || "小程序"
+          }}<span v-if="miniApps.length > 1"> 等 {{ miniApps.length }} 个</span>
+        </div>
+      </div>
+    </div>
   </el-aside>
 </template>
 
@@ -172,6 +195,7 @@ import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { Document, Warning } from "@element-plus/icons-vue";
 import { useAllDataStore, useMenuStore } from "@/stores";
+import { getSiteMiniApps } from "@/api/site";
 
 const emit = defineEmits(["menu-click"]);
 
@@ -195,6 +219,37 @@ const activeBgColor = ref("#3973FF");
 
 const currentModuleId = ref(null);
 
+// ---------- 底部小程序码 ----------
+// 来源：平台端「系统设置 → 小程序配置」中已启用且上传了二维码的小程序，
+// 通过公开接口 /site/miniapp 读取；相对地址按接口基址补全。
+const miniApps = ref([]);
+const miniQrcodePreview = computed(() =>
+  miniApps.value.map((app) => app.qrcodeSrc),
+);
+
+const resolveAssetUrl = (url) => {
+  const value = String(url || "").trim().replace(/\\/g, "/");
+  if (!value) return "";
+  if (/^(https?:\/\/|data:|blob:)/i.test(value)) return value;
+  const base = String(import.meta.env.VITE_API_BASE_URL || "").replace(
+    /\/$/,
+    "",
+  );
+  return `${base}/${value.replace(/^\/+/, "")}`;
+};
+
+const fetchMiniApps = async () => {
+  try {
+    const res = await getSiteMiniApps();
+    if (res.code !== 200) return;
+    miniApps.value = (res.data?.list || [])
+      .filter((app) => String(app.qrcode_url || "").trim())
+      .map((app) => ({ ...app, qrcodeSrc: resolveAssetUrl(app.qrcode_url) }));
+  } catch (error) {
+    // 侧栏二维码属于辅助信息，加载失败静默忽略，不影响菜单
+  }
+};
+
 const findMenuItem = (menus, targetIndex) => {
   for (const menu of menus) {
     if (menu.path === targetIndex) {
@@ -445,6 +500,8 @@ watch(
 );
 
 onMounted(() => {
+  fetchMiniApps();
+
   if (!menuStore.menus || menuStore.menus.length === 0) {
     setTimeout(() => {
       fetchMenus();
@@ -462,6 +519,8 @@ onUnmounted(() => {
 <style scoped lang="less">
 .common-aside {
   height: 100%;
+  // 底部二维码高度：菜单区据此预留滚动空间（无二维码时为 0）
+  --aside-footer-height: 0px;
   transition:
     width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
     background-color 0.3s ease;
@@ -517,11 +576,13 @@ h3 {
 // 菜单样式
 :deep(.el-menu) {
   border-right: none;
-  // 标题已移到 el-menu 之外，这里只减掉标题区高度
+  // 标题已移到 el-menu 之外，这里只减掉标题区高度；
+  // 底部再预留 footer 高度，保证最后一项能滚到二维码上方
   height: calc(100% - 60px);
   overflow-y: auto;
   overflow-x: hidden;
   padding: 16px 8px;
+  padding-bottom: calc(16px + var(--aside-footer-height));
   background: transparent;
 
   // 自定义滚动条样式
@@ -707,6 +768,84 @@ h3 {
   text-overflow: ellipsis;
 }
 
+// 底部小程序码：绝对定位吸附侧栏底部（Main.vue 将 el-aside 强制为 display:block，
+// 因此不用 flex 布局，避免样式被覆盖后失效）
+.common-aside.has-footer {
+  --aside-footer-height: 148px;
+}
+
+.common-aside.is-collapsed.has-footer {
+  --aside-footer-height: 72px;
+}
+
+.aside-footer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  height: var(--aside-footer-height);
+  box-sizing: border-box;
+  padding: 12px 8px 14px;
+  border-top: 1px solid rgba(255, 255, 255, 0.16);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  html.dark & {
+    border-top-color: rgba(255, 255, 255, 0.08);
+  }
+}
+
+.mini-qrcode {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  cursor: zoom-in;
+}
+
+.mini-qrcode-img {
+  width: 96px;
+  height: 96px;
+  padding: 4px;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
+  transition: width 0.3s ease, height 0.3s ease;
+
+  // el-image 的 img 不自带尺寸，需显式铺满容器（fit=contain 保留比例）
+  :deep(.el-image__inner) {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.mini-qrcode-name {
+  max-width: 180px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: rgba(255, 255, 255, 0.8);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  html.dark & {
+    color: var(--el-text-color-regular);
+  }
+}
+
+// 折叠态只留二维码，尺寸收紧避免撑破 64px 窄栏
+.mini-qrcode.is-collapsed {
+  .mini-qrcode-img {
+    width: 40px;
+    height: 40px;
+    padding: 2px;
+    border-radius: 6px;
+  }
+}
+
 // 响应式设计
 // 注意：手机端（≤768px）侧栏的抽屉式布局由 Main.vue 统一控制（fixed 定位 + transform 动画），
 // 此处不要再对 .common-aside 设置 width，避免覆盖父级布局逻辑。