create-jnrs-template-vue 1.1.3 → 1.1.5

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

@@ -1,17 +1,24 @@
 <script setup lang="ts">
+import { GlobalSetting } from '@jnrs/vue-core/components'
+import { ref, computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { ElMessageBox } from 'element-plus'
 import { handleRouter } from '@jnrs/vue-core/router'
 import { useSystemStore, useAuthStore } from '@/stores'
 import { useAvatar } from '@/composables/common/useAvatar'
 import { LogoutApi } from '@/api/base/index'
+import { getDictLabel, getDictColor } from '@/utils/common'
 
 const { avatar } = useAvatar()
 const { userInfo, asyncClearAuth } = useAuthStore()
 
+const roleLabel = computed(() => getDictLabel('role', userInfo.role))
+const roleColor = computed(() => getDictColor('role', userInfo.role))
+
 const systemStore = useSystemStore()
-const { menuCollapse, documentFullscreen } = storeToRefs(systemStore)
-const { toggleCollapse, toggleFullScreen } = systemStore
+const { documentFullscreen } = storeToRefs(systemStore)
+const { toggleFullScreen } = systemStore
+const globalSettingRef = ref()
 
 const handleLogout = async () => {
   try {
@@ -25,46 +32,59 @@ const handleLogout = async () => {
     handleRouter({ name: 'Login' }, 'replace')
   } catch {}
 }
+
+const showGlobalSetting = () => {
+  globalSettingRef.value.handleShow()
+}
 </script>
 
 <template>
   <div class="topHeader">
-    <div class="header_left">
+    <div class="left">
       <el-icon
-        class="headerBtn"
-        :class="{ sideBtn_active: menuCollapse }"
-        @click="toggleCollapse()"
+        class="btn"
+        title="可视化看板"
+        @click="
+          handleRouter({
+            name: 'Visual'
+          })
+        "
       >
-        <Fold />
+        <el-icon><Platform /></el-icon>
       </el-icon>
-      <el-icon class="headerBtn fullBtn" @click="toggleFullScreen()">
+    </div>
+    <div class="right">
+      <el-icon class="btn" title="全屏切换" @click="showGlobalSetting()">
+        <el-icon><Setting /></el-icon>
+      </el-icon>
+      <el-icon class="btn" title="全屏切换" @click="toggleFullScreen()">
         <component :is="!documentFullscreen ? 'FullScreen' : 'Rank'" />
       </el-icon>
-    </div>
-    <div class="header_right">
       <!-- 头像和用户名 -->
       <el-popover
         placement="bottom"
         trigger="click"
         :teleported="false"
-        :width="300"
+        :width="260"
         :hide-after="0"
       >
         <template #reference>
           <span class="userMenu_reference">
-            <img :src="avatar" alt="" />
-            <span style="margin: 0 10px">
-              <span>{{ userInfo.name }}</span>
-              <span class="userMenu_roleName" v-if="userInfo.role">[{{ userInfo.role }}]</span>
+            <img class="userMenu_avatar" :src="avatar" alt="avatar" />
+            <span>{{ userInfo.name }}</span>
+            <span class="userMenu_roleName" :style="{ color: roleColor }" v-if="userInfo.role">
+              [{{ roleLabel }}]
             </span>
-            <el-icon><arrow-down /></el-icon>
+            <el-icon class="userMenu_icon"><arrow-down /></el-icon>
           </span>
         </template>
         <div class="userMenu_dropdown">
-          <img :src="avatar" alt="" />
+          <img class="userMenu_dropdown_avatar" :src="avatar" alt="avatar" />
           <b>
             {{ userInfo.name }}
-            <span class="userMenu_roleName" v-if="userInfo.role">[{{ userInfo.role }}]</span>
+            <span class="userMenu_roleName" :style="{ color: roleColor }" v-if="userInfo.role">
+              [{{ roleLabel }}]
+            </span>
           </b>
           <div class="loginDateTime">
             <span>登录时间</span>
@@ -90,119 +110,98 @@ const handleLogout = async () => {
       </el-popover>
     </div>
   </div>
+  <GlobalSetting ref="globalSettingRef" />
 </template>
 
 <style lang="scss" scoped>
+$topHoverSize: 35px;
+
 .topHeader {
+  position: relative;
+  z-index: 15;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: #fff;
-  padding-left: 0;
-  z-index: 10;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-  :deep(.el-radio-button__inner:hover) {
-    color: #d15f2c;
-  }
-  :deep(.is-active .el-radio-button__inner:hover) {
-    color: #fff;
-  }
-  .headerBtn {
+  background: var(--jnrs-card-primary);
+  padding: 0 8px;
+  box-shadow: 0 1px 2px var(--jnrs-font-primary-03);
+
+  .btn {
+    position: relative;
     margin: 0 8px;
-    font-size: 24px;
+    font-size: 22px;
     transition: all 0.25s ease 0s;
     cursor: pointer;
     &:hover {
-      color: #d15f2c;
+      color: var(--jnrs-color-primary);
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: $topHoverSize;
+        height: $topHoverSize;
+        background: var(--jnrs-color-primary);
+        opacity: 0.1;
+        border-radius: 50%;
+      }
     }
   }
-  .fullBtn {
-    font-size: 20px;
-  }
-  .sideBtn_active {
-    transform: rotate(-180deg);
-  }
-  .header_left {
-    display: flex;
-    align-items: center;
-  }
-  .header_right {
+
+  .left,
+  .right {
     display: flex;
     align-items: center;
-    .header_right_item {
-      display: flex;
-      align-items: center;
-    }
-    .modeLable {
-      padding-right: 8px;
-      margin-left: 30px;
-      color: #d15f2c;
-      font-size: 14px;
-    }
-  }
-  .hoverBtn {
-    position: relative;
-    top: 1px;
-    font-size: 24px;
-    margin-left: 30px;
-    cursor: pointer;
-    &:hover {
-      color: #d15f2c;
-    }
   }
+
   .userMenu_reference {
     display: flex;
     align-items: center;
-    margin-left: 30px;
-    font-size: 16px;
-    color: #424242;
+    margin-left: 16px;
+    transition: all 0.25s ease;
     cursor: pointer;
     &:hover {
-      color: #d15f2c;
+      color: var(--jnrs-color-primary);
+      .userMenu_icon {
+        color: var(--jnrs-color-primary);
+      }
     }
-    img {
-      width: 35px;
-      height: 35px;
+    .userMenu_avatar {
+      width: $topHoverSize;
+      height: $topHoverSize;
       border-radius: 50%;
-      border: 1px solid #ccc;
-      overflow: hidden;
-      object-fit: cover;
-      object-position: center center;
-      flex-grow: 0;
-      flex-shrink: 0;
+      margin-right: 4px;
+    }
+    .userMenu_icon {
+      margin-left: 4px;
+      color: var(--jnrs-font-primary-06);
     }
   }
   .userMenu_dropdown {
-    padding: 10px;
     text-align: center;
     img {
       width: 80px;
       height: 80px;
-      border: 1px solid #ccc;
       border-radius: 50%;
-      overflow: hidden;
-      object-fit: cover;
-      object-position: center center;
     }
     b {
       display: block;
-      width: 100%;
       font-size: 16px;
-      color: #000;
-      margin-bottom: 5px;
+      color: var(--jnrs-font-primary);
     }
     .loginDateTime {
-      color: #999;
+      color: var(--jnrs-font-primary-06);
     }
     .userMenu_dropdown_btn {
-      margin-top: 20px;
+      margin-top: 8px;
     }
   }
   .userMenu_roleName {
     display: inline;
-    color: #d15f2c;
+    color: var(--jnrs-color-primary);
   }
 }
 </style>

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

@@ -5,10 +5,10 @@ import RouterTabs from './RouterTabs.vue'
 </script>
 
 <template>
-  <el-container class="layout-container">
+  <el-container class="layout_container">
     <SideMenu />
     <el-container>
-      <el-header class="layout-header">
+      <el-header class="layout_header">
         <TopHeader />
       </el-header>
       <RouterTabs />
@@ -24,14 +24,18 @@ import RouterTabs from './RouterTabs.vue'
 </template>
 
 <style lang="scss" scoped>
-.layout-container {
+.layout_header {
   width: 100%;
-  height: 100%;
-  background: #f2f2f2;
+  height: var(--jnrs-head-height);
+  padding: 0;
 }
 
-.layout-header {
-  height: 50px;
-  padding: 0;
+.layout_container {
+  width: 100%;
+  height: 100%;
+
+  .el-main {
+    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.css'
+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,10 +9,13 @@ 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'
+import { changeLocales as changeLocalesForShared } from '@jnrs/shared'
+changeLocalesForShared('en')
 
 const app = createApp(App)
 
-// element-plus 相关
+// element-plus 自动引入所有图标
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
@@ -21,4 +26,5 @@ pinia.use(piniaPluginPersistedstate)
 
 app.use(pinia)
 app.use(router)
+app.use(locales)
 app.mount('#app')

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

@@ -10,25 +10,25 @@ 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: 'Login',
+  //   path: '/login',
+  //   component: () => import('@/views/login/index.vue'),
+  //   meta: { title: '登录', noAuth: true, global: true }
+  // },
   {
     name: LAYOUT_NAME,
     path: '/',

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

@@ -1 +1,2 @@
+export type * from '@jnrs/shared'
 export type * from '@jnrs/vue-core'

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/home/index.vue

@@ -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>