enhance(frontend): ウィジェットの設定項目の多言語対応

This commit is contained in:
kakkokari-gtyih 2025-12-25 16:42:42 +09:00
parent 74e847a04d
commit 6844a4dd6a
27 changed files with 253 additions and 17 deletions

View File

@ -2601,6 +2601,42 @@ _widgets:
clicker: "クリッカー"
birthdayFollowings: "今日誕生日のユーザー"
chat: "ダイレクトメッセージ"
_options:
showHeader: "ヘッダーを表示"
transparent: "背景を透明にする"
height: "高さ"
_button:
colored: "色付きボタン"
_clock:
size: "サイズ"
thickness: "指針の太さ"
thicknessThin: "細い"
thicknessMedium: "普通"
thicknessThick: "太い"
graduations: "文字盤の目盛り"
graduationDots: "ドット"
graduationNumbers: "数字"
fadeGraduations: "時針が指している目盛り周辺のみ表示"
sAnimation: "秒針のアニメーション"
sAnimationElastic: "リアル"
sAnimationEaseOut: "滑らか"
twentyFour: "24時間表示"
labelTime: "時刻"
labelTz: "タイムゾーン"
labelTimeAndTz: "時刻とタイムゾーン"
timezone: "タイムゾーン"
showMs: "ミリ秒を表示"
showLabel: "ラベルを表示"
_jobQueue:
sound: "音を鳴らす"
_rss:
url: "RSSフィードのURL"
refreshIntervalSec: "更新間隔(秒)"
maxEntries: "最大表示件数"
_rssTicker:
shuffle: "表示順をシャッフル"
duration: "ティッカーのスクロール速度(秒)"
reverse: "逆方向にスクロール"
_cw:
hide: "隠す"

View File

@ -38,10 +38,12 @@ const name = 'activity';
const widgetPropsDef = {
showHeader: {
type: 'boolean',
label: i18n.ts._widgets._options.showHeader,
default: true,
},
transparent: {
type: 'boolean',
label: i18n.ts._widgets._options.transparent,
default: false,
},
view: {

View File

@ -12,6 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { onMounted, onUnmounted, useTemplateRef } from 'vue';
import { useWidgetPropsManager } from './widget.js';
import { i18n } from '@/i18n.js';
import type { WidgetComponentProps, WidgetComponentEmits, WidgetComponentExpose } from './widget.js';
import type { FormWithDefault, GetFormResultType } from '@/utility/form.js';
@ -20,6 +21,7 @@ const name = 'ai';
const widgetPropsDef = {
transparent: {
type: 'boolean',
label: i18n.ts._widgets._options.transparent,
default: false,
},
} satisfies FormWithDefault;

View File

@ -37,10 +37,12 @@ const name = 'aiscript';
const widgetPropsDef = {
showHeader: {
type: 'boolean',
label: i18n.ts._widgets._options.showHeader,
default: true,
},
script: {
type: 'string',
label: i18n.ts.script,
multiline: true,
default: '(1 + 1)',
hidden: true,

View File

@ -24,6 +24,7 @@ import type { AsUiComponent, AsUiRoot } from '@/aiscript/ui.js';
import * as os from '@/os.js';
import { aiScriptReadline, createAiScriptEnv } from '@/aiscript/api.js';
import { $i } from '@/i.js';
import { i18n } from '@/i18n.js';
import MkAsUi from '@/components/MkAsUi.vue';
import MkContainer from '@/components/MkContainer.vue';
import { registerAsUiLib } from '@/aiscript/ui.js';
@ -33,11 +34,13 @@ const name = 'aiscriptApp';
const widgetPropsDef = {
script: {
type: 'string',
label: i18n.ts.script,
multiline: true,
default: '',
},
showHeader: {
type: 'boolean',
label: i18n.ts._widgets._options.showHeader,
default: true,
},
} satisfies FormWithDefault;

View File

@ -33,11 +33,12 @@ import { misskeyApi } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js';
import { $i } from '@/i.js';
const name = i18n.ts._widgets.birthdayFollowings;
const name = 'birthdayFollowings';
const widgetPropsDef = {
showHeader: {
type: 'boolean',
label: i18n.ts._widgets._options.showHeader,
default: true,
},
} satisfies FormWithDefault;

View File

@ -20,20 +20,24 @@ import * as os from '@/os.js';
import { aiScriptReadline, createAiScriptEnv } from '@/aiscript/api.js';
import { $i } from '@/i.js';
import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n.js';
const name = 'button';
const widgetPropsDef = {
label: {
type: 'string',
label: i18n.ts.label,
default: 'BUTTON',
},
colored: {
type: 'boolean',
label: i18n.ts._widgets._options._button.colored,
default: true,
},
script: {
type: 'string',
label: i18n.ts.script,
multiline: true,
default: 'Mk:dialog("hello" "world")',
},

View File

@ -50,6 +50,7 @@ const name = 'calendar';
const widgetPropsDef = {
transparent: {
type: 'boolean',
label: i18n.ts._widgets._options.transparent,
default: false,
},
} satisfies FormWithDefault;

View File

@ -29,6 +29,7 @@ const name = 'chat';
const widgetPropsDef = {
showHeader: {
type: 'boolean',
label: i18n.ts._widgets._options.showHeader,
default: true,
},
} satisfies FormWithDefault;

View File

@ -15,6 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import { useWidgetPropsManager } from './widget.js';
import type { WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
import type { FormWithDefault, GetFormResultType } from '@/utility/form.js';
import { i18n } from '@/i18n.js';
import MkContainer from '@/components/MkContainer.vue';
import MkClickerGame from '@/components/MkClickerGame.vue';
@ -23,6 +24,7 @@ const name = 'clicker';
const widgetPropsDef = {
showHeader: {
type: 'boolean',
label: i18n.ts._widgets._options.showHeader,
default: false,
},
} satisfies FormWithDefault;

View File

@ -44,10 +44,12 @@ const name = 'clock';
const widgetPropsDef = {
transparent: {
type: 'boolean',
label: i18n.ts._widgets._options.transparent,
default: false,
},
size: {
type: 'radio',
label: i18n.ts._widgets._options._clock.size,
default: 'medium',
options: [{
value: 'small' as const,
@ -62,79 +64,86 @@ const widgetPropsDef = {
},
thickness: {
type: 'radio',
label: i18n.ts._widgets._options._clock.thickness,
default: 0.2,
options: [{
value: 0.1 as const,
label: 'thin',
label: i18n.ts._widgets._options._clock.thicknessThin,
}, {
value: 0.2 as const,
label: 'medium',
label: i18n.ts._widgets._options._clock.thicknessMedium,
}, {
value: 0.3 as const,
label: 'thick',
label: i18n.ts._widgets._options._clock.thicknessThick,
}],
},
graduations: {
type: 'radio',
label: i18n.ts._widgets._options._clock.graduations,
default: 'numbers',
options: [{
value: 'none' as const,
label: 'None',
label: i18n.ts.none,
}, {
value: 'dots' as const,
label: 'Dots',
label: i18n.ts._widgets._options._clock.graduationDots,
}, {
value: 'numbers' as const,
label: 'Numbers',
label: i18n.ts._widgets._options._clock.graduationNumbers,
}],
},
fadeGraduations: {
type: 'boolean',
label: i18n.ts._widgets._options._clock.fadeGraduations,
default: true,
},
sAnimation: {
type: 'radio',
label: i18n.ts._widgets._options._clock.sAnimation,
default: 'elastic',
options: [{
value: 'none' as const,
label: 'None',
label: i18n.ts.none,
}, {
value: 'elastic' as const,
label: 'Elastic',
label: i18n.ts._widgets._options._clock.sAnimationElastic,
}, {
value: 'easeOut' as const,
label: 'Ease out',
label: i18n.ts._widgets._options._clock.sAnimationEaseOut,
}],
},
twentyFour: {
type: 'boolean',
label: i18n.ts._widgets._options._clock.twentyFour,
default: false,
},
label: {
type: 'radio',
label: i18n.ts.label,
default: 'none',
options: [{
value: 'none' as const,
label: 'None',
label: i18n.ts.none,
}, {
value: 'time' as const,
label: 'Time',
label: i18n.ts._widgets._options._clock.labelTime,
}, {
value: 'tz' as const,
label: 'TZ',
label: i18n.ts._widgets._options._clock.labelTz,
}, {
value: 'timeAndTz' as const,
label: 'Time + TZ',
label: i18n.ts._widgets._options._clock.labelTimeAndTz,
}],
},
timezone: {
type: 'enum',
label: i18n.ts._widgets._options._clock.timezone,
default: null,
enum: [...timezones.map((tz) => ({
label: tz.name,
value: tz.name.toLowerCase(),
})), {
label: '(auto)',
label: i18n.ts.auto,
value: null,
}],
},

View File

@ -19,6 +19,7 @@ import { useWidgetPropsManager } from './widget.js';
import type { WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
import type { FormWithDefault, GetFormResultType } from '@/utility/form.js';
import { timezones } from '@/utility/timezones.js';
import { i18n } from '@/i18n.js';
import MkDigitalClock from '@/components/MkDigitalClock.vue';
const name = 'digitalClock';
@ -26,29 +27,34 @@ const name = 'digitalClock';
const widgetPropsDef = {
transparent: {
type: 'boolean',
label: i18n.ts._widgets._options.transparent,
default: false,
},
fontSize: {
type: 'number',
label: i18n.ts.fontSize,
default: 1.5,
step: 0.1,
},
showMs: {
type: 'boolean',
label: i18n.ts._widgets._options._clock.showMs,
default: true,
},
showLabel: {
type: 'boolean',
label: i18n.ts._widgets._options._clock.showLabel,
default: true,
},
timezone: {
type: 'enum',
label: i18n.ts._widgets._options._clock.timezone,
default: null,
enum: [...timezones.map((tz) => ({
label: tz.name,
value: tz.name.toLowerCase(),
})), {
label: '(auto)',
label: i18n.ts.auto,
value: null,
}],
},

View File

@ -43,6 +43,7 @@ const name = 'federation';
const widgetPropsDef = {
showHeader: {
type: 'boolean',
label: i18n.ts._widgets._options.showHeader,
default: true,
},
} satisfies FormWithDefault;

View File

@ -29,12 +29,14 @@ import MkTagCloud from '@/components/MkTagCloud.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js';
import { i18n } from '@/i18n.js';
const name = 'instanceCloud';
const widgetPropsDef = {
transparent: {
type: 'boolean',
label: i18n.ts._widgets._options.transparent,
default: false,
},
} satisfies FormWithDefault;

View File

@ -61,16 +61,19 @@ import * as sound from '@/utility/sound.js';
import { deepClone } from '@/utility/clone.js';
import { prefer } from '@/preferences.js';
import { genId } from '@/utility/id.js';
import { i18n } from '@/i18n.js';
const name = 'jobQueue';
const widgetPropsDef = {
transparent: {
type: 'boolean',
label: i18n.ts._widgets._options.transparent,
default: false,
},
sound: {
type: 'boolean',
label: i18n.ts._widgets._options._jobQueue.sound,
default: false,
},
} satisfies FormWithDefault;

View File

@ -29,10 +29,12 @@ const name = 'memo';
const widgetPropsDef = {
showHeader: {
type: 'boolean',
label: i18n.ts._widgets._options.showHeader,
default: true,
},
height: {
type: 'number',
label: i18n.ts.height,
default: 100,
},
} satisfies FormWithDefault;

View File

@ -31,10 +31,12 @@ const name = 'notifications';
const widgetPropsDef = {
showHeader: {
type: 'boolean',
label: i18n.ts._widgets._options.showHeader,
default: true,
},
height: {
type: 'number',
label: i18n.ts.height,
default: 300,
},
excludeTypes: {

View File

@ -28,6 +28,7 @@ const name = 'onlineUsers';
const widgetPropsDef = {
transparent: {
type: 'boolean',
label: i18n.ts._widgets._options.transparent,
default: true,
},
} satisfies FormWithDefault;

View File

@ -39,10 +39,12 @@ const name = 'photos';
const widgetPropsDef = {
showHeader: {
type: 'boolean',
label: i18n.ts._widgets._options.showHeader,
default: true,
},
transparent: {
type: 'boolean',
label: i18n.ts._widgets._options.transparent,
default: false,
},
} satisfies FormWithDefault;

View File

@ -35,18 +35,22 @@ const name = 'rss';
const widgetPropsDef = {
url: {
type: 'string',
label: i18n.ts._widgets._options._rss.url,
default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
},
refreshIntervalSec: {
type: 'number',
label: i18n.ts._widgets._options._rss.refreshIntervalSec,
default: 60,
},
maxEntries: {
type: 'number',
label: i18n.ts._widgets._options._rss.maxEntries,
default: 15,
},
showHeader: {
type: 'boolean',
label: i18n.ts._widgets._options.showHeader,
default: true,
},
} satisfies FormWithDefault;

View File

@ -35,6 +35,7 @@ import MkMarqueeText from '@/components/MkMarqueeText.vue';
import type { FormWithDefault, GetFormResultType } from '@/utility/form.js';
import MkContainer from '@/components/MkContainer.vue';
import { shuffle } from '@/utility/shuffle.js';
import { i18n } from '@/i18n.js';
import { url as base } from '@@/js/config.js';
import { useInterval } from '@@/js/use-interval.js';
@ -43,22 +44,27 @@ const name = 'rssTicker';
const widgetPropsDef = {
url: {
type: 'string',
label: i18n.ts._widgets._options._rss.url,
default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
},
shuffle: {
type: 'boolean',
label: i18n.ts._widgets._options._rssTicker.shuffle,
default: true,
},
refreshIntervalSec: {
type: 'number',
label: i18n.ts._widgets._options._rss.refreshIntervalSec,
default: 60,
},
maxEntries: {
type: 'number',
label: i18n.ts._widgets._options._rss.maxEntries,
default: 15,
},
duration: {
type: 'range',
label: i18n.ts._widgets._options._rssTicker.duration,
default: 70,
step: 1,
min: 5,
@ -66,14 +72,17 @@ const widgetPropsDef = {
},
reverse: {
type: 'boolean',
label: i18n.ts._widgets._options._rssTicker.reverse,
default: false,
},
showHeader: {
type: 'boolean',
label: i18n.ts._widgets._options.showHeader,
default: false,
},
transparent: {
type: 'boolean',
label: i18n.ts._widgets._options.transparent,
default: false,
},
} satisfies FormWithDefault;

View File

@ -33,6 +33,7 @@ const name = 'slideshow';
const widgetPropsDef = {
height: {
type: 'number',
label: i18n.ts._widgets._options.height,
default: 300,
},
folderId: {

View File

@ -41,6 +41,7 @@ const name = 'hashtags';
const widgetPropsDef = {
showHeader: {
type: 'boolean',
label: i18n.ts._widgets._options.showHeader,
default: true,
},
} satisfies FormWithDefault;

View File

@ -18,6 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { onUnmounted, ref, watch } from 'vue';
import { useWidgetPropsManager } from './widget.js';
import { i18n } from '@/i18n.js';
import type { WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
import type { FormWithDefault, GetFormResultType } from '@/utility/form.js';
@ -26,19 +27,23 @@ const name = 'unixClock';
const widgetPropsDef = {
transparent: {
type: 'boolean',
label: i18n.ts._widgets._options.transparent,
default: false,
},
fontSize: {
type: 'number',
label: i18n.ts.fontSize,
default: 1.5,
step: 0.1,
},
showMs: {
type: 'boolean',
label: i18n.ts._widgets._options._clock.showMs,
default: true,
},
showLabel: {
type: 'boolean',
label: i18n.ts._widgets._options._clock.showLabel,
default: true,
},
} satisfies FormWithDefault;

View File

@ -41,6 +41,7 @@ const name = 'userList';
const widgetPropsDef = {
showHeader: {
type: 'boolean',
label: i18n.ts._widgets._options.showHeader,
default: true,
},
listId: {

View File

@ -9,6 +9,7 @@ import { throttle } from 'throttle-debounce';
import type { FormWithDefault, GetFormResultType } from '@/utility/form.js';
import * as os from '@/os.js';
import { deepClone } from '@/utility/clone.js';
import { i18n } from '@/i18n';
export type Widget<P extends Record<string, unknown>> = {
id: string;
@ -62,7 +63,7 @@ export const useWidgetPropsManager = <F extends FormWithDefault>(
for (const item of Object.keys(form)) {
form[item].default = widgetProps[item];
}
const { canceled, result } = await os.form(name, form);
const { canceled, result } = await os.form(i18n.ts._widgets[name] ?? name, form);
if (canceled) return;
for (const key of Object.keys(result)) {

View File

@ -9888,6 +9888,138 @@ export interface Locale extends ILocale {
*
*/
"chat": string;
"_options": {
/**
*
*/
"showHeader": string;
/**
*
*/
"transparent": string;
/**
*
*/
"height": string;
"_button": {
/**
*
*/
"colored": string;
};
"_clock": {
/**
*
*/
"size": string;
/**
*
*/
"thickness": string;
/**
*
*/
"thicknessThin": string;
/**
*
*/
"thicknessMedium": string;
/**
*
*/
"thicknessThick": string;
/**
*
*/
"graduations": string;
/**
*
*/
"graduationDots": string;
/**
*
*/
"graduationNumbers": string;
/**
*
*/
"fadeGraduations": string;
/**
*
*/
"sAnimation": string;
/**
*
*/
"sAnimationElastic": string;
/**
*
*/
"sAnimationEaseOut": string;
/**
* 24
*/
"twentyFour": string;
/**
*
*/
"labelTime": string;
/**
*
*/
"labelTz": string;
/**
*
*/
"labelTimeAndTz": string;
/**
*
*/
"timezone": string;
/**
*
*/
"showMs": string;
/**
*
*/
"showLabel": string;
};
"_jobQueue": {
/**
*
*/
"sound": string;
};
"_rss": {
/**
* RSSフィードのURL
*/
"url": string;
/**
* ()
*/
"refreshIntervalSec": string;
/**
*
*/
"maxEntries": string;
};
"_rssTicker": {
/**
*
*/
"shuffle": string;
/**
* ()
*/
"duration": string;
/**
*
*/
"reverse": string;
};
};
};
"_cw": {
/**