diff --git a/asky.config.ts b/asky.config.ts index 0890ecd..9f0153f 100644 --- a/asky.config.ts +++ b/asky.config.ts @@ -307,8 +307,14 @@ const config: AskyConfig = { avatarUrl: 'https://cravatar.cn/avatar/', // 头像服务前缀(Gravatar 镜像) - showUa: true + showUa: true, // 是否显示评论者的 UA 图标(OS / 浏览器) + + showEmotion: true, + // 是否启用 Twikoo 表情面板 + + emotionCdn: '' + // Twikoo 表情 CDN,多个用英文逗号分隔(留空时读取 Twikoo 后台 EMOTION_CDN,仍为空则使用默认 OwO) }, /* ===== 杂七杂八 ===== */ @@ -465,6 +471,8 @@ export interface AskyConfig { region?: string; avatarUrl?: string; showUa?: boolean; + showEmotion?: boolean; + emotionCdn?: string; }; /* ===== 杂七杂八 ===== */ diff --git a/public/style.css b/public/style.css index e4c9f1d..0352fbc 100644 --- a/public/style.css +++ b/public/style.css @@ -3031,7 +3031,7 @@ a.page-numbers:hover{ margin-bottom: 10px; } .comments .commentwrap { -width: 69.076%; +width: 100%; max-width: 860px; margin: 0 auto; padding: 0; @@ -3220,14 +3220,172 @@ img.wp-smiley { } .smilies-box { + clear: both; padding-bottom:5px; + position: relative; } +.twikoo-emotions { + overflow: hidden; + margin: 8px 0 10px; + border: 1px solid #DDE6EA; + border-radius: 8px; + background: #fff; + box-shadow: 0 8px 24px rgba(0,0,0,.08); +} + +.twikoo-emotion-tabs { + display: flex; + overflow-x: auto; + border-bottom: 1px solid #EEF2F5; +} + +.twikoo-emotion-tab { + display: flex; + align-items: center; + min-height: 40px; + padding: 0 12px; + border: 0; + border-radius: 0; + background: transparent; + box-shadow: none; + color: #6f7680; + cursor: pointer; + font-size: 12px; + line-height: 1; + white-space: nowrap; + appearance: none; + -webkit-appearance: none; + transition-property: background-color, color; + transition-duration: .15s; + transition-timing-function: ease-out; +} + +.twikoo-emotion-tab.is-active, +.twikoo-emotion-tab:hover { + background: #F5F8FA; + box-shadow: none; + color: #e2684a; +} + +.twikoo-emotion-tab:focus, +.twikoo-emotion-item:focus, +.smli-button:focus { + box-shadow: none; + outline: 1px solid #DDE6EA; + outline-offset: -1px; +} + +.twikoo-emotion-tab:active { + box-shadow: none; +} + +.twikoo-emotion-panel { + display: none; + max-height: 210px; + overflow-y: auto; + padding: 8px; +} + +.twikoo-emotion-panel.is-active { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); + gap: 4px; +} + +.twikoo-emotion-panel-emoticon.is-active { + display: flex; + flex-wrap: wrap; + align-content: flex-start; + gap: 4px; +} + +.twikoo-emotion-panel-image.is-active { + grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); +} + +.twikoo-emotion-item { + display: flex; + align-items: center; + justify-content: center; + min-width: 40px; + min-height: 40px; + padding: 4px; + border: 0; + border-radius: 6px; + background: transparent; + box-shadow: none; + cursor: pointer; + font-size: 18px; + line-height: 1; + appearance: none; + -webkit-appearance: none; + transition-property: background-color, transform; + transition-duration: .15s; + transition-timing-function: ease-out; +} + +.twikoo-emotion-panel-emoticon .twikoo-emotion-item { + width: auto; + max-width: 100%; + min-height: 32px; + padding: 0 8px; + font-size: 13px; + line-height: 1.2; + font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,STHeiti,WenQuanYi Micro Hei,Helvetica,Arial,sans-serif; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.twikoo-emotion-panel-emoji .twikoo-emotion-item { + font-size: 20px; +} + +.twikoo-emotion-panel-image .twikoo-emotion-item { + min-width: 44px; + min-height: 44px; +} + +.twikoo-emotion-item:hover { + background: rgba(144,147,153,.13); + box-shadow: none; +} + +.twikoo-emotion-item:active { + box-shadow: none; + transform: scale(.96); +} + +.twikoo-emotion-status { + margin: 8px 0 10px; + padding: 12px; + border: 1px solid #DDE6EA; + border-radius: 8px; + color: #8a8f96; + font-size: 12px; + text-align: center; +} + +.comment .body .tk-owo-emotion { + width: 3em; + height: auto; + border-radius: 0; + vertical-align: middle; +} .smilies-box img { width:26px; } +.smilies-box .twikoo-emotion-item img { + width:28px; + max-height:28px; + height:auto; + border-radius:0; + object-fit:contain; + vertical-align:middle; +} .smilies-box img:hover { -webkit-animation: btn-pudding 1s linear; @@ -3242,13 +3400,35 @@ animation: btn-pudding 1s linear; } .smli-button{ - width:2rem; - height:2rem; + width:40px; + height:40px; float:right; position:relative; cursor:pointer; font-size:20px; font-family: EmojiMart, "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji"; + border: 0; + border-radius: 8px; + background: transparent; + box-shadow: none; + line-height: 40px; + padding: 0; + text-align: center; + appearance: none; + -webkit-appearance: none; + transition-property: background-color, transform; + transition-duration: .15s; + transition-timing-function: ease-out; +} + +.smli-button:hover { + background: rgba(144,147,153,.13); + box-shadow: none; +} + +.smli-button:active { + box-shadow: none; + transform: scale(.96); } diff --git a/src/components/Comments.astro b/src/components/Comments.astro index ab71c9e..3e54fbb 100644 --- a/src/components/Comments.astro +++ b/src/components/Comments.astro @@ -19,6 +19,8 @@ const envId = (config.twikoo?.envId || '').replace(/\/$/, ''); const avatarBase = config.twikoo?.avatarUrl || 'https://cravatar.cn/avatar/'; const showUa = config.twikoo?.showUa !== false; const showPrivate = isOptionOn('open_private_message'); +const localShowEmotion = config.twikoo?.showEmotion !== false; +const localEmotionCdn = config.twikoo?.emotionCdn || ''; --- {open && ( @@ -81,7 +83,7 @@ const showPrivate = isOptionOn('open_private_message'); 私密评论 )} - 😊 +