01252048
This commit is contained in:
parent
7919edec06
commit
a2da55bd9e
|
@ -31,12 +31,12 @@ export const LoginForm = ({ onSubmit, isLoading }: LoginFormProps) => {
|
|||
label="用户名"
|
||||
name="username"
|
||||
rules={[
|
||||
{ required: true, message: "Username is required" },
|
||||
{ min: 2, message: "Username must be at least 2 characters" }
|
||||
{ required: true, message: "请输入用户名" },
|
||||
{ min: 2, message: "用户名至少需要2个字符" }
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="Username"
|
||||
placeholder="请输入用户名"
|
||||
className="rounded-lg"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
@ -45,11 +45,11 @@ export const LoginForm = ({ onSubmit, isLoading }: LoginFormProps) => {
|
|||
label="密码"
|
||||
name="password"
|
||||
rules={[
|
||||
{ required: true, message: "Password is required" }
|
||||
{ required: true, message: "请输入密码" }
|
||||
]}
|
||||
>
|
||||
<Input.Password
|
||||
placeholder="Password"
|
||||
placeholder="请输入密码"
|
||||
className="rounded-lg"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
|
|
@ -6,11 +6,6 @@ import { LoginForm } from "./login";
|
|||
import { Card, Typography, Button, Spin, Divider } from "antd";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { useAuthForm } from "./useAuthForm";
|
||||
import {
|
||||
GithubOutlined,
|
||||
GoogleOutlined,
|
||||
LoadingOutlined
|
||||
} from '@ant-design/icons';
|
||||
|
||||
const { Title, Text, Paragraph } = Typography;
|
||||
|
||||
|
@ -41,23 +36,22 @@ const AuthPage: React.FC = () => {
|
|||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<Card
|
||||
className="w-full max-w-5xl shadow-xl rounded-3xl overflow-hidden transition-all duration-300 hover:shadow-3xl relative backdrop-blur-sm bg-white/90"
|
||||
bodyStyle={{ padding: 0 }}
|
||||
<div
|
||||
className="w-full max-w-5xl shadow-elegant border-2 border-white rounded-xl overflow-hidden transition-all duration-300 relative"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row min-h-[650px]">
|
||||
{/* Left Panel - Welcome Section */}
|
||||
<div className="w-full md:w-1/2 p-12 bg-gradient-to-br from-primary to-primary-400 text-white flex flex-col justify-center relative overflow-hidden">
|
||||
<div className="w-full md:w-1/2 p-12 bg-gradient-to-br from-primary to-primary-600 text-white flex flex-col justify-center relative overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2, duration: 0.5 }}
|
||||
>
|
||||
<div className=" text-4xl text-white mb-4">
|
||||
欢迎来到 Leader Mail
|
||||
<div className="text-4xl text-white mb-4 font-serif">
|
||||
首长机关信箱
|
||||
</div>
|
||||
<Paragraph className="text-lg mb-8 text-blue-100">
|
||||
与领导者建立联系,分享见解,在专为职业发展设计的协作环境中共同成长。
|
||||
<Paragraph className="text-lg mb-8 text-blue-100 leading-relaxed text-justify">
|
||||
倾听官兵心声,及时响应诉求,竭诚为每一位战友解难题、办实事
|
||||
</Paragraph>
|
||||
{showLogin && (
|
||||
<Button
|
||||
|
@ -67,7 +61,7 @@ const AuthPage: React.FC = () => {
|
|||
onClick={toggleForm}
|
||||
className="w-fit hover:bg-white hover:text-blue-700 transition-all"
|
||||
>
|
||||
创建新账户
|
||||
注册账号
|
||||
</Button>
|
||||
)}
|
||||
</motion.div>
|
||||
|
@ -88,13 +82,13 @@ const AuthPage: React.FC = () => {
|
|||
<motion.div className="mb-8">
|
||||
<Title level={3} className="mb-2">登录</Title>
|
||||
<Text type="secondary">
|
||||
还没有账户?{' '}
|
||||
首次使用?{' '}
|
||||
<Button
|
||||
type="link"
|
||||
onClick={toggleForm}
|
||||
className="p-0 font-medium"
|
||||
>
|
||||
立即注册
|
||||
注册账号
|
||||
</Button>
|
||||
</Text>
|
||||
</motion.div>
|
||||
|
@ -113,15 +107,15 @@ const AuthPage: React.FC = () => {
|
|||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<motion.div className="mb-8">
|
||||
<Title level={3} className="mb-2">创建账户</Title>
|
||||
<Title level={3} className="mb-2">注册账号</Title>
|
||||
<Text type="secondary">
|
||||
已有账户?{' '}
|
||||
已有账号?{' '}
|
||||
<Button
|
||||
type="link"
|
||||
onClick={toggleForm}
|
||||
className="p-0 font-medium"
|
||||
>
|
||||
立即登录
|
||||
登录平台
|
||||
</Button>
|
||||
</Text>
|
||||
</motion.div>
|
||||
|
@ -135,7 +129,7 @@ const AuthPage: React.FC = () => {
|
|||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -122,7 +122,7 @@ export const RegisterForm = ({ onSubmit, isLoading }: RegisterFormProps) => {
|
|||
loading={isLoading}
|
||||
className="w-full h-10 rounded-lg"
|
||||
>
|
||||
{isLoading ? "正在创建账户..." : "创建账户"}
|
||||
{isLoading ? "正在注册..." : "注册"}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
|
|
@ -9,7 +9,7 @@ export default function LetterEditorPage() {
|
|||
const termId = searchParams.get("termId");
|
||||
|
||||
return (
|
||||
<div className="min-h-screen rounded-xl bg-gradient-to-b from-slate-100 to-slate-50 ">
|
||||
<div className="min-h-screen rounded-xl shadow-elegant border-2 border-white bg-gradient-to-b from-slate-100 to-slate-50 ">
|
||||
<WriteHeader></WriteHeader>
|
||||
<LetterFormProvider receiverId={receiverId} termId={termId}>
|
||||
<LetterBasicForm />
|
||||
|
|
|
@ -5,7 +5,7 @@ export default function LetterListPage() {
|
|||
|
||||
return (
|
||||
// 添加 flex flex-col 使其成为弹性布局容器
|
||||
<div className="min-h-screen rounded-xl overflow-hidden bg-gradient-to-b from-slate-100 to-slate-50 flex flex-col">
|
||||
<div className="min-h-screen shadow-elegant border-2 border-white rounded-xl overflow-hidden bg-gradient-to-b from-slate-100 to-slate-50 flex flex-col">
|
||||
<Header />
|
||||
{/* 添加 flex-grow 使内容区域自动填充剩余空间 */}
|
||||
|
||||
|
|
|
@ -63,44 +63,37 @@ export default function LetterProgressPage() {
|
|||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen bg-gradient-to-b from-slate-100 to-slate-50 "
|
||||
className="min-h-screen shadow-elegant border-2 border-white rounded-xl bg-gradient-to-b from-slate-100 to-slate-50 "
|
||||
style={{ fontFamily: "Arial, sans-serif" }}>
|
||||
<ProgressHeader></ProgressHeader>
|
||||
{/* Main Content */}
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
{/* Search Section */}
|
||||
<Card className="mb-8 border border-gray-200">
|
||||
<div className="space-y-4">
|
||||
<label className="block text-lg font-medium text-[#003366]">
|
||||
Ticket ID
|
||||
</label>
|
||||
<div className="flex gap-4">
|
||||
<Input
|
||||
prefix={
|
||||
<SearchOutlined className="text-[#003366]" />
|
||||
}
|
||||
size="large"
|
||||
value={feedbackId}
|
||||
onChange={(e) => setFeedbackId(e.target.value)}
|
||||
placeholder="e.g. USAF-2025-0123"
|
||||
status={error ? "error" : ""}
|
||||
className="border border-gray-300"
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
icon={<SearchOutlined />}
|
||||
loading={loading}
|
||||
onClick={mockLookup}
|
||||
>
|
||||
Track
|
||||
</Button>
|
||||
</div>
|
||||
{error && (
|
||||
<p className="text-red-600 text-sm">{error}</p>
|
||||
)}
|
||||
<main className="container mx-auto p-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-4">
|
||||
<Input
|
||||
prefix={
|
||||
<SearchOutlined className=" text-secondary-300" />
|
||||
}
|
||||
size="large"
|
||||
value={feedbackId}
|
||||
onChange={(e) => setFeedbackId(e.target.value)}
|
||||
placeholder="请输入信件编码查询处理状态"
|
||||
status={error ? "error" : ""}
|
||||
className="border border-gray-300"
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
loading={loading}
|
||||
onClick={mockLookup}
|
||||
>
|
||||
查询
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
{error && (
|
||||
<p className="text-red-600 text-sm">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Results Section */}
|
||||
{status && (
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { motion } from 'framer-motion';
|
||||
import { StaffDto } from "@nice/common";
|
||||
import { Button, Tooltip, Badge } from 'antd';
|
||||
import { SendOutlined } from '@ant-design/icons';
|
||||
import { BankFilled, SendOutlined } from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
export interface SendCardProps {
|
||||
|
@ -13,15 +13,12 @@ export function SendCard({ staff, termId }: SendCardProps) {
|
|||
const navigate = useNavigate();
|
||||
|
||||
const handleSendLetter = () => {
|
||||
navigate(`/editor?termId=${termId || ''}&receiverId=${staff.id}`);
|
||||
window.open(`/editor?termId=${termId || ''}&receiverId=${staff.id}`, '_blank');
|
||||
};
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
whileHover={{ scale: 1.005 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-gray-100 hover:border-primary-200 transition-all duration-300"
|
||||
<div
|
||||
|
||||
className="bg-white rounded-xl overflow-hidden border-2 hover:border-primary transition-all duration-300"
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row">
|
||||
{/* Image Container */}
|
||||
|
@ -61,11 +58,14 @@ export function SendCard({ staff, termId }: SendCardProps) {
|
|||
<div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-2xl font-semibold text-gray-900">
|
||||
{staff?.showname}
|
||||
{staff?.showname || staff?.username}
|
||||
</h3>
|
||||
<Badge status="success" />
|
||||
|
||||
</div>
|
||||
<p className="text-gray-600 text-lg font-medium">{staff.department?.name || '未设置部门'}</p>
|
||||
<p className="text-gray-600 text-lg font-medium flex items-center gap-2">
|
||||
|
||||
<BankFilled></BankFilled>
|
||||
{staff.department?.name || '未设置部门'}</p>
|
||||
</div>
|
||||
<Tooltip title="职级">
|
||||
<span className="inline-flex items-center px-4 py-1.5 text-sm font-medium bg-gradient-to-r from-blue-50 to-blue-100 text-primary rounded-full hover:from-blue-100 hover:to-blue-200 transition-colors shadow-sm">
|
||||
|
@ -112,6 +112,6 @@ export function SendCard({ staff, termId }: SendCardProps) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { TermDto } from "@nice/common";
|
||||
|
||||
export default function WriteHeader({ term }: { term: TermDto }) {
|
||||
export default function WriteHeader({ term }: { term?: TermDto }) {
|
||||
return <header className=" rounded-t-xl bg-gradient-to-r from-primary to-primary-400 text-white p-6">
|
||||
<div className="flex flex-col space-y-6">
|
||||
{/* 主标题 */}
|
||||
|
|
|
@ -46,7 +46,7 @@ export default function WriteLetterPage() {
|
|||
}, [searchQuery, selectedDept, resetPage]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-100 to-slate-50">
|
||||
<div className="min-h-screen shadow-elegant border-2 border-white rounded-xl bg-gradient-to-b from-slate-100 to-slate-50">
|
||||
<WriteHeader term={getTerm(termId)} />
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="mb-8 space-y-4">
|
||||
|
@ -121,7 +121,10 @@ export default function WriteLetterPage() {
|
|||
current={currentPage}
|
||||
total={data?.totalPages || 0}
|
||||
pageSize={pageSize}
|
||||
onChange={(page) => setCurrentPage(page)}
|
||||
onChange={(page) => {
|
||||
setCurrentPage(page);
|
||||
window.scrollTo(0, 0);
|
||||
}}
|
||||
showSizeChanger={false}
|
||||
showTotal={(total) => `共 ${total} 条记录`}
|
||||
/>
|
||||
|
|
|
@ -5,13 +5,14 @@ import Navigation from "./navigation";
|
|||
import { useAuth } from "@web/src/providers/auth-provider";
|
||||
import { UserOutlined } from "@ant-design/icons";
|
||||
import { UserMenu } from "../element/usermenu";
|
||||
import SineWavesCanvas from "../../animation/sine-wave";
|
||||
interface HeaderProps {
|
||||
onSearch?: (query: string) => void;
|
||||
}
|
||||
export const Header = memo(function Header({ onSearch }: HeaderProps) {
|
||||
const { isAuthenticated } = useAuth()
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-[#13294B] text-white shadow-lg">
|
||||
<header className="sticky top-0 z-50 bg-gradient-to-br from-primary-500 to-primary-800 text-white shadow-lg">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="py-3">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
|
|
|
@ -68,7 +68,6 @@ export function LetterFormProvider({
|
|||
},
|
||||
state: PostState.PENDING,
|
||||
isPublic: data?.isPublic,
|
||||
|
||||
resources: data.resources?.length
|
||||
? {
|
||||
connect: (
|
||||
|
|
|
@ -2,7 +2,6 @@ import { Form, Input, Button, Checkbox, Select } from "antd";
|
|||
import { useLetterEditor } from "../context/LetterEditorContext";
|
||||
import { SendOutlined } from "@ant-design/icons";
|
||||
import QuillEditor from "@web/src/components/common/editor/quill/QuillEditor";
|
||||
import { PostBadge } from "../../detail/badge/PostBadge";
|
||||
import { TusUploader } from "@web/src/components/common/uploader/TusUploader";
|
||||
import StaffSelect from "../../../staff/staff-select";
|
||||
import TermSelect from "../../../term/term-select";
|
||||
|
@ -20,8 +19,8 @@ export function LetterBasicForm() {
|
|||
onFinish={handleFinish}
|
||||
initialValues={{
|
||||
meta: { tags: [] },
|
||||
receiverId,
|
||||
termId,
|
||||
receivers: [receiverId],
|
||||
terms: [termId],
|
||||
isPublic: true,
|
||||
}}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
|
|
|
@ -77,15 +77,21 @@ export const NiceTailwindConfig: Config = {
|
|||
solid: "2px 2px 0 0 rgba(0, 0, 0, 0.2)",
|
||||
glow: "0 0 8px rgba(230, 180, 0, 0.8)",
|
||||
inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.15)",
|
||||
"elevation-1": "0 1px 2px 0 rgba(0, 0, 0, 0.1)",
|
||||
"elevation-2": "0 2px 4px 0 rgba(0, 0, 0, 0.15)",
|
||||
"elevation-3": "0 4px 8px 0 rgba(0, 0, 0, 0.2)",
|
||||
"elevation-4": "0 8px 16px 0 rgba(0, 0, 0, 0.25)",
|
||||
"elevation-5": "0 16px 32px 0 rgba(0, 0, 0, 0.3)",
|
||||
panel: "0 4px 6px -1px rgba(0, 48, 138, 0.1), 0 2px 4px -2px rgba(0, 48, 138, 0.1)",
|
||||
button: "0 2px 4px rgba(0, 48, 138, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.1)",
|
||||
card: "0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08)",
|
||||
modal: "0 8px 32px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15)",
|
||||
"elevation-1": "0 1px 2px rgba(0, 48, 138, 0.05), 0 1px 1px rgba(0, 0, 0, 0.05)",
|
||||
"elevation-2": "0 2px 4px rgba(0, 48, 138, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1)",
|
||||
"elevation-3": "0 4px 8px rgba(0, 48, 138, 0.15), 0 4px 4px rgba(0, 0, 0, 0.15)",
|
||||
"elevation-4": "0 8px 16px rgba(0, 48, 138, 0.2), 0 8px 8px rgba(0, 0, 0, 0.2)",
|
||||
"elevation-5": "0 16px 32px rgba(0, 48, 138, 0.25), 0 16px 16px rgba(0, 0, 0, 0.25)",
|
||||
panel: "0 4px 6px -1px rgba(0, 48, 138, 0.1), 0 2px 4px -2px rgba(0, 48, 138, 0.1), inset 0 -1px 2px rgba(255, 255, 255, 0.05)",
|
||||
button: "0 2px 4px rgba(0, 48, 138, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.05)",
|
||||
card: "0 4px 6px rgba(0, 48, 138, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 -1px 2px rgba(255, 255, 255, 0.05)",
|
||||
modal: "0 8px 32px rgba(0, 48, 138, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 -2px 4px rgba(255, 255, 255, 0.05)",
|
||||
"soft-primary": "0 2px 4px rgba(0, 48, 138, 0.1), 0 4px 8px rgba(0, 48, 138, 0.05)",
|
||||
"soft-secondary": "0 2px 4px rgba(77, 77, 77, 0.1), 0 4px 8px rgba(77, 77, 77, 0.05)",
|
||||
"soft-accent": "0 2px 4px rgba(230, 180, 0, 0.1), 0 4px 8px rgba(230, 180, 0, 0.05)",
|
||||
"inner-glow": "inset 0 0 8px rgba(0, 48, 138, 0.1)",
|
||||
"outer-glow": "0 0 16px rgba(0, 48, 138, 0.1)",
|
||||
"elegant": "0 4px 24px rgba(0, 48, 138, 0.15), 0 2px 12px rgba(0, 48, 138, 0.1), 0 1px 6px rgba(0, 48, 138, 0.05), inset 0 -1px 2px rgba(255, 255, 255, 0.1)",
|
||||
},
|
||||
animation: {
|
||||
"pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
|
||||
|
|
Loading…
Reference in New Issue