-
+
-
+ >
+
+
-
+
- @@ -40,8 +44,15 @@
-
- ![]()
+
@@ -59,7 +70,7 @@
import { mapState } from 'vuex'
import hotWords from './hotWords'
import resource from '../../store/resource'
- import { dotuHistory } from '../../util'
+ import { dotuHistory, collection } from '../../util'
export default {
components: {
@@ -67,6 +78,8 @@
},
data () {
return {
+ showCollection: false,
+ collection: collection.getItems(),
historyIndex: -1,
history: dotuHistory.getItems(),
showAiDou: false,
@@ -87,10 +100,32 @@
},
computed: {
...mapState([
- 'aiLoading', 'aiList'
- ])
+ 'aiLoading', 'aiList', 'theme'
+ ]),
+ emojis () {
+ return this.aiList.map(e => {
+ e.collected = this.collection.findIndex(c => c.link === e.link) > -1
+ return e
+ })
+ }
},
methods: {
+ getCollection () {
+ const data = this.collection
+ const type = 'collect'
+ this.$store.dispatch('AI_LIST', {data, type})
+ this.showCollection = true
+ },
+ collect (emoji) {
+ if (emoji.collected) {
+ emoji.collected = false
+ collection.deleteItem(emoji)
+ } else {
+ emoji.collected = true
+ collection.setItem(emoji)
+ }
+ this.collection = collection.getItems()
+ },
async handleEmojiClick ({ link }) {
try {
const base64 = await resource.fetchImgToBase64(link)
@@ -190,6 +225,7 @@
margin-bottom: 20px;
}
.search-wrapper {
+ margin-top: 8px;
z-index: 10000;
position: absolute;
top: 0;
@@ -228,6 +264,10 @@
width: 30px;
height: 30px;
color: #606266;
+ transition: all .3s ease-in-out;
+ }
+ .search-wrapper svg:hover {
+ color: orange;
}
ul.history {
display: flex;
@@ -266,7 +306,7 @@
background: #EBEEF5;
}
ul.history:hover li {
- background: #fff;
+ background: transparent;
}
ul.history li:hover .icon {
display: block;
@@ -279,6 +319,7 @@
overflow: auto;
}
.image-container .img-wrapper {
+ position: relative;
overflow: hidden;
width: 130px;
height: 130px;
@@ -294,6 +335,20 @@
width: 100%;
height: 100%;
}
+ .image-container .img-wrapper > svg {
+ position: absolute;
+ top: 3px;
+ right: 0px;
+ width: 20px;
+ height: 20px;
+ display: none;
+ }
+ .image-container .img-wrapper > svg.active {
+ color: orange;
+ }
+ .image-container .img-wrapper:hover > svg {
+ display: block;
+ }
.image-container .img-wrapper:hover {
transform: scale(1.05);
}
@@ -309,4 +364,16 @@
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
-
\ No newline at end of file
+ /* style for dark theme */
+ .dark .search-wrapper {
+ background: rgb(75, 75, 75);
+ border-color: rgb(75, 75, 75);
+ }
+ .dark ul.history li.active {
+ background: rgb(39, 39, 39);
+ }
+ .dark ul.history li:hover {
+ background: rgb(39, 39, 39);
+ }
+
+
diff --git a/src/renderer/store/aidou.js b/src/renderer/store/aidou.js
index 6eef5391..b4a08a2b 100644
--- a/src/renderer/store/aidou.js
+++ b/src/renderer/store/aidou.js
@@ -7,8 +7,7 @@ const state = {
const mutations = {
SET_AI_LIST (state, { data, type }) {
- console.log(type)
- if (type === 'search') {
+ if (type === 'search' || type === 'collect') {
state.aiList = data
} else {
state.aiList = [...state.aiList, ...data]
@@ -20,6 +19,9 @@ const mutations = {
}
const actions = {
+ AI_LIST ({ commit }, data) {
+ commit('SET_AI_LIST', data)
+ },
AI_SEARCH ({ commit }, { params, type }) {
commit('SET_AI_STATUS', true)
return resource.sogou(params)
diff --git a/src/renderer/util/index.js b/src/renderer/util/index.js
index b6257903..a975f82d 100644
--- a/src/renderer/util/index.js
+++ b/src/renderer/util/index.js
@@ -7,7 +7,18 @@ const easeInOutQuad = function (t, b, c, d) {
}
const DOTU = 'DOTU'
-const MAX_HISTORY_LENGTH = 6
+const MAX_HISTORY_LENGTH = 10
+const DOTU_COLLECTION = 'DOTU_COLLECTION'
+const deleteItem = key => value => {
+ const data = localStorage.getItem(key)
+ if (!data) return
+ const col = JSON.parse(data)
+ const index = col.indexOf(value)
+ if (index > -1) {
+ col.splice(index, 1)
+ localStorage.setItem(key, JSON.stringify(col))
+ }
+}
export const serialize = function (params) {
return Object.keys(params).map(key => `${key}=${params[key]}`).join('&')
@@ -31,6 +42,35 @@ export const dataURItoBlob = function (dataURI) {
return new window.Blob([ab], { type: mime })
}
+export const collection = {
+ setItem (emoji) {
+ const data = localStorage.getItem(DOTU_COLLECTION)
+ if (data) {
+ let col = JSON.parse(data)
+ if (col.findIndex(c => c.link === emoji.link) === -1) {
+ col.push(emoji)
+ }
+ localStorage.setItem(DOTU_COLLECTION, JSON.stringify(col))
+ } else {
+ localStorage.setItem(DOTU_COLLECTION, JSON.stringify([ emoji ]))
+ }
+ },
+ getItems () {
+ const data = localStorage.getItem(DOTU_COLLECTION)
+ return data ? JSON.parse(data) : []
+ },
+ deleteItem (emoji) {
+ const data = localStorage.getItem(DOTU_COLLECTION)
+ if (!data) return
+ const col = JSON.parse(data)
+ const index = col.findIndex(c => c.link === emoji.link)
+ if (index > -1) {
+ col.splice(index, 1)
+ localStorage.setItem(DOTU_COLLECTION, JSON.stringify(col))
+ }
+ }
+}
+
export const dotuHistory = {
setItem (value) {
const data = localStorage.getItem(DOTU)
@@ -50,16 +90,7 @@ export const dotuHistory = {
const data = localStorage.getItem(DOTU)
return data ? JSON.parse(data) : []
},
- deleteItem (value) {
- const data = localStorage.getItem(DOTU)
- if (!data) return
- const history = JSON.parse(data)
- const index = history.indexOf(value)
- if (index > -1) {
- history.splice(index, 1)
- localStorage.setItem(DOTU, JSON.stringify(history))
- }
- },
+ deleteItem: deleteItem(DOTU),
clear () {
localStorage.setItem(DOTU, '[]')
}
+
+ ![]()