@qilitt-mickey/vue3-temp-skill 1.0.12 → 1.1.2

package/references/feedback-loading.md

@@ -1,60 +1,62 @@
-# 反馈与 Loading
-
-规范系统 Loading、Message、MessageBox、NoticeBar 等反馈组件的使用。在需要提示用户或阻塞操作时参照。
-
-## Loading
-
-### 局部 Loading
-
-```vue
-<el-card v-loading.lock="loading" :element-loading-spinner="svgLoading">
-  <!-- 内容 -->
-</el-card>
-```
-
-### 全屏 Loading
-
-```vue
-<el-button v-loading.lock.fullscreen="fullLoading" @click="submit">
-  保存
-</el-button>
-```
-
-### 获取系统统一 Loading SVG
-
-```typescript
-import { useApp } from "@/hooks/useApp";
-
-const { svgLoading } = useApp();
-```
-
-## Message
-
-使用 `src/utils/message.ts` 封装函数：
-
-```typescript
-import { message, closeAllMessage } from "@/utils/message";
-
-message("操作成功", { type: "success" });
-message("警告信息", { type: "warning", duration: 3000 });
-```
-
-默认 `duration: 5000`、`grouping: true`、`plain: true`。
-
-## MessageBox
-
-```typescript
-import { ElMessageBox } from "element-plus";
-
-ElMessageBox.confirm($t("确定删除吗？"), $t("温馨提醒"), {
-  confirmButtonText: $t("确定"),
-  cancelButtonText: $t("取消"),
-  type: "warning",
-});
-```
-
-## 关键约定
-
-1. 所有提示文案使用 `$t()`。
-2. 长耗时操作显示 loading，避免用户重复点击。
-3. 表单提交失败调用 `checkReeorPosition()` 定位错误项。
+# 反馈与 Loading
+
+> 按本文件示例编写，复用项目已有 Message / Loading / MessageBox 封装，勿另起一套提示方案。
+
+规范系统 Loading、Message、MessageBox、NoticeBar 等反馈组件的使用。在需要提示用户或阻塞操作时参照。
+
+## Loading
+
+### 局部 Loading
+
+```vue
+<el-card v-loading.lock="loading" :element-loading-spinner="svgLoading">
+  <!-- 内容 -->
+</el-card>
+```
+
+### 全屏 Loading
+
+```vue
+<el-button v-loading.lock.fullscreen="fullLoading" @click="submit">
+  保存
+</el-button>
+```
+
+### 获取系统统一 Loading SVG
+
+```typescript
+import { useApp } from "@/hooks/useApp";
+
+const { svgLoading } = useApp();
+```
+
+## Message
+
+使用 `src/utils/message.ts` 封装函数：
+
+```typescript
+import { message, closeAllMessage } from "@/utils/message";
+
+message("操作成功", { type: "success" });
+message("警告信息", { type: "warning", duration: 3000 });
+```
+
+默认 `duration: 5000`、`grouping: true`、`plain: true`。
+
+## MessageBox
+
+```typescript
+import { ElMessageBox } from "element-plus";
+
+ElMessageBox.confirm($t("确定删除吗？"), $t("温馨提醒"), {
+  confirmButtonText: $t("确定"),
+  cancelButtonText: $t("取消"),
+  type: "warning",
+});
+```
+
+## 关键约定
+
+1. 所有提示文案使用 `$t()`。
+2. 长耗时操作显示 loading，避免用户重复点击。
+3. 表单提交失败调用 `checkReeorPosition()` 定位错误项。

package/references/feedback-ui.md

@@ -1,111 +1,125 @@
-# 展示类反馈组件
-
-规范通知栏、水印、时间轴、闪烁点、打字机动画等展示类反馈组件的使用。在需要信息展示、氛围效果时参照。
-
-## 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="#ecf5ff"
-    color="#409eff"
-  />
-</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` 返回组件，适合状态指示。
+# 展示类反馈组件
+
+> 按本文件示例编写，复用项目已有反馈类组件与 Hook，勿另起一套展示实现。
+
+规范通知栏、水印、时间轴、闪烁点、打字机动画等展示类反馈组件的使用。在需要信息展示、氛围效果时参照。
+
+## 依赖（缺则先装）
+
+多数组件为项目自研，无额外包。打字机需要：
+
+| 包 | 版本 | 用途 |
+|---|---|---|
+| `typeit` | `8.8.7` | `ReTypeit` |
+
+```bash
+pnpm add typeit@8.8.7
+```
+
+## 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="#ecf5ff"
+    color="#409eff"
+  />
+</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` 返回组件，适合状态指示。

package/references/file-management.md

@@ -1,5 +1,25 @@
 # 文件管理与预览
 
+> 按下列示例编写。
+> **构建附属**：`build/plugins/FileViewer.ts` + `@file-viewer/*` 大体积资源随本能力，不单独成构建 Skill。
+
+## 依赖（缺则先装）
+
+| 包 | 版本 | 类型 |
+|---|---|---|
+| `@file-viewer/core` | `2.1.14` | dependencies |
+| `@file-viewer/vue3` | `2.1.14` | dependencies |
+| `@file-viewer/preset-all` | `2.1.14` | dependencies |
+| `browser-image-compression` | `2.0.2` | dependencies（上传压缩） |
+| `@file-viewer/vite-plugin` | `2.1.14` | **devDependencies** |
+
+```bash
+pnpm add @file-viewer/core@2.1.14 @file-viewer/vue3@2.1.14 @file-viewer/preset-all@2.1.14 browser-image-compression@2.0.2
+pnpm add -D @file-viewer/vite-plugin@2.1.14
+```
+
+先查 `package.json`；完整模板通常已装齐。缺插件接线时恢复 `build/plugins/FileViewer.ts`，勿擅自改 Vite 主配置。三件套必须同版本。
+
 ## ReAttachment 附件管理
 
 集附件类型选择、上传、下载、删除于一体的表单组件。
@@ -121,12 +141,13 @@ downloadAttachment(url, fileName)
 2. `pageStatus` 控制编辑态：`view` 模式下所有操作禁用。
 3. 文件大小校验在 `onChange` 中实时执行，超限文件自动过滤。
 4. 文件预览组件通过 `v-model:visible` 控制显示隐藏。
-5. 附件类型选项从数据字典 `baseCodeGet('PackType')` 获取。
-6. 删除已上传附件必须弹确认框，防止误操作。
+5. 附件类型选项可从字典 `baseCodeGet(...)` 获取。
+6. 删除已上传附件必须弹确认框。
+7. 选型：`@file-viewer/*` + `ReFileViewer`，禁止擅自换 pdf.js 等方案。
 
-## 关联文件
+## 落点（仓库内）
 
-- [src/components/ReAttachment/src/index.vue](file:///e:/work/vue3-web-temp/src/components/ReAttachment/src/index.vue)
-- [src/components/ReFileViewer/src/index.vue](file:///e:/work/vue3-web-temp/src/components/ReFileViewer/src/index.vue)
-- [src/utils/utils.ts](file:///e:/work/vue3-web-temp/src/utils/utils.ts)
-- [src/views/function/fileView/index.vue](file:///e:/work/vue3-web-temp/src/views/function/fileView/index.vue)
+- `src/components/ReAttachment`
+- `src/components/ReFileViewer`
+- `src/utils/uploadManager.ts` / `imageCompression.ts`
+- `build/plugins/FileViewer.ts`