调整支付页面样式；移除 mdx 测试页面

README.md

@@ -1,5 +1,7 @@
 ## TODO
 
+window.matchMedia 问题，需要其他方式在布局绘制前得到屏幕宽度
+
 手机端支付页面样式调整为类似电商的底部支付栏
 
 MDX code 块语法高亮

src/app/(auth)/login/page.tsx

@@ -28,6 +28,7 @@ import {Label} from '@/components/ui/label'
 import logo from '@/assets/logo.webp'
 import bg from './_assets/bg.webp'
 import {useProfileStore} from '@/components/providers/StoreProvider'
+import Link from 'next/link'
 
 export type LoginPageProps = {}
 
@@ -207,7 +208,9 @@ export default function LoginPage(props: LoginPageProps) {
     )}>
       <Image src={bg} alt="背景图" fill priority className="absolute -z-10 object-cover"/>
 
-      <Image src={logo} alt="logo" priority height={64} className="absolute top-8 left-8"/>
+      <Link href="/">
+        <Image src={logo} alt="logo" priority height={64} className="absolute top-8 left-8"/>
+      </Link>
 
       {/* 登录表单 */}
       <Card className="w-96 mx-4 shadow-lg">

src/app/admin/_client/layout.tsx

@@ -2,7 +2,6 @@
 import {ReactNode} from 'react'
 import {useLayoutStore} from '@/components/providers/StoreProvider'
 import {merge} from '@/lib/utils'
-import {Slot} from '@radix-ui/react-slot'
 
 type AdminLayoutProps = {
   navbar: ReactNode
@@ -71,8 +70,8 @@ export default function Layout(props: AdminLayoutProps) {
           `transition-[margin] duration-300 ease-in-out`,
           `absolute inset-0 overflow-hidden`,
           `mt-[64px]`,
-          `md:data-[expand=true]:ml-[200px]`,
-          `md:data-[expand=false]:ml-[64px]`,
+          `md:ml-[64px]`,
+          `lg:data-[expand=true]:ml-[200px]`,
         )}>
         {props.content}
       </div>

src/app/test/page.tsx

@@ -1,10 +0,0 @@
-import Qqwwee from '@/components/docs/qqwwee.mdx'
-import Markdown from '@/components/markdown'
-
-export default async function TestPage() {
-  return (
-    <Markdown>
-      <Qqwwee/>
-    </Markdown>
-  )
-}

src/components/composites/purchase/index.tsx

@@ -10,7 +10,7 @@ export default async function Purchase(props: PurchaseProps) {
   return (
     <div className="flex flex-col gap-4">
       <Tabs defaultValue="short" className="gap-4">
-        <TabsList className="w-full p-2 bg-white rounded-lg justify-center">
+        <TabsList className="w-full p-2 bg-white rounded-lg justify-start md:justify-center overflow-auto">
           <Tab value="short">短效动态</Tab>
           <Tab value="long">长效静态</Tab>
           <Tab value="fixed">固定套餐</Tab>

src/components/composites/purchase/long/center.tsx

@@ -58,7 +58,7 @@ export default function Center() {
             id={id}
             defaultValue={field.value}
             onValueChange={field.onChange}
-            className="flex gap-4 flex-wrap">
+            className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-4">
 
             <FormOption id={`${id}-1`} value="1" label="1 小时" description="￥0.3/IP" compare={field.value}/>
             <FormOption id={`${id}-4`} value="4" label="4 小时" description="￥0.8/IP" compare={field.value}/>

src/components/composites/purchase/nav.tsx

@@ -1,26 +0,0 @@
-'use client'
-import {ReactNode, useState} from 'react'
-
-export type NavProps = {
-}
-
-export default function Nav(props: NavProps) {
-  const [type, setType] = useState()
-
-  return (
-    <ul role="tablist" className="flex justify-center items-stretch bg-white rounded-lg">
-      <li role="tab">
-        <button className="h-14 px-8 text-lg">短效动态套餐</button>
-      </li>
-      <li role="tab">
-        <button className="h-14 px-8 text-lg">长效静态套餐</button>
-      </li>
-      <li role="tab">
-        <button className="h-14 px-8 text-lg">固定套餐</button>
-      </li>
-      <li role="tab">
-        <button className="h-14 px-8 text-lg">定制套餐</button>
-      </li>
-    </ul>
-  )
-}

src/components/composites/purchase/short/center.tsx

@@ -58,7 +58,7 @@ export default function Center() {
             id={id}
             defaultValue={field.value}
             onValueChange={field.onChange}
-            className="flex gap-4 flex-wrap">
+            className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-4">
 
             <FormOption id={`${id}-3`} value="180" label="3 分钟" description="￥0.005/IP" compare={field.value}/>
             <FormOption id={`${id}-5`} value="300" label="5 分钟" description="￥0.01/IP" compare={field.value}/>

src/components/docs/qqwwee.mdx

@@ -1,28 +0,0 @@
-import {Button} from '@/components/ui/button';
-
-# qweqwe
-
-`dasdasd`
-
-```typescript
-console.log('Hello, world!');
-```
-
-## awdasdasd
-
-### zxczxczxc
-
-afsdfasf
-
-- qweqwe
-- awdasdasd
-- zxczxc
-
-- [ ] asd
-
-| qwe | asd | zxc |
-| --- | --- | --- |
-| 111 | 222 | 333 |
-
-<Button>哈哈</Button>
-

src/components/providers/StoreProvider.tsx

@@ -28,7 +28,8 @@ export default function StoreProvider(props: ProfileProviderProps) {
   const layout = useRef<StoreApi<LayoutStore>>(null)
   if (!layout.current) {
     console.log('📦 create layout store')
-    layout.current = createLayoutStore(window.matchMedia(`(min-width: 1024px)`).matches)
+    const expand = window ? window.matchMedia(`(min-width: 1024px)`).matches : true
+    layout.current = createLayoutStore(expand)
   }
 
   return (