From 1e7cf9e65d4f5442dcc5591d95f545216a90627d Mon Sep 17 00:00:00 2001 From: krank Date: Fri, 10 Jan 2025 16:33:59 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20AI=E8=AF=86=E5=9B=BE=E5=89=8D=E7=AB=AF?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/pathInfo.json | 1 + web/src/view/systemTools/autoCode/picture.vue | 525 ++++++++++++++++++ web/tailwind.config.js | 102 ++++ 3 files changed, 628 insertions(+) create mode 100644 web/src/view/systemTools/autoCode/picture.vue diff --git a/web/src/pathInfo.json b/web/src/pathInfo.json index e08798c046..9160de6d6e 100644 --- a/web/src/pathInfo.json +++ b/web/src/pathInfo.json @@ -53,6 +53,7 @@ "/src/view/systemTools/autoCode/component/fieldDialog.vue": "FieldDialog", "/src/view/systemTools/autoCode/component/previewCodeDialog.vue": "PreviewCodeDialog", "/src/view/systemTools/autoCode/index.vue": "AutoCode", + "/src/view/systemTools/autoCode/picture.vue": "Picture", "/src/view/systemTools/autoCodeAdmin/index.vue": "AutoCodeAdmin", "/src/view/systemTools/autoPkg/autoPkg.vue": "AutoPkg", "/src/view/systemTools/exportTemplate/exportTemplate.vue": "ExportTemplate", diff --git a/web/src/view/systemTools/autoCode/picture.vue b/web/src/view/systemTools/autoCode/picture.vue new file mode 100644 index 0000000000..ae24d435f0 --- /dev/null +++ b/web/src/view/systemTools/autoCode/picture.vue @@ -0,0 +1,525 @@ + + + diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 35531e00e3..581694500a 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -18,6 +18,108 @@ module.exports = { } } }, + safelist: [ + /* + 1) 常见的自定义颜色写法,如 bg-[#xxxxxx]、text-[#xxxxxx]、border-[#xxxxxx] + 如果 LLM/接口频繁返回各种 [#RRGGBB] 形式,这个 pattern 可以保留它们的CSS。 + */ + { pattern: /^bg-\[.*\]$/ }, + { pattern: /^text-\[.*\]$/ }, + { pattern: /^border-\[.*\]$/ }, + + /* + 2) Tailwind 默认调色板里的常见前缀 + 下面以 (red|green|blue|gray|indigo|...) 为例,你可根据自己项目加减。 + 同时包括不同深度 (50,100,200,...,900),也可再详细拆分。 + */ + { + pattern: /^(bg|text|border)-(red|green|blue|gray|indigo|yellow|purple|pink|cyan|teal|orange|amber|lime|emerald|fuchsia|rose|sky|violet|stone|neutral)-(50|100|200|300|400|500|600|700|800|900)$/ + }, + + /* + 3) 大小相关(padding、margin等): + m-*, p-* 以及更精细的 mt-*, mb-*... + 匹配数字、1/2、px、等常见写法(也包括 m-auto)。 + 你可以根据自己需求加减。 + */ + { pattern: /^m-[0-9]+$/ }, + { pattern: /^mx-[0-9]+$/ }, + { pattern: /^my-[0-9]+$/ }, + { pattern: /^mt-[0-9]+$/ }, + { pattern: /^mr-[0-9]+$/ }, + { pattern: /^mb-[0-9]+$/ }, + { pattern: /^ml-[0-9]+$/ }, + { pattern: /^m-(auto|px)$/ }, + + { pattern: /^p-[0-9]+$/ }, + { pattern: /^px-[0-9]+$/ }, + { pattern: /^py-[0-9]+$/ }, + { pattern: /^pt-[0-9]+$/ }, + { pattern: /^pr-[0-9]+$/ }, + { pattern: /^pb-[0-9]+$/ }, + { pattern: /^pl-[0-9]+$/ }, + { pattern: /^p-(auto|px)$/ }, + + /* + 4) 宽高相关: w-*, h-*,以及自定义的 w-[300px]、h-[50vh] 等。 + */ + { pattern: /^w-.*$/ }, + { pattern: /^h-.*$/ }, + + /* + 5) 文本尺寸/排版 + 常见如 text-sm, text-lg, text-xl, text-2xl... 也可加正则覆盖 text-[数字]xl + */ + { pattern: /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl)$/ }, + { pattern: /^text-\d+xl$/ }, + + /* + 6) Flex 相关 + */ + "flex", + { pattern: /^flex-(row|col|wrap|nowrap|row-reverse|col-reverse)$/ }, + { pattern: /^items-(start|end|center|baseline|stretch)$/ }, + { pattern: /^justify-(start|end|center|between|around|evenly)$/ }, + { pattern: /^content-(start|end|center|between|around|evenly)$/ }, + + /* + 7) 边框 & 圆角 & 阴影 + */ + { pattern: /^rounded(-(none|sm|md|lg|xl|2xl|3xl|full))?$/ }, + { pattern: /^rounded-[trbl]{1,2}(-(none|sm|md|lg|xl|2xl|3xl|full))?$/ }, // 形如 rounded-t-lg、rounded-bl-md + { pattern: /^shadow(-(sm|md|lg|xl|2xl|inner|none))?$/ }, + { pattern: /^border(-(0|2|4|8))?$/ }, + { pattern: /^border-[trbl]{1,2}(-(0|2|4|8))?$/ }, + + /* + 8) 文本对齐 & 显示模式 + */ + { pattern: /^text-(left|center|right|justify)$/ }, + { pattern: /^(block|inline|inline-block|inline-flex|hidden)$/ }, + + /* + 9) 状态变体(如 hover:, focus:, active: 等) + 允许 hover:bg-red-500、focus:border-blue-500 等 + 这里用 .+ 去捕获前缀后所有东西,不过要小心可能会保留过多无用CSS + */ + { pattern: /^hover:.+$/ }, + { pattern: /^focus:.+$/ }, + { pattern: /^active:.+$/ }, + + /* + 10) 你自己项目中最常出现的其他 patterns (可自行添加): + - z-[数字] + - absolute / relative / fixed / sticky + - top-[数字] / left-[数字] + - grid / gap-[数字] + - ... + */ + // { pattern: /^z-\d+$/ }, + // "absolute", "relative", "fixed", "sticky", + // { pattern: /^top-\[.*\]$/ }, + // { pattern: /^left-\[.*\]$/ }, + // "grid", { pattern: /^gap-\d+$/ }, + ], darkMode: 'class', plugins: [] }