mirror of
https://github.com/orangecoding/fredy.git
synced 2026-06-16 12:31:07 +00:00
feat: Fredy UI redesign
* New design :)
This commit is contained in:
Christian Kellner
committed by
GitHub
GitHub
parent
c78472bd19
commit
f30ec4645c
@@ -18,6 +18,7 @@
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 14rem;
|
||||
opacity: .7;
|
||||
color: #94a3b8;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,45 +1,34 @@
|
||||
@import './DashboardCardColors.less';
|
||||
|
||||
@keyframes card-glow-rotate {
|
||||
0% { box-shadow: 3px 3px 14px -4px var(--card-glow); }
|
||||
25% { box-shadow: -3px 3px 14px -4px var(--card-glow); }
|
||||
50% { box-shadow: -3px -3px 14px -4px var(--card-glow); }
|
||||
75% { box-shadow: 3px -3px 14px -4px var(--card-glow); }
|
||||
100% { box-shadow: 3px 3px 14px -4px var(--card-glow); }
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
margin-bottom: 16px;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
background-color: #181b26;
|
||||
border: 1px solid #232735;
|
||||
border-radius: 10px;
|
||||
--pulse-color: rgba(255, 255, 255, 0.08);
|
||||
height: 112px;
|
||||
border-radius: @radius-card !important;
|
||||
border: 1px solid @color-border !important;
|
||||
background-color: @color-surface !important;
|
||||
transition: box-shadow @transition-card;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
box-shadow: 0 4px 25px -2px var(--pulse-color);
|
||||
opacity: 0;
|
||||
animation: pulse 5s infinite ease-in-out;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 20px;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--card-accent, #94a3b8);
|
||||
color: var(--card-accent, @color-gray-text);
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: var(--semi-color-text-2) !important;
|
||||
font-size: 12px !important;
|
||||
color: rgba(148, 163, 184, 0.7) !important;
|
||||
font-size: @text-xs !important;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
@@ -49,61 +38,50 @@
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
color: var(--card-accent, var(--semi-color-text-0));
|
||||
color: var(--card-accent, @color-text);
|
||||
}
|
||||
|
||||
&__desc {
|
||||
color: var(--semi-color-text-3) !important;
|
||||
color: @color-faint !important;
|
||||
font-size: @text-xs;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
--pulse-color: @color-blue-border;
|
||||
--card-accent: @color-blue-text;
|
||||
background-color: @color-blue-bg;
|
||||
border-color: @color-blue-border;
|
||||
box-shadow: 0 2px 16px -6px @color-blue-border;
|
||||
--card-glow: @color-blue-border;
|
||||
background-color: @color-blue-bg !important;
|
||||
border-color: @color-blue-border !important;
|
||||
animation: card-glow-rotate 8s linear infinite;
|
||||
}
|
||||
|
||||
&.orange {
|
||||
--pulse-color: @color-orange-border;
|
||||
--card-accent: @color-orange-text;
|
||||
background-color: @color-orange-bg;
|
||||
border-color: @color-orange-border;
|
||||
box-shadow: 0 2px 16px -6px @color-orange-border;
|
||||
--card-glow: @color-orange-border;
|
||||
background-color: @color-orange-bg !important;
|
||||
border-color: @color-orange-border !important;
|
||||
animation: card-glow-rotate 8s linear infinite;
|
||||
}
|
||||
|
||||
&.green {
|
||||
--pulse-color: @color-green-border;
|
||||
--card-accent: @color-green-text;
|
||||
background-color: @color-green-bg;
|
||||
border-color: @color-green-border;
|
||||
box-shadow: 0 2px 16px -6px @color-green-border;
|
||||
--card-glow: @color-green-border;
|
||||
background-color: @color-green-bg !important;
|
||||
border-color: @color-green-border !important;
|
||||
animation: card-glow-rotate 8s linear infinite;
|
||||
}
|
||||
|
||||
&.purple {
|
||||
--pulse-color: @color-purple-border;
|
||||
--card-accent: @color-purple-text;
|
||||
background-color: @color-purple-bg;
|
||||
border-color: @color-purple-border;
|
||||
box-shadow: 0 2px 16px -6px @color-purple-border;
|
||||
--card-glow: @color-purple-border;
|
||||
background-color: @color-purple-bg !important;
|
||||
border-color: @color-purple-border !important;
|
||||
animation: card-glow-rotate 8s linear infinite;
|
||||
}
|
||||
|
||||
&.gray {
|
||||
--pulse-color: @color-gray-border;
|
||||
--card-accent: @color-gray-text;
|
||||
background-color: @color-gray-bg;
|
||||
border-color: @color-gray-border;
|
||||
box-shadow: 0 2px 16px -6px @color-gray-border;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 0.1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
--card-glow: @color-gray-border;
|
||||
background-color: @color-gray-bg !important;
|
||||
border-color: @color-gray-border !important;
|
||||
animation: card-glow-rotate 8s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1 @@
|
||||
@color-blue-bg: rgba(96, 165, 250, 0.10);
|
||||
@color-blue-border: #3b6ea8;
|
||||
@color-blue-text: #60a5fa;
|
||||
|
||||
@color-orange-bg: rgba(251, 146, 60, 0.10);
|
||||
@color-orange-border: #c2622a;
|
||||
@color-orange-text: #fb923c;
|
||||
|
||||
@color-green-bg: rgba(52, 211, 153, 0.10);
|
||||
@color-green-border: #2a8a61;
|
||||
@color-green-text: #34d399;
|
||||
|
||||
@color-purple-bg: rgba(167, 139, 250, 0.10);
|
||||
@color-purple-border: #6d4fc2;
|
||||
@color-purple-text: #a78bfa;
|
||||
|
||||
@color-gray-bg: rgba(148, 163, 184, 0.10);
|
||||
@color-gray-border: #323a47;
|
||||
@color-gray-text: #94a3b8;
|
||||
@import '../../tokens.less';
|
||||
|
||||
@@ -6,15 +6,7 @@
|
||||
import { Card, Typography, Space } from '@douyinfe/semi-ui-19';
|
||||
import './DashboardCard.less';
|
||||
|
||||
export default function KpiCard({
|
||||
title,
|
||||
icon,
|
||||
value,
|
||||
valueFontSize = '1.5rem',
|
||||
description,
|
||||
color = 'gray',
|
||||
children,
|
||||
}) {
|
||||
export default function KpiCard({ title, icon, value, description, color = 'gray', children }) {
|
||||
const { Text } = Typography;
|
||||
return (
|
||||
<Card className={`dashboard-card ${color}`} bodyStyle={{ padding: '16px' }}>
|
||||
@@ -26,12 +18,12 @@ export default function KpiCard({
|
||||
</Text>
|
||||
</Space>
|
||||
<div className="dashboard-card__content">
|
||||
<div className="dashboard-card__value" style={{ fontSize: valueFontSize }}>
|
||||
<div className="dashboard-card__value">
|
||||
{value}
|
||||
{children}
|
||||
</div>
|
||||
{description && (
|
||||
<Text size="small" type="tertiary" className="dashboard-card__desc">
|
||||
<Text size="small" className="dashboard-card__desc">
|
||||
{description}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
@@ -5,23 +5,21 @@
|
||||
|
||||
import './FredyFooter.less';
|
||||
import { useSelector } from '../../services/state/store.js';
|
||||
import { Typography, Layout, Space, Divider } from '@douyinfe/semi-ui-19';
|
||||
import { Layout } from '@douyinfe/semi-ui-19';
|
||||
|
||||
export default function FredyFooter() {
|
||||
const { Text } = Typography;
|
||||
const { Footer } = Layout;
|
||||
const version = useSelector((state) => state.versionUpdate.versionUpdate);
|
||||
|
||||
return (
|
||||
<Footer className="fredyFooter">
|
||||
<Space split={<Divider layout="vertical" />}>
|
||||
<Text type="tertiary" size="small">
|
||||
Fredy V{version?.localFredyVersion || 'N/A'}
|
||||
</Text>
|
||||
<Text size="small" link={{ href: 'https://github.com/orangecoding', target: '_blank' }}>
|
||||
Made with ❤️
|
||||
</Text>
|
||||
</Space>
|
||||
<span className="fredyFooter__version">Fredy v{version?.localFredyVersion || 'N/A'}</span>
|
||||
<span className="fredyFooter__credit">
|
||||
Made with ❤️ by{' '}
|
||||
<a href="https://github.com/orangecoding" target="_blank" rel="noreferrer">
|
||||
Christian Kellner
|
||||
</a>
|
||||
</span>
|
||||
</Footer>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,34 @@
|
||||
@import '../../tokens.less';
|
||||
|
||||
.fredyFooter {
|
||||
background-color: var(--semi-color-bg-1);
|
||||
background-color: @color-base;
|
||||
border-top: 1px solid @color-border;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
height: 32px;
|
||||
border-top: 1px solid var(--semi-color-border);
|
||||
z-index: 1000;
|
||||
position: relative;
|
||||
padding: 10px 24px;
|
||||
height: 36px;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__version {
|
||||
font-size: @text-xs;
|
||||
color: @color-faint;
|
||||
font-family: @font-mono;
|
||||
}
|
||||
|
||||
&__credit {
|
||||
font-size: @text-xs;
|
||||
color: @color-faint;
|
||||
|
||||
a {
|
||||
color: @color-muted;
|
||||
text-decoration: none;
|
||||
transition: color @transition-fast;
|
||||
|
||||
&:hover {
|
||||
color: @color-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -32,7 +32,6 @@ import {
|
||||
IconBriefcase,
|
||||
IconBell,
|
||||
IconSearch,
|
||||
IconPlusCircle,
|
||||
IconArrowUp,
|
||||
IconArrowDown,
|
||||
IconHome,
|
||||
@@ -202,10 +201,6 @@ const JobGrid = () => {
|
||||
return (
|
||||
<div className="jobGrid">
|
||||
<div className="jobGrid__topbar">
|
||||
<Button type="primary" icon={<IconPlusCircle />} onClick={() => navigate('/jobs/new')}>
|
||||
New Job
|
||||
</Button>
|
||||
|
||||
<Input
|
||||
className="jobGrid__topbar__search"
|
||||
prefix={<IconSearch />}
|
||||
|
||||
@@ -1,18 +1,33 @@
|
||||
@import '../../cards/DashboardCardColors.less';
|
||||
@import '../../../tokens.less';
|
||||
|
||||
.jobGrid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
&__topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: @space-3;
|
||||
margin-bottom: @space-4;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__search {
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
height: 100%;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
background-color: rgba(36, 36, 36, 0.9);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid var(--semi-color-border);
|
||||
box-shadow: 0 0 15px -3px rgb(78 78 78 / 50%);
|
||||
background-color: @color-surface !important;
|
||||
border: 1px solid @color-border !important;
|
||||
border-radius: @radius-card !important;
|
||||
transition: transform @transition-card, box-shadow @transition-card;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 0 15px -3px rgb(78 78 78 / 70%);
|
||||
background-color: rgba(36, 36, 36, 1);
|
||||
box-shadow: 0 4px 20px -4px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
&__header {
|
||||
@@ -35,10 +50,10 @@
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background-color: var(--semi-color-text-3);
|
||||
background-color: rgba(251,113,133,0.7);
|
||||
|
||||
&--active {
|
||||
background-color: #21aa21;
|
||||
background-color: rgba(52,211,153,0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,21 +67,21 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
background: rgba(255,255,255,0.04);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--semi-border-radius-small);
|
||||
border-radius: @radius-chip;
|
||||
padding: 10px 4px 8px;
|
||||
|
||||
&__number {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: var(--semi-color-text-0);
|
||||
color: @color-text;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 11px;
|
||||
color: var(--semi-color-text-3);
|
||||
font-size: @text-xs;
|
||||
color: @color-faint;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
@@ -102,59 +117,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__topbar {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.jobGrid__topbar__search {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.semi-button:first-child {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.jobGrid__topbar__search {
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.semi-radio-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.semi-select {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: 0 !important;
|
||||
color: @color-text !important;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__pagination {
|
||||
margin-top: 2rem;
|
||||
margin-top: @space-4;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.jobPopoverContent {
|
||||
padding: .4rem;
|
||||
color: var(--semi-color-white);
|
||||
font-size: @text-sm;
|
||||
padding: 4px 8px;
|
||||
color: @color-text;
|
||||
}
|
||||
|
||||
@@ -10,34 +10,16 @@ import {
|
||||
parseString,
|
||||
parseNullableBoolean,
|
||||
} from '../../../hooks/useSearchParamState.js';
|
||||
import {
|
||||
Card,
|
||||
Col,
|
||||
Row,
|
||||
Image,
|
||||
Button,
|
||||
Typography,
|
||||
Pagination,
|
||||
Toast,
|
||||
Divider,
|
||||
Input,
|
||||
Select,
|
||||
Empty,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Space,
|
||||
} from '@douyinfe/semi-ui-19';
|
||||
import { Button, Pagination, Toast, Input, Select, Empty, Radio, RadioGroup, Tooltip } from '@douyinfe/semi-ui-19';
|
||||
import {
|
||||
IconBriefcase,
|
||||
IconCart,
|
||||
IconClock,
|
||||
IconDelete,
|
||||
IconLink,
|
||||
IconMapPin,
|
||||
IconStar,
|
||||
IconStarStroked,
|
||||
IconSearch,
|
||||
IconActivity,
|
||||
IconEyeOpened,
|
||||
IconArrowUp,
|
||||
IconArrowDown,
|
||||
@@ -53,8 +35,6 @@ import { debounce } from '../../../utils';
|
||||
import './ListingsGrid.less';
|
||||
import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const ListingsGrid = () => {
|
||||
const listingsData = useSelector((state) => state.listingsData);
|
||||
const providers = useSelector((state) => state.provider);
|
||||
@@ -137,10 +117,6 @@ const ListingsGrid = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const cap = (val) => {
|
||||
return String(val).charAt(0).toUpperCase() + String(val).slice(1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="listingsGrid">
|
||||
<div className="listingsGrid__topbar">
|
||||
@@ -238,111 +214,107 @@ const ListingsGrid = () => {
|
||||
description="No listings available yet..."
|
||||
/>
|
||||
)}
|
||||
<Row gutter={[16, 16]}>
|
||||
<div className="listingsGrid__grid">
|
||||
{(listingsData?.result || []).map((item) => (
|
||||
<Col key={item.id} xs={24} sm={12} md={12} lg={8} xl={8} xxl={6}>
|
||||
<Card
|
||||
className={`listingsGrid__card ${!item.is_active ? 'listingsGrid__card--inactive' : ''}`}
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => navigate(`/listings/listing/${item.id}`)}
|
||||
cover={
|
||||
<div style={{ position: 'relative' }}>
|
||||
<div className="listingsGrid__imageContainer">
|
||||
<Image
|
||||
src={item.image_url || no_image}
|
||||
fallback={no_image}
|
||||
width="100%"
|
||||
height={180}
|
||||
style={{ objectFit: 'cover' }}
|
||||
preview={false}
|
||||
/>
|
||||
<Button
|
||||
icon={
|
||||
item.isWatched === 1 ? (
|
||||
<IconStar style={{ color: 'rgba(var(--semi-green-5), 1)' }} />
|
||||
) : (
|
||||
<IconStarStroked />
|
||||
)
|
||||
}
|
||||
theme="light"
|
||||
shape="circle"
|
||||
size="small"
|
||||
className="listingsGrid__watchButton"
|
||||
onClick={(e) => handleWatch(e, item)}
|
||||
/>
|
||||
</div>
|
||||
{!item.is_active && <div className="listingsGrid__inactiveOverlay">Inactive</div>}
|
||||
</div>
|
||||
}
|
||||
bodyStyle={{ padding: '12px' }}
|
||||
>
|
||||
<div className="listingsGrid__content">
|
||||
<Text strong ellipsis={{ showTooltip: true }} className="listingsGrid__title">
|
||||
{cap(item.title)}
|
||||
</Text>
|
||||
<div className="listingsGrid__price">
|
||||
<IconCart size="small" />
|
||||
{item.price} €
|
||||
</div>
|
||||
<div className="listingsGrid__meta">
|
||||
<Text
|
||||
type="secondary"
|
||||
icon={<IconMapPin />}
|
||||
size="small"
|
||||
ellipsis={{ showTooltip: true }}
|
||||
style={{ width: '100%' }}
|
||||
>
|
||||
{item.address || 'No address provided'}
|
||||
</Text>
|
||||
<Space spacing={12} wrap>
|
||||
<Text type="tertiary" size="small" icon={<IconBriefcase />}>
|
||||
{item.provider.charAt(0).toUpperCase() + item.provider.slice(1)}
|
||||
</Text>
|
||||
<Text type="tertiary" size="small" icon={<IconClock />}>
|
||||
{timeService.format(item.created_at, false)}
|
||||
</Text>
|
||||
</Space>
|
||||
{item.distance_to_destination ? (
|
||||
<Text type="tertiary" size="small" icon={<IconActivity />}>
|
||||
{item.distance_to_destination} m to chosen address
|
||||
</Text>
|
||||
) : (
|
||||
<Text type="tertiary" size="small" icon={<IconActivity />}>
|
||||
Distance cannot be calculated
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
<Divider margin=".6rem" />
|
||||
<div className="listingsGrid__actions">
|
||||
<div className="listingsGrid__linkButton" onClick={(e) => e.stopPropagation()}>
|
||||
<a href={item.link} target="_blank" rel="noopener noreferrer">
|
||||
<IconLink />
|
||||
</a>
|
||||
</div>
|
||||
<Button
|
||||
type="secondary"
|
||||
size="small"
|
||||
title="View Details"
|
||||
onClick={() => navigate(`/listings/listing/${item.id}`)}
|
||||
icon={<IconEyeOpened />}
|
||||
/>
|
||||
<Button
|
||||
title="Remove"
|
||||
type="danger"
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setListingToDelete(item.id);
|
||||
setDeleteModalVisible(true);
|
||||
}}
|
||||
icon={<IconDelete />}
|
||||
/>
|
||||
<div
|
||||
key={item.id}
|
||||
className="listingsGrid__card"
|
||||
style={{ cursor: 'pointer' }}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => navigate(`/listings/listing/${item.id}`)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') navigate(`/listings/listing/${item.id}`);
|
||||
}}
|
||||
>
|
||||
<div className="listingsGrid__card__image-wrapper">
|
||||
<img
|
||||
src={item.image_url || no_image}
|
||||
alt={item.title}
|
||||
onError={(e) => {
|
||||
e.target.src = no_image;
|
||||
}}
|
||||
/>
|
||||
{!item.is_active && (
|
||||
<div className="listingsGrid__card__inactive-watermark">
|
||||
<span>Inactive</span>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="listingsGrid__card__star"
|
||||
onClick={(e) => handleWatch(e, item)}
|
||||
aria-label={item.isWatched === 1 ? 'Remove from watchlist' : 'Add to watchlist'}
|
||||
>
|
||||
{item.isWatched === 1 ? <IconStar /> : <IconStarStroked />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="listingsGrid__card__body">
|
||||
<div className="listingsGrid__card__title" title={item.title}>
|
||||
{item.title}
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
{item.price && (
|
||||
<div className="listingsGrid__card__price">
|
||||
<IconCart size="small" />
|
||||
{item.price}
|
||||
</div>
|
||||
)}
|
||||
{item.address && (
|
||||
<div className="listingsGrid__card__meta">
|
||||
<IconMapPin />
|
||||
{item.address}
|
||||
</div>
|
||||
)}
|
||||
<div className="listingsGrid__card__meta">
|
||||
<IconBriefcase />
|
||||
{item.provider}
|
||||
</div>
|
||||
<div className="listingsGrid__card__provider">{timeService.format(item.created_at, false)}</div>
|
||||
</div>
|
||||
|
||||
<div className="listingsGrid__card__actions" onClick={(e) => e.stopPropagation()}>
|
||||
<Tooltip content="Original Listing">
|
||||
<Button
|
||||
size="small"
|
||||
icon={<IconLink />}
|
||||
style={{ color: '#60a5fa' }}
|
||||
theme="borderless"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
window.open(item.link, '_blank');
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip content="View in Fredy">
|
||||
<Button
|
||||
size="small"
|
||||
icon={<IconEyeOpened />}
|
||||
style={{ color: '#34d399' }}
|
||||
theme="borderless"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigate(`/listings/listing/${item.id}`);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip content="Remove">
|
||||
<Button
|
||||
size="small"
|
||||
icon={<IconDelete />}
|
||||
style={{ color: '#fb7185' }}
|
||||
theme="borderless"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setListingToDelete(item.id);
|
||||
setDeleteModalVisible(true);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
{(listingsData?.result || []).length > 0 && (
|
||||
<div className="listingsGrid__pagination">
|
||||
<Pagination
|
||||
|
||||
@@ -1,22 +1,16 @@
|
||||
@import '../../cards/DashboardCardColors.less';
|
||||
@import '../../../tokens.less';
|
||||
|
||||
.listingsGrid {
|
||||
&__imageContainer {
|
||||
position: relative;
|
||||
height: 180px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__topbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
gap: @space-3;
|
||||
margin-bottom: @space-4;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.listingsGrid__topbar__search {
|
||||
flex: 1;
|
||||
&__search {
|
||||
min-width: 200px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -37,149 +31,151 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__watchButton {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background-color: white !important;
|
||||
box-shadow: var(--semi-shadow-elevated);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--semi-color-fill-0) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__statusTag {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__card {
|
||||
height: 100%;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
background-color: rgba(36, 36, 36, 0.9);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid var(--semi-color-border);
|
||||
background: @color-elevated !important;
|
||||
border: 1px solid @color-border !important;
|
||||
border-radius: @radius-card !important;
|
||||
overflow: hidden;
|
||||
transition: transform @transition-card, box-shadow @transition-card;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--semi-shadow-elevated);
|
||||
background-color: rgba(36, 36, 36, 1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 24px -4px rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
&--inactive {
|
||||
&__image-wrapper {
|
||||
position: relative;
|
||||
height: 160px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
.listingsGrid__imageContainer,
|
||||
.listingsGrid__content {
|
||||
opacity: 0.6;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__inactive-watermark {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0,0,0,0.35);
|
||||
|
||||
span {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: rgba(251,113,133,0.9);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
transform: rotate(-30deg);
|
||||
border: 2px solid rgba(251,113,133,0.5);
|
||||
padding: 4px 12px;
|
||||
border-radius: @radius-chip;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
}
|
||||
|
||||
&__star {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: rgba(0,0,0,0.5);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background @transition-fast;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0,0,0,0.75);
|
||||
}
|
||||
|
||||
svg {
|
||||
color: @color-accent;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
font-size: @text-sm;
|
||||
color: @color-text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__price {
|
||||
font-size: @text-base;
|
||||
font-weight: 600;
|
||||
color: @color-success;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
font-size: @text-xs;
|
||||
color: @color-muted;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.semi-icon {
|
||||
font-size: 11px;
|
||||
color: @color-faint;
|
||||
}
|
||||
}
|
||||
|
||||
&__provider {
|
||||
font-size: @text-xs;
|
||||
color: @color-faint;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 8px 12px;
|
||||
border-top: 1px solid @color-border;
|
||||
gap: 4px;
|
||||
margin-top: auto;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
border: none !important;
|
||||
border-radius: @radius-chip !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__inactiveOverlay {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
color: var(--semi-color-danger);
|
||||
font-weight: bold;
|
||||
font-size: 1.3rem;
|
||||
text-transform: uppercase;
|
||||
transform: rotate(-30deg);
|
||||
padding: 5px;
|
||||
max-height: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
&__titleLink {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--semi-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: block;
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
&__pagination {
|
||||
margin-top: 2rem;
|
||||
margin-top: @space-4;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__price {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: @color-green-text;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin: 8px 0 6px;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__setupButton {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&__linkButton {
|
||||
background: var(--semi-color-primary);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--semi-color-primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure icons and text are vertically aligned
|
||||
.semi-typography {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.semi-typography-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 1px; // Minor nudge if needed, but flex should handle most
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,13 +3,16 @@
|
||||
* Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
|
||||
*/
|
||||
|
||||
import { Typography } from '@douyinfe/semi-ui-19';
|
||||
import './Headline.less';
|
||||
|
||||
export default function Headline({ text, size = 3 } = {}) {
|
||||
const { Title } = Typography;
|
||||
export default function Headline({ text, actions } = {}) {
|
||||
return (
|
||||
<Title heading={size} style={{ marginBottom: '1rem' }}>
|
||||
{text}
|
||||
</Title>
|
||||
<div className="page-heading">
|
||||
<div className="page-heading__row">
|
||||
<h1 className="page-heading__title">{text}</h1>
|
||||
{actions && <div>{actions}</div>}
|
||||
</div>
|
||||
<div className="page-heading__line" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
27
ui/src/components/headline/Headline.less
Normal file
27
ui/src/components/headline/Headline.less
Normal file
@@ -0,0 +1,27 @@
|
||||
@import '../../tokens.less';
|
||||
|
||||
.page-heading {
|
||||
margin-bottom: @space-6;
|
||||
margin-top: 0;
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: @text-lg !important;
|
||||
font-weight: 700 !important;
|
||||
color: @color-text !important;
|
||||
margin: 0 !important;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&__line {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, rgba(224,74,56,0.5) 0%, rgba(224,74,56,0) 100%);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -3,25 +3,20 @@
|
||||
* Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
|
||||
*/
|
||||
|
||||
import { Button } from '@douyinfe/semi-ui-19';
|
||||
import { xhrPost } from '../../services/xhr';
|
||||
import { IconUser } from '@douyinfe/semi-icons';
|
||||
|
||||
const Logout = function Logout({ text }) {
|
||||
const handleLogout = async () => {
|
||||
await xhrPost('/api/login/logout');
|
||||
location.reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
icon={<IconUser />}
|
||||
type="danger"
|
||||
theme="solid"
|
||||
onClick={async () => {
|
||||
await xhrPost('/api/login/logout');
|
||||
location.reload();
|
||||
}}
|
||||
>
|
||||
{text && 'Logout'}
|
||||
</Button>
|
||||
</div>
|
||||
<button className={`navigate__logout-btn${!text ? ' navigate__logout-btn--icon-only' : ''}`} onClick={handleLogout}>
|
||||
<IconUser size="default" />
|
||||
{text && 'Logout'}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,11 +1,218 @@
|
||||
@import '../../tokens.less';
|
||||
|
||||
.navigate {
|
||||
&__footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: @color-surface;
|
||||
border-right: 1px solid @color-border;
|
||||
transition: @transition-sidebar;
|
||||
overflow: hidden;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-bottom: 12px;
|
||||
padding: 20px 16px 16px;
|
||||
min-height: 64px;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
transition: width @transition-fast, opacity @transition-fast;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 1rem 8px 10px !important;
|
||||
margin-top: auto;
|
||||
flex-shrink: 0;
|
||||
border-top: 1px solid @color-border;
|
||||
|
||||
&--collapsed {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem 8px 10px !important;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&__logout-btn {
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(251,113,133,0.25);
|
||||
background: rgba(251,113,133,0.06);
|
||||
color: #fb7185;
|
||||
border-radius: @radius-btn;
|
||||
cursor: pointer;
|
||||
font-size: @text-sm;
|
||||
font-weight: 500;
|
||||
font-family: @font-ui;
|
||||
transition: background @transition-fast, border-color @transition-fast;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: rgba(251,113,133,0.12);
|
||||
border-color: rgba(251,113,133,0.4);
|
||||
}
|
||||
|
||||
&--icon-only {
|
||||
flex: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: @radius-btn;
|
||||
|
||||
&:hover {
|
||||
background: rgba(251,113,133,0.08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__toggle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
flex-shrink: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: @color-faint;
|
||||
cursor: pointer;
|
||||
border-radius: @radius-btn;
|
||||
transition: background @transition-fast, color @transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255,255,255,0.06);
|
||||
color: @color-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Semi Nav overrides
|
||||
.semi-navigation {
|
||||
background: @color-surface !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.semi-navigation-item {
|
||||
border-radius: @radius-btn !important;
|
||||
color: @color-muted !important;
|
||||
transition: background @transition-fast, color @transition-fast !important;
|
||||
margin: 2px 8px !important;
|
||||
|
||||
&:hover {
|
||||
color: @color-text !important;
|
||||
}
|
||||
|
||||
&.semi-navigation-item-selected,
|
||||
&[aria-selected="true"] {
|
||||
background: rgba(224,74,56,0.12) !important;
|
||||
border: 1px solid rgba(224,74,56,0.25) !important;
|
||||
color: @color-text !important;
|
||||
|
||||
.semi-navigation-item-icon {
|
||||
color: @color-accent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.semi-navigation-sub-title {
|
||||
color: @color-muted !important;
|
||||
}
|
||||
|
||||
// Collapsed state — icons perfectly centered
|
||||
.semi-navigation-collapsed {
|
||||
// Text span is display:block and takes up flex space — must be removed so justify-content:center works
|
||||
.semi-navigation-item-text {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.semi-navigation-item,
|
||||
.semi-navigation-sub-title {
|
||||
margin: 2px 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 36px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.semi-navigation-item-inner,
|
||||
.semi-navigation-sub-title-inner {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
// Semi adds margin-right to icons for text spacing — remove it when collapsed
|
||||
.semi-navigation-item-icon,
|
||||
.semi-navigation-sub-title-icon {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: auto !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Semi Nav.Footer — full width, no extra padding (our BEM class controls it)
|
||||
.semi-navigation-footer {
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
// Collapsed submenu popup — actual class used by Semi UI is .semi-navigation-popover
|
||||
.semi-navigation-popover {
|
||||
background: @color-elevated !important;
|
||||
border: 1px solid @color-border !important;
|
||||
border-radius: @radius-card !important;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
|
||||
overflow: hidden !important;
|
||||
|
||||
.semi-navigation-item {
|
||||
margin: 2px 6px !important;
|
||||
color: @color-muted !important;
|
||||
border: none !important;
|
||||
border-radius: @radius-btn !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255,255,255,0.06) !important;
|
||||
color: @color-text !important;
|
||||
}
|
||||
|
||||
&.semi-navigation-item-selected,
|
||||
&.semi-dropdown-item-active {
|
||||
background: rgba(224,74,56,0.10) !important;
|
||||
border: none !important;
|
||||
color: @color-text !important;
|
||||
|
||||
.semi-navigation-item-icon {
|
||||
color: @color-accent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Button, Nav } from '@douyinfe/semi-ui-19';
|
||||
import { Nav } from '@douyinfe/semi-ui-19';
|
||||
import { IconStar, IconSetting, IconTerminal, IconHistogram, IconSidebar } from '@douyinfe/semi-icons';
|
||||
import logoWhite from '../../assets/logo_white.png';
|
||||
import heart from '../../assets/heart.png';
|
||||
@@ -65,20 +65,32 @@ export default function Navigation({ isAdmin }) {
|
||||
return '/' + split[0];
|
||||
}
|
||||
|
||||
const sidebarWidth = collapsed ? '60px' : '220px';
|
||||
|
||||
return (
|
||||
<Nav
|
||||
style={{ height: '100%', maxWidth: collapsed ? '60px' : '240px' }}
|
||||
style={{ height: '100%', width: sidebarWidth, minWidth: sidebarWidth, maxWidth: sidebarWidth }}
|
||||
items={items}
|
||||
isCollapsed={collapsed}
|
||||
selectedKeys={[parsePathName(location.pathname)]}
|
||||
onSelect={(key) => {
|
||||
navigate(key.itemKey);
|
||||
}}
|
||||
header={<img src={collapsed ? heart : logoWhite} width={collapsed ? '30' : '120'} alt="Fredy Logo" />}
|
||||
header={
|
||||
<div className="navigate__header">
|
||||
<img src={collapsed ? heart : logoWhite} width={collapsed ? 30 : 160} alt="Fredy Logo" />
|
||||
</div>
|
||||
}
|
||||
footer={
|
||||
<Nav.Footer className="navigate__footer">
|
||||
<Nav.Footer className={`navigate__footer${collapsed ? ' navigate__footer--collapsed' : ''}`}>
|
||||
<Logout text={!collapsed} />
|
||||
<Button icon={<IconSidebar />} onClick={() => setCollapsed(!collapsed)} />
|
||||
<button
|
||||
className="navigate__toggle-btn"
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
||||
>
|
||||
<IconSidebar size="default" />
|
||||
</button>
|
||||
</Nav.Footer>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -1,7 +1,89 @@
|
||||
@import '../../tokens.less';
|
||||
|
||||
.segmentParts {
|
||||
border: 1px solid #323232 !important;
|
||||
border-radius: .9rem !important;
|
||||
color: rgba(var(--semi-grey-8), 1);
|
||||
background: rgb(53, 54, 60);
|
||||
margin: 0 0 1rem 0;
|
||||
background: rgba(255,255,255,0.03) !important;
|
||||
border: 1px solid @color-border !important;
|
||||
border-radius: @radius-card !important;
|
||||
margin-bottom: @space-4;
|
||||
|
||||
// Semi Card header
|
||||
.semi-card-header {
|
||||
border-bottom: 1px solid @color-border !important;
|
||||
padding: 16px 20px !important;
|
||||
}
|
||||
|
||||
.semi-card-header-wrapper {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.semi-card-meta-title {
|
||||
font-weight: 700 !important;
|
||||
color: @color-text !important;
|
||||
font-size: @text-base !important;
|
||||
}
|
||||
|
||||
.semi-card-meta-description {
|
||||
color: #b8b8b8 !important;
|
||||
font-size: @text-sm !important;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.semi-card-body {
|
||||
padding: 16px 20px !important;
|
||||
}
|
||||
|
||||
// Semi input focus — subtle, not accent
|
||||
.semi-input-wrapper:focus-within,
|
||||
.semi-select:focus-within {
|
||||
border-color: @color-border-bright !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// Icon in card header
|
||||
.semi-card-meta-avatar {
|
||||
color: @color-accent !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Inputs inside segment cards
|
||||
.semi-input,
|
||||
.semi-input-number-wrapper {
|
||||
background: rgba(255,255,255,0.06) !important;
|
||||
border: 1px solid rgba(255,255,255,0.10) !important;
|
||||
border-radius: @radius-input !important;
|
||||
}
|
||||
|
||||
// TagInput
|
||||
.semi-tagInput-wrapper {
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(255,255,255,0.12) !important;
|
||||
border-radius: @radius-input !important;
|
||||
min-height: 38px;
|
||||
outline: none !important;
|
||||
&:focus-within {
|
||||
border-color: @color-border-bright !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
.semi-tagInput {
|
||||
background: transparent !important;
|
||||
}
|
||||
// Tag chips inside TagInput
|
||||
.semi-tag {
|
||||
background: @color-elevated !important;
|
||||
border: 1px solid @color-border-bright !important;
|
||||
color: @color-text !important;
|
||||
border-radius: @radius-chip !important;
|
||||
font-size: @text-sm !important;
|
||||
height: 24px !important;
|
||||
line-height: 22px !important;
|
||||
}
|
||||
.semi-tag-close {
|
||||
color: @color-muted !important;
|
||||
&:hover {
|
||||
color: @color-text !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,15 +5,11 @@
|
||||
|
||||
import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
|
||||
import { format } from '../../services/time/timeService';
|
||||
import { Table, Button, Empty } from '@douyinfe/semi-ui-19';
|
||||
import { Table, Button, Empty, Tag } from '@douyinfe/semi-ui-19';
|
||||
import { IconDelete, IconEdit } from '@douyinfe/semi-icons';
|
||||
|
||||
const empty = (
|
||||
<Empty
|
||||
image={<IllustrationNoResult />}
|
||||
darkModeImage={<IllustrationNoResultDark />}
|
||||
description={'No users found.'}
|
||||
/>
|
||||
<Empty image={<IllustrationNoResult />} darkModeImage={<IllustrationNoResultDark />} description="No users found." />
|
||||
);
|
||||
|
||||
export default function UserTable({ user = [], onUserRemoval, onUserEdit } = {}) {
|
||||
@@ -23,47 +19,73 @@ export default function UserTable({ user = [], onUserRemoval, onUserEdit } = {})
|
||||
empty={empty}
|
||||
columns={[
|
||||
{
|
||||
title: 'Username',
|
||||
title: 'User',
|
||||
dataIndex: 'username',
|
||||
render: (value, record) => (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<span style={{ color: '#efefef', fontWeight: 500 }}>{value}</span>
|
||||
{record.isAdmin && (
|
||||
<Tag
|
||||
size="small"
|
||||
style={{
|
||||
background: 'rgba(224,74,56,0.12)',
|
||||
border: '1px solid rgba(224,74,56,0.35)',
|
||||
color: '#e04a38',
|
||||
borderRadius: 9999,
|
||||
fontSize: 10,
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.04em',
|
||||
padding: '0 8px',
|
||||
}}
|
||||
>
|
||||
ADMIN
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Last login',
|
||||
dataIndex: 'lastLogin',
|
||||
render: (value) => {
|
||||
return format(value);
|
||||
},
|
||||
render: (value) => format(value),
|
||||
},
|
||||
{
|
||||
title: 'Number of jobs',
|
||||
title: 'Jobs',
|
||||
dataIndex: 'numberOfJobs',
|
||||
},
|
||||
{
|
||||
title: 'MCP Token',
|
||||
dataIndex: 'mcpToken',
|
||||
render: (value) => {
|
||||
return (
|
||||
<span style={{ fontFamily: 'monospace', fontSize: '0.85em', wordBreak: 'break-all' }}>
|
||||
{value || '---'}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
render: (value) => (
|
||||
<span
|
||||
style={{
|
||||
fontFamily: 'JetBrains Mono, monospace',
|
||||
fontSize: '0.85em',
|
||||
wordBreak: 'break-all',
|
||||
color: '#505050',
|
||||
}}
|
||||
>
|
||||
{value || '---'}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
dataIndex: 'tools',
|
||||
render: (value, user) => {
|
||||
return (
|
||||
<div style={{ float: 'right' }}>
|
||||
<Button
|
||||
type="danger"
|
||||
icon={<IconDelete />}
|
||||
onClick={() => onUserRemoval(user.id)}
|
||||
style={{ marginRight: '1rem' }}
|
||||
/>
|
||||
<Button type="primary" icon={<IconEdit />} onClick={() => onUserEdit(user.id)} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
render: (_, record) => (
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
|
||||
<Button
|
||||
style={{
|
||||
background: 'transparent',
|
||||
border: '1px solid rgba(251,113,133,0.2)',
|
||||
color: '#fb7185',
|
||||
}}
|
||||
icon={<IconDelete />}
|
||||
onClick={() => onUserRemoval(record.id)}
|
||||
/>
|
||||
<Button type="primary" theme="solid" icon={<IconEdit />} onClick={() => onUserEdit(record.id)} />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
dataSource={user}
|
||||
|
||||
Reference in New Issue
Block a user