zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 页面结构的调整

Browse Source
This commit is contained in:
zoujing
2026-04-29 12:31:50 +08:00
parent 3b0fb23a5c
commit 3d6fe2642c
9 changed files with 95 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/pages/ChatMain/ChatMainList/index.vue
View File

@@ -1,15 +1,33 @@
<template>
<view class="flex flex-col h-screen">
<view class="flex flex-col h-screen relative">
<!-- 顶部自定义导航栏 -->
<view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="header absolute top-0 left-0 w-full z-10" :style="{ paddingTop: statusBarHeight + 'px' }">
<ChatTopNavBar
ref="topNavBarRef"
:mainPageDataModel="mainPageDataModel"
/>
</view>
<view class="relative">
<image class="w-full block" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80"
mode="widthFix" />
<view class="absolute bottom-0 left-0 right-0 flex-full">
<view class="px-12 pt-12">
<HomeWelcome :mainPageDataModel="mainPageDataModel" />
</view>
<view style="margin-bottom: -1px;">
<AiTabSwitch v-model="tabIndex" :list="tabList" @change="handleChange" />
</view>
</view>
</view>
<view v-show="tabIndex === 0" class="flex-full overflow-hidden scroll-y">
<Discovery />
</view>
<!-- 消息列表（可滚动区域） -->
<scroll-view
v-show="tabIndex === 1"
class="main flex-full overflow-hidden scroll-y"
scroll-y
:scroll-top="scrollTop"
@@ -186,6 +204,10 @@ import {
} from "@/constant/constant";
import { MessageRole, MessageType, CompName, Command } from "@/model/ChatModel";
import HomeWelcome from "../HomeWelcome/index.vue";
import AiTabSwitch from "@/components/AiTabSwitch/index.vue";
import Discovery from "../../Discovery/index.vue";
import ChatTopWelcome from "../ChatTopWelcome/index.vue";
import NoticeMessage from "../NoticeMessage/index.vue";
import ChatTopNavBar from "../ChatTopNavBar/index.vue";
@@ -286,6 +308,13 @@ const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
// 当前会话的消息ID，用于保持发送和终止的messageId一致
let currentSessionMessageId = null;
const tabIndex = ref(0);
const tabList = ["探索发现", "AI伴游"];
const handleChange = (i) => {
console.log("切换:", i);
};
/// =============事件函数↓================
const handleTouchEnd = () => {
clearTimeout(holdKeyboardTimer.value);

74
src/pages/Home/components/HomeWelcome.vue → src/pages/ChatMain/HomeWelcome/index.vue
View File

@@ -1,14 +1,8 @@
<template>
<view class="flex border-box w-full">
<SpriteAnimator
:src="spriteStyle.ipLargeImage"
:frameWidth="spriteStyle.frameWidth"
:frameHeight="spriteStyle.frameHeight"
:totalFrames="spriteStyle.totalFrames"
:columns="spriteStyle.columns"
:displayWidth="spriteStyle.displayWidth"
:fps="16"
/>
<SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
:frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
:displayWidth="spriteStyle.displayWidth" :fps="16" />
<view class="flex flex-col flex-full">
<view class="flex flex-row flex-items-center flex-justify-between">
@@ -16,19 +10,10 @@
<text class="font-size-20 font-500 color-white mt-4"> 26°C ☀️ </text>
</view>
<swiper
@change="onSwiperChange"
class="swiper"
circular
:autoplay="autoplay"
:interval="interval"
:duration="duration"
:indicator-dots="false"
>
<swiper @change="onSwiperChange" class="swiper" circular :autoplay="autoplay" :interval="interval"
:duration="duration" :indicator-dots="false">
<swiper-item v-for="item in bannerList" :key="item.title">
<view
class="swiper-item flex flex-col flex-items-start flex-justify-between px-10"
>
<view class="swiper-item flex flex-col flex-items-start flex-justify-between px-10">
<text class="font-size-12 font-600 color-B45309">
{{ item.title }}
</text>
@@ -44,17 +29,9 @@
</swiper-item>
</swiper>
<yo-indicator-dot
:current-index="currentIndex"
:length="bannerList.length"
:duration="0.5"
default-width="4px"
active-width="16px"
dot-height="4px"
shape="circle"
default-color="rgba(255,255,255,0.5)"
active-color="rgba(255,255,255,1)"
/>
<yo-indicator-dot :current-index="currentIndex" :length="bannerList.length" :duration="0.5" default-width="4px"
active-width="16px" dot-height="4px" shape="circle" default-color="rgba(255,255,255,0.5)"
active-color="rgba(255,255,255,1)" />
</view>
</view>
</template>
@@ -83,14 +60,34 @@ const bannerList = ref([
},
]);
const props = defineProps({
mainPageDataModel: {
type: Object,
default: () => {
return {
initPageImages: {
backgroundImageUrl: "",
logoImageUrl: "",
welcomeImageUrl: "",
}
};
},
},
});
const initPageImages = computed(() => {
return props.mainPageDataModel?.initPageImages || {};
});
const spriteStyle = computed(() => {
const images = initPageImages.value;
return {
ipLargeImage:
"https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/onefeel/2045694865984802818.webp",
frameWidth: 353,
frameHeight: 353,
totalFrames: 96,
columns: 10,
backgroundImageUrl: images.backgroundImageUrl,
ipLargeImage: images.ipLargeImage,
frameWidth: images.ipLargeImageWidth,
frameHeight: images.ipLargeImageHeight,
totalFrames: images.ipLargeTotalFrames,
columns: images.ipLargeColumns,
displayWidth: 105,
};
});
@@ -98,6 +95,7 @@ const spriteStyle = computed(() => {
const onSwiperChange = (e) => {
currentIndex.value = e.detail.current;
};
</script>
<style scoped>

39
src/pages/Discovery/index.vue
View File

@@ -1,24 +1,25 @@
<template>
<view>
<FindTabs
v-if="discoveryTabs.length > 0"
v-model="activeIndex"
:tabs="discoveryTabs"
@change="handleTabChange"
/>
<CardSwiper
v-if="discoveryCards.length > 0"
:list="discoveryCards"
@card-click="cardClick" />
<view class="flex flex-col h-full overflow-hidden min-height-0">
<view class="flex-shrink-0">
<FindTabs
v-if="discoveryTabs.length > 0"
v-model="activeIndex"
:tabs="discoveryTabs"
@change="handleTabChange"
/>
</view>
<QuickQuestions />
<scroll-view class="flex-full border-box min-height-0" scroll-y show-scrollbar="false">
<CardSwiper v-if="discoveryCards.length > 0" :list="discoveryCards" @card-click="cardClick" />
<QuickQuestions />
</scroll-view>
</view>
</template>
<script setup>
import { computed, onMounted, ref } from "vue";
import { onMounted, ref } from "vue";
import FindTabs from "./components/FindTabs/index.vue";
import CardSwiper from "./components/CardSwiper/index.vue";
import QuickQuestions from "./components/QuickQuestions/index.vue";
@@ -66,7 +67,6 @@ const discoveryCards = ref([
/// tabs 切换事件
const handleTabChange = ({ tab, idx }) => {
if (activeIndex.value === idx) return;
activeIndex.value = idx;
queryDiscoveryData(tab.id);
}
@@ -89,14 +89,14 @@ const queryTabsList = async () => {
discoveryTabs.value = tabList;
/// 查询是否有sceneId参数
const activeTab = discoveryTabs.value.find((tab) => {
return tab.id === sceneId;
});
const activeTabIndex = discoveryTabs.value.findIndex((tab) => tab.id === sceneId);
/// 如果有则优先展示对应tab数据，没有则展示第一个tab数据
if (activeTab) {
if (activeTabIndex > -1) {
activeIndex.value = activeTabIndex;
queryDiscoveryData(sceneId);
} else {
activeIndex.value = 0;
queryDiscoveryData(discoveryTabs.value[0].id);
}
}
@@ -133,5 +133,4 @@ onMounted(() => {
<style lang="scss" scoped>
</style>

20
src/pages/Home/components/HomeNavBar.vue
View File

@@ -1,20 +0,0 @@
<template>
<view class="border-box h-44 flex flex-items-center pl-12 pr-12">
<uni-icons type="bars" size="24" color="#333" @click="showDrawer" />
<view class="w-24 h-24"></view>
</view>
</template>
<script setup>
import { ref, defineExpose } from "vue";
const show = ref(false);
const showDrawer = () => uni.$emit("SHOW_DRAWER");
defineExpose({ show });
</script>
<style lang="scss" scoped>
</style>

69
src/pages/Home/index.vue
View File

@@ -1,69 +0,0 @@
<template>
<view class="relative flex flex-col h-screen">
<view
class="absolute top-0 left-0 w-full z-10"
:style="{ paddingTop: statusBarHeight + 'px' }"
>
<HomeNavBar />
</view>
<view class="relative flex-full">
<view class="relative">
<image
class="w-full block"
src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80"
mode="widthFix"
/>
<view
class="absolute bottom-0 left-0 right-0 flex-full"
>
<view class="px-12 pt-12">
<HomeWelcome />
</view>
<view style="margin-bottom: -1px;">
<AiTabSwitch v-model="tabIndex" :list="tabList" @change="handleChange" />
</view>
</view>
</view>
<view class="tab-content">
<Discovery v-if="tabIndex === 0" />
<ChatMainList v-if="tabIndex === 1" />
</view>
</view>
</view>
</template>
<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import HomeNavBar from "./components/HomeNavBar.vue";
import HomeWelcome from "./components/HomeWelcome.vue";
import AiTabSwitch from "@/components/AiTabSwitch/index.vue";
import ChatMainList from "../ChatMain/ChatMainList/index.vue";
import Discovery from "../Discovery/index.vue";
const tabIndex = ref(0);
const tabList = ["探索发现", "AI伴游"];
const handleChange = (i) => {
console.log("切换:", i);
};
/// 导航栏相关
const statusBarHeight = ref(20);
/// =============生命周期函数↓================
onLoad(() => {
uni.getSystemInfo({
success: (res) => {
statusBarHeight.value = res.statusBarHeight || 20;
},
});
});
</script>
<style scoped>
</style>

3
src/pages/index/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<view class="w-full h-screen bg-liner">
<Home />
<ChatMainList />
</view>
<!-- 日历组件 -->
@@ -29,7 +29,6 @@ import ChatMainList from "../ChatMain/ChatMainList/index.vue";
import MoreService from "../ChatModule/MoreService/index.vue";
import DrawerSection from "../DrawerSection/index.vue";
import Calender from "@/components/Calender/index.vue";
import Home from "../Home/index.vue";
const appStore = useAppStore();

2
src/static/scss/index.scss
View File

@@ -21,3 +21,5 @@
@import "./white-space.scss";
@import "./box-sizing.scss";
@import "./word-break.scss";
@import "./min-height.scss";
@import "./min-width.scss";

3
src/static/scss/min-height.scss Normal file
View File

@@ -0,0 +1,3 @@
.min-height-0 {
min-height: 0;
}

3
src/static/scss/min-width.scss Normal file
View File

@@ -0,0 +1,3 @@
.min-width-0 {
min-width: 0;
}