Initial commit: X-Server Mobile enterprise tool system
- Frontend: React 18 + TypeScript + Vite + Ant Design Mobile - Backend: PHP 8.5 + Webman 2.x + MySQL + Redis - i18n support: Chinese, English, Russian, Spanish, French - Approval workflow engine - Docker development environment - Feishu integration Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
root
@@ -0,0 +1,284 @@
|
||||
.dashboard {
|
||||
min-height: 100vh;
|
||||
padding: 16px;
|
||||
padding-bottom: calc(16px + env(safe-area-inset-bottom));
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 顶部欢迎区 */
|
||||
.welcome {
|
||||
margin-bottom: 16px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%);
|
||||
border-radius: 16px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.greetingText {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.langBtn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.langBtn:active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.greeting {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.date {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 通用区块 */
|
||||
.section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.sectionHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.more {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 统计卡片 */
|
||||
.statsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.statCard {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 16px 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.statValue {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.statTitle {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
/* 待办事项 */
|
||||
.todoList {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.todoItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.todoItem:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.todoItem:active {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.todoIcon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.todoContent {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.todoTitle {
|
||||
font-size: 14px;
|
||||
color: #262626;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.todoTime {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.todoArrow {
|
||||
font-size: 18px;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 快捷入口 */
|
||||
.actionGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.actionCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 8px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.actionCard:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.actionIcon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.actionLabel {
|
||||
font-size: 12px;
|
||||
color: #595959;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 最新动态 */
|
||||
.activityList {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.activityItem {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.activityItem:not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 32px;
|
||||
bottom: -12px;
|
||||
width: 2px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.activityDot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #1677ff;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 0 0 2px #e6f4ff;
|
||||
flex-shrink: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.activityContent {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.activityContent > div:first-child {
|
||||
font-size: 14px;
|
||||
color: #262626;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.activityTime {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
/* 底部安全区域 */
|
||||
.safeArea {
|
||||
height: 16px;
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { showLanguageSwitcher } from '@/components/LanguageSwitcher'
|
||||
import styles from './dashboard.module.css'
|
||||
|
||||
interface QuickAction {
|
||||
id: string
|
||||
icon: string
|
||||
label: string
|
||||
path: string
|
||||
color: string
|
||||
}
|
||||
|
||||
const quickActions: QuickAction[] = [
|
||||
{ id: '1', icon: '✈️', label: '出差申请', path: '/business-trip/apply', color: '#1677ff' },
|
||||
{ id: '2', icon: '📝', label: '采购申请', path: '/purchase/apply', color: '#52c41a' },
|
||||
{ id: '3', icon: '🏠', label: '会议室', path: '/meeting-room', color: '#faad14' },
|
||||
{ id: '4', icon: '📅', label: '日程管理', path: '/schedule', color: '#722ed1' },
|
||||
{ id: '5', icon: '💰', label: '报销申请', path: '/expense/apply', color: '#eb2f96' },
|
||||
{ id: '6', icon: '📋', label: '请假申请', path: '/leave/apply', color: '#13c2c2' },
|
||||
]
|
||||
|
||||
interface TodoItem {
|
||||
id: string
|
||||
title: string
|
||||
type: 'approval' | 'notice' | 'task'
|
||||
time: string
|
||||
}
|
||||
|
||||
const mockTodos: TodoItem[] = [
|
||||
{ id: '1', title: '张三的出差申请待审批', type: 'approval', time: '10分钟前' },
|
||||
{ id: '2', title: '本周部门会议', type: 'task', time: '今天 14:00' },
|
||||
]
|
||||
|
||||
interface StatCard {
|
||||
title: string
|
||||
value: number
|
||||
unit: string
|
||||
color: string
|
||||
}
|
||||
|
||||
const mockStats: StatCard[] = [
|
||||
{ title: '待审批', value: 5, unit: '条', color: '#ff4d4f' },
|
||||
{ title: '已审批', value: 12, unit: '条', color: '#52c41a' },
|
||||
{ title: '我发起', value: 8, unit: '条', color: '#1677ff' },
|
||||
]
|
||||
|
||||
export default function Dashboard() {
|
||||
const navigate = useNavigate()
|
||||
const { user } = useUserStore()
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleQuickAction = (action: QuickAction) => {
|
||||
navigate(action.path)
|
||||
}
|
||||
|
||||
const getCurrentLanguage = () => {
|
||||
const lang = localStorage.getItem('i18nextLng') || 'zh'
|
||||
const langMap: Record<string, string> = {
|
||||
zh: '🇨🇳',
|
||||
en: '🇬🇧',
|
||||
ru: '🇷🇺',
|
||||
es: '🇪🇸',
|
||||
fr: '🇫🇷',
|
||||
}
|
||||
return langMap[lang] || '🇨🇳'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.dashboard}>
|
||||
{/* 顶部欢迎区 */}
|
||||
<div className={styles.welcome}>
|
||||
<div className={styles.userInfo}>
|
||||
<div className={styles.avatar}>{user?.name?.[0] || 'U'}</div>
|
||||
<div className={styles.greetingText}>
|
||||
<h2 className={styles.greeting}>{t('dashboard.greeting', { name: user?.name || t('login.username') })}</h2>
|
||||
<p className={styles.date}>{new Date().toLocaleDateString('zh-CN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button className={styles.langBtn} onClick={() => showLanguageSwitcher()}>
|
||||
{getCurrentLanguage()}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 数据统计卡片 */}
|
||||
<div className={styles.section}>
|
||||
<h3 className={styles.sectionTitle}>数据概览</h3>
|
||||
<div className={styles.statsGrid}>
|
||||
{mockStats.map((stat) => (
|
||||
<div key={stat.title} className={styles.statCard} style={{ borderTop: `3px solid ${stat.color}` }}>
|
||||
<div className={styles.statValue}>{stat.value}</div>
|
||||
<div className={styles.statTitle}>{stat.title}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 待办事项 */}
|
||||
<div className={styles.section}>
|
||||
<div className={styles.sectionHeader}>
|
||||
<h3 className={styles.sectionTitle}>待办事项</h3>
|
||||
<span className={styles.more}>查看全部 {'>'}</span>
|
||||
</div>
|
||||
{mockTodos.length > 0 ? (
|
||||
<div className={styles.todoList}>
|
||||
{mockTodos.map((todo) => (
|
||||
<div key={todo.id} className={styles.todoItem} onClick={() => navigate('/approval/pending')}>
|
||||
<div className={styles.todoIcon}>
|
||||
{todo.type === 'approval' && '📋'}
|
||||
{todo.type === 'notice' && '🔔'}
|
||||
{todo.type === 'task' && '✓'}
|
||||
</div>
|
||||
<div className={styles.todoContent}>
|
||||
<div className={styles.todoTitle}>{todo.title}</div>
|
||||
<div className={styles.todoTime}>{todo.time}</div>
|
||||
</div>
|
||||
<div className={styles.todoArrow}>{'>'}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.empty}>暂无待办事项</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 快捷入口 */}
|
||||
<div className={styles.section}>
|
||||
<h3 className={styles.sectionTitle}>快捷入口</h3>
|
||||
<div className={styles.actionGrid}>
|
||||
{quickActions.map((action) => (
|
||||
<div
|
||||
key={action.id}
|
||||
className={styles.actionCard}
|
||||
onClick={() => handleQuickAction(action)}
|
||||
>
|
||||
<div className={styles.actionIcon} style={{ backgroundColor: `${action.color}15` }}>
|
||||
<span style={{ fontSize: 28 }}>{action.icon}</span>
|
||||
</div>
|
||||
<span className={styles.actionLabel}>{action.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 最新动态 */}
|
||||
<div className={styles.section}>
|
||||
<div className={styles.sectionHeader}>
|
||||
<h3 className={styles.sectionTitle}>最新动态</h3>
|
||||
<span className={styles.more}>更多 {'>'}</span>
|
||||
</div>
|
||||
<div className={styles.activityList}>
|
||||
<div className={styles.activityItem}>
|
||||
<div className={styles.activityDot}></div>
|
||||
<div className={styles.activityContent}>
|
||||
<div>张三 提交了出差申请</div>
|
||||
<div className={styles.activityTime}>10分钟前</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.activityItem}>
|
||||
<div className={styles.activityDot}></div>
|
||||
<div className={styles.activityContent}>
|
||||
<div>李四 审批通过了采购申请</div>
|
||||
<div className={styles.activityTime}>1小时前</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 底部安全区域 */}
|
||||
<div className={styles.safeArea} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user