feat: add ripple directive example

apps/admin/src/locales/en.json

@@ -12,7 +12,8 @@
     "directives": {
       "directives": "Directive Examples",
       "permission": "Permission Directive",
-      "copy": "Copy Directive"
+      "copy": "Copy Directive",
+      "ripple": "Ripple Directive"
     },
     "iframe": {
       "iframe": "Embedded Webpage",
@@ -110,6 +111,12 @@
       "copySuccess": "Copy successful",
       "copyError": "Copy failed"
     },
+    "rippleDirective": {
+      "ripple": "Ripple",
+      "rippleDirective": "Ripple Directive Example",
+      "description1": "Ripples are state layers used to communicate the status of a component or interactive element.",
+      "description2": "A state layer is a semi-transparent covering on an element that indicates its state."
+    },
     "permission": {
       "permissionMode": {
         "currentMode": "Current Permission Mode",

apps/admin/src/locales/zh.json

@@ -12,7 +12,8 @@
     "directives": {
       "directives": "指令示例",
       "permission": "权限指令",
-      "copy": "复制指令"
+      "copy": "复制指令",
+      "ripple": "涟漪指令"
     },
     "iframe": {
       "iframe": "内嵌网页",
@@ -110,6 +111,12 @@
       "copySuccess": "复制成功",
       "copyError": "复制失败"
     },
+    "rippleDirective": {
+      "ripple": "涟漪",
+      "rippleDirective": "涟漪指令示例",
+      "description1": "涟漪是用于传达组件或交互元素状态的状态图层。",
+      "description2": "状态图层是放置在元素上的半透明覆盖层，用于指示其状态。"
+    },
     "permission": {
       "permissionMode": {
         "currentMode": "当前权限模式",

apps/admin/src/pages/directives/ripple/index.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import HeroImg from "./images/ripple/hero.gif";
+
+defineOptions({
+  name: "Ripple",
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="h-full flex flex-row space-x-2xl">
+    <NCard v-ripple class="bg-primary">
+      <div class="space-y-3xl text-white text-chinese">
+        <h1 class="text-7xl">
+          {{ t("page.rippleDirective.ripple") }}
+        </h1>
+        <p class="text-xl">
+          {{ t("page.rippleDirective.description1") }}
+        </p>
+        <p class="text-xl">
+          {{ t("page.rippleDirective.description2") }}
+        </p>
+      </div>
+    </NCard>
+    <img
+      :src="HeroImg"
+      class="rounded-2xl object-cover min-h-[56px]"
+      alt="Two containers that display a bounded and unbounded ripple on interaction."
+      title="A bounded and unbounded ripple."
+    >
+  </div>
+</template>
+
+<style scoped>
+
+</style>

apps/admin/src/router/routes/modules/directives.ts

@@ -12,6 +12,15 @@ const directive: RouteRecordRaw = {
     icon: "i-mingcute-plugin-2-line",
   },
   children: [
+    {
+      path: "ripple",
+      name: "Ripple",
+      component: () => import("~/pages/directives/ripple/index.vue"),
+      meta: {
+        title: "routes.directives.ripple",
+        icon: "i-material-symbols-ripples",
+      },
+    },
     {
       path: "copy",
       name: "Copy",