liweichun
/
my-bookmark
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成书签的分类显示

This commit is contained in:
B05BEE13.卢郴群 2020-09-01 17:41:22 +08:00
parent c4dba3cb18
commit 60b7ff714f
18 changed files with 901 additions and 933 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
www/404.html
View File

@ -1,84 +1,84 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>提示-404</title>
<style type="text/css">
html {
background: none;
background-color: #f0eeee;
}
body {
padding: 0;
}
#header {
width: 952px;
margin: 0 auto;
height: 120px;
background: none;
box-shadow: none;
position: static;
}
#content {
font-family: "微软雅黑";
background: url("images/404.png") no-repeat 122px 0px;
width: 952px;
margin: 0 auto;
font-size: 18px;
color: #999;
}
#content p {
padding: 180px 0 0 426px;
line-height: 38px;
}
#content p a.backhome {
font-size: 18px;
}
#content p a.backhome span {
width: 80px;
}
#totalSecond {
color: #f00;
}
</style>
</head>
<body>
<div>
<div id="content" style="height: 530px;">
<p>
对不起，您的风筝已掉线，请时光倒流回前一秒。<br />
<span id="totalSecond">5</span>秒后自动
<a href="https://mybookmark.cn" class="backhome"><span>返回首页</span></a>
</p>
</div>
</div>
</body>
<script language="javascript" type="text/javascript">
var second = document.getElementById("totalSecond").textContent;
// 判断是IE浏览器还是Firefox浏览器，采用相应措施取得秒数
if (navigator.appName.indexOf("Explorer") > -1) {
second = document.getElementById("totalSecond").innerText;
} else {
second = document.getElementById("totalSecond").textContent;
}
setInterval(function() {
if (second < 0) {
location.href = document.location.origin;
} else {
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById("totalSecond").innerText = second--;
} else {
document.getElementById("totalSecond").textContent = second--;
}
}
}, 1000);
</script>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>提示-404</title>
<style type="text/css">
html {
background: none;
background-color: #f0eeee;
}
body {
padding: 0;
}
#header {
width: 952px;
margin: 0 auto;
height: 120px;
background: none;
box-shadow: none;
position: static;
}
#content {
font-family: "微软雅黑";
background: url("images/404.png") no-repeat 122px 0px;
width: 952px;
margin: 0 auto;
font-size: 18px;
color: #999;
}
#content p {
padding: 180px 0 0 426px;
line-height: 38px;
}
#content p a.backhome {
font-size: 18px;
}
#content p a.backhome span {
width: 80px;
}
#totalSecond {
color: #f00;
}
</style>
</head>
<body>
<div>
<div id="content" style="height: 530px">
<p>
对不起，您的风筝已掉线，请时光倒流回前一秒。<br />
<span id="totalSecond">5</span>秒后自动
<a href="https://mybookmark.cn" class="backhome"><span>返回首页</span></a>
</p>
</div>
</div>
</body>
<script language="javascript" type="text/javascript">
var second = document.getElementById("totalSecond").textContent;
// 判断是IE浏览器还是Firefox浏览器，采用相应措施取得秒数
if (navigator.appName.indexOf("Explorer") > -1) {
second = document.getElementById("totalSecond").innerText;
} else {
second = document.getElementById("totalSecond").textContent;
}
setInterval(function () {
if (second < 0) {
location.href = document.location.origin;
} else {
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById("totalSecond").innerText = second--;
} else {
document.getElementById("totalSecond").textContent = second--;
}
}
}, 1000);
</script>
</html>

2
www/scripts/services/data-service.js
View File

@ -19,7 +19,7 @@ app.factory('dataService', [function () {
show: false
}, {
uiSref: 'tags',
title: '分类'
title: '书签'
}, {
uiSref: 'note',
title: '备忘'

6
www/views/advice.html
View File

@ -11,7 +11,7 @@
</div>
</div>
<div class="ui divider"></div>
<div class="ui comments" style="max-width: 100%;">
<div class="ui comments" style="max-width: 100%">
<h3 class="ui header">最新100条留言</h3>
<div class="comment" ng-repeat="advice in advices">
<a class="avatar">
@ -27,7 +27,5 @@
</div>
</div>
</div>
<div class="ui huge text centered inline loader" style="margin-top: 10px;" ng-class="{active:loading, disabled: !loading}">
正在加载中...
</div>
<div class="ui huge text centered inline loader" style="margin-top: 10px" ng-class="{active:loading, disabled: !loading}">正在加载中...</div>
</div>

3
www/views/bookmarks.html
View File

@ -1,5 +1,4 @@
<div class="ui segment" style="text-align: center;">
<div class="ui segment" style="text-align: center">
<img src="./images/developing.png" />
<div>正在开发中...</div>
</div>

18
www/views/dialog-add-tag.html
View File

@ -1,9 +1,9 @@
<div class="ngdialog-message">
<h3>新建分类</h3>
</div>
<div class="dialog-contents">新分类：<input type="text" ng-model="newTag" /></div>
<p></p>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="addTag(newTag)">确定</button>
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('button')">取消</button>
</div>
<div class="ngdialog-message">
<h3>新建分类</h3>
</div>
<div class="dialog-contents">新分类：<input type="text" ng-model="newTag" /></div>
<p></p>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="addTag(newTag)">确定</button>
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('button')">取消</button>
</div>

20
www/views/dialog-del-bookmark.html
View File

@ -1,10 +1,10 @@
<div class="ngdialog-message">
<h3>删除提示</h3>
<div class="ui divider"></div>
<p ng-show="ngDialogId">您确认要删除书签: <code>{{ waitDelBookmark.title }}</code>吗？</p>
<p style="color:#F00">如果删除该书签，那么再也无法查看到。</p>
</div>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirmDelBookmark(waitDelBookmark.id)">确定删除</button>
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('button')">取消</button>
</div>
<div class="ngdialog-message">
<h3>删除提示</h3>
<div class="ui divider"></div>
<p ng-show="ngDialogId">您确认要删除书签: <code>{{ waitDelBookmark.title }}</code>吗？</p>
<p style="color: #f00">如果删除该书签，那么再也无法查看到。</p>
</div>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirmDelBookmark(waitDelBookmark.id)">确定删除</button>
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('button')">取消</button>
</div>

20
www/views/dialog-del-note.html
View File

@ -1,10 +1,10 @@
<div class="ngdialog-message">
<h3>删除提示</h3>
<div class="ui divider"></div>
<pre ng-show="ngDialogId" class="note-content" style="margin-top:0px;">{{ content | characters:600:false }}</pre>
<p style="color:#F00">如果删除该备忘，那么再也无法查看到。</p>
</div>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirmDelNote()">确定删除</button>
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('button')">取消</button>
</div>
<div class="ngdialog-message">
<h3>删除提示</h3>
<div class="ui divider"></div>
<pre ng-show="ngDialogId" class="note-content" style="margin-top: 0px">{{ content | characters:600:false }}</pre>
<p style="color: #f00">如果删除该备忘，那么再也无法查看到。</p>
</div>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirmDelNote()">确定删除</button>
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('button')">取消</button>
</div>

24
www/views/dialog-del-tag.html
View File

@ -1,12 +1,12 @@
<div class="ngdialog-message">
<h3>删除提示</h3>
<div class="ui divider"></div>
<p ng-show="ngDialogId">您确认要删除分类: <code>{{ waitDelTag.name }}</code>吗？</p>
<p ng-show="waitDelTag.name == '未分类'"><code>未分类</code>为系统默认分类，只允许删除该分类下面的书签，不允许删除该分类信息</p>
<p ng-show="waitDelTag.name == '收藏'"><code>收藏</code>为系统默认分类，只允许删除该分类下面的书签，不允许删除该分类信息</p>
<p style="color:#F00">如果删除该分类，那么该分类下的所有书签都会删掉哦！数据无价，谨慎操作！且删且珍惜！</p>
</div>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirmDelTag(waitDelTag.id, waitDelTag.name)">确定删除</button>
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('button')">取消</button>
</div>
<div class="ngdialog-message">
<h3>删除提示</h3>
<div class="ui divider"></div>
<p ng-show="ngDialogId">您确认要删除分类: <code>{{ waitDelTag.name }}</code>吗？</p>
<p ng-show="waitDelTag.name == '未分类'"><code>未分类</code>为系统默认分类，只允许删除该分类下面的书签，不允许删除该分类信息</p>
<p ng-show="waitDelTag.name == '收藏'"><code>收藏</code>为系统默认分类，只允许删除该分类下面的书签，不允许删除该分类信息</p>
<p style="color: #f00">如果删除该分类，那么该分类下的所有书签都会删掉哦！数据无价，谨慎操作！且删且珍惜！</p>
</div>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirmDelTag(waitDelTag.id, waitDelTag.name)">确定删除</button>
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('button')">取消</button>
</div>

106
www/views/edit.html
View File

@ -1,54 +1,52 @@
<div class="ui long modal js-add-bookmark" ng-controller="editCtr">
<!-- <i class="close icon"></i> -->
<div class="header">
{{ add ? '添加书签' : '编辑书签'}}
</div>
<div class="content">
<div class="ui form">
<div class="required field">
<div class="fields">
<div class="required eight wide field" ng-class="{error:urlError}">
<label>书签链接</label>
<input type="text" placeholder="输粘贴网页地址，如：https://mybookmark.cn/" ng-model="url" />
</div>
<div class="required eight wide field" ng-class="{error:titleError}">
<label ng-click="restoreTitle()">书签标题</label>
<div class="ui icon input" ng-class="{loading:loadTitle}">
<input type="text" ng-attr-placeholder="{{loadTitle ? '正在获取书签标题。。。' : '在书签链接处粘贴正确的网站会自动获取'}}" ng-model="title" />
<i class="search icon" ng-show="loadTitle && title.length==0"></i>
</div>
</div>
</div>
</div>
<div class="required field">
<label
>已有书签分类选择
<span title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;友情提示：&#10;1、添加新书签，根据使用经验，默认会选择最后一次使用分类。&#10;2、如果不是的，直接去选择其他的就好，系统会自动取消。&#10;3、如果你想同时选默认与其他的分类，你选了其他分类之后，再来选中取消的默认分类即可。&#10;4、若想对当前分类进行编辑，请前往分类页面！">
<i class="info circle icon"></i>
</span>
</label>
<div class="ui active inverted dimmer" ng-class="{active:loadTags, disabled: !loadTags}">
<div class="ui text loader">正在获取分类...</div>
</div>
<div class="ui label" style="margin:3px 10px 8px 0px;cursor:default;" ng-class="{green:tag.clicked}" ng-repeat="tag in tags" ng-click="clickTag(tag.id, !tag.clicked)" ng-show="!loadTags">{{ tag.name }}</div>
<div class="ui label" style="margin:3px 10px 8px 0px;cursor:default;" title="添加新分类" ng-click="showAddTag()" ng-show="!loadTags">
<i style="margin-left:10px;" class="plus icon"></i>
</div>
</div>
<div class="field">
<label>内容</label>
<textarea name="text" rows="6" placeholder="可以是网站的说明，也可以备忘一下账号或者摘抄内容，就算公开你的链接，这个也只有自己能在详情里面看到" ng-model="description"></textarea>
</div>
<div class="field">
<div class="ui checkbox checked js-public">
<input type="checkbox" name="example" checked="" />
<label>我要公开此收藏的链接供别人搜索</label>
</div>
</div>
</div>
</div>
<div class="actions">
<div class="ui cancel button" ng-click="cancel()" style="cursor:default;">取消</div>
<div class="ui green button" ng-click="ok()" style="cursor:default;">发送</div>
</div>
</div>
<div class="ui long modal js-add-bookmark" ng-controller="editCtr">
<!-- <i class="close icon"></i> -->
<div class="header">{{ add ? '添加书签' : '编辑书签'}}</div>
<div class="content">
<div class="ui form">
<div class="required field">
<div class="fields">
<div class="required eight wide field" ng-class="{error:urlError}">
<label>书签链接</label>
<input type="text" placeholder="输粘贴网页地址，如：https://mybookmark.cn/" ng-model="url" />
</div>
<div class="required eight wide field" ng-class="{error:titleError}">
<label ng-click="restoreTitle()">书签标题</label>
<div class="ui icon input" ng-class="{loading:loadTitle}">
<input type="text" ng-attr-placeholder="{{loadTitle ? '正在获取书签标题。。。' : '在书签链接处粘贴正确的网站会自动获取'}}" ng-model="title" />
<i class="search icon" ng-show="loadTitle && title.length==0"></i>
</div>
</div>
</div>
</div>
<div class="required field">
<label
>已有书签分类选择
<span title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;友情提示：&#10;1、添加新书签，根据使用经验，默认会选择最后一次使用分类。&#10;2、如果不是的，直接去选择其他的就好，系统会自动取消。&#10;3、如果你想同时选默认与其他的分类，你选了其他分类之后，再来选中取消的默认分类即可。&#10;4、若想对当前分类进行编辑，请前往分类页面！">
<i class="info circle icon"></i>
</span>
</label>
<div class="ui active inverted dimmer" ng-class="{active:loadTags, disabled: !loadTags}">
<div class="ui text loader">正在获取分类...</div>
</div>
<div class="ui label" style="margin: 3px 10px 8px 0px; cursor: default" ng-class="{green:tag.clicked}" ng-repeat="tag in tags" ng-click="clickTag(tag.id, !tag.clicked)" ng-show="!loadTags">{{ tag.name }}</div>
<div class="ui label" style="margin: 3px 10px 8px 0px; cursor: default" title="添加新分类" ng-click="showAddTag()" ng-show="!loadTags">
<i style="margin-left: 10px" class="plus icon"></i>
</div>
</div>
<div class="field">
<label>内容</label>
<textarea name="text" rows="6" placeholder="可以是网站的说明，也可以备忘一下账号或者摘抄内容，就算公开你的链接，这个也只有自己能在详情里面看到" ng-model="description"></textarea>
</div>
<div class="field">
<div class="ui checkbox checked js-public">
<input type="checkbox" name="example" checked="" />
<label>我要公开此收藏的链接供别人搜索</label>
</div>
</div>
</div>
</div>
<div class="actions">
<div class="ui cancel button" ng-click="cancel()" style="cursor: default">取消</div>
<div class="ui green button" ng-click="ok()" style="cursor: default">发送</div>
</div>
</div>

66
www/views/home.html
View File

@ -1,33 +1,33 @@
<div class="ui segment js-segment-home">
<div class="ui container js-p-info">
<h3 class="ui dividing header">为什么要做个网络书签</h3>
<p>每个浏览器上面都会有个书签可以供你收藏你以后可能还要用到的网址。但是你可能还是会遇到下列问题：</p>
<p>1、如果你重装系统，或者换浏览器怎么办？</p>
<p>2、如果你有多个浏览器书签该如何整合？</p>
<p>3、如何快速搜索保存的书签？比如我只想搜索某个时间段保存的书签？</p>
<p>4、如果一个分类下面书签过多，如何方便快速查看？</p>
<p>5、我能不能查看别人收藏的书签？</p>
<p>6、在其他地方上网的时候能不能查看我自己的书签？</p>
<p>7、如果公用一台电脑，如何区分我收藏的跟别人收藏的书签？</p>
<p>在线书签管理工具，帮助你快速记录你喜欢的网站，并可以随时随地查看这些站点，而不必拘泥于使用的浏览器。无论在什么地方，只要能接入网络，就能打开属于你自己的网络书签，看到自己收藏的页面网址。</p>
<h3 class="ui dividing header">主要功能</h3>
<p>1、需要注册账号用户。(完成)</p>
<p>2、网站展示有三种展示方式：导航，标签，列表，卡片。其中导航以分类展示，分类顺序可以在书签分类下面拖动编辑。按照点击的次数从高到低在每个分类里面提取16个书签，再按照最近添加的书签提取前面的16个书签，然后合并起来。标签是一个快捷方式。列表以表格展示，显示书签详细类容，按照点击次数优先显示，点击次数相同，则按添加顺序优先。卡片以卡片方式显示，按照最近添加优先显示。这几种展示方式，可以在设置里面默认一种你常用的方式。(完成)</p>
<p>3、在书签分类里面，可以更新分类，删除分类，新增分类，对分类显示进行排序。分类的标签默认按照添加日期展示，但是可以点击表格的标题，按照点击次数，添加日期，最后点击从大到小进行排序。(完成)</p>
<p>4、可以按照指定添加时间段，指定分类目录，指定网址关键字等进行查询。(完成)</p>
<p>5、添加书签的时候，会自动获取title，供用户编辑。其中：Insert键打开添加页面，再次按Insert键保存书签，Esc取消添加。(完成)</p>
<p>6、可以导入Chrome的书签导出文件，暂时做在设置里面。(完成)</p>
<p>7、书签可以作为公有或者私有，公有可供所有人搜索。(完成)</p>
<p>8、可以将搜索到其他用户的书签转存为自己的书签。(完成)</p>
<p>9、可以将书签导出来，然后导入到浏览器。(完成)</p>
<p>10、在热门标签里面，有在网上找的热门书签。可以转存收藏到自己书签里面。快捷键R随机查看热门书签。(完成)</p>
<p>11、新增备忘录功能，有时候随手要做点纪录，就方便了。任意界面按快捷键A增加备忘录。双击备忘录可查看详情！(完成)</p>
<p>12、在设置的全局链接，可设置快捷键，用来在任何页面，快速打开设置的链接。(完成)</p>
<p>13、安装<a href="https://chrome.google.com/webstore/detail/%E4%B9%A6%E7%AD%BE%E5%BF%AB%E9%80%9F%E6%B7%BB%E5%8A%A0/lmmobgephofdffmaednjooplcpbgbjle" target="_blank">Chrome插件</a>(需科学上网)，可在任意界面快速添加书签。(完成)</p>
<h3 class="ui dividing header">联系方式</h3>
<p>QQ群：1026967226，记得备注加：书签。</p>
<h3 class="ui dividing header">开发备忘(非开发人员请无视)</h3>
<p>1、该代码我托管在Github上<a href="https://github.com/luchenqun/my-bookmark" target="_blank">my-bookmark</a>。该地址有文件夹详细说明以及部署步骤。git地址：git@github.com:luchenqun/my-bookmark.git。如果你需要源码，你尽可随意使用此项目无需通知我。</p>
<img class="ui centered fluid image" src="./images/screenshot.gif" />
</div>
</div>
<div class="ui segment js-segment-home">
<div class="ui container js-p-info">
<h3 class="ui dividing header">为什么要做个网络书签</h3>
<p>每个浏览器上面都会有个书签可以供你收藏你以后可能还要用到的网址。但是你可能还是会遇到下列问题：</p>
<p>1、如果你重装系统，或者换浏览器怎么办？</p>
<p>2、如果你有多个浏览器书签该如何整合？</p>
<p>3、如何快速搜索保存的书签？比如我只想搜索某个时间段保存的书签？</p>
<p>4、如果一个分类下面书签过多，如何方便快速查看？</p>
<p>5、我能不能查看别人收藏的书签？</p>
<p>6、在其他地方上网的时候能不能查看我自己的书签？</p>
<p>7、如果公用一台电脑，如何区分我收藏的跟别人收藏的书签？</p>
<p>在线书签管理工具，帮助你快速记录你喜欢的网站，并可以随时随地查看这些站点，而不必拘泥于使用的浏览器。无论在什么地方，只要能接入网络，就能打开属于你自己的网络书签，看到自己收藏的页面网址。</p>
<h3 class="ui dividing header">主要功能</h3>
<p>1、需要注册账号用户。(完成)</p>
<p>2、网站展示有三种展示方式：导航，标签，列表，卡片。其中导航以分类展示，分类顺序可以在书签分类下面拖动编辑。按照点击的次数从高到低在每个分类里面提取16个书签，再按照最近添加的书签提取前面的16个书签，然后合并起来。标签是一个快捷方式。列表以表格展示，显示书签详细类容，按照点击次数优先显示，点击次数相同，则按添加顺序优先。卡片以卡片方式显示，按照最近添加优先显示。这几种展示方式，可以在设置里面默认一种你常用的方式。(完成)</p>
<p>3、在书签分类里面，可以更新分类，删除分类，新增分类，对分类显示进行排序。分类的标签默认按照添加日期展示，但是可以点击表格的标题，按照点击次数，添加日期，最后点击从大到小进行排序。(完成)</p>
<p>4、可以按照指定添加时间段，指定分类目录，指定网址关键字等进行查询。(完成)</p>
<p>5、添加书签的时候，会自动获取title，供用户编辑。其中：Insert键打开添加页面，再次按Insert键保存书签，Esc取消添加。(完成)</p>
<p>6、可以导入Chrome的书签导出文件，暂时做在设置里面。(完成)</p>
<p>7、书签可以作为公有或者私有，公有可供所有人搜索。(完成)</p>
<p>8、可以将搜索到其他用户的书签转存为自己的书签。(完成)</p>
<p>9、可以将书签导出来，然后导入到浏览器。(完成)</p>
<p>10、在热门标签里面，有在网上找的热门书签。可以转存收藏到自己书签里面。快捷键R随机查看热门书签。(完成)</p>
<p>11、新增备忘录功能，有时候随手要做点纪录，就方便了。任意界面按快捷键A增加备忘录。双击备忘录可查看详情！(完成)</p>
<p>12、在设置的全局链接，可设置快捷键，用来在任何页面，快速打开设置的链接。(完成)</p>
<p>13、安装<a href="https://chrome.google.com/webstore/detail/%E4%B9%A6%E7%AD%BE%E5%BF%AB%E9%80%9F%E6%B7%BB%E5%8A%A0/lmmobgephofdffmaednjooplcpbgbjle" target="_blank">Chrome插件</a>(需科学上网)，可在任意界面快速添加书签。(完成)</p>
<h3 class="ui dividing header">联系方式</h3>
<p>QQ群：1026967226，记得备注加：书签。</p>
<h3 class="ui dividing header">开发备忘(非开发人员请无视)</h3>
<p>1、该代码我托管在Github上<a href="https://github.com/luchenqun/my-bookmark" target="_blank">my-bookmark</a>。该地址有文件夹详细说明以及部署步骤。git地址：git@github.com:luchenqun/my-bookmark.git。如果你需要源码，你尽可随意使用此项目无需通知我。</p>
<img class="ui centered fluid image" src="./images/screenshot.gif" />
</div>
</div>

148
www/views/hot.html
View File

@ -1,76 +1,72 @@
<!-- 高度至少要设置1000，元素少时才能触发滚动条事件 -->
<div class="ui segment js-hot-card js-weixin-articles">
<div class="ui container" style="cursor: default;">
<div class="ui label" style="margin: 3px 15px 8px 0px; cursor: default;" ng-class="{green:channel.id===channelId}" ng-repeat="channel in channels" ng-click="getWeixinArticles(channel.id, 1)">{{ channel.name }}</div>
</div>
<div class="ui massive text centered inline loader js-hot-loader" style="margin: 50px 0px 120px 0px;" ng-class="{active:loading, disabled:!loading}">
正在加载中...
</div>
<div class="ui divider" style="margin: 3px 0px 8px 0px;"></div>
<div class="ui five stackable cards" ng-if="!loading">
<div class="card" ng-repeat="bookmark in bookmarks" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)">
<div class="content" style="max-height: 70px; cursor: pointer;" ng-click="detailBookmark(bookmark)">
<div class="description bookmarkTitle" title="{{bookmark.title}}">
{{bookmark.title}}
</div>
</div>
<div class="image hot-image" href="{{ bookmark.url }}" style="cursor: pointer;" ng-click="detailBookmark(bookmark)">
<img ng-src="{{bookmark.snap}}" err-src="{{bookmark.snap.startsWith('https://') ? bookmark.snap.replace('https://', 'http://') : './images/default.jpg'}}" />
</div>
<div class="extra content" ng-show="!bookmark.edit">
<img class="ui avatar image" style="width: 16px; height: 16px;" ng-src="{{bookmark.icon}}" />
<span class="sourceName" title="{{ bookmark.tagName }}">{{ bookmark.tagName }}</span>
<span class="clickCount" ng-if="bookmark.clickCount">·{{ bookmark.clickCount }}人收藏</span>
<i class="ellipsis horizontal icon right floated" style="margin-top: 6px;" ng-mouseover="bookmark.edit=true;"></i>
</div>
<div class="extra content" ng-show="bookmark.edit" ng-mouseleave="bookmark.edit=false;">
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 8px; margin-top: 4px;" ng-src="./images/favorite.png" ng-click="favoriteBookmark(bookmark)" title="一键收藏" />
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 8px; margin-top: 4px;" ng-src="./images/store-bookmark.png" ng-click="storeBookmark(bookmark)" title="转存到我的书签" />
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 8px; margin-top: 4px;" ng-src="./images/copy.png" ng-click="copy(bookmark.url)" title="复制链接" />
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 8px; margin-top: 4px;" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)" title="书签详情" />
</div>
</div>
</div>
<div class="ui longer modal js-weixin-content">
<i class="close icon" ng-click="close()"></i>
<div class="header">{{ bookmark.title }}</div>
<div class="scrolling content js-main-content">
<div class="ui center aligned container" style="margin: 10px 0px;">
<span style="color: #4383bf;" title="公众号名称">{{bookmark.tagName}}</span>
&nbsp;&nbsp;
<span title="公众号账号">{{bookmark.account}}</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span>{{bookmark.createdAt}}</span>
</div>
<div class="ui divider"></div>
<p ng-bind-html="bookmark.content"></p>
<div class="ui divider"></div>
<div class="ui container">
<img class="ui middle aligned mini image" ng-src="{{bookmark.icon}}" style="width: 16px; height: 16px; padding: 0; cursor: pointer;" ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="点击跳转到原页面(如果过期，需要在微信中才能打开)" />
<span title="点击复制链接" ng-click="copy(bookmark.url)" class="urlSpan">{{bookmark.url}} </span>
</div>
<div class="ui divider"></div>
<div class="ui grid" ng-if="bookmark.content">
<div class="eight wide column">
<div style="float: left; cursor: pointer;" ng-click="detailBookmark(bookmarks[bookmark.index-1])" ng-if="bookmarks[bookmark.index-1]"><i class="chevron left icon"></i> {{ bookmarks[bookmark.index-1].title }}</div>
</div>
<div class="eight wide column">
<div style="float: right; cursor: pointer;" ng-click="detailBookmark(bookmarks[bookmark.index+1])" ng-if="bookmarks[bookmark.index+1]">{{ bookmarks[bookmark.index+1].title }} <i class="chevron right icon"></i></div>
</div>
</div>
</div>
<div class="actions">
<div class="ui green button" ng-click="close()">已阅</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column">
<div ng-if="count" style="margin-top: 14px;">共计 {{count}} 个</div>
</div>
<div class="twelve wide column">
<pagination></pagination>
</div>
</div>
</div>
<!-- 高度至少要设置1000，元素少时才能触发滚动条事件 -->
<div class="ui segment js-hot-card js-weixin-articles">
<div class="ui container" style="cursor: default">
<div class="ui label" style="margin: 3px 15px 8px 0px; cursor: default" ng-class="{green:channel.id===channelId}" ng-repeat="channel in channels" ng-click="getWeixinArticles(channel.id, 1)">{{ channel.name }}</div>
</div>
<div class="ui massive text centered inline loader js-hot-loader" style="margin: 50px 0px 120px 0px" ng-class="{active:loading, disabled:!loading}">正在加载中...</div>
<div class="ui divider" style="margin: 3px 0px 8px 0px"></div>
<div class="ui five stackable cards" ng-if="!loading">
<div class="card" ng-repeat="bookmark in bookmarks" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)">
<div class="content" style="max-height: 70px; cursor: pointer" ng-click="detailBookmark(bookmark)">
<div class="description bookmarkTitle" title="{{bookmark.title}}">{{bookmark.title}}</div>
</div>
<div class="image hot-image" href="{{ bookmark.url }}" style="cursor: pointer" ng-click="detailBookmark(bookmark)">
<img ng-src="{{bookmark.snap}}" err-src="{{bookmark.snap.startsWith('https://') ? bookmark.snap.replace('https://', 'http://') : './images/default.jpg'}}" />
</div>
<div class="extra content" ng-show="!bookmark.edit">
<img class="ui avatar image" style="width: 16px; height: 16px" ng-src="{{bookmark.icon}}" />
<span class="sourceName" title="{{ bookmark.tagName }}">{{ bookmark.tagName }}</span>
<span class="clickCount" ng-if="bookmark.clickCount">·{{ bookmark.clickCount }}人收藏</span>
<i class="ellipsis horizontal icon right floated" style="margin-top: 6px" ng-mouseover="bookmark.edit=true;"></i>
</div>
<div class="extra content" ng-show="bookmark.edit" ng-mouseleave="bookmark.edit=false;">
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 8px; margin-top: 4px" ng-src="./images/favorite.png" ng-click="favoriteBookmark(bookmark)" title="一键收藏" />
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 8px; margin-top: 4px" ng-src="./images/store-bookmark.png" ng-click="storeBookmark(bookmark)" title="转存到我的书签" />
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 8px; margin-top: 4px" ng-src="./images/copy.png" ng-click="copy(bookmark.url)" title="复制链接" />
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 8px; margin-top: 4px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)" title="书签详情" />
</div>
</div>
</div>
<div class="ui longer modal js-weixin-content">
<i class="close icon" ng-click="close()"></i>
<div class="header">{{ bookmark.title }}</div>
<div class="scrolling content js-main-content">
<div class="ui center aligned container" style="margin: 10px 0px">
<span style="color: #4383bf" title="公众号名称">{{bookmark.tagName}}</span>
&nbsp;&nbsp;
<span title="公众号账号">{{bookmark.account}}</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span>{{bookmark.createdAt}}</span>
</div>
<div class="ui divider"></div>
<p ng-bind-html="bookmark.content"></p>
<div class="ui divider"></div>
<div class="ui container">
<img class="ui middle aligned mini image" ng-src="{{bookmark.icon}}" style="width: 16px; height: 16px; padding: 0; cursor: pointer" ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="点击跳转到原页面(如果过期，需要在微信中才能打开)" />
<span title="点击复制链接" ng-click="copy(bookmark.url)" class="urlSpan">{{bookmark.url}} </span>
</div>
<div class="ui divider"></div>
<div class="ui grid" ng-if="bookmark.content">
<div class="eight wide column">
<div style="float: left; cursor: pointer" ng-click="detailBookmark(bookmarks[bookmark.index-1])" ng-if="bookmarks[bookmark.index-1]"><i class="chevron left icon"></i> {{ bookmarks[bookmark.index-1].title }}</div>
</div>
<div class="eight wide column">
<div style="float: right; cursor: pointer" ng-click="detailBookmark(bookmarks[bookmark.index+1])" ng-if="bookmarks[bookmark.index+1]">{{ bookmarks[bookmark.index+1].title }} <i class="chevron right icon"></i></div>
</div>
</div>
</div>
<div class="actions">
<div class="ui green button" ng-click="close()">已阅</div>
</div>
</div>
<div class="ui grid">
<div class="four wide column">
<div ng-if="count" style="margin-top: 14px">共计 {{count}} 个</div>
</div>
<div class="twelve wide column">
<pagination></pagination>
</div>
</div>
</div>

132
www/views/login.html
View File

@ -1,67 +1,67 @@
<form class="ui form segment js-form-login" ng-class={error:showErr}>
<div class="ui error message">
<div class="header">错误提示</div>
<p>
{{ errInfo }}</p>
</div>
<div class="required field">
<label>用户名</label>
<div class="ui icon input">
<input type="text" ng-model="username" ng-keypress="($event.which === 13)?login():0">
<i class="user icon"></i>
</div>
</div>
<div class="required field">
<label>密码</label>
<div class="ui icon input">
<input type="password" ng-model="password" ng-keypress="($event.which === 13)?login():0">
<i class="lock icon"></i>
</div>
</div>
<div class="field" ng-show="false">
<div class="ui checkbox js-auto-login">
<input type="checkbox" name="auto-login" checked="true">
<label>30天内自动登陆</label>
</div>
</div>
<div class="field">
<div class="ui submit button" ng-click="login()">登陆</div>
<span>
<div style="margin-top:8px;float:right;">跳转到<a href="http://m.mybookmark.cn" target="_blank">移动设备</a>。没有账号？<a style="cursor:pointer;" ng-click="showRegister()">注册一个！</a>(体验账号：test。密码：123456)。
<a href="https://chrome.google.com/webstore/detail/%E4%B9%A6%E7%AD%BE%E5%BF%AB%E9%80%9F%E6%B7%BB%E5%8A%A0/lmmobgephofdffmaednjooplcpbgbjle" target="_blank">Chrome插件</a>安装(需科学上网)</p>
</div>
</span>
</div>
<div class="ui divider"></div>
<img class="ui centered fluid image" src="./images/screenshot.gif">
</form>
<div class="ui modal js-register">
<div class="header">
账号注册
</div>
<div class="content">
<div class="ui form">
<div class="required field">
<label>邮箱</label>
<input type="text" placeholder="" ng-model="emailRegister">
</div>
<div class="required field">
<label>用户名</label>
<input type="text" placeholder="只允许大小写字母数字，至少3位" ng-model="usernameRegister">
</div>
<div class="required field">
<label>密码</label>
<input type="password" placeholder="" ng-model="passwordRegister1">
</div>
<div class="required field">
<label>确认密码</label>
<input type="password" placeholder="" ng-model="passwordRegister2">
</div>
</div>
</div>
<div class="actions">
<div class="ui cancel button">取消</div>
<div class="ui green button" ng-click="register()">注册</div>
</div>
<form class="ui form segment js-form-login" ng-class={error:showErr}>
<div class="ui error message">
<div class="header">错误提示</div>
<p>
{{ errInfo }}</p>
</div>
<div class="required field">
<label>用户名</label>
<div class="ui icon input">
<input type="text" ng-model="username" ng-keypress="($event.which === 13)?login():0">
<i class="user icon"></i>
</div>
</div>
<div class="required field">
<label>密码</label>
<div class="ui icon input">
<input type="password" ng-model="password" ng-keypress="($event.which === 13)?login():0">
<i class="lock icon"></i>
</div>
</div>
<div class="field" ng-show="false">
<div class="ui checkbox js-auto-login">
<input type="checkbox" name="auto-login" checked="true">
<label>30天内自动登陆</label>
</div>
</div>
<div class="field">
<div class="ui submit button" ng-click="login()">登陆</div>
<span>
<div style="margin-top:8px;float:right;">跳转到<a href="http://m.mybookmark.cn" target="_blank">移动设备</a>。没有账号？<a style="cursor:pointer;" ng-click="showRegister()">注册一个！</a>(体验账号：test。密码：123456)。
<a href="https://chrome.google.com/webstore/detail/%E4%B9%A6%E7%AD%BE%E5%BF%AB%E9%80%9F%E6%B7%BB%E5%8A%A0/lmmobgephofdffmaednjooplcpbgbjle" target="_blank">Chrome插件</a>安装(需科学上网)</p>
</div>
</span>
</div>
<div class="ui divider"></div>
<img class="ui centered fluid image" src="./images/screenshot.gif">
</form>
<div class="ui modal js-register">
<div class="header">
账号注册
</div>
<div class="content">
<div class="ui form">
<div class="required field">
<label>邮箱</label>
<input type="text" placeholder="" ng-model="emailRegister">
</div>
<div class="required field">
<label>用户名</label>
<input type="text" placeholder="只允许大小写字母数字，至少3位" ng-model="usernameRegister">
</div>
<div class="required field">
<label>密码</label>
<input type="password" placeholder="" ng-model="passwordRegister1">
</div>
<div class="required field">
<label>确认密码</label>
<input type="password" placeholder="" ng-model="passwordRegister2">
</div>
</div>
</div>
<div class="actions">
<div class="ui cancel button">取消</div>
<div class="ui green button" ng-click="register()">注册</div>
</div>
</div>

50
www/views/menus.html
View File

@ -1,47 +1,47 @@
<div class="js-menu" ng-controller="menuCtr">
<div class="ui huge menu js-login-in" ng-if="login">
<a class="item js-single-menu" ng-class="{selected:$index===selectLoginIndex}" style="cursor: default;" ui-sref-opts="{reload: true}" ng-repeat="menu in loginMenus" ui-sref="{{ menu.uiSref }}({searchWord:null})" ng-show="menu.show !== false" js-menu-init>
<a class="item js-single-menu" ng-class="{selected:$index===selectLoginIndex}" style="cursor: default" ui-sref-opts="{reload: true}" ng-repeat="menu in loginMenus" ui-sref="{{ menu.uiSref }}({searchWord:null})" ng-show="menu.show !== false" js-menu-init>
<div>{{ menu.title }}</div>
</a>
<div id="js-search" style="width: 1500px;">
<div class="ui transparent fluid icon input" style="height: 100%; margin-left: 10px;">
<input id="sInput" style="padding-left: 0px;" class="prompt search-item js-search-input" type="text" ng-model="searchWord" placeholder="search..." ng-keypress="($event.which === 13)?search(searchWord, 0):0" ng-focus="toggleReady(true)" ng-blur="toggleReady(false)" data-position="bottom left" data-variation="large" />
<div class="ui fluid popup top left transition hidden js-popup-search js-history-popup" ng-if="searchHistory.length > 0" style="margin-left: 2px; margin-top: -1px;">
<div id="js-search" style="width: 1500px">
<div class="ui transparent fluid icon input" style="height: 100%; margin-left: 10px">
<input id="sInput" style="padding-left: 0px" class="prompt search-item js-search-input" type="text" ng-model="searchWord" placeholder="search..." ng-keypress="($event.which === 13)?search(searchWord, 0):0" ng-focus="toggleReady(true)" ng-blur="toggleReady(false)" data-position="bottom left" data-variation="large" />
<div class="ui fluid popup top left transition hidden js-popup-search js-history-popup" ng-if="searchHistory.length > 0" style="margin-left: 2px; margin-top: -1px">
<div class="ui internally grid">
<div class="row js-history-word" style="height: 20px;" ng-repeat="item in searchHistory">
<div class="sixteen wide column js-search-again" style="margin: -10px 0px 0px -8px; cursor: default;" ng-click="searchByHistory(item.t, item.d)">
<i class="{{ item.icon }}" style="cursor: default;"></i>
<span style="color: #7b77c5;">{{ item.d}}</span>
<div class="row js-history-word" style="height: 20px" ng-repeat="item in searchHistory">
<div class="sixteen wide column js-search-again" style="margin: -10px 0px 0px -8px; cursor: default" ng-click="searchByHistory(item.t, item.d)">
<i class="{{ item.icon }}" style="cursor: default"></i>
<span style="color: #7b77c5">{{ item.d}}</span>
</div>
</div>
<div class="row" style="height: 20px; background: #f2f2f2;" ng-click="delHistory()">
<div class="center aligned sixteen wide column" style="margin: -10px 0px 0px 0px; padding: 0px;">
<div style="cursor: pointer; float: right;">清空全部</div>
<div class="row" style="height: 20px; background: #f2f2f2" ng-click="delHistory()">
<div class="center aligned sixteen wide column" style="margin: -10px 0px 0px 0px; padding: 0px">
<div style="cursor: pointer; float: right">清空全部</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 13px;">
<span style="display: none;" class="searchIcon">
<span style="margin-left: -25px;"><i class="book link icon" title="书签搜索(输入关键字按回车键默认搜索引擎)" ng-click="search(searchWord, 0)" style="cursor: default; margin-right: 8px;"></i></span>
<span><i class="file alternate link icon" title="备忘录搜索" ng-click="search(searchWord, 5)" style="cursor: default; margin-right: 8px;"></i></span>
<span><i class="google link icon" title="谷歌搜索" ng-click="search(searchWord, 1)" style="cursor: default; margin-right: 8px;"></i></span>
<span><i class="bimobject link icon" title="百度搜索" ng-click="search(searchWord, 4)" style="cursor: default; margin-right: 8px;"></i></span>
<span><i class="github link icon" title="Github 搜索" ng-click="search(searchWord, 2)" style="cursor: default; margin-right: 8px;"></i></span>
<span><i class="stack overflow link icon" title="栈溢出搜索" ng-click="search(searchWord, 3)" style="cursor: default; margin-right: 8px;"></i></span>
<span style="margin: 0px 5px;">▏</span>
<div style="margin-top: 13px">
<span style="display: none" class="searchIcon">
<span style="margin-left: -25px"><i class="book link icon" title="书签搜索(输入关键字按回车键默认搜索引擎)" ng-click="search(searchWord, 0)" style="cursor: default; margin-right: 8px"></i></span>
<span><i class="file alternate link icon" title="备忘录搜索" ng-click="search(searchWord, 5)" style="cursor: default; margin-right: 8px"></i></span>
<span><i class="google link icon" title="谷歌搜索" ng-click="search(searchWord, 1)" style="cursor: default; margin-right: 8px"></i></span>
<span><i class="bimobject link icon" title="百度搜索" ng-click="search(searchWord, 4)" style="cursor: default; margin-right: 8px"></i></span>
<span><i class="github link icon" title="Github 搜索" ng-click="search(searchWord, 2)" style="cursor: default; margin-right: 8px"></i></span>
<span><i class="stack overflow link icon" title="栈溢出搜索" ng-click="search(searchWord, 3)" style="cursor: default; margin-right: 8px"></i></span>
<span style="margin: 0px 5px">▏</span>
</span>
<span data-tooltip="添加书签，可按Insert快速打开添加页面" ng-click="showAddBookmarkMoadl()">
<i class="add square link icon" style="cursor: default; margin-right: 8px; margin-left: 1px;"></i>
<i class="add square link icon" style="cursor: default; margin-right: 8px; margin-left: 1px"></i>
</span>
<span data-tooltip="如果你觉得我的系统对你有帮助，请点击跳转到 Github 为我 Star" ng-click="star()" ng-show="user.username !== 'lcq'">
<i class="star link icon" style="cursor: default; margin-right: 8px;"></i>
<i class="star link icon" style="cursor: default; margin-right: 8px"></i>
</span>
<span data-tooltip="请我喝杯咖啡" ng-click="coffee()" ng-show="user.username !== 'lcq'">
<i class="coffee link icon" style="cursor: default; margin-right: 8px;"></i>
<i class="coffee link icon" style="cursor: default; margin-right: 8px"></i>
</span>
<span data-tooltip="退出登陆" ng-click="logout()">
<i class="sign out link icon" style="cursor: default; margin-right: 8px;"></i>
<i class="sign out link icon" style="cursor: default; margin-right: 8px"></i>
</span>
</div>
</div>

50
www/views/note.html
View File

@ -1,12 +1,12 @@
<div class="ui segment js-note-card" style="padding:14px 0px 0px 0px;" ng-show="!loading || tags.length > 0">
<div class="ui container" style="padding-left:14px">
<div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-class="{green:tag.clicked}" ng-repeat="tag in tags" ng-click="clickTag(tag.id)" ng-show="tag.noteCount || add">{{ tag.name }} ({{ tag.noteCount || 0 }})</div>
<div class="ui label" style="margin:3px 15px 8px 0px;cursor:default;" ng-click="showAddNote()" data-tooltip="点击添加备忘。你也可以在任意界面按快捷键A(不区分大小写)增加备忘录。">
<i class="plus icon" style="margin-right:0px;"></i>
<div class="ui segment js-note-card" style="padding: 14px 0px 0px 0px" ng-show="!loading || tags.length > 0">
<div class="ui container" style="padding-left: 14px">
<div class="ui label" style="margin: 3px 15px 8px 0px; cursor: default" ng-class="{green:tag.clicked}" ng-repeat="tag in tags" ng-click="clickTag(tag.id)" ng-show="tag.noteCount || add">{{ tag.name }} ({{ tag.noteCount || 0 }})</div>
<div class="ui label" style="margin: 3px 15px 8px 0px; cursor: default" ng-click="showAddNote()" data-tooltip="点击添加备忘。你也可以在任意界面按快捷键A(不区分大小写)增加备忘录。">
<i class="plus icon" style="margin-right: 0px"></i>
</div>
</div>
<div class="ui container" style="padding-left:14px;padding-bottom:14px" ng-show="add">
<div class="ui form" >
<div class="ui container" style="padding-left: 14px; padding-bottom: 14px" ng-show="add">
<div class="ui form">
<div class="required field">
<label>内容</label>
<textarea rows="12" placeholder="" ng-model="content" id="noteedit"></textarea>
@ -21,8 +21,8 @@
</div>
</div>
</div>
<div class="ui divider" ng-show="notes.length > 0" style="margin:0px;"></div>
<div class="ui hidden info message js-note" ng-if="(!add) && notes.length == 0" style="margin-left:14px;margin-right:14px">
<div class="ui divider" ng-show="notes.length > 0" style="margin: 0px"></div>
<div class="ui hidden info message js-note" ng-if="(!add) && notes.length == 0" style="margin-left: 14px; margin-right: 14px">
<i class="close icon" ng-click="closeNote()"></i>
<div class="content">
<div class="header">系统提示！</div>
@ -31,38 +31,36 @@
</ul>
</div>
</div>
<div class="ui vertical segment" ng-repeat="note in notes" ng-click="noteClick(note)" ng-mouseover="setHoverNote(note)" ng-mouseleave="setHoverNote(null)" id="{{note.id}}" style="margin:0px;padding:10px 0px;">
<pre class="note-content" title="单击查看详情，C复制，D删除，E编辑" style="margin:0px;padding-left:14px;padding-right:14px" ng-if="!note.detail">{{ note.brief }}</pre>
<pre class="note-content" title="双击复制" ng-dblclick="copy(note.content)" style="margin:0px; font-size:16px;padding:60px 14px;" ng-if="note.detail">{{ note.content }}</pre>
<div class="ui vertical segment" ng-repeat="note in notes" ng-click="noteClick(note)" ng-mouseover="setHoverNote(note)" ng-mouseleave="setHoverNote(null)" id="{{note.id}}" style="margin: 0px; padding: 10px 0px">
<pre class="note-content" title="单击查看详情，C复制，D删除，E编辑" style="margin: 0px; padding-left: 14px; padding-right: 14px" ng-if="!note.detail">{{ note.brief }}</pre>
<pre class="note-content" title="双击复制" ng-dblclick="copy(note.content)" style="margin: 0px; font-size: 16px; padding: 60px 14px" ng-if="note.detail">{{ note.content }}</pre>
<div class="ui right aligned grid" ng-show="note.detail">
<div class="sixteen wide column" style="margin:0px 20px 0px 0px;padding:20px 0px 0px 0px;">
<div class="extra content" ng-show="true" ng-mouseleave="note.edit=false;" style="height:50px;">
<div class="ui mini label" ng-click="clickTag(note.tagId)" style="margin:3px 0px 0px 10px;cursor:default;">{{ note.tagName || "未分类" }}</div>
<span style="margin:0 8px;">
<div class="sixteen wide column" style="margin: 0px 20px 0px 0px; padding: 20px 0px 0px 0px">
<div class="extra content" ng-show="true" ng-mouseleave="note.edit=false;" style="height: 50px">
<div class="ui mini label" ng-click="clickTag(note.tagId)" style="margin: 3px 0px 0px 10px; cursor: default">{{ note.tagName || "未分类" }}</div>
<span style="margin: 0 8px">
<span title="添加于{{note.createdAt}}" class="need_to_be_rendered" data-timeago="{{ note.createdAt }}"></span>
<span style="margin-left:-3px;">添加</span>
<span style="margin-left: -3px">添加</span>
</span>
<i ng-if="note.public == 0" class="black lock icon" title="点击公开备忘" ng-click="updatePublic(note, 1)"></i>
<i ng-if="note.public == 1" class="black open lock icon" title="点击不公开备忘" ng-click="updatePublic(note, 0)"></i>
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;" ng-src="./images/delete.png" ng-click="delNote(note.id, note.content)" title="删除备忘" />
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 8px" ng-src="./images/delete.png" ng-click="delNote(note.id, note.content)" title="删除备忘" />
<label for="noteedit">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;" ng-src="./images/edit-bookmark.png" ng-click="editNote(note.id, note.content, note.tagId)" title="编辑备忘" />
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 8px" ng-src="./images/edit-bookmark.png" ng-click="editNote(note.id, note.content, note.tagId)" title="编辑备忘" />
</label>
<img class="ui mini spaced image" id="noteid{{note.id}}" style="width:16px;height:16px;margin:0 8px;" ng-src="./images/copy.png" id="url{{bookmark.id}}" ng-click="copy(note.content)" title="复制备忘" />
<img class="ui mini spaced image" id="noteid{{note.id}}" style="width: 16px; height: 16px; margin: 0 8px" ng-src="./images/copy.png" id="url{{bookmark.id}}" ng-click="copy(note.content)" title="复制备忘" />
<i class="black share alternate icon" title="复制分享地址" ng-click="share(note)"></i>
<i class="black chevron up icon" title="收起详情" ng-click="noteClick(note, true, $event)"></i>
</div>
</div>
</div>
</div>
<div style="height:20px;" ng-show="notes.length === 0"></div>
<div class="ui grid" ng-show="totalItems>0" style="margin:0px;padding:0px 14px">
<div class="eight wide column" style="padding-top:26px;"><span ng-show="searchWord">通过搜索关键字"{{searchWord}}"(点击菜单"备忘录"重新查看所有)，</span>共找到备忘一共约{{totalItems}}个</div>
<div style="height: 20px" ng-show="notes.length === 0"></div>
<div class="ui grid" ng-show="totalItems>0" style="margin: 0px; padding: 0px 14px">
<div class="eight wide column" style="padding-top: 26px"><span ng-show="searchWord">通过搜索关键字"{{searchWord}}"(点击菜单"备忘录"重新查看所有)，</span>共找到备忘一共约{{totalItems}}个</div>
<div class="eight wide column">
<pagination></pagination>
</div>
</div>
</div>
<div class="ui massive text centered inline loader js-hot-loader" style="margin-top: 10px;" ng-class="{active:loading, disabled:!loading}">
正在加载中...
</div>
<div class="ui massive text centered inline loader js-hot-loader" style="margin-top: 10px" ng-class="{active:loading, disabled:!loading}">正在加载中...</div>

58
www/views/pagination.html
View File

@ -1,29 +1,29 @@
<div class="ui right floated pagination menu" ng-if="totalPages>0">
<a class="icon item" ng-click="changeCurrentPage(1)" ng-show="currentPage>1">
<i class="angle double left icon"></i>
</a>
<a class="icon item" ng-click="changeCurrentPage(currentPage-1)" ng-show="currentPage>=2">
<i class="angle left icon"></i>
</a>
<a class="item" ng-if="currentPage > 1" ng-click="changeCurrentPage(1)">1</a>
<a class="item" style="cursor:not-allowed" ng-if="currentPage-3>2">.....</a>
<a class="item" ng-if="currentPage-3>1" ng-click="changeCurrentPage(currentPage-3)">{{currentPage-3}}</a>
<a class="item" ng-if="currentPage-2>1" ng-click="changeCurrentPage(currentPage-2)">{{currentPage-2}}</a>
<a class="item" ng-if="currentPage-1>1" ng-click="changeCurrentPage(currentPage-1)">{{currentPage-1}}</a>
<a class="item active">{{ currentPage }}</a>
<a class="item" ng-if="currentPage+1<totalPages" ng-click="changeCurrentPage(currentPage+1)">{{currentPage+1}}</a>
<a class="item" ng-if="currentPage+2<totalPages" ng-click="changeCurrentPage(currentPage+2)">{{currentPage+2}}</a>
<a class="item" ng-if="currentPage+3<totalPages" ng-click="changeCurrentPage(currentPage+3)">{{currentPage+3}}</a>
<a class="item" style="cursor:not-allowed" ng-if="currentPage+3<totalPages-1">.....</a>
<a class="item" ng-if="currentPage < totalPages" ng-click="changeCurrentPage(totalPages)">{{totalPages}}</a>
<a class="icon item" ng-click="changeCurrentPage(currentPage+1)" ng-show="currentPage<totalPages">
<i class="angle right icon"></i>
</a>
<a class="icon item" ng-click="changeCurrentPage(totalPages)" ng-show="currentPage<=totalPages-1">
<i class="angle double right icon"></i>
</a>
<div class="ui transparent input item" style="width:100px;">
<input type="text" placeholder="跳转至..." ng-model="inputPage" ng-keypress="($event.which === 13)?changeCurrentPage(inputPage):0" />
<i class="arrow right icon" ng-click="changeCurrentPage(inputPage)"></i>
</div>
</div>
<div class="ui right floated pagination menu" ng-if="totalPages>0">
<a class="icon item" ng-click="changeCurrentPage(1)" ng-show="currentPage>1">
<i class="angle double left icon"></i>
</a>
<a class="icon item" ng-click="changeCurrentPage(currentPage-1)" ng-show="currentPage>=2">
<i class="angle left icon"></i>
</a>
<a class="item" ng-if="currentPage > 1" ng-click="changeCurrentPage(1)">1</a>
<a class="item" style="cursor: not-allowed" ng-if="currentPage-3>2">.....</a>
<a class="item" ng-if="currentPage-3>1" ng-click="changeCurrentPage(currentPage-3)">{{currentPage-3}}</a>
<a class="item" ng-if="currentPage-2>1" ng-click="changeCurrentPage(currentPage-2)">{{currentPage-2}}</a>
<a class="item" ng-if="currentPage-1>1" ng-click="changeCurrentPage(currentPage-1)">{{currentPage-1}}</a>
<a class="item active" ng-show="currentPage>0">{{ currentPage }}</a>
<a class="item" ng-if="currentPage+1<totalPages" ng-click="changeCurrentPage(currentPage+1)">{{currentPage+1}}</a>
<a class="item" ng-if="currentPage+2<totalPages" ng-click="changeCurrentPage(currentPage+2)">{{currentPage+2}}</a>
<a class="item" ng-if="currentPage+3<totalPages" ng-click="changeCurrentPage(currentPage+3)">{{currentPage+3}}</a>
<a class="item" style="cursor: not-allowed" ng-if="currentPage+3<totalPages-1">.....</a>
<a class="item" ng-if="currentPage < totalPages" ng-click="changeCurrentPage(totalPages)">{{totalPages}}</a>
<a class="icon item" ng-click="changeCurrentPage(currentPage+1)" ng-show="currentPage<totalPages">
<i class="angle right icon"></i>
</a>
<a class="icon item" ng-click="changeCurrentPage(totalPages)" ng-show="currentPage<=totalPages-1">
<i class="angle double right icon"></i>
</a>
<div class="ui transparent input item" style="width: 100px">
<input type="text" placeholder="跳转至..." ng-model="inputPage" ng-keypress="($event.which === 13)?changeCurrentPage(inputPage):0" />
<i class="arrow right icon" ng-click="changeCurrentPage(inputPage)"></i>
</div>
</div>

354
www/views/search.html
View File

@ -1,182 +1,172 @@
<div class="ui huge text centered inline loader" ng-class="{active:loading, disabled: !loading}">
加载中，请稍候...
</div>
<div class="ui grid" style="height:45px;padding-top:5px;" ng-show="!loading">
<div class="fourteen wide column" ng-show="!showSearch">
共为您找到相关书签约{{bookmarkCount}}个
</div>
<div class="left floated right aligned two wide column" ng-show="!showSearch">
<img class="ui ui middle aligned tiny image" ng-src="./images/cocktail.png" style="width:16px;height:16px" ng-click="showSearch = !showSearch" />
<span ng-click="showSearch = !showSearch">搜索工具</span>
</div>
<div class="two wide column" ng-show="showSearch">
<div class="ui dropdown js-user-range" js-dropdown-user-range-init>
<div class="text">搜索范围</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="active item" data-value="self">自己书签</div>
<div class="item" data-value="other">全站书签</div>
<div class="item" data-value="hot">热门收藏</div>
</div>
</div>
</div>
<div class="four wide column" ng-show="showSearch">
<div class="ui dropdown item js-create-date" js-data-create-init>
<div class="text">创建时间不限</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="active item" data-value="36500">创建时间不限</div>
<div class="item" data-value="1">今天</div>
<div class="item" data-value="7">一周内</div>
<div class="item" data-value="31">一月内</div>
<div class="item" data-value="365">一年内</div>
<div class="divider"></div>
<div class="header">自定义</div>
<div class="ui transparent input">
<div class="ui calendar js-date-create-begin">
<div class="ui transparent input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="开始日期" ng-model="dateCreateBegin" />
</div>
</div>
</div>
<div class="ui transparent input">
<div class="ui calendar js-date-create-end">
<div class="ui transparent input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="结束日期" ng-model="dateCreateEnd" />
</div>
</div>
</div>
<div class="ui transparent input">
<div class="ui basic button" ng-click="updateCreateDate()">确定</div>
</div>
</div>
</div>
</div>
<div class="four wide column" ng-show="showSearch">
<div class="ui dropdown item js-click-date" js-data-click-init>
<div class="text">点击时间不限</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="active item" data-value="36500">点击时间不限</div>
<div class="item" data-value="1">今天</div>
<div class="item" data-value="7">一周内</div>
<div class="item" data-value="31">一月内</div>
<div class="item" data-value="365">一年内</div>
<div class="divider"></div>
<div class="header">自定义</div>
<div class="ui transparent input">
<div class="ui calendar js-date-click-begin">
<div class="ui transparent input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="开始日期" ng-model="dateClickBegin" />
</div>
</div>
</div>
<div class="ui transparent input">
<div class="ui calendar js-date-click-end">
<div class="ui transparent input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="结束日期" ng-model="dateClickEnd" />
</div>
</div>
</div>
<div class="ui transparent input">
<div class="ui basic button" ng-click="updateClickDate()">确定</div>
</div>
</div>
</div>
</div>
<div class="two wide column" ng-show="showSearch">
<div class="ui grid container" style="padding-top: 8px;">
<div class="ui multiple dropdown js-search-tags" style="padding:0;" ng-show="showTags" js-dropdown-tags-init>
<div class="default text">分类选择</div>
<i class="dropdown icon"></i>
<div class="menu" ng-click="updateTagsSelect()">
<div class="item" data-value="{{tag.id}}" ng-repeat="tag in tags">{{tag.name}}</div>
</div>
</div>
</div>
</div>
<div class="two wide column" ng-show="showSearch">
<div class="ui transparent input">
<input type="text" placeholder="标题，链接..." ng-model="keyword" ng-keypress="($event.which === 13)?search():0" />
</div>
</div>
<div class=" left floated right aligned two wide column" ng-show=" showSearch">
<div class="ui grid">
<div class="four wide column">
<i class="search icon" title="搜索" ng-click="currentPage=1;search()"></i>
</div>
<div class="twelve wide column">
<img class="ui ui middle aligned tiny image" ng-src="./images/hide.png" style="width:16px;height:16px" ng-click="showSearch = !showSearch" />
<span ng-click="showSearch = !showSearch">收起</span>
</div>
</div>
</div>
</div>
<table class="ui selectable celled table js-table-search" ng-show="!loading">
<thead>
<tr>
<th>标题</th>
<th>链接</th>
<th style="width:90px;">{{ searchHotBookmarks ? '收藏人数' : '点击次数'}}</th>
<th style="width:100px;">创建日期</th>
<th style="width:100px;">最后点击</th>
<th style="width:150px;">{{ searchHotBookmarks ? '来源信息' : '分类'}}</th>
<th style="width:88px;">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="bookmark in bookmarks" id="{{ bookmark.id }}" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)">
<td>
<img class="ui ui middle aligned mini image" ng-src="https://favicon.lucq.fun/?url={{bookmark.favicon_url}}" err-src="./images/default.ico" style="width:16px;height:16px;cursor:pointer;" ng-click="jumpToUrl(bookmark.url, bookmark.id)" ng-if="searchHotBookmarks" />
<img class="ui ui middle aligned mini image" ng-src="https://favicon.lucq.fun/?url={{bookmark.url}}" err-src="./images/default.ico" style="width:16px;height:16px;cursor:pointer;" ng-click="jumpToUrl(bookmark.url, bookmark.id)" ng-if="!searchHotBookmarks" />
<span ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{bookmark.title}}" style="cursor:pointer;">
{{ bookmark.title }}
</span>
</td>
<td>
<span title="{{bookmark.url}} 点击复制链接" ng-click="copy(bookmark.url)" style="cursor:default;">{{ bookmark.url }}</span>
</td>
<td>{{ bookmark.clickCount || bookmark.favCount }}</td>
<td>
<span title="{{bookmark.createdAt}}" class="need_to_be_rendered" data-timeago="{{bookmark.createdAt}}"></span>
</td>
<td>
<span id="time{{bookmark.id}}" title="{{bookmark.lastClick}}" class="need_to_be_rendered" data-timeago="{{bookmark.lastClick}}"></span>
</td>
<td>
<div class="ui label" tag-id="{{ tag.id }}" ng-if="!searchHotBookmarks">
{{ bookmark.tagName }}
</div>
<span ng-if="searchHotBookmarks">
{{ bookmark.createdBy }}
</span>
</td>
<td>
<span ng-show="bookmark.userId == user.id">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/delete.png" ng-click="delBookmark(bookmark)" title="删除书签" />
</span>
<span ng-show="bookmark.userId == user.id">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/edit-bookmark.png" ng-click="editBookmark(bookmark.id)" title="编辑书签" />
</span>
<span ng-show="bookmark.userId != user.id">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/favorite.png" ng-click="favoriteBookmark(bookmark)" title="一键收藏" />
</span>
<span ng-show="bookmark.userId != user.id">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/store-bookmark.png" ng-click="storeBookmark(bookmark)" title="转存到我的书签" />
</span>
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)" title="书签详情" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7">
<pagination></pagination>
</th>
</tr>
</tfoot>
</table>
<div class="ui huge text centered inline loader" ng-class="{active:loading, disabled: !loading}">加载中，请稍候...</div>
<div class="ui grid" style="height: 45px; padding-top: 5px" ng-show="!loading">
<div class="fourteen wide column" ng-show="!showSearch">共为您找到相关书签约{{bookmarkCount}}个</div>
<div class="left floated right aligned two wide column" ng-show="!showSearch">
<img class="ui ui middle aligned tiny image" ng-src="./images/cocktail.png" style="width: 16px; height: 16px" ng-click="showSearch = !showSearch" />
<span ng-click="showSearch = !showSearch">搜索工具</span>
</div>
<div class="two wide column" ng-show="showSearch">
<div class="ui dropdown js-user-range" js-dropdown-user-range-init>
<div class="text">搜索范围</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="active item" data-value="self">自己书签</div>
<div class="item" data-value="other">全站书签</div>
<div class="item" data-value="hot">热门收藏</div>
</div>
</div>
</div>
<div class="four wide column" ng-show="showSearch">
<div class="ui dropdown item js-create-date" js-data-create-init>
<div class="text">创建时间不限</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="active item" data-value="36500">创建时间不限</div>
<div class="item" data-value="1">今天</div>
<div class="item" data-value="7">一周内</div>
<div class="item" data-value="31">一月内</div>
<div class="item" data-value="365">一年内</div>
<div class="divider"></div>
<div class="header">自定义</div>
<div class="ui transparent input">
<div class="ui calendar js-date-create-begin">
<div class="ui transparent input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="开始日期" ng-model="dateCreateBegin" />
</div>
</div>
</div>
<div class="ui transparent input">
<div class="ui calendar js-date-create-end">
<div class="ui transparent input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="结束日期" ng-model="dateCreateEnd" />
</div>
</div>
</div>
<div class="ui transparent input">
<div class="ui basic button" ng-click="updateCreateDate()">确定</div>
</div>
</div>
</div>
</div>
<div class="four wide column" ng-show="showSearch">
<div class="ui dropdown item js-click-date" js-data-click-init>
<div class="text">点击时间不限</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="active item" data-value="36500">点击时间不限</div>
<div class="item" data-value="1">今天</div>
<div class="item" data-value="7">一周内</div>
<div class="item" data-value="31">一月内</div>
<div class="item" data-value="365">一年内</div>
<div class="divider"></div>
<div class="header">自定义</div>
<div class="ui transparent input">
<div class="ui calendar js-date-click-begin">
<div class="ui transparent input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="开始日期" ng-model="dateClickBegin" />
</div>
</div>
</div>
<div class="ui transparent input">
<div class="ui calendar js-date-click-end">
<div class="ui transparent input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="结束日期" ng-model="dateClickEnd" />
</div>
</div>
</div>
<div class="ui transparent input">
<div class="ui basic button" ng-click="updateClickDate()">确定</div>
</div>
</div>
</div>
</div>
<div class="two wide column" ng-show="showSearch">
<div class="ui grid container" style="padding-top: 8px">
<div class="ui multiple dropdown js-search-tags" style="padding: 0" ng-show="showTags" js-dropdown-tags-init>
<div class="default text">分类选择</div>
<i class="dropdown icon"></i>
<div class="menu" ng-click="updateTagsSelect()">
<div class="item" data-value="{{tag.id}}" ng-repeat="tag in tags">{{tag.name}}</div>
</div>
</div>
</div>
</div>
<div class="two wide column" ng-show="showSearch">
<div class="ui transparent input">
<input type="text" placeholder="标题，链接..." ng-model="keyword" ng-keypress="($event.which === 13)?search():0" />
</div>
</div>
<div class="left floated right aligned two wide column" ng-show=" showSearch">
<div class="ui grid">
<div class="four wide column">
<i class="search icon" title="搜索" ng-click="currentPage=1;search()"></i>
</div>
<div class="twelve wide column">
<img class="ui ui middle aligned tiny image" ng-src="./images/hide.png" style="width: 16px; height: 16px" ng-click="showSearch = !showSearch" />
<span ng-click="showSearch = !showSearch">收起</span>
</div>
</div>
</div>
</div>
<table class="ui selectable celled table js-table-search" ng-show="!loading">
<thead>
<tr>
<th>标题</th>
<th>链接</th>
<th style="width: 90px">{{ searchHotBookmarks ? '收藏人数' : '点击次数'}}</th>
<th style="width: 100px">创建日期</th>
<th style="width: 100px">最后点击</th>
<th style="width: 150px">{{ searchHotBookmarks ? '来源信息' : '分类'}}</th>
<th style="width: 88px">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="bookmark in bookmarks" id="{{ bookmark.id }}" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)">
<td>
<img class="ui ui middle aligned mini image" ng-src="https://favicon.lucq.fun/?url={{bookmark.favicon_url}}" err-src="./images/default.ico" style="width: 16px; height: 16px; cursor: pointer" ng-click="jumpToUrl(bookmark.url, bookmark.id)" ng-if="searchHotBookmarks" />
<img class="ui ui middle aligned mini image" ng-src="https://favicon.lucq.fun/?url={{bookmark.url}}" err-src="./images/default.ico" style="width: 16px; height: 16px; cursor: pointer" ng-click="jumpToUrl(bookmark.url, bookmark.id)" ng-if="!searchHotBookmarks" />
<span ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{bookmark.title}}" style="cursor: pointer"> {{ bookmark.title }} </span>
</td>
<td>
<span title="{{bookmark.url}} 点击复制链接" ng-click="copy(bookmark.url)" style="cursor: default">{{ bookmark.url }}</span>
</td>
<td>{{ bookmark.clickCount || bookmark.favCount }}</td>
<td>
<span title="{{bookmark.createdAt}}" class="need_to_be_rendered" data-timeago="{{bookmark.createdAt}}"></span>
</td>
<td>
<span id="time{{bookmark.id}}" title="{{bookmark.lastClick}}" class="need_to_be_rendered" data-timeago="{{bookmark.lastClick}}"></span>
</td>
<td>
<div class="ui label" tag-id="{{ tag.id }}" ng-if="!searchHotBookmarks">{{ bookmark.tagName }}</div>
<span ng-if="searchHotBookmarks"> {{ bookmark.createdBy }} </span>
</td>
<td>
<span ng-show="bookmark.userId == user.id">
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 1px" ng-src="./images/delete.png" ng-click="delBookmark(bookmark)" title="删除书签" />
</span>
<span ng-show="bookmark.userId == user.id">
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 1px" ng-src="./images/edit-bookmark.png" ng-click="editBookmark(bookmark.id)" title="编辑书签" />
</span>
<span ng-show="bookmark.userId != user.id">
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 1px" ng-src="./images/favorite.png" ng-click="favoriteBookmark(bookmark)" title="一键收藏" />
</span>
<span ng-show="bookmark.userId != user.id">
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 1px" ng-src="./images/store-bookmark.png" ng-click="storeBookmark(bookmark)" title="转存到我的书签" />
</span>
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 1px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)" title="书签详情" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7">
<pagination></pagination>
</th>
</tr>
</tfoot>
</table>

340
www/views/settings.html
View File

@ -1,171 +1,169 @@
<div class="ui segment js-segment-settings">
<div class="ui grid">
<div class="four wide stretched column">
<div class="ui secondary vertical pointing menu">
<a class="item" ng-class="{active:form[0]}" ng-click="changeForm(0)">系统设置 </a>
<a class="item" ng-class="{active:form[1]}" ng-click="changeForm(1)">我的信息 </a>
<a class="item" ng-class="{active:form[2]}" ng-click="changeForm(2)">上传导出 </a>
<a class="item" ng-class="{active:form[3]}" ng-click="changeForm(3)">网站说明 </a>
<a class="item" ng-class="{active:form[4]}" ng-click="changeForm(4)">全局书签 </a>
<a class="item" ng-class="{active:form[6]}" ng-click="changeForm(6)">请喝咖啡 </a>
</div>
</div>
<div class="twelve wide stretched column">
<form class="ui form" ng-show="form[0]">
<h4 class="ui horizontal divider header">
重置密码
</h4>
<div class="required field">
<label>原密码</label>
<input type="password" placeholder="" ng-model="passwordOrgin" />
</div>
<div class="required field">
<label>新密码</label>
<input type="password" placeholder="" ng-model="passwordNew1" />
</div>
<div class="required field">
<label>确认密码</label>
<input type="password" placeholder="" ng-model="passwordNew2" />
</div>
<button class="ui button" type="submit" ng-click="resetPassword()">重置密码</button>
</form>
<div class="ui four statistics" style="margin-top: 60px; margin-left: -80px;" ng-show="form[1]">
<div class="statistic">
<div class="text value">
{{user.createdAt.substring(0, 4)}}<br />
{{user.createdAt.substring(5, 10)}}
</div>
<div class="label">注册时间</div>
</div>
<div class="statistic">
<div class="text value">
{{user.lastLogin.substring(0, 4)}}<br />
{{user.lastLogin.substring(5, 10)}}
</div>
<div class="label">最近登陆</div>
</div>
<div class="statistic">
<div class="value">
<i class="tags icon"></i>
{{ tagCnt }}
</div>
<div class="label">分类数目</div>
</div>
<div class="statistic">
<div class="value">
<i class="bookmark icon"></i>
{{ bookmarkCount }}
</div>
<div class="label">书签数目</div>
</div>
</div>
<form class="ui form" ng-show="form[2]">
<h2 class="ui dividing header">上传浏览器书签到系统</h2>
<div id="fileuploader" style="min-width: 100px;">点我上传</div>
<div class="ui container js-p-info">
<p>注意事项</p>
<p>1、导入的方法是将浏览器里面收藏的网站导出HTML文件。然后将导出的HTML文件点击上面的<code>Upload</code>按钮上传到服务器。目前只测试过谷歌浏览器跟IE浏览器的书签导入。但是因为浏览器的标签是可以支持互相导入的，我觉得应该是没问题的。如果不成功，可以先将其他浏览器的书签导入谷歌浏览器再导出。</p>
<p>2、谷歌浏览器书签导出文件方法：<a href="http://jingyan.baidu.com/article/0bc808fc2d3b841bd485b9fb.html" target="_blank">chrome浏览器书签导出</a></p>
<p>3、IE浏览器书签导出文件方法(里面含有导入的方法，请无视)：<a href="http://jingyan.baidu.com/article/0bc808fc6a5bc31bd485b91b.html" target="_blank">IE浏览器收藏夹的导入</a></p>
<p>4、导入的文件不能超过10M</p>
<p>5、如果重复导入，新的会覆盖旧的信息。</p>
<p>6、注意：从浏览器导入进系统的书签，没有浏览器目录的树形结构，在浏览器没有目录的标签，统统转入系统未分类目录下面。</p>
</div>
<h2 class="ui dividing header">导出为浏览器书签</h2>
<button class="fluid ui button" ng-class="{loading : loading}" ng-click="exportBookmark()">导出书签</button>
<p ng-if="href">如果没有自动下载，请点击此<a ng-href="{{href}}" target="_blank">{{href}}</a>进行下载，十分钟有效！若已下载，则此下载链接无效！</p>
</form>
<div class="ui container js-p-info" ng-show="form[3]">
<h3 class="ui dividing header">为什么要做个网络书签</h3>
<p>每个浏览器上面都会有个书签可以供你收藏你以后可能还要用到的网址。但是你可能还是会遇到下列问题：</p>
<p>1、如果你重装系统，或者换浏览器怎么办？</p>
<p>2、如果你有多个浏览器书签该如何整合？</p>
<p>3、如何快速搜索保存的书签？比如我只想搜索某个时间段保存的书签？</p>
<p>4、如果一个分类下面书签过多，如何方便快速查看？</p>
<p>5、我能不能查看别人收藏的书签？</p>
<p>6、在其他地方上网的时候能不能查看我自己的书签？</p>
<p>7、如果公用一台电脑，如何区分我收藏的跟别人收藏的书签？</p>
<p>在线书签管理工具，帮助你快速记录你喜欢的网站，并可以随时随地查看这些站点，而不必拘泥于使用的浏览器。无论在什么地方，只要能接入网络，就能打开属于你自己的网络书签，看到自己收藏的页面网址。</p>
<h3 class="ui dividing header">主要功能</h3>
<p>1、需要注册账号用户。(完成)</p>
<p>2、网站展示有三种展示方式：导航，标签，列表，卡片。其中导航以分类展示，分类顺序可以在书签分类下面拖动编辑。按照点击的次数从高到低在每个分类里面提取16个书签，再按照最近添加的书签提取前面的16个书签，然后合并起来。标签是一个快捷方式。列表以表格展示，显示书签详细类容，按照点击次数优先显示，点击次数相同，则按添加顺序优先。卡片以卡片方式显示，按照最近添加优先显示。这几种展示方式，可以在设置里面默认一种你常用的方式。(完成)</p>
<p>3、在书签分类里面，可以更新分类，删除分类，新增分类，对分类显示进行排序。分类的标签默认按照添加日期展示，但是可以点击表格的标题，按照点击次数，添加日期，最后点击从大到小进行排序。(完成)</p>
<p>4、可以按照指定添加时间段，指定分类目录，指定网址关键字等进行查询。(完成)</p>
<p>5、添加书签的时候，会自动获取title，供用户编辑。其中：Insert键打开添加页面，再次按Insert键保存书签，Esc取消添加。(完成)</p>
<p>6、可以导入Chrome的书签导出文件，暂时做在设置里面。(完成)</p>
<p>7、书签可以作为公有或者私有，公有可供所有人搜索。(完成)</p>
<p>8、可以将搜索到其他用户的书签转存为自己的书签。(完成)</p>
<p>9、可以将书签导出来，然后导入到浏览器。(完成)</p>
<p>10、在热门标签里面，有在网上找的热门书签。可以转存收藏到自己书签里面。快捷键R随机查看热门书签。(完成)</p>
<p>11、新增备忘录功能，有时候随手要做点纪录，就方便了。任意界面按快捷键A增加备忘录。双击备忘录可查看详情！(完成)</p>
<p>12、在设置的全局链接，可设置快捷键，用来在任何页面，快速打开设置的链接。(完成)</p>
<p>13、安装<a href="https://chrome.google.com/webstore/detail/%E4%B9%A6%E7%AD%BE%E5%BF%AB%E9%80%9F%E6%B7%BB%E5%8A%A0/lmmobgephofdffmaednjooplcpbgbjle" target="_blank">Chrome插件</a>(需科学上网)，可在任意界面快速添加书签。(完成)</p>
<h3 class="ui dividing header">联系方式</h3>
<p>QQ群：1026967226，记得备注加：书签。</p>
<h3 class="ui dividing header">开发备忘(非开发人员请无视)</h3>
<p>1、该代码我托管在Github上<a href="https://github.com/luchenqun/my-bookmark" target="_blank">my-bookmark</a>。该地址有文件夹详细说明以及部署步骤。git地址：git@github.com:luchenqun/my-bookmark.git。如果你需要源码，你尽可随意使用此项目无需通知我。</p>
<img class="ui centered fluid image" src="./images/screenshot.gif" />
</div>
<div class="ui container js-p-info" ng-show="form[4]">
<p>功能说明：可在该页面，设置全局快速打开的链接。快捷键只能是字母a ~ z，字母不区分大小写。</p>
<p>
以下几个系统默认使用的按键无法使用：<br />
<span ng-repeat="(key, value) in forbidQuickKey">{{key}}：{{value}}<br /></span>
</p>
<p>如果你想更换快捷链接，你需要先删除再添加。</p>
<div class="ui divider"></div>
<div class="ui form">
<div class="inline fields">
<div class="five wide field">
<label style="min-width: 55px;">快捷键：</label>
<input type="text" placeholder="请按相应的快捷键" ng-model="key" ng-keypress="quickKey($event.key)" />
</div>
<div class="nine wide field">
<label style="min-width: 66px;">网站地址：</label>
<input type="text" placeholder="请输入你需要快捷打开的网站地址" ng-model="url" />
</div>
<div class="two wide field">
<div class="ui green button" ng-click="addQuickUrl()">确定</div>
</div>
</div>
</div>
<div class="ui divider"></div>
<table class="ui selectable sortable celled table js-quick-url-table">
<thead>
<tr>
<th style="width: 80px;">快捷键</th>
<th>网站地址</th>
<th style="width: 45px;">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in quickUrl">
<td>{{key}}</td>
<td>
<img class="ui ui middle aligned tiny image" ng-src="https://favicon.lucq.fun/?url={{value}}" err-src="./images/default.ico" style="width: 16px; height: 16px;" />
<span>{{value}}</span>
</td>
<td>
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 1px;" ng-src="./images/delete.png" ng-click="delUrl(key)" title="删除书签" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="ui container js-p-info" ng-show="form[6]">
<h3 class="ui dividing header">赞赏说明</h3>
<p>赞赏金额主要用于服务器的租用与域名的费用，对于赞赏有以下几点说明：</p>
<p>1、目前租用的服务器每年大概六七百。域名mybookmark.cn我花151元买了五年，2021年11月份到期。域名mybookmark.cn我花151元买了五年，2021年11月份到期。</p>
<p>2、赞赏转账的时候，请留言添加“账号 + 书签赞赏”这四个汉字。供我区分。</p>
<h3 class="ui dividing header">赞赏二维码</h3>
<div class="ui grid">
<div class="one wide column"></div>
<div class="five wide column">微信<img class="ui rounded left floated medium image" src="./images/wx.png" /></div>
<div class="two wide column"></div>
<div class="five wide column">支付宝<img class="ui rounded right floated medium image" src="./images/zfb.png" /></div>
<div class="one wide column"></div>
</div>
</div>
</div>
</div>
</div>
<div class="ui segment js-segment-settings">
<div class="ui grid">
<div class="four wide stretched column">
<div class="ui secondary vertical pointing menu">
<a class="item" ng-class="{active:form[0]}" ng-click="changeForm(0)">系统设置 </a>
<a class="item" ng-class="{active:form[1]}" ng-click="changeForm(1)">我的信息 </a>
<a class="item" ng-class="{active:form[2]}" ng-click="changeForm(2)">上传导出 </a>
<a class="item" ng-class="{active:form[3]}" ng-click="changeForm(3)">网站说明 </a>
<a class="item" ng-class="{active:form[4]}" ng-click="changeForm(4)">全局书签 </a>
<a class="item" ng-class="{active:form[6]}" ng-click="changeForm(6)">请喝咖啡 </a>
</div>
</div>
<div class="twelve wide stretched column">
<form class="ui form" ng-show="form[0]">
<h4 class="ui horizontal divider header">重置密码</h4>
<div class="required field">
<label>原密码</label>
<input type="password" placeholder="" ng-model="passwordOrgin" />
</div>
<div class="required field">
<label>新密码</label>
<input type="password" placeholder="" ng-model="passwordNew1" />
</div>
<div class="required field">
<label>确认密码</label>
<input type="password" placeholder="" ng-model="passwordNew2" />
</div>
<button class="ui button" type="submit" ng-click="resetPassword()">重置密码</button>
</form>
<div class="ui four statistics" style="margin-top: 60px; margin-left: -80px" ng-show="form[1]">
<div class="statistic">
<div class="text value">
{{user.createdAt.substring(0, 4)}}<br />
{{user.createdAt.substring(5, 10)}}
</div>
<div class="label">注册时间</div>
</div>
<div class="statistic">
<div class="text value">
{{user.lastLogin.substring(0, 4)}}<br />
{{user.lastLogin.substring(5, 10)}}
</div>
<div class="label">最近登陆</div>
</div>
<div class="statistic">
<div class="value">
<i class="tags icon"></i>
{{ tagCnt }}
</div>
<div class="label">分类数目</div>
</div>
<div class="statistic">
<div class="value">
<i class="bookmark icon"></i>
{{ bookmarkCount }}
</div>
<div class="label">书签数目</div>
</div>
</div>
<form class="ui form" ng-show="form[2]">
<h2 class="ui dividing header">上传浏览器书签到系统</h2>
<div id="fileuploader" style="min-width: 100px">点我上传</div>
<div class="ui container js-p-info">
<p>注意事项</p>
<p>1、导入的方法是将浏览器里面收藏的网站导出HTML文件。然后将导出的HTML文件点击上面的<code>Upload</code>按钮上传到服务器。目前只测试过谷歌浏览器跟IE浏览器的书签导入。但是因为浏览器的标签是可以支持互相导入的，我觉得应该是没问题的。如果不成功，可以先将其他浏览器的书签导入谷歌浏览器再导出。</p>
<p>2、谷歌浏览器书签导出文件方法：<a href="http://jingyan.baidu.com/article/0bc808fc2d3b841bd485b9fb.html" target="_blank">chrome浏览器书签导出</a></p>
<p>3、IE浏览器书签导出文件方法(里面含有导入的方法，请无视)：<a href="http://jingyan.baidu.com/article/0bc808fc6a5bc31bd485b91b.html" target="_blank">IE浏览器收藏夹的导入</a></p>
<p>4、导入的文件不能超过10M</p>
<p>5、如果重复导入，新的会覆盖旧的信息。</p>
<p>6、注意：从浏览器导入进系统的书签，没有浏览器目录的树形结构，在浏览器没有目录的标签，统统转入系统未分类目录下面。</p>
</div>
<h2 class="ui dividing header">导出为浏览器书签</h2>
<button class="fluid ui button" ng-class="{loading : loading}" ng-click="exportBookmark()">导出书签</button>
<p ng-if="href">如果没有自动下载，请点击此<a ng-href="{{href}}" target="_blank">{{href}}</a>进行下载，十分钟有效！若已下载，则此下载链接无效！</p>
</form>
<div class="ui container js-p-info" ng-show="form[3]">
<h3 class="ui dividing header">为什么要做个网络书签</h3>
<p>每个浏览器上面都会有个书签可以供你收藏你以后可能还要用到的网址。但是你可能还是会遇到下列问题：</p>
<p>1、如果你重装系统，或者换浏览器怎么办？</p>
<p>2、如果你有多个浏览器书签该如何整合？</p>
<p>3、如何快速搜索保存的书签？比如我只想搜索某个时间段保存的书签？</p>
<p>4、如果一个分类下面书签过多，如何方便快速查看？</p>
<p>5、我能不能查看别人收藏的书签？</p>
<p>6、在其他地方上网的时候能不能查看我自己的书签？</p>
<p>7、如果公用一台电脑，如何区分我收藏的跟别人收藏的书签？</p>
<p>在线书签管理工具，帮助你快速记录你喜欢的网站，并可以随时随地查看这些站点，而不必拘泥于使用的浏览器。无论在什么地方，只要能接入网络，就能打开属于你自己的网络书签，看到自己收藏的页面网址。</p>
<h3 class="ui dividing header">主要功能</h3>
<p>1、需要注册账号用户。(完成)</p>
<p>2、网站展示有三种展示方式：导航，标签，列表，卡片。其中导航以分类展示，分类顺序可以在书签分类下面拖动编辑。按照点击的次数从高到低在每个分类里面提取16个书签，再按照最近添加的书签提取前面的16个书签，然后合并起来。标签是一个快捷方式。列表以表格展示，显示书签详细类容，按照点击次数优先显示，点击次数相同，则按添加顺序优先。卡片以卡片方式显示，按照最近添加优先显示。这几种展示方式，可以在设置里面默认一种你常用的方式。(完成)</p>
<p>3、在书签分类里面，可以更新分类，删除分类，新增分类，对分类显示进行排序。分类的标签默认按照添加日期展示，但是可以点击表格的标题，按照点击次数，添加日期，最后点击从大到小进行排序。(完成)</p>
<p>4、可以按照指定添加时间段，指定分类目录，指定网址关键字等进行查询。(完成)</p>
<p>5、添加书签的时候，会自动获取title，供用户编辑。其中：Insert键打开添加页面，再次按Insert键保存书签，Esc取消添加。(完成)</p>
<p>6、可以导入Chrome的书签导出文件，暂时做在设置里面。(完成)</p>
<p>7、书签可以作为公有或者私有，公有可供所有人搜索。(完成)</p>
<p>8、可以将搜索到其他用户的书签转存为自己的书签。(完成)</p>
<p>9、可以将书签导出来，然后导入到浏览器。(完成)</p>
<p>10、在热门标签里面，有在网上找的热门书签。可以转存收藏到自己书签里面。快捷键R随机查看热门书签。(完成)</p>
<p>11、新增备忘录功能，有时候随手要做点纪录，就方便了。任意界面按快捷键A增加备忘录。双击备忘录可查看详情！(完成)</p>
<p>12、在设置的全局链接，可设置快捷键，用来在任何页面，快速打开设置的链接。(完成)</p>
<p>13、安装<a href="https://chrome.google.com/webstore/detail/%E4%B9%A6%E7%AD%BE%E5%BF%AB%E9%80%9F%E6%B7%BB%E5%8A%A0/lmmobgephofdffmaednjooplcpbgbjle" target="_blank">Chrome插件</a>(需科学上网)，可在任意界面快速添加书签。(完成)</p>
<h3 class="ui dividing header">联系方式</h3>
<p>QQ群：1026967226，记得备注加：书签。</p>
<h3 class="ui dividing header">开发备忘(非开发人员请无视)</h3>
<p>1、该代码我托管在Github上<a href="https://github.com/luchenqun/my-bookmark" target="_blank">my-bookmark</a>。该地址有文件夹详细说明以及部署步骤。git地址：git@github.com:luchenqun/my-bookmark.git。如果你需要源码，你尽可随意使用此项目无需通知我。</p>
<img class="ui centered fluid image" src="./images/screenshot.gif" />
</div>
<div class="ui container js-p-info" ng-show="form[4]">
<p>功能说明：可在该页面，设置全局快速打开的链接。快捷键只能是字母a ~ z，字母不区分大小写。</p>
<p>
以下几个系统默认使用的按键无法使用：<br />
<span ng-repeat="(key, value) in forbidQuickKey">{{key}}：{{value}}<br /></span>
</p>
<p>如果你想更换快捷链接，你需要先删除再添加。</p>
<div class="ui divider"></div>
<div class="ui form">
<div class="inline fields">
<div class="five wide field">
<label style="min-width: 55px">快捷键：</label>
<input type="text" placeholder="请按相应的快捷键" ng-model="key" ng-keypress="quickKey($event.key)" />
</div>
<div class="nine wide field">
<label style="min-width: 66px">网站地址：</label>
<input type="text" placeholder="请输入你需要快捷打开的网站地址" ng-model="url" />
</div>
<div class="two wide field">
<div class="ui green button" ng-click="addQuickUrl()">确定</div>
</div>
</div>
</div>
<div class="ui divider"></div>
<table class="ui selectable sortable celled table js-quick-url-table">
<thead>
<tr>
<th style="width: 80px">快捷键</th>
<th>网站地址</th>
<th style="width: 45px">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in quickUrl">
<td>{{key}}</td>
<td>
<img class="ui ui middle aligned tiny image" ng-src="https://favicon.lucq.fun/?url={{value}}" err-src="./images/default.ico" style="width: 16px; height: 16px" />
<span>{{value}}</span>
</td>
<td>
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 1px" ng-src="./images/delete.png" ng-click="delUrl(key)" title="删除书签" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="ui container js-p-info" ng-show="form[6]">
<h3 class="ui dividing header">赞赏说明</h3>
<p>赞赏金额主要用于服务器的租用与域名的费用，对于赞赏有以下几点说明：</p>
<p>1、目前租用的服务器每年大概六七百。域名mybookmark.cn我花151元买了五年，2021年11月份到期。域名mybookmark.cn我花151元买了五年，2021年11月份到期。</p>
<p>2、赞赏转账的时候，请留言添加“账号 + 书签赞赏”这四个汉字。供我区分。</p>
<h3 class="ui dividing header">赞赏二维码</h3>
<div class="ui grid">
<div class="one wide column"></div>
<div class="five wide column">微信<img class="ui rounded left floated medium image" src="./images/wx.png" /></div>
<div class="two wide column"></div>
<div class="five wide column">支付宝<img class="ui rounded right floated medium image" src="./images/zfb.png" /></div>
<div class="one wide column"></div>
</div>
</div>
</div>
</div>
</div>

269
www/views/tags.html
View File

@ -1,139 +1,130 @@
<div class="ui segment js-tags" ng-show="!loading || tags.length > 0">
<div class="ui container" ng-show="!editMode" style="cursor: default;">
<div class="ui label" style="margin: 3px 15px 8px 0px; cursor: default;" ng-if="tag.bookmarkCount && tag.show" ng-repeat="tag in tags" ng-class="{green:tag.bookmarkClicked}" ng-click="getBookmarks(tag.id, (tag.id == -1 ? 0 : 1), null)">
{{ tag.name }} ({{ tag.bookmarkCount || 0 }})
</div>
<div class="ui label globalTag" style="margin: 3px 15px 8px 0px; cursor: default;display:none" ng-click="globalTag()">
全局书签
</div>
<div class="ui label js-tag-label" style="margin: 3px 15px 8px 0px; cursor: default;">
<i class="plus icon" data-content="点击添加分类" data-position="top center" ng-click="showAddTag()"></i>
<i class="pencil alternate icon" data-content="点击进入分类编辑模式" data-position="top center" ng-click="toggleMode(true)"></i>
<i class="table icon" style="margin-right: 0px;" data-content="点击以条目显示" data-position="top center" ng-show="showMode=='table'" ng-click="toggleShowMode('item')"></i>
<i class="list icon" style="margin-right: 0px;" data-content="点击以表格显示" data-position="top center" ng-show="showMode=='item'" ng-click="toggleShowMode('table')"></i>
</div>
</div>
<div class="ui container" ng-show="editMode" ng-mousedown="storeTagIndex()" ng-mouseup="updateTagIndex()">
<p>提示：拖拽分类即可进行排序。如果添加新的分类，返回之后不会显示添加的分类，因为默认只显示有书签的分类。</p>
<div class="ui six stackable cards" sv-root sv-part="tags">
<div class="card" style="background-color: #f5f5f5;" ng-click="showAddTag()" data-tooltip="添加书签">
<div class="image">
<img src="./images/add-tag.png" />
</div>
</div>
<div class="card" style="background-color: #f5f5f5;" ng-click="toggleMode(false)" data-tooltip="退出编辑模式">
<div class="image">
<img src="./images/back-tag.png" />
</div>
</div>
<div class="card" ng-repeat="tag in tags" id="tag{{tag.id}}" ng-if="tag.id > -1" sv-element>
<div class="content">
<div class="header" ng-if="!tag.edit">{{ tag.name }}</div>
<div class="ui large fluid transparent input" style="height: 19px;" ng-if="tag.edit">
<input type="text" ng-model="tag.name" style="font-size: 18px;" id="tagedit{{tag.id}}" />
<i class="checkmark icon" style="cursor: pointer;" ng-click="updateTag(tag)" title="更新分类"></i>
<i class="mail forward icon" style="cursor: pointer;" ng-click="backTag(tag)" title="放弃更新"></i>
</div>
</div>
<div class="content" style="cursor: move;" sv-handle>
<div class="description">
<p>书签：{{ tag.bookmarkCount || 0 }}个</p>
<p>{{ tag.lastUse }}</p>
</div>
</div>
<div class="extra content">
<img class="ui mini spaced image right floated" style="width: 16px; height: 16px; margin: 0 5px;" ng-src="./images/delete.png" ng-click="delTag(tag)" title="删除分类" />
<label for="tagedit{{tag.id}}" ng-show="!tag.edit">
<img class="ui mini spaced image right floated" style="width: 16px; height: 16px; margin: 0 5px;" ng-src="./images/edit-bookmark.png" ng-click="editTag(tag)" title="编辑分类" />
</label>
<i class="eye black icon right floated" style="cursor: pointer;" ng-if="tag.show" ng-click="updateTagShow(tag, 0)" title="点击隐藏分类"></i>
<i class="eye black slash icon right floated" style="cursor: pointer;" ng-if="!tag.show" ng-click="updateTagShow(tag, 1)" title="点击显示分类"></i>
</div>
</div>
</div>
</div>
</div>
<div class="ui huge text centered inline loader" style="margin-top: 10px;" ng-class="{active:loading, disabled: !loading}">
正在加载中...
</div>
<table class="ui selectable sortable celled table js-tags-table" ng-if="showMode=='table'" style="margin-top: -15px;" ng-show="!loading && !editMode">
<thead>
<tr>
<th class="forbid_sorted">标题</th>
<th class="forbid_sorted">链接</th>
<th style="width: 90px;" ng-class="{descending: showType == 'clickCount', sorted:showType == 'clickCount'}" ng-click="getBookmarks(null, 1, 'clickCount')" title="点击可对表格进行排序">点击次数</th>
<th style="width: 100px;" ng-class="{descending: showType == 'createdAt', sorted:showType == 'createdAt'}" ng-click="getBookmarks(null, 1, 'createdAt')" title="点击可对表格进行排序">添加日期</th>
<th style="width: 100px;" ng-class="{descending: showType == 'lastClick', sorted:showType == 'lastClick'}" ng-click="getBookmarks(null, 1, 'lastClick')" title="点击可对表格进行排序">最后点击</th>
<th style="width: 150px;" class="forbid_sorted">分类</th>
<th style="width: 88px;" class="forbid_sorted">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="bookmark in bookmarks" id="{{ bookmark.id }}" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)">
<td>
<img class="ui ui middle aligned tiny image" ng-src="https://favicon.lucq.fun/?url={{bookmark.url}}" err-src="./images/default.ico" style="width: 16px; height: 16px; cursor: pointer;" ng-click="jumpToUrl(bookmark.url, bookmark.id)" />
<span ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{bookmark.title}}" style="cursor: pointer;">
{{ bookmark.title }}
</span>
</td>
<td>
<span title="{{bookmark.url}} 点击复制链接" ng-click="copy(bookmark.url)" style="cursor: default;">{{ bookmark.url }}</span>
</td>
<td>{{ bookmark.clickCount }}</td>
<td>
<span title="{{bookmark.createdAt}}" class="need_to_be_rendered" data-timeago="{{bookmark.createdAt}}"></span>
</td>
<td>
<span id="time{{bookmark.id}}" title="{{bookmark.lastClick}}" class="need_to_be_rendered" data-timeago="{{bookmark.lastClick}}"></span>
</td>
<td>
<div class="ui label">
{{ bookmark.tagName }}
</div>
</td>
<td>
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 1px;" ng-src="./images/delete.png" ng-click="delBookmark(bookmark)" title="删除书签" />
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 1px;" ng-src="./images/edit-bookmark.png" ng-click="editBookmark(bookmark.id)" title="编辑书签" />
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 1px;" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)" title="书签详情" />
</td>
</tr>
</tbody>
<tfoot ng-show="!costomTag.bookmarkClicked && !costomAllUsersTag.bookmarkClicked">
<tr>
<th colspan="7">
<pagination></pagination>
</th>
</tr>
</tfoot>
</table>
<div class="ui segment js-tag-costomTag" ng-if="showMode=='item'" style="margin-top: -15px;" ng-show="!loading && !editMode">
<div class="ui five column grid">
<div ng-repeat="bookmark in bookmarks" class="column js-costomTag-item" ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmark:(!bookmarkNormalHover)}" ng-mouseover="bookmarkNormalHover=true; setHoverBookmark(bookmark)" ng-mouseleave="bookmarkNormalHover=false; setHoverBookmark(null)" ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{ bookmark.title }}" id="{{bookmark.id}}">
<img class="ui ui middle aligned tiny image bookmarkInfo" ng-src="https://favicon.lucq.fun/?url={{bookmark.url}}" err-src="./images/default.ico" style="width: 16px; height: 16px;" ng-click="detailBookmark(bookmark);$event.stopPropagation()" />
<span>{{ bookmark.title}}</span>
</div>
</div>
<div class="ui divider"></div>
<div class="ui grid">
<div class="five wide column" style="margin-top: 10px;" ng-show="currentPage>0">
<div class="ui three column grid" style="cursor: default;">
<div class="column" ng-click="getBookmarks(null, 1, 'createdAt')">
<i class="add to calendar large icon" ng-class="{green: showType == 'createdAt'}" style="margin-bottom: 4px;"></i>
<span ng-class="{fontgreen: showType == 'createdAt'}" style="margin-left: -5px;">添加日期</span>
</div>
<div class="column" ng-click="getBookmarks(null, 1, 'clickCount')">
<i class="sort numeric descending large icon" ng-class="{green: showType == 'clickCount'}" style="margin-bottom: 4px;"></i>
<span ng-class="{fontgreen: showType == 'clickCount'}" style="margin-left: -5px;">点击次数</span>
</div>
<div class="column" ng-click="getBookmarks(null, 1, 'lastClick')">
<i class="sort alphabet descending large icon" ng-class="{green: showType == 'lastClick'}" style="margin-bottom: 4px;"></i>
<span ng-class="{fontgreen: showType == 'lastClick'}" style="margin-left: -5px;">最后点击</span>
</div>
</div>
</div>
<div class="five wide column" style="margin-top: 10px;" ng-show="currentPage==0"></div>
<div class="eleven wide column">
<pagination></pagination>
</div>
</div>
</div>
<div class="ui segment js-tags" ng-show="!loading || tags.length > 0">
<div class="ui container" ng-show="!editMode" style="cursor: default">
<div class="ui label" style="margin: 3px 15px 8px 0px; cursor: default" ng-if="tag.bookmarkCount && tag.show" ng-repeat="tag in tags" ng-class="{green:tag.bookmarkClicked}" ng-click="getBookmarks(tag.id, (tag.id == -1 ? 0 : 1), null)">{{ tag.name }} ({{ tag.bookmarkCount || 0 }})</div>
<div class="ui label globalTag" style="margin: 3px 15px 8px 0px; cursor: default; display: none" ng-click="globalTag()">全局书签</div>
<div class="ui label js-tag-label" style="margin: 3px 15px 8px 0px; cursor: default">
<i class="plus icon" data-content="点击添加分类" data-position="top center" ng-click="showAddTag()"></i>
<i class="pencil alternate icon" data-content="点击进入分类编辑模式" data-position="top center" ng-click="toggleMode(true)"></i>
<i class="table icon" style="margin-right: 0px" data-content="点击以条目显示" data-position="top center" ng-show="showMode=='table'" ng-click="toggleShowMode('item')"></i>
<i class="list icon" style="margin-right: 0px" data-content="点击以表格显示" data-position="top center" ng-show="showMode=='item'" ng-click="toggleShowMode('table')"></i>
</div>
</div>
<div class="ui container" ng-show="editMode" ng-mousedown="storeTagIndex()" ng-mouseup="updateTagIndex()">
<p>提示：拖拽分类即可进行排序。如果添加新的分类，返回之后不会显示添加的分类，因为默认只显示有书签的分类。</p>
<div class="ui six stackable cards" sv-root sv-part="tags">
<div class="card" style="background-color: #f5f5f5" ng-click="showAddTag()" data-tooltip="添加书签">
<div class="image">
<img src="./images/add-tag.png" />
</div>
</div>
<div class="card" style="background-color: #f5f5f5" ng-click="toggleMode(false)" data-tooltip="退出编辑模式">
<div class="image">
<img src="./images/back-tag.png" />
</div>
</div>
<div class="card" ng-repeat="tag in tags" id="tag{{tag.id}}" ng-if="tag.id > -1" sv-element>
<div class="content">
<div class="header" ng-if="!tag.edit">{{ tag.name }}</div>
<div class="ui large fluid transparent input" style="height: 19px" ng-if="tag.edit">
<input type="text" ng-model="tag.name" style="font-size: 18px" id="tagedit{{tag.id}}" />
<i class="checkmark icon" style="cursor: pointer" ng-click="updateTag(tag)" title="更新分类"></i>
<i class="mail forward icon" style="cursor: pointer" ng-click="backTag(tag)" title="放弃更新"></i>
</div>
</div>
<div class="content" style="cursor: move" sv-handle>
<div class="description">
<p>书签：{{ tag.bookmarkCount || 0 }}个</p>
<p>{{ tag.lastUse }}</p>
</div>
</div>
<div class="extra content">
<img class="ui mini spaced image right floated" style="width: 16px; height: 16px; margin: 0 5px" ng-src="./images/delete.png" ng-click="delTag(tag)" title="删除分类" />
<label for="tagedit{{tag.id}}" ng-show="!tag.edit">
<img class="ui mini spaced image right floated" style="width: 16px; height: 16px; margin: 0 5px" ng-src="./images/edit-bookmark.png" ng-click="editTag(tag)" title="编辑分类" />
</label>
<i class="eye black icon right floated" style="cursor: pointer" ng-if="tag.show" ng-click="updateTagShow(tag, 0)" title="点击隐藏分类"></i>
<i class="eye black slash icon right floated" style="cursor: pointer" ng-if="!tag.show" ng-click="updateTagShow(tag, 1)" title="点击显示分类"></i>
</div>
</div>
</div>
</div>
</div>
<div class="ui huge text centered inline loader" style="margin-top: 10px" ng-class="{active:loading, disabled: !loading}">正在加载中...</div>
<table class="ui selectable sortable celled table js-tags-table" ng-if="showMode=='table'" style="margin-top: -15px" ng-show="!loading && !editMode">
<thead>
<tr>
<th class="forbid_sorted">标题</th>
<th class="forbid_sorted">链接</th>
<th style="width: 90px" ng-class="{descending: showType == 'clickCount', sorted:showType == 'clickCount'}" ng-click="getBookmarks(null, 1, 'clickCount')" title="点击可对表格进行排序">点击次数</th>
<th style="width: 100px" ng-class="{descending: showType == 'createdAt', sorted:showType == 'createdAt'}" ng-click="getBookmarks(null, 1, 'createdAt')" title="点击可对表格进行排序">添加日期</th>
<th style="width: 100px" ng-class="{descending: showType == 'lastClick', sorted:showType == 'lastClick'}" ng-click="getBookmarks(null, 1, 'lastClick')" title="点击可对表格进行排序">最后点击</th>
<th style="width: 150px" class="forbid_sorted">分类</th>
<th style="width: 88px" class="forbid_sorted">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="bookmark in bookmarks" id="{{ bookmark.id }}" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)">
<td>
<img class="ui ui middle aligned tiny image" ng-src="https://favicon.lucq.fun/?url={{bookmark.url}}" err-src="./images/default.ico" style="width: 16px; height: 16px; cursor: pointer" ng-click="jumpToUrl(bookmark.url, bookmark.id)" />
<span ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{bookmark.title}}" style="cursor: pointer"> {{ bookmark.title }} </span>
</td>
<td>
<span title="{{bookmark.url}} 点击复制链接" ng-click="copy(bookmark.url)" style="cursor: default">{{ bookmark.url }}</span>
</td>
<td>{{ bookmark.clickCount }}</td>
<td>
<span title="{{bookmark.createdAt}}" class="need_to_be_rendered" data-timeago="{{bookmark.createdAt}}"></span>
</td>
<td>
<span id="time{{bookmark.id}}" title="{{bookmark.lastClick}}" class="need_to_be_rendered" data-timeago="{{bookmark.lastClick}}"></span>
</td>
<td>
<div class="ui label">{{ bookmark.tagName }}</div>
</td>
<td>
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 1px" ng-src="./images/delete.png" ng-click="delBookmark(bookmark)" title="删除书签" />
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 1px" ng-src="./images/edit-bookmark.png" ng-click="editBookmark(bookmark.id)" title="编辑书签" />
<img class="ui mini spaced image" style="width: 16px; height: 16px; margin: 0 1px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)" title="书签详情" />
</td>
</tr>
</tbody>
<tfoot ng-show="!costomTag.bookmarkClicked && !costomAllUsersTag.bookmarkClicked">
<tr>
<th colspan="7">
<pagination></pagination>
</th>
</tr>
</tfoot>
</table>
<div class="ui segment js-tag-costomTag" ng-if="showMode=='item'" style="margin-top: -15px" ng-show="!loading && !editMode">
<div class="ui five column grid">
<div ng-repeat="bookmark in bookmarks" class="column js-costomTag-item" ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmark:(!bookmarkNormalHover)}" ng-mouseover="bookmarkNormalHover=true; setHoverBookmark(bookmark)" ng-mouseleave="bookmarkNormalHover=false; setHoverBookmark(null)" ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="{{ bookmark.title }}" id="{{bookmark.id}}">
<img class="ui ui middle aligned tiny image bookmarkInfo" ng-src="https://favicon.lucq.fun/?url={{bookmark.url}}" err-src="./images/default.ico" style="width: 16px; height: 16px" ng-click="detailBookmark(bookmark);$event.stopPropagation()" />
<span ng-if="$index==0 || $index==20 || $index==40" style="font-weight: bold">{{bookmark.title}}</span>
<span ng-if="$index!=0 && $index!=20 && $index!=40">{{bookmark.title}}</span>
</div>
</div>
<div class="ui divider"></div>
<div class="ui grid">
<div class="five wide column" style="margin-top: 10px" ng-show="currentPage>0">
<div class="ui three column grid" style="cursor: default">
<div class="column" ng-click="getBookmarks(null, 1, 'createdAt')">
<i class="add to calendar large icon" ng-class="{green: showType == 'createdAt'}" style="margin-bottom: 4px"></i>
<span ng-class="{fontgreen: showType == 'createdAt'}" style="margin-left: -5px">添加日期</span>
</div>
<div class="column" ng-click="getBookmarks(null, 1, 'clickCount')">
<i class="sort numeric descending large icon" ng-class="{green: showType == 'clickCount'}" style="margin-bottom: 4px"></i>
<span ng-class="{fontgreen: showType == 'clickCount'}" style="margin-left: -5px">点击次数</span>
</div>
<div class="column" ng-click="getBookmarks(null, 1, 'lastClick')">
<i class="sort alphabet descending large icon" ng-class="{green: showType == 'lastClick'}" style="margin-bottom: 4px"></i>
<span ng-class="{fontgreen: showType == 'lastClick'}" style="margin-left: -5px">最后点击</span>
</div>
</div>
</div>
<div class="five wide column" style="margin-top: 10px" ng-show="currentPage==0"></div>
<div class="eleven wide column">
<pagination></pagination>
</div>
</div>
</div>