Browse Source

fix: 修复项目灵魂编辑区宽度

Mochocyang 2 months ago
parent
commit
72a4973167

+ 5 - 0
src/components/novel/soul-doc-editor.test.tsx

@@ -22,4 +22,9 @@ describe("SoulDocEditor source", () => {
     expect(source).toContain("核心气质、创作边界、叙事原则和长期写作总则")
     expect(source).not.toContain("定义整个写作 AI 的气质、叙事节奏和语言风格")
   })
+
+  it("uses the full soul workspace width instead of a narrow centered editor", () => {
+    expect(source).toContain("w-full max-w-none")
+    expect(source).not.toContain("max-w-5xl")
+  })
 })

+ 2 - 2
src/components/novel/soul-doc-editor.tsx

@@ -152,7 +152,7 @@ export function SoulDocEditor() {
   }
 
   return (
-    <div className="mx-auto flex w-full max-w-5xl flex-col gap-5 px-8 py-7">
+    <div className="flex h-full min-h-0 w-full max-w-none flex-col gap-5 px-8 py-7">
       <div className="space-y-1">
         <Label className="text-base font-semibold">{i18n.t("novel.soul.projectSoul")}</Label>
         <p className="max-w-2xl text-sm leading-6 text-muted-foreground">
@@ -160,7 +160,7 @@ export function SoulDocEditor() {
         </p>
       </div>
 
-      <div className="grid min-h-[34rem] gap-4 lg:grid-cols-[16rem_minmax(0,1fr)]">
+      <div className="grid min-h-[34rem] flex-1 gap-4 lg:grid-cols-[20rem_minmax(0,1fr)]">
         <div className="flex min-h-0 flex-col rounded-md border bg-background/35">
           <div className="flex items-center justify-between border-b px-3 py-2">
             <div className="text-sm font-medium">写作风格</div>

+ 13 - 0
src/components/novel/soul-view.test.tsx

@@ -0,0 +1,13 @@
+import { readFileSync } from "node:fs"
+import { resolve } from "node:path"
+import { describe, expect, it } from "vitest"
+
+const source = readFileSync(resolve(__dirname, "soul-view.tsx"), "utf8")
+
+describe("SoulView source", () => {
+  it("does not constrain the project soul editor with a narrow centered wrapper", () => {
+    expect(source).toContain("<SoulDocEditor />")
+    expect(source).not.toContain("max-w-3xl")
+    expect(source).not.toContain("mx-auto")
+  })
+})

+ 2 - 4
src/components/novel/soul-view.tsx

@@ -8,10 +8,8 @@ export function SoulView() {
 
   if (selectedSoulTab === "project" || selectedSoulId === "project-soul") {
     return (
-      <div className="flex h-full overflow-y-auto p-6">
-        <div className="mx-auto max-w-3xl">
-          <SoulDocEditor />
-        </div>
+      <div className="flex h-full min-h-0 w-full overflow-y-auto">
+        <SoulDocEditor />
       </div>
     )
   }