copilot新样式完成
This commit is contained in:
aixianling
@@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import ChatContent from "./components/chatContent.vue";
|
||||
import ThinkingBar from "./components/thinkingBar.vue";
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "AiCopilot",
|
||||
@@ -26,11 +27,34 @@ export default {
|
||||
// "著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。",
|
||||
// uid: "me"
|
||||
// },
|
||||
],
|
||||
apps: [
|
||||
{label: "日常助理", icon: "https://cdn.sinoecare.com/i/2024/07/04/66864da37fc2b.png"},
|
||||
{label: "文本助理", icon: "https://cdn.sinoecare.com/i/2024/07/04/66864da1684ad.png"},
|
||||
],
|
||||
filter: "",
|
||||
conversations: [
|
||||
{content: "请对“city不city”一词进行深入分析"},
|
||||
{content: "请对“city不city”一词进行深入分析"},
|
||||
{content: "请对“city不city”一词进行深入分析"},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
expandBtn: v => v.expand ? "收起" : "展开"
|
||||
...mapState(["user"]),
|
||||
profile: v => v.user.info || {},
|
||||
expandBtn: v => v.expand ? "收起" : "展开",
|
||||
btns: () => [
|
||||
{
|
||||
label: "文件", icon: "https://cdn.sinoecare.com/i/2024/07/04/668663436e46e.png", click: () => {
|
||||
}
|
||||
}
|
||||
],
|
||||
rowBtns: () => [
|
||||
{icon: "https://cdn.sinoecare.com/i/2024/07/04/66866edc2910a.png", click: row => 0},
|
||||
{icon: "https://cdn.sinoecare.com/i/2024/07/04/66866ed734540.png", click: row => 0},
|
||||
{icon: "https://cdn.sinoecare.com/i/2024/07/04/66866eda99e4d.png", click: row => 0},
|
||||
]
|
||||
},
|
||||
components: {ThinkingBar, ChatContent},
|
||||
methods: {
|
||||
@@ -86,13 +110,35 @@ export default {
|
||||
</div>
|
||||
<thinking-bar v-show="loading"/>
|
||||
<div class="flex content">
|
||||
<div class="left" :class="{expand}"></div>
|
||||
<div class="left" :class="{expand}">
|
||||
<div class="profile">
|
||||
<div v-text="profile.name"/>
|
||||
<span v-text="profile.girdName"/>
|
||||
</div>
|
||||
<div class="apps flex">
|
||||
<div v-for="(item,i) in apps" :key="i" class="app pointer" :style="{backgroundImage: `url(${item.icon})`}" v-text="item.label"/>
|
||||
</div>
|
||||
<div class="conversation">
|
||||
<el-input class="search" v-model="filter" placeholder="搜索历史对话记录" size="small" suffix-icon="el-icon-search" clearable/>
|
||||
<div class="item pointer" v-for="item in conversations" :key="item.id">
|
||||
{{ item.content }}
|
||||
<div class="operation flex">
|
||||
<div v-for="(btn,i) in rowBtns" :key="i" class="pointer" :style="{backgroundImage: `url(${btn.icon})`}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right flex column gap-14">
|
||||
<chat-content class="fill" :list="history"/>
|
||||
<div class="sendBox flex gap-14">
|
||||
<el-input type="textarea" class="fill input" autosize resize="none" v-model="prompt" placeholder="请输入..."
|
||||
@keydown.native="handleHotkey" :disabled="loading" :placeholder="loading?'正在思考中...':'请输入'"/>
|
||||
<div class="sendBtn" @click="handleSend"/>
|
||||
<div class="sendBox">
|
||||
<div class="topBar flex">
|
||||
<div v-for="(btn,i) in btns" :key="i" class="btn pointer" :style="{backgroundImage: `url(${btn.icon})`}" v-text="btn.label" @click="btn.click"/>
|
||||
</div>
|
||||
<div class="flex end">
|
||||
<el-input type="textarea" class="fill input" autosize resize="none" v-model="prompt" placeholder="请输入..." :rows="2"
|
||||
@keydown.native="handleHotkey" :disabled="loading" :placeholder="loading?'正在思考中...':'请输入'"/>
|
||||
<div class="sendBtn" @click="handleSend"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -157,15 +203,128 @@ export default {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
transition: width 1s;
|
||||
padding: 14px 0;
|
||||
overflow: hidden;
|
||||
|
||||
& > * {
|
||||
margin: 0 14px;
|
||||
}
|
||||
|
||||
&.expand {
|
||||
width: 260px;
|
||||
|
||||
|
||||
& + .right {
|
||||
border-left-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.profile {
|
||||
padding: 18px 14px;
|
||||
height: 88px;
|
||||
background: url("https://cdn.sinoecare.com/i/2024/06/04/665ed2bc580fa.png") no-repeat;
|
||||
background-size: 100%;
|
||||
font-size: 14px;
|
||||
color: #222222;
|
||||
letter-spacing: 0;
|
||||
line-height: 20px;
|
||||
|
||||
& > div {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.apps {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
margin-top: 18px;
|
||||
padding-top: 29px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "常用功能";
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.app {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
padding-top: 47px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 7px;
|
||||
background-size: 36px 36px;
|
||||
border-radius: 4px;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: #286ffd14;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conversation {
|
||||
margin-top: 17px;
|
||||
|
||||
:deep(.search) {
|
||||
margin-bottom: 10px;
|
||||
|
||||
input {
|
||||
border-radius: 32px;
|
||||
border: none;
|
||||
background: #F4F6FA;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
line-height: 32px;
|
||||
padding: 0 14px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
|
||||
.operation {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 32px;
|
||||
background-image: linear-gradient(90deg, #e1ebff00 0%, #E2EBFF 14%);
|
||||
border-radius: 0 16px 16px 0;
|
||||
gap: 10px;
|
||||
padding: 0 12px 0 20px;
|
||||
display: none;
|
||||
|
||||
.pointer {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
&:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #2b71fd24;
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
@@ -176,10 +335,10 @@ export default {
|
||||
border-left: 1px solid transparent;
|
||||
|
||||
.sendBtn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: url("https://cdn.sinoecare.com/i/2024/06/04/665ed2bbdeb27.png") no-repeat center;
|
||||
width: 36px;
|
||||
height: 24px;
|
||||
border-radius: 24px;
|
||||
background: url("https://cdn.sinoecare.com/i/2024/07/04/668650935514e.png") no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -190,17 +349,40 @@ export default {
|
||||
}
|
||||
|
||||
:deep(.sendBox) {
|
||||
width: 100%;
|
||||
padding-right: 14px;
|
||||
width: calc(100% - 14px);
|
||||
margin-right: 14px;
|
||||
padding: 8px 14px;
|
||||
background: #F4F6FA;
|
||||
align-items: flex-end;
|
||||
border-radius: 4px;
|
||||
|
||||
.topBar {
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
border-bottom: 1px solid #E0E0E0;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.btn {
|
||||
font-size: 12px;
|
||||
color: #525F7A;
|
||||
padding-left: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-size: 14px 14px;
|
||||
|
||||
&:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input > textarea {
|
||||
width: 100%;
|
||||
line-height: 40px;
|
||||
border-radius: 22px;
|
||||
border: 1px solid #ddd;
|
||||
padding: 0 14px;
|
||||
line-height: 20px;
|
||||
padding: 0 5px 0 0;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
background: #F4F6FA;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user