田强 / qx-common · Commits

Commit a53e7466b5938d08059040fd71446b18bf6a9e8b

Authored by 陈洋
1 parent 263c4354

pref: 修改引用 删除多余文件

Inline Side-by-side
Showing 9 changed files with 164 additions and 525 deletions
1 { 1 {
2 "name": "@qx/common", 2 "name": "@qx/common",
3 - "version": "3.0.0-alpha.3", 3 + "version": "3.0.0-alpha.5",
4 "lockfileVersion": 2, 4 "lockfileVersion": 2,
5 "requires": true, 5 "requires": true,
6 "packages": { 6 "packages": {
7 "": { 7 "": {
8 "name": "@qx/common", 8 "name": "@qx/common",
9 - "version": "3.0.0-alpha.3", 9 + "version": "3.0.0-alpha.5",
10 "license": "MIT", 10 "license": "MIT",
11 "dependencies": { 11 "dependencies": {
12 "@ant-design/icons": "^5.2.5", 12 "@ant-design/icons": "^5.2.5",
1 { 1 {
2 "name": "@qx/common", 2 "name": "@qx/common",
3 - "version": "3.0.0-alpha.4", 3 + "version": "3.0.0-alpha.5",
4 "description": "A react library developed with dumi", 4 "description": "A react library developed with dumi",
5 "license": "MIT", 5 "license": "MIT",
6 "module": "dist/index.js", 6 "module": "dist/index.js",
1 -@import '~@qx/ui/src/style/variable.less';  
2 -  
3 -.qx-fields-popover {  
4 - &.ant-popover {  
5 - padding-top: 0;  
6 - padding-bottom: 0;  
7 - overflow: hidden;  
8 - background: #fff;  
9 - border-radius: 8px;  
10 - box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);  
11 - }  
12 -  
13 - .ant-popover-arrow {  
14 - display: none;  
15 - }  
16 -  
17 - .ant-popover-inner {  
18 - padding: 0;  
19 - }  
20 -  
21 - .ant-popover-inner-content {  
22 - padding: 0;  
23 - overflow: auto;  
24 - }  
25 -  
26 - &__search {  
27 - height: 36px;  
28 -  
29 - .ant-input-prefix {  
30 - color: @N7;  
31 - font-size: 16px;  
32 - }  
33 - }  
34 -}  
35 -  
36 -.qx-popover-fields {  
37 - max-height: 260px;  
38 - margin: 0;  
39 - padding: 0;  
40 - overflow: auto;  
41 -  
42 - > li {  
43 - padding: 5px 5px 5px 12px;  
44 - cursor: pointer;  
45 -  
46 - &:hover {  
47 - background-color: @N3;  
48 - }  
49 - }  
50 -}  
51 -  
52 -.qx-fields-pop-content {  
53 - width: 100%;  
54 - max-height: 260px;  
55 - overflow-x: hidden;  
56 -  
57 - &.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {  
58 - margin-top: 0;  
59 - margin-bottom: 1px;  
60 - background-color: @N2;  
61 - }  
62 -  
63 - .ant-menu-sub.ant-menu-inline {  
64 - background-color: #fff;  
65 - }  
66 -  
67 - &.ant-menu-inline > .ant-menu-item,  
68 - .ant-menu-sub.ant-menu-inline > .ant-menu-item {  
69 - height: 32px;  
70 - line-height: 32px;  
71 - border-radius: 4px;  
72 -  
73 - &:hover {  
74 - color: inherit;  
75 - background-color: @N3;  
76 - }  
77 - }  
78 -  
79 - .ant-menu-title-content {  
80 - .ant-typography + span {  
81 - overflow: hidden;  
82 - text-overflow: ellipsis;  
83 - }  
84 - }  
85 -}  
86 -.qx-field-pop__footer {  
87 - padding-top: 5px;  
88 - padding-bottom: 5px;  
89 - padding-left: 24px;  
90 - border-top: 1px solid @N4;  
91 -}  
1 -import { Divider, Input, Menu, Popover } from 'antd';  
2 -  
3 -import * as React from 'react';  
4 -import type { ReactElement } from 'react';  
5 -import { useEffect, useState } from 'react';  
6 -import { QxFieldItem } from '@qx/common';  
7 -import { useDebounceFn } from 'ahooks';  
8 -import { isEmpty } from 'lodash-es';  
9 -import { QxBaseIcon } from '@qx/common';  
10 -import './index.less';  
11 -  
12 -export type OptionFieldExtract = {  
13 - fieldType?: string;  
14 - widget: string;  
15 - design?: any;  
16 - relId?: string;  
17 - //关联数据集的才有  
18 - optionsRef?: string;  
19 - //关联属性，真实的字段组件  
20 - refWidget?: string;  
21 - //关联属性，真实的字段类型  
22 - refType?: string;  
23 - required?: boolean;  
24 - // 是否是默认系统字段，值为true时是未配置的系统字段  
25 - $default?: boolean;  
26 - // 卡片设计 特殊字段配置 回显所用  
27 - renderData?: any;  
28 -};  
29 -  
30 -export type OptionField = {  
31 - code: string;  
32 - name: string;  
33 - disabled?: boolean;  
34 - //当disabled=true的时候extract不存在  
35 - extract?: OptionFieldExtract;  
36 -};  
37 -  
38 -interface QxFieldPopoverProp {  
39 - data: OptionField[];  
40 - widgets?: string[]; //需要展示的widgets  
41 - exclude?: string[]; //排除的字段  
42 - width?: string; //pop 宽度  
43 - trigger?: 'click' | 'hover' | undefined;  
44 - onSelect: (field: OptionField) => void;  
45 - disabled?: boolean;  
46 - hiddenAfterTrigger?: boolean;  
47 - popFooter?: ReactElement;  
48 - children?: any;  
49 -}  
50 -  
51 -export const QxFieldPopover: React.FC<QxFieldPopoverProp> = (props) => {  
52 - // const [fieldFlatten, setFieldFlatten] = useState<any>({})  
53 - const [fields, setFields] = useState<any>([]);  
54 - const [filterFields, setFilterFields] = useState<any>([]);  
55 - const [visible, setVisible] = useState<boolean>(false);  
56 - //TODO 搜索  
57 - const [keyword, setKeyword] = useState<string>();  
58 -  
59 - const getUsefulFieldProp = (field: any) => {  
60 - let mode = 'widget'; //TODO 接口废弃，后续要删掉  
61 - if (field?.extract) {  
62 - mode = 'option';  
63 - }  
64 - let widget = field?.propertyWidget || field.widget;  
65 - let code = field?.fieldName || field.code;  
66 - let name = field?.fieldComment || field.title;  
67 - let relFunId = field?.relFunId;  
68 - if (mode === 'option') {  
69 - widget = field?.extract.widget;  
70 - relFunId = field?.extract.relId;  
71 - code = field?.code;  
72 - name = field?.name;  
73 - }  
74 - return {  
75 - widget,  
76 - code,  
77 - name,  
78 - relFunId,  
79 - };  
80 - };  
81 - // @ts-ignore  
82 - const excludeFields = (list: OptionField[]) => {  
83 - // @ts-ignore  
84 - return list.filter((item: any) => {  
85 - if (item.children && item.children.length === 0) {  
86 - return false;  
87 - }  
88 -  
89 - let allow = true;  
90 - const { widget, code } = getUsefulFieldProp(item);  
91 - if (props.widgets && props.widgets.length > 0 && props.widgets.indexOf(widget) === -1) {  
92 - return false;  
93 - }  
94 - if (!props.exclude || props.exclude.length === 0) {  
95 - allow = true;  
96 - } else {  
97 - allow = props.exclude.indexOf(code) === -1;  
98 - }  
99 - return allow;  
100 - });  
101 - };  
102 - useEffect(() => {  
103 - if (!isEmpty(props.data)) {  
104 - const _fields = excludeFields(props.data);  
105 - setFields(_fields);  
106 - setFilterFields(_fields);  
107 - // setFieldFlatten(flatFields(_fields))  
108 - }  
109 - }, [props.data]);  
110 -  
111 - const handleClick = (item: any) => {  
112 - if (props.hiddenAfterTrigger) {  
113 - setVisible(false);  
114 - }  
115 - props.onSelect(item);  
116 - };  
117 -  
118 - const { run } = useDebounceFn((field) => handleClick(field), {  
119 - wait: 300,  
120 - leading: true,  
121 - trailing: false,  
122 - });  
123 -  
124 - useEffect(() => {  
125 - if (!keyword) {  
126 - setFilterFields([...fields]);  
127 - } else {  
128 - const _filterFields: any = [];  
129 -  
130 - fields.forEach((item: any) => {  
131 - const _item = { ...item };  
132 - _item.children = [];  
133 - if (item?.children?.length) {  
134 - item?.children.forEach((children: any) => {  
135 - if (  
136 - children?.titleStr?.indexOf(keyword) > -1 ||  
137 - children?.name?.indexOf(keyword) > -1  
138 - ) {  
139 - _item.children.push(children);  
140 - }  
141 - });  
142 - if (_item.children?.length) {  
143 - _filterFields.push(_item);  
144 - }  
145 - } else {  
146 - if (item?.titleStr?.indexOf(keyword) > -1 || item?.name?.indexOf(keyword) > -1) {  
147 - _filterFields.push(item);  
148 - }  
149 - }  
150 - });  
151 - /*const _filterFields = fields.filter(  
152 - (item) => item?.titleStr?.indexOf(keyword) > -1 || item?.name?.indexOf(keyword) > -1,  
153 - );*/  
154 - setFilterFields(_filterFields);  
155 - }  
156 - }, [keyword, fields]);  
157 -  
158 - const handleChange = (_keyword: string) => {  
159 - setKeyword(_keyword.trim());  
160 - };  
161 -  
162 - const fieldsPopContent = () => {  
163 - return (  
164 - <div style={{ width: props.width || '192px' }}>  
165 - {!fields?.length ? (  
166 - <div  
167 - className={'ant-empty-normal'}  
168 - style={{  
169 - textAlign: 'center',  
170 - margin: '10px 0',  
171 - }}  
172 - >  
173 - 没有可选字段  
174 - </div>  
175 - ) : (  
176 - <>  
177 - <div  
178 - onMouseDown={(e) => {  
179 - e.preventDefault();  
180 - }}  
181 - >  
182 - <Input  
183 - bordered={false}  
184 - value={keyword}  
185 - className={'qx-fields-popover__search'}  
186 - placeholder={'搜索'}  
187 - allowClear  
188 - prefix={<QxBaseIcon type={'icon-app-search-line'} />}  
189 - onChange={(e) => {  
190 - handleChange(e.target.value);  
191 - }}  
192 - />  
193 - </div>  
194 - <Divider style={{ margin: 0 }} />  
195 - {!filterFields.length ? (  
196 - <div  
197 - className={'ant-empty-normal'}  
198 - style={{  
199 - textAlign: 'center',  
200 - margin: '10px 0',  
201 - }}  
202 - >  
203 - 暂无相关字段  
204 - </div>  
205 - ) : (  
206 - <Menu  
207 - mode="inline"  
208 - className={'qx-fields-pop-content'}  
209 - selectedKeys={[]}  
210 - inlineIndent={12}  
211 - >  
212 - {filterFields.map((field: any) => {  
213 - if (!!field?.children?.length) {  
214 - return (  
215 - <Menu.SubMenu  
216 - key={field.code}  
217 - title={  
218 - field.title || (  
219 - <QxFieldItem  
220 - widget={field.extract && field.extract.widget}  
221 - name={field.name}  
222 - />  
223 - )  
224 - }  
225 - >  
226 - {field.children.map((item: any) => {  
227 - if ((item.children || []).length) {  
228 - return (  
229 - <Menu.SubMenu  
230 - key={item.code}  
231 - title={  
232 - item.title || (  
233 - <QxFieldItem  
234 - widget={field.extract && field.extract.widget}  
235 - name={field.name}  
236 - />  
237 - )  
238 - }  
239 - >  
240 - {(item.children || []).map((_it: any) => {  
241 - return (  
242 - <Menu.Item  
243 - key={_it.code}  
244 - onClick={() => {  
245 - handleClick(_it);  
246 - }}  
247 - >  
248 - {_it.title || (  
249 - <QxFieldItem  
250 - widget={field.extract && field.extract.widget}  
251 - name={field.name}  
252 - />  
253 - )}  
254 - </Menu.Item>  
255 - );  
256 - })}  
257 - </Menu.SubMenu>  
258 - );  
259 - } else {  
260 - return (  
261 - <Menu.Item  
262 - key={item.code}  
263 - onClick={() => {  
264 - handleClick(item);  
265 - }}  
266 - >  
267 - {item.title || (  
268 - <QxFieldItem  
269 - widget={field.extract && field.extract.widget}  
270 - name={field.name}  
271 - />  
272 - )}  
273 - </Menu.Item>  
274 - );  
275 - }  
276 - })}  
277 - </Menu.SubMenu>  
278 - );  
279 - } else {  
280 - return (  
281 - <Menu.Item  
282 - style={{  
283 - display:  
284 - keyword && field?.name?.indexOf(keyword) === -1 ? 'none' : 'block',  
285 - }}  
286 - onClick={() => {  
287 - run(field);  
288 - }}  
289 - key={field.code}  
290 - >  
291 - {field.title || (  
292 - <QxFieldItem  
293 - widget={field.extract && field.extract.widget}  
294 - name={field.name}  
295 - />  
296 - )}  
297 - </Menu.Item>  
298 - );  
299 - }  
300 - })}  
301 - </Menu>  
302 - )}  
303 - </>  
304 - )}  
305 - {props.popFooter ? <div className="qx-field-pop__footer">{props.popFooter}</div> : null}  
306 - </div>  
307 - );  
308 - };  
309 -  
310 - return (  
311 - <Popover  
312 - overlayClassName={'qx-fields-popover'}  
313 - // getPopupContainer={(triggerNode) => triggerNode}  
314 - content={fieldsPopContent()}  
315 - placement={'bottomRight'}  
316 - trigger={props.disabled ? undefined : props.trigger || 'click'}  
317 - open={visible}  
318 - onOpenChange={(v) => {  
319 - if (!v) {  
320 - setTimeout(() => {  
321 - setKeyword('');  
322 - setFilterFields([...fields]);  
323 - }, 0);  
324 - }  
325 - setVisible(v);  
326 - }}  
327 - >  
328 - {props.children}  
329 - </Popover>  
330 - );  
331 -}  
@@ -17,7 +17,7 @@ import { CloseOutlined, ControlOutlined, RightOutlined } from '@ant-design/icons @@ -17,7 +17,7 @@ import { CloseOutlined, ControlOutlined, RightOutlined } from '@ant-design/icons
17 import { cloneDeep, isEqual, isEmpty, findIndex, size } from 'lodash-es'; 17 import { cloneDeep, isEqual, isEmpty, findIndex, size } from 'lodash-es';
18 import { RelTreeSetter } from './components/rel-tree-setter'; 18 import { RelTreeSetter } from './components/rel-tree-setter';
19 import { AddressSetter } from './components/address-setter'; 19 import { AddressSetter } from './components/address-setter';
20 -import {QxFieldPopover} from '../qx-field-popover'; 20 +import {QxFieldPopover} from '@qx/common';
21 import { InputSetter } from './components/input-setter'; 21 import { InputSetter } from './components/input-setter';
22 import { OrgSetter } from './components/org-setter'; 22 import { OrgSetter } from './components/org-setter';
23 import { RelSetter } from './components/rel-setter'; 23 import { RelSetter } from './components/rel-setter';
1 import QxFieldItem from './src/item'; 1 import QxFieldItem from './src/item';
2 import QxFieldSelect from './src/select'; 2 import QxFieldSelect from './src/select';
  3 +import QxFieldPopover from './src/popover';
  4 +// import QxCheckboxFieldPopover from './src/popover/checkbox';
3 5
4 -export { QxFieldItem, QxFieldSelect }; 6 +export { QxFieldItem, QxFieldSelect, QxFieldPopover };
@@ -127,107 +127,131 @@ const QxFieldPopover: React.FC<QxFieldPopoverProp> = (props) => { @@ -127,107 +127,131 @@ const QxFieldPopover: React.FC<QxFieldPopoverProp> = (props) => {
127 </div> 127 </div>
128 ) : ( 128 ) : (
129 <> 129 <>
130 - <Input  
131 - className={'qx-selector-sub-search'}  
132 - placeholder={'搜索'}  
133 - allowClear  
134 - prefix={<QxBaseIcon type={'icon-app-search-line'} />}  
135 - style={{ paddingTop: '6px' }}  
136 - onChange={(e) => {  
137 - handleChange(e.target.value); 130 + <div
  131 + onMouseDown={(e) => {
  132 + e.preventDefault();
138 }} 133 }}
139 - /> 134 + >
  135 + <Input
  136 + bordered={false}
  137 + value={keyword}
  138 + className={'qx-fields-popover__search'}
  139 + placeholder={'搜索'}
  140 + allowClear
  141 + prefix={<QxBaseIcon type={'icon-app-search-line'} />}
  142 + onChange={(e) => {
  143 + handleChange(e.target.value);
  144 + }}
  145 + />
  146 + </div>
140 <Divider style={{ margin: 0 }} /> 147 <Divider style={{ margin: 0 }} />
141 - <Menu mode="inline" className={'qx-fields-pop-content'} selectedKeys={[]}>  
142 - {filterFields.map((field: any) => {  
143 - if (field.children) {  
144 - return (  
145 - <Menu.SubMenu  
146 - key={field.code}  
147 - title={  
148 - field.title || (  
149 - <QxFieldItem  
150 - widget={field.extract && field.extract.widget}  
151 - name={field.name}  
152 - />  
153 - )  
154 - }  
155 - >  
156 - {field.children.map((item: any) => {  
157 - if ((item.children || []).length) {  
158 - return (  
159 - <Menu.SubMenu  
160 - key={item.code}  
161 - title={  
162 - item.title || ( 148 + {!filterFields.length ? (
  149 + <div
  150 + className={'ant-empty-normal'}
  151 + style={{
  152 + textAlign: 'center',
  153 + margin: '10px 0',
  154 + }}
  155 + >
  156 + 暂无相关字段
  157 + </div>
  158 + ) : (
  159 + <Menu
  160 + mode="inline"
  161 + className={'qx-fields-pop-content'}
  162 + selectedKeys={[]}
  163 + inlineIndent={12}
  164 + >
  165 + {filterFields.map((field: any) => {
  166 + if (!!field?.children?.length) {
  167 + return (
  168 + <Menu.SubMenu
  169 + key={field.code}
  170 + title={
  171 + field.title || (
  172 + <QxFieldItem
  173 + widget={field.extract && field.extract.widget}
  174 + name={field.name}
  175 + />
  176 + )
  177 + }
  178 + >
  179 + {field.children.map((item: any) => {
  180 + if ((item.children || []).length) {
  181 + return (
  182 + <Menu.SubMenu
  183 + key={item.code}
  184 + title={
  185 + item.title || (
  186 + <QxFieldItem
  187 + widget={field.extract && field.extract.widget}
  188 + name={field.name}
  189 + />
  190 + )
  191 + }
  192 + >
  193 + {(item.children || []).map((_it: any) => {
  194 + return (
  195 + <Menu.Item
  196 + key={_it.code}
  197 + onClick={() => {
  198 + handleClick(_it);
  199 + }}
  200 + >
  201 + {_it.title || (
  202 + <QxFieldItem
  203 + widget={field.extract && field.extract.widget}
  204 + name={field.name}
  205 + />
  206 + )}
  207 + </Menu.Item>
  208 + );
  209 + })}
  210 + </Menu.SubMenu>
  211 + );
  212 + } else {
  213 + return (
  214 + <Menu.Item
  215 + key={item.code}
  216 + onClick={() => {
  217 + handleClick(item);
  218 + }}
  219 + >
  220 + {item.title || (
163 <QxFieldItem 221 <QxFieldItem
164 widget={field.extract && field.extract.widget} 222 widget={field.extract && field.extract.widget}
165 name={field.name} 223 name={field.name}
166 /> 224 />
167 - )  
168 - }  
169 - >  
170 - {(item.children || []).map((_it: any) => {  
171 - return (  
172 - <Menu.Item  
173 - key={_it.code}  
174 - onClick={() => {  
175 - handleClick(_it);  
176 - }}  
177 - >  
178 - {_it.title || (  
179 - <QxFieldItem  
180 - widget={field.extract && field.extract.widget}  
181 - name={field.name}  
182 - />  
183 - )}  
184 - </Menu.Item>  
185 - );  
186 - })}  
187 - </Menu.SubMenu>  
188 - );  
189 - } else {  
190 - return (  
191 - <Menu.Item  
192 - key={item.code}  
193 - onClick={() => {  
194 - handleClick(item);  
195 - }}  
196 - >  
197 - {item.title || (  
198 - <QxFieldItem  
199 - widget={field.extract && field.extract.widget}  
200 - name={field.name}  
201 - />  
202 - )}  
203 - </Menu.Item>  
204 - );  
205 - }  
206 - })}  
207 - </Menu.SubMenu>  
208 - );  
209 - } else {  
210 - return (  
211 - <Menu.Item  
212 - style={{  
213 - display: keyword && field?.name?.indexOf(keyword) === -1 ? 'none' : 'block',  
214 - }}  
215 - onClick={() => {  
216 - run(field);  
217 - }}  
218 - key={field.code}  
219 - >  
220 - {field.title || (  
221 - <QxFieldItem  
222 - widget={field.extract && field.extract.widget}  
223 - name={field.name}  
224 - />  
225 - )}  
226 - </Menu.Item>  
227 - );  
228 - }  
229 - })}  
230 - </Menu> 225 + )}
  226 + </Menu.Item>
  227 + );
  228 + }
  229 + })}
  230 + </Menu.SubMenu>
  231 + );
  232 + } else {
  233 + return (
  234 + <Menu.Item
  235 + style={{
  236 + display: keyword && field?.name?.indexOf(keyword) === -1 ? 'none' : 'block',
  237 + }}
  238 + onClick={() => {
  239 + run(field);
  240 + }}
  241 + key={field.code}
  242 + >
  243 + {field.title || (
  244 + <QxFieldItem
  245 + widget={field.extract && field.extract.widget}
  246 + name={field.name}
  247 + />
  248 + )}
  249 + </Menu.Item>
  250 + );
  251 + }
  252 + })}
  253 + </Menu>
  254 + )}
231 </> 255 </>
232 )} 256 )}
233 {props.popFooter ? <div className="qx-field-pop__footer">{props.popFooter}</div> : null} 257 {props.popFooter ? <div className="qx-field-pop__footer">{props.popFooter}</div> : null}
@@ -244,6 +268,12 @@ const QxFieldPopover: React.FC<QxFieldPopoverProp> = (props) => { @@ -244,6 +268,12 @@ const QxFieldPopover: React.FC<QxFieldPopoverProp> = (props) => {
244 trigger={props.disabled ? undefined : props.trigger || 'hover'} 268 trigger={props.disabled ? undefined : props.trigger || 'hover'}
245 open={visible} 269 open={visible}
246 onOpenChange={(v) => { 270 onOpenChange={(v) => {
  271 + if (!v) {
  272 + setTimeout(() => {
  273 + setKeyword('');
  274 + setFilterFields([...fields]);
  275 + }, 0);
  276 + }
247 setVisible(v); 277 setVisible(v);
248 }} 278 }}
249 > 279 >
1 @import '~@qx/ui/src/style/variable.less'; 1 @import '~@qx/ui/src/style/variable.less';
2 2
3 .qx-fields-popover { 3 .qx-fields-popover {
4 - padding-top: 0; 4 + &.ant-popover {
  5 + padding-top: 0;
  6 + padding-bottom: 0;
  7 + overflow: hidden;
  8 + background: #fff;
  9 + border-radius: 8px;
  10 + border: 1px solid #e5e6eb;
  11 + box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  12 + }
  13 +
  14 + .ant-popover-inner {
  15 + padding: 0;
  16 + }
5 17
6 .ant-popover-arrow { 18 .ant-popover-arrow {
7 display: none; 19 display: none;
@@ -11,6 +23,15 @@ @@ -11,6 +23,15 @@
11 padding: 0; 23 padding: 0;
12 overflow: auto; 24 overflow: auto;
13 } 25 }
  26 +
  27 + &__search {
  28 + height: 36px;
  29 +
  30 + .ant-input-prefix {
  31 + color: @N7;
  32 + font-size: 16px;
  33 + }
  34 + }
14 } 35 }
15 36
16 .qx-popover-fields { 37 .qx-popover-fields {
@@ -47,15 +68,23 @@ @@ -47,15 +68,23 @@
47 &.ant-menu-inline > .ant-menu-item, 68 &.ant-menu-inline > .ant-menu-item,
48 .ant-menu-sub.ant-menu-inline > .ant-menu-item { 69 .ant-menu-sub.ant-menu-inline > .ant-menu-item {
49 height: 32px; 70 height: 32px;
50 - margin: 1px;  
51 line-height: 32px; 71 line-height: 32px;
  72 + border-radius: 4px;
52 73
53 &:hover { 74 &:hover {
54 color: inherit; 75 color: inherit;
55 background-color: @N3; 76 background-color: @N3;
56 } 77 }
57 } 78 }
  79 +
  80 + .ant-menu-title-content {
  81 + .ant-typography + span {
  82 + overflow: hidden;
  83 + text-overflow: ellipsis;
  84 + }
  85 + }
58 } 86 }
  87 +
59 .qx-field-pop__footer { 88 .qx-field-pop__footer {
60 padding-top: 5px; 89 padding-top: 5px;
61 padding-bottom: 5px; 90 padding-bottom: 5px;
1 import React, { useEffect, useState } from 'react'; 1 import React, { useEffect, useState } from 'react';
2 import type { ColsTreeProps } from '@qx/common'; 2 import type { ColsTreeProps } from '@qx/common';
3 import { QxFieldSetter } from '@qx/common'; 3 import { QxFieldSetter } from '@qx/common';
4 -import { QxFieldPopover } from '../qx-field-popover'; 4 +import {QxFieldPopover} from '@qx/common';
5 import { QxBaseIcon } from '@qx/common'; 5 import { QxBaseIcon } from '@qx/common';
6 import { FunctionOutlined } from '@ant-design/icons'; 6 import { FunctionOutlined } from '@ant-design/icons';
7 import { 7 import {