npm - @roki-h5/create-roki-app - Versions diffs - 0.1.0 - Mend

@roki-h5/create-roki-app 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/dist/index.d.ts +2 -0
package/dist/index.js +67 -0
package/package.json +41 -0
package/templates/h5/.env.development +1 -0
package/templates/h5/index.html +19 -0
package/templates/h5/package.json +27 -0
package/templates/h5/postcss.config.js +17 -0
package/templates/h5/src/App.vue +3 -0
package/templates/h5/src/api/index.ts +9 -0
package/templates/h5/src/api/request.ts +78 -0
package/templates/h5/src/assets/images/top-bg.png +0 -0
package/templates/h5/src/assets/styles/main.css +21 -0
package/templates/h5/src/main.ts +16 -0
package/templates/h5/src/router/index.ts +24 -0
package/templates/h5/src/stores/index.ts +15 -0
package/templates/h5/src/utils/debounce.ts +20 -0
package/templates/h5/src/utils/rem.ts +37 -0
package/templates/h5/src/views/home/index.vue +60 -0
package/templates/h5/src/vite-env.d.ts +9 -0
package/templates/h5/tsconfig.json +20 -0
package/templates/h5/vite.config.ts +19 -0

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+
2	+ export { }

package/dist/index.js ADDED Viewed

@@ -0,0 +1,67 @@
+#!/usr/bin/env node
+// src/index.ts
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { cyan, green, red } from "kolorist";
+import prompts from "prompts";
+var __dirname = path.dirname(fileURLToPath(import.meta.url));
+var TEMPLATE_DIR = path.resolve(__dirname, "../templates/h5");
+async function main() {
+  const args = process.argv.slice(2);
+  let projectName = args[0];
+  if (!projectName) {
+    const result = await prompts({
+      type: "text",
+      name: "name",
+      message: "\u9879\u76EE\u540D\u79F0",
+      initial: "roki-h5",
+      validate: (value) => value.trim() ? true : "\u540D\u79F0\u4E0D\u80FD\u4E3A\u7A7A"
+    });
+    if (!result.name) {
+      console.log(red("\u5DF2\u53D6\u6D88"));
+      process.exit(1);
+    }
+    projectName = result.name.trim();
+  }
+  const targetDir = path.resolve(process.cwd(), projectName);
+  if (fs.existsSync(targetDir)) {
+    console.log(red(`\u76EE\u5F55 ${projectName} \u5DF2\u5B58\u5728`));
+    process.exit(1);
+  }
+  copyDir(TEMPLATE_DIR, targetDir, projectName);
+  console.log();
+  console.log(green(`\u2713 \u9879\u76EE ${projectName} \u521B\u5EFA\u6210\u529F`));
+  console.log();
+  console.log(`  cd ${projectName}`);
+  console.log("  pnpm install");
+  console.log("  pnpm dev");
+  console.log();
+}
+function copyDir(src, dest, projectName) {
+  fs.mkdirSync(dest, { recursive: true });
+  for (const file of fs.readdirSync(src)) {
+    const srcPath = path.join(src, file);
+    const destPath = path.join(dest, file);
+    if (fs.statSync(srcPath).isDirectory()) {
+      copyDir(srcPath, destPath, projectName);
+      continue;
+    }
+    if (isBinaryAsset(file)) {
+      fs.copyFileSync(srcPath, destPath);
+    } else {
+      let content = fs.readFileSync(srcPath, "utf-8");
+      content = content.replace(/__PROJECT_NAME__/g, projectName);
+      fs.writeFileSync(destPath, content);
+    }
+    console.log(cyan(`  + ${path.relative(process.cwd(), destPath)}`));
+  }
+}
+function isBinaryAsset(filename) {
+  return /\.(png|jpe?g|gif|webp|ico|woff2?|ttf|eot)$/i.test(filename);
+}
+main().catch((err) => {
+  console.error(red(String(err)));
+  process.exit(1);
+});

package/package.json ADDED Viewed

@@ -0,0 +1,41 @@
+{
+  "name": "@roki-h5/create-roki-app",
+  "version": "0.1.0",
+  "description": "Roki H5 项目脚手架",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "http://172.18.10.96/260613/roki-ui.git",
+    "directory": "packages/create-roki"
+  },
+  "bin": {
+    "create-roki-app": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "kolorist": "^1.8.0",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.2",
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/templates/h5/.env.development ADDED Viewed

	@@ -0,0 +1 @@
1	+ VITE_BASE_API=

package/templates/h5/index.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- viewport-fit=cover 必须，否则 iOS 刘海屏 safe-area-inset-top 为 0 -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"
+    />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="apple-touch-fullscreen" content="yes" />
+    <title>__PROJECT_NAME__</title>
+  </head>
+  <body>
+    <div id="app" class="roki-reset"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/h5/package.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "name": "__PROJECT_NAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@roki-h5/ui": "^0.1.0",
+    "axios": "^1.7.9",
+    "pinia": "^2.3.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "postcss-pxtorem": "^6.1.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
+    "vue-tsc": "^2.1.10"
+  }
+}

package/templates/h5/postcss.config.js ADDED Viewed

@@ -0,0 +1,17 @@
+import autoprefixer from 'autoprefixer'
+import postcssPxtorem from 'postcss-pxtorem'
+export default {
+  plugins: [
+    autoprefixer(),
+    postcssPxtorem({
+      rootValue: 37.5,
+      unitPrecision: 6,
+      propList: ['*'],
+      selectorBlackList: ['#app', '.ignore-vw'],
+      replace: true,
+      mediaQuery: false,
+      minPixelValue: 1,
+    }),
+  ],
+}

package/templates/h5/src/App.vue ADDED Viewed

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

package/templates/h5/src/api/index.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { devReq } from './request'
+/** 示例：可按业务拆分 api 模块 */
+export function fetchExample() {
+  return devReq({
+    url: '/example',
+    method: 'get',
+  })
+}

package/templates/h5/src/api/request.ts ADDED Viewed

@@ -0,0 +1,78 @@
+import axios, { type AxiosRequestConfig } from 'axios'
+import { useAppStore } from '@/stores'
+function isRequestTimeout(error: unknown) {
+  if (!error || typeof error !== 'object') return false
+  const err = error as {
+    code?: string
+    message?: string
+    name?: string
+  }
+  return (
+    err.code === 'ECONNABORTED' ||
+    err.code === 'ETIMEDOUT' ||
+    (typeof err.message === 'string' &&
+      (err.message.toLowerCase().includes('timeout') ||
+        err.message.toLowerCase().includes('timed out'))) ||
+    err.name === 'TimeoutError'
+  )
+}
+function showError(message: string) {
+  console.warn('[API]', message)
+}
+/** 业务请求封装，成功条件：rc === 0 或 success === true */
+export function devReq<T = unknown>(config: AxiosRequestConfig) {
+  return new Promise<T>((resolve, reject) => {
+    const appStore = useAppStore()
+    const instance = axios.create({
+      headers: {
+        'Content-Type': 'application/json;charset=UTF-8',
+        'app-id': 'roki_app_h5',
+        Authorization: `Bearer ${appStore.accessToken}`,
+      },
+      timeout: 10000,
+      baseURL: config.baseURL || import.meta.env.VITE_BASE_API,
+    })
+    instance(config)
+      .then((res) => {
+        const data = res.data as {
+          rc?: number
+          success?: boolean
+          msg?: string
+          message?: string
+          error_description?: string
+          error?: string
+        }
+        const ok = data.rc === 0 || data.success
+        if (ok) {
+          resolve(res.data as T)
+          return
+        }
+        const errMsg =
+          data.msg ||
+          data.message ||
+          data.error_description ||
+          data.error ||
+          '请求失败'
+        showError(errMsg)
+        reject(errMsg)
+      })
+      .catch((err) => {
+        if (err.response?.status === 0) {
+          reject(err)
+          return
+        }
+        if (isRequestTimeout(err)) {
+          showError('请求超时，请检查网络状态')
+          reject(err)
+          return
+        }
+        const desc = err.response?.data?.error_description
+        showError(desc || '请求异常')
+        reject(err)
+      })
+  })
+}

package/templates/h5/src/assets/images/top-bg.png ADDED Viewed

Binary file

package/templates/h5/src/assets/styles/main.css ADDED Viewed

@@ -0,0 +1,21 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: #f5f6f8;
+}
+#app {
+  min-height: 100vh;
+  min-height: 100dvh;
+  position: relative;
+  isolation: isolate;
+  background:
+    url('../images/top-bg.png') no-repeat top center / 100% 800px,
+    #f0f2f5;
+}
+.page {
+  min-height: 100vh;
+  min-height: 100dvh;
+}

package/templates/h5/src/main.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import RokiUI from '@roki-h5/ui'
+import '@roki-h5/ui/style.css'
+import { setupRem } from '@/utils/rem'
+import router from '@/router'
+import App from './App.vue'
+import '@/assets/styles/main.css'
+setupRem()
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.use(RokiUI)
+app.mount('#app')

package/templates/h5/src/router/index.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import Home from '@/views/home/index.vue'
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: Home,
+      meta: { title: '__PROJECT_NAME__' },
+    },
+  ],
+  scrollBehavior: () => ({ top: 0 }),
+})
+router.afterEach((to) => {
+  const title = to.meta?.title
+  if (title != null && title !== '') {
+    document.title = String(title)
+  }
+})
+export default router

package/templates/h5/src/stores/index.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+export const useAppStore = defineStore('app', () => {
+  const accessToken = ref('')
+  function setAccessToken(token: string) {
+    accessToken.value = token
+  }
+  return {
+    accessToken,
+    setAccessToken,
+  }
+})

package/templates/h5/src/utils/debounce.ts ADDED Viewed

@@ -0,0 +1,20 @@
+export function debounce<T extends (...args: unknown[]) => unknown>(
+  fn: T,
+  wait: number,
+  options: { leading?: boolean; trailing?: boolean } = {},
+) {
+  const { leading = false, trailing = true } = options
+  let timer: ReturnType<typeof setTimeout> | null = null
+  return function debounced(this: unknown, ...args: Parameters<T>) {
+    const invoke = () => {
+      timer = null
+      if (trailing) fn.apply(this, args)
+    }
+    const callNow = leading && !timer
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(invoke, wait)
+    if (callNow) fn.apply(this, args)
+  }
+}

package/templates/h5/src/utils/rem.ts ADDED Viewed

@@ -0,0 +1,37 @@
+/** 375 设计稿 rem 自适应 */
+export function setupRem() {
+  const baseSize = 37.5
+  const designWidth = 375
+  let lastWidth = window.innerWidth
+  let timer: ReturnType<typeof setTimeout> | null = null
+  function setRem() {
+    const isLandscape = window.innerWidth > window.innerHeight
+    const baseWidth = isLandscape ? window.innerHeight : window.innerWidth
+    const maxWidth = 375
+    const limitedWidth = Math.min(baseWidth, maxWidth)
+    const scale = limitedWidth / designWidth
+    const fontSize = baseSize * Math.min(scale, 2)
+    document.documentElement.style.fontSize = `${fontSize}px`
+  }
+  function debounceSetRem() {
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(setRem, 100)
+  }
+  setRem()
+  window.addEventListener('resize', () => {
+    if (lastWidth !== window.innerWidth) {
+      lastWidth = window.innerWidth
+      debounceSetRem()
+    }
+  })
+  window.addEventListener('orientationchange', debounceSetRem)
+  window.addEventListener('pageshow', (event) => {
+    if (event.persisted) setRem()
+  })
+}

package/templates/h5/src/views/home/index.vue ADDED Viewed

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+function onBack() {
+  history.back()
+}
+function onMore() {
+  console.log('more')
+}
+</script>
+<template>
+  <div class="page home-page">
+    <RokiNavBar title="__PROJECT_NAME__" @click-left="onBack">
+      <template #right>
+        <span
+          role="button"
+          tabindex="0"
+          class="home-page__more"
+          aria-label="更多"
+          @click.stop="onMore"
+        >
+          ⋯
+        </span>
+      </template>
+    </RokiNavBar>
+    <main class="home-page__content">
+      <p class="home-page__tip">向下滚动，导航栏背景会从透明渐变为白色。</p>
+      <div class="home-page__spacer" />
+    </main>
+  </div>
+</template>
+<style scoped>
+.home-page__content {
+  padding: 24px 18px;
+}
+.home-page__tip {
+  margin: 0;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+  line-height: 1.6;
+}
+.home-page__more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  font-size: 20px;
+  line-height: 1;
+  color: rgba(0, 0, 0, 0.85);
+}
+.home-page__spacer {
+  height: 120vh;
+}
+</style>

package/templates/h5/src/vite-env.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_BASE_API: string
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/templates/h5/tsconfig.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}

package/templates/h5/vite.config.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  server: {
+    host: true,
+    port: 5173,
+  },
+})