visualization-design/src/views/components/Header.vue

<template>
  <div class="app-header">
    <a class="logo" href="https://le5le.com" target="_blank">
      <img src="/favicon.ico" />
      <span>乐吾乐</span>
    </a>
    <t-dropdown
      :minColumnWidth="200"
      :maxHeight="560"
      :delay2="[10, 150]"
      overlayClassName="header-dropdown"
      trigger="click"
    >
      <a> 文件 </a>
      <t-dropdown-menu>
        <t-dropdown-item>
          <a>新建文件</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>打开文件</a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a>导入文件</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>保存</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>另保存</a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a>下载JSON文件</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>
            <div class="flex">
              导出为ZIP文件 <span class="flex-grow"></span>
              <span><label>VIP</label></span>
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>
            <div class="flex">
              导出为HTML <span class="flex-grow"></span>
              <span><label>VIP</label></span>
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>
            <div class="flex">
              导出为Vue3组件 <span class="flex-grow"></span>
              <span><label>VIP</label></span>
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>
            <div class="flex">
              导出为Vue2组件 <span class="flex-grow"></span>
              <span><label>VIP</label></span>
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a>
            <div class="flex">
              导出为React组件 <span class="flex-grow"></span>
              <span><label>VIP</label></span>
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>下载为PNG</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>下载为SVG</a>
        </t-dropdown-item>
      </t-dropdown-menu>
    </t-dropdown>
    <t-dropdown
      :minColumnWidth="180"
      :maxHeight="500"
      :delay2="[10, 150]"
      overlayClassName="header-dropdown"
    >
      <a> 编辑 </a>
      <t-dropdown-menu>
        <t-dropdown-item>
          <a>
            <div class="flex">
              撤销 <span class="flex-grow"></span> Ctrl + Z
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a>
            <div class="flex">
              恢复 <span class="flex-grow"></span> Ctrl + Y
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>
            <div class="flex">
              剪切 <span class="flex-grow"></span> Ctrl + X
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>
            <div class="flex">
              复制 <span class="flex-grow"></span> Ctrl + C
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a>
            <div class="flex">
              粘贴 <span class="flex-grow"></span> Ctrl + V
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>
            <div class="flex">
              添加/删除锚点 <span class="flex-grow"></span> A
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>
            <div class="flex">添加手柄 <span class="flex-grow"></span> H</div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>
            <div class="flex">删除手柄 <span class="flex-grow"></span> D</div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>
            <div class="flex">
              切换手柄 <span class="flex-grow"></span> Shift
            </div>
          </a>
        </t-dropdown-item>
      </t-dropdown-menu>
    </t-dropdown>
    <t-dropdown
      :minColumnWidth="180"
      :maxHeight="500"
      :delay2="[10, 150]"
      overlayClassName="header-dropdown"
    >
      <a> 工具 </a>
      <t-dropdown-menu>
        <t-dropdown-item>
          <a>窗口大小</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>放大</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>缩小</a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a>100%视图</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>鹰眼地图</a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a>放大镜</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>
            <div class="flex middle">
              自动锚点 <span class="flex-grow"></span> <t-icon name="check" />
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a>
            <div class="flex middle">
              禁用锚点 <span class="flex-grow"></span> <t-icon name="check" />
            </div>
          </a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>明亮主题</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>暗黑主题</a>
        </t-dropdown-item>
      </t-dropdown-menu>
    </t-dropdown>
    <t-dropdown
      :minColumnWidth="180"
      :maxHeight="500"
      :delay2="[10, 150]"
      overlayClassName="header-dropdown"
    >
      <a> 帮助 </a>
      <t-dropdown-menu>
        <t-dropdown-item>
          <a>产品介绍</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>快速上手</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>使用手册</a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a>快捷键</a>
        </t-dropdown-item>
        <t-dropdown-item divider="true">
          <a>企业服务与支持</a>
        </t-dropdown-item>
        <t-dropdown-item>
          <a>关于我们</a>
        </t-dropdown-item>
      </t-dropdown-menu>
    </t-dropdown>
    <input v-model="data.name" />

    <div style="width: 290px; flex-shrink: 0"></div>
    <t-dropdown
      v-if="user.id"
      :minColumnWidth="200"
      :maxHeight="500"
      :delay2="[10, 150]"
      overlayClassName="custom-dropdown header"
    >
      <a style="margin-left: 32px; margin-right: 0">
        <t-avatar
          size="small"
          :image="user.avatarUrl ? user.avatarUrl : baseUrl + 'img/avatar.png'"
        />
      </a>
      <t-dropdown-menu>
        <t-dropdown-item>
          <router-link to="/account/info">
            {{ user.username }}
          </router-link>
        </t-dropdown-item>
        <t-dropdown-item>
          <router-link to="/account/info">我的图纸</router-link>
        </t-dropdown-item>
        <t-dropdown-item>
          <router-link to="/account/teams">我的团队</router-link>
        </t-dropdown-item>
        <t-dropdown-item>
          <router-link to="/account/info">账号信息</router-link>
        </t-dropdown-item>
        <t-dropdown-item :divider="true">
          <router-link to="/account/security"> 安全设置 </router-link>
        </t-dropdown-item>
        <t-dropdown-item>
          <a @click="signout">退出</a>
        </t-dropdown-item>
      </t-dropdown-menu>
    </t-dropdown>
    <div class="flex middle" v-else>
      <a class="button primary solid" style="width: 80px" :href="login()">登录</a>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { useUser } from '@/services/user';

const market = import.meta.env.VITE_MARKET;

const baseUrl = import.meta.env.BASE_URL || '/';

const { user, message, getUser, getMessage, signout } = useUser();

const data = reactive({
  name: '空白文件',
});

function login() {
  //TODO 临时地址
  return `https://account.le5le.com/?cb=${encodeURIComponent(location.href)}`
  // if (market) {
  //       return `/account/login?cb=${encodeURIComponent(location.href)}`;
  //     } else {
  //       let arr = location.host.split('.');
  //       arr[0] = 'http://account';
  //       let accountUrl = arr.join('.');
  //       return `${
  //         (<any>globalThis).loginUrl ? (<any>globalThis).loginUrl : accountUrl
  //       }?cb=${encodeURIComponent(location.href)}`;
  //     }
}
</script>
<style lang="postcss" scoped>
.app-header {
  display: flex;
  height: 40px;

  .logo {
    display: flex;
    padding: 0 16px;
    align-items: center;
    font-size: 14px;
    font-weight: 500;

    img {
      height: 20px;
      margin-right: 6px;
    }
  }

  a {
    display: flex;
    padding: 0 8px;
    margin: 0 8px;
    align-items: center;
    color: var(--color);
    text-decoration: none;

    &:hover {
      color: var(--color-primary);
    }
  }

  input {
    font-size: var(--font-size);
    flex-grow: 1;
    background: none;
    outline: none;
    border: none;
    text-align: center;
    color: var(--color-title);
  }
}
</style>