From 773bfd9bb7ec9b41c7fb9b0f7e5d55437ac7c16f Mon Sep 17 00:00:00 2001
From: JOYCEQL <1449239013@qq.com>
Date: Wed, 13 Nov 2024 22:23:58 +0800
Subject: [PATCH] feat: config lineHeight

---
 .../src/components/editor/SidePanel.tsx       | 46 +++++++++++++++++--
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/apps/fronted/src/components/editor/SidePanel.tsx b/apps/fronted/src/components/editor/SidePanel.tsx
index f945190..2be01ac 100644
--- a/apps/fronted/src/components/editor/SidePanel.tsx
+++ b/apps/fronted/src/components/editor/SidePanel.tsx
@@ -34,6 +34,12 @@ const fontOptions = [
   { value: "mono", label: "等宽体" }
 ];
 
+const lineHeightOptions = [
+  { value: "normal", label: "默认" },
+  { value: "relaxed", label: "适中" },
+  { value: "loose", label: "宽松" }
+];
+
 function SettingCard({
   icon: Icon,
   title,
@@ -184,7 +190,6 @@ export function SidePanel() {
         </SettingCard>
 
         {/* 主题色设置  */}
-
         <SettingCard icon={Palette} title="主题色">
           <div className="space-y-4">
             <div className="grid grid-cols-6 gap-2">
@@ -226,11 +231,11 @@ export function SidePanel() {
               ))}
             </div>
 
-            <div className="flex  flex-col gap-4">
+            <div className="flex flex-col gap-4">
               <div className="text-sm text-gray-600 dark:text-gray-400">
                 自定义
               </div>
-              <input
+              <motion.input
                 type="color"
                 onChange={(e) => debouncedSetColor(e.target.value)}
                 className="w-[40px] h-[40px] rounded-lg cursor-pointer overflow-hidden hover:scale-105 transition-transform"
@@ -296,6 +301,41 @@ export function SidePanel() {
               </Select>
             </div>
 
+            {/* 行高选择 */}
+            <div className="space-y-2">
+              <Label
+                className={cn(
+                  theme === "dark" ? "text-neutral-300" : "text-gray-600"
+                )}
+              >
+                行高
+              </Label>
+              <div className="flex items-center gap-4">
+                <Slider
+                  value={[globalSettings?.lineHeight || 1.5]}
+                  min={1}
+                  max={2}
+                  step={0.1}
+                  onValueChange={([value]) =>
+                    updateGlobalSettings?.({ lineHeight: value })
+                  }
+                  className={cn(
+                    theme === "dark"
+                      ? "[&_[role=slider]]:bg-neutral-200"
+                      : "[&_[role=slider]]:bg-gray-900"
+                  )}
+                />
+                <span
+                  className={cn(
+                    "min-w-[3ch] text-sm",
+                    theme === "dark" ? "text-neutral-300" : "text-gray-600"
+                  )}
+                >
+                  {globalSettings?.lineHeight}
+                </span>
+              </div>
+            </div>
+
             {/* 基础字号选择 */}
             <div className="space-y-2">
               <Label