mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-11 03:58:14 +00:00
[improvement](webapp) optimize filter css styles and modify menu name
Co-authored-by: williamhliu <williamhliu@tencent.com>
This commit is contained in:
@@ -192,4 +192,4 @@
|
||||
"engines": {
|
||||
"node": ">=14.18.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,7 +49,7 @@ export type FilterItemType = {
|
||||
bizName: string;
|
||||
operator: string;
|
||||
type: string;
|
||||
value: string;
|
||||
value: any;
|
||||
};
|
||||
|
||||
export type ModelType = {
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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',
|
||||
|
||||
@@ -13,7 +13,7 @@ export default {
|
||||
'menu.metric': '指标市场',
|
||||
'menu.database': '数据库连接',
|
||||
'menu.chatSetting': '问答设置',
|
||||
'menu.chatPlugin': '第三方插件',
|
||||
'menu.plugin': '插件市场',
|
||||
'menu.login': '登录',
|
||||
'menu.chat': '问答对话',
|
||||
'menu.agent': '智能助理',
|
||||
|
||||
Reference in New Issue
Block a user