Welcome to Lynzen

You are reading the document for Lynzen System!

Markdown 支持

你可以使用 Markdown 语法编写文档，放在 content 目录下，然后访问 /docs/test/ 页面查看效果。 尝试一下 在新标签页中打开！

跳转链接和视口定位

我们尝试跳转到文档的某个标题时，会自动定位到该标题的位置。试一下，跳转到本页面的 Zen Button 。

暗色模式

Icon

你可以使用 icones.js.org 的图标库。例如： <Icon name="carbon:sun" /> ，得到的效果是 。

也可以在 assets/icons 目录下自定义图标库，要改变这个目录，你需要在 nuxt.config.ts 文件中配置。

Zen Button

We provide a ZenButton component for you to use.

Base Buttons

Plain Buttons

Round Buttons

Circle Buttons

Pretty Norm's Buttons

图片

流程图

第一种写法

第二种写法

公式

对话框组件

直接使用 useMessageBox 、 useMessageSuccess 、 useMessageWarning 、 useMessageError 、 useMessageInfo 函数即可。 语法：

        useMessageBox(message, title, icon)
    

测试一下: 测试

$fetch 请求

useNuxtApp().$http 调用方式

我们封装了 $fetch 请求，它提供了信息反馈等功能，你可以在组件中得到使用的便利。例如：

        try {
            const data = await useNuxtApp().$http('/ic/category/list', {
                method: 'GET',
                query: { category_id: 1 }, 
            })
            
            console.log('请求成功:', data)
        } catch (error) {
            // 错误已被拦截器处理并显示提示，这里只需要处理业务逻辑
            console.error('请求失败:', error)
        }
    

这样你就可以直接在组件中使用 $fetch 请求了。 尝试一下： 测试

api 调用方式

我们将这些 api 方法统一放在 requests 文件中，它们的返回值是 Promise 对象。 baseURL 是 nuxt.config.ts 文件中配置的 apiBaseUrl ，而这个是在 .env 文件中配置的。

测试一下requests

代码：

      const requestsApiTest = async () => {
        try {
          const data = await api.getIcProductListByCategoryId({
            query: { category_id: 1 },
          })
          // 请求成功
          useMessageBox('请求成功', '请求成功', 'success')
          console.log('请求成功:', data)
        } catch (error) {
          // 只有未被拦截器处理的错误（handled: false）才需要显示错误信息
          // handled: true 表示错误已被拦截器处理并弹出消息框，这里不再重复弹出
          if (!error.handled) {
            const message = error?.message || '请求失败'
            useMessageBox(message, '请求失败', 'error')
          }
        }
      }