Skip to content

Commit 3c70dfa

Browse files
canisminor1990canisminor1990
authored
💄 style: update share style (#11716)
* style: update share style * style: update share style * style: update share style * style: update share style
1 parent ffad193 commit 3c70dfa

File tree

32 files changed

+327
-339
lines changed

32 files changed

+327
-339
lines changed

‎src/app/[variants]/(main)/agent/cron/[cronId]/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
import { EDITOR_DEBOUNCE_TIME } from '@lobechat/const';
44
import { ActionIcon, Flexbox } from '@lobehub/ui';
55
import { useDebounceFn } from 'ahooks';
6-
import { App, Empty, message } from 'antd';
6+
import { App, message } from 'antd';
7+
import { Empty } from '@lobehub/ui';
78
import dayjs, { type Dayjs } from 'dayjs';
89
import { Trash2 } from 'lucide-react';
910
import { memo, useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';

‎src/app/[variants]/(main)/group/profile/features/Header/index.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import { Flexbox } from '@lobehub/ui';
4-
import { createStyles } from 'antd-style';
4+
import { createStaticStyles } from 'antd-style';
55
import { Crown, Users } from 'lucide-react';
66
import { memo, useMemo, useState } from 'react';
77
import { useTranslation } from 'react-i18next';
@@ -17,7 +17,7 @@ import { systemStatusSelectors } from '@/store/global/selectors';
1717
import AgentBuilderToggle from './AgentBuilderToggle';
1818
import ChromeTabs, { type ChromeTabItem } from './ChromeTabs';
1919

20-
const useStyles = createStyles(({ css, token }) => ({
20+
const styles = createStaticStyles(({ css, cssVar }) => ({
2121
header: css`
2222
overflow: hidden;
2323
flex: none;
@@ -26,7 +26,7 @@ const useStyles = createStyles(({ css, token }) => ({
2626
height: 44px;
2727
padding-block: 8px;
2828
padding-inline: 12px;
29-
border-block-end: 1px solid ${token.colorBorderSecondary};
29+
border-block-end: 1px solid ${cssVar.colorBorderSecondary};
3030
`,
3131
tabsWrapper: css`
3232
scrollbar-width: none;
@@ -42,7 +42,6 @@ const useStyles = createStyles(({ css, token }) => ({
4242

4343
const Header = memo(() => {
4444
const { t } = useTranslation('chat');
45-
const { styles } = useStyles();
4645

4746
const [showAddModal, setShowAddModal] = useState(false);
4847

‎src/app/[variants]/(main)/home/features/InputArea/SkillInstallBanner.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { getKlavisServerByServerIdentifier, getLobehubSkillProviderById } from '@lobechat/const';
44
import { Avatar, Flexbox, Icon } from '@lobehub/ui';
5-
import { createStyles } from 'antd-style';
5+
import { createStaticStyles } from 'antd-style';
66
import { Blocks } from 'lucide-react';
77
import { type ReactNode, createElement, memo, useMemo, useState } from 'react';
88
import { useTranslation } from 'react-i18next';
@@ -11,7 +11,7 @@ import SkillStore from '@/features/SkillStore';
1111
import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfig';
1212
import { useToolStore } from '@/store/tool';
1313

14-
const useStyles = createStyles(({ css, token }) => ({
14+
const styles = createStaticStyles(({ css, cssVar }) => ({
1515
banner: css`
1616
cursor: pointer;
1717
@@ -28,24 +28,24 @@ const useStyles = createStyles(({ css, token }) => ({
2828
margin-block-end: 6px;
2929
padding-block: 42px 10px;
3030
padding-inline: 16px;
31-
border: 1px solid ${token.colorBorderSecondary};
31+
border: 1px solid ${cssVar.colorBorderSecondary};
3232
border-radius: 20px;
3333
34-
background: ${token.colorFillQuaternary};
34+
background: ${cssVar.colorFillQuaternary};
3535
box-shadow: 0 12px 32px rgb(0 0 0 / 4%);
3636
3737
transition: background 0.2s ease-in-out;
3838
3939
&:hover {
40-
background: ${token.colorFillQuaternary};
40+
background: ${cssVar.colorFillQuaternary};
4141
}
4242
`,
4343
icon: css`
44-
color: ${token.colorTextSecondary};
44+
color: ${cssVar.colorTextSecondary};
4545
`,
4646
text: css`
4747
font-size: 13px;
48-
color: ${token.colorTextSecondary};
48+
color: ${cssVar.colorTextSecondary};
4949
`,
5050
}));
5151

@@ -60,7 +60,6 @@ const BANNER_SKILL_IDS = [
6060
] as const;
6161

6262
const SkillInstallBanner = memo(() => {
63-
const { styles } = useStyles();
6463
const { t } = useTranslation('plugin');
6564
const [open, setOpen] = useState(false);
6665

‎src/app/[variants]/(main)/settings/profile/index.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
'use client';
22

33
import { isDesktop } from '@lobechat/const';
4-
import { Flexbox, FormGroup, Text } from '@lobehub/ui';
5-
import { Skeleton as AntSkeleton, Divider } from 'antd';
4+
import { Flexbox, FormGroup, Skeleton, Text } from '@lobehub/ui';
5+
import { Divider } from 'antd';
66
import { useEffect } from 'react';
77
import { useTranslation } from 'react-i18next';
88

@@ -28,20 +28,20 @@ const SkeletonRow = ({ mobile }: { mobile?: boolean }) => {
2828
return (
2929
<Flexbox gap={12} style={rowStyle}>
3030
<Flexbox align="center" horizontal justify="space-between">
31-
<AntSkeleton.Input active size="small" style={{ height: 22, width: 60 }} />
32-
<AntSkeleton.Input active size="small" style={{ height: 22, width: 80 }} />
31+
<Skeleton.Button active size="small" style={{ height: 22, width: 60 }} />
32+
<Skeleton.Button active size="small" style={{ height: 22, width: 80 }} />
3333
</Flexbox>
34-
<AntSkeleton.Input active size="small" style={{ height: 22, width: 120 }} />
34+
<Skeleton.Button active size="small" style={{ height: 22, width: 120 }} />
3535
</Flexbox>
3636
);
3737
}
3838
return (
3939
<Flexbox align="center" gap={24} horizontal justify="space-between" style={rowStyle}>
4040
<Flexbox align="center" gap={24} horizontal style={{ flex: 1 }}>
41-
<AntSkeleton.Input active size="small" style={{ ...labelStyle, height: 22 }} />
42-
<AntSkeleton.Input active size="small" style={{ height: 22, minWidth: 120, width: 160 }} />
41+
<Skeleton.Button active size="small" style={{ ...labelStyle, height: 22 }} />
42+
<Skeleton.Button active size="small" style={{ height: 22, minWidth: 120, width: 160 }} />
4343
</Flexbox>
44-
<AntSkeleton.Input active size="small" style={{ height: 22, width: 100 }} />
44+
<Skeleton.Button active size="small" style={{ height: 22, width: 100 }} />
4545
</Flexbox>
4646
);
4747
};

‎src/app/[variants]/(main)/settings/provider/features/ProviderConfig/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -394,7 +394,6 @@ const ProviderConfig = memo<ProviderConfigProps>(
394394
),
395395
desc: t('providerModels.config.checker.desc'),
396396
label: t('providerModels.config.checker.title'),
397-
minWidth: undefined,
398397
}
399398
: undefined,
400399
showAceGcm && aceGcmItem,

‎src/app/[variants]/(main)/settings/skill/features/Actions.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ const Actions = memo<ActionsProps>(({ identifier, type, isMCP }) => {
6464
setSettingsOpen(true);
6565
}
6666
}}
67-
type="default"
6867
>
6968
{t('store.actions.configure')}
7069
</Button>

‎src/app/[variants]/(main)/settings/skill/features/KlavisSkillItem.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { type KlavisServerType } from '@lobechat/const';
44
import { ActionIcon, Avatar, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
55
import { App, Button } from 'antd';
6-
import { createStyles, cssVar } from 'antd-style';
6+
import { createStaticStyles, cssVar } from 'antd-style';
77
import { Loader2, MoreVerticalIcon, SquareArrowOutUpRight, Unplug } from 'lucide-react';
88
import { memo, useCallback, useEffect, useRef, useState } from 'react';
99
import { useTranslation } from 'react-i18next';
@@ -17,22 +17,22 @@ import { userProfileSelectors } from '@/store/user/selectors';
1717
const POLL_INTERVAL_MS = 1000;
1818
const POLL_TIMEOUT_MS = 15_000;
1919

20-
const useStyles = createStyles(({ css, token }) => ({
20+
const styles = createStaticStyles(({ css, cssVar }) => ({
2121
connected: css`
2222
font-size: 14px;
23-
color: ${token.colorSuccess};
23+
color: ${cssVar.colorSuccess};
2424
`,
2525
container: css`
2626
padding-block: 12px;
2727
padding-inline: 0;
2828
`,
2929
disconnected: css`
3030
font-size: 14px;
31-
color: ${token.colorTextTertiary};
31+
color: ${cssVar.colorTextTertiary};
3232
`,
3333
error: css`
3434
font-size: 14px;
35-
color: ${token.colorError};
35+
color: ${cssVar.colorError};
3636
`,
3737
icon: css`
3838
display: flex;
@@ -44,20 +44,20 @@ const useStyles = createStyles(({ css, token }) => ({
4444
height: 48px;
4545
border-radius: 12px;
4646
47-
background: ${token.colorFillTertiary};
47+
background: ${cssVar.colorFillTertiary};
4848
`,
4949
pending: css`
5050
font-size: 14px;
51-
color: ${token.colorWarning};
51+
color: ${cssVar.colorWarning};
5252
`,
5353
title: css`
5454
cursor: pointer;
5555
font-size: 15px;
5656
font-weight: 500;
57-
color: ${token.colorText};
57+
color: ${cssVar.colorText};
5858
5959
&:hover {
60-
color: ${token.colorPrimary};
60+
color: ${cssVar.colorPrimary};
6161
}
6262
`,
6363
}));
@@ -69,7 +69,6 @@ interface KlavisSkillItemProps {
6969

7070
const KlavisSkillItem = memo<KlavisSkillItemProps>(({ serverType, server }) => {
7171
const { t } = useTranslation('setting');
72-
const { styles } = useStyles();
7372
const { modal } = App.useApp();
7473
const [isConnecting, setIsConnecting] = useState(false);
7574
const [isWaitingAuth, setIsWaitingAuth] = useState(false);

‎src/app/[variants]/(main)/settings/skill/features/LobehubSkillItem.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { type LobehubSkillProviderType } from '@lobechat/const';
44
import { ActionIcon, Avatar, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
55
import { App, Button } from 'antd';
6-
import { createStyles, cssVar } from 'antd-style';
6+
import { createStaticStyles, cssVar } from 'antd-style';
77
import { Loader2, MoreVerticalIcon, SquareArrowOutUpRight, Unplug } from 'lucide-react';
88
import { memo, useCallback, useEffect, useRef, useState } from 'react';
99
import { useTranslation } from 'react-i18next';
@@ -18,28 +18,28 @@ import {
1818
const POLL_INTERVAL_MS = 1000;
1919
const POLL_TIMEOUT_MS = 15_000;
2020

21-
const useStyles = createStyles(({ css, token }) => ({
21+
const styles = createStaticStyles(({ css, cssVar }) => ({
2222
connected: css`
2323
font-size: 14px;
24-
color: ${token.colorSuccess};
24+
color: ${cssVar.colorSuccess};
2525
`,
2626
container: css`
2727
padding-block: 12px;
2828
padding-inline: 0;
2929
`,
3030
disconnected: css`
3131
font-size: 14px;
32-
color: ${token.colorTextTertiary};
32+
color: ${cssVar.colorTextTertiary};
3333
`,
3434
disconnectedIcon: css`
3535
opacity: 0.5;
3636
`,
3737
disconnectedTitle: css`
38-
color: ${token.colorTextTertiary};
38+
color: ${cssVar.colorTextTertiary};
3939
`,
4040
error: css`
4141
font-size: 14px;
42-
color: ${token.colorError};
42+
color: ${cssVar.colorError};
4343
`,
4444
icon: css`
4545
display: flex;
@@ -51,16 +51,16 @@ const useStyles = createStyles(({ css, token }) => ({
5151
height: 48px;
5252
border-radius: 12px;
5353
54-
background: ${token.colorFillTertiary};
54+
background: ${cssVar.colorFillTertiary};
5555
`,
5656
title: css`
5757
cursor: pointer;
5858
font-size: 15px;
5959
font-weight: 500;
60-
color: ${token.colorText};
60+
color: ${cssVar.colorText};
6161
6262
&:hover {
63-
color: ${token.colorPrimary};
63+
color: ${cssVar.colorPrimary};
6464
}
6565
`,
6666
}));
@@ -72,7 +72,6 @@ interface LobehubSkillItemProps {
7272

7373
const LobehubSkillItem = memo<LobehubSkillItemProps>(({ provider, server }) => {
7474
const { t } = useTranslation('setting');
75-
const { styles } = useStyles();
7675
const { modal } = App.useApp();
7776
const [isConnecting, setIsConnecting] = useState(false);
7877
const [isWaitingAuth, setIsWaitingAuth] = useState(false);

‎src/app/[variants]/(main)/settings/skill/features/McpSkillItem.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import { Block, Flexbox, Modal } from '@lobehub/ui';
4-
import { createStyles } from 'antd-style';
4+
import { createStaticStyles } from 'antd-style';
55
import { memo, useState } from 'react';
66
import { useTranslation } from 'react-i18next';
77

@@ -15,7 +15,7 @@ import { type LobeToolType } from '@/types/tool/tool';
1515

1616
import Actions from './Actions';
1717

18-
const useStyles = createStyles(({ css, token }) => ({
18+
const styles = createStaticStyles(({ css, cssVar }) => ({
1919
container: css`
2020
padding-block: 12px;
2121
padding-inline: 0;
@@ -33,10 +33,10 @@ const useStyles = createStyles(({ css, token }) => ({
3333
cursor: pointer;
3434
font-size: 15px;
3535
font-weight: 500;
36-
color: ${token.colorText};
36+
color: ${cssVar.colorText};
3737
3838
&:hover {
39-
color: ${token.colorPrimary};
39+
color: ${cssVar.colorPrimary};
4040
}
4141
`,
4242
}));
@@ -52,7 +52,6 @@ interface McpSkillItemProps {
5252

5353
const McpSkillItem = memo<McpSkillItemProps>(
5454
({ identifier, title, avatar, type, runtimeType, author }) => {
55-
const { styles } = useStyles();
5655
const { t } = useTranslation('plugin');
5756
const isMCP = runtimeType === 'mcp';
5857
const isCustomPlugin = type === 'customPlugin';

‎src/app/[variants]/(main)/settings/skill/features/SkillList.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
getLobehubSkillProviderById,
1212
} from '@lobechat/const';
1313
import { Divider } from 'antd';
14-
import { createStyles } from 'antd-style';
14+
import { createStaticStyles } from 'antd-style';
1515
import isEqual from 'fast-deep-equal';
1616
import { memo, useMemo } from 'react';
1717
import { useTranslation } from 'react-i18next';
@@ -33,26 +33,25 @@ import McpSkillItem from './McpSkillItem';
3333
import KlavisSkillItem from './KlavisSkillItem';
3434
import LobehubSkillItem from './LobehubSkillItem';
3535

36-
const useStyles = createStyles(({ css, token }) => ({
36+
const styles = createStaticStyles(({ css, cssVar }) => ({
3737
container: css`
3838
display: flex;
3939
flex-direction: column;
4040
gap: 8px;
4141
`,
4242
description: css`
4343
margin-block-end: 8px;
44-
color: ${token.colorTextSecondary};
44+
color: ${cssVar.colorTextSecondary};
4545
`,
4646
empty: css`
4747
padding: 24px;
48-
color: ${token.colorTextTertiary};
48+
color: ${cssVar.colorTextTertiary};
4949
text-align: center;
5050
`,
5151
}));
5252

5353
const SkillList = memo(() => {
5454
const { t } = useTranslation('setting');
55-
const { styles } = useStyles();
5655

5756
const isLobehubSkillEnabled = useServerConfigStore(serverConfigSelectors.enableLobehubSkill);
5857
const isKlavisEnabled = useServerConfigStore(serverConfigSelectors.enableKlavis);

0 commit comments

Comments
 (0)