feat: breadcrumb

ui/src/layout/components/breadcrumb/index.vue

@@ -1,7 +1,27 @@
 <template>
   <div class="breadcrumb ml-4 mt-4 mb-12 flex">
     <back-button :to="activeMenu" class="mt-4"></back-button>
-    <el-dropdown
+    <div class="flex align-center">
+      <el-avatar
+        v-if="isApplication && isAppIcon(current?.icon)"
+        shape="square"
+        :size="24"
+        style="background: none"
+        class="mr-8"
+      >
+        <img :src="current?.icon" alt="" />
+      </el-avatar>
+      <LogoIcon
+        v-else-if="isApplication"
+        height="28px"
+        style="width: 28px; height: 28px; display: block"
+        class="mr-8"
+      />
+      <KnowledgeIcon v-else-if="isKnowledge" :type="current?.type" class="mr-8" />
+
+      <div class="ellipsis" :title="current?.name">{{ current?.name }}</div>
+    </div>
+    <!-- <el-dropdown
       placement="bottom"
       trigger="click"
       @command="changeMenu"
@@ -19,13 +39,10 @@
           >
             <img :src="current?.icon" alt="" />
           </el-avatar>
-          <el-avatar
+          <LogoIcon
             v-else-if="isApplication"
-            :name="current?.name"
+            height="28px"
-            pinyinColor
+            style="width: 28px; height: 28px; display: block"
-            shape="square"
-            class="mr-8"
-            :size="24"
           />
           <KnowledgeIcon v-else-if="isKnowledge" :type="current?.type" />
 
@@ -91,7 +108,7 @@
           </template>
         </div>
       </template>
-    </el-dropdown>
+    </el-dropdown> -->
   </div>
 </template>
 
@@ -120,10 +137,10 @@ const list = ref<any[]>([])
 const loading = ref(false)
 
 const breadcrumbData = computed(() => common.breadcrumb)
-
+const current = ref<any>(null)
-const current = computed(() => {
+// const current = computed(() => {
-  return list.value?.filter((v) => v.id === id)?.[0]
+//   return list.value?.filter((v) => v.id === id)?.[0]
-})
+// })
 
 const isApplication = computed(() => {
   return activeMenu.includes('application')
@@ -132,6 +149,32 @@ const isKnowledge = computed(() => {
   return activeMenu.includes('knowledge')
 })
 
+function getKnowledgeDetail() {
+  loading.value = true
+  knowledge
+    .asyncGetKnowledgeDetail(id)
+    .then((res: any) => {
+      current.value = res.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function getApplicationDetail() {
+  loading.value = true
+  application
+    .asyncGetApplicationDetail(id)
+    .then((res: any) => {
+      current.value = res.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
 function openCreateDialog() {
   if (isKnowledge.value) {
     CreateKnowledgeDialogRef.value.open()
@@ -192,15 +235,20 @@ function refresh() {
   common.saveBreadcrumb(null)
 }
 onMounted(() => {
-  if (!breadcrumbData.value) {
   if (isKnowledge.value) {
-      getKnowledge()
+    getKnowledgeDetail()
   } else if (isApplication.value) {
-      getApplication()
+    getApplicationDetail()
-    }
-  } else {
-    list.value = breadcrumbData.value
   }
+  // if (!breadcrumbData.value) {
+  //   if (isKnowledge.value) {
+  //     getKnowledge()
+  //   } else if (isApplication.value) {
+  //     getApplication()
+  //   }
+  // } else {
+  //   list.value = breadcrumbData.value
+  // }
 })
 </script>
 

ui/src/layout/components/sidebar/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="sidebar p-8">
-    <!-- <div v-if="showBreadcrumb">
+    <div v-if="showBreadcrumb">
       <AppBreadcrumb />
-    </div> -->
+    </div>
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu :default-active="activeMenu" router>
         <sidebar-item

ui/src/stores/modules/knowledge.ts

@@ -47,6 +47,18 @@ const useKnowledgeStore = defineStore('knowledge', {
           })
       })
     },
+    async asyncGetKnowledgeDetail(knowledge_id: string, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        knowledgeApi
+          .getKnowledgeDetail(knowledge_id, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
     // async asyncGetTreeRootKnowledge(loading?: Ref<boolean>) {
     //   const folder = useFolderStore()
     //   return Promise.all([
@@ -87,18 +99,6 @@ const useKnowledgeStore = defineStore('knowledge', {
     //       return Promise.reject(error)
     //     })
     // },
-    async asyncGetKnowledgeDetail(knowledge_id: string, loading?: Ref<boolean>) {
-      return new Promise((resolve, reject) => {
-        knowledgeApi
-          .getKnowledgeDetail(knowledge_id, loading)
-          .then((data) => {
-            resolve(data)
-          })
-          .catch((error) => {
-            reject(error)
-          })
-      })
-    },
   },
 })
 

ui/src/views/chat/base/index.vue

@@ -11,13 +11,7 @@
           >
             <img :src="applicationDetail?.icon" alt="" />
           </el-avatar>
-          <el-avatar
+          <LogoIcon v-else height="28px" style="width: 28px; height: 28px; display: block" />
-            v-else-if="applicationDetail?.name"
-            :name="applicationDetail?.name"
-            pinyinColor
-            shape="square"
-            :size="32"
-          />
         </div>
 
         <h2>{{ applicationDetail?.name }}</h2>
@@ -64,7 +58,7 @@ const applicationDetail = computed({
   get: () => {
     return props.application_profile
   },
-  set: (v) => {}
+  set: (v) => {},
 })
 const recordList = ref([])
 const currentChatId = ref('')

ui/src/views/chat/embed/index.vue

@@ -5,7 +5,7 @@
     v-loading="loading"
     :style="{
       '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
-      '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1)
+      '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1),
     }"
   >
     <div class="chat-embed__header" :style="customStyle">
@@ -19,13 +19,7 @@
           >
             <img :src="applicationDetail?.icon" alt="" />
           </el-avatar>
-          <el-avatar
+          <LogoIcon v-else height="28px" style="width: 28px; height: 28px; display: block" />
-            v-else-if="applicationDetail?.name"
-            :name="applicationDetail?.name"
-            pinyinColor
-            shape="square"
-            :size="32"
-          />
         </div>
 
         <h4>{{ applicationDetail?.name }}</h4>
@@ -64,7 +58,7 @@
         <AppIcon
           iconName="app-history-outlined"
           :style="{
-            color: applicationDetail?.custom_theme?.header_font_color
+            color: applicationDetail?.custom_theme?.header_font_color,
           }"
         ></AppIcon>
       </div>
@@ -154,12 +148,12 @@ const applicationDetail = computed({
   get: () => {
     return props.application_profile
   },
-  set: (v) => {}
+  set: (v) => {},
 })
 const paginationConfig = reactive({
   current_page: 1,
   page_size: 20,
-  total: 0
+  total: 0,
 })
 
 const currentRecordList = ref<any>([])
@@ -170,14 +164,14 @@ const mouseId = ref('')
 const customStyle = computed(() => {
   return {
     background: applicationDetail.value?.custom_theme?.theme_color,
-    color: applicationDetail.value?.custom_theme?.header_font_color
+    color: applicationDetail.value?.custom_theme?.header_font_color,
   }
 })
 
 function editName(val: string, item: any) {
   if (val) {
     const obj = {
-      abstract: val
+      abstract: val,
     }
     chatLog.asyncPutChatClientLog(applicationDetail.value.id, item.id, obj, loading).then(() => {
       const find = chatLogData.value.find((row: any) => row.id === item.id)
@@ -241,7 +235,7 @@ function newChat() {
 function getChatLog(id: string) {
   const page = {
     current_page: 1,
-    page_size: 20
+    page_size: 20,
   }
 
   chatLog.asyncGetChatLogClient(id, page, left_loading).then((res: any) => {
@@ -263,7 +257,7 @@ function getChatRecord() {
       currentChatId.value,
       paginationConfig,
       loading,
-      false
+      false,
     )
     .then((res: any) => {
       paginationConfig.total = res.data.total
@@ -273,7 +267,7 @@ function getChatRecord() {
         v['record_id'] = v.id
       })
       currentRecordList.value = [...list, ...currentRecordList.value].sort((a, b) =>
-        a.create_time.localeCompare(b.create_time)
+        a.create_time.localeCompare(b.create_time),
       )
       if (paginationConfig.current_page === 1) {
         nextTick(() => {

ui/src/views/chat/mobile/index.vue

@@ -4,7 +4,7 @@
     v-loading="loading"
     :style="{
       '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
-      '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1)
+      '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1),
     }"
   >
     <div class="chat-embed__header" :style="customStyle">
@@ -18,13 +18,7 @@
           >
             <img :src="applicationDetail?.icon" alt="" />
           </el-avatar>
-          <el-avatar
+          <LogoIcon v-else height="28px" style="width: 28px; height: 28px; display: block" />
-            v-else-if="applicationDetail?.name"
-            :name="applicationDetail?.name"
-            pinyinColor
-            shape="square"
-            :size="32"
-          />
         </div>
 
         <h4>{{ applicationDetail?.name }}</h4>
@@ -63,7 +57,7 @@
         <AppIcon
           iconName="app-history-outlined"
           :style="{
-            color: applicationDetail?.custom_theme?.header_font_color
+            color: applicationDetail?.custom_theme?.header_font_color,
           }"
         ></AppIcon>
       </div>
@@ -149,12 +143,12 @@ const applicationDetail = computed({
   get: () => {
     return props.application_profile
   },
-  set: (v) => {}
+  set: (v) => {},
 })
 const paginationConfig = reactive({
   current_page: 1,
   page_size: 20,
-  total: 0
+  total: 0,
 })
 
 const currentRecordList = ref<any>([])
@@ -165,14 +159,14 @@ const mouseId = ref('')
 const customStyle = computed(() => {
   return {
     background: applicationDetail.value?.custom_theme?.theme_color,
-    color: applicationDetail.value?.custom_theme?.header_font_color
+    color: applicationDetail.value?.custom_theme?.header_font_color,
   }
 })
 
 function editName(val: string, item: any) {
   if (val) {
     const obj = {
-      abstract: val
+      abstract: val,
     }
 
     chatLog.asyncPutChatClientLog(applicationDetail.value.id, item.id, obj, loading).then(() => {
@@ -237,7 +231,7 @@ function newChat() {
 function getChatLog(id: string) {
   const page = {
     current_page: 1,
-    page_size: 20
+    page_size: 20,
   }
 
   chatLog.asyncGetChatLogClient(id, page, left_loading).then((res: any) => {
@@ -259,7 +253,7 @@ function getChatRecord() {
       currentChatId.value,
       paginationConfig,
       loading,
-      false
+      false,
     )
     .then((res: any) => {
       paginationConfig.total = res.data.total
@@ -269,7 +263,7 @@ function getChatRecord() {
         v['record_id'] = v.id
       })
       currentRecordList.value = [...list, ...currentRecordList.value].sort((a, b) =>
-        a.create_time.localeCompare(b.create_time)
+        a.create_time.localeCompare(b.create_time),
       )
       if (paginationConfig.current_page === 1) {
         nextTick(() => {