okooooooo/xugou
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: optimism UI

Browse Source
This commit is contained in:
zaunist committed 2025-04-05 05:27:57 +08:00
1 parent b4243a2038
commit a1352b797a
4 files changed
+112 -121
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/i18n/locales/en-US.ts
+2 -2
View File
@@ -435,13 +435,13 @@ const enUS = {
// Notification settings
'notifications.title': 'Notification Configuration',
'notifications.description': 'Configure system notifications for API monitors, agents and system events.',
'notifications.description': 'Configure system notifications for API monitors and agents events.',
'notifications.tabs.global': 'Global Settings',
'notifications.tabs.specificMonitors': 'API Monitor Config',
'notifications.tabs.specificAgents': 'Agent Config',
'notifications.globalSettings.description': 'Configure global notification settings, including notification channels, monitoring settings, and message templates. These settings will apply to all monitors and clients unless overridden by specific configurations.',
'notifications.channels.title': 'Notification Channels',
'notifications.channels.description': 'Configure different notification channels to receive alerts about monitors, agents and system events.',
'notifications.channels.description': 'Configure different notification channels to receive alerts about monitors and agents events.',
'notifications.channels.add': 'Add Channel',
'notifications.channels.edit': 'Edit Channel',
'notifications.channels.delete': 'Delete Channel',
frontend/src/i18n/locales/zh-CN.ts
+2 -2
View File
@@ -435,7 +435,7 @@ const zhCN = {
// 通知设置
'notifications.title': '通知配置',
'notifications.description': '配置系统通知设置，包括API监控、客户端和系统事件的通知。',
'notifications.description': '配置系统通知设置，包括API监控、客户端的通知。',
'notifications.tabs.channels': '通知渠道',
'notifications.tabs.settings': '通知设置',
'notifications.tabs.templates': '消息模板',
@@ -443,7 +443,7 @@ const zhCN = {
'notifications.tabs.specificMonitors': 'API监控配置',
'notifications.tabs.specificAgents': '客户端配置',
'notifications.channels.title': '通知渠道',
'notifications.channels.description': '配置不同的通知渠道，以接收关于监控、客户端和系统事件的通知。',
'notifications.channels.description': '配置不同的通知渠道，以接收关于监控和客户端的通知。',
'notifications.channels.add': '添加渠道',
'notifications.channels.edit': '编辑通知渠道',
'notifications.channels.delete': '删除通知渠道',
frontend/src/pages/status/StatusPageConfig.tsx
-71
View File
@@ -383,7 +383,6 @@ const StatusPageConfig = () => {
<Tabs.Trigger value="general" className="tab-trigger">{t('statusPageConfig.general')}</Tabs.Trigger>
<Tabs.Trigger value="services" className="tab-trigger">{t('statusPageConfig.services')}</Tabs.Trigger>
<Tabs.Trigger value="agents" className="tab-trigger">{t('statusPageConfig.agents')}</Tabs.Trigger>
<Tabs.Trigger value="appearance" className="tab-trigger">{t('statusPageConfig.appearance')}</Tabs.Trigger>
</Tabs.List>
<Box pt="5" px="2" className="tab-content-container">
@@ -527,76 +526,6 @@ const StatusPageConfig = () => {
)}
</Flex>
</Tabs.Content>
<Tabs.Content value="appearance" className="tab-content">
<Flex direction="column" gap="5">
<Box>
<Text as="label" size="2" weight="medium" style={{ marginBottom: '6px', display: 'block' }}>
{t('statusPageConfig.logoUrl')}
</Text>
<TextField.Input
name="logoUrl"
value={config.logoUrl}
onChange={handleChange}
placeholder={t('statusPageConfig.logoUrlPlaceholder')}
size="3"
/>
</Box>
<Box>
<Text as="label" size="2" weight="medium" style={{ marginBottom: '6px', display: 'block' }}>
{t('statusPageConfig.customCss')}
</Text>
<TextArea
name="customCss"
value={config.customCss}
onChange={handleChange}
placeholder={t('statusPageConfig.customCssPlaceholder')}
style={{
minHeight: '150px',
fontFamily: 'monospace'
}}
size="3"
/>
<Text size="1" color="gray" style={{ marginTop: '8px' }}>
{t('statusPageConfig.customCssHelp')}
</Text>
</Box>
{/* 添加组件和事件部分（高级功能） */}
<Separator size="4" my="4" />
<Flex direction="column" gap="3">
<Flex justify="between" align="center">
<Text as="label" size="2" weight="medium">
{t('statusPageConfig.components')}
</Text>
<Button variant="outline" size="1" disabled>
<Text size="1">{t('statusPageConfig.addComponent')}</Text>
</Button>
</Flex>
<Text size="1" color="gray">
{t('common.comingSoon', { defaultValue: '即将推出的功能' })}
</Text>
</Flex>
<Separator size="4" my="4" />
<Flex direction="column" gap="3">
<Flex justify="between" align="center">
<Text as="label" size="2" weight="medium">
{t('statusPageConfig.incidents')}
</Text>
<Button variant="outline" size="1" disabled>
<Text size="1">{t('statusPageConfig.createIncident')}</Text>
</Button>
</Flex>
<Text size="1" color="gray">
{t('common.comingSoon', { defaultValue: '即将推出的功能' })}
</Text>
</Flex>
</Flex>
</Tabs.Content>
</Box>
</Tabs.Root>
</Card>
frontend/src/styles/components.css
+108 -46
View File
@@ -543,38 +543,80 @@
padding: 0 8px 0 4px;
margin-bottom: 0;
gap: 4px;
outline: none !important;
box-shadow: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
}
.tab-trigger {
transition: all 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* Radix UI Tabs 样式重置 - 强力覆盖 */
/* 这些选择器会覆盖 Radix UI 的默认样式 */
button[data-radix-collection-item][role="tab"],
button[data-orientation="horizontal"][role="tab"],
button[data-state][role="tab"],
.rt-TabsTrigger,
.tab-trigger,
[role="tab"] {
all: unset !important;
box-shadow: none !important;
border: none !important;
outline: none !important;
cursor: pointer;
margin: 0 2px;
font-size: 14px;
position: relative;
border: none !important;
outline: none !important;
box-shadow: none !important;
padding: 10px 14px;
background-color: transparent;
cursor: pointer;
border-radius: 4px 4px 0 0;
letter-spacing: 0.01em;
color: var(--gray-11);
text-decoration: none !important;
user-select: none;
-webkit-user-select: none;
transition: all 0.25s ease;
}
.tab-trigger:focus-visible {
button[data-radix-collection-item][role="tab"]:focus,
button[data-orientation="horizontal"][role="tab"]:focus,
button[data-state][role="tab"]:focus,
.rt-TabsTrigger:focus,
.tab-trigger:focus,
[role="tab"]:focus {
outline: none !important;
box-shadow: none !important;
border: none !important;
}
button[data-radix-collection-item][role="tab"]:focus-visible,
button[data-orientation="horizontal"][role="tab"]:focus-visible,
button[data-state][role="tab"]:focus-visible,
.rt-TabsTrigger:focus-visible,
.tab-trigger:focus-visible,
[role="tab"]:focus-visible {
outline: none !important;
box-shadow: none !important;
border: none !important;
background-color: var(--gray-2);
}
.tab-trigger[data-state="active"] {
button[data-radix-collection-item][role="tab"][data-state="active"],
button[data-orientation="horizontal"][role="tab"][data-state="active"],
button[data-state="active"][role="tab"],
.rt-TabsTrigger[data-state="active"],
.tab-trigger[data-state="active"],
[role="tab"][data-state="active"] {
color: var(--blue-9);
font-weight: 600;
background-color: transparent;
}
.tab-trigger[data-state="active"]::after {
button[data-radix-collection-item][role="tab"][data-state="active"]::after,
button[data-orientation="horizontal"][role="tab"][data-state="active"]::after,
button[data-state="active"][role="tab"]::after,
.rt-TabsTrigger[data-state="active"]::after,
.tab-trigger[data-state="active"]::after,
[role="tab"][data-state="active"]::after {
content: '';
position: absolute;
bottom: -1px;
@@ -582,61 +624,63 @@
width: 100%;
height: 2px;
background-color: var(--blue-9);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform: scaleX(0.45);
transform: scaleX(1);
transform-origin: center;
}
.tab-trigger:hover {
button[data-radix-collection-item][role="tab"]:hover,
button[data-orientation="horizontal"][role="tab"]:hover,
button[data-state][role="tab"]:hover,
.rt-TabsTrigger:hover,
.tab-trigger:hover,
[role="tab"]:hover {
color: var(--blue-10);
background-color: var(--gray-2);
transform: translateY(-1px);
box-shadow: none !important;
border: none !important;
outline: none !important;
}
button[data-radix-collection-item][role="tab"]:not([data-state="active"]):hover::after,
button[data-orientation="horizontal"][role="tab"]:not([data-state="active"]):hover::after,
button[data-state][role="tab"]:not([data-state="active"]):hover::after,
.rt-TabsTrigger:not([data-state="active"]):hover::after,
.tab-trigger:not([data-state="active"]):hover::after,
[role="tab"]:not([data-state="active"]):hover::after {
content: none;
}
button[data-radix-collection-item][role="tab"]:active,
button[data-orientation="horizontal"][role="tab"]:active,
button[data-state][role="tab"]:active,
.rt-TabsTrigger:active,
.tab-trigger:active,
[role="tab"]:active {
transform: translateY(0);
background-color: var(--gray-3);
}
.tab-trigger:not([data-state="active"]):hover::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background-color: var(--gray-5);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform: scaleX(0.3);
transform-origin: center;
}
/* 添加点击效果 */
.tab-trigger:active {
transform: scale(0.97);
background-color: var(--gray-4);
box-shadow: none !important;
border: none !important;
outline: none !important;
}
/* 标签内容区样式 */
[data-radix-tabs-content] {
[data-radix-tabs-content],
[role="tabpanel"],
.rt-TabsContent,
.tab-content {
padding-top: 24px !important;
outline: none !important;
border: none !important;
}
/* CSS重置，删除不必要的边框 */
[role="tablist"],
[role="tab"],
[role="tabpanel"] {
outline: none !important;
box-shadow: none !important;
}
[role="tabpanel"] {
animation: tab-content-fade-in 0.3s ease;
}
.tab-content-container {
border-top: none !important;
}
.tab-content {
outline: none !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
@keyframes tab-content-fade-in {
@@ -654,6 +698,24 @@
[data-orientation="horizontal"] {
border-bottom: 1px solid var(--gray-4) !important;
padding-bottom: 0 !important;
outline: none !important;
box-shadow: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
}
/* 解决Safari特定渲染问题 */
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance:none) {
button[role="tab"],
.tab-trigger,
.rt-TabsTrigger {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
}
}
/* 表单输入字段样式 */