This is an automated email from the ASF dual-hosted git repository. shuai pushed a commit to branch ui-optimization in repository https://gitbox.apache.org/repos/asf/answer.git
commit 5d1b9dcf383e27aad56afc459c5a403d7a8ac3db Author: shuai <[email protected]> AuthorDate: Tue Mar 25 17:11:44 2025 +0800 fix: run prettier to format codes --- ui/src/common/_variable.scss | 6 +- ui/src/common/color.scss | 73 +++++++++++----------- ui/src/components/AccordionNav/index.css | 2 +- ui/src/components/Header/index.scss | 23 ++++--- .../InitialLoadingPlaceholder/index.scss | 10 +-- ui/src/components/QueryGroup/index.scss | 1 - ui/src/components/SchemaForm/README.md | 36 ++++++++--- ui/src/components/TagSelector/index.scss | 1 - ui/src/index.scss | 19 +++--- .../Detail/components/InviteToAnswer/index.scss | 1 - ui/src/pages/Questions/Detail/index.scss | 5 +- .../components/Achievements/index.scss | 2 +- ui/src/pages/Users/Notifications/index.scss | 2 +- 13 files changed, 101 insertions(+), 80 deletions(-) diff --git a/ui/src/common/_variable.scss b/ui/src/common/_variable.scss index 1ef5a345..341705b6 100644 --- a/ui/src/common/_variable.scss +++ b/ui/src/common/_variable.scss @@ -19,7 +19,7 @@ $link-hover-decoration: none; $enable-negative-margins: true; -$blue: #0033FF !default; -$placeholder-opacity-max: .2; -$placeholder-opacity-min: .1; +$blue: #0033ff !default; +$placeholder-opacity-max: 0.2; +$placeholder-opacity-min: 0.1; $enable-smooth-scroll: false; diff --git a/ui/src/common/color.scss b/ui/src/common/color.scss index e82624fe..9970ab78 100644 --- a/ui/src/common/color.scss +++ b/ui/src/common/color.scss @@ -17,8 +17,6 @@ * under the License. */ - - :root { --an-side-nav-link: rgba(0, 0, 0, 0.65); --an-toolbar-divider: rgba(0, 0, 0, 0.1); @@ -29,46 +27,45 @@ --an-212529: #212529; --an-gray-300: var(--bs-gray-300); --an-white: #fff; - --an-inbox-warning:#fff3cd80; + --an-inbox-warning: #fff3cd80; --an-f5: #f5f5f5; - --an-answer-item-border-top: rgba(0, 0, 0, .125); + --an-answer-item-border-top: rgba(0, 0, 0, 0.125); --an-answer-inbox-nav-border-top: var(--bs-border-color); - --an-comment-item-border-bottom: var(--bs-colors-gray-200, #E9ECEF); + --an-comment-item-border-bottom: var(--bs-colors-gray-200, #e9ecef); --an-editor-toolbar-hover: #f8f9fa; --ans-editor-toolbar-focus: #dae0e5; --an-editor-placeholder-color: #6c757d; - --an-side-nav-link-hover-color: rgba(0, 0, 0, .85); + --an-side-nav-link-hover-color: rgba(0, 0, 0, 0.85); --an-invite-answer-item-active: #e9ecef; --an-alert-exist-color: #055160; } +[data-bs-theme='dark'] { + --an-side-nav-link: rgba(255, 255, 255, 0.65); + --an-toolbar-divider: rgba(255, 255, 255, 0.3); + --an-ced4da: var(--bs-border-color); + --an-e9ecef: #161b22; + --an-pre: #161b22; + --an-6c757d: var(--bs-body-color); + --an-212529: var(--bs-body-color); + --an-gray-300: #161b22; + --an-white: #000; + --an-inbox-warning: #38363180; + --an-f5: var(--bs-body-bg); + --an-answer-item-border-top: var(--bs-border-color); + --an-answer-inbox-nav-border-top: var(--bs-border-color); + --an-comment-item-border-bottom: var(--bs-border-color); + --an-editor-toolbar-hover: var(--bs-tertiary-bg); + --ans-editor-toolbar-focus: var(--bs-tertiary-bg); + --an-editor-placeholder-color: var(--bs-body-color); + --an-side-nav-link-hover-color: var(--bs-body-color); + --an-invite-answer-item-active: var(--bs-tertiary-bg); + --an-alert-exist-color: #60cee4; +} -[data-bs-theme="dark"] { - --an-side-nav-link: rgba(255, 255, 255, 0.65); - --an-toolbar-divider: rgba(255, 255, 255, 0.3); - --an-ced4da: var(--bs-border-color); - --an-e9ecef: #161b22; - --an-pre: #161b22; - --an-6c757d: var(--bs-body-color); - --an-212529: var(--bs-body-color); - --an-gray-300: #161b22; - --an-white: #000; - --an-inbox-warning:#38363180; - --an-f5: var(--bs-body-bg); - --an-answer-item-border-top: var(--bs-border-color); - --an-answer-inbox-nav-border-top: var(--bs-border-color); - --an-comment-item-border-bottom: var(--bs-border-color); - --an-editor-toolbar-hover: var(--bs-tertiary-bg); - --ans-editor-toolbar-focus: var(--bs-tertiary-bg); - --an-editor-placeholder-color: var(--bs-body-color); - --an-side-nav-link-hover-color: var(--bs-body-color); - --an-invite-answer-item-active: var(--bs-tertiary-bg); - --an-alert-exist-color: #60cee4; - } - -[data-bs-theme="dark"] { +[data-bs-theme='dark'] { .link-dark { - color: rgba(var(--bs-emphasis-color-rgb),0.8)!important; + color: rgba(var(--bs-emphasis-color-rgb), 0.8) !important; } /** CodeMirror **/ @@ -81,9 +78,9 @@ border-left-color: var(--bs-body-color); } .ͼ2.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground { - background-color: #3E4451; + background-color: #3e4451; } - /** link color **/ + /** link color **/ .ͼc { color: rgb(60, 138, 233); } @@ -91,8 +88,10 @@ color: var(--bs-body-color); } - .ͼ2 .cm-selectionBackground {background: #3E4451;} - /** CodeMirror end **/ + .ͼ2 .cm-selectionBackground { + background: #3e4451; + } + /** CodeMirror end **/ .bg-light { background-color: rgba(0, 0, 0, 0.5) !important; @@ -103,7 +102,8 @@ } /** side nav **/ #sideNav { - .nav-link:hover, .nav-link.active { + .nav-link:hover, + .nav-link.active { background-color: #2b3035 !important; } } @@ -136,5 +136,4 @@ .view-level3 { color: $orange-100; } - } diff --git a/ui/src/components/AccordionNav/index.css b/ui/src/components/AccordionNav/index.css index da5dad70..68e2ba56 100644 --- a/ui/src/components/AccordionNav/index.css +++ b/ui/src/components/AccordionNav/index.css @@ -18,7 +18,7 @@ */ .collapse-indicator { - transition: all .2s ease; + transition: all 0.2s ease; } .expanding .collapse-indicator { diff --git a/ui/src/components/Header/index.scss b/ui/src/components/Header/index.scss index f4fb9082..822c15bd 100644 --- a/ui/src/components/Header/index.scss +++ b/ui/src/components/Header/index.scss @@ -20,10 +20,12 @@ @import 'bootstrap/scss/functions'; @import 'bootstrap/scss/variables'; #header { - transform: translate3d(0,0,0); + transform: translate3d(0, 0, 0); --bs-navbar-padding-y: 0.75rem; background: var(--bs-primary); - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 0.125rem 0.25rem rgb(0 0 0 / 8%); + box-shadow: + inset 0 -1px 0 rgba(0, 0, 0, 0.15), + 0 0.125rem 0.25rem rgb(0 0 0 / 8%); .logo { max-height: 2rem; } @@ -45,7 +47,7 @@ } .lg-none { - display: none!important; + display: none !important; } .hr { @@ -58,8 +60,8 @@ padding-left: 42px; box-shadow: none; color: #fff; - background-color: rgba(255, 255, 255, .2); - border: $border-width $border-style rgba(255, 255, 255, .2); + background-color: rgba(255, 255, 255, 0.2); + border: $border-width $border-style rgba(255, 255, 255, 0.2); &:focus { border: $border-width $border-style $border-color; } @@ -82,7 +84,7 @@ padding-left: 42px; box-shadow: none; color: var(--bs-body-color); - background-color: rgba(255, 255, 255, .2); + background-color: rgba(255, 255, 255, 0.2); border: $border-width $border-style #dee2e6; &:focus { border: $border-width $border-style $border-color; @@ -97,7 +99,7 @@ } .maxw-400 { - max-width: 400px;; + max-width: 400px; } .search-wrap { @@ -109,21 +111,18 @@ } } - @media (max-width: 991.9px) { #header { .nav-grow { - flex-grow: 1!important; + flex-grow: 1 !important; } .lg-none { - display: flex!important; + display: flex !important; } .maxw-400 { max-width: 100%; } } - } - diff --git a/ui/src/components/InitialLoadingPlaceholder/index.scss b/ui/src/components/InitialLoadingPlaceholder/index.scss index a1cad1a5..3a1b74de 100644 --- a/ui/src/components/InitialLoadingPlaceholder/index.scss +++ b/ui/src/components/InitialLoadingPlaceholder/index.scss @@ -20,7 +20,9 @@ // Same as spin in `public/index.html` @keyframes _initial-loading-spin { - to { transform: rotate(360deg) } + to { + transform: rotate(360deg); + } } .InitialLoadingPlaceholder { @@ -44,10 +46,10 @@ display: inline-block; width: 2rem; height: 2rem; - vertical-align: -.125em; - border: .25rem solid currentColor; + vertical-align: -0.125em; + border: 0.25rem solid currentColor; border-right-color: transparent; - color: rgba(108, 117, 125, .75); + color: rgba(108, 117, 125, 0.75); border-radius: 50%; animation: 0.75s linear infinite _initial-loading-spin; } diff --git a/ui/src/components/QueryGroup/index.scss b/ui/src/components/QueryGroup/index.scss index 3a05069f..ae731659 100644 --- a/ui/src/components/QueryGroup/index.scss +++ b/ui/src/components/QueryGroup/index.scss @@ -24,7 +24,6 @@ display: none; } - @media screen and (max-width: 768px) { .md-show { display: none !important; diff --git a/ui/src/components/SchemaForm/README.md b/ui/src/components/SchemaForm/README.md index 13149ae4..59805fac 100644 --- a/ui/src/components/SchemaForm/README.md +++ b/ui/src/components/SchemaForm/README.md @@ -9,7 +9,13 @@ A React component capable of building HTML forms out of a [JSON schema](https:// ```tsx import React, { useState } from 'react'; -import { SchemaForm, initFormData, JSONSchema, UISchema, FormKit } from '@/components'; +import { + SchemaForm, + initFormData, + JSONSchema, + UISchema, + FormKit, +} from '@/components'; const schema: JSONSchema = { title: 'General', @@ -48,11 +54,11 @@ const uiSchema: UISchema = { const Form = () => { const [formData, setFormData] = useState(initFormData(schema)); - + const formRef = useRef<{ validator: () => Promise<boolean>; }>(null); - + const refreshConfig: FormKit['refreshConfig'] = async () => { // refreshFormConfig(); }; @@ -103,9 +109,9 @@ interface FormProps { ## Form Ref ```ts - export interface FormRef { - validator: () => Promise<boolean>; - } +export interface FormRef { + validator: () => Promise<boolean>; +} ``` When you need to validate a form and get the result outside the form, you can create a `FormRef` with `useRef` and pass it to the form using the `ref` property. @@ -115,6 +121,7 @@ This allows you to validate the form and get the result outside the form using ` --- ## Types Definition + ### JSONSchema ```ts @@ -137,6 +144,7 @@ export interface JSONSchema { ``` ### UISchema + ```ts export interface UISchema { [key: string]: { @@ -147,6 +155,7 @@ export interface UISchema { ``` ### UIWidget + ```ts export type UIWidget = | 'textarea' @@ -164,6 +173,7 @@ export type UIWidget = --- ### UIOptions + ```ts export type UIOptions = | InputOptions @@ -178,6 +188,7 @@ export type UIOptions = ``` #### BaseUIOptions + ```ts export interface BaseUIOptions { empty?: string; @@ -197,6 +208,7 @@ export interface BaseUIOptions { ``` #### InputOptions + ```ts export interface InputOptions extends BaseUIOptions { placeholder?: string; @@ -219,11 +231,13 @@ export interface InputOptions extends BaseUIOptions { ``` #### SelectOptions + ```ts export interface SelectOptions extends UIOptions {} ``` #### UploadOptions + ```ts export interface UploadOptions extends BaseUIOptions { acceptType?: string; @@ -232,6 +246,7 @@ export interface UploadOptions extends BaseUIOptions { ``` #### SwitchOptions + ```ts export interface SwitchOptions extends BaseUIOptions { label?: string; @@ -239,6 +254,7 @@ export interface SwitchOptions extends BaseUIOptions { ``` #### TimezoneOptions + ```ts export interface TimezoneOptions extends UIOptions { placeholder?: string; @@ -246,16 +262,19 @@ export interface TimezoneOptions extends UIOptions { ``` #### CheckboxOptions + ```ts export interface CheckboxOptions extends UIOptions {} ``` #### RadioOptions + ```ts export interface RadioOptions extends UIOptions {} ``` #### TextareaOptions + ```ts export interface TextareaOptions extends UIOptions { placeholder?: string; @@ -264,6 +283,7 @@ export interface TextareaOptions extends UIOptions { ``` #### ButtonOptions + ```ts export interface ButtonOptions extends BaseUIOptions { text: string; @@ -275,6 +295,7 @@ export interface ButtonOptions extends BaseUIOptions { ``` #### UIAction + ```ts export interface UIAction { url: string; @@ -291,6 +312,7 @@ export interface UIAction { ``` #### FormKit + ```ts export interface FormKit { refreshConfig(): void; @@ -300,6 +322,7 @@ export interface FormKit { --- ### FormData + ```ts export interface FormValue<T = any> { value: T; @@ -350,7 +373,6 @@ For backend generating modal form you can return json like this. } ``` - ## reference - [json schema](https://json-schema.org/understanding-json-schema/index.html) diff --git a/ui/src/components/TagSelector/index.scss b/ui/src/components/TagSelector/index.scss index 7cbeb5a8..52a1f1c2 100644 --- a/ui/src/components/TagSelector/index.scss +++ b/ui/src/components/TagSelector/index.scss @@ -70,7 +70,6 @@ overflow: hidden; max-width: calc(100% - 40px); } - } .tag-selector-wrap--focus { diff --git a/ui/src/index.scss b/ui/src/index.scss index a056e538..52abe408 100644 --- a/ui/src/index.scss +++ b/ui/src/index.scss @@ -48,7 +48,7 @@ a { } // If the image does not have a `src` attribute, it must break and may not trigger the `onerror` event. // With or without the `alt` attribute, it is visually hidden directly. -img[src=""] { +img[src=''] { visibility: hidden !important; } @@ -270,7 +270,10 @@ img[src=""] { word-break: initial; } } - ol ol,ol ul,ul ol,ul ul { + ol ol, + ol ul, + ul ol, + ul ul { margin-bottom: 1rem; } } @@ -329,8 +332,8 @@ img[src=""] { animation: bg-fade-out 2s ease 0.3s; } - -.btnSvg, .btnSvg:hover { +.btnSvg, +.btnSvg:hover { display: inline-block; font-size: 16px; width: 16px; @@ -348,17 +351,15 @@ img[src=""] { } .bronze { - color: #CD7F32; + color: #cd7f32; } .silver { - color: #C0C0C0; + color: #c0c0c0; } .gold { - color: #FFD700; + color: #ffd700; } - - .view-level1 { color: $orange-600; } diff --git a/ui/src/pages/Questions/Detail/components/InviteToAnswer/index.scss b/ui/src/pages/Questions/Detail/components/InviteToAnswer/index.scss index 0f3739e0..0e7c8a46 100644 --- a/ui/src/pages/Questions/Detail/components/InviteToAnswer/index.scss +++ b/ui/src/pages/Questions/Detail/components/InviteToAnswer/index.scss @@ -27,6 +27,5 @@ border-top: 0; border-bottom-left-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); - } } diff --git a/ui/src/pages/Questions/Detail/index.scss b/ui/src/pages/Questions/Detail/index.scss index bbc42bc5..0d2613c0 100644 --- a/ui/src/pages/Questions/Detail/index.scss +++ b/ui/src/pages/Questions/Detail/index.scss @@ -27,7 +27,8 @@ background-color: var(--bs-gray-100); } - &:active, &.active { + &:active, + &.active { background-color: var(--bs-gray-200); } } @@ -47,7 +48,7 @@ z-index: 80; display: block; cursor: default; - content: " "; + content: ' '; } @media screen and (max-width: 768px) { diff --git a/ui/src/pages/Users/Notifications/components/Achievements/index.scss b/ui/src/pages/Users/Notifications/components/Achievements/index.scss index 9a224921..aaf4ea68 100644 --- a/ui/src/pages/Users/Notifications/components/Achievements/index.scss +++ b/ui/src/pages/Users/Notifications/components/Achievements/index.scss @@ -23,4 +23,4 @@ width: 60px; flex: none; } -} \ No newline at end of file +} diff --git a/ui/src/pages/Users/Notifications/index.scss b/ui/src/pages/Users/Notifications/index.scss index f4c930dc..efa2f99e 100644 --- a/ui/src/pages/Users/Notifications/index.scss +++ b/ui/src/pages/Users/Notifications/index.scss @@ -19,5 +19,5 @@ .inbox-nav { border-top: 1px solid var(--an-answer-item-border-top); - padding: .5rem 0; + padding: 0.5rem 0; }
