release: update 3.6.0

src/views/login/index.vue

@@ -7,9 +7,9 @@ import { initRouter } from "/@/router/utils";
 import { useNav } from "/@/layout/hooks/useNav";
 import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
-import { storageSession } from "@pureadmin/utils";
 import { $t, transformI18n } from "/@/plugins/i18n";
 import { useLayout } from "/@/layout/hooks/useLayout";
+import { useUserStoreHook } from "/@/store/modules/user";
 import { bg, avatar, illustration } from "./utils/static";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from "vue";
@@ -32,6 +32,7 @@ initStorage();
 
 const { t } = useI18n();
 const { dataTheme, dataThemeChange } = useDataThemeChange();
+dataThemeChange();
 const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
 const { locale, translationCh, translationEn } = useTranslationLang();
 
@@ -45,17 +46,17 @@ const onLogin = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate((valid, fields) => {
     if (valid) {
-      // 模拟请求，需根据实际开发进行修改
-      setTimeout(() => {
-        loading.value = false;
-        storageSession.setItem("info", {
-          username: "admin",
-          accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
+      useUserStoreHook()
+        .loginByUsername({ username: ruleForm.username })
+        .then(res => {
+          if (res.success) {
+            // 获取后端路由
+            initRouter().then(() => {
+              message.success("登录成功");
+              router.push("/");
+            });
+          }
         });
-        initRouter("admin").then(() => {});
-        message.success("登录成功");
-        router.push("/");
-      }, 2000);
     } else {
       loading.value = false;
       return fields;
@@ -63,8 +64,6 @@ const onLogin = async (formEl: FormInstance | undefined) => {
   });
 };
 
-dataThemeChange();
-
 /** 使用公共函数，避免`removeEventListener`失效 */
 function onkeypress({ code }: KeyboardEvent) {
   if (code === "Enter") {

src/views/permission/button/index.vue

@@ -1,36 +1,80 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import type { StorageConfigs } from "/#/index";
-import { storageSession } from "@pureadmin/utils";
+import { type CSSProperties, computed } from "vue";
+import { hasAuth, getAuths } from "/@/router/utils";
 
 defineOptions({
   name: "PermissionButton"
 });
 
-const auth = ref(
-  storageSession.getItem<StorageConfigs>("info").username || "admin"
-);
-
-function changRole(value) {
-  storageSession.setItem("info", {
-    username: value,
-    accessToken: `eyJhbGciOiJIUzUxMiJ9.${value}`
-  });
-  window.location.reload();
-}
+let width = computed((): CSSProperties => {
+  return {
+    width: "85vw"
+  };
+});
 </script>
 
 <template>
-  <el-card>
-    <template #header>
-      <div class="card-header">
-        <el-radio-group v-model="auth" @change="changRole">
-          <el-radio-button label="admin" />
-          <el-radio-button label="test" />
-        </el-radio-group>
-      </div>
-    </template>
-    <p v-auth="'v-admin'">只有admin可看</p>
-    <p v-auth="'v-test'">只有test可看</p>
-  </el-card>
+  <el-space direction="vertical" size="large">
+    <el-tag :style="width" size="large" effect="dark">
+      当前拥有的code列表：{{ getAuths() }}
+    </el-tag>
+
+    <el-card shadow="never" :style="width">
+      <template #header>
+        <div class="card-header">组件方式判断权限</div>
+      </template>
+      <Auth value="btn_add">
+        <el-button type="success"> 拥有code：'btn_add' 权限可见 </el-button>
+      </Auth>
+      <Auth :value="['btn_edit']">
+        <el-button type="primary"> 拥有code：['btn_edit'] 权限可见 </el-button>
+      </Auth>
+      <Auth :value="['btn_add', 'btn_edit', 'btn_delete']">
+        <el-button type="danger">
+          拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
+        </el-button>
+      </Auth>
+    </el-card>
+
+    <el-card shadow="never" :style="width">
+      <template #header>
+        <div class="card-header">函数方式判断权限</div>
+      </template>
+      <el-button type="success" v-if="hasAuth('btn_add')">
+        拥有code：'btn_add' 权限可见
+      </el-button>
+      <el-button type="primary" v-if="hasAuth(['btn_edit'])">
+        拥有code：['btn_edit'] 权限可见
+      </el-button>
+      <el-button
+        type="danger"
+        v-if="hasAuth(['btn_add', 'btn_edit', 'btn_delete'])"
+      >
+        拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
+      </el-button>
+    </el-card>
+
+    <el-card shadow="never" :style="width">
+      <template #header>
+        <div class="card-header">
+          指令方式判断权限（该方式不能动态修改权限）
+        </div>
+      </template>
+      <el-button type="success" v-auth="'btn_add'">
+        拥有code：'btn_add' 权限可见
+      </el-button>
+      <el-button type="primary" v-auth="['btn_edit']">
+        拥有code：['btn_edit'] 权限可见
+      </el-button>
+      <el-button type="danger" v-auth="['btn_add', 'btn_edit', 'btn_delete']">
+        拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
+      </el-button>
+    </el-card>
+  </el-space>
 </template>
+
+<style lang="scss" scoped>
+:deep(.el-tag) {
+  justify-content: start;
+}
+</style>

src/views/permission/page/index.vue

@@ -1,53 +1,69 @@
 <script setup lang="ts">
-import { ref, unref } from "vue";
-import type { StorageConfigs } from "/#/index";
-import { storageSession } from "@pureadmin/utils";
-import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+import { initRouter } from "/@/router/utils";
+import { type CSSProperties, ref, computed } from "vue";
+import { useUserStoreHook } from "/@/store/modules/user";
+import { usePermissionStoreHook } from "/@/store/modules/permission";
 
 defineOptions({
   name: "PermissionPage"
 });
 
-let purview = ref<string>(
-  storageSession.getItem<StorageConfigs>("info").username
-);
+let width = computed((): CSSProperties => {
+  return {
+    width: "85vw"
+  };
+});
 
-function changRole() {
-  if (unref(purview) === "admin") {
-    storageSession.setItem("info", {
-      username: "test",
-      accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
-    });
-    window.location.reload();
-  } else {
-    storageSession.setItem("info", {
-      username: "admin",
-      accessToken: "eyJhbGciOiJIUzUxMiJ9.admin"
-    });
-    window.location.reload();
+let username = ref(useUserStoreHook()?.username);
+
+const options = [
+  {
+    value: "admin",
+    label: "管理员角色"
+  },
+  {
+    value: "common",
+    label: "普通角色"
   }
+];
+
+function onChange() {
+  useUserStoreHook()
+    .loginByUsername({ username: username.value })
+    .then(res => {
+      if (res.success) {
+        usePermissionStoreHook().clearAllCachePage();
+        initRouter();
+      }
+    });
 }
 </script>
 
 <template>
-  <el-card>
-    <template #header>
-      <div class="card-header">
-        <span>
-          当前角色：
-          <span style="font-size: 26px">{{ purview }}</span>
-          <p style="color: #ffa500">
-            查看左侧菜单变化(系统管理)，模拟后台根据不同角色返回对应路由
-          </p>
-        </span>
-      </div>
-    </template>
-    <el-button
-      type="primary"
-      @click="changRole"
-      :icon="useRenderIcon('user', { color: '#fff' })"
-    >
-      切换角色
-    </el-button>
-  </el-card>
+  <el-space direction="vertical" size="large">
+    <el-tag :style="width" size="large" effect="dark">
+      模拟后台根据不同角色返回对应路由（具体参考完整版pure-admin代码）
+    </el-tag>
+    <el-card shadow="never" :style="width">
+      <template #header>
+        <div class="card-header">
+          <span>当前角色：{{ username }}</span>
+        </div>
+      </template>
+      <el-select v-model="username" @change="onChange">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </el-card>
+  </el-space>
 </template>
+
+<style lang="scss" scoped>
+:deep(.el-tag) {
+  justify-content: start;
+}
+</style>