From 07e0c70629fde62502393d00438232cd4a47b6ec Mon Sep 17 00:00:00 2001
From: zhaoying <yzhao96@best-inc.com>
Date: Fri, 27 Feb 2026 18:59:58 +0800
Subject: [PATCH] feat(web): create space storage type add recommend

---
 web/src/components/RadioGroupCard/index.tsx             | 7 ++++++-
 web/src/i18n/en.ts                                      | 1 +
 web/src/i18n/zh.ts                                      | 1 +
 web/src/views/SpaceManagement/components/SpaceModal.tsx | 8 ++++++--
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/web/src/components/RadioGroupCard/index.tsx b/web/src/components/RadioGroupCard/index.tsx
index 41924c61..e09466cd 100644
--- a/web/src/components/RadioGroupCard/index.tsx
+++ b/web/src/components/RadioGroupCard/index.tsx
@@ -20,6 +20,7 @@
 import { type FC, type Key, type ReactNode, useEffect } from 'react';
 import { type RadioGroupProps } from 'antd';
 import clsx from 'clsx'
+import { useTranslation } from 'react-i18next';
 
 /** Radio card option interface */
 interface RadioCardOption {
@@ -33,6 +34,8 @@ interface RadioCardOption {
   icon?: string;
   /** Whether the option is disabled */
   disabled?: boolean;
+  /** Whether the option is recommended */
+  recommend?: boolean;
   /** Additional properties */
   [key: string]: string | number | boolean | undefined | null | Key;
 }
@@ -63,6 +66,7 @@ const RadioGroupCard: FC<RadioCardProps> = ({
   allowClear = true,
   block = false,
 }) => {
+  const { t } = useTranslation();
   /** Listen to value changes and trigger side effects via onValueChange callback */
   useEffect(() => {
     if (onValueChange) {
@@ -91,12 +95,13 @@ const RadioGroupCard: FC<RadioCardProps> = ({
     })}>
       {/* Render each option as a selectable card */}
       {options.map(option => (
-        <div key={String(option.value)} className={clsx("rb:border rb:rounded-lg rb:w-full rb:p-[20px_12px] rb:text-center rb:cursor-pointer", {
+        <div key={String(option.value)} className={clsx("rb:relative rb:border rb:rounded-lg rb:w-full rb:p-[20px_12px] rb:text-center rb:cursor-pointer", {
           'rb:bg-[rgba(21,94,239,0.06)] rb:border-[#155EEF]': option.value === value,
           'rb:border-[#EBEBEB] rb:bg-[#ffffff]': option.value !== value,
           'rb:opacity-[0.75]': option.disabled,
           'rb:flex rb:items-center rb:text-left rb:gap-4': block,
         })} onClick={() => handleChange(option)}>
+          {option.recommend && <div className="rb:absolute rb:right-0 rb:top-0 rb:bg-[#FF5D34] rb:rounded-[0px_7px_0px_8px] rb:text-[12px] rb:text-white rb:font-regular rb:leading-4 rb:p-[4px_8px]">{t('common.recommend')}</div>}
           {/* Use custom render or default card layout */}
           {itemRender ? itemRender(option) : (
             <>
diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts
index 8dfb68db..f2b4eaa4 100644
--- a/web/src/i18n/en.ts
+++ b/web/src/i18n/en.ts
@@ -452,6 +452,7 @@ export const en = {
       nextStep: 'Next Step',
       prevStep: 'Previous Step',
       exportSuccess: 'Export successful',
+      recommend: 'Recommend',
     },
     model: {
       searchPlaceholder: 'search model…',
diff --git a/web/src/i18n/zh.ts b/web/src/i18n/zh.ts
index feefc843..e2e7082a 100644
--- a/web/src/i18n/zh.ts
+++ b/web/src/i18n/zh.ts
@@ -1019,6 +1019,7 @@ export const zh = {
       nextStep: '下一步',
       prevStep: '上一步',
       exportSuccess: '导出成功',
+      recommend: '推荐',
     },
     model: {
       searchPlaceholder: '搜索模型…',
diff --git a/web/src/views/SpaceManagement/components/SpaceModal.tsx b/web/src/views/SpaceManagement/components/SpaceModal.tsx
index a0703d81..4f37b246 100644
--- a/web/src/views/SpaceManagement/components/SpaceModal.tsx
+++ b/web/src/views/SpaceManagement/components/SpaceModal.tsx
@@ -34,8 +34,8 @@ interface SpaceModalProps {
 }
 /** Storage types */
 const types: StorageType[] = [
-  'rag',
   'neo4j',
+  'rag',
 ]
 /** Type icons mapping */
 const typeIcons: Record<StorageType, string> = {
@@ -154,6 +154,9 @@ const SpaceModal = forwardRef<SpaceModalRef, SpaceModalProps>(({
       <Form
         form={form}
         layout="vertical"
+        initialValues={{
+          storage_type: types[0],
+        }}
       >
         <Form.Item
           name="icon"
@@ -183,7 +186,8 @@ const SpaceModal = forwardRef<SpaceModalRef, SpaceModalProps>(({
               value: type,
               label: t(`space.${type}`),
               labelDesc: t(`space.${type}Desc`),
-              icon: typeIcons[type]
+              icon: typeIcons[type],
+              recommend: type === 'neo4j',
             }))}
             block={true}
           />