feat(webui): redesign LLM settings section

- Rename "Experimental Setting" to "LLM Settings" with cleaner labels
- Replace jarring yellow warning banner with subtle themed notice
- Only show config fields when LLM is enabled (slide-fade transition)
- Add gpt-4o and gpt-4o-mini to model options
- Use scoped CSS instead of UnoCSS utility classes for the section
- Update i18n labels for both en and zh-CN

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: EstrellaXD

webui/src/components/setting/config-openai.vue

@@ -7,15 +7,10 @@ const { t } = useMyI18n();
 const { getSettingGroup } = useConfigStore();
 
 const openAI = getSettingGroup('experimental_openai');
-const openAIModels: OpenAIModel = ['gpt-3.5-turbo'];
+const openAIModels: OpenAIModel = ['gpt-4o', 'gpt-4o-mini', 'gpt-3.5-turbo'];
 const openAITypes: OpenAIType = ['openai', 'azure'];
 
-const sharedItems: SettingItem<ExperimentalOpenAI>[] = [
-  {
-    configKey: 'enable',
-    label: () => t('config.experimental_openai_set.enable'),
-    type: 'switch',
-  },
+const providerItems: SettingItem<ExperimentalOpenAI>[] = [
   {
     configKey: 'api_type',
     label: () => t('config.experimental_openai_set.api_type'),
@@ -30,7 +25,7 @@ const sharedItems: SettingItem<ExperimentalOpenAI>[] = [
     type: 'input',
     prop: {
       type: 'password',
-      placeholder: 'e.g: sk-3Bl****w2E9kW',
+      placeholder: 'sk-...',
     },
   },
   {
@@ -39,12 +34,12 @@ const sharedItems: SettingItem<ExperimentalOpenAI>[] = [
     type: 'input',
     prop: {
       type: 'url',
-      placeholder: 'OpenAI API Base URL',
+      placeholder: 'https://api.openai.com/v1',
     },
   },
 ];
+
 const openAIItems: SettingItem<ExperimentalOpenAI>[] = [
-  ...sharedItems,
   {
     configKey: 'model',
     label: () => t('config.experimental_openai_set.model'),
@@ -56,14 +51,13 @@ const openAIItems: SettingItem<ExperimentalOpenAI>[] = [
 ];
 
 const azureItems: SettingItem<ExperimentalOpenAI>[] = [
-  ...sharedItems,
   {
     configKey: 'api_version',
     label: () => t('config.experimental_openai_set.api_version'),
     type: 'input',
     prop: {
       type: 'text',
-      placeholder: 'e.g: 2023-05-15',
+      placeholder: '2024-02-01',
     },
   },
   {
@@ -72,26 +66,87 @@ const azureItems: SettingItem<ExperimentalOpenAI>[] = [
     type: 'input',
     prop: {
       type: 'text',
-      placeholder: 'e.g: gpt-35-turbo',
+      placeholder: 'gpt-4o',
     },
   },
 ];
 </script>
 
 <template>
   <ab-fold-panel :title="$t('config.experimental_openai_set.title')">
-    <div fx-cer gap-2 mb-4 p-2 bg-amber-300 rounded-4>
-      <Caution />
-      <span>{{ $t('config.experimental_openai_set.warning') }}</span>
-    </div>
+    <div class="openai-section">
+      <div class="openai-notice">
+        <Caution size="16" />
+        <span>{{ $t('config.experimental_openai_set.warning') }}</span>
+      </div>
 
-    <div space-y-8>
       <ab-setting
-        v-for="i in openAI.api_type === 'azure' ? azureItems : openAIItems"
-        :key="i.configKey"
-        v-bind="i"
-        v-model:data="openAI[i.configKey]"
-      ></ab-setting>
+        config-key="enable"
+        :label="() => t('config.experimental_openai_set.enable')"
+        type="switch"
+        v-model:data="openAI.enable"
+      />
+
+      <transition name="slide-fade">
+        <div v-if="openAI.enable" class="openai-config">
+          <ab-setting
+            v-for="i in providerItems"
+            :key="i.configKey"
+            v-bind="i"
+            v-model:data="openAI[i.configKey]"
+          />
+
+          <ab-setting
+            v-for="i in openAI.api_type === 'azure' ? azureItems : openAIItems"
+            :key="i.configKey"
+            v-bind="i"
+            v-model:data="openAI[i.configKey]"
+          />
+        </div>
+      </transition>
     </div>
   </ab-fold-panel>
 </template>
+
+<style lang="scss" scoped>
+.openai-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.openai-notice {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
+  color: var(--color-warning);
+  font-size: 12px;
+  transition: background-color var(--transition-normal),
+              border-color var(--transition-normal);
+}
+
+.openai-config {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-top: 4px;
+}
+
+.slide-fade-enter-active {
+  transition: all 0.2s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.15s ease-in;
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>

webui/src/i18n/en.json

@@ -12,15 +12,15 @@
       "username": "Username"
     },
     "experimental_openai_set": {
-      "api_base": "OpenAI API Base URL (Azure entrypoint)",
-      "api_key": "OpenAI API Key",
-      "api_type": "OpenAI API Type",
-      "api_version": "Azure OpenAI Version",
-      "deployment_id": "Azure OpenAI Deployment ID",
-      "enable": "Enable OpenAI",
-      "model": "OpenAI Model",
-      "title": "Experimental Setting",
-      "warning": "Warning: Experimental feature is not yet stable. Please use with caution."
+      "api_base": "API Base URL",
+      "api_key": "API Key",
+      "api_type": "Provider",
+      "api_version": "API Version",
+      "deployment_id": "Deployment ID",
+      "enable": "Enable LLM Parsing",
+      "model": "Model",
+      "title": "LLM Settings",
+      "warning": "Experimental: LLM-based anime title parsing may produce inaccurate results."
     },
     "manage_set": {
       "delete_bad_torrent": "Delete Bad Torrent",

webui/src/i18n/zh-CN.json

@@ -12,15 +12,15 @@
       "username": "用户名"
     },
     "experimental_openai_set": {
-      "api_base": "OpenAI API Base URL (Azure entrypoint)",
-      "api_key": "OpenAI API Key",
-      "api_type": "OpenAI API 类型",
-      "api_version": "Azure OpenAI 版本",
-      "deployment_id": "Azure OpenAI Deployment ID",
-      "enable": "启用 OpenAI",
-      "model": "OpenAI 模型",
-      "title": "实验功能设置",
-      "warning": "警告：实验功能尚未稳定，请谨慎使用"
+      "api_base": "API 地址",
+      "api_key": "API 密钥",
+      "api_type": "服务商",
+      "api_version": "API 版本",
+      "deployment_id": "部署 ID",
+      "enable": "启用 LLM 解析",
+      "model": "模型",
+      "title": "LLM 设置",
+      "warning": "实验功能：基于 LLM 的番剧标题解析可能产生不准确的结果。"
     },
     "manage_set": {
       "delete_bad_torrent": "删除坏种",

webui/types/config.ts

@@ -15,7 +15,7 @@ export type ProxyType = ['http', 'https', 'socks5'];
 /** 通知类型 */
 export type NotificationType = ['telegram', 'server-chan', 'bark', 'wecom'];
 /** OpenAI Model List */
-export type OpenAIModel = ['gpt-3.5-turbo'];
+export type OpenAIModel = ['gpt-4o', 'gpt-4o-mini', 'gpt-3.5-turbo'];
 /** OpenAI API Type */
 export type OpenAIType = ['openai', 'azure'];