admin-h5/src/components/CustomTabBar.vue

@@ -7,12 +7,11 @@
       @click="switchTab(tab, index)"
     >
       <view class="tab-inner" :class="{ active: current === index }">
-        <view class="tab-icon" :class="{ active: current === index }">
-          <AppIcon
-            :name="tab.icon"
-            :size="current === index ? 24 : 22"
-            :color="current === index ? activeColor : inactiveColor"
-          />
+        <view class="tab-icon">
+          <view class="icon-stack">
+            <AppIcon class="icon-layer base" :name="tab.icon" :size="24" :color="inactiveColor" />
+            <AppIcon class="icon-layer active-layer" :name="tab.icon" :size="24" :color="activeColor" />
+          </view>
         </view>
         <text class="tab-text" :class="{ active: current === index }">{{ tab.text }}</text>
       </view>
@@ -106,9 +105,33 @@ const switchTab = (tab, index) => {
   align-items: center;
   justify-content: center;
 }
-/* 选中图标弹性放大入场 */
-.tab-icon.active {
-  animation: app-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+/* 双层图标：灰色/红色各渲染一份，src 永不切换，避免 image 重新解码导致的闪烁 */
+.icon-stack {
+  position: relative;
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.icon-layer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.icon-layer.active-layer {
+  opacity: 0;
+  transform: scale(0.55);
+}
+
+.tab-inner.active .icon-layer.base {
+  opacity: 0;
+}
+
+.tab-inner.active .icon-layer.active-layer {
+  opacity: 1;
+  transform: scale(1);
 }
 
 .tab-text {

deploy.sh

@@ -124,6 +124,7 @@ if [ "$SKIP_FRONTEND" = false ] && [ "$TARGET" != "miniapp" ]; then
         info "构建前端 $name ..."
         (
             cd "$CODE_DIR/$dir" || exit 1
+            low_prio npm install --no-audit --no-fund || { error "$name 依赖安装失败"; exit 1; }
             export NODE_OPTIONS="--max-old-space-size=$NODE_MAX_MEM"
             low_prio npm run build
         ) || { error "$name 构建失败"; exit 1; }