parent
52137e6d81
commit
b5ed379148
Binary file not shown.
@ -0,0 +1,324 @@ |
||||
<template> |
||||
<div class="ai-pages-warp"> |
||||
<div class="ai-pages-sider"> |
||||
<div class="ai-pages-sider-title">AI智能体助手</div> |
||||
<div class="ai-pages-sider-btn"> |
||||
<el-button class="ai-dialog-btn"><img class="img" src="@/views/pages/AI-Data-Analysis/images/add-dialog.svg"/> |
||||
开启新对话 |
||||
</el-button> |
||||
</div> |
||||
<div class="ai-dialog-history-name">近期对话</div> |
||||
<div class="ai-dialog-history-list"> |
||||
<div class="list-item" :class="activeHistory==index?'active':''" v-for="(item,index) in historyDialog"> |
||||
{{ item.name }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<main class="ai-pages-main col"> |
||||
<div class="ai-dialog-main"> |
||||
<!-- 对话主体 --> |
||||
<div class="ai-dialog"> |
||||
<div class="ai-dialog-item"> |
||||
<!-- 对话 提问 --> |
||||
<div class="ai-dialog-ask"> |
||||
<div class="ask-contnet">前端工程师</div> |
||||
</div> |
||||
<!-- 对话 回答 --> |
||||
<div class="ai-dialog-answer"> |
||||
<div class="answer-top"> |
||||
<div class="answer-icon"><img class="img" src="@/views/pages/AI-Data-Analysis/images/AI.svg"/></div> |
||||
<div class="answer-think"> |
||||
<img class="img m-r-mimi" src="@/views/pages/AI-Data-Analysis/images/icon-deep-think.svg"/> |
||||
<span>已思考45秒</span> |
||||
<i class="el-icon-arrow-down"></i></div> |
||||
</div> |
||||
<div class="answer-contnet"> |
||||
<p>第三方”是一个广泛使用的术语，具体含义取决于上下文。以下是不同领域中的常见解释：</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- 对话底部 --> |
||||
<div class="ai-dialog-bottom"> |
||||
<el-input |
||||
type="textarea" |
||||
placeholder="给小智发消息" |
||||
v-model="textareaAsk" |
||||
:rows="4" |
||||
resize="none" |
||||
></el-input> |
||||
<div class="deep-btn row flex-align-center flex-justify-center"> |
||||
<img class="img m-r-mimi" src="@/views/pages/AI-Data-Analysis/images/icon-deep-think.svg"/>深度思考 |
||||
</div> |
||||
<el-button icon="el-icon-top" circle class="v-dialog-sent" @click="gotoSentMessage"></el-button> |
||||
</div> |
||||
</div> |
||||
</main> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import axios from 'axios' |
||||
|
||||
export default { |
||||
name: 'edit', |
||||
data() { |
||||
return { |
||||
textareaAsk: "", |
||||
historyDialog: [], |
||||
activeHistory: 0 |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getHistoryDialog() |
||||
}, |
||||
methods: { |
||||
/** 发送信息 **/ |
||||
gotoSentMessage() { |
||||
let base_url = 'http://192.168.130.155:5678/api/v3/user_share_chat_completions' |
||||
let api_key = 'cjy-dade97a59d0f4fcfa3f2bb256b77a187' |
||||
let app_code = 'fe602e3d-3b88-11f0-8d1b-00e04f309c26' |
||||
let url = `${base_url}?api_key=${api_key}&app_code=${app_code}&user_input=${this.textareaAsk}` |
||||
axios({method:'get',url:url,responseType:"blob"}).then(function (response) { |
||||
console.log(response); |
||||
}) |
||||
.catch(function (error) { |
||||
console.log(error); |
||||
}); |
||||
}, |
||||
/** 关闭 WebSocket连接 **/ |
||||
getHistoryDialog() { |
||||
this.historyDialog = [ |
||||
{name: "Vue项目DOCX转Markdown方案"}, |
||||
{name: "列表加载完成提示方式总结"}, |
||||
{name: "JS实现DOCX转HTML保留样式"}, |
||||
{name: "流式Markdown转HTML方案"}, |
||||
{name: "JS实现DOCX转Markdown方法"}, |
||||
] |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
|
||||
.ai-pages-warp { |
||||
display: flex; |
||||
height: 100vh; |
||||
background-color: #010D1F |
||||
} |
||||
|
||||
/* Ai对话 侧边*/ |
||||
.ai-pages-sider { |
||||
width: 300px; |
||||
height: 100vh; |
||||
flex: 0 0 300px; |
||||
background-color: #131E2D; |
||||
|
||||
.ai-pages-sider-title { |
||||
text-align: center; |
||||
font-size: 18px; |
||||
height: 80px; |
||||
line-height: 80px; |
||||
font-weight: bold; |
||||
color: #fff; |
||||
} |
||||
|
||||
.ai-dialog-history-name { |
||||
margin: 10px 0; |
||||
padding: 0 15px; |
||||
font-size: 13px; |
||||
color: #555; |
||||
font-weight: 600; |
||||
line-height: 18px; |
||||
} |
||||
|
||||
.ai-pages-sider-btn { |
||||
margin-bottom: 30px; |
||||
padding: 0 10px; |
||||
|
||||
.ai-dialog-btn { |
||||
width: 100%; |
||||
height: 44px; |
||||
background-color: #4D6BFE; |
||||
border: 1px solid #131E2D; |
||||
line-height: 22px; |
||||
border-radius: 16px; |
||||
color: #fff; |
||||
font-size: 16px; |
||||
|
||||
span { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.img { |
||||
position: relative; |
||||
top: -4px; |
||||
width: 24px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.ai-dialog-history-list { |
||||
padding: 0 10px; |
||||
|
||||
.list-item { |
||||
height: 38px; |
||||
line-height: 38px; |
||||
cursor: pointer; |
||||
border-radius: 12px; |
||||
padding: 0 10px; |
||||
font-size: 14px; |
||||
color: #fff; |
||||
|
||||
&.active { |
||||
background-color: rgb(73 73 73) |
||||
} |
||||
&:hover { |
||||
background-color: rgba(73, 73,73,.5) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* Ai对话 主体*/ |
||||
.ai-dialog-main { |
||||
position: relative; |
||||
height: 100vh; |
||||
width: 800px; |
||||
margin: 0 auto; |
||||
padding: 20px 0; |
||||
|
||||
.ai-dialog-bottom { |
||||
position: absolute; |
||||
width: 100%; |
||||
left: 0; |
||||
bottom: 30px; |
||||
height: 150px; |
||||
padding: 10px; |
||||
background-color: #131E2D; |
||||
box-shadow: 0px 0px 0px .5px #5d56a50d; |
||||
border-radius: 24px; |
||||
|
||||
.deep-btn { |
||||
position: absolute; |
||||
left: 20px; |
||||
bottom: 10px; |
||||
height: 28px; |
||||
padding: 0 20px; |
||||
color: rgba(#fff, .5); |
||||
line-height: 26px; |
||||
border: 1px solid rgba(#fff, .5); |
||||
border-radius: 32px; |
||||
|
||||
.img { |
||||
width: 16px; |
||||
opacity: .5 |
||||
} |
||||
} |
||||
|
||||
.v-dialog-sent { |
||||
position: absolute; |
||||
right: 10px; |
||||
bottom: 10px; |
||||
height: 32px; |
||||
width: 32px; |
||||
border-radius: 32px; |
||||
background-color: #4D6BFE !important; |
||||
border-color: #4D6BFE; |
||||
|
||||
::v-deep .el-icon-top { |
||||
display: inline-block; |
||||
position: relative; |
||||
left: -7px; |
||||
top: -6px; |
||||
} |
||||
|
||||
::v-deep .el-icon-top:before { |
||||
color: #fff !important; |
||||
font-size: 24px; |
||||
} |
||||
} |
||||
|
||||
::v-deep .el-textarea__inner { |
||||
background-color: #131E2D !important; |
||||
border-color: #131E2D !important; |
||||
color: #fff; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
::v-deep .el-textarea__inner::placeholder { |
||||
font-size: 16px |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* 编辑页面 Ai对话 */ |
||||
.ai-dialog { |
||||
.ai-dialog-item { |
||||
.ai-dialog-ask { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
|
||||
.ask-contnet { |
||||
padding: 10px 20px; |
||||
background-color: #131E2D; |
||||
border-radius: 10px; |
||||
color: #fff; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
|
||||
.ai-dialog-answer { |
||||
.answer-top { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.answer-icon { |
||||
width: 34px; |
||||
height: 34px; |
||||
text-align: center; |
||||
border-radius: 34px; |
||||
border: 1px solid rgba(255, 255, 255, .2); |
||||
background-color: #131E2D; |
||||
|
||||
.img { |
||||
position: relative; |
||||
top: 4px; |
||||
width: 22px; |
||||
} |
||||
} |
||||
|
||||
.answer-think { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-left: 10px; |
||||
font-size: 13px; |
||||
padding: 5px 20px; |
||||
background-color: #131E2D; |
||||
border-radius: 10px; |
||||
color: #fff; |
||||
|
||||
.img { |
||||
width: 16px |
||||
} |
||||
} |
||||
|
||||
.el-icon-arrow-down { |
||||
margin-left: 4px |
||||
} |
||||
} |
||||
|
||||
.answer-contnet { |
||||
margin: 20px 0 20px 50px; |
||||
font-size: 16px; |
||||
color: #fff; |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
@ -1,98 +0,0 @@ |
||||
<template> |
||||
<div class="ai-pages row"> |
||||
<main class="ai-pages-main"> |
||||
<!-- 对话左侧 --> |
||||
<div class="ai-dialog"> |
||||
<div class="ai-dialog-item"> |
||||
<div class="ai-dialog-ask row"> |
||||
<div class="contnet"> |
||||
前端工程师 |
||||
</div> |
||||
</div> |
||||
<div class="ai-dialog-answer"> |
||||
<div class="icon row"> |
||||
<img src="@/assets/ai-images/aie.png" class="logo"/> |
||||
<div class="think"> |
||||
<i class="iconfont icon-think ai-icon-small"></i> |
||||
已思考45秒 |
||||
<i class="el-icon-arrow-down"></i></div> |
||||
</div> |
||||
<div class="contnet m-t-medium"> |
||||
<div class="ds-markdown ds-markdown--block" style="--ds-md-zoom: 1.143;"><p class="ds-markdown-paragraph"> |
||||
“第三方”是一个广泛使用的术语，具体含义取决于上下文。以下是不同领域中的常见解释：</p> |
||||
<hr> |
||||
<h3>1. <strong>通用定义</strong></h3> |
||||
<ul> |
||||
<li><p class="ds-markdown-paragraph"> |
||||
指独立于两个主要参与方（如买方和卖方、平台与用户）的<strong>外部实体</strong>。</p></li> |
||||
<li><p class="ds-markdown-paragraph"><strong>特点</strong>：通常具有中立性，不直接参与核心利益关系，但可能提供服务或监督。 |
||||
</p></li> |
||||
</ul> |
||||
<hr> |
||||
<h3>2. <strong>常见应用场景</strong></h3> |
||||
<ul> |
||||
<li><p class="ds-markdown-paragraph"><strong>商业与合同</strong></p> |
||||
<ul> |
||||
<li><p class="ds-markdown-paragraph"><strong>第三方服务商</strong>：如支付处理（支付宝）、物流（顺丰）、认证机构等。 |
||||
</p></li> |
||||
<li><p class="ds-markdown-paragraph"><strong>第三方审计/评估</strong>：独立机构对企业的财务、合规性进行审查（如会计师事务所）。 |
||||
</p></li> |
||||
</ul> |
||||
</li> |
||||
<li><p class="ds-markdown-paragraph"><strong>科技与互联网</strong></p> |
||||
<ul> |
||||
<li><p class="ds-markdown-paragraph"><strong>第三方软件/插件</strong>：非官方开发的应用程序（如微信小程序、Chrome扩展）。 |
||||
</p></li> |
||||
<li><p class="ds-markdown-paragraph"><strong>第三方登录</strong>：通过其他平台账号登录（如“用Google账号登录”）。 |
||||
</p></li> |
||||
<li><p class="ds-markdown-paragraph"><strong>第三方数据共享</strong>：企业将用户数据提供给外部合作方（需用户授权）。 |
||||
</p></li> |
||||
</ul> |
||||
</li> |
||||
<li><p class="ds-markdown-paragraph"><strong>法律与纠纷</strong></p> |
||||
<ul> |
||||
<li><p class="ds-markdown-paragraph"><strong>第三方调解/仲裁</strong>：中立方协助解决双方争议（如劳动争议仲裁委员会）。 |
||||
</p></li> |
||||
</ul> |
||||
</li> |
||||
<li><p class="ds-markdown-paragraph"><strong>金融</strong></p> |
||||
<ul> |
||||
<li><p class="ds-markdown-paragraph"><strong>第三方存管</strong>：证券交易中，资金由银行托管而非券商直接持有。 |
||||
</p></li> |
||||
</ul> |
||||
</li> |
||||
</ul> |
||||
<hr> |
||||
<h3>3. <strong>注意事项</strong></h3> |
||||
<ul> |
||||
<li><p class="ds-markdown-paragraph"><strong>中立性风险</strong>：某些情况下，第三方可能受某一方影响，失去公正性。 |
||||
</p></li> |
||||
<li><p class="ds-markdown-paragraph"><strong>数据安全</strong>：使用第三方服务时（如云存储），需关注其隐私政策。 |
||||
</p></li> |
||||
<li><p class="ds-markdown-paragraph"><strong>依赖性</strong>：过度依赖第三方可能导致业务风险（如供应链中断）。 |
||||
</p></li> |
||||
</ul> |
||||
<hr> |
||||
<p class="ds-markdown-paragraph"> |
||||
如果需要更具体的解释（如某个领域的第三方），可以补充说明上下文，我会进一步细化解答！</p></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</main> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'edit', |
||||
data() { |
||||
return {} |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
methods: {} |
||||
} |
||||
</script> |
||||
|
||||
Loading…
Reference in new issue