init项目

2024-08-07 21:48:57 +08:00
parent 1581a5aaf5
commit ee58452db1
19 changed files with 428 additions and 0 deletions
--- a/frontend/env.d.ts
+++ b/frontend/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
+    <title></title>
+    <!-- 优化：vue渲染未完成之前，先加一个css动画 -->
+    <style>
+      #loadingPage {
+        background-color: #dedede;
+        font-size: 12px;
+      }
+      .base {
+        height: 9em;
+        left: 50%;
+        margin: -7.5em;
+        padding: 3em;
+        position: absolute;
+        top: 50%;
+        width: 9em;
+        transform: rotateX(45deg) rotateZ(45deg);
+        transform-style: preserve-3d;
+      }
+      .cube,
+      .cube:after,
+      .cube:before {
+        content: '';
+        float: left;
+        height: 3em;
+        position: absolute;
+        width: 3em;
+      }
+      /* Top */
+      .cube {
+        background-color: #06cf68;
+        position: relative;
+        transform: translateZ(3em);
+        transform-style: preserve-3d;
+        transition: .25s;
+        box-shadow: 13em 13em 1.5em rgba(0, 0, 0, 0.1);
+        animation: anim 1s infinite;
+      }
+      .cube:after {
+        background-color: #05a151;
+        transform: rotateX(-90deg) translateY(3em);
+        transform-origin: 100% 100%;
+      }
+      .cube:before {
+        background-color: #026934;
+        transform: rotateY(90deg) translateX(3em);
+        transform-origin: 100% 0;
+      }
+      .cube:nth-child(1) {
+        animation-delay: 0.05s;
+      }
+      .cube:nth-child(2) {
+        animation-delay: 0.1s;
+      }
+      .cube:nth-child(3) {
+        animation-delay: 0.15s;
+      }
+      .cube:nth-child(4) {
+        animation-delay: 0.2s;
+      }
+      .cube:nth-child(5) {
+        animation-delay: 0.25s;
+      }
+      .cube:nth-child(6) {
+        animation-delay: 0.3s;
+      }
+      .cube:nth-child(7) {
+        animation-delay: 0.35s;
+      }
+      .cube:nth-child(8) {
+        animation-delay: 0.4s;
+      }
+      .cube:nth-child(9) {
+        animation-delay: 0.45s;
+      }
+      @keyframes anim {
+        50% {
+          transform: translateZ(0.5em);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="loadingPage">
+      <div class='base'>
+        <div class='cube'></div>
+        <div class='cube'></div>
+        <div class='cube'></div>
+        <div class='cube'></div>
+        <div class='cube'></div>
+        <div class='cube'></div>
+        <div class='cube'></div>
+        <div class='cube'></div>
+        <div class='cube'></div>
+      </div>
+    </div>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host --port 18091",
+    "serve": "vite --host --port 18091",
+    "build-staging": "vite build --mode staging",
+    "build": "vite build",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "element-plus": "^2.7.8",
+    "pinia": "^2.1.7",
+    "vue": "^3.4.29",
+    "vue-router": "^4.3.3"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.14.14",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/tsconfig": "^0.5.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "npm-run-all2": "^6.2.0",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.7",
+    "typescript": "~5.4.0",
+    "vite": "^5.3.1",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "vue-tsc": "^2.0.21"
+  }
+}
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/frontend/src/api/main.js
+++ b/frontend/src/api/main.js
@@ -0,0 +1,13 @@
+
+/**
+ * 主进程与渲染进程通信频道定义
+ * Definition of communication channels between main process and rendering process
+ */
+const ipcApiRoute = {
+  test: 'controller.example.test',
+}
+
+export {
+  ipcApiRoute
+}
+
--- a/frontend/src/assets/logo.png
+++ b/frontend/src/assets/logo.png
--- a/frontend/src/assets/styles/tailMain.css
+++ b/frontend/src/assets/styles/tailMain.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/frontend/src/constants/localStore.ts
+++ b/frontend/src/constants/localStore.ts
@@ -0,0 +1,2 @@
+/*文件说明：本文件用来定义一些本地缓存的key*/
+
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -0,0 +1,37 @@
+
+import {createApp} from 'vue'
+// element-plus
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+
+// 使用pinia
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import Router from './router/index';
+
+// 引入tailwindcss
+import '@/assets/styles/tailMain.css'
+
+//创建实例
+const app = createApp(App)
+const setupAll = async () => {
+    app
+        .use(Router) // 使用路由
+        .use(ElementPlus) // 使用ele-plus组件
+        .use(createPinia()) // 使用pinia
+
+    // 自动引入图标
+    Object.keys(ElementPlusIconsVue).forEach((key) => {
+        app.component(key, ElementPlusIconsVue[key]);
+    });
+
+    //待路由初始化完毕后，挂载app
+    await Router.isReady()
+}
+
+//挂载app
+setupAll().then(() => {
+    app.mount('#app')
+})
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -0,0 +1,20 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import routerMap from './routerMap'
+
+const Router = createRouter({
+  history: createWebHashHistory(),
+  routes: routerMap,
+})
+
+
+Router.beforeEach((to, from, next) => {
+  next()
+})
+
+// 路由加载后
+Router.afterEach(() => {
+
+})
+
+
+export default Router
--- a/frontend/src/router/routerMap.ts
+++ b/frontend/src/router/routerMap.ts
@@ -0,0 +1,15 @@
+import Login from '@/views/Login.vue'
+
+/**
+ * 基础路由
+ * @type { *[] }
+ */
+const constantRouterMap = [
+  {
+    path: '/',
+    name: 'login',
+    component: Login
+  },
+]
+
+export default constantRouterMap
--- a/frontend/src/utils/ipcRenderer.js
+++ b/frontend/src/utils/ipcRenderer.js
@@ -0,0 +1,33 @@
+const Renderer = (window.require && window.require('electron')) || window.electron || {};
+
+/**
+ * ipc
+ * 官方api说明：https://www.electronjs.org/zh/docs/latest/api/ipc-renderer
+ * 
+ * 属性/方法
+ * ipc.invoke(channel, param) - 发送异步消息（invoke/handle 模型）
+ * ipc.sendSync(channel, param) - 发送同步消息（send/on 模型）
+ * ipc.on(channel, listener) - 监听 channel, 当新消息到达，调用 listener
+ * ipc.once(channel, listener) - 添加一次性 listener 函数
+ * ipc.removeListener(channel, listener) - 为特定的 channel 从监听队列中删除特定的 listener 监听者
+ * ipc.removeAllListeners(channel) - 移除所有的监听器，当指定 channel 时只移除与其相关的所有监听器
+ * ipc.send(channel, ...args) - 通过channel向主进程发送异步消息
+ * ipc.postMessage(channel, message, [transfer]) - 发送消息到主进程
+ * ipc.sendTo(webContentsId, channel, ...args) - 通过 channel 发送消息到带有 webContentsId 的窗口
+ * ipc.sendToHost(channel, ...args) - 消息会被发送到 host 页面上的 <webview> 元素
+ */
+
+/**
+ * ipc
+ */
+const ipc = Renderer.ipcRenderer || undefined;
+
+/**
+ * 是否为EE环境
+ */
+const isEE = ipc ? true : false;
+
+export {
+  Renderer, ipc, isEE
+};
+
--- a/frontend/src/views/Child.vue
+++ b/frontend/src/views/Child.vue
@@ -0,0 +1,15 @@
+<template>
+  <div></div>
+</template>
+<script setup lang='ts'>
+defineOptions({
+  name: "componentName"
+})
+import {ref, reactive} from 'vue'
+let select = ref(1)
+
+defineExpose({ select })
+</script>
+<style scoped>
+
+</style>
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -0,0 +1,36 @@
+<template>
+  <div ref="loginContent" class="text-xl text-red-600">
+    <!--用户名密码，暂时不做图形验证码-->
+    <h1 ref="loginTitle">123</h1>
+    <Child  ref="child"/>
+  </div>
+</template>
+
+<script setup lang='ts'>
+defineOptions({
+  name: "Login"
+})
+import {ref, reactive,onMounted} from 'vue'
+import Child from './Child.vue'
+let loginContent = ref()
+let loginTitle = ref()
+let child = ref()
+
+function showLog(){
+  console.log(child.value)
+}
+
+showLog()
+
+console.log(loginTitle.value);
+console.log(child.value);
+onMounted(() => {
+console.log(loginTitle.value);
+console.log(child.value);
+});
+
+
+</script>
+<style scoped>
+
+</style>
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["index.html", "./src/**/*.{html,js,ts,jsx,tsx,vue}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,13 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ],
+  "compilerOptions": {
+    "types": [
+      "node"
+    ]
+  }
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,44 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+  ],
+  // 基础配置
+  base: './',
+  publicDir: 'public',
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        modifyVars: {
+          '@border-color-base': '#dce3e8',
+        },
+        javascriptEnabled: true,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+    assetsInlineLimit: 4096,
+    cssCodeSplit: true,
+    brotliSize: false,
+    sourcemap: false,
+    minify: 'terser',
+    terserOptions: {
+      compress: {
+        // 生产环境去除console及debug
+        drop_console: false,
+        drop_debugger: true,
+      },
+    },
+  },
+})
				`@@ -0,0 +1,2 @@`
				`/文件说明：本文件用来定义一些本地缓存的key/`