@qilitt-mickey/vue3-temp-skill 1.1.74 → 1.1.76

package/references/feedback-ui.md

@@ -1,134 +1,134 @@
----
-name: feedback-ui
-description: ReNoticeBar、水印、时间轴、打字机等展示类反馈组件
-scope: project
-tags: [通知栏, 水印, 时间轴, 打字机, 展示组件, 空状态, empty]
----
-
-# 展示类反馈组件
-
-> 按本文件示例编写，复用项目已有反馈类组件与 Hook，勿另起一套展示实现。
-
-规范通知栏、水印、时间轴、闪烁点、打字机动画等展示类反馈组件的使用。在需要信息展示、氛围效果时参照。
-
-## 依赖（缺则先装）
-
-多数组件为项目自研，无额外包。打字机需要：
-
-| 包 | 版本 | 用途 |
-|---|---|---|
-| `typeit` | `8.8.7` | `ReTypeit` |
-
-```bash
-pnpm add typeit@8.8.7
-```
-
-装包后按 **`addon-enable.md` 章节 G** 移除 `ReTypeit/**` exclude。
-
-## ReNoticeBar 通知栏
-
-```vue
-<script setup lang="ts">
-const NoticeBar = defineAsyncComponent(
-  () => import("@/components/ReNoticeBar"),
-);
-</script>
-
-<template>
-  <NoticeBar text="系统将于今晚 22:00 进行维护" />
-
-  <NoticeBar
-    text="系统将于今晚 22:00 进行维护"
-    left-icon="notice"
-    right-icon="arrowRight"
-    background="var(--el-color-primary-light-9)"
-    color="var(--el-color-primary)"
-  />
-</template>
-```
-
-## Watermark 水印
-
-使用 `@pureadmin/utils` 的 `useWatermark`。
-
-```vue
-<script setup lang="ts">
-import { useWatermark } from "@pureadmin/utils";
-
-const { setWatermark, clear } = useWatermark();
-const appMain: Ref = inject("appMain");
-const { setWatermark: setLocalWatermark, clear: clearLocal } =
-  useWatermark(appMain);
-</script>
-
-<template>
-  <el-button
-    @click="setWatermark('水印测试、多行测试', { rotate: -20, lineHeight: 20 })"
-  >
-    整页水印
-  </el-button>
-  <el-button @click="clear">清除整页水印</el-button>
-  <el-button @click="setLocalWatermark('局部水印')">局部水印</el-button>
-</template>
-```
-
-- 不传容器则铺满整个页面。
-- 传入容器 DOM 则只在该容器内绘制水印。
-
-## ReTimeLine 时间轴
-
-```vue
-<script setup lang="ts">
-import { ReTimeLine } from "@/components/ReTimeLine";
-
-const items = ref([
-  { title: "立项", date: "2024-01-01", imgUrl: "/test.png" },
-  { title: "开发", date: "2024-03-01", imgUrl: "/test.png" },
-]);
-</script>
-
-<template>
-  <ReTimeLine :items="items" />
-</template>
-```
-
-## ReFlicker 闪烁点
-
-```vue
-<script setup lang="ts">
-import { useRenderFlicker } from "@/components/ReFlicker";
-
-const Flicker = useRenderFlicker({
-  width: "12px",
-  height: "12px",
-  background: "var(--el-color-success)",
-  borderRadius: "50%",
-  scale: 2,
-});
-</script>
-
-<template>
-  <Flicker />
-</template>
-```
-
-## ReTypeit 打字机动画
-
-```vue
-<script setup lang="ts">
-import TypeIt from "@/components/ReTypeit";
-</script>
-
-<template>
-  <TypeIt :options="{ speed: 100, loop: true }">
-    <span class="type-it">Hello World</span>
-  </TypeIt>
-</template>
-```
-
-## 关键约定
-
-1. 通知栏长文本自动滚动；搭配 `el-carousel` 可实现垂直轮播。
-2. 水印在页面切换或登录态变化时应重新设置，避免被移除。
-3. `ReTimeLine` 数据项至少包含 `title` 与 `date`。
-4. `ReFlicker` 通过 `useRenderFlicker` 返回组件，适合状态指示。
+---
+name: feedback-ui
+description: ReNoticeBar、水印、时间轴、打字机等展示类反馈组件
+scope: project
+tags: [通知栏, 水印, 时间轴, 打字机, 展示组件, 空状态, empty]
+---
+
+# 展示类反馈组件
+
+> 按本文件示例编写，复用项目已有反馈类组件与 Hook，勿另起一套展示实现。
+
+规范通知栏、水印、时间轴、闪烁点、打字机动画等展示类反馈组件的使用。在需要信息展示、氛围效果时参照。
+
+## 依赖（缺则先装）
+
+多数组件为项目自研，无额外包。打字机需要：
+
+| 包 | 版本 | 用途 |
+|---|---|---|
+| `typeit` | `8.8.7` | `ReTypeit` |
+
+```bash
+pnpm add typeit@8.8.7
+```
+
+装包后按 **`addon-enable.md` 章节 G** 移除 `ReTypeit/**` exclude。
+
+## ReNoticeBar 通知栏
+
+```vue
+<script setup lang="ts">
+const NoticeBar = defineAsyncComponent(
+  () => import("@/components/ReNoticeBar"),
+);
+</script>
+
+<template>
+  <NoticeBar text="系统将于今晚 22:00 进行维护" />
+
+  <NoticeBar
+    text="系统将于今晚 22:00 进行维护"
+    left-icon="notice"
+    right-icon="arrowRight"
+    background="var(--el-color-primary-light-9)"
+    color="var(--el-color-primary)"
+  />
+</template>
+```
+
+## Watermark 水印
+
+使用 `@pureadmin/utils` 的 `useWatermark`。
+
+```vue
+<script setup lang="ts">
+import { useWatermark } from "@pureadmin/utils";
+
+const { setWatermark, clear } = useWatermark();
+const appMain: Ref = inject("appMain");
+const { setWatermark: setLocalWatermark, clear: clearLocal } =
+  useWatermark(appMain);
+</script>
+
+<template>
+  <el-button
+    @click="setWatermark('水印测试、多行测试', { rotate: -20, lineHeight: 20 })"
+  >
+    整页水印
+  </el-button>
+  <el-button @click="clear">清除整页水印</el-button>
+  <el-button @click="setLocalWatermark('局部水印')">局部水印</el-button>
+</template>
+```
+
+- 不传容器则铺满整个页面。
+- 传入容器 DOM 则只在该容器内绘制水印。
+
+## ReTimeLine 时间轴
+
+```vue
+<script setup lang="ts">
+import { ReTimeLine } from "@/components/ReTimeLine";
+
+const items = ref([
+  { title: "立项", date: "2024-01-01", imgUrl: "/test.png" },
+  { title: "开发", date: "2024-03-01", imgUrl: "/test.png" },
+]);
+</script>
+
+<template>
+  <ReTimeLine :items="items" />
+</template>
+```
+
+## ReFlicker 闪烁点
+
+```vue
+<script setup lang="ts">
+import { useRenderFlicker } from "@/components/ReFlicker";
+
+const Flicker = useRenderFlicker({
+  width: "12px",
+  height: "12px",
+  background: "var(--el-color-success)",
+  borderRadius: "50%",
+  scale: 2,
+});
+</script>
+
+<template>
+  <Flicker />
+</template>
+```
+
+## ReTypeit 打字机动画
+
+```vue
+<script setup lang="ts">
+import TypeIt from "@/components/ReTypeit";
+</script>
+
+<template>
+  <TypeIt :options="{ speed: 100, loop: true }">
+    <span class="type-it">Hello World</span>
+  </TypeIt>
+</template>
+```
+
+## 关键约定
+
+1. 通知栏长文本自动滚动；搭配 `el-carousel` 可实现垂直轮播。
+2. 水印在页面切换或登录态变化时应重新设置，避免被移除。
+3. `ReTimeLine` 数据项至少包含 `title` 与 `date`。
+4. `ReFlicker` 通过 `useRenderFlicker` 返回组件，适合状态指示。