master #3
10
README.md
10
README.md
@ -22,6 +22,16 @@
|
||||
|
||||
帮助文档：[点击跳转](https://blog.fleyx.com/blog/detail/20220329/)
|
||||
|
||||
# 更新日志
|
||||
|
||||
## 2023-08-13
|
||||
|
||||
|
||||
|
||||
搜索引擎支持自定义[#43](https://github.com/FleyX/bookmark/issues/43)
|
||||
|
||||
位置：右上角个人中心-管理搜索引擎
|
||||
|
||||
# TODO
|
||||
|
||||
- [x] 主页功能
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<div :class="{ listShow: focused && list.length > 0 }" class="newSearch">
|
||||
<input ref="searchInput" class="input" type="text" v-model="value" @keydown="keyPress" @focus="inputFocus" @blur="inputBlur" />
|
||||
<input ref="searchInput" class="input" type="text" v-model="value" @keydown="keyPress" @focus="inputFocus"
|
||||
@blur="inputBlur" />
|
||||
<div class="action">
|
||||
<a-dropdown :trigger="['click']">
|
||||
<a-tooltip title="点击切换网页搜索">
|
||||
<my-icon class="icon" style="margin-right: 0.5em" :type="searchIcon" />
|
||||
<my-icon class="icon" style="margin-right: 0.5em" :type="checkedSearchEngine.icon"
|
||||
@click="searchIconClick" />
|
||||
</a-tooltip>
|
||||
<a-menu slot="overlay" @click="searchEngineChange">
|
||||
<a-menu-item key="google">谷歌</a-menu-item>
|
||||
<a-menu-item key="bing">bing</a-menu-item>
|
||||
<a-menu-item key="baidu">baidu</a-menu-item>
|
||||
<a-menu-item v-for="item in searchEngineList" :key="item.id">{{ item.name }}</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
<a-icon class="icon" type="search" @click="submit(true)" />
|
||||
@ -30,7 +30,8 @@
|
||||
</div>
|
||||
<div class="icons">
|
||||
<a-tooltip title="定位到书签树中" v-if="showLocation">
|
||||
<my-icon style="color: white; font-size: 1.3em" type="icon-et-location" @mousedown="location($event, item)" />
|
||||
<my-icon style="color: white; font-size: 1.3em" type="icon-et-location"
|
||||
@mousedown="location($event, item)" />
|
||||
</a-tooltip>
|
||||
<a-tooltip title="复制链接">
|
||||
<a-icon
|
||||
@ -61,10 +62,11 @@ import { mapState } from "vuex";
|
||||
import ClipboardJS from "clipboard";
|
||||
import { GLOBAL_CONFIG, USER_INFO } from "@/store/modules/globalConfig";
|
||||
import { TREE_DATA, refreshHomePinList, HOME_PIN_BOOKMARK_ID_MAP } from "@/store/modules/treeData";
|
||||
|
||||
export default {
|
||||
name: "Search",
|
||||
props: {
|
||||
showLocation: Boolean, //是否显示定位等按钮
|
||||
showLocation: Boolean //是否显示定位等按钮
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -74,19 +76,25 @@ export default {
|
||||
//上下选中
|
||||
selectIndex: null,
|
||||
copyBoard: null, //剪贴板对象
|
||||
searchEngineList: [],
|
||||
checkedSearchEngine: { icon: "icon-baidu", name: "百度", url: "https://www.baidu.com/s?ie=UTF-8&wd=%s" }
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
async mounted() {
|
||||
//初始化clipboard
|
||||
this.copyBoard = new ClipboardJS(".search-copy-to-board", {
|
||||
text: function (trigger) {
|
||||
text: function(trigger) {
|
||||
return trigger.attributes.data.nodeValue;
|
||||
},
|
||||
}
|
||||
});
|
||||
this.copyBoard.on("success", (e) => {
|
||||
this.$message.success("复制成功");
|
||||
e.clearSelection();
|
||||
});
|
||||
if (this.$store.state.globalConfig.token != null) {
|
||||
this.searchEngineList = await HttpUtil.get("/searchEngine/list");
|
||||
this.checkedSearchEngine = this.searchEngineList.find(item => item.checked === 1);
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
if (this.copyBoard != null) {
|
||||
@ -95,26 +103,20 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapState("treeData", ["totalTreeData", HOME_PIN_BOOKMARK_ID_MAP]),
|
||||
...mapState("globalConfig", ["userInfo"]),
|
||||
searchIcon() {
|
||||
let search = this.userInfo != null ? this.userInfo.defaultSearchEngine : "baidu";
|
||||
return search === "baidu" ? "icon-baidu" : search === "bing" ? "icon-bing" : "icon-google";
|
||||
},
|
||||
searchUrl() {
|
||||
let search = this.userInfo && this.userInfo.defaultSearchEngine ? this.userInfo.defaultSearchEngine : "baidu";
|
||||
return search === "baidu"
|
||||
? "https://www.baidu.com/s?ie=UTF-8&wd="
|
||||
: search === "bing"
|
||||
? "https://www.bing.com/search?q="
|
||||
: "https://www.google.com/search?q=";
|
||||
},
|
||||
...mapState("globalConfig", ["userInfo"])
|
||||
},
|
||||
watch: {
|
||||
value(newVal, oldVal) {
|
||||
this.search(newVal);
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
searchIconClick() {
|
||||
if (this.userInfo == null) {
|
||||
this.searchEngineList = [];
|
||||
this.$message.warning("未登录，请登录后操作");
|
||||
}
|
||||
},
|
||||
search(content) {
|
||||
console.log(content);
|
||||
let val = content.toLocaleLowerCase().trim();
|
||||
@ -135,7 +137,7 @@ export default {
|
||||
let url;
|
||||
if (forceSearch || this.selectIndex == null) {
|
||||
//说明使用网页搜索
|
||||
url = this.searchUrl + encodeURIComponent(this.value);
|
||||
url = this.checkedSearchEngine.url.replace("%s", encodeURIComponent(this.value));
|
||||
} else {
|
||||
//说明跳转到书签
|
||||
let bookmark = this.list[this.selectIndex];
|
||||
@ -176,15 +178,10 @@ export default {
|
||||
},
|
||||
//修改默认搜索引擎
|
||||
async searchEngineChange(item) {
|
||||
if (this.userInfo == null) {
|
||||
this.$message.warning("未登录，请登录后操作");
|
||||
return;
|
||||
}
|
||||
if (item.key !== this.userInfo.defaultSearchEngine) {
|
||||
await HttpUtil.post("/baseInfo/updateSearchEngine", null, { defaultSearchEngine: item.key });
|
||||
this.userInfo.defaultSearchEngine = item.key;
|
||||
this.$store.commit(GLOBAL_CONFIG + "/" + USER_INFO, this.userInfo);
|
||||
}
|
||||
|
||||
let target = this.searchEngineList.find(one => one.id === item.key);
|
||||
await HttpUtil.post("/searchEngine/setChecked", null, { id: item.key });
|
||||
this.checkedSearchEngine = target;
|
||||
},
|
||||
//固定书签到首页
|
||||
async pinBookmark(event, { bookmarkId }) {
|
||||
@ -228,8 +225,8 @@ export default {
|
||||
}
|
||||
console.log("阻止成功");
|
||||
return false;
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -240,10 +237,12 @@ export default {
|
||||
@listActiveBgColor: #454545;
|
||||
.search {
|
||||
position: relative;
|
||||
|
||||
.listShow {
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.newSearch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -252,6 +251,7 @@ export default {
|
||||
overflow: hidden;
|
||||
font-size: 1.2em;
|
||||
color: @textColor;
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
border: 0;
|
||||
@ -260,11 +260,13 @@ export default {
|
||||
padding-left: 0.19rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.action {
|
||||
padding: 0.1rem;
|
||||
padding-right: 0.19rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
color: @textColor;
|
||||
cursor: pointer;
|
||||
@ -282,6 +284,7 @@ export default {
|
||||
border-bottom-left-radius: 0.18rem;
|
||||
border-bottom-right-radius: 0.18rem;
|
||||
overflow: hidden;
|
||||
|
||||
.listItem {
|
||||
font-size: 0.16rem;
|
||||
display: flex;
|
||||
@ -292,6 +295,7 @@ export default {
|
||||
margin: 0.05rem 0 0.05rem 0;
|
||||
padding: 0 0.19rem 0 0.19rem;
|
||||
cursor: pointer;
|
||||
|
||||
.name {
|
||||
padding-right: 1em;
|
||||
max-width: calc(100% - 2em);
|
||||
@ -299,17 +303,21 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.icons {
|
||||
display: none;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.listItem:hover {
|
||||
background-color: @listActiveBgColor;
|
||||
}
|
||||
|
||||
.itemActive {
|
||||
background-color: @listActiveBgColor;
|
||||
}
|
||||
|
||||
.listItem:hover .icons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -8,60 +8,61 @@ import { checkJwtValid } from "@/util/UserUtil";
|
||||
Vue.use(Vuex);
|
||||
|
||||
let store = new Vuex.Store({
|
||||
state: {},
|
||||
mutations: {},
|
||||
actions: {},
|
||||
modules: {
|
||||
[globalConfig.GLOBAL_CONFIG]: globalConfig.store,
|
||||
[treeData.TREE_DATA]: treeData.store
|
||||
}
|
||||
state: {},
|
||||
mutations: {},
|
||||
actions: {},
|
||||
modules: {
|
||||
[globalConfig.GLOBAL_CONFIG]: globalConfig.store,
|
||||
[treeData.TREE_DATA]: treeData.store
|
||||
}
|
||||
});
|
||||
|
||||
let noLoginFinish = false;
|
||||
|
||||
//执行各自的非登陆初始化
|
||||
(async () => {
|
||||
await store.dispatch(globalConfig.GLOBAL_CONFIG + "/" + globalConfig.noLoginInit);
|
||||
//无需等待执行
|
||||
store.dispatch(treeData.TREE_DATA + "/" + treeData.noLoginInit);
|
||||
noLoginFinish = true;
|
||||
await store.dispatch(globalConfig.GLOBAL_CONFIG + "/" + globalConfig.noLoginInit);
|
||||
//无需等待执行
|
||||
store.dispatch(treeData.TREE_DATA + "/" + treeData.noLoginInit);
|
||||
noLoginFinish = true;
|
||||
})();
|
||||
|
||||
/**
|
||||
* 执行各模块的登陆后初始化
|
||||
*/
|
||||
export async function loginInit () {
|
||||
if (!noLoginFinish) {
|
||||
await finishNoLogin();
|
||||
}
|
||||
console.log(store.state[globalConfig.GLOBAL_CONFIG][globalConfig.TOKEN]);
|
||||
if (checkJwtValid(store.state[globalConfig.GLOBAL_CONFIG][globalConfig.TOKEN])) {
|
||||
//无需等待执行完毕
|
||||
store.dispatch(globalConfig.GLOBAL_CONFIG + "/" + globalConfig.loginInit);
|
||||
store.dispatch(treeData.TREE_DATA + "/" + treeData.loginInit);
|
||||
}
|
||||
export async function loginInit() {
|
||||
if (!noLoginFinish) {
|
||||
await finishNoLogin();
|
||||
}
|
||||
console.log(store.state[globalConfig.GLOBAL_CONFIG][globalConfig.TOKEN]);
|
||||
if (checkJwtValid(store.state[globalConfig.GLOBAL_CONFIG][globalConfig.TOKEN])) {
|
||||
//无需等待执行完毕
|
||||
store.dispatch(globalConfig.GLOBAL_CONFIG + "/" + globalConfig.loginInit);
|
||||
store.dispatch(treeData.TREE_DATA + "/" + treeData.loginInit);
|
||||
}
|
||||
console.log("初始化完成");
|
||||
}
|
||||
|
||||
/**
|
||||
* 推出登陆时需要清理的
|
||||
*/
|
||||
export async function logoutClear () {
|
||||
await store.dispatch(globalConfig.GLOBAL_CONFIG + "/" + globalConfig.clear);
|
||||
await store.dispatch(treeData.TREE_DATA + "/" + treeData.clear);
|
||||
export async function logoutClear() {
|
||||
await store.dispatch(globalConfig.GLOBAL_CONFIG + "/" + globalConfig.clear);
|
||||
await store.dispatch(treeData.TREE_DATA + "/" + treeData.clear);
|
||||
}
|
||||
|
||||
/**
|
||||
* 确保未登录前要初始化的初始化完了
|
||||
* 确保未登录前要初始化的初始化完了
|
||||
*/
|
||||
async function finishNoLogin () {
|
||||
return new Promise((resolve) => {
|
||||
let timer = setInterval(() => {
|
||||
if (noLoginFinish) {
|
||||
clearInterval(timer);
|
||||
resolve();
|
||||
}
|
||||
}, 100);
|
||||
})
|
||||
async function finishNoLogin() {
|
||||
return new Promise((resolve) => {
|
||||
let timer = setInterval(() => {
|
||||
if (noLoginFinish) {
|
||||
clearInterval(timer);
|
||||
resolve();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
export default store;
|
||||
|
||||
@ -69,6 +69,7 @@ const actions = {
|
||||
let userInfo = await HttpUtil.get("/user/currentUserInfo");
|
||||
context.commit(USER_INFO, userInfo);
|
||||
context.commit(IS_INIT, true);
|
||||
console.log("用户完了");
|
||||
},
|
||||
async [setToken]({ commit }, token) {
|
||||
await localforage.setItem(TOKEN, token);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user