Woodman's Second Brain | 第二大脑

1.03 可否利用UnoCSS中的漂亮图标，将这个程序美化一下，比如可以用矢量图标替代某些文字说明，可能会更加直观、美观

4分钟阅读

当然可以! 使用 UnoCSS 的图标可以大大提升应用的视觉吸引力。我们可以使用 UnoCSS 提供的图标集来美化界面。以下是如何整合 UnoCSS 图标并美化应用的步骤:

  1. 首先, 在项目中安装 UnoCSS 和图标集:
bun add -d unocss @unocss/preset-icons @iconify-json/carbon
  1. 创建一个 UnoCSS 配置文件 uno.config.ts:
import { defineConfig, presetUno, presetIcons } from 'unocss'
 
export default defineConfig({
  presets: [
    presetUno(),
    presetIcons({
      scale: 1.2,
      warn: true,
    }),
  ],
  safelist: 'i-carbon-home i-carbon-list i-carbon-edit i-carbon-add i-carbon-checkmark i-carbon-close i-carbon-sun i-carbon-cloud i-carbon-rain'.split(' '),
})
  1. 修改 src/index.ts 文件, 添加 UnoCSS:
import { Elysia } from "elysia";
import { html } from "@elysiajs/html";
import { staticPlugin } from "@elysiajs/static";
import UnoCSS from 'unocss/vite'
import { layout } from "./views/layout";
// ... 其他导入
 
const app = new Elysia()
  .use(html())
  .use(staticPlugin())
  .get("/", ({ html }) => html(layout(forecast())))
  // ... 其他路由
  .get("/uno.css", async () => {
    const { default: uno } = await import('unocss/vite')
    const { createGenerator } = await import('unocss')
    const { default: presetUno } = await import('@unocss/preset-uno')
    const { default: presetIcons } = await import('@unocss/preset-icons')
    
    const uno = createGenerator({
      presets: [
        presetUno(),
        presetIcons({
          scale: 1.2,
          warn: true,
        }),
      ],
    })
 
    const { css } = await uno.generate('')
    return new Response(css, {
      headers: {
        'content-type': 'text/css',
      },
    })
  })
  .listen(3000);
 
console.log(`Server is running at http://localhost:${app.server?.port}`);
  1. 修改 src/views/layout.ts 文件, 添加 UnoCSS 样式链接:
export const layout = (content: string) => `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather Forecast</title>
  <script src="https://unpkg.com/htmx.org@1.9.6"></script>
  <link href="/uno.css" rel="stylesheet">
  <link href="/public/styles.css" rel="stylesheet">
</head>
<body class="bg-gray-100 text-gray-800">
  <div class="container mx-auto p-4">
    <h1 class="text-3xl font-bold mb-4 flex items-center"><i class="i-carbon-cloud mr-2"></i>Weather Forecast</h1>
    <nav class="mb-4 flex">
      <a href="/" class="mr-4 flex items-center"><i class="i-carbon-home mr-1"></i>Home</a>
      <a href="/themes" class="mr-4 flex items-center"><i class="i-carbon-list mr-1"></i>Themes</a>
    </nav>
    ${content}
  </div>
</body>
</html>
`;
  1. 修改 src/views/themes.ts 文件, 使用图标美化界面:
import { Theme } from "../themes";
 
export const themesList = (themes: Theme[]) => `
  <div class="mb-4">
    <h2 class="text-2xl mb-2 flex items-center"><i class="i-carbon-list mr-2"></i>Themes</h2>
    <ul>
      ${themes.map(theme => `
        <li class="mb-2 flex items-center">
          <i class="i-carbon-document mr-2"></i>${theme.name}
          <button hx-get="/apply-theme/${theme.name}" hx-target="body" class="ml-2 p-1 bg-blue-500 text-white rounded flex items-center">
            <i class="i-carbon-checkmark mr-1"></i>Apply
          </button>
          <a href="/themes/edit/${theme.name}" class="ml-2 p-1 bg-green-500 text-white rounded flex items-center">
            <i class="i-carbon-edit mr-1"></i>Edit
          </a>
        </li>
      `).join('')}
    </ul>
    <a href="/themes/edit" class="mt-4 inline-block p-2 bg-purple-500 text-white rounded flex items-center">
      <i class="i-carbon-add mr-1"></i>Create New Theme
    </a>
  </div>
`;
 
export const themeEditor = (theme: Theme | null) => `
  <div class="mb-4">
    <h2 class="text-2xl mb-2 flex items-center">
      <i class="i-carbon-edit mr-2"></i>${theme ? 'Edit Theme' : 'Create New Theme'}
    </h2>
    <form hx-post="/themes/save" hx-swap="outerHTML">
      <div class="mb-2">
        <label for="name" class="block flex items-center"><i class="i-carbon-text-font mr-1"></i>Theme Name:</label>
        <input type="text" id="name" name="name" value="${theme?.name || ''}" required class="w-full p-2 border rounded">
      </div>
      <div class="mb-2">
        <label for="content" class="block flex items-center"><i class="i-carbon-code mr-1"></i>Theme Content:</label>
        <textarea id="content" name="content" rows="10" required class="w-full p-2 border rounded">${theme?.content || ''}</textarea>
      </div>
      <button type="submit" class="p-2 bg-blue-500 text-white rounded flex items-center">
        <i class="i-carbon-save mr-1"></i>Save Theme
      </button>
    </form>
  </div>
`;
  1. 修改 src/views/forecast. Ts 文件, 添加天气图标:
import { WeatherData } from "../weather";
 
const getWeatherIcon = (condition: string) => {
  switch (condition.toLowerCase()) {
    case 'sunny':
      return 'i-carbon-sun';
    case 'cloudy':
      return 'i-carbon-cloud';
    case 'rainy':
      return 'i-carbon-rain';
    default:
      return 'i-carbon-cloud';
  }
};
 
export const forecast = (city?: string, days?: number, weatherData?: WeatherData[]) => `
  <div class="mb-4">
    <form hx-get="/forecast" hx-target="#forecast" class="mb-4">
      <input type="text" name="city" placeholder="Enter city" required class="p-2 border rounded mr-2">
      <input type="number" name="days" placeholder="Number of days" required min="1" max="7" class="p-2 border rounded mr-2">
      <button type="submit" class="p-2 bg-blue-500 text-white rounded flex items-center">
        <i class="i-carbon-search mr-1"></i>Get Forecast
      </button>
    </form>
    <div id="forecast">
      ${weatherData ? `
        <h2 class="text-2xl mb-2">Weather Forecast for ${city} (${days} days)</h2>
        <ul>
          ${weatherData.Map (day => `
            <li class="mb-2 flex items-center">
              <i class="${getWeatherIcon(day.condition)} mr-2"></i>
              ${day.date}: ${day.temperature}°C, ${day.condition}
            </li>
          `).join('')}
        </ul>
      ` : ''}
    </div>
  </div>
`;

这些修改将使用 UnoCSS 的图标来美化界面, 使应用更加直观和美观。图标将替代一些文字说明, 使界面更加简洁清晰。

记得在运行应用之前, 确保已经安装了所有必要的依赖, 并且 UnoCSS 配置文件已经正确设置。然后, 你可以像之前一样运行应用:

bun run dev

这些改动将大大提升应用的视觉吸引力, 使用户体验更加愉悦。

关系图谱

反向链接