ow

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

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+/**
+ * 文件页顶部导航栏：「返回箭头 + 居中标题 + 右侧两个显隐开关」。
+ * 根目录不显示返回（showBack=false）；标题两侧等宽占位保证真居中。
+ * 右侧 search/grid 两个图标分别切换页面里搜索框与快捷入口区的显隐，
+ * 点亮（蓝）= 对应区域显示，置灰 = 隐藏；排序按钮在 file-tab-filter 工具区。
+ * 纯展示组件：不自己做导航与显隐逻辑，按钮语义一律 emit 给页面决定。
+ * 顶栏配色跟随截图（白底黑字），不并入 app-page 的绿色 u-navbar，故页面用 hide-nav 让位。
+ */
+const props = defineProps({
+    /** 页面标题（页面用 t() 翻译好后传进来） */
+    title: {
+        type: String,
+        required: true,
+    },
+    /** 是否显示返回箭头：仅进入子目录后显示 */
+    showBack: {
+        type: Boolean,
+        default: false,
+    },
+    /** 搜索框当前是否可见（决定开关图标高亮态） */
+    searchOn: {
+        type: Boolean,
+        default: true,
+    },
+    /** 快捷入口区当前是否可见（决定开关图标高亮态） */
+    quickOn: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const emit = defineEmits<{
+    (e: "back"): void;
+    (e: "toggle-search"): void;
+    (e: "toggle-quick"): void;
+}>();
+</script>
+
+<template>
+    <view class="page-navbar">
+        <view class="page-navbar__side page-navbar__side--left">
+            <view v-if="props.showBack" class="page-navbar__back" @tap="emit('back')">
+                <u-icon name="arrow-left" size="42" color="#1f2329" />
+            </view>
+        </view>
+        <text class="page-navbar__title">
+            {{ props.title }}
+        </text>
+        <view class="page-navbar__side page-navbar__side--right">
+            <!-- 切换搜索框显隐 -->
+            <view class="page-navbar__btn" @tap="emit('toggle-search')">
+                <u-icon name="search" size="38" :color="props.searchOn ? '#2b8fff' : '#8f959e'" />
+            </view>
+            <!-- 切换快捷入口区显隐 -->
+            <view class="page-navbar__btn" @tap="emit('toggle-quick')">
+                <u-icon name="grid" size="38" :color="props.quickOn ? '#2b8fff' : '#8f959e'" />
+            </view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.page-navbar {
+    position: sticky;
+    top: 0;
+    z-index: 9;
+    display: flex;
+    align-items: center;
+    padding: 16rpx 24rpx;
+    /* 透明顶栏：透出页面的浅蓝→白渐变底 */
+    background-color: transparent;
+}
+
+/* 左右等宽占位（容纳右侧两个按钮）：任何状态下标题都严格居中 */
+.page-navbar__side {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    width: 148rpx;
+    min-height: 64rpx;
+    flex-shrink: 0;
+}
+
+.page-navbar__side--left {
+    justify-content: flex-start;
+}
+
+.page-navbar__side--right {
+    justify-content: flex-end;
+}
+
+.page-navbar__back {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64rpx;
+    height: 64rpx;
+}
+
+/* 显隐开关按钮：与 file-tab-filter 工具图标同尺寸，保持一行工具观感 */
+.page-navbar__btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 60rpx;
+    height: 60rpx;
+}
+
+.page-navbar__title {
+    flex: 1;
+    text-align: center;
+    font-size: 38rpx;
+    font-weight: 600;
+    color: #1f2329;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+</style>