diff --git a/about.html b/about.html
index eb98642..4d5a49e 100644
--- a/about.html
+++ b/about.html
@@ -11,6 +11,7 @@
+
diff --git a/css/about.css b/css/about.css
index 19567cb..8d78db2 100644
--- a/css/about.css
+++ b/css/about.css
@@ -1329,52 +1329,6 @@ body {
box-shadow: var(--glass-shadow);
}
-/* Artalk 组件（按容器选择器统一覆盖，移除无效类选择器） */
-
-/* 确保评论区域适配白天/黑夜模式 */
-#artalk-container {
- border-radius: var(--radius);
-}
-
-#artalk-container .atk-main-editor {
- background: var(--glass-bg);
- border: var(--glass-border);
- box-shadow: var(--glass-shadow);
-}
-#artalk-container .atk-editor, #artalk-container .atk-editor textarea, #artalk-container .atk-editor input {
- background: var(--glass-bg);
- color: var(--text-primary);
-}
-
-#artalk-container .atk-comment-wrap {
- background: var(--glass-bg);
- border: var(--glass-border);
- box-shadow: var(--glass-shadow);
- opacity: 0.9;
- transition: opacity 0.2s;
-}
-#artalk-container .atk-dialog, #artalk-container .atk-layer .atk-dialog { background: var(--glass-bg); color: var(--text-primary); border: var(--glass-border); box-shadow: var(--glass-shadow); }
-[data-theme="night"] #artalk-container .atk-main-editor,
-[data-theme="night"] #artalk-container .atk-editor,
-[data-theme="night"] #artalk-container .atk-comment-wrap,
-[data-theme="night"] #artalk-container .atk-dialog,
-[data-theme="night"] #artalk-container .atk-layer .atk-dialog {
- background: rgba(30,30,35,0.55);
- color: var(--text-primary);
- border: 1px solid rgba(255,255,255,0.08);
- box-shadow: var(--glass-shadow);
-}
-
-#artalk-container.atk-mobile .atk-main-editor { padding: 12px; font-size: 0.95rem; }
-#artalk-container.atk-mobile .atk-comment-wrap { padding: 12px 14px; font-size: 0.95rem; }
-#artalk-container.atk-mobile .atk-avatar { width: 28px; height: 28px; }
-#artalk-container.atk-mobile .atk-meta { font-size: 12px; }
-#artalk-container.atk-desktop .atk-main-editor { padding: 18px 22px; }
-#artalk-container.atk-desktop .atk-comment-wrap { padding: 18px 22px; line-height: 1.7; }
-#artalk-container .atk-content.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
-#artalk-container .atk-expand-btn { margin-top: 8px; padding: 6px 10px; border-radius: 14px; border: none; cursor: pointer; background: var(--accent); color: #fff; box-shadow: 0 4px 10px rgba(108,92,231,0.25); }
-[data-theme="night"] #artalk-container .atk-expand-btn { background: linear-gradient(135deg, #a1c4fd, #6c5ce7); box-shadow: 0 4px 12px rgba(108,92,231,0.35); }
-
.fab-menu.open {
display: flex;
}
diff --git a/css/artalk.css b/css/artalk.css
new file mode 100644
index 0000000..ed89f3a
--- /dev/null
+++ b/css/artalk.css
@@ -0,0 +1,383 @@
+/* Artalk Comments Styles */
+
+/* Base Artalk container styles */
+#artalk-container {
+ border-radius: 12px;
+}
+
+/* Light theme styles */
+.atk-main-editor {
+ background: rgba(255, 255, 255, 0.75) !important;
+ backdrop-filter: blur(28px) saturate(130%) !important;
+ -webkit-backdrop-filter: blur(28px) saturate(130%) !important;
+ border: 1px solid rgba(255, 255, 255, 0.9) !important;
+ box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
+ border-radius: 24px !important;
+ transition: all 0.3s ease !important;
+}
+
+.atk-main-editor:focus-within {
+ border-color: #6c5ce7 !important;
+ box-shadow: 0 12px 36px rgba(108, 92, 231, 0.25) !important;
+}
+
+.atk-header {
+ padding: 20px !important;
+ border-bottom: 1px solid rgba(128, 128, 128, 0.1) !important;
+}
+
+.atk-header-item {
+ color: #1f2937 !important;
+ font-weight: 500 !important;
+}
+
+.atk-header-item.atk-active {
+ color: #6c5ce7 !important;
+ border-bottom: 2px solid #6c5ce7 !important;
+}
+
+.atk-editor-plug-wrap {
+ padding: 0 20px 20px !important;
+}
+
+.atk-editor-textarea {
+ background: transparent !important;
+ color: #1f2937 !important;
+ border: none !important;
+ border-radius: 12px !important;
+ padding: 15px !important;
+ min-height: 120px !important;
+}
+
+.atk-editor-textarea:focus {
+ box-shadow: none !important;
+}
+
+.atk-editor-bottom {
+ padding: 0 20px 20px !important;
+}
+
+.atk-editor-bottom .atk-item {
+ color: #4b5563 !important;
+}
+
+.atk-send-btn {
+ background: #6c5ce7 !important;
+ border: none !important;
+ border-radius: 20px !important;
+ padding: 8px 20px !important;
+ font-weight: 500 !important;
+ transition: all 0.3s ease !important;
+}
+
+.atk-send-btn:hover {
+ background: #5d4de0 !important;
+ transform: translateY(-2px) !important;
+ box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3) !important;
+}
+
+.atk-send-btn:active {
+ transform: translateY(0) !important;
+}
+
+.atk-list-header {
+ padding: 20px !important;
+ border-bottom: 1px solid rgba(128, 128, 128, 0.1) !important;
+}
+
+.atk-list-header .atk-comment-count {
+ color: #1f2937 !important;
+ font-weight: 600 !important;
+}
+
+.atk-sort-select {
+ background: rgba(128, 128, 128, 0.05) !important;
+ border: 1px solid rgba(128, 128, 128, 0.1) !important;
+ border-radius: 20px !important;
+ padding: 6px 12px !important;
+ color: #4b5563 !important;
+}
+
+.atk-comment-wrap {
+ padding: 20px !important;
+ border-bottom: 1px solid rgba(128, 128, 128, 0.05) !important;
+}
+
+.atk-comment-wrap:hover {
+ background: rgba(128, 128, 128, 0.03) !important;
+ border-radius: 12px !important;
+ margin: 0 10px !important;
+}
+
+.atk-avatar {
+ border-radius: 50% !important;
+ border: 2px solid #6c5ce7 !important;
+}
+
+.atk-comment .atk-header {
+ padding: 0 !important;
+ border-bottom: none !important;
+ margin-bottom: 10px !important;
+}
+
+.atk-comment .atk-nick {
+ color: #1f2937 !important;
+ font-weight: 600 !important;
+}
+
+.atk-comment .atk-date {
+ color: #6b7280 !important;
+ font-size: 0.85rem !important;
+}
+
+.atk-comment .atk-content {
+ color: #1f2937 !important;
+ line-height: 1.6 !important;
+}
+
+.atk-comment .atk-content a {
+ color: #6c5ce7 !important;
+ text-decoration: underline !important;
+}
+
+.atk-comment .atk-content pre {
+ background: rgba(128, 128, 128, 0.05) !important;
+ border-radius: 12px !important;
+ padding: 15px !important;
+ border: 1px solid rgba(128, 128, 128, 0.1) !important;
+}
+
+.atk-actions .atk-action {
+ color: #4b5563 !important;
+ transition: all 0.2s ease !important;
+}
+
+.atk-actions .atk-action:hover {
+ color: #6c5ce7 !important;
+}
+
+/* Night theme styles */
+[data-theme="night"] .atk-main-editor {
+ background: rgba(30, 30, 35, 0.55) !important;
+ backdrop-filter: blur(28px) saturate(130%) !important;
+ -webkit-backdrop-filter: blur(28px) saturate(130%) !important;
+ border: 1px solid rgba(255, 255, 255, 0.08) !important;
+ box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65) !important;
+}
+
+[data-theme="night"] .atk-header-item {
+ color: #dfe6e9 !important;
+}
+
+[data-theme="night"] .atk-editor-textarea {
+ color: #dfe6e9 !important;
+}
+
+[data-theme="night"] .atk-editor-bottom .atk-item {
+ color: #b2bec3 !important;
+}
+
+[data-theme="night"] .atk-list-header .atk-comment-count {
+ color: #dfe6e9 !important;
+}
+
+[data-theme="night"] .atk-sort-select {
+ background: rgba(255, 255, 255, 0.05) !important;
+ border: 1px solid rgba(255, 255, 255, 0.1) !important;
+ color: #b2bec3 !important;
+}
+
+[data-theme="night"] .atk-comment-wrap:hover {
+ background: rgba(255, 255, 255, 0.03) !important;
+}
+
+[data-theme="night"] .atk-comment .atk-nick {
+ color: #dfe6e9 !important;
+}
+
+[data-theme="night"] .atk-comment .atk-date {
+ color: #636e72 !important;
+}
+
+[data-theme="night"] .atk-comment .atk-content {
+ color: #dfe6e9 !important;
+}
+
+[data-theme="night"] .atk-comment .atk-content a {
+ color: #00cec9 !important;
+}
+
+[data-theme="night"] .atk-comment .atk-content pre {
+ background: rgba(255, 255, 255, 0.05) !important;
+ border: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+[data-theme="night"] .atk-actions .atk-action {
+ color: #b2bec3 !important;
+}
+
+[data-theme="night"] .atk-actions .atk-action:hover {
+ color: #00cec9 !important;
+}
+
+/* Mobile specific styles */
+.atk-mobile .atk-main-editor {
+ border-radius: 16px !important;
+}
+
+.atk-mobile .atk-header {
+ padding: 15px !important;
+}
+
+.atk-mobile .atk-editor-textarea {
+ padding: 12px !important;
+ min-height: 100px !important;
+}
+
+.atk-mobile .atk-editor-bottom {
+ padding: 0 15px 15px !important;
+}
+
+.atk-mobile .atk-list-header {
+ padding: 15px !important;
+}
+
+.atk-mobile .atk-comment-wrap {
+ padding: 15px !important;
+}
+
+.atk-mobile .atk-comment .atk-content.clamped {
+ max-height: 100px !important;
+ overflow: hidden !important;
+ position: relative !important;
+}
+
+.atk-mobile .atk-comment .atk-content.clamped::after {
+ content: "" !important;
+ position: absolute !important;
+ bottom: 0 !important;
+ left: 0 !important;
+ right: 0 !important;
+ height: 40px !important;
+ background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.9)) !important;
+}
+
+[data-theme="night"] .atk-mobile .atk-comment .atk-content.clamped::after {
+ background: linear-gradient(to bottom, transparent, rgba(30, 30, 35, 0.9)) !important;
+}
+
+.atk-mobile .atk-expand-btn {
+ background: rgba(108, 92, 231, 0.1) !important;
+ border: none !important;
+ border-radius: 20px !important;
+ padding: 6px 15px !important;
+ color: #6c5ce7 !important;
+ font-size: 0.9rem !important;
+ cursor: pointer !important;
+ margin-top: 10px !important;
+ transition: all 0.3s ease !important;
+}
+
+.atk-mobile .atk-expand-btn:hover {
+ background: rgba(108, 92, 231, 0.2) !important;
+}
+
+[data-theme="night"] .atk-mobile .atk-expand-btn {
+ background: rgba(0, 206, 201, 0.1) !important;
+ color: #00cec9 !important;
+}
+
+[data-theme="night"] .atk-mobile .atk-expand-btn:hover {
+ background: rgba(0, 206, 201, 0.2) !important;
+}
+
+/* Pagination styles */
+.atk-pagination {
+ padding: 20px !important;
+ text-align: center !important;
+}
+
+.atk-pagination .atk-page-item {
+ display: inline-block !important;
+ margin: 0 5px !important;
+ padding: 8px 15px !important;
+ border-radius: 20px !important;
+ background: rgba(128, 128, 128, 0.05) !important;
+ color: #4b5563 !important;
+ transition: all 0.3s ease !important;
+}
+
+.atk-pagination .atk-page-item:hover {
+ background: #6c5ce7 !important;
+ color: white !important;
+}
+
+.atk-pagination .atk-page-item.atk-active {
+ background: #6c5ce7 !important;
+ color: white !important;
+}
+
+[data-theme="night"] .atk-pagination .atk-page-item {
+ background: rgba(255, 255, 255, 0.05) !important;
+ color: #b2bec3 !important;
+}
+
+[data-theme="night"] .atk-pagination .atk-page-item:hover {
+ background: #00cec9 !important;
+ color: white !important;
+}
+
+[data-theme="night"] .atk-pagination .atk-page-item.atk-active {
+ background: #00cec9 !important;
+ color: white !important;
+}
+
+/* Loading spinner */
+.atk-loading {
+ text-align: center !important;
+ padding: 40px !important;
+ color: #6c5ce7 !important;
+}
+
+.atk-error-layer {
+ padding: 40px !important;
+ text-align: center !important;
+ color: #ef4444 !important;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+ .atk-header {
+ padding: 15px !important;
+ }
+
+ .atk-editor-plug-wrap {
+ padding: 0 15px 15px !important;
+ }
+
+ .atk-editor-textarea {
+ padding: 12px !important;
+ }
+
+ .atk-editor-bottom {
+ padding: 0 15px 15px !important;
+ }
+
+ .atk-list-header {
+ padding: 15px !important;
+ }
+
+ .atk-comment-wrap {
+ padding: 15px !important;
+ }
+
+ .atk-pagination {
+ padding: 15px !important;
+ }
+
+ .atk-pagination .atk-page-item {
+ padding: 6px 12px !important;
+ margin: 0 3px !important;
+ font-size: 0.9rem !important;
+ }
+}
\ No newline at end of file
diff --git a/js/about.js b/js/about.js
index 432771e..2a81531 100644
--- a/js/about.js
+++ b/js/about.js
@@ -522,35 +522,138 @@ class UIManager {
enhanceArtalkUI() {
const container = document.getElementById('artalk-container');
if (!container) return;
+
+ // 检测是否为移动端
const isMobile = window.matchMedia('(max-width: 768px)').matches;
container.classList.toggle('atk-mobile', isMobile);
container.classList.toggle('atk-desktop', !isMobile);
+
+ // 获取当前语言
const lang = getStoredLanguage();
+
+ // 获取当前主题
+ const currentTheme = document.documentElement.getAttribute('data-theme');
+
+ // 设置主题
+ if (typeof Artalk !== 'undefined') {
+ try {
+ Artalk.setDarkMode(currentTheme === 'night');
+ } catch (e) {
+ console.warn('Failed to set Artalk dark mode:', e);
+ }
+ }
+
+ // 移动端增强功能
if (isMobile) {
- const apply = () => {
- container.querySelectorAll('.atk-comment-wrap .atk-content').forEach(el => {
- if (el.dataset.clamped) return;
- el.classList.add('clamped');
- const btn = document.createElement('button');
- btn.className = 'atk-expand-btn';
- const expandText = lang === 'zh' ? '展开' : 'Expand';
- const collapseText = lang === 'zh' ? '收起' : 'Collapse';
- btn.textContent = expandText;
- btn.addEventListener('click', () => {
- const clamped = el.classList.toggle('clamped');
- btn.textContent = clamped ? expandText : collapseText;
- });
- el.parentElement.appendChild(btn);
- el.dataset.clamped = '1';
- });
- };
- apply();
- const obs = new MutationObserver(apply);
- obs.observe(container, { childList: true, subtree: true });
+ this.enhanceMobileArtalk(container, lang);
+ }
+
+ // 监听主题变化
+ const themeObserver = new MutationObserver(() => {
+ const newTheme = document.documentElement.getAttribute('data-theme');
+ if (typeof Artalk !== 'undefined') {
+ try {
+ Artalk.setDarkMode(newTheme === 'night');
+ } catch (e) {
+ console.warn('Failed to update Artalk dark mode:', e);
+ }
+ }
+ });
+
+ themeObserver.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ['data-theme']
+ });
+
+ // 监听语言变化
+ const langBtn = document.getElementById('lang-btn');
+ if (langBtn) {
+ langBtn.addEventListener('click', () => {
+ // 延迟执行以确保语言已经切换
+ setTimeout(() => {
+ const newLang = getStoredLanguage();
+ this.updateArtalkLanguage(container, newLang, isMobile);
+ }, 100);
+ });
}
}
+ enhanceMobileArtalk(container, lang) {
+ const applyMobileStyles = () => {
+ container.querySelectorAll('.atk-comment-wrap .atk-content').forEach(el => {
+ // 检查是否已经处理过
+ if (el.dataset.mobileProcessed) return;
+
+ // 添加移动端内容截断
+ el.classList.add('clamped');
+
+ // 创建展开/收起按钮
+ const btn = document.createElement('button');
+ btn.className = 'atk-expand-btn';
+ const expandText = lang === 'zh' ? '展开' : 'Expand';
+ const collapseText = lang === 'zh' ? '收起' : 'Collapse';
+ btn.textContent = expandText;
+
+ btn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ const isClamped = el.classList.toggle('clamped');
+ btn.textContent = isClamped ? expandText : collapseText;
+ });
+
+ // 将按钮插入到适当位置
+ const actionsElement = el.closest('.atk-comment').querySelector('.atk-actions');
+ if (actionsElement) {
+ actionsElement.parentNode.insertBefore(btn, actionsElement);
+ } else {
+ el.parentNode.appendChild(btn);
+ }
+
+ // 标记为已处理
+ el.dataset.mobileProcessed = '1';
+ });
+ };
+
+ // 初始应用
+ applyMobileStyles();
+
+ // 创建观察器以处理动态添加的评论
+ const observer = new MutationObserver(applyMobileStyles);
+ observer.observe(container, {
+ childList: true,
+ subtree: true,
+ attributes: false
+ });
+ }
+ updateArtalkLanguage(container, lang, isMobile) {
+ // 更新展开/收起按钮文本
+ if (isMobile) {
+ const expandButtons = container.querySelectorAll('.atk-expand-btn');
+ const expandText = lang === 'zh' ? '展开' : 'Expand';
+ const collapseText = lang === 'zh' ? '收起' : 'Collapse';
+
+ expandButtons.forEach(btn => {
+ // 如果按钮当前显示的是展开文本，保持不变
+ // 如果显示的是收起文本，则更新为对应语言的收起文本
+ if (btn.textContent === '展开' || btn.textContent === 'Expand') {
+ btn.textContent = expandText;
+ } else if (btn.textContent === '收起' || btn.textContent === 'Collapse') {
+ btn.textContent = collapseText;
+ }
+ });
+ }
+
+ // 如果有 Artalk 实例，可以在这里更新其实例的语言设置
+ if (typeof Artalk !== 'undefined') {
+ try {
+ // 注意：Artalk 的语言设置通常在初始化时确定，
+ // 动态更改语言需要重新初始化或者使用其API（如果支持）
+ console.log('Would update Artalk language to:', lang);
+ } catch (e) {
+ console.warn('Failed to update Artalk language:', e);
+ }
+ }
+ }
initTechCloud() {
const container = document.getElementById('tech-container');
@@ -655,16 +758,14 @@ class UIManager {
tags.forEach(tag => {
let rx1 = tag.x, ry1 = tag.y * ca - tag.z * sa, rz1 = tag.y * sa + tag.z * ca;
- let rx2 = rx1 * cb + rz1 * sb, ry2 = ry1, rz2 = rx1 * -sb + rz1 * cb;
- tag.x = rx2;
+ let ry2 = ry1, rz2 = rx1 * -sb + rz1 * cb;
+ tag.x = rx1 * cb + rz1 * sb;
tag.y = ry2;
tag.z = rz2;
let scale = (tag.z + radius) / (2 * radius) + 0.45;
scale = Math.min(Math.max(scale, 0.7), 1.15);
- let opacity = (tag.z + radius) / (2 * radius) + 0.2;
-
- tag.el.style.opacity = 1;
+ tag.el.style.opacity = (tag.z + radius) / (2 * radius) + 0.2;
tag.el.style.zIndex = parseInt(scale * 100);
let left = tag.x + container.offsetWidth / 2 - tag.el.offsetWidth / 2;
let top = tag.y + container.offsetHeight / 2 - tag.el.offsetHeight / 2;
@@ -809,12 +910,4 @@ class UIManager {
};
tryPlay();
}
-
- _t(key) {
- try {
- return (new I18nManager()).dict[(localStorage.getItem('lang') || 'zh')][key];
- } catch (_) {
- return null;
- }
- }
}
\ No newline at end of file