add display comment index option.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fc2live-comment",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "author": "umi",
   "description": "Comment viewer for FC2 Live",
   "license": "MIT",

src/renderer/components/Comment.vue

@@ -15,7 +15,7 @@
 					<div class="comment_text" v-bind:style="[configStyle.system_comment_text]">{{ comment.comment }}</div>
 				</div>
 				<div v-else class="comment_body" v-bind:style="configStyle.comment_body">
-					<div class="user_name" v-bind:class="{ ng_name: comment.type.indexOf('ngName') !== -1 }" v-bind:style="[userNameStyle, configStyle.user_name]">{{ comment.user_name }}</div>
+					<div class="user_name" v-bind:class="{ ng_name: comment.type.indexOf('ngName') !== -1 }" v-bind:style="[userNameStyle, configStyle.user_name]"><span v-bind:style="configStyle.display_index">[{{ comment.index }}] </span>{{ comment.user_name }}</div>
 					<div class="comment_text" v-bind:class="{ ng_keyword: comment.type.indexOf('ngKeyword') !== -1, ng_user: comment.type.indexOf('ngUser') !== -1 }" v-bind:style="[configStyle.comment_text]">{{ comment.comment }}</div>
 				</div>
 			</li>
@@ -137,6 +137,9 @@
 					},
 					system_time: {
 						color: '#' + this.$store.getters['Config/style'].systemTime
+					},
+					display_index: {
+						display: this.$store.getters['Config/display_index'] ? 'inline' : 'none'
 					}
 				}
 			}

src/renderer/components/Config.vue

@@ -23,6 +23,13 @@
 					</label>
 					<input ref="bouyomiPort" @change="changePort" type="text" pattern="\d*" maxlength="5" placeholder="50001" v-bind:value="bouyomiPort">
 				</div>
+
+				<div class="check_group">
+					<label for="display_index_checkbox">
+						<input @change="changeDisplayIndex" type="checkbox" id="display_index_checkbox" name="display_index_checkbox" v-model="check_display_index">
+						<span>Comment Index</span>
+					</label>
+				</div>
 			</div>
 
 			<div class="title">
@@ -131,7 +138,8 @@
 			return {
 				radio_style_type: '1',
 				platform: require('os').platform(),
-				check_bouyomi: false
+				check_bouyomi: false,
+				check_display_index: false
 			}
 		},
 		computed: {
@@ -218,6 +226,9 @@
 			changeBouyomi () {
 				this.$store.dispatch('Config/setBouyomi', this.check_bouyomi)
 			},
+			changeDisplayIndex () {
+				this.$store.dispatch('Config/setDisplayIndex', this.check_display_index)
+			},
 			clearData () {
 				this.$store.dispatch('Config/clear')
 				this.$store.dispatch('Comment/clear')
@@ -228,9 +239,11 @@
 			this.$nextTick(function () {
 				const style = this.$store.getters['Config/style_type']
 				const bouyomi = this.$store.getters['Config/bouyomi']
+				const displayIndex = this.$store.getters['Config/display_index']
 				this.$refs['theme' + style].checked = true
 				this.radio_style_type = style
 				this.check_bouyomi = bouyomi === 1
+				this.check_display_index = displayIndex === 1
 			})
 		}
 	}

src/renderer/store/modules/Comment.js

@@ -28,9 +28,13 @@ class CommentManager {
 					if (data.status === 0) {
 						this.loadCount++
 						let comments = []
-						if (data.comments.length > 0) {
+						if (this.index < data.last_comment_index) {
 							this.index = data.last_comment_index
+						}
+						if (data.comments.length > 0) {
+							let count = this.index - (data.comments.length - 1)
 							data.comments.forEach((comment) => {
+								comment.index = count++
 								comment.type = []
 								if (comment.anonymous) {
 									comment.user_name = `匿名(${this.getAnonymousNum(comment.hash)})`

src/renderer/store/modules/Config.js

@@ -39,7 +39,8 @@ const state = {
 	style: _.defaults(_.omitBy(storedStyle, (obj) => _.isEmpty(obj)), defaultStyle),
 	style_type: nvl(localStorage.getItem('config_style_type'), 1),
 	bouyomi: ~~nvl(localStorage.getItem('config_bouyomi'), 0),
-	bouyomi_port: ~~nvl(localStorage.getItem('config_bouyomi_port'), 50001)
+	bouyomi_port: ~~nvl(localStorage.getItem('config_bouyomi_port'), 50001),
+	display_index: ~~nvl(localStorage.getItem('config_display_index'), 0)
 }
 
 const mutations = {
@@ -60,6 +61,9 @@ const mutations = {
 	},
 	SET_BOUYOMI_PORT (state, port) {
 		state.bouyomi_port = port
+	},
+	SET_DISPLAY_INDEX (state, type) {
+		state.display_index = type
 	}
 }
 
@@ -106,13 +110,19 @@ const actions = {
 		state.commit('SET_BOUYOMI_PORT', bouyomiPort)
 		localStorage.setItem('config_bouyomi_port', bouyomiPort)
 	},
+	setDisplayIndex (state, type) {
+		const displayIndex = type ? 1 : 0
+		state.commit('SET_DISPLAY_INDEX', displayIndex)
+		localStorage.setItem('config_display_index', displayIndex)
+	},
 	clear (state) {
 		state.commit('SET_CHANNEL', '')
 		state.commit('SET_TOKEN', '')
 		state.commit('SET_STYLE', defaultStyle)
 		state.commit('SET_STYLE_TYPE', '1')
 		state.commit('SET_BOUYOMI', 0)
 		state.commit('SET_BOUYOMI_PORT', 50001)
+		state.commit('SET_DISPLAY_INDEX', 0)
 		localStorage.clear()
 	}
 }
@@ -123,7 +133,8 @@ const getters = {
 	style (state) { return state.style },
 	style_type (state) { return state.style_type },
 	bouyomi (state) { return state.bouyomi },
-	bouyomi_port (state) { return state.bouyomi_port }
+	bouyomi_port (state) { return state.bouyomi_port },
+	display_index (state) { return state.display_index }
 }
 
 export default {