create-young-proj 0.13.0 → 1.1.0-alpha.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/README.md

@@ -0,0 +1,117 @@
+# 基于 Nuxt 3 的服务端渲染响应式网站
+
+
+[![](https://img.shields.io/badge/Author-BluesYoung--web-blue)](https://gitee.com/BluesYoung-web)
+
+[![code style](https://antfu.me/badge-code-style.svg)](https://github.com/antfu/eslint-config)
+
+## 注意
+
+> `useFetch + $fetch + NuxtLink + navigateTo` 组合使用，可以极大提升用户体验
+
+```ts
+navigateTo('/url?a=1&b=2')
+// ===>
+navigateTo({
+  path: '/url',
+  query: {
+    a: 1,
+    b: 2
+  }
+})
+```
+
+> `definePageMeta` 的 `name` 不得重复
+
+### 图片大小
+
+**`asstes` 内的图片不得大于 4k**，超过大小的图片需要转换为 `webp` 后上传至 `cdn`
+
+## 特性
+
+- 基于 [@nuxtjs/device](https://github.com/nuxt-modules/device) 的设备判断
+
+- 基于 [@unocss/nuxt](https://github.com/unocss/unocss) 的样式自动生成
+
+- 基于 [@formkit/auto-animate](https://auto-animate.formkit.com/#usage-vue) 的自动动画
+
+- 基于 [@bluesyoung/nuxt3-lazy-load](https://www.npmjs.com/package/@bluesyoung/nuxt3-lazy-load) 的图片懒加载
+
+## 配套 git 提交工具
+
+### 安装
+
+```bash
+npm i -g young-commit
+```
+
+### 使用
+
+
+- 正常使用 `git add` 将要提交的文件添加到暂存区
+
+- 提交步骤使用 `yc` 或者 `young-commit` 进行提交
+
+#### 命令选项
+
+- `yc -i` 初始化(仅刚创建项目时使用，会自动执行 `git init`)
+
+- `yc -r` 进行版本发布，会根据之前的提交及最近一个 `tag` 生成 `changelog`
+
+
+## 使用响应式布局
+
+兼容 `PC` 端与移动端
+
+**移动端最低兼容钉钉浏览器**
+
+## 常用的操作
+
+### 抛出错误
+
+```ts
+throw createError({ statusCode: 404, message: '数据迷路了' })
+```
+
+### 响应式屏幕尺寸
+
+
+```ts
+/*
+export const WindowSize = reactive({
+  'lt-sm': useMediaQuery('(max-width: 639.9px)'),
+  'sm': useMediaQuery('(min-width: 640px)'),
+  'lt-md': useMediaQuery('(max-width: 767.9px)'),
+  'md': useMediaQuery('(min-width: 768px)'),
+  'lt-lg': useMediaQuery('(max-width: 1023.9px)'),
+  'lg': useMediaQuery('(min-width: 1024px)'),
+  'lt-xl': useMediaQuery('(max-width: 1279.9px)'),
+  'xl': useMediaQuery('(min-width: 1280px)'),
+  'lt-2xl': useMediaQuery('(max-width: 1535.9px)'),
+  '2xl': useMediaQuery('(min-width: 1536px)'),
+});
+*/
+```
+
+### 设备判断
+
+```ts
+const $device = useDevice()
+
+$device.isDesktop
+$device.isMobile
+$device.isTablet
+$device.isMobileOrTablet
+$device.isDesktopOrTablet
+$device.isIos
+$device.isWindows
+$device.isMacOS
+$device.isApple
+$device.isAndroid
+$device.isFirefox
+$device.isEdge
+$device.isChrome
+$device.isSafari
+$device.isSamsung
+$device.isCrawler
+```

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>