Add app visible handler && Weibo login

dev/manifest.json

@@ -24,17 +24,20 @@
   "content_scripts": [
     {
       "matches": [
-        // "*://github.com/*",
-        "*://git.elenet.me/*",
-        "*://www.baidu.com/*",
-        "*://www.google.com/*"
+        "*://www.baidu.com/*"
       ],
       "js": [
         "vendor.js",
         "content.js"
       ]
     }
   ],
+  "browser_action": {
+    "default_icon": {
+      "19": "icon.png",
+      "38": "icon.png"
+    }
+  },
   "web_accessible_resources": [
     "content.html"
   ],

src/background/index.js

@@ -5,6 +5,10 @@ import {
   fetchImgToBase64
 } from './util'
 
+chrome.browserAction.onClicked.addListener(tab => {
+  crun.$emit('show-app', true, true)
+})
+
 crun.$on('fetch-expression', (params, cb) => {
   QueryEngine.sogou(params).then(cb)
 })
@@ -14,5 +18,5 @@ crun.$on('url-to-base64', (url, cb) => {
 })
 
 crun.$on('uniform-url', (base64, cb) => {
-  PicBed.sm(base64).then(cb, console.log)
+  PicBed.weibo(base64).then(cb, console.log)
 })

src/background/picBed.js

@@ -1,5 +1,4 @@
 import axios from 'axios'
-import swal from 'sweetalert'
 import { dataURItoBlob, removeBase64Head } from './util'
 
 const CONFIG = {
@@ -34,14 +33,8 @@ function pid2url ({ pid, ext }, type = 'large') {
   return `https://ws${zone}.sinaimg.cn/${type}/${pid}${ext}`
 }
 
-function weiboLoding () {
-}
-
-function log (params) {
-  swal({
-    title: '额，图床服务发生一点错误',
-    text: '然后，啥也别问换个图床试试~'
-  })
+function log () {
+  window.alert('emmm... 图传服务好像崩掉了~')
 }
 
 export default {
@@ -51,7 +44,11 @@ export default {
     data.append('smfile', dataURItoBlob(base64, 'temp.png'))
     return axios.post(api, data).then(({ data }) => {
       const { data: res } = data
-      return res.url
+      return {
+        url: res.url,
+        err: '',
+        server: 'sm'
+      }
     }, log)
   },
 
@@ -61,15 +58,27 @@ export default {
     data.append('b64_data', removeBase64Head(base64))
     return axios.post(api, data).then(({ data }) => {
       let url = ''
+      let err = ''
       try {
         const res = JSON.parse(data.substring(data.indexOf('{"')))
-        url = pid2url({
-          pid: res.data.pics.pic_1.pid,
-          ext: '.jpg'
-        })
+        const { pid, ret } = res.data.pics.pic_1 || {}
+        if (ret === 1) {
+          url = pid2url({
+            pid,
+            ext: '.jpg'
+          })
+        } else {
+          err = '微博图床未登录'
+        }
       } catch (e) {
+        url = ''
+        err = '微博图床发生一些错误'
+      }
+      return {
+        url,
+        err,
+        server: 'weibo'
       }
-      return url
     }, log)
   }
 }

src/content/app.vue

@@ -7,6 +7,7 @@
       :page.sync="page"
       :loading="loading">
     </expression-list>
+    <span class="icon-close close-btn" @click="toggleView(false)"></span>
   </section>
 </template>
 
@@ -42,6 +43,10 @@ export default {
     }
   },
 
+  created () {
+    crun.$on('show-app', this.toggleView)
+  },
+
   methods: {
     fetchExp (v) {
       this.query = v
@@ -64,6 +69,13 @@ export default {
       this.loading = false
       this.total = total
       this.data = this.data.concat(data)
+    },
+
+    toggleView (visible) {
+      window.parent.postMessage({
+        id: 'chrome-extension-aidou',
+        value: visible
+      }, '*')
     }
   },
 
@@ -86,21 +98,37 @@ html,
 body {
   width: 100%;
   height: 100%;
+  font-size: 12px;
 }
 
 #chrome-extension-aidou {
-  $border-color: #ebebeb;
+  position: relative;
   z-index: 100;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: 30px 40px;
-  color: #3e5165;
-  border-left: 1px solid $border-color;
+  padding: 40px 50px 40px 60px;
+  border-left: 1px solid #ebebeb;
   background: #fff;
+  color: #3e5165;
   font-weight: 200;
+
+  .close-btn {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 20px;
+    color: #929aa3;
+    font-size: 14px;
+    cursor: pointer;
+    transition: color .2s ease-in;
+
+    &:hover {
+      color: #55b559;
+    }
+  }
 }
 </style>
 

src/content/components/app-header.vue

@@ -146,11 +146,10 @@ export default {
       }
 
       &:hover {
-        color: #55b559;
+        color: #dc602e;
 
         .text {
           opacity: 1;
-
           transform: translate3d(-50%, -120%, 0);
         }
       }

src/content/components/expression.vue

@@ -7,8 +7,10 @@
 
 <script>
 import crun from '@/common/crun'
-import copy from './copy'
+import copy from '../util/copy'
 import Loading from './loading'
+import showLinks from './showLinks'
+
 export default {
   props: {
     exp: Object
@@ -39,20 +41,47 @@ export default {
 
     fetchMarkUrk () {
       if (!this.src) return
-      this.$swal('生成图床链接......', { button: false })
-      crun.$emit('uniform-url', this.src).then(url => {
-        const mdUrl = `![](${url})`
-        copy(mdUrl, ok => {
-          if (!ok) return
-          this.$swal({
-            title: '复制成功',
-            text: mdUrl,
-            icon: 'success',
-            buttons: false,
-            timer: 2000
-          })
+      this.$swal('生成图床链接中......', { button: false })
+      crun.$emit('uniform-url', this.src).then(({ url, err = '图床服务出错!', server }) => {
+        if (!url) {
+          return this.picBedErrHandler(server, err)
+        }
+        this.$swal({
+          content: showLinks(url),
+          buttons: false
         })
+
+        // const mdUrl = `![](${url})`
+        // copy(mdUrl, ok => {
+        //   if (!ok) return
+        //   this.$swal({
+        //     title: '复制成功',
+        //     text: mdUrl,
+        //     icon: 'success',
+        //     buttons: false,
+        //     timer: 2000
+        //   })
+        // })
       })
+    },
+
+    picBedErrHandler (server, err) {
+      if (server === 'weibo') {
+        this.$swal({
+          text: `${err}，先登录新微博后重试`,
+          icon: 'warning',
+          buttons: true
+          }).then(v => {
+            if (!v) return
+             window.open('http://weibo.com/?topnav=1&mod=logo')
+          })
+        } else {
+          this.$swal({
+          text: `emmm... 图床好像挂掉了，换个图床试试`,
+          icon: 'warning',
+          buttons: true
+        })
+      }
     }
   },
 

src/content/components/links-panel.vue

@@ -0,0 +1,108 @@
+<template >
+  <ul class="cpt-links-panel">
+    <li class="link-item" v-for="link in links" :key="link.name">
+      <div class="link-name">{{ link.name }}</div>
+      <div class="link-content">
+        <input class="copy-input" type="text" :value="link.value">
+        <span class="copy-button" @click="copyLink(link.value)">复制</span>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+import copy from '../util/copy'
+export default {
+  props: {
+    url: String
+  },
+
+  computed: {
+    links () {
+      const { url } = this
+      return [
+        {
+          name: 'Markdown',
+          value: `![](${url})`
+        },
+        {
+          name: '图片链接',
+          value: url
+        },
+        {
+          name: 'UBB',
+          value: `[IMG]${url}[/IMG]`
+        },
+        {
+          name: 'HTML',
+          value: `<img src="${url}"/>`
+        }
+      ]
+    }
+  },
+
+  methods: {
+    copyLink (v) {
+      copy(v, ok => {
+        if (ok) {
+          this.$swal({
+            text: '复制成功',
+            icon: 'success',
+            buttons: false,
+            timer: 1000
+          })
+        } else {
+          this.$swal({
+            text: '复制失败，请手动复制练级地址',
+            icon: 'warning',
+            buttons: false,
+            timer: 1000
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.cpt-links-panel {
+  list-style: none;
+  font-size: 12px;
+  text-align: left;
+
+  .link-item {
+    margin: 10px 0;
+  }
+
+  .link-name {
+    color: #929aa3;
+    padding: 4px 0;
+  }
+
+  .link-content {
+    display: flex;
+    align-items: center;
+
+    .copy-input,
+    .copy-button {
+      padding: 4px 10px;
+      border: 1px solid #eee;
+      border-radius: 4px;
+    }
+
+    .copy-input {
+      flex: 1;
+      margin-right: 10px;
+      color: #222;
+      outline: none;
+    }
+
+    .copy-button {
+      cursor: pointer;
+    }
+  }
+}
+</style>
+
+

src/content/components/showLinks.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import main from './links-panel'
+
+const Ctor = Vue.extend(main)
+
+let ins = null
+
+export default function showLinks (url) {
+  if (!ins) {
+    ins = new Ctor({ propsData: { url } }).$mount()
+  } else {
+    ins.url = url
+  }
+  return ins.$el
+}
+