-
+
欢迎来到 {{ title }}
- 欢迎来到 {{ title }}
-
-
+
-
- {{ text.title }}
-
-
- {{ text.details }}
-
+ {{ text.title }}
+ {{ text.details }}
@@ -38,75 +33,74 @@
type="primary"
block
@click="router.push({ name: 'Login' })"
+ >Let's Get Started
- Let's Get Started
-
-
创建账户？
+
创建账户？
diff --git a/stylelint.config.js b/stylelint.config.js
new file mode 100644
index 0000000..4b3501d
--- /dev/null
+++ b/stylelint.config.js
@@ -0,0 +1,100 @@
+module.exports = {
+ root: true,
+ plugins: ['stylelint-order'],
+ extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
+ customSyntax: 'postcss-html',
+ rules: {
+ 'function-no-unknown': null,
+ 'selector-class-pattern': null,
+ 'selector-pseudo-class-no-unknown': [
+ true,
+ {
+ ignorePseudoClasses: ['global'],
+ },
+ ],
+ 'selector-pseudo-element-no-unknown': [
+ true,
+ {
+ ignorePseudoElements: ['v-deep'],
+ },
+ ],
+ 'at-rule-no-unknown': [
+ true,
+ {
+ ignoreAtRules: [
+ 'tailwind',
+ 'apply',
+ 'variants',
+ 'responsive',
+ 'screen',
+ 'function',
+ 'if',
+ 'each',
+ 'include',
+ 'mixin',
+ ],
+ },
+ ],
+ 'no-empty-source': null,
+ 'string-quotes': null,
+ 'named-grid-areas-no-invalid': null,
+ 'unicode-bom': 'never',
+ 'no-descending-specificity': null,
+ 'font-family-no-missing-generic-family-keyword': null,
+ 'declaration-colon-space-after': 'always-single-line',
+ 'declaration-colon-space-before': 'never',
+ // 'declaration-block-trailing-semicolon': 'always',
+ 'rule-empty-line-before': [
+ 'always',
+ {
+ ignore: ['after-comment', 'first-nested'],
+ },
+ ],
+ 'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
+ 'order/order': [
+ [
+ 'dollar-variables',
+ 'custom-properties',
+ 'at-rules',
+ 'declarations',
+ {
+ type: 'at-rule',
+ name: 'supports',
+ },
+ {
+ type: 'at-rule',
+ name: 'media',
+ },
+ 'rules',
+ ],
+ { severity: 'warning' },
+ ],
+ },
+ ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
+ overrides: [
+ {
+ files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],
+ extends: ['stylelint-config-recommended'],
+ rules: {
+ 'keyframes-name-pattern': null,
+ 'selector-pseudo-class-no-unknown': [
+ true,
+ {
+ ignorePseudoClasses: ['deep', 'global'],
+ },
+ ],
+ 'selector-pseudo-element-no-unknown': [
+ true,
+ {
+ ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'],
+ },
+ ],
+ },
+ },
+ {
+ files: ['*.less', '**/*.less'],
+ customSyntax: 'postcss-less',
+ extends: ['stylelint-config-standard', 'stylelint-config-recommended-vue'],
+ },
+ ],
+};
diff --git a/tsconfig.json b/tsconfig.json
index 2071caf..3f84553 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,26 +1,26 @@
{
"compilerOptions": {
"target": "ESNext",
- "jsx": "preserve",
- "lib": ["ESNext", "DOM"],
"useDefineForClassFields": true,
- "baseUrl": ".",
+ "allowSyntheticDefaultImports": true,
"module": "ESNext",
"moduleResolution": "Node",
+ "strict": true,
+ "sourceMap": true,
+ "jsx": "preserve",
+ "baseUrl": ".",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "esModuleInterop": true,
+ "lib": ["ESNext", "DOM"],
+ "types": ["vite/client"],
+ "typeRoots": ["./node_modules/@types/", "./types"],
+ "noImplicitAny": false,
+ "skipLibCheck": true,
"paths": {
"@/*": ["src/*"],
"#/*": ["types/*"]
- },
- "resolveJsonModule": true,
- "typeRoots": ["./node_modules/@types/", "./types"],
- "types": ["vite/client"],
- "strict": true,
- "noImplicitAny": false,
- "sourceMap": true,
- "allowSyntheticDefaultImports": true,
- "esModuleInterop": true,
- "isolatedModules": true,
- "skipLibCheck": true
+ }
},
"include": [
"src/**/*.ts",
diff --git a/types/config.d.ts b/types/config.d.ts
index d22f076..d217959 100644
--- a/types/config.d.ts
+++ b/types/config.d.ts
@@ -1,29 +1,29 @@
export interface GlobConfig {
- title: string
- titleCN: string
- apiUrl: string
- shortName: string
- urlPrefix?: string
- uploadUrl?: string
- prodMock: boolean
- imgUrl?: string
+ title: string;
+ titleCN: string;
+ apiUrl: string;
+ shortName: string;
+ urlPrefix?: string;
+ uploadUrl?: string;
+ prodMock: boolean;
+ imgUrl?: string;
}
export interface GlobEnvConfig {
// 标题
- VITE_GLOB_APP_TITLE: string
+ VITE_GLOB_APP_TITLE: string;
// 中文标题
- VITE_GLOB_APP_TITLE_CN: string
+ VITE_GLOB_APP_TITLE_CN: string;
// 接口地址
- VITE_GLOB_API_URL: string
+ VITE_GLOB_API_URL: string;
// 接口前缀
- VITE_GLOB_API_URL_PREFIX?: string
+ VITE_GLOB_API_URL_PREFIX?: string;
// Project abbreviation
- VITE_GLOB_APP_SHORT_NAME: string
+ VITE_GLOB_APP_SHORT_NAME: string;
// 图片上传地址
- VITE_GLOB_UPLOAD_URL?: string
+ VITE_GLOB_UPLOAD_URL?: string;
// 图片前缀地址
- VITE_GLOB_IMG_URL?: string
+ VITE_GLOB_IMG_URL?: string;
// 生产环境开启mock
- VITE_GLOB_PROD_MOCK: boolean
+ VITE_GLOB_PROD_MOCK: boolean;
}
diff --git a/types/global.d.ts b/types/global.d.ts
index 95c7c2d..abd3ce6 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -1,9 +1,9 @@
import type {
+ VNodeChild,
ComponentPublicInstance,
FunctionalComponent,
- VNodeChild,
PropType as VuePropType,
-} from 'vue'
+} from 'vue';
// declare global 在具有 import 或 export 声明全局范围内的事物的文件中使用。
// 这在包含 import 或 export 因为此类文件被视为模块的文件中是必需的，并且在模块中声明的任何内容都在模块范围内。
@@ -12,66 +12,66 @@ import type {
declare global {
const __APP_INFO__: {
pkg: {
- name: string
- version: string
- dependencies: Recordable
- devDependencies: Recordable
- }
- lastBuildTime: string
- }
+ name: string;
+ version: string;
+ dependencies: Recordable;
+ devDependencies: Recordable;
+ };
+ lastBuildTime: string;
+ };
// vue
- type PropType = VuePropType
- type VueNode = VNodeChild | JSX.Element
+ type PropType = VuePropType;
+ type VueNode = VNodeChild | JSX.Element;
export type Writable = {
-readonly [P in keyof T]: T[P];
- }
+ };
- type Nullable = T | null
- type NonNullable = T extends null | undefined ? never : T
- type Recordable = Record
- interface ReadonlyRecordable {
- readonly [key: string]: T
- }
- interface Indexable {
- [key: string]: T
- }
+ type Nullable = T | null;
+ type NonNullable = T extends null | undefined ? never : T;
+ type Recordable = Record;
+ type ReadonlyRecordable = {
+ readonly [key: string]: T;
+ };
+ type Indexable = {
+ [key: string]: T;
+ };
type DeepPartial = {
[P in keyof T]?: DeepPartial;
- }
- type TimeoutHandle = ReturnType
- type IntervalHandle = ReturnType
+ };
+ type TimeoutHandle = ReturnType;
+ type IntervalHandle = ReturnType;
interface ChangeEvent extends Event {
- target: HTMLInputElement
+ target: HTMLInputElement;
}
interface WheelEvent {
- path?: EventTarget[]
+ path?: EventTarget[];
}
interface ImportMetaEnv extends ViteEnv {
- __: unknown
+ __: unknown;
}
interface ViteEnv {
- VITE_PORT: number
- VITE_USE_MOCK: boolean
- VITE_PUBLIC_PATH: string
- VITE_GLOB_APP_TITLE: string
- VITE_GLOB_APP_SHORT_NAME: string
- VITE_DROP_CONSOLE: boolean
- VITE_GLOB_PROD_MOCK: boolean
- VITE_GLOB_IMG_URL: string
- VITE_PROXY: [string, string][]
- VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none'
- VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean
+ VITE_PORT: number;
+ VITE_USE_MOCK: boolean;
+ VITE_PUBLIC_PATH: string;
+ VITE_GLOB_APP_TITLE: string;
+ VITE_GLOB_APP_SHORT_NAME: string;
+ VITE_DROP_CONSOLE: boolean;
+ VITE_GLOB_PROD_MOCK: boolean;
+ VITE_GLOB_IMG_URL: string;
+ VITE_PROXY: [string, string][];
+ VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none';
+ VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
}
}
declare module 'vue' {
export type JSXComponent =
| { new (): ComponentPublicInstance }
- | FunctionalComponent
+ | FunctionalComponent;
}
diff --git a/types/index.d.ts b/types/index.d.ts
index c80f3f2..6f3e2a6 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,29 +1,29 @@
declare interface Fn {
- (...arg: T[]): R
+ (...arg: T[]): R;
}
declare interface PromiseFn {
- (...arg: T[]): Promise
+ (...arg: T[]): Promise;
}
-declare type RefType = T | null
+declare type RefType = T | null;
// 就是数组里的 value 是这个对象类型
declare type LabelValueOptions = {
- label: string
- value: any
- disabled: boolean
- [key: string]: string | number | boolean
-}[]
+ label: string;
+ value: any;
+ disabled: boolean;
+ [key: string]: string | number | boolean;
+}[];
-declare type EmitType = (event: string, ...args: any[]) => void
+declare type EmitType = (event: string, ...args: any[]) => void;
-declare type TargetContext = '_self' | '_blank'
+declare type TargetContext = '_self' | '_blank';
declare interface ComponentElRef {
- $el: T
+ $el: T;
}
-declare type ComponentRef = ComponentElRef | null
+declare type ComponentRef = ComponentElRef | null;
-declare type ElRef = Nullable
+declare type ElRef = Nullable;
diff --git a/types/modules.d.ts b/types/modules.d.ts
index 32b11ad..6ca5b6c 100644
--- a/types/modules.d.ts
+++ b/types/modules.d.ts
@@ -1,9 +1,7 @@
-/* eslint-disable ts/ban-types */
///
declare module '*.vue' {
- import type { DefineComponent } from 'vue'
-
- const Component: DefineComponent<{}, {}, any>
- export default Component
+ import { DefineComponent } from 'vue';
+ const Component: DefineComponent<{}, {}, any>;
+ export default Component;
}
diff --git a/uno.config.ts b/uno.config.ts
deleted file mode 100644
index d4f8712..0000000
--- a/uno.config.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-// uno.config.ts
-import {
- defineConfig,
- presetAttributify,
- presetIcons,
- presetTypography,
- presetUno,
- presetWebFonts,
-} from 'unocss'
-
-import transformerVariantGroup from '@unocss/transformer-variant-group'
-import transformerDirectives from '@unocss/transformer-directives'
-
-export default defineConfig({
- // ...UnoCSS options
- presets: [
- // 此预设尝试提供流行的实用程序优先框架的通用超集，包括 Tailwind CSS、Windi CSS、Bootstrap、Tachyons 等
- presetUno(),
-
- // 图标预设: https://unocss.dev/presets/icons
- presetIcons({
- extraProperties: {
- 'display': 'inline-block',
- 'vertical-align': 'middle',
- // ...
- },
- }),
-
- // 属性模式(在 class 属性过多的情况下优先使用属性模式，否则将会变得难以维护)
- // https://unocss.dev/presets/attributify#attributify-mode
- presetAttributify(),
-
- // https://unocss.dev/presets/typography#usage
- presetTypography(),
-
- // 网络字体预设：https://unocss.dev/presets/web-fonts
- presetWebFonts({
- // 默认字体提供商 https://unocss.dev/presets/web-fonts#providers
- provider: 'google',
- // https://unocss.dev/presets/web-fonts#example
- fonts: {
- mono: ['Fira Code'],
- },
- }),
- ],
- transformers: [
- // 启用 Windi CSS for UnoCSS 的变体组功能(就是简写，具体看链接): https://unocss.dev/transformers/variant-group#usage
- transformerVariantGroup(),
- // 在样式类里你也可以写原子化 css 具体看链接: https://unocss.dev/transformers/directives#usage
- // Unknown at rule @apply: https://github.com/unocss/unocss/issues/2401
- transformerDirectives(),
- ],
-
- // 一些实用的自定义组合
- shortcuts: {
- 'm-0-auto': 'm-0 ma', // margin: 0 auto
- 'wh-full': 'w-full h-full', // width: 100%, height: 100%
- 'flex-center': 'flex justify-center items-center', // flex布局居中
- 'flex-x-center': 'flex justify-center', // flex布局：主轴居中
- 'flex-y-center': 'flex items-center', // flex布局：交叉轴居中
- 'text-overflow': 'overflow-hidden whitespace-nowrap text-ellipsis', // 文本溢出显示省略号
- 'text-break': 'whitespace-normal break-all break-words', // 文本溢出换行
- },
-})
diff --git a/vite.config.ts b/vite.config.ts
index a6b4908..86460bd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,19 +1,17 @@
-import { resolve } from 'node:path'
-import type { ConfigEnv, UserConfig } from 'vite'
-import { loadEnv } from 'vite'
-import { format } from 'date-fns'
-import { wrapperEnv } from './build/utils'
-import { createVitePlugins } from './build/vite/plugin'
-import { OUTPUT_DIR } from './build/constant'
-import { createProxy } from './build/vite/proxy'
-import pkg from './package.json'
+import { ConfigEnv, UserConfig } from 'vite';
+import { loadEnv } from 'vite';
+import { wrapperEnv } from './build/utils';
+import { createVitePlugins } from './build/vite/plugin';
+import { OUTPUT_DIR } from './build/constant';
+import { resolve } from 'path';
+import { createProxy } from './build/vite/proxy';
+import pkg from './package.json';
+import { format } from 'date-fns';
+const { dependencies, devDependencies, name, version } = pkg;
-const { dependencies, devDependencies, name, version } = pkg
-
-// 当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。
// path.resolve () 方法用于将一系列路径段解析为绝对路径。它通过处理从右到左的路径序列来工作，在每个路径之前添加，直到创建绝对路径。
function pathResolve(dir: string) {
- return resolve(process.cwd(), '.', dir)
+ return resolve(process.cwd(), '.', dir);
}
const __APP_INFO__ = {
@@ -21,25 +19,25 @@ const __APP_INFO__ = {
pkg: { dependencies, devDependencies, name, version },
// 最后编译时间
lastBuildTime: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
-}
+};
/** @type {import('vite').UserConfig} */
export default ({ command, mode }: ConfigEnv): UserConfig => {
// process.cwd() 方法返回 Node.js 进程的当前工作目录
// mode 返回应用的环境模式 development（开发环境） 或者 production（生产环境）
// command 返回（dev/serve 或 build）命令模式，yarn dev 返回 dev/serve yarn build 返回 build
- const root = process.cwd()
+ const root = process.cwd();
// loadEnv() 根据 mode 检查 root(项目根路径) 路径下 .env、.env.development 环境文件，输出 NODE_ENV 和 VITE_ 开头的键值队
- const env = loadEnv(mode, root)
+ const env = loadEnv(mode, root);
// 读取并处理所有环境变量配置文件 .env
- const viteEnv = wrapperEnv(env)
+ const viteEnv = wrapperEnv(env);
- const { VITE_PUBLIC_PATH, VITE_DROP_CONSOLE, VITE_PORT, VITE_PROXY, VITE_GLOB_PROD_MOCK }
- = viteEnv
+ const { VITE_PUBLIC_PATH, VITE_DROP_CONSOLE, VITE_PORT, VITE_PROXY, VITE_GLOB_PROD_MOCK } =
+ viteEnv;
- const prodMock = VITE_GLOB_PROD_MOCK
+ const prodMock = VITE_GLOB_PROD_MOCK;
- const isBuild = command === 'build'
+ const isBuild = command === 'build';
// command === 'build'
return {
base: VITE_PUBLIC_PATH,
@@ -51,12 +49,12 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
// @/xxxx => src/xxxx
{
find: /\@\//,
- replacement: `${pathResolve('src')}/`,
+ replacement: pathResolve('src') + '/',
},
// #/xxxx => types/xxxx
{
find: /\#\//,
- replacement: `${pathResolve('types')}/`,
+ replacement: pathResolve('types') + '/',
},
],
dedupe: ['vue'],
@@ -71,7 +69,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
esbuild: {
// 使用 esbuild 压缩 剔除 console.log
- drop: VITE_DROP_CONSOLE ? ['debugger', 'console'] : [],
+ pure: VITE_DROP_CONSOLE ? ['console.log', 'debugger'] : [],
// minify: true, // minify: true, 等于 minify: 'esbuild',
},
@@ -98,26 +96,6 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
reportCompressedSize: true,
// chunk 大小警告的限制（以 kbs 为单位）
chunkSizeWarningLimit: 2000,
- // 自定义底层的 Rollup 打包配置
- rollupOptions: {
- // 静态资源分类打包
- output: {
- chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
- entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
- assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等
- // 将 node_modules 三方依赖包最小化拆分
- manualChunks(id) {
- if (id.includes('node_modules') && !id.includes('@antv')) {
- const paths = id.toString().split('node_modules/')
- if (paths[2]) {
- return paths[2].split('/')[0].toString()
- }
-
- return paths[1].split('/')[0].toString()
- }
- },
- },
- },
},
css: {
@@ -133,16 +111,8 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
server: {
host: true,
- // 服务启动时是否自动打开浏览器
- open: true,
- // 服务端口号
- port: Number(VITE_PORT),
+ port: VITE_PORT,
proxy: createProxy(VITE_PROXY),
- // 预热文件以降低启动期间的初始页面加载时长
- warmup: {
- // 预热的客户端文件：首页、views、 components
- clientFiles: ['./index.html', './src/{views,components}/*'],
- },
// proxy: {
// '/api': {
// target: '',
@@ -152,31 +122,13 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
// }
},
- // 有需要再打开，否则 既不优化 也不排除
optimizeDeps: {
- /**
- * 依赖预构建，vite 启动时会将下面 include 里的模块，编译成 esm 格式并缓存到 node_modules/.vite 文件夹，
- * 页面加载到对应模块时如果浏览器有缓存就读取浏览器缓存，如果没有会读取本地缓存并按需加载
- * 尤其当您禁用浏览器缓存时（这种情况只应该发生在调试阶段）必须将对应模块加入到 include 里，
- * 否则会遇到开发环境切换页面卡顿的问题（vite 会认为它是一个新的依赖包会重新加载并强制刷新页面），
- * 因为它既无法使用浏览器缓存，又没有在本地 node_modules/.vite 里缓存
- * 温馨提示：如果你使用的第三方库是全局引入，也就是引入到 src/main.ts 文件里，
- * 就不需要再添加到 include 里了，因为 vite 会自动将它们缓存到 node_modules/.vite
- */
- include: [
- 'pinia',
- 'lodash-es',
- 'axios',
- '@vicons/antd',
- '@vicons/ionicons5',
- ],
+ include: [],
// 打包时强制排除的依赖项
- exclude: [
-
- ],
+ exclude: [],
},
// 加载插件
plugins: createVitePlugins(viteEnv, isBuild, prodMock),
- }
-}
+ };
+};
diff --git a/windi.config.ts b/windi.config.ts
new file mode 100644
index 0000000..86db182
--- /dev/null
+++ b/windi.config.ts
@@ -0,0 +1,78 @@
+import { defineConfig } from 'vite-plugin-windicss';
+
+export default defineConfig({
+ darkMode: 'class',
+ attributify: true,
+ plugins: [createEnterPlugin()],
+ theme: {
+ extend: {
+ textColor: {
+ darkBlue: '#243658',
+ garyWhite: '#f5f5f5',
+ },
+ zIndex: {
+ '-1': '-1',
+ },
+ colors: {
+ primary: '#5d9dfe',
+ },
+ screens: {
+ sm: '576px',
+ md: '768px',
+ lg: '992px',
+ xl: '1200px',
+ '2xl': '1600px',
+ },
+ },
+ },
+});
+
+/**
+ * Used for animation when the element is displayed.
+ * @param maxOutput The larger the maxOutput output, the larger the generated css volume.
+ */
+function createEnterPlugin(maxOutput = 10) {
+ const createCss = (index: number, d = 'x') => {
+ const upd = d.toUpperCase();
+ return {
+ [`*> .enter-${d}:nth-child(${index})`]: {
+ transform: `translate${upd}(50px)`,
+ },
+ [`*> .-enter-${d}:nth-child(${index})`]: {
+ transform: `translate${upd}(-50px)`,
+ },
+ [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
+ 'z-index': `${10 - index}`,
+ opacity: '0',
+ animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
+ 'animation-fill-mode': 'forwards',
+ 'animation-delay': `${(index * 1) / 10}s`,
+ },
+ };
+ };
+ const handler = ({ addBase }) => {
+ const addRawCss = {};
+ for (let index = 1; index < maxOutput; index++) {
+ Object.assign(addRawCss, {
+ ...createCss(index, 'x'),
+ ...createCss(index, 'y'),
+ });
+ }
+ addBase({
+ ...addRawCss,
+ [`@keyframes enter-x-animation`]: {
+ to: {
+ opacity: '1',
+ transform: 'translateX(0)',
+ },
+ },
+ [`@keyframes enter-y-animation`]: {
+ to: {
+ opacity: '1',
+ transform: 'translateY(0)',
+ },
+ },
+ });
+ };
+ return { handler };
+}
+
+ 
+ 
+