把游戏里面的elementplus切换成暗黑主题

2 days ago · 1ad18af0b4
3 changed files with 43 additions and 14 deletions
--- a/Build_God_Game/index.html
+++ b/Build_God_Game/index.html
@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
--- a/Build_God_Game/src/main.ts
+++ b/Build_God_Game/src/main.ts
@ -5,6 +5,7 @@ import App from './App.vue'
 import router from './router'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'

 const app = createApp(App)
 app.use(ElementPlus)
--- a/Build_God_Game/src/views/CharacterView.vue
+++ b/Build_God_Game/src/views/CharacterView.vue
@ -3,7 +3,7 @@ import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useCharacterStore } from '@/stores/character'
 import { useAuthStore } from '@/stores/auth'
-import { ElProgress } from 'element-plus'
+import { ElMessage, ElProgress } from 'element-plus'
 import Particles from '@/components/Particles/Particles.vue'
 import GlareHover from '@/components/GlareHover/GlareHover.vue'
 import ElectricBorder from '@/components/ElectricBorder/ElectricBorder.vue'
@ -20,6 +20,8 @@ const newCharacterName = ref('')
 const newCharacterProfessionId = ref<number | null>(null)
 const showProfessionSelection = ref(false)
 const errorMsg = ref('')
+const deleteDialogVisible = ref(false)
+const characterToDelete = ref<number | null>(null)

 onMounted(async () => {
  await characterStore.fetchCharacters()
@ -84,13 +86,28 @@ const handleSelectCharacter = async (characterId: number) => {
  }
 }

-const handleDeleteCharacter = async (characterId: number, event: Event) => {
+const handleDeleteCharacter = (characterId: number, event: Event) => {
  event.stopPropagation()
-  if (confirm('确定要删除这个角色吗？此操作不可恢复！')) {
-    await characterStore.deleteCharacter(characterId)
+  characterToDelete.value = characterId
+  deleteDialogVisible.value = true
+}
+
+const confirmDelete = async () => {
+  if (characterToDelete.value) {
+    var bo = await characterStore.deleteCharacter(characterToDelete.value)
+    if (bo == true) {
+      deleteDialogVisible.value = false
+      characterToDelete.value = null
+      ElMessage.success('删除成功了，如果有一天你后悔了，记得找我')
+    }
+
  }
 }

+const deleteCharacter = async (characterId: number) => {
+  await characterStore.deleteCharacter(characterId)
+}
+
 const handleLogout = () => {
  authStore.logout()
  characterStore.clearCurrentCharacter()
@ -119,7 +136,7 @@ const formatNumber = (num: number) => {

    <div class="character-container">
      <div class="page-header">
-        <TextType :text="['选 择 角 色']" :typingSpeed="75" :pauseDuration="1500" :showCursor="true" cursorCharacter="|"
+        <TextType :text="['选 择 角 色']" :typingSpeed="75" :pauseDuration="1500" :showCursor="false" cursorCharacter="|"
          style="font-size: 1.5rem; font-weight: bold;" />
      </div>

@ -188,17 +205,28 @@ const formatNumber = (num: number) => {
      </div>

      <div class="page-footer">
-        <StarBorder 
-          as="div" 
-          color="#e63d3d" 
-          speed="3s" 
-          :thickness="3"
-        ><div class="btn-out">
-          退出登录
-        </div></StarBorder>
+        <StarBorder as="div" color="#e63d3d" speed="3s" :thickness="3">
+          <div class="btn-out">
+            退出登录
+          </div>
+        </StarBorder>
      </div>
    </div>

+    <el-dialog v-model="deleteDialogVisible" title="确认删除" width="500" center>
+      <span style="color: #fff; text-align: center; display: block;">
+        你真的想删除这个角色吗？
+      </span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="deleteDialogVisible = false">取消</el-button>
+          <el-button type="danger" @click="confirmDelete">
+            确定删除
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
    <!-- 创建角色对话框 -->
    <div v-if="showCreateDialog" class="dialog-overlay" @click="showCreateDialog = false">
      <div class="dialog" @click.stop>