Merge pull request #1 from Spythere/development

przystosowanie pod nowy adres API / poprawki responsywności i wyglądu
2026-05-02 21:18:13 +00:00 · 2023-11-29 15:38:06 +01:00
parent c5b639b068 0f54963065
commit 3e70170e5c
10 changed files with 198 additions and 312 deletions
@@ -1,3 +1,3 @@
-VITE_API_URL="https://stacjownik.spythere.pl"
+VITE_API_URL="https://stacjownik.spythere.eu"
 VITE_API_URL_DEV="http://localhost:3001"
-VITE_API_DEV="0"
+VITE_API_DEV=0
@@ -1,7 +1,7 @@
 {
  "name": "station-manager-2.0",
  "private": true,
-  "version": "2.1.0",
+  "version": "2.2.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -8,11 +8,10 @@
 import { defineComponent } from 'vue';
 import PopUpCard from './components/PopUpCard.vue';
 import { RouterView } from 'vue-router';
-import { AuthState } from './types/types';
-import { baseURL, useStore } from './store';
+import { useStore } from './store';
 import useLocalStorage from './mixins/useLocalStorage';
-import axios from 'axios';
 import { IUser } from './types/types';
+import client from './common/http';

 export default defineComponent({
  components: { PopUpCard },
@@ -33,14 +32,7 @@ export default defineComponent({
      try {
        this.tokenLoading = true;

-        const response = await axios.post<IUser>(
-          '/auth/token',
-          {},
-          {
-            baseURL,
-            withCredentials: true,
-          }
-        );
+        const response = await client.post<IUser>('/auth/token');

        this.store.setUserData(response.data);
        this.$router.push('/');
@@ -86,9 +78,17 @@ html {
  background-color: #1e2341;
  color: white;

-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: 700px) {
    font-size: calc(0.7vw + 0.7rem);
  }
+
+  font-size: 16px;
+}
+
+button,
+select,
+input {
+  font-size: inherit;
 }

 button {
@@ -96,13 +96,13 @@ button {
  outline: none;
  border: none;

-  background-color: #000000;
+  background-color: #0066ff;
  color: white;

-  padding: 0.5rem 0.75rem;
-  margin: 0.5rem 0;
+  padding: 0.5em 0.5em;

  font-weight: bold;
+  font-size: 0.9em;

  cursor: pointer;
  transition: all 75ms;
@@ -111,8 +111,9 @@ button {
    outline: 1px solid gold;
  }

-  &:hover {
-    color: gold;
+  &:hover,
+  &:focus-visible {
+    background-color: lighten($color: #0066ff, $amount: 10%);
  }
 }

@@ -164,4 +165,3 @@ button {
  background: #aaa;
 }
 </style>
-
@@ -0,0 +1,8 @@
+import axios from 'axios';
+
+const client = axios.create({
+  baseURL: import.meta.env['VITE_API_URL'],
+  withCredentials: true,
+});
+
+export default client;
@@ -1,39 +1,41 @@
 <template>
  <div class="table-actions">
-    <div class="pane info-pane">
+    <div class="info-pane">
      <div>
-        <span v-if="store.user">
-          Zalogowany jako <b>{{ store.user.name }}</b>
-        </span>
-        &bull;
-        <span class="info-file" :class="store.dataState">
-          <span v-if="store.dataState == 'LOADING'">Ładowanie danych...</span>
-          <span v-if="store.dataState == 'LOADED'">Załadowano dane z bazy!</span>
-          <span v-if="store.dataState == 'ERROR'">Błąd podczas pobierania danych!</span>
-        </span>
-        //
-        <span class="file-changes" style="color: salmon" v-if="store.unsavedChanges">Niezapisane zmiany!</span>
-        <span class="file-changes" style="color: #aaa" v-else>Brak niezapisanych zmian</span>
+        <img src="/favicon.svg" width="50" alt="" />
+      </div>
+
+      <div>
+        <div style="font-size: 0.75em; color: #ccc">v{{ packageVersion }}</div>
+        <div>
+          <span v-if="store.user">
+            Zalogowany jako <b>{{ store.user.name }}</b>
+          </span>
+          &bull;
+          <span class="info-file" :class="store.dataState">
+            <span v-if="store.dataState == 'LOADING'">Ładowanie danych...</span>
+            <span v-if="store.dataState == 'LOADED'">Załadowano dane z bazy!</span>
+            <span v-if="store.dataState == 'ERROR'">Błąd podczas pobierania danych!</span>
+          </span>
+        </div>
+
+        <div>
+          <span class="file-changes" style="color: salmon" v-if="store.unsavedChanges">Niezapisane zmiany!</span>
+          <span class="file-changes" style="color: #aaa" v-else>Brak niezapisanych zmian</span>
+        </div>
      </div>
    </div>

    <div class="pane actions-pane">
      <button @click="addNewStation">Dodaj nową stację</button>
      <button @click="confirmLoadData">Odśwież dane</button>
-      &nbsp;
-      <button @click="confirmUpdateList" :data-disabled="!store.unsavedChanges" :disabled="!store.unsavedChanges">
-        Zapisz zmiany
-      </button>
+      <button @click="confirmUpdateList" :data-disabled="!store.unsavedChanges" :disabled="!store.unsavedChanges">Zapisz zmiany</button>
      <button @click="signOut">Wyloguj się</button>
    </div>

    <div class="pane notify-pane">
-      <label id="notify">
-        <input
-          type="checkbox"
-          v-model="store.notifyDiscord"
-          @input="onNotifyCheckboxChange(($event.target as HTMLInputElement)!.checked)"
-        />
+      <label class="notify">
+        <input type="checkbox" v-model="store.notifyDiscord" @input="onNotifyCheckboxChange(($event.target as HTMLInputElement)!.checked)" />
        <span>
          Powiadom o zmianach: <b>{{ store.notifyDiscord ? 'TAK' : 'NIE' }}</b>
        </span>
@@ -41,21 +43,14 @@
    </div>

    <div class="pane search-pane">
-      <input
-        class="search"
-        ref="search"
-        type="text"
-        v-model="store.searchedSceneryName"
-        placeholder="Wpisz nazwę scenerii..."
-        width="350"
-      />
+      <input class="search" ref="search" type="text" v-model="store.searchedSceneryName" placeholder="Wpisz nazwę scenerii..." width="350" />

-      <button style="margin-left: 0.5em" @click="clearInput">Wyczyść</button>
+      <button @click="clearInput">Wyczyść</button>
    </div>

    <div class="pane">
      Pokazuj maks.
-      <input type="number" min="1" v-model="store.maxVisibleResults" style="width: 50px; margin: 0 0.5em" />
+      <input type="number" min="1" v-model="store.maxVisibleResults" style="width: 50px" />
      wyników
    </div>

@@ -66,13 +61,11 @@
    </div>

    <div class="pane">
-      <button @click="changelogVisible = !changelogVisible">
-        {{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog
-      </button>
+      <button @click="changelogVisible = !changelogVisible">{{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog</button>
    </div>

    <div class="changelog" v-if="changelogVisible">
-      <div style="margin-bottom: 0.25em">Changelog:</div>
+      <div>Changelog:</div>

      <div v-html="changelog || 'brak zmian'"></div>
    </div>
@@ -82,10 +75,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import routesMixin from '../mixins/routesMixin';
-import { useStore, baseURL } from '../store';
-import { AuthState, Availability, ChangeProp, HeaderTypes, SceneryRoutesInfo, SceneryRowItem } from '../types/types';
+import { useStore } from '../store';
+import { Availability, ChangeProp, HeaderTypes, SceneryRoutesInfo, SceneryRowItem } from '../types/types';
 import { getAvailabilityValue } from '../types/typeUitls';
-import axios from 'axios';
+import client from '../common/http';
+
+import { version } from '../../package.json';

 export default defineComponent({
  setup() {
@@ -97,6 +92,7 @@ export default defineComponent({
  data() {
    return {
      changelogVisible: false,
+      packageVersion: version,
    };
  },

@@ -115,17 +111,12 @@ export default defineComponent({

            if (/id|name/.test(propChange)) continue;

-            let value =
-              typeof changeItem[propChange] === 'boolean'
-                ? changeItem[propChange]
-                  ? 'TAK'
-                  : 'NIE'
-                : changeItem[propChange];
+            let value = typeof changeItem[propChange] === 'boolean' ? (changeItem[propChange] ? 'TAK' : 'NIE') : changeItem[propChange];

            if (propChange == 'availability') value = getAvailabilityValue(changeItem[propChange] as Availability);
            if (propChange == 'routesInfo') value = this.getRouteNames(changeItem[propChange] as SceneryRoutesInfo[]);

-            itemChanges.push(`<i>${(HeaderTypes as any)[propChange]}:</i> ${value || '-'}`);
+            itemChanges.push(`<i style='color: white'>${(HeaderTypes as any)[propChange]}:</i> ${value ?? '-'}`);
          }

          return `<b class='text--accent'>${changeItem.name} -></b> ` + itemChanges.join('; ');
@@ -142,9 +133,7 @@ export default defineComponent({
    },

    confirmRestoreList() {
-      const confirmed = confirm(
-        'Czy na pewno chcesz zresetować listę do ustawień z pliku? Wszelkie niezapisane zmiany zostaną utracone!'
-      );
+      const confirmed = confirm('Czy na pewno chcesz zresetować listę do ustawień z pliku? Wszelkie niezapisane zmiany zostaną utracone!');

      if (confirmed) this.restoreList();
    },
@@ -156,7 +145,7 @@ export default defineComponent({
    },

    async signOut() {
-      await axios.post('/auth/logout', {}, { baseURL, withCredentials: true });
+      await client.post('/auth/logout');

      this.$router.push('/login');
      this.store.removeUserData();
@@ -182,6 +171,7 @@ export default defineComponent({
        this.store.fetchSceneriesData();
      } catch (error) {
        this.store.alertMessage = 'Ups! Wystąpił błąd podczas zapisywania danych!';
+        console.error(error);
      }
    },

@@ -189,11 +179,7 @@ export default defineComponent({
      const name = prompt('Nazwa nowej scenerii');
      if (!name) return;

-      if (
-        this.store.stationList.some(
-          (station) => station.name.toLocaleLowerCase('pl-PL') == name.toLocaleLowerCase('pl-PL')
-        )
-      ) {
+      if (this.store.stationList.some((station) => station.name.toLocaleLowerCase('pl-PL') == name.toLocaleLowerCase('pl-PL'))) {
        this.store.alertMessage = 'Sceneria o takiej nazwie już istnieje!';
        return;
      }
@@ -258,6 +244,13 @@ export default defineComponent({

 <style lang="scss" scoped>
 button {
+  background-color: #3c5a89;
+
+  &:hover:not([data-disabled='true']),
+  &:focus-visible {
+    background-color: lighten($color: #3c5a89, $amount: 10%);
+  }
+
  &[data-disabled='true'] {
    user-select: none;
    -moz-user-select: none;
@@ -267,6 +260,24 @@ button {
  }
 }

+.table-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+
+.pane {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.info-pane {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
 .info-file {
  color: greenyellow;
 }
@@ -283,55 +294,53 @@ button {
  color: gold;
 }

-.search {
-  color: black;
-
-  border: 1px solid white;
-  outline: none;
-  appearance: none;
-
-  padding: 0.35em 0.4em;
-}
-
-.pane {
+.search-pane {
  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}

-.actions-pane {
-  margin-top: 1em;
+  gap: 0.5em;

-  button {
-    margin: 0.5em 0.5em 0 0;
+  .search {
+    color: black;
+
+    border: 1px solid white;
+    outline: none;
+    appearance: none;
+
+    padding: 0.35em 0.4em;
  }
 }

-.notify-pane {
-  margin: 1em 0;
+.actions-pane {
+  display: flex;
+  gap: 0.5em;
 }

-.search-pane {
-  margin-top: 0.5em;
-}
-
-label#notify {
+label.notify {
+  display: flex;
  cursor: pointer;
  text-align: center;

  color: #000;

  span {
-    padding: 0.3em 0.25em;
+    padding: inherit;
    background-color: salmon;
+    padding: 0.3em 2em;
  }

  input {
-    display: none;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;

    &:checked + span {
      background-color: lightblue;
    }
+
+    &:focus-visible + span {
+      outline: 1px solid gold;
+    }
  }
 }
 .changelog {
@@ -65,10 +65,11 @@ export default defineComponent({

 .card_body {
  display: grid;
-  grid-template-rows: 60px 80%;
+  grid-template-rows: auto 1fr auto;
  height: 90vh;
  max-height: 550px;
  padding: 0.5em;
+  gap: 1em;
 }

 .card_content {
@@ -82,12 +83,11 @@ export default defineComponent({
 h1 {
  text-align: center;
  margin: 0;
-  padding: 0.5em 0;
+  font-size: 2.5em;
 }

 .card_actions {
-  display: flex;
-  justify-content: flex-end;
+  display: grid;
+  grid-template-columns: minmax(100px, 1fr);
 }
 </style>
-
@@ -1,8 +1,6 @@
 import { defineStore } from 'pinia';
-import { AuthState, ILoginResponse, IStore, IUser, SceneryRowItem } from './types/types';
-import axios from 'axios';
-
-export const baseURL = import.meta.env['VITE_API_URL'];
+import { AuthState, IStore, IUser, SceneryRowItem } from './types/types';
+import client from './common/http';

 export const useStore = defineStore('store', {
  state: () =>
@@ -33,42 +31,33 @@ export const useStore = defineStore('store', {
    } as IStore),

  actions: {
-    fetchSceneriesData() {
+    async fetchSceneriesData() {
      this.dataState = 'LOADING';

-      const data = axios.get<SceneryRowItem[]>(`api/getSceneries`, {
-        baseURL,
-      });
-
-      data
-        .then((res) => {
-          this.dataState = 'LOADED';
-          this.backupList = JSON.parse(JSON.stringify(res.data));
-          this.stationList = res.data;
-          this.unsavedChanges = false;
-          this.changeList = [];
-        })
-        .catch(() => {
-          this.dataState = 'ERROR';
-        });
+      try {
+        const data = (await client.get<SceneryRowItem[]>(`api/getSceneries`)).data;
+        this.dataState = 'LOADED';
+        this.backupList = JSON.parse(JSON.stringify(data));
+        this.stationList = data;
+        this.unsavedChanges = false;
+        this.changeList = [];
+      } catch (error: any) {
+        this.dataState = 'ERROR';
+        console.error('Błąd podczas ładowania danych: ', error?.response || error);
+      }
    },

    async updateSceneriesData(mappedChangeList: any[]) {
-      console.log(mappedChangeList);
-
-      const response = await axios.post(
-        '/manager/updateSceneryList',
-        {
+      try {
+        const response = await client.post('manager/updateSceneryList', {
          changeList: mappedChangeList,
          notify: this.notifyDiscord,
-        },
-        {
-          baseURL,
-          withCredentials: true,
-        }
-      );
+        });

-      return response;
+        return response;
+      } catch (error) {
+        throw error;
+      }
    },

    setUserData(responseData: IUser) {
@@ -14,7 +14,7 @@
      <br />
      <input type="password" id="password" v-model="password" />
      <br />
-      <button>{{ loginState == LoginState.LOADING ? 'Logowanie...' : 'Zaloguj się' }}</button>
+      <button>{{ isLoading ? 'Logowanie...' : 'Zaloguj się' }}</button>
    </form>
    <p style="color: yellow; height: 25px">{{ errorMessage }}</p>
  </div>
@@ -22,9 +22,9 @@

 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore, baseURL } from '../store';
+import { useStore } from '../store';
 import { AuthState, IUser } from '../types/types';
-import axios from 'axios';
+import client from '../common/http';

 enum LoginState {
  INITIALIZED = 0,
@@ -38,6 +38,7 @@ export default defineComponent({
    return {
      errorMessage: '',
      loginState: LoginState.INITIALIZED,
+      isLoading: false,
    };
  },

@@ -55,21 +56,15 @@ export default defineComponent({
  methods: {
    async signIn(e: Event) {
      this.loginState = LoginState.LOADING;
+      this.isLoading = true;

      try {
-        const response = await axios.post<IUser>(
-          'auth/login',
-          { username: this.name, password: this.password },
-          {
-            baseURL,
-            withCredentials: true,
-          }
-        );
+        const response = await client.post<IUser>('auth/login', { username: this.name, password: this.password });

+        this.$router.push('/');
        this.store.setUserData(response.data);

        this.loginState = LoginState.LOADED;
-        this.$router.push('/');
      } catch (e: any) {
        this.loginState = LoginState.ERROR;
        this.store.removeUserData();
@@ -89,6 +84,8 @@ export default defineComponent({

        this.errorMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
        return false;
+      } finally {
+        this.isLoading = false;
      }

      return true;
@@ -19,9 +19,7 @@
          <tr v-for="(station, row) in store.sortedStationList" tabindex="0">
            <td v-for="(value, propName) in headerNameList" @click="changeProperty(station, row, propName as string)">
              <span v-if="propName === 'url'" :style="station.url ? 'color: gold' : 'color: gray;'">URL</span>
-              <span v-else-if="propName === 'projectUrl'" :style="station.projectUrl ? 'color: gold' : 'color: gray;'"
-                >URL</span
-              >
+              <span v-else-if="propName === 'projectUrl'" :style="station.projectUrl ? 'color: gold' : 'color: gray;'">URL</span>

              <span v-else-if="propName === 'checkpoints'">{{ station[propName] ? 'POKAŻ' : 'DODAJ' }}</span>

@@ -119,9 +117,7 @@ export default defineComponent({
        return;
      }

-      const stationListRow = this.store.stationList.findIndex(
-        (station) => station.name == this.store.sortedStationList[row].name
-      );
+      const stationListRow = this.store.stationList.findIndex((station) => station.name == this.store.sortedStationList[row].name);

      if (stationListRow == -1) return;
      const oldValue = (this.store.stationList[stationListRow] as any)[propertyName];
@@ -134,16 +130,13 @@ export default defineComponent({

      let newValue = prompt(`Zmień wartość dla rubryki ${this.headerNameList[propertyName]}`, oldValue || '');
      if (newValue == null) return;
-      (this.store.stationList[stationListRow] as any)[propertyName] =
-        typeof oldValue === 'number' ? parseInt(newValue) : newValue;
+      (this.store.stationList[stationListRow] as any)[propertyName] = typeof oldValue === 'number' ? parseInt(newValue) : newValue;
      // this.$set(this.stationList[stationListRow], propertyName, parseInt(newValue));
      this.addChange(station, propertyName, oldValue, typeof oldValue === 'number' ? parseInt(newValue) : newValue);
    },

    changeCheckpoints(row: number) {
-      const stationListRow = this.store.stationList.findIndex(
-        (station) => station.name == this.store.sortedStationList[row].name
-      );
+      const stationListRow = this.store.stationList.findIndex((station) => station.name == this.store.sortedStationList[row].name);

      if (stationListRow == -1) return;
      const oldCheckpoints = this.store.stationList[stationListRow].checkpoints;
@@ -7,16 +7,6 @@
  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.18.11.tgz"
  integrity sha512-9JKn5vN+hDt0Hdqn1PiJ2guflwP+B6Ga8qbDuoF0PzzVhrzsKIJo8yGqVk6CmMHiMei9w1C1Bp9IMJSIK+HPIQ==

-"@esbuild/android-arm@0.15.12":
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.15.12.tgz#e548b10a5e55b9e10537a049ebf0bc72c453b769"
-  integrity sha512-IC7TqIqiyE0MmvAhWkl/8AEzpOtbhRNDo7aph47We1NbE5w2bt/Q+giAhe0YYeVpYnIhGMcuZY92qDK6dQauvA==
-
-"@esbuild/linux-loong64@0.15.12":
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.12.tgz#475b33a2631a3d8ca8aa95ee127f9a61d95bf9c1"
-  integrity sha512-tZEowDjvU7O7I04GYvWQOS4yyP9E/7YlsB0jjw1Ycukgr2ycEzKyIk5tms5WnLBymaewc6VmRKnn5IJWgK4eFw==
-
 "@vitejs/plugin-vue@^3.2.0":
  version "3.2.0"
  resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz"
@@ -87,15 +77,7 @@
    estree-walker "^2.0.2"
    source-map "^0.6.1"

-"@vue/compiler-dom@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz"
-  integrity sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==
-  dependencies:
-    "@vue/compiler-core" "3.2.37"
-    "@vue/shared" "3.2.37"
-
-"@vue/compiler-dom@3.2.41", "@vue/compiler-dom@^3.2.40":
+"@vue/compiler-dom@^3.2.40", "@vue/compiler-dom@3.2.41":
  version "3.2.41"
  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz"
  integrity sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==
@@ -103,21 +85,13 @@
    "@vue/compiler-core" "3.2.41"
    "@vue/shared" "3.2.41"

-"@vue/compiler-sfc@3.2.37":
+"@vue/compiler-dom@3.2.37":
  version "3.2.37"
-  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz"
-  integrity sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==
+  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz"
+  integrity sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==
  dependencies:
-    "@babel/parser" "^7.16.4"
    "@vue/compiler-core" "3.2.37"
-    "@vue/compiler-dom" "3.2.37"
-    "@vue/compiler-ssr" "3.2.37"
-    "@vue/reactivity-transform" "3.2.37"
    "@vue/shared" "3.2.37"
-    estree-walker "^2.0.2"
-    magic-string "^0.25.7"
-    postcss "^8.1.10"
-    source-map "^0.6.1"

 "@vue/compiler-sfc@^3.2.40":
  version "3.2.41"
@@ -135,6 +109,22 @@
    postcss "^8.1.10"
    source-map "^0.6.1"

+"@vue/compiler-sfc@3.2.37":
+  version "3.2.37"
+  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz"
+  integrity sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.37"
+    "@vue/compiler-dom" "3.2.37"
+    "@vue/compiler-ssr" "3.2.37"
+    "@vue/reactivity-transform" "3.2.37"
+    "@vue/shared" "3.2.37"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+    postcss "^8.1.10"
+    source-map "^0.6.1"
+
 "@vue/compiler-ssr@3.2.37":
  version "3.2.37"
  resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz"
@@ -178,13 +168,6 @@
    estree-walker "^2.0.2"
    magic-string "^0.25.7"

-"@vue/reactivity@3.2.37":
-  version "3.2.37"
-  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz"
-  integrity sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==
-  dependencies:
-    "@vue/shared" "3.2.37"
-
 "@vue/reactivity@^3.2.40":
  version "3.2.41"
  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.41.tgz"
@@ -192,6 +175,13 @@
  dependencies:
    "@vue/shared" "3.2.41"

+"@vue/reactivity@3.2.37":
+  version "3.2.37"
+  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz"
+  integrity sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==
+  dependencies:
+    "@vue/shared" "3.2.37"
+
 "@vue/runtime-core@3.2.37":
  version "3.2.37"
  resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz"
@@ -217,16 +207,16 @@
    "@vue/compiler-ssr" "3.2.37"
    "@vue/shared" "3.2.37"

+"@vue/shared@^3.2.40", "@vue/shared@3.2.41":
+  version "3.2.41"
+  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.41.tgz"
+  integrity sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==
+
 "@vue/shared@3.2.37":
  version "3.2.37"
  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz"
  integrity sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==

-"@vue/shared@3.2.41", "@vue/shared@^3.2.40":
-  version "3.2.41"
-  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.41.tgz"
-  integrity sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==
-
 anymatch@~3.1.2:
  version "3.1.2"
  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz"
@@ -310,106 +300,11 @@ delayed-stream@~1.0.0:
  resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==

-esbuild-android-64@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.15.12.tgz#5e8151d5f0a748c71a7fbea8cee844ccf008e6fc"
-  integrity sha512-MJKXwvPY9g0rGps0+U65HlTsM1wUs9lbjt5CU19RESqycGFDRijMDQsh68MtbzkqWSRdEtiKS1mtPzKneaAI0Q==
-
-esbuild-android-arm64@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.12.tgz#5ee72a6baa444bc96ffcb472a3ba4aba2cc80666"
-  integrity sha512-Hc9SEcZbIMhhLcvhr1DH+lrrec9SFTiRzfJ7EGSBZiiw994gfkVV6vG0sLWqQQ6DD7V4+OggB+Hn0IRUdDUqvA==
-
-esbuild-darwin-64@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.12.tgz#70047007e093fa1b3ba7ef86f9b3fa63db51fe25"
-  integrity sha512-qkmqrTVYPFiePt5qFjP8w/S+GIUMbt6k8qmiPraECUWfPptaPJUGkCKrWEfYFRWB7bY23FV95rhvPyh/KARP8Q==
-
-esbuild-darwin-arm64@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.12.tgz#41c951f23d9a70539bcca552bae6e5196696ae04"
-  integrity sha512-z4zPX02tQ41kcXMyN3c/GfZpIjKoI/BzHrdKUwhC/Ki5BAhWv59A9M8H+iqaRbwpzYrYidTybBwiZAIWCLJAkw==
-
-esbuild-freebsd-64@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.12.tgz#a761b5afd12bbedb7d56c612e9cfa4d2711f33f0"
-  integrity sha512-XFL7gKMCKXLDiAiBjhLG0XECliXaRLTZh6hsyzqUqPUf/PY4C6EJDTKIeqqPKXaVJ8+fzNek88285krSz1QECw==
-
-esbuild-freebsd-arm64@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.12.tgz#6b0839d4d58deabc6cbd96276eb8cbf94f7f335e"
-  integrity sha512-jwEIu5UCUk6TjiG1X+KQnCGISI+ILnXzIzt9yDVrhjug2fkYzlLbl0K43q96Q3KB66v6N1UFF0r5Ks4Xo7i72g==
-
-esbuild-linux-32@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.15.12.tgz#bd50bfe22514d434d97d5150977496e2631345b4"
-  integrity sha512-uSQuSEyF1kVzGzuIr4XM+v7TPKxHjBnLcwv2yPyCz8riV8VUCnO/C4BF3w5dHiVpCd5Z1cebBtZJNlC4anWpwA==
-
 esbuild-linux-64@0.15.12:
  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.15.12.tgz#074bb2b194bf658245f8490f29c01ffcdfa8c931"
+  resolved "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.12.tgz"
  integrity sha512-QcgCKb7zfJxqT9o5z9ZUeGH1k8N6iX1Y7VNsEi5F9+HzN1OIx7ESxtQXDN9jbeUSPiRH1n9cw6gFT3H4qbdvcA==

-esbuild-linux-arm64@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.12.tgz#3bf789c4396dc032875a122988efd6f3733f28f5"
-  integrity sha512-HtNq5xm8fUpZKwWKS2/YGwSfTF+339L4aIA8yphNKYJckd5hVdhfdl6GM2P3HwLSCORS++++7++//ApEwXEuAQ==
-
-esbuild-linux-arm@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.12.tgz#b91b5a8d470053f6c2c9c8a5e67ec10a71fe4a67"
-  integrity sha512-Wf7T0aNylGcLu7hBnzMvsTfEXdEdJY/hY3u36Vla21aY66xR0MS5I1Hw8nVquXjTN0A6fk/vnr32tkC/C2lb0A==
-
-esbuild-linux-mips64le@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.12.tgz#2fb54099ada3c950a7536dfcba46172c61e580e2"
-  integrity sha512-Qol3+AvivngUZkTVFgLpb0H6DT+N5/zM3V1YgTkryPYFeUvuT5JFNDR3ZiS6LxhyF8EE+fiNtzwlPqMDqVcc6A==
-
-esbuild-linux-ppc64le@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.12.tgz#9e3b8c09825fb27886249dfb3142a750df29a1b7"
-  integrity sha512-4D8qUCo+CFKaR0cGXtGyVsOI7w7k93Qxb3KFXWr75An0DHamYzq8lt7TNZKoOq/Gh8c40/aKaxvcZnTgQ0TJNg==
-
-esbuild-linux-riscv64@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.12.tgz#923d0f5b6e12ee0d1fe116b08e4ae4478fe40693"
-  integrity sha512-G9w6NcuuCI6TUUxe6ka0enjZHDnSVK8bO+1qDhMOCtl7Tr78CcZilJj8SGLN00zO5iIlwNRZKHjdMpfFgNn1VA==
-
-esbuild-linux-s390x@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.12.tgz#3b1620220482b96266a0c6d9d471d451a1eab86f"
-  integrity sha512-Lt6BDnuXbXeqSlVuuUM5z18GkJAZf3ERskGZbAWjrQoi9xbEIsj/hEzVnSAFLtkfLuy2DE4RwTcX02tZFunXww==
-
-esbuild-netbsd-64@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.12.tgz#276730f80da646859b1af5a740e7802d8cd73e42"
-  integrity sha512-jlUxCiHO1dsqoURZDQts+HK100o0hXfi4t54MNRMCAqKGAV33JCVvMplLAa2FwviSojT/5ZG5HUfG3gstwAG8w==
-
-esbuild-openbsd-64@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.12.tgz#bd0eea1dd2ca0722ed489d88c26714034429f8ae"
-  integrity sha512-1o1uAfRTMIWNOmpf8v7iudND0L6zRBYSH45sofCZywrcf7NcZA+c7aFsS1YryU+yN7aRppTqdUK1PgbZVaB1Dw==
-
-esbuild-sunos-64@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.12.tgz#5e56bf9eef3b2d92360d6d29dcde7722acbecc9e"
-  integrity sha512-nkl251DpoWoBO9Eq9aFdoIt2yYmp4I3kvQjba3jFKlMXuqQ9A4q+JaqdkCouG3DHgAGnzshzaGu6xofGcXyPXg==
-
-esbuild-windows-32@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.15.12.tgz#a4f1a301c1a2fa7701fcd4b91ef9d2620cf293d0"
-  integrity sha512-WlGeBZHgPC00O08luIp5B2SP4cNCp/PcS+3Pcg31kdcJPopHxLkdCXtadLU9J82LCfw4TVls21A6lilQ9mzHrw==
-
-esbuild-windows-64@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.12.tgz"
-  integrity sha512-VActO3WnWZSN//xjSfbiGOSyC+wkZtI8I4KlgrTo5oHJM6z3MZZBCuFaZHd8hzf/W9KPhF0lY8OqlmWC9HO5AA==
-
-esbuild-windows-arm64@0.15.12:
-  version "0.15.12"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.12.tgz#9a7266404334a86be800957eaee9aef94c3df328"
-  integrity sha512-Of3MIacva1OK/m4zCNIvBfz8VVROBmQT+gRX6pFTLPngFYcj6TFH/12VveAqq1k9VB2l28EoVMNMUCcmsfwyuA==
-
 esbuild@^0.15.9:
  version "0.15.12"
  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.15.12.tgz"
@@ -464,11 +359,6 @@ form-data@^4.0.0:
    combined-stream "^1.0.8"
    mime-types "^2.1.12"

-fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
-
 function-bind@^1.1.1:
  version "1.1.1"
  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@@ -630,7 +520,7 @@ rollup@^2.79.1:
  optionalDependencies:
    fsevents "~2.3.2"

-sass@^1.55.0:
+sass@*, sass@^1.55.0:
  version "1.55.0"
  resolved "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz"
  integrity sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==
@@ -639,7 +529,7 @@ sass@^1.55.0:
    immutable "^4.0.0"
    source-map-js ">=0.6.2 <2.0.0"

-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
+source-map-js@^1.0.2, "source-map-js@>=0.6.2 <2.0.0":
  version "1.0.2"
  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -666,12 +556,12 @@ to-regex-range@^5.0.1:
  dependencies:
    is-number "^7.0.0"

-typescript@^4.8.4:
+typescript@*, typescript@^4.8.4, typescript@>=4.4.4:
  version "4.8.4"
  resolved "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz"
  integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==

-vite@^3.2.1:
+vite@^3.0.0, vite@^3.2.1:
  version "3.2.1"
  resolved "https://registry.npmjs.org/vite/-/vite-3.2.1.tgz"
  integrity sha512-ADtMkfHuWq4tskJsri2n2FZkORO8ZyhI+zIz7zTrDAgDEtct1jdxOg3YsZBfHhKjmMoWLOSCr+64qrEDGo/DbQ==
@@ -711,7 +601,7 @@ vue-tsc@^1.0.9:
    "@volar/vue-language-core" "1.0.9"
    "@volar/vue-typescript" "1.0.9"

-vue@^3.2.37:
+"vue@^2.6.14 || ^3.2.0", "vue@^3.0.0-0 || ^2.6.0", vue@^3.2.0, vue@^3.2.25, vue@^3.2.37, vue@3.2.37:
  version "3.2.37"
  resolved "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz"
  integrity sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==