@yyp92-cli/template-vue-mobile 1.1.0

package/template/src/store/login/index.ts

@@ -0,0 +1,67 @@
+import {defineStore} from 'pinia'
+import { localCache } from '@/utils/cache'
+import { LOGIN_TOKEN, PERMISSION, USER_INFO, MENUS } from '@/global/constants'
+import {routes} from '@/router/routes'
+
+interface LoginState {
+    token: string,
+    userInfo: any,
+    userMenus: any,
+    permissions: string[]
+}
+
+const useLoginStore = defineStore(
+    'login',
+    {
+        state: (): LoginState => ({
+            token: '',
+            userInfo: {},
+            userMenus: [],
+            permissions: []
+        }),
+
+        actions: {
+            async loginAccountAction(account: any) {
+                try {
+                    setTimeout(() => {
+                        const menus = routes[0].children.filter((item: any) => !item.meta.hideMenu)
+                        const promissions = routes[0].children.map((item: any) => item.path)
+                        this.userMenus = menus
+
+                        localCache.setCache(MENUS, menus)
+                        localCache.setCache(PERMISSION, promissions)
+                    }, 3000)
+                }
+                catch(error) {
+                    return error
+                }
+
+                return 'ok'
+            },
+
+            // 用户进行刷新默认加载数据
+            loadLocalCacheAction() {
+                const token = localCache.getCache(LOGIN_TOKEN)
+                const userInfo = localCache.getCache(USER_INFO)
+                const userMenus = localCache.getCache(MENUS)
+                const permission = localCache.getCache(PERMISSION)
+
+                this.token = token
+                this.userInfo = userInfo
+                this.userMenus = userMenus
+                // 获取登录用户的所有按钮的权限
+                this.permissions = permission
+
+                // if (token && userInfo && userMenus) {
+                //     this.token = token
+                //     this.userInfo = userInfo
+                //     this.userMenus = userMenus
+                //     // 获取登录用户的所有按钮的权限
+                //     this.permissions = permission
+                // }
+            }
+        }
+    }
+)
+
+export default useLoginStore

package/template/src/styles/global.scss

@@ -0,0 +1,32 @@
+html,
+body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+#app {
+    width: 100%;
+    height: 100%;
+    background: var(--bg-white-color);
+}
+
+*:focus-visible {
+    outline: none;
+}
+
+
+// element-plus 组件库的样式重写
+
+
+// 滚动条
+// ::-webkit-scrollbar {
+//     width: 8px;
+//     height: 8px;
+// } 
+// ::-webkit-scrollbar-thumb {
+//     border-radius: 6px;
+//     background-color: #dde6f0;
+//     border: 2px dashed transparent;
+//     background-clip: padding-box;
+// }

package/template/src/styles/index.scss

@@ -0,0 +1,4 @@
+@use "@/theme/lightTheme.scss" as *;
+@use "@/theme/darkTheme.scss" as *;
+@use "@/styles/global.scss" as *;
+@use "@/styles/reset.scss" as *;

package/template/src/styles/reset.scss

@@ -0,0 +1,17 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+*:focus-visible {
+    outline: none;
+}
+
+ul,
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}

package/template/src/theme/darkTheme.scss

@@ -0,0 +1,51 @@
+:root[data-theme="dark"] {
+    --primary-text-color: #FFFFFF;
+    --primary-white-color: #2A2A2D;
+
+    // 全局主色
+    --primary-color: #3591F4;
+    --primary-color1: rgba(53, 145, 244, 0.1);
+    // 链接色
+    --link-color: #3591F4;
+    // 成功色
+    --success-color: #0CAA43;
+    --success-color1: rgba(12, 170, 67, 0.1);
+    // 警告色
+    --warning-color: #FFA00A;
+    --warning-color1: rgba(255, 160, 10, 0.1);
+    // 错误色
+    --error-color: #F43835;
+    --error-color1: rgba(244, 56, 53, 0.1);
+
+    // 主文本色
+    --text-color: #FFFFFF;
+    // 次文本色
+    --text-color-secondary: #898D97;
+
+    // 白的背景
+    --bg-white-color: #1C1C1C;
+    --bg-grey-color: #161616;
+    --bg-grey-color1: transparent;
+    --bg-black2-color: #222222;
+    --bg-hover-color: rgba(53, 145, 244, 0.1);
+    --bg-white-color1: rgba(0, 0, 0, 0.5);
+
+    // 边框、输入框、分割线
+    --border-color-base: #2A2A2D;
+    // icon
+    --icon-color: #898D97;
+
+    // 主字号
+    --font-size-base: 14px;
+  
+    // 组件/浮层圆角
+    --border-radius-base: 4px;
+    --modal-border-radius-base: 5px;
+  
+    // 阴影
+    --box-shadow-color: #000000;
+
+    
+    // 大屏主题
+    --screen-text-color: #29fcff;
+}

package/template/src/theme/lightTheme.scss

@@ -0,0 +1,53 @@
+:root[data-theme="light"] {
+    --primary-text-color: #FFFFFF;
+    --primary-white-color: #FFFFFF;
+  
+    // 全局主色
+    --primary-color: #3591F4;
+    --primary-color1: rgba(53, 145, 244, 0.1);
+    // 链接色
+    --link-color: var(--primary-color);
+    // 成功色
+    --success-color: #0CAA43;
+    --success-color1: rgba(12, 170, 67, 0.1);
+    // 警告色
+    --warning-color: #FFA00A;
+    --warning-color1: rgba(255, 160, 10, 0.1);
+    // 错误色
+    --error-color: #F43835;
+    --error-color1: rgba(244, 56, 53, 0.1);
+  
+    // 主文本色
+    --text-color: #363A45; 
+    // 次文本色
+    --text-color-secondary: #898D97; 
+  
+    // 白的背景
+    --bg-white-color: var(--primary-white-color);
+    --bg-grey-color: #F2F4F9;
+    --bg-grey-color1: var(--bg-grey-color);
+    --bg-black2-color: var(--primary-white-color);
+    --bg-hover-color: rgba(53, 145, 244, 0.1);
+    --bg-white-color1: rgba(255, 255, 255, 0.5);
+  
+    // 边框、输入框、分割线
+    --border-color-base: #DDE6F0;
+    // icon
+    --icon-color: #CCD6DD;
+  
+  
+  
+    // 主字号
+    --font-size-base: 14px;
+  
+    // 组件/浮层圆角
+    --border-radius-base: 4px;
+    --modal-border-radius-base: 5px;
+  
+    // 阴影
+    --box-shadow-color: #000000;
+
+
+    // 大屏主题
+    --screen-text-color: #29fcff;
+}

package/template/src/utils/cache.ts

@@ -0,0 +1,44 @@
+enum CacheType {
+    Local,
+    Session
+}
+
+class Cache {
+    storage: Storage
+
+    constructor(type: CacheType) {
+        this.storage = type === CacheType.Local
+            ? localStorage
+            : sessionStorage
+    }
+
+    setCache(key: string, value: any) {
+        if (value) {
+            this.storage.setItem(key, JSON.stringify(value))
+        }
+    }
+
+    getCache(key: string) {
+        const value = this.storage.getItem(key)
+
+        if (value) {
+            return JSON.parse(value)
+        }
+    }
+
+    removeCache(key: string) {
+        this.storage.removeItem(key)
+    }
+
+    clear() {
+        this.storage.clear()
+    }
+}
+
+const localCache = new Cache(CacheType.Local)
+const sessionCache = new Cache(CacheType.Session)
+
+export {
+    localCache,
+    sessionCache
+}

package/template/src/utils/download.ts

@@ -0,0 +1,27 @@
+import {isFunction} from 'lodash-es'
+
+// 下载文件
+export const downloadFile = (
+    output: any,
+    downloadFileName: string = '未命名文件',
+    handleCancel: () => void = () => {}
+) => {
+    if (!output && isFunction(handleCancel)) {
+        handleCancel()
+        return
+    }
+  
+    fetch(output, {responseType: 'blob'} as any)
+        .then((res: any) => res?.blob?.())
+        .then((res: any) => {
+            const link = document.createElement('a')
+            link.href = window.URL.createObjectURL(res)
+            link.download = downloadFileName
+            link.style.display = 'none'
+            document.body.appendChild(link)
+            link.click()
+        })
+        .finally(() => {
+            isFunction(handleCancel) && handleCancel()
+        })
+}

package/template/src/utils/format.ts

@@ -0,0 +1,10 @@
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+
+dayjs.extend(utc)
+
+export function formatUTC(utcString: string, format: string = 'YYYY-MM-DD HH:mm:ss') {
+    const time = dayjs.utc(utcString).utcOffset(8).format(format)
+
+    return time
+}

package/template/src/utils/index.ts

@@ -0,0 +1,22 @@
+// 主题切换
+export const changeTheme = (isDark: boolean) => {
+    // 获取根元素
+    const root = document.documentElement;
+
+    if (!isDark) {
+        // 修改 data-theme 属性的值为 "light"
+        root.setAttribute('data-theme', 'light');
+        return
+    }
+
+    // 修改 data-theme 属性的值为 "dark"
+    root.setAttribute('data-theme', 'dark');
+}
+
+
+// 获取本地权限
+export const getLocalPromission = (routes: any[]) => {
+    const promissions = routes[0].children.map((item: any) => item.path)
+
+    return promissions
+}

package/template/src/views/403/index.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="page403">
+        <van-empty description="您没有权限访问该页面！" />
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Page403"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .page403 {
+        width: 100%;
+        height: 100%;
+        background: var(--bg-white-color);
+    }
+</style>

package/template/src/views/404/index.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="page404">
+        <van-empty description="您访问该页面不存在！">
+            <van-button
+                round
+                type="primary"
+                @click="goHome"
+            >跳转到首页</van-button>
+        </van-empty>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Page404"
+>
+    import router from '@/router/index'
+
+    function goHome() {
+        router.push('/home')
+    }
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .page404 {
+        width: 100%;
+        height: 100%;
+        background: var(--bg-white-color);
+    }
+</style>

package/template/src/views/detail/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="detail">
+        <h2>detail</h2>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Detail"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .detail {}
+</style>

package/template/src/views/home/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="home">
+        <h2>home</h2>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Home"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .home {}
+</style>

package/template/src/views/login/index.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="login">
+        <van-form @submit="onSubmit">
+            <van-cell-group inset>
+                <van-field
+                    v-model="username"
+                    name="username"
+                    label="用户名"
+                    placeholder="用户名"
+                    :rules="[{ required: true, message: '请填写用户名' }]"
+                />
+
+                <van-field
+                    v-model="password"
+                    type="password"
+                    name="password"
+                    label="密码"
+                    placeholder="密码"
+                    :rules="[{ required: true, message: '请填写密码' }]"
+                />
+            </van-cell-group>
+
+            <div style="margin: 16px;">
+                <van-button round block type="primary" native-type="submit">
+                提交
+                </van-button>
+            </div>
+        </van-form>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Login"
+>
+    import { ref } from 'vue'
+    import {useRoute} from 'vue-router'
+    import { showLoadingToast, closeToast } from 'vant'
+    import useLoginStore from '@/store/login'
+    import router from '@/router'
+
+    const route = useRoute()
+    const username = ref('')
+    const password = ref('')
+    const loginStore = useLoginStore()
+
+
+    const onSubmit = (values: any) => {
+        showLoadingToast({
+            message: '加载中...',
+            forbidClick: true,
+            duration: 0
+        })
+
+        loginStore.loginAccountAction(values)
+            .then((res: any) => {
+                if (res === 'ok') {
+                    // 判断登录的时候，路由路径当中是否有query参数，如果有就往query参数跳转，没有跳转到首页
+                    const redirect: any = route.query.redirect
+                    router.push({path: redirect || '/'})
+                }
+            })
+            .finally(() => {
+                closeToast()
+            })
+    }
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .login {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+</style>

package/template/src/views/message/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="message">
+        <h2>message</h2>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Message"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .message {}
+</style>

package/template/src/views/mine/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="mine">
+        <h2>mine</h2>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Mine"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .mine {}
+</style>

package/template/src/views/todo/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="todo">
+        <h2>todo</h2>
+    </div>
+</template>
+
+<script
+    setup
+    lang="ts"
+    name="Todo"
+>
+</script>
+
+<style
+    scoped
+    lang="scss"
+>
+    .todo {}
+</style>

package/template/src/vite-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="vite/client" />
+
+// * 为了解决 导入.tsx结尾的组件报错
+declare module '*.tsx'

package/template/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+    "extends": "@vue/tsconfig/tsconfig.dom.json",
+    "compilerOptions": {
+        "baseUrl": "./",
+        "paths": {
+            "@/*": [
+                "src/*"
+            ]
+        },
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "erasableSyntaxOnly": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "src/**/*.vue"
+    ]
+}

package/template/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/template/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}