feat: 账号管理页面
This commit is contained in:
Edan's Win11
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>关于我们</h1>
|
||||
<p>这是关于页面</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 关于页面组件
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/variables.scss' as *;
|
||||
|
||||
.about {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,840 @@
|
||||
<template>
|
||||
<div class="account-management">
|
||||
<div class="page-header">
|
||||
<h1>账号管理</h1>
|
||||
</div>
|
||||
|
||||
<div class="account-tabs">
|
||||
<el-tabs v-model="activeTab" class="account-tabs-nav">
|
||||
<el-tab-pane label="全部" name="all">
|
||||
<div class="account-list-container">
|
||||
<div class="account-search">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="输入名称或账号搜索"
|
||||
prefix-icon="Search"
|
||||
clearable
|
||||
@clear="handleSearch"
|
||||
@input="handleSearch"
|
||||
/>
|
||||
<div class="action-buttons">
|
||||
<el-button type="primary" @click="handleAddAccount">添加账号</el-button>
|
||||
<el-button type="info" @click="fetchAccounts" :loading="false">
|
||||
<el-icon :class="{ 'is-loading': appStore.isAccountRefreshing }"><Refresh /></el-icon>
|
||||
<span v-if="appStore.isAccountRefreshing">刷新中</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="filteredAccounts.length > 0" class="account-list">
|
||||
<el-table :data="filteredAccounts" style="width: 100%">
|
||||
<el-table-column label="头像" width="80">
|
||||
<template #default="scope">
|
||||
<el-avatar :src="scope.row.avatar" :size="40" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" width="180" />
|
||||
<el-table-column prop="platform" label="平台">
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
:type="getPlatformTagType(scope.row.platform)"
|
||||
effect="plain"
|
||||
>
|
||||
{{ scope.row.platform }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
:type="scope.row.status === '正常' ? 'success' : 'danger'"
|
||||
effect="plain"
|
||||
>
|
||||
{{ scope.row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-data">
|
||||
<el-empty description="暂无账号数据" />
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="快手" name="kuaishou">
|
||||
<div class="account-list-container">
|
||||
<div class="account-search">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="输入名称或账号搜索"
|
||||
prefix-icon="Search"
|
||||
clearable
|
||||
@clear="handleSearch"
|
||||
@input="handleSearch"
|
||||
/>
|
||||
<div class="action-buttons">
|
||||
<el-button type="primary" @click="handleAddAccount">添加账号</el-button>
|
||||
<el-button type="info" @click="fetchAccounts" :loading="false">
|
||||
<el-icon :class="{ 'is-loading': appStore.isAccountRefreshing }"><Refresh /></el-icon>
|
||||
<span v-if="appStore.isAccountRefreshing">刷新中</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="filteredKuaishouAccounts.length > 0" class="account-list">
|
||||
<el-table :data="filteredKuaishouAccounts" style="width: 100%">
|
||||
<el-table-column label="头像" width="80">
|
||||
<template #default="scope">
|
||||
<el-avatar :src="scope.row.avatar" :size="40" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" width="180" />
|
||||
<el-table-column prop="platform" label="平台">
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
:type="getPlatformTagType(scope.row.platform)"
|
||||
effect="plain"
|
||||
>
|
||||
{{ scope.row.platform }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
:type="scope.row.status === '正常' ? 'success' : 'danger'"
|
||||
effect="plain"
|
||||
>
|
||||
{{ scope.row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-data">
|
||||
<el-empty description="暂无快手账号数据" />
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="抖音" name="douyin">
|
||||
<div class="account-list-container">
|
||||
<div class="account-search">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="输入名称或账号搜索"
|
||||
prefix-icon="Search"
|
||||
clearable
|
||||
@clear="handleSearch"
|
||||
@input="handleSearch"
|
||||
/>
|
||||
<div class="action-buttons">
|
||||
<el-button type="primary" @click="handleAddAccount">添加账号</el-button>
|
||||
<el-button type="info" @click="fetchAccounts" :loading="false">
|
||||
<el-icon :class="{ 'is-loading': appStore.isAccountRefreshing }"><Refresh /></el-icon>
|
||||
<span v-if="appStore.isAccountRefreshing">刷新中</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="filteredDouyinAccounts.length > 0" class="account-list">
|
||||
<el-table :data="filteredDouyinAccounts" style="width: 100%">
|
||||
<el-table-column label="头像" width="80">
|
||||
<template #default="scope">
|
||||
<el-avatar :src="scope.row.avatar" :size="40" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" width="180" />
|
||||
<el-table-column prop="platform" label="平台">
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
:type="getPlatformTagType(scope.row.platform)"
|
||||
effect="plain"
|
||||
>
|
||||
{{ scope.row.platform }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
:type="scope.row.status === '正常' ? 'success' : 'danger'"
|
||||
effect="plain"
|
||||
>
|
||||
{{ scope.row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-data">
|
||||
<el-empty description="暂无抖音账号数据" />
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="视频号" name="channels">
|
||||
<div class="account-list-container">
|
||||
<div class="account-search">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="输入名称或账号搜索"
|
||||
prefix-icon="Search"
|
||||
clearable
|
||||
@clear="handleSearch"
|
||||
@input="handleSearch"
|
||||
/>
|
||||
<div class="action-buttons">
|
||||
<el-button type="primary" @click="handleAddAccount">添加账号</el-button>
|
||||
<el-button type="info" @click="fetchAccounts" :loading="false">
|
||||
<el-icon :class="{ 'is-loading': appStore.isAccountRefreshing }"><Refresh /></el-icon>
|
||||
<span v-if="appStore.isAccountRefreshing">刷新中</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="filteredChannelsAccounts.length > 0" class="account-list">
|
||||
<el-table :data="filteredChannelsAccounts" style="width: 100%">
|
||||
<el-table-column label="头像" width="80">
|
||||
<template #default="scope">
|
||||
<el-avatar :src="scope.row.avatar" :size="40" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" width="180" />
|
||||
<el-table-column prop="platform" label="平台">
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
:type="getPlatformTagType(scope.row.platform)"
|
||||
effect="plain"
|
||||
>
|
||||
{{ scope.row.platform }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
:type="scope.row.status === '正常' ? 'success' : 'danger'"
|
||||
effect="plain"
|
||||
>
|
||||
{{ scope.row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-data">
|
||||
<el-empty description="暂无视频号账号数据" />
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="小红书" name="xiaohongshu">
|
||||
<div class="account-list-container">
|
||||
<div class="account-search">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="输入名称或账号搜索"
|
||||
prefix-icon="Search"
|
||||
clearable
|
||||
@clear="handleSearch"
|
||||
@input="handleSearch"
|
||||
/>
|
||||
<div class="action-buttons">
|
||||
<el-button type="primary" @click="handleAddAccount">添加账号</el-button>
|
||||
<el-button type="info" @click="fetchAccounts" :loading="false">
|
||||
<el-icon :class="{ 'is-loading': appStore.isAccountRefreshing }"><Refresh /></el-icon>
|
||||
<span v-if="appStore.isAccountRefreshing">刷新中</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="filteredXiaohongshuAccounts.length > 0" class="account-list">
|
||||
<el-table :data="filteredXiaohongshuAccounts" style="width: 100%">
|
||||
<el-table-column label="头像" width="80">
|
||||
<template #default="scope">
|
||||
<el-avatar :src="scope.row.avatar" :size="40" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" width="180" />
|
||||
<el-table-column prop="platform" label="平台">
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
:type="getPlatformTagType(scope.row.platform)"
|
||||
effect="plain"
|
||||
>
|
||||
{{ scope.row.platform }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
:type="scope.row.status === '正常' ? 'success' : 'danger'"
|
||||
effect="plain"
|
||||
>
|
||||
{{ scope.row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-data">
|
||||
<el-empty description="暂无小红书账号数据" />
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<!-- 添加/编辑账号对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogType === 'add' ? '添加账号' : '编辑账号'"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="!sseConnecting"
|
||||
:show-close="!sseConnecting"
|
||||
>
|
||||
<el-form :model="accountForm" label-width="80px" :rules="rules" ref="accountFormRef">
|
||||
<el-form-item label="平台" prop="platform">
|
||||
<el-select
|
||||
v-model="accountForm.platform"
|
||||
placeholder="请选择平台"
|
||||
style="width: 100%"
|
||||
:disabled="sseConnecting"
|
||||
>
|
||||
<el-option label="快手" value="快手" />
|
||||
<el-option label="抖音" value="抖音" />
|
||||
<el-option label="视频号" value="视频号" />
|
||||
<el-option label="小红书" value="小红书" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input
|
||||
v-model="accountForm.name"
|
||||
placeholder="请输入账号名称"
|
||||
:disabled="sseConnecting"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 二维码显示区域 -->
|
||||
<div v-if="sseConnecting" class="qrcode-container">
|
||||
<div v-if="qrCodeData && !loginStatus" class="qrcode-wrapper">
|
||||
<p class="qrcode-tip">请使用对应平台APP扫描二维码登录</p>
|
||||
<img :src="qrCodeData" alt="登录二维码" class="qrcode-image" />
|
||||
</div>
|
||||
<div v-else-if="!qrCodeData && !loginStatus" class="loading-wrapper">
|
||||
<el-icon class="is-loading"><Refresh /></el-icon>
|
||||
<span>请求中...</span>
|
||||
</div>
|
||||
<div v-else-if="loginStatus === '200'" class="success-wrapper">
|
||||
<el-icon><CircleCheckFilled /></el-icon>
|
||||
<span>添加成功</span>
|
||||
</div>
|
||||
<div v-else-if="loginStatus === '500'" class="error-wrapper">
|
||||
<el-icon><CircleCloseFilled /></el-icon>
|
||||
<span>添加失败，请稍后再试</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false" :disabled="sseConnecting && !loginStatus">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitAccountForm"
|
||||
:loading="sseConnecting"
|
||||
:disabled="sseConnecting"
|
||||
>
|
||||
{{ sseConnecting ? '请求中' : '确认' }}
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { Refresh, CircleCheckFilled, CircleCloseFilled } from '@element-plus/icons-vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { accountApi } from '@/api/account'
|
||||
import { useAccountStore } from '@/stores/account'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
|
||||
// 获取账号状态管理
|
||||
const accountStore = useAccountStore()
|
||||
// 获取应用状态管理
|
||||
const appStore = useAppStore()
|
||||
|
||||
// 当前激活的标签页
|
||||
const activeTab = ref('all')
|
||||
|
||||
// 搜索关键词
|
||||
const searchKeyword = ref('')
|
||||
|
||||
// 获取账号数据
|
||||
const fetchAccounts = async () => {
|
||||
if (appStore.isAccountRefreshing) return
|
||||
|
||||
appStore.setAccountRefreshing(true)
|
||||
|
||||
try {
|
||||
const res = await accountApi.getValidAccounts()
|
||||
if (res.code === 200 && res.data) {
|
||||
accountStore.setAccounts(res.data)
|
||||
ElMessage.success('账号数据获取成功')
|
||||
// 标记为已访问
|
||||
if (appStore.isFirstTimeAccountManagement) {
|
||||
appStore.setAccountManagementVisited()
|
||||
}
|
||||
} else {
|
||||
ElMessage.error('获取账号数据失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取账号数据失败:', error)
|
||||
ElMessage.error('获取账号数据失败')
|
||||
} finally {
|
||||
appStore.setAccountRefreshing(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时获取账号数据
|
||||
onMounted(() => {
|
||||
// 只有第一次进入时才获取数据
|
||||
if (appStore.isFirstTimeAccountManagement) {
|
||||
fetchAccounts()
|
||||
}
|
||||
})
|
||||
|
||||
// 获取平台标签类型
|
||||
const getPlatformTagType = (platform) => {
|
||||
const typeMap = {
|
||||
'快手': 'success',
|
||||
'抖音': 'danger',
|
||||
'视频号': 'warning',
|
||||
'小红书': 'info'
|
||||
}
|
||||
return typeMap[platform] || 'info'
|
||||
}
|
||||
|
||||
// 过滤后的账号列表
|
||||
const filteredAccounts = computed(() => {
|
||||
if (!searchKeyword.value) return accountStore.accounts
|
||||
return accountStore.accounts.filter(account =>
|
||||
account.name.includes(searchKeyword.value)
|
||||
)
|
||||
})
|
||||
|
||||
// 按平台过滤的账号列表
|
||||
const filteredKuaishouAccounts = computed(() => {
|
||||
return filteredAccounts.value.filter(account => account.platform === '快手')
|
||||
})
|
||||
|
||||
const filteredDouyinAccounts = computed(() => {
|
||||
return filteredAccounts.value.filter(account => account.platform === '抖音')
|
||||
})
|
||||
|
||||
const filteredChannelsAccounts = computed(() => {
|
||||
return filteredAccounts.value.filter(account => account.platform === '视频号')
|
||||
})
|
||||
|
||||
const filteredXiaohongshuAccounts = computed(() => {
|
||||
return filteredAccounts.value.filter(account => account.platform === '小红书')
|
||||
})
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = () => {
|
||||
// 搜索逻辑已通过计算属性实现
|
||||
}
|
||||
|
||||
// 对话框相关
|
||||
const dialogVisible = ref(false)
|
||||
const dialogType = ref('add') // 'add' 或 'edit'
|
||||
const accountFormRef = ref(null)
|
||||
|
||||
// 账号表单
|
||||
const accountForm = reactive({
|
||||
id: null,
|
||||
name: '',
|
||||
platform: '',
|
||||
status: '正常'
|
||||
})
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
platform: [{ required: true, message: '请选择平台', trigger: 'change' }],
|
||||
name: [{ required: true, message: '请输入账号名称', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
// SSE连接状态
|
||||
const sseConnecting = ref(false)
|
||||
const qrCodeData = ref('')
|
||||
const loginStatus = ref('')
|
||||
|
||||
// 添加账号
|
||||
const handleAddAccount = () => {
|
||||
dialogType.value = 'add'
|
||||
Object.assign(accountForm, {
|
||||
id: null,
|
||||
name: '',
|
||||
platform: '',
|
||||
status: '正常'
|
||||
})
|
||||
// 重置SSE状态
|
||||
sseConnecting.value = false
|
||||
qrCodeData.value = ''
|
||||
loginStatus.value = ''
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 编辑账号
|
||||
const handleEdit = (row) => {
|
||||
dialogType.value = 'edit'
|
||||
Object.assign(accountForm, { ...row })
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 删除账号
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
`确定要删除账号 ${row.name} 吗？`,
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(async () => {
|
||||
try {
|
||||
// 调用API删除账号
|
||||
const response = await accountApi.deleteAccount(row.id)
|
||||
|
||||
if (response.code === 200) {
|
||||
// 从状态管理中删除账号
|
||||
accountStore.deleteAccount(row.id)
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
})
|
||||
} else {
|
||||
ElMessage.error(response.msg || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除账号失败:', error)
|
||||
ElMessage.error('删除账号失败')
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// 取消删除
|
||||
})
|
||||
}
|
||||
|
||||
// SSE事件源对象
|
||||
let eventSource = null
|
||||
|
||||
// 关闭SSE连接
|
||||
const closeSSEConnection = () => {
|
||||
if (eventSource) {
|
||||
eventSource.close()
|
||||
eventSource = null
|
||||
}
|
||||
}
|
||||
|
||||
// 建立SSE连接
|
||||
const connectSSE = (platform, name) => {
|
||||
// 关闭可能存在的连接
|
||||
closeSSEConnection()
|
||||
|
||||
// 设置连接状态
|
||||
sseConnecting.value = true
|
||||
qrCodeData.value = ''
|
||||
loginStatus.value = ''
|
||||
|
||||
// 获取平台类型编号
|
||||
const platformTypeMap = {
|
||||
'小红书': '1',
|
||||
'视频号': '2',
|
||||
'抖音': '3',
|
||||
'快手': '4'
|
||||
}
|
||||
|
||||
const type = platformTypeMap[platform] || '1'
|
||||
|
||||
// 创建SSE连接
|
||||
const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5409'
|
||||
const url = `${baseUrl}/login?type=${type}&id=${encodeURIComponent(name)}`
|
||||
|
||||
eventSource = new EventSource(url)
|
||||
|
||||
// 监听消息
|
||||
eventSource.onmessage = (event) => {
|
||||
const data = event.data
|
||||
console.log('SSE消息:', data)
|
||||
|
||||
// 如果还没有二维码数据，且数据长度较长，认为是二维码
|
||||
if (!qrCodeData.value && data.length > 100) {
|
||||
try {
|
||||
// 确保数据是有效的base64编码
|
||||
// 如果数据已经包含了data:image前缀，直接使用
|
||||
if (data.startsWith('data:image')) {
|
||||
qrCodeData.value = data
|
||||
} else {
|
||||
// 否则添加前缀
|
||||
qrCodeData.value = `data:image/png;base64,${data}`
|
||||
}
|
||||
console.log('设置二维码数据，长度:', data.length)
|
||||
} catch (error) {
|
||||
console.error('处理二维码数据出错:', error)
|
||||
}
|
||||
}
|
||||
// 如果收到状态码
|
||||
else if (data === '200' || data === '500') {
|
||||
loginStatus.value = data
|
||||
|
||||
// 如果登录成功，添加账号到状态管理
|
||||
if (data === '200') {
|
||||
setTimeout(() => {
|
||||
const newId = accountStore.accounts.length > 0 ?
|
||||
Math.max(...accountStore.accounts.map(a => a.id)) + 1 : 1
|
||||
|
||||
const newAccount = {
|
||||
id: newId,
|
||||
name: accountForm.name,
|
||||
platform: accountForm.platform,
|
||||
status: '正常',
|
||||
avatar: '/vite.svg' // 默认头像
|
||||
}
|
||||
|
||||
// 添加到状态管理
|
||||
accountStore.addAccount(newAccount)
|
||||
|
||||
// 关闭连接
|
||||
closeSSEConnection()
|
||||
|
||||
// 1秒后关闭对话框
|
||||
setTimeout(() => {
|
||||
dialogVisible.value = false
|
||||
sseConnecting.value = false
|
||||
ElMessage.success('账号添加成功')
|
||||
|
||||
// 显示更新账号信息提示并刷新账号列表
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '更新账号信息中...',
|
||||
duration: 2000
|
||||
})
|
||||
|
||||
// 触发刷新操作
|
||||
isRefreshing.value = true
|
||||
fetchAccounts()
|
||||
}, 1000)
|
||||
}, 1000)
|
||||
} else {
|
||||
// 登录失败，关闭连接
|
||||
closeSSEConnection()
|
||||
|
||||
// 2秒后重置状态，允许重试
|
||||
setTimeout(() => {
|
||||
sseConnecting.value = false
|
||||
qrCodeData.value = ''
|
||||
loginStatus.value = ''
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 监听错误
|
||||
eventSource.onerror = (error) => {
|
||||
console.error('SSE连接错误:', error)
|
||||
ElMessage.error('连接服务器失败，请稍后再试')
|
||||
closeSSEConnection()
|
||||
sseConnecting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 提交账号表单
|
||||
const submitAccountForm = () => {
|
||||
accountFormRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
if (dialogType.value === 'add') {
|
||||
// 建立SSE连接
|
||||
connectSSE(accountForm.platform, accountForm.name)
|
||||
} else {
|
||||
// 编辑账号逻辑保持不变
|
||||
try {
|
||||
// 更新状态管理中的账号
|
||||
accountStore.updateAccount(accountForm.id, accountForm)
|
||||
ElMessage.success('更新成功')
|
||||
dialogVisible.value = false
|
||||
} catch (error) {
|
||||
console.error('更新账号失败:', error)
|
||||
ElMessage.error('更新账号失败')
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 组件卸载前关闭SSE连接
|
||||
onBeforeUnmount(() => {
|
||||
closeSSEConnection()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '@/styles/variables.scss' as *;
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.account-management {
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
color: $text-primary;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.account-tabs {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: $box-shadow-light;
|
||||
|
||||
.account-tabs-nav {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.account-list-container {
|
||||
.account-search {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-input {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
.el-icon.is-loading {
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-list {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
padding: 40px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 二维码容器样式
|
||||
.qrcode-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 250px;
|
||||
|
||||
.qrcode-wrapper {
|
||||
text-align: center;
|
||||
|
||||
.qrcode-tip {
|
||||
margin-bottom: 15px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.qrcode-image {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
border: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-wrapper, .success-wrapper, .error-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
|
||||
.el-icon {
|
||||
font-size: 48px;
|
||||
|
||||
&.is-loading {
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.success-wrapper .el-icon {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.error-wrapper .el-icon {
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user