Compare commits

...

9 Commits

Author SHA1 Message Date
xingyy
107966dabc feat(app): 添加暗黑模式支持并优化主题样式
- 新增暗黑模式支持,使用 colorMode 模块管理主题切换
- 添加全局样式和默认主题样式文件
- 优化 app.vue 中的样式和布局
- 更新 i18n 插件配置,使用 TypeScript 类型
- 调整 nuxt.config.js 中的模块顺序和配置
2025-01-23 14:59:20 +08:00
xingyy
88d1dea0d2 refactor(app): 调整主页相关组件和页面的代码- 在 AppHeader 组件中添加调试日志,用于检查路由元数据
- 优化 home 页面的代码结构,移除未使用的导入和变量
- 在主页面添加 definePageMeta 以设置页面元数据
2025-01-23 14:34:51 +08:00
xingyy
6fc63427de Merge remote-tracking branch 'origin/main' 2025-01-23 14:27:07 +08:00
xingyy
8cb35f4f1b 12 2025-01-23 14:27:02 +08:00
xingyy
579c6df57b refactor(i18n):重命名文件并优化国际化插件代码
- 将 i18n.ts 重命名为 i18n.js,统一文件类型
- 移除了未使用的类型导入 TypeLocale
- 添加了对 vant国际化语言包的导入- 简化了 setLocale 调用,移除了不必要的类型转换
- 优化了代码格式和注释
2025-01-23 14:25:30 +08:00
xingyy
0d1342414b refactor(goods): 优化商品列表获取逻辑
- 移除了不必要的 console.log 语句
- 更新了 artworkList API 的导入路径
- 删除了 Home 组件中的冗余模板代码
2025-01-23 14:22:25 +08:00
xingyy
fbac90a177 refactor(app/config): 修改路由名称
- 将 useAppFooterRouteNames 中的 'home'路由改为 'index'
-保持 useAppHeaderRouteNames 不变
2025-01-23 14:17:49 +08:00
xingyy
44b593966e Merge remote-tracking branch 'origin/main' 2025-01-23 14:16:45 +08:00
xingyy
7ae4899e17 refactor(itemDetail): 移除未使用的代码
- 删除了未使用的 images 数组和 clickSwipe函数
- 注释掉了不再使用的 van-swipe 组件
2025-01-23 14:16:39 +08:00
16 changed files with 129 additions and 194 deletions

View File

@ -1,15 +1,17 @@
<script setup>
import { useI18n } from 'vue-i18n'
import {useI18n} from 'vue-i18n'
import {message} from '@/components/x-message/useMessage.js'
// message.success('success')
useHead({
title: useI18n().t('appSetting.appName'),
meta: [
{ name: 'description', content: useI18n().t('appSetting.appDescription') },
{ name: 'keywords', content: useI18n().t('appSetting.appKeyWords') },
{name: 'description', content: useI18n().t('appSetting.appDescription')},
{name: 'keywords', content: useI18n().t('appSetting.appKeyWords')},
],
})
const color = useColorMode()
const mode = computed(() => {
return ''
return color.value
})
//
@ -23,7 +25,7 @@ const routeHistory = ref([])
router.beforeEach((to, from) => {
//
routeHistory.value.push(from.path)
//
if (routeHistory.value.includes(to.path)) {
slideDirection.value = 'slide-right'
@ -40,13 +42,13 @@ provide('slideDirection', slideDirection)
</script>
<template>
<VanConfigProvider theme="light">
<VanConfigProvider :theme="mode">
<NuxtLoadingIndicator
color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)"/>
<NuxtLayout>
<NuxtPage :transition="{
name: slideDirection
}" />
}"/>
</NuxtLayout>
</VanConfigProvider>
</template>
@ -76,7 +78,8 @@ provide('slideDirection', slideDirection)
.slide-right-leave-to {
transform: translateX(100%);
}
:root{
:root {
--safe-area-inset-bottom: env(safe-area-inset-bottom);
}
</style>

View File

@ -30,7 +30,9 @@ const subTitle = computed(() => {
return route.meta.subTitle ? t(route.meta.subTitle) : ''
})
const showLeftArrow = computed(() => route.name && routeWhiteList.includes(route.name))
console.log('route.meta.i18n',route.meta.i18n)
console.log('t(route.meta.i18n)',route.meta.i18n)
console.log('route.meta.title',route.meta.title)
</script>
<template>

View File

@ -8,17 +8,7 @@ const props = defineProps({
default: null
}
})
const images = [
'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/637d95b4-2ae9-4a74-bd60-a3a9d2ca2ca0.png',
'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/f7b65e23-ce21-41b4-8e58-9e6dc6950727.png',
'https://e-cdn.fontree.cn/fonchain-main/prod/file/default/setting/41eceb23-d168-4049-ae8e-48c5328b192f.png',
];
const clickSwipe=(index)=>{
showImagePreview({
images: images,
startPosition:index,
})
}
</script>
<template>
@ -26,16 +16,6 @@ const clickSwipe=(index)=>{
<div class="flex justify-center">
<xImage class="h-188px" :src="detailInfo?.artwork?.hdPic"></xImage>
</div>
<!-- <van-swipe style="height: 188px" indicator-color="#B4B4B4" lazy-render >
<van-swipe-item v-for="(image,index) in images" :key="image" @click="clickSwipe(index)">
<van-image
fit="contain"
width="100%"
:height="188"
:src="image"
/>
</van-swipe-item>
</van-swipe>-->
<div class="px-[16px] bg-[#fff] pt-[11px] mb-6px">
<div class="text-[#000] text-[16px] mb-[12px]">{{detailInfo?.artworkTitle}}</div>
<div class="text-#575757 text-[14px] pb-8px">

View File

@ -1,3 +1,3 @@
export const useAppFooterRouteNames= ['home', 'profile']
export const useAppHeaderRouteNames= ['home', 'profile','login','collectCode-login','collectCode-mine']
export const useAppFooterRouteNames= ['index', 'profile']
export const useAppHeaderRouteNames= ['index', 'profile','login','collectCode-login','collectCode-mine']

View File

@ -3,24 +3,13 @@ import liveRoom from '@/pages/liveRoom/index.client.vue';
import {goodStore} from "@/stores/goods/index.js";
import ItemList from './components/ItemList/index.vue'
import Cescribe from './components/Cescribe/index.vue'
import {artworkList} from "~/api/goods/index.js";
import {ref} from "vue";
const {fullLive, getAuctionDetail, auctionDetail, itemList, pageRef, liveRef} = goodStore();
definePageMeta({
layout: 'default',
title: '主页',
i18n: 'menu.home',
})
const {fullLive, liveRef} = goodStore();
const changeLive = () => {
fullLive.value = true;
};
</script>
<template>
<div class="flex-grow-1">
<client-only>
<liveRoom @click="changeLive" :class="['changeLive', fullLive ? 'expanded' : 'collapsed']" ref="liveRef"
:fullLive="fullLive"/>
@ -36,14 +25,8 @@ const changeLive = () => {
</van-tabs>
<van-back-top right="15vw" bottom="10vh"/>
</div>
</div>
</template>
<style>
:root:root {
--van-action-sheet-header-height: 39px;
}
</style>
<style scoped lang="scss">
.ellipsis {
display: -webkit-box;

View File

@ -1,6 +1,10 @@
<script setup>
import Home from './home/index.vue'
definePageMeta({
layout: 'default',
title: '主页',
i18n: 'menu.home',
})
</script>
<template>
<Home/>

View File

@ -54,8 +54,6 @@ export const goodStore = createGlobalState(() => {
page: pageRef.value.page,
pageSize: pageRef.value.pageSize
})
console.log('res',res)
if (res.status === 0) {
const newItems = res.data.data || []

View File

@ -0,0 +1,4 @@
:root:root {
--van-primary-color: var(--c-primary);
--van-cell-group-inset-padding: 0;
}

14
app/styles/global.css Normal file
View File

@ -0,0 +1,14 @@
#__nuxt {
margin: 0;
padding: 0;
}
html {
background: var(--van-gray-1);
color-scheme: light;
}
html.dark {
background: #222;
color-scheme: dark;
}

4
app/styles/vars.css Normal file
View File

@ -0,0 +1,4 @@
:root {
--c-primary: #3554AF;
--c-primary-active: #3554AF;
}

View File

@ -1,18 +1,9 @@
// 导入环境变量处理库
import dotenv from 'dotenv'
// 导入 Node.js 进程模块
import process from 'node:process'
// 导入预加载工具函数
import preload from './app/utils/preload'
// 导入国际化语言配置
import { currentLocales } from './i18n/i18n'
// 设置环境变量文件路径,默认使用 .env.test
const envFile = process.env.ENV_FILE || '.env.test'
// 加载环境变量配置
dotenv.config({ path: `./env/${envFile}` })
// 过滤出以 NUXT_PUBLIC_ 开头的环境变量作为公共配置
const publicConfig = Object.entries(process.env)
.filter(([key]) => key.startsWith('NUXT_PUBLIC_'))
.reduce((config, [key, value]) => {
@ -21,38 +12,38 @@ const publicConfig = Object.entries(process.env)
}, {})
export default defineNuxtConfig({
// 注册 Nuxt 模块
modules: [
'@nuxt/image', // 图片优化模块
'@vant/nuxt', // Vant UI 组件库
'@unocss/nuxt', // 原子化 CSS 框架
'@nuxtjs/i18n', // 国际化模块
],
// 运行时配置
modules: [
'@vant/nuxt',
'@unocss/nuxt',
'@nuxt/image',
'@nuxtjs/color-mode',
'@nuxtjs/i18n',
],
runtimeConfig: {
// 私有配置,只在服务端可用
// 私有配置,只在服务端可用
apiSecret: process.env.NUXT_API_SECRET || 'default_secret',
// 公共配置,客户端和服务端都可用
public: publicConfig,
},
// CSS 配置
css: [
'@unocss/reset/tailwind.css', // 重置默认样式
'@unocss/reset/tailwind.css',
'@/static/styles/default-theme.css',
],
// PostCSS 配置
postcss: {
plugins: {
'autoprefixer': {}, // 自动添加 CSS 前缀
// 移动端适配插件配置
'autoprefixer': {},
// https://github.com/wswmsword/postcss-mobile-forever
'postcss-mobile-forever': {
appSelector: '#__nuxt', // 根选择器
viewportWidth: 375, // 设计稿宽度
maxDisplayWidth: 600, // 最大显示宽度
exclude: /@nuxt/, // 排除的文件
border: true, // 显示边框
appSelector: '#__nuxt',
viewportWidth: 375,
maxDisplayWidth: 600,
// devtools excluded
exclude: /@nuxt/,
border: true,
rootContainingBlockSelectorList: [
'van-tabbar',
'van-popup',
@ -61,153 +52,89 @@ export default defineNuxtConfig({
},
},
// 国际化配置
i18n: {
locales: currentLocales, // 支持的语言列表
lazy: true, // 懒加载语言包
strategy: 'no_prefix', // URL 策略:不添加语言前缀
detectBrowserLanguage: {
useCookie: true, // 使用 cookie 存储语言选择
cookieKey: 'i18n_redirected', // cookie 键名
redirectOn: 'root', // 仅在根路径重定向
alwaysRedirect: true, // 总是重定向
fallbackLocale: 'zh-CN' // 默认语言
},
langDir: 'locales', // 语言文件目录
defaultLocale: 'zh-CN', // 默认语言
vueI18n: './i18n/i18n.config.ts', // Vue I18n 配置文件
colorMode: {
classSuffix: '',
preference: 'system',
fallback: 'light',
storageKey: 'nuxt-color-mode',
},
i18n: {
locales: currentLocales,
lazy: true,
strategy: 'no_prefix',
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_redirected',
redirectOn: 'root',
alwaysRedirect: true,
fallbackLocale: 'zh-CN'
},
langDir: 'locales',
defaultLocale: 'zh-CN',
vueI18n: './i18n/i18n.config.ts',
},
// 应用配置
app: {
// 布局过渡动画
layoutTransition: {
name: 'layout',
mode: 'out-in'
},
// 头部配置
head: {
// 视口配置
viewport: 'width=device-width,initial-scale=1,viewport-fit=cover',
// 链接配置
link: [
{ rel: 'icon', href: '/favicon.ico', sizes: 'any' }, // 网站图标
{ rel: 'preload', as: 'style', href: '/critical.css' }, // 预加载关键 CSS
{ rel: 'preconnect', href: '你的API域名' }, // 预连接 API 域名
{ rel: 'dns-prefetch', href: '你的API域名' }, // DNS 预解析
{ rel: 'icon', href: '/favicon.ico', sizes: 'any' },
],
// Meta 标签配置
meta: [
{ name: 'apple-mobile-web-app-capable', content: 'yes' }, // iOS 应用模式
{ name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' }, // iOS 状态栏样式
{ name: 'theme-color', media: '(prefers-color-scheme: light)', content: '#ffffff' }, // 浅色主题色
{ name: 'theme-color', media: '(prefers-color-scheme: dark)', content: '#222222' }, // 深色主题色
{ name: 'description', content: '你的网站描述' }, // SEO 描述
{ 'http-equiv': 'x-dns-prefetch-control', content: 'on' }, // DNS 预解析控制
{ name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover,user-scalable=no' },
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
{ name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
{ name: 'theme-color', media: '(prefers-color-scheme: light)', content: '#ffffff' },
{ name: 'theme-color', media: '(prefers-color-scheme: dark)', content: '#222222' },
],
// 脚本配置
script: [
{ innerHTML: preload(), type: 'text/javascript', tagPosition: 'head' }, // 预加载脚本
// 性能监控脚本
{
innerHTML: `
window.performance.mark('app-start');
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('FCP:', entry.startTime);
}
}).observe({entryTypes: ['paint']});
`,
type: 'text/javascript',
tagPosition: 'head'
}
{ innerHTML: preload(), type: 'text/javascript', tagPosition: 'head' },
],
},
},
// Vite 构建配置
vite: {
build: {
target: 'esnext', // 构建目标
// Rollup 配置
rollupOptions: {
output: {
manualChunks: {
'vant': ['vant'], // Vant 单独打包
'vendor': ['vue', 'vue-router'] // 核心库单独打包
}
}
},
minify: 'terser', // 使用 terser 压缩
terserOptions: {
compress: {
drop_console: true, // 移除 console
drop_debugger: true // 移除 debugger
}
}
target: 'esnext',
},
// 依赖优化配置
optimizeDeps: {
include: [
'@intlify/core-base', // I18n 核心
'@intlify/shared', // I18n 共享库
'is-https', // HTTPS 检测
'vant', // Vant UI
'@vant/use', // Vant Hooks
'@vueuse/core', // VueUse 工具集
'@intlify/core-base',
'@intlify/shared',
'is-https',
],
},
},
// 实验性功能
experimental: {
typedPages: true, // 启用页面类型
typedPages: true,
},
// 开发工具
devtools: {
enabled: true, // 启用开发工具
enabled: true,
},
// TypeScript 配置
typescript: {
shim: false, // 禁用 shim
shim: false,
},
// 功能特性配置
features: {
inlineStyles: false, // 禁用内联样式
// For UnoCSS
inlineStyles: false,
},
// 未来特性配置
future: {
compatibilityVersion: 4, // 兼容性版本
compatibilityVersion: 4,
},
// Nuxt 兼容性日期
compatibilityDate: '2025-01-09', // 确保未来版本兼容性
// 开发服务器配置
// 指定 Nuxt 应用程序的兼容性日期,确保应用程序在未来的 Nuxt 版本中保持稳定性
compatibilityDate: '2025-01-09',
devServer: {
host: '0.0.0.0', // 主机地址
port: 3000, // 端口号
host: '0.0.0.0', // Set the host to 'localhost'
port: 3000, // Set the port to 3000 or any other port you prefer
},
// 图片优化配置
image: {
provider: 'ipx', // 图片处理提供者
// 响应式断点
screens: {
xs: 320, // 超小屏幕
sm: 640, // 小屏幕
md: 768, // 中等屏幕
lg: 1024, // 大屏幕
xl: 1280, // 超大屏幕
xxl: 1536, // 特大屏幕
},
quality: 80, // 图片质量
format: ['webp', 'jpg'], // 支持的格式
placeholder: true, // 启用占位图
blur: 3 // 模糊加载效果
}
})

View File

@ -726,6 +726,7 @@ packages:
'@fastify/accept-negotiator@1.1.0':
resolution: {integrity: sha512-OIHZrb2ImZ7XG85HXOONLcJWGosv7sIvM2ifAPQVhg9Lv7qdmMBNVaai4QTdyuaqbKM5eO6sLSQOYI7wEQeCJQ==}
engines: {node: '>=14'}
'@fingerprintjs/fingerprintjs@4.5.1':
resolution: {integrity: sha512-hKJaRoLHNeUUPhb+Md3pTlY/Js2YR4aXjroaDHpxrjoM8kGnEFyZVZxXo6l3gRyKnQN52Uoqsycd3M73eCdMzw==}
@ -958,6 +959,9 @@ packages:
peerDependencies:
vue: ^3.3.4
'@nuxtjs/color-mode@3.5.2':
resolution: {integrity: sha512-cC6RfgZh3guHBMLLjrBB2Uti5eUoGM9KyauOaYS9ETmxNWBMTvpgjvSiSJp1OFljIXPIqVTJ3xtJpSNZiO3ZaA==}
'@nuxtjs/i18n@9.1.1':
resolution: {integrity: sha512-S8l5ri1GFo5OUsl9qSgicE9Sm0BZjVHU7p6ml1qhQUTewngnTPTlcytWX5etwJeAjHEu2w9VAV4qXTn9Q5EgmQ==}
engines: {node: ^14.16.0 || >=16.11.0}
@ -4934,6 +4938,7 @@ snapshots:
'@fastify/accept-negotiator@1.1.0':
optional: true
'@fingerprintjs/fingerprintjs@4.5.1':
dependencies:
tslib: 2.8.1
@ -5144,7 +5149,7 @@ snapshots:
'@nuxt/devtools-kit@1.6.4(magicast@0.3.5)(rollup@4.29.1)(vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(sass@1.83.1)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1))':
dependencies:
'@nuxt/kit': 3.15.0(magicast@0.3.5)(rollup@4.29.1)
'@nuxt/kit': 3.15.2(magicast@0.3.5)(rollup@4.29.1)
'@nuxt/schema': 3.15.0(magicast@0.3.5)(rollup@4.29.1)
execa: 7.2.0
vite: 6.0.5(@types/node@22.10.2)(jiti@2.4.2)(sass@1.83.1)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1)
@ -5161,7 +5166,7 @@ snapshots:
global-directory: 4.0.1
magicast: 0.3.5
pathe: 1.1.2
pkg-types: 1.2.1
pkg-types: 1.3.1
prompts: 2.4.2
rc9: 2.1.2
semver: 7.6.3
@ -5411,6 +5416,17 @@ snapshots:
- vue-tsc
- yaml
'@nuxtjs/color-mode@3.5.2(magicast@0.3.5)(rollup@4.29.1)':
dependencies:
'@nuxt/kit': 3.15.2(magicast@0.3.5)(rollup@4.29.1)
pathe: 1.1.2
pkg-types: 1.3.1
semver: 7.6.3
transitivePeerDependencies:
- magicast
- rollup
- supports-color
'@nuxtjs/i18n@9.1.1(@vue/compiler-dom@3.5.13)(eslint@9.17.0(jiti@2.4.2))(magicast@0.3.5)(rollup@4.29.1)(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))':
dependencies:
'@intlify/h3': 0.6.1
@ -7636,7 +7652,7 @@ snapshots:
local-pkg@0.5.1:
dependencies:
mlly: 1.7.3
pkg-types: 1.2.1
pkg-types: 1.3.1
local-pkg@1.0.0:
dependencies:
@ -8064,7 +8080,7 @@ snapshots:
consola: 3.3.1
execa: 8.0.1
pathe: 1.1.2
pkg-types: 1.2.1
pkg-types: 1.3.1
ufo: 1.5.4
nypm@0.4.1:
@ -9151,7 +9167,7 @@ snapshots:
magic-string: 0.30.17
mlly: 1.7.3
pathe: 1.1.2
pkg-types: 1.2.1
pkg-types: 1.3.1
unplugin: 1.16.0
update-browserslist-db@1.1.1(browserslist@4.24.3):