Skip to content

Commit 4e72204

Browse files
wangdan-fit2cloudwangdan-fit2cloud
committed
feat: workflow menu
1 parent 4d44287 commit 4e72204

13 files changed

Lines changed: 146 additions & 104 deletions

File tree

‎ui/src/components/COMPONENT_README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -308,7 +308,7 @@ Element Plus Dropdown 属性和事件通过 `$attrs` 传入，并暴露 `handleO
308308

309309
```vue
310310
<MkDropdown trigger="click" placement="bottom-end">
311-
<button type="button">打开菜单</button>
311+
<el-button text>打开菜单</el-button>
312312
<template #dropdown>
313313
<MkDropdownMenu>
314314
<MkDropdownItem :icon="Setting">设置</MkDropdownItem>
@@ -338,7 +338,7 @@ Element Plus Dropdown 属性和事件通过 `$attrs` 传入，并暴露 `handleO
338338
```vue
339339
<MkFilterableDropdown v-model="selectedWorkspaceId" :options="workspaces" :props="{ label: 'name', value: 'id' }" @select="handleWorkspaceSelect">
340340
<template #default="{ text }">
341-
<button type="button">{{ text }}</button>
341+
<el-button text>{{ text }}</el-button>
342342
</template>
343343
<template #option="{ option }">
344344
<span class="truncate" :title="option.name">{{ option.name }}</span>

‎ui/src/components/business/workspace-dropdown/index.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,17 @@ const emit = defineEmits<{ select: [option: WorkspaceItem] }>()
1010
</script>
1111

1212
<template>
13-
<MkFilterableDropdown v-model="selectedWorkspaceId" :options="props.options" :props="{ label: 'name', value: 'id' }" @select="emit('select', $event)">
13+
<MkFilterableDropdown
14+
v-model="selectedWorkspaceId"
15+
:options="props.options"
16+
:props="{ label: 'name', value: 'id' }"
17+
@select="emit('select', $event)"
18+
>
1419
<template #default="{ text }">
1520
<el-button text class="flex max-w-50 items-center gap-1 rounded-md px-2! py-[7px]! text-N900!">
1621
<MkIcon name="icon_moments-categories_outlined" class="mr-1" />
1722
<span class="min-w-0 flex-1 truncate" :title="text">{{ text }}</span>
18-
<MkIcon :icon="CaretBottom" :size="14" class="ml-1 shrink-0 text-N600!" />
23+
<MkIcon :icon="CaretBottom" :size="14" class="ml-1 text-N600!" />
1924
</el-button>
2025
</template>
2126

‎ui/src/components/mk-drag-upload/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ defineExpose({ clearFiles })
5555
<span class="text-sm text-N500">{{ formatFileSize(selectedFile.size) }}</span>
5656
</div>
5757
<div class="flex shrink-0 items-center gap-1">
58-
<slot name="download" :file="selectedFile" />
58+
<slot name="download" :file="selectedFile"/>
5959
<el-button aria-label="删除文件" :disabled="disabled" text @click="handleRemove">
6060
<MkIcon name="icon_delete-trash_outlined" :size="16" class="text-N600" />
6161
</el-button>

‎ui/src/styles/STYLE_README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,7 @@ Tailwind 类。
302302
`--color-*` 注册后可以组合生成文字、背景、边框、轮廓等颜色工具类：
303303

304304
```html
305-
<button class="bg-primary text-white">确认</button>
305+
<div class="bg-primary text-white">确认</div>
306306
<a class="text-primary">链接文字</a>
307307
<div class="border border-primary">主题色边框</div>
308308
<input class="outline-primary" />
@@ -311,7 +311,7 @@ Tailwind 类。
311311
交互状态直接添加 Tailwind 状态前缀：
312312

313313
```html
314-
<button class="bg-primary hover:bg-primary/90 focus:ring-2 focus:ring-primary">确认</button>
314+
<div class="bg-primary hover:bg-primary/90 focus:ring-2 focus:ring-primary">确认</div>
315315
```
316316

317317
在颜色类后添加 `/透明度`，可以使用主题色叠加透明效果：

‎ui/src/styles/app.scss‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,16 @@ h6 {
160160
}
161161
}
162162

163+
164+
// 资源菜单的导入按钮
165+
.mk-import-button {
166+
width: 100%;
167+
.el-upload {
168+
width: 100%;
169+
}
170+
}
171+
172+
163173
/*
164174
标题前带竖线样式
165175
*/
@@ -209,11 +219,15 @@ h6 {
209219
grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
210220
}
211221

212-
// 资源菜单的导入按钮
213-
.mk-import-button {
214-
width: 100%;
215-
.el-upload {
216-
width: 100%;
222+
223+
224+
.mk-scrollbar-right {
225+
&.el-scrollbar {
226+
margin-right: calc(var(--spacing) * -4);
227+
228+
> .el-scrollbar__wrap > .el-scrollbar__view {
229+
padding-right: calc(var(--spacing) * 4);
230+
}
217231
}
218232
}
219233

‎ui/src/styles/element-plus.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -622,6 +622,7 @@
622622
--el-popover-border-radius: var(--el-border-radius-base);
623623
&.el-popper {
624624
padding: 0;
625+
color: var(--el-text-color-primary) !important;
625626
}
626627
}
627628

@@ -895,6 +896,7 @@
895896
&__content {
896897
min-height: 0;
897898
flex: 1;
899+
overflow: visible;
898900
}
899901
&__item {
900902
padding: 0 14px;

‎ui/src/views/system/chat/authentication/AuthenticationView.vue‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { ref, type Component } from 'vue'
2+
import { computed, ref, type Component } from 'vue'
33
import { LOGIN_METHOD } from '@/api/enums'
44
import LDAP from './components/LDAP.vue'
55
import CAS from './components/CAS.vue'
@@ -21,21 +21,30 @@ const authenticationTabs: AuthenticationTab[] = [
2121
{ label: 'OAuth2', name: LOGIN_METHOD.OAUTH2, component: OAuth2 },
2222
{ label: '扫码登录', name: 'SCAN', component: SCAN },
2323
]
24+
const activeAuthenticationComponent = computed(() => authenticationTabs.find((tab) => tab.name === activeName.value)?.component)
2425
</script>
2526

2627
<template>
2728
<MkViewLayout class="system-settings-authentication">
28-
<el-tabs v-model="activeName" class="authentication-tabs min-h-0 flex-1 flex-col">
29-
<template v-for="authenticationTab in authenticationTabs" :key="authenticationTab.name">
30-
<el-tab-pane class="h-full" :label="authenticationTab.label" :name="authenticationTab.name" lazy>
31-
<el-scrollbar>
32-
<div class="py-4">
33-
<component :is="authenticationTab.component" />
34-
</div>
35-
</el-scrollbar>
36-
</el-tab-pane>
37-
</template>
38-
</el-tabs>
29+
<template #default="{ title, Header }">
30+
<component :is="Header">
31+
<div class="w-full">
32+
<h4 class="mb-4">{{ title }}</h4>
33+
<el-tabs v-model="activeName">
34+
<el-tab-pane
35+
v-for="authenticationTab in authenticationTabs"
36+
:key="authenticationTab.name"
37+
:label="authenticationTab.label"
38+
:name="authenticationTab.name"
39+
/>
40+
</el-tabs>
41+
</div>
42+
</component>
43+
44+
<KeepAlive>
45+
<component :is="activeAuthenticationComponent" :key="activeName" />
46+
</KeepAlive>
47+
</template>
3948
</MkViewLayout>
4049
</template>
4150

‎ui/src/views/system/chat/authentication/components/SCANLogin.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ onMounted(loadQrPlatforms)
9292
</script>
9393

9494
<template>
95-
<div class="space-y-4 pr-2">
95+
<div class="space-y-4">
9696
<template v-for="platform in qrLoginPlatforms" :key="platform.key">
9797
<el-card shadow="hover">
9898
<div class="flex-between mb-4">

‎ui/src/views/system/settings/authentication/AuthenticationView.vue‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { ref, type Component } from 'vue'
2+
import { computed, ref, type Component } from 'vue'
33
import { LOGIN_METHOD } from '@/api/enums'
44
import LDAP from './components/LDAP.vue'
55
import CAS from './components/CAS.vue'
@@ -25,21 +25,30 @@ const authenticationTabs: AuthenticationTab[] = [
2525
{ label: 'SAML2', name: LOGIN_METHOD.SAML2, component: Saml2 },
2626
{ label: '扫码登录', name: 'SCAN', component: SCAN },
2727
]
28+
const activeAuthenticationComponent = computed(() => authenticationTabs.find((tab) => tab.name === activeName.value)?.component)
2829
</script>
2930

3031
<template>
3132
<MkViewLayout class="system-settings-authentication">
32-
<el-tabs v-model="activeName" class="authentication-tabs min-h-0 flex-1 flex-col">
33-
<template v-for="authenticationTab in authenticationTabs" :key="authenticationTab.name">
34-
<el-tab-pane class="h-full" :label="authenticationTab.label" :name="authenticationTab.name" lazy>
35-
<el-scrollbar>
36-
<div class="py-4">
37-
<component :is="authenticationTab.component" />
38-
</div>
39-
</el-scrollbar>
40-
</el-tab-pane>
41-
</template>
42-
</el-tabs>
33+
<template #default="{ title, Header }">
34+
<component :is="Header">
35+
<div class="w-full">
36+
<h4 class="mb-4">{{ title }}</h4>
37+
<el-tabs v-model="activeName">
38+
<el-tab-pane
39+
v-for="authenticationTab in authenticationTabs"
40+
:key="authenticationTab.name"
41+
:label="authenticationTab.label"
42+
:name="authenticationTab.name"
43+
/>
44+
</el-tabs>
45+
</div>
46+
</component>
47+
48+
<KeepAlive>
49+
<component :is="activeAuthenticationComponent" :key="activeName" />
50+
</KeepAlive>
51+
</template>
4352
</MkViewLayout>
4453
</template>
4554

‎ui/src/workflow-canvas/icons/ai-chat-node-icon.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<el-avatar class="ai-avatar-gradient" shape="square">
3-
<img src="@/assets/workflow/icon_ai_chat.svg" style="width: 75%" alt="" />
3+
<img src="@/assets/workflow/icon_ai_chat.svg" style="width: 74%" alt="" />
44
</el-avatar>
55
</template>
66
<script setup lang="ts"></script>

0 commit comments

Comments
 (0)