Initial commit

2023-12-02 23:23:17 +08:00 · 2023-12-02 23:23:17 +08:00 · f0a3eb47af
commit f0a3eb47af
29 changed files with 2243 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+  ],
+  rules: {
+    'vue/multi-word-component-names': 'off',
+  },
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -0,0 +1,69 @@
+# essentials
+
+## Project setup
+
+```
+# yarn
+yarn
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# bun 
+bun install
+```
+
+### Compiles and hot-reloads for development
+
+```
+# yarn
+yarn dev
+
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# bun 
+bun run dev
+```
+
+### Compiles and minifies for production
+
+```
+# yarn
+yarn build
+
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# bun 
+bun run build
+```
+
+### Lints and fixes files
+
+```
+# yarn
+yarn lint
+
+# npm
+npm run lint
+
+# pnpm
+pnpm lint
+
+# bun 
+bun run lint
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://vitejs.dev/config/).
--- a/index.html
+++ b/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Welcome to Vuetify 3</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,34 @@
+{
+  "name": "vuetify-project",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "core-js": "^3.29.0",
+    "pinia": "^2.0.0",
+    "roboto-fontface": "*",
+    "vue": "^3.2.0",
+    "vue-router": "^4.0.0",
+    "vuetify": "^3.0.0"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.21.4",
+    "@mdi/font": "^7.3.67",
+    "@types/node": "^18.15.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "eslint": "^8.37.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "sass": "^1.60.0",
+    "typescript": "^5.0.0",
+    "unplugin-fonts": "^1.0.3",
+    "vite": "^4.2.0",
+    "vite-plugin-vuetify": "^1.0.0",
+    "vue-tsc": "^1.2.0"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,7 @@
+<template>
+  <router-view />
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@ -0,0 +1,6 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
+<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
+<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
+<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
+</svg>
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,75 @@
+<template>
+  <v-container class="fill-height">
+    <v-responsive class="align-center text-center fill-height">
+      <v-img height="300" src="@/assets/logo.svg" />
+
+      <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
+
+      <h1 class="text-h2 font-weight-bold">Vuetify</h1>
+
+      <div class="py-14" />
+
+      <v-row class="d-flex align-center justify-center">
+        <v-col cols="auto">
+          <v-btn
+            href="https://vuetifyjs.com/components/all/"
+            min-width="164"
+            rel="noopener noreferrer"
+            target="_blank"
+            variant="text"
+          >
+            <v-icon
+              icon="mdi-view-dashboard"
+              size="large"
+              start
+            />
+
+            Components
+          </v-btn>
+        </v-col>
+
+        <v-col cols="auto">
+          <v-btn
+            color="primary"
+            href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
+            min-width="228"
+            rel="noopener noreferrer"
+            size="x-large"
+            target="_blank"
+            variant="flat"
+          >
+            <v-icon
+              icon="mdi-speedometer"
+              size="large"
+              start
+            />
+
+            Get Started
+          </v-btn>
+        </v-col>
+
+        <v-col cols="auto">
+          <v-btn
+            href="https://community.vuetifyjs.com/"
+            min-width="164"
+            rel="noopener noreferrer"
+            target="_blank"
+            variant="text"
+          >
+            <v-icon
+              icon="mdi-account-group"
+              size="large"
+              start
+            />
+
+            Community
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-responsive>
+  </v-container>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
--- a/src/layouts/default/AppBar.vue
+++ b/src/layouts/default/AppBar.vue
@ -0,0 +1,25 @@
+<template>
+  <v-app>
+    <v-navigation-drawer v-model="drawer">
+      <div class="pa-3">
+        <v-btn
+          density="default"
+          icon="mdi-close"
+          @click="drawer = !drawer"
+        ></v-btn>
+      </div>
+    </v-navigation-drawer>
+
+    <v-app-bar>
+      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+
+      <v-app-bar-title>Application</v-app-bar-title>
+    </v-app-bar>
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const drawer = ref(false);
+</script>
--- a/src/layouts/default/Default.vue
+++ b/src/layouts/default/Default.vue
@ -0,0 +1,30 @@
+<template>
+  <v-app>
+    <v-theme-provider :theme="theme" with-background>
+      <default-bar />
+
+      <default-view />
+    </v-theme-provider>
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+import DefaultBar from "./AppBar.vue";
+import DefaultView from "./View.vue";
+
+import { ref } from "vue";
+
+const theme = ref("dark");
+
+// 创建一个函数来更新主题
+function updateTheme() {
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+  theme.value = prefersDark ? "dark" : "light";
+}
+
+updateTheme();
+window
+  .matchMedia("(prefers-color-scheme: dark)")
+  .addEventListener("change", updateTheme);
+</script>
--- a/src/layouts/default/View.vue
+++ b/src/layouts/default/View.vue
@ -0,0 +1,9 @@
+<template>
+  <v-main>
+    <router-view />
+  </v-main>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,20 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './App.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')
--- a/src/plugins/http.ts
+++ b/src/plugins/http.ts
@ -0,0 +1,52 @@
+import axios from "axios";
+// import router from "@/router";
+import {useUserStore} from "@/stores/user";
+// const config = useConfigStore()
+import config from "@/plugins/config"
+
+let axios_config = {
+    baseURL: config.baseUrl,
+    timeout: 100000,
+}
+
+
+// 实例
+let instance = axios.create(axios_config);
+
+instance.interceptors.request.use(
+    (config) => {
+        if (config.headers === undefined) {
+            // config.headers = {};
+        }
+        const user = useUserStore()
+
+        config.headers["Accept"] = "application/json";
+
+        // @ts-ignore
+        if (process.env.NODE_ENV === "development") {
+            // user.jwt_token 取中间
+            config.headers["X-Jwt-Payload"] = user.jwt_token?.split(".")[1]
+        } else {
+            config.headers["Authorization"] = "Bearer " + user.jwt_token;
+        }
+
+        return config;
+    },
+    (error) => {
+        console.error("axios request error", error);
+        return Promise.reject(error);
+    }
+);
+
+instance.interceptors.response.use(
+    (res) => {
+        return Promise.resolve(res);
+    },
+    (error) => {
+        console.error("axios response error", error);
+
+        return Promise.reject(error);
+    }
+);
+
+export default instance;
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@ -0,0 +1,20 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Plugins
+import vuetify from './vuetify'
+import pinia from '../store'
+import router from '../router'
+
+// Types
+import type { App } from 'vue'
+
+export function registerPlugins (app: App) {
+  app
+    .use(vuetify)
+    .use(router)
+    .use(pinia)
+}
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@ -0,0 +1,35 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// lang
+import { pl, zhHans } from 'vuetify/locale'
+
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    themes: {
+      light: {
+        colors: {
+          primary: '#1867C0',
+          secondary: '#5CBBF6',
+        },
+      },
+    },
+  },
+  locale: {
+    locale: 'zhHans',
+    fallback: 'sv',
+    messages: { zhHans, pl },
+  },
+})
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -0,0 +1,26 @@
+// Composables
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('@/layouts/default/Default.vue'),
+    children: [
+      {
+        path: '',
+        name: 'Home',
+        // route level code-splitting
+        // this generates a separate chunk (Home-[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: () => import('@/views/Home.vue'),
+      },
+    ],
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+})
+
+export default router
--- a/src/store/app.ts
+++ b/src/store/app.ts
@ -0,0 +1,8 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    //
+  }),
+})
--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -0,0 +1,4 @@
+// Utilities
+import { createPinia } from 'pinia'
+
+export default createPinia()
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@ -0,0 +1,10 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify/settings' with (
+//   $color-pack: false
+// );
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -0,0 +1,7 @@
+<template>
+  <HelloWorld />
+</template>
+
+<script lang="ts" setup>
+  import HelloWorld from '@/components/HelloWorld.vue'
+</script>
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "allowSyntheticDefaultImports": true,
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": false,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "types": [
+      "node",
+      "vuetify"
+    ],
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "vite.config.ts"
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,44 @@
+// Plugins
+import vue from '@vitejs/plugin-vue'
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import ViteFonts from 'unplugin-fonts/vite'
+
+// Utilities
+import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from 'node:url'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue({
+      template: { transformAssetUrls },
+    }),
+    // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+    vuetify({
+      autoImport: true,
+      styles: {
+        configFile: 'src/styles/settings.scss',
+      },
+    }),
+    ViteFonts({
+      google: {
+        families: [
+          {
+            name: 'Roboto',
+            styles: 'wght@100;300;400;500;700;900',
+          },
+        ],
+      },
+    }),
+  ],
+  define: { 'process.env': {} },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
+  },
+  server: {
+    port: 3000,
+  },
+})
--- a/yarn.lock
+++ b/yarn.lock