create-jnrs-template-vue 1.1.5 → 1.1.7

package/jnrs-template-vue/src/router/routes.ts

@@ -10,25 +10,37 @@ export const LAYOUT_NAME = 'Layout'
 export const GLOBAL_COMPONENT = import('@/layout/BlankLayout.vue')
 
 export const routes = [
-  {
-    path: '/login',
-    component: () => import('@/layout/BlankLayout.vue'),
-    meta: { title: '登录' },
-    children: [
-      {
-        path: '',
-        name: 'Login',
-        meta: { title: '登录', noAuth: true },
-        component: () => import('@/views/login/index.vue')
-      }
-    ]
-  },
   // {
-  //   name: 'Login',
   //   path: '/login',
-  //   component: () => import('@/views/login/index.vue'),
-  //   meta: { title: '登录', noAuth: true, global: true }
+  //   component: () => import('@/layout/BlankLayout.vue'),
+  //   meta: { title: '登录' },
+  //   children: [
+  //     {
+  //       path: '',
+  //       name: 'Login',
+  //       meta: { title: '登录', noAuth: true },
+  //       component: () => import('@/views/login/index.vue')
+  //     }
+  //   ]
   // },
+  {
+    name: '403',
+    path: '/403',
+    component: () => import('@/views/common/403.vue'),
+    meta: { title: '403', noAuth: true, global: true }
+  },
+  {
+    name: '404',
+    path: '/:pathMatch(.*)*',
+    component: () => import('@/views/common/404.vue'),
+    meta: { title: '404', global: true }
+  },
+  {
+    name: 'Login',
+    path: '/login',
+    component: () => import('@/views/login/index.vue'),
+    meta: { title: '登录', noAuth: true, global: true }
+  },
   {
     name: LAYOUT_NAME,
     path: '/',
@@ -45,17 +57,5 @@ export const routes = [
         component: () => import('@/views/home/index.vue')
       }
     ]
-  },
-  {
-    name: '403',
-    path: '/403',
-    component: () => import('@/views/common/403.vue'),
-    meta: { title: '403', noAuth: true, global: true }
-  },
-  {
-    name: '404',
-    path: '/:pathMatch(.*)*',
-    component: () => import('@/views/common/404.vue'),
-    meta: { title: '404', global: true }
   }
 ]

package/jnrs-template-vue/src/stores/mock.ts

@@ -1,13 +1,15 @@
 import { defineStore } from 'pinia'
+import { ref } from 'vue'
 
 /**
  * Mock仓库
  * @returns isMock 是否使用mock数据
  */
 export const useMockStore = defineStore(
-  'mock',
+  'jnrs-app-mock',
   () => {
-    const isMock = import.meta.env.VITE_USE_MOCK === 'true' // 是否使用mock数据
+    // 是否使用mock数据
+    const isMock = ref(import.meta.env.VITE_USE_MOCK === 'true')
 
     return { isMock }
   },

package/jnrs-template-vue/src/utils/permissions.ts

@@ -0,0 +1,16 @@
+import { hasPermissionWithSuffix } from '@jnrs/shared'
+import { useAuthStore } from '@/stores'
+
+// 菜单查看权限
+export function hasMenuViewPermission(requiredPerms: string[] | undefined) {
+  const { userInfo } = useAuthStore()
+  const userPerms = userInfo?.permissions || []
+  return hasPermissionWithSuffix(requiredPerms, userPerms, ':view', 'some')
+}
+
+// 按钮操作权限
+export function hasPermission(requiredPerms: string[] | undefined) {
+  const { userInfo } = useAuthStore()
+  const userPerms = userInfo?.permissions || []
+  return hasPermissionWithSuffix(requiredPerms, userPerms)
+}

package/jnrs-template-vue/src/views/common/403.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import { router } from '@/router'
-import { useRoute, handleRouter } from '@jnrs/vue-core/router'
-
-const route = useRoute()
+import { handleRouter } from '@jnrs/vue-core/router'
 
 const goLogin = () => {
-  handleRouter({ name: 'Login', query: { redirect: route.fullPath } }, 'replace')
+  handleRouter({ name: 'Login' }, 'replace')
 }
 const goHome = () => {
   handleRouter({ path: '/' }, 'replace')
@@ -22,9 +20,7 @@ const goBack = () => {
       <h3>抱歉，您访问的资源权限受限</h3>
       <div class="main_mid_btn">
         <el-button @click="goLogin" style="margin-right: 20px">重新登录</el-button>
-        <el-button type="primary" plain @click="goHome" style="margin-right: 20px">
-          返回首页
-        </el-button>
+        <el-button type="primary" plain @click="goHome" style="margin-right: 20px">返回首页</el-button>
         <el-button type="primary" @click="goBack">返回上一页</el-button>
       </div>
     </div>
@@ -38,15 +34,15 @@ const goBack = () => {
   justify-content: center;
   width: 100%;
   height: 100vh;
-  background: #f9fafe;
   overflow: hidden;
+  background: var(--jnrs-background-primary);
   .main_mid {
     text-align: center;
     img {
       width: 300px;
     }
     h3 {
-      color: #2a63a4;
+      color: var(--jnrs-font-primary);
     }
     .main_mid_btn {
       margin-top: 30px;

package/jnrs-template-vue/src/views/common/404.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import { router } from '@/router'
-import { useRoute, handleRouter } from '@jnrs/vue-core/router'
-
-const route = useRoute()
+import { handleRouter } from '@jnrs/vue-core/router'
 
 const goLogin = () => {
-  handleRouter({ name: 'Login', query: { redirect: route.fullPath } }, 'replace')
+  handleRouter({ name: 'Login' }, 'replace')
 }
 const goHome = () => {
   handleRouter({ path: '/' }, 'replace')
@@ -22,9 +20,7 @@ const goBack = () => {
       <h3>抱歉，您访问的页面不存在</h3>
       <div class="main_mid_btn">
         <el-button @click="goLogin" style="margin-right: 20px">重新登录</el-button>
-        <el-button type="primary" plain @click="goHome" style="margin-right: 20px">
-          返回首页
-        </el-button>
+        <el-button type="primary" plain @click="goHome" style="margin-right: 20px">返回首页</el-button>
         <el-button type="primary" @click="goBack">返回上一页</el-button>
       </div>
     </div>
@@ -38,15 +34,15 @@ const goBack = () => {
   justify-content: center;
   width: 100%;
   height: 100vh;
-  background: #f9fafe;
   overflow: hidden;
+  background: var(--jnrs-background-primary);
   .main_mid {
     text-align: center;
     img {
       width: 300px;
     }
     h3 {
-      color: #2a63a4;
+      color: var(--jnrs-font-primary);
     }
     .main_mid_btn {
       margin-top: 30px;

package/jnrs-template-vue/src/views/home/index.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
 import { ElMessage } from 'element-plus'
-import { MenuApi, LoginApi, UserInfoApi } from '@/api/base'
+import { MenuApi, LoginApi, UserInfoApi } from '@/api/system'
 import { NotFoundApi, NoAuth } from '@/api/mock'
 import { handleRouter } from '@jnrs/vue-core/router'
-import type { MenuItem } from '@/types'
+import type { MenuItem } from '@jnrs/vue-core'
+import { hasPermission } from '@/utils/permissions'
+import { useMockStore } from '@/stores'
+
+const { isMock } = storeToRefs(useMockStore())
 
 const loginParams = ref({
-  account: 'admin',
+  account: 'user',
   password: '123456'
 })
 
@@ -15,9 +20,7 @@ const routeOptions = ref<MenuItem[]>([])
 const currentRoute = ref('')
 const datePicker = ref(new Date())
 
-onMounted(() => {
-  handleInfoApi()
-})
+onMounted(() => {})
 
 const handleInfoApi = async () => {
   try {
@@ -32,7 +35,6 @@ const handleMenuApi = async () => {
   try {
     const res = await MenuApi()
     routeOptions.value = res
-    console.log(res)
   } catch (error) {
     console.log(error)
   }
@@ -71,29 +73,52 @@ const handleRouteChange = () => {
     name: currentRoute.value
   })
 }
-
-// import { MyButton, MyModal } from '../src'  // 直接导入本地源码
-// import { useUserStore } from '../src'
 </script>
 
 <template>
   <div>
-    <h1>Playground - 测试组件</h1>
+    <h3>Playground - 功能测试</h3>
+    <p>权限测试（admin 账号拥有全部权限，请用非 admin 账号测试该功能）</p>
+    <ul>
+      <li>
+        <span>有权限：(期望：正常显示按钮)</span>
+        <el-button type="primary" size="small" v-permissions="['mine:view']">添加</el-button>
+      </li>
+      <li>
+        <span>无权限：(期望：按钮禁用 -> UI 组件：使用 UI 框架提供的禁用属性)</span>
+        <el-button type="primary" size="small" :disabled="!hasPermission(['test:del'])">删除</el-button>
+      </li>
+      <li>
+        <span>无权限：(期望：按钮禁用 -> 原生元素：添加 disabled 属性和类名)</span>
+        <button size="small" v-permissions.disabled="['test:del']">删除</button>
+      </li>
+      <li>
+        <span>无权限：(期望：按钮不可见 -> 添加样式 display:none)</span>
+        <button size="small" v-permissions.display="['test:del']">删除</button>
+      </li>
+      <li>
+        <span>无权限：(期望：按钮不可见 -> remove HTMLElement)</span>
+        <button size="small" v-permissions="['test:del']">删除</button>
+      </li>
+    </ul>
     <p>网络请求测试</p>
+    <div>
+      <span>服务器类型：</span>
+      <el-switch v-model="isMock" active-text="Mock 服务器" inactive-text="后端服务器" />
+    </div>
     <el-button-group>
-      <el-button type="primary" size="small" @click="handleMenuApi">GET</el-button>
+      <el-button type="primary" size="small" @click="handleMenuApi">获取完整菜单数据</el-button>
+      <el-button type="primary" size="small" @click="handleInfoApi">获取用户数据</el-button>
       <el-button type="primary" size="small" @click="handleNotFoundApi">404</el-button>
       <el-button type="primary" size="small" @click="handleNoAuth()">暂无权限</el-button>
-      <el-button type="primary" size="small" @click="handleNoAuth(false)">
-        暂无权限(不显示Msg)
-      </el-button>
+      <el-button type="primary" size="small" @click="handleNoAuth(false)">暂无权限(不显示 Message)</el-button>
     </el-button-group>
-    <el-input v-model="loginParams.account" size="small" style="width: 150px">
+    <el-input v-model="loginParams.account" size="small" style="width: 200px">
       <template #append>
-        <el-button size="small" @click="handleLogin">登录</el-button>
+        <el-button size="small" @click="handleLogin">验证登录接口</el-button>
       </template>
     </el-input>
-    <p>路由测试</p>
+    <p>完整路由测试（先点击按钮，获取完整菜单数据）</p>
     <el-cascader
       v-model="currentRoute"
       :options="routeOptions"
@@ -111,8 +136,17 @@ const handleRouteChange = () => {
     </el-cascader>
     <p>Element 组件测试</p>
     <el-date-picker-panel v-model="datePicker" />
-    <!-- <MyButton type="primary">测试按钮</MyButton>
-    <MyModal v-model="show">内容</MyModal> -->
   </div>
   <router-view></router-view>
 </template>
+
+<style scoped lang="scss">
+h3 {
+  color: var(--jnrs-color-primary);
+}
+p {
+  margin: 24px 0 8px;
+  color: var(--jnrs-background-primary);
+  background: var(--jnrs-font-primary);
+}
+</style>

package/jnrs-template-vue/src/views/login/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { FormInstance, FormRules } from 'element-plus'
 import { ref } from 'vue'
-import { LoginApi } from '@/api/base/index'
+import { RoleApi, LoginApi } from '@/api/system'
 import { useAuthStore } from '@/stores'
 import { handleRouter, useRoute } from '@jnrs/vue-core/router'
 import { isWeakPwd } from '@jnrs/shared/validator'
@@ -9,6 +9,12 @@ import { formatDateTime, formatWeekday } from '@jnrs/shared'
 
 const route = useRoute()
 const loading = ref(false)
+const {
+  setUserInfo,
+  setToken,
+  setDict
+  // setRole
+} = useAuthStore()
 
 // 表单 ref
 const ruleFormRef = ref<FormInstance>()
@@ -27,23 +33,40 @@ const rules = ref<FormRules>({
 })
 
 // 提交函数
-const submitForm = () => {
+const submitForm = async () => {
   if (!ruleFormRef.value) return
   ruleFormRef.value.validate(async (valid) => {
     if (!valid) return
     loading.value = true
     try {
-      const res = await LoginApi(ruleForm.value)
-      const { token, dict, ...userInfo } = res
-      userInfo.loginDateTime = formatDateTime() + ' ' + formatWeekday()
-      const { asyncSetAuth } = useAuthStore()
-      await asyncSetAuth({
-        token: token,
-        dict: dict,
-        userInfo: userInfo
+      const loginRes = await LoginApi(ruleForm.value)
+      const { token, dict, ...restParameter } = loginRes
+      const loginDateTime = formatDateTime() + ' ' + formatWeekday()
+
+      // 获取角色列表，将登录人角色对应的权限叠加给当前登录人（一次性获取叠加）
+      const roleRes = await RoleApi()
+      let permissionsMerger = restParameter.permissions
+      if (Array.isArray(restParameter.permissions)) {
+        permissionsMerger = [
+          ...new Set([
+            ...restParameter.permissions,
+            ...(roleRes.find((r) => r.value === restParameter.role)?.permissions ?? []).flat()
+          ])
+        ]
+      }
+      // setRole(roleRes) // 由于是一次性获取叠加，此处不需要保存角色列表到全局状态
+
+      setUserInfo({
+        ...restParameter,
+        permissions: permissionsMerger,
+        account: ruleForm.value.account,
+        loginDateTime
       })
+      setToken(token)
+      setDict(dict)
       handleRouter({ path: route.query.redirect?.toString() || '/' }, 'replace')
-    } catch {
+    } catch (e) {
+      console.log(e)
     } finally {
       loading.value = false
     }
@@ -72,12 +95,7 @@ const submitForm = () => {
             @keyup.enter="submitForm()"
           >
             <el-form-item prop="account">
-              <el-input
-                v-model="ruleForm.account"
-                placeholder="请输入账号"
-                prefix-icon="User"
-                clearable
-              />
+              <el-input v-model="ruleForm.account" placeholder="请输入账号" prefix-icon="User" clearable />
             </el-form-item>
             <el-form-item prop="password">
               <el-input
@@ -90,9 +108,7 @@ const submitForm = () => {
               ></el-input>
             </el-form-item>
             <el-form-item>
-              <el-button class="btn" type="primary" :loading="loading" @click="submitForm()">
-                登 录
-              </el-button>
+              <el-button class="btn" type="primary" :loading="loading" @click="submitForm()">登 录</el-button>
             </el-form-item>
           </el-form>
           <div class="greeting">欢迎使用</div>

package/jnrs-template-vue/src/views/system/dict/index.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { ref, onActivated } from 'vue'
+import { DictApi, DictDetailApi, DictChangeApi } from '@/api/system'
+import { useAsyncTableHeight } from '@jnrs/vue-core/composables'
+import type { DictItem } from '@jnrs/shared'
+import { hasPermission } from '@/utils/permissions'
+
+const { maxHeight } = useAsyncTableHeight('el_table_dict', 0)
+const PERMISSION_EDIT = ['dict:edit']
+const loading = ref(false)
+const tableData = ref<DictItem[]>()
+const predefineColors = ref([
+  '#000000',
+  '#999999',
+  '#f2f2f2',
+  '#ffffff',
+  '#65DC79',
+  '#5887F7',
+  '#E43634',
+  '#FEA822',
+  '#C9512C'
+])
+
+onActivated(() => {
+  getList()
+})
+
+const getList = () => {
+  loading.value = true
+  DictApi()
+    .then((res) => {
+      tableData.value = res
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+const handleExpandChange = (row: DictItem) => {
+  loading.value = true
+  DictDetailApi(String(row.id))
+    .then((res) => {
+      row.options = res
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+// 保存键值对
+const editKeyValue = (row: DictItem) => {
+  if (!row.label) {
+    ElMessage({
+      type: 'warning',
+      message: 'label 不能为空'
+    })
+    return false
+  }
+  loading.value = true
+  DictChangeApi(row)
+    .then(() => {
+      ElMessage({
+        type: 'success',
+        message: '修改成功',
+        grouping: true
+      })
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+</script>
+
+<template>
+  <div class="main">
+    <el-card shadow="never">
+      <template #header>
+        <div class="card_header">
+          <h3>字典管理</h3>
+        </div>
+      </template>
+      <el-table
+        class="el_table_dict"
+        :data="tableData"
+        :height="maxHeight"
+        scrollbar-always-on
+        border
+        v-loading="loading"
+        row-key="id"
+        @expand-change="handleExpandChange"
+      >
+        <el-table-column prop="dictName" label="字典名" />
+        <el-table-column prop="describe" label="说明" />
+        <el-table-column type="expand" fixed="right" label="字典值" width="100">
+          <template #default="scope">
+            <div class="table_expand animation15" style="animation-duration: 0.5s; animation-delay: 0s">
+              <div class="table_expand_top">
+                <h5>字典值列表</h5>
+              </div>
+              <el-table :data="scope.row.options" :border="true" size="small" row-key="value">
+                <el-table-column label="value" prop="value" width="100" align="center"></el-table-column>
+                <el-table-column label="label" prop="label">
+                  <template #default="optionScope">
+                    <el-input
+                      v-model="optionScope.row.label"
+                      maxlength="20"
+                      :disabled="!hasPermission(PERMISSION_EDIT)"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="颜色" prop="displayColor">
+                  <template #default="optionScope">
+                    <el-color-picker
+                      v-model="optionScope.row.displayColor"
+                      :predefine="predefineColors"
+                      :disabled="!hasPermission(PERMISSION_EDIT)"
+                    />
+                    <span style="margin-left: 10px">
+                      {{ optionScope.row.displayColor || '无' }}
+                    </span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="sequence" label="排序" width="180" align="center">
+                  <template #default="optionScope">
+                    <el-input-number
+                      v-model="optionScope.row.sequence"
+                      :min="1"
+                      :max="999"
+                      :step="1"
+                      controls-position="right"
+                      step-strictly
+                      :disabled="!hasPermission(PERMISSION_EDIT)"
+                      style="width: 140px"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="100" align="center" fixed="right" v-permissions="PERMISSION_EDIT">
+                  <template #default="optionScope">
+                    <el-button type="success" size="small" @click="editKeyValue(optionScope.row)">确认修改</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.table_expand {
+  padding: 10px;
+  color: var(--jnrs-font-primary);
+  background: var(--jnrs-background-primary);
+
+  .table_expand_top {
+    position: relative;
+
+    h5 {
+      font-size: 14px;
+      margin-bottom: 10px;
+    }
+
+    .table_expand_top_btn {
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 1;
+    }
+  }
+}
+</style>

package/jnrs-template-vue/src/views/system/menu/index.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useMenuStore } from '@/stores'
+import { useAsyncTableHeight } from '@jnrs/vue-core/composables'
+
+const { maxHeight } = useAsyncTableHeight('el_table_menu', 0)
+const loading = ref(false)
+
+const { menus } = useMenuStore()
+</script>
+
+<template>
+  <div>
+    <el-card shadow="never">
+      <template #header>
+        <div class="card_header">
+          <h3>菜单管理</h3>
+        </div>
+      </template>
+      <el-table
+        class="el_table_menu"
+        :data="menus"
+        :height="maxHeight"
+        scrollbar-always-on
+        row-key="meta.uuid"
+        border
+        v-loading="loading"
+      >
+        <el-table-column prop="meta.title" label="标题" min-width="120" header-align="center" />
+        <el-table-column prop="icon" label="图标" width="60" align="center">
+          <template #default="{ row }">
+            <el-icon v-if="row.meta.icon"><component :is="row.meta.icon" /></el-icon>
+          </template>
+        </el-table-column>
+        <el-table-column prop="path" label="路由地址" min-width="120" header-align="center" />
+        <el-table-column prop="component" label="component path" min-width="120" header-align="center" />
+        <el-table-column prop="redirect" label="redirect" min-width="120" header-align="center" />
+        <el-table-column prop="editRole" label="权限标识" min-width="120" header-align="center">
+          <template #default="{ row }">
+            <span v-if="!row.meta.permissions" style="color: #999">auto</span>
+            <span v-else>{{ row.meta.permissions }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="类型" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag type="primary" v-if="row.path">菜单</el-tag>
+            <el-tag type="success" v-else>目录</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="NoAuth" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag type="danger" v-if="row.meta.noAuth">否</el-tag>
+            <el-tag type="success" v-else>是</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="Global" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag type="success" v-if="row.meta.global">是</el-tag>
+            <el-tag type="primary" v-else>否</el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>