From 4eee4604661fc0c29fdc45e015887557e52d1f0b Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Tue, 11 Jun 2024 18:32:36 +0800
Subject: [PATCH] feat: page content

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 app.vue                                       |   1 +
 assets/css/tiptap-theme.css                   |  18 +-
 components/PageTitle.vue                      |  20 ++-
 components/ui/toast/Toast.vue                 |  28 +++
 components/ui/toast/ToastAction.vue           |  19 ++
 components/ui/toast/ToastClose.vue            |  22 +++
 components/ui/toast/ToastDescription.vue      |  19 ++
 components/ui/toast/ToastProvider.vue         |  11 ++
 components/ui/toast/ToastTitle.vue            |  19 ++
 components/ui/toast/ToastViewport.vue         |  17 ++
 components/ui/toast/Toaster.vue               |  30 ++++
 components/ui/toast/index.ts                  |  38 ++++
 components/ui/toast/use-toast.ts              | 164 ++++++++++++++++++
 constants/index.ts                            |  85 +++++++++
 package.json                                  |   2 +-
 pages/[...slug].vue                           |  45 +++--
 pages/index.vue                               |  26 +--
 pages/new.vue                                 |  86 +++------
 server/api/trpc/[trpc].ts                     |  19 +-
 .../migrations/meta/0000_snapshot.json        |   2 +-
 server/database/migrations/meta/_journal.json |   2 +-
 server/trpc/routers/index.ts                  |  11 +-
 types/index.ts                                |  30 ++++
 23 files changed, 569 insertions(+), 145 deletions(-)
 create mode 100644 components/ui/toast/Toast.vue
 create mode 100644 components/ui/toast/ToastAction.vue
 create mode 100644 components/ui/toast/ToastClose.vue
 create mode 100644 components/ui/toast/ToastDescription.vue
 create mode 100644 components/ui/toast/ToastProvider.vue
 create mode 100644 components/ui/toast/ToastTitle.vue
 create mode 100644 components/ui/toast/ToastViewport.vue
 create mode 100644 components/ui/toast/Toaster.vue
 create mode 100644 components/ui/toast/index.ts
 create mode 100644 components/ui/toast/use-toast.ts
 create mode 100644 constants/index.ts
 create mode 100644 types/index.ts

diff --git a/app.vue b/app.vue
index 06b8a09..234de9c 100644
--- a/app.vue
+++ b/app.vue
@@ -1,4 +1,5 @@
 <template>
+  <Toaster />
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
diff --git a/assets/css/tiptap-theme.css b/assets/css/tiptap-theme.css
index fcb8cda..b5ded10 100644
--- a/assets/css/tiptap-theme.css
+++ b/assets/css/tiptap-theme.css
@@ -1,25 +1,13 @@
-.tiptap h1,
-.tiptap h2,
-.tiptap h3 {
-  margin: 0.3em 0;
-}
-
 .tiptap p {
-  margin: 0;
+  line-height: 1.75rem;
 }
 
-.tiptap ol,
-.tiptap ul {
-  margin: 0;
-  padding-left: 1.5em;
+.tiptap p:not(:first-child) {
+  margin-top: 0.5rem;
 }
 
 .tiptap a {
   color: var(--primary);
   text-decoration: underline;
   text-underline-offset: 4px;
-}
-
-.tiptap {
-  line-height: 25px;
 }
\ No newline at end of file
diff --git a/components/PageTitle.vue b/components/PageTitle.vue
index 4dafa9e..4d8e3fc 100644
--- a/components/PageTitle.vue
+++ b/components/PageTitle.vue
@@ -1,11 +1,16 @@
 <template>
-  <div class="mb-6 space-y-1">
-    <p class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-      {{ title }}
-    </p>
-    <p class="text-lg text-muted-foreground">
-      {{ description }}
-    </p>
+  <div class="mb-6 flex">
+    <div class="space-y-1">
+      <p class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+        {{ title }}
+      </p>
+      <p class="text-lg text-muted-foreground">
+        {{ description }}
+      </p>
+    </div>
+    <NuxtLink v-if="newButton" class="ml-auto" to="/new">
+      <Button>我要添加内容</Button>
+    </NuxtLink>
   </div>
 </template>
 
@@ -13,5 +18,6 @@
 defineProps<{
   title: string;
   description: string;
+  newButton: boolean;
 }>();
 </script>
diff --git a/components/ui/toast/Toast.vue b/components/ui/toast/Toast.vue
new file mode 100644
index 0000000..22adc59
--- /dev/null
+++ b/components/ui/toast/Toast.vue
@@ -0,0 +1,28 @@
+<template>
+  <ToastRoot
+    v-bind="forwarded"
+    :class="cn(toastVariants({ variant }), props.class)"
+    @update:open="onOpenChange"
+  >
+    <slot />
+  </ToastRoot>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue';
+import { type ToastProps, toastVariants } from '.';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ToastProps>();
+
+const emits = defineEmits<ToastRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
diff --git a/components/ui/toast/ToastAction.vue b/components/ui/toast/ToastAction.vue
new file mode 100644
index 0000000..766f607
--- /dev/null
+++ b/components/ui/toast/ToastAction.vue
@@ -0,0 +1,19 @@
+<template>
+  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
+    <slot />
+  </ToastAction>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import { ToastAction, type ToastActionProps } from 'radix-vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
diff --git a/components/ui/toast/ToastClose.vue b/components/ui/toast/ToastClose.vue
new file mode 100644
index 0000000..22d5281
--- /dev/null
+++ b/components/ui/toast/ToastClose.vue
@@ -0,0 +1,22 @@
+<template>
+  <ToastClose v-bind="delegatedProps" :class="cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
+    <Cross2Icon class="h-4 w-4" />
+  </ToastClose>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import { ToastClose, type ToastCloseProps } from 'radix-vue';
+import { Cross2Icon } from '@radix-icons/vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ToastCloseProps & {
+  class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
diff --git a/components/ui/toast/ToastDescription.vue b/components/ui/toast/ToastDescription.vue
new file mode 100644
index 0000000..5c62482
--- /dev/null
+++ b/components/ui/toast/ToastDescription.vue
@@ -0,0 +1,19 @@
+<template>
+  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="delegatedProps">
+    <slot />
+  </ToastDescription>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import { ToastDescription, type ToastDescriptionProps } from 'radix-vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
diff --git a/components/ui/toast/ToastProvider.vue b/components/ui/toast/ToastProvider.vue
new file mode 100644
index 0000000..f9bcd38
--- /dev/null
+++ b/components/ui/toast/ToastProvider.vue
@@ -0,0 +1,11 @@
+<template>
+  <ToastProvider v-bind="props">
+    <slot />
+  </ToastProvider>
+</template>
+
+<script setup lang="ts">
+import { ToastProvider, type ToastProviderProps } from 'radix-vue';
+
+const props = defineProps<ToastProviderProps>();
+</script>
diff --git a/components/ui/toast/ToastTitle.vue b/components/ui/toast/ToastTitle.vue
new file mode 100644
index 0000000..1e9bd4d
--- /dev/null
+++ b/components/ui/toast/ToastTitle.vue
@@ -0,0 +1,19 @@
+<template>
+  <ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold [&+div]:text-xs', props.class)">
+    <slot />
+  </ToastTitle>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import { ToastTitle, type ToastTitleProps } from 'radix-vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
diff --git a/components/ui/toast/ToastViewport.vue b/components/ui/toast/ToastViewport.vue
new file mode 100644
index 0000000..56f1ccc
--- /dev/null
+++ b/components/ui/toast/ToastViewport.vue
@@ -0,0 +1,17 @@
+<template>
+  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue';
+import { ToastViewport, type ToastViewportProps } from 'radix-vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
diff --git a/components/ui/toast/Toaster.vue b/components/ui/toast/Toaster.vue
new file mode 100644
index 0000000..2efe562
--- /dev/null
+++ b/components/ui/toast/Toaster.vue
@@ -0,0 +1,30 @@
+<template>
+  <ToastProvider>
+    <Toast v-for="toast in toasts" :key="toast.id" v-bind="toast">
+      <div class="grid gap-1">
+        <ToastTitle v-if="toast.title">
+          {{ toast.title }}
+        </ToastTitle>
+        <template v-if="toast.description">
+          <ToastDescription v-if="isVNode(toast.description)">
+            <component :is="toast.description" />
+          </ToastDescription>
+          <ToastDescription v-else>
+            {{ toast.description }}
+          </ToastDescription>
+        </template>
+        <ToastClose />
+      </div>
+      <component :is="toast.action" />
+    </Toast>
+    <ToastViewport />
+  </ToastProvider>
+</template>
+
+<script setup lang="ts">
+import { isVNode } from 'vue';
+import { useToast } from './use-toast';
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.';
+
+const { toasts } = useToast();
+</script>
diff --git a/components/ui/toast/index.ts b/components/ui/toast/index.ts
new file mode 100644
index 0000000..233d3f2
--- /dev/null
+++ b/components/ui/toast/index.ts
@@ -0,0 +1,38 @@
+import type { ToastRootProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+
+import { type VariantProps, cva } from 'class-variance-authority';
+
+export { default as Toaster } from './Toaster.vue';
+export { default as Toast } from './Toast.vue';
+export { default as ToastViewport } from './ToastViewport.vue';
+export { default as ToastAction } from './ToastAction.vue';
+export { default as ToastClose } from './ToastClose.vue';
+export { default as ToastTitle } from './ToastTitle.vue';
+export { default as ToastDescription } from './ToastDescription.vue';
+export { default as ToastProvider } from './ToastProvider.vue';
+export { toast, useToast } from './use-toast';
+
+export const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'border bg-background text-foreground',
+        destructive:
+                    'destructive group border-destructive bg-destructive text-destructive-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+type ToastVariants = VariantProps<typeof toastVariants>;
+
+export interface ToastProps extends ToastRootProps {
+  class?: HTMLAttributes['class'];
+  variant?: ToastVariants['variant'];
+  onOpenChange?: ((value: boolean) => void) | undefined;
+}
diff --git a/components/ui/toast/use-toast.ts b/components/ui/toast/use-toast.ts
new file mode 100644
index 0000000..6d610f1
--- /dev/null
+++ b/components/ui/toast/use-toast.ts
@@ -0,0 +1,164 @@
+import { computed, ref } from 'vue';
+import type { Component, VNode } from 'vue';
+import type { ToastProps } from '.';
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+export type StringOrVNode =
+  | string
+  | VNode
+  | (() => VNode);
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: string;
+  description?: StringOrVNode;
+  action?: Component;
+};
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+    type: ActionType['ADD_TOAST'];
+    toast: ToasterToast;
+  }
+  | {
+    type: ActionType['UPDATE_TOAST'];
+    toast: Partial<ToasterToast>;
+  }
+  | {
+    type: ActionType['DISMISS_TOAST'];
+    toastId?: ToasterToast['id'];
+  }
+  | {
+    type: ActionType['REMOVE_TOAST'];
+    toastId?: ToasterToast['id'];
+  };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+function addToRemoveQueue(toastId: string) {
+  if (toastTimeouts.has(toastId))
+    return;
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: actionTypes.REMOVE_TOAST,
+      toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+}
+
+const state = ref<State>({
+  toasts: [],
+});
+
+function dispatch(action: Action) {
+  switch (action.type) {
+    case actionTypes.ADD_TOAST:
+      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT);
+      break;
+
+    case actionTypes.UPDATE_TOAST:
+      state.value.toasts = state.value.toasts.map(t =>
+        t.id === action.toast.id ? { ...t, ...action.toast } : t,
+      );
+      break;
+
+    case actionTypes.DISMISS_TOAST: {
+      const { toastId } = action;
+
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.value.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      state.value.toasts = state.value.toasts.map(t =>
+        t.id === toastId || toastId === undefined
+          ? {
+              ...t,
+              open: false,
+            }
+          : t,
+      );
+      break;
+    }
+
+    case actionTypes.REMOVE_TOAST:
+      if (action.toastId === undefined)
+        state.value.toasts = [];
+      else
+        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId);
+
+      break;
+  }
+}
+
+function useToast() {
+  return {
+    toasts: computed(() => state.value.toasts),
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),
+  };
+}
+
+type Toast = Omit<ToasterToast, 'id'>;
+
+function toast(props: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: actionTypes.UPDATE_TOAST,
+      toast: { ...props, id },
+    });
+
+  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id });
+
+  dispatch({
+    type: actionTypes.ADD_TOAST,
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open: boolean) => {
+        if (!open)
+          dismiss();
+      },
+    },
+  });
+
+  return {
+    id,
+    dismiss,
+    update,
+  };
+}
+
+export { toast, useToast };
diff --git a/constants/index.ts b/constants/index.ts
new file mode 100644
index 0000000..94c4d4c
--- /dev/null
+++ b/constants/index.ts
@@ -0,0 +1,85 @@
+import { z } from 'zod';
+import type { ICategory } from '~/types';
+
+export const primaryCategorySchema = z.enum([
+  'life',
+  'study',
+  'tips',
+  'intl',
+]);
+
+export const secondaryCategorySchema = z.enum([
+  'library',
+  'activity',
+  'dorm',
+  'food',
+  'club',
+  'humanities',
+  'science',
+  'compulsories',
+  'life',
+  'study',
+]);
+
+export const categoryMap: Array<ICategory> = [{
+  value: 'life',
+  name: '生活篇',
+  description: '来了就是深中人',
+  icon: 'lucide:home',
+  to: '/life',
+  secondary: [{
+    value: 'library',
+    name: '图书馆相关',
+  }, {
+    value: 'activity',
+    name: '深中活动',
+  }, {
+    value: 'dorm',
+    name: '宿舍相关',
+  }, {
+    value: 'food',
+    name: '美食地图',
+  }, {
+    value: 'club',
+    name: '社团相关',
+  }],
+}, {
+  value: 'study',
+  name: '学习篇',
+  description: '什么都阻止不了我学习！',
+  icon: 'lucide:book-marked',
+  to: '/study',
+  secondary: [{
+    value: 'humanities',
+    name: '文科',
+  }, {
+    value: 'science',
+    name: '理科',
+  }, {
+    value: 'compulsories',
+    name: '主科（语数英）',
+  }],
+}, {
+  value: 'tips',
+  name: '小技巧篇',
+  description: '在意想不到的时候很有用',
+  icon: 'lucide:lightbulb',
+  to: '/tips',
+  secondary: [{
+    value: 'life',
+    name: '生活相关',
+  }, {
+    value: 'study',
+    name: '学习相关',
+  }],
+}, {
+  value: 'intl',
+  name: '国际体系篇',
+  description: '国际体系的特供经验',
+  icon: 'lucide:globe',
+  to: '/intl',
+  secondary: [{
+    value: 'study',
+    name: '学习相关',
+  }],
+}];
diff --git a/package.json b/package.json
index b6a5326..d24b6fc 100644
--- a/package.json
+++ b/package.json
@@ -60,4 +60,4 @@
     "typescript": "^5.4.5",
     "wrangler": "^3.60.0"
   }
-}
\ No newline at end of file
+}
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index 59300fa..3d28c03 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -1,27 +1,50 @@
 <template>
-  {{ categoryName }}
+  <PageTitle new-button :title="category.name" :description="category.description" />
+  <template v-for="(posts, key) in Array.from(data)" :key="key">
+    <h2
+      class="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
+    >
+      {{ category.secondary.find(x => x.value === posts[0])?.name }}
+    </h2>
+
+    <ol class="my-6 ml-6 list-decimal [&>li]:mt-2">
+      <li v-for="post in posts[1]" :key="post.id">
+        <TiptapViewer :content="post.content" />
+      </li>
+    </ol>
+  </template>
 </template>
 
 <script setup lang="ts">
+import { categoryMap } from '~/constants';
+import type { RouterOutput, TPrimaryCategory, TSecondaryCategory } from '~/types';
+
 const { params } = useRoute();
+const { $api } = useNuxtApp();
 
-const categoryMap: { [key: string]: string } = {
-  life: '生活篇',
-  intl: '国际体系篇',
-  study: '学习篇',
-  tips: '小技巧篇',
-};
+const slugCategory = params.slug[0] as TPrimaryCategory;
+const category = computed(
+  () => categoryMap.find(x => x.value === slugCategory) || categoryMap[0],
+);
 
-const categoryName = computed(() => categoryMap[params.slug[0]]);
+const data: Map<TSecondaryCategory, RouterOutput['guide']> = new Map();
+for (const c of categoryMap.find(x => x.value === slugCategory)?.secondary ?? []) {
+  const res = await $api.guide.query({
+    primaryCategory: slugCategory,
+    secondaryCategory: c.value,
+  });
+  if (res)
+    data.set(c.value, res.sort((a, b) => a.id - b.id));
+}
 
 useHead({
-  title: `${categoryName.value} | 深中漫游指南`,
+  title: `${category.value.name} | 深中漫游指南`,
   meta: [{ name: 'description', content: '一份不太常规的深中入学指南。' }],
 });
 
 useServerSeoMeta({
-  title: `${categoryName.value} | 深中漫游指南`,
-  ogTitle: `${categoryName.value} | 深中漫游指南`,
+  title: `${category.value.name} | 深中漫游指南`,
+  ogTitle: `${category.value.name} | 深中漫游指南`,
   description: '一份不太常规的深中入学指南。',
   ogImage: 'https://oss.the1068.pictures/ogDefault.png',
 });
diff --git a/pages/index.vue b/pages/index.vue
index be6067b..23be6fa 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -20,12 +20,12 @@
   </section>
 
   <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-    <NuxtLink v-for="(card, i) in cards" :key="i" :to="card.to">
+    <NuxtLink v-for="(card, i) in categoryMap" :key="i" :to="card.to">
       <Card class="relative hover:bg-muted transition-all h-full">
         <CardHeader class="text-xl">
           <Icon :name="card.icon" size="30" class="mb-2" />
           <CardTitle>
-            {{ card.title }}
+            {{ card.name }}
           </CardTitle>
           <CardDescription>
             {{ card.description }}
@@ -38,27 +38,7 @@
 </template>
 
 <script setup lang="ts">
-const cards = [{
-  title: '生活',
-  description: '来了就是深中人',
-  icon: 'lucide:home',
-  to: '/life',
-}, {
-  title: '学习',
-  description: '什么都阻止不了我学习！',
-  icon: 'lucide:book-marked',
-  to: '/study',
-}, {
-  title: '国际体系',
-  description: '国际体系的特供经验',
-  icon: 'lucide:globe',
-  to: '/intl',
-}, {
-  title: '小技巧',
-  description: '在意想不到的时候很有用',
-  icon: 'lucide:lightbulb',
-  to: '/tips',
-}];
+import { categoryMap } from '~/constants';
 
 useHead({
   title: '深中漫游指南',
diff --git a/pages/new.vue b/pages/new.vue
index d53688d..30d59dc 100644
--- a/pages/new.vue
+++ b/pages/new.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageTitle title="增加新的内容" description="不知道写什么" />
+  <PageTitle :new-button="false" title="增加新的内容" description="不知道写什么" />
 
   <div class="lg:w-1/4">
     <FormField v-slot="{ componentField }" name="primaryCategory">
@@ -13,7 +13,7 @@
           </FormControl>
           <SelectContent>
             <SelectGroup>
-              <SelectItem v-for="option in guideCategory" :key="option.value" :value="option.value">
+              <SelectItem v-for="option in categoryMap" :key="option.value" :value="option.value">
                 {{ option.name }}
               </SelectItem>
             </SelectGroup>
@@ -65,77 +65,39 @@
 </template>
 
 <script setup lang="ts">
+import * as z from 'zod';
 import { toTypedSchema } from '@vee-validate/zod';
 import { useForm } from 'vee-validate';
+import { categoryMap, primaryCategorySchema, secondaryCategorySchema } from '~/constants';
+import { useToast } from '@/components/ui/toast/use-toast';
 
-import * as z from 'zod';
+const { toast } = useToast();
+const { $api } = useNuxtApp();
 
 const formSchema = toTypedSchema(z.object({
-  primaryCategory: z.string(),
-  secondaryCategory: z.string(),
+  primaryCategory: primaryCategorySchema,
+  secondaryCategory: secondaryCategorySchema,
   content: z.string(),
 }));
-const { values, handleSubmit, setFieldValue } = useForm({ validationSchema: formSchema });
-
-const guideCategory = [{
-  value: 'life',
-  name: '生活篇',
-  secondary: [{
-    value: 'library',
-    name: '图书馆相关',
-  }, {
-    value: 'activity',
-    name: '深中活动',
-  }, {
-    value: 'dorm',
-    name: '宿舍相关',
-  }, {
-    value: 'food',
-    name: '美食地图',
-  }, {
-    value: 'club',
-    name: '社团相关',
-  }],
-}, {
-  value: 'study',
-  name: '学习篇',
-  secondary: [{
-    value: 'humanities',
-    name: '文科',
-  }, {
-    value: 'science',
-    name: '理科',
-  }, {
-    value: 'compulsories',
-    name: '主科（语数英）',
-  }],
-}, {
-  value: 'tips',
-  name: '小技巧篇',
-  secondary: [{
-    value: 'life',
-    name: '生活相关',
-  }, {
-    value: 'study',
-    name: '学习相关',
-  }],
-}, {
-  value: 'intl',
-  name: '国际体系篇',
-  secondary: [{
-    value: 'study',
-    name: '学习相关',
-  }],
-}];
+const form = useForm({ validationSchema: formSchema });
 
 const selectedPrimaryCategory = computed(
-  () => guideCategory.find(e => e.value === values.primaryCategory),
+  () => categoryMap.find(e => e.value === form.values.primaryCategory),
 );
-watch(selectedPrimaryCategory, () => setFieldValue('secondaryCategory', undefined, false));
+watch(selectedPrimaryCategory, () => form.setFieldValue('secondaryCategory', undefined, false));
+
+const onSubmit = form.handleSubmit(async (values) => {
+  try {
+    await $api.new.mutate(values);
+    form.resetForm();
+    toast({
+      title: '投稿成功！',
+      description: '等待管理员审核中~',
+    });
+    navigateTo('/');
+  } catch (err) {
 
-const onSubmit = handleSubmit((values) => {
-  // TODO
-  console.log(values);
+  }
 });
 </script>
 
diff --git a/server/api/trpc/[trpc].ts b/server/api/trpc/[trpc].ts
index cea772e..4d99ecb 100644
--- a/server/api/trpc/[trpc].ts
+++ b/server/api/trpc/[trpc].ts
@@ -3,24 +3,7 @@
  * On a bigger app, you will probably want to split this file up into multiple files.
  */
 import { createNuxtApiHandler } from 'trpc-nuxt';
-import { z } from 'zod';
-import { publicProcedure, router } from '~/server/trpc/trpc';
-
-export const appRouter = router({
-  hello: publicProcedure
-    // This is the input schema of your procedure
-    .input(
-      z.object({
-        text: z.string().nullish(),
-      }),
-    )
-    .query(({ input }) => {
-      // This is what you're returning to your client
-      return {
-        greeting: `hello ${input?.text ?? 'world'}`,
-      };
-    }),
-});
+import { appRouter } from '~/server/trpc/routers';
 
 // export only the type definition of the API
 // None of the actual implementation is exposed to the client
diff --git a/server/database/migrations/meta/0000_snapshot.json b/server/database/migrations/meta/0000_snapshot.json
index 0f5c9e1..8eb71f3 100644
--- a/server/database/migrations/meta/0000_snapshot.json
+++ b/server/database/migrations/meta/0000_snapshot.json
@@ -59,4 +59,4 @@
   "internal": {
     "indexes": {}
   }
-}
\ No newline at end of file
+}
diff --git a/server/database/migrations/meta/_journal.json b/server/database/migrations/meta/_journal.json
index 0dc7c0b..802d214 100644
--- a/server/database/migrations/meta/_journal.json
+++ b/server/database/migrations/meta/_journal.json
@@ -10,4 +10,4 @@
       "breakpoints": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/server/trpc/routers/index.ts b/server/trpc/routers/index.ts
index 82efe6d..42b53af 100644
--- a/server/trpc/routers/index.ts
+++ b/server/trpc/routers/index.ts
@@ -3,12 +3,10 @@ import { and, eq } from 'drizzle-orm';
 import { publicProcedure, router } from '../trpc';
 import { useDrizzle } from '~/server/utils/drizzle';
 import { guidebook } from '~/server/database/schema';
-
-const primaryCategorySchema = z.enum(['life', 'study', 'tips', 'intl']);
-const secondaryCategorySchema = z.enum(['library', 'activity', 'dorm', 'food', 'club', 'humanities', 'science', 'compulsories', 'life', 'study']);
+import { primaryCategorySchema, secondaryCategorySchema } from '~/constants';
 
 export const appRouter = router({
-  getReviewedGuide: publicProcedure
+  guide: publicProcedure
     .input(z.object({
       primaryCategory: primaryCategorySchema,
       secondaryCategory: secondaryCategorySchema,
@@ -18,12 +16,13 @@ export const appRouter = router({
         where: and(
           eq(guidebook.primaryCategory, input.primaryCategory),
           eq(guidebook.secondaryCategory, input.secondaryCategory),
-          eq(guidebook.isReviewed, true),
+          // --------------- TEST -vvvvv--------------
+          eq(guidebook.isReviewed, false),
         ),
       });
     }),
 
-  submitNewGuide: publicProcedure
+  new: publicProcedure
     .input(z.object({
       primaryCategory: primaryCategorySchema,
       secondaryCategory: secondaryCategorySchema,
diff --git a/types/index.ts b/types/index.ts
new file mode 100644
index 0000000..1935cb5
--- /dev/null
+++ b/types/index.ts
@@ -0,0 +1,30 @@
+import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server';
+import type { AppRouter } from '~/server/trpc/routers';
+
+export type RouterOutput = inferRouterOutputs<AppRouter>;
+export type RouterInput = inferRouterInputs<AppRouter>;
+
+export type TPrimaryCategory = 'life' | 'study' | 'intl' | 'tips';
+export type TSecondaryCategory =
+  'library' |
+  'activity' |
+  'dorm' |
+  'food' |
+  'club' |
+  'humanities' |
+  'science' |
+  'compulsories' |
+  'life' |
+  'study';
+
+export interface ICategory {
+  value: TPrimaryCategory;
+  name: string;
+  description: string;
+  icon: string;
+  to: string;
+  secondary: Array<{
+    value: TSecondaryCategory;
+    name: string;
+  }>;
+};