create-jnrs-template-vue 1.2.2 → 1.2.4

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

@@ -1,12 +1,11 @@
 <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 { useReactivityTableHeight } from '@jnrs/vue-core/composables'
-import type { DictItem } from '@jnrs/shared'
 import { hasPermission } from '@/utils/permissions'
+import { JnTable } from '@jnrs/vue-core/components'
 
-const { maxHeight } = useReactivityTableHeight({ className: 'el_table_dict', bottomGap: 0 })
 const PERMISSION_EDIT = ['dict:edit']
 const loading = ref(false)
 const tableData = ref<DictItem[]>()
@@ -73,80 +72,68 @@ const editKeyValue = (row: DictItem) => {
 </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>
+  <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>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
-  </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">

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

@@ -1,65 +1,53 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useMenuStore } from '@jnrs/vue-core/pinia'
-import { useReactivityTableHeight } from '@jnrs/vue-core/composables'
+import { JnTable } from '@jnrs/vue-core/components'
 
-const { maxHeight } = useReactivityTableHeight({ className: 'el_table_menu', bottomGap: 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>
+  <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="路由地址" 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="NoAuthApi" 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>
+    </JnTable>
+  </el-card>
 </template>

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

@@ -1,18 +1,16 @@
 <script setup lang="ts">
+import type { FormInstance } from 'element-plus'
 import { ref, onMounted } from 'vue'
-import { storeToRefs } from 'pinia'
-import { ElMessage } from 'element-plus'
-import type { UploadProps } from 'element-plus'
 import { useAuthStore } from '@jnrs/vue-core/pinia'
-import { useAvatar } from '@/composables/base/useAvatar'
 import { getDictList } from '@/utils/packages'
-import type { User } from '@jnrs/shared'
+import { JnFileUpload } from '@jnrs/vue-core/components'
+import { AvatarChangeApi } from '@/api/system'
+import { objectMatchAssign } from '@jnrs/shared'
 
-const { userInfo, token } = storeToRefs(useAuthStore())
-const { avatar } = useAvatar()
-const loading = ref(false)
-const ruleFormRef = ref()
-const ruleForm = ref<User>({
+const { userInfo } = useAuthStore()
+// const loading = ref(false)
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = ref({
   id: 0,
   account: '',
   name: '',
@@ -20,7 +18,8 @@ const ruleForm = ref<User>({
   jobTitle: 0,
   workgroup: '',
   role: 0,
-  avatarFileName: ''
+  avatarFileName: '',
+  file: []
 })
 const rules = ref({
   // account: { required: true, message: '请输入', trigger: 'change' },
@@ -29,44 +28,14 @@ const rules = ref({
   // workNo: { required: true, message: '请输入', trigger: 'change' },
 })
 
-interface ApiResponse {
-  code: number
-  message: string
-  data: string
-}
-
 onMounted(() => {
-  if (userInfo.value) {
-    ruleForm.value = userInfo.value
-  }
+  const matched = objectMatchAssign(ruleForm.value, userInfo)
+  ruleForm.value = matched
 })
-
-const handleAvatarSuccess: UploadProps['onSuccess'] = (response: ApiResponse) => {
-  loading.value = false
-  if (userInfo.value && response.code === 0) {
-    userInfo.value.avatarFileName = response.data
-    ElMessage.success({ message: '头像上传成功' })
-  }
-}
-
-const handleProgress = () => {
-  loading.value = true
-}
-
-const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
-  if (rawFile.type.indexOf('image/') < 0) {
-    ElMessage.error('上传头像只能是图片格式！')
-    return false
-  } else if (rawFile.size / 1024 / 1024 > 10) {
-    ElMessage.error('上传头像图片大小不能超过10MB!')
-    return false
-  }
-  return true
-}
 </script>
 
 <template>
-  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" disabled>
+  <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>
@@ -94,23 +63,21 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
         <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="avatarFileName" class="uploader_item">
-      <el-upload
-        action="/api/user/avatar"
-        :headers="{
-          Authorization: 'Bearer ' + token
-        }"
-        :show-file-list="false"
-        :before-upload="beforeAvatarUpload"
-        :on-progress="handleProgress"
-        :on-success="handleAvatarSuccess"
-      >
-        <img v-if="avatar" :src="avatar" class="uploader_avatar" />
-        <el-icon v-else class="uploader_icon"><Plus /></el-icon>
-      </el-upload>
+    <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"
+      />
     </el-form-item>
     <!-- <el-form-item>
-      <el-button class="form_submit" :loading="loading" type="primary" @click="submitForm(ruleFormRef)">
+      <el-button class="form_submit" :loading="loading" type="primary" @click="submitForm">
         保存修改
       </el-button>
     </el-form-item> -->

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { RoleApi } from '@/api/system'
+import { JnTable } from '@jnrs/vue-core/components'
 
 const loading = ref(false)
 const tableData = ref()
@@ -18,33 +19,23 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="main">
-    <el-card shadow="never">
-      <template #header>
-        <div class="card_header">
-          <h3>角色管理</h3>
-        </div>
-      </template>
-      <el-table
-        class="el_table_role"
-        header-cell-class-name="tableData_header_cell"
-        :data="tableData"
-        scrollbar-always-on
-        border
-        v-loading="loading"
-      >
-        <el-table-column prop="label" label="角色名称" width="200" align="center" />
-        <el-table-column prop="value" label="值" width="200" align="center">
-          <template #default="{ row }">
-            {{ row.value + ' [' + typeof row.value + ']' }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="permissions" label="可用权限" header-align="center">
-          <template #default="{ row }">
-            {{ row.permissions }}
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
-  </div>
+  <el-card v-loading="loading">
+    <template #header>
+      <span>角色管理</span>
+    </template>
+
+    <JnTable :data="tableData">
+      <el-table-column prop="label" label="角色名称" width="200" align="center" />
+      <el-table-column prop="value" label="值" width="200" align="center">
+        <template #default="{ row }">
+          {{ row.value + ' [' + typeof row.value + ']' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="permissions" label="可用权限" header-align="center">
+        <template #default="{ row }">
+          {{ row.permissions }}
+        </template>
+      </el-table-column>
+    </JnTable>
+  </el-card>
 </template>

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

@@ -1,22 +1,59 @@
 <script setup lang="ts">
-const goLogin = () => {
-  // removeAll()
-  window.location.href = '/login'
-}
-const goHome = () => {
-  window.location.href = '/'
-}
-const goBack = () => {
-  window.history.go(-1)
-}
+import type { MsgIdMessage, TypeDataMessage } from '@/types/webSocket'
+import { isMsgIdMessage, isTypeDataMessage } from '@/types/webSocket'
+import { storeToRefs } from 'pinia'
+import { useWebSocket } from '@jnrs/vue-core/composables'
+import { useRouter } from '@jnrs/vue-core/router'
+import { useSystemStore } from '@jnrs/vue-core/pinia'
+
+const router = useRouter()
+const systemStore = useSystemStore()
+const { documentFullscreen } = storeToRefs(systemStore)
+const { toggleFullScreen } = systemStore
+
+const { isLoading, wsStateInfo } = useWebSocket({
+  url: '/ws/monitor',
+  connectionTimeoutDuration: 3_000, // 修改仅为测试
+  onMessage: (rawMessage: unknown) => {
+    if (isMsgIdMessage(rawMessage)) {
+      const msg = rawMessage as MsgIdMessage
+      if (msg.msgId && msg.d && typeof msg.d === 'object') {
+        // console.log('接收 msgId 数据:', msg)
+      }
+    } else if (isTypeDataMessage(rawMessage)) {
+      const msg = rawMessage as TypeDataMessage
+      if (msg.type && msg.data && typeof msg.data === 'object') {
+        // console.log('接收 type 数据:', msg)
+      }
+    }
+  }
+})
 </script>
 
 <template>
-  <div>visual</div>
-  <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" @click="goBack">返回上一页</el-button>
+  <div
+    class="visual"
+    v-loading="isLoading"
+    element-loading-background="rgba(0,0,0,.5)"
+    element-loading-text="网络加载中..."
+  >
+    <div class="visual_head">
+      <div class="visual_head_left">
+        <div class="visual_title">
+          <b>数字孪生看板</b>
+          <span>{{ wsStateInfo }}</span>
+        </div>
+      </div>
+      <div class="visual_head_right">
+        <span class="btn" @click="toggleFullScreen">
+          {{ !documentFullscreen ? '启用全屏' : '退出全屏' }}
+        </span>
+        <span class="btn" @click="router.push('/')">返回首页</span>
+      </div>
+    </div>
+    <div class="visual_canvas">
+      <i>canvas</i>
+    </div>
   </div>
 </template>
 
@@ -25,4 +62,82 @@ const goBack = () => {
 @function px2vw($px) {
   @return math.div($px, 1920) * 100vw;
 }
+
+.visual {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  font-size: px2vw(18);
+  overflow: hidden;
+  user-select: none;
+
+  .visual_head {
+    position: absolute;
+    z-index: 10;
+    display: flex;
+    justify-content: space-between;
+    align-items: top;
+    width: 100%;
+    padding: px2vw(10);
+    color: #fff;
+
+    .visual_title {
+      display: inline-flex;
+      align-items: center;
+      font-size: px2vw(24);
+      height: px2vw(30);
+      background: #000;
+      border: px2vw(2) solid #f2f2f2;
+      margin: 0 0 px2vw(5) 0;
+      overflow: hidden;
+
+      b {
+        display: inline-block;
+        padding: 0 px2vw(5);
+        font-size: px2vw(24);
+        background: #f2f2f2;
+        color: #000;
+      }
+
+      span {
+        padding: 0 px2vw(8);
+        color: #f2f2f2;
+        box-sizing: border-box;
+      }
+    }
+
+    .visual_head_right {
+      .btn {
+        align-items: center;
+        padding: 0 px2vw(8);
+        color: #f2f2f2;
+        background: var(--jnrs-color-primary);
+        border-radius: px2vw(2);
+        margin: 0 px2vw(2);
+        transition: all 0.25s ease;
+        cursor: pointer;
+
+        &:hover {
+          filter: brightness(1.3);
+        }
+      }
+    }
+  }
+
+  .visual_canvas {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    i {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: px2vw(100);
+      color: #fff;
+      opacity: 0.5;
+    }
+  }
+}
 </style>

package/jnrs-template-vue/vite.config.ts

@@ -63,7 +63,6 @@ export default defineConfig({
     rollupOptions: {
       output: {
         manualChunks: {
-          '@jnrs/core': ['@jnrs/core'],
           '@jnrs/shared': ['@jnrs/shared']
         }
       }

package/jnrs-template-vue/viteMockServe/fail.ts

@@ -1,9 +1,21 @@
+import type { IncomingMessage, ServerResponse } from 'http'
+
 const res_fail = {
   code: 1,
   msg: '操作失败'
 }
 
 export default [
+  // 404
+  {
+    url: '/mock/notFound',
+    method: 'get',
+    rawResponse: async (req: IncomingMessage, res: ServerResponse) => {
+      res.statusCode = 404
+      res.end('File not found')
+      return
+    }
+  },
   // 权限不足
   {
     url: '/mock/auth/no',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-jnrs-template-vue",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "巨能前端工程化开发，Vue 项目模板脚手架",
   "keywords": [
     "vue",