Skip to content

Commit eb19f75

Browse files
dataeaseShudataeaseShu
committed
feat(Smart Query): Added a configuration option for execution details. If enabled, it can display the specific number of tokens consumed, execution time, etc.
1 parent 180fd4b commit eb19f75

8 files changed

Lines changed: 207 additions & 41 deletions

File tree

‎frontend/src/assets/svg/icon_alarm-clock_colorful.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎frontend/src/assets/svg/icon_database_colorful.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎frontend/src/assets/svg/icon_logs_outlined.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎frontend/src/i18n/en.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
"Details": "Details"
99
},
1010
"parameter": {
11+
"execution_details": "Execution Details",
12+
"overview": "Overview",
13+
"tokens_required": "Tokens Required",
14+
"time_execution": "Time Execution",
1115
"export_notes": "Export notes",
1216
"import_notes": "Import notes",
1317
"memo": "Memo update rules: Match table name and field name. If a match is found, update the table memo and field memo; otherwise, leave the memo unchanged.",
@@ -870,4 +874,4 @@
870874
"to_doc": "View API",
871875
"trigger_limit": "Supports up to {0} API Keys"
872876
}
873-
}
877+
}

‎frontend/src/i18n/ko-KR.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
"Details": "세부"
99
},
1010
"parameter": {
11+
"execution_details": "실행 세부 정보",
12+
"overview": "개요",
13+
"tokens_required": "필요한 토큰 수",
14+
"time_execution": "실행 시간",
1115
"export_notes": "수출 참고사항",
1216
"import_notes": "수입 참고사항",
1317
"memo": "메모 업데이트 규칙: 테이블 이름과 필드 이름이 일치하는지 확인합니다. 일치하는 항목이 있으면 테이블 메모와 필드 메모를 업데이트하고, 그렇지 않으면 메모를 변경하지 않고 그대로 둡니다.",
@@ -870,4 +874,4 @@
870874
"to_doc": "API 보기",
871875
"trigger_limit": "최대 {0}개의 API 키 생성 지원"
872876
}
873-
}
877+
}

‎frontend/src/i18n/zh-CN.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
"Details": "详情"
99
},
1010
"parameter": {
11+
"execution_details": "执行详情",
12+
"overview": "概览",
13+
"tokens_required": "消耗 Tokens",
14+
"time_execution": "耗时",
1115
"export_notes": "导出备注",
1216
"import_notes": "导入备注",
1317
"memo": "备注更新规则：根据表名和字段名匹配，如果匹配则更新表备注和字段备注；如果匹配不上，备注保持不变。",
@@ -870,4 +874,4 @@
870874
"to_doc": "查看 API",
871875
"trigger_limit": "最多支持创建 {0} 个 API Key"
872876
}
873-
}
877+
}

‎frontend/src/views/chat/ChatTokenTime.vue‎

Lines changed: 29 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,54 @@
11
<script setup lang="ts">
2-
import { onMounted, ref } from 'vue'
3-
import { chatApi, type ChatLogHistory } from '@/api/chat.ts'
4-
2+
import { ref } from 'vue'
3+
import icon_logs_outlined from '@/assets/svg/icon_logs_outlined.svg'
4+
import ExecutionDetails from './ExecutionDetails.vue'
55
const props = defineProps<{
66
recordId?: number
77
duration?: number | undefined
88
totalTokens?: number | undefined
99
}>()
1010
11-
const logHistory = ref<ChatLogHistory>()
12-
11+
const executionDetailsRef = ref()
1312
function getLogList() {
14-
chatApi.get_chart_log_history(props.recordId).then((res) => {
15-
logHistory.value = chatApi.toChatLogHistory(res)
16-
console.log(logHistory.value)
17-
})
13+
executionDetailsRef.value.getLogList(props.recordId)
1814
}
19-
20-
onMounted(() => {})
2115
</script>
2216

2317
<template>
2418
<div v-if="recordId && (duration || totalTokens)" class="tool-container">
25-
<span>token: {{ totalTokens }}</span>
26-
<span>duration: {{ duration }}</span>
27-
<el-button @click="getLogList">log</el-button>
19+
<span>{{ $t('parameter.tokens_required') }} {{ totalTokens }}</span>
20+
<span style="margin-left: 12px">{{ $t('parameter.time_execution') }} {{ duration }} s</span>
21+
22+
<div @click="getLogList" class="detail">
23+
<el-icon style="margin-right: 4px" size="16">
24+
<icon_logs_outlined></icon_logs_outlined>
25+
</el-icon>
26+
{{ $t('parameter.execution_details') }}
27+
</div>
2828
</div>
29+
<ExecutionDetails ref="executionDetailsRef"></ExecutionDetails>
2930
</template>
3031

3132
<style scoped lang="less">
3233
.tool-container {
3334
display: flex;
34-
flex-direction: row;
3535
align-items: center;
36-
justify-content: space-between;
37-
flex-wrap: wrap;
38-
39-
row-gap: 8px;
40-
41-
min-height: 22px;
42-
43-
margin-top: 12px;
44-
margin-bottom: 12px;
45-
46-
.tool-times {
47-
flex: 1;
48-
font-size: 14px;
49-
font-weight: 400;
50-
line-height: 22px;
51-
color: rgba(100, 106, 115, 1);
52-
36+
height: 38px;
37+
margin: 12px 0;
38+
background: #f5f6f7;
39+
border-radius: 6px;
40+
padding: 0 12px;
41+
font-family: PingFang SC;
42+
font-weight: 400;
43+
font-size: 14px;
44+
line-height: 22px;
45+
color: #646a73;
46+
47+
.detail {
48+
cursor: pointer;
49+
margin-left: auto;
5350
display: flex;
54-
flex-direction: row;
5551
align-items: center;
56-
justify-content: space-between;
57-
58-
.time {
59-
white-space: nowrap;
60-
}
6152
}
6253
}
6354
</style>

‎frontend/src/views/chat/ExecutionDetails.vue‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<script lang="ts" setup>
2+
import { ref } from 'vue'
3+
import gou_icon from '@/assets/svg/gou_icon.svg'
4+
import icon_error from '@/assets/svg/icon_error.svg'
5+
import icon_database_colorful from '@/assets/svg/icon_database_colorful.svg'
6+
import icon_alarm_clock_colorful from '@/assets/svg/icon_alarm-clock_colorful.svg'
7+
import { chatApi, type ChatLogHistory } from '@/api/chat.ts'
8+
import { useI18n } from 'vue-i18n'
9+
10+
const { t } = useI18n()
11+
const logHistory = ref<ChatLogHistory>({})
12+
const dialogFormVisible = ref(false)
13+
14+
function getLogList(recordId: any) {
15+
chatApi.get_chart_log_history(recordId).then((res) => {
16+
logHistory.value = chatApi.toChatLogHistory(res) as ChatLogHistory
17+
dialogFormVisible.value = true
18+
})
19+
}
20+
21+
defineExpose({
22+
getLogList,
23+
})
24+
</script>
25+
26+
<template>
27+
<el-drawer
28+
v-model="dialogFormVisible"
29+
:title="t('parameter.execution_details')"
30+
destroy-on-close
31+
modal-class="execution-details"
32+
size="600px"
33+
>
34+
<div class="title">{{ t('parameter.overview') }}</div>
35+
<div class="overview">
36+
<div class="item">
37+
<el-icon size="40">
38+
<icon_database_colorful></icon_database_colorful>
39+
</el-icon>
40+
<div class="name">{{ t('parameter.tokens_required') }}</div>
41+
<div class="value">{{ logHistory.total_tokens }}</div>
42+
</div>
43+
<div class="item">
44+
<el-icon size="40">
45+
<icon_alarm_clock_colorful></icon_alarm_clock_colorful>
46+
</el-icon>
47+
<div class="name">{{ t('parameter.time_execution') }}</div>
48+
<div class="value">{{ logHistory.duration }}s</div>
49+
</div>
50+
</div>
51+
<div class="title">{{ t('parameter.execution_details') }}</div>
52+
53+
<div class="list">
54+
<div class="list-item" :key="ele.duration" v-for="ele in logHistory.steps">
55+
<div class="name">{{ ele.operate }}</div>
56+
<div class="status">
57+
<div class="time">{{ ele.duration }}s</div>
58+
<el-icon size="16">
59+
<gou_icon v-if="true"></gou_icon>
60+
<icon_error v-else></icon_error>
61+
</el-icon>
62+
</div>
63+
</div>
64+
</div>
65+
</el-drawer>
66+
</template>
67+
68+
<style lang="less">
69+
.execution-details {
70+
.title {
71+
font-weight: 500;
72+
font-size: 16px;
73+
line-height: 24px;
74+
margin-bottom: 16px;
75+
}
76+
77+
.overview {
78+
display: flex;
79+
align-items: center;
80+
justify-content: space-between;
81+
margin-bottom: 24px;
82+
.item {
83+
width: 268px;
84+
height: 86px;
85+
border-radius: 12px;
86+
border: 1px solid #dee0e3;
87+
padding: 16px;
88+
89+
.ed-icon {
90+
float: left;
91+
margin: 8px 12px 0 0;
92+
}
93+
94+
.name {
95+
float: left;
96+
color: #646a73;
97+
font-family: PingFang SC;
98+
font-weight: 400;
99+
font-size: 14px;
100+
line-height: 22px;
101+
width: 180px;
102+
}
103+
104+
.value {
105+
float: left;
106+
font-weight: 500;
107+
font-size: 20px;
108+
line-height: 28px;
109+
color: #1f2329;
110+
margin-top: 4px;
111+
}
112+
}
113+
}
114+
115+
.list {
116+
.list-item {
117+
width: 552px;
118+
height: 54px;
119+
border-radius: 12px;
120+
border: 1px solid #dee0e3;
121+
padding: 16px;
122+
margin-bottom: 8px;
123+
display: flex;
124+
align-items: center;
125+
126+
.status {
127+
display: flex;
128+
align-items: center;
129+
margin-left: auto;
130+
}
131+
.name {
132+
font-weight: 500;
133+
font-size: 14px;
134+
line-height: 22px;
135+
}
136+
137+
.time {
138+
font-weight: 400;
139+
font-size: 14px;
140+
line-height: 22px;
141+
color: #646a73;
142+
}
143+
144+
.ed-icon {
145+
margin-left: 12px;
146+
}
147+
}
148+
}
149+
}
150+
</style>

0 commit comments

Comments
 (0)