🎨 Optimized structure

pkg/views/src/components/comments/CommentList.vue

@@ -24,7 +24,8 @@ const editor = useEditor()
 
 const props = defineProps<{
   comments: any[]
-  model: any
+  model: string
+  dataset: string
   alias: any
   item: any
 }>()
@@ -38,7 +39,7 @@ const pagination = reactive({ page: 0, pageSize: 10, total: 0 })
 async function readComments() {
   loading.value = true
   const res = await request(
-    `/api/p/${props.model}/${props.alias}/comments?` +
+    `/api/p/${props.dataset}/${props.alias}/comments?` +
       new URLSearchParams({
         take: pagination.pageSize.toString(),
         offset: (pagination.page * pagination.pageSize).toString()
@@ -71,7 +72,7 @@ watch(editor, (val) => {
 
 function leaveComment() {
   editor.related.comment_to = props.item
-  editor.related.comment_to.model_type += "s"
+  editor.related.comment_to.model_type = props.dataset
   editor.show.comment = true
 }
 </script>

pkg/views/src/components/posts/ArticleContent.vue

@@ -7,7 +7,7 @@
 
     <div v-if="props.brief">
       <router-link
-        :to="{ name: 'posts.details', params: { postType: 'articles', alias: props.item?.alias ?? 'not-found' } }"
+        :to="{ name: 'posts.details.articles', params: { alias: props.item?.alias ?? 'not-found' } }"
         append-icon="mdi-arrow-right"
         class="link underline text-primary font-medium"
       >

pkg/views/src/components/publish/ArticleEditor.vue

@@ -126,7 +126,7 @@ async function postArticle(evt: SubmitEvent) {
   if (res.status === 200) {
     const data = await res.json()
     form.reset()
-    router.push({ name: "posts.details", params: { postType: "articles", alias: data.alias } })
+    router.push({ name: "posts.details.articles", params: { alias: data.alias } })
     success.value = true
     editor.show.article = false
   } else {

pkg/views/src/router/index.ts

@@ -15,9 +15,9 @@ const router = createRouter({
         },
 
         {
-          path: "/p/:postType/:alias",
+          path: "/p/articles/:alias",
-          name: "posts.details",
+          name: "posts.details.articles",
-          component: () => import("@/views/posts/details.vue")
+          component: () => import("@/views/posts/articles.vue")
         }
       ]
     }

pkg/views/src/views/explore.vue

@@ -7,6 +7,7 @@
     <div class="aside sticky top-0 w-full h-fit md:min-w-[280px] md:max-w-[320px] max-md:order-first">
       <v-card title="Categories">
         <v-list density="compact">
+          <v-list-item title="All" prepend-icon="mdi-apps" active></v-list-item>
         </v-list>
       </v-card>
     </div>

pkg/views/src/views/posts/articles.vue

@@ -30,9 +30,10 @@
       <v-card title="Comments">
         <div class="px-[1rem] pb-[0.825rem] mt-[-12px]">
           <comment-list
+            model="article"
+            dataset="articles"
             v-model:comments="comments"
             :item="post"
-            :model="route.params.postType"
             :alias="route.params.alias"
           />
         </div>
@@ -59,7 +60,7 @@ const route = useRoute()
 
 async function readPost() {
   loading.value = true
-  const res = await request(`/api/p/${route.params.postType}/${route.params.alias}`)
+  const res = await request(`/api/p/articles/${route.params.alias}`)
   if (res.status !== 200) {
     error.value = await res.text()
   } else {