// ==UserScript==
// @name         Search Mixer
// @name:zh-CN   搜索聚合
// @name:zh-TW   搜索聚合
// @license      GPL-3.0 License
// @namespace    https://github.com/Yukari0201/UserScript
// @supportURL   https://github.com/Yukari0201/UserScript
// @homepageURL  https://github.com/Yukari0201/UserScript
// @version      0.1.3
// @description  Quick search by selection + Search engine sidebar
// @description:zh-CN  划词快速搜索 + 搜索引擎侧边栏
// @description:zh-TW  劃詞快速搜索 + 搜索引擎側邊欄
// @author       Yukari0201
// @match        *://*/*
// @require      https://unpkg.com/vue@3/dist/vue.global.prod.js
// @require      data:application/javascript,unsafeWindow.Vue%3DVue%2Cthis.Vue%3DVue%3B
// @require      https://unpkg.com/element-plus
// @require      https://unpkg.com/@element-plus/icons-vue
// @resource     ELEMENT_CSS https://unpkg.com/element-plus/dist/index.css
// @connect      raw.githubusercontent.com
// @connect      jsdelivr.net
// @connect      gh-proxy.org
// @grant        unsafeWindow
// @grant        GM_getResourceText
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_xmlhttpRequest
// @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAB2AAAAdgB+lymcgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAA0/SURBVHic7Zt7dNXVlcc/53dfeSeEJJKQEERTkGcGKCEJpCRBai1aneljFHEcpyNYulzj2E5bXbRUqVisdWytpa3oWlXrq8zgozC0JAEhCcgQTG0i5CEEQoCQBPJO7uN35o9zExJy7+/Bw6419bsW63fJ3Weffb6/c/bZZ+9z4VN8ik/xtwxxtRR/tkxOcEvyJMzL8JD97QyWJDjxRDrQpASfRJ7w0r/+GFW9AWqlpAaNsopC8ZerZVMoXFECcnbLLC3AXQK+BMwBGO+C9ZNhghs+6oMbopTsKS+kuqGqGx4/AQE5rOYU8HspebmyWLx/Je0LhStCQH6J/IIUfAsoHKkz3qkGn+6Bun74YRO8Mk19t6YBnrgWYh2w4xxsagmp+qCAjWltbHnzqyJwJWy9GNrlNM7fKRfnlcoDUrANKGLE4J0CvpOhBt/YD482Qd+IIbQMwhMnwC/h8+OgOCFkF/MkvN6SRFVuqSy+HFvD4ZIIyP0fmZhXIl+SGruB+aFkvp6qpvs5P2w4Ab0h3l9tLzx/Wn1elQaTI0L3J2G2gJ35pfKVRXvkuEuxORxsE5C/UxYKNx8iuIswS2jZOPVWB3X40XFo94XXt6MD9nSCS8BDGeAxsEjCnbqPDxeWyny7doeDLQLySuUDUuOPQFo4mTQP3DtBfX6uRU1/MzzXopZEuhtWpJiKT9SgNL9M/otVu41gjQApRV6JXAc8AzjDKhPwzTT1Fnd3wnud1owY0OFnLaBL+GIiTI0ybeKWkudzS+Vaaz2EhyUCcst4CsEPzORuG6/W/Vkf/OaUPUOO9MH2DkXi/WnKiZpBwKO5JfK79noaDVMC/qtO7lidyoMzo5Vx4ZDogq8kq8/PtYR2emZ4uRXafJDpUX7ECAJF9v1pbNhaJ1+x35tC2OkMsPZ/5Tfmx7LMo8FNicqZVXTB/i6o7wfvheCFFSkQocH+bvig59KMGdDhpTPwYDp8LQV2dY7eOgVqp8iPg4IESHapv/sldz5dLd99cI541W6fYd9pXonMRFAd6yD+xnFQlAATPRe+90tFQm0fnPHC6lQIAN+sh1YDr//fM9Tz9prwBv14CmRFwpazUN4FM6JgRrT6F+u4INvQr/zM3k7o8HPUI5i7q1Cctz78cARIKfLK2A58fuSfr4+EvDiYG6um6cUY1KFhAE574dSgIqYzAH069ATUsngpGAne8RG4BUQ6IFJTUWOyC5JcMCsKpkeP1a9LaByAqh416ObBMSK/rigSqy6bgNwSeYcQ/M6oYaILpkbCwjgoiLfTpT30BtSyOtQN1b3QbexbpA6L9xWJcqv6x/iAGW9ItxA8ZtawwweVPjUrAErOwWtn1aHnGpc66CS71ZSNcUC0BjFOiHNcGNigrvxIbwD6dTVjzvrUEopxqHhiUFdOdcRhyQhCg42A5UBpDAHxydyJ5DorjTUBS4Jv/0/nlQdv84HReXbIB9x12Fi3QDneNDfMjYED3VYsAiAvv1TeXF4ktlkRHrsNSv7Nak9zotVSaB5U+/iVhAR2nlOflyXabvvvVmVHEZBfJucTPMdbwd/FqOc+62/HFnZ3KseXHQ1RDnP5ESjKLZPTrAiOIkCX3GmnlzlBAi513zdDh0/tKk6hSLABIWCFFcFRBAjJcqs9xDkgw6OClys9/Udif5d6zo+12VByuxWxYQIW/UlOQpBlVX9mhHJURwdUUHS18Ode9ZxmfkC6GDNyymS6mdDwLiCd5GJjIBnBQChEMGIdfi/OhvdxNhxAnDmG1t2mbImKR0/JJJCZzbHpi/DKaCa41dbYY+OM4VTb4esmMsPItmN7qls9L4UAKSWug9txVbyB1ntuzPdioAet4yTOwxXIks28uOxW7vn7L3NdRATVvXb6YQFWCZDS+vQHSAgeRM757bSC3t4efv7zjXhqqgGYPHkyBQV53HDDZxg/PhGHw0F7eweNjUfZtXc/R2pq2LvtTT7+YB9pK74HjomW+5IWlvTIGWBdMxAZDKL7dettxEAP69c/THNzEwkJ8dx7790sWDBvjFx0dDSTJmVQWFhAfX0Dz216gZaTJ+jY9DDaP65HH59hrUMLAd3IXcBWuBERbGmZACmJ2Pokzc1NpKdPZMOGH4Yc/MXIyrqeJx7/AbNnz2Kg+zwRWx5HDFrbdgQkWZBRaGyRgRjH5aXJjbBr1x/ZvPkXxMfHs2HDOhIT7SV3vV4fa9c+RlPTcZYtW87Klf9q2sYnIX2CMMwtXbUBj4TfH2Dr1jcAuPvuO2wPHsDtdrFmzX1omkZp6Xba29uuiG3DPmDlYeoAS+EjqBT2ojh4utk8+eloqCKy/SypE9PIy8u5ZGMnTUonJ2c+lZXv840tJXjzv2bW5KyZwMgZYIvSNq96JrvNZZ0NBwBYUpCPMJ6Rpli0KA8AR2OVFfFWM4GRBJy0Y0hbcPsbyssZwdF6FICpU23ttCExpMNx9mOQJpGb5KiZvmECJByxY0hLMACaFCI1djFEjwp2kpJsnmtDICYmmoiICPB5EYPGUZHQDFMTwAgCNKi2Y0h9vzqzXx9pnsOXUu2VmmbvTBsOWjA/L82K2zrvmeoa+uDXKQfrp4GeALR6VU0vXFFzGDHK67e3t1tVHxZ9ff309fWD0w2eSCPRwIBOhZm+YQL2LxVngFo7xtQG45HZJmd1PeVaAOrqGuyoD4n6eqVDT8pQGcDwqD54ozAtzl2s4S07xhwMJkIWmJzV/ZPVOWvPnn121IdERcV+pXOKcRQpYIsVfaMJENiqrBzqUbmArEgYZ1Bj8n8mBxkVz7Fjxzh0yJarGYVTp05TXl4JQsM/q8hI1Kc5edGKzlEEBC8oma6bIfQF4INelR3+XOgbHgoOF97crwCwefNLdHV1We1iGH5/gE2bNuP3B9DjktBjDKJJyVt7CoSl8uyYRSRUCdwydnao503jjIunvrk3E5g4jba2NjZufIauLuuZVL/fz7PP/oojR+qV0Z2tRL75GMIfOhkhBZus6h5r8jqp5RVQhcXssEPAr7NUevyF02p3SHFBils9IzWVyXFr0NfZwX8+8QinT7eQkpLMfff9MzNnTjfUf/JkC5s2vTDs/EZCz5xJwcpCPpZTqAtMGfpzSUWRWGrFdghTGssvlbdKE4eY5FLef3YMzI+BaItbfGfneZ5++kc0NtYBMH36NAoK8pk6NYsJE64B1HbZ2HiMiop9HDhQha6PPXMLAatvgdvyJQPSw3/0ruWgb7bPoZO9Z6mwvJuFrw6XyreAW4f+7xSQHRzsrBhVsQmF2l6VyGzzw1kvdPphQCp/4ZPw6g0QCAS457dvIyp/j+w3zqk7HE5SUyfS3NwUcvBDGJAeftq/assj+Td+2ergwYCAgt0ywx+gOtPDuOVJsDBWTeUhdAXUYGv64C+96mT4D8kqQvzOx+EjqpHlceEfxPnRXhxHD6G11CN6zyP0AFp0HDMmT2bG9FnUXreEfk8ch19+EkddJULAquWS2xeN1S2l6BcOuVzMeaf0sgkA+MmH8qEVyfxkyLm1+mD3eXVJomlg9CCjHPDLLFUvMDoim90PAHh4Enw2VpXGfjF0gVLqRL77FGum7Ak5+BHoQ+MWqyQYhlLfmiWe2tNJ6fYO+N5RWF0Hv2uFYwNj33BfAN4Inr5XXmN83c0I82LV4Pt11dcwhEbObblmgweIQudtWXXL56z0Z2rmV6eK4t+c4leH+8wPCjs64PigcpB3mV93G4MYh7ppAvB669iMc4O8jk5pqUQUjeAPVkiw9J7KC7kf+KmZnF/CsydVQfPmxNC3PIywKk2Rd7gP3ukY+32znsoD3evplHFW1EUj2CarbzEMGa1NVCFkRZF4CHUh2rA2U98Pfwhed1uTquIAKyhMUI50QIdngiSGQkPgWh7oftTvw2UlkopC5x0jEmyt1IpC8ZRU94ZC3+0O4pVWVTFK86g7f2a4PhJWB+U2n1Z3jAxwssE/pdglvYuxlsYzJMG2q6osEiWai5kCfksYtzCow5Mn1HNxvLo3HA7jnOpWuVvAtvYLlyJCQvKaW5BdUSzeE3PfrUbKpVwmCZfkq/cuFufKi8Q/oZOPoDKUzPFBeD54HPl6amh/EOOAtZlq3df0wYtnQvcnoVbAFyuKxR27CsXwgK8ECZdVF6hYKiorCkUekmJgGxf5h53n1Y8hnAK+m6GWxLA1Dvh+JlwboZbLj4+HLLPXCME9HsGccHd+xNx3qyFwI2Al3RSFzlvy4K2zh9tbGqlF5JTJdIe6ZfIlYCGgOQQ8nKHuFg79TAYu/HzmlBceOTpqy2sFtmqCV/cuYTdCWErTyUM3Z4NjJzDeXFjsEHPfvgmu4o+mlpTJhEFYKGBenIOZ38/kC8kuoiM1HIDw6ujtfgafbOL9Zh9/loIaTbK3vJBaq4O+GDZI8JI9L1KIdfpVI+CvBVm1fA5ClGBMwjABn0ht8JNE0DEWY+wTSoRYp8MnVBz9pDGChFC7QzeCbw/95/8lARAkQWMBQr4GnAM6ga3oeo7IfsfgLPop/rbwf1PjuUmMVpmfAAAAAElFTkSuQmCC
// @run-at       document-end
// @downloadURL https://update.greasyfork.icu/scripts/574563/Search%20Mixer.user.js
// @updateURL https://update.greasyfork.icu/scripts/574563/Search%20Mixer.meta.js
// ==/UserScript==

(function () {
  "use strict";

  // Default config
  const DEFAULT_CONFIG = {
    icon: {
      anchor: "bottom-right", // top-left | top-right | bottom-left | bottom-right
      offsetX: 10,
      offsetY: 10,
    },
    rule: {
      update: true,
      updateInterval: 24 * 60 * 60 * 1000, // 24 hours
      defaultIndex: 0,
    },
    ui: {
      sideBtnPosition: "right", // left | right
      drawerPosition: "rtl", // rtl | ltr | ttb | btt
    },
  };

  let config = GM_getValue("config");
  if (!config || typeof config !== "object") {
    GM_setValue("config", DEFAULT_CONFIG);
    config = DEFAULT_CONFIG;
  }

  // rules URL
  const RULES_URL = [
    "https://raw.githubusercontent.com/Yukari0201/UserScript/refs/heads/main/rules/search-mixer/rules_v1.0.json",
    "https://cdn.jsdelivr.net/gh/Yukari0201/UserScript@refs/heads/main/rules/search-mixer/rules_v1.0.json",
    "https://gcore.jsdelivr.net/gh/Yukari0201/UserScript@refs/heads/main/rules/search-mixer/rules_v1.0.json",
    "https://fastly.jsdelivr.net/gh/Yukari0201/UserScript@refs/heads/main/rules/search-mixer/rules_v1.0.json",
    "https://testingcf.jsdelivr.net/gh/Yukari0201/UserScript@refs/heads/main/rules/search-mixer/rules_v1.0.json",
    "https://gh-proxy.org/https://raw.githubusercontent.com/Yukari0201/UserScript/refs/heads/main/rules/search-mixer/rules_v1.0.json",
    "https://hk.gh-proxy.org/https://raw.githubusercontent.com/Yukari0201/UserScript/refs/heads/main/rules/search-mixer/rules_v1.0.json",
    "https://cdn.gh-proxy.org/https://raw.githubusercontent.com/Yukari0201/UserScript/refs/heads/main/rules/search-mixer/rules_v1.0.json",
    "https://edgeone.gh-proxy.org/https://raw.githubusercontent.com/Yukari0201/UserScript/refs/heads/main/rules/search-mixer/rules_v1.0.json",
  ];

  // Default rules
  const DEFAULT_RULE = {
    lastUpdate: 0,
    rules: [
      {
        name: "Google",
        icon: "https://www.google.com/favicon.ico",
        url: "https://www.google.com/",
        searchPrefix: "https://www.google.com/search?q=",
      },
    ],
  };

  let rule = GM_getValue("rule");
  if (!rule || typeof rule !== "object") {
    GM_setValue("rule", DEFAULT_RULE);
    rule = DEFAULT_RULE;
  }

  const fetchRule = (url) => {
    return new Promise((resolve, reject) => {
      GM_xmlhttpRequest({
        method: "GET",
        url: url,
        timeout: 5000,
        responseType: "json",
        onload: (response) => {
          if (response.status === 200 && response.response) {
            resolve(response.response);
          } else {
            reject(`Status: ${response.status}`);
          }
        },
        onerror: (err) => reject("Network Error"),
        ontimeout: () => reject("Timeout"),
      });
    });
  };

  const updateRules = async () => {
    const now = new Date().getTime();

    // 检查是否开启更新及是否到达间隔时间
    if (
      config.rule.update &&
      now - rule.lastUpdate > config.rule.updateInterval
    ) {
      console.log("Search Mixer: 正在尝试从远程更新规则...");

      for (const url of RULES_URL) {
        try {
          const rulesArr = await fetchRule(url);
          // 更新本地数据
          rule.lastUpdate = new Date().getTime();
          rule.rules = rulesArr;
          GM_setValue("rule", rule);
          console.log(`Search Mixer: 规则更新成功! 来源: ${url}`);
          return; // 成功后立即跳出
        } catch (error) {
          console.warn(`Search Mixer: 尝试从 ${url} 更新失败: ${error}`);
        }
      }
      console.error("Search Mixer: 所有预设的规则地址均无法访问。");
    }
  };

  updateRules();

  // Vue & Element Plus

  const { ElMessageBox } = ElementPlus;
  const elementPlusCss = GM_getResourceText("ELEMENT_CSS");
  GM_addStyle(elementPlusCss);
  GM_addStyle(`
html, body {
  margin: 0;
  padding: 0;
}
#search-mixer-app-container {
  position: fixed;
  ${config.ui.sideBtnPosition}: 10px;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  z-index: 1000;
  pointer-events: none; /* 使容器不干扰页面的其他元素 */
}
#search-mixer-app {
  pointer-events: auto; /* 恢复应用的可点击性 */
}
.btn-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#search-mixer-app .btn {
  margin-left: 0px !important; /* 去除默认的 margin-left */
  width: 40px !important; /* 固定宽度 */
  height: 40px !important; /* 固定高度 */
  padding: 0 !important; /* 去除默认的 padding */
}
.drawer {
  pointer-events: auto;
}
.search-input-wrapper {
  position: sticky;
  top: 0;
  z-index: 100; 
  background-color: #ffffff; 
  padding: 15px 0; 
  margin-bottom: 10px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}
.search-card-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.search-engine-card {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border-radius: 8px !important;
}
.search-engine-card:hover {
  transform: translateX(-4px); /* 悬停时向左轻微位移 */
  border-color: var(--el-color-primary-light-5);
}
.search-card-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.engine-icon-wrapper {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.engine-icon-wrapper img {
  width: 100%;
  height: 100%;
}
.engine-info {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止 URL 过长溢出 */
}
.engine-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.engine-url {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  /* 强制单行并显示省略号 */
  display: block;
  width: 180px; 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 默认引擎卡片的高亮样式 */
.search-engine-card.is-default {
  border: 1.5px solid var(--el-color-primary-light-3) !important;
  background-color: var(--el-color-primary-light-9) !important;
}
/* 调整输入框内选择器的宽度 */
.el-form-item .el-select {
  width: 100%;
}
.quick-search-btn {
  position: fixed;
  z-index: 999999;
  width: 28px;
  height: 28px;
  padding: 4px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s;
}
.quick-search-btn:hover {
  transform: scale(1.1);
  background: var(--el-color-primary-light-9);
}
.quick-search-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
  `);

  let text = `
<div id="search-mixer-app-container">
  <div id="search-mixer-app">
    <div class="btn-container">
      <el-button @click="handleSearchClick" circle type="primary" class="btn">
        <el-icon :size="20"><component is="Search" /></el-icon>
      </el-button>
      <el-button @click="handleSettingClick" circle type="info" class="btn">
        <el-icon :size="20"><component is="Setting" /></el-icon>
      </el-button>
    </div>

    <transition name="el-fade-in">
      <div
        v-if="showQuickBtn"
        class="quick-search-btn"
        :style="quickBtnStyle"
        @mousedown.prevent
        @click="handleQuickSearch"
      >
        <img :src="quickIcon" alt="search" />
      </div>
    </transition>

    <el-drawer 
      v-model="searchDrawer" 
      :direction="direction" 
      size="340px"
      @opened="onDrawerOpened"
    >
      <template #header>
        <div class="drawer-header-content">
          <div class="drawer-title">聚合搜索</div>
          <div class="search-input-wrapper">
            <el-input
              v-model="currentSelection"
              placeholder="请输入搜索内容..."
              clearable
              @keyup.enter="handleEnterSearch"
              ref="searchInput"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </div>
      </template>
      
      <template #default>
        <div class="search-card-container">
          <el-card 
            v-for="(item, index) in ruleData.rules" 
            :key="index" 
            shadow="hover" 
            :class="['search-engine-card', index === localConfig.rule.defaultIndex ? 'is-default' : '']"
            @click="openSearch(item)"
          >
            <div class="search-card-content">
              <div class="engine-icon-wrapper">
                <el-image :src="item.icon" fit="contain">
                  <template #error><el-icon><Compass /></el-icon></template>
                </el-image>
              </div>
              <div class="engine-info">
                <div class="engine-name">
                  {{ item.name }}
                  <el-tag v-if="index === localConfig.rule.defaultIndex" size="small" effect="plain" style="margin-left: 8px;">默认</el-tag>
                </div>
                <div class="engine-url">{{ item.url }}</div>
              </div>
            </div>
          </el-card>
        </div>
      </template>
    </el-drawer>

    <el-drawer v-model="settingDrawer" :direction="direction" size="400px" :before-close="handleSettingClose">
      <template #header>
        <h4><el-icon style="vertical-align: middle; margin-right: 8px;"><Setting /></el-icon>搜索聚合设置</h4>
      </template>
      <template #default>
        <el-form :model="localConfig" label-position="top">
          <el-divider content-position="left">界面布局</el-divider>
          <el-form-item label="侧边按钮位置">
            <el-radio-group v-model="localConfig.ui.btnPosition">
              <el-radio-button label="left">左侧</el-radio-button>
              <el-radio-button label="right">右侧</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="设置面板展开方向">
            <el-select v-model="localConfig.ui.drawerPosition" placeholder="请选择">
              <el-option label="从右往左 (默认)" value="rtl"></el-option>
              <el-option label="从左往右" value="ltr"></el-option>
              <el-option label="从上往下" value="ttb"></el-option>
              <el-option label="从下往上" value="btt"></el-option>
            </el-select>
          </el-form-item>

          <el-divider content-position="left">划词图标 (Icon)</el-divider>
          <el-form-item label="图标锚点位置">
            <el-select v-model="localConfig.icon.anchor">
              <el-option label="左上" value="top-left"></el-option>
              <el-option label="右上" value="top-right"></el-option>
              <el-option label="左下" value="bottom-left"></el-option>
              <el-option label="右下" value="bottom-right"></el-option>
            </el-select>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="水平偏移 (px)">
                <el-input-number v-model="localConfig.icon.offsetX" :min="0" :max="100" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="垂直偏移 (px)">
                <el-input-number v-model="localConfig.icon.offsetY" :min="0" :max="100" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider content-position="left">规则管理</el-divider>
          <el-form-item label="默认搜索引擎">
            <el-select v-model="localConfig.rule.defaultIndex" placeholder="请选择默认引擎">
              <el-option
                v-for="(item, index) in ruleData.rules"
                :key="index"
                :label="item.name"
                :value="index"
              >
                <template #default>
                  <div style="display: flex; align-items: center; gap: 8px;">
                    <img :src="item.icon" style="width: 16px; height: 16px;" />
                    <span>{{ item.name }}</span>
                  </div>
                </template>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="自动更新规则">
            <el-switch v-model="localConfig.rule.update" />
          </el-form-item>
          <el-form-item v-if="localConfig.rule.update" label="更新间隔 (小时)">
            <el-input-number 
              :model-value="localConfig.rule.updateInterval / (60 * 60 * 1000)"
              @update:model-value="val => localConfig.rule.updateInterval = val * 60 * 60 * 1000"
              :min="1" :max="720" />
          </el-form-item>
          
          <el-button type="warning" plain @click="resetToDefault" style="width: 100%; margin-top: 20px;">
            恢复默认设置
          </el-button>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button @click="confirmClick" type="primary">保存配置</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</div>
  `;

  var div = document.createElement("div");
  div.innerHTML = text;
  document.body.append(div);
  const App = {
    data() {
      return {
        searchDrawer: false,
        settingDrawer: false,
        direction: config.ui.drawerPosition,
        localConfig: JSON.parse(JSON.stringify(config)), // 深拷贝配置对象
        ruleData: rule, // 规则数据
        currentSearchText: "", // 当前搜索框中的文本
        showQuickBtn: false,
        quickBtnStyle: {
          top: "0px",
          left: "0px",
        },
        quickIcon:
          rule.rules[config.rule.defaultIndex].icon ||
          "data:image/png;base64,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",
      };
    },
    mounted() {
      // 全局监听鼠标抬起
      document.addEventListener("mouseup", this.handleMouseUp);
      // 滚动或点击其他地方时隐藏按钮
      document.addEventListener("mousedown", (e) => {
        if (!e.target.closest(".quick-search-btn")) {
          this.showQuickBtn = false;
        }
      });
    },
    methods: {
      handleSearchClick() {
        this.searchDrawer = true;
      },
      handleSearchClose() {
        this.currentSearchText = ""; // 关闭抽屉时清空当前选择
      },
      openSearch(engine) {
        // 判断 currentSearchText 是否非空
        const query = this.currentSearchText
          ? this.currentSearchText.trim()
          : "";

        if (query.length > 0) {
          // 有内容，拼搜索地址
          const searchUrl = engine.searchPrefix + encodeURIComponent(query);
          window.open(searchUrl, "_blank");
        } else {
          // 为空，跳转主页
          window.open(engine.url, "_blank");
        }
      },
      onDrawerOpened() {
        if (this.$refs.searchInput) {
          this.$refs.searchInput.focus();
        }
      },
      handleEnterSearch() {
        const idx = this.localConfig.rule.defaultIndex || 0;
        const defaultEngine = this.ruleData.rules[idx];
        if (defaultEngine) {
          this.openSearch(defaultEngine);
        }
      },
      handleSettingClick() {
        this.settingDrawer = true;
      },
      handleSettingClose(done) {
        ElMessageBox.confirm("Are you sure you want to close?")
          .then(() => {
            done();
          })
          .catch(() => {
            // catch error
          });
      },
      cancelClick() {
        ElMessageBox.confirm("Are you sure you want to close?")
          .then(() => {
            this.settingDrawer = false;
            this.localConfig = JSON.parse(JSON.stringify(config)); // 恢复配置
          })
          .catch(() => {
            // catch error
          });
      },
      confirmClick() {
        // 保存到本地
        GM_setValue("config", this.localConfig);
        ElMessageBox.alert(
          "配置已保存，部分设置可能需要刷新页面生效。",
          "提示",
          {
            confirmButtonText: "确定",
            callback: () => {
              location.reload(); // 或者根据需要手动更新 config 对象
            },
          },
        );
      },
      resetToDefault() {
        ElMessageBox.confirm("确定要恢复默认设置吗？").then(() => {
          this.localConfig = JSON.parse(JSON.stringify(DEFAULT_CONFIG));
        });
      },
      handleMouseUp(e) {
        // 延迟一丢丢，确保 getSelection 能抓到最新的
        setTimeout(() => {
          const selection = window.getSelection();
          const text = selection.toString().trim();

          if (text && text.length > 0) {
            const range = selection.getRangeAt(0);
            const rect = range.getBoundingClientRect();

            // 根据 config 中的锚点逻辑计算位置
            this.calculatePosition(rect);
            this.currentSelection = text;
            this.showQuickBtn = true;
          } else {
            this.showQuickBtn = false;
          }
        }, 10);
      },
      calculatePosition(rect) {
        const { anchor, offsetX, offsetY } = config.icon;
        let top, left;

        // 基础逻辑：以选区矩形为基准
        switch (anchor) {
          case "top-left":
            top = rect.top - 30 - offsetY;
            left = rect.left - offsetX;
            break;
          case "top-right":
            top = rect.top - 30 - offsetY;
            left = rect.right + offsetX;
            break;
          case "bottom-left":
            top = rect.bottom + offsetY;
            left = rect.left - offsetX;
            break;
          case "bottom-right":
          default:
            top = rect.bottom + offsetY;
            left = rect.right + offsetX;
            break;
        }

        this.quickBtnStyle = {
          top: `${top}px`,
          left: `${left}px`,
        };
      },
      handleQuickSearch() {
        const idx = this.localConfig.rule.defaultIndex || 0;
        const engine = this.ruleData.rules[idx];
        if (engine && this.currentSelection) {
          const searchUrl =
            engine.searchPrefix + encodeURIComponent(this.currentSelection);
          window.open(searchUrl, "_blank");
          this.showQuickBtn = false; // 点击后消失
        }
      },
    },
  };

  const app = Vue.createApp(App);
  app.use(ElementPlus);
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
  }
  app.mount("#search-mixer-app");
})();