create-young-proj 1.0.0 → 1.1.0

package/template-nuxt-website/.nvmrc

@@ -0,0 +1 @@
+20.9.0

package/template-nuxt-website/.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig",
+    "mhutchie.git-graph",
+    "vue.vscode-typescript-vue-plugin",
+    "antfu.unocss",
+    "antfu.vscode-server-controller",
+    "vue.volar",
+    "voorjaar.windicss-intellisense"
+  ]
+}

package/template-nuxt-website/.vscode/settings.json

@@ -0,0 +1,39 @@
+{
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
+}

package/template-nuxt-website/Dockerfile

@@ -0,0 +1,41 @@
+# 拉取基础镜像
+FROM intranet-harbor.laiyouxi.com/base/alpine/node:20.9.0 as builder
+# 添加部分元数据，暂无意义
+LABEL vendor="Lyx-yunwei" \
+      com.example.release-date="2022-11-10" \
+      com.example.version.is-production="false"
+
+# 维护者
+MAINTAINER BluesYoung "bluesyoung_web@163.com"
+# 配置环境变量
+ENV WORK_DIR=/app
+
+# 工作目录
+WORKDIR /app
+
+# 没有压缩包，首选 COPY，如果需要自动解包或下载，则使用 ADD
+
+# 对比依赖是否变更
+COPY package.json yarn.lock /app/
+
+# 设置npm仓库 + 下载依赖，上面的文件如果没有变化则跳过下载，直接使用缓存
+RUN npm config set registry https://registry.npmmirror.com && \
+    yarn config set registry https://registry.npmmirror.com && \        
+    yarn
+
+# 加入代码
+COPY . /app
+# 打包
+RUN yarn build
+
+# 打包完成，构建最终的极简镜像
+FROM intranet-harbor.laiyouxi.com/base/alpine/node:20.9.0
+
+WORKDIR /app
+# 复制源码
+COPY boot.mjs /app/
+COPY config /app/config
+# 复制编译后的代码
+COPY --from=builder /app/dist /app/dist
+
+ENTRYPOINT ["node", "boot.mjs"]

package/template-nuxt-website/_gitignore

@@ -0,0 +1,26 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+config/*.js

package/template-nuxt-website/_npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

package/template-nuxt-website/_nvmrc

@@ -0,0 +1 @@
+20.9.0

package/template-nuxt-website/app.vue

@@ -0,0 +1,66 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-05-25 19:53:07
+ * @LastEditTime: 2023-10-27 16:31:29
+ * @Description:
+-->
+<script lang="ts" setup>
+import '@unocss/reset/tailwind-compat.css'
+
+const app = useNuxtApp()
+
+// !!! 这两个钩子函数不能异步调用，否则会造成页面的 useFetch 报错 !!!
+app.hook('page:start', () => {
+  // console.log('loading...');
+  showLoading()
+})
+// !!! 这两个钩子函数不能异步调用，否则会造成页面的 useFetch 报错 !!!
+app.hook('page:finish', () => {
+  // console.log('loading end ...')
+  hideLoading()
+})
+</script>
+
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<style>
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+.reset-img img,
+.reset-img video,
+.reset-img svg,
+.reset-img audio {
+  display: initial;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px
+}
+
+::-webkit-scrollbar-track {
+  background-color: #fff;
+  border-radius: 2em
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #aaa;
+  border-radius: 2em;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent
+}
+
+body {
+  background-color: #FFF;
+}
+</style>

package/template-nuxt-website/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-website/components/AboutNav.vue

@@ -0,0 +1,27 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-08-14 09:48:09
+ * @LastEditTime: 2023-11-08 11:00:37
+ * @Description:
+-->
+<script lang="ts" setup>
+defineProps<{
+  modelValue: AboutNavItem[]
+}>()
+</script>
+
+<template>
+  <div v-if="modelValue.length" class="about mb-10px text-14px text-[#f2f2f2]" lt-md="text-[#999]">
+    <ul class="flex flex-wrap">
+      <li
+        v-for="(item, index) in modelValue"
+        :key="`${index}feurycsre`"
+        class="not-last:mr-30px"
+      >
+        <NuxtLink :to="item.url" target="_blank" :title="item.title">
+          {{ item.title }}
+        </NuxtLink>
+      </li>
+    </ul>
+  </div>
+</template>

package/template-nuxt-website/components/BreadNav.vue

@@ -0,0 +1,35 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-08-14 14:14:58
+ * @LastEditTime: 2023-10-08 16:01:13
+ * @Description:
+-->
+<script lang="ts" setup>
+defineProps<{
+  navArr: BreadNavItem[]
+}>()
+</script>
+
+<template>
+  <div class="bread flex text-16px h-24px lh-24px font-400 color-[#333]" lt-md="!hidden">
+    <div class="mr-30px">
+      您当前的位置是：
+    </div>
+    <div
+      v-for="(item, index) in navArr"
+      :key="`${index}dasrerbgfg`"
+      class="flex"
+    >
+      <NuxtLink
+        :to="item.href"
+        :title="item.title"
+        class="hover:text-[#0090ee] block max-w-300px truncate"
+      >
+        {{ item.title }}
+      </NuxtLink>
+      <div v-if="index !== navArr.length - 1" class="mx-10px">
+        &gt;
+      </div>
+    </div>
+  </div>
+</template>

package/template-nuxt-website/components/Follow.vue

@@ -0,0 +1,48 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-08-12 17:44:54
+ * @LastEditTime: 2023-11-08 10:59:26
+ * @Description:
+-->
+<script lang="ts" setup>
+defineProps<{
+  modelValue: FollowItem[]
+}>()
+</script>
+
+<template>
+  <div v-if="modelValue.length" class="follow flex flex-wrap items-center mb-10px text-14px text-#f2f2f2">
+    <div class="mr-16px">
+      关注我们：
+    </div>
+    <div
+      v-for="(item, index) in modelValue"
+      :key="`${index}daseeffret34;q`"
+      class="mr-15px w-30px relative"
+    >
+      <NuxtLink
+        :to="item?.jump ?? '#'"
+        target="_blank"
+        @mouseenter="item.hidden = true"
+        @mouseleave="item.hidden = false"
+      >
+        <img
+          class="w-26px"
+          :src="item.icon"
+          alt=""
+          loading="lazy"
+        >
+      </NuxtLink>
+      <div
+        class="absolute w-100px"
+        :class="{ hidden: !item.hidden }"
+      >
+        <img
+          :src="item.qrcode"
+          alt=""
+          loading="lazy"
+        >
+      </div>
+    </div>
+  </div>
+</template>

package/template-nuxt-website/components/FriendLink.vue

@@ -0,0 +1,36 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-08-12 17:28:06
+ * @LastEditTime: 2023-11-08 10:59:37
+ * @Description:
+-->
+<script lang="ts" setup>
+defineProps<{
+  modelValue: FriendLinkItem[]
+}>()
+</script>
+
+<template>
+  <div v-if="modelValue.length" class="flex text-14px items-center text-#f2f2f2 mb-10px">
+    <p class="h-24px lh-24px mr-8px">
+      友情链接：
+    </p>
+    <div class="friend-link">
+      <ul class="flex flex-wrap">
+        <li
+          v-for="(link, index) in modelValue"
+          :key="`${index}ewrwecfrg`"
+          class="not-last:border-r px-18px lh-14px first:pr-18px !first:pl-0 last:pl-18px last:pr-0"
+        >
+          <NuxtLink
+            :to="link.href"
+            :title="link.title"
+            target="_blank"
+          >
+            {{ link.title }}
+          </NuxtLink>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

package/template-nuxt-website/components/mobile/NavBar.vue

@@ -0,0 +1,50 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-10-08 14:16:12
+ * @LastEditTime: 2023-10-20 11:26:00
+ * @Description:
+-->
+<script lang="ts" setup>
+withDefaults(defineProps<{
+  title?: string
+  back?: boolean
+  fixed?: boolean
+  bg?: string
+  color?: string
+}>(), {
+  back: true,
+  fixed: true,
+  bg: 'white',
+  color: 'black',
+})
+
+const router = useRouter()
+function backFn() {
+  if (history.length === 1) {
+    console.log('扫码直接进入, 返回直接回首页')
+    router.replace('/')
+  }
+  else {
+    router.back()
+  }
+}
+</script>
+
+<template>
+  <VanConfigProvider
+    :theme-vars="{
+      navBarBackground: bg,
+      navBarIconColor: color,
+    }"
+  >
+    <VanNavBar
+      v-bind="$attrs" md="!hidden" :fixed="fixed" :title="title" :placeholder="false" :z-index="10"
+      safe-area-inset-top
+    >
+      <!-- 内嵌子页面进入，不展示返回按钮 -->
+      <template v-if="!$route.query.sub && back" #left>
+        <div class="i-bxs:chevron-left text-xl" @click="backFn" />
+      </template>
+    </VanNavBar>
+  </VanConfigProvider>
+</template>

package/template-nuxt-website/components/top/Extra.vue

@@ -0,0 +1,50 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2022-08-12 08:09:48
+ * @LastEditTime: 2023-10-09 10:50:51
+ * @Description: 顶部广告，以 ad 命名会被拦截
+-->
+<script lang="ts" setup>
+const { img_ad, img_btn, showAd } = storeToRefs(useAdStore())
+
+function clickBtn() {
+  showAd.value = false
+  console.log('todo: 点击顶部广告，功能不完善，弃用状态')
+}
+</script>
+
+<template>
+  <div class="w-100% h-80px relative" lt-md="h-36px">
+    <img class="h-full w-full object-cover" :src="getFullServerUrl(img_ad)" alt="">
+    <img
+      class="btn w-200px" lt-sm="w-100px" :src="getFullServerUrl(img_btn)" referrerpolicy="no-referrer" alt=""
+      @click="clickBtn"
+    >
+  </div>
+</template>
+
+<style scoped>
+.btn {
+  position: absolute;
+  right: 1%;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 100%;
+  animation: jump 0.5s ease-in-out infinite;
+  cursor: pointer;
+}
+
+@keyframes jump {
+  0% {
+    transform: translateY(-50%) scale(0.9);
+  }
+
+  50% {
+    transform: translateY(-50%) scale(1.1);
+  }
+
+  100% {
+    transform: translateY(-50%) scale(0.9);
+  }
+}
+</style>

package/template-nuxt-website/components/top/Nav.vue

@@ -0,0 +1,87 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-09-27 17:18:12
+ * @LastEditTime: 2023-10-19 12:19:30
+ * @Description:
+-->
+<script lang="ts" setup>
+const { active_nav, nav_arr } = storeToRefs(useNavStore())
+
+const ShowNavNum = ref(5)
+
+const route = useRoute()
+function isActive(nav: NavItem) {
+  const navs = nav_arr.value.map(n => n.href)
+  return nav.href === route.path || (!navs.includes(route.path) && nav.href === active_nav.value)
+}
+
+process.client && watch(() => WindowSize['lt-lg'], (v) => {
+  if (v)
+    ShowNavNum.value = 4
+  else
+    ShowNavNum.value = 5
+})
+</script>
+
+<template>
+  <div class="nav ml-83px" lt-md="hidden">
+    <ul class="flex">
+      <li
+        v-for="(nav, index) in nav_arr"
+        v-show="index < ShowNavNum"
+        :key="`${index}dasjhewr0`"
+        class="hover:!text-[#0090ee]"
+        :class="{ active: isActive(nav) }"
+      >
+        <NuxtLink
+          :to="nav.href"
+          :title="nav.title"
+          target="_blank"
+        >
+          {{ nav.title }}
+        </NuxtLink>
+        <div v-if="$route.path === nav.href || nav.href === active_nav" class="under" />
+      </li>
+      <ElPopover v-if="nav_arr.length > ShowNavNum" placement="bottom-end">
+        <template #reference>
+          <div class="i-ic-twotone-menu text-2xl w-32px" />
+        </template>
+        <ul class="flex flex-col justify-center text-xl items-center h-full">
+          <li
+            v-for="(nav, index) in nav_arr.slice(ShowNavNum)" :key="`${index}awfdsjfhalsekjhuye`"
+            :class="{ active: isActive(nav) }" class="w-full text-start py-10px"
+          >
+            <NuxtLink class="hover:font-bold hover:text-[#0090ee]" :title="nav.title" :to="nav.href" target="_blank">
+              {{ nav.title }}
+            </NuxtLink>
+          </li>
+        </ul>
+      </ElPopover>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.nav ul li {
+  height: 27px;
+  font-size: 18px;
+  font-family: SourceHanSansSC-Regular, SourceHanSansSC;
+  font-weight: 400;
+  color: #000000;
+  line-height: 27px;
+  margin-right: 54px;
+  text-align: center;
+}
+
+.nav ul .active {
+  font-weight: bold;
+  color: #0090EE;
+}
+.nav ul .active .under {
+  width: 53px;
+  height: 4px;
+  background: #0090EE;
+  border-radius: 2px;
+  margin: 10px auto;
+}
+</style>

package/template-nuxt-website/components/young/Banner.vue

@@ -0,0 +1,100 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-05-26 16:12:47
+ * @LastEditTime: 2023-11-02 17:18:29
+ * @Description:
+-->
+<script lang="ts" setup>
+import type SwiperClass from 'swiper/types/swiper-class'
+
+const props = defineProps<{
+  banners: BannerItem[]
+  hideTitle?: boolean
+  preload?: boolean
+}>()
+
+const swiperContainer = ref<SwiperClass>()
+const swiperRef = ref<any>({})
+
+function videoPlay() {
+  swiperContainer.value?.autoplay?.stop?.()
+}
+function videoPause() {
+  swiperContainer?.value?.autoplay?.start?.()
+}
+
+function onSwiper(swiper: SwiperClass) {
+  swiperContainer.value = swiper
+}
+
+const autoPlay = computed(() => props.banners.length > 1)
+</script>
+
+<template>
+  <Swiper
+    v-if="banners.length > 0" ref="swiperContainer" class="text-center relative"
+    :slides-per-view="1" :pagination="autoPlay ? { clickable: true } : false" :scrollbar="{ draggable: true }"
+    :modules="[SwiperAutoplay, SwiperEffectCreative, SwiperNavigation, SwiperPagination]" :allow-touch-move="true"
+    :loop="autoPlay" :autoplay="autoPlay" :observer="true" :observe-parents="true" @swiper="(s) => onSwiper(s)"
+  >
+    <SwiperSlide
+      v-for="(banner, index) in banners" :key="`${index}dase3wtgfdv`" :swiper-ref="swiperRef"
+    >
+      <video
+        v-if="banner.is_video" class="w-full mx-auto" controls :src="getFullServerUrl(banner.img_url)" :poster="getFullServerUrl(`${banner.img_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,ar_auto`, false)"
+        webkit-playsinline="webkit-playsinline"
+        playsinline
+        @play="videoPlay" @pause="videoPause"
+      />
+      <img
+        v-else class="w-full h-full"
+        :src="getFullServerUrl(banner.img_url)"
+        alt=""
+        referrerpolicy="no-referrer"
+        :class="{ 'cursor-pointer': banner.android_url || banner.ios_url }"
+        :loading="index === 0 ? preload ? 'eager' : 'lazy' : 'lazy'"
+        data-not-lazy
+        @click="goDownload(banner.android_url, banner.ios_url)"
+      >
+      <div
+        v-if="!hideTitle && banner.title"
+        class="absolute top-0 bg-white opacity-80 w-full text-18px font-500 text-[#333] lh-27px py-20px text-left indent"
+        lt-md="hidden"
+      >
+        {{ banner.title }}
+      </div>
+    </SwiperSlide>
+  </Swiper>
+</template>
+
+<style scoped>
+:deep(.swiper-pagination) {
+  position: absolute;
+  left: 0;
+  bottom: 10px;
+  width: 100%;
+  z-index: 11;
+}
+
+:deep(.swiper-pagination-bullet) {
+  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
+  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
+  display: inline-block;
+  border-radius: 50%;
+  background: var(--swiper-pagination-bullet-inactive-color, #000);
+  opacity: var(--swiper-pagination-bullet-inactive-opacity, .4);
+  @apply m-1 cursor-pointer;
+}
+
+:deep(.swiper-pagination-bullet-active) {
+  background: #007aff;
+}
+
+:deep(.swiper-wrapper) {
+  @apply flex items-center;
+}
+
+:deep(.swiper-scrollbar) {
+  display: none;
+}
+</style>