mes-ui-d2/src/pages/core/setting/releases/index.vue

<template>
  <d2-container type="full" class="page">
    <template slot="header">D2Admin 版本检查</template>
    <div class="banner">
      <img :src="`${$assetsPublicPath}static/image/icon/500/d2admin.png`">
    </div>
    <div v-if="update" class="releases">
      <h1>有新版本 {{releases.tag_name}}</h1>
      <p>更新日期 {{dayjs(releases.created_at).format('YYYY年M月D日')}}</p>
      <a :href="releases.html_url" class="el-button el-button--primary d2-mb">{{releases.html_url}}</a>
      <d2-markdown key="update" :source="releases.body"/>
    </div>
    <div v-else class="up2date">
      <d2-markdown key="noupdate" :source="up2date"/>
    </div>
    <template slot="footer">
      <el-button
        :type="updateNotify ? 'primary' : 'default'"
        size="mini"
        @click="d2adminUpdateNotifySet(!updateNotify)">
        {{updateNotify ? '关闭更新提醒 (当前:打开)' : '打开更新提醒 (当前:关闭)'}}
      </el-button>
    </template>
  </d2-container>
</template>

<script>
import up2date from './md/up-to-date.md'
import dayjs from 'dayjs'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      dayjs,
      up2date
    }
  },
  computed: {
    ...mapState({
      version: state => state.d2admin.version,
      releases: state => state.d2admin.releases,
      update: state => state.d2admin.update,
      updateNotify: state => state.d2admin.updateNotify
    })
  },
  methods: {
    ...mapMutations([
      'd2adminUpdateNotifySet'
    ])
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.page {
  .banner {
    text-align: center;
    img {
      width: 250px;
    }
  }
  .releases {
    padding: 20px;
    border-radius: 4px;
    background-color: $color-bg;
  }
  .up2date {
    padding: 20px;
    border-radius: 4px;
    background-color: $color-bg;
  }
}
</style>