FEAT => 本次更新项目为：
设置页面构建完成
This commit is contained in:
超级老白兔
@@ -1,30 +1,39 @@
|
||||
.save-buttons {
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
.setting-page {
|
||||
padding: 12px;
|
||||
|
||||
.user-card {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color) 0%,
|
||||
var(--primary-color-dark) 100%
|
||||
);
|
||||
position: relative;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
padding: 20px;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 30px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 35px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
background: #f0f0f0;
|
||||
border: 2px solid #e0e0e0;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
position: relative;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
@@ -35,13 +44,18 @@
|
||||
.avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-color) 0%,
|
||||
var(--primary-color-dark) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -50,19 +64,20 @@
|
||||
min-width: 0;
|
||||
|
||||
.username {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.account {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -70,99 +85,205 @@
|
||||
|
||||
.role {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
background: #f0f0f0;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
display: inline-block;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.user-actions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting-group {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
|
||||
.group-title {
|
||||
padding: 12px 16px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
background: #fafafa;
|
||||
padding: 16px 20px 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.group-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.adm-list) {
|
||||
--border-inner: solid 1px #f0f0f0;
|
||||
--border-top: none;
|
||||
--border-bottom: none;
|
||||
--adm-font-size-main: 16px;
|
||||
--adm-color-text: #333;
|
||||
--adm-color-text-secondary: #666;
|
||||
.setting-list {
|
||||
:global(.adm-list) {
|
||||
--border-inner: solid 1px #f0f0f0;
|
||||
--border-top: none;
|
||||
--border-bottom: none;
|
||||
--adm-font-size-main: 16px;
|
||||
--adm-color-text: #333;
|
||||
--adm-color-text-secondary: #666;
|
||||
|
||||
.adm-list-item {
|
||||
padding: 16px;
|
||||
min-height: 56px;
|
||||
.adm-list-item {
|
||||
padding: 16px 20px;
|
||||
min-height: 64px;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
|
||||
.adm-list-item-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.adm-list-item-content-prefix {
|
||||
margin-right: 12px;
|
||||
font-size: 20px;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.adm-list-item-content-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.adm-list-item-content-main-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
&:hover {
|
||||
background: #f8f9fa;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.adm-list-item-content-main-description {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
&:active {
|
||||
background: #e9ecef;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.adm-list-item-content-extra {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.adm-list-item-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.adm-list-item-content-prefix {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #f5f5f5;
|
||||
.adm-list-item-content-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.adm-list-item-content-main-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.adm-list-item-content-main-description {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.adm-list-item-content-extra {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
background: rgba(24, 144, 255, 0.1);
|
||||
color: var(--primary-color);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
background: rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.setting-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.setting-badge {
|
||||
background: #ff4d4f;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.version-info {
|
||||
text-align: center;
|
||||
padding: 24px 16px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
.version-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
.app-logo {
|
||||
flex-shrink: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
.version-details {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
|
||||
.app-name {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.version-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.build-info {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,6 +7,10 @@ import {
|
||||
InfoCircleOutlined,
|
||||
LogoutOutlined,
|
||||
SettingOutlined,
|
||||
BellOutlined,
|
||||
LockOutlined,
|
||||
HeartOutlined,
|
||||
StarOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import Layout from "@/components/Layout/Layout";
|
||||
import { useUserStore } from "@/store/module/user";
|
||||
@@ -22,6 +26,8 @@ interface SettingItem {
|
||||
value?: boolean;
|
||||
path?: string;
|
||||
onClick?: () => void;
|
||||
badge?: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
const Setting: React.FC = () => {
|
||||
@@ -29,6 +35,12 @@ const Setting: React.FC = () => {
|
||||
const { user, logout } = useUserStore();
|
||||
const { settings, updateSetting } = useSettingsStore();
|
||||
const [showLogoutDialog, setShowLogoutDialog] = useState(false);
|
||||
const [avatarError, setAvatarError] = useState(false);
|
||||
|
||||
// 处理头像加载错误
|
||||
const handleAvatarError = () => {
|
||||
setAvatarError(true);
|
||||
};
|
||||
|
||||
// 处理开关变化
|
||||
const handleSwitchChange = (key: keyof typeof settings, value: boolean) => {
|
||||
@@ -78,6 +90,7 @@ const Setting: React.FC = () => {
|
||||
icon: <UserOutlined />,
|
||||
type: "navigate",
|
||||
path: "/userSet",
|
||||
color: "var(--primary-color)",
|
||||
},
|
||||
{
|
||||
id: "security",
|
||||
@@ -86,12 +99,22 @@ const Setting: React.FC = () => {
|
||||
icon: <SafetyOutlined />,
|
||||
type: "navigate",
|
||||
path: "/security",
|
||||
color: "var(--primary-color)",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "其他",
|
||||
title: "应用设置",
|
||||
items: [
|
||||
{
|
||||
id: "privacy",
|
||||
title: "隐私保护",
|
||||
description: "数据隐私、权限管理",
|
||||
icon: <LockOutlined />,
|
||||
type: "navigate",
|
||||
path: "/privacy",
|
||||
color: "var(--primary-color)",
|
||||
},
|
||||
{
|
||||
id: "clearCache",
|
||||
title: "清除缓存",
|
||||
@@ -99,14 +122,32 @@ const Setting: React.FC = () => {
|
||||
icon: <SettingOutlined />,
|
||||
type: "button",
|
||||
onClick: handleClearCache,
|
||||
color: "var(--primary-color)",
|
||||
badge: "2.3MB",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "其他",
|
||||
items: [
|
||||
{
|
||||
id: "feedback",
|
||||
title: "意见反馈",
|
||||
description: "问题反馈、功能建议",
|
||||
icon: <HeartOutlined />,
|
||||
type: "navigate",
|
||||
path: "/feedback",
|
||||
color: "var(--primary-color)",
|
||||
},
|
||||
{
|
||||
id: "privacy",
|
||||
title: "用户隐私协议",
|
||||
description: "查看用户隐私协议和数据处理说明",
|
||||
icon: <InfoCircleOutlined />,
|
||||
type: "navigate",
|
||||
path: "/privacy",
|
||||
id: "rate",
|
||||
title: "给我们评分",
|
||||
description: "在应用商店给我们评分",
|
||||
icon: <StarOutlined />,
|
||||
type: "button",
|
||||
onClick: () =>
|
||||
Toast.show({ content: "感谢您的支持！", position: "top" }),
|
||||
color: "var(--primary-color)",
|
||||
},
|
||||
{
|
||||
id: "about",
|
||||
@@ -115,6 +156,7 @@ const Setting: React.FC = () => {
|
||||
icon: <InfoCircleOutlined />,
|
||||
type: "navigate",
|
||||
path: "/about",
|
||||
color: "var(--primary-color)",
|
||||
},
|
||||
{
|
||||
id: "logout",
|
||||
@@ -123,6 +165,7 @@ const Setting: React.FC = () => {
|
||||
icon: <LogoutOutlined />,
|
||||
type: "button",
|
||||
onClick: () => setShowLogoutDialog(true),
|
||||
color: "#ff4d4f",
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -143,16 +186,42 @@ const Setting: React.FC = () => {
|
||||
return (
|
||||
<List.Item
|
||||
key={item.id}
|
||||
prefix={item.icon}
|
||||
title={item.title}
|
||||
prefix={
|
||||
<div
|
||||
className={style["setting-icon"]}
|
||||
style={{
|
||||
color: item.color || "var(--primary-color)",
|
||||
background: `${item.color || "var(--primary-color)"}15`,
|
||||
}}
|
||||
>
|
||||
{item.icon}
|
||||
</div>
|
||||
}
|
||||
title={
|
||||
<div className={style["setting-title"]}>
|
||||
{item.title}
|
||||
{item.badge && (
|
||||
<span className={style["setting-badge"]}>{item.badge}</span>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
description={item.description}
|
||||
extra={
|
||||
item.type === "switch" ? (
|
||||
<Switch checked={item.value} onChange={() => item.onClick?.()} />
|
||||
<Switch
|
||||
checked={item.value}
|
||||
onChange={() => item.onClick?.()}
|
||||
style={
|
||||
{
|
||||
"--checked-color": item.color || "var(--primary-color)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
onClick={handleClick}
|
||||
arrow={item.type === "navigate"}
|
||||
className={style["setting-item"]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -172,8 +241,8 @@ const Setting: React.FC = () => {
|
||||
<Card className={style["user-card"]}>
|
||||
<div className={style["user-info"]}>
|
||||
<div className={style["avatar"]}>
|
||||
{user?.avatar ? (
|
||||
<img src={user.avatar} alt="头像" />
|
||||
{user?.avatar && !avatarError ? (
|
||||
<img src={user.avatar} alt="头像" onError={handleAvatarError} />
|
||||
) : (
|
||||
<div className={style["avatar-placeholder"]}>
|
||||
{user?.username?.charAt(0) || "用"}
|
||||
@@ -191,21 +260,54 @@ const Setting: React.FC = () => {
|
||||
{user?.isAdmin === 1 ? "管理员" : "普通用户"}
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["user-actions"]}>
|
||||
<Button
|
||||
size="small"
|
||||
fill="outline"
|
||||
onClick={() => navigate("/userSet")}
|
||||
style={{
|
||||
color: "#fff",
|
||||
borderColor: "#fff",
|
||||
fontSize: "12px",
|
||||
padding: "4px 8px",
|
||||
height: "auto",
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 设置列表 */}
|
||||
{settingGroups.map((group, groupIndex) => (
|
||||
<Card key={groupIndex} className={style["setting-group"]}>
|
||||
<div className={style["group-title"]}>{group.title}</div>
|
||||
<List>{group.items.map(renderSettingItem)}</List>
|
||||
<div className={style["group-title"]}>
|
||||
<span className={style["group-icon"]}>⚙️</span>
|
||||
{group.title}
|
||||
</div>
|
||||
<List className={style["setting-list"]}>
|
||||
{group.items.map(renderSettingItem)}
|
||||
</List>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{/* 版本信息 */}
|
||||
<div className={style["version-info"]}>
|
||||
<span>版本 1.0.0</span>
|
||||
<span>© 2024 存客宝管理系统</span>
|
||||
<div className={style["version-card"]}>
|
||||
<div className={style["app-logo"]}>
|
||||
<img src="/public/logo.png" alt="" />
|
||||
</div>
|
||||
<div className={style["version-details"]}>
|
||||
<div className={style["app-name"]}>存客宝</div>
|
||||
<div className={style["version-text"]}>版本 3.0.0</div>
|
||||
<div className={style["build-info"]}>Build 2025-7-30</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style["copyright"]}>
|
||||
<span>© 2024 存客宝管理系统</span>
|
||||
<span>让客户管理更简单</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user