create-young-proj 1.0.0 → 1.1.0

package/template-nuxt-admin/app.vue

@@ -0,0 +1,49 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-05-25 19:53:07
+ * @LastEditTime: 2023-11-07 16:30:06
+ * @Description:
+-->
+<script lang="ts" setup>
+import { ElConfigProvider } from 'element-plus'
+
+// @ts-expect-error
+import locale from 'element-plus/dist/locale/zh-cn.mjs'
+
+const app = useNuxtApp()
+const { isLoading, zen_mode, zen_mode_helper } = storeToRefs(useNavStore())
+
+app.hook('page:start', () => {
+  console.log('loading...')
+  isLoading.value = true
+})
+
+app.hook('page:finish', () => {
+  console.log('loading end ...')
+  isLoading.value = false
+})
+
+function showZenModeHelper() {
+  zen_mode_helper.value = true
+  setTimeout(() => {
+    zen_mode_helper.value = false
+  }, 1e4)
+}
+</script>
+
+<template>
+  <ElConfigProvider :locale="locale">
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </ElConfigProvider>
+  <YoungLoading v-show="isLoading" />
+  <young-float-ball v-show="zen_mode && !zen_mode_helper" zindex="9" top="0" icon="/logo.svg" title="显示顶部导航栏，无操作 10s 后收起" custom @click="showZenModeHelper" />
+</template>
+
+<style lang="scss">
+@import '@unocss/reset/tailwind.css';
+@import 'element-plus/dist/index.css';
+@import 'vant/lib/index.css';
+@import '~/styles/index.scss';
+</style>

package/template-nuxt-admin/boot.mjs

@@ -0,0 +1,16 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2022-09-07 09:31:12
+ * @LastEditTime: 2023-05-26 11:21:19
+ * @Description:
+ */
+(async () => {
+  const env = process.env.DEPLOY_ENV
+  const listenPort = process.env.LISTEN_PORT || 3003
+  console.log('当前环境：', env)
+  console.log('服务监听端口：', listenPort)
+
+  process.env.NITRO_PORT = listenPort
+
+  await import('./dist/server/index.mjs')
+})()

package/template-nuxt-admin/components/ScreenFull.vue

@@ -0,0 +1,19 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 16:28:26
+ * @LastEditTime: 2023-07-24 14:09:42
+ * @Description:
+-->
+<script lang="ts" setup>
+const { toggle, isFullscreen, isSupported } = useFullscreen()
+
+const title = computed(() => isFullscreen.value ? '退出全屏' : '全屏')
+</script>
+
+<template>
+  <ElButton v-if="isSupported" circle :title="title" @click="toggle">
+    <div
+      :class="[isFullscreen ? 'i-fluent:full-screen-minimize-24-filled' : 'i-fluent:full-screen-maximize-24-filled']"
+    />
+  </ElButton>
+</template>

package/template-nuxt-admin/components/TopSearch.vue

@@ -0,0 +1,76 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 17:01:21
+ * @LastEditTime: 2023-11-07 14:47:37
+ * @Description:
+-->
+<script lang="ts" setup>
+import { YoungCmdPopup } from '@bluesyoung/ui-vue3'
+import { isHttpUrl } from '@bluesyoung/utils'
+
+const { flat_nav_arr, nav_arr } = storeToRefs(useNavStore())
+
+const cmdRef = ref()
+const searchStr = ref('')
+const options = ref<SelectOptionItem<string>[]>([])
+
+function remoteMethod(query: string) {
+  if (query) {
+    options.value = flat_nav_arr.value
+      .filter(item => +item.visible === 1 && item.title?.toLowerCase().includes(query.toLowerCase()))
+      .map(item => ({ label: item.title || '', value: item.component }))
+  }
+  else {
+    options.value = []
+  }
+}
+
+function goPage(url: string) {
+  if (url) {
+    if (isHttpUrl(url))
+      window.open(url)
+    else
+      navigateTo(url)
+
+    searchStr.value = ''
+    cmdRef.value?.hide()
+  }
+}
+</script>
+
+<template>
+  <ElButton v-bind="$attrs" circle title="菜单搜索" @click="cmdRef?.show()">
+    <div class="i-ic-baseline-manage-search" />
+  </ElButton>
+
+  <YoungCmdPopup ref="cmdRef">
+    <template #default="{ el }">
+      <div class="flex flex-col items-center">
+        <div class="text-xl mb-4">
+          快捷菜单搜索：
+        </div>
+        <ElSelect
+          :ref="el" v-model="searchStr" class="w-260px" filterable remote reserve-keyword
+          placeholder="请输入菜单关键字，点击选中即可跳转" :remote-method="remoteMethod" @change="goPage"
+        >
+          <ElOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </ElSelect>
+
+        <br>
+        <ElTree
+          :data="nav_arr" size="large" :props="{
+            children: 'children',
+            label: 'title',
+          }" accordion class="w-full self-start" @node-click="(n: NavArrItem) => goPage(n.component)"
+        />
+      </div>
+    </template>
+  </YoungCmdPopup>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-tree-node__label) {
+  font-size: 16px;
+  line-height: 20px;
+}
+</style>

package/template-nuxt-admin/components/TopUser.vue

@@ -0,0 +1,72 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 16:31:41
+ * @LastEditTime: 2023-09-08 10:35:46
+ * @Description:
+-->
+<script lang="ts" setup>
+const user = useUserStore()
+const { avatar, nick } = storeToRefs(user)
+
+function loginOut() {
+  showDialog({
+    title: '温馨提示',
+    message: '确认退出登录？',
+    showCancelButton: true,
+  }).then(() => {
+    user.removeToken()
+    navigateTo(`/login?redirect=${encodeURIComponent(location.href.replace(location.origin, ''))}`)
+  }).catch(() => null)
+}
+</script>
+
+<template>
+  <ElDropdown class="avatar-container" trigger="click">
+    <div class="inline-flex justify-center items-center mx-2 hover:cursor-pointer">
+      <ElAvatar v-if="avatar" :src="avatar" data-not-lazy loading="lazy" />
+      <ElAvatar v-else color="transparent">
+        <div class="text-xl i-noto-v1-man-technologist-light-skin-tone" />
+      </ElAvatar>
+
+      <div class="text-sm ml-2">
+        {{ nick }}
+      </div>
+      <div class="mr-2 text-sm i-ion-md-arrow-dropdown" />
+    </div>
+    <template #dropdown>
+      <ElDropdownMenu class="user-dropdown">
+        <ElDropdownItem @click="useChangePassword">
+          <div>修改密码</div>
+        </ElDropdownItem>
+        <ElDropdownItem @click="loginOut">
+          <div>退出登录</div>
+        </ElDropdownItem>
+      </ElDropdownMenu>
+    </template>
+  </ElDropdown>
+</template>
+
+<style scoped lang="scss">
+.avatar-dropdown {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  justify-items: center;
+  height: 50px;
+  padding: 0;
+
+  .user-avatar {
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    border-radius: 50%;
+  }
+
+  .user-name {
+    position: relative;
+    margin: 0 6px;
+    cursor: pointer;
+  }
+}
+</style>

package/template-nuxt-admin/components/YoungChangePassword.vue

@@ -0,0 +1,94 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-24 14:21:55
+ * @LastEditTime: 2023-11-07 14:56:32
+ * @Description:
+-->
+<script lang="ts" setup>
+import { isMobile } from '@bluesyoung/utils'
+import type { FormInstance } from 'element-plus'
+
+interface Props {
+  onDestroy?: Function
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  onDestroy: () => console.log('为了节省性能，此时应该销毁dom'),
+})
+
+const showPopup = ref(false)
+
+function show() {
+  showPopup.value = true
+}
+
+function hide() {
+  showPopup.value = false
+  props.onDestroy()
+}
+
+const form = reactive<LoginForm>({
+  mobile: '',
+  vercode: '',
+  password: '',
+})
+
+const user = useUserStore()
+
+const formRef = ref<FormInstance>()
+function sure() {
+  formRef.value?.validate(async (valid) => {
+    if (valid) {
+      await apis.post.changePassword(form)
+      hide()
+      ElMessage.success('密码修改成功，请重新登录')
+      user.removeToken()
+      const redirect = location.pathname === '/login' ? '/' : encodeURIComponent(location.href.replace(location.origin, ''))
+      navigateTo(`/login?redirect=${redirect}`)
+    }
+  })
+}
+
+defineExpose({
+  show,
+})
+</script>
+
+<template>
+  <ElDialog v-model="showPopup" title="修改密码" :before-close="hide" width="430px" lt-sm="!w-[96%]">
+    <template #default>
+      <ElForm ref="formRef" :model="form">
+        <ElFormItem
+          prop="mobile" :rules="[
+            { required: true, trigger: 'blur', message: '请输入手机号' },
+            { message: '请输入合法的手机号', trigger: 'blur', validator: (_: any, v: string) => isMobile(v) },
+          ]" class="mt-20px"
+        >
+          <ElInput v-model.trim="form.mobile" placeholder="请输入手机号" maxlength="11" class="!h-52px" clearable />
+        </ElFormItem>
+        <ElFormItem prop="vercode" :rules="[{ required: true, trigger: 'blur', message: '请输入验证码' }]">
+          <YoungCodeInput v-model.trim="form.vercode" :tel="form.mobile" />
+        </ElFormItem>
+        <ElFormItem
+          prop="password" :rules="[
+            { required: true, trigger: 'blur', message: '请输入密码' },
+            { min: 8, max: 16, trigger: 'blur', message: '请输入8-16位字符！' },
+          ]"
+        >
+          <ElInput
+            v-model.trim="form.password" type="password" minlength="8" maxlength="16" placeholder="请输入密码"
+            class="!h-52px" clearable show-password @keyup.enter="sure"
+          />
+        </ElFormItem>
+      </ElForm>
+    </template>
+    <template #footer>
+      <ElButton @click="hide">
+        取消
+      </ElButton>
+      <ElButton type="primary" @click="sure">
+        确认
+      </ElButton>
+    </template>
+  </ElDialog>
+</template>

package/template-nuxt-admin/components/YoungCodeInput.vue

@@ -0,0 +1,65 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-08-19 13:52:58
+ * @LastEditTime: 2023-11-07 14:47:52
+ * @Description:
+-->
+<script lang="ts" setup>
+import { YoungSlideVerify } from '@bluesyoung/ui-vue3'
+import { isNumber } from '@bluesyoung/utils'
+
+interface Props {
+  modelValue: string
+  tel: string
+  maxlength?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxlength: 6,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string): void
+  (e: 'enter'): void
+}>()
+
+const canGet = computed(() => {
+  return props.tel.length === 11
+})
+
+const {
+  getCode,
+  tip,
+  showSlider,
+  pass,
+  cancel,
+} = useVerifyCode(async () => {
+  await apis.get.sendCode(props.tel)
+  ElMessage.success('短信已发送至您的手机，请注意查收！')
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <ElInput
+      :model-value="modelValue" :maxlength="maxlength" class="!h-52px"
+      placeholder="请输入验证码" @update:model-value="(e) => emit('update:modelValue', e)" @keyup.enter="emit('enter')"
+    >
+      <template #suffix>
+        <ElLink v-if="isNumber(+tip)" type="primary" :disabled="!canGet" :underline="false" @click="getCode">
+          {{ tip }}
+        </ElLink>
+        <div v-else>
+          {{ tip }}
+        </div>
+      </template>
+    </ElInput>
+    <YoungSlideVerify :show="showSlider" @success="pass" @close="cancel" />
+  </div>
+</template>
+
+<style>
+.vue-puzzle-vcode {
+  z-index: 10001 !important;
+}
+</style>

package/template-nuxt-admin/components/YoungEditor.vue

@@ -0,0 +1,81 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-08-04 17:03:05
+ * @LastEditTime: 2023-11-07 14:17:33
+ * @Description:
+-->
+<script lang="ts" setup>
+import '@wangeditor/editor/dist/css/style.css'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
+const prop = withDefaults(defineProps<{
+  modelValue: string
+  disabled: boolean
+  height?: number
+  uploadFn: (file: File) => Promise<string>
+}>(), {
+  height: 410,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string): void
+}>()
+// 编辑器实例，必须用 shallowRef，重要！
+const editorRef = shallowRef()
+
+// 编辑器配置
+const editorConfig = {
+  placeholder: '请输入内容...',
+  MENU_CONF: {
+    uploadImage: {
+      /**
+       * 自定义图片上传
+       */
+      customUpload: async (file: File, insertFn: Function) => {
+        const url = await prop.uploadFn(file)
+        insertFn(url)
+      },
+    },
+  },
+}
+
+watchEffect(async () => {
+  while (!editorRef.value)
+    await nextTick()
+
+  if (prop.disabled)
+    editorRef.value?.disable()
+  else
+    editorRef.value?.enable()
+})
+
+// 组件销毁时，及时销毁编辑器
+onBeforeUnmount(() => {
+  editorRef.value?.destroy()
+})
+
+const toolbarConfig = {
+  excludeKeys: [
+    'insertVideo', 'uploadVideo', 'editVideoSize', 'group-video',
+  ],
+}
+</script>
+
+<template>
+  <div class="border border-[#ccc]">
+    <!-- 工具栏 -->
+    <Toolbar :editor="editorRef" :default-config="toolbarConfig" class="border-b border-[#ccc]" />
+    <!-- 编辑器 -->
+    <Editor
+      :model-value="modelValue" :default-config="editorConfig"
+      :style="{ height: `${height}px` }" class="overflow-y-auto" :class="{ 'cursor-not-allowed': disabled }"
+      @update:model-value="(v) => emit('update:modelValue', v)" @on-created="(v) => editorRef = v"
+    />
+  </div>
+</template>
+
+<style>
+.w-e-full-screen-container {
+  z-index: 1;
+}
+</style>

package/template-nuxt-admin/components/YoungLink.vue

@@ -0,0 +1,24 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 14:47:12
+ * @LastEditTime: 2023-07-26 10:39:40
+ * @Description:
+-->
+<script lang="ts" setup>
+import { isHttpUrl } from '@bluesyoung/utils'
+
+defineProps<{ to: string }>()
+</script>
+
+<template>
+  <a v-if="isHttpUrl(to)" :href="to" target="_blank" rel="noopener" referrerpolicy="no-referrer" class="w-full">
+    <div class="flex items-center">
+      <slot />
+    </div>
+  </a>
+  <NuxtLink v-else :to="to" class="w-full">
+    <div class="flex items-center">
+      <slot />
+    </div>
+  </NuxtLink>
+</template>

package/template-nuxt-admin/components/YoungLoading.vue

@@ -0,0 +1,39 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-07 11:57:22
+ * @LastEditTime: 2023-07-26 10:42:39
+ * @Description:
+-->
+<template>
+  <div class="w-100vw h-100vh flex justify-center items-center bg-[#333] opacity-80 fixed top-0 z-999999">
+    <svg class="nuxt-spa-loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 25" fill="none" width="80">
+      <path d="M24.236 22.006h10.742L25.563 5.822l-8.979 14.31a4 4 0 0 1-3.388 1.874H2.978l11.631-20 5.897 10.567" />
+    </svg>
+  </div>
+</template>
+
+<style>
+.nuxt-spa-loading {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%)
+}
+
+.nuxt-spa-loading>path {
+  fill: none;
+  stroke: #00DC82;
+  stroke-width: 4px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 128;
+  stroke-dashoffset: 128;
+  animation: nuxt-spa-loading-move 3s linear infinite
+}
+
+@keyframes nuxt-spa-loading-move {
+  100% {
+    stroke-dashoffset: -128
+  }
+}
+</style>

package/template-nuxt-admin/components/ZenMode.vue

@@ -0,0 +1,21 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-11-07 15:28:35
+ * @LastEditTime: 2023-11-07 16:07:52
+ * @Description: 工作区全屏切换
+-->
+<script lang="ts" setup>
+const { zen_mode, zen_mode_helper } = storeToRefs(useNavStore())
+
+function toggle() {
+  zen_mode.value = !zen_mode.value
+  if (zen_mode.value)
+    zen_mode_helper.value = false
+}
+</script>
+
+<template>
+  <ElButton circle :title="zen_mode ? '恢复正常布局' : '工作区全屏'" :type="zen_mode ? 'danger' : 'primary'" @click="toggle">
+    <div class="i-bi-person-workspace" />
+  </ElButton>
+</template>

package/template-nuxt-admin/components/layout/Footer.vue

@@ -0,0 +1,29 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 12:03:00
+ * @LastEditTime: 2023-07-24 10:05:41
+ * @Description:
+-->
+<script setup lang="ts">
+const fullYear = new Date().getFullYear()
+</script>
+
+<template>
+  <div class="layout-footer-container">
+    &copy;{{ fullYear }} - Current
+    By&nbsp;<a href="https://gitee.com/BluesYoung-web" target="_blank">BluesYoung-web</a>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.layout-footer-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: $base-app-footer-height;
+  padding: 0 20px;
+  color: rgb(0 0 0 / 45%);
+  background: var(--el-color-white);
+  border-top: 1px dashed #dcdfe6;
+}
+</style>

package/template-nuxt-admin/components/layout/Logo.vue

@@ -0,0 +1,54 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 12:21:02
+ * @LastEditTime: 2023-07-28 16:53:30
+ * @Description:
+-->
+<script lang="ts" setup>
+const { isCollapse } = storeToRefs(useNavStore())
+
+const title = window.__YOUNG_ENV__.NUXT_PUBLIC_TITLE
+const logo = window.__YOUNG_ENV__.NUXT_PUBLIC_LOGIN_LOGO
+</script>
+
+<template>
+  <div class="logo-container flex-center">
+    <NuxtLink to="/">
+      <img class="logo" alt="logo" :src="logo">
+      <h1 v-if="!(isCollapse || WindowSize['lt-lg'])" class="title">
+        {{ title }}
+      </h1>
+    </NuxtLink>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.logo-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+
+  // padding-left: 24px;
+  height: 60px;
+  overflow: hidden;
+  line-height: 60px;
+  background: transparent;
+
+  .title {
+    display: inline-block;
+    margin-left: 12px;
+    font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    font-size: 20px;
+    font-weight: 600;
+    color: #fff;
+    vertical-align: middle;
+  }
+
+  .logo {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    vertical-align: middle;
+  }
+}
+</style>

package/template-nuxt-admin/components/layout/Main.vue

@@ -0,0 +1,26 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-21 11:55:27
+ * @LastEditTime: 2023-09-15 15:18:09
+ * @Description:
+-->
+<template>
+  <main class="app-main-height w-full">
+    <NuxtPage keepalive />
+  </main>
+</template>
+
+<style scoped lang="scss">
+.app-main-height {
+  min-height: $base-app-main-height;
+  background-color: inherit;
+  padding: 20px;
+
+  @screen lt-lg {
+    & {
+      min-height: -webkit-calc($base-app-main-height + $base-tabs-bar-height) !important;
+      min-height: calc($base-app-main-height + $base-tabs-bar-height) !important;
+    }
+  }
+}
+</style>