create-jnrs-vue 1.2.11

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

@@ -0,0 +1,314 @@
+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import { ref } from 'vue'
+import { RoleApi, LoginApi } from '@/api/system'
+import { useAuthStore } from '@jnrs/vue-core/pinia'
+import { handleRouter, useRoute } from '@jnrs/vue-core/router'
+import { isWeakPwd } from '@jnrs/shared/validator'
+import { formatDateTime, formatWeekday } from '@jnrs/shared'
+import { GlobalSetting } from '@jnrs/vue-core/components'
+
+const route = useRoute()
+
+const globalSettingRef = ref()
+const showGlobalSetting = () => {
+  globalSettingRef.value.handleShow()
+}
+
+const loading = ref(false)
+const { setUserInfo, setToken, setDict, setRole } = useAuthStore()
+
+// 表单 ref
+const ruleFormRef = ref<FormInstance>()
+// 表单数据
+const ruleForm = ref({
+  account: '',
+  password: ''
+})
+// 校验规则
+const rules = ref<FormRules>({
+  account: [{ required: true, message: '请输入用户名', trigger: 'change' }],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'change' },
+    { validator: isWeakPwd, trigger: 'change' }
+  ]
+})
+
+// 提交函数
+const submitForm = async () => {
+  if (!ruleFormRef.value) return
+  ruleFormRef.value.validate(async (valid) => {
+    if (!valid) return
+    loading.value = true
+
+    try {
+      const loginRes = await LoginApi(ruleForm.value)
+      const { token, dict, ...restParameter } = loginRes
+      const loginDateTime = formatDateTime() + ' ' + formatWeekday()
+
+      // 登录成功后，获取角色列表，将登录人角色对应的权限叠加给当前登录人（一次性获取叠加）
+      let permissionsMerger = restParameter.permissions
+      try {
+        const roleRes = await RoleApi()
+        if (Array.isArray(restParameter.permissions)) {
+          permissionsMerger = [
+            ...new Set([
+              ...restParameter.permissions,
+              ...(roleRes.find((r) => r.value === restParameter.role)?.permissions ?? []).flat()
+            ])
+          ]
+        }
+        setRole(roleRes) // 由于是一次性获取叠加，此处不需要保存角色列表到全局状态
+      } catch (e) {
+        console.log(e)
+      }
+
+      // 保存用户信息到全局状态
+      setUserInfo({
+        ...restParameter,
+        permissions: permissionsMerger,
+        account: ruleForm.value.account,
+        loginDateTime
+      })
+      setToken(token)
+      setDict(dict)
+      handleRouter({ path: route.query.redirect?.toString() || '/' }, 'replace')
+    } catch (e) {
+      console.log(e)
+    } finally {
+      loading.value = false
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="login no_select">
+    <div class="topFixed_right">
+      <el-icon class="topBarBtn" title="全局偏好设置" @click="showGlobalSetting()">
+        <el-icon><Setting /></el-icon>
+      </el-icon>
+    </div>
+    <div class="card">
+      <div class="card_left">
+        <div class="card_left_mid">
+          <img class="logo" src="@/assets/images/common/jnrs-white.svg" alt="JNRS" />
+          <h5 class="title">{{ $t('login.title') }}</h5>
+        </div>
+      </div>
+      <div class="card_right">
+        <div class="card_right_mid">
+          <h1 class="title">{{ $t('login.formTitle') }}</h1>
+          <el-form
+            class="form"
+            ref="ruleFormRef"
+            :model="ruleForm"
+            :rules="rules"
+            size="large"
+            @keyup.enter="submitForm()"
+          >
+            <el-form-item prop="account">
+              <el-input
+                v-model="ruleForm.account"
+                :placeholder="$t('login.formAccount')"
+                prefix-icon="User"
+                clearable
+              />
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input
+                v-model="ruleForm.password"
+                type="password"
+                autocomplete="off"
+                :placeholder="$t('login.formPassword')"
+                prefix-icon="Lock"
+                show-password
+              ></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button class="btn" type="primary" :loading="loading" @click="submitForm()">
+                {{ $t('login.formBtn') }}
+              </el-button>
+            </el-form-item>
+          </el-form>
+          <div class="greeting">{{ $t('login.greeting') }}</div>
+        </div>
+        <div class="copyright">Powered by JNRS TECH 2026</div>
+      </div>
+    </div>
+  </div>
+  <GlobalSetting ref="globalSettingRef" />
+</template>
+
+<style scoped lang="scss">
+.login {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at center, #232a4c, #000);
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(transparent 50%, rgba(255, 255, 255, 0.05) 50%);
+    background-size: 10px 10px;
+  }
+}
+
+.topBarBtn {
+  font-size: 22px;
+  color: #c2c2c2;
+}
+
+.topFixed_right {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 8px 16px;
+}
+
+.card {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 1000px;
+  height: 500px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+
+  .card_left {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+    height: 100%;
+    background: radial-gradient(circle at center, #232a4c, #000);
+    box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
+
+    .card_left_mid {
+      width: 50%;
+
+      .logo {
+        width: 100%;
+        margin-bottom: 20px;
+        filter: opacity(0.5);
+      }
+
+      .title {
+        text-align: center;
+        font-size: 24px;
+        white-space: nowrap;
+        font-weight: normal;
+        font-family: AlimamaShuHeiTi-Bold;
+        color: rgba(255, 255, 255, 0.5);
+      }
+    }
+  }
+
+  .card_right {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      backdrop-filter: blur(2px);
+      -webkit-backdrop-filter: blur(2px);
+    }
+
+    .card_right_mid {
+      width: 50%;
+
+      .title {
+        text-align: center;
+        text-transform: uppercase;
+        color: var(--jnrs-color-primary);
+      }
+
+      .form {
+        margin-top: 50px;
+      }
+
+      .btn {
+        width: 100%;
+        background: var(--jnrs-color-primary);
+        border: none;
+        transition: all 0.25s ease;
+
+        &:hover {
+          background: var(--jnrs-color-primary-light);
+        }
+      }
+
+      .greeting {
+        position: relative;
+        color: var(--jnrs-color-primary-06);
+        font-size: 14px;
+        text-align: center;
+        text-transform: uppercase;
+
+        &::before,
+        &::after {
+          content: '';
+          position: absolute;
+          right: 0;
+          top: 50%;
+          width: 35%;
+          height: 1px;
+          background: var(--jnrs-color-primary-06);
+          transform: translateY(-50%);
+          filter: opacity(0.25);
+        }
+
+        &::after {
+          left: 0;
+          top: 50%;
+        }
+      }
+    }
+
+    .copyright {
+      position: absolute;
+      bottom: 5px;
+      font-size: 12px;
+      text-transform: uppercase;
+      color: var(--jnrs-font-primary-01);
+    }
+  }
+}
+
+.light {
+  .card_right {
+    &::after {
+      background: var(--jnrs-card-primary-06);
+    }
+  }
+}
+
+.dark {
+  .card_right {
+    &::after {
+      background: var(--jnrs-card-primary-03);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type { DictItem } from '@jnrs/shared'
+import { ElMessage } from 'element-plus'
+import { ref, onActivated } from 'vue'
+import { DictApi, DictDetailApi, DictChangeApi } from '@/api/system'
+import { hasPermission } from '@/utils/permissions'
+import { JnTable } from '@jnrs/vue-core/components'
+
+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>
+  <el-card v-loading="loading">
+    <template #header>
+      <span>字典管理</span>
+    </template>
+
+    <JnTable :data="tableData" @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">
+            <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>
+    </JnTable>
+  </el-card>
+</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,43 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useMenuStore } from '@jnrs/vue-core/pinia'
+import { JnTable } from '@jnrs/vue-core/components'
+
+const loading = ref(false)
+
+const { menus } = useMenuStore()
+</script>
+
+<template>
+  <el-card v-loading="loading">
+    <template #header>
+      <span>菜单管理</span>
+    </template>
+
+    <JnTable :data="menus" row-key="meta.uuid" :showScrollbar="true">
+      <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="path" min-width="120" header-align="center" />
+      <el-table-column prop="name" label="name" min-width="120" header-align="center" />
+      <el-table-column prop="component" label="component" min-width="120" header-align="center" />
+      <el-table-column prop="redirect" label="redirect" min-width="120" header-align="center" />
+      <el-table-column prop="meta.permissions" label="permissions" min-width="120" header-align="center">
+        <template #default="{ row }">
+          <span>{{ 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="meta.noAuth" label="meta.noAuth" width="80" align="center" />
+      <el-table-column prop="meta.global" label="meta.global" width="80" align="center" />
+    </JnTable>
+  </el-card>
+</template>

package/jnrs-template-vue/src/views/system/mine/baseInfo.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { FormInstance } from 'element-plus'
+import { ref, onMounted } from 'vue'
+import { useAuthStore } from '@jnrs/vue-core/pinia'
+import { getDictList } from '@/utils/packages'
+import { JnFileUpload } from '@jnrs/vue-core/components'
+import { AvatarChangeApi } from '@/api/system'
+import { objectMatchAssign } from '@jnrs/shared'
+
+const { userInfo } = useAuthStore()
+// const loading = ref(false)
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = ref({
+  id: 0,
+  account: '',
+  name: '',
+  workNo: '',
+  jobTitle: 0,
+  workgroup: '',
+  role: 0,
+  avatarFileName: '',
+  file: []
+})
+const rules = ref({
+  // account: { required: true, message: '请输入', trigger: 'change' },
+  // role: { required: true, message: '请输入', trigger: 'change' },
+  // name: { required: true, message: '请输入', trigger: 'change' },
+  // workNo: { required: true, message: '请输入', trigger: 'change' },
+})
+
+onMounted(() => {
+  const matched = objectMatchAssign(ruleForm.value, userInfo)
+  ruleForm.value = matched
+})
+</script>
+
+<template>
+  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" :disabled="true">
+    <el-form-item label="登录账号" prop="account">
+      <el-input v-model.trim="ruleForm.account" style="width: 200px" />
+    </el-form-item>
+    <el-form-item label="名称" prop="name">
+      <el-input v-model.trim="ruleForm.name" style="width: 200px" />
+    </el-form-item>
+    <el-form-item label="工号" prop="workNo">
+      <el-input v-model.trim="ruleForm.workNo" style="width: 200px" />
+    </el-form-item>
+    <el-form-item label="职称" prop="jobTitle">
+      <el-select v-model="ruleForm.jobTitle" placeholder="" style="width: 200px">
+        <el-option
+          :label="item.label"
+          :value="item.value"
+          v-for="(item, index) in getDictList('jobTitle')"
+          :key="index"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="部门/班组" prop="workgroup">
+      <el-input v-model.trim="ruleForm.workgroup" style="width: 200px" />
+    </el-form-item>
+    <el-form-item label="职位/账号权限" prop="role">
+      <el-select v-model="ruleForm.role" placeholder="" style="width: 200px">
+        <el-option :label="item.label" :value="item.value" v-for="(item, index) in getDictList('role')" :key="index" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="头像" prop="file" class="uploader_item">
+      <JnFileUpload
+        v-model="ruleForm.file"
+        :formRef="ruleFormRef"
+        validateFieldName="newImageFiles"
+        accept=".png,.jpg,.bmp,.gif"
+        :fileSizeMb="50"
+        :limit="1"
+        :showFileList="false"
+        :autoUploadApi="AvatarChangeApi"
+        style="width: 500px"
+        :disabled="true"
+      />
+    </el-form-item>
+    <!-- <el-form-item>
+      <el-button class="form_submit" :loading="loading" type="primary" @click="submitForm">
+        保存修改
+      </el-button>
+    </el-form-item> -->
+  </el-form>
+</template>
+
+<style lang="scss" scoped>
+.uploader_item {
+  .uploader_avatar {
+    width: 100px;
+    height: 100px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+  }
+  .uploader_icon {
+    width: 100px;
+    height: 100px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    font-size: 20px;
+    color: #bbb;
+  }
+}
+.form_submit {
+  margin-top: 30px;
+}
+</style>