diff --git a/public/image/logos/jsonapi.png b/public/image/logos/jsonapi.png
new file mode 100644
index 0000000000..b66ec2295b
Binary files /dev/null and b/public/image/logos/jsonapi.png differ
diff --git a/src/components/DatasourceSelect/DatasourceSelectV3/index.test.tsx b/src/components/DatasourceSelect/DatasourceSelectV3/index.test.tsx
new file mode 100644
index 0000000000..3489abf10e
--- /dev/null
+++ b/src/components/DatasourceSelect/DatasourceSelectV3/index.test.tsx
@@ -0,0 +1,51 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+jest.mock('@/App', () => ({
+  __esModule: true,
+  CommonStateContext: React.createContext({
+    datasourceList: [],
+    datasourceCateOptions: [],
+    isPlus: false,
+  }),
+}));
+jest.mock('react-i18next', () => ({
+  __esModule: true,
+  useTranslation: () => ({ t: (key: string) => key, i18n: { language: 'zh_CN' } }),
+}));
+jest.mock('@/components/AdvancedWrap/utils', () => ({
+  __esModule: true,
+  getCateDisplayLabel: () => undefined,
+}));
+jest.mock('../EmptyDatasourcePopover', () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+import DatasourceSelectV3 from './index';
+
+describe('DatasourceSelectV3', () => {
+  it('keeps an injected datasource variable value instead of marking it as deleted', () => {
+    render(
+      <DatasourceSelectV3
+        value='${datasource}'
+        datasourceList={[]}
+        datasourceCateList={[]}
+        ajustDatasourceList={() => [
+          {
+            id: '${datasource}',
+            name: '${datasource}',
+            plugin_type: 'prometheus',
+          },
+        ]}
+        showEmptyDatasourcePopover={false}
+      />,
+    );
+
+    expect(screen.getByText('${datasource}')).toBeInTheDocument();
+    expect(screen.queryByText(/deleted/)).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/DatasourceSelect/DatasourceSelectV3/index.tsx b/src/components/DatasourceSelect/DatasourceSelectV3/index.tsx
index 0076f62001..e6ec6ab5f7 100644
--- a/src/components/DatasourceSelect/DatasourceSelectV3/index.tsx
+++ b/src/components/DatasourceSelect/DatasourceSelectV3/index.tsx
@@ -1,6 +1,8 @@
 import React, { useContext } from 'react';
+import { WarningOutlined } from '@ant-design/icons';
 import { Select, Space, Tag } from 'antd';
 import { SelectProps } from 'antd/lib/select';
+import classNames from 'classnames';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 
@@ -11,65 +13,177 @@ import EmptyDatasourcePopover from '../EmptyDatasourcePopover';
 
 import './style.less';
 
-interface DatasourceItem {
+export interface DatasourceItem {
   id: number | string;
   name: string;
   plugin_type: string;
-  is_default: boolean;
+  plugin_type_name?: string;
+  is_default?: boolean;
   identifier?: string;
+  weight?: number;
 }
 
 interface Props {
   type?: 'metric' | 'logging';
-  datasourceCateList: Cate[];
+  datasourceList?: DatasourceItem[];
+  datasourceCateList?: Cate[];
   ajustDatasourceList?: (list: DatasourceItem[]) => DatasourceItem[];
-  onChange?: (value: string | number, datasourceCate: string) => void;
+  onChange?: (value: string | number | Array<string | number>, datasourceCate: string) => void;
   onClear?: () => void;
   additionalOptions?: SelectProps['options'];
+  filterKey?: string;
+  showHost?: boolean;
+  renderOptionIcon?: (item: DatasourceItem) => React.ReactNode;
+  isOptionDisabled?: (item: DatasourceItem) => boolean;
+  renderOptionExtra?: (item: DatasourceItem) => React.ReactNode;
+  showEmptyDatasourcePopover?: boolean;
+}
+
+type DatasourceValue = string | number;
+
+function getRawValue(value: DatasourceValue | { value: DatasourceValue }): DatasourceValue {
+  return typeof value === 'object' ? value.value : value;
 }
 
 export default function index(props: SelectProps & Props) {
-  const { type, datasourceCateList, ajustDatasourceList, onChange, onClear, additionalOptions } = props;
-  const { i18n } = useTranslation();
-  const { datasourceList } = useContext(CommonStateContext);
-  const currentDatasourceList = ajustDatasourceList ? ajustDatasourceList(datasourceList) : datasourceList;
+  const {
+    type,
+    datasourceList: providedDatasourceList,
+    datasourceCateList,
+    ajustDatasourceList,
+    onChange,
+    onClear,
+    additionalOptions,
+    filterKey,
+    showHost,
+    renderOptionIcon,
+    isOptionDisabled,
+    renderOptionExtra,
+    showEmptyDatasourcePopover = true,
+    className,
+  } = props;
+  const { t, i18n } = useTranslation('datasourceSelect');
+  const { datasourceList: contextDatasourceList = [], datasourceCateOptions = [], isPlus } = useContext(CommonStateContext);
+  const resolvedDatasourceList: DatasourceItem[] = providedDatasourceList ?? contextDatasourceList;
+  const resolvedDatasourceCateList = datasourceCateList ?? datasourceCateOptions;
+  // 调整后的列表可能包含仪表盘注入的数据源变量选项，不能只用原始列表判断当前值是否已删除。
+  const adjustedDatasourceList = ajustDatasourceList ? ajustDatasourceList(resolvedDatasourceList) : resolvedDatasourceList;
+  const currentDatasourceList = adjustedDatasourceList.filter((item) => {
+    if (!filterKey) {
+      return true;
+    }
+    const datasourceCate = _.find(resolvedDatasourceCateList, { value: item.plugin_type });
+    const supported = (datasourceCate as any)?.[filterKey];
+    return isPlus ? supported : supported && !datasourceCate?.alertPro;
+  });
+  const orderedDatasourceList = providedDatasourceList ? currentDatasourceList : _.orderBy(currentDatasourceList, ['is_default', 'plugin_type', 'weight'], ['desc', 'asc', 'asc']);
+  const additionalOptionValues = (additionalOptions ?? [])
+    .map((option) => option?.value)
+    .filter((value): value is DatasourceValue => typeof value === 'string' || typeof value === 'number');
+  const selectedValue = props.value ?? props.defaultValue;
+  const hasSelectedValue = Array.isArray(selectedValue) ? selectedValue.length > 0 : selectedValue != null;
+  // additionalOptions 中的伪值（如 mixed）并非数据源，回填时保留其原有展示。
+  const preservedOptionValues = new Set<DatasourceValue>([...additionalOptionValues, ...(showHost ? [-999] : [])]);
+  const normalizeSelectedValue = (value: SelectProps['value']) => {
+    if (value == null) return undefined;
 
-  return (
-    <EmptyDatasourcePopover type={type} datasourceList={currentDatasourceList}>
-      <Select
-        className='n9e-datasource-select-v3'
-        dropdownMatchSelectWidth={false}
-        {..._.omit(props, ['type', 'datasourceCateList', 'ajustDatasourceList', 'additionalOptions'])}
-        showSearch
-        optionLabelProp='optionLabel'
-        filterOption={(inputValue, option) => {
-          // 根据空格分词进行过滤，取交集
-          const keywords = _.filter(_.split(inputValue, ' '), (kw) => kw) as string[];
-          return _.every(keywords, (kw) => _.includes(_.toLower(option?.filter), _.toLower(kw)));
-        }}
-        options={[
-          ...(additionalOptions ?? []),
-          ..._.map(_.orderBy(currentDatasourceList, ['is_default', 'plugin_type', 'weight'], ['desc', 'asc', 'asc']), (item) => {
-            const datasourceCate = _.find(datasourceCateList, { value: item.plugin_type });
-            const displayLabel = getCateDisplayLabel(datasourceCate, i18n.language);
-            return {
-              filter: [item.plugin_type, displayLabel, item.name].join(' '),
-              originLabel: item.name,
-              optionLabel: (
-                <div>
+    const normalizeValue = (item: DatasourceValue | { value: DatasourceValue }) => {
+      const rawValue = getRawValue(item);
+      // 业务过滤仅影响下拉可选项，不能将原始数据源列表或调用方注入的选项标记为已删除。
+      const exists =
+        _.some(resolvedDatasourceList, { id: rawValue }) || _.some(adjustedDatasourceList, { id: rawValue }) || preservedOptionValues.has(rawValue);
+
+      return exists
+        ? { value: rawValue }
+        : {
+            value: rawValue,
+            label: (
+              <span className='n9e-datasource-select-v3-deleted-value'>
+                <WarningOutlined />
+                id: {rawValue} {t('deleted')}
+              </span>
+            ),
+          };
+    };
+
+    return Array.isArray(value) ? value.map(normalizeValue) : normalizeValue(value);
+  };
+
+  const select = (
+    <Select
+      className={classNames('n9e-datasource-select-v3', { 'n9e-datasource-select-v3-has-value': hasSelectedValue }, className)}
+      dropdownMatchSelectWidth={false}
+      {..._.omit(props, [
+        'type',
+        'datasourceList',
+        'datasourceCateList',
+        'ajustDatasourceList',
+        'additionalOptions',
+        'filterKey',
+        'showHost',
+        'renderOptionIcon',
+        'isOptionDisabled',
+        'renderOptionExtra',
+        'showEmptyDatasourcePopover',
+        'className',
+        'value',
+        'defaultValue',
+        'labelInValue',
+      ])}
+      showSearch
+      labelInValue
+      menuItemSelectedIcon={null}
+      optionLabelProp='optionLabel'
+      value={normalizeSelectedValue(props.value)}
+      defaultValue={normalizeSelectedValue(props.defaultValue)}
+      filterOption={(inputValue, option) => {
+        // 根据空格分词进行过滤，取交集
+        const keywords = _.filter(_.split(inputValue, ' '), (kw) => kw) as string[];
+        return _.every(keywords, (kw) => _.includes(_.toLower(option?.filter), _.toLower(kw)));
+      }}
+      options={[
+        ...(additionalOptions ?? []),
+        ...(showHost
+          ? [
+              {
+                filter: 'host',
+                label: (
                   <Space>
-                    <img src={datasourceCate?.logo} alt={displayLabel} height={16} />
-                    {item.name}
+                    <img src='/image/logos/host.png' alt='Host' height={16} />
+                    Host
                   </Space>
-                </div>
-              ),
-              label: (
-                <div className='flex items-center gap-2 justify-between'>
+                ),
+                optionLabel: (
                   <Space>
-                    <img src={datasourceCate?.logo} alt={displayLabel} height={16} />
-                    {item.name}
-                    {item.is_default && <Tag color='var(--fc-fill-primary)'>default</Tag>}
+                    <img src='/image/logos/host.png' alt='Host' height={16} />
+                    Host
                   </Space>
+                ),
+                value: -999,
+              },
+            ]
+          : []),
+        ..._.map(orderedDatasourceList, (item) => {
+          const datasourceCate = _.find(resolvedDatasourceCateList, { value: item.plugin_type });
+          const displayLabel = getCateDisplayLabel(datasourceCate, i18n.language) || item.plugin_type_name || item.plugin_type;
+          const optionIcon = renderOptionIcon?.(item) ?? (datasourceCate?.logo ? <img src={datasourceCate.logo} alt={displayLabel} height={16} className='shrink-0' /> : null);
+          return {
+            filter: [item.plugin_type, item.plugin_type_name, displayLabel, item.name].filter(Boolean).join(' '),
+            originLabel: item.name,
+            optionLabel: (
+              <div className='flex items-center gap-2 overflow-hidden'>
+                {optionIcon}
+                <span className='truncate'>{item.name}</span>
+              </div>
+            ),
+            label: (
+              <div className='flex items-center gap-2 justify-between'>
+                <Space>
+                  {optionIcon}
+                  {item.name}
+                </Space>
+                <Space size={4}>
+                  {item.is_default && <Tag className='n9e-datasource-select-v3-default-tag'>{t('default')}</Tag>}
                   <span
                     style={{
                       color: 'var(--fc-text-4)',
@@ -77,21 +191,33 @@ export default function index(props: SelectProps & Props) {
                   >
                     {displayLabel}
                   </span>
-                </div>
-              ),
-              value: item.id,
-            };
-          }),
-        ]}
-        onChange={(value) => {
-          if (onChange) {
-            const curCate = _.find(currentDatasourceList, { id: value })?.plugin_type;
-            onChange(value, curCate ?? (value === 'mixed' ? 'mixed' : ''));
-          }
-        }}
-        onClear={onClear}
-        allowClear={!!onClear}
-      />
+                  {renderOptionExtra?.(item)}
+                </Space>
+              </div>
+            ),
+            value: item.id,
+            disabled: isOptionDisabled?.(item),
+          };
+        }),
+      ]}
+      onChange={(value) => {
+        if (onChange) {
+          const selectedValue = Array.isArray(value) ? value.map(getRawValue) : getRawValue(value);
+          const curValue = Array.isArray(selectedValue) ? _.last(selectedValue) : selectedValue;
+          const curCate = _.find(currentDatasourceList, { id: curValue })?.plugin_type;
+          onChange(selectedValue, curCate ?? (selectedValue === 'mixed' ? 'mixed' : ''));
+        }
+      }}
+      onClear={onClear}
+      allowClear={!!onClear}
+    />
+  );
+
+  if (!showEmptyDatasourcePopover) return select;
+
+  return (
+    <EmptyDatasourcePopover type={type} datasourceList={currentDatasourceList}>
+      {select}
     </EmptyDatasourcePopover>
   );
 }
diff --git a/src/components/DatasourceSelect/DatasourceSelectV3/style.less b/src/components/DatasourceSelect/DatasourceSelectV3/style.less
index 90e24c3b67..bd60f51c27 100644
--- a/src/components/DatasourceSelect/DatasourceSelectV3/style.less
+++ b/src/components/DatasourceSelect/DatasourceSelectV3/style.less
@@ -1,9 +1,35 @@
 .n9e-datasource-select-v3 {
+  &-default-tag.ant-tag {
+    margin-right: 0;
+    color: var(--fc-violet-11);
+    background-color: var(--fc-violet-3);
+    border: none;
+    border-radius: 4px;
+  }
+
   .ant-select-selection-search-input {
+    text-indent: 0 !important;
+  }
+
+  &-has-value .ant-select-selection-search-input {
     text-indent: 24px !important;
   }
 
   .ant-select-selector .ant-select-selection-item {
     transition: unset !important;
   }
-}
\ No newline at end of file
+
+  &.ant-select-open .ant-select-selection-item img {
+    opacity: 0.45;
+    transition: opacity 0.3s;
+  }
+
+  &-deleted-value {
+    color: var(--fc-red-11);
+    text-decoration: line-through;
+
+    .anticon {
+      margin-right: 4px;
+    }
+  }
+}
diff --git a/src/components/DatasourceSelect/index.tsx b/src/components/DatasourceSelect/index.tsx
index c3fef6492a..2e09c23bff 100644
--- a/src/components/DatasourceSelect/index.tsx
+++ b/src/components/DatasourceSelect/index.tsx
@@ -6,6 +6,8 @@ import DatasourceSelect from './DatasourceSelect';
 import DatasourceCateSelectV2 from './DatasourceCateSelectV2';
 import DatasourceSelectV2 from './DatasourceSelectV2';
 import DatasourceSelectV3 from './DatasourceSelectV3';
+import type { DatasourceItem } from './DatasourceSelectV3';
 
 import './locale';
 export { DatasourceCateSelect, ProSvg, ProdSelect, DatasourceSelect, DatasourceCateSelectV2, DatasourceSelectV2, DatasourceSelectV3 };
+export type { DatasourceItem };
diff --git a/src/components/DatasourceSelect/locale/en_US.ts b/src/components/DatasourceSelect/locale/en_US.ts
index 2e83f4cdd7..da438a6bb8 100644
--- a/src/components/DatasourceSelect/locale/en_US.ts
+++ b/src/components/DatasourceSelect/locale/en_US.ts
@@ -2,5 +2,7 @@ const en_US = {
   type: 'Data source type',
   id: 'Data source',
   allCates: 'All types',
+  deleted: 'Deleted',
+  default: 'Default',
 };
 export default en_US;
diff --git a/src/components/DatasourceSelect/locale/ja_JP.ts b/src/components/DatasourceSelect/locale/ja_JP.ts
index 0856098148..b57e4aaa3f 100644
--- a/src/components/DatasourceSelect/locale/ja_JP.ts
+++ b/src/components/DatasourceSelect/locale/ja_JP.ts
@@ -2,5 +2,7 @@ const ja_JP = {
   type: 'データソースタイプ',
   id: 'データソースID',
   allCates: 'すべてのタイプ',
+  deleted: '削除済み',
+  default: 'デフォルト',
 };
 export default ja_JP;
diff --git a/src/components/DatasourceSelect/locale/ru_RU.ts b/src/components/DatasourceSelect/locale/ru_RU.ts
index 58a105ee20..f5216f6e02 100644
--- a/src/components/DatasourceSelect/locale/ru_RU.ts
+++ b/src/components/DatasourceSelect/locale/ru_RU.ts
@@ -2,6 +2,8 @@ const ru_RU = {
   type: 'Тип источника данных',
   id: 'Связанный источник данных',
   allCates: 'Все типы',
+  deleted: 'Удален',
+  default: 'По умолчанию',
 };
 
 export default ru_RU;
diff --git a/src/components/DatasourceSelect/locale/zh_CN.ts b/src/components/DatasourceSelect/locale/zh_CN.ts
index 4583c7c27a..1465f3d36d 100644
--- a/src/components/DatasourceSelect/locale/zh_CN.ts
+++ b/src/components/DatasourceSelect/locale/zh_CN.ts
@@ -2,5 +2,7 @@ const zh_CN = {
   type: '数据源类型',
   id: '关联数据源',
   allCates: '全部类型',
+  deleted: '已删除',
+  default: '默认',
 };
 export default zh_CN;
diff --git a/src/components/DatasourceSelect/locale/zh_HK.ts b/src/components/DatasourceSelect/locale/zh_HK.ts
index 498937d404..f1fcd2e8a5 100644
--- a/src/components/DatasourceSelect/locale/zh_HK.ts
+++ b/src/components/DatasourceSelect/locale/zh_HK.ts
@@ -2,6 +2,8 @@ const zh_HK = {
   type: '數據源類型',
   id: '關聯數據源',
   allCates: '全部類型',
+  deleted: '已刪除',
+  default: '預設',
 };
 
 export default zh_HK;
diff --git a/src/components/DatasourceSelect/style.less b/src/components/DatasourceSelect/style.less
index 8f7fb3a0de..1bc0eb38fc 100644
--- a/src/components/DatasourceSelect/style.less
+++ b/src/components/DatasourceSelect/style.less
@@ -8,7 +8,7 @@
   font-size: 12px;
   font-weight: bolder;
   line-height: 1;
-  transform: scale(0.8)
+  transform: scale(0.8);
 }
 .n9e-pro-tag-selected {
   border: 1px solid #fff;
@@ -34,4 +34,4 @@
   .n9e-db-cate-grid-item-selected {
     border: 1px solid var(--fc-primary-color);
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/alertRules/Form/components/DatasourceValueSelect/index.tsx b/src/pages/alertRules/Form/components/DatasourceValueSelect/index.tsx
index a9344be6e2..e6e9a785f5 100644
--- a/src/pages/alertRules/Form/components/DatasourceValueSelect/index.tsx
+++ b/src/pages/alertRules/Form/components/DatasourceValueSelect/index.tsx
@@ -14,14 +14,16 @@
  * limitations under the License.
  *
  */
-import React, { useEffect, useState } from 'react';
-import { Form, Select } from 'antd';
-import { WarningOutlined } from '@ant-design/icons';
+import React, { useContext, useEffect, useState } from 'react';
+import { Form } from 'antd';
+import { DatabaseOutlined, WarningOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
 import { Link } from 'react-router-dom';
 import { getDatasourceBriefList } from '@/services/common';
 import DatasourceSelectExtra from '@/pages/alertRules/Form/components/DatasourceSelectExtra';
+import { CommonStateContext } from '@/App';
+import { DatasourceSelectV3 } from '@/components/DatasourceSelect';
 
 export const DATASOURCE_ALL = 0;
 
@@ -52,6 +54,7 @@ const getInvalidDatasourceIds = (ids: number | number[], datasourceList: { id: n
 
 export default function index({ setFieldsValue, cate, datasourceList, mode, required = true, disabled, showExtra }: IProps) {
   const { t } = useTranslation('alertRules');
+  const { datasourceCateOptions } = useContext(CommonStateContext);
   const [fullDatasourceList, setFullDatasourceList] = useState<any[]>([]);
   const datasourceIds = Form.useWatch('datasource_ids');
   const invalidDatasourceIds = getInvalidDatasourceIds(datasourceIds, datasourceList, fullDatasourceList);
@@ -60,18 +63,6 @@ export default function index({ setFieldsValue, cate, datasourceList, mode, requ
       setFullDatasourceList(res);
     });
   };
-  let curDatasourceList = datasourceList;
-
-  if (cate === 'prometheus' || cate === 'loki') {
-    curDatasourceList = [
-      {
-        id: DATASOURCE_ALL,
-        name: '$all',
-      },
-      ...datasourceList,
-    ];
-  }
-
   useEffect(() => {
     fetchDatasourceList();
   }, []);
@@ -150,8 +141,32 @@ export default function index({ setFieldsValue, cate, datasourceList, mode, requ
           },
         ]}
       >
-        <Select
+        <DatasourceSelectV3
           mode={mode}
+          datasourceCateList={datasourceCateOptions}
+          ajustDatasourceList={(list) => _.filter(list, (item) => _.some(datasourceList, { id: item.id }))}
+          additionalOptions={
+            cate === 'prometheus' || cate === 'loki'
+              ? [
+                  {
+                    filter: t('all_datasources'),
+                    label: (
+                      <span className='flex items-center gap-2'>
+                        <DatabaseOutlined style={{ fontSize: 16 }} />
+                        {t('all_datasources')}
+                      </span>
+                    ),
+                    optionLabel: (
+                      <span className='flex items-center gap-2'>
+                        <DatabaseOutlined style={{ fontSize: 16 }} />
+                        {t('all_datasources')}
+                      </span>
+                    ),
+                    value: DATASOURCE_ALL,
+                  },
+                ]
+              : undefined
+          }
           onChange={(v: number[] | number) => {
             if (_.isArray(v)) {
               const curVal = _.last(v);
@@ -164,16 +179,8 @@ export default function index({ setFieldsValue, cate, datasourceList, mode, requ
           }}
           maxTagCount='responsive'
           disabled={disabled}
-          showSearch
-          optionFilterProp='children'
           style={{ width: '100%' }}
-        >
-          {_.map(curDatasourceList, (item) => (
-            <Select.Option value={item.id} key={item.id}>
-              {item.name}
-            </Select.Option>
-          ))}
-        </Select>
+        />
       </Form.Item>
       {showExtra && (
         <Form.Item label=' '>
diff --git a/src/pages/alertRules/FormNG/components/DatasourceValueSelect/index.tsx b/src/pages/alertRules/FormNG/components/DatasourceValueSelect/index.tsx
index 4792d72437..8b2fbe7cb1 100644
--- a/src/pages/alertRules/FormNG/components/DatasourceValueSelect/index.tsx
+++ b/src/pages/alertRules/FormNG/components/DatasourceValueSelect/index.tsx
@@ -25,12 +25,13 @@ import { Link } from 'react-router-dom';
 import { getDatasourceBriefList } from '@/services/common';
 import { IS_ENT } from '@/utils/constant';
 import DatasourceSelectExtra from '@/pages/alertRules/Form/components/DatasourceSelectExtra';
+import { DatasourceSelectV3, DatasourceItem } from '@/components/DatasourceSelect';
 
 import { getDatasourcesByQueries } from './services';
 import './style.less';
 
 interface IProps {
-  datasourceList: { id: number; name: string }[];
+  datasourceList: DatasourceItem[];
   reloadGroupedDatasourceList: () => void;
   datasourceCate?: string;
   names?: string[];
@@ -154,19 +155,23 @@ function Query({ idx, names, field, remove, invalidDatasourceIds, datasourceList
                 },
               ]}
             >
-              <Select
-                disabled={disabled}
-                mode={match_type === 0 ? 'multiple' : 'tags'}
-                tokenSeparators={[' ']}
-                open={match_type === 1 ? false : undefined}
-                options={_.map(datasourceList, (item) => {
-                  return {
-                    value: item.id,
-                    label: item.name,
-                  };
-                })}
-                optionFilterProp='label'
-              />
+              {match_type === 0 ? (
+                <DatasourceSelectV3 datasourceList={datasourceList} disabled={disabled} mode='multiple' style={{ width: '100%' }} />
+              ) : (
+                <Select
+                  disabled={disabled}
+                  mode='tags'
+                  tokenSeparators={[' ']}
+                  open={false}
+                  options={_.map(datasourceList, (item) => {
+                    return {
+                      value: item.id,
+                      label: item.name,
+                    };
+                  })}
+                  optionFilterProp='label'
+                />
+              )}
             </Form.Item>
           </Col>
         </>
diff --git a/src/pages/alertRules/List/ListNG.tsx b/src/pages/alertRules/List/ListNG.tsx
index 5edf7737e2..2d4a7070ae 100644
--- a/src/pages/alertRules/List/ListNG.tsx
+++ b/src/pages/alertRules/List/ListNG.tsx
@@ -12,7 +12,7 @@ import { CommonStateContext } from '@/App';
 import { updateAlertRules, deleteStrategy } from '@/services/warning';
 import { allCates, getCateDisplayLabel } from '@/components/AdvancedWrap/utils';
 import RefreshIcon from '@/components/RefreshIcon';
-import DatasourceSelect from '@/components/DatasourceSelect/DatasourceSelect';
+import { DatasourceSelectV3 } from '@/components/DatasourceSelect';
 import TableColumnSelect, { getDefaultColumnsConfigs, setDefaultColumnsConfigs, buildColumnOptions } from '@/components/TableColumnSelect';
 import usePagination from '@/components/usePagination';
 import Tags from '@/components/TableTags/Tags';
@@ -63,7 +63,7 @@ interface Props {
 
 export default function AlertRules(props: Props) {
   const { t, i18n } = useTranslation('alertRules');
-  const { busiGroups, datasourceList, feats } = useContext(CommonStateContext);
+  const { busiGroups, datasourceList, datasourceCateOptions, feats } = useContext(CommonStateContext);
   const { hideBusinessGroupColumn, showRowSelection, readonly, headerExtra, data, loading, setRefreshFlag, linkTarget, emptyGuide, gids, groupSwitchCount } = props;
   const history = useHistory();
   const location = useLocation();
@@ -411,11 +411,14 @@ export default function AlertRules(props: Props) {
               fetchData();
             }}
           />
-          <DatasourceSelect
-            style={{ minWidth: 100 }}
+          <DatasourceSelectV3
+            style={{ width: 100 }}
             filterKey='alertRule'
-            disableResponsive
             showHost
+            mode='multiple'
+            maxTagCount='responsive'
+            placeholder={t('common:datasource.name')}
+            datasourceCateList={datasourceCateOptions}
             value={filter.datasourceIds}
             onChange={(val) => {
               const newFilter = {
@@ -424,6 +427,12 @@ export default function AlertRules(props: Props) {
               };
               handleFilterChange(newFilter);
             }}
+            onClear={() => {
+              handleFilterChange({
+                ...filter,
+                datasourceIds: undefined,
+              });
+            }}
           />
           <Select
             mode='multiple'
diff --git a/src/pages/alertRules/locale/en_US.ts b/src/pages/alertRules/locale/en_US.ts
index d2b24ba9c7..2532d4e0cb 100644
--- a/src/pages/alertRules/locale/en_US.ts
+++ b/src/pages/alertRules/locale/en_US.ts
@@ -150,6 +150,7 @@ const en_US = {
   invalid_datasource_tip_1: 'Data sources',
   invalid_datasource_tip_2: 'are not associated with any alerting engine cluster',
   invalid_datasource_reload: 'Reload',
+  all_datasources: 'All data sources',
   advanced_settings: 'Advanced settings',
   host: {
     query: {
diff --git a/src/pages/alertRules/locale/ja_JP.ts b/src/pages/alertRules/locale/ja_JP.ts
index 054aff1bfc..2767e66467 100644
--- a/src/pages/alertRules/locale/ja_JP.ts
+++ b/src/pages/alertRules/locale/ja_JP.ts
@@ -154,6 +154,7 @@ const ja_JP = {
   invalid_datasource_tip_1: 'データソース',
   invalid_datasource_tip_2: '関連するアラートエンジンクラスタが設定されていません',
   invalid_datasource_reload: 'データソースをリロード',
+  all_datasources: 'すべてのデータソース',
   advanced_settings: '補助設定',
   host: {
     query: {
diff --git a/src/pages/alertRules/locale/ru_RU.ts b/src/pages/alertRules/locale/ru_RU.ts
index 6973796f1a..9829820079 100644
--- a/src/pages/alertRules/locale/ru_RU.ts
+++ b/src/pages/alertRules/locale/ru_RU.ts
@@ -152,6 +152,7 @@ const ru_RU = {
   invalid_datasource_tip_1: 'Источник данных',
   invalid_datasource_tip_2: 'Не настроен связанный кластер движка оповещений',
   invalid_datasource_reload: 'Обновить источник данных',
+  all_datasources: 'Все источники данных',
   advanced_settings: 'Дополнительные настройки',
   host: {
     query: {
diff --git a/src/pages/alertRules/locale/zh_CN.ts b/src/pages/alertRules/locale/zh_CN.ts
index 9ab0a26b58..93cb0b959b 100644
--- a/src/pages/alertRules/locale/zh_CN.ts
+++ b/src/pages/alertRules/locale/zh_CN.ts
@@ -152,6 +152,7 @@ const zh_CN = {
   invalid_datasource_tip_1: '数据源',
   invalid_datasource_tip_2: '存在未配置关联告警引擎集群的数据源',
   invalid_datasource_reload: '刷新数据源',
+  all_datasources: '全部数据源',
   advanced_settings: '辅助配置',
   host: {
     query: {
diff --git a/src/pages/alertRules/locale/zh_HK.ts b/src/pages/alertRules/locale/zh_HK.ts
index 5dff0d3e8b..b6e283d963 100644
--- a/src/pages/alertRules/locale/zh_HK.ts
+++ b/src/pages/alertRules/locale/zh_HK.ts
@@ -152,6 +152,7 @@ const zh_HK = {
   invalid_datasource_tip_1: '數據源',
   invalid_datasource_tip_2: '未配置關聯告警引擎集群',
   invalid_datasource_reload: '刷新數據源',
+  all_datasources: '全部數據源',
   advanced_settings: '輔助配置',
   host: {
     query: {
diff --git a/src/pages/historyEvents/ListNG/index.tsx b/src/pages/historyEvents/ListNG/index.tsx
index 844e241ca3..a332fd7ffd 100644
--- a/src/pages/historyEvents/ListNG/index.tsx
+++ b/src/pages/historyEvents/ListNG/index.tsx
@@ -13,7 +13,7 @@ import { useHistory, useLocation } from 'react-router-dom';
 import RefreshIcon from '@/components/RefreshIcon';
 import { CommonStateContext } from '@/App';
 import { getProdOptions } from '@/pages/alertRules/Form/components/ProdSelect';
-import DatasourceSelect from '@/components/DatasourceSelect/DatasourceSelect';
+import { DatasourceSelectV3 } from '@/components/DatasourceSelect';
 import TimeRangePicker, { parseRange } from '@/components/TimeRangePicker';
 import { IS_ENT, IS_PLUS } from '@/utils/constant';
 import getTextWidth from '@/utils/getTextWidth';
@@ -60,7 +60,7 @@ interface Props {
 const Event = (props: Props) => {
   const { t } = useTranslation('AlertHisEvents');
   const history = useHistory();
-  const { feats, datasourceList, profile } = useContext(CommonStateContext);
+  const { feats, datasourceList, datasourceCateOptions, profile } = useContext(CommonStateContext);
   const {
     hideHeader = false,
     hideTimeRangePicker = false,
@@ -295,9 +295,13 @@ const Event = (props: Props) => {
                 );
               })}
             </Select>
-            <DatasourceSelect
+            <DatasourceSelectV3
               style={{ width: 100 }}
               filterKey='alertRule'
+              mode='multiple'
+              maxTagCount='responsive'
+              placeholder={t('common:datasource.name')}
+              datasourceCateList={datasourceCateOptions}
               value={filter.datasource_ids}
               onChange={(val: number[]) => {
                 setFilter({
@@ -305,6 +309,12 @@ const Event = (props: Props) => {
                   datasource_ids: val,
                 });
               }}
+              onClear={() => {
+                setFilter({
+                  ...filter,
+                  datasource_ids: undefined,
+                });
+              }}
             />
             <BusinessGroupSelectWithAll
               value={filter.bgid}
diff --git a/src/pages/metricsBuiltin/components/Filters/FormModal.tsx b/src/pages/metricsBuiltin/components/Filters/FormModal.tsx
index 4667fa746a..ddcea39ea5 100644
--- a/src/pages/metricsBuiltin/components/Filters/FormModal.tsx
+++ b/src/pages/metricsBuiltin/components/Filters/FormModal.tsx
@@ -21,6 +21,7 @@ import { Modal, Form, Input, Select, Space, message } from 'antd';
 import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
 import { getLabels } from '@/services/metricViews';
 import { CommonStateContext } from '@/App';
+import { DatasourceSelectV3 } from '@/components/DatasourceSelect';
 import { getTeamInfoList } from '@/services/manage';
 import { postFilter, putFilter } from '../../services';
 import Filter from './Filter';
@@ -35,7 +36,7 @@ interface IProps {
 
 export default function FormModal(props: IProps) {
   const { t } = useTranslation('metricsBuiltin');
-  const { groupedDatasourceList } = useContext(CommonStateContext);
+  const { datasourceCateOptions } = useContext(CommonStateContext);
   const { visible, onClose, action, initialValues, onOk } = props;
   const range = {
     start: 'now-12h',
@@ -114,16 +115,7 @@ export default function FormModal(props: IProps) {
           <Input />
         </Form.Item>
         <Form.Item label={t('filter.datasource')} name='datasourceValue' tooltip={t('filter.datasource_tip')}>
-          <Select
-            showSearch
-            optionFilterProp='label'
-            options={_.map(groupedDatasourceList?.prometheus, (item) => {
-              return {
-                label: item.name,
-                value: item.id,
-              };
-            })}
-          />
+          <DatasourceSelectV3 datasourceCateList={datasourceCateOptions} ajustDatasourceList={(list) => _.filter(list, { plugin_type: 'prometheus' })} />
         </Form.Item>
         <Form.List name='configs'>
           {(fields, { add, remove }) => (
diff --git a/src/pages/warning/shield/index.tsx b/src/pages/warning/shield/index.tsx
index 0599881125..f417f88f26 100644
--- a/src/pages/warning/shield/index.tsx
+++ b/src/pages/warning/shield/index.tsx
@@ -31,7 +31,7 @@ import { getBusiGroupsAlertMutes, deleteShields, updateShields } from '@/service
 import { shieldItem, strategyStatus } from '@/store/warningInterface';
 import BusinessGroupSideBarWithAll, { getDefaultGids } from '@/components/BusinessGroup/BusinessGroupSideBarWithAll';
 import RefreshIcon from '@/components/RefreshIcon';
-import { DatasourceSelect } from '@/components/DatasourceSelect';
+import { DatasourceSelectV3 } from '@/components/DatasourceSelect';
 import { CommonStateContext } from '@/App';
 import usePagination from '@/components/usePagination';
 import { getPageFromSearch, setPageInSearch, removePageFromSearch } from '@/utils/urlPage';
@@ -62,7 +62,7 @@ const Shield: React.FC = () => {
   const { t, i18n } = useTranslation('alertMutes');
   const history = useHistory();
   const location = useLocation();
-  const { datasourceList, groupedDatasourceList, businessGroup, busiGroups, darkMode } = useContext(CommonStateContext);
+  const { datasourceList, groupedDatasourceList, datasourceCateOptions, businessGroup, busiGroups, darkMode } = useContext(CommonStateContext);
   const [gids, setGids] = useState<string | undefined>(getDefaultGids(N9E_GIDS_LOCALKEY, businessGroup));
   let defaultFilter = {} as Filter;
   try {
@@ -364,9 +364,13 @@ const Shield: React.FC = () => {
                   refreshList();
                 }}
               />
-              <DatasourceSelect
+              <DatasourceSelectV3
                 style={{ width: 100 }}
                 filterKey='alertRule'
+                mode='multiple'
+                maxTagCount='responsive'
+                placeholder={t('common:datasource.name')}
+                datasourceCateList={datasourceCateOptions}
                 value={datasourceIds}
                 onChange={(val) => {
                   setDatasourceIds(val);
@@ -374,6 +378,12 @@ const Shield: React.FC = () => {
                   saveState({ datasourceIds: val });
                   history.replace({ pathname: location.pathname, search: setPageInSearch(location.search, 1) });
                 }}
+                onClear={() => {
+                  setDatasourceIds(undefined);
+                  setCurrent(1);
+                  saveState({ datasourceIds: undefined });
+                  history.replace({ pathname: location.pathname, search: setPageInSearch(location.search, 1) });
+                }}
               />
               <Input
                 value={query}
diff --git a/src/pages/warning/subscribe/ListNG.tsx b/src/pages/warning/subscribe/ListNG.tsx
index f64cc13be3..5c48efda00 100644
--- a/src/pages/warning/subscribe/ListNG.tsx
+++ b/src/pages/warning/subscribe/ListNG.tsx
@@ -11,8 +11,8 @@ import { subscribeItem } from '@/store/warningInterface/subscribe';
 import RefreshIcon from '@/components/RefreshIcon';
 import { CommonStateContext } from '@/App';
 import { priorityColor } from '@/utils/constant';
+import { DatasourceSelectV3 } from '@/components/DatasourceSelect';
 import { getAlertSeverityName } from '@/utils/alertSeverity';
-import { DatasourceSelect } from '@/components/DatasourceSelect';
 import { strategyStatus } from '@/store/warningInterface';
 import Tags from '@/components/TableTags/Tags';
 import EmptyGuide from '@/components/EmptyGuide';
@@ -63,7 +63,7 @@ const Subscribe = (props: Props) => {
   const { t, i18n } = useTranslation('alertSubscribes');
   const history = useHistory();
   const location = useLocation();
-  const { datasourceList, busiGroups, darkMode } = useContext(CommonStateContext);
+  const { datasourceList, datasourceCateOptions, busiGroups, darkMode } = useContext(CommonStateContext);
   const { hideBusinessGroupColumn, readonly, canCreate, headerExtra, data, loading, setRefreshFlag, linkTarget, gids, groupSwitchCount } = props;
   const [visibleColumns, setVisibleColumns] = useState<string[]>(() => getDefaultColumnsConfigs(defaultColumnsConfigs, LOCAL_STORAGE_KEY));
   const columnOptions = buildColumnOptions(defaultColumnsConfigs, t);
@@ -366,9 +366,13 @@ const Subscribe = (props: Props) => {
               refreshList();
             }}
           />
-          <DatasourceSelect
+          <DatasourceSelectV3
             style={{ width: 100 }}
             filterKey='alertRule'
+            mode='multiple'
+            maxTagCount='responsive'
+            placeholder={t('common:datasource.name')}
+            datasourceCateList={datasourceCateOptions}
             value={datasourceIds}
             onChange={(val) => {
               setDatasourceIds(val);
@@ -376,6 +380,12 @@ const Subscribe = (props: Props) => {
               saveState({ datasourceIds: val });
               history.replace({ pathname: location.pathname, search: setPageInSearch(location.search, 1) });
             }}
+            onClear={() => {
+              setDatasourceIds(undefined);
+              setCurrent(1);
+              saveState({ datasourceIds: undefined });
+              history.replace({ pathname: location.pathname, search: setPageInSearch(location.search, 1) });
+            }}
           />
           <Input
             style={{ minWidth: 400 }}