feat: circle button

ui/src/styles/STYLE_README.md

@@ -444,6 +444,12 @@ Tailwind v4 的 `border` 只设置边框宽度和样式，不提供 `--tw-border
 所有 `el-button` 的 `:active` 和 `.is-active` 视觉统一复用各自的 hover 样式，不额外加深背景、
 边框或文字颜色；普通、plain、text、link、circle 及各语义类型按钮均遵循该规则。
 
+圆形按钮统一使用 `circle`，通过 `size="small"`、默认尺寸、`size="large"` 分别选择
+24px、32px、40px，不在业务样式或工具类中重复设置对应的宽高。全局保留
+`.el-button.is-circle` 的 `height: var(--el-button-size, var(--el-component-size))`，抵消普通按钮的
+`height: auto`。Element Plus 默认尺寸未定义 `--el-button-size`，必须回退到 32px 的
+`--el-component-size`，避免高度由内容和内边距撑开；业务需要的内边距和禁用颜色单独保留。
+
 Tree 的 `.el-tree-node__content` 统一保留 4px 底部间距，使同级节点及展开后的父子节点行
 保持一致间距；规则维护在 `element-plus.scss` 的 tree 分组。
 

ui/src/styles/app.scss

@@ -166,6 +166,29 @@ h6 {
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
 }
 
+/* conversation 生成input */
+.mk-conversation-input {
+  background: white;
+  border-radius: 16px;
+  padding: 12px;
+  .el-textarea__inner {
+    background: transparent;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+  }
+}
+
+/* link */
+.mk-link {
+  color: var(--mk-primary);
+  cursor: pointer;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 /* radio */
 // 卡片内单选：文字在左，选择框在右并垂直居中。
 .mk-card-radio.el-radio {
@@ -208,16 +231,6 @@ h6 {
   }
 }
 
-/* link */
-.mk-link {
-  color: var(--mk-primary);
-  cursor: pointer;
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
 /* rank */
 .mk-rank {
   align-items: center;

ui/src/styles/element-plus.scss

@@ -137,14 +137,30 @@
     }
   }
   &.is-circle {
-    height: var(--el-button-size);
-    &:hover,
-    &:active,
-    &.is-active {
-      box-shadow: var(--el-box-shadow-lighter);
-      color: var(--el-text-color-primary);
-      background: white;
-      border-color: var(--el-border-color);
+    width: 32px;
+    height: 32px;
+    --el-button-hover-text-color: var(--el-text-color-primary);
+    --el-button-hover-bg-color: white;
+    --el-button-hover-border-color: var(--el-border-color);
+    &.el-button--large {
+      width: var(--el-button-size) !important;
+      height: var(--el-button-size) !important;
+    }
+    &:not(.is-disabled) {
+      &:hover,
+      &:active,
+      &.is-active {
+        box-shadow: var(--el-box-shadow-lighter);
+      }
+    }
+    &.el-button--primary {
+      --el-button-hover-text-color: white;
+      --el-button-hover-bg-color: var(--el-color-primary-light-1) !important;
+      --el-button-hover-border-color: var(--el-color-primary-light-1) !important;
+      &.is-disabled {
+        --el-button-disabled-bg-color: var(--mk-N400);
+        --el-button-disabled-border-color: var(--mk-N400);
+      }
     }
   }
   &.is-text.is-has-bg:not(.is-disabled) {
@@ -1178,6 +1194,7 @@
 
 /* textarea */
 .el-textarea {
+  --el-input-placeholder-color: var(--mk-N500);
   --el-input-text-color: var(--el-text-color-primary);
   &:has(.el-input__inner[readonly]) {
     --el-input-focus-border-color: var(--el-input-border-color);

ui/src/views/knowledge/knowledge-card/action-dropdown/mcp-config-action/KnowledgeMcpConfigDialog.vue

@@ -29,7 +29,7 @@ defineExpose({ open })
       <el-input v-model="config" :autosize="{ minRows: 8, maxRows: 24 }" disabled type="textarea" />
       <!-- 复制 MCP 配置 -->
       <el-button
-        class="group-hover-visible absolute right-3 top-3 z-10 h-8 shadow-md"
+        class="group-hover-visible absolute right-3 top-3 z-10 shadow-md"
         circle
         title="复制配置"
         :disabled="!config"

ui/src/views/tool/tool-card/action-dropdown/mcp-config-action/McpConfigDialog.vue

@@ -22,7 +22,8 @@ defineExpose({ open })
   <MkDialog v-model="visible" title="MCP 配置详情" @closed="emit('closed')">
     <div class="group mcp-config-detail relative">
       <el-input v-model="config" :autosize="{ minRows: 8, maxRows: 24 }" disabled type="textarea" />
-      <el-button class="group-hover-visible absolute right-3 top-3 z-10 h-8 shadow-md" circle title="复制配置" @click="copyText(config)">
+      <!-- 复制 MCP 配置 -->
+      <el-button class="group-hover-visible absolute right-3 top-3 z-10 shadow-md" circle title="复制配置" @click="copyText(config)">
         <MkIcon name="icon_copy_outlined" />
       </el-button>
     </div>

ui/src/views/tool/tool-form/component/python-code/PromptGenerate.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, reactive, ref, useTemplateRef, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { Loading } from '@element-plus/icons-vue'
+import { Loading, Top } from '@element-plus/icons-vue'
 import type { ScrollbarInstance } from 'element-plus'
-import ChatInput from '@/conversation-panel/chat-input/index.vue'
 import ApplicationApi from '@/api/admin/workspace/application/application'
 import SelectModel from '@/components/business/select-model/index.vue'
 import type { ModelItem, ModelProviderItem, PromptGenerateMessage, PromptGeneratePayload } from '@/api/types'
@@ -29,7 +28,6 @@ const PROMPT_TEMPLATE = `请根据用户描述生成一个完整的 AI 角色人
 const visible = ref(false)
 const loading = ref(false)
 const inputValue = ref('')
-const chatInputRef = useTemplateRef<InstanceType<typeof ChatInput>>('chatInputRef')
 
 const applicationId = ref('')
 const activeModelId = ref('')
@@ -110,7 +108,7 @@ async function generate(regenerate = false) {
   lastRequestMessages.value = requestMessages
   const answer = reactive<PromptGenerateMessage>({ content: '', role: 'ai' })
   messages.value = [...requestMessages, answer]
-  if (!regenerate) chatInputRef.value?.clear()
+  if (!regenerate) inputValue.value = ''
   loading.value = true
   const controller = new AbortController()
   abortController = controller
@@ -134,6 +132,13 @@ async function generate(regenerate = false) {
   }
 }
 
+// 主题输入：回车发送，Shift+Enter 换行，中文输入法确认时不提交。
+function handleInputKeydown(event: KeyboardEvent) {
+  if (event.isComposing || event.key !== 'Enter' || event.shiftKey) return
+  event.preventDefault()
+  generate()
+}
+
 function stopGenerate() {
   abortController?.abort()
 }
@@ -179,17 +184,57 @@ onBeforeUnmount(() => abortController?.abort())
         <el-button class="ml-0!" :disabled="!activeModelId" @click="generate(true)">重新生成</el-button>
       </div>
 
-      <ChatInput
-        ref="chatInputRef"
-        v-model="inputValue"
-        placeholder="请输入提示词主题"
-        :maxlength="100000"
-        :loading="loading"
-        :submit-disabled="!activeModelId || !applicationId"
-        paste-as-text
-        @submit="generate()"
-        @stop="stopGenerate"
-      />
+      <div class="prompt-input overflow-hidden rounded-xl border bg-white transition-colors hover:border-primary focus-within:border-primary">
+        <el-input
+          v-model="inputValue"
+          type="textarea"
+          resize="none"
+          :autosize="{ minRows: 1, maxRows: 10 }"
+          placeholder="请输入提示词主题"
+          :maxlength="100000"
+          @keydown="handleInputKeydown"
+        />
+        <div class="flex justify-end px-2 pb-2 pt-1">
+          <!-- 停止生成提示词 -->
+          <el-button v-if="loading" class="input-action" circle size="small" type="primary" @click="stopGenerate">
+            <MkIcon name="icon_stop_filled" />
+          </el-button>
+          <!-- 发送主题并生成提示词 -->
+          <el-button
+            v-else
+            class="input-action"
+            circle
+            size="small"
+            type="primary"
+            :disabled="!inputValue.trim() || !activeModelId || !applicationId"
+            @click="generate()"
+          >
+            <MkIcon :icon="Top" :size="16" />
+          </el-button>
+        </div>
+      </div>
     </div>
   </MkDialog>
 </template>
+
+<style scoped lang="scss">
+/* 提示词主题输入与操作栏 */
+.prompt-input {
+  :deep(.el-textarea__inner) {
+    background: transparent;
+    border-radius: 0;
+    box-shadow: none;
+    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2) 0;
+  }
+
+  .input-action {
+    min-height: 0;
+    padding: 0;
+
+    &.is-disabled {
+      background-color: var(--mk-N400);
+      border-color: var(--mk-N400);
+    }
+  }
+}
+</style>