工作台如果没有子节点就不渲染父节点

刘淇
1 parent 48ff5b95
Showing 2 changed files with 81 additions and 130 deletions
pages/mine/index.vue
pages/workbench/index.vue
@@ -8,19 +8,19 @@
       <view class="user-info-wrap">
         <!-- 头像 -->
         <up-avatar
-            :src="'/static/imgs/default-avatar.png'"
+            :src="userStore.isLogin ? userInfo.avatar : '/static/imgs/default-avatar.png'"
             size="100rpx"
             shape="circle"
             class="user-avatar"
         ></up-avatar>
  
-        <!-- 用户名+手机号+角色 -->
+        <!-- 用户名+手机号 -->
         <view class="user-info-content">
-          <view class="user-name">{{ userInfo.username || '未登录' }}</view>
-          <view class="user-phone">{{ userInfo.nickname || '--------' }}</view>
+          <view class="user-name">{{ userStore.isLogin ? userInfo.username : '未登录' }}</view>
+          <view class="user-phone">{{ userStore.isLogin ? userInfo.nickname : '--------' }}</view>
         </view>
  
-        <!-- 登录/编辑入口 -->
+        <!-- 登录入口 -->
         <up-button
             v-if="!userStore.isLogin"
             type="primary"
@@ -32,9 +32,8 @@
       </view>
     </view>
  
-
     <!-- 退出登录按钮 (仅登录状态显示) -->
-    <view v-if="userStore.isLogin" class="logout-btn-wrap ">
+    <view v-if="userStore.isLogin" class="logout-btn-wrap">
       <up-button
           type="primary"
           size="large"
@@ -43,77 +42,64 @@
         退出登录
       </up-button>
     </view>
-
-
   </view>
 </template>
  
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useUserStore } from '@/pinia/user' // 匹配你的 Pinia 路径
-import { onShow } from '@dcloudio/uni-app'
-
+import { computed } from 'vue'
+import { useUserStore } from '@/pinia/user'
+import {  showModal, onShow } from '@dcloudio/uni-app'
 // 初始化Pinia仓库
 const userStore = useUserStore()
-const userInfo = userStore.userInfo.user
-import { getDictList, getDictLabel, getDictSimpleList } from '@/common/utils/dict';
-// 示例1：获取ai_image_status的完整字典列表
-const aiImageStatusList = ref([]);
-// 示例2：获取ai_image_status中value=10的label
-const aiImageStatus10Label = ref('');
-
-// 获取ai_image_status的完整列表（包含所有字段）
-aiImageStatusList.value = getDictList('ai_image_status');
-// 获取ai_image_status中value=10的label
-aiImageStatus10Label.value = getDictLabel('ai_image_status', 10);
-console.log('13')
-console.log(aiImageStatusList.value)
-console.log(aiImageStatus10Label.value)
-
-// 可选：获取仅包含value和label的简化列表
-const simpleList = getDictSimpleList('ai_image_status');
-console.log('简化列表：', simpleList);
-console.log('24')
-
-
  
+// 计算属性获取用户信息（响应式）
+const userInfo = computed(() => userStore.userInfo.user || {})
  
-// 页面显示时检查登录状态（同步缓存）
-onShow(() => {
-  // 触发登录状态检查，确保缓存和Pinia同步
-  userStore.checkLogin()
-})
-
-// 处理登录（跳转到登录页）
+/**
+ * 处理登录跳转
+ */
 const handleLogin = () => {
-  navigateTo({
-    url: '/pages/login/index' // 替换为你的实际登录页路径
+  uni.navigateTo({
+    url: '/pages/login/index'
   })
 }
  
-
-
-// 确认退出登录
+/**
+ * 确认退出登录（带二次确认）
+ */
 const confirmLogout = async () => {
+  console.log('13213')
   try {
-    // 调用Pinia自带的logout方法（你的仓库已实现清空状态+跳转）
-    await userStore.logout()
+    console.log('434')
+    const res = await uni.showModal({
+      title: '提示',
+      content: '确定要退出登录吗？',
+      confirmText: '退出',
+      cancelText: '取消'
+    })
  
+    if (res.confirm) {
+      await userStore.logout()
+      uni.showToast({ title: '退出登录成功', type: 'success' })
+    }
   } catch (error) {
     console.error('退出登录失败：', error)
-    uni.showToast({
-      title: '退出登录失败，请重试',
-      type: 'error'
-    })
-
+    uni.showToast({ title: '退出登录失败，请重试', type: 'error' })
   }
 }
  
+// 页面显示时检查登录状态
+onShow(() => {
+  userStore.checkLogin()
+})
 </script>
  
 <script lang="ts">
 export default {
-  name: 'UserCenter'
+  name: 'UserCenter',
+  options: {
+    navigationBarTitleText: '个人中心'
+  }
 }
 </script>
  
@@ -149,6 +135,10 @@ export default {
     .user-avatar {
       border: 4rpx solid #ffffff;
       box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+      transition: transform 0.2s ease;
+      &:active {
+        transform: scale(0.95);
+      }
     }
  
     .user-info-content {
@@ -166,25 +156,13 @@ export default {
       .user-phone {
         font-size: 26rpx;
         color: rgba(255, 255, 255, 0.9);
-        margin-bottom: 10rpx;
-      }
-
-      .user-role-tag {
-        background-color: rgba(255, 255, 255, 0.2);
-        color: #ffffff;
-        border: none;
       }
     }
   }
 }
  
-
 // 退出登录按钮
 .logout-btn-wrap {
   margin: 200rpx 20rpx 20rpx;
-  padding: 20rpx;
-
-
 }
-
 </style>
 \ No newline at end of file
 <template>
-  <!-- 外层容器：包含蓝色块 + 原始内容 -->
   <view class="page-container">
-    <!-- 加载页：覆盖整个容器，渲染完成后隐藏 -->
+    <!-- 加载页 -->
     <up-loading-page
-
         :loading="loading"
         loading-text="加载中..."
         color="#577ee3"
         zIndex="1000"
     ></up-loading-page>
  
-    <!-- 蓝色装饰块：#577ee3 -->
+    <!-- 蓝色装饰块 -->
     <view class="blue-decor-block" v-show="!loading"></view>
  
-    <!-- 原始内容容器 -->
+    <!-- 内容容器 -->
     <view class="content-wrap">
-      <!-- uview-plus空状态组件 -->
+      <!-- 空状态：过滤后无数据且非加载中时显示 -->
       <u-empty
-          v-if="!moduleList.length && !loading"
+          v-if="!filteredModuleList.length && !loading"
           mode="permission"
       ></u-empty>
  
-      <!-- 菜单卡片列表（替换grid为flex布局） -->
-      <view  class="menu-card-wrap">
+      <!-- 菜单卡片列表：仅渲染有子节点的父模块 -->
+      <view class="menu-card-wrap">
         <up-card
             :title-size="18"
             :border="false"
             :shadow="true"
             :foot-border-top="false"
-            v-for="(parentModule, index) in moduleList"
+            v-for="(parentModule, index) in filteredModuleList"
             :key="`$parentModule.id_${index}`"
             :title="parentModule.name"
             class="card-container"
         >
           <template #body>
-            <!-- 替换up-grid：改用flex流式布局容器 -->
             <view class="card-content">
               <view
                   v-for="(listItem, listIndex) in parentModule.children"
@@ -62,8 +59,7 @@
 </template>
  
 <script setup lang="ts">
-// 原始代码完全保留，无任何修改
-import { ref, nextTick } from 'vue';
+import { ref, computed } from 'vue'; // 新增 computed
 import { onShow } from '@dcloudio/uni-app';
 import { useUserStore } from '@/pinia/user';
 import globalConfig from '@/common/config/global';
@@ -91,60 +87,50 @@ const loading = ref(true);
 const userStore = useUserStore();
 const moduleList = ref<MenuItem[]>([]);
  
+// 计算属性：过滤出有子节点的父模块（children 存在且长度 > 0）
+const filteredModuleList = computed(() => {
+  return moduleList.value.filter(item => {
+    // 确保 children 是数组且长度大于 0
+    return Array.isArray(item.children) && item.children.length > 0;
+  });
+});
+
 onShow(async () => {
   try {
     loading.value = true;
-
     const rawMenuData = userStore.moduleListInfo || cache.get(globalConfig.cache.moduleListKey);
-    const menuData = rawMenuData || [];
-    moduleList.value = menuData;
-    //
-    // // await nextTick();
-    // setTimeout(() => {
-    //   loading.value = false;
-    // }, 500);
+    moduleList.value = rawMenuData || [];
     loading.value = false;
-    console.log('菜单数据：', moduleList.value);
+    console.log('原始菜单数据：', moduleList.value);
+    console.log('过滤后有子节点的父模块：', filteredModuleList.value);
   } catch (error) {
     console.error('获取菜单数据失败：', error);
     moduleList.value = [];
-    await nextTick();
     loading.value = false;
   }
 });
  
 const handleMenuClick = (item: MenuItem) => {
   if (!item.jumpUrl) {
-    uni.showToast({
-      title: '暂无跳转链接',
-      icon: 'none',
-      duration: 2000
-    });
+    uni.showToast({ title: '暂无跳转链接', icon: 'none', duration: 2000 });
     return;
   }
-  console.log(item.jumpUrl);
   uni.navigateTo({
     url: item.jumpUrl,
     fail: (err) => {
       console.error('页面跳转失败：', err);
-      uni.showToast({
-        title: '页面路径错误',
-        icon: 'none',
-        duration: 2000
-      });
+      uni.showToast({ title: '页面路径错误', icon: 'none', duration: 2000 });
     }
   });
 };
 </script>
  
 <style scoped lang="scss">
-/* 原有样式保留 + 新增/调整图片居中样式 */
 .page-container {
-  position: relative; // 新增：让蓝色块绝对定位生效
-  min-height: 100vh; // 新增：防止内容高度不足
+  position: relative;
+  min-height: 100vh;
 }
  
-/* 蓝色块样式（保留） */
 .blue-decor-block {
   position: absolute;
   top: 0;
@@ -155,70 +141,57 @@ const handleMenuClick = (item: MenuItem) =&gt; {
   z-index: 1;
 }
  
-/* 内容容器样式（保留 + 微调） */
 .content-wrap {
   position: relative;
   z-index: 2;
-  padding: 120px 0 0 ; // 新增左右内边距，避免卡片贴边
+  padding: 120px 0 0;
   display: flex;
   flex-direction: column;
-  gap: 20rpx; // 新增：卡片之间的上下间距
+  gap: 20rpx;
 }
  
-/* 菜单卡片容器（新增：统一卡片外层间距） */
 .menu-card-wrap {
   width: 100%;
 }
  
-/* 卡片容器：重置up-card默认样式 */
 .card-container {
-  --u-card-content-padding: 0; // 取消卡片默认内边距
-  border-radius: 8rpx; // 新增：卡片圆角
-  overflow: hidden; // 新增：裁剪内部元素
+  --u-card-content-padding: 0;
+  border-radius: 8rpx;
+  overflow: hidden;
 }
  
-/* 核心：小块容器（Flex 流式布局） */
 .card-content {
   display: flex;
-  flex-wrap: wrap; // 自动换行
-  gap: 20rpx; // 关键：小块之间的上下+左右间距统一
-
+  flex-wrap: wrap;
+  gap: 20rpx;
 }
  
-/* 小块样式：一行最多4个，宽度自适应 + 内部flex布局 */
 .content-block {
-  // 宽度计算：(100% - 3*间距) / 4 （4个元素有3个间距）
   width: calc((100% - 3 * 20rpx) / 4);
-  // 小块内部样式：改用flex布局，确保子元素居中
   display: flex;
   flex-direction: column;
-  align-items: center; // 水平居中（核心：解决图片不居中问题）
-  justify-content: center; // 垂直居中（可选，优化视觉）
-  padding: 24rpx 0;
+  align-items: center;
+  justify-content: center;
+  padding: 14rpx 0;
   border-radius: 8rpx;
-  text-align: center;
-  // 点击反馈
   touch-action: manipulation;
   transition: background-color 0.2s;
 }
  
-/* 小块点击态 */
 .content-block:active {
   background-color: #e9ecef;
 }
  
-/* 新增：图片居中样式（兜底保障） */
 .block-icon {
-  display: block; // 转为块级元素
-  margin: 0 auto; // 水平居中（双重保障）
+  display: block;
+  margin: 0 auto;
 }
  
-/* 网格文字样式（保留 + 微调） */
 .grid-text {
   font-size: 26rpx;
   color: #333;
   text-align: center;
   margin-top: 10rpx;
-  display: block; // 新增：确保文字换行
+  display: block;
 }
 </style>
 \ No newline at end of file