feat: init publishwidge

components.d.ts

@@ -12,5 +12,6 @@ declare module '@vue/runtime-core' {
     BubbleMenu: typeof import('./src/components/tiptap/BubbleMenu.vue')['default']
     CommandsList: typeof import('./src/components/tiptap/CommandsList.vue')['default']
     Editor: typeof import('./src/components/tiptap/Editor.vue')['default']
+    PublishWidget: typeof import('./src/components/publish/PublishWidget.vue')['default']
   }
 }

src/components/Tiptap/Editor.vue

@@ -93,15 +93,20 @@ const editor = useEditor({
   autofocus: true,
   editorProps: {
     attributes: {
-      class: 'prose prose-slate mx-auto',
+      class: 'prose prose-slate p-5 focus:outline-none bg-white rounded-box max-w-3xl',
     },
   },
 })
 </script>
 
 <template>
+  <div
+    class="shadow-lg flex flex-col items-center bg-slate-100 max-w-3xl mx-auto p-4 rounded-box"
+  >
     <BubbleMenu v-if="editor" :editor="editor" />
     <EditorContent :editor="editor" />
+    <PublishWidget />
+  </div>
 </template>
 
 <style lang="scss">

src/components/publish/PublishWidget.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+interface Action {
+  name: string
+  icon: string
+}
+
+const actions: Action[] = [
+  {
+    name: 'file',
+    icon: 'i-tabler-paperclip',
+  }, {
+    name: 'poll',
+    icon: 'i-tabler-chart-bar',
+  },
+  {
+    name: 'emoji-picker',
+    icon: 'i-tabler-mood-smile-beam',
+  },
+  {
+    name: 'schedule',
+    icon: 'i-tabler-calendar-time',
+  },
+  {
+    name: 'content-warning',
+    icon: 'i-tabler-alert-triangle',
+  },
+]
+</script>
+
+<template>
+  <div class="flex justify-between w-full content-between items-center">
+    <div>
+      <button v-for="{ name, icon } in actions" :key="name" class="btn btn-ghost btn-square">
+        <span :class="icon" class="w-5 h-5" />
+      </button>
+    </div>
+    <div class="flex items-center gap-1">
+      <div class="dropdown dropdown-bottom dropdown-end menu-compact">
+        <label tabindex="0" class="btn btn-sm btn-ghost gap-1">中文<span class="i-tabler-chevron-down" /></label>
+        <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40">
+          <li><a>Item 1</a></li>
+          <li><a>Item 2</a></li>
+        </ul>
+      </div>
+      <div class="dropdown dropdown-bottom dropdown-end menu-compact">
+        <label tabindex="0" class="btn btn-sm btn-ghost gap-1"><span class="i-tabler-world w-5 h-5" /><span class="i-tabler-chevron-down" /></label>
+        <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40">
+          <li><a>Item 1</a></li>
+          <li><a>Item 2</a></li>
+        </ul>
+      </div>
+      <button class="btn btn-sm gap-2">
+        <span class="i-tabler-send" />
+        Post
+      </button>
+    </div>
+  </div>
+</template>