feat: support NSFW topic

Author: KUN1007

.vscode/settings.json

@@ -69,6 +69,7 @@
     "Deatte",
     "Dedup",
     "defu",
+    "demi",
     "desu",
     "dfan",
     "discordbot",
@@ -100,6 +101,7 @@
     "Flowlove",
     "fontawesome",
     "formkit",
+    "frontmatter",
     "Frontwing",
     "Fureraba",
     "Futaba",
@@ -264,6 +266,7 @@
     "nitropack",
     "nmid",
     "noarchive",
+    "nolyfill",
     "non-moe",
     "nonmoe",
     "noopener",

components/edit/topic/MetadataEditor.vue

@@ -9,7 +9,7 @@ import {
 const MAX_SECTIONS = 3
 const MAX_TAGS = 7
 
-const { category, section, tags } = useTopicEditorStore()
+const { category, section, tags, isNSFW } = useTopicEditorStore()
 const tagInput = ref('')
 const isTagInputFocused = ref(false)
 
@@ -201,5 +201,24 @@ const handleTagInputBackspace = () => {
         话题至少选择一个标签，最多 {{ MAX_TAGS }} 个
       </p>
     </div>
+
+    <div class="space-y-4">
+      <h3 class="flex items-center gap-2 text-lg font-semibold">
+        <Icon name="lucide:shield-alert" class="h-5 w-5" />
+        NSFW 设置
+      </h3>
+      <KunCheckBox
+        v-model="isNSFW"
+        type="single"
+        label="该话题包含 NSFW 内容 (R18 等)"
+        color="primary"
+      />
+      <p class="text-default-500 mt-2 text-sm">
+        勾选后, 未开启网站 NSFW 模式的用户将无法看到该话题, 和 Galgame 的 NSFW
+        标准一样, 看起来不能在公司报告大会上放在 PPT 里展示的话题都是 NSFW,
+        总之就是越严越好，可以错杀不可以放过 (另外, 只允许萌萌的涩涩,
+        不允许纯粹的色情废料)
+      </p>
+    </div>
   </div>
 </template>

components/galgame/Tag.vue

@@ -64,6 +64,7 @@ const filteredTags = computed(() => {
           :key="key"
           @click="toggleCategory(key)"
           :model-value="selectedCategories.includes(key)"
+          color="primary"
         >
           {{ name }}
         </KunCheckBox>
@@ -74,6 +75,7 @@ const filteredTags = computed(() => {
           class-name="gap-2"
           @click="toggleSpoilerLevel(Number(key) as KunGalgameTagSpoiler)"
           :model-value="selectedSpoilerLevels.includes(Number(key) as 0)"
+          color="primary"
         >
           {{ name }}
         </KunCheckBox>

components/home/topic/Card.vue

@@ -32,6 +32,7 @@ defineProps<{
         :upvote-time="topic.upvoteTime"
         :has-best-answer="topic.hasBestAnswer"
         :is-poll-topic="topic.isPollTopic"
+        :is-n-s-f-w-topic="topic.isNSFWTopic"
       />
 
       <div class="text-default-700 flex items-center gap-4 text-sm">

components/kun/CheckBox.vue

@@ -30,6 +30,7 @@ const emit = defineEmits<{
   change: [value: boolean]
 }>()
 
+const kunUniqueId = useKunUniqueId('kun-checkbox')
 const updateValue = (event: Event) => {
   const target = event.target as HTMLInputElement
   emit('update:modelValue', target.checked)
@@ -57,7 +58,7 @@ const colorClasses: Record<KunUIColor, string> = {
     <div class="relative flex items-center">
       <input
         type="checkbox"
-        :id="id"
+        :id="kunUniqueId"
         :name="name"
         :value="value"
         :checked="modelValue"
@@ -80,7 +81,7 @@ const colorClasses: Record<KunUIColor, string> = {
     <slot />
     <label
       v-if="label"
-      :for="id"
+      :for="kunUniqueId"
       :class="
         cn(
           'text-default-700 ml-2 cursor-pointer text-sm select-none',

components/section/Container.vue

@@ -93,6 +93,7 @@ watch(
           :tags="topic.tag"
           :has-best-answer="topic.hasBestAnswer"
           :is-poll-topic="topic.isPollTopic"
+          :is-n-s-f-w-topic="topic.isNSFWTopic"
         />
 
         <div class="text-default-500 line-clamp-2 text-sm break-all">

components/topic/Card.vue

@@ -26,6 +26,7 @@ const actionsCount = computed(
       :tags="props.topic.tag"
       :has-best-answer="topic.hasBestAnswer"
       :is-poll-topic="topic.isPollTopic"
+      :is-n-s-f-w-topic="topic.isNSFWTopic"
     />
 
     <div class="text-default-700 flex items-center gap-4 text-sm">

components/topic/TagGroup.vue

@@ -5,6 +5,7 @@ const props = defineProps<{
   upvoteTime?: Date | string | null
   hasBestAnswer?: boolean
   isPollTopic?: boolean
+  isNSFWTopic?: boolean
 }>()
 
 const isRecentlyUpvoted = computed(() => hourDiff(props.upvoteTime || 0, 10))
@@ -35,6 +36,13 @@ const isRecentlyUpvoted = computed(() => hourDiff(props.upvoteTime || 0, 10))
       </KunBadge>
     </span>
 
+    <span v-if="isNSFWTopic" class="flex gap-1">
+      <KunBadge variant="solid" color="primary" class-name="bg-orange-600">
+        <KunIcon name="uil:18-plus" class="size-4 text-inherit" />
+        NSFW 话题
+      </KunBadge>
+    </span>
+
     <TopicDetailSection :section="props.section" />
 
     <template v-if="props.tags">

components/topic/detail/Master.vue

@@ -38,6 +38,7 @@ defineProps<{
         :upvote-time="topic.upvoteTime"
         :has-best-answer="!!topic.bestAnswer"
         :is-poll-topic="topic.isPollTopic"
+        :is-n-s-f-w-topic="topic.isNSFW"
       />
 
       <div class="text-default-500 flex items-center space-x-4 text-sm">

components/topic/footer/Rewrite.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
   topic: TopicDetail
 }>()
 
-const { id, title, content, tags, category, section, isTopicRewriting } =
+const { id, title, content, tags, category, section, isNSFW, isTopicRewriting } =
   storeToRefs(useTempEditStore())
 const { id: userId } = usePersistUserStore()
 const isShowRewrite = computed(() => userId === props.topic.user.id)
@@ -18,6 +18,7 @@ const rewriteTopic = async () => {
   tags.value = props.topic.tag
   category.value = props.topic.category
   section.value = props.topic.section ?? []
+  isNSFW.value = !!props.topic.isNSFW
   isTopicRewriting.value = true
 
   await navigateTo('/edit/topic')