44 changed files with 10447 additions and 314 deletions
@ -0,0 +1,9 @@ |
|||
root = true |
|||
|
|||
[*] |
|||
charset = utf-8 |
|||
indent_style = space |
|||
indent_size = 2 |
|||
end_of_line = lf |
|||
insert_final_newline = true |
|||
trim_trailing_whitespace = true |
|||
@ -1,25 +1,4 @@ |
|||
# Logs |
|||
logs |
|||
*.log |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
pnpm-debug.log* |
|||
lerna-debug.log* |
|||
|
|||
node_modules |
|||
dist |
|||
package-lock.json |
|||
dist-ssr |
|||
*.local |
|||
|
|||
# Editor directories and files |
|||
.vscode/* |
|||
!.vscode/extensions.json |
|||
.idea |
|||
.DS_Store |
|||
*.suo |
|||
*.ntvs* |
|||
*.njsproj |
|||
*.sln |
|||
*.sw? |
|||
out |
|||
*.log* |
|||
|
|||
@ -0,0 +1 @@ |
|||
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ |
|||
@ -0,0 +1,6 @@ |
|||
out |
|||
dist |
|||
pnpm-lock.yaml |
|||
LICENSE.md |
|||
tsconfig.json |
|||
tsconfig.*.json |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"singleQuote": true, |
|||
"semi": false, |
|||
"printWidth": 100, |
|||
"trailingComma": "none" |
|||
} |
|||
@ -1,7 +1,34 @@ |
|||
# base |
|||
# my-app |
|||
|
|||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
|||
An Electron application with Vue |
|||
|
|||
## Recommended IDE Setup |
|||
|
|||
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). |
|||
- [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) |
|||
|
|||
## Project Setup |
|||
|
|||
### Install（node 16.20.1） |
|||
|
|||
```bash |
|||
$ npm install |
|||
``` |
|||
|
|||
### Development |
|||
|
|||
```bash |
|||
$ npm run dev |
|||
``` |
|||
|
|||
### Build |
|||
|
|||
```bash |
|||
# For windows |
|||
$ npm run build:win |
|||
|
|||
# For macOS |
|||
$ npm run build:mac |
|||
|
|||
# For Linux |
|||
$ npm run build:linux |
|||
``` |
|||
|
|||
@ -0,0 +1,12 @@ |
|||
<?xml version="1.0" encoding="UTF-8"?> |
|||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> |
|||
<plist version="1.0"> |
|||
<dict> |
|||
<key>com.apple.security.cs.allow-jit</key> |
|||
<true/> |
|||
<key>com.apple.security.cs.allow-unsigned-executable-memory</key> |
|||
<true/> |
|||
<key>com.apple.security.cs.allow-dyld-environment-variables</key> |
|||
<true/> |
|||
</dict> |
|||
</plist> |
|||
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
@ -0,0 +1,36 @@ |
|||
const { notarize } = require('electron-notarize') |
|||
|
|||
module.exports = async (context) => { |
|||
if (process.platform !== 'darwin') return |
|||
|
|||
console.log('aftersign hook triggered, start to notarize app.') |
|||
|
|||
if (!process.env.CI) { |
|||
console.log(`skipping notarizing, not in CI.`) |
|||
return |
|||
} |
|||
|
|||
if (!('APPLE_ID' in process.env && 'APPLE_ID_PASS' in process.env)) { |
|||
console.warn('skipping notarizing, APPLE_ID and APPLE_ID_PASS env variables must be set.') |
|||
return |
|||
} |
|||
|
|||
const appId = 'com.electron.app' |
|||
|
|||
const { appOutDir } = context |
|||
|
|||
const appName = context.packager.appInfo.productFilename |
|||
|
|||
try { |
|||
await notarize({ |
|||
appBundleId: appId, |
|||
appPath: `${appOutDir}/${appName}.app`, |
|||
appleId: process.env.APPLE_ID, |
|||
appleIdPassword: process.env.APPLEIDPASS |
|||
}) |
|||
} catch (error) { |
|||
console.error(error) |
|||
} |
|||
|
|||
console.log(`done notarizing ${appId}.`) |
|||
} |
|||
@ -0,0 +1,43 @@ |
|||
appId: com.electron.lichong |
|||
productName: 桌面应用 |
|||
directories: |
|||
buildResources: build |
|||
files: |
|||
- '!**/.vscode/*' |
|||
- '!src/*' |
|||
- '!electron.vite.config.{js,ts,mjs,cjs}' |
|||
- '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}' |
|||
asarUnpack: |
|||
- '**/*.{node,dll}' |
|||
afterSign: build/notarize.js |
|||
win: |
|||
executableName: lichong-app |
|||
nsis: |
|||
oneClick: false |
|||
artifactName: ${name}-${version}-setup.${ext} |
|||
allowToChangeInstallationDirectory: true |
|||
shortcutName: ${productName} |
|||
uninstallDisplayName: ${productName} |
|||
createDesktopShortcut: always |
|||
mac: |
|||
entitlementsInherit: build/entitlements.mac.plist |
|||
extendInfo: |
|||
- NSCameraUsageDescription: Application requests access to the device's camera. |
|||
- NSMicrophoneUsageDescription: Application requests access to the device's microphone. |
|||
- NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder. |
|||
- NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder. |
|||
dmg: |
|||
artifactName: ${name}-${version}.${ext} |
|||
linux: |
|||
target: |
|||
- AppImage |
|||
- snap |
|||
- deb |
|||
maintainer: electronjs.org |
|||
category: Utility |
|||
appImage: |
|||
artifactName: ${name}-${version}.${ext} |
|||
npmRebuild: false |
|||
publish: |
|||
provider: generic |
|||
url: https://example.com/auto-updates |
|||
@ -0,0 +1,28 @@ |
|||
import { resolve } from 'path' |
|||
import { defineConfig, externalizeDepsPlugin } from 'electron-vite' |
|||
import vue from '@vitejs/plugin-vue' |
|||
|
|||
export default defineConfig({ |
|||
main: { |
|||
plugins: [externalizeDepsPlugin()] |
|||
}, |
|||
preload: { |
|||
plugins: [externalizeDepsPlugin()], |
|||
build: { |
|||
rollupOptions: { |
|||
input: { |
|||
dl: resolve(__dirname, 'src/preload/dl.js'), |
|||
index: resolve(__dirname, 'src/preload/index.js') |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
renderer: { |
|||
resolve: { |
|||
alias: { |
|||
'@renderer': resolve('src/renderer/src') |
|||
} |
|||
}, |
|||
plugins: [vue()] |
|||
} |
|||
}) |
|||
@ -1,12 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
</head> |
|||
<body> |
|||
<div id="app"></div> |
|||
<script type="module" src="/src/main.js"></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"exclude": [ |
|||
"node_modules", |
|||
"public" |
|||
] |
|||
} |
|||
File diff suppressed because it is too large
@ -1,30 +1,43 @@ |
|||
{ |
|||
"name": "base", |
|||
"private": true, |
|||
"version": "0.0.0", |
|||
"type": "module", |
|||
"name": "electron", |
|||
"version": "1.0.0", |
|||
"description": "An Electron application with Vue", |
|||
"main": "./out/main/index.js", |
|||
"author": "lichong", |
|||
"homepage": "https://www.electronjs.org", |
|||
"scripts": { |
|||
"dev": "vite", |
|||
"build": "vite build", |
|||
"preview": "vite preview" |
|||
"format": "prettier --write .", |
|||
"lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix", |
|||
"start": "electron-vite preview", |
|||
"dev": "electron-vite dev", |
|||
"build": "electron-vite build", |
|||
"postinstall": "electron-builder install-app-deps", |
|||
"build:win": "npm run build && electron-builder --win --config", |
|||
"build:mac": "npm run build && electron-builder --mac --config", |
|||
"build:linux": "npm run build && electron-builder --linux --config" |
|||
}, |
|||
"dependencies": { |
|||
"@element-plus/icons-vue": "^2.3.1", |
|||
"axios": "^1.6.6", |
|||
"dayjs": "^1.11.10", |
|||
"element-plus": "^2.5.3", |
|||
"@electron-toolkit/preload": "^1.0.2", |
|||
"@electron-toolkit/utils": "^1.0.2", |
|||
"@kjgl77/datav-vue3": "^1.7.2", |
|||
"axios": "^1.6.8", |
|||
"dayjs": "^1.11.11", |
|||
"element-plus": "^2.7.1", |
|||
"lodash": "^4.17.21", |
|||
"md5": "^2.3.0", |
|||
"nprogress": "^0.2.0", |
|||
"papaparse": "^5.4.1", |
|||
"qs": "^6.11.2", |
|||
"unplugin-auto-import": "^0.17.4", |
|||
"unplugin-vue-components": "^0.26.0", |
|||
"vue": "^3.3.11", |
|||
"vue-router": "^4.2.5" |
|||
"pinia": "^2.1.7", |
|||
"pinia-plugin-persist": "^1.0.0" |
|||
}, |
|||
"devDependencies": { |
|||
"@vitejs/plugin-vue": "^4.6.2", |
|||
"vite": "^5.0.8" |
|||
"@rushstack/eslint-patch": "^1.2.0", |
|||
"@vitejs/plugin-vue": "^3.1.2", |
|||
"@vue/eslint-config-prettier": "^7.0.0", |
|||
"electron": "^20.3.2", |
|||
"electron-builder": "^23.6.0", |
|||
"electron-notarize": "^1.2.1", |
|||
"electron-vite": "^1.0.11", |
|||
"less": "^4.1.3", |
|||
"prettier": "^2.7.1", |
|||
"vite": "^3.1.8", |
|||
"vue": "^3.2.41" |
|||
} |
|||
} |
|||
|
|||
@ -1,9 +0,0 @@ |
|||
{ |
|||
"title": "可视化预警平台", |
|||
"jianceduixiang1path": "@/assets/img/jianceduixiang1.gif", |
|||
"jianceduixiang2path": "@/assets/img/jianceduixiang2.jpg", |
|||
"jianceduixiang3path": "@/assets/img/jianceduixiang3.png", |
|||
"jianceduixiang4path": "@/assets/img/jianceduixiang4.png", |
|||
"jianceduixiang5path": "@/assets/img/jianceduixiang5.gif", |
|||
"jianceduixiang6path": "@/assets/img/jianceduixiang6.gif" |
|||
} |
|||
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 702 B |
@ -1,16 +0,0 @@ |
|||
<template>h5</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "app", |
|||
data() { |
|||
return {}; |
|||
}, |
|||
async mounted() {}, |
|||
methods: {}, |
|||
watch: {}, |
|||
computed: {}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
</style> |
|||
@ -1,27 +0,0 @@ |
|||
import _axios from "@/plugins/axios"; |
|||
|
|||
//增加用户
|
|||
export function addUser(data) { |
|||
return _axios({ |
|||
url: `/v1/user`, |
|||
method: "POST", |
|||
data, |
|||
}); |
|||
} |
|||
|
|||
//删除用户
|
|||
export function delUser(data) { |
|||
return _axios({ |
|||
url: `/v1/user`, |
|||
method: "POST", |
|||
data, |
|||
}); |
|||
} |
|||
//查找用户
|
|||
export function getUser(data) { |
|||
return _axios({ |
|||
url: `/v1/user`, |
|||
method: "POST", |
|||
data, |
|||
}); |
|||
} |
|||
@ -1,3 +0,0 @@ |
|||
body { |
|||
margin: 0; |
|||
} |
|||
@ -1,18 +0,0 @@ |
|||
import App from "./App.vue"; |
|||
import { createApp } from "vue"; |
|||
//全局引入lodash
|
|||
import _ from "lodash"; |
|||
//全局引入lodash
|
|||
import dayjs from "dayjs"; |
|||
// 引入css
|
|||
import "@/assets/css/base.css"; |
|||
//全局引入element-plus所有图标
|
|||
import * as ElementPlusIconsVue from '@element-plus/icons-vue' |
|||
|
|||
const app = createApp(App); |
|||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
|||
app.component(key, component) |
|||
} |
|||
app.config.globalProperties.$_ = _; //挂载到app实例上
|
|||
app.config.globalProperties.$dayjs = dayjs; //挂载到app实例上
|
|||
app.mount("#app"); |
|||
@ -0,0 +1,70 @@ |
|||
import { app, shell, BrowserWindow, nativeImage } from 'electron' |
|||
import * as path from 'path' |
|||
import { electronApp, optimizer, is } from '@electron-toolkit/utils' |
|||
|
|||
// logo
|
|||
const logoIcon = nativeImage.createFromPath(path.join(__dirname, '../../public/icon/icon.jpg')) |
|||
console.log(process.versions.node) |
|||
// 主窗口
|
|||
let mainWindow |
|||
function createWindow() { |
|||
mainWindow = new BrowserWindow({ |
|||
// fullscreen: true,
|
|||
// fullscreenable: true,
|
|||
minWidth: 432, |
|||
minHeight: 768, |
|||
show: false, |
|||
autoHideMenuBar: true, |
|||
icon: logoIcon, |
|||
webPreferences: { |
|||
preload: path.resolve(__dirname, '../preload/index.js'), |
|||
sandbox: false |
|||
} |
|||
}) |
|||
mainWindow.on('ready-to-show', () => { |
|||
mainWindow.show() |
|||
// mainWindow.webContents.openDevTools()
|
|||
}) |
|||
mainWindow.webContents.setWindowOpenHandler((details) => { |
|||
shell.openExternal(details.url) |
|||
return { action: 'deny' } |
|||
}) |
|||
// mainWindow.loadURL('http://localhost:5173/')
|
|||
|
|||
mainWindow.on('close', () => { |
|||
app.exit() |
|||
}) |
|||
if (is.dev && process.env['ELECTRON_RENDERER_URL']) { |
|||
mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL']) |
|||
} else { |
|||
mainWindow.loadFile(path.join(__dirname, '../renderer/index.html')) |
|||
} |
|||
} |
|||
app.whenReady().then(() => { |
|||
electronApp.setAppUserModelId('com.electron') |
|||
// Default open or close DevTools by F12 in development
|
|||
// and ignore CommandOrControl + R in production.
|
|||
// see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
|
|||
app.on('browser-window-created', (_, window) => { |
|||
optimizer.watchWindowShortcuts(window) |
|||
}) |
|||
|
|||
createWindow() |
|||
|
|||
app.on('activate', function () { |
|||
// On macOS it's common to re-create a window in the app when the
|
|||
// dock icon is clicked and there are no other windows open.
|
|||
if (BrowserWindow.getAllWindows().length === 0) createWindow() |
|||
}) |
|||
}) |
|||
|
|||
// Quit when all windows are closed, except on macOS. There, it's common
|
|||
// for applications and their menu bar to stay active until the user quits
|
|||
// explicitly with Cmd + Q.
|
|||
app.on('window-all-closed', () => { |
|||
if (process.platform !== 'darwin') { |
|||
app.quit() |
|||
} |
|||
}) |
|||
// In this file you can include the rest of your app"s specific main process
|
|||
// code. You can also put them in separate files and require them here.
|
|||
@ -1,39 +0,0 @@ |
|||
import axios from "axios"; |
|||
import qs from "qs"; |
|||
let config = { |
|||
baseURL: "", |
|||
timeout: 600 * 1000, |
|||
withCredentials: true, // Check cross-site Access-Control
|
|||
/* `paramsSerializer` 是一个负责 `params` 序列化的函数 |
|||
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' }) |
|||
// 'a[0]=b&a[1]=c'
|
|||
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' }) |
|||
// 'a[]=b&a[]=c'
|
|||
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' }) |
|||
// 'a=b&a=c'
|
|||
*/ |
|||
paramsSerializer: (params) => { |
|||
return qs.stringify(params, { arrayFormat: "indices" }); |
|||
}, |
|||
}; |
|||
|
|||
const _axios = axios.create(config); |
|||
|
|||
_axios.interceptors.request.use( |
|||
(config) => { |
|||
return config; |
|||
}, |
|||
(error) => { |
|||
return Promise.reject(error); |
|||
} |
|||
); |
|||
_axios.interceptors.response.use( |
|||
(response) => { |
|||
return Promise.resolve(response.data); |
|||
}, |
|||
(error) => { |
|||
ElMessage.error(error.response.data.message); |
|||
return Promise.reject(error); |
|||
} |
|||
); |
|||
export default _axios; |
|||
@ -0,0 +1,21 @@ |
|||
import { contextBridge, clipboard } from 'electron' |
|||
import { electronAPI } from '@electron-toolkit/preload' |
|||
|
|||
// Custom APIs for renderer
|
|||
const api = {} |
|||
|
|||
// Use `contextBridge` APIs to expose Electron APIs to
|
|||
// renderer only if context isolation is enabled, otherwise
|
|||
// just add to the DOM global.
|
|||
if (process.contextIsolated) { |
|||
try { |
|||
contextBridge.exposeInMainWorld('electron', electronAPI) |
|||
contextBridge.exposeInMainWorld('api', api) |
|||
contextBridge.exposeInMainWorld('elecClipboard', clipboard) |
|||
} catch (error) { |
|||
console.error(error) |
|||
} |
|||
} else { |
|||
window.electron = electronAPI |
|||
window.api = api |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
import { contextBridge, clipboard } from 'electron' |
|||
import { electronAPI } from '@electron-toolkit/preload' |
|||
|
|||
// Custom APIs for renderer
|
|||
const api = {} |
|||
|
|||
// Use `contextBridge` APIs to expose Electron APIs to
|
|||
// renderer only if context isolation is enabled, otherwise
|
|||
// just add to the DOM global.
|
|||
if (process.contextIsolated) { |
|||
try { |
|||
contextBridge.exposeInMainWorld('electron', electronAPI) |
|||
contextBridge.exposeInMainWorld('api', api) |
|||
contextBridge.exposeInMainWorld('elecClipboard', clipboard) |
|||
} catch (error) { |
|||
console.error(error) |
|||
} |
|||
} else { |
|||
window.electron = electronAPI |
|||
window.api = api |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<title>桌面应用</title> |
|||
<!-- <link rel="icon" href="/icon/icon.jpg" /> --> |
|||
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --> |
|||
<meta |
|||
http-equiv="Content-Security-Policy" |
|||
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'" |
|||
/> |
|||
</head> |
|||
|
|||
<body> |
|||
<div id="app"></div> |
|||
<!-- <audio src="./src/assets/mp3/play.mp3" autoplay loop></audio> --> |
|||
<script type="module" src="/src/main.js"></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,172 @@ |
|||
<template> |
|||
|
|||
<div class="appClass" v-if="isVip"> |
|||
<dv-border-box1 ref="borderRef" style="text-align: center;width: 100vw;height: 100vh;"> |
|||
<dv-button style="width: 90%;margin-left: 5%;">米微婚礼</dv-button> |
|||
<div class="topinput"> |
|||
<dv-border-box8 :dur="5" class="topinputinfo"> |
|||
<div dv-bg> |
|||
<span>姓名：</span> |
|||
<span> |
|||
<el-input v-model="form.name" style="width: 280px" placeholder="请输入姓名" /> |
|||
</span> |
|||
</div> |
|||
</dv-border-box8> |
|||
<dv-border-box8 :reverse="true" class="topinputinfo"> |
|||
<div dv-bg> |
|||
<span>年龄：</span> |
|||
<span> |
|||
<el-input-number v-model="form.age" style="width: 280px" :max="200" :min="0"> |
|||
<template #decrease-icon> |
|||
<el-icon> |
|||
<ArrowDown /> |
|||
</el-icon> |
|||
</template> |
|||
<template #increase-icon> |
|||
<el-icon> |
|||
<ArrowUp /> |
|||
</el-icon> |
|||
</template> |
|||
</el-input-number> |
|||
</span> |
|||
</div> |
|||
</dv-border-box8> |
|||
<el-button type="primary" @click="takePhotoUpload">打开视频</el-button> |
|||
<el-button type="primary" @click="takePhoto">拍照</el-button> |
|||
<el-button type="success" @click="updateSeach">上传查看</el-button> |
|||
</div> |
|||
<div class="botimg"> |
|||
<div id="camera"> |
|||
<video ref="videoEL" width="500px" height="450px" autoplay v-if="!form.img"></video> |
|||
<!--canvas截取流--> |
|||
<canvas ref="canvas" width="500px" height="450px" v-show="form.img"></canvas> |
|||
</div> |
|||
</div> |
|||
</dv-border-box1> |
|||
</div> |
|||
<div v-else class="noVip"> |
|||
<h3> |
|||
<el-tag type="danger" class="noVipTag">体验已过期，请联系管理员。</el-tag> |
|||
</h3> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import _ from 'lodash' |
|||
import useConfigStore from './stores/config.js' |
|||
import dayjs from 'dayjs' |
|||
import { ElMessage, ElMessageBox } from 'element-plus' |
|||
export default { |
|||
name: 'app', |
|||
data() { |
|||
return { |
|||
_: _, |
|||
form: { |
|||
name: "", |
|||
age: null, |
|||
img: "" |
|||
}, |
|||
videoEL: null, |
|||
isVip: false |
|||
} |
|||
}, |
|||
methods: { |
|||
async takePhotoUpload() { |
|||
this.form.img = "" |
|||
let device = ''; // 所选择的摄像头 deviceId |
|||
this.dialogTakePhotoShow = true; |
|||
let stream = navigator.mediaDevices.enumerateDevices() |
|||
.then(devices => { //多个摄像头设备时，该处根据设备id判断具体使用哪个摄像头设备 |
|||
for (let i in devices) { |
|||
if (devices[i].kind == 'videoinput') { |
|||
device = devices[i]; |
|||
break; |
|||
} |
|||
} |
|||
}) |
|||
.then(() => { |
|||
navigator.mediaDevices.getUserMedia({ |
|||
audio: false, |
|||
video: { |
|||
sourceId: device.deviceId, // 把对应的 摄像头ID 放到这里 |
|||
width: 500, |
|||
height: 450 |
|||
//如果拍照不清晰，考虑加入以下参数，但考虑下摄像头的高度和画布的高度 |
|||
// width:{min: 1000, ideal: 1000, max: 3264 }, |
|||
// height:{min: 1080, ideal: 1080, max: 2488} |
|||
} |
|||
}).then(success => { |
|||
// 摄像头开启成功 |
|||
this.$refs['videoEL'].srcObject = success; |
|||
// 实时拍照效果 |
|||
this.$refs['videoEL'].play(); |
|||
}) |
|||
.catch(error => { |
|||
console.error('摄像头开启失败，请检查摄像头是否可用！') |
|||
}) |
|||
}) |
|||
}, |
|||
async takePhoto() { |
|||
let ctx = this.$refs['canvas'].getContext('2d'); |
|||
// 把当前视频帧内容渲染到canvas上 |
|||
ctx.drawImage(this.$refs['videoEL'], 0, 0); |
|||
// 转base64格式、图片格式转换、图片质量压缩 |
|||
this.form.img = this.$refs['canvas'].toDataURL('image/png', 0.7); // 由字节转换为KB 判断大小 |
|||
if (!this.$refs['videoEL'].srcObject) return; |
|||
let stream = this.$refs['videoEL'].srcObject; |
|||
let tracks = stream.getTracks(); |
|||
tracks.forEach(track => { |
|||
track.stop(); |
|||
}) |
|||
this.$refs['videoEL'].srcObject = null; |
|||
console.log(777, this.form.img) |
|||
}, |
|||
async updateSeach() { |
|||
console.log(7777, this.form) |
|||
let res = await this.$axios.post('/api/upload', { |
|||
name: this.form.name, |
|||
age: this.form.age, |
|||
img: this.form.img |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
async mounted() { |
|||
let fiveDay = dayjs('2024-05-16T00:00:00').valueOf() |
|||
if (!this.isVip) { |
|||
if (dayjs().valueOf() > fiveDay) { |
|||
this.isVip = false |
|||
return |
|||
} else { |
|||
this.isVip = true |
|||
} |
|||
} |
|||
}, |
|||
watch: {}, |
|||
computed: {} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.appClass { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
color: #000; |
|||
background-color: #00b8ca; |
|||
} |
|||
|
|||
.topinput { |
|||
height: calc(40vh - 62px); |
|||
text-align: -webkit-center; |
|||
} |
|||
|
|||
.topinputinfo { |
|||
height: 45px; |
|||
width: 360px; |
|||
margin: 12px 0; |
|||
|
|||
} |
|||
|
|||
.botimg { |
|||
height: 60vh; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,12 @@ |
|||
html, |
|||
body { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.dv-border-box-8 .border-box-content { |
|||
align-content: center; |
|||
text-align: left !important; |
|||
padding: 0 0 0 12px; |
|||
line-height: 45px; |
|||
} |
|||
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
@ -0,0 +1,26 @@ |
|||
// main.ts
|
|||
import { createApp } from 'vue' |
|||
import ElementPlus from 'element-plus' |
|||
import 'element-plus/dist/index.css' |
|||
import App from './App.vue' |
|||
import './assets/css/base.css' |
|||
import * as ElementPlusIconsVue from '@element-plus/icons-vue' |
|||
import axios from 'axios' |
|||
import pinia from './stores' |
|||
import DataVVue3 from '@kjgl77/datav-vue3' |
|||
const app = createApp(App) |
|||
app.config.globalProperties.$axios = axios |
|||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
|||
app.component(key, component) |
|||
} |
|||
app.use(DataVVue3) |
|||
app.use(ElementPlus) |
|||
app.use(pinia) |
|||
app.mount('#app') |
|||
|
|||
document.addEventListener('keydown', (event) => { |
|||
const { ctrlKey, shiftKey, key } = event |
|||
if ((ctrlKey && shiftKey && key === 'I') || key === 'F12') { |
|||
return event.preventDefault() |
|||
} |
|||
}) |
|||
@ -0,0 +1,27 @@ |
|||
import { defineStore } from 'pinia' |
|||
const useConfigStore = defineStore('config', { |
|||
state: () => { |
|||
return { |
|||
tableData: [] |
|||
} |
|||
}, |
|||
actions: { |
|||
setTableData(Data = []) { |
|||
console.log(999, Data) |
|||
this.tableData = Data |
|||
}, |
|||
getTableData() { |
|||
return this.tableData |
|||
}, |
|||
}, |
|||
//整个仓库持久化存储
|
|||
persist: { |
|||
enabled: true, |
|||
//指定字段存储，并且指定存储方式：
|
|||
strategies: [ |
|||
{ storage: sessionStorage, paths: ['tableData'] }, // tableData字段用sessionStorage存储
|
|||
{ storage: localStorage, paths: ['tableData'] }, // accessToken字段用 localstorage存储
|
|||
], |
|||
}, |
|||
}) |
|||
export default useConfigStore |
|||
@ -0,0 +1,5 @@ |
|||
import { createPinia } from "pinia"; |
|||
import piniaPluginPersist from "pinia-plugin-persist" |
|||
const pinia = createPinia(); |
|||
pinia.use(piniaPluginPersist) |
|||
export default pinia; |
|||
Binary file not shown.
@ -1,79 +0,0 @@ |
|||
:root { |
|||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; |
|||
line-height: 1.5; |
|||
font-weight: 400; |
|||
|
|||
color-scheme: light dark; |
|||
color: rgba(255, 255, 255, 0.87); |
|||
background-color: #242424; |
|||
|
|||
font-synthesis: none; |
|||
text-rendering: optimizeLegibility; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
a { |
|||
font-weight: 500; |
|||
color: #646cff; |
|||
text-decoration: inherit; |
|||
} |
|||
a:hover { |
|||
color: #535bf2; |
|||
} |
|||
|
|||
body { |
|||
margin: 0; |
|||
display: flex; |
|||
place-items: center; |
|||
min-width: 320px; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
h1 { |
|||
font-size: 3.2em; |
|||
line-height: 1.1; |
|||
} |
|||
|
|||
button { |
|||
border-radius: 8px; |
|||
border: 1px solid transparent; |
|||
padding: 0.6em 1.2em; |
|||
font-size: 1em; |
|||
font-weight: 500; |
|||
font-family: inherit; |
|||
background-color: #1a1a1a; |
|||
cursor: pointer; |
|||
transition: border-color 0.25s; |
|||
} |
|||
button:hover { |
|||
border-color: #646cff; |
|||
} |
|||
button:focus, |
|||
button:focus-visible { |
|||
outline: 4px auto -webkit-focus-ring-color; |
|||
} |
|||
|
|||
.card { |
|||
padding: 2em; |
|||
} |
|||
|
|||
#app { |
|||
max-width: 1280px; |
|||
margin: 0 auto; |
|||
padding: 2rem; |
|||
text-align: center; |
|||
} |
|||
|
|||
@media (prefers-color-scheme: light) { |
|||
:root { |
|||
color: #213547; |
|||
background-color: #ffffff; |
|||
} |
|||
a:hover { |
|||
color: #747bff; |
|||
} |
|||
button { |
|||
background-color: #f9f9f9; |
|||
} |
|||
} |
|||
@ -1,19 +0,0 @@ |
|||
import NProgress from 'nprogress' |
|||
import 'nprogress/nprogress.css' |
|||
NProgress.configure({ |
|||
easing: 'ease', // 动画方式
|
|||
speed: 1000, // 递增进度条的速度
|
|||
showSpinner: false, // 是否显示加载ico
|
|||
trickleSpeed: 200, // 自动递增间隔
|
|||
minimum: 0.3, // 更改启动时使用的最小百分比
|
|||
parent: 'body', //指定进度条的父容器
|
|||
}) |
|||
// 打开进度条
|
|||
export const start = () => { |
|||
NProgress.start() |
|||
} |
|||
|
|||
// 关闭进度条
|
|||
export const close = () => { |
|||
NProgress.done() |
|||
} |
|||
@ -1,42 +0,0 @@ |
|||
// Plugins
|
|||
import vue from "@vitejs/plugin-vue"; |
|||
|
|||
// Utilities
|
|||
import { defineConfig } from "vite"; |
|||
import { fileURLToPath, URL } from "node:url"; |
|||
import AutoImport from "unplugin-auto-import/vite"; |
|||
import Components from "unplugin-vue-components/vite"; |
|||
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; |
|||
|
|||
// https://vitejs.dev/config/
|
|||
export default defineConfig({ |
|||
plugins: [ |
|||
vue(), |
|||
AutoImport({ |
|||
resolvers: [ElementPlusResolver()], |
|||
}), |
|||
Components({ |
|||
resolvers: [ElementPlusResolver()], |
|||
}), |
|||
], |
|||
define: { "process.env": {} }, |
|||
resolve: { |
|||
alias: { |
|||
"@": fileURLToPath(new URL("./src", import.meta.url)), |
|||
}, |
|||
extensions: [".js", ".json", ".jsx", ".mjs", ".ts", ".tsx", ".vue"], |
|||
}, |
|||
server: { |
|||
port: 3000, |
|||
proxy: { |
|||
"/v1": { |
|||
target: "http://127.0.0.1:7001/v1", |
|||
changeOrigin: true, |
|||
rewrite: (path) => path.replace(/^\/v1/, ""), |
|||
}, |
|||
}, |
|||
}, |
|||
build: { |
|||
sourcemap: true, |
|||
}, |
|||
}); |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue