first commit

2026-02-06 20:21:10 +08:00
commit f9d7f980bb
3994 changed files with 1146030 additions and 0 deletions
@@ -0,0 +1,192 @@
+<template>
+  <view>
+    <!-- 移动设备顶部状态栏 -->
+    <view class="top_bar flex w-full" v-if="isMobile">
+      <view class="sub-header">
+        <view class="header-left" @click="goBack">
+          <i class="fas fa-arrow-left"></i>
+        </view>
+        <view class="header-title">{{ title }}</view>
+        <view class="header-right" @click="showMoreOptions">
+          <i class="fas fa-ellipsis-v"></i>
+        </view>
+      </view>
+    </view>
+
+    <!-- 浏览器环境下的导航栏 -->
+    <view class="sub-header" v-else>
+      <view class="header-left" @click="goBack">
+        <i class="fas fa-arrow-left"></i>
+      </view>
+      <view class="header-title">{{ title }}</view>
+      <view class="header-right" @click="showMoreOptions">
+        <i class="fas fa-ellipsis-v"></i>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'SubHeader',
+  props: {
+    title: {
+      type: String,
+      default: '页面标题'
+    },
+    showBack: {
+      type: Boolean,
+      default: true
+    },
+    showMore: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    // 从全局数据获取设备信息
+    isMobile() {
+      return getApp().globalData.isMobile;
+    }
+  },
+  methods: {
+    /**
+     * 返回
+     */
+    goBack() {
+      this.$emit('goBack');
+    },
+    /**
+     * 显示更多选项
+     */
+    showMoreOptions() {
+      this.$emit('showMoreOptions');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/* 移动设备顶部状态栏 */
+.top_bar {
+  background: var(--gradient-primary);
+  box-shadow: var(--shadow-lg);
+  z-index: 9999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: calc(var(--status-bar-height) + 88rpx);
+  display: flex;
+  align-items: flex-end;
+  padding-top: var(--status-bar-height);
+  box-sizing: border-box;
+}
+
+/* 支持安全区域的设备 */
+@supports (padding: max(0px)) {
+  .top_bar {
+    height: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
+    padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top));
+  }
+
+  .top_bar + .header {
+    margin-top: calc(
+      var(--status-bar-height) + 88rpx + env(safe-area-inset-top)
+    );
+  }
+}
+
+/* 顶部导航栏 */
+.sub-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 88rpx;
+  background-color: var(--surface);
+  border-bottom: 1rpx solid var(--border);
+  padding: 0 20rpx;
+  box-sizing: border-box;
+  box-shadow: var(--shadow);
+}
+
+/* 浏览器环境下的固定定位 */
+.sub-header:not(.top_bar .sub-header) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  height: calc(var(--status-bar-height) + 88rpx);
+  padding-top: var(--status-bar-height);
+}
+
+/* 移动设备下的导航栏样式 */
+.top_bar .sub-header {
+  background: transparent;
+  border-bottom: none;
+  box-shadow: none;
+  width: 100%;
+  height: 88rpx;
+  padding: 0 20rpx;
+  box-sizing: border-box;
+}
+
+.top_bar .header-title {
+  color: var(--white);
+  font-weight: 600;
+  font-size: 36rpx;
+}
+
+.top_bar .header-left i,
+.top_bar .header-right i {
+  color: var(--white);
+  font-size: 40rpx;
+}
+
+.header-left,
+.header-right {
+  width: 80rpx;
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+}
+
+.header-right:active {
+  background-color: var(--surface-hover);
+  border-radius: 8rpx;
+}
+
+/* 移动设备下的按钮悬停效果 */
+.top_bar .header-left:active,
+.top_bar .header-right:active {
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 8rpx;
+}
+
+.header-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: var(--title-color);
+}
+
+/* 浏览器环境下为内容添加顶部间距 */
+.sub-header:not(.top_bar .sub-header) + .header {
+  margin-top: calc(var(--status-bar-height) + 88rpx);
+}
+
+@supports (padding: max(0px)) {
+  .sub-header:not(.top_bar .sub-header) {
+    height: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
+    padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top));
+  }
+
+  .sub-header:not(.top_bar .sub-header) + .header {
+    margin-top: calc(
+      var(--status-bar-height) + 88rpx + env(safe-area-inset-top)
+    );
+  }
+}
+</style>