create-young-proj 0.7.0 → 0.9.0

package/template-uni-app/src/components/young-loading-mini/young-loading-mini.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-20 14:48:35
- * @LastEditTime: 2023-07-20 15:09:28
+ * @LastEditTime: 2023-08-25 16:27:13
  * @Description:
 -->
 <script lang="ts" setup>
@@ -9,30 +9,27 @@ withDefaults(defineProps<{
   /**
    * 加载中的动图
    */
-  loadingGif?: string;
+  loadingGif?: string
   /**
    * 文本提示
    */
-  tip?: string;
+  tip?: string
 }>(), {
   loadingGif: 'https://api.iconify.design/eos-icons:bubble-loading.svg?color=%23e80d19',
-  tip: '拼命加载中...'
-});
+  tip: '拼命加载中...',
+})
 
-const loading = ref(false);
-
-const start = () => loading.value = true;
-const end = () => loading.value = false;
-
-defineExpose({
-  start,
-  end
-});
+const { smallLoading } = storeToRefs(useHttpLoading())
 </script>
+
 <template>
-  <view v-if="loading"
-    class="w100vw h100vh fixed left-0 top-0 z-999998 bg-[#333] opacity-90 flex flex-col items-center justify-center">
+  <view
+    v-show="smallLoading"
+    class="w100vw h100vh fixed left-0 top-0 z-999998 bg-[#333] opacity-90 flex flex-col items-center justify-center"
+  >
     <image :src="loadingGif" class="w240rpx h240rpx mb-32rpx" />
-    <text class="text-[#fff] text-24rpx leading-36rpx">{{ tip }}</text>
+    <text class="text-[#fff] text-24rpx leading-36rpx">
+      {{ tip }}
+    </text>
   </view>
 </template>

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-19 09:03:51
- * @LastEditTime: 2023-07-20 15:18:33
+ * @LastEditTime: 2023-09-06 19:43:01
  * @Description:
 -->
 <script lang="ts" setup>
@@ -9,35 +9,35 @@ interface Props {
   /**
    * 是否是自定义导航
    */
-  custom?: boolean;
+  custom?: boolean
   /**
    * 是否返回
    */
-  isback?: boolean;
+  isback?: boolean
   /**
    * 标题
    */
-  title?: string;
+  title?: string
   /**
    * 标题颜色
    */
-  color?: string;
+  color?: string
   /**
    * 背景色
    */
-  bgcolor?: string;
+  bgcolor?: string
   /**
    * 是否固定
    */
-  fixed?: boolean;
+  fixed?: boolean
   /**
    * 等高的占位元素
    */
-  placeholder?: boolean;
+  placeholder?: boolean
   /**
    * 设置层级
    */
-  zIndex?: number;
+  zIndex?: number
   /**
    * 是否展示
    */
@@ -53,53 +53,54 @@ withDefaults(defineProps<Props>(), {
   fixed: true,
   placeholder: true,
   zIndex: 2,
-  ishow: true
-});
+  ishow: true,
+})
 
-const navHeight = getNavbarHeihgt();
+const navHeight = getNavbarHeihgt()
 
 // 页面数量 当只有一个页面且不是主页面的时候 back 图标变成 home 图标
 const pagesCount = computed(() => {
-  return getCurrentPages().length;
-});
+  return getCurrentPages().length
+})
 
 const pagesTitle = computed(() => {
-  const page = getCurrentPages()[pagesCount.value - 1];
-  let res = '';
+  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;
+    const val = Pages[key as keyof typeof Pages]?.slice(1)
+    const route = page.route
     if (route === val) {
-      res = key;
-      break;
+      res = key
+      break
     }
   }
-  return res;
-});
-
-const handleLeftClick = () => {
-  if (pagesCount.value === 1) {
-    relaunch(Pages.首页);
-  } else {
-    back();
-  }
-};
+  return res
+})
+
+function 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="y__navbar-wrap flex items-center relative box-border left-0"
+        :class="{ 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">
+        <view v-if="isback" class="action navbar-action__left" @click="handleLeftClick">
           <template v-if="$slots.back">
             <slot name="back" />
           </template>
           <template v-else>
-            <image v-if="pagesCount === 1" src="@/static/h.png" class="w20px h20px"></image>
-            <image v-else src="@/static/back.png" class="w20px h20px"></image>
+            <image v-if="pagesCount === 1" src="@/static/h.png" class="w20px h20px" />
+            <image v-else src="@/static/back.png" class="w20px h20px" />
           </template>
           <slot name="backText" />
         </view>
@@ -110,7 +111,11 @@ const handleLeftClick = () => {
           <template v-if="$slots.title">
             <slot name="title" />
           </template>
-          <template v-else><text :style="{ 'color': color }">{{ title || pagesTitle }}</text></template>
+          <template v-else>
+            <text :style="{ color }">
+              {{ title || pagesTitle }}
+            </text>
+          </template>
         </view>
 
         <!-- //右侧 -->
@@ -119,11 +124,10 @@ const handleLeftClick = () => {
         </view>
       </view>
     </view>
-    <view :style="{ 'height': navHeight.customBarH + 'px' }" v-if="placeholder"></view>
+    <view v-if="placeholder" :style="{ height: `${navHeight.customBarH}px` }" />
   </view>
 </template>
 
-
 <style lang="scss" scoped>
 .nvuefont {
   font-family: nvueIcon;
@@ -205,11 +209,6 @@ const handleLeftClick = () => {
   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;

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

@@ -5,61 +5,65 @@
  * @Description:
 -->
 <script lang="ts" setup>
-import { Pages } from '@/config';
-import home from '@/static/home.png';
-import home_active from '@/static/home_active.png';
-import my from '@/static/my.png';
-import my_active from '@/static/my_active.png';
-
-type Tabbar = {
-  selectedIconPath: string;
-  iconPath: string;
-  text: string;
-  pagePath: Pages;
-};
+import { Pages } from '@/config'
+import home from '@/static/home.png'
+import home_active from '@/static/home_active.png'
+import my from '@/static/my.png'
+import my_active from '@/static/my_active.png'
+
+interface Tabbar {
+  selectedIconPath: string
+  iconPath: string
+  text: string
+  pagePath: Pages
+}
 
-withDefaults(defineProps<{ z?: number }>(), { z: 99 });
+withDefaults(defineProps<{ z?: number }>(), { z: 99 })
 
 const list = ref<Tabbar[]>([
   {
     text: '首页',
     iconPath: home,
     selectedIconPath: home_active,
-    pagePath: Pages.首页
+    pagePath: Pages.首页,
   },
   {
     text: '我的',
     iconPath: my,
     selectedIconPath: my_active,
-    pagePath: Pages.个人中心
-  }
-]);
+    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);
-};
-
-uni.hideTabBar();
+  const [page] = getCurrentPages()
+  const route = page.route
+  const index = list.value.findIndex(path => path.pagePath === `/${route}`)
+  return index
+})
+
+function tabChange(index: number) {
+  if (index === current.value)
+    return
+
+  tabbar(list.value[index].pagePath)
+}
+
+uni.hideTabBar()
 </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
+      v-for="(item, index) in list" :key="index" class="t-tabbar__item" :class="{ 't-bar__item_on': index === current }"
+      @click="tabChange(index)"
+    >
       <view style="position: relative;display:inline-block;">
-        <image :src="current === index ? item.selectedIconPath : item.iconPath" class="t-tabbar__icon"></image>
+        <image :src="current === index ? item.selectedIconPath : item.iconPath" class="t-tabbar__icon" />
+      </view>
+      <view class="t-tabbar__label">
+        {{ item.text }}
       </view>
-      <view class="t-tabbar__label">{{ item.text }}</view>
     </view>
   </view>
 </template>

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

@@ -42,6 +42,6 @@ export enum Pages {
 /**
  * tabbar 页面
  */
-export const TabbarArr = [Pages.首页, Pages.个人中心];
+export const TabbarArr = [Pages.首页, Pages.个人中心]
 
 export enum UIEvents {}

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

@@ -4,5 +4,5 @@
  * @LastEditTime: 2023-07-18 14:53:47
  * @Description:
  */
-export * from './enum';
-export * from './map';
+export * from './enum'
+export * from './map'

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

@@ -8,8 +8,8 @@
  * 获取地图 API Key
  * todo: 秘钥替换
  */
-export const getMapApiKey = () => {
-  const MAP_API_KEY = '我是腾讯地图秘钥';
+export function getMapApiKey() {
+  const MAP_API_KEY = '我是腾讯地图秘钥'
 
-  return MAP_API_KEY;
-};
+  return MAP_API_KEY
+}

package/template-uni-app/src/layouts/default.vue

@@ -1,24 +1,22 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-20 10:55:54
- * @LastEditTime: 2023-07-20 15:40:22
+ * @LastEditTime: 2023-08-25 16:21:46
  * @Description: todo: 默认布局，按需调整
 -->
 <script lang="ts" setup>
-const { httpLoadingEl } = storeToRefs(useHttpLoading());
-const { pagesInfo } = storeToRefs(useSystemInfo());
+const { pagesInfo } = storeToRefs(useSystemInfo())
 
 onLoad(() => {
-  const [page] = getCurrentPages();
+  const [page] = getCurrentPages()
 
-  const pageConf = pagesInfo.value.find((p) => p.path === page.route);
-  if (pageConf && pageConf.needLogin) {
-    console.log('todo: 这个页面需要登录，进行登录条件判断');
-  }
-});
+  const pageConf = pagesInfo.value.find(p => p.path === page.route)
+  if (pageConf && pageConf.needLogin)
+    console.log('todo: 这个页面需要登录，进行登录条件判断')
+})
 </script>
 
 <template>
-  <young-loading-mini ref="httpLoadingEl" />
+  <young-loading-mini />
   <slot />
 </template>

package/template-uni-app/src/layouts/tabbar.vue

@@ -1,28 +1,38 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-20 11:00:42
- * @LastEditTime: 2023-07-20 15:09:18
+ * @LastEditTime: 2023-08-25 16:37:12
  * @Description: tabbar 页面的默认布局
 -->
 <script lang="ts" setup>
-const { customBarH, safeBottom } = getNavbarHeihgt();
-const loadingEl = ref();
+const { customBarH, safeBottom } = getNavbarHeihgt()
 
-const { httpLoadingEl } = storeToRefs(useHttpLoading());
+const { pagesInfo } = storeToRefs(useSystemInfo())
 
-onMounted(() => {
-  setTimeout(() => {
-    loadingEl.value?.end();
-  }, 3e3);
-});
+const showNavBar = ref(false)
+const navBarAttr = ref<ParamsObj>({})
+
+onLoad(() => {
+  const [page] = getCurrentPages()
+
+  const pageConf = pagesInfo.value.find(p => p.path === page.route)
+
+  if (pageConf?.navbar) {
+    showNavBar.value = true
+    navBarAttr.value = pageConf.navbar
+  }
+})
 </script>
+
 <template>
-  <slot name="nav"></slot>
-  <young-loading ref="loadingEl" />
-  <young-loading-mini ref="httpLoadingEl" />
-  <scroll-view scroll-y class="flex flex-col bg-transparent"
-    :style="{ height: `calc(100vh - ${customBarH}px - ${safeBottom}px - 44px)` }">
-    <slot></slot>
+  <young-navbar v-if="showNavBar" v-bind="navBarAttr" />
+  <young-loading />
+  <young-loading-mini />
+  <scroll-view
+    scroll-y class="flex flex-col bg-transparent"
+    :style="{ height: `calc(100vh - ${customBarH}px - ${safeBottom}px - 44px)` }"
+  >
+    <slot />
   </scroll-view>
   <young-tabbar :z="999" />
 </template>

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

@@ -4,17 +4,17 @@
  * @LastEditTime: 2023-07-18 14:07:16
  * @Description:
  */
-import { createSSRApp } from 'vue';
-import App from './App.vue';
-import { setupStore } from './store';
+import { createSSRApp } from 'vue'
+import App from './App.vue'
+import { setupStore } from './store'
 
-import 'uno.css';
+import 'uno.css'
 
 export function createApp() {
-  const app = createSSRApp(App);
-  setupStore(app);
+  const app = createSSRApp(App)
+  setupStore(app)
 
   return {
     app,
-  };
+  }
 }

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

@@ -72,4 +72,4 @@
     "enable": false
   },
   "vueVersion": "3"
-}
+}

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

@@ -5,20 +5,26 @@
  * @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);
-};
+async function testGet() {
+  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');
-};
+async function testPost() {
+  await apis.post.createRepo('BluesYoung-web')
+}
 </script>
 
 <template>
   <young-navbar />
-  <h1 class="text-32">我是子页面 demo</h1>
+  <h1 class="text-32">
+    我是子页面 demo
+  </h1>
 
-  <button @click="testGet">点我测试 Get 请求</button>
-  <button @click="testPost">点我测试 Post 请求</button>
+  <button @click="testGet">
+    点我测试 Get 请求
+  </button>
+  <button @click="testPost">
+    点我测试 Post 请求
+  </button>
 </template>

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

@@ -1,44 +1,65 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-18 11:23:36
- * @LastEditTime: 2023-07-20 15:24:46
+ * @LastEditTime: 2023-08-25 16:39:24
  * @Description:
 -->
 <route lang="json">
 {
   "needLogin": true,
-  "layout": "tabbar"
+  "layout": "tabbar",
+  "navbar": {
+    "isback": false
+  }
 }
 </route>
 
 <script lang="ts" setup>
-const testGet = async () => {
-  const res = await apis.get.getByUserName('BluesYoung-web');
-  console.log("🚀 ~ file: index.vue:12 ~ test ~ res:", res);
-};
+async function testGet() {
+  const res = await apis.get.getByUserName('BluesYoung-web')
+  console.log('🚀 ~ file: index.vue:12 ~ test ~ res:', res)
+}
+
+async function testPost() {
+  await apis.post.createRepo('BluesYoung-web')
+}
+
+const { fullscreenLoading } = storeToRefs(useHttpLoading())
+fullscreenLoading.value = true
 
-const testPost = async () => {
-  await apis.post.createRepo('BluesYoung-web');
-};
+setTimeout(() => {
+  fullscreenLoading.value = false
+}, 3e3)
 </script>
 
 <template>
-  <template #nav>
-    <young-navbar :isback="false" />
-  </template>
-  <template #default>
-    <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>
+  <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>
+  <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" @click="to(Pages.测试子页面)">
-      <text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
-    </uni-card>
-  </template>
+  <uni-card
+    title="基础卡片" sub-title="副标题" extra="额外信息"
+    thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" @click="to(Pages.测试子页面)"
+  >
+    <text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
+  </uni-card>
 </template>

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

@@ -1,21 +1,30 @@
 <!--
  * @Author: zhangyang
  * @Date: 2023-07-18 17:53:43
- * @LastEditTime: 2023-08-01 12:07:03
+ * @LastEditTime: 2023-08-25 16:39:28
  * @Description:
 -->
 <route lang="json">
 {
   "needLogin": true,
-  "layout": "tabbar"
+  "layout": "tabbar",
+  "navbar": {
+    "isback": false
+  }
 }
 </route>
 
+<script lang="ts" setup>
+const { fullscreenLoading } = storeToRefs(useHttpLoading())
+fullscreenLoading.value = true
+
+setTimeout(() => {
+  fullscreenLoading.value = false
+}, 3e3)
+</script>
+
 <template>
-  <template #nav>
-    <young-navbar :isback="false" />
-  </template>
-  <template #default>
-    <h1 class="text-32">我是个人中心</h1>
-  </template>
+  <h1 class="text-32">
+    我是个人中心
+  </h1>
 </template>