update welcome window

2026-03-24 14:55:51 +07:00 · 2026-03-24 14:55:51 +07:00 · c8dbce1462
commit c8dbce1462
parent 39928b2615
5 changed files with 125 additions and 84 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -10,6 +10,7 @@
      "dependencies": {
        "@chenfengyuan/vue-qrcode": "^2.0.0",
        "pinia": "^3.0.1",
+        "qrcode-vue3": "^1.7.1",
        "vue": "^3.5.13",
        "vue-router": "^4.5.0"
      },
@ -4603,6 +4604,21 @@
        "node": ">=10.13.0"
      }
    },
+    "node_modules/qrcode-generator": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.5.2.tgz",
+      "integrity": "sha512-pItrW0Z9HnDBnFmgiNrY1uxRdri32Uh9EjNYLPVC2zZ3ZRIIEqBoDgm4DkvDwNNDHTK7FNkmr8zAa77BYc9xNw==",
+      "license": "MIT"
+    },
+    "node_modules/qrcode-vue3": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/qrcode-vue3/-/qrcode-vue3-1.7.1.tgz",
+      "integrity": "sha512-Xa82NslFJUqsnQbLtc1qO+xPEOeFaTRxktg3ugRd2Pk116kta1X+7GLSEPQj9gor8jWVyfmLmhYZHuANnRZoLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "qrcode-generator": "^1.4.4"
+      }
+    },
    "node_modules/qs": {
      "version": "6.14.0",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
--- a/package.json
+++ b/package.json
@ -15,6 +15,7 @@
  "dependencies": {
    "@chenfengyuan/vue-qrcode": "^2.0.0",
    "pinia": "^3.0.1",
+    "qrcode-vue3": "^1.7.1",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
--- a/src/components/MessageCloud.vue
+++ b/src/components/MessageCloud.vue
@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Action } from './models';
 import { apiLetsgo } from './client';
+import MessagePaper from './MessagePaper.vue';

 interface Props {
  action: Action
@ -26,95 +27,45 @@ async function letsgo(place: string) {
 </script>

 <template>
-  <div class="main">
-    <div class="message-cloud-3"></div>
-    <div class="message-cloud-2"></div>
-    <div class="message-cloud">
-      <div class="message-header">
-        {{ props.action.place }}: {{ props.action.name }}
-        <span class="collapse-icon" @click="clickCollapse">{{ props.action.isOpen ? '−' : '+' }}</span>
+  <MessagePaper>
+    <div class="message-header">
+      {{ props.action.place }}: {{ props.action.name }}
+      <span class="collapse-icon" @click="clickCollapse">{{ props.action.isOpen ? '−' : '+' }}</span>
+    </div>
+    <div v-show="props.action.isOpen">
+      <hr class="hr" />
+      <div class="message-content">
+        <div v-if="props.action.image.length">
+          <div class="message-image-border">
+            <img v-bind:src="props.action.image" class="message-image" />
+          </div>
+        </div>{{ props.action.text }}
      </div>
-      <div v-show="props.action.isOpen">
-        <hr class="hr" />
-        <div class="message-content">
-          <div v-if="props.action.image.length">
-            <div class="message-image-border">
-              <img v-bind:src="props.action.image" class="message-image" />
-            </div>
-          </div>{{ props.action.text }}
-        </div>
-        <div v-if="index == count - 1">
-          <hr class="hr" v-if="props.action.buttons?.length" />
-          <div v-for="door in props.action.buttons" :key="door.code" class="button-dialog"
-            v-on:click="letsgo(door.code)" :disabled="gameState !== 'RUN' || !door.show">
-            <div class="button-dialog-text">
-              {{ door.name }}
-            </div>
+      <div v-if="index == count - 1">
+        <hr class="hr" v-if="props.action.buttons?.length" />
+        <div v-for="door in props.action.buttons" :key="door.code" class="button-dialog" v-on:click="letsgo(door.code)"
+          :disabled="gameState !== 'RUN' || !door.show">
+          <div class="button-dialog-text">
+            {{ door.name }}
          </div>
        </div>
-        <hr class="hr" v-if="props.action.applications.length" />
-        <div class="message-footer" v-for="application in props.action.applications" :key="application.name">
-          Приложение: {{ application.name }}
-          <div class="application-label">{{ application.number }}</div>
-        </div>
+      </div>
+      <hr class="hr" v-if="props.action.applications.length" />
+      <div class="message-footer" v-for="application in props.action.applications" :key="application.name">
+        Приложение: {{ application.name }}
+        <div class="application-label">{{ application.number }}</div>
      </div>
    </div>
-  </div>
+  </MessagePaper>
 </template>

 <style scoped>
-.main {
-  position: relative;
-}
-
 .hr {
  margin: 10px 0;
  border: dashed 1px;
  border-color: black;
 }

-.message-cloud {
-  margin: 15px 0;
-  padding: 16px;
-  font-family: main;
-  color: black;
-  line-height: 20px;
-  font-size: 18px;
-  font-weight: 900;
-  position: relative;
-}
-
-.message-cloud,
-.message-cloud-2,
-.message-cloud-3 {
-  border-radius: 5px;
-  background-image: url("@/assets/paper.jpg");
-  background-size: cover;
-  display: flow-root;
-  box-shadow: 0px 0 5px black;
-}
-
-.message-cloud-2,
-.message-cloud-3 {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.message-cloud-2 {
-  transform: rotate(-3deg);
-  filter: brightness(50%);
-  height: 100%;
-  width: 100%;
-}
-
-.message-cloud-3 {
-  transform: rotate(2deg);
-  filter: brightness(80%);
-  height: 100%;
-  width: 100%;
-}
-
 .message-header {
  font-size: 20px;
 }
--- a/src/components/MessagePaper.vue
+++ b/src/components/MessagePaper.vue
@ -0,0 +1,61 @@
+<script setup lang="ts">
+/* код */
+</script>
+
+<template>
+  <div class="main">
+    <div class="message-cloud-3"></div>
+    <div class="message-cloud-2"></div>
+    <div class="message-cloud">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.main {
+  position: relative;
+}
+
+.message-cloud {
+  margin: 15px 0;
+  padding: 16px;
+  font-family: main;
+  color: black;
+  line-height: 20px;
+  font-size: 18px;
+  font-weight: 900;
+  position: relative;
+}
+
+.message-cloud,
+.message-cloud-2,
+.message-cloud-3 {
+  border-radius: 5px;
+  background-image: url("@/assets/paper.jpg");
+  background-size: cover;
+  display: flow-root;
+  box-shadow: 0px 0 5px black;
+}
+
+.message-cloud-2,
+.message-cloud-3 {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.message-cloud-2 {
+  transform: rotate(-3deg);
+  filter: brightness(50%);
+  height: 100%;
+  width: 100%;
+}
+
+.message-cloud-3 {
+  transform: rotate(2deg);
+  filter: brightness(80%);
+  height: 100%;
+  width: 100%;
+}
+</style>
--- a/src/components/WelcomeGameBlock.vue
+++ b/src/components/WelcomeGameBlock.vue
@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import VueQrcode from '@chenfengyuan/vue-qrcode';
+import MessagePaper from './MessagePaper.vue';

 interface QROptions {
  width?: number;
@ -15,7 +16,7 @@ const qrOptions = ref<QROptions>({
  margin: 1,
  color: {
    dark: '#303030',
-    light: 'f0f0f0'
+    light: 'none'
  }
 });

@ -29,15 +30,17 @@ const props = withDefaults(defineProps<Props>(), {})

 <template>
  <div>
-    <div class="qr">
-      <div>
-        {{ team }}
+    <MessagePaper>
+      <div class="qr">
+        <div class="team-name">
+          {{ team }}
+        </div>
+        <VueQrcode :value="props.qrurl" :options="qrOptions" tag="svg" class="qr-code" />
+        <div class="message">
+          Пора решать загадку
+        </div>
      </div>
-      <VueQrcode :value="props.qrurl" :options="qrOptions" tag="svg" class="qr-code" />
-      <div>
-        Пора решать загадку
-      </div>
-    </div>
+    </MessagePaper>
  </div>
 </template>

@ -46,4 +49,13 @@ const props = withDefaults(defineProps<Props>(), {})
  text-align: center;
  width: 200px;
 }
+
+.team-name {
+  margin: 10px 0;
+  font-size: 20px;
+}
+
+.message {
+  margin: 7px 0;
+}
 </style>