Skip to content

fix: drawer style #7588

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wangdan-fit2cloud merged 1 commit into from
Nov 2, 2026
Merged

fix: drawer style #7588

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ui/src/components/business/resource-authorization-drawer/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,12 +153,12 @@ defineExpose({ open })
</script>

<template>
<MkDrawer v-model="drawerVisible" title="资源授权" :size="920" @closed="handleClosed">
<MkDrawer v-model="drawerVisible" title="资源授权" class="mk-drawer-with-tabs" contentClass="pt-0" :size="920" @closed="handleClosed">
<el-tabs v-model="targetType" :before-leave="() => !submitting">
<el-tab-pane label="按用户组" name="user-group" />
<el-tab-pane label="按用户" name="user" />
</el-tabs>
<div class="mt-4">
<div class="mt-6">
<UserGroupAuthorization
ref="userGroupAuthorizationRef"
v-if="targetType === 'user-group' && targetId && workspaceId"
Expand Down
7 changes: 7 additions & 0 deletions ui/src/styles/element-plus.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -535,6 +535,7 @@
margin: 0;
padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5) calc(var(--spacing) * 4) calc(var(--spacing) * 6);
}

&__title {
font-weight: 500;
}
Expand All @@ -559,6 +560,12 @@
&.btt {
height: calc(100% - 60px) !important;
}
// 带有tabs的drawer，header不显示border-bottom
&.mk-drawer-with-tabs {
.el-drawer__header {
border-bottom: none;
}
}
}
/* dropdown */
.el-dropdown {
Expand Down
120 changes: 59 additions & 61 deletions ui/src/views/application-detail/overview/components/ApplicationRankingDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,68 +93,66 @@ onMounted(loadRanking)
</script>

<template>
<MkDrawer v-model="visible" title="排行榜详情" size="1000" @closed="emit('closed')">
<div :inert="loading">
<el-tabs v-model="activeKind" @tab-change="handleTabChange">
<el-tab-pane name="userTokens" label="Tokens 消耗 · Top 用户" />
<el-tab-pane name="questions" label="对话次数 · Top 用户" />
</el-tabs>
<div class="my-4 flex-between">
<div class="flex gap-3">
<MkSearchInput v-model="searchName" class="w-55!" @change="handleSearch" />
<MkDateRange :default-value="{ startTime: initialRange.start_time, endTime: initialRange.end_time }" @change="handleRangeChange" />
</div>
<!-- 导出当前筛选下的完整用户排行 -->
<el-button plain :loading="exporting" :disabled="loading" @click="handleExport">
<MkIcon name="icon_export_outlined" />
<span>导出</span>
</el-button>
<MkDrawer v-model="visible" title="排行榜详情" class="mk-drawer-with-tabs" contentClass="pt-0" size="1000" @closed="emit('closed')">
<el-tabs v-model="activeKind" @tab-change="handleTabChange">
<el-tab-pane name="userTokens" label="Tokens 消耗 · Top 用户" />
<el-tab-pane name="questions" label="对话次数 · Top 用户" />
</el-tabs>
<div class="mt-6 mb-4 flex-between">
<div class="flex gap-3">
<MkDateRange :default-value="{ startTime: initialRange.start_time, endTime: initialRange.end_time }" @change="handleRangeChange" />
<MkSearchInput v-model="searchName" class="w-55!" @change="handleSearch" />
</div>
<MkTable
v-loading="loading"
v-model:pagination-config="pagination"
:data="records"
row-key="chat_user_id"
@current-change="loadRanking"
@size-change="loadRanking"
>
<el-table-column label="排名" width="60">
<template #default="{ $index }">
<span
class="mk-rank"
:class="
(pagination.currentPage - 1) * pagination.pageSize + $index < 3
? `mk-rank-${(pagination.currentPage - 1) * pagination.pageSize + $index + 1}`
: 'text-N600'
"
>
{{ (pagination.currentPage - 1) * pagination.pageSize + $index + 1 }}
</span>
</template>
</el-table-column>
<el-table-column label="用户" min-width="140" show-overflow-tooltip>
<template #default="{ row }">{{ row.asker?.username || '-' }}</template>
</el-table-column>
<el-table-column :label="activeKind === 'userTokens' ? 'Tokens 消耗' : '对话次数'" min-width="125">
<template #default="{ row }">
{{ formatRankingValue(row) }}
</template>
</el-table-column>
<el-table-column label="占比" min-width="150">
<template #default="{ row }">
<el-progress v-if="aggregateTotal != null && getRankingValue(row) != null" :percentage="getRankingRatio(row)" />
<span v-else>—</span>
</template>
</el-table-column>
<el-table-column :label="activeKind === 'userTokens' ? '对话次数' : 'Tokens 消耗'" min-width="125">
<template #default="{ row }">
{{ formatRankingValue(row, activeKind === 'userTokens' ? 'questions' : 'userTokens') }}
</template>
</el-table-column>
<el-table-column label="均 Tokens/次" min-width="125">
<template #default="{ row }">{{ formatTokenNumber(getRankingAverage(row)) }}</template>
</el-table-column>
</MkTable>
<!-- 导出当前筛选下的完整用户排行 -->
<el-button plain :loading="exporting" :disabled="loading" @click="handleExport">
<MkIcon name="icon_export_outlined" />
<span>导出</span>
</el-button>
</div>
<MkTable
v-loading="loading"
v-model:pagination-config="pagination"
:data="records"
row-key="chat_user_id"
@current-change="loadRanking"
@size-change="loadRanking"
>
<el-table-column label="排名" width="60">
<template #default="{ $index }">
<span
class="mk-rank"
:class="
(pagination.currentPage - 1) * pagination.pageSize + $index < 3
? `mk-rank-${(pagination.currentPage - 1) * pagination.pageSize + $index + 1}`
: 'text-N600'
"
>
{{ (pagination.currentPage - 1) * pagination.pageSize + $index + 1 }}
</span>
</template>
</el-table-column>
<el-table-column label="用户" min-width="140" show-overflow-tooltip>
<template #default="{ row }">{{ row.asker?.username || '-' }}</template>
</el-table-column>
<el-table-column :label="activeKind === 'userTokens' ? 'Tokens 消耗' : '对话次数'" min-width="125">
<template #default="{ row }">
{{ formatRankingValue(row) }}
</template>
</el-table-column>
<el-table-column label="占比" min-width="150">
<template #default="{ row }">
<el-progress v-if="aggregateTotal != null && getRankingValue(row) != null" :percentage="getRankingRatio(row)" />
<span v-else>—</span>
</template>
</el-table-column>
<el-table-column :label="activeKind === 'userTokens' ? '对话次数' : 'Tokens 消耗'" min-width="125">
<template #default="{ row }">
{{ formatRankingValue(row, activeKind === 'userTokens' ? 'questions' : 'userTokens') }}
</template>
</el-table-column>
<el-table-column label="均 Tokens/次" min-width="125">
<template #default="{ row }">{{ formatTokenNumber(getRankingAverage(row)) }}</template>
</el-table-column>
</MkTable>
</MkDrawer>
</template>
6 changes: 3 additions & 3 deletions ui/src/views/home/components/ranking/RankingDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,16 +80,16 @@ function handleExport() {
onMounted(() => loadRanking())
</script>
<template>
<MkDrawer v-model="visible" title="排行榜详情" size="1000">
<MkDrawer v-model="visible" title="排行榜详情" class="mk-drawer-with-tabs" contentClass="pt-0" size="1000">
<el-tabs v-model="activeKind" @tab-change="handleTabChange">
<el-tab-pane name="tokens" label="Tokens 消耗 · Top 智能体" />
<el-tab-pane name="questions" label="对话次数 · Top 智能体" />
<el-tab-pane name="userTokens" label="Tokens 消耗 · Top 用户" />
</el-tabs>
<div class="my-4 flex-between">
<div class="mt-6 mb-4 flex-between">
<div class="flex gap-3">
<MkSearchInput v-model="searchName" class="w-55!" @change="handleSearch" />
<MkDateRange :default-value="{ startTime: initialRange.start_time, endTime: initialRange.end_time }" @change="handleRangeChange" />
<MkSearchInput v-model="searchName" class="w-55!" @change="handleSearch" />
</div>
<!-- 导出当前筛选下的完整排行榜 -->
<el-button plain :loading="exporting" :disabled="loading" @click="handleExport">
Expand Down
122 changes: 60 additions & 62 deletions ui/src/views/knowledge-detail/library/tags/AssociatedDocumentDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,68 +134,66 @@ defineExpose({ open })
</script>

<template>
<MkDrawer v-model="visible" :title="title" size="840" @closed="resetData">
<div class="flex-column gap-4" :inert="loading">
<el-tabs v-model="activeTab" :before-leave="() => !loading" @tab-change="handleTabChange">
<el-tab-pane label="已关联文档" name="linked" />
<el-tab-pane label="未关联文档" name="unlinked" />
</el-tabs>
<div class="flex-between gap-3">
<!-- 批量关联或取消关联文档 -->
<el-button plain :disabled="!selectedDocuments.length || loading" @click="handleBatchLinkDocuments">
<MkIcon :name="activeTab === 'linked' ? 'icon_unlink_outlined' : 'icon_link-record_outlined'" />
<span>{{ activeTab === 'linked' ? '取消关联' : '关联' }}</span>
</el-button>
<MkComplexSearch :key="activeTab" :fields="[{ label: '名称', value: 'name' }]" @change="handleComplexSearchChange" />
</div>
<MkTable
ref="documentTableRef"
v-model:pagination-config="paginationConfig"
v-loading="loading"
:data="documentData"
@current-change="loadDocuments"
@size-change="loadDocuments"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="40" />
<el-table-column prop="name" label="文档名称" min-width="200">
<template #default="{ row }: { row: DocumentItem }">
<div class="flex-align-center gap-2">
<img :src="getFileIconUrl(row.name)" alt="" class="size-5 shrink-0" />
<span class="truncate" :title="row.name">{{ row.name }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="is_active" label="启用状态" width="120">
<template #header>
<MkTableFilter
v-model="selectedDocumentActive"
mode="single"
label="启用状态"
:options="documentActiveOptions"
@change="handleDocumentFilterChange"
/>
</template>
<template #default="{ row }: { row: DocumentItem }">
<MkStatusLabel :active="row.is_active" />
</template>
</el-table-column>
<el-table-column prop="create_time" label="创建时间" width="180">
<template #default="{ row }: { row: DocumentItem }">{{ datetimeFormat(row.create_time) }}</template>
</el-table-column>
<el-table-column label="操作" width="70" fixed="right">
<template #default="{ row }: { row: DocumentItem }">
<!-- 关联或取消关联当前文档 -->
<MkAction
display="button"
:label="activeTab === 'linked' ? '取消关联' : '关联'"
:icon="activeTab === 'linked' ? 'icon_unlink_outlined' : 'icon_link-record_outlined'"
:disabled="loading"
@click="handleLinkDocuments([row.id])"
/>
</template>
</el-table-column>
</MkTable>
<MkDrawer v-model="visible" :title="title" class="mk-drawer-with-tabs" contentClass="pt-0" size="840" @closed="resetData">
<el-tabs v-model="activeTab" :before-leave="() => !loading" @tab-change="handleTabChange">
<el-tab-pane label="已关联文档" name="linked" />
<el-tab-pane label="未关联文档" name="unlinked" />
</el-tabs>
<div class="flex-between gap-3 mt-6 mb-4">
<!-- 批量关联或取消关联文档 -->
<el-button plain :disabled="!selectedDocuments.length || loading" @click="handleBatchLinkDocuments">
<MkIcon :name="activeTab === 'linked' ? 'icon_unlink_outlined' : 'icon_link-record_outlined'" />
<span>{{ activeTab === 'linked' ? '取消关联' : '关联' }}</span>
</el-button>
<MkComplexSearch :key="activeTab" :fields="[{ label: '名称', value: 'name' }]" @change="handleComplexSearchChange" />
</div>
<MkTable
ref="documentTableRef"
v-model:pagination-config="paginationConfig"
v-loading="loading"
:data="documentData"
@current-change="loadDocuments"
@size-change="loadDocuments"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="40" />
<el-table-column prop="name" label="文档名称" min-width="200">
<template #default="{ row }: { row: DocumentItem }">
<div class="flex-align-center gap-2">
<img :src="getFileIconUrl(row.name)" alt="" class="size-5 shrink-0" />
<span class="truncate" :title="row.name">{{ row.name }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="is_active" label="启用状态" width="120">
<template #header>
<MkTableFilter
v-model="selectedDocumentActive"
mode="single"
label="启用状态"
:options="documentActiveOptions"
@change="handleDocumentFilterChange"
/>
</template>
<template #default="{ row }: { row: DocumentItem }">
<MkStatusLabel :active="row.is_active" />
</template>
</el-table-column>
<el-table-column prop="create_time" label="创建时间" width="180">
<template #default="{ row }: { row: DocumentItem }">{{ datetimeFormat(row.create_time) }}</template>
</el-table-column>
<el-table-column label="操作" width="70" fixed="right">
<template #default="{ row }: { row: DocumentItem }">
<!-- 关联或取消关联当前文档 -->
<MkAction
display="button"
:label="activeTab === 'linked' ? '取消关联' : '关联'"
:icon="activeTab === 'linked' ? 'icon_unlink_outlined' : 'icon_link-record_outlined'"
:disabled="loading"
@click="handleLinkDocuments([row.id])"
/>
</template>
</el-table-column>
</MkTable>
</MkDrawer>
</template>
5 changes: 2 additions & 3 deletions ui/src/views/workflow/tool/debug/ResultDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ defineExpose({ open, close })
</script>

<template>
<MkDrawer v-model="visible" title="调试结果" :modal="false" @close="close">
<MkDrawer v-model="visible" title="调试结果" class="mk-drawer-with-tabs" contentClass="pt-0" :modal="false" @close="close">
<template #header>
<div class="-ml-2 flex-align-center">
<!-- 返回输入参数 -->
Expand All @@ -129,9 +129,8 @@ defineExpose({ open, close })
</template>
<el-tabs v-model="activeTab">
<el-tab-pane label="输出" name="output">
<h4 class="mk-title-decoration mb-4 mt-4">回复内容</h4>
<h4 class="mk-title-decoration mb-4 mt-6">回复内容</h4>

<!-- // TODO: 回复内容 调样式-->
<el-card class="small" shadow="never">
<ContentList :content-list="blocks" />
<div v-if="running">回答中...</div>
Expand Down
Loading