Sfoglia il codice sorgente

feat: dashboard-v6 nissaya 语尾独立页面(参照 v4)

- 新增路由 /workspace/nissaya/ending/:ending 与页面,居中展示 NissayaCard
- 「在新标签页中打开」从卡片主体移到 NissayaCardPop 的 title,
  独立页面上不再重复显示;链接用传入的语尾文本,不等接口返回

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
visuddhinanda 1 settimana fa
parent
commit
7686e9a2de

+ 2 - 0
dashboard-v6/src/Router.tsx

@@ -18,6 +18,7 @@ import tagRoutes from "./routes/tagRoutes";
 import driverRoutes from "./routes/driverRoutes";
 import dictRoutes from "./routes/dictRoutes";
 import courseRoutes from "./routes/courseRoutes";
+import nissayaRoutes from "./routes/nissayaRoutes";
 
 const RootLayout = lazy(() => import("./layouts/Root"));
 const AnonymousLayout = lazy(() => import("./layouts/anonymous"));
@@ -105,6 +106,7 @@ const router = createBrowserRouter(
             ...driverRoutes,
             ...dictRoutes,
             ...courseRoutes,
+            ...nissayaRoutes,
           ],
         },
 

+ 24 - 23
dashboard-v6/src/components/nissaya/NissayaCard.tsx

@@ -39,15 +39,29 @@ interface INissayaCardModal {
   trigger?: JSX.Element | string;
 }
 
-export const NissayaCardPop = ({ text, trigger }: INissayaCardModal) => (
-  <Popover
-    style={{ width: 700 }}
-    content={<NissayaCardWidget text={text} cache hideEditButton />}
-    placement="bottom"
-  >
-    <Typography.Link>{trigger}</Typography.Link>
-  </Popover>
-);
+export const NissayaCardPop = ({ text, trigger }: INissayaCardModal) => {
+  const intl = useIntl();
+
+  return (
+    <Popover
+      style={{ width: 700 }}
+      title={
+        <div style={{ textAlign: "right" }}>
+          <Link to={`/workspace/nissaya/ending/${text}`} target="_blank">
+            {intl.formatMessage(
+              { id: "buttons.open.in.new.tab" },
+              { item: "" }
+            )}
+          </Link>
+        </div>
+      }
+      content={<NissayaCardWidget text={text} cache hideEditButton />}
+      placement="bottom"
+    >
+      <Typography.Link>{trigger}</Typography.Link>
+    </Popover>
+  );
+};
 
 export const NissayaCardModal = ({ text, trigger }: INissayaCardModal) => {
   const [open, setOpen] = useState(false);
@@ -84,7 +98,6 @@ const NissayaCardWidget = ({
   cache = false,
   hideEditButton = false,
 }: IWidgetProps) => {
-  const intl = useIntl();
   // antd v6: use App.useApp() instead of static message/notification
   const { message } = App.useApp();
 
@@ -171,19 +184,7 @@ const NissayaCardWidget = ({
           )}
         </Title>
 
-        <div>
-          <Link to={`/nissaya/ending/${term?.word}`} target="_blank">
-            {intl.formatMessage(
-              { id: "buttons.open.in.new.tab" },
-              { item: "" }
-            )}
-          </Link>
-          <Button
-            type="link"
-            icon={<ReloadOutlined />}
-            onClick={handleReload}
-          />
-        </div>
+        <Button type="link" icon={<ReloadOutlined />} onClick={handleReload} />
       </div>
 
       <Paragraph>{term?.meaning}</Paragraph>

+ 23 - 0
dashboard-v6/src/pages/workspace/nissaya/ending.tsx

@@ -0,0 +1,23 @@
+import { Col, Row } from "antd";
+import { useParams } from "react-router";
+
+import NissayaCardWidget from "../../../components/nissaya/NissayaCard";
+
+const Widget = () => {
+  const { ending } = useParams();
+
+  return (
+    <>
+      <title>{ending}</title>
+      <Row>
+        <Col flex="auto" />
+        <Col flex="960px">
+          <NissayaCardWidget text={ending} />
+        </Col>
+        <Col flex="auto" />
+      </Row>
+    </>
+  );
+};
+
+export default Widget;

+ 27 - 0
dashboard-v6/src/routes/nissayaRoutes.ts

@@ -0,0 +1,27 @@
+// src/routes/nissayaRoutes.ts
+import { lazy } from "react";
+import type { RouteObject } from "react-router";
+
+const WorkspaceNissayaEnding = lazy(
+  () => import("../pages/workspace/nissaya/ending")
+);
+
+const nissayaRoutes: RouteObject[] = [
+  {
+    path: "nissaya",
+    children: [
+      {
+        // NissayaCard 右上角「在新标签页中打开」
+        path: "ending/:ending",
+        Component: WorkspaceNissayaEnding,
+        handle: {
+          id: "workspace.nissaya.ending",
+          crumb: (match: { params: { ending?: string } }) =>
+            match.params.ending,
+        },
+      },
+    ],
+  },
+];
+
+export default nissayaRoutes;