AutoCommit/src/views/autoCommit.html

426 lines
16 KiB
HTML
Raw Normal View History

2019-12-26 17:47:37 +08:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Github自动提交commit工具</title>
<link href="../assets/styles/element-ui2.13.min.css" rel="stylesheet" />
<link href="../assets/styles/base.css" rel="stylesheet" />
<link href="../assets/styles/autoCommit.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<div class="form-title">Github自动提交commit工具</div>
<el-container>
<el-main>
<el-form ref="form" :model="form" :rules="rules" label-width="180px">
<el-form-item class="form_item" prop="itemSrc">
<label slot="label">
<el-tooltip class="item" content="要提交commit的仓库文件夹" placement="top-start">
<span>项目地址 :</span>
</el-tooltip>
</label>
2019-12-30 21:13:08 +08:00
<span @click="chooseItem">{{ form.itemSrc }}</span>
</el-input>
</el-form-item>
<el-form-item class="form_item" prop="fileName">
<label slot="label">
<el-tooltip class="item" content="默认写入commit内容的文件,位于项目的根目录,不存在会自动创建" placement="top-start">
<span>commit文件 :</span>
</el-tooltip>
</label>
<el-input class="input_form" v-model="form.fileName" @change="fileNameChange"></el-input>
</el-input>
</el-form-item>
<el-form-item class="form_item" prop="commitMsg">
<label slot="label">
2020-01-04 14:12:29 +08:00
<el-tooltip class="item" content="每个提交的统一commit message" placement="top-start">
<span>commit信息 :</span>
</el-tooltip>
</label>
<el-input class="input_form" v-model="form.commitMsg" @change="commitMsgChange"></el-input>
</el-input>
</el-form-item>
<el-form-item class="form_item">
<label slot="label">
<el-tooltip class="item" content="更多细节设置" placement="top-start">
<span>更多设置 :</span>
</el-tooltip>
</label>
<el-switch
@change="switchChange"
v-model="more"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-form-item class="form_item" v-if="more">
<label slot="label">
<el-tooltip class="item" content="间隔一定时间范围不提交commit几天这样看起来更逼真" placement="top-start">
<span>间隔提交 :</span>
</el-tooltip>
</label>
<span>超出时间范围:</span>
<el-input-number v-model="moreObj.scopeDay" :step="1" :min="0" size="mini"></el-input-number>
<span>超出这个范围随机不提交天数:</span>
<el-input-number v-model="moreObj.noCommitDay" :step="1" :min="0" size="mini"></el-input-number>
</el-form-item>
<el-form-item class="form_item" prop="commitNumber">
2020-01-07 22:34:31 +08:00
<label slot="label">
<el-tooltip class="item" content="时间范围内默认每个日期是否随机commit" placement="top-start">
<span>是否随机commit :</span>
</el-tooltip>
</label>
<el-switch
@change="switchChange"
v-model="form.randomCommit"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-form-item class="form_item" prop="commitNumber" v-if="form.randomCommit">
<label slot="label">
<el-tooltip class="item" :content="`时间范围内默认每个日期随机commit 1次~${form.commitNumber}次`" placement="top-start">
<span>随机commit次数 :</span>
</el-tooltip>
</label>
2020-05-20 15:27:01 +08:00
<el-input-number v-model="form.commitNumber" :step="1" :min="2" :max="88" size="large"></el-input-number>
2020-01-07 22:34:31 +08:00
</el-form-item>
<el-form-item class="form_item" prop="commitNumber" v-else>
<label slot="label">
<el-tooltip class="item" content="时间范围内默认每个日期需要commit的次数" placement="top-start">
<span>默认commit次数 :</span>
</el-tooltip>
</label>
2020-05-20 15:27:01 +08:00
<el-input-number v-model="form.commitNumber" :step="1" :min="1" :max="88" size="large"></el-input-number>
</el-form-item>
<el-form-item v-for="(ele, index) in form.timeArr" :key="index" :prop="'timeArr.' + index + '.value'" :rules="{
required: true, message: '日期不能为空', trigger: 'blur'
}">
<label slot="label">
<el-tooltip class="item" content="要commit的日期范围" placement="top-start">
<span>commit日期范围{{index+1}} :</span>
</el-tooltip>
</label>
<el-date-picker v-model="ele.value" type="daterange" value-format="yyyy-MM-dd"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item v-for="(ele, index) in form.timeArr" :key="index">
<label slot="label">
<el-tooltip class="item" content="可选(默认使用默认commit次数)对应index的日期范围每个日期的commit次数" placement="top-start">
<span>该范围每天提交次数{{index+1}} :</span>
</el-tooltip>
</label>
2020-05-20 15:27:01 +08:00
<el-input-number v-model="ele.commitNumber" :step="1" :min="0" :max="88" ></el-input-number>
2020-01-02 14:19:05 +08:00
<el-button @click.prevent="removeTime(index)" :disabled="form.timeArr.length === 1">删除</el-button>
</el-form-item>
<el-form-item>
2020-01-08 17:13:17 +08:00
<el-button type="primary" @click="submitForm('form')" :disabled="(runNow === 4 || runNow === 1) && runNow !== 0">开始commit</el-button>
<el-button @click="addTimeRange" :disabled="runNow === 1 || runNow === 4">新增日期范围</el-button>
2020-01-10 17:01:45 +08:00
<el-button @click="reset" :disabled="runNow !== 1 && runNow !== 4">取消commit</el-button>
<el-button @click="clearLog" :disabled="showText.logStr === ''">清空日志</el-button>
</el-form-item>
</el-form>
2019-12-30 21:13:08 +08:00
<div class="form-title2">日志和文档</div>
2019-12-27 17:05:55 +08:00
<el-main>
2019-12-30 21:13:08 +08:00
<div class="log_form_father">
<el-form label-width="160px">
<el-form-item>
<label slot="label">
<el-tooltip content="通过日志了解插件运行信息" placement="top-start">
<span>插件运行日志 :</span>
</el-tooltip>
</label>
2019-12-30 21:13:08 +08:00
<el-input @input="formatLog" type="textarea"
:autosize="{ minRows: 1, maxRows: 8}"
placeholder="无法输入 仅用于展示" v-model="showText.logStr" :disabled="runNow === 1 || runNow === 0">
</el-form-item>
<el-form-item>
<label slot="label">
<el-tooltip content="点击开始commit,插件运行所需要的参数" placement="top-start">
2020-01-06 16:10:26 +08:00
<span>插件参数 :</span>
</el-tooltip>
</label>
2019-12-30 21:13:08 +08:00
<el-input @input="watchParamsChange" type="textarea"
:autosize="{ minRows: 1, maxRows: 4}"
placeholder="无法输入 仅用于展示" v-model="showText.paramsStr" :disabled="showText.paramsStr === ''">
</el-form-item>
<el-form-item label="请先阅读文档 :">
2020-01-08 17:13:17 +08:00
<el-link href="https://github.com/OBKoro1/autoCommit/wiki" type="primary" target="_blank">Readme</el-link>
<el-link href="https://github.com/OBKoro1/autoCommit/wiki/%E4%BD%BF%E7%94%A8%E9%A1%BB%E7%9F%A5" type="primary" target="_blank">使用文档</el-link>
<el-link href="https://github.com/OBKoro1/autoCommit/wiki/ChangeLog" type="primary" target="_blank">更新日志</el-link>
2019-12-30 21:13:08 +08:00
</el-form-item>
<div class="tip">觉得这个插件还不错的话, 请给我点个<el-link href="https://github.com/OBKoro1/autoCommit" type="primary" target="_blank">Star⭐</el-link>吧~</div>
2020-01-02 14:19:05 +08:00
<div v-if="!isProduction">
2020-01-08 14:08:09 +08:00
<div>{{ form }}</div>
2020-01-02 14:19:05 +08:00
</div>
</el-form>
2019-12-30 21:13:08 +08:00
</div>
2019-12-27 17:05:55 +08:00
</el-main>
</el-main>
</el-container>
</div>
</div>
</body>
<script src="../assets/scripts/vue.min.js"></script>
<script src="../assets/scripts/element2.13.min.js"></script>
<script>
let isWeb = false // 是否网页 不在vscode插件生态内
let vscode;
try{
vscode = acquireVsCodeApi()
}catch(err){
isWeb = true
}
new Vue({
el: '#app',
data() {
// 项目地址验证
const itemSrcCheck = (rule, value, callback) => {
if (value !== '点击选择要commit的项目文件夹') {
callback();
} else {
callback(new Error('请选择要commit的项目文件夹'));
}
}
return {
isProduction: false, // 是否为调试模式
mockLogTime: null, // 模拟数据的定时器
2019-12-30 21:13:08 +08:00
showText:{
oldParams: '', // 保存的参数
paramsStr: '', // commit参数
logArr: [], // 保存的日志
logStr: '', //
2020-01-02 14:19:05 +08:00
command: [],
data: []
2019-12-30 21:13:08 +08:00
},
2020-01-08 14:08:09 +08:00
runNow: 0, // 0 初始化 1运行中 2运行结束 3取消运行 4push中
form: {
// itemSrc: '/Users/koro/work/web_my/testCommit',
2020-01-07 22:34:31 +08:00
randomCommit: true,
itemSrc: '点击选择要commit的项目文件夹',
fileName: 'commit.md',
commitMsg: 'autoCommit',
timeArr: [
{
value: '',
commitNumber: 0
}
],
commitNumber: 10
},
rules: {
'itemSrc': [
{
validator: itemSrcCheck, // 项目地址
required: true,
message: '请选择要commit的项目文件夹'
}
],
'fileName': [
{
required: true,
message: '请选择要写入内容的文件'
}
],
'commitMsg': [
{
required: true,
message: '请填入要commit的内容'
}
],
'commitNumber': [
{
required: true
}
]
},
// 更多设置
more: false,
moreObj: {
scopeDay: 0, // 多长的时间范围
noCommitDay: 0, // 这段时间不提交几天
}
};
},
mounted() {
2019-12-30 21:13:08 +08:00
this.initListener();
if(isWeb){
this.form.itemSrc = '随便一个地址'
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.runCommit()
} else {
return false;
2019-12-27 17:05:55 +08:00
}
});
2019-12-26 17:47:37 +08:00
},
// 开始commit
runCommit() {
2019-12-30 21:13:08 +08:00
this.runNow = 1
this.clearLog()
this.showText.paramsStr = JSON.stringify(this.form)
2019-12-30 21:13:08 +08:00
this.showText.oldParams = this.showText.paramsStr
if(isWeb){
this.mockLog()
}else{
const params = {
form: this.form,
moreObj: this.moreObj
}
this.postMessage('commit', params);
}
},
// 验证表单数据
checkData() {
if(this.moreObj.scopeDay !== 0 && this.moreObj.scopeDay === this.moreObj.noCommitDay){
this.$message({
type: 'error',
showClose: true,
message: `更多设置中日期范围和不提交天数不能相同`,
});
return false
}
return true
2019-12-26 17:47:37 +08:00
},
// 发送消息到插件
2019-12-30 21:13:08 +08:00
postMessage(command, data) {
vscode.postMessage({
command,
data
});
},
2019-12-31 18:01:35 +08:00
logDebug(command,data){
this.showText.logArr.unshift(`command: ${command}`);
this.showText.logArr.unshift(`数据: ${data}`);
this.formatLog()
},
// 接收日志
2019-12-31 18:01:35 +08:00
acceptLogFn(paramArr){
const logStr = paramArr.join(' ')
this.showText.logArr.unshift(logStr);
this.formatLog()
},
// 注册
initListener() {
2019-12-31 18:01:35 +08:00
window.onmessage = (e) =>{
const { command, data } = event.data;
2020-01-02 14:19:05 +08:00
this.showText.command.unshift(command)
this.showText.data.unshift(data)
2020-01-08 14:08:09 +08:00
if(command === 'init-formData'){
if (data) {
this.form = data
}
} else if (command === 'choose item success') {
2019-12-31 18:01:35 +08:00
// 选择文件夹成功
this.form.itemSrc = data
}else if(command === 'choose item error'){
this.$message({
type: 'error',
showClose: true,
message: `${data}根目录没有.git文件夹`,
duration: 0
});
2020-01-08 17:13:17 +08:00
} else if(command === '回滚'){
this.runNow = 3;
}else if(command === '提交中...'){
this.runNow = 4
2020-01-08 14:08:09 +08:00
}else if(command === 'commit 完成'){
// commit 完成
this.runNow = 2
2019-12-31 18:01:35 +08:00
} else if(command === 'console-log'){
this.acceptLogFn(data)
}else if(command === 'isProduction'){
// 调试模式 查看通信
2020-01-10 17:01:45 +08:00
this.isProduction = true
2019-12-31 18:01:35 +08:00
}
2020-01-10 17:01:45 +08:00
if(!this.isProduction){
2019-12-31 18:01:35 +08:00
this.logDebug(command, data)
}
}
},
// 重置: commit成功和中断commit
reset() {
if(isWeb){
clearInterval(this.mockLogTime)
this.mockLogTime = null
} else{
this.postMessage('cancel autoCommit')
}
2019-12-30 21:13:08 +08:00
},
// 模拟日志 写html时用
2019-12-30 21:13:08 +08:00
mockLog(){
this.showText.logArr = [
'res 开始 undefined',
'res 结束',
'log 开始 [{"commit": "a6b5f3d","author": "OBKoro1 <1677593011@qq.com>","date": "2019-12-26 21:05:57 +0800","message": "init"}]',
'log 结束',
'commit内容 2019-12-27T08:00:00+08:000',
'总commit次数1'
]
let num = 0;
this.mockLogTime = setInterval(() => {
2019-12-30 21:13:08 +08:00
if(num< 100){
num++
this.showText.logArr.unshift(`一些文字${num}`)
this.formatLog()
}else{
this.reset()
}
}, 1000);
},
clearLog(){
this.showText.logArr = []
this.showText.logStr = ''
},
formatLog(){
this.showText.logStr = this.showText.logArr.join(`\n`)
},
watchParamsChange(){
this.showText.paramsStr = this.showText.oldParams
},
// 删除时间
removeTime(index) {
this.form.timeArr.splice(index, 1)
},
2019-12-30 21:13:08 +08:00
chooseItem() {
this.postMessage('choose-item')
},
// 增加时间范围选择
addTimeRange() {
this.form.timeArr.push({
value: '',
commitNumber: 0
});
},
2020-01-07 22:34:31 +08:00
switchChange(value){
if(value){
this.form.commitNumber = 10;
}else{
this.form.commitNumber = 1;
}
},
fileNameChange(value) {
if (value === '') {
this.form.fileName = 'commit.md'
2019-12-27 16:02:37 +08:00
}
},
commitMsgChange(value) {
if (value === '') {
this.form.commitMsg = 'autoCommit'
}
},
}
});
</script>
</html>