feat: 更改对话输入框样式,黑暗模式适配;更改对话首页标题描述;更改快速开始标语,扩大了grid容器的width10px大小;

This commit is contained in:
SuperManTouX 2026-03-06 10:42:48 +08:00
parent e4b12ae5f5
commit 4713cde2a8
4 changed files with 35 additions and 20 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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 & {