style: 组件命名规范

src/components.d.ts

@@ -7,12 +7,10 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    MainTransition: typeof import('./components/MainTransition/index.vue')['default']
+    MainTransition: typeof import('./components/main-transition/index.vue')['default']
-    MyTransition: typeof import('./components/MyTransition/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
+    SvgIcon: typeof import('./components/svg-icon/index.vue')['default']
-    Transition: typeof import('./components/Transition/index.vue')['default']
+    VerifyCode: typeof import('./components/verify-code/index.vue')['default']
-    VerifyCode: typeof import('./components/VerifyCode/index.vue')['default']
   }
 }

src/components/verify-code/index.vue

@@ -1,140 +1,140 @@
-<template>
+<template>
-  <span class="s-canvas" @click="changeCode">
+  <span class="s-canvas" @click="changeCode">
-    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
+    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
-  </span>
+  </span>
-</template>
+</template>
-
+
-<script setup lang="ts">
+<script setup lang="ts">
-defineOptions({ name: "VerifyCode" });
+defineOptions({ name: "VerifyCode" });
-// 通过defineProps接收父组件的值
+// 通过defineProps接收父组件的值
-const props = defineProps({
+const props = defineProps({
-  identifyCodes: {
+  identifyCodes: {
-    //验证码从该字段中抽取生成
+    //验证码从该字段中抽取生成
-    type: String,
+    type: String,
-    default: "1234567890abcdefghijklmnopqrstuvwxyz"
+    default: "1234567890abcdefghijklmnopqrstuvwxyz"
-  },
+  },
-  fontSizeMin: {
+  fontSizeMin: {
-    // 字体最小值
+    // 字体最小值
-    type: Number,
+    type: Number,
-    default: 25
+    default: 25
-  },
+  },
-  fontSizeMax: {
+  fontSizeMax: {
-    // 字体最大值
+    // 字体最大值
-    type: Number,
+    type: Number,
-    default: 35
+    default: 35
-  },
+  },
-  backgroundColorMin: {
+  backgroundColorMin: {
-    // 验证码图片背景色最小值
+    // 验证码图片背景色最小值
-    type: Number,
+    type: Number,
-    default: 200
+    default: 200
-  },
+  },
-  backgroundColorMax: {
+  backgroundColorMax: {
-    // 验证码图片背景色最大值
+    // 验证码图片背景色最大值
-    type: Number,
+    type: Number,
-    default: 220
+    default: 220
-  },
+  },
-  dotColorMin: {
+  dotColorMin: {
-    // 背景干扰点最小值
+    // 背景干扰点最小值
-    type: Number,
+    type: Number,
-    default: 60
+    default: 60
-  },
+  },
-  dotColorMax: {
+  dotColorMax: {
-    // 背景干扰点最大值
+    // 背景干扰点最大值
-    type: Number,
+    type: Number,
-    default: 120
+    default: 120
-  },
+  },
-  contentWidth: {
+  contentWidth: {
-    //容器宽度
+    //容器宽度
-    type: Number,
+    type: Number,
-    default: 100
+    default: 100
-  },
+  },
-  contentHeight: {
+  contentHeight: {
-    //容器高度
+    //容器高度
-    type: Number,
+    type: Number,
-    default: 44
+    default: 44
-  }
+  }
-});
+});
-const emit = defineEmits(["verifyCodeChange"]);
+const emit = defineEmits(["verifyCodeChange"]);
-const identifyCode = ref("");
+const identifyCode = ref("");
-watch(identifyCode, () => {
+watch(identifyCode, () => {
-  drawPic();
+  drawPic();
-});
+});
-onMounted(() => {
+onMounted(() => {
-  drawPic();
+  drawPic();
-  makeCode(props.identifyCodes, 4);
+  makeCode(props.identifyCodes, 4);
-});
+});
-// 生成一个随机数
+// 生成一个随机数
-const randomNum = (min: any, max: any) => {
+const randomNum = (min: any, max: any) => {
-  return Math.floor(Math.random() * (max - min) + min);
+  return Math.floor(Math.random() * (max - min) + min);
-};
+};
-// 生成一个随机的颜色
+// 生成一个随机的颜色
-const randomColor = (min: any, max: any) => {
+const randomColor = (min: any, max: any) => {
-  let r = randomNum(min, max);
+  let r = randomNum(min, max);
-  let g = randomNum(min, max);
+  let g = randomNum(min, max);
-  let b = randomNum(min, max);
+  let b = randomNum(min, max);
-  return "rgb(" + r + "," + g + "," + b + ")";
+  return "rgb(" + r + "," + g + "," + b + ")";
-};
+};
-const drawPic = () => {
+const drawPic = () => {
-  let canvas = <HTMLCanvasElement>document.getElementById("s-canvas");
+  let canvas = <HTMLCanvasElement>document.getElementById("s-canvas");
-  if (!canvas) return;
+  if (!canvas) return;
-  let ctx = canvas.getContext("2d");
+  let ctx = canvas.getContext("2d");
-  if (!ctx) return;
+  if (!ctx) return;
-  ctx.textBaseline = "bottom";
+  ctx.textBaseline = "bottom";
-  // 绘制背景
+  // 绘制背景
-  ctx.fillStyle = randomColor(props.backgroundColorMin, props.backgroundColorMax);
+  ctx.fillStyle = randomColor(props.backgroundColorMin, props.backgroundColorMax);
-  ctx.fillRect(0, 0, props.contentWidth, props.contentHeight);
+  ctx.fillRect(0, 0, props.contentWidth, props.contentHeight);
-  // 绘制文字
+  // 绘制文字
-  for (let i = 0; i < identifyCode.value.length; i++) {
+  for (let i = 0; i < identifyCode.value.length; i++) {
-    drawText(ctx, identifyCode.value[i], i);
+    drawText(ctx, identifyCode.value[i], i);
-  }
+  }
-  drawLine(ctx);
+  drawLine(ctx);
-  drawDot(ctx);
+  drawDot(ctx);
-};
+};
-const drawText = (ctx: any, txt: any, i: any) => {
+const drawText = (ctx: any, txt: any, i: any) => {
-  ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
+  ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
-  ctx.font = randomNum(props.fontSizeMin, props.fontSizeMax) + "px SimHei"; //随机生成字体大小
+  ctx.font = randomNum(props.fontSizeMin, props.fontSizeMax) + "px SimHei"; //随机生成字体大小
-  let x = (i + 1) * (props.contentWidth / (identifyCode.value.length + 1));
+  let x = (i + 1) * (props.contentWidth / (identifyCode.value.length + 1));
-  let y = randomNum(props.fontSizeMax, props.contentHeight - 5);
+  let y = randomNum(props.fontSizeMax, props.contentHeight - 5);
-  let deg = randomNum(-30, 30);
+  let deg = randomNum(-30, 30);
-  // 修改坐标原点和旋转角度
+  // 修改坐标原点和旋转角度
-  ctx.translate(x, y);
+  ctx.translate(x, y);
-  ctx.rotate((deg * Math.PI) / 180);
+  ctx.rotate((deg * Math.PI) / 180);
-  ctx.fillText(txt, 0, 0);
+  ctx.fillText(txt, 0, 0);
-  // 恢复坐标原点和旋转角度
+  // 恢复坐标原点和旋转角度
-  ctx.rotate((-deg * Math.PI) / 180);
+  ctx.rotate((-deg * Math.PI) / 180);
-  ctx.translate(-x, -y);
+  ctx.translate(-x, -y);
-};
+};
-const drawLine = (ctx: any) => {
+const drawLine = (ctx: any) => {
-  // 绘制干扰线
+  // 绘制干扰线
-  for (let i = 0; i < 4; i++) {
+  for (let i = 0; i < 4; i++) {
-    ctx.strokeStyle = randomColor(100, 200);
+    ctx.strokeStyle = randomColor(100, 200);
-    ctx.beginPath();
+    ctx.beginPath();
-    ctx.moveTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight));
+    ctx.moveTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight));
-    ctx.lineTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight));
+    ctx.lineTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight));
-    ctx.stroke();
+    ctx.stroke();
-  }
+  }
-};
+};
-const drawDot = (ctx: any) => {
+const drawDot = (ctx: any) => {
-  // 绘制干扰点
+  // 绘制干扰点
-  for (let i = 0; i < 30; i++) {
+  for (let i = 0; i < 30; i++) {
-    ctx.fillStyle = randomColor(0, 255);
+    ctx.fillStyle = randomColor(0, 255);
-    ctx.beginPath();
+    ctx.beginPath();
-    ctx.arc(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight), 1, 0, 2 * Math.PI);
+    ctx.arc(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight), 1, 0, 2 * Math.PI);
-    ctx.fill();
+    ctx.fill();
-  }
+  }
-};
+};
-/*切换验证码start*/
+/*切换验证码start*/
-const changeCode = () => {
+const changeCode = () => {
-  identifyCode.value = "";
+  identifyCode.value = "";
-  makeCode(props.identifyCodes, 4);
+  makeCode(props.identifyCodes, 4);
-};
+};
-const makeCode = (e: any, n: any) => {
+const makeCode = (e: any, n: any) => {
-  for (let i = 0; i < n; i++) {
+  for (let i = 0; i < n; i++) {
-    identifyCode.value += e[randomNum(0, e.length)];
+    identifyCode.value += e[randomNum(0, e.length)];
-  }
+  }
-  emit("verifyCodeChange", identifyCode.value);
+  emit("verifyCodeChange", identifyCode.value);
-};
+};
-/*切换验证码end*/
+/*切换验证码end*/
-</script>
+</script>
-
+
-<style lang="scss" scoped></style>
+<style lang="scss" scoped></style>

src/layout/components/Header/index.vue

@@ -98,8 +98,8 @@
   </a-layout-header>
 </template>
 <script setup lang="ts">
-import Notice from "@/layout/components/Header/components/Notice/index.vue";
+import Notice from "@/layout/components/Header/components/notice/index.vue";
-import Breadcrumb from "@/layout/components/Header/components/Breadcrumb/index.vue";
+import Breadcrumb from "@/layout/components/Header/components/breadcrumb/index.vue";
 import myImage from "@/assets/img/my-image.jpg";
 import pinia from "@/store/index";
 import { Modal } from "@arco-design/web-vue";

vite.config.ts

@@ -31,7 +31,7 @@ export default defineConfig(({ mode }) => {
       }),
       createSvgIconsPlugin({
         // 配置src下存放svg的路径，这里表示在src/icons文件夹下
-        iconDirs: [path.resolve(process.cwd(), "src/icons")],
+        iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
         symbolId: "icon-[dir]-[name]"
       }),
       AutoImport({