新增操作引导步骤及相关配图；调整全局文字颜色变量

src/app/admin/(dashboard)/page.tsx

@@ -43,6 +43,7 @@ export default async function DashboardPage(props: DashboardPageProps) {
           </div>
         </CardContent>
       </Card>
+
       {/* 长效 */}
       <Card className={`col-start-2 row-start-2`}>
         <CardHeader>

src/app/admin/identify/page.tsx

@@ -1,7 +1,5 @@
 'use client'
 import {Button} from '@/components/ui/button'
-import banner from './_assets/banner.webp'
-import personal from './_assets/personal.webp'
 import Image from 'next/image'
 import Page from '@/components/page'
 import {Dialog, DialogContent, DialogFooter, DialogTitle, DialogTrigger} from '@/components/ui/dialog'
@@ -11,9 +9,15 @@ import zod from 'zod'
 import {zodResolver} from '@hookform/resolvers/zod'
 import {Identify} from '@/actions/user'
 import {toast} from 'sonner'
-import {useContext, useEffect, useRef, useState} from 'react'
+import {useEffect, useRef, useState} from 'react'
 import * as qrcode from 'qrcode'
-import {StoreContext, useProfileStore} from '@/components/providers/StoreProvider'
+import {useProfileStore} from '@/components/providers/StoreProvider'
+import {merge} from '@/lib/utils'
+import banner from './_assets/banner.webp'
+import personal from './_assets/personal.webp'
+import step1 from './_assets/step1.webp'
+import step2 from './_assets/step2.webp'
+import step3 from './_assets/step3.webp'
 
 export type IdentifyPageProps = {}
 
@@ -98,7 +102,7 @@ export default function IdentifyPage(props: IdentifyPageProps) {
   // ======================
 
   return (
-    <Page>
+    <Page className={`flex-row`}>
       <div className={`flex-3/4 flex flex-col bg-white rounded-lg overflow-hidden gap-16`}>
 
         {/* banner */}
@@ -176,9 +180,44 @@ export default function IdentifyPage(props: IdentifyPageProps) {
         </div>
       </div>
 
-      <section className={`flex-1/4 flex flex-col bg-white rounded-lg`}>
-        <h3>操作引导</h3>
-        <p>为响应国家相关规定，使用HTTP代理需完成实名认证。认证服务由支付宝提供，您的个人信息将受到严格保护，仅用于账户安全认证</p>
+      <section className={`flex-none basis-80 flex flex-col bg-white rounded-lg p-4 gap-6`}>
+        <h3 className={`text-xl font-medium`}>操作引导</h3>
+        <p className={`text-sm text-weak`}>为响应国家相关规定，使用HTTP代理需完成实名认证。认证服务由支付宝提供，您的个人信息将受到严格保护，仅用于账户安全认证</p>
+        <div className={`flex flex-col`}>
+          <p className={`flex gap-2 items-center justify-between w-56 self-center`}>
+            <div className={`flex gap-2`}>
+              <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>01</span>
+              <span>注册账号</span>
+            </div>
+            <Image alt={`步骤配图`} src={step1} aria-hidden/>
+          </p>
+          <div className={`h-16 w-56 px-4 flex self-center`}>
+            <div className={merge(
+              `w-0 h-full border-x border-primary border-dashed relative`,
+              `after:absolute after:-left-[3px] after:bottom-0 after:w-[6px] after:h-[6px] after:rounded-full after:bg-primary`,
+            )}></div>
+          </div>
+          <p className={`flex gap-2 items-center justify-between w-56 self-center`}>
+            <div className={`flex gap-2`}>
+              <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>02</span>
+              <span>实名认证</span>
+            </div>
+            <Image alt={`步骤配图`} src={step2} aria-hidden/>
+          </p>
+          <div className={`h-16 w-56 px-4 flex self-center`}>
+            <div className={merge(
+              `w-0 h-full border-x border-primary border-dashed relative`,
+              `after:absolute after:-left-[3px] after:bottom-0 after:w-[6px] after:h-[6px] after:rounded-full after:bg-primary`,
+            )}></div>
+          </div>
+          <p className={`flex gap-2 items-center justify-between w-56 self-center`}>
+            <div className={`flex gap-2`}>
+              <span className={`bg-primary/25 text-primary w-8 h-8 rounded-full flex items-center justify-center`}>03</span>
+              <span>充值、支付</span>
+            </div>
+            <Image alt={`步骤配图`} src={step3} aria-hidden/>
+          </p>
+        </div>
       </section>
     </Page>
   )

src/app/globals.css

@@ -6,12 +6,12 @@
   --idle: oklch(1 0 0);
   --idle-muted: oklch(0.965 0 0);
   --idle-text: oklch(0.25 0 0);
-  --idle-desc: oklch(0.5 0 0);
+  --idle-desc: oklch(0.65 0 0);
 
   --primary: oklch(0.65 0.16 265);
   --primary-muted: oklch(0.965 0.024 265);
   --primary-text: oklch(1 0 0);
-  --primary-desc: oklch(0.5 0 0);
+  --primary-desc: oklch(0.65 0 0);
 
   --secondary: oklch(0.965 0 0);
   --secondary-text: oklch(0.25 0 0);