Skip to content

Commit 8bd3179

Browse files
JingBhJingBh
committed
Add Next Step SideBar.
1 parent d7718f6 commit 8bd3179

File tree

3 files changed

+83
-13
lines changed

3 files changed

+83
-13
lines changed

‎components/JiuqiToolbox.vue‎

Lines changed: 74 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<template>
2-
<float-box icon="tools" title="久棋工具箱" width="16rem">
3-
<b-list-group class="mt-3 bg-transparent">
4-
<b-list-group-item button v-b-modal:jtp-stateParser-modal>
5-
State Parser
6-
<b-icon icon="question-circle-fill" id="jtp-stateParser-help"></b-icon>
7-
</b-list-group-item>
8-
<b-list-group-item button v-b-modal:jtp-nextStep-modal>
9-
Next Step
10-
<b-icon icon="question-circle-fill" id="jtb-nextStep-help"></b-icon>
11-
</b-list-group-item>
12-
</b-list-group>
2+
<div>
3+
<float-box icon="tools" title="久棋工具箱" width="16rem">
4+
<b-list-group class="mt-3 bg-transparent">
5+
<b-list-group-item button v-b-modal:jtp-stateParser-modal>
6+
State Parser
7+
<b-icon icon="question-circle-fill" id="jtp-stateParser-help"></b-icon>
8+
</b-list-group-item>
9+
<b-list-group-item button v-b-modal:jtp-nextStep-modal>
10+
Next Step
11+
<b-icon icon="question-circle-fill" id="jtb-nextStep-help"></b-icon>
12+
</b-list-group-item>
13+
</b-list-group>
14+
</float-box>
1315
<b-popover target="jtp-stateParser-help" triggers="hover" placement="right">
1416
<template v-slot:title>久棋工具箱：<strong>State Parser</strong></template>
1517
<p>在使用我们的一些程序时，可能会遇到由 <code>X</code>、<code>O</code> 和 <code>-</code> 组成的 <code>State</code> 序列。</p>
@@ -82,6 +84,9 @@
8284
</transition>
8385
<template v-slot:modal-footer="{ cancel }">
8486
<p class="mr-auto text-muted">算法由 ZHC 提供</p>
87+
<b-button variant="info" v-b-toggle:jtp-nextStep-sidebar>
88+
<b-icon icon="square-half"></b-icon> SideBar
89+
</b-button>
8590
<b-button variant="secondary" @click="cancel">
8691
<b-icon icon="x"></b-icon> 关闭
8792
</b-button>
@@ -96,7 +101,64 @@
96101
</b-button>
97102
</template>
98103
</b-modal>
99-
</float-box>
104+
<b-sidebar id="jtp-nextStep-sidebar" title="Next Step" right shadow="lg" @shown="nextStepCheck">
105+
<div class="px-3 py-2 text-left">
106+
<transition name="fadeDown" leave-active-class="fadeOutUp" mode="out-in">
107+
<div v-if="!nextStepStarted">
108+
<p>要让我们的程序下一步棋，您必须提供几个参数：</p>
109+
<b-row>
110+
<b-col cols="12" sm="6">
111+
<b-form-group label="阵营" label-for="jtp-nextStep-input-player">
112+
<b-form-select id="jtp-nextStep-input-player" :options="nextStepPlayers"
113+
v-model="nextStepPlayer" required :state="nextStepPlayerError"></b-form-select>
114+
<b-form-text>程序将为您选择的一方下一步棋。</b-form-text>
115+
</b-form-group>
116+
</b-col>
117+
<b-col cols="12" sm="6">
118+
<b-form-group label="阶段" label-for="jtp-nextStep-input-stage">
119+
<b-form-select id="jtp-nextStep-input-stage" :options="nextStepStages"
120+
v-model="nextStepStage" required :state="nextStepStageError"></b-form-select>
121+
<b-form-text>请选择当前的游戏阶段。</b-form-text>
122+
</b-form-group>
123+
</b-col>
124+
</b-row>
125+
</div>
126+
<div class="mb-2" v-else>
127+
<p class="lead text-success">
128+
<b-icon class="mr-2" icon="circle-fill" animation="throb" font-scale="1.2"></b-icon>
129+
程序正在运行中...
130+
</p>
131+
<label>运行进度：{{ nextStepProgressObj.now || 0 }} / {{ nextStepProgressObj.all || 1000 }}</label>
132+
<b-progress :max="nextStepProgressObj.all || 1000" height="1.5rem" :animated="nextStepStarted">
133+
<b-progress-bar :value="nextStepProgressObj.now || 0" :label="nextStepProgressLabel" />
134+
</b-progress>
135+
</div>
136+
</transition>
137+
<transition name="fadeUp">
138+
<p class="text-danger mb-0" v-if="nextStepError && !nextStepSuccessful">错误：{{ nextStepError }}</p>
139+
</transition>
140+
<transition name="fadeUp">
141+
<p class="text-success mb-0" v-if="nextStepSuccessful">程序已完成运行！</p>
142+
</transition>
143+
</div>
144+
<template v-slot:footer="{ hide }">
145+
<div class="border-top text-right p-2">
146+
<b-button variant="secondary" @click="hide">
147+
<b-icon icon="x"></b-icon> 关闭
148+
</b-button>
149+
<b-button variant="primary" :disabled="nextStepLoading"
150+
v-if="!nextStepStarted" @click="nextStepStart">
151+
<span v-if="nextStepLoading"><b-spinner variant="white" small></b-spinner> 加载中...</span>
152+
<span v-else><b-icon icon="check2"></b-icon> 提交</span>
153+
</b-button>
154+
<b-button variant="danger" v-else @click="nextStepStop">
155+
<span v-if="nextStepLoading"><b-spinner variant="white" small></b-spinner> 加载中...</span>
156+
<span v-else><b-icon icon="exclamation-octagon"></b-icon> 结束进程</span>
157+
</b-button>
158+
</div>
159+
</template>
160+
</b-sidebar>
161+
</div>
100162
</template>
101163

102164
<script lang="ts">

‎libs/version.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export default "v1.2.1"
1+
export default "v1.2.2"

‎nuxt.config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,14 @@ export default {
3131
'~/assets/scss/app.scss'
3232
],
3333
/*
34+
** Progress Bar
35+
*/
36+
loading: {
37+
color: "#27a2fc",
38+
failedColor: "#e8286b",
39+
height: "3px"
40+
},
41+
/*
3442
** Plugins to load before mounting the App
3543
** https://nuxtjs.org/guide/plugins
3644
*/

0 commit comments

Comments
 (0)