<template>

<div ref="menuContainer" class="fr-userscript-settings-backdrop" :class="{ dark: isDark }" role="presentation" @click.self="close">

<section class="fr-userscript-settings" role="dialog" aria-modal="true" aria-labelledby="fr-userscript-settings-title">

<header>

<div class="brand">

<img v-if="iconUrl" :src="iconUrl" alt="" />

<span><strong id="fr-userscript-settings-title">流畅阅读</strong><small>{{ versionLabel }}</small></span>

</div>

<button type="button" class="close" aria-label="关闭设置" @click="close">×</button>

</header>

<div class="notice">

该版本复用 FluentRead 当前翻译核心。截图 OCR、圈选翻译、Chrome 内置翻译和扩展右键菜单依赖浏览器扩展权限，userscript 中暂不提供。

</div>

<div v-if="hydrated" class="settings-grid">

<fieldset>

<legend>基础设置</legend>

<label class="toggle"><span>启用 FluentRead</span><input v-model="draft.on" type="checkbox" /></label>

<label><span>源语言</span><UiSelect v-model="draft.from" :append-to="menuContainer" filterable aria-label="源语言"><ElOption v-for="item in options.from" :key="item.value" :value="item.value" :label="item.label" /></UiSelect></label>

<label><span>目标语言</span><UiSelect v-model="draft.to" :append-to="menuContainer" filterable aria-label="目标语言"><ElOption v-for="item in options.to" :key="item.value" :value="item.value" :label="item.label" /></UiSelect></label>

<label><span>译文显示</span><UiSelect v-model="draft.display" :append-to="menuContainer" aria-label="译文显示"><ElOption v-for="item in options.display" :key="item.value" :value="item.value" :label="item.label" /></UiSelect></label>

<label><span>双语样式</span><UiSelect v-model="draft.style" :append-to="menuContainer" aria-label="双语样式"><ElOption v-for="item in styleOptions" :key="item.value" :value="item.value" :label="item.label" /></UiSelect></label>

<label class="toggle"><span>打开网页后自动翻译</span><input v-model="draft.autoTranslate" type="checkbox" /></label>

<label class="toggle"><span>使用翻译缓存</span><input v-model="draft.useCache" type="checkbox" /></label>

</fieldset>

<fieldset>

<legend>翻译服务</legend>

<label><span>服务</span><UiSelect v-model="draft.service" :append-to="menuContainer" filterable search-placeholder="搜索翻译服务" aria-label="服务"><ElOption v-for="item in serviceOptions" :key="item.value" :value="item.value" :label="item.label" /></UiSelect></label>

<p v-if="serviceDescription" class="hint">{{ serviceDescription }}</p>

<label v-if="usesModel"><span>模型</span><UiSelect v-model="selectedServiceModel" :append-to="menuContainer" filterable aria-label="模型"><ElOption v-for="model in modelOptions" :key="model" :value="model" :label="model" /></UiSelect></label>

<div v-if="usesModel" class="model-add-control">

<button v-if="selectedModelIsRemovable" type="button" class="inline-action is-danger" @click="removeSelectedCustomModel">

{{ isCustomOpenAIService ? '删除当前模型' : '删除当前自定义模型' }}

</button>

<button v-if="!addingCustomModel" type="button" class="inline-action" :disabled="customModelLimitReached" @click="beginAddCustomModel">

{{ customModelLimitReached ? '已达到 50 个模型上限' : '+ 添加模型' }}

</button>

<template v-else>

<input v-model="customModelDraft" :maxlength="MAX_CUSTOM_OPENAI_MODEL_LENGTH" autocomplete="off" placeholder="输入模型标识" @input="customModelError = ''" />

<button type="button" class="inline-action" @click="submitCustomModel">添加</button>

<button type="button" class="inline-action is-plain" @click="cancelAddCustomModel">取消</button>

</template>

<small v-if="customModelError" class="model-add-error" role="alert">{{ customModelError }}</small>

</div>

<label v-if="isAIService && usesToken" class="toggle"><span>当前模型需要 API Key</span><input v-model="requiresApiKey" type="checkbox" /></label>

<label v-if="usesToken"><span>API Key / Token</span><input v-model.trim="draft.token[draft.service]" type="password" autocomplete="off" /></label>

<label v-if="draft.service === services.deepL"><span>DeepL API 套餐</span><UiSelect v-model="draft.deeplApiPlan" :append-to="menuContainer" aria-label="DeepL API 套餐"><ElOption value="free" label="API Free（免费）" /><ElOption value="pro" label="API Pro（付费）" /></UiSelect></label>

<p v-if="draft.service === services.deepL" class="hint">选择与 API Key 对应的套餐；代理地址优先于套餐默认接口。</p>

<label v-if="isCustomOpenAIService"><span>自定义接口地址</span><input v-model.trim="customOpenAIEndpoint" inputmode="url" :maxlength="MAX_CUSTOM_OPENAI_PROVIDER_ENDPOINT_LENGTH" /></label>

<label v-if="draft.service === services.deeplx"><span>DeepLX 地址</span><input v-model.trim="draft.deeplx" inputmode="url" /></label>

<template v-if="draft.service === services.myMemory">

<label><span>MyMemory 邮箱（可选）</span><input v-model.trim="draft.myMemoryEmail" type="email" /></label>

<p class="hint">官方 API：匿名每天 5,000 字符，有效邮箱每天 50,000 字符。</p>

</template>

<details v-if="draft.service === services.freeTranslation">

<summary>自动降级顺序与连接设置</summary>

<p class="hint">无需填写密钥。优先使用快且稳定的服务，遇到问题自动切换。至少开启一个服务，MyMemory 邮箱可留空。</p>

<label><span>选择模式</span><select v-model="draft.freeTranslationMode" aria-label="免费翻译选择模式"><option value="balanced">智能加速</option><option value="sequential">优先顺序</option></select></label>

<div v-for="(id, index) in draft.freeTranslationOrder" :key="id" class="fallback-order-row">

<span>{{ fallbackLabel(id) }}</span>

<button v-if="draft.freeTranslationMode === 'sequential'" type="button" :disabled="index === 0" :aria-label="`上移 ${fallbackLabel(id)}`" @click="moveFallback(index, -1)">↑</button>

<button v-if="draft.freeTranslationMode === 'sequential'" type="button" :disabled="index === draft.freeTranslationOrder.length - 1" :aria-label="`下移 ${fallbackLabel(id)}`" @click="moveFallback(index, 1)">↓</button>

<button type="button" :disabled="draft.freeTranslationOrder.length === 1" @click="draft.freeTranslationOrder = draft.freeTranslationOrder.filter(value => value !== id)">停用</button>

</div>

<label v-for="item in availableFallbacks" :key="item.id"><span>{{ item.label }}</span><button type="button" @click="draft.freeTranslationOrder.push(item.id)">加入后备</button></label>

<label><span>MyMemory 邮箱（可选）</span><input v-model.trim="draft.myMemoryEmail" type="email" /></label>

<label><span>每路超时（ms）</span><input v-model.number="draft.freeTranslationTimeoutMs" type="number" min="1000" max="15000" step="1000" /></label>

<p class="hint">失败后自动暂停服务：网络问题通常几分钟后重试，限流遵循服务提示，访问受阻等待数小时，日额度耗尽约一天后重试。暂停记录保存在本地。</p>

</details>

<label v-if="draft.service === services.newapi"><span>New API 地址</span><input v-model.trim="draft.newApiUrl" inputmode="url" /></label>

<label v-if="draft.service === services.azureOpenai"><span>Azure 地址</span><input v-model.trim="draft.azureOpenaiEndpoint" inputmode="url" placeholder="https://your-resource.services.ai.azure.com/openai/v1/" /></label>

<p v-if="draft.service === services.azureOpenai" class="hint">支持资源地址、v1 基础地址与完整 Chat Completions 地址；模型请填写 Azure 中的实际部署名称。</p>

<label v-if="usesProxy"><span>代理地址（可选）</span><input v-model.trim="draft.proxy[draft.service]" inputmode="url" placeholder="留空使用默认接口" /></label>

<template v-if="draft.service === services.youdao">

<label><span>有道 App Key</span><input v-model.trim="draft.youdaoAppKey" autocomplete="off" /></label>

<label><span>有道 App Secret</span><input v-model.trim="draft.youdaoAppSecret" type="password" autocomplete="off" /></label>

</template>

<template v-if="servicesType.isTencent(draft.service)">

<label><span>腾讯 Secret ID</span><input v-model.trim="draft.tencentSecretId" autocomplete="off" /></label>

<label><span>腾讯 Secret Key</span><input v-model.trim="draft.tencentSecretKey" type="password" autocomplete="off" /></label>

</template>

<p v-if="credentialWarning" class="warning">{{ credentialWarning }}</p>

<label class="toggle"><span>AI 网页上下文</span><input v-model="draft.enableAIContext" type="checkbox" :disabled="!canUseAIContext" /></label>

</fieldset>

<fieldset>

<legend>页面交互</legend>

<label class="toggle"><span>显示全文翻译悬浮球</span><input v-model="floatingBallEnabled" type="checkbox" /></label>

<label class="toggle"><span>显示翻译进度面板</span><input v-model="draft.translationProgressPanelEnabled" type="checkbox" /></label>

<label><span>全文快捷键</span><UiSelect v-model="draft.floatingBallHotkey" :append-to="menuContainer" aria-label="全文快捷键"><ElOption v-for="item in options.floatingBallHotkeys" :key="item.value" :value="item.value" :label="item.label" /></UiSelect></label>

<label><span>全文翻译范围</span><UiSelect v-model="draft.fullPageTranslationMode" :append-to="menuContainer" aria-label="全文翻译范围"><ElOption value="viewport" label="按阅读进度（推荐）" /><ElOption value="all" label="立即翻译到网页底部" /></UiSelect></label>

<p class="hint">“立即翻译到网页底部”会处理当前已加载的整页内容，并持续翻译之后新增的内容；它不会自动滚动页面，但可能产生更多请求。</p>

<label><span>悬浮翻译触发</span><UiSelect v-model="draft.hotkey" :append-to="menuContainer" aria-label="悬浮翻译触发"><ElOption v-for="item in hoverOptions" :key="item.value" :value="item.value" :label="item.label" /></UiSelect></label>

<label><span>划词翻译</span><UiSelect v-model="draft.selectionTranslatorMode" :append-to="menuContainer" aria-label="划词翻译"><ElOption value="disabled" label="关闭" /><ElOption value="bilingual" label="原文 + 译文" /><ElOption value="translation-only" label="仅译文" /></UiSelect></label>

<label v-if="draft.selectionTranslatorMode !== 'disabled'"><span>划词触发</span><UiSelect v-model="draft.selectionTranslatorTrigger" :append-to="menuContainer" aria-label="划词触发"><ElOption value="direct" label="直接显示" /><ElOption value="icon" label="翻译图标" /><ElOption value="dot" label="小圆点" /></UiSelect></label>

<label><span>并发翻译数</span><input v-model.number="draft.maxConcurrentTranslations" type="number" min="1" max="20" /></label>

<label class="toggle"><span>界面动画</span><input v-model="draft.animations" type="checkbox" /></label>

<label>

<span>段落加载样式</span>

<div class="translation-loading-style-control">

<UiSelect v-model="draft.translationLoadingStyle" :append-to="menuContainer" :disabled="!draft.animations" aria-label="段落加载样式"><ElOption v-for="item in translationLoadingStyleOptions" :key="item.value" :value="item.value" :label="item.label" /></UiSelect>

<span class="translation-loading-style-reference" aria-label="当前动画参考" :title="selectedTranslationLoadingStyle?.description">

<i aria-hidden="true" />

<TranslationLoadingPreview :loading-style="draft.translationLoadingStyle" :animated="draft.animations" />

</span>

</div>

</label>

<label><span>主题</span><UiSelect v-model="draft.theme" :append-to="menuContainer" aria-label="主题"><ElOption v-for="item in options.theme" :key="item.value" :value="item.value" :label="item.label" /></UiSelect></label>

</fieldset>

<fieldset>

<legend>输入框翻译</legend>

<p class="hint">独立设置输入框的触发方式和翻译偏好。普通文本输入框可用，密码框和富文本编辑器不参与。</p>

<label><span>触发方式</span><UiSelect v-model="draft.inputBoxTranslationTrigger" :append-to="menuContainer" aria-label="输入框翻译触发方式"><ElOption v-for="item in options.inputBoxTranslationTrigger" :key="item.value" :value="item.value" :label="item.label" /></UiSelect></label>

<template v-if="draft.inputBoxTranslationTrigger !== 'disabled'">

<template v-if="draft.inputBoxTranslationTrigger.startsWith('triple_')">

<label><span>三击间隔（毫秒）</span><input v-model.number="draft.inputBoxTranslationInterval" type="number" min="200" max="2000" step="1" /></label>

<p class="hint">相邻两次按键最多等待此时长；默认 1000 毫秒。</p>

<button type="button" @click="draft.inputBoxTranslationInterval = 1000">恢复默认间隔</button>

</template>

<label><span>目标语言</span><UiSelect v-model="draft.inputBoxTranslationTarget" :append-to="menuContainer" filterable aria-label="输入框目标语言"><ElOption v-for="item in options.inputBoxTranslationTarget" :key="item.value" :value="item.value" :label="item.label" /></UiSelect></label>

<label><span>输入框翻译服务</span><UiSelect v-model="draft.inputBoxTranslationService" :append-to="menuContainer" filterable aria-label="输入框翻译服务" @change="draft.inputBoxTranslationModel = ''"><ElOption v-for="item in serviceOptions" :key="item.value" :value="item.value" :label="item.label" /></UiSelect></label>

<p class="hint">使用该服务已保存的连接设置。</p>

<label v-if="servicesType.isUseModel(draft.inputBoxTranslationService)"><span>输入框翻译模型</span><input v-model="draft.inputBoxTranslationModel" :list="inputModelListId" placeholder="留空使用该服务的默认模型" /></label>

<datalist :id="inputModelListId"><option v-for="model in inputModelOptions" :key="model" :value="model" /></datalist>

<details v-if="inputSupportsPrompts">

<summary>输入框翻译提示词</summary>

<p class="hint">留空使用内置的输入框翻译提示词。可用变量：<code v-pre>{{origin}}</code>（原文）、<code v-pre>{{to}}</code>（目标语言）。</p>

<label><span>系统提示词</span><textarea v-model="draft.inputBoxTranslationSystemPrompt" rows="4" /></label>

<button type="button" @click="draft.inputBoxTranslationSystemPrompt = ''">恢复默认系统提示词</button>

<label><span>翻译提示词</span><textarea v-model="draft.inputBoxTranslationPrompt" rows="5" /></label>

<button type="button" @click="draft.inputBoxTranslationPrompt = ''">恢复默认翻译提示词</button>

</details>

</template>

</fieldset>

<fieldset>

<legend>任务调度</legend>

<label><span>每秒最多请求（0=不限）</span><input v-model.number="draft.translationRequestsPerSecond" type="number" min="0" max="1000" /></label>

<label><span>每分钟最多请求（0=不限）</span><input v-model.number="draft.translationRequestsPerMinute" type="number" min="0" max="10000" /></label>

<label><span>失败后最多重试</span><input v-model.number="draft.translationMaxRetries" type="number" min="0" max="10" /></label>

<label><span>退避初始间隔（ms）</span><input v-model.number="draft.translationBackoffBaseMs" type="number" min="100" max="60000" step="100" /></label>

<label><span>退避最大间隔（ms）</span><input v-model.number="draft.translationBackoffMaxMs" type="number" min="1000" max="300000" step="1000" /></label>

<p class="hint">请求限制作用于 userscript 当前页面的共享翻译调度；普通服务重试使用指数退避，并尊重服务端 Retry-After。免费翻译每个服务最多尝试一次，整轮最多 20 秒，不重复全局重试。</p>

</fieldset>

<details>

<summary>高级 AI 请求设置</summary>

<label v-if="isAIService && usesModel" class="toggle"><span>当前模型 Thinking（仅在已适配接口生效，默认关闭）</span><input v-model="selectedModelThinking" type="checkbox" :disabled="!selectedServiceModel" aria-label="当前模型是否启用 Thinking" /></label>

<label><span>自定义请求体（JSON）</span><textarea v-model="draft.customBody[draft.service]" rows="4" placeholder="可选：合并到请求体顶层" /></label>

<label><span>System 提示词</span><textarea v-model="draft.system_role[draft.service]" rows="4" /></label>

<label><span>User 提示词</span><textarea v-model="draft.user_role[draft.service]" rows="5" /></label>

</details>

</div>

<footer>

<span class="status" :class="{ error: statusIsError }">{{ status }}</span>

<div>

<button type="button" class="secondary" :disabled="!hydrated" @click="restoreDefaults">恢复默认</button>

<button type="button" class="secondary" @click="togglePageTranslation">翻译 / 恢复当前页</button>

<button type="button" class="primary" :disabled="saving || !hydrated" @click="save">{{ !hydrated ? '加载设置中…' : saving ? '保存中…' : '保存设置' }}</button>

</div>

</footer>

</section>

</div>

</template>

<script setup lang="ts">

</script>

<style scoped>

</style>