feat: 添加首页导航
This commit is contained in:
zerosaturation
parent
37a3355649
commit
1c878f961e
@ -5,4 +5,4 @@ VITE_APP_TITLE = 安信平台系统
|
||||
VITE_APP_ENV = 'development'
|
||||
|
||||
# 安信平台系统/开发环境
|
||||
VITE_APP_BASE_API = '/dev-api'
|
||||
VITE_APP_BASE_API = '/prod-api'
|
||||
|
||||
4
RuoYi-Vue3/src/assets/icons/svg/clock.svg
Normal file
4
RuoYi-Vue3/src/assets/icons/svg/clock.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="currentColor" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"/>
|
||||
<path fill="currentColor" d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165 120.7c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.5 1.8-8.5-1.4-11.3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 474 B |
3
RuoYi-Vue3/src/assets/icons/svg/grid.svg
Normal file
3
RuoYi-Vue3/src/assets/icons/svg/grid.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="currentColor" d="M128 128h192v192H128V128zm0 256h192v192H128V384zm0 256h192v192H128V640zM384 128h192v192H384V128zm0 256h192v192H384V384zm0 256h192v192H384V640zM640 128h192v192H640V128zm0 256h192v192H640V384zm0 256h192v192H640V640zM896 128h128v192H896V128zm0 256h128v192H896V384zm0 256h128v192H896V640z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 390 B |
@ -1,5 +1,623 @@
|
||||
<template>
|
||||
<div>
|
||||
1
|
||||
<div class="dashboard-container">
|
||||
<!-- 欢迎区域 -->
|
||||
<div class="welcome-section">
|
||||
<el-card class="welcome-card">
|
||||
<div class="welcome-content">
|
||||
<div class="welcome-text">
|
||||
<h1>欢迎使用安信数字化助信管理系统</h1>
|
||||
<p>高效、安全、智能的助信业务管理平台</p>
|
||||
</div>
|
||||
<div class="welcome-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ stats.totalContracts }}</div>
|
||||
<div class="stat-label">合同总数</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ stats.activeLoans }}</div>
|
||||
<div class="stat-label">活跃贷款</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{{ stats.totalEmployees }}</div>
|
||||
<div class="stat-label">员工总数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 快速导航区域 -->
|
||||
<div class="quick-nav-section">
|
||||
<h2 class="section-title">
|
||||
<svg-icon icon-class="dashboard" />
|
||||
快速导航
|
||||
</h2>
|
||||
<div class="nav-grid">
|
||||
<div
|
||||
v-for="item in navigationItems"
|
||||
:key="item.name"
|
||||
class="nav-item"
|
||||
@click="navigateTo(item.path)"
|
||||
>
|
||||
<div class="nav-icon">
|
||||
<svg-icon :icon-class="item.icon" />
|
||||
</div>
|
||||
<div class="nav-content">
|
||||
<h3>{{ item.title }}</h3>
|
||||
<p>{{ item.description }}</p>
|
||||
</div>
|
||||
<div class="nav-arrow">
|
||||
<svg-icon icon-class="enter" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 常用功能区域 -->
|
||||
<div class="common-actions-section">
|
||||
<h2 class="section-title">
|
||||
<svg-icon icon-class="star" />
|
||||
常用功能
|
||||
</h2>
|
||||
<div class="actions-grid">
|
||||
<el-card
|
||||
v-for="action in commonActions"
|
||||
:key="action.name"
|
||||
class="action-card"
|
||||
shadow="hover"
|
||||
@click="navigateTo(action.path)"
|
||||
>
|
||||
<div class="action-content">
|
||||
<div class="action-icon">
|
||||
<svg-icon :icon-class="action.icon" />
|
||||
</div>
|
||||
<div class="action-text">
|
||||
<h4>{{ action.title }}</h4>
|
||||
<span>{{ action.subtitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近活动区域 -->
|
||||
<div class="recent-activity-section">
|
||||
<h2 class="section-title">
|
||||
<svg-icon icon-class="time" />
|
||||
最近活动
|
||||
</h2>
|
||||
<el-card class="activity-card">
|
||||
<div class="activity-list">
|
||||
<div
|
||||
v-for="activity in recentActivities"
|
||||
:key="activity.id"
|
||||
class="activity-item"
|
||||
>
|
||||
<div class="activity-icon">
|
||||
<svg-icon :icon-class="activity.icon" />
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<div class="activity-title">{{ activity.title }}</div>
|
||||
<div class="activity-time">{{ activity.time }}</div>
|
||||
</div>
|
||||
<div class="activity-status">
|
||||
<el-tag :type="activity.statusType" size="small">
|
||||
{{ activity.status }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 统计数据
|
||||
const stats = reactive({
|
||||
totalContracts: 0,
|
||||
activeLoans: 0,
|
||||
totalEmployees: 0
|
||||
})
|
||||
|
||||
// 主要导航项 - 使用实际存在的路由路径
|
||||
const navigationItems = ref([
|
||||
{
|
||||
name: 'contract',
|
||||
title: '合同管理',
|
||||
description: '合同创建、审核、确认和管理',
|
||||
icon: 'documentation',
|
||||
path: '/digitalCredit/list' // 实际不存在路由，需要通过菜单访问
|
||||
},
|
||||
{
|
||||
name: 'employee',
|
||||
title: '员工管理',
|
||||
description: '员工信息、分组和数据验证',
|
||||
icon: 'peoples',
|
||||
path: '/employee/library' // 实际不存在路由，需要通过菜单访问
|
||||
},
|
||||
{
|
||||
name: 'credit',
|
||||
title: '债权管理',
|
||||
description: '债权生成、验证和详情查看',
|
||||
icon: 'money',
|
||||
path: '/credit/creditList' // 实际不存在路由，需要通过菜单访问
|
||||
},
|
||||
{
|
||||
name: 'bank',
|
||||
title: '银行管理',
|
||||
description: '提供贷款的银行及贷款产品',
|
||||
icon: 'shopping',
|
||||
path: '/financing/bank-institution' // 实际不存在路由，需要通过菜单访问
|
||||
},
|
||||
{
|
||||
name: 'loan',
|
||||
title: '贷款管理',
|
||||
description: '贷款申请、审批和风险评估',
|
||||
icon: 'shopping',
|
||||
path: '/financing/loan-management' // 实际不存在路由，需要通过菜单访问
|
||||
},
|
||||
{
|
||||
name: 'monitor',
|
||||
title: '系统监控',
|
||||
description: '系统运行状态和性能监控',
|
||||
icon: 'monitor',
|
||||
path: '/monitor' // 通过菜单访问
|
||||
},
|
||||
{
|
||||
name: 'system',
|
||||
title: '系统管理',
|
||||
description: '用户、角色、权限和系统配置',
|
||||
icon: 'system',
|
||||
path: '/system' // 通过菜单访问
|
||||
}
|
||||
])
|
||||
|
||||
// 常用功能 - 使用确实存在的路由路径
|
||||
const commonActions = ref([
|
||||
{
|
||||
name: 'create-contract',
|
||||
title: '创建合同',
|
||||
subtitle: '快速创建新合同',
|
||||
icon: 'edit',
|
||||
path: '/digitalCredit/create' // 确实存在的路由
|
||||
},
|
||||
{
|
||||
name: 'employee-validate',
|
||||
title: '员工数据验证',
|
||||
subtitle: '验证员工数据完整性',
|
||||
icon: 'eye-open',
|
||||
path: '/employee/validate' // 确实存在的路由
|
||||
},
|
||||
{
|
||||
name: 'generate-credit',
|
||||
title: '生成债权',
|
||||
subtitle: '基于合同生成债权',
|
||||
icon: 'form',
|
||||
path: '/credit/generate' // 确实存在的路由
|
||||
},
|
||||
{
|
||||
name: 'user-profile',
|
||||
title: '个人中心',
|
||||
subtitle: '查看和修改个人信息',
|
||||
icon: 'user',
|
||||
path: '/user/profile' // 确实存在的路由
|
||||
},
|
||||
{
|
||||
name: 'contract-list',
|
||||
title: '合同列表',
|
||||
subtitle: '查看所有合同信息',
|
||||
icon: 'list',
|
||||
path: '/digitalCredit/contract/list' // 通过菜单访问
|
||||
},
|
||||
{
|
||||
name: 'credit-list',
|
||||
title: '债权列表',
|
||||
subtitle: '查看所有债权信息',
|
||||
icon: 'money',
|
||||
path: '/digitalCredit/credit/list' // 通过菜单访问
|
||||
}
|
||||
])
|
||||
|
||||
// 最近活动
|
||||
const recentActivities = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: '新增合同 #CT2024001',
|
||||
time: '2小时前',
|
||||
status: '待审核',
|
||||
statusType: 'warning',
|
||||
icon: 'documentation'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '员工数据验证完成',
|
||||
time: '4小时前',
|
||||
status: '已完成',
|
||||
statusType: 'success',
|
||||
icon: 'peoples'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '债权 #CR2024005 已生成',
|
||||
time: '6小时前',
|
||||
status: '已生成',
|
||||
statusType: 'success',
|
||||
icon: 'money'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '贷款申请 #LN2024012',
|
||||
time: '1天前',
|
||||
status: '审核中',
|
||||
statusType: 'info',
|
||||
icon: 'shopping'
|
||||
}
|
||||
])
|
||||
|
||||
// 导航方法 - 智能路由处理
|
||||
const navigateTo = (path) => {
|
||||
// 需要通过菜单访问的路由
|
||||
const menuOnlyRoutes = [
|
||||
'/digitalCredit/contract/list',
|
||||
'/digitalCredit/employee/index',
|
||||
'/digitalCredit/credit/list',
|
||||
'/digitalCredit/loan/financing/loan-management',
|
||||
'/monitor',
|
||||
'/system',
|
||||
'/tool'
|
||||
]
|
||||
|
||||
// 确实存在的直接路由
|
||||
const directRoutes = [
|
||||
'/digitalCredit/create',
|
||||
'/employee/validate',
|
||||
'/credit/generate',
|
||||
'/user/profile'
|
||||
]
|
||||
|
||||
if (menuOnlyRoutes.includes(path)) {
|
||||
ElMessage({
|
||||
message: '该功能需要通过左侧菜单访问，或联系管理员配置相应权限',
|
||||
type: 'info',
|
||||
duration: 3000
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (directRoutes.includes(path)) {
|
||||
router.push(path).catch(err => {
|
||||
console.error('路由跳转失败:', err)
|
||||
ElMessage.error('页面跳转失败，请检查路由配置或权限')
|
||||
})
|
||||
} else {
|
||||
// 对于其他路径，尝试跳转，如果失败则提示
|
||||
router.push(path).catch(err => {
|
||||
console.error('路由跳转失败:', err)
|
||||
ElMessage.warning('该功能可能需要特定权限或通过菜单访问')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 加载统计数据
|
||||
const loadStats = async () => {
|
||||
try {
|
||||
// 这里可以调用实际的API获取统计数据
|
||||
// const response = await api.getStats()
|
||||
// stats.totalContracts = response.data.contracts
|
||||
// stats.activeLoans = response.data.loans
|
||||
// stats.totalEmployees = response.data.employees
|
||||
|
||||
// 模拟数据
|
||||
stats.totalContracts = 156
|
||||
stats.activeLoans = 89
|
||||
stats.totalEmployees = 1234
|
||||
} catch (error) {
|
||||
console.error('加载统计数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadStats()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
min-height: calc(100vh - 84px);
|
||||
}
|
||||
|
||||
/* 欢迎区域 */
|
||||
.welcome-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.welcome-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.welcome-card :deep(.el-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.welcome-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 40px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.welcome-text h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.welcome-text p {
|
||||
font-size: 16px;
|
||||
opacity: 0.9;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.welcome-stats {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 区域标题 */
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 快速导航区域 */
|
||||
.quick-nav-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.nav-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
margin-right: 16px;
|
||||
color: #409EFF;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.nav-icon :deep(.svg-icon) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-content h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.nav-content p {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
color: #C0C4CC;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-item:hover .nav-arrow {
|
||||
color: #409EFF;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
/* 常用功能区域 */
|
||||
.common-actions-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.actions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.action-card {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.action-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.action-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
color: #409EFF;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.action-icon :deep(.svg-icon) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.action-text h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.action-text span {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 最近活动区域 */
|
||||
.recent-activity-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.activity-card {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background-color: #fafafa;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.activity-item:hover {
|
||||
background-color: #f0f9ff;
|
||||
}
|
||||
|
||||
.activity-icon {
|
||||
margin-right: 12px;
|
||||
color: #409EFF;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.activity-icon :deep(.svg-icon) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.activity-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.activity-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.activity-status {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.welcome-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.welcome-stats {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.nav-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.actions-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.welcome-text h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.welcome-stats {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.actions-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -47,8 +47,9 @@ export default defineConfig(({ mode, command }) => {
|
||||
open: true,
|
||||
proxy: {
|
||||
// https://cn.vitejs.dev/config/#server-proxy
|
||||
'/dev-api': {
|
||||
target: baseUrl,
|
||||
'/prod-api': {
|
||||
// target: baseUrl,
|
||||
target: "http://anxin.liantu.tech",
|
||||
changeOrigin: true,
|
||||
rewrite: (p) => p.replace(/^\/dev-api/, '')
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user