diff --git a/database/development.sqlite3-shm b/database/development.sqlite3-shm
index 1ea89d8..4d1a716 100644
Binary files a/database/development.sqlite3-shm and b/database/development.sqlite3-shm differ
diff --git a/database/development.sqlite3-wal b/database/development.sqlite3-wal
index 7ebc8c5..4d3725d 100644
Binary files a/database/development.sqlite3-wal and b/database/development.sqlite3-wal differ
diff --git a/public/css/page/index.css b/public/css/page/index.css
index 7498e1e..bdcd49b 100644
--- a/public/css/page/index.css
+++ b/public/css/page/index.css
@@ -45,9 +45,683 @@
text-align: center;
}
+/* 收藏网站样式 */
+.bookmarks-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 20px;
+ color: white;
+}
+
+/* 搜索区域 */
+.search-section {
+ margin-bottom: 30px;
+}
+
+.search-box {
+ display: flex;
+ gap: 15px;
+ align-items: center;
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(12px);
+ border-radius: 12px;
+ padding: 20px;
+}
+
+.search-input {
+ flex: 1;
+ background: rgba(255, 255, 255, 0.2);
+ border: none;
+ border-radius: 8px;
+ padding: 12px 16px;
+ color: white;
+ font-size: 16px;
+ outline: none;
+}
+
+.search-input::placeholder {
+ color: rgba(255, 255, 255, 0.7);
+}
+
+.search-btn, .add-btn {
+ background: rgba(59, 130, 246, 0.8);
+ border: none;
+ border-radius: 8px;
+ padding: 12px 20px;
+ color: white;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.search-btn:hover, .add-btn:hover {
+ background: rgba(59, 130, 246, 1);
+ transform: translateY(-2px);
+}
+
+.add-btn {
+ background: rgba(16, 185, 129, 0.8);
+}
+
+.add-btn:hover {
+ background: rgba(16, 185, 129, 1);
+}
+
+/* 导航区域 */
+.navigation-section {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 20px;
+ margin-bottom: 30px;
+}
+
+.categories-nav, .tags-cloud {
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(12px);
+ border-radius: 12px;
+ padding: 20px;
+}
+
+.nav-title {
+ font-size: 18px;
+ font-weight: 600;
+ margin-bottom: 15px;
+ color: rgba(255, 255, 255, 0.9);
+}
+
+.category-list, .tag-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+
+.category-item, .tag-item {
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 20px;
+ padding: 8px 16px;
+ font-size: 14px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ border: 2px solid transparent;
+}
+
+.category-item:hover, .tag-item:hover {
+ background: rgba(255, 255, 255, 0.3);
+ transform: translateY(-2px);
+}
+
+.category-item.active, .tag-item.active {
+ border-color: rgba(59, 130, 246, 0.8);
+ background: rgba(59, 130, 246, 0.3);
+}
+
+/* 收藏区域 */
+.bookmarks-section {
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(12px);
+ border-radius: 12px;
+ padding: 20px;
+ margin-bottom: 30px;
+}
+
+.section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+ padding-bottom: 15px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.section-header h2 {
+ margin: 0;
+ font-size: 24px;
+ font-weight: 600;
+}
+
+.view-controls {
+ display: flex;
+ gap: 10px;
+}
+
+.view-btn {
+ background: rgba(255, 255, 255, 0.2);
+ border: none;
+ border-radius: 6px;
+ padding: 8px 16px;
+ color: white;
+ font-size: 14px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.view-btn:hover {
+ background: rgba(255, 255, 255, 0.3);
+}
+
+.view-btn.active {
+ background: rgba(59, 130, 246, 0.8);
+}
+
+/* 网格视图 */
+.bookmarks-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 20px;
+}
+
+.bookmark-card {
+ background: rgba(255, 255, 255, 0.15);
+ border-radius: 12px;
+ padding: 20px;
+ transition: all 0.3s ease;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.bookmark-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+ border-color: rgba(255, 255, 255, 0.3);
+}
+
+.bookmark-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 15px;
+}
+
+.bookmark-favicon {
+ width: 32px;
+ height: 32px;
+ border-radius: 6px;
+ margin-right: 12px;
+ object-fit: cover;
+}
+
+.bookmark-title {
+ font-size: 18px;
+ font-weight: 600;
+ margin: 0;
+ color: white;
+ flex: 1;
+}
+
+.bookmark-favorite {
+ background: none;
+ border: none;
+ color: #fbbf24;
+ font-size: 20px;
+ cursor: pointer;
+ padding: 5px;
+ border-radius: 50%;
+ transition: all 0.3s ease;
+}
+
+.bookmark-favorite:hover {
+ background: rgba(251, 191, 36, 0.2);
+}
+
+.bookmark-favorite.active {
+ color: #f59e0b;
+}
+
+.bookmark-description {
+ color: rgba(255, 255, 255, 0.8);
+ margin-bottom: 15px;
+ line-height: 1.5;
+}
+
+.bookmark-meta {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 15px;
+}
+
+.bookmark-category {
+ background: rgba(59, 130, 246, 0.3);
+ color: rgba(59, 130, 246, 1);
+ padding: 4px 12px;
+ border-radius: 12px;
+ font-size: 12px;
+ font-weight: 500;
+}
+
+.bookmark-stats {
+ display: flex;
+ gap: 15px;
+ color: rgba(255, 255, 255, 0.6);
+ font-size: 12px;
+}
+
+.bookmark-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-bottom: 15px;
+}
+
+.bookmark-tag {
+ background: rgba(255, 255, 255, 0.2);
+ color: white;
+ padding: 4px 10px;
+ border-radius: 10px;
+ font-size: 11px;
+}
+
+.bookmark-actions {
+ display: flex;
+ gap: 10px;
+}
+
+.bookmark-btn {
+ flex: 1;
+ background: rgba(255, 255, 255, 0.2);
+ border: none;
+ border-radius: 6px;
+ padding: 8px 12px;
+ color: white;
+ font-size: 12px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.bookmark-btn:hover {
+ background: rgba(255, 255, 255, 0.3);
+}
+
+.bookmark-btn.primary {
+ background: rgba(59, 130, 246, 0.8);
+}
+
+.bookmark-btn.primary:hover {
+ background: rgba(59, 130, 246, 1);
+}
+
+/* 列表视图 */
+.bookmarks-list {
+ display: none;
+}
+
+.bookmark-list-item {
+ display: flex;
+ align-items: center;
+ padding: 15px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ transition: background 0.3s ease;
+}
+
+.bookmark-list-item:hover {
+ background: rgba(255, 255, 255, 0.05);
+}
+
+.bookmark-list-item:last-child {
+ border-bottom: none;
+}
+
+.bookmark-list-favicon {
+ width: 24px;
+ height: 24px;
+ border-radius: 4px;
+ margin-right: 15px;
+}
+
+.bookmark-list-content {
+ flex: 1;
+}
+
+.bookmark-list-title {
+ font-size: 16px;
+ font-weight: 600;
+ margin: 0 0 5px 0;
+ color: white;
+}
+
+.bookmark-list-description {
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 14px;
+ margin: 0;
+}
+
+.bookmark-list-meta {
+ display: flex;
+ gap: 15px;
+ margin-left: 20px;
+}
+
+/* 分页 */
+.pagination-section {
+ display: flex;
+ justify-content: center;
+ margin-top: 30px;
+}
+
+.pagination {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+}
+
+.pagination-btn {
+ background: rgba(255, 255, 255, 0.2);
+ border: none;
+ border-radius: 6px;
+ padding: 8px 12px;
+ color: white;
+ font-size: 14px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.pagination-btn:hover {
+ background: rgba(255, 255, 255, 0.3);
+}
+
+.pagination-btn.active {
+ background: rgba(59, 130, 246, 0.8);
+}
+
+.pagination-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* 模态框 */
+.modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1000;
+}
+
+.modal-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.8);
+ backdrop-filter: blur(5px);
+}
+
+.modal-content {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: rgba(30, 41, 59, 0.95);
+ backdrop-filter: blur(20px);
+ border-radius: 16px;
+ padding: 0;
+ width: 90%;
+ max-width: 600px;
+ max-height: 90vh;
+ overflow-y: auto;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px 25px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.modal-header h3 {
+ margin: 0;
+ color: white;
+ font-size: 20px;
+ font-weight: 600;
+}
+
+.modal-close {
+ background: none;
+ border: none;
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 24px;
+ cursor: pointer;
+ padding: 5px;
+ border-radius: 50%;
+ transition: all 0.3s ease;
+}
+
+.modal-close:hover {
+ color: white;
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.modal-body {
+ padding: 25px;
+}
+
+.form-group {
+ margin-bottom: 20px;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 8px;
+ color: white;
+ font-weight: 500;
+ font-size: 14px;
+}
+
+.form-group input,
+.form-group textarea,
+.form-group select {
+ width: 100%;
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 8px;
+ padding: 12px 16px;
+ color: white;
+ font-size: 14px;
+ outline: none;
+ transition: all 0.3s ease;
+}
+
+.form-group input:focus,
+.form-group textarea:focus,
+.form-group select:focus {
+ border-color: rgba(59, 130, 246, 0.8);
+ background: rgba(255, 255, 255, 0.15);
+}
+
+.form-group textarea {
+ resize: vertical;
+ min-height: 80px;
+}
+
+.form-group input::placeholder,
+.form-group textarea::placeholder {
+ color: rgba(255, 255, 255, 0.5);
+}
+
+.extra-links {
+ margin-bottom: 15px;
+}
+
+.extra-link-item {
+ display: flex;
+ gap: 10px;
+ margin-bottom: 10px;
+ align-items: center;
+}
+
+.extra-link-item .link-title {
+ flex: 1;
+}
+
+.extra-link-item .link-url {
+ flex: 2;
+}
+
+.remove-link {
+ background: rgba(239, 68, 68, 0.8);
+ border: none;
+ border-radius: 6px;
+ padding: 8px 12px;
+ color: white;
+ font-size: 12px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.remove-link:hover {
+ background: rgba(239, 68, 68, 1);
+}
+
+.add-link-btn {
+ background: rgba(16, 185, 129, 0.8);
+ border: none;
+ border-radius: 6px;
+ padding: 8px 16px;
+ color: white;
+ font-size: 14px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.add-link-btn:hover {
+ background: rgba(16, 185, 129, 1);
+}
+
+.form-actions {
+ display: flex;
+ gap: 15px;
+ margin-top: 30px;
+ padding-top: 20px;
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.submit-btn, .cancel-btn {
+ flex: 1;
+ padding: 12px 24px;
+ border: none;
+ border-radius: 8px;
+ font-size: 16px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.submit-btn {
+ background: rgba(59, 130, 246, 0.8);
+ color: white;
+}
+
+.submit-btn:hover {
+ background: rgba(59, 130, 246, 1);
+ transform: translateY(-2px);
+}
+
+.cancel-btn {
+ background: rgba(255, 255, 255, 0.2);
+ color: white;
+}
+
+.cancel-btn:hover {
+ background: rgba(255, 255, 255, 0.3);
+}
+
+/* 响应式设计 */
@media screen and (max-width: 768px) {
.home-hero {
margin: 0;
margin-top: 20px;
}
+
+ .bookmarks-container {
+ padding: 15px;
+ }
+
+ .search-box {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .navigation-section {
+ grid-template-columns: 1fr;
+ gap: 15px;
+ }
+
+ .section-header {
+ flex-direction: column;
+ gap: 15px;
+ align-items: stretch;
+ }
+
+ .bookmarks-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .modal-content {
+ width: 95%;
+ margin: 20px;
+ }
+
+ .form-actions {
+ flex-direction: column;
+ }
+}
+
+/* 加载状态 */
+.loading {
+ text-align: center;
+ padding: 40px;
+ color: rgba(255, 255, 255, 0.7);
+}
+
+.loading::after {
+ content: '';
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ border: 2px solid rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+ border-top-color: white;
+ animation: spin 1s ease-in-out infinite;
+ margin-left: 10px;
+}
+
+@keyframes spin {
+ to { transform: rotate(360deg); }
+}
+
+/* 空状态 */
+.empty-state {
+ text-align: center;
+ padding: 60px 20px;
+ color: rgba(255, 255, 255, 0.7);
+}
+
+.empty-state h3 {
+ margin: 0 0 15px 0;
+ font-size: 20px;
+ color: white;
+}
+
+.empty-state p {
+ margin: 0 0 25px 0;
+ font-size: 16px;
+}
+
+.empty-state .empty-btn {
+ background: rgba(59, 130, 246, 0.8);
+ border: none;
+ border-radius: 8px;
+ padding: 12px 24px;
+ color: white;
+ font-size: 16px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.empty-state .empty-btn:hover {
+ background: rgba(59, 130, 246, 1);
+ transform: translateY(-2px);
}
diff --git a/public/js/bookmarks.js b/public/js/bookmarks.js
new file mode 100644
index 0000000..1b634ca
--- /dev/null
+++ b/public/js/bookmarks.js
@@ -0,0 +1,804 @@
+// 收藏网站管理类
+class BookmarkManager {
+ constructor() {
+ this.currentView = 'grid';
+ this.currentPage = 1;
+ this.itemsPerPage = 12;
+ this.currentCategory = null;
+ this.currentTag = null;
+ this.searchQuery = '';
+ this.bookmarks = [];
+ this.categories = [];
+ this.tags = [];
+ this.editingBookmark = null;
+ this.totalBookmarks = 0;
+ this.pagination = null;
+
+ this.init();
+ }
+
+ async init() {
+ this.bindEvents();
+ await this.loadInitialData();
+ this.renderUI();
+ }
+
+ bindEvents() {
+ // 搜索功能
+ document.getElementById('searchBtn').addEventListener('click', () => this.handleSearch());
+ document.getElementById('searchInput').addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') this.handleSearch();
+ });
+
+ // 添加收藏
+ document.getElementById('addBookmarkBtn').addEventListener('click', () => this.showAddModal());
+
+ // 视图切换
+ document.getElementById('gridViewBtn').addEventListener('click', () => this.switchView('grid'));
+ document.getElementById('listViewBtn').addEventListener('click', () => this.switchView('list'));
+
+ // 模态框
+ document.getElementById('closeModal').addEventListener('click', () => this.closeModal());
+ document.getElementById('bookmarkForm').addEventListener('submit', (e) => this.handleFormSubmit(e));
+ document.getElementById('addLinkBtn').addEventListener('click', () => this.addExtraLink());
+
+ // 点击模态框外部关闭
+ document.querySelector('.modal-overlay').addEventListener('click', (e) => {
+ if (e.target.classList.contains('modal-overlay')) {
+ this.closeModal();
+ }
+ });
+ }
+
+ async loadInitialData() {
+ try {
+ // 调用后端API加载数据
+ await this.loadCategories();
+ await this.loadTags();
+ await this.loadBookmarks();
+ } catch (error) {
+ console.error('加载数据失败:', error);
+ this.showError('加载数据失败，请刷新页面重试');
+ }
+ }
+
+ async loadCategories() {
+ try {
+ const response = await fetch('/categories', {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ credentials: 'include'
+ });
+
+ if (!response.ok) {
+ throw new Error('获取分类失败');
+ }
+
+ const result = await response.json();
+ if (result.success) {
+ this.categories = result.data;
+ } else {
+ throw new Error(result.message || '获取分类失败');
+ }
+ } catch (error) {
+ console.error('加载分类失败:', error);
+ // 如果API调用失败，使用默认分类
+ this.categories = [
+ { id: 1, name: '技术开发', color: '#3B82F6', icon: 'code' },
+ { id: 2, name: '学习资源', color: '#10B981', icon: 'graduation-cap' },
+ { id: 3, name: '设计工具', color: '#F59E0B', icon: 'palette' },
+ { id: 4, name: '效率工具', color: '#8B5CF6', icon: 'zap' },
+ { id: 5, name: '娱乐休闲', color: '#EC4899', icon: 'heart' }
+ ];
+ }
+ }
+
+ async loadTags() {
+ try {
+ const response = await fetch('/tags/popular', {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ credentials: 'include'
+ });
+
+ if (!response.ok) {
+ throw new Error('获取标签失败');
+ }
+
+ const result = await response.json();
+ if (result.success) {
+ this.tags = result.data;
+ } else {
+ throw new Error(result.message || '获取标签失败');
+ }
+ } catch (error) {
+ console.error('加载标签失败:', error);
+ // 如果API调用失败，使用默认标签
+ this.tags = [
+ { id: 1, name: 'JavaScript', color: '#F7DF1E' },
+ { id: 2, name: 'React', color: '#61DAFB' },
+ { id: 3, name: 'Node.js', color: '#339933' },
+ { id: 4, name: 'CSS', color: '#1572B6' },
+ { id: 5, name: '设计灵感', color: '#FF6B6B' },
+ { id: 6, name: '免费资源', color: '#4ECDC4' },
+ { id: 7, name: 'API', color: '#45B7D1' },
+ { id: 8, name: '数据库', color: '#FFA500' }
+ ];
+ }
+ }
+
+ async loadBookmarks() {
+ try {
+ const params = new URLSearchParams({
+ page: this.currentPage,
+ limit: this.itemsPerPage
+ });
+
+ if (this.currentCategory) {
+ params.append('category_id', this.currentCategory);
+ }
+ if (this.currentTag) {
+ params.append('tag_id', this.currentTag);
+ }
+ if (this.searchQuery) {
+ params.append('search', this.searchQuery);
+ }
+
+ const response = await fetch(`/bookmarks?${params}`, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ credentials: 'include'
+ });
+
+ if (!response.ok) {
+ throw new Error('获取收藏失败');
+ }
+
+ const result = await response.json();
+ if (result.success) {
+ this.bookmarks = result.data;
+ this.totalBookmarks = result.total;
+ this.pagination = result.pagination;
+ } else {
+ throw new Error(result.message || '获取收藏失败');
+ }
+ } catch (error) {
+ console.error('加载收藏失败:', error);
+ // 如果API调用失败，使用默认数据
+ this.bookmarks = [
+ {
+ id: 1,
+ title: 'MDN Web Docs',
+ description: 'Mozilla开发者网络，提供Web技术文档和教程',
+ url: 'https://developer.mozilla.org/',
+ favicon: 'https://developer.mozilla.org/favicon-48x48.cbbd161b.png',
+ category_id: 1,
+ category_name: '技术开发',
+ category_color: '#3B82F6',
+ is_favorite: true,
+ click_count: 15,
+ tags: ['JavaScript', 'Node.js', 'CSS'],
+ links: [
+ { title: 'JavaScript 教程', url: 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript', type: 'tutorial' },
+ { title: 'CSS 参考', url: 'https://developer.mozilla.org/zh-CN/docs/Web/CSS', type: 'reference' }
+ ],
+ created_at: '2024-01-15T10:30:00Z'
+ }
+ ];
+ }
+ }
+
+ renderUI() {
+ this.renderCategories();
+ this.renderTags();
+ this.renderBookmarks();
+ this.renderPagination();
+ }
+
+ renderCategories() {
+ const categoryList = document.getElementById('categoryList');
+ const allCategories = [{ id: null, name: '全部', color: '#6B7280', icon: 'grid' }, ...this.categories];
+
+ categoryList.innerHTML = allCategories.map(category => `
+
+ ${category.name}
+
+ `).join('');
+
+ // 绑定分类点击事件
+ categoryList.querySelectorAll('.category-item').forEach(item => {
+ item.addEventListener('click', () => {
+ const categoryId = item.dataset.id ? parseInt(item.dataset.id) : null;
+ this.filterByCategory(categoryId);
+ });
+ });
+ }
+
+ renderTags() {
+ const tagList = document.getElementById('tagList');
+ const allTags = [{ id: null, name: '全部', color: '#6B7280' }, ...this.tags];
+
+ tagList.innerHTML = allTags.map(tag => `
+
+ ${tag.name}
+
+ `).join('');
+
+ // 绑定标签点击事件
+ tagList.querySelectorAll('.tag-item').forEach(item => {
+ item.addEventListener('click', () => {
+ const tagId = item.dataset.id ? parseInt(item.dataset.id) : null;
+ this.filterByTag(tagId);
+ });
+ });
+ }
+
+ renderBookmarks() {
+ if (this.bookmarks.length === 0) {
+ this.showEmptyState();
+ return;
+ }
+
+ if (this.currentView === 'grid') {
+ this.renderGridView(this.bookmarks);
+ } else {
+ this.renderListView(this.bookmarks);
+ }
+ }
+
+ renderGridView(bookmarks) {
+ const gridContainer = document.getElementById('bookmarksGrid');
+ const listContainer = document.getElementById('bookmarksList');
+
+ gridContainer.style.display = 'grid';
+ listContainer.style.display = 'none';
+
+ gridContainer.innerHTML = bookmarks.map(bookmark => this.createBookmarkCard(bookmark)).join('');
+ this.bindBookmarkEvents();
+ }
+
+ renderListView(bookmarks) {
+ const gridContainer = document.getElementById('bookmarksGrid');
+ const listContainer = document.getElementById('bookmarksList');
+
+ gridContainer.style.display = 'none';
+ listContainer.style.display = 'block';
+
+ listContainer.innerHTML = bookmarks.map(bookmark => this.createBookmarkListItem(bookmark)).join('');
+ this.bindBookmarkEvents();
+ }
+
+ createBookmarkCard(bookmark) {
+ const tagsHtml = bookmark.tags.map(tag =>
+ `${tag}`
+ ).join('');
+
+ const linksHtml = bookmark.links.length > 0 ?
+ `
+ 额外链接: ${bookmark.links.length}个
+
` : '';
+
+ return `
+
+
+
+
${bookmark.description}
+
+
+
+ ${tagsHtml ? `
${tagsHtml}
` : ''}
+ ${linksHtml}
+
+
+
+
+
+
+
+
+
+
+
${bookmark.title}
+
${bookmark.description}
+ ${tagsHtml ? `
${tagsHtml}
` : ''}
+
+
+
+
+ ${bookmark.category_name}
+
+ 👁 ${bookmark.click_count}
+
+
+
+
+
暂无收藏
+
开始添加你的第一个收藏吧！
+
+