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

47
src/Login/index.tsx
View File

@@ -2,9 +2,8 @@ import { useState } from 'react';
import { Button, Form, Input, Message } from '@arco-design/web-react';
import { IconLock, IconUser } from '@arco-design/web-react/icon';
import { useNavigate } from 'react-router-dom';
import type { ApiResponse } from '../api/types';
import { API_BASE_URL, TOKEN_KEY, api } from '../api/client';
import './index.css';
import { login } from '../api/auth';
import { API_BASE_URL, TOKEN_KEY } from '../api/client';
function LoginPage() {
const navigate = useNavigate();
@@ -13,8 +12,8 @@ function LoginPage() {
const onSubmit = async (values: { username: string; password: string }) => {
setLoading(true);
try {
const response = await api.post<ApiResponse<{ accessToken: string }>>('/api/admin/v1/auth/login', values);
localStorage.setItem(TOKEN_KEY, response.data.data.accessToken);
const data = await login(values);
localStorage.setItem(TOKEN_KEY, data.accessToken);
Message.success('登录成功');
navigate('/dashboard', { replace: true });
} finally {
@@ -23,30 +22,30 @@ function LoginPage() {
};
return (
<div className="login-page">
<div className="login-visual">
<div className="login-logo">
<span className="logo-mark">CT</span>
<div className="grid min-h-screen grid-cols-1 bg-[#f7f8fa] min-[901px]:grid-cols-[minmax(520px,0.95fr)_minmax(420px,1fr)]">
<div className="relative hidden flex-col justify-between overflow-hidden px-14 pb-12 pt-11 text-white after:pointer-events-none after:absolute after:inset-0 after:bg-[linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0))] min-[901px]:flex bg-[linear-gradient(135deg,rgba(15,23,42,0.98)_0%,rgba(22,93,255,0.94)_54%,rgba(15,118,110,0.96)_100%),radial-gradient(circle_at_18%_18%,rgba(255,255,255,0.18),transparent_28%),radial-gradient(circle_at_82%_72%,rgba(255,255,255,0.12),transparent_32%)]">
<div className="relative z-[1] flex items-center gap-2.5 font-bold">
<span className="grid h-7 w-7 place-items-center rounded-md bg-brand text-sm text-white">CT</span>
<span>cth-tk-admin</span>
</div>
<div className="login-brand">
<span className="login-eyebrow">TikTok 短剧运营后台</span>
<h1>CTH TikTok 短剧管理后台</h1>
<p>集中处理短剧内容、剧集发布、订单支付、播放日志和系统权限，帮助运营人员稳定管理短剧业务。</p>
<div className="relative z-[1] max-w-[640px]">
<span className="mb-[18px] inline-flex rounded-full border border-white/20 px-3 py-1.5 text-[13px] text-white/80">TikTok 短剧运营后台</span>
<h1 className="mb-4 mt-0 text-[42px] leading-[1.16]">CTH TikTok 短剧管理后台</h1>
<p className="m-0 max-w-[560px] text-base leading-[1.8] text-white/75">集中处理短剧内容、剧集发布、订单支付、播放日志和系统权限，帮助运营人员稳定管理短剧业务。</p>
</div>
<div className="login-metrics">
<div className="login-metric"><strong>内容</strong><span>短剧与剧集管理</span></div>
<div className="login-metric"><strong>权限</strong><span>角色化后台授权</span></div>
<div className="login-metric"><strong>日志</strong><span>请求与播放追踪</span></div>
<div className="relative z-[1] grid max-w-[640px] grid-cols-3 gap-3">
<div className="rounded-lg border border-white/20 bg-white/10 p-4 backdrop-blur-[10px]"><strong className="mb-1.5 block text-xl">内容</strong><span className="text-white/70">短剧与剧集管理</span></div>
<div className="rounded-lg border border-white/20 bg-white/10 p-4 backdrop-blur-[10px]"><strong className="mb-1.5 block text-xl">权限</strong><span className="text-white/70">角色化后台授权</span></div>
<div className="rounded-lg border border-white/20 bg-white/10 p-4 backdrop-blur-[10px]"><strong className="mb-1.5 block text-xl">日志</strong><span className="text-white/70">请求与播放追踪</span></div>
</div>
</div>
<div className="login-panel">
<div className="login-card">
<div className="login-card-header">
<span className="login-card-mark">CT</span>
<div className="flex items-center justify-center bg-[linear-gradient(180deg,rgba(255,255,255,0.86),rgba(247,248,250,0.94)),#f7f8fa] p-12">
<div className="w-full max-w-[420px] rounded-lg border border-line bg-white p-9 shadow-login">
<div className="mb-[30px] flex items-center gap-3.5">
<span className="grid h-11 w-11 place-items-center rounded-lg bg-brand font-bold text-white">CT</span>
<div>
<h2>后台登录</h2>
<p className="subtitle">使用管理员账号进入控制台。</p>
<h2 className="mb-2 mt-0 text-2xl">后台登录</h2>
<p className="m-0 text-muted">使用管理员账号进入控制台。</p>
</div>
</div>
<Form layout="vertical" onSubmit={onSubmit} initialValues={{ username: 'admin', password: 'admin123' }}>
@@ -58,7 +57,7 @@ function LoginPage() {
</Form.Item>
<Button type="primary" htmlType="submit" loading={loading} long>登录</Button>
</Form>
<div className="login-card-footer">API 服务：{API_BASE_URL}</div>
<div className="mt-[22px] border-t border-canvas pt-[18px] text-xs text-muted">API 服务：{API_BASE_URL}</div>
</div>
</div>
</div>