378 lines
14 KiB
HTML
378 lines
14 KiB
HTML
<!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>
|
||
<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">
|
||
<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" prop="commitNumber">
|
||
<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>
|
||
<el-input-number v-model="form.commitNumber" :step="1" :min="2" :max="88" size="large"></el-input-number>
|
||
</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>
|
||
<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>
|
||
<el-input-number v-model="ele.commitNumber" :step="1" :min="0" :max="88" ></el-input-number>
|
||
<el-button @click.prevent="removeTime(index)" :disabled="form.timeArr.length === 1">删除</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<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>
|
||
<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>
|
||
<div class="form-title2">日志和文档</div>
|
||
<el-main>
|
||
<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>
|
||
<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">
|
||
<span>插件参数 :</span>
|
||
</el-tooltip>
|
||
</label>
|
||
<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="请先阅读文档 :">
|
||
<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>
|
||
</el-form-item>
|
||
<div class="tip">觉得这个插件还不错的话, 请给我点个<el-link href="https://github.com/OBKoro1/autoCommit" type="primary" target="_blank">Star⭐️</el-link>吧~</div>
|
||
<div v-if="!isProduction">
|
||
<div>{{ form }}</div>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</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, // 模拟数据的定时器
|
||
showText:{
|
||
oldParams: '', // 保存的参数
|
||
paramsStr: '', // commit参数
|
||
logArr: [], // 保存的日志
|
||
logStr: '', //
|
||
command: [],
|
||
data: []
|
||
},
|
||
runNow: 0, // 0 初始化 1运行中 2运行结束 3取消运行 4push中
|
||
form: {
|
||
// itemSrc: '/Users/koro/work/web_my/testCommit',
|
||
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
|
||
}
|
||
]
|
||
}
|
||
};
|
||
},
|
||
mounted() {
|
||
this.initListener();
|
||
if(isWeb){
|
||
this.form.itemSrc = '随便一个地址'
|
||
}
|
||
},
|
||
methods: {
|
||
submitForm(formName) {
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
this.runCommit()
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
// 开始commit
|
||
runCommit() {
|
||
this.runNow = 1
|
||
this.clearLog()
|
||
this.showText.paramsStr = JSON.stringify(this.form)
|
||
this.showText.oldParams = this.showText.paramsStr
|
||
if(isWeb){
|
||
this.mockLog()
|
||
}else{
|
||
this.postMessage('commit', this.form);
|
||
}
|
||
},
|
||
// 发送消息到插件
|
||
postMessage(command, data) {
|
||
vscode.postMessage({
|
||
command,
|
||
data
|
||
});
|
||
},
|
||
logDebug(command,data){
|
||
this.showText.logArr.unshift(`command: ${command}`);
|
||
this.showText.logArr.unshift(`数据: ${data}`);
|
||
this.formatLog()
|
||
},
|
||
// 接收日志
|
||
acceptLogFn(paramArr){
|
||
const logStr = paramArr.join(' ')
|
||
this.showText.logArr.unshift(logStr);
|
||
this.formatLog()
|
||
},
|
||
// 注册
|
||
initListener() {
|
||
window.onmessage = (e) =>{
|
||
const { command, data } = event.data;
|
||
this.showText.command.unshift(command)
|
||
this.showText.data.unshift(data)
|
||
if(command === 'init-formData'){
|
||
if (data) {
|
||
this.form = data
|
||
}
|
||
} else if (command === 'choose item success') {
|
||
// 选择文件夹成功
|
||
this.form.itemSrc = data
|
||
}else if(command === 'choose item error'){
|
||
this.$message({
|
||
type: 'error',
|
||
showClose: true,
|
||
message: `${data}根目录没有.git文件夹`,
|
||
duration: 0
|
||
});
|
||
} else if(command === '回滚'){
|
||
this.runNow = 3;
|
||
}else if(command === '提交中...'){
|
||
this.runNow = 4
|
||
}else if(command === 'commit 完成'){
|
||
// commit 完成
|
||
this.runNow = 2
|
||
} else if(command === 'console-log'){
|
||
this.acceptLogFn(data)
|
||
}else if(command === 'isProduction'){
|
||
// 调试模式 查看通信
|
||
this.isProduction = true
|
||
}
|
||
if(!this.isProduction){
|
||
this.logDebug(command, data)
|
||
}
|
||
}
|
||
},
|
||
// 重置： commit成功和中断commit
|
||
reset() {
|
||
if(isWeb){
|
||
clearInterval(this.mockLogTime)
|
||
this.mockLogTime = null
|
||
} else{
|
||
this.postMessage('cancel autoCommit')
|
||
}
|
||
},
|
||
// 模拟日志 写html时用
|
||
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(() => {
|
||
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)
|
||
},
|
||
chooseItem() {
|
||
this.postMessage('choose-item')
|
||
},
|
||
// 增加时间范围选择
|
||
addTimeRange() {
|
||
this.form.timeArr.push({
|
||
value: '',
|
||
commitNumber: 0
|
||
});
|
||
},
|
||
switchChange(value){
|
||
if(value){
|
||
this.form.commitNumber = 10;
|
||
}else{
|
||
this.form.commitNumber = 1;
|
||
}
|
||
},
|
||
fileNameChange(value) {
|
||
if (value === '') {
|
||
this.form.fileName = 'commit.md'
|
||
}
|
||
},
|
||
commitMsgChange(value) {
|
||
if (value === '') {
|
||
this.form.commitMsg = 'autoCommit'
|
||
}
|
||
},
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</html> |