From 8c7338a752c0993fc2d8ec3ad2827c694360e3dd Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Wed, 20 Mar 2024 23:06:50 +0800
Subject: [PATCH] :lipstick: Now create post in realm will auto linking

---
 .../src/components/publish/ArticleEditor.vue  | 13 ++++-
 .../src/components/publish/MomentEditor.vue   | 50 +++++++++++--------
 .../components/publish/parts/PublishArea.vue  |  2 -
 3 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/pkg/views/src/components/publish/ArticleEditor.vue b/pkg/views/src/components/publish/ArticleEditor.vue
index 384eae2..86c993d 100644
--- a/pkg/views/src/components/publish/ArticleEditor.vue
+++ b/pkg/views/src/components/publish/ArticleEditor.vue
@@ -123,11 +123,12 @@ import { useEditor } from "@/stores/editor"
 import { getAtk } from "@/stores/userinfo"
 import { useRealms } from "@/stores/realms";
 import { computed, reactive, ref, watch } from "vue";
-import { useRouter } from "vue-router"
+import { useRoute, useRouter } from "vue-router"
 import PlannedPublish from "@/components/publish/parts/PlannedPublish.vue"
 import Media from "@/components/publish/parts/Media.vue"
 import PublishArea from "@/components/publish/parts/PublishArea.vue";
 
+const route = useRoute()
 const realms = useRealms()
 const editor = useEditor()
 
@@ -220,6 +221,16 @@ watch(editor.related, (val) => {
     })
   }
 })
+
+watch(
+  () => route.params.realmId,
+  (val) => {
+    if (val) {
+      data.value.realm_id = parseInt(val as string)
+    }
+  },
+  { deep: true, immediate: true }
+)
 </script>
 
 <style scoped>
diff --git a/pkg/views/src/components/publish/MomentEditor.vue b/pkg/views/src/components/publish/MomentEditor.vue
index c45651b..d3a3d5f 100644
--- a/pkg/views/src/components/publish/MomentEditor.vue
+++ b/pkg/views/src/components/publish/MomentEditor.vue
@@ -32,36 +32,31 @@
           <v-tooltip text="Media" location="start">
             <template #activator="{ props }">
               <v-btn
-                v-if="data.attachments.length <= 0"
                 v-bind="props"
+                icon
+                class="text-none"
                 type="button"
                 variant="text"
-                icon="mdi-camera"
                 size="small"
                 @click="dialogs.media = true"
-              />
-              <v-badge v-else size="small" color="red" :content="data.attachments.length">
-                <v-btn
-                  v-bind="props"
-                  type="button"
-                  variant="text"
-                  icon="mdi-camera"
-                  size="small"
-                  @click="dialogs.media = true"
-                />
-              </v-badge>
+              >
+                <v-badge v-if="data.attachments.length > 0" :content="data.attachments.length">
+                  <v-icon icon="mdi-camera" />
+                </v-badge>
+
+                <v-icon v-else icon="mdi-camera" />
+              </v-btn>
             </template>
           </v-tooltip>
           <v-tooltip text="Publish area" location="start">
             <template #activator="{ props }">
-              <v-btn
-                v-bind="props"
-                type="button"
-                variant="text"
-                icon="mdi-account-group"
-                size="small"
-                @click="dialogs.area = true"
-              />
+              <v-btn v-bind="props" icon type="button" variant="text" size="small" @click="dialogs.area = true">
+                <v-badge v-if="data.realm_id" dot>
+                  <v-icon icon="mdi-account-group" />
+                </v-badge>
+
+                <v-icon v-else icon="mdi-account-group" />
+              </v-btn>
             </template>
           </v-tooltip>
         </div>
@@ -95,11 +90,12 @@ import { request } from "@/scripts/request"
 import { useEditor } from "@/stores/editor"
 import { getAtk } from "@/stores/userinfo"
 import { reactive, ref, watch } from "vue"
-import { useRouter } from "vue-router"
+import { useRoute, useRouter } from "vue-router"
 import PlannedPublish from "@/components/publish/parts/PlannedPublish.vue"
 import Media from "@/components/publish/parts/Media.vue"
 import PublishArea from "@/components/publish/parts/PublishArea.vue"
 
+const route = useRoute()
 const editor = useEditor()
 
 const dialogs = reactive({
@@ -167,6 +163,16 @@ watch(editor.related, (val) => {
     data.value = val.edit_to
   }
 })
+
+watch(
+  () => route.params.realmId,
+  (val) => {
+    if (val) {
+      data.value.realm_id = parseInt(val as string)
+    }
+  },
+  { deep: true, immediate: true }
+)
 </script>
 
 <style>
diff --git a/pkg/views/src/components/publish/parts/PublishArea.vue b/pkg/views/src/components/publish/parts/PublishArea.vue
index b4bae5e..8734e44 100644
--- a/pkg/views/src/components/publish/parts/PublishArea.vue
+++ b/pkg/views/src/components/publish/parts/PublishArea.vue
@@ -28,11 +28,9 @@
 </template>
 
 <script setup lang="ts">
-import { useEditor } from "@/stores/editor";
 import { useRealms } from "@/stores/realms";
 
 const realms = useRealms();
-const editor = useEditor();
 
 const props = defineProps<{ show: boolean; value: string | null }>();
 const emits = defineEmits(["update:show", "update:value"]);