From 86678e368e9309d23257d1b86fabc04877b12eec Mon Sep 17 00:00:00 2001
From: Eric <xplzv@126.com>
Date: Tue, 11 Aug 2026 22:51:17 +0800
Subject: [PATCH] feat: complete remote session UI integration for lion

---
 .env.development                              |   3 +-
 nuxt.config.ts                                |  39 +-
 src-tauri/capabilities/main.json              |   1 +
 ui/components/lion/LionProvider.vue           |  32 +-
 ui/lion/README.md                             |   4 +-
 ui/lion/api/index.ts                          | 102 ++++-
 ui/lion/components/CardContainer/index.vue    |   8 +-
 ui/lion/components/ClipBoardText.vue          |  40 +-
 ui/lion/components/FileManager.vue            | 312 +++++++++++----
 ui/lion/components/Osk.vue                    | 245 ++++++------
 ui/lion/components/OtherOption.vue            |  34 +-
 ui/lion/components/SessionShare/index.vue     |  39 +-
 .../SessionShare/widget/CreateLink.vue        | 259 +++++++------
 .../SessionShare/widget/UserItem.vue          |  10 +-
 ui/lion/hooks/useColor.ts                     | 205 ----------
 ui/lion/hooks/useGuacamoleClient.ts           | 360 +++++++++++-------
 ui/lion/hooks/useLionConnectTicket.ts         |  22 ++
 ui/lion/hooks/useLionEndpoint.ts              |  17 +
 ui/lion/locales/index.ts                      |  27 +-
 ui/lion/locales/modules/en.json               |  16 +-
 ui/lion/locales/modules/ja.json               |  16 +-
 ui/lion/locales/modules/zh.json               |  16 +-
 ui/lion/locales/modules/zh_Hant.json          |  16 +-
 ui/lion/styles/base.css                       |  50 +--
 ui/lion/styles/keyboard.css                   |  26 +-
 ui/lion/utils/clipboard.ts                    |  13 +-
 ui/lion/utils/config.ts                       | 160 --------
 ui/lion/utils/lunaBus.ts                      |  34 +-
 ui/lion/views/ConnectView.vue                 | 210 +++++++---
 ui/lion/views/MonitorView.vue                 |  63 ++-
 ui/lion/views/ShareView.vue                   | 160 +++++---
 ui/lion/workspaces/RemoteSessionSurface.vue   |  23 +-
 ui/lion/workspaces/useBaseWorkspaceSession.ts |  41 +-
 ui/utils/clipboard.ts                         |  51 ++-
 34 files changed, 1503 insertions(+), 1151 deletions(-)
 delete mode 100644 ui/lion/hooks/useColor.ts
 create mode 100644 ui/lion/hooks/useLionConnectTicket.ts
 create mode 100644 ui/lion/hooks/useLionEndpoint.ts

diff --git a/.env.development b/.env.development
index 7c8d4b543..f5de60af9 100644
--- a/.env.development
+++ b/.env.development
@@ -3,5 +3,6 @@
 
 JMS_KOKO_DEV_URL=http://localhost:5050
 
-# JMS_LION_DEV_URL=http://localhost:8081
+# Lion 默认复用 JMS_KOKO_DEV_URL；仅兼容独立调试时覆盖
+# JMS_LION_DEV_URL=http://localhost:5050
 # JMS_CHEN_DEV_URL=http://localhost:8082
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 98b0c8e80..4138e9ff4 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,6 +1,7 @@
 const jumpServerTarget = process.env.JMS_CORE_DEV_URL || "http://localhost:8080";
 const kokoTarget = process.env.JMS_KOKO_DEV_URL || "http://localhost:5050";
-const lionTarget = process.env.JMS_LION_DEV_URL || "http://localhost:8081";
+// JMS_LION_DEV_URL remains a compatibility override; Lion is served by Koko by default.
+const lionTarget = process.env.JMS_LION_DEV_URL || kokoTarget;
 const chenTarget = process.env.JMS_CHEN_DEV_URL || "http://localhost:8082";
 const faceliveTarget = process.env.JMS_FACELIVE_DEV_URL || "http://localhost:5173";
 const kaelTarget = process.env.JMS_KAEL_DEV_URL || "http://localhost:5172";
@@ -163,13 +164,26 @@ export default defineNuxtConfig({
           rewrite: (path) => path.replace(/^\/luna/, ""),
           configure: bindProxyErrorHandler("luna-lion-ws")
         },
-        "/luna/lion/": {
+        "/luna/lion/api/": {
+          target: lionTarget,
+          secure: false,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/luna/, ""),
+          configure: bindProxyErrorHandler("luna-lion-api")
+        },
+        "/luna/lion/token/": {
+          target: lionTarget,
+          secure: false,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/luna/, ""),
+          configure: bindProxyErrorHandler("luna-lion-token")
+        },
+        "/luna/lion/health/": {
           target: lionTarget,
           secure: false,
-          ws: true,
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/luna/, ""),
-          configure: bindProxyErrorHandler("luna-lion-http")
+          configure: bindProxyErrorHandler("luna-lion-health")
         },
         "/lion/ws/": {
           target: lionTarget.replace(/^http/i, "ws"),
@@ -178,12 +192,23 @@ export default defineNuxtConfig({
           changeOrigin: true,
           configure: bindProxyErrorHandler("lion-ws")
         },
-        "/lion/": {
+        "/lion/api/": {
+          target: lionTarget,
+          secure: false,
+          changeOrigin: true,
+          configure: bindProxyErrorHandler("lion-api")
+        },
+        "/lion/token/": {
+          target: lionTarget,
+          secure: false,
+          changeOrigin: true,
+          configure: bindProxyErrorHandler("lion-token")
+        },
+        "/lion/health/": {
           target: lionTarget,
           secure: false,
-          ws: true,
           changeOrigin: true,
-          configure: bindProxyErrorHandler("lion-http")
+          configure: bindProxyErrorHandler("lion-health")
         },
         "/chen/ws/": {
           target: chenTarget.replace(/^http/i, "ws"),
diff --git a/src-tauri/capabilities/main.json b/src-tauri/capabilities/main.json
index 1516776a6..8ba4eb9de 100644
--- a/src-tauri/capabilities/main.json
+++ b/src-tauri/capabilities/main.json
@@ -84,6 +84,7 @@
     "window-state:default",
     "clipboard-manager:allow-read-text",
     "clipboard-manager:allow-write-text",
+    "clipboard-manager:allow-write-image",
     "updater:allow-check",
     "updater:allow-download",
     "updater:allow-install",
diff --git a/ui/components/lion/LionProvider.vue b/ui/components/lion/LionProvider.vue
index 2d9e34c93..cc9415a58 100644
--- a/ui/components/lion/LionProvider.vue
+++ b/ui/components/lion/LionProvider.vue
@@ -1,44 +1,28 @@
 <script setup lang="ts">
-import { message as lionMessages } from "@/lion/locales/modules";
-import { withBasePath } from "@/lion/utils/base";
-import { LanguageCode } from "@/lion/utils/config";
+import { message as lionMessages, loadRemoteTranslations } from "@/lion/locales";
 
 import "@/lion/styles/base.css";
 
 const { mergeLocaleMessage } = useI18n();
 
-const loaded = ref(false);
-const normalizedLangCode = LanguageCode.toLowerCase();
+for (const [code, value] of Object.entries(lionMessages)) {
+  mergeLocaleMessage(code, value);
+}
 
 onMounted(async () => {
-  for (const [code, value] of Object.entries(lionMessages)) {
-    mergeLocaleMessage(code, value);
-  }
-
   try {
-    const response = await fetch(
-      `${withBasePath("/api/v1/settings/i18n/lion/")}?lang=${encodeURIComponent(normalizedLangCode)}&flat=0`,
-      {
-        credentials: "include"
-      }
-    );
-
-    if (response.ok) {
-      const translations = await response.json();
-      for (const [key, value] of Object.entries(translations)) {
-        mergeLocaleMessage(key, value as Record<string, any>);
-      }
+    const translations = await loadRemoteTranslations();
+    for (const [key, value] of Object.entries(translations)) {
+      mergeLocaleMessage(key, value);
     }
   } catch (error) {
     console.error("load lion i18n failed", error);
-  } finally {
-    loaded.value = true;
   }
 });
 </script>
 
 <template>
-  <div v-if="loaded" class="h-full w-full overflow-hidden">
+  <div class="lion-surface h-full w-full overflow-hidden">
     <slot />
   </div>
 </template>
diff --git a/ui/lion/README.md b/ui/lion/README.md
index 491b623b8..bd22c1015 100644
--- a/ui/lion/README.md
+++ b/ui/lion/README.md
@@ -2,9 +2,9 @@
 
 Lion 是 RDP/VNC 远程桌面 connector，结构与 koko 对齐：
 
-- `views/` — 独立页面（`/lion/connect`、`/lion/share`、`/lion/monitor`）
+- `views/` — 独立页面（`/lion/connect`、`/lion/share/:id`、`/lion/monitor`）
 - `workspaces/` — 内嵌到 Luna workspace 的 session surface
 - `shared/connectors/capabilities.ts` — 声明 `web_rdp_native` 连接方式
 - `shared/connectors/registry.ts` — 解析到 `RemoteSessionSurface.vue`
 
-开发代理见根目录 `nuxt.config.ts`：`/lion/`、`/lion/ws/` 转发到 `localhost:8081`。API/WS 固定走站点根路径 `/lion/*`（不带 `/luna` 前缀）。
+开发代理见根目录 `nuxt.config.ts`：Lion 的 API、Token、Health 和 WebSocket 路径默认转发到 Koko（`JMS_KOKO_DEV_URL`，默认 `localhost:5050`）。`JMS_LION_DEV_URL` 仅作为兼容覆盖保留。页面路径由 Client 自己渲染，不转发给 Koko；API/WS 固定走站点根路径 `/lion/*`（不带 `/luna` 前缀）。
diff --git a/ui/lion/api/index.ts b/ui/lion/api/index.ts
index 263cc2b9d..67adc62d9 100644
--- a/ui/lion/api/index.ts
+++ b/ui/lion/api/index.ts
@@ -1,7 +1,75 @@
-import { withBasePath, withLionUrl } from "@/lion/utils/base";
+import { apiRequest } from "@/composables/useApiRequest";
+import { withLionUrl } from "@/lion/utils/base";
 
-const postJson = (url: string, data: any) => {
-  return fetch(url, {
+export interface SuggestionUser {
+  id: string;
+  name: string;
+  username: string;
+}
+
+export interface SuggestionUserPage {
+  count?: number;
+  next?: string | null;
+  previous?: string | null;
+  results: SuggestionUser[];
+}
+
+export interface ShareApiResponse {
+  success?: boolean;
+  message?: string;
+  id?: string;
+  verify_code?: string;
+  [key: string]: unknown;
+}
+
+export interface ShareSessionResponse extends ShareApiResponse {
+  action_permission?: {
+    value?: string;
+  };
+  session?: {
+    id?: string;
+    [key: string]: unknown;
+  };
+}
+
+export interface LionRequestAuth {
+  ticket?: string;
+  token?: string;
+}
+
+const withRequestAuth = (url: string, auth?: LionRequestAuth) => {
+  if (!auth?.ticket && !auth?.token) return url;
+  const target = new URL(url, window.location.origin);
+  if (auth.ticket) target.searchParams.set("ticket", auth.ticket);
+  if (auth.token) target.searchParams.set("token", auth.token);
+  return target.toString();
+};
+
+const parseResponse = async <T>(response: Response): Promise<T> => {
+  const text = await response.text();
+  let data: unknown = null;
+
+  if (text) {
+    try {
+      data = JSON.parse(text);
+    } catch {
+      data = text;
+    }
+  }
+
+  if (!response.ok) {
+    const message =
+      data && typeof data === "object" && "message" in data
+        ? String((data as { message?: unknown }).message || "")
+        : text;
+    throw new Error(message || `HTTP ${response.status}`);
+  }
+
+  return data as T;
+};
+
+const postJson = async <T>(url: string, data: unknown): Promise<T> => {
+  const response = await fetch(url, {
     method: "POST",
     credentials: "include",
     headers: {
@@ -9,18 +77,26 @@ const postJson = (url: string, data: any) => {
     },
     body: JSON.stringify(data)
   });
-};
 
-const getSuggestionUsers = (query: string) => {
-  const url = new URL(withBasePath("/api/v1/users/users/suggestions/"), window.location.origin);
-  url.searchParams.set("search", query);
-  return fetch(url.toString(), { credentials: "include" });
+  return await parseResponse<T>(response);
 };
 
-const createShareURL = (data: any, endpointUrl?: string) => postJson(withLionUrl("/api/share/", endpointUrl), data);
-const getShareSession = (id: string, data: any, endpointUrl?: string) =>
-  postJson(withLionUrl(`/api/share/${id}/`, endpointUrl), data);
-const removeShareUser = (data: any, endpointUrl?: string) =>
-  postJson(withLionUrl("/api/share/remove/", endpointUrl), data);
+const getSuggestionUsers = (query: string, page = 1, limit = 10) =>
+  apiRequest<SuggestionUserPage | SuggestionUser[]>({
+    method: "GET",
+    path: "/api/v1/users/users/suggestions/",
+    query: {
+      search: query,
+      page,
+      limit
+    }
+  });
+
+const createShareURL = (data: unknown, endpointUrl?: string, auth?: LionRequestAuth) =>
+  postJson<ShareApiResponse>(withRequestAuth(withLionUrl("/api/share/", endpointUrl), auth), data);
+const getShareSession = (id: string, data: unknown, endpointUrl?: string, auth?: LionRequestAuth) =>
+  postJson<ShareSessionResponse>(withRequestAuth(withLionUrl(`/api/share/${id}/`, endpointUrl), auth), data);
+const removeShareUser = (data: unknown, endpointUrl?: string, auth?: LionRequestAuth) =>
+  postJson<ShareApiResponse>(withRequestAuth(withLionUrl("/api/share/remove/", endpointUrl), auth), data);
 
 export { createShareURL, getShareSession, getSuggestionUsers, removeShareUser };
diff --git a/ui/lion/components/CardContainer/index.vue b/ui/lion/components/CardContainer/index.vue
index 8a0541dc0..151c2af22 100644
--- a/ui/lion/components/CardContainer/index.vue
+++ b/ui/lion/components/CardContainer/index.vue
@@ -8,15 +8,11 @@ const expanded = ref(true);
 
 <template>
   <UCard :ui="{ body: 'p-4' }">
-    <button
-      type="button"
-      class="flex w-full items-center justify-between gap-2 text-left"
-      @click="expanded = !expanded"
-    >
+    <UButton block color="neutral" variant="ghost" class="justify-between px-0 text-left" @click="expanded = !expanded">
       <slot v-if="!title" name="custom-header" />
       <span v-else class="text-sm font-medium">{{ title }}</span>
       <UIcon :name="expanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-left'" class="size-4" />
-    </button>
+    </UButton>
 
     <div v-show="expanded" class="mt-3">
       <slot />
diff --git a/ui/lion/components/ClipBoardText.vue b/ui/lion/components/ClipBoardText.vue
index 47c9923de..7ab07e6d7 100644
--- a/ui/lion/components/ClipBoardText.vue
+++ b/ui/lion/components/ClipBoardText.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useDebounceFn } from "@vueuse/core";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import CardContainer from "@/lion/components/CardContainer/index.vue";
 import { readClipboardText } from "@/lion/utils/clipboard";
@@ -8,15 +8,39 @@ import { readClipboardText } from "@/lion/utils/clipboard";
 const props = defineProps<{
   remoteText?: string;
   disabled?: boolean;
+  copyDisabled?: boolean;
+  pasteDisabled?: boolean;
+  pastePolicyDisabled?: boolean;
+  textLimit?: number;
 }>();
 const emit = defineEmits(["update:text"]);
 const { t } = useI18n();
+const toast = useToast();
 
 const inputValue = ref<string>("");
 const isLoading = ref<boolean>(false);
 const showRemoteText = ref<boolean>(false);
+const maxLength = computed(() => (props.textLimit && props.textLimit > 0 ? props.textLimit : undefined));
+const inputLength = computed(() => Array.from(inputValue.value).length);
+
+const validateText = (text: string) => {
+  if (props.pastePolicyDisabled) {
+    toast.add({ title: t("ClipboardPasteDeniedByPolicy"), color: "warning" });
+    return false;
+  }
+  if (props.disabled || props.pasteDisabled) {
+    toast.add({ title: `${t("Paste")} ${t("NoPermission")}`, color: "warning" });
+    return false;
+  }
+  if (maxLength.value && Array.from(text).length > maxLength.value) {
+    toast.add({ title: `${t("Paste")} ${t("ClipboardTextLimitExceeded")}: ${maxLength.value}`, color: "warning" });
+    return false;
+  }
+  return true;
+};
 
 const handleInput = useDebounceFn((value: string) => {
+  if (!validateText(value)) return;
   emit("update:text", value);
 }, 300);
 
@@ -24,10 +48,11 @@ const loadClipboardText = async () => {
   try {
     isLoading.value = true;
     const text = await readClipboardText();
+    if (!validateText(text)) return;
     inputValue.value = text;
     await handleInput(text);
   } catch (error) {
-    console.log("Failed to read clipboard text:", error);
+    console.debug("Failed to read clipboard text:", error);
   } finally {
     isLoading.value = false;
   }
@@ -48,20 +73,23 @@ const handleFocus = async () => {
   <CardContainer :title="t('Clipboard')">
     <div class="mb-3 flex items-center justify-between gap-3">
       <span class="text-sm">{{ t("ShowRemoteClip") }}</span>
-      <USwitch v-model="showRemoteText" :disabled="props.disabled" />
+      <USwitch v-model="showRemoteText" :disabled="props.disabled || props.copyDisabled" />
     </div>
 
     <UTextarea
       v-model="inputValue"
       :rows="4"
-      :maxlength="4096"
       autoresize
-      :disabled="props.disabled"
+      :disabled="props.disabled || props.pasteDisabled || props.pastePolicyDisabled"
       :placeholder="t('AutoPasteOnClick')"
       class="w-full"
       @update:model-value="handleInput"
       @focus="handleFocus"
     />
+    <div class="mt-1 text-right text-xs text-muted">
+      {{ inputLength }}
+      <template v-if="maxLength">/ {{ maxLength }}</template>
+    </div>
 
     <UTextarea
       v-if="showRemoteText"
@@ -69,7 +97,7 @@ const handleFocus = async () => {
       :rows="4"
       readonly
       autoresize
-      :disabled="props.disabled"
+      :disabled="props.disabled || props.copyDisabled"
       class="mt-3 w-full"
     />
   </CardContainer>
diff --git a/ui/lion/components/FileManager.vue b/ui/lion/components/FileManager.vue
index 1c5f5496d..d86ca68d7 100644
--- a/ui/lion/components/FileManager.vue
+++ b/ui/lion/components/FileManager.vue
@@ -1,32 +1,54 @@
 <script lang="ts" setup>
 import type { LionUploadCustomRequestOptions, LionUploadFileInfo } from "@/lion/types/upload";
-import { useDebounceFn } from "@vueuse/core";
-import { computed, ref } from "vue";
+import { useElementSize } from "@vueuse/core";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
+interface RowData {
+  name: string;
+  is_dir: boolean;
+  size?: number;
+  [key: string]: any;
+}
+
 const props = defineProps<{
   files: RowData[];
   name: string;
   folder: any;
   loading: boolean;
   displayUploadingFiles: LionUploadFileInfo[];
+  downloadDisabled?: boolean;
+  uploadDisabled?: boolean;
 }>();
-const emit = defineEmits(["openFolder", "downloadFile", "uploadFile", "removeUploadFile"]);
-const { t } = useI18n();
 
-interface RowData {
-  name: string;
-  is_dir: boolean;
-  size?: number;
-  [key: string]: any;
-}
+const emit = defineEmits<{
+  (event: "openFolder", folder: any): void;
+  (event: "downloadFile", file: RowData): void;
+  (event: "uploadFile", options: LionUploadCustomRequestOptions, folder: any): void;
+  (event: "removeUploadFile", file: LionUploadFileInfo): void;
+}>();
+
+const { t } = useI18n();
+const ROW_HEIGHT = 40;
+const OVERSCAN = 6;
+let uploadSequence = 0;
 
-const storeBackFolders = ref<any>([]);
+const storeBackFolders = ref<any[]>([]);
 const searchValue = ref("");
 const showContextMenu = ref(false);
 const contextPos = ref({ x: 0, y: 0 });
 const currentRowData = ref<RowData | null>(null);
 const fileInputRef = ref<HTMLInputElement | null>(null);
+const contextMenuRef = ref<HTMLElement | null>(null);
+const viewportRef = ref<HTMLElement | null>(null);
+const transferOpen = ref(false);
+const scrollTop = ref(0);
+const { height: viewportHeight } = useElementSize(viewportRef);
+
+const createUploadId = () => {
+  uploadSequence += 1;
+  return globalThis.crypto?.randomUUID?.() || `lion-upload-${Date.now()}-${uploadSequence}`;
+};
 
 const handlePathBack = () => {
   if (!props.folder?.parent) return;
@@ -51,39 +73,74 @@ const filePathList = computed(() => {
   let parent = currentFolder?.parent;
   let index = 0;
   list.push({ id: index, active: true, name: currentFolder.name, row: currentFolder, showArrow: false });
-  while (parent !== null) {
+  while (parent !== null && parent !== undefined) {
     currentFolder = parent;
     parent = currentFolder.parent;
-    index++;
+    index += 1;
     list.unshift({ id: index, active: false, name: currentFolder.name, row: currentFolder, showArrow: true });
   }
   return list;
 });
 
-const dataList = computed(() =>
-  props.files.filter((file) => file.name.toLowerCase().includes(searchValue.value.toLowerCase()))
-);
+const dataList = computed(() => {
+  const query = searchValue.value.trim().toLowerCase();
+  if (!query) return props.files;
+  return props.files.filter((file) =>
+    String(file.name || "")
+      .toLowerCase()
+      .includes(query)
+  );
+});
 
 const disabledBack = computed(() => !props.folder?.parent);
 const disabledForward = computed(() => storeBackFolders.value.length === 0);
+const totalHeight = computed(() => dataList.value.length * ROW_HEIGHT);
+const startIndex = computed(() => Math.max(0, Math.floor(scrollTop.value / ROW_HEIGHT) - OVERSCAN));
+const visibleCount = computed(() => Math.ceil((viewportHeight.value || 320) / ROW_HEIGHT) + OVERSCAN * 2);
+const virtualRows = computed(() =>
+  dataList.value.slice(startIndex.value, startIndex.value + visibleCount.value).map((row, offset) => ({
+    row,
+    index: startIndex.value + offset
+  }))
+);
+const latestTransfer = computed(() => props.displayUploadingFiles.at(-1));
 
-const handleSearch = useDebounceFn(() => {}, 300);
+watch([dataList, () => props.folder], () => {
+  scrollTop.value = 0;
+  if (viewportRef.value) viewportRef.value.scrollTop = 0;
+});
 
 const openContextMenu = (event: MouseEvent, row: RowData) => {
-  if (row.is_dir) return;
+  if (row.is_dir || props.downloadDisabled) return;
   event.preventDefault();
   currentRowData.value = row;
-  contextPos.value = { x: event.clientX, y: event.clientY };
+  contextPos.value = {
+    x: Math.min(event.clientX, window.innerWidth - 150),
+    y: Math.min(event.clientY, window.innerHeight - 56)
+  };
   showContextMenu.value = true;
 };
 
+const closeContextMenu = (event?: Event) => {
+  if (event?.target instanceof Node && contextMenuRef.value?.contains(event.target)) return;
+  showContextMenu.value = false;
+};
+
+const handleDocumentKeydown = (event: KeyboardEvent) => {
+  if (event.key === "Escape") showContextMenu.value = false;
+};
+
 const handleDownload = () => {
   showContextMenu.value = false;
   if (currentRowData.value) emit("downloadFile", currentRowData.value);
 };
 
 const handleRowClick = (row: RowData) => {
-  if (row.is_dir) emit("openFolder", row);
+  showContextMenu.value = false;
+  if (row.is_dir) {
+    storeBackFolders.value.length = 0;
+    emit("openFolder", row);
+  }
 };
 
 const handleRefresh = () => emit("openFolder", props.folder);
@@ -93,31 +150,63 @@ const handleFileInput = (event: Event) => {
   const files = input.files;
   if (!files?.length) return;
 
+  transferOpen.value = true;
   Array.from(files).forEach((fileObj) => {
-    const uploadOptions: LionUploadCustomRequestOptions = {
-      file: {
-        id: `batch-id-${fileObj.name}`,
-        name: fileObj.name,
-        batchId: `batch-id-${fileObj.name}`,
-        percentage: 0,
-        type: fileObj.type,
-        status: "pending",
-        file: fileObj
-      }
-    };
-    emit("uploadFile", uploadOptions, props.folder);
+    const id = createUploadId();
+    emit(
+      "uploadFile",
+      {
+        file: {
+          id,
+          name: fileObj.name,
+          batchId: id,
+          percentage: 0,
+          type: fileObj.type,
+          status: "pending",
+          file: fileObj
+        }
+      },
+      props.folder
+    );
   });
 
   input.value = "";
 };
 
-const removeUploadList = (file: LionUploadFileInfo) => {
-  emit("removeUploadFile", file);
+const removeUploadList = (file: LionUploadFileInfo) => emit("removeUploadFile", file);
+const clampPercentage = (value?: number | null) => Math.max(0, Math.min(100, Math.round(value || 0)));
+const statusColor = (status?: LionUploadFileInfo["status"]): "neutral" | "info" | "success" | "error" => {
+  if (status === "uploading") return "info";
+  if (status === "finished") return "success";
+  if (status === "error") return "error";
+  return "neutral";
+};
+const statusIcon = (status?: LionUploadFileInfo["status"]) => {
+  if (status === "uploading") return "i-lucide-loader-circle";
+  if (status === "finished") return "i-lucide-circle-check";
+  if (status === "error") return "i-lucide-circle-x";
+  return "i-lucide-clock-3";
+};
+const statusLabel = (status?: LionUploadFileInfo["status"]) => {
+  if (status === "uploading") return t("Uploading");
+  if (status === "finished") return t("UploadSuccess");
+  if (status === "error") return t("UploadError");
+  return t("Waiting");
 };
+
+onMounted(() => {
+  document.addEventListener("pointerdown", closeContextMenu);
+  document.addEventListener("keydown", handleDocumentKeydown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("pointerdown", closeContextMenu);
+  document.removeEventListener("keydown", handleDocumentKeydown);
+});
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
+  <div class="flex min-h-0 flex-col gap-4">
     <div class="flex items-center gap-2 overflow-x-auto">
       <UButton
         icon="i-lucide-chevron-left"
@@ -125,6 +214,7 @@ const removeUploadList = (file: LionUploadFileInfo) => {
         variant="ghost"
         size="xs"
         :disabled="disabledBack"
+        :aria-label="t('Back')"
         @click="handlePathBack"
       />
       <UButton
@@ -133,36 +223,63 @@ const removeUploadList = (file: LionUploadFileInfo) => {
         variant="ghost"
         size="xs"
         :disabled="disabledForward"
+        :aria-label="t('Forward')"
         @click="handlePathForward"
       />
 
       <div class="flex min-w-0 items-center gap-1 overflow-x-auto">
         <template v-for="item of filePathList" :key="item.id">
-          <button
-            type="button"
-            class="inline-flex items-center gap-1 whitespace-nowrap text-sm"
+          <UButton
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            icon="i-lucide-folder"
+            :class="item.active ? 'font-semibold' : ''"
             @click="handlePathClick(item)"
           >
-            <UIcon name="i-lucide-folder" class="size-4" />
-            <span :class="item.active ? 'font-semibold' : ''">{{ item.name }}</span>
-          </button>
-          <UIcon v-if="item.showArrow" name="i-lucide-chevron-right" class="size-3.5" />
+            {{ item.name }}
+          </UButton>
+          <UIcon v-if="item.showArrow" name="i-lucide-chevron-right" class="size-3.5 shrink-0" />
         </template>
       </div>
     </div>
 
-    <div class="flex items-center gap-2">
-      <UInput v-model="searchValue" :placeholder="t('PleaseInput')" class="flex-1" @change="handleSearch">
+    <div class="flex flex-wrap items-center gap-2">
+      <UInput v-model="searchValue" :placeholder="t('PleaseInput')" class="min-w-40 flex-1">
         <template #leading>
           <UIcon name="i-lucide-search" class="size-4" />
         </template>
       </UInput>
 
       <input ref="fileInputRef" type="file" multiple class="hidden" @change="handleFileInput" />
-      <UButton icon="i-lucide-upload" color="neutral" variant="soft" size="sm" @click="fileInputRef?.click()">
+      <UButton
+        icon="i-lucide-upload"
+        color="neutral"
+        variant="soft"
+        size="sm"
+        :disabled="uploadDisabled"
+        @click="fileInputRef?.click()"
+      >
         {{ t("UploadFile") }}
       </UButton>
-      <UButton icon="i-lucide-refresh-ccw" color="neutral" variant="ghost" size="sm" @click="handleRefresh" />
+      <UButton
+        icon="i-lucide-list-restart"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        :aria-label="t('TransferHistory')"
+        @click="transferOpen = true"
+      >
+        {{ displayUploadingFiles.length }}
+      </UButton>
+      <UButton
+        icon="i-lucide-refresh-ccw"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        :aria-label="t('Refresh')"
+        @click="handleRefresh"
+      />
     </div>
 
     <UCard :ui="{ body: 'p-0' }">
@@ -172,45 +289,92 @@ const removeUploadList = (file: LionUploadFileInfo) => {
       <div v-else-if="!dataList.length" class="p-8 text-center text-sm text-muted">
         {{ t("NoData") }}
       </div>
-      <div v-else class="max-h-[calc(100vh-420px)] overflow-auto">
-        <button
-          v-for="row in dataList"
-          :key="row.name"
-          type="button"
-          class="flex w-full items-center gap-2 border-b border-default px-3 py-2 text-left hover:bg-elevated"
-          @click="handleRowClick(row)"
-          @contextmenu="openContextMenu($event, row)"
-        >
-          <UIcon :name="row.is_dir ? 'i-lucide-folder' : 'i-lucide-file'" class="size-4" />
-          <span class="truncate">{{ row.name }}</span>
-        </button>
+      <div
+        v-else
+        ref="viewportRef"
+        class="h-[clamp(240px,calc(100vh-420px),520px)] overflow-auto"
+        @scroll="scrollTop = ($event.currentTarget as HTMLElement).scrollTop"
+      >
+        <div class="relative" :style="{ height: `${totalHeight}px` }">
+          <button
+            v-for="item in virtualRows"
+            :key="`${item.row.name}-${item.index}`"
+            type="button"
+            class="absolute left-0 flex h-10 w-full items-center gap-2 border-b border-default px-3 text-left hover:bg-elevated focus-visible:outline-2 focus-visible:outline-primary"
+            :style="{ transform: `translateY(${item.index * ROW_HEIGHT}px)` }"
+            :title="item.row.name"
+            @click="handleRowClick(item.row)"
+            @contextmenu="openContextMenu($event, item.row)"
+          >
+            <UIcon :name="item.row.is_dir ? 'i-lucide-folder' : 'i-lucide-file'" class="size-4 shrink-0" />
+            <span class="truncate">{{ item.row.name }}</span>
+          </button>
+        </div>
       </div>
 
-      <div v-if="displayUploadingFiles.length > 0" class="border-t border-default p-3">
-        <div
-          v-for="file in displayUploadingFiles"
-          :key="file.id"
-          class="flex items-center justify-between gap-2 py-1 text-sm"
-        >
-          <span class="truncate">{{ file.name }}</span>
-          <div class="flex items-center gap-2">
-            <span class="text-muted">{{ file.status }}</span>
-            <UButton color="neutral" variant="ghost" size="xs" @click="removeUploadList(file)">
-              {{ t("Remove") }}
-            </UButton>
-          </div>
-        </div>
+      <div v-if="latestTransfer" class="flex items-center gap-3 border-t border-default p-3 text-sm">
+        <UIcon
+          :name="statusIcon(latestTransfer.status)"
+          class="size-4 shrink-0"
+          :class="latestTransfer.status === 'uploading' ? 'animate-spin' : ''"
+        />
+        <span class="min-w-0 flex-1 truncate">{{ latestTransfer.name }}</span>
+        <span class="text-muted">{{ clampPercentage(latestTransfer.percentage) }}%</span>
+        <UButton color="neutral" variant="link" size="xs" @click="transferOpen = true">
+          {{ t("TransferHistory") }}
+        </UButton>
       </div>
     </UCard>
 
     <div
       v-if="showContextMenu"
-      class="fixed z-50 min-w-32 rounded-md border border-default bg-default p-1 shadow-lg"
+      ref="contextMenuRef"
+      class="fixed z-50 min-w-36 rounded-md border border-default bg-default p-1 shadow-lg"
       :style="{ left: `${contextPos.x}px`, top: `${contextPos.y}px` }"
     >
-      <UButton icon="i-lucide-download" color="neutral" variant="ghost" block @click="handleDownload">
+      <UButton
+        icon="i-lucide-download"
+        color="neutral"
+        variant="ghost"
+        block
+        :disabled="downloadDisabled"
+        @click="handleDownload"
+      >
         {{ t("Download") }}
       </UButton>
     </div>
+
+    <UModal v-model:open="transferOpen" :title="t('TransferHistory')">
+      <template #body>
+        <div v-if="displayUploadingFiles.length" class="max-h-[60vh] space-y-3 overflow-y-auto pr-1">
+          <div v-for="file in displayUploadingFiles" :key="file.id" class="rounded-md border border-default p-3">
+            <div class="mb-2 flex items-center gap-2">
+              <UIcon
+                :name="statusIcon(file.status)"
+                class="size-4 shrink-0"
+                :class="file.status === 'uploading' ? 'animate-spin' : ''"
+              />
+              <span class="min-w-0 flex-1 truncate text-sm" :title="file.name">{{ file.name }}</span>
+              <UBadge :color="statusColor(file.status)" variant="subtle" size="sm">
+                {{ statusLabel(file.status) }}
+              </UBadge>
+              <UButton
+                icon="i-lucide-x"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                :disabled="file.status === 'uploading'"
+                :aria-label="t('Remove')"
+                @click="removeUploadList(file)"
+              />
+            </div>
+            <UProgress :model-value="clampPercentage(file.percentage)" :color="statusColor(file.status)" size="sm" />
+          </div>
+        </div>
+        <div v-else class="py-8 text-center text-sm text-muted">
+          {{ t("NoData") }}
+        </div>
+      </template>
+    </UModal>
   </div>
 </template>
diff --git a/ui/lion/components/Osk.vue b/ui/lion/components/Osk.vue
index bb607d257..5a983478e 100644
--- a/ui/lion/components/Osk.vue
+++ b/ui/lion/components/Osk.vue
@@ -1,22 +1,24 @@
 <script lang="ts" setup>
 import { useWindowSize } from "@vueuse/core";
-
 import * as Guacamole from "guacamole-common-js-jumpserver/dist/guacamole-common";
-import { onMounted, ref, watch } from "vue";
+import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import dedeqwertz from "@/lion/assets/layouts/de-de-qwertz.json";
 import enusqwerty from "@/lion/assets/layouts/en-us-qwerty.json";
 import esesqwerty from "@/lion/assets/layouts/es-es-qwerty.json";
 import frfrazerty from "@/lion/assets/layouts/fr-fr-azerty.json";
 import ititqwertz from "@/lion/assets/layouts/it-it-qwerty.json";
 import nlnlqwertz from "@/lion/assets/layouts/nl-nl-qwerty.json";
-
 import ruruqwertz from "@/lion/assets/layouts/ru-ru-qwerty.json";
 
 const props = defineProps<{
   keyboard?: string;
 }>();
-const emit = defineEmits(["keyboardChange"]);
-const keyboardLayouts: any = {
+
+const emit = defineEmits<{
+  (event: "keyboardChange", action: "keydown" | "keyup", keysym: string): void;
+}>();
+
+const keyboardLayouts: Record<string, any> = {
   "de-de-qwertz": dedeqwertz,
   "en-us-qwerty": enusqwerty,
   "es-es-qwerty": esesqwerty,
@@ -25,173 +27,164 @@ const keyboardLayouts: any = {
   "nl-nl-qwerty": nlnlqwertz,
   "ru-ru-qwerty": ruruqwertz
 };
-// 拖动相关的状态
+
+const keyboardRef = ref<HTMLElement | null>(null);
+const screenKeyboard = ref<any>(null);
 const isDragging = ref(false);
 const dragStartX = ref(0);
 const dragStartY = ref(0);
-const keyboardPosition = ref({ x: 0, y: 0 });
+const keyboardPosition = ref({ x: 12, y: 12 });
+const { width, height } = useWindowSize();
 
-function handleMouseMove(e: MouseEvent) {
-  if (!isDragging.value) return;
+const keyboardWidth = () => Math.min(Math.max(width.value / 2, 320), Math.max(width.value - 24, 200));
 
-  keyboardPosition.value.x = e.clientX - dragStartX.value;
-  keyboardPosition.value.y = e.clientY - dragStartY.value;
+const clampPosition = (x: number, y: number) => {
+  const rect = keyboardRef.value?.getBoundingClientRect();
+  return {
+    x: Math.max(0, Math.min(width.value - (rect?.width || keyboardWidth()), x)),
+    y: Math.max(0, Math.min(height.value - (rect?.height || 200), y))
+  };
+};
 
-  // 限制拖动范围，确保不会拖到屏幕外
-  keyboardPosition.value.x = Math.max(0, Math.min(window.innerWidth - 400, keyboardPosition.value.x));
-  keyboardPosition.value.y = Math.max(0, Math.min(window.innerHeight - 200, keyboardPosition.value.y));
-}
+const moveKeyboard = (clientX: number, clientY: number) => {
+  keyboardPosition.value = clampPosition(clientX - dragStartX.value, clientY - dragStartY.value);
+};
 
-function handleMouseUp() {
+const handleMouseMove = (event: MouseEvent) => {
+  if (isDragging.value) moveKeyboard(event.clientX, event.clientY);
+};
+
+const stopDragging = () => {
   isDragging.value = false;
   document.removeEventListener("mousemove", handleMouseMove);
-  document.removeEventListener("mouseup", handleMouseUp);
-}
+  document.removeEventListener("mouseup", stopDragging);
+};
 
-// 拖动事件处理
-function handleMouseDown(e: MouseEvent) {
+const handleMouseDown = (event: MouseEvent) => {
   isDragging.value = true;
-  dragStartX.value = e.clientX - keyboardPosition.value.x;
-  dragStartY.value = e.clientY - keyboardPosition.value.y;
-
+  dragStartX.value = event.clientX - keyboardPosition.value.x;
+  dragStartY.value = event.clientY - keyboardPosition.value.y;
   document.addEventListener("mousemove", handleMouseMove);
-  document.addEventListener("mouseup", handleMouseUp);
-}
+  document.addEventListener("mouseup", stopDragging);
+};
 
-const keyboardLayout = props.keyboard || "en-us-qwerty";
+const handleTouchStart = (event: TouchEvent) => {
+  const touch = event.touches[0];
+  if (!touch || event.touches.length !== 1) return;
+  isDragging.value = true;
+  dragStartX.value = touch.clientX - keyboardPosition.value.x;
+  dragStartY.value = touch.clientY - keyboardPosition.value.y;
+};
 
-const { width } = useWindowSize();
-const screenKeyboard = ref<any>(null);
+const handleTouchMove = (event: TouchEvent) => {
+  const touch = event.touches[0];
+  if (!touch || !isDragging.value || event.touches.length !== 1) return;
+  moveKeyboard(touch.clientX, touch.clientY);
+};
 
-// 监听窗口大小变化
-watch(width, (newWidth) => {
-  screenKeyboard.value?.resize(newWidth / 2); // 调整键盘大小
-});
+const removeKeyboardElement = () => {
+  const keyboard = screenKeyboard.value;
+  if (!keyboard) return;
+  keyboard.onkeydown = null;
+  keyboard.onkeyup = null;
+  keyboard.getElement()?.remove();
+  screenKeyboard.value = null;
+};
+
+const setLayout = (layoutName?: string) => {
+  const container = keyboardRef.value;
+  if (!container) return;
+  removeKeyboardElement();
+
+  const keyboard = new Guacamole.OnScreenKeyboard(keyboardLayouts[layoutName || ""] || enusqwerty);
+  container.prepend(keyboard.getElement());
+  keyboard.resize(keyboardWidth());
+  keyboard.onkeydown = (keysym: string) => emit("keyboardChange", "keydown", keysym);
+  keyboard.onkeyup = (keysym: string) => emit("keyboardChange", "keyup", keysym);
+  screenKeyboard.value = keyboard;
+};
 
 watch(
   () => props.keyboard,
-  (newLayout: string | undefined) => {
-    console.log("Keyboard layout changed:", newLayout);
-    setLayout(newLayout);
-  }
+  (layout) => setLayout(layout)
 );
 
-onMounted(() => {
-  keyboardPosition.value = {
-    x: 0, // 初始位置居中
-    y: window.innerHeight - 300 // 初始位置在底部
-  };
-  setLayout(keyboardLayout);
+watch([width, height], () => {
+  screenKeyboard.value?.resize(keyboardWidth());
+  keyboardPosition.value = clampPosition(keyboardPosition.value.x, keyboardPosition.value.y);
 });
 
-function setLayout(layoutName?: string) {
-  const keyboardRef: any = document.getElementById("keyboardref");
-  if (screenKeyboard.value) {
-    keyboardRef.removeChild(screenKeyboard.value.getElement());
-  }
-  const layout = keyboardLayouts[layoutName] || enusqwerty;
-  const keyboard = new Guacamole.OnScreenKeyboard(layout);
-
-  keyboardRef.prepend(keyboard.getElement());
-  keyboard.resize(window.innerWidth / 2); // 设置键盘大小
-  screenKeyboard.value = keyboard;
-  keyboard.onkeydown = (key: string) => {
-    emit("keyboardChange", "keydown", key);
-  };
-  keyboard.onkeyup = (key: string) => {
-    emit("keyboardChange", "keyup", key);
-  };
-}
-
-// 触摸事件
-const handleTouchStart = (e: TouchEvent) => {
-  if (e.touches.length !== 1) return;
-  isDragging.value = true;
-  const touch = e.touches[0];
-  if (!touch) return;
-  dragStartX.value = touch.clientX - keyboardPosition.value.x;
-  dragStartY.value = touch.clientY - keyboardPosition.value.y;
-};
-
-const handleTouchMove = (e: TouchEvent) => {
-  if (!isDragging.value || e.touches.length !== 1) return;
-  const touch = e.touches[0];
-  if (!touch) return;
-  keyboardPosition.value.x = touch.clientX - dragStartX.value;
-  keyboardPosition.value.y = touch.clientY - dragStartY.value;
-
-  // 限制拖动范围，确保不会拖到屏幕外
-  keyboardPosition.value.x = Math.max(0, Math.min(window.innerWidth - 400, keyboardPosition.value.x));
-  keyboardPosition.value.y = Math.max(0, Math.min(window.innerHeight - 200, keyboardPosition.value.y));
-};
+onMounted(async () => {
+  setLayout(props.keyboard || "en-us-qwerty");
+  await nextTick();
+  const rect = keyboardRef.value?.getBoundingClientRect();
+  keyboardPosition.value = clampPosition(
+    Math.max(12, (width.value - (rect?.width || keyboardWidth())) / 2),
+    Math.max(12, height.value - (rect?.height || 200) - 24)
+  );
+});
 
-const handleTouchEnd = () => {
-  isDragging.value = false;
-};
+onUnmounted(() => {
+  stopDragging();
+  removeKeyboardElement();
+});
 </script>
 
 <template>
   <div
-    id="keyboardref"
+    ref="keyboardRef"
     class="draggable-keyboard"
-    :style="{
-      transform: `translate(${keyboardPosition.x}px, ${keyboardPosition.y}px)`,
-      cursor: isDragging ? 'grabbing' : 'grab'
-    }"
-    @mousedown="handleMouseDown"
-    @touchstart="handleTouchStart"
-    @touchmove="handleTouchMove"
-    @touchend="handleTouchEnd"
+    :style="{ transform: `translate(${keyboardPosition.x}px, ${keyboardPosition.y}px)` }"
   >
-    <!-- 拖动手柄 -->
-    <div class="drag-handle">
-      <span>⋮⋮</span>
-    </div>
+    <button
+      type="button"
+      class="drag-handle"
+      :class="isDragging ? 'cursor-grabbing' : 'cursor-grab'"
+      aria-label="Move virtual keyboard"
+      @mousedown.prevent="handleMouseDown"
+      @touchstart.prevent="handleTouchStart"
+      @touchmove.prevent="handleTouchMove"
+      @touchend="stopDragging"
+      @touchcancel="stopDragging"
+    >
+      <UIcon name="i-lucide-grip-horizontal" class="size-4" />
+    </button>
   </div>
 </template>
 
 <style scoped>
-#keyboardref {
-  z-index: 1000;
-  background-color: rgb(173, 173, 157);
-}
 .draggable-keyboard {
   position: fixed;
-  top: 0;
-  transform: translateX(-50%);
-  background-color: rgb(173, 173, 157);
-  padding: 2px;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  inset: 0 auto auto 0;
   z-index: 9999;
+  padding: 12px 2px 2px;
+  overflow: hidden;
   user-select: none;
-  border: 2px solid #666;
   touch-action: none;
-}
-
-.draggable-keyboard:hover {
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+  color: var(--app-text-primary);
+  background: var(--app-surface-panel);
+  border: 1px solid var(--app-border-strong);
+  border-radius: 8px;
+  box-shadow: var(--app-modal-shadow);
 }
 
 .drag-handle {
   position: absolute;
-  top: -8px;
+  top: 0;
   left: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 14px;
+  color: var(--app-text-secondary);
+  background: var(--app-surface-header);
+  border-radius: 0 0 6px 6px;
   transform: translateX(-50%);
-  background-color: #666;
-  color: white;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  cursor: grab;
-  user-select: none;
 }
 
 .drag-handle:hover {
-  background-color: #555;
-}
-
-.drag-handle:active {
-  cursor: grabbing;
+  color: var(--app-text-primary);
+  background: var(--app-state-hover-strong);
 }
 </style>
diff --git a/ui/lion/components/OtherOption.vue b/ui/lion/components/OtherOption.vue
index 03142e4c3..4069b40a8 100644
--- a/ui/lion/components/OtherOption.vue
+++ b/ui/lion/components/OtherOption.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import CardContainer from "@/lion/components/CardContainer/index.vue";
 
@@ -9,27 +8,20 @@ const props = defineProps<{
   fitPercentage: number;
 }>();
 
-const emit = defineEmits(["combine-keys", "update:autoFit", "updateScale"]);
+const emit = defineEmits(["update:autoFit", "updateScale"]);
 
 const { t } = useI18n();
 
-const percentage = ref<number>(props.fitPercentage);
-
-onMounted(() => {
-  percentage.value = props.fitPercentage;
-});
-
 const handleAutoFitUpdate = (value: boolean) => {
   emit("update:autoFit", value);
 };
 
 const handleCircleClick = (value: number) => {
-  const newPercentage = percentage.value + value;
+  const newPercentage = props.fitPercentage + value;
   if (newPercentage < 10) {
     console.warn("Fit percentage cannot be less than 10%");
     return;
   }
-  percentage.value = newPercentage;
   emit("update:autoFit", false);
   emit("updateScale", newPercentage);
 };
@@ -41,13 +33,23 @@ const handleCircleClick = (value: number) => {
       <span class="text-sm">{{ t("AutoFit") }}</span>
       <div class="flex items-center gap-2">
         <USwitch :model-value="props.autoFit" @update:model-value="handleAutoFitUpdate" />
-        <button type="button" class="inline-flex items-center" @click="handleCircleClick(-5)">
-          <UIcon name="i-lucide-circle-minus" class="size-4" />
-        </button>
+        <UButton
+          icon="i-lucide-circle-minus"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          :aria-label="t('ZoomOut')"
+          @click="handleCircleClick(-5)"
+        />
         <span class="text-xs">{{ props.fitPercentage }}%</span>
-        <button type="button" class="inline-flex items-center" @click="handleCircleClick(5)">
-          <UIcon name="i-lucide-circle-plus" class="size-4" />
-        </button>
+        <UButton
+          icon="i-lucide-circle-plus"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          :aria-label="t('ZoomIn')"
+          @click="handleCircleClick(5)"
+        />
       </div>
     </div>
   </CardContainer>
diff --git a/ui/lion/components/SessionShare/index.vue b/ui/lion/components/SessionShare/index.vue
index 2aeb3577c..cc4ce910c 100644
--- a/ui/lion/components/SessionShare/index.vue
+++ b/ui/lion/components/SessionShare/index.vue
@@ -5,6 +5,7 @@ import { removeShareUser } from "@/lion/api";
 import CardContainer from "@/lion/components/CardContainer/index.vue";
 import CreateLink from "@/lion/components/SessionShare/widget/CreateLink.vue";
 import UserItem from "@/lion/components/SessionShare/widget/UserItem.vue";
+import { createLionConnectTicket } from "@/lion/hooks/useLionConnectTicket";
 
 export type TranslateFunction = Composer["t"];
 
@@ -18,22 +19,32 @@ const props = defineProps<{
   }>;
   disableCreate?: boolean;
   endpointUrl?: string;
+  tokenId?: string;
+  ticket?: string;
 }>();
 
 const { t } = useI18n();
 const { addErrorToast } = useErrorToast();
 
-const handleRemoveShareUser = (user: any) => {
-  removeShareUser(user, props.endpointUrl)
-    .then((res: any) => res.json())
-    .then((response) => {
-      if (response.message && !response.success) {
-        addErrorToast({ title: response.message });
-      }
-    })
-    .catch(() => {
-      addErrorToast({ title: t("ShareUserRemoveError") });
+const handleRemoveShareUser = async (user: any) => {
+  try {
+    let ticket = props.ticket || "";
+    try {
+      ticket =
+        (await createLionConnectTicket(props.endpointUrl || window.location.origin, props.tokenId || "")) || ticket;
+    } catch (error) {
+      if (!ticket) throw error;
+    }
+    const response = await removeShareUser(user, props.endpointUrl, {
+      ticket,
+      token: props.tokenId
     });
+    if (response.message && !response.success) {
+      addErrorToast({ title: response.message });
+    }
+  } catch {
+    addErrorToast({ title: t("ShareUserRemoveError") });
+  }
 };
 </script>
 
@@ -62,7 +73,13 @@ const handleRemoveShareUser = (user: any) => {
     </CardContainer>
 
     <CardContainer :title="t('ShareLink')">
-      <CreateLink :session="session" :disabled-create-link="props.disableCreate" :endpoint-url="props.endpointUrl" />
+      <CreateLink
+        :session="session"
+        :disabled-create-link="props.disableCreate"
+        :endpoint-url="props.endpointUrl"
+        :token-id="props.tokenId"
+        :ticket="props.ticket"
+      />
     </CardContainer>
   </div>
 </template>
diff --git a/ui/lion/components/SessionShare/widget/CreateLink.vue b/ui/lion/components/SessionShare/widget/CreateLink.vue
index 6a2abfd03..25584f4c3 100644
--- a/ui/lion/components/SessionShare/widget/CreateLink.vue
+++ b/ui/lion/components/SessionShare/widget/CreateLink.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import type { Composer } from "vue-i18n";
-import { useClipboard, useDebounceFn } from "@vueuse/core";
+import type { SuggestionUser } from "@/lion/api";
+import { useDebounceFn } from "@vueuse/core";
 import { computed, reactive, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import { createShareURL } from "@/lion/api";
-import { useColor } from "@/lion/hooks/useColor";
-import { withBaseUrl, withLionUrl } from "@/lion/utils/base";
+import { createShareURL, getSuggestionUsers } from "@/lion/api";
+import { createLionConnectTicket } from "@/lion/hooks/useLionConnectTicket";
+import { withBaseUrl } from "@/lion/utils/base";
+import { writeClipboardText } from "@/utils/clipboard";
 
 export type TranslateFunction = Composer["t"];
 
@@ -13,26 +15,15 @@ const props = defineProps<{
   session: string;
   disabledCreateLink: boolean;
   endpointUrl?: string;
+  tokenId?: string;
+  ticket?: string;
 }>();
 
-const { copy } = useClipboard({ legacy: true });
 const getMinuteLabel = (item: number, t: TranslateFunction): string => {
   const minuteLabel = item > 1 ? t("Minutes") : t("Minute");
   return `${item} ${minuteLabel}`;
 };
 
-export interface ShareUserOptions {
-  id: string;
-  name: string;
-  username: string;
-}
-
-export interface UserInfo {
-  id: string;
-  name: string;
-  username: string;
-}
-
 interface ExpiredOption {
   label: string;
   value: number;
@@ -46,7 +37,6 @@ interface ActionPermOption {
 }
 
 const { t } = useI18n();
-const { lighten } = useColor();
 const toast = useToast();
 const { addErrorToast } = useErrorToast();
 const shareInfo = ref({
@@ -55,58 +45,76 @@ const shareInfo = ref({
   shareId: "",
   shareURL: ""
 });
-const userOptions = ref<UserInfo[]>([]);
+const PAGE_SIZE = 10;
+const userOptions = ref<SuggestionUser[]>([]);
+const knownUsers = ref<Record<string, SuggestionUser>>({});
 const selectedUserIds = ref<string[]>([]);
-const currentQuery = ref<string>("");
-const currentPage = ref<number>(1);
-const hasMore = ref<boolean>(true);
-const searchLoading = ref<boolean>(false);
-const showLinkResult = ref<boolean>(false);
-
-const searchUsers = useDebounceFn(async (value: string, isLoadMore: boolean = false) => {
-  if (value === "" && !isLoadMore) {
-    searchLoading.value = false;
-    return;
-  }
+const searchTerm = ref("");
+const currentQuery = ref("");
+const currentPage = ref(0);
+const hasMore = ref(true);
+const searchLoading = ref(false);
+const createLoading = ref(false);
+const showLinkResult = ref(false);
+let searchGeneration = 0;
+
+const normalizeUsers = (users: SuggestionUser[], query: string) => {
+  const normalizedQuery = query.trim().toLowerCase();
+  const seen = new Set<string>();
+
+  return users.filter((user) => {
+    if (!user?.id || seen.has(user.id)) return false;
+    seen.add(user.id);
+    if (!normalizedQuery) return true;
+    return [user.name, user.username].some((value) =>
+      String(value || "")
+        .toLowerCase()
+        .includes(normalizedQuery)
+    );
+  });
+};
+
+const searchUsers = async (value: string, loadMore = false) => {
+  if (searchLoading.value && loadMore) return;
 
-  if (!isLoadMore || value !== currentQuery.value) {
-    currentQuery.value = value;
-    currentPage.value = 1;
+  const query = value.trim();
+  const page = loadMore && query === currentQuery.value ? currentPage.value + 1 : 1;
+  const generation = loadMore ? searchGeneration : ++searchGeneration;
+
+  if (!loadMore) {
+    currentQuery.value = query;
+    currentPage.value = 0;
     userOptions.value = [];
     hasMore.value = true;
   }
 
   searchLoading.value = true;
-
   try {
-    const params = new URLSearchParams({
-      search: currentQuery.value,
-      page: currentPage.value.toString(),
-      limit: "10"
-    });
-
-    const response = await fetch(withBaseUrl(`/api/v1/users/users/suggestions/?${params}`)).then((res: any) =>
-      res.json()
-    );
-
-    const newUsers = response.results || response;
-    const filterUsers = (users: UserInfo[]) =>
-      users.filter((user) => {
-        const query = currentQuery.value.toLowerCase();
-        return user.name.toLowerCase().includes(query) || user.username.toLowerCase().includes(query);
-      });
-
-    userOptions.value =
-      isLoadMore && currentPage.value > 1 ? [...userOptions.value, ...filterUsers(newUsers)] : filterUsers(newUsers);
-
-    hasMore.value = response.next !== null && response.next !== undefined;
+    const response = await getSuggestionUsers(query, page, PAGE_SIZE);
+    if (generation !== searchGeneration || query !== currentQuery.value) return;
+
+    const paginated = !Array.isArray(response);
+    const pageUsers = normalizeUsers(paginated ? response.results || [] : response, query);
+    const merged = loadMore ? [...userOptions.value, ...pageUsers] : pageUsers;
+    userOptions.value = normalizeUsers(merged, "");
+    knownUsers.value = {
+      ...knownUsers.value,
+      ...Object.fromEntries(pageUsers.map((user) => [user.id, user]))
+    };
+    currentPage.value = page;
+    hasMore.value = paginated ? Boolean(response.next) : false;
   } catch (error) {
+    if (generation !== searchGeneration) return;
     console.error("Search users error:", error);
     addErrorToast({ title: t("NoUserFound") });
   } finally {
-    searchLoading.value = false;
+    if (generation === searchGeneration) searchLoading.value = false;
   }
-}, 300);
+};
+
+const debounceSearch = useDebounceFn((query: string) => searchUsers(query), 300);
+
+watch(searchTerm, (query) => debounceSearch(query));
 
 watch(
   () => shareInfo.value.shareCode,
@@ -115,12 +123,16 @@ watch(
   }
 );
 
-const mappedUserOptions = computed(() =>
-  userOptions.value.map((item) => ({
+const mappedUserOptions = computed(() => {
+  const selectedUsers = selectedUserIds.value
+    .map((id) => knownUsers.value[id])
+    .filter((user): user is SuggestionUser => Boolean(user));
+  return normalizeUsers([...selectedUsers, ...userOptions.value], "").map((item) => ({
     label: item.username,
+    description: item.name,
     value: item.id
-  }))
-);
+  }));
+});
 
 const createSingleSelectHandler = <T, K extends keyof T>(
   options: T[],
@@ -154,7 +166,6 @@ const actionsPermOptions = reactive<ActionPermOption[]>([
   { label: t("ReadOnly"), value: "readonly", checked: false }
 ]);
 
-const debounceSearch = useDebounceFn((query: string) => searchUsers(query, false), 300);
 const handleChangeExpired = createSingleSelectHandler(expiredOptions, "value", "checked", (value) => {
   shareLinkRequest.expiredTime = value;
 });
@@ -164,42 +175,55 @@ const handleChangeActionPerm = createSingleSelectHandler(actionsPermOptions, "va
 
 const generateShareURL = (shareId: string, shareCode: string) => {
   const encodedShareCode = encodeURIComponent(shareCode);
-  return withLionUrl(`/share/${shareId}?code=${encodedShareCode}`, props.endpointUrl);
+  return withBaseUrl(`/lion/share/${shareId}?type=lion&code=${encodedShareCode}`, props.endpointUrl);
 };
 
-const handleCreateLink = () => {
+const handleCreateLink = async () => {
   if (!shareInfo.value.sessionId) {
     addErrorToast({ title: t("FailedCreateConnection") });
     return;
   }
 
   const users = selectedUserIds.value.map((id) => {
-    const user = userOptions.value.find((item) => item.id === id);
+    const user = knownUsers.value[id];
     return user || { id, name: id, username: id };
   });
 
-  createShareURL(
-    {
-      session_id: props.session,
-      expired_time: shareLinkRequest.expiredTime,
-      users,
-      action_perm: shareLinkRequest.actionPerm
-    },
-    props.endpointUrl
-  )
-    .then((response: any) => response.json())
-    .then((res: any) => {
-      if (res.success && !res.success) {
-        addErrorToast({ title: `${t("CreateLinkFailed")}: ${res?.message || ""}` });
-        return;
+  createLoading.value = true;
+  try {
+    let ticket = props.ticket || "";
+    try {
+      ticket =
+        (await createLionConnectTicket(props.endpointUrl || window.location.origin, props.tokenId || "")) || ticket;
+    } catch (error) {
+      if (!ticket) throw error;
+    }
+    const response = await createShareURL(
+      {
+        session_id: props.session,
+        expired_time: shareLinkRequest.expiredTime,
+        users,
+        action_perm: shareLinkRequest.actionPerm
+      },
+      props.endpointUrl,
+      {
+        ticket,
+        token: props.tokenId
       }
-      shareInfo.value.shareId = res.id;
-      shareInfo.value.shareCode = res.verify_code;
-      shareInfo.value.shareURL = generateShareURL(res.id, res.verify_code);
-    })
-    .catch(() => {
-      addErrorToast({ title: t("CreateLinkFailed") });
-    });
+    );
+
+    if (response.success === false || !response.id || !response.verify_code) {
+      throw new Error(response.message || t("CreateLinkFailed"));
+    }
+    shareInfo.value.shareId = response.id;
+    shareInfo.value.shareCode = response.verify_code;
+    shareInfo.value.shareURL = generateShareURL(response.id, response.verify_code);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "";
+    addErrorToast({ title: message ? `${t("CreateLinkFailed")}: ${message}` : t("CreateLinkFailed") });
+  } finally {
+    createLoading.value = false;
+  }
 };
 
 const handleCopyShareURL = () => {
@@ -210,15 +234,23 @@ const handleCopyShareURL = () => {
     return;
   }
   const text = `${t("LinkAddr")}: ${url}\n${t("VerifyCode")}: ${shareCode}`;
-  copy(text)
+  writeClipboardText(text)
     .then(() => toast.add({ title: t("CopyShareURLSuccess"), color: "info" }))
-    .catch((err) => console.log("copy share url err: ", err));
+    .catch((error) => {
+      console.error("copy share url failed", error);
+      addErrorToast({ title: t("NoPermission") });
+    });
 };
 
 const handleBack = () => {
   showLinkResult.value = false;
+  shareInfo.value.shareCode = "";
+  shareInfo.value.shareId = "";
+  shareInfo.value.shareURL = "";
   shareLinkRequest.expiredTime = 10;
   shareLinkRequest.actionPerm = "writable";
+  expiredOptions.forEach((item) => (item.checked = item.value === 10));
+  actionsPermOptions.forEach((item) => (item.checked = item.value === "writable"));
   selectedUserIds.value = [];
 };
 </script>
@@ -230,16 +262,16 @@ const handleBack = () => {
         {{ t("ExpiredTime") }}
       </div>
       <div class="flex flex-wrap gap-2">
-        <button
+        <UButton
           v-for="item in expiredOptions"
           :key="item.value"
-          type="button"
-          class="rounded-md border px-4 py-2 text-xs-plus"
-          :style="{ borderColor: item.checked ? lighten(20) : undefined }"
+          :color="item.checked ? 'primary' : 'neutral'"
+          :variant="item.checked ? 'soft' : 'outline'"
+          class="justify-center"
           @click="handleChangeExpired(item.value)"
         >
           {{ item.label }}
-        </button>
+        </UButton>
       </div>
     </div>
 
@@ -250,16 +282,16 @@ const handleBack = () => {
         {{ t("ActionPerm") }}
       </div>
       <div class="grid grid-cols-2 gap-2">
-        <button
+        <UButton
           v-for="item in actionsPermOptions"
           :key="item.value"
-          type="button"
-          class="rounded-md border px-4 py-2 text-xs-plus"
-          :style="{ borderColor: item.checked ? lighten(20) : undefined }"
+          :color="item.checked ? 'primary' : 'neutral'"
+          :variant="item.checked ? 'soft' : 'outline'"
+          class="justify-center"
           @click="handleChangeActionPerm(item.value)"
         >
           {{ item.label }}
-        </button>
+        </UButton>
       </div>
     </div>
 
@@ -269,28 +301,41 @@ const handleBack = () => {
       <div class="mb-2 text-xs-plus">
         {{ t("ShareUser") }}
       </div>
-      <UInput
-        :placeholder="t('GetShareUser')"
-        class="mb-2"
-        @update:model-value="(value) => debounceSearch(String(value ?? ''))"
-        @focus="debounceSearch('')"
-      />
       <USelectMenu
         v-model="selectedUserIds"
+        v-model:search-term="searchTerm"
         multiple
-        searchable
         :items="mappedUserOptions"
         value-key="value"
         label-key="label"
+        ignore-filter
+        :search-input="{ placeholder: t('GetShareUser') }"
         :loading="searchLoading"
         :placeholder="t('GetShareUser')"
         class="w-full"
-      />
+        @focus="userOptions.length || searchLoading ? undefined : searchUsers(searchTerm)"
+        @update:open="(open) => open && !userOptions.length && !searchLoading && searchUsers(searchTerm)"
+      >
+        <template #content-bottom>
+          <div v-if="hasMore" class="border-t border-default p-1.5">
+            <UButton
+              block
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              :loading="searchLoading"
+              @click.stop="searchUsers(currentQuery, true)"
+            >
+              {{ t("LoadMore") }}
+            </UButton>
+          </div>
+        </template>
+      </USelectMenu>
     </div>
 
     <UDivider />
 
-    <UButton block :disabled="disabledCreateLink" @click="handleCreateLink">
+    <UButton block :disabled="disabledCreateLink" :loading="createLoading" @click="handleCreateLink">
       {{ t("CreateLink") }}
     </UButton>
   </div>
diff --git a/ui/lion/components/SessionShare/widget/UserItem.vue b/ui/lion/components/SessionShare/widget/UserItem.vue
index a36a8cd71..6fc2c4084 100644
--- a/ui/lion/components/SessionShare/widget/UserItem.vue
+++ b/ui/lion/components/SessionShare/widget/UserItem.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import { useColor } from "@/lion/hooks/useColor";
 
 const props = defineProps<{
   username: string;
@@ -16,8 +15,6 @@ const emit = defineEmits<{
 }>();
 
 const { t } = useI18n();
-const { lighten } = useColor();
-const isHovered = ref(false);
 const confirmOpen = ref(false);
 
 const options = [
@@ -39,12 +36,7 @@ const handleRemoveUser = () => {
 </script>
 
 <template>
-  <div
-    class="flex w-full items-center justify-between rounded-md p-2 transition-colors"
-    :style="{ backgroundColor: isHovered ? lighten(1) : 'transparent' }"
-    @mouseenter="isHovered = true"
-    @mouseleave="isHovered = false"
-  >
+  <div class="flex w-full items-center justify-between rounded-md p-2 transition-colors hover:bg-elevated">
     <div class="flex items-center gap-2">
       <UIcon name="i-lucide-user-round" class="size-[18px]" />
       <div>
diff --git a/ui/lion/hooks/useColor.ts b/ui/lion/hooks/useColor.ts
deleted file mode 100644
index dd10643ea..000000000
--- a/ui/lion/hooks/useColor.ts
+++ /dev/null
@@ -1,205 +0,0 @@
-import { ref } from "vue";
-
-interface HSL {
-  h: number;
-  s: number;
-  l: number;
-}
-
-const mainThemeColorMap = new Map(
-  Object.entries({
-    default: "#483D3D",
-    deepBlue: "#1A212C",
-    darkGary: "#303237"
-  })
-);
-
-const currentMainColoc = ref("#303237");
-
-export const useColor = () => {
-  const setCurrentMainColor = (color: string) => {
-    const themeColor = mainThemeColorMap.get(color);
-
-    if (themeColor) {
-      currentMainColoc.value = themeColor;
-    } else {
-      currentMainColoc.value = "#483D3D";
-    }
-  };
-
-  /**
-   * 将十六进制颜色转换为HSL颜色
-   * @param hex 十六进制颜色
-   * @returns HSL颜色
-   */
-  const hexToHSL = (hex: string): HSL => {
-    let hexValue = hex.replace(/^#/, "");
-
-    if (hexValue.length === 3) {
-      hexValue = hexValue
-        .split("")
-        .map((char) => char + char)
-        .join("");
-    }
-
-    // 解析RGB值
-    const r = Number.parseInt(hexValue.substring(0, 2), 16) / 255;
-    const g = Number.parseInt(hexValue.substring(2, 4), 16) / 255;
-    const b = Number.parseInt(hexValue.substring(4, 6), 16) / 255;
-
-    // 计算HSL值
-    const max = Math.max(r, g, b);
-    const min = Math.min(r, g, b);
-    let h = 0;
-    let s = 0;
-    const l = (max + min) / 2;
-
-    if (max !== min) {
-      const d = max - min;
-      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-
-      switch (max) {
-        case r:
-          h = (g - b) / d + (g < b ? 6 : 0);
-          break;
-        case g:
-          h = (b - r) / d + 2;
-          break;
-        case b:
-          h = (r - g) / d + 4;
-          break;
-      }
-
-      h /= 6;
-    }
-
-    // 转换为标准HSL格式
-    return {
-      h: Math.round(h * 360),
-      s: Math.round(s * 100),
-      l: Math.round(l * 100)
-    };
-  };
-
-  /**
-   * 将HSL颜色转换为十六进制颜色
-   * @param h 色相
-   * @param s 饱和度
-   * @param l 亮度
-   * @returns 十六进制颜色
-   */
-  const hslToHex = (h: number, s: number, l: number) => {
-    h /= 360;
-    s /= 100;
-    l /= 100;
-
-    let r, g, b;
-
-    if (s === 0) {
-      // 如果饱和度为0，则为灰色
-      r = g = b = l;
-    } else {
-      const hue2rgb = (p: number, q: number, t: number): number => {
-        if (t < 0) t += 1;
-        if (t > 1) t -= 1;
-        if (t < 1 / 6) return p + (q - p) * 6 * t;
-        if (t < 1 / 2) return q;
-        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-        return p;
-      };
-
-      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-      const p = 2 * l - q;
-
-      r = hue2rgb(p, q, h + 1 / 3);
-      g = hue2rgb(p, q, h);
-      b = hue2rgb(p, q, h - 1 / 3);
-    }
-
-    // 转换为十六进制
-    const toHex = (x: number): string => {
-      const hex = Math.round(x * 255).toString(16);
-      return hex.length === 1 ? `0${hex}` : hex;
-    };
-
-    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-  };
-
-  /**
-   * 将颜色转换为rgba格式
-   * @param alphaValue 透明度值
-   * @param color 颜色
-   * @returns rgba格式颜色
-   */
-  const alpha = (alphaValue: number, color?: string) => {
-    // 如果没有提供颜色，使用当前主题颜色
-    const actualColor = color || currentMainColoc.value;
-    // 确保透明度值在0-1之间
-    const alpha = Math.max(0, Math.min(1, alphaValue));
-
-    // 移除#号并处理缩写形式
-    let hex = actualColor.replace(/^#/, "");
-
-    if (hex.length === 3) {
-      hex = hex
-        .split("")
-        .map((char) => char + char)
-        .join("");
-    }
-
-    // 解析RGB值
-    const r = Number.parseInt(hex.substring(0, 2), 16);
-    const g = Number.parseInt(hex.substring(2, 4), 16);
-    const b = Number.parseInt(hex.substring(4, 6), 16);
-
-    // 返回rgba格式
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-  };
-
-  /**
-   * 将颜色变亮
-   * @param amount 调整的亮度值
-   * @param color 要处理的颜色，默认使用当前主题色
-   * @param alphaValue 可选透明度，传入后返回 rgba 字符串
-   * @returns 调亮后的十六进制颜色，或带透明度的 rgba 字符串
-   */
-  const lighten = (amount: number, color?: string, alphaValue?: number) => {
-    const actualColor = color || currentMainColoc.value;
-    const hsl = hexToHSL(actualColor);
-    const hexColor = hslToHex(hsl.h, hsl.s, Math.min(100, hsl.l + amount));
-
-    if (alphaValue !== undefined) {
-      return alpha(alphaValue, hexColor);
-    }
-
-    return hexColor;
-  };
-
-  /**
-   * 将颜色变暗
-   * @param amount 调整的亮度值
-   * @param color 要处理的颜色，默认使用当前主题色
-   * @param alphaValue 可选透明度，传入后返回 rgba 字符串
-   * @returns 调暗后的十六进制颜色，或带透明度的 rgba 字符串
-   */
-  const darken = (amount: number, color?: string, alphaValue?: number) => {
-    const actualColor = color || currentMainColoc.value;
-    const hsl = hexToHSL(actualColor);
-    const hexColor = hslToHex(hsl.h, hsl.s, Math.max(0, hsl.l - amount));
-
-    // 如果提供了透明度参数，应用透明度
-    if (alphaValue !== undefined) {
-      return alpha(alphaValue, hexColor);
-    }
-
-    return hexColor;
-  };
-
-  return {
-    darken,
-    lighten,
-    alpha,
-    setCurrentMainColor,
-    currentMainColor: currentMainColoc
-  };
-};
diff --git a/ui/lion/hooks/useGuacamoleClient.ts b/ui/lion/hooks/useGuacamoleClient.ts
index c36f2957c..c148e1662 100644
--- a/ui/lion/hooks/useGuacamoleClient.ts
+++ b/ui/lion/hooks/useGuacamoleClient.ts
@@ -3,18 +3,16 @@ import type { LionUploadCustomRequestOptions } from "@/lion/types/upload";
 import { useDebounceFn } from "@vueuse/core";
 
 import * as Guacamole from "guacamole-common-js-jumpserver/dist/guacamole-common";
-import { nextTick, ref, toValue } from "vue";
-import { LanguageCode } from "@/lion/locales";
+import { computed, nextTick, ref, toValue } from "vue";
 import { LUNA_MESSAGE_TYPE } from "@/lion/types/postmessage.type";
 import { withLionUrl } from "@/lion/utils/base";
-import { readClipboardText } from "@/lion/utils/clipboard";
+import { readClipboardText, writeClipboardBlob, writeClipboardText } from "@/lion/utils/clipboard";
+import { LanguageCode } from "@/lion/utils/config";
 
 import { lunaCommunicator } from "@/lion/utils/lunaBus";
-import { ConvertGuacamoleError, ErrorStatusCodes } from "@/lion/utils/status";
+import { ConvertGuacamoleError as convertGuacamoleError, ErrorStatusCodes } from "@/lion/utils/status";
 
-const supportImages: any[] = [];
-const pendingTests: any[] = [];
-const testImages: any = {
+const testImages: Record<string, string> = {
   /**
    * Test JPEG image, encoded as base64.
    */
@@ -37,8 +35,9 @@ const testImages: any = {
    * Test WebP image, encoded as base64.
    */
   "image/webp": "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA=="
-}; // 测试单个图片格式
-async function testImageFormat(mimeType: string, base64Data: any): Promise<boolean> {
+};
+
+async function testImageFormat(mimeType: string, base64Data: string): Promise<boolean> {
   return new Promise<boolean>((resolve) => {
     const image = new Image();
 
@@ -58,54 +57,19 @@ async function testImageFormat(mimeType: string, base64Data: any): Promise<boole
   });
 }
 
-// Use Object.entries for better iteration over key-value pairs
-Object.entries(testImages).forEach(([mimeType, base64Data]) => {
-  const imageTest = new Promise<void>((resolve) => {
-    const image = new Image();
-
-    // Set up handlers before setting src to avoid race conditions
-    image.onload = () => {
-      // Image format is supported if successfully decoded with correct dimensions
-      if (image.width === 1 && image.height === 1) {
-        supportImages.push(mimeType);
-      }
-      resolve();
-    };
-
-    // Handle errors separately for better debugging
-    image.onerror = () => {
-      console.debug(`Format ${mimeType} not supported`);
-      resolve(); // Still resolve to continue testing other formats
-    };
-
-    // Set source to trigger loading
-    image.src = `data:${mimeType};base64,${base64Data}`;
-  });
-
-  pendingTests.push(imageTest);
-});
 const FileType = {
   NORMAL: "NORMAL",
   DIRECTORY: "DIRECTORY"
 };
 
 export async function getSupportedImages(): Promise<string[]> {
-  // 清空之前的结果
-  supportImages.length = 0;
-
-  // 并行测试所有图片格式
-  const testPromises = Object.entries(testImages).map(async ([mimeType, base64Data]) => {
-    const isSupported = await testImageFormat(mimeType, base64Data);
-    if (isSupported) {
-      supportImages.push(mimeType);
-    }
-    return { mimeType, isSupported };
-  });
-
-  // 等待所有测试完成
-  await Promise.all(testPromises);
-
-  return [...supportImages]; // 返回副本
+  const results = await Promise.all(
+    Object.entries(testImages).map(async ([mimeType, base64Data]) => ({
+      mimeType,
+      isSupported: await testImageFormat(mimeType, base64Data)
+    }))
+  );
+  return results.filter((result) => result.isSupported).map((result) => result.mimeType);
 }
 export async function getSupportedGuacVideos(): Promise<string[]> {
   return Guacamole.VideoPlayer.getSupportedTypes();
@@ -132,15 +96,22 @@ export async function getSupportedGuacMimeTypes(): Promise<string> {
   return connectString;
 }
 
+let supportedMimeTypesPromise: Promise<Record<string, string[]>> | null = null;
+
 export async function getSupportedMimeTypes(): Promise<Record<string, string[]>> {
-  const supportImages = await getSupportedImages();
-  const supportVideos = await getSupportedGuacVideos();
-  const supportAudios = await getSupportedGuacAudios();
-  return {
-    GUAC_IMAGE: supportImages,
-    GUAC_VIDEO: supportVideos,
-    GUAC_AUDIO: supportAudios
-  };
+  if (!supportedMimeTypesPromise) {
+    supportedMimeTypesPromise = Promise.all([getSupportedImages(), getSupportedGuacVideos(), getSupportedGuacAudios()])
+      .then(([supportImages, supportVideos, supportAudios]) => ({
+        GUAC_IMAGE: supportImages,
+        GUAC_VIDEO: supportVideos,
+        GUAC_AUDIO: supportAudios
+      }))
+      .catch((error) => {
+        supportedMimeTypesPromise = null;
+        throw error;
+      });
+  }
+  return await supportedMimeTypesPromise;
 }
 
 const sanitizeFilename = (filename: string) => {
@@ -160,7 +131,25 @@ interface GuacamoleFile {
   is_dir?: boolean;
 }
 
-export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string>) {
+interface ClipboardPolicyItem {
+  enabled?: boolean;
+  text_limit?: number;
+  file_size_limit?: number;
+}
+
+interface ClipboardPolicy {
+  copy?: ClipboardPolicyItem;
+  paste?: ClipboardPolicyItem;
+}
+
+const BYTES_PER_MEGABYTE = 1024 * 1024;
+const getTextLength = (text: string) => Array.from(text).length;
+
+export function useGuacamoleClient(
+  t: any,
+  endpointUrl?: MaybeRefOrGetter<string>,
+  requestAuth?: MaybeRefOrGetter<{ ticket?: string; token?: string }>
+) {
   const toast = useToast();
   const { addErrorToast } = useErrorToast();
   const message = {
@@ -187,14 +176,17 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
   const scale = ref(1);
   const currentWidth = ref(window.innerWidth);
   const currentHeight = ref(window.innerHeight);
-  const fakeProcessInterval = ref<number | null>(null);
   const pixelDensity = 1;
   const sink = new Guacamole.InputSink();
   const keyboard = new Guacamole.Keyboard();
+  const pressedKeys = ref<Set<number>>(new Set());
   const isRemoteApp = ref<boolean>(false);
   const isHttpProtocol = ref<boolean>(false);
   const remoteClipboardText = ref<string>("");
+  const clipboardPasteTextLimit = computed(() => getClipboardTextLimit("paste"));
   let connectGeneration = 0;
+  let inputCleanup: (() => void) | null = null;
+  let keyboardListening = false;
   const currentFolderFiles = ref<any>([]);
   const current_files = ref<any>({});
   const currentFolder = ref<GuacamoleFile | null>(null);
@@ -202,17 +194,45 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
   const fileFsLoading = ref(false);
   const enableFilesystem = ref(false);
   const currentGuacFsObject = ref<any>(null);
-  const getBaseApiUrl = () => withLionUrl("/api", toValue(endpointUrl) || window.location.origin);
+  const getApiUrl = (path: string) => {
+    const url = new URL(withLionUrl(`/api${path}`, toValue(endpointUrl) || window.location.origin));
+    const auth = requestAuth ? toValue(requestAuth) : undefined;
+    if (auth?.ticket) url.searchParams.set("ticket", auth.ticket);
+    if (auth?.token) url.searchParams.set("token", auth.token);
+    return url.toString();
+  };
 
   function disconnectGuaclient() {
     connectGeneration += 1;
-    if (guaClient.value) {
-      guaClient.value.disconnect();
+    if (warningIntervalId.value !== null) {
+      window.clearInterval(warningIntervalId.value);
+      warningIntervalId.value = null;
     }
-    guaDisplay.value?.getElement()?.remove();
+    inputCleanup?.();
+    inputCleanup = null;
+    keyboard.reset();
+    pressedKeys.value.clear();
+    const client = guaClient.value;
+    const tunnel = guaTunnel.value;
+    const display = guaDisplay.value;
     guaClient.value = null;
     guaTunnel.value = null;
     guaDisplay.value = null;
+    if (client) {
+      client.onstatechange = null;
+      client.onerror = null;
+      client.onclipboard = null;
+      client.onfile = null;
+      client.onfilesystem = null;
+      client.disconnect();
+    }
+    if (tunnel) {
+      tunnel.onerror = null;
+      tunnel.oninstruction = null;
+    }
+    if (display) display.onresize = null;
+    display?.getElement()?.remove();
+    loading.value = false;
   }
 
   function connectToGuacamole(
@@ -233,11 +253,11 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
     const client = new Guacamole.Client(tunnel);
 
     tunnel.onerror = () => {
+      loading.value = false;
       message.error(t("WebSocketError"));
     };
     tunnel.onuuid = (uuid: string) => {
       tunnel.uuid = uuid;
-      console.log("WebSocket UUID:", uuid);
     };
 
     const oninstruction = tunnel.oninstruction;
@@ -258,10 +278,7 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
     client.onerror = onClientError;
     client.onclipboard = onclipboard;
     const display = client.getDisplay();
-    display.onresize = (resizeEvent: any) => {
-      console.log("Guacamole display resized:", resizeEvent);
-      updateScale();
-    };
+    display.onresize = updateScale;
     display.showCursor(false);
     guaDisplay.value = display;
     guaClient.value = client;
@@ -286,12 +303,69 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
       })
       .finally(() => {
         if (generation !== connectGeneration) return;
-        console.log("Connecting to Guacamole with params:", queryParams.toString());
         client.connect(queryParams.toString());
       });
   }
 
+  function getClipboardPolicyItem(direction: "copy" | "paste"): ClipboardPolicyItem | null {
+    const policy = action_permission.value?.clipboard_policy as ClipboardPolicy | undefined;
+    return policy?.[direction] || null;
+  }
+
+  function getClipboardTextLimit(direction: "copy" | "paste") {
+    const limit = Number(getClipboardPolicyItem(direction)?.text_limit || 0);
+    return Number.isFinite(limit) && limit > 0 ? limit : 0;
+  }
+
+  function getClipboardFileSizeLimit(direction: "copy" | "paste") {
+    const limit = Number(getClipboardPolicyItem(direction)?.file_size_limit || 0);
+    return Number.isFinite(limit) && limit > 0 ? limit : 0;
+  }
+
+  function canUseClipboardDirection(direction: "copy" | "paste") {
+    return Boolean(direction === "copy" ? action_permission.value?.enable_copy : action_permission.value?.enable_paste);
+  }
+
+  function isClipboardDirectionDeniedByPolicy(direction: "copy" | "paste") {
+    return getClipboardPolicyItem(direction)?.enabled === false;
+  }
+
+  function showClipboardPermissionWarning(direction: "copy" | "paste") {
+    if (isClipboardDirectionDeniedByPolicy(direction)) {
+      message.warning(t(direction === "copy" ? "ClipboardCopyDeniedByPolicy" : "ClipboardPasteDeniedByPolicy"));
+      return;
+    }
+    message.warning(`${t(direction === "copy" ? "Copy" : "Paste")} ${t("NoPermission")}`);
+  }
+
+  function validateClipboardText(direction: "copy" | "paste", text: string) {
+    if (!canUseClipboardDirection(direction)) {
+      showClipboardPermissionWarning(direction);
+      return false;
+    }
+    const limit = getClipboardTextLimit(direction);
+    if (limit > 0 && getTextLength(text) > limit) {
+      message.warning(`${t(direction === "copy" ? "Copy" : "Paste")} ${t("ClipboardTextLimitExceeded")}: ${limit}`);
+      return false;
+    }
+    return true;
+  }
+
+  function validateClipboardBlob(direction: "copy" | "paste", size: number) {
+    if (!canUseClipboardDirection(direction)) {
+      showClipboardPermissionWarning(direction);
+      return false;
+    }
+    const limit = getClipboardFileSizeLimit(direction);
+    if (limit > 0 && size > limit * BYTES_PER_MEGABYTE) {
+      message.warning(`${t(direction === "copy" ? "Copy" : "Paste")} ${t("ClipboardFileSizeLimitExceeded")}: ${limit}`);
+      return false;
+    }
+    return true;
+  }
+
   function sendTextToRemote(text: string) {
+    if (!validateClipboardText("paste", text)) return;
     const data = {
       type: "text/plain",
       data: text
@@ -319,11 +393,12 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
   }
 
   const debouncedSendClipboardToRemote = useDebounceFn(async () => {
-    const text = await readClipboardText();
-    if (!text || !text.trim()) {
-      return;
+    try {
+      const text = await readClipboardText();
+      if (text?.trim()) sendTextToRemote(text);
+    } catch (error) {
+      console.debug("Unable to read local clipboard", error);
     }
-    sendTextToRemote(text);
   }, 300);
 
   const registerMouseAndKeyboardHanlder = () => {
@@ -331,10 +406,10 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
     if (!client || !client.getDisplay) {
       return console.warn("Guacamole client is not initialized or does not support mouse and keyboard events");
     }
-    window.addEventListener("focus", debouncedSendClipboardToRemote, false);
-    registerMouse(client);
-
-    registerTouchScreen(client);
+    inputCleanup?.();
+    inputCleanup = null;
+    const mouse = registerMouse(client);
+    const touchScreen = registerTouchScreen(client);
 
     registerKeyboard(client);
     const display = client.getDisplay();
@@ -342,6 +417,7 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
 
     const handleMouseEnter = () => {
       document.body.focus();
+      display.showCursor(false);
       nextTick(() => {
         sink.focus();
       });
@@ -353,6 +429,24 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
     };
     displayEl.addEventListener("mouseenter", handleMouseEnter);
     displayEl.addEventListener("mouseleave", handleMouseLeave);
+    inputCleanup = () => {
+      displayEl.removeEventListener("mouseenter", handleMouseEnter);
+      displayEl.removeEventListener("mouseleave", handleMouseLeave);
+      keyboard.reset();
+      keyboard.onkeydown = null;
+      keyboard.onkeyup = null;
+      if (mouse) {
+        mouse.onmousedown = null;
+        mouse.onmouseup = null;
+        mouse.onmousemove = null;
+        mouse.onmouseout = null;
+      }
+      if (touchScreen) {
+        touchScreen.onmousedown = null;
+        touchScreen.onmousemove = null;
+        touchScreen.onmouseup = null;
+      }
+    };
   };
 
   const resizeGuaScale = useDebounceFn((width: number, height: number) => {
@@ -363,7 +457,6 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
 
   const sendGuaSize = (width: number, height: number) => {
     if (guaClient.value && guaDisplay.value) {
-      console.log("Sending resize to Guacamole client:", width, height);
       guaClient.value.sendSize(width, height);
     }
   };
@@ -380,15 +473,20 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
     }
     const newScale = Math.min(currentWidth.value / w, currentHeight.value / h);
     if (newScale !== scale.value) {
-      console.log(`Guacamole display scaled from ${scale.value} to ${newScale}`);
       scale.value = newScale;
       guaDisplay.value.scale(newScale);
     }
   }
 
   function onJmsEvent(event: any, data: any) {
-    console.log("Received JMS event:", event);
-    const dataObj = JSON.parse(data);
+    let dataObj: any;
+    try {
+      dataObj = typeof data === "string" ? JSON.parse(data) : data;
+    } catch (error) {
+      console.warn("Ignored malformed JMS event payload", event, error);
+      return;
+    }
+    if (!dataObj || typeof dataObj !== "object") return;
     switch (event) {
       case "session_pause": {
         const msg = `${dataObj.user} ${t("PauseSession")}`;
@@ -402,7 +500,7 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
       }
       case "session": {
         sessionObject.value = dataObj;
-        const protocol = dataObj.protocol;
+        const protocol = String(dataObj.protocol || "");
         isHttpProtocol.value = protocol.toLowerCase().includes("http");
         const action = dataObj.action_permission || {};
         action_permission.value = dataObj.action_permission || {};
@@ -431,12 +529,12 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
       }
       case "share_users": {
         onlineUsersMap.value = dataObj;
-        console.log("Online users updated:", onlineUsersMap.value);
         break;
       }
       case "perm_expired": {
         const warningMsg = `${t("PermissionExpired")}: ${dataObj.detail}`;
         message.warning(warningMsg);
+        if (warningIntervalId.value !== null) window.clearInterval(warningIntervalId.value);
         warningIntervalId.value = window.setInterval(() => {
           message.warning(warningMsg);
         }, 1000 * 31);
@@ -481,7 +579,6 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
     [65507, 65505, 79], // control+shift + o
     [65507, 65505, 78] // control+shift + n
   ];
-  const pressedKeys = ref<Set<number>>(new Set());
   const isBlockedCombination = (keysym: number): boolean => {
     if (!isRemoteApp.value) {
       return false;
@@ -517,7 +614,10 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
       console.warn("Guacamole display is not available");
       return;
     }
-    keyboard.listenTo(sink.getElement());
+    if (!keyboardListening) {
+      keyboard.listenTo(sink.getElement());
+      keyboardListening = true;
+    }
 
     keyboard.onkeydown = (keysym: any) => {
       if (isBlockedCombination(keysym)) {
@@ -542,12 +642,12 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
   function registerTouchScreen(client: any) {
     if (!client || !client.getDisplay) {
       console.warn("Guacamole client is not initialized or does not support screen events");
-      return;
+      return null;
     }
     const display = client.getDisplay();
     if (!display) {
       console.warn("Guacamole display is not available");
-      return;
+      return null;
     }
     const touchScreen = new Guacamole.Mouse.Touchscreen(display.getElement());
     const handleEmulatedMouseDown = (mouseState: any) => {
@@ -573,6 +673,7 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
     };
     touchScreen.onmousedown = handleEmulatedMouseDown;
     touchScreen.onmousemove = touchScreen.onmouseup = handleEmulatedMouseState;
+    return touchScreen;
   }
 
   function sendScaledMouseState(client: any, mouseState: any) {
@@ -601,12 +702,12 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
   function registerMouse(client: any) {
     if (!client || !client.getDisplay) {
       console.warn("Guacamole client is not initialized or does not support mouse events");
-      return;
+      return null;
     }
     const display = client.getDisplay();
     if (!display) {
       console.warn("Guacamole display is not available");
-      return;
+      return null;
     }
     const sendMouseState = (mouseState: any) => {
       sendScaledMouseState(client, mouseState);
@@ -623,6 +724,7 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
       // Send mouse state, hide cursor if necessary
       display.showCursor(false);
     };
+    return mouse;
   }
 
   function onClientError(status: any) {
@@ -633,8 +735,7 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
     const currentLang = LanguageCode;
     msg = ErrorStatusCodes[code]
       ? t(ErrorStatusCodes[code], { PLACEHOLDER: status.message })
-      : t(new ConvertGuacamoleError(status.message), { PLACEHOLDER: status.message });
-    console.log("Guacamole error message:", msg);
+      : t(convertGuacamoleError(status.message), { PLACEHOLDER: status.message });
     switch (code) {
       case 1005:
         // 管理员终断会话，特殊处理
@@ -656,8 +757,6 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
   }
 
   function clientStateChanged(state: any) {
-    console.log("Guacamole client state changed:", state);
-
     switch (state) {
       case 0:
         connectStatus.value = "IDLE";
@@ -679,6 +778,7 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
         break;
       case 5:
         connectStatus.value = "Disconnected";
+        loading.value = false;
         lunaCommunicator.sendLuna(LUNA_MESSAGE_TYPE.CLOSE, "");
         guaDisplay.value?.getElement()?.remove();
         break;
@@ -690,7 +790,6 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
       console.warn("Guacamole file system object or name is not provided.");
       return;
     }
-    console.log("Guacamole file system object received:", obj, name);
 
     enableFilesystem.value = true;
     fsObject.value = obj;
@@ -722,8 +821,7 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
       return;
     }
     recorder.onclose = () => {
-      console.log("Audio stream closed");
-      requestAudioStream(client); // 重新请求音频流
+      if (guaClient.value === client) requestAudioStream(client);
     }; // 重新请求音频流
   }
 
@@ -769,9 +867,11 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
   function clientFileReceived(stream: any, _mimetype: any, filename: any) {
     // Build download URL
     const uuid = guaTunnel.value?.uuid || "";
-    const url = `${getBaseApiUrl()}/tunnels/${encodeURIComponent(uuid)}/streams/${encodeURIComponent(
-      stream.index
-    )}/${encodeURIComponent(sanitizeFilename(filename))}`;
+    const url = getApiUrl(
+      `/tunnels/${encodeURIComponent(uuid)}/streams/${encodeURIComponent(stream.index)}/${encodeURIComponent(
+        sanitizeFilename(filename)
+      )}`
+    );
 
     // Create temporary hidden iframe to facilitate download
     const iframe = document.createElement("iframe");
@@ -836,9 +936,11 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
           progressCallback: CallableFunction
         ) {
           // Build upload URL
-          const url = `${getBaseApiUrl()}/tunnels/${encodeURIComponent(tunnelId)}/streams/${encodeURIComponent(
-            stream.index
-          )}/${encodeURIComponent(sanitizeFilename(file.name))}`;
+          const url = getApiUrl(
+            `/tunnels/${encodeURIComponent(tunnelId)}/streams/${encodeURIComponent(stream.index)}/${encodeURIComponent(
+              sanitizeFilename(file.name)
+            )}`
+          );
           const xhr = new XMLHttpRequest();
           xhr.withCredentials = true;
           // Invoke provided callback if upload tracking is supported
@@ -927,27 +1029,11 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
     }
 
     const streamName = `${folder.streamName}/${sanitizeFilename(file.name).replace(/:+/g, "_")}`;
-    console.log("Uploading file:", file.name, "to stream:", streamName);
-
-    if (fakeProcessInterval.value) {
-      clearInterval(fakeProcessInterval.value);
-      fakeProcessInterval.value = null;
-    }
-
-    fakeProcessInterval.value = setInterval(() => {
-      if (file.percentage && file.percentage < 97) {
-        file.percentage += 1;
-      } else {
-        if (fakeProcessInterval.value) {
-          clearInterval(fakeProcessInterval.value);
-          fakeProcessInterval.value = null;
-        }
-      }
-    }, 1000 * 2);
 
     const progressCallback = (e: any) => {
-      console.log("Upload progress:", e.loaded, "/", e.total, "for file:", file.name);
-      options.file.percentage = (e.loaded / e.total) * 100 - 40;
+      if (e.lengthComputable && e.total > 0) {
+        options.file.percentage = Math.min(99, (e.loaded / e.total) * 100);
+      }
     };
 
     try {
@@ -958,12 +1044,6 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
       console.error("Error uploading file:", error);
       onError?.();
       throw error; // 重新抛出异常，让调用者知道上传失败
-    } finally {
-      // 确保无论成功还是失败都清理 interval
-      if (fakeProcessInterval.value) {
-        clearInterval(fakeProcessInterval.value);
-        fakeProcessInterval.value = null;
-      }
     }
   };
   function onclipboard(stream: object, mimetype: string) {
@@ -980,22 +1060,25 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
 
       // Set clipboard contents once stream is finished
       reader.onend = async () => {
-        console.log("clipboard received from remote: ", data);
+        if (!validateClipboardText("copy", data)) return;
         remoteClipboardText.value = data;
-        if (navigator.clipboard) {
-          await navigator.clipboard.writeText(data);
+        try {
+          await writeClipboardText(data);
+        } catch (error) {
+          console.debug("Unable to write local clipboard", error);
         }
       };
     } else {
       // Otherwise read the clipboard data as a Blob
       reader = new Guacamole.BlobReader(stream, mimetype);
-      reader.onprogress = (text: any) => {
-        console.log("clipboard blob text received from remote: ", text);
-      };
-      reader.onend = () => {
+      reader.onend = async () => {
         const blob = reader.getBlob();
-        console.log("clipboard blob received from remote: ", blob);
-        navigator.clipboard.write(blob);
+        if (!validateClipboardBlob("copy", blob.size)) return;
+        try {
+          await writeClipboardBlob(blob);
+        } catch (error) {
+          console.debug("Unable to write binary clipboard data", error);
+        }
       };
     }
   }
@@ -1126,6 +1209,7 @@ export function useGuacamoleClient(t: any, endpointUrl?: MaybeRefOrGetter<string
     fileFsLoading,
     currentGuacFsObject,
     remoteClipboardText,
+    clipboardPasteTextLimit,
     sendInputActive
   };
 }
diff --git a/ui/lion/hooks/useLionConnectTicket.ts b/ui/lion/hooks/useLionConnectTicket.ts
new file mode 100644
index 000000000..e557b1849
--- /dev/null
+++ b/ui/lion/hooks/useLionConnectTicket.ts
@@ -0,0 +1,22 @@
+import { isTauriRuntime } from "~/utils/runtime";
+
+export async function createLionConnectTicket(baseUrl: string, tokenId = "") {
+  const { createKokoTicket } = useWorkspaceConnectors();
+
+  try {
+    const result = await createKokoTicket({ baseUrl, tokenId });
+    if (result.ticket) return String(result.ticket);
+  } catch (error) {
+    if (!isTauriRuntime()) {
+      console.warn("[lion] connect ticket unavailable, falling back to cookie authentication", error);
+    }
+  }
+
+  if (!isTauriRuntime()) return "";
+  const result = await useTauriCoreInvoke<{ ticket?: string }>("create_koko_connect_ticket", {
+    baseUrl,
+    tokenId
+  });
+  if (!result.ticket) throw new Error("Koko did not return a Lion connect ticket");
+  return String(result.ticket);
+}
diff --git a/ui/lion/hooks/useLionEndpoint.ts b/ui/lion/hooks/useLionEndpoint.ts
new file mode 100644
index 000000000..1744a0ecd
--- /dev/null
+++ b/ui/lion/hooks/useLionEndpoint.ts
@@ -0,0 +1,17 @@
+import type { MaybeRefOrGetter } from "vue";
+import { computed, toValue } from "vue";
+
+import { useUserInfoStore } from "~/store/modules/userInfo";
+import { isTauriRuntime } from "~/utils/runtime";
+
+export function useLionEndpoint(explicitEndpoint?: MaybeRefOrGetter<string | undefined>) {
+  const userInfoStore = useUserInfoStore();
+
+  return computed(() => {
+    const explicit = String(toValue(explicitEndpoint) || "").trim();
+    if (explicit) return explicit;
+    if (!import.meta.client) return "";
+    if (isTauriRuntime() && userInfoStore.currentSite) return userInfoStore.currentSite;
+    return window.location.origin;
+  });
+}
diff --git a/ui/lion/locales/index.ts b/ui/lion/locales/index.ts
index c58890664..35575e58b 100644
--- a/ui/lion/locales/index.ts
+++ b/ui/lion/locales/index.ts
@@ -1,3 +1,28 @@
+import { apiRequest } from "@/composables/useApiRequest";
+import { LanguageCode } from "@/lion/utils/config";
+
 export { default as date } from "./date";
 export { message } from "./modules";
-export { LanguageCode } from "@/lion/utils/config";
+export { LanguageCode };
+
+type LionTranslations = Record<string, Record<string, any>>;
+
+const normalizedLangCode = LanguageCode.toLowerCase();
+let remoteTranslationsPromise: Promise<LionTranslations> | null = null;
+
+export const loadRemoteTranslations = () => {
+  if (!remoteTranslationsPromise) {
+    remoteTranslationsPromise = apiRequest<LionTranslations>({
+      method: "GET",
+      path: "/api/v1/settings/i18n/lion/",
+      query: {
+        lang: normalizedLangCode,
+        flat: 0
+      }
+    }).catch((error) => {
+      remoteTranslationsPromise = null;
+      throw error;
+    });
+  }
+  return remoteTranslationsPromise;
+};
diff --git a/ui/lion/locales/modules/en.json b/ui/lion/locales/modules/en.json
index 0967ef424..840beffdc 100644
--- a/ui/lion/locales/modules/en.json
+++ b/ui/lion/locales/modules/en.json
@@ -1 +1,15 @@
-{}
+{
+  "ClipboardTextLimitExceeded": "clipboard text exceeds the limit",
+  "ClipboardFileSizeLimitExceeded": "clipboard file exceeds the limit",
+  "ClipboardCopyDeniedByPolicy": "Clipboard control policy prevents copying",
+  "ClipboardPasteDeniedByPolicy": "Clipboard control policy prevents pasting",
+  "Copy": "Copy",
+  "Paste": "Paste",
+  "NoPermission": "permission denied",
+  "LoadMore": "Load more",
+  "Uploading": "Uploading",
+  "Waiting": "Waiting",
+  "Forward": "Forward",
+  "ZoomIn": "Zoom in",
+  "ZoomOut": "Zoom out"
+}
diff --git a/ui/lion/locales/modules/ja.json b/ui/lion/locales/modules/ja.json
index 0967ef424..0b51ce444 100644
--- a/ui/lion/locales/modules/ja.json
+++ b/ui/lion/locales/modules/ja.json
@@ -1 +1,15 @@
-{}
+{
+  "ClipboardTextLimitExceeded": "クリップボードのテキストが制限を超えています",
+  "ClipboardFileSizeLimitExceeded": "クリップボードのファイルが制限を超えています",
+  "ClipboardCopyDeniedByPolicy": "クリップボード制御ルールによりコピーできません",
+  "ClipboardPasteDeniedByPolicy": "クリップボード制御ルールにより貼り付けできません",
+  "Copy": "コピー",
+  "Paste": "貼り付け",
+  "NoPermission": "権限がありません",
+  "LoadMore": "さらに読み込む",
+  "Uploading": "アップロード中",
+  "Waiting": "待機中",
+  "Forward": "進む",
+  "ZoomIn": "拡大",
+  "ZoomOut": "縮小"
+}
diff --git a/ui/lion/locales/modules/zh.json b/ui/lion/locales/modules/zh.json
index 0967ef424..60204f101 100644
--- a/ui/lion/locales/modules/zh.json
+++ b/ui/lion/locales/modules/zh.json
@@ -1 +1,15 @@
-{}
+{
+  "ClipboardTextLimitExceeded": "剪贴板文本超过限制",
+  "ClipboardFileSizeLimitExceeded": "剪贴板文件超过限制",
+  "ClipboardCopyDeniedByPolicy": "触发剪贴板控制规则，无法复制",
+  "ClipboardPasteDeniedByPolicy": "触发剪贴板控制规则，无法粘贴",
+  "Copy": "复制",
+  "Paste": "粘贴",
+  "NoPermission": "无权限",
+  "LoadMore": "加载更多",
+  "Uploading": "上传中",
+  "Waiting": "等待中",
+  "Forward": "前进",
+  "ZoomIn": "放大",
+  "ZoomOut": "缩小"
+}
diff --git a/ui/lion/locales/modules/zh_Hant.json b/ui/lion/locales/modules/zh_Hant.json
index 0967ef424..c96b33c5e 100644
--- a/ui/lion/locales/modules/zh_Hant.json
+++ b/ui/lion/locales/modules/zh_Hant.json
@@ -1 +1,15 @@
-{}
+{
+  "ClipboardTextLimitExceeded": "剪貼簿文字超過限制",
+  "ClipboardFileSizeLimitExceeded": "剪貼簿檔案超過限制",
+  "ClipboardCopyDeniedByPolicy": "觸發剪貼簿控制規則，無法複製",
+  "ClipboardPasteDeniedByPolicy": "觸發剪貼簿控制規則，無法貼上",
+  "Copy": "複製",
+  "Paste": "貼上",
+  "NoPermission": "無權限",
+  "LoadMore": "載入更多",
+  "Uploading": "上傳中",
+  "Waiting": "等待中",
+  "Forward": "前進",
+  "ZoomIn": "放大",
+  "ZoomOut": "縮小"
+}
diff --git a/ui/lion/styles/base.css b/ui/lion/styles/base.css
index ec70c1fe4..15f1d5dc1 100644
--- a/ui/lion/styles/base.css
+++ b/ui/lion/styles/base.css
@@ -1,50 +1,6 @@
-@import "tailwindcss";
 @import "./keyboard.css";
 
-@font-face {
-  font-family: "Open Sans";
-  src: url("./fonts/OpenSans-Regular.ttf");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("./fonts/OpenSans-Bold.ttf");
-  font-weight: bold;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("./fonts/OpenSans-Light.ttf");
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("./fonts/OpenSans-Italic.ttf");
-  font-weight: 300;
-  font-style: italic;
-}
-
-body {
-  height: 100%;
-  /* -moz-osx-font-smoothing: grayscale; */
-  -webkit-font-smoothing: auto;
-  background-color: #000000;
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  line-height: 1.428;
-}
-
-::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
-  background-color: #0a0a0a;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: #494141;
-  border-radius: 6px;
+.lion-surface {
+  color: var(--app-text-primary);
+  background: var(--workspace-surface-background);
 }
diff --git a/ui/lion/styles/keyboard.css b/ui/lion/styles/keyboard.css
index 917d33563..450b1fb8d 100644
--- a/ui/lion/styles/keyboard.css
+++ b/ui/lion/styles/keyboard.css
@@ -29,25 +29,19 @@
   top: 0;
   bottom: 0;
 
-  background: #444;
+  background: var(--app-surface-header);
 
-  border: 0.125em solid #666;
+  border: 0.125em solid var(--app-border-strong);
   -moz-border-radius: 0.25em;
   -webkit-border-radius: 0.25em;
   -khtml-border-radius: 0.25em;
   border-radius: 0.25em;
 
-  color: white;
+  color: var(--app-text-primary);
   font-size: 40%;
   font-weight: lighter;
   text-align: center;
   white-space: pre;
-
-  text-shadow:
-    1px 1px 0 rgba(0, 0, 0, 0.25),
-    1px -1px 0 rgba(0, 0, 0, 0.25),
-    -1px 1px 0 rgba(0, 0, 0, 0.25),
-    -1px -1px 0 rgba(0, 0, 0, 0.25);
 }
 
 .guac-keyboard .guac-keyboard-key:hover {
@@ -55,8 +49,8 @@
 }
 
 .guac-keyboard .guac-keyboard-key.highlight {
-  background: #666;
-  border-color: #666;
+  background: var(--app-state-hover-strong);
+  border-color: var(--app-border-strong);
 }
 
 /* Align some keys to the left */
@@ -97,13 +91,15 @@
 
 /* Active latin */
 .guac-keyboard.guac-keyboard-modifier-lat .guac-keyboard-key-latin {
-  background: #882;
-  border-color: #dd4;
+  color: var(--app-accent-foreground);
+  background: var(--theme-accent);
+  border-color: color-mix(in srgb, var(--theme-accent) 72%, var(--app-border-strong));
 }
 
 .guac-keyboard .guac-keyboard-key.guac-keyboard-pressed {
-  background: #822;
-  border-color: #d44;
+  color: var(--app-text-inverse);
+  background: var(--color-bg-error);
+  border-color: var(--color-border-error);
 }
 
 .guac-keyboard .guac-keyboard-group {
diff --git a/ui/lion/utils/clipboard.ts b/ui/lion/utils/clipboard.ts
index 98fab704d..8dd9a0472 100644
--- a/ui/lion/utils/clipboard.ts
+++ b/ui/lion/utils/clipboard.ts
@@ -1,12 +1 @@
-export async function readClipboardText(): Promise<string> {
-  try {
-    if (navigator.clipboard && navigator.clipboard.readText) {
-      return await navigator.clipboard.readText();
-    }
-    console.log("navigator.clipboard api not found");
-    return "";
-  } catch (err) {
-    console.error("Failed to read clipboard:", err);
-    return "";
-  }
-}
+export { readClipboardText, writeClipboardBlob, writeClipboardText } from "~/utils/clipboard";
diff --git a/ui/lion/utils/config.ts b/ui/lion/utils/config.ts
index 66a1e115b..f192857e4 100644
--- a/ui/lion/utils/config.ts
+++ b/ui/lion/utils/config.ts
@@ -1,5 +1,3 @@
-export { BASE_URL, BASE_WS_URL } from "./base";
-
 const readCookie = (name: string) => {
   if (!import.meta.client) return "";
   const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]+)`));
@@ -11,161 +9,3 @@ const browserLang = import.meta.client
   : "en";
 
 export const LanguageCode = readCookie("django_language") || readCookie("lang") || browserLang || "en";
-export const ThemeCode = import.meta.client ? localStorage.getItem("themeType") || "default" : "default";
-
-export const MaxTimeout = 30 * 1000;
-
-export const MAX_TRANSFER_SIZE = 1024 * 1024 * 500;
-
-export const defaultTheme = {
-  background: "#121414",
-  foreground: "#ffffff",
-  black: "#2e3436",
-  red: "#cc0000",
-  green: "#4e9a06",
-  yellow: "#c4a000",
-  blue: "#3465a4",
-  magenta: "#75507b",
-  cyan: "#06989a",
-  white: "#d3d7cf",
-  brightBlack: "#555753",
-  brightRed: "#ef2929",
-  brightGreen: "#8ae234",
-  brightYellow: "#fce94f",
-  brightBlue: "#729fcf",
-  brightMagenta: "#ad7fa8",
-  brightCyan: "#34e2e2",
-  brightWhite: "#eeeeec"
-};
-
-// 图片类型的
-export const FILE_SUFFIX_IMAGE = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "ico", "svg", "heic", "heif"];
-// 音频类型的
-export const FILE_SUFFIX_AUDIO = ["mp3", "wav", "ogg", "m4a", "aac", "flac", "m4b", "m4p", "m4b", "m4p", "m4b", "m4p"];
-// 视频类型的
-export const FILE_SUFFIX_VIDEO = [
-  "mp4",
-  "avi",
-  "mov",
-  "wmv",
-  "flv",
-  "mpeg",
-  "mpg",
-  "m4v",
-  "mkv",
-  "webm",
-  "vob",
-  "m2ts",
-  "mts",
-  "ts",
-  "m2t",
-  "m2ts",
-  "mts",
-  "ts",
-  "m2t",
-  "m2ts"
-];
-// 压缩包类型的
-export const FILE_SUFFIX_COMPRESSION = [
-  "zip",
-  "rar",
-  "7z",
-  "tar",
-  "gz",
-  "bz2",
-  "iso",
-  "dmg",
-  "pkg",
-  "deb",
-  "rpm",
-  "msi",
-  "exe",
-  "app",
-  "dmg",
-  "pkg",
-  "deb",
-  "rpm",
-  "msi",
-  "exe",
-  "app"
-];
-// 文档类型的
-export const FILE_SUFFIX_DOCUMENT = [
-  "doc",
-  "docx",
-  "xls",
-  "xlsx",
-  "ppt",
-  "pptx",
-  "pdf",
-  "txt",
-  "md",
-  "csv",
-  "json",
-  "xml",
-  "yaml",
-  "yml",
-  "toml",
-  "ini",
-  "conf",
-  "cfg",
-  "config",
-  "log",
-  "yml",
-  "toml",
-  "ini",
-  "conf",
-  "cfg",
-  "config",
-  "log",
-  "lock",
-  "sock"
-];
-// 代码类型的
-export const FILE_SUFFIX_CODE = [
-  "js",
-  "ts",
-  "py",
-  "java",
-  "c",
-  "cpp",
-  "h",
-  "hpp",
-  "css",
-  "html",
-  "php",
-  "ruby",
-  "go",
-  "rust",
-  "swift",
-  "kotlin",
-  "dart",
-  "scala",
-  "haskell",
-  "erlang",
-  "elixir",
-  "ocaml",
-  "erlang",
-  "elixir",
-  "ocaml",
-  "erlang",
-  "elixir",
-  "ocaml",
-  "erlang",
-  "elixir",
-  "ocaml"
-];
-// 安装包类型的
-export const FILE_SUFFIX_INSTALL = ["deb", "rpm", "msi", "exe", "app", "dmg", "pkg", "deb", "rpm", "msi", "exe", "app"];
-// 数据库类型
-export const FILE_SUFFIX_DATABASE = [
-  "mysql",
-  "oracle",
-  "postgresql",
-  "sqlserver",
-  "mongodb",
-  "redis",
-  "memcached",
-  "sqlite",
-  "mariadb"
-];
diff --git a/ui/lion/utils/lunaBus.ts b/ui/lion/utils/lunaBus.ts
index d064ad777..e281ff6a9 100644
--- a/ui/lion/utils/lunaBus.ts
+++ b/ui/lion/utils/lunaBus.ts
@@ -19,8 +19,8 @@ const allEventTypes = Object.keys(LUNA_MESSAGE_TYPE) as LunaEventType[];
 class LunaCommunicator<T extends EventPayloadMap = EventPayloadMap> {
   private mitt: Emitter<T>;
   private lunaId: string = "";
-  private targetOrigin: string = "*";
-  private protocol: string = "";
+  private targetOrigin: string = "";
+  private messageHandler: ((event: MessageEvent) => void) | null = null;
 
   constructor() {
     this.mitt = mitt<T>();
@@ -28,36 +28,38 @@ class LunaCommunicator<T extends EventPayloadMap = EventPayloadMap> {
   }
 
   private setupMessageListener() {
-    window.addEventListener("message", (event: MessageEvent) => {
-      const message: LunaMessage = event.data;
+    if (typeof window === "undefined") return;
+    this.messageHandler = (event: MessageEvent) => {
+      if (event.source !== window.parent) return;
+      if (!event.data || typeof event.data !== "object" || typeof event.data.name !== "string") return;
+
+      const message = event.data as LunaMessage;
       switch (message.name) {
         case LUNA_MESSAGE_TYPE.PING:
+          if (typeof message.id !== "string") return;
           this.lunaId = message.id;
-          this.targetOrigin = event.origin;
-          this.protocol = message.protocol;
+          this.targetOrigin = event.origin === "null" ? "*" : event.origin;
           this.sendLuna(LUNA_MESSAGE_TYPE.PONG, "");
-          console.log(
-            `LunaCommunicator initialized with ID: ${this.lunaId}, Origin: ${this.targetOrigin}, Protocol: ${this.protocol}`
-          );
           break;
         default:
+          if (!this.lunaId || (this.targetOrigin !== "*" && event.origin !== this.targetOrigin)) return;
           // 处理其他类型的消息
           if (allEventTypes.includes(message.name as LunaEventType)) {
             const eventType = message.name as keyof T;
             const data = message as T[keyof T];
             this.mitt.emit(eventType, data);
           } else {
-            console.warn(`Unhandled message type: ${message.name}`, message);
+            console.warn(`Unhandled Luna message type: ${message.name}`);
           }
       }
-    });
+    };
+    window.addEventListener("message", this.messageHandler);
   }
 
   // 发送消息到目标窗口
   public sendLuna<K extends keyof T>(name: K, data: T[K]) {
-    if (!this.lunaId || !this.targetOrigin) {
-      console.warn("Target window not set");
-    }
+    if (typeof window === "undefined") return;
+    if (!this.lunaId || !this.targetOrigin || window.parent === window) return;
 
     window.parent.postMessage({ name, id: this.lunaId, data }, this.targetOrigin);
   }
@@ -84,6 +86,10 @@ class LunaCommunicator<T extends EventPayloadMap = EventPayloadMap> {
   // 销毁实例
   public destroy() {
     this.mitt.all.clear();
+    if (this.messageHandler && typeof window !== "undefined") {
+      window.removeEventListener("message", this.messageHandler);
+      this.messageHandler = null;
+    }
   }
 
   // 获取所有事件类型
diff --git a/ui/lion/views/ConnectView.vue b/ui/lion/views/ConnectView.vue
index 098e9c786..921451243 100644
--- a/ui/lion/views/ConnectView.vue
+++ b/ui/lion/views/ConnectView.vue
@@ -13,9 +13,10 @@ import Osk from "@/lion/components/Osk.vue";
 import OtherOption from "@/lion/components/OtherOption.vue";
 import SessionShare from "@/lion/components/SessionShare/index.vue";
 import { useGuacamoleClient } from "@/lion/hooks/useGuacamoleClient";
+import { createLionConnectTicket } from "@/lion/hooks/useLionConnectTicket";
+import { useLionEndpoint } from "@/lion/hooks/useLionEndpoint";
 import { LUNA_MESSAGE_TYPE } from "@/lion/types/postmessage.type";
 import { withLionWsUrl } from "@/lion/utils/base";
-import { readClipboardText } from "@/lion/utils/clipboard";
 import { getCurrentConnectParams } from "@/lion/utils/common";
 import { lunaCommunicator } from "@/lion/utils/lunaBus";
 import { ErrorStatusCodes } from "@/lion/utils/status";
@@ -24,12 +25,18 @@ const toast = useToast();
 const { addErrorToast } = useErrorToast();
 const { t } = useI18n();
 const containerRef = ref<HTMLElement | null>(null);
+const displayRef = ref<HTMLElement | null>(null);
 const sessionContext = inject(connectorSessionKey, ref<ConnectorSessionContext | null>(null));
-const endpointUrl = computed(() => unref(sessionContext)?.endpointUrl || window.location.origin);
+const endpointUrl = useLionEndpoint(() => unref(sessionContext)?.endpointUrl);
+const activeToken = ref("");
+const activeTicket = ref("");
+let ticketCreatedAt = 0;
+let ticketRefreshPromise: Promise<string> | null = null;
 
 const {
   guaDisplay,
   connectToGuacamole,
+  connectStatus,
   onlineUsersMap,
   disconnectGuaclient,
   sendTextToRemote,
@@ -47,16 +54,17 @@ const {
   currentFolder,
   currentFolderFiles,
   hasClipboardPermission,
+  debouncedSendClipboardToRemote,
   fileFsLoading,
   currentGuacFsObject,
   enableShare,
   action_permission,
   remoteClipboardText,
+  clipboardPasteTextLimit,
   sendInputActive
-} = useGuacamoleClient(t, endpointUrl);
+} = useGuacamoleClient(t, endpointUrl, () => ({ ticket: activeTicket.value, token: activeToken.value }));
 
 const drawShow = ref(false);
-const connectStatus = ref("Connecting");
 const autoFit = ref<boolean>(true);
 
 const resolveContainerSize = () => {
@@ -94,8 +102,15 @@ const uploadingFiles = ref<Array<UploadItem>>([]);
 const isUploading = ref(false);
 const displayUploadingFiles = ref<Array<LionUploadFileInfo>>([]);
 const showOsk = ref<boolean>(false);
+let uploadSequence = 0;
+
+const createUploadId = () => {
+  uploadSequence += 1;
+  return globalThis.crypto?.randomUUID?.() || `lion-drop-${Date.now()}-${uploadSequence}`;
+};
 
 function getKeyboardLayout() {
+  if (!import.meta.client) return "en-us-qwerty";
   const lunaSetting = localStorage.getItem("LunaSetting");
   if (lunaSetting) {
     const setting = JSON.parse(lunaSetting);
@@ -110,7 +125,37 @@ const keyboardLayout = ref<string>(getKeyboardLayout());
 const currentTab = ref("general");
 const shouldEnableScroll = ref(false);
 
-const handleUploadFile = (options: LionUploadCustomRequestOptions, folder: any) => {
+const refreshConnectTicket = async () => {
+  if (!activeToken.value) return activeTicket.value;
+  if (activeTicket.value && Date.now() - ticketCreatedAt < 25 * 60 * 1000) return activeTicket.value;
+  const previousTicket = activeTicket.value;
+  const previousTicketAge = Date.now() - ticketCreatedAt;
+  if (!ticketRefreshPromise) {
+    ticketRefreshPromise = createLionConnectTicket(endpointUrl.value, activeToken.value).finally(() => {
+      ticketRefreshPromise = null;
+    });
+  }
+  try {
+    activeTicket.value = await ticketRefreshPromise;
+    ticketCreatedAt = Date.now();
+    return activeTicket.value;
+  } catch (error) {
+    if (previousTicket && previousTicketAge < 30 * 60 * 1000) return previousTicket;
+    throw error;
+  }
+};
+
+const handleUploadFile = async (options: LionUploadCustomRequestOptions, folder: any) => {
+  if (action_permission.value && !action_permission.value.enable_upload) {
+    toast.add({ title: `${t("UploadFile")} ${t("NoPermission")}`, color: "warning" });
+    return;
+  }
+  try {
+    await refreshConnectTicket();
+  } catch (error) {
+    addErrorToast({ title: error instanceof Error ? error.message : String(error) });
+    return;
+  }
   const item = { uploadOptions: options, folder: folder || currentFolder.value };
   displayUploadingFiles.value.push(options.file);
   uploadingFiles.value.push(item);
@@ -128,7 +173,10 @@ const handleRemoveFile = (file: LionUploadFileInfo) => {
     toast.add({ title: t("FileUploadingWarning"), color: "warning" });
     return;
   }
-  displayUploadingFiles.value = displayUploadingFiles.value.filter((f) => f.name !== file.name);
+  if (file.status === "pending") {
+    uploadingFiles.value = uploadingFiles.value.filter((item) => item.uploadOptions.file.id !== file.id);
+  }
+  displayUploadingFiles.value = displayUploadingFiles.value.filter((item) => item.id !== file.id);
 };
 
 async function processUploadQueue() {
@@ -138,6 +186,7 @@ async function processUploadQueue() {
     const { uploadOptions, folder } = uploadItem;
 
     try {
+      await refreshConnectTicket();
       uploadOptions.file.status = "uploading";
       await uploadFile(uploadOptions, folder);
       uploadOptions.file.status = "finished";
@@ -150,8 +199,6 @@ async function processUploadQueue() {
         msg = `${t("FileUploadError")}: ${uploadOptions.file.name}`;
       }
       addErrorToast({ title: msg });
-    } finally {
-      setTimeout(handleRemoveFile, 5000, uploadOptions.file);
     }
   }
   isUploading.value = false;
@@ -164,12 +211,13 @@ const fileDrop = (event: DragEvent) => {
   if (!files?.length) return;
 
   Array.from(files).forEach((fileObj) => {
+    const id = createUploadId();
     handleUploadFile(
       {
         file: {
-          id: `batch-id-${fileObj.name}`,
+          id,
           name: fileObj.name,
-          batchId: `batch-id-${fileObj.name}`,
+          batchId: id,
           percentage: 0,
           type: fileObj.type,
           status: "pending",
@@ -181,60 +229,97 @@ const fileDrop = (event: DragEvent) => {
   });
 };
 
-const debouncedSendClipboardToRemote = useDebounceFn(async () => {
-  const text = await readClipboardText();
-  if (!text?.trim()) return;
-  sendTextToRemote(text);
-}, 300);
+const getBrowserTimezone = () => {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || "";
+  } catch (error) {
+    console.debug("Unable to detect browser timezone", error);
+    return "";
+  }
+};
+
+const preventDefault = (event: Event) => {
+  event.stopPropagation();
+  event.preventDefault();
+};
+
+let displayElement: HTMLElement | null = null;
+let disposed = false;
 
-const resolveConnectConfig = () => {
+const handleLunaOpen = () => {
+  nextTick(() => {
+    drawShow.value = !drawShow.value;
+  });
+};
+
+const handleLunaInputActive = () => {
+  nextTick(() => sendInputActive());
+};
+
+const resolveConnectConfig = async () => {
   const ctx = unref(sessionContext);
   if (ctx?.tokenId) {
     return {
-      // ponytail: lion 走 Guacamole connect 参数 TOKEN_ID，不用 koko 的 ?token= WS 查询串
+      // Lion 同时保留 TOKEN_ID 协议参数和 Koko 票据绑定所需的 token 参数。
       ws: withLionWsUrl("/ws/connect/", ctx.endpointUrl),
-      token: ctx.tokenId
+      token: ctx.tokenId,
+      ticket: ctx.ticket || (await createLionConnectTicket(ctx.endpointUrl, ctx.tokenId))
     };
   }
 
   const params = getCurrentConnectParams();
+  const token = params.data.token || params.data.TOKEN_ID || "";
   return {
-    ws: params.ws || "",
-    token: params.data.token || ""
+    ws: withLionWsUrl("/ws/connect/", endpointUrl.value),
+    token,
+    ticket: await createLionConnectTicket(endpointUrl.value, token)
   };
 };
 
 onMounted(async () => {
   loading.value = true;
   await nextTick();
-
-  lunaCommunicator.onLuna(LUNA_MESSAGE_TYPE.OPEN, () => {
-    nextTick(() => {
-      drawShow.value = !drawShow.value;
-    });
-  });
-  lunaCommunicator.onLuna(LUNA_MESSAGE_TYPE.INPUT_ACTIVE, () => {
-    nextTick(() => sendInputActive());
-  });
-
-  const { ws, token } = resolveConnectConfig();
+  if (disposed) return;
+
+  lunaCommunicator.onLuna(LUNA_MESSAGE_TYPE.OPEN, handleLunaOpen);
+  lunaCommunicator.onLuna(LUNA_MESSAGE_TYPE.INPUT_ACTIVE, handleLunaInputActive);
+
+  let connectConfig: Awaited<ReturnType<typeof resolveConnectConfig>>;
+  try {
+    connectConfig = await resolveConnectConfig();
+  } catch (error) {
+    if (disposed) return;
+    loading.value = false;
+    addErrorToast({ title: error instanceof Error ? error.message : String(error) });
+    return;
+  }
+  if (disposed) return;
+  const { ws, token, ticket } = connectConfig;
+  activeToken.value = token;
+  activeTicket.value = ticket;
+  ticketCreatedAt = ticket ? Date.now() : 0;
   const { width, height } = resolveContainerSize();
   connectToGuacamole(
     ws,
     {
-      TOKEN_ID: encodeURIComponent(token),
-      GUAC_KEYBOARD: keyboardLayout.value
+      TOKEN_ID: token,
+      token,
+      ...(ticket ? { ticket } : {}),
+      GUAC_KEYBOARD: keyboardLayout.value,
+      GUAC_TIMEZONE: getBrowserTimezone()
     },
     width,
     height,
     true
   );
 
-  const displayEl = document.getElementById("display");
+  const displayEl = displayRef.value;
   if (!displayEl) {
-    console.error("Display element not found");
+    loading.value = false;
+    disconnectGuaclient();
     return;
   }
+  displayElement = displayEl;
   displayEl.appendChild(guaDisplay.value.getElement());
 
   if (containerRef.value) {
@@ -243,33 +328,27 @@ onMounted(async () => {
     debouncedResize();
   }
 
-  displayEl.addEventListener(
-    "dragenter",
-    (e) => {
-      e.stopPropagation();
-      e.preventDefault();
-    },
-    false
-  );
-  displayEl.addEventListener(
-    "dragover",
-    (e) => {
-      e.stopPropagation();
-      e.preventDefault();
-    },
-    false
-  );
+  displayEl.addEventListener("dragenter", preventDefault, false);
+  displayEl.addEventListener("dragover", preventDefault, false);
   displayEl.addEventListener("drop", fileDrop, false);
+  displayEl.addEventListener("contextmenu", preventDefault, false);
 
   registerMouseAndKeyboardHanlder();
   window.addEventListener("focus", debouncedSendClipboardToRemote);
 });
 
 onUnmounted(() => {
+  disposed = true;
   resizeObserver?.disconnect();
   resizeObserver = null;
+  displayElement?.removeEventListener("dragenter", preventDefault, false);
+  displayElement?.removeEventListener("dragover", preventDefault, false);
+  displayElement?.removeEventListener("drop", fileDrop, false);
+  displayElement?.removeEventListener("contextmenu", preventDefault, false);
+  displayElement = null;
   disconnectGuaclient();
-  lunaCommunicator.offLuna(LUNA_MESSAGE_TYPE.OPEN);
+  lunaCommunicator.offLuna(LUNA_MESSAGE_TYPE.OPEN, handleLunaOpen);
+  lunaCommunicator.offLuna(LUNA_MESSAGE_TYPE.INPUT_ACTIVE, handleLunaInputActive);
   lunaCommunicator.sendLuna(LUNA_MESSAGE_TYPE.CLOSE, "");
   window.removeEventListener("focus", debouncedSendClipboardToRemote);
 });
@@ -279,26 +358,23 @@ const ClipBoardTextChange = (text: string) => {
   sendTextToRemote(text);
 };
 
-document.addEventListener(
-  "contextmenu",
-  (e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-  },
-  false
-);
-
 const handleScreenKeyboard = (name: string, keysym: any) => {
   if (name === "keydown") sendKeyEvent(1, keysym);
   else if (name === "keyup") sendKeyEvent(0, keysym);
 };
 
-const handleDownloadFile = (file: GuacamoleFile) => {
+const handleDownloadFile = async (file: { name: string; streamName?: GuacamoleFile["streamName"] }) => {
   if (!file?.streamName) return;
   if (action_permission.value && !action_permission.value.enable_download) {
     toast.add({ title: t("FileDownloadDenied"), color: "warning" });
     return;
   }
+  try {
+    await refreshConnectTicket();
+  } catch (error) {
+    addErrorToast({ title: error instanceof Error ? error.message : String(error) });
+    return;
+  }
   currentGuacFsObject.value.requestInputStream(file.streamName, (stream: any, mimetype: any) => {
     clientFileReceived(stream, mimetype, file.name);
   });
@@ -354,7 +430,7 @@ const drawerTabs = computed(() => {
     </div>
 
     <div
-      id="display"
+      ref="displayRef"
       class="relative flex h-full w-full min-h-0 justify-center"
       :class="[shouldEnableScroll ? 'overflow-auto' : 'overflow-hidden']"
     />
@@ -386,7 +462,11 @@ const drawerTabs = computed(() => {
         <template v-if="currentTab === 'general'">
           <ClipBoardText
             :disabled="!hasClipboardPermission"
+            :copy-disabled="!action_permission.enable_copy"
+            :paste-disabled="!action_permission.enable_paste"
+            :paste-policy-disabled="action_permission.clipboard_policy?.paste?.enabled === false"
             :remote-text="remoteClipboardText"
+            :text-limit="clipboardPasteTextLimit"
             @update:text="ClipBoardTextChange"
           />
           <KeyboardOption v-if="!isRemoteApp" v-model:opened="showOsk" v-model:keyboard="keyboardLayout" />
@@ -406,6 +486,8 @@ const drawerTabs = computed(() => {
           :name="driverName"
           :folder="currentFolder"
           :display-uploading-files="displayUploadingFiles"
+          :download-disabled="action_permission?.enable_download === false"
+          :upload-disabled="action_permission?.enable_upload === false"
           @open-folder="handleFolderOpen"
           @download-file="handleDownloadFile"
           @upload-file="handleUploadFile"
@@ -418,6 +500,8 @@ const drawerTabs = computed(() => {
           :users="onlineUsers"
           :disable-create="!enableShare"
           :endpoint-url="endpointUrl"
+          :token-id="activeToken"
+          :ticket="activeTicket"
         />
       </div>
     </template>
diff --git a/ui/lion/views/MonitorView.vue b/ui/lion/views/MonitorView.vue
index 7041a4dd8..fa5cf8c0f 100644
--- a/ui/lion/views/MonitorView.vue
+++ b/ui/lion/views/MonitorView.vue
@@ -1,21 +1,24 @@
 <script lang="ts" setup>
 import { useWindowSize } from "@vueuse/core";
-import { onMounted, watch } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import { useGuacamoleClient } from "@/lion/hooks/useGuacamoleClient";
+import { createLionConnectTicket } from "@/lion/hooks/useLionConnectTicket";
+import { useLionEndpoint } from "@/lion/hooks/useLionEndpoint";
 import { withLionWsUrl } from "@/lion/utils/base";
 
 const route = useRoute();
 const { t } = useI18n();
 const { width, height } = useWindowSize();
-const sessionId = route.query.session as string;
-const wsUrl = withLionWsUrl("/ws/monitor/");
-const params = {
-  type: "monitor",
-  SESSION_ID: sessionId
-};
-const { connectToGuacamole, guaDisplay, loading, resizeGuaScale } = useGuacamoleClient(t);
+const displayRef = ref<HTMLElement | null>(null);
+const endpointUrl = useLionEndpoint();
+const sessionId = String(route.query.session || "");
+const wsUrl = computed(() => withLionWsUrl("/ws/monitor/", endpointUrl.value));
+const connectError = ref("");
+let disposed = false;
+const { connectToGuacamole, connectStatus, disconnectGuaclient, guaDisplay, loading, resizeGuaScale } =
+  useGuacamoleClient(t, endpointUrl);
 
 watch(
   [width, height],
@@ -27,22 +30,44 @@ watch(
   { immediate: true }
 );
 
-onMounted(() => {
-  connectToGuacamole(wsUrl, params, window.innerWidth, window.innerHeight);
-  const displayEl = document.getElementById("display");
-  if (displayEl) {
-    displayEl.appendChild(guaDisplay.value.getElement());
+onMounted(async () => {
+  try {
+    const ticket = await createLionConnectTicket(endpointUrl.value);
+    if (disposed) return;
+    connectToGuacamole(
+      wsUrl.value,
+      {
+        type: "monitor",
+        SESSION_ID: sessionId,
+        ...(ticket ? { ticket } : {})
+      },
+      window.innerWidth,
+      window.innerHeight
+    );
+    const displayEl = displayRef.value;
+    if (displayEl) displayEl.appendChild(guaDisplay.value.getElement());
+  } catch (error) {
+    if (disposed) return;
+    loading.value = false;
+    connectError.value = error instanceof Error ? error.message : String(error);
   }
 });
+
+onUnmounted(() => {
+  disposed = true;
+  disconnectGuaclient();
+});
 </script>
 
 <template>
-  <div class="w-full h-full justify-center flex flex-col">
-    <div v-if="loading" class="flex justify-center items-center w-screen h-screen">
-      <n-spin :show="loading" size="large" :description="`${t('Connecting')}`" />
+  <div class="relative flex h-full w-full flex-col justify-center">
+    <div v-if="loading" class="absolute inset-0 z-10 flex items-center justify-center bg-default/80">
+      <div class="flex flex-col items-center gap-2 text-sm text-muted">
+        <UIcon name="i-lucide-loader-circle" class="size-6 animate-spin" />
+        <span>{{ t("Connecting") }}: {{ connectStatus }}</span>
+      </div>
     </div>
-    <div v-show="!loading" id="display" class="w-screen h-screen flex justify-center relative" />
+    <div v-show="!loading" ref="displayRef" class="relative flex h-full w-full justify-center" />
+    <p v-if="connectError" class="text-center text-error">{{ connectError }}</p>
   </div>
 </template>
-
-<style scoped></style>
diff --git a/ui/lion/views/ShareView.vue b/ui/lion/views/ShareView.vue
index 13e3868f7..08817aace 100644
--- a/ui/lion/views/ShareView.vue
+++ b/ui/lion/views/ShareView.vue
@@ -1,33 +1,49 @@
 <script lang="ts" setup>
 import { useDebounceFn, useWindowSize } from "@vueuse/core";
-import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import { getShareSession } from "@/lion/api/index";
-import Osk from "@/lion/components/Osk.vue";
 import SessionShare from "@/lion/components/SessionShare/index.vue";
 import { useGuacamoleClient } from "@/lion/hooks/useGuacamoleClient";
+import { createLionConnectTicket } from "@/lion/hooks/useLionConnectTicket";
+import { useLionEndpoint } from "@/lion/hooks/useLionEndpoint";
+import { LUNA_MESSAGE_TYPE } from "@/lion/types/postmessage.type";
 import { withLionWsUrl } from "@/lion/utils/base";
+import { lunaCommunicator } from "@/lion/utils/lunaBus";
 
 const { width, height } = useWindowSize();
 const { addErrorToast } = useErrorToast();
 const { t } = useI18n();
 const route = useRoute();
-const wsUrl = withLionWsUrl("/ws/share/");
+const endpointUrl = useLionEndpoint();
+const wsUrl = computed(() => withLionWsUrl("/ws/share/", endpointUrl.value));
+const displayRef = ref<HTMLElement | null>(null);
 const verifyValue = ref<string>("");
 const showModal = ref<boolean>(true);
 const shareCode = ref<string>("");
 const readonly = ref<boolean>(false);
 const errMessage = ref<string>("");
-const showOsk = ref<boolean>(false);
-const keyboardLayout = ref<string>("default");
 const drawShow = ref<boolean>(false);
 const sessionObject = ref<Record<string, any>>({});
-const connectStatus = ref<string>("Connecting...");
+const authTicket = ref("");
+const verificationLoading = ref(false);
 const shareId = (route.params as Record<string, string>).id || "";
-
-const { connectToGuacamole, guaDisplay, loading, onlineUsersMap, registerMouseAndKeyboardHanlder, resizeGuaScale } =
-  useGuacamoleClient(t);
+let connectGeneration = 0;
+let disposed = false;
+
+const {
+  connectToGuacamole,
+  connectStatus,
+  debouncedSendClipboardToRemote,
+  disconnectGuaclient,
+  guaDisplay,
+  loading,
+  onlineUsersMap,
+  registerMouseAndKeyboardHanlder,
+  resizeGuaScale,
+  sendInputActive
+} = useGuacamoleClient(t, endpointUrl);
 
 const debouncedResize = useDebounceFn(() => {
   resizeGuaScale(width.value, height.value);
@@ -37,11 +53,18 @@ watch([width, height], () => debouncedResize(), { immediate: true });
 
 const onlineUsers = computed(() => Object.values(onlineUsersMap.value).filter(Boolean));
 
+const handleLunaOpen = () => {
+  drawShow.value = !drawShow.value;
+};
+
 const onFinish = () => {
-  shareCode.value = verifyValue.value;
+  if (verificationLoading.value) return;
+  shareCode.value = verifyValue.value.trim();
+  if (!shareCode.value) return;
   nextTick(() => {
+    if (disposed) return;
     showModal.value = false;
-    connectShareSession(shareCode.value);
+    void connectShareSession(shareCode.value);
   });
 };
 
@@ -49,48 +72,75 @@ const handleKeyUp = (event: KeyboardEvent) => {
   if (event.key === "Enter") onFinish();
 };
 
-function connectShareSession(code: string) {
-  getShareSession(shareId, { code })
-    .then((response: any) => response.json())
-    .then((res) => {
-      if (res.message && !res.success) {
-        addErrorToast({ title: res.message || t("ShareSessionError") });
-        loading.value = false;
-        errMessage.value = res.message || t("ShareSessionError");
-        return;
-      }
-
-      readonly.value = res.action_permission?.value === "readonly";
-      const shareParams = {
-        type: "share",
-        SESSION_ID: res.session.id,
-        SHARE_ID: shareId,
-        RECORD_ID: res.id,
-        Writable: readonly.value ? "false" : "true"
-      };
-
-      connectToGuacamole(wsUrl, shareParams, window.innerWidth, window.innerHeight);
-      const displayEl = document.getElementById("display");
-      if (displayEl) displayEl.appendChild(guaDisplay.value.getElement());
-      if (!readonly.value) registerMouseAndKeyboardHanlder();
-    })
-    .catch((error) => {
-      addErrorToast({ title: error.message || t("ShareSessionError") });
-    });
+async function connectShareSession(code: string) {
+  const generation = ++connectGeneration;
+  verificationLoading.value = true;
+  errMessage.value = "";
+  window.removeEventListener("focus", debouncedSendClipboardToRemote);
+  try {
+    authTicket.value = await createLionConnectTicket(endpointUrl.value);
+    if (disposed || generation !== connectGeneration) return;
+    const res = await getShareSession(shareId, { code }, endpointUrl.value, { ticket: authTicket.value });
+    if (disposed || generation !== connectGeneration) return;
+    if (res.message && !res.success) {
+      addErrorToast({ title: res.message || t("ShareSessionError") });
+      loading.value = false;
+      errMessage.value = res.message || t("ShareSessionError");
+      return;
+    }
+
+    readonly.value = res.action_permission?.value === "readonly";
+    sessionObject.value = res.session || {};
+    if (!res.id || !res.session?.id) {
+      throw new Error(t("ShareSessionError"));
+    }
+    const shareParams = {
+      type: "share",
+      SESSION_ID: res.session.id,
+      SHARE_ID: shareId,
+      RECORD_ID: res.id,
+      Writable: readonly.value ? "false" : "true",
+      ...(authTicket.value ? { ticket: authTicket.value } : {})
+    };
+
+    connectToGuacamole(wsUrl.value, shareParams, window.innerWidth, window.innerHeight);
+    const displayEl = displayRef.value;
+    if (displayEl) displayEl.appendChild(guaDisplay.value.getElement());
+    if (!readonly.value) {
+      registerMouseAndKeyboardHanlder();
+      window.addEventListener("focus", debouncedSendClipboardToRemote);
+    }
+  } catch (error) {
+    if (disposed || generation !== connectGeneration) return;
+    loading.value = false;
+    const message = error instanceof Error ? error.message : t("ShareSessionError");
+    errMessage.value = message || t("ShareSessionError");
+    addErrorToast({ title: message || t("ShareSessionError") });
+  } finally {
+    if (generation === connectGeneration) verificationLoading.value = false;
+  }
 }
 
-const handleScreenKeyboard = (layout: string) => {
-  keyboardLayout.value = layout;
-  showOsk.value = true;
-};
-
 onMounted(() => {
+  lunaCommunicator.onLuna(LUNA_MESSAGE_TYPE.OPEN, handleLunaOpen);
+  lunaCommunicator.onLuna(LUNA_MESSAGE_TYPE.INPUT_ACTIVE, sendInputActive);
   if (route.query.code) {
     shareCode.value = route.query.code as string;
     showModal.value = false;
-    nextTick(() => connectShareSession(shareCode.value));
+    nextTick(() => {
+      if (!disposed) void connectShareSession(shareCode.value);
+    });
   }
 });
+
+onUnmounted(() => {
+  disposed = true;
+  connectGeneration += 1;
+  window.removeEventListener("focus", debouncedSendClipboardToRemote);
+  lunaCommunicator.offLuna(LUNA_MESSAGE_TYPE.OPEN, handleLunaOpen);
+  lunaCommunicator.offLuna(LUNA_MESSAGE_TYPE.INPUT_ACTIVE, sendInputActive);
+  disconnectGuaclient();
+});
 </script>
 
 <template>
@@ -105,10 +155,11 @@ onMounted(() => {
           size="lg"
           maxlength="4"
           :placeholder="t('InputVerifyCode')"
+          :disabled="verificationLoading"
           @keyup="handleKeyUp"
         />
         <template #footer>
-          <UButton block @click="onFinish">
+          <UButton block :loading="verificationLoading" @click="onFinish">
             {{ t("Confirm") }}
           </UButton>
         </template>
@@ -124,9 +175,13 @@ onMounted(() => {
       </div>
     </div>
 
-    <div v-show="!loading && !errMessage" id="display" class="relative flex h-screen w-screen justify-center" />
+    <div
+      v-show="!loading && !errMessage"
+      ref="displayRef"
+      class="relative flex h-full w-full justify-center"
+      @contextmenu.prevent
+    />
 
-    <Osk v-if="showOsk" :keyboard="keyboardLayout" @keyboard-change="handleScreenKeyboard" />
     <p v-if="errMessage" class="text-center text-error">
       {{ errMessage }}
     </p>
@@ -134,7 +189,14 @@ onMounted(() => {
 
   <USlideover v-model:open="drawShow" :ui="{ content: 'w-full max-w-[502px]' }">
     <template #body>
-      <SessionShare v-if="sessionObject" :session="sessionObject.id" :users="onlineUsers" :disable-create="true" />
+      <SessionShare
+        v-if="sessionObject.id"
+        :session="sessionObject.id"
+        :users="onlineUsers"
+        :disable-create="true"
+        :endpoint-url="endpointUrl"
+        :ticket="authTicket"
+      />
     </template>
   </USlideover>
 </template>
diff --git a/ui/lion/workspaces/RemoteSessionSurface.vue b/ui/lion/workspaces/RemoteSessionSurface.vue
index db5712357..7e5a592dd 100644
--- a/ui/lion/workspaces/RemoteSessionSurface.vue
+++ b/ui/lion/workspaces/RemoteSessionSurface.vue
@@ -4,6 +4,7 @@ import type { WorkspaceSessionTab } from "~/composables/useWorkspaceTabs";
 import { KokoBaseWorkspaceShell as BaseWorkspaceShell } from "@jumpserver/koko";
 import ConnectView from "@/lion/views/ConnectView.vue";
 import { useBaseWorkspaceSession } from "@/lion/workspaces/useBaseWorkspaceSession";
+import LionProvider from "~/components/lion/LionProvider.vue";
 
 const props = defineProps<{ tab: WorkspaceSessionTab }>();
 const tab = toRef(props, "tab");
@@ -13,14 +14,16 @@ watch(tokenId, () => void prepareSession(), { immediate: true });
 </script>
 
 <template>
-  <BaseWorkspaceShell
-    :ready="Boolean(context) && !loading && !error"
-    :loading="loading"
-    :error="error"
-    loading-text="正在准备远程桌面连接..."
-  >
-    <div class="relative h-full w-full min-h-0">
-      <ConnectView />
-    </div>
-  </BaseWorkspaceShell>
+  <LionProvider>
+    <BaseWorkspaceShell
+      :ready="Boolean(context) && !loading && !error"
+      :loading="loading"
+      :error="error"
+      loading-text="正在准备远程桌面连接..."
+    >
+      <div class="relative h-full w-full min-h-0">
+        <ConnectView />
+      </div>
+    </BaseWorkspaceShell>
+  </LionProvider>
 </template>
diff --git a/ui/lion/workspaces/useBaseWorkspaceSession.ts b/ui/lion/workspaces/useBaseWorkspaceSession.ts
index 56260003b..7919da3de 100644
--- a/ui/lion/workspaces/useBaseWorkspaceSession.ts
+++ b/ui/lion/workspaces/useBaseWorkspaceSession.ts
@@ -3,6 +3,8 @@ import type { ConnectorSessionContext } from "@jumpserver/connectors-core";
 import type { Ref } from "vue";
 import type { WorkspaceSessionTab } from "~/composables/useWorkspaceTabs";
 import { connectorSessionKey } from "@jumpserver/connectors-core";
+import { onScopeDispose } from "vue";
+import { createLionConnectTicket } from "@/lion/hooks/useLionConnectTicket";
 
 export function useBaseWorkspaceSession(tab: Ref<WorkspaceSessionTab>) {
   const colorMode = useColorMode();
@@ -11,6 +13,7 @@ export function useBaseWorkspaceSession(tab: Ref<WorkspaceSessionTab>) {
   const loading = ref(false);
   const error = ref("");
   const context = ref<ConnectorSessionContext | null>(null);
+  let prepareGeneration = 0;
 
   provide(connectorSessionKey, context);
 
@@ -41,7 +44,17 @@ export function useBaseWorkspaceSession(tab: Ref<WorkspaceSessionTab>) {
   }
 
   async function prepareSession() {
-    if (!tokenId.value) {
+    const generation = ++prepareGeneration;
+    const preparedTokenId = tokenId.value;
+    const preparedTab = {
+      id: tab.value.id,
+      assetId: tab.value.assetId,
+      protocol: tab.value.protocol,
+      account: tab.value.account
+    };
+    context.value = null;
+
+    if (!preparedTokenId) {
       error.value = "Missing connection token";
       loading.value = false;
       return null;
@@ -51,32 +64,40 @@ export function useBaseWorkspaceSession(tab: Ref<WorkspaceSessionTab>) {
     error.value = "";
 
     try {
+      const endpointUrl = resolveEndpointUrl();
+      const ticket = await createLionConnectTicket(endpointUrl, preparedTokenId);
+      if (generation !== prepareGeneration) return null;
       context.value = {
         component: "lion",
-        tokenId: tokenId.value,
-        endpointUrl: resolveEndpointUrl(),
-        tabId: tab.value.id,
+        tokenId: preparedTokenId,
+        ticket,
+        endpointUrl,
+        tabId: preparedTab.id,
         colorMode: colorMode.value,
         themeType: themeType.value
       };
 
-      markSessionConnected(tab.value.id);
+      markSessionConnected(preparedTab.id);
       return context.value;
     } catch (cause) {
+      if (generation !== prepareGeneration) return null;
       error.value = String(cause);
       markSessionFailed({
-        tabId: tab.value.id,
-        assetId: tab.value.assetId,
-        protocol: tab.value.protocol,
-        account: tab.value.account
+        tabId: preparedTab.id,
+        assetId: preparedTab.assetId,
+        protocol: preparedTab.protocol,
+        account: preparedTab.account
       });
       return null;
     } finally {
-      loading.value = false;
+      if (generation === prepareGeneration) loading.value = false;
     }
   }
 
   watch([themeType, () => colorMode.value], syncContextTheme);
+  onScopeDispose(() => {
+    prepareGeneration += 1;
+  });
 
   return {
     context,
diff --git a/ui/utils/clipboard.ts b/ui/utils/clipboard.ts
index 42bde12f3..746163021 100644
--- a/ui/utils/clipboard.ts
+++ b/ui/utils/clipboard.ts
@@ -1,8 +1,21 @@
-import { writeText as writeTauriText } from "@tauri-apps/plugin-clipboard-manager";
-import { writeText as writeWebText } from "clipboard-polyfill";
+import { Image as TauriImage } from "@tauri-apps/api/image";
+import {
+  readText as readTauriText,
+  writeImage as writeTauriImage,
+  writeText as writeTauriText
+} from "@tauri-apps/plugin-clipboard-manager";
+import { readText as readWebText, writeText as writeWebText } from "clipboard-polyfill";
 
 import { isTauriRuntime } from "~/utils/runtime";
 
+export async function readClipboardText() {
+  if (isTauriRuntime()) {
+    return await readTauriText();
+  }
+
+  return await readWebText();
+}
+
 export async function writeClipboardText(text: string) {
   if (isTauriRuntime()) {
     await writeTauriText(text);
@@ -11,3 +24,37 @@ export async function writeClipboardText(text: string) {
 
   await writeWebText(text);
 }
+
+export async function writeClipboardBlob(blob: Blob) {
+  if (isTauriRuntime()) {
+    if (!blob.type.startsWith("image/")) {
+      throw new Error(`Tauri clipboard does not support ${blob.type || "this data type"}`);
+    }
+
+    const bitmap = await createImageBitmap(blob);
+    const canvas = document.createElement("canvas");
+    canvas.width = bitmap.width;
+    canvas.height = bitmap.height;
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+    if (!context) {
+      bitmap.close();
+      throw new Error("Unable to create an image clipboard context");
+    }
+
+    context.drawImage(bitmap, 0, 0);
+    const rgba = context.getImageData(0, 0, bitmap.width, bitmap.height).data;
+    bitmap.close();
+    const image = await TauriImage.new(new Uint8Array(rgba), canvas.width, canvas.height);
+    try {
+      await writeTauriImage(image);
+    } finally {
+      await image.close();
+    }
+    return;
+  }
+
+  if (!navigator.clipboard?.write || typeof ClipboardItem === "undefined") {
+    throw new Error("Binary clipboard writes are unavailable");
+  }
+  await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+}