mirror of
https://github.com/ccmjga/zhilu-admin
synced 2026-03-14 05:33:42 +08:00
fix side flow
This commit is contained in:
ccmjga
@@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<div class="h-[calc(100vh-3.5rem)] flex flex-col box-border p-3 overflow-y-auto w-72 border-gray-200 border-l"
|
||||
<div
|
||||
class="h-[calc(100vh-3.5rem)] flex flex-col box-border p-3 overflow-y-auto w-80 overflow-x-hidden border-gray-200 border-l"
|
||||
ref="chatContainer">
|
||||
<div class="flex flex-col gap-y-5 flex-1 pb-2">
|
||||
<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 max-w-full break-words' : 'flex-row']">
|
||||
<img class="w-8 h-8 rounded-full" :src="chatElement.isUser ? '/java.svg' : '/trump.jpg'" alt="avatar">
|
||||
<div
|
||||
:class="['flex flex-col leading-1.5 p-4 border-gray-200 rounded-e-xl rounded-es-xl ', chatElement.isUser ? 'bg-blue-100' : 'bg-gray-100']">
|
||||
<div class="flex items-center space-x-2 rtl:space-x-reverse">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-sm font-semibold text-gray-900 ">{{ chatElement.username }}</span>
|
||||
<LoadingIcon :textColor="'text-gray-900'"
|
||||
v-if="isLoading && !chatElement.isUser && chatElement.content === ''" />
|
||||
@@ -41,7 +42,8 @@
|
||||
<div class="px-4 py-2 bg-white rounded-t-lg">
|
||||
<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 focus:ring-0 " placeholder="发送消息" required></textarea>
|
||||
class="w-full px-0 text-gray-900 bg-white border-0 focus:ring-0"
|
||||
:placeholder="isCommandMode ? '输入创建用户/删除用户试试看' : '随便聊聊'" required></textarea>
|
||||
</div>
|
||||
<div class="flex justify-between px-2 py-2 border-t border-gray-200">
|
||||
<form>
|
||||
|
||||
@@ -1,21 +1,26 @@
|
||||
<template>
|
||||
<Headbar :changeAssistantVisible="changeAssistantVisible"></Headbar>
|
||||
<Sidebar>
|
||||
</Sidebar>
|
||||
<div class="flex flex-row h-[calc(100vh-3.5rem)] mt-14">
|
||||
<article class="flex-1 ml-44 overflow-y-auto">
|
||||
<RouterView></RouterView>
|
||||
</article>
|
||||
<Assistant v-if="isAssistantVisible"></Assistant>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { RouterView } from "vue-router";
|
||||
import Headbar from "./Headbar.vue";
|
||||
import Sidebar from "./Sidebar.vue";
|
||||
import Assistant from "./Assistant.vue";
|
||||
import { ref } from "vue";
|
||||
|
||||
const isAssistantVisible = ref(false);
|
||||
|
||||
const changeAssistantVisible = () => {
|
||||
isAssistantVisible.value = !isAssistantVisible.value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Headbar></Headbar>
|
||||
<Sidebar>
|
||||
</Sidebar>
|
||||
<!-- 主内容区域 -->
|
||||
<div class="flex flex-row h-[calc(100vh-3.5rem)] mt-14"> <!-- 减去Headbar高度 -->
|
||||
<!-- 文章内容区域 -->
|
||||
<article class="flex-1 ml-44 overflow-y-auto">
|
||||
<RouterView></RouterView>
|
||||
</article>
|
||||
<Assistant></Assistant>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<nav class="fixed top-0 z-40 w-full bg-white border-b border-gray-200 ">
|
||||
<nav class="fixed top-0 z-40 w-full bg-white border-b border-gray-200">
|
||||
<div class="px-3 py-3 lg:px-5 lg:pl-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center justify-start rtl:justify-end">
|
||||
@@ -31,19 +31,10 @@
|
||||
</span>
|
||||
<span class="text-sm py-0.5 px-2 font-medium">0.1k</span>
|
||||
</a>
|
||||
<span class="flex space-x-2">
|
||||
<svg class="w-6 h-6 text-gray-500" fill="currentColor" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z">
|
||||
</path>
|
||||
</svg>
|
||||
<svg class="w-6 h-6 text-gray-500" fill="currentColor" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z">
|
||||
</path>
|
||||
</svg>
|
||||
<span class="flex space-x-3">
|
||||
<button class="cursor-pointer" @click="changeAssistantVisible">
|
||||
<AiChatIcon class="w-6 h-6 text-gray-600" />
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<div class="flex items-center ms-3">
|
||||
@@ -107,9 +98,14 @@ import { onMounted, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import useUserAuth from "../composables/auth/useUserAuth";
|
||||
import { RouteName, RoutePath } from "../router/constants";
|
||||
import AiChatIcon from "./icons/AiChatIcon.vue";
|
||||
|
||||
const userDropDownMenu = ref<DropdownInterface>();
|
||||
|
||||
const { changeAssistantVisible } = defineProps<{
|
||||
changeAssistantVisible: () => void;
|
||||
}>();
|
||||
|
||||
onMounted(() => {
|
||||
initFlowbite();
|
||||
const $dropdownUser = document.getElementById("dropdown-user");
|
||||
|
||||
@@ -71,11 +71,6 @@ const menuItems = [
|
||||
path: `${RoutePath.DASHBOARD}/${RoutePath.SCHEDULERVIEW}`,
|
||||
icon: SchedulerIcon,
|
||||
},
|
||||
{
|
||||
title: "AI 对话",
|
||||
path: `${RoutePath.DASHBOARD}/${RoutePath.AICHATVIEW}`,
|
||||
icon: AiChatIcon,
|
||||
},
|
||||
{
|
||||
title: "大模型管理",
|
||||
path: `${RoutePath.DASHBOARD}/${RoutePath.LLMCONFIGVIEW}`,
|
||||
|
||||
@@ -1,3 +1,32 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot-icon lucide-bot"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot-icon lucide-bot ai-breath">
|
||||
<path d="M12 8V4H8" />
|
||||
<rect width="16" height="12" x="4" y="8" rx="2" />
|
||||
<path d="M2 14h2" />
|
||||
<path d="M20 14h2" />
|
||||
<path d="M15 13v2" />
|
||||
<path d="M9 13v2" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ai-breath {
|
||||
animation: ai-breath 1.8s infinite ease-in-out;
|
||||
filter: drop-shadow(0 0 6px #60a5fa);
|
||||
}
|
||||
|
||||
@keyframes ai-breath {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
filter: drop-shadow(0 0 6px #60a5fa) brightness(1);
|
||||
stroke: #60a5fa;
|
||||
}
|
||||
|
||||
50% {
|
||||
filter: drop-shadow(0 0 16px #2563eb) brightness(1.3);
|
||||
stroke: #2563eb;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -200,7 +200,7 @@
|
||||
d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm0 16a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm1-5.034V12a1 1 0 0 1-2 0v-1.418a1 1 0 0 1 1.038-.999 1.436 1.436 0 0 0 1.488-1.441 1.501 1.501 0 1 0-3-.116.986.986 0 0 1-1.037.961 1 1 0 0 1-.96-1.037A3.5 3.5 0 1 1 11 11.466Z" />
|
||||
</svg>
|
||||
<div data-popover id="chart-info" role="tooltip"
|
||||
class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 w-72 ">
|
||||
class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 w-72 ">
|
||||
<div class="p-3 space-y-2">
|
||||
<h3 class="font-semibold text-gray-900 ">Activity growth - Incremental</h3>
|
||||
<p>Report helps navigate cumulative growth of community activities. Ideally, the chart should have a
|
||||
|
||||
Reference in New Issue
Block a user