feat: add CyberpunkCordon component

Author: imba97

docs/.vitepress/config/locales/zh.ts

@@ -86,7 +86,11 @@ function sidebarComponents(): DefaultTheme.SidebarItem[] {
           link: '/components/cyberpunk-glitch'
         },
         {
-          text: '流光灯效果',
+          text: '赛博朋克警戒线',
+          link: '/components/cyberpunk-cordon'
+        },
+        {
+          text: '流光灯',
           link: '/components/flowing-light'
         }
       ]

docs/components/cyberpunk-cordon.md

@@ -0,0 +1,21 @@
+# IxCyberpunkCordon
+
+赛博朋克警戒线组件
+
+## 基本
+
+<div py-4 rounded-md bg-slate-950>
+  <IxCyberpunkCordon>
+    <div text-8 font-bold>POLICE</div>
+  </IxCyberpunkCordon>
+</div>
+
+```vue
+<template>
+  <IxCyberpunkCordon>
+    <div text-8 font-bold>
+      POLICE
+    </div>
+  </IxCyberpunkCordon>
+</template>
+```

packages/components/src/components/CyberpunkCordon/index.ts

@@ -0,0 +1 @@
+export { default as IxCyberpunkCordon } from './src/index.vue'

packages/components/src/components/CyberpunkCordon/src/index.vue

@@ -0,0 +1,45 @@
+<style lang="scss" scoped>
+.marquee {
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+  display: inline-block;
+  padding-left: 100%;
+  animation: marquee 10s linear infinite;
+}
+
+.cyberpunk-cordon {
+  .mask {
+    mask: radial-gradient(#000, transparent) repeat 0 0 / 4px 4px;
+  }
+}
+
+@keyframes marquee {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(-100%, 0);
+  }
+}
+</style>
+
+<template>
+  <div pr w-full class="cyberpunk-cordon">
+    <div class="mask" :class="props.bgClass">
+      <div class="marquee" pt="1.5" leading-none blur-1>
+        <slot />
+      </div>
+    </div>
+    <div pa top-0 right-0 bottom-0 left-0 op-50 blur-md :class="props.bgClass" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(defineProps < {
+  bgClass?: string
+} > (), {
+  bgClass: 'bg-amber'
+})
+</script>

packages/components/src/index.ts

@@ -1,5 +1,6 @@
 import 'virtual:uno.css'
 
+export * from './components/CyberpunkCordon'
 export * from './components/CyberpunkGlitch'
 export * from './components/FlowingLight'
 export * from './components/IconText'