diff --git a/src/components/quill-editor/EditorSettingsMenu.vue b/src/components/quill-editor/EditorSettingsMenu.vue index c81d947e..31a598a6 100644 --- a/src/components/quill-editor/EditorSettingsMenu.vue +++ b/src/components/quill-editor/EditorSettingsMenu.vue @@ -10,6 +10,9 @@ import 'animate.css' import { useKUNGalgameEditStore } from '@/store/modules/edit' import { storeToRefs } from 'pinia' +// 导入关键词显示切换按钮 +import SwitchButton from './SwitchButton.vue' + // 使用编辑界面的 store const settingsStore = useKUNGalgameEditStore() const { mode } = storeToRefs(settingsStore) @@ -56,8 +59,8 @@ const handleRefreshPage = () => location.reload() -
-
+
+
编辑器模式 location.reload()
+ + +
+
热门关键词显示
+ +
@@ -100,14 +109,16 @@ const handleRefreshPage = () => location.reload() .editor-height-title { display: flex; justify-content: space-between; + align-items: center; margin-bottom: 10px; font-size: 17px; } - .editor-advance-title { + .editor-advance { display: flex; justify-content: space-between; - margin-bottom: 10px; + align-items: center; + margin-bottom: 20px; font-size: 17px; } } @@ -116,9 +127,10 @@ const handleRefreshPage = () => location.reload() margin-bottom: 20px; display: flex; justify-content: space-between; + align-items: center; } -.editor-advance { +.editor-advance-title { display: flex; flex-direction: column; .refresh { @@ -149,6 +161,14 @@ const handleRefreshPage = () => location.reload() } } +// 是否显示热门关键词 +.keywords { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 17px; +} + .slide-up-enter-active, .slide-up-leave-active { transition: all 0.25s ease-out; diff --git a/src/components/quill-editor/SwitchButton.vue b/src/components/quill-editor/SwitchButton.vue new file mode 100644 index 00000000..431c5d6b --- /dev/null +++ b/src/components/quill-editor/SwitchButton.vue @@ -0,0 +1,72 @@ + + + + + + + diff --git a/src/components/top-bar/KUNGalgameTopBar.vue b/src/components/top-bar/KUNGalgameTopBar.vue index b8c0ee67..e367da52 100644 --- a/src/components/top-bar/KUNGalgameTopBar.vue +++ b/src/components/top-bar/KUNGalgameTopBar.vue @@ -185,11 +185,6 @@ $navNumber: v-bind(navItemNum); font-weight: bold; line-height: 58px; width: 100%; - &:hover { - background-color: var(--kungalgame-blue-0); - border-radius: 2px; - transition: 0.5s; - } &:nth-child(1):hover ~ .box { background-color: var(--kungalgame-red-3); left: calc(100% / $navNumber * 0); diff --git a/src/store/modules/edit.ts b/src/store/modules/edit.ts index efd29957..92fda9f8 100644 --- a/src/store/modules/edit.ts +++ b/src/store/modules/edit.ts @@ -33,6 +33,8 @@ interface Topic { tags: Array // 话题分区 category: Array + // 是否显示热门关键词 + isShowHotKeywords: boolean // 是否保存 isSave: boolean } @@ -41,15 +43,16 @@ export const useKUNGalgameEditStore = defineStore({ id: 'edit', persist: true, state: (): Topic => ({ - isSave: false, + editorHeight: 300, mode: '', theme: 'snow', - editorHeight: 300, title: '', content: '', tags: [], category: [], + isSave: false, + isShowHotKeywords: true, }), getters: {}, actions: { diff --git a/src/views/edit/components/Tags.vue b/src/views/edit/components/Tags.vue index d14f7618..70ef8ad8 100644 --- a/src/views/edit/components/Tags.vue +++ b/src/views/edit/components/Tags.vue @@ -4,10 +4,12 @@ import { ref, computed, watch, onBeforeMount } from 'vue' import { useKUNGalgameEditStore } from '@/store/modules/edit' import { storeToRefs } from 'pinia' -const topicData = storeToRefs(useKUNGalgameEditStore()) +const { tags, isSave, isShowHotKeywords } = storeToRefs( + useKUNGalgameEditStore() +) // 临时数据,将会从后端返回 7 个热门 tag -const tags = [ +const hotTags = [ '啊这可海星', '啊这可海星', '啊这', @@ -22,8 +24,8 @@ const selectedTags = ref([]) // 组件挂载之前载入 store 里的数据 onBeforeMount(() => { // 如果用户保存了草稿则载入 - if (topicData.isSave.value) { - selectedTags.value = topicData.tags.value + if (isSave.value) { + selectedTags.value = tags.value } }) @@ -42,7 +44,7 @@ const handleTagClose = (tag: string) => { // 被选中后还留下的 tag const remainingTags = computed(() => { - return tags.filter((tag) => !selectedTags.value.includes(tag)) + return hotTags.filter((tag) => !selectedTags.value.includes(tag)) }) // 输入框事件,按下 enter 创建 tag,创建 tag 时长度不超过 17,个数不超过 7 @@ -85,7 +87,7 @@ const validateTagName = (tagName: string) => { // 监测 selectedTags 的变化,保存用户选中的 tag watch(selectedTags.value, () => { - topicData.tags.value = selectedTags.value + tags.value = selectedTags.value }) @@ -113,13 +115,17 @@ watch(selectedTags.value, () => { 提示:(单个关键词 14 个字符以内,至少选择一个、最多 7 个), 您可以输入文字按下 ' Enter ' 创建关键词
- -
热门关键词(点击选择):
- -
- - {{ tag }} - + + +
+ +
热门关键词(点击选择):
+ +
+ + {{ tag }} + +