Tailwind CSS 切图仔福音

最近刚了解到Tailwind CSS这个css框架，此篇文章也只是简单来使用一下。

我们来简单认识一下TailwindCSS它这个东西到底是个啥，我们来到官方文档Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网

通过网站标题我们也看出来了它让我们不用在另外写css，就能把样式完成。听起来觉得太方便了。话不多说开始使用它来仿写一个chatgpt

安装配置TailwindCSS

官方文档也有具体的方法，我把它搬过来。

创建项目

先来创建好我们的vue项目

npm init vite

为啥用vite呢，总结一个字就是快。我们把创建好的项目该删掉的删掉。

安装Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

通过这两个指令安装Tailwind CSS

配置模板文件路径

将tailwind.config.js文件配置为这样

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    // 任何层级
    "./src/**/*.{js,vue,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

将加载 Tailwind 的指令添加到你的 CSS 文件中

@tailwind base;
@tailwind components;
@tailwind utilities;

这里我就将他添加到style.css文件里

开始完成项目

我们先来浅浅尝试一下Tailwind CSS给我们写的样式怎么样

<div class="flex flex-col h-screen">
    <div class="flex flex-nowrap fixed w-full items-baseline 
        top-0 px-6 py-4 bg-gray-100">
      <div class="text-2xl font-bold">
        ChatGPT
      </div>
      <div class="ml-4 text-sm text-gray-500">
        基于OpenAI的ChatGPT自然语言模型人工智能对话
      </div>
    </div>
  </div>

感觉还不错吧，那就继续来完成这个项目的核心功能吧。

保存apikey和拿到apikey

我们使用单例的功能将输入的apikey保存到本地存储里面然后可以通过本地存储拿到我们的apikey

const saveAPIKey = (apiKey) => {
    localStorage.setItem('apiKey', apiKey);
    return true;
}

const getApiKey = () => {
    return localStorage.getItem('apiKey');
}

input框的状态转换

判断我们是否输入了apikey然后将input框转换为我们能发送消息的状态

const isConfig = ref(true) // true api-key 设置 false 聊天
const messageContent = ref('')
const clickConfig = () => {
    isConfig.value = true
    messageContent.value = ''
}
const sendOrSave = () => {
    if (!messageContent.value.length) return;
    if (isConfig.value) {
        // save api-key
        if (saveAPIKey(messageContent.value.trim())) {
            isConfig.value = false
        }
        messageContent.value = ''
    } else {
        // send message
    }
}

这里我们得在input框里添加一个三元判断符:type="isConfig ? 'password' : 'text'"和绑定一个发送或保存的函数sendOrsave。这里检测当isConfig为空时就证明我们还没输入apikey，然后我们输入了apikey就转换为了发送文本的状态了。

配置gpt模型

我们到 Apifox 网站上新建一个项目用来模拟发送http请求，然后我们回到我们的项目中在src文件夹下新建一个libs文件夹再新建一个gpt.js文件用来与OpenAI进行交互，以获取基于提供的消息和 API 密钥的聊天完成响应。

export const chat = async (messages, apiKey) => {
    try {

        const result = await fetch("https://api.302.ai/v1/chat/completions", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // 授权信息
                'Authorization': `Bearer ${apiKey}`
            },
            body: JSON.stringify({
                model: "gpt-3.5-turbo",
                messages: messages
            })
        })
        const data = await result.json()
        console.log(data.choices[0].message.content);
        return data.choices[0].message.content

    } catch (err) {
        throw (err)
    }
}

创建聊天消息列表

创建一个响应式数组放一个对象描述系统角色和功能，一个对象描述人工智能助手的能力，提供一些示例

const messageList = ref([
    {
        role: 'system',
        content: "你是人工智能客服，请尽可能简洁回答问题"
    },
    {
        role: 'assistant',
        content: `
        你好，我是AI语言模型，我可以提供一些常用服务和信息，例如：
    
                1. 翻译：我可以把中文翻译成英文，英文翻译成中文，还有其他一些语言翻译，比如法语、日语、西班牙语等。
                
                2. 咨询服务：如果你有任何问题需要咨询，例如健康、法律、投资等方面，我可以尽可能为你提供帮助。
                
                3. 闲聊：如果你感到寂寞或无聊，我们可以聊一些有趣的话题，以减轻你的压力。
                
                请告诉我你需要哪方面的帮助，我会根据你的需求给你提供相应的信息和建议。
                `
    }
])

处理消息

将gpt返回的消息进行处理并显示在页面上

const sendMessage = async () => {
    const message = messageContent.value.trim();
    try {
        isTalking.value = true
        messageList.value.push({
            role: 'user',
            content: message
        })
        const data = await chat(messageList.value, getApiKey())
        messageList.value.push({
            role: 'assistant',
            content: data
        })
        messageContent.value = ""
    } catch (err) {

    } finally {
        isTalking.value = false;
    }
}

检查是否本地存储的apikey

使用onMounted生命周期钩子检查是否存在本地存储的 API key，如果有，则将 isConfig 的状态更新为 false。省的我们第二次使用还要再此添加apikey。

onMounted(() => {
    if (getApiKey()) {
        isConfig.value = false
    }
})

html结构

把所有html结构写完

  <div class="flex flex-col h-screen">
    <div class="flex flex-nowrap fixed w-full items-baseline 
        top-0 px-6 py-4 bg-gray-100">
      <div class="text-2xl font-bold">
        ChatGPT
      </div>
      <div class="ml-4 text-sm text-gray-500">
        基于OpenAI的ChatGPT自然语言模型人工智能对话
      </div>
      <div class="ml-auto px-3 py-2 text-sm 
            cursor-pointer hover:bg-white rounded-md" @click="clickConfig()">
        设置
      </div>
    </div>
    <div class="flex-1 mx-2 mt-20 mb-2">
      <div v-for="item of messageList.filter((v) => v.role != 'system')"
        class="group flex flex-col px-4 py-3 rounded-lg">
        <div class="flex justify-between item-center mb-2">
          {{ item.role }}:
          <div>
            {{ item.content }}:
          </div>
        </div>
      </div>
    </div>
    <div class="sticky bottom-0 w-full p-6 pb-8 bg-gray-100">
      <div class="mb-2 text-sm text-gray-500" v-if="isConfig">
        请输入API KEY:
      </div>
      <div class="flex">
        <input v-model="messageContent" class="input flex-1" :type="isConfig ? 'password' : 'text'"
          :placeholder="isConfig ? 'sk-xxxxxx' : '请输入'" @keydown.enter="sendOrSave()" />
        <button class="btn ml-4" :disabled="isTalking" @click="sendOrSave()">保存</button>
      </div>
    </div>
  </div>

效果

一个简易的gpt3.5就完成了。

总结

Tailwind CSS 以其快速开发、高度可定制性、响应式设计、模块化结构、减少代码冗余、提高代码可维护性、广泛的社区支持以及易于集成等优点，成为了现代前端开发中备受欢迎的CSS框架之一。总结起来就两字好用，所以我要再去了解了解它了