mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-10-13 04:39:41 +00:00
zhangtao
d34d4a4c50
- 重构工作流模块目录结构，迁移代码文件 - 修复类型断言空值安全问题，添加 ! 操作符 - 优化样式类名，替换 flex-cc 为标准 flex 工具类 - 更新路由标签简化文案，移除冗余注释 - 调整 ruff 配置，放宽行长度限制 - 更新 README 与多语言文案，优化项目描述 - 修复表单、图表组件的类型与样式问题 - 简化搜索表单、数据卡片的布局代码
35 lines
1.2 KiB
Vue
35 lines
1.2 KiB
Vue
<template>
|
|
<div>
|
|
<FaSectionTitle :title="$t('setting.container.title')" class="mt-12.5" />
|
|
<div class="flex">
|
|
<div
|
|
v-for="option in containerWidthOptions"
|
|
:key="option.value"
|
|
class="flex items-center justify-center flex-1 h-16 mt-5 mr-3.5 mb-3.5 cursor-pointer border-2! rounded-lg text-g-800! last:mr-0"
|
|
:class="{
|
|
'border-theme [&_i]:text-theme!': containerWidth === option.value,
|
|
'border border-[var(--default-border)]': containerWidth !== option.value,
|
|
}"
|
|
@click="containerHandlers.setWidth(option.value)"
|
|
>
|
|
<FaSvgIcon :icon="option.icon" class="mr-2 text-lg" />
|
|
<span class="text-sm">{{ option.label }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useSettingsStore } from "@stores";
|
|
|
|
defineOptions({ name: "FaContainerSettings" });
|
|
import { useSettingsConfig } from "../composables/useSettingsConfig";
|
|
import { useSettingsHandlers } from "../composables/useSettingsHandlers";
|
|
import { storeToRefs } from "pinia";
|
|
|
|
const settingStore = useSettingsStore();
|
|
const { containerWidth } = storeToRefs(settingStore);
|
|
const { containerWidthOptions } = useSettingsConfig();
|
|
const { containerHandlers } = useSettingsHandlers();
|
|
</script>
|