feat:新增pure-admin前端

Yi.Pure.Vue3/src/views/permission/page/index.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { initRouter } from "@/router/utils";
+import { storageLocal } from "@pureadmin/utils";
+import { type CSSProperties, ref, computed } from "vue";
+import { useUserStoreHook } from "@/store/modules/user";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+
+defineOptions({
+  name: "PermissionPage"
+});
+
+const elStyle = computed((): CSSProperties => {
+  return {
+    width: "85vw",
+    justifyContent: "start"
+  };
+});
+
+const username = ref(useUserStoreHook()?.username);
+
+const options = [
+  {
+    value: "admin",
+    label: "管理员角色"
+  },
+  {
+    value: "common",
+    label: "普通角色"
+  }
+];
+
+function onChange() {
+  useUserStoreHook()
+    .loginByUsername({ username: username.value, password: "admin123" })
+    .then(res => {
+      if (res.success) {
+        storageLocal().removeItem("async-routes");
+        usePermissionStoreHook().clearAllCachePage();
+        initRouter();
+      }
+    });
+}
+</script>
+
+<template>
+  <div>
+    <p class="mb-2">
+      模拟后台根据不同角色返回对应路由，观察左侧菜单变化（管理员角色可查看系统管理菜单、普通角色不可查看系统管理菜单）
+    </p>
+    <el-card shadow="never" :style="elStyle">
+      <template #header>
+        <div class="card-header">
+          <span>当前角色：{{ username }}</span>
+        </div>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/page/index.vue"
+          target="_blank"
+        >
+          代码位置 src/views/permission/page/index.vue
+        </el-link>
+      </template>
+      <el-select v-model="username" class="!w-[160px]" @change="onChange">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </el-card>
+  </div>
+</template>