feat(game): 添加桌面端公告模态框并优化用户信息界面

- 新增 DesktopNoticeModal 组件用于显示活动公告 - 将登录模态框默认状态改为开启 - 重构用户信息模态框界面布局和样式 - 添加底部填充设计工具类 pb-design-* - 隐藏系统滚动条样式以提升视觉效果 - 在PC入口组件中集成公告模态框并暂时禁用登录和用户信息模态框
2026-05-08 11:19:12 +08:00
parent f98710d375
commit 9ee3192c49
11 changed files with 210 additions and 28 deletions
--- a/src/assets/system/avatar.webp
+++ b/src/assets/system/avatar.webp
--- a/src/assets/system/blue-btn.webp
+++ b/src/assets/system/blue-btn.webp
--- a/src/assets/system/green-btn.webp
+++ b/src/assets/system/green-btn.webp
--- a/src/assets/system/length-blue-btn.webp
+++ b/src/assets/system/length-blue-btn.webp
--- a/src/assets/system/length-green-btn.webp
+++ b/src/assets/system/length-green-btn.webp
--- a/src/assets/system/notice-bg.webp
+++ b/src/assets/system/notice-bg.webp
--- a/src/features/game/entry/pc-entry.tsx
+++ b/src/features/game/entry/pc-entry.tsx
@@ -4,6 +4,7 @@ import { DesktopControl } from '@/features/game/components/desktop/desktop-contr
 import { DesktopGameHistory } from '@/features/game/components/desktop/desktop-game-history.tsx'
 import { DesktopStatusLine } from '@/features/game/components/desktop/desktop-status.tsx'
 import DesktopLoginModal from '@/features/game/modal/desktop/desktop-login-modal.tsx'
+import DesktopNoticeModal from '@/features/game/modal/desktop/desktop-notice-modal.tsx'
 import DesktopRegisterModal from '@/features/game/modal/desktop/desktop-register-modal.tsx'
 import DesktopUserInfoModal from '@/features/game/modal/desktop/desktop-userInfo-modal.tsx'

@@ -40,11 +41,13 @@ export function PcEntry() {
        <DesktopControl />
      </div>
      {/*登录弹窗*/}
-      <DesktopLoginModal />
+      {/*<DesktopLoginModal />*/}
      {/*注册弹窗 */}
      {/*<DesktopRegisterModal />*/}
      {/* 用户信息弹窗 */}
-      <DesktopUserInfoModal />
+      {/*<DesktopUserInfoModal />*/}
+      {/*公告弹窗*/}
+      <DesktopNoticeModal />
    </>
  )
 }
--- a/src/features/game/modal/desktop/desktop-login-modal.tsx
+++ b/src/features/game/modal/desktop/desktop-login-modal.tsx
@@ -6,7 +6,7 @@ import { CenterModal } from '@/components/center-modal.tsx'
 import { SmartImage } from '@/components/smart-image.tsx'

 function DesktopLoginModal() {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(true)

  function handleSubmit() {
    setOpen(false)
--- a/src/features/game/modal/desktop/desktop-notice-modal.tsx
+++ b/src/features/game/modal/desktop/desktop-notice-modal.tsx
@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import lengthBlueBtn from '@/assets/system/length-blue-btn.webp'
+import lengthGreenBtn from '@/assets/system/length-green-btn.webp'
+import noticeBg from '@/assets/system/notice-bg.webp'
+import { CenterModal } from '@/components/center-modal.tsx'
+import { SmartImage } from '@/components/smart-image.tsx'
+
+function DesktopNoticeModal() {
+  const [open, setOpen] = useState(true)
+
+  function handleSubmit() {
+    setOpen(false)
+  }
+
+  return (
+    <CenterModal
+      open={open}
+      onClose={handleSubmit}
+      title={
+        <div className={'modal-title-glow text-design-26'}>
+          PENGUMUMAN ACARA
+        </div>
+      }
+      isNormalBg={true}
+      titleAlign="left"
+      className={'w-design-1000 h-design-690'}
+    >
+      <div className={'flex flex-col h-full w-full p-design-10 gap-design-30'}>
+        <div
+          className={
+            'w-full h-design-440 overflow-y-auto flex flex-col gap-design-20 bg-[#000000]/50 p-design-10 rounded-md'
+          }
+        >
+          <SmartImage
+            className={'w-full h-design-300 shrink-0 rounded-md'}
+            imgClassName={'object-contain object-center'}
+            alt={'notice'}
+            src={noticeBg}
+          />
+
+          <div className={'text-[#74B3BA] text-design-18 leading-[1.6]'}>
+            "Perjanjian Lisensi dan Layanan Game" (selanjutnya disebut sebagai
+            "Perjanjian ini") disepakati secara bersama-sama oleh Anda dan
+            Penyedia Layanan Game; Perjanjian ini merupakan kontrak yang
+            mengikat secara hukum. Anda sangat dianjurkan untuk membaca dengan
+            saksama dan memahami s epenuhnya isi dari setiap klausul—khususnya
+            klausul-klausul yang membebaskan atau membatasi tanggung jawab
+            (selanjutnya disebut sebagai "Klausul Pembebasan"),
+          </div>
+        </div>
+        <div className={'w-full flex justify-around'}>
+          <div
+            style={{
+              backgroundImage: `url(${lengthGreenBtn})`,
+              backgroundSize: '106% 108%',
+              backgroundRepeat: 'no-repeat',
+              backgroundPosition: 'center',
+            }}
+            className={
+              'w-design-270 h-design-72 pb-design-5 flex items-center justify-center text-design-20 font-bold'
+            }
+          >
+            Memeriksa
+          </div>
+
+          <div
+            style={{
+              backgroundImage: `url(${lengthBlueBtn})`,
+              backgroundSize: '100% 90%',
+              backgroundRepeat: 'no-repeat',
+              backgroundPosition: 'center',
+            }}
+            className={
+              'w-design-270 h-design-72 pb-design-5 flex items-center justify-center text-design-20 font-bold'
+            }
+          >
+            Memeriksa
+          </div>
+        </div>
+      </div>
+    </CenterModal>
+  )
+}
+
+export default DesktopNoticeModal
--- a/src/features/game/modal/desktop/desktop-userInfo-modal.tsx
+++ b/src/features/game/modal/desktop/desktop-userInfo-modal.tsx
@@ -1,7 +1,11 @@
 import { CircleUserRound, Mail } from 'lucide-react'
 import { useState } from 'react'
+import avatar from '@/assets/system/avatar.webp'
+import blueBtnBg from '@/assets/system/blue-btn.webp'
+import lengthBtnBg from '@/assets/system/length-blue-btn.webp'
 import userInfoBg from '@/assets/system/userInfo-bg.webp'
 import { CenterModal } from '@/components/center-modal.tsx'
+import { SmartImage } from '@/components/smart-image.tsx'
 import { cn } from '@/lib/untils'

 type UserInfoTabKey = 'profile' | 'message'
@@ -79,9 +83,8 @@ function DesktopUserInfoModal() {
                ) : null}

                <Icon
-                  size={60}
                  className={cn(
-                    'relative z-10 transition',
+                    'relative z-10 transition h-design-50 w-design-50',
                    isActive &&
                      'drop-shadow-[0_0_calc(var(--design-unit)*8)_rgba(254,238,176,0.5)]',
                  )}
@@ -100,33 +103,109 @@ function DesktopUserInfoModal() {
        </div>

        <div className={'flex-1'}>
-          <div
-            className={
-              'flex h-full w-full items-start justify-start bg-top bg-no-repeat px-design-40 py-design-32'
-            }
-            style={{
-              backgroundImage: `url(${userInfoBg})`,
-              backgroundSize: '120% 100%',
-            }}
-          >
-            {activeTab === 'profile' ? (
-              <div className="space-y-3 text-design-22 text-[#D7FAFF]">
-                <div className="modal-title-gold-glow text-design-28">
-                  个人信息
+          {activeTab === 'profile' ? (
+            <div
+              className={
+                'flex flex-col h-full w-full items-start justify-between bg-top bg-no-repeat px-design-40 py-design-32 text-[#6CCDCF] text-design-24'
+              }
+              style={{
+                backgroundImage: `url(${userInfoBg})`,
+                backgroundSize: '120% 100%',
+              }}
+            >
+              <div className={'flex items-center gap-design-30'}>
+                <SmartImage
+                  className={'h-design-100 w-design-100'}
+                  src={avatar}
+                  alt={'avatar'}
+                />
+                <div className={'flex flex-col gap-design-30'}>
+                  <div>NAMA ：Biomond Balance</div>
+                  <div>TEL ：12345678901</div>
                </div>
-                <div>UID: 10009231</div>
-                <div>账户等级: VIP 3</div>
-                <div>绑定手机: 138****8899</div>
              </div>
-            ) : (
-              <div className="space-y-3 text-design-22 text-[#D7FAFF]">
-                <div className="modal-title-gold-glow text-design-28">
-                  站内消息
+
+              <div className={'flex flex-col gap-design-20'}>
+                <div className={'flex flex-col gap-design-5'}>
+                  {[1, 2, 3, 4].map((item) => (
+                    <div key={item}>
+                      Tanggal Pendaftaran ：
+                      <span className={'text-design-18 text-[#599AA3]'}>
+                        2022-10-06 23：36
+                      </span>
+                    </div>
+                  ))}
+                </div>
+                <div
+                  className={
+                    'w-design-600 h-design-120 text-design-18  rounded-md bg-[#000000]/40 flex items-center justify-center'
+                  }
+                >
+                  Tanda tangan pribadi saya persis seperti jiwa saya—unik dan
+                  mus
                </div>
-                <div>您当前没有新的站内消息。</div>
              </div>
-            )}
-          </div>
+            </div>
+          ) : (
+            <div
+              className={
+                'relative flex h-full w-full items-start justify-start'
+              }
+            >
+              <div
+                className={
+                  'h-full w-full flex flex-col gap-design-10 bg-red-600 p-design-10 overflow-auto'
+                }
+              >
+                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
+                  <div
+                    key={item}
+                    className={
+                      'flex items-center bg-[#0A4252] px-design-15 py-design-15 rounded-md gap-design-20'
+                    }
+                  >
+                    <div className={'h-design-95 w-design-95 bg-black'}></div>
+                    <div className={'flex-1'}>
+                      <div>2026-10-10 08:32:56</div>
+                      <div>
+                        [Event Bonus Isi Ulang] Dari tanggal 1 hingga 7 Oktober
+                        2026, dapatkan pengembalian ...
+                      </div>
+                    </div>
+                    <div
+                      style={{
+                        backgroundImage: `url(${blueBtnBg})`,
+                        backgroundSize: '100% 100%',
+                      }}
+                      className={
+                        'w-design-150 h-design-64 flex items-center justify-center text-design-20 font-bold'
+                      }
+                    >
+                      Memeriksa
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              <div
+                className={
+                  'absolute bottom-0 left-0 w-full bg-[#266477]/70 rounded-md h-design-85 flex items-center justify-center'
+                }
+              >
+                <div
+                  style={{
+                    backgroundImage: `url(${lengthBtnBg})`,
+                    backgroundSize: '100% 100%',
+                  }}
+                  className={
+                    'w-design-275 h-design-65 flex items-center justify-center text-design-22 font-bold'
+                  }
+                >
+                  删除记录
+                </div>
+              </div>
+            </div>
+          )}
        </div>
      </div>
    </CenterModal>
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -93,6 +93,10 @@
  padding-left: calc(var(--design-unit) * --value(integer));
 }

+@utility pb-design-* {
+  padding-bottom: calc(var(--design-unit) * --value(integer));
+}
+
@utility pr-design-* {
  padding-right: calc(var(--design-unit) * --value(integer));
 }
@@ -126,6 +130,17 @@
    @apply h-full w-full;
  }

+  * {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  *::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+
  body {
    background:
      radial-gradient(circle at top, rgba(49, 208, 255, 0.12), transparent 28%),