sl-sfy-safety/src/modules/algo-params-setting-base/components/PageTitle/PageTitle.vue

<template>
  <div class="pageTitle">
    <BackIcon />
    <span>算法配置</span>
    <span class="cameraName">相机: {{ cameraDetailStore.detail?.name }}</span>
    <a :href="previewUrl" target="_blank" v-if="previewUrl">
      <svg-icon icon-name="eye-border" style="margin-left: 20px; width: 24px; height: 24px" />
    </a>
  </div>
</template>
<script lang="ts" setup>
  import useCameraDetailStore from '../../store/useCameraDetailStore';
  import { useGlobSetting } from '@/hooks/setting';
  import { computed } from 'vue';
  import { storeToRefs } from 'pinia';
  import BackIcon from '@/components/BackIcon/BackIcon.vue';

  const cameraDetailStore = useCameraDetailStore();
  const { detail } = storeToRefs(cameraDetailStore);
  const { appPCUrl } = useGlobSetting();

  const previewUrl = computed(() => {
    const firstSceneId = detail.value?.sceneTemplateList[0]?.sceneId;
    if (!detail.value?.workshopId || !detail.value?.code || !firstSceneId) return '';
    return appPCUrl + `#/shop?id=${detail.value?.workshopId}&cameraCode=${detail.value?.code!}&sceneId=${firstSceneId}`;
  });
</script>
<style lang="scss" scoped>
  .cameraName {
    margin-left: 30px;
  }
  .pageTitle {
    padding: 10px;
    // font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
  }
</style>