From 7e95c44d8d0551dba8162cfa3dc5ba0b86ce6587 Mon Sep 17 00:00:00 2001
From: hyper <hx.hyper@qq.com>
Date: Fri, 27 Feb 2026 21:26:51 +0800
Subject: [PATCH] refactor: add fit prop to bg

---
 src/components/index.ts  |  1 +
 src/components/md-bg.tsx | 28 ++++++++++++++++------------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/index.ts b/src/components/index.ts
index 1923658..8dcbdf6 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -16,3 +16,4 @@ export { FileTreeNode, HeadingNode } from './FileTree';
 // 导出数据类型
 export type { DiceProps } from './md-dice';
 export type { TableProps } from './md-table';
+export type { BgProps } from './md-bg';
diff --git a/src/components/md-bg.tsx b/src/components/md-bg.tsx
index 347acfd..2fe12ab 100644
--- a/src/components/md-bg.tsx
+++ b/src/components/md-bg.tsx
@@ -1,8 +1,12 @@
 import { customElement, noShadowDOM } from "solid-element";
-import {createEffect, createResource } from "solid-js";
+import { createEffect, createResource } from "solid-js";
 import { resolvePath } from "./utils/path";
 
-customElement("md-bg", {}, (props, { element }) => {
+export interface BgProps {
+  fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+}
+
+customElement("md-bg", { fit: "cover" }, (props, { element }) => {
   noShadowDOM();
 
   // 从 element 的 textContent 获取图片路径
@@ -32,16 +36,16 @@ customElement("md-bg", {}, (props, { element }) => {
 
   const [image] = createResource(resolvedSrc, loadImage);
 
-    createEffect(() => {
-        // 图片加载完成后，将背景图片设置到 article 元素
-        if(!articleEl)return;
-        articleEl.style.backgroundImage = '';
-        if (image()) {
-            articleEl.style.backgroundImage = `url(${resolvedSrc})`;
-            articleEl.style.backgroundSize = 'cover';
-            articleEl.style.backgroundPosition = 'center';
-            articleEl.style.backgroundRepeat = 'no-repeat';
-        }
+  createEffect(() => {
+    // 图片加载完成后，将背景图片设置到 article 元素
+    if(!articleEl)return;
+    articleEl.style.backgroundImage = '';
+    if (image()) {
+        articleEl.style.backgroundImage = `url(${resolvedSrc})`;
+        articleEl.style.backgroundSize = props.fit || 'cover';
+        articleEl.style.backgroundPosition = 'center';
+        articleEl.style.backgroundRepeat = 'no-repeat';
+    }
   });
 
   return null;