Merge pull request #94 from our-mini-games/feat-Chinese-chess

build: 使用antd@4.x 尝试修复线上弹窗不会自己关闭的问题
our-mini-games · Jan 8, 2024 · b4a4e87 · b4a4e87
2 parents 1701828 + 8429c9b
commit b4a4e87
Show file tree

Hide file tree

Showing 9 changed files with 430 additions and 62 deletions.
diff --git a/packages/Chinese-chess/.eslintrc-auto-import.json b/packages/Chinese-chess/.eslintrc-auto-import.json
@@ -51,6 +51,18 @@
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,
-    "watchSyncEffect": true
+    "watchSyncEffect": true,
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "toValue": true
   }
-}
+}
diff --git a/packages/Chinese-chess/auto-imports.d.ts b/packages/Chinese-chess/auto-imports.d.ts
@@ -1,4 +1,8 @@
-// Generated by 'unplugin-auto-import'
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
@@ -43,6 +47,7 @@ declare global {
   const toRaw: typeof import('vue')['toRaw']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const unref: typeof import('vue')['unref']
   const useAttrs: typeof import('vue')['useAttrs']
@@ -54,3 +59,9 @@ declare global {
   const watchPostEffect: typeof import('vue')['watchPostEffect']
   const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}
diff --git a/packages/Chinese-chess/components.d.ts b/packages/Chinese-chess/components.d.ts
@@ -1,14 +1,15 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     ABadge: typeof import('ant-design-vue/es')['Badge']
     AButton: typeof import('ant-design-vue/es')['Button']
+    AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputGroup: typeof import('ant-design-vue/es')['InputGroup']

diff --git a/packages/Chinese-chess/package.json b/packages/Chinese-chess/package.json
@@ -13,16 +13,16 @@
     "@types/lodash.clonedeep": "^4.5.9",
     "sass": "^1.56.0",
     "typescript": "^5.0.2",
-    "unplugin-auto-import": "^0.11.4",
-    "unplugin-vue-components": "^0.22.9",
+    "unplugin-auto-import": "^0.16.7",
+    "unplugin-vue-components": "^0.25.2",
     "vite": "^4.4.5",
     "vitest": "^0.24.3",
     "vue-tsc": "^1.0.9"
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
     "@vitejs/plugin-vue": "^4.5.2",
-    "ant-design-vue": "^3.2.15",
+    "ant-design-vue": "4.1.0",
     "chinese-chess-service": "^0.0.27",
     "lodash.clonedeep": "^4.5.0",
     "socket.io-client": "^4.7.2",

diff --git a/packages/Chinese-chess/src/App.vue b/packages/Chinese-chess/src/App.vue
@@ -1,37 +1,44 @@
 <template>
-  <div class="chinese-chess">
-    <a-button v-if="loading" @click="loading = false">放弃加载资源</a-button>
-    <a-spin
-      :spinning="loading"
-      tip="资源加载中..."
-    >
-      <input
-        v-if="!nickname"
-        placeholder="请输入您的昵称，按“回车”提交"
-        @keydown="handleMouseDown"
-      />
-
-      <template v-else>
-        <mode-selector
-          v-if="currentMode === null"
-          v-model:mode="currentMode"
+  <a-config-provider
+    :theme="{
+      algorithm: theme.defaultAlgorithm
+    }"
+  >
+    <div class="chinese-chess">
+      <a-button v-if="loading" @click="loading = false">放弃加载资源</a-button>
+      <a-spin
+        :spinning="loading"
+        tip="资源加载中..."
+      >
+        <input
+          v-if="!nickname"
+          placeholder="请输入您的昵称，按“回车”提交"
+          @keydown="handleMouseDown"
         />
 
-        <offline-game
-          v-else-if="currentMode === GameMode.OFFLINE"
-          v-model:mode="currentMode"
-        />
+        <template v-else>
+          <mode-selector
+            v-if="currentMode === null"
+            v-model:mode="currentMode"
+          />
 
-        <online-game
-          v-else
-          v-model:mode="currentMode"
-        />
-      </template>
-    </a-spin>
-  </div>
+          <offline-game
+            v-else-if="currentMode === GameMode.OFFLINE"
+            v-model:mode="currentMode"
+          />
+
+          <online-game
+            v-else
+            v-model:mode="currentMode"
+          />
+        </template>
+      </a-spin>
+    </div>
+  </a-config-provider>
 </template>
 
 <script setup lang="ts">
+import { theme } from 'ant-design-vue'
 import { GameMode, NICKNAME_KEY } from './definitions'
 import { loadResources } from './libs/Resource'
 import OnlineGame from './pages/OnlineGame/index.vue'

diff --git a/packages/Chinese-chess/src/assets/style.scss b/packages/Chinese-chess/src/assets/style.scss
@@ -37,6 +37,7 @@ body {
   line-height: 1.4;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   color: var(--black);
+  opacity: .1;
   // background-color: var(--light);
 }
 

diff --git a/packages/Chinese-chess/src/main.ts b/packages/Chinese-chess/src/main.ts
@@ -2,6 +2,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 
 import '@/assets/style.scss'
-import 'ant-design-vue/dist/antd.css'
+import 'ant-design-vue/dist/reset.css'
 
 createApp(App).mount('#app')
diff --git a/packages/Chinese-chess/src/pages/OnlineGame/GameMain.vue b/packages/Chinese-chess/src/pages/OnlineGame/GameMain.vue
@@ -146,7 +146,7 @@ const manual = computed(() => context.value?.manual ?? [])
 onMounted(async () => {
   if (gameMainRef.value) {
     gameInterface.value = createGameInterface(resources)
-    gameInterface.value.mount(gameMainRef.value)
+    gameInterface.value.mount(gameMainRef.value as Element)
 
     if (currentUserCamp.value === Camp.BLACK) {
       gameInterface.value.setRotate(Math.PI)
@@ -229,10 +229,10 @@ const handleReadyBtnClick = () => {
 
 watch(context, () => {
   if (gameInterface.value && context.value) {
-    handleContextChange(context.value, gameInterface.value)
+    handleContextChange(context.value, gameInterface.value as any)
   } else if (!gameInterface.value) {
     nextTick(() => {
-      handleContextChange(context.value!, gameInterface.value!)
+      handleContextChange(context.value!, gameInterface.value! as any)
     })
   }
 }, { immediate: true })