From 1f1f3cb72429610a067db341ac513e02b6df1078 Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Thu, 23 Nov 2023 17:32:09 +0800 Subject: [PATCH] feat: add tailwindcss/forms plugin to standardize the style of form elements (#4893) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### What type of PR is this? /area console /kind improvement #### What this PR does / why we need it: Use [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms) plugin to standardize the style of form elements, and resolve some style issues. before: 图片 after: 图片 #### Which issue(s) this PR fixes: Fixes #4734 #### Does this PR introduce a user-facing change? ```release-note 优化 Console 端表单元素样式 ``` --- .../contents/attachments/AttachmentList.vue | 1 - .../components/AttachmentListItem.vue | 1 - .../modules/contents/comments/CommentList.vue | 2 -- .../contents/pages/DeletedSinglePageList.vue | 2 -- .../modules/contents/pages/SinglePageList.vue | 1 - .../pages/components/SinglePageListItem.vue | 1 - .../contents/posts/DeletedPostList.vue | 2 -- .../modules/contents/posts/PostList.vue | 1 - .../posts/components/PostListItem.vue | 1 - .../modules/system/plugins/PluginList.vue | 1 - .../plugins/components/PluginListItem.vue | 1 - .../modules/system/roles/RoleDetail.vue | 9 +------- .../roles/components/RoleEditingModal.vue | 1 - .../modules/system/users/UserList.vue | 2 -- console/package.json | 1 + console/pnpm-lock.yaml | 17 ++++++++++++++ .../global-search/GlobalSearchModal.vue | 2 +- console/src/formkit/theme.ts | 9 ++++---- console/src/styles/tailwind.css | 23 +++++++++++++++++++ console/tailwind.config.js | 1 + .../PersonalAccessTokenCreationModal.vue | 1 - 21 files changed, 48 insertions(+), 32 deletions(-) diff --git a/console/console-src/modules/contents/attachments/AttachmentList.vue b/console/console-src/modules/contents/attachments/AttachmentList.vue index 8372c1b71..226e1e45e 100644 --- a/console/console-src/modules/contents/attachments/AttachmentList.vue +++ b/console/console-src/modules/contents/attachments/AttachmentList.vue @@ -293,7 +293,6 @@ onMounted(() => { > diff --git a/console/console-src/modules/contents/attachments/components/AttachmentListItem.vue b/console/console-src/modules/contents/attachments/components/AttachmentListItem.vue index 27aaaa08a..954271692 100644 --- a/console/console-src/modules/contents/attachments/components/AttachmentListItem.vue +++ b/console/console-src/modules/contents/attachments/components/AttachmentListItem.vue @@ -122,7 +122,6 @@ const { operationItems } = useOperationItemExtensionPoint( > diff --git a/console/console-src/modules/contents/comments/CommentList.vue b/console/console-src/modules/contents/comments/CommentList.vue index 7b8c99b77..8910acf5c 100644 --- a/console/console-src/modules/contents/comments/CommentList.vue +++ b/console/console-src/modules/contents/comments/CommentList.vue @@ -236,7 +236,6 @@ const handleApproveInBatch = async () => { > @@ -375,7 +374,6 @@ const handleApproveInBatch = async () => { diff --git a/console/console-src/modules/contents/pages/DeletedSinglePageList.vue b/console/console-src/modules/contents/pages/DeletedSinglePageList.vue index 38b361a0b..ec37d3d16 100644 --- a/console/console-src/modules/contents/pages/DeletedSinglePageList.vue +++ b/console/console-src/modules/contents/pages/DeletedSinglePageList.vue @@ -240,7 +240,6 @@ watch( > @@ -308,7 +307,6 @@ watch( diff --git a/console/console-src/modules/contents/pages/SinglePageList.vue b/console/console-src/modules/contents/pages/SinglePageList.vue index 80be4af5e..89131295f 100644 --- a/console/console-src/modules/contents/pages/SinglePageList.vue +++ b/console/console-src/modules/contents/pages/SinglePageList.vue @@ -325,7 +325,6 @@ watch(selectedPageNames, (newValue) => { > diff --git a/console/console-src/modules/contents/pages/components/SinglePageListItem.vue b/console/console-src/modules/contents/pages/components/SinglePageListItem.vue index ac4aff6d3..60be79293 100644 --- a/console/console-src/modules/contents/pages/components/SinglePageListItem.vue +++ b/console/console-src/modules/contents/pages/components/SinglePageListItem.vue @@ -130,7 +130,6 @@ const handleDelete = async () => { diff --git a/console/console-src/modules/contents/posts/DeletedPostList.vue b/console/console-src/modules/contents/posts/DeletedPostList.vue index c6e07737f..6837127c6 100644 --- a/console/console-src/modules/contents/posts/DeletedPostList.vue +++ b/console/console-src/modules/contents/posts/DeletedPostList.vue @@ -233,7 +233,6 @@ watch( > @@ -300,7 +299,6 @@ watch( diff --git a/console/console-src/modules/contents/posts/PostList.vue b/console/console-src/modules/contents/posts/PostList.vue index 0e622d099..85968934b 100644 --- a/console/console-src/modules/contents/posts/PostList.vue +++ b/console/console-src/modules/contents/posts/PostList.vue @@ -331,7 +331,6 @@ watch(selectedPostNames, (newValue) => { > diff --git a/console/console-src/modules/contents/posts/components/PostListItem.vue b/console/console-src/modules/contents/posts/components/PostListItem.vue index ea64ce3ae..55acc68e7 100644 --- a/console/console-src/modules/contents/posts/components/PostListItem.vue +++ b/console/console-src/modules/contents/posts/components/PostListItem.vue @@ -178,7 +178,6 @@ const { startFields, endFields } = useEntityFieldItemExtensionPoint( diff --git a/console/console-src/modules/system/plugins/PluginList.vue b/console/console-src/modules/system/plugins/PluginList.vue index bed4996ff..87241bc52 100644 --- a/console/console-src/modules/system/plugins/PluginList.vue +++ b/console/console-src/modules/system/plugins/PluginList.vue @@ -167,7 +167,6 @@ onMounted(() => { > diff --git a/console/console-src/modules/system/plugins/components/PluginListItem.vue b/console/console-src/modules/system/plugins/components/PluginListItem.vue index afb5e6fa1..a5916c70e 100644 --- a/console/console-src/modules/system/plugins/components/PluginListItem.vue +++ b/console/console-src/modules/system/plugins/components/PluginListItem.vue @@ -240,7 +240,6 @@ const { startFields, endFields } = useEntityFieldItemExtensionPoint( diff --git a/console/console-src/modules/system/roles/RoleDetail.vue b/console/console-src/modules/system/roles/RoleDetail.vue index 0f3cc9848..e8922503c 100644 --- a/console/console-src/modules/system/roles/RoleDetail.vue +++ b/console/console-src/modules/system/roles/RoleDetail.vue @@ -233,18 +233,11 @@ onMounted(() => { v-if="!isSuperRole" v-model="selectedRoleTemplates" :value="role.metadata.name" - class="h-4 w-4 rounded border-gray-300 text-indigo-600" type="checkbox" :disabled="isSystemReserved" @change="handleRoleTemplateSelect" /> - +
{{ diff --git a/console/console-src/modules/system/roles/components/RoleEditingModal.vue b/console/console-src/modules/system/roles/components/RoleEditingModal.vue index 19dd9da17..00b1d1a56 100644 --- a/console/console-src/modules/system/roles/components/RoleEditingModal.vue +++ b/console/console-src/modules/system/roles/components/RoleEditingModal.vue @@ -219,7 +219,6 @@ const handleResetForm = () => { diff --git a/console/console-src/modules/system/users/UserList.vue b/console/console-src/modules/system/users/UserList.vue index 772d6077f..ef98a1bdf 100644 --- a/console/console-src/modules/system/users/UserList.vue +++ b/console/console-src/modules/system/users/UserList.vue @@ -299,7 +299,6 @@ onMounted(() => { > @@ -412,7 +411,6 @@ onMounted(() => { =3.0.0 || >= 3.0.0-alpha.1' + dependencies: + mini-svg-data-uri: 1.4.4 + tailwindcss: 3.3.0(postcss@8.4.21) + dev: true + /@tanstack/match-sorter-utils@8.7.6: resolution: {integrity: sha512-2AMpRiA6QivHOUiBpQAVxjiHAA68Ei23ZUMNaRJrN6omWiSFLoYrxGcT6BXtuzp0Jw4h6HZCmGGIM/gbwebO2A==} engines: {node: '>=12'} @@ -8798,6 +8810,11 @@ packages: engines: {node: '>=4'} dev: true + /mini-svg-data-uri@1.4.4: + resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==} + hasBin: true + dev: true + /minimatch@3.1.2: resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} dependencies: diff --git a/console/src/components/global-search/GlobalSearchModal.vue b/console/src/components/global-search/GlobalSearchModal.vue index aeee76ef6..343ec8b05 100644 --- a/console/src/components/global-search/GlobalSearchModal.vue +++ b/console/src/components/global-search/GlobalSearchModal.vue @@ -382,7 +382,7 @@ const onVisibleChange = (visible: boolean) => { ref="globalSearchInput" v-model="keyword" :placeholder="$t('core.components.global_search.placeholder')" - class="w-full py-1 text-base outline-none" + class="w-full px-0 py-1 text-base outline-none" autocomplete="off" autocorrect="off" spellcheck="false" diff --git a/console/src/formkit/theme.ts b/console/src/formkit/theme.ts index 27d90b2e0..70c9a91ad 100644 --- a/console/src/formkit/theme.ts +++ b/console/src/formkit/theme.ts @@ -4,7 +4,7 @@ const textClassification = { inner: "inline-flex items-center w-full relative box-border border border-gray-300 formkit-invalid:border-red-500 h-9 rounded-base overflow-hidden focus-within:border-primary focus-within:shadow-sm w-full sm:max-w-lg transition-all", input: - "outline-0 bg-white antialiased resize-none w-full text-black block transition-all appearance-none h-full px-3 text-sm", + "bg-white resize-none w-full text-black block transition-all h-full px-3 text-sm", }; const boxClassification = { @@ -15,8 +15,7 @@ const boxClassification = { wrapper: "flex items-center mb-1 cursor-pointer group-[.formkit-fieldset]:px-2", help: "mb-2 mt-0 px-2", - input: - "form-check-input h-4 w-4 mr-2 border border-gray-500 rounded-sm bg-white checked:bg-primary focus:outline-none focus:ring-0 transition duration-200", + input: "form-check-input mr-2 bg-white", inner: "flex items-center", }; @@ -105,7 +104,7 @@ const theme: Record> = { tagSelect: { ...textClassification, inner: `${textClassification.inner} !overflow-visible !h-auto min-h-[2.25rem]`, - input: `w-0 flex-grow outline-0 bg-transparent py-1 px-3 block transition-all appearance-none text-sm antialiased`, + input: `w-0 flex-grow bg-transparent py-1 px-3 block transition-all text-sm`, "post-tags-wrapper": "flex w-full items-center", "post-tags": "flex w-full flex-wrap items-center", "post-tag-wrapper": "inline-flex items-center p-1", @@ -118,7 +117,7 @@ const theme: Record> = { categorySelect: { ...textClassification, inner: `${textClassification.inner} !overflow-visible !h-auto min-h-[2.25rem]`, - input: `w-0 flex-grow outline-0 bg-transparent py-1 px-3 block transition-all appearance-none text-sm antialiased`, + input: `w-0 flex-grow bg-transparent py-1 px-3 block transition-all text-sm`, "post-categories-wrapper": "flex w-full items-center", "post-categories": "flex w-full flex-wrap items-center", "post-categories-button": diff --git a/console/src/styles/tailwind.css b/console/src/styles/tailwind.css index b5c61c956..4d9e70473 100644 --- a/console/src/styles/tailwind.css +++ b/console/src/styles/tailwind.css @@ -1,3 +1,26 @@ @tailwind base; @tailwind components; @tailwind utilities; + +/* override @tailwindcss/forms styles */ +input[type="text"], +input[type="password"], +input[type="email"], +input[type="number"], +input[type="url"], +input[type="date"], +input[type="datetime-local"], +input[type="month"], +input[type="week"], +input[type="time"], +input[type="search"], +input[type="tel"], +input:where(:not([type])), +select, +textarea { + @apply border-none py-0 focus:outline-0 focus:ring-0; +} + +input[type="checkbox"] { + @apply rounded-sm border-gray-500; +} diff --git a/console/tailwind.config.js b/console/tailwind.config.js index 9e030c7ad..e807b8c95 100644 --- a/console/tailwind.config.js +++ b/console/tailwind.config.js @@ -24,6 +24,7 @@ module.exports = { require("@tailwindcss/aspect-ratio"), require("@formkit/themes/tailwindcss"), require("@tailwindcss/container-queries"), + require("@tailwindcss/forms"), require("tailwindcss-themer")({ defaultTheme: { extend: { diff --git a/console/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue b/console/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue index ee0dc2f8c..46f77adfd 100644 --- a/console/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue +++ b/console/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue @@ -179,7 +179,6 @@ const { copy } = useClipboard({