create-young-proj 0.3.0 → 0.5.0

package/template-uni-app/src/components/young-navbar/young-navbar.vue

@@ -0,0 +1,253 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-19 09:03:51
+ * @LastEditTime: 2023-07-19 16:47:55
+ * @Description:
+-->
+<script lang="ts" setup>
+interface Props {
+  /**
+   * 是否是自定义导航
+   */
+  custom?: boolean;
+  /**
+   * 是否返回
+   */
+  isback?: boolean;
+  /**
+   * 标题
+   */
+  title?: string;
+  /**
+   * 标题颜色
+   */
+  color?: string;
+  /**
+   * 背景色
+   */
+  bgcolor?: string;
+  /**
+   * 是否固定
+   */
+  fixed?: boolean;
+  /**
+   * 等高的占位元素
+   */
+  placeholder?: boolean;
+  /**
+   * 设置层级
+   */
+  zIndex?: number;
+  /**
+   * 是否展示
+   */
+  ishow?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  custom: true,
+  isback: true,
+  title: '',
+  color: '#fff',
+  bgcolor: 'linear-gradient(180deg, #3E3A39 0%, #0D0D0D 100%)',
+  fixed: true,
+  placeholder: true,
+  zIndex: 2,
+  ishow: true
+});
+
+const navHeight = getNavbarHeihgt();
+
+// 页面数量 当只有一个页面且不是主页面的时候 back 图标变成 home 图标
+const pagesCount = computed(() => {
+  return getCurrentPages().length;
+});
+
+const pagesTitle = computed(() => {
+  const page = getCurrentPages()[pagesCount.value - 1];
+  let res = '';
+  for (const key in Pages) {
+    const val = Pages[key as keyof typeof Pages]?.slice(1);
+    const route = page.route;
+    if (route === val) {
+      res = key;
+      break;
+    }
+  }
+  return res;
+});
+
+const handleLeftClick = () => {
+  if (pagesCount.value === 1) {
+    relaunch(Pages.首页);
+  } else {
+    back();
+  }
+};
+</script>
+
+<template>
+  <view v-if="ishow">
+    <view class="y__navbar">
+      <view class="y__navbar-wrap flex items-center relative box-border left-0"
+        :class="{ 'custom': custom, 'fixed': fixed || placeholder }"
+        :style="{ 'height': navHeight.customBarH + 'px', 'padding-top': navHeight.statusBarH + 'px', 'background': bgcolor, 'color': color, 'z-index': zIndex }">
+        <!-- 返回  -->
+        <view class="action navbar-action__left" v-if="isback" @click="handleLeftClick">
+          <template v-if="$slots.back">
+            <slot name="back" />
+          </template>
+          <template v-else>
+            <!-- <image v-if="pagesCount === 1" src="../static/home.png" class="w20px h20px"></image>
+            <image v-else src="../static/back.png" class="w20px h20px"></image> -->
+          </template>
+          <slot name="backText" />
+        </view>
+        <slot name="left" />
+
+        <!-- //标题 -->
+        <view class="navbar-title absolute ">
+          <template v-if="$slots.title">
+            <slot name="title" />
+          </template>
+          <template v-else><text :style="{ 'color': color }">{{ title || pagesTitle }}</text></template>
+        </view>
+
+        <!-- //右侧 -->
+        <view class="action navbar-action__right">
+          <slot name="right" />
+        </view>
+      </view>
+    </view>
+    <view :style="{ 'height': navHeight.customBarH + 'px' }" v-if="placeholder"></view>
+  </view>
+</template>
+
+
+<style lang="scss" scoped>
+.nvuefont {
+  font-family: nvueIcon;
+}
+
+.y__navbar {
+  /* #ifndef APP-NVUE */
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  display: -ms-flexbox;
+  /* #endif */
+  flex-direction: row;
+}
+
+.y__navbar-wrap {
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+  background-color: #fff;
+  color: #333;
+  justify-content: space-between;
+  min-height: 90rpx;
+  position: relative;
+  z-index: 2021;
+}
+
+.y__navbar-wrap.custom {
+  /* #ifdef MP-WEIXIN */
+  padding-right: 200rpx;
+  /* #endif */
+  /* #ifdef MP-ALIPAY */
+  padding-right: 150rpx;
+  /* #endif */
+}
+
+.y__navbar-wrap.fixed {
+  /* #ifdef APP-NVUE */
+  left: 0;
+  right: 0;
+  /* #endif */
+  /* #ifndef APP-NVUE */
+  width: 100%;
+  /* #endif */
+  max-width: 750rpx;
+  position: fixed;
+  top: 0;
+}
+
+.y__navbar-wrap .action {
+  /* #ifndef APP-NVUE */
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  display: -ms-flexbox;
+  height: 100%;
+  max-width: 100%;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+/*左侧*/
+.navbar-action__left {
+  font-size: 32rpx;
+  padding: 0 24rpx;
+}
+
+.navbar-action__left .iconfont {
+  font-size: 42rpx;
+}
+
+/*标题*/
+.y__navbar-wrap .navbar-title {
+  flex: 1;
+  font-size: 34rpx;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+// .y__navbar-wrap .navbar-title:first-child {
+// 	font-size: 36rpx;
+// 	margin-left: 24rpx;
+// }
+
+.y__navbar-wrap .navbar-title.center {
+  /* #ifdef APP-NVUE */
+  left: 0;
+  right: 0;
+  /* #endif */
+  /* #ifndef APP-NVUE */
+  width: 100%;
+  z-index: -1;
+  /* #endif */
+  align-items: center;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  position: absolute;
+}
+
+.y__navbar-wrap.custom .navbar-title.center {
+  /* #ifdef MP */
+  width: auto;
+  align-items: auto;
+  text-align: left;
+  position: static;
+  /* #endif */
+}
+
+/*搜索条*/
+.navbar-action__search.action {
+  flex: 1;
+  justify-content: flex-start;
+}
+
+.navbar-action__right {
+  font-size: 32rpx;
+  padding-right: 24rpx;
+}
+
+.navbar-action__right .iconfont {
+  font-size: 42rpx;
+}
+</style>

package/template-uni-app/src/components/young-tabbar/young-tabbar.vue

@@ -0,0 +1,137 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-18 17:44:06
+ * @LastEditTime: 2023-07-19 10:34:41
+ * @Description:
+-->
+<script lang="ts" setup>
+import { Pages } from '@/config';
+import { isHttpUrl } from '@bluesyoung/utils';
+type Tabbar = {
+  selectedIconPath: string;
+  iconPath: string;
+  text: string;
+  pagePath: Pages;
+};
+
+withDefaults(defineProps<{ z?: number }>(), { z: 99 });
+
+const list = ref<Tabbar[]>([
+  {
+    text: '首页',
+    iconPath: 'home',
+    selectedIconPath: 'home-filled',
+    pagePath: Pages.首页
+  },
+  {
+    text: '我的',
+    iconPath: 'contact',
+    selectedIconPath: 'contact-filled',
+    pagePath: Pages.个人中心
+  }
+]);
+
+const current = computed(() => {
+  const [page] = getCurrentPages();
+  const route = page.route;
+  const index = list.value.findIndex(path => path.pagePath === '/' + route);
+  return index;
+});
+
+const tabChange = (index: number) => {
+  if (index === current.value) {
+    return;
+  }
+  tabbar(list.value[index].pagePath);
+}
+</script>
+
+<template>
+  <view class="t-tabbar" :style="{ zIndex: z }">
+    <view @click="tabChange(index)" v-for="(item, index) in list" :key="index" class="t-tabbar__item"
+      :class="{ 't-bar__item_on': index === current }">
+      <view style="position: relative;display:inline-block;">
+        <image v-if="isHttpUrl(item.selectedIconPath)" :src="current === index ? item.selectedIconPath : item.iconPath"
+          class="t-tabbar__icon"></image>
+        <uni-icons :type="current === index ? item.selectedIconPath : item.iconPath" />
+      </view>
+      <view class="t-tabbar__label">{{ item.text }}</view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.t-tabbar {
+  display: flex;
+  // position: relative;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #ffffff;
+}
+
+.t-tabbar:before {
+  content: ' ';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 1px;
+  border-top: 1rpx solid rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.1);
+}
+
+.t-tabbar__item {
+  display: block;
+  flex: 1;
+  padding: 8px 0 4px;
+  padding-bottom: calc(8px + constant(safe-area-inset-bottom));
+  padding-bottom: calc(8px + env(safe-area-inset-bottom));
+  font-size: 0;
+  color: rgba(0, 0, 0, 0.5);
+  text-align: center;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.t-tabbar__item:first-child {
+  padding-left: constant(safe-area-inset-left);
+  padding-left: env(safe-area-inset-left);
+}
+
+.t-tabbar__item:last-child {
+  padding-right: constant(safe-area-inset-right);
+  padding-right: env(safe-area-inset-right);
+}
+
+.t-tabbar__item.t-bar__item_on .t-tabbar__icon,
+.t-tabbar__item.t-bar__item_on .t-tabbar__icon>i,
+.t-tabbar__item.t-bar__item_on .t-tabbar__label {
+  color: #e80d19;
+}
+
+.t-tabbar__icon {
+  display: inline-block;
+  width: 28px;
+  height: 28px;
+  margin-bottom: 2px;
+}
+
+i.t-tabbar__icon,
+.t-tabbar__icon>i {
+  font-size: 24px;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.t-tabbar__icon image {
+  width: 100%;
+  height: 100%;
+}
+
+.t-tabbar__label {
+  color: #bfbfbf;
+  font-size: 10px;
+  line-height: 1.4;
+  height: 14px;
+}
+</style>

package/template-uni-app/src/components/young-tabbar-layout/young-tabbar-layout.vue

@@ -0,0 +1,27 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-18 18:04:48
+ * @LastEditTime: 2023-07-19 16:49:58
+ * @Description:
+-->
+<script lang="ts" setup>
+withDefaults(defineProps<{
+  scrollY?: boolean;
+  bg?: string;
+  top?: number | string;
+}>(), {
+  scrollY: true,
+  bg: 'transparent',
+  top: 0
+});
+const bottom = getNavbarHeihgt().safeBottom;
+</script>
+
+<template>
+  <div class="flex flex-col" :style="{ height: `calc(100vh - ${top}px - ${bottom}px - 44px)` }">
+    <scroll-view :scroll-y="scrollY" class="flex-1" :style="{ backgroundColor: bg }">
+      <slot></slot>
+    </scroll-view>
+    <young-tabbar :z="999" />
+  </div>
+</template>

package/template-uni-app/src/config/enum.ts

@@ -0,0 +1,46 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-18 14:51:02
+ * @LastEditTime: 2023-07-19 12:17:58
+ * @Description:
+ */
+
+/**
+ * 模板消息的枚举
+ * todo: 按需替换
+ */
+export enum SubscribeMessage {
+  模板消息1 = '消息1xxxxxxxxxxxxxxxxxx',
+  模板消息2 = '消息2xxxxxxxxxxxxxxxxxx',
+}
+
+/**
+ * 授权定位相关
+ */
+export enum AuthLocationEvents {
+  同意授权 = 'sure_location',
+  启用授权 = 'enable_location',
+}
+
+/**
+ * 存储键名
+ */
+export enum YoungStorageKeys {
+  位置信息 = 'location',
+  唯一标识 = 'uuid',
+  导航栏高度 = 'navbarHeight',
+}
+
+/**
+ * 页面地址枚举
+ */
+export enum Pages {
+  首页 = '/pages/index',
+  个人中心 = '/pages/my',
+}
+/**
+ * tabbar 页面
+ */
+export const TabbarArr = [Pages.首页, Pages.个人中心] as const;
+
+export enum UIEvents { }

package/template-uni-app/src/config/index.ts

@@ -0,0 +1,8 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-18 14:53:47
+ * @LastEditTime: 2023-07-18 14:53:47
+ * @Description:
+ */
+export * from './enum';
+export * from './map';

package/template-uni-app/src/config/map.ts

@@ -0,0 +1,15 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-18 14:54:11
+ * @LastEditTime: 2023-07-18 14:54:11
+ * @Description:
+ */
+/**
+ * 获取地图 API Key
+ * todo: 秘钥替换
+ */
+export const getMapApiKey = () => {
+  const MAP_API_KEY = '我是腾讯地图秘钥';
+
+  return MAP_API_KEY;
+};

package/template-uni-app/src/env.d.ts

@@ -0,0 +1,35 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-19 08:41:05
+ * @LastEditTime: 2023-07-19 15:46:37
+ * @Description:
+ */
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+/**
+ * import.meta.env.[]
+ * 变量语法提示
+ */
+declare interface ImportMetaEnv {
+  /**
+   * 公共配置
+   */
+  VITE_COMMON: string;
+
+  /**
+   * 微信小程序 appid
+   */
+  VITE_APPID: string;
+
+  /**
+   * 接口请求地址
+   */
+  VITE_API_BASE_URL: string;
+}

package/template-uni-app/src/main.ts

@@ -0,0 +1,20 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-18 11:21:31
+ * @LastEditTime: 2023-07-18 14:07:16
+ * @Description:
+ */
+import { createSSRApp } from 'vue';
+import App from './App.vue';
+import { setupStore } from './store';
+
+import 'uno.css';
+
+export function createApp() {
+  const app = createSSRApp(App);
+  setupStore(app);
+
+  return {
+    app,
+  };
+}

package/template-uni-app/src/manifest.json

@@ -0,0 +1,83 @@
+{
+  "name": "",
+  "appid": "",
+  "description": "",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
+  /* 5+App特有相关 */
+  "app-plus": {
+    "usingComponents": true,
+    "nvueStyleCompiler": "uni-app",
+    "compilerVersion": 3,
+    "splashscreen": {
+      "alwaysShowBeforeRender": true,
+      "waiting": true,
+      "autoclose": true,
+      "delay": 0
+    },
+    /* 模块配置 */
+    "modules": {},
+    /* 应用发布信息 */
+    "distribute": {
+      /* android打包配置 */
+      "android": {
+        "permissions": [
+          "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+          "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+          "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+          "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+          "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+          "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+          "<uses-feature android:name=\"android.hardware.camera\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+        ]
+      },
+      /* ios打包配置 */
+      "ios": {},
+      /* SDK配置 */
+      "sdkConfigs": {}
+    }
+  },
+  /* 快应用特有相关 */
+  "quickapp": {},
+  /* 小程序特有相关 */
+  "mp-weixin": {
+    "appid": "",
+    "setting": {
+      "urlCheck": false,
+      "ignoreUploadUnusedFiles": false,
+      "ignoreDevUnusedFiles": false
+    },
+    "usingComponents": true,
+    "requiredPrivateInfos": [
+      "getLocation",
+      "chooseLocation"
+    ],
+    "permission": {
+      "scope.userLocation": {
+        "desc": "你的位置信息将用于获取附近的门店信息"
+      }
+    }
+  },
+  "mp-alipay": {
+    "usingComponents": true
+  },
+  "mp-baidu": {
+    "usingComponents": true
+  },
+  "mp-toutiao": {
+    "usingComponents": true
+  },
+  "uniStatistics": {
+    "enable": false
+  },
+  "vueVersion": "3"
+}

package/template-uni-app/src/pages/index.vue

@@ -0,0 +1,52 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-18 11:23:36
+ * @LastEditTime: 2023-07-19 16:50:03
+ * @Description:
+-->
+<script lang="ts" setup>
+const testGet = async () => {
+  const res = await apis.get.getByUserName('BluesYoung-web');
+  console.log("🚀 ~ file: index.vue:12 ~ test ~ res:", res);
+};
+
+const testPost = async () => {
+  await apis.post.createRepo('BluesYoung-web');
+};
+const navBar = getNavbarHeihgt();
+
+const loadingEl = ref();
+
+onLoad(() => {
+  uni.hideTabBar();
+});
+
+onMounted(() => {
+  setTimeout(() => {
+    loadingEl.value?.stop();
+  }, 3e3);
+});
+</script>
+
+<template>
+  <div>
+    <young-navbar isback />
+    <young-tabbar-layout :top="navBar.customBarH" bg="#F0F0F0">
+      <h1 class="text-32">我是页面</h1>
+      <view class="uni-primary">主色</view>
+      <view class="uni-success">成功色</view>
+      <view class="uni-warning">警告色</view>
+      <view class="uni-error">错误色</view>
+
+      <button @click="testGet">点我测试 Get 请求</button>
+      <button @click="testPost">点我测试 Post 请求</button>
+
+      <uni-card title="基础卡片" sub-title="副标题" extra="额外信息"
+        thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
+        <text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
+      </uni-card>
+    </young-tabbar-layout>
+
+    <young-loading ref="loadingEl" />"
+  </div>
+</template>