feat(projects): 封装二维码组件，增加系统设置菜单

mock/module/user.ts

@@ -232,6 +232,15 @@ const userRoutes = [
           icon: 'icon-park-outline:winking-face-with-open-eyes',
         },
       },
+      {
+        name: 'plugin_QRCode',
+        path: '/plugin/QRCode',
+        meta: {
+          title: '二维码',
+          requiresAuth: true,
+          icon: 'icon-park-outline:two-dimensional-code',
+        },
+      },
     ],
   },
   {
@@ -273,6 +282,54 @@ const userRoutes = [
       },
     ],
   },
+  {
+    name: 'setting',
+    path: '/setting',
+    redirect: '/setting/account',
+    meta: {
+      title: '系统设置',
+      requiresAuth: true,
+      icon: 'icon-park-outline:setting',
+    },
+    children: [
+      {
+        name: 'not-found',
+        path: '/setting/account',
+        meta: {
+          title: '用户设置',
+          requiresAuth: true,
+          icon: 'icon-park-outline:user',
+        },
+      },
+      {
+        name: 'dictionary',
+        path: '/setting/dictionary',
+        meta: {
+          title: '字典设置',
+          requiresAuth: true,
+          icon: 'icon-park-outline:book-one',
+        },
+      },
+      {
+        name: 'menu',
+        path: '/setting/menu',
+        meta: {
+          title: '菜单设置',
+          requiresAuth: true,
+          icon: 'icon-park-outline:application-menu',
+        },
+      },
+      {
+        name: 'system',
+        path: '/setting/system',
+        meta: {
+          title: '系统配置',
+          requiresAuth: true,
+          icon: 'icon-park-outline:coordinate-system',
+        },
+      },
+    ],
+  },
   {
     name: 'about',
     path: '/about',

package.json

@@ -33,6 +33,7 @@
     "pinia": "^2.0.20",
     "pinia-plugin-persist": "^1.0.0",
     "vue": "^3.2.37",
+    "vue-qr": "^4.0.9",
     "vue-router": "^4.1.4"
   },
   "devDependencies": {

public/resource/loading.css

@@ -1,3 +1,6 @@
+body{
+  margin: 0;
+}
 #loading-container{
   width: 100vw;
   height: 100vh;

src/components/custom/QRCode.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <vue-qr v-if="props.text" :text="props.text" qid="testid" :size="props.size" :correct-level="1"></vue-qr>
+  </div>
+</template>
+
+<script setup lang="ts">
+import vueQr from 'vue-qr/src/packages/vue-qr.vue'; //https://www.npmjs.com/package/vue-qr
+const props = withDefaults(
+  defineProps<{
+    text?: string;
+    size?: number;
+  }>(),
+  {
+    text: '',
+    size: 300,
+  },
+);
+</script>
+
+<style scoped></style>

src/views/plugin/QRCode/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <n-card>
+    <n-input-group>
+      <n-input v-model:value="input" />
+      <n-button type="primary" @click="createCode">生成</n-button>
+    </n-input-group>
+    <QR-code :text="text"></QR-code>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const input = ref('');
+const text = ref('');
+
+function createCode() {
+  text.value = input.value;
+}
+</script>
+
+<style scoped></style>

src/views/setting/account/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>用户设置</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/setting/dictionary/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>字典设置</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/setting/menu/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>菜单设置</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/setting/system/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>系统设置</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>