TanWenyan/leaudit-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'PingChuan' into shiy-temp

Browse Source 
# Conflicts:
#	app/components/chat/index.tsx
#	app/routes/chat-with-llm._index.tsx
#	app/styles/components/chat-with-llm/index.css
#	vite.config.ts
This commit is contained in:
yorn
2025-06-09 15:05:06 +08:00
parent 1002ddffd0 13fb6ce79f
commit 880e68d92c
80 changed files with 27055 additions and 82030 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/chat/index.tsx
+32 -6
View File
@@ -22,6 +22,7 @@ const { Content } = Layout;
export default function Chat() {
// 侧边栏状态
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
const [isMobile, setIsMobile] = useState(false);
const {
token: { colorBgContainer, borderRadiusLG },
} = theme.useToken();
@@ -466,6 +467,23 @@ export default function Chat() {
}
}, [chatList]);
// 检查屏幕尺寸
useEffect(() => {
const checkScreenSize = () => {
setIsMobile(window.innerWidth < 992);
};
// 初始检查
checkScreenSize();
// 监听窗口大小变化
window.addEventListener('resize', checkScreenSize);
return () => {
window.removeEventListener('resize', checkScreenSize);
};
}, []);
// 如果应用不可用，显示错误页面
if (appUnavailable) {
return (
@@ -504,7 +522,15 @@ export default function Chat() {
const conversationIntroduction = currConversationInfo?.introduction || '';
return (
<Layout style={{ height: '100%', minHeight: '100%'}}>
<Layout style={{ height: '100%', display: 'flex', flexDirection: 'row' }}>
{/* 移动端遮罩层 */}
{!sidebarCollapsed && isMobile && (
<div
className="fixed inset-0 bg-black bg-opacity-50 z-[999]"
onClick={handleSidebarToggle}
/>
)}
{/* 侧边栏 */}
<ChatSidebar
ref={sidebarRef}
@@ -519,18 +545,18 @@ export default function Chat() {
/>
{/* 主内容区域 */}
<Layout>
<Layout style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
<Content
style={{
background: colorBgContainer,
display: 'flex',
flexDirection: 'column',
height: '100%',
minHeight: '100%',
flex: 1,
minHeight: 0,
}}
>
{/* 聊天区域 */}
<div className="flex-1 overflow-hidden">
<div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
<div
ref={chatListDomRef}
className="h-full overflow-y-auto px-4 py-4 space-y-2"
@@ -556,7 +582,7 @@ export default function Chat() {
</div>
{/* 输入区域 */}
<div className="flex-shrink-0 bg-white" style={{ minHeight: '120px' }}>
<div className="flex-shrink-0 bg-white">
<ChatInput
onSendMessage={handleSendMessage}
disabled={isResponding}
app/routes/chat-with-llm._index.tsx
+4 -5
View File
@@ -35,12 +35,11 @@ export const meta: MetaFunction = () => {
*/
export default function ChatWithLLMIndex() {
return (
<div className="flex-1 chat-container" style={{
height: 'calc(100vh - 80px)',
// height: '100vh',
<div className="chat-container" style={{
height: '93vh', // 使用视口高度的90%
borderRadius: '0.5rem',
marginTop: '20px',
marginBottom: '-20px'
marginBottom: '-20px',
marginTop: '2vh',
}}>
<Chat />
</div>
app/services/dify-client.server.ts
+14 -7
View File
@@ -1,8 +1,14 @@
import { CHAT_CONFIG } from '../config/chat';
// 获取环境变量的服务端函数
const getServerEnvVar = (name: string, defaultValue: string = '') => {
return process.env[name] || defaultValue;
const value = process.env[name] || defaultValue;
// console.log(`🌐 [DifyClient] 读取环境变量 ${name}:`, {
// hasValue: !!process.env[name],
// value: process.env[name] ? `${process.env[name].substring(0, 20)}...` : 'undefined',
// usingDefault: !process.env[name]
// });
return value;
};
// Dify API 客户端配置
@@ -17,11 +23,12 @@ const DIFY_CONFIG = {
})(),
};
// console.log('🔧 Dify Client Config:', {
// apiUrl: DIFY_CONFIG.API_URL,
// appId: DIFY_CONFIG.APP_ID,
// hasApiKey: !!DIFY_CONFIG.API_KEY
// });
console.log('🔧 Dify Client Config:', {
apiUrl: DIFY_CONFIG.API_URL,
appId: DIFY_CONFIG.APP_ID,
hasApiKey: !!DIFY_CONFIG.API_KEY,
configComplete: !!(DIFY_CONFIG.API_URL && DIFY_CONFIG.APP_ID && DIFY_CONFIG.API_KEY)
});
// 基础请求函数
const difyFetch = async (endpoint: string, options: RequestInit = {}) => {
app/styles/components/chat-with-llm/chat-input.css
+53 -3
View File
@@ -29,7 +29,8 @@
.chat-input-textarea-wrapper {
flex: 1;
height: 10vh;
min-height: 40px;
max-height: 120px;
margin: 0 8px;
}
@@ -39,6 +40,8 @@
box-shadow: none !important;
padding: 8px 0 !important;
background: transparent !important;
min-height: 40px;
max-height: 120px;
}
.chat-input-button {
@@ -55,13 +58,43 @@
}
/* 响应式设计 */
@media (max-width: 1200px) {
.chat-input-container {
padding: 14px 18px;
}
.chat-input-content {
padding: 10px;
}
.chat-input-textarea-wrapper {
margin: 0 6px;
}
}
@media (max-width: 768px) {
.chat-input-container {
padding: 12px 16px;
}
.chat-input-content {
padding: 10px;
padding: 8px;
}
.chat-input-textarea-wrapper {
margin: 0 4px;
min-height: 36px;
max-height: 100px;
}
.chat-input-textarea {
min-height: 36px;
max-height: 100px;
font-size: 14px;
}
.chat-input-box {
border-radius: 24px;
}
}
@@ -71,7 +104,24 @@
}
.chat-input-content {
padding: 8px;
padding: 6px;
}
.chat-input-textarea-wrapper {
margin: 0 2px;
min-height: 32px;
max-height: 80px;
}
.chat-input-textarea {
min-height: 32px;
max-height: 80px;
font-size: 13px;
padding: 6px 0 !important;
}
.chat-input-box {
border-radius: 20px;
}
}
app/styles/components/chat-with-llm/chat-message.css
+56 -8
View File
@@ -150,19 +150,46 @@
}
/* 响应式设计 */
@media (max-width: 1200px) {
.message-card {
max-width: 90%;
}
.message-card.user {
margin-right: 20px;
}
.message-card.assistant {
margin-left: 20px;
}
}
@media (max-width: 768px) {
.message-card {
max-width: 95%;
}
.message-card.user {
margin-right: 30px;
/* 平板上减少右边距 */
margin-right: 15px;
}
.message-card.assistant {
margin-left: 30px;
/* 平板上减少左边距 */
margin-left: 15px;
}
.message-card .ant-card .ant-card-body {
padding: 10px 14px !important;
font-size: 14px;
}
.feedback-buttons {
margin-top: 8px;
gap: 6px;
}
.question-button {
padding: 6px 10px;
font-size: 13px;
}
}
@@ -172,12 +199,33 @@
}
.message-card.user {
margin-right: 15px;
/* 手机上进一步减少右边距 */
margin-right: 8px;
}
.message-card.assistant {
margin-left: 15px;
/* 手机上进一步减少左边距 */
margin-left: 8px;
}
.message-card .ant-card .ant-card-body {
padding: 8px 12px !important;
font-size: 13px;
line-height: 1.3 !important;
}
.message-timestamp {
font-size: 11px;
margin-top: 6px;
gap: 8px;
}
.suggested-questions {
margin-top: 12px;
}
.question-button {
margin-bottom: 6px;
margin-right: 6px;
padding: 5px 8px;
font-size: 12px;
}
}
app/styles/components/chat-with-llm/index.css
+36 -22
View File
@@ -2,17 +2,30 @@
/* 聊天容器 - 自适应布局 */
.chat-container {
/* height: 100%; */
/* min-height: 100%; */
width: 100%;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 0;
/* 允许flex子元素收缩 */
background: #fff;
overflow: hidden;
position: relative;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 20px auto;
display: flex;
}
/* 可调整高度的聊天容器 */
.chat-container-adjustable {
/* display: flex; */
flex-direction: column;
width: 100%;
background: #fff;
overflow: hidden;
position: relative;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* 高度将通过内联样式设置 */
}
/* 聊天头部 */
@@ -38,6 +51,8 @@
/* 聊天消息列表容器 */
.chat-messages {
flex: 1;
min-height: 0;
/* 允许flex子元素收缩 */
overflow-y: auto;
overflow-x: hidden;
padding: 20px;
@@ -126,18 +141,6 @@
margin-bottom: 0;
}
/* 确保聊天容器在主内容区域中占满全部空间 */
.main-content .chat-container {
height: calc(89vh - 0px);
/* 减去任何顶部导航栏的高度 */
}
/* 如果有面包屑导航，需要调整高度 */
.main-content .breadcrumb+.chat-container {
height: calc(100vh - 60px);
/* 减去面包屑的高度 */
}
/* 侧边栏滚动区域样式 */
.h-full.overflow-y-auto::-webkit-scrollbar {
width: 6px;
@@ -165,14 +168,25 @@
}
/* 响应式设计 */
@media (max-width: 768px) {
@media (max-width: 1200px) {
.chat-container {
height: 100vh;
border-radius: 4px;
}
.chat-messages {
padding: 16px;
}
}
@media (max-width: 768px) {
.chat-container {
border-radius: 0;
box-shadow: none;
}
.chat-messages {
padding: 12px;
}
.chat-header {
padding: 0 16px;
@@ -186,15 +200,15 @@
@media (max-width: 480px) {
.chat-messages {
padding: 12px;
padding: 8px;
}
.chat-welcome {
padding: 20px 16px;
padding: 20px 12px;
}
.chat-welcome h3 {
font-size: 20px;
font-size: 18px;
}
.chat-welcome p {
app/styles/components/chat-with-llm/sidebar.css
+75 -15
View File
@@ -68,25 +68,85 @@
/* ========== 响应式设计 ========== */
/* 平板和手机端侧边栏 - 作用域：屏幕宽度小于768px时的侧边栏 */
@media (max-width: 768px) {
/* 大屏幕 - 1200px以上 */
@media (min-width: 1200px) {
.ant-layout-sider {
position: fixed !important;
/* 固定定位 */
left: 0;
/* 贴左边 */
top: 0;
/* 贴顶部 */
bottom: 0;
/* 贴底部 */
z-index: 1000;
/* 层级 */
position: relative !important;
}
}
/* 中等屏幕 - 992px到1199px */
@media (max-width: 1199px) and (min-width: 992px) {
.ant-layout-sider {
width: 200px !important;
min-width: 200px !important;
max-width: 200px !important;
}
/* 折叠状态的侧边栏 - 作用域：手机端折叠时隐藏侧边栏 */
.ant-layout-sider.ant-layout-sider-collapsed {
left: -200px;
/* 向左移出屏幕 */
width: 60px !important;
min-width: 60px !important;
max-width: 60px !important;
}
}
/* 平板屏幕 - 768px到991px */
@media (max-width: 991px) and (min-width: 768px) {
.ant-layout-sider {
position: fixed !important;
left: 0;
top: 0;
bottom: 0;
z-index: 1000;
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
transform: translateX(0);
transition: transform 0.3s ease;
}
.ant-layout-sider.ant-layout-sider-collapsed {
transform: translateX(-100%);
}
}
/* 手机端 - 768px以下 */
@media (max-width: 767px) {
.ant-layout-sider {
position: fixed !important;
left: 0;
top: 0;
bottom: 0;
z-index: 1000;
width: 280px !important;
min-width: 280px !important;
max-width: 280px !important;
transform: translateX(0);
transition: transform 0.3s ease;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}
.ant-layout-sider.ant-layout-sider-collapsed {
transform: translateX(-100%);
}
/* 手机端菜单项调整 */
.chat-sidebar-menu .ant-menu-item {
padding: 12px 16px;
margin: 6px 0;
}
.chat-sidebar-menu .ant-menu-item .ant-menu-title-content span {
font-size: 16px;
}
}
/* 小手机 - 480px以下 */
@media (max-width: 479px) {
.ant-layout-sider {
width: 100vw !important;
min-width: 100vw !important;
max-width: 100vw !important;
}
}
app/styles/components/chat-with-llm/thought-process.css
+1 -1
View File
@@ -25,7 +25,7 @@
}
.thought-process-collapsed {
max-height: 150px;
/* max-height: 150px; */
overflow: hidden;
position: relative;
}