feat: 调整项目结构

2025-09-21 17:25:09 +08:00
parent 0b66462d16
commit 9f23854ad5
410 changed files with 3806 additions and 1668 deletions
--- a/src/components/TopNavBar/index.vue
+++ b/src/components/TopNavBar/index.vue
@@ -0,0 +1,133 @@
+<template>
+  <view :class="navBarClass" :style="navBarStyle">
+    <!-- 状态栏占位 -->
+    <view :style="{ height: statusBarHeight + 'px' }" v-if="!hideStatusBar"></view>
+    
+    <!-- 导航栏内容 -->
+    <view class="nav-bar-content" :style="{ height: navBarHeight + 'px' }">
+      <!-- 左侧返回按钮 -->
+      <view class="nav-bar-left" @click="handleBack" v-if="showBack">
+        <uni-icons type="left" size="20" :color="backIconColor" />
+      </view>
+      
+      <!-- 中间标题区域 -->
+      <view :class="['nav-bar-center', `nav-bar-center--${titleAlign}`]">
+        <slot name="title">
+          <text class="nav-bar-title" :style="{ color: titleColor }">{{ title }}</text>
+        </slot>
+      </view>
+      
+      <!-- 右侧操作区域 -->
+      <view class="nav-bar-right">
+        <slot name="right"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+
+// 定义props
+const props = defineProps({
+  // 标题文本
+  title: {
+    type: String,
+    default: ''
+  },
+  // 是否固定在顶部
+  fixed: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示返回按钮
+  showBack: {
+    type: Boolean,
+    default: true
+  },
+  // 背景颜色
+  backgroundColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  // 标题颜色
+  titleColor: {
+    type: String,
+    default: '#333333'
+  },
+  // 返回按钮图标颜色
+  backIconColor: {
+    type: String,
+    default: '#333333'
+  },
+  // 是否隐藏状态栏占位
+  hideStatusBar: {
+    type: Boolean,
+    default: false
+  },
+  // 自定义z-index
+  zIndex: {
+    type: Number,
+    default: 999
+  },
+  // 标题对齐方式
+  titleAlign: {
+    type: String,
+    default: 'center', // 'center' | 'left'
+    validator: (value) => ['center', 'left'].includes(value)
+  }
+})
+
+// 定义emits
+const emit = defineEmits(['back'])
+
+// 系统信息
+const statusBarHeight = ref(0)
+const navBarHeight = ref(44) // 默认导航栏高度
+
+// 获取系统信息
+onMounted(() => {
+  const systemInfo = uni.getSystemInfoSync()
+  statusBarHeight.value = systemInfo.statusBarHeight || 0
+  
+  // 根据平台设置导航栏高度
+  if (systemInfo.platform === 'ios') {
+    navBarHeight.value = 44
+  } else {
+    navBarHeight.value = 48
+  }
+})
+
+// 计算导航栏样式类
+const navBarClass = computed(() => {
+  return [
+    'top-nav-bar',
+    {
+      'top-nav-bar--fixed': props.fixed
+    }
+  ]
+})
+
+// 计算导航栏样式
+const navBarStyle = computed(() => {
+  return {
+    backgroundColor: props.backgroundColor,
+    zIndex: props.zIndex
+  }
+})
+
+// 处理返回事件
+const handleBack = () => {
+  emit('back')
+  // 如果没有监听back事件，默认执行返回上一页
+  if (!emit('back')) {
+    uni.navigateBack({
+      delta: 1
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@use "./styles/index.scss";
+</style>