style(SPA): eslint rules upgrade && auto-fix

resources/spa/.eslintrc.js

@@ -7,13 +7,16 @@ module.exports = {
     'plugin:vue/recommended',
     '@vue/standard',
   ],
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
-    'vue/max-attributes-per-line': ['error', { singleline: 2 }],
     'comma-dangle': ['error', 'always-multiline'],
-  },
-  parserOptions: {
-    parser: 'babel-eslint',
+    'vue/max-attributes-per-line': ['error', { singleline: 2 }],
+    'vue/singleline-html-element-content-newline': ['off'],
+    'vue/no-use-v-if-with-v-for': ['off'],
+    'vue/no-v-html': ['off'],
   },
 }

resources/spa/src/components/ActionSheet.vue

@@ -1,16 +1,18 @@
 <template>
   <div @touchmove.prevent>
-    <transition name="toast">
+    <Transition name="toast">
       <div
         v-if="show"
         class="m-pop-box"
-        @click="cancel"/>
-    </transition>
+        @click="cancel"
+      />
+    </Transition>
 
-    <transition name="pop">
+    <Transition name="pop">
       <div
         v-if="show"
-        class="m-acbtn-box">
+        class="m-acbtn-box"
+      >
         <header v-if="tips">
           <h2 class="m-acbtn-title">{{ title }}</h2>
           <p class="m-acbtn-tips">{{ tips }}</p>
@@ -22,19 +24,21 @@
             :key="btn.text"
             :style="btn.style"
             class="m-acbtn"
-            @click="btn.methods(btn, index)">
+            @click="btn.methods(btn, index)"
+          >
             <a href="javascript:;">{{ btn.text }}</a>
           </li>
         </ul>
         <ul class="m-acbtn-list">
           <li
             class="m-acbtn"
-            @click="cancel">
+            @click="cancel"
+          >
             <a href="javascript:;">{{ cancelBtn }}</a>
           </li>
         </ul>
       </div>
-    </transition>
+    </Transition>
   </div>
 </template>
 

resources/spa/src/components/ApplyForTop.vue

@@ -1,12 +1,12 @@
 <template>
-  <transition name="toast">
+  <Transition name="toast">
     <div
       v-if="show"
       class="m-box-model m-pos-f"
       style="background-color: #f4f5f6; z-index: 101"
-      @touchmove.prevent>
-
-      <common-header :back="cancel">申请置顶</common-header>
+      @touchmove.prevent
+    >
+      <CommonHeader :back="cancel">申请置顶</CommonHeader>
 
       <main class="m-box-model m-aln-center m-justify-center">
         <div class="m-box-model m-lim-width">
@@ -19,14 +19,18 @@
                 :class="{ active: ~~day === ~~item }"
                 :style="{ width: `${1 / items.length * 100}%` }"
                 class="m-pinned-amount-btn"
-                @click="chooseDefaultDay(item)">{{ ((~~item)) }} 天</button>
+                @click="chooseDefaultDay(item)"
+              >
+                {{ ((~~item)) }} 天
+              </button>
             </div>
           </div>
 
           <template v-if="!isManager">
             <div
               class="m-box m-aln-center m-justify-bet m-bb1 m-pinned-row plr20 m-pinned-amount-customize m-main"
-              style="margin-top: .2rem">
+              style="margin-top: .2rem"
+            >
               <span>置顶金额</span>
               <div class="m-box m-aln-center">
                 <input
@@ -35,7 +39,8 @@
                   pattern="[0-9]*"
                   placeholder="输入金额"
                   oninput="value=value.slice(0,8)"
-                  class="m-flex-grow1 m-flex-shrink1 m-text-r">
+                  class="m-flex-grow1 m-flex-shrink1 m-text-r"
+                >
                 <span>{{ currencyUnit }}</span>
               </div>
             </div>
@@ -51,35 +56,37 @@
                   disabled="true"
                   readonly="true"
                   placeholder="总金额"
-                  style="background-color: transparent">
+                  style="background-color: transparent"
+                >
                 <span>{{ currencyUnit }}</span>
               </div>
             </div>
             <p class="placeholder m-flex-grow1 m-flex-shrink1">
               可用{{ currencyUnit }}{{ currencySum }}
             </p>
           </template>
-
         </div>
         <div
           class="plr20 m-lim-width"
-          style="margin-top: 0.6rem">
+          style="margin-top: 0.6rem"
+        >
           <button
             :disabled="disabled || loading"
             class="m-long-btn m-signin-btn"
-            @click="showPasswordConfirm">
-            <circle-loading v-if="loading"/>
+            @click="showPasswordConfirm"
+          >
+            <CircleLoading v-if="loading" />
             <span v-else>{{ isOwner || isManager ? '确认置顶' : '申请置顶' }}</span>
           </button>
         </div>
       </main>
 
-      <password-confirm
+      <PasswordConfirm
         ref="password"
-        @submit="applyTop"/>
-
+        @submit="applyTop"
+      />
     </div>
-  </transition>
+  </Transition>
 </template>
 
 <script>

resources/spa/src/components/Avatar.vue

@@ -1,20 +1,23 @@
 <template>
-  <router-link
+  <RouterLink
     :to="path"
     :class="styles"
     class="m-avatar-box"
-    @click.native.stop>
+    @click.native.stop
+  >
     <template v-if="anonymity">匿</template>
     <img
       v-else-if="avatar"
       :src="avatar"
       class="m-avatar-img"
-      @error="handelError">
+      @error="handelError"
+    >
     <i
       v-if="icon"
       :style="icon"
-      class="m-avatar-icon"/>
-  </router-link>
+      class="m-avatar-icon"
+    />
+  </RouterLink>
 </template>
 
 <script>

resources/spa/src/components/CommentInput.vue

@@ -1,16 +1,18 @@
 <template>
   <div @touchmove.prevent>
-    <transition name="toast">
+    <Transition name="toast">
       <div
         v-if="show"
         class="m-pop-box"
-        @click="cancel"/>
-    </transition>
-    <transition name="pop">
+        @click="cancel"
+      />
+    </Transition>
+    <Transition name="pop">
       <div
         v-if="show"
         class="c-comment-input"
-        @touch.prevent>
+        @touch.prevent
+      >
         <span class="textarea-wrap">
           <textarea
             ref="textarea"
@@ -21,24 +23,29 @@
             @focus="onFocus"
             @blur="moveCurPos"
             @keydown.enter.prevent="sendText"
-            @input="moveCurPos"/>
+            @input="moveCurPos"
+          />
           <textarea
             ref="shadow"
             :value="shadowText"
             :disabled="true"
             class="textarea-shadow"
             rows="1"
-            maxlength="255"/>
+            maxlength="255"
+          />
         </span>
         <div class="submit-wrap">
           <span v-if="contentText.length >= 210" class="content-length">{{ contentText.length }}/255</span>
           <button
             :disabled="!contentText.length"
             class="submit-btn"
-            @click="sendText">发送</button>
+            @click="sendText"
+          >
+            发送
+          </button>
         </div>
       </div>
-    </transition>
+    </Transition>
   </div>
 </template>
 

resources/spa/src/components/DiySelect.vue

@@ -2,18 +2,21 @@
   <div
     :class="{open}"
     class="diy-select"
-    @click="onClick">
+    @click="onClick"
+  >
     <div class="diy-select--label">{{ curSelectValue }}</div>
     <div
       v-show="open"
-      class="diy-select--options">
+      class="diy-select--options"
+    >
       <div
         v-for="option in options"
         :key="option.label"
         class="diy-select--option"
-        @click="setCurVal(option)">
+        @click="setCurVal(option)"
+      >
         <template v-if="option.hasMsg">
-          <v-badge :dot="option.hasMsg">{{ option.label }}</v-badge>
+          <VBadge :dot="option.hasMsg">{{ option.label }}</VBadge>
         </template>
         <span v-else>{{ option.label }}</span>
       </div>

resources/spa/src/components/FeedCard/CommentItem.vue

@@ -1,24 +1,32 @@
 <template>
   <p class="m-text-box">
-    <router-link
+    <RouterLink
       :to="`/users/${user.id}`"
       tag="span"
       exact
-      class="m-comment-usr">
+      class="m-comment-usr"
+    >
       <a>{{ user.name }}</a>
-    </router-link>
+    </RouterLink>
     <span
       v-if="replyUser"
-      class="m-comment-usr">
-      回复<router-link :to="`/users/${replyUser.id}`">{{ replyUser.name }}</router-link>
+      class="m-comment-usr"
+    >
+      回复<RouterLink :to="`/users/${replyUser.id}`">{{ replyUser.name }}</RouterLink>
     </span>
     <span
       class="m-comment-body"
-      @click="handelClick">{{ body }}</span>
+      @click="handelClick"
+    >
+      {{ body }}
+    </span>
     <span
       v-if="pinned"
       class="m-art-comment-icon-top"
-      style="margin-left: 5px; height: auto">置顶</span>
+      style="margin-left: 5px; height: auto"
+    >
+      置顶
+    </span>
   </p>
 </template>
 <script>