chuan/Cli-Proxy-API-Management-Center
1
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-06-16 21:03:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(icons, layout): update SVG icons and adjust layout styles for improved UI consistency

Browse Source
This commit is contained in:
LTbinglingfeng
2026-05-26 01:38:40 +08:00
Unverified
parent 544b365fa6
commit 4d6a5da5c7
2 changed files with 57 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/icons.tsx
+33 -46
View File
@@ -21,10 +21,6 @@ const baseSvgProps: SVGProps<SVGSVGElement> = {
const sidebarSvgProps: SVGProps<SVGSVGElement> = {
...baseSvgProps,
strokeWidth: 1.72,
strokeLinecap: 'square',
strokeLinejoin: 'miter',
strokeMiterlimit: 10,
};
export function IconSlidersHorizontal({ size = 20, ...props }: IconProps) {
@@ -421,10 +417,10 @@ export function IconLayoutDashboard({ size = 20, ...props }: IconProps) {
export function IconSidebarDashboard({ size = 20, ...props }: IconProps) {
return (
<svg {...sidebarSvgProps} width={size} height={size} {...props}>
<rect x="3" y="3" width="7.5" height="8" rx="1.5" />
<rect x="13.5" y="3" width="7.5" height="5" rx="1.5" fill="currentColor" fillOpacity="0.12" />
<rect x="3" y="14" width="7.5" height="7" rx="1.5" fill="currentColor" fillOpacity="0.12" />
<rect x="13.5" y="11" width="7.5" height="10" rx="1.5" />
<rect width="7" height="9" x="3" y="3" rx="1" />
<rect width="7" height="5" x="14" y="3" rx="1" />
<rect width="7" height="9" x="14" y="12" rx="1" />
<rect width="7" height="5" x="3" y="16" rx="1" />
</svg>
);
}
@@ -432,10 +428,15 @@ export function IconSidebarDashboard({ size = 20, ...props }: IconProps) {
export function IconSidebarConfig({ size = 20, ...props }: IconProps) {
return (
<svg {...sidebarSvgProps} width={size} height={size} {...props}>
<path d="M4 8h16" />
<path d="M4 16h16" />
<circle cx="9.5" cy="8" r="2.8" fill="currentColor" fillOpacity="0.12" />
<circle cx="15" cy="16" r="2.8" fill="currentColor" fillOpacity="0.12" />
<line x1="21" x2="14" y1="4" y2="4" />
<line x1="10" x2="3" y1="4" y2="4" />
<line x1="21" x2="12" y1="12" y2="12" />
<line x1="8" x2="3" y1="12" y2="12" />
<line x1="21" x2="16" y1="20" y2="20" />
<line x1="12" x2="3" y1="20" y2="20" />
<line x1="14" x2="14" y1="2" y2="6" />
<line x1="8" x2="8" y1="10" y2="14" />
<line x1="16" x2="16" y1="18" y2="22" />
</svg>
);
}
@@ -443,12 +444,11 @@ export function IconSidebarConfig({ size = 20, ...props }: IconProps) {
export function IconSidebarProviders({ size = 20, ...props }: IconProps) {
return (
<svg {...sidebarSvgProps} width={size} height={size} {...props}>
<circle cx="12" cy="5.5" r="2.8" fill="currentColor" fillOpacity="0.12" />
<circle cx="5.5" cy="18.5" r="2.8" />
<circle cx="18.5" cy="18.5" r="2.8" />
<path d="M10.2 7.8 7 16.2" />
<path d="M13.8 7.8 17 16.2" />
<path d="M8.3 18.5h7.4" />
<rect x="16" y="16" width="6" height="6" rx="1" />
<rect x="2" y="16" width="6" height="6" rx="1" />
<rect x="9" y="2" width="6" height="6" rx="1" />
<path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3" />
<path d="M12 12V8" />
</svg>
);
}
@@ -456,9 +456,8 @@ export function IconSidebarProviders({ size = 20, ...props }: IconProps) {
export function IconSidebarAuthFiles({ size = 20, ...props }: IconProps) {
return (
<svg {...sidebarSvgProps} width={size} height={size} {...props}>
<path d="M7 3h7l4 4v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z" />
<path d="M14 3v4h4" fill="currentColor" fillOpacity="0.12" />
<path d="M9 13l2 2 4-4" />
<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
<path d="m9 12 2 2 4-4" />
</svg>
);
}
@@ -466,13 +465,9 @@ export function IconSidebarAuthFiles({ size = 20, ...props }: IconProps) {
export function IconSidebarOauth({ size = 20, ...props }: IconProps) {
return (
<svg {...sidebarSvgProps} width={size} height={size} {...props}>
<path
d="M12 3l8 4v5c0 5.25-3.4 8.25-8 10-4.6-1.75-8-4.75-8-10V7Z"
fill="currentColor"
fillOpacity="0.08"
/>
<circle cx="12" cy="11" r="1.5" fill="currentColor" stroke="none" />
<path d="M12 12.5v2.5" />
<path d="M2 21a8 8 0 0 1 13.292-6" />
<circle cx="10" cy="8" r="5" />
<path d="m16 19 2 2 4-4" />
</svg>
);
}
@@ -480,8 +475,8 @@ export function IconSidebarOauth({ size = 20, ...props }: IconProps) {
export function IconSidebarQuota({ size = 20, ...props }: IconProps) {
return (
<svg {...sidebarSvgProps} width={size} height={size} {...props}>
<circle cx="12" cy="12" r="8" />
<path d="M12 12V4a8 8 0 0 1 8 8Z" fill="currentColor" fillOpacity="0.12" />
<path d="m12 14 4-4" />
<path d="M3.34 19a10 10 0 1 1 17.32 0" />
</svg>
);
}
@@ -489,12 +484,10 @@ export function IconSidebarQuota({ size = 20, ...props }: IconProps) {
export function IconSidebarLogs({ size = 20, ...props }: IconProps) {
return (
<svg {...sidebarSvgProps} width={size} height={size} {...props}>
<rect x="3" y="4" width="18" height="16" rx="2" />
<path d="M3 8.5h18" />
<circle cx="5.5" cy="6.2" r="0.8" fill="currentColor" stroke="none" />
<circle cx="7.8" cy="6.2" r="0.8" fill="currentColor" fillOpacity="0.4" stroke="none" />
<path d="M7 12l3 2.5-3 2.5" />
<path d="M13 17h4" />
<path d="M15 12h-5" />
<path d="M15 8h-5" />
<path d="M19 17V5a2 2 0 0 0-2-2H4" />
<path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3" />
</svg>
);
}
@@ -502,16 +495,10 @@ export function IconSidebarLogs({ size = 20, ...props }: IconProps) {
export function IconSidebarSystem({ size = 20, ...props }: IconProps) {
return (
<svg {...sidebarSvgProps} width={size} height={size} {...props}>
<rect x="6" y="6" width="12" height="12" rx="2" />
<rect x="9" y="9" width="6" height="6" rx="1" fill="currentColor" fillOpacity="0.12" />
<path d="M6 10H3" />
<path d="M6 14H3" />
<path d="M21 10h-3" />
<path d="M21 14h-3" />
<path d="M10 6V3" />
<path d="M14 6V3" />
<path d="M10 21v-3" />
<path d="M14 21v-3" />
<rect width="20" height="8" x="2" y="2" rx="2" />
<rect width="20" height="8" x="2" y="14" rx="2" />
<line x1="6" x2="6.01" y1="6" y2="6" />
<line x1="6" x2="6.01" y1="18" y2="18" />
</svg>
);
}
src/styles/layout.scss
+24 -25
View File
@@ -6,7 +6,7 @@
--sidebar-panel-width: 256px;
--sidebar-collapsed-width: 68px;
--sidebar-active-width: var(--sidebar-panel-width);
--sidebar-gap: 32px;
--sidebar-gap: 0px;
--floating-control-size: 38px;
}
@@ -38,7 +38,7 @@
position: fixed;
top: 0;
right: 0;
left: 0;
left: var(--sidebar-active-width);
z-index: $z-dropdown - 2;
height: 141px;
pointer-events: none;
@@ -68,6 +68,7 @@
rgb(0 0 0 / 0.22) 72%,
transparent 100%
);
transition: left $transition-normal;
}
.main-header {
@@ -84,7 +85,7 @@
.sidebar-toggle-floating {
position: absolute;
top: var(--shell-gutter);
left: calc(var(--shell-gutter) + var(--sidebar-active-width) + 22px);
left: calc(var(--sidebar-active-width) + 16px);
width: 44px;
height: 44px;
padding: 0;
@@ -356,10 +357,10 @@
position: relative;
display: flex;
flex: 1;
gap: var(--sidebar-gap);
gap: 0;
min-height: 0;
height: 100vh;
padding: var(--shell-gutter);
padding: 0;
overflow: hidden;
@supports (height: 100dvh) {
@@ -384,22 +385,18 @@
position: relative;
z-index: $z-dropdown - 1;
width: var(--sidebar-panel-width);
height: calc(100vh - var(--shell-gutter) - var(--shell-gutter));
height: 100vh;
padding: 18px 14px;
display: flex;
flex-direction: column;
gap: $spacing-md;
flex-shrink: 0;
overflow-y: auto;
background:
linear-gradient(180deg, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0)),
color-mix(in srgb, var(--bg-primary) 72%, transparent);
border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
border-radius: 18px;
background: var(--bg-primary);
border: 0;
border-right: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
border-radius: 0;
box-shadow: none;
--glass-blur: 18px;
backdrop-filter: var(--glass-backdrop-filter);
-webkit-backdrop-filter: var(--glass-backdrop-filter);
scrollbar-width: none;
transition:
width $transition-normal,
@@ -407,7 +404,7 @@
padding $transition-normal;
@supports (height: 100dvh) {
height: calc(100dvh - var(--shell-gutter) - var(--shell-gutter));
height: 100dvh;
}
&::-webkit-scrollbar {
@@ -443,7 +440,9 @@
align-items: center;
gap: 10px;
min-height: 42px;
padding: 0 10px 12px;
padding: 4px 10px 14px;
margin-bottom: 4px;
border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
color: var(--text-primary);
flex-shrink: 0;
}
@@ -608,12 +607,12 @@
display: flex;
flex-direction: column;
min-width: 0;
height: calc(100vh - var(--shell-gutter) - var(--shell-gutter));
height: 100vh;
overflow-y: auto;
scrollbar-gutter: stable;
@supports (height: 100dvh) {
height: calc(100dvh - var(--shell-gutter) - var(--shell-gutter));
height: 100dvh;
}
&.content-logs {
@@ -742,17 +741,17 @@
.sidebar {
position: fixed;
top: calc(var(--header-height) + 4px);
bottom: var(--shell-gutter);
left: var(--shell-gutter);
top: 0;
bottom: 0;
left: 0;
z-index: $z-dropdown;
width: var(--sidebar-panel-width);
height: auto;
transform: translateX(calc(-100% - 24px));
background:
linear-gradient(180deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0)),
color-mix(in srgb, var(--bg-primary) 94%, #0f0e0c);
border-color: color-mix(in srgb, var(--border-color) 88%, transparent);
background: var(--bg-primary);
border: 0;
border-right: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
border-radius: 0;
box-shadow: none;
&.open {