my-bookmark/public/views/bookmarks.html

<div class="ui hidden info message js-msg" ng-if="showStyle === 'navigate' && bookmarks.length <= 2">
    <i class="close icon" ng-click="closeMsg()"></i>
    <div class="content">
        <div class="header">系统检测到您好像还没添加过书签哦！
        </div>
        <ul class="list">
            <li>您可以将您的IE浏览器或者谷歌浏览器上面的书签导入系统！<a style="cursor:pointer;" ng-click="addBookmarkbyFile()">现在就去</a>
            </li>
            <li>您也可以点击菜单栏上面的<i class="add square icon"></i>图标进行添加。也可以使用快捷键：Insert键打开添加页面，再次按Insert键保存书签，Esc取消添加。</li>
        </ul>
    </div>
</div>
<div class="ui segment js-segment-navigate" ng-if="showStyle === 'navigate'">
    <div class="ui container" ng-repeat="tag in bookmarks" ng-init="tagIndex=$index">
        <div class="ui grid">
            <div class="row">
                <div class="wrap" style="width:88px;color:#0aa770;text-align:left;margin-left:20px;">
                    <span title="{{ tag.name }}" ng-click="jumpToTags(tag.id)" style="cursor:pointer;">{{ tag.name }}</span>
                </div>
                <div class="fourteen wide column" ng-if="tag.bookmarks.length">
                    <div class="ui grid container">
                        <div
                            class="four wide column js-navigate-bookmark"
                            ng-class="{bookmarkNormalHover:bookmarkNormalHover, bookmarkEditHover:bookmarkEditHover, bookmark:(!bookmarkNormalHover && !bookmarkEditHover)}"
                            ng-mouseover="edit ? (bookmarkEditHover=true) : (bookmarkNormalHover=true)"
                            ng-mouseleave="edit ? (bookmarkEditHover=false) : (bookmarkNormalHover=false)"
                            ng-repeat="bookmark in tag.bookmarks"
                            ng-click="jumpToUrl(bookmark.url, bookmark.id)"
                            title="{{ bookmark.title }}"
                            id="{{bookmark.id}}">
                            <img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px" ng-src="./images/{{ bookmarkEditHover ? 'delete-hover' : 'delete'}}.png" ng-if="edit" ng-click="delBookmark(bookmark)">
                            <img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px;float:right;" ng-src="./images/{{ bookmarkEditHover ? 'edit-bookmark-hover' : 'edit-bookmark'}}.png" ng-if="edit" ng-click="editBookmark(bookmark.id)">
                            <img
                                class="ui ui middle aligned tiny image bookmarkInfo"
                                ng-src="http://g.soz.im/{{bookmark.url}}/cdn.ico"
                                style="width:16px;height:16px;"
                                ng-click="detailBookmark(bookmark);$event.stopPropagation()"
                                ng-if="!edit"
                                favicon-err="./images/favicon/{{bookmark.id}}.ico">
                            <span>{{ bookmark.title}}</span>
                        </div>
                    </div>
                </div>
                <div ng-if="tagIndex === 0" style="width:22px;height:22px;" class="js-bookmark-edit" ng-click="toggleMode()" title="{{edit ? '退出编辑模式' : '点我进入编辑模式'}}"><img class="ui ui middle aligned tiny image" ng-src="./images/{{ edit ? 'back' : 'edit'}}.png"></div>
            </div>
        </div>
        <div class="ui divider"></div>
    </div>
</div>
<table class="ui selectable sortable celled table js-table-bookmarks" ng-if="showStyle === 'table'">
    <thead>
        <tr>
            <th style="cursor:default;">标题</th>
            <th style="cursor:default;">链接</th>
            <th style="width:90px;" class="sorted" ng-class="{descending: order[0]}" ng-click="changeOrder(0)">点击次数</th>
            <th style="width:100px;" class="sorted" ng-class="{descending: order[1]}" ng-click="changeOrder(1)">创建日期</th>
            <th style="width:100px;" class="sorted" ng-class="{descending: order[2]}" ng-click="changeOrder(2)">最后点击</th>
            <th style="width:150px;cursor:default;">分类</th>
            <th style="width:88px;cursor:default;">操作</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="bookmark in bookmarks" id="{{ bookmark.id }}">
            <td>
                <img class="ui ui middle aligned tiny image" ng-src="http://g.soz.im/{{bookmark.url}}/cdn.ico" style="width:16px;height:16px;cursor:pointer;" ng-click="jumpToUrl(bookmark.url, bookmark.id)" favicon-err="./images/favicon/{{bookmark.id}}.ico">
                <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.id, bookmark.url)" id="url{{bookmark.id}}" style="cursor:default;">{{ bookmark.url }}</span>
            </td>
            <td>{{ bookmark.click_count }}</td>
            <td>
                <span title="{{bookmark.created_at}}">{{ bookmark.created_at.substr(0, 10) }}
                </span>
            </td>
            <td>
                <span title="{{bookmark.last_click}}">{{ bookmark.last_click.substr(0, 10) }}
                </span>
            </td>
            <td>
                <div class="ui label" ng-repeat="tag in bookmark.tags" tag-id="{{ tag.id }}" ng-click="jumpToTags(tag.id)">
                    {{ tag.name }}
                </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>
        <tr>
            <th colspan="7">
                <pagination></pagination>
            </th>
        </tr>
    </tfoot>
</table>
<div class="ui segment js-segment-card" ng-if="showStyle === 'card'">
    <div class="ui five stackable cards" infinite-scroll='loadCardData()' infinite-scroll-immediate-check="false">
        <div class="card" ng-repeat="bookmark in bookmarks" id="{{bookmark.id}}">
            <div class="content" ng-click="jumpToUrl(bookmark.url, bookmark.id)" style="max-height:70px;cursor:pointer">
                <div class="description bookmarkTitle">
                    {{bookmark.title}}
                </div>
            </div>
            <div class="image" href="{{ bookmark.url }}" ng-click="jumpToUrl(bookmark.url, bookmark.id)" style="cursor:pointer">
                <img ng-src="./images/snap/{{bookmark.id}}.png" err-src="./images/snap/default.png"/>
            </div>
            <div class="extra content tags" style="height:50px;">
                <div class="ui label" ng-repeat="tag in bookmark.tags" tag-id="{{ tag.id }}" ng-click="jumpToTags(tag.id)">
                    {{ tag.name }}
                </div>
            </div>
            <div class="extra content" ng-show="!bookmark.edit" style="height:50px;padding-right:2px;padding-left:8px;">
                <span class="left floated like" style="margin-top:6px;">
                    <img class="ui ui middle aligned tiny image" ng-src="http://g.soz.im/{{bookmark.url}}/cdn.ico" style="width:16px;height:16px;cursor:pointer;" ng-click="jumpToUrl(bookmark.url, bookmark.id)" favicon-err="./images/favicon/{{bookmark.id}}.ico">
                    {{ bookmark.created_at }}
                </span>
                <i class="ellipsis horizontal icon right floated" style="margin-top:8px;" ng-mouseover="bookmark.edit=true;"></i>
            </div>
            <div class="extra content" ng-show="bookmark.edit" ng-mouseleave="bookmark.edit=false;" style="height:50px;">
                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:8px;" ng-src="./images/delete.png" ng-click="delBookmark(bookmark)" title="删除书签">
                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:8px;" 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 8px;margin-top:8px;" ng-src="./images/copy.png" id="url{{bookmark.id}}" ng-click="copy(bookmark.id, bookmark.url)" title="复制链接">
                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:8px;" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)" title="书签详情">
            </div>
        </div>
    </div>
    <div class="ui massive text centered inline loader" ng-class="{active:loadBusy, disabled:!loadBusy}">
        正在加载中...</div>
</div>