perf: update website create demo

src/components/Form/FormFields/ProtocolSelector/ProtocolSettingDialog.vue

@@ -33,8 +33,10 @@
 </template>
 
 <script>
+import { h } from 'vue'
 import { AutoDataForm, Dialog } from '@/components'
 import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
+import WebScriptExample from '@/components/Form/FormFields/WebScriptExample.vue'
 import { getRuntimeActionMeta } from '@/libs/context/runtime'
 
 export default {
@@ -101,6 +103,7 @@ export default {
               script: {
                 component: JsonEditor,
                 helpText: this.$t('WebScriptStepsHelp'),
+                helpTextFormatter: () => h(WebScriptExample),
                 hidden: (formValue) => !this.$hasLicense() || formValue['autofill'] !== 'script'
               }
             }

src/components/Form/FormFields/WebScriptExample.vue

@@ -0,0 +1,62 @@
+<template>
+  <details class="web-script-example">
+    <summary>{{ $t('WebScriptExampleTitle') }}</summary>
+    <p>{{ $t('WebScriptExampleHelp') }}</p>
+    <el-button text type="primary" native-type="button" @click="copy(example)">
+      <el-icon><CopyDocument /></el-icon>
+      {{ $t('Copy') }}
+    </el-button>
+    <pre><code>{{ example }}</code></pre>
+  </details>
+</template>
+
+<script>
+import { copy } from '@/utils/common/index'
+
+const example = JSON.stringify(
+  [
+    { step: 1, command: 'type', target: 'id=username', value: '{USERNAME}' },
+    { step: 2, command: 'type', target: 'id=password', value: '{SECRET}' },
+    { step: 3, command: 'click', target: 'id=login_button' },
+    { step: 4, command: 'interactive', target: 'css=#mfa-dialog', optional: false },
+    { step: 5, command: 'success', target: 'css=#dashboard' }
+  ],
+  null,
+  2
+)
+
+export default {
+  name: 'WebScriptExample',
+  data() {
+    return { example }
+  },
+  methods: { copy }
+}
+</script>
+
+<style lang="scss" scoped>
+.web-script-example {
+  min-width: 0;
+
+  summary {
+    color: var(--color-link);
+    cursor: pointer;
+  }
+
+  p {
+    margin: 8px 0;
+  }
+
+  pre {
+    max-height: 360px;
+    margin: 8px 0 0;
+    padding: 12px;
+    overflow: auto;
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    color: var(--el-text-color-primary);
+    background: var(--el-fill-color-light);
+    line-height: 1.5;
+  }
+}
+</style>

src/i18n/langs/en.json

@@ -2465,7 +2465,9 @@
   "ChatAIFieldGatewayEnabled": "Gateway enabled",
   "ChatAIFieldHasPackage": "Has package",
   "ChatAIFieldUpdatedBy": "Updated by",
-  "WebScriptStepsHelp": "Steps may specify an origin. interactive pauses for verification; success must be the final step. Web Proxy supports navigation within one window; frames and popup login windows are not supported.",
+  "WebScriptStepsHelp": "interactive pauses for verification; success waits for the target element to become visible to confirm a successful login and must be the final step. Web Proxy supports navigation within one window; frames and popup login windows are not supported.",
+  "WebScriptExampleTitle": "View script example",
+  "WebScriptExampleHelp": "Example for login on the same site. Adjust target selectors to match the page. With optional set to false, interactive waits for the verification area to appear. Complete verification, then click “Complete interaction” to continue. Remove this step if manual verification is not needed.",
   "WebAllowedSites": "Allowed sites",
   "WebAllowedSitesHelp": "Leave empty to allow all sites. When configured, navigation is limited to the asset address and these sites. Enter full HTTP/HTTPS origins (scheme, host and port), without paths or wildcards, and press Enter. Page resources are unaffected.",
   "VirtualAppImages": "Images",

src/i18n/langs/es.json

@@ -2349,7 +2349,9 @@
   "TerminateSelected": "Interrumpir seleccionadas",
   "TerminateSessionConfirmMsg": "¿Interrumpir las {count} sesiones seleccionadas? Se cerrarán sus conexiones.",
   "TerminateTaskSendPartialMsg": "Se enviaron tareas de interrupción para {count} de {total} sesiones. Es posible que las demás hayan finalizado o no sean accesibles. Actualice para comprobarlo.",
-  "WebScriptStepsHelp": "Steps may specify an origin. interactive pauses for verification; success must be the final step. Web Proxy supports navigation within one window; frames and popup login windows are not supported.",
+  "WebScriptStepsHelp": "interactive pauses for verification; success waits for the target element to become visible to confirm a successful login and must be the final step. Web Proxy supports navigation within one window; frames and popup login windows are not supported.",
+  "WebScriptExampleTitle": "View script example",
+  "WebScriptExampleHelp": "Example for login on the same site. Adjust target selectors to match the page. With optional set to false, interactive waits for the verification area to appear. Complete verification, then click “Complete interaction” to continue. Remove this step if manual verification is not needed.",
   "WebAllowedSites": "Sitios permitidos",
   "WebAllowedSitesHelp": "Vacío permite todos los sitios. Si se configura, la navegación se limita a la dirección del activo y estos sitios. Introduzca orígenes HTTP/HTTPS completos, sin rutas ni comodines, y pulse Intro. Los recursos de la página no se restringen.",
   "VirtualAppCreate": "Crear aplicación virtual",

src/i18n/langs/fr.json

@@ -2530,7 +2530,9 @@
   "ChatAIFieldGatewayEnabled": "Passerelle activée",
   "ChatAIFieldHasPackage": "Possède un paquet",
   "ChatAIFieldUpdatedBy": "Mis à jour par",
-  "WebScriptStepsHelp": "Les étapes peuvent spécifier une origine. interactive suspend l’exécution pour vérification ; success doit être la dernière étape. Web Proxy permet de naviguer dans une seule fenêtre ; les cadres et les fenêtres de connexion contextuelles ne sont pas pris en charge.",
+  "WebScriptStepsHelp": "interactive suspend l’exécution pour vérification ; success attend que l’élément cible soit visible pour confirmer la réussite de la connexion et doit être la dernière étape. Web Proxy permet de naviguer dans une seule fenêtre ; les cadres et les fenêtres de connexion contextuelles ne sont pas pris en charge.",
+  "WebScriptExampleTitle": "Voir un exemple de script",
+  "WebScriptExampleHelp": "Exemple de connexion sur un même site. Adaptez les sélecteurs target à la page. Avec optional défini sur false, interactive attend l’apparition de la zone de vérification. Effectuez la vérification, puis cliquez sur « Terminer l’interaction » pour continuer. Supprimez cette étape si aucune vérification manuelle n’est nécessaire.",
   "WebAllowedSites": "Sites autorisés",
   "WebAllowedSitesHelp": "Laissez vide pour autoriser tous les sites. Sinon, la navigation est limitée à l’adresse de l’actif et à ces sites. Saisissez des origines HTTP/HTTPS complètes (schéma, hôte et port), sans chemin ni caractère générique, puis appuyez sur Entrée. Les ressources des pages ne sont pas affectées.",
   "VirtualAppImages": "Images",

src/i18n/langs/ja.json

@@ -2452,7 +2452,9 @@
   "ChatAIFieldGatewayEnabled": "ゲートウェイ有効",
   "ChatAIFieldHasPackage": "パッケージあり",
   "ChatAIFieldUpdatedBy": "更新者",
-  "WebScriptStepsHelp": "Steps may specify an origin. interactive pauses for verification; success must be the final step. Web Proxy supports navigation within one window; frames and popup login windows are not supported.",
+  "WebScriptStepsHelp": "interactive pauses for verification; success waits for the target element to become visible to confirm a successful login and must be the final step. Web Proxy supports navigation within one window; frames and popup login windows are not supported.",
+  "WebScriptExampleTitle": "View script example",
+  "WebScriptExampleHelp": "Example for login on the same site. Adjust target selectors to match the page. With optional set to false, interactive waits for the verification area to appear. Complete verification, then click “Complete interaction” to continue. Remove this step if manual verification is not needed.",
   "WebAllowedSites": "アクセス許可サイト",
   "WebAllowedSitesHelp": "空欄の場合はすべてのサイトを許可します。設定すると、アセットのアドレスと指定サイトへの移動のみ許可します。パスやワイルドカードを含まない完全な HTTP/HTTPS オリジンを入力し、Enter で確定してください。ページ内のリソースには適用されません。",
   "VirtualAppImages": "イメージ",

src/i18n/langs/ko.json

@@ -2349,7 +2349,9 @@
   "TerminateSelected": "선택한 세션 종료",
   "TerminateSessionConfirmMsg": "선택한 세션 {count}개를 종료하시겠습니까? 연결이 끊어집니다.",
   "TerminateTaskSendPartialMsg": "세션 {total}개 중 {count}개에 종료 작업을 전송했습니다. 나머지 세션은 이미 종료되었거나 접근할 수 없을 수 있습니다. 새로고침하여 확인하세요.",
-  "WebScriptStepsHelp": "Steps may specify an origin. interactive pauses for verification; success must be the final step. Web Proxy supports navigation within one window; frames and popup login windows are not supported.",
+  "WebScriptStepsHelp": "interactive pauses for verification; success waits for the target element to become visible to confirm a successful login and must be the final step. Web Proxy supports navigation within one window; frames and popup login windows are not supported.",
+  "WebScriptExampleTitle": "View script example",
+  "WebScriptExampleHelp": "Example for login on the same site. Adjust target selectors to match the page. With optional set to false, interactive waits for the verification area to appear. Complete verification, then click “Complete interaction” to continue. Remove this step if manual verification is not needed.",
   "WebAllowedSites": "허용 사이트",
   "WebAllowedSitesHelp": "비워 두면 모든 사이트를 허용합니다. 설정하면 자산 주소와 지정 사이트로만 이동할 수 있습니다. 경로나 와일드카드가 없는 전체 HTTP/HTTPS 출처를 입력하고 Enter를 누르세요. 페이지 리소스에는 적용되지 않습니다.",
   "VirtualAppCreate": "가상 애플리케이션 생성",

src/i18n/langs/pt_br.json

@@ -2349,7 +2349,9 @@
   "TerminateSelected": "Encerrar selecionadas",
   "TerminateSessionConfirmMsg": "Encerrar as {count} sessões selecionadas? As conexões serão fechadas.",
   "TerminateTaskSendPartialMsg": "Foram enviadas tarefas de encerramento para {count} de {total} sessões. As demais podem ter terminado ou estar inacessíveis. Atualize para verificar.",
-  "WebScriptStepsHelp": "Steps may specify an origin. interactive pauses for verification; success must be the final step. Web Proxy supports navigation within one window; frames and popup login windows are not supported.",
+  "WebScriptStepsHelp": "interactive pauses for verification; success waits for the target element to become visible to confirm a successful login and must be the final step. Web Proxy supports navigation within one window; frames and popup login windows are not supported.",
+  "WebScriptExampleTitle": "View script example",
+  "WebScriptExampleHelp": "Example for login on the same site. Adjust target selectors to match the page. With optional set to false, interactive waits for the verification area to appear. Complete verification, then click “Complete interaction” to continue. Remove this step if manual verification is not needed.",
   "WebAllowedSites": "Sites permitidos",
   "WebAllowedSitesHelp": "Deixe vazio para permitir todos os sites. Quando configurado, a navegação fica limitada ao endereço do ativo e a estes sites. Digite origens HTTP/HTTPS completas, sem caminhos ou curingas, e pressione Enter. Os recursos da página não são restringidos.",
   "VirtualAppCreate": "Criar aplicativo virtual",

src/i18n/langs/ru.json

@@ -2349,7 +2349,9 @@
   "TerminateSelected": "Завершить выбранные",
   "TerminateSessionConfirmMsg": "Завершить выбранные сеансы ({count})? Их соединения будут закрыты.",
   "TerminateTaskSendPartialMsg": "Задачи завершения отправлены для {count} из {total} сеансов. Остальные сеансы могли уже завершиться или быть недоступны. Обновите страницу для проверки.",
-  "WebScriptStepsHelp": "Steps may specify an origin. interactive pauses for verification; success must be the final step. Web Proxy supports navigation within one window; frames and popup login windows are not supported.",
+  "WebScriptStepsHelp": "interactive pauses for verification; success waits for the target element to become visible to confirm a successful login and must be the final step. Web Proxy supports navigation within one window; frames and popup login windows are not supported.",
+  "WebScriptExampleTitle": "View script example",
+  "WebScriptExampleHelp": "Example for login on the same site. Adjust target selectors to match the page. With optional set to false, interactive waits for the verification area to appear. Complete verification, then click “Complete interaction” to continue. Remove this step if manual verification is not needed.",
   "WebAllowedSites": "Разрешённые сайты",
   "WebAllowedSitesHelp": "Пустое поле разрешает все сайты. При настройке переходы ограничены адресом актива и указанными сайтами. Введите полный источник HTTP/HTTPS без пути и подстановочных знаков, затем нажмите Enter. Ресурсы страницы не ограничиваются.",
   "VirtualAppCreate": "Создать виртуальное приложение",

src/i18n/langs/vi.json

@@ -2349,7 +2349,9 @@
   "TerminateSelected": "Ngắt các phiên đã chọn",
   "TerminateSessionConfirmMsg": "Ngắt {count} phiên đã chọn? Các kết nối sẽ bị đóng.",
   "TerminateTaskSendPartialMsg": "Đã gửi tác vụ ngắt cho {count} trong số {total} phiên. Các phiên còn lại có thể đã kết thúc hoặc không thể truy cập. Vui lòng làm mới để kiểm tra.",
-  "WebScriptStepsHelp": "Steps may specify an origin. interactive pauses for verification; success must be the final step. Web Proxy supports navigation within one window; frames and popup login windows are not supported.",
+  "WebScriptStepsHelp": "interactive pauses for verification; success waits for the target element to become visible to confirm a successful login and must be the final step. Web Proxy supports navigation within one window; frames and popup login windows are not supported.",
+  "WebScriptExampleTitle": "View script example",
+  "WebScriptExampleHelp": "Example for login on the same site. Adjust target selectors to match the page. With optional set to false, interactive waits for the verification area to appear. Complete verification, then click “Complete interaction” to continue. Remove this step if manual verification is not needed.",
   "WebAllowedSites": "Trang web được phép",
   "WebAllowedSitesHelp": "Để trống để cho phép mọi trang web. Khi được cấu hình, chỉ cho phép chuyển đến địa chỉ tài sản và các trang này. Nhập nguồn HTTP/HTTPS đầy đủ, không có đường dẫn hoặc ký tự đại diện, rồi nhấn Enter. Tài nguyên trang không bị hạn chế.",
   "VirtualAppCreate": "Tạo ứng dụng ảo",

src/i18n/langs/zh.json

@@ -2450,7 +2450,9 @@
   "ChatAIFieldGatewayEnabled": "网关已启用",
   "ChatAIFieldHasPackage": "包含安装包",
   "ChatAIFieldUpdatedBy": "更新者",
-  "WebScriptStepsHelp": "每步可指定 origin。interactive 暂停等待人工验证；success 必须是最后一步。Web Proxy 支持同一窗口内的页面跳转，暂不支持 iframe 和独立弹窗登录。",
+  "WebScriptStepsHelp": "interactive 暂停等待人工验证；success 等待指定元素可见以确认登录成功，必须是最后一步。Web Proxy 支持同一窗口内的页面跳转，暂不支持 iframe 和独立弹窗登录。",
+  "WebScriptExampleTitle": "查看脚本示例",
+  "WebScriptExampleHelp": "同一站点登录示例，请按实际页面修改 target。interactive 的 optional 为 false 时会等待验证区域出现；人工完成验证后，点击“完成交互”继续。无需人工验证时可删除该步骤。",
   "WebAllowedSites": "访问白名单",
   "WebAllowedSitesHelp": "留空允许访问所有站点。配置后，只允许打开资产地址及白名单中的站点。输入完整 HTTP/HTTPS 站点地址（协议、主机和端口），不含路径或通配符，按回车确认；页面资源加载不受限制。",
   "PublishAllVirtualApps": "发布所有虚拟应用",

src/i18n/langs/zh_hant.json

@@ -2442,7 +2442,9 @@
   "ChatAIFieldGatewayEnabled": "網關已啟用",
   "ChatAIFieldHasPackage": "包含安裝套件",
   "ChatAIFieldUpdatedBy": "更新者",
-  "WebScriptStepsHelp": "每步可指定 origin。interactive 暫停等待人工驗證；success 必須是最後一步。Web Proxy 支援同一視窗內的頁面跳轉，暫不支援 iframe 和獨立彈出視窗登入。",
+  "WebScriptStepsHelp": "interactive 暫停等待人工驗證；success 等待指定元素可見以確認登入成功，必須是最後一步。Web Proxy 支援同一視窗內的頁面跳轉，暫不支援 iframe 和獨立彈出視窗登入。",
+  "WebScriptExampleTitle": "查看腳本範例",
+  "WebScriptExampleHelp": "同一網站登入範例，請依實際頁面修改 target。interactive 的 optional 為 false 時會等待驗證區域出現；人工完成驗證後，點擊「完成互動」繼續。不需人工驗證時可刪除該步驟。",
   "WebAllowedSites": "存取白名單",
   "WebAllowedSitesHelp": "留空允許存取所有站點。設定後，只允許開啟資產位址及白名單中的站點。輸入完整 HTTP/HTTPS 站點位址（協定、主機和連接埠），不含路徑或萬用字元，按 Enter 確認；頁面資源載入不受限制。",
   "PublishAllVirtualApps": "發佈所有虛擬應用",

src/main.js

@@ -1,6 +1,6 @@
 import './utils/browser-polyfills'
 import { createApp } from 'vue'
-import ElementPlus from 'element-plus'
+import ElementPlus, { ElTooltip } from 'element-plus'
 import { getElementLocale } from '@/i18n/langs'
 import { getLangCode } from '@/i18n/utils'
 import 'element-plus/dist/index.css'
@@ -52,6 +52,9 @@ console.log(
 )
 
 async function initApp() {
+  // 统一 Tooltip 默认显示延迟，复制配置以免影响共享该 prop 的其他组件。
+  ElTooltip.props.showAfter = { ...ElTooltip.props.showAfter, default: 500 }
+
   const app = createApp(App)
 
   // i18n helpers (set immediately to avoid undefined)

src/views/assets/Asset/AssetCreateUpdate/WebCreateUpdate.vue

@@ -3,6 +3,8 @@
 </template>
 
 <script>
+import { h } from 'vue'
+import WebScriptExample from '@/components/Form/FormFields/WebScriptExample.vue'
 import BaseAssetCreateUpdate from './BaseAssetCreateUpdate'
 
 export default {
@@ -73,6 +75,7 @@ export default {
         },
         script: {
           helpText: this.$t('WebScriptStepsHelp'),
+          helpTextFormatter: () => h(WebScriptExample),
           hidden: (formValue) => !this.$hasLicense() || formValue['autofill'] !== 'script'
         }
       }