mirror of
https://github.com/crawlab-team/crawlab.git
synced 2026-01-25 17:42:25 +01:00
290 lines
7.4 KiB
Vue
290 lines
7.4 KiB
Vue
<template>
|
|
<div class="navbar">
|
|
<el-dialog
|
|
:visible.sync="isLatestReleaseNoteVisible"
|
|
:title="$t('Release') + ` ${latestRelease.name}`"
|
|
>
|
|
<el-tabs v-model="activeTabName">
|
|
<el-tab-pane :label="$t('Release Note')" name="release-note">
|
|
<div class="content markdown-body" v-html="latestReleaseNoteHtml">
|
|
</div>
|
|
<template slot="footer">
|
|
<el-button type="primary" size="small" @click="isLatestReleaseNoteVisible = false">{{$t('Ok')}}</el-button>
|
|
</template>
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="$t('How to Upgrade')" name="how-to-upgrade">
|
|
<div class="content markdown-body" v-html="howToUpgradeHtml">
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<template slot="footer">
|
|
<el-button type="primary" size="small" @click="isLatestReleaseNoteVisible = false">{{$t('Ok')}}</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
|
|
<breadcrumb class="breadcrumb"/>
|
|
<el-dropdown class="avatar-container right" trigger="click">
|
|
<span class="el-dropdown-link">
|
|
{{username}}
|
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown" class="user-dropdown">
|
|
<el-dropdown-item>
|
|
<span style="display:block;" @click="logout">{{$t('Logout')}}</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
<el-dropdown class="lang-list right" trigger="click">
|
|
<span class="el-dropdown-link">
|
|
{{$t($store.getters['lang/lang'])}}
|
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item @click.native="setLang('zh')">
|
|
<span>中文</span>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item @click.native="setLang('en')">
|
|
<span>English</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
<div class="documentation right">
|
|
<a href="http://docs.crawlab.cn" target="_blank">
|
|
<font-awesome-icon :icon="['far', 'question-circle']"/>
|
|
<span style="margin-left: 5px;">{{$t('Documentation')}}</span>
|
|
</a>
|
|
</div>
|
|
<div v-if="isUpgradable" class="upgrade right" @click="onClickUpgrade">
|
|
<font-awesome-icon :icon="['fas', 'arrow-up']"/>
|
|
<el-badge is-dot>
|
|
<span style="margin-left: 5px;">{{$t('Upgrade')}}</span>
|
|
</el-badge>
|
|
</div>
|
|
<div class="github right">
|
|
<!-- Place this tag where you want the button to render. -->
|
|
<github-button
|
|
href="https://github.com/crawlab-team/crawlab"
|
|
data-color-scheme="no-preference: light; light: light; dark: dark;"
|
|
data-size="large"
|
|
data-show-count="true"
|
|
:aria-label="$t('Star crawlab-team/crawlab on GitHub')"
|
|
style="color: white"
|
|
>
|
|
Star
|
|
</github-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapGetters
|
|
} from 'vuex'
|
|
import Breadcrumb from '@/components/Breadcrumb'
|
|
import Hamburger from '@/components/Hamburger'
|
|
import GithubButton from 'vue-github-button'
|
|
import showdown from 'showdown'
|
|
import 'github-markdown-css/github-markdown.css'
|
|
|
|
export default {
|
|
components: {
|
|
Breadcrumb,
|
|
Hamburger,
|
|
GithubButton
|
|
},
|
|
data () {
|
|
const converter = new showdown.Converter()
|
|
return {
|
|
isLatestReleaseNoteVisible: false,
|
|
converter,
|
|
activeTabName: 'release-note',
|
|
howToUpgradeHtmlZh: `
|
|
### Docker 部署
|
|
\`\`\`bash
|
|
# 拉取最新镜像
|
|
docker pull tikazyq/crawlab:latest
|
|
|
|
# 删除容器
|
|
docker-compose down | true
|
|
|
|
# 启动容器
|
|
docker-compose up -d
|
|
\`\`\`
|
|
|
|
### 直接部署
|
|
|
|
1. 拉取最新 Github 代码
|
|
2. 重新构建前后端应用
|
|
3. 启动前后端应用
|
|
`,
|
|
howToUpgradeHtmlEn: `
|
|
### Docker Deployment
|
|
\`\`\`bash
|
|
# pull the latest image
|
|
docker pull tikazyq/crawlab:latest
|
|
|
|
# delete containers
|
|
docker-compose down | true
|
|
|
|
# start containers
|
|
docker-compose up -d
|
|
\`\`\`
|
|
|
|
### Direct Deployment
|
|
1. Pull the latest Github repository
|
|
2. Build frontend and backend applications
|
|
3. Start frontend and backend applications
|
|
`
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState('version', [
|
|
'latestRelease'
|
|
]),
|
|
...mapState('lang', [
|
|
'lang'
|
|
]),
|
|
...mapGetters([
|
|
'sidebar',
|
|
'avatar'
|
|
]),
|
|
username () {
|
|
if (!this.$store.getters['user/userInfo']) return this.$t('User')
|
|
if (!this.$store.getters['user/userInfo'].username) return this.$t('User')
|
|
return this.$store.getters['user/userInfo'].username
|
|
},
|
|
isUpgradable () {
|
|
if (!this.latestRelease.name) return false
|
|
|
|
const currentVersion = sessionStorage.getItem('v')
|
|
const latestVersion = this.latestRelease.name.replace('v', '')
|
|
|
|
if (!latestVersion || !currentVersion) return false
|
|
|
|
const currentVersionList = currentVersion.split('.')
|
|
const latestVersionList = latestVersion.split('.')
|
|
for (let i = 0; i < currentVersionList.length; i++) {
|
|
let nc = Number(currentVersionList[i])
|
|
let nl = Number(latestVersionList[i])
|
|
if (isNaN(nl)) nl = 0
|
|
if (nc < nl) return true
|
|
}
|
|
return false
|
|
},
|
|
latestReleaseNoteHtml () {
|
|
if (!this.latestRelease.body) return ''
|
|
const body = this.latestRelease.body
|
|
return this.converter.makeHtml(body)
|
|
},
|
|
howToUpgradeHtml () {
|
|
if (this.lang === 'zh') {
|
|
return this.converter.makeHtml(this.howToUpgradeHtmlZh)
|
|
} else if (this.lang === 'en') {
|
|
return this.converter.makeHtml(this.howToUpgradeHtmlEn)
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
toggleSideBar () {
|
|
this.$store.dispatch('ToggleSideBar')
|
|
},
|
|
logout () {
|
|
this.$store.dispatch('user/logout')
|
|
this.$router.push('/login')
|
|
},
|
|
setLang (lang) {
|
|
window.localStorage.setItem('lang', lang)
|
|
this.$i18n.locale = lang
|
|
this.$store.commit('lang/SET_LANG', lang)
|
|
|
|
this.$st.sendEv('全局', '切换中英文', lang)
|
|
},
|
|
onClickUpgrade () {
|
|
this.isLatestReleaseNoteVisible = true
|
|
this.$st.sendEv('全局', '点击版本升级')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
.navbar {
|
|
height: 50px;
|
|
line-height: 50px;
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
|
|
|
|
.hamburger-container {
|
|
line-height: 58px;
|
|
height: 50px;
|
|
float: left;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.lang-list {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
margin-right: 35px;
|
|
/*position: absolute;*/
|
|
/*right: 80px;*/
|
|
}
|
|
|
|
.screenfull {
|
|
position: absolute;
|
|
right: 90px;
|
|
top: 16px;
|
|
color: red;
|
|
}
|
|
|
|
.avatar-container {
|
|
cursor: pointer;
|
|
height: 50px;
|
|
display: inline-block;
|
|
margin-right: 35px;
|
|
/*position: absolute;*/
|
|
/*right: 35px;*/
|
|
}
|
|
|
|
.documentation {
|
|
margin-right: 35px;
|
|
color: #606266;
|
|
font-size: 14px;
|
|
|
|
.span {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.github {
|
|
height: 50px;
|
|
margin-right: 35px;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.upgrade {
|
|
margin-top: 12.5px;
|
|
line-height: 25px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
margin-right: 35px;
|
|
|
|
.span {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
float: right
|
|
}
|
|
}
|
|
</style>
|
|
<style scoped>
|
|
.navbar >>> .el-dialog__body {
|
|
padding-top: 0;
|
|
}
|
|
</style>
|