使用classname代替style

dashboard-v4/dashboard/src/components/template/SentEdit.tsx

@@ -1,4 +1,4 @@
-import { Affix, Card } from "antd";
+import { Affix } from "antd";
 import { useEffect, useRef, useState } from "react";
 import { IStudio } from "../auth/Studio";
 
@@ -14,6 +14,7 @@ import { TChannelType } from "../api/Channel";
 import { useAppSelector } from "../../hooks";
 import { currFocus } from "../../reducers/focus";
 import { ISentenceData } from "../api/Corpus";
+import "./SentEdit/style.css";
 
 export interface IResNumber {
   translation?: number;
@@ -210,23 +211,13 @@ export const SentEditInner = ({
   );
 
   return (
-    <Card
+    <div
       ref={divRef}
-      bodyStyle={{ paddingBottom: 0, paddingLeft: 0, paddingRight: 0 }}
-      style={{
-        border: isFocus
-          ? "2px solid rgb(0 0 200 / 50%)"
-          : "1px solid rgb(128 128 128 / 10%)",
-        marginTop: 4,
-        borderRadius: 6,
-        backgroundColor: "rgb(255 255 255 / 8%)",
-        width: "100%",
-      }}
-      size="small"
+      className={`sent-edit-inner` + (isFocus ? " sent-focus" : "")}
     >
       {affix ? (
         <Affix offsetTop={44}>
-          <div style={{ backgroundColor: "white" }}>{content}</div>
+          <div className="affix">{content}</div>
         </Affix>
       ) : (
         content
@@ -258,7 +249,7 @@ export const SentEditInner = ({
         onModeChange={(value: ArticleMode | undefined) => setArticleMode(value)}
         onAffix={() => setAffix(!affix)}
       />
-    </Card>
+    </div>
   );
 };
 

dashboard-v4/dashboard/src/components/template/SentEdit/SentTab.tsx

@@ -101,140 +101,128 @@ const SentTabWidget = ({
     : undefined;
 
   return (
-    <div className="sent_block">
-      <Tabs
-        onMouseEnter={() => setHover(true)}
-        onMouseLeave={() => setHover(false)}
-        activeKey={currKey}
-        type="card"
-        onChange={(activeKey: string) => {
-          setCurrKey(activeKey);
-        }}
-        style={
-          isCompact
-            ? {
-                position: currKey === "close" ? "absolute" : "unset",
-                marginTop: -32,
-                width: "100%",
-                marginRight: 10,
-                backgroundColor:
-                  hover || currKey !== "close"
-                    ? "rgba(128, 128, 128, 0.1)"
-                    : "unset",
+    <Tabs
+      className={
+        "sent_tabs" +
+        (isCompact ? " compact" : "") +
+        (currKey === "close" ? " curr_close" : "")
+      }
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      activeKey={currKey}
+      type="card"
+      onChange={(activeKey: string) => {
+        setCurrKey(activeKey);
+      }}
+      tabBarStyle={{ marginBottom: 0 }}
+      size="small"
+      tabBarGutter={0}
+      tabBarExtraContent={
+        <Space>
+          <TocPath
+            link="none"
+            data={mPath}
+            channels={channelsId}
+            trigger={path ? path.length > 0 ? path[0].title : <></> : <></>}
+          />
+          <Text>{sentId[0]}</Text>
+          <SentTabCopy wbwData={wbwData} text={`{{${sentId[0]}}}`} />
+          <SentMenu
+            book={book}
+            para={para}
+            loading={magicDictLoading}
+            mode={mode}
+            onMagicDict={(type: string) => {
+              if (typeof onMagicDict !== "undefined") {
+                onMagicDict(type);
               }
-            : {
-                padding: "0 8px",
-                backgroundColor: "rgba(128, 128, 128, 0.1)",
+            }}
+            onMenuClick={(key: string) => {
+              switch (key) {
+                case "compact":
+                  if (typeof onCompact !== "undefined") {
+                    setIsCompact(true);
+                    onCompact(true);
+                  }
+                  break;
+                case "normal":
+                  if (typeof onCompact !== "undefined") {
+                    setIsCompact(false);
+                    onCompact(false);
+                  }
+                  break;
+                case "origin-edit":
+                  if (typeof onModeChange !== "undefined") {
+                    onModeChange("edit");
+                  }
+                  break;
+                case "origin-wbw":
+                  if (typeof onModeChange !== "undefined") {
+                    onModeChange("wbw");
+                  }
+                  break;
+                case "copy-id":
+                  const id = `{{${book}-${para}-${wordStart}-${wordEnd}}}`;
+                  navigator.clipboard.writeText(id).then(() => {
+                    message.success("编号已经拷贝到剪贴板");
+                  });
+                  break;
+                case "copy-link":
+                  let link = `/article/para/${book}-${para}?mode=edit`;
+                  link += `&book=${book}&par=${para}`;
+                  if (channelsId) {
+                    link += `&channel=` + channelsId?.join("_");
+                  }
+                  link += `&focus=${book}-${para}-${wordStart}-${wordEnd}`;
+                  navigator.clipboard.writeText(fullUrl(link)).then(() => {
+                    message.success("链接地址已经拷贝到剪贴板");
+                  });
+                  break;
+                case "affix":
+                  if (typeof onAffix !== "undefined") {
+                    onAffix();
+                  }
+                  break;
+                default:
+                  break;
               }
-        }
-        tabBarStyle={{ marginBottom: 0 }}
-        size="small"
-        tabBarGutter={0}
-        tabBarExtraContent={
-          <Space>
-            <TocPath
-              link="none"
-              data={mPath}
-              channels={channelsId}
-              trigger={path ? path.length > 0 ? path[0].title : <></> : <></>}
-            />
-            <Text>{sentId[0]}</Text>
-            <SentTabCopy wbwData={wbwData} text={`{{${sentId[0]}}}`} />
-            <SentMenu
-              book={book}
-              para={para}
-              loading={magicDictLoading}
-              mode={mode}
-              onMagicDict={(type: string) => {
-                if (typeof onMagicDict !== "undefined") {
-                  onMagicDict(type);
-                }
-              }}
-              onMenuClick={(key: string) => {
-                switch (key) {
-                  case "compact":
-                    if (typeof onCompact !== "undefined") {
-                      setIsCompact(true);
-                      onCompact(true);
-                    }
-                    break;
-                  case "normal":
-                    if (typeof onCompact !== "undefined") {
-                      setIsCompact(false);
-                      onCompact(false);
-                    }
-                    break;
-                  case "origin-edit":
-                    if (typeof onModeChange !== "undefined") {
-                      onModeChange("edit");
-                    }
-                    break;
-                  case "origin-wbw":
-                    if (typeof onModeChange !== "undefined") {
-                      onModeChange("wbw");
-                    }
-                    break;
-                  case "copy-id":
-                    const id = `{{${book}-${para}-${wordStart}-${wordEnd}}}`;
-                    navigator.clipboard.writeText(id).then(() => {
-                      message.success("编号已经拷贝到剪贴板");
-                    });
-                    break;
-                  case "copy-link":
-                    let link = `/article/para/${book}-${para}?mode=edit`;
-                    link += `&book=${book}&par=${para}`;
-                    if (channelsId) {
-                      link += `&channel=` + channelsId?.join("_");
-                    }
-                    link += `&focus=${book}-${para}-${wordStart}-${wordEnd}`;
-                    navigator.clipboard.writeText(fullUrl(link)).then(() => {
-                      message.success("链接地址已经拷贝到剪贴板");
-                    });
-                    break;
-                  case "affix":
-                    if (typeof onAffix !== "undefined") {
-                      onAffix();
-                    }
-                    break;
-                  default:
-                    break;
-                }
-              }}
+            }}
+          />
+        </Space>
+      }
+      items={[
+        {
+          label: (
+            <span style={tabButtonStyle}>
+              <Badge size="small" count={0}>
+                <CloseOutlined />
+              </Badge>
+            </span>
+          ),
+          key: "close",
+          children: <></>,
+        },
+        {
+          label: (
+            <SentTabButton
+              style={tabButtonStyle}
+              icon={<TranslationOutlined />}
+              type="translation"
+              sentId={id}
+              count={
+                currTranNum
+                  ? currTranNum -
+                    (loadedRes?.translation ? loadedRes.translation : 0)
+                  : undefined
+              }
+              title={intl.formatMessage({
+                id: "channel.type.translation.label",
+              })}
             />
-          </Space>
-        }
-        items={[
-          {
-            label: (
-              <span style={tabButtonStyle}>
-                <Badge size="small" count={0}>
-                  <CloseOutlined />
-                </Badge>
-              </span>
-            ),
-            key: "close",
-            children: <></>,
-          },
-          {
-            label: (
-              <SentTabButton
-                style={tabButtonStyle}
-                icon={<TranslationOutlined />}
-                type="translation"
-                sentId={id}
-                count={
-                  currTranNum
-                    ? currTranNum -
-                      (loadedRes?.translation ? loadedRes.translation : 0)
-                    : undefined
-                }
-                title={intl.formatMessage({
-                  id: "channel.type.translation.label",
-                })}
-              />
-            ),
-            key: "translation",
-            children: (
+          ),
+          key: "translation",
+          children: (
+            <div className="content">
               <SentCanRead
                 book={parseInt(sId[0])}
                 para={parseInt(sId[1])}
@@ -244,155 +232,155 @@ const SentTabWidget = ({
                 channelsId={channelsId}
                 onCreate={() => setCurrTranNum((origin) => origin + 1)}
               />
-            ),
-          },
-          {
-            label: (
-              <SentTabButton
-                style={tabButtonStyle}
-                icon={<CloseOutlined />}
-                type="nissaya"
-                sentId={id}
-                count={
-                  currNissayaNum
-                    ? currNissayaNum -
-                      (loadedRes?.nissaya ? loadedRes.nissaya : 0)
-                    : undefined
-                }
-                title={intl.formatMessage({
-                  id: "channel.type.nissaya.label",
-                })}
-              />
-            ),
-            key: "nissaya",
-            children: (
-              <SentCanRead
-                book={parseInt(sId[0])}
-                para={parseInt(sId[1])}
-                wordStart={parseInt(sId[2])}
-                wordEnd={parseInt(sId[3])}
-                type="nissaya"
-                channelsId={channelsId}
-                onCreate={() => setCurrNissayaNum((origin) => origin + 1)}
-              />
-            ),
-          },
-          {
-            label: (
-              <SentTabButton
-                style={tabButtonStyle}
-                icon={<TranslationOutlined />}
-                type="commentary"
-                sentId={id}
-                count={
-                  currCommNum
-                    ? currCommNum -
-                      (loadedRes?.commentary ? loadedRes.commentary : 0)
-                    : undefined
+            </div>
+          ),
+        },
+        {
+          label: (
+            <SentTabButton
+              style={tabButtonStyle}
+              icon={<CloseOutlined />}
+              type="nissaya"
+              sentId={id}
+              count={
+                currNissayaNum
+                  ? currNissayaNum -
+                    (loadedRes?.nissaya ? loadedRes.nissaya : 0)
+                  : undefined
+              }
+              title={intl.formatMessage({
+                id: "channel.type.nissaya.label",
+              })}
+            />
+          ),
+          key: "nissaya",
+          children: (
+            <SentCanRead
+              book={parseInt(sId[0])}
+              para={parseInt(sId[1])}
+              wordStart={parseInt(sId[2])}
+              wordEnd={parseInt(sId[3])}
+              type="nissaya"
+              channelsId={channelsId}
+              onCreate={() => setCurrNissayaNum((origin) => origin + 1)}
+            />
+          ),
+        },
+        {
+          label: (
+            <SentTabButton
+              style={tabButtonStyle}
+              icon={<TranslationOutlined />}
+              type="commentary"
+              sentId={id}
+              count={
+                currCommNum
+                  ? currCommNum -
+                    (loadedRes?.commentary ? loadedRes.commentary : 0)
+                  : undefined
+              }
+              title={intl.formatMessage({
+                id: "channel.type.commentary.label",
+              })}
+            />
+          ),
+          key: "commentary",
+          children: (
+            <SentCanRead
+              book={parseInt(sId[0])}
+              para={parseInt(sId[1])}
+              wordStart={parseInt(sId[2])}
+              wordEnd={parseInt(sId[3])}
+              type="commentary"
+              channelsId={channelsId}
+              onCreate={() => setCurrCommNum((origin) => origin + 1)}
+            />
+          ),
+        },
+        {
+          label: (
+            <SentTabButton
+              icon={<BlockOutlined />}
+              type="original"
+              sentId={id}
+              count={originNum}
+              title={intl.formatMessage({
+                id: "channel.type.original.label",
+              })}
+            />
+          ),
+          key: "original",
+          children: (
+            <SentCanRead
+              book={parseInt(sId[0])}
+              para={parseInt(sId[1])}
+              wordStart={parseInt(sId[2])}
+              wordEnd={parseInt(sId[3])}
+              type="original"
+              origin={origin}
+            />
+          ),
+        },
+        {
+          label: (
+            <SentTabButton
+              style={tabButtonStyle}
+              icon={<BlockOutlined />}
+              type="original"
+              sentId={id}
+              count={currSimilarNum}
+              title={intl.formatMessage({
+                id: "buttons.sim",
+              })}
+            />
+          ),
+          key: "sim",
+          children: (
+            <SentSim
+              book={parseInt(sId[0])}
+              para={parseInt(sId[1])}
+              wordStart={parseInt(sId[2])}
+              wordEnd={parseInt(sId[3])}
+              channelsId={channelsId}
+              limit={5}
+              onCreate={() => setCurrSimilarNum((origin) => origin + 1)}
+            />
+          ),
+        },
+        {
+          label: (
+            <SentTabButtonWbw
+              style={tabButtonStyle}
+              sentId={id}
+              count={0}
+              onMenuClick={(keyPath: string[]) => {
+                switch (keyPath.join("-")) {
+                  case "show-progress":
+                    setShowWbwProgress((origin) => !origin);
+                    break;
                 }
-                title={intl.formatMessage({
-                  id: "channel.type.commentary.label",
-                })}
-              />
-            ),
-            key: "commentary",
-            children: (
-              <SentCanRead
-                book={parseInt(sId[0])}
-                para={parseInt(sId[1])}
-                wordStart={parseInt(sId[2])}
-                wordEnd={parseInt(sId[3])}
-                type="commentary"
-                channelsId={channelsId}
-                onCreate={() => setCurrCommNum((origin) => origin + 1)}
-              />
-            ),
-          },
-          {
-            label: (
-              <SentTabButton
-                icon={<BlockOutlined />}
-                type="original"
-                sentId={id}
-                count={originNum}
-                title={intl.formatMessage({
-                  id: "channel.type.original.label",
-                })}
-              />
-            ),
-            key: "original",
-            children: (
-              <SentCanRead
-                book={parseInt(sId[0])}
-                para={parseInt(sId[1])}
-                wordStart={parseInt(sId[2])}
-                wordEnd={parseInt(sId[3])}
-                type="original"
-                origin={origin}
-              />
-            ),
-          },
-          {
-            label: (
-              <SentTabButton
-                style={tabButtonStyle}
-                icon={<BlockOutlined />}
-                type="original"
-                sentId={id}
-                count={currSimilarNum}
-                title={intl.formatMessage({
-                  id: "buttons.sim",
-                })}
-              />
-            ),
-            key: "sim",
-            children: (
-              <SentSim
-                book={parseInt(sId[0])}
-                para={parseInt(sId[1])}
-                wordStart={parseInt(sId[2])}
-                wordEnd={parseInt(sId[3])}
-                channelsId={channelsId}
-                limit={5}
-                onCreate={() => setCurrSimilarNum((origin) => origin + 1)}
-              />
-            ),
-          },
-          {
-            label: (
-              <SentTabButtonWbw
-                style={tabButtonStyle}
-                sentId={id}
-                count={0}
-                onMenuClick={(keyPath: string[]) => {
-                  switch (keyPath.join("-")) {
-                    case "show-progress":
-                      setShowWbwProgress((origin) => !origin);
-                      break;
-                  }
-                }}
-              />
-            ),
-            key: "wbw",
-            children: (
-              <SentWbw
-                book={parseInt(sId[0])}
-                para={parseInt(sId[1])}
-                wordStart={parseInt(sId[2])}
-                wordEnd={parseInt(sId[3])}
-                channelsId={channelsId}
-                wbwProgress={showWbwProgress}
-              />
-            ),
-          },
-          {
-            label: <span style={tabButtonStyle}>{"关系图"}</span>,
-            key: "relation-graphic",
-            children: <RelaGraphic wbwData={wbwData} />,
-          },
-        ]}
-      />
-    </div>
+              }}
+            />
+          ),
+          key: "wbw",
+          children: (
+            <SentWbw
+              book={parseInt(sId[0])}
+              para={parseInt(sId[1])}
+              wordStart={parseInt(sId[2])}
+              wordEnd={parseInt(sId[3])}
+              channelsId={channelsId}
+              wbwProgress={showWbwProgress}
+            />
+          ),
+        },
+        {
+          label: <span style={tabButtonStyle}>{"关系图"}</span>,
+          key: "relation-graphic",
+          children: <RelaGraphic wbwData={wbwData} />,
+        },
+      ]}
+    />
   );
 };