feat: 评论显示性别 #210

Author: keleus

src/_locales/cmn-CN.yml

@@ -413,6 +413,8 @@ settings:
   clean_url_argument_desc: 自动清理URL中的追踪参数，使链接更加简洁
   show_ip_location: 显示IP归属地
   show_ip_location_desc: 在视频/动态评论区显示IP归属地
+  show_sex: 显示用户性别
+  show_sex_desc: 在视频/动态评论区显示用户性别
   volume_balance:
     title: 音量均衡
     enable: 启用音量均衡

src/_locales/cmn-TW.yml

@@ -421,6 +421,8 @@ settings:
   clean_url_argument_desc: 自動清理URL中的追蹤參數，使連結更加簡潔
   show_ip_location: 顯示IP歸屬地
   show_ip_location_desc: 在視頻/動態評論區顯示IP歸屬地
+  show_sex: 顯示使用者性別
+  show_sex_desc: 在視頻/動態評論區顯示使用者性別
   video_player_scroll: 調整顯示模式後滾動
   video_player_scroll_desc: 啟用後，在默認模式為寬屏和默認時，會自動滾動到合適位置。
   volume_balance:

src/_locales/en.yml

@@ -478,6 +478,8 @@ settings:
   clean_url_argument_desc: Automatically clean tracking parameters from URLs to make links cleaner
   show_ip_location: Show IP home location
   show_ip_location_desc: Display IP home in the video/dynamic comment area
+  show_sex: Show user gender
+  show_sex_desc: Display user gender in the video/dynamic comment area
   video_player_scroll: Scroll after adjusting the display mode
   video_player_scroll_desc: >-
     When enabled, it will automatically scroll to the appropriate position when

src/_locales/jyut.yml

@@ -398,6 +398,8 @@ settings:
     widescreen: 闊螢幕
   show_ip_location: 顯示 IP 歸屬地
   show_ip_location_desc: 喺影片/動向頁留言區顯示 IP 歸屬地。
+  show_sex: 顯示用戶性別
+  show_sex_desc: 喺影片/動向頁留言區顯示用戶性別。
   video_player_scroll: 校好顯示模式後自動轆到合適嘅位置
   video_player_scroll_desc: 啓用後，若果顯示模式係闊螢幕或預設嗰陣，會自動轆到合適嘅位置。
   group_fonts: ''

src/components/Settings/General/General.vue

@@ -89,6 +89,10 @@ watch(() => settings.value.language, (newValue) => {
         <Radio v-model="settings.showIPLocation" />
       </SettingsItem>
 
+      <SettingsItem :title="$t('settings.show_sex')" :desc="$t('settings.show_sex_desc')">
+        <Radio v-model="settings.showSex" />
+      </SettingsItem>
+
       <SettingsItem :title="$t('settings.enable_grid_layout_switcher')">
         <Radio v-model="settings.enableGridLayoutSwitcher" />
       </SettingsItem>

src/inject/index.ts

@@ -55,7 +55,43 @@ injectFunction(
 
 // 获取IP地理位置字符串
 function getLocationString(replyItem: any) {
-  return replyItem?.reply_control?.location
+  const location = replyItem?.reply_control?.location
+  if (typeof location !== 'string')
+    return location
+
+  return location.replace(/^IP属地[：: ]*/u, '')
+}
+
+function getSexString(replyItem: any) {
+  return replyItem?.member?.sex
+}
+
+function updateInfoElement(
+  root: ShadowRoot | null | undefined,
+  id: string,
+  shouldShow: boolean,
+  text: any,
+  anchor: Element | null | undefined,
+): HTMLElement | null {
+  if (!root)
+    return null
+
+  let element = root.querySelector<HTMLElement>(`#${id}`)
+
+  if (!shouldShow || !anchor) {
+    if (element)
+      element.remove()
+    return null
+  }
+
+  if (!element) {
+    element = document.createElement('div')
+    element.id = id
+    anchor.insertAdjacentElement('afterend', element)
+  }
+
+  element.textContent = String(text)
+  return element
 }
 
 // 判断当前页面URL是否支持IP显示
@@ -107,29 +143,19 @@ if (window.customElements && isSupportedPage()) {
       const originalUpdate = classConstructor.prototype.update
       classConstructor.prototype.update = function (...updateArgs: any[]) {
         const result = originalUpdate.apply(this, updateArgs)
-        const pubDateEl = this.shadowRoot?.querySelector('#pubdate')
+        const root = this.shadowRoot
+        const pubDateEl = root?.querySelector('#pubdate')
         if (!pubDateEl)
           return result
 
-        let locationEl = this.shadowRoot?.querySelector('#location')
         const locationString = getLocationString(this.data)
+        const shouldShowLocation = Boolean(currentSettings?.showIPLocation && locationString)
+        const locationEl = updateInfoElement(root, 'location', shouldShowLocation, locationString, pubDateEl)
 
-        // 根据设置决定是否显示IP
-        if (!currentSettings?.showIPLocation || !locationString) {
-          if (locationEl)
-            locationEl.remove()
-          return result
-        }
-
-        if (locationEl) {
-          locationEl.textContent = locationString
-          return result
-        }
-
-        locationEl = document.createElement('div')
-        locationEl.id = 'location'
-        locationEl.textContent = locationString
-        pubDateEl.insertAdjacentElement('afterend', locationEl)
+        const sexString = getSexString(this.data)
+        const shouldShowSex = Boolean(currentSettings?.showSex && sexString)
+        const sexAnchor = locationEl ?? pubDateEl
+        updateInfoElement(root, 'sex', shouldShowSex, sexString, sexAnchor)
         return result
       }
       return Reflect.apply(target, thisArg, args)

src/logic/storage.ts

@@ -71,6 +71,7 @@ export interface Settings {
   enableGridLayoutSwitcher: boolean
   enableHorizontalScrolling: boolean
   showIPLocation: boolean // 添加显示IP归属地设置项
+  showSex: boolean // 添加显示性别设置项
 
   language: string
   customizeFont: 'default' | 'recommend' | 'custom'
@@ -223,6 +224,7 @@ export const originalSettings: Settings = {
   enableGridLayoutSwitcher: true,
   enableHorizontalScrolling: false,
   showIPLocation: true, // 默认启用IP归属地显示
+  showSex: true, // 默认启用性别显示
   language: '',
   customizeFont: 'default',
   fontFamily: '',