feat: supports download subtitle

src/libs/shadowDomManager.js

@@ -15,7 +15,13 @@ export default class ShadowDomManager {
   _ReactComponent;
   _props;
 
-  constructor({ id, className = "", reactComponent, props = {} }) {
+  constructor({
+    id,
+    className = "",
+    reactComponent,
+    props = {},
+    rootElement = document.body,
+  }) {
     if (!id || !reactComponent) {
       throw new Error("ID and a React Component must be provided.");
     }
@@ -23,6 +29,7 @@ export default class ShadowDomManager {
     this._className = className;
     this._ReactComponent = reactComponent;
     this._props = props;
+    this._rootElement = rootElement;
   }
 
   get isVisible() {
@@ -93,7 +100,7 @@ export default class ShadowDomManager {
       host.className = this._className;
     }
 
-    document.body.appendChild(host);
+    this._rootElement.appendChild(host);
     this.#hostElement = host;
     const shadowContainer = host.attachShadow({ mode: "open" });
     const appRoot = document.createElement("div");

src/libs/svg.js

@@ -83,8 +83,8 @@ export function createLogoSVG({
   const primaryColor = "#209CEE";
   const secondaryColor = "#E9F5FD";
 
-  const path1Fill = isSelected ? primaryColor : secondaryColor;
-  const path2Fill = isSelected ? secondaryColor : primaryColor;
+  const path1Fill = isSelected ? secondaryColor : primaryColor;
+  const path2Fill = isSelected ? primaryColor : secondaryColor;
 
   const path1 = createSVGElement("path", {
     d: "M0 0 C10.56 0 21.12 0 32 0 C32 10.56 32 21.12 32 32 C21.44 32 10.88 32 0 32 C0 21.44 0 10.88 0 0 Z ",

src/libs/utils.js

@@ -409,3 +409,76 @@ export const randomBetween = (min, max, integer = true) => {
   const value = Math.random() * (max - min) + min;
   return integer ? Math.floor(value) : value;
 };
+
+/**
+ * 根据文件名自动获取 MIME 类型
+ * @param {*} filename 
+ * @returns 
+ */
+function getMimeTypeFromFilename(filename) {
+  const defaultType = "application/octet-stream";
+  if (!filename || filename.indexOf(".") === -1) {
+    return defaultType;
+  }
+
+  const extension = filename.split(".").pop().toLowerCase();
+  const mimeMap = {
+    // 文本
+    txt: "text/plain;charset=utf-8",
+    html: "text/html;charset=utf-8",
+    css: "text/css;charset=utf-8",
+    js: "text/javascript;charset=utf-8",
+    json: "application/json;charset=utf-8",
+    xml: "application/xml;charset=utf-8",
+    md: "text/markdown;charset=utf-8",
+    vtt: "text/vtt;charset=utf-8",
+
+    // 图像
+    png: "image/png",
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    gif: "image/gif",
+    svg: "image/svg+xml",
+    webp: "image/webp",
+    ico: "image/x-icon",
+
+    // 音频/视频
+    mp3: "audio/mpeg",
+    mp4: "video/mp4",
+    webm: "video/webm",
+    wav: "audio/wav",
+
+    // 应用程序/文档
+    pdf: "application/pdf",
+    zip: "application/zip",
+    doc: "application/msword",
+    docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    xls: "application/vnd.ms-excel",
+    xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  };
+
+  // 默认值
+  return mimeMap[extension] || defaultType;
+}
+
+/**
+ * 下载文件
+ * @param {*} str
+ * @param {*} filename
+ */
+export function downloadBlobFile(str, filename = "kiss-file.txt") {
+  const mimeType = getMimeTypeFromFilename(filename);
+  const blob = new Blob([str], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+
+  const a = document.createElement("a");
+  a.style.display = "none";
+  a.href = url;
+  a.download = filename || `kiss-file.txt`;
+
+  document.body.appendChild(a);
+  a.click();
+
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}