From 953c13cdd3b9e0c0c0801e6c4b79f8b17e5d2af5 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Fri, 9 Jun 2023 18:22:45 +0800
Subject: [PATCH] new feature: full screen alert

---
 .../KUNGalgameAlert/KUNGalgameAlert.vue       | 132 ++++++++++++++++++
 .../setting-panel/KUNGalgameSettingPanel.vue  |   2 +-
 src/language/en.ts                            |   5 +
 src/language/zh.ts                            |   5 +
 src/utils/toggle.ts                           |  18 +++
 src/views/edit/components/Button.vue          |  22 ++-
 src/views/edit/components/Tags.vue            |   2 +-
 7 files changed, 178 insertions(+), 8 deletions(-)
 create mode 100644 src/components/KUNGalgameAlert/KUNGalgameAlert.vue
 create mode 100644 src/utils/toggle.ts

diff --git a/src/components/KUNGalgameAlert/KUNGalgameAlert.vue b/src/components/KUNGalgameAlert/KUNGalgameAlert.vue
new file mode 100644
index 00000000..f469d7af
--- /dev/null
+++ b/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>
diff --git a/src/components/setting-panel/KUNGalgameSettingPanel.vue b/src/components/setting-panel/KUNGalgameSettingPanel.vue
index 8f425938..c5dadb0a 100644
--- a/src/components/setting-panel/KUNGalgameSettingPanel.vue
+++ b/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 {
diff --git a/src/language/en.ts b/src/language/en.ts
index 2d5ddd44..567e2221 100644
--- a/src/language/en.ts
+++ b/src/language/en.ts
@@ -106,4 +106,9 @@ export default {
   contact: {
     title: 'Join / Contact Us',
   },
+  // 非页面组件这里统一用大驼峰
+  ComponentAlert: {
+    confirm: 'OK',
+    cancel: 'Cancel',
+  },
 }
diff --git a/src/language/zh.ts b/src/language/zh.ts
index 5f85c1b8..45239333 100644
--- a/src/language/zh.ts
+++ b/src/language/zh.ts
@@ -106,4 +106,9 @@ export default {
   contact: {
     title: '加入 / 联系我们',
   },
+  // 非页面组件这里统一用大驼峰
+  ComponentAlert: {
+    confirm: '确定',
+    cancel: '取消',
+  },
 }
diff --git a/src/utils/toggle.ts b/src/utils/toggle.ts
new file mode 100644
index 00000000..9a5d4d6d
--- /dev/null
+++ b/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
diff --git a/src/views/edit/components/Button.vue b/src/views/edit/components/Button.vue
index 11a6d179..5612ba1f 100644
--- a/src/views/edit/components/Button.vue
+++ b/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);
diff --git a/src/views/edit/components/Tags.vue b/src/views/edit/components/Tags.vue
index f8931d1f..e2357aba 100644
--- a/src/views/edit/components/Tags.vue
+++ b/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>
       <!-- 标签输入框 -->