样式修改
This commit is contained in:
@@ -9,19 +9,20 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0",
|
||||
"pinia": "^2.2.8",
|
||||
"element-plus": "^2.8.6",
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"@vueuse/core": "^11.3.0",
|
||||
"axios": "^1.7.9"
|
||||
"axios": "^1.7.9",
|
||||
"element-plus": "^2.8.6",
|
||||
"lucide-vue-next": "^0.561.0",
|
||||
"pinia": "^2.2.8",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@module-federation/vite": "^1.9.3",
|
||||
"@types/node": "^22.0.0",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"@vitejs/plugin-vue-jsx": "^4.1.1",
|
||||
"@module-federation/vite": "^1.9.3",
|
||||
"typescript": "^5.7.2",
|
||||
"vite": "^6.0.3",
|
||||
"vue-tsc": "^2.2.0"
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 400 B |
@@ -1,13 +1,20 @@
|
||||
// ==================== 品牌色变量 ====================
|
||||
$brand-color: #0055AA;
|
||||
$brand-color-light: #EBF5FF;
|
||||
$brand-color-hover: #004488;
|
||||
|
||||
.sidebar-layout {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
font-family: 'Inter', 'Noto Sans SC', sans-serif;
|
||||
}
|
||||
|
||||
// ==================== 侧边栏（内层子导航样式）====================
|
||||
// ==================== 1级侧边栏（全局导航样式）====================
|
||||
.sidebar {
|
||||
width: 180px;
|
||||
width: 256px;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
@@ -15,13 +22,15 @@
|
||||
color: #333;
|
||||
flex-shrink: 0;
|
||||
transition: width 0.3s ease;
|
||||
border-right: 1px solid #e4e7ed;
|
||||
border-right: 1px solid #f1f5f9;
|
||||
z-index: 50;
|
||||
|
||||
&.collapsed {
|
||||
width: 64px;
|
||||
width: 80px;
|
||||
overflow: visible;
|
||||
|
||||
.sidebar-header {
|
||||
padding: 16px 12px;
|
||||
padding: 16px;
|
||||
justify-content: center;
|
||||
|
||||
.logo {
|
||||
@@ -29,65 +38,124 @@
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
position: static;
|
||||
margin-left: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
margin: 0 12px;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 折叠状态下的 tooltip
|
||||
&:hover::after {
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
left: calc(100% + 12px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: #1e293b;
|
||||
color: #fff;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
z-index: 100;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.user-section {
|
||||
justify-content: center;
|
||||
padding: 16px 12px;
|
||||
padding: 16px;
|
||||
|
||||
.user-info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user-more {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-divider {
|
||||
margin: 8px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 侧边栏头部
|
||||
.sidebar-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
height: 64px;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
color: #909399;
|
||||
color: #94a3b8;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(124, 58, 237, 0.1);
|
||||
color: #7c3aed;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
.logo-img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
color: #1e293b;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
// 新建按钮
|
||||
.new-chat-btn {
|
||||
margin: 0 16px 8px;
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background: $brand-color-light;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: $brand-color;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: darken($brand-color-light, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -95,65 +163,143 @@
|
||||
.nav-menu {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 0;
|
||||
padding: 8px 12px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
// 导航分隔线
|
||||
.nav-divider {
|
||||
height: 1px;
|
||||
background: #f1f5f9;
|
||||
margin: 8px 4px;
|
||||
}
|
||||
|
||||
// 导航分组标题
|
||||
.nav-group-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 0;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 4px;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: #606266;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: rgba(124, 58, 237, 0.1);
|
||||
color: #7c3aed;
|
||||
background: $brand-color-light;
|
||||
color: $brand-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(124, 58, 237, 0.15);
|
||||
color: #7c3aed;
|
||||
border-right: 3px solid #7c3aed;
|
||||
background: $brand-color;
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 12px rgba($brand-color, 0.25);
|
||||
font-weight: 500;
|
||||
|
||||
.el-icon {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
}
|
||||
|
||||
// 用户信息
|
||||
.user-section {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
// 添加智能体按钮
|
||||
.add-agent-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 16px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
transition: all 0.2s ease;
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(124, 58, 237, 0.05);
|
||||
background: #f8fafc;
|
||||
color: #64748b;
|
||||
|
||||
.add-icon {
|
||||
border-color: #64748b;
|
||||
}
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px dashed #94a3b8;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
.el-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 用户信息区域
|
||||
.user-section {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
background: #f8fafc;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background: #f1f5f9;
|
||||
|
||||
.user-name {
|
||||
color: $brand-color;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-wrapper {
|
||||
@@ -163,16 +309,55 @@
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
|
||||
img, .el-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 2px #fff;
|
||||
object-fit: cover;
|
||||
background: #fff;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
// 在线状态指示器
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #22c55e;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
color: #374151;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.user-more {
|
||||
color: #94a3b8;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #64748b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -181,7 +366,7 @@
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
background: #f8fafc;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -200,15 +385,15 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
background: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.iframe-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.content-iframe {
|
||||
@@ -228,7 +413,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #7c3aed;
|
||||
color: $brand-color;
|
||||
font-size: 14px;
|
||||
z-index: 10;
|
||||
|
||||
@@ -240,15 +425,15 @@
|
||||
// ==================== 响应式 ====================
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 64px;
|
||||
width: 80px;
|
||||
|
||||
&:not(.collapsed) {
|
||||
width: 180px;
|
||||
width: 256px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -8,10 +8,8 @@
|
||||
<span v-if="!collapsed" class="logo-text">城市生命线</span>
|
||||
</div>
|
||||
<div class="collapse-btn" @click="toggleSidebar">
|
||||
<el-icon>
|
||||
<DArrowLeft v-if="!collapsed" />
|
||||
<DArrowRight v-else />
|
||||
</el-icon>
|
||||
<ChevronLeft v-if="!collapsed" :size="18" />
|
||||
<ChevronRight v-else :size="18" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -24,7 +22,7 @@
|
||||
:class="{ active: activeMenu === item.key }"
|
||||
@click="handleMenuClick(item)"
|
||||
>
|
||||
<el-icon><component :is="item.icon" /></el-icon>
|
||||
<component :is="item.icon" :size="18" />
|
||||
<span v-if="!collapsed">{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -54,7 +52,7 @@
|
||||
@load="handleIframeLoad"
|
||||
/>
|
||||
<div v-if="iframeLoading" class="iframe-loading">
|
||||
<el-icon class="is-loading"><Loading /></el-icon>
|
||||
<Loader :size="20" class="is-loading" />
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,19 +67,22 @@
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import {
|
||||
ChatDotRound,
|
||||
Grid,
|
||||
Connection,
|
||||
Document,
|
||||
Service,
|
||||
DArrowLeft,
|
||||
DArrowRight,
|
||||
MessageCircle,
|
||||
LayoutGrid,
|
||||
Workflow,
|
||||
FileText,
|
||||
Headphones,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
User,
|
||||
Setting,
|
||||
SwitchButton,
|
||||
Refresh,
|
||||
Loading
|
||||
} from '@element-plus/icons-vue'
|
||||
Settings,
|
||||
LogOut,
|
||||
RefreshCw,
|
||||
Loader
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
// el-button 图标需要传入组件
|
||||
const Refresh = RefreshCw
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { MenuItem } from 'shared/types'
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export { default as SidebarLayout } from './SidebarLayout/SidebarLayout.vue'
|
||||
|
||||
// BlankLayout从shared导入
|
||||
export { BlankLayout, AdminSidebarLayout } from 'shared/layouts';
|
||||
export { BlankLayout, SubSidebarLayout } from 'shared/layouts';
|
||||
@@ -1,7 +1,6 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import ElementPlus from 'element-plus'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
import 'element-plus/dist/index.css'
|
||||
|
||||
import './assets/css/common.scss'
|
||||
@@ -12,6 +11,82 @@ import { AES_SECRET_KEY } from './config'
|
||||
// @ts-ignore
|
||||
import { initAesEncrypt } from 'shared/utils'
|
||||
|
||||
// 导入需要的 Lucide 图标（用于动态组件）
|
||||
import {
|
||||
MessageCircle,
|
||||
LayoutGrid,
|
||||
Workflow,
|
||||
FileText,
|
||||
Headphones,
|
||||
BarChart3,
|
||||
Users,
|
||||
User,
|
||||
Settings,
|
||||
Home,
|
||||
Ticket,
|
||||
Bot,
|
||||
ScrollText,
|
||||
Monitor,
|
||||
Server,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
ChevronLeft,
|
||||
PanelLeftClose,
|
||||
PanelLeftOpen,
|
||||
RefreshCw,
|
||||
Loader,
|
||||
LogOut,
|
||||
Plus,
|
||||
Trash2,
|
||||
Clock,
|
||||
Search,
|
||||
AlertTriangle,
|
||||
Wrench,
|
||||
Paperclip,
|
||||
Send,
|
||||
History,
|
||||
X,
|
||||
Menu
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
// Lucide 图标映射（用于全局注册）
|
||||
const lucideIcons = {
|
||||
MessageCircle,
|
||||
LayoutGrid,
|
||||
Workflow,
|
||||
FileText,
|
||||
Headphones,
|
||||
BarChart3,
|
||||
Users,
|
||||
User,
|
||||
Settings,
|
||||
Home,
|
||||
Ticket,
|
||||
Bot,
|
||||
ScrollText,
|
||||
Monitor,
|
||||
Server,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
ChevronLeft,
|
||||
PanelLeftClose,
|
||||
PanelLeftOpen,
|
||||
RefreshCw,
|
||||
Loader,
|
||||
LogOut,
|
||||
Plus,
|
||||
Trash2,
|
||||
Clock,
|
||||
Search,
|
||||
AlertTriangle,
|
||||
Wrench,
|
||||
Paperclip,
|
||||
Send,
|
||||
History,
|
||||
X,
|
||||
Menu
|
||||
}
|
||||
|
||||
// 异步初始化应用
|
||||
async function initApp() {
|
||||
// 1. 初始化 AES 加密工具
|
||||
@@ -32,9 +107,9 @@ async function initApp() {
|
||||
// 4. 注册 Element Plus
|
||||
app.use(ElementPlus)
|
||||
|
||||
// 5. 注册所有 Element Plus 图标
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
// 5. 注册 Lucide 图标（用于动态组件）
|
||||
for (const [name, component] of Object.entries(lucideIcons)) {
|
||||
app.component(name, component)
|
||||
}
|
||||
|
||||
// 6. 注册路由
|
||||
|
||||
@@ -18,7 +18,7 @@ import {
|
||||
import type { TbSysViewDTO } from 'shared/types'
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
import router from './index'
|
||||
import { SidebarLayout, BlankLayout, AdminSidebarLayout } from '@/layouts'
|
||||
import { SidebarLayout, BlankLayout, SubSidebarLayout } from '@/layouts'
|
||||
|
||||
// Workcase 布局组件映射
|
||||
const workcaseLayoutMap: Record<string, () => Promise<any>> = {
|
||||
@@ -26,7 +26,7 @@ const workcaseLayoutMap: Record<string, () => Promise<any>> = {
|
||||
'BlankLayout': () => Promise.resolve({ default: BlankLayout }),
|
||||
'NavigationLayout': () => Promise.resolve({ default: SidebarLayout }),
|
||||
'BasicLayout': () => Promise.resolve({ default: SidebarLayout }),
|
||||
'AdminSidebarLayout': () => Promise.resolve({ default: AdminSidebarLayout })
|
||||
'SubSidebarLayout': () => Promise.resolve({ default: SubSidebarLayout })
|
||||
}
|
||||
|
||||
// 视图组件加载器
|
||||
|
||||
@@ -195,7 +195,7 @@ function getFirstAdminRoute(): string | null {
|
||||
const adminViews = userViews.filter((view: any) =>
|
||||
view.service === 'workcase' &&
|
||||
view.url?.startsWith('/admin') &&
|
||||
view.layout === 'AdminSidebarLayout' &&
|
||||
view.layout === 'SubSidebarLayout' &&
|
||||
!view.parentId && // 顶级菜单
|
||||
view.url // 必须有 url 字段
|
||||
)
|
||||
|
||||
@@ -189,5 +189,5 @@ declare module 'shared/layouts' {
|
||||
import { DefineComponent } from 'vue'
|
||||
|
||||
export const BlankLayout: DefineComponent<{}, {}, any>
|
||||
export const AdminSidebarLayout: DefineComponent<{}, {}, any>
|
||||
export const SubSidebarLayout: DefineComponent<{}, {}, any>
|
||||
}
|
||||
|
||||
@@ -0,0 +1,360 @@
|
||||
// ==================== 品牌色变量 ====================
|
||||
$brand-color: #0055AA;
|
||||
$brand-color-light: #EBF5FF;
|
||||
$brand-color-hover: #004488;
|
||||
|
||||
// ==================== 工单管理页面样式 ====================
|
||||
.workcase-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// 筛选卡片
|
||||
.filter-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #f1f5f9;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticket-filters {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
// 状态标签组
|
||||
:deep(.el-radio-group) {
|
||||
display: inline-flex;
|
||||
background: #f1f5f9;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
|
||||
.el-radio-button {
|
||||
.el-radio-button__inner {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
color: #1e293b;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.el-radio-button__inner {
|
||||
background: $brand-color;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 8px rgba($brand-color, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 下拉选择框样式
|
||||
:deep(.el-select) {
|
||||
.el-input__wrapper {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
border-color: $brand-color;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
border-color: $brand-color;
|
||||
box-shadow: 0 0 0 2px rgba($brand-color, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索输入框
|
||||
:deep(.el-input) {
|
||||
.el-input__wrapper {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
border-color: $brand-color;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
border-color: $brand-color;
|
||||
box-shadow: 0 0 0 2px rgba($brand-color, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 工单列表卡片
|
||||
:deep(.el-card) {
|
||||
border-radius: 16px;
|
||||
border: 1px solid #f1f5f9;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 表格样式
|
||||
:deep(.el-table) {
|
||||
--el-table-header-bg-color: #fff;
|
||||
--el-table-row-hover-bg-color: rgba(248, 250, 252, 0.5);
|
||||
|
||||
thead {
|
||||
th {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
color: #94a3b8;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
transition: background 0.15s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(248, 250, 252, 0.5);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f8fafc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 工单号链接
|
||||
.ticket-no {
|
||||
color: $brand-color;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: $brand-color-hover;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// 客户信息
|
||||
.customer-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.name {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
// 未指派标签
|
||||
.unassigned {
|
||||
color: #94a3b8;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// 标签样式覆盖
|
||||
:deep(.el-tag) {
|
||||
border-radius: 9999px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
|
||||
&.el-tag--warning {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
&.el-tag--info {
|
||||
background: #dbeafe;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
&.el-tag--success {
|
||||
background: #dcfce7;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
&.el-tag--danger {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
}
|
||||
}
|
||||
|
||||
// 操作按钮
|
||||
:deep(.el-button--link) {
|
||||
padding: 4px 8px;
|
||||
|
||||
&.el-button--primary {
|
||||
color: $brand-color;
|
||||
|
||||
&:hover {
|
||||
color: $brand-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.el-button--warning {
|
||||
color: #f59e0b;
|
||||
|
||||
&:hover {
|
||||
color: #d97706;
|
||||
}
|
||||
}
|
||||
|
||||
&.el-button--success {
|
||||
color: #22c55e;
|
||||
|
||||
&:hover {
|
||||
color: #16a34a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分页样式
|
||||
.table-pagination {
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
:deep(.el-pagination) {
|
||||
.el-pager {
|
||||
li {
|
||||
border-radius: 6px;
|
||||
|
||||
&.is-active {
|
||||
background: $brand-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-prev,
|
||||
.btn-next {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗样式
|
||||
:deep(.el-dialog) {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
margin-right: 0;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
}
|
||||
}
|
||||
|
||||
// 表单样式
|
||||
:deep(.el-form) {
|
||||
.el-form-item__label {
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-input__wrapper,
|
||||
.el-textarea__inner {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 主按钮样式
|
||||
:deep(.el-button--primary) {
|
||||
background: $brand-color;
|
||||
border-color: $brand-color;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: $brand-color-hover;
|
||||
border-color: $brand-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式
|
||||
@media (max-width: 768px) {
|
||||
.workcase-container {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.ticket-filters {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.filter-right {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
:deep(.el-select),
|
||||
:deep(.el-input) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-radio-group) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.el-radio-button {
|
||||
flex: 1;
|
||||
min-width: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -219,32 +219,5 @@ const createTicket = () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import url("./WorkcaseView.scss");
|
||||
|
||||
.workcase-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.customer-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.customer-info .name {
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.customer-info .phone {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.ticket-no {
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
}
|
||||
@import "./WorkcaseView.scss";
|
||||
</style>
|
||||
@@ -1,247 +1,569 @@
|
||||
.ai-chat-system {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
background: #f5f7fa;
|
||||
// 品牌色
|
||||
$brand-color: #0055AA;
|
||||
$brand-color-light: #EBF5FF;
|
||||
$brand-color-hover: #004488;
|
||||
|
||||
// 左侧边栏
|
||||
.chat-sidebar {
|
||||
width: 200px;
|
||||
background: #fff;
|
||||
border-right: 1px solid #e4e7ed;
|
||||
.ai-chat-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
background: #f8fafc;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', 'Noto Sans SC', sans-serif;
|
||||
}
|
||||
|
||||
// ==================== 折叠状态的历史栏 ====================
|
||||
.history-collapsed {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 48px;
|
||||
background: #fff;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
z-index: 10;
|
||||
|
||||
.history-toggle-btn {
|
||||
padding: 8px;
|
||||
color: #64748b;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:hover {
|
||||
color: $brand-color;
|
||||
background: $brand-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
.history-icons {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 20px 16px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
.history-icon-btn {
|
||||
padding: 8px;
|
||||
color: #94a3b8;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
h1 {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
color: #303133;
|
||||
}
|
||||
&:hover {
|
||||
color: #64748b;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
padding: 12px 8px;
|
||||
&.active {
|
||||
color: $brand-color;
|
||||
background: $brand-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item.new-chat {
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
.expand-btn {
|
||||
padding: 8px;
|
||||
color: #94a3b8;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #66b1ff;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: #64748b;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
color: #606266;
|
||||
transition: all 0.2s;
|
||||
// ==================== 展开时的关闭按钮 ====================
|
||||
.history-close-btn {
|
||||
position: absolute;
|
||||
left: 256px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 20;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-left: none;
|
||||
border-radius: 0 8px 8px 0;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.2s;
|
||||
color: #64748b;
|
||||
|
||||
&:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
&:hover {
|
||||
background: #f8fafc;
|
||||
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
}
|
||||
// ==================== 历史对话侧边栏 ====================
|
||||
.history-sidebar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: #fff;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
z-index: 10;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
&.open {
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
.sidebar-inner {
|
||||
width: 256px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
margin-top: auto;
|
||||
.new-chat-btn {
|
||||
padding: 6px;
|
||||
color: #64748b;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: $brand-color;
|
||||
background: $brand-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
|
||||
.empty-tip {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #c0c4cc;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// 主内容区
|
||||
.chat-main {
|
||||
flex: 1;
|
||||
.conversation-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: #f5f7fa;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
.chat-header {
|
||||
padding: 24px 32px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
&:hover {
|
||||
background: #f8fafc;
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
margin: 0 0 8px 0;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin: 0;
|
||||
.delete-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-area {
|
||||
&.active {
|
||||
background: $brand-color-light;
|
||||
color: $brand-color;
|
||||
}
|
||||
|
||||
.conv-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.conv-info {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
margin: 24px 32px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.conv-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.conv-time {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
padding: 4px;
|
||||
color: #94a3b8;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #ef4444;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 主聊天区域 ====================
|
||||
.chat-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
transition: all 0.3s ease;
|
||||
margin-left: 48px;
|
||||
|
||||
&.sidebar-open {
|
||||
margin-left: 256px;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 消息容器 ====================
|
||||
.messages-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// ==================== 空状态 ====================
|
||||
.empty-state {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32px;
|
||||
|
||||
.empty-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, $brand-color 0%, $brand-color-hover 100%);
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 24px;
|
||||
box-shadow: 0 8px 24px rgba($brand-color, 0.3);
|
||||
|
||||
.logo-icon {
|
||||
font-size: 40px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
margin: 0 0 32px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.quick-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.quick-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
border-color: $brand-color;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.quick-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: $brand-color-light;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $brand-color;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.ai-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
&:hover .quick-icon {
|
||||
background: $brand-color;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ai-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #f0f2f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.ai-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ai-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.ai-status {
|
||||
font-size: 12px;
|
||||
color: #67c23a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #67c23a;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messages {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
background: #f5f7fa;
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&.user {
|
||||
justify-content: flex-end;
|
||||
|
||||
.message-content {
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 60%;
|
||||
padding: 12px 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.message-text {
|
||||
line-height: 1.6;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 11px;
|
||||
color: #c0c4cc;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
background: #fff;
|
||||
|
||||
.quick-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
background: #f5f7fa;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 16px;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #ecf5ff;
|
||||
border-color: #409eff;
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
background: #fff;
|
||||
|
||||
.attach-icon {
|
||||
font-size: 20px;
|
||||
color: #909399;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.quick-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
// ==================== 消息列表 ====================
|
||||
.messages-list {
|
||||
max-width: 768px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px;
|
||||
|
||||
.message-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&.user {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.message-bubble {
|
||||
background: $brand-color;
|
||||
color: #fff;
|
||||
border-radius: 16px 16px 4px 16px;
|
||||
|
||||
.message-time {
|
||||
text-align: right;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.user {
|
||||
background: $brand-color;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.assistant {
|
||||
background: linear-gradient(135deg, $brand-color 0%, $brand-color-hover 100%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
max-width: 80%;
|
||||
padding: 12px 16px;
|
||||
border-radius: 16px 16px 16px 4px;
|
||||
background: #fff;
|
||||
border: 1px solid #f1f5f9;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
|
||||
.message-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 快捷命令栏 ====================
|
||||
.quick-bar {
|
||||
padding: 8px 16px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
background: #fff;
|
||||
|
||||
.quick-bar-inner {
|
||||
max-width: 768px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: $brand-color;
|
||||
background: $brand-color-light;
|
||||
color: $brand-color;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
color: $brand-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 输入区域 ====================
|
||||
.input-area {
|
||||
padding: 24px;
|
||||
background: #f8fafc;
|
||||
|
||||
.input-wrapper {
|
||||
max-width: 768px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.input-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid #e2e8f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.chat-textarea {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
background: transparent;
|
||||
line-height: 1.5;
|
||||
max-height: 120px;
|
||||
|
||||
&::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-row {
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid #f8fafc;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
padding: 8px;
|
||||
color: #94a3b8;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #64748b;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
padding: 10px;
|
||||
background: #e2e8f0;
|
||||
color: #94a3b8;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
cursor: not-allowed;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.active {
|
||||
background: $brand-color;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba($brand-color, 0.3);
|
||||
|
||||
&:hover {
|
||||
background: $brand-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
margin: 12px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,191 +1,367 @@
|
||||
<template>
|
||||
<div class="ai-chat-system">
|
||||
<!-- 左右布局 -->
|
||||
<!-- 左侧边栏 -->
|
||||
<aside class="chat-sidebar">
|
||||
<!-- 标头 -->
|
||||
<div class="sidebar-header">
|
||||
<h1>智能客服系统</h1>
|
||||
<div class="ai-chat-container">
|
||||
<!-- 折叠状态的历史栏 -->
|
||||
<div v-if="!isHistoryOpen" class="history-collapsed">
|
||||
<button class="history-toggle-btn" @click="toggleHistory" title="展开历史对话">
|
||||
<Clock :size="20" />
|
||||
</button>
|
||||
<div class="history-icons">
|
||||
<button
|
||||
v-for="conv in chatHistory.slice(0, 8)"
|
||||
:key="conv.id"
|
||||
@click="loadChat(conv.id); toggleHistory()"
|
||||
class="history-icon-btn"
|
||||
:class="{ active: currentChatId === conv.id }"
|
||||
:title="conv.title"
|
||||
>
|
||||
<MessageCircle :size="16" />
|
||||
</button>
|
||||
</div>
|
||||
<button class="expand-btn" @click="toggleHistory" title="展开历史对话">
|
||||
<ChevronRight :size="18" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 新增对话按钮 -->
|
||||
<div class="nav-section">
|
||||
<div class="nav-item new-chat" @click="startNewChat">
|
||||
<ElIcon><Plus /></ElIcon>
|
||||
<span>新建对话</span>
|
||||
<!-- 展开时的关闭按钮 -->
|
||||
<button
|
||||
v-if="isHistoryOpen"
|
||||
class="history-close-btn"
|
||||
@click="toggleHistory"
|
||||
>
|
||||
<ChevronLeft :size="18" />
|
||||
</button>
|
||||
|
||||
<!-- 历史对话侧边栏 -->
|
||||
<aside
|
||||
class="history-sidebar"
|
||||
:class="{ open: isHistoryOpen }"
|
||||
>
|
||||
<div class="sidebar-inner">
|
||||
<!-- 头部 -->
|
||||
<div class="sidebar-header">
|
||||
<span class="title">历史对话</span>
|
||||
<button class="new-chat-btn" @click="startNewChat" title="新建对话">
|
||||
<Plus :size="18" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 历史对话列表 -->
|
||||
<ChatHistory
|
||||
:chatHistory="chatHistory"
|
||||
:currentChatId="currentChatId"
|
||||
@loadChat="loadChat"
|
||||
/>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
v2.1.0 (Build 2025)
|
||||
<!-- 对话列表 -->
|
||||
<div class="conversation-list">
|
||||
<div v-if="chatHistory.length === 0" class="empty-tip">
|
||||
暂无历史对话
|
||||
</div>
|
||||
<div
|
||||
v-for="conv in chatHistory"
|
||||
:key="conv.id"
|
||||
@click="loadChat(conv.id)"
|
||||
class="conversation-item"
|
||||
:class="{ active: currentChatId === conv.id }"
|
||||
>
|
||||
<MessageCircle :size="16" class="conv-icon" />
|
||||
<div class="conv-info">
|
||||
<div class="conv-title">{{ conv.title }}</div>
|
||||
<div class="conv-time">{{ conv.time }}</div>
|
||||
</div>
|
||||
<button
|
||||
class="delete-btn"
|
||||
@click.stop="deleteConversation(conv.id)"
|
||||
title="删除"
|
||||
>
|
||||
<Trash2 :size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="chat-main">
|
||||
<!-- header -->
|
||||
<div class="chat-header">
|
||||
<h1>泰豪小电-对内</h1>
|
||||
<p class="subtitle">Real-time Support Agent</p>
|
||||
</div>
|
||||
<!-- 主聊天区域 -->
|
||||
<main class="chat-main" :class="{ 'sidebar-open': isHistoryOpen }">
|
||||
<!-- 消息区域 -->
|
||||
<div ref="messagesRef" class="messages-container">
|
||||
<!-- 空状态 -->
|
||||
<div v-if="messages.length === 0" class="empty-state">
|
||||
<div class="empty-content">
|
||||
<!-- Logo -->
|
||||
<div class="logo-wrapper">
|
||||
<Headphones :size="40" class="logo-icon" />
|
||||
</div>
|
||||
<h1 class="title">泰豪小电</h1>
|
||||
<p class="desc">电源设备智能客服助手，为您提供设备操作、故障排查、维修服务等专业支持</p>
|
||||
|
||||
<!-- 聊天区域 -->
|
||||
<div class="chat-area">
|
||||
<!-- 智能体信息 助手 -->
|
||||
<div class="ai-info">
|
||||
<div class="ai-avatar">🤖</div>
|
||||
<div class="ai-details">
|
||||
<div class="ai-name">泰豪智能服务助手</div>
|
||||
<div class="ai-status">
|
||||
<span class="status-dot"></span>
|
||||
基于 RAG 知识库 · 24小时在线
|
||||
<!-- 快捷命令 -->
|
||||
<div class="quick-grid">
|
||||
<button
|
||||
v-for="cmd in quickCommands"
|
||||
:key="cmd.label"
|
||||
@click="handleQuickCommand(cmd.query)"
|
||||
class="quick-card"
|
||||
>
|
||||
<div class="quick-icon">
|
||||
<component :is="cmd.icon" :size="18" />
|
||||
</div>
|
||||
<span class="quick-label">{{ cmd.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 聊天记录 -->
|
||||
<div class="messages" ref="messagesRef">
|
||||
<div
|
||||
v-for="msg in messages"
|
||||
:key="msg.id"
|
||||
class="message"
|
||||
<!-- 消息列表 -->
|
||||
<div v-else class="messages-list">
|
||||
<div
|
||||
v-for="msg in messages"
|
||||
:key="msg.id"
|
||||
class="message-row"
|
||||
:class="msg.role"
|
||||
>
|
||||
<div class="message-content">
|
||||
<div class="message-text">{{ msg.text }}</div>
|
||||
<!-- 头像 -->
|
||||
<div class="avatar" :class="msg.role">
|
||||
<User v-if="msg.role === 'user'" :size="16" />
|
||||
<Headphones v-else :size="16" />
|
||||
</div>
|
||||
|
||||
<!-- 消息内容 -->
|
||||
<div class="message-bubble" :class="msg.role">
|
||||
<p class="message-text">{{ msg.text }}</p>
|
||||
<div class="message-time">{{ msg.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer -->
|
||||
<!-- 默认提示词 -->
|
||||
<div class="quick-actions">
|
||||
<button class="quick-btn" @click="quickReply('设备操作手册')">
|
||||
<ElIcon><Document /></ElIcon>
|
||||
设备操作手册
|
||||
<!-- 快捷命令栏（有消息时显示） -->
|
||||
<div v-if="messages.length > 0" class="quick-bar">
|
||||
<div class="quick-bar-inner">
|
||||
<button
|
||||
v-for="cmd in quickCommands"
|
||||
:key="cmd.label"
|
||||
@click="handleQuickCommand(cmd.query)"
|
||||
class="quick-pill"
|
||||
>
|
||||
<component :is="cmd.icon" :size="18" />
|
||||
<span>{{ cmd.label }}</span>
|
||||
</button>
|
||||
<button class="quick-btn" @click="quickReply('故障排查指南')">
|
||||
<ElIcon><Warning /></ElIcon>
|
||||
故障排查指南
|
||||
</button>
|
||||
<button class="quick-btn" @click="quickReply('维保服务规范')">
|
||||
<ElIcon><List /></ElIcon>
|
||||
维保服务规范
|
||||
</button>
|
||||
<button class="quick-btn" @click="quickReply('技术参数查询')">
|
||||
<ElIcon><Search /></ElIcon>
|
||||
技术参数查询
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 输入框 -->
|
||||
<div class="input-area">
|
||||
<ElIcon class="attach-icon"><Paperclip /></ElIcon>
|
||||
<ElInput
|
||||
v-model="inputText"
|
||||
placeholder="描述您的问题 (如: 发电机启动失败异常)..."
|
||||
@keyup.enter="sendMessage"
|
||||
/>
|
||||
<ElButton type="primary" :icon="Promotion" circle @click="sendMessage" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<div class="input-area">
|
||||
<div class="input-wrapper">
|
||||
<!-- 输入卡片 -->
|
||||
<div class="input-card">
|
||||
<!-- 输入框 -->
|
||||
<div class="input-row">
|
||||
<textarea
|
||||
ref="textareaRef"
|
||||
v-model="inputText"
|
||||
@input="adjustHeight"
|
||||
@keydown="handleKeyDown"
|
||||
placeholder="请输入您的问题，例如：电源模块过热报警怎么处理..."
|
||||
rows="1"
|
||||
class="chat-textarea"
|
||||
/>
|
||||
</div>
|
||||
<!-- 工具栏 -->
|
||||
<div class="toolbar-row">
|
||||
<div class="toolbar-actions">
|
||||
<button class="tool-btn" title="添加附件">
|
||||
<Paperclip :size="18" />
|
||||
</button>
|
||||
<button
|
||||
class="send-btn"
|
||||
:class="{ active: inputText.trim() }"
|
||||
:disabled="!inputText.trim()"
|
||||
@click="sendMessage"
|
||||
>
|
||||
<Send :size="18" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="disclaimer">AI 生成内容仅供参考 · 泰豪集团内部绝密信息请勿上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { ElButton, ElInput, ElIcon } from 'element-plus';
|
||||
import { ref, nextTick } from 'vue'
|
||||
import {
|
||||
Plus,
|
||||
Document,
|
||||
Warning,
|
||||
List,
|
||||
MessageCircle,
|
||||
Clock,
|
||||
Trash2,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
FileText,
|
||||
AlertTriangle,
|
||||
Wrench,
|
||||
Search,
|
||||
Paperclip,
|
||||
Promotion
|
||||
} from '@element-plus/icons-vue';
|
||||
import ChatHistory from './components/ChatHistory.vue';
|
||||
Send,
|
||||
User,
|
||||
Headphones
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
interface Message {
|
||||
id: number
|
||||
role: 'user' | 'assistant'
|
||||
text: string
|
||||
time: string
|
||||
}
|
||||
|
||||
interface Conversation {
|
||||
id: number
|
||||
title: string
|
||||
time: string
|
||||
}
|
||||
|
||||
// 历史对话展开状态
|
||||
const isHistoryOpen = ref(false)
|
||||
|
||||
// 当前选中的对话ID
|
||||
const currentChatId = ref(1);
|
||||
const currentChatId = ref<number | null>(null)
|
||||
|
||||
// 历史对话列表
|
||||
const chatHistory = ref([
|
||||
const chatHistory = ref<Conversation[]>([
|
||||
{ id: 1, title: '发电机故障咨询', time: '今天 10:30' },
|
||||
{ id: 2, title: '设备维保规范查询', time: '今天 09:15' },
|
||||
{ id: 3, title: '配件更换流程', time: '昨天 16:42' },
|
||||
{ id: 4, title: 'TH-500GF参数查询', time: '昨天 14:20' },
|
||||
{ id: 5, title: '巡检报告模板', time: '12月10日' },
|
||||
{ id: 6, title: '客户投诉处理流程', time: '12月09日' }
|
||||
]);
|
||||
])
|
||||
|
||||
// 聊天消息列表
|
||||
const messages = ref([
|
||||
{ id: 1, role: 'assistant', text: '您好，欢迎使用泰豪智能客服，请问有什么可以帮您的？', time: '10:00' }
|
||||
]);
|
||||
const messages = ref<Message[]>([])
|
||||
|
||||
// 输入框文本
|
||||
const inputText = ref('');
|
||||
const inputText = ref('')
|
||||
|
||||
// 消息容器引用
|
||||
const messagesRef = ref<HTMLElement | null>(null);
|
||||
const messagesRef = ref<HTMLElement | null>(null)
|
||||
const textareaRef = ref<HTMLTextAreaElement | null>(null)
|
||||
|
||||
// 快捷命令
|
||||
const quickCommands = [
|
||||
{ label: '设备操作手册', icon: FileText, query: '请帮我查询设备操作手册的相关内容' },
|
||||
{ label: '故障排查指南', icon: AlertTriangle, query: '请提供故障排查指南' },
|
||||
{ label: '维修服务规范', icon: Wrench, query: '请查询维修服务规范' },
|
||||
{ label: '技术参数查询', icon: Search, query: '请帮我查询设备技术参数' }
|
||||
]
|
||||
|
||||
// 切换历史对话侧边栏
|
||||
const toggleHistory = () => {
|
||||
isHistoryOpen.value = !isHistoryOpen.value
|
||||
}
|
||||
|
||||
// 开始新对话
|
||||
const startNewChat = () => {
|
||||
const newId = Date.now();
|
||||
chatHistory.value.unshift({
|
||||
id: newId,
|
||||
title: '新对话',
|
||||
time: '刚刚'
|
||||
});
|
||||
currentChatId.value = newId;
|
||||
currentChatId.value = null
|
||||
messages.value = []
|
||||
inputText.value = ''
|
||||
}
|
||||
|
||||
// 加载历史对话
|
||||
const loadChat = (chatId: number) => {
|
||||
currentChatId.value = chatId
|
||||
// 模拟加载历史对话
|
||||
messages.value = [
|
||||
{
|
||||
id: 1,
|
||||
role: 'assistant',
|
||||
text: '您好，欢迎使用泰豪智能客服，请问有什么可以帮您的？',
|
||||
time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
|
||||
time: '10:00'
|
||||
}
|
||||
];
|
||||
};
|
||||
]
|
||||
}
|
||||
|
||||
// 加载历史对话
|
||||
const loadChat = (chatId: number) => {
|
||||
currentChatId.value = chatId;
|
||||
// 模拟加载历史对话
|
||||
messages.value = [
|
||||
{ id: 1, role: 'assistant', text: '您好，欢迎使用泰豪智能客服，请问有什么可以帮您的？', time: '10:00' }
|
||||
];
|
||||
};
|
||||
// 删除对话
|
||||
const deleteConversation = (convId: number) => {
|
||||
chatHistory.value = chatHistory.value.filter(c => c.id !== convId)
|
||||
if (currentChatId.value === convId) {
|
||||
startNewChat()
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动到底部
|
||||
const scrollToBottom = () => {
|
||||
nextTick(() => {
|
||||
if (messagesRef.value) {
|
||||
messagesRef.value.scrollTop = messagesRef.value.scrollHeight
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 发送消息
|
||||
const sendMessage = () => {
|
||||
if (!inputText.value.trim()) return;
|
||||
const sendMessage = async () => {
|
||||
if (!inputText.value.trim()) return
|
||||
|
||||
messages.value.push({
|
||||
const userMessage: Message = {
|
||||
id: Date.now(),
|
||||
role: 'user',
|
||||
text: inputText.value,
|
||||
text: inputText.value.trim(),
|
||||
time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
|
||||
});
|
||||
}
|
||||
|
||||
inputText.value = '';
|
||||
};
|
||||
messages.value.push(userMessage)
|
||||
const query = inputText.value
|
||||
inputText.value = ''
|
||||
|
||||
// 重置输入框高度
|
||||
if (textareaRef.value) {
|
||||
textareaRef.value.style.height = 'auto'
|
||||
}
|
||||
|
||||
scrollToBottom()
|
||||
|
||||
// 模拟 AI 回复
|
||||
setTimeout(() => {
|
||||
const assistantMessage: Message = {
|
||||
id: Date.now() + 1,
|
||||
role: 'assistant',
|
||||
text: `感谢您的咨询！关于"${query}"，我正在为您查询相关信息...\n\n这是一个模拟回复。在实际应用中，这里会连接到后端AI服务获取真实回答。`,
|
||||
time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
|
||||
}
|
||||
messages.value.push(assistantMessage)
|
||||
|
||||
// 保存到对话列表
|
||||
if (!currentChatId.value) {
|
||||
const newConv: Conversation = {
|
||||
id: Date.now(),
|
||||
title: query.slice(0, 20) + (query.length > 20 ? '...' : ''),
|
||||
time: '刚刚'
|
||||
}
|
||||
chatHistory.value.unshift(newConv)
|
||||
currentChatId.value = newConv.id
|
||||
}
|
||||
|
||||
scrollToBottom()
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 快捷回复
|
||||
const quickReply = (text: string) => {
|
||||
inputText.value = text;
|
||||
sendMessage();
|
||||
};
|
||||
// 处理快捷命令
|
||||
const handleQuickCommand = (query: string) => {
|
||||
inputText.value = query
|
||||
sendMessage()
|
||||
}
|
||||
|
||||
// 自动调整输入框高度
|
||||
const adjustHeight = () => {
|
||||
const el = textareaRef.value
|
||||
if (el) {
|
||||
el.style.height = 'auto'
|
||||
el.style.height = Math.min(el.scrollHeight, 150) + 'px'
|
||||
}
|
||||
}
|
||||
|
||||
// 键盘事件
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
sendMessage()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -20,8 +20,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElIcon } from 'element-plus';
|
||||
import { ChatLineRound } from '@element-plus/icons-vue';
|
||||
import { MessageCircle } from 'lucide-vue-next'
|
||||
|
||||
const ChatLineRound = MessageCircle
|
||||
|
||||
interface ChatItem {
|
||||
id: number;
|
||||
|
||||
Reference in New Issue
Block a user