01262101
This commit is contained in:
longdayi
parent
150f296491
commit
a4d3af493e
|
|
@ -12,7 +12,7 @@
|
|||
VITE_APP_VERSION: "$VITE_APP_VERSION",
|
||||
};
|
||||
</script>
|
||||
<title>首长机关信箱</title>
|
||||
<title>信箱</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { LoginForm } from "./login";
|
|||
import { Card, Typography, Button, Spin, Divider } from "antd";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { useAuthForm } from "./useAuthForm";
|
||||
import { env } from "@web/src/env";
|
||||
|
||||
const { Title, Text, Paragraph } = Typography;
|
||||
|
||||
|
|
@ -48,7 +49,7 @@ const AuthPage: React.FC = () => {
|
|||
transition={{ delay: 0.2, duration: 0.5 }}
|
||||
>
|
||||
<div className="text-4xl text-white mb-4 font-serif">
|
||||
首长机关信箱
|
||||
{env.APP_NAME || '信箱'}
|
||||
</div>
|
||||
<Paragraph className="text-lg mb-8 text-blue-100 leading-relaxed text-justify">
|
||||
聆音于微，润心以答，纾难化雨，解忧惟勤
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
|
|
@ -5,53 +5,46 @@ import Navigation from "./navigation";
|
|||
import { useAuth } from "@web/src/providers/auth-provider";
|
||||
import { UserOutlined } from "@ant-design/icons";
|
||||
import { UserMenu } from "../element/usermenu/usermenu";
|
||||
|
||||
import logo from "@web/src/assets/logo.png"
|
||||
import { env } from "@web/src/env";
|
||||
export const Header = memo(function Header() {
|
||||
const { isAuthenticated } = useAuth();
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-gradient-to-br from-primary-500 to-primary-800 text-white shadow-lg">
|
||||
<div className=" mx-auto px-4">
|
||||
<div className="py-4">
|
||||
<header className="sticky top-0 z-50 bg-gradient-to-br from-primary-500 to-primary-800 text-white shadow-lg">
|
||||
<div className="mx-auto px-4">
|
||||
<div className="py-2 relative"> {/* 添加relative定位上下文 */}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="">
|
||||
<span className="text-xl font-bold">
|
||||
首长机关信箱
|
||||
</span>
|
||||
<p className=" text-sm text-secondary-50">
|
||||
聆怀若水，应语如风；纾难化困，践诺成春
|
||||
</p>
|
||||
{/* 左侧logo部分 */}
|
||||
<div className="flex items-center flex-shrink-0"> {/* 防止压缩 */}
|
||||
<img className="w-24" src={logo} alt="logo" />
|
||||
<div>
|
||||
<span className="text-xl font-bold"> {env.APP_NAME || '信箱'}</span>
|
||||
<p className="text-sm text-secondary-50">
|
||||
聆怀若水，应语如风；纾难化困，践诺成春
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-grow max-w-2xl">
|
||||
<SearchBar />
|
||||
</div>
|
||||
<div className="flex items-center ">
|
||||
{!isAuthenticated ? (
|
||||
<Link
|
||||
to="/auth"
|
||||
className="group flex items-center gap-2 rounded-lg
|
||||
bg-[#00539B]/90 px-5 py-2.5 font-medium
|
||||
shadow-lg transition-all duration-300
|
||||
hover:-translate-y-0.5 hover:bg-[#0063B8]
|
||||
hover:shadow-xl hover:shadow-[#00539B]/30
|
||||
focus:outline-none focus:ring-2
|
||||
focus:ring-[#8EADD4] focus:ring-offset-2
|
||||
focus:ring-offset-[#13294B]"
|
||||
aria-label="Login">
|
||||
<UserOutlined
|
||||
className="h-5 w-5 transition-transform
|
||||
group-hover:scale-110 group-hover:rotate-12"></UserOutlined>
|
||||
|
||||
{/* 右侧登录部分 */}
|
||||
<div className="flex items-center flex-shrink-0"> {/* 防止压缩 */}
|
||||
{!isAuthenticated ? (
|
||||
<Link to="/auth" className="...">
|
||||
<UserOutlined className="..." />
|
||||
<span>登录</span>
|
||||
</Link>
|
||||
) : (
|
||||
<UserMenu />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 独立定位的搜索栏 */}
|
||||
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl px-4">
|
||||
<SearchBar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Navigation />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
@ -2,8 +2,13 @@ import { motion } from 'framer-motion'
|
|||
import { Outlet } from 'react-router-dom'
|
||||
import { Header } from './Header'
|
||||
import { Footer } from './Footer'
|
||||
import { useEffect } from 'react'
|
||||
import { env } from '@web/src/env'
|
||||
|
||||
export function MainLayout() {
|
||||
useEffect(() => {
|
||||
document.title = env.APP_NAME || '信箱'
|
||||
}, [])
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React, { useMemo } from "react";
|
||||
import { Image, Button, Row, Col } from "antd";
|
||||
import { DownloadOutlined } from "@ant-design/icons";
|
||||
import { Image, Button, Row, Col, Tooltip } from "antd";
|
||||
import { PostDto } from "@nice/common";
|
||||
import { env } from "@web/src/env";
|
||||
import { getFileIcon } from "./utils";
|
||||
|
|
@ -79,47 +78,44 @@ export default function PostResources({ post }: { post: PostDto }) {
|
|||
</Image.PreviewGroup>
|
||||
</Row>
|
||||
)}
|
||||
|
||||
{fileResources.length > 0 && (
|
||||
<div className="rounded-xl p-4 bg-gray-200">
|
||||
<div className="space-y-2">
|
||||
{fileResources.map((resource) => (
|
||||
<div
|
||||
key={resource.url}
|
||||
className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-md transition-colors duration-200">
|
||||
<div className="flex items-center space-x-3 min-w-0">
|
||||
<span className="text-xl">
|
||||
{getFileIcon(resource.url)}
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<p className="text-gray-800 truncate">
|
||||
{resource.title || "未命名文件"}
|
||||
</p>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-xs text-gray-500">
|
||||
{resource.url
|
||||
.split(".")
|
||||
.pop()
|
||||
?.toUpperCase()}
|
||||
文件
|
||||
</span>
|
||||
<span className="text-xs text-gray-400">
|
||||
{resource.meta.size &&
|
||||
formatFileSize(
|
||||
resource.meta.size
|
||||
)}
|
||||
</span>
|
||||
<div className="rounded-xl p-1 border border-gray-100 bg-white">
|
||||
<div className="flex flex-nowrap overflow-x-auto scrollbar-hide gap-1.5">
|
||||
{fileResources.map((resource) => {
|
||||
return (
|
||||
<a
|
||||
key={resource.url}
|
||||
className="flex-shrink-0 relative active:scale-95 transition-transform select-none "
|
||||
href={resource.originalUrl}
|
||||
target="_blank"
|
||||
download={true}
|
||||
title="点击下载文件"
|
||||
>
|
||||
{/* 超紧凑卡片容器 */}
|
||||
<div className="w-[120px] h-[80px] p-2 flex flex-col items-center justify-between rounded-xl hover:bg-primary-50/40 cursor-pointer">
|
||||
{/* 微型文件图标 */}
|
||||
<div className="text-primary-600 text-base">
|
||||
{getFileIcon(resource.url)}
|
||||
</div>
|
||||
|
||||
{/* 压缩信息展示 */}
|
||||
<div className="w-full text-center space-y-0.5">
|
||||
<p className="text-xs font-medium text-gray-800 truncate">
|
||||
{resource.title?.slice(0, 12) || "未命名"}
|
||||
</p>
|
||||
<div className="flex items-center justify-between text-xs text-gray-500">
|
||||
<span className="bg-gray-100 px-0.5 rounded-sm">
|
||||
{resource.url.split(".").pop()?.slice(0, 4).toUpperCase()}
|
||||
</span>
|
||||
<span>
|
||||
{resource.meta.size && formatFileSize(resource.meta.size)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
icon={<DownloadOutlined />}
|
||||
href={resource.url}
|
||||
download>
|
||||
下载
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -108,6 +108,7 @@ export default function LetterList({
|
|||
) : (
|
||||
<div className="flex flex-col justify-center items-center pt-6">
|
||||
<Empty
|
||||
|
||||
description={
|
||||
keyword ? "未找到相关信件" : "暂无信件"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue