kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: v2 coding

This commit is contained in:
kailong321200875 2023-04-17 09:23:03 +08:00
parent ac2df93af8
commit a43e286186
13 changed files with 79 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -66,9 +66,11 @@
"@types/qs": "^6.9.7",
"@typescript-eslint/eslint-plugin": "^5.58.0",
"@typescript-eslint/parser": "^5.58.0",
"@unocss/preset-wind": "^0.51.4",
"@vitejs/plugin-legacy": "^4.0.2",
"@vitejs/plugin-vue": "^4.1.0",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue-macros/volar": "^0.9.5",
"autoprefixer": "^10.4.14",
"consola": "^3.0.1",
"eslint": "^8.38.0",
@ -94,6 +96,7 @@
"stylelint-order": "^6.0.3",
"terser": "^5.16.9",
"typescript": "5.0.4",
"unocss": "^0.51.4",
"unplugin-vue-define-options": "^1.3.3",
"vite": "4.2.1",
"vite-plugin-ejs": "^1.6.4",

2
src/components/Descriptions/src/Descriptions.vue
View File

@ -68,7 +68,7 @@ const toggleClick = () => {
<div
:class="[
prefixCls,
'bg-[var(--el-color-white)] dark:(bg-[var(--el-bg-color)] border-[var(--el-border-color)] border-1px)'
'bg-[var(--el-color-white)] dark:bg-[var(--el-bg-color)] dark:border-[var(--el-border-color)] dark:border-1px'
]"
>
<div

4
src/layout/components/useRenderLayout.tsx
View File

@ -83,9 +83,9 @@ export const useRenderLayout = () => {
class={[
{
'fixed top-0 left-0 z-10': fixedHeader.value,
'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
collapse.value && fixedHeader.value && !mobile.value,
'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
!collapse.value && fixedHeader.value && !mobile.value,
'!w-full !left-0': mobile.value
}

2
src/main.ts
View File

@ -1,5 +1,5 @@
// 引入windi css
import '@/plugins/windi.css'
import '@/plugins/unocss'
// 导入全局的svg图标
import '@/plugins/svgIcon'

1
src/plugins/unocss/index.ts Normal file
View File

@ -0,0 +1 @@
import 'virtual:uno.css'

3
src/plugins/windi.css/index.ts
View File

@ -1,3 +0,0 @@
import 'virtual:windi.css'
import 'virtual:windi-devtools'

2
src/views/Dashboard/Workplace.vue
View File

@ -133,7 +133,7 @@ const { t } = useI18n()
</div>
</ElCol>
<ElCol :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<div class="flex h-70px items-center justify-end <sm:mt-20px">
<div class="flex h-70px items-center justify-end lt-sm:mt-20px">
<div class="px-8px text-right">
<div class="text-14px text-gray-400 mb-20px">{{ t('workplace.project') }}</div>
<CountTo

20
src/views/Login/Login.vue
View File

@ -30,11 +30,11 @@ const toLogin = () => {
<template>
<div
:class="prefixCls"
class="h-[100%] relative <xl:bg-v-dark <sm:px-10px <xl:px-10px <md:px-10px"
class="h-[100%] relative lt-xl:v-dark lt-sm:px-10px lt-xl:px-10px lt-md:px-10px"
>
<div class="relative h-full flex mx-auto">
<div
:class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px <xl:hidden`"
:class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
>
<div class="flex items-center relative text-white">
<img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
@ -54,30 +54,32 @@ const toLogin = () => {
</TransitionGroup>
</div>
</div>
<div class="flex-1 p-30px <sm:p-10px dark:bg-v-dark relative">
<div class="flex justify-between items-center text-white @2xl:justify-end @xl:justify-end">
<div class="flex items-center @2xl:hidden @xl:hidden">
<div class="flex-1 p-30px lt-sm:p-10px dark:v-dark relative">
<div
class="flex justify-between items-center text-white at-2xl:justify-end at-xl:justify-end"
>
<div class="flex items-center at-2xl:hidden at-xl:hidden">
<img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" />
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
</div>
<div class="flex justify-end items-center space-x-10px">
<ThemeSwitch />
<LocaleDropdown class="<xl:text-white dark:text-white" />
<LocaleDropdown class="lt-xl:text-white dark:text-white" />
</div>
</div>
<Transition appear enter-active-class="animate__animated animate__bounceInRight">
<div
class="h-full flex items-center m-auto w-[100%] @2xl:max-w-500px @xl:max-w-500px @md:max-w-500px @lg:max-w-500px"
class="h-full flex items-center m-auto w-[100%] at-2xl:max-w-500px at-xl:max-w-500px at-md:max-w-500px at-lg:max-w-500px"
>
<LoginForm
v-if="isLogin"
class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)"
class="p-20px h-auto m-auto lt-xl:rounded-3xl lt-xl:light:bg-white"
@to-register="toRegister"
/>
<RegisterForm
v-else
class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)"
class="p-20px h-auto m-auto lt-xl:rounded-3xl lt-xl:light:bg-white"
@to-login="toLogin"
/>
</div>

2
src/views/Login/components/LoginForm.vue
View File

@ -191,7 +191,7 @@ const toRegister = () => {
label-position="top"
hide-required-asterisk
size="large"
class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
class="dark:border-1 dark:border-[var(--el-border-color)] dark:border-solid"
@register="register"
>
<template #title>

2
src/views/Login/components/RegisterForm.vue
View File

@ -116,7 +116,7 @@ const loginRegister = async () => {
label-position="top"
hide-required-asterisk
size="large"
class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
class="dark:border-1 dark:border-[var(--el-border-color)] dark:border-solid"
@register="register"
>
<template #title>

9
tsconfig.json
View File

@ -10,7 +10,7 @@
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"baseUrl": ".",
"baseUrl": "./",
"allowJs": true,
"forceConsistentCasingInFileNames": true,
"allowSyntheticDefaultImports": true,
@ -31,9 +31,8 @@
"@types/qrcode",
"vite-plugin-svg-icons/client",
"unplugin-vue-define-options/macros-global"
],
"typeRoots": ["./node_modules/@types/", "./types"]
]
},
"include": ["src/**/*", "types/**/*.d.ts", "mock/**/*.ts"],
"exclude": ["dist", "node_modules"]
"include": ["src", "types/**/*.d.ts", "mock/**/*.ts"]
// "exclude": ["dist", "node_modules"]
}

45
uno.config.ts Normal file
View File

@ -0,0 +1,45 @@
import { defineConfig, toEscapedSelector as e, presetUno } from 'unocss'
export default defineConfig({
// ...UnoCSS options
rules: [
[
'v-dark',
{
'background-color': 'var(--dark-bg-color)'
}
],
[/^border-top-(\d+)$/, (match) => ({ 'border-top-width': `${match[1]}px` })],
[/^border-left-(\d+)$/, (match) => ({ 'border-left-width': `${match[1]}px` })],
[/^border-right-(\d+)$/, (match) => ({ 'border-right-width': `${match[1]}px` })],
[/^border-bottom-(\d+)$/, (match) => ({ 'border-bottom-width': `${match[1]}px` })],
[
/^hover-trigger(.+)$/,
([, name], { rawSelector, currentSelector, variantHandlers, theme }) => {
console.log(variantHandlers)
// if you want, you can disable the variants for this rule
if (variantHandlers.length) return
const selector = e(rawSelector)
// return a string instead of an object
return `
${selector} {
display: flex;
height: 100%;
padding: 1px 10px 0;
cursor: pointer;
align-items: center;
transition: background var(--transition-time-02);
}
/* you can have multiple rules */
${selector}:hover {
background-color: var(--top-header-hover-color);
}
.dark ${selector} {
background-color: var(--el-bg-color-overlay);
}
`
}
]
],
presets: [presetUno({ dark: 'class', attributify: false })]
})

11
vite.config.ts
View File

@ -3,7 +3,7 @@ import { loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'
import Vue from '@vitejs/plugin-vue'
import VueJsx from '@vitejs/plugin-vue-jsx'
import WindiCSS from 'vite-plugin-windicss'
// import WindiCSS from 'vite-plugin-windicss'
import progress from 'vite-plugin-progress'
import EslintPlugin from 'vite-plugin-eslint'
import { ViteEjsPlugin } from "vite-plugin-ejs"
@ -11,8 +11,11 @@ import { viteMockServe } from 'vite-plugin-mock'
import PurgeIcons from 'vite-plugin-purge-icons'
import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite"
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// @ts-expect-error
import DefineOptions from "unplugin-vue-define-options/vite"
import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
import UnoCSS from 'unocss/vite'
// import { sveltekit } from '@sveltejs/kit/vite'
// https://vitejs.dev/config/
const root = process.cwd()
@ -34,7 +37,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
plugins: [
Vue(),
VueJsx(),
WindiCSS(),
// WindiCSS(),
progress(),
createStyleImportPlugin({
resolves: [ElementPlusResolve()],
@ -75,7 +78,9 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
DefineOptions(),
ViteEjsPlugin({
title: env.VITE_APP_TITLE
})
}),
UnoCSS(),
// sveltekit(),
],
css: {