style: optimized performance and refined styles

This commit is contained in:
kangfenmao 2024-10-26 23:48:14 +08:00
parent 1444739cc6
commit 1f8551135f
2 changed files with 15 additions and 8 deletions

View File

@ -8,11 +8,13 @@ import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
import { Agent, Assistant } from '@renderer/types' import { Agent, Assistant } from '@renderer/types'
import { uuid } from '@renderer/utils' import { uuid } from '@renderer/utils'
import { Divider, Input, InputRef, Modal, Tag } from 'antd' import { Divider, Input, InputRef, Modal, Tag } from 'antd'
import { take } from 'lodash'
import { useEffect, useMemo, useRef, useState } from 'react' import { useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import styled from 'styled-components' import styled from 'styled-components'
import { HStack } from '../Layout' import { HStack } from '../Layout'
import Scrollbar from '../Scrollbar'
interface Props { interface Props {
resolve: (value: Assistant | undefined) => void resolve: (value: Assistant | undefined) => void
@ -93,7 +95,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
</HStack> </HStack>
<Divider style={{ margin: 0, borderBlockStartWidth: 0.5 }} /> <Divider style={{ margin: 0, borderBlockStartWidth: 0.5 }} />
<Container> <Container>
{agents.map((agent) => ( {take(agents, 100).map((agent) => (
<AgentItem <AgentItem
key={agent.id} key={agent.id}
onClick={() => onCreateAssistant(agent)} onClick={() => onCreateAssistant(agent)}
@ -110,14 +112,10 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
) )
} }
const Container = styled.div` const Container = styled(Scrollbar)`
padding: 0 12px; padding: 0 12px;
height: 50vh; height: 50vh;
margin-top: 10px; margin-top: 10px;
overflow-y: auto;
&::-webkit-scrollbar {
display: none;
}
` `
const AgentItem = styled.div` const AgentItem = styled.div`

View File

@ -184,18 +184,19 @@ const Tabs = styled(TabsAntd)`
padding-left: 0 !important; padding-left: 0 !important;
} }
.ant-tabs-nav-list { .ant-tabs-nav-list {
padding: 10px; padding: 10px 8px;
} }
.ant-tabs-nav-operations { .ant-tabs-nav-operations {
display: none !important; display: none !important;
} }
.ant-tabs-tab { .ant-tabs-tab {
margin: 0 !important; margin: 0 !important;
border-radius: 6px; border-radius: 20px;
margin-bottom: 5px !important; margin-bottom: 5px !important;
font-size: 14px; font-size: 14px;
justify-content: center; justify-content: center;
&:hover { &:hover {
color: var(--color-text) !important;
background-color: var(--color-background-soft); background-color: var(--color-background-soft);
} }
} }
@ -210,6 +211,14 @@ const Tabs = styled(TabsAntd)`
.ant-tabs-ink-bar { .ant-tabs-ink-bar {
display: none; display: none;
} }
.ant-tabs-tab-btn:active {
color: var(--color-text) !important;
}
.ant-tabs-tab-active {
.ant-tabs-tab-btn {
color: var(--color-text) !important;
}
}
` `
export default AgentsPage export default AgentsPage