wlt/ai-dimension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 登录页改造+亮色默认主题+颜色修复

Browse Source 
- 登录页：修复 isMiniApp 检测逻辑，tab切换和注册按钮正常
- 主题系统：默认改为亮色模式，暗色可通过设置页切换
- 主题切换：设置页暗色开关已绑定实际切换逻辑
- 颜色修复：所有页面标题硬编码 #fff/white 改为 var(--text-primary)
- theme.scss 精简为工具类，变量定义集中到 App.vue
This commit is contained in:
Yuzhiran Dev
2026-07-11 01:00:03 +08:00
parent 51b394bbde
commit 25b81e9a11
14 changed files with 470 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/ai-dimension/src/App.vue
+192 -66
View File
@@ -9,7 +9,6 @@ import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
onLaunch(() => {
console.log('[AI维度] App launched')
// 初始化主题
initTheme()
})
@@ -22,78 +21,108 @@ onHide(() => {
})
function initTheme() {
// 从本地存储读取主题偏好
const theme = uni.getStorageSync('theme') || 'dark'
const theme = uni.getStorageSync('theme') || 'light'
applyTheme(theme)
}
function applyTheme(theme) {
if (theme === 'light') {
document.documentElement.classList.add('theme-light')
try {
// H5 环境直接操作 document
const root = document.documentElement
if (theme === 'dark') {
root.classList.add('theme-dark')
root.classList.remove('theme-light')
} else {
document.documentElement.classList.remove('theme-light')
root.classList.remove('theme-dark')
root.classList.add('theme-light')
}
} catch (e) {
// 小程序环境：document 不存在，直接忽略
}
}
</script>
<style>
/* 全局样式 - 直接定义 CSS 变量（不通过 @import 避免循环） */
page {
--bg-primary: #14141e;
--bg-secondary: #181828;
--bg-tertiary: #1c1a34;
--glass-bg: rgba(255, 255, 255, 0.06);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-hover: rgba(255, 255, 255, 0.1);
--glass-hover-border: rgba(255, 255, 255, 0.15);
--glass-strong: rgba(255, 255, 255, 0.12);
--glass-dim-bg: rgba(124, 77, 255, 0.06);
--text-primary: rgba(255, 255, 255, 0.95);
--text-secondary: rgba(255, 255, 255, 0.7);
--text-tertiary: rgba(255, 255, 255, 0.5);
--text-muted: rgba(255, 255, 255, 0.3);
--color-brand: #8b5cf6;
--color-brand-light: #a78bfa;
--color-brand-dark: #7c3aed;
--color-brand-bg: rgba(139, 92, 246, 0.12);
--color-brand-glow: rgba(139, 92, 246, 0.15);
--dim1-color: #a78bfa;
--dim1-bg: rgba(139, 92, 246, 0.12);
--dim1-icon-bg: rgba(139, 92, 246, 0.2);
--dim1-border: rgba(139, 92, 246, 0.18);
--dim1-glow: rgba(139, 92, 246, 0.08);
--dim2-color: #60a5fa;
--dim2-bg: rgba(96, 165, 250, 0.12);
--dim2-icon-bg: rgba(96, 165, 250, 0.2);
--dim2-border: rgba(96, 165, 250, 0.18);
--dim2-glow: rgba(96, 165, 250, 0.08);
--dim3-color: #34d399;
--dim3-bg: rgba(52, 211, 153, 0.12);
--dim3-icon-bg: rgba(52, 211, 153, 0.2);
--dim3-border: rgba(52, 211, 153, 0.18);
--dim3-glow: rgba(52, 211, 153, 0.08);
--dim4-color: #fbbf24;
--dim4-bg: rgba(251, 191, 36, 0.12);
--dim4-icon-bg: rgba(251, 191, 36, 0.2);
--dim4-border: rgba(251, 191, 36, 0.18);
--dim4-glow: rgba(251, 191, 36, 0.08);
--dim5-color: #fb7185;
--dim5-bg: rgba(251, 113, 133, 0.12);
--dim5-icon-bg: rgba(251, 113, 133, 0.2);
--dim5-border: rgba(251, 113, 133, 0.18);
--dim5-glow: rgba(251, 113, 133, 0.08);
--color-free: #34d399;
--color-free-bg: rgba(52, 211, 153, 0.12);
--color-pro: #fbbf24;
--color-pro-bg: rgba(251, 191, 36, 0.12);
--color-vip: #fb7185;
--color-vip-bg: rgba(251, 113, 133, 0.12);
--color-hot: #fb7185;
--color-hot-bg: rgba(251, 113, 133, 0.15);
--color-new: #60a5fa;
--color-new-bg: rgba(96, 165, 250, 0.15);
--color-pick: #a78bfa;
--color-pick-bg: rgba(139, 92, 246, 0.15);
/* ============================================
宇之然AI维度 — 全局主题
默认：亮色模式 | .theme-dark：暗色模式
============================================ */
/* ---- 亮色模式（默认） ---- */
page, .theme-light {
/* 基础色 — 清爽浅灰 */
--bg-primary: #f5f5f7;
--bg-secondary: #ffffff;
--bg-tertiary: #e8e8ed;
/* 玻璃拟态 */
--glass-bg: rgba(255, 255, 255, 0.7);
--glass-border: rgba(0, 0, 0, 0.06);
--glass-hover: rgba(255, 255, 255, 0.85);
--glass-hover-border: rgba(0, 0, 0, 0.1);
--glass-strong: rgba(255, 255, 255, 0.9);
--glass-dim-bg: rgba(139, 92, 246, 0.05);
/* 文字 */
--text-primary: rgba(0, 0, 0, 0.88);
--text-secondary: rgba(0, 0, 0, 0.55);
--text-tertiary: rgba(0, 0, 0, 0.4);
--text-muted: rgba(0, 0, 0, 0.25);
--text-disabled: rgba(0, 0, 0, 0.2);
/* 品牌色 */
--color-brand: #7c4dff;
--color-brand-light: #b388ff;
--color-brand-dark: #651fff;
--color-brand-bg: rgba(124, 77, 255, 0.08);
--color-brand-glow: rgba(124, 77, 255, 0.12);
/* 维度色 */
--dim1-color: #7c4dff;
--dim1-bg: rgba(124, 77, 255, 0.08);
--dim1-icon-bg: rgba(124, 77, 255, 0.15);
--dim1-border: rgba(124, 77, 255, 0.15);
--dim1-glow: rgba(124, 77, 255, 0.06);
--dim2-color: #0ea5e9;
--dim2-bg: rgba(14, 165, 233, 0.08);
--dim2-icon-bg: rgba(14, 165, 233, 0.15);
--dim2-border: rgba(14, 165, 233, 0.15);
--dim2-glow: rgba(14, 165, 233, 0.06);
--dim3-color: #10b981;
--dim3-bg: rgba(16, 185, 129, 0.08);
--dim3-icon-bg: rgba(16, 185, 129, 0.15);
--dim3-border: rgba(16, 185, 129, 0.15);
--dim3-glow: rgba(16, 185, 129, 0.06);
--dim4-color: #f59e0b;
--dim4-bg: rgba(245, 158, 11, 0.08);
--dim4-icon-bg: rgba(245, 158, 11, 0.15);
--dim4-border: rgba(245, 158, 11, 0.15);
--dim4-glow: rgba(245, 158, 11, 0.06);
--dim5-color: #ef4444;
--dim5-bg: rgba(239, 68, 68, 0.08);
--dim5-icon-bg: rgba(239, 68, 68, 0.15);
--dim5-border: rgba(239, 68, 68, 0.15);
--dim5-glow: rgba(239, 68, 68, 0.06);
/* 功能色 */
--color-free: #10b981;
--color-free-bg: rgba(16, 185, 129, 0.1);
--color-pro: #f59e0b;
--color-pro-bg: rgba(245, 158, 11, 0.1);
--color-vip: #ef4444;
--color-vip-bg: rgba(239, 68, 68, 0.1);
--color-hot: #ef4444;
--color-hot-bg: rgba(239, 68, 68, 0.12);
--color-new: #0ea5e9;
--color-new-bg: rgba(14, 165, 233, 0.12);
--color-pick: #7c4dff;
--color-pick-bg: rgba(124, 77, 255, 0.12);
/* 圆角/间距/过渡 */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
@@ -108,24 +137,121 @@ page {
--blur-bg: 20px;
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--glow-brand: 0 0 20px rgba(124, 77, 255, 0.08);
--glow-brand-strong: 0 0 30px rgba(124, 77, 255, 0.12);
}
/* ---- 暗色模式 ---- */
.theme-dark {
/* 基础色 */
--bg-primary: #14141e;
--bg-secondary: #181828;
--bg-tertiary: #1c1a34;
--glass-bg: rgba(255, 255, 255, 0.06);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-hover: rgba(255, 255, 255, 0.1);
--glass-hover-border: rgba(255, 255, 255, 0.15);
--glass-strong: rgba(255, 255, 255, 0.12);
--glass-dim-bg: rgba(124, 77, 255, 0.06);
--text-primary: rgba(255, 255, 255, 0.95);
--text-secondary: rgba(255, 255, 255, 0.7);
--text-tertiary: rgba(255, 255, 255, 0.5);
--text-muted: rgba(255, 255, 255, 0.3);
--text-disabled: rgba(255, 255, 255, 0.15);
--color-brand: #8b5cf6;
--color-brand-light: #a78bfa;
--color-brand-dark: #7c3aed;
--color-brand-bg: rgba(139, 92, 246, 0.12);
--color-brand-glow: rgba(139, 92, 246, 0.15);
--dim1-color: #a78bfa;
--dim1-bg: rgba(139, 92, 246, 0.12);
--dim1-icon-bg: rgba(139, 92, 246, 0.2);
--dim1-border: rgba(139, 92, 246, 0.18);
--dim1-glow: rgba(139, 92, 246, 0.08);
--dim2-color: #60a5fa;
--dim2-bg: rgba(96, 165, 250, 0.12);
--dim2-icon-bg: rgba(96, 165, 250, 0.2);
--dim2-border: rgba(96, 165, 250, 0.18);
--dim2-glow: rgba(96, 165, 250, 0.08);
--dim3-color: #34d399;
--dim3-bg: rgba(52, 211, 153, 0.12);
--dim3-icon-bg: rgba(52, 211, 153, 0.2);
--dim3-border: rgba(52, 211, 153, 0.18);
--dim3-glow: rgba(52, 211, 153, 0.08);
--dim4-color: #fbbf24;
--dim4-bg: rgba(251, 191, 36, 0.12);
--dim4-icon-bg: rgba(251, 191, 36, 0.2);
--dim4-border: rgba(251, 191, 36, 0.18);
--dim4-glow: rgba(251, 191, 36, 0.08);
--dim5-color: #fb7185;
--dim5-bg: rgba(251, 113, 133, 0.12);
--dim5-icon-bg: rgba(251, 113, 133, 0.2);
--dim5-border: rgba(251, 113, 133, 0.18);
--dim5-glow: rgba(251, 113, 133, 0.08);
--color-free: #34d399;
--color-free-bg: rgba(52, 211, 153, 0.12);
--color-pro: #fbbf24;
--color-pro-bg: rgba(251, 191, 36, 0.12);
--color-vip: #fb7185;
--color-vip-bg: rgba(251, 113, 133, 0.12);
--color-hot: #fb7185;
--color-hot-bg: rgba(251, 113, 133, 0.15);
--color-new: #60a5fa;
--color-new-bg: rgba(96, 165, 250, 0.15);
--color-pick: #a78bfa;
--color-pick-bg: rgba(139, 92, 246, 0.15);
--glow-brand: 0 0 20px rgba(139, 92, 246, 0.1);
--glow-brand-strong: 0 0 30px rgba(139, 92, 246, 0.15);
}
/* 全局排版 */
page {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--bg-primary);
color: var(--text-secondary);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
view {
box-sizing: border-box;
}
/* 滚动条隐藏 */
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/* 卡片通用 */
.card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
backdrop-filter: blur(var(--blur-bg));
-webkit-backdrop-filter: blur(var(--blur-bg));
transition: all var(--transition-normal);
}
.gradient-brand {
background: linear-gradient(135deg, var(--color-brand), var(--color-brand-light));
}
.gradient-text {
background: linear-gradient(135deg, var(--color-brand-light), var(--color-brand));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
</style>
frontend/ai-dimension/src/pages/achievements/achievements.vue
+2 -2
View File
@@ -178,7 +178,7 @@ function formatDate(dateStr) {
.title {
font-size: 22px;
font-weight: 600;
color: #fff;
color: var(--text-primary);
}
.unlock-count {
@@ -240,7 +240,7 @@ function formatDate(dateStr) {
.category-name {
font-size: 15px;
color: #fff;
color: var(--text-primary);
font-weight: 500;
flex: 1;
}
frontend/ai-dimension/src/pages/chat/chat.vue
+1 -1
View File
@@ -237,7 +237,7 @@ function goShare() {
.chat-name {
font-size: 16px;
color: white;
color: var(--text-primary);
font-weight: 600;
display: block;
}
frontend/ai-dimension/src/pages/dimension/dimension.vue
+1 -1
View File
@@ -194,7 +194,7 @@ function goDetail(item) {
overflow: hidden;
}
.dim-banner-icon { font-size: 28px; display: block; margin-bottom: 8px; }
.dim-banner-title { font-size: 22px; color: #fff; display: block; margin-bottom: 6px; }
.dim-banner-title { font-size: 22px; color: var(--text-primary); display: block; margin-bottom: 6px; }
.dim-banner-desc {
font-size: 12px;
color: rgba(255,255,255,0.4);
frontend/ai-dimension/src/pages/favorites/favorites.vue
+1 -1
View File
@@ -134,7 +134,7 @@ function goHome() {
.title {
font-size: 22px;
font-weight: 600;
color: #fff;
color: var(--text-primary);
}
.count-badge {
frontend/ai-dimension/src/pages/index/index.vue
+3 -3
View File
@@ -195,7 +195,7 @@ function goNewsDetail(item) {
}
.brand-text .title {
font-size: 20px;
color: #fff;
color: var(--text-primary);
font-weight: 700;
letter-spacing: 1px;
}
@@ -225,7 +225,7 @@ function goNewsDetail(item) {
}
.greeting-title {
font-size: 26px;
color: #fff;
color: var(--text-primary);
font-weight: 700;
}
.greeting-highlight {
@@ -266,7 +266,7 @@ function goNewsDetail(item) {
}
.section-title {
font-size: 17px;
color: #fff;
color: var(--text-primary);
font-weight: 600;
letter-spacing: 0.5px;
}
frontend/ai-dimension/src/pages/leaderboard/leaderboard.vue
+2 -2
View File
@@ -152,7 +152,7 @@ function dimDotColor(id) {
.title {
font-size: 22px;
font-weight: 600;
color: #fff;
color: var(--text-primary);
}
// 维度切换
@@ -178,7 +178,7 @@ function dimDotColor(id) {
.dim-tab.active {
background: linear-gradient(135deg, rgba(179, 136, 255, 0.15), rgba(77, 182, 172, 0.15));
border-color: rgba(179, 136, 255, 0.3);
color: #fff;
color: var(--text-primary);
font-weight: 500;
}
frontend/ai-dimension/src/pages/login/login.vue
+107 -90
View File
@@ -14,18 +14,7 @@
<text class="app-title">宇之然 AI 维度</text>
<text class="app-subtitle">从 5 个维度系统理解人工智能</text>
<!-- 微信小程序登录 -->
<view class="login-method" v-if="isMiniApp">
<button class="wechat-btn" @click="wechatLogin">
<image class="wechat-icon" src="/static/icons/wechat.svg" mode="aspectFit" />
微信一键登录
</button>
<text class="login-tip">登录后，即刻开启你的 AI 探索之旅</text>
</view>
<!-- H5 登录/注册 -->
<view class="h5-login" v-else>
<!-- Tab 切换 -->
<!-- Tab 切换 — 两种模式共用 -->
<view class="tab-switch">
<text class="tab-item" :class="{ active: activeTab === 'login' }" @click="activeTab = 'login'">登录</text>
<text class="tab-item" :class="{ active: activeTab === 'register' }" @click="activeTab = 'register'">注册</text>
@@ -41,24 +30,33 @@
<text class="form-label">密码</text>
<input class="form-input" v-model="loginForm.password" type="password" placeholder="请输入密码" />
</view>
<button class="submit-btn" :loading="loading" @click="handleLogin">登 录</button>
<view class="submit-btn" :class="{ loading: loading }" @click="handleLogin">
<text>{{ loading ? '登录中...' : '登录' }}</text>
</view>
<!-- 微信小程序一键登录入口 -->
<view class="wx-login-row" v-if="isMiniApp">
<view class="wx-login-btn" @click="wechatLogin">
<text>微信一键登录</text>
</view>
</view>
</view>
<!-- 注册表单 -->
<view class="form-card" v-else>
<view class="form-card" v-if="activeTab === 'register'">
<view class="form-item">
<text class="form-label">用户名</text>
<input class="form-input" v-model="registerForm.username" placeholder="3-20位字符" />
<input class="form-input" v-model="registerForm.username" placeholder="3-20 位字符" />
</view>
<view class="form-item">
<text class="form-label">昵称</text>
<input class="form-input" v-model="registerForm.nickName" placeholder="显示名称" />
<input class="form-input" v-model="registerForm.nickName" placeholder="显示名称（选填）" />
</view>
<view class="form-item">
<text class="form-label">密码</text>
<input class="form-input" v-model="registerForm.password" type="password" placeholder="至少6位" />
<input class="form-input" v-model="registerForm.password" type="password" placeholder="至少 6 位" />
</view>
<button class="submit-btn" :loading="loading" @click="handleRegister">注 册</button>
<view class="submit-btn" :class="{ loading: loading }" @click="handleRegister">
<text>{{ loading ? '注册中...' : '注册' }}</text>
</view>
</view>
@@ -71,15 +69,19 @@
</template>
<script setup>
import { ref, computed } from 'vue'
import { ref } from 'vue'
import { useUserStore } from '@/stores/index'
const isMiniApp = ref(false)
// 检测是否为微信小程序环境
const isMiniApp = ref(false)
const platform = uni.getSystemInfoSync().platform
try {
isMiniApp.value = !!uni.getSystemInfoSync().brand &&
(uni.getSystemInfoSync().platform === 'devtools' ||
(typeof wx !== 'undefined' && wx.getSystemInfoSync))
const sysInfo = uni.getSystemInfoSync()
// 小程序环境：platform 为 ios/android/devtools，且有 brand/version 等字段
if (sysInfo && sysInfo.version && sysInfo.platform) {
// 有 weixin 特有字段即为小程序
isMiniApp.value = true
}
} catch (e) {
// H5 环境
}
@@ -94,11 +96,9 @@ const registerForm = ref({ username: '', password: '', nickName: '' })
/**
* 微信小程序登录
* 调用 wx.login 获取 code → 后端 code2Session → 获取 token
*/
const wechatLogin = async () => {
try {
// 获取微信登录 code
const loginRes = await new Promise((resolve, reject) => {
uni.login({
success: resolve,
@@ -114,7 +114,6 @@ const wechatLogin = async () => {
loading.value = true
await userStore.login(loginRes.code, {})
// 登录成功，跳转首页
uni.showToast({ title: '登录成功', icon: 'success' })
setTimeout(() => {
uni.switchTab({ url: '/pages/index/index' })
@@ -159,7 +158,7 @@ const handleRegister = async () => {
return
}
if (registerForm.value.password.length < 6) {
uni.showToast({ title: '密码至少6位', icon: 'none' })
uni.showToast({ title: '密码至少 6 位', icon: 'none' })
return
}
@@ -186,18 +185,19 @@ const handleRegister = async () => {
.login-page {
position: relative;
width: 100%;
height: 100vh;
min-height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-primary);
// 背景装饰光球
.bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.4;
opacity: 0.3;
pointer-events: none;
}
.orb-1 {
@@ -220,7 +220,8 @@ const handleRegister = async () => {
position: relative;
z-index: 1;
width: 100%;
padding: 0 40px;
max-width: 360px;
padding: 0 32px;
display: flex;
flex-direction: column;
align-items: center;
@@ -229,16 +230,16 @@ const handleRegister = async () => {
// Logo
.logo-wrap {
position: relative;
width: 80px;
height: 80px;
margin-bottom: 20px;
width: 72px;
height: 72px;
margin-bottom: 16px;
.logo-ring {
position: absolute;
inset: 0;
border-radius: 20px;
border-radius: 18px;
background: linear-gradient(135deg, var(--dim1-color), var(--dim3-color));
box-shadow: 0 8px 32px rgba(179, 136, 255, 0.3);
box-shadow: 0 8px 32px rgba(124, 77, 255, 0.2);
}
.logo-text {
position: absolute;
@@ -246,83 +247,58 @@ const handleRegister = async () => {
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-size: 28px;
font-weight: 700;
color: white;
}
}
.app-title {
font-size: 28px;
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: 2px;
margin-bottom: 8px;
letter-spacing: 1px;
margin-bottom: 6px;
}
.app-subtitle {
font-size: 14px;
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 40px;
margin-bottom: 32px;
}
// 微信登录按钮
.wechat-btn {
width: 80%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(135deg, #07c160, #06ad56);
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
box-shadow: 0 4px 16px rgba(7, 193, 96, 0.3);
.wechat-icon {
width: 22px;
height: 22px;
}
}
.login-tip {
font-size: 12px;
color: var(--text-secondary);
margin-top: 16px;
}
// H5 登录
.h5-login {
width: 80%;
max-width: 320px;
// Tab 切换
.tab-switch {
display: flex;
width: 100%;
margin-bottom: 20px;
border-bottom: 1px solid var(--glass-border);
.tab-item {
flex: 1;
text-align: center;
padding: 10px;
padding: 10px 0;
color: var(--text-secondary);
font-size: 15px;
font-weight: 500;
border-bottom: 2px solid transparent;
transition: all 0.3s;
&.active {
color: var(--dim1-color);
border-bottom-color: var(--dim1-color);
color: var(--color-brand);
border-bottom-color: var(--color-brand);
}
}
}
// 表单卡片
.form-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
width: 100%;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 16px;
padding: 24px 20px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.form-item {
@@ -333,17 +309,19 @@ const handleRegister = async () => {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 6px;
font-weight: 500;
}
.form-input {
width: 100%;
height: 42px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
height: 44px;
background: var(--bg-secondary);
border: 1px solid var(--glass-border);
border-radius: 10px;
padding: 0 14px;
color: var(--text-primary);
font-size: 14px;
box-sizing: border-box;
outline: none;
&::placeholder {
color: var(--text-disabled);
@@ -351,25 +329,64 @@ const handleRegister = async () => {
}
}
// 提交按钮
.submit-btn {
width: 100%;
height: 44px;
background: linear-gradient(135deg, var(--dim1-color), var(--dim3-color));
height: 46px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-brand), var(--dim3-color));
color: white;
border: none;
border-radius: 8px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
margin-top: 8px;
box-shadow: 0 4px 16px rgba(179, 136, 255, 0.25);
cursor: pointer;
box-shadow: 0 4px 16px rgba(124, 77, 255, 0.25);
transition: opacity 0.3s;
&:active {
opacity: 0.8;
}
&.loading {
opacity: 0.7;
}
}
// 微信一键登录
.wx-login-row {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--glass-border);
display: flex;
justify-content: center;
.wx-login-btn {
padding: 10px 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(135deg, #07c160, #06ad56);
color: white;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 16px rgba(7, 193, 96, 0.3);
&:active {
opacity: 0.8;
}
}
}
// 底部信息
.footer-info {
position: absolute;
bottom: 40px;
margin-top: 40px;
font-size: 11px;
color: var(--text-disabled);
color: var(--text-muted);
}
}
</style>
frontend/ai-dimension/src/pages/news/news.vue
+2 -2
View File
@@ -206,7 +206,7 @@ onMounted(() => {
.nav-title {
font-size: 16px;
font-weight: 600;
color: #fff;
color: var(--text-primary);
}
.nav-share { font-size: 22px; color: rgba(255,255,255,0.5); }
@@ -246,7 +246,7 @@ onMounted(() => {
font-size: 22px;
font-weight: 700;
line-height: 1.45;
color: #fff;
color: var(--text-primary);
margin: 12px 20px 16px;
}
frontend/ai-dimension/src/pages/payment/payment.vue
+2 -2
View File
@@ -223,7 +223,7 @@ function goBack() {
.header-title {
font-size: 22px;
font-weight: 700;
color: white;
color: var(--text-primary);
display: block;
}
@@ -264,7 +264,7 @@ function goBack() {
.plan-name {
font-size: 18px;
font-weight: 700;
color: white;
color: var(--text-primary);
display: block;
margin-bottom: 6px;
}
frontend/ai-dimension/src/pages/profile/profile.vue
+2 -2
View File
@@ -318,7 +318,7 @@ function goSettings() {
.profile-name {
font-size: 18px;
color: white;
color: var(--text-primary);
font-weight: 600;
display: block;
}
@@ -348,7 +348,7 @@ function goSettings() {
.plan-title {
font-size: 16px;
color: white;
color: var(--text-primary);
font-weight: 600;
display: block;
}
frontend/ai-dimension/src/pages/settings/settings.vue
+67 -23
View File
@@ -8,18 +8,22 @@
<view class="card">
<view class="setting-item" @click="togglePush">
<view class="s-icon" style="background:rgba(255,213,79,0.1);color:#ffd54f">🔔</view>
<view class="s-text">
<text class="s-label">推送通知</text>
<text class="s-desc">接收每日 AI 趋势推送</text>
</view>
<view class="s-switch" :class="{ active: pushOn }">
<view class="s-switch-knob" :class="{ on: pushOn }"></view>
</view>
</view>
<view class="setting-item">
<view class="setting-item" @click="toggleDarkMode">
<view class="s-icon" style="background:rgba(77,208,225,0.1);color:#4dd0e1">🌙</view>
<text class="s-label">深色模式</text>
<text class="s-desc">当前已启用暗色风格</text>
<view class="s-switch active">
<view class="s-switch-knob on"></view>
<view class="s-text">
<text class="s-label">暗色模式</text>
<text class="s-desc">{{ darkMode ? '已开启暗色风格' : '当前为亮色风格' }}</text>
</view>
<view class="s-switch" :class="{ active: darkMode }">
<view class="s-switch-knob" :class="{ on: darkMode }"></view>
</view>
</view>
</view>
@@ -29,18 +33,24 @@
<view class="card">
<view class="setting-item" @click="showAbout">
<view class="s-icon" style="background:rgba(179,136,255,0.1);color:#b388ff">ℹ️</view>
<view class="s-text">
<text class="s-label">关于「宇之然AI维度」</text>
</view>
<text class="s-arrow">→</text>
</view>
<view class="setting-item" @click="showContact">
<view class="s-icon" style="background:rgba(102,187,106,0.1);color:#66bb6a">📧</view>
<view class="s-text">
<text class="s-label">联系方式</text>
<text class="s-desc">客服邮箱：support@yuzhiran.com</text>
</view>
<text class="s-arrow">→</text>
</view>
<view class="setting-item" @click="showAgreement">
<view class="s-icon" style="background:rgba(239,83,80,0.1);color:#ef5350">📄</view>
<view class="s-text">
<text class="s-label">用户协议 / 隐私政策</text>
</view>
<text class="s-arrow">→</text>
</view>
</view>
@@ -50,9 +60,15 @@
</template>
<script setup>
import { ref } from 'vue'
import { ref, onMounted } from 'vue'
const pushOn = ref(true)
const darkMode = ref(false)
onMounted(() => {
// 读取当前主题
darkMode.value = uni.getStorageSync('theme') === 'dark'
})
function togglePush() {
pushOn.value = !pushOn.value
@@ -62,6 +78,32 @@ function togglePush() {
})
}
function toggleDarkMode() {
darkMode.value = !darkMode.value
const theme = darkMode.value ? 'dark' : 'light'
uni.setStorageSync('theme', theme)
applyTheme(theme)
uni.showToast({
title: darkMode.value ? '已切换为暗色模式' : '已切换为亮色模式',
icon: 'none'
})
}
function applyTheme(theme) {
try {
const root = document.documentElement
if (theme === 'dark') {
root.classList.add('theme-dark')
root.classList.remove('theme-light')
} else {
root.classList.remove('theme-dark')
root.classList.add('theme-light')
}
} catch (e) {
// mini-program 忽略
}
}
function showAbout() {
uni.showModal({
title: '关于「宇之然AI维度」',
@@ -98,7 +140,7 @@ function showAgreement() {
.page-title {
font-size: 22px;
color: white;
color: var(--text-primary);
font-weight: 600;
display: block;
margin: 6px 0 22px;
@@ -106,15 +148,14 @@ function showAgreement() {
.section-title {
font-size: 12px;
color: rgba(255,255,255,0.3);
color: var(--text-muted);
margin: 18px 0 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 14px;
padding: 4px 16px;
}
@@ -124,7 +165,7 @@ function showAgreement() {
align-items: center;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
border-bottom: 1px solid var(--glass-border);
}
.setting-item:last-child { border-bottom: none; }
@@ -139,25 +180,27 @@ function showAgreement() {
flex-shrink: 0;
}
.s-label {
.s-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.s-label {
font-size: 14px;
color: rgba(255,255,255,0.85);
display: block;
color: var(--text-primary);
}
.s-desc {
font-size: 11px;
color: rgba(255,255,255,0.35);
display: block;
margin-top: 3px;
color: var(--text-tertiary);
line-height: 1.3;
flex: 1;
}
.s-arrow {
font-size: 14px;
color: rgba(255,255,255,0.15);
color: var(--text-muted);
}
// 开关
@@ -165,13 +208,13 @@ function showAgreement() {
width: 44px;
height: 24px;
border-radius: 12px;
background: rgba(255,255,255,0.1);
background: rgba(0, 0, 0, 0.1);
position: relative;
flex-shrink: 0;
transition: background 0.3s;
}
.s-switch.active {
background: rgba(179,136,255,0.4);
background: rgba(124, 77, 255, 0.4);
}
.s-switch-knob {
width: 20px;
@@ -182,13 +225,14 @@ function showAgreement() {
top: 2px;
left: 2px;
transition: left 0.3s;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.s-switch-knob.on { left: 22px; }
.version {
text-align: center;
font-size: 11px;
color: rgba(255,255,255,0.1);
color: var(--text-muted);
margin-top: 30px;
display: block;
}
frontend/ai-dimension/src/pages/trend/trend.vue
+1 -1
View File
@@ -199,7 +199,7 @@ function getSampleData() {
.header-title {
font-size: 24px;
font-weight: 700;
color: white;
color: var(--text-primary);
display: block;
}
frontend/ai-dimension/src/styles/theme.scss
+18 -118
View File
@@ -1,127 +1,27 @@
/* ============================================
宇之然AI维度 — 主题系统 v2
使用 CSS 自定义属性，一键切换主题
宇之然AI维度 — 主题系统 v3
亮色默认 + CSS 自定义属性切换
============================================ */
/* ---- 主题色板 ----
🌌 宇宙深空：深紫黑渐变背景
🟣 紫 — 品牌色、AI 起源
🔵 青 — AI 发展、科技
🟢 青绿 — AI 当前
🟡 金 — AI 学习
🔴 珊瑚 — AI 趋势
============================================ */
/*
* 注意: 此文件通过 uni.scss 注入到每个组件
* 但全局 CSS 变量定义在 App.vue 的非 scoped <style> 中
* 此文件只保留 SCSS 变量 + 工具类，防止重复
*/
:root,
page {
/* === 基础色 — 深空紫黑 === */
--bg-primary: #14141e;
--bg-secondary: #181828;
--bg-tertiary: #1c1a34;
/* ---- SCSS 变量（方便组件内使用） ---- */
$color-brand: #7c4dff;
$color-brand-light: #b388ff;
$color-bg-primary: #f5f5f7;
$color-bg-dark: #14141e;
/* === 玻璃拟态 — 足够可见 === */
--glass-bg: rgba(255, 255, 255, 0.06);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-hover: rgba(255, 255, 255, 0.1);
--glass-hover-border: rgba(255, 255, 255, 0.15);
--glass-strong: rgba(255, 255, 255, 0.12);
--glass-dim-bg: rgba(124, 77, 255, 0.06);
/* === 文字 — 更清晰的分层 === */
--text-primary: rgba(255, 255, 255, 0.95);
--text-secondary: rgba(255, 255, 255, 0.7);
--text-tertiary: rgba(255, 255, 255, 0.5);
--text-muted: rgba(255, 255, 255, 0.3);
/* === 品牌色 — 紫色系 === */
--color-brand: #8b5cf6;
--color-brand-light: #a78bfa;
--color-brand-dark: #7c3aed;
--color-brand-bg: rgba(139, 92, 246, 0.12);
--color-brand-glow: rgba(139, 92, 246, 0.15);
/* === 维度色系 — 更饱和 === */
/* dim1: AI 起源 — 紫罗兰 */
--dim1-color: #a78bfa;
--dim1-bg: rgba(139, 92, 246, 0.12);
--dim1-icon-bg: rgba(139, 92, 246, 0.2);
--dim1-border: rgba(139, 92, 246, 0.18);
--dim1-glow: rgba(139, 92, 246, 0.08);
/* dim2: AI 发展 — 天蓝 */
--dim2-color: #60a5fa;
--dim2-bg: rgba(96, 165, 250, 0.12);
--dim2-icon-bg: rgba(96, 165, 250, 0.2);
--dim2-border: rgba(96, 165, 250, 0.18);
--dim2-glow: rgba(96, 165, 250, 0.08);
/* dim3: AI 当前 — 翠绿 */
--dim3-color: #34d399;
--dim3-bg: rgba(52, 211, 153, 0.12);
--dim3-icon-bg: rgba(52, 211, 153, 0.2);
--dim3-border: rgba(52, 211, 153, 0.18);
--dim3-glow: rgba(52, 211, 153, 0.08);
/* dim4: AI 学习 — 琥珀金 */
--dim4-color: #fbbf24;
--dim4-bg: rgba(251, 191, 36, 0.12);
--dim4-icon-bg: rgba(251, 191, 36, 0.2);
--dim4-border: rgba(251, 191, 36, 0.18);
--dim4-glow: rgba(251, 191, 36, 0.08);
/* dim5: AI 趋势 — 玫瑰红 */
--dim5-color: #fb7185;
--dim5-bg: rgba(251, 113, 133, 0.12);
--dim5-icon-bg: rgba(251, 113, 133, 0.2);
--dim5-border: rgba(251, 113, 133, 0.18);
--dim5-glow: rgba(251, 113, 133, 0.08);
/* === 功能色 === */
--color-free: #34d399;
--color-free-bg: rgba(52, 211, 153, 0.12);
--color-pro: #fbbf24;
--color-pro-bg: rgba(251, 191, 36, 0.12);
--color-vip: #fb7185;
--color-vip-bg: rgba(251, 113, 133, 0.12);
--color-hot: #fb7185;
--color-hot-bg: rgba(251, 113, 133, 0.15);
--color-new: #60a5fa;
--color-new-bg: rgba(96, 165, 250, 0.15);
--color-pick: #a78bfa;
--color-pick-bg: rgba(139, 92, 246, 0.15);
/* === 圆角 === */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-full: 9999px;
/* === 间距 === */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 20px;
--spacing-2xl: 24px;
/* === 玻璃模糊 === */
--blur-bg: 20px;
/* === 过渡 === */
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
/* === 辉光 === */
--glow-brand: 0 0 20px rgba(139, 92, 246, 0.1);
--glow-brand-strong: 0 0 30px rgba(139, 92, 246, 0.15);
}
/* ============================================
全局排版
============================================ */
$dim1-color: #7c4dff;
$dim2-color: #0ea5e9;
$dim3-color: #10b981;
$dim4-color: #f59e0b;
$dim5-color: #ef4444;
/* 全局排版 */
page {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;