feat: breadcrumb

2025-12-26 10:12:51 +00:00 · 2025-06-19 18:54:02 +08:00 · 2025-06-19 18:54:02 +08:00 · b656d05036
parent 37c9ef3087
commit b656d05036
6 changed files with 104 additions and 74 deletions
--- a/ui/src/layout/components/breadcrumb/index.vue
+++ b/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"
-            pinyinColor
-            shape="square"
-            class="mr-8"
-            :size="24"
+            height="28px"
+            style="width: 28px; height: 28px; display: block"
          />
          <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 = computed(() => {
-  return list.value?.filter((v) => v.id === id)?.[0]
-})
+const current = ref<any>(null)
+// const current = computed(() => {
+//   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()
-    } else if (isApplication.value) {
-      getApplication()
-    }
-  } else {
-    list.value = breadcrumbData.value
+  if (isKnowledge.value) {
+    getKnowledgeDetail()
+  } else if (isApplication.value) {
+    getApplicationDetail()
  }
+  // if (!breadcrumbData.value) {
+  //   if (isKnowledge.value) {
+  //     getKnowledge()
+  //   } else if (isApplication.value) {
+  //     getApplication()
+  //   }
+  // } else {
+  //   list.value = breadcrumbData.value
+  // }
 })
 </script>

--- a/ui/src/layout/components/sidebar/index.vue
+++ b/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
--- a/ui/src/stores/modules/knowledge.ts
+++ b/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)
-          })
-      })
-    },
  },
 })

--- a/ui/src/views/chat/base/index.vue
+++ b/ui/src/views/chat/base/index.vue
@ -11,13 +11,7 @@
          >
            <img :src="applicationDetail?.icon" alt="" />
          </el-avatar>
-          <el-avatar
-            v-else-if="applicationDetail?.name"
-            :name="applicationDetail?.name"
-            pinyinColor
-            shape="square"
-            :size="32"
-          />
+          <LogoIcon v-else height="28px" style="width: 28px; height: 28px; display: block" />
        </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('')
--- a/ui/src/views/chat/embed/index.vue
+++ b/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
-            v-else-if="applicationDetail?.name"
-            :name="applicationDetail?.name"
-            pinyinColor
-            shape="square"
-            :size="32"
-          />
+          <LogoIcon v-else height="28px" style="width: 28px; height: 28px; display: block" />
        </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(() => {
--- a/ui/src/views/chat/mobile/index.vue
+++ b/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
-            v-else-if="applicationDetail?.name"
-            :name="applicationDetail?.name"
-            pinyinColor
-            shape="square"
-            :size="32"
-          />
+          <LogoIcon v-else height="28px" style="width: 28px; height: 28px; display: block" />
        </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(() => {