|
|
@@ -1,655 +1,706 @@
|
|
|
<template>
|
|
|
- <div class="dialog-flex-wrap">
|
|
|
- <div class="dialog-flex" ref="dialogScroll">
|
|
|
- <div class="section-open" v-if="open">
|
|
|
- <header class="dialog-header">
|
|
|
- <a-avatar shape="circle" :size="28">
|
|
|
- <img
|
|
|
- alt="avatar"
|
|
|
- :src="agentInfo.avatar"
|
|
|
- />
|
|
|
- </a-avatar>
|
|
|
- <a-typography-paragraph :ellipsis="{rows: 1, css: true}" :style="{flex: 1,margin: '0 0 0 12px'}">
|
|
|
- <span class="dialog-span">{{agentInfo.title}}</span>
|
|
|
- </a-typography-paragraph>
|
|
|
- </header>
|
|
|
- <footer class="dialog-footer">
|
|
|
- <p>{{open}}</p>
|
|
|
- </footer>
|
|
|
- </div>
|
|
|
- <div class="section-suggestions">
|
|
|
- <div :class="['section-suggestion', readonly ? 'disabled' : '']" v-for="(suggestion, key) in suggestions" :key="key" @click="selectSuggestion(suggestion)">
|
|
|
- {{suggestion}}<icon-arrow-right />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="dialog-list" v-if="dialogList.length > 0" :key="randomKey">
|
|
|
- <div :class="['dialog-item', isSetting ? '' : 'dialog-absolute']" v-for="(item,key) in dialogList" :key="item.key">
|
|
|
- <div class="dialog-header" v-if="item?.question">
|
|
|
- <a-avatar shape="circle" :size="28">
|
|
|
- <img
|
|
|
- alt="avatar"
|
|
|
- :src="userInfo.avatar"
|
|
|
- />
|
|
|
- </a-avatar>
|
|
|
- <a-typography-paragraph :ellipsis="{rows: 1, css: true}" :style="{flex: 1,margin: '0 0 0 12px'}" v-if="isSetting">
|
|
|
- <span class="dialog-span">{{userInfo.name}}</span>
|
|
|
- </a-typography-paragraph>
|
|
|
- </div>
|
|
|
- <div class="dialog-footer" v-if="item?.question">
|
|
|
- <p style="margin-top: 0;">{{item.question}}</p>
|
|
|
- </div>
|
|
|
- <div class="dialog-file" v-if="item?.file">
|
|
|
- <icon-file-pdf :size="20" />
|
|
|
- <a-typography-paragraph :ellipsis="{rows: 1, css: true}" :style="{flex: 1,margin: '0 0 0 8px'}">
|
|
|
- {{item.file.name}}
|
|
|
- </a-typography-paragraph>
|
|
|
- </div>
|
|
|
- <div class="dialog-header" v-if="item?.capacity">
|
|
|
- <a-avatar shape="circle" :size="28">
|
|
|
- <img
|
|
|
- alt="avatar"
|
|
|
- :src="agentInfo.avatar"
|
|
|
- />
|
|
|
- </a-avatar>
|
|
|
- <a-typography-paragraph :ellipsis="{rows: 1, css: true}" :style="{flex: 1,margin: '0 0 0 12px'}" v-if="isSetting">
|
|
|
- <span class="dialog-span">{{agentInfo.title}}</span>
|
|
|
- </a-typography-paragraph>
|
|
|
- </div>
|
|
|
- <div class="dialog-footer" v-if="item?.capacity">
|
|
|
- <div @click="openCapacity(key)" :class="[readonly || item.capacity.status === 'loading' ? 'disabled' : '']">
|
|
|
- <a-spin :size="18" v-if="item.capacity.status === 'loading'" />
|
|
|
- <icon-check-circle-fill :size="18" v-else />
|
|
|
- <span>{{item.capacity.status === 'loading' ? '正在调用' : '已调用'}}</span>
|
|
|
- <b>{{item.capacity.text}}</b>
|
|
|
- <icon-caret-right size="18" v-if="item.capacity.status === 'loaded' && !menuList[key].open" />
|
|
|
- <icon-caret-down size="18" v-if="item.capacity.status === 'loaded' && menuList[key].open" />
|
|
|
- </div>
|
|
|
- <section v-if="item.capacity.status === 'loaded'" v-show="menuList[key].open">
|
|
|
- <p>{{item.capacity.data.title}}</p>
|
|
|
- <div v-if="item.capacity.data.list">
|
|
|
- <p v-for="(item,key) in item.capacity.data.list" :key="key">
|
|
|
- <a-typography-paragraph :ellipsis="{rows: 1, css: true}" :style="{flex: 1,margin: '0'}">
|
|
|
- {{item}}
|
|
|
- </a-typography-paragraph>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div v-if="item.capacity.data.documents">
|
|
|
- <div v-for="(document, documentKey) in item.capacity.data.documents" :key="documentKey">
|
|
|
- <div @click="openDocument(key, documentKey)" :class="[readonly ? 'disabled' : '']">
|
|
|
- <span>{{document.type}}</span>
|
|
|
- <a-typography-paragraph :ellipsis="{rows: 1, css: true}" :style="{flex: 1,margin: '0'}">
|
|
|
- <span>{{document.title}}</span>
|
|
|
+ <div class="dialog-flex-wrap">
|
|
|
+ <div class="dialog-flex" ref="dialogScroll">
|
|
|
+ <div class="section-open" v-if="open">
|
|
|
+ <header class="dialog-header">
|
|
|
+ <a-avatar shape="circle" :size="28">
|
|
|
+ <img alt="avatar" :src="agentInfo.avatar" />
|
|
|
+ </a-avatar>
|
|
|
+ <a-typography-paragraph
|
|
|
+ :ellipsis="{ rows: 1, css: true }"
|
|
|
+ :style="{ flex: 1, margin: '0 0 0 12px' }"
|
|
|
+ >
|
|
|
+ <span class="dialog-span">{{ agentInfo.title }}</span>
|
|
|
</a-typography-paragraph>
|
|
|
- <span>
|
|
|
- <em v-for="(item, documentIndex) in document.list" :key="documentIndex">{{item.title}}</em>
|
|
|
- </span>
|
|
|
- <icon-caret-down size="12" v-if="documentKey === menuList[key].documentOpenIndex" />
|
|
|
- <icon-caret-right size="12" v-else />
|
|
|
- </div>
|
|
|
- <div v-show="documentKey === menuList[key].documentOpenIndex">
|
|
|
- <p v-for="(item, index) in document.list" :key="index">
|
|
|
- <span>{{item.title}}</span>
|
|
|
- <a-typography-paragraph :ellipsis="{rows: 3, css: true}" :style="{flex: 1,margin: '0'}">
|
|
|
- <span style="color: rgba(153, 153, 153, 1);font-size: 12px;">{{item.content}}</span>
|
|
|
- </a-typography-paragraph>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+ </header>
|
|
|
+ <footer class="dialog-footer">
|
|
|
+ <p>{{ open }}</p>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+ <div class="section-suggestions">
|
|
|
+ <div
|
|
|
+ :class="['section-suggestion', readonly ? 'disabled' : '']"
|
|
|
+ v-for="(suggestion, key) in suggestions"
|
|
|
+ :key="key"
|
|
|
+ @click="selectSuggestion(suggestion)"
|
|
|
+ >
|
|
|
+ {{ suggestion }}<icon-arrow-right />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-list" v-if="dialogList.length > 0" :key="randomKey">
|
|
|
+ <div
|
|
|
+ :class="['dialog-item', isSetting ? '' : 'dialog-absolute']"
|
|
|
+ v-for="(item, key) in dialogList"
|
|
|
+ :key="item.key"
|
|
|
+ >
|
|
|
+ <div class="dialog-header" v-if="item?.question">
|
|
|
+ <a-avatar shape="circle" :size="28">
|
|
|
+ <img alt="avatar" :src="userInfo.avatar" />
|
|
|
+ </a-avatar>
|
|
|
+ <a-typography-paragraph
|
|
|
+ :ellipsis="{ rows: 1, css: true }"
|
|
|
+ :style="{ flex: 1, margin: '0 0 0 12px' }"
|
|
|
+ v-if="isSetting"
|
|
|
+ >
|
|
|
+ <span class="dialog-span">{{ userInfo.name }}</span>
|
|
|
+ </a-typography-paragraph>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-footer" v-if="item?.question">
|
|
|
+ <p style="margin-top: 0">{{ item.question }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-file" v-if="item?.file">
|
|
|
+ <icon-file-pdf :size="20" />
|
|
|
+ <a-typography-paragraph
|
|
|
+ :ellipsis="{ rows: 1, css: true }"
|
|
|
+ :style="{ flex: 1, margin: '0 0 0 8px' }"
|
|
|
+ >
|
|
|
+ {{ item.file.name }}
|
|
|
+ </a-typography-paragraph>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-header" v-if="item?.capacity">
|
|
|
+ <a-avatar shape="circle" :size="28">
|
|
|
+ <img alt="avatar" :src="agentInfo.avatar" />
|
|
|
+ </a-avatar>
|
|
|
+ <a-typography-paragraph
|
|
|
+ :ellipsis="{ rows: 1, css: true }"
|
|
|
+ :style="{ flex: 1, margin: '0 0 0 12px' }"
|
|
|
+ v-if="isSetting"
|
|
|
+ >
|
|
|
+ <span class="dialog-span">{{ agentInfo.title }}</span>
|
|
|
+ </a-typography-paragraph>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-footer" v-if="item?.capacity">
|
|
|
+ <div
|
|
|
+ @click="openCapacity(key)"
|
|
|
+ :class="[readonly || item.capacity.status === 'loading' ? 'disabled' : '']"
|
|
|
+ >
|
|
|
+ <a-spin :size="18" v-if="item.capacity.status === 'loading'" />
|
|
|
+ <icon-check-circle-fill :size="18" v-else />
|
|
|
+ <span>{{ item.capacity.status === "loading" ? "正在调用" : "已调用" }}</span>
|
|
|
+ <b>{{ item.capacity.text }}</b>
|
|
|
+ <icon-caret-right
|
|
|
+ size="18"
|
|
|
+ v-if="item.capacity.status === 'loaded' && !menuList[key].open"
|
|
|
+ />
|
|
|
+ <icon-caret-down size="18" v-if="item.capacity.status === 'loaded' && menuList[key].open" />
|
|
|
+ </div>
|
|
|
+ <section v-if="item.capacity.status === 'loaded'" v-show="menuList[key].open">
|
|
|
+ <p>{{ item.capacity.data.title }}</p>
|
|
|
+ <div v-if="item.capacity.data.list">
|
|
|
+ <p v-for="(item, key) in item.capacity.data.list" :key="key">
|
|
|
+ <a-typography-paragraph
|
|
|
+ :ellipsis="{ rows: 1, css: true }"
|
|
|
+ :style="{ flex: 1, margin: '0' }"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </a-typography-paragraph>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.capacity.data.documents">
|
|
|
+ <div v-for="(document, documentKey) in item.capacity.data.documents" :key="documentKey">
|
|
|
+ <div @click="openDocument(key, documentKey)" :class="[readonly ? 'disabled' : '']">
|
|
|
+ <span>{{ document.type }}</span>
|
|
|
+ <a-typography-paragraph
|
|
|
+ :ellipsis="{ rows: 1, css: true }"
|
|
|
+ :style="{ flex: 1, margin: '0' }"
|
|
|
+ >
|
|
|
+ <span>{{ document.title }}</span>
|
|
|
+ </a-typography-paragraph>
|
|
|
+ <span>
|
|
|
+ <em v-for="(item, documentIndex) in document.list" :key="documentIndex">{{
|
|
|
+ item.title
|
|
|
+ }}</em>
|
|
|
+ </span>
|
|
|
+ <icon-caret-down
|
|
|
+ size="12"
|
|
|
+ v-if="documentKey === menuList[key].documentOpenIndex"
|
|
|
+ />
|
|
|
+ <icon-caret-right size="12" v-else />
|
|
|
+ </div>
|
|
|
+ <div v-show="documentKey === menuList[key].documentOpenIndex">
|
|
|
+ <p v-for="(item, index) in document.list" :key="index">
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ <a-typography-paragraph
|
|
|
+ :ellipsis="{ rows: 3, css: true }"
|
|
|
+ :style="{ flex: 1, margin: '0' }"
|
|
|
+ >
|
|
|
+ <span style="color: rgba(153, 153, 153, 1); font-size: 12px">{{
|
|
|
+ item.content
|
|
|
+ }}</span>
|
|
|
+ </a-typography-paragraph>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <p v-if="item.answer">{{ item.answer }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-other" v-if="item?.other">
|
|
|
+ <p v-if="isSetting">
|
|
|
+ <img src="@/assets/icons/check.png" width="16" />
|
|
|
+ <span>{{ item.other.token }}</span>
|
|
|
+ </p>
|
|
|
+ <p v-else></p>
|
|
|
+ <div>
|
|
|
+ <p @click="reQuestion(item.question)" :class="[readonly ? 'disabled' : '']">
|
|
|
+ <img src="@/assets/icons/refresh.png" width="15" />
|
|
|
+ </p>
|
|
|
+ <p @click="copyAnswer(item.answer)" :class="[readonly ? 'disabled' : '']">
|
|
|
+ <img src="@/assets/icons/copy.png" width="15" />
|
|
|
+ </p>
|
|
|
+ <p @click="saveAnswer(key)" :class="[readonly ? 'disabled' : '']" v-if="!isSetting">
|
|
|
+ <img src="@/assets/icons/star-full.png" width="15" v-if="menuList[key].save" />
|
|
|
+ <img src="@/assets/icons/star.png" width="15" v-else />
|
|
|
+ </p>
|
|
|
+ <p :class="[readonly ? 'disabled' : '']" v-if="!isSetting">
|
|
|
+ <img src="@/assets/icons/thumb-up.png" width="15" />
|
|
|
+ </p>
|
|
|
+ <p @click="feedbackAnswer" :class="[readonly ? 'disabled' : '']" v-if="!isSetting">
|
|
|
+ <img src="@/assets/icons/thumb-down.png" width="15" />
|
|
|
+ </p>
|
|
|
+ <p :class="[readonly ? 'disabled' : '']" v-if="!isSetting">
|
|
|
+ <img src="@/assets/icons/share.png" width="15" />
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- <p v-if="item.answer">{{item.answer}}</p>
|
|
|
- </div>
|
|
|
- <div class="dialog-other" v-if="item?.other">
|
|
|
- <p v-if="isSetting">
|
|
|
- <img src="@/assets/icons/check.png" width="16" />
|
|
|
- <span>{{item.other.token}}</span>
|
|
|
- </p>
|
|
|
- <p v-else></p>
|
|
|
- <div>
|
|
|
- <p @click="reQuestion(item.question)" :class="[readonly ? 'disabled' : '']">
|
|
|
- <img src="@/assets/icons/refresh.png" width="15" />
|
|
|
- </p>
|
|
|
- <p @click="copyAnswer(item.answer)" :class="[readonly ? 'disabled' : '']">
|
|
|
- <img src="@/assets/icons/copy.png" width="15" />
|
|
|
- </p>
|
|
|
- <p @click="saveAnswer(key)" :class="[readonly ? 'disabled' : '']" v-if="!isSetting">
|
|
|
- <img src="@/assets/icons/star-full.png" width="15" v-if="menuList[key].save" />
|
|
|
- <img src="@/assets/icons/star.png" width="15" v-else />
|
|
|
- </p>
|
|
|
- <p :class="[readonly ? 'disabled' : '']" v-if="!isSetting">
|
|
|
- <img src="@/assets/icons/thumb-up.png" width="15" />
|
|
|
- </p>
|
|
|
- <p @click="feedbackAnswer" :class="[readonly ? 'disabled' : '']" v-if="!isSetting">
|
|
|
- <img src="@/assets/icons/thumb-down.png" width="15" />
|
|
|
- </p>
|
|
|
- <p :class="[readonly ? 'disabled' : '']" v-if="!isSetting">
|
|
|
- <img src="@/assets/icons/share.png" width="15" />
|
|
|
- </p>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ <div v-show="readonly" @click="stopWriting" class="dialog-writing-button">
|
|
|
+ <icon-record-stop :size="20" style="margin-right: 4px" />停止生成
|
|
|
+ </div>
|
|
|
+ <dialog-feedback
|
|
|
+ :showFeedback="showFeedback"
|
|
|
+ @handleCancel="handleCancel"
|
|
|
+ @handleOk="handleOk"
|
|
|
+ v-if="!isSetting"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div v-show="readonly" @click="stopWriting" class="dialog-writing-button"><icon-record-stop :size="20" style="margin-right: 4px;" />停止生成</div>
|
|
|
- <dialog-feedback :showFeedback="showFeedback" @handleCancel="handleCancel" @handleOk="handleOk" v-if="!isSetting" />
|
|
|
- </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import DialogFeedback from "./DialogFeedback.vue";
|
|
|
-import { defineComponent, ref, onBeforeUnmount, onMounted, reactive, nextTick, inject } from 'vue';
|
|
|
+import { defineComponent, ref, onBeforeUnmount, onMounted, reactive, nextTick, inject } from "vue";
|
|
|
export default defineComponent({
|
|
|
- components: {
|
|
|
- DialogFeedback
|
|
|
- },
|
|
|
- props: ['open', 'suggestions', 'agentInfo', 'userInfo', 'isSetting', 'readonly'],
|
|
|
- setup(props, {emit}) {
|
|
|
- const DOCUMENT_RESULT = {
|
|
|
- type: 'document',
|
|
|
- text: '谷歌知识库',
|
|
|
- status: 'loaded',
|
|
|
- data: {
|
|
|
- title: 'AI Agent的论文',
|
|
|
- documents: [{
|
|
|
- type: 'PDF',
|
|
|
- title: '科比的传奇一生，你知道多少？',
|
|
|
- list: [
|
|
|
- {
|
|
|
- title: 'P1',
|
|
|
- content: '科比·布莱恩特（Kobe Bryant），1978年8月23日出生，2020年1月26日不幸逝世，是美国著名的职业篮球运动员，司职得分后卫/小前锋。他的NBA生涯全部在洛杉矶湖人队度过，共获得5次NBA总冠军、1次NBA常规赛MVP、2次NBA总决赛MVP'
|
|
|
- },
|
|
|
- {
|
|
|
- title: 'P2',
|
|
|
- content: '科比·布莱恩特（Kobe Bryant），1978年8月23日出生，2020年1月26日不幸逝世，是美国著名的职业篮球运动员，司职得分后卫/小前锋。他的NBA生涯全部在洛杉矶湖人队度过，共获得5次NBA总冠军、1次NBA常规赛MVP、2次NBA总决赛MVP'
|
|
|
- }
|
|
|
- ]
|
|
|
- },{
|
|
|
- type: 'PDF',
|
|
|
- title: '科比的传奇一生，你知道多少？',
|
|
|
- list: [
|
|
|
- {
|
|
|
- title: 'P1',
|
|
|
- content: '科比·布莱恩特（Kobe Bryant），1978年8月23日出生，2020年1月26日不幸逝世，是美国著名的职业篮球运动员，司职得分后卫/小前锋。他的NBA生涯全部在洛杉矶湖人队度过，共获得5次NBA总冠军、1次NBA常规赛MVP、2次NBA总决赛MVP'
|
|
|
- },
|
|
|
- {
|
|
|
- title: 'P2',
|
|
|
- content: '科比·布莱恩特（Kobe Bryant），1978年8月23日出生，2020年1月26日不幸逝世，是美国著名的职业篮球运动员，司职得分后卫/小前锋。他的NBA生涯全部在洛杉矶湖人队度过，共获得5次NBA总冠军、1次NBA常规赛MVP、2次NBA总决赛MVP'
|
|
|
+ components: {
|
|
|
+ DialogFeedback
|
|
|
+ },
|
|
|
+ props: ["open", "suggestions", "agentInfo", "userInfo", "isSetting", "readonly"],
|
|
|
+ setup(props, { emit }) {
|
|
|
+ const DOCUMENT_RESULT = {
|
|
|
+ type: "document",
|
|
|
+ text: "谷歌知识库",
|
|
|
+ status: "loaded",
|
|
|
+ data: {
|
|
|
+ title: "AI Agent的论文",
|
|
|
+ documents: [
|
|
|
+ {
|
|
|
+ type: "PDF",
|
|
|
+ title: "科比的传奇一生，你知道多少？",
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ title: "P1",
|
|
|
+ content:
|
|
|
+ "科比·布莱恩特（Kobe Bryant），1978年8月23日出生，2020年1月26日不幸逝世，是美国著名的职业篮球运动员，司职得分后卫/小前锋。他的NBA生涯全部在洛杉矶湖人队度过，共获得5次NBA总冠军、1次NBA常规赛MVP、2次NBA总决赛MVP"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "P2",
|
|
|
+ content:
|
|
|
+ "科比·布莱恩特（Kobe Bryant），1978年8月23日出生，2020年1月26日不幸逝世，是美国著名的职业篮球运动员，司职得分后卫/小前锋。他的NBA生涯全部在洛杉矶湖人队度过，共获得5次NBA总冠军、1次NBA常规赛MVP、2次NBA总决赛MVP"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "PDF",
|
|
|
+ title: "科比的传奇一生，你知道多少？",
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ title: "P1",
|
|
|
+ content:
|
|
|
+ "科比·布莱恩特（Kobe Bryant），1978年8月23日出生，2020年1月26日不幸逝世，是美国著名的职业篮球运动员，司职得分后卫/小前锋。他的NBA生涯全部在洛杉矶湖人队度过，共获得5次NBA总冠军、1次NBA常规赛MVP、2次NBA总决赛MVP"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "P2",
|
|
|
+ content:
|
|
|
+ "科比·布莱恩特（Kobe Bryant），1978年8月23日出生，2020年1月26日不幸逝世，是美国著名的职业篮球运动员，司职得分后卫/小前锋。他的NBA生涯全部在洛杉矶湖人队度过，共获得5次NBA总冠军、1次NBA常规赛MVP、2次NBA总决赛MVP"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- }
|
|
|
- const text = ref(`
|
|
|
+ };
|
|
|
+ const text = ref(`
|
|
|
**粗体文本**
|
|
|
-
|
|
|
+
|
|
|
_斜体文本_
|
|
|
-
|
|
|
+
|
|
|
***粗体加斜体文本***
|
|
|
-
|
|
|
+
|
|
|
~~删除线文本~~
|
|
|
-
|
|
|
+
|
|
|
==标记文本==
|
|
|
-
|
|
|
+
|
|
|
> 这是一个块引用。
|
|
|
-
|
|
|
+
|
|
|
- 列表项一
|
|
|
- 列表项二
|
|
|
-
|
|
|
+
|
|
|
1. 有序列表项一
|
|
|
2. 有序列表项二
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
[链接文本](链接地址 "链接标题")
|
|
|
-
|
|
|
+
|
|
|
|
|
|
`);
|
|
|
- const { helper } = inject('$global');
|
|
|
- const dialogList = reactive([]);
|
|
|
- const randomKey = ref(0);
|
|
|
- const showFeedback = ref(false);
|
|
|
- const menuList = reactive([]);
|
|
|
- let dialogIndex = 0;
|
|
|
- const dialogScroll = ref('');
|
|
|
- const scrollToEnd = async () => {
|
|
|
- await nextTick();
|
|
|
- dialogScroll.value.scrollTop = dialogScroll.value.scrollHeight;
|
|
|
- }
|
|
|
- let answerInterval = null;
|
|
|
- const stopWriting = () => {
|
|
|
- window.clearInterval(answerInterval);
|
|
|
- emit('set-readonly', false);
|
|
|
- dialogList[dialogIndex].other = {
|
|
|
- token: '4.0s ｜ Tokens'
|
|
|
- };
|
|
|
- scrollToEnd();
|
|
|
- dialogIndex += 1;
|
|
|
- };
|
|
|
- const addData = (data) => {
|
|
|
- dialogList.splice(dialogIndex, 1, data);
|
|
|
- randomKey.value = Math.random();
|
|
|
- scrollToEnd();
|
|
|
- }
|
|
|
- const mockLink = (text, file = null) => {
|
|
|
- let num1 = 0;
|
|
|
- let num2 = 0;
|
|
|
- let p1 = text;
|
|
|
- const p2 = `这是我找到的关于AI Agent的论文：
|
|
|
-📘 论文标题：Measuring an artificial intelligence agent's trust in humans using machine incentives
|
|
|
-📝 论文摘要：科学家和哲学家一直在争论人类是否可以信任先进的人工智能 (AI) 代理来尊重人类的最佳利益。然而，关于反向的情况，即先进的 AI 代理是否信任人类，却很少被讨论。在这里，我们提出了一种方法来激励机器决策，而无需改变其底层算法或目标取向。在两个不同的实验中，我们使用这种方法在数百个信任游戏中激励了一个人工智能代理（一个大型语言模型 (LLM) 来自 OpenAI）与人类实验者（作者 TJ）互动。在我们的第一个实验中，我们发现当面对实际激励时，AI 代理决定信任人类的比率高于假设决策。在我们的第二个实验中，我们通过自动化游戏玩法和对问题措辞进行同源化，复制并扩展了这些发现。我们再次观察到更高的信任率。我们的实验结果表明，最先进的 AI 语言模型会根据激励改变其社交行为，并表现出对人类实验者的信任，当激励时。
|
|
|
-📎 论文链接：http://arxiv.org/pdf/2212.13371v1
|
|
|
-`;
|
|
|
- let result = {question: '',capacity: null, answer: '', other: null, file: null};
|
|
|
- // 第一步，输入问题
|
|
|
- const step1 = () => {
|
|
|
- const interval = setInterval(() => {
|
|
|
- if (num1 < p1.length + 1) {
|
|
|
- result.question = p1.slice(0, num1);
|
|
|
- num1 += 1;
|
|
|
- addData(result);
|
|
|
- } else {
|
|
|
- window.clearInterval(interval);
|
|
|
- // 如果有文件，显示上传文件
|
|
|
- if (file) {
|
|
|
- result.file = file;
|
|
|
- addData(result);
|
|
|
+ const { helper } = inject("$global");
|
|
|
+ const dialogList = reactive([]);
|
|
|
+ const randomKey = ref(0);
|
|
|
+ const showFeedback = ref(false);
|
|
|
+ const menuList = reactive([]);
|
|
|
+ let dialogIndex = 0;
|
|
|
+ const dialogScroll = ref("");
|
|
|
+ const scrollToEnd = async () => {
|
|
|
+ await nextTick();
|
|
|
+ dialogScroll.value.scrollTop = dialogScroll.value.scrollHeight;
|
|
|
+ };
|
|
|
+ let answerInterval = null;
|
|
|
+ const stopWriting = () => {
|
|
|
+ window.clearInterval(answerInterval);
|
|
|
+ emit("set-readonly", false);
|
|
|
+ dialogList[dialogIndex].other = {
|
|
|
+ token: "4.0s ｜ Tokens"
|
|
|
+ };
|
|
|
+ scrollToEnd();
|
|
|
+ dialogIndex += 1;
|
|
|
+ };
|
|
|
+ const addData = (data) => {
|
|
|
+ dialogList.splice(dialogIndex, 1, data);
|
|
|
+ randomKey.value = Math.random();
|
|
|
+ scrollToEnd();
|
|
|
+ };
|
|
|
+ const mockLink = (text, file = null) => {
|
|
|
+ let num1 = 0;
|
|
|
+ let num2 = 0;
|
|
|
+ let p1 = text;
|
|
|
+ const p2 = `尊敬的领导，
|
|
|
+
|
|
|
+因个人原因，我计划于2023年11月6日至11月10日请假。在此期间，我将妥善安排工作，确保任务顺利完成。恳请批准。
|
|
|
+
|
|
|
+谢谢！
|
|
|
+
|
|
|
+信通小数`;
|
|
|
+ let result = { question: "", capacity: null, answer: "", other: null, file: null };
|
|
|
+ // 第一步，输入问题
|
|
|
+ const step1 = () => {
|
|
|
+ const interval = setInterval(() => {
|
|
|
+ if (num1 < p1.length + 1) {
|
|
|
+ result.question = p1.slice(0, num1);
|
|
|
+ num1 += 1;
|
|
|
+ addData(result);
|
|
|
+ } else {
|
|
|
+ window.clearInterval(interval);
|
|
|
+ // 如果有文件，显示上传文件
|
|
|
+ if (file) {
|
|
|
+ result.file = file;
|
|
|
+ addData(result);
|
|
|
+ }
|
|
|
+ step2();
|
|
|
+ }
|
|
|
+ }, 50);
|
|
|
+ };
|
|
|
+ // 第二步，调用能力
|
|
|
+ const step2 = () => {
|
|
|
+ const mockData = DOCUMENT_RESULT;
|
|
|
+ result.capacity = {
|
|
|
+ type: mockData.type,
|
|
|
+ text: mockData.text,
|
|
|
+ status: "loading",
|
|
|
+ data: null
|
|
|
+ };
|
|
|
+ menuList[dialogIndex] = {
|
|
|
+ save: false,
|
|
|
+ open: false,
|
|
|
+ documentOpenIndex: -1
|
|
|
+ };
|
|
|
+ addData(result);
|
|
|
+ setTimeout(() => {
|
|
|
+ result.capacity = mockData;
|
|
|
+ addData(result);
|
|
|
+ step3();
|
|
|
+ }, 1000);
|
|
|
+ };
|
|
|
+ // 第三步，输出答案
|
|
|
+ const step3 = () => {
|
|
|
+ emit("set-readonly", true);
|
|
|
+ answerInterval = setInterval(() => {
|
|
|
+ if (num2 < p2.length + 1) {
|
|
|
+ result.answer = p2.slice(0, num2);
|
|
|
+ num2 += 1;
|
|
|
+ addData(result);
|
|
|
+ } else {
|
|
|
+ stopWriting();
|
|
|
+ }
|
|
|
+ }, 50);
|
|
|
+ };
|
|
|
+ step1();
|
|
|
+ };
|
|
|
+ const saveAnswer = (index) => {
|
|
|
+ if (!props.readonly) {
|
|
|
+ menuList[index].save = !menuList[index].save;
|
|
|
}
|
|
|
- step2();
|
|
|
- }
|
|
|
- }, 100);
|
|
|
- };
|
|
|
- // 第二步，调用能力
|
|
|
- const step2 = () => {
|
|
|
- const mockData = DOCUMENT_RESULT;
|
|
|
- result.capacity = {
|
|
|
- type: mockData.type,
|
|
|
- text: mockData.text,
|
|
|
- status: 'loading',
|
|
|
- data: null
|
|
|
- }
|
|
|
- menuList[dialogIndex] = {
|
|
|
- save: false,
|
|
|
- open: false,
|
|
|
- documentOpenIndex: -1
|
|
|
};
|
|
|
- addData(result);
|
|
|
- setTimeout(() => {
|
|
|
- result.capacity = mockData;
|
|
|
- addData(result);
|
|
|
- step3();
|
|
|
- }, 1000);
|
|
|
- };
|
|
|
- // 第三步，输出答案
|
|
|
- const step3 = () => {
|
|
|
- emit('set-readonly', true);
|
|
|
- answerInterval = setInterval(() => {
|
|
|
- if (num2 < p2.length + 1) {
|
|
|
- result.answer = p2.slice(0, num2);
|
|
|
- num2 += 1;
|
|
|
- addData(result);
|
|
|
- } else {
|
|
|
- stopWriting();
|
|
|
- }
|
|
|
- }, 100)
|
|
|
- };
|
|
|
- step1();
|
|
|
- }
|
|
|
- const saveAnswer = (index) => {
|
|
|
- if (!props.readonly) {
|
|
|
- menuList[index].save = !menuList[index].save;
|
|
|
- }
|
|
|
- }
|
|
|
- const openCapacity = (index) => {
|
|
|
- if (!props.readonly) {
|
|
|
- menuList[index].open = !menuList[index].open;
|
|
|
- }
|
|
|
- }
|
|
|
- const openDocument = (index, documentIndex) => {
|
|
|
- if (menuList[index].documentOpenIndex === documentIndex) {
|
|
|
- menuList[index].documentOpenIndex = -1;
|
|
|
- } else {
|
|
|
- menuList[index].documentOpenIndex = documentIndex;
|
|
|
- }
|
|
|
- }
|
|
|
- const feedbackAnswer = () => {
|
|
|
- if (!props.readonly) {
|
|
|
- showFeedback.value = true;
|
|
|
- }
|
|
|
- }
|
|
|
- const handleOk = () => {
|
|
|
- showFeedback.value = false;
|
|
|
- };
|
|
|
- const handleCancel = () => {
|
|
|
- showFeedback.value = false;
|
|
|
- }
|
|
|
- const selectSuggestion = (text) => {
|
|
|
- if (!props.readonly) {
|
|
|
- mockLink(text);
|
|
|
- }
|
|
|
- }
|
|
|
- const copyAnswer = (text) => {
|
|
|
- if (!props.readonly) {
|
|
|
- helper.copyText(text, '复制成功');
|
|
|
- }
|
|
|
- }
|
|
|
- const reQuestion = (text) => {
|
|
|
- if (!props.readonly) {
|
|
|
- mockLink(text);
|
|
|
- }
|
|
|
+ const openCapacity = (index) => {
|
|
|
+ if (!props.readonly) {
|
|
|
+ menuList[index].open = !menuList[index].open;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const openDocument = (index, documentIndex) => {
|
|
|
+ if (menuList[index].documentOpenIndex === documentIndex) {
|
|
|
+ menuList[index].documentOpenIndex = -1;
|
|
|
+ } else {
|
|
|
+ menuList[index].documentOpenIndex = documentIndex;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const feedbackAnswer = () => {
|
|
|
+ if (!props.readonly) {
|
|
|
+ showFeedback.value = true;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const handleOk = () => {
|
|
|
+ showFeedback.value = false;
|
|
|
+ };
|
|
|
+ const handleCancel = () => {
|
|
|
+ showFeedback.value = false;
|
|
|
+ };
|
|
|
+ const selectSuggestion = (text) => {
|
|
|
+ if (!props.readonly) {
|
|
|
+ mockLink(text);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const copyAnswer = (text) => {
|
|
|
+ if (!props.readonly) {
|
|
|
+ helper.copyText(text, "复制成功");
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const reQuestion = (text) => {
|
|
|
+ if (!props.readonly) {
|
|
|
+ mockLink(text);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ onBeforeUnmount(() => {
|
|
|
+ helper.$bus.off("send-message");
|
|
|
+ helper.$bus.off("clear-message");
|
|
|
+ });
|
|
|
+ onMounted(() => {
|
|
|
+ helper.$bus.on("send-message", (value) => {
|
|
|
+ mockLink(value);
|
|
|
+ });
|
|
|
+ helper.$bus.on("clear-message", () => {
|
|
|
+ dialogList.splice(0);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ randomKey,
|
|
|
+ openDocument,
|
|
|
+ showFeedback,
|
|
|
+ copyAnswer,
|
|
|
+ dialogList,
|
|
|
+ selectSuggestion,
|
|
|
+ dialogScroll,
|
|
|
+ reQuestion,
|
|
|
+ menuList,
|
|
|
+ saveAnswer,
|
|
|
+ openCapacity,
|
|
|
+ feedbackAnswer,
|
|
|
+ handleOk,
|
|
|
+ handleCancel,
|
|
|
+ stopWriting
|
|
|
+ };
|
|
|
}
|
|
|
- onBeforeUnmount(() => {
|
|
|
- helper.$bus.off('send-message');
|
|
|
- helper.$bus.off('clear-message');
|
|
|
- });
|
|
|
- onMounted(() => {
|
|
|
- helper.$bus.on('send-message',(value) => {
|
|
|
- mockLink(value);
|
|
|
- });
|
|
|
- helper.$bus.on('clear-message',() => {
|
|
|
- dialogList.splice(0);
|
|
|
- });
|
|
|
- });
|
|
|
- return {
|
|
|
- randomKey,
|
|
|
- openDocument,
|
|
|
- showFeedback,
|
|
|
- copyAnswer,
|
|
|
- dialogList,
|
|
|
- selectSuggestion,
|
|
|
- dialogScroll,
|
|
|
- reQuestion,
|
|
|
- menuList,
|
|
|
- saveAnswer,
|
|
|
- openCapacity,
|
|
|
- feedbackAnswer,
|
|
|
- handleOk,
|
|
|
- handleCancel,
|
|
|
- stopWriting,
|
|
|
- };
|
|
|
- },
|
|
|
});
|
|
|
</script>
|
|
|
<style>
|
|
|
.dialog-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .dialog-span {
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .dialog-span {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<style scoped>
|
|
|
.dialog-absolute {
|
|
|
- .dialog-header {
|
|
|
- position: absolute;
|
|
|
- &:nth-child(1) {
|
|
|
- transform: translateY(10px);
|
|
|
- }
|
|
|
- &:nth-child(3) {
|
|
|
- transform: translateY(16px);
|
|
|
+ .dialog-header {
|
|
|
+ position: absolute;
|
|
|
+ &:nth-child(1) {
|
|
|
+ transform: translateY(10px);
|
|
|
+ }
|
|
|
+ &:nth-child(3) {
|
|
|
+ transform: translateY(16px);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .dialog-footer {
|
|
|
- margin-left: 50px;
|
|
|
- &:nth-child(2) {
|
|
|
- margin-left: 50px;
|
|
|
- padding-left: 0;
|
|
|
+ .dialog-footer {
|
|
|
+ margin-left: 50px;
|
|
|
+ &:nth-child(2) {
|
|
|
+ margin-left: 50px;
|
|
|
+ padding-left: 0;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
.dialog-flex-wrap {
|
|
|
- position: relative;
|
|
|
- flex: 1;
|
|
|
- margin-top: 16px;
|
|
|
- height: 100%;
|
|
|
+ position: relative;
|
|
|
+ flex: 1;
|
|
|
+ margin-top: 16px;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
.dialog-flex {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- overflow-y: auto;
|
|
|
- overflow-x: hidden;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
}
|
|
|
.section-open {
|
|
|
- margin-top: 12px;
|
|
|
+ margin-top: 12px;
|
|
|
}
|
|
|
.dialog-file {
|
|
|
- width: 421px;
|
|
|
- height: 48px;
|
|
|
- border-radius: 12px;
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 14px;
|
|
|
- border: 1px solid rgba(229, 229, 229, 1);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 16px;
|
|
|
- padding: 0 8px;
|
|
|
-}
|
|
|
-.dialog-footer {
|
|
|
- border-radius: 12px;
|
|
|
- background-color: rgba(245, 247, 254, 1);
|
|
|
- padding: 12px 16px;
|
|
|
- margin: 16px 0;
|
|
|
- &:nth-child(2) {
|
|
|
- background-color: rgba(0,0,0,0);
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- >p {
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 14px;
|
|
|
- margin-top: 16px;
|
|
|
- }
|
|
|
- >div {
|
|
|
- border: 1px solid rgba(64, 95, 234, 0.42);
|
|
|
+ width: 421px;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 12px;
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
color: rgba(16, 16, 16, 1);
|
|
|
font-size: 14px;
|
|
|
- display: inline-flex;
|
|
|
- padding: 4px 8px;
|
|
|
- border-radius: 4px;
|
|
|
+ border: 1px solid rgba(229, 229, 229, 1);
|
|
|
+ display: flex;
|
|
|
align-items: center;
|
|
|
- cursor: pointer;
|
|
|
- height: 30px;
|
|
|
- &.disabled {
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- background: rgb(245, 247, 254, .4);
|
|
|
- }
|
|
|
- >span {
|
|
|
- margin: 0 8px;
|
|
|
- }
|
|
|
- >b {
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- >section {
|
|
|
- padding: 0 16px;
|
|
|
- background-color: #ffffff;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ padding: 0 8px;
|
|
|
+}
|
|
|
+.dialog-footer {
|
|
|
border-radius: 12px;
|
|
|
- margin-top: 16px;
|
|
|
- >p {
|
|
|
- display: inline-block;
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 12px;
|
|
|
- margin-top: 16px;
|
|
|
- width: 100%;
|
|
|
+ background-color: rgba(245, 247, 254, 1);
|
|
|
+ padding: 12px 16px;
|
|
|
+ margin: 16px 0;
|
|
|
+ &:nth-child(2) {
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ > p {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 16px;
|
|
|
}
|
|
|
> div {
|
|
|
- margin-top: 4px;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 16px;
|
|
|
- display: inline-block;
|
|
|
- width: 100%;
|
|
|
- >div {
|
|
|
- margin-top: 8px;
|
|
|
- >div {
|
|
|
- &:nth-child(1) {
|
|
|
- border-radius: 4px;
|
|
|
+ border: 1px solid rgba(64, 95, 234, 0.42);
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ display: inline-flex;
|
|
|
+ padding: 4px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ height: 30px;
|
|
|
+ &.disabled {
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background: rgb(245, 247, 254, 0.4);
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ margin: 0 8px;
|
|
|
+ }
|
|
|
+ > b {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > section {
|
|
|
+ padding: 0 16px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin-top: 16px;
|
|
|
+ > p {
|
|
|
+ display: inline-block;
|
|
|
color: rgba(16, 16, 16, 1);
|
|
|
font-size: 12px;
|
|
|
- height: 24px;
|
|
|
- border: 1px solid rgba(229, 229, 229, 1);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- padding-right: 8px;
|
|
|
- cursor: pointer;
|
|
|
- &.disabled {
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- background: rgba(229, 229, 229, .2);
|
|
|
- }
|
|
|
- >span {
|
|
|
- &:nth-child(1) {
|
|
|
- background-color: rgba(28, 97, 247, 0.09);
|
|
|
- color: rgba(64, 95, 234, 1);
|
|
|
- font-size: 12px;
|
|
|
- border: 1px solid rgba(64, 95, 234, 0.13);
|
|
|
- padding: 0 4px;
|
|
|
- margin: 0 4px 0 0;
|
|
|
- }
|
|
|
- &:nth-child(3) {
|
|
|
- color: rgba(64, 95, 234, 1);
|
|
|
- font-size: 12px;
|
|
|
- em {
|
|
|
- padding: 0 4px;
|
|
|
- font-style: normal;
|
|
|
- border-left: 1px solid rgba(64, 95, 234, 1);
|
|
|
- font-weight: bold;
|
|
|
- &:nth-child(1) {
|
|
|
- border: none;
|
|
|
- }
|
|
|
+ margin-top: 16px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ > div {
|
|
|
+ margin-top: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ > div {
|
|
|
+ margin-top: 8px;
|
|
|
+ > div {
|
|
|
+ &:nth-child(1) {
|
|
|
+ border-radius: 4px;
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 12px;
|
|
|
+ height: 24px;
|
|
|
+ border: 1px solid rgba(229, 229, 229, 1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding-right: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.disabled {
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background: rgba(229, 229, 229, 0.2);
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ &:nth-child(1) {
|
|
|
+ background-color: rgba(28, 97, 247, 0.09);
|
|
|
+ color: rgba(64, 95, 234, 1);
|
|
|
+ font-size: 12px;
|
|
|
+ border: 1px solid rgba(64, 95, 234, 0.13);
|
|
|
+ padding: 0 4px;
|
|
|
+ margin: 0 4px 0 0;
|
|
|
+ }
|
|
|
+ &:nth-child(3) {
|
|
|
+ color: rgba(64, 95, 234, 1);
|
|
|
+ font-size: 12px;
|
|
|
+ em {
|
|
|
+ padding: 0 4px;
|
|
|
+ font-style: normal;
|
|
|
+ border-left: 1px solid rgba(64, 95, 234, 1);
|
|
|
+ font-weight: bold;
|
|
|
+ &:nth-child(1) {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ > p {
|
|
|
+ margin: 8px 0;
|
|
|
+ display: flex;
|
|
|
+ > span {
|
|
|
+ transform: translateY(2px);
|
|
|
+ color: rgba(64, 95, 234, 1);
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
- &:nth-child(2) {
|
|
|
- >p {
|
|
|
- margin: 8px 0;
|
|
|
- display: flex;
|
|
|
- >span {
|
|
|
- transform: translateY(2px);
|
|
|
- color: rgba(64, 95, 234, 1);
|
|
|
- font-weight: bold;
|
|
|
+ > p {
|
|
|
+ float: left;
|
|
|
+ width: 48%;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(245, 247, 254, 1);
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
font-size: 12px;
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
+ margin-top: 8px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ padding: 0 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ &:nth-child(odd) {
|
|
|
+ margin-right: 4%;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
- >p {
|
|
|
- float: left;
|
|
|
- width: 48%;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(245, 247, 254, 1);
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 12px;
|
|
|
- margin-top: 8px;
|
|
|
- height: 36px;
|
|
|
- line-height: 36px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.section-suggestions {
|
|
|
+ margin: 12px 0 20px;
|
|
|
+ .section-suggestion {
|
|
|
+ width: 380px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ border: 1px solid #e5e5e5;
|
|
|
+ border-radius: 12px;
|
|
|
padding: 0 8px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- &:nth-child(odd) {
|
|
|
- margin-right: 4%;
|
|
|
+ justify-content: space-between;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-top: 8px;
|
|
|
+ &.disabled {
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background: rgb(245, 247, 254);
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.section-suggestions {
|
|
|
- margin: 12px 0 20px;
|
|
|
- .section-suggestion {
|
|
|
- width: 380px;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- border: 1px solid #e5e5e5;
|
|
|
- border-radius: 12px;
|
|
|
- padding: 0 8px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- cursor: pointer;
|
|
|
- margin-top: 8px;
|
|
|
- &.disabled {
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- background: rgb(245, 247, 254);
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
.dialog-other {
|
|
|
- margin-bottom: 16px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- >p {
|
|
|
+ margin-bottom: 16px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- span {
|
|
|
- margin-left: 8px;
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 12px;
|
|
|
+ justify-content: space-between;
|
|
|
+ > p {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ margin-left: 8px;
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- >div {
|
|
|
- display: flex;
|
|
|
- p {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- border-radius: 15px;
|
|
|
- border: 1px solid rgba(229, 229, 229, 1);
|
|
|
- margin-left: 8px;
|
|
|
- cursor: pointer;
|
|
|
- &.disabled {
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- background-color: rgba(245, 247, 254, 1);
|
|
|
- }
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ p {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 15px;
|
|
|
+ border: 1px solid rgba(229, 229, 229, 1);
|
|
|
+ margin-left: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.disabled {
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(245, 247, 254, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
.feedback-title {
|
|
|
- color: rgba(102, 102, 102, 1);
|
|
|
- font-size: 12px;
|
|
|
- margin:0 0 8px 4px;
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ font-size: 12px;
|
|
|
+ margin: 0 0 8px 4px;
|
|
|
}
|
|
|
.feedback-content {
|
|
|
- margin-bottom: 16px;
|
|
|
+ margin-bottom: 16px;
|
|
|
}
|
|
|
.dialog-writing-button {
|
|
|
- position: absolute;
|
|
|
- bottom: -30px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- text-align: center;
|
|
|
- width: 106px;
|
|
|
- height: 34px;
|
|
|
- line-height: 34px;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 14px;
|
|
|
- border: 1px solid rgba(229, 229, 229, 1);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- cursor: pointer;
|
|
|
- z-index: 10;
|
|
|
- &:hover {
|
|
|
- background: rgb(245, 247, 254);
|
|
|
- }
|
|
|
+ position: absolute;
|
|
|
+ bottom: -30px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ text-align: center;
|
|
|
+ width: 106px;
|
|
|
+ height: 34px;
|
|
|
+ line-height: 34px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ border: 1px solid rgba(229, 229, 229, 1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 10;
|
|
|
+ &:hover {
|
|
|
+ background: rgb(245, 247, 254);
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
zhangnuoyan
