diff --git a/src/components/Sidebar.scss b/src/components/Sidebar.scss
deleted file mode 100644
index f43c052..0000000
--- a/src/components/Sidebar.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-.sidebar {
- width: 200px;
- background: var(--bg-secondary);
- border-right: 1px solid var(--border-color);
- display: flex;
- flex-direction: column;
- padding: 16px 0;
- transition: width 0.25s ease;
- position: relative;
- z-index: 100;
-
- &.collapsed {
- width: 64px;
-
- .nav-menu {
- padding: 0 8px;
- }
-
- .nav-label,
- .collapse-label {
- display: none;
- }
-
- .nav-item {
- justify-content: center;
- padding: 10px;
- gap: 0;
- }
-
- .collapse-btn {
- justify-content: center;
- padding: 10px;
- gap: 0;
- }
- }
-}
-
-.nav-menu {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 4px;
- padding: 0 8px;
-}
-
-.nav-item {
- display: flex;
- align-items: center;
- gap: 12px;
- padding: 10px 16px;
- border-radius: 9999px;
- color: var(--text-secondary);
- text-decoration: none;
- transition: all 0.2s ease;
- white-space: nowrap;
- border: none;
- background: transparent;
- cursor: pointer;
- font-family: inherit;
- width: 100%;
-
- &:hover {
- background: var(--bg-tertiary);
- color: var(--text-primary);
- }
-
- &.active {
- background: var(--primary);
- color: white;
- }
-}
-
-.nav-icon {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 20px;
- height: 20px;
- flex-shrink: 0;
-}
-
-.nav-label {
- font-size: 14px;
- font-weight: 500;
-}
-
-.sidebar-footer {
- padding: 12px 8px 0 8px;
- border-top: 1px solid var(--border-color);
- margin-top: 8px;
- display: flex;
- flex-direction: column;
- gap: 4px;
-}
-
-.collapse-btn {
- display: flex;
- align-items: center;
- justify-content: flex-start;
- gap: 12px;
- width: 100%;
- padding: 10px 16px;
- border: none;
- background: transparent;
- color: var(--text-secondary);
- cursor: pointer;
- border-radius: 9999px;
- transition: all 0.2s ease;
- margin-top: 4px;
- font-family: inherit;
-
- svg {
- width: 20px;
- height: 20px;
- }
-
- &:hover {
- background: var(--bg-tertiary);
- color: var(--text-primary);
- }
-
- .collapse-label {
- font-size: 14px;
- font-weight: 500;
- }
-}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index f72d8ba..27fcbbd 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,11 +1,48 @@
-import { useState } from 'react'
+import { useState, type ReactElement } from 'react'
import { NavLink, useLocation } from 'react-router-dom'
+import Avatar from '@mui/material/Avatar'
+import Box from '@mui/material/Box'
+import Divider from '@mui/material/Divider'
+import Drawer from '@mui/material/Drawer'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import Tooltip from '@mui/material/Tooltip'
+import Typography from '@mui/material/Typography'
import { Home, MessageSquare, BarChart3, Users, FileText, Database, Settings, SquareChevronLeft, SquareChevronRight, Download, Aperture, Network } from 'lucide-react'
-import './Sidebar.scss'
+import { useAppStore } from '../stores/appStore'
+
+const DRAWER_WIDTH = 220
+const COLLAPSED_DRAWER_WIDTH = 72
+
+type RouteItem = {
+ key: string
+ label: string
+ icon: ReactElement
+ type: 'route'
+ path: string
+}
+
+type ActionItem = {
+ key: string
+ label: string
+ icon: ReactElement
+ type: 'action'
+ onClick: () => void
+}
+
+type NavItemConfig = RouteItem | ActionItem
function Sidebar() {
const location = useLocation()
+ const userInfo = useAppStore(state => state.userInfo)
const [collapsed, setCollapsed] = useState(false)
+ const drawerWidth = collapsed ? COLLAPSED_DRAWER_WIDTH : DRAWER_WIDTH
+ const userDisplayName = userInfo?.nickName?.trim() || userInfo?.alias?.trim() || '未连接用户'
+ const userInitial = userDisplayName.slice(0, 1).toUpperCase()
+ const widthTransition = '220ms cubic-bezier(0.4, 0, 0.2, 1)'
+ const fadeTransition = '140ms ease'
const isActive = (path: string) => {
return location.pathname === path
@@ -35,122 +72,282 @@ function Sidebar() {
}
}
+ const navItems: NavItemConfig[] = [
+ { key: 'home', label: '首页', icon:
, type: 'route', path: '/home' },
+ { key: 'chat', label: '聊天查看', icon:
, type: 'action', onClick: openChatWindow },
+ { key: 'moments', label: '朋友圈', icon:
, type: 'action', onClick: openMomentsWindow },
+ { key: 'analytics', label: '私聊分析', icon:
, type: 'route', path: '/analytics' },
+ { key: 'group-analytics', label: '群聊分析', icon:
, type: 'action', onClick: openGroupAnalyticsWindow },
+ { key: 'annual-report', label: '年度报告', icon:
, type: 'route', path: '/annual-report' },
+ { key: 'export', label: '导出数据', icon:
, type: 'route', path: '/export' },
+ { key: 'data-management', label: '数据管理', icon:
, type: 'route', path: '/data-management' },
+ { key: 'open-api', label: '开放接口', icon:
, type: 'route', path: '/open-api' },
+ ]
+
+ const navItemSx = {
+ minHeight: 44,
+ width: collapsed ? 44 : '100%',
+ mx: collapsed ? 'auto' : 0,
+ px: 1.25,
+ py: 1,
+ borderRadius: collapsed ? '50%' : '9999px',
+ justifyContent: 'center',
+ color: 'var(--text-secondary)',
+ transition: `width 220ms cubic-bezier(0.4, 0, 0.2, 1), margin 220ms cubic-bezier(0.4, 0, 0.2, 1), border-radius 220ms cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, color 0.2s ease`,
+ '&:hover': {
+ backgroundColor: 'var(--bg-tertiary)',
+ color: 'var(--text-primary)',
+ },
+ '&.Mui-selected': {
+ backgroundColor: 'var(--primary)',
+ color: '#ffffff',
+ },
+ '&.Mui-selected:hover': {
+ backgroundColor: 'var(--primary-hover)',
+ },
+ }
+
+ const navItemIconSx = {
+ minWidth: 24,
+ width: 24,
+ color: 'inherit',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flexShrink: 0,
+ }
+
+ const railContentSx = {
+ display: 'flex',
+ alignItems: 'center',
+ overflow: 'hidden',
+ width: collapsed ? '24px' : '100%',
+ transition: `width ${widthTransition}`,
+ }
+
+ const profileContentSx = {
+ display: 'flex',
+ alignItems: 'center',
+ overflow: 'hidden',
+ width: collapsed ? '36px' : '100%',
+ transition: `width ${widthTransition}`,
+ }
+
+ const createLabelSx = (maxWidth: number) => ({
+ minWidth: 0,
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+ maxWidth: collapsed ? '0px' : `${maxWidth}px`,
+ opacity: collapsed ? 0 : 1,
+ transform: collapsed ? 'translateX(-8px)' : 'translateX(0)',
+ marginLeft: collapsed ? '0px' : '12px',
+ transition: [
+ `max-width ${widthTransition}`,
+ `opacity ${fadeTransition}`,
+ `transform ${widthTransition}`,
+ `margin-left ${widthTransition}`,
+ ].join(', '),
+ })
+
+ const renderNavItem = (item: NavItemConfig) => {
+ const selected = item.type === 'route' ? isActive(item.path) : false
+ const button = (
+
+
+
+ {item.icon}
+
+
+
+ {item.label}
+
+
+
+
+ )
+
+ return (
+
+
+ {button}
+
+
+ )
+ }
+
return (
-
+
+
+ setCollapsed(!collapsed)}
+ sx={navItemSx}
+ >
+
+
+ {collapsed ? : }
+
+
+
+ {collapsed ? '展开' : '收回'}
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/src/pages/OpenApiPage.tsx b/src/pages/OpenApiPage.tsx
index e9e514e..757f206 100644
--- a/src/pages/OpenApiPage.tsx
+++ b/src/pages/OpenApiPage.tsx
@@ -1,37 +1,412 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, type ReactNode } from 'react'
+import {
+ Alert,
+ Box,
+ Button,
+ Card,
+ CardContent,
+ CardHeader,
+ Chip,
+ CircularProgress,
+ Container,
+ IconButton,
+ InputAdornment,
+ Snackbar,
+ Stack,
+ Switch,
+ TextField,
+ Tooltip,
+ Typography,
+} from '@mui/material'
+import { ChevronDown, ChevronUp, Copy, Eye, EyeOff, FileText, RefreshCw, RotateCcw, Save, Sparkles } from 'lucide-react'
import * as configService from '../services/config'
-import { Save, RefreshCw, RotateCcw, Eye, EyeOff, Sparkles, Copy, FileText, AlertCircle } from 'lucide-react'
import { useTitleBarStore } from '../stores/titleBarStore'
-import './SettingsPage.scss'
+
+const HTTP_API_DOC_URL = 'https://ciphertalk.apifox.cn/'
+
+type ToastState = {
+ text: string
+ success: boolean
+}
+
+type HttpApiStatus = {
+ running: boolean
+ host: string
+ port: number
+ enabled: boolean
+ startedAt: string
+ uptimeMs: number
+ tokenConfigured: boolean
+ tokenPreview: string
+ baseUrl: string
+ endpoints: Array<{ method: string; path: string; desc: string }>
+ lastError: string
+}
+
+type StatusMetricCardProps = {
+ label: string
+ value: ReactNode
+ helper?: string
+}
+
+const LARGE_RADIUS = '28px'
+const MEDIUM_RADIUS = '24px'
+const SMALL_RADIUS = '20px'
+
+const monoSx = {
+ fontFamily: 'var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace)',
+}
+
+const cardSx = {
+ borderRadius: LARGE_RADIUS,
+ border: 'none',
+ bgcolor: 'transparent',
+ backdropFilter: 'none',
+ boxShadow: 'none',
+ overflow: 'visible',
+}
+
+const sectionHeaderSx = {
+ px: { xs: 0.5, md: 1 },
+ pt: 0,
+ pb: 1.5,
+}
+
+const sectionContentSx = {
+ px: { xs: 0.5, md: 1 },
+ pt: 0,
+ '&:last-child': {
+ pb: 0,
+ },
+}
+
+const pillButtonSx = {
+ borderRadius: '999px',
+ px: 2.25,
+ minHeight: 44,
+ textTransform: 'none',
+ fontWeight: 600,
+}
+
+const primaryButtonSx = {
+ ...pillButtonSx,
+ color: '#fff',
+ background: 'var(--primary-gradient)',
+ boxShadow: '0 10px 28px var(--primary-light)',
+ '&:hover': {
+ background: 'var(--primary-gradient)',
+ filter: 'brightness(0.98)',
+ boxShadow: '0 12px 30px var(--primary-light)',
+ },
+ '&.Mui-disabled': {
+ color: 'var(--text-tertiary)',
+ background: 'var(--bg-tertiary)',
+ boxShadow: 'none',
+ },
+}
+
+const secondaryButtonSx = {
+ ...pillButtonSx,
+ color: 'var(--text-primary)',
+ borderColor: 'var(--border-color)',
+ backgroundColor: 'var(--bg-secondary)',
+ '&:hover': {
+ borderColor: 'var(--primary)',
+ backgroundColor: 'var(--primary-light)',
+ },
+ '&.Mui-disabled': {
+ color: 'var(--text-tertiary)',
+ borderColor: 'var(--border-color)',
+ backgroundColor: 'transparent',
+ },
+}
+
+const inlineIconButtonSx = {
+ color: 'var(--text-secondary)',
+ bgcolor: 'transparent',
+ borderRadius: '999px',
+ '&:hover': {
+ color: 'var(--text-primary)',
+ bgcolor: 'var(--primary-light)',
+ },
+}
+
+const codePillSx = {
+ ...monoSx,
+ display: 'inline-flex',
+ alignItems: 'center',
+ px: 1,
+ py: 0.5,
+ borderRadius: '999px',
+ fontSize: 12,
+ bgcolor: 'var(--bg-tertiary)',
+ border: '1px solid var(--border-color)',
+ color: 'var(--text-primary)',
+}
+
+const panelSx = {
+ p: 2.25,
+ borderRadius: MEDIUM_RADIUS,
+ border: '1px solid var(--border-color)',
+ bgcolor: 'var(--bg-secondary)',
+ boxShadow: '0 6px 18px rgba(0, 0, 0, 0.03)',
+}
+
+const textFieldSx = {
+ '& .MuiInputLabel-root': {
+ color: 'var(--text-secondary)',
+ },
+ '& .MuiInputLabel-root.Mui-focused': {
+ color: 'var(--primary)',
+ },
+ '& .MuiOutlinedInput-root': {
+ height: 42,
+ borderRadius: '999px',
+ color: 'var(--text-primary)',
+ backgroundColor: 'var(--bg-secondary)',
+ overflow: 'hidden',
+ alignItems: 'stretch',
+ pr: 0,
+ '& fieldset': {
+ borderColor: 'var(--border-color)',
+ },
+ '&:hover fieldset': {
+ borderColor: 'var(--primary)',
+ },
+ '&.Mui-focused': {
+ boxShadow: '0 0 0 4px var(--primary-light)',
+ },
+ '&.Mui-focused fieldset': {
+ borderColor: 'var(--primary)',
+ borderWidth: 1,
+ },
+ },
+ '& .MuiInputBase-input': {
+ paddingTop: '10px',
+ paddingBottom: '10px',
+ paddingLeft: '16px',
+ paddingRight: '12px',
+ color: 'var(--text-primary)',
+ },
+ '& input[type=number]': {
+ appearance: 'textfield',
+ },
+ '& input[type=number]::-webkit-outer-spin-button, & input[type=number]::-webkit-inner-spin-button': {
+ WebkitAppearance: 'none',
+ margin: 0,
+ },
+ '& .MuiInputAdornment-root': {
+ margin: 0,
+ alignSelf: 'stretch',
+ maxHeight: 'none',
+ height: '100%',
+ },
+ '& .MuiFormHelperText-root': {
+ marginLeft: 1.5,
+ marginTop: 0.75,
+ color: 'var(--text-tertiary)',
+ },
+ '& .MuiFormHelperText-root.Mui-error': {
+ color: 'var(--danger)',
+ },
+}
+
+const endpointCardSx = {
+ p: 2.25,
+ borderRadius: MEDIUM_RADIUS,
+ border: '1px solid var(--border-color)',
+ bgcolor: 'var(--bg-secondary)',
+ boxShadow: '0 6px 18px rgba(0, 0, 0, 0.03)',
+}
+
+const endpointPathSx = {
+ ...codePillSx,
+ px: 1.4,
+ py: 0.85,
+ fontSize: 13,
+}
+
+const tertiaryButtonSx = {
+ borderRadius: '999px',
+ minHeight: 34,
+ px: 1.5,
+ textTransform: 'none',
+ color: 'var(--text-secondary)',
+ borderColor: 'var(--border-color)',
+ backgroundColor: 'transparent',
+ '&:hover': {
+ borderColor: 'var(--primary)',
+ color: 'var(--primary)',
+ backgroundColor: 'var(--primary-light)',
+ },
+}
+
+const stepperButtonSx = {
+ width: '100%',
+ flex: 1,
+ minWidth: 0,
+ borderRadius: 0,
+ color: 'var(--text-secondary)',
+ backgroundColor: 'transparent',
+ '& + &': {
+ borderTop: '1px solid var(--border-color)',
+ },
+ '&:hover': {
+ color: 'var(--primary)',
+ bgcolor: 'var(--primary-light)',
+ },
+}
+
+const switchSx = {
+ '& .MuiSwitch-switchBase.Mui-checked': {
+ color: 'var(--primary)',
+ },
+ '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+ backgroundColor: 'var(--primary)',
+ opacity: 1,
+ },
+ '& .MuiSwitch-track': {
+ borderRadius: '999px',
+ backgroundColor: 'var(--text-tertiary)',
+ opacity: 0.35,
+ },
+}
+
+const getChipSx = (tone: 'primary' | 'neutral' | 'danger' = 'neutral') => {
+ if (tone === 'primary') {
+ return {
+ borderRadius: '999px',
+ border: '1px solid var(--primary)',
+ color: 'var(--primary)',
+ backgroundColor: 'var(--primary-light)',
+ fontWeight: 700,
+ }
+ }
+
+ if (tone === 'danger') {
+ return {
+ borderRadius: '999px',
+ border: '1px solid rgba(220, 53, 69, 0.24)',
+ color: 'var(--danger)',
+ backgroundColor: 'rgba(220, 53, 69, 0.08)',
+ fontWeight: 700,
+ }
+ }
+
+ return {
+ borderRadius: '999px',
+ border: '1px solid var(--border-color)',
+ color: 'var(--text-secondary)',
+ backgroundColor: 'var(--bg-secondary)',
+ fontWeight: 700,
+ }
+}
+
+const getAlertSx = (tone: 'primary' | 'neutral' | 'danger' = 'primary') => ({
+ borderRadius: MEDIUM_RADIUS,
+ border: '1px solid',
+ borderColor: tone === 'danger' ? 'rgba(220, 53, 69, 0.24)' : 'var(--border-color)',
+ bgcolor: tone === 'danger'
+ ? 'rgba(220, 53, 69, 0.08)'
+ : tone === 'primary'
+ ? 'var(--primary-light)'
+ : 'var(--bg-secondary)',
+ color: 'var(--text-primary)',
+ '& .MuiAlert-icon': {
+ color: tone === 'danger' ? 'var(--danger)' : 'var(--primary)',
+ },
+})
+
+function formatDuration(durationMs: number) {
+ if (!durationMs || durationMs <= 0) {
+ return '0 秒'
+ }
+
+ const totalSeconds = Math.floor(durationMs / 1000)
+ const days = Math.floor(totalSeconds / 86400)
+ const hours = Math.floor((totalSeconds % 86400) / 3600)
+ const minutes = Math.floor((totalSeconds % 3600) / 60)
+ const seconds = totalSeconds % 60
+
+ const parts = [
+ days > 0 ? `${days} 天` : null,
+ hours > 0 ? `${hours} 小时` : null,
+ minutes > 0 ? `${minutes} 分钟` : null,
+ seconds > 0 ? `${seconds} 秒` : null,
+ ].filter(Boolean)
+
+ return parts.slice(0, 3).join(' ')
+}
+
+function createRandomToken() {
+ if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+ return `ct_${crypto.randomUUID().replace(/-/g, '')}`
+ }
+
+ const randomPart = Math.random().toString(36).slice(2)
+ const randomPart2 = Math.random().toString(36).slice(2)
+ return `ct_${Date.now().toString(36)}_${randomPart}${randomPart2}`
+}
+
+function getEndpointUrl(baseUrl: string, path: string) {
+ if (path === '/v1' || path === '/v1/') {
+ return baseUrl
+ }
+
+ return `${baseUrl}${path.replace(/^\/v1/, '')}`
+}
+
+function StatusMetricCard({ label, value, helper }: StatusMetricCardProps) {
+ return (
+
+
+
+
+ {label}
+
+ {helper && (
+
+ {helper}
+
+ )}
+
+
+ {typeof value === 'string'
+ ? (
+
+ {value}
+
+ )
+ : value}
+
+
+
+ )
+}
function OpenApiPage() {
- const HTTP_API_DOC_URL = 'https://ciphertalk.apifox.cn/'
-
- const [message, setMessage] = useState<{ text: string; success: boolean } | null>(null)
+ const [message, setMessage] = useState
(null)
const [httpApiEnabled, setHttpApiEnabled] = useState(false)
const [httpApiPort, setHttpApiPort] = useState(5031)
const [httpApiToken, setHttpApiToken] = useState('')
const [showHttpApiToken, setShowHttpApiToken] = useState(false)
- const [httpApiStatus, setHttpApiStatus] = useState<{
- running: boolean
- host: string
- port: number
- enabled: boolean
- startedAt: string
- uptimeMs: number
- tokenConfigured: boolean
- tokenPreview: string
- baseUrl: string
- endpoints: Array<{ method: string; path: string; desc: string }>
- lastError: string
- } | null>(null)
+ const [httpApiStatus, setHttpApiStatus] = useState(null)
const [isSavingHttpApi, setIsSavingHttpApi] = useState(false)
const [isRefreshingHttpApi, setIsRefreshingHttpApi] = useState(false)
const [nowTs, setNowTs] = useState(Date.now())
+ const setTitleBarContent = useTitleBarStore(state => state.setRightContent)
+
const showMessage = (text: string, success: boolean) => {
setMessage({ text, success })
- setTimeout(() => setMessage(null), 3000)
}
const copyText = async (text: string, successText: string) => {
@@ -43,18 +418,13 @@ function OpenApiPage() {
}
}
- const createRandomToken = () => {
- const randomPart = Math.random().toString(36).slice(2)
- const randomPart2 = Math.random().toString(36).slice(2)
- return `ct_${Date.now().toString(36)}_${randomPart}${randomPart2}`
- }
-
useEffect(() => {
const load = async () => {
try {
const enabled = await configService.getHttpApiEnabled()
const port = await configService.getHttpApiPort()
const token = await configService.getHttpApiToken()
+
setHttpApiEnabled(enabled)
setHttpApiPort(port)
setHttpApiToken(token)
@@ -63,37 +433,46 @@ function OpenApiPage() {
if (statusResult.success && statusResult.status) {
setHttpApiStatus(statusResult.status)
}
- } catch (e) {
- showMessage(`加载开放接口配置失败: ${e}`, false)
+ } catch (error) {
+ showMessage(`加载开放接口配置失败: ${error}`, false)
}
}
+
load()
}, [])
useEffect(() => {
- if (!httpApiStatus?.running) return
+ if (!httpApiStatus?.running) {
+ return
+ }
+
const timer = window.setInterval(() => setNowTs(Date.now()), 1000)
return () => window.clearInterval(timer)
}, [httpApiStatus?.running])
- const setTitleBarContent = useTitleBarStore(state => state.setRightContent)
-
useEffect(() => {
setTitleBarContent(
- }
onClick={() => window.electronAPI.shell.openExternal(HTTP_API_DOC_URL)}
- style={{ display: 'flex', alignItems: 'center', gap: '6px' }}
+ sx={{
+ ...secondaryButtonSx,
+ minHeight: 34,
+ px: 1.5,
+ }}
>
- 接口文档
-
+ 接口文档
+
)
+
return () => setTitleBarContent(null)
}, [setTitleBarContent])
const refreshHttpApiStatus = async () => {
setIsRefreshingHttpApi(true)
+
try {
const result = await window.electronAPI.httpApi.getStatus()
if (result.success && result.status) {
@@ -103,20 +482,28 @@ function OpenApiPage() {
} else {
showMessage(result.error || '获取接口状态失败', false)
}
- } catch (e) {
- showMessage(`获取接口状态失败: ${e}`, false)
+ } catch (error) {
+ showMessage(`获取接口状态失败: ${error}`, false)
} finally {
setIsRefreshingHttpApi(false)
}
}
+ const isPortInvalid = !Number.isInteger(httpApiPort) || httpApiPort < 1 || httpApiPort > 65535
+
const handleSaveHttpApiSettings = async () => {
+ if (isPortInvalid) {
+ showMessage('监听端口需在 1 到 65535 之间', false)
+ return
+ }
+
setIsSavingHttpApi(true)
+
try {
const result = await window.electronAPI.httpApi.applySettings({
enabled: httpApiEnabled,
port: httpApiPort,
- token: httpApiToken
+ token: httpApiToken,
})
if (result.success && result.status) {
@@ -129,8 +516,8 @@ function OpenApiPage() {
} else {
showMessage(result.error || '保存开放接口配置失败', false)
}
- } catch (e) {
- showMessage(`保存开放接口配置失败: ${e}`, false)
+ } catch (error) {
+ showMessage(`保存开放接口配置失败: ${error}`, false)
} finally {
setIsSavingHttpApi(false)
}
@@ -138,6 +525,7 @@ function OpenApiPage() {
const handleRestartHttpApi = async () => {
setIsRefreshingHttpApi(true)
+
try {
const result = await window.electronAPI.httpApi.restart()
if (result.success && result.status) {
@@ -146,8 +534,8 @@ function OpenApiPage() {
} else {
showMessage(result.error || '接口服务重启失败', false)
}
- } catch (e) {
- showMessage(`接口服务重启失败: ${e}`, false)
+ } catch (error) {
+ showMessage(`接口服务重启失败: ${error}`, false)
} finally {
setIsRefreshingHttpApi(false)
}
@@ -158,174 +546,536 @@ function OpenApiPage() {
const uptime = status?.running && startedAtMs > 0
? Math.max(0, nowTs - startedAtMs)
: (status?.uptimeMs ?? 0)
- const uptimeText = uptime > 0 ? `${Math.floor(uptime / 1000)} 秒` : '0 秒'
+ const uptimeText = formatDuration(uptime)
+ const fallbackBaseUrl = `http://127.0.0.1:${isPortInvalid ? 5031 : httpApiPort}/v1`
+ const baseUrl = status?.baseUrl || fallbackBaseUrl
return (
-
- {message &&
{message.text}
}
-
-
-
-
- 开放接口（HTTP API）
- 用于给外部工具调用，默认仅监听本机地址 `127.0.0.1`。
-
-
-
-
-
-
启用 HTTP API
-
关闭后将停止监听端口，不再对外提供接口。
-
-
-
-
-
-
-
建议保持默认 5031，范围 1-65535
-
setHttpApiPort(Number(e.target.value || 5031))}
+
+
+
+
+
+
+
+
+ {httpApiEnabled
+ ? 'HTTP API 已处于启用配置。修改端口或密钥后，需要点击“保存并应用”同步到本地服务。'
+ : 'HTTP API 当前关闭。保存并应用后才会开始监听端口，对外提供接口。'}
+
+
+
+
-
-
-
令牌预设说明：留空表示不鉴权；设置后，`/v1/status` 等接口必须携带 `Authorization: Bearer <token>`。
-
-
setHttpApiToken(e.target.value)}
- placeholder="留空表示不启用令牌鉴权"
- />
-
-
-
-
-
-
-
-
-
-
-
+
setHttpApiToken(event.target.value)}
+ placeholder="留空表示不启用令牌鉴权"
+ helperText="设置后，请使用 Authorization: Bearer 调用受保护接口。"
+ InputProps={{
+ endAdornment: (
+
+
+
+
+ setShowHttpApiToken((value) => !value)}
+ sx={inlineIconButtonSx}
+ >
+ {showHttpApiToken ? : }
+
+
-
+
+ setHttpApiToken(createRandomToken())}
+ sx={inlineIconButtonSx}
+ >
+
+
+
-
- 接口状态与信息
+ {httpApiToken && (
+
+ copyText(httpApiToken, '访问密钥已复制')}
+ sx={inlineIconButtonSx}
+ >
+
+
+
+ )}
+
+
+
+ ),
+ }}
+ />
+
- {status ? (
- <>
-
-
-
运行状态
-
{status.running ? '运行中' : '未运行'}
-
-
-
监听地址
-
{status.host}:{status.port}
-
-
-
-
鉴权状态
-
{status.tokenConfigured ? '已启用' : '未启用'}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {status.tokenConfigured && (
-
- )}
-
-
-
-
-
最近错误：{status.lastError}
-
尚未读取到接口状态，请点击“刷新状态”。
+
+
+
+ {status && (
+
+
+
+
+ {status.endpoints.map((endpoint) => {
+ const endpointUrl = getEndpointUrl(baseUrl, endpoint.path)
+
+ return (
+
+
+
+
+
+
+ {endpoint.desc}
+
+
+ {endpoint.path}
+
+
+
+ {endpointUrl}
+
+
+
+ }
+ onClick={() => copyText(endpointUrl, `${endpoint.path} 已复制`)}
+ sx={{ ...tertiaryButtonSx, flexShrink: 0 }}
+ >
+ 复制
+
+
+
+ )
+ })}
+
+
+
)}
-
-
-
-