From 816c319f79e0be4b3d7e5fbb4775c540b9d3b540 Mon Sep 17 00:00:00 2001 From: mebtte Date: Sat, 7 Oct 2023 23:51:56 +0800 Subject: [PATCH 1/7] refactor multiple-select --- apps/pwa/src/components/cover/cover.tsx | 16 +- apps/pwa/src/components/file_select.tsx | 1 + .../components/multiple_select/constants.ts | 1 - .../multiple_select/global_style.ts | 92 ++++++++++ .../multiple_select/loading_message.tsx | 12 ++ .../multiple_select/multiple_select.tsx | 158 +++++++----------- .../components/multiple_select/options.tsx | 147 ---------------- .../components/multiple_select/use_options.ts | 64 ------- .../src/components/multiple_select/vacant.tsx | 5 + .../src/components/multiple_select/value.tsx | 59 ------- apps/pwa/src/components/select/select.tsx | 14 +- apps/pwa/src/constants/style.ts | 4 +- apps/pwa/src/global_style.ts | 2 + .../src/pages/login/first_step/language.tsx | 1 - .../player/components/missing_singer.tsx | 1 - .../pages/player/music_drawer/edit_menu.tsx | 2 - .../my_music/create_music_dialog/index.tsx | 1 - .../pwa/src/server/asset/get_resized_image.ts | 5 +- apps/pwa/src/utils/load_image.ts | 3 +- package-lock.json | 7 +- package.json | 2 +- 21 files changed, 203 insertions(+), 394 deletions(-) create mode 100644 apps/pwa/src/components/multiple_select/global_style.ts create mode 100644 apps/pwa/src/components/multiple_select/loading_message.tsx delete mode 100644 apps/pwa/src/components/multiple_select/options.tsx delete mode 100644 apps/pwa/src/components/multiple_select/use_options.ts create mode 100644 apps/pwa/src/components/multiple_select/vacant.tsx delete mode 100644 apps/pwa/src/components/multiple_select/value.tsx diff --git a/apps/pwa/src/components/cover/cover.tsx b/apps/pwa/src/components/cover/cover.tsx index df357bcf..2842c9b0 100644 --- a/apps/pwa/src/components/cover/cover.tsx +++ b/apps/pwa/src/components/cover/cover.tsx @@ -65,12 +65,16 @@ function Cover({ useLayoutEffect(() => { setCurrentSrc(DefaultCover); - const unobserve = intersectionObserver.observe(ref.current!, () => - loadImage(src) - .then(() => setCurrentSrc(src)) - .catch((error) => logger.error(error, `Failed to load cover "${src}"`)), - ); - return unobserve; + if (src) { + const unobserve = intersectionObserver.observe(ref.current!, () => + loadImage(src) + .then(() => setCurrentSrc(src)) + .catch((error) => + logger.error(error, `Failed to load cover "${src}"`), + ), + ); + return unobserve; + } }, [src]); const transitions = useTransition(currentSrc, { diff --git a/apps/pwa/src/components/file_select.tsx b/apps/pwa/src/components/file_select.tsx index b66b2cdd..60596104 100644 --- a/apps/pwa/src/components/file_select.tsx +++ b/apps/pwa/src/components/file_select.tsx @@ -7,6 +7,7 @@ import selectFile from '../utils/select_file'; const Style = styled.div<{ disabled: boolean }>` padding: 10px 20px; + border-radius: ${CSSVariable.BORDER_RADIUS_NORMAL}; border: 1px solid ${CSSVariable.COLOR_BORDER}; cursor: pointer; text-align: center; diff --git a/apps/pwa/src/components/multiple_select/constants.ts b/apps/pwa/src/components/multiple_select/constants.ts index edf4c379..5d93103b 100644 --- a/apps/pwa/src/components/multiple_select/constants.ts +++ b/apps/pwa/src/components/multiple_select/constants.ts @@ -1,5 +1,4 @@ export interface Option { - key: string | number; label: string; value: Value; } diff --git a/apps/pwa/src/components/multiple_select/global_style.ts b/apps/pwa/src/components/multiple_select/global_style.ts new file mode 100644 index 00000000..e113c5f6 --- /dev/null +++ b/apps/pwa/src/components/multiple_select/global_style.ts @@ -0,0 +1,92 @@ +import { UtilZIndex } from '@/constants/style'; +import { CSSVariable } from '@/global_style'; +import autoScrollbar from '@/style/auto_scrollbar'; +import { createGlobalStyle } from 'styled-components'; + +export default createGlobalStyle` + .react-select-multiple-container { + -webkit-app-region: no-drag; + } + + .react-select-multiple-menu { + -webkit-app-region: no-drag; + overflow: hidden; + font-size: 14px; + border-radius: ${CSSVariable.BORDER_RADIUS_NORMAL} !important; + } + + .react-select-multiple-menu-portal { + z-index: ${UtilZIndex.SELECT} !important; + } + + .react-select-multiple-indicator-separator { + background-color: ${CSSVariable.COLOR_BORDER} !important; + } + + .react-select-multiple-control { + font-size: 14px !important; + cursor: pointer !important; + min-height: initial !important; + box-shadow: none !important; + color: ${CSSVariable.TEXT_COLOR_PRIMARY}; + border-radius: ${CSSVariable.BORDER_RADIUS_NORMAL} !important; + border-color: ${CSSVariable.COLOR_BORDER} !important; + + &.focused { + border-color: ${CSSVariable.COLOR_PRIMARY} !important; + } + + &.disabled { + border-color: ${CSSVariable.TEXT_COLOR_DISABLED} !important; + } + } + + .react-select-multiple-option { + cursor: pointer !important; + color: ${CSSVariable.TEXT_COLOR_PRIMARY} !important; + background-color: transparent !important; + + &:hover { + background-color: ${CSSVariable.BACKGROUND_COLOR_LEVEL_ONE} !important; + } + } + + .react-select-multiple-dropdown-indicator { + padding: 0 5px !important; + color: ${CSSVariable.TEXT_COLOR_SECONDARY} !important; + + &:hover { + color: ${CSSVariable.TEXT_COLOR_PRIMARY} !important; + } + } + + .react-select-multiple-menu-list { + max-height: 200px !important; + ${autoScrollbar} + } + + .react-select-multiple-multi-value { + font-size: 12px; + background-color: ${CSSVariable.BACKGROUND_COLOR_LEVEL_ONE} !important; + color: ${CSSVariable.TEXT_COLOR_PRIMARY}; + border-radius: ${CSSVariable.BORDER_RADIUS_LIGHT} !important; + + &.disabled { + opacity: 0.5; + } + } + + .react-select-multiple-multi-value-remove { + background-color: transparent; + color: ${CSSVariable.TEXT_COLOR_SECONDARY}; + + &:hover { + background-color: ${CSSVariable.BACKGROUND_COLOR_LEVEL_ONE} !important; + color: ${CSSVariable.COLOR_DANGEROUS} !important; + } + } + + .react-select-multiple-placeholder { + color: ${CSSVariable.TEXT_COLOR_SECONDARY} !important; + } +`; diff --git a/apps/pwa/src/components/multiple_select/loading_message.tsx b/apps/pwa/src/components/multiple_select/loading_message.tsx new file mode 100644 index 00000000..a063be1d --- /dev/null +++ b/apps/pwa/src/components/multiple_select/loading_message.tsx @@ -0,0 +1,12 @@ +import { CSSProperties } from 'react'; +import Spinner from '../spinner'; + +const style: CSSProperties = { + margin: '10px', +}; + +function LoadingIndicator() { + return ; +} + +export default LoadingIndicator; diff --git a/apps/pwa/src/components/multiple_select/multiple_select.tsx b/apps/pwa/src/components/multiple_select/multiple_select.tsx index 06139a21..69ce4a54 100644 --- a/apps/pwa/src/components/multiple_select/multiple_select.tsx +++ b/apps/pwa/src/components/multiple_select/multiple_select.tsx @@ -1,120 +1,82 @@ -import { FocusEventHandler, useState } from 'react'; -import styled, { css } from 'styled-components'; import { t } from '@/i18n'; -import { CSSVariable } from '../../global_style'; +import { ComponentProps, useMemo } from 'react'; +import Select from 'react-select/async'; +import capitalize from '#/utils/capitalize'; +import { throttle } from 'lodash'; +import classnames from 'classnames'; +import { ThemeProvider } from 'styled-components'; +import theme from '@/global_states/theme'; import { Option as OptionType } from './constants'; -import ValueItem from './value'; -import Options from './options'; -import useEvent from '../../utils/use_event'; +import GlobalStyle from './global_style'; +import LoadingMessage from './loading_message'; +import Vacant from './vacant'; -const Input = styled.div<{ active: boolean; disabled: boolean }>` - padding: 5px 10px; - - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 5px; - - cursor: pointer; - border: 1px solid; - transition: inherit; - - > .input { - flex: 1; - min-width: 30px; - - border: none; - outline: none; - font-size: 14px; - - &:disabled { - background-color: transparent; - } - } - - ${({ active, disabled }) => css` - border-color: ${disabled - ? CSSVariable.TEXT_COLOR_DISABLED - : active - ? CSSVariable.COLOR_PRIMARY - : CSSVariable.COLOR_BORDER}; - background: ${disabled ? CSSVariable.BACKGROUND_DISABLED : 'transparent'}; - cursor: ${disabled ? 'not-allowed' : 'pointer'}; - - > .input { - color: ${active ? CSSVariable.TEXT_COLOR_PRIMARY : 'transparent'}; - } - `} -`; +const classNames: ComponentProps - {value.map((option) => ( - onRemove(option)} - /> - ))} - setKeyword(event.target.value)} - onFocus={onFocus} - onBlur={onBlur} - disabled={disabled} - /> - - {active ? ( - - ) : null} - + + + ['classNames'] = { container: () => 'react-select-single-container', @@ -14,7 +14,7 @@ const classNames: ComponentProps['classNames'] = { - container: () => 'react-select-multiple-container', - menu: () => 'react-select-multiple-menu', - control: ({ isFocused, isDisabled }) => - classnames('react-select-multiple-control', { - focused: isFocused, - disabled: isDisabled, - }), - option: () => 'react-select-multiple-option', - dropdownIndicator: () => 'react-select-multiple-dropdown-indicator', - menuList: () => 'react-select-multiple-menu-list', - menuPortal: () => 'react-select-multiple-menu-portal', - multiValue: ({ isDisabled }) => - classnames('react-select-multiple-multi-value', { - disabled: isDisabled, - }), - multiValueRemove: () => 'react-select-multiple-multi-value-remove', - indicatorSeparator: () => 'react-select-multiple-indicator-separator', - placeholder: () => 'react-select-multiple-placeholder', -}; -const noOptionsMessage = () => capitalize(t('no_data')); - -function MultipleSelect({ - value, - onChange, - optionsGetter, - disabled = false, - placeholder = t('select'), -}: { - value: OptionType[]; - onChange: (options: OptionType[]) => void; - optionsGetter: ( - search: string, - ) => OptionType[] | Promise[]>; - disabled?: boolean; - placeholder?: string; -}) { - const loadOptions = useMemo( - () => - throttle((inputValue: string) => - Promise.resolve(optionsGetter(inputValue)), - ), - [optionsGetter], - ); - return ( - - - ['classNames'] = { + container: () => ClassName.CONTAINER, + menu: () => ClassName.MENU, + control: ({ isFocused, isDisabled }) => + classnames(ClassName.CONTROL, { + [StateClassName.FOCUSED]: isFocused, + [StateClassName.DISABLED]: isDisabled, + }), + option: () => ClassName.OPTION, + menuList: () => ClassName.MENU_LIST, + menuPortal: () => ClassName.MENU_PORTAL, + multiValue: ({ isDisabled }) => + classnames(MultiClassName.MULTI_VALUE, { + [StateClassName.DISABLED]: isDisabled, + }), + multiValueRemove: () => MultiClassName.MULTI_VALUE_REMOVE, + indicatorSeparator: () => ClassName.INDICATOR_SEPARATOR, + placeholder: () => ClassName.PLACEHOLDER, + valueContainer: () => ClassName.VALUE_CONTAINER, + input: () => ClassName.INPUT, +}; + +function MultipleSelect({ + value, + onChange, + optionsGetter, + disabled = false, + placeholder = DEFAULT_PLACEHOLDER, + style, +}: { + value: OptionType[]; + onChange: (options: OptionType[]) => void; + optionsGetter: (search: string) => Promise[]>; + disabled?: boolean; + placeholder?: string; + style?: CSSProperties; +}) { + const loadOptions = useMemo( + () => + throttle((inputValue: string, callback) => { + optionsGetter(inputValue).then((options) => callback(options)); + }, 1000), + [optionsGetter], + ); + return ( + ['classNames'] = { - container: () => 'react-select-single-container', - menu: () => 'react-select-single-menu', - control: () => 'react-select-single-control', - option: () => 'react-select-single-option', - indicatorsContainer: () => 'react-select-single-indicator-container', + container: () => ClassName.CONTAINER, + menu: () => ClassName.MENU, + control: ({ isFocused }) => + classnames(ClassName.CONTROL, { + [StateClassName.FOCUSED]: isFocused, + }), + option: ({ isSelected }) => + classnames(ClassName.OPTION, { + [StateClassName.SELECTED]: isSelected, + }), + menuPortal: () => ClassName.MENU_PORTAL, + indicatorSeparator: () => ClassName.INDICATOR_SEPARATOR, + menuList: () => ClassName.MENU_LIST, + singleValue: () => SingleClassName.SINGLE_VALUE, + placeholder: () => ClassName.PLACEHOLDER, + valueContainer: () => ClassName.VALUE_CONTAINER, }; -const noOptionsMessage = () => capitalize(t('no_data')); function Wrapper({ value, @@ -22,7 +36,7 @@ function Wrapper({ onChange, disabled = false, style, - placeholder = capitalize(t('select')), + placeholder = DEFAULT_PLACEHOLDER, }: { value?: Option; options: Option[]; @@ -42,43 +56,14 @@ function Wrapper({ onChange={onChange} menuPortalTarget={document.body} classNames={classNames} + components={{ + DropdownIndicator, + }} styles={{ container: (baseStyles) => ({ ...baseStyles, ...style, }), - control: (baseStyles, { menuIsOpen, isFocused, isDisabled }) => ({ - ...baseStyles, - color: CSSVariable.TEXT_COLOR_PRIMARY, - borderColor: isDisabled - ? `${CSSVariable.TEXT_COLOR_DISABLED} !important` - : menuIsOpen || isFocused - ? `${CSSVariable.COLOR_PRIMARY} !important` - : `${CSSVariable.COLOR_BORDER} !important`, - borderRadius: CSSVariable.BORDER_RADIUS_NORMAL, - }), - menu: (baseStyles) => ({ - ...baseStyles, - fontSize: 14, - borderRadius: CSSVariable.BORDER_RADIUS_NORMAL, - }), - option: (baseStyles, { isSelected, isFocused }) => ({ - ...baseStyles, - color: isSelected ? '#fff' : CSSVariable.TEXT_COLOR_PRIMARY, - background: isSelected - ? CSSVariable.COLOR_PRIMARY - : isFocused - ? CSSVariable.BACKGROUND_COLOR_LEVEL_ONE - : '#fff', - }), - valueContainer: (baseStyles) => ({ - ...baseStyles, - height: ComponentSize.NORMAL, - }), - menuPortal: (baseStyles) => ({ - ...baseStyles, - zIndex: UtilZIndex.SELECT, - }), }} /> ); diff --git a/apps/pwa/src/components/select/style.scss b/apps/pwa/src/components/select/style.scss deleted file mode 100644 index c224b6ad..00000000 --- a/apps/pwa/src/components/select/style.scss +++ /dev/null @@ -1,28 +0,0 @@ -.react-select-single-container { - -webkit-app-region: no-drag; -} - -.react-select-single-menu { - -webkit-app-region: no-drag; -} - -.react-select-single-control { - font-size: 14px; - cursor: pointer !important; - min-height: initial !important; - box-shadow: none !important; -} - -.react-select-single-option { - cursor: pointer !important; - - &:active { - background: initial !important; - } -} - -.react-select-single-indicator-container { - > div { - padding: 0 5px; - } -} diff --git a/apps/pwa/src/components/select/utils.ts b/apps/pwa/src/components/select/utils.ts new file mode 100644 index 00000000..1cfa6fe6 --- /dev/null +++ b/apps/pwa/src/components/select/utils.ts @@ -0,0 +1,4 @@ +import capitalize from '#/utils/capitalize'; +import { t } from '@/i18n'; + +export const noOptionsMessage = () => capitalize(t('no_data')); diff --git a/apps/pwa/src/components/multiple_select/vacant.tsx b/apps/pwa/src/components/select/vacant.tsx similarity index 100% rename from apps/pwa/src/components/multiple_select/vacant.tsx rename to apps/pwa/src/components/select/vacant.tsx diff --git a/apps/pwa/src/pages/login/first_step/language.tsx b/apps/pwa/src/pages/login/first_step/language.tsx index f1ed43ce..f46a91c9 100644 --- a/apps/pwa/src/pages/login/first_step/language.tsx +++ b/apps/pwa/src/pages/login/first_step/language.tsx @@ -1,13 +1,13 @@ import { LANGUAGES, Language } from '#/constants'; import Label from '@/components/label'; -import Select, { Option } from '@/components/select'; +import { Select, Option } from '@/components/select'; import setting from '@/global_states/setting'; import { LANGUAGE_MAP, t } from '@/i18n'; const languageOptions: Option[] = LANGUAGES.map((l) => ({ - key: l, label: LANGUAGE_MAP[l].label, value: l, + actualValue: l, })); function Wrapper({ disabled }: { disabled: boolean }) { @@ -18,11 +18,12 @@ function Wrapper({ disabled }: { disabled: boolean }) { value={{ label: LANGUAGE_MAP[language].label, value: language, + actualValue: language, }} onChange={(option) => { setting.set((s) => ({ ...s, - language: option.value, + language: option.actualValue, })); return window.setTimeout(() => window.location.reload(), 0); }} diff --git a/apps/pwa/src/pages/login/first_step/server_list.tsx b/apps/pwa/src/pages/login/first_step/server_list.tsx index 4e079f1a..c7840b0c 100644 --- a/apps/pwa/src/pages/login/first_step/server_list.tsx +++ b/apps/pwa/src/pages/login/first_step/server_list.tsx @@ -4,7 +4,7 @@ import { t } from '@/i18n'; import { useMemo } from 'react'; import styled from 'styled-components'; import Label from '@/components/label'; -import Select from '@/components/select'; +import { Select } from '@/components/select'; const Style = styled.div` > .divider { @@ -45,11 +45,12 @@ function ServerList({ options={serverList.map((s) => ({ label: `${s.hostname} - ${s.origin}`, value: s.origin, + actualValue: s.origin, }))} onChange={(option) => { server.set((ss) => ({ ...ss, - selectedServerOrigin: option.value, + selectedServerOrigin: option.actualValue, })); return toNext(); }} diff --git a/apps/pwa/src/pages/login/second_step/user_list.tsx b/apps/pwa/src/pages/login/second_step/user_list.tsx index bc5c96b6..43a109ec 100644 --- a/apps/pwa/src/pages/login/second_step/user_list.tsx +++ b/apps/pwa/src/pages/login/second_step/user_list.tsx @@ -1,5 +1,5 @@ import Label from '@/components/label'; -import Select from '@/components/select'; +import { Select } from '@/components/select'; import server, { getSelectedServer } from '@/global_states/server'; import { CSSVariable } from '@/global_style'; import { t } from '@/i18n'; @@ -43,6 +43,7 @@ function UserList({ options={userList.map((u) => ({ label: `${u.nickname}(@${u.username})`, value: u.id, + actualValue: u.id, }))} onChange={(option) => { server.set((ss) => ({ @@ -51,7 +52,7 @@ function UserList({ s.origin === getSelectedServer(server.get())!.origin ? { ...s, - selectedUserId: option.value, + selectedUserId: option.actualValue, } : s, ), diff --git a/apps/pwa/src/pages/player/music_drawer/edit_menu.tsx b/apps/pwa/src/pages/player/music_drawer/edit_menu.tsx index 631d3246..87f78ace 100644 --- a/apps/pwa/src/pages/player/music_drawer/edit_menu.tsx +++ b/apps/pwa/src/pages/player/music_drawer/edit_menu.tsx @@ -39,7 +39,7 @@ import stringArrayEqual from '#/utils/string_array_equal'; import dialog from '@/utils/dialog'; import deleteMusic from '@/server/api/delete_music'; import logger from '@/utils/logger'; -import { Option } from '@/components/multiple_select'; +import { Option } from '@/components/select'; import searchSingerRequest from '@/server/api/search_singer'; import searchMusicRequest from '@/server/api/search_music'; import { SEARCH_KEYWORD_MAX_LENGTH as SINGER_SEARCH_KEYWORD_MAX_LENGTH } from '#/constants/singer'; @@ -69,7 +69,8 @@ const formatSingerToMultipleSelectOption = ( label: `${singer.name}${ singer.aliases.length ? `(${singer.aliases[0]})` : '' }`, - value: singer, + value: singer.id, + actualValue: singer, }); const searchSinger = (search: string): Promise[]> => { const keyword = search.trim().substring(0, SINGER_SEARCH_KEYWORD_MAX_LENGTH); @@ -81,7 +82,8 @@ const emitMusicUpdated = (id: string) => playerEventemitter.emit(PlayerEventType.MUSIC_UPDATED, { id }); const formatMusicTouMultipleSelectOtion = (music: Music): Option => ({ label: `${music.name} - ${music.singers.map((s) => s.name).join(',')}`, - value: music, + value: music.id, + actualValue: music, }); const itemStyle: CSSProperties = { margin: '0 10px' }; @@ -338,6 +340,7 @@ function EditMenu({ music }: { music: MusicDetail }) { initialValue: music.singers.map( formatSingerToMultipleSelectOption, ), + confirmVariant: Variant.PRIMARY, onConfirm: async (options) => { if (!options.length) { notice.error(t('emtpy_singers_warning')); @@ -347,14 +350,14 @@ function EditMenu({ music }: { music: MusicDetail }) { if ( !stringArrayEqual( music.singers.map((s) => s.id).sort(), - options.map((o) => o.value.id).sort(), + options.map((o) => o.actualValue.id).sort(), ) ) { try { await updateMusic({ id: music.id, key: AllowUpdateKey.SINGER, - value: options.map((o) => o.value.id), + value: options.map((o) => o.actualValue.id), }); emitMusicUpdated(music.id); } catch (error) { @@ -418,14 +421,14 @@ function EditMenu({ music }: { music: MusicDetail }) { if ( !stringArrayEqual( music.forkFromList.map((m) => m.id).sort(), - options.map((o) => o.value.id).sort(), + options.map((o) => o.actualValue.id).sort(), ) ) { try { await updateMusic({ id: music.id, key: AllowUpdateKey.FORK_FROM, - value: options.map((o) => o.value.id), + value: options.map((o) => o.actualValue.id), }); emitMusicUpdated(music.id); } catch (error) { diff --git a/apps/pwa/src/pages/player/pages/my_music/create_music_dialog/index.tsx b/apps/pwa/src/pages/player/pages/my_music/create_music_dialog/index.tsx index 387d7e2e..88a8b0ac 100644 --- a/apps/pwa/src/pages/player/pages/my_music/create_music_dialog/index.tsx +++ b/apps/pwa/src/pages/player/pages/my_music/create_music_dialog/index.tsx @@ -10,7 +10,7 @@ import Dialog, { Container, Title, Content, Action } from '@/components/dialog'; import Button, { Variant } from '@/components/button'; import Input from '@/components/input'; import Label from '@/components/label'; -import Select, { Option as SelectOption } from '@/components/select'; +import { Select, MultipleSelect, Option } from '@/components/select'; import { t } from '@/i18n'; import { AllowUpdateKey, @@ -19,9 +19,6 @@ import { NAME_MAX_LENGTH, } from '#/constants/music'; import FileSelect from '@/components/file_select'; -import MultipleSelect, { - Option as MultipleSelectOption, -} from '@/components/multiple_select'; import searchSingerRequest from '@/server/api/search_singer'; import { AssetType, ASSET_TYPE_MAP } from '#/constants'; import useEvent from '@/utils/use_event'; @@ -48,22 +45,22 @@ import { Singer } from './constants'; const maskProps: { style: CSSProperties } = { style: { zIndex: ZIndex.DIALOG }, }; -const MUSIC_TYPE_OPTIONS: SelectOption[] = MUSIC_TYPES.map((mt) => ({ +const MUSIC_TYPE_OPTIONS: Option[] = MUSIC_TYPES.map((mt) => ({ label: capitalize(MUSIC_TYPE_MAP[mt].label), value: mt, + actualValue: mt, })); const formatSingerToMultipleSelectOption = ( singer: Singer, -): MultipleSelectOption => ({ +): Option => ({ label: `${singer.name}${ singer.aliases.length ? `(${singer.aliases[0]})` : '' }`, - value: singer, + value: singer.id, + actualValue: singer, }); -const searchSinger = ( - search: string, -): Promise[]> => { +const searchSinger = (search: string): Promise[]> => { const keyword = search.trim().substring(0, SEARCH_KEYWORD_MAX_LENGTH); return searchSingerRequest({ keyword, page: 1, pageSize: 100 }).then((data) => data.singerList.map(formatSingerToMultipleSelectOption), @@ -84,14 +81,13 @@ function CreateMusicDialog() { const [singerList, setSingerList] = useState([]); const onSingerListChange = useCallback( - (sl: MultipleSelectOption[]) => - setSingerList(sl.map((s) => s.value)), + (sl: Option[]) => setSingerList(sl.map((s) => s.actualValue)), [], ); const [musicType, setMusicType] = useState(MusicType.SONG); - const onMusicTypeChange = (option: SelectOption) => - setMusicType(option.value); + const onMusicTypeChange = (option: Option) => + setMusicType(option.actualValue); const [asset, setAsset] = useState(null); const onAssetChange = (a) => { @@ -209,6 +205,7 @@ function CreateMusicDialog() { value={{ label: capitalize(MUSIC_TYPE_MAP[musicType].label), value: musicType, + actualValue: musicType, }} onChange={onMusicTypeChange} options={MUSIC_TYPE_OPTIONS} diff --git a/apps/pwa/src/pages/player/pages/setting/language.tsx b/apps/pwa/src/pages/player/pages/setting/language.tsx index 194f5e37..3acb6cb2 100644 --- a/apps/pwa/src/pages/player/pages/setting/language.tsx +++ b/apps/pwa/src/pages/player/pages/setting/language.tsx @@ -1,6 +1,6 @@ import { memo, CSSProperties } from 'react'; import setting from '@/global_states/setting'; -import Select, { Option } from '@/components/select'; +import { Select, Option } from '@/components/select'; import { LANGUAGE_MAP, t } from '@/i18n'; import { Language } from '#/constants'; import dialog from '@/utils/dialog'; @@ -14,6 +14,7 @@ const style: CSSProperties = { const options: Option[] = LANGUAGES.map((l) => ({ label: LANGUAGE_MAP[l].label, value: l, + actualValue: l, })); function Wrapper() { @@ -21,7 +22,11 @@ function Wrapper() { return ( - value={{ value: language, label: LANGUAGE_MAP[language].label }} + value={{ + label: LANGUAGE_MAP[language].label, + value: language, + actualValue: language, + }} onChange={(option) => { if (option.value !== language) { dialog.confirm({ @@ -29,7 +34,7 @@ function Wrapper() { onConfirm: () => { setting.set((prev) => ({ ...prev, - language: option.value, + language: option.actualValue, })); window.setTimeout(() => window.location.reload(), 0); }, diff --git a/apps/pwa/src/utils/dialog/constants.ts b/apps/pwa/src/utils/dialog/constants.ts index 0c5e263b..86c34740 100644 --- a/apps/pwa/src/utils/dialog/constants.ts +++ b/apps/pwa/src/utils/dialog/constants.ts @@ -1,5 +1,5 @@ import { Variant } from '@/components/button'; -import { Option } from '@/components/multiple_select'; +import { Option } from '@/components/select'; import { ReactNode } from 'react'; export const ID_LENGTH = 6; @@ -90,9 +90,7 @@ export interface MultipleSelect initialValue: Option[]; label: string; labelAddon?: ReactNode; - optionsGetter: ( - keyword: string, - ) => Option[] | Promise[]>; + optionsGetter: (keyword: string) => Promise[]>; } export interface FileSelect diff --git a/apps/pwa/src/utils/dialog/multiple_select.tsx b/apps/pwa/src/utils/dialog/multiple_select.tsx index 02978c54..8bac46d5 100644 --- a/apps/pwa/src/utils/dialog/multiple_select.tsx +++ b/apps/pwa/src/utils/dialog/multiple_select.tsx @@ -2,8 +2,8 @@ import { Container, Title, Content, Action } from '@/components/dialog'; import Button from '@/components/button'; import Label from '@/components/label'; import { CSSProperties, useState } from 'react'; -import MultipleSelect, { Option } from '@/components/multiple_select'; import { t } from '@/i18n'; +import { MultipleSelect, Option } from '@/components/select'; import DialogBase from './dialog_base'; import { MultipleSelect as MultipleSelectShape } from './constants'; import useEvent from '../use_event'; From da339b328e34c6c66fbe6cd7398b969f1d52ee6e Mon Sep 17 00:00:00 2001 From: mebtte Date: Sun, 8 Oct 2023 22:58:17 +0800 Subject: [PATCH 3/7] improve global style --- apps/pwa/src/components/button.tsx | 2 +- apps/pwa/src/components/dialog.tsx | 2 +- apps/pwa/src/components/empty.tsx | 2 +- apps/pwa/src/components/error_card.tsx | 2 +- apps/pwa/src/components/file_select.tsx | 2 +- apps/pwa/src/components/input.tsx | 2 +- apps/pwa/src/components/label.tsx | 2 +- apps/pwa/src/components/menu_item.tsx | 2 +- apps/pwa/src/components/pagination/index.tsx | 2 +- apps/pwa/src/components/select/global_style.ts | 6 +++--- apps/pwa/src/components/tab_list.tsx | 2 +- apps/pwa/src/components/textarea.tsx | 2 +- apps/pwa/src/global_style.ts | 6 +++--- apps/pwa/src/i18n/en_us.ts | 2 ++ apps/pwa/src/i18n/zh_hans.ts | 2 ++ apps/pwa/src/pages/login/first_step/server_list.tsx | 2 +- apps/pwa/src/pages/login/second_step/user_list.tsx | 2 +- apps/pwa/src/pages/player/2fa_dialog/qrcode.tsx | 2 +- .../pwa/src/pages/player/components/missing_singer.tsx | 2 +- apps/pwa/src/pages/player/components/music_base.tsx | 8 ++++---- apps/pwa/src/pages/player/components/music_info.tsx | 4 ++-- .../src/pages/player/components/public_musicbill.tsx | 4 ++-- apps/pwa/src/pages/player/controller/info.tsx | 6 +++--- apps/pwa/src/pages/player/controller/time.tsx | 2 +- .../src/pages/player/lyric_panel/controller/info.tsx | 2 +- .../player/lyric_panel/controller/progress_bar.tsx | 2 +- apps/pwa/src/pages/player/lyric_panel/lyric/index.tsx | 2 +- apps/pwa/src/pages/player/lyric_panel/lyric/lyric.tsx | 2 +- apps/pwa/src/pages/player/music_drawer/create_user.tsx | 2 +- apps/pwa/src/pages/player/music_drawer/info.tsx | 2 +- apps/pwa/src/pages/player/music_drawer/lyric.tsx | 2 +- .../pages/player/music_drawer/singer_list/singer.tsx | 2 +- .../src/pages/player/music_drawer/sub_music_list.tsx | 2 +- apps/pwa/src/pages/player/music_drawer/tag.tsx | 4 ++-- .../pages/player/musicbill_music_drawer/musicbill.tsx | 2 +- .../musicbill_shared_user_drawer.tsx | 2 +- .../pages/player/musicbill_shared_user_drawer/user.tsx | 2 +- .../pages/player/musicbilll_order_drawer/musicbill.tsx | 2 +- apps/pwa/src/pages/player/network_status.tsx | 2 +- .../src/pages/player/pages/exploration/music_info.tsx | 4 ++-- .../player/pages/exploration/public_musicbill_info.tsx | 4 ++-- .../src/pages/player/pages/exploration/singer_info.tsx | 2 +- .../music_play_record_list/music_play_record.tsx | 2 +- apps/pwa/src/pages/player/pages/musicbill/info.tsx | 4 ++-- .../pwa/src/pages/player/pages/musicbill/mini_info.tsx | 2 +- .../pages/player/pages/my_music/music_list/music.tsx | 2 +- .../player/pages/search/lyric/music_with_lyric.tsx | 2 +- .../src/pages/player/pages/search/singer/singer.tsx | 4 ++-- apps/pwa/src/pages/player/pages/search/text_guide.tsx | 2 +- apps/pwa/src/pages/player/pages/setting/extra_info.tsx | 2 +- apps/pwa/src/pages/player/pages/setting/item.tsx | 2 +- .../player/pages/shared_musicbill_invitation/index.tsx | 2 +- .../pages/shared_musicbill_invitation/invitation.tsx | 4 ++-- .../pages/player/pages/user_manage/user_list/user.tsx | 6 +++--- apps/pwa/src/pages/player/profile_edit_popup.tsx | 4 ++-- .../src/pages/player/public_musicbill_drawer/info.tsx | 2 +- .../pages/player/sidebar/musicbill_list/musicbill.tsx | 2 +- .../src/pages/player/sidebar/musicbill_list/top.tsx | 2 +- apps/pwa/src/pages/player/sidebar/profile.tsx | 2 +- .../pwa/src/pages/player/singer_drawer/create_user.tsx | 2 +- apps/pwa/src/pages/player/singer_drawer/info.tsx | 2 +- .../pages/player/singer_modify_record_drawer/hint.tsx | 10 ++++++---- .../player/singer_modify_record_drawer/record_list.tsx | 4 ++-- apps/pwa/src/pages/player/user_drawer/info.tsx | 4 ++-- .../src/pages/player/user_drawer/musicbill_list.tsx | 4 ++-- apps/pwa/src/utils/notice/notice_item.tsx | 2 +- 66 files changed, 96 insertions(+), 90 deletions(-) diff --git a/apps/pwa/src/components/button.tsx b/apps/pwa/src/components/button.tsx index f23258c0..565af94e 100644 --- a/apps/pwa/src/components/button.tsx +++ b/apps/pwa/src/components/button.tsx @@ -87,7 +87,7 @@ const Style = styled.button<{ padding: 0 15px; border-radius: ${CSSVariable.BORDER_RADIUS_NORMAL}; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; cursor: pointer; transition: all 300ms; user-select: none; diff --git a/apps/pwa/src/components/dialog.tsx b/apps/pwa/src/components/dialog.tsx index a395e1d5..04443d86 100644 --- a/apps/pwa/src/components/dialog.tsx +++ b/apps/pwa/src/components/dialog.tsx @@ -131,7 +131,7 @@ export const Content = styled.div` flex: 1; min-height: 0; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; line-height: 1.5; overflow: auto; diff --git a/apps/pwa/src/components/empty.tsx b/apps/pwa/src/components/empty.tsx index 231800fa..c1e12513 100644 --- a/apps/pwa/src/components/empty.tsx +++ b/apps/pwa/src/components/empty.tsx @@ -17,7 +17,7 @@ const Style = styled.div` } > .description { - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; ${capitalize} diff --git a/apps/pwa/src/components/error_card.tsx b/apps/pwa/src/components/error_card.tsx index 44c48dbf..c09b478d 100644 --- a/apps/pwa/src/components/error_card.tsx +++ b/apps/pwa/src/components/error_card.tsx @@ -24,7 +24,7 @@ const Style = styled.div` max-width: 400px; white-space: pre-wrap; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; line-height: 1.5; text-align: center; diff --git a/apps/pwa/src/components/file_select.tsx b/apps/pwa/src/components/file_select.tsx index 60596104..c5dfca2f 100644 --- a/apps/pwa/src/components/file_select.tsx +++ b/apps/pwa/src/components/file_select.tsx @@ -11,7 +11,7 @@ const Style = styled.div<{ disabled: boolean }>` border: 1px solid ${CSSVariable.COLOR_BORDER}; cursor: pointer; text-align: center; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; transition: inherit; user-select: none; word-break: break-all; diff --git a/apps/pwa/src/components/input.tsx b/apps/pwa/src/components/input.tsx index 1d592d7c..54e0584e 100644 --- a/apps/pwa/src/components/input.tsx +++ b/apps/pwa/src/components/input.tsx @@ -18,7 +18,7 @@ const Input = styled.input` border-radius: ${CSSVariable.BORDER_RADIUS_NORMAL}; border: 1px solid ${CSSVariable.COLOR_BORDER}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; outline: none; transition: inherit; -webkit-tap-highlight-color: transparent; diff --git a/apps/pwa/src/components/label.tsx b/apps/pwa/src/components/label.tsx index 8a86f806..023bc6db 100644 --- a/apps/pwa/src/components/label.tsx +++ b/apps/pwa/src/components/label.tsx @@ -22,7 +22,7 @@ const Style = styled.label` min-width: 0; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; transition: inherit; ${upperCaseFirstLetter} } diff --git a/apps/pwa/src/components/menu_item.tsx b/apps/pwa/src/components/menu_item.tsx index bbf5e66e..9ca11b91 100644 --- a/apps/pwa/src/components/menu_item.tsx +++ b/apps/pwa/src/components/menu_item.tsx @@ -17,7 +17,7 @@ const Style = styled.div<{ active: boolean }>` border-radius: ${CSSVariable.BORDER_RADIUS_NORMAL}; > .label { - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; ${capitalize} } diff --git a/apps/pwa/src/components/pagination/index.tsx b/apps/pwa/src/components/pagination/index.tsx index 10a69f18..308d88ef 100644 --- a/apps/pwa/src/components/pagination/index.tsx +++ b/apps/pwa/src/components/pagination/index.tsx @@ -16,7 +16,7 @@ const Button = styled.button<{ active?: boolean }>` ${flexCenter} - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; border: none; cursor: pointer; transition: 300ms; diff --git a/apps/pwa/src/components/select/global_style.ts b/apps/pwa/src/components/select/global_style.ts index 0c30317e..453e30e0 100644 --- a/apps/pwa/src/components/select/global_style.ts +++ b/apps/pwa/src/components/select/global_style.ts @@ -17,7 +17,7 @@ export default createGlobalStyle` .${ClassName.MENU} { -webkit-app-region: no-drag; overflow: hidden; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; border-radius: ${CSSVariable.BORDER_RADIUS_NORMAL} !important; } @@ -30,7 +30,7 @@ export default createGlobalStyle` } .${ClassName.CONTROL} { - font-size: 14px !important; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL} !important; cursor: pointer !important; min-height: ${ComponentSize.NORMAL}px !important; box-shadow: none !important; @@ -88,7 +88,7 @@ export default createGlobalStyle` } .${MultiClassName.MULTI_VALUE} { - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; background-color: ${CSSVariable.BACKGROUND_COLOR_LEVEL_ONE} !important; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; border-radius: ${CSSVariable.BORDER_RADIUS_LIGHT} !important; diff --git a/apps/pwa/src/components/tab_list.tsx b/apps/pwa/src/components/tab_list.tsx index 4d360c93..8807a312 100644 --- a/apps/pwa/src/components/tab_list.tsx +++ b/apps/pwa/src/components/tab_list.tsx @@ -18,7 +18,7 @@ const Tab = styled.div<{ active: boolean }>` padding: 8px 0 5px 0; font-weight: bold; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; transition: inherit; ${capitalize} } diff --git a/apps/pwa/src/components/textarea.tsx b/apps/pwa/src/components/textarea.tsx index c037dc6b..8abd3513 100644 --- a/apps/pwa/src/components/textarea.tsx +++ b/apps/pwa/src/components/textarea.tsx @@ -16,7 +16,7 @@ const Textarea = styled.textarea` border-radius: ${CSSVariable.BORDER_RADIUS_NORMAL}; border: 1px solid ${CSSVariable.COLOR_BORDER}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; outline: none; transition: inherit; resize: none; diff --git a/apps/pwa/src/global_style.ts b/apps/pwa/src/global_style.ts index ea287052..3b216f32 100644 --- a/apps/pwa/src/global_style.ts +++ b/apps/pwa/src/global_style.ts @@ -7,8 +7,8 @@ export enum CSSVariable { COLOR_DANGEROUS = 'var(--color-dangerous)', COLOR_BORDER = 'var(--color-border)', + TEXT_SIZE_LARGE = 'var(--text-size-large)', TEXT_SIZE_NORMAL = 'var(--text-size-normal)', - TEXT_SIZE_MEDIUM = 'var(--text-size-medium)', TEXT_SIZE_SMALL = 'var(--text-size-small)', TEXT_COLOR_PRIMARY = 'var(--text-color-primary)', @@ -33,8 +33,8 @@ const CSS_VARIABLE_MAP_VALUE: Record = { [CSSVariable.COLOR_DANGEROUS]: '#f25042', [CSSVariable.COLOR_BORDER]: 'rgb(232 232 232)', - [CSSVariable.TEXT_SIZE_NORMAL]: '16px', - [CSSVariable.TEXT_SIZE_MEDIUM]: '14px', + [CSSVariable.TEXT_SIZE_LARGE]: '16px', + [CSSVariable.TEXT_SIZE_NORMAL]: '14px', [CSSVariable.TEXT_SIZE_SMALL]: '12px', [CSSVariable.TEXT_COLOR_PRIMARY]: 'rgb(88 88 88)', diff --git a/apps/pwa/src/i18n/en_us.ts b/apps/pwa/src/i18n/en_us.ts index 193221a5..d09d1cf7 100644 --- a/apps/pwa/src/i18n/en_us.ts +++ b/apps/pwa/src/i18n/en_us.ts @@ -200,4 +200,6 @@ export default { 'playlist has included these music already', next_music_info: 'next music is %s1', failed_to_get_musicbill_list: 'failed to get musicbill list', + save_time_of_singer_modify_record_instruction: + 'save time of singer modify record is %s1 days', }; diff --git a/apps/pwa/src/i18n/zh_hans.ts b/apps/pwa/src/i18n/zh_hans.ts index afacc454..f360f9d1 100644 --- a/apps/pwa/src/i18n/zh_hans.ts +++ b/apps/pwa/src/i18n/zh_hans.ts @@ -191,6 +191,8 @@ const zhCN: { music_list_are_added_to_playlist_unsuccessfully: '播放列表已包含这些音乐', next_music_info: '下一首播放 %s1', failed_to_get_musicbill_list: '获取乐单列表失败', + save_time_of_singer_modify_record_instruction: + '歌手修改记录保留时间为 %s1 天', }; export default zhCN; diff --git a/apps/pwa/src/pages/login/first_step/server_list.tsx b/apps/pwa/src/pages/login/first_step/server_list.tsx index c7840b0c..0b4beceb 100644 --- a/apps/pwa/src/pages/login/first_step/server_list.tsx +++ b/apps/pwa/src/pages/login/first_step/server_list.tsx @@ -14,7 +14,7 @@ const Style = styled.div` align-items: center; gap: 10px; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; > .line { diff --git a/apps/pwa/src/pages/login/second_step/user_list.tsx b/apps/pwa/src/pages/login/second_step/user_list.tsx index 43a109ec..f55fcf97 100644 --- a/apps/pwa/src/pages/login/second_step/user_list.tsx +++ b/apps/pwa/src/pages/login/second_step/user_list.tsx @@ -11,7 +11,7 @@ const Divider = styled.div` align-items: center; gap: 5px; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; > .line { diff --git a/apps/pwa/src/pages/player/2fa_dialog/qrcode.tsx b/apps/pwa/src/pages/player/2fa_dialog/qrcode.tsx index 87d55907..728cf97d 100644 --- a/apps/pwa/src/pages/player/2fa_dialog/qrcode.tsx +++ b/apps/pwa/src/pages/player/2fa_dialog/qrcode.tsx @@ -23,7 +23,7 @@ const Style = styled.div` } > .instruction { - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; ${upperCaseFirstLetter} diff --git a/apps/pwa/src/pages/player/components/missing_singer.tsx b/apps/pwa/src/pages/player/components/missing_singer.tsx index df23ed7b..6db9e039 100644 --- a/apps/pwa/src/pages/player/components/missing_singer.tsx +++ b/apps/pwa/src/pages/player/components/missing_singer.tsx @@ -7,7 +7,7 @@ import notice from '@/utils/notice'; import { openCreateSingerDialog } from '../utils'; const Style = styled.div` - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; cursor: pointer; diff --git a/apps/pwa/src/pages/player/components/music_base.tsx b/apps/pwa/src/pages/player/components/music_base.tsx index 19ccadaf..8912a860 100644 --- a/apps/pwa/src/pages/player/components/music_base.tsx +++ b/apps/pwa/src/pages/player/components/music_base.tsx @@ -18,7 +18,7 @@ const Style = styled.div<{ active: boolean }>` > .index { color: ${CSSVariable.TEXT_COLOR_SECONDARY}; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; writing-mode: vertical-lr; font-family: monospace; } @@ -44,19 +44,19 @@ const Style = styled.div<{ active: boolean }>` > .name { line-height: 1.5; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; } > .alias { - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; } } > .singers { ${ellipsis} - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; } } diff --git a/apps/pwa/src/pages/player/components/music_info.tsx b/apps/pwa/src/pages/player/components/music_info.tsx index 41c314f0..15ceef22 100644 --- a/apps/pwa/src/pages/player/components/music_info.tsx +++ b/apps/pwa/src/pages/player/components/music_info.tsx @@ -21,14 +21,14 @@ const Style = styled.div` > .name { ${ellipsis} - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: rgb(55 55 55); line-height: 1.5; } > .singers { ${ellipsis} - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: rgb(155 155 155); } } diff --git a/apps/pwa/src/pages/player/components/public_musicbill.tsx b/apps/pwa/src/pages/player/components/public_musicbill.tsx index b7fbe724..6b3bae06 100644 --- a/apps/pwa/src/pages/player/components/public_musicbill.tsx +++ b/apps/pwa/src/pages/player/components/public_musicbill.tsx @@ -18,7 +18,7 @@ const Style = styled.div` margin-top: 5px; ${ellipsis} - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; cursor: pointer; } @@ -26,7 +26,7 @@ const Style = styled.div` > .nickname { flex: 1; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; ${ellipsis} diff --git a/apps/pwa/src/pages/player/controller/info.tsx b/apps/pwa/src/pages/player/controller/info.tsx index 858f6d9a..c704ddeb 100644 --- a/apps/pwa/src/pages/player/controller/info.tsx +++ b/apps/pwa/src/pages/player/controller/info.tsx @@ -36,7 +36,7 @@ const Style = styled(animated.div)` >.name { cursor: pointer; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; &:hover { @@ -45,13 +45,13 @@ const Style = styled(animated.div)` } > .alias { - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; } } > .singers { - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; ${ellipsis} } diff --git a/apps/pwa/src/pages/player/controller/time.tsx b/apps/pwa/src/pages/player/controller/time.tsx index 2fb302fd..f4430354 100644 --- a/apps/pwa/src/pages/player/controller/time.tsx +++ b/apps/pwa/src/pages/player/controller/time.tsx @@ -5,7 +5,7 @@ import { formatSecond } from '../utils'; const Style = styled.div` font-family: monospace; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; transform: scale(0.9); user-select: none; diff --git a/apps/pwa/src/pages/player/lyric_panel/controller/info.tsx b/apps/pwa/src/pages/player/lyric_panel/controller/info.tsx index 498964e6..8cfe56cf 100644 --- a/apps/pwa/src/pages/player/lyric_panel/controller/info.tsx +++ b/apps/pwa/src/pages/player/lyric_panel/controller/info.tsx @@ -26,7 +26,7 @@ const Style = styled.div` } > .singers { - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; ${ellipsis} } `; diff --git a/apps/pwa/src/pages/player/lyric_panel/controller/progress_bar.tsx b/apps/pwa/src/pages/player/lyric_panel/controller/progress_bar.tsx index 53cc45e6..48d858af 100644 --- a/apps/pwa/src/pages/player/lyric_panel/controller/progress_bar.tsx +++ b/apps/pwa/src/pages/player/lyric_panel/controller/progress_bar.tsx @@ -20,7 +20,7 @@ const Style = styled.div` } > .time { - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; font-family: monospace; transform: scale(0.9); diff --git a/apps/pwa/src/pages/player/lyric_panel/lyric/index.tsx b/apps/pwa/src/pages/player/lyric_panel/lyric/index.tsx index 39a0462c..66a78127 100644 --- a/apps/pwa/src/pages/player/lyric_panel/lyric/index.tsx +++ b/apps/pwa/src/pages/player/lyric_panel/lyric/index.tsx @@ -35,7 +35,7 @@ const ErrorContainer = styled(Container)` gap: 10px; > .message { - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; text-align: center; } diff --git a/apps/pwa/src/pages/player/lyric_panel/lyric/lyric.tsx b/apps/pwa/src/pages/player/lyric_panel/lyric/lyric.tsx index b08b62ef..9cc92d97 100644 --- a/apps/pwa/src/pages/player/lyric_panel/lyric/lyric.tsx +++ b/apps/pwa/src/pages/player/lyric_panel/lyric/lyric.tsx @@ -18,7 +18,7 @@ const Line = styled.div<{ active?: boolean }>` text-align: center; backdrop-filter: blur(10px); - font-size: 16px; + font-size: ${CSSVariable.TEXT_SIZE_LARGE}; line-height: 1.5; font-weight: bold; diff --git a/apps/pwa/src/pages/player/music_drawer/create_user.tsx b/apps/pwa/src/pages/player/music_drawer/create_user.tsx index e88682b5..d21e2f69 100644 --- a/apps/pwa/src/pages/player/music_drawer/create_user.tsx +++ b/apps/pwa/src/pages/player/music_drawer/create_user.tsx @@ -8,7 +8,7 @@ import playerEventemitter, { const Style = styled.div` text-align: center; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; > .nickname { diff --git a/apps/pwa/src/pages/player/music_drawer/info.tsx b/apps/pwa/src/pages/player/music_drawer/info.tsx index 58fedf49..bd2e15de 100644 --- a/apps/pwa/src/pages/player/music_drawer/info.tsx +++ b/apps/pwa/src/pages/player/music_drawer/info.tsx @@ -24,7 +24,7 @@ const Style = styled.div` > .aliases { margin: 0 20px 5px 20px; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; } diff --git a/apps/pwa/src/pages/player/music_drawer/lyric.tsx b/apps/pwa/src/pages/player/music_drawer/lyric.tsx index 36511942..d653312e 100644 --- a/apps/pwa/src/pages/player/music_drawer/lyric.tsx +++ b/apps/pwa/src/pages/player/music_drawer/lyric.tsx @@ -8,7 +8,7 @@ const Line = styled.div` margin: 10px 20px; line-height: 1.3; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; `; diff --git a/apps/pwa/src/pages/player/music_drawer/singer_list/singer.tsx b/apps/pwa/src/pages/player/music_drawer/singer_list/singer.tsx index a5e44cd0..32efe52e 100644 --- a/apps/pwa/src/pages/player/music_drawer/singer_list/singer.tsx +++ b/apps/pwa/src/pages/player/music_drawer/singer_list/singer.tsx @@ -26,7 +26,7 @@ const Style = styled.div` min-width: 0; ${ellipsis} - font-size: 16px; + font-size: ${CSSVariable.TEXT_SIZE_LARGE}; font-weight: bold; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; } diff --git a/apps/pwa/src/pages/player/music_drawer/sub_music_list.tsx b/apps/pwa/src/pages/player/music_drawer/sub_music_list.tsx index 0d0e8a6c..466b927c 100644 --- a/apps/pwa/src/pages/player/music_drawer/sub_music_list.tsx +++ b/apps/pwa/src/pages/player/music_drawer/sub_music_list.tsx @@ -14,7 +14,7 @@ const Style = styled.div` margin: 0 20px; padding: 10px 0; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; } diff --git a/apps/pwa/src/pages/player/music_drawer/tag.tsx b/apps/pwa/src/pages/player/music_drawer/tag.tsx index 0722e3dd..ee32b4eb 100644 --- a/apps/pwa/src/pages/player/music_drawer/tag.tsx +++ b/apps/pwa/src/pages/player/music_drawer/tag.tsx @@ -10,13 +10,13 @@ const Style = styled.div` color: ${CSSVariable.TEXT_COLOR_SECONDARY}; > .icon { - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; line-height: 1; } > .text { font-family: monospace; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; } `; diff --git a/apps/pwa/src/pages/player/musicbill_music_drawer/musicbill.tsx b/apps/pwa/src/pages/player/musicbill_music_drawer/musicbill.tsx index 845c212c..15e763ac 100644 --- a/apps/pwa/src/pages/player/musicbill_music_drawer/musicbill.tsx +++ b/apps/pwa/src/pages/player/musicbill_music_drawer/musicbill.tsx @@ -52,7 +52,7 @@ const Style = styled.div` flex: 1; min-width: 0; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; ${ellipsis} } `; diff --git a/apps/pwa/src/pages/player/musicbill_shared_user_drawer/musicbill_shared_user_drawer.tsx b/apps/pwa/src/pages/player/musicbill_shared_user_drawer/musicbill_shared_user_drawer.tsx index ecb1f114..4bd8ea8f 100644 --- a/apps/pwa/src/pages/player/musicbill_shared_user_drawer/musicbill_shared_user_drawer.tsx +++ b/apps/pwa/src/pages/player/musicbill_shared_user_drawer/musicbill_shared_user_drawer.tsx @@ -40,7 +40,7 @@ const Title = styled.div` margin: 40px 20px 20px 20px; font-weight: bold; - font-size: 16px; + font-size: ${CSSVariable.TEXT_SIZE_LARGE}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; ${upperCaseFirstLetter} diff --git a/apps/pwa/src/pages/player/musicbill_shared_user_drawer/user.tsx b/apps/pwa/src/pages/player/musicbill_shared_user_drawer/user.tsx index d9d28faf..a890e676 100644 --- a/apps/pwa/src/pages/player/musicbill_shared_user_drawer/user.tsx +++ b/apps/pwa/src/pages/player/musicbill_shared_user_drawer/user.tsx @@ -40,7 +40,7 @@ const Style = styled.div` flex: 1; min-width: 0; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; ${ellipsis} } diff --git a/apps/pwa/src/pages/player/musicbilll_order_drawer/musicbill.tsx b/apps/pwa/src/pages/player/musicbilll_order_drawer/musicbill.tsx index ee3fafd2..f6c1f5d2 100644 --- a/apps/pwa/src/pages/player/musicbilll_order_drawer/musicbill.tsx +++ b/apps/pwa/src/pages/player/musicbilll_order_drawer/musicbill.tsx @@ -28,7 +28,7 @@ const Style = styled.div` flex: 1; min-width: 0; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; ${ellipsis} } diff --git a/apps/pwa/src/pages/player/network_status.tsx b/apps/pwa/src/pages/player/network_status.tsx index a91ee0a5..463993ec 100644 --- a/apps/pwa/src/pages/player/network_status.tsx +++ b/apps/pwa/src/pages/player/network_status.tsx @@ -14,7 +14,7 @@ const Style = styled.div` ${flexCenter} ${capitalize} - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; background-color: ${CSSVariable.COLOR_DANGEROUS}; color: #fff; white-space: nowrap; diff --git a/apps/pwa/src/pages/player/pages/exploration/music_info.tsx b/apps/pwa/src/pages/player/pages/exploration/music_info.tsx index dd5388f2..85f7944b 100644 --- a/apps/pwa/src/pages/player/pages/exploration/music_info.tsx +++ b/apps/pwa/src/pages/player/pages/exploration/music_info.tsx @@ -6,13 +6,13 @@ import Singer from '../../components/singer'; const Style = styled.div` > .name { - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; ${ellipsis} } > .singers { - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; ${ellipsis} } diff --git a/apps/pwa/src/pages/player/pages/exploration/public_musicbill_info.tsx b/apps/pwa/src/pages/player/pages/exploration/public_musicbill_info.tsx index 22015c76..a73bdd4e 100644 --- a/apps/pwa/src/pages/player/pages/exploration/public_musicbill_info.tsx +++ b/apps/pwa/src/pages/player/pages/exploration/public_musicbill_info.tsx @@ -8,12 +8,12 @@ import playerEventemitter, { const Style = styled.div` > .name { - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; ${ellipsis} } > .user { - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; ${ellipsis} diff --git a/apps/pwa/src/pages/player/pages/exploration/singer_info.tsx b/apps/pwa/src/pages/player/pages/exploration/singer_info.tsx index 4e0575bb..4654d165 100644 --- a/apps/pwa/src/pages/player/pages/exploration/singer_info.tsx +++ b/apps/pwa/src/pages/player/pages/exploration/singer_info.tsx @@ -4,7 +4,7 @@ import styled from 'styled-components'; import { Singer as SingerType } from './constants'; const Style = styled.div` - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; ${ellipsis} `; diff --git a/apps/pwa/src/pages/player/pages/music_play_record/music_play_record_list/music_play_record.tsx b/apps/pwa/src/pages/player/pages/music_play_record/music_play_record_list/music_play_record.tsx index bf257f8b..86116090 100644 --- a/apps/pwa/src/pages/player/pages/music_play_record/music_play_record_list/music_play_record.tsx +++ b/apps/pwa/src/pages/player/pages/music_play_record/music_play_record_list/music_play_record.tsx @@ -17,7 +17,7 @@ const Addon = styled.div` border-top: 1px solid ${CSSVariable.BACKGROUND_COLOR_LEVEL_TWO}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; font-family: monospace; display: flex; diff --git a/apps/pwa/src/pages/player/pages/musicbill/info.tsx b/apps/pwa/src/pages/player/pages/musicbill/info.tsx index fa052b85..2396ae05 100644 --- a/apps/pwa/src/pages/player/pages/musicbill/info.tsx +++ b/apps/pwa/src/pages/player/pages/musicbill/info.tsx @@ -29,13 +29,13 @@ const Style = styled.div` justify-content: space-between; > .name { - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; font-weight: bold; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; } > .create-time { - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; ${upperCaseFirstLetter} } diff --git a/apps/pwa/src/pages/player/pages/musicbill/mini_info.tsx b/apps/pwa/src/pages/player/pages/musicbill/mini_info.tsx index 851f9639..145d3e0b 100644 --- a/apps/pwa/src/pages/player/pages/musicbill/mini_info.tsx +++ b/apps/pwa/src/pages/player/pages/musicbill/mini_info.tsx @@ -26,7 +26,7 @@ const Style = styled.div` flex: 1; min-width: 0; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; font-weight: bold; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; ${ellipsis} diff --git a/apps/pwa/src/pages/player/pages/my_music/music_list/music.tsx b/apps/pwa/src/pages/player/pages/my_music/music_list/music.tsx index 7f9851ff..d202e537 100644 --- a/apps/pwa/src/pages/player/pages/my_music/music_list/music.tsx +++ b/apps/pwa/src/pages/player/pages/my_music/music_list/music.tsx @@ -12,7 +12,7 @@ const Addon = styled.div` border-top: 1px solid ${CSSVariable.BACKGROUND_COLOR_LEVEL_TWO}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; font-family: monospace; display: flex; diff --git a/apps/pwa/src/pages/player/pages/search/lyric/music_with_lyric.tsx b/apps/pwa/src/pages/player/pages/search/lyric/music_with_lyric.tsx index 1bca5294..ff69b834 100644 --- a/apps/pwa/src/pages/player/pages/search/lyric/music_with_lyric.tsx +++ b/apps/pwa/src/pages/player/pages/search/lyric/music_with_lyric.tsx @@ -13,7 +13,7 @@ const StyledLrc = styled(Lrc)` border-top: 1px solid ${CSSVariable.BACKGROUND_COLOR_LEVEL_TWO}; `; const Line = styled.div` - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; .highlight { diff --git a/apps/pwa/src/pages/player/pages/search/singer/singer.tsx b/apps/pwa/src/pages/player/pages/search/singer/singer.tsx index 8b38f667..e7a9d8d4 100644 --- a/apps/pwa/src/pages/player/pages/search/singer/singer.tsx +++ b/apps/pwa/src/pages/player/pages/search/singer/singer.tsx @@ -13,13 +13,13 @@ const Style = styled.div` > .name { margin-top: 3px; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; ${ellipsis} } > .alias { - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; ${ellipsis} } diff --git a/apps/pwa/src/pages/player/pages/search/text_guide.tsx b/apps/pwa/src/pages/player/pages/search/text_guide.tsx index f2b4aab1..c5710139 100644 --- a/apps/pwa/src/pages/player/pages/search/text_guide.tsx +++ b/apps/pwa/src/pages/player/pages/search/text_guide.tsx @@ -6,7 +6,7 @@ const Style = styled.div` margin: 20px; text-align: center; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; > .create { diff --git a/apps/pwa/src/pages/player/pages/setting/extra_info.tsx b/apps/pwa/src/pages/player/pages/setting/extra_info.tsx index 716e5c4e..4521d619 100644 --- a/apps/pwa/src/pages/player/pages/setting/extra_info.tsx +++ b/apps/pwa/src/pages/player/pages/setting/extra_info.tsx @@ -5,7 +5,7 @@ import { CSSVariable } from '@/global_style'; import styled from 'styled-components'; const Style = styled.div` - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; text-align: center; diff --git a/apps/pwa/src/pages/player/pages/setting/item.tsx b/apps/pwa/src/pages/player/pages/setting/item.tsx index 7ee75a86..0b0a8508 100644 --- a/apps/pwa/src/pages/player/pages/setting/item.tsx +++ b/apps/pwa/src/pages/player/pages/setting/item.tsx @@ -17,7 +17,7 @@ const Style = styled.div` min-width: 0; font-weight: bold; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; ${capitalize} diff --git a/apps/pwa/src/pages/player/pages/shared_musicbill_invitation/index.tsx b/apps/pwa/src/pages/player/pages/shared_musicbill_invitation/index.tsx index 23a9abd6..dfad4798 100644 --- a/apps/pwa/src/pages/player/pages/shared_musicbill_invitation/index.tsx +++ b/apps/pwa/src/pages/player/pages/shared_musicbill_invitation/index.tsx @@ -35,7 +35,7 @@ const Content = styled(Container)` > .description { margin: 10px 20px; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; display: flex; diff --git a/apps/pwa/src/pages/player/pages/shared_musicbill_invitation/invitation.tsx b/apps/pwa/src/pages/player/pages/shared_musicbill_invitation/invitation.tsx index 486d6b4a..619eb5bf 100644 --- a/apps/pwa/src/pages/player/pages/shared_musicbill_invitation/invitation.tsx +++ b/apps/pwa/src/pages/player/pages/shared_musicbill_invitation/invitation.tsx @@ -19,14 +19,14 @@ const Style = styled.div` padding: 10px 0; > .time { - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; } > .description { margin: 5px 0 10px 0; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; > .user { diff --git a/apps/pwa/src/pages/player/pages/user_manage/user_list/user.tsx b/apps/pwa/src/pages/player/pages/user_manage/user_list/user.tsx index fe191291..acb1b1be 100644 --- a/apps/pwa/src/pages/player/pages/user_manage/user_list/user.tsx +++ b/apps/pwa/src/pages/player/pages/user_manage/user_list/user.tsx @@ -34,7 +34,7 @@ const Style = styled.div` background-color: ${CSSVariable.COLOR_PRIMARY}; color: #fff; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; padding: 2px 5px; } } @@ -52,7 +52,7 @@ const Style = styled.div` > .username { margin-top: 5px; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; ${ellipsis} @@ -64,7 +64,7 @@ const Style = styled.div` > .last-active-time { margin-top: 5px; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; font-family: monospace; diff --git a/apps/pwa/src/pages/player/profile_edit_popup.tsx b/apps/pwa/src/pages/player/profile_edit_popup.tsx index 053f669d..2cd6a85e 100644 --- a/apps/pwa/src/pages/player/profile_edit_popup.tsx +++ b/apps/pwa/src/pages/player/profile_edit_popup.tsx @@ -50,13 +50,13 @@ const Style = styled.div` > .primary { color: ${CSSVariable.TEXT_COLOR_PRIMARY}; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; ${ellipsis} } > .secondary { color: ${CSSVariable.TEXT_COLOR_SECONDARY}; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; ${ellipsis} } } diff --git a/apps/pwa/src/pages/player/public_musicbill_drawer/info.tsx b/apps/pwa/src/pages/player/public_musicbill_drawer/info.tsx index c58318ce..a803ee0f 100644 --- a/apps/pwa/src/pages/player/public_musicbill_drawer/info.tsx +++ b/apps/pwa/src/pages/player/public_musicbill_drawer/info.tsx @@ -56,7 +56,7 @@ const Style = styled.div` flex: 1; min-width: 0; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; ${ellipsis} } diff --git a/apps/pwa/src/pages/player/sidebar/musicbill_list/musicbill.tsx b/apps/pwa/src/pages/player/sidebar/musicbill_list/musicbill.tsx index 7465e9cb..9f6f5d45 100644 --- a/apps/pwa/src/pages/player/sidebar/musicbill_list/musicbill.tsx +++ b/apps/pwa/src/pages/player/sidebar/musicbill_list/musicbill.tsx @@ -28,7 +28,7 @@ const Style = styled(NavLink)` flex: 1; min-width: 0; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; ${ellipsis} } diff --git a/apps/pwa/src/pages/player/sidebar/musicbill_list/top.tsx b/apps/pwa/src/pages/player/sidebar/musicbill_list/top.tsx index 390de9b7..69228287 100644 --- a/apps/pwa/src/pages/player/sidebar/musicbill_list/top.tsx +++ b/apps/pwa/src/pages/player/sidebar/musicbill_list/top.tsx @@ -35,7 +35,7 @@ const Style = styled.div` flex: 1; min-width: 0; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; ${capitalize} } `; diff --git a/apps/pwa/src/pages/player/sidebar/profile.tsx b/apps/pwa/src/pages/player/sidebar/profile.tsx index fb9aad14..d66c3682 100644 --- a/apps/pwa/src/pages/player/sidebar/profile.tsx +++ b/apps/pwa/src/pages/player/sidebar/profile.tsx @@ -28,7 +28,7 @@ const Style = styled.div` padding: 0 30px; max-width: 100%; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; ${ellipsis} } `; diff --git a/apps/pwa/src/pages/player/singer_drawer/create_user.tsx b/apps/pwa/src/pages/player/singer_drawer/create_user.tsx index 49ca9d74..6419f560 100644 --- a/apps/pwa/src/pages/player/singer_drawer/create_user.tsx +++ b/apps/pwa/src/pages/player/singer_drawer/create_user.tsx @@ -10,7 +10,7 @@ const Style = styled.div` padding: 30px 0; text-align: center; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; > .nickname { diff --git a/apps/pwa/src/pages/player/singer_drawer/info.tsx b/apps/pwa/src/pages/player/singer_drawer/info.tsx index aab9be9d..dd885fc4 100644 --- a/apps/pwa/src/pages/player/singer_drawer/info.tsx +++ b/apps/pwa/src/pages/player/singer_drawer/info.tsx @@ -25,7 +25,7 @@ const Style = styled.div` } > .aliases { - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; } } diff --git a/apps/pwa/src/pages/player/singer_modify_record_drawer/hint.tsx b/apps/pwa/src/pages/player/singer_modify_record_drawer/hint.tsx index 7370fc71..a32f69cd 100644 --- a/apps/pwa/src/pages/player/singer_modify_record_drawer/hint.tsx +++ b/apps/pwa/src/pages/player/singer_modify_record_drawer/hint.tsx @@ -1,11 +1,12 @@ import styled from 'styled-components'; import { SINGER_MODIFY_RECORD_TTL } from '#/constants'; import { CSSVariable } from '@/global_style'; +import { t } from '@/i18n'; const Style = styled.div` padding: 10px; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; text-align: center; `; @@ -13,9 +14,10 @@ const Style = styled.div` function Hint() { return ( ); } diff --git a/apps/pwa/src/pages/player/singer_modify_record_drawer/record_list.tsx b/apps/pwa/src/pages/player/singer_modify_record_drawer/record_list.tsx index 09bb6137..6f00c95f 100644 --- a/apps/pwa/src/pages/player/singer_modify_record_drawer/record_list.tsx +++ b/apps/pwa/src/pages/player/singer_modify_record_drawer/record_list.tsx @@ -37,12 +37,12 @@ const Style = styled(Root)` ${CSSVariable.BACKGROUND_COLOR_LEVEL_THREE}; > .time { - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; } > .description { - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; line-height: 2; diff --git a/apps/pwa/src/pages/player/user_drawer/info.tsx b/apps/pwa/src/pages/player/user_drawer/info.tsx index b00c8a4f..b192e48d 100644 --- a/apps/pwa/src/pages/player/user_drawer/info.tsx +++ b/apps/pwa/src/pages/player/user_drawer/info.tsx @@ -32,12 +32,12 @@ const Style = styled.div` > .username { margin: 5px 0; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; } > .join-time { - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; color: ${CSSVariable.TEXT_COLOR_SECONDARY}; ${upperCaseFirstLetter} diff --git a/apps/pwa/src/pages/player/user_drawer/musicbill_list.tsx b/apps/pwa/src/pages/player/user_drawer/musicbill_list.tsx index 9d8fdb0b..dda1e1ab 100644 --- a/apps/pwa/src/pages/player/user_drawer/musicbill_list.tsx +++ b/apps/pwa/src/pages/player/user_drawer/musicbill_list.tsx @@ -46,7 +46,7 @@ const Style = styled.div` gap: 5px; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; background-color: rgb(255 255 255 / 0.75); } } @@ -54,7 +54,7 @@ const Style = styled.div` > .name { margin-top: 3px; - font-size: 14px; + font-size: ${CSSVariable.TEXT_SIZE_NORMAL}; color: ${CSSVariable.TEXT_COLOR_PRIMARY}; ${ellipsis} } diff --git a/apps/pwa/src/utils/notice/notice_item.tsx b/apps/pwa/src/utils/notice/notice_item.tsx index 0ddea811..dab03a41 100644 --- a/apps/pwa/src/utils/notice/notice_item.tsx +++ b/apps/pwa/src/utils/notice/notice_item.tsx @@ -65,7 +65,7 @@ const Style = styled.div<{ type: NoticeType }>` flex: 1; min-width: 0; - font-size: 12px; + font-size: ${CSSVariable.TEXT_SIZE_SMALL}; line-height: 1.5; color: #fff; From 78a180a3beaa78abcccfe5bc9e61167e6444fc02 Mon Sep 17 00:00:00 2001 From: mebtte Date: Tue, 10 Oct 2023 13:50:56 +0800 Subject: [PATCH 4/7] improve music drawer --- apps/pwa/src/pages/player/music_drawer/sub_music_list.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/pwa/src/pages/player/music_drawer/sub_music_list.tsx b/apps/pwa/src/pages/player/music_drawer/sub_music_list.tsx index 466b927c..7ad33042 100644 --- a/apps/pwa/src/pages/player/music_drawer/sub_music_list.tsx +++ b/apps/pwa/src/pages/player/music_drawer/sub_music_list.tsx @@ -21,6 +21,8 @@ const Style = styled.div` > .list { > .item { margin: 0 10px; + + border-radius: ${CSSVariable.BORDER_RADIUS_NORMAL}; } } `; From 64c1dc78bebd073275155622c583a95ccdde772a Mon Sep 17 00:00:00 2001 From: mebtte Date: Wed, 11 Oct 2023 21:11:29 +0800 Subject: [PATCH 5/7] improve i18n --- apps/pwa/src/i18n/en_us.ts | 2 ++ apps/pwa/src/i18n/zh_hans.ts | 2 ++ apps/pwa/src/pages/player/singer_drawer/toolbar.tsx | 7 ++++--- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/apps/pwa/src/i18n/en_us.ts b/apps/pwa/src/i18n/en_us.ts index d09d1cf7..ad08cb51 100644 --- a/apps/pwa/src/i18n/en_us.ts +++ b/apps/pwa/src/i18n/en_us.ts @@ -202,4 +202,6 @@ export default { failed_to_get_musicbill_list: 'failed to get musicbill list', save_time_of_singer_modify_record_instruction: 'save time of singer modify record is %s1 days', + singers_name_copied: "singer's name copied", + no_music_singer_warning: 'this singer has no music', }; diff --git a/apps/pwa/src/i18n/zh_hans.ts b/apps/pwa/src/i18n/zh_hans.ts index f360f9d1..a7909d8e 100644 --- a/apps/pwa/src/i18n/zh_hans.ts +++ b/apps/pwa/src/i18n/zh_hans.ts @@ -193,6 +193,8 @@ const zhCN: { failed_to_get_musicbill_list: '获取乐单列表失败', save_time_of_singer_modify_record_instruction: '歌手修改记录保留时间为 %s1 天', + singers_name_copied: '歌手名已复制', + no_music_singer_warning: '该歌手暂未收录音乐', }; export default zhCN; diff --git a/apps/pwa/src/pages/player/singer_drawer/toolbar.tsx b/apps/pwa/src/pages/player/singer_drawer/toolbar.tsx index 46e5b2a0..cfe7b8af 100644 --- a/apps/pwa/src/pages/player/singer_drawer/toolbar.tsx +++ b/apps/pwa/src/pages/player/singer_drawer/toolbar.tsx @@ -3,6 +3,7 @@ import IconButton from '@/components/icon_button'; import { MdPlaylistAdd, MdOutlineEdit, MdCopyAll } from 'react-icons/md'; import notice from '@/utils/notice'; import logger from '@/utils/logger'; +import { t } from '@/i18n'; import playerEventemitter, { EventType as PlayerEventType, } from '../eventemitter'; @@ -47,7 +48,7 @@ function Toolbar({ singer }: { singer: Singer }) { musicList: singer.musicList, }, ) - : notice.error('歌手暂未收录音乐') + : notice.error(t('no_music_singer_warning')) } > @@ -56,9 +57,9 @@ function Toolbar({ singer }: { singer: Singer }) { onClick={() => window.navigator.clipboard .writeText(singer.name) - .then(() => notice.info('已复制歌手名字')) + .then(() => notice.info(t('singers_name_copied'))) .catch((error) => { - logger.error(error, '复制歌手名字失败'); + logger.error(error, "Failed to copy singer's name"); return notice.error(error.message); }) } From 7a34716df9234b4486ef9bf1b0648236115890da Mon Sep 17 00:00:00 2001 From: mebtte Date: Wed, 11 Oct 2023 21:22:48 +0800 Subject: [PATCH 6/7] improve development --- apps/pwa/src/pages/player/use_keyboard.ts | 99 ++++++++++++----------- apps/pwa/webpack/base.js | 4 - 2 files changed, 52 insertions(+), 51 deletions(-) diff --git a/apps/pwa/src/pages/player/use_keyboard.ts b/apps/pwa/src/pages/player/use_keyboard.ts index 878713ba..cf24f13f 100644 --- a/apps/pwa/src/pages/player/use_keyboard.ts +++ b/apps/pwa/src/pages/player/use_keyboard.ts @@ -2,6 +2,7 @@ import useNavigate from '@/utils/use_navigate'; import { PLAYER_PATH, ROOT_PATH } from '@/constants/route'; import { useEffect } from 'react'; import notice from '@/utils/notice'; +import definition from '@/definition'; import e, { EventType } from './eventemitter'; import { QueueMusic, Musicbill } from './constants'; @@ -17,62 +18,66 @@ export default ({ const navigate = useNavigate(); useEffect(() => { - const onKeyDown = (event: KeyboardEvent) => { - switch (event.key) { - case 'f': { - if (event.metaKey || event.ctrlKey) { - event.preventDefault(); - navigate({ - path: `${ROOT_PATH.PLAYER}${PLAYER_PATH.SEARCH}`, - }); - e.emit(EventType.FOCUS_SEARCH_INPUT, null); + if (!definition.DEVELOPMENT) { + const onKeyDown = (event: KeyboardEvent) => { + switch (event.key) { + case 'f': { + if (event.metaKey || event.ctrlKey) { + event.preventDefault(); + navigate({ + path: `${ROOT_PATH.PLAYER}${PLAYER_PATH.SEARCH}`, + }); + e.emit(EventType.FOCUS_SEARCH_INPUT, null); + } + break; } - break; - } - case 'l': { - if (event.metaKey || event.ctrlKey) { - event.preventDefault(); - e.emit(EventType.OPEN_PLAYLIST_PLAYQUEUE_DRAWER, null); + case 'l': { + if (event.metaKey || event.ctrlKey) { + event.preventDefault(); + e.emit(EventType.OPEN_PLAYLIST_PLAYQUEUE_DRAWER, null); + } + break; } - break; - } - case 'q': - case 'w': { - if (!paused && queueMusic && (event.metaKey || event.ctrlKey)) { - event.preventDefault(); - notice.error('请先暂停音乐后再使用快捷键退出'); + case 'q': + case 'w': { + if (!paused && queueMusic && (event.metaKey || event.ctrlKey)) { + event.preventDefault(); + notice.error('请先暂停音乐后再使用快捷键退出'); + } + break; } - break; - } - case '1': - case '2': - case '3': - case '4': - case '5': - case '6': - case '7': - case '8': - case '9': { - if (event.metaKey || event.ctrlKey) { - const index = Number(event.key); - const musicbill = musicbillList[index - 1] as Musicbill | undefined; - if (musicbill) { - event.preventDefault(); + case '1': + case '2': + case '3': + case '4': + case '5': + case '6': + case '7': + case '8': + case '9': { + if (event.metaKey || event.ctrlKey) { + const index = Number(event.key); + const musicbill = musicbillList[index - 1] as + | Musicbill + | undefined; + if (musicbill) { + event.preventDefault(); - navigate({ - path: - ROOT_PATH.PLAYER + - PLAYER_PATH.MUSICBILL.replace(':id', musicbill.id), - }); + navigate({ + path: + ROOT_PATH.PLAYER + + PLAYER_PATH.MUSICBILL.replace(':id', musicbill.id), + }); + } } } } - } - }; - window.addEventListener('keydown', onKeyDown); - return () => window.removeEventListener('keydown', onKeyDown); + }; + window.addEventListener('keydown', onKeyDown); + return () => window.removeEventListener('keydown', onKeyDown); + } }, [navigate, paused, queueMusic, musicbillList]); }; diff --git a/apps/pwa/webpack/base.js b/apps/pwa/webpack/base.js index 06b7d5bf..1fd46833 100644 --- a/apps/pwa/webpack/base.js +++ b/apps/pwa/webpack/base.js @@ -148,10 +148,6 @@ const devMainConfig = { plugins: [...mainConfig.plugins, new ForkTsCheckerWebpackPlugin()], devServer: { port: 8001, - hot: true, - devMiddleware: { - // writeToDisk: true, - }, }, }; From 321e074f4475407e1bf3e48581ead2cb41432e26 Mon Sep 17 00:00:00 2001 From: mebtte Date: Thu, 12 Oct 2023 14:23:30 +0800 Subject: [PATCH 7/7] add source code deployment add source code deployment add source code deployment --- apps/cli/src/commands/start_server/index.ts | 10 +--- apps/cli/src/commands/start_server/pwa_app.ts | 8 +++- apps/pwa/src/i18n/en_us.ts | 2 +- readme.md | 46 ++++++++++++++++--- 4 files changed, 48 insertions(+), 18 deletions(-) diff --git a/apps/cli/src/commands/start_server/index.ts b/apps/cli/src/commands/start_server/index.ts index 9050ea73..15b0f04c 100644 --- a/apps/cli/src/commands/start_server/index.ts +++ b/apps/cli/src/commands/start_server/index.ts @@ -6,7 +6,6 @@ import cors from '@koa/cors'; import mount from 'koa-mount'; import { PathPrefix } from '#/constants'; import { updateConfig, getConfig, Config, Mode } from '@/config'; -import definition from '@/definition'; import initialize from './initialize'; import startSchedule from './schedule'; import { getAssetApp } from './asset_app'; @@ -61,14 +60,7 @@ export default async ({ server.use(mount(`/${PathPrefix.FORM}`, getFormApp())); server.use(mount(`/${PathPrefix.API}`, getApiApp())); server.use(mount(`/${PathPrefix.BASE}`, getBaseApp())); - - /** - * 非构建模式下不用托管 pwa - * @author mebtte - */ - if (definition.BUILT) { - server.use(mount('/', getPwaApp())); - } + server.use(mount('/', getPwaApp())); http.createServer(server.callback()).listen(getConfig().port); }; diff --git a/apps/cli/src/commands/start_server/pwa_app.ts b/apps/cli/src/commands/start_server/pwa_app.ts index 6a4a5c91..59fc365f 100644 --- a/apps/cli/src/commands/start_server/pwa_app.ts +++ b/apps/cli/src/commands/start_server/pwa_app.ts @@ -2,10 +2,16 @@ import path from 'path'; import Koa from 'koa'; import serve from 'koa-static'; import etag from 'koa-etag'; +import definition from '@/definition'; export function getPwaApp() { const app = new Koa(); app.use(etag()); - app.use(serve(path.join(__dirname, 'pwa'))); + + if (definition.BUILT) { + app.use(serve(path.join(__dirname, 'pwa'))); + } else { + app.use(serve(path.join(__dirname, '../../../../../dist/pwa'))); + } return app; } diff --git a/apps/pwa/src/i18n/en_us.ts b/apps/pwa/src/i18n/en_us.ts index ad08cb51..7b116a6d 100644 --- a/apps/pwa/src/i18n/en_us.ts +++ b/apps/pwa/src/i18n/en_us.ts @@ -113,7 +113,7 @@ export default { empty_playlist: 'empty playlist', next_music: 'next music', failed_to_play: 'failed to play', - auto_play_next_after_seconds: 'audo play next after %s1 seconds', + auto_play_next_after_seconds: 'auto play next after %s1 seconds', can_not_connect_to_server_temporarily: 'can not connect to server temporarily', music_type_short: 'type', diff --git a/readme.md b/readme.md index 0b858ce4..26d9bda9 100644 --- a/readme.md +++ b/readme.md @@ -28,30 +28,42 @@ A multi-user music service for self-hosting. If you migrate to v2 from v1, you must upgrade data before serving: +#### Binary + ```sh cicada data-upgrade ``` -Also docker: +#### Docker: ```sh # --user {uid}:{gid} to map user docker run -it --rm -v :/data mebtte/cicada:v2 data-upgrade /data ``` +#### Source Code + +```sh +npm start -- data-upgrade +``` + ### [From v0 to v1](https://github.com/mebtte/cicada/tree/v1#from-v0-to-v1) ## Deployment -Download cicada from [releases](https://github.com/mebtte/cicada/releases) and start server: +You can deploy cicada by under options, and initial user of cicada is `username:cicada/password:cicada`: + +### Binary -> If your platform isn't x64, you can [build cicada](./docs/build/index.md) by yourself +Download from [releases](https://github.com/mebtte/cicada/releases) and start server: + +> If your platform isn't x64, you can [build](./docs/build/index.md) by yourself ```sh ./cicada start ``` -Open `localhost:8000` or `{{ip}}:8000` and use `username:cicada/password:cicada` to login. You can get more options by running `cicada start -h` or `cicada -h`. +Now cicada is available on `localhost:8000` or `{{ip}}:8000`. You can get more options by running `cicada start -h` or `cicada -h`. ### Docker @@ -66,9 +78,9 @@ docker run \ start --port 8000 --data /data ``` -Also you can use `--user {uid}:{gid}` to map user. +You can use `--user {uid}:{gid}` to map user. -### Docker compose example +### Docker Compose ```yml services: @@ -87,7 +99,27 @@ services: - /path/data:/data ``` -## Music import +### Source Code + +When using source code to deploy, you should install [Node>=18](https://nodejs.org) first. + +```sh +git clone https://github.com/mebtte/cicada.git +cd cicada +npm ci +npm run build:pwa +npm start -- -- start --port --data # attention: double -- +``` + +When needing to upgrade, you should run below commands: + +```sh +git pull # pull the latest code +npm run build:pwa # rebuild pwa +npm start -- -- start --port --data # restart the server +``` + +## Import music You can use `cicada import` to import music file and music directory, but the filename must to fit the blow format: