Merge pull request #4 from Aisen60/0.2.2

0.2.2

.env.deploy

@@ -0,0 +1,13 @@
+# # node 环境
+# NODE_ENV=production
+VITE_BASE=/
+#APP 运行环境
+VITE_APP_ENV=production
+# 是否开启 vconsole
+VITE_APP_VCONSOLE_ENABLED=true
+# 是否启用 gzip 或 brotli 压缩
+# 可选性: gzip | brotli | none
+# 如果需要多个，可以使用逗号分隔
+VITE_APP_BUILD_COMPRESS=gzip
+# 使用压缩时是否删除源文件，默认为 false
+VITE_APP_BUILD_COMPRESS_DELETE_ORIGIN_FILE=false

.github/workflows/deploy-gh-pages.yml

@@ -0,0 +1,35 @@
+name: Deploy site by main branch to gh pages
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-20.04
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    steps:
+      - name: Checkout main branch code
+        uses: actions/checkout@v3
+        with:
+          ref: main
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build project
+        run: npm run build
+
+      - name: Deploy gh page
+        uses: peaceiris/actions-gh-pages@v3
+        if: ${{ github.ref == 'refs/heads/main' }}
+        with:
+          github_token: ${{ secrets.GH_PAGES }}
+          publish_dir: ./dist

.github/workflows/deploy-website.yml

@@ -1,37 +1,23 @@
-name: Deploy Site By main Branch
+name: Deploy site by main branch to server
 
 on:
   workflow_dispatch:
   push:
     branches: [main]
-  schedule:
-    - cron: "0 21 * * *"
 
 jobs:
-  deploy:
-    runs-on: ubuntu-20.04
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}
+  main-branch-deploy:
+    runs-on: ubuntu-latest
     steps:
-      - name: Checkout main branch code
-        uses: actions/checkout@v3
+      - name: Deploy
+        uses: appleboy/ssh-action@master
         with:
-          ref: main
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: '18'
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Build project
-        run: npm run build
-
-      - name: Deploy gh page
-        uses: peaceiris/actions-gh-pages@v3
-        if: ${{ github.ref == 'refs/heads/main' }}
-        with:
-          github_token: ${{ secrets.GH_PAGES }}
-          publish_dir: ./dist
+          host: ${{ secrets.HOST }}
+          port: ${{ secrets.PORT }}
+          username: ${{ secrets.USERNAME }}
+          password: ${{ secrets.PASSWORD }}
+          script: |
+            cd /opt/cxs/vue3-h5-template
+            git pull origin main
+            pnpm install
+            npm run build:deploy

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 aisen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-h5-template",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "A mobile development template built on Vite, Vue3, TypeScript, Vue Router, Pinia, Vant 4, etc.",
   "license": "MIT",
   "author": {
@@ -30,6 +30,7 @@
     "build:sit": "npm run type-check && vite build --mode sit",
     "build:uat": "npm run type-check && vite build --mode uat",
     "build:prod": "npm run type-check && vite build",
+    "build:deploy": "npm run type-check && vite build --mode deploy",
     "preview": "vite preview --port 4173",
     "type-check": "vue-tsc --noEmit",
     "lint:eslint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
@@ -47,6 +48,7 @@
     "lodash-es": "^4.17.21",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "umi-request": "^1.4.0",
     "vant": "^4.8.7",
     "vconsole": "^3.15.1",

src/layout/index.vue

@@ -17,6 +17,17 @@
             />
           </template>
 
+          <template #nav-info="{ props }">
+            <SvgIcon
+              name="nav-info"
+              :color="
+                props.active
+                  ? 'var(--van-tabbar-item-active-color) '
+                  : 'var(--van-tabbar-item-text-color)'
+              "
+            />
+          </template>
+
           <template #nav-theme="{ props }">
             <SvgIcon
               :name="appStore.theme === 'dark' ? 'nav-light' : 'nav-dark'"
@@ -83,6 +94,13 @@ const tabberOption: LayoutNavProps['option'] = [
       name: 'Home'
     }
   },
+  {
+    title: '项目信息',
+    name: 'nav-info',
+    to: {
+      name: 'Info'
+    }
+  },
   {
     title: '请求',
     name: 'nav-fetch',

src/main.ts

@@ -1,12 +1,12 @@
-import { createPinia } from 'pinia';
 import { createApp } from 'vue';
 import 'virtual:svg-icons-register';
 import App from './App.vue';
-import { router } from './router';
+import { setupRouter } from './router';
+import { setupStore } from './stores';
 import './styles';
 
 const app = createApp(App);
-app.use(createPinia());
-app.use(router);
+setupRouter(app);
+setupStore(app);
 
 app.mount('#app');

src/router/router.config.ts

@@ -13,6 +13,12 @@ export const routes: RouteRecordRaw[] = [
         component: () => import('@/views/index.vue'),
         meta: { title: '主页', showTab: true }
       },
+      {
+        path: '/info',
+        name: 'Info',
+        component: () => import('@/views/info.vue'),
+        meta: { title: '项目', showTab: true }
+      },
       {
         path: '/fetch',
         name: 'Fetch',

src/stores/index.ts

@@ -1,7 +1,10 @@
 import { createPinia } from 'pinia';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+
 import type { App } from 'vue';
 
 export const store = createPinia();
+store.use(piniaPluginPersistedstate);
 
 export const setupStore = (app: App<Element>) => {
   app.use(store);

src/stores/modules/app.ts

@@ -6,34 +6,40 @@ import { store } from '@/stores';
 
 import type { AppTheme } from '@/types';
 
-export const useAppStore = defineStore('appStore', () => {
-  const systemDark = usePreferredDark();
-
-  const theme = ref(useStorage<AppTheme>(AppEnum.APP_THEME, systemDark.value ? 'dark' : 'light'));
-
-  const setTheme = (appTheme: AppTheme) => {
-    theme.value = appTheme;
-  };
-
-  const watchTheme = () => {
-    watch(
-      () => theme.value,
-      (val) => {
-        document.documentElement.setAttribute('theme', val);
-      },
-      {
-        immediate: true
-      }
-    );
-  };
-
-  return {
-    systemDark,
-    theme,
-    setTheme,
-    watchTheme
-  };
-});
+export const useAppStore = defineStore(
+  'appStore',
+  () => {
+    const systemDark = usePreferredDark();
+
+    const theme = ref(useStorage<AppTheme>(AppEnum.APP_THEME, systemDark.value ? 'dark' : 'light'));
+
+    const setTheme = (appTheme: AppTheme) => {
+      theme.value = appTheme;
+    };
+
+    const watchTheme = () => {
+      watch(
+        () => theme.value,
+        (val) => {
+          document.documentElement.setAttribute('theme', val);
+        },
+        {
+          immediate: true
+        }
+      );
+    };
+
+    return {
+      systemDark,
+      theme,
+      setTheme,
+      watchTheme
+    };
+  },
+  {
+    persist: true
+  }
+);
 
 export const useAppStoreWithOut = () => {
   return useAppStore(store);