create-jnrs-template-vue 1.1.4 → 1.1.6

package/jnrs-template-vue/src/layout/index.vue

@@ -1,7 +1,31 @@
 <script setup lang="ts">
+import { ref, watch, toRefs } from 'vue'
 import SideMenu from './SideMenu.vue'
 import TopHeader from './TopHeader.vue'
 import RouterTabs from './RouterTabs.vue'
+import { useAuthStore, useSystemStore } from '@/stores'
+
+const watermarkFont = ref({
+  color: 'rgba(0, 0, 0, 0)',
+  fontSize: 12
+})
+
+const { userInfo } = useAuthStore()
+
+const { computedThemeMode } = toRefs(useSystemStore())
+watch(
+  computedThemeMode,
+  (newVal) => {
+    if (newVal === 'dark') {
+      watermarkFont.value.color = 'rgba(255, 255, 255, .06)'
+    } else {
+      watermarkFont.value.color = 'rgba(0, 0, 0, .06)'
+    }
+  },
+  {
+    immediate: true
+  }
+)
 </script>
 
 <template>
@@ -13,11 +37,17 @@ import RouterTabs from './RouterTabs.vue'
       </el-header>
       <RouterTabs />
       <el-main>
-        <router-view v-slot="{ Component }">
-          <keep-alive>
-            <component :is="Component" />
-          </keep-alive>
-        </router-view>
+        <el-watermark
+          :font="watermarkFont"
+          :content="[userInfo?.name, userInfo?.workNo]"
+          style="width: 100%; height: 100%"
+        >
+          <router-view v-slot="{ Component }">
+            <keep-alive>
+              <component :is="Component" />
+            </keep-alive>
+          </router-view>
+        </el-watermark>
       </el-main>
     </el-container>
   </el-container>
@@ -35,7 +65,7 @@ import RouterTabs from './RouterTabs.vue'
   height: 100%;
 
   .el-main {
-    padding: 10px;
+    padding: 16px;
   }
 }
 </style>

package/jnrs-template-vue/src/locales/en.ts

@@ -0,0 +1,9 @@
+export default {
+  main: {
+    title: 'Management System'
+  },
+  login: {
+    title: 'Login'
+  },
+  layout: {}
+}

package/jnrs-template-vue/src/locales/index.ts

@@ -0,0 +1,16 @@
+import { createI18n } from 'vue-i18n'
+import zhCN from './zhCn'
+import en from './en'
+
+const i18n = createI18n({
+  legacy: false, // 启用 Composition API 模式
+  globalInjection: true, // 允许在模板中使用 $t
+  locale: 'zhCn',
+  fallbackLocale: 'en',
+  messages: {
+    zhCn: zhCN,
+    en: en
+  }
+})
+
+export default i18n

package/jnrs-template-vue/src/locales/zhCn.ts

@@ -0,0 +1,9 @@
+export default {
+  main: {
+    title: '信息化管理系统模板'
+  },
+  login: {
+    title: '登录'
+  },
+  layout: {}
+}

package/jnrs-template-vue/src/main.ts

@@ -1,5 +1,7 @@
 import 'element-plus/dist/index.css'
-import './assets/styles/main.scss'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+import '@jnrs/shared/styles/theme.scss'
+import '@/assets/styles/main.scss'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
@@ -7,6 +9,7 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
 import { router } from './router'
+import locales from './locales/index'
 
 const app = createApp(App)
 
@@ -21,4 +24,5 @@ pinia.use(piniaPluginPersistedstate)
 
 app.use(pinia)
 app.use(router)
+app.use(locales)
 app.mount('#app')

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

@@ -2,7 +2,8 @@ import { LAYOUT_NAME, GLOBAL_COMPONENT, routes } from './routes'
 import { createVueRouter } from '@jnrs/vue-core/router'
 import type { FileModules, RouteLocationNormalizedGeneric } from '@jnrs/vue-core/router'
 import { useAuthStore, useMenuStore } from '@/stores'
-import { MenuApi } from '@/api/base/index'
+import { MenuApi } from '@/api/system'
+import { hasPermission } from '@jnrs/shared'
 
 const fileModules = import.meta.glob('/src/views/**/*.vue') as FileModules
 
@@ -14,15 +15,20 @@ const router = createVueRouter({
   layoutName: LAYOUT_NAME,
   globalComponent: GLOBAL_COMPONENT,
   handleBeforeEach: async (to: RouteLocationNormalizedGeneric) => {
-    // 如果是不需要授权的页面，直接放行
+    // 如果是不需要[身份验证]的页面，直接放行
     if (to.meta.noAuth) return true
 
-    // 页面刷新处理：未授权时，重定向到授权页
-    const { hasAuthenticated } = useAuthStore()
+    // 页面刷新处理：未[身份验证]时，重定向到[身份验证]页
+    const { hasAuthenticated, userInfo } = useAuthStore()
     if (!hasAuthenticated) {
       return { name: 'Login', query: { redirect: to.path }, replace: true }
     }
 
+    // 校验访问权限
+    if (to.meta.permissions && !hasPermission(to.meta.permissions, userInfo?.permissions || [])) {
+      return { name: '403' }
+    }
+
     // 页面刷新处理：菜单未获取时，先获取菜单，再重定向当前路由，即重新开始进入handleBeforeEach
     const { hasFetchedAsyncMenus, asyncSetMenus } = useMenuStore()
     if (!hasFetchedAsyncMenus) {

package/jnrs-template-vue/src/types/index.d.ts

@@ -0,0 +1,6 @@
+// declare module '@jnrs/shared' {
+//   interface User {
+//     account: string
+//     loginDateTime: string
+//   }
+// }

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

@@ -0,0 +1,58 @@
+import {
+  getOneDictList as _getOneDictList,
+  getDictLabel as _getDictLabel,
+  getDictValue as _getDictValue,
+  getDictColor as _getDictColor
+} from '@jnrs/shared'
+import { useAuthStore } from '@jnrs/vue-core/pinia'
+
+/**
+ * 根据字典名称获取字典数据
+ * @param name 字典名称
+ * @returns 某字典名称所对应的字典列表数据
+ */
+export const getOneDictList = (name: string) => {
+  const { dict } = useAuthStore()
+  if (dict) {
+    return _getOneDictList(name, dict)
+  }
+}
+
+/**
+ * 根据字典名称和字典值获取字典标签
+ * @param name 字典名称
+ * @param value 字典值
+ * @returns 某字典名称所对应的字典标签
+ */
+export const getDictLabel = (name: string, value: string | number) => {
+  const { dict } = useAuthStore()
+  if (dict) {
+    return _getDictLabel(name, value, dict)
+  }
+}
+
+/**
+ * 根据字典名称和字典标签获取字典值
+ * @param name 字典名称
+ * @param label 字典标签
+ * @returns 某字典名称所对应的字典值
+ */
+export const getDictValue = (name: string, label: string) => {
+  const { dict } = useAuthStore()
+  if (dict) {
+    return _getDictValue(name, label, dict)
+  }
+}
+
+/**
+ * 根据字典名称和字典值获取字典颜色
+ * @param name 字典名称
+ * @param value 字典值
+ * @returns 某字典名称所对应的字典颜色
+ */
+export const getDictColor = (name: string, value: string | number) => {
+  const { dict } = useAuthStore()
+  if (dict) {
+    return _getDictColor(name, value, dict)
+  }
+}

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

@@ -38,15 +38,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

@@ -38,15 +38,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,10 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 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'
 
 const loginParams = ref({
   account: 'admin',
@@ -13,6 +13,7 @@ const loginParams = ref({
 
 const routeOptions = ref<MenuItem[]>([])
 const currentRoute = ref('')
+const datePicker = ref(new Date())
 
 onMounted(() => {
   handleInfoApi()
@@ -76,7 +77,7 @@ const handleRouteChange = () => {
 </script>
 
 <template>
-  <div style="background-color: #fff">
+  <div>
     <h1>Playground - 测试组件</h1>
     <p>网络请求测试</p>
     <el-button-group>
@@ -108,6 +109,8 @@ const handleRouteChange = () => {
         <span>{{ data.meta.title }}</span>
       </template>
     </el-cascader>
+    <p>Element 组件测试</p>
+    <el-date-picker-panel v-model="datePicker" />
     <!-- <MyButton type="primary">测试按钮</MyButton>
     <MyModal v-model="show">内容</MyModal> -->
   </div>

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

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import type { FormInstance, FormRules } from 'element-plus'
 import { ref } from 'vue'
-import { LoginApi } from '@/api/base/index'
+import { LoginApi } from '@/api/system'
 import { useAuthStore } from '@/stores'
 import { handleRouter, useRoute } from '@jnrs/vue-core/router'
 import { isWeakPwd } from '@jnrs/shared/validator'
+import { formatDateTime, formatWeekday } from '@jnrs/shared'
 
 const route = useRoute()
 const loading = ref(false)
+const { setUserInfo, setToken, setDict } = useAuthStore()
 
 // 表单 ref
 const ruleFormRef = ref<FormInstance>()
@@ -33,13 +35,15 @@ const submitForm = () => {
     loading.value = true
     try {
       const res = await LoginApi(ruleForm.value)
-      const { token, dict, ...userInfo } = res
-      const { asyncSetAuth } = useAuthStore()
-      await asyncSetAuth({
-        token: token,
-        dict: dict,
-        userInfo: userInfo
+      const { token, dict, ...restParameter } = res
+      const loginDateTime = formatDateTime() + ' ' + formatWeekday()
+      setUserInfo({
+        ...restParameter,
+        account: ruleForm.value.account,
+        loginDateTime
       })
+      setToken(token)
+      setDict(dict)
       handleRouter({ path: route.query.redirect?.toString() || '/' }, 'replace')
     } catch {
     } finally {
@@ -70,12 +74,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
@@ -88,9 +87,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>
@@ -102,14 +99,6 @@ const submitForm = () => {
 </template>
 
 <style scoped lang="scss">
-@use 'sass:math';
-
-$design-width: 1920; // 设计稿宽度
-
-@function px2vw($px) {
-  @return math.div($px, $design-width) * 100vw;
-}
-
 .main {
   position: relative;
   width: 100%;
@@ -147,8 +136,8 @@ $design-width: 1920; // 设计稿宽度
     width: 50%;
     height: 100%;
     box-shadow: 5px 0 10px rgba(0, 0, 0, 0.5);
-    background: url('@/assets/img/common/card_bg.png') no-repeat;
-    background-size: 100% 100%;
+    // background: url('@/assets/img/common/card_bg.png') no-repeat;
+    // background-size: 100% 100%;
     text-align: center;
     font-size: 22px;
 

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

@@ -0,0 +1,176 @@
+<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'
+
+const { maxHeight } = useAsyncTableHeight('el_table_dict', 0)
+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" />
+                  </template>
+                </el-table-column>
+                <el-table-column label="颜色" prop="displayColor">
+                  <template #default="optionScope">
+                    <el-color-picker
+                      v-model="optionScope.row.displayColor"
+                      :predefine="predefineColors"
+                    />
+                    <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
+                      style="width: 140px"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" width="100" align="center" fixed="right">
+                  <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,67 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useMenuStore } from '@/stores'
+import { getDictLabel } from '@/utils/common'
+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" />
+        <el-table-column prop="path" label="路由地址" min-width="120" />
+        <el-table-column prop="role" label="权限" min-width="120">
+          <template #default="{ row }">
+            <span v-if="!row.meta.role" style="color: #999">auto</span>
+            <template v-else>
+              {{ row.meta.role.map((d: string | number) => getDictLabel('role', d)) }}
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column prop="editRole" label="操作权限" min-width="120">
+          <template #default="scope">
+            <template v-if="!scope.row.editRole">
+              <span style="color: #999" v-if="!scope.row.role">auto</span>
+              <!-- <template v-else>
+                {{ scope.row.role.map((d) => getDictLabel('role', d.split('Role')[1])) }}
+              </template> -->
+            </template>
+            <!-- <template v-else>
+              {{ scope.row.editRole.map((d) => getDictLabel('role', d.split('Role')[1])) }}
+            </template> -->
+          </template>
+        </el-table-column>
+        <el-table-column prop="type" label="类型" width="80" align="center">
+          <template #default="scope">
+            <el-tag type="primary" v-if="scope.row.path">菜单</el-tag>
+            <el-tag type="success" v-else>目录</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="activate" label="图标" width="80" align="center">
+          <template #default="scope">
+            <el-icon v-if="scope.row.icon"><component :is="scope.row.icon" /></el-icon>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>