fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 本次提交更新内容如下

Browse Source 
存一版样式问题
This commit is contained in:
笔记本里的永平
2025-07-07 16:34:06 +08:00
parent 289947e68f
commit 6543da9167
5 changed files with 2909 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2844
Cunkebao/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff

5
nkebao/src/components/PageHeader.tsx
View File

@@ -23,8 +23,6 @@ interface PageHeaderProps {
backButtonVariant?: 'icon' | 'button' | 'text'; backButtonVariant?: 'icon' | 'button' | 'text';
/** 返回按钮自定义样式类名 */ /** 返回按钮自定义样式类名 */
backButtonClassName?: string; backButtonClassName?: string;
/** 是否固定在顶部 */
fixed?: boolean;
/** 是否显示底部边框 */ /** 是否显示底部边框 */
showBorder?: boolean; showBorder?: boolean;
} }
@@ -44,14 +42,13 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
titleClassName = '', titleClassName = '',
backButtonVariant = 'icon', backButtonVariant = 'icon',
backButtonClassName = '', backButtonClassName = '',
fixed = true,
showBorder = true showBorder = true
}) => { }) => {
const { goBack } = useSimpleBack(defaultBackPath); const { goBack } = useSimpleBack(defaultBackPath);
const handleBack = onBack || goBack; const handleBack = onBack || goBack;
const baseClasses = `bg-white ${showBorder ? 'border-b border-gray-200' : ''} ${fixed ? 'fixed top-0 left-0 right-0 z-20' : ''}`; const baseClasses = `bg-white ${showBorder ? 'border-b border-gray-200' : ''}`;
const headerClasses = `${baseClasses} ${className}`; const headerClasses = `${baseClasses} ${className}`;
// 默认小号按钮样式 // 默认小号按钮样式
const defaultBackBtnClass = 'text-sm px-2 py-1 h-8 min-h-0'; const defaultBackBtnClass = 'text-sm px-2 py-1 h-8 min-h-0';

73
nkebao/src/pages/devices/DeviceDetail.tsx
View File

@@ -6,6 +6,8 @@ import { useSimpleBack } from '@/hooks/useBackNavigation';
import { Smartphone, Battery, Wifi, MessageCircle, Users, Settings, History, RefreshCw, Loader2 } from 'lucide-react'; import { Smartphone, Battery, Wifi, MessageCircle, Users, Settings, History, RefreshCw, Loader2 } from 'lucide-react';
import { devicesApi, fetchDeviceDetail, fetchDeviceRelatedAccounts, fetchDeviceHandleLogs, updateDeviceTaskConfig } from '@/api/devices'; import { devicesApi, fetchDeviceDetail, fetchDeviceRelatedAccounts, fetchDeviceHandleLogs, updateDeviceTaskConfig } from '@/api/devices';
import { useToast } from '@/components/ui/toast'; import { useToast } from '@/components/ui/toast';
import Layout from '@/components/Layout';
import BottomNav from '@/components/BottomNav';
interface WechatAccount { interface WechatAccount {
id: string; id: string;
@@ -423,51 +425,52 @@ export default function DeviceDetail() {
if (loading) { if (loading) {
return ( return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center"> <Layout
<div className="flex flex-col items-center space-y-4"> header={<PageHeader title="设备详情" defaultBackPath="/devices" rightContent={<button className="p-2 hover:bg-gray-100 rounded-lg transition-colors"><Settings className="h-5 w-5" /></button>} />}
<Loader2 className="h-8 w-8 animate-spin text-blue-500" /> footer={<BottomNav />}
<p className="text-gray-500">加载设备信息中...</p> >
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="flex flex-col items-center space-y-4">
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
<p className="text-gray-500">加载设备信息中...</p>
</div>
</div> </div>
</div> </Layout>
); );
} }
if (!device) { if (!device) {
return ( return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center"> <Layout
<div className="flex flex-col items-center space-y-4 p-6 bg-white rounded-xl shadow-sm max-w-md"> header={<PageHeader title="设备详情" defaultBackPath="/devices" rightContent={<button className="p-2 hover:bg-gray-100 rounded-lg transition-colors"><Settings className="h-5 w-5" /></button>} />}
<div className="w-12 h-12 flex items-center justify-center rounded-full bg-red-100"> footer={<BottomNav />}
<Smartphone className="h-6 w-6 text-red-500" /> >
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="flex flex-col items-center space-y-4 p-6 bg-white rounded-xl shadow-sm max-w-md">
<div className="w-12 h-12 flex items-center justify-center rounded-full bg-red-100">
<Smartphone className="h-6 w-6 text-red-500" />
</div>
<div className="text-xl font-medium text-center">设备不存在或已被删除</div>
<div className="text-sm text-gray-500 text-center">
无法加载ID为 "{id}" 的设备信息，请检查设备是否存在。
</div>
<BackButton
variant="button"
text="返回上一页"
onBack={goBack}
/>
</div> </div>
<div className="text-xl font-medium text-center">设备不存在或已被删除</div>
<div className="text-sm text-gray-500 text-center">
无法加载ID为 "{id}" 的设备信息，请检查设备是否存在。
</div>
<BackButton
variant="button"
text="返回上一页"
onBack={goBack}
/>
</div> </div>
</div> </Layout>
); );
} }
return ( return (
<div className="min-h-screen bg-gray-50"> <Layout
{/* 固定header */} header={<PageHeader title="设备详情" defaultBackPath="/devices" rightContent={<button className="p-2 hover:bg-gray-100 rounded-lg transition-colors"><Settings className="h-5 w-5" /></button>} />}
<PageHeader footer={<BottomNav />}
title="设备详情" >
defaultBackPath="/devices" <div className="pb-20">
rightContent={
<button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
<Settings className="h-5 w-5" />
</button>
}
/>
{/* 内容区域 */}
<div className="pt-16 pb-20">
<div className="p-4 space-y-4"> <div className="p-4 space-y-4">
{/* 设备基本信息卡片 */} {/* 设备基本信息卡片 */}
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100"> <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
@@ -486,7 +489,7 @@ export default function DeviceDetail() {
{device.status === "online" ? "在线" : "离线"} {device.status === "online" ? "在线" : "离线"}
</span> </span>
</div> </div>
<div className="text-sm text-gray-500 mt-1"> <div className="text-xs text-gray-500 mt-1">
<span className="mr-1">IMEI:</span> <span className="mr-1">IMEI:</span>
{device.imei} {device.imei}
</div> </div>
@@ -861,6 +864,6 @@ export default function DeviceDetail() {
</div> </div>
</div> </div>
</div> </div>
</div> </Layout>
); );
} }

24
nkebao/src/pages/wechat-accounts/WechatAccountDetail.tsx
View File

@@ -18,6 +18,8 @@ import {
import { useWechatAccount } from '@/contexts/WechatAccountContext'; import { useWechatAccount } from '@/contexts/WechatAccountContext';
import { fetchWechatAccountSummary, fetchWechatFriends, fetchWechatFriendDetail } from '@/api/wechat-accounts'; import { fetchWechatAccountSummary, fetchWechatFriends, fetchWechatFriendDetail } from '@/api/wechat-accounts';
import { useToast } from '@/components/ui/toast'; import { useToast } from '@/components/ui/toast';
import Layout from '@/components/Layout';
import '@/components/Layout.css';
interface WechatAccountSummary { interface WechatAccountSummary {
accountAge: string; accountAge: string;
@@ -401,15 +403,16 @@ export default function WechatAccountDetail() {
} }
return ( return (
<div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen overflow-x-hidden"> <Layout
{/* 固定header */} header={
<PageHeader <PageHeader
title="账号详情" title="账号详情"
defaultBackPath="/wechat-accounts" defaultBackPath="/wechat-accounts"
/> />
}
{/* 内容区域 - 添加顶部内边距避免被固定header遮挡 */} >
<div className="pt-20 p-4 space-y-4"> <div className="bg-gradient-to-b from-blue-50 to-white">
<div className="p-4 space-y-4">
{/* 账号基本信息卡片 */} {/* 账号基本信息卡片 */}
<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
@@ -800,6 +803,7 @@ export default function WechatAccountDetail() {
</div> </div>
</div> </div>
</div> </div>
</div> {/* 这里补上，闭合415行的<div className='p-4 space-y-4'> */}
{/* 限制记录详情弹窗 */} {/* 限制记录详情弹窗 */}
{showRestrictions && ( {showRestrictions && (
@@ -962,6 +966,6 @@ export default function WechatAccountDetail() {
</div> </div>
</div> </div>
)} )}
</div> </Layout>
); );
} }

22
nkebao/src/pages/wechat-accounts/WechatAccounts.tsx
View File

@@ -5,6 +5,8 @@ import { fetchWechatAccountList, transformWechatAccount } from '@/api/wechat-acc
import { useToast } from '@/components/ui/toast'; import { useToast } from '@/components/ui/toast';
import { useWechatAccount } from '@/contexts/WechatAccountContext'; import { useWechatAccount } from '@/contexts/WechatAccountContext';
import PageHeader from '@/components/PageHeader'; import PageHeader from '@/components/PageHeader';
import Layout from '@/components/Layout';
import '@/components/Layout.css';
interface WechatAccount { interface WechatAccount {
id: string; id: string;
@@ -149,14 +151,15 @@ export default function WechatAccounts() {
}; };
return ( return (
<div className="min-h-screen bg-gray-50"> <Layout
<PageHeader header={
title="微信号" <PageHeader
defaultBackPath="/" title="微信号"
/> defaultBackPath="/"
/>
{/* 内容区域 */} }
<div className="pt-14 pb-20"> >
<div className="bg-gray-50">
<div className="p-4"> <div className="p-4">
{/* 搜索和操作栏 */} {/* 搜索和操作栏 */}
<div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 mb-4 "> <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 mb-4 ">
@@ -349,7 +352,6 @@ export default function WechatAccounts() {
)} )}
</div> </div>
</div> </div>
{/* 好友转移确认对话框 */} {/* 好友转移确认对话框 */}
{isTransferDialogOpen && ( {isTransferDialogOpen && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"> <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
@@ -376,6 +378,6 @@ export default function WechatAccounts() {
</div> </div>
</div> </div>
)} )}
</div> </Layout>
); );
} }