From 31105e89c89fd9581455ee39d8f3025db82e1f43 Mon Sep 17 00:00:00 2001
From: Shikong <919411476@qq.com>
Date: Sat, 25 Feb 2023 22:45:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E5=90=88=20Quasar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../.storybook/preview.ts                     |  12 +
 .../matrix-middle-service-web/package.json    |  11 +-
 .../postcss.config.cjs                        |   6 +
 .../matrix-middle-service-web/src/App.vue     |   2 +-
 .../src/components/HelloWorld.vue             |   2 +-
 .../matrix-middle-service-web/src/index.css   |   4 +
 .../matrix-middle-service-web/src/main.ts     |  43 +-
 .../src/quasar-variables.sass                 |  12 +
 .../src/router/index.ts                       |  31 ++
 .../src/router/routes.ts                      |  10 +
 .../src/stores/index.ts                       |  18 +
 .../tailwind.config.cjs                       |   9 +
 .../matrix-middle-service-web/vite.config.ts  |  10 +-
 frontend/matrix-middle-service-web/yarn.lock  | 389 +++++++++++++++++-
 14 files changed, 541 insertions(+), 18 deletions(-)
 create mode 100644 frontend/matrix-middle-service-web/postcss.config.cjs
 create mode 100644 frontend/matrix-middle-service-web/src/index.css
 create mode 100644 frontend/matrix-middle-service-web/src/quasar-variables.sass
 create mode 100644 frontend/matrix-middle-service-web/src/router/index.ts
 create mode 100644 frontend/matrix-middle-service-web/src/router/routes.ts
 create mode 100644 frontend/matrix-middle-service-web/src/stores/index.ts
 create mode 100644 frontend/matrix-middle-service-web/tailwind.config.cjs

diff --git a/frontend/matrix-middle-service-web/.storybook/preview.ts b/frontend/matrix-middle-service-web/.storybook/preview.ts
index 7503580..e32fea8 100644
--- a/frontend/matrix-middle-service-web/.storybook/preview.ts
+++ b/frontend/matrix-middle-service-web/.storybook/preview.ts
@@ -1,4 +1,16 @@
 import type { Preview } from "@storybook/vue3";
+import '../src/index.css'
+
+// Import icon libraries
+import '@quasar/extras/material-icons/material-icons.css'
+import '@quasar/extras/fontawesome-v5/fontawesome-v5.css'
+
+// A few examples for animations from Animate.css:
+// import @quasar/extras/animate/fadeIn.css
+// import @quasar/extras/animate/fadeOut.css
+
+// Import Quasar css
+import 'quasar/src/css/index.sass'
 
 const preview: Preview = {
   parameters: {
diff --git a/frontend/matrix-middle-service-web/package.json b/frontend/matrix-middle-service-web/package.json
index b52c270..2ad72f7 100644
--- a/frontend/matrix-middle-service-web/package.json
+++ b/frontend/matrix-middle-service-web/package.json
@@ -11,10 +11,15 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "vue": "^3.2.45"
+    "@quasar/extras": "^1.15.11",
+    "pinia": "^2.0.30",
+    "quasar": "^2.11.5",
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
+    "@quasar/vite-plugin": "^1.3.0",
     "@storybook/addon-actions": "^7.0.0-beta.54",
     "@storybook/addon-essentials": "^7.0.0-beta.54",
     "@storybook/addon-interactions": "^7.0.0-beta.54",
@@ -25,10 +30,14 @@
     "@storybook/vue3": "^7.0.0-beta.54",
     "@storybook/vue3-vite": "^7.0.0-beta.54",
     "@vitejs/plugin-vue": "^4.0.0",
+    "autoprefixer": "latest",
     "babel-loader": "^8.3.0",
+    "postcss": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "sass": "1.32.0",
     "storybook": "^7.0.0-beta.54",
+    "tailwindcss": "latest",
     "typescript": "^4.9.3",
     "vite": "^4.1.0",
     "vue-loader": "^16.8.3",
diff --git a/frontend/matrix-middle-service-web/postcss.config.cjs b/frontend/matrix-middle-service-web/postcss.config.cjs
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/frontend/matrix-middle-service-web/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontend/matrix-middle-service-web/src/App.vue b/frontend/matrix-middle-service-web/src/App.vue
index bb666a8..b3e89cb 100644
--- a/frontend/matrix-middle-service-web/src/App.vue
+++ b/frontend/matrix-middle-service-web/src/App.vue
@@ -14,7 +14,7 @@ import HelloWorld from './components/HelloWorld.vue'
   <HelloWorld msg="Vite + Vue" />
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .logo {
   height: 6em;
   padding: 1.5em;
diff --git a/frontend/matrix-middle-service-web/src/components/HelloWorld.vue b/frontend/matrix-middle-service-web/src/components/HelloWorld.vue
index 5230910..00571f1 100644
--- a/frontend/matrix-middle-service-web/src/components/HelloWorld.vue
+++ b/frontend/matrix-middle-service-web/src/components/HelloWorld.vue
@@ -10,7 +10,7 @@ const count = ref(0)
   <h1>{{ msg }}</h1>
 
   <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
+    <q-btn type="button" @click="count++">count is {{ count }}</q-btn>
     <p>
       Edit
       <code>components/HelloWorld.vue</code> to test HMR
diff --git a/frontend/matrix-middle-service-web/src/index.css b/frontend/matrix-middle-service-web/src/index.css
new file mode 100644
index 0000000..a3319c7
--- /dev/null
+++ b/frontend/matrix-middle-service-web/src/index.css
@@ -0,0 +1,4 @@
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/frontend/matrix-middle-service-web/src/main.ts b/frontend/matrix-middle-service-web/src/main.ts
index 2425c0f..6ac3e1b 100644
--- a/frontend/matrix-middle-service-web/src/main.ts
+++ b/frontend/matrix-middle-service-web/src/main.ts
@@ -1,5 +1,44 @@
 import { createApp } from 'vue'
-import './style.css'
 import App from './App.vue'
+import "./style.css"
 
-createApp(App).mount('#app')
+import { Quasar } from 'quasar'
+import quasarLang from 'quasar/lang/zh-CN'
+import './index.css'
+
+// Import icon libraries
+import '@quasar/extras/material-icons/material-icons.css'
+import '@quasar/extras/fontawesome-v5/fontawesome-v5.css'
+
+// A few examples for animations from Animate.css:
+// import @quasar/extras/animate/fadeIn.css
+// import @quasar/extras/animate/fadeOut.css
+
+// Import Quasar css
+import 'quasar/src/css/index.sass'
+
+import Store from "matrix-middle-service-web/src/stores";
+import Router from "matrix-middle-service-web/src/router";
+
+let app = createApp(App);
+app.use(Quasar, {
+    plugins: {}, // import Quasar plugins and add here
+    lang: quasarLang,
+    /*
+    config: {
+      brand: {
+        // primary: '#e46262',
+        // ... or all other brand colors
+      },
+      notify: {...}, // default set of options for Notify Quasar plugin
+      loading: {...}, // default set of options for Loading Quasar plugin
+      loadingBar: { ... }, // settings for LoadingBar Quasar plugin
+      // ..and many more (check Installation card on each Quasar component/directive/plugin)
+    }
+    */
+})
+
+app.use(Store)
+app.use(Router)
+
+app.mount('#app')
diff --git a/frontend/matrix-middle-service-web/src/quasar-variables.sass b/frontend/matrix-middle-service-web/src/quasar-variables.sass
new file mode 100644
index 0000000..e0cd4f8
--- /dev/null
+++ b/frontend/matrix-middle-service-web/src/quasar-variables.sass
@@ -0,0 +1,12 @@
+// FILE (create it): src/quasar-variables.sass
+
+$primary   : #1976D2
+$secondary : #26A69A
+$accent    : #9C27B0
+
+$dark      : #1D1D1D
+
+$positive  : #21BA45
+$negative  : #C10015
+$info      : #31CCEC
+$warning   : #F2C037
diff --git a/frontend/matrix-middle-service-web/src/router/index.ts b/frontend/matrix-middle-service-web/src/router/index.ts
new file mode 100644
index 0000000..781bd03
--- /dev/null
+++ b/frontend/matrix-middle-service-web/src/router/index.ts
@@ -0,0 +1,31 @@
+import {
+    createRouter,
+    createWebHashHistory,
+} from 'vue-router';
+
+import routes from './routes';
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Router instance.
+ */
+
+export default function Router(/* { store, ssrContext } */) {
+    const createHistory = createWebHashHistory;
+
+    const Router = createRouter({
+        scrollBehavior: () => ({left: 0, top: 0}),
+        routes,
+
+        // Leave this as is and make changes in quasar.conf.js instead!
+        // quasar.conf.js -> build -> vueRouterMode
+        // quasar.conf.js -> build -> publicPath
+        history: createHistory("/"),
+    });
+
+    return Router;
+};
diff --git a/frontend/matrix-middle-service-web/src/router/routes.ts b/frontend/matrix-middle-service-web/src/router/routes.ts
new file mode 100644
index 0000000..3f84b33
--- /dev/null
+++ b/frontend/matrix-middle-service-web/src/router/routes.ts
@@ -0,0 +1,10 @@
+import { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+    {
+        path: '/',
+        component: () => import('matrix-middle-service-web/src/components/HelloWorld.vue'),
+    },
+];
+
+export default routes;
diff --git a/frontend/matrix-middle-service-web/src/stores/index.ts b/frontend/matrix-middle-service-web/src/stores/index.ts
new file mode 100644
index 0000000..c1e2d79
--- /dev/null
+++ b/frontend/matrix-middle-service-web/src/stores/index.ts
@@ -0,0 +1,18 @@
+import {createPinia, defineStore} from 'pinia'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default function Store(/* { ssrContext } */) {
+    const pinia = createPinia()
+    // You can add Pinia plugins here
+    // pinia.use(SomePiniaPlugin)
+
+    return pinia
+}
diff --git a/frontend/matrix-middle-service-web/tailwind.config.cjs b/frontend/matrix-middle-service-web/tailwind.config.cjs
new file mode 100644
index 0000000..f03dc7b
--- /dev/null
+++ b/frontend/matrix-middle-service-web/tailwind.config.cjs
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [],
+  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/frontend/matrix-middle-service-web/vite.config.ts b/frontend/matrix-middle-service-web/vite.config.ts
index 47f3de7..8c6d491 100644
--- a/frontend/matrix-middle-service-web/vite.config.ts
+++ b/frontend/matrix-middle-service-web/vite.config.ts
@@ -1,6 +1,7 @@
 import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import * as path from "path";
+import {quasar, transformAssetUrls} from "@quasar/vite-plugin";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -14,5 +15,12 @@ export default defineConfig({
             "matrix-middle-service-web/src": path.resolve(__dirname, "src"),
         }
     },
-    plugins: [vue()],
+    plugins: [
+        vue({
+            template: {transformAssetUrls},
+        }),
+        quasar({
+            sassVariables: 'src/quasar-variables.sass'
+        }),
+    ],
 })
diff --git a/frontend/matrix-middle-service-web/yarn.lock b/frontend/matrix-middle-service-web/yarn.lock
index afb86fd..5e5560c 100644
--- a/frontend/matrix-middle-service-web/yarn.lock
+++ b/frontend/matrix-middle-service-web/yarn.lock
@@ -1776,6 +1776,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@quasar/extras@npm:^1.15.11":
+  version: 1.15.11
+  resolution: "@quasar/extras@npm:1.15.11"
+  checksum: 96a04424221c4ab308904f6396572b5ba8374fbb5b366941c623b0192432180d6e7a2385d842a8a77b8d3dca3072c8adf0861b565ff7c07510f678a2f151f68c
+  languageName: node
+  linkType: hard
+
+"@quasar/vite-plugin@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@quasar/vite-plugin@npm:1.3.0"
+  peerDependencies:
+    "@vitejs/plugin-vue": ^2.0.0 || ^3.0.0 || ^4.0.0
+    quasar: ^2.8.0
+    vite: ^2.0.0 || ^3.0.0 || ^4.0.0
+    vue: ^3.0.0
+  checksum: d1fdc8a2bd6651eb2798f759735d2ed6a825b36777014ed25fbe3595154500a7477db17d4877c2d731d7fe7b687d4c6c60515bea420f84543cd99ba44cea778d
+  languageName: node
+  linkType: hard
+
 "@sinclair/typebox@npm:^0.25.16":
   version: 0.25.24
   resolution: "@sinclair/typebox@npm:0.25.24"
@@ -3255,6 +3274,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/devtools-api@npm:^6.4.5, @vue/devtools-api@npm:^6.5.0":
+  version: 6.5.0
+  resolution: "@vue/devtools-api@npm:6.5.0"
+  checksum: ec819ef3a426e91d09e9cfefd2827e9ed8ec9d62bb3b3e0674f3da8c7e92a4b879c3b777dc7329172ca6fe2670b62dd5580d23160339208f0f5ae038f2e504ad
+  languageName: node
+  linkType: hard
+
 "@vue/reactivity-transform@npm:3.2.47":
   version: 3.2.47
   resolution: "@vue/reactivity-transform@npm:3.2.47"
@@ -3345,7 +3371,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^7.1.1":
+"acorn-node@npm:^1.8.2":
+  version: 1.8.2
+  resolution: "acorn-node@npm:1.8.2"
+  dependencies:
+    acorn: ^7.0.0
+    acorn-walk: ^7.0.0
+    xtend: ^4.0.2
+  checksum: 02e1564a1ccf8bd1fcefcd01235398af4a9effaf032c5397994ddd275590a72894cb3e26e4b82579ccdda1e48ade7486aef61e771ddae3563ca452b927f443d8
+  languageName: node
+  linkType: hard
+
+"acorn-walk@npm:^7.0.0":
+  version: 7.2.0
+  resolution: "acorn-walk@npm:7.2.0"
+  checksum: 9252158a79b9d92f1bc0dd6acc0fcfb87a67339e84bcc301bb33d6078936d27e35d606b4d35626d2962cd43c256d6f27717e70cbe15c04fff999ab0b2260b21f
+  languageName: node
+  linkType: hard
+
+"acorn@npm:^7.0.0, acorn@npm:^7.1.1":
   version: 7.4.1
   resolution: "acorn@npm:7.4.1"
   bin:
@@ -3513,6 +3557,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"arg@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "arg@npm:5.0.2"
+  checksum: 6c69ada1a9943d332d9e5382393e897c500908d91d5cb735a01120d5f71daf1b339b7b8980cbeaba8fd1afc68e658a739746179e4315a26e8a28951ff9930078
+  languageName: node
+  linkType: hard
+
 "argparse@npm:^1.0.7":
   version: 1.0.10
   resolution: "argparse@npm:1.0.10"
@@ -3619,6 +3670,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"autoprefixer@npm:latest":
+  version: 10.4.13
+  resolution: "autoprefixer@npm:10.4.13"
+  dependencies:
+    browserslist: ^4.21.4
+    caniuse-lite: ^1.0.30001426
+    fraction.js: ^4.2.0
+    normalize-range: ^0.1.2
+    picocolors: ^1.0.0
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.1.0
+  bin:
+    autoprefixer: bin/autoprefixer
+  checksum: dcb1cb7ae96a3363d65d82e52f9a0a7d8c982256f6fd032d7e1ec311f099c23acfebfd517ff8e96bf93f716a66c4ea2b80c60aa19efd2f474ce434bd75ef7b79
+  languageName: node
+  linkType: hard
+
 "available-typed-arrays@npm:^1.0.5":
   version: 1.0.5
   resolution: "available-typed-arrays@npm:1.0.5"
@@ -3851,7 +3920,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.21.3, browserslist@npm:^4.21.5":
+"browserslist@npm:^4.21.3, browserslist@npm:^4.21.4, browserslist@npm:^4.21.5":
   version: 4.21.5
   resolution: "browserslist@npm:4.21.5"
   dependencies:
@@ -3977,6 +4046,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"camelcase-css@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "camelcase-css@npm:2.0.1"
+  checksum: 1cec2b3b3dcb5026688a470b00299a8db7d904c4802845c353dbd12d9d248d3346949a814d83bfd988d4d2e5b9904c07efe76fecd195a1d4f05b543e7c0b56b1
+  languageName: node
+  linkType: hard
+
 "camelcase@npm:^5.3.1":
   version: 5.3.1
   resolution: "camelcase@npm:5.3.1"
@@ -3991,7 +4067,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001449":
+"caniuse-lite@npm:^1.0.30001426, caniuse-lite@npm:^1.0.30001449":
   version: 1.0.30001457
   resolution: "caniuse-lite@npm:1.0.30001457"
   checksum: f311a7c5098681962402a86a0a367014ee91c3135395ee68bbfaf45caf0e36d581e42d7c5b1526ce99484a228e6cf5cf0e400678292c65f5a21512a3fc7a5fb6
@@ -4042,7 +4118,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.5.3":
+"chokidar@npm:>=2.0.0 <4.0.0, chokidar@npm:^3.5.3":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
   dependencies:
@@ -4154,7 +4230,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:~1.1.4":
+"color-name@npm:^1.1.4, color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
   checksum: b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610
@@ -4338,6 +4414,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cssesc@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "cssesc@npm:3.0.0"
+  bin:
+    cssesc: bin/cssesc
+  checksum: f8c4ababffbc5e2ddf2fa9957dda1ee4af6048e22aeda1869d0d00843223c1b13ad3f5d88b51caa46c994225eacb636b764eb807a8883e2fb6f99b4f4e8c48b2
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^2.6.8":
   version: 2.6.21
   resolution: "csstype@npm:2.6.21"
@@ -4457,6 +4542,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"defined@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "defined@npm:1.0.1"
+  checksum: b1a852300bdb57f297289b55eafdd0c517afaa3ec8190e78fce91b9d8d0c0369d4505ecbdacfd3d98372e664f4a267d9bd793938d4a8c76209c9d9516fbe2101
+  languageName: node
+  linkType: hard
+
 "defu@npm:^6.1.2":
   version: 6.1.2
   resolution: "defu@npm:6.1.2"
@@ -4551,6 +4643,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detective@npm:^5.2.1":
+  version: 5.2.1
+  resolution: "detective@npm:5.2.1"
+  dependencies:
+    acorn-node: ^1.8.2
+    defined: ^1.0.0
+    minimist: ^1.2.6
+  bin:
+    detective: bin/detective.js
+  checksum: dc4601bbc6be850edb3c2dab7a0eaf5a6169a15ad201679c66d40ea1986df816eeaecd590047f15b0780285f3eeea13b82dca0d4c52a47e744a571e326a72dc9
+  languageName: node
+  linkType: hard
+
+"didyoumean@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "didyoumean@npm:1.2.2"
+  checksum: d5d98719d58b3c2fa59663c4c42ba9716f1fd01245c31d5fce31915bd3aa26e6aac149788e007358f778ebbd68a2256eb5973e8ca6f221df221ba060115acf2e
+  languageName: node
+  linkType: hard
+
 "diff@npm:^5.0.0":
   version: 5.1.0
   resolution: "diff@npm:5.1.0"
@@ -4567,6 +4679,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dlv@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "dlv@npm:1.1.3"
+  checksum: d7381bca22ed11933a1ccf376db7a94bee2c57aa61e490f680124fa2d1cd27e94eba641d9f45be57caab4f9a6579de0983466f620a2cd6230d7ec93312105ae7
+  languageName: node
+  linkType: hard
+
 "doctrine@npm:^3.0.0":
   version: 3.0.0
   resolution: "doctrine@npm:3.0.0"
@@ -5002,7 +5121,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.9":
+"fast-glob@npm:^3.2.12, fast-glob@npm:^3.2.9":
   version: 3.2.12
   resolution: "fast-glob@npm:3.2.12"
   dependencies:
@@ -5184,6 +5303,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fraction.js@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "fraction.js@npm:4.2.0"
+  checksum: 8c76a6e21dedea87109d6171a0ac77afa14205794a565d71cb10d2925f629a3922da61bf45ea52dbc30bce4d8636dc0a27213a88cbd600eab047d82f9a3a94c5
+  languageName: node
+  linkType: hard
+
 "fresh@npm:0.5.2":
   version: 0.5.2
   resolution: "fresh@npm:0.5.2"
@@ -5387,6 +5513,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob-parent@npm:^6.0.2":
+  version: 6.0.2
+  resolution: "glob-parent@npm:6.0.2"
+  dependencies:
+    is-glob: ^4.0.3
+  checksum: c13ee97978bef4f55106b71e66428eb1512e71a7466ba49025fc2aec59a5bfb0954d5abd58fc5ee6c9b076eef4e1f6d3375c2e964b88466ca390da4419a786a8
+  languageName: node
+  linkType: hard
+
 "glob-promise@npm:^6.0.2":
   version: 6.0.2
   resolution: "glob-promise@npm:6.0.2"
@@ -5959,7 +6094,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^4.0.1, is-glob@npm:~4.0.1":
+"is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
   version: 4.0.3
   resolution: "is-glob@npm:4.0.3"
   dependencies:
@@ -6487,6 +6622,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lilconfig@npm:^2.0.5, lilconfig@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "lilconfig@npm:2.0.6"
+  checksum: 40a3cd72f103b1be5975f2ac1850810b61d4053e20ab09be8d3aeddfe042187e1ba70b4651a7e70f95efa1642e7dc8b2ae395b317b7d7753b241b43cef7c0f7d
+  languageName: node
+  linkType: hard
+
 "lines-and-columns@npm:^1.1.6":
   version: 1.2.4
   resolution: "lines-and-columns@npm:1.2.4"
@@ -6721,6 +6863,8 @@ __metadata:
   resolution: "matrix-middle-service-web@workspace:."
   dependencies:
     "@babel/core": ^7.21.0
+    "@quasar/extras": ^1.15.11
+    "@quasar/vite-plugin": ^1.3.0
     "@storybook/addon-actions": ^7.0.0-beta.54
     "@storybook/addon-essentials": ^7.0.0-beta.54
     "@storybook/addon-interactions": ^7.0.0-beta.54
@@ -6731,14 +6875,21 @@ __metadata:
     "@storybook/vue3": ^7.0.0-beta.54
     "@storybook/vue3-vite": ^7.0.0-beta.54
     "@vitejs/plugin-vue": ^4.0.0
+    autoprefixer: latest
     babel-loader: ^8.3.0
+    pinia: ^2.0.30
+    postcss: latest
+    quasar: ^2.11.5
     react: ^18.2.0
     react-dom: ^18.2.0
+    sass: 1.32.0
     storybook: ^7.0.0-beta.54
+    tailwindcss: latest
     typescript: ^4.9.3
     vite: ^4.1.0
     vue: ^3.2.45
     vue-loader: ^16.8.3
+    vue-router: ^4.1.6
     vue-tsc: ^1.0.24
   languageName: unknown
   linkType: soft
@@ -7271,7 +7422,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.4":
+"micromatch@npm:^4.0.4, micromatch@npm:^4.0.5":
   version: 4.0.5
   resolution: "micromatch@npm:4.0.5"
   dependencies:
@@ -7619,6 +7770,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"normalize-range@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "normalize-range@npm:0.1.2"
+  checksum: 9b2f14f093593f367a7a0834267c24f3cb3e887a2d9809c77d8a7e5fd08738bcd15af46f0ab01cc3a3d660386f015816b5c922cea8bf2ee79777f40874063184
+  languageName: node
+  linkType: hard
+
 "normalize-url@npm:2.0.1":
   version: 2.0.1
   resolution: "normalize-url@npm:2.0.1"
@@ -7670,6 +7828,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object-hash@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "object-hash@npm:3.0.0"
+  checksum: 80b4904bb3857c52cc1bfd0b52c0352532ca12ed3b8a6ff06a90cd209dfda1b95cee059a7625eb9da29537027f68ac4619363491eedb2f5d3dddbba97494fd6c
+  languageName: node
+  linkType: hard
+
 "object-inspect@npm:^1.9.0":
   version: 1.12.3
   resolution: "object-inspect@npm:1.12.3"
@@ -7966,6 +8131,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pify@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "pify@npm:2.3.0"
+  checksum: 9503aaeaf4577acc58642ad1d25c45c6d90288596238fb68f82811c08104c800e5a7870398e9f015d82b44ecbcbef3dc3d4251a1cbb582f6e5959fe09884b2ba
+  languageName: node
+  linkType: hard
+
 "pify@npm:^3.0.0":
   version: 3.0.0
   resolution: "pify@npm:3.0.0"
@@ -7980,6 +8152,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pinia@npm:^2.0.30":
+  version: 2.0.32
+  resolution: "pinia@npm:2.0.32"
+  dependencies:
+    "@vue/devtools-api": ^6.5.0
+    vue-demi: "*"
+  peerDependencies:
+    "@vue/composition-api": ^1.4.0
+    typescript: ">=4.4.4"
+    vue: ^2.6.14 || ^3.2.0
+  peerDependenciesMeta:
+    "@vue/composition-api":
+      optional: true
+    typescript:
+      optional: true
+  checksum: cd02a7cb852b055a37bf91570b2831ac493b1e79ffd0096901177e5764f4b1fe392939c6a5c08d46962dc42db8f4f2750b8af250639bb5fa2e5b4270b6507670
+  languageName: node
+  linkType: hard
+
 "pirates@npm:^4.0.4, pirates@npm:^4.0.5":
   version: 4.0.5
   resolution: "pirates@npm:4.0.5"
@@ -8023,7 +8214,77 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.1.10, postcss@npm:^8.4.21":
+"postcss-import@npm:^14.1.0":
+  version: 14.1.0
+  resolution: "postcss-import@npm:14.1.0"
+  dependencies:
+    postcss-value-parser: ^4.0.0
+    read-cache: ^1.0.0
+    resolve: ^1.1.7
+  peerDependencies:
+    postcss: ^8.0.0
+  checksum: cd45d406e90f67cdab9524352e573cc6b4462b790934a05954e929a6653ebd31288ceebc8ce3c3ed7117ae672d9ebbec57df0bceec0a56e9b259c2e71d47ca86
+  languageName: node
+  linkType: hard
+
+"postcss-js@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "postcss-js@npm:4.0.1"
+  dependencies:
+    camelcase-css: ^2.0.1
+  peerDependencies:
+    postcss: ^8.4.21
+  checksum: 5c1e83efeabeb5a42676193f4357aa9c88f4dc1b3c4a0332c132fe88932b33ea58848186db117cf473049fc233a980356f67db490bd0a7832ccba9d0b3fd3491
+  languageName: node
+  linkType: hard
+
+"postcss-load-config@npm:^3.1.4":
+  version: 3.1.4
+  resolution: "postcss-load-config@npm:3.1.4"
+  dependencies:
+    lilconfig: ^2.0.5
+    yaml: ^1.10.2
+  peerDependencies:
+    postcss: ">=8.0.9"
+    ts-node: ">=9.0.0"
+  peerDependenciesMeta:
+    postcss:
+      optional: true
+    ts-node:
+      optional: true
+  checksum: 1c589504c2d90b1568aecae8238ab993c17dba2c44f848a8f13619ba556d26a1c09644d5e6361b5784e721e94af37b604992f9f3dc0483e687a0cc1cc5029a34
+  languageName: node
+  linkType: hard
+
+"postcss-nested@npm:6.0.0":
+  version: 6.0.0
+  resolution: "postcss-nested@npm:6.0.0"
+  dependencies:
+    postcss-selector-parser: ^6.0.10
+  peerDependencies:
+    postcss: ^8.2.14
+  checksum: 2105dc52cd19747058f1a46862c9e454b5a365ac2e7135fc1015d67a8fe98ada2a8d9ee578e90f7a093bd55d3994dd913ba5ff1d5e945b4ed9a8a2992ecc8f10
+  languageName: node
+  linkType: hard
+
+"postcss-selector-parser@npm:^6.0.10, postcss-selector-parser@npm:^6.0.11":
+  version: 6.0.11
+  resolution: "postcss-selector-parser@npm:6.0.11"
+  dependencies:
+    cssesc: ^3.0.0
+    util-deprecate: ^1.0.2
+  checksum: 0b01aa9c2d2c8dbeb51e9b204796b678284be9823abc8d6d40a8b16d4149514e922c264a8ed4deb4d6dbced564b9be390f5942c058582d8656351516d6c49cde
+  languageName: node
+  linkType: hard
+
+"postcss-value-parser@npm:^4.0.0, postcss-value-parser@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "postcss-value-parser@npm:4.2.0"
+  checksum: 819ffab0c9d51cf0acbabf8996dffbfafbafa57afc0e4c98db88b67f2094cb44488758f06e5da95d7036f19556a4a732525e84289a425f4f6fd8e412a9d7442f
+  languageName: node
+  linkType: hard
+
+"postcss@npm:^8.0.9, postcss@npm:^8.1.10, postcss@npm:^8.4.21, postcss@npm:latest":
   version: 8.4.21
   resolution: "postcss@npm:8.4.21"
   dependencies:
@@ -8359,6 +8620,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"quasar@npm:^2.11.5":
+  version: 2.11.6
+  resolution: "quasar@npm:2.11.6"
+  checksum: ef2a330302dea7a80a6070a891fa5a45ff1c98586688b9a702f2fd6ae026f1888fce3a033c158ab0e3d8a371807134e16499d37b51dfc875b2e8bd71438ce515
+  languageName: node
+  linkType: hard
+
 "query-string@npm:^5.0.1":
   version: 5.1.1
   resolution: "query-string@npm:5.1.1"
@@ -8377,6 +8645,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"quick-lru@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "quick-lru@npm:5.1.1"
+  checksum: a516faa25574be7947969883e6068dbe4aa19e8ef8e8e0fd96cddd6d36485e9106d85c0041a27153286b0770b381328f4072aa40d3b18a19f5f7d2b78b94b5ed
+  languageName: node
+  linkType: hard
+
 "ramda@npm:^0.28.0":
   version: 0.28.0
   resolution: "ramda@npm:0.28.0"
@@ -8457,6 +8732,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"read-cache@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "read-cache@npm:1.0.0"
+  dependencies:
+    pify: ^2.3.0
+  checksum: cffc728b9ede1e0667399903f9ecaf3789888b041c46ca53382fa3a06303e5132774dc0a96d0c16aa702dbac1ea0833d5a868d414f5ab2af1e1438e19e6657c6
+  languageName: node
+  linkType: hard
+
 "read-pkg-up@npm:^7.0.1":
   version: 7.0.1
   resolution: "read-pkg-up@npm:7.0.1"
@@ -8673,7 +8957,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.1.6, resolve@npm:^1.10.0, resolve@npm:^1.14.2, resolve@npm:^1.15.1, resolve@npm:^1.22.1":
+"resolve@npm:^1.1.6, resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.14.2, resolve@npm:^1.15.1, resolve@npm:^1.22.1":
   version: 1.22.1
   resolution: "resolve@npm:1.22.1"
   dependencies:
@@ -8686,7 +8970,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@^1.1.6#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.15.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>":
+"resolve@patch:resolve@^1.1.6#~builtin<compat/resolve>, resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.15.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>":
   version: 1.22.1
   resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=c3c19d"
   dependencies:
@@ -8815,6 +9099,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sass@npm:1.32.0":
+  version: 1.32.0
+  resolution: "sass@npm:1.32.0"
+  dependencies:
+    chokidar: ">=2.0.0 <4.0.0"
+  bin:
+    sass: sass.js
+  checksum: 49ffc4e15178ef2166420d9db2426fdc40f4c8c7a98b961ed05be7750f4de6077a651b6978dbc7a02750c85ab12375471d3a1a75b64d0cd7c30a852377a77485
+  languageName: node
+  linkType: hard
+
 "scheduler@npm:^0.23.0":
   version: 0.23.0
   resolution: "scheduler@npm:0.23.0"
@@ -9279,6 +9574,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwindcss@npm:latest":
+  version: 3.2.7
+  resolution: "tailwindcss@npm:3.2.7"
+  dependencies:
+    arg: ^5.0.2
+    chokidar: ^3.5.3
+    color-name: ^1.1.4
+    detective: ^5.2.1
+    didyoumean: ^1.2.2
+    dlv: ^1.1.3
+    fast-glob: ^3.2.12
+    glob-parent: ^6.0.2
+    is-glob: ^4.0.3
+    lilconfig: ^2.0.6
+    micromatch: ^4.0.5
+    normalize-path: ^3.0.0
+    object-hash: ^3.0.0
+    picocolors: ^1.0.0
+    postcss: ^8.0.9
+    postcss-import: ^14.1.0
+    postcss-js: ^4.0.0
+    postcss-load-config: ^3.1.4
+    postcss-nested: 6.0.0
+    postcss-selector-parser: ^6.0.11
+    postcss-value-parser: ^4.2.0
+    quick-lru: ^5.1.1
+    resolve: ^1.22.1
+  peerDependencies:
+    postcss: ^8.0.9
+  bin:
+    tailwind: lib/cli.js
+    tailwindcss: lib/cli.js
+  checksum: 819446bf67acea1fc738f345d80f328b7bb6e6ef4b24070249a11219307045881cf97baed6258cbdcede7fa18886e9c9c41fd0fa087b3e987cf2948560a2f164
+  languageName: node
+  linkType: hard
+
 "tar-fs@npm:^1.13.0":
   version: 1.16.3
   resolution: "tar-fs@npm:1.16.3"
@@ -9907,6 +10238,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-demi@npm:*":
+  version: 0.13.11
+  resolution: "vue-demi@npm:0.13.11"
+  peerDependencies:
+    "@vue/composition-api": ^1.0.0-rc.1
+    vue: ^3.0.0-0 || ^2.6.0
+  peerDependenciesMeta:
+    "@vue/composition-api":
+      optional: true
+  bin:
+    vue-demi-fix: bin/vue-demi-fix.js
+    vue-demi-switch: bin/vue-demi-switch.js
+  checksum: 0fbe9bf8ab7fe498ffa2bbd0cfc8f6f43a6bbaa5eda3e20ef1b70dca7c8b0ddb216a7ff2f632b694fe0735805638975abb441c621ec0bd2e6d4656353f316c15
+  languageName: node
+  linkType: hard
+
 "vue-docgen-api@npm:^4.40.0":
   version: 4.56.4
   resolution: "vue-docgen-api@npm:4.56.4"
@@ -9948,6 +10295,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-router@npm:^4.1.6":
+  version: 4.1.6
+  resolution: "vue-router@npm:4.1.6"
+  dependencies:
+    "@vue/devtools-api": ^6.4.5
+  peerDependencies:
+    vue: ^3.2.0
+  checksum: c7f0156ac03a9561d110f5ff778121eee7c8c154be6ec5064558ba22ab5237db36f29ffffc95cc16d692cc68a26df0c434f395401c0e3b48f782c7bed51391c6
+  languageName: node
+  linkType: hard
+
 "vue-template-compiler@npm:^2.7.14":
   version: 2.7.14
   resolution: "vue-template-compiler@npm:2.7.14"
@@ -10185,7 +10543,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"xtend@npm:^4.0.0, xtend@npm:~4.0.1":
+"xtend@npm:^4.0.0, xtend@npm:^4.0.2, xtend@npm:~4.0.1":
   version: 4.0.2
   resolution: "xtend@npm:4.0.2"
   checksum: ac5dfa738b21f6e7f0dd6e65e1b3155036d68104e67e5d5d1bde74892e327d7e5636a076f625599dc394330a731861e87343ff184b0047fef1360a7ec0a5a36a
@@ -10213,6 +10571,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^1.10.2":
+  version: 1.10.2
+  resolution: "yaml@npm:1.10.2"
+  checksum: ce4ada136e8a78a0b08dc10b4b900936912d15de59905b2bf415b4d33c63df1d555d23acb2a41b23cf9fb5da41c256441afca3d6509de7247daa062fd2c5ea5f
+  languageName: node
+  linkType: hard
+
 "yauzl@npm:^2.10.0":
   version: 2.10.0
   resolution: "yauzl@npm:2.10.0"