Skip to content
GitLab
Commit 87d7af4c authored by 水玉婷's avatar 水玉婷
Browse files

feat:历史记录样式调整

parent 0bdf9834
Hide whitespace changes
Inline Side-by-side
index.html
View file @ 87d7af4c
......@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>国械小智</title>
<title></title>
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
......
src/assets/chat-ai-line.svg 0 → 100644
View file @ 87d7af4c
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18" viewBox="0 0 18 18"><defs><clipPath id="master_svg0_153_05444"><rect x="0" y="0" width="18" height="18" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_153_05444)"><path d="M15.53505,6.0960836L15.350101,6.5203438C15.2148,6.8309407,14.7852,6.8309407,14.649826,6.5203438L14.464951,6.0960836C14.135324,5.3396029,13.541625,4.7373083000000005,12.800776,4.407810700000001L12.231001,4.154415800000001C11.922976,4.017398399999999,11.922976,3.5691082,12.231001,3.4320905L12.7689,3.1928556C13.528801,2.8548832,14.133151,2.2302982,14.457076,1.4481231L14.646976,0.9896480400000001C14.779349,0.670117289,15.220652,0.670117289,15.352951,0.9896480400000001L15.542851,1.4481231C15.86685,2.2302982,16.4712,2.8548832,17.231099999999998,3.1928556L17.768927,3.4320905C18.077024,3.5691082,18.077024,4.017398399999999,17.768927,4.154415800000001L17.199225,4.407810700000001C16.458375,4.7373083000000005,15.864676,5.3396029,15.53505,6.0960836ZM7.5,2.2500006L10.5,2.2500006L10.5,3.750001L7.5,3.750001C5.0147173,3.750001,3,5.7647181,3,8.250001000000001C3,10.9575,4.84656,12.724201,9.000000499999999,14.60985L9.000000499999999,12.75L10.5,12.75C12.985275,12.75,15,10.7352762,15,8.250001000000001L16.500000999999997,8.250001000000001C16.500000999999997,11.563725,13.813725,14.25,10.5,14.25L10.5,16.875C6.7500005,15.375,1.5,13.125,1.5,8.250001000000001C1.5,4.9362903,4.18629,2.2500006,7.5,2.2500006Z" fill="#323232" fill-opacity="1"/></g></svg>
\ No newline at end of file
src/assets/sidebar-unfold-line.svg 0 → 100644
View file @ 87d7af4c
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18" viewBox="0 0 18 18"><defs><clipPath id="master_svg0_153_04803"><rect x="18" y="0" width="18" height="18" rx="0"/></clipPath></defs><g transform="matrix(-1,0,0,1,36,0)" clip-path="url(#master_svg0_153_04803)"><path d="M21.75,3.75L27.7500005,3.75L27.7500005,14.25L21.75,14.25L21.75,3.75ZM32.25,14.25L29.25,14.25L29.25,3.75L32.25,3.75L32.25,14.25ZM21,2.25C20.58579004,2.25,20.25,2.58579004,20.25,3L20.25,15.000001C20.25,15.414225,20.58579004,15.75,21,15.75L33.000001,15.75C33.414225,15.75,33.75,15.414225,33.75,15.000001L33.75,3C33.75,2.58579004,33.414225,2.25,33.000001,2.25L21,2.25Z" fill="#323232" fill-opacity="1"/></g></svg>
\ No newline at end of file
src/views/History.vue
View file @ 87d7af4c
<template>
<div class="history-container">
<!-- 头部栏 -->
<div class="history-header">
<div class="history-header" :class="{ 'header-open': isHistoryPanelOpen }">
<div class="header-left">
<button class="menu-button" @click="toggleHistoryPanel">
<menu-outlined />
</button>
<h2 class="header-title">{{ appName || '国械小智'}}</h2>
<img :src="defaultAvatar" alt="avatar" class="avatar-image" />
<h2 class="header-title">{{ appName || '国械小智'}}</h2>
<div class="menu-button" @click="toggleHistoryPanel">
<img :src="menuIcon" alt="menu-icon" class="menu-icon" />
展开
</div>
</div>
<div class="header-right">
<button class="new-chat-button" @click="createNewChat">
<plus-outlined />
</button>
<div class="new-chat-button" @click="createNewChat">
<img :src="newChatIcon" alt="new-chat-icon" class="new-chat-icon" />
新建会话
</div>
</div>
</div>
<!-- 历史记录侧边栏 -->
<div class="history-sidebar" :class="{ 'sidebar-open': isHistoryPanelOpen }">
<div class="sidebar-header">
<h3>历史记录</h3>
<button class="close-button" @click="toggleHistoryPanel">
<close-outlined />
</button>
<h3><img :src="defaultAvatar" alt="avatar" class="avatar-image" />{{ appName || '国械小智'}}</h3>
<div class="close-button" @click="toggleHistoryPanel">
<img :src="menuIcon" alt="menu-icon" class="menu-icon" />
</div>
</div>
<div class="search-box">
......@@ -30,7 +33,7 @@
<input
v-model="searchKeyword"
type="text"
placeholder="搜索历史记录..."
placeholder="搜索历史记录"
@input="filterHistory"
/>
</div>
......@@ -72,14 +75,13 @@
<div class="session-info">
<div class="session-title">{{ session.title }}</div>
</div>
<button class="delete-button" @click.stop="deleteSession(session)">
<div class="delete-button" @click.stop="deleteSession(session)">
<delete-outlined />
</button>
</div>
</div>
<!-- 上拉加载更多提示 -->
<div v-if="hasMore && !isLoading && recentSessions.length > 0" class="pull-up-hint">
<div class="pull-up-icon">↑</div>
<span>上拉加载更多历史记录</span>
</div>
......@@ -134,10 +136,11 @@ import { ref, computed, onMounted } from 'vue';
import AiChat from './components/AiChat.vue';
import axios from '../utils/axios';
import { message } from 'ant-design-vue';
import defaultAvatar from '@/assets/logo2.png';
import menuIcon from '@/assets/sidebar-unfold-line.svg'
import newChatIcon from '@/assets/chat-ai-line.svg'
import {
MenuOutlined,
PlusOutlined,
CloseOutlined,
SearchOutlined,
DeleteOutlined,
FileSearchOutlined
......@@ -264,8 +267,9 @@ const handleStart = (clientY: number, target: HTMLElement, event: Event) => {
return;
}
// 只有在顶部且没有在滚动时才允许下拉刷新
if (target.scrollTop === 0 && !isRefreshing.value) {
// 只有在顶部、没有在滚动、且列表可以滚动时才允许下拉刷新
const canScroll = target.scrollHeight > target.clientHeight;
if (target.scrollTop === 0 && !isRefreshing.value && canScroll) {
pullDownStartY.value = clientY;
isPullingDown.value = true;
}
......@@ -437,6 +441,9 @@ onMounted(() => {
@import './components/style.less';
.chat-history {
height: calc(100vh - 52px);
:deep(.chat-header) {
display:none;
}
}
// 历史记录容器
......@@ -455,27 +462,27 @@ onMounted(() => {
align-items: center;
padding: 12px 20px;
background: #ffffff;
border-bottom: 1px solid #e8e8e8;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 100;
&.header-open {
border-bottom: 1px solid #F2F3F5;
}
.header-left {
display: flex;
align-items: center;
gap: 12px;
.avatar-image {
width: 25px;
height: 18px;
object-fit: cover;
}
.menu-button {
background: none;
border: none;
padding: 8px;
border-radius: 6px;
cursor: pointer;
color: #666;
color: @gray-7;
transition: all 0.2s ease;
&:hover {
background: #f0f0f0;
color: #1890ff;
margin-left:16px;
img{
vertical-align: text-top;
}
}
......@@ -492,19 +499,12 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: #f0f0f0;
color: #666;
color: @gray-7;
border: none;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background: #e0e0e0;
color: #1890ff;
transform: scale(1.05);
img{
margin-right: 4px;
}
}
}
......@@ -517,7 +517,7 @@ onMounted(() => {
left: -300px;
width: 300px;
height: 100vh;
background: #ffffff;
background: #F2F5F5;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
transition: left 0.3s ease;
z-index: 1000;
......@@ -532,9 +532,14 @@ onMounted(() => {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #e8e8e8;
padding: 12px 20px;
.avatar-image {
width: 25px;
height: 18px;
object-fit: cover;
margin-right: 6px;
}
h3 {
font-size: 16px;
font-weight: 600;
......@@ -558,8 +563,7 @@ onMounted(() => {
}
.search-box {
padding: 16px 20px;
border-bottom: 1px solid #e8e8e8;
padding: 4px 20px 16px;
.search-input {
position: relative;
......@@ -578,6 +582,7 @@ onMounted(() => {
border: 1px solid #d9d9d9;
border-radius: 6px;
font-size: 16px;
background: #E8EBEB;
&:focus {
outline: none;
......@@ -597,9 +602,7 @@ onMounted(() => {
justify-content: space-between;
align-items: center;
padding: 12px 20px;
border-bottom: 1px solid #f0f0f0;
background: #fafafa;
font-size: 12px;
font-size: 14px;
.total-count {
color: #666;
......@@ -607,7 +610,7 @@ onMounted(() => {
}
.display-count {
color: #999;
color: #1890FF;
}
}
......@@ -625,7 +628,6 @@ onMounted(() => {
padding: 16px;
color: #666;
font-size: 14px;
background: #ffffff;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1;
......@@ -701,17 +703,17 @@ onMounted(() => {
.history-item {
display: flex;
align-items: center;
padding: 12px 20px;
padding: 8px 20px;
cursor: pointer;
transition: background-color 0.2s ease;
&:hover {
background: #f5f5f5;
background: #D5D8D8;
}
&.active {
background: #e6f7ff;
border-right: 3px solid #1890ff;
background: #D1E9FF;
color: #1890FF;
}
.session-info {
......@@ -722,7 +724,6 @@ onMounted(() => {
font-size: 16px;
font-weight: 500;
color: #333;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
......@@ -749,13 +750,12 @@ onMounted(() => {
padding: 4px;
border-radius: 4px;
cursor: pointer;
color: #ccc;
color: #323232;
opacity: 0;
transition: all 0.2s ease;
&:hover {
color: #ff4d4f;
background: #fff2f0;
}
}
......
src/views/Login.vue
View file @ 87d7af4c
......@@ -47,12 +47,12 @@ export default {
}
onMounted(() => {
// // 检查是否已登录
// const status = wechat.checkLoginStatus()
// if (status.isLoggedIn) {
// router.replace('/')
// return
// }
// 检查是否已登录
const status = wechat.checkLoginStatus()
if (status.isLoggedIn) {
router.replace('/')
return
}
// 执行静默登录
handleLogin()
......
src/views/components/AiChat.vue
View file @ 87d7af4c
......@@ -451,9 +451,11 @@ const sendMessage = async (type: MessageType = 'text', params: MessageParams = {
questionLocalAudioFilePath: audioUrl,
audioDuration: durationTime,
...props.params,
dialogSessionId: dialogSessionId.value,
} : {
question: messageContent,
...props.params,
dialogSessionId: dialogSessionId.value,
};
const response = await fetch(`${import.meta.env.VITE_SSE_PATH}/ask/app/${props.params?.appId}`, {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment