paperclip-bot/labelmain-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(style): use skill

Browse Source
This commit is contained in:
zhangheng
2026-04-29 16:27:07 +08:00
parent 9d9bf4ff7f
commit 8372fb4a64
8 changed files with 267 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/label/components/TaskStatusTag.module.css
View File

@@ -42,9 +42,9 @@
}
.statusWaiting {
border-color: #e7d2a7;
background: #fbf7ee;
color: #92641e;
border-color: #ffdba5;
background: #fff7e8;
color: #d46b08;
}
.statusActive {
@@ -68,9 +68,9 @@
.rejectedPill {
min-height: 20px;
padding: 0 7px;
border-color: #e8c98a;
background: #fff8ed;
color: #a46b12;
border-color: #ffc987;
background: #fff3e0;
color: #c65d0e;
font-size: 11px;
font-weight: 500;
line-height: 16px;

46
components/layout/AppLayout.module.css
View File

@@ -57,16 +57,56 @@
padding: 8px 8px 0;
}
.navbarIconLink {
display: flex;
width: 100%;
min-height: 40px;
align-items: center;
justify-content: center;
border-radius: 4px;
color: #4e5969;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.navbarIconLink:hover {
background: #eef4ff;
color: #1874ff;
}
.navbarIconLinkActive {
background: #e7efff;
color: #1874ff;
}
.navbarFooter {
border-top: 1px solid #e5e6eb;
padding: 6px 0 0;
padding: 4px 8px;
}
.navbarToggleIcon {
display: inline-flex;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
border-radius: 4px;
color: #4e5969;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.navbarToggleIcon:hover {
background: #f2f3f5;
color: #1874ff;
}
.main {
background: #f7f8fa;
}
.userName {
color: #1d2129;
font-size: 14px;
@@ -78,4 +118,4 @@
color: #86909c;
font-size: 12px;
line-height: 14px;
}
}

109
components/layout/AppLayout.tsx
View File

@@ -22,6 +22,8 @@ import Avvvatars from "avvvatars-react"
import { useDisclosure, useMediaQuery } from "@mantine/hooks"
import {
IconChevronDown,
IconChevronLeft,
IconChevronRight,
IconLogout,
IconMoon,
IconSun,
@@ -372,6 +374,10 @@ export default function AppLayout({
/>
)
} else {
const isGroupActive = pathname.startsWith(
`/${activeHeaderMenu.url}/${item.url}`
)
return (
<Menu
width={"auto"}
@@ -381,19 +387,25 @@ export default function AppLayout({
openDelay={100}
closeDelay={200}>
<Menu.Target>
<NavLink
noWrap={true}
leftSection={
item.icon && (
<Tooltip
label={item.title || ""}
position="right"
openDelay={100}
closeDelay={200}
transitionProps={{ duration: 100 }}>
<UnstyledButton
className={cx(classes.navbarIconLink, {
[classes.navbarIconLinkActive]: isGroupActive,
})}
aria-label={item.title}>
{item.icon ? (
<ClientIcon
icon={item.icon}
style={{ width: 14, height: 14 }}
/>
)
}
label={item.title}
styles={getShellNavLinkStyles(false)}
/>
) : null}
</UnstyledButton>
</Tooltip>
</Menu.Target>
<Menu.Dropdown>
{item.items?.map((sub) =>
@@ -436,23 +448,40 @@ export default function AppLayout({
openDelay={100}
closeDelay={200}
transitionProps={{ duration: 100 }}>
<NavLink
// href={`/${activeHeaderMenu.url}/${item.url}`}
onClick={() => {
toggleMobile()
router.push(`/${activeHeaderMenu.url}/${item.url}`)
}}
noWrap={true}
active={isActive}
leftSection={
{isOpen ? (
<NavLink
// href={`/${activeHeaderMenu.url}/${item.url}`}
onClick={() => {
toggleMobile()
router.push(`/${activeHeaderMenu.url}/${item.url}`)
}}
noWrap={true}
active={isActive}
leftSection={
<ClientIcon
icon={item.icon}
style={{ width: 14, height: 14 }}
/>
}
label={item.title}
styles={getShellNavLinkStyles(isActive)}
/>
) : (
<UnstyledButton
className={cx(classes.navbarIconLink, {
[classes.navbarIconLinkActive]: isActive,
})}
aria-label={item.title}
onClick={() => {
toggleMobile()
router.push(`/${activeHeaderMenu.url}/${item.url}`)
}}>
<ClientIcon
icon={item.icon}
style={{ width: 14, height: 14 }}
/>
}
label={item.title}
styles={getShellNavLinkStyles(isActive)}
/>
</UnstyledButton>
)}
</Tooltip>
)
}
@@ -460,17 +489,31 @@ export default function AppLayout({
</ScrollArea>
</Stack>
<Stack justify="center" gap={0} className={classes.navbarFooter}>
<Flex
justify={isOpen ? "flex-end" : "center"}
align="center"
mb={"sm"}>
<Burger
opened={false}
onClick={() => updateIsOpen(!isOpen)}
size="sm"
visibleFrom="sm"
mr={isOpen ? "sm" : undefined}
/>
<Flex justify={isOpen ? "flex-end" : "center"} align="center">
<Box visibleFrom="sm">
<Tooltip
events={{
hover: !isOpen,
focus: false,
touch: false,
}}
label={isOpen ? "收起菜单" : "展开菜单"}
position="right"
openDelay={100}
closeDelay={200}
transitionProps={{ duration: 100 }}>
<UnstyledButton
className={classes.navbarToggleIcon}
aria-label={isOpen ? "收起菜单" : "展开菜单"}
onClick={() => updateIsOpen(!isOpen)}>
{isOpen ? (
<IconChevronLeft size={18} />
) : (
<IconChevronRight size={18} />
)}
</UnstyledButton>
</Tooltip>
</Box>
</Flex>
</Stack>
</AppShell.Navbar>

91
components/setting/PageSurface.module.css
View File

@@ -13,6 +13,77 @@
box-shadow: none;
}
.modalContent {
overflow: hidden;
border-radius: 8px;
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}
.modalHeader {
padding: 16px 20px 0;
background: #ffffff;
}
.modalTitle {
color: #1d2129;
font-size: 16px;
font-weight: 500;
line-height: 24px;
}
.modalBody {
padding: 16px 20px 20px;
background: #ffffff;
}
.modalContent :global(.mantine-Button-root) {
min-height: 32px;
border-radius: 4px;
padding-inline: 12px;
font-size: 14px;
font-weight: 500;
box-shadow: none;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.modalContent :global(.mantine-Button-root[data-variant="filled"]) {
--button-bg: #1874ff;
--button-hover: #0f6ae8;
--button-color: #ffffff;
--button-bd: transparent;
background: #1874ff !important;
color: #ffffff !important;
}
.modalContent :global(.mantine-Button-root[data-variant="filled"]:hover) {
background: #0f6ae8 !important;
}
.modalContent :global(.mantine-Button-root[data-variant="default"]) {
border-color: #e5e6eb;
background: #ffffff;
color: #4e5969;
}
.modalContent :global(.mantine-Button-root[data-disabled]),
.modalContent :global(.mantine-Button-root:disabled) {
border-color: #e5e6eb !important;
background: #f2f3f5 !important;
color: #c9cdd4 !important;
cursor: not-allowed;
opacity: 1;
}
.modalContent :global(.mantine-Button-root[data-disabled]:hover),
.modalContent :global(.mantine-Button-root:disabled:hover) {
border-color: #e5e6eb !important;
background: #f2f3f5 !important;
color: #c9cdd4 !important;
}
.filterPanel {
position: relative;
}
@@ -121,6 +192,26 @@
color: #4e5969;
}
.filterPanel :global(.mantine-Button-root[data-disabled]),
.filterPanel :global(.mantine-Button-root:disabled),
.headerActions :global(.mantine-Button-root[data-disabled]),
.headerActions :global(.mantine-Button-root:disabled) {
border-color: #e5e6eb !important;
background: #f2f3f5 !important;
color: #c9cdd4 !important;
cursor: not-allowed;
opacity: 1;
}
.filterPanel :global(.mantine-Button-root[data-disabled]:hover),
.filterPanel :global(.mantine-Button-root:disabled:hover),
.headerActions :global(.mantine-Button-root[data-disabled]:hover),
.headerActions :global(.mantine-Button-root:disabled:hover) {
border-color: #e5e6eb !important;
background: #f2f3f5 !important;
color: #c9cdd4 !important;
}
.filterPanel :global(.mantine-ActionIcon-root),
.headerActions :global(.mantine-ActionIcon-root) {
width: 32px;