[improvement](webapp) optimize filter css styles and modify menu name

Co-authored-by: williamhliu <williamhliu@tencent.com>
This commit is contained in:
jerryjzhang
2023-09-04 14:22:52 +08:00
parent fbd145fd92
commit 90e62ddccc
11 changed files with 116 additions and 88 deletions

View File

@@ -192,4 +192,4 @@
"engines": {
"node": ">=14.18.0"
}
}
}

View File

@@ -49,7 +49,7 @@ export type FilterItemType = {
bizName: string;
operator: string;
type: string;
value: string;
value: any;
};
export type ModelType = {

View File

@@ -4,6 +4,7 @@ import { FilterItemType } from '../../common/type';
import { useEffect, useMemo, useRef, useState } from 'react';
import { queryDimensionValues } from '../../service';
import debounce from 'lodash/debounce';
import isArray from 'lodash/isArray';
type Props = {
modelId: number;
@@ -60,10 +61,13 @@ const FilterItem: React.FC<Props> = ({ modelId, filters, filter, onFiltersChange
return debounce(loadOptions, 800);
}, [queryDimensionValues]);
const onChange = (value: string) => {
const onChange = (value: string | string[]) => {
if (isArray(value) && value.length === 0) {
return;
}
const newFilters = filters.map(item => {
if (item.bizName === filter.bizName) {
item.value = `${value}`;
item.value = isArray(value) ? value : `${value}`;
}
return item;
});
@@ -72,20 +76,20 @@ const FilterItem: React.FC<Props> = ({ modelId, filters, filter, onFiltersChange
return (
<span className={prefixCls}>
{typeof filter.value === 'string' ? (
{typeof filter.value === 'string' || isArray(filter.value) ? (
<Select
bordered={false}
value={filter.value}
options={options}
className={`${prefixCls}-select-control`}
popupClassName={`${prefixCls}-select-popup`}
onSearch={debounceFetcher}
notFoundContent={loading ? <Spin size="small" /> : null}
onChange={onChange}
mode={isArray(filter.value) ? 'multiple' : undefined}
showSearch
/>
) : (
<span>{filter.value}</span>
<span className={`${prefixCls}-filter-value`}>{filter.value}</span>
)}
</span>
);

View File

@@ -96,7 +96,9 @@ const ParseTip: React.FC<Props> = ({
<div className={`${prefixCls}-tip-item-option`}>
<span>
<span className={`${prefixCls}-tip-item-filter-name`}>{filter.name}</span>
{filter.operator !== '=' ? ` ${filter.operator} ` : ''}
{filter.operator !== '=' && filter.operator !== 'IN'
? ` ${filter.operator} `
: ''}
</span>
{queryMode !== 'DSL' && !filter.bizName?.includes('_id') ? (
<FilterItem

View File

@@ -297,10 +297,21 @@
.@{filter-item-prefix-cls} {
&-select-control {
min-width: 120px;
background-color: #f5f8fb;
border-radius: 6px;
}
.ant-select-selection-item {
color: var(--chat-blue);
font-weight: 500;
}
.ant-select-multiple .ant-select-selection-item {
background-color: var(--light-blue-background);
}
&-filter-value {
color: var(--chat-blue);
font-weight: 500;
}
}

View File

@@ -28,12 +28,6 @@ const ROUTES = [
name: 'chatSetting',
envEnableList: [ENV_KEY.CHAT],
},
{
path: '/chatPlugin',
name: 'chatPlugin',
component: './ChatPlugin',
envEnableList: [ENV_KEY.CHAT],
},
{
path: '/agent',
name: 'agent',
@@ -79,6 +73,12 @@ const ROUTES = [
component: './SemanticModel/Metric',
envEnableList: [ENV_KEY.SEMANTIC],
},
{
path: '/plugin',
name: 'plugin',
component: './ChatPlugin',
envEnableList: [ENV_KEY.CHAT],
},
{
path: '/login',
name: 'login',

View File

@@ -13,7 +13,7 @@ export default {
'menu.metric': '指标市场',
'menu.database': '数据库连接',
'menu.chatSetting': '问答设置',
'menu.chatPlugin': '第三方插件',
'menu.plugin': '插件市场',
'menu.login': '登录',
'menu.chat': '问答对话',
'menu.agent': '智能助理',