feat: 增加用户授权功能

尝试解决Google市场审核过慢的问题

src/options/components/Permissions.vue

@@ -2,20 +2,30 @@
   <v-layout class="mt-3">
     <v-flex xs12 sm6 offset-sm3>
       <v-card>
-        <v-img src="http://sf.co.ua/13/04/wallpaper-2729515.jpg" aspect-ratio="2.75"></v-img>
+        <v-img src="./assets/banner/default.jpg" aspect-ratio="2.75"></v-img>
 
-        <v-card-title primary-title>
-          <div>
-            <h3 class="headline">{{ words.title }}</h3>
-            <div>
-              <li class="body-2" v-for="(item, index) in words.permissions" :key="index">{{item}}</li>
+        <v-card-title class="pb-1">
+          <div v-if="!cancelled">
+            <h3 class="title mb-2">{{ words.title }}</h3>
+            <h3>{{ words.subtitle }}</h3>
+            <div class="mt-1 ml-3">
+              <li
+                class="subheading"
+                v-for="(item, index) in words.permissions"
+                :key="index"
+              >{{item}}</li>
+            </div>
+            <div class="logo">
+              <v-img src="./assets/icon-64.png" width="64"></v-img>
             </div>
           </div>
+
+          <div v-else class="title mb-2">{{ words.cancelled }}</div>
         </v-card-title>
 
-        <v-card-actions>
-          <v-btn flat color="success" @click="request">授权</v-btn>
-          <v-btn flat color="orange">我不用了</v-btn>
+        <v-card-actions v-if="!cancelled">
+          <v-btn flat color="success" @click="authorize">{{ words.authorize }}</v-btn>
+          <v-btn flat color="orange" @click="cancel">{{ words.cancel }}</v-btn>
         </v-card-actions>
       </v-card>
     </v-flex>
@@ -27,23 +37,41 @@ export default Vue.extend({
   data() {
     return {
       words: {
-        title: "PT 助手需要以下权限才能正常使用：",
-        permissions: ["所有网站的访问权限", "选项卡的读取权限"]
-      }
+        title: "感谢您选择 PT 助手",
+        subtitle: "现在距成功仅有一步之遥，助手需要以下权限才能正常使用：",
+        authorize: "授权",
+        cancel: "我不用了",
+        permissions: [
+          "所有网站的访问权限，用于搜索和读取做种数据；",
+          "活动选项卡的读取权限，用于显示助手图标；"
+        ],
+        cancelled: "世界如此之大，期待有缘再相会！"
+      },
+      cancelled: false
     };
   },
   methods: {
-    request() {
-      // 权限必须在用户操作下请求，例如按钮单击的事件处理函数。
-      chrome.permissions.request(
-        {
-          permissions: ["tabs"],
-          origins: ["*://*/*"]
-        },
-        granted => {
-          this.$emit("update", granted);
-        }
-      );
+    /**
+     * 发起用户授权
+     */
+    authorize() {
+      if (chrome && chrome.permissions) {
+        // 权限必须在用户操作下请求，例如按钮单击的事件处理函数。
+        chrome.permissions.request(
+          {
+            permissions: ["tabs"],
+            origins: ["*://*/*"]
+          },
+          granted => {
+            this.$emit("update", granted);
+          }
+        );
+      } else {
+        this.$emit("update", true);
+      }
+    },
+    cancel() {
+      this.cancelled = true;
     }
   }
 });
@@ -52,4 +80,11 @@ export default Vue.extend({
 .item {
   padding: 5px;
 }
+
+.logo {
+  position: absolute;
+  right: 20px;
+  bottom: 60px;
+  opacity: 0.5;
+}
 </style>