ow

uniapp/youjiala/src/components/hero-navbar/hero-navbar.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+/**
+ * 沉浸式主题头部（传输列表页同款风格）：柔光主题渐变底 + 白胶囊返回 + 居中主题色标题。
+ * 所有「进入后返回」的子页页头统一用它：回收站 / 共享大厅 / 相册详情 / 新建专辑 / 传输列表。
+ * 标题真居中靠两侧等宽胶囊（返回 64rpx + gap 16rpx）：右侧无搜索时放透明占位。
+ * 渐变与 transport 页一致：primary 混白 35% 起、混白 10% 止（浓色带色觉冲击大的教训）。
+ */
+import { computed } from "vue";
+import { mixWithWhite, useThemeTokens } from "@/composables";
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: "",
+    },
+    /** 右侧搜索胶囊（与返回同宽同形，保持标题居中） */
+    showSearch: {
+        type: Boolean,
+        default: false,
+    },
+    /** 搜索展开态：图标高亮为主题色 */
+    searchOn: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emit = defineEmits<{
+    (e: "back"): void;
+    (e: "toggle-search"): void;
+}>();
+
+const { primary } = useThemeTokens();
+
+const heroStyle = computed(() => ({
+    background: `linear-gradient(180deg, ${mixWithWhite(primary.value, 0.35)} 0%, ${mixWithWhite(primary.value, 0.1)} 100%)`,
+}));
+</script>
+
+<template>
+    <view class="hero-navbar" :style="heroStyle">
+        <view class="hero-navbar__status-bar" />
+        <view class="hero-navbar__nav">
+            <view class="hero-navbar__pill" @tap="emit('back')">
+                <u-icon name="arrow-left" size="32" :color="primary" />
+            </view>
+            <text class="hero-navbar__title" :style="{ color: primary }">
+                {{ props.title }}
+            </text>
+            <!-- 右侧：搜索胶囊或等宽透明占位（占位保证标题仍几何居中） -->
+            <view v-if="props.showSearch" class="hero-navbar__pill" @tap="emit('toggle-search')">
+                <u-icon name="search" size="30" :color="props.searchOn ? primary : '#5c626b'" />
+            </view>
+            <view v-else class="hero-navbar__pill hero-navbar__pill--ghost" />
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+/* 沉浸式头部：状态栏占位 + 导航行（传输列表页同款几何） */
+.hero-navbar {
+    padding-bottom: 8rpx;
+
+    &__status-bar {
+        height: var(--status-bar-height);
+    }
+
+    &__nav {
+        display: flex;
+        align-items: center;
+        gap: 16rpx;
+        height: 88rpx;
+        padding: 0 24rpx;
+    }
+
+    /* 白柔光胶囊钮（浅底上用白底 + 主题色图标） */
+    &__pill {
+        display: flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        width: 64rpx;
+        height: 64rpx;
+        border-radius: 20rpx;
+        background: rgba(255, 255, 255, 0.65);
+
+        &--ghost {
+            background: transparent;
+        }
+    }
+
+    &__title {
+        flex: 1;
+        text-align: center;
+        font-size: 34rpx;
+        font-weight: 600;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+</style>