onionanime/cyh-tk-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build: 引入tailwindcss并迁移原有样式到原子类

Browse Source 
1. 新增postcss、autoprefixer、tailwindcss依赖并初始化配置
2. 移除全局及页面级CSS文件，将样式替换为tailwind原子类
3. 重构API调用逻辑，拆分接口请求函数
4. 统一项目样式规范，优化布局与组件样式
This commit is contained in:
zhxiao1124
2026-07-02 13:38:03 +08:00
parent 526052d633
commit e160476ecf
27 changed files with 947 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/Profile/index.tsx
View File

@@ -1,9 +1,9 @@
import { useEffect, useState } from 'react';
import { Avatar, Button, Card, Form, Input, Message } from '@arco-design/web-react';
import { useNavigate } from 'react-router-dom';
import type { ApiResponse, AdminProfile } from '../api/types';
import { TOKEN_KEY, api } from '../api/client';
import './index.css';
import type { AdminProfile } from '../api/types';
import { changePassword as changePasswordApi, getProfile, updateProfile as updateProfileApi } from '../api/auth';
import { TOKEN_KEY } from '../api/client';
function ProfilePage() {
const navigate = useNavigate();
@@ -17,11 +17,11 @@ function ProfilePage() {
const loadProfile = async () => {
setLoading(true);
try {
const response = await api.get<ApiResponse<AdminProfile>>('/api/admin/v1/auth/profile');
setProfile(response.data.data);
const data = await getProfile();
setProfile(data);
form.setFieldsValue({
nickname: response.data.data.nickname,
email: response.data.data.email,
nickname: data.nickname,
email: data.email,
});
} finally {
setLoading(false);
@@ -35,8 +35,8 @@ function ProfilePage() {
const updateProfile = async (values: { nickname?: string; email?: string }) => {
setSaving(true);
try {
const response = await api.patch<ApiResponse<AdminProfile>>('/api/admin/v1/auth/profile', values);
setProfile(response.data.data);
const data = await updateProfileApi(values);
setProfile(data);
Message.success('个人信息已更新');
} finally {
setSaving(false);
@@ -50,7 +50,7 @@ function ProfilePage() {
}
setChangingPassword(true);
try {
await api.patch('/api/admin/v1/auth/password', {
await changePasswordApi({
oldPassword: values.oldPassword,
newPassword: values.newPassword,
});
@@ -64,20 +64,20 @@ function ProfilePage() {
};
return (
<div className="profile-grid">
<Card className="section-card" title="个人中心" loading={loading}>
<div className="profile-summary">
<div className="grid items-start gap-4 min-[901px]:grid-cols-[minmax(0,1fr)_420px]">
<Card className="section-card min-[901px]:row-span-2" title="个人中心" loading={loading}>
<div className="mb-6 flex items-center gap-4">
<Avatar size={56}>{profile?.username?.slice(0, 1).toUpperCase() || 'A'}</Avatar>
<div>
<h2>{profile?.nickname || profile?.username || '管理员'}</h2>
<p>{profile?.email || '未设置邮箱'}</p>
<h2 className="mb-1.5 mt-0 text-[22px]">{profile?.nickname || profile?.username || '管理员'}</h2>
<p className="m-0 text-muted">{profile?.email || '未设置邮箱'}</p>
</div>
</div>
<div className="profile-info-list">
<div><span>用户名</span><strong>{profile?.username || '-'}</strong></div>
<div><span>状态</span><strong>{profile?.status === 'active' ? '启用' : '禁用'}</strong></div>
<div><span>角色</span><strong>{profile?.isSuperAdmin ? '超级管理员' : profile?.roles.map((role) => role.name).join('、') || '-'}</strong></div>
<div><span>创建时间</span><strong>{profile?.createdAt || '-'}</strong></div>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
<div className="rounded-lg border border-line bg-panel p-3.5"><span className="mb-2 block text-[13px] text-muted">用户名</span><strong className="break-words font-medium text-ink">{profile?.username || '-'}</strong></div>
<div className="rounded-lg border border-line bg-panel p-3.5"><span className="mb-2 block text-[13px] text-muted">状态</span><strong className="break-words font-medium text-ink">{profile?.status === 'active' ? '启用' : '禁用'}</strong></div>
<div className="rounded-lg border border-line bg-panel p-3.5"><span className="mb-2 block text-[13px] text-muted">角色</span><strong className="break-words font-medium text-ink">{profile?.isSuperAdmin ? '超级管理员' : profile?.roles.map((role) => role.name).join('、') || '-'}</strong></div>
<div className="rounded-lg border border-line bg-panel p-3.5"><span className="mb-2 block text-[13px] text-muted">创建时间</span><strong className="break-words font-medium text-ink">{profile?.createdAt || '-'}</strong></div>
</div>
</Card>
<Card className="section-card" title="修改个人信息">