feat: 更改对话输入框样式,黑暗模式适配;更改对话首页标题描述;更改快速开始标语,扩大了grid容器的width10px大小;
This commit is contained in:
parent
e4b12ae5f5
commit
4713cde2a8
|
|
@ -384,6 +384,7 @@ watch(
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
.dark & {
|
.dark & {
|
||||||
background: #11111b;
|
background: #11111b;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="boxRef" style="flex: 1; position: relative">
|
<div ref="boxRef" class="message-list-container">
|
||||||
<div ref="containerRef" class="message-list" @scroll="handleScroll">
|
<div ref="containerRef" class="message-list" @scroll="handleScroll">
|
||||||
<!-- 欢迎界面 -->
|
<!-- 欢迎界面 -->
|
||||||
<WelcomeScreen
|
<WelcomeScreen
|
||||||
|
|
@ -102,9 +102,7 @@ const newMessageCount = ref(0);
|
||||||
const isAutoScrolling = ref(true);
|
const isAutoScrolling = ref(true);
|
||||||
const lastScrollTop = ref(0);
|
const lastScrollTop = ref(0);
|
||||||
|
|
||||||
onMounted(() => {
|
// 高度通过 CSS flex 布局自适应,不需要手动设置
|
||||||
containerRef.value.style.height = boxRef.value?.clientHeight + "px";
|
|
||||||
});
|
|
||||||
|
|
||||||
// 滚动处理
|
// 滚动处理
|
||||||
function handleScroll() {
|
function handleScroll() {
|
||||||
|
|
@ -229,8 +227,14 @@ onMounted(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.message-list-container {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.message-list {
|
.message-list {
|
||||||
height: 500px;
|
height: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,9 @@
|
||||||
<div class="logo-glow"></div>
|
<div class="logo-glow"></div>
|
||||||
</div>
|
</div>
|
||||||
<h1 class="title">Kexue AI 智能助手</h1>
|
<h1 class="title">Kexue AI 智能助手</h1>
|
||||||
<p class="subtitle">我可以帮助你解答问题、生成内容、分析数据等</p>
|
<p class="subtitle">
|
||||||
|
大学生用GPT,把自己学废了? Study模式拒绝直接给答案,引导学生思考。
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 功能卡片 -->
|
<!-- 功能卡片 -->
|
||||||
|
|
@ -108,19 +110,27 @@ const features = computed(() => [
|
||||||
const suggestions = computed(() => [
|
const suggestions = computed(() => [
|
||||||
{
|
{
|
||||||
icon: Lightbulb,
|
icon: Lightbulb,
|
||||||
text: "帮我写一个 Vue 3 组件示例",
|
text: "让可学 AI 成为我的全科学习导师",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Globe,
|
icon: Globe,
|
||||||
text: "解释一下什么是机器学习",
|
text: "让AI帮助我调试代码 (但不直接写代码)",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: PenTool,
|
icon: PenTool,
|
||||||
text: "帮我写一封商务邮件",
|
text: "使用 AI 提升我的创意写作技巧",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Code,
|
icon: Code,
|
||||||
text: "如何优化 React 应用性能",
|
text: "与 AI 进行沉浸式语言对话练习",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Code,
|
||||||
|
text: '让 AI 成为我的"梦想职业引路人"',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Code,
|
||||||
|
text: "让 AI 扮演一位严谨的学术论文写作导师",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -265,7 +275,7 @@ const suggestions = computed(() => [
|
||||||
}
|
}
|
||||||
|
|
||||||
.quick-start {
|
.quick-start {
|
||||||
max-width: 700px;
|
max-width: 710px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -450,8 +450,8 @@ onMounted(() => {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.chat-input-container {
|
.chat-input-container {
|
||||||
background: white;
|
background: #f3f4f5;
|
||||||
border: 2px solid #e2e8f0;
|
// border: 2px solid #e2e8f0;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
|
@ -461,10 +461,10 @@ onMounted(() => {
|
||||||
border-color: #374151;
|
border-color: #374151;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-focused {
|
// &.is-focused {
|
||||||
border-color: #3b82f6;
|
// border-color: #3b82f6;
|
||||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
|
// box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
|
||||||
}
|
// }
|
||||||
|
|
||||||
&.is-expanded {
|
&.is-expanded {
|
||||||
.textarea-wrapper textarea {
|
.textarea-wrapper textarea {
|
||||||
|
|
@ -509,7 +509,7 @@ onMounted(() => {
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #f3f4f6;
|
background: #9f9fa05c;
|
||||||
color: #374151;
|
color: #374151;
|
||||||
|
|
||||||
.dark & {
|
.dark & {
|
||||||
|
|
@ -593,7 +593,7 @@ onMounted(() => {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
border-top: 1px solid #f3f4f6;
|
border-top: 1px solid #f3f4f6;
|
||||||
background: #fafbfc;
|
// background: #fafbfc;
|
||||||
|
|
||||||
.dark & {
|
.dark & {
|
||||||
border-top-color: #2d2d3d;
|
border-top-color: #2d2d3d;
|
||||||
|
|
@ -621,7 +621,7 @@ onMounted(() => {
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #f3f4f6;
|
background: #9f9fa05c;
|
||||||
color: #374151;
|
color: #374151;
|
||||||
|
|
||||||
.dark & {
|
.dark & {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue