im-ui-mobile 0.1.0 → 0.1.2

package/components/im-nav-bar/im-nav-bar.vue

@@ -1,99 +1,713 @@
 <template>
-	<view class="nav-bar">
-		<!-- #ifdef APP-PLUS -->
-		<view style="height: var(--status-bar-height)"></view>
-		<!-- #endif -->
-		<view class="nav-bar-content">
-			<!-- #ifndef MP-WEIXIN -->
-			<view class="back" @click="handleBackClick" v-if="back">
-				<u-icon name="arrow-left" :size="iconFontSize"></u-icon>
+	<view class="im-nav-bar" :class="[
+		`im-nav-bar--${type}`,
+		`im-nav-bar--${theme}`,
+		{
+			'im-nav-bar--fixed': fixed,
+			'im-nav-bar--border': border,
+			'im-nav-bar--transparent': transparent,
+			'im-nav-bar--shadow': shadow,
+			'im-nav-bar--immersive': immersive
+		}
+	]" :style="navStyle">
+		<!-- 状态栏占位（沉浸式导航栏） -->
+		<view v-if="immersive" class="im-nav-bar__status-bar" :style="statusBarStyle"></view>
+
+		<!-- 导航栏主体 -->
+		<view class="im-nav-bar__content" :style="contentStyle">
+			<!-- 左区域 -->
+			<view class="im-nav-bar__left">
+				<!-- 返回按钮（优先显示返回按钮） -->
+				<view v-if="showBack && showLeft" class="im-nav-bar__back" @click="handleBack">
+					<im-icon v-if="backIcon" :name="backIcon" :size="backIconSize" :color="backIconColor" />
+					<text v-if="backText" class="im-nav-bar__back-text">{{ backText }}</text>
+				</view>
+
+				<!-- 自定义左侧内容 -->
+				<slot v-else-if="$slots.left" name="left"></slot>
+
+				<!-- 左侧图标或文字 -->
+				<view v-else-if="leftIcon || leftText" class="im-nav-bar__left-custom" @click="handleLeftClick">
+					<im-icon v-if="leftIcon" :name="leftIcon" :size="iconSize" :color="iconColor" />
+					<text v-if="leftText" class="im-nav-bar__left-text">{{ leftText }}</text>
+				</view>
+			</view>
+
+			<!-- 标题区域 -->
+			<view class="im-nav-bar__title" :style="titleStyle" @click="handleTitleClick">
+				<!-- 自定义标题内容 -->
+				<slot v-if="$slots.title" name="title"></slot>
+
+				<!-- 默认标题 -->
+				<template v-else>
+					<im-icon v-if="titleIcon" :name="titleIcon" :size="titleIconSize" :color="titleIconColor"
+						class="im-nav-bar__title-icon" />
+					<text v-if="title" class="im-nav-bar__title-text" :class="{ 'im-nav-bar__title-text--ellipsis': titleEllipsis }">
+						{{ title }}
+					</text>
+					<slot v-else></slot>
+					<im-icon v-if="titleRightIcon" :name="titleRightIcon" :size="titleRightIconSize"
+						:color="titleRightIconColor" class="im-nav-bar__title-right-icon" />
+				</template>
 			</view>
-			<!-- #endif -->
-			<view class="title" v-if="title">
-				<slot></slot>
+
+			<!-- 右区域 -->
+			<view class="im-nav-bar__right">
+				<!-- 自定义右侧内容 -->
+				<slot v-if="$slots.right" name="right"></slot>
+
+				<!-- 右侧图标或文字 -->
+				<view v-else-if="rightIcon || rightText" class="im-nav-bar__right-custom" @click="handleRightClick">
+					<text v-if="rightText" class="im-nav-bar__right-text">{{ rightText }}</text>
+					<im-icon v-if="rightIcon" :name="rightIcon" :size="iconSize" :color="iconColor" />
+				</view>
+
+				<!-- 右侧多个操作按钮 -->
+				<view v-if="actions && actions.length > 0" class="im-nav-bar__actions">
+					<view v-for="(action, index) in actions" :key="index" class="im-nav-bar__action"
+						@click="handleActionClick(action, index)">
+						<im-icon v-if="action.icon" :name="action.icon" :size="action.iconSize || iconSize"
+							:color="action.iconColor || iconColor" :type="action.iconType" />
+						<text v-if="action.text" class="im-nav-bar__action-text" :style="{ color: action.textColor }">
+							{{ action.text }}
+						</text>
+					</view>
+				</view>
 			</view>
-			<view class="btn">
-				<u-icon class="btn-item" v-if="search" name="search" :size="iconFontSize"
-					@click="$emit('search')"></u-icon>
-				<u-icon class="btn-item" v-if="add" name="plus" :size="iconFontSize" @click="$emit('add')"></u-icon>
-				<u-icon class="btn-item" v-if="more" name="more-dot-fill" :size="iconFontSize"
-					@click="$emit('more')"></u-icon>
+		</view>
+
+		<!-- 搜索栏模式 -->
+		<view v-if="type === 'search'" class="im-nav-bar__search" :style="searchStyle">
+			<view class="im-nav-bar__search-box">
+				<im-icon name="search" :size="20" color="#999" class="im-nav-bar__search-icon" />
+				<input class="im-nav-bar__search-input" :value="searchValue" :placeholder="placeholder"
+					:placeholder-style="placeholderStyle" :focus="searchFocus" :disabled="searchDisabled"
+					@input="handleSearchInput" @focus="handleSearchFocus" @blur="handleSearchBlur"
+					@confirm="handleSearchConfirm" />
+				<view v-if="searchValue" class="im-nav-bar__search-clear" @click="handleSearchClear">
+					<im-icon name="close" :size="16" color="#999" />
+				</view>
 			</view>
+			<text v-if="showSearchButton" class="im-nav-bar__search-button" @click="handleSearchButton">
+				{{ searchButtonText }}
+			</text>
 		</view>
 	</view>
 </template>
 
 <script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import type { IconType } from '../../types/components/icon'
+
+// 类型定义
+interface NavBarAction {
+	text?: string
+	icon?: string
+	iconSize?: string | number
+	iconColor?: string
+	iconType?: IconType
+	textColor?: string
+	disabled?: boolean
+	badge?: string | number
+	data?: any,
+	click?: Function | undefined
+}
+
 interface Props {
-	back?: boolean;
-	title?: boolean;
-	search?: boolean;
-	add?: boolean;
-	more?: boolean;
-	iconFontSize?: number;
+	// 基础属性
+	title?: string
+	type?: 'default' | 'search' | 'home' | 'custom'
+	theme?: 'light' | 'dark' | 'primary' | 'transparent'
+	fixed?: boolean
+	border?: boolean
+	transparent?: boolean
+	shadow?: boolean
+	immersive?: boolean // 沉浸式（占位状态栏）
+	safeArea?: boolean // 适配刘海屏安全区域
+
+	// 标题相关
+	titleIcon?: string
+	titleIconSize?: string | number
+	titleIconColor?: string
+	titleRightIcon?: string
+	titleRightIconSize?: string | number
+	titleRightIconColor?: string
+	titleEllipsis?: boolean
+	titleStyle?: Record<string, any>
+
+	// 返回按钮
+	showBack?: boolean
+	backIcon?: string
+	backIconSize?: string | number
+	backIconColor?: string
+	backText?: string
+	delta?: number // 返回的页面数
+
+	// 左侧区域
+	showLeft?: boolean
+	leftIcon?: string
+	leftText?: string
+
+	// 右侧区域
+	rightIcon?: string
+	rightText?: string
+	actions?: NavBarAction[]
+
+	// 图标通用
+	iconSize?: string | number
+	iconColor?: string
+
+	// 搜索栏模式
+	searchValue?: string
+	placeholder?: string
+	placeholderStyle?: string
+	searchFocus?: boolean
+	searchDisabled?: boolean
+	showSearchButton?: boolean
+	searchButtonText?: string
+
+	// 样式控制
+	height?: string | number
+	backgroundColor?: string
+	color?: string
+	statusBarColor?: string
+	zIndex?: number
+
+	// 自定义样式
+	customStyle?: Record<string, any>
 }
 
 const props = withDefaults(defineProps<Props>(), {
-	back: false,
-	title: true,
-	search: false,
-	add: false,
-	more: false,
-	iconFontSize: 24
-});
-
-const handleBackClick = () => {
-	uni.navigateBack({
-		delta: 1
-	});
-};
+	title: '',
+	type: 'default',
+	theme: 'light',
+	fixed: true,
+	border: true,
+	shadow: true,
+	immersive: false,
+	safeArea: true,
+	titleIconSize: 18,
+	titleIconColor: 'inherit',
+	titleRightIconSize: 18,
+	titleRightIconColor: 'inherit',
+	titleEllipsis: true,
+	showBack: true,
+	showLeft: true,
+	backIcon: 'arrow-left',
+	backIconSize: 32,
+	backIconColor: 'inherit',
+	delta: 1,
+	iconSize: 32,
+	iconColor: 'inherit',
+	placeholder: '请输入搜索内容',
+	searchButtonText: '搜索',
+	searchFocus: false,
+	searchDisabled: false,
+	showSearchButton: false,
+	height: '88rpx',
+	backgroundColor: '',
+	color: '',
+	zIndex: 1000
+})
+
+const emit = defineEmits<{
+	// 基础事件
+	'back': [event: MouseEvent]
+	'left-click': [event: MouseEvent]
+	'right-click': [event: MouseEvent]
+	'title-click': [event: MouseEvent]
+
+	// 搜索事件
+	'search-input': [value: string, event: any]
+	'search-focus': [event: any]
+	'search-blur': [event: any]
+	'search-confirm': [value: string, event: any]
+	'search-clear': []
+	'search-button-click': [value: string]
+
+	// 操作事件
+	'action-click': [action: NavBarAction, index: number]
+
+	// 生命周期
+	'init': []
+	'ready': []
+}>()
+
+// 响应式数据
+const searchValue = ref(props.searchValue || '')
+const statusBarHeight = ref(0)
+const safeAreaBottom = ref(0)
+const isIPhoneX = ref(false)
+
+// 计算样式
+const navStyle = computed(() => {
+	const style: Record<string, any> = {
+		zIndex: props.zIndex
+	}
+
+	if (props.fixed) {
+		style.position = 'fixed'
+		style.top = '0'
+		style.left = '0'
+		style.right = '0'
+	}
+
+	if (props.backgroundColor) {
+		style.backgroundColor = props.backgroundColor
+	}
+
+	if (props.customStyle) {
+		Object.assign(style, props.customStyle)
+	}
+
+	return style
+})
+
+const statusBarStyle = computed(() => {
+	const style: Record<string, any> = {
+		height: `${statusBarHeight.value}px`
+	}
+
+	if (props.statusBarColor) {
+		style.backgroundColor = props.statusBarColor
+	} else if (props.backgroundColor) {
+		style.backgroundColor = props.backgroundColor
+	}
+
+	return style
+})
+
+const contentStyle = computed(() => {
+	const style: Record<string, any> = {
+		height: typeof props.height === 'number' ? `${props.height}px` : props.height
+	}
+
+	if (props.immersive) {
+		style.paddingTop = `${statusBarHeight.value}px`
+	}
+
+	if (props.safeArea && isIPhoneX.value) {
+		style.paddingBottom = `${safeAreaBottom.value}px`
+	}
+
+	return style
+})
+
+const searchStyle = computed(() => {
+	const style: Record<string, any> = {}
+
+	if (props.backgroundColor) {
+		style.backgroundColor = props.backgroundColor
+	}
+
+	return style
+})
+
+// 获取系统信息
+const getSystemInfo = () => {
+	uni.getSystemInfo({
+		success: (res) => {
+			// 状态栏高度
+			statusBarHeight.value = res.statusBarHeight || 0
+
+			// 判断是否为 iPhone X 及以上机型
+			const model = res.model?.toLowerCase() || ''
+			isIPhoneX.value = /iphone x|iphone 1[0-9]|iphone [1-9][0-9]/.test(model)
+
+			// 安全区域底部高度（针对刘海屏）
+			if (isIPhoneX.value) {
+				safeAreaBottom.value = res.safeAreaInsets?.bottom || 34
+			}
+		}
+	})
+}
+
+// 事件处理
+const handleBack = (event: MouseEvent) => {
+	if (props.delta > 0) {
+		uni.navigateBack({
+			delta: props.delta,
+			fail: () => {
+				// 返回失败时触发事件
+				emit('back', event)
+			}
+		})
+	} else {
+		emit('back', event)
+	}
+}
+
+const handleLeftClick = (event: MouseEvent) => {
+	emit('left-click', event)
+}
+
+const handleRightClick = (event: MouseEvent) => {
+	emit('right-click', event)
+}
+
+const handleTitleClick = (event: MouseEvent) => {
+	emit('title-click', event)
+}
+
+const handleActionClick = (action: NavBarAction, index: number) => {
+	if (!action.disabled) {
+		if (action.click) {
+			action.click({ action, index })
+		}
+		emit('action-click', action, index)
+	}
+}
+
+// 搜索相关事件
+const handleSearchInput = (event: any) => {
+	searchValue.value = event.detail?.value || ''
+	emit('search-input', searchValue.value, event)
+}
+
+const handleSearchFocus = (event: any) => {
+	emit('search-focus', event)
+}
+
+const handleSearchBlur = (event: any) => {
+	emit('search-blur', event)
+}
+
+const handleSearchConfirm = (event: any) => {
+	emit('search-confirm', searchValue.value, event)
+}
+
+const handleSearchClear = () => {
+	searchValue.value = ''
+	emit('search-clear')
+	emit('search-input', '', null)
+}
+
+const handleSearchButton = () => {
+	emit('search-button-click', searchValue.value)
+}
+
+// 监听搜索值变化
+watch(() => props.searchValue, (newVal) => {
+	if (newVal !== undefined) {
+		searchValue.value = newVal
+	}
+})
+
+// 生命周期
+onMounted(() => {
+	getSystemInfo()
+	emit('init')
+})
+
+onLoad(() => {
+	getSystemInfo()
+})
+
+onShow(() => {
+	emit('ready')
+})
+
+// 暴露给父组件的方法
+defineExpose({
+	focusSearch: () => {
+		// 聚焦搜索框的方法
+	},
+	blurSearch: () => {
+		// 失焦搜索框的方法
+	},
+	clearSearch: () => {
+		searchValue.value = ''
+		emit('search-clear')
+	},
+	getSearchValue: () => searchValue.value,
+	setSearchValue: (value: string) => {
+		searchValue.value = value
+	}
+})
 </script>
 
 <style scoped lang="scss">
-.nav-bar {
-	background: $im-bg-linear;
-	position: fixed;
-	top: 0;
+.im-nav-bar {
 	width: 100%;
-	color: $im-text-color;
-	border-bottom: 1px solid $im-border-light;
-	font-size: $im-font-size-large;
-	z-index: 99;
-
-	.nav-bar-content {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-sizing: border-box;
-		height: $im-nav-bar-height;
-
-		.title {}
-
-		.back {
-			position: absolute;
-			left: 0;
-			height: 100%;
-			display: flex;
-			align-items: center;
-			padding: 12px;
-			font-size: 22px;
-			box-sizing: border-box;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+
+	// 主题变体
+	&--light {
+		background-color: #ffffff;
+		color: #333333;
+
+		.im-nav-bar__content {
+			border-bottom-color: #f0f0f0;
 		}
+	}
 
-		.btn {
-			position: absolute;
-			right: 0;
-			height: 100%;
-			display: flex;
-			padding: 12px;
-			align-items: center;
-			box-sizing: border-box;
-
-			.btn-item {
-				margin-left: 8px;
-			}
+	&--dark {
+		background-color: #333333;
+		color: #ffffff;
+
+		.im-nav-bar__content {
+			border-bottom-color: rgba(255, 255, 255, 0.1);
+		}
+	}
+
+	&--primary {
+		background-color: var(--color-primary, #409EFF);
+		color: #ffffff;
+
+		.im-nav-bar__content {
+			border-bottom-color: rgba(255, 255, 255, 0.2);
+		}
+	}
+
+	&--transparent {
+		background-color: transparent;
+		color: #ffffff;
+
+		&.im-nav-bar--border .im-nav-bar__content {
+			border-bottom-color: rgba(255, 255, 255, 0.1);
+		}
+	}
+
+	// 固定定位
+	&--fixed {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 1000;
+	}
+
+	// 边框
+	&--border {
+		.im-nav-bar__content {
+			border-bottom-width: 1rpx;
+			border-bottom-style: solid;
+		}
+	}
+
+	// 阴影
+	&--shadow {
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+	}
+
+	// 沉浸式
+	&--immersive {
+		.im-nav-bar__status-bar {
+			width: 100%;
+		}
+	}
+}
+
+// 状态栏
+.im-nav-bar__status-bar {
+	width: 100%;
+	background-color: inherit;
+}
+
+// 导航栏内容
+.im-nav-bar__content {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	// padding: 0 32rpx;
+	box-sizing: border-box;
+	height: 88rpx;
+}
+
+// 左侧区域
+.im-nav-bar__left {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	min-width: 120rpx;
+}
+
+.im-nav-bar__back {
+	display: flex;
+	align-items: center;
+	padding: 16rpx 0;
+	cursor: pointer;
+
+	&-text {
+		margin-left: 8rpx;
+		font-size: 28rpx;
+	}
+}
+
+.im-nav-bar__left-custom {
+	display: flex;
+	align-items: center;
+	padding: 16rpx 0;
+	cursor: pointer;
+
+	&-text {
+		margin-left: 8rpx;
+		font-size: 28rpx;
+	}
+}
+
+// 标题区域
+.im-nav-bar__title {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 32rpx;
+	font-weight: 600;
+	text-align: center;
+	padding: 0 20rpx;
+	cursor: pointer;
+	overflow: hidden;
+}
+
+.im-nav-bar__title-text {
+	&--ellipsis {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+.im-nav-bar__title-icon {
+	margin-right: 8rpx;
+	flex-shrink: 0;
+}
+
+.im-nav-bar__title-right-icon {
+	margin-left: 8rpx;
+	flex-shrink: 0;
+}
+
+// 右侧区域
+.im-nav-bar__right {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	min-width: 120rpx;
+}
+
+.im-nav-bar__right-custom {
+	display: flex;
+	align-items: center;
+	padding: 16rpx 0;
+	cursor: pointer;
+
+	&-text {
+		margin-right: 8rpx;
+		font-size: 28rpx;
+	}
+}
+
+.im-nav-bar__actions {
+	display: flex;
+	align-items: center;
+	gap: 24rpx;
+}
+
+.im-nav-bar__action {
+	display: flex;
+	align-items: center;
+	padding: 16rpx 0;
+	cursor: pointer;
+	position: relative;
+
+	&-text {
+		font-size: 28rpx;
+		margin-left: 4rpx;
+	}
+
+	// 角标
+	&:has(.im-badge) {
+		position: relative;
+	}
+}
+
+// 搜索栏模式
+.im-nav-bar__search {
+	padding: 16rpx 32rpx;
+	background-color: inherit;
+}
+
+.im-nav-bar__search-box {
+	display: flex;
+	align-items: center;
+	background-color: rgba(255, 255, 255, 0.2);
+	border-radius: 32rpx;
+	padding: 0 24rpx;
+	height: 64rpx;
+
+	.im-nav-bar--light & {
+		background-color: #f5f5f5;
+	}
+}
+
+.im-nav-bar__search-icon {
+	margin-right: 12rpx;
+	flex-shrink: 0;
+}
+
+.im-nav-bar__search-input {
+	flex: 1;
+	height: 100%;
+	font-size: 28rpx;
+	color: inherit;
+	background-color: transparent;
+
+	&::placeholder {
+		color: inherit;
+		opacity: 0.6;
+	}
+
+	.im-nav-bar--light & {
+		color: #333333;
+
+		&::placeholder {
+			color: #999999;
 		}
 	}
+}
+
+.im-nav-bar__search-clear {
+	margin-left: 12rpx;
+	padding: 4rpx;
+	border-radius: 50%;
+	background-color: rgba(0, 0, 0, 0.1);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+
+	.im-nav-bar--light & {
+		background-color: rgba(0, 0, 0, 0.05);
+	}
+}
+
+.im-nav-bar__search-button {
+	margin-left: 16rpx;
+	font-size: 28rpx;
+	font-weight: 500;
+	cursor: pointer;
+	flex-shrink: 0;
+	padding: 8rpx 16rpx;
+}
 
+// 安全区域适配
+.safe-area-inset-bottom {
+	padding-bottom: env(safe-area-inset-bottom);
+	padding-bottom: constant(safe-area-inset-bottom);
+}
+
+// 响应式调整
+@media (max-width: 768px) {
+	.im-nav-bar__content {
+		padding: 0 24rpx;
+	}
+
+	.im-nav-bar__search {
+		padding: 16rpx 24rpx;
+	}
 }
 </style>