github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: add tailwindcss/forms plugin to standardize the style of form elements (#4893) 

#### 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:

<img width="294" alt="图片" src="https://github.com/halo-dev/halo/assets/21301288/eeb6792f-a278-4fd0-a99c-7d7e50dd550d">

after:

<img width="291" alt="图片" src="https://github.com/halo-dev/halo/assets/21301288/652b07d8-7410-4c62-9b4f-1b3228d68883">

#### Which issue(s) this PR fixes:

Fixes #4734 

#### Does this PR introduce a user-facing change?

```release-note
优化 Console 端表单元素样式
```
pull/4902/head
Ryan Wang 2023-11-23 17:32:09 +08:00 committed by GitHub
parent 0bfa1709ce
commit 1f1f3cb724
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 48 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
console/console-src/modules/contents/attachments/AttachmentList.vue
View File

@ -293,7 +293,6 @@ onMounted(() => {
>
<input
v-model="checkedAll"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
@change="handleCheckAllChange"
/>

1
console/console-src/modules/contents/attachments/components/AttachmentListItem.vue
View File

@ -122,7 +122,6 @@ const { operationItems } = useOperationItemExtensionPoint<Attachment>(
>
<input
:checked="selectedAttachments.has(attachment)"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
@click="emit('select', attachment)"
/>

2
console/console-src/modules/contents/comments/CommentList.vue
View File

@ -236,7 +236,6 @@ const handleApproveInBatch = async () => {
>
<input
v-model="checkAll"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
@change="handleCheckAllChange"
/>
@ -375,7 +374,6 @@ const handleApproveInBatch = async () => {
<input
v-model="selectedCommentNames"
:value="comment?.comment?.metadata.name"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
name="comment-checkbox"
type="checkbox"
/>

2
console/console-src/modules/contents/pages/DeletedSinglePageList.vue
View File

@ -240,7 +240,6 @@ watch(
>
<input
v-model="checkedAll"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
@change="handleCheckAllChange"
/>
@ -308,7 +307,6 @@ watch(
<input
v-model="selectedPageNames"
:value="singlePage.page.metadata.name"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
</template>

1
console/console-src/modules/contents/pages/SinglePageList.vue
View File

@ -325,7 +325,6 @@ watch(selectedPageNames, (newValue) => {
>
<input
v-model="checkedAll"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
@change="handleCheckAllChange"
/>

1
console/console-src/modules/contents/pages/components/SinglePageListItem.vue
View File

@ -130,7 +130,6 @@ const handleDelete = async () => {
<input
v-model="selectedPageNames"
:value="singlePage.page.metadata.name"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
/>
</template>

2
console/console-src/modules/contents/posts/DeletedPostList.vue
View File

@ -233,7 +233,6 @@ watch(
>
<input
v-model="checkedAll"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
@change="handleCheckAllChange"
/>
@ -300,7 +299,6 @@ watch(
<input
v-model="selectedPostNames"
:value="post.post.metadata.name"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
name="post-checkbox"
type="checkbox"
/>

1
console/console-src/modules/contents/posts/PostList.vue
View File

@ -331,7 +331,6 @@ watch(selectedPostNames, (newValue) => {
>
<input
v-model="checkedAll"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
@change="handleCheckAllChange"
/>

1
console/console-src/modules/contents/posts/components/PostListItem.vue
View File

@ -178,7 +178,6 @@ const { startFields, endFields } = useEntityFieldItemExtensionPoint<ListedPost>(
<input
v-model="selectedPostNames"
:value="post.post.metadata.name"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
name="post-checkbox"
type="checkbox"
/>

1
console/console-src/modules/system/plugins/PluginList.vue
View File

@ -167,7 +167,6 @@ onMounted(() => {
>
<input
v-model="checkedAll"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
@change="handleCheckAllChange"
/>

1
console/console-src/modules/system/plugins/components/PluginListItem.vue
View File

@ -240,7 +240,6 @@ const { startFields, endFields } = useEntityFieldItemExtensionPoint<Plugin>(
<input
v-model="selectedNames"
:value="plugin.metadata.name"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
name="post-checkbox"
type="checkbox"
/>

9
console/console-src/modules/system/roles/RoleDetail.vue
View File

@ -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"
/>
<input
v-else
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
checked
disabled
/>
<input v-else type="checkbox" checked disabled />
<div class="flex flex-1 flex-col gap-y-3">
<span class="font-medium text-gray-900">
{{

1
console/console-src/modules/system/roles/components/RoleEditingModal.vue
View File

@ -219,7 +219,6 @@ const handleResetForm = () => {
<input
v-model="selectedRoleTemplates"
:value="roleTemplate.metadata.name"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
@change="handleRoleTemplateSelect"
/>

2
console/console-src/modules/system/users/UserList.vue
View File

@ -299,7 +299,6 @@ onMounted(() => {
>
<input
v-model="checkedAll"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
@change="handleCheckAllChange"
/>
@ -412,7 +411,6 @@ onMounted(() => {
<input
v-model="selectedUserNames"
:value="user.user.metadata.name"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
name="post-checkbox"
type="checkbox"
:disabled="

1
console/package.json
View File

@ -113,6 +113,7 @@
"@rushstack/eslint-patch": "^1.3.2",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/container-queries": "^0.1.0",
"@tailwindcss/forms": "^0.5.7",
"@tsconfig/node18": "^2.0.1",
"@types/jsdom": "^20.0.1",
"@types/lodash.clonedeep": "4.5.7",

17
console/pnpm-lock.yaml
View File

@ -225,6 +225,9 @@ importers:
'@tailwindcss/container-queries':
specifier: ^0.1.0
version: 0.1.0(tailwindcss@3.3.0)
'@tailwindcss/forms':
specifier: ^0.5.7
version: 0.5.7(tailwindcss@3.3.0)
'@tsconfig/node18':
specifier: ^2.0.1
version: 2.0.1
@ -3422,6 +3425,15 @@ packages:
tailwindcss: 3.3.0(postcss@8.4.21)
dev: true
/@tailwindcss/forms@0.5.7(tailwindcss@3.3.0):
resolution: {integrity: sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==}
peerDependencies:
tailwindcss: '>=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:

2
console/src/components/global-search/GlobalSearchModal.vue
View File

@ -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"

9
console/src/formkit/theme.ts
View File

@ -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<string, Record<string, string>> = {
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<string, Record<string, string>> = {
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":

23
console/src/styles/tailwind.css
View File

@ -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;
}

1
console/tailwind.config.js
View File

@ -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: {

1
console/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue
View File

@ -179,7 +179,6 @@ const { copy } = useClipboard({
<input
v-model="selectedRoleTemplates"
:value="roleTemplate.metadata.name"
class="h-4 w-4 rounded border-gray-300 text-indigo-600"
type="checkbox"
@change="handleRoleTemplateSelect"
/>