From 37d1e220ef2427689fdb2358d540853acabd719b Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 10 Nov 2026 21:32:04 +0800
Subject: [PATCH 1/2] fix: portal style

---
 ui/src/components/global/markdown-editor/md-editor.scss  | 3 +--
 .../components/content/items/failure.vue                 | 2 +-
 .../components/content/items/question/QuestionEditor.vue | 4 ++--
 .../components/content/items/question/index.vue          | 2 +-
 .../components/log-message-list/index.vue                | 4 ++--
 .../conversation-panel/components/message-list/index.vue | 9 +++++----
 ui/src/views/chat/login/index.vue                        | 8 +++++---
 7 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/ui/src/components/global/markdown-editor/md-editor.scss b/ui/src/components/global/markdown-editor/md-editor.scss
index 60a473579bb..bfb633a54b0 100644
--- a/ui/src/components/global/markdown-editor/md-editor.scss
+++ b/ui/src/components/global/markdown-editor/md-editor.scss
@@ -76,7 +76,6 @@
 /* Markdown 预览 */
 .mk-markdown-editor {
   .md-editor-preview {
-    font-size: inherit;
     margin: 0;
     padding: 0;
     word-break: break-word;
@@ -98,7 +97,7 @@
     p {
       padding: 0 !important;
       margin: 0 !important;
-      line-height: var(--mk-line-height-base) !important;
+      line-height: 24px;
     }
 
     sup[data-title] {
diff --git a/ui/src/conversation-panel/components/content/items/failure.vue b/ui/src/conversation-panel/components/content/items/failure.vue
index aac779b9a9c..e05faffc0dc 100644
--- a/ui/src/conversation-panel/components/content/items/failure.vue
+++ b/ui/src/conversation-panel/components/content/items/failure.vue
@@ -9,7 +9,7 @@ defineProps<{
 <template>
   <div class="flex-align-center gap-2">
     <MkIcon name="icon_warning_filled" class="text-danger!" />
-    <span>{{ content.content || '发生错误' }}</span>
+    <span class="text-[16px]">{{ content.content || '发生错误' }}</span>
   </div>
 </template>
 
diff --git a/ui/src/conversation-panel/components/content/items/question/QuestionEditor.vue b/ui/src/conversation-panel/components/content/items/question/QuestionEditor.vue
index 9194cb988a6..8f75a55f118 100644
--- a/ui/src/conversation-panel/components/content/items/question/QuestionEditor.vue
+++ b/ui/src/conversation-panel/components/content/items/question/QuestionEditor.vue
@@ -28,9 +28,9 @@ function sendQuestion() {
       resize="none"
       class="question-editor-input"
     />
-    <div class="flex justify-end gap-3">
+    <div class="flex justify-end">
       <!-- 取消编辑 -->
-      <el-button class="min-w-20" @click="emit('cancel')">取消</el-button>
+      <el-button plain class="min-w-20" @click="emit('cancel')">取消</el-button>
       <!-- 发送编辑后的提问 -->
       <el-button type="primary" class="min-w-20" :disabled="disabled || !questionDraft.trim()" @click="sendQuestion">发送</el-button>
     </div>
diff --git a/ui/src/conversation-panel/components/content/items/question/index.vue b/ui/src/conversation-panel/components/content/items/question/index.vue
index a0fced537d5..036690b24d9 100644
--- a/ui/src/conversation-panel/components/content/items/question/index.vue
+++ b/ui/src/conversation-panel/components/content/items/question/index.vue
@@ -132,7 +132,7 @@ function getAttachmentDescription(file: QuestionAttachment) {
       </template>
     </div>
     <QuestionEditor v-if="editing" :content="content.content ?? ''" :disabled="!canEdit" @cancel="editing = false" @send="sendEditedQuestion" />
-    <div v-else-if="content.content" class="mk-gray-card-lg ml-auto w-fit max-w-full py-3! whitespace-pre-wrap wrap-anywhere">
+    <div v-else-if="content.content" class="mk-gray-card-lg text-[16px] ml-auto w-fit max-w-full py-3! whitespace-pre-wrap wrap-anywhere">
       {{ content.content }}
     </div>
     <div
diff --git a/ui/src/conversation-panel/components/log-message-list/index.vue b/ui/src/conversation-panel/components/log-message-list/index.vue
index c78880ea18a..575d0d05416 100644
--- a/ui/src/conversation-panel/components/log-message-list/index.vue
+++ b/ui/src/conversation-panel/components/log-message-list/index.vue
@@ -24,7 +24,7 @@ const showUserAvatar = computed(() => appInfo.value?.show_user_avatar)
     <template v-for="(msg, i) in messages" :key="msg.id || i">
       <!-- 用户提问靠右：头像独占一行在上，提问容器在下方靠右收缩 -->
       <div v-if="msg.role === 'USER'">
-        <div v-if="showUserAvatar" class="text-right">
+        <div v-if="showUserAvatar" class="text-right mb-3">
           <el-avatar v-if="userAvatar" class="bg-transparent!" shape="square" :size="24">
             <img :src="userAvatar" alt="" />
           </el-avatar>
@@ -35,7 +35,7 @@ const showUserAvatar = computed(() => appInfo.value?.show_user_avatar)
         <ContentList :content-list="msg.content" />
       </div>
       <div v-else>
-        <ApplicationIcon v-if="showAvatar" :icon="avatar" :size="24" class="shrink-0" />
+        <ApplicationIcon v-if="showAvatar" :icon="avatar" :size="24" class="shrink-0 mb-1" />
         <ContentList :content-list="msg.content" />
         <!-- 助手消息底部信息栏(知识来源/执行详情/tokens/耗时) -->
         <LogMessageFooter
diff --git a/ui/src/conversation-panel/components/message-list/index.vue b/ui/src/conversation-panel/components/message-list/index.vue
index f1cff99672f..e71db0951e4 100644
--- a/ui/src/conversation-panel/components/message-list/index.vue
+++ b/ui/src/conversation-panel/components/message-list/index.vue
@@ -47,7 +47,7 @@ const showUserAvatar = computed(() => appInfo.value?.show_user_avatar)
     <template #prepend>
       <!-- 开场白在空会话或历史全部加载后显示，固定在会话最前 -->
       <div v-if="!isShared && prologue && (!messages.length || !hasMore)">
-        <ApplicationIcon v-if="showAvatar" :icon="avatar" :size="24" class="shrink-0" />
+        <ApplicationIcon v-if="showAvatar" :icon="avatar" :size="24" class="shrink-0 mb-3" />
         <PrologueContent :prologue="prologue" :app-info="appInfo" class="mb-3" />
       </div>
     </template>
@@ -55,7 +55,7 @@ const showUserAvatar = computed(() => appInfo.value?.show_user_avatar)
       <ShareMessageRow :active="isShared" :record-id="shareLink?.messageRecordIds.value[i]">
         <!-- 用户提问靠右：头像独占一行在上，提问容器在下方靠右收缩 -->
         <div v-if="msg.role === 'USER'">
-          <div v-if="showUserAvatar" class="text-right">
+          <div v-if="showUserAvatar" class="text-right mb-2">
             <el-avatar v-if="userAvatar" class="bg-transparent!" shape="square" :size="24">
               <img :src="userAvatar" alt="" />
             </el-avatar>
@@ -66,12 +66,13 @@ const showUserAvatar = computed(() => appInfo.value?.show_user_avatar)
           <ContentList :content-list="msg.content" />
         </div>
         <template v-else>
-          <ApplicationIcon v-if="showAvatar" :icon="avatar" :size="24" class="shrink-0" />
+          <!-- 智能体头像 -->
+          <ApplicationIcon v-if="showAvatar" :icon="avatar" :size="24" class="shrink-0 mb-3" />
           <ContentList :content-list="msg.content" />
           <!-- 助手消息结束后显示底部信息栏(知识来源/执行详情/tokens/耗时) -->
           <MessageFooter
             class="mt-3"
-            v-if="(!isShared && msg.role === 'ASSISTANT' && (msg.write_ed || msg.record))&&!streamLoading"
+            v-if="!isShared && msg.role === 'ASSISTANT' && (msg.write_ed || msg.record) && !streamLoading"
             :message="msg"
             @resize="scrollRef?.followBottom()"
           />
diff --git a/ui/src/views/chat/login/index.vue b/ui/src/views/chat/login/index.vue
index e0f0468af1f..b405238f038 100644
--- a/ui/src/views/chat/login/index.vue
+++ b/ui/src/views/chat/login/index.vue
@@ -155,13 +155,15 @@ const goBack = () => {
       <ApplicationIcon :icon="auth.authProfile?.logo" :size="32" class="shrink-0" />
       <h2 class="max-w-full truncate" :title="loginTitle">{{ loginTitle }}</h2>
     </div>
-    <el-card class="chat-login__card w-100">
+    <el-card class="chat-login__card w-100" body-class="flex-column h-full">
       <!-- 返回上一页 -->
-      <el-button text v-if="!enableAuth" @click="goBack" class="-ml-1 mb-4 text-N900!">
+      <el-button text v-if="!enableAuth" @click="goBack" class="-ml-1 mb-4 shrink-0 self-start text-N900!">
         <MkIcon :icon="ArrowLeft" />
         <span>返回</span>
       </el-button>
-      <LoginModePanel v-if="!isClientLoggingIn" :login-config="loginConfig" :login-service="loginService" />
+      <div v-if="!isClientLoggingIn" class="min-h-0 flex-1">
+        <LoginModePanel :login-config="loginConfig" :login-service="loginService" />
+      </div>
     </el-card>
   </div>
 </template>

From a9563de12a76dcab40dc2baad6283e62cc3d2dbe Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 10 Nov 2026 21:42:25 +0800
Subject: [PATCH 2/2] feat: aside resizable

---
 ui/src/components/COMPONENT_README.md         |  3 +
 .../global/mk-view-layout/LayoutAside.vue     | 92 ++++++++++++++++++-
 .../global/mk-view-layout/index.vue           | 14 ++-
 ui/src/views/application/index.vue            |  2 +-
 ui/src/views/document-detail/index.vue        |  2 +-
 ui/src/views/knowledge/index.vue              |  2 +-
 ui/src/views/model/index.vue                  |  2 +-
 ui/src/views/tool/index.vue                   |  2 +-
 8 files changed, 109 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/COMPONENT_README.md b/ui/src/components/COMPONENT_README.md
index 56481f9c3b4..caef7b965b7 100644
--- a/ui/src/components/COMPONENT_README.md
+++ b/ui/src/components/COMPONENT_README.md
@@ -190,6 +190,9 @@ Drawer 没有 `MkDialog` 的外壳挂载控制；需要按需挂载时，由业
 满高页面布局，`loading` 覆盖整个根节点。`title` 默认读取路由标题，传空字符串隐藏；
 提供 `aside` 插槽时才渲染侧栏，`collapsible` 开启内部折叠，`top` 放左右区域上方的内容。
 
+- `resizable` 默认 `false`，显式开启后可拖动侧栏右边界；`minLeftWidth` 默认使用主题展开宽度（240px），
+  `maxLeftWidth` 默认 400px，单位为 px。折叠后展开保留本次宽度，关闭开关恢复主题宽度；不持久化。
+  工作空间智能体、知识库、工具和模型资源列表显式开启，其他调用方按需配置。
 - `aside` 插槽提供 `title`、`Header`；默认插槽提供 `title`、`Header`、`Footer`。
 - 未显式渲染 `Header` 时自动显示标题；`Header`、`Footer` 固定，正文由内置 `el-scrollbar` 滚动。
   不重复包裹整个主内容区，局部树、Tabs 等可独立滚动。
diff --git a/ui/src/components/global/mk-view-layout/LayoutAside.vue b/ui/src/components/global/mk-view-layout/LayoutAside.vue
index 01cf0b519ba..9ec1092a7db 100644
--- a/ui/src/components/global/mk-view-layout/LayoutAside.vue
+++ b/ui/src/components/global/mk-view-layout/LayoutAside.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { computed, Fragment, h, isVNode, ref, type FunctionalComponent, type VNode, useSlots } from 'vue'
+import { computed, Fragment, h, isVNode, onBeforeUnmount, ref, watch, type FunctionalComponent, type VNode, useSlots } from 'vue'
 
 defineOptions({ name: 'LayoutAside' })
 
-const props = withDefaults(defineProps<{ collapsible?: boolean; title?: string }>(), { collapsible: false })
+const props = withDefaults(
+  defineProps<{ collapsible?: boolean; resizable?: boolean; minLeftWidth?: number; maxLeftWidth?: number; title?: string }>(),
+  { collapsible: false, resizable: false, maxLeftWidth: 400 },
+)
 
 defineSlots<{ default?: (props: { Header: FunctionalComponent; title: string }) => unknown }>()
 
@@ -12,6 +15,57 @@ const slots = useSlots()
 const isCollapsed = ref(false)
 const asideCollapsed = computed(() => props.collapsible && isCollapsed.value)
 
+// Tailwind 的主题别名在根节点解析，拖动时需在当前侧栏覆盖宽度类直接读取的 Token。
+const asideRef = ref<HTMLElement>()
+const leftWidth = ref(props.minLeftWidth)
+const isResizing = ref(false)
+const asideStyle = computed(() =>
+  props.resizable && leftWidth.value !== undefined ? { '--spacing-sidebar-expanded': `${leftWidth.value}px` } : undefined,
+)
+let stopResizing: (() => void) | undefined
+
+function startResizing(event: MouseEvent) {
+  if (!props.resizable || asideCollapsed.value || event.button !== 0 || !asideRef.value) return
+  stopResizing?.()
+  event.preventDefault()
+  const startX = event.clientX
+  const startWidth = asideRef.value.getBoundingClientRect().width
+  const themeWidth = Number.parseFloat(getComputedStyle(asideRef.value.parentElement!).getPropertyValue('--mk-sidebar-expanded-width'))
+  const minWidth = props.minLeftWidth ?? themeWidth
+  const maxWidth = Math.max(minWidth, props.maxLeftWidth)
+  const previousUserSelect = document.body.style.userSelect
+  const previousCursor = document.body.style.cursor
+  isResizing.value = true
+  document.body.style.userSelect = 'none'
+  document.body.style.cursor = 'col-resize'
+
+  function resizeAside(moveEvent: MouseEvent) {
+    leftWidth.value = Math.max(minWidth, Math.min(maxWidth, startWidth + moveEvent.clientX - startX))
+  }
+
+  stopResizing = () => {
+    isResizing.value = false
+    document.body.style.userSelect = previousUserSelect
+    document.body.style.cursor = previousCursor
+    document.removeEventListener('mousemove', resizeAside)
+    document.removeEventListener('mouseup', finishResizing)
+    window.removeEventListener('blur', finishResizing)
+    stopResizing = undefined
+  }
+  function finishResizing() {
+    stopResizing?.()
+  }
+  document.addEventListener('mousemove', resizeAside)
+  document.addEventListener('mouseup', finishResizing)
+  window.addEventListener('blur', finishResizing)
+}
+
+watch(
+  () => [props.resizable, asideCollapsed.value],
+  () => stopResizing?.(),
+)
+onBeforeUnmount(() => stopResizing?.())
+
 function flattenSlotNodes(children: unknown): VNode[] {
   const childNodes = Array.isArray(children) ? children : [children]
 
@@ -42,7 +96,12 @@ function toggleAside(event: MouseEvent) {
 </script>
 
 <template>
-  <div class="group relative flex h-full shrink-0 transition-[width] duration-200 ease-out" :class="asideCollapsed ? '' : 'w-sidebar-expanded'">
+  <div
+    ref="asideRef"
+    class="group relative flex h-full shrink-0 transition-[width] duration-200 ease-out"
+    :class="[asideCollapsed ? '' : 'w-sidebar-expanded', { 'aside-resizing': isResizing }]"
+    :style="asideStyle"
+  >
     <aside
       class="h-full overflow-hidden border-r transition-[width] duration-200 ease-out"
       :class="asideCollapsed ? 'w-0 border-none' : 'w-sidebar-expanded'"
@@ -51,6 +110,9 @@ function toggleAside(event: MouseEvent) {
         <LayoutAsideContent />
       </div>
     </aside>
+    <!-- 拖动调整侧栏宽度 -->
+    <div v-if="props.resizable && !asideCollapsed" class="aside-resize-handle" :class="{ 'is-resizing': isResizing }" @mousedown="startResizing" />
+    <!-- 展开或收起侧栏 -->
     <MkTooltip v-if="props.collapsible" :content="asideCollapsed ? '展开' : '收起'" placement="right">
       <button
         type="button"
@@ -67,3 +129,27 @@ function toggleAside(event: MouseEvent) {
     </MkTooltip>
   </div>
 </template>
+
+<style scoped>
+.aside-resizing,
+.aside-resizing > aside {
+  transition: none;
+}
+
+.aside-resize-handle {
+  position: absolute;
+  inset: 0 -2px 0 auto;
+  z-index: 1;
+  width: 4px;
+  cursor: col-resize;
+}
+
+.aside-resize-handle:hover::after,
+.aside-resize-handle.is-resizing::after {
+  position: absolute;
+  inset: 0 1px 0 auto;
+  width: 1px;
+  content: '';
+  background: var(--el-color-primary);
+}
+</style>
diff --git a/ui/src/components/global/mk-view-layout/index.vue b/ui/src/components/global/mk-view-layout/index.vue
index b581a2e93b8..b352ac12fce 100644
--- a/ui/src/components/global/mk-view-layout/index.vue
+++ b/ui/src/components/global/mk-view-layout/index.vue
@@ -22,7 +22,10 @@ interface ScrollData {
   scrollTop: number
 }
 
-const props = withDefaults(defineProps<{ collapsible?: boolean; loading?: boolean; title?: string }>(), { collapsible: false, loading: false })
+const props = withDefaults(
+  defineProps<{ collapsible?: boolean; resizable?: boolean; minLeftWidth?: number; maxLeftWidth?: number; loading?: boolean; title?: string }>(),
+  { collapsible: false, resizable: false, loading: false },
+)
 
 const emit = defineEmits<{ scroll: [data: ScrollData] }>()
 
@@ -128,7 +131,14 @@ defineExpose({ getScrollContainer, setScrollTop })
     </div>
 
     <div class="flex min-h-0 flex-1">
-      <LayoutAside v-if="$slots.aside" :collapsible="props.collapsible" :title="title">
+      <LayoutAside
+        v-if="$slots.aside"
+        :collapsible="props.collapsible"
+        :resizable="props.resizable"
+        :min-left-width="props.minLeftWidth"
+        :max-left-width="props.maxLeftWidth"
+        :title="title"
+      >
         <template #default="{ Header, title: asideTitle }">
           <slot name="aside" :Header="Header" :title="asideTitle" />
         </template>
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index 775def740d8..805fa7acc1b 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -197,7 +197,7 @@ function handleBatchDelete() {
 </script>
 
 <template>
-  <MkViewLayout class="workspace-application-view" collapsible>
+  <MkViewLayout class="workspace-application-view" collapsible resizable>
     <template #aside="{ title, Header }">
       <component :is="Header">
         <h4>{{ title }}</h4>
diff --git a/ui/src/views/document-detail/index.vue b/ui/src/views/document-detail/index.vue
index 4cd06224531..8594295e644 100644
--- a/ui/src/views/document-detail/index.vue
+++ b/ui/src/views/document-detail/index.vue
@@ -264,7 +264,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <MkViewLayout ref="layoutRef" title="" :loading="loading" collapsible class="[&_aside+button]:top-4!">
+  <MkViewLayout ref="layoutRef" title="" :loading="loading" collapsible resizable class="[&_aside~button]:top-4!">
     <template #top>
       <div class="flex-between gap-4" :inert="loading">
         <div class="flex-align-center min-w-0 gap-2">
diff --git a/ui/src/views/knowledge/index.vue b/ui/src/views/knowledge/index.vue
index 32402c34b6e..6368a7fe236 100644
--- a/ui/src/views/knowledge/index.vue
+++ b/ui/src/views/knowledge/index.vue
@@ -204,7 +204,7 @@ function handleBatchDelete() {
 </script>
 
 <template>
-  <MkViewLayout class="workspace-knowledge-view" collapsible>
+  <MkViewLayout class="workspace-knowledge-view" collapsible resizable>
     <template #aside="{ title, Header }">
       <component :is="Header">
         <h4>{{ title }}</h4>
diff --git a/ui/src/views/model/index.vue b/ui/src/views/model/index.vue
index b5fcad69f26..38721ec65be 100644
--- a/ui/src/views/model/index.vue
+++ b/ui/src/views/model/index.vue
@@ -90,7 +90,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <MkViewLayout class="workspace-model-view" collapsible>
+  <MkViewLayout class="workspace-model-view" collapsible resizable>
     <template #aside>
       <ModelProvider :model-value="currentProvider" :providers="modelProviders" @update:model-value="handleProviderSelect" />
     </template>
diff --git a/ui/src/views/tool/index.vue b/ui/src/views/tool/index.vue
index 2bd6ad40d0d..7412266b30c 100644
--- a/ui/src/views/tool/index.vue
+++ b/ui/src/views/tool/index.vue
@@ -218,7 +218,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <MkViewLayout class="workspace-tool-view" collapsible>
+  <MkViewLayout class="workspace-tool-view" collapsible resizable>
     <template #aside="{ title, Header }">
       <component :is="Header">
         <h4>{{ title }}</h4>