simple-memo-wx/components/PageHeader.vue

<template>
  <view
    class="page-header"
    :class="{ 'is-transparent': transparent }"
    :style="headerStyle"
  >
    <view class="header-left">
      <view
        v-if="showBack"
        class="back-btn btn btn--icon"
        @click="handleBack"
      >
        <FaIcon icon="chevron-left" :size="22" :color="themeConfig.textPrimary" />
      </view>
    </view>

    <view class="header-center">
      <text class="header-title" :style="{ color: themeConfig.textPrimary }">{{ title }}</text>
      <text v-if="subtitle" class="header-subtitle" :style="{ color: themeConfig.textSecondary }">{{ subtitle }}</text>
    </view>

    <view class="header-right">
      <slot v-if="showRight" name="right"></slot>
    </view>
  </view>
</template>

<script>
import themeMixin from '@/mixins/themeMixin.js'
import { getThemeConfigFromStorage, THEME_CHANGE_EVENT, THEME_PRESETS, DEFAULT_THEME_KEY } from '@/utils/theme'
import FaIcon from '@/components/FaIcon.vue'

export default {
  name: 'PageHeader',
  components: { FaIcon },
  mixins: [themeMixin],
  props: {
    title: {
      type: String,
      required: true
    },
    subtitle: {
      type: String,
      default: ''
    },
    showBack: {
      type: Boolean,
      default: false
    },
    showRight: {
      type: Boolean,
      default: false
    },
    transparent: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    headerStyle() {
      if (this.transparent) {
        return {}
      }
      return {
        backgroundColor: this.themeConfig.bgColor,
        borderBottom: `2rpx solid ${this.themeConfig.borderLight}`
      }
    }
  },
  methods: {
    handleBack() {
      this.$emit('back')
      if (!this.$listeners || !this.$listeners.back) {
        uni.navigateBack()
      }
    },
    handleThemeChange(themeData) {
      let newTheme = null
      if (themeData && themeData.key && THEME_PRESETS[themeData.key]) {
        newTheme = THEME_PRESETS[themeData.key]
      } else if (themeData && themeData.config) {
        newTheme = themeData.config
      }
      if (newTheme) {
        this.themeConfig = newTheme
      }
    }
  },
  mounted() {
    const appInstance = getApp({ allowDefault: true })
    const globalTheme = appInstance && appInstance.globalData && appInstance.globalData.themeConfig
    this.themeConfig = globalTheme || getThemeConfigFromStorage() || THEME_PRESETS[DEFAULT_THEME_KEY]
    this.themeChangeHandler = this.handleThemeChange.bind(this)
    uni.$on(THEME_CHANGE_EVENT, this.themeChangeHandler)
  },
  beforeDestroy() {
    uni.$off(THEME_CHANGE_EVENT, this.themeChangeHandler)
  }
}
</script>

<style lang="scss" scoped>
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 36rpx;
  padding-top: calc(24rpx + constant(safe-area-inset-top));
  padding-top: calc(24rpx + env(safe-area-inset-top));
  position: relative;
  z-index: 10;
  min-height: 120rpx;
}

.page-header.is-transparent {
  background: transparent !important;
  border-bottom: none !important;
}

.header-left {
  width: 68rpx;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.back-btn {
  transition: all 0.25s ease;
}

.back-btn:active {
  transform: scale(0.93);
}

.header-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 700;
}

.header-subtitle {
  font-size: 24rpx;
  font-weight: 500;
}

.header-right {
  width: 68rpx;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>