ali_ai_learn_web/src/pages/WorkflowDetail.vue

<template>
  <div class="workflow-detail container-height">
    <Breadcrumb />
    <div class="flex-between mt10">
      <div class="flex_1 mr20">
        <div class="padding16 bg_color_fff border_radius_16">
          <div class="bold font_size30">AI智能线索富集与多渠道通知系统</div>
          <div class="gap20 mt10">
            <div class="gap5">
              <img :src="yuangong" alt="员工" style="width: 16px; height: 16px;">
              <span class="font_size14">张三</span>
            </div>
            <div class="gap5">
              <img :src="riliIcon" alt="员工" style="width: 16px; height: 16px;">
              <span class="font_size14">2024-10-16</span>
            </div>
            <div class="gap5">
              <img :src="shiyongIcon" alt="员工" style="width: 16px; height: 16px;">
              <span class="font_size14">2,456使用</span>
            </div>
            <div class="gap5">
              <img :src="yunIcon" alt="员工" style="width: 16px; height: 16px;">
              <span class="font_size14">n8n平台</span>
            </div>
            <div class="gap5">
              <img :src="biaoqianIcon" alt="员工" style="width: 16px; height: 16px;">
              <span class="font_size14">二级分类名称-三级分类名称</span>
            </div>
          </div>
          <div class="font_size16 gray mt10">此n8n工作流是一款强大的AI驱动的潜在客户富集与通知系统，专为市场营销和销售团队设计。它通过智能表单收集线索，利用OpenAI深度分析并丰富客户数据，自动识别关键信息。系统能根据预设条件，通过多种渠道即时发送个性化通知，显著提升线索质量、转化率及团队协作效率，是优化客户关系管理的关键工具。</div>
          
        </div>
        <!-- 工作流预览 -->
        <div class="padding16 bg_color_fff border_radius_10 mt10">
          <div class="gap10">
            <div class="line_vertical"></div>
            <div class="font_size20 bold">工作流预览</div>
          </div>
        </div>
        <!-- 工作流预览 -->
        <div class="padding16 bg_color_fff border_radius_10 mt10">
          <div class="gap10">
            <div class="line_vertical"></div>
            <div class="font_size20 bold">详情</div>
          </div>
          <BlockNoteEditor v-model="editorContent" :editable="false" class="mt20"/>
        </div>
      </div>
      <!-- 详情右侧 -->
      <div class="detail_right">
        <div class="detail_right_content detail_right">
          <div class="padding16 bg_color_fff border_radius_16 box_shadow_card">
            <div class="flex-center-between">
              <div class="flex-column">
                <div class="font_size16">当前及格</div>
                <div class="color_price">
                  <span class="font_size32">0</span> 
                  <span>{{$t('common.mibi')}}</span>
                </div>
              </div>
              <el-button type="success" plain size="mini">免费</el-button>
            </div>
            <div class="mt20">
              <el-button type="primary" class="font_size16" size="large" style="width: 100%;">
                <img :src="useNowIcon" alt="员工" style="width: 30px; height: 30px;">
                <span class="font_size18">立即使用</span>
              </el-button>
            </div>
            <div class="mt20">
              <el-button type="primary" size="large" plain style="width: 100%;">
                <img :src="downIcon" alt="员工" style="width: 30px; height: 30px;">
                <span class="font_size18">下载工作流</span>
              </el-button>
            </div>
          </div>
          <!-- 工作流作者 -->
          <div class="padding16 bg_color_fff border_radius_16 box_shadow_card mt20">
            <div class="flex-center-between">
              <div class="flex-between flex_1">
                <el-avatar :size="50" :src="appStore.avatar" />
                <div class="ml10 flex_1">
                  <div class="font_size18 bold">张三</div>
                  <div class="gap5">
                    <el-tag type="primary" v-for="item in 5" :key="item" >技能标签</el-tag>
                  </div>
                </div>
              </div>
              <div>
                <div class="weiguanzhu cursor-pointer gap5">
                  <img :src="weiguanzhuIcon" alt="" style="width: 16px; height: 16px;">
                  <span class="font_size14">关注</span>
                </div>
                <div class="yiguanzhu cursor-pointer gap5 contactInfo_bg">
                  <img :src="yiguanzhuIcon" alt="" style="width: 16px; height: 16px;">
                  <span class="font_size14">关注</span>
                </div>
              </div>
            </div>
          </div>
          <div class="padding16 bg_color_fff border_radius_16 box_shadow_card mt20">
            <div class="gap10">
              <div class="line_vertical"></div>
              <div class="font_size20 bold">文件信息</div>
            </div>
            <div class="contactInfo_bg border_radius_8 padding8 mt10 flex-center-between">
              <div class="gap5">
                <img :src="geshiIcon" alt="" style="width: 17.5px; height: 17.5px;">
                <span class="font_size16">格式</span>
              </div>
              <span class="font_size16 bold">.josn</span>
            </div>
            <div class="contactInfo_bg border_radius_8 padding8 mt10 flex-center-between">
              <div class="gap5">
                <img :src="neicunIcon" alt="" style="width: 17.5px; height: 17.5px;">
                <span class="font_size16">大小</span>
              </div>
              <span class="font_size16 bold">24kb</span>
            </div>
            <div class="contactInfo_bg border_radius_8 padding8 mt10 flex-center-between">
              <div class="gap5">
                <img :src="banbenIcon" alt="" style="width: 17.5px; height: 17.5px;">
                <span class="font_size16">版本</span>
              </div>
              <span class="font_size16 bold">v1.0.2</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import yuangong from '@/assets/imgs/yuangong.png'
  import riliIcon from '@/assets/imgs/rili.png'
  import shiyongIcon from '@/assets/imgs/shiyong.png'
  import yunIcon from '@/assets/imgs/yun.png'
  import biaoqianIcon from '@/assets/imgs/biaoqian.png'
  import useNowIcon from '@/assets/imgs/useNow.png'
  import downIcon from '@/assets/imgs/down.png'
  import weiguanzhuIcon from '@/assets/imgs/weiguanzhu.png'
  import yiguanzhuIcon from '@/assets/imgs/yiguanzhu.png'
  import geshiIcon from '@/assets/imgs/geshi.png'
  import neicunIcon from '@/assets/imgs/neicun.png'
  import banbenIcon from '@/assets/imgs/banben.png'

  import BlockNoteEditor from '@/components/BlockNoteEditor.vue';
  import { useRoute } from 'vue-router'
  const route = useRoute()
  import { useAppStore } from '@/pinia/appStore'
  const appStore = useAppStore()
  import { ref } from 'vue'
  //获取参数
  const query = route.query
  const id = ref(query.id || '');
  // 详情内容
  const editorContent = ref(
  [
    {
      type: "paragraph",
      content: [{ type: "text", text: "只读模式" }]
    },
    {
    "id": "378ce968-02c2-4856-888b-c35a355aa84b",
    "type": "codeBlock",
    "props": {
        "language": "text"
    },
    "content": [],
    "children": []
    }
  ]
);
</script>

<style scoped lang="scss">
.workflow-detail {
  .weiguanzhu{
    padding: 8px 12px;
    background: #FCEBEB;
    border-radius: 8px 8px 8px 8px;
    color: #E43434 ;
    font-weight: bold;
    font-size: 14px;
  }
  .yiguanzhu{
    padding: 8px 12px;
    border-radius: 8px 8px 8px 8px;
    font-weight: bold;
    font-size: 14px;
  }
  
}
</style>