chore: 样式优化

Author: xream

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.26.3",
+  "version": "2.26.4",
   "private": true,
   "packageManager": "pnpm@11.0.9",
   "scripts": {

src/locales/en.ts

@@ -706,13 +706,14 @@ export default {
           openEditorBtn: "Open Code Editor",
           tipsTitle: "Script Filter Tips",
           tipsDes: "Use a JavaScript script to filter nodes",
-          paramsEdit: 'Edit Parameters',
+          paramsExpand: 'Show Parameters',
+          paramsCollapse: 'Hide Parameters',
           helpTitle: 'Tips',
           noCache: 'noCache',
           insecure: 'insecure',
           noCacheTips: 'When the cache is turned off, the script is refetched for each request.',
           insecureTips: 'When the insecure is turned on, the server certificate will not be verified.',
-          paramsEditTips: 'Visual parameter editor, duplicate key names will adopt the principle of prioritizing the latter value.',
+          paramsEditTips: 'Visual parameter editor, duplicate key names will adopt the principle of prioritizing the latter value. For historical reasons, boolean switches are determined by whether the parameter is passed; non-empty strings such as `false` are also treated as enabled. If you do not want to enable a parameter, do not pass it.',
           paramsAdd: 'Add',
           paramsDelete: 'Delete',
           paramsOptions: 'Options',
@@ -728,13 +729,14 @@ export default {
           openEditorBtn: "Open Code Editor",
           tipsTitle: "Script Operator Tips",
           tipsDes: "Use a JavaScript script to modify node information",
-          paramsEdit: 'Edit Parameters',
+          paramsExpand: 'Show Parameters',
+          paramsCollapse: 'Hide Parameters',
           noCache: 'noCache',
           insecure: 'insecure',
           helpTitle: 'Tips',
           noCacheTips: 'When the cache is turned off, the script is refetched for each request.',
           insecureTips: 'When the insecure is turned on, the server certificate will not be verified.',
-          paramsEditTips: 'Visual parameter editor, duplicate key names will adopt the principle of prioritizing the latter value.',
+          paramsEditTips: 'Visual parameter editor, duplicate key names will adopt the principle of prioritizing the latter value. For historical reasons, boolean switches are determined by whether the parameter is passed; non-empty strings such as `false` are also treated as enabled. If you do not want to enable a parameter, do not pass it.',
           paramsAdd: 'Add',
           paramsDelete: 'Delete',
           paramsOptions: 'Options',
@@ -751,13 +753,14 @@ export default {
           tipsTitle: "Modify Response Tips",
           tipsDes:
             "Use a JavaScript script to modify the status code, headers, or body before sending the download response. Instant preview does not execute it.",
-          paramsEdit: 'Edit Parameters',
+          paramsExpand: 'Show Parameters',
+          paramsCollapse: 'Hide Parameters',
           noCache: 'noCache',
           insecure: 'insecure',
           helpTitle: 'Tips',
           noCacheTips: 'When the cache is turned off, the script is refetched for each request.',
           insecureTips: 'When the insecure is turned on, the server certificate will not be verified.',
-          paramsEditTips: 'Visual parameter editor, duplicate key names will adopt the principle of prioritizing the latter value.',
+          paramsEditTips: 'Visual parameter editor, duplicate key names will adopt the principle of prioritizing the latter value. For historical reasons, boolean switches are determined by whether the parameter is passed; non-empty strings such as `false` are also treated as enabled. If you do not want to enable a parameter, do not pass it.',
           paramsAdd: 'Add',
           paramsDelete: 'Delete',
           paramsOptions: 'Options',

src/locales/ru.ts

@@ -745,13 +745,14 @@ export default {
           "openEditorBtn": "Открыть редактор кода",
           "tipsTitle": "Подсказки по скрипт-фильтру",
           "tipsDes": "Использование JavaScript-скрипта для кастомной фильтрации узлов",
-          "paramsEdit": "Редактировать параметры",
+          "paramsExpand": "Показать параметры",
+          "paramsCollapse": "Скрыть параметры",
           "helpTitle": "Советы",
           "noCache": "noCache",
           "insecure": "insecure",
           "noCacheTips": "Когда кэш выключен, скрипт будет заново скачиваться при каждом запросе подписки.",
           "insecureTips": "Когда флаг insecure включен, SSL-сертификат сервера скрипта проверяться не будет.",
-          "paramsEditTips": "Визуальный редактор параметров. При дублировании ключей приоритет отдается последнему указанному значению.",
+          "paramsEditTips": "Визуальный редактор параметров. При дублировании ключей приоритет отдается последнему указанному значению. По историческим причинам логические переключатели определяются по факту передачи параметра; непустые строки, например `false`, также считаются включением. Если не нужно включать параметр, не передавайте его.",
           "paramsAdd": "Добавить",
           "paramsDelete": "Удалить",
           "paramsOptions": "Опции",
@@ -772,13 +773,14 @@ export default {
           "openEditorBtn": "Открыть редактор кода",
           "tipsTitle": "Подсказки по JS-модификатору",
           "tipsDes": "Использование JavaScript-скрипта для изменения любых полей информации об узлах",
-          "paramsEdit": "Редактировать параметры",
+          "paramsExpand": "Показать параметры",
+          "paramsCollapse": "Скрыть параметры",
           "noCache": "noCache",
           "insecure": "insecure",
           "helpTitle": "Советы",
           "noCacheTips": "Когда кэш выключен, скрипт будет заново скачиваться при каждом запросе подписки.",
           "insecureTips": "Когда флаг insecure включен, SSL-сертификат сервера скрипта проверяться не будет.",
-          "paramsEditTips": "Визуальный редактор параметров. При дублировании ключей приоритет отдается последнему указанному значению.",
+          "paramsEditTips": "Визуальный редактор параметров. При дублировании ключей приоритет отдается последнему указанному значению. По историческим причинам логические переключатели определяются по факту передачи параметра; непустые строки, например `false`, также считаются включением. Если не нужно включать параметр, не передавайте его.",
           "paramsAdd": "Добавить",
           "paramsDelete": "Удалить",
           "paramsOptions": "Опции",
@@ -799,13 +801,14 @@ export default {
           "openEditorBtn": "Открыть редактор кода",
           "tipsTitle": "Подсказки по Modify Response",
           "tipsDes": "Использование JavaScript-скрипта для модификации статус-кода, заголовков или тела ответа прямо перед отправкой финального файла клиенту. В мгновенном предпросмотре интерфейса не выполняется.",
-          "paramsEdit": "Редактировать параметры",
+          "paramsExpand": "Показать параметры",
+          "paramsCollapse": "Скрыть параметры",
           "noCache": "noCache",
           "insecure": "insecure",
           "helpTitle": "Советы",
           "noCacheTips": "Когда кэш выключен, скрипт будет заново скачиваться при каждом запросе подписки.",
           "insecureTips": "Когда флаг insecure включен, SSL-сертификат сервера скрипта проверяться не будет.",
-          "paramsEditTips": "Визуальный редактор параметров. При дублировании ключей приоритет отдается последнему указанному значению.",
+          "paramsEditTips": "Визуальный редактор параметров. При дублировании ключей приоритет отдается последнему указанному значению. По историческим причинам логические переключатели определяются по факту передачи параметра; непустые строки, например `false`, также считаются включением. Если не нужно включать параметр, не передавайте его.",
           "paramsAdd": "Добавить",
           "paramsDelete": "Удалить",
           "paramsOptions": "Опции",

src/locales/zh.ts

@@ -550,13 +550,14 @@ export default {
           openEditorBtn: '打开脚本编辑器',
           tipsTitle: '脚本操作操作提示',
           tipsDes: '使用一段 JavaScript 脚本来修改节点信息',
-          paramsEdit: '参数编辑',
+          paramsExpand: '展开参数',
+          paramsCollapse: '收起参数',
           noCache: '关闭缓存',
           insecure: '不验证服务器证书',
           helpTitle: '温馨提示',
           noCacheTips: '关闭缓存后, 每次请求都会重新获取脚本内容',
           insecureTips: '开启后，将不对服务器证书进行验证。',
-          paramsEditTips: '可视化参数编辑器，重复键名将采用后值优先原则',
+          paramsEditTips: '可视化参数编辑器，重复键名将采用后值优先原则。由于历史遗留原因，布尔开关按“是否传入参数”判断，`false` 等非空字符串也会被视为启用。若不想启用某个参数就不要传这参数。',
           paramsAdd: '添加参数',
           paramsDelete: '删除',
           paramsOptions: '操作',
@@ -571,13 +572,14 @@ export default {
           openEditorBtn: '打开脚本编辑器',
           tipsTitle: '修改响应提示',
           tipsDes: '使用一段 JavaScript 脚本在发送下载响应前修改状态码、响应头或响应体；即时预览不会执行',
-          paramsEdit: '参数编辑',
+          paramsExpand: '展开参数',
+          paramsCollapse: '收起参数',
           noCache: '关闭缓存',
           insecure: '不验证服务器证书',
           helpTitle: '温馨提示',
           noCacheTips: '关闭缓存后, 每次请求都会重新获取脚本内容',
           insecureTips: '开启后，将不对服务器证书进行验证。',
-          paramsEditTips: '可视化参数编辑器，重复键名将采用后值优先原则',
+          paramsEditTips: '可视化参数编辑器，重复键名将采用后值优先原则。由于历史遗留原因，布尔开关按“是否传入参数”判断，`false` 等非空字符串也会被视为启用。若不想启用某个参数就不要传这参数。',
           paramsAdd: '添加参数',
           paramsDelete: '删除',
           paramsOptions: '操作',
@@ -728,13 +730,14 @@ export default {
           openEditorBtn: '打开脚本编辑器',
           tipsTitle: '脚本过滤器操作提示',
           tipsDes: '使用一段 JavaScript 脚本来过滤节点',
-          paramsEdit: '参数编辑',
+          paramsExpand: '展开参数',
+          paramsCollapse: '收起参数',
           noCache: '关闭缓存',
           insecure: '不验证服务器证书',
           helpTitle: '温馨提示',
           noCacheTips: '关闭缓存后, 每次请求都会重新获取脚本内容',
           insecureTips: '开启后，将不对服务器证书进行验证。',
-          paramsEditTips: '可视化参数编辑器，重复键名将采用后值优先原则',
+          paramsEditTips: '可视化参数编辑器，重复键名将采用后值优先原则。由于历史遗留原因，布尔开关按“是否传入参数”判断，`false` 等非空字符串也会被视为启用。若不想启用某个参数就不要传这参数。',
           paramsAdd: '添加参数',
           paramsDelete: '删除',
           paramsOptions: '操作',

src/views/editor/components/Script.vue

@@ -58,17 +58,30 @@
       </div>
     </div>
 
-    <!-- 参数编辑控制部分 -->
+    <!-- 参数控制部分 -->
     <div class="input-wrapper-title">
-      <!-- 参数编辑开关 -->
+      <!-- 参数区域展开开关 -->
       <div class="title-label">
-        <nut-checkbox v-model="showKeyValue" class="my-switch" />
         <button
-          class="switch-label"
+          class="params-toggle"
           type="button"
+          :aria-expanded="showKeyValue"
           @click="toggleShowKeyValue"
         >
-          {{ $t(`editorPage.subConfig.nodeActions['${type}'].paramsEdit`) }}
+          <nut-icon
+            class="params-toggle-icon"
+            :name="showKeyValue ? 'rect-down' : 'rect-right'"
+            size="12px"
+          />
+          <span>
+            {{
+              $t(
+                `editorPage.subConfig.nodeActions['${type}'].${
+                  showKeyValue ? 'paramsCollapse' : 'paramsExpand'
+                }`,
+              )
+            }}
+          </span>
         </button>
         <font-awesome-icon
           class="icon"
@@ -807,6 +820,34 @@ watch(
       user-select: none;
     }
 
+    .params-toggle {
+      background: none;
+      border: none;
+      color: inherit;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      font: inherit;
+      padding: 0;
+      user-select: none;
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--primary-color);
+        outline-offset: 2px;
+        border-radius: 4px;
+      }
+
+      .params-toggle-icon {
+        color: var(--unimportant-icon-color);
+        flex-shrink: 0;
+      }
+    }
+
     .icon {
       margin-left: 4px;
       color: var(--unimportant-icon-color);