feat:新增角色应用页面

src/api/base/role.ts

@@ -0,0 +1,14 @@
+import { defHttp } from '@/utils/axios/index'
+
+// 角色
+export async function getRole(type: number) {
+  return defHttp.get({
+    url: `/open-chat/roleInfo/list?type=${type}`,
+  })
+}
+// 应用
+export function getAppList() {
+  return defHttp.get({
+    url: `/open-chat/roleInfo/app/group/list`,
+  })
+}

src/components/AppRoleDefault/index.d.ts

@@ -0,0 +1,20 @@
+export interface RoleData {
+  roleImg: string
+  roleName: string
+  roleInfo: string
+  remark: string
+}
+
+interface RoleInfoAppModel {
+  id: number
+  roleName: string
+  roleType: string
+  roleInfo: string
+  roleImg: string
+  type: number
+}
+
+export interface AppGroup {
+  groupName: string
+  roleInfoAppModelList: RoleInfoAppModel[]
+}

src/components/AppRoleDefault/index.ts

@@ -0,0 +1,3 @@
+import AppRoleDefault from './index.vue'
+
+export { AppRoleDefault }

src/components/AppRoleDefault/index.vue

@@ -0,0 +1,293 @@
+<!-- 子菜单容器组件 -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { AppGroup, RoleData } from './index.d'
+import { getAppList, getRole } from '@/api/base/role'
+
+const roleList = ref<RoleData[]>([])
+const application = ref<AppGroup[]>([])
+const typeIndex = ref(0)
+
+// 角色
+function getRoleData() {
+  getRole(1).then((res) => {
+    roleList.value = res
+  })
+}
+// 应用
+function getAppData() {
+  getAppList().then((res) => {
+    application.value = res
+  })
+}
+getRoleData()
+getAppData()
+
+// 应用切换
+function handleChange(index: number) {
+  typeIndex.value = index
+}
+</script>
+
+<template>
+  <div class="app-role-default-box w-full h-full">
+    <div class="applicationsbox">
+      <div class="rolecounseling">
+        <div class="title">
+          角色咨询
+        </div>
+        <div class="role-box">
+          <div
+            v-for="(item, index) in roleList"
+            :key="index"
+            class="role-card"
+          >
+            <div class="top">
+              <div class="avatar">
+                <img :src="item.roleImg" class="roleImg" />
+              </div>
+              <div class="exchange">
+                交流
+              </div>
+            </div>
+            <div class="message">
+              <div class="role">
+                <div class="rolename">
+                  {{ item.roleName }}
+                </div>
+                <div class="name">
+                  {{ item.roleInfo }}
+                </div>
+              </div>
+              <div class="explain">
+                {{ item.remark }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="applicationbox">
+        <div class="title">
+          应用市场
+        </div>
+        <div class="type">
+          <div>
+            <div
+              v-for="(item, index) in application"
+              :key="index"
+              :class="typeIndex === index ? 'typename change' : 'typename'"
+              @click="handleChange(index)"
+            >
+              {{ item.groupName }}
+            </div>
+          </div>
+          <div v-if="application.length > 0" class="list-box">
+            <div
+              v-for="(item, index) in application[typeIndex].roleInfoAppModelList"
+              :key="index"
+              class="applyList"
+            >
+              <div class="img">
+                <img class="apple-img" :src="item.roleImg" />
+                <div class="name">
+                  {{ item.roleName }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@include app('role-default-box') {
+  .applicationsbox {
+    width: 100%;
+    .rolecounseling {
+      width: 100%;
+      max-height: 60vh;
+      overflow: auto;
+      .title {
+        font-size: 16px;
+        font-family:
+          PingFangSC,
+          PingFang SC;
+        font-weight: 600;
+        color: #141515;
+      }
+      .role-box {
+        margin-top: 15px;
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: 2%;
+        margin-top: 40px;
+
+        .role-card {
+          width: 23%;
+          height: 100px;
+          margin-bottom: 35px;
+          background: linear-gradient(169deg, #edf3ff 0%, #f7f9ff 100%);
+          box-shadow: 1px 4px 10px 0px rgba(194, 205, 235, 0.49);
+          border-radius: 10px;
+
+          cursor: pointer;
+
+          .top {
+            display: flex;
+            position: relative;
+            .avatar {
+              margin-top: -20px;
+              padding-left: 25px;
+              font-size: 0;
+              .roleImg {
+                width: 55px;
+                height: 55px;
+              }
+            }
+            .exchange {
+              position: absolute;
+              top: 5px;
+              right: 0px;
+              width: 4px;
+              height: 30px;
+              background: linear-gradient(131deg, #226aff 0%, #3fc6ff 100%);
+              font-size: 0;
+              border-radius: 100px 0px 0px 100px;
+              transition: width 0.3s linear 0s;
+            }
+          }
+          .message {
+            width: 80%;
+            margin: 10px auto 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            .role {
+              display: flex;
+              align-items: center;
+              .rolename {
+                font-size: 15px;
+                font-family:
+                  PingFangSC,
+                  PingFang SC;
+                font-weight: 600;
+                color: #253351;
+              }
+              .name {
+                margin-left: 30px;
+                font-size: 13px;
+                font-family:
+                  PingFangSC,
+                  PingFang SC;
+                font-weight: 400;
+                color: #253351;
+              }
+            }
+            .explain {
+              font-size: 11px;
+              font-family:
+                PingFangSC,
+                PingFang SC;
+              font-weight: 400;
+              color: #335d91;
+              line-height: 25px;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+          &:hover .exchange {
+            width: 50px;
+            background: linear-gradient(131deg, #226aff 0%, #3fc6ff 100%);
+            border-radius: 100px 0px 0px 100px;
+            text-align: center;
+            color: white;
+            line-height: 30px;
+            font-size: 14px;
+            font-family:
+              PingFangSC,
+              PingFang SC;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+
+    .applicationbox {
+      width: 100%;
+      padding: 20px 0px;
+      max-height: 50vh;
+      .title {
+        font-size: 16px;
+        font-family:
+          PingFangSC,
+          PingFang SC;
+        font-weight: 600;
+        color: #141515;
+      }
+      .type {
+        display: flex;
+        flex-direction: column;
+        margin-top: 20px;
+        overflow: auto;
+        .typename {
+          cursor: pointer;
+          border-radius: 16px;
+          margin: 0 11px;
+          padding: 4px 8px;
+          font-size: 13px;
+          font-family:
+            PingFangSC,
+            PingFang SC;
+          font-weight: 500;
+          display: inline-block;
+
+          &.change {
+            background: #236cff;
+            color: #ffffff;
+          }
+        }
+
+        .list-box {
+          margin-top: 20px;
+          display: flex;
+          flex-wrap: wrap;
+
+          .applyList {
+            display: flex;
+            flex-direction: column;
+            padding: 10px 15px;
+            .img {
+              position: relative;
+              overflow: hidden;
+              cursor: pointer;
+              .apple-img {
+                width: 100px;
+                height: 100px;
+              }
+              .name {
+                width: 100%;
+                position: absolute;
+                bottom: 0px;
+                left: 0;
+                text-align: center;
+                color: white;
+                font-size: 11px;
+
+                height: 25px;
+                border-bottom-left-radius: 5px;
+                border-bottom-right-radius: 5px;
+                line-height: 25px;
+                background-color: rgba(0, 0, 0, 0.5);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/layout/AppMenu/index.vue

@@ -23,7 +23,7 @@ const menu = ref<MenuItem[]>([
   {
     name: '角色',
     icon: 'jue_se',
-    path: '',
+    path: '/role',
     key: MenuTypeEnum.ROLE,
   },
   {

src/router/index.ts

@@ -47,6 +47,14 @@ export const constantRoutes: Array<RouteRecordRaw> = [
           title: '文生图',
         },
       },
+      {
+        name: 'Role',
+        path: '/Role',
+        component: () => import('@/views/role/index.vue'),
+        meta: {
+          title: '角色',
+        },
+      },
     ],
   },
 

src/utils/axios/index.ts

@@ -258,7 +258,8 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
       {
         // See https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
         // authentication schemes，e.g: Bearer
-        tokenScheme: 'crypto',
+        // crypto
+        tokenScheme: '',
         authenticationScheme: 'Basic',
         timeout: 10 * 1000,
         // 基础接口地址

src/views/login/index.vue

@@ -122,10 +122,10 @@ function timer() {
             欢迎使用
           </div>
           <div class="zh">
-            青鸟AI助手-同聪
+            青鸟语言大模型-同聪
           </div>
           <div class="en">
-            Bluebird AI Assistant - Tong Cong
+            THE BIG LANGUAGE MODEL BLUEBIRO - Tong Cong
           </div>
         </div>
       </div>
@@ -139,7 +139,7 @@ function timer() {
           :wrapper-col="{ span: 22 }"
           autocomplete="off"
         >
-          <div class="login_title">
+          <div class="login-title">
             登录/注册
           </div>
           <FormItem
@@ -150,7 +150,6 @@ function timer() {
                 <img
                   class="icon"
                   :src="Yh"
-                  style="width: 20px;"
                 />
               </template>
             </Input>
@@ -163,7 +162,6 @@ function timer() {
                 <img
                   class="icon"
                   :src="Yzm"
-                  style="width: 20px;"
                 />
               </template>
               <template #suffix>
@@ -235,7 +233,7 @@ function timer() {
         top: 20%;
         left: 10%;
         .welcome {
-          font-size: 55px;
+          font-size: 50px;
           font-family: PingFang-SC, PingFang-SC;
           font-weight: 300;
           color: #ffffff;
@@ -243,7 +241,7 @@ function timer() {
           letter-spacing: 4px;
         }
         .zh {
-          font-size: 30px;
+          font-size: 26px;
           padding-top: 20px;
           font-family: PingFang-SC, PingFang-SC;
           font-weight: 400;
@@ -251,7 +249,7 @@ function timer() {
           letter-spacing: 5px;
         }
         .en {
-          font-size: 16px;
+          font-size: 13px;
           font-family: PingFang-SC, PingFang-SC;
           font-weight: 400;
           color: #77a4ff;
@@ -274,8 +272,12 @@ function timer() {
       top: 0;
       right: 2%;
       .login-Form {
-        width: 75%;
+        width: 70%;
         margin: 0 auto;
+        .icon {
+          width: 15px;
+          height: 15px;
+        }
         .time {
           font-size: 12px;
           color: #48a1fe;
@@ -287,7 +289,7 @@ function timer() {
           color: #333;
           border-bottom: 1px solid #c8cbd6;
           &::placeholder {
-            font-size: 12px;
+            font-size: 10px;
             color: #6e7382;
             letter-spacing: 3px;
           }
@@ -296,7 +298,8 @@ function timer() {
           }
         }
 
-        .login_title {
+        .login-title {
+          margin-top: 50px;
           margin-bottom: 30px;
           color: #505458;
           font-size: 19px;

src/views/role/index.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { AppContainerBox } from '@/components/AppContainerBox'
+import { AppSubMenuTitle } from '@/components/AppSubMenuTitle'
+import { AppSubMenuList } from '@/components/AppSubMenuList'
+import { AppRoleDefault } from '@/components/AppRoleDefault'
+import type { SubMenuItem } from '@/components/AppSubMenuList/index.d'
+
+const subMenuActive = ref(0)
+const subMenuList = ref<SubMenuItem[]>([
+  {
+    title: '新对话1',
+    content: '这是一个新的对话哦；啦啦啦',
+    id: '1',
+  },
+  {
+    title: '新对话2',
+    content: '这是一个新的对话哦',
+    id: '2',
+  },
+])
+
+function handleSubMenuChange(index: number) {
+  subMenuActive.value = index
+}
+</script>
+
+<template>
+  <AppContainerBox>
+    <template #subMenu>
+      <AppSubMenuTitle title="角色会话"></AppSubMenuTitle>
+      <!-- <div class="px-5 mb-5">
+        <Button type="primary" class="w-full">
+          新建会话
+        </Button>
+      </div> -->
+      <AppSubMenuList :list="subMenuList" :active-index="subMenuActive" @change="handleSubMenuChange"></AppSubMenuList>
+    </template>
+    <template #content>
+      <AppRoleDefault></AppRoleDefault>
+    </template>
+  </AppContainerBox>
+</template>
+
+<style scoped></style>