mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-09-18 01:06:39 +08:00
opt: optimize chat list page for mobile
This commit is contained in:
RockYang
parent
aaa5ba99aa
commit
a39ed9764c
29
web/src/assets/css/mobile/chat-list.css
Normal file
29
web/src/assets/css/mobile/chat-list.css
Normal file
@ -0,0 +1,29 @@
|
||||
.mobile-chat-list .content .van-cell__value .chat-list-item {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
}
|
||||
.mobile-chat-list .content .van-cell__value .chat-list-item .van-image {
|
||||
min-width: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.mobile-chat-list .content .van-cell__value .chat-list-item .van-ellipsis {
|
||||
margin-top: 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.mobile-chat-list .van-nav-bar .van-nav-bar__right .van-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
.van-popup .picker-option {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
height: 20px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.van-popup .picker-option .van-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
47
web/src/assets/css/mobile/chat-list.styl
Normal file
47
web/src/assets/css/mobile/chat-list.styl
Normal file
@ -0,0 +1,47 @@
|
||||
.mobile-chat-list {
|
||||
.content {
|
||||
.van-cell__value {
|
||||
.chat-list-item {
|
||||
display flex
|
||||
font-size 14px
|
||||
|
||||
.van-image {
|
||||
min-width 32px
|
||||
width 32px
|
||||
height 32px
|
||||
}
|
||||
|
||||
.van-ellipsis {
|
||||
margin-top 5px;
|
||||
margin-left 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.van-nav-bar {
|
||||
.van-nav-bar__right {
|
||||
.van-icon {
|
||||
font-size 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.van-popup {
|
||||
.picker-option {
|
||||
display flex
|
||||
width 100%
|
||||
padding 0 10px
|
||||
overflow hidden
|
||||
height 20px
|
||||
text-overflow ellipsis
|
||||
|
||||
.van-image {
|
||||
width 20px;
|
||||
height 20px;
|
||||
margin-right 5px
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -77,7 +77,7 @@ onMounted(() => {
|
||||
padding: 5px 10px;
|
||||
background-color: #98E165;
|
||||
color #444444
|
||||
font-size: 16px
|
||||
font-size: 14px
|
||||
border-radius: 5px
|
||||
line-height 1.5
|
||||
}
|
||||
|
||||
@ -95,7 +95,7 @@ onMounted(() => {
|
||||
padding: 5px 10px;
|
||||
color #444444
|
||||
background-color: #ffffff;
|
||||
font-size: 16px
|
||||
font-size: 14px
|
||||
border-radius: 5px;
|
||||
|
||||
p:last-child {
|
||||
|
||||
@ -159,31 +159,42 @@ const routes = [
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/mobile/chat/session',
|
||||
name: 'mobile-chat-session',
|
||||
component: () => import('@/views/mobile/ChatSession.vue'),
|
||||
},
|
||||
|
||||
{
|
||||
name: 'mobile',
|
||||
path: '/mobile',
|
||||
meta: {title: 'ChatPuls-智能助手V3'},
|
||||
meta: {title: 'ChatPlus-智能助手V3'},
|
||||
component: () => import('@/views/mobile/Home.vue'),
|
||||
redirect: '/mobile/chat/list',
|
||||
redirect: '/mobile/chat',
|
||||
children: [
|
||||
{
|
||||
path: '/mobile/chat/list',
|
||||
name: 'mobile-chat-list',
|
||||
path: '/mobile/chat',
|
||||
name: 'mobile-chat',
|
||||
component: () => import('@/views/mobile/ChatList.vue'),
|
||||
},
|
||||
|
||||
{
|
||||
path: '/mobile/mj',
|
||||
name: 'mobile-mj',
|
||||
component: () => import('@/views/mobile/ImageMj.vue'),
|
||||
},
|
||||
{
|
||||
path: '/mobile/profile',
|
||||
name: 'mobile-profile',
|
||||
component: () => import('@/views/mobile/Profile.vue'),
|
||||
},
|
||||
{
|
||||
path: '/mobile/apps',
|
||||
name: 'mobile-app',
|
||||
component: () => import('@/views/mobile/ChatApps.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/mobile/chat/session',
|
||||
name: 'mobile-chat-session',
|
||||
component: () => import('@/views/mobile/ChatSession.vue'),
|
||||
},
|
||||
|
||||
{
|
||||
name: 'test',
|
||||
path: '/test',
|
||||
|
||||
@ -261,49 +261,5 @@ const removeChat = (item) => {
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
$fontSize = 16px;
|
||||
.mobile-chat-list {
|
||||
|
||||
.content {
|
||||
.van-cell__value {
|
||||
.chat-list-item {
|
||||
display flex
|
||||
font-size $fontSize
|
||||
|
||||
.van-image {
|
||||
min-width 32px
|
||||
width 32px
|
||||
height 32px
|
||||
}
|
||||
|
||||
.van-ellipsis {
|
||||
margin-top 5px;
|
||||
margin-left 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.van-picker-column {
|
||||
.picker-option {
|
||||
display flex
|
||||
width 100%
|
||||
padding 0 10px
|
||||
|
||||
.van-image {
|
||||
width 20px;
|
||||
height 20px;
|
||||
margin-right 5px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.van-nav-bar {
|
||||
.van-nav-bar__right {
|
||||
.van-icon {
|
||||
font-size 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "@/assets/css/mobile/chat-list.styl"
|
||||
</style>
|
||||
@ -4,9 +4,10 @@
|
||||
<router-view/>
|
||||
|
||||
<van-tabbar route v-model="active" @change="onChange">
|
||||
<van-tabbar-item to="/mobile/chat/list" name="home" icon="chat-o"></van-tabbar-item>
|
||||
<van-tabbar-item to="/mobile/setting" name="setting" icon="setting-o"></van-tabbar-item>
|
||||
<van-tabbar-item to="/mobile/profile" name="profile" icon="user-o"></van-tabbar-item>
|
||||
<van-tabbar-item to="/mobile/chat" name="home" icon="chat-o">对话</van-tabbar-item>
|
||||
<van-tabbar-item to="/mobile/mj" name="imageMj" icon="photo-o">绘图</van-tabbar-item>
|
||||
<van-tabbar-item to="/mobile/apps" name="apps" icon="apps-o">应用</van-tabbar-item>
|
||||
<van-tabbar-item to="/mobile/profile" name="profile" icon="user-o">我的</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
|
||||
</div>
|
||||
@ -33,7 +34,6 @@ checkSession().then(() => {
|
||||
const active = ref('home')
|
||||
const onChange = (index) => {
|
||||
console.log(index)
|
||||
// showToast(`标签 ${index}`);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
128
web/src/views/mobile/ImageMj.vue
Normal file
128
web/src/views/mobile/ImageMj.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="mobile-user-profile container">
|
||||
<van-nav-bar :title="title"/>
|
||||
|
||||
<div class="content">
|
||||
<van-form @submit="save">
|
||||
<van-cell-group inset v-model="form">
|
||||
<van-field
|
||||
v-model="form.mobile"
|
||||
name="手机号"
|
||||
label="手机号"
|
||||
readonly
|
||||
disabled
|
||||
placeholder="手机号"
|
||||
/>
|
||||
<van-field label="头像">
|
||||
<template #input>
|
||||
<van-uploader v-model="fileList"
|
||||
reupload max-count="1"
|
||||
:deletable="false"
|
||||
:after-read="afterRead"/>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field label="剩余对话次数">
|
||||
<template #input>
|
||||
<van-tag type="primary">{{ form.calls }}</van-tag>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field label="剩余绘图次数">
|
||||
<template #input>
|
||||
<van-tag type="primary">{{ form.img_calls }}</van-tag>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field label="累计消耗tokens">
|
||||
<template #input>
|
||||
<van-tag type="primary">{{ form.total_tokens }}</van-tag>
|
||||
</template>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
提交
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref} from "vue";
|
||||
import {showFailToast, showNotify, showSuccessToast} from "vant";
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import Compressor from 'compressorjs';
|
||||
|
||||
const title = ref('用户设置')
|
||||
const form = ref({
|
||||
username: '',
|
||||
nickname: '',
|
||||
mobile: '',
|
||||
avatar: '',
|
||||
calls: 0,
|
||||
tokens: 0
|
||||
})
|
||||
const fileList = ref([
|
||||
{
|
||||
url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg',
|
||||
message: '上传中...',
|
||||
}
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
httpGet('/api/user/profile').then(res => {
|
||||
form.value = res.data
|
||||
fileList.value[0].url = form.value.avatar
|
||||
}).catch((e) => {
|
||||
console.log(e.message)
|
||||
showFailToast('获取用户信息失败')
|
||||
});
|
||||
})
|
||||
|
||||
const afterRead = (file) => {
|
||||
file.status = 'uploading';
|
||||
file.message = '上传中...';
|
||||
// 压缩图片并上传
|
||||
new Compressor(file.file, {
|
||||
quality: 0.6,
|
||||
success(result) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', result, result.name);
|
||||
// 执行上传操作
|
||||
httpPost('/api/upload', formData).then((res) => {
|
||||
form.value.avatar = res.data
|
||||
file.status = 'success'
|
||||
showNotify({type: 'success', message: '上传成功'})
|
||||
}).catch((e) => {
|
||||
console.log(e.message)
|
||||
showNotify({type: 'danger', message: '上传失败'})
|
||||
})
|
||||
},
|
||||
error(err) {
|
||||
console.log(err.message);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const save = () => {
|
||||
httpPost('/api/user/profile/update', form.value).then(() => {
|
||||
showSuccessToast('保存成功')
|
||||
}).catch(() => {
|
||||
showFailToast('保存失败')
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.mobile-user-profile {
|
||||
.content {
|
||||
.van-field__label {
|
||||
width 100px
|
||||
text-align right
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user