refactor: add fit prop to bg

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';

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;