Fix: Optimize styling and add a search settings loading state #3221 (#9830)

### What problem does this PR solve?

Fix: Optimize styling and add a search settings loading state #3221

- Updated the calendar component's background color to use a variable
- Modified the Spin component's styling to use the primary text color
instead of black
- Added a form submission loading state to the search settings component
- Optimized the search settings form, unifying the styles of the model
selection and input fields

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

---------

Co-authored-by: Kevin Hu <[email protected]>

Author: dcc123456

web/src/components/originui/calendar/index.less

@@ -1,16 +1,16 @@
 .rdp-selected {
-  background-color: #f5f5f529;
+  background-color: var(--background-highlight);
 }
 .range-start {
-  background-color: #f5f5f5;
+  background-color: var(--text-secondary);
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   button {
     color: rgba(0, 0, 0, 0.8);
   }
 }
 .range-end {
-  background-color: #f5f5f5;
+  background-color: var(--text-secondary);
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   button {

web/src/components/ui/spin.tsx

@@ -25,14 +25,14 @@ export const Spin: React.FC<SpinProps> = ({
       className={cn(
         'relative',
         {
-          'after:content-[""] after:absolute after:inset-0 after:z-10 after:bg-black/40 after:transition-all after:duration-300':
+          'after:content-[""] after:absolute after:inset-0 after:z-10 after:bg-text-primary/40 after:transition-all after:duration-300 h-full w-full':
             spinning,
         },
         className,
       )}
     >
       {spinning && (
-        <div className="absolute inset-0 z-10 flex items-center justify-center bg-black/30 ">
+        <div className="absolute inset-0 z-10 flex items-center justify-center bg-text-primary/30 ">
           <div
             className={cn(
               'rounded-full border-muted-foreground border-2 border-t-transparent animate-spin',

web/src/pages/next-search/search-setting.tsx

@@ -21,6 +21,7 @@ import {
   MultiSelectOptionType,
 } from '@/components/ui/multi-select';
 import { RAGFlowSelect } from '@/components/ui/select';
+import { Spin } from '@/components/ui/spin';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import { useFetchKnowledgeList } from '@/hooks/knowledge-hooks';
@@ -226,11 +227,13 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
   });
 
   const { updateSearch } = useUpdateSearch();
+  const [formSubmitLoading, setFormSubmitLoading] = useState(false);
   const { data: systemSetting } = useFetchTenantInfo();
   const onSubmit = async (
     formData: IUpdateSearchProps & { tenant_id: string },
   ) => {
     try {
+      setFormSubmitLoading(true);
       const { search_config, ...other_formdata } = formData;
       const {
         llm_setting,
@@ -262,6 +265,8 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
       setOpen(false);
     } catch (error) {
       console.error('Failed to update search:', error);
+    } finally {
+      setFormSubmitLoading(false);
     }
   };
   return (
@@ -486,15 +491,16 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
                   render={({ field }) => (
                     <FormItem className="flex flex-col">
                       <FormLabel>
-                        <span className="text-destructive mr-1"> *</span>Model
+                        <span className="text-destructive mr-1"> *</span>
+                        {t('chat.model')}
                       </FormLabel>
                       <FormControl>
                         <RAGFlowSelect
                           {...field}
                           options={rerankModelOptions}
                           triggerClassName={'bg-bg-input'}
                           // disabled={disabled}
-                          placeholder={'model'}
+                          placeholder={t('chat.model')}
                         />
                       </FormControl>
                       <FormMessage />
@@ -523,6 +529,7 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
                         </FormControl>
                         <FormControl>
                           <Input
+                            type={'number'}
                             className="h-7 w-20 bg-bg-card"
                             max={2048}
                             min={0}
@@ -619,7 +626,14 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
               >
                 {t('search.cancelText')}
               </Button>
-              <Button type="submit">{t('search.okText')}</Button>
+              <Button type="submit" disabled={formSubmitLoading}>
+                {formSubmitLoading && (
+                  <div className="size-4">
+                    <Spin size="small" />
+                  </div>
+                )}
+                {t('search.okText')}
+              </Button>
             </div>
           </form>
         </Form>