muzea/index.html

## index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
html, body {
  margin: 0;
}
.dialogue-list {
  width: 80vw;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
input {
  width: 100%;
  text-align: center;
  height: 30px;
}
  </style>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="file" @change="assFileChange" />
    <button @click="dump2file">dump2file</button>
    <div class="dialogue-list" @keyup.enter="saveAndNext" @keyup.down="next" @keyup.up="prev">
      <div class="item" v-for="(item, index) in assList">
        <p class="en">{{item.en}}</p>
        <div class="zh"><input :id="'item-zh-' + index" :value="item.zh" /></div>
      </div>
    </div>
  </div>
</body>
<script>
const enDivider = 'English,,0,0,0,,';
const zhDivider = 'Chinese,,0,0,0,,';
function parse(text) {
  const list = text.split('\n');
  const length = list.length;
  let i = 0;
  const assList = [];
  while (i < length) {
    const item = {
      prefix: '',
      en: '',
      zh: '',
    };
    if (list[i].length === 0) {
      i += 1;
      continue;
    }
    const [prefix, en] = list[i].split(enDivider);
    item.prefix = prefix;
    item.en = en;
    item.zh = en;
    i += 1;
    if (i < length && list[i].indexOf(zhDivider) > 0) {
      const [, zh] = list[i].split(zhDivider);
      item.zh = zh;
      i += 1;
    }
    assList.push(item);
  }
  return assList;
}
function stringify(list) {
  return list.map(it => {
    return `${it.prefix}${enDivider}${it.en}
${it.prefix}${zhDivider}${it.zh}`
  }).join('\n')
}
function downloadFile(fileName, content) {
  var aLink = document.createElement('a');
  var blob = new Blob([content]);
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  aLink.download = fileName;
  aLink.href = URL.createObjectURL(blob);
  aLink.dispatchEvent(evt);
}
function format(str) {
  return str.toString().length === 1 ? '0'.concat(str) : str;
}
function getFullTime(time = new Date(), shortVersion = false) {
  let month = time.getMonth() + 1;
  month = format(month);
  let day = time.getDate();
  day = format(day);
  let hour = time.getHours();
  hour = format(hour);
  let min = time.getMinutes();
  min = format(min);
  let sec = time.getSeconds();
  sec = format(sec);
  if (shortVersion) {
    return `${month}_${day}_${hour}_${min}`;
  }
  return `${time.getFullYear()}_${month}_${day}_${hour}_${min}_${sec}`;
}

var app = new Vue({
  el: '#app',
  data: {
    assFile: null,
    assContent: '',
    assList: [],
  },
  methods: {
    assFileChange(e) {
      var files = e.target.files;
      const loaded = (resp) => {
        this.assContent = resp.target.result;
        this.assList.push(...parse(resp.target.result));
      }
      if(files[0]) {
          var reader = new FileReader();
          reader.readAsText(files[0]);
          reader.onload = loaded;
      }
    },
    saveAndNext(e) {
      let currentIndex = localStorage.getItem('currentIndex');
      if (!currentIndex) {
        currentIndex = 0;
      } else {
        currentIndex = (currentIndex + 1) % 10;
      }
      localStorage.setItem(`data_${currentIndex}`, stringify(this.assList));
      localStorage.setItem('currentIndex', currentIndex);
      const id = e.target.id;
      if (id && id.indexOf('item-zh-') >= 0) {
        let [, idIndex] = id.split('item-zh-');
        this.assList[idIndex].zh = e.target.value;
        idIndex = parseInt(idIndex) + 1;
        if (idIndex < this.assList.length) {
          document.querySelector(`#item-zh-${idIndex}`).focus();
          document.querySelector(`#item-zh-${idIndex}`).select();
        }
      }
    },
    load(index) {
      const text = localStorage.getItem(`data_${index}`);
      if (text && text.length) {
        this.assList = parse(text);
      }
    },
    next(e) {
      const id = e.target.id;
      if (id && id.indexOf('item-zh-') >= 0) {
        let [, idIndex] = id.split('item-zh-');
        idIndex = parseInt(idIndex) + 1;
        if (idIndex < this.assList.length) {
          document.querySelector(`#item-zh-${idIndex}`).focus();
          document.querySelector(`#item-zh-${idIndex}`).select();
        }
      }
    },
    prev(e) {
      const id = e.target.id;
      if (id && id.indexOf('item-zh-') >= 0) {
        let [, idIndex] = id.split('item-zh-');
        idIndex = parseInt(idIndex) - 1;
        if (idIndex >= 0) {
          document.querySelector(`#item-zh-${idIndex}`).focus();
          document.querySelector(`#item-zh-${idIndex}`).select();
        }
      }
    },
    dump2file() {
      const result = stringify(this.assList);
      downloadFile(`l6.${getFullTime()}.ass`, result);
    }
  }
});
</script>
</html>
	<!DOCTYPE html>
	<html lang="zh-cn">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style>
	html, body {
	margin: 0;
	}
	.dialogue-list {
	width: 80vw;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}
	input {
	width: 100%;
	text-align: center;
	height: 30px;
	}
	</style>
	<title>Document</title>
	</head>
	<body>
	<div id="app">
	<input type="file" @change="assFileChange" />
	<button @click="dump2file">dump2file</button>
	<div class="dialogue-list" @keyup.enter="saveAndNext" @keyup.down="next" @keyup.up="prev">
	<div class="item" v-for="(item, index) in assList">
	<p class="en">{{item.en}}</p>
	<div class="zh"><input :id="'item-zh-' + index" :value="item.zh" /></div>
	</div>
	</div>
	</div>
	</body>
	<script>
	const enDivider = 'English,,0,0,0,,';
	const zhDivider = 'Chinese,,0,0,0,,';
	function parse(text) {
	const list = text.split('\n');
	const length = list.length;
	let i = 0;
	const assList = [];
	while (i < length) {
	const item = {
	prefix: '',
	en: '',
	zh: '',
	};
	if (list[i].length === 0) {
	i += 1;
	continue;
	}
	const [prefix, en] = list[i].split(enDivider);
	item.prefix = prefix;
	item.en = en;
	item.zh = en;
	i += 1;
	if (i < length && list[i].indexOf(zhDivider) > 0) {
	const [, zh] = list[i].split(zhDivider);
	item.zh = zh;
	i += 1;
	}
	assList.push(item);
	}
	return assList;
	}
	function stringify(list) {
	return list.map(it => {
	return `${it.prefix}${enDivider}${it.en}
	${it.prefix}${zhDivider}${it.zh}`
	}).join('\n')
	}
	function downloadFile(fileName, content) {
	var aLink = document.createElement('a');
	var blob = new Blob([content]);
	var evt = document.createEvent("MouseEvents");
	evt.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	aLink.download = fileName;
	aLink.href = URL.createObjectURL(blob);
	aLink.dispatchEvent(evt);
	}
	function format(str) {
	return str.toString().length === 1 ? '0'.concat(str) : str;
	}
	function getFullTime(time = new Date(), shortVersion = false) {
	let month = time.getMonth() + 1;
	month = format(month);
	let day = time.getDate();
	day = format(day);
	let hour = time.getHours();
	hour = format(hour);
	let min = time.getMinutes();
	min = format(min);
	let sec = time.getSeconds();
	sec = format(sec);
	if (shortVersion) {
	return `${month}_${day}_${hour}_${min}`;
	}
	return `${time.getFullYear()}_${month}_${day}_${hour}_${min}_${sec}`;
	}

	var app = new Vue({
	el: '#app',
	data: {
	assFile: null,
	assContent: '',
	assList: [],
	},
	methods: {
	assFileChange(e) {
	var files = e.target.files;
	const loaded = (resp) => {
	this.assContent = resp.target.result;
	this.assList.push(...parse(resp.target.result));
	}
	if(files[0]) {
	var reader = new FileReader();
	reader.readAsText(files[0]);
	reader.onload = loaded;
	}
	},
	saveAndNext(e) {
	let currentIndex = localStorage.getItem('currentIndex');
	if (!currentIndex) {
	currentIndex = 0;
	} else {
	currentIndex = (currentIndex + 1) % 10;
	}
	localStorage.setItem(`data_${currentIndex}`, stringify(this.assList));
	localStorage.setItem('currentIndex', currentIndex);
	const id = e.target.id;
	if (id && id.indexOf('item-zh-') >= 0) {
	let [, idIndex] = id.split('item-zh-');
	this.assList[idIndex].zh = e.target.value;
	idIndex = parseInt(idIndex) + 1;
	if (idIndex < this.assList.length) {
	document.querySelector(`#item-zh-${idIndex}`).focus();
	document.querySelector(`#item-zh-${idIndex}`).select();
	}
	}
	},
	load(index) {
	const text = localStorage.getItem(`data_${index}`);
	if (text && text.length) {
	this.assList = parse(text);
	}
	},
	next(e) {
	const id = e.target.id;
	if (id && id.indexOf('item-zh-') >= 0) {
	let [, idIndex] = id.split('item-zh-');
	idIndex = parseInt(idIndex) + 1;
	if (idIndex < this.assList.length) {
	document.querySelector(`#item-zh-${idIndex}`).focus();
	document.querySelector(`#item-zh-${idIndex}`).select();
	}
	}
	},
	prev(e) {
	const id = e.target.id;
	if (id && id.indexOf('item-zh-') >= 0) {
	let [, idIndex] = id.split('item-zh-');
	idIndex = parseInt(idIndex) - 1;
	if (idIndex >= 0) {
	document.querySelector(`#item-zh-${idIndex}`).focus();
	document.querySelector(`#item-zh-${idIndex}`).select();
	}
	}
	},
	dump2file() {
	const result = stringify(this.assList);
	downloadFile(`l6.${getFullTime()}.ass`, result);
	}
	}
	});
	</script>
	</html>