commit
25a7d913b9
88 changed files with 8255 additions and 0 deletions
@ -0,0 +1,7 @@ |
|||
node_modules |
|||
.DS_Store |
|||
dist |
|||
dist-ssr |
|||
*.local |
|||
src/pages/Ezopen |
|||
src/router/route/ezopen.ts |
|||
@ -0,0 +1,5 @@ |
|||
# Default ignored files |
|||
/shelf/ |
|||
/workspace.xml |
|||
# Editor-based HTTP Client requests |
|||
/httpRequests/ |
|||
@ -0,0 +1,49 @@ |
|||
<component name="ProjectCodeStyleConfiguration"> |
|||
<code_scheme name="Project" version="173"> |
|||
<HTMLCodeStyleSettings> |
|||
<option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" /> |
|||
<option name="HTML_ENFORCE_QUOTES" value="true" /> |
|||
</HTMLCodeStyleSettings> |
|||
<JSCodeStyleSettings version="0"> |
|||
<option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" /> |
|||
<option name="FORCE_SEMICOLON_STYLE" value="true" /> |
|||
<option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" /> |
|||
<option name="FORCE_QUOTE_STYlE" value="true" /> |
|||
<option name="ENFORCE_TRAILING_COMMA" value="Remove" /> |
|||
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" /> |
|||
<option name="SPACES_WITHIN_IMPORTS" value="true" /> |
|||
</JSCodeStyleSettings> |
|||
<TypeScriptCodeStyleSettings version="0"> |
|||
<option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" /> |
|||
<option name="FORCE_SEMICOLON_STYLE" value="true" /> |
|||
<option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" /> |
|||
<option name="FORCE_QUOTE_STYlE" value="true" /> |
|||
<option name="ENFORCE_TRAILING_COMMA" value="Remove" /> |
|||
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" /> |
|||
<option name="SPACES_WITHIN_IMPORTS" value="true" /> |
|||
</TypeScriptCodeStyleSettings> |
|||
<VueCodeStyleSettings> |
|||
<option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" /> |
|||
<option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" /> |
|||
</VueCodeStyleSettings> |
|||
<codeStyleSettings language="HTML"> |
|||
<option name="SOFT_MARGINS" value="140" /> |
|||
<indentOptions> |
|||
<option name="CONTINUATION_INDENT_SIZE" value="4" /> |
|||
</indentOptions> |
|||
</codeStyleSettings> |
|||
<codeStyleSettings language="JavaScript"> |
|||
<option name="SOFT_MARGINS" value="140" /> |
|||
</codeStyleSettings> |
|||
<codeStyleSettings language="TypeScript"> |
|||
<option name="SOFT_MARGINS" value="140" /> |
|||
</codeStyleSettings> |
|||
<codeStyleSettings language="Vue"> |
|||
<option name="SOFT_MARGINS" value="140" /> |
|||
<indentOptions> |
|||
<option name="INDENT_SIZE" value="4" /> |
|||
<option name="TAB_SIZE" value="4" /> |
|||
</indentOptions> |
|||
</codeStyleSettings> |
|||
</code_scheme> |
|||
</component> |
|||
@ -0,0 +1,5 @@ |
|||
<component name="ProjectCodeStyleConfiguration"> |
|||
<state> |
|||
<option name="USE_PER_PROJECT_SETTINGS" value="true" /> |
|||
</state> |
|||
</component> |
|||
@ -0,0 +1,12 @@ |
|||
<?xml version="1.0" encoding="UTF-8"?> |
|||
<module type="WEB_MODULE" version="4"> |
|||
<component name="NewModuleRootManager"> |
|||
<content url="file://$MODULE_DIR$"> |
|||
<excludeFolder url="file://$MODULE_DIR$/temp" /> |
|||
<excludeFolder url="file://$MODULE_DIR$/.tmp" /> |
|||
<excludeFolder url="file://$MODULE_DIR$/tmp" /> |
|||
</content> |
|||
<orderEntry type="inheritedJdk" /> |
|||
<orderEntry type="sourceFolder" forTests="false" /> |
|||
</component> |
|||
</module> |
|||
@ -0,0 +1,8 @@ |
|||
<?xml version="1.0" encoding="UTF-8"?> |
|||
<project version="4"> |
|||
<component name="ProjectModuleManager"> |
|||
<modules> |
|||
<module fileurl="file://$PROJECT_DIR$/.idea/god-run.iml" filepath="$PROJECT_DIR$/.idea/god-run.iml" /> |
|||
</modules> |
|||
</component> |
|||
</project> |
|||
@ -0,0 +1,4 @@ |
|||
<?xml version="1.0" encoding="UTF-8"?> |
|||
<project version="4"> |
|||
<component name="ProjectTasksOptions" suppressed-tasks="Less" /> |
|||
</project> |
|||
@ -0,0 +1,11 @@ |
|||
{ |
|||
"tabWidth": 4, |
|||
"useTabs": false, |
|||
"semi": false, |
|||
"singleQuote": false, |
|||
"TrailingCooma": "all", |
|||
"bracketSpacing": true, |
|||
"jsxBracketSameLine": false, |
|||
"arrowParens": "avoid", |
|||
"printWidth": 140 |
|||
} |
|||
@ -0,0 +1,53 @@ |
|||
# Vue 3 + Typescript + Vite |
|||
|
|||
This template should help get you started developing with Vue 3 and Typescript 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. |
|||
|
|||
## Recommended IDE Setup |
|||
|
|||
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) |
|||
|
|||
## Type Support For `.vue` Imports in TS |
|||
|
|||
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette. |
|||
|
|||
https://github.com/anncwb/vue-vben-admin/blob/main/src/utils/cache/persistent.ts |
|||
https://v3.vuejs.org/api/sfc-script-setup.html#defineprops-and-defineemits |
|||
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup |
|||
https://github.com/iiiiiii1/douban-imdb-api |
|||
https://www.jianshu.com/p/3f224c33dd97 |
|||
|
|||
|
|||
http://doc.bmob.cn/data/wechat_app_new/#websocket |
|||
https://github.com/bmob/Bmob-wechatapp-xinyou |
|||
https://www.bmob.cn |
|||
https://www.bookstack.cn/read/BmobDocs/mds-other-common_problem-data_javascript.md |
|||
https://bmob.github.io/hydrogen-js-sdk/#/?id=%E7%99%BB%E9%99%86 |
|||
https://v3.cn.vuejs.org/api/built-in-components.html#teleport |
|||
https://v3.cn.vuejs.org/api/global-api.html#defineasynccomponent |
|||
|
|||
|
|||
https://2x.antdv.com/docs/vue/introduce-cn |
|||
|
|||
https://www.attojs.com/api/#manual |
|||
|
|||
## 目录结构说明 |
|||
|
|||
``` |
|||
src |
|||
├── api （网络请求模块） |
|||
├── App.vue |
|||
├── assets （资源模块，包含公共文件） |
|||
├── components （共用模块，与业务无关） |
|||
├── env.d.ts |
|||
├── hook （存放通用hook） |
|||
├── main.ts |
|||
├── pages （页面） |
|||
├── pagesUI （通用页面组件） |
|||
├── plugins （其他插件） |
|||
├── router （路由管理） |
|||
└── store （全局状态管理） |
|||
``` |
|||
|
|||
## 注意事项 |
|||
|
|||
* 页面节点必须只有一个根节点，不然会发现动画出现问题 |
|||
@ -0,0 +1,11 @@ |
|||
// generated by unplugin-vue-components
|
|||
// We suggest you to commit this file into source control
|
|||
// Read more: https://github.com/vuejs/vue-next/pull/3399
|
|||
|
|||
declare module 'vue' { |
|||
export interface GlobalComponents { |
|||
Toast: typeof import('./src/components/Toast/Toast.vue')['default'] |
|||
} |
|||
} |
|||
|
|||
export { } |
|||
@ -0,0 +1,3 @@ |
|||
### (close) vue3 + typescript + elementPlus生产包打包报错 |
|||
|
|||
https://blog.51cto.com/youthfighter/2765511 |
|||
@ -0,0 +1,24 @@ |
|||
# 布局思路 |
|||
|
|||
根据UI图的设计，总体可以分为两层或者三层布局 |
|||
|
|||
* 两层布局 |
|||
* 登录页面，工作页面，此为一层布局 |
|||
* 工作页面分为顶部标题栏和下面的工作区域 |
|||
* 缺点 |
|||
* 要控制工作区域的侧边菜单显隐与右侧内容的动画，导致会出现闪动的画面 |
|||
* 两层布局+布局切换 |
|||
* 登录页面，工作页面，此为一层布局 |
|||
* 工作页面可以分为两部分： |
|||
* 顶部标题栏和下面的工作区域 |
|||
* 顶部标题栏+侧边菜单+下面的工作区域 |
|||
* 缺点 |
|||
* keep-alive缓存不全 |
|||
* 三层布局 |
|||
* 登录页面，工作页面，此为一层布局 |
|||
* 工作台页面以及功能页面，此为第二层布局 |
|||
* 功能页面分为菜单+右侧内容，此为第三层布局 |
|||
* 缺点： |
|||
* 需要两层keep-alive才能覆盖整个的页面，同时会导致多了一层路由 |
|||
|
|||
因为不太想包三层布局，因此采用上面的两层布局。 |
|||
@ -0,0 +1,13 @@ |
|||
<!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,maximum-scale=1,user-scalable=no"> |
|||
<title>Vite App</title> |
|||
</head> |
|||
<body> |
|||
<div id="app"></div> |
|||
<script type="module" src="/src/main.ts"></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,41 @@ |
|||
import { MockMethod } from 'vite-plugin-mock' |
|||
export default [ |
|||
{ |
|||
url: '/api/login', |
|||
method: 'get', |
|||
response: ({ query }) => { |
|||
return { |
|||
code: 0, |
|||
data: { |
|||
token: 'sadw@fjdsfsdkfsd3g6ujhj8i54wdvu7un7sadsaa', |
|||
}, |
|||
} |
|||
}, |
|||
}, |
|||
{ |
|||
url: '/api/sendcode', |
|||
method: 'post', |
|||
timeout: 1500, |
|||
response: { |
|||
code: 0, |
|||
data: null, |
|||
message: 'success', |
|||
}, |
|||
}, |
|||
{ |
|||
url: '/api/text', |
|||
method: 'post', |
|||
rawResponse: async (req, res) => { |
|||
let reqbody = '' |
|||
await new Promise((resolve) => { |
|||
req.on('data', (chunk) => { |
|||
reqbody += chunk |
|||
}) |
|||
req.on('end', () => resolve(undefined)) |
|||
}) |
|||
res.setHeader('Content-Type', 'text/plain') |
|||
res.statusCode = 200 |
|||
res.end(`hello, ${reqbody}`) |
|||
}, |
|||
}, |
|||
] as MockMethod[] |
|||
File diff suppressed because it is too large
@ -0,0 +1,33 @@ |
|||
{ |
|||
"name": "vite-project", |
|||
"version": "0.0.0", |
|||
"scripts": { |
|||
"dev": "vite --host", |
|||
"build": "vue-tsc --noEmit && vite build", |
|||
"serve": "vite preview" |
|||
}, |
|||
"dependencies": { |
|||
"@vueuse/core": "^6.8.0", |
|||
"axios": "^0.24.0", |
|||
"lodash": "^4.17.21", |
|||
"mockjs": "^1.1.0", |
|||
"monaco-editor": "^0.30.1", |
|||
"pinia": "^2.0.2", |
|||
"unplugin-vue-components": "^0.17.0", |
|||
"vue": "^3.2.16", |
|||
"vue-request": "^1.2.3", |
|||
"vue-router": "^4.0.12" |
|||
}, |
|||
"devDependencies": { |
|||
"@types/crypto-js": "^4.0.2", |
|||
"@types/node": "^16.11.6", |
|||
"@vitejs/plugin-vue": "^1.9.3", |
|||
"less": "^4.1.2", |
|||
"typescript": "^4.4.3", |
|||
"vite": "^2.6.14", |
|||
"vite-plugin-mock": "^2.9.6", |
|||
"vite-plugin-windicss": "^1.5.1", |
|||
"vue-tsc": "^0.3.0", |
|||
"windicss": "^3.2.1" |
|||
} |
|||
} |
|||
File diff suppressed because it is too large
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 750 B |
|
After Width: | Height: | Size: 881 B |
|
After Width: | Height: | Size: 732 B |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 258 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 13 KiB |
@ -0,0 +1,18 @@ |
|||
<script setup lang="ts"> |
|||
import { useTitle } from '@vueuse/core' |
|||
import { watchEffect } from 'vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
watchEffect(() => { |
|||
let title = route.meta.title as string |
|||
useTitle(title || '爱能森平台') |
|||
}) |
|||
</script> |
|||
|
|||
<template> |
|||
<router-view></router-view> |
|||
</template> |
|||
|
|||
<style lang="less"> |
|||
@import '@/assets/style/common.less'; |
|||
</style> |
|||
@ -0,0 +1,21 @@ |
|||
import { message } from 'ant-design-vue' |
|||
import { userStore } from "@/store/module/user" |
|||
|
|||
export default function error(err: any, type: number) { |
|||
switch (type) { |
|||
case 0: |
|||
const store = userStore() |
|||
message.error(err?.data?.message?err?.data?.message:"未知错误") |
|||
if(err?.data&&err?.data.code === -1){ |
|||
store.logout(false) |
|||
} |
|||
// 响应正确，服务器返回错误
|
|||
break |
|||
case 1: |
|||
// 服务器错误
|
|||
break |
|||
case 2: |
|||
// 请求错误
|
|||
break |
|||
} |
|||
} |
|||
@ -0,0 +1,55 @@ |
|||
import { IHttpMethod } from '@/enum' |
|||
import axios from 'axios' |
|||
import checkError from './error' |
|||
import { BASE_URL } from '@/config' |
|||
import createInterceptors from './interceptors' |
|||
const urlRegexp = new RegExp(/^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/i) |
|||
|
|||
const axiosInstance = axios.create({ |
|||
timeout: 5000, |
|||
}) |
|||
|
|||
createInterceptors(axiosInstance) |
|||
|
|||
function http( |
|||
url: string, |
|||
method: IHttpMethod = IHttpMethod.GET, |
|||
data: any = {} |
|||
): Promise<any> { |
|||
var __data: { params?: any; data?: any } = {} |
|||
if (method === IHttpMethod.GET) { |
|||
__data.params = data |
|||
} |
|||
if (method === IHttpMethod.POST) { |
|||
__data.data = data |
|||
} |
|||
let realurl = urlRegexp.test(url) ? url : BASE_URL + url |
|||
return new Promise((resolve, reject) => { |
|||
axiosInstance({ |
|||
url: realurl, |
|||
method, |
|||
headers: {}, |
|||
responseType: 'json', |
|||
...__data, |
|||
}) |
|||
.then((response) => { |
|||
if (response.status == 200) { |
|||
if (response.data!=undefined && response.data.code === 0) { |
|||
resolve(response.data) |
|||
} else { |
|||
checkError(response, 0) |
|||
reject(response) |
|||
} |
|||
} else { |
|||
checkError(response, 1) |
|||
reject(response) |
|||
} |
|||
}) |
|||
.catch((error) => { |
|||
checkError(error, 2) |
|||
reject(error) |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
export { http } |
|||
@ -0,0 +1,32 @@ |
|||
import type { AxiosInstance, AxiosRequestConfig } from 'axios' |
|||
import { userStore } from '@/store/module/user' |
|||
|
|||
export default function createInterceptors(axios: AxiosInstance) { |
|||
axios.interceptors.request.use( |
|||
function (config: AxiosRequestConfig) { |
|||
const store = userStore() |
|||
if (config && config.headers&&store.token){ |
|||
config.headers['token'] = store.token |
|||
} |
|||
if (config && config.headers && !config!.headers['Content-Type']) { |
|||
config.headers['Accept'] = 'application/json'; |
|||
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'; |
|||
} |
|||
// 在发送请求之前做些什么
|
|||
return config |
|||
}, |
|||
function (error) { |
|||
// 对请求错误做些什么
|
|||
return Promise.reject(error) |
|||
} |
|||
) |
|||
|
|||
axios.interceptors.response.use( |
|||
function (response) { |
|||
return response |
|||
}, |
|||
function (error) { |
|||
return Promise.reject(error) |
|||
} |
|||
) |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
import { http } from "@/api/_request" |
|||
import { IHttpMethod } from "@/enum" |
|||
import { readonly } from "vue" |
|||
|
|||
const api = { |
|||
getStruct: (data?: any) => http("/enesoon/organization/v1.0/orgStructure", IHttpMethod.GET, data), |
|||
getDepartment: (data?: any) => http("/enesoon/organization/v1.0/orgDepartment", IHttpMethod.GET, data), |
|||
getDepartmentEmp: (data?: any) => http("/enesoon/organization/v1.0/departmentEmp", IHttpMethod.GET, data), |
|||
} |
|||
|
|||
export default api |
|||
@ -0,0 +1,9 @@ |
|||
import { IHttpMethod } from '@/enum' |
|||
import { http } from './_request' |
|||
|
|||
const api = { |
|||
login: (data?: any) => http('/enesoon/login/v1.0/employees', IHttpMethod.GET, data), |
|||
getUserProfile: (data?: any) => http('/enesoon/user/v1.0/employees', IHttpMethod.GET, data) |
|||
} |
|||
|
|||
export default api |
|||
@ -0,0 +1,17 @@ |
|||
|
|||
|
|||
export function isPromise(obj: any) { |
|||
return !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function'; |
|||
} |
|||
|
|||
export async function execute(fn: () => any) { |
|||
let result; |
|||
if(isPromise(fn)){ |
|||
result = await fn() |
|||
}else{ |
|||
result = fn() |
|||
} |
|||
return result |
|||
} |
|||
|
|||
export default {} |
|||
@ -0,0 +1,49 @@ |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity .25s ease; |
|||
} |
|||
|
|||
.fade-enter-from, |
|||
.fade-leave-to { |
|||
opacity: 0; |
|||
} |
|||
|
|||
.slide-y-transition { |
|||
.transition-default(); |
|||
|
|||
&-enter-from, |
|||
&-leave-to { |
|||
opacity: 0%; |
|||
transform: translateY(-15px); |
|||
} |
|||
} |
|||
|
|||
.slide-y-reverse-transition { |
|||
.transition-default(); |
|||
|
|||
&-enter-from, |
|||
&-leave-to { |
|||
opacity: 0%; |
|||
transform: translateY(15px); |
|||
} |
|||
} |
|||
|
|||
.slide-x-transition { |
|||
.transition-default(); |
|||
|
|||
&-enter-from, |
|||
&-leave-to { |
|||
opacity: 0%; |
|||
transform: translateX(-15px); |
|||
} |
|||
} |
|||
|
|||
.slide-x-reverse-transition { |
|||
.transition-default(); |
|||
|
|||
&-enter-from, |
|||
&-leave-to { |
|||
opacity: 0%; |
|||
transform: translateX(15px); |
|||
} |
|||
} |
|||
@ -0,0 +1,167 @@ |
|||
@import (inline) './css/reset.css'; |
|||
@import (inline) './css/anim.css'; |
|||
@import "./anim.less"; |
|||
@import "./less/row/row.less"; |
|||
@import "./less/visible/visible.less"; |
|||
|
|||
html, |
|||
body { |
|||
// background-color: #43b244; |
|||
// color: #fffef8; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
html, |
|||
body{ |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: #f9f9f9 !important; |
|||
overflow: auto !important; |
|||
overflow-x: auto !important; |
|||
} |
|||
|
|||
#app { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
body { |
|||
font: 12px/1.5 Tahoma, Helvetica, Arial, '宋体', sans-serif; |
|||
} |
|||
|
|||
*, |
|||
::before, |
|||
::after { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.container { |
|||
margin: 0 auto; |
|||
max-width: 1200px; |
|||
} |
|||
|
|||
|
|||
.clearfix { |
|||
.clearfix(); |
|||
} |
|||
|
|||
.hairline--all() { |
|||
.hairline({ |
|||
border-width: 1px; |
|||
}); |
|||
} |
|||
.hairline { |
|||
.hairline--all(); |
|||
} |
|||
|
|||
.ellipsis { |
|||
.ellipsis(); |
|||
} |
|||
.over-ellipsis { |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
|
|||
.a-flexbox{ |
|||
display: flex; |
|||
&.a-flexbox--fixed{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
} |
|||
&.a-flexbox--inline{ |
|||
display: inline-flex; |
|||
} |
|||
&.a-flexbox__column{ |
|||
flex-direction: column; |
|||
} |
|||
&.a-flexbox__row{ |
|||
flex-direction: row; |
|||
} |
|||
&.a-flexbox__wrap{ |
|||
flex-wrap: wrap; |
|||
} |
|||
&.a-flexbox__center{ |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
&.a-flexbox__center--x{ |
|||
justify-content: center; |
|||
} |
|||
&.a-flexbox--around{ |
|||
justify-content: space-around; |
|||
} |
|||
&.a-flexbox--between{ |
|||
justify-content: space-between; |
|||
} |
|||
&.a-flexbox__start--x{ |
|||
justify-content: flex-start; |
|||
} |
|||
&.a-flexbox__end--x{ |
|||
justify-content: flex-end; |
|||
} |
|||
&.a-flexbox__center--y{ |
|||
align-items: center; |
|||
} |
|||
&.a-flexbox__start--y{ |
|||
align-items: flex-start; |
|||
} |
|||
&.a-flexbox__end--y{ |
|||
align-items: flex-end; |
|||
} |
|||
.a-flexbox__noshrink{ |
|||
flex-shrink: 0; |
|||
} |
|||
.a-flexbox__full{ |
|||
flex: 1; |
|||
width: 0; |
|||
} |
|||
.a-flexbox__full--h{ |
|||
flex: 1; |
|||
height: 0; |
|||
} |
|||
} |
|||
.transition-default() { |
|||
&-enter-active, |
|||
&-leave-active { |
|||
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important; |
|||
} |
|||
|
|||
&-move { |
|||
transition: transform 0.4s; |
|||
} |
|||
} |
|||
|
|||
// html { |
|||
// font-size : 20px; |
|||
// } |
|||
// @media only screen and (min-width: 401px){ |
|||
// html { |
|||
// font-size: 25px !important; |
|||
// } |
|||
// } |
|||
// @media only screen and (min-width: 428px){ |
|||
// html { |
|||
// font-size: 26.75px !important; |
|||
// } |
|||
// } |
|||
// @media only screen and (min-width: 481px){ |
|||
// html { |
|||
// font-size: 30px !important; |
|||
// } |
|||
// } |
|||
// @media only screen and (min-width: 569px){ |
|||
// html { |
|||
// font-size: 35px !important; |
|||
// } |
|||
// } |
|||
// @media only screen and (min-width: 641px){ |
|||
// html { |
|||
// font-size: 40px !important; |
|||
// } |
|||
// } |
|||
@ -0,0 +1,27 @@ |
|||
.-slidein-y{ |
|||
animation: slide-in .5s ease; |
|||
} |
|||
|
|||
.-opacityin{ |
|||
animation: slide-in .5s ease; |
|||
} |
|||
|
|||
@keyframes slide-in { |
|||
0%{ |
|||
transform: translateY(-120%); |
|||
opacity: 0; |
|||
} |
|||
100%{ |
|||
transform: translateY(0); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
@keyframes opacity-in { |
|||
0%{ |
|||
opacity: 0; |
|||
} |
|||
100%{ |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@ -0,0 +1,52 @@ |
|||
/* http://meyerweb.com/eric/tools/css/reset/ |
|||
v2.0 | 20110126 |
|||
License: none (public domain) |
|||
*/ |
|||
|
|||
html, body, div, span, applet, object, iframe, |
|||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
|||
a, abbr, acronym, address, big, cite, code, |
|||
del, dfn, em, img, ins, kbd, q, s, samp, |
|||
small, strike, strong, sub, sup, tt, var, |
|||
b, u, i, center, |
|||
dl, dt, dd, ol, ul, li, |
|||
fieldset, form, label, legend, |
|||
table, caption, tbody, tfoot, thead, tr, th, td, |
|||
article, aside, canvas, details, embed, |
|||
figure, figcaption, footer, header, hgroup, |
|||
menu, nav, output, ruby, section, summary, |
|||
time, mark, audio, video { |
|||
margin: 0; |
|||
padding: 0; |
|||
border: 0; |
|||
font-size: 100%; |
|||
font: inherit; |
|||
vertical-align: baseline; |
|||
} |
|||
/* HTML5 display-role reset for older browsers */ |
|||
article, aside, details, figcaption, figure, |
|||
footer, header, hgroup, menu, nav, section { |
|||
display: block; |
|||
} |
|||
body { |
|||
line-height: 1; |
|||
} |
|||
ol, ul { |
|||
list-style: none; |
|||
} |
|||
blockquote, q { |
|||
quotes: none; |
|||
} |
|||
blockquote:before, blockquote:after, |
|||
q:before, q:after { |
|||
content: ''; |
|||
content: none; |
|||
} |
|||
table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0; |
|||
} |
|||
a{ |
|||
text-decoration: none; |
|||
color: inherit; |
|||
} |
|||
@ -0,0 +1,2 @@ |
|||
@import './less/media/media.less'; |
|||
@import './less/util.less'; |
|||
@ -0,0 +1,39 @@ |
|||
/** |
|||
* 响应式 媒体查询类 |
|||
**/ |
|||
@import (reference) "../var.less"; |
|||
|
|||
.choose3(@type, @style) when (@type=xs){ |
|||
@media screen and (max-width: @sm - 0.1px){ |
|||
@style(); |
|||
} |
|||
} |
|||
.choose3(@type, @style) when (@type=sm){ |
|||
@media screen and (min-width: @sm - 0.1px) and (max-width: @md - 0.1px){ |
|||
@style(); |
|||
} |
|||
} |
|||
.choose3(@type, @style) when (@type=md){ |
|||
@media screen and (min-width: @md - 0.1px) and (max-width: @lg - 0.1px){ |
|||
@style(); |
|||
} |
|||
} |
|||
.choose3(@type, @style) when (@type=lg){ |
|||
@media screen and (min-width: @lg - 0.1px) and (max-width: @xl - 0.1px){ |
|||
@style(); |
|||
} |
|||
} |
|||
.choose3(@type, @style) when (@type=xl){ |
|||
@media screen and (min-width: @xl - 0.1px) { |
|||
@style(); |
|||
} |
|||
} |
|||
|
|||
.loop3(@i,@style,@list) when (@i<length(@list)){ |
|||
.choose3(extract(@list,@i+1),@style); |
|||
.loop3(@i+1,@style,@list); |
|||
} |
|||
|
|||
.media_e(@style,@rest...){ |
|||
.loop3(0,@style,@rest); |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
@import (reference) "./exact.less"; |
|||
@import (reference) "./mobile.less"; |
|||
@import (reference) "./pc.less"; |
|||
@ -0,0 +1,39 @@ |
|||
/** |
|||
* 响应式 媒体查询类 |
|||
* 移动端优先 |
|||
**/ |
|||
@import (reference) "../var.less"; |
|||
|
|||
.choose2(@type, @style) when (@type=xs){ |
|||
@media screen and (max-width: @sm - 0.1px){ |
|||
@style(); |
|||
} |
|||
} |
|||
.choose2(@type, @style) when (@type=sm){ |
|||
@media screen and (max-width: @md - 0.1px){ |
|||
@style(); |
|||
} |
|||
} |
|||
.choose2(@type, @style) when (@type=md){ |
|||
@media screen and (max-width: @lg - 0.1px) { |
|||
@style(); |
|||
} |
|||
} |
|||
.choose2(@type, @style) when (@type=lg){ |
|||
@media screen and (max-width: @xl - 0.1px) { |
|||
@style(); |
|||
} |
|||
} |
|||
.choose2(@type, @style) when (@type=xl){ |
|||
@media screen and (min-width: @xl - 0.1px) { |
|||
@style(); |
|||
} |
|||
} |
|||
.loop2(@i,@style,@list) when (@i<length(@list)){ |
|||
.choose2(extract(@list,@i+1),@style); |
|||
.loop2(@i+1,@style,@list); |
|||
} |
|||
|
|||
.media_m(@style,@rest...){ |
|||
.loop2(0,@style,@rest); |
|||
} |
|||
@ -0,0 +1,39 @@ |
|||
/** |
|||
* 响应式 媒体查询类 |
|||
**/ |
|||
@import (reference) "../var.less"; |
|||
|
|||
.choose1(@type, @style) when (@type=xs){ |
|||
@media screen and (max-width: @sm){ |
|||
@style(); |
|||
} |
|||
} |
|||
.choose1(@type, @style) when (@type=sm){ |
|||
@media screen and (min-width: @sm){ |
|||
@style(); |
|||
} |
|||
} |
|||
.choose1(@type, @style) when (@type=md){ |
|||
@media screen and (min-width: @md){ |
|||
@style(); |
|||
} |
|||
} |
|||
.choose1(@type, @style) when (@type=lg){ |
|||
@media screen and (min-width: @lg) { |
|||
@style(); |
|||
} |
|||
} |
|||
.choose1(@type, @style) when (@type=xl){ |
|||
@media screen and (min-width: @xl) { |
|||
@style(); |
|||
} |
|||
} |
|||
|
|||
.loop1(@i,@style,@list) when (@i<length(@list)){ |
|||
.choose1(extract(@list,@i+1),@style); |
|||
.loop1(@i+1,@style,@list); |
|||
} |
|||
|
|||
.media(@style,@rest...){ |
|||
.loop1(0,@style,@rest); |
|||
} |
|||
@ -0,0 +1,48 @@ |
|||
/** |
|||
* 响应式布局类 |
|||
**/ |
|||
|
|||
@totalCell: 24; |
|||
.col-width(@col: 8, @total: @totalCell) { |
|||
width: (@col / @total) * 100%; |
|||
} |
|||
.col-offset(@col: 8, @total: @totalCell) { |
|||
margin-left: (@col / @total) * 100%; |
|||
} |
|||
.col(@i, @mv) when (@i > 0) { |
|||
.col((@i - 1), @mv); // 递归调用自身 |
|||
.col-@{mv}-@{i} { |
|||
float: left; |
|||
box-sizing: border-box; |
|||
.col-width(@i); |
|||
} |
|||
} |
|||
|
|||
.colr(@i) when (@i > 0) { |
|||
.colr((@i - 1)); // 递归调用自身 |
|||
.col-@{i} { |
|||
float: left; |
|||
box-sizing: border-box; |
|||
.col-width(@i); |
|||
} |
|||
.col-offset-@{i} { |
|||
.col-offset(@i); |
|||
} |
|||
} |
|||
|
|||
.row { |
|||
.clearfix(); |
|||
.colr(@totalCell); |
|||
.media({ |
|||
.col(@totalCell, lg); |
|||
}, lg); |
|||
.media({ |
|||
.col(@totalCell, md); |
|||
}, md); |
|||
.media({ |
|||
.col(@totalCell, sm); |
|||
}, sm); |
|||
.media({ |
|||
.col(@totalCell, xs); |
|||
}, xs); |
|||
} |
|||
@ -0,0 +1,58 @@ |
|||
/** |
|||
* 工具类 |
|||
**/ |
|||
|
|||
/** |
|||
* START============清除浮动=================START |
|||
**/ |
|||
.clearfix() { |
|||
&:after { |
|||
clear: both; |
|||
content: "."; |
|||
display: block; |
|||
height: 0; |
|||
line-height: 0; |
|||
overflow: hidden; |
|||
} |
|||
// *height: 1%; |
|||
} |
|||
|
|||
/** |
|||
* OVER=============清除浮动==================OVER |
|||
**/ |
|||
/** |
|||
* START============移动端头发丝=================START |
|||
**/ |
|||
.hairline(@content) { |
|||
&::after { |
|||
content: " "; |
|||
box-sizing: border-box; |
|||
pointer-events: none; |
|||
border: 0 solid #ebedf0; |
|||
position: absolute; |
|||
top: -50%; |
|||
right: -50%; |
|||
bottom: -50%; |
|||
left: -50%; |
|||
-webkit-transform: scale(0.5); |
|||
transform: scale(0.5); |
|||
@content(); |
|||
} |
|||
} |
|||
|
|||
|
|||
/** |
|||
* OVER=============移动端头发丝==================OVER |
|||
**/ |
|||
/** |
|||
* START============文本溢出省略号=================START |
|||
**/ |
|||
.ellipsis(@lines: 1) when (@lines = 1) { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
/** |
|||
* OVER=============文本溢出省略号==================OVER |
|||
**/ |
|||
@ -0,0 +1,5 @@ |
|||
@sm: 768px; |
|||
@md: 992px; |
|||
@lg: 1200px; |
|||
@xl: 1920px; |
|||
|
|||
@ -0,0 +1,30 @@ |
|||
/** |
|||
* 响应式类，控制元素的显示隐藏 |
|||
**/ |
|||
@import (reference) "../var.less"; |
|||
|
|||
@xs-only: e('max-width: @{sm}'); |
|||
@sm-and-up: e('min-width: @{sm}'); |
|||
@sm-only: e('min-width: @{sm}) and (max-width: @{md}'); |
|||
@sm-and-down: e('max-width: @{md}'); |
|||
@md-and-up: e('min-width: @{md}'); |
|||
@md-only: e('min-width: @{md}) and (max-width: @{lg}'); |
|||
@md-and-down: e('max-width: @{lg}'); |
|||
@lg-and-up: e('min-width: @{lg}'); |
|||
@lg-only: e('min-width: @{lg}) and (max-width: @{xl}'); |
|||
@lg-and-down: e('max-width: @{xl}'); |
|||
@xl-only: e('min-width: @{xl}'); |
|||
|
|||
|
|||
@hide-array: xs-only, sm-and-up, sm-only, sm-and-down, md-and-up, md-only, md-and-down, lg-and-up, lg-only, lg-and-down, xl-only; |
|||
|
|||
.hide(@i: 1) when(@i <= length(@hide-array)) { |
|||
@name: extract(@hide-array, @i); |
|||
.hidden-@{name} { |
|||
@media screen and (@@name) { |
|||
display: none !important; |
|||
} |
|||
} |
|||
.hide((@i + 1)); |
|||
} |
|||
.hide(); |
|||
@ -0,0 +1,82 @@ |
|||
<template> |
|||
<div> |
|||
<transition |
|||
name="fade" |
|||
@before-leave="emit('close')" |
|||
@after-leave="emit('destory')" |
|||
> |
|||
<div v-if="isShow" class="toast component"> |
|||
<div class="toast-text">{{ message }}</div> |
|||
</div> |
|||
</transition> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { onMounted, ref } from 'vue' |
|||
|
|||
const isShow = ref(false) |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
message: string |
|||
duration?: number |
|||
}>(), |
|||
{ |
|||
message: '', |
|||
duration: 3000, |
|||
} |
|||
) |
|||
|
|||
const emit = defineEmits<{ |
|||
(e: 'destory'): void |
|||
(e: 'close'): void |
|||
}>() |
|||
onMounted(() => { |
|||
isShow.value = true |
|||
startTimer() |
|||
}) |
|||
|
|||
let timer = null |
|||
function startTimer() { |
|||
if (props.duration) { |
|||
timer = setTimeout(() => { |
|||
close() |
|||
}, props.duration) |
|||
} |
|||
} |
|||
|
|||
function close() { |
|||
isShow.value = false |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.toast.component { |
|||
position: fixed; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
background-color: rgba(70, 70, 70, 0.8); |
|||
border-radius: 5px; |
|||
word-break: break-all; |
|||
max-width: 90vw; |
|||
text-align: center; |
|||
.toast-text { |
|||
user-select: none; |
|||
color: red; |
|||
line-height: 1.5; |
|||
font-size: 16px; |
|||
padding: 4px 10px; |
|||
} |
|||
} |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity 0.5s ease; |
|||
} |
|||
|
|||
.fade-enter-from, |
|||
.fade-leave-to { |
|||
opacity: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,35 @@ |
|||
import { createVNode, render, isVNode } from 'vue' |
|||
import ToastConstructor from './Toast.vue' |
|||
|
|||
type IProp = { |
|||
message: string |
|||
duration?: number |
|||
} |
|||
export type IOps = IProp | string |
|||
|
|||
function createToast(options: IProp) { |
|||
const container = document.createElement('div') |
|||
container.className = `container_toast` |
|||
|
|||
const vm = createVNode(ToastConstructor, options, null) |
|||
render(vm, container) |
|||
|
|||
// @ts-ignore
|
|||
vm.props.onDestory = () => { |
|||
render(null, container) |
|||
} |
|||
|
|||
document.body.appendChild(container.firstElementChild as Element) |
|||
} |
|||
|
|||
function Toast(opts: IOps) { |
|||
if (typeof opts === 'string') { |
|||
opts = { |
|||
message: opts, |
|||
} |
|||
} |
|||
let options = opts |
|||
createToast(options) |
|||
} |
|||
|
|||
export default Toast |
|||
@ -0,0 +1,16 @@ |
|||
import { App } from 'vue' |
|||
import Row from './Row/Row.vue' |
|||
import Column from './Column/Column.vue' |
|||
|
|||
// https://vitejs.dev/guide/features.html#glob-import
|
|||
export default { |
|||
install(app: App) { |
|||
const modules = import.meta.globEager('./{icons,base}/**/*.vue') |
|||
for (const path in modules) { |
|||
const mod = modules[path] |
|||
const module = mod.default || mod |
|||
// let filename = module.__file.slice(module.__file.lastIndexOf("\/")+1,module.__file.lastIndexOf(".vue"))
|
|||
app.component(module.name, module) |
|||
} |
|||
}, |
|||
} |
|||
@ -0,0 +1 @@ |
|||
export const BASE_URL = "https://enesoon-saas-back-test.cn:8381" |
|||
@ -0,0 +1,20 @@ |
|||
import { App, ref } from 'vue' |
|||
|
|||
const isAuth = ref(false) |
|||
setTimeout(()=>{ |
|||
isAuth.value = true |
|||
}, 2500) |
|||
export default { |
|||
install(app: App) { |
|||
app.directive('permission', (el: HTMLDivElement, binding) => { |
|||
const { arg, value} = binding |
|||
console.log(isAuth) |
|||
if (!isAuth.value) { |
|||
// el.remove()
|
|||
el.parentNode?.removeChild(el) |
|||
}else { |
|||
el.parentNode?.appendChild(el) |
|||
} |
|||
}) |
|||
}, |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
export enum IHttpMethod{ |
|||
GET="GET", |
|||
POST="POST" |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
enum EPage{ |
|||
|
|||
HOME, |
|||
|
|||
} |
|||
|
|||
export default EPage |
|||
@ -0,0 +1,20 @@ |
|||
/// <reference types="vite/client" />
|
|||
|
|||
declare module '*.vue' { |
|||
import { DefineComponent } from 'vue' |
|||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
|
|||
const component: DefineComponent<{}, {}, any> |
|||
export default component |
|||
} |
|||
|
|||
interface ImportMetaEnv { |
|||
readonly VITE_SENTRY_URL: string |
|||
readonly VITE_SENTRY_TOKEN: string |
|||
readonly VITE_SENTRY_ORG: string |
|||
readonly VITE_SENTRY_PROJECT: string |
|||
readonly VITE_SENTRY_RELEASE: string |
|||
} |
|||
|
|||
interface ImportMeta { |
|||
readonly env: ImportMetaEnv |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
import { ref } from "vue"; |
|||
|
|||
|
|||
export default function useRootSetting() { |
|||
const openCache = ref(true) |
|||
|
|||
return { |
|||
openCache |
|||
} |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
import { RouteRecordRaw } from "vue-router" |
|||
|
|||
export function useDefineRoute(route: RouteRecordRaw) { |
|||
return route |
|||
} |
|||
|
|||
export function useDefineRoutes( |
|||
routes: RouteRecordRaw[] |
|||
) { |
|||
return routes |
|||
} |
|||
|
|||
type Module = { default: RouteRecordRaw } | { default: RouteRecordRaw[] }; |
|||
export function useRouteConfig(paths: Record<string, any>) { |
|||
let routes:RouteRecordRaw[] = [] |
|||
for (const path in paths) { |
|||
const mod = paths[path] |
|||
const module = mod.default || mod |
|||
if (Array.isArray(module)) { |
|||
routes = module.concat(module) |
|||
} else { |
|||
routes.push(module) |
|||
} |
|||
} |
|||
return routes |
|||
} |
|||
@ -0,0 +1,14 @@ |
|||
import { nextTick, watchEffect } from 'vue' |
|||
import { useRoute } from 'vue-router' |
|||
|
|||
export default function useRouteChange(cb:()=>void, waitRender?: boolean) { |
|||
const route = useRoute() |
|||
watchEffect(async () => { |
|||
if (route.fullPath) { |
|||
if(waitRender){ |
|||
await nextTick() |
|||
} |
|||
cb&&cb() |
|||
} |
|||
}) |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
import { createApp } from "vue" |
|||
import Router from "@/router" |
|||
import Store from "@/store" |
|||
import Directive from "@/directive" |
|||
import Plugins from "@/plugins" |
|||
import Components from "@/components" |
|||
import App from "./App.vue" |
|||
|
|||
// import 'virtual:windi.css'
|
|||
import 'virtual:windi-base.css' |
|||
import 'virtual:windi-components.css' |
|||
import 'virtual:windi-utilities.css' |
|||
|
|||
import { setGlobalOptions } from "vue-request" |
|||
setGlobalOptions({ |
|||
manual: true, // true:必须手动执行run触发 false:自动执行
|
|||
}) |
|||
|
|||
const app = createApp(App) |
|||
app.use(Store) |
|||
app.use(Router) |
|||
app.use(Directive) |
|||
app.use(Plugins) |
|||
app.use(Components) |
|||
|
|||
app.mount("#app") |
|||
@ -0,0 +1,9 @@ |
|||
<template> |
|||
<div class="font-bold text-red-500"> |
|||
<MonacoEditor></MonacoEditor> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import MonacoEditor from '@/pagesUI/editor/editor.vue'; |
|||
</script> |
|||
@ -0,0 +1,20 @@ |
|||
import { useDefineRoutes, useRouteConfig } from "@/hook/useDefineRoute" |
|||
import { LAYOUT } from "@/router/constant" |
|||
|
|||
export default useDefineRoutes([ |
|||
{ |
|||
path: '', |
|||
redirect: '/home', |
|||
component: LAYOUT, |
|||
children: [ |
|||
{ |
|||
path: 'home', |
|||
name: "HOME", |
|||
component: ()=>import("@/pages/Home/Home.vue"), |
|||
meta: { |
|||
title: "HOME" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
]) |
|||
@ -0,0 +1,13 @@ |
|||
<template> |
|||
<div>404 expection</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { useRoute } from 'vue-router' |
|||
import { watchEffect } from 'vue' |
|||
const route = useRoute() |
|||
watchEffect(() => { |
|||
// 可以采用query或者props形式 |
|||
console.log(route.query) |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,42 @@ |
|||
<script lang="ts" setup> |
|||
import SiteHeader from "./SiteHeader/SiteHeader.vue" |
|||
import SiteContent from "./SiteContent/SiteContent.vue" |
|||
import SliderMenu from "./SliderMenu/SliderMenu.vue" |
|||
</script> |
|||
|
|||
<template> |
|||
<section class="app-layout"> |
|||
<SiteHeader></SiteHeader> |
|||
<div class="app-container"> |
|||
<SliderMenu></SliderMenu> |
|||
<div class="app-content"> |
|||
<SiteContent></SiteContent> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
</template> |
|||
|
|||
<style lang="less" scoped> |
|||
.app-layout { |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.app-container { |
|||
flex: 1; |
|||
height: 0; |
|||
display: flex; |
|||
.app-slider { |
|||
flex-shrink: 0; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
background-color: #f9f9f9; |
|||
} |
|||
.app-content { |
|||
flex: 1; |
|||
width: 0; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,31 @@ |
|||
<template> |
|||
<router-view v-slot="{ Component, route: fuck }"> |
|||
<!-- 暂时不搞动画，布局不相同不太好看 --> |
|||
<!-- mode="out-in" 会导致热更新之后切换页面无效 或者说是 keep-alive--> |
|||
<!-- <transition :name="getTransitionName(fuck)" mode="out-in" appear @after-leave="afterLeave"> --> |
|||
<keep-alive :include="cacheList" v-if="openCache"> |
|||
<component :key="route.fullPath" :is="Component" /> |
|||
</keep-alive> |
|||
<component v-else :key="route.fullPath" :is="Component" /> |
|||
<!-- </transition> --> |
|||
</router-view> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { useRoute } from "vue-router" |
|||
import { ref, unref, watchEffect } from "vue" |
|||
|
|||
const route = useRoute() |
|||
const openCache = ref(true) |
|||
|
|||
const cacheList = ref<any[]>([]) |
|||
watchEffect(() => { |
|||
if ( |
|||
route.meta.cache && |
|||
route.name && |
|||
!cacheList.value.includes(unref(route.name)) |
|||
) { |
|||
cacheList.value.push(unref(route.name)) |
|||
} |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,10 @@ |
|||
<template> |
|||
<div>header</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
|
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
@import "./style.less"; |
|||
</style> |
|||
@ -0,0 +1,64 @@ |
|||
|
|||
|
|||
.site-header { |
|||
.site-header__wrapper { |
|||
height: 60px; |
|||
line-height: 60px; |
|||
padding: 0 40px; |
|||
background: #fefefe; |
|||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06); |
|||
position: relative; |
|||
z-index: 10; |
|||
.site_header__logo { |
|||
float: left; |
|||
position: relative; |
|||
height: 100%; |
|||
padding-right: 14px; |
|||
img { |
|||
vertical-align: middle; |
|||
} |
|||
&::after { |
|||
content: ''; |
|||
height: 20px; |
|||
width: 1px; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
background-color: #d7dde4; |
|||
} |
|||
} |
|||
.site_header__menu { |
|||
margin-left: 22px; |
|||
height: 100%; |
|||
&.site_header__left { |
|||
float: left; |
|||
} |
|||
&.site_header__right { |
|||
float: right; |
|||
} |
|||
.sh__menu__item { |
|||
float: left; |
|||
height: 100%; |
|||
cursor: pointer; |
|||
padding: 0 10px; |
|||
position: relative; |
|||
font-size: 12px; |
|||
font-weight: 400; |
|||
color: #292929; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
a { |
|||
color: #292929; |
|||
} |
|||
&.active .shmi__text { |
|||
color: #24a439; |
|||
} |
|||
&:hover .shmi__text { |
|||
color: #24a439; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
<template> |
|||
<div>slider-menu</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
|
|||
</script> |
|||
@ -0,0 +1,11 @@ |
|||
<template> |
|||
<div>login</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
|
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
@import "./style.less"; |
|||
</style> |
|||
@ -0,0 +1,88 @@ |
|||
.page { |
|||
min-height: 100%; |
|||
background: linear-gradient(164deg, #f0f4fb 0%, #dfe6f3 100%); |
|||
.header { |
|||
height: 60px; |
|||
line-height: 60px; |
|||
background: #fefefe; |
|||
.header__wrapper { |
|||
.media_m({ padding: 0 15px; },md); |
|||
height: 100%; |
|||
img { |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
} |
|||
.content { |
|||
margin-top: 93px; |
|||
.media_m({ padding: 0 15px; },md); |
|||
.left-panel { |
|||
margin-right: 17px; |
|||
.site-title { |
|||
font-size: 36px; |
|||
font-weight: 500; |
|||
color: #2e2e2f; |
|||
} |
|||
.site-desc { |
|||
margin-top: 5px; |
|||
font-size: 18px; |
|||
font-weight: 500; |
|||
color: #9e9e9e; |
|||
} |
|||
.site-picture { |
|||
margin-top: 70px; |
|||
position: relative; |
|||
.site-picture-bg { |
|||
position: absolute; |
|||
left: -229px; |
|||
top: -150px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.login-panel { |
|||
background: #ffffff; |
|||
box-shadow: 0px 6px 4px 0px #e5eaef; |
|||
border-radius: 6px; |
|||
padding: 80px 48px 136px; |
|||
overflow: hidden; |
|||
transition: all 0.5s ease; |
|||
.login-text { |
|||
// margin-left: 8px; |
|||
font-size: 18px; |
|||
font-weight: 500; |
|||
color: #0d0d0e; |
|||
margin-bottom: 20px; |
|||
} |
|||
.button { |
|||
cursor: pointer; |
|||
height: 45px; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
display: block; |
|||
width: 100%; |
|||
outline: 0; |
|||
border: 0; |
|||
background: linear-gradient(180deg, #32c14d 0%, #3abe81 100%); |
|||
} |
|||
.forget-pwd { |
|||
display: block; |
|||
text-align: right; |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
color: #3bad4e; |
|||
} |
|||
} |
|||
.copyright { |
|||
font-size: 11px; |
|||
font-weight: 500; |
|||
color: #6d6d6d; |
|||
padding-top: 89px; |
|||
.media_m({ padding-top: 25px; },md); |
|||
text-align: center; |
|||
position: relative; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
<template> |
|||
<div></div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { unref } from 'vue'; |
|||
import { useRouter } from 'vue-router'; |
|||
const { currentRoute, replace } = useRouter(); |
|||
const { params, query } = unref(currentRoute); |
|||
const { path, _redirect_type = 'path' } = params; |
|||
Reflect.deleteProperty(params, '_redirect_type'); |
|||
Reflect.deleteProperty(params, 'path'); |
|||
const _path = Array.isArray(path) ? path.join('/') : path; |
|||
if (_redirect_type === 'name') { |
|||
replace({ |
|||
name: _path, |
|||
query, |
|||
params, |
|||
}); |
|||
} else { |
|||
replace({ |
|||
path: _path.startsWith('/') ? _path : '/' + _path, |
|||
query, |
|||
}); |
|||
} |
|||
</script> |
|||
@ -0,0 +1,44 @@ |
|||
<template> |
|||
<div class="ui-monaco-editor" ref="monacoEL"> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import 'monaco-editor/esm/vs/editor/editor.all.js'; |
|||
import 'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js'; |
|||
|
|||
import * as monaco from "monaco-editor/esm/vs/editor/editor.api" |
|||
import { onMounted, ref } from "vue"; |
|||
import "./work" |
|||
|
|||
let editor: monaco.editor.IStandaloneCodeEditor; |
|||
const monacoEL = ref() |
|||
|
|||
onMounted(()=>{ |
|||
// https://www.typescriptlang.org/dev/typescript-vfs/ |
|||
editor = monaco.editor.create(monacoEL.value, { |
|||
value: "function hello() {\n\talert('Hello world!');\n}", |
|||
language: 'javascript', |
|||
automaticLayout: true, |
|||
// folding: false, |
|||
// theme: 'vs-dark', |
|||
// lineNumbers: 'off', |
|||
// minimap: { |
|||
// enabled: false |
|||
// } |
|||
}); |
|||
window.onresize = () => { |
|||
console.log('Window resize'); |
|||
editor.layout({} as monaco.editor.IDimension); |
|||
} |
|||
}) |
|||
|
|||
</script> |
|||
|
|||
<style scoped lang="less"> |
|||
.ui-monaco-editor{ |
|||
width: 100%; |
|||
height: 500px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
import * as monaco from "monaco-editor"; |
|||
|
|||
//格式化語言
|
|||
export function registerPlugins() { |
|||
// https://www.javaroad.cn/questions/156725
|
|||
const cssFormatProvider = { |
|||
provideDocumentFormattingEdits( |
|||
model: monaco.editor.ITextModel, |
|||
options: any, |
|||
token: any) { |
|||
return [{ |
|||
text: model.getValue() + "222222", // put formatted text here
|
|||
range: model.getFullModelRange() |
|||
}]; |
|||
} |
|||
}; |
|||
monaco.languages.registerDocumentFormattingEditProvider('css', cssFormatProvider); |
|||
monaco.languages.registerDocumentFormattingEditProvider('javascript', cssFormatProvider); |
|||
|
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
//https://stackoverflow.com/questions/65953675/import-monaco-editor-using-vite-2
|
|||
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker' |
|||
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker' |
|||
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker' |
|||
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker' |
|||
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker' |
|||
//@ts-ignore
|
|||
window.MonacoEnvironment = { |
|||
//@ts-ignore
|
|||
getWorker(_, label) { |
|||
if (label === 'json') { |
|||
return new jsonWorker() |
|||
} |
|||
if (label === 'css' || label === 'scss' || label === 'less') { |
|||
return new cssWorker() |
|||
} |
|||
if (label === 'html' || label === 'handlebars' || label === 'razor') { |
|||
return new htmlWorker() |
|||
} |
|||
if (label === 'typescript' || label === 'javascript') { |
|||
return new tsWorker() |
|||
} |
|||
return new editorWorker() |
|||
} |
|||
} |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<a-button |
|||
@click="onClick" |
|||
:disabled="isDisabled" |
|||
:loading="isLoading" |
|||
type="primary" |
|||
size="mini" |
|||
> |
|||
{{ text }} |
|||
</a-button> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { onBeforeUnmount, ref, watchEffect } from 'vue' |
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
duration?: number |
|||
initText?: string |
|||
runText?: string |
|||
loadingText?: string |
|||
resetText?: string |
|||
}>(), |
|||
{ |
|||
runText: '{%s}s 后重新发送', |
|||
initText: '获取验证码', |
|||
loadingText: '正在发送', |
|||
resetText: '重新获取', |
|||
duration: 60, |
|||
} |
|||
) |
|||
const emits = defineEmits<{ |
|||
(event: 'update:modelValue', show: boolean): void |
|||
(event: 'send', start: () => void, done: (isDone: boolean) => void): void |
|||
}>() |
|||
|
|||
const text = ref(props.initText) |
|||
const isDisabled = ref(false) |
|||
const isLoading = ref(false) |
|||
let number = props.duration |
|||
let timeID: any |
|||
|
|||
onBeforeUnmount(() => { |
|||
stop() |
|||
}) |
|||
|
|||
function stop() { |
|||
clearInterval(timeID) |
|||
number = props.duration |
|||
text.value = props.resetText |
|||
isLoading.value = false |
|||
isDisabled.value = false |
|||
emits('update:modelValue', false) |
|||
} |
|||
//获取格式化 |
|||
function getText(second: string | number): string { |
|||
return props.runText.replace(/\{([^{]*?)%s(.*?)\}/g, String(second)) |
|||
} |
|||
function run() { |
|||
isLoading.value = false |
|||
text.value = getText(number) |
|||
clearInterval(timeID) |
|||
timeID = setInterval(() => { |
|||
number-- |
|||
text.value = getText(number) |
|||
if (number <= 0) { |
|||
stop() |
|||
} |
|||
}, 1000) |
|||
} |
|||
|
|||
function onClick() { |
|||
emits( |
|||
'send', |
|||
() => { |
|||
isDisabled.value = true |
|||
isLoading.value = true |
|||
text.value = props.loadingText |
|||
}, |
|||
(isDone: boolean) => { |
|||
if (isDone) { |
|||
run() |
|||
} else { |
|||
stop() |
|||
} |
|||
} |
|||
) |
|||
} |
|||
</script> |
|||
@ -0,0 +1,5 @@ |
|||
https://github.com/anncwb/vite-plugin-mock/blob/main/README.zh_CN.md |
|||
https://github.com/nuysoft/Mock |
|||
|
|||
https://github.com/robinvdvleuten/vuex-persistedstate |
|||
https://github.com/nuysoft/Mock/wiki/Getting-Started |
|||
@ -0,0 +1,13 @@ |
|||
import { App, InjectionKey, readonly } from "vue" |
|||
|
|||
declare module 'vue' { |
|||
interface ComponentCustomProperties { |
|||
$version: string; |
|||
} |
|||
} |
|||
|
|||
export default { |
|||
install(app: App) { |
|||
app.config.globalProperties.$version = '0.0.1' |
|||
}, |
|||
}; |
|||
@ -0,0 +1,95 @@ |
|||
import { |
|||
PAGE_NOT_FOUND_NAME, |
|||
LAYOUT, |
|||
EXCEPTION_COMPONENT, |
|||
LOGIN_COMPONENT, |
|||
REDIRECT_NAME, |
|||
REDIRECT_COMPONENT, |
|||
} from '@/router/constant' |
|||
import { RouteRecordRaw } from 'vue-router' |
|||
|
|||
let routes:RouteRecordRaw[] = [] |
|||
// 读取route下的路由
|
|||
const modules1 = import.meta.globEager('./route/*.ts'); |
|||
// 直接从页面目录读取路由
|
|||
const modules2 = import.meta.globEager('../../pages/**/*Route.ts') |
|||
console.log(modules2); |
|||
|
|||
function readRoute(modules: Record<string, { |
|||
[key: string]: any; |
|||
}>) { |
|||
for (const path in modules) { |
|||
const mod = modules[path] |
|||
const module = mod.default || mod |
|||
if(Array.isArray(module)){ |
|||
routes = routes.concat(module); |
|||
}else{ |
|||
routes.push(module) |
|||
} |
|||
} |
|||
} |
|||
readRoute(modules1) |
|||
readRoute(modules2) |
|||
|
|||
export const asyncRoute = routes |
|||
|
|||
export const LOGIN_ROUTE = { |
|||
path: '/login', |
|||
name: 'Login', |
|||
hidden: true, |
|||
component: LOGIN_COMPONENT, |
|||
meta: { |
|||
title: '登录', |
|||
hideBreadcrumb: true, |
|||
hideSliderMenu: true, |
|||
}, |
|||
} |
|||
|
|||
// 404 on a page
|
|||
export const PAGE_NOT_FOUND_ROUTE = { |
|||
path: '/:path(.*)*', |
|||
name: PAGE_NOT_FOUND_NAME, |
|||
component: LAYOUT, |
|||
children: [ |
|||
{ |
|||
path: '', |
|||
name: PAGE_NOT_FOUND_NAME, |
|||
component: EXCEPTION_COMPONENT, |
|||
meta: { |
|||
title: 'ErrorPage', |
|||
hideBreadcrumb: true, |
|||
hideSliderMenu: true, |
|||
}, |
|||
}, |
|||
], |
|||
} |
|||
|
|||
export const REDIRECT_ROUTE = { |
|||
path: '/redirect', |
|||
component: LAYOUT, |
|||
name: 'RedirectTo', |
|||
hidden: true, |
|||
meta: { |
|||
title: REDIRECT_NAME, |
|||
hideBreadcrumb: true, |
|||
hideSliderMenu: true, |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: '/redirect/:path(.*)', |
|||
name: REDIRECT_NAME, |
|||
component: REDIRECT_COMPONENT, |
|||
meta: { |
|||
title: REDIRECT_NAME, |
|||
hideBreadcrumb: true, |
|||
hideSliderMenu: true, |
|||
}, |
|||
}, |
|||
], |
|||
} |
|||
|
|||
export default [ |
|||
REDIRECT_ROUTE, |
|||
LOGIN_ROUTE, |
|||
PAGE_NOT_FOUND_ROUTE, |
|||
] |
|||
@ -0,0 +1,12 @@ |
|||
export const REDIRECT_NAME = 'Redirect'; |
|||
|
|||
export const PARENT_LAYOUT_NAME = 'ParentLayout'; |
|||
export const PAGE_NOT_FOUND_NAME = 'PageNotFound'; |
|||
|
|||
export const LOGIN_COMPONENT = () => import('@/pagesSys/Login/Login.vue'); |
|||
export const EXCEPTION_COMPONENT = () => import('@/pagesSys/Exception/Exception.vue'); |
|||
export const REDIRECT_COMPONENT = () => import('@/pagesSys/Redirect/Redirect.vue'); |
|||
/** |
|||
* @description: default layout |
|||
*/ |
|||
export const LAYOUT = () => import('@/pagesSys/Layout/Layout.vue'); |
|||
@ -0,0 +1,30 @@ |
|||
import { isNavigationFailure, Router } from 'vue-router' |
|||
import { userStore } from '@/store/module/user' |
|||
import { asyncRoute } from '@/router/basic' |
|||
|
|||
const WHITE_PATH = ['/login', '/home'] |
|||
|
|||
export default (router: Router) => { |
|||
asyncRoute.forEach((route) => { |
|||
router.addRoute(route) |
|||
}) |
|||
console.log(router.getRoutes()) |
|||
router.beforeEach((to, from, next) => { |
|||
const store = userStore() |
|||
const hasToken = !!store.token |
|||
if (WHITE_PATH.includes(to.path)) { |
|||
next() |
|||
} else if (to.meta?.noAuth) { |
|||
next() |
|||
} else { |
|||
if (hasToken) { |
|||
// 判断权限
|
|||
next() |
|||
} else { |
|||
next(`/login?redirect=${to.path}`) |
|||
} |
|||
} |
|||
}) |
|||
|
|||
router.afterEach((to, from, failure) => {}) |
|||
} |
|||
@ -0,0 +1,20 @@ |
|||
import * as VueRouter from 'vue-router' |
|||
import routes from './basic/index' |
|||
import guard from './guard/index' |
|||
|
|||
const router = VueRouter.createRouter({ |
|||
history: VueRouter.createWebHashHistory(), |
|||
routes, |
|||
strict: true, |
|||
scrollBehavior(to, from, savedPosition) { |
|||
if (savedPosition) { |
|||
return savedPosition |
|||
} else { |
|||
return { top: 0 } |
|||
} |
|||
}, |
|||
}) |
|||
|
|||
guard(router) |
|||
|
|||
export default router |
|||
@ -0,0 +1,8 @@ |
|||
import { createPinia } from 'pinia' |
|||
import { App } from 'vue' |
|||
|
|||
export default { |
|||
install(app: App) { |
|||
app.use(createPinia()) |
|||
}, |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
import { defineStore } from "pinia" |
|||
|
|||
export const userStore = defineStore("user", { |
|||
state: () => ({ |
|||
token: '' |
|||
}), |
|||
getters: { |
|||
|
|||
}, |
|||
actions: { |
|||
|
|||
}, |
|||
}) |
|||
@ -0,0 +1,23 @@ |
|||
{ |
|||
"compilerOptions": { |
|||
"skipLibCheck": true, |
|||
"target": "esnext", |
|||
"useDefineForClassFields": true, |
|||
"module": "esnext", |
|||
"moduleResolution": "node", |
|||
"strict": true, |
|||
"jsx": "preserve", |
|||
"sourceMap": true, |
|||
"resolveJsonModule": true, |
|||
"esModuleInterop": true, |
|||
"lib": ["esnext", "dom"], |
|||
"baseUrl": ".", |
|||
"paths": { |
|||
"@/*": ["./src/*"], |
|||
"@util": ["./src/assets/script/util"], |
|||
"#/*": ["./types/*"], |
|||
} |
|||
}, |
|||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "types/**/*.d.ts", "types/**/*.ts", "vite.config.ts"], |
|||
"exclude": ["node_modules"] |
|||
} |
|||
@ -0,0 +1,37 @@ |
|||
import { defineConfig, loadEnv } from 'vite' |
|||
import path from 'path' |
|||
import vue from '@vitejs/plugin-vue' |
|||
import Components from 'unplugin-vue-components/vite' |
|||
import { viteMockServe } from 'vite-plugin-mock' |
|||
import WindiCSS from 'vite-plugin-windicss' |
|||
|
|||
// https://vitejs.dev/config/
|
|||
export default ({ mode, command } : { mode: string, command: string}) => { |
|||
const config = <ImportMetaEnv>loadEnv(mode, process.cwd()) |
|||
return defineConfig({ |
|||
base: './', |
|||
resolve: { |
|||
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], |
|||
alias: { |
|||
'@': path.resolve('./src'), |
|||
'@util': path.resolve('./src/assets/script/util'), |
|||
}, |
|||
}, |
|||
css: { |
|||
preprocessorOptions: { |
|||
less: { |
|||
additionalData: `@import (reference) "@/assets/style/global.less";` |
|||
}, |
|||
}, |
|||
}, |
|||
plugins: [ |
|||
vue(), WindiCSS(), |
|||
Components({ |
|||
dts: true |
|||
}), |
|||
viteMockServe({ |
|||
mockPath: 'mock' |
|||
}), |
|||
] |
|||
}) |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
import { defineConfig } from 'vite-plugin-windicss' |
|||
|
|||
export default defineConfig({}) |
|||
Loading…
Reference in new issue