xieyinlu/zhilu-admin
1
0
Fork 0
mirror of https://github.com/ccmjga/zhilu-admin synced 2026-04-13 11:53:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

add assistant

Browse Source
This commit is contained in:
ccmjga
2025-06-01 16:37:54 +08:00
parent eec1039b1e
commit 65c96abf9d
6 changed files with 84 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
frontend/src/components/Assistant.vue
View File

@@ -1,6 +1,8 @@
<template> <template>
<div class="flex flex-col box-border pt-14 min-h-screen max-h-screen overflow-auto" ref="chatContainer"> <div
<div class="flex flex-col gap-y-5 flex-1 pt-14"> class="flex flex-col box-border px-3 scroll-auto overflow-auto fixed top-0 right-0 w-64 border-gray-200 border-l min-h-screen"
ref="chatContainer">
<div class="flex flex-col gap-y-5 flex-1">
<li v-for="chatElement in messages" :key="chatElement.content" <li v-for="chatElement in messages" :key="chatElement.content"
:class="['flex items-start gap-2.5', chatElement.isUser ? 'flex-row-reverse' : 'flex-row']"> :class="['flex items-start gap-2.5', chatElement.isUser ? 'flex-row-reverse' : 'flex-row']">
<img class="w-8 h-8 rounded-full" :src="chatElement.isUser ? '/java.svg' : '/trump.jpg'" alt="avatar"> <img class="w-8 h-8 rounded-full" :src="chatElement.isUser ? '/java.svg' : '/trump.jpg'" alt="avatar">
@@ -35,88 +37,25 @@
</li> </li>
</div> </div>
<form class="sticky bottom-4 pt-14"> <form class="sticky">
<button @click.prevent="toggleMode"
class="absolute left-1 top-2 inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium rounded-lg group focus:ring-4 focus:outline-none focus:ring-cyan-200"
:class="[
isCommandMode
? 'bg-gradient-to-br from-cyan-500 to-blue-500 text-white'
: 'bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 text-gray-900'
]">
<span class="relative px-3 py-2 transition-all ease-in duration-75 rounded-md hover:text-white" :class="[
isCommandMode
? 'bg-transparent'
: 'bg-white group-hover:bg-transparent'
]">
指令模式
</span>
</button>
<div class="absolute right-1 top-2">
<button @click.prevent="() => handleSendClick('请帮我创建用户', true)" class=" inline-flex items-center justify-center p-0.5
mb-2 me-2 overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500
to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4
focus:outline-none focus:ring-purple-200 cursor-pointer dark:focus:ring-purple-800">
<span
class="px-3 py-2 text-xs transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-transparent group-hover:dark:bg-transparent">
帮我创建用户?
</span>
</button>
<button @click.prevent="() => handleSendClick('删除用户', true)" class=" inline-flex items-center justify-center p-0.5
mb-2 me-2 overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500
to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4
focus:outline-none focus:ring-purple-200 cursor-pointer dark:focus:ring-purple-800">
<span
class="px-3 py-2 text-xs transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-transparent group-hover:dark:bg-transparent">
删除用户
</span>
</button>
<button @click.prevent="() => handleSendClick('删除部门', true)" class=" inline-flex items-center justify-center p-0.5
mb-2 me-2 overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500
to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4
focus:outline-none focus:ring-purple-200 cursor-pointer dark:focus:ring-purple-800">
<span
class="px-3 py-2 text-xs transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-transparent group-hover:dark:bg-transparent">
删除部门
</span>
</button>
<button @click.prevent="() => handleSendClick('请帮我创建部门', true)" class="inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200
cursor-pointer dark:focus:ring-purple-800">
<span
class="px-3 py-2 text-xs transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-transparent group-hover:dark:bg-transparent">
帮我创建部门?
</span>
</button>
</div>
<div class="w-full border border-gray-200 rounded-lg bg-gray-50"> <div class="w-full border border-gray-200 rounded-lg bg-gray-50">
<div class="px-4 py-2 bg-white rounded-t-lg"> <div class="px-4 py-2 bg-white rounded-t-lg">
<label for="comment" class="sr-only"></label> <label for="comment" class="sr-only"></label>
<textarea id="comment" rows="3" v-model="inputMessage" <textarea id="comment" rows="3" v-model="inputMessage"
class="w-full px-0 text-gray-900 bg-white border-0 focus:ring-0 " placeholder="发送消息" required></textarea> class="w-full px-0 text-gray-900 bg-white border-0 focus:ring-0 " placeholder="发送消息" required></textarea>
</div> </div>
<div class="flex items-center justify-between px-3 py-2 border-t border-gray-200"> <div class="flex justify-between px-2 py-2 border-t border-gray-200">
<form>
<select id="countries" v-model="isCommandMode"
class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg block">
<option selected :value="false">询问模式</option>
<option :value="true">指令模式</option>
</select>
</form>
<Button :abortable="true" :isLoading="isLoading" :loadingContent="'中止'" :submitContent="'发送'" <Button :abortable="true" :isLoading="isLoading" :loadingContent="'中止'" :submitContent="'发送'"
:handleClick="() => handleSendClick(inputMessage, isCommandMode)" /> :handleClick="() => handleSendClick(inputMessage, isCommandMode)" />
<div class="flex ps-0 space-x-1 rtl:space-x-reverse sm:ps-2">
<button type="button"
class="inline-flex justify-center items-center p-2 text-gray-500 rounded-sm cursor-pointer hover:text-gray-900 hover:bg-gray-100 ">
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 12 20">
<path stroke="currentColor" stroke-linejoin="round" stroke-width="2"
d="M1 6v8a5 5 0 1 0 10 0V4.5a3.5 3.5 0 1 0-7 0V13a2 2 0 0 0 4 0V6" />
</svg>
<span class="sr-only">Attach file</span>
</button>
<button type="button"
class="inline-flex justify-center items-center p-2 text-gray-500 rounded-sm cursor-pointer hover:text-gray-900 hover:bg-gray-100 ">
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 20 18">
<path
d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
</svg>
<span class="sr-only">Upload image</span>
</button>
</div>
</div> </div>
</div> </div>
</form> </form>
</div> </div>

1
frontend/src/components/Button.vue
View File

@@ -10,7 +10,6 @@
'px-5': true, 'px-5': true,
'py-2.5': true, 'py-2.5': true,
'text-center': true, 'text-center': true,
'me-2': true,
'inline-flex': true, 'inline-flex': true,
'items-center': true, 'items-center': true,
'bg-blue-700 hover:bg-blue-800': !isLoading, 'bg-blue-700 hover:bg-blue-800': !isLoading,

4
frontend/src/components/Dashboard.vue
View File

@@ -9,10 +9,8 @@ import Assistant from "./Assistant.vue";
<Headbar></Headbar> <Headbar></Headbar>
<Sidebar> <Sidebar>
</Sidebar> </Sidebar>
<article class="ml-64 mr-96 scroll-auto overflow-auto"> <article class="flex flex-row ml-44 mr-64 scroll-auto overflow-auto mt-14">
<RouterView></RouterView> <RouterView></RouterView>
</article> </article>
<div class="fixed top-0 right-0 w-1/5 border-gray-200 border-l">
<Assistant></Assistant> <Assistant></Assistant>
</div>
</template> </template>

2
frontend/src/components/Sidebar.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<aside id="logo-sidebar" <aside id="logo-sidebar"
class="fixed top-0 left-0 z-30 w-64 min-h-screen overflow-y-auto pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 " class="fixed top-0 left-0 z-30 px-1 w-44 min-h-screen overflow-y-auto pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 "
aria-label="Sidebar"> aria-label="Sidebar">
<div class="h-full px-3 pb-4 overflow-y-auto bg-white "> <div class="h-full px-3 pb-4 overflow-y-auto bg-white ">
<ul class="space-y-2 font-medium"> <ul class="space-y-2 font-medium">

13
frontend/src/router/guards.ts
View File

@@ -2,6 +2,7 @@ import useUserStore from "@/composables/store/useUserStore";
import type { NavigationGuard, Router } from "vue-router"; import type { NavigationGuard, Router } from "vue-router";
import type { RouteMeta } from "../types/router"; import type { RouteMeta } from "../types/router";
import { RoutePath } from "./constants"; import { RoutePath } from "./constants";
import useAlertStore from "@/composables/store/useAlertStore";
export const authGuard: NavigationGuard = (to) => { export const authGuard: NavigationGuard = (to) => {
const userStore = useUserStore(); const userStore = useUserStore();
@@ -18,13 +19,17 @@ export const authGuard: NavigationGuard = (to) => {
export const permissionGuard: NavigationGuard = (to) => { export const permissionGuard: NavigationGuard = (to) => {
const userStore = useUserStore(); const userStore = useUserStore();
const { showAlert } = useAlertStore();
const routeMeta: RouteMeta = to.meta; const routeMeta: RouteMeta = to.meta;
if (routeMeta.hasPermission) { if (routeMeta.hasPermission) {
const hasPermission = userStore.permissionCodes?.includes( const hasPermission = userStore.permissionCodes?.includes(
routeMeta.hasPermission, routeMeta.hasPermission,
); );
if (!hasPermission) { if (!hasPermission) {
console.error(`您没有请求页面的相关权限：${to.path}`); showAlert({
content: `没有访问页面所需的 ${routeMeta.hasPermission} 权限`,
level: "error",
});
return false; return false;
} }
} }
@@ -32,11 +37,15 @@ export const permissionGuard: NavigationGuard = (to) => {
export const roleGuard: NavigationGuard = (to) => { export const roleGuard: NavigationGuard = (to) => {
const userStore = useUserStore(); const userStore = useUserStore();
const { showAlert } = useAlertStore();
const routeMeta: RouteMeta = to.meta; const routeMeta: RouteMeta = to.meta;
if (routeMeta.hasRole) { if (routeMeta.hasRole) {
const hasRole = userStore.roleCodes?.includes(routeMeta.hasRole); const hasRole = userStore.roleCodes?.includes(routeMeta.hasRole);
if (!hasRole) { if (!hasRole) {
console.error(`您没有请求页面的相关角色：${to.path}`); showAlert({
content: `没有访问页面所需的 ${routeMeta.hasRole} 角色`,
level: "error",
});
return false; return false;
} }
} }

2
frontend/src/views/UserView.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="px-4 pt-6 xl:grid-cols-3 xl:gap-4 sm:rounded-lg mt-14"> <div class="px-4 pt-6 xl:grid-cols-3 xl:gap-4 sm:rounded-lg">
<div class="mb-4 col-span-full"> <div class="mb-4 col-span-full">
<Breadcrumbs :names="['用户管理']" /> <Breadcrumbs :names="['用户管理']" />
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl ">用户管理</h1> <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl ">用户管理</h1>