@jiangood/open-admin 3.1.6 → 3.1.8

package/src/pages/public/login.less

@@ -1,4 +1,6 @@
 .login-page {
+  /* 背景图加载前的兜底底色，保证白色文字始终可读 */
+  background-color: #16233f;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: bottom;
@@ -6,47 +8,266 @@
   width: 100vw;
   height: 100vh;
 
-
   .login-content {
-    padding: 40px;
-    background: #15184b44;
-    width: 350px;
+    /* 面板内复用的局部变量，统一玻璃质感与文字层级 */
+    --login-text: rgba(255, 255, 255, 0.94);
+    --login-text-dim: rgba(255, 255, 255, 0.6);
+    --login-hairline: rgba(255, 255, 255, 0.16);
+    --login-field-bg: rgba(255, 255, 255, 0.08);
+    --login-radius: calc(var(--oa-border-radius, 6px) + 10px);
+    --login-field-radius: calc(var(--oa-border-radius, 6px) + 2px);
+
+    box-sizing: border-box;
+    width: 384px;
+    max-width: calc(100vw - 48px);
+    max-height: calc(100vh - 48px);
+    overflow: auto;
     position: fixed;
     right: 15%;
-    top: 20%;
+    /* 垂直居中，矮屏下不再溢出 */
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 40px 36px 30px;
+
+    /* 深色磨砂玻璃：主题深色底（保证层次）+ 顶部主色微光 + backdrop-filter 虚化 */
+    background-color: color-mix(in srgb, var(--oa-sider-bg, #0b1220) 55%, transparent);
+    background-image: linear-gradient(
+            180deg,
+            color-mix(in srgb, var(--primary-color, #1677ff) 16%, transparent) 0%,
+            transparent 140px
+    );
+    backdrop-filter: blur(20px) saturate(140%);
+    -webkit-backdrop-filter: blur(20px) saturate(140%);
+    /* 细描边沿用主题主色；顶边内高光模拟玻璃反光 */
+    border: 1px solid color-mix(in srgb, var(--primary-color, #1677ff) 26%, var(--login-hairline));
+    border-radius: var(--login-radius);
+    box-shadow: 0 24px 64px -20px rgba(0, 0, 0, 0.6),
+    0 4px 16px rgba(0, 0, 0, 0.25),
+    inset 0 1px 0 rgba(255, 255, 255, 0.14);
 
-    .ant-form-item-label > label{
-      color: white;
+    animation: login-panel-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
+
+    .ant-form-item-label > label {
+      color: var(--login-text);
+      /* 玻璃更透明后，浅色文字加轻微阴影保证可读性 */
+      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
     }
   }
 }
 
-@media screen and (max-width: 768px) {
-  .login-page {
-    padding-top: 30%;
+/* 面板入场：轻微上浮淡入 */
+@keyframes login-panel-in {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-50% + 16px));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%);
+  }
+}
 
-    .login-content {
-      width: calc(100% - 100px);
-      padding: 24px;
-      position: static;
-      margin: 0 auto;
+/* 不支持 backdrop-filter 的浏览器：提高底色不透明度，保证白字对比度 */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .login-page .login-content {
+    background-color: color-mix(in srgb, var(--oa-sider-bg, #0b1220) 92%, transparent);
+  }
+}
+
+/* 品牌区：logo + 站点标题，与后台侧栏保持同一品牌识别 */
+.login-brand {
+  margin-bottom: 26px;
+  text-align: center;
+
+  .login-brand-logo {
+    display: grid;
+    place-items: center;
+    width: 56px;
+    height: 56px;
+    margin: 0 auto 14px;
+    border-radius: var(--login-radius);
+    background: color-mix(in srgb, var(--primary-color, #1677ff) 16%, rgba(255, 255, 255, 0.06));
+    border: 1px solid var(--login-hairline);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
+
+    img {
+      width: 38px;
+      height: 38px;
+      object-fit: contain;
+    }
+
+    /* logo 加载失败时回退到此矢量标记 */
+    .anticon {
+      color: var(--login-text);
+      font-size: 26px;
     }
   }
 }
 
+.login-page.login-page h1 {
+  margin: 0;
+  text-align: center;
+  color: var(--login-text);
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  line-height: 1.4;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
+}
 
+/* 表单：占满面板，输入框改为玻璃质感并跟随主题主色聚焦 */
 .login-form {
-  max-width: 300px;
-  margin: 0 auto;
-}
+  width: 100%;
+  margin: 0;
 
+  .ant-form-item {
+    margin-bottom: 18px;
+  }
 
+  .ant-input-affix-wrapper {
+    height: 46px;
+    padding: 0 14px;
+    border-radius: var(--login-field-radius);
+    background-color: var(--login-field-bg);
+    border: 1px solid var(--login-hairline);
+    box-shadow: none;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
 
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.12);
+      border-color: rgba(255, 255, 255, 0.28);
+    }
 
-.login-page.login-page h1 {
-  margin-bottom: 50px;
+    &:focus-within,
+    &.ant-input-affix-wrapper-focused {
+      background-color: rgba(255, 255, 255, 0.14);
+      border-color: var(--primary-color, #1677ff);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #1677ff) 28%, transparent);
+    }
+
+    .ant-input-prefix {
+      margin-inline-end: 10px;
+      color: rgba(255, 255, 255, 0.55);
+      font-size: 16px;
+    }
+
+    /* 密码可见性切换按钮 */
+    .ant-input-suffix {
+      color: rgba(255, 255, 255, 0.55);
+    }
+  }
+
+  .ant-input {
+    color: var(--login-text);
+    font-size: 15px;
+    background: transparent;
+
+    &::placeholder {
+      color: var(--login-text-dim);
+    }
+
+    /* 浏览器自动填充时保持玻璃底与浅色文字 */
+    &:-webkit-autofill {
+      -webkit-text-fill-color: var(--login-text);
+      caret-color: var(--login-text);
+      transition: background-color 9999s ease-out;
+    }
+  }
+
+  .ant-form-item-explain-error {
+    margin-top: 4px;
+    color: color-mix(in srgb, var(--oa-color-error, #ff4d4f) 55%, #fff);
+    font-size: 13px;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  }
+
+  /* 提交按钮：主色渐变 + 悬浮辉光，作为面板唯一强视觉锚点 */
+  .login-submit {
+    margin-bottom: 0;
+
+    .ant-btn-primary {
+      height: 46px;
+      border: none;
+      border-radius: var(--login-field-radius);
+      font-size: 16px;
+      font-weight: 600;
+      letter-spacing: 0.3em;
+      text-indent: 0.3em;
+      background: linear-gradient(
+              135deg,
+              var(--primary-color, #1677ff),
+              var(--primary-color-hover, #4096ff)
+      );
+      box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--primary-color, #1677ff) 85%, transparent);
+      transition: filter 0.2s, box-shadow 0.2s, transform 0.16s;
+
+      &:hover:not(:disabled) {
+        filter: brightness(1.07);
+        box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--primary-color, #1677ff) 95%, transparent);
+      }
+
+      &:active:not(:disabled) {
+        transform: translateY(1px);
+        filter: brightness(0.98);
+      }
+    }
+  }
+}
+
+/* 校验失败态：描边与文案提亮到深色玻璃上仍可读。
+   多加 .login-page 提升特异性，盖过 antd 聚焦态注入的白底 */
+.login-page .login-form .ant-form-item-has-error {
+  .ant-input-affix-wrapper,
+  .ant-input-affix-wrapper:hover,
+  .ant-input-affix-wrapper:focus,
+  .ant-input-affix-wrapper:focus-within {
+    background-color: color-mix(in srgb, var(--oa-color-error, #ff4d4f) 12%, transparent);
+    border-color: color-mix(in srgb, var(--oa-color-error, #ff4d4f) 70%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--oa-color-error, #ff4d4f) 24%, transparent);
+  }
+
+  .ant-input {
+    background-color: transparent;
+  }
+}
+
+/* 登录框底部提示：与表单之间用分隔线区隔，保持次要文字层级 */
+.login-bottom-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 22px;
+  padding-top: 18px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--login-text-dim);
+  font-size: 13px;
+  line-height: 1.5;
   text-align: center;
-  color: white;
-  font-size: x-large;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
+
+  .anticon {
+    flex: none;
+  }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .login-page .login-content {
+    animation: none;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .login-page {
+    padding-top: 20%;
+
+    .login-content {
+      width: calc(100% - 64px);
+      padding: 28px 22px;
+      position: static;
+      margin: 0 auto;
+      transform: none;
+      animation: none;
+    }
+  }
+}

package/src/pages/standalone/forceUpdatePwd.jsx

@@ -1,12 +1,12 @@
 import React from "react";
-import {Button, Form, Input, message} from "antd";
-import {HttpClient, history} from "../../framework";
+import {Button, Form, Input} from "antd";
+import {getMessageApi, getToken, HttpClient, history} from "../../framework";
 
 export default class ForceUpdatePwdPage extends React.Component {
 
     onFinish = (values) => {
         HttpClient.post('admin/userCenter/update-pwd', values, null).then(() => {
-            message.success('修改密码成功，请重新登录');
+            getMessageApi().success('修改密码成功，请重新登录');
             history.push('/public/login');
         })
     }
@@ -17,24 +17,25 @@ export default class ForceUpdatePwdPage extends React.Component {
         })
 
     render() {
+        const token = getToken();
         return (
             <div style={{
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
                 minHeight: '100vh',
-                background: '#f0f2f5'
+                background: String(token.colorBgLayout)
             }}>
                 <div style={{
-                    background: '#fff',
+                    background: String(token.colorBgContainer),
                     padding: '40px',
                     borderRadius: '8px',
-                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                    boxShadow: String(token.boxShadowSecondary ?? '0 2px 8px rgba(0,0,0,0.1)'),
                     maxWidth: 400,
                     width: '100%'
                 }}>
                     <h2 style={{textAlign: 'center', marginBottom: 24}}>修改密码</h2>
-                    <p style={{textAlign: 'center', color: '#999', marginBottom: 24}}>
+                    <p style={{textAlign: 'center', color: String(token.colorTextTertiary), marginBottom: 24}}>
                         首次登录或密码已被重置，请修改密码后重新登录
                     </p>
                     <Form onFinish={this.onFinish}>

package/src/pages/system/article/index.jsx

@@ -1,5 +1,5 @@
-import {PlusOutlined} from '@ant-design/icons'
-import {Button, Form, Input, InputNumber} from 'antd'
+import {PlusOutlined, SearchOutlined} from '@ant-design/icons'
+import {Form, Input, InputNumber} from 'antd'
 import React from 'react'
 import {
     DictUtils,
@@ -106,26 +106,24 @@ export default class ArticleListPage extends React.Component {
     ]
 
     render() {
-        return <Page
-            title="文章管理"
-            description="管理系统文章，如关于、帮助等页面"
-        >
+        return <Page>
             <ProTable
                 actionRef={this.tableRef}
-                toolBarRender={() => ( // NOSONAR: AntD 渲染函数惯例
-                    <PermActions>
-                        <Button perm='article:create' type='primary' icon={<PlusOutlined/>} onClick={this.handleAdd}>新增</Button>
-                    </PermActions>
+                searchInline
+                toolBarRightRender={() => (
+                    <PermActions actions={[
+                        {label: '新增', type: 'primary', icon: <PlusOutlined/>, perm: 'article:create', onClick: this.handleAdd},
+                    ]}/>
                 )}
                 request={(params) => HttpClient.get('admin/article/page', params)}
                 columns={this.columns}
-                searchFormRender={() => ( // NOSONAR: AntD 渲染函数惯例
+                searchFormRender={() => (
                     <>
-                        <Form.Item label='编码' name='code'>
-                            <Input/>
+                        <Form.Item name='code' noStyle>
+                            <Input prefix={<SearchOutlined/>} placeholder='文章编码' allowClear/>
                         </Form.Item>
-                        <Form.Item label='标题' name='title'>
-                            <Input/>
+                        <Form.Item name='title' noStyle>
+                            <Input placeholder='文章标题' allowClear/>
                         </Form.Item>
                     </>
                 )}

package/src/pages/system/codegen/index.jsx

@@ -1,6 +1,6 @@
-import {Button, Collapse, Drawer, Form, Input, message, Modal, Select, Space, Switch, Tag, Typography} from 'antd'
+import {Button, Card, Collapse, Drawer, Form, Input, Modal, Select, Space, Switch, Tag, Typography} from 'antd'
 import React from 'react'
-import {HttpClient, Page, Perm} from '../../../framework'
+import {HttpClient, getMessageApi, getToken, Page, Perm} from '../../../framework'
 
 /**
  * 代码生成：动态扫描实体，按实体生成常见 CRUD 代码并写入项目源码目录。
@@ -52,7 +52,7 @@ export default class CodegenPage extends React.Component {
 
     handlePreview = () => {
         if (!this.state.className) {
-            message.warning('请先选择实体')
+            getMessageApi().warning('请先选择实体')
             return
         }
         this.setState({loading: true})
@@ -60,13 +60,13 @@ export default class CodegenPage extends React.Component {
             this.setState({files: rs.data || [], previewOpen: true})
         }).catch(e => {
             console.error('[Codegen] 预览失败:', e)
-            message.error(e?.message || '预览失败')
+            getMessageApi().error(e?.message || '预览失败')
         }).finally(() => this.setState({loading: false}))
     }
 
     handleGenerate = () => {
         if (!this.state.className) {
-            message.warning('请先选择实体')
+            getMessageApi().warning('请先选择实体')
             return
         }
         this.setState({confirmOpen: true})
@@ -78,17 +78,17 @@ export default class CodegenPage extends React.Component {
             this.setState({result: rs.data, resultOpen: true, previewOpen: false})
         }).catch(e => {
             console.error('[Codegen] 生成失败:', e)
-            message.error(e?.message || '生成失败')
+            getMessageApi().error(e?.message || '生成失败')
         }).finally(() => this.setState({loading: false}))
     }
 
     copy = (text) => {
         if (navigator.clipboard) {
             navigator.clipboard.writeText(text)
-                .then(() => message.success('已复制'))
-                .catch(() => message.error('复制失败'))
+                .then(() => getMessageApi().success('已复制'))
+                .catch(() => getMessageApi().error('复制失败'))
         } else {
-            message.warning('当前浏览器不支持剪贴板')
+            getMessageApi().warning('当前浏览器不支持剪贴板')
         }
     }
 
@@ -96,47 +96,50 @@ export default class CodegenPage extends React.Component {
 
     render() {
         const selected = this.selectedOption()
-        return <Page title='代码生成' description='扫描实体，生成 Repository / Service / Controller / 前端页面 / 菜单 代码并写入项目源码目录'>
-            <Form layout='vertical' style={{maxWidth: 720}}>
-                <Form.Item label='实体' required>
-                    <Select
-                        showSearch
-                        optionFilterProp='label'
-                        placeholder='请选择实体'
-                        options={this.state.entities}
-                        value={this.state.className}
-                        onChange={this.handleEntityChange}
-                    />
-                </Form.Item>
-                {selected?.data?.frameworkEntity &&
-                    <Typography.Text type='warning'>
-                        该实体属于框架内置包（{selected.data.packageName}），生成的文件会写入同一包路径，请确认输出位置后再生成。
-                    </Typography.Text>
-                }
-                <Form.Item label='模块名（请求前缀 / 前端目录）'>
-                    <Input placeholder='如 customer'
-                           value={this.state.module}
-                           onChange={e => this.setState({module: e.target.value})}/>
-                </Form.Item>
-                <Form.Item label='中文名'>
-                    <Input value={this.state.label}
-                           onChange={e => this.setState({label: e.target.value})}/>
-                </Form.Item>
-                <Form.Item label='父菜单 id' tooltip='默认挂在系统管理（sys）下'>
-                    <Input value={this.state.parentMenu}
-                           onChange={e => this.setState({parentMenu: e.target.value})}/>
-                </Form.Item>
-                <Form.Item label='覆盖已存在文件'>
-                    <Switch checked={this.state.overwrite}
-                            onChange={checked => this.setState({overwrite: checked})}/>
-                </Form.Item>
-                <Space>
-                    <Perm code='sys-codegen:generate'>
-                        <Button type='primary' loading={this.state.loading} onClick={this.handlePreview}>预览</Button>
-                    </Perm>
-                    <Button onClick={this.loadEntities}>刷新实体</Button>
-                </Space>
-            </Form>
+        return <Page actions={
+                         <Space>
+                             <Perm code='sys-codegen:generate'>
+                                 <Button type='primary' loading={this.state.loading} onClick={this.handlePreview}>预览</Button>
+                             </Perm>
+                             <Button onClick={this.loadEntities}>刷新实体</Button>
+                         </Space>
+                     }>
+            <Card size='small'>
+                <Form layout='vertical' style={{maxWidth: 720}}>
+                    <Form.Item label='实体' required>
+                        <Select
+                            showSearch
+                            optionFilterProp='label'
+                            placeholder='请选择实体'
+                            options={this.state.entities}
+                            value={this.state.className}
+                            onChange={this.handleEntityChange}
+                        />
+                    </Form.Item>
+                    {selected?.data?.frameworkEntity &&
+                        <Typography.Text type='warning'>
+                            该实体属于框架内置包（{selected.data.packageName}），生成的文件会写入同一包路径，请确认输出位置后再生成。
+                        </Typography.Text>
+                    }
+                    <Form.Item label='模块名（请求前缀 / 前端目录）'>
+                        <Input placeholder='如 customer'
+                               value={this.state.module}
+                               onChange={e => this.setState({module: e.target.value})}/>
+                    </Form.Item>
+                    <Form.Item label='中文名'>
+                        <Input value={this.state.label}
+                               onChange={e => this.setState({label: e.target.value})}/>
+                    </Form.Item>
+                    <Form.Item label='父菜单 id' tooltip='默认挂在系统管理（sys）下'>
+                        <Input value={this.state.parentMenu}
+                               onChange={e => this.setState({parentMenu: e.target.value})}/>
+                    </Form.Item>
+                    <Form.Item label='覆盖已存在文件'>
+                        <Switch checked={this.state.overwrite}
+                                onChange={checked => this.setState({overwrite: checked})}/>
+                    </Form.Item>
+                </Form>
+            </Card>
 
             <Drawer title='生成预览' width={960}
                     open={this.state.previewOpen}
@@ -164,7 +167,7 @@ export default class CodegenPage extends React.Component {
                                 <pre style={{
                                     maxHeight: 420,
                                     overflow: 'auto',
-                                    background: '#f6f8fa',
+                                    background: String(getToken().colorFillTertiary ?? '#f6f8fa'),
                                     padding: 12,
                                     borderRadius: 4,
                                 }}>{file.content}</pre>

package/src/pages/system/dict/index.jsx

@@ -164,7 +164,7 @@ export default class DictPage extends React.Component {
         const {selectedType, selectedTypeCode} = this.state
         const hasTypeSelected = selectedType != null && selectedTypeCode != null
 
-        return <Page title="数据字典" description="管理数据字典类型和字典项">
+        return <Page>
             <Splitter>
                 <Splitter.Panel defaultSize={300} style={{paddingRight: 8}}>
                     <Card loading={this.state.treeLoading}
@@ -269,7 +269,7 @@ export default class DictPage extends React.Component {
                         allowClear
                         maxLength={20}
                         options={COLOR_OPTIONS}
-                        filterOption={(input, option) => // NOSONAR: AntD AutoComplete 过滤回调惯例
+                        filterOption={(input, option) =>
                             (option.value + option.label).toLowerCase().includes(input.toLowerCase())
                         }
                         placeholder='如 SUCCESS、#ff0000'

package/src/pages/system/file/index.jsx

@@ -32,7 +32,7 @@ export default class FilePage extends React.Component {
             title: '缩略图',
             dataIndex: 'objectName',
             width: 80,
-            render: (objectName, record) => { // NOSONAR: 返回元素或占位文本，类型不同属预期
+            render: (objectName, record) => {
                 if (record.type !== 'image') {
                     return '-'
                 }
@@ -151,7 +151,7 @@ export default class FilePage extends React.Component {
             <ProTable
                 actionRef={this.tableRef}
                 rowSelection={{}}
-                toolBarRender={(params, selection) => ( // NOSONAR: AntD 渲染函数惯例
+                toolBarRightRender={(params, selection) => (
                     <Space>
                         <Button type='primary' icon={<CloudUploadOutlined/>} onClick={() => this.setState({formOpen: true})}>上传文件</Button>
                         <PermActions
@@ -171,7 +171,7 @@ export default class FilePage extends React.Component {
                 }}
 
                 columns={this.columns}
-                searchFormRender={() => ( // NOSONAR: AntD 渲染函数惯例
+                searchFormRender={() => (
                     <>
                         <Form.Item label='文件名' name='originName'>
                             <Input/>