refactor(demo): 调整 demo 页面样式

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"

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>

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>

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>

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>

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>

src/hooks/useId.ts

@@ -0,0 +1,4 @@
+let id = 0;
+export function useId() {
+  return `${id++}`;
+}

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

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