前端入门到精通(三)：状态管理、API交互与性能优化

1

npm install redux react-redux @reduxjs/toolkit

1
2
3
4
5
6
7
8
9

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      // Redux Toolkit允许我们在reducers中直接修改状态
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

// 导出actions
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// 导出reducer
export default counterSlice.reducer;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { store } from './store';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

function Counter() {
  // 从Redux store中获取状态
  const count = useSelector((state) => state.counter.value);
  // 获取dispatch函数
  const dispatch = useDispatch();

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          +
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          -
        </button>
        <button
          onClick={() => dispatch(incrementByAmount(5))}
        >
          +5
        </button>
      </div>
    </div>
  );
}

export default Counter;

1
2
3

npm install vuex@next --save  # Vue 3
# 或
npm install vuex@3 --save  # Vue 2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

// store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  getters: {
    doubleCount: (state) => {
      return state.count * 2
    }
  },
  mutations: {
    increment (state) {
      state.count++
    },
    decrement (state) {
      state.count--
    },
    incrementByAmount (state, amount) {
      state.count += amount
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    },
    incrementByAmountAsync ({ commit }, amount) {
      setTimeout(() => {
        commit('incrementByAmount', amount)
      }, 1000)
    }
  },
  modules: {
    // 可以在这里定义子模块
  }
})

1
2
3
4
5
6

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!-- Counter.vue -->
<template>
  <div>
    <div>
      <button @click="increment">+</button>
      <span>{{ count }}</span>
      <span>（翻倍：{{ doubleCount }}）</span>
      <button @click="decrement">-</button>
      <button @click="incrementByAmount(5)">+5</button>
      <button @click="incrementAsync">异步+</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  name: 'Counter',
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapMutations(['increment', 'decrement', 'incrementByAmount']),
    ...mapActions(['incrementAsync'])
  }
}
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!-- Counter.vue -->
<template>
  <div>
    <div>
      <button @click="increment">+</button>
      <span>{{ count }}</span>
      <span>（翻倍：{{ doubleCount }}）</span>
      <button @click="decrement">-</button>
      <button @click="incrementByAmount(5)">+5</button>
      <button @click="incrementAsync">异步+</button>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'Counter',
  setup() {
    const store = useStore()
    
    // 计算属性
    const count = computed(() => store.state.count)
    const doubleCount = computed(() => store.getters.doubleCount)
    
    // 方法
    const increment = () => store.commit('increment')
    const decrement = () => store.commit('decrement')
    const incrementByAmount = (amount) => store.commit('incrementByAmount', amount)
    const incrementAsync = () => store.dispatch('incrementAsync')
    
    return {
      count,
      doubleCount,
      increment,
      decrement,
      incrementByAmount,
      incrementAsync
    }
  }
}
</script>

1

npm install pinia

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // 状态
  state: () => ({
    count: 0
  }),
  // 计算属性
  getters: {
    doubleCount: (state) => state.count * 2
  },
  // 操作（可以包含异步操作）
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    },
    incrementByAmount(amount) {
      this.count += amount
    },
    async incrementAsync() {
      // 模拟异步操作
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.count++
    }
  }
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!-- Counter.vue -->
<template>
  <div>
    <div>
      <button @click="increment">+</button>
      <span>{{ count }}</span>
      <span>（翻倍：{{ doubleCount }}）</span>
      <button @click="decrement">-</button>
      <button @click="incrementByAmount(5)">+5</button>
      <button @click="incrementAsync">异步+</button>
    </div>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/counter'

export default {
  name: 'Counter',
  setup() {
    const counter = useCounterStore()
    
    return {
      // 直接从store中解构出状态和方法
      count: counter.count,
      doubleCount: counter.doubleCount,
      increment: counter.increment,
      decrement: counter.decrement,
      incrementByAmount: counter.incrementByAmount,
      incrementAsync: counter.incrementAsync
    }
  }
}
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// 基本GET请求
fetch('https://api.example.com/users')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

// POST请求
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: '张三',
    email: 'zhangsan@example.com'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

async function fetchUsers() {
  try {
    const response = await fetch('https://api.example.com/users');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error);
  }
}

// 调用函数
fetchUsers();

1

npm install axios

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

import axios from 'axios';

// 基本GET请求
axios.get('https://api.example.com/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

// POST请求
axios.post('https://api.example.com/users', {
  name: '张三',
  email: 'zhangsan@example.com'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error:', error);
});

// 使用async/await
async function fetchUsers() {
  try {
    const response = await axios.get('https://api.example.com/users');
    console.log(response.data);
    return response.data;
  } catch (error) {
    console.error('Error:', error);
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

// api.js
import axios from 'axios';

// 创建axios实例
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器
api.interceptors.request.use(
  config => {
    // 可以在这里添加认证token等
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
api.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    // 处理错误
    if (error.response) {
      // 服务器返回错误状态码
      switch (error.response.status) {
        case 401:
          // 未授权，重定向到登录页面
          window.location.href = '/login';
          break;
        case 403:
          // 禁止访问
          console.error('没有权限访问该资源');
          break;
        case 404:
          // 资源不存在
          console.error('请求的资源不存在');
          break;
        case 500:
          // 服务器错误
          console.error('服务器错误');
          break;
        default:
          console.error('请求失败');
      }
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error('网络错误，请检查您的网络连接');
    } else {
      // 请求配置出错
      console.error('请求配置错误:', error.message);
    }
    return Promise.reject(error);
  }
);

export default api;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import api from './api';

// GET请求
async function fetchUsers() {
  try {
    const data = await api.get('/users');
    console.log(data);
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

// POST请求
async function createUser(userData) {
  try {
    const data = await api.post('/users', userData);
    console.log(data);
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

const express = require('express');
const cors = require('cors');
const app = express();

// 允许所有来源的跨域请求
app.use(cors());

// 或者配置特定的来源
app.use(cors({
  origin: 'http://localhost:3000', // 只允许这个域名的请求
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

// 其他路由和中间件
// ...

app.listen(3001, () => {
  console.log('Server is running on port 3001');
});

1
2
3
4
5
6
7

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001",
  // ...
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3001',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function fetchData(callbackName) {
  const script = document.createElement('script');
  script.src = `http://api.example.com/data?callback=${callbackName}`;
  document.body.appendChild(script);
}

window.handleResponse = function(data) {
  console.log(data);
  // 处理返回的数据
};

fetchData('handleResponse');

1

npm install @apollo/client graphql

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>
);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

import { useQuery, gql } from '@apollo/client';

// 定义GraphQL查询
const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

function UserList() {
  const { loading, error, data } = useQuery(GET_USERS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.users.map(user => (
        <li key={user.id}>
          {user.name} ({user.email})
        </li>
      ))}
    </ul>
  );
}

1
2
3
4
5
6

// package.json
{
  "name": "my-app",
  "sideEffects": ["*.css", "**/*.css", "src/setupProxy.js"], // 标记有副作用的文件
  // ...
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- 预加载关键CSS -->
<link rel="preload" href="critical.css" as="style">

<!-- 预加载字体 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- 预连接到重要的第三方域名 -->
<link rel="preconnect" href="https://api.example.com">

<!-- 预加载关键JavaScript -->
<link rel="preload" href="critical.js" as="script">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

weather-app/
├── public/
├── src/
│   ├── components/
│   │   ├── WeatherCard.js
│   │   ├── ForecastList.js
│   │   ├── SearchBar.js
│   │   ├── HistoryList.js
│   │   └── LoadingSpinner.js
│   ├── features/
│   │   ├── weather/
│   │   │   └── weatherSlice.js
│   │   └── history/
│   │       └── historySlice.js
│   ├── services/
│   │   └── weatherAPI.js
│   ├── utils/
│   │   └── formatters.js
│   ├── App.js
│   ├── index.js
│   └── store.js
├── package.json
└── README.md

1
2

npx create-react-app weather-app
cd weather-app

1

npm install @reduxjs/toolkit react-redux axios

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { configureStore } from '@reduxjs/toolkit';
import weatherReducer from './features/weather/weatherSlice';
import historyReducer from './features/history/historySlice';

export const store = configureStore({
  reducer: {
    weather: weatherReducer,
    history: historyReducer,
  },
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { fetchCurrentWeather, fetchForecast } from '../../services/weatherAPI';

export const getCurrentWeather = createAsyncThunk(
  'weather/getCurrentWeather',
  async (location, { rejectWithValue }) => {
    try {
      const data = await fetchCurrentWeather(location);
      return data;
    } catch (error) {
      return rejectWithValue(error.message);
    }
  }
);

export const getForecast = createAsyncThunk(
  'weather/getForecast',
  async (location, { rejectWithValue }) => {
    try {
      const data = await fetchForecast(location);
      return data;
    } catch (error) {
      return rejectWithValue(error.message);
    }
  }
);

const initialState = {
  current: null,
  forecast: null,
  loading: false,
  error: null,
  location: '',
};

const weatherSlice = createSlice({
  name: 'weather',
  initialState,
  reducers: {
    setLocation: (state, action) => {
      state.location = action.payload;
    },
    clearError: (state) => {
      state.error = null;
    },
  },
  extraReducers: (builder) => {
    builder
      // getCurrentWeather cases
      .addCase(getCurrentWeather.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(getCurrentWeather.fulfilled, (state, action) => {
        state.loading = false;
        state.current = action.payload;
      })
      .addCase(getCurrentWeather.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      })
      // getForecast cases
      .addCase(getForecast.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(getForecast.fulfilled, (state, action) => {
        state.loading = false;
        state.forecast = action.payload;
      })
      .addCase(getForecast.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      });
  },
});

export const { setLocation, clearError } = weatherSlice.actions;

export default weatherSlice.reducer;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  items: JSON.parse(localStorage.getItem('weatherSearchHistory') || '[]'),
};

const historySlice = createSlice({
  name: 'history',
  initialState,
  reducers: {
    addSearch: (state, action) => {
      // 避免重复项
      const exists = state.items.some(item => 
        item.city.toLowerCase() === action.payload.city.toLowerCase()
      );
      
      if (!exists) {
        // 添加到开头
        state.items.unshift(action.payload);
        // 只保留最近10条记录
        if (state.items.length > 10) {
          state.items = state.items.slice(0, 10);
        }
        // 保存到localStorage
        localStorage.setItem('weatherSearchHistory', JSON.stringify(state.items));
      }
    },
    removeSearch: (state, action) => {
      state.items = state.items.filter(item => item.id !== action.payload);
      localStorage.setItem('weatherSearchHistory', JSON.stringify(state.items));
    },
    clearHistory: (state) => {
      state.items = [];
      localStorage.removeItem('weatherSearchHistory');
    },
  },
});

export const { addSearch, removeSearch, clearHistory } = historySlice.actions;

export default historySlice.reducer;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

import axios from 'axios';

// 替换为你的API密钥
const API_KEY = 'your_api_key_here';
const BASE_URL = 'https://api.openweathermap.org/data/2.5';

// 创建axios实例
const api = axios.create({
  baseURL: BASE_URL,
  params: {
    appid: API_KEY,
    units: 'metric', // 使用摄氏度
    lang: 'zh_cn', // 使用中文
  },
});

// 获取当前天气
export const fetchCurrentWeather = async (location) => {
  const params = typeof location === 'string' 
    ? { q: location } 
    : { lat: location.lat, lon: location.lon };
  
  const response = await api.get('/weather', { params });
  return response.data;
};

// 获取天气预报
export const fetchForecast = async (location) => {
  const params = typeof location === 'string' 
    ? { q: location } 
    : { lat: location.lat, lon: location.lon };
  
  const response = await api.get('/forecast', { params });
  return response.data;
};

// 获取用户当前位置的坐标
export const getCurrentLocation = () => {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) {
      reject(new Error('浏览器不支持地理定位'));
    }
    
    navigator.geolocation.getCurrentPosition(
      (position) => {
        resolve({
          lat: position.coords.latitude,
          lon: position.coords.longitude,
        });
      },
      (error) => {
        reject(new Error('获取位置失败'));
      }
    );
  });
};

1
2
3
4
5
6
7
8

import React from 'react';
import './LoadingSpinner.css';

function LoadingSpinner() {
  return <div className="loading-spinner"></div>;
}

export default LoadingSpinner;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

import React from 'react';
import { useSelector } from 'react-redux';
import { formatTemp, formatDate, getWeatherIconUrl } from '../utils/formatters';
import './WeatherCard.css';

function WeatherCard() {
  const { current, loading, error } = useSelector((state) => state.weather);

  if (loading) return <div className="weather-card loading">加载中...</div>;
  if (error) return <div className="weather-card error">错误: {error}</div>;
  if (!current) return <div className="weather-card empty">请搜索城市或允许获取您的位置</div>;

  return (
    <div className="weather-card">
      <div className="weather-header">
        <h2 className="city-name">{current.name}</h2>
        <p className="date">{formatDate(current.dt)}</p>
      </div>
      
      <div className="weather-main">
        <div className="weather-icon">
          <img 
            src={getWeatherIconUrl(current.weather[0].icon)} 
            alt={current.weather[0].description}
          />
        </div>
        <div className="temp-info">
          <div className="current-temp">{formatTemp(current.main.temp)}</div>
          <div className="weather-description">
            {current.weather[0].description}
          </div>
        </div>
      </div>
      
      <div className="weather-details">
        <div className="detail-item">
          <span className="detail-label">体感温度</span>
          <span className="detail-value">{formatTemp(current.main.feels_like)}</span>
        </div>
        <div className="detail-item">
          <span className="detail-label">湿度</span>
          <span className="detail-value">{current.main.humidity}%</span>
        </div>
        <div className="detail-item">
          <span className="detail-label">风速</span>
          <span className="detail-value">{current.wind.speed} m/s</span>
        </div>
        <div className="detail-item">
          <span className="detail-label">气压</span>
          <span className="detail-value">{current.main.pressure} hPa</span>
        </div>
      </div>
    </div>
  );
}

export default WeatherCard;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

.weather-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.weather-header {
  text-align: center;
  margin-bottom: 20px;
}

.city-name {
  font-size: 28px;
  margin: 0 0 8px 0;
}

.date {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}

.weather-main {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.weather-icon img {
  width: 100px;
  height: 100px;
}

.temp-info {
  text-align: center;
}

.current-temp {
  font-size: 48px;
  font-weight: 300;
  margin-bottom: 8px;
}

.weather-description {
  font-size: 18px;
  text-transform: capitalize;
}

.weather-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}

.detail-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.detail-label {
  display: block;
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 4px;
}

.detail-value {
  font-size: 18px;
  font-weight: 500;
}

.loading, .error, .empty {
  text-align: center;
  padding: 40px 20px;
  font-size: 18px;
}