new feature: full screen alert

src/components/KUNGalgameAlert/KUNGalgameAlert.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 接受父组件的传值
+const props = defineProps(['info', 'isShowCancel'])
+// 返回给父组件信息
+const emits = defineEmits(['value'])
+
+const show = ref(false)
+
+const handleClose = () => {
+  show.value = false
+  // 点击关闭则给父组件返回 false
+  emits('value', false)
+}
+
+const handleConfirm = () => {
+  show.value = false
+  // 点击确定则给父组件返回 true
+  emits('value', true)
+}
+</script>
+
+<template>
+  <div class="alert" @click="show = true">
+    <slot></slot>
+  </div>
+
+  <Teleport to="body">
+    <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>
+</template>
+
+<style lang="scss" scoped>
+.alert {
+  width: 100%;
+  height: 100%;
+}
+.mask {
+  position: fixed;
+  z-index: 9999;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  transition: opacity 0.3s ease;
+  color: var(--kungalgame-font-color-3);
+}
+
+.container {
+  width: 300px;
+  margin: auto;
+  padding: 20px 30px;
+  background-color: var(--kungalgame-trans-white-2);
+  border: 1px solid var(--kungalgame-blue-1);
+  border-radius: 2px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+  transition: all 0.3s ease;
+}
+
+.footer {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.button {
+  width: 70px;
+  height: 30px;
+  color: var(--kungalgame-font-color-3);
+  cursor: pointer;
+  &:nth-child(1) {
+    background-color: var(--kungalgame-trans-blue-1);
+    border: 1px solid var(--kungalgame-blue-4);
+  }
+  &:nth-child(2) {
+    margin-left: 98px;
+    background-color: var(--kungalgame-trans-red-1);
+    border: 1px solid var(--kungalgame-red-4);
+  }
+  &:active {
+    transform: scale(0.9);
+    transition: 0.1s;
+  }
+}
+
+/*
+ * 对于 transition="modal" 的元素来说
+ * 当通过 Vue.js 切换它们的可见性时
+ * 以下样式会被自动应用。
+ *
+ * 你可以简单地通过编辑这些样式
+ * 来体验该模态框的过渡效果。
+ */
+
+.alert-enter-from {
+  opacity: 0;
+}
+
+.alert-leave-to {
+  opacity: 0;
+}
+
+.alert-enter-from .container,
+.alert-leave-to .container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+</style>

src/components/setting-panel/KUNGalgameSettingPanel.vue

@@ -189,7 +189,7 @@ const handleRecover = () => {
   border: 1px solid var(--kungalgame-blue-4);
   background-color: var(--kungalgame-trans-white-9);
   option {
-    background-color: var(--kungalgame-trans-white-9);
+    background-color: var(--kungalgame-white);
   }
 }
 .page-width {

src/language/en.ts

@@ -106,4 +106,9 @@ export default {
   contact: {
     title: 'Join / Contact Us',
   },
+  // 非页面组件这里统一用大驼峰
+  ComponentAlert: {
+    confirm: 'OK',
+    cancel: 'Cancel',
+  },
 }

src/language/zh.ts

@@ -106,4 +106,9 @@ export default {
   contact: {
     title: '加入 / 联系我们',
   },
+  // 非页面组件这里统一用大驼峰
+  ComponentAlert: {
+    confirm: '确定',
+    cancel: '取消',
+  },
 }

src/utils/toggle.ts

@@ -0,0 +1,18 @@
+import { ref } from 'vue'
+
+const toggleStatus = (initState: boolean, delay: number) => {
+  const on = ref(initState ?? false)
+
+  const toggle = (value: boolean) => {
+    setTimeout(() => {
+      on.value = value ?? !on.value
+    }, delay)
+  }
+
+  return {
+    on,
+    toggle,
+  }
+}
+
+export default toggleStatus

src/views/edit/components/Button.vue

@@ -1,4 +1,11 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import KUNGalgameAlert from '@/components/KUNGalgameAlert/KUNGalgameAlert.vue'
+
+const getAlertValue = (value: boolean) => {
+  // 这里待定 TODO:
+  console.log(value)
+}
+</script>
 
 <template>
   <!-- 话题分类的容器 -->
@@ -14,7 +21,14 @@
   <!-- 按钮的容器 -->
   <div class="btn-container">
     <!-- 确认按钮 -->
-    <button class="confirm-btn">确认发布</button>
+
+    <KUNGalgameAlert
+      :info="'确认发布吗？'"
+      :isShowCancel="true"
+      @value="getAlertValue"
+    >
+      <button class="confirm-btn">确认发布</button>
+    </KUNGalgameAlert>
     <!-- 保存按钮 -->
     <button class="save-btn">保存草稿</button>
   </div>
@@ -74,10 +88,6 @@
   background-color: var(--kungalgame-blue-4);
   transition: 0.1s;
 }
-.confirm-btn:active {
-  background-color: var(--kungalgame-blue-2);
-  transform: scale(0.8);
-}
 /* 保存按钮的样式 */
 .save-btn {
   color: var(--kungalgame-orange-4);

src/views/edit/components/Tags.vue

@@ -100,7 +100,7 @@ const validateTagName = (tagName: string) => {
         <!-- 已选择的标签显示容器 -->
         <span v-for="tag in selectedTags" :key="tag.index" class="selected-tag">
           {{ tag.name }}
-          <span class="close-btn" @click="() => handleTagClose(tag)">×</span>
+          <span class="close-btn" @click="handleTagClose(tag)">×</span>
         </span>
       </div>
       <!-- 标签输入框 -->