✨ Basic posting

DysonNetwork.Sphere/Client/package.json

@@ -18,6 +18,9 @@
     "@fingerprintjs/fingerprintjs": "^4.6.2",
     "@fontsource-variable/nunito": "^5.2.6",
     "@hcaptcha/vue3-hcaptcha": "^1.3.0",
+    "@milkdown/crepe": "^7.15.2",
+    "@milkdown/kit": "^7.15.2",
+    "@milkdown/vue": "^7.15.2",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.11",
     "@vueuse/core": "^13.5.0",

DysonNetwork.Sphere/Client/src/components/AttachmentItem.vue

@@ -14,5 +14,5 @@ const props = defineProps<{ item: any }>()
 
 const itemType = computed(() => props.item.mime_type.split('/')[0] ?? 'unknown')
 
-const remoteSource = computed(() => `/cgi/drive/files/${props.item.id}`)
+const remoteSource = computed(() => `/cgi/drive/files/${props.item.id}?original=true`)
 </script>

DysonNetwork.Sphere/Client/src/components/PostEditor.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <pub-select v-model:value="publisher" />
+    <n-input
+      type="textarea"
+      placeholder="What's happended?!"
+      v-model:value="content"
+      @keydown.meta.enter.exact="submit"
+      @keydown.ctrl.enter.exact="submit"
+    />
+    <div class="flex justify-between">
+      <div class="flex gap-2"></div>
+      <n-button type="primary" icon-placement="right" :loading="submitting" @click="submit">
+        Post
+        <template #icon>
+          <n-icon><send-round /></n-icon>
+        </template>
+      </n-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NInput, NButton, NIcon } from 'naive-ui'
+import { ref } from 'vue'
+
+import { SendRound } from '@vicons/material'
+
+import PubSelect from './PubSelect.vue'
+
+const emits = defineEmits(['posted'])
+
+const publisher = ref<string | undefined>()
+const content = ref('')
+
+const submitting = ref(false)
+
+async function submit() {
+  submitting.value = true
+  await fetch(`/api/posts?pub=${publisher.value}`, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify({
+      content: content.value,
+    }),
+  })
+
+  submitting.value = false
+  content.value = ''
+  emits('posted')
+}
+</script>

DysonNetwork.Sphere/Client/src/components/PostEditorPro.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <milkdown />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Milkdown, useEditor } from "@milkdown/vue";
+import { Crepe } from "@milkdown/crepe";
+import "@milkdown/crepe/theme/common/style.css";
+import "@milkdown/crepe/theme/frame.css";
+
+useEditor((root) => {
+  const crepe = new Crepe({
+    root,
+  });
+  return crepe;
+})
+</script>

DysonNetwork.Sphere/Client/src/components/PubSelect.vue

@@ -0,0 +1,97 @@
+<template>
+  <n-select
+    :options="pubStore.publishers"
+    label-field="nick"
+    value-field="name"
+    :value="props.value"
+    :render-label="renderLabel"
+    :render-tag="renderSingleSelectTag"
+    @update:value="(v) => emits('update:value', v)"
+  />
+</template>
+
+<script setup lang="ts">
+import { usePubStore } from '@/stores/pub'
+import { NAvatar, NSelect, NText, type SelectRenderLabel, type SelectRenderTag } from 'naive-ui'
+import { h, watch } from 'vue'
+
+const pubStore = usePubStore()
+
+const props = defineProps<{ value: string | undefined }>()
+const emits = defineEmits(['update:value'])
+
+watch(
+  pubStore,
+  (value) => {
+    if (!props.value && value.publishers) {
+      emits('update:value', pubStore.publishers[0].name)
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+const renderSingleSelectTag: SelectRenderTag = ({ option }: { option: any }) => {
+  return h(
+    'div',
+    {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+      },
+    },
+    [
+      h(NAvatar, {
+        src: option.picture
+          ? `/cgi/drive/files/${option.picture.id}`
+          : undefined,
+        round: true,
+        size: 24,
+        style: {
+          marginRight: '8px',
+        },
+      }),
+      option.nick as string,
+    ],
+  )
+}
+
+const renderLabel: SelectRenderLabel = (option: any) => {
+  return h(
+    'div',
+    {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+      },
+    },
+    [
+      h(NAvatar, {
+        src: option.picture
+          ? `/cgi/drive/files/${option.picture.id}`
+          : undefined,
+        round: true,
+        size: 'small',
+      }),
+      h(
+        'div',
+        {
+          style: {
+            marginLeft: '8px',
+            padding: '4px 0',
+          },
+        },
+        [
+          h('div', null, [option.nick as string]),
+          h(
+            NText,
+            { depth: 3, tag: 'div' },
+            {
+              default: () => `@${option.name}`,
+            },
+          ),
+        ],
+      ),
+    ],
+  )
+}
+</script>

DysonNetwork.Sphere/Client/src/root.vue

@@ -15,6 +15,8 @@ import { usePreferredDark } from '@vueuse/core'
 import { useUserStore } from './stores/user'
 import { onMounted } from 'vue'
 import { useServicesStore } from './stores/services'
+import { MilkdownProvider } from '@milkdown/vue'
+import { usePubStore } from './stores/pub'
 
 const themeOverrides = {
   common: {
@@ -30,26 +32,30 @@ const isDark = usePreferredDark()
 
 const userStore = useUserStore()
 const servicesStore = useServicesStore()
+const pubStore = usePubStore()
 
 onMounted(() => {
   userStore.initialize()
 
   userStore.fetchUser()
   servicesStore.fetchServices()
+  pubStore.fetchPublishers()
 })
 </script>
 
 <template>
-  <n-config-provider :theme-overrides="themeOverrides" :theme="isDark ? darkTheme : lightTheme">
-    <n-global-style />
-    <n-loading-bar-provider>
-      <n-dialog-provider>
-        <n-message-provider placement="bottom">
-          <layout-default>
-            <router-view />
-          </layout-default>
-        </n-message-provider>
-      </n-dialog-provider>
-    </n-loading-bar-provider>
-  </n-config-provider>
+  <milkdown-provider>
+    <n-config-provider :theme-overrides="themeOverrides" :theme="isDark ? darkTheme : lightTheme">
+      <n-global-style />
+      <n-loading-bar-provider>
+        <n-dialog-provider>
+          <n-message-provider placement="bottom">
+            <layout-default>
+              <router-view />
+            </layout-default>
+          </n-message-provider>
+        </n-dialog-provider>
+      </n-loading-bar-provider>
+    </n-config-provider>
+  </milkdown-provider>
 </template>

DysonNetwork.Sphere/Client/src/stores/pub.ts

@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const usePubStore = defineStore('pub', () => {
+  const publishers = ref<any[]>([])
+
+  async function fetchPublishers() {
+    const resp = await fetch('/api/publishers')
+    publishers.value = await resp.json()
+  }
+
+  return { publishers, fetchPublishers }
+})

DysonNetwork.Sphere/Client/src/views/index.vue

@@ -9,7 +9,7 @@
         </n-infinite-scroll>
       </n-gi>
       <n-gi span="2" class="max-lg:order-first">
-        <n-card class="w-full mt-4" title="About">
+        <n-card class="w-full mt-4" title="About" v-if="!userStore.user">
           <p>Welcome to the <b>Solar Network</b></p>
           <p>The open social network. Friendly to everyone.</p>
 
@@ -22,16 +22,27 @@
             </span>
           </p>
         </n-card>
+        <n-card class="mt-4 w-full">
+          <post-editor @posted="refreshActivities" />
+        </n-card>
+        <n-alert closable class="mt-4" w-full type="info" title="Looking for Solian?">
+          The flutter based web app Solian has been moved to
+          <n-a href="https://web.solian.app" target="_blank">web.solian.app</n-a>
+          <n-hr />
+          网页版 Solian 已经被移动到
+          <n-a href="https://web.solian.app" target="_blank">web.solian.app</n-a>
+        </n-alert>
       </n-gi>
     </n-grid>
   </div>
 </template>
 
 <script setup lang="ts">
-import { NCard, NInfiniteScroll, NGrid, NGi } from 'naive-ui'
+import { NCard, NInfiniteScroll, NGrid, NGi, NAlert, NA, NHr } from 'naive-ui'
 import { computed, onMounted, ref } from 'vue'
 import { useUserStore } from '@/stores/user'
 
+import PostEditor from '@/components/PostEditor.vue'
 import PostItem from '@/components/PostItem.vue'
 
 const userStore = useUserStore()
@@ -54,6 +65,7 @@ const activitesLast = computed(
 )
 
 async function fetchActivites() {
+  if (loading.value) return
   loading.value = true
   const resp = await fetch(
     activitesLast.value == null
@@ -64,4 +76,9 @@ async function fetchActivites() {
   loading.value = false
 }
 onMounted(() => fetchActivites())
+
+async function refreshActivities() {
+  activites.value = []
+  fetchActivites()
+}
 </script>