hlq-cli 1.0.0

package/templates/src/components/groupForm/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <!-- 表单页面 -->
+  <div class="formUpdata">
+    <template v-for="(item, index) in config" v-if="state.hasGroup">
+      <el-divider content-position="left">{{ item.title }}</el-divider>
+      <div>
+        <Form
+          :form-data="formData"
+          :form-item-config="item.config"
+          :onlyRead="onlyRead"
+          :ref="(el) => setItemRef(el, index as number)"
+        ></Form>
+      </div>
+    </template>
+    <template v-else>
+      <Form
+        :form-data="formData"
+        :form-item-config="config"
+        :onlyRead="onlyRead"
+        :ref="(el) => setItemRef(el, 0)"
+      ></Form>
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, reactive, ref } from 'vue'
+import Form from '@/components/form/index.vue'
+
+interface Props {
+  onlyRead?: boolean
+  config: any
+  formData: Data
+}
+const props = withDefaults(defineProps<Props>(), {
+  onlyRead: false,
+})
+const formRef = ref<any[]>([])
+interface stateInterface {
+  buttonList: any
+  hasGroup: boolean
+}
+const state = reactive<stateInterface>({
+  buttonList: [],
+  hasGroup: false,
+})
+const setItemRef = (el: any, index: number) => {
+  if (el) {
+    formRef.value[index] = el
+  }
+}
+const getFormData = async () => {
+  let valid = true
+  for (let item of formRef.value) {
+    const flag = await item.valid()
+    valid = valid && flag
+  }
+  if (!valid) {
+    return
+  }
+  let data = {}
+  for (let item of formRef.value) {
+    const formData = item.getFormData()
+    data = { ...data, ...formData }
+  }
+  return data
+}
+const clear = () => {
+  for (let item of formRef.value) {
+    item.clear()
+  }
+}
+onMounted(() => {
+  if (props.config.find((item: any) => item.type === 'group')) {
+    state.hasGroup = true
+  } else {
+    state.hasGroup = false
+  }
+})
+defineExpose({ getFormData, clear })
+</script>
+<style lang="scss" scoped>
+.formUpdata {
+  // width: calc(100% - 2 * var(--el-main-padding-left));
+  // height: calc(100% - 2 * var(--el-main-padding-top) - 6px);
+  .buttonBox {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+  }
+}
+</style>

package/templates/src/components/icon/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg class="icon" aria-hidden="true" v-if="name.indexOf('icon-') === 0">
+    <use :xlink:href="`#${name}`"></use>
+  </svg>
+  <img v-else :src="imagePath" alt="" class="icon" />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  name: string;
+}
+
+const { name } = defineProps<Props>();
+
+const imagePath = computed(() => {
+  try {
+    // 动态导入SVG文件
+    return new URL(`../../assets/svg/${name}.svg`, import.meta.url).href;
+  } catch (error) {
+    console.error(`Failed to load SVG: ${name}`, error);
+    return ''; // 返回空字符串或默认图片路径
+  }
+});
+</script>
+
+<style scoped>
+</style>

package/templates/src/components/layout/header.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="header">
+    <div class="logoBox">
+      <div class="logoIcon"></div>
+      <div class="title">{title}</div>
+    </div>
+    <slot></slot>
+    <div class="otherBox">
+      <el-dropdown @command="handleCommand">
+        <div class="flexRow">
+          <div class="person">
+            <!-- <icon name="icon-changongxiao_gerenzhongxin"></icon> -->
+          </div>
+          <div style="padding: 12px; color: #fff">
+            <div>{{ userStore.otherMessage.name }}</div>
+          </div>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item command="changePassword">
+              修改密码
+            </el-dropdown-item>
+            <el-dropdown-item command="quit">退出</el-dropdown-item>
+            <!-- <el-dropdown-item command="personalCenter">
+              个人中心
+            </el-dropdown-item> -->
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+    <Dialog
+      title="修改密码"
+      v-model:model-value="state.changePasswordShow"
+      width="460px"
+      @submit="passwordSubmit"
+      destroy-on-close
+    >
+      <div class="changePassword">
+        <el-form label-width="80px" class="changePasswordForm">
+          <el-form-item label="旧密码" prop="oldPassword">
+            <el-input
+              v-model="state.oldPassword"
+              type="password"
+              show-password
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="新密码" prop="newPassword">
+            <el-input
+              v-model="state.newPassword"
+              type="password"
+              show-password
+              autocomplete="new-password"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="确认密码" prop="confirmPassword">
+            <el-input
+              v-model="state.confirmPassword"
+              type="password"
+              show-password
+              autocomplete="new-password"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </Dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { useUserStore } from '@/store/user'
+import { onMounted, reactive, ref, watch } from 'vue'
+import Dialog from '@/components/dialog/index.vue'
+import { ElMessage } from 'element-plus'
+import { PublicData } from '@/utils/crypto'
+const userStore = useUserStore()
+const state = reactive({
+  changePasswordShow: false,
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: '',
+})
+const handleCommand = (data: string) => {
+  switch (data) {
+    case 'quit':
+      break
+    case 'personalCenter':
+      break
+    case 'changePassword':
+      state.changePasswordShow = true
+      break
+  }
+}
+const passwordSubmit = async () => {
+  // 密码长度8-20个字符
+  // 密码不能包含空格
+  // 密码由字母开头且必须包含大写字母、小写字母、数字，支持特殊字符！@#$%^&*()-+
+  if (state.newPassword !== state.confirmPassword) {
+    ElMessage.error('两次输入的密码不一致，请重新输入')
+    return
+  }
+  const passwordRegex =
+    /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)[A-Za-z][A-Za-z\d!@#$%^&*()\-+]{7,19}$/
+  if (!passwordRegex.test(state.newPassword)) {
+    ElMessage.error(
+      '密码必须由字母开头，且包含大写字母、小写字母、数字，支持特殊字符！@#$%^&*()-+，长度为8-20个字符',
+    )
+    return
+  }
+
+  // const userInfo = await api(
+  //   apiUrl.getUserInfo,
+  //   'get',
+  //   {
+  //     id: userStore.otherMessage.userId,
+  //   },
+  //   false,
+  // )
+  // if (PublicData(state.oldPassword) !== userInfo.data.password) {
+  //   ElMessage.error('旧密码输入错误，请重新输入')
+  //   return
+  // }
+  const params = {
+    username: userStore.otherMessage.username,
+    oldPwd: PublicData(state.oldPassword),
+    newPwd: PublicData(state.newPassword),
+  }
+}
+// 切换角色
+const change = (key: string) => {
+  // keepAliveStore.changeCurrentRole(key)
+}
+onMounted(() => {
+  // keepAliveStore.changeCurrentRole(active.value, true, true)
+})
+watch(
+  () => state.changePasswordShow,
+  (newVal: boolean) => {
+    if (!newVal) {
+      state.oldPassword = ''
+      state.newPassword = ''
+      state.confirmPassword = ''
+    }
+  },
+)
+</script>
+<style scoped lang="scss">
+.header {
+  // background-image: url(@/assets/img/header.png);
+  background-color: var(--el-color-primary);
+  height: 100%;
+  width: calc(100% - 48px);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  .logoBox {
+    display: flex;
+    align-items: center;
+    height: 36px;
+    width: 220px;
+    justify-content: space-around;
+    .logoIcon {
+      display: flex;
+      align-items: center;
+      background-image: url(@/assets/img/logo.png);
+      background-size: cover;
+      height: 36px;
+      width: 36px;
+    }
+    .title {
+      color: #fff;
+      font-size: 20px;
+      font-weight: bold;
+      margin-left: 10px;
+    }
+  }
+  .logo {
+    font-size: 40px;
+    border-radius: 8px;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .name {
+    color: #000;
+    text-shadow:
+      -1px 0 #fff,
+      0 1px #fff,
+      1px 0 #fff,
+      0 -1px #fff;
+    font-size: 24px;
+    font-weight: bold;
+    margin-left: 10px;
+  }
+  .roleSelect {
+    width: 120px;
+    color: #fff;
+  }
+  .otherBox {
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    .person {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      font-size: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--el-color-primary-light-9);
+      background-image: url(@/assets/img/user.png);
+      background-size: cover;
+    }
+  }
+}
+.changePassword {
+  width: 400px;
+  .changePasswordForm {
+    margin-top: 20px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .el-form-item {
+      width: 100%;
+      margin-bottom: 20px;
+      .el-input {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

package/templates/src/components/layout/index.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="common-layout">
+    <el-header>
+      <layoutHeader>
+        <div style="width: calc(100% - 600px); padding: 0 24px">
+          <layoutMenu @fold-change="foldChange" mode="horizontal"></layoutMenu>
+        </div>
+      </layoutHeader>
+    </el-header>
+    <el-container class="main">
+      <el-main>
+        <div style="margin-bottom: 12px">
+          <el-breadcrumb separator="/">
+            <el-breadcrumb-item
+              v-for="item in routeList"
+              :key="item.path"
+              :to="item.meta.code ? item.path : undefined"
+              style="font-size: 12px"
+            >
+              {{ item.meta.title }}
+            </el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+        <div
+          class="topContent"
+          :style="'background:#fff0;padding: 0;border-radius: 0;height: calc(100% - 12px - 12px - 10px);'"
+        >
+          <template v-if="router.currentRoute.value.meta.style !== 'nopanel'">
+            <div class="panel" style="height: calc(100% - 24px)">
+              <el-scrollbar
+                height="100%"
+                style="width: 100%; height: calc(100% - 8px)"
+              >
+                <router-view v-slot="{ Component }">
+                  <component :is="Component" />
+                </router-view>
+              </el-scrollbar>
+            </div>
+          </template>
+          <template v-else>
+            <router-view v-slot="{ Component }">
+              <component :is="Component" />
+            </router-view>
+          </template>
+        </div>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, reactive, watch, watchEffect } from 'vue'
+import layoutHeader from './header.vue'
+import layoutMenu from './menu.vue'
+import { useRoute, useRouter } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
+const routeList = computed(() => {
+  return [
+    {
+      path: '/home',
+      meta: {
+        title: '首页',
+        code: 'home',
+      },
+    },
+  ].concat(
+    route.matched
+      .filter((item) => item.path !== '/' && item.path !== '/home')
+      .map((item) => {
+        return {
+          path: item.path,
+          meta: {
+            title: item.meta.title as string,
+            code: item.meta.code as string,
+          },
+        }
+      }),
+  )
+})
+const state = reactive({
+  isCollapse: false,
+  hasBack: false,
+})
+const foldChange = (isCollapse: boolean) => {
+  state.isCollapse = isCollapse
+}
+watch(
+  () => router.currentRoute.value,
+  () => {
+    // 当前路由
+    const currentRoute = router.currentRoute.value
+    state.hasBack =
+      typeof window !== 'undefined' &&
+      window.history?.state?.back !== '/login' &&
+      window.history?.state?.back !== currentRoute.fullPath
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+</script>
+<style scoped lang="scss">
+.common-layout {
+  height: 100vh;
+  width: 100vw;
+}
+.tabs {
+  height: 48px;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  padding: 0 24px;
+  :deep() {
+    .el-header {
+      padding: 0;
+    }
+    .el-tabs__header {
+      border: none;
+      margin: 0 0 var(--el-main-padding);
+    }
+    .el-tabs__nav {
+      border: none !important;
+    }
+    .el-tabs__item,
+    .is-active {
+      background-color: #fff;
+      border: none !important;
+    }
+    .el-tabs__item.is-active {
+      background-color: #fff !important;
+      /* background-color: var(--el-color-primary-light-9) !important; */
+    }
+    .el-tabs--card > .el-tabs__header {
+      border-bottom: none;
+    }
+  }
+}
+:deep() {
+  .el-scrollbar__view {
+    height: 100% !important;
+    width: 100%;
+  }
+}
+.main {
+  height: calc(100% - 48px);
+  // height: calc(100% - var(--el-header-height) - 48px);
+}
+.menuBox {
+  transition: width 0.3s;
+  overflow: hidden;
+}
+.topContent {
+  border-radius: 12px;
+  background-color: #fff;
+  height: calc(100% - 20px - var(--el-tabs-header-height) - 48px);
+  .pageHeader {
+    height: 24px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    .goBack {
+      cursor: pointer;
+    }
+  }
+}
+</style>

package/templates/src/components/layout/menu.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="menuList">
+    <el-scrollbar class="wrap-scroll" v-if="mode === 'vertical'">
+      <el-menu
+        :mode="mode"
+        ref="menuRef"
+        :default-openeds="state.openedList"
+        :collapse="homeStore.isCollapse"
+        :unique-opened="true"
+        :default-active="router.currentRoute.value.name"
+        :ellipsis-icon="MoreFilled"
+      >
+        <SideBarItem
+          v-for="item in homeStore.menuList"
+          :key="item.menuCode!"
+          :item="item"
+          :isCollapse="homeStore.isCollapse"
+        />
+      </el-menu>
+    </el-scrollbar>
+    <div class="horizontalMenu" v-else>
+      <el-menu
+        :mode="mode"
+        ref="menuRef"
+        :default-openeds="state.openedList"
+        :collapse="homeStore.isCollapse"
+        :unique-opened="true"
+        :default-active="router.currentRoute.value.name"
+        :ellipsis-icon="MoreFilled"
+      >
+        <SideBarItem
+          v-for="item in homeStore.menuList"
+          :key="item.menuCode!"
+          :item="item"
+          :isCollapse="homeStore.isCollapse"
+        />
+      </el-menu>
+    </div>
+    <div class="foldBox" v-if="mode === 'vertical'">
+      <div
+        class="iconBox"
+        @click="foldChange"
+        :class="{ active: homeStore.isCollapse }"
+      >
+        <icon name="icon-zhankaizhedie"></icon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, reactive, ref } from 'vue'
+import SideBarItem from './sideBarItem.vue'
+import icon from '@/components/icon/index.vue'
+import { usePermissionStore } from '@/store/permission'
+import { useRouter } from 'vue-router'
+import { MoreFilled } from '@element-plus/icons-vue'
+interface Props {
+  mode: 'vertical' | 'horizontal'
+  isOpen?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'vertical',
+  isOpen: false,
+})
+const router = useRouter()
+const store = usePermissionStore()
+const homeStore = reactive({
+  isCollapse: false,
+  menuList: [] as Array<menuItem>,
+})
+const emit = defineEmits(['foldChange'])
+const menuRef = ref()
+// 展开折叠切换
+const foldChange = () => {
+  homeStore.isCollapse = !homeStore.isCollapse
+  if (!homeStore.isCollapse && props.isOpen) {
+    state.openedList.forEach((item: string) => {
+      menuRef.value?.open(item)
+    })
+  }
+  emit('foldChange', homeStore.isCollapse)
+}
+const state = reactive({
+  openedList: [] as Array<string>,
+})
+
+onMounted(() => {
+  homeStore.menuList = [...store.menuList]
+  if (props.isOpen) {
+    state.openedList = store.openList
+  }
+})
+</script>
+<style scoped lang="scss">
+.menuList {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.wrap-scroll {
+  height: calc(100% - 50px);
+}
+
+.horizontalMenu {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+:deep() {
+  .el-menu {
+    border: none;
+  }
+  .el-menu--horizontal.el-menu {
+    max-width: 100% !important;
+  }
+}
+.foldBox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .iconBox {
+    transition: all 0.3s;
+  }
+  .active {
+    transform: rotate(180deg);
+  }
+}
+</style>

package/templates/src/components/layout/sideBarItem.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-sub-menu
+    class="grid"
+    v-if="props.item.children"
+    :index="props.item.menuCode"
+  >
+    <template #title>
+      <!-- <icon :name="props.item.icon || 'icon-changongxiao_gongsishuju'"></icon> -->
+      <span v-if="!props.isCollapse" class="menuTitle ellipsis">
+        {{ props.item.menuName }}
+      </span>
+    </template>
+    <SideBarItem
+      v-for="i in props.item.children"
+      :key="i.menuCode"
+      :item="i"
+      :isCollapse="props.isCollapse"
+    />
+  </el-sub-menu>
+  <el-menu-item @click="goto" v-else :index="props.item.menuCode">
+    <!-- <icon :name="props.item.icon || 'icon-changongxiao_gongsishuju'"></icon> -->
+    <span class="menuTitle ellipsis">{{ props.item?.menuName }}</span>
+  </el-menu-item>
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
+type Props = {
+  item: menuItem
+  isCollapse: boolean
+}
+const props = defineProps<Props>()
+const goto = () => {
+  router.push({
+    path: props.item.menuPath,
+    query: { pageCode: props.item.menuCode },
+  })
+}
+</script>
+<style lang="scss" scoped>
+.menuTitle {
+  margin-left: 10px;
+}
+.ellipsis {
+  display: flex;
+  align-items: center;
+}
+</style>