hlq-cli 1.0.0

package/templates/src/utils/axios/index.ts

@@ -0,0 +1,112 @@
+import axios from 'axios'
+import { useUserStore } from '@/store/user'
+import router from '@/router'
+import { ElLoading, ElMessage, type LoadingParentElement } from 'element-plus'
+
+declare module 'axios' {
+  interface AxiosRequestConfig {
+    noloading?: boolean
+  }
+}
+
+let loading: any
+const count = {
+  count: 0,
+  add: () => {
+    loading = ElLoading.service({ fullscreen: true })
+    count.count += 1
+  },
+  del: () => {
+    count.count -= 1
+    if (count.count === 0) {
+      loading.close()
+    }
+  },
+}
+
+export const request = axios.create({
+  baseURL: import.meta.env.VITE_BASE_URL,
+  timeout: 10000,
+})
+let list: string[] = []
+request.interceptors.request.use(
+  (config: any) => {
+    const store = useUserStore()
+    const controller = new AbortController()
+    config.signal = controller.signal
+    config.headers['Authorization'] = store.token
+    const key =
+      config.url +
+        JSON.stringify(config.data) +
+        JSON.stringify(config.params) +
+        (router && router.currentRoute && router.currentRoute.value.path) || ''
+    if (list.includes(key)) {
+      controller.abort()
+    } else {
+      list.push(key)
+    }
+    config.my = key
+    if (!config.noloading) {
+      count.add()
+    }
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  },
+)
+const errorMsg = new Map([
+  ['Request failed with status code 500', '后端服务出错'],
+  ['Request failed with status code 404', '接口不存在'],
+  ['Request failed with status code 401', '登录信息失效'],
+  ['success', '操作成功'],
+  ['timeout of 10000ms exceeded', '请求超时'],
+])
+request.interceptors.response.use(
+  (response: any) => {
+    if (!response.config.noloading) {
+      count.del()
+    }
+    if (response.request.responseType === 'blob') {
+      return response.data
+    }
+    if (response.config.my) {
+      list = list.filter((item) => item !== response.config.my)
+    }
+    if (response.data.status === 401) {
+      console.log('401')
+      const store = useUserStore()
+      store.setToken('')
+      router.push('/login')
+    }
+    if (response.data.code !== 0) {
+      ElMessage.error({
+        message: response.data.msg || '请求出错',
+      })
+      return Promise.reject(response.data.msg)
+    }
+    if (response.data.code === 0) {
+      if (response.config.auto && response.config.method !== 'get') {
+        ElMessage.success(errorMsg.get(response.data.msg) || response.data.msg)
+      }
+      return response.data
+    }
+  },
+  (error) => {
+    if (error.status === 401) {
+      console.log('401')
+      const store = useUserStore()
+      store.setToken('')
+      router.push('/login')
+    }
+    count.del()
+    if (error.config && error.config.my) {
+      list = list.filter((item) => item !== error.config.my)
+    }
+    if (error.message === 'canceled') return Promise.reject(error)
+    ElMessage.error({
+      message: errorMsg.get(error.message) || error.message,
+    })
+    return Promise.reject(error)
+  },
+)

package/templates/src/utils/axios/service.ts

@@ -0,0 +1,8 @@
+import { HttpService } from './http'
+
+// 主服务（默认）
+export const mainService = new HttpService({
+  baseURL: '/api',
+  timeout: 10000,
+  preserveLongIntegers: true,
+})

package/templates/src/utils/crypto/index.ts

@@ -0,0 +1,28 @@
+import CryptoJS from "crypto-js";
+
+const key = "1234567887654321";
+export const PublicData = (data: string) => {
+  let encrypted = CryptoJS.AES.encrypt(
+    CryptoJS.enc.Utf8.parse(data),
+    CryptoJS.enc.Utf8.parse(key),
+    {
+      iv: CryptoJS.enc.Utf8.parse(key),
+      mode: CryptoJS.mode.ECB,
+      padding: CryptoJS.pad.Pkcs7,
+    }
+  );
+  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
+};
+export const PrivateData = (data: string) => {
+  let decrypt = CryptoJS.AES.decrypt(
+    CryptoJS.enc.Base64.stringify(CryptoJS.enc.Base64.parse(data)),
+    CryptoJS.enc.Utf8.parse(key),
+    {
+      iv: CryptoJS.enc.Utf8.parse(key),
+      mode: CryptoJS.mode.ECB,
+      padding: CryptoJS.pad.Pkcs7,
+    }
+  );
+  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
+  return decryptedStr.toString();
+};

package/templates/src/utils/rsa/index.ts

@@ -0,0 +1,18 @@
+import JSEncrypt from "jsencrypt";
+const publicKey =
+  "MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBALzt+PFt/RMrOCCdxHFEL1TG+mMoYs/ijAEjO1oJrXTQWPMolqBN50Ud/a3B/PmKo/MFsrZKV2SkQiqohz/cBxECAwEAAQ==";
+const privateKey =
+  "MIIBUwIBADANBgkqhkiG9w0BAQEFAASCAT0wggE5AgEAAkEAvO348W39Eys4IJ3EcUQvVMb6Yyhiz+KMASM7WgmtdNBY8yiWoE3nRR39rcH8+Yqj8wWytkpXZKRCKqiHP9wHEQIDAQABAkABfwT0rIFPkI0OPRGcMAUL79N1y5EUwl+Hdsb2jJMSFLzSBJEsvkqybOa+gHK7xdKGLn/M1U6a2VxH0HCXTkABAiEA6pazruvnKfugK+qhOSF8G8aoj/3sn6mmxAo7DUepGxECIQDOLGtwLv3zr0znREQp1svLv1e4A0nFdvAcYDIV9swsAQIgAxT5xVmKDu4kW49YkOSUudSxUDr4ydwzua2cuv7vBNECIHGAVLlStW2k8RJUK65Y2KLXOMRN0xwJSVBlyMz8rBQBAiBt6ja7sUE15YBKuCh8BpfONfqxBZNqeO0aZEedTVpqTw==";
+
+export const rsaPublicData = (data: string) => {
+  const jsencrypt = new JSEncrypt();
+  jsencrypt.setPublicKey(publicKey);
+  const result = jsencrypt.encrypt(data);
+  return result;
+};
+export const rsaPrivateData = (data: string) => {
+  const jsencrypt = new JSEncrypt();
+  jsencrypt.setPrivateKey(privateKey);
+  const result = jsencrypt.decrypt(data);
+  return result;
+};

package/templates/src/utils/token/index.ts

@@ -0,0 +1,6 @@
+import { jwtDecode } from "jwt-decode";
+
+export const decode = (token: string) => {
+  const result = jwtDecode(token);
+  return result;
+};

package/templates/src/utils/tree/index.ts

@@ -0,0 +1,74 @@
+/**
+ * 获取树形数据子节点数据
+ *
+ * @param {Data} node
+ * @returns {Data[]}
+ */
+export const treeTolist = (node: Data | Data[]) => {
+  const result: Data[] = []
+  function traverse(node: Data) {
+    if (node.children && node.children.length > 0) {
+      node.children.forEach((item: Data) => {
+        traverse(item)
+      })
+    } else {
+      result.push(node)
+    }
+  }
+  if (Array.isArray(node)) {
+    node.forEach((item: Data) => {
+      traverse(item)
+    })
+  } else {
+    traverse(node)
+  }
+  return result
+}
+
+export const listTotree = (
+  list: Data[],
+  parentKey?: string,
+  idKey?: string,
+  sortKey?: string,
+  isSearch?: boolean,
+): Data[] => {
+  const map = new Map()
+  const roots: Data[] = []
+
+  list.forEach((item) => {
+    map.set(item[idKey || 'id'], { ...item, children: [] })
+  })
+
+  list
+    .sort((a: Data, b: Data) => {
+      return (a[sortKey || 'index'] || 99) - (b[sortKey || 'index'] || 99)
+    })
+    .forEach((item) => {
+      const node = map.get(item[idKey || 'id'])
+      if (item[parentKey || 'parentId']) {
+        const parent = map.get(item[parentKey || 'parentId'])
+        if (parent) {
+          parent.children.push(node)
+        } else if (isSearch) {
+          roots.push(node)
+        }
+      } else {
+        roots.push(node)
+      }
+    })
+
+  return roots
+}
+
+// 获取树第一个子节点
+export const getTreeFirstChild = (tree: Array<Data>): Data => {
+  if (tree && tree.length > 0) {
+    let node = tree[0]
+    while (node.children && node.children.length > 0) {
+      node = node.children[0]
+    }
+    return node
+  } else {
+    return {} as Data
+  }
+}

package/templates/src/utils/websocket/index.ts

@@ -0,0 +1,136 @@
+import { onUnmounted } from "vue";
+
+//设置
+interface SocketOptions {
+  //心跳间隔
+  heartbeatInterval?: number;
+  //超时重传
+  reconnectInterval?: number;
+  //最大重传次数
+  maxReconnectAttempts?: number;
+}
+
+class Socket {
+  //路径
+  url: string;
+  ws: WebSocket | null = null;
+  opts: SocketOptions;
+  //重传次数
+  reconnectAttempts: number = 0;
+  listeners: { [key: string]: Function[] } = {};
+  //心跳间隔
+  heartbeatInterval: number | null = null;
+  //构造函数
+  constructor(url: string, opts: SocketOptions = {}) {
+    this.url = url;
+    this.opts = {
+      //心跳间隔
+      heartbeatInterval: 30000,
+      //超时重传
+      reconnectInterval: 5000,
+      //最大重传次数
+      maxReconnectAttempts: 5,
+      ...opts,
+    };
+
+    this.init();
+  }
+  //初始化
+  init() {
+    this.ws = new WebSocket(this.url);
+    this.ws.onopen = this.onOpen.bind(this);
+    this.ws.onmessage = this.onMessage.bind(this);
+    this.ws.onerror = this.onError.bind(this);
+    this.ws.onclose = this.onClose.bind(this);
+  }
+  //打开
+  onOpen(event: Event) {
+    this.reconnectAttempts = 0;
+    this.startHeartbeat();
+    this.emit("open", event);
+  }
+  //收到的WebSocket消息
+  onMessage(event: MessageEvent) {
+    // console.log('WebSocket message received:', event.data);
+    this.emit("message", event.data);
+  }
+  //错误
+  onError(event: Event) {
+    this.emit("error", event);
+  }
+  //重连逻辑中，在连接失败后自动重新连接
+  onClose(event: CloseEvent) {
+    this.stopHeartbeat();
+    this.emit("close", event);
+    //重连逻辑中，在连接失败后自动重新连接，但会限制重连的次数和每次重连之间的间隔时间
+    if (
+      this.opts.maxReconnectAttempts !== 0 &&
+      this.reconnectAttempts < this.opts.maxReconnectAttempts!
+    ) {
+      setTimeout(() => {
+        this.reconnectAttempts++;
+        this.init();
+      }, this.opts.reconnectInterval);
+    }
+  }
+  //开始心跳检测
+  startHeartbeat() {
+    if (!this.opts.heartbeatInterval) return;
+
+    this.heartbeatInterval = window.setInterval(() => {
+      if (this.ws?.readyState === WebSocket.OPEN) {
+        this.ws.send("ping");
+      }
+    }, this.opts.heartbeatInterval);
+  }
+  //停止心跳检测
+  stopHeartbeat() {
+    if (this.heartbeatInterval) {
+      clearInterval(this.heartbeatInterval);
+      this.heartbeatInterval = null;
+    }
+  }
+  //发送消息
+  send(data: string) {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      this.ws.send(data);
+    } else {
+    }
+  }
+  //事件监听器注册功能的实现
+  on(event: string, callback: Function) {
+    if (!this.listeners[event]) {
+      this.listeners[event] = [];
+    }
+    this.listeners[event].push(callback);
+  }
+  //从事件监听器中移除
+  off(event: string) {
+    if (this.listeners[event]) {
+      delete this.listeners[event];
+    }
+  }
+  //在事件监听器中触发一个指定的事件
+  emit(event: string, data: any) {
+    this.listeners[event]?.forEach((callback) => callback(data));
+  }
+}
+
+export function useSocket(url: string, opts?: SocketOptions) {
+  const socket = new Socket(url, opts);
+
+  onUnmounted(() => {
+    socket.off("open");
+    socket.off("message");
+    socket.off("error");
+    socket.off("close");
+    socket.ws?.close(); // 关闭WebSocket连接
+  });
+
+  return {
+    socket,
+    send: socket.send.bind(socket),
+    on: socket.on.bind(socket),
+    off: socket.off.bind(socket),
+  };
+}

package/templates/src/views/login/index.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="login-container">
+    <div class="login-box">
+      <div class="login-header">
+        <h2>系统登录</h2>
+        <p>欢迎使用管理系统</p>
+      </div>
+      <el-form
+        ref="loginForm"
+        :model="formData"
+        :rules="rules"
+        class="login-form"
+      >
+        <el-form-item prop="username">
+          <el-input
+            v-model="formData.username"
+            placeholder="请输入用户名"
+            prefix-icon="User"
+            size="large"
+          />
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input
+            v-model="formData.password"
+            type="password"
+            placeholder="请输入密码"
+            prefix-icon="Lock"
+            size="large"
+            show-password
+          />
+        </el-form-item>
+        <el-form-item prop="captcha">
+          <div class="captcha-wrapper">
+            <el-input
+              v-model="formData.captcha"
+              placeholder="请输入验证码"
+              prefix-icon="Code"
+              size="large"
+            />
+            <div class="captcha-image" @click="refreshCaptcha">
+              <span>{{ captchaCode }}</span>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item>
+          <el-checkbox v-model="formData.remember">记住我</el-checkbox>
+          <span class="forgot-password">忘记密码？</span>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            size="large"
+            class="login-btn"
+            @click="handleLogin"
+            :loading="loading"
+          >
+            {{ loading ? '登录中...' : '登录' }}
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <div class="login-footer">
+        <span>© 2024 管理系统</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+
+const loginForm = ref()
+const loading = ref(false)
+
+const formData = reactive({
+  username: '',
+  password: '',
+  captcha: '',
+  remember: false,
+})
+
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    {
+      min: 3,
+      max: 20,
+      message: '用户名长度在3到20个字符之间',
+      trigger: 'blur',
+    },
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, max: 30, message: '密码长度在6到30个字符之间', trigger: 'blur' },
+  ],
+  captcha: [
+    { required: true, message: '请输入验证码', trigger: 'blur' },
+    { len: 4, message: '验证码长度为4位', trigger: 'blur' },
+  ],
+}
+
+const captchaCode = ref('')
+
+const generateCaptcha = () => {
+  const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
+  let result = ''
+  for (let i = 0; i < 4; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length))
+  }
+  return result
+}
+
+const refreshCaptcha = () => {
+  captchaCode.value = generateCaptcha()
+}
+
+refreshCaptcha()
+const router = useRouter()
+
+const handleLogin = async () => {
+  if (!loginForm.value) return
+
+  loginForm.value.validate((valid: boolean) => {
+    if (valid) {
+      loading.value = true
+      setTimeout(() => {
+        if (
+          formData.captcha.toLowerCase() !== captchaCode.value.toLowerCase()
+        ) {
+          ElMessage.error('验证码错误')
+          refreshCaptcha()
+          loading.value = false
+          return
+        }
+        if (formData.username === 'admin' && formData.password === '123456') {
+          ElMessage.success('登录成功')
+          loading.value = false
+          router.push({ path: '/table' })
+        } else {
+          ElMessage.error('用户名或密码错误')
+          loading.value = false
+        }
+      }, 1000)
+    }
+  })
+}
+
+// 页面加载时检查是否记住用户名
+const savedUsername = localStorage.getItem('username')
+const remember = localStorage.getItem('remember')
+if (savedUsername && remember === 'true') {
+  formData.username = savedUsername
+  formData.remember = true
+}
+</script>
+
+<style lang="scss" scoped>
+.login-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.login-box {
+  width: 100%;
+  max-width: 420px;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  padding: 40px;
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 30px;
+
+  h2 {
+    margin: 0 0 10px 0;
+    font-size: 28px;
+    font-weight: 600;
+    color: #333;
+  }
+
+  p {
+    margin: 0;
+    color: #999;
+    font-size: 14px;
+  }
+}
+
+.login-form {
+  margin-bottom: 20px;
+}
+
+.captcha-wrapper {
+  display: flex;
+  gap: 12px;
+}
+
+.captcha-image {
+  flex-shrink: 0;
+  width: 100px;
+  height: 44px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: bold;
+  color: #666;
+  letter-spacing: 2px;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.forgot-password {
+  float: right;
+  color: #667eea;
+  font-size: 14px;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.login-btn {
+  width: 100%;
+  height: 48px;
+  font-size: 16px;
+  border-radius: 8px;
+}
+
+.login-footer {
+  text-align: center;
+  color: #999;
+  font-size: 12px;
+}
+</style>