diff --git a/frontend/src/assets/svg/icon_alarm-clock_colorful.svg b/frontend/src/assets/svg/icon_alarm-clock_colorful.svg
new file mode 100644
index 00000000..5eb6f52e
--- /dev/null
+++ b/frontend/src/assets/svg/icon_alarm-clock_colorful.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 20C0 10.5719 0 5.85786 2.92893 2.92893C5.85786 0 10.5719 0 20 0C29.4281 0 34.1421 0 37.0711 2.92893C40 5.85786 40 10.5719 40 20C40 29.4281 40 34.1421 37.0711 37.0711C34.1421 40 29.4281 40 20 40C10.5719 40 5.85786 40 2.92893 37.0711C0 34.1421 0 29.4281 0 20Z" fill="#EBF1FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 10.4511C25.8486 10.4513 30.5894 15.1931 30.5896 21.0417C30.5894 26.8902 25.8486 31.6311 20 31.6313C14.1514 31.6311 9.40954 26.8903 9.40936 21.0417C9.40949 15.193 14.1513 10.4512 20 10.4511ZM19.354 15.4966C19.0664 15.4967 18.8332 15.7299 18.8332 16.0175L18.8322 21.2299C18.8321 21.5061 18.942 21.772 19.1373 21.9674L22.8167 25.6468C23.0201 25.8501 23.3498 25.8501 23.5532 25.6468L24.2897 24.9103C24.4931 24.7069 24.4931 24.3772 24.2897 24.1738L21.0681 20.9511C20.9705 20.8535 20.9155 20.721 20.9155 20.5829L20.9165 16.0175C20.9165 15.7299 20.6833 15.4966 20.3957 15.4966H19.354Z" fill="#3370FF"/>
+<path d="M13.5317 10.0069C13.6989 10.241 13.6447 10.5663 13.4106 10.7334L10.6124 12.7322C10.3783 12.8993 10.053 12.8451 9.88584 12.6111L9.28077 11.764C9.11358 11.5299 9.16779 11.2046 9.40186 11.0374L12.2001 9.0387C12.4341 8.87151 12.7594 8.92573 12.9266 9.1598L13.5317 10.0069Z" fill="#3370FF"/>
+<path d="M30.5981 11.0374C30.8321 11.2046 30.8864 11.5299 30.7192 11.764L30.1141 12.6111C29.9469 12.8451 29.6216 12.8993 29.3875 12.7322L26.5894 10.7334C26.3553 10.5663 26.3011 10.241 26.4683 10.0069L27.0733 9.1598C27.2405 8.92573 27.5658 8.87151 27.7999 9.0387L30.5981 11.0374Z" fill="#3370FF"/>
+</svg>
diff --git a/frontend/src/assets/svg/icon_database_colorful.svg b/frontend/src/assets/svg/icon_database_colorful.svg
new file mode 100644
index 00000000..66a4a0d6
--- /dev/null
+++ b/frontend/src/assets/svg/icon_database_colorful.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 20C0 10.5719 0 5.85786 2.92893 2.92893C5.85786 0 10.5719 0 20 0C29.4281 0 34.1421 0 37.0711 2.92893C40 5.85786 40 10.5719 40 20C40 29.4281 40 34.1421 37.0711 37.0711C34.1421 40 29.4281 40 20 40C10.5719 40 5.85786 40 2.92893 37.0711C0 34.1421 0 29.4281 0 20Z" fill="#F2EBFE"/>
+<path d="M24.2501 10.5C20.8001 10.5 18.0001 13.3 18.0001 16.75C18.0001 17.5 18.1501 18.2 18.3876 18.8625L10.5764 26.6737C10.5275 26.7226 10.5001 26.7888 10.5001 26.8579V29.9792C10.5001 30.2668 10.7333 30.5 11.0209 30.5H12.4793C12.7669 30.5 13.0001 30.2668 13.0001 29.9792V29.25H14.9793C15.2669 29.25 15.5001 29.0168 15.5001 28.7292V26.75H16.7501L19.2501 24.25H20.5001L22.1376 22.6125C22.8001 22.85 23.5001 23 24.2501 23C27.7001 23 30.5001 20.2 30.5001 16.75C30.5001 13.3 27.7001 10.5 24.2501 10.5ZM26.1251 16.75C25.0876 16.75 24.2501 15.9125 24.2501 14.875C24.2501 13.8375 25.0876 13 26.1251 13C27.1626 13 28.0001 13.8375 28.0001 14.875C28.0001 15.9125 27.1626 16.75 26.1251 16.75Z" fill="#7F3BF5"/>
+</svg>
diff --git a/frontend/src/assets/svg/icon_logs_outlined.svg b/frontend/src/assets/svg/icon_logs_outlined.svg
new file mode 100644
index 00000000..0857b0a0
--- /dev/null
+++ b/frontend/src/assets/svg/icon_logs_outlined.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6667 2.00008H3.33333V14.0001H12.6667V4.01308H11C10.9116 4.01308 10.8268 3.97796 10.7643 3.91545C10.7018 3.85294 10.6667 3.76815 10.6667 3.67975V2.00008ZM2.66667 0.666748H11.3903C11.4779 0.666723 11.5647 0.683961 11.6456 0.717478C11.7265 0.750994 11.8001 0.800132 11.862 0.862081L13.805 2.80575C13.9299 2.9308 14.0001 3.10033 14 3.27708V14.6667C14 14.8436 13.9298 15.0131 13.8047 15.1381C13.6797 15.2632 13.5101 15.3334 13.3333 15.3334H2.66667C2.48986 15.3334 2.32029 15.2632 2.19526 15.1381C2.07024 15.0131 2 14.8436 2 14.6667V1.33341C2 1.1566 2.07024 0.987034 2.19526 0.86201C2.32029 0.736986 2.48986 0.666748 2.66667 0.666748ZM5.33333 6.66675H10.6667C10.7551 6.66675 10.8399 6.70187 10.9024 6.76438C10.9649 6.82689 11 6.91167 11 7.00008V7.66675C11 7.75515 10.9649 7.83994 10.9024 7.90245C10.8399 7.96496 10.7551 8.00008 10.6667 8.00008H5.33333C5.24493 8.00008 5.16014 7.96496 5.09763 7.90245C5.03512 7.83994 5 7.75515 5 7.66675V7.00008C5 6.91167 5.03512 6.82689 5.09763 6.76438C5.16014 6.70187 5.24493 6.66675 5.33333 6.66675ZM5.33333 10.0001H8.33333C8.37711 10.0001 8.42045 10.0087 8.46089 10.0255C8.50134 10.0422 8.53808 10.0668 8.56904 10.0977C8.59999 10.1287 8.62454 10.1654 8.64129 10.2059C8.65805 10.2463 8.66667 10.2896 8.66667 10.3334V11.0001C8.66667 11.0439 8.65805 11.0872 8.64129 11.1276C8.62454 11.1681 8.59999 11.2048 8.56904 11.2358C8.53808 11.2667 8.50134 11.2913 8.46089 11.308C8.42045 11.3248 8.37711 11.3334 8.33333 11.3334H5.33333C5.24493 11.3334 5.16014 11.2983 5.09763 11.2358C5.03512 11.1733 5 11.0885 5 11.0001V10.3334C5 10.245 5.03512 10.1602 5.09763 10.0977C5.16014 10.0352 5.24493 10.0001 5.33333 10.0001Z" fill="#646A73"/>
+</svg>
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 9a43c0f1..5a2d060c 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -8,6 +8,10 @@
     "Details": "Details"
   },
   "parameter": {
+    "execution_details": "Execution Details",
+    "overview": "Overview",
+    "tokens_required": "Tokens Required",
+    "time_execution": "Time Execution",
     "export_notes": "Export notes",
     "import_notes": "Import notes",
     "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 @@
     "to_doc": "View API",
     "trigger_limit": "Supports up to {0} API Keys"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/i18n/ko-KR.json b/frontend/src/i18n/ko-KR.json
index b080da79..a80cb53f 100644
--- a/frontend/src/i18n/ko-KR.json
+++ b/frontend/src/i18n/ko-KR.json
@@ -8,6 +8,10 @@
     "Details": "세부"
   },
   "parameter": {
+    "execution_details": "실행 세부 정보",
+    "overview": "개요",
+    "tokens_required": "필요한 토큰 수",
+    "time_execution": "실행 시간",
     "export_notes": "수출 참고사항",
     "import_notes": "수입 참고사항",
     "memo": "메모 업데이트 규칙: 테이블 이름과 필드 이름이 일치하는지 확인합니다. 일치하는 항목이 있으면 테이블 메모와 필드 메모를 업데이트하고, 그렇지 않으면 메모를 변경하지 않고 그대로 둡니다.",
@@ -870,4 +874,4 @@
     "to_doc": "API 보기",
     "trigger_limit": "최대 {0}개의 API 키 생성 지원"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/i18n/zh-CN.json b/frontend/src/i18n/zh-CN.json
index fc73a5b7..be93cd3e 100644
--- a/frontend/src/i18n/zh-CN.json
+++ b/frontend/src/i18n/zh-CN.json
@@ -8,6 +8,10 @@
     "Details": "详情"
   },
   "parameter": {
+    "execution_details": "执行详情",
+    "overview": "概览",
+    "tokens_required": "消耗 Tokens",
+    "time_execution": "耗时",
     "export_notes": "导出备注",
     "import_notes": "导入备注",
     "memo": "备注更新规则：根据表名和字段名匹配，如果匹配则更新表备注和字段备注；如果匹配不上，备注保持不变。",
@@ -870,4 +874,4 @@
     "to_doc": "查看 API",
     "trigger_limit": "最多支持创建 {0} 个 API Key"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/views/chat/ChatTokenTime.vue b/frontend/src/views/chat/ChatTokenTime.vue
index 3513ec33..e1e2ca7a 100644
--- a/frontend/src/views/chat/ChatTokenTime.vue
+++ b/frontend/src/views/chat/ChatTokenTime.vue
@@ -1,63 +1,54 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { chatApi, type ChatLogHistory } from '@/api/chat.ts'
-
+import { ref } from 'vue'
+import icon_logs_outlined from '@/assets/svg/icon_logs_outlined.svg'
+import ExecutionDetails from './ExecutionDetails.vue'
 const props = defineProps<{
   recordId?: number
   duration?: number | undefined
   totalTokens?: number | undefined
 }>()
 
-const logHistory = ref<ChatLogHistory>()
-
+const executionDetailsRef = ref()
 function getLogList() {
-  chatApi.get_chart_log_history(props.recordId).then((res) => {
-    logHistory.value = chatApi.toChatLogHistory(res)
-    console.log(logHistory.value)
-  })
+  executionDetailsRef.value.getLogList(props.recordId)
 }
-
-onMounted(() => {})
 </script>
 
 <template>
   <div v-if="recordId && (duration || totalTokens)" class="tool-container">
-    <span>token: {{ totalTokens }}</span>
-    <span>duration: {{ duration }}</span>
-    <el-button @click="getLogList">log</el-button>
+    <span>{{ $t('parameter.tokens_required') }} {{ totalTokens }}</span>
+    <span style="margin-left: 12px">{{ $t('parameter.time_execution') }} {{ duration }} s</span>
+
+    <div @click="getLogList" class="detail">
+      <el-icon style="margin-right: 4px" size="16">
+        <icon_logs_outlined></icon_logs_outlined>
+      </el-icon>
+      {{ $t('parameter.execution_details') }}
+    </div>
   </div>
+  <ExecutionDetails ref="executionDetailsRef"></ExecutionDetails>
 </template>
 
 <style scoped lang="less">
 .tool-container {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  row-gap: 8px;
-
-  min-height: 22px;
-
-  margin-top: 12px;
-  margin-bottom: 12px;
-
-  .tool-times {
-    flex: 1;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-    color: rgba(100, 106, 115, 1);
+  height: 38px;
+  margin: 12px 0;
+  background: #f5f6f7;
+  border-radius: 6px;
+  padding: 0 12px;
+  font-family: PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  color: #646a73;
 
+  .detail {
+    cursor: pointer;
+    margin-left: auto;
     display: flex;
-    flex-direction: row;
     align-items: center;
-    justify-content: space-between;
-
-    .time {
-      white-space: nowrap;
-    }
   }
 }
 </style>
diff --git a/frontend/src/views/chat/ExecutionDetails.vue b/frontend/src/views/chat/ExecutionDetails.vue
new file mode 100644
index 00000000..455d0d37
--- /dev/null
+++ b/frontend/src/views/chat/ExecutionDetails.vue
@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import gou_icon from '@/assets/svg/gou_icon.svg'
+import icon_error from '@/assets/svg/icon_error.svg'
+import icon_database_colorful from '@/assets/svg/icon_database_colorful.svg'
+import icon_alarm_clock_colorful from '@/assets/svg/icon_alarm-clock_colorful.svg'
+import { chatApi, type ChatLogHistory } from '@/api/chat.ts'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const logHistory = ref<ChatLogHistory>({})
+const dialogFormVisible = ref(false)
+
+function getLogList(recordId: any) {
+  chatApi.get_chart_log_history(recordId).then((res) => {
+    logHistory.value = chatApi.toChatLogHistory(res) as ChatLogHistory
+    dialogFormVisible.value = true
+  })
+}
+
+defineExpose({
+  getLogList,
+})
+</script>
+
+<template>
+  <el-drawer
+    v-model="dialogFormVisible"
+    :title="t('parameter.execution_details')"
+    destroy-on-close
+    modal-class="execution-details"
+    size="600px"
+  >
+    <div class="title">{{ t('parameter.overview') }}</div>
+    <div class="overview">
+      <div class="item">
+        <el-icon size="40">
+          <icon_database_colorful></icon_database_colorful>
+        </el-icon>
+        <div class="name">{{ t('parameter.tokens_required') }}</div>
+        <div class="value">{{ logHistory.total_tokens }}</div>
+      </div>
+      <div class="item">
+        <el-icon size="40">
+          <icon_alarm_clock_colorful></icon_alarm_clock_colorful>
+        </el-icon>
+        <div class="name">{{ t('parameter.time_execution') }}</div>
+        <div class="value">{{ logHistory.duration }}s</div>
+      </div>
+    </div>
+    <div class="title">{{ t('parameter.execution_details') }}</div>
+
+    <div class="list">
+      <div class="list-item" :key="ele.duration" v-for="ele in logHistory.steps">
+        <div class="name">{{ ele.operate }}</div>
+        <div class="status">
+          <div class="time">{{ ele.duration }}s</div>
+          <el-icon size="16">
+            <gou_icon v-if="true"></gou_icon>
+            <icon_error v-else></icon_error>
+          </el-icon>
+        </div>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<style lang="less">
+.execution-details {
+  .title {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    margin-bottom: 16px;
+  }
+
+  .overview {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+    .item {
+      width: 268px;
+      height: 86px;
+      border-radius: 12px;
+      border: 1px solid #dee0e3;
+      padding: 16px;
+
+      .ed-icon {
+        float: left;
+        margin: 8px 12px 0 0;
+      }
+
+      .name {
+        float: left;
+        color: #646a73;
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        width: 180px;
+      }
+
+      .value {
+        float: left;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 28px;
+        color: #1f2329;
+        margin-top: 4px;
+      }
+    }
+  }
+
+  .list {
+    .list-item {
+      width: 552px;
+      height: 54px;
+      border-radius: 12px;
+      border: 1px solid #dee0e3;
+      padding: 16px;
+      margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+
+      .status {
+        display: flex;
+        align-items: center;
+        margin-left: auto;
+      }
+      .name {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 22px;
+      }
+
+      .time {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        color: #646a73;
+      }
+
+      .ed-icon {
+        margin-left: 12px;
+      }
+    }
+  }
+}
+</style>