diff --git a/package.json b/package.json
index 55716a9..fe80bb2 100644
--- a/package.json
+++ b/package.json
@@ -28,9 +28,11 @@
   },
   "dependencies": {
     "axios": "^1.7.7",
+    "clsx": "^2.1.1",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "pinia": "^2.2.5",
+    "tailwind-merge": "^2.5.4",
     "vant": "^4.9.8",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f4f8ff5..d16ed81 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       axios:
         specifier: ^1.7.7
         version: 1.7.7
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       normalize.css:
         specifier: ^8.0.1
         version: 8.0.1
@@ -20,6 +23,9 @@ importers:
       pinia:
         specifier: ^2.2.5
         version: 2.2.5(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))
+      tailwind-merge:
+        specifier: ^2.5.4
+        version: 2.5.4
       vant:
         specifier: ^4.9.8
         version: 4.9.8(vue@3.5.12(typescript@5.6.3))
@@ -1213,6 +1219,10 @@ packages:
     resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
     engines: {node: '>=0.8'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   cnjm-postcss-px-to-viewport@1.0.1:
     resolution: {integrity: sha512-0Gi8ECxoHZygnC9IS3J3IbNwP16CdZiS1Sj6JT6Di2qnduz3eNIfZ/zXVSqia5Kw85a4PAUXmOqTQmQY0UYYMQ==}
     peerDependencies:
@@ -3355,6 +3365,9 @@ packages:
     resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  tailwind-merge@2.5.4:
+    resolution: {integrity: sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==}
+
   tailwindcss@3.4.14:
     resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==}
     engines: {node: '>=14.0.0'}
@@ -4888,6 +4901,8 @@ snapshots:
 
   clone@2.1.2: {}
 
+  clsx@2.1.1: {}
+
   cnjm-postcss-px-to-viewport@1.0.1(postcss@8.4.47):
     dependencies:
       object-assign: 4.1.1
@@ -7203,6 +7218,8 @@ snapshots:
       '@pkgr/core': 0.1.1
       tslib: 2.8.1
 
+  tailwind-merge@2.5.4: {}
+
   tailwindcss@3.4.14:
     dependencies:
       '@alloc/quick-lru': 5.2.0
diff --git a/src/components/DotPattern/DotPatternLinearGradient.vue b/src/components/DotPattern/DotPatternLinearGradient.vue
new file mode 100644
index 0000000..f8f9e89
--- /dev/null
+++ b/src/components/DotPattern/DotPatternLinearGradient.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from "@/utils/class-names";
+import DotPattern from "./index.vue";
+
+defineOptions({
+  name: "DotPatternLinearGradient"
+});
+</script>
+
+<template>
+  <div
+    class="absolute flex size-full items-center justify-center overflow-hidden h-[300px] w-[300px] md:w-[600px] lg:w-[850px]"
+  >
+    <DotPattern
+      :width="18"
+      :height="18"
+      :cx="1"
+      :cy="1"
+      :cr="1"
+      :class="
+        cn(
+          '[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)]'
+        )
+      "
+    />
+  </div>
+</template>
diff --git a/src/components/DotPattern/index.vue b/src/components/DotPattern/index.vue
new file mode 100644
index 0000000..81664b0
--- /dev/null
+++ b/src/components/DotPattern/index.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useId } from "@/hooks/useId";
+
+defineOptions({
+  name: "DotPattern"
+});
+
+interface DotPatternProps {
+  width?: number;
+  height?: number;
+  x?: number;
+  y?: number;
+  cx?: number;
+  cy?: number;
+  cr?: number;
+  userSpaceOnUse?: string;
+}
+const props = withDefaults(defineProps<DotPatternProps>(), {
+  width: 16,
+  height: 16,
+  x: 0,
+  y: 0,
+  cx: 1,
+  cy: 1,
+  cr: 1,
+  userSpaceOnUse: "userSpaceOnUse"
+});
+const id = `pattern-${useId()}`;
+</script>
+
+<template>
+  <svg
+    aria-hidden="true"
+    class="pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80"
+    v-bind="$attrs"
+  >
+    <defs>
+      <pattern
+        :id="id"
+        :width="props.width"
+        :height="props.height"
+        :patternUnits="props.userSpaceOnUse"
+        :patternContentUnits="props.userSpaceOnUse"
+        :x="props.x"
+        :y="props.y"
+      >
+        <circle
+          id="pattern-circle"
+          :cx="props.cx"
+          :cy="props.cy"
+          :r="props.cr"
+        />
+      </pattern>
+    </defs>
+    <rect width="100%" height="100%" strokeWidth="0" :fill="`url(#${id})`" />
+  </svg>
+</template>
diff --git a/src/components/GridPattern/GridPatternDashed.vue b/src/components/GridPattern/GridPatternDashed.vue
new file mode 100644
index 0000000..2d415fa
--- /dev/null
+++ b/src/components/GridPattern/GridPatternDashed.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from "@/utils/class-names";
+import GridPattern from "./index.vue";
+
+defineOptions({
+  name: "GridPatternDashed"
+});
+</script>
+
+<template>
+  <div
+    class="absolute -z-10 flex size-full items-center justify-center overflow-hidden bg-background p-20 md:shadow-xl"
+  >
+    <GridPattern
+      :width="20"
+      :height="20"
+      :x="-1"
+      :y="-1"
+      stroke-dasharray="4 2"
+      :class="
+        cn(
+          '[mask-image:radial-gradient(260px_circle_at_top,white,transparent)]'
+        )
+      "
+    />
+  </div>
+</template>
diff --git a/src/components/GridPattern/GridPatternLinearGradient.vue b/src/components/GridPattern/GridPatternLinearGradient.vue
new file mode 100644
index 0000000..f35f9a8
--- /dev/null
+++ b/src/components/GridPattern/GridPatternLinearGradient.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { cn } from "@/utils/class-names";
+import GridPattern from "./index.vue";
+
+defineOptions({
+  name: "GridPatternLinearGradient"
+});
+</script>
+
+<template>
+  <div
+    class="absolute flex size-full items-center justify-center overflow-hidden bg-background p-20 md:shadow-xl"
+  >
+    <GridPattern
+      :width="18"
+      :height="18"
+      :x="-1"
+      :y="-1"
+      :class="
+        cn(
+          '[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)]'
+        )
+      "
+    />
+  </div>
+</template>
diff --git a/src/components/GridPattern/index.vue b/src/components/GridPattern/index.vue
new file mode 100644
index 0000000..5a6de0b
--- /dev/null
+++ b/src/components/GridPattern/index.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useId } from "@/hooks/useId";
+
+defineOptions({
+  name: "GridPattern"
+});
+
+interface GridPatternProps {
+  width?: number;
+  height?: number;
+  x?: number;
+  y?: number;
+  squares?: Array<[x: number, y: number]> | null;
+  strokeDasharray?: string;
+}
+const props = withDefaults(defineProps<GridPatternProps>(), {
+  width: 40,
+  height: 40,
+  x: -1,
+  y: -1,
+  squares: null,
+  strokeDasharray: "0"
+});
+
+const id = `pattern-${useId()}`;
+</script>
+
+<template>
+  <svg
+    aria-hidden="true"
+    class="pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30"
+    v-bind="$attrs"
+  >
+    <defs>
+      <pattern
+        :id="id"
+        :width="props.width"
+        :height="props.height"
+        patternUnits="userSpaceOnUse"
+        :x="props.x"
+        :y="props.y"
+      >
+        <path
+          :d="`M.5 ${props.height}V.5H${props.width}`"
+          fill="none"
+          :stroke-dasharray="props.strokeDasharray"
+        />
+      </pattern>
+    </defs>
+    <rect width="100%" height="100%" :stroke-width="0" :fill="`url(#${id})`" />
+    <svg
+      v-if="props.squares"
+      :x="props.x"
+      :y="props.y"
+      class="overflow-visible"
+    >
+      <rect
+        v-for="[squareX, squareY] in props.squares"
+        :key="`${squareX}-${squareY}`"
+        :stroke-width="0"
+        :width="props.width - 1"
+        :height="props.height - 1"
+        :x="squareX * props.width + 1"
+        :y="squareY * props.height + 1"
+      />
+    </svg>
+  </svg>
+</template>
diff --git a/src/hooks/useId.ts b/src/hooks/useId.ts
new file mode 100644
index 0000000..61d69e7
--- /dev/null
+++ b/src/hooks/useId.ts
@@ -0,0 +1,4 @@
+let id = 0;
+export function useId() {
+  return `${id++}`;
+}
diff --git a/src/styles/variables.less b/src/styles/variables.less
index ce2bb0a..8723a83 100644
--- a/src/styles/variables.less
+++ b/src/styles/variables.less
@@ -1,11 +1,13 @@
 :root {
   --color-text: var(--van-text-color, #323233);
-  --color-background-2: var(--van-background-2, #fff);
-  --color-block-background: var(--van-border-color, #ebedf0);
+  --color-background-2: #fafafa;
+  --color-block-background: #ffffff;
+  --color-border: var(--van-border-color, #ebedf0);
 }
 
 html.dark {
   --color-text: var(--van-text-color, #f5f5f5);
   --color-background-2: var(--van-background-2, #1c1c1e);
   --color-block-background: var(--van-border-color, #3a3a3c);
+  --color-border: var(--van-border-color, #3a3a3c);
 }
diff --git a/src/utils/class-names.ts b/src/utils/class-names.ts
new file mode 100644
index 0000000..8098975
--- /dev/null
+++ b/src/utils/class-names.ts
@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// Merge class
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/views/demo/index.vue b/src/views/demo/index.vue
index e2c8876..0d905bd 100644
--- a/src/views/demo/index.vue
+++ b/src/views/demo/index.vue
@@ -1,58 +1,71 @@
 <script setup lang="ts">
 import { reactive } from "vue";
+import GridPatternDashed from "@/components/GridPattern/GridPatternDashed.vue";
 
 defineOptions({
   name: "Demo"
 });
 
 const contentList = reactive([
-  "✔ ⚡ Vue3 + Vite5",
-  "✔ 🍕 TypeScript",
-  "✔ ✨ Vant4 组件库",
-  "✔ 🌀 Tailwindcss 原子类框架",
-  "✔ 👏 集成多种图标方案",
-  "✔ 🍍 Pinia 状态管理",
-  "✔ 🌓 支持深色模式",
-  "✔ Vue-router 4",
-  "✔ vmin 视口适配",
-  "✔ Axios 封装",
-  "✔ 打包资源 gzip 压缩",
-  "✔ 开发环境支持 Mock 数据",
-  "✔ ESLint",
-  "✔ 首屏加载动画",
-  "✔ 开发环境调试面板"
+  { text: "⚡ Vue3 + Vite5", fullWidth: false },
+  { text: "🍕 TypeScript", fullWidth: false },
+  { text: "✨ Vant4 组件库", fullWidth: false },
+  { text: "🍍 Pinia 状态管理", fullWidth: false },
+  { text: "🌀 Tailwindcss 原子类框架", fullWidth: true },
+  { text: "🗺️ Vue-router 4", fullWidth: false },
+  { text: "👏 集成多种图标方案", fullWidth: false },
+  { text: "🔧 集成 ESLint", fullWidth: false },
+  { text: "🌓 支持深色模式", fullWidth: false },
+  { text: "📏 vmin 视口适配", fullWidth: false },
+  { text: "📡 Axios 封装", fullWidth: false },
+  { text: "📦 打包资源 gzip 压缩", fullWidth: false },
+  { text: "🛠️ 开发 Mock 数据", fullWidth: false },
+  { text: "🚀 首屏加载动画", fullWidth: false },
+  { text: "🔍 开发环境调试面板", fullWidth: false }
 ]);
 </script>
 
 <template>
+  <GridPatternDashed />
   <div class="demo-content px-[12px]">
     <img
-      class="block w-[120px] mx-auto mb-[20px] pt-[30px]"
+      class="block w-[120px] mx-auto mb-[30px] pt-[40px]"
       alt="Vue logo"
       src="~@/assets/logo_melomini.png"
     />
-    <div class="pl-[12px] border-l-[3px] border-[color:#41b883]">
-      <a
-        class="flex items-center"
-        href="https://github.com/yulimchen/vue3-h5-template"
-        target="_blank"
-      >
-        <svg-icon class="text-[20px] mr-[8px]" name="github" />
-        <h3 class="font-bold text-[18px] my-[4px]">Vue3-h5-template</h3>
-        <svg-icon class="text-[12px] ml-[5px]" name="link" />
-      </a>
-    </div>
     <div
-      class="text-[14px] py-[2px] px-[10px] rounded-[4px] bg-[var(--color-block-background)] mt-[14px]"
+      class="text-[14px] py-[12px] px-[20px] rounded-[12px] bg-[var(--color-block-background)] mt-[14px]"
     >
-      <p class="my-[14px] leading-[24px]">
+      <div>
+        <a
+          class="flex items-center"
+          href="https://github.com/yulimchen/vue3-h5-template"
+          target="_blank"
+        >
+          <svg-icon class="text-[20px] mr-[8px]" name="github" />
+          <h3 class="font-bold text-[18px] my-[4px]">Vue3-h5-template</h3>
+          <svg-icon class="text-[12px] ml-[5px]" name="link" />
+        </a>
+      </div>
+      <p class="leading-[24px] my-[6px]">
         🌱 基于 Vue3 全家桶、TypeScript、Vite 构建工具，开箱即用的 H5
         移动端项目基础模板
       </p>
     </div>
 
-    <div class="demo-main">
-      <van-cell v-for="(item, idx) in contentList" :key="idx" :title="item" />
+    <div
+      class="mt-[16px] pb-[24px] grid grid-cols-2 gap-[12px] text-[14px] text-center"
+    >
+      <div
+        v-for="item in contentList"
+        :key="item.text"
+        :class="[
+          'truncate p-[12px] rounded-[12px] border border-[var(--color-border)]',
+          item.fullWidth ? 'col-span-2' : ''
+        ]"
+      >
+        {{ item.text }}
+      </div>
     </div>
   </div>
 </template>