ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init项目

Browse Source
This commit is contained in:
hongawen
2024-08-07 21:48:57 +08:00
parent 1581a5aaf5
commit ee58452db1
19 changed files with 428 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

105
frontend/index.html Normal file
View File

@@ -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>

41
frontend/package.json Normal file
View File

@@ -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"
}
}

6
frontend/postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

13
frontend/src/api/main.js Normal file
View File

@@ -0,0 +1,13 @@
/**
* 主进程与渲染进程通信频道定义
* Definition of communication channels between main process and rendering process
*/
const ipcApiRoute = {
test: 'controller.example.test',
}
export {
ipcApiRoute
}

BIN
frontend/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

3
frontend/src/assets/styles/tailMain.css Normal file
View File

@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

2
frontend/src/constants/localStore.ts Normal file
View File

@@ -0,0 +1,2 @@
/*文件说明：本文件用来定义一些本地缓存的key*/

37
frontend/src/main.ts Normal file
View File

@@ -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')
})

20
frontend/src/router/index.ts Normal file
View File

@@ -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

15
frontend/src/router/routerMap.ts Normal file
View File

@@ -0,0 +1,15 @@
import Login from '@/views/Login.vue'
/**
* 基础路由
* @type { *[] }
*/
const constantRouterMap = [
{
path: '/',
name: 'login',
component: Login
},
]
export default constantRouterMap

33
frontend/src/utils/ipcRenderer.js Normal file
View File

@@ -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
};

15
frontend/src/views/Child.vue Normal file
View File

@@ -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>

36
frontend/src/views/Login.vue Normal file
View File

@@ -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>

9
frontend/tailwind.config.js Normal file
View File

@@ -0,0 +1,9 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ["index.html", "./src/**/*.{html,js,ts,jsx,tsx,vue}"],
theme: {
extend: {},
},
plugins: [],
}

13
frontend/tsconfig.app.json Normal file
View File

@@ -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/*"]
}
}
}

16
frontend/tsconfig.json Normal file
View File

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

19
frontend/tsconfig.node.json Normal file
View File

@@ -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"]
}
}

44
frontend/vite.config.ts Normal file
View File

@@ -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,
},
},
},
})