@jiangood/open-admin 3.1.9 → 3.1.11

package/src/layouts/admin/AdminTabs.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import {CloseOutlined} from '@ant-design/icons';
+import {CloseOutlined, DownOutlined} from '@ant-design/icons';
+import {Dropdown} from 'antd';
 import {ContextMenu} from '../../framework';
 import './AdminTabs.less';
 
@@ -7,34 +8,84 @@ export class AdminTabs extends React.Component {
     state = {
         contextMenu: null,
         contextMenuTabKey: null,
+        overflowing: false,
     };
 
     barRef = React.createRef();
     activeTabRef = React.createRef();
+    resizeObserver = null;
 
     componentDidMount() {
         this.scrollActiveIntoView();
+        this.updateOverflow();
+        this.observeOverflow();
+        this.barRef.current?.addEventListener('wheel', this.handleWheel, {passive: false});
     }
 
     componentDidUpdate(prevProps) {
         if (prevProps.activeKey !== this.props.activeKey) {
             this.scrollActiveIntoView();
         }
+        this.updateOverflow();
     }
 
+    componentWillUnmount() {
+        this.resizeObserver?.disconnect();
+        this.barRef.current?.removeEventListener('wheel', this.handleWheel);
+    }
+
+    observeOverflow = () => {
+        if (typeof ResizeObserver === 'undefined' || !this.barRef.current) return;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateOverflow();
+            // 窗口变窄后激活标签可能被挤出可视区，跟随重新定位
+            this.scrollActiveIntoView();
+        });
+        this.resizeObserver.observe(this.barRef.current);
+    };
+
+    /** 标签总宽是否超过条带可用宽度（不含溢出时给按钮预留的 padding） */
+    isOverflowing = () => {
+        const bar = this.barRef.current;
+        if (!bar) return false;
+        const tabsWidth = [...bar.querySelectorAll('.admin-tab')]
+            .reduce((sum, tab) => sum + tab.getBoundingClientRect().width, 0);
+        // 基础左右 padding 各 8px；溢出时额外加的 40px 不参与判断，避免无法恢复
+        return tabsWidth > bar.clientWidth - 16 + 1;
+    };
+
+    /** 标签超出可视宽度时显示右侧「全部标签」入口 */
+    updateOverflow = () => {
+        const overflowing = this.isOverflowing();
+        if (overflowing !== this.state.overflowing) {
+            this.setState({overflowing});
+        }
+    };
+
+    /** 竖向滚轮在标签栏上转为横向滚动，避免标签被隐藏时无操作入口 */
+    handleWheel = e => {
+        const bar = this.barRef.current;
+        if (!bar || !this.isOverflowing()) return;
+        if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
+        bar.scrollLeft += e.deltaY;
+        e.preventDefault();
+    };
+
     /** 激活的标签被滚动到可视区外时（标签过多），横向带入视野 */
     scrollActiveIntoView = () => {
         const bar = this.barRef.current;
         const tab = this.activeTabRef.current;
         if (!bar || !tab) return;
         const margin = 8;
+        // 溢出时右侧有「全部标签」按钮，避免激活标签滚到按钮下面
+        const rightMargin = this.isOverflowing() ? 44 : margin;
         const barRect = bar.getBoundingClientRect();
         const tabRect = tab.getBoundingClientRect();
         let delta = 0;
         if (tabRect.left < barRect.left + margin) {
             delta = tabRect.left - barRect.left - margin;
-        } else if (tabRect.right > barRect.right - margin) {
-            delta = tabRect.right - barRect.right + margin;
+        } else if (tabRect.right > barRect.right - rightMargin) {
+            delta = tabRect.right - barRect.right + rightMargin;
         }
         if (delta !== 0) {
             bar.scrollTo({left: bar.scrollLeft + delta, behavior: 'smooth'});
@@ -66,41 +117,64 @@ export class AdminTabs extends React.Component {
 
     render() {
         const {tabs, activeKey, onChange, onClose} = this.props;
-        const {contextMenu} = this.state;
+        const {contextMenu, overflowing} = this.state;
 
         return (
             <>
-                <div className="admin-tabs-bar" ref={this.barRef}>
-                    {tabs.map(tab => (
-                        <div
-                            key={tab.key}
-                            ref={tab.key === activeKey ? this.activeTabRef : null}
-                            className={`admin-tab${tab.key === activeKey ? ' active' : ''}`}
-                            role="tab"
-                            title={tab.label}
-                            tabIndex={tab.key === activeKey ? 0 : -1}
-                            aria-selected={tab.key === activeKey}
-                            onClick={() => onChange(tab.key)}
-                            onKeyDown={e => {
-                                if (e.key === 'Enter' || e.key === ' ') {
-                                    e.preventDefault();
-                                    onChange(tab.key);
-                                }
-                            }}
-                            onContextMenu={e => this.handleContextMenu(e, tab.key)}
-                        >
-                            <span className="admin-tab-label">{tab.label}</span>
-                            {tabs.length > 1 && (
-                                <CloseOutlined
-                                    className="admin-tab-close"
-                                    onClick={e => {
-                                        e.stopPropagation();
-                                        onClose(tab.key);
-                                    }}
-                                />
-                            )}
-                        </div>
-                    ))}
+                <div className={`admin-tabs-wrap${overflowing ? ' overflowing' : ''}`}>
+                    <div className="admin-tabs-bar" ref={this.barRef}>
+                        {tabs.map(tab => (
+                            <div
+                                key={tab.key}
+                                ref={tab.key === activeKey ? this.activeTabRef : null}
+                                className={`admin-tab${tab.key === activeKey ? ' active' : ''}`}
+                                role="tab"
+                                title={tab.label}
+                                tabIndex={tab.key === activeKey ? 0 : -1}
+                                aria-selected={tab.key === activeKey}
+                                onClick={() => onChange(tab.key)}
+                                onKeyDown={e => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.preventDefault();
+                                        onChange(tab.key);
+                                    }
+                                }}
+                                onContextMenu={e => this.handleContextMenu(e, tab.key)}
+                            >
+                                <span className="admin-tab-label">{tab.label}</span>
+                                {tabs.length > 1 && (
+                                    <CloseOutlined
+                                        className="admin-tab-close"
+                                        onClick={e => {
+                                            e.stopPropagation();
+                                            onClose(tab.key);
+                                        }}
+                                    />
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                    {overflowing && (
+                        <>
+                            <div className="admin-tabs-fade"/>
+                            <Dropdown
+                                trigger={['click']}
+                                placement="bottomRight"
+                                menu={{
+                                    items: tabs.map(tab => ({key: tab.key, label: tab.label})),
+                                    selectable: true,
+                                    selectedKeys: [activeKey],
+                                    onClick: ({key}) => onChange(key),
+                                    style: {maxHeight: 320, overflowY: 'auto'},
+                                }}
+                            >
+                                <button type="button" className="admin-tabs-more" title="全部标签"
+                                        aria-label="全部标签">
+                                    <DownOutlined/>
+                                </button>
+                            </Dropdown>
+                        </>
+                    )}
                 </div>
                 {contextMenu && (
                     <ContextMenu

package/src/layouts/admin/AdminTabs.less

@@ -1,15 +1,24 @@
+.admin-tabs-wrap {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    min-width: 0;
+}
+
 .admin-tabs-bar {
     display: flex;
     flex-wrap: nowrap;
-    align-items: flex-end;
-    gap: 2px;
+    align-items: stretch;
     overflow-x: auto;
     overflow-y: hidden;
-    flex-shrink: 0;
-    padding: 4px 8px 0;
-    border-bottom: 1px solid var(--oa-color-border, #e8e8e8);
-    /* 条带用页面底色，与白色顶栏拉开层次；选中标签再用容器色浮起 */
-    background: var(--oa-color-bg-layout, #f5f5f5);
+    scrollbar-width: none;
+    flex: 1 1 auto;
+    min-width: 0;
+    height: var(--oa-control-height, 32px);
+    padding: 0 8px;
+    /* 条带与顶栏同色，和灰色页面拉开层次；底线用 inset 阴影绘制，选中标签可盖住 */
+    box-shadow: inset 0 -1px 0 var(--oa-color-border, #e8e8e8);
+    background: var(--oa-color-bg-container, #fff);
 
     &::-webkit-scrollbar {
         height: 0;
@@ -19,23 +28,26 @@
         display: inline-flex;
         align-items: center;
         gap: 6px;
-        padding: 0 8px 0 12px;
-        height: var(--oa-control-height, 32px);
-        line-height: var(--oa-control-height, 32px);
+        padding: 0 8px 0 10px;
         font-size: 13px;
+        line-height: 1.4;
         cursor: pointer;
         white-space: nowrap;
         color: var(--oa-color-text-secondary, rgba(0, 0, 0, 0.65));
         background: transparent;
-        border-right: none;
-        border-radius: var(--oa-border-radius, 6px) var(--oa-border-radius, 6px) 0 0;
-        transition: color 0.2s, background 0.2s;
-        position: relative;
+        /* 方形标签，标签之间仅用 1px 竖线分隔，贴近系统 / IDEA 原生观感 */
+        border-radius: 0;
+        transition: color 0.15s, background 0.15s;
         flex-shrink: 0;
 
+        /* 分隔线画在相邻标签之间，条带首尾不留多余竖线 */
+        & + .admin-tab {
+            border-left: 1px solid var(--oa-color-border, #e8e8e8);
+        }
+
         &:hover {
             color: var(--oa-color-text, rgba(0, 0, 0, 0.88));
-            background: color-mix(in srgb, var(--oa-color-text, rgba(0, 0, 0, 0.88)) 6%, transparent);
+            background: var(--oa-color-fill, rgba(0, 0, 0, 0.06));
         }
 
         &:focus-visible {
@@ -44,11 +56,9 @@
         }
 
         &.active {
+            /* IDEA 式：选中标签用页面底色盖住条带底线，文字用主色点明选中项 */
             color: var(--primary-color, #1677ff);
-            background: var(--oa-color-bg-container, #fff);
-            font-weight: 500;
-            /* 顶部主色指示条；inset 保证不撑高标签 */
-            box-shadow: inset 0 2px 0 var(--primary-color, #1677ff);
+            background: var(--oa-color-bg-layout, #f5f5f5);
         }
 
         .admin-tab-label {
@@ -82,3 +92,51 @@
         }
     }
 }
+
+/* 标签溢出：右侧渐隐 + 全部标签入口，改由按钮触发下拉 */
+.admin-tabs-wrap.overflowing {
+    .admin-tabs-bar {
+        /* 给右侧按钮让位，滚到最右时最后一个标签不会被遮住 */
+        padding-right: 40px;
+    }
+
+    .admin-tabs-fade {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 1px;
+        width: 44px;
+        pointer-events: none;
+        background: linear-gradient(to right, transparent, var(--oa-color-bg-container, #fff) 68%);
+    }
+
+    .admin-tabs-more {
+        position: absolute;
+        top: 50%;
+        right: 6px;
+        transform: translateY(-50%);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        padding: 0;
+        border: none;
+        border-radius: var(--oa-border-radius, 6px);
+        background: var(--oa-color-bg-container, #fff);
+        color: var(--oa-color-text-secondary, rgba(0, 0, 0, 0.65));
+        font-size: 12px;
+        cursor: pointer;
+        transition: background 0.15s, color 0.15s;
+
+        &:hover {
+            background: var(--oa-color-fill, rgba(0, 0, 0, 0.06));
+            color: var(--oa-color-text, rgba(0, 0, 0, 0.88));
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--primary-color, #1677ff);
+            outline-offset: -2px;
+        }
+    }
+}

package/src/layouts/admin/index.jsx

@@ -37,6 +37,7 @@ export default class AdminLayout extends React.Component {
 
 
     unsubscribeLayout = null;
+    unsubscribeSiteInfo = null;
 
     componentDidMount() {
         // 判断是否手机端，自动收起菜单
@@ -54,12 +55,20 @@ export default class AdminLayout extends React.Component {
         this.unsubscribeLayout = EventBus.on('layoutChange', () => {
             this.setState({layoutMode: getLayoutMode()});
         })
+
+        // 系统配置保存后刷新标题、水印等站点信息
+        this.unsubscribeSiteInfo = EventBus.on('siteInfoChange', () => {
+            this.setState({siteInfo: GlobalData.getSiteInfo()});
+        })
     }
 
     componentWillUnmount() {
         if (this.unsubscribeLayout) {
             this.unsubscribeLayout();
         }
+        if (this.unsubscribeSiteInfo) {
+            this.unsubscribeSiteInfo();
+        }
     }
 
 
@@ -202,6 +211,8 @@ export default class AdminLayout extends React.Component {
 
     render() {
         const {siteInfo, loginInfo} = this.state
+        // 侧栏空间有限，优先显示系统简称；未配置时回退完整标题
+        const siderTitle = (siteInfo.shortTitle || '').trim() || siteInfo.title || '首页';
 
 return <Layout className='main-layout'>
              {/* 侧栏单独套暗色算法，使分割线/边框在深色底上可见，并按预设覆盖侧栏底色 */}
@@ -217,7 +228,8 @@ return <Layout className='main-layout'>
                             <img src="./logo.png" alt={siteInfo.title || '首页'}/>
                         </button>
                         <h3 className='hide-on-mobile'>
-                            <Link to="/" style={{color: 'var(--oa-sider-text, rgba(255,255,255,0.85))'}}>{siteInfo.title}</Link>
+                            <Link to="/" title={siteInfo.title || siderTitle}
+                                  style={{color: 'var(--oa-sider-text, rgba(255,255,255,0.85))'}}>{siderTitle}</Link>
                         </h3>
                     </div>
                     {this.renderLeftMenu()}

package/src/layouts/admin/index.less

@@ -61,13 +61,13 @@
         font: inherit;
 
         &:hover {
-          color: var(--primary-color, #1677ff);
+          /* hover 只给底色，主色保留给当前项，避免悬停项比 active 更抢眼 */
+          color: var(--oa-color-text, rgba(0, 0, 0, 0.88));
           background: var(--oa-color-fill, rgba(0, 0, 0, 0.06));
         }
 
         &.active {
           color: var(--primary-color, #1677ff);
-          box-shadow: inset 0 -2px 0 var(--primary-color, #1677ff);
         }
       }
     }

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

@@ -1,4 +1,4 @@
-import {Button, Card, Collapse, Drawer, Form, Input, Modal, Select, Space, Switch, Tag, Typography} from 'antd'
+import {Button, Card, Checkbox, Collapse, Drawer, Form, Input, Modal, Select, Tag, Typography} from 'antd'
 import React from 'react'
 import {HttpClient, getMessageApi, getToken, Page, Perm} from '../../../framework'
 
@@ -13,9 +13,9 @@ export default class CodegenPage extends React.Component {
         module: '',
         label: '',
         parentMenu: 'sys',
-        overwrite: false,
 
         files: [],
+        selectedPaths: [],
         previewOpen: false,
         confirmOpen: false,
 
@@ -47,7 +47,6 @@ export default class CodegenPage extends React.Component {
         module: this.state.module,
         label: this.state.label,
         parentMenu: this.state.parentMenu,
-        overwrite: this.state.overwrite,
     })
 
     handlePreview = () => {
@@ -57,7 +56,13 @@ export default class CodegenPage extends React.Component {
         }
         this.setState({loading: true})
         HttpClient.post('admin/codegen/preview', this.buildReq(), null, {toastError: false}).then(rs => {
-            this.setState({files: rs.data || [], previewOpen: true})
+            const files = rs.data || []
+            this.setState({
+                files,
+                // 默认只勾选新增文件，已存在文件需手动勾选后才会覆盖
+                selectedPaths: files.filter(file => !file.exists).map(file => file.path),
+                previewOpen: true,
+            })
         }).catch(e => {
             console.error('[Codegen] 预览失败:', e)
             getMessageApi().error(e?.message || '预览失败')
@@ -74,7 +79,8 @@ export default class CodegenPage extends React.Component {
 
     doGenerate = () => {
         this.setState({confirmOpen: false, loading: true})
-        HttpClient.post('admin/codegen/generate', this.buildReq(), null, {toastError: false}).then(rs => {
+        const params = {...this.buildReq(), paths: this.state.selectedPaths}
+        HttpClient.post('admin/codegen/generate', params, null, {toastError: false}).then(rs => {
             this.setState({result: rs.data, resultOpen: true, previewOpen: false})
         }).catch(e => {
             console.error('[Codegen] 生成失败:', e)
@@ -82,6 +88,20 @@ export default class CodegenPage extends React.Component {
         }).finally(() => this.setState({loading: false}))
     }
 
+    togglePath = (path, checked) => {
+        this.setState(state => ({
+            selectedPaths: checked
+                ? [...state.selectedPaths, path]
+                : state.selectedPaths.filter(item => item !== path),
+        }))
+    }
+
+    toggleAll = checked => {
+        this.setState(state => ({
+            selectedPaths: checked ? state.files.map(file => file.path) : [],
+        }))
+    }
+
     copy = (text) => {
         if (navigator.clipboard) {
             navigator.clipboard.writeText(text)
@@ -96,14 +116,10 @@ export default class CodegenPage extends React.Component {
 
     render() {
         const selected = this.selectedOption()
-        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>
-                     }>
+        const {files, selectedPaths} = this.state
+        const allSelected = files.length > 0 && selectedPaths.length === files.length
+        const overwriteCount = files.filter(file => file.exists && selectedPaths.includes(file.path)).length
+        return <Page>
             <Card size='small'>
                 <Form layout='vertical' style={{maxWidth: 720}}>
                     <Form.Item label='实体' required>
@@ -134,11 +150,10 @@ export default class CodegenPage extends React.Component {
                         <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>
+                <Perm code='sys-codegen:generate'>
+                    <Button type='primary' loading={this.state.loading} onClick={this.handlePreview}>预览</Button>
+                </Perm>
             </Card>
 
             <Drawer title='生成预览' width={960}
@@ -146,34 +161,58 @@ export default class CodegenPage extends React.Component {
                     onClose={() => this.setState({previewOpen: false})}
                     extra={
                         <Perm code='sys-codegen:generate'>
-                            <Button type='primary' loading={this.state.loading} onClick={this.handleGenerate}>生成并写入</Button>
+                            <Button type='primary'
+                                    disabled={selectedPaths.length === 0}
+                                    loading={this.state.loading}
+                                    onClick={this.handleGenerate}>
+                                生成并写入（{selectedPaths.length}）
+                            </Button>
                         </Perm>
                     }>
+                <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12}}>
+                    <Checkbox checked={allSelected}
+                              indeterminate={selectedPaths.length > 0 && !allSelected}
+                              onChange={e => this.toggleAll(e.target.checked)}>
+                        全选
+                    </Checkbox>
+                    <Typography.Text type='secondary'>
+                        已选 {selectedPaths.length} / 共 {files.length} 个文件，默认勾选新增文件
+                    </Typography.Text>
+                </div>
                 <Collapse
-                    items={this.state.files.map((file, index) => ({
-                        key: String(index),
-                        label: (
-                            <Space>
-                                <span>{file.path}</span>
-                                {file.exists
-                                    ? <Tag color='orange'>已存在</Tag>
-                                    : <Tag color='green'>新增</Tag>}
-                            </Space>
-                        ),
-                        children: (
-                            <>
-                                <Button size='small' style={{marginBottom: 8}}
-                                        onClick={() => this.copy(file.content)}>复制</Button>
-                                <pre style={{
-                                    maxHeight: 420,
-                                    overflow: 'auto',
-                                    background: String(getToken().colorFillTertiary ?? '#f6f8fa'),
-                                    padding: 12,
-                                    borderRadius: 4,
-                                }}>{file.content}</pre>
-                            </>
-                        ),
-                    }))}
+                    items={files.map((file, index) => {
+                        const checked = selectedPaths.includes(file.path)
+                        return {
+                            key: String(index),
+                            label: (
+                                <span onClick={e => e.stopPropagation()}
+                                      style={{display: 'flex', alignItems: 'center', gap: 8, minWidth: 0}}>
+                                    <Checkbox checked={checked}
+                                              onChange={e => this.togglePath(file.path, e.target.checked)}/>
+                                    <span title={file.path}
+                                          style={{flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>
+                                        {file.path}
+                                    </span>
+                                    {file.exists
+                                        ? <Tag color='orange' style={{marginInlineEnd: 0}}>{checked ? '将覆盖' : '已存在'}</Tag>
+                                        : <Tag color='green' style={{marginInlineEnd: 0}}>新增</Tag>}
+                                </span>
+                            ),
+                            children: (
+                                <>
+                                    <Button size='small' style={{marginBottom: 8}}
+                                            onClick={() => this.copy(file.content)}>复制</Button>
+                                    <pre style={{
+                                        maxHeight: 420,
+                                        overflow: 'auto',
+                                        background: String(getToken().colorFillTertiary ?? '#f6f8fa'),
+                                        padding: 12,
+                                        borderRadius: 4,
+                                    }}>{file.content}</pre>
+                                </>
+                            ),
+                        }
+                    })}
                 />
             </Drawer>
 
@@ -184,7 +223,7 @@ export default class CodegenPage extends React.Component {
                    onCancel={() => this.setState({confirmOpen: false})}>
                 <p>将按以下配置生成代码到项目源码目录：</p>
                 <p>模块名：{this.state.module}</p>
-                <p>覆盖已存在文件：{this.state.overwrite ? '是' : '否'}</p>
+                <p>写入 {selectedPaths.length} 个文件{overwriteCount > 0 ? `，其中覆盖 ${overwriteCount} 个已存在文件` : ''}。</p>
             </Modal>
 
             <Modal title='生成结果'
@@ -194,7 +233,7 @@ export default class CodegenPage extends React.Component {
                 <p>已写入 {this.state.result?.written?.length || 0} 个文件，跳过 {this.state.result?.skipped?.length || 0} 个。</p>
                 {this.state.result?.skipped?.length > 0 &&
                     <>
-                        <Typography.Text type='warning'>以下文件已存在已跳过（可勾选“覆盖已存在文件”后重新生成）：</Typography.Text>
+                        <Typography.Text type='warning'>以下文件未勾选，已跳过：</Typography.Text>
                         <ul>
                             {this.state.result.skipped.map(path => <li key={path}>{path}</li>)}
                         </ul>