feat: update model market

app/src/assets/pages/home.less

@@ -11,12 +11,26 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 1rem 3.5rem;
-  height: max-content;
-  max-height: calc(100% - 56px);
+  padding: 0 3.5rem;
+  height: 100%;
   overflow: auto;
   scrollbar-width: thin;
 
+  &:before {
+    --line: hsl(var(--text-secondary) / 0.25);
+    content: "";
+    height: 100vh;
+    width: 100vw;
+    position: fixed;
+    background:
+            linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin,
+            linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin;
+    mask: linear-gradient(-15deg, transparent 50%, white);
+    top: 0;
+    z-index: -1;
+    transform: rotate(180deg);
+  }
+
   .market-wrapper {
     width: 100%;
     height: 100%;
@@ -25,7 +39,7 @@
   }
 
   @media (max-width: 768px) {
-    padding: 1rem;
+    padding: 0 1rem;
   }
 
   .title {
@@ -241,7 +255,8 @@
         flex-shrink: 0;
         margin-right: 0.25rem;
         padding: 0.125rem 0.45rem;
-        background: hsl(var(--input));
+        border: 1px solid hsl(var(--text-secondary) / 0.25);
+        background: hsl(var(--background));
         border-radius: 4px;
         font-size: 12px;
         margin-bottom: 0.25rem;
@@ -261,6 +276,7 @@
     position: relative;
     width: 100%;
     height: max-content;
+    margin-top: 1.5rem;
 
     .close-action {
       position: absolute;
@@ -269,7 +285,7 @@
 
   .market-footer {
     margin-top: 3rem;
-    margin-bottom: .5rem;
+    margin-bottom: 2.5rem;
     user-select: none;
     padding: 0 1rem;
 

app/src/components/home/ModelMarket.tsx

@@ -25,6 +25,7 @@ import {
   selectModelList,
   selectSupportModels,
   setModel,
+  setSupportModels,
 } from "@/store/chat.ts";
 import { Button } from "@/components/ui/button.tsx";
 import { levelSelector } from "@/store/subscription.ts";
@@ -59,6 +60,7 @@ import {
   timesBilling,
   tokenBilling,
 } from "@/admin/charge.ts";
+import { ScrollArea } from "@/components/ui/scroll-area.tsx";
 
 type SearchBarProps = {
   value: string;
@@ -290,6 +292,7 @@ function MarketPlace({ search }: MarketPlaceProps) {
   const { t } = useTranslation();
   const select = useSelector(selectModel);
   const supportModels = useSelector(selectSupportModels);
+  const dispatch = useDispatch();
 
   const models = useMemo(() => {
     if (search.length === 0) return supportModels;
@@ -340,13 +343,13 @@ function MarketPlace({ search }: MarketPlaceProps) {
     const [removed] = list.splice(from, 1);
     list.splice(to, 0, removed);
 
-    supportModels.splice(0, supportModels.length, ...list);
-    savePreferenceModels(supportModels);
+    dispatch(setSupportModels(list));
+    savePreferenceModels(list);
   };
 
   return (
     <DragDropContext onDragEnd={onDragEnd}>
-      <Droppable droppableId={`model-market`}>
+      <Droppable droppableId={`model-market-droppable`}>
         {(provided) => (
           <div
             className={`model-list`}
@@ -414,14 +417,14 @@ function ModelMarket() {
   const [search, setSearch] = useState<string>("");
 
   return (
-    <div className={`model-market`}>
+    <ScrollArea className={`model-market`}>
       <div className={`market-wrapper`}>
         <MarketHeader />
         <SearchBar value={search} onChange={setSearch} />
         <MarketPlace search={search} />
         <MarketFooter />
       </div>
-    </div>
+    </ScrollArea>
   );
 }
 

app/src/utils/dom.ts

@@ -123,7 +123,7 @@ export function useDraggableInput(
   const dragOver = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
-  }
+  };
 
   const drop = (e: DragEvent) => {
     e.preventDefault();
@@ -132,7 +132,7 @@ export function useDraggableInput(
     const files = e.dataTransfer?.files || ([] as File[]);
     if (!files.length) return;
     handleChange(Array.from(files));
-  }
+  };
 
   target.addEventListener("dragover", dragOver);
   target.addEventListener("drop", drop);
@@ -140,7 +140,7 @@ export function useDraggableInput(
   return () => {
     target.removeEventListener("dragover", dragOver);
     target.removeEventListener("drop", drop);
-  }
+  };
 }
 
 export function testNumberInputEvent(e: any): boolean {