Merge branch 'ui-optimization' into test

Author: shuashuai

ui/package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@codemirror/lang-markdown": "^6.2.4",
     "@codemirror/language-data": "^6.5.0",
-    "@codemirror/state": "^6.4.1",
+    "@codemirror/state": "^6.5.0",
     "@codemirror/view": "^6.26.1",
     "axios": "^1.7.7",
     "bootstrap": "^5.3.2",
@@ -80,9 +80,9 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^8.0.1",
+    "husky": "^9.1.7",
     "js-yaml": "^4.1.0",
-    "lint-staged": "^13.2.3",
+    "lint-staged": "^15.5.0",
     "postcss": "^8.0.0",
     "prettier": "^3.1.0",
     "purgecss-webpack-plugin": "^4.1.3",

ui/pnpm-lock.yaml

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

ui/src/common/_variable.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,18 +78,20 @@
     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);
   }
   .ͼ5 {
     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;
   }
-
 }

ui/src/common/color.scss

@@ -18,7 +18,7 @@
  */
 
 .collapse-indicator {
-  transition: all .2s ease;
+  transition: all 0.2s ease;
 }
 
 .expanding .collapse-indicator {

ui/src/components/AccordionNav/index.css

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

ui/src/components/Header/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;
   }

ui/src/components/InitialLoadingPlaceholder/index.scss

@@ -24,7 +24,6 @@
   display: none;
 }
 
-
 @media screen and (max-width: 768px) {
   .md-show {
     display: none !important;

ui/src/components/QueryGroup/index.scss

@@ -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,30 +246,35 @@ export interface UploadOptions extends BaseUIOptions {
 ```
 
 #### SwitchOptions
+
 ```ts
 export interface SwitchOptions extends BaseUIOptions {
   label?: string;
 }
 ```
 
 #### TimezoneOptions
+
 ```ts
 export interface TimezoneOptions extends UIOptions {
   placeholder?: string;
 }
 ```
 
 #### 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)

ui/src/components/SchemaForm/README.md

@@ -70,7 +70,6 @@
     overflow: hidden;
     max-width: calc(100% - 40px);
   }
-
 }
 
 .tag-selector-wrap--focus {

ui/src/components/TagSelector/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;
 }

ui/src/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);
-
   }
 }

ui/src/pages/Questions/Detail/components/InviteToAnswer/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) {

ui/src/pages/Questions/Detail/index.scss

@@ -23,4 +23,4 @@
     width: 60px;
     flex: none;
   }
-}
+}

ui/src/pages/Users/Notifications/components/Achievements/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;
 }