geekai/web/src/views/ChatApps.vue

<template>
  <div>

    <div class="page-apps custom-scroll">
      <div class="apps-type-nav">
        <el-scrollbar>
          <ul class="scrollbar-type-nav">
            <li :class="{active: typeId === ''}" @click="getAppList('')">全部分类</li>
            <li v-for="item in appTypes" :key="item.id" :class="{active: typeId === item.id}" @click="getAppList(item.id)">
              <div class="image" v-if="item.icon">
                <el-image :src="item.icon" fit="cover"/>
              </div>
              {{ item.name }}
            </li>
          </ul>
        </el-scrollbar>
      </div>      
      <div class="app-list-container" :style="{height: listBoxHeight + 'px'}">
        <ItemList :items="list" v-if="list.length > 0" :gap="15" :width="300">
          <template #default="scope">
            <div class="item">
              <div class="image">
                <el-image :src="scope.item.icon" fit="cover"/>
              </div>

              <div class="inner">
                <div class="info">
                  <div class="info-title">{{ scope.item.name }}</div>
                  <div class="info-text">{{ scope.item.hello_msg }}</div>
                </div>
                <div class="btn">
                  <el-button size="small" color="#21aa93" @click="useRole(scope.item)">使用</el-button>
                  <el-tooltip effect="light" content="从工作区移除" placement="top" v-if="hasRole(scope.item.key)">
                    <el-button size="small" type="danger" @click="updateRole(scope.item,'remove')">移除</el-button>
                  </el-tooltip>
                  <el-tooltip effect="light" content="添加到工作区" placement="top" v-else>
                    <el-button size="small" style="--el-color-primary:#009999" @click="updateRole(scope.item, 'add')">添加</el-button>
                  </el-tooltip>
                </div>
              </div>


            </div>
            <!--            <div class="app-item">-->
            <!--              <el-image :src="scope.item.icon" fit="cover"/>-->
            <!--              <div class="title">-->
            <!--                <span class="name">{{ scope.item.name }}</span>-->
            <!--                <div class="opt">-->
            <!--                  <div v-if="hasRole(scope.item.key)">-->
            <!--                    <el-button size="small" type="success" @click="useRole(scope.item)">使用</el-button>-->
            <!--                    <el-button size="small" type="danger" @click="updateRole(scope.item,'remove')">移除</el-button>-->
            <!--                  </div>-->
            <!--                  <el-button v-else size="small"-->
            <!--                             style="&#45;&#45;el-color-primary:#009999"-->
            <!--                             @click="updateRole(scope.item, 'add')">-->
            <!--                    <el-icon>-->
            <!--                      <Plus/>-->
            <!--                    </el-icon>-->
            <!--                    <span>添加应用</span>-->
            <!--                  </el-button>-->
            <!--                </div>-->
            <!--              </div>-->
            <!--              <div class="hello-msg" ref="elements">{{ scope.item.intro }}</div>-->
            <!--            </div>-->
          </template>
        </ItemList>
        <div v-else style="width: 100%">
          <el-empty description="暂无数据" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue"
import {ElMessage} from "element-plus";
import {httpGet, httpPost} from "@/utils/http";
import {checkSession} from "@/store/cache";
import {arrayContains, removeArrayItem, substr} from "@/utils/libs";
import {useRouter} from "vue-router";
import {useSharedStore} from "@/store/sharedata";
import ItemList from "@/components/ItemList.vue";

const listBoxHeight = window.innerHeight - 133

const typeId = ref('')
const appTypes = ref([])
const list = ref([])
const roles = ref([])
const store = useSharedStore();

onMounted(() => {
  getAppType()
  getAppList()
  getRoles()
})

const getRoles = () => {
  checkSession().then(user => {
    roles.value = user.chat_roles
  }).catch(e => {
    console.log(e.message)
  })
}

const getAppType = () => {
  httpGet("/api/app/type/list").then((res) => {
    appTypes.value = res.data
  }).catch(e => {
    ElMessage.error("获取分类失败：" + e.message)
  })
}

const getAppList = (tid = '') => {
  typeId.value = tid;
  httpGet("/api/app/list", { tid }).then((res) => {
    const items = res.data
    // 处理 hello message
    for (let i = 0; i < items.length; i++) {
      items[i].intro = substr(items[i].hello_msg, 80)
    }
    list.value = items
  }).catch(e => {
    ElMessage.error("获取应用失败：" + e.message)
  })
}

const updateRole = (row, opt) => {
  checkSession().then(() => {
    const title = ref("")
    if (opt === "add") {
      title.value = "添加应用"
      const exists = arrayContains(roles.value, row.key)
      if (exists) {
        return
      }
      roles.value.push(row.key)
    } else {
      title.value = "移除应用"
      const exists = arrayContains(roles.value, row.key)
      if (!exists) {
        return
      }
      roles.value = removeArrayItem(roles.value, row.key)
    }
    httpPost("/api/app/update", {keys: roles.value}).then(() => {
      ElMessage.success({message: title.value + "成功！", duration: 1000})
    }).catch(e => {
      ElMessage.error(title.value + "失败：" + e.message)
    })
  }).catch(() => {
    store.setShowLoginDialog(true)
  })
}

const hasRole = (roleKey) => {
  return arrayContains(roles.value, roleKey, (v1, v2) => v1 === v2)
}

const router = useRouter()
const useRole = (role) => {
  router.push(`/chat?role_id=${role.id}`)
}
</script>

<style lang="stylus">
@import "@/assets/css/chat-app.styl"
@import "@/assets/css/custom-scroll.styl"
</style>