任务三

web/src/components/Logo/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface LogoProps {
+  collapsed?: boolean;
+}
+
+const Logo: React.FC<LogoProps> = ({ collapsed }) => {
+  return (
+    <div style={{ 
+      display: 'flex', 
+      alignItems: 'center', 
+      justifyContent: 'center',
+      height: '100%',
+    }}>
+      <img 
+        src="/logo.svg" 
+        alt="KRA Admin" 
+        style={{ 
+          height: 32, 
+          width: 32,
+        }} 
+      />
+      {!collapsed && (
+        <span style={{ 
+          marginLeft: 8, 
+          fontSize: 18, 
+          fontWeight: 'bold',
+          color: '#3b82f6',
+        }}>
+          KRA Admin
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Logo;

web/src/utils/format.ts

@@ -0,0 +1,76 @@
+/**
+ * 格式化工具函数 - 参考GVA的format.js
+ */
+
+/**
+ * 设置主题色 - 参考GVA的setBodyPrimaryColor
+ * @param color 主题色
+ * @param mode 模式 'light' | 'dark'
+ */
+export function setBodyPrimaryColor(color: string, mode: 'light' | 'dark' = 'light'): void {
+  const root = document.documentElement;
+  root.style.setProperty('--primary-color', color);
+  
+  // 设置不同透明度的主题色变体
+  root.style.setProperty('--primary-color-hover', adjustColor(color, mode === 'dark' ? 20 : -10));
+  root.style.setProperty('--primary-color-active', adjustColor(color, mode === 'dark' ? 30 : -20));
+  root.style.setProperty('--primary-color-light', adjustColor(color, mode === 'dark' ? -30 : 40));
+}
+
+/**
+ * 调整颜色亮度
+ * @param color 十六进制颜色
+ * @param amount 调整量（正数变亮，负数变暗）
+ */
+function adjustColor(color: string, amount: number): string {
+  const hex = color.replace('#', '');
+  const num = parseInt(hex, 16);
+  
+  let r = (num >> 16) + amount;
+  let g = ((num >> 8) & 0x00FF) + amount;
+  let b = (num & 0x0000FF) + amount;
+  
+  r = Math.max(0, Math.min(255, r));
+  g = Math.max(0, Math.min(255, g));
+  b = Math.max(0, Math.min(255, b));
+  
+  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+}
+
+/**
+ * 格式化日期
+ * @param date 日期
+ * @param format 格式
+ */
+export function formatDate(date: Date | string | number, format: string = 'YYYY-MM-DD HH:mm:ss'): string {
+  const d = new Date(date);
+  
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  const hours = String(d.getHours()).padStart(2, '0');
+  const minutes = String(d.getMinutes()).padStart(2, '0');
+  const seconds = String(d.getSeconds()).padStart(2, '0');
+  
+  return format
+    .replace('YYYY', String(year))
+    .replace('MM', month)
+    .replace('DD', day)
+    .replace('HH', hours)
+    .replace('mm', minutes)
+    .replace('ss', seconds);
+}
+
+/**
+ * 格式化文件大小
+ * @param bytes 字节数
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}

web/src/utils/index.ts

@@ -0,0 +1,7 @@
+/**
+ * 工具函数集合 - 参考GVA的utils
+ */
+
+export * from './page';
+export * from './storage';
+export * from './format';

web/src/utils/page.ts

@@ -0,0 +1,25 @@
+/**
+ * 页面工具函数 - 参考GVA的page.js
+ */
+
+const APP_NAME = 'KRA Admin';
+
+/**
+ * 获取页面标题
+ * @param pageTitle 页面标题
+ * @returns 完整的页面标题
+ */
+export function getPageTitle(pageTitle?: string): string {
+  if (pageTitle) {
+    return `${pageTitle} - ${APP_NAME}`;
+  }
+  return APP_NAME;
+}
+
+/**
+ * 设置页面标题
+ * @param title 页面标题
+ */
+export function setPageTitle(title?: string): void {
+  document.title = getPageTitle(title);
+}

web/src/utils/storage.ts

@@ -0,0 +1,102 @@
+/**
+ * 存储工具函数 - 参考GVA的用户存储逻辑
+ */
+
+const TOKEN_KEY = 'token';
+const USER_INFO_KEY = 'userInfo';
+
+/**
+ * 获取Token
+ */
+export function getToken(): string | null {
+  return localStorage.getItem(TOKEN_KEY);
+}
+
+/**
+ * 设置Token
+ */
+export function setToken(token: string): void {
+  localStorage.setItem(TOKEN_KEY, token);
+}
+
+/**
+ * 移除Token
+ */
+export function removeToken(): void {
+  localStorage.removeItem(TOKEN_KEY);
+}
+
+/**
+ * 获取用户信息
+ */
+export function getUserInfo(): API.UserInfo | null {
+  const userInfo = localStorage.getItem(USER_INFO_KEY);
+  if (userInfo) {
+    try {
+      return JSON.parse(userInfo);
+    } catch (e) {
+      return null;
+    }
+  }
+  return null;
+}
+
+/**
+ * 设置用户信息
+ */
+export function setUserInfo(userInfo: API.UserInfo): void {
+  localStorage.setItem(USER_INFO_KEY, JSON.stringify(userInfo));
+}
+
+/**
+ * 移除用户信息
+ */
+export function removeUserInfo(): void {
+  localStorage.removeItem(USER_INFO_KEY);
+}
+
+/**
+ * 清除所有存储 - 参考GVA的ClearStorage
+ */
+export function clearStorage(): void {
+  removeToken();
+  removeUserInfo();
+  sessionStorage.clear();
+  localStorage.removeItem('originSetting');
+}
+
+/**
+ * 检查是否需要跳转到首页
+ */
+export function checkNeedToHome(): boolean {
+  const need = sessionStorage.getItem('needToHome') === 'true';
+  if (need) {
+    sessionStorage.removeItem('needToHome');
+  }
+  return need;
+}
+
+/**
+ * 设置需要跳转到首页
+ */
+export function setNeedToHome(): void {
+  sessionStorage.setItem('needToHome', 'true');
+}
+
+/**
+ * 检查是否需要关闭所有标签
+ */
+export function checkNeedCloseAll(): boolean {
+  const need = sessionStorage.getItem('needCloseAll') === 'true';
+  if (need) {
+    sessionStorage.removeItem('needCloseAll');
+  }
+  return need;
+}
+
+/**
+ * 设置需要关闭所有标签
+ */
+export function setNeedCloseAll(): void {
+  sessionStorage.setItem('needCloseAll', 'true');
+}