new feature: info

src/components/KUNGalgameAlert/Alert.vue

@@ -1,13 +1,23 @@
+<!-- 爷组件使用：
+const alertInfo: props = {
+  type: 'alert',
+  info: '确认发布吗',
+  isShowCancel: true,
+  status: getAlertValue,
+}
+
+provide('info', alertInfo)
+-->
 <script setup lang="ts">
 // 接受爷组件的注入
 import { inject } from 'vue'
 // 导入接收类型
 import { props } from './types'
 
-const info = inject<props>('info')
+const alert = inject<props>('alert')
 
 // 接受父组件的传值
-const props = defineProps(['show'])
+const props = defineProps(['show', 'type'])
 
 const emit = defineEmits(['update'])
 
@@ -15,29 +25,29 @@ const emit = defineEmits(['update'])
 const handleClose = () => {
   emit('update', false)
   // 点击关闭则给父组件返回 false
-  info?.status(false)
+  alert?.status?.(false)
 }
 
 // 确定提示
 const handleConfirm = () => {
   emit('update', false)
   // 点击确定则给父组件返回 true
-  info?.status(true)
+  alert?.status?.(true)
 }
 </script>
 
 <template>
-  <Teleport to="body" :disabled="info?.type !== 'alert'">
+  <Teleport to="body" :disabled="props.type !== 'alert'">
     <Transition name="alert">
       <div v-if="props.show" class="mask">
         <div class="container">
           <div class="header">
-            <h3>{{ info?.info }}</h3>
+            <h3>{{ alert?.info }}</h3>
           </div>
 
           <div class="footer">
             <button
-              v-if="info?.isShowCancel"
+              v-if="alert?.isShowCancel"
               class="button"
               @click="handleClose"
             >
@@ -104,15 +114,6 @@ const handleConfirm = () => {
   }
 }
 
-/*
- * 对于 transition="modal" 的元素来说
- * 当通过 Vue.js 切换它们的可见性时
- * 以下样式会被自动应用。
- *
- * 你可以简单地通过编辑这些样式
- * 来体验该模态框的过渡效果。
- */
-
 .alert-enter-from {
   opacity: 0;
 }

src/components/KUNGalgameAlert/Info.vue

@@ -0,0 +1,124 @@
+<!-- 爷组件使用：
+const alertInfo: props = {
+  type: 'alert',
+  info: '确认发布吗',
+  isShowCancel: true,
+  status: getAlertValue,
+}
+
+provide('info', alertInfo)
+-->
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+// 接受爷组件的注入
+import { inject } from 'vue'
+// 导入接收类型
+import { props } from './types'
+// 导入图片地址
+import img from './loli'
+// 导入动画
+import 'animate.css'
+
+const { loli, name } = img
+
+const info = inject<props>('info')
+
+// 接受父组件的传值
+const props = defineProps(['show', 'type'])
+
+const emit = defineEmits(['update'])
+</script>
+
+<template>
+  <Teleport to="body" :disabled="props.type !== 'info'">
+    <Transition
+      enter-active-class="animate__animated animate__fadeInUp animate__faster"
+      leave-active-class="animate__animated animate__fadeOutDown animate__faster"
+    >
+      <div class="container" v-if="props.show">
+        <Transition
+          enter-active-class="animate__animated animate__swing"
+          appear
+        >
+          <div class="lass">
+            <span>{{ name + $t('') }}</span>
+          </div>
+        </Transition>
+        <div class="avatar">
+          <img :src="loli" />
+        </div>
+        <Transition
+          enter-active-class="animate__animated animate__bounceInRight animate__faster"
+          appear
+        >
+          <!-- 啊哈哈哈！想不到吧这里参考的是糖调写的 -->
+          <div class="info">{{ `「 ${info?.info} 」` }}</div>
+        </Transition>
+        <div class="close" @click="emit('update', false)">
+          <Icon icon="line-md:close" />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  height: 120px;
+  width: 100%;
+  color: var(--kungalgame-font-color-3);
+  background-color: var(--kungalgame-trans-white-5);
+  backdrop-filter: blur(2px);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+}
+.lass {
+  padding: 5px;
+  font-size: 20px;
+  position: absolute;
+  top: -41px;
+  padding-left: 150px;
+  border-bottom: none;
+  /* 这里的阴影只能这么绘制 */
+  filter: drop-shadow(2px 4px 3px var(--kungalgame-trans-blue-4));
+  span {
+    padding: 0 50px;
+    text-align: center;
+    background-color: var(--kungalgame-trans-white-2);
+    font-size: 24px;
+    /* 这里将人物名字的形装裁剪成六边形 */
+    clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0 50%);
+  }
+}
+.avatar {
+  position: absolute;
+  margin-top: 10px;
+  margin-left: 20px;
+  img {
+    height: 100px;
+  }
+}
+.info {
+  margin-top: 20px;
+  margin-left: 150px;
+  font-size: 20px;
+  color: var(--kungalgame-white);
+  text-shadow: 0 1px var(--kungalgame-font-color-3),
+    1px 0 var(--kungalgame-font-color-3), -1px 0 var(--kungalgame-font-color-3),
+    0 -1px var(--kungalgame-font-color-3),
+    1px 2px var(--kungalgame-font-color-3),
+    1px 2px var(--kungalgame-font-color-3),
+    1px 2px var(--kungalgame-font-color-3),
+    1px 2px var(--kungalgame-font-color-3);
+}
+.close {
+  font-size: 30px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: var(--kungalgame-font-color-1);
+}
+</style>

src/components/KUNGalgameAlert/KUNGalgameAlert.vue

@@ -2,6 +2,9 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import Alert from './Alert.vue'
+import Info from './Info.vue'
+
+defineProps(['type'])
 
 const show = ref(false)
 
@@ -15,40 +18,22 @@ const updateStatus = (value: boolean) => {
     <slot></slot>
   </div>
 
-  <Alert :show="show" @update="updateStatus" />
+  <Alert
+    :show="show"
+    :type="$props.type"
+    @update="updateStatus"
+    v-if="$props.type === 'alert'"
+  />
 
-  <!-- 不是 info 的话就不启用这个 teleport -->
-  <!-- <Teleport to="body" :disabled="props.type !== 'info'">
-    <Transition name="alert">
-      <div v-if="show" class="mask">
-        <div class="container">
-          <div class="header">
-            <h3>{{ props.info }}</h3>
-          </div>
-
-          <div class="footer">
-            <button
-              v-if="props.isShowCancel"
-              class="button"
-              @click="handleClose"
-            >
-              {{ $t('ComponentAlert.cancel') }}
-            </button>
-            <button class="button" @click="handleConfirm">
-              {{ $t('ComponentAlert.confirm') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport> -->
+  <Info
+    :show="show"
+    :type="$props.type"
+    @update="updateStatus"
+    v-if="$props.type === 'info'"
+  />
 </template>
 
 <style lang="scss" scoped>
-.alert {
-  width: 100%;
-  height: 100%;
-}
 .mask {
   position: fixed;
   z-index: 9999;

src/components/KUNGalgameAlert/loli.ts

@@ -0,0 +1,25 @@
+// 获取随机数的函数
+import getRandomNum from '@/utils/randomNum'
+// 获取本地图片文件，注意这里不能用 @ 作为基础路径，只能用 ..
+const getAssetsFile = (name: string) => {
+  return new URL(`../../assets/images/alert/${name}.png`, import.meta.url).href
+}
+
+const number = getRandomNum(0, 2)
+
+let loli = ''
+let name = ''
+
+if (number === 0) {
+  // 其实人家全名叫：アーデルハイト・フォン・ベルクシュトラーセ
+  name = 'あーちゃん'
+  loli = getAssetsFile(name)
+} else if (number === 1) {
+  name = 'こじかひわ'
+  loli = getAssetsFile(name)
+} else {
+  name = '雪々'
+  loli = getAssetsFile(name)
+}
+
+export default { loli, name }

src/components/KUNGalgameAlert/types.ts

@@ -1,6 +1,5 @@
 export interface props {
-  type: string
   info: string
   isShowCancel: boolean
-  status: Function
+  status?: Function
 }

src/utils/loli.ts

@@ -3,15 +3,14 @@
 // 读取 JSON 文件数据
 import loliData from '@/assets/images/ren/ren.json'
 
-// 获取本地图片文件
+/* 随机数 */
+import getRandomNum from './randomNum'
+
+// 获取本地图片文件，注意这里不能用 @ 作为基础路径，只能用 ..
 const getAssetsFile = (url: number) => {
   return new URL(`../assets/images/ren/${url}.png`, import.meta.url).href
 }
 
-/* 随机数 */
-const getRandomNum = (lowerValue: number, upperValue: number) => {
-  return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue)
-}
 /* 随机汗水 ？ */
 // const randomSweat = getRandomNum(0, 1)
 /* 随机眉毛 */

src/utils/randomNum.ts

@@ -0,0 +1,5 @@
+// 生成指定范围内的随机数
+
+export default (lowerValue: number, upperValue: number) => {
+  return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue)
+}

src/views/edit/components/Button.vue

@@ -11,14 +11,19 @@ const getAlertValue = (value: boolean) => {
   console.log(value)
 }
 
-const alertInfo: props = {
-  type: 'alert',
+const alert: props = {
   info: '确认发布吗',
   isShowCancel: true,
   status: getAlertValue,
 }
 
-provide('info', alertInfo)
+const info: props = {
+  info: '草稿已经保存成功！',
+  isShowCancel: true,
+}
+
+provide('alert', alert)
+provide('info', info)
 </script>
 
 <template>
@@ -36,11 +41,13 @@ provide('info', alertInfo)
   <div class="btn-container">
     <!-- 确认按钮 -->
 
-    <KUNGalgameAlert>
+    <KUNGalgameAlert :type="'alert'">
       <button class="confirm-btn">确认发布</button>
     </KUNGalgameAlert>
     <!-- 保存按钮 -->
-    <button class="save-btn">保存草稿</button>
+    <KUNGalgameAlert :type="'info'">
+      <button class="save-btn">保存草稿</button>
+    </KUNGalgameAlert>
   </div>
 </template>
 
@@ -79,11 +86,12 @@ provide('info', alertInfo)
 /* 单个按钮的样式 */
 .btn-container button {
   height: 40px;
-  width: 27%;
+  width: 200px;
   font-size: 20px;
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;
+  flex-shrink: 0;
   &:hover {
     color: var(--kungalgame-white);
   }