first commit

2025-06-23 11:09:57 +08:00
commit 9f429196c8
29 changed files with 3202 additions and 0 deletions
--- a/.env
+++ b/.env
@@ -0,0 +1,2 @@
+VITE_APP_TITLE = "web_app"
+VITE_API_TIMEOUT = "5000"
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_API_BASE_URL = "http://localhost:4444"
--- a/.env.production
+++ b/.env.production
@@ -0,0 +1 @@
+VITE_API_BASE_URL = "http://localhost:4444"
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,7 @@
+# 无样式组件库和原子化css的前端技术栈
+
+Vue 3 + TypeScript + Vite
+
+`node:22.13.1`  `npm:11.4.0`
+
+其他依赖：`primeVue`  `fontawesome` `unocss` `vue-router` `pinia` `vueuse` `dayjs`
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "storecamera",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@primeuix/themes": "^1.1.2",
+    "@vueuse/core": "^13.4.0",
+    "axios": "^1.10.0",
+    "dayjs": "^1.11.13",
+    "pinia": "^3.0.3",
+    "primevue": "^4.3.5",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.3",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/tsconfig": "^0.7.0",
+    "sass-loader": "^16.0.5",
+    "typescript": "~5.8.3",
+    "unocss": "^66.2.3",
+    "vite": "^6.3.5",
+    "vue-tsc": "^2.2.8"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Button from "primevue/button";
+</script>
+
+<template>
+  <Button label="Submit" />
+</template>
+
+<style scoped></style>
--- a/src/api/api.ts
+++ b/src/api/api.ts
--- a/src/env/env.config.ts
+++ b/src/env/env.config.ts
@@ -0,0 +1,47 @@
+// 环境变量定义 - 在这里添加新变量
+export const envDefinitions = {
+    // 应用配置
+    APP_TITLE: {
+        envKey: 'VITE_APP_TITLE',
+        type: 'string' as const,
+        required: true,
+        defaultValue: 'My Application',
+        validator: (value: string) => value.length > 0,
+        description: "APP Name"
+    },
+
+    // API 配置
+    API_BASE_URL: {
+        envKey: 'VITE_API_BASE_URL',
+        type: 'string' as const,
+        required: true,
+        defaultValue: '/',
+        validator: (value: string) => value.startsWith('http'),
+        description: 'API 基础地址'
+    },
+
+    API_TIMEOUT: {
+        envKey: 'VITE_API_TIMEOUT',
+        type: 'number' as const,
+        defaultValue: 5000,
+        required: true,
+        validator: (value: number) => value > 0 && value <= 30000,
+        description: 'API 超时时间 (毫秒)'
+    },
+}
+
+// 自动生成环境变量类型
+export type EnvVariables = {
+    [Property in keyof typeof envDefinitions]:
+    typeof envDefinitions[Property]['type'] extends 'string' ? string :
+    typeof envDefinitions[Property]['type'] extends 'number' ? number :
+    typeof envDefinitions[Property]['type'] extends 'boolean' ? boolean : never;
+};
+
+// 自动生成 Vite 环境变量类型声明
+export type ViteEnvVariables = {
+    [K in keyof typeof envDefinitions as typeof envDefinitions[K]['envKey']]:
+    typeof envDefinitions[K]['type'] extends 'string' ? string :
+    typeof envDefinitions[K]['type'] extends 'number' ? number :
+    typeof envDefinitions[K]['type'] extends 'boolean' ? boolean : never;
+};
--- a/src/env/env.ts
+++ b/src/env/env.ts
@@ -0,0 +1,95 @@
+import { envDefinitions, EnvVariables } from './env.config';
+
+// 验证环境变量
+const validateEnv = () => {
+    for (const [key, config] of Object.entries(envDefinitions)) {
+        const envKey = config.envKey;
+        const rawValue = import.meta.env[envKey];
+
+        // 检查必填项
+        if (config.required && (rawValue === undefined || rawValue === null)) {
+            throw new Error(`Missing required environment variable: ${envKey} (for ${key})`);
+        }
+
+        // 类型转换和验证
+        let value: any;
+        switch (config.type) {
+            case 'number':
+                value = Number(rawValue);
+                if (isNaN(value)) {
+                    throw new Error(`Invalid number for env variable ${envKey}: ${rawValue}`);
+                }
+                break;
+            // case 'boolean':
+            //     value = rawValue === 'true' || rawValue === '1';
+            //     break;
+            default:
+                value = rawValue;
+        }
+
+        // 设置默认值
+        if (value === undefined && config.defaultValue !== undefined) {
+            value = config.defaultValue;
+        }
+
+        // 执行自定义验证
+        //@ts-ignore
+        if (config.validator && !config.validator(value)) {
+            let message = `Invalid value for env variable ${envKey}: ${value}`;
+            if (config.description) message += ` (${config.description})`;
+            throw new Error(message);
+        }
+    }
+};
+
+// 验证环境变量
+validateEnv();
+
+// 创建类型安全的环境变量对象
+const env = Object.entries(envDefinitions).reduce((acc, [key, config]) => {
+    const envKey = config.envKey;
+    const rawValue = import.meta.env[envKey];
+
+    let value: any;
+    switch (config.type) {
+        case 'number':
+            value = Number(rawValue);
+            break;
+        // case 'boolean':
+        //     value = rawValue === 'true' || rawValue === '1';
+        //     break;
+        default:
+            value = rawValue;
+    }
+
+    // 应用默认值
+    if (value === undefined && config.defaultValue !== undefined) {
+        value = config.defaultValue;
+    }
+
+    return {
+        ...acc,
+        [key]: value
+    };
+}, {}) as EnvVariables;
+
+// 添加辅助属性
+Object.defineProperty(env, 'IS_DEV', {
+    get: () => import.meta.env.DEV,
+    enumerable: true
+});
+
+Object.defineProperty(env, 'IS_PROD', {
+    get: () => import.meta.env.PROD,
+    enumerable: true
+});
+
+Object.defineProperty(env, 'MODE', {
+    get: () => import.meta.env.MODE,
+    enumerable: true
+});
+
+// 冻结对象防止修改
+Object.freeze(env);
+
+export default env;
--- a/src/http/request.ts
+++ b/src/http/request.ts
@@ -0,0 +1,31 @@
+import axios from "axios"
+import env from "@/env/env"
+import { logger } from "@/utils/logger/Logger";
+const instance = axios.create({
+    baseURL: env.API_BASE_URL,
+    timeout: 5000,
+    headers: { 'X-Custom-Header': 'foobar' }
+});
+const apiLogger = logger.create('API');
+// 添加请求拦截器
+axios.interceptors.request.use(function (config) {
+    apiLogger.time(config.url || "")
+    // 在发送请求之前做些什么
+    return config;
+}, function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+});
+
+// 添加响应拦截器
+axios.interceptors.response.use(function (response) {
+    apiLogger.timeEnd(`请求返回${response.config.url}`)
+    // 2xx 范围内的状态码都会触发该函数。
+    // 对响应数据做点什么
+    return response;
+}, function (error) {
+    // 超出 2xx 范围的状态码都会触发该函数。
+    // 对响应错误做点什么
+    return Promise.reject(error);
+});
+export default instance
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import PrimeVue from 'primevue/config';
+import '@fortawesome/fontawesome-free/css/all.min.css';
+import 'virtual:uno.css'
+import store from './store';
+const app = createApp(App)
+app.use(store)
+app.use(PrimeVue, { unstyled: true, ripple: true })
+app.mount('#app')
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -0,0 +1,3 @@
+import { createPinia } from "pinia"
+const store = createPinia()
+export default store;
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,120 @@
+/**
+ * Modern CSS Reset
+ * 1. 使用更直观的盒模型
+ * 2. 移除默认边距和内边距
+ * 3. 设置核心元素基线样式
+ * 4. 移除列表样式和引号
+ * 5. 使媒体元素更易使用
+ * 6. 移除移动端点击高亮
+ * 7. 防止文本溢出导致布局问题
+ * 8. 表单元素继承字体
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box; /* 1 */
+}
+
+/* 移除默认边距和内边距 */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, dl, dd, ol, ul,
+figure, hr, fieldset, legend {
+  margin: 0;
+  padding: 0;
+}
+
+/* 设置核心元素基线 */
+html {
+  -webkit-text-size-adjust: 100%; /* 防止iOS横屏时字体缩放 */
+  line-height: 1.5;               /* 无单位行高继承 */
+}
+
+body {
+  min-height: 100vh;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* 标题和段落去粗体/去默认大小 */
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/* 列表去默认标记 */
+ol, ul {
+  list-style: none;
+}
+
+/* 引用去默认样式 */
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+/* 表格重置 */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* 媒体元素自适应 */
+img, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* 移除链接下划线并继承颜色 */
+a {
+  color: inherit;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+/* 表单元素重置 */
+button, input, optgroup, select, textarea {
+  margin: 0; /* 移除默认边距 */
+  padding: 0;
+  border: 0;
+  font: inherit;
+  color: inherit;
+  background-color: transparent;
+  line-height: inherit;
+}
+
+/* 移除输入框默认样式 */
+input::-ms-clear {
+  display: none; /* 移除IE输入框清除按钮 */
+}
+
+/* 移除按钮默认样式 */
+button {
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+/* 文本域禁止拖拽 */
+textarea {
+  resize: vertical;
+}
+
+/* 移除移动端点击高亮 */
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* 防止文本溢出容器 */
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+/* 隐藏有hidden属性的元素 */
+[hidden] {
+  display: none !important;
+}
--- a/src/utils/logger/Logger.ts
+++ b/src/utils/logger/Logger.ts
@@ -0,0 +1,325 @@
+// Logger.ts
+import {
+    LogLevel, LogStyle, LogTimer, LogPlugin,
+    LogEntry, LoggerOptions, GroupOptions
+} from './types';
+
+const DEFAULT_STYLES = {
+    debug: { color: '#9E9E9E', fontWeight: 'normal' },
+    info: { color: '#2196F3', fontWeight: 'normal' },
+    warn: { color: '#FF9800', fontWeight: 'bold' },
+    error: { color: '#F44336', fontWeight: 'bold' },
+};
+
+const LEVEL_WEIGHTS: Record<LogLevel, number> = {
+    debug: 0,
+    info: 1,
+    warn: 2,
+    error: 3,
+    off: 99,
+};
+
+export class Logger {
+    private options: LoggerOptions;
+    private timers: LogTimer = {};
+    private plugins: LogPlugin[] = [];
+    private enabledLevels: Set<LogLevel> = new Set(['debug', 'info', 'warn', 'error']);
+
+    constructor(options: LoggerOptions = {}) {
+        this.options = {
+            level: 'info',
+            timestamp: true,
+            styles: DEFAULT_STYLES,
+            ...options
+        };
+
+        this.setLevel(this.options.level || 'info');
+
+        if (this.options.plugins) {
+            this.plugins = [...this.options.plugins];
+        }
+    }
+
+    /**
+     * 设置日志级别
+     * @param level 日志级别
+     */
+    setLevel(level: LogLevel): void {
+        const currentWeight = LEVEL_WEIGHTS[level];
+
+        this.enabledLevels.clear();
+        Object.entries(LEVEL_WEIGHTS).forEach(([lvl, weight]) => {
+            if (weight >= currentWeight && lvl !== 'off') {
+                this.enabledLevels.add(lvl as LogLevel);
+            }
+        });
+    }
+
+    /**
+     * 添加插件
+     * @param plugin 插件函数
+     */
+    addPlugin(plugin: LogPlugin): void {
+        this.plugins.push(plugin);
+    }
+
+    /**
+     * 移除插件
+     * @param plugin 插件函数
+     */
+    removePlugin(plugin: LogPlugin): void {
+        this.plugins = this.plugins.filter(p => p !== plugin);
+    }
+
+    /**
+     * 创建子日志器
+     * @param context 上下文名称
+     * @returns 新的日志器实例
+     */
+    create(context: string): Logger {
+        return new Logger({
+            ...this.options,
+            context
+        });
+    }
+
+    /**
+     * 调试日志
+     * @param messages 日志消息
+     */
+    debug(...messages: any[]): void {
+        this.log('debug', messages);
+    }
+
+    /**
+     * 信息日志
+     * @param messages 日志消息
+     */
+    info(...messages: any[]): void {
+        this.log('info', messages);
+    }
+
+    /**
+     * 警告日志
+     * @param messages 日志消息
+     */
+    warn(...messages: any[]): void {
+        this.log('warn', messages);
+    }
+
+    /**
+     * 错误日志
+     * @param messages 日志消息
+     */
+    error(...messages: any[]): void {
+        this.log('error', messages);
+    }
+
+    /**
+     * 开始计时器
+     * @param label 计时器标签
+     */
+    time(label: string): void {
+        this.timers[label] = performance.now();
+        this.debug(`⏱️ Timer '${label}' started`);
+    }
+
+    /**
+     * 结束计时器并输出结果
+     * @param label 计时器标签
+     */
+    timeEnd(label: string): void {
+        const startTime = this.timers[label];
+        if (startTime === undefined) {
+            this.warn(`Timer '${label}' does not exist`);
+            return;
+        }
+
+        const duration = performance.now() - startTime;
+        this.info(`⏱️ Timer '${label}': ${duration.toFixed(2)}ms`);
+        delete this.timers[label];
+    }
+
+    /**
+     * 开始日志分组
+     * @param label 分组标签
+     * @param options 分组选项
+     */
+    group(label: string, options: GroupOptions = {}): void {
+        const { collapsed = false } = options;
+        if (collapsed) {
+            console.groupCollapsed(`%c📁 ${label}`, this.getGroupStyle());
+        } else {
+            console.group(`%c📂 ${label}`, this.getGroupStyle());
+        }
+    }
+
+    /**
+     * 结束日志分组
+     */
+    groupEnd(): void {
+        console.groupEnd();
+    }
+
+    /**
+     * 增强堆栈跟踪
+     * @param message 错误消息
+     * @param error 错误对象
+     */
+    trace(message: string, error?: Error): void {
+        const traceError = error || new Error(message);
+        const stackLines = traceError.stack?.split('\n') || [];
+
+        // 过滤掉库内部调用
+        const filteredStack = stackLines.filter(line =>
+            !line.includes('Logger.') &&
+            !line.includes('logMaster')
+        ).join('\n');
+
+        console.groupCollapsed(`%c🔍 ${message}`, this.getStyle('debug'));
+        console.debug(filteredStack);
+        console.groupEnd();
+    }
+
+    /**
+     * 自定义日志输出
+     * @param level 日志级别
+     * @param messages 日志消息
+     */
+    private log(level: LogLevel, messages: any[]): void {
+        if (!this.shouldLog(level)) return;
+
+        const { context, styles } = this.options;
+        const logEntry: LogEntry = {
+            level,
+            messages,
+            timestamp: new Date(),
+            context,
+        };
+
+        // 应用插件
+        this.plugins.forEach(plugin => plugin(logEntry));
+
+        const prefix = this.formatPrefix(logEntry);
+        const style = this.getStyle(level);
+
+        // 添加样式信息
+        const styledMessages = [`%c${prefix}$`];
+        const styledArgs = [style];
+        // 添加额外样式
+        if (styles && styles[level]) {
+            Object.values(styles[level]).forEach((style: any) => {
+                styledArgs.push(this.styleToString(style));
+            });
+        }
+        // 处理包含样式的消息
+        messages.forEach(msg => {
+            if (typeof msg === 'string' && msg.includes('%c')) {
+                const parts = msg.split('%c');
+                parts.forEach((part, index) => {
+                    if (index > 0) {
+                        styledArgs.push('');
+                    }
+                    styledMessages.push(part);
+                });
+            } else {
+                styledMessages.push(msg);
+            }
+        });
+
+        // 调用对应的控制台方法
+        switch (level) {
+            case 'debug':
+                console.debug(styledMessages.join(''), styledArgs.join(''));
+                break;
+            case 'info':
+                console.info(styledMessages.join(''), styledArgs.join(''));
+                break;
+            case 'warn':
+                console.warn(styledMessages.join(''), styledArgs.join(''));
+                break;
+            case 'error':
+                console.error(styledMessages.join(''), styledArgs.join(''));
+                break;
+        }
+    }
+
+    /**
+     * 格式化日志前缀
+     * @param entry 日志条目
+     * @returns 格式化后的前缀字符串
+     */
+    private formatPrefix(entry: LogEntry): string {
+        const { context, timestamp } = this.options;
+        const { level } = entry;
+
+        const parts: string[] = [];
+        const icons = {
+            debug: '🐞',
+            info: 'ℹ️',
+            warn: '⚠️',
+            error: '❌'
+        };
+
+        if (timestamp) {
+            const time = entry.timestamp.toTimeString().split(' ');
+            parts.push(`[${time}]`);
+        }
+
+        if (context) {
+            parts.push(`[${context}]`);
+        }
+
+        parts.push(`${icons[level]} ${level.toUpperCase()}:`);
+
+        return parts.join(' ');
+    }
+
+    /**
+     * 获取日志样式
+     * @param level 日志级别
+     * @returns CSS样式字符串
+     */
+    private getStyle(level: LogLevel): string {
+        const { styles = DEFAULT_STYLES } = this.options;
+        return this.styleToString(styles[level] || {});
+    }
+
+    /**
+     * 获取分组样式
+     * @returns CSS样式字符串
+     */
+    private getGroupStyle(): string {
+        return this.styleToString({
+            color: '#795548',
+            fontWeight: 'bold',
+            fontSize: '14px',
+            padding: '2px 6px',
+            borderRadius: '4px',
+            backgroundColor: '#E0E0E0'
+        });
+    }
+
+    /**
+     * 将样式对象转换为CSS字符串
+     * @param style 样式对象
+     * @returns CSS样式字符串
+     */
+    private styleToString(style: LogStyle): string {
+        return Object.entries(style)
+            .map(([key, value]) => `${key}:${value}`)
+            .join(';');
+    }
+
+    /**
+     * 检查是否应该记录日志
+     * @param level 日志级别
+     * @returns 是否记录
+     */
+    private shouldLog(level: LogLevel): boolean {
+        return this.enabledLevels.has(level);
+    }
+}
+
+// 默认导出实例
+export const logger = new Logger();
--- a/src/utils/logger/types.ts
+++ b/src/utils/logger/types.ts
@@ -0,0 +1,33 @@
+// types.ts
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'off';
+export type LogStyle = { [key: string]: string };
+export type LogTimer = { [label: string]: number };
+export type LogPlugin = (log: LogEntry) => void;
+
+export interface LogEntry {
+    level: LogLevel;
+    messages: any[];
+    timestamp: Date;
+    context?: string;
+    styles?: LogStyle[];
+}
+
+export interface LoggerOptions {
+    level?: LogLevel;
+    context?: string;
+    timestamp?: boolean;
+    format?: (entry: LogEntry) => string;
+    styles?: {
+        debug?: LogStyle;
+        info?: LogStyle;
+        warn?: LogStyle;
+        error?: LogStyle;
+    };
+    plugins?: LogPlugin[];
+}
+
+export interface GroupOptions {
+    collapsed?: boolean;
+    context?: string;
+    timestamp?: boolean;
+}
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -0,0 +1,144 @@
+// 定义一个存储包装器接口
+interface StorageItem<T> {
+    value: T;
+    expires?: number; // 过期时间戳（毫秒）
+}
+class SafeLocalStorage {
+    private prefix: string;
+
+    /**
+     * 创建一个安全的本地存储实例
+     * @param prefix 存储键名前缀，用于避免键名冲突
+     */
+    constructor(prefix: string = '') {
+        this.prefix = prefix ? `${prefix}:` : '';
+    }
+
+    /**
+     * 获取带前缀的完整键名
+     * @param key 原始键名
+     * @returns 带前缀的键名
+     */
+    private getFullKey(key: string): string {
+        return `${this.prefix}${key}`;
+    }
+
+    /**
+     * 设置存储项
+     * @param key 存储键名
+     * @param value 存储的值
+     * @param expiresIn 过期时间（毫秒），可选
+     */
+    set<T>(key: string, value: T, expiresIn?: number): void {
+        const fullKey = this.getFullKey(key);
+
+        const item: StorageItem<T> = {
+            value,
+            expires: expiresIn ? Date.now() + expiresIn : undefined
+        };
+
+        try {
+            const serialized = JSON.stringify(item);
+            localStorage.setItem(fullKey, serialized);
+        } catch (e) {
+            console.error(`Failed to store item for key "${fullKey}"`, e);
+        }
+    }
+
+    /**
+     * 获取存储项
+     * @param key 存储键名
+     * @param defaultValue 当值不存在或过期时的默认值
+     * @returns 存储的值或默认值
+     */
+    get<T>(key: string, defaultValue?: T): T | undefined {
+        const fullKey = this.getFullKey(key);
+        const serialized = localStorage.getItem(fullKey);
+
+        if (!serialized) return defaultValue;
+
+        try {
+            const item = JSON.parse(serialized) as StorageItem<T>;
+
+            // 检查是否过期
+            if (item.expires && Date.now() > item.expires) {
+                this.remove(key);
+                return defaultValue;
+            }
+
+            return item.value;
+        } catch (e) {
+            console.error(`Failed to parse stored item for key "${fullKey}"`, e);
+            this.remove(key);
+            return defaultValue;
+        }
+    }
+
+    /**
+     * 移除存储项
+     * @param key 存储键名
+     */
+    remove(key: string): void {
+        const fullKey = this.getFullKey(key);
+        localStorage.removeItem(fullKey);
+    }
+
+    /**
+     * 检查存储项是否存在且未过期
+     * @param key 存储键名
+     * @returns 是否存在且有效
+     */
+    has(key: string): boolean {
+        const fullKey = this.getFullKey(key);
+        return this.get(fullKey) !== undefined;
+    }
+
+    /**
+     * 清除当前命名空间下的所有存储项
+     */
+    clearNamespace(): void {
+        const keysToRemove: string[] = [];
+
+        for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            if (key && key.startsWith(this.prefix)) {
+                keysToRemove.push(key);
+            }
+        }
+
+        keysToRemove.forEach(key => localStorage.removeItem(key));
+    }
+
+    /**
+     * 获取存储项并移除它
+     * @param key 存储键名
+     * @param defaultValue 当值不存在或过期时的默认值
+     * @returns 存储的值或默认值
+     */
+    pop<T>(key: string, defaultValue?: T): T | undefined {
+        const value = this.get<T>(key, defaultValue);
+        this.remove(key);
+        return value;
+    }
+
+    /**
+     * 获取当前命名空间下的所有键名
+     * @returns 键名数组
+     */
+    keys(): string[] {
+        const keys: string[] = [];
+
+        for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            if (key && key.startsWith(this.prefix)) {
+                keys.push(key.substring(this.prefix.length));
+            }
+        }
+
+        return keys;
+    }
+}
+
+// 导出单例实例和类
+const safeLocalStorage = new SafeLocalStorage('app');
+export { SafeLocalStorage, safeLocalStorage };
--- a/src/utils/websocket.ts
+++ b/src/utils/websocket.ts
@@ -0,0 +1,88 @@
+export class WebSocketClient {
+    ws: any;
+    url: string;
+    listeners: any;
+    oncelisteners: any
+    constructor(url: string) {
+        this.ws = null;
+        this.url = url;
+        this.listeners = new Map();
+        this.oncelisteners = new Map()
+    }
+
+    connect(call: any) {
+        return new Promise((resolve: any, reject: any) => {
+            // console.log(this.url);
+            this.ws = new WebSocket(this.url);
+            this.ws.onopen = () => {
+                console.log("WebSocket connected");
+                resolve("连接成功");
+                call(this);
+                // this.breath();
+            };
+
+            this.ws.onmessage = (event: any) => {
+                switch (JSON.parse(event.data).type) {
+                }
+                const message = JSON.parse(event.data);
+                //
+                const handlers = this.listeners.get(message.type) || [];
+                handlers.forEach((handler: any) => handler(message));
+                //
+                const onceHandlers = this.oncelisteners.get(message.type) || []
+                onceHandlers.forEach((handler: any) => handler(message))
+                this.oncelisteners.delete(message.type);
+                //
+            };
+
+            this.ws.onerror = (error: any) => {
+                console.error("WebSocket error:", error);
+                reject(error);
+            };
+
+            this.ws.onclose = () => {
+                console.log("WebSocket disconnected");
+            };
+        });
+    }
+    once(eventType: any, handler: any) {
+        if (!this.oncelisteners.has(eventType)) {
+            this.oncelisteners.set(eventType, []);
+        }
+        this.oncelisteners.get(eventType).push(handler);
+    }
+    on(eventType: any, handler: any) {
+        if (!this.listeners.has(eventType)) {
+            this.listeners.set(eventType, []);
+        }
+        this.listeners.get(eventType).push(handler);
+    }
+    // breath() {
+    //     setInterval(() => {
+    //         this.sendCall(
+    //             "breath",
+    //             {
+    //                 userId: userStore.getUserId,
+    //             },
+    //             () => {
+    //                 // console.log(msg);
+    //             }
+    //         );
+    //     }, 20000);
+    // }
+    send(types: any, data: any) {
+        if (this.ws.readyState === WebSocket.OPEN) {
+            console.log("socket send", JSON.stringify({ types, data }));
+            this.ws.send(JSON.stringify({ type: types, data }));
+        }
+    }
+
+    async sendCall(types: any, data: any, call: any) {
+        this.send(types, data);
+        await this.once(types, call);
+    }
+
+    disconnect() {
+        this.ws.close();
+    }
+}
--- a/src/view/index.vue
+++ b/src/view/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div></div>
+</template>
+<script setup lang="ts"></script>
+<style scoped></style>
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+import { ViteEnvVariables } from '@/env/env.config';
+
+// 扩展 Vite 的环境变量类型
+interface ImportMetaEnv extends ViteEnvVariables {
+    // 内置属性
+    readonly MODE: string;
+    readonly DEV: boolean;
+    readonly PROD: boolean;
+    readonly SSR: boolean;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,22 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "lib": ["ESNext", "DOM"],
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "verbatimModuleSyntax": false,
+    "noImplicitAny": false,
+    "baseUrl": ".",
+    "paths": {
+      "@/*":["src/*"]
+    }
+
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023", "DOM"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -0,0 +1,5 @@
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+    // ...UnoCSS options
+})
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig, loadEnv } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+import { resolve } from "path"
+
+// https://vite.dev/config/
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+  console.log(env);
+  return {
+    plugins: [vue(), UnoCSS()], server: {
+      port: 4444
+    }, resolve: {
+      alias: {
+        '@': resolve(__dirname, 'src')
+      }
+    }
+  }
+})
				`@@ -0,0 +1 @@`
				`VITE_API_BASE_URL = "http://localhost:4444"`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>