From 2846968cf78d9e32bfeeefe1e466cca652d262d8 Mon Sep 17 00:00:00 2001
From: liangxu <liangxu0920@qq.com>
Date: Sat, 25 Apr 2026 22:41:40 +0800
Subject: [PATCH] feat(kol): add selection-based AI optimize for prompt editor

Trigger an AI optimize panel from a text selection in the KOL prompt
editor, accept a user instruction, and stream a preview before replacing
the selected fragment. Extend the shared editor AI assist panel with
boundary-aware placement so it can be hosted inside scoped surfaces, and
update the backend optimize prompt to honor the user instruction.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/ArticleEditorCanvas.vue    |  19 +-
 .../editor-common/EditorAiAssistPanel.vue     | 351 ++++++--
 .../src/components/kol/KolPromptEditArea.vue  | 836 +++++++++++++++++-
 .../src/components/kol/KolPromptEditor.vue    | 302 ++++++-
 apps/admin-web/src/i18n/messages/en-US.ts     |   5 +-
 apps/admin-web/src/i18n/messages/zh-CN.ts     |   5 +-
 apps/admin-web/src/views/KolManageView.vue    |   1 -
 .../internal/tenant/app/kol_assist_runtime.go |   7 +-
 .../tenant/app/kol_assist_runtime_test.go     |  14 +
 9 files changed, 1428 insertions(+), 112 deletions(-)

diff --git a/apps/admin-web/src/components/ArticleEditorCanvas.vue b/apps/admin-web/src/components/ArticleEditorCanvas.vue
index 426dad4..a1cebfd 100644
--- a/apps/admin-web/src/components/ArticleEditorCanvas.vue
+++ b/apps/admin-web/src/components/ArticleEditorCanvas.vue
@@ -145,6 +145,7 @@ type ImageContextMenuAction =
 type ImagePickerAction = "insert" | "replace";
 
 type AiOptimizeStatus = "idle" | "generating" | "completed" | "error";
+type EditorAiAssistPlacement = "bottom" | "top";
 
 type TableContextMenuState = {
   open: boolean;
@@ -175,6 +176,7 @@ type AiOptimizePanelState = {
   x: number;
   y: number;
   width: number;
+  placement: EditorAiAssistPlacement;
   from: number;
   to: number;
   selectedText: string;
@@ -255,6 +257,7 @@ function createDefaultAiOptimizePanelState(): AiOptimizePanelState {
     x: 0,
     y: 0,
     width: 0,
+    placement: "bottom",
     from: 0,
     to: 0,
     selectedText: "",
@@ -941,20 +944,29 @@ function resolveTextSelectionSnapshot(ctx: Ctx): TextSelectionSnapshot | null {
   };
 }
 
-function resolveAiOptimizePanelFrame(anchorRect: DOMRect): { x: number; y: number; width: number } {
+function resolveAiOptimizePanelFrame(anchorRect: DOMRect): { x: number; y: number; width: number; placement: EditorAiAssistPlacement } {
   const viewportPadding = 16;
   const panelPadding = 24;
   const maxWidth = Math.max(240, window.innerWidth - viewportPadding * 2);
   const preferredWidth = 1120;
 
   const surfaceRect = surfaceRef.value?.getBoundingClientRect();
+  const boundary = surfaceRect ?? new DOMRect(0, 0, window.innerWidth, window.innerHeight);
   const widthFromSurface = surfaceRect ? Math.max(240, surfaceRect.width - panelPadding * 2) : preferredWidth;
   const width = Math.min(maxWidth, preferredWidth, widthFromSurface);
+  const availableBelow = boundary.bottom - anchorRect.bottom - AI_OPTIMIZE_PANEL_GAP - viewportPadding;
+  const availableAbove = anchorRect.top - boundary.top - AI_OPTIMIZE_PANEL_GAP - viewportPadding;
+  const placement: EditorAiAssistPlacement =
+    availableBelow >= 320 || availableBelow >= availableAbove ? "bottom" : "top";
 
   return {
     x: anchorRect.left + anchorRect.width / 2,
-    y: Math.max(viewportPadding, anchorRect.bottom + AI_OPTIMIZE_PANEL_GAP),
+    y:
+      placement === "top"
+        ? Math.min(boundary.bottom - viewportPadding, anchorRect.top - AI_OPTIMIZE_PANEL_GAP)
+        : Math.max(boundary.top + viewportPadding, anchorRect.bottom + AI_OPTIMIZE_PANEL_GAP),
     width,
+    placement,
   };
 }
 
@@ -981,6 +993,7 @@ function openAiOptimizePanel(ctx: Ctx): void {
     x: frame.x,
     y: frame.y,
     width: frame.width,
+    placement: frame.placement,
     from: snapshot.from,
     to: snapshot.to,
     selectedText: snapshot.text,
@@ -1975,6 +1988,8 @@ function runTableContextAction(action: TableContextMenuAction): void {
       :x="aiOptimizePanel.x"
       :y="aiOptimizePanel.y"
       :width="aiOptimizePanel.width"
+      :placement="aiOptimizePanel.placement"
+      :boundary-element="surfaceRef"
       :status="aiOptimizeStatus"
       :streaming="aiOptimizeStreaming"
       :has-preview="aiOptimizeHasPreview"
diff --git a/apps/admin-web/src/components/editor-common/EditorAiAssistPanel.vue b/apps/admin-web/src/components/editor-common/EditorAiAssistPanel.vue
index af4239a..95c0cb4 100644
--- a/apps/admin-web/src/components/editor-common/EditorAiAssistPanel.vue
+++ b/apps/admin-web/src/components/editor-common/EditorAiAssistPanel.vue
@@ -3,11 +3,21 @@ import { CheckOutlined, CloseOutlined, DeleteOutlined, LoadingOutlined, RedoOutl
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type CSSProperties } from "vue";
 
 type EditorAiAssistStatus = "idle" | "generating" | "completed" | "error";
+type EditorAiAssistBoundary = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+};
+type EditorAiAssistPlacement = "bottom" | "top";
 
 const props = defineProps<{
   x: number;
   y: number;
   width: number;
+  boundary?: EditorAiAssistBoundary | null;
+  boundaryElement?: HTMLElement | null;
+  placement?: EditorAiAssistPlacement;
   prompt: string;
   status: EditorAiAssistStatus;
   streaming: boolean;
@@ -34,14 +44,24 @@ const emit = defineEmits<{
 }>();
 
 const IDLE_MAX_WIDTH = 760;
+const PANEL_OFFSET = 16;
+const MIN_PANEL_WIDTH = 240;
+const RESULT_CHROME_HEIGHT = 176;
 
 const panelRef = ref<HTMLElement | null>(null);
+const resultContentRef = ref<HTMLElement | null>(null);
 const promptInputRef = ref<HTMLInputElement | null>(null);
 const frame = ref({
   x: props.x,
   y: props.y,
   width: props.width,
+  maxHeight: 480,
+  resultMaxHeight: 300,
 });
+let resizeObserver: ResizeObserver | null = null;
+let mutationObserver: MutationObserver | null = null;
+let syncFrameId = 0;
+let scrollFrameId = 0;
 
 const promptValue = computed({
   get: () => props.prompt,
@@ -58,12 +78,86 @@ const panelStyle = computed<CSSProperties>(() => ({
   left: `${frame.value.x}px`,
   top: `${frame.value.y}px`,
   width: `${frame.value.width}px`,
-}));
+  maxHeight: `${frame.value.maxHeight}px`,
+  "--editor-ai-assist-result-max-height": `${frame.value.resultMaxHeight}px`,
+} as CSSProperties));
 
 function clamp(value: number, min: number, max: number): number {
   return Math.min(Math.max(value, min), max);
 }
 
+function normalizeBoundary(rawBoundary: EditorAiAssistBoundary | null | undefined): EditorAiAssistBoundary {
+  const viewportBoundary = {
+    left: 0,
+    top: 0,
+    right: window.innerWidth,
+    bottom: window.innerHeight,
+  };
+  if (!rawBoundary) {
+    return viewportBoundary;
+  }
+
+  const left = clamp(rawBoundary.left, 0, window.innerWidth);
+  const top = clamp(rawBoundary.top, 0, window.innerHeight);
+  const right = clamp(rawBoundary.right, left, window.innerWidth);
+  const bottom = clamp(rawBoundary.bottom, top, window.innerHeight);
+
+  if (right - left < 1 || bottom - top < 1) {
+    return viewportBoundary;
+  }
+
+  return { left, top, right, bottom };
+}
+
+function resolveBoundary(): EditorAiAssistBoundary {
+  if (props.boundaryElement) {
+    const rect = props.boundaryElement.getBoundingClientRect();
+    return normalizeBoundary({
+      left: rect.left,
+      top: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+    });
+  }
+  return normalizeBoundary(props.boundary);
+}
+
+function updateFrame(nextFrame: typeof frame.value): void {
+  const current = frame.value;
+  const hasChanged =
+    Math.abs(current.x - nextFrame.x) > 0.5 ||
+    Math.abs(current.y - nextFrame.y) > 0.5 ||
+    Math.abs(current.width - nextFrame.width) > 0.5 ||
+    Math.abs(current.maxHeight - nextFrame.maxHeight) > 0.5 ||
+    Math.abs(current.resultMaxHeight - nextFrame.resultMaxHeight) > 0.5;
+
+  if (hasChanged) {
+    frame.value = nextFrame;
+  }
+}
+
+function scrollResultContentToLatest(): void {
+  if (!(props.streaming || props.status === "generating")) {
+    return;
+  }
+
+  if (scrollFrameId) {
+    cancelAnimationFrame(scrollFrameId);
+  }
+  scrollFrameId = requestAnimationFrame(() => {
+    scrollFrameId = 0;
+    const resultContent = resultContentRef.value;
+    if (resultContent) {
+      resultContent.scrollTop = resultContent.scrollHeight;
+    }
+  });
+}
+
+function handleResultContentChanged(): void {
+  schedulePanelFrameSync();
+  scrollResultContentToLatest();
+}
+
 function syncPanelFrame(): void {
   void nextTick(() => {
     const panel = panelRef.value;
@@ -71,17 +165,55 @@ function syncPanelFrame(): void {
       return;
     }
 
-    const offset = 16;
-    const maxWidth = Math.max(240, window.innerWidth - offset * 2);
+    const boundary = resolveBoundary();
+    const availableWidth = Math.max(0, boundary.right - boundary.left - PANEL_OFFSET * 2);
+    const maxWidth = Math.max(160, availableWidth);
+    const minWidth = Math.min(MIN_PANEL_WIDTH, maxWidth);
     const width =
       props.status === "idle"
-        ? Math.min(props.width, maxWidth, IDLE_MAX_WIDTH)
-        : Math.min(props.width, maxWidth);
-    frame.value = {
-      x: clamp(props.x - width / 2, offset, Math.max(offset, window.innerWidth - width - offset)),
-      y: clamp(props.y, offset, Math.max(offset, window.innerHeight - panel.offsetHeight - offset)),
+        ? clamp(Math.min(props.width, IDLE_MAX_WIDTH), minWidth, maxWidth)
+        : clamp(props.width, minWidth, maxWidth);
+    const placement = props.placement ?? "bottom";
+    const anchorY = clamp(props.y, boundary.top + PANEL_OFFSET, boundary.bottom - PANEL_OFFSET);
+    const availableHeight = Math.max(
+      120,
+      placement === "top"
+        ? anchorY - boundary.top - PANEL_OFFSET
+        : boundary.bottom - anchorY - PANEL_OFFSET,
+    );
+    const panelHeight = Math.min(panel.offsetHeight || availableHeight, availableHeight);
+    const resultMaxHeight = Math.max(
+      48,
+      availableHeight - RESULT_CHROME_HEIGHT,
+    );
+    const panelTop = placement === "top" ? anchorY - panelHeight : anchorY;
+
+    updateFrame({
+      x: clamp(
+        props.x - width / 2,
+        boundary.left + PANEL_OFFSET,
+        Math.max(boundary.left + PANEL_OFFSET, boundary.right - width - PANEL_OFFSET),
+      ),
+      y: clamp(
+        panelTop,
+        boundary.top + PANEL_OFFSET,
+        Math.max(boundary.top + PANEL_OFFSET, boundary.bottom - panelHeight - PANEL_OFFSET),
+      ),
       width,
-    };
+      maxHeight: availableHeight,
+      resultMaxHeight,
+    });
+    scrollResultContentToLatest();
+  });
+}
+
+function schedulePanelFrameSync(): void {
+  if (syncFrameId) {
+    cancelAnimationFrame(syncFrameId);
+  }
+  syncFrameId = requestAnimationFrame(() => {
+    syncFrameId = 0;
+    syncPanelFrame();
   });
 }
 
@@ -100,6 +232,23 @@ function handleWindowResize(): void {
   syncPanelFrame();
 }
 
+function refreshResultContentObserver(): void {
+  void nextTick(() => {
+    mutationObserver?.disconnect();
+    const resultContent = resultContentRef.value;
+    if (!resultContent) {
+      return;
+    }
+
+    mutationObserver?.observe(resultContent, {
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+    scrollResultContentToLatest();
+  });
+}
+
 watch(
   () => ({
     x: props.x,
@@ -108,9 +257,13 @@ watch(
     status: props.status,
     hasPreview: props.hasPreview,
     error: props.error,
+    boundary: props.boundary,
+    boundaryElement: props.boundaryElement,
+    placement: props.placement,
   }),
   () => {
     syncPanelFrame();
+    refreshResultContentObserver();
     focusPromptInput();
   },
   {
@@ -121,12 +274,32 @@ watch(
 
 onMounted(() => {
   window.addEventListener("resize", handleWindowResize);
+  mutationObserver = new MutationObserver(handleResultContentChanged);
+  if ("ResizeObserver" in window) {
+    resizeObserver = new ResizeObserver(schedulePanelFrameSync);
+    if (panelRef.value) {
+      resizeObserver.observe(panelRef.value);
+    }
+  }
+  refreshResultContentObserver();
   syncPanelFrame();
   focusPromptInput();
 });
 
 onBeforeUnmount(() => {
   window.removeEventListener("resize", handleWindowResize);
+  mutationObserver?.disconnect();
+  mutationObserver = null;
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+  if (syncFrameId) {
+    cancelAnimationFrame(syncFrameId);
+    syncFrameId = 0;
+  }
+  if (scrollFrameId) {
+    cancelAnimationFrame(scrollFrameId);
+    scrollFrameId = 0;
+  }
 });
 </script>
 
@@ -179,7 +352,7 @@ onBeforeUnmount(() => {
 
         <div v-else class="editor-ai-assist__result">
           <div class="editor-ai-assist__result-box">
-            <div class="editor-ai-assist__result-content">
+            <div ref="resultContentRef" class="editor-ai-assist__result-content">
               <slot v-if="hasPreview" name="preview"></slot>
               <div v-else-if="streaming" class="editor-ai-assist__placeholder">
                 <LoadingOutlined />
@@ -269,22 +442,38 @@ onBeforeUnmount(() => {
   position: fixed;
   z-index: 1300;
   max-width: min(1120px, calc(100vw - 32px));
+  /* Removed overflow: hidden to prevent shadow clipping */
 }
 
 .editor-ai-assist__shell {
   display: flex;
   flex-direction: column;
+  max-height: inherit;
+  min-height: 0;
 }
 
 .editor-ai-assist__bar {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 10px 16px;
-  border-radius: 999px;
-  background: #ffffff;
+  padding: 8px 8px 8px 16px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(17, 24, 39, 0.08);
   box-shadow:
-   0 8px 32px rgb(17 17 17 / 28%), 0 0 0 1px rgba(15, 23, 42, 0.05);
+    0 16px 48px -4px rgba(17, 24, 39, 0.12),    
+    0 6px 20px -4px rgba(17, 24, 39, 0.08);
+  transition: all 0.2s ease;
+}
+
+.editor-ai-assist__bar:focus-within {
+  border-color: rgba(37, 99, 235, 0.3);
+  box-shadow:
+    0 12px 32px -4px rgba(37, 99, 235, 0.12),
+    0 4px 16px -4px rgba(37, 99, 235, 0.06),
+    0 0 0 3px rgba(37, 99, 235, 0.1);
 }
 
 .editor-ai-assist__bar-icon {
@@ -295,8 +484,8 @@ onBeforeUnmount(() => {
 }
 
 .editor-ai-assist__bar-label {
-  color: #101828;
-  font-size: 15px;
+  color: #111827;
+  font-size: 14px;
   font-weight: 700;
   white-space: nowrap;
 }
@@ -307,44 +496,46 @@ onBeforeUnmount(() => {
   border: none;
   outline: none;
   background: transparent;
-  color: #344054;
+  color: #111827;
   font-size: 14px;
+  font-weight: 500;
 }
 
 .editor-ai-assist__bar-input::placeholder {
-  color: #98a2b3;
+  color: #9ca3af;
+  font-weight: 400;
 }
 
 .editor-ai-assist__bar-actions {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
 }
 
 .editor-ai-assist__divider {
   width: 1px;
   height: 16px;
   margin: 0 4px;
-  background: #eaecf0;
+  background: #e5e7eb;
 }
 
 .editor-ai-assist__icon-button {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: 30px;
+  height: 30px;
   border: none;
-  border-radius: 999px;
+  border-radius: 8px;
   background: transparent;
-  color: #667085;
+  color: #6b7280;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .editor-ai-assist__icon-button:hover {
-  background: #f2f4f7;
-  color: #344054;
+  background: #f3f4f6;
+  color: #111827;
 }
 
 .editor-ai-assist__send-button {
@@ -354,42 +545,62 @@ onBeforeUnmount(() => {
   width: 32px;
   height: 32px;
   border: none;
-  border-radius: 999px;
-  background: #245bdb;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
   color: #ffffff;
   cursor: pointer;
   transition: all 0.2s ease;
-  box-shadow: 0 2px 8px rgba(36, 91, 219, 0.28);
+  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
 }
 
 .editor-ai-assist__send-button:hover {
-  background: #1d4fc4;
+  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
+  transform: translateY(-1px);
+}
+
+.editor-ai-assist__send-button:active {
+  transform: translateY(0);
 }
 
 .editor-ai-assist__result {
   width: 100%;
+  max-height: inherit;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
   border-radius: 16px;
-  background: #ffffff;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(17, 24, 39, 0.08);
   box-shadow:
-    0 8px 32px rgb(17 17 17 / 28%), 0 0 0 1px rgba(15, 23, 42, 0.05);
+    0 16px 48px -4px rgba(17, 24, 39, 0.12),
+    0 6px 20px -4px rgba(17, 24, 39, 0.08);
 }
 
 .editor-ai-assist__result-box {
+  flex: 1 1 auto;
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
   margin: 12px;
   overflow: hidden;
-  border: 1px solid #eef2f6;
+  border: 1px solid rgba(17, 24, 39, 0.06);
   border-radius: 12px;
-  background: #f8fafc;
+  background: #f9fafb;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
 }
 
 .editor-ai-assist__result-content {
-  min-height: 80px;
-  max-height: 300px;
+  flex: 1 1 auto;
+  min-height: min(80px, var(--editor-ai-assist-result-max-height, 80px));
+  max-height: var(--editor-ai-assist-result-max-height, 300px);
   padding: 16px;
   overflow-y: auto;
-  color: #101828;
-  font-size: 15px;
+  color: #111827;
+  font-size: 14px;
   line-height: 1.6;
 }
 
@@ -397,7 +608,7 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   gap: 8px;
-  color: #667085;
+  color: #6b7280;
 }
 
 .editor-ai-assist__placeholder--error {
@@ -405,13 +616,14 @@ onBeforeUnmount(() => {
 }
 
 .editor-ai-assist__result-footer {
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 16px;
-  border-top: 1px solid rgba(226, 232, 240, 0.6);
+  border-top: 1px solid rgba(229, 231, 235, 0.8);
   background: rgba(255, 255, 255, 0.5);
-  color: #94a3b8;
+  color: #9ca3af;
   font-size: 12px;
 }
 
@@ -422,7 +634,7 @@ onBeforeUnmount(() => {
 }
 
 .editor-ai-assist__result-badges :deep(svg) {
-  color: #52c41a;
+  color: #10b981;
 }
 
 .editor-ai-assist__thumb {
@@ -435,6 +647,7 @@ onBeforeUnmount(() => {
 }
 
 .editor-ai-assist__toolbar {
+  flex: 0 0 auto;
   display: flex;
   flex-direction: column;
   padding: 0 16px 16px;
@@ -445,7 +658,7 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
-  color: #64748b;
+  color: #6b7280;
   font-size: 13px;
 }
 
@@ -459,10 +672,11 @@ onBeforeUnmount(() => {
   color: inherit;
   cursor: pointer;
   font-weight: 500;
+  transition: color 0.2s ease;
 }
 
 .editor-ai-assist__back-button:hover {
-  color: #334155;
+  color: #111827;
 }
 
 .editor-ai-assist__history {
@@ -487,9 +701,16 @@ onBeforeUnmount(() => {
   flex: 1;
   align-items: center;
   padding: 4px 4px 4px 16px;
-  border: 1px solid #e2e8f0;
-  border-radius: 20px;
-  background: #f8fafc;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
+  transition: all 0.2s ease;
+}
+
+.editor-ai-assist__continue:focus-within {
+  border-color: rgba(37, 99, 235, 0.4);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02), 0 0 0 2px rgba(37, 99, 235, 0.1);
 }
 
 .editor-ai-assist__continue input {
@@ -497,7 +718,7 @@ onBeforeUnmount(() => {
   border: none;
   outline: none;
   background: transparent;
-  color: #334155;
+  color: #111827;
   font-size: 13px;
 }
 
@@ -508,10 +729,16 @@ onBeforeUnmount(() => {
   width: 28px;
   height: 28px;
   border: none;
-  border-radius: 999px;
-  background: #e8efff;
-  color: #245bdb;
+  border-radius: 8px;
+  background: #eff6ff;
+  color: #2563eb;
   cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.editor-ai-assist__continue-send:hover {
+  background: #dbeafe;
+  color: #1d4ed8;
 }
 
 .editor-ai-assist__toolbar-actions {
@@ -525,27 +752,35 @@ onBeforeUnmount(() => {
   align-items: center;
   gap: 6px;
   padding: 6px 14px;
-  border: none;
+  border: 1px solid rgba(17, 24, 39, 0.05);
   border-radius: 8px;
-  background: transparent;
-  color: #475569;
+  background: #ffffff;
+  color: #4b5563;
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
 }
 
 .editor-ai-assist__toolbar-button:hover {
-  background: #f1f5f9;
+  background: #f9fafb;
+  color: #111827;
+  border-color: rgba(17, 24, 39, 0.1);
 }
 
 .editor-ai-assist__toolbar-button--primary {
-  background: #245bdb;
+  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+  border: none;
   color: #ffffff;
+  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
 }
 
 .editor-ai-assist__toolbar-button--primary:hover {
-  background: #1d4fc4;
+  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
+  color: #ffffff;
+  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
+  transform: translateY(-1px);
 }
 
 @media (max-width: 768px) {
@@ -555,7 +790,7 @@ onBeforeUnmount(() => {
 
   .editor-ai-assist__bar {
     flex-wrap: wrap;
-    border-radius: 24px;
+    border-radius: 16px;
   }
 
   .editor-ai-assist__bar-input {
diff --git a/apps/admin-web/src/components/kol/KolPromptEditArea.vue b/apps/admin-web/src/components/kol/KolPromptEditArea.vue
index 9034a23..8d40921 100644
--- a/apps/admin-web/src/components/kol/KolPromptEditArea.vue
+++ b/apps/admin-web/src/components/kol/KolPromptEditArea.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, h, ref } from "vue";
+import { computed, h, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { ExperimentOutlined, ThunderboltOutlined } from "@ant-design/icons-vue";
 import type { KolVariableDefinition, KolVariableType } from "@geo/shared-types";
@@ -14,13 +14,14 @@ const props = defineProps<{
   content: string;
   variables: KolVariableDefinition[];
   aiBusy: boolean;
+  selectionAiOpen?: boolean;
 }>();
 
 const emit = defineEmits<{
   (e: "update:content", value: string): void;
   (e: "update:variables", value: KolVariableDefinition[]): void;
   (e: "ai-generate", description: string): void;
-  (e: "ai-optimize"): void;
+  (e: "ai-optimize-selection", value: PromptSelectionAiSnapshot): void;
   (e: "focus-variable", key: string): void;
 }>();
 
@@ -28,6 +29,26 @@ const { t } = useI18n();
 const aiDescription = ref("");
 const textareaRef = ref<HTMLTextAreaElement | null>(null);
 const highlightRef = ref<HTMLDivElement | null>(null);
+const dropCaret = ref({
+  visible: false,
+  left: 0,
+  top: 0,
+  height: 24,
+});
+const selectionAiAction = ref({
+  visible: false,
+  buttonX: 0,
+  buttonY: 0,
+  start: 0,
+  end: 0,
+  selectedText: "",
+  x: 0,
+  y: 0,
+  width: 0,
+  placement: "bottom" as EditorAiAssistPlacement,
+  boundary: createViewportBoundary(),
+});
+const dragInsertIndex = ref<number | null>(null);
 let syncingScroll = false;
 
 type PointerSelectionState = {
@@ -43,10 +64,52 @@ type OverlaySelectionRange = {
   direction: "forward" | "backward";
 };
 
+type ClientPoint = {
+  clientX: number;
+  clientY: number;
+};
+
+type CaretVisualRect = {
+  left: number;
+  top: number;
+  height: number;
+};
+
+type EditorScrollState = {
+  top: number;
+  left: number;
+};
+
+type EditorAiAssistBoundary = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+};
+
+type EditorAiAssistPlacement = "bottom" | "top";
+
+type PromptSelectionAiSnapshot = {
+  start: number;
+  end: number;
+  selectedText: string;
+  x: number;
+  y: number;
+  width: number;
+  placement: EditorAiAssistPlacement;
+  boundary: EditorAiAssistBoundary;
+};
+
 let pointerSelectionState: PointerSelectionState | null = null;
+let dragScrollLock: EditorScrollState | null = null;
 
 const editorPlaceholder = "在这里输入提示词内容，可以使用 {{变量名}} 引用左侧定义的变量";
 const highlightTokenRE = /\{\{\s*([^{}]+?)\s*\}\}/g;
+const AI_SELECTION_ACTION_SIZE = 44;
+const AI_SELECTION_ACTION_GAP = 10;
+const AI_SELECTION_PANEL_GAP = 18;
+const AI_SELECTION_PANEL_PREFERRED_HEIGHT = 320;
+const AI_SELECTION_HIGHLIGHT_NAME = "kol-prompt-ai-optimize-selection";
 
 const highlightedContent = computed(() => {
   const text = props.content ?? "";
@@ -80,11 +143,101 @@ const highlightedContent = computed(() => {
   html += escapeHtml(text.slice(lastIndex));
   return html;
 });
+const hasPromptContent = computed(() => Boolean(props.content?.trim()));
+
+onMounted(() => {
+  window.addEventListener("dragend", hideDropCaret);
+  window.addEventListener("drop", hideDropCaret);
+  window.addEventListener("pointerdown", handleWindowPointerDown);
+  window.addEventListener("resize", handleViewportChange);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("dragend", hideDropCaret);
+  window.removeEventListener("drop", hideDropCaret);
+  window.removeEventListener("pointerdown", handleWindowPointerDown);
+  window.removeEventListener("resize", handleViewportChange);
+  clearSelectionAiHighlight();
+});
+
+watch(
+  () => props.selectionAiOpen,
+  (open) => {
+    if (!open) {
+      clearSelectionAiHighlight();
+    } else if (selectionAiAction.value.selectedText) {
+      syncSelectionAiHighlight(selectionAiAction.value.start, selectionAiAction.value.end);
+    }
+  },
+);
+
+watch(
+  () => props.content,
+  () => {
+    if (!props.selectionAiOpen) {
+      hideSelectionAiAction(true);
+    }
+  },
+);
+
+function onDragEnter(event: DragEvent) {
+  if (!isKolVariableDrag(event)) {
+    return;
+  }
+
+  event.preventDefault();
+  lockEditorScrollForDrag();
+  restoreDragScrollLock();
+  updateDragInsertionPoint(event);
+  restoreDragScrollLock();
+}
+
+function onDragOver(event: DragEvent) {
+  if (!isKolVariableDrag(event)) {
+    return;
+  }
+
+  event.preventDefault();
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = "copy";
+  }
+  lockEditorScrollForDrag();
+  restoreDragScrollLock();
+  updateDragInsertionPoint(event);
+  restoreDragScrollLock();
+}
+
+function onDragLeave(event: DragEvent) {
+  const nextTarget = event.relatedTarget;
+  const currentTarget = event.currentTarget;
+  if (
+    nextTarget instanceof Node &&
+    currentTarget instanceof HTMLElement &&
+    currentTarget.contains(nextTarget)
+  ) {
+    return;
+  }
+  if (currentTarget instanceof HTMLElement && isPointInsideElement(event, currentTarget)) {
+    return;
+  }
+
+  hideDropCaret();
+}
 
 function onDrop(event: DragEvent) {
   event.preventDefault();
   const type = event.dataTransfer?.getData("application/kol-variable-type") as KolVariableType;
-  if (!type) return;
+  if (!type) {
+    hideDropCaret();
+    return;
+  }
+
+  const insertionIndex =
+    dragInsertIndex.value ??
+    (highlightRef.value ? getCaretIndexFromPoint(highlightRef.value, event) : props.content.length);
+  const lockedScroll = dragScrollLock ?? readEditorScrollState();
+  hideDropCaret();
+  restoreEditorScroll(lockedScroll);
 
   const labelValue = ref("");
 
@@ -113,41 +266,119 @@ function onDrop(event: DragEvent) {
         emit("update:variables", [...props.variables, newVar]);
       }
 
-      insertToken(buildKolPlaceholderToken(key));
+      insertToken(buildKolPlaceholderToken(key), insertionIndex, lockedScroll);
     },
   });
 }
 
-function insertToken(token: string) {
+function isKolVariableDrag(event: DragEvent): boolean {
+  const types = Array.from(event.dataTransfer?.types ?? []);
+  return types.includes("application/kol-variable-type");
+}
+
+function updateDragInsertionPoint(event: DragEvent) {
+  const highlight = highlightRef.value;
+  if (!highlight) {
+    return;
+  }
+
+  const insertIndex = getCaretIndexFromPoint(highlight, event);
+  dragInsertIndex.value = insertIndex;
+  updateDropCaretPosition(insertIndex);
+}
+
+function lockEditorScrollForDrag() {
+  if (!dragScrollLock) {
+    dragScrollLock = readEditorScrollState();
+  }
+}
+
+function restoreDragScrollLock() {
+  if (dragScrollLock) {
+    restoreEditorScroll(dragScrollLock);
+  }
+}
+
+function updateDropCaretPosition(insertIndex: number) {
+  const highlight = highlightRef.value;
+  if (!highlight) {
+    return;
+  }
+
+  const caretRect = getCaretVisualRectAtIndex(highlight, insertIndex);
+  const highlightRect = highlight.getBoundingClientRect();
+  const height = Math.max(caretRect.height, getEditorLineHeight(highlight) * 0.9);
+
+  dropCaret.value = {
+    visible: true,
+    left: clampNumber(caretRect.left - highlightRect.left, 0, highlight.clientWidth),
+    top: clampNumber(
+      caretRect.top - highlightRect.top,
+      0,
+      Math.max(highlight.clientHeight - height, 0),
+    ),
+    height,
+  };
+}
+
+function hideDropCaret() {
+  dropCaret.value = {
+    ...dropCaret.value,
+    visible: false,
+  };
+  dragInsertIndex.value = null;
+  dragScrollLock = null;
+}
+
+function insertToken(token: string, insertionIndex?: number, scrollState = readEditorScrollState()) {
   if (!textareaRef.value) return;
   
   const el = textareaRef.value;
-  const start = el.selectionStart;
-  const end = el.selectionEnd;
   const text = props.content;
+  const hasExplicitInsertionIndex = typeof insertionIndex === "number";
+  const start = hasExplicitInsertionIndex ? clampOffset(insertionIndex, text.length) : el.selectionStart;
+  const end = hasExplicitInsertionIndex ? start : el.selectionEnd;
   
   const newContent = text.substring(0, start) + token + text.substring(end);
   emit("update:content", newContent);
   
   // Set cursor position after update
   setTimeout(() => {
-    el.focus();
+    focusTextareaWithoutScroll(el);
     el.setSelectionRange(start + token.length, start + token.length);
-    syncScrollFromTextarea();
+    restoreTextareaScroll(scrollState.top, scrollState.left);
   }, 0);
 }
 
 function handleAiGenerate() {
+  if (hasPromptContent.value) return;
   if (!aiDescription.value.trim()) return;
   emit("ai-generate", aiDescription.value);
 }
 
 function handleContentInput(event: Event) {
   emit("update:content", (event.target as HTMLTextAreaElement).value);
+  hideSelectionAiAction(true);
   syncScrollFromTextarea();
 }
 
+function scheduleTextareaSelectionSync() {
+  window.setTimeout(() => {
+    syncTextareaSelectionAction();
+  }, 0);
+}
+
+function syncTextareaSelectionAction() {
+  const textarea = textareaRef.value;
+  if (!textarea) {
+    return;
+  }
+
+  showSelectionAiAction(textarea.selectionStart, textarea.selectionEnd);
+}
+
 function handleHighlightPointerDown(event: PointerEvent) {
+  hideSelectionAiAction(!props.selectionAiOpen);
   pointerSelectionState = {
     key: getPlaceholderKeyFromTarget(event.target),
     pointerId: event.pointerId,
@@ -177,7 +408,8 @@ function handleHighlightPointerUp(event: PointerEvent) {
       overlaySelection.direction,
     );
     focusTextareaWithoutScroll(textarea);
-    restoreTextareaScroll(textarea, scrollTop, scrollLeft);
+    restoreTextareaScroll(scrollTop, scrollLeft);
+    showSelectionAiAction(overlaySelection.start, overlaySelection.end);
     return;
   }
 
@@ -194,7 +426,8 @@ function handleHighlightPointerUp(event: PointerEvent) {
 
   textarea.setSelectionRange(cursorPos, cursorPos);
   focusTextareaWithoutScroll(textarea);
-  restoreTextareaScroll(textarea, scrollTop, scrollLeft);
+  restoreTextareaScroll(scrollTop, scrollLeft);
+  hideSelectionAiAction(!props.selectionAiOpen);
 
   if (pointerState.key) {
     emit("focus-variable", pointerState.key);
@@ -205,6 +438,102 @@ function handleHighlightPointerCancel() {
   pointerSelectionState = null;
 }
 
+function showSelectionAiAction(start: number, end: number) {
+  const selectionStart = Math.min(start, end);
+  const selectionEnd = Math.max(start, end);
+  const selectedText = props.content.slice(selectionStart, selectionEnd);
+  if (selectionStart === selectionEnd || !selectedText.trim()) {
+    hideSelectionAiAction(!props.selectionAiOpen);
+    return;
+  }
+
+  const highlight = highlightRef.value;
+  if (!highlight) {
+    return;
+  }
+
+  const rect = getTextRangeVisualRect(highlight, selectionStart, selectionEnd);
+  if (!rect) {
+    return;
+  }
+
+  const panelFrame = resolveSelectionAiPanelFrame(rect);
+  const preferredButtonTop = rect.top - AI_SELECTION_ACTION_SIZE - AI_SELECTION_ACTION_GAP;
+  const buttonY =
+    preferredButtonTop >= 12 ? preferredButtonTop : rect.bottom + AI_SELECTION_ACTION_GAP;
+
+  selectionAiAction.value = {
+    visible: !props.selectionAiOpen,
+    buttonX: clampNumber(
+      rect.left + rect.width / 2,
+      AI_SELECTION_ACTION_SIZE / 2 + 12,
+      window.innerWidth - AI_SELECTION_ACTION_SIZE / 2 - 12,
+    ),
+    buttonY: clampNumber(
+      buttonY,
+      12,
+      window.innerHeight - AI_SELECTION_ACTION_SIZE - 12,
+    ),
+    start: selectionStart,
+    end: selectionEnd,
+    selectedText,
+    x: panelFrame.x,
+    y: panelFrame.y,
+    width: panelFrame.width,
+    placement: panelFrame.placement,
+    boundary: panelFrame.boundary,
+  };
+  syncSelectionAiHighlight(selectionStart, selectionEnd);
+}
+
+function hideSelectionAiAction(clearHighlight: boolean) {
+  selectionAiAction.value = {
+    ...selectionAiAction.value,
+    visible: false,
+  };
+  if (clearHighlight) {
+    clearSelectionAiHighlight();
+  }
+}
+
+function openSelectionAiPanel() {
+  const action = selectionAiAction.value;
+  if (!action.selectedText.trim()) {
+    return;
+  }
+
+  emit("ai-optimize-selection", {
+    start: action.start,
+    end: action.end,
+    selectedText: action.selectedText,
+    x: action.x,
+    y: action.y,
+    width: action.width,
+    placement: action.placement,
+    boundary: action.boundary,
+  });
+  hideSelectionAiAction(false);
+}
+
+function handleWindowPointerDown(event: PointerEvent) {
+  const target = event.target;
+  if (target instanceof Node) {
+    if (textareaRef.value?.contains(target) || highlightRef.value?.contains(target)) {
+      return;
+    }
+  }
+
+  if (target instanceof Element && target.closest(".prompt-selection-ai-action")) {
+    return;
+  }
+
+  hideSelectionAiAction(!props.selectionAiOpen);
+}
+
+function handleViewportChange() {
+  hideSelectionAiAction(!props.selectionAiOpen);
+}
+
 function getPlaceholderKeyFromTarget(target: EventTarget | null): string | null {
   const targetElement =
     target instanceof HTMLElement
@@ -250,22 +579,22 @@ function getOverlaySelectionRange(container: HTMLElement): OverlaySelectionRange
   };
 }
 
-function getCaretIndexFromPoint(container: HTMLElement, event: PointerEvent): number {
-  const browserIndex = getBrowserCaretIndex(container, event);
+function getCaretIndexFromPoint(container: HTMLElement, point: ClientPoint): number {
+  const browserIndex = getBrowserCaretIndex(container, point);
   if (browserIndex !== null) {
     return clampOffset(browserIndex, props.content.length);
   }
 
-  const approximateIndex = getApproximateCaretIndex(container, event.clientX, event.clientY);
+  const approximateIndex = getApproximateCaretIndex(container, point.clientX, point.clientY);
   return clampOffset(approximateIndex, props.content.length);
 }
 
 function getBrowserCaretIndex(
   container: HTMLElement,
-  event: PointerEvent,
+  point: ClientPoint,
 ): number | null {
   if ("caretPositionFromPoint" in document) {
-    const position = document.caretPositionFromPoint(event.clientX, event.clientY);
+    const position = document.caretPositionFromPoint(point.clientX, point.clientY);
     const index = resolveCaretIndex(container, position?.offsetNode ?? null, position?.offset);
     if (index !== null) {
       return index;
@@ -273,7 +602,7 @@ function getBrowserCaretIndex(
   }
 
   if ("caretRangeFromPoint" in document) {
-    const range = document.caretRangeFromPoint(event.clientX, event.clientY);
+    const range = document.caretRangeFromPoint(point.clientX, point.clientY);
     const index = resolveCaretIndex(container, range?.startContainer ?? null, range?.startOffset);
     if (index !== null) {
       return index;
@@ -283,6 +612,277 @@ function getBrowserCaretIndex(
   return null;
 }
 
+function getCaretVisualRectAtIndex(container: HTMLElement, targetIndex: number): CaretVisualRect {
+  const fallbackRect = getFallbackCaretVisualRect(container);
+  const position = getTextPositionAtIndex(container, targetIndex);
+  if (!position) {
+    return fallbackRect;
+  }
+
+  const collapsedRange = document.createRange();
+  collapsedRange.setStart(position.node, position.offset);
+  collapsedRange.collapse(true);
+  const collapsedRect = firstUsableRangeRect(collapsedRange);
+  if (collapsedRect) {
+    return {
+      left: collapsedRect.left,
+      top: collapsedRect.top,
+      height: collapsedRect.height,
+    };
+  }
+
+  const characterRect = getAdjacentCharacterRect(position.node, position.offset);
+  if (characterRect) {
+    return characterRect;
+  }
+
+  return fallbackRect;
+}
+
+function getTextRangeVisualRect(container: HTMLElement, start: number, end: number): DOMRect | null {
+  const startPosition = getTextPositionAtIndex(container, start);
+  const endPosition = getTextPositionAtIndex(container, end);
+  if (!startPosition || !endPosition) {
+    return null;
+  }
+
+  const range = document.createRange();
+  range.setStart(startPosition.node, startPosition.offset);
+  range.setEnd(endPosition.node, endPosition.offset);
+  const rects = Array.from(range.getClientRects()).filter(
+    (rect) => rect.width > 0 || rect.height > 0,
+  );
+  if (rects.length === 0) {
+    const rect = range.getBoundingClientRect();
+    return rect.width > 0 || rect.height > 0 ? rect : null;
+  }
+
+  return combineRects(rects);
+}
+
+function combineRects(rects: DOMRect[]): DOMRect {
+  const first = rects[0];
+  return rects.slice(1).reduce(
+    (combined, rect) => {
+      const left = Math.min(combined.left, rect.left);
+      const top = Math.min(combined.top, rect.top);
+      const right = Math.max(combined.right, rect.right);
+      const bottom = Math.max(combined.bottom, rect.bottom);
+      return new DOMRect(left, top, Math.max(right - left, 1), Math.max(bottom - top, 1));
+    },
+    new DOMRect(first.left, first.top, Math.max(first.width, 1), Math.max(first.height, 1)),
+  );
+}
+
+function resolveSelectionAiPanelFrame(anchorRect: DOMRect): { x: number; y: number; width: number; placement: EditorAiAssistPlacement; boundary: EditorAiAssistBoundary } {
+  const viewportPadding = 16;
+  const panelPadding = 24;
+  const preferredWidth = 1120;
+  const surfaceRect = highlightRef.value?.getBoundingClientRect();
+  const boundary = normalizeEditorBoundary(surfaceRect);
+  const maxWidth = Math.max(240, boundary.right - boundary.left - viewportPadding * 2);
+  const widthFromSurface = surfaceRect
+    ? Math.max(240, surfaceRect.width - panelPadding * 2)
+    : preferredWidth;
+  const availableBelow = boundary.bottom - anchorRect.bottom - AI_SELECTION_PANEL_GAP - viewportPadding;
+  const availableAbove = anchorRect.top - boundary.top - AI_SELECTION_PANEL_GAP - viewportPadding;
+  const placement: EditorAiAssistPlacement =
+    availableBelow >= AI_SELECTION_PANEL_PREFERRED_HEIGHT || availableBelow >= availableAbove
+      ? "bottom"
+      : "top";
+
+  return {
+    x: anchorRect.left + anchorRect.width / 2,
+    y:
+      placement === "top"
+        ? Math.min(boundary.bottom - viewportPadding, anchorRect.top - AI_SELECTION_PANEL_GAP)
+        : Math.max(boundary.top + viewportPadding, anchorRect.bottom + AI_SELECTION_PANEL_GAP),
+    width: Math.min(maxWidth, preferredWidth, widthFromSurface),
+    placement,
+    boundary,
+  };
+}
+
+function createViewportBoundary(): EditorAiAssistBoundary {
+  return {
+    left: 0,
+    top: 0,
+    right: window.innerWidth,
+    bottom: window.innerHeight,
+  };
+}
+
+function normalizeEditorBoundary(rect: DOMRect | null | undefined): EditorAiAssistBoundary {
+  if (!rect) {
+    return createViewportBoundary();
+  }
+
+  const left = clampNumber(rect.left, 0, window.innerWidth);
+  const top = clampNumber(rect.top, 0, window.innerHeight);
+  const right = clampNumber(rect.right, left, window.innerWidth);
+  const bottom = clampNumber(rect.bottom, top, window.innerHeight);
+
+  if (right - left < 1 || bottom - top < 1) {
+    return createViewportBoundary();
+  }
+
+  return { left, top, right, bottom };
+}
+
+function getCSSHighlightsRegistry():
+  | {
+      set: (name: string, value: unknown) => void;
+      delete: (name: string) => void;
+    }
+  | null {
+  const cssWithHighlights = globalThis.CSS as typeof globalThis.CSS & {
+    highlights?: {
+      set: (name: string, value: unknown) => void;
+      delete: (name: string) => void;
+    };
+  };
+
+  return cssWithHighlights.highlights ?? null;
+}
+
+function clearSelectionAiHighlight() {
+  getCSSHighlightsRegistry()?.delete(AI_SELECTION_HIGHLIGHT_NAME);
+}
+
+function syncSelectionAiHighlight(start: number, end: number) {
+  clearSelectionAiHighlight();
+  const registry = getCSSHighlightsRegistry();
+  const HighlightCtor = window.Highlight as (new (...ranges: Range[]) => unknown) | undefined;
+  const highlight = highlightRef.value;
+  if (!registry || !HighlightCtor || !highlight) {
+    return;
+  }
+
+  const startPosition = getTextPositionAtIndex(highlight, start);
+  const endPosition = getTextPositionAtIndex(highlight, end);
+  if (!startPosition || !endPosition) {
+    return;
+  }
+
+  const range = document.createRange();
+  range.setStart(startPosition.node, startPosition.offset);
+  range.setEnd(endPosition.node, endPosition.offset);
+  registry.set(AI_SELECTION_HIGHLIGHT_NAME, new HighlightCtor(range));
+}
+
+function getTextPositionAtIndex(
+  container: HTMLElement,
+  targetIndex: number,
+): { node: Text; offset: number } | null {
+  const textNodes = getTextNodes(container);
+  if (textNodes.length === 0) {
+    return null;
+  }
+
+  let currentIndex = 0;
+  for (const textNode of textNodes) {
+    const textLength = textNode.textContent?.length ?? 0;
+    if (targetIndex <= currentIndex + textLength) {
+      return {
+        node: textNode,
+        offset: clampNumber(targetIndex - currentIndex, 0, textLength),
+      };
+    }
+    currentIndex += textLength;
+  }
+
+  const lastNode = textNodes[textNodes.length - 1];
+  return {
+    node: lastNode,
+    offset: lastNode.textContent?.length ?? 0,
+  };
+}
+
+function firstUsableRangeRect(range: Range): DOMRect | null {
+  const rects = Array.from(range.getClientRects());
+  const rect = rects.find((item) => item.height > 0);
+  if (rect) {
+    return rect;
+  }
+
+  const boundingRect = range.getBoundingClientRect();
+  return boundingRect.height > 0 ? boundingRect : null;
+}
+
+function getAdjacentCharacterRect(node: Text, offset: number): CaretVisualRect | null {
+  const textLength = node.textContent?.length ?? 0;
+  const range = document.createRange();
+
+  if (offset > 0) {
+    range.setStart(node, offset - 1);
+    range.setEnd(node, offset);
+    const rect = firstUsableRangeRect(range);
+    if (rect) {
+      return {
+        left: rect.right,
+        top: rect.top,
+        height: rect.height,
+      };
+    }
+  }
+
+  if (offset < textLength) {
+    range.setStart(node, offset);
+    range.setEnd(node, offset + 1);
+    const rect = firstUsableRangeRect(range);
+    if (rect) {
+      return {
+        left: rect.left,
+        top: rect.top,
+        height: rect.height,
+      };
+    }
+  }
+
+  return null;
+}
+
+function getFallbackCaretVisualRect(container: HTMLElement): CaretVisualRect {
+  const rect = container.getBoundingClientRect();
+  const style = window.getComputedStyle(container);
+  const paddingLeft = Number.parseFloat(style.paddingLeft) || 0;
+  const paddingTop = Number.parseFloat(style.paddingTop) || 0;
+
+  return {
+    left: rect.left + paddingLeft,
+    top: rect.top + paddingTop,
+    height: getEditorLineHeight(container),
+  };
+}
+
+function getEditorLineHeight(container: HTMLElement): number {
+  const style = window.getComputedStyle(container);
+  const lineHeight = Number.parseFloat(style.lineHeight);
+  if (Number.isFinite(lineHeight)) {
+    return lineHeight;
+  }
+
+  const fontSize = Number.parseFloat(style.fontSize) || 16;
+  return fontSize * 1.6;
+}
+
+function clampNumber(value: number, min: number, max: number): number {
+  if (!Number.isFinite(value)) {
+    return min;
+  }
+  return Math.min(Math.max(value, min), max);
+}
+
+function isPointInsideElement(point: ClientPoint, element: HTMLElement): boolean {
+  const rect = element.getBoundingClientRect();
+  return (
+    point.clientX >= rect.left &&
+    point.clientX <= rect.right &&
+    point.clientY >= rect.top &&
+    point.clientY <= rect.bottom
+  );
+}
+
 function resolveCaretIndex(
   container: HTMLElement,
   node: Node | null,
@@ -404,27 +1004,45 @@ function focusTextareaWithoutScroll(textarea: HTMLTextAreaElement) {
   }
 }
 
-function restoreTextareaScroll(
-  textarea: HTMLTextAreaElement,
-  scrollTop: number,
-  scrollLeft: number,
-) {
-  textarea.scrollTop = scrollTop;
-  textarea.scrollLeft = scrollLeft;
-  syncScrollFromTextarea();
+function restoreTextareaScroll(scrollTop: number, scrollLeft: number) {
+  restoreEditorScroll({ top: scrollTop, left: scrollLeft });
 
   requestAnimationFrame(() => {
-    textarea.scrollTop = scrollTop;
-    textarea.scrollLeft = scrollLeft;
-    syncScrollFromTextarea();
+    restoreEditorScroll({ top: scrollTop, left: scrollLeft });
   });
 }
 
+function readEditorScrollState(): EditorScrollState {
+  return {
+    top: highlightRef.value?.scrollTop ?? textareaRef.value?.scrollTop ?? 0,
+    left: highlightRef.value?.scrollLeft ?? textareaRef.value?.scrollLeft ?? 0,
+  };
+}
+
+function restoreEditorScroll(state: EditorScrollState) {
+  if (textareaRef.value) {
+    textareaRef.value.scrollTop = state.top;
+    textareaRef.value.scrollLeft = state.left;
+  }
+  if (highlightRef.value) {
+    highlightRef.value.scrollTop = state.top;
+    highlightRef.value.scrollLeft = state.left;
+  }
+  if (dropCaret.value.visible && dragInsertIndex.value !== null) {
+    updateDropCaretPosition(dragInsertIndex.value);
+  }
+}
+
 function syncScrollFromTextarea() {
   if (!textareaRef.value || !highlightRef.value) {
     return;
   }
 
+  if (dragScrollLock) {
+    restoreDragScrollLock();
+    return;
+  }
+
   if (syncingScroll) {
     return;
   }
@@ -432,6 +1050,9 @@ function syncScrollFromTextarea() {
   syncingScroll = true;
   highlightRef.value.scrollTop = textareaRef.value.scrollTop;
   highlightRef.value.scrollLeft = textareaRef.value.scrollLeft;
+  if (dropCaret.value.visible && dragInsertIndex.value !== null) {
+    updateDropCaretPosition(dragInsertIndex.value);
+  }
   requestAnimationFrame(() => {
     syncingScroll = false;
   });
@@ -442,6 +1063,11 @@ function syncScrollFromHighlight() {
     return;
   }
 
+  if (dragScrollLock) {
+    restoreDragScrollLock();
+    return;
+  }
+
   if (syncingScroll) {
     return;
   }
@@ -449,6 +1075,9 @@ function syncScrollFromHighlight() {
   syncingScroll = true;
   textareaRef.value.scrollTop = highlightRef.value.scrollTop;
   textareaRef.value.scrollLeft = highlightRef.value.scrollLeft;
+  if (dropCaret.value.visible && dragInsertIndex.value !== null) {
+    updateDropCaretPosition(dragInsertIndex.value);
+  }
   requestAnimationFrame(() => {
     syncingScroll = false;
   });
@@ -467,8 +1096,14 @@ function escapeAttribute(value: string): string {
 </script>
 
 <template>
-  <div class="kol-prompt-edit-area" @dragover.prevent @drop="onDrop">
-    <div class="ai-assist-bar">
+  <div
+    class="kol-prompt-edit-area"
+    @dragenter="onDragEnter"
+    @dragover="onDragOver"
+    @dragleave="onDragLeave"
+    @drop="onDrop"
+  >
+    <div v-if="!hasPromptContent || aiBusy" class="ai-assist-bar">
       <a-input
         v-model:value="aiDescription"
         class="ai-input"
@@ -481,6 +1116,7 @@ function escapeAttribute(value: string): string {
         </template>
       </a-input>
       <a-button
+        v-if="!hasPromptContent"
         type="primary"
         class="ai-btn"
         :loading="aiBusy"
@@ -489,17 +1125,10 @@ function escapeAttribute(value: string): string {
         <template #icon><ThunderboltOutlined /></template>
         {{ t('kol.manage.editor.aiGenerate') }}
       </a-button>
-      <a-button
-        class="ai-btn"
-        :disabled="!content || aiBusy"
-        @click="emit('ai-optimize')"
-      >
-        {{ t('kol.manage.editor.aiOptimize') }}
-      </a-button>
       <span v-if="aiBusy" class="ai-status-text">AI 正在处理中...</span>
     </div>
 
-    <div class="editor-container">
+    <div class="editor-container" :class="{ 'editor-container--drop-active': dropCaret.visible }">
       <div
         ref="highlightRef"
         class="prompt-highlight"
@@ -516,13 +1145,53 @@ function escapeAttribute(value: string): string {
         :value="content"
         :placeholder="editorPlaceholder"
         @input="handleContentInput"
+        @select="scheduleTextareaSelectionSync"
+        @mouseup="scheduleTextareaSelectionSync"
+        @keyup="scheduleTextareaSelectionSync"
         @scroll="syncScrollFromTextarea"
       ></textarea>
+      <div
+        v-if="dropCaret.visible"
+        class="prompt-drop-caret"
+        :style="{
+          height: `${dropCaret.height}px`,
+          transform: `translate3d(${dropCaret.left}px, ${dropCaret.top}px, 0)`,
+        }"
+      ></div>
     </div>
+    <Teleport to="body">
+      <button
+        v-if="selectionAiAction.visible"
+        type="button"
+        class="prompt-selection-ai-action"
+        :style="{
+          transform: `translate3d(${selectionAiAction.buttonX}px, ${selectionAiAction.buttonY}px, 0) translateX(-50%)`,
+        }"
+        :title="t('kol.manage.editor.aiOptimize')"
+        @pointerdown.prevent.stop
+        @click.prevent.stop="openSelectionAiPanel"
+      >
+        <svg
+          class="prompt-selection-ai-action__icon"
+          aria-hidden="true"
+          viewBox="0 0 1024 1024"
+          width="1em"
+          height="1em"
+          fill="currentColor"
+        >
+          <path d="M716.571429 332l167.428571-167.428571-61.142857-61.142857-167.428571 167.428571zm255.428571-167.428571q0 15.428571-10.285714 25.714286l-734.857143 734.857143q-10.285714 10.285714-25.714286 10.285714t-25.714286-10.285714l-113.142857-113.142857q-10.285714-10.285714-10.285714-25.714286t10.285714-25.714286l734.857143-734.857143q10.285714-10.285714 25.714286-10.285714t25.714286 10.285714l113.142857 113.142857q10.285714 10.285714 10.285714 25.714286zm-772-108.571429l56 17.142857-56 17.142857-17.142857 56-17.142857-56-56-17.142857 56-17.142857 17.142857-56zm200 92.571429l112 34.285714-112 34.285714-34.285714 112-34.285714-112-112-34.285714 112-34.285714 34.285714-112zm531.428571 273.142857l56 17.142857-56 17.142857-17.142857 56-17.142857-56-56-17.142857 56-17.142857 17.142857-56zm-365.714286-365.714286l56 17.142857-56 17.142857-17.142857 56-17.142857-56-56-17.142857 56-17.142857 17.142857-56z"></path>
+        </svg>
+      </button>
+    </Teleport>
   </div>
 </template>
 
 <style scoped>
+:global(::highlight(kol-prompt-ai-optimize-selection)) {
+  color: inherit;
+  background: rgba(156, 163, 175, 0.42);
+}
+
 .kol-prompt-edit-area {
   flex: 1;
   display: flex;
@@ -547,6 +1216,41 @@ function escapeAttribute(value: string): string {
   flex-shrink: 0;
 }
 
+.prompt-selection-ai-action {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1320;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 14px;
+  background: #ffffff;
+  color: #8c8c8c;
+  box-shadow:
+    0 10px 30px rgba(15, 23, 42, 0.18),
+    0 0 0 1px rgba(15, 23, 42, 0.04);
+  cursor: pointer;
+  transition:
+    color 0.16s ease,
+    box-shadow 0.16s ease;
+}
+
+.prompt-selection-ai-action:hover {
+  color: #1677ff;
+  box-shadow:
+    0 14px 34px rgba(22, 119, 255, 0.2),
+    0 0 0 1px rgba(22, 119, 255, 0.16);
+}
+
+.prompt-selection-ai-action__icon {
+  width: 22px;
+  height: 22px;
+}
+
 .ai-status-text {
   display: inline-flex;
   align-items: center;
@@ -560,6 +1264,11 @@ function escapeAttribute(value: string): string {
   position: relative;
   display: flex;
   overflow: hidden;
+  transition: background-color 0.18s ease;
+}
+
+.editor-container--drop-active {
+  background: linear-gradient(90deg, rgba(22, 119, 255, 0.035), rgba(114, 46, 209, 0.035));
 }
 
 .prompt-highlight {
@@ -607,6 +1316,57 @@ function escapeAttribute(value: string): string {
   color: transparent;
 }
 
+.prompt-drop-caret {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 5;
+  width: 2px;
+  min-height: 20px;
+  border-radius: 999px;
+  background: #1677ff;
+  box-shadow:
+    0 0 0 3px rgba(22, 119, 255, 0.12),
+    0 0 18px rgba(22, 119, 255, 0.35);
+  pointer-events: none;
+  transition:
+    transform 0.12s cubic-bezier(0.22, 1, 0.36, 1),
+    height 0.12s ease,
+    opacity 0.12s ease;
+  animation: promptDropCaretBlink 0.9s ease-in-out infinite;
+}
+
+.prompt-drop-caret::before,
+.prompt-drop-caret::after {
+  position: absolute;
+  left: 50%;
+  width: 12px;
+  height: 2px;
+  border-radius: 999px;
+  background: #1677ff;
+  content: "";
+  transform: translateX(-50%);
+}
+
+.prompt-drop-caret::before {
+  top: -1px;
+}
+
+.prompt-drop-caret::after {
+  bottom: -1px;
+}
+
+@keyframes promptDropCaretBlink {
+  0%,
+  100% {
+    opacity: 0.45;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
 .prompt-highlight :deep(.token-highlight) {
   color: #eb2f96;
 }
diff --git a/apps/admin-web/src/components/kol/KolPromptEditor.vue b/apps/admin-web/src/components/kol/KolPromptEditor.vue
index c12f7b1..2f276c3 100644
--- a/apps/admin-web/src/components/kol/KolPromptEditor.vue
+++ b/apps/admin-web/src/components/kol/KolPromptEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
 import { message } from "ant-design-vue";
@@ -9,6 +9,7 @@ import KolVariablePanel from "./KolVariablePanel.vue";
 import KolVariableConfig from "./KolVariableConfig.vue";
 import KolPromptEditArea from "./KolPromptEditArea.vue";
 import KolDynamicForm from "./KolDynamicForm.vue";
+import EditorAiAssistPanel from "@/components/editor-common/EditorAiAssistPanel.vue";
 import { kolManageApi } from "@/lib/api";
 import type { KolAssistRequest, KolAssistStreamEvent, KolCardConfig, KolVariableDefinition } from "@geo/shared-types";
 import { formatError } from "@/lib/errors";
@@ -24,6 +25,30 @@ const props = defineProps<{
   promptId: number;
 }>();
 
+type AiOptimizeStatus = "idle" | "generating" | "completed" | "error";
+type EditorAiAssistPlacement = "bottom" | "top";
+type EditorAiAssistBoundary = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+};
+
+type PromptSelectionAiSnapshot = {
+  start: number;
+  end: number;
+  selectedText: string;
+  x: number;
+  y: number;
+  width: number;
+  placement: EditorAiAssistPlacement;
+  boundary: EditorAiAssistBoundary;
+};
+
+type PromptSelectionAiPanelState = PromptSelectionAiSnapshot & {
+  open: boolean;
+};
+
 const emit = defineEmits<{
   back: [];
 }>();
@@ -31,11 +56,30 @@ const emit = defineEmits<{
 const { t } = useI18n();
 const queryClient = useQueryClient();
 
+function createDefaultPromptSelectionAiPanelState(): PromptSelectionAiPanelState {
+  return {
+    open: false,
+    x: 0,
+    y: 0,
+    width: 0,
+    placement: "bottom",
+    boundary: { left: 0, top: 0, right: 0, bottom: 0 },
+    start: 0,
+    end: 0,
+    selectedText: "",
+  };
+}
+
 const content = ref("");
 const variables = ref<KolVariableDefinition[]>([]);
 const previewOpen = ref(false);
 const previewValues = ref<Record<string, any>>({});
 const aiBusy = ref(false);
+const selectionAiPanel = ref<PromptSelectionAiPanelState>(createDefaultPromptSelectionAiPanelState());
+const selectionAiInstruction = ref("");
+const selectionAiPreview = ref("");
+const selectionAiError = ref("");
+const selectionAiStatus = ref<AiOptimizeStatus>("idle");
 const cardConfig = ref<KolCardConfig>({});
 const variableConfigRef = ref<{
   focusVariable: (key: string, options?: { focusInput?: boolean }) => void;
@@ -60,6 +104,18 @@ const platformOptions = computed(() => {
   }
   return options;
 });
+const selectionAiStreaming = computed(() => selectionAiStatus.value === "generating");
+const selectionAiHasPreview = computed(() => selectionAiPreview.value.trim().length > 0);
+const selectionAiUiText = computed(() => ({
+  title: t("article.editor.aiOptimize.title"),
+  promptPlaceholder: t("kol.manage.editor.aiOptimizePromptPlaceholder"),
+  generating: t("article.editor.aiOptimize.generating"),
+  failed: t("article.editor.aiOptimize.messages.failed"),
+  disclaimer: t("kol.manage.editor.aiOptimizeDisclaimer"),
+  regenerate: t("article.editor.aiOptimize.regenerate"),
+  close: t("article.editor.aiOptimize.close"),
+  replace: t("kol.manage.editor.aiOptimizeReplace"),
+}));
 
 watch(
   () => promptDetail.value,
@@ -107,6 +163,7 @@ const saveMutation = useMutation({
 });
 
 let aiAssistAbortController: AbortController | null = null;
+let selectionAiAbortController: AbortController | null = null;
 
 function applyAssistResult(event: KolAssistStreamEvent) {
   const nextContent = (event.content ?? "").trim();
@@ -212,14 +269,155 @@ async function handleAiGenerate(description: string) {
   });
 }
 
-async function handleAiOptimize() {
+function resetSelectionAiOutput() {
+  selectionAiPreview.value = "";
+  selectionAiError.value = "";
+  selectionAiStatus.value = "idle";
+}
+
+function stopSelectionAiStream() {
+  selectionAiAbortController?.abort();
+  selectionAiAbortController = null;
+
+  if (selectionAiStatus.value === "generating") {
+    selectionAiStatus.value = selectionAiHasPreview.value ? "completed" : "idle";
+    selectionAiError.value = "";
+  }
+}
+
+function closeSelectionAiPanel() {
+  stopSelectionAiStream();
+  selectionAiPanel.value = createDefaultPromptSelectionAiPanelState();
+  selectionAiInstruction.value = "";
+  resetSelectionAiOutput();
+}
+
+function handleOpenSelectionAiPanel(snapshot: PromptSelectionAiSnapshot) {
+  stopAiAssistStream();
+  stopSelectionAiStream();
+  selectionAiPanel.value = {
+    open: true,
+    ...snapshot,
+  };
+  selectionAiInstruction.value = "";
+  resetSelectionAiOutput();
+}
+
+function handleSelectionAiStreamEvent(event: KolAssistStreamEvent) {
+  if (event.type === "start") {
+    selectionAiStatus.value = "generating";
+    selectionAiError.value = "";
+    return;
+  }
+
+  if (event.type === "delta") {
+    selectionAiStatus.value = "generating";
+    selectionAiError.value = "";
+    if (typeof event.content === "string") {
+      selectionAiPreview.value = event.content;
+    } else if (typeof event.delta === "string") {
+      selectionAiPreview.value += event.delta;
+    }
+    return;
+  }
+
+  if (event.type === "completed") {
+    selectionAiStatus.value = "completed";
+    selectionAiError.value = "";
+    if (typeof event.content === "string") {
+      selectionAiPreview.value = event.content;
+    }
+    return;
+  }
+
+  if (event.type === "error") {
+    selectionAiStatus.value = selectionAiHasPreview.value ? "completed" : "error";
+    selectionAiError.value = event.error || t("article.editor.aiOptimize.messages.failed");
+    if (typeof event.content === "string" && event.content.trim()) {
+      selectionAiPreview.value = event.content;
+    }
+    if (!selectionAiHasPreview.value) {
+      message.error(selectionAiError.value);
+    }
+  }
+}
+
+async function generateSelectionAiPreview() {
+  if (!selectionAiPanel.value.open) {
+    return;
+  }
+
+  const instruction = selectionAiInstruction.value.trim();
+  if (!instruction) {
+    message.warning(t("article.editor.aiOptimize.messages.promptRequired"));
+    return;
+  }
+
+  stopSelectionAiStream();
+  selectionAiPreview.value = "";
+  selectionAiError.value = "";
+  selectionAiStatus.value = "generating";
+
   const syncedVariables = syncVariablesFromContent();
-  await runAiAssistStream({
-    mode: "optimize",
-    current_content: content.value,
-    schema: { variables: syncedVariables },
-    prompt_id: props.promptId,
-  });
+  const controller = new AbortController();
+  selectionAiAbortController = controller;
+
+  try {
+    await kolManageApi.streamAssist(
+      {
+        mode: "optimize",
+        description: instruction,
+        current_content: selectionAiPanel.value.selectedText,
+        schema: { variables: syncedVariables },
+        prompt_id: props.promptId,
+      },
+      {
+        onEvent: handleSelectionAiStreamEvent,
+      },
+      controller.signal,
+    );
+
+    if (!controller.signal.aborted && selectionAiStatus.value === "generating") {
+      selectionAiStatus.value = selectionAiHasPreview.value ? "completed" : "error";
+    }
+  } catch (error) {
+    if (controller.signal.aborted) {
+      return;
+    }
+
+    selectionAiStatus.value = selectionAiHasPreview.value ? "completed" : "error";
+    selectionAiError.value = formatError(error);
+    if (!selectionAiHasPreview.value) {
+      message.error(selectionAiError.value);
+    }
+  } finally {
+    if (selectionAiAbortController === controller) {
+      selectionAiAbortController = null;
+    }
+  }
+}
+
+function applySelectionAiReplacement() {
+  const replacement = selectionAiPreview.value.trim();
+  if (!selectionAiPanel.value.open || !replacement) {
+    if (!replacement) {
+      message.warning(t("article.editor.aiOptimize.messages.empty"));
+    }
+    return;
+  }
+
+  const target = { ...selectionAiPanel.value };
+  const currentSelectedText = content.value.slice(target.start, target.end);
+  if (currentSelectedText !== target.selectedText) {
+    message.warning(t("article.editor.aiOptimize.messages.selectionChanged"));
+    return;
+  }
+
+  const nextContent =
+    content.value.slice(0, target.start) + replacement + content.value.slice(target.end);
+  content.value = nextContent;
+  variables.value = syncKolVariablesWithContent(nextContent, variables.value);
+  closeSelectionAiPanel();
 }
 
 function buildPromptPayload(nextVariables: KolVariableDefinition[] = variables.value) {
@@ -281,6 +479,20 @@ function handleSave() {
   saveMutation.mutate(buildPromptPayload(syncedVariables));
 }
 
+function handleSaveShortcut(event: KeyboardEvent) {
+  if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== "s") {
+    return;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+  if (event.repeat || saveMutation.isPending.value || publishMutation.isPending.value) {
+    return;
+  }
+
+  handleSave();
+}
+
 function handlePublish() {
   const syncedVariables = syncVariablesFromContent();
   if (!validateBeforeSubmit()) {
@@ -317,8 +529,32 @@ function statusLabel(status?: string): string {
   return t("kol.manage.status.draft");
 }
 
+function handleWindowPointerDown(event: PointerEvent) {
+  if (!(selectionAiPanel.value.open && selectionAiStatus.value === "idle")) {
+    return;
+  }
+
+  const target = event.target;
+  if (
+    target instanceof Element &&
+    (target.closest(".editor-ai-assist") || target.closest(".prompt-selection-ai-action"))
+  ) {
+    return;
+  }
+
+  closeSelectionAiPanel();
+}
+
+onMounted(() => {
+  window.addEventListener("keydown", handleSaveShortcut);
+  window.addEventListener("pointerdown", handleWindowPointerDown);
+});
+
 onBeforeUnmount(() => {
+  window.removeEventListener("keydown", handleSaveShortcut);
+  window.removeEventListener("pointerdown", handleWindowPointerDown);
   stopAiAssistStream();
+  stopSelectionAiStream();
 });
 </script>
 
@@ -346,7 +582,12 @@ onBeforeUnmount(() => {
           <template #icon><EyeOutlined /></template>
           {{ t('kol.manage.editor.preview') }}
         </a-button>
-        <a-button :loading="saveMutation.isPending.value" @click="handleSave">
+        <a-button
+          :loading="saveMutation.isPending.value"
+          title="Ctrl/Cmd + S"
+          aria-keyshortcuts="Control+S Meta+S"
+          @click="handleSave"
+        >
           <template #icon><SaveOutlined /></template>
           {{ t('common.save') }}
         </a-button>
@@ -399,8 +640,9 @@ onBeforeUnmount(() => {
         v-model:content="content"
         v-model:variables="variables"
         :ai-busy="aiBusy"
+        :selection-ai-open="selectionAiPanel.open"
         @ai-generate="handleAiGenerate"
-        @ai-optimize="handleAiOptimize"
+        @ai-optimize-selection="handleOpenSelectionAiPanel"
         @focus-variable="handleFocusVariable"
       />
       <KolVariableConfig
@@ -420,6 +662,37 @@ onBeforeUnmount(() => {
         v-model:modelValue="previewValues"
       />
     </a-modal>
+
+    <EditorAiAssistPanel
+      v-if="selectionAiPanel.open"
+      v-model:prompt="selectionAiInstruction"
+      :x="selectionAiPanel.x"
+      :y="selectionAiPanel.y"
+      :width="selectionAiPanel.width"
+      :placement="selectionAiPanel.placement"
+      :boundary="selectionAiPanel.boundary"
+      :status="selectionAiStatus"
+      :streaming="selectionAiStreaming"
+      :has-preview="selectionAiHasPreview"
+      :error="selectionAiError"
+      :title="selectionAiUiText.title"
+      :prompt-placeholder="selectionAiUiText.promptPlaceholder"
+      :continue-placeholder="selectionAiUiText.promptPlaceholder"
+      :loading-label="selectionAiUiText.generating"
+      :error-label="selectionAiUiText.failed"
+      :disclaimer="selectionAiUiText.disclaimer"
+      :regenerate-label="selectionAiUiText.regenerate"
+      :discard-label="selectionAiUiText.close"
+      :apply-label="selectionAiUiText.replace"
+      @submit="generateSelectionAiPreview"
+      @close="closeSelectionAiPanel"
+      @reset="resetSelectionAiOutput"
+      @apply="applySelectionAiReplacement"
+    >
+      <template #preview>
+        <pre class="kol-prompt-editor__ai-preview">{{ selectionAiPreview }}</pre>
+      </template>
+    </EditorAiAssistPanel>
   </div>
 </template>
 
@@ -547,6 +820,15 @@ onBeforeUnmount(() => {
   line-height: 1.5;
 }
 
+.kol-prompt-editor__ai-preview {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  color: #111827;
+  font: inherit;
+  line-height: 1.8;
+}
+
 @media (max-width: 1200px) {
   .editor-meta-form {
     grid-template-columns: 1fr 1fr;
diff --git a/apps/admin-web/src/i18n/messages/en-US.ts b/apps/admin-web/src/i18n/messages/en-US.ts
index 759716f..488641a 100644
--- a/apps/admin-web/src/i18n/messages/en-US.ts
+++ b/apps/admin-web/src/i18n/messages/en-US.ts
@@ -274,7 +274,10 @@ const enUS = {
         preview: "Preview form",
         aiGenerate: "AI Generate",
         aiOptimize: "AI Optimize",
-        aiPlaceholder: "Describe the prompt effect you want, and AI will generate or optimize it...",
+        aiPlaceholder: "Describe the prompt effect you want, and AI will generate it...",
+        aiOptimizePromptPlaceholder: "For example: make this prompt clearer, keep variable placeholders, and reduce ambiguity.",
+        aiOptimizeDisclaimer: "AI output is for reference only. Review it before replacing the selected prompt text.",
+        aiOptimizeReplace: "Replace selection",
       },
       variable: {
         input: "Input",
diff --git a/apps/admin-web/src/i18n/messages/zh-CN.ts b/apps/admin-web/src/i18n/messages/zh-CN.ts
index 9348e62..9718236 100644
--- a/apps/admin-web/src/i18n/messages/zh-CN.ts
+++ b/apps/admin-web/src/i18n/messages/zh-CN.ts
@@ -274,7 +274,10 @@ const zhCN = {
         preview: "预览表单",
         aiGenerate: "AI 生成",
         aiOptimize: "AI 优化",
-        aiPlaceholder: "描述你想要的 prompt 效果，AI 帮你生成 / 优化...",
+        aiPlaceholder: "描述你想要的 prompt 效果，AI 帮你生成...",
+        aiOptimizePromptPlaceholder: "例如：让这段提示词更清晰，保留变量占位符，减少歧义。",
+        aiOptimizeDisclaimer: "AI 生成内容仅供参考，请确认后再替换选中片段。",
+        aiOptimizeReplace: "替换选中内容",
       },
       variable: {
         input: "输入框",
diff --git a/apps/admin-web/src/views/KolManageView.vue b/apps/admin-web/src/views/KolManageView.vue
index bb0e8bb..2646698 100644
--- a/apps/admin-web/src/views/KolManageView.vue
+++ b/apps/admin-web/src/views/KolManageView.vue
@@ -419,7 +419,6 @@ function packageStatusLabel(status: string) {
   min-height: 0;
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
 .manage-content--editor {
diff --git a/server/internal/tenant/app/kol_assist_runtime.go b/server/internal/tenant/app/kol_assist_runtime.go
index 4acd6a0..d85af78 100644
--- a/server/internal/tenant/app/kol_assist_runtime.go
+++ b/server/internal/tenant/app/kol_assist_runtime.go
@@ -115,8 +115,13 @@ func BuildKolAssistUserPrompt(req AssistRequest) (string, error) {
 			}
 			schemaJSON = string(payload)
 		}
+		instruction := strings.TrimSpace(req.Description)
+		if instruction == "" {
+			instruction = "Make the prompt clearer, more complete, and easier for another AI to follow."
+		}
 		return fmt.Sprintf(
-			"Optimize the following prompt. Keep variable placeholders intact. Current schema: %s\n\nPROMPT:\n%s",
+			"Optimize the following prompt according to the instruction. Keep variable placeholders intact.\n\nInstruction:\n%s\n\nCurrent schema: %s\n\nPROMPT:\n%s",
+			instruction,
 			schemaJSON,
 			req.CurrentContent,
 		), nil
diff --git a/server/internal/tenant/app/kol_assist_runtime_test.go b/server/internal/tenant/app/kol_assist_runtime_test.go
index dca6d1e..b899d02 100644
--- a/server/internal/tenant/app/kol_assist_runtime_test.go
+++ b/server/internal/tenant/app/kol_assist_runtime_test.go
@@ -72,6 +72,20 @@ func TestParseKolAssistResponseSupportsStringVariables(t *testing.T) {
 	require.Equal(t, "城市", result.Schema.Variables[0].Key)
 }
 
+func TestBuildKolAssistUserPromptIncludesOptimizeInstruction(t *testing.T) {
+	t.Parallel()
+
+	prompt, err := BuildKolAssistUserPrompt(AssistRequest{
+		Mode:           kolAssistModeOptimize,
+		Description:    "让表达更清晰，但保留变量",
+		CurrentContent: "围绕 {{城市}} 写一段内容",
+	})
+
+	require.NoError(t, err)
+	require.Contains(t, prompt, "Instruction:\n让表达更清晰，但保留变量")
+	require.Contains(t, prompt, "PROMPT:\n围绕 {{城市}} 写一段内容")
+}
+
 func TestExtractKolAssistContentFromPartialJSON(t *testing.T) {
 	t.Parallel()