onChange?.(color, formatColor(color, format))}
+ />
+ )
+}
diff --git a/ruoyi-fastapi-frontend/react/web/src/components/Hamburger/index.jsx b/ruoyi-fastapi-frontend/react/web/src/components/Hamburger/index.jsx
new file mode 100644
index 000000000..54b7c431c
--- /dev/null
+++ b/ruoyi-fastapi-frontend/react/web/src/components/Hamburger/index.jsx
@@ -0,0 +1,17 @@
+import '@/assets/styles/components.css'
+import { Button } from 'antd'
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
+import useAppStore from '@/store/modules/app'
+export default function Hamburger() {
+ const { sidebarOpened, toggleSidebar } = useAppStore()
+ return (
+ : }
+ onClick={toggleSidebar}
+ />
+ )
+}
diff --git a/ruoyi-fastapi-frontend/react/web/src/components/HeaderSearch/index.jsx b/ruoyi-fastapi-frontend/react/web/src/components/HeaderSearch/index.jsx
new file mode 100644
index 000000000..9de28f615
--- /dev/null
+++ b/ruoyi-fastapi-frontend/react/web/src/components/HeaderSearch/index.jsx
@@ -0,0 +1,158 @@
+import { useEffect, useRef, useState } from 'react'
+import { Button, Empty, Input, Modal } from 'antd'
+import { SearchOutlined, EnterOutlined } from '@ant-design/icons'
+import { useNavigate } from 'react-router-dom'
+import usePermissionStore from '@/store/modules/permission'
+import { routeLocation } from '@/utils/router'
+import SvgIcon from '@/components/SvgIcon'
+import './style.css'
+
+export default function HeaderSearch() {
+ const routes = usePermissionStore((state) => state.routes),
+ navigate = useNavigate()
+ const [open, setOpen] = useState(false),
+ [query, setQuery] = useState(''),
+ [active, setActive] = useState(0)
+ const input = useRef(null),
+ results = useRef(null)
+ const options = routes
+ .filter(
+ (route) =>
+ route.meta?.title &&
+ !route.children?.length &&
+ !route.hidden &&
+ !/^https?:/.test(route.path)
+ )
+ .map((route) => ({
+ path: routeLocation(route),
+ title: route.meta.title,
+ icon: route.meta.icon,
+ label: [
+ ...routes
+ .filter((parent) => parent.meta?.title && route.path.startsWith(parent.path + '/'))
+ .map((parent) => parent.meta.title),
+ route.meta.title,
+ ].join(' / '),
+ }))
+ .filter(
+ (item) =>
+ !query.trim() ||
+ (item.label + ' ' + item.path).toLowerCase().includes(query.trim().toLowerCase())
+ )
+ const selected = Math.min(active, Math.max(0, options.length - 1))
+ useEffect(() => {
+ results.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: 'nearest' })
+ }, [selected, query])
+ function choose(item) {
+ if (!item) return
+ setOpen(false)
+ navigate(item.path)
+ }
+ return (
+ <>
+ }
+ aria-label="搜索菜单"
+ onClick={() => {
+ setQuery('')
+ setActive(0)
+ setOpen(true)
+ }}
+ />
+ setOpen(false)}
+ className="header-search-dialog"
+ width={600}
+ afterOpenChange={(visible) => visible && input.current?.focus()}
+ >
+ }
+ allowClear
+ size="large"
+ placeholder="搜索菜单名称或路径"
+ aria-label="菜单名称或路径"
+ value={query}
+ role="combobox"
+ aria-expanded={open}
+ aria-controls="menu-search-results"
+ aria-activedescendant={options.length ? 'menu-search-' + selected : undefined}
+ onChange={(event) => {
+ setQuery(event.target.value)
+ setActive(0)
+ }}
+ onKeyDown={(event) => {
+ if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+ event.preventDefault()
+ setActive(
+ (selected + (event.key === 'ArrowDown' ? 1 : -1) + options.length) %
+ Math.max(1, options.length)
+ )
+ }
+ if (event.key === 'Enter') {
+ event.preventDefault()
+ choose(options[selected])
+ }
+ }}
+ />
+
+ 找到 {options.length} 个菜单
+
+
+
+
+ ↑
+ ↓ 切换
+
+
+ Enter 选择
+
+
+ Esc 关闭
+
+
+
+
+ )
+}
diff --git a/ruoyi-fastapi-frontend/react/web/src/components/HeaderSearch/style.css b/ruoyi-fastapi-frontend/react/web/src/components/HeaderSearch/style.css
new file mode 100644
index 000000000..d2f09737f
--- /dev/null
+++ b/ruoyi-fastapi-frontend/react/web/src/components/HeaderSearch/style.css
@@ -0,0 +1,93 @@
+.header-search {
+ font-size: 18px;
+ vertical-align: middle;
+}
+.header-search-dialog .ant-modal-body {
+ padding-top: 8px;
+}
+.header-search-dialog .result-count {
+ padding: 10px 12px 4px;
+ font-size: 12px;
+ color: var(--ant-color-text-tertiary);
+}
+.header-search-dialog .result-count strong {
+ color: var(--ant-color-primary);
+}
+.header-search-dialog .result-wrap {
+ height: 280px;
+ margin: 4px 0;
+ overflow: auto;
+}
+.header-search-dialog .search-item {
+ display: flex;
+ width: 100%;
+ height: 48px;
+ gap: 10px;
+ align-items: center;
+ padding: 0 12px 0 0;
+ border: 0;
+ border-radius: 4px;
+ background: transparent;
+ color: var(--ant-color-text);
+ cursor: pointer;
+ text-align: left;
+ font: inherit;
+}
+.header-search-dialog .search-item:hover,
+.header-search-dialog .search-item.is-active {
+ background: var(--ant-color-primary-bg);
+ color: var(--ant-color-primary-text);
+}
+.header-search-dialog .search-item:focus-visible {
+ outline: 2px solid var(--ant-color-primary);
+ outline-offset: -2px;
+}
+.header-search-dialog .search-menu-icon {
+ flex: 0 0 48px;
+ text-align: center;
+ font-size: 18px;
+}
+.header-search-dialog .search-info {
+ display: flex;
+ flex: 1;
+ min-width: 0;
+ flex-direction: column;
+}
+.header-search-dialog .menu-title,
+.header-search-dialog .menu-path {
+ line-height: 20px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.header-search-dialog .menu-path {
+ color: var(--ant-color-text-tertiary);
+ font-size: 10px;
+}
+.header-search-dialog .search-empty {
+ padding: 48px 0;
+}
+.header-search-dialog .search-footer {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 28px;
+ padding: 12px 4px 0;
+ border-top: 1px solid var(--ant-color-border-secondary);
+ font-size: 12px;
+ color: var(--ant-color-text-secondary);
+}
+.header-search-dialog kbd {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ min-width: 20px;
+ height: 20px;
+ padding: 0 5px;
+ margin-right: 3px;
+ border: 1px solid var(--ant-color-border);
+ border-radius: 4px;
+ background: var(--ant-color-fill-alter);
+ font: 11px inherit;
+ box-shadow: 0 1px 0 var(--ant-color-border);
+}
diff --git a/ruoyi-fastapi-frontend/react/web/src/components/IconSelect/index.jsx b/ruoyi-fastapi-frontend/react/web/src/components/IconSelect/index.jsx
new file mode 100644
index 000000000..486064545
--- /dev/null
+++ b/ruoyi-fastapi-frontend/react/web/src/components/IconSelect/index.jsx
@@ -0,0 +1,139 @@
+import { useId, useRef, useState } from 'react'
+import { Empty, Input, Popover } from 'antd'
+import { SearchOutlined } from '@ant-design/icons'
+import SvgIcon from '@/components/SvgIcon'
+import './style.css'
+
+const files = import.meta.glob('../../assets/icons/svg/*.svg', {
+ eager: true,
+ query: '?url',
+ import: 'default',
+})
+const icons = Object.keys(files).map((path) => path.split('/').at(-1).replace('.svg', ''))
+
+export default function IconSelect({
+ value,
+ onChange,
+ placeholder = '点击选择图标',
+ inline = false,
+ disabled = false,
+ ...props
+}) {
+ const [open, setOpen] = useState(false)
+ const [search, setSearch] = useState('')
+ const triggerRef = useRef(null)
+ const panelId = useId()
+ function changeOpen(next) {
+ if (disabled) return
+ setOpen(next)
+ if (next) setSearch('')
+ }
+ function close() {
+ setOpen(false)
+ triggerRef.current?.focus()
+ }
+ const filtered = icons.filter((icon) => icon.includes(search))
+ const content = (
+ {
+ if (!inline && event.key === 'Escape') {
+ event.stopPropagation()
+ close()
+ }
+ }}
+ >
+
setSearch(event.target.value)}
+ />
+
+ {filtered.length ? (
+
+ {filtered.map((icon) => (
+
+
+
+ ))}
+
+ ) : (
+
+ )}
+
+
+
+ {valueType === 'array' ? 'JSON 数组 [ ]' : 'JSON 对象 { }'}
+
+ }
+ disabled={readOnly || !validation.valid || (!ready && !failed)}
+ onClick={format}
+ aria-label={`格式化${name}`}
+ >
+ 格式化
+
+ }
+ onClick={() => setExpanded(!expanded)}
+ aria-label={`${expanded ? '收起' : '展开'}${name}编辑器`}
+ aria-expanded={expanded}
+ >
+ {expanded ? '收起' : '展开'}
+
+
+
+
+ {!failed && (
+
+ )}
+ {!ready && !failed && (
+
+ 正在加载编辑器…
+
+ )}
+ {failed && (
+
onChange?.(event.target.value)}
+ onBlur={onBlur}
+ />
+ )}
+
+
+ {validation.valid ? (
+
+ 格式正确
+
+ ) : (
+
+ )}
+ {validation.valid && (
+
+ {failed ? '编辑器加载失败，已切换文本输入' : 'Tab 切换焦点 · Alt+Shift+F 格式化'}
+
+ )}
+
+
+
+
+ )
+}
+
+export default function LoadingProgress({ router }) {
+ const progress = useSyncExternalStore(loadingProgress.subscribe, loadingProgress.getSnapshot)
+ useEffect(() => {
+ let key
+ let finish
+ let timeout
+ const update = (state) => {
+ const next = state.navigation.location?.key || state.location.key
+ if (next !== key) {
+ key = next
+ const previous = finish
+ finish = beginProgress()
+ previous?.()
+ }
+ clearTimeout(timeout)
+ if (state.navigation.state === 'idle')
+ timeout = setTimeout(() => {
+ finish?.()
+ finish = undefined
+ }, 180)
+ }
+ update(router.state)
+ const unsubscribe = router.subscribe(update)
+ return () => {
+ unsubscribe()
+ clearTimeout(timeout)
+ finish?.()
+ }
+ }, [router])
+ return progress > 0 ? (
+
+ ) : null
+}
diff --git a/ruoyi-fastapi-frontend/react/web/src/components/LoadingProgress/style.css b/ruoyi-fastapi-frontend/react/web/src/components/LoadingProgress/style.css
new file mode 100644
index 000000000..bd16ed091
--- /dev/null
+++ b/ruoyi-fastapi-frontend/react/web/src/components/LoadingProgress/style.css
@@ -0,0 +1,7 @@
+.page-loading {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/ruoyi-fastapi-frontend/react/web/src/components/MonitorPanel/index.jsx b/ruoyi-fastapi-frontend/react/web/src/components/MonitorPanel/index.jsx
new file mode 100644
index 000000000..5cc04a11e
--- /dev/null
+++ b/ruoyi-fastapi-frontend/react/web/src/components/MonitorPanel/index.jsx
@@ -0,0 +1,55 @@
+import { Card } from 'antd'
+import './style.css'
+export default function MonitorPanel({ title, icon, children }) {
+ return (
+
+ {icon} {title}
+
+ }
+ >
+ {children}
+
+ )
+}
+export function MetricTable({ headers, rows }) {
+ return (
+
+
+ {headers && (
+
+
+ {headers.map((label) => (
+ |
+ {label}
+ |
+ ))}
+
+
+ )}
+
+ {rows.map((row, i) => (
+
+ {row.map((cell, j) => (
+ |
+ {cell && typeof cell === 'object' && 'span' in cell ? cell.value : (cell ?? '-')}
+ |
+ ))}
+
+ ))}
+
+
+
+ {nodes.map(([label, value, hint], index) => (
+
+ {index > 0 && (
+
+ {index === 1 ? '申请' : '访问'}
+
+
+ )}
+
+ {label}
+ {value}
+ {hint}
+
+
+ ))}
+
+
+ {kind === 'application' ? String(name || '应').slice(0, 1) : }
+
+
+ {name || '—'}
+ {detail != null && (
+
+ {detail}
+
+ )}
+
+
+
+
+
{title}
+
{section}
+
{description}
+
{actions}
}
+
+ {context &&
}
+ {filters && (
+
+
+
+ 筛选条件
+ {filterHint && {filterHint}}
+
+ {filterExtra}
+
+ )}
+
+ {toolbar && {toolbar}
}
+ {children}
+
+
+ {items.map((item, index) => (
+
+ update(index, event.target.value)}
+ onPressEnter={(event) => {
+ event.preventDefault()
+ if (item.trim())
+ onChange?.([...items.slice(0, index + 1), '', ...items.slice(index + 1)])
+ }}
+ />
+ }
+ onClick={() => onChange?.(items.filter((_, i) => i !== index))}
+ />
+
+ ))}
+
}
+ onClick={() => onChange?.([...items, ''])}
+ >
+ {addText}
+
+
+ {(values || []).slice(0, limit).map((value) =>
+ effect === 'plain' ? (
+
+ {label(value)}
+
+ ) : (
+
+ {label(value)}
+
+ )
+ )}
+ {values?.length > limit && +{values.length - limit}}
+ {!values?.length && {empty}}
+
+ )
+}
diff --git a/ruoyi-fastapi-frontend/react/web/src/components/OAuthWorkspace/entities.css b/ruoyi-fastapi-frontend/react/web/src/components/OAuthWorkspace/entities.css
new file mode 100644
index 000000000..506af8ed5
--- /dev/null
+++ b/ruoyi-fastapi-frontend/react/web/src/components/OAuthWorkspace/entities.css
@@ -0,0 +1,970 @@
+.oauth-entity-cell {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ min-width: 0;
+}
+.oauth-entity-cell .entity-mark {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 34px;
+ height: 34px;
+ border-radius: 8px;
+ color: var(--ant-color-primary);
+ background: var(--ant-color-primary-bg);
+ font-size: 16px;
+}
+.oauth-entity-cell.person .entity-mark {
+ flex-basis: 32px;
+ height: 32px;
+ border-radius: 50%;
+}
+.oauth-entity-cell.key .entity-mark {
+ color: var(--ant-color-warning);
+ background: var(--ant-color-warning-bg);
+}
+.oauth-entity-cell .entity-copy {
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+}
+.oauth-entity-cell .entity-copy > .ant-typography {
+ overflow-wrap: anywhere;
+ line-height: 1.45;
+}
+.oauth-entity-cell .entity-copy > .ant-typography-secondary {
+ font-size: 12px;
+}
+.oauth-entity-cell.is-large .entity-mark {
+ flex-basis: 42px;
+ height: 42px;
+ font-size: 20px;
+}
+.oauth-entity-cell.is-large strong {
+ font-size: 17px;
+}
+.oauth-workspace .ant-table-cell > .ant-tag {
+ margin-block: 3px;
+ max-width: 100%;
+ white-space: normal;
+}
+.oauth-workspace .ant-table-cell .ant-space {
+ flex-wrap: wrap;
+ gap: 4px !important;
+}
+.oauth-dialog .ant-modal-body {
+ max-height: none;
+ overflow: visible;
+ padding-top: 0;
+}
+.oauth-dialog .ant-modal-footer {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ gap: 8px;
+}
+.oauth-dialog .ant-drawer-body {
+ padding: 24px;
+}
+.oauth-dialog .ant-drawer-header-title {
+ min-width: 0;
+}
+.oauth-dialog .ant-drawer-title {
+ overflow-wrap: anywhere;
+}
+.oauth-dialog .ant-space-vertical {
+ width: 100%;
+ min-width: 0;
+}
+.oauth-dialog .ant-space-vertical > .ant-space-item {
+ width: 100%;
+ min-width: 0;
+}
+.oauth-dialog .ant-descriptions-item-label {
+ width: 132px;
+ white-space: normal;
+ color: var(--ant-color-text-secondary);
+ font-size: 13px;
+}
+.oauth-dialog .ant-descriptions-item-content {
+ overflow-wrap: anywhere;
+}
+.oauth-dialog .ant-collapse {
+ margin-top: 8px;
+}
+.oauth-dialog .ant-collapse .ant-descriptions-item-content {
+ font-family: ui-monospace, monospace;
+ font-size: 12px;
+}
+.oauth-dialog .detail-hero {
+ padding: 0 0 20px;
+ border-bottom: 1px solid var(--ant-color-border-secondary);
+}
+.oauth-dialog .detail-hero h4 {
+ margin: 0 0 6px;
+ font-size: 17px;
+}
+.oauth-dialog .detail-hero p {
+ margin: 6px 0 12px;
+ color: var(--ant-color-text-secondary);
+ font-size: 13px;
+}
+.oauth-dialog .ant-form-item-extra {
+ margin-top: 5px;
+ font-size: 12px;
+ line-height: 1.6;
+}
+.oauth-dialog .ant-checkbox-group {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px 16px;
+}
+.oauth-dialog .ant-input-number {
+ width: 100%;
+}
+.oauth-dialog .ant-alert {
+ overflow-wrap: anywhere;
+}
+.oauth-dialog .section-heading {
+ margin-bottom: 18px;
+ padding-bottom: 14px;
+ border-bottom: 1px solid var(--ant-color-border-secondary);
+}
+.oauth-dialog .section-heading h3 {
+ font-size: 17px;
+ margin: 0 0 5px;
+}
+.oauth-dialog .section-heading p {
+ margin: 0;
+ font-size: 13px;
+ color: var(--ant-color-text-secondary);
+}
+.oauth-client-editor :is(.ant-tabs-content-holder, .ant-tabs-body-holder) {
+ min-height: 470px;
+}
+.oauth-client-editor .ant-tabs-nav {
+ min-width: 132px;
+}
+.oauth-client-editor .ant-tabs-tab {
+ min-height: 46px;
+ margin-top: 0 !important;
+ justify-content: flex-start;
+}
+.oauth-client-editor .ant-tabs-tabpane {
+ padding-inline-start: 24px !important;
+}
+.oauth-client-editor .oauth-choice-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 12px;
+}
+.oauth-client-editor .oauth-choice-grid .ant-radio-wrapper {
+ min-height: 70px;
+ padding: 13px 14px;
+ border: 1px solid var(--ant-color-border);
+ border-radius: 6px;
+ margin: 0;
+ align-items: flex-start;
+}
+.oauth-client-editor .oauth-choice-grid .ant-radio-wrapper-checked {
+ background: var(--ant-color-primary-bg);
+ border-color: var(--ant-color-primary);
+}
+.oauth-client-editor .oauth-choice-grid strong,
+.oauth-client-editor .oauth-choice-grid small {
+ display: block;
+}
+.oauth-client-editor .oauth-choice-grid small {
+ color: var(--ant-color-text-secondary);
+ font-size: 12px;
+ margin-top: 5px;
+}
+.oauth-client-editor .oauth-option-stack {
+ flex-direction: column;
+ gap: 14px;
+}
+.oauth-client-editor .oauth-access-map {
+ margin-top: 20px;
+}
+.oauth-key-overview {
+ display: grid;
+ grid-template-columns: 1.3fr 1fr 1fr;
+ gap: 0;
+ padding: 18px 0;
+}
+.oauth-key-overview > section {
+ min-width: 0;
+ padding: 0 20px;
+ border-right: 1px solid var(--ant-color-border-secondary);
+}
+.oauth-key-overview > section:first-child {
+ padding-left: 0;
+}
+.oauth-key-overview > section:last-child {
+ border: 0;
+}
+.oauth-key-overview .overview-label {
+ display: block;
+ margin-bottom: 10px;
+ font-size: 12px;
+ color: var(--ant-color-text-secondary);
+}
+.oauth-key-overview strong {
+ display: block;
+ font-size: 15px;
+ overflow-wrap: anywhere;
+}
+.oauth-key-overview p {
+ font-size: 12px;
+ line-height: 1.6;
+ margin: 8px 0 0;
+ color: var(--ant-color-text-secondary);
+}
+.oauth-secret-dialog .ant-input {
+ font-family: ui-monospace, monospace;
+ font-size: 13px;
+}
+.oauth-access-policy .ant-table-wrapper {
+ margin-top: 16px;
+}
+.oauth-resource-editor .form-section + .form-section {
+ margin-top: 6px;
+ padding-top: 22px;
+ border-top: 1px solid var(--ant-color-border-secondary);
+}
+.oauth-resource-editor .ant-modal-body,
+.oauth-scope-editor .ant-modal-body {
+ overflow-x: hidden;
+}
+.oauth-resource-editor .section-heading,
+.oauth-scope-editor .section-heading {
+ margin-bottom: 22px;
+}
+.oauth-resource-editor .section-heading {
+ padding-bottom: 0;
+ border-bottom: 0;
+}
+.oauth-resource-editor .section-heading h3,
+.oauth-scope-editor .section-heading h3 {
+ margin: 0;
+ font-weight: 650;
+}
+.oauth-resource-editor .section-heading p,
+.oauth-scope-editor .section-heading p {
+ margin-top: 7px;
+ line-height: 1.6;
+}
+.resource-form .ant-form-item-control,
+.permission-form .ant-form-item-control {
+ min-width: 0;
+}
+.resource-form .ttl-input {
+ display: flex;
+ align-items: center;
+}
+.resource-form .input-unit {
+ flex: 0 0 auto;
+ margin-left: 8px;
+ color: var(--ant-color-text-secondary);
+}
+.permission-form .choice-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 12px;
+ width: 100%;
+}
+.permission-form .choice-grid .ant-radio-wrapper {
+ margin: 0;
+ padding: 12px 14px;
+ min-height: 68px;
+ border: 1px solid var(--ant-color-border);
+ border-radius: 4px;
+ white-space: normal;
+}
+.permission-form .choice-grid .ant-radio-wrapper-checked {
+ border-color: var(--ant-color-primary);
+}
+.permission-form .choice-grid strong,
+.permission-form .choice-grid small {
+ display: block;
+}
+.permission-form .choice-grid small {
+ margin-top: 4px;
+ color: var(--ant-color-text-secondary);
+ font-size: 12px;
+}
+.permission-form .policy-options {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 18px;
+}
+.option-code {
+ float: right;
+ margin-left: 20px;
+ color: var(--ant-color-text-secondary);
+ font-size: 12px;
+}
+@media (max-width: 768px) {
+ .resource-form .ant-form-item-row,
+ .permission-form .ant-form-item-row {
+ display: block;
+ }
+ .resource-form .ant-form-item-label,
+ .permission-form .ant-form-item-label {
+ text-align: left;
+ padding-bottom: 6px;
+ }
+ .permission-form .choice-grid {
+ grid-template-columns: 1fr;
+ }
+ .oauth-dialog .ant-drawer-body {
+ padding: 16px;
+ }
+ .oauth-dialog .ant-descriptions-item-label {
+ width: 100px;
+ }
+ .oauth-client-editor .ant-tabs-left {
+ flex-direction: column;
+ }
+ .oauth-client-editor .ant-tabs-left > .ant-tabs-nav .ant-tabs-nav-list {
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+ .oauth-client-editor .ant-tabs-left > .ant-tabs-nav .ant-tabs-tab {
+ padding: 8px 12px;
+ }
+ .oauth-client-editor .ant-tabs-left > .ant-tabs-nav .ant-tabs-ink-bar {
+ display: none;
+ }
+ .oauth-client-editor :is(.ant-tabs-content-holder, .ant-tabs-body-holder) {
+ min-height: 0;
+ border: 0;
+ }
+ .oauth-client-editor .ant-tabs-tabpane {
+ padding-inline-start: 0 !important;
+ padding-top: 12px;
+ }
+ .oauth-client-editor .oauth-choice-grid {
+ grid-template-columns: 1fr;
+ }
+ .oauth-key-overview {
+ grid-template-columns: 1fr;
+ gap: 16px;
+ }
+ .oauth-key-overview > section {
+ padding: 0 0 16px;
+ border-right: 0;
+ border-bottom: 1px solid var(--ant-color-border-secondary);
+ }
+}
+
+.oauth-tag-summary {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ align-items: center;
+}
+.oauth-tag-summary > .ant-tag {
+ margin: 0;
+}
+.oauth-tag-summary > span:not(.ant-tag) {
+ color: var(--ant-color-text-secondary, #909399);
+ font-size: 12px;
+}
+.oauth-entity-cell.scope .entity-mark,
+.oauth-entity-cell.key .entity-mark {
+ display: none;
+}
+.oauth-entity-cell .entity-copy > .ant-typography-secondary {
+ font-family: ui-monospace, monospace;
+}
+
+.oauth-editor-map {
+ margin-bottom: 20px;
+ padding: 14px;
+ background: color-mix(in srgb, var(--ant-color-primary) 10%, var(--ant-color-bg-elevated));
+ border: 1px solid color-mix(in srgb, var(--ant-color-primary) 30%, var(--ant-color-bg-elevated));
+ border-radius: 9px;
+}
+.oauth-editor-map > span {
+ display: block;
+ margin-bottom: 10px;
+ font-size: 12px;
+ font-weight: 600;
+}
+.oauth-client-editor .oauth-editor-map .oauth-access-map {
+ margin-top: 0;
+}
+.oauth-option-stack small {
+ display: block;
+ color: var(--ant-color-text-secondary);
+ font-size: 12px;
+ line-height: 1.5;
+}
+.oauth-client-editor .ttl-input {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+.oauth-client-editor .input-unit {
+ color: var(--ant-color-text-secondary);
+}
+.oauth-policy-description {
+ color: var(--ant-color-text-secondary);
+ font-size: 13px;
+ line-height: 1.6;
+ margin: 0 0 20px;
+}
+@media (max-width: 768px) {
+ .oauth-editor-map {
+ display: none;
+ }
+}
+
+.oauth-client-editor .ant-modal-body,
+.oauth-key-editor .ant-modal-body {
+ max-height: none;
+ overflow: visible;
+ padding-top: 0;
+}
+.oauth-client-editor .section-heading {
+ margin: 2px 0 24px;
+}
+.oauth-client-editor .section-heading h3 {
+ font-weight: 650;
+ line-height: normal;
+ margin: 0;
+}
+.oauth-client-editor .section-heading p {
+ margin: 7px 0 0;
+ line-height: 1.6;
+}
+.oauth-client-editor .oauth-choice-grid .ant-radio-wrapper-checked {
+ background: var(--ant-color-bg-container);
+}
+.oauth-client-editor .oauth-choice-grid .ant-radio-wrapper {
+ align-items: center;
+ border-radius: 4px;
+}
+.oauth-client-editor .ant-input-show-count-suffix {
+ font-size: 12px;
+}
+
+.oauth-tag.ant-tag {
+ --oauth-tag-color: var(--ant-color-primary, #409eff);
+ --oauth-tag-base: var(--ant-color-bg-container, #fff);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 24px;
+ margin: 0;
+ padding: 0 9px;
+ border: 1px solid color-mix(in srgb, var(--oauth-tag-color) 20%, var(--oauth-tag-base));
+ border-radius: 4px;
+ background: color-mix(in srgb, var(--oauth-tag-color) 10%, var(--oauth-tag-base));
+ color: var(--oauth-tag-color);
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 22px;
+ white-space: nowrap;
+}
+.oauth-tag.oauth-tag--success {
+ --oauth-tag-color: #67c23a;
+}
+.oauth-tag.oauth-tag--danger {
+ --oauth-tag-color: #f56c6c;
+}
+.oauth-tag.oauth-tag--warning {
+ --oauth-tag-color: #e6a23c;
+}
+.oauth-tag.oauth-tag--info {
+ --oauth-tag-color: #909399;
+}
+.oauth-tag.oauth-tag--plain {
+ border-color: color-mix(in srgb, var(--oauth-tag-color) 50%, var(--oauth-tag-base));
+ background: var(--oauth-tag-base);
+}
+.oauth-tag.oauth-tag--small {
+ height: 20px;
+ padding-inline: 5px;
+ line-height: 18px;
+}
+.oauth-policy-cell {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 5px;
+ color: var(--ant-color-text, #606266);
+ font-size: 12px;
+}
+.oauth-stacked-cell strong,
+.oauth-stacked-cell small,
+.oauth-stacked-cell code {
+ display: block;
+ line-height: 23px;
+}
+.oauth-stacked-cell strong {
+ color: var(--ant-color-text-heading, #303133);
+}
+.oauth-stacked-cell small,
+.oauth-stacked-cell code {
+ margin-top: 3px;
+ color: var(--ant-color-text-secondary, #909399);
+ font-size: 12px;
+}
+:is(.oauth-scope-page, .oauth-session-page, .oauth-grant-page)
+ .oauth-entity-cell
+ .entity-copy
+ > .ant-typography {
+ line-height: 23px;
+}
+:is(.oauth-session-page, .oauth-grant-page)
+ .oauth-entity-cell.person
+ .entity-copy
+ > .ant-typography-secondary {
+ font-family: inherit;
+}
+.oauth-scope-page .oauth-entity-cell .entity-copy {
+ gap: 4px;
+}
+:is(.oauth-scope-page, .oauth-session-page, .oauth-grant-page) .oauth-tag-summary {
+ gap: 5px;
+}
+:is(.oauth-scope-page, .oauth-session-page, .oauth-grant-page) .result-count {
+ color: var(--ant-color-text, #606266);
+}
+:is(.oauth-scope-page, .oauth-session-page, .oauth-grant-page) .result-count strong {
+ font-size: 16px;
+}
+:is(.oauth-scope-page, .oauth-session-page, .oauth-grant-page)
+ .ant-table-wrapper
+ .ant-table-thead
+ > tr
+ > th {
+ background: var(--oauth-table-header, #f5f7fa);
+ color: var(--ant-color-text, #606266);
+}
+html.dark :is(.oauth-scope-page, .oauth-session-page, .oauth-grant-page) {
+ --oauth-table-header: #262727;
+}
+
+.oauth-access-policy-drawer .ant-drawer-header {
+ padding: 20px;
+ margin-bottom: 32px;
+ border: 0;
+}
+.oauth-access-policy-drawer .ant-drawer-title {
+ font-size: 16px;
+ font-weight: 400;
+}
+.oauth-access-policy-drawer .ant-drawer-body {
+ padding: 0 20px 20px;
+}
+.oauth-policy-note.ant-alert {
+ --oauth-note-color: #909399;
+ margin-bottom: 20px;
+ padding: 8px 16px;
+ border: 0;
+ border-radius: 4px;
+ background: color-mix(in srgb, var(--oauth-note-color) 10%, var(--ant-color-bg-container, #fff));
+}
+.oauth-policy-note.ant-alert-warning {
+ --oauth-note-color: #e6a23c;
+}
+.oauth-policy-note .ant-alert-title,
+.oauth-policy-note .ant-alert-icon {
+ color: var(--oauth-note-color);
+}
+.oauth-policy-note .ant-alert-title {
+ font-size: 13px;
+ line-height: 24px;
+}
+.oauth-policy-note .ant-alert-icon {
+ align-self: center;
+ font-size: 14px;
+}
+.oauth-policy-toolbar {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ margin-bottom: 16px;
+ color: var(--ant-color-text);
+ font-size: 16px;
+}
+.oauth-policy-target strong,
+.oauth-policy-target small {
+ display: block;
+ overflow-wrap: anywhere;
+ line-height: 23px;
+}
+.oauth-policy-target strong {
+ color: var(--ant-color-text-heading);
+}
+.oauth-policy-target small {
+ margin-top: 4px;
+ color: var(--ant-color-text-secondary);
+ font-size: 12px;
+}
+.oauth-access-policy-drawer .pagination-jumper .ant-input-number {
+ width: 56px;
+}
+.oauth-access-policy-drawer .ant-table-thead > tr > th {
+ background: var(--oauth-table-header, #f5f7fa);
+ color: var(--ant-color-text);
+}
+html.dark .oauth-access-policy-drawer {
+ --oauth-table-header: #262727;
+}
+.oauth-access-policy-editor .ant-form-item {
+ margin-bottom: 18px;
+}
+.oauth-access-policy-editor .ant-form-item-label > label {
+ font-weight: 600;
+}
+.oauth-access-policy-editor .ant-input-textarea-show-count .ant-input-data-count {
+ position: absolute;
+ right: 10px;
+ bottom: 5px;
+ padding-inline: 2px;
+ background: var(--ant-color-bg-container, #fff);
+ font-size: 12px;
+ line-height: 18px;
+ pointer-events: none;
+}
+.oauth-access-policy-editor .ant-input-textarea-show-count textarea {
+ height: 72px;
+ min-height: 72px;
+ line-height: 21px;
+}
+.ant-modal.oauth-access-policy-editor .ant-modal-footer {
+ margin-top: 32px;
+}
+.oauth-access-policy-editor .ant-btn-primary.ant-btn-dangerous {
+ background: #f56c6c;
+ border-color: #f56c6c;
+}
+.oauth-access-policy-editor .ant-btn-primary.ant-btn-dangerous:hover {
+ background: #f89898;
+ border-color: #f89898;
+}
+
+.oauth-detail-drawer .ant-drawer-header {
+ padding: 20px;
+ margin-bottom: 32px;
+ border: 0;
+}
+.oauth-detail-drawer .ant-drawer-title {
+ font-size: 16px;
+ font-weight: 400;
+}
+.oauth-detail-drawer .ant-drawer-header-title {
+ flex-direction: row-reverse;
+ gap: 10px;
+}
+.oauth-detail-drawer .ant-drawer-close {
+ margin-inline-end: 0;
+}
+.oauth-detail-drawer .ant-drawer-body {
+ padding: 0 20px 20px;
+}
+.oauth-detail-drawer .detail-hero {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 0 0 20px;
+ border-bottom: 1px solid var(--ant-color-border-secondary);
+}
+.oauth-detail-drawer .person-mark {
+ display: grid;
+ place-items: center;
+ flex: 0 0 42px;
+ width: 42px;
+ height: 42px;
+ color: var(--ant-color-primary);
+ background: var(--ant-color-primary-bg);
+ border-radius: 50%;
+}
+.oauth-detail-drawer .detail-hero > div {
+ flex: 1;
+ min-width: 0;
+}
+.oauth-detail-drawer .detail-hero strong {
+ color: var(--ant-color-text-heading);
+ font-size: 17px;
+}
+.oauth-detail-drawer .detail-hero p {
+ margin: 5px 0 0;
+ color: var(--ant-color-text-secondary);
+}
+.oauth-detail-drawer .detail-section {
+ padding: 18px 0;
+ border-bottom: 1px solid var(--ant-color-border-secondary);
+}
+.oauth-detail-drawer .detail-section h4 {
+ margin: 0 0 10px;
+ color: var(--ant-color-text-heading);
+ font-size: 14px;
+ font-weight: 700;
+}
+.oauth-detail-drawer .detail-section p {
+ margin: 0;
+ color: var(--ant-color-text);
+ line-height: 1.6;
+}
+.oauth-detail-drawer .detail-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 5px;
+}
+.oauth-detail-drawer .muted-value {
+ color: var(--ant-color-text-secondary);
+ font-size: 12px;
+}
+.oauth-detail-drawer .detail-descriptions {
+ margin-top: 18px;
+}
+.oauth-detail-drawer
+ .ant-descriptions.ant-descriptions-bordered
+ .ant-descriptions-row
+ > .ant-descriptions-item-label {
+ width: auto;
+ background: #f5f7fa;
+ color: var(--ant-color-text);
+ font-weight: 700;
+ font-size: 14px;
+}
+.oauth-detail-drawer .ant-descriptions.ant-descriptions-bordered .ant-descriptions-row > th,
+.oauth-detail-drawer .ant-descriptions.ant-descriptions-bordered .ant-descriptions-row > td {
+ padding: 8px 11px;
+}
+.oauth-detail-drawer .technical-details.ant-collapse {
+ margin-top: 16px;
+ border-top: 1px solid var(--ant-color-border-secondary);
+ border-bottom: 1px solid var(--ant-color-border-secondary);
+ border-radius: 0;
+}
+.oauth-detail-drawer .technical-details.ant-collapse .ant-collapse-header {
+ padding: 0;
+ min-height: 48px;
+ align-items: center;
+ font-size: 13px;
+ color: var(--ant-color-text-heading);
+}
+.oauth-detail-drawer .technical-details.ant-collapse .ant-collapse-content-box {
+ padding: 0 0 25px;
+}
+.oauth-detail-drawer .technical-details dl {
+ display: grid;
+ grid-template-columns: 100px minmax(0, 1fr);
+ margin: 0;
+}
+.oauth-detail-drawer .technical-details dt,
+.oauth-detail-drawer .technical-details dd {
+ margin: 0;
+ padding: 6px 0;
+ font-size: 13px;
+}
+.oauth-detail-drawer .technical-details dt {
+ color: var(--ant-color-text-secondary);
+}
+.oauth-detail-drawer .technical-details dd {
+ overflow-wrap: anywhere;
+ color: var(--ant-color-text-heading);
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.oauth-impact-dialog .impact-summary {
+ display: flex;
+ gap: 12px;
+ margin-bottom: 20px;
+ padding: 14px 16px;
+ color: #b88230;
+ background: #fdf6ec;
+ border: 1px solid #faecd8;
+ border-radius: 8px;
+}
+.oauth-impact-dialog .impact-summary > .anticon {
+ flex: 0 0 auto;
+ align-self: flex-start;
+ margin-top: 2px;
+ font-size: 18px;
+}
+.oauth-impact-dialog .impact-summary strong {
+ color: var(--ant-color-text-heading);
+}
+.oauth-impact-dialog .impact-summary p {
+ margin: 5px 0 0;
+ color: var(--ant-color-text);
+ font-size: 13px;
+ line-height: 1.6;
+}
+.oauth-impact-dialog .ant-form-item {
+ margin-bottom: 0;
+}
+.oauth-impact-dialog .ant-form-item-label > label {
+ color: var(--ant-color-text-heading);
+ font-weight: 600;
+}
+.oauth-impact-dialog .ant-form-item-required::before {
+ display: none !important;
+}
+.oauth-impact-dialog .ant-input-textarea-show-count .ant-input-data-count {
+ position: absolute;
+ right: 10px;
+ bottom: 5px;
+ font-size: 12px;
+ line-height: 18px;
+ background: var(--ant-color-bg-container);
+}
+.oauth-impact-dialog .ant-input-textarea-show-count textarea {
+ min-height: 72px;
+ height: 72px;
+ line-height: 21px;
+}
+.oauth-impact-dialog .ant-btn-primary.ant-btn-dangerous {
+ background: #f56c6c;
+ border-color: #f56c6c;
+}
+.oauth-impact-dialog .ant-btn-primary.ant-btn-dangerous:disabled {
+ background: #fab6b6;
+ border-color: #fab6b6;
+ color: #fff;
+}
+.oauth-client-editor .oauth-access-node {
+ background: var(--oauth-node-fill, #fafafa);
+ line-height: normal;
+}
+.oauth-client-editor .oauth-choice-grid .ant-radio-wrapper {
+ min-height: 98px;
+}
+.permission-form .choice-grid .ant-radio-wrapper {
+ min-height: 94px;
+ align-items: center;
+}
+:is(.oauth-client-editor .oauth-choice-grid, .permission-form .choice-grid)
+ .ant-radio-wrapper
+ strong {
+ color: var(--ant-color-text-heading);
+}
+.oauth-client-editor .oauth-string-list .oauth-add-row {
+ padding-inline: 15px;
+}
+.oauth-dialog .ant-checkbox-wrapper-checked {
+ color: var(--ant-color-primary);
+}
+:is(.oauth-client-editor, .oauth-resource-editor, .oauth-scope-editor) .section-heading h3 {
+ line-height: normal;
+}
+:is(.oauth-client-editor, .oauth-resource-editor, .oauth-scope-editor) .ant-select-multiple {
+ font-size: 12px;
+}
+:is(.oauth-client-editor, .oauth-resource-editor, .oauth-scope-editor) .ant-select-selection-item {
+ font-size: 12px;
+}
+:is(.oauth-client-editor, .oauth-resource-editor) .ant-input-number-input {
+ text-align: center;
+}
+:is(.oauth-client-editor, .oauth-resource-editor)
+ :is(.ant-input-number-handler-wrap, .ant-input-number-actions) {
+ opacity: 1;
+}
+:is(.oauth-client-editor, .oauth-resource-editor, .oauth-key-editor, .oauth-scope-editor)
+ .ant-input-textarea-show-count
+ .ant-input-data-count {
+ position: absolute;
+ right: 10px;
+ bottom: 5px;
+ font-size: 12px;
+ line-height: 18px;
+ background: var(--ant-color-bg-container);
+}
+:is(.oauth-client-editor, .oauth-resource-editor, .oauth-key-editor, .oauth-scope-editor)
+ .ant-input-textarea-show-count
+ textarea[rows='3'] {
+ height: 72px;
+ min-height: 72px;
+ line-height: 21px;
+ padding: 5px 11px;
+}
+.oauth-workspace .ant-table-wrapper .ant-table-thead > tr > th {
+ background: var(--oauth-table-header, #f5f7fa);
+ color: var(--ant-color-text);
+}
+.oauth-workspace .result-count {
+ color: var(--ant-color-text);
+}
+.oauth-workspace .result-count strong {
+ font-size: 16px;
+}
+.oauth-resource-page .resource-audience {
+ font-size: 12px;
+}
+.oauth-resource-page .entity-mark {
+ color: #67c23a;
+ background: #f0f9eb;
+ border: 1px solid #e1f3d8;
+}
+.oauth-client-page .entity-mark {
+ border: 1px solid var(--ant-color-primary-border);
+}
+.oauth-detail-drawer .detail-hero p {
+ font-size: 16px;
+ line-height: normal;
+}
+.oauth-detail-drawer .detail-section h4 {
+ font-size: 16px;
+ font-weight: 400;
+ line-height: normal;
+}
+.oauth-detail-drawer .ant-drawer-title {
+ line-height: 22px;
+}
+.oauth-impact-dialog .impact-summary {
+ line-height: normal;
+}
+.oauth-impact-dialog .ant-form-item-label {
+ padding-bottom: 8px;
+}
+html.dark .oauth-workspace {
+ --oauth-table-header: #262727;
+}
+html.dark .oauth-client-editor {
+ --oauth-node-fill: #1d1d1d;
+}
+html.dark .oauth-resource-page .entity-mark {
+ background: #1c2518;
+ border-color: #25371c;
+}
+@media (max-width: 768px) {
+ .oauth-client-editor .ant-tabs-nav {
+ min-width: 0;
+ }
+ .oauth-client-editor .ant-tabs-left > .ant-tabs-nav .ant-tabs-nav-list {
+ transform: none !important;
+ }
+ .oauth-client-editor .ant-tabs-left > .ant-tabs-body-holder {
+ width: 100%;
+ }
+ .oauth-client-editor .ant-form-item-row {
+ display: block;
+ }
+ .oauth-client-editor .ant-form-item-label {
+ text-align: left;
+ }
+ .oauth-client-editor .oauth-choice-grid .ant-radio-wrapper {
+ min-height: 70px;
+ }
+}
+html.dark .oauth-impact-dialog .impact-summary {
+ background: #292218;
+ border-color: #5b421b;
+}
+html.dark
+ .oauth-detail-drawer
+ .ant-descriptions.ant-descriptions-bordered
+ .ant-descriptions-item-label {
+ background: #262727;
+}
diff --git a/ruoyi-fastapi-frontend/react/web/src/components/OAuthWorkspace/style.css b/ruoyi-fastapi-frontend/react/web/src/components/OAuthWorkspace/style.css
new file mode 100644
index 000000000..3ea5d18f4
--- /dev/null
+++ b/ruoyi-fastapi-frontend/react/web/src/components/OAuthWorkspace/style.css
@@ -0,0 +1,259 @@
+.oauth-workspace.app-container {
+ min-height: calc(100dvh - 84px);
+ background: transparent;
+ border-radius: 0;
+}
+.workspace-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 20px;
+ padding-bottom: 12px;
+}
+.workspace-heading {
+ display: flex;
+ flex: 1;
+ align-items: center;
+ gap: 12px;
+ min-width: 0;
+}
+.workspace-heading h2 {
+ flex-shrink: 0;
+ margin: 0;
+ color: var(--ant-color-text);
+ font-size: 20px;
+ font-weight: 650;
+ line-height: 30px;
+}
+.workspace-section {
+ flex-shrink: 0;
+ padding-left: 12px;
+ border-left: 1px solid var(--ant-color-border);
+ color: var(--ant-color-primary);
+ font-size: 12px;
+ font-weight: 600;
+}
+.workspace-heading p {
+ flex: 1;
+ min-width: 0;
+ margin: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--ant-color-text-secondary);
+ font-size: 13px;
+ line-height: 1.4;
+}
+.workspace-actions {
+ display: flex;
+ flex-shrink: 0;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 10px;
+}
+.workspace-context,
+.workspace-filters,
+.workspace-data {
+ margin-bottom: 16px;
+ background: var(--ant-color-bg-container);
+ border: 1px solid var(--ant-color-border-secondary);
+ border-radius: 10px;
+ min-width: 0;
+}
+.workspace-context {
+ padding: 18px 20px;
+}
+.workspace-filters {
+ padding: 16px 18px 4px;
+}
+.filter-heading {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ min-height: 24px;
+ margin-bottom: 14px;
+ gap: 12px;
+}
+.filter-title {
+ font-size: 14px;
+ font-weight: 600;
+}
+.filter-hint {
+ margin-left: 10px;
+ color: var(--ant-color-text-secondary);
+ font-size: 12px;
+}
+.workspace-filters .search-form {
+ margin-bottom: 0;
+}
+.workspace-filters .ant-form-item {
+ margin-bottom: 14px;
+}
+.workspace-data {
+ overflow: hidden;
+}
+.data-toolbar {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ min-height: 54px;
+ padding: 0 16px;
+ border-bottom: 1px solid var(--ant-color-border-secondary);
+}
+.workspace-data .ant-table-thead > tr > th {
+ min-height: 46px;
+ background: var(--ant-color-fill-alter);
+ font-weight: 600;
+}
+.workspace-data .ant-table-tbody > tr > td {
+ height: 58px;
+}
+.workspace-data > .pagination {
+ margin: 0;
+ padding: 15px 16px;
+ border-top: 1px solid var(--ant-color-border-secondary);
+}
+.oauth-access-map {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr) 84px minmax(0, 1fr);
+ align-items: stretch;
+}
+.oauth-access-node {
+ min-width: 0;
+ padding: 14px 16px;
+ background: var(--ant-color-fill-quaternary, #fafafa);
+ border: 1px solid var(--ant-color-border-secondary);
+ border-radius: 8px;
+}
+.oauth-node-label {
+ display: block;
+ margin-bottom: 7px;
+ color: var(--ant-color-primary);
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+}
+.oauth-access-node strong,
+.oauth-access-node small {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.oauth-access-node strong {
+ font-size: 14px;
+}
+.oauth-access-node small {
+ margin-top: 5px;
+ color: var(--ant-color-text-secondary);
+ font-size: 12px;
+}
+.oauth-access-link {
+ gap: 4px;
+ font-size: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--ant-color-text-secondary);
+}
+.oauth-field-label {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+}
+.oauth-field-help {
+ display: inline-flex;
+ flex-shrink: 0;
+ color: var(--ant-color-text-secondary);
+ cursor: help;
+ border-radius: 50%;
+}
+.oauth-field-help:hover,
+.oauth-field-help:focus-visible {
+ color: var(--ant-color-primary);
+}
+.oauth-field-help:focus-visible {
+ outline: 2px solid var(--ant-color-primary-border);
+ outline-offset: 2px;
+}
+.oauth-string-list {
+ width: 100%;
+ min-width: 0;
+}
+.oauth-string-row {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) 36px;
+ gap: 6px;
+ margin-bottom: 8px;
+}
+.oauth-string-row .ant-btn {
+ width: 36px;
+ margin: 0;
+}
+.oauth-add-row {
+ margin-left: 0;
+ padding-left: 0;
+}
+@media (max-width: 768px) {
+ .oauth-workspace.app-container {
+ min-height: 100%;
+ }
+ .workspace-header {
+ display: block;
+ }
+ .workspace-heading {
+ flex-wrap: wrap;
+ gap: 4px 10px;
+ }
+ .workspace-heading p {
+ flex-basis: 100%;
+ overflow: visible;
+ white-space: normal;
+ }
+ .workspace-actions {
+ padding-top: 10px;
+ }
+ .workspace-filters {
+ padding: 12px;
+ }
+ .filter-heading {
+ align-items: flex-start;
+ }
+ .filter-hint {
+ display: block;
+ margin: 4px 0 0;
+ }
+ .oauth-access-map {
+ grid-template-columns: minmax(0, 1fr);
+ }
+ .oauth-access-link {
+ gap: 4px;
+ font-size: 12px;
+ min-height: 34px;
+ transform: rotate(90deg);
+ }
+}
+
+.workspace-section {
+ display: inline-flex;
+ align-items: center;
+ height: 18px;
+}
+.workspace-heading h2,
+.filter-title {
+ color: var(--ant-color-text-heading, #303133);
+}
+.workspace-context,
+.workspace-filters,
+.workspace-data {
+ background: var(--ant-color-bg-elevated, #fff);
+}
+.result-count {
+ color: var(--ant-color-text-secondary, #909399);
+ font-size: 13px;
+}
+.result-count strong {
+ color: var(--ant-color-text-heading, #303133);
+}
diff --git a/ruoyi-fastapi-frontend/react/web/src/components/Pagination/index.jsx b/ruoyi-fastapi-frontend/react/web/src/components/Pagination/index.jsx
new file mode 100644
index 000000000..c32dabd7e
--- /dev/null
+++ b/ruoyi-fastapi-frontend/react/web/src/components/Pagination/index.jsx
@@ -0,0 +1,57 @@
+import '@/assets/styles/components.css'
+import { useEffect, useState } from 'react'
+import { InputNumber, Pagination as AntPagination, Select } from 'antd'
+export default function Pagination({
+ total,
+ page = 1,
+ limit = 20,
+ onChange,
+ pageSizes = [10, 20, 30, 50],
+}) {
+ const [jump, setJump] = useState(page)
+ useEffect(() => setJump(page), [page])
+ const lastPage = Math.max(1, Math.ceil(total / limit))
+ const changePage = (pageNum, pageSize = limit) => onChange({ pageNum, pageSize })
+ const commitJump = () => {
+ const next = Math.max(1, Math.min(lastPage, Math.floor(Number(jump) || 1)))
+ setJump(next)
+ if (next !== page) changePage(next)
+ }
+ return (
+ total > 0 && (
+
+
共 {total} 条
+
+
+ {title}
+
+
+ {frame && (
+