feat: PC端指数排序

app/components/MarketIndexAccordion.jsx

@@ -317,8 +317,8 @@ export default function MarketIndexAccordion({
     position: 'sticky',
     top: topMargin,
     zIndex: 10,
-    width: 'calc(100% + 24px)',
+    width: isMobile ? 'calc(100% + 24px)' : '100%',
-    marginLeft: -12,
+    marginLeft: isMobile ? -12 : 0,
   };
 
   if (loading && indices.length === 0) {
@@ -454,7 +454,11 @@ export default function MarketIndexAccordion({
               {visibleIndices.map((item, i) => (
                 <div
                   key={item.code || i}
-                  style={{ flex: '0 0 calc((100% - 24px) / 3)' }}
+                  style={{
+                    flex: isMobile
+                      ? '0 0 calc((100% - 24px) / 3)'
+                      : '0 0 calc((100% - 48px) / 5)',
+                  }}
                 >
                   <IndexCard item={item} />
                 </div>

app/components/MarketSettingModal.jsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
-import { AnimatePresence } from "framer-motion";
+import { createPortal } from "react-dom";
+import { AnimatePresence, motion } from "framer-motion";
 import {
   DndContext,
   KeyboardSensor,
@@ -25,18 +26,11 @@ import {
   DrawerTitle,
   DrawerClose,
 } from "@/components/ui/drawer";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogClose,
-} from "@/components/ui/dialog";
 import { CloseIcon, MinusIcon, ResetIcon, SettingsIcon } from "./Icons";
 import ConfirmModal from "./ConfirmModal";
 import { cn } from "@/lib/utils";
 
-function SortableIndexItem({ item, canRemove, onRemove }) {
+function SortableIndexItem({ item, canRemove, onRemove, isMobile }) {
   const {
     attributes,
     listeners,
@@ -50,7 +44,9 @@ function SortableIndexItem({ item, canRemove, onRemove }) {
     transform: CSS.Transform.toString(transform),
     transition,
     cursor: isDragging ? "grabbing" : "grab",
-    flex: "0 0 calc((100% - 24px) / 3)",
+    flex: isMobile
+      ? "0 0 calc((100% - 24px) / 3)"
+      : "0 0 calc((100% - 48px) / 5)",
     touchAction: "none",
     ...(isDragging && {
       position: "relative",
@@ -164,6 +160,19 @@ export default function MarketSettingModal({
 
   const [resetConfirmOpen, setResetConfirmOpen] = useState(false);
 
+  useEffect(() => {
+    if (!open) setResetConfirmOpen(false);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor)
@@ -244,6 +253,7 @@ export default function MarketSettingModal({
                     item={item}
                     canRemove={selectedCodes.length > 1}
                     onRemove={handleToggleCode}
+                    isMobile={isMobile}
                   />
                 ))}
               </div>
@@ -390,65 +400,75 @@ export default function MarketSettingModal({
     );
   }
 
-  return (
+  const pcContent = (
-    <Dialog
+    <AnimatePresence>
-      open={open}
+      {open && (
-      onOpenChange={(v) => {
+        <motion.div
-        if (!v) onClose?.();
+          key="market-index-setting-overlay"
-      }}
+          className="pc-table-setting-overlay"
-    >
+          role="dialog"
-      <DialogContent
+          aria-modal="true"
-        className="!p-0 max-w-xl"
+          aria-label="指数个性化设置"
-        overlayClassName="modal-overlay"
+          initial={{ opacity: 0 }}
-        showCloseButton={false}
+          animate={{ opacity: 1 }}
-      >
+          exit={{ opacity: 0 }}
-        <div className="glass card modal">
+          transition={{ duration: 0.2 }}
-          <DialogHeader
+          onClick={onClose}
-            className="flex flex-row items-center justify-between gap-2 mb-3"
+          style={{ zIndex: 10001 }}
+        >
+          <motion.aside
+            className="pc-market-setting-drawer pc-table-setting-drawer glass"
+            initial={{ x: "100%" }}
+            animate={{ x: 0 }}
+            exit={{ x: "100%" }}
+            transition={{ type: "spring", damping: 30, stiffness: 300 }}
+            onClick={(e) => e.stopPropagation()}
+            style={{ width: 690 }}
           >
-            <div className="flex items-center gap-2.5">
+            <div className="pc-table-setting-header">
-              <SettingsIcon width="20" height="20" />
+              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
-              <DialogTitle>指数个性化设置</DialogTitle>
+                <SettingsIcon width="20" height="20" />
-            </div>
+                <span>指数个性化设置</span>
-            <DialogClose asChild>
+              </div>
               <button
                 type="button"
-                className="icon-button border-none bg-transparent p-1"
+                className="icon-button"
+                onClick={onClose}
                 title="关闭"
+                style={{ border: "none", background: "transparent" }}
               >
                 <CloseIcon width="20" height="20" />
               </button>
-            </DialogClose>
+            </div>
-          </DialogHeader>
+            <div className="pc-table-setting-body">{body}</div>
-          <div
+          </motion.aside>
-            className="flex flex-col gap-4"
+        </motion.div>
-            style={{ maxHeight: "70vh", overflowY: "auto" }}
+      )}
-          >
+      {resetConfirmOpen && (
-            {body}
+        <ConfirmModal
-          </div>
+          key="pc-index-reset-confirm"
-        </div>
+          title="恢复默认指数"
-        {resetConfirmOpen && (
+          message="是否恢复已添加指数为默认配置？"
-          <ConfirmModal
+          icon={
-            title="恢复默认指数"
+            <ResetIcon
-            message="是否恢复已添加指数为默认配置？"
+              width="20"
-            icon={
+              height="20"
-              <ResetIcon
+              className="shrink-0 text-[var(--primary)]"
-                width="20"
+            />
-                height="20"
+          }
-                className="shrink-0 text-[var(--primary)]"
+          confirmVariant="primary"
-              />
+          confirmText="恢复默认"
-            }
+          onConfirm={() => {
-            confirmVariant="primary"
+            onResetDefault?.();
-            confirmText="恢复默认"
+            setResetConfirmOpen(false);
-            onConfirm={() => {
+          }}
-              onResetDefault?.();
+          onCancel={() => setResetConfirmOpen(false)}
-              setResetConfirmOpen(false);
+        />
-            }}
+      )}
-            onCancel={() => setResetConfirmOpen(false)}
+    </AnimatePresence>
-          />
-        )}
-      </DialogContent>
-    </Dialog>
   );
+
+  if (typeof document === "undefined") return null;
+  return createPortal(pcContent, document.body);
 }
 

app/globals.css

@@ -2032,6 +2032,11 @@ input[type="number"] {
   box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
 }
 
+/* 指数个性化设置侧弹框：加宽以一行展示 5 个指数卡片 */
+.pc-market-setting-drawer.pc-table-setting-drawer {
+  width: 560px;
+}
+
 .pc-table-setting-header {
   display: flex;
   align-items: center;