feat: page content

Signed-off-by: ZTL-UwU <[email protected]>

app.vue

@@ -1,4 +1,5 @@
 <template>
+  <Toaster />
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>

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;
 }

components/PageTitle.vue

@@ -1,17 +1,23 @@
 <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>
 
 <script setup lang="ts">
 defineProps<{
   title: string;
   description: string;
+  newButton: boolean;
 }>();
 </script>

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>

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>

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>

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>

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>

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>

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>

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>

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;
+}