create-jnrs-vue 1.2.11

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

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import BaseInfo from './baseInfo.vue'
+import SecuritySettings from './securitySettings.vue'
+import { ref, computed, watch } from 'vue'
+import { useRoute } from '@jnrs/vue-core/router'
+import type { Component } from 'vue'
+
+type TabName = 'BaseInfo' | 'SecuritySettings'
+
+const componentsMap = {
+  BaseInfo,
+  SecuritySettings
+} as const satisfies Record<TabName, Component>
+
+const tabList = ref<Array<{ label: string; name: TabName }>>([
+  { label: '基本信息', name: 'BaseInfo' },
+  { label: '安全设置', name: 'SecuritySettings' }
+])
+
+const actTabName = ref<TabName>('BaseInfo')
+
+const actTabLabel = computed(() => {
+  return tabList.value.find((d) => d.name === actTabName.value)?.label
+})
+
+const route = useRoute()
+
+watch(
+  () => route.query.tab,
+  (val) => {
+    if (typeof val === 'string' && val in componentsMap) {
+      actTabName.value = val as TabName
+    } else {
+      actTabName.value = tabList.value[0]?.name || 'BaseInfo'
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <el-card class="card" shadow="never">
+    <div class="card_container">
+      <div class="left">
+        <el-tabs v-model="actTabName" tab-position="left">
+          <el-tab-pane
+            v-for="item in tabList"
+            :key="item.name"
+            :label="item.label"
+            :name="item.name"
+          />
+        </el-tabs>
+      </div>
+      <div class="right">
+        <h1>{{ actTabLabel }}</h1>
+        <component
+          class="component animation15"
+          style="animation-duration: 0.8s; animation-delay: 0s"
+          :is="componentsMap[actTabName]"
+        />
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.card {
+  .card_container {
+    display: flex;
+    width: 100%;
+  }
+}
+.left {
+  min-width: 150px;
+  min-height: 300px;
+}
+.right {
+  flex: 1;
+  h1 {
+    margin-bottom: 30px;
+  }
+}
+</style>

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

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { PasswordChangeApi } from '@/api/system'
+import { useAuthStore } from '@jnrs/vue-core/pinia'
+import { handleRouter } from '@jnrs/vue-core/router'
+import { isWeakPwd } from '@jnrs/shared/validator'
+import type { FormInstance, FormItemRule } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { LogoutApi } from '@/api/system'
+
+const { userInfo, clearAuth } = useAuthStore()
+const loading = ref(false)
+const formRef = ref<FormInstance>()
+const ruleForm = ref({
+  originPassword: '',
+  password: '',
+  repassword: ''
+})
+const rules = reactive({
+  originPassword: [{ required: true, message: '请输入', trigger: 'change' }],
+  password: [
+    { required: true, message: '请输入', trigger: 'change' },
+    {
+      validator: isWeakPwd,
+      trigger: 'change'
+    }
+  ],
+  repassword: [
+    { required: true, message: '请输入', trigger: 'change' },
+    {
+      validator: (rule: FormItemRule, value: string, callback: (error?: string) => void) => {
+        if (value && value !== ruleForm.value.password) {
+          callback('两次密码不一致!')
+        } else {
+          callback()
+        }
+      },
+      required: false,
+      trigger: 'change'
+    }
+  ]
+})
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  try {
+    const valid = await formEl.validate()
+    if (valid && userInfo?.id) {
+      loading.value = true
+      await PasswordChangeApi({
+        userId: userInfo.id,
+        password: ruleForm.value.password
+      })
+      ElMessage.success('密码修改成功，请重新登录系统')
+      await LogoutApi()
+      await clearAuth()
+      handleRouter({ name: 'Login' }, 'replace')
+    }
+  } catch {
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="auto" v-loading="loading">
+    <el-form-item label="当前密码" prop="originPassword">
+      <el-input
+        v-model.trim="ruleForm.originPassword"
+        type="password"
+        autocomplete="off"
+        show-password
+        style="width: 200px"
+      />
+    </el-form-item>
+    <el-form-item label="新密码" prop="password">
+      <el-input
+        v-model.trim="ruleForm.password"
+        type="password"
+        autocomplete="off"
+        show-password
+        style="width: 200px"
+      />
+    </el-form-item>
+    <el-form-item label="确认密码" prop="repassword">
+      <el-input
+        v-model.trim="ruleForm.repassword"
+        type="repassword"
+        autocomplete="off"
+        show-password
+        style="width: 200px"
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button class="form_submit" type="primary" @click="submitForm(formRef)">保存修改</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style lang="scss" scoped>
+.form_submit {
+  margin-top: 30px;
+}
+</style>

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

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { FormInstance } from 'element-plus'
+import { ref, nextTick } from 'vue'
+defineOptions({
+  name: 'editDialog'
+})
+
+const loading = ref(false)
+const dialogVisible = ref(false)
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = ref({
+  id: '',
+  name: '',
+  enname: '',
+  remark: '',
+  usable: '1'
+})
+const rules = ref({
+  name: { required: true, message: '请输入角色名称', trigger: 'change' },
+  enname: { required: true, message: '请输入英文名称', trigger: 'change' },
+  usable: { required: true, message: '请选择是否可用', trigger: 'change' }
+})
+
+const toggleVisible = () => {
+  dialogVisible.value = !dialogVisible.value
+  nextTick(() => {
+    ruleFormRef.value?.resetFields()
+  })
+}
+
+const submitForm = () => {
+  if (!ruleFormRef.value) return
+  ruleFormRef.value.validate(async (valid) => {
+    if (!valid) return
+  })
+}
+
+defineExpose({
+  toggleVisible
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    width="600"
+    :append-to-body="true"
+    :close-on-click-modal="true"
+    :close-on-press-escape="true"
+  >
+    <template #header>
+      <h3>{{ ruleForm.id ? '修改' : '添加' }}角色</h3>
+    </template>
+    <el-form
+      ref="ruleFormRef"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="auto"
+      v-loading="loading"
+      style="width: 80%; margin: 0 auto"
+    >
+      <el-form-item prop="id" v-show="false">
+        <el-input v-model="ruleForm.id" />
+      </el-form-item>
+      <el-form-item label="角色名称" prop="name">
+        <el-input v-model="ruleForm.name" maxlength="20" />
+      </el-form-item>
+      <el-form-item label="英文名称" prop="enname">
+        <el-input v-model="ruleForm.enname" maxlength="20" />
+      </el-form-item>
+      <el-form-item label="说明" prop="remark">
+        <el-input v-model="ruleForm.remark" maxlength="200" type="textarea" :rows="5" />
+      </el-form-item>
+      <el-form-item label="是否可用" prop="usable">
+        <el-switch
+          v-model="ruleForm.usable"
+          inline-prompt
+          active-text="是"
+          inactive-text="否"
+          :active-value="true"
+          :inactive-value="false"
+          width="50"
+          style="--el-switch-on-color: #67c23a; --el-switch-off-color: #f56c6c"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="toggleVisible()" :loading="loading">取消</el-button>
+        <el-button type="primary" @click="submitForm()" :loading="loading">提交</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>

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

@@ -0,0 +1,41 @@
+<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()
+
+const handleRoleApi = async () => {
+  try {
+    const res = await RoleApi()
+    tableData.value = res
+  } catch {}
+}
+
+onMounted(() => {
+  handleRoleApi()
+})
+</script>
+
+<template>
+  <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

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+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
+    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>
+
+<style lang="scss" scoped>
+@use 'sass:math';
+@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/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": true, // 不做任何自动重写
+    "isolatedModules": true, // 不依赖全局类型分析
+    "noEmit": true, // 根目录只做类型检查
+    "removeComments": true, // 移除注释
+    "types": ["node"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*", "vite.config.ts", "../../../packages/vue-core/src/composables/useMouseSelection.ts"],
+  "exclude": ["node_modules", "dist"]
+}

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

@@ -0,0 +1,71 @@
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig, loadEnv } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import compression from 'vite-plugin-compression'
+import { viteMockServe } from 'vite-plugin-mock'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+const path = (url: string) => fileURLToPath(new URL(url, import.meta.url))
+const config = loadEnv('development', './')
+const isMock = config.VITE_USE_MOCK === 'true'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()]
+    }),
+    Components({
+      dirs: [], // 禁用本地组件自动导入
+      resolvers: [ElementPlusResolver()]
+    }),
+    compression({
+      verbose: false,
+      disable: false,
+      threshold: 8192,
+      algorithm: 'gzip',
+      ext: '.gz',
+      deleteOriginFile: false
+    }),
+    viteMockServe({
+      mockPath: 'viteMockServe', // mock 文件目录
+      watchFiles: true, // mock 文件热更新
+      enable: isMock, // 是否开启
+      logger: false // 是否在终端显示请求日志
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': path('./src')
+    }
+  },
+  server: {
+    host: config.VITE_APP_HOST || true,
+    port: Number(config.VITE_APP_PORT),
+    open: true,
+    proxy: {
+      '/api': {
+        target: 'http://' + config.VITE_BASE_URL,
+        changeOrigin: true,
+        rewrite: (path: string) => path.replace(/^\/api/, '')
+      },
+      '/ws': {
+        target: 'ws://' + config.VITE_BASE_URL,
+        changeOrigin: true
+      }
+    }
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          '@jnrs/shared': ['@jnrs/shared']
+        }
+      }
+    }
+  }
+})

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

@@ -0,0 +1,38 @@
+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',
+    method: 'post',
+    response: () => {
+      return {
+        code: 3,
+        msg: '暂无权限'
+      }
+    }
+  },
+  // 操作失败
+  {
+    url: '/mock/auth/fail',
+    method: 'post',
+    response: () => {
+      return res_fail
+    }
+  }
+]

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

@@ -0,0 +1,67 @@
+import type { IncomingMessage, ServerResponse } from 'http'
+
+const MIME_TYPES: Record<string, string> = {
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.webp': 'image/webp',
+  '.pdf': 'application/pdf',
+  '.txt': 'text/plain; charset=utf-8',
+  '.json': 'application/json',
+  '.xml': 'application/xml',
+  '.zip': 'application/zip',
+  '.mp4': 'video/mp4',
+  '.mp3': 'audio/mpeg'
+}
+
+export default [
+  {
+    url: /\/mock\/api\/files\/[\w.-]+/,
+    method: 'get',
+    rawResponse: async (req: IncomingMessage, res: ServerResponse) => {
+      if (!req.url) {
+        res.statusCode = 400
+        res.end('Bad Request')
+        return
+      }
+
+      const pathParts = req.url.split('/')
+      const fileName = decodeURIComponent(pathParts[4])
+
+      try {
+        const fs = await import('fs').then((m) => m.default || m)
+        const path = await import('path').then((m) => m.default || m)
+        const filePath = path.resolve(process.cwd(), `viteMockServe/file/${fileName}`)
+        const fileDir = path.resolve(process.cwd(), 'viteMockServe/file')
+
+        if (!filePath.startsWith(fileDir + path.sep) && filePath !== fileDir) {
+          res.statusCode = 403
+          res.end('Forbidden')
+          return
+        }
+
+        if (!fs.existsSync(filePath)) {
+          res.statusCode = 404
+          res.end('File not found')
+          return
+        }
+
+        const buffer = fs.readFileSync(filePath)
+        const ext = path.extname(fileName).toLowerCase()
+        const contentType = MIME_TYPES[ext] || 'application/octet-stream'
+
+        res.setHeader('Content-Type', contentType)
+        res.setHeader('Content-Disposition', `attachment; filename="${encodeURIComponent(fileName)}"`)
+
+        res.statusCode = 200
+        res.end(buffer)
+      } catch (error) {
+        console.error('Mock file serve error:', error)
+        res.statusCode = 500
+        res.end('Internal Server Error')
+      }
+    }
+  }
+]