smartai2dian0/src/views/conversation/ChatAsideMenu.vue

<template>
  <div class="chat-aside-container no-select">
    <div class="chat-aside-menu" :class="current_theme_klass">
      <div class="menu-content">
        <div class="menu-actions-top">
          <img class="header-logo-img" src="../../assets/logo.png" />
        </div>

        <div class="aside-menu-h-line"></div>

        <ChatAsideBtn
          :label="$t('conversation.chat_new')"
          img_name="chat-new-1"
          @active="handleMenuClick('/chat/qa')"
        />

        <ChatAsideBtn
          :label="$t('conversation.chat_history')"
          img_name="chat-history-1"
          @active="handleMenuClick('/chat/history')"
        />

        <ChatAsideBtn
          :label="$t('conversation.chat_smart')"
          img_name="chat-smart-1"
          @active="handleMenuClick('/chat/board')"
        />

        <div class="aside-menu-h-line"></div>

        <ChatAsideAgent
          v-for="item of agents_list"
          :label="item.name"
          :img="item.icon"
          :id="item.id"
          :key="item.id"
          @active="handleAgentClick(item.id)"
          @delete="handleAgentDelete(item.id)"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useThemeStore } from '../../base/store/use-theme';
import { useRecentAgentStore } from '../../base/store/use-recent-agents';
import { useAllAgentStore } from '../../base/store/use-all-agents';
import { getIconIntelligent } from '../../modules/common/icon-map';

import ChatAsideBtn from './ChatAsideBtn.vue';
import ChatAsideAgent from './ChatAsideAgent.vue';

const router = useRouter();

const themeStore = useThemeStore();
const recentAgents = useRecentAgentStore();

const current_theme_klass = computed(() => {
  const theme = themeStore.value;

  return {
    'chat-theme-light': theme === 'light',
    'chat-theme-dark': theme === 'dark'
  };
});

// 最近使用的 智能体 列表
const agents_list = computed(() => {
  const arr = [];

  const list = recentAgents.getList();

  const len = list.length;
  for (let i = 0; i < len; i++) {
    if (i >= 3) {
      break;
    }

    const item = list[i];

    arr.push({
      id: item.id,
      icon: getIconIntelligent(item.icon),
      name: item.name
    });
  }

  return arr;
});

const handleMenuClick = (path) => {
  router.push(path);
};

/**
 * 点击最近使用的Agent
 * @param agent_id
 */
const handleAgentClick = (agent_id) => {
  router.push({
    path: '/chat/qa',
    query: {
      agent: agent_id
    }
  });
};

/**
 * 移除某个近期使用的Agent
 * @param agent_id
 */
const handleAgentDelete = (agent_id) => {
  recentAgents.removeItem(agent_id);
};
</script>

<style lang="css" scoped>
.chat-aside-container {
  width: 74px;
  height: calc(100vh - 60px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: fixed;
  left: 0;
  top: 60px;

  z-index: 999;
}
.chat-aside-menu {
  width: 74px;

  padding-top: 90px;
  padding-bottom: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
  background-position: top left, bottom left;
}
.chat-theme-light {
  background-image: url(../../assets/chat-aside/aside-menu-bg-wt-top.png),
    url(../../assets/chat-aside/aside-menu-bg-wt-bottom.png);
}
.chat-theme-dark {
  background-image: url(../../assets/chat-aside/aside-menu-bg-blk-top.png),
    url(../../assets/chat-aside/aside-menu-bg-blk-bottom.png);
}

.menu-content {
  width: 40px;
}

.menu-actions-top {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}
.menu-content .menu-actions-top .header-logo-img {
  width: 30px;
}

.aside-menu-h-line {
  width: 28px;
  height: 2px;
  background-color: var(--color-border-2);
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}
</style>