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
2025-08-03 16:36:13 +08:00
parent a88d909a90
commit 5805d83af2
12 changed files with 366 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/chat/ChatCardAI.vue
View File

@@ -34,7 +34,7 @@
min-width: 80px;
background: rgba(255,255,255,0.4);
box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.1);
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.1);
border-radius: 4px 20px 20px 20px;
border: 1px solid;
border-color: #FFFFFF;

2
pages/chat/ChatMainList.vue
View File

@@ -389,8 +389,6 @@
chatMsgList.value[aiMsgIndex].toolCall = chunk.toolCall
}
console.log("============>", chunk.question)
// 如果有问题，则设置问题
if(chunk.question && chunk.question.length > 0) {
chatMsgList.value[aiMsgIndex].question = chunk.question

25
pages/chat/ChatTopNavBar.vue
View File

@@ -1,20 +1,31 @@
<template>
<view class="nav-bar">
<view class="nav-item" @click="openDrawer">
<image src="/static/drawer_icon.png" mode="aspectFit" class="nav-item-icon"></image>
<view class="nav-item" @click="showDrawer('showLeft')">
<image class="nav-item-icon" src="/static/drawer_icon.png" mode="aspectFit"></image>
</view>
<uni-drawer ref="showLeft" mode="left" :width="320">
<DrawerHome @closeDrawer="closeDrawer('showLeft')" />
</uni-drawer>
</view>
</template>
<script setup>
import { defineEmits } from 'vue'
import { defineEmits, ref } from 'vue'
import DrawerHome from "@/pages/drawer/DrawerHome.vue";
const emits = defineEmits(['openDrawer'])
const showLeft = ref(false)
const openDrawer = () => {
emits('openDrawer')
console.log('=============打开抽屉')
// 打开窗口
const showDrawer = (e) => {
showLeft.value.open()
}
// 关闭窗口
const closeDrawer = (e) => {
showLeft.value.close()
}
</script>
<style lang="scss" scoped>

2
pages/chat/ChatTopWelcome.vue
View File

@@ -4,7 +4,7 @@
<!-- :style="backgroundStyle" -->
<view class="top-item1-left">
<image :src="initPageImages.welcomeImageUrl"></image>
<text>{{ currentDate }} 多云 -3～6℃ ss </text>
<text>{{ currentDate }} 多云 -3～6℃ dd </text>
</view>
<view class="top-item1-right">
<image :src="initPageImages.logoImageUrl"></image>

30
pages/index/index.vue
View File

@@ -1,40 +1,18 @@
<template>
<ex-drawer ref="drawer" width="488">
<!-- 抽屉页面 -->
<view class="mian-drawer" slot="drawerContent">
<drawer-home @closeDrawer="closeDrawer"></drawer-home>
<view class="container">
<ChatMainList/>
</view>
<!-- 主页面 -->
<view class="mian-container" slot="containerContent">
<chat-main-list @openDrawer="openDrawer"></chat-main-list>
</view>
</ex-drawer>
</template>
<script setup>
import { ref, onMounted } from "vue";
import exDrawer from "@/third/ex-drawer/ex-drawer.vue";
import DrawerHome from "@/pages/drawer/DrawerHome.vue";
import ChatMainList from "../chat/ChatMainList.vue";
const drawer = ref();
const openDrawer = () => {
drawer.value.open();
};
const closeDrawer = () => {
drawer.value.close();
};
</script>
<style lang="scss" scoped>
.mian-drawer {
height: 100vh;
background-color: #ffffff;
}
.mian-container {
.container {
width: 100vw;
height: 100vh;
background-color: #ffffff;

98
third/ex-drawer/README.md
View File

@@ -1,98 +0,0 @@
## 已实现
1. 正常手势操作
2. 方法开关
3. 显示/隐藏比例自动吸附
4. 动画
5. 独立滑动
6. .....编不出来了 自行测试吧
## 使用说明
和正常组件使用方式一样
```js
// 1.引入
import exDrawer from '@/components/ex-drawer/ex-drawer.vue'
// 2.挂载
components:{
exDrawer
}
```
```html
// 3.使用
<ex-drawer ref='drawer' width="488">
<view class="drawer" slot="drawerContent">
<button @click="close" type="default">关闭</button>
drawer
</view>
<view class="container" slot="containerContent">
<button @click="open" type="default">打开</button>
<view class="" v-for="(item,index) in 100" :key="index">
{{item}}
</view>
</view>
</ex-drawer>
```
具体请查看demo
## props
1. width(string) // 抽屉宽度
2. 没了 主容器宽高和抽屉高度都可以被自动撑开 自行设置即可
## 插槽
1. drawerContent // 抽屉插槽
2. containerContent // 主容器插槽
## 方法
1. this.$refs.drawer.open() //打开
2. this.$refs.drawer.colse() //关闭
## 之后预计更新
1. 自定义进出吸附比例
2. 看需求....
```html
<template>
<view>
<ex-drawer ref='drawer' width="488">
<view class="drawer" slot="drawerContent">
<button @click="close" type="default">关闭</button>
drawer
</view>
<view class="container" slot="containerContent">
<button @click="open" type="default">打开</button>
<view class="" v-for="(item,index) in 100" :key="index">
{{item}}
</view>
</view>
</ex-drawer>
</view>
</template>
```
```js
<script>
import exDrawer from '@/components/ex-drawer/ex-drawer.vue'
export default {
data() {
return {
}
},
components:{
exDrawer
},
methods: {
open(){
this.$refs.drawer.open()
},
close(){
this.$refs.drawer.close()
}
}
}
</script>
```
```css
<style>
.drawer{
background-color: #ffffff;
height: 100vh;
}
.container{
background-color: #19BE6B;
width: 750rpx;
}
</style>
```

128
third/ex-drawer/ex-drawer.vue
View File

@@ -1,128 +0,0 @@
<template>
<!-- <view class="ex-drawer" @touchstart="containerStart" @touchend="containerEnd" @touchmove="containerMove"> -->
<!-- 移除手势 -->
<view class="ex-drawer">
<!-- 抽屉 -->
<view class="ex-drawer-warp" :class="{ move: move }" :style="{ width: `${width}rpx`, left: `-${width}rpx`, transform: `translate3d(${differential}px,0,0)`,backfaceVisibility:`hidden`, }">
<!-- 抽屉内容插槽 -->
<slot name="drawerContent"></slot>
</view>
<!-- 主容器 -->
<view class="ex-container-warp" :class="maskShow == true ? 'container prevent' : 'container'">
<!-- 遮罩 -->
<view v-show="maskShow" class="mask" @tap="close"></view>
<!-- 主容器内容插槽 -->
<slot name="containerContent"></slot>
</view>
</view>
</template>
<script>
export default {
data() {
return {
maskShow: false,
startX: 0,
startY: 0,
moveX: 0,
moveY: 0,
startExcursion: 0,
differential: 0,
isDirection: null,
iswidth: null,
move: false
};
},
props: {
width: {
type: String,
default: ''
}
},
methods: {
containerStart(e) {
this.isDirection = null;
this.move = false;
this.startX = e.changedTouches[0].clientX;
this.startY = e.changedTouches[0].clientY;
this.startExcursion = this.differential;
},
containerMove(e) {
this.moveX = e.changedTouches[0].clientX;
this.moveY = e.changedTouches[0].clientY;
let X = Math.abs(this.moveX - this.startX);
let Y = Math.abs(this.moveY - this.startY);
let differential = this.startExcursion + this.moveX - this.startX;
differential = Math.min(uni.upx2px(this.width), differential);
differential = Math.max(0, differential);
this.isDirection == null ? (this.isDirection = Y / X > Math.sqrt(3) / 3) : ``;
if (!this.isDirection) {
this.differential = differential;
if(this.differential == 0 ){
this.containerEnd()
}else{
this.maskShow = true
}
}
},
containerEnd() {
if (this.isDirection != null) {
if (!this.isDirection) {
this.iswidth = this.differential > (uni.upx2px(this.width) * 2) / 6;
this.differential > 0 && this.differential < uni.upx2px(this.width) ? (this.move = true) : ``;
}
this.differential = this.iswidth ? uni.upx2px(this.width) : 0;
this.differential == 0 ? this.maskShow = false : ``;
}
},
close(){
if(this.maskShow){
this.move = true
this.differential = 0;
if(this.differential == 0 ){
this.maskShow = false
this.iswidth=false
}
}
},
open(){
if(!this.maskShow){
this.move = true
this.differential = uni.upx2px(this.width);
if(this.differential == uni.upx2px(this.width) ){
this.maskShow = true
this.iswidth=true
}
}
}
}
};
</script>
<style>
.ex-drawer {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.ex-drawer-warp {
position: fixed;
z-index: 1000;
touch-action: none;
}
.mask {
position: fixed;
left: 0rpx;
width: 100vw;
height: 100vh;
z-index: 999;
background-color:#000000;filter:Alpha(Opacity=60);opacity:0.3;
}
.prevent {
touch-action: none;
}
.move {
transition: transform 0.3s ease;
}
</style>

13
uni_modules/uni-drawer/changelog.md Normal file
View File

@@ -0,0 +1,13 @@
## 1.2.1（2021-11-22）
- 修复 vue3中个别scss变量无法找到的问题
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-drawer](https://uniapp.dcloud.io/component/uniui/uni-drawer)
## 1.1.1（2021-07-30）
- 优化 vue3下事件警告的问题
## 1.1.0（2021-07-13）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.7（2021-05-12）
- 新增 组件示例地址
## 1.0.6（2021-02-04）
- 调整为uni_modules目录规范

45
uni_modules/uni-drawer/components/uni-drawer/keypress.js Normal file
View File

@@ -0,0 +1,45 @@
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
// this.$once('hook:beforeDestroy', () => {
// document.removeEventListener('keyup', listener)
// })
},
render: () => {}
}
// #endif

183
uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue Normal file
View File

@@ -0,0 +1,183 @@
<template>
<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
<view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" :style="{width:drawerWidth+'px'}">
<slot />
</view>
<!-- #ifdef H5 -->
<keypress @esc="close('mask')" />
<!-- #endif -->
</view>
</template>
<script>
// #ifdef H5
import keypress from './keypress.js'
// #endif
/**
* Drawer 抽屉
* @description 抽屉侧滑菜单
* @tutorial https://ext.dcloud.net.cn/plugin?id=26
* @property {Boolean} mask = [true | false] 是否显示遮罩
* @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
* @property {Boolean} mode = [left | right] Drawer 滑出位置
* @value left 从左侧滑出
* @value right 从右侧侧滑出
* @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
* @event {Function} close 组件关闭时触发事件
*/
export default {
name: 'UniDrawer',
components: {
// #ifdef H5
keypress
// #endif
},
emits:['change'],
props: {
/**
* 显示模式（左、右），只在初始化生效
*/
mode: {
type: String,
default: ''
},
/**
* 蒙层显示状态
*/
mask: {
type: Boolean,
default: true
},
/**
* 遮罩是否可点击关闭
*/
maskClick:{
type: Boolean,
default: true
},
/**
* 抽屉宽度
*/
width: {
type: Number,
default: 220
}
},
data() {
return {
visibleSync: false,
showDrawer: false,
rightMode: false,
watchTimer: null,
drawerWidth: 220
}
},
created() {
// #ifndef APP-NVUE
this.drawerWidth = this.width
// #endif
this.rightMode = this.mode === 'right'
},
methods: {
clear(){},
close(type) {
// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
if((type === 'mask' && !this.maskClick) || !this.visibleSync) return
this._change('showDrawer', 'visibleSync', false)
},
open() {
// fixed by mehaotian 处理重复点击打开的事件
if(this.visibleSync) return
this._change('visibleSync', 'showDrawer', true)
},
_change(param1, param2, status) {
this[param1] = status
if (this.watchTimer) {
clearTimeout(this.watchTimer)
}
this.watchTimer = setTimeout(() => {
this[param2] = status
this.$emit('change',status)
}, status ? 50 : 300)
}
}
}
</script>
<style lang="scss" scoped>
$uni-mask: rgba($color: #000000, $alpha: 0.4) ;
// 抽屉宽度
$drawer-width: 220px;
.uni-drawer {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 999;
}
.uni-drawer__content {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: absolute;
top: 0;
width: $drawer-width;
bottom: 0;
background-color: $uni-bg-color;
transition: transform 0.3s ease;
}
.uni-drawer--left {
left: 0;
/* #ifdef APP-NVUE */
transform: translateX(-$drawer-width);
/* #endif */
/* #ifndef APP-NVUE */
transform: translateX(-100%);
/* #endif */
}
.uni-drawer--right {
right: 0;
/* #ifdef APP-NVUE */
transform: translateX($drawer-width);
/* #endif */
/* #ifndef APP-NVUE */
transform: translateX(100%);
/* #endif */
}
.uni-drawer__content--visible {
transform: translateX(0px);
}
.uni-drawer__mask {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
opacity: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: $uni-mask;
transition: opacity 0.3s;
}
.uni-drawer__mask--visible {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
opacity: 1;
}
</style>

87
uni_modules/uni-drawer/package.json Normal file
View File

@@ -0,0 +1,87 @@
{
"id": "uni-drawer",
"displayName": "uni-drawer 抽屉",
"version": "1.2.1",
"description": "抽屉式导航，用于展示侧滑菜单，侧滑导航。",
"keywords": [
"uni-ui",
"uniui",
"drawer",
"抽屉",
"侧滑导航"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}

10
uni_modules/uni-drawer/readme.md Normal file
View File

@@ -0,0 +1,10 @@
## Drawer 抽屉
> **组件名：uni-drawer**
> 代码块： `uDrawer`
抽屉侧滑菜单。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-drawer)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839