andre/kuboard-press
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

替换 element-ui

Browse Source
This commit is contained in:
huanqing.shao
2019-11-02 10:13:24 +08:00
parent 111543d89f
commit 99951e87d9
40 changed files with 625 additions and 829 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
.vuepress/components/InstallBanner.vue
View File

@@ -1,30 +1,21 @@
<template>
<div>
<link rel="stylesheet" href="/landing/css/googlefont.css">
<link rel="stylesheet" href="/landing/css/font-awesome.min.css">
<link rel="stylesheet" href="/landing/css/style.css">
<link rel="stylesheet" href="/landing/css/components.css">
<div class="py-80" id="features" style="padding-top: 1rem; padding-bottom: 1rem;">
<div class="container" style="margin-top: 0;">
<div class="row">
<div class="col-sm-12">
<div class="text-center" style="margin-bottom: 1rem;">
<div class="text-primary-title">网上那么多 Kubernetes 安装文档，为什么这篇文档更有参考价值？</div>
<div class="text-primary-install-banner">网上那么多 Kubernetes 安装文档，为什么这篇文档更有参考价值？</div>
</div>
</div>
</div>
<div class="row">
<transition-group name="lightSpeed" tag="div">
<div class="col-md-4" key="f1" v-show="f1">
<!-- <transition-group name="lightSpeed" tag="div"> -->
<div class="col-md-6" key="f1">
<!-- InfoBox Center <Start> -->
<div class="cs-infobox-left mt-4 feature">
<div class="feature-title">
<img src="/landing/images/icn3.svg" alt="" class="img-fluid">
<div class="text-primary-title">广泛验证</div>
</div>
<div class="feature-description">
<div class="text-primary-install-banner">广泛验证</div>
<li>每天有超过
<span style="font-weight: 500; color: red;">
<!-- {{value}} -->
@@ -39,19 +30,16 @@
</span>
人参考此文档完成 Kubernetes 集群的安装</li>
<li>不断有网友对安装文档提出改进意见</li>
</div>
</div>
<!-- InfoBox Center </End> -->
</div>
<div class="col-md-4" key="f2" v-show="f2">
<div class="col-md-6" key="f2">
<!-- InfoBox Center <Start> -->
<div class="cs-infobox-left mt-4 feature">
<div class="feature-title">
<div class="cs-infobox-left mt-4 feature" data-aos="fade-up" data-aos-anchor-placement="top-bottom" data-aos-duration="2000">
<img src="/landing/images/icn4.svg" alt="" class="img-fluid">
<div class="text-primary-title">持续更新</div>
</div>
<div class="feature-description">
<div class="text-primary-install-banner">持续更新</div>
<li>始终有最新的 Kubernetes 稳定版安装文档</li>
<li>当前版本 Kubernetes {{version}}</li>
<li>已完成了
@@ -72,43 +60,36 @@
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
</a>
</li>
</div>
</div>
<!-- InfoBox Center </End> -->
</div>
<div class="col-md-4" key="f3" v-show="f3">
<div class="col-md-6" key="f3">
<!-- InfoBox Left <Start> -->
<div class="cs-infobox-left mt-4 feature">
<div class="feature-title">
<img src="/landing/images/icn5.svg" alt="" class="img-fluid">
<div class="text-primary-title">适应面广</div>
</div>
<div class="feature-description">
<div class="text-primary-install-banner">适应面广</div>
<li>大部分的 K8S 安装文档都是个人爱好者的一份笔记而已，他当时的特定条件并不一定适用于你</li>
<li>此文档经众多网友验证，在公有云、私有云、自建虚拟机等多种条件下均适用</li>
</div>
</div>
<!-- InfoBox Left </End> -->
</div>
<div class="col-md-4" key="f4" v-show="f4">
<div class="col-md-6" key="f4">
<!-- InfoBox Center <Start> -->
<div class="cs-infobox-left mt-4 feature" data-aos="fade-up">
<div class="feature-title">
<img src="/landing/images/icn1.svg" alt="" class="img-fluid">
<div class="text-primary-title">在线答疑</div>
</div>
<div class="feature-description">
<Qq></Qq> 808894550
<p>
<img src="/images/kuboard_qq.png" alt="Kubernetes安装：QQ群在线答疑" style="width: 120px;"/>
<br/>如需远程协助，请扫描本文页尾的微信二维码
</p>
</div>
<div class="text-primary-install-banner">在线答疑</div>
<div>
<div style="text-align: center;">
<p><Qq></Qq></p>
<img src="/images/kuboard_qq.png" alt="Kubernetes安装：QQ群在线答疑" style="width: 120px;"/>
</div>
如需远程协助，请扫描本文页尾的微信二维码
</div>
</div>
<!-- InfoBox Center </End> -->
</div>
</transition-group>
<!-- </transition-group> -->
</div>
</div>
</div>
@@ -159,16 +140,17 @@ export default {
</script>
<style scoped>
.text-primary-title {
.text-primary-install-banner {
font-size: 1rem;
font-weight: 500;
margin-top: 0.7rem;
margin-left: 0.7rem;
display: inline-block;
}
.feature {
text-align: left;
padding: 1rem;
margin-bottom: 1rem;
min-height: 272px;
z-index: 10;
border: 1px solid #f2be45;
border-radius: 5px;
@@ -180,16 +162,5 @@ export default {
/* background-color: rgba(255,227,200); */
background-color: rgba(242, 190, 69, 0.1);
}
.feature-title {
display: inline-block;
text-align: center;
}
.feature-description {
display: inline-block;
max-width: calc(100% - 64px - 2rem);
padding: 0 0 0 1rem;
vertical-align: top;
text-align: left;
}
</style>

8
.vuepress/components/InstallDashboardPreview.vue
View File

@@ -3,7 +3,7 @@
<transition name="lightSpeed">
<grid :rwd="{compact: 'stack'}" style="margin-top: 1rem;" v-show="show">
<grid-item size="1/3" :rwd="{tablet: '1/1', compact: '1/1'}" >
<el-card style="height: 100%; color: #2c3e50; line-height: 1.7;" shadow="hover">
<b-card style="height: 100%; color: #2c3e50; line-height: 1.7;" shadow="hover">
<p>
<a target="_blank" :href="`http://demo.kuboard.cn/#/dashboard?k8sToken=${$site.themeConfig.kuboardToken}`">
Kuboard 在线体验
@@ -16,16 +16,16 @@
<li>无需编写YAML</li>
<li>纯图形化环境</li>
<li>多环境管理</li>
</el-card>
</b-card>
</grid-item>
<grid-item size="2/3" :rwd="{tablet: '1/1', compact: '1/1'}">
<el-card style="height: 100%; border-color: #f2be45; background-color: rgba(242, 190, 69, 0.1)" shadow="hover">
<b-card style="height: 100%; border-color: #f2be45; background-color: rgba(242, 190, 69, 0.1)" shadow="hover">
<a target="_blank" :href="`http://demo.kuboard.cn/#/dashboard?k8sToken=${$site.themeConfig.kuboardToken}`">
<p style="max-width: 100%;">
<img src="./1564841972085.gif" style="border: 1px solid #d7dae2; max-width: 100%;" alt="Kubernetes教程：Kuboard 在线Demo"></img>
</p>
</a>
</el-card>
</b-card>
</grid-item>
</grid>
</transition>

41
.vuepress/components/InstallEnvCheck.vue
View File

@@ -8,22 +8,21 @@
<div>
<p style="color: red">必须选中下面的 {{envCount}} 个勾选框才能继续</p>
<p>选中后显示 安装 docker/kubelet 的文档</p>
<div style="display: inline-block; width: 550px; max-width: calc(100vw - 100px); overflow: hidden; line-height: 40px; background-color: rgba(255,229,100,0.3); padding: 20px 0 0 20px; margin-bottom: 20px; border: 1px solid #d7dae2;">
<el-form :model="form" ref="envForm" :rules="rules" style="text-align: left;">
<el-form-item prop="checked" class="env-form-item">
<el-checkbox-group v-model="form.checked">
<li style="height: 40px;"> <el-checkbox style="width: 300px; max-width: calc(100vw - 100px); text-align: left;" label="centos">我的任意节点 centos 版本在兼容列表中</el-checkbox> </li>
<li style="height: 40px;"> <el-checkbox style="width: 300px; max-width: calc(100vw - 100px); text-align: left;" label="cpu">我的任意节点 CPU 内核数量大于等于 2</el-checkbox> </li>
<li style="height: 40px;"> <el-checkbox style="width: 300px; max-width: calc(100vw - 100px); text-align: left;" label="hostname">我的任意节点 hostname 不是 localhost，且不包含下划线、小数点、大写字母</el-checkbox> </li>
<li style="height: 40px;"> <el-checkbox style="width: 300px; max-width: calc(100vw - 100px); text-align: left;" label="ipaddress">我的任意节点都有固定的内网 IP 地址</el-checkbox> </li>
<li style="height: 40px;"> <el-checkbox style="width: 300px; max-width: calc(100vw - 100px); text-align: left;" label="networkcard">我的任意节点只有一块网卡（可以在完成K8S安装后再添加网卡）</el-checkbox> </li>
<li style="height: 40px;"> <el-checkbox style="width: 300px; max-width: calc(100vw - 100px); text-align: left;" label="nat">如果我直接使用vmware等创建虚拟机，我使用NAT网络，而不是桥接网络</el-checkbox> </li>
<li style="height: 40px;"> <el-checkbox style="width: 300px; max-width: calc(100vw - 100px); text-align: left;" label="docker">我的任意节点不会直接使用 docker run 或 docker-compose 运行容器</el-checkbox> </li>
</el-checkbox-group>
</el-form-item>
</el-form>
<div style="overflow: hidden; background-color: rgba(255,229,100,0.3); padding: 20px 0 0 20px; margin-top: 1rem; margin-bottom: 20px; border: 1px solid #d7dae2;">
<b-form>
<b-form-group label="选中后显示 安装 docker/kubelet 的文档">
<b-form-checkbox-group id="checkbox-group-2" v-model="form.checked" name="flavour-2">
<b-form-checkbox value="centos">我的任意节点 centos 版本在兼容列表中</b-form-checkbox><br/>
<b-form-checkbox value="cpu">我的任意节点 CPU 内核数量大于等于 2</b-form-checkbox><br/>
<b-form-checkbox value="hostname">我的任意节点 hostname 不是 localhost，且不包含下划线、小数点、大写字母</b-form-checkbox><br/>
<b-form-checkbox value="ipaddress">我的任意节点都有固定的内网 IP 地址</b-form-checkbox><br/>
<b-form-checkbox value="networkcard">我的任意节点只有一块网卡（可以在完成K8S安装后再添加网卡）</b-form-checkbox><br/>
<b-form-checkbox value="nat">如果我直接使用vmware等创建虚拟机，我使用NAT网络，而不是桥接网络</b-form-checkbox><br/>
<b-form-checkbox value="docker">我的任意节点不会直接使用 docker run 或 docker-compose 运行容器</b-form-checkbox><br/>
</b-form-checkbox-group>
</b-form-group>
</b-form>
</div>
</div>
@@ -35,12 +34,10 @@
</grid> -->
</div>
<el-collapse-transition>
<div v-show="envOk" key="ok">
<el-button style="margin-top: 10px;" @click="review" type="text">再看看我是否符合安装条件</el-button>
<b-button style="margin-top: 10px;" @click="review" variant="info">再看看我是否符合安装条件</b-button>
<slot></slot>
</div>
</el-collapse-transition>
</div>
</div>
</template>
@@ -87,7 +84,11 @@ export default {
},
envOk () {
if (this.envOk) {
this.$message.success(`如果您符合刚才 ${ENV_COUNT} 个条件，请继续安装`)
this.$bvToast.toast(`如果您符合刚才 ${ENV_COUNT} 个条件，请继续安装`, {
title: '完成环境检查',
variant: 'success',
autoHideDelay: 5000,
})
this.$sendGaEvent('install-' + this.type, 'envOk-' + this.type, '已确认环境符合条件-' + this.type)
}
}

4
.vuepress/components/PageVssue.vue
View File

@@ -3,10 +3,10 @@
<div v-for="(item, key) in vssues" :key="key">
<Vssue v-if="item && item > 0" v-show="key === $route.path" :issueId="item" :options="options"/>
<div v-if="item === undefined && isLocalHost" v-show="key === $route.path" :key="key">
<el-button type="danger" @click="vssues[key] = ''">请创建 VssueId</el-button>
<b-button variant="danger" @click="vssues[key] = ''">请创建 VssueId</b-button>
</div>
<div v-if="item === ''">
<el-button type="warning" @click="refreshId = $refs.vssue[0].vssue.issue.id">请填写 vusseId <span v-if="refreshId"> - {{refreshId}}</span></el-button>
<b-button variant="warning" @click="refreshId = $refs.vssue[0].vssue.issue.id">请填写 vusseId <span v-if="refreshId"> - {{refreshId}}</span></b-button>
<Vssue ref="vssue" :title="$page.path" :options="options"/>
</div>
</div>

72
.vuepress/components/Promotion.vue
View File

@@ -1,72 +0,0 @@
<template>
<div>
<el-dialog
title="有奖征文进行中"
:visible.sync="dialogVisible"
:fullscreen="true"
:center="true"
custom-class="promotion-dialog"
:append-to-body ="true">
<div>
<img style="max-width: 100%;" @click="gotoStar" alt="Kuboard 有奖征文火热进行中，最高可得1000元现金大奖" src="https://blog.kuboard.cn/wp-content/uploads/2019/08/banner-2-576x1024.png"></img>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="waitAMoment">一会儿再说</el-button>
<el-button type="primary" @click="gotoStar">去看看！</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css';
import { Dialog, Button } from 'element-ui';
Vue.component(Dialog.name, Dialog)
Vue.component(Button.name, Button)
export default {
data() {
return {
dialogVisible: false
};
},
mounted () {
// this.waitAMoment()
this.dialogVisible = (this.$page.path.indexOf('micro-service') > 0 || this.$page.path.indexOf('learning') > 0) && localStorage.getItem('promotion') !== 'compaign'
},
methods: {
waitAMoment() {
this.dialogVisible = false
if (localStorage.getItem('promotion') === 'compaign') {
return
}
let _this = this
setTimeout(_ => {
_this.dialogVisible = true
}, 60000 * 6)
},
gotoStar() {
this.dialogVisible = false
window.open('https://blog.kuboard.cn/compaign')
localStorage.setItem('promotion', 'compaign')
}
}
}
</script>
<style>
.promotion-dialog {
background-color:rgba(10,10,10,0.2);
margin-left: 0;
margin-right: 0;
padding: 0;
}
.promotion-dialog .el-dialog__body {
padding: 0;
text-align: center;
}
</style>

4
.vuepress/components/SpecialHomePage.vue
View File

@@ -67,7 +67,7 @@
</div>
<div class="intro">
<el-card class="intro_text" shadow="hover">
<b-card class="intro_text" shadow="hover">
<p>
<h2>Kuboard</h2>
<a target="_blank" :href="`http://demo.kuboard.cn/#/dashboard?k8sToken=${$site.themeConfig.kuboardToken}`">
@@ -78,7 +78,7 @@
<li>无需手写 YAML</li>
<li><a href="/install/install-dashboard.html">安装Kuboard</a></li>
</p>
</el-card>
</b-card>
<div class="intro_picture">
<a target="_blank" :href="`http://demo.kuboard.cn/#/dashboard?k8sToken=${$site.themeConfig.kuboardToken}`">
<img src="./1564841972085.gif" style="max-width: 100%;" alt="Kubernetes教程：Kuboard在线演示"/>

47
.vuepress/components/StarGazer.vue
View File

@@ -1,11 +1,13 @@
<template>
<div>
<el-dialog
<b-modal
size="xl"
title="感谢阅读"
:visible.sync="dialogVisible"
width="60%"
:before-close="handleClose"
:append-to-body ="true">
centered
no-close-on-esc
no-close-on-backdrop
@hide="reset"
v-model="dialogVisible">
<div style="text-align: center; font-size: 18px; weight: 500;">
<div style="background-color: rgb(236, 245, 255); padding: 10px 10px 10px 10px; margin-bottom: 10px; border: solid 1px #007af5;">
<a href="https://github.com/eip-work/kuboard-press" target="_blank" @click="linkToStar">
@@ -17,34 +19,31 @@
</div>
<a href="https://github.com/eip-work/kuboard-press" target="_blank" @click="linkToStar">
<div style="border: solid 1px #ddd;">
<img src="./star.png" style="max-width: 50vw; opacity: 0.6;">
<img src="./star.png" style="max-width: 100%; opacity: 0.6;">
</div>
</a>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="text" @click="reset" style="margin-right: 10px; color: grey;">残忍拒绝</el-button>
<span slot="modal-footer" class="dialog-footer">
<a type="text" @click="dialogVisible = false" style="margin-right: 10px; font-size: 14px; color: grey; cursor: pointer;">残忍拒绝</a>
<a href="https://github.com/eip-work/kuboard-press" target="_blank" @click="linkToStar">
够义气，现在就去！
<OutboundLink/>
<b-button variant="primary">
够义气，现在就去！
<OutboundLink/>
</b-button>
</a>
</span>
</el-dialog>
</b-modal>
</div>
</template>
<script>
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'
import { Dialog, Button } from 'element-ui'
import { differenceInMinutes } from 'date-fns'
Vue.component(Dialog.name, Dialog)
Vue.component(Button.name, Button)
export default {
data() {
return {
dialogVisible: false
dialogVisible: true
};
},
mounted () {
@@ -105,20 +104,6 @@ export default {
this.dialogVisible = false
localStorage.setItem('stared', 'true')
this.$sendGaEvent('StarGazer', 'SG:GotoGithub', 'SG:前往github' + this.$page.path)
},
handleClose (done) {
this.$message.success('Kuboard及Kubernetes教程都是免费提供的，请给一个 github star 以示鼓励')
if (window.ga) {
window.ga('send', {
hitType: 'event',
eventCategory: 'StarGazer',
eventAction: 'SG:BeforeClose',
eventLabel: 'SG:Kuboard及文档是免费提供的'
});
console.log('发送成功 ga event')
} else {
console.log('开发环境，不发送 ga event')
}
}
}
}