|
@@ -1,12 +1,49 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { ref } from 'vue'
|
|
|
+import { computed, onMounted, ref } from 'vue'
|
|
|
import BetterSelect from '@/components/BetterSelect.vue'
|
|
|
+import TagCloud from '@/components/TagCloud.vue'
|
|
|
+import type { Tag } from '@/models'
|
|
|
+import { api } from '@/utils/axios.ts'
|
|
|
|
|
|
const editorConfig = {
|
|
|
leftToolbar: 'undo redo | image',
|
|
|
rightToolbar: 'preview fullscreen',
|
|
|
}
|
|
|
|
|
|
+const tags = ref<Tag[] | null>(null);
|
|
|
+
|
|
|
+function freshData() {
|
|
|
+ api.tagList().then(res => {
|
|
|
+ tags.value = res.data;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+const activeTags = ref<string[]>([]);
|
|
|
+
|
|
|
+const tagsView = computed<Tag[] | null>(() => {
|
|
|
+ if (!tags.value) return null;
|
|
|
+ return tags.value.map(e => {
|
|
|
+ if (activeTags.value.includes(e.name)) return e;
|
|
|
+ else return {
|
|
|
+ color: "#888888",
|
|
|
+ id: e.id,
|
|
|
+ name: e.name
|
|
|
+ }
|
|
|
+ })
|
|
|
+});
|
|
|
+
|
|
|
+const handleSelectTag = (tag: Tag) => {
|
|
|
+ if (activeTags.value.includes(tag.name)) {
|
|
|
+ activeTags.value = activeTags.value.filter(e => e != tag.name)
|
|
|
+ } else {
|
|
|
+ activeTags.value.push(tag.name)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ freshData();
|
|
|
+});
|
|
|
+
|
|
|
const title = ref('')
|
|
|
|
|
|
const text = ref(`
|
|
@@ -29,6 +66,8 @@ const options = [
|
|
|
{label: "其他", value: "其他"},
|
|
|
]
|
|
|
|
|
|
+const newTags = ref<string[]>([]);
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
@@ -49,45 +88,30 @@ const options = [
|
|
|
:right-toolbar="editorConfig.rightToolbar"
|
|
|
/>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="post-item" style="padding: 12px 30px 24px 30px">
|
|
|
+ <h1>
|
|
|
+ 这篇文章是关于什么的?做个收纳吧~
|
|
|
+ </h1>
|
|
|
+ <TagCloud v-if="tagsView" :tags="tagsView" :on-click="handleSelectTag" v-model:new-tags="newTags" :addable="true"/>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="post-item footer" style="padding: 0 30px">
|
|
|
+ <div class="p-button">
|
|
|
+ 保存草稿
|
|
|
+ </div>
|
|
|
+ <div class="p-button-success">
|
|
|
+ 发布博文
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
-.p-select {
|
|
|
- width: 64px;
|
|
|
- border: none;
|
|
|
- font-size: 16px;
|
|
|
- margin-top: 10px;
|
|
|
- margin-bottom: 10px;
|
|
|
- padding: 8px;
|
|
|
- background: linear-gradient(to right, var(--text-color), var(--text-color)) no-repeat left bottom;
|
|
|
- background-size: 0 2px;
|
|
|
- color: var(--text-color);
|
|
|
- transition: all 0.3s;
|
|
|
- appearance: none;
|
|
|
- text-align: center;
|
|
|
- -webkit-appearance: none;
|
|
|
- -moz-appearance: none;
|
|
|
-}
|
|
|
-
|
|
|
-.p-select:hover {
|
|
|
- background-size: 100% 2px;
|
|
|
-}
|
|
|
-
|
|
|
-.p-select option {
|
|
|
- background-color: var(--background-color);
|
|
|
- color: var(--text-color);
|
|
|
- text-align: center;
|
|
|
+.footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
}
|
|
|
|
|
|
-.p-select option:checked {
|
|
|
- background-color: var(--muted-text-color);
|
|
|
-}
|
|
|
-
|
|
|
-.p-select option:hover {
|
|
|
- background-color: var(--muted-text-color);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
</style>
|