yg-yygl 0.0.1

package/dist/views/sys/llm/index.vue

@@ -0,0 +1,1762 @@
+<script setup lang="ts">
+import type {
+  LlmCallLog,
+  LlmKey,
+  LlmProvider,
+} from '../../../api/llm/types';
+import type {
+  BusinessFilterItem,
+  IconActionItem,
+  MetricCardItem,
+  TableColumn,
+} from '@udp/component-ui';
+
+import MarkdownIt from 'markdown-it';
+import hljs from 'highlight.js';
+
+import { computed, h, nextTick, onMounted, reactive, ref, watch } from 'vue';
+
+import {
+  BusinessAlert,
+  BusinessFilterBar,
+  Dialog,
+  Drawer,
+  IconActionGroup,
+  IconButton,
+  MetricCardGrid,
+  Table,
+  useTable,
+} from '@udp/component-ui';
+
+import {
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElMessage,
+  ElMessageBox,
+  ElOption,
+  ElSelect,
+  ElSwitch,
+  ElTag,
+} from 'element-plus';
+
+import { getDicItemListByDicCode } from '../../../api/dic';
+import {
+  chatWithLlm,
+  createLlmKey,
+  createLlmProvider,
+  deleteLlmKey,
+  deleteLlmProvider,
+  getLlmCallLogPage,
+  getLlmKeyPage,
+  getLlmProviderPage,
+  listEnabledLlmProviders,
+  streamChatWithLlm,
+  testLlmKey,
+  updateLlmKey,
+  updateLlmProvider,
+} from '../../../api/llm';
+import { StatusTag } from '../../../components/custom-tags';
+import { MainContainer } from '../../../components/main-container';
+
+const searchParams = ref<Record<string, any>>({});
+const sceneOptions = ref<{ label: string; value: string }[]>([]);
+const enabledProviders = ref<LlmProvider[]>([]);
+
+const keyDrawerVisible = ref(false);
+const keyDrawerType = ref<'add' | 'edit'>('add');
+
+const providerDrawerVisible = ref(false);
+const providerDialogVisible = ref(false);
+const providerDialogType = ref<'add' | 'edit'>('add');
+const providerLoading = ref(false);
+const providerRows = ref<LlmProvider[]>([]);
+const providerPage = reactive({ currentPage: 1, pageSize: 10, total: 0 });
+const providerSearchParams = ref<Record<string, any>>({});
+
+interface ChatMessage {
+  role: 'user' | 'assistant';
+  content: string;
+  loading?: boolean;
+}
+
+const chatVisible = ref(false);
+const chatLoading = ref(false);
+const chatKey = ref<LlmKey | null>(null);
+const chatMeta = ref('');
+const chatMessages = ref<ChatMessage[]>([]);
+const chatScrollRef = ref<HTMLElement | null>(null);
+
+const logDrawerVisible = ref(false);
+const logLoading = ref(false);
+const logKey = ref<LlmKey | null>(null);
+const logRows = ref<LlmCallLog[]>([]);
+const logPage = reactive({ currentPage: 1, pageSize: 10, total: 0 });
+const logSearchParams = ref<Record<string, any>>({});
+const logDetailVisible = ref(false);
+const logDetail = ref<LlmCallLog | null>(null);
+
+const providerOptions = computed(() =>
+  enabledProviders.value.map((item) => ({
+    label: item.providerName,
+    value: item.providerCode,
+  })),
+);
+
+const sceneLabelMap = computed(() => {
+  return sceneOptions.value.reduce<Record<string, string>>((map, item) => {
+    map[item.value] = item.label;
+    return map;
+  }, {});
+});
+
+const providerLabelMap = computed(() => {
+  return enabledProviders.value.reduce<Record<string, string>>((map, item) => {
+    map[item.providerCode] = item.providerName;
+    return map;
+  }, {});
+});
+
+const apiFormatOptions = [
+  { label: 'OpenAI Chat Completions', value: 'OPENAI_CHAT_COMPLETIONS' },
+  { label: 'OpenAI Responses API', value: 'OPENAI_RESPONSES' },
+  { label: 'Anthropic Messages', value: 'ANTHROPIC_MESSAGES' },
+];
+
+const authHeaderOptions = [
+  { label: 'Authorization: Bearer', value: 'AUTHORIZATION_BEARER' },
+  { label: 'x-api-key', value: 'X_API_KEY' },
+];
+
+const apiFormatLabel = (value?: string) =>
+  apiFormatOptions.find((item) => item.value === value)?.label || 'OpenAI Chat Completions';
+
+const authHeaderLabel = (value?: string) =>
+  authHeaderOptions.find((item) => item.value === value)?.label || 'Authorization: Bearer';
+
+const filterItems = computed<BusinessFilterItem[]>(() => [
+  {
+    prop: 'keyName',
+    type: 'input',
+    width: 240,
+    placeholder: '请输入 Key 名称',
+  },
+  {
+    prop: 'sceneCode',
+    label: '使用场景',
+    type: 'select',
+    options: sceneOptions.value,
+  },
+  {
+    prop: 'providerCode',
+    label: '供应商',
+    type: 'select',
+    options: providerOptions.value,
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    type: 'select',
+    options: [
+      { label: '启用', value: 1 },
+      { label: '停用', value: 0 },
+    ],
+  },
+]);
+
+const providerFilterItems: BusinessFilterItem[] = [
+  {
+    prop: 'providerName',
+    type: 'input',
+    width: 220,
+    placeholder: '请输入供应商名称',
+  },
+  {
+    prop: 'providerCode',
+    type: 'input',
+    width: 220,
+    placeholder: '请输入供应商编码',
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    type: 'select',
+    width: 140,
+    options: [
+      { label: '启用', value: 1 },
+      { label: '停用', value: 0 },
+    ],
+  },
+];
+
+const logFilterItems: BusinessFilterItem[] = [
+  {
+    prop: 'status',
+    label: '调用状态',
+    type: 'select',
+    width: 140,
+    options: [
+      { label: '成功', value: 1 },
+      { label: '失败', value: 0 },
+    ],
+  },
+  {
+    prop: 'streamFlag',
+    label: '调用方式',
+    type: 'select',
+    width: 140,
+    options: [
+      { label: '普通', value: 0 },
+      { label: '流式', value: 1 },
+    ],
+  },
+  {
+    prop: 'modelName',
+    type: 'input',
+    width: 220,
+    placeholder: '请输入模型名称',
+  },
+];
+
+const keyColumns = reactive<TableColumn[]>([
+  {
+    prop: 'keyName',
+    label: 'Key 信息',
+    minWidth: 210,
+    render: ({ row }: { row: LlmKey }) =>
+      h('div', { class: 'flex min-w-0 items-center gap-3' }, [
+        h(
+          'div',
+          {
+            class:
+              'bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-semibold',
+          },
+          'AI',
+        ),
+        h('div', { class: 'min-w-0' }, [
+          h('div', { class: 'truncate font-medium' }, row.keyName || '-'),
+          h(
+            'div',
+            { class: 'truncate text-xs text-muted-foreground' },
+            row.keyCode || '-',
+          ),
+        ]),
+      ]),
+  },
+  {
+    prop: 'sceneCode',
+    label: '使用场景',
+    width: 130,
+    render: ({ row }: { row: LlmKey }) =>
+      h('span', {}, sceneLabelMap.value[row.sceneCode] || row.sceneCode || '-'),
+  },
+  {
+    prop: 'providerCode',
+    label: '供应商',
+    width: 130,
+    render: ({ row }: { row: LlmKey }) =>
+      h(
+        'span',
+        {},
+        providerLabelMap.value[row.providerCode] || row.providerCode || '-',
+      ),
+  },
+  { prop: 'modelName', label: '模型', minWidth: 150 },
+  { prop: 'apiKey', label: 'API Key', minWidth: 160 },
+  {
+    prop: 'isDefault',
+    label: '默认',
+    width: 90,
+    render: ({ row }: { row: LlmKey }) =>
+      h(ElTag, { type: row.isDefault ? 'success' : 'info' }, () =>
+        row.isDefault ? '默认' : '普通',
+      ),
+  },
+  {
+    prop: 'lastTestStatus',
+    label: '连通性',
+    width: 110,
+    render: ({ row }: { row: LlmKey }) => {
+      if (row.lastTestStatus === undefined || row.lastTestStatus === null) {
+        return h('span', { class: 'text-muted-foreground' }, '未测试');
+      }
+      return h(
+        ElTag,
+        { type: row.lastTestStatus ? 'success' : 'danger' },
+        () => (row.lastTestStatus ? '成功' : '失败'),
+      );
+    },
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    width: 100,
+    render: ({ row }: { row: LlmKey }) =>
+      h(StatusTag, {
+        value: row.status || 0,
+        activeValue: 1,
+        inactiveValue: 0,
+        activeText: '启用',
+        inactiveText: '停用',
+      }),
+  },
+  { prop: 'createTime', label: '创建时间', minWidth: 150 },
+]);
+
+const providerColumns = reactive<TableColumn[]>([
+  {
+    prop: 'providerName',
+    label: '供应商名称',
+    minWidth: 160,
+    render: ({ row }: { row: LlmProvider }) =>
+      h('div', { class: 'flex min-w-0 items-center gap-3' }, [
+        h(
+          'div',
+          {
+            class:
+              'bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-semibold',
+          },
+          'AI',
+        ),
+        h('div', { class: 'min-w-0' }, [
+          h('div', { class: 'truncate font-medium' }, row.providerName || '-'),
+          h(
+            'div',
+            { class: 'truncate text-xs text-muted-foreground' },
+            row.providerCode || '-',
+          ),
+        ]),
+      ]),
+  },
+  {
+    prop: 'defaultBaseUrl',
+    label: '默认 Base URL',
+    minWidth: 260,
+  },
+  {
+    prop: 'apiFormat',
+    label: 'API 格式',
+    width: 190,
+    render: ({ row }: { row: LlmProvider }) =>
+      h(ElTag, { type: row.apiFormat === 'ANTHROPIC_MESSAGES' ? 'warning' : 'success' }, () =>
+        apiFormatLabel(row.apiFormat),
+      ),
+  },
+  {
+    prop: 'authHeader',
+    label: '认证 Header',
+    width: 150,
+    render: ({ row }: { row: LlmProvider }) =>
+      h('span', {}, authHeaderLabel(row.authHeader)),
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    width: 100,
+    render: ({ row }: { row: LlmProvider }) =>
+      h(StatusTag, {
+        value: row.status || 0,
+        activeValue: 1,
+        inactiveValue: 0,
+        activeText: '启用',
+        inactiveText: '停用',
+      }),
+  },
+  { prop: 'recordSort', label: '排序', width: 90 },
+  { prop: 'createTime', label: '创建时间', minWidth: 150 },
+]);
+
+const logColumns = reactive<TableColumn[]>([
+  { prop: 'createTime', label: '调用时间', minWidth: 160 },
+  { prop: 'modelName', label: '模型', minWidth: 150 },
+  {
+    prop: 'streamFlag',
+    label: '方式',
+    width: 90,
+    render: ({ row }: { row: LlmCallLog }) =>
+      h(ElTag, { type: row.streamFlag ? 'success' : 'info' }, () =>
+        row.streamFlag ? '流式' : '普通',
+      ),
+  },
+  {
+    prop: 'durationMs',
+    label: '耗时',
+    width: 100,
+    render: ({ row }: { row: LlmCallLog }) =>
+      h('span', {}, row.durationMs === undefined ? '-' : `${row.durationMs}ms`),
+  },
+  {
+    prop: 'totalTokens',
+    label: 'Token',
+    width: 100,
+    render: ({ row }: { row: LlmCallLog }) => h('span', {}, row.totalTokens ?? '-'),
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    width: 90,
+    render: ({ row }: { row: LlmCallLog }) =>
+      h(ElTag, { type: row.status ? 'success' : 'danger' }, () =>
+        row.status ? '成功' : '失败',
+      ),
+  },
+  { prop: 'errorMessage', label: '错误信息', minWidth: 220 },
+]);
+
+const keyCardOptions = ref({
+  title: 'keyName',
+  icon: 'carbon:machine-learning-model',
+  columns: [
+    { prop: 'keyCode', label: 'Key 编码', className: 'w-full' },
+    { prop: 'modelName', label: '模型', className: 'w-full' },
+    {
+      prop: 'sceneCode',
+      label: '使用场景',
+      className: 'w-full',
+      render: ({ row }: { row: LlmKey }) =>
+        h('span', {}, sceneLabelMap.value[row.sceneCode] || row.sceneCode),
+    },
+    {
+      prop: 'providerCode',
+      label: '供应商',
+      className: 'w-full',
+      render: ({ row }: { row: LlmKey }) =>
+        h('span', {}, providerLabelMap.value[row.providerCode] || row.providerCode),
+    },
+  ],
+  badge: {
+    prop: 'status',
+    label: '状态',
+    render: ({ row }: { row: LlmKey }) =>
+      h(
+        'div',
+        {
+          class:
+            row.status === 1
+              ? 'w-full h-full text-green-600 text-sm bg-green-100 rounded-es-[calc(var(--radius)+6px)] rounded-se-[calc(var(--radius)+6px)] px-4 py-2'
+              : 'w-full h-full text-gray-500 text-sm bg-gray-100 rounded-es-[calc(var(--radius)+6px)] rounded-se-[calc(var(--radius)+6px)] px-4 py-2',
+        },
+        row.status === 1 ? '启用' : '停用',
+      ),
+  },
+  showActions: true,
+});
+
+const keyForm = reactive<LlmKey>({
+  keyCode: '',
+  keyName: '',
+  providerCode: '',
+  modelName: '',
+  sceneCode: 'default',
+  baseUrl: '',
+  apiKey: '',
+  status: 1,
+  isDefault: 0,
+  timeoutSeconds: 60,
+  streamTimeoutSeconds: 300,
+  recordSort: 0,
+  remark: '',
+});
+
+const providerForm = reactive<LlmProvider>({
+  providerCode: '',
+  providerName: '',
+  defaultBaseUrl: '',
+  apiFormat: 'OPENAI_CHAT_COMPLETIONS',
+  authHeader: 'AUTHORIZATION_BEARER',
+  openaiCompatible: 1,
+  status: 1,
+  recordSort: 0,
+  remark: '',
+});
+
+const chatForm = reactive({
+  message: '',
+  stream: true,
+});
+
+const md: MarkdownIt = new MarkdownIt({
+  html: false,
+  linkify: true,
+  typographer: true,
+  highlight(str: string, lang: string): string {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return `<pre class="hljs"><code>${hljs.highlight(str, { language: lang }).value}</code></pre>`;
+      } catch {}
+    }
+    return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
+  },
+});
+
+const renderMarkdown = (content: string) => md.render(content);
+
+function scrollToBottom() {
+  nextTick(() => {
+    const el = chatScrollRef.value;
+    if (el) el.scrollTop = el.scrollHeight;
+  });
+}
+
+watch(chatMessages, () => scrollToBottom(), { deep: true });
+
+const quickPrompts = [
+  '请用一句话回复 OK，并说明当前模型可用。',
+  '请总结 UDP 框架大模型 Key 管理应该关注的三个点。',
+  '请生成一段简短的 JSON 示例，包含 title 和 summary 字段。',
+];
+
+const keyApi = {
+  list: (params: any) => getLlmKeyPage(params),
+  delete: (id: string) => deleteLlmKey(id),
+};
+
+const {
+  loading,
+  data,
+  pagination,
+  refresh,
+  reset,
+  search,
+  deleteRow,
+  handleSizeChange,
+  handleCurrentPageChange,
+  handleSelectionChange,
+} = useTable({
+  api: keyApi,
+});
+
+const metricItems = computed<MetricCardItem[]>(() => {
+  const rows = data.value as LlmKey[];
+  const enabledCount = rows.filter((item) => item.status === 1).length;
+  const defaultCount = rows.filter((item) => Number(item.isDefault) === 1).length;
+  const failedTestCount = rows.filter((item) => item.lastTestStatus === 0).length;
+
+  return [
+    {
+      title: 'Key 总数',
+      value: pagination.total,
+      description: '全部分页结果',
+      label: `${rows.length} 条/当前页`,
+      tone: 'blue',
+      icon: 'carbon:machine-learning-model',
+    },
+    {
+      title: '已启用',
+      value: enabledCount,
+      description: '当前页统计',
+      tone: 'green',
+      icon: 'hx-line-built-in:checkbox-circle-line',
+    },
+    {
+      title: '默认 Key',
+      value: defaultCount,
+      description: '按场景优先匹配',
+      tone: 'purple',
+      icon: 'carbon:rule',
+    },
+    {
+      title: '连通失败',
+      value: failedTestCount,
+      description: '当前页最近测试',
+      tone: failedTestCount > 0 ? 'red' : 'green',
+      icon: 'hx-line-built-in:forbid-line',
+    },
+  ];
+});
+
+const pageAlerts = computed(() => {
+  const rows = data.value as LlmKey[];
+  const disabledDefaultCount = rows.filter(
+    (item) => item.status === 0 && Number(item.isDefault) === 1,
+  ).length;
+  const failedTestCount = rows.filter((item) => item.lastTestStatus === 0).length;
+  const alerts: Array<{
+    description: string;
+    title: string;
+    type: 'danger' | 'warning';
+  }> = [];
+
+  if (disabledDefaultCount > 0) {
+    alerts.push({
+      type: 'warning',
+      title: '默认 Key 提醒：',
+      description: `当前页有 ${disabledDefaultCount} 个默认 Key 处于停用状态，可能影响自动匹配。`,
+    });
+  }
+
+  if (failedTestCount > 0) {
+    alerts.push({
+      type: 'danger',
+      title: '连通性异常：',
+      description: `当前页有 ${failedTestCount} 个 Key 最近测试失败，请检查 API Key、模型或 Base URL。`,
+    });
+  }
+
+  return alerts;
+});
+
+const keyActionBtns: IconActionItem[] = [
+  {
+    key: 'chat',
+    label: '对话测试',
+    icon: 'carbon:chat',
+    access: ['llm.test'],
+    disabled: (row: LlmKey) => row.status === 0,
+    onClick: (row: LlmKey) => openChat(row),
+  },
+  {
+    key: 'connect',
+    label: '连通测试',
+    icon: 'carbon:network-4',
+    access: ['llm.key.test'],
+    disabled: (row: LlmKey) => row.status === 0,
+    onClick: (row: LlmKey) => testKey(row),
+  },
+  {
+    key: 'logs',
+    label: '调用日志',
+    icon: 'carbon:document-view',
+    access: ['llm.log.query'],
+    onClick: (row: LlmKey) => openLogs(row),
+  },
+  {
+    key: 'edit',
+    label: '编辑',
+    icon: 'hx-line-built-in:edit-line',
+    access: ['llm.key.update'],
+    onClick: (row: LlmKey) => openKeyDrawer(row),
+  },
+  {
+    key: 'delete',
+    label: '删除',
+    icon: 'hx-line-built-in:delete-bin-6-line',
+    type: 'danger',
+    access: ['llm.key.delete'],
+    onClick: (row: LlmKey) => deleteRow(row, true),
+  },
+];
+
+const providerActionBtns: IconActionItem[] = [
+  {
+    key: 'edit',
+    label: '编辑',
+    icon: 'hx-line-built-in:edit-line',
+    access: ['llm.provider.update'],
+    onClick: (row: LlmProvider) => openProviderDialog(row),
+  },
+  {
+    key: 'delete',
+    label: '删除',
+    icon: 'hx-line-built-in:delete-bin-6-line',
+    type: 'danger',
+    access: ['llm.provider.delete'],
+    onClick: (row: LlmProvider) => removeProvider(row),
+  },
+];
+
+const logActionBtns: IconActionItem[] = [
+  {
+    key: 'detail',
+    label: '查看详情',
+    icon: 'carbon:document-view',
+    onClick: (row: LlmCallLog) => openLogDetail(row),
+  },
+];
+
+function resetKeyForm() {
+  Object.assign(keyForm, {
+    id: undefined,
+    keyCode: '',
+    keyName: '',
+    providerCode: enabledProviders.value[0]?.providerCode || '',
+    modelName: '',
+    sceneCode: 'default',
+    baseUrl: '',
+    apiKey: '',
+    status: 1,
+    isDefault: 0,
+    timeoutSeconds: 60,
+    streamTimeoutSeconds: 300,
+    recordSort: 0,
+    remark: '',
+  });
+}
+
+function resetProviderForm() {
+  Object.assign(providerForm, {
+    id: undefined,
+    providerCode: '',
+    providerName: '',
+    defaultBaseUrl: '',
+    apiFormat: 'OPENAI_CHAT_COMPLETIONS',
+    authHeader: 'AUTHORIZATION_BEARER',
+    openaiCompatible: 1,
+    status: 1,
+    recordSort: 0,
+    remark: '',
+  });
+}
+
+function handleProviderApiFormatChange(value: string) {
+  providerForm.authHeader = value === 'ANTHROPIC_MESSAGES'
+    ? 'X_API_KEY'
+    : 'AUTHORIZATION_BEARER';
+  providerForm.openaiCompatible = value === 'ANTHROPIC_MESSAGES' ? 0 : 1;
+}
+
+async function loadScenes() {
+  const res = await getDicItemListByDicCode({
+    dicCode: 'llm_scene',
+    dicAttr: 'base',
+  } as any);
+  sceneOptions.value = res.map((item: any) => ({
+    label: item.itemValue,
+    value: item.itemCode,
+  }));
+}
+
+async function loadProviderOptions() {
+  enabledProviders.value = await listEnabledLlmProviders();
+}
+
+async function loadProviders() {
+  providerLoading.value = true;
+  try {
+    const res = await getLlmProviderPage({
+      model: { ...providerSearchParams.value },
+      current: providerPage.currentPage,
+      size: providerPage.pageSize,
+    });
+    providerRows.value = res.records || [];
+    providerPage.total = Number(res.total || 0);
+    await loadProviderOptions();
+  } finally {
+    providerLoading.value = false;
+  }
+}
+
+function handleFilterSearch(params: Record<string, any>) {
+  search(params);
+}
+
+function handleFilterReset() {
+  reset();
+}
+
+function handleProviderFilterSearch(params: Record<string, any>) {
+  providerPage.currentPage = 1;
+  providerSearchParams.value = params;
+  loadProviders();
+}
+
+function handleProviderFilterReset() {
+  providerPage.currentPage = 1;
+  providerSearchParams.value = {};
+  loadProviders();
+}
+
+function openKeyDrawer(row?: LlmKey | any) {
+  resetKeyForm();
+  keyDrawerType.value = row?.id ? 'edit' : 'add';
+  if (row) {
+    Object.assign(keyForm, row, { apiKey: '' });
+  }
+  keyDrawerVisible.value = true;
+}
+
+async function submitKey() {
+  await (keyDrawerType.value === 'edit' ? updateLlmKey(keyForm) : createLlmKey(keyForm));
+  ElMessage.success('保存成功');
+  keyDrawerVisible.value = false;
+  refresh();
+}
+
+function handleKeyDrawerClosed() {
+  keyDrawerVisible.value = false;
+}
+
+function openProviderDrawer() {
+  providerDrawerVisible.value = true;
+  loadProviders();
+}
+
+function openProviderDialog(row?: LlmProvider) {
+  resetProviderForm();
+  providerDialogType.value = row?.id ? 'edit' : 'add';
+  if (row) Object.assign(providerForm, row);
+  providerDialogVisible.value = true;
+}
+
+async function submitProvider() {
+  await (providerDialogType.value === 'edit'
+    ? updateLlmProvider(providerForm)
+    : createLlmProvider(providerForm));
+  ElMessage.success('保存成功');
+  providerDialogVisible.value = false;
+  await loadProviders();
+}
+
+async function removeProvider(row: LlmProvider) {
+  await ElMessageBox.confirm(`确认删除供应商 ${row.providerName}？`, '删除确认', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  });
+  await deleteLlmProvider(row.id!);
+  ElMessage.success('删除成功');
+  await loadProviders();
+}
+
+async function testKey(row: LlmKey) {
+  const res = await testLlmKey({ id: row.id, prompt: '请回复 OK' });
+  ElMessage.success(`测试成功，耗时 ${res.durationMs || 0}ms`);
+  refresh();
+}
+
+function openChat(row: LlmKey | any) {
+  chatKey.value = row;
+  chatForm.message = '';
+  chatForm.stream = true;
+  chatMessages.value = [];
+  chatMeta.value = `${providerLabelMap.value[row.providerCode] || row.providerCode} / ${row.modelName}`;
+  chatVisible.value = true;
+}
+
+function applyQuickPrompt(prompt: string) {
+  chatForm.message = prompt;
+}
+
+async function sendChat() {
+  if (!chatKey.value) return;
+  if (!chatForm.message) {
+    ElMessage.warning('请输入测试消息');
+    return;
+  }
+
+  const userMessage = chatForm.message;
+  chatMessages.value.push({ role: 'user', content: userMessage });
+  chatForm.message = '';
+  chatLoading.value = true;
+
+  const assistantMsg: ChatMessage = { role: 'assistant', content: '', loading: true };
+  chatMessages.value.push(assistantMsg);
+  scrollToBottom();
+
+  try {
+    if (chatForm.stream) {
+      await sendStreamChat(userMessage, assistantMsg);
+    } else {
+      const res = await chatWithLlm({
+        sceneCode: chatKey.value!.sceneCode,
+        keyCode: chatKey.value!.keyCode,
+        messages: [{ role: 'user', content: userMessage }],
+      });
+      assistantMsg.content = res.content || '';
+      assistantMsg.loading = false;
+      chatMeta.value = `${res.providerCode || chatKey.value!.providerCode} / ${res.model || chatKey.value!.modelName} / ${res.durationMs || 0}ms`;
+    }
+  } catch (e: any) {
+    assistantMsg.content = `调用失败: ${e.message || '未知错误'}`;
+    assistantMsg.loading = false;
+  } finally {
+    chatLoading.value = false;
+  }
+}
+
+async function sendStreamChat(userMessage: string, assistantMsg: ChatMessage) {
+  if (!chatKey.value) return;
+  await streamChatWithLlm(
+    {
+      sceneCode: chatKey.value.sceneCode,
+      keyCode: chatKey.value.keyCode,
+      messages: [{ role: 'user', content: userMessage }],
+    },
+    (chunk) => {
+      assistantMsg.content += chunk;
+    },
+  );
+  assistantMsg.loading = false;
+}
+
+function openLogs(row: LlmKey | any) {
+  logKey.value = row;
+  logPage.currentPage = 1;
+  logSearchParams.value = {};
+  logDrawerVisible.value = true;
+  loadKeyLogs();
+}
+
+async function loadKeyLogs() {
+  if (!logKey.value) return;
+  logLoading.value = true;
+  try {
+    const res = await getLlmCallLogPage({
+      model: {
+        ...logSearchParams.value,
+        keyCode: logKey.value.keyCode,
+        providerCode: logKey.value.providerCode,
+      },
+      current: logPage.currentPage,
+      size: logPage.pageSize,
+    });
+    logRows.value = res.records || [];
+    logPage.total = Number(res.total || 0);
+  } finally {
+    logLoading.value = false;
+  }
+}
+
+function handleLogFilterSearch(params: Record<string, any>) {
+  logPage.currentPage = 1;
+  logSearchParams.value = params;
+  loadKeyLogs();
+}
+
+function handleLogFilterReset() {
+  logPage.currentPage = 1;
+  logSearchParams.value = {};
+  loadKeyLogs();
+}
+
+function openLogDetail(row: LlmCallLog) {
+  logDetail.value = row;
+  logDetailVisible.value = true;
+}
+
+function handleProviderPageChange(page: number) {
+  providerPage.currentPage = page;
+  loadProviders();
+}
+
+function handleProviderSizeChange(size: number) {
+  providerPage.pageSize = size;
+  providerPage.currentPage = 1;
+  loadProviders();
+}
+
+function handleLogPageChange(page: number) {
+  logPage.currentPage = page;
+  loadKeyLogs();
+}
+
+function handleLogSizeChange(size: number) {
+  logPage.pageSize = size;
+  logPage.currentPage = 1;
+  loadKeyLogs();
+}
+
+onMounted(async () => {
+  await loadScenes();
+  await loadProviderOptions();
+});
+</script>
+
+<template>
+  <MainContainer>
+    <div class="flex h-full w-full flex-col overflow-hidden bg-background">
+      <BusinessFilterBar
+        v-model="searchParams"
+        :items="filterItems"
+        :loading="loading"
+        @search="handleFilterSearch"
+        @reset="handleFilterReset"
+      />
+      <div class="space-y-4 border-b px-4 py-4">
+        <MetricCardGrid :items="metricItems" />
+        <div v-if="pageAlerts.length > 0" class="space-y-3">
+          <BusinessAlert
+            v-for="alert in pageAlerts"
+            :key="`${alert.type}-${alert.description}`"
+            :description="alert.description"
+            :title="alert.title"
+            :type="alert.type"
+          />
+        </div>
+      </div>
+      <Table
+        :card-options="keyCardOptions"
+        :columns="keyColumns"
+        :data="data"
+        :loading="loading"
+        :pagination="pagination"
+        action-width="210px"
+        layout-type="table"
+        show-action
+        show-pagination
+        show-toolbar
+        show-top-actions
+        @current-page-change="handleCurrentPageChange"
+        @refresh="refresh"
+        @selection-change="handleSelectionChange"
+        @size-change="handleSizeChange"
+      >
+        <template #top-actions>
+          <div class="flex flex-wrap items-center gap-2">
+            <IconButton
+              v-access:code="['llm.key.add']"
+              icon-type="add"
+              type="primary"
+              @click="openKeyDrawer()"
+            >
+              新增 Key
+            </IconButton>
+            <IconButton
+              v-access:code="['llm.provider.query']"
+              icon="carbon:network-enterprise"
+              @click="openProviderDrawer"
+            >
+              供应商管理
+            </IconButton>
+          </div>
+        </template>
+
+        <template #action="{ row }">
+          <IconActionGroup :actions="keyActionBtns" :row="row" />
+        </template>
+
+        <template #card-actions="{ row, isHover }">
+          <div class="flex w-full items-center justify-between">
+            <div class="flex items-center">
+              <IconButton
+                :type="isHover ? 'primary' : 'default'"
+                v-access:code="['llm.test']"
+                icon="carbon:chat"
+                link
+                @click="openChat(row)"
+              >
+                对话
+              </IconButton>
+              <IconButton
+                :type="isHover ? 'primary' : 'default'"
+                v-access:code="['llm.log.query']"
+                icon="carbon:document-view"
+                link
+                @click="openLogs(row)"
+              >
+                日志
+              </IconButton>
+              <IconButton
+                :type="isHover ? 'primary' : 'default'"
+                v-access:code="['llm.key.update']"
+                icon-type="edit"
+                link
+                @click="openKeyDrawer(row)"
+              >
+                编辑
+              </IconButton>
+              <IconButton
+                :type="isHover ? 'danger' : 'default'"
+                v-access:code="['llm.key.delete']"
+                icon-type="delete"
+                link
+                @click="deleteRow(row, true)"
+              >
+                删除
+              </IconButton>
+            </div>
+          </div>
+        </template>
+      </Table>
+    </div>
+
+    <Drawer
+      v-model="keyDrawerVisible"
+      :title="keyDrawerType === 'edit' ? '编辑 Key' : '新增 Key'"
+      :type="keyDrawerType"
+      size="808px"
+      @closed="handleKeyDrawerClosed"
+      @confirm="submitKey"
+    >
+      <ElForm :model="keyForm" label-width="120px">
+        <ElFormItem label="Key 编码" required>
+          <ElInput v-model="keyForm.keyCode" />
+        </ElFormItem>
+        <ElFormItem label="Key 名称" required>
+          <ElInput v-model="keyForm.keyName" />
+        </ElFormItem>
+        <ElFormItem label="使用场景" required>
+          <ElSelect v-model="keyForm.sceneCode" class="w-full">
+            <ElOption
+              v-for="item in sceneOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem label="供应商" required>
+          <ElSelect v-model="keyForm.providerCode" class="w-full">
+            <ElOption
+              v-for="item in providerOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem label="模型名称" required>
+          <ElInput v-model="keyForm.modelName" />
+        </ElFormItem>
+        <ElFormItem label="Base URL">
+          <ElInput
+            v-model="keyForm.baseUrl"
+            placeholder="可选；填写后覆盖供应商默认 Base URL"
+          />
+          <div class="mt-1 text-xs text-muted-foreground">
+            不填时使用供应商默认 Base URL；再不配置时使用系统内置默认地址。
+          </div>
+        </ElFormItem>
+        <ElFormItem label="API Key" :required="keyDrawerType === 'add'">
+          <ElInput
+            v-model="keyForm.apiKey"
+            placeholder="编辑时留空表示保持原 Key"
+            show-password
+            type="password"
+          />
+        </ElFormItem>
+        <ElFormItem label="默认 Key">
+          <ElSwitch v-model="keyForm.isDefault" :active-value="1" :inactive-value="0" />
+        </ElFormItem>
+        <ElFormItem label="状态">
+          <ElSwitch v-model="keyForm.status" :active-value="1" :inactive-value="0" />
+        </ElFormItem>
+        <ElFormItem label="普通超时(秒)">
+          <ElInputNumber v-model="keyForm.timeoutSeconds" :min="1" />
+        </ElFormItem>
+        <ElFormItem label="流式超时(秒)">
+          <ElInputNumber v-model="keyForm.streamTimeoutSeconds" :min="1" />
+        </ElFormItem>
+        <ElFormItem label="排序">
+          <ElInputNumber v-model="keyForm.recordSort" :min="0" />
+        </ElFormItem>
+        <ElFormItem label="备注">
+          <ElInput v-model="keyForm.remark" type="textarea" />
+        </ElFormItem>
+      </ElForm>
+    </Drawer>
+
+    <Drawer
+      v-model="providerDrawerVisible"
+      hide-footer
+      icon="carbon:network-enterprise"
+      size="1080px"
+      title="供应商管理"
+    >
+      <div class="flex h-full w-full flex-col overflow-hidden bg-background">
+        <BusinessFilterBar
+          v-model="providerSearchParams"
+          :items="providerFilterItems"
+          :loading="providerLoading"
+          @reset="handleProviderFilterReset"
+          @search="handleProviderFilterSearch"
+        />
+        <Table
+          class="w-full flex-1"
+          :columns="providerColumns"
+          :data="providerRows"
+          :loading="providerLoading"
+          :pagination="providerPage"
+          action-width="120px"
+          layout-type="table"
+          show-action
+          :show-layout="false"
+          show-pagination
+          show-toolbar
+          show-top-actions
+          @current-page-change="handleProviderPageChange"
+          @refresh="loadProviders"
+          @size-change="handleProviderSizeChange"
+        >
+          <template #top-actions>
+            <div class="flex flex-wrap items-center gap-2">
+              <IconButton
+                v-access:code="['llm.provider.add']"
+                icon-type="add"
+                type="primary"
+                @click="openProviderDialog()"
+              >
+                新增供应商
+              </IconButton>
+            </div>
+          </template>
+
+          <template #action="{ row }">
+            <IconActionGroup :actions="providerActionBtns" :row="row" />
+          </template>
+        </Table>
+      </div>
+    </Drawer>
+
+    <Dialog
+      v-model="providerDialogVisible"
+      :title="providerDialogType === 'edit' ? '编辑供应商' : '新增供应商'"
+      :type="providerDialogType"
+      append-to-body
+      width="620px"
+      :z-index="3000"
+      @confirm="submitProvider"
+    >
+      <ElForm :model="providerForm" label-width="110px">
+        <ElFormItem label="供应商编码" required>
+          <ElInput v-model="providerForm.providerCode" />
+        </ElFormItem>
+        <ElFormItem label="供应商名称" required>
+          <ElInput v-model="providerForm.providerName" />
+        </ElFormItem>
+        <ElFormItem label="默认 Base URL">
+          <ElInput
+            v-model="providerForm.defaultBaseUrl"
+            placeholder="例如 https://api.openai.com/v1"
+          />
+          <div class="mt-1 text-xs text-muted-foreground">
+            作为该供应商下 Key 的默认调用地址；
+          </div>
+        </ElFormItem>
+        <ElFormItem label="API 格式">
+          <ElSelect
+            v-model="providerForm.apiFormat"
+            class="w-full"
+            popper-class="llm-provider-select-popper"
+            :teleported="true"
+            @change="handleProviderApiFormatChange"
+          >
+            <ElOption
+              v-for="item in apiFormatOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </ElSelect>
+          <div class="mt-1 text-xs text-muted-foreground">
+            Chat Completions 适配 DeepSeek、通义千问兼容模式等；Responses 和 Anthropic 使用各自原生格式。
+          </div>
+        </ElFormItem>
+        <ElFormItem label="认证 Header">
+          <ElSelect
+            v-model="providerForm.authHeader"
+            class="w-full"
+            popper-class="llm-provider-select-popper"
+            :teleported="true"
+          >
+            <ElOption
+              v-for="item in authHeaderOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </ElSelect>
+          <div class="mt-1 text-xs text-muted-foreground">
+            OpenAI 系使用 Authorization: Bearer；Anthropic 原生接口通常使用 x-api-key。
+          </div>
+        </ElFormItem>
+        <ElFormItem label="状态">
+          <ElSwitch v-model="providerForm.status" :active-value="1" :inactive-value="0" />
+        </ElFormItem>
+        <ElFormItem label="排序">
+          <ElInputNumber v-model="providerForm.recordSort" :min="0" />
+        </ElFormItem>
+        <ElFormItem label="备注">
+          <ElInput v-model="providerForm.remark" type="textarea" />
+        </ElFormItem>
+      </ElForm>
+    </Dialog>
+
+    <Dialog
+      v-model="chatVisible"
+      icon="carbon:chat"
+      title="对话测试"
+      type="page"
+      width="860px"
+      :show-cancel-button="false"
+      :show-confirm-button="false"
+    >
+      <div class="llm-chat-container">
+        <div class="llm-chat-info">
+          <div>
+            <div class="llm-chat-info-label">Key</div>
+            <div class="llm-chat-info-value">{{ chatKey?.keyName || '-' }}</div>
+          </div>
+          <div>
+            <div class="llm-chat-info-label">模型</div>
+            <div class="llm-chat-info-value">{{ chatKey?.modelName || '-' }}</div>
+          </div>
+          <div>
+            <div class="llm-chat-info-label">供应商</div>
+            <div class="llm-chat-info-value">
+              {{ chatKey ? providerLabelMap[chatKey.providerCode] || chatKey.providerCode : '-' }}
+            </div>
+          </div>
+          <div class="ml-auto flex items-center gap-2">
+            <ElSwitch v-model="chatForm.stream" active-text="流式" inactive-text="普通" size="small" />
+          </div>
+        </div>
+
+        <div ref="chatScrollRef" class="llm-chat-messages">
+          <div v-if="chatMessages.length === 0" class="llm-chat-empty">
+            <div class="llm-chat-empty-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>
+            </div>
+            <div class="llm-chat-empty-text">输入消息或选择快捷提示词开始测试</div>
+            <div class="llm-chat-empty-prompts">
+              <button
+                v-for="prompt in quickPrompts"
+                :key="prompt"
+                class="llm-quick-prompt"
+                @click="applyQuickPrompt(prompt)"
+              >
+                {{ prompt }}
+              </button>
+            </div>
+          </div>
+
+          <template v-else>
+            <div
+              v-for="(msg, idx) in chatMessages"
+              :key="idx"
+              :class="['llm-chat-bubble', msg.role === 'user' ? 'llm-chat-bubble-user' : 'llm-chat-bubble-ai']"
+            >
+              <div v-if="msg.role === 'assistant'" class="llm-chat-avatar llm-chat-avatar-ai">AI</div>
+              <div :class="['llm-chat-content', msg.role === 'user' ? 'llm-chat-content-user' : 'llm-chat-content-ai']">
+                <template v-if="msg.role === 'assistant'">
+                  <div v-if="msg.loading && !msg.content" class="llm-chat-typing">
+                    <span></span><span></span><span></span>
+                  </div>
+                  <div v-else :class="{ 'llm-chat-streaming': msg.loading }" v-html="renderMarkdown(msg.content)"></div>
+                </template>
+                <template v-else>{{ msg.content }}</template>
+              </div>
+              <div v-if="msg.role === 'user'" class="llm-chat-avatar llm-chat-avatar-user">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <div class="llm-chat-input">
+          <div class="llm-chat-input-wrap">
+            <ElInput
+              v-model="chatForm.message"
+              :rows="2"
+              placeholder="输入消息，Enter 发送，Shift+Enter 换行"
+              resize="none"
+              @keydown.enter.exact.prevent="sendChat"
+            />
+          </div>
+          <button
+            class="llm-chat-send-btn"
+            :disabled="chatLoading || !chatForm.message"
+            @click="sendChat"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
+          </button>
+        </div>
+      </div>
+    </Dialog>
+
+    <Drawer
+      v-model="logDrawerVisible"
+      hide-footer
+      icon="carbon:document-view"
+      size="980px"
+      title="调用日志"
+    >
+      <div class="flex h-full w-full flex-col overflow-hidden bg-background">
+        <div class="grid grid-cols-3 gap-3 border-b px-4 py-4 text-sm">
+          <div>
+            <div class="text-xs text-muted-foreground">Key</div>
+            <div class="mt-1 truncate font-medium">{{ logKey?.keyName || '-' }}</div>
+          </div>
+          <div>
+            <div class="text-xs text-muted-foreground">编码</div>
+            <div class="mt-1 truncate font-medium">{{ logKey?.keyCode || '-' }}</div>
+          </div>
+          <div>
+            <div class="text-xs text-muted-foreground">模型</div>
+            <div class="mt-1 truncate font-medium">{{ logKey?.modelName || '-' }}</div>
+          </div>
+        </div>
+        <BusinessFilterBar
+          v-model="logSearchParams"
+          :items="logFilterItems"
+          :loading="logLoading"
+          @reset="handleLogFilterReset"
+          @search="handleLogFilterSearch"
+        />
+        <Table
+          class="w-full flex-1"
+          :columns="logColumns"
+          :data="logRows"
+          :loading="logLoading"
+          :pagination="logPage"
+          action-width="90px"
+          layout-type="table"
+          show-action
+          :show-layout="false"
+          show-pagination
+          show-toolbar
+          @current-page-change="handleLogPageChange"
+          @refresh="loadKeyLogs"
+          @size-change="handleLogSizeChange"
+        >
+          <template #action="{ row }">
+            <IconActionGroup :actions="logActionBtns" :row="row" />
+          </template>
+        </Table>
+      </div>
+    </Drawer>
+
+    <Dialog
+      v-model="logDetailVisible"
+      title="调用详情"
+      icon="carbon:document-view"
+      append-to-body
+      width="760px"
+      :z-index="3000"
+      :show-confirm-button="false"
+    >
+      <div class="space-y-4 text-sm">
+        <div class="grid grid-cols-3 gap-3 rounded-md border bg-muted/30 p-3">
+          <div>
+            <div class="text-xs text-muted-foreground">状态</div>
+            <div class="mt-1 font-medium">{{ logDetail?.status ? '成功' : '失败' }}</div>
+          </div>
+          <div>
+            <div class="text-xs text-muted-foreground">耗时</div>
+            <div class="mt-1 font-medium">{{ logDetail?.durationMs || 0 }}ms</div>
+          </div>
+          <div>
+            <div class="text-xs text-muted-foreground">Token</div>
+            <div class="mt-1 font-medium">{{ logDetail?.totalTokens ?? '-' }}</div>
+          </div>
+        </div>
+        <div>
+          <div class="mb-2 font-medium">请求摘要</div>
+          <div class="log-detail-block">{{ logDetail?.requestSummary || '-' }}</div>
+        </div>
+        <div>
+          <div class="mb-2 font-medium">响应摘要</div>
+          <div class="log-detail-block">{{ logDetail?.responseSummary || '-' }}</div>
+        </div>
+        <div v-if="logDetail?.errorMessage">
+          <div class="mb-2 font-medium text-red-500">错误信息</div>
+          <div class="log-detail-block border-red-200 text-red-500">
+            {{ logDetail.errorMessage }}
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  </MainContainer>
+</template>
+
+<style lang="scss">
+.llm-provider-select-popper {
+  z-index: 3200 !important;
+}
+
+/* ---- Chat Container ---- */
+.llm-chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 520px;
+  overflow: hidden;
+}
+
+.llm-chat-info {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding: 10px 16px;
+  border-bottom: 1px solid hsl(var(--border));
+  background: hsl(var(--muted) / 0.3);
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.llm-chat-info-label {
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+  line-height: 1;
+  margin-bottom: 3px;
+}
+
+.llm-chat-info-value {
+  font-size: 13px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
+}
+
+/* ---- Messages Area ---- */
+.llm-chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 4px;
+}
+
+.llm-chat-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: hsl(var(--muted-foreground));
+}
+
+.llm-chat-empty-icon {
+  opacity: 0.25;
+  margin-bottom: 16px;
+}
+
+.llm-chat-empty-text {
+  font-size: 14px;
+  margin-bottom: 16px;
+}
+
+.llm-chat-empty-prompts {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  max-width: 520px;
+}
+
+/* ---- Chat Bubbles ---- */
+.llm-chat-bubble {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 16px;
+  align-items: flex-start;
+}
+
+.llm-chat-bubble-user {
+  flex-direction: row-reverse;
+}
+
+.llm-chat-avatar {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.llm-chat-avatar-ai {
+  background: hsl(var(--primary) / 0.1);
+  color: hsl(var(--primary));
+}
+
+.llm-chat-avatar-user {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+.llm-chat-content {
+  max-width: 75%;
+  padding: 10px 14px;
+  border-radius: 12px;
+  font-size: 14px;
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.llm-chat-content-user {
+  background: hsl(var(--primary));
+  color: white;
+  border-top-right-radius: 4px;
+}
+
+.llm-chat-content-ai {
+  background: hsl(var(--muted));
+  border-top-left-radius: 4px;
+}
+
+/* ---- Markdown Content ---- */
+.llm-chat-content-ai {
+  :deep(p) {
+    margin: 0 0 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  :deep(pre.hljs) {
+    border-radius: 6px;
+    padding: 12px;
+    margin: 8px 0;
+    overflow-x: auto;
+    font-size: 13px;
+    background: hsl(var(--background));
+  }
+
+  :deep(code) {
+    background: hsl(var(--background));
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 13px;
+  }
+
+  :deep(pre code) {
+    background: none;
+    padding: 0;
+  }
+
+  :deep(ul),
+  :deep(ol) {
+    padding-left: 20px;
+    margin: 4px 0;
+  }
+
+  :deep(blockquote) {
+    border-left: 3px solid hsl(var(--primary));
+    padding-left: 12px;
+    margin: 8px 0;
+    color: hsl(var(--muted-foreground));
+  }
+
+  :deep(table) {
+    border-collapse: collapse;
+    margin: 8px 0;
+    width: 100%;
+
+    th,
+    td {
+      border: 1px solid hsl(var(--border));
+      padding: 6px 12px;
+      text-align: left;
+    }
+
+    th {
+      background: hsl(var(--background));
+    }
+  }
+}
+
+/* ---- Streaming Cursor ---- */
+.llm-chat-streaming {
+  &::after {
+    content: '▊';
+    animation: blink 1s step-end infinite;
+    margin-left: 2px;
+    color: hsl(var(--primary));
+  }
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+/* ---- Typing Indicator ---- */
+.llm-chat-typing {
+  display: flex;
+  gap: 4px;
+  padding: 4px 0;
+
+  span {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: hsl(var(--muted-foreground));
+    animation: typing-bounce 1.4s infinite ease-in-out both;
+
+    &:nth-child(1) { animation-delay: 0s; }
+    &:nth-child(2) { animation-delay: 0.2s; }
+    &:nth-child(3) { animation-delay: 0.4s; }
+  }
+}
+
+@keyframes typing-bounce {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.6);
+    opacity: 0.4;
+  }
+
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* ---- Quick Prompts ---- */
+.llm-quick-prompt {
+  border-radius: 16px;
+  border: 1px solid hsl(var(--border));
+  background: transparent;
+  padding: 6px 14px;
+  font-size: 12px;
+  color: hsl(var(--foreground) / 0.7);
+  cursor: pointer;
+  transition: all 0.2s;
+  max-width: 280px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:hover {
+    border-color: hsl(var(--primary));
+    color: hsl(var(--primary));
+    background: hsl(var(--primary) / 0.05);
+  }
+}
+
+/* ---- Input Area ---- */
+.llm-chat-input {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+  padding-top: 12px;
+  border-top: 1px solid hsl(var(--border));
+  margin-top: 4px;
+}
+
+.llm-chat-input-wrap {
+  flex: 1;
+}
+
+.llm-chat-send-btn {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  border: none;
+  background: hsl(var(--primary));
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s;
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &:hover:not(:disabled) {
+    opacity: 0.85;
+  }
+}
+
+/* ---- Log Detail Block ---- */
+.log-detail-block {
+  min-height: 96px;
+  max-height: 360px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  border: 1px solid hsl(var(--border));
+  border-radius: 6px;
+  background: hsl(var(--background));
+  padding: 12px;
+}
+</style>