diff --git a/HELP.md b/HELP.md new file mode 100644 index 0000000..9d373b4 --- /dev/null +++ b/HELP.md @@ -0,0 +1,99 @@ +## 使用教程 + +### 首页 + +![首页](https://qiniupic.fleyx.com/blog/20220329202726.png?imageView2/2/w/1920) + +#### 多功能搜索框 + +1. 搜索 + +搜索框支持书签搜索和网页搜索，输入关键词会在下方展示搜索结果： + +![](https://qiniupic.fleyx.com/blog/20220329203152.png?imageView2/2/w/1920) + +书签搜索支持**拼音/拼音首字母/名称关键字/链接关键词**搜索.比如对于`博客园。https://cnblogs.com`,可通过以下方式搜索到： + +- ky (拼音首字母) +- boke (拼音) +- 客园 (名称关键词) +- blogs (链接关键词) + +**注意不支持组合搜索，也就是不能同时用两种内容搜索** + +2. 快捷键 + +tab/方向键上/下：用于选择书签(默认不选中书签) +enter/回车: 未选中书签情况下，用于发起网页搜索。选中书签的情况下跳转到对应书签 + +3. 网页搜索引擎 + +默认网页搜索引擎为**百度**,可点击图标进行切换,会自动保存选择的搜索引擎 + +![](https://qiniupic.fleyx.com/blog/20220329204103.png?imageView2/2/w/1920) + +4. 搜索结果快捷操作 + +搜索书签后，通过鼠标悬浮在搜索结果上展示快捷操作，可进行如下操作： + +- 定位到书签树中（仅在书签管理页面展示） +- 复制书签链接 +- 固定到首页下方 + +![](https://qiniupic.fleyx.com/blog/20220329212023.png?imageView2/2/w/1920) + +#### 书签固定区 + +可将一些常用书签固定在下方，方便快速跳转，最多可添加 20 个书签,未手动固定的情况下默认会按访问量顺序展示书签 + +![](https://qiniupic.fleyx.com/blog/20220329212211.png?imageView2/2/w/1920) + +### 书签管理 + +通过点击右上方的头像，选择书签管理进入。 + +![](https://qiniupic.fleyx.com/blog/20220329212513.png?imageView2/2/w/1920) + +本页面以书签树的形式展示所有的书签。 + +![](https://qiniupic.fleyx.com/blog/20220329212745.png?imageView2/2/w/1920) + +上方搜索框介绍见[上一节:多功能搜索框](#多功能搜索框) + +#### 书签树 + +- 新增 + +新增书签/文件夹可通过点击第一行"+"(添加到根路径)或者右键文件夹选择新增(添加到当前文件夹下) + +![](https://qiniupic.fleyx.com/blog/20220329213056.png?imageView2/2/w/1920) + +- 修改 + +右键要修改的书签/文件夹，选择修改按钮 + +- 删除 + + - 右键要删除的书签/文件夹选择删除 + - 点击第一行的![](https://qiniupic.fleyx.com/blog/20220329213336.png?imageView2/2/w/1920),进入多选模式，然后再点击删除图标进行批量删除 + ![](https://qiniupic.fleyx.com/blog/20220329213551.png?imageView2/2/w/1920) + +- 排序 + +支持拖拽排序或移动文件夹 + +![](https://qiniupic.fleyx.com/blog/20220329213716.png?imageView2/2/w/1920) + +- 导入/导出 + +通过文件导入功能，快速导入现有浏览器书签 + +![](https://qiniupic.fleyx.com/blog/20220329214827.png?imageView2/2/w/1920) + +点击书签右侧导出按钮，可导出现有书签数据到 html 文件中，此文件可直接导入到浏览器中 + +![](https://qiniupic.fleyx.com/blog/20220329214936.png?imageView2/2/w/1920) + +### 个人中心 + +通过右上角悬浮菜单进入个人中心页面，可进行头像更换，密码修改等操作 diff --git a/README.md b/README.md index a729848..c474e55 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,10 @@ -本项目是一个云书签的项目，取名为：签签世界。 +本项目是一个云书签的项目，取名为：签签世界. -此地址长期提供服务:[fleyx.com](https://fleyx.com)，也可自己搭建，教程如下： +部署地址:[fleyx.com](https://fleyx.com)， -部署教程：[docker-compose部署](https://github.com/FleyX/bookmark/blob/master/DEPLOY.md) +也可自己搭建，教程如下： +部署教程：[docker-compose 部署](https://github.com/FleyX/bookmark/blob/master/DEPLOY.md) # 缘由 @@ -17,22 +18,27 @@ # 主要功能 -1. 基础的书签增删改查功能。支持chrome、firefox等浏览器书签文件导入，导出。 +使用帮助见：[使用帮助](https://github.com/FleyX/bookmark/blob/master/HELP.md) - 按需加载书签节点，即使上万条书签也不会卡 +1. 基础的书签增删改查功能。支持 chrome、firefox 等浏览器书签文件导入，导出。 - 支持鼠标拖拽排序、移动位置、层级（移动端不支持） - - 支持书签文件双向导入导出（从浏览器导入到系统、从系统导出到浏览器） +![](https://qiniupic.fleyx.com/blog/20220329214126.png?imageView2/2/w/1920) 2. 强大的书签检索功能，毫秒级的关键字检索。 - 支持使用 书签名搜索、url搜索、书签名拼音搜索、书签名拼音首字母搜索。（注意不支持组合使用） -4. 移动端支持，web页面可在浏览器中正常使用 +![](https://qiniupic.fleyx.com/blog/20220329214210.png?imageView2/2/w/1920) + +3. 首页功能，参考 bing 首页实现 + +![](https://qiniupic.fleyx.com/blog/20220329214236.png?imageView2/2/w/1920) + +4. 移动端支持，手机端也可使用（部分功能比如拖拽等无法使用） + +![](https://qiniupic.fleyx.com/blog/20220329214312.png?imageView2/2/w/1920) -## TODO +# TODO -- 主页功能 +- 主页功能 Ok! - 拼音检索 Ok! - 书签导出 OK！ - 侧边栏显示 diff --git a/bookMarkService/common/src/main/java/com/fanxb/bookmark/common/util/HttpUtil.java b/bookMarkService/common/src/main/java/com/fanxb/bookmark/common/util/HttpUtil.java index 40cc404..ffc946f 100644 --- a/bookMarkService/common/src/main/java/com/fanxb/bookmark/common/util/HttpUtil.java +++ b/bookMarkService/common/src/main/java/com/fanxb/bookmark/common/util/HttpUtil.java @@ -51,7 +51,7 @@ public class HttpUtil { /** * 无代理环境 */ - private static final OkHttpClient CLIENT = new OkHttpClient.Builder().connectTimeout(10, TimeUnit.SECONDS) + private static final OkHttpClient CLIENT = new OkHttpClient.Builder().connectTimeout(2, TimeUnit.SECONDS) .readTimeout(60, TimeUnit.SECONDS) .build(); public static final MediaType JSON = MediaType.get("application/json; charset=utf-8"); diff --git a/bookmark_front/src/components/main/Search.vue b/bookmark_front/src/components/main/Search.vue index 27fe25c..094080c 100644 --- a/bookmark_front/src/components/main/Search.vue +++ b/bookmark_front/src/components/main/Search.vue @@ -41,6 +41,13 @@ :data="item.url" /> + @@ -53,6 +60,7 @@ import HttpUtil from "@/util/HttpUtil"; 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: { @@ -86,7 +94,7 @@ export default { } }, computed: { - ...mapState("treeData", ["totalTreeData"]), + ...mapState("treeData", ["totalTreeData", HOME_PIN_BOOKMARK_ID_MAP]), ...mapState("globalConfig", ["userInfo"]), searchIcon() { let search = this.userInfo != null ? this.userInfo.defaultSearchEngine : "baidu"; @@ -177,6 +185,12 @@ export default { this.$store.commit(GLOBAL_CONFIG + "/" + USER_INFO, this.userInfo); } }, + //固定书签到首页 + async pinBookmark(event, { bookmarkId }) { + this.stopDefault(event); + await HttpUtil.put("/home/pin", null, { bookmarkId }); + await this.$store.dispatch(TREE_DATA + "/" + refreshHomePinList); + }, dealSearch(content) { let res = []; let arrs = Object.values(this.totalTreeData); @@ -197,7 +211,7 @@ export default { return res; }, //复制 - copy(event, item) { + async copy(event) { return this.stopDefault(event); }, /** diff --git a/bookmark_front/src/components/main/things/AddBookmark.vue b/bookmark_front/src/components/main/things/AddBookmark.vue index f82dc74..58fcfe3 100644 --- a/bookmark_front/src/components/main/things/AddBookmark.vue +++ b/bookmark_front/src/components/main/things/AddBookmark.vue @@ -44,10 +44,7 @@ export default { name: "addBookmark", props: { isAdd: Boolean, //是否新增 - addType: { - type: String, - default: "bookmark", - }, //新增的类别 + addType: String, //新增的类别 targetNode: Object, }, data() { @@ -73,7 +70,7 @@ export default { created() { console.log(this.isAdd, this.targetNode); if (this.isAdd) { - this.form.type = this.addType; + this.form.type = this.addType ? this.addType : "bookmark"; } else { this.form.type = this.targetNode.type == 0 ? "bookmark" : "folder"; this.form.name = this.targetNode.name; diff --git a/bookmark_front/src/store/modules/treeData.js b/bookmark_front/src/store/modules/treeData.js index 03a780a..7a446f1 100644 --- a/bookmark_front/src/store/modules/treeData.js +++ b/bookmark_front/src/store/modules/treeData.js @@ -5,16 +5,15 @@ import HttpUtil from "../../util/HttpUtil"; export const TREE_DATA = "treeData"; export const TOTAL_TREE_DATA = "totalTreeData"; export const VERSION = "version"; +/** 是否展示刷新书签数据弹窗 */ export const SHOW_REFRESH_TOAST = "showRefreshToast"; export const IS_INIT = "isInit"; export const IS_INITING = "isIniting"; -/** - * 首页固定的书签 - */ +/** 首页固定的书签 */ export const HOME_PIN_LIST = "homePinList"; -/** - * 刷新首页固定标签 - */ +/** 首页固定书签id Map */ +export const HOME_PIN_BOOKMARK_ID_MAP = "homePinBookmarkIdMap"; +/** 刷新首页固定标签*/ export const refreshHomePinList = "refreshHomePinList"; /** * 通过id获取书签数据 @@ -50,9 +49,9 @@ const state = { [IS_INIT]: false, // 是否正在加载数据 [IS_INITING]: false, - //是否展示刷新书签数据弹窗 [SHOW_REFRESH_TOAST]: false, - [HOME_PIN_LIST]: false + [HOME_PIN_LIST]: [], + [HOME_PIN_BOOKMARK_ID_MAP]: {} }; const getters = { @@ -208,7 +207,12 @@ const actions = { return body; }, async [refreshHomePinList] ({ commit }) { - commit(HOME_PIN_LIST, await HttpUtil.get("/home/pin")); + let list = await HttpUtil.get("/home/pin"); + commit(HOME_PIN_LIST, list); + let map = {}; + list.filter(item => item.id).forEach(item => map[item.bookmarkId] = true); + commit(HOME_PIN_BOOKMARK_ID_MAP, map); + }, /** * 更新版本数据 @@ -301,6 +305,9 @@ const mutations = { }, [HOME_PIN_LIST]: (state, val) => { state[HOME_PIN_LIST] = val; + }, + [HOME_PIN_BOOKMARK_ID_MAP]: (state, val) => { + state[HOME_PIN_BOOKMARK_ID_MAP] = val; } };