feat: 项目初始化及当前全部内容提交
This commit is contained in:
@@ -0,0 +1,615 @@
|
||||
<template>
|
||||
<div class="analysis-page">
|
||||
<!-- 页面头部 -->
|
||||
<header class="page-header glass">
|
||||
<div class="header-content">
|
||||
<div class="page-title">
|
||||
<router-link to="/" class="back-btn">
|
||||
<ArrowLeftOutlined />
|
||||
</router-link>
|
||||
<h1 class="gradient-text">情绪分析</h1>
|
||||
<span class="subtitle">深入了解您的情绪状态和心理健康</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<main class="page-content">
|
||||
<div class="content-container">
|
||||
<!-- 快速分析 -->
|
||||
<div class="quick-analysis-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">快速情绪分析</h2>
|
||||
<p class="section-description">输入您想要分析的文本，获得即时的情绪分析结果</p>
|
||||
</div>
|
||||
|
||||
<div class="analysis-form card">
|
||||
<a-textarea
|
||||
v-model:value="analysisText"
|
||||
placeholder="请输入您想要分析的文本内容，比如今天的心情、遇到的事情等..."
|
||||
:auto-size="{ minRows: 4, maxRows: 8 }"
|
||||
class="analysis-input"
|
||||
/>
|
||||
|
||||
<div class="form-actions">
|
||||
<a-button
|
||||
type="primary"
|
||||
class="gradient-btn"
|
||||
size="large"
|
||||
@click="analyzeText"
|
||||
:loading="analyzing"
|
||||
:disabled="!analysisText.trim()"
|
||||
>
|
||||
<SearchOutlined />
|
||||
开始分析
|
||||
</a-button>
|
||||
|
||||
<a-button
|
||||
size="large"
|
||||
@click="clearAnalysis"
|
||||
:disabled="!analysisText.trim()"
|
||||
>
|
||||
<ClearOutlined />
|
||||
清空
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分析结果 -->
|
||||
<div class="analysis-result card" v-if="currentAnalysis">
|
||||
<div class="result-header">
|
||||
<h3 class="result-title">
|
||||
<HeartOutlined />
|
||||
分析结果
|
||||
</h3>
|
||||
<div class="result-time">{{ formatTime(currentAnalysis.analysisTime) }}</div>
|
||||
</div>
|
||||
|
||||
<EmotionAnalysis :analysis="currentAnalysis" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 历史分析记录 -->
|
||||
<div class="history-analysis-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">历史分析记录</h2>
|
||||
<p class="section-description">查看您过往的情绪分析记录和趋势</p>
|
||||
</div>
|
||||
|
||||
<div class="analysis-history card">
|
||||
<a-spin :spinning="loadingHistory">
|
||||
<div class="history-list" v-if="analysisHistory.length > 0">
|
||||
<div
|
||||
class="history-item"
|
||||
v-for="analysis in analysisHistory"
|
||||
:key="analysis.id"
|
||||
@click="viewAnalysis(analysis)"
|
||||
>
|
||||
<div class="item-header">
|
||||
<div class="item-emotion">
|
||||
<a-tag
|
||||
:color="getEmotionColor(analysis.primaryEmotion)"
|
||||
class="emotion-tag"
|
||||
>
|
||||
{{ getEmotionText(analysis.primaryEmotion) }}
|
||||
</a-tag>
|
||||
<span class="emotion-intensity" v-if="analysis.intensity">
|
||||
{{ Math.round(analysis.intensity * 100) }}%
|
||||
</span>
|
||||
</div>
|
||||
<div class="item-time">{{ formatTime(analysis.analysisTime) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="item-content">
|
||||
<div class="item-text">{{ analysis.text }}</div>
|
||||
<div class="item-polarity">
|
||||
<a-tag
|
||||
:color="getPolarityColor(analysis.polarity)"
|
||||
size="small"
|
||||
>
|
||||
{{ getPolarityText(analysis.polarity) }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="empty-history" v-else>
|
||||
<BarChartOutlined class="empty-icon" />
|
||||
<p>暂无分析记录</p>
|
||||
<p class="empty-tip">开始您的第一次情绪分析吧！</p>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 情绪趋势图表 -->
|
||||
<div class="emotion-trends-section" v-if="analysisHistory.length > 0">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">情绪趋势</h2>
|
||||
<p class="section-description">查看您的情绪变化趋势和模式</p>
|
||||
</div>
|
||||
|
||||
<div class="trends-chart card">
|
||||
<EmotionTrends :data="analysisHistory" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 分析详情模态框 -->
|
||||
<a-modal
|
||||
v-model:open="showAnalysisDetail"
|
||||
:title="`情绪分析详情 - ${selectedAnalysis?.primaryEmotion || ''}`"
|
||||
width="600px"
|
||||
:footer="null"
|
||||
>
|
||||
<div class="analysis-detail" v-if="selectedAnalysis">
|
||||
<div class="detail-text">
|
||||
<h4>分析文本</h4>
|
||||
<p>{{ selectedAnalysis.text }}</p>
|
||||
</div>
|
||||
|
||||
<div class="detail-analysis">
|
||||
<EmotionAnalysis :analysis="selectedAnalysis" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
ArrowLeftOutlined,
|
||||
SearchOutlined,
|
||||
ClearOutlined,
|
||||
HeartOutlined,
|
||||
BarChartOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { chatApi } from '@/api/chat'
|
||||
import { formatTime } from '@/utils/format'
|
||||
import EmotionAnalysis from '@/components/EmotionAnalysis.vue'
|
||||
import EmotionTrends from '@/components/EmotionTrends.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 响应式数据
|
||||
const analysisText = ref('')
|
||||
const analyzing = ref(false)
|
||||
const currentAnalysis = ref(null)
|
||||
const analysisHistory = ref([])
|
||||
const loadingHistory = ref(false)
|
||||
const showAnalysisDetail = ref(false)
|
||||
const selectedAnalysis = ref(null)
|
||||
|
||||
// 情绪映射
|
||||
const emotionMap = {
|
||||
joy: '喜悦',
|
||||
sadness: '悲伤',
|
||||
anger: '愤怒',
|
||||
fear: '恐惧',
|
||||
surprise: '惊讶',
|
||||
disgust: '厌恶',
|
||||
trust: '信任',
|
||||
anticipation: '期待',
|
||||
anxiety: '焦虑',
|
||||
depression: '抑郁',
|
||||
excitement: '兴奋',
|
||||
calm: '平静',
|
||||
stress: '压力',
|
||||
happiness: '快乐',
|
||||
worry: '担忧',
|
||||
relief: '放松',
|
||||
frustration: '沮丧',
|
||||
hope: '希望',
|
||||
love: '爱',
|
||||
hate: '恨'
|
||||
}
|
||||
|
||||
const polarityMap = {
|
||||
positive: '积极',
|
||||
negative: '消极',
|
||||
neutral: '中性'
|
||||
}
|
||||
|
||||
// 方法
|
||||
const getEmotionText = (emotion) => {
|
||||
return emotionMap[emotion] || emotion
|
||||
}
|
||||
|
||||
const getPolarityText = (polarity) => {
|
||||
return polarityMap[polarity] || polarity
|
||||
}
|
||||
|
||||
const getEmotionColor = (emotion) => {
|
||||
const colorMap = {
|
||||
joy: 'gold',
|
||||
happiness: 'gold',
|
||||
excitement: 'orange',
|
||||
love: 'magenta',
|
||||
trust: 'blue',
|
||||
hope: 'cyan',
|
||||
calm: 'green',
|
||||
relief: 'green',
|
||||
sadness: 'blue',
|
||||
depression: 'purple',
|
||||
worry: 'orange',
|
||||
anxiety: 'orange',
|
||||
stress: 'red',
|
||||
anger: 'red',
|
||||
frustration: 'red',
|
||||
hate: 'red',
|
||||
fear: 'volcano',
|
||||
surprise: 'lime',
|
||||
anticipation: 'geekblue',
|
||||
disgust: 'default'
|
||||
}
|
||||
return colorMap[emotion] || 'default'
|
||||
}
|
||||
|
||||
const getPolarityColor = (polarity) => {
|
||||
const colorMap = {
|
||||
positive: 'success',
|
||||
negative: 'error',
|
||||
neutral: 'default'
|
||||
}
|
||||
return colorMap[polarity] || 'default'
|
||||
}
|
||||
|
||||
const analyzeText = async () => {
|
||||
if (!analysisText.value.trim()) return
|
||||
|
||||
try {
|
||||
analyzing.value = true
|
||||
|
||||
const response = await chatApi.analyzeEmotion({
|
||||
userId: userStore.userInfo.id,
|
||||
text: analysisText.value.trim(),
|
||||
analysisType: 'detailed'
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
currentAnalysis.value = {
|
||||
...response.data,
|
||||
analysisTime: new Date(),
|
||||
text: analysisText.value.trim()
|
||||
}
|
||||
|
||||
// 添加到历史记录
|
||||
analysisHistory.value.unshift(currentAnalysis.value)
|
||||
|
||||
message.success('分析完成')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('情绪分析失败:', error)
|
||||
message.error('分析失败，请重试')
|
||||
} finally {
|
||||
analyzing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const clearAnalysis = () => {
|
||||
analysisText.value = ''
|
||||
currentAnalysis.value = null
|
||||
}
|
||||
|
||||
const viewAnalysis = (analysis) => {
|
||||
selectedAnalysis.value = analysis
|
||||
showAnalysisDetail.value = true
|
||||
}
|
||||
|
||||
const loadAnalysisHistory = async () => {
|
||||
try {
|
||||
loadingHistory.value = true
|
||||
// 这里应该调用获取历史分析记录的API
|
||||
// 暂时使用模拟数据
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
// 模拟历史数据
|
||||
analysisHistory.value = [
|
||||
{
|
||||
id: '1',
|
||||
text: '今天工作很顺利，心情不错',
|
||||
primaryEmotion: 'happiness',
|
||||
intensity: 0.8,
|
||||
polarity: 'positive',
|
||||
analysisTime: new Date(Date.now() - 86400000),
|
||||
confidence: 0.9
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
text: '有点担心明天的面试',
|
||||
primaryEmotion: 'anxiety',
|
||||
intensity: 0.6,
|
||||
polarity: 'negative',
|
||||
analysisTime: new Date(Date.now() - 172800000),
|
||||
confidence: 0.85
|
||||
}
|
||||
]
|
||||
} catch (error) {
|
||||
console.error('加载历史记录失败:', error)
|
||||
} finally {
|
||||
loadingHistory.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载
|
||||
onMounted(() => {
|
||||
loadAnalysisHistory()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.analysis-page {
|
||||
min-height: 100vh;
|
||||
background: var(--gradient-primary);
|
||||
|
||||
.page-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
padding: var(--spacing-lg) 0;
|
||||
|
||||
.header-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-lg);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
|
||||
.back-btn {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 20px;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-left: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: var(--spacing-xl) var(--spacing-lg);
|
||||
|
||||
.content-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.quick-analysis-section,
|
||||
.history-analysis-section,
|
||||
.emotion-trends-section {
|
||||
margin-bottom: var(--spacing-xxl);
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
color: white;
|
||||
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.section-description {
|
||||
font-size: 16px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.analysis-form {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
|
||||
.analysis-input {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.analysis-result {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: var(--spacing-xl);
|
||||
|
||||
.result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
padding-bottom: var(--spacing-md);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
|
||||
.result-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
margin: 0;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.result-time {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.analysis-history {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: var(--spacing-xl);
|
||||
|
||||
.history-list {
|
||||
.history-item {
|
||||
padding: var(--spacing-md);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: var(--spacing-md);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
|
||||
.item-emotion {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
|
||||
.emotion-intensity {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.item-time {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
.item-text {
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.item-polarity {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-history {
|
||||
text-align: center;
|
||||
padding: var(--spacing-xxl);
|
||||
color: var(--text-secondary);
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
font-size: 14px;
|
||||
margin-top: var(--spacing-xs);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trends-chart {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
|
||||
.analysis-detail {
|
||||
.detail-text {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
|
||||
h4 {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
background: var(--bg-secondary);
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.analysis-page {
|
||||
.page-header {
|
||||
.header-content {
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
.subtitle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: var(--spacing-lg) var(--spacing-md);
|
||||
|
||||
.analysis-form,
|
||||
.analysis-result,
|
||||
.analysis-history,
|
||||
.trends-chart {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
|
||||
.ant-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="analysis-simple">
|
||||
<div class="page-header">
|
||||
<h1>情绪分析</h1>
|
||||
<a-button @click="goBack">返回首页</a-button>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="welcome-message">
|
||||
<h2>情绪分析功能</h2>
|
||||
<p>这里将提供强大的情绪分析功能，帮助您了解自己的情绪状态。</p>
|
||||
|
||||
<div class="test-buttons">
|
||||
<a-button type="primary" @click="testFunction">测试按钮</a-button>
|
||||
<a-button @click="$router.push('/chat')">开始对话</a-button>
|
||||
<a-button @click="$router.push('/history')">查看历史</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const goBack = () => {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
const testFunction = () => {
|
||||
alert('情绪分析页面测试按钮工作正常！')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.analysis-simple {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
|
||||
.welcome-message {
|
||||
h2 {
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
margin-bottom: 32px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.test-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,826 @@
|
||||
<template>
|
||||
<div class="chat-container">
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
|
||||
<div class="sidebar-header">
|
||||
<div class="logo" v-if="!sidebarCollapsed">
|
||||
<h2 class="gradient-text">情绪博物馆</h2>
|
||||
</div>
|
||||
<a-button
|
||||
type="text"
|
||||
class="collapse-btn"
|
||||
@click="toggleSidebar"
|
||||
>
|
||||
<MenuOutlined v-if="sidebarCollapsed" />
|
||||
<MenuFoldOutlined v-else />
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-content" v-if="!sidebarCollapsed">
|
||||
<!-- 新建对话按钮 -->
|
||||
<a-button
|
||||
type="primary"
|
||||
class="new-chat-btn gradient-btn"
|
||||
block
|
||||
@click="createNewChat"
|
||||
:loading="activeStore.loading"
|
||||
>
|
||||
<PlusOutlined />
|
||||
新建对话
|
||||
</a-button>
|
||||
|
||||
<!-- 对话列表 -->
|
||||
<div class="conversations-list">
|
||||
<div class="list-header">
|
||||
<span class="list-title">最近对话</span>
|
||||
<a-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="refreshConversations"
|
||||
:loading="activeStore.loading"
|
||||
>
|
||||
<ReloadOutlined />
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<div class="conversations" v-if="activeStore.hasConversations">
|
||||
<div
|
||||
class="conversation-item"
|
||||
:class="{ active: conversation.conversationId === activeStore.currentConversationId }"
|
||||
v-for="conversation in activeStore.conversations"
|
||||
:key="conversation.conversationId"
|
||||
@click="switchConversation(conversation)"
|
||||
>
|
||||
<div class="conversation-info">
|
||||
<div class="conversation-title">{{ conversation.title }}</div>
|
||||
<div class="conversation-time">{{ formatTime(conversation.updateTime) }}</div>
|
||||
</div>
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a-button type="text" size="small" class="more-btn">
|
||||
<MoreOutlined />
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item @click="deleteConversation(conversation.conversationId)">
|
||||
<DeleteOutlined />
|
||||
删除对话
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="empty-conversations" v-else>
|
||||
<CommentOutlined class="empty-icon" />
|
||||
<p>暂无对话记录</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户信息 -->
|
||||
<div class="user-info" v-if="!sidebarCollapsed">
|
||||
<div class="user-avatar">
|
||||
<UserOutlined />
|
||||
</div>
|
||||
<div class="user-details">
|
||||
<div class="user-name">{{ userStore.userInfo.name }}</div>
|
||||
<div class="user-status">在线</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主聊天区域 -->
|
||||
<main class="chat-main">
|
||||
<!-- 聊天头部 -->
|
||||
<header class="chat-header" v-if="chatStore.currentConversation">
|
||||
<div class="chat-info">
|
||||
<h3 class="chat-title">{{ chatStore.currentConversation.title }}</h3>
|
||||
<span class="chat-status">{{ getChatStatus() }}</span>
|
||||
</div>
|
||||
<div class="chat-actions">
|
||||
<a-button type="text" @click="showHistory = true">
|
||||
<HistoryOutlined />
|
||||
历史记录
|
||||
</a-button>
|
||||
<a-button type="text" @click="endCurrentChat">
|
||||
<PoweroffOutlined />
|
||||
结束对话
|
||||
</a-button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 消息区域 -->
|
||||
<div class="messages-container" ref="messagesContainer">
|
||||
<!-- 欢迎界面 -->
|
||||
<div class="welcome-screen" v-if="!activeStore.currentConversation">
|
||||
<div class="welcome-content">
|
||||
<div class="welcome-icon">
|
||||
<RobotOutlined />
|
||||
</div>
|
||||
<h2 class="welcome-title">欢迎使用AI心理健康助手</h2>
|
||||
<p class="welcome-description">
|
||||
我是您的专属AI助手，可以为您提供情绪支持、心理分析和个性化建议。
|
||||
让我们开始一段温暖的对话吧！
|
||||
</p>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="large"
|
||||
class="gradient-btn"
|
||||
@click="createNewChat"
|
||||
>
|
||||
<MessageOutlined />
|
||||
开始对话
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<div class="messages-list" v-else>
|
||||
<div
|
||||
class="message-item"
|
||||
:class="message.sender"
|
||||
v-for="message in activeStore.messages"
|
||||
:key="message.id"
|
||||
>
|
||||
<div class="message-avatar">
|
||||
<UserOutlined v-if="message.sender === 'user'" />
|
||||
<RobotOutlined v-else />
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div class="message-bubble">
|
||||
<div class="message-text" v-html="formatMessage(message.content)"></div>
|
||||
<div class="message-time">{{ formatTime(message.timestamp) }}</div>
|
||||
</div>
|
||||
<!-- 暂时隐藏情绪分析结果 -->
|
||||
<!-- <div class="emotion-analysis" v-if="message.emotionAnalysis">
|
||||
<EmotionAnalysis :analysis="message.emotionAnalysis" />
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI正在输入 -->
|
||||
<div class="message-item assistant" v-if="activeStore.typing">
|
||||
<div class="message-avatar">
|
||||
<RobotOutlined />
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div class="message-bubble typing">
|
||||
<div class="typing-indicator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<div class="input-area" v-if="activeStore.currentConversation">
|
||||
<div class="input-container">
|
||||
<a-textarea
|
||||
v-model:value="inputMessage"
|
||||
:placeholder="inputPlaceholder"
|
||||
:auto-size="{ minRows: 1, maxRows: 4 }"
|
||||
@keydown="handleKeyDown"
|
||||
:disabled="activeStore.typing"
|
||||
class="message-input"
|
||||
/>
|
||||
<div class="input-actions">
|
||||
<!-- 暂时隐藏情绪分析按钮 -->
|
||||
<!-- <a-tooltip title="情绪分析">
|
||||
<a-button
|
||||
type="text"
|
||||
:class="{ active: enableEmotionAnalysis }"
|
||||
@click="enableEmotionAnalysis = !enableEmotionAnalysis"
|
||||
>
|
||||
<HeartOutlined />
|
||||
</a-button>
|
||||
</a-tooltip> -->
|
||||
<a-button
|
||||
type="primary"
|
||||
class="send-btn gradient-btn"
|
||||
@click="sendMessage"
|
||||
:loading="activeStore.typing"
|
||||
:disabled="!inputMessage.trim()"
|
||||
>
|
||||
<SendOutlined />
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 历史记录抽屉 -->
|
||||
<a-drawer
|
||||
v-model:open="showHistory"
|
||||
title="对话历史"
|
||||
placement="right"
|
||||
width="400"
|
||||
>
|
||||
<HistoryPanel />
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, nextTick, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
MenuOutlined,
|
||||
MenuFoldOutlined,
|
||||
PlusOutlined,
|
||||
ReloadOutlined,
|
||||
MoreOutlined,
|
||||
DeleteOutlined,
|
||||
UserOutlined,
|
||||
RobotOutlined,
|
||||
MessageOutlined,
|
||||
SendOutlined,
|
||||
HeartOutlined,
|
||||
HistoryOutlined,
|
||||
PoweroffOutlined,
|
||||
CommentOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useChatStore } from '@/stores/chat'
|
||||
import { useGuestChatStore } from '@/stores/guestChat'
|
||||
import EmotionAnalysis from '@/components/EmotionAnalysis.vue'
|
||||
import HistoryPanel from '@/components/HistoryPanel.vue'
|
||||
import { formatTime, formatMessage } from '@/utils/format'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
const chatStore = useChatStore()
|
||||
const guestChatStore = useGuestChatStore()
|
||||
|
||||
// 判断是否为访客模式（没有登录用户）
|
||||
const isGuestMode = computed(() => !userStore.isLoggedIn)
|
||||
const activeStore = computed(() => isGuestMode.value ? guestChatStore : chatStore)
|
||||
|
||||
// 响应式数据
|
||||
const sidebarCollapsed = ref(false)
|
||||
const inputMessage = ref('')
|
||||
const enableEmotionAnalysis = ref(false) // 暂时禁用情绪分析
|
||||
const showHistory = ref(false)
|
||||
const messagesContainer = ref(null)
|
||||
|
||||
// 计算属性
|
||||
const inputPlaceholder = computed(() => {
|
||||
return activeStore.value.typing ? 'AI正在思考中...' : '输入您想说的话...'
|
||||
})
|
||||
|
||||
// 方法
|
||||
const toggleSidebar = () => {
|
||||
sidebarCollapsed.value = !sidebarCollapsed.value
|
||||
}
|
||||
|
||||
const createNewChat = async () => {
|
||||
try {
|
||||
if (isGuestMode.value) {
|
||||
// 访客模式：清空当前会话，等待用户发送第一条消息
|
||||
guestChatStore.createNewConversation()
|
||||
message.success('准备开始新对话')
|
||||
} else {
|
||||
// 注册用户模式
|
||||
await chatStore.createConversation({
|
||||
userId: userStore.userInfo.id,
|
||||
title: `对话 ${new Date().toLocaleString()}`,
|
||||
type: 'emotion_chat',
|
||||
initialMessage: '您好，我想开始一段新的对话'
|
||||
})
|
||||
message.success('新对话创建成功')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('创建对话失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const refreshConversations = async () => {
|
||||
try {
|
||||
if (isGuestMode.value) {
|
||||
await guestChatStore.fetchConversations()
|
||||
} else {
|
||||
await chatStore.fetchConversations(userStore.userInfo.id)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('刷新对话列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const switchConversation = async (conversation) => {
|
||||
try {
|
||||
if (isGuestMode.value) {
|
||||
await guestChatStore.switchConversation(conversation)
|
||||
} else {
|
||||
await chatStore.switchConversation(conversation)
|
||||
}
|
||||
scrollToBottom()
|
||||
} catch (error) {
|
||||
console.error('切换对话失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const deleteConversation = async (conversationId) => {
|
||||
try {
|
||||
if (isGuestMode.value) {
|
||||
await guestChatStore.endConversation(conversationId)
|
||||
} else {
|
||||
await chatStore.deleteConversation(conversationId)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除对话失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const sendMessage = async () => {
|
||||
if (!inputMessage.value.trim()) return
|
||||
|
||||
const content = inputMessage.value.trim()
|
||||
inputMessage.value = ''
|
||||
|
||||
try {
|
||||
if (isGuestMode.value) {
|
||||
await guestChatStore.sendMessage(content)
|
||||
} else {
|
||||
await chatStore.sendMessage(content, enableEmotionAnalysis.value)
|
||||
}
|
||||
scrollToBottom()
|
||||
} catch (error) {
|
||||
console.error('发送消息失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeyDown = (event) => {
|
||||
if (event.key === 'Enter' && !event.shiftKey) {
|
||||
event.preventDefault()
|
||||
sendMessage()
|
||||
}
|
||||
}
|
||||
|
||||
const getChatStatus = () => {
|
||||
const store = activeStore.value
|
||||
if (store.typing) return 'AI正在输入...'
|
||||
if (store.currentConversation?.status === 'active') return '对话中'
|
||||
return '已结束'
|
||||
}
|
||||
|
||||
const endCurrentChat = async () => {
|
||||
const store = activeStore.value
|
||||
if (!store.currentConversation) return
|
||||
|
||||
try {
|
||||
if (isGuestMode.value) {
|
||||
await guestChatStore.endConversation(store.currentConversation.conversationId)
|
||||
} else {
|
||||
await chatStore.endConversation(store.currentConversation.conversationId)
|
||||
}
|
||||
message.success('对话已结束')
|
||||
} catch (error) {
|
||||
console.error('结束对话失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const scrollToBottom = () => {
|
||||
nextTick(() => {
|
||||
if (messagesContainer.value) {
|
||||
messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 监听消息变化，自动滚动到底部
|
||||
watch(() => activeStore.value.messages.length, () => {
|
||||
scrollToBottom()
|
||||
})
|
||||
|
||||
// 组件挂载
|
||||
onMounted(async () => {
|
||||
// 初始化访客聊天（如果是访客模式）
|
||||
if (isGuestMode.value) {
|
||||
await guestChatStore.initGuestChat()
|
||||
} else {
|
||||
// 获取对话列表
|
||||
await refreshConversations()
|
||||
|
||||
// 如果没有当前对话，自动创建一个
|
||||
if (!chatStore.currentConversation && chatStore.conversations.length === 0) {
|
||||
await createNewChat()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chat-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
background: var(--gradient-primary);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 300px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.collapsed {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: var(--spacing-lg);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.logo h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
flex: 1;
|
||||
padding: var(--spacing-lg);
|
||||
overflow-y: auto;
|
||||
|
||||
.new-chat-btn {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.conversations-list {
|
||||
.list-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--spacing-md);
|
||||
|
||||
.list-title {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.conversations {
|
||||
.conversation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--border-radius-small);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
|
||||
.conversation-time {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.conversation-title {
|
||||
font-weight: 500;
|
||||
margin-bottom: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.conversation-time {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover .more-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-conversations {
|
||||
text-align: center;
|
||||
padding: var(--spacing-xl);
|
||||
color: var(--text-secondary);
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
padding: var(--spacing-lg);
|
||||
border-top: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: var(--gradient-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
.user-name {
|
||||
font-weight: 500;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.user-status {
|
||||
font-size: 12px;
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
|
||||
.chat-header {
|
||||
padding: var(--spacing-lg);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
|
||||
.chat-info {
|
||||
.chat-title {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.chat-status {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
.ant-btn {
|
||||
color: white;
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messages-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--spacing-lg);
|
||||
|
||||
.welcome-screen {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.welcome-content {
|
||||
text-align: center;
|
||||
color: white;
|
||||
max-width: 500px;
|
||||
|
||||
.welcome-icon {
|
||||
font-size: 80px;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 28px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.welcome-description {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messages-list {
|
||||
.message-item {
|
||||
display: flex;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
|
||||
&.user {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.message-content {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.assistant {
|
||||
.message-bubble {
|
||||
background: white;
|
||||
border: 1px solid var(--border-color);
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: var(--gradient-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
margin: 0 var(--spacing-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 70%;
|
||||
|
||||
.message-bubble {
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
|
||||
&.typing {
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
}
|
||||
|
||||
.message-text {
|
||||
line-height: 1.6;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
|
||||
.emotion-analysis {
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-area {
|
||||
padding: var(--spacing-lg);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: var(--spacing-md);
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
|
||||
.message-input {
|
||||
flex: 1;
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.input-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
.ant-btn {
|
||||
&.active {
|
||||
color: var(--primary-color);
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
height: 40px;
|
||||
padding: 0 var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 打字动画
|
||||
.typing-indicator {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
span {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-secondary);
|
||||
animation: typing 1.4s infinite ease-in-out;
|
||||
|
||||
&:nth-child(1) { animation-delay: -0.32s; }
|
||||
&:nth-child(2) { animation-delay: -0.16s; }
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
z-index: 1000;
|
||||
transform: translateX(-100%);
|
||||
|
||||
&:not(.collapsed) {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-main {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="chat-simple">
|
||||
<div class="chat-header">
|
||||
<h1>AI对话页面</h1>
|
||||
<a-button @click="goBack">返回首页</a-button>
|
||||
</div>
|
||||
|
||||
<div class="chat-content">
|
||||
<div class="welcome-message">
|
||||
<h2>欢迎来到AI对话</h2>
|
||||
<p>这是一个简化版的聊天页面，用于测试路由功能。</p>
|
||||
|
||||
<div class="test-buttons">
|
||||
<a-button type="primary" @click="testFunction">测试按钮</a-button>
|
||||
<a-button @click="$router.push('/history')">查看历史</a-button>
|
||||
<a-button @click="$router.push('/analysis')">情绪分析</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const goBack = () => {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
const testFunction = () => {
|
||||
alert('测试按钮工作正常！')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chat-simple {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
|
||||
.chat-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
|
||||
.welcome-message {
|
||||
h2 {
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
margin-bottom: 32px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.test-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<div class="history-page">
|
||||
<!-- 页面头部 -->
|
||||
<header class="page-header glass">
|
||||
<div class="header-content">
|
||||
<div class="page-title">
|
||||
<router-link to="/" class="back-btn">
|
||||
<ArrowLeftOutlined />
|
||||
</router-link>
|
||||
<h1 class="gradient-text">对话历史</h1>
|
||||
<span class="subtitle">查看和管理您的所有对话记录</span>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a-button type="primary" class="gradient-btn" @click="goToChat">
|
||||
<MessageOutlined />
|
||||
新建对话
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<main class="page-content">
|
||||
<div class="content-container">
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-cards">
|
||||
<div class="stat-card card">
|
||||
<div class="stat-icon">
|
||||
<MessageOutlined />
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-number">{{ totalConversations }}</div>
|
||||
<div class="stat-label">总对话数</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card card">
|
||||
<div class="stat-icon">
|
||||
<CommentOutlined />
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-number">{{ totalMessages }}</div>
|
||||
<div class="stat-label">总消息数</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card card">
|
||||
<div class="stat-icon">
|
||||
<ClockCircleOutlined />
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-number">{{ activeConversations }}</div>
|
||||
<div class="stat-label">活跃对话</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card card">
|
||||
<div class="stat-icon">
|
||||
<CalendarOutlined />
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-number">{{ todayConversations }}</div>
|
||||
<div class="stat-label">今日对话</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 历史记录面板 -->
|
||||
<div class="history-panel-container card">
|
||||
<HistoryPanel />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
ArrowLeftOutlined,
|
||||
MessageOutlined,
|
||||
CommentOutlined,
|
||||
ClockCircleOutlined,
|
||||
CalendarOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useChatStore } from '@/stores/chat'
|
||||
import HistoryPanel from '@/components/HistoryPanel.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
const chatStore = useChatStore()
|
||||
|
||||
// 计算属性
|
||||
const totalConversations = computed(() => {
|
||||
return chatStore.conversations.length
|
||||
})
|
||||
|
||||
const totalMessages = computed(() => {
|
||||
return chatStore.conversations.reduce((total, conv) => {
|
||||
return total + (conv.messageCount || 0)
|
||||
}, 0)
|
||||
})
|
||||
|
||||
const activeConversations = computed(() => {
|
||||
return chatStore.conversations.filter(conv => conv.status === 'active').length
|
||||
})
|
||||
|
||||
const todayConversations = computed(() => {
|
||||
const today = new Date()
|
||||
today.setHours(0, 0, 0, 0)
|
||||
|
||||
return chatStore.conversations.filter(conv => {
|
||||
const convDate = new Date(conv.createTime)
|
||||
return convDate >= today
|
||||
}).length
|
||||
})
|
||||
|
||||
// 方法
|
||||
const goToChat = () => {
|
||||
router.push('/chat')
|
||||
}
|
||||
|
||||
// 组件挂载
|
||||
onMounted(async () => {
|
||||
// 获取对话列表
|
||||
if (chatStore.conversations.length === 0) {
|
||||
await chatStore.fetchConversations(userStore.userInfo.id)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.history-page {
|
||||
min-height: 100vh;
|
||||
background: var(--gradient-primary);
|
||||
|
||||
.page-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
padding: var(--spacing-lg) 0;
|
||||
|
||||
.header-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
|
||||
.back-btn {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 20px;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-left: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
.gradient-btn {
|
||||
height: 40px;
|
||||
padding: 0 var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: var(--spacing-xl) var(--spacing-lg);
|
||||
|
||||
.content-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.stats-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
|
||||
.stat-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-lg);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
|
||||
.stat-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: var(--gradient-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.stat-info {
|
||||
.stat-number {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history-panel-container {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: var(--spacing-xl);
|
||||
min-height: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.history-page {
|
||||
.page-header {
|
||||
.header-content {
|
||||
padding: 0 var(--spacing-md);
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
.subtitle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: var(--spacing-lg) var(--spacing-md);
|
||||
|
||||
.stats-cards {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-md);
|
||||
|
||||
.stat-card {
|
||||
padding: var(--spacing-md);
|
||||
|
||||
.stat-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.stat-info {
|
||||
.stat-number {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history-panel-container {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="history-simple">
|
||||
<div class="page-header">
|
||||
<h1>对话历史</h1>
|
||||
<a-button @click="goBack">返回首页</a-button>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="welcome-message">
|
||||
<h2>对话历史记录</h2>
|
||||
<p>这里将显示您的所有对话历史记录。</p>
|
||||
|
||||
<div class="test-buttons">
|
||||
<a-button type="primary" @click="testFunction">测试按钮</a-button>
|
||||
<a-button @click="$router.push('/chat')">开始对话</a-button>
|
||||
<a-button @click="$router.push('/analysis')">情绪分析</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const goBack = () => {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
const testFunction = () => {
|
||||
alert('历史记录页面测试按钮工作正常！')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.history-simple {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
|
||||
.welcome-message {
|
||||
h2 {
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
margin-bottom: 32px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.test-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,569 @@
|
||||
<template>
|
||||
<div class="home-container">
|
||||
<!-- 导航栏 -->
|
||||
<header class="header glass">
|
||||
<div class="header-content">
|
||||
<div class="logo">
|
||||
<h1 class="gradient-text">情绪博物馆</h1>
|
||||
<span class="subtitle">AI心理健康助手</span>
|
||||
</div>
|
||||
<nav class="nav-menu">
|
||||
<a-button type="text" class="nav-item" @click="$router.push('/chat')">
|
||||
<MessageOutlined />
|
||||
AI对话
|
||||
</a-button>
|
||||
<a-button type="text" class="nav-item" @click="$router.push('/history')">
|
||||
<HistoryOutlined />
|
||||
历史记录
|
||||
</a-button>
|
||||
<a-button type="text" class="nav-item" @click="$router.push('/analysis')">
|
||||
<BarChartOutlined />
|
||||
情绪分析
|
||||
</a-button>
|
||||
|
||||
<!-- 用户状态区域 -->
|
||||
<div class="user-area">
|
||||
<template v-if="userStore.isLoggedIn">
|
||||
<a-dropdown>
|
||||
<a-button type="text" class="nav-item user-btn">
|
||||
<UserOutlined />
|
||||
{{ userStore.userInfo.username || userStore.userInfo.account }}
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="profile">
|
||||
<UserOutlined />
|
||||
个人资料
|
||||
</a-menu-item>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="logout" @click="handleLogout">
|
||||
<LogoutOutlined />
|
||||
退出登录
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-button type="text" class="nav-item" @click="$router.push('/login')">
|
||||
<LoginOutlined />
|
||||
登录
|
||||
</a-button>
|
||||
</template>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<main class="main-content">
|
||||
<div class="hero-section">
|
||||
<div class="hero-content fade-in-up">
|
||||
<h2 class="hero-title">
|
||||
欢迎来到情绪博物馆
|
||||
</h2>
|
||||
<p class="hero-description">
|
||||
您的专属AI心理健康助手，提供24/7情绪支持、心理分析和个性化建议
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a-button
|
||||
type="primary"
|
||||
size="large"
|
||||
class="start-chat-btn"
|
||||
@click="startChat"
|
||||
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; margin-right: 16px;"
|
||||
>
|
||||
<MessageOutlined />
|
||||
开始对话
|
||||
</a-button>
|
||||
<a-button
|
||||
size="large"
|
||||
class="learn-more-btn"
|
||||
@click="scrollToFeatures"
|
||||
style="background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: white;"
|
||||
>
|
||||
了解更多
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 装饰性元素 -->
|
||||
<div class="hero-decoration">
|
||||
<div class="floating-card card bounce-in" style="animation-delay: 0.2s">
|
||||
<HeartOutlined class="icon" />
|
||||
<span>情绪识别</span>
|
||||
</div>
|
||||
<div class="floating-card card bounce-in" style="animation-delay: 0.4s">
|
||||
<BulbOutlined class="icon" />
|
||||
<span>智能建议</span>
|
||||
</div>
|
||||
<div class="floating-card card bounce-in" style="animation-delay: 0.6s">
|
||||
<SafetyOutlined class="icon" />
|
||||
<span>隐私保护</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能特性 -->
|
||||
<section class="features-section" ref="featuresRef">
|
||||
<div class="section-header">
|
||||
<h3 class="section-title gradient-text">核心功能</h3>
|
||||
<p class="section-description">专业的AI技术，贴心的情绪关怀</p>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="feature-card card" v-for="feature in features" :key="feature.id">
|
||||
<div class="feature-icon">
|
||||
<component :is="feature.icon" />
|
||||
</div>
|
||||
<h4 class="feature-title">{{ feature.title }}</h4>
|
||||
<p class="feature-description">{{ feature.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 统计数据 -->
|
||||
<section class="stats-section">
|
||||
<div class="stats-container glass">
|
||||
<div class="stat-item" v-for="stat in stats" :key="stat.label">
|
||||
<div class="stat-number gradient-text">{{ stat.value }}</div>
|
||||
<div class="stat-label">{{ stat.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- API测试组件 (仅开发环境) -->
|
||||
<section v-if="showApiTest" class="api-test-section">
|
||||
<ApiTest />
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<p>© 2025 情绪博物馆. 用心守护每一份情绪</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
MessageOutlined,
|
||||
HistoryOutlined,
|
||||
BarChartOutlined,
|
||||
HeartOutlined,
|
||||
BulbOutlined,
|
||||
SafetyOutlined,
|
||||
RobotOutlined,
|
||||
LineChartOutlined,
|
||||
ClockCircleOutlined,
|
||||
LockOutlined,
|
||||
UserOutlined,
|
||||
LoginOutlined,
|
||||
LogoutOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import { ENV_CONFIG } from '@/config/env'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import ApiTest from '@/components/ApiTest.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
const featuresRef = ref(null)
|
||||
|
||||
// 是否显示API测试组件 (仅开发环境)
|
||||
const showApiTest = computed(() => ENV_CONFIG.isDevelopment)
|
||||
|
||||
// 功能特性数据
|
||||
const features = ref([
|
||||
{
|
||||
id: 1,
|
||||
icon: RobotOutlined,
|
||||
title: 'AI智能对话',
|
||||
description: '基于先进的自然语言处理技术，提供自然流畅的对话体验'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: LineChartOutlined,
|
||||
title: '情绪分析',
|
||||
description: '实时分析您的情绪状态，提供专业的心理健康评估'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: ClockCircleOutlined,
|
||||
title: '24/7支持',
|
||||
description: '全天候在线服务，随时随地为您提供情绪支持和心理疏导'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: LockOutlined,
|
||||
title: '隐私保护',
|
||||
description: '严格保护用户隐私，所有对话内容都经过加密处理'
|
||||
}
|
||||
])
|
||||
|
||||
// 统计数据
|
||||
const stats = ref([
|
||||
{ value: '10,000+', label: '用户信赖' },
|
||||
{ value: '50,000+', label: '对话次数' },
|
||||
{ value: '95%', label: '满意度' },
|
||||
{ value: '24/7', label: '在线服务' }
|
||||
])
|
||||
|
||||
// 开始对话
|
||||
const startChat = () => {
|
||||
console.log('开始对话按钮被点击')
|
||||
router.push('/chat')
|
||||
}
|
||||
|
||||
// 滚动到功能区域
|
||||
const scrollToFeatures = () => {
|
||||
featuresRef.value?.scrollIntoView({ behavior: 'smooth' })
|
||||
}
|
||||
|
||||
// 处理登出
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await userStore.logout()
|
||||
message.success('已退出登录')
|
||||
} catch (error) {
|
||||
console.error('登出失败:', error)
|
||||
message.error('登出失败')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 页面加载动画
|
||||
document.body.style.overflow = 'hidden'
|
||||
setTimeout(() => {
|
||||
document.body.style.overflow = 'auto'
|
||||
}, 1000)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home-container {
|
||||
min-height: 100vh;
|
||||
background: var(--gradient-primary);
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
padding: var(--spacing-md) 0;
|
||||
|
||||
.header-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.logo {
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-left: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
|
||||
.nav-item {
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
background: transparent !important;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--border-radius-small);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user-area {
|
||||
margin-left: var(--spacing-md);
|
||||
|
||||
.user-btn {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: var(--spacing-xxl) var(--spacing-lg);
|
||||
|
||||
.hero-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
color: white;
|
||||
|
||||
.hero-title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 18px;
|
||||
margin-bottom: var(--spacing-xxl);
|
||||
opacity: 0.9;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.start-chat-btn {
|
||||
height: 50px;
|
||||
padding: 0 var(--spacing-xl);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.learn-more-btn {
|
||||
height: 50px;
|
||||
padding: 0 var(--spacing-xl);
|
||||
font-size: 16px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-decoration {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.floating-card {
|
||||
position: absolute;
|
||||
padding: var(--spacing-md);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
white-space: nowrap;
|
||||
|
||||
.icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
top: -60px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
top: 20px;
|
||||
right: -40px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
top: 100px;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.features-section {
|
||||
padding: var(--spacing-xxl) var(--spacing-lg);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-xxl);
|
||||
color: white;
|
||||
|
||||
.section-title {
|
||||
font-size: 36px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.section-description {
|
||||
font-size: 16px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
|
||||
.feature-card {
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
|
||||
.feature-icon {
|
||||
font-size: 48px;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 20px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.feature-description {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
padding: var(--spacing-xxl) var(--spacing-lg);
|
||||
|
||||
.stats-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-xl);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
text-align: center;
|
||||
|
||||
.stat-item {
|
||||
.stat-number {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.api-test-section {
|
||||
padding: var(--spacing-xxl) var(--spacing-lg);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
|
||||
:deep(.ant-card) {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: none;
|
||||
border-radius: var(--border-radius-large);
|
||||
box-shadow: var(--shadow-large);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: var(--spacing-xl) var(--spacing-lg);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
|
||||
.footer-content {
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.header {
|
||||
.header-content {
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
gap: var(--spacing-md);
|
||||
|
||||
.nav-item {
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
.hero-content {
|
||||
.hero-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-decoration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.features-section {
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
.stats-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="home-test">
|
||||
<h1>情绪博物馆测试页面</h1>
|
||||
<p>如果您能看到这个页面，说明Vue应用正在正常工作！</p>
|
||||
|
||||
<div class="test-buttons">
|
||||
<button @click="testAlert" class="test-btn">测试按钮1</button>
|
||||
<button @click="goToChat" class="test-btn">前往聊天页面</button>
|
||||
<button @click="goToHistory" class="test-btn">前往历史页面</button>
|
||||
<button @click="goToAnalysis" class="test-btn">前往分析页面</button>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p>当前时间: {{ currentTime }}</p>
|
||||
<p>页面加载状态: 正常</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const currentTime = ref('')
|
||||
|
||||
const updateTime = () => {
|
||||
currentTime.value = new Date().toLocaleString()
|
||||
}
|
||||
|
||||
const testAlert = () => {
|
||||
alert('测试按钮工作正常！Vue应用运行正常！')
|
||||
}
|
||||
|
||||
const goToChat = () => {
|
||||
router.push('/chat')
|
||||
}
|
||||
|
||||
const goToHistory = () => {
|
||||
router.push('/history')
|
||||
}
|
||||
|
||||
const goToAnalysis = () => {
|
||||
router.push('/analysis')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateTime()
|
||||
setInterval(updateTime, 1000)
|
||||
console.log('HomeTest页面加载成功')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-test {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.test-buttons {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.test-btn {
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.test-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.info {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.info p {
|
||||
margin: 10px 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,537 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-card glass">
|
||||
<div class="login-header">
|
||||
<h1 class="gradient-text">情绪博物馆</h1>
|
||||
<p class="subtitle">AI心理健康助手</p>
|
||||
</div>
|
||||
|
||||
<a-tabs v-model:activeKey="activeTab" centered>
|
||||
<!-- 登录标签页 -->
|
||||
<a-tab-pane key="login" tab="登录">
|
||||
<a-form
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
@finish="handleLogin"
|
||||
layout="vertical"
|
||||
class="login-form"
|
||||
>
|
||||
<a-form-item name="account" label="账号">
|
||||
<a-input
|
||||
v-model:value="loginForm.account"
|
||||
placeholder="请输入账号/邮箱/手机号"
|
||||
size="large"
|
||||
:prefix="h(UserOutlined)"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="password" label="密码">
|
||||
<a-input-password
|
||||
v-model:value="loginForm.password"
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
:prefix="h(LockOutlined)"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="captcha" label="验证码">
|
||||
<div class="captcha-wrapper">
|
||||
<CaptchaInput
|
||||
v-model="loginForm.captcha"
|
||||
v-model:captcha-id="loginForm.captchaId"
|
||||
placeholder="请输入验证码"
|
||||
size="large"
|
||||
@enter="handleLogin"
|
||||
/>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<div class="form-options">
|
||||
<a-checkbox v-model:checked="loginForm.rememberMe">
|
||||
记住我
|
||||
</a-checkbox>
|
||||
<a-button type="link" size="small" @click="showSliderCaptcha = true">
|
||||
使用滑块验证
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
block
|
||||
:loading="loginLoading"
|
||||
class="login-btn"
|
||||
>
|
||||
登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
|
||||
<!-- 注册标签页 -->
|
||||
<a-tab-pane key="register" tab="注册">
|
||||
<a-form
|
||||
:model="registerForm"
|
||||
:rules="registerRules"
|
||||
@finish="handleRegister"
|
||||
layout="vertical"
|
||||
class="register-form"
|
||||
>
|
||||
<a-form-item name="account" label="账号">
|
||||
<a-input
|
||||
v-model:value="registerForm.account"
|
||||
placeholder="请输入账号"
|
||||
size="large"
|
||||
:prefix="h(UserOutlined)"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="email" label="邮箱">
|
||||
<a-input
|
||||
v-model:value="registerForm.email"
|
||||
placeholder="请输入邮箱"
|
||||
size="large"
|
||||
:prefix="h(MailOutlined)"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="phone" label="手机号">
|
||||
<a-input
|
||||
v-model:value="registerForm.phone"
|
||||
placeholder="请输入手机号（可选）"
|
||||
size="large"
|
||||
:prefix="h(PhoneOutlined)"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="password" label="密码">
|
||||
<a-input-password
|
||||
v-model:value="registerForm.password"
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
:prefix="h(LockOutlined)"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="confirmPassword" label="确认密码">
|
||||
<a-input-password
|
||||
v-model:value="registerForm.confirmPassword"
|
||||
placeholder="请再次输入密码"
|
||||
size="large"
|
||||
:prefix="h(LockOutlined)"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="username" label="用户名">
|
||||
<a-input
|
||||
v-model:value="registerForm.username"
|
||||
placeholder="请输入用户名"
|
||||
size="large"
|
||||
:prefix="h(UserOutlined)"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="captcha" label="验证码">
|
||||
<div class="captcha-wrapper">
|
||||
<CaptchaInput
|
||||
v-model="registerForm.captcha"
|
||||
v-model:captcha-id="registerForm.captchaId"
|
||||
placeholder="请输入验证码"
|
||||
size="large"
|
||||
@enter="handleRegister"
|
||||
/>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
block
|
||||
:loading="registerLoading"
|
||||
class="register-btn"
|
||||
>
|
||||
注册
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<!-- 第三方登录 -->
|
||||
<SocialLogin @success="handleSocialLoginSuccess" @error="handleSocialLoginError" />
|
||||
|
||||
<div class="login-footer">
|
||||
<a-button type="link" @click="goHome">
|
||||
<ArrowLeftOutlined />
|
||||
返回首页
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 滑块验证码模态框 -->
|
||||
<a-modal
|
||||
v-model:open="showSliderCaptcha"
|
||||
title="滑块验证"
|
||||
:footer="null"
|
||||
:width="350"
|
||||
centered
|
||||
>
|
||||
<SliderCaptcha
|
||||
ref="sliderCaptchaRef"
|
||||
@success="handleSliderSuccess"
|
||||
@error="handleSliderError"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, h } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
UserOutlined,
|
||||
LockOutlined,
|
||||
MailOutlined,
|
||||
PhoneOutlined,
|
||||
ArrowLeftOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { userApi } from '@/api/user'
|
||||
import CaptchaInput from '@/components/CaptchaInput.vue'
|
||||
import SliderCaptcha from '@/components/SliderCaptcha.vue'
|
||||
import SocialLogin from '@/components/SocialLogin.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 当前活跃标签页
|
||||
const activeTab = ref('login')
|
||||
|
||||
// 登录表单
|
||||
const loginForm = reactive({
|
||||
account: '',
|
||||
password: '',
|
||||
rememberMe: false,
|
||||
captchaId: '',
|
||||
captcha: ''
|
||||
})
|
||||
|
||||
// 注册表单
|
||||
const registerForm = reactive({
|
||||
account: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
username: '',
|
||||
captchaId: '',
|
||||
captcha: ''
|
||||
})
|
||||
|
||||
// 加载状态
|
||||
const loginLoading = ref(false)
|
||||
const registerLoading = ref(false)
|
||||
const showSliderCaptcha = ref(false)
|
||||
|
||||
// 组件引用
|
||||
const sliderCaptchaRef = ref(null)
|
||||
|
||||
// 登录表单验证规则
|
||||
const loginRules = {
|
||||
account: [
|
||||
{ required: true, message: '请输入账号', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
|
||||
],
|
||||
captchaId: [
|
||||
{ required: true, message: '请获取验证码', trigger: 'blur' }
|
||||
],
|
||||
captcha: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 注册表单验证规则
|
||||
const registerRules = {
|
||||
account: [
|
||||
{ required: true, message: '请输入账号', trigger: 'blur' },
|
||||
{ min: 3, max: 20, message: '账号长度为3-20位', trigger: 'blur' },
|
||||
{ pattern: /^[a-zA-Z0-9_]+$/, message: '账号只能包含字母、数字和下划线', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
|
||||
],
|
||||
phone: [
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: '密码长度为6-20位', trigger: 'blur' }
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, message: '请确认密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value) => {
|
||||
if (value !== registerForm.password) {
|
||||
return Promise.reject('两次密码输入不一致')
|
||||
}
|
||||
return Promise.resolve()
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 2, max: 10, message: '用户名长度为2-10位', trigger: 'blur' }
|
||||
],
|
||||
captchaId: [
|
||||
{ required: true, message: '请获取验证码', trigger: 'blur' }
|
||||
],
|
||||
captcha: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 处理登录
|
||||
const handleLogin = async (values) => {
|
||||
try {
|
||||
loginLoading.value = true
|
||||
const response = await userApi.login(values)
|
||||
|
||||
if (response.success) {
|
||||
const { accessToken, refreshToken, userInfo } = response.data
|
||||
|
||||
// 存储token
|
||||
localStorage.setItem('token', accessToken)
|
||||
localStorage.setItem('refreshToken', refreshToken)
|
||||
|
||||
// 更新用户状态
|
||||
userStore.setUser(userInfo)
|
||||
|
||||
message.success('登录成功')
|
||||
|
||||
// 跳转到首页或之前的页面
|
||||
const redirect = router.currentRoute.value.query.redirect || '/'
|
||||
router.push(redirect)
|
||||
} else {
|
||||
message.error(response.message || '登录失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('登录失败:', error)
|
||||
message.error('登录失败，请稍后重试')
|
||||
} finally {
|
||||
loginLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 处理注册
|
||||
const handleRegister = async (values) => {
|
||||
try {
|
||||
registerLoading.value = true
|
||||
const response = await userApi.register(values)
|
||||
|
||||
if (response.success) {
|
||||
message.success('注册成功，请登录')
|
||||
activeTab.value = 'login'
|
||||
|
||||
// 清空注册表单
|
||||
Object.keys(registerForm).forEach(key => {
|
||||
registerForm[key] = ''
|
||||
})
|
||||
} else {
|
||||
message.error(response.message || '注册失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('注册失败:', error)
|
||||
message.error('注册失败，请稍后重试')
|
||||
} finally {
|
||||
registerLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 返回首页
|
||||
const goHome = () => {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
// 处理第三方登录成功
|
||||
const handleSocialLoginSuccess = (userInfo) => {
|
||||
message.success('登录成功')
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
// 处理第三方登录失败
|
||||
const handleSocialLoginError = (error) => {
|
||||
console.error('第三方登录失败:', error)
|
||||
}
|
||||
|
||||
// 处理滑块验证成功
|
||||
const handleSliderSuccess = (captchaId) => {
|
||||
showSliderCaptcha.value = false
|
||||
// 可以在这里设置滑块验证码ID到表单中
|
||||
if (activeTab.value === 'login') {
|
||||
loginForm.captchaId = captchaId
|
||||
loginForm.captcha = 'slider_verified'
|
||||
} else {
|
||||
registerForm.captchaId = captchaId
|
||||
registerForm.captcha = 'slider_verified'
|
||||
}
|
||||
message.success('滑块验证成功')
|
||||
}
|
||||
|
||||
// 处理滑块验证失败
|
||||
const handleSliderError = () => {
|
||||
message.error('滑块验证失败，请重试')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 40px;
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(20px);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(45deg, #fff, #f0f0f0);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.login-form,
|
||||
.register-form {
|
||||
:deep(.ant-form-item-label > label) {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.ant-input),
|
||||
:deep(.ant-input-password .ant-input) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-input-prefix) {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
:deep(.ant-checkbox-wrapper) {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.login-btn,
|
||||
.register-btn {
|
||||
background: linear-gradient(45deg, #667eea, #764ba2);
|
||||
border: none;
|
||||
height: 45px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(45deg, #5a6fd8, #6a4190);
|
||||
}
|
||||
}
|
||||
|
||||
.captcha-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.ant-checkbox-wrapper {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.ant-btn-link {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
|
||||
:deep(.ant-btn-link) {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-tab) {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
|
||||
&.ant-tabs-tab-active {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-ink-bar) {
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user