xieyinlu/zhilu-admin
1
0
Fork 0
mirror of https://github.com/ccmjga/zhilu-admin synced 2026-03-14 05:33:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix ai

Browse Source
This commit is contained in:
Chuck1sn
2025-05-21 11:49:15 +08:00
parent d12862ea39
commit 3bc65d2df4
9 changed files with 209 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/package.json
View File

@@ -51,8 +51,6 @@
"vue-tsc": "^2.2.8"
},
"msw": {
"workerDirectory": [
"public"
]
"workerDirectory": ["public"]
}
}

11
frontend/src/api/mocks/aiHandlers.ts Normal file
View File

@@ -0,0 +1,11 @@
import { faker } from "@faker-js/faker";
import { http, HttpResponse } from "msw";
export default [
http.post("/ai/chat", () => {
const response = HttpResponse.json({
message: faker.lorem.sentence(1000),
});
return response;
}),
];

2
frontend/src/api/mocks/setup.ts
View File

@@ -6,6 +6,7 @@ import roleHandlers from "./roleHandlers";
import userHandlers from "./userHandlers";
import departmentHandlers from "./departmentHandlers";
import positionHandlers from "./positionHandlers";
import aiHandlers from "./aiHandlers";
export const worker = setupWorker(
...userHandlers,
...authHandlers,
@@ -14,4 +15,5 @@ export const worker = setupWorker(
...jobHandlers,
...departmentHandlers,
...positionHandlers,
...aiHandlers,
);

33
frontend/src/api/schema/openapi.json
View File

@@ -691,6 +691,39 @@
}
}
},
"/ai/chat": {
"post": {
"tags": [
"ai-controller"
],
"operationId": "chat",
"requestBody": {
"content": {
"application/json": {
"schema": {
"type": "string"
}
}
},
"required": true
},
"responses": {
"200": {
"description": "OK",
"content": {
"text/event-stream": {
"schema": {
"type": "array",
"items": {
"type": "string"
}
}
}
}
}
}
}
},
"/scheduler/page-query": {
"get": {
"tags": [

40
frontend/src/api/types/schema.d.ts vendored
View File

@@ -340,6 +340,22 @@ export interface paths {
patch?: never;
trace?: never;
};
"/ai/chat": {
parameters: {
query?: never;
header?: never;
path?: never;
cookie?: never;
};
get?: never;
put?: never;
post: operations["chat"];
delete?: never;
options?: never;
head?: never;
patch?: never;
trace?: never;
};
"/scheduler/page-query": {
parameters: {
query?: never;
@@ -1333,6 +1349,30 @@ export interface operations {
};
};
};
chat: {
parameters: {
query?: never;
header?: never;
path?: never;
cookie?: never;
};
requestBody: {
content: {
"application/json": string;
};
};
responses: {
/** @description OK */
200: {
headers: {
[name: string]: unknown;
};
content: {
"text/event-stream": string[];
};
};
};
};
pageQuery: {
parameters: {
query: {

28
frontend/src/components/Button.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<button
:disabled="disabled"
@click="handleClick"
type="button"
:class="[
'text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 dark:bg-blue-600 inline-flex items-center',
disabled ? `${disabledStyle} cursor-not-allowed` : 'bg-blue-700 hover:bg-blue-800 '
]"
>
<LoadingIcon v-if="isLoading" />
{{isLoading ? loadingContent : submitContent}}
</button>
</template>
<script setup lang="ts">
import LoadingIcon from "./icons/LoadingIcon.vue";
const { loadingContent, submitContent, isLoading, disabledStyle, disabled } =
defineProps<{
loadingContent: string;
submitContent: string;
isLoading: boolean;
disabledStyle: string;
disabled: boolean;
handleClick: (event: Event) => void;
}>();
</script>

6
frontend/src/components/icons/LoadingIcon.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<svg aria-hidden="true" role="status" class="inline w-4 h-4 me-3 text-white animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB"/>
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"/>
</svg>
</template>

31
frontend/src/composables/ai/useAiChat.ts Normal file
View File

@@ -0,0 +1,31 @@
import { ref } from "vue";
import client from "../../api/client";
export const useAiChat = () => {
const messages = ref<string[]>([]);
const isLoading = ref(false);
const chat = async (message: string) => {
isLoading.value = true;
try {
const { response } = await client.POST("/ai/chat", {
body: message,
parseAs: "stream",
});
const reader = response.body?.getReader();
if (reader) {
const decoder = new TextDecoder();
while (true) {
const { done, value } = await reader.read();
if (done) break;
messages.value.push(decoder.decode(value, { stream: true }));
console.log(decoder.decode(value));
}
return;
}
} finally {
isLoading.value = false;
}
};
return { messages, chat, isLoading };
};

90
frontend/src/views/AiChatView.vue
View File

@@ -1,50 +1,30 @@
<template>
<div class="flex flex-col w-1/2 mx-auto box-border pt-14 min-h-screen">
<div class="flex flex-col px-80 box-border pt-14 min-h-screen max-h-screen overflow-auto" ref="chatContainer">
<div class="flex flex-col gap-y-5 flex-1 pt-14">
<div class="flex items-start gap-2.5 ">
<li v-for="chatElement in chatElements" :key="chatElement.content" :dir="chatElement.isUser ? 'rtl' : 'ltr'"
class="flex items-start gap-2.5">
<img class="w-8 h-8 rounded-full" src="/trump.jpg" alt="Jese image">
<div
class="flex flex-col leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700">
<div class="flex items-center space-x-2 rtl:space-x-reverse">
<span class="text-sm font-semibold text-gray-900 dark:text-white">Bonnie Green</span>
<span class="text-sm font-normal text-gray-500 dark:text-gray-400">11:46</span>
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{ user.username }}</span>
</div>
<p class="text-sm font-normal py-2.5 text-gray-900 dark:text-white">That's awesome. I think our users will
really
appreciate the improvements.</p>
<span class="text-sm font-normal text-gray-500 dark:text-gray-400">Delivered</span>
<p class="text-base font-normal py-2.5 text-gray-900 dark:text-white">{{ chatElement.content }}</p>
</div>
</div>
<div dir="rtl" class="flex items-start gap-2.5">
<img class="w-8 h-8 rounded-full" src="/trump.jpg" alt="Jese image">
<div
class="flex flex-col leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700">
<div class="flex items-center space-x-2">
<span class="text-sm font-semibold text-gray-900 dark:text-white">Bonnie Green</span>
<span class="text-sm font-normal text-gray-500 dark:text-gray-400">11:46</span>
</div>
<p dir="ltr" class="text-sm font-normal py-2.5 text-gray-900 dark:text-white">That's awesome. I think our
users
will
really appreciate the improvements.</p>
<span class="text-sm font-normal text-gray-500 dark:text-gray-400">Delivered</span>
</div>
</div>
</li>
</div>
<form class="flex-none pb-2">
<div class="w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
<form class="sticky bottom-4 mt-14">
<div class="w-full border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
<div class="px-4 py-2 bg-white rounded-t-lg dark:bg-gray-800">
<label for="comment" class="sr-only">Your comment</label>
<textarea id="comment" rows="4"
class="w-full px-0 text-sm text-gray-900 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400"
<label for="comment" class="sr-only"></label>
<textarea id="comment" rows="3" v-model="inputMessage"
class="w-full px-0 text-gray-900 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400"
placeholder="给知路智能体发送消息" required></textarea>
</div>
<div class="flex items-center justify-between px-3 py-2 border-t dark:border-gray-600 border-gray-200">
<button type="submit"
class="inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800">
Post comment
</button>
<Button :disabled="inputMessage === ''" :isLoading="isLoading" :loadingContent="'发送中...'"
:submitContent="'发送'" :disabledStyle="'bg-blue-400'" :handleClick="handleSendClick" />
<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 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
@@ -79,3 +59,47 @@
</form>
</div>
</template>
<script setup lang="ts">
import { computed, nextTick, ref, watch } from "vue";
import Button from "../components/Button.vue";
import { useAiChat } from "../composables/ai/useAiChat";
import useUserStore from "../composables/store/useUserStore";
const { messages, chat, isLoading } = useAiChat();
const { user } = useUserStore();
const inputMessage = ref("");
const chatContainer = ref<HTMLElement | null>(null);
const chatElements = computed(() => {
return messages.value.map((message, index) => {
return {
content: message,
username: index % 2 === 0 ? user.username : "DeepSeek",
isUser: index % 2 === 0,
};
});
});
watch(
chatElements,
async () => {
await nextTick();
scrollToBottom();
},
{ deep: true },
);
// 滚动到底部的函数
const scrollToBottom = () => {
if (chatContainer.value) {
chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
}
};
const handleSendClick = async (event: Event) => {
await chat(inputMessage.value);
inputMessage.value = "";
scrollToBottom();
};
</script>