MuYi.dev

Appearance

系统配置 ​

主题配色 ​

默认，nuxtAdmin 的配色为 "sky"。

如需修改为其它配色，可找到 /app.config.ts 文件中的 ui.primary 修改即可。例如：

js
export default defineAppConfig({
    ui: {
        primary: "purple", 
        notifications: {
            position: "top-0 bottom-auto"
        },
        icons: {
            dynamic: true
        },
        table: {
            th: {
                color: "text-gray-900 dark:text-gray-200"
            }
        }
    }
})
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

以上是 Tailwind CSS 的预设颜色，如需自定义颜色，请参考：官方文档。

深色模式 ​

默认，nuxtAdmin 的配置为 light 浅色模式。

如需修改为深色模式，可找到 /nuxt.config.ts 文件中的 colorMode.preference 修改为 dark 即可。例如：

js
export default defineNuxtConfig({
    devtools: { enabled: false },
    modules: [
        // ...
    ],
    colorMode: {
        preference: "dark"
    },
    auth: {
        // ...
    },
    imports: {
        dirs: ["stores"]
    }
})

注意：

配置修改后如果未生效，请手动删除浏览器 localstorage 中的 nuxt-color-mode。

接口配置 ​

在 /nuxt.config.ts 文件中配置接口信息，默认 nuxtAdmin 会请求自身的 server 服务，路径为相对地址：

  • /api/auth/login
  • /api/auth/logout
  • /api/auth/me

配置如下：

js
export default defineNuxtConfig({
    // ...
    auth: {
        baseURL: "/api/",	// 接口地址及路径
        globalAppMiddleware: true,
        provider: {
            type: "local",
            endpoints: {
                signIn: { path: "/auth/login", method: "post" },	// 登录
                signOut: { path: "/auth/logout", method: "post" },	// 登出
                getSession: { path: "/auth/me", method: "get" }	// 获取用户信息
            },
            token: {
                signInResponseTokenPointer: "/data/token",	// 登录接口返回数据中，“token”的位置
                maxAgeInSeconds: 60 * 60 * 24	// 超时时间
            },
            pages: {
                login: "/login"
            }
        }
    },
    //...
})

假如你的接口地址是下面这样的 ，配置文件只需按下面内容修改：

  • http://theBackendApiHost.com/api/v1/login
  • http://theBackendApiHost.com/api/v1/logout
  • http://theBackendApiHost.com/api/v1/user/me
js
export default defineNuxtConfig({
    // ...
    auth: {
        baseURL: "http://theBackendApiHost.com/api/v1/",	// 接口地址及路径
        globalAppMiddleware: true,
        provider: {
            type: "local",
            endpoints: {
                signIn: { path: "/login", method: "post" },	// 登录
                signOut: { path: "/logout", method: "post" },	// 登出
                getSession: { path: "/user/me", method: "get" }	// 获取用户信息
            },
            token: {
                signInResponseTokenPointer: "/data/token",	// 登录接口返回数据中，“token”的位置
                maxAgeInSeconds: 60 * 60 * 24	// 超时时间
            },
            pages: {
                login: "/login"
            }
        }
    },
    //...
})

注意：

nuxtAdmin 是一个 ssr 程序，在 server 和 client 端都会发起请求，请做好接口的 CORS 处理。

国际化 ​

通常情况下数据管理平台是不需要国际化的，也很难有精力维护多个语言的数据内容。

在 nuxtAdmin 中使用语言包，为的是解决内置组件内容的本地化工作。虽然 api 接口也可以解决，但调用同一个组件的所有接口都要定义一遍就显得有些多余了。

默认， nuxtAdmin 的默认语言配置为 zh 中文。

如需修改，可找到 /i18n.config.ts 文件中的 locale ，根据实际需求进行修改。如下：

js
import { defineI18nConfig } from "vue-i18n"
import en from "./locales/en.js"
import zh from "./locales/zh.js"

export default defineI18nConfig(() => ({
    legacy: false,
    locale: "zh",	
    messages: {
        en,
        zh
    }
}))

同时需要准备好相应的语言包文件。如：

js
// /locales/en.js

export default {
    siteName: "Nuxt Admin",
    shortName: "NA",
    slogan: "Admin template with zero front-end development",
    action: {
        confirm: {
            submit: "submit",
            cancel: "cancel"
        },
        detail: {
            close: "close"
        },
        form: {
            submit: "submit",
            cancel: "cancel"
        }
    },
    page: {
        dataTable: {
            search: "search",
            advSearch: "advanced search",
            resetSearch: "reset search",
            submit: "search",
            cancel: "cancel",
            reset: "reset",
            total: "total {total}",
            pageSize: "{size} row per page"
        }
    }
}

另外，nuxt.config.ts 中还有相关配置，（暂时没看明白如何合并到一个文件中去）。

js
export default defineNuxtConfig({
    devtools: { enabled: false },
    modules: [...],
    colorMode: {...},
    auth: {...},
    i18n: {
        locales: [
            {
                code: "zh",
                label: "中文"
            },
            {
                code: "en",
                label: "English"
            }
        ],
        defaultLocale: "zh",
        vueI18n: "./i18n.config.ts"
    },
    imports: {...}
})

这里的 i18n.locales 控制着页面右上角 topbar 区域那个 i18n 组件下拉菜单中的选项。如下图：

image-20240322142513216