shalu-agent-workflow/apps/web/src/components/RunWorkflow/index.vue

<!--
 * @Author: liuJie
 * @Date: 2026-01-24 21:25:04
 * @LastEditors: liuJie
 * @LastEditTime: 2026-01-24 22:01:08
 * @Describe: 运行工作流
-->
<script lang="ts" setup>
import { ElButton } from 'element-plus';
import { Icon } from '@iconify/vue';
const props = withDefaults(
    defineProps<{
        visible: boolean,
    }>(),
    {
        visible: false,
    }
);
const emit = defineEmits<{
    'update:visible': [value: boolean]
}>()
</script>
<template>
    <div class='runWorkflow'>
			<div class="drawer shadow-2xl" :class="{ 'drawer--open': props.visible }">

            <header>
                <h4>运行工作流</h4>
								<Icon icon="lucide:x" height="24" width="24" @click="emit('update:visible', false)" class="cursor-pointer"></Icon>
            </header>

            <!-- Drawer content -->
            This is drawer content.

            <footer>
                <ElButton type="success" size="large" class="w-full" @click="emit('update:visible', false)">
                    运行
                </ElButton>
            </footer>

			</div>
    </div>
</template>
<style lang="less" scoped>
.runWorkflow {
	/* Drawer 主体 */
		.drawer {
			position: fixed;
			top: 100px;
			right: 5px;
			bottom: 10px;
			width: 420px;
			background: #fff;
			z-index: 1000;
			border-radius: 8px;
			display: flex;
			flex-direction: column;
			border: 1px solid #e4e4e4;

			/* 初始隐藏状态 */
			transform: translateX(110%);
			transition: transform 0.25s ease;
		}

		/* 显示状态 */
		.drawer--open {
			transform: translateX(0);
		}

		/* Header */
		.drawer header {
			height: 56px;
			padding: 0 16px;
			border-bottom: 1px solid #eee;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		/* 内容区 */
		.drawer .content {
			flex: 1;
			padding: 16px;
			overflow-y: auto;
		}
}
</style>