complete edit page tag select, fix custom background BUG

src/hooks/useBackgroundPicture.ts

@@ -20,7 +20,7 @@ export const currBackground = computed(() => {
   ) {
     return 'none'
   } else if (showKUNGalgameBackground.value === '1007') {
-    return `/url(${showKUNGalgameCustomBackground.value})`
+    return `url(${showKUNGalgameCustomBackground.value})`
   } else {
     // TODO: 替换为后端接口
     return `url(/src/assets/images/bg/bg${showKUNGalgameBackground.value}.png)`

src/views/edit/Edit.vue

@@ -38,7 +38,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 }
 .root {
   height: 100vh;
-  min-height: 1000px;
+  min-height: 1100px;
   min-width: 900px;
   display: flex;
   flex-direction: column;

src/views/edit/components/Tags.vue

@@ -1,60 +1,201 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface Tag {
+  index: number
+  name: string
+}
+
+// 临时数据，将会从后端返回 7 个热门 tag
+const tags: Tag[] = [
+  {
+    index: 1,
+    name: '啊这可海星',
+  },
+  {
+    index: 2,
+    name: '啊这可海星',
+  },
+  {
+    index: 3,
+    name: '啊这可海星',
+  },
+  {
+    index: 4,
+    name: '啊这可海星啊这可海星',
+  },
+  {
+    index: 5,
+    name: '啊这可海星',
+  },
+  {
+    index: 6,
+    name: '啊这可海星啊这可海星',
+  },
+  {
+    index: 7,
+    name: '啊这可海星',
+  },
+]
+
+// 选中的 tag
+const selectedTags = ref<Tag[]>([])
+
+// 点击 tag 触发回调
+const handleTagClick = (tag: Tag) => {
+  selectedTags.value.push(tag)
+}
+
+// 点击取消选中 tag
+const handleTagClose = (tag: Tag) => {
+  const index = selectedTags.value.indexOf(tag)
+  if (index > -1) {
+    selectedTags.value.splice(index, 1)
+  }
+}
+
+// 被选中后还留下的 tag
+const remainingTags = computed<Tag[]>(() => {
+  return tags.filter((tag) => !selectedTags.value.includes(tag))
+})
+
+// 输入框事件，按下 enter 创建 tag，创建 tag 时长度不超过 17，个数不超过 7
+const handleTagInput = (event: KeyboardEvent) => {
+  const inputElement = event.target as HTMLInputElement
+  const tagName = inputElement.value.trim()
+
+  // 按下 enter 创建
+  if (
+    event.key === 'Enter' &&
+    tagName.length > 0 &&
+    selectedTags.value.length < 7
+  ) {
+    const tag: Tag = {
+      index: selectedTags.value.length + 1,
+      name: validateTagName(tagName),
+    }
+
+    selectedTags.value.push(tag)
+    inputElement.value = ''
+  }
+}
+
+// 合法的输入长度不能超过 17 个字符，超过则截取前 17 个字符
+const validateTagName = (tagName: string) => {
+  let validatedName = tagName
+
+  if (validatedName.length > 17) {
+    validatedName = validatedName.slice(0, 17)
+  }
+
+  return validatedName
+}
+</script>
 
 <template>
   <!-- 标签的总容器 -->
-  <div class="tags-container">
-    <!-- 标签输入框 -->
-    <input
-      type="text"
-      placeholder="请输入帖子的关键词（单个关键词 10 个字符以内，至少选择一个、最多 7 个）, 输入文字按下 ' Enter ' 创建关键词"
-    />
+  <div class="container">
+    <div class="input-container">
+      <div class="tags-container">
+        <!-- 已选择的标签显示容器 -->
+        <span v-for="tag in selectedTags" :key="tag.index" class="selected-tag">
+          {{ tag.name }}
+          <span class="close-btn" @click="() => handleTagClose(tag)">×</span>
+        </span>
+      </div>
+      <!-- 标签输入框 -->
+      <input
+        class="input"
+        type="text"
+        placeholder="请输入帖子的关键词"
+        @keydown.enter="handleTagInput"
+      />
+    </div>
+    <div class="tips">
+      提示：（单个关键词 14 个字符以内，至少选择一个、最多 7 个）,
+      您可以输入文字按下 ' Enter ' 创建关键词
+    </div>
     <!-- 标签的提示词 -->
     <div class="tags-info">热门关键词（点击选择）:</div>
     <!-- 标签容器 -->
     <div class="tags">
-      <span>啊这可海星</span>
-      <span>啊这可海星</span>
-      <span>啊这可海星</span>
-      <span>啊这可海星</span>
-      <span>啊这可海星</span>
-      <span>啊这可海星</span>
-      <span>啊这可海星</span>
-      <span>啊这可海星</span>
-      <span>啊这可海星</span>
-      <span>啊这可海星</span>
+      <span
+        v-for="tag in remainingTags"
+        :key="tag.index"
+        @click="() => handleTagClick(tag)"
+      >
+        {{ tag.name }}
+      </span>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 /* 标签的总容器 */
-.tags-container {
+.container {
   width: 100%;
 }
+
+.input-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  border: 1px solid var(--kungalgame-blue-4);
+}
+
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.selected-tag {
+  border: 1px solid var(--kungalgame-blue-1);
+  margin: 5px;
+  display: block;
+  white-space: nowrap;
+  font-size: 14px;
+  padding: 3px;
+  background-color: var(--kungalgame-trans-red-1);
+  span {
+    cursor: pointer;
+  }
+}
+
 /* 标签输入框 */
-.tags-container input {
+.input {
   background-color: var(--kungalgame-trans-white-9);
   /* 输入标签的字体 */
   font-size: 17px;
-  width: 100%;
+  flex-grow: 1;
   box-sizing: border-box;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: none;
   padding: 5px;
+  display: flex;
+  min-width: 300px;
+  color: var(--kungalgame-font-color-3);
 }
-/* 标签输入框 focus */
-.tags-container input:focus {
-  box-shadow: 0px 0px 3px var(--kungalgame-blue-4);
+
+/* 提示 */
+.tips {
+  font-size: small;
+  color: var(--kungalgame-font-color-1);
 }
+
 .tags-info {
-  margin: 10px 0;
+  margin-top: 20px;
+  margin-bottom: 10px;
 }
+
 /* 单个标签容器 */
 .tags {
   display: flex;
   flex-wrap: wrap;
 }
+
 /* 单个标签的样式 */
 .tags > span {
+  border: 1px solid var(--kungalgame-blue-1);
   margin: 5px;
   display: block;
   white-space: nowrap;
@@ -63,6 +204,7 @@
   background-color: var(--kungalgame-trans-blue-1);
   cursor: pointer;
 }
+
 .tags > span:hover {
   background-color: var(--kungalgame-trans-red-1);
 }