diff --git a/build/vite/vconsole.ts b/build/vite/vconsole.ts index 541270e..56c0238 100644 --- a/build/vite/vconsole.ts +++ b/build/vite/vconsole.ts @@ -1,44 +1,44 @@ -import path from 'node:path' -import { viteVConsole } from 'vite-plugin-vconsole' - -export function createViteVConsole() { - return viteVConsole({ - entry: [path.resolve('src/main.ts')], - enabled: false, - config: { - maxLogNumber: 1000, - theme: 'light', - }, - // https://github.com/vadxq/vite-plugin-vconsole/issues/21 - dynamicConfig: { - theme: `document.documentElement.classList.contains('dark') ? 'dark' : 'light'`, - }, - eventListener: ` - const targetElement = document.querySelector('html'); // 择要监听的元素 - const observerOptions = { - attributes: true, // 监听属性变化 - attributeFilter: ['class'] // 只监听class属性变化 - }; - - // 定义回调函数来处理观察到的变化 - function handleAttributeChange(mutationsList) { - for(let mutation of mutationsList) { - if (mutation.type === 'attributes' && mutation.attributeName === 'class') { - if (window && window.vConsole) { - window.vConsole.dynamicChange.value = new Date().getTime(); - } - } - } - } - - // 创建观察者实例并传入回调函数 - const observer = new MutationObserver(handleAttributeChange); - - // 开始观察目标元素 - observer.observe(targetElement, observerOptions); - - // 当不再需要观察时，停止观察 - // observer.disconnect(); - `, - }) -} +import path from 'node:path' +import { viteVConsole } from 'vite-plugin-vconsole' + +export function createViteVConsole() { + return viteVConsole({ + entry: [path.resolve('src/main.ts')], + enabled: false, + config: { + maxLogNumber: 1000, + theme: 'light', + }, + // https://github.com/vadxq/vite-plugin-vconsole/issues/21 + dynamicConfig: { + theme: `document.documentElement.classList.contains('dark') ? 'dark' : 'light'`, + }, + eventListener: ` + const targetElement = document.querySelector('html'); // Choose the elements to be monitored + const observerOptions = { + attributes: true, // Monitor attribute changes + attributeFilter: ['class'] // Only listen to changes in class attributes + }; + + // Define a callback function to deal with observed changes + function handleAttributeChange(mutationsList) { + for(let mutation of mutationsList) { + if (mutation.type === 'attributes' && mutation.attributeName === 'class') { + if (window && window.vConsole) { + window.vConsole.dynamicChange.value = new Date().getTime(); + } + } + } + } + + // Create an observer instance and pass in the callback function + const observer = new MutationObserver(handleAttributeChange); + + // Start observing the target element + observer.observe(targetElement, observerOptions); + + // Stop observing when you no longer need to observe. + // observer.disconnect(); + `, + }) +} diff --git a/src/api/typing.ts b/src/api/typing.ts index a1936ef..feaf145 100644 --- a/src/api/typing.ts +++ b/src/api/typing.ts @@ -5,8 +5,7 @@ export interface ResponseBody { success: boolean } -/** 统一返回结构体 */ - +/** Unified return structure */ export interface PageResult { data: T[] current?: number diff --git a/src/main.ts b/src/main.ts index c0525a9..d129648 100644 --- a/src/main.ts +++ b/src/main.ts @@ -7,7 +7,7 @@ import 'virtual:uno.css' import '@/styles/app.less' import { i18n } from '@/utils/i18n' -// Varlet 桌面端适配 +// Varlet Desktop adaptation import '@varlet/touch-emulator' const app = createApp(App) diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts index 713e8d2..1a251a9 100644 --- a/src/utils/i18n.ts +++ b/src/utils/i18n.ts @@ -14,13 +14,13 @@ export const i18n = createI18n({ messages, }) -/** 多语言 picker columns */ +/** i18n picker columns */ export const languageColumns: PickerColumnOption[] = [ { text: '简体中文', value: 'zh-CN' }, { text: 'English', value: 'en-US' }, ] -/** 当前语言 */ +/** Current language */ export const locale = computed({ get() { return (i18n.global.locale as unknown as Ref).value @@ -32,9 +32,9 @@ export const locale = computed({ }, }) -// 载入 varlet 语言包 +// Load the varlet language package Locale.add('zh-CN', Locale.zhCN) Locale.add('en-US', Locale.enUS) -// 根据当前语言切换 varlet 语言包 +// Switch current language Locale.use(locale.value) diff --git a/src/utils/request.ts b/src/utils/request.ts index 56689e5..7675000 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -3,17 +3,17 @@ import axios from 'axios' import { localStorage } from '@/utils/local-storage' import { STORAGE_TOKEN_KEY } from '@/stores/mutation-type' -// 这里是用于设定请求后端时，所用的 Token KEY -// 可以根据自己的需要修改，常见的如 Access-Token，Authorization -// 需要注意的是，请尽量保证使用中横线`-` 来作为分隔符， -// 避免被 nginx 等负载均衡器丢弃了自定义的请求头 +// This is the Token KEY used to set the request backend. +// You can modify it according to your own needs, such as Access-Token，Authorization +// It should be noted that please try to use the horizontal line `-` as the separator +// Avoid discarding custom request headers by load balancers such as nginx export const REQUEST_TOKEN_KEY = 'Access-Token' -// 创建 axios 实例 +// Create an axios instance const request = axios.create({ - // API 请求的默认前缀 + // API Default prefix for requests baseURL: import.meta.env.VITE_APP_API_BASE_URL, - timeout: 6000, // 请求超时时间 + timeout: 6000, // Request timeout }) export type RequestError = AxiosError<{ @@ -22,28 +22,28 @@ export type RequestError = AxiosError<{ errorMessage?: string }> -// 异常拦截处理器 +// Abnormal interception processor function errorHandler(error: RequestError): Promise { if (error.response) { const { data = {}, status, statusText } = error.response - // 403 无权限 + // 403 No permission if (status === 403) Snackbar({ type: 'warning', content: (data && data.message) || statusText }) - // 401 未登录/未授权 + // 401 Not logged in/Unauthorized if (status === 401 && data.result && data.result.isLogin) Snackbar({ type: 'warning', content: 'Authorization verification failed' }) - // 如果你需要直接跳转登录页面 + // If you need to jump directly to the login page // location.replace(loginRoutePath) } return Promise.reject(error) } -// 请求拦截器 +// Request interceptor function requestHandler(config: InternalAxiosRequestConfig): InternalAxiosRequestConfig | Promise { const savedToken = localStorage.get(STORAGE_TOKEN_KEY) - // 如果 token 存在 - // 让每个请求携带自定义 token, 请根据实际情况修改 + // If the token exists + // Let each request carry a custom token, please modify it according to the actual situation. if (savedToken) config.headers[REQUEST_TOKEN_KEY] = savedToken @@ -53,7 +53,7 @@ function requestHandler(config: InternalAxiosRequestConfig): InternalAxiosReques // Add a request interceptor request.interceptors.request.use(requestHandler, errorHandler) -// 响应拦截器 +// Response interceptor function responseHandler(response: { data: any }) { return response.data } diff --git a/uno.config.ts b/uno.config.ts index 9771496..2a014b8 100644 --- a/uno.config.ts +++ b/uno.config.ts @@ -1,34 +1,34 @@ -import { - defineConfig, - presetAttributify, - presetIcons, - presetMini, - presetUno, -} from 'unocss' -import { presetVarlet } from '@varlet/preset-unocss' - -import presetRemToPx from '@unocss/preset-rem-to-px' - -// 刚使用unocss的朋友，可以借助这个工具： https://to-unocss.netlify.app - -export default defineConfig({ - presets: [ - presetUno, - presetVarlet(), - presetAttributify, - presetIcons(), - // 为什么要用到这个插件？ - // 模板使用 viewport 作为移动端适配方案，unocss 默认单位为 rem - // 所以需要转成 px，然后由 postcss 把 px 转成 vw/vh，完成适配 - presetRemToPx({ - // 这里为什么要设置基础字体大小？看下面这篇文章 - // https://juejin.cn/post/7262975395620618298 - baseFontSize: 4, - }), - presetMini(), - ], - shortcuts: [ - // shortcuts to multiple utilities - ['btn', 'px-6 py-3 rounded-3 border-none inline-block bg-green-400 text-white cursor-pointer !outline-none hover:bg-green-600 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'], - ], -}) +import { + defineConfig, + presetAttributify, + presetIcons, + presetMini, + presetUno, +} from 'unocss' +import { presetVarlet } from '@varlet/preset-unocss' + +import presetRemToPx from '@unocss/preset-rem-to-px' + +// Friends who have just used unocss can use this tool: https://to-unocss.netlify.app + +export default defineConfig({ + presets: [ + presetUno, + presetVarlet(), + presetAttributify, + presetIcons(), + // Why use this plug-in? + // The template uses viewport as the mobile adaptation scheme, and the default unit of unocss is rem + // So it needs to be converted to px, and then postcss converts px to vw/vh to complete the adaptation. + presetRemToPx({ + // Why do you want to set the basic font size here? Read the following article. + // https://juejin.cn/post/7262975395620618298 + baseFontSize: 4, + }), + presetMini(), + ], + shortcuts: [ + // shortcuts to multiple utilities + ['btn', 'px-6 py-3 rounded-3 border-none inline-block bg-green-400 text-white cursor-pointer !outline-none hover:bg-green-600 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'], + ], +})