tt/youlai-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: 临时提交

Browse Source
This commit is contained in:
Ray.Hao
2025-05-28 23:39:26 +08:00
parent b2333e8b70
commit 9fba279490
37 changed files with 536 additions and 3128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/composables/theme/rootTheme.ts
View File

@@ -1,22 +0,0 @@
import type { ConfigProviderThemeVars } from "wot-design-uni";
/* 默认的主题list */
export const colorColumns = [
{
value: "#0055FE",
label: "蓝色",
},
{
value: "#CD5C5C",
label: "红色",
},
{
value: "#228B22",
label: "绿色",
},
];
/* 默认的主题 */
export const initThemState = "light";
/* 默认的主题 */
export const initThemeVars: ConfigProviderThemeVars = {
colorTheme: colorColumns[0].value,
};

74
src/composables/theme/theme.ts
View File

@@ -1,74 +0,0 @@
import { colorColumns, initThemState, initThemeVars } from "./rootTheme";
/* 暗黑模式切换 */
const theme = ref<"light" | "dark">(initThemState);
/* 组件库的主题色 */
const themeVars = ref({ ...initThemeVars });
// 从本地存储恢复主题设置
function loadThemeFromStorage() {
try {
const savedTheme = uni.getStorageSync("app_theme_mode");
const savedThemeColor = uni.getStorageSync("app_theme_color");
if (savedTheme && (savedTheme === "light" || savedTheme === "dark")) {
theme.value = savedTheme;
}
if (savedThemeColor) {
themeVars.value.colorTheme = savedThemeColor;
}
} catch (error) {
console.error("加载主题设置失败:", error);
}
}
// 保存主题设置到本地存储
function saveThemeToStorage() {
try {
uni.setStorageSync("app_theme_mode", theme.value);
uni.setStorageSync("app_theme_color", themeVars.value.colorTheme);
} catch (error) {
console.error("保存主题设置失败:", error);
}
}
export function useTheme() {
/* 切换暗黑模式 */
function toggleTheme(mode?: "light" | "dark") {
theme.value = mode || (theme.value === "light" ? "dark" : "light");
setNavigationBarColor();
saveThemeToStorage();
}
/* 设置主题色 */
function setThemeColor(color: string) {
themeVars.value.colorTheme = color;
saveThemeToStorage();
}
/* 初始化theme */
function initTheme() {
loadThemeFromStorage();
setNavigationBarColor();
}
function setNavigationBarColor() {
uni.setNavigationBarColor({
frontColor: theme.value === "light" ? "#000000" : "#ffffff",
backgroundColor: theme.value === "light" ? "#ffffff" : "#000000",
animation: {
duration: 400,
timingFunc: "easeIn",
},
});
}
return {
theme,
themeVars,
initTheme,
colorColumns,
toggleTheme,
setThemeColor,
};
}

8
src/composables/useStomp.ts
View File

@@ -1,5 +1,5 @@
import { Client, type IMessage, type StompSubscription } from "@stomp/stompjs";
import { Auth } from "@/utils/auth";
import { getAccessToken } from "@/utils/auth";
export interface UseStompOptions {
/** WebSocket 地址，不传时使用 VITE_APP_WS_ENDPOINT 环境变量 */
@@ -70,7 +70,7 @@ export function useStomp(options: UseStompOptions = {}) {
}
// 每次连接前重新获取最新令牌，不依赖之前的token值
const currentToken = Auth.getAccessToken();
const currentToken = getAccessToken();
// 检查令牌是否为空，如果为空则不进行连接
if (!currentToken) {
@@ -123,7 +123,7 @@ export function useStomp(options: UseStompOptions = {}) {
};
// 设置 Web Socket 关闭监听器
client.value.onWebSocketClose = (event) => {
client.value.onWebSocketClose = (event: CloseEvent) => {
isConnected.value = false;
isConnecting = false;
console.log(`WebSocket已关闭: ${event?.code} ${event?.reason}`);
@@ -147,7 +147,7 @@ export function useStomp(options: UseStompOptions = {}) {
};
// 设置错误监听器
client.value.onStompError = (frame) => {
client.value.onStompError = (frame: any) => {
console.error("STOMP错误:", frame.headers, frame.body);
isConnecting = false;

61
src/composables/useTabbar.ts
View File

@@ -1,61 +0,0 @@
/*
* @Author: weisheng
* @Date: 2024-10-29 22:12:54
* @LastEditTime: 2025-01-13 16:45:28
* @LastEditors: 810505339
* @Description:
* @FilePath: \wot-demo\src\composables\useTabbar.ts
* 记得注释
*/
export interface TabbarItem {
name: string;
value: number | null;
active: boolean;
title: string;
icon: string;
}
const tabbarItems = ref<TabbarItem[]>([
{ name: "home", value: null, active: true, title: "home", icon: "home" },
{ name: "hi", value: null, active: false, title: "hi", icon: "app" },
{ name: "setting", value: null, active: false, title: "setting", icon: "setting" },
]);
export function useTabbar() {
const tabbarList = computed(() => tabbarItems.value);
const activeTabbar = computed(() => {
const item = tabbarItems.value.find((item) => item.active);
return item || tabbarItems.value[0];
});
const getTabbarItemValue = (name: string) => {
const item = tabbarItems.value.find((item) => item.name === name);
return item && item.value ? item.value : null;
};
const setTabbarItem = (name: string, value: number) => {
const tabbarItem = tabbarItems.value.find((item) => item.name === name);
if (tabbarItem) {
tabbarItem.value = value;
}
};
const setTabbarItemActive = (name: string) => {
tabbarItems.value.forEach((item) => {
if (item.name === name) {
item.active = true;
} else {
item.active = false;
}
});
};
return {
tabbarList,
activeTabbar,
getTabbarItemValue,
setTabbarItem,
setTabbarItemActive,
};
}

76
src/composables/useTheme.ts Normal file
View File

@@ -0,0 +1,76 @@
import { ref, computed } from "vue";
import type { ConfigProviderThemeVars } from "wot-design-uni";
/* 默认的主题list */
export const colorColumns = [
{
value: "#0055FE",
label: "蓝色",
},
{
value: "#CD5C5C",
label: "红色",
},
{
value: "#228B22",
label: "绿色",
},
];
/* 默认的主题 */
export const initThemState = "light";
/* 默认的主题变量 - 只使用wot-design-uni支持的变量 */
export const initThemeVars: ConfigProviderThemeVars = {
colorTheme: colorColumns[0].value,
};
/* 暗黑模式主题变量 */
export const darkThemeVars: ConfigProviderThemeVars = {
colorTheme: colorColumns[0].value,
};
/* 主题状态 */
export const themeState = ref(initThemState);
/* 主题变量 */
export const themeVars = ref<ConfigProviderThemeVars>(initThemeVars);
/* 计算属性：根据主题状态返回对应的主题变量 */
export const computedThemeVars = computed(() => {
const baseVars = themeState.value === "dark" ? darkThemeVars : initThemeVars;
return {
...baseVars,
...themeVars.value,
};
});
/* 切换主题 */
export const toggleTheme = () => {
themeState.value = themeState.value === "light" ? "dark" : "light";
// 更新主题变量
const newBaseVars = themeState.value === "dark" ? darkThemeVars : initThemeVars;
themeVars.value = {
...newBaseVars,
colorTheme: themeVars.value.colorTheme, // 保持用户选择的主题色
};
};
/* 设置主题色 */
export const setThemeColor = (color: string) => {
themeVars.value = {
...themeVars.value,
colorTheme: color,
};
};
/* 导出主题相关的工具 */
export const useTheme = () => {
return {
themeState,
themeVars: computedThemeVars,
toggleTheme,
setThemeColor,
colorColumns,
};
};