feat: add post editor page

Signed-off-by: Ryan Wang <i@ryanc.cc>

package.json

@@ -21,7 +21,6 @@
     "@halo-dev/admin-api": "^1.0.0",
     "@vueuse/core": "^8.5.0",
     "pinia": "^2.0.14",
-    "tailwindcss-safe-area": "^0.2.2",
     "tippy.js": "^6.3.7",
     "vue": "^3.2.33",
     "vue-router": "^4.0.15"
@@ -54,6 +53,7 @@
     "start-server-and-test": "^1.14.0",
     "tailwindcss": "^3.0.24",
     "tailwindcss-themeable": "^1.3.0",
+    "tailwindcss-safe-area": "^0.2.2",
     "typescript": "~4.6.4",
     "unplugin-icons": "^0.14.3",
     "vite": "^2.9.9",

pnpm-lock.yaml

@@ -48,7 +48,6 @@ dependencies:
   '@halo-dev/admin-api': 1.0.0
   '@vueuse/core': 8.5.0_vue@3.2.33
   pinia: 2.0.14_ytvqwwdyss532bvoq2clv4ed5m
-  tailwindcss-safe-area: 0.2.2
   tippy.js: 6.3.7
   vue: 3.2.33
   vue-router: 4.0.15_vue@3.2.33
@@ -80,6 +79,7 @@ devDependencies:
   sass: 1.51.0
   start-server-and-test: 1.14.0
   tailwindcss: 3.0.24
+  tailwindcss-safe-area: 0.2.2
   tailwindcss-themeable: 1.3.0
   typescript: 4.6.4
   unplugin-icons: 0.14.3_vite@2.9.9
@@ -5931,7 +5931,7 @@ packages:
 
   /tailwindcss-safe-area/0.2.2:
     resolution: {integrity: sha512-sygGuEFFBBzjqR6d2gB9hDW9xX/4yLt7ymhR2E/XVa6Ar4B86Net8/9EmPAsqFUvXY40+W0HnXwFavFJEM+eCQ==}
-    dev: false
+    dev: true
 
   /tailwindcss-themeable/1.3.0:
     resolution: {integrity: sha512-AmZrk3yAZaJqfrbGast24KrFDtD21rwil05xuqNMFPWTswCHyFugetPk9vy1X+KD4ZTAFWZwW2ULov6VUeK/1A==}

src/core/icons.ts

@@ -42,6 +42,10 @@ import IconInformation from "~icons/ri/information-line";
 import IconCloseCircle from "~icons/ri/close-circle-line";
 // @ts-ignore
 import IconDeleteBin from "~icons/ri/delete-bin-2-line";
+// @ts-ignore
+import IconAddCircle from "~icons/ri/add-circle-line";
+// @ts-ignore
+import IconSave from "~icons/ri/save-line";
 
 export {
   IconDashboard,
@@ -66,4 +70,6 @@ export {
   IconInformation,
   IconCloseCircle,
   IconDeleteBin,
+  IconAddCircle,
+  IconSave,
 };

src/views/contents/attachments/AttachmentList.vue

@@ -4,9 +4,11 @@ import { VButton } from "@/components/base/button";
 import { VModal } from "@/components/base/modal";
 import { IconPalette, IconSettings } from "@/core/icons";
 import { VCard } from "@/components/base/card";
+import { VSpace } from "@/components/base/space";
 import { ref } from "vue";
 
 const strategyVisible = ref(false);
+const attachmentSelectVisible = ref(false);
 
 const strategies = ref([
   {
@@ -34,12 +36,52 @@ const selected = ref(strategies.value[0].id);
       <IconPalette class="self-center mr-2" />
     </template>
     <template #actions>
-      <VButton type="secondary">上传</VButton>
+      <VSpace>
+        <VButton type="default" @click="attachmentSelectVisible = true"
+          >选择</VButton
+        >
+        <VButton type="secondary">上传</VButton>
+      </VSpace>
     </template>
   </VPageHeader>
 
   <VModal v-model:visible="strategyVisible" title="添加存储策略"></VModal>
 
+  <VModal
+    v-model:visible="attachmentSelectVisible"
+    :width="1240"
+    title="选择附件"
+  >
+    <div class="w-full">
+      <ul
+        class="grid grid-cols-2 gap-x-2 gap-y-3 sm:grid-cols-3 md:grid-cols-2 xl:grid-cols-8 2xl:grid-cols-8"
+        role="list"
+      >
+        <li v-for="i in 40" :key="i" class="relative">
+          <VCard :body-class="['!p-0']">
+            <div
+              class="group block w-full aspect-w-10 aspect-h-7 bg-gray-100 overflow-hidden cursor-pointer"
+            >
+              <img
+                :src="`https://picsum.photos/1000/700?random=${i}`"
+                alt=""
+                class="object-cover pointer-events-none group-hover:opacity-75"
+              />
+            </div>
+            <p
+              class="block text-sm font-medium text-gray-700 truncate pointer-events-none px-2 py-1"
+            >
+              {{ i * 100 }}
+            </p>
+          </VCard>
+        </li>
+      </ul>
+    </div>
+    <template #footer>
+      <VButton type="secondary">确定</VButton>
+    </template>
+  </VModal>
+
   <div class="m-4">
     <div class="flex-col flex sm:flex-row gap-2">
       <div class="w-full sm:w-96">

src/views/contents/posts/PostEditor.vue

@@ -1 +1,28 @@
-<template>Post Editor</template>
+<script lang="ts" setup>
+import { VPageHeader } from "@/components/base/header";
+import { VButton } from "@/components/base/button";
+import { IconBookRead, IconSave } from "@/core/icons";
+</script>
+
+<template>
+  <VPageHeader title="文章">
+    <template #icon>
+      <IconBookRead class="self-center mr-2" />
+    </template>
+    <template #actions>
+      <VButton :route="{ name: 'PostEditor' }" type="secondary">
+        <template #icon>
+          <IconSave class="w-full h-full" />
+        </template>
+        发布
+      </VButton>
+    </template>
+  </VPageHeader>
+  <div class="editor">
+    <!--mock-->
+    <iframe
+      class="w-full h-screen border-0"
+      src="https://stackedit.io/app"
+    ></iframe>
+  </div>
+</template>

src/views/contents/posts/PostList.vue

@@ -9,11 +9,12 @@ import { VModal } from "@/components/base/modal";
 import { VTabItem, VTabs } from "@/components/base/tabs";
 import { VTextarea } from "@/components/base/textarea";
 import {
+  IconAddCircle,
+  IconArrowDown,
   IconArrowLeft,
   IconArrowRight,
   IconBookRead,
   IconSettings,
-  IconArrowDown,
 } from "@/core/icons";
 import { posts } from "./posts-mock";
 import { computed, ref } from "vue";
@@ -294,7 +295,12 @@ const handleSelectNext = () => {
       <IconBookRead class="self-center mr-2" />
     </template>
     <template #actions>
-      <VButton :route="{ name: 'PostEditor' }" type="secondary">发布</VButton>
+      <VButton :route="{ name: 'PostEditor' }" type="secondary">
+        <template #icon>
+          <IconAddCircle class="w-full h-full" />
+        </template>
+        新建
+      </VButton>
     </template>
   </VPageHeader>