+
-
+
+
-
+ 品质
+
+
-
+
{{ partName(part) }}
@@ -66,4 +62,26 @@ const partName = (part: string) => {
}
-
+
diff --git a/frontend-ui/src/components/dnf/Emblem/List/index.vue b/frontend-ui/src/components/dnf/Emblem/List/index.vue
index eb118342..cf481a6b 100644
--- a/frontend-ui/src/components/dnf/Emblem/List/index.vue
+++ b/frontend-ui/src/components/dnf/Emblem/List/index.vue
@@ -1,18 +1,19 @@
-
+
-
+
![]()
- ![]()
+ ![]()
@@ -102,7 +103,6 @@ const lvStyle = computed(() => {
const infoStyle = computed(() => {
return (part: string) => {
- console.log(`url(${rarityIcon.value(part)}),url(${partIcon.value(part)})`)
return {
left: `${position[part as keyof typeof position].x}px`,
top: `${position[part as keyof typeof position].y}px`,
@@ -129,6 +129,35 @@ const choosePart = (part: string) => {
diff --git a/frontend-ui/src/components/dnf/Equipment/Info/index.vue b/frontend-ui/src/components/dnf/Equipment/Info/index.vue
index 1d09bc52..4b80b4e8 100644
--- a/frontend-ui/src/components/dnf/Equipment/Info/index.vue
+++ b/frontend-ui/src/components/dnf/Equipment/Info/index.vue
@@ -1,51 +1,37 @@
-
-
-
-
+
+
+
+
-
-
- {{ props.equipment?.name }}
- {{ props.equipment?.categorize }}
+
+
{{ props.equipment?.name }}
+ {{ props.equipment?.categorize }}
+
+
-
-
{{ props.equipment?.rarity }}
- {{ props.equipment?.itemDetailType }}
+ {{ props.equipment?.itemDetailType }}
-
+
+
+
-
-
-
+
+
+
-
-
-
@@ -93,7 +79,7 @@ const mainAttr = computed(() => {
const detail = computed(() =>
props.equipment?.detail?.replace(
/\[(?![^\]]*技能)[^[\]]+\]/g,
- (match) => `${match}`,
+ (match) => `${match}`,
),
)
@@ -102,14 +88,114 @@ const bufferDetail = computed(() => {
if (!detail || detail == '-') return undefined
return props.equipment?.bufferDetail.replace(
/\[(?![^\]]*技能)[^[\]]+\]/g,
- (match) => `${match}`,
+ (match) => `${match}`,
)
})
diff --git a/frontend-ui/src/components/dnf/Equipment/List/index.vue b/frontend-ui/src/components/dnf/Equipment/List/index.vue
index 3363dd0b..09fcc712 100644
--- a/frontend-ui/src/components/dnf/Equipment/List/index.vue
+++ b/frontend-ui/src/components/dnf/Equipment/List/index.vue
@@ -1,14 +1,10 @@
辅助职业专属属性
-
+
+
+
辅助职业专属属性
+
-
+
![Avatar]()
+ ![Avatar]()
@@ -108,13 +95,10 @@ const infoStyle = (part: string) => {
x += (index % 2) * 39
y += Math.floor(index / 2) * 34
- const style = {
- left: `${x}px`,
- top: `${y}px`,
- zIndex: 6,
- // fontWeight: 900,
+ return {
+ '--ui-equipment-slot-left': `${x}px`,
+ '--ui-equipment-slot-top': `${y}px`,
}
- return style
}
// const fusionStyle = (part: string) => {
@@ -152,4 +136,50 @@ const partName = (part: string) => {
}
-
+
diff --git a/frontend-ui/src/components/dnf/Equipment/Oath/index.vue b/frontend-ui/src/components/dnf/Equipment/Oath/index.vue
index ed3f80c2..71116698 100644
--- a/frontend-ui/src/components/dnf/Equipment/Oath/index.vue
+++ b/frontend-ui/src/components/dnf/Equipment/Oath/index.vue
@@ -1,14 +1,10 @@
@@ -31,12 +23,7 @@
副武
-
-
+
@@ -158,20 +145,12 @@ const positionSimple = [
]
const infoStyle = (part: string) => {
- if (props.withBg)
- return {
- left: `${position[parseInt(part)].x}px`,
- top: `${position[parseInt(part)].y}px`,
- zIndex: 6,
- // fontWeight: 900,
- }
- else
- return {
- left: `${positionSimple[parseInt(part)].x}px`,
- top: `${positionSimple[parseInt(part)].y}px`,
- zIndex: 6,
- // fontWeight: 900,
- }
+ const coordinates = (props.withBg ? position : positionSimple)[Number.parseInt(part)]
+
+ return {
+ '--ui-equipment-slot-left': `${coordinates.x}px`,
+ '--ui-equipment-slot-top': `${coordinates.y}px`,
+ }
}
const choosePart = (part: string) => {
@@ -179,4 +158,32 @@ const choosePart = (part: string) => {
}
-
+
diff --git a/frontend-ui/src/components/dnf/Equipment/PartSelect/index.vue b/frontend-ui/src/components/dnf/Equipment/PartSelect/index.vue
index e70f816f..dccbba91 100644
--- a/frontend-ui/src/components/dnf/Equipment/PartSelect/index.vue
+++ b/frontend-ui/src/components/dnf/Equipment/PartSelect/index.vue
@@ -1,16 +1,19 @@
-
-
+
+
diff --git a/frontend-ui/src/components/dnf/Equipment/SuitInfo/index.vue b/frontend-ui/src/components/dnf/Equipment/SuitInfo/index.vue
index efd6968e..513a0c4c 100644
--- a/frontend-ui/src/components/dnf/Equipment/SuitInfo/index.vue
+++ b/frontend-ui/src/components/dnf/Equipment/SuitInfo/index.vue
@@ -1,21 +1,11 @@
-
-
+
-
+
+
-
-
+
+
![装备图标]()
@@ -23,25 +13,22 @@
-
+
-
{{ props.suit?.name }}
{{ props.suit?.point }}点
-
+
+
-
-
-
+
+
@@ -87,14 +87,14 @@ export const useDialog = createSharedComposable(() => {
return id
}
- function close(id: DialogID, status = 'cancel', duration = 400) {
+ function close(id: DialogID, status: DialogResult['status'] = 'cancel', duration = 400) {
const dialog = dialogs.get(id)
if (!dialog) {
return
}
dialog.resolve({
id,
- status: 'ok',
+ status,
get isOk() {
return status == 'ok'
},
@@ -119,6 +119,10 @@ export const useDialog = createSharedComposable(() => {
}
async function show(option: ShowDialogOption = {}) {
+ const activeElement = typeof document === 'undefined' ? null : document.activeElement
+ const returnFocusElement =
+ activeElement instanceof HTMLElement && activeElement !== document.body ? activeElement : null
+
return new Promise((resolve) => {
const {
id = randomId(),
@@ -145,7 +149,7 @@ export const useDialog = createSharedComposable(() => {
resolve,
render(visible = true) {
return h(
- ActionDialog,
+ UiActionDialog,
{
header,
okButton,
@@ -154,6 +158,7 @@ export const useDialog = createSharedComposable(() => {
visible,
onClose,
mask,
+ returnFocusElement,
scale,
},
{
diff --git a/frontend-ui/src/components/ui/button/UiButton.vue b/frontend-ui/src/components/ui/button/UiButton.vue
index ef832721..2ac2b875 100644
--- a/frontend-ui/src/components/ui/button/UiButton.vue
+++ b/frontend-ui/src/components/ui/button/UiButton.vue
@@ -1,4 +1,5 @@
diff --git a/frontend-ui/src/components/ui/command-input/UiCommandInput.vue b/frontend-ui/src/components/ui/command-input/UiCommandInput.vue
new file mode 100644
index 00000000..30dd3e90
--- /dev/null
+++ b/frontend-ui/src/components/ui/command-input/UiCommandInput.vue
@@ -0,0 +1,420 @@
+
+
+
+
+
+
+
+ {{ header === true ? '提示' : header }}
+
+ 提示
+ {{
+ header === true ? '提示' : header || '操作确认'
+ }}
+
+
+
+ {{ okButton === true ? '确定' : okButton }}
+
+
+ {{ rejectButton === true ? '拒绝' : rejectButton }}
+
+
+ {{ cancelButton === true ? '取消' : cancelButton }}
+
+
+
+
+
+
+
+
+
diff --git a/frontend-ui/src/components/ui/dialog/UiDialogContent.vue b/frontend-ui/src/components/ui/dialog/UiDialogContent.vue
index f099be13..5663aecf 100644
--- a/frontend-ui/src/components/ui/dialog/UiDialogContent.vue
+++ b/frontend-ui/src/components/ui/dialog/UiDialogContent.vue
@@ -13,18 +13,25 @@ const props = withDefaults(
DialogContentProps & {
class?: HTMLAttributes['class']
draggable?: boolean
+ returnFocusElement?: HTMLElement | null
}
>(),
{ draggable: true },
)
const emits = defineEmits()
const dragOffset = ref({ x: 0, y: 0 })
+const capturedReturnFocusElement = shallowRef(null)
let activePointerId: number | undefined
let dragOrigin = { clientX: 0, clientY: 0, x: 0, y: 0 }
let dragBounds = { minX: 0, maxX: 0, minY: 0, maxY: 0 }
const delegatedProps = computed(() => {
- const { class: _class, draggable: _draggable, ...delegated } = props
+ const {
+ class: _class,
+ draggable: _draggable,
+ returnFocusElement: _returnFocusElement,
+ ...delegated
+ } = props
return delegated
})
@@ -51,6 +58,36 @@ function resetPosition() {
dragOffset.value = { x: 0, y: 0 }
}
+function handleOpenAutoFocus() {
+ resetPosition()
+ if (props.returnFocusElement) return
+
+ const activeElement = document.activeElement
+ capturedReturnFocusElement.value =
+ activeElement instanceof HTMLElement && activeElement !== document.body ? activeElement : null
+}
+
+function handleCloseAutoFocus(event: Event) {
+ if (event.defaultPrevented) {
+ capturedReturnFocusElement.value = null
+ return
+ }
+
+ const explicitTarget = props.returnFocusElement
+ const capturedTarget = capturedReturnFocusElement.value
+ const target = explicitTarget?.isConnected
+ ? explicitTarget
+ : capturedTarget?.isConnected
+ ? capturedTarget
+ : null
+
+ capturedReturnFocusElement.value = null
+ if (!target) return
+
+ event.preventDefault()
+ nextTick(() => target.focus({ preventScroll: true }))
+}
+
function handlePointerMove(event: PointerEvent) {
if (activePointerId !== event.pointerId) return
const deltaX = event.clientX - dragOrigin.clientX
@@ -106,7 +143,8 @@ onBeforeUnmount(() => {
:style="dragStyle"
:data-draggable="draggable ? '' : undefined"
@pointerdown="handlePointerDown"
- @open-auto-focus="resetPosition"
+ @open-auto-focus="handleOpenAutoFocus"
+ @close-auto-focus="handleCloseAutoFocus"
:class="
cn(
'ui-dialog-content fixed left-1/2 top-1/2 z-50 grid outline-none data-[state=closed]:animate-[dialog-out_120ms_ease-in] data-[state=open]:animate-[dialog-in_160ms_ease-out]',
@@ -120,8 +158,12 @@ onBeforeUnmount(() => {
diff --git a/frontend-ui/src/components/ui/favorite-drawer/index.ts b/frontend-ui/src/components/ui/favorite-drawer/index.ts
new file mode 100644
index 00000000..05880007
--- /dev/null
+++ b/frontend-ui/src/components/ui/favorite-drawer/index.ts
@@ -0,0 +1,2 @@
+export { default as UiFavoriteDrawer } from './UiFavoriteDrawer.vue'
+export type { UiFavoriteDrawerItem } from './UiFavoriteDrawer.vue'
diff --git a/frontend-ui/src/components/ui/notice-badge/UiLevelBadge.vue b/frontend-ui/src/components/ui/notice-badge/UiLevelBadge.vue
new file mode 100644
index 00000000..b88bfc7b
--- /dev/null
+++ b/frontend-ui/src/components/ui/notice-badge/UiLevelBadge.vue
@@ -0,0 +1,55 @@
+
+
+
+
+ {{ level }}{{ suffix }}
+
+
+
+
diff --git a/frontend-ui/src/components/ui/notice-badge/UiNoticeBadge.vue b/frontend-ui/src/components/ui/notice-badge/UiNoticeBadge.vue
new file mode 100644
index 00000000..4544fda8
--- /dev/null
+++ b/frontend-ui/src/components/ui/notice-badge/UiNoticeBadge.vue
@@ -0,0 +1,87 @@
+
+
+
+
+
+
+
+
diff --git a/frontend-ui/src/components/ui/notice-badge/index.ts b/frontend-ui/src/components/ui/notice-badge/index.ts
new file mode 100644
index 00000000..b6669644
--- /dev/null
+++ b/frontend-ui/src/components/ui/notice-badge/index.ts
@@ -0,0 +1,2 @@
+export { default as UiLevelBadge } from './UiLevelBadge.vue'
+export { default as UiNoticeBadge } from './UiNoticeBadge.vue'
diff --git a/frontend-ui/src/components/ui/progress/UiProgress.vue b/frontend-ui/src/components/ui/progress/UiProgress.vue
index 73b862a2..6fb7935e 100644
--- a/frontend-ui/src/components/ui/progress/UiProgress.vue
+++ b/frontend-ui/src/components/ui/progress/UiProgress.vue
@@ -4,23 +4,40 @@ import { ProgressIndicator, ProgressRoot, type ProgressRootProps } from 'reka-ui
import { cn } from '@/lib/utils'
const props = withDefaults(
- defineProps(),
+ defineProps<
+ ProgressRootProps & {
+ class?: HTMLAttributes['class']
+ /** Backward-compatible single milestone. Prefer `markers` for multiple thresholds. */
+ marker?: number
+ /** Milestones expressed as percentages from 0 to 100. */
+ markers?: number[]
+ }
+ >(),
{ max: 100 },
)
const delegatedProps = computed(() => {
- const { class: _class, marker: _marker, ...delegated } = props
+ const { class: _class, marker: _marker, markers: _markers, ...delegated } = props
return delegated
})
const percentage = computed(() =>
Math.min(100, Math.max(0, ((props.modelValue ?? 0) / (props.max ?? 100)) * 100)),
)
+const visibleMarkers = computed(() => {
+ const values = props.markers ?? (props.marker == null ? [] : [props.marker])
+ return [...new Set(values.map((value) => Math.min(100, Math.max(0, value))))]
+})
diff --git a/frontend-ui/src/components/ui/search-tree/UiSearchTree.vue b/frontend-ui/src/components/ui/search-tree/UiSearchTree.vue
new file mode 100644
index 00000000..cbd2eba7
--- /dev/null
+++ b/frontend-ui/src/components/ui/search-tree/UiSearchTree.vue
@@ -0,0 +1,413 @@
+
+
+
+
+
+
+
+
+ {{ item.value.label }}
+
+
+
+
+
+
+
diff --git a/frontend-ui/src/components/ui/search-tree/index.ts b/frontend-ui/src/components/ui/search-tree/index.ts
new file mode 100644
index 00000000..7fdd5995
--- /dev/null
+++ b/frontend-ui/src/components/ui/search-tree/index.ts
@@ -0,0 +1,2 @@
+export { default as UiSearchTree } from './UiSearchTree.vue'
+export type { UiSearchTreeNode } from './UiSearchTree.vue'
diff --git a/frontend-ui/src/components/ui/settings-dropdown/UiSettingsDropdown.vue b/frontend-ui/src/components/ui/settings-dropdown/UiSettingsDropdown.vue
new file mode 100644
index 00000000..f716227a
--- /dev/null
+++ b/frontend-ui/src/components/ui/settings-dropdown/UiSettingsDropdown.vue
@@ -0,0 +1,129 @@
+
+
+
+
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
diff --git a/frontend-ui/src/components/ui/settings-dropdown/UiSettingsDropdownItem.vue b/frontend-ui/src/components/ui/settings-dropdown/UiSettingsDropdownItem.vue
new file mode 100644
index 00000000..86e5bc11
--- /dev/null
+++ b/frontend-ui/src/components/ui/settings-dropdown/UiSettingsDropdownItem.vue
@@ -0,0 +1,127 @@
+
+
+
+
+
+
+
+
+
diff --git a/frontend-ui/src/components/ui/settings-dropdown/index.ts b/frontend-ui/src/components/ui/settings-dropdown/index.ts
new file mode 100644
index 00000000..bc8aa6ba
--- /dev/null
+++ b/frontend-ui/src/components/ui/settings-dropdown/index.ts
@@ -0,0 +1,2 @@
+export { default as UiSettingsDropdown } from './UiSettingsDropdown.vue'
+export { default as UiSettingsDropdownItem } from './UiSettingsDropdownItem.vue'
diff --git a/frontend-ui/src/components/ui/tree-select/UiTreeSelect.vue b/frontend-ui/src/components/ui/tree-select/UiTreeSelect.vue
index fda3ea5d..67528db2 100644
--- a/frontend-ui/src/components/ui/tree-select/UiTreeSelect.vue
+++ b/frontend-ui/src/components/ui/tree-select/UiTreeSelect.vue
@@ -25,10 +25,15 @@ const props = withDefaults(
placeholder?: string
label?: string
disabled?: boolean
+ selectParents?: boolean
}>(),
- { placeholder: '请选择', label: '树形选择' },
+ { placeholder: '请选择', label: '树形选择', selectParents: false },
)
+const emits = defineEmits<{
+ select: [item: UiTreeSelectItem]
+}>()
+
const model = defineModel()
const open = ref(false)
const expanded = ref([])
@@ -80,13 +85,14 @@ watch(
)
function handleSelect(item: UiTreeSelectItem | undefined) {
- if (!item || item.disabled || item.children?.length) return
+ if (!item || item.disabled || (item.children?.length && !props.selectParents)) return
model.value = item.value
- open.value = false
+ emits('select', item)
+ if (!item.children?.length) open.value = false
}
function preventParentSelection(event: Event, item: UiTreeSelectItem) {
- if (item.children?.length) event.preventDefault()
+ if (item.children?.length && !props.selectParents) event.preventDefault()
}
function depthStyle(level: number): CSSProperties {
diff --git a/frontend-ui/src/components/ui/utility-sheet/UiUtilitySheet.vue b/frontend-ui/src/components/ui/utility-sheet/UiUtilitySheet.vue
new file mode 100644
index 00000000..a70ba622
--- /dev/null
+++ b/frontend-ui/src/components/ui/utility-sheet/UiUtilitySheet.vue
@@ -0,0 +1,131 @@
+
+
+
+
+
+
+
+
+
+ {{ title }}
+ {{ title }}的配置与快捷操作
+
+
+
+
+
+
+
+
+
diff --git a/frontend-ui/src/components/ui/utility-sheet/index.ts b/frontend-ui/src/components/ui/utility-sheet/index.ts
new file mode 100644
index 00000000..63b9f8e7
--- /dev/null
+++ b/frontend-ui/src/components/ui/utility-sheet/index.ts
@@ -0,0 +1 @@
+export { default as UiUtilitySheet } from './UiUtilitySheet.vue'
diff --git a/frontend-ui/src/pages/Character/Config/ImportDialog.vue b/frontend-ui/src/pages/Character/Config/ImportDialog.vue
new file mode 100644
index 00000000..24dc551d
--- /dev/null
+++ b/frontend-ui/src/pages/Character/Config/ImportDialog.vue
@@ -0,0 +1,97 @@
+
+
+
+
+
+
+
+ {{ title }}
+
+
+ {{ title }}窗口
+
+
+
+
+
+
+
diff --git a/frontend-ui/src/pages/Character/Config/import.vue b/frontend-ui/src/pages/Character/Config/import.vue
index c18e806a..bf94f9cd 100644
--- a/frontend-ui/src/pages/Character/Config/import.vue
+++ b/frontend-ui/src/pages/Character/Config/import.vue
@@ -5,6 +5,8 @@ import api from '@/api'
import { useDialog } from '@/components/hooks/dialog'
import { isShow, onShow } from '@/components/hooks/show'
import { useConfigStore } from '@/stores'
+import { UiButton } from '@/components/ui/button'
+import { UiInput } from '@/components/ui/input'
export default defineComponent({
setup() {
@@ -48,20 +50,28 @@ export default defineComponent({
return () => {
return (
<>
-
+
-
-
-
@@ -76,7 +63,7 @@ const mainAttr = computed(() => {
const detail = computed(() =>
props.suit?.value?.replace(
/\[(?![^\]]*技能)[^[\]]+\]/g,
- (match) => `${match}`,
+ (match) => `${match}`,
),
)
@@ -85,14 +72,97 @@ const bufferDetail = computed(() => {
if (!detail || detail == '-') return undefined
return props.suit?.bufferValue?.replace(
/\[(?![^\]]*技能)[^[\]]+\]/g,
- (match) => `${match}`,
+ (match) => `${match}`,
)
})
diff --git a/frontend-ui/src/components/hooks/dialog.ts b/frontend-ui/src/components/hooks/dialog.ts
index a59bb1a4..f51233b2 100644
--- a/frontend-ui/src/components/hooks/dialog.ts
+++ b/frontend-ui/src/components/hooks/dialog.ts
@@ -1,6 +1,6 @@
import { h, reactive, renderList } from 'vue'
import { createSharedComposable } from '@vueuse/core'
-import ActionDialog from '@/components/calc/action-dialog/index.vue'
+import { UiActionDialog } from '@/components/ui/dialog'
import type { JSX } from 'vue/jsx-runtime'
export type ConfirmDialogOption = Omit辅助职业专属属性
-
+
+
+
辅助职业专属属性
+
+
+
+
+
diff --git a/frontend-ui/src/components/ui/command-input/index.ts b/frontend-ui/src/components/ui/command-input/index.ts
new file mode 100644
index 00000000..2beaa275
--- /dev/null
+++ b/frontend-ui/src/components/ui/command-input/index.ts
@@ -0,0 +1,2 @@
+export { default as UiCommandInput } from './UiCommandInput.vue'
+export type { UiCommandInputOption } from './UiCommandInput.vue'
diff --git a/frontend-ui/src/components/ui/data-table/UiDataTable.vue b/frontend-ui/src/components/ui/data-table/UiDataTable.vue
index 5b3f24d4..02d16a4a 100644
--- a/frontend-ui/src/components/ui/data-table/UiDataTable.vue
+++ b/frontend-ui/src/components/ui/data-table/UiDataTable.vue
@@ -1,5 +1,5 @@
-
+
+ {{ prefix }}
+
+
+
+
+
+
+
+
+
+
+
@@ -81,6 +171,17 @@ const gridTemplate = computed(() => props.columns.map((column) => column.width ?
color: var(--ui-table-foreground);
}
+.ui-data-table__body {
+ min-width: var(--ui-table-scroll-inline-size);
+}
+
+.ui-data-table.has-constrained-body .ui-data-table__body {
+ max-height: var(--ui-table-body-max-block-size);
+ overflow-y: auto;
+ scrollbar-color: var(--ui-scrollbar-thumb-border) var(--ui-scrollbar-background);
+ scrollbar-width: thin;
+}
+
.ui-data-table__row {
display: grid;
width: 100%;
@@ -97,26 +198,31 @@ const gridTemplate = computed(() => props.columns.map((column) => column.width ?
min-width: var(--ui-table-scroll-inline-size);
}
-button.ui-data-table__row {
+.ui-data-table__data-row.is-selectable {
cursor: pointer;
}
-button.ui-data-table__row:focus-visible {
+.ui-data-table__data-row.is-selectable:focus-visible {
outline: 1px solid var(--ui-ring);
outline-offset: -2px;
}
-button.ui-data-table__row:nth-child(odd) {
+.ui-data-table__data-row:nth-child(odd) {
background: var(--ui-row-background);
}
-button.ui-data-table__row:hover {
+.ui-data-table__data-row.is-selectable:hover {
background: var(--ui-table-row-hover);
outline: 1px solid var(--ui-table-row-hover-outline);
outline-offset: -1px;
}
-button.ui-data-table__row.is-selected {
- background: var(--ui-table-row-selected);
- outline: 1px solid var(--ui-table-row-selected-outline);
+.ui-data-table__data-row.is-selected {
+ background: var(--ui-table-selected-background);
+ outline: 1px solid var(--ui-table-selected-outline);
outline-offset: -1px;
- box-shadow: inset 0 0 0 1px var(--ui-table-row-selected-inset);
+ box-shadow: inset 0 0 0 1px var(--ui-table-selected-inset);
+}
+
+.ui-data-table__data-row.is-disabled {
+ color: var(--ui-control-disabled-foreground);
+ opacity: 0.56;
}
.ui-data-table__row > * {
@@ -132,6 +238,16 @@ button.ui-data-table__row.is-selected {
white-space: nowrap;
}
+.ui-data-table__row > .is-align-center {
+ justify-content: center;
+ text-align: center;
+}
+
+.ui-data-table__row > .is-align-end {
+ justify-content: flex-end;
+ text-align: right;
+}
+
.ui-data-table__header {
min-height: var(--ui-table-header-block-size);
height: var(--ui-table-header-block-size);
@@ -172,4 +288,57 @@ button.ui-data-table__row.is-selected {
.ui-data-table__sort[aria-sort='descending'] i {
transform: rotate(180deg);
}
+
+.ui-data-table--selection-gold {
+ --ui-table-selected-background: var(--ui-table-row-selected);
+ --ui-table-selected-outline: var(--ui-table-row-selected-outline);
+ --ui-table-selected-inset: var(--ui-table-row-selected-inset);
+}
+
+.ui-data-table--selection-blue {
+ --ui-table-selected-background: var(--ui-table-row-hover);
+ --ui-table-selected-outline: var(--ui-table-row-hover-outline);
+ --ui-table-selected-inset: var(--ui-table-row-hover-outline);
+}
+
+.ui-data-table--compact .ui-data-table__data-row {
+ min-height: var(--ui-table-row-compact-block-size);
+ font-size: var(--ui-table-compact-font-size);
+}
+
+.ui-data-table__note,
+.ui-data-table__after-row,
+.ui-data-table__empty {
+ box-sizing: border-box;
+ display: flex;
+ min-height: var(--ui-table-note-row-min-block-size);
+ align-items: center;
+ padding: var(--ui-table-note-row-padding);
+ border-bottom: 1px solid var(--ui-table-row-divider);
+ background: var(--ui-table-note-row-background);
+ color: var(--ui-table-note-row-foreground);
+}
+
+.ui-data-table__empty {
+ justify-content: center;
+ min-height: var(--ui-table-empty-min-block-size);
+ color: var(--ui-muted-foreground);
+}
+
+.ui-data-table__summary {
+ border-top: 1px solid var(--ui-table-summary-border);
+ border-bottom: 0;
+ background: var(--ui-table-summary-background);
+ color: var(--ui-table-summary-foreground);
+}
+
+.ui-data-table__footer {
+ display: flex;
+ min-height: var(--ui-table-footer-min-block-size);
+ align-items: center;
+ justify-content: flex-end;
+ padding: var(--ui-table-footer-padding);
+ border-top: 1px solid var(--ui-table-footer-border);
+ background: var(--ui-table-footer-background);
+}
diff --git a/frontend-ui/src/components/ui/dialog/UiActionDialog.vue b/frontend-ui/src/components/ui/dialog/UiActionDialog.vue
new file mode 100644
index 00000000..21ec06de
--- /dev/null
+++ b/frontend-ui/src/components/ui/dialog/UiActionDialog.vue
@@ -0,0 +1,162 @@
+
+
+
+ props.columns.map((column) => column.width ?
>
{{ column.label }}
-
- {{ column.label }}
+
+ {{ column.label }}
+
-
-
- {{ row[column.key] }}
-
-
-
+
+
+
+
+
+
+
+ {{ searchLabel }}
+
+
+ {{ refreshLabel }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- 助手社区ID
-
+
+
+
- + * + 点击导入后会从助手通过文字识别获取打造 +
++ * + 部分打造无法获取，此处仅做快捷导入 +
-
- * 点击导入后会从助手通过文字识别获取打造
-* 部分打造无法获取，此处仅做快捷导入
-
-
+
diff --git a/frontend-ui/src/pages/Character/Config/importDnfhelper.vue b/frontend-ui/src/pages/Character/Config/importDnfhelper.vue
index 663799b8..711381f3 100644
--- a/frontend-ui/src/pages/Character/Config/importDnfhelper.vue
+++ b/frontend-ui/src/pages/Character/Config/importDnfhelper.vue
@@ -6,6 +6,7 @@ import { useDialog } from '@/components/hooks/dialog'
import { isShow, onShow } from '@/components/hooks/show'
import { useConfigStore } from '@/stores'
import { type IHelperRoleInfo } from '@/api/info/type'
+import { UiButton } from '@/components/ui/button'
export default defineComponent({
props: {
@@ -54,22 +55,30 @@ export default defineComponent({
return () => {
return (
<>
-
+ execute()} disabled={isLoading.value}>
导入
-
- (visible.value = false)}>取消
+
+ (visible.value = false)}>
+ 取消
+
-
+
+
-
检测到以下信息，是否导入助手数据？
- {props.alter?.roleName}
- {props.alter?.roleJob}
- 名望：{props.alter?.fame}
+ {props.alter?.roleName}
+ {props.alter?.roleJob}
+ 名望：{props.alter?.fame}
-
* 点击导入后会从助手通过文字识别获取打造
-* 部分打造无法获取，此处仅做快捷导入
+
+
- + * + 点击导入后会从助手通过文字识别获取打造 +
++ * + 部分打造无法获取，此处仅做快捷导入 +
-
+
diff --git a/frontend-ui/src/pages/Character/Config/importSkill.vue b/frontend-ui/src/pages/Character/Config/importSkill.vue
index 5a2d775c..996bad24 100644
--- a/frontend-ui/src/pages/Character/Config/importSkill.vue
+++ b/frontend-ui/src/pages/Character/Config/importSkill.vue
@@ -5,6 +5,8 @@ import api from '@/api'
import { useDialog } from '@/components/hooks/dialog'
import { isShow, onShow } from '@/components/hooks/show'
import { useConfigStore } from '@/stores'
+import { UiButton } from '@/components/ui/button'
+import { UiInput } from '@/components/ui/input'
export default defineComponent({
setup() {
@@ -44,23 +46,28 @@ export default defineComponent({
return () => {
return (
<>
-
+ execute()} disabled={isLoading.value}>
导入
-
- (visible.value = false)}>取消
+
+ (visible.value = false)}>
+ 取消
+
-
- 技能加点代码
-
-
-
+
+
+
+
- * 点击导入后会根据规则解析出技能加点、技能进化、技能强化
-* 部分技能可能存在无法识别的情况，需要手动调整
++ * + 部分技能可能存在无法识别的情况，需要手动调整 +
-
+
diff --git a/frontend-ui/src/pages/Character/Equipment/Index.vue b/frontend-ui/src/pages/Character/Equipment/Index.vue
deleted file mode 100644
index 9f6679ef..00000000
--- a/frontend-ui/src/pages/Character/Equipment/Index.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-
-
+ execute()} disabled={!skillCode.value || isLoading.value}>
导入
-
- (visible.value = false)}>取消
+
+ (visible.value = false)}>
+ 取消
+
-
-
- 武器
- 称号/宠物/秘宝
- 副武器
-
-
-
-
- 套装
- 通宝
-
-
-
-
- 套装
- 通宝
- 其他
-
-
-
-
-
-
diff --git a/frontend-ui/src/pages/Character/Equipment/components/Else.vue b/frontend-ui/src/pages/Character/Equipment/components/Else.vue
deleted file mode 100644
index c8e3ff79..00000000
--- a/frontend-ui/src/pages/Character/Equipment/components/Else.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/frontend-ui/src/pages/Character/Equipment/components/Stone.vue b/frontend-ui/src/pages/Character/Equipment/components/Stone.vue
deleted file mode 100644
index 629c1695..00000000
--- a/frontend-ui/src/pages/Character/Equipment/components/Stone.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/frontend-ui/src/pages/Character/Equipment/components/StoneUniversal.vue b/frontend-ui/src/pages/Character/Equipment/components/StoneUniversal.vue
deleted file mode 100644
index 7ce2acef..00000000
--- a/frontend-ui/src/pages/Character/Equipment/components/StoneUniversal.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
- ![]()
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/frontend-ui/src/pages/Character/Equipment/components/SubWeapon.vue b/frontend-ui/src/pages/Character/Equipment/components/SubWeapon.vue
deleted file mode 100644
index 6c45b358..00000000
--- a/frontend-ui/src/pages/Character/Equipment/components/SubWeapon.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/frontend-ui/src/pages/Character/Equipment/components/Suit.vue b/frontend-ui/src/pages/Character/Equipment/components/Suit.vue
deleted file mode 100644
index e2ccc85d..00000000
--- a/frontend-ui/src/pages/Character/Equipment/components/Suit.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/frontend-ui/src/pages/Character/Equipment/components/Universal.vue b/frontend-ui/src/pages/Character/Equipment/components/Universal.vue
deleted file mode 100644
index 526db9b1..00000000
--- a/frontend-ui/src/pages/Character/Equipment/components/Universal.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
- ![]()
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/frontend-ui/src/pages/Character/Equipment/components/Weapon.vue b/frontend-ui/src/pages/Character/Equipment/components/Weapon.vue
deleted file mode 100644
index 9b7d8227..00000000
--- a/frontend-ui/src/pages/Character/Equipment/components/Weapon.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/frontend-ui/src/pages/Character/EquipmentDictionary/Index.vue b/frontend-ui/src/pages/Character/EquipmentDictionary/Index.vue
index 1fb565e6..9d894855 100644
--- a/frontend-ui/src/pages/Character/EquipmentDictionary/Index.vue
+++ b/frontend-ui/src/pages/Character/EquipmentDictionary/Index.vue
@@ -1,496 +1,733 @@
-
-
-
-
-
-
-
-
- 装备
-
- |
-
- 誓约
-
-
-
-
-
- 部位：
-
- 品质：
-
-
-
- 套装：
-
+
+
-
- ![]()
-
+
+
+
+
+ 装备
+ 誓约
+
+
+
+
-
-
-
-
+ {{ item.name }}
-
-
+ 套装
+
+
+
+ ![]()
+
-
+
+
+
+
+
+
+
-
-
- {{ group.name }}
+
+
+
+
-
- ![]()
+ {{ skill.name }}
+
+
+
+
-
-
-
- 基础信息{{ hideBase ? ' (点击显示)' : '（点击隐藏）' }}
-
-
-
-
-
-
- 套装信息{{ hideSuit ? ' (点击显示)' : '（点击隐藏）' }}
-
-
-
-
-
-
- {{ curSuitLv.rarity }}
- {{ formatLv(curSuitLv.lv, curSuitLv.rarity) }}
-
-
-
-
-
-
+ 誓约信息
-
-
+
-
-
- {{ curOathSkillLv.rarity }}
- {{ formatLv(curOathSkillLv.lv, curOathSkillLv.rarity) }}
-
- 没有符合当前条件的装备
-
-
-
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
-
-
-
-
+
+
+
+
+
diff --git a/frontend-ui/src/pages/Character/EquipmentDictionary/components/LevelControls.vue b/frontend-ui/src/pages/Character/EquipmentDictionary/components/LevelControls.vue
new file mode 100644
index 00000000..51faf024
--- /dev/null
+++ b/frontend-ui/src/pages/Character/EquipmentDictionary/components/LevelControls.vue
@@ -0,0 +1,116 @@
+
+
+
+
+
+ ![]()
+
+
+ ![]()
+
+
+
+
+
+ ![]()
+
+
+ ![]()
+
+
+
+
+
diff --git a/frontend-ui/src/pages/Character/EquipmentDictionary/components/options.vue b/frontend-ui/src/pages/Character/EquipmentDictionary/components/options.vue
index 8bebc2ac..f502f1a7 100644
--- a/frontend-ui/src/pages/Character/EquipmentDictionary/components/options.vue
+++ b/frontend-ui/src/pages/Character/EquipmentDictionary/components/options.vue
@@ -1,23 +1,53 @@
+
+
-
-
+
-
+
diff --git a/frontend-ui/src/pages/Character/EquipmentDictionary/formatData.ts b/frontend-ui/src/pages/Character/EquipmentDictionary/formatData.ts
index 5ab2e651..6a8b6072 100644
--- a/frontend-ui/src/pages/Character/EquipmentDictionary/formatData.ts
+++ b/frontend-ui/src/pages/Character/EquipmentDictionary/formatData.ts
@@ -164,7 +164,7 @@ export const formatEqu = (total: IEquipment[], subweapons?: string[], curSuit?:
equs: treasures,
},
{
- name: `${curSuit} 套装`,
+ name: curSuit ? `${curSuit} 套装` : '套装',
equs: suits,
},
{
@@ -270,7 +270,7 @@ export const formatStone = (total: IEquipment[], curSuit?: string) => {
// rzs.push(...temp, ...Array(temp.length == 0 ? rowCount-remind : remind).fill(undefined))
return [
{
- name: `${curSuit} 套装`,
+ name: curSuit ? `${curSuit} 套装` : '套装',
equs: suits,
},
{
@@ -315,11 +315,11 @@ export const formatOath = (
}
return [
{
- name: `${curSuit?.name} 誓约`,
+ name: curSuit?.name ? `${curSuit.name} 誓约` : '誓约',
equs: oath,
},
{
- name: `${curSuit?.name} 星蕴石`,
+ name: curSuit?.name ? `${curSuit.name} 星蕴石` : '星蕴石',
equs: primer,
},
]
diff --git a/frontend-ui/src/pages/Character/Forge/components/Avatars.vue b/frontend-ui/src/pages/Character/Forge/components/Avatars.vue
index cbf9ee43..b6752947 100644
--- a/frontend-ui/src/pages/Character/Forge/components/Avatars.vue
+++ b/frontend-ui/src/pages/Character/Forge/components/Avatars.vue
@@ -1,8 +1,9 @@
+
+
+
-
-
- {{ item }}
-
-
-
- {{ option.name }}
-
+
+
+
+
+
+ {{ option.label }}
+
+
+
+
+
+
+
diff --git a/frontend-ui/src/pages/Character/Forge/components/ForgeSlider.vue b/frontend-ui/src/pages/Character/Forge/components/ForgeSlider.vue
new file mode 100644
index 00000000..13409b42
--- /dev/null
+++ b/frontend-ui/src/pages/Character/Forge/components/ForgeSlider.vue
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+
+
diff --git a/frontend-ui/src/pages/Character/Forge/components/Jades.vue b/frontend-ui/src/pages/Character/Forge/components/Jades.vue
index f020b4c1..1138e943 100644
--- a/frontend-ui/src/pages/Character/Forge/components/Jades.vue
+++ b/frontend-ui/src/pages/Character/Forge/components/Jades.vue
@@ -1,29 +1,17 @@
-
+
- (() => [
+ { label: '无', value: 0 },
+ ...(infoStore.jades ?? []).map((item) => ({ label: item.name, value: item.id })),
+])
-// const formatValue = (id: number) => {
-// return (value: number) => {
-// if (currentJade.value(id)?.unit.includes('等级')) {
-// return `$等级 +${value}`
-// }
-// return `${getFloat(value, 1)}${currentJade.value(id)?.unit}`
-// }
-// }
+function valueOptions(id: number): ForgeSelectOption[] {
+ if (id === -1) return []
-const valueList = computed(() => {
- return function (id: number = -1) {
- if (id == -1) {
- return undefined
- } else {
- const res = []
- const cur = infoStore.jades?.find((e) => e.id == id) as IJade
- if (cur) {
- const { max, min, unit, pre } = cur
- //
- if (unit.includes('等级')) {
- res.push({
- id: 1,
- value: unit,
- })
- } else {
- for (let i = Number(max) as number; i >= Number(min);) {
- if (i != 0) {
- res.push({
- id: i,
- value: (i > 0 ? '+' : '') + getFloat(i, 1) + unit,
- })
- }
- i = Number((i - Number(pre)).toFixed(1))
- }
- }
- return res
- }
- }
+ const result: ForgeSelectOption[] = []
+ const current = infoStore.jades?.find((item) => item.id === id) as IJade | undefined
+ if (!current) return result
+
+ const { max, min, unit, pre } = current
+ if (unit.includes('等级')) {
+ result.push({ label: unit, value: 1 })
+ return result
}
-})
+
+ for (let value = Number(max); value >= Number(min);) {
+ if (value !== 0) {
+ result.push({
+ label: `${value > 0 ? '+' : ''}${getFloat(value, 1)}${unit}`,
+ value,
+ })
+ }
+ value = Number((value - Number(pre)).toFixed(1))
+ }
+
+ return result
+}
diff --git a/frontend-ui/src/pages/Character/Forge/components/Oaths.vue b/frontend-ui/src/pages/Character/Forge/components/Oaths.vue
index 1e18bfd7..0662ee35 100644
--- a/frontend-ui/src/pages/Character/Forge/components/Oaths.vue
+++ b/frontend-ui/src/pages/Character/Forge/components/Oaths.vue
@@ -1,38 +1,29 @@
-
-
- 无
-
- {{ item.name }}
-
-
-
-
-
- {{ item.value }}
-
-
+
@@ -34,59 +22,39 @@ import type { IJade } from '@/api/info/type'
import { useConfigStore } from '@/stores'
import { useInfoStore } from '@/stores'
import { getFloat } from '@/utils'
+import ForgeSelect, { type ForgeSelectOption } from './ForgeSelect.vue'
const configStore = useConfigStore()
const infoStore = useInfoStore()
-// const currentJade = computed(() => {
-// return function (id: number = -1) {
-// if (id == -1) {
-// return undefined
-// } else {
-// const cur = infoStore.jades?.find((e) => e.id == id) as IJade
-// return cur
-// }
-// }
-// })
+const jadeOptions = computed
+
+
-
- {{ i }}
-
-
+
-
当前部位
+ 当前部位
{{ part == '11' ? '誓约' : `星蕴石-${parseInt(part) + 1}` }}
- 调适
-
+
- 无
- 技攻 +4%
- CD -8%
-
+ :label="`誓约升级 ${i + 1}`"
+ :options="oathUpgradeOptions"
+ @update:model-value="setOathUpgradeValue(i, Number($event))"
+ />
@@ -40,7 +31,9 @@
diff --git a/frontend-ui/src/pages/Character/Result/Index.vue b/frontend-ui/src/pages/Character/Result/Index.vue
index 98569abf..4aee02e7 100644
--- a/frontend-ui/src/pages/Character/Result/Index.vue
+++ b/frontend-ui/src/pages/Character/Result/Index.vue
@@ -1,28 +1,24 @@
- 誓约升级
-
-
-
- 设为基准
- 清空基准
-
-
-
+
diff --git a/frontend-ui/src/pages/Character/Result/components/BufferSkill.vue b/frontend-ui/src/pages/Character/Result/components/BufferSkill.vue
index 3bf16ed5..205bb303 100644
--- a/frontend-ui/src/pages/Character/Result/components/BufferSkill.vue
+++ b/frontend-ui/src/pages/Character/Result/components/BufferSkill.vue
@@ -1,80 +1,96 @@
-
- 装备
-
- |
-
- 誓约
-
+
+
+
+ 装备
+ 誓约
+
+
+
-
+
+ 设为基准
+ 清空基准
+
+
-
-
-
- {{ header.label }}
-
- {{ order === 'desc' ? '△' : '▽' }}
+
+
+
-
-
+
-
diff --git a/frontend-ui/src/pages/Character/Result/components/Info.vue b/frontend-ui/src/pages/Character/Result/components/Info.vue
index 4885755b..bc0c8fd4 100644
--- a/frontend-ui/src/pages/Character/Result/components/Info.vue
+++ b/frontend-ui/src/pages/Character/Result/components/Info.vue
@@ -1,156 +1,116 @@
-
-
-
-
-
-
-
- ![]()
-
-
- {{ skill.lv }}
-
- {{ skill.name }}
-
- {{ typeof skill.cd === 'number' ? `${skill.cd.toFixed(1)}s` : '-' }}
-
-
+
+
+ ![]()
+
+ {{ row.skill.lv }}
+
+
+
+ {{ row.skill.name }}
+
+
+ {{ row.cd }}
+
+ {{ value.text }}
-
+
+
-
-
-
+
+
+
+ {{ infoItem.name }}
+ {{ infoItem.value }}
+
+
+
+ ![]()
+
+ {{ suit.name }} 套装
+
+
+ {{ suit.rarity }} {{ lvFormat(suit.level, suit.rarity) }}
+
+ {{ suit.point }}点
+
+
+
+ ![]()
+
+ {{ oathSuit.name }} 誓约
+
+
+ {{ oathSuit.rarity }} {{ lvFormat(oathSuit.level, oathSuit.rarity) }}
+
+ {{ oathSuit.point }}点
+
+
+
+
-
+
+
+
-
- ![]()
-
-
-
-
- {{ suit.name }} 套装
-
- {{ suit.rarity }} {{ lvFormat(suit.level, suit.rarity) }}
-
- {{ suit.point }}点
-
-
- ![]()
-
-
- {{ oathSuit.name }} 誓约
-
- {{ oathSuit.rarity }} {{ lvFormat(oathSuit.level, oathSuit.rarity) }}
-
- {{ oathSuit.point }}点
-
-
-
-
-
-
+
+
diff --git a/frontend-ui/src/pages/Character/Result/components/Skill.vue b/frontend-ui/src/pages/Character/Result/components/Skill.vue
index dedd372e..1ddae763 100644
--- a/frontend-ui/src/pages/Character/Result/components/Skill.vue
+++ b/frontend-ui/src/pages/Character/Result/components/Skill.vue
@@ -1,81 +1,138 @@
-
+
-
- 穿戴{{ display === 'equ' ? '装备' : '誓约' }}信息
+
+
+
-
+ ![]()
+
+ ![]()
+
+
+ +{{ props.equs[part]?.reinforce }}
+
+
+ ({{ props.equs[part]?.refine }})
+
+
+ {{ equ(props.equs?.[part]?.id)?.name }}
+
+
+
+
+
+ ![]()
-
+
+ ![]()
+
+
+ {{ equ(props.oaths?.[part]?.id)?.name }}
+
-
-
-
-
-
- 穿戴{{ display == 'equ' ? '装备' : '誓约' }}信息
-
-
-
-
-
-
- ![]()
-
-
-
-
-
-
- ![]()
-
-
- +{{ props.equs[part]?.reinforce }}
-
-
- ({{ props.equs[part]?.refine }})
-
-
- {{ equ(props.equs?.[part]?.id)?.name }}
-
-
- ![]()
-
-
-
-
- ![]()
-
-
-
- {{ equ(props.equs?.[part]?.id) }}
-
- {{ equ(props.oaths?.[part]?.id)?.name }}
-
-
-
-
-
+
+
+
-
+
- 占比
+ 技能
+
+
+
+ 次数
+
+
+ 占比
-
-
+
diff --git a/frontend-ui/src/pages/Character/Skill/components/SkillDetail/index.tsx b/frontend-ui/src/pages/Character/Skill/components/SkillDetail/index.tsx
index 79603358..447b621d 100644
--- a/frontend-ui/src/pages/Character/Skill/components/SkillDetail/index.tsx
+++ b/frontend-ui/src/pages/Character/Skill/components/SkillDetail/index.tsx
@@ -1,8 +1,7 @@
import { asyncComputed } from '@vueuse/core'
import api from '@/api'
import './style.scss'
-import CalcTabs from '@/components/calc/tabs/index.vue'
-import CalcTab from '@/components/calc/tab/index.vue'
+import { TabsRoot, UiTabsList, UiTabsTrigger } from '@/components/ui/tabs'
export default defineComponent({
name: 'SkillDetail',
@@ -88,11 +87,11 @@ export default defineComponent({
const renderSkillDetail = () => (
<>
-
-
-
-
- ![]()
-
-
- Lv{{ skill.lv }}
-
- {{ skill.name }} {{ !skill.mode ? '' : `[${skill.mode}]` }}
- {{ skill.cd.toFixed(1) }}s
-
-
-
+
-
+
+
+ ![]()
+
+ Lv{{ row.skill.lv }}
+
+
+
+ {{ row.displayName }}
+
+ {{ row.cd }}
+
+
+
+ {{ row.dps }}
+
+
+ {{ row.total }}
+
+ {{ row.share }}
- {{ showTotal.toFixed(0) }}
-
-
- {{ showTotal.toFixed(2) }}%
-
+
基本信息
-
+
{basic.value.map(
(item) =>
!!item.value && (
-
+
{item.label}
{item.value}
@@ -100,25 +99,23 @@ export default defineComponent({
)}
技能描述
-
-
+
+
{detail.value.length > 0 && (
<>
{desc.value?.map((item) => (
// item.startsWith('[') || item.startsWith('-') || item.startsWith('<') ? (
//
{item}
// ) :
-
- {item}
-
+ {item}
))}
技能属性
-
-
+
+
@@ -129,17 +126,15 @@ export default defineComponent({
const renderSkillVp = () => (
<>
-
{detail.value.map((item) => (
-
+
))}
-
+
+
{skillInfo.value?.evolution?.map((item) => (
<>
-
+
{item.name}
技能描述
-
-
@@ -158,21 +153,17 @@ export default defineComponent({
return () => (
<>
-
- {item.descDetail}
-
+
+
{item.descDetail}
-
{skillInfo.value?.name}
+
+
{skillInfo.value?.name}
-
-
- 技能信息
-
-
- 技能进化
-
-
+
+
+ 技能信息
+
+ 技能进化
+
+
+
{curTab.value === 0 && renderSkillDetail()}
{curTab.value === 1 && renderSkillVp()}
diff --git a/frontend-ui/src/pages/Character/Skill/components/SkillDetail/style.scss b/frontend-ui/src/pages/Character/Skill/components/SkillDetail/style.scss
index 990b3f3a..5cc48bd9 100644
--- a/frontend-ui/src/pages/Character/Skill/components/SkillDetail/style.scss
+++ b/frontend-ui/src/pages/Character/Skill/components/SkillDetail/style.scss
@@ -1,3 +1,73 @@
+.skill-detail {
+ display: flex;
+ height: 100%;
+ margin-inline: 2px;
+ flex-direction: column;
+ gap: 2px;
+ color: #907b54;
+}
+
+.skill-detail__stack {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.skill-detail__row {
+ display: flex;
+ justify-content: space-between;
+
+ &--center {
+ align-items: center;
+ }
+}
+
+.skill-detail__description-frame {
+ height: auto;
+ max-height: 200px;
+}
+
+.skill-detail__scroll-content,
+.skill-detail__evolution-scroll {
+ height: 100%;
+ padding: 2px;
+ overflow-y: auto;
+ background: #161816;
+}
+
+.skill-detail__description-line {
+ min-height: 10px;
+ white-space: pre-wrap;
+}
+
+.skill-detail__flex-scroll {
+ min-height: 0;
+ flex: 1;
+ overflow-y: auto;
+}
+
+.skill-detail__evolution {
+ height: auto;
+}
+
+.skill-detail__evolution-list {
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+ gap: 5px;
+}
+
+.skill-detail__evolution-scroll {
+ height: auto;
+ max-height: 300px;
+}
+
+.skill-detail__evolution-copy {
+ height: auto;
+ padding: 2px;
+ white-space: pre-wrap;
+}
+
.skill_name {
border-width: 1px;
border-style: solid;
diff --git a/frontend-ui/src/pages/Character/Skill/components/SkillTree/index.tsx b/frontend-ui/src/pages/Character/Skill/components/SkillTree/index.tsx
index f8a75e0c..e4f00ba2 100644
--- a/frontend-ui/src/pages/Character/Skill/components/SkillTree/index.tsx
+++ b/frontend-ui/src/pages/Character/Skill/components/SkillTree/index.tsx
@@ -1,7 +1,11 @@
import { getImageURL } from '@/utils/images'
import type { ISkill } from '@/api/info/type'
import { useVModel } from '@vueuse/core'
-import CalcButton from '@/components/calc/button/index.vue'
+import { UiButton } from '@/components/ui/button'
+import addIcon from './img/add.svg'
+import maxIcon from './img/max.svg'
+import minIcon from './img/min.svg'
+import subIcon from './img/sub.svg'
import './style.scss'
export default defineComponent({
@@ -101,17 +105,14 @@ export default defineComponent({
if (info?.lv > skill.maxLearnLv) color = '#58E0FC'
return (
<>
-
-
+
+
{info?.vp > 0 && }
{info?.up > 0 && }
{activeSkill.value == skill.id && renderSkillAction(skill)}
{
e.stopPropagation()
chooseSkill(skill)
@@ -124,42 +125,30 @@ export default defineComponent({
key={index}
>
})
-
+
{skill.learnLv == 100 && skill.bind && (
<>
-
{info?.lv ?? 0}
-
chooseBindAwake(50)}
- >
+
+
chooseBindAwake(50)}>
-
-
- 1次
-
+ 1次
chooseBindAwake(85)}
- >
+
@@ -172,39 +161,55 @@ export default defineComponent({
const renderSkillAction = (skill: ISkill) => (
<>
<>
- chooseBindAwake(85)}>
-
- 2次
-
+ 2次
-
-
+
+ {
e.stopPropagation()
actionSkillLv(skill, 'subMax')
}}
- >
-
+ 
+
+ {
e.stopPropagation()
actionSkillLv(skill, 'sub')
}}
- >
-
+ 
+
+ {
e.stopPropagation()
actionSkillLv(skill, 'add')
}}
- >
-
+ 
+
+ = skill.maxLearnLv}
onClick={(e: Event) => {
e.stopPropagation()
actionSkillLv(skill, 'addMax')
}}
- >
+ >
+ 
+
{/* 
{
@@ -241,11 +246,11 @@ export default defineComponent({
return () => (
<>
-
(activeSkill.value = -1)}>
+
(activeSkill.value = -1)}>
{((getSkill(0, 15, -1) ?? []) as ISkill[]).length > 0 && (
<>
-
-
+
+
其
余
{((getSkill(0, 15, -1) ?? []) as ISkill[])?.map((skill, index) =>
@@ -257,17 +262,21 @@ export default defineComponent({
{lvList.map((lv, index) =>
((getSkill(lv, lvList[index + 1] ?? 150, -1) as ISkill[])?.length ?? 0) > 0 ? (
- 余
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend-ui/src/pages/Character/Skill/components/SkillUP/index.tsx b/frontend-ui/src/pages/Character/Skill/components/SkillUP/index.tsx
index f087307f..7b964661 100644
--- a/frontend-ui/src/pages/Character/Skill/components/SkillUP/index.tsx
+++ b/frontend-ui/src/pages/Character/Skill/components/SkillUP/index.tsx
@@ -1,12 +1,14 @@
-import { getImageURL } from '@/utils/images'
-import type { ISkill } from '@/api/info/type'
+import { computed, defineComponent, type PropType } from 'vue'
import { useVModel } from '@vueuse/core'
-import CalcButton from '@/components/calc/button/index.vue'
-import CaclIconSelect from '@/components/calc/iconselect/index.vue'
-import CalcOption from '@/components/calc/option/index.vue'
-import { renderList } from 'vue'
+import type { ISkill } from '@/api/info/type'
+import { UiButton } from '@/components/ui/button'
+import { UiItemSlot } from '@/components/ui/item-slot'
+import { getImageURL } from '@/utils/images'
+import SkillUpIconSelect, { type SkillUpIconOption } from './SkillUpIconSelect.vue'
import './style.scss'
+type SkillLevelInfo = Record
+
export default defineComponent({
name: 'SkillTree',
props: {
@@ -15,7 +17,7 @@ export default defineComponent({
default: () => [],
},
lvInfo: {
- type: Object as PropType>,
+ type: Object as PropType,
default: () => ({}),
},
buffer: {
@@ -25,283 +27,190 @@ export default defineComponent({
},
setup(props) {
const lvInfo = useVModel(props, 'lvInfo')
+
+ const selectedSkillIds = computed(() =>
+ Object.keys(lvInfo.value).filter(
+ (skillId) => !!lvInfo.value[skillId].up && lvInfo.value[skillId].up > 0,
+ ),
+ )
+
const skills = (index: number = 0) => {
- index -= 1
- const upList = Object.keys(lvInfo.value).filter(
- (a) => !!lvInfo.value[a].up && lvInfo.value[a].up > 0,
- )
- const currentUPSkill = index >= 0 ? upList[index] : undefined
+ const rowIndex = index - 1
+ const currentUPSkill = rowIndex >= 0 ? selectedSkillIds.value[rowIndex] : undefined
+
return computed(() =>
props.skills
.filter(
- (a) =>
- a.id.toString() === currentUPSkill ||
- (a.hasUP &&
- (!lvInfo.value[a.id]?.up || lvInfo.value[a.id]?.up == 0) &&
- lvInfo.value[a.id].lv > 0),
+ (skill) =>
+ skill.id.toString() === currentUPSkill ||
+ (skill.hasUP &&
+ (!lvInfo.value[skill.id]?.up || lvInfo.value[skill.id]?.up === 0) &&
+ lvInfo.value[skill.id].lv > 0),
)
- .sort((a, b) => a.learnLv - b.learnLv),
+ .sort((left, right) => left.learnLv - right.learnLv),
)
}
const itemChecked = (index: number, up: number) => {
- index -= 1
+ const rowIndex = index - 1
return computed({
get() {
- const upList = Object.keys(lvInfo.value).filter(
- (a) => !!lvInfo.value[a].up && lvInfo.value[a].up > 0,
- )
- const currentUPSkill = upList[index]
+ const currentUPSkill = selectedSkillIds.value[rowIndex]
const currentUP = lvInfo.value[currentUPSkill]?.up
- return currentUP == up ? currentUPSkill : undefined
+ return currentUP === up ? currentUPSkill : undefined
},
- set(value: string | undefined) {
+ set(value) {
if (!value) return
- const upList = Object.keys(lvInfo.value).filter(
- (a) => !!lvInfo.value[a].up && lvInfo.value[a].up > 0,
- )
- const currentUPSkill = upList[index]
- if (currentUPSkill) {
- lvInfo.value[currentUPSkill].up = 0
- }
- lvInfo.value[value].up = up
+
+ const currentUPSkill = selectedSkillIds.value[rowIndex]
+ if (currentUPSkill) lvInfo.value[currentUPSkill].up = 0
+ if (value === '-1') return
+
+ const target = lvInfo.value[value]
+ if (target) target.up = up
},
})
}
- const exchange = (index: number) => {
- const skill = itemChecked(index, 1).value || itemChecked(index, 2).value
- if (!skill) return
- lvInfo.value[skill].up = lvInfo.value[skill].up == 1 ? 2 : 1
+ const iconOptions = (index: number, clearable = false): SkillUpIconOption[] => {
+ const options = skills(index).value.map((skill) => ({
+ label: skill.name,
+ src: getImageURL(skill.icon),
+ value: skill.id.toString(),
+ }))
+
+ return clearable ? [{ label: '清空技能', value: '-1' }, ...options] : options
}
- return () => (
- <>
- {lvInfo.value && Object.keys(lvInfo.value).length > 0 ? (
-
{lv == 1 || lv % 10 == 0 ? (
-
) : (
<>
diff --git a/frontend-ui/src/pages/Character/Skill/components/SkillTree/style.scss b/frontend-ui/src/pages/Character/Skill/components/SkillTree/style.scss
index d62a2c1d..6caf1bce 100644
--- a/frontend-ui/src/pages/Character/Skill/components/SkillTree/style.scss
+++ b/frontend-ui/src/pages/Character/Skill/components/SkillTree/style.scss
@@ -1,6 +1,16 @@
+.skill-tree {
+ /* Preserve the original 11-column tree rhythm while allowing its host to scroll on narrow screens. */
+ min-width: 550px;
+}
+
.skill-tree-line {
+ display: flex;
height: 80px;
width: auto;
+ align-items: center;
+ gap: 8px;
+ padding-inline: 5px;
+
&:nth-child(n + 1) {
background-color: #000000;
}
@@ -9,6 +19,130 @@
}
}
+.skill-tree__slot {
+ position: relative;
+ width: 35px;
+ height: 55px;
+ flex: 0 0 35px;
+}
+
+.skill-tree__enhancements {
+ position: absolute;
+ top: -18px;
+ left: 1px;
+ display: flex;
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+ gap: 2px;
+}
+
+.skill-tree__skill {
+ position: absolute;
+ z-index: 2;
+ display: flex;
+ box-sizing: border-box;
+ width: 36px;
+ height: 48px;
+ padding-block: 3px;
+ align-items: center;
+ flex-direction: column;
+ cursor: pointer;
+}
+
+.skill-tree__icon {
+ display: block;
+ width: 28px;
+ height: 28px;
+ object-fit: contain;
+}
+
+.skill-tree__level {
+ display: flex;
+ width: 100%;
+ min-height: 0;
+ flex: 1;
+ justify-content: center;
+}
+
+.skill-tree__awake {
+ position: absolute;
+ top: -3px;
+ left: 18px;
+ display: flex;
+ box-sizing: border-box;
+ width: 196px;
+ height: 54px;
+ padding: 2px 3px;
+ align-items: center;
+ justify-content: space-between;
+ transform: translateX(-50%);
+}
+
+.skill-tree__awake-option {
+ position: relative;
+ z-index: 2;
+ display: flex;
+ box-sizing: border-box;
+ width: 36px;
+ padding-block: 2px;
+ align-items: center;
+ flex-direction: column;
+ cursor: pointer;
+}
+
+.skill-tree__awake-icon {
+ margin-top: 1px;
+}
+
+.skill-tree__awake-label {
+ display: flex;
+ width: 100%;
+ margin-top: 1px;
+ align-items: center;
+ justify-content: center;
+ color: #ffc701;
+}
+
+.skill-tree__actions {
+ position: absolute;
+ z-index: 5;
+ top: -1px;
+ left: 16px;
+ width: 88px;
+ height: 78px;
+ transform: translateX(-50%);
+}
+
+.skill-tree__action-list {
+ position: relative;
+ top: 54px;
+ display: flex;
+ padding-inline: 5px;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.skill-tree__row-label,
+.skill-tree__placeholder {
+ display: flex;
+ width: 34px;
+ height: 34px;
+ flex: 0 0 34px;
+ align-items: center;
+ justify-content: center;
+}
+
+.skill-tree__row-label {
+ color: #fff;
+}
+
+.skill-tree__row-end {
+ width: 5px;
+ height: 34px;
+ flex: 0 0 5px;
+}
+
.passive {
filter: grayscale(100%) invert(3%) sepia(14%) saturate(874%) hue-rotate(65deg) brightness(105%)
contrast(102%);
@@ -24,6 +158,18 @@
background-size: 100% 100%;
}
+.skill-action-button {
+ --ui-control-height-default: 17px;
+
+ border-color: transparent;
+
+ img {
+ width: 11px;
+ height: 11px;
+ object-fit: contain;
+ }
+}
+
.awake_50 {
background-image: url('./img/awake_50.png');
background-size: 100% 100%;
diff --git a/frontend-ui/src/pages/Character/Skill/components/SkillUP/SkillUpIconSelect.vue b/frontend-ui/src/pages/Character/Skill/components/SkillUP/SkillUpIconSelect.vue
new file mode 100644
index 00000000..38089d86
--- /dev/null
+++ b/frontend-ui/src/pages/Character/Skill/components/SkillUP/SkillUpIconSelect.vue
@@ -0,0 +1,161 @@
+
+
+
+ {lv}
+ {lv}
) : (
-
+
)}
{columns.map((column) => {
const skill = getSkill(lv, lvList[index + 1] ?? 150, column) as ISkill
- return skill ? renderSkill(skill, index) :
+ return skill ? (
+ renderSkill(skill, index)
+ ) : (
+
+ )
})}
- (activeSkill.value = -1)}>
+ (activeSkill.value = -1)}>
-
-
-
-
-
-
-
-
- 技能攻击力增加
-
-
-
-
- 技能冷却时间减少
-
- 技能攻击力增加 -
- - 技能攻击力增加 -
- {renderList(3, (index) => (
- <>
-
技能攻击力 +${skill.learnLv < 35 ? '43' : 38}%` + : '技能冷却时间 -10%
生命值恢复量 +5%' + } + + return props.buffer ? `${description} / 主属性 +40` : description + } + + return () => { + if (!lvInfo.value || Object.keys(lvInfo.value).length === 0) return null + + const targetSkills = skills().value + const emptyTargetCount = Math.max(0, 36 - targetSkills.length) + + return ( +
+ )
+ }
},
})
diff --git a/frontend-ui/src/pages/Character/Skill/components/SkillUP/style.scss b/frontend-ui/src/pages/Character/Skill/components/SkillUP/style.scss
index f6715d16..9427d8dd 100644
--- a/frontend-ui/src/pages/Character/Skill/components/SkillUP/style.scss
+++ b/frontend-ui/src/pages/Character/Skill/components/SkillUP/style.scss
@@ -1,75 +1,209 @@
+.skill-up-shell {
+ box-sizing: border-box;
+ width: 100%;
+ min-width: 0;
+ overflow: auto;
+ background: var(--ui-background);
+ container-type: inline-size;
+}
+
.skill-up {
- width: 540px;
- // height: 334px;
- // background-image: url('./img/bg.png');
- // background-size: 100% 100%;
- padding: 5px 10px;
- padding-bottom: 10px;
- background-color: black;
+ box-sizing: border-box;
+ display: grid;
+ width: 100%;
+ min-width: 500px;
+ grid-template-columns: minmax(228px, 0.92fr) minmax(250px, 1.08fr);
+ align-items: stretch;
+ gap: clamp(8px, 1.8cqi, 16px);
+ padding: clamp(6px, 1.4cqi, 12px);
+ background: var(--ui-background);
- .left {
- width: 240px;
- height: 325px;
- border-radius: 2px;
- border: 1px solid #2e2e2e;
- background: linear-gradient(to bottom, #1c1c1c 0%, #0a0d0a 100%);
+ .skill-up__left,
+ .skill-up__right {
+ box-sizing: border-box;
+ min-width: 0;
+ }
+
+ .skill-up__left {
display: flex;
- padding: 5px 10px;
+ min-height: 325px;
+ flex-direction: column;
+ padding: clamp(6px, 1.4cqi, 10px);
+ border: 1px solid var(--ui-settings-border);
+ background: var(--ui-panel-background);
+ }
- .up_head_1,
- .up_head_2 {
- display: flex;
- flex-direction: column;
- align-items: center;
+ .skill-up__heads {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: var(--ui-control-gap);
+ }
- .icon {
- width: 80px;
- height: 80px;
- background-position: center center;
- }
- }
+ .up_head_1,
+ .up_head_2 {
+ display: flex;
+ min-width: 0;
+ flex: 1 1 0;
+ flex-direction: column;
+ align-items: center;
+ color: var(--ui-secondary-foreground);
- .up_head_1 .icon {
- background-image: url('./img/attack.png');
- }
-
- .up_head_2 .icon {
- background-image: url('./img/cd.png');
+ .icon {
+ width: clamp(64px, 14cqi, 80px);
+ aspect-ratio: 1;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
}
}
- .right {
- .title {
- width: 261px;
- height: 48px;
- background: url('./img/title.png') no-repeat center center;
- }
+ .up_head_1 .icon {
+ background-image: url('./img/attack.png');
+ }
+
+ .up_head_2 .icon {
+ background-image: url('./img/cd.png');
+ }
+
+ .skill-up__head-label {
+ min-height: calc(var(--ui-control-line-height) * 2em);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: var(--ui-control-font-size-default);
+ font-weight: 700;
+ line-height: var(--ui-control-line-height);
+ text-align: center;
+ }
+
+ .skill-up__swap-list {
+ display: grid;
+ margin-top: auto;
+ gap: clamp(5px, 1cqi, 9px);
+ padding: clamp(6px, 1.4cqi, 10px) clamp(4px, 2.6cqi, 20px) 0;
+ }
+
+ .skill-up__swap-row {
+ display: grid;
+ grid-template-columns: 54px auto 54px;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--ui-control-gap);
+ }
+
+ .skill-up__right {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .skill-up__title {
+ box-sizing: border-box;
+ display: flex;
+ width: 100%;
+ min-height: 48px;
+ align-items: center;
+ justify-content: center;
+ margin: 0;
+ background: url('./img/title.png') no-repeat center / 100% 100%;
+ color: var(--ui-primary-foreground);
+ font-size: var(--ui-control-font-size-large);
+ font-weight: 400;
+ line-height: var(--ui-control-line-height);
+ }
+
+ .skill-up__target-grid {
+ box-sizing: border-box;
+ display: grid;
+ min-height: 110px;
+ max-height: clamp(110px, 24cqi, 180px);
+ grid-template-columns: repeat(auto-fill, 30px);
+ align-content: start;
+ justify-content: center;
+ gap: var(--ui-control-gap);
+ margin: 0 auto clamp(6px, 1.4cqi, 10px);
+ padding: var(--ui-control-gap);
+ overflow-y: auto;
+ }
+
+ .skill-up__target-slot {
+ --ui-item-slot-size: 30px;
+ --ui-item-image-size: 28px;
+ --ui-item-frame-inset: 1px;
+ border: 1px solid var(--ui-table-border);
+ }
+
+ .skill-up__summary-list {
+ display: grid;
+ min-height: 0;
+ gap: clamp(6px, 1.2cqi, 10px);
+ overflow-y: auto;
+ }
+
+ .skill-up__summary-row {
+ box-sizing: border-box;
+ display: flex;
+ min-height: 48px;
+ align-items: center;
+ gap: var(--ui-control-gap);
+ padding: 5px;
+ border: 1px solid var(--ui-shop-frame-rest-outer);
+ background: var(--ui-shop-frame-rest-surface);
+ }
+
+ .skill-up__summary-frame {
+ width: 40px;
+ height: 40px;
+ flex: 0 0 40px;
+ background-size: 100% 100%;
+ }
+
+ .skill-up__summary-icon {
+ --ui-item-slot-size: 28px;
+ --ui-item-image-size: 28px;
+ --ui-item-frame-inset: 0;
+ --ui-item-slot-background: transparent;
+ }
+
+ .skill-up__summary-text {
+ min-width: 0;
+ color: var(--ui-secondary-foreground);
+ font-size: var(--ui-control-font-size-default);
+ line-height: 1.45;
}
.up_1,
.up_2,
.up_3,
.up_active {
+ display: flex;
width: 54px;
height: 54px;
- display: flex;
align-items: center;
justify-content: center;
+ background-position: center;
+ background-repeat: no-repeat;
}
.up_1 {
- background: url('./img/up_1.png') no-repeat center center;
+ background-image: url('./img/up_1.png');
}
.up_2 {
- background: url('./img/up_2.png') no-repeat center center;
+ background-image: url('./img/up_2.png');
}
.up_3 {
- background: url('./img/up_3.png') no-repeat center center;
+ background-image: url('./img/up_3.png');
}
.up_active {
- background: url('./img/up_active.png') no-repeat center center;
+ background-image: url('./img/up_active.png');
+ }
+}
+
+@container (min-width: 720px) {
+ .skill-up {
+ grid-template-columns: minmax(270px, 0.85fr) minmax(330px, 1.15fr);
}
}
diff --git a/frontend-ui/src/pages/Character/Skill/components/SkillVP/index.tsx b/frontend-ui/src/pages/Character/Skill/components/SkillVP/index.tsx
index 110e6491..e0fc44f4 100644
--- a/frontend-ui/src/pages/Character/Skill/components/SkillVP/index.tsx
+++ b/frontend-ui/src/pages/Character/Skill/components/SkillVP/index.tsx
@@ -1,7 +1,7 @@
import { getImageURL } from '@/utils/images'
import type { ISkill } from '@/api/info/type'
import { useVModel } from '@vueuse/core'
-import CalcCheckbox from '@/components/calc/checkbox/index.vue'
+import { UiCheckbox } from '@/components/ui/checkbox'
import { renderList } from 'vue'
import './style.scss'
export default defineComponent({
@@ -54,22 +54,19 @@ export default defineComponent({
return () => (
<>
-
- exchange(index)}>
-
-
- ))}
+ const exchange = (index: number) => {
+ const skillId = itemChecked(index, 1).value || itemChecked(index, 2).value
+ if (!skillId) return
+ lvInfo.value[skillId].up = lvInfo.value[skillId].up === 1 ? 2 : 1
+ }
+
+ const renderUpgradeSlot = (index: number, up: number, clearable = false) => {
+ const selection = itemChecked(index, up)
+ return (
+
-
- {
-
-
-
- }
- {renderList(skills(index).value, (item) => (
- <>
-
- })
-
-
- ))}
-
-
-
-
- {renderList(skills(index).value, (item) => (
- <>
-
-
-
-
- ))}
-
-
-
+ (selection.value = value)}
+ label={`第 ${index} 组${up === 1 ? '技能攻击力' : '冷却与攻击力'}技能`}
+ options={iconOptions(index, clearable)}
+ columnCount={4}
+ />
+
+ )
+ }
+
+ const skillDescription = (skill: ISkill) => {
+ let description = ''
+ const up = lvInfo.value[skill.id.toString()].up
+
+ if (up === 1) {
+ description =
+ skill.upType === 'damage'
+ ? `技能攻击力 +${skill.learnLv < 35 ? '60' : 55}%`
+ : '生命值恢复量 +20%'
+ } else if (up === 2) {
+ description =
+ skill.upType === 'damage'
+ ? `技能冷却时间 -15%技能攻击力 +${skill.learnLv < 35 ? '43' : 38}%` + : '技能冷却时间 -10%
生命值恢复量 +5%' + } + + return props.buffer ? `${description} / 主属性 +40` : description + } + + return () => { + if (!lvInfo.value || Object.keys(lvInfo.value).length === 0) return null + + const targetSkills = skills().value + const emptyTargetCount = Math.max(0, 36 - targetSkills.length) + + return ( +
+
+
- ) : (
- <>
- )}
-
- )
+
+
+
+
+
-
+
+
+ 技能攻击力增加
+
+
+
+ 技能冷却时间减少
+
+ 技能攻击力增加
+ 技能攻击力增加
-
- 目标技能
-
- {renderList(skills().value, (item) => (
-
- {/*
+ {[1, 2, 3].map((index) => (
+
-
+ {renderUpgradeSlot(index, 1, true)}
+ exchange(index)}
>
-
-
- ))}
- {renderList(36 - skills().value.length, (item) => (
-
- ))}
-
- {renderList(
- Object.keys(lvInfo.value).filter(
- (a) => !!lvInfo.value[a].up && lvInfo.value[a].up > 0,
- ),
- (index) => {
- const skill = props.skills.find((a) => a.id.toString() === index)
- let tooltip = ''
- if (skill) {
- if (lvInfo.value[skill.id.toString()].up == 1) {
- if (skill.upType == 'damage') {
- tooltip = `技能攻击力 +${skill.learnLv < 35 ? '60' : 55}%`
- } else {
- tooltip = `生命值恢复量 +20%`
- }
- }
- if (lvInfo.value[skill.id.toString()].up == 2) {
- if (skill.upType == 'damage') {
- tooltip = `技能冷却时间 -15%
技能攻击力 +${skill.learnLv < 35 ? '43' : 38}%` - } else { - tooltip = `技能冷却时间 -10%
生命值恢复量 +5%` - } - } - } - if (props.buffer) { - tooltip += ` / 主属性 +40` - } - return skill ? ( -
- 技能攻击力 +${skill.learnLv < 35 ? '43' : 38}%` - } else { - tooltip = `技能冷却时间 -10%
生命值恢复量 +5%` - } - } - } - if (props.buffer) { - tooltip += ` / 主属性 +40` - } - return skill ? ( -
-
- ) : (
- <>
- )
- },
- )}
-
- })
-
-
-
- {renderList(3, (index) => (
- <>
-
))}
- exchange(index)}>
-
-
+
+
+ {renderUpgradeSlot(index, 2)}
+
-
- {renderList(skills(index).value, (item) => (
- <>
-
-
-
-
- ))}
-
-
-
-
- {renderList(skills(index).value, (item) => (
- <>
-
-
-
-
- ))}
-
-
-
-
*/}
-
- {renderList(skills().value, (item) => (
-
-
-
-
- ))}
- {renderList(36 - skills().value.length, (item) => (
-
- ))}
-
- {renderList(
- Object.keys(lvInfo.value).filter(
- (a) => !!lvInfo.value[a].up && lvInfo.value[a].up > 0,
- ),
- (index) => {
- const skill = props.skills.find((a) => a.id.toString() === index)
- let tooltip = ''
- if (skill) {
- if (lvInfo.value[skill.id.toString()].up == 1) {
- tooltip = `技能攻击力 +${skill.learnLv < 35 ? '60' : 55}%`
- }
- if (lvInfo.value[skill.id.toString()].up == 2) {
- tooltip = `技能攻击力 +${skill.learnLv < 35 ? '43' : 38}%
技能冷却时间 -15%` - } - } + - return skill ? ( -
- 技能冷却时间 -15%` - } - } + - return skill ? ( -
-
- ) : (
- <>
- )
- },
- )}
-
-
-
-
- 目标技能
+
+ {targetSkills.map((skill) => (
+
+
+
+ {selectedSkillIds.value.map((skillId) => {
+ const skill = props.skills.find(
+ (candidate) => candidate.id.toString() === skillId,
+ )
+ if (!skill) return null
+
+ return (
+
+
+
+ )
+ })}
+
+
+
+
+
{renderList(skills.value, (item) => (
-
-
{item.learnLv}
-
-
-
+
+
{item.learnLv}
+
+
{renderList(2, (index) => (
+
{item.name}
{
emit('chooseSkill', item.id)
itemChecked(item.id.toString(), index).value = !itemChecked(
@@ -81,43 +78,38 @@ export default defineComponent({
{' '}
-
-
-
+
diff --git a/frontend-ui/src/pages/Character/Skill/components/SkillVP/style.scss b/frontend-ui/src/pages/Character/Skill/components/SkillVP/style.scss
index e5cae6b1..abc6508a 100644
--- a/frontend-ui/src/pages/Character/Skill/components/SkillVP/style.scss
+++ b/frontend-ui/src/pages/Character/Skill/components/SkillVP/style.scss
@@ -1,3 +1,53 @@
+.skill-vp-list {
+ display: flex;
+ box-sizing: content-box;
+ width: max-content;
+ min-width: 100%;
+ height: auto;
+ padding-block: 2px;
+ flex-direction: column;
+ background: #080808;
+}
+
+.skill-vp-list__row {
+ display: flex;
+ box-sizing: content-box;
+ min-width: 540px;
+ height: 140px;
+ padding-right: 16px;
+ padding-left: 26px;
+ align-items: center;
+}
+
+.skill-vp-list__learn-level {
+ width: 30px;
+ color: #816f4c;
+ text-align: center;
+}
+
+.skill-vp-list__identity {
+ display: flex;
+ width: 150px;
+ align-items: center;
+ gap: 5px;
+}
+
+.skill-vp-list__icon-frame,
+.vp-item__icon-frame {
+ box-sizing: border-box;
+ width: 28px;
+ height: 28px;
+ flex: 0 0 28px;
+ border: 1px solid #3f382e;
+ border-radius: 4px;
+
+ img {
+ display: block;
+ width: 28px;
+ height: 28px;
+ }
+}
+
.vp {
&:nth-child(n + 1) {
background-color: #000000;
@@ -16,6 +66,10 @@
background-image: url(./img/bg.png);
// padding:5px 10px ;
box-sizing: border-box;
+
+ &--first {
+ margin-left: auto;
+ }
}
.selected {
@@ -45,3 +99,64 @@
background-image: url(../img/vp_2.png);
}
}
+
+.vp-item__content {
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ margin: 2px;
+ padding-top: 5px;
+}
+
+.vp-item__header {
+ display: flex;
+ box-sizing: border-box;
+ width: 100%;
+ height: 30px;
+ padding-inline: 10px;
+ justify-content: space-between;
+}
+
+.vp-item__checkbox {
+ display: flex;
+ align-items: flex-start;
+}
+
+.vp-item__icon-frame {
+ position: relative;
+ display: inline-block;
+}
+
+.vp-item__icon-tint {
+ position: absolute;
+ z-index: 5;
+ top: 1px;
+ left: 1px;
+ width: 26px;
+ height: 26px;
+ background: #a128f4;
+}
+
+.vp-item__badge {
+ position: absolute;
+ z-index: 10;
+ bottom: -8px;
+ left: 5px;
+}
+
+.vp-item__balance {
+ width: 16px;
+}
+
+.vp-item__name {
+ margin-top: 5px;
+ font-size: 13px;
+ text-align: center;
+}
+
+.vp-item__description {
+ color: #816f4c;
+ font-size: 12px;
+ line-height: 1;
+ text-align: center;
+}
diff --git a/frontend-ui/src/pages/Character/Skill/index.vue b/frontend-ui/src/pages/Character/Skill/index.vue
index 7aeed4fb..c5cffe1d 100644
--- a/frontend-ui/src/pages/Character/Skill/index.vue
+++ b/frontend-ui/src/pages/Character/Skill/index.vue
@@ -1,25 +1,13 @@
-
+ = 5 && lvInfo.value[item.id.toString()]?.vp == 0
}
/>
-
-
+
-
+
-
+
-
-
- {item.vps[index - 1]?.name}
+
+ {item.vps[index - 1]?.name}
{renderList(
item.vps[index - 1]?.desc
? item.vps[index - 1].desc.replace(/{desc}
+ {desc}
),
)}
-
-
-
- 技能加点
-
- |
-
- 技能定制
-
+
+
+
+
- 技能加点
+ |
+ 技能定制
-
+
+
+
技能突破
技能进化
-
+
-
-
+
+
@@ -70,7 +56,7 @@
- 
+
技能详情
+
技能详情
diff --git a/frontend-ui/src/pages/Home/Index.vue b/frontend-ui/src/pages/Home/Index.vue
index c5c38387..af783c94 100644
--- a/frontend-ui/src/pages/Home/Index.vue
+++ b/frontend-ui/src/pages/Home/Index.vue
@@ -5,6 +5,7 @@ import type { IAlterInfo } from '@/api/info/type'
import { getImageURL } from '@/utils/images'
import router from '@/router'
import { useDialog } from '@/components/hooks/dialog'
+import { UiButton } from '@/components/ui/button'
function job_icon(child: IAlterInfo) {
return {
@@ -38,7 +39,7 @@ export default defineComponent(async () => {
return (
{renderList(options, (option) => (
- {
window.open('/character/' + (option.value || option.name), '_blank')
@@ -46,7 +47,7 @@ export default defineComponent(async () => {
}}
>
{option.title}
-
+
))}
)
diff --git a/frontend-ui/src/router/index.ts b/frontend-ui/src/router/index.ts
index b8c81fef..fb8cc5a9 100644
--- a/frontend-ui/src/router/index.ts
+++ b/frontend-ui/src/router/index.ts
@@ -27,6 +27,7 @@ const routes: RouteRecordRaw[] = [
},
{
path: '/character/:alter',
+ meta: { disableAppZoom: true },
redirect: (to) => {
return { path: `/character/equipment/${to.params.alter}`, query: to.query }
},
@@ -40,12 +41,6 @@ const routes: RouteRecordRaw[] = [
props: true,
component: () => import('@/pages/Character/EquipmentDictionary/Index.vue'),
},
- // {
- // path: '/character/equipment/:alter',
- // name: 'equipment',
- // props: true,
- // component: (() => import('@/pages/Character/Equipment/Index.vue')),
- // },{
{
path: '/character/skill/:alter',
name: 'skill',
diff --git a/frontend-ui/src/style/app.scss b/frontend-ui/src/style/app.scss
index 9c0922c5..2745c240 100644
--- a/frontend-ui/src/style/app.scss
+++ b/frontend-ui/src/style/app.scss
@@ -66,10 +66,12 @@ body,
}
* {
+ box-sizing: border-box;
// font-family: "ArkPixel", "Consola", sans-serif;
font-family: 'dcalc', 'SimSun';
// font-family: "STSong";
- font-size: 12px;
+ // Pages can opt into a fluid type scale without changing the global document root.
+ font-size: var(--app-font-size, 12px);
text-shadow:
0 0 1px #000,
0 0 1px #000,
@@ -110,6 +112,11 @@ body,
// letter-spacing: -0.5px;
}
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
@mixin pointer() {
cursor: var(--cursor-pointer);
diff --git a/frontend-ui/src/style/themes/dcalc.css b/frontend-ui/src/style/themes/dcalc.css
index 35441612..0c16650f 100644
--- a/frontend-ui/src/style/themes/dcalc.css
+++ b/frontend-ui/src/style/themes/dcalc.css
@@ -73,6 +73,11 @@
--ui-option-highlight-foreground: #f3d777;
--ui-option-active-background: #07121b;
--ui-option-active-foreground: #fff0a4;
+ /* CommandInput prefix anatomy and semantic success state. */
+ --ui-command-prefix-border: #5e4c2d;
+ --ui-command-prefix-background: #191712;
+ --ui-command-prefix-foreground: #d7c47e;
+ --ui-command-prefix-success: #9bd8a7;
/* Tabs, including the list-owned animated arrow/line marker. */
--ui-tab-list-background: #090709;
--ui-tab-divider: #584840;
@@ -250,6 +255,22 @@
--ui-menu-highlight-foreground: #ffefad;
--ui-menu-highlight-inset: rgb(132 113 76 / 13%);
--ui-menu-danger: #eb7c79;
+ /* Rarity badge and full-size settings menu semantic surfaces. */
+ --ui-level-badge-border: #6b5432;
+ --ui-level-badge-background: linear-gradient(#22231f, #111210);
+ --ui-level-badge-foreground: #e3bf46;
+ --ui-settings-dropdown-border: #463923;
+ --ui-settings-dropdown-background: #050606;
+ --ui-settings-dropdown-shadow: 0 14px 28px #000;
+ --ui-settings-dropdown-title-border: #554527;
+ --ui-settings-dropdown-title-background: linear-gradient(#302814, #151008);
+ --ui-settings-dropdown-title-foreground: #d8b44f;
+ --ui-settings-dropdown-item-border: #2d2c28;
+ --ui-settings-dropdown-item-background: linear-gradient(#181a19, #0c0d0c);
+ --ui-settings-dropdown-item-foreground: #cab980;
+ --ui-settings-dropdown-focus-border: #278bc0;
+ --ui-settings-dropdown-focus-background: #101d2b;
+ --ui-settings-dropdown-focus-foreground: #cab980;
/* Dialog window chrome. The focused frame animation remains an original raster asset. */
--ui-dialog-border: #6c5a37;
--ui-dialog-background: #050606;
@@ -264,6 +285,8 @@
--ui-dialog-footer-border: #332c22;
--ui-dialog-footer-background: linear-gradient(#20201d, #11110f);
--ui-tabs-content-background: rgb(0 0 0 / 22%);
+ /* UtilitySheet keeps dialog chrome but owns its scrollable body surface. */
+ --ui-utility-sheet-body-background: #050606;
/* Item-slot emphasis and lock overlays. Rarity frame colors remain asset/data semantics. */
--ui-item-slot-background: #030404;
--ui-item-slot-emphasis: #ffa800;
@@ -286,6 +309,14 @@
--ui-table-header-border: #070806;
--ui-table-header-inset: #4a3c26;
--ui-table-header-highlight: #65502a;
+ /* DataTable structural rows: notes, fixed summaries and bottom utility actions. */
+ --ui-table-note-row-background: #101210;
+ --ui-table-note-row-foreground: #a7a396;
+ --ui-table-summary-border: #4a3c26;
+ --ui-table-summary-background: #090a07;
+ --ui-table-summary-foreground: #d2c78f;
+ --ui-table-footer-border: #2c2b26;
+ --ui-table-footer-background: #070807;
/* Autocomplete, navigation and collapsible data-section compositions. */
--ui-composition-border: #292b27;
--ui-composition-background: #070807;
@@ -294,6 +325,10 @@
--ui-navigation-foreground: #c5b573;
--ui-navigation-selected-background: linear-gradient(90deg, #80601b, #1b160b 72%);
--ui-navigation-selected-foreground: #f1d66e;
+ /* FavoriteDrawer header feedback, source orange marker and disclosure arrow. */
+ --ui-favorite-drawer-header-hover-background: linear-gradient(#35342f, #191a17);
+ --ui-favorite-drawer-mark: #d47b22;
+ --ui-favorite-drawer-arrow: #c8b36d;
--ui-disclosure-border: #4b3d26;
--ui-disclosure-background: #070807;
--ui-disclosure-header-background: linear-gradient(#2a2925, #10110f);
@@ -345,6 +380,55 @@
--ui-shop-action-background: linear-gradient(180deg, #1261a4, #071f3b);
--ui-shop-action-hover-background: linear-gradient(180deg, #1d9bdb, #0b325e);
--ui-shop-action-inset: #0f0f0f;
+ /* Character page chrome separates functional rails while preserving the source character art. */
+ --ui-character-backdrop: rgb(
+ 50 50 50 / 75%
+ ); /* Matches the established frontend character-art veil. */
+ --ui-character-chrome-border: #3f3424;
+ --ui-character-chrome-background: rgb(7 7 7 / 92%);
+ --ui-character-chrome-shadow: 0 2px 14px rgb(0 0 0 / 42%);
+ --ui-character-stage-glow: transparent; /* Stage decoration stays neutral until the later art-direction pass. */
+ /* Result panels share one visual contract for overview, compact drawer and full damage table. */
+ --ui-result-panel-border: #4b3d26;
+ --ui-result-panel-background: linear-gradient(180deg, rgb(8 9 8 / 94%), rgb(1 2 1 / 90%));
+ --ui-result-panel-shadow: inset 0 1px 0 rgb(214 196 135 / 7%), 0 14px 28px rgb(0 0 0 / 38%);
+ --ui-result-header-background: linear-gradient(180deg, #2b2817, #171407);
+ --ui-result-header-foreground: #bc9e58;
+ --ui-result-row-background: rgb(0 1 0 / 78%);
+ --ui-result-row-alt-background: rgb(11 9 11 / 82%);
+ --ui-result-row-hover-background: #07131b;
+ --ui-result-divider: #292720;
+ --ui-result-total-background: linear-gradient(180deg, #17150d, #090a07);
+ --ui-result-total-label: #9a7e4a;
+ --ui-result-total-value: #f4e3a0;
+ --ui-result-toggle-border: #806329;
+ --ui-result-toggle-background: linear-gradient(180deg, #2a3552, #141d2d);
+ --ui-result-toggle-foreground: #e5ca7d;
+ --ui-result-toggle-shadow: 0 8px 18px rgb(0 0 0 / 54%);
+ /* Equipment domain colors retain frontend's tooltip/list hierarchy through theme variables. */
+ --ui-equipment-slot-border: rgb(122 122 122 / 50%);
+ --ui-equipment-slot-foreground: rgb(255 255 255 / 50%);
+ --ui-equipment-icon-inactive-overlay: rgb(0 0 0 / 56%);
+ --ui-equipment-rarity-swatch-highlight: rgb(255 255 255 / 82%);
+ --ui-equipment-rarity-primeval-background: linear-gradient(
+ to bottom,
+ #58fa84 20%,
+ #58decc 40%,
+ #58c6ff 60%
+ );
+ --ui-equipment-info-shell-background: #222;
+ --ui-equipment-info-background: #000;
+ --ui-equipment-info-foreground: #9d9476;
+ --ui-equipment-info-category: #3ea74e;
+ --ui-equipment-info-type: #7c6430;
+ --ui-equipment-info-attribute: #908150;
+ --ui-equipment-info-detail: #ded29a;
+ --ui-equipment-info-buffer-heading: #a48b2e;
+ --ui-equipment-info-divider: rgb(
+ 243 244 246 / 30%
+ ); /* Thin source-style separators inside equipment descriptions. */
+ --ui-equipment-info-markup: #3d9147; /* Highlighted bracket markup from the original DCalc equipment tooltip. */
+ --ui-equipment-info-text-shadow: #000;
/* Panel elevation, intentionally separate from popup and dialog elevation. */
--ui-panel-background: linear-gradient(180deg, rgb(20 22 22 / 98%), rgb(7 8 8 / 98%));
--ui-panel-shadow: inset 0 1px 0 rgb(214 196 135 / 6%), 0 12px 28px rgb(0 0 0 / 32%);
diff --git a/frontend-ui/src/style/themes/midnight.css b/frontend-ui/src/style/themes/midnight.css
index 83616c64..663279a2 100644
--- a/frontend-ui/src/style/themes/midnight.css
+++ b/frontend-ui/src/style/themes/midnight.css
@@ -57,6 +57,11 @@
--ui-option-highlight-foreground: #e4f2ff;
--ui-option-active-background: #102845;
--ui-option-active-foreground: #ffffff;
+ /* CommandInput prefix anatomy and semantic success state. */
+ --ui-command-prefix-border: #40577a;
+ --ui-command-prefix-background: #111827;
+ --ui-command-prefix-foreground: #dcecff;
+ --ui-command-prefix-success: #6fc58a;
/* Tabs and animated marker. */
--ui-tab-list-background: #0b111d;
--ui-tab-divider: #40577a;
@@ -257,6 +262,22 @@
--ui-menu-highlight-foreground: #ffffff;
--ui-menu-highlight-inset: rgb(143 196 241 / 14%);
--ui-menu-danger: #f08b94;
+ /* Rarity badge and full-size settings menu semantic surfaces. */
+ --ui-level-badge-border: #40577a;
+ --ui-level-badge-background: linear-gradient(#18253a, #0b111d);
+ --ui-level-badge-foreground: #9ac8ef;
+ --ui-settings-dropdown-border: #40577a;
+ --ui-settings-dropdown-background: #080d16;
+ --ui-settings-dropdown-shadow: 0 14px 28px #020611;
+ --ui-settings-dropdown-title-border: #526f98;
+ --ui-settings-dropdown-title-background: linear-gradient(#263b57, #101a29);
+ --ui-settings-dropdown-title-foreground: #9ac8ef;
+ --ui-settings-dropdown-item-border: #263b57;
+ --ui-settings-dropdown-item-background: linear-gradient(#16243a, #0b111d);
+ --ui-settings-dropdown-item-foreground: #a9c9e7;
+ --ui-settings-dropdown-focus-border: #6fb5df;
+ --ui-settings-dropdown-focus-background: #12345c;
+ --ui-settings-dropdown-focus-foreground: #edf5ff;
/* Dialog window chrome and focused title bar. */
--ui-dialog-border: #526f98;
--ui-dialog-background: #080d16;
@@ -271,6 +292,8 @@
--ui-dialog-footer-border: #2b3b55;
--ui-dialog-footer-background: linear-gradient(#1a2435, #101722);
--ui-tabs-content-background: rgb(2 6 14 / 30%);
+ /* UtilitySheet keeps dialog chrome but owns its scrollable body surface. */
+ --ui-utility-sheet-body-background: #080d16;
/* Item and dense data-display states. */
--ui-item-slot-background: #080d16;
--ui-item-slot-emphasis: #6fb5e6;
@@ -292,6 +315,14 @@
--ui-table-header-border: #111c2c;
--ui-table-header-inset: #40577a;
--ui-table-header-highlight: #658db8;
+ /* DataTable structural rows: notes, fixed summaries and bottom utility actions. */
+ --ui-table-note-row-background: #111827;
+ --ui-table-note-row-foreground: #8da0bc;
+ --ui-table-summary-border: #40577a;
+ --ui-table-summary-background: #0b111d;
+ --ui-table-summary-foreground: #c9d8ef;
+ --ui-table-footer-border: #26364f;
+ --ui-table-footer-background: #080d16;
/* Autocomplete, navigation and collapsible data-section compositions. */
--ui-composition-border: #26364f;
--ui-composition-background: #0b111d;
@@ -300,6 +331,10 @@
--ui-navigation-foreground: #c9d8ef;
--ui-navigation-selected-background: linear-gradient(90deg, #315c97, #172b4b 72%);
--ui-navigation-selected-foreground: #ffffff;
+ /* FavoriteDrawer header feedback, warm marker and disclosure arrow. */
+ --ui-favorite-drawer-header-hover-background: linear-gradient(#34475f, #1b2a3e);
+ --ui-favorite-drawer-mark: #d4a66d;
+ --ui-favorite-drawer-arrow: #9ac8ef;
--ui-disclosure-border: #40577a;
--ui-disclosure-background: #0b111d;
--ui-disclosure-header-background: linear-gradient(#29384d, #151f2e);
@@ -351,6 +386,59 @@
--ui-shop-action-background: linear-gradient(180deg, #315c97, #172b4b);
--ui-shop-action-hover-background: linear-gradient(180deg, #477cb5, #295987);
--ui-shop-action-inset: #080d16;
+ /* Character page chrome mirrors the DCalc layout contract with a cooler night treatment. */
+ --ui-character-backdrop:
+ linear-gradient(
+ 90deg,
+ rgb(2 6 14 / 78%) 0%,
+ rgb(2 6 14 / 38%) 29%,
+ rgb(2 6 14 / 18%) 53%,
+ rgb(2 6 14 / 68%) 100%
+ ),
+ radial-gradient(ellipse at 54% 42%, transparent 0 21%, rgb(2 6 14 / 44%) 78%);
+ --ui-character-chrome-border: #40577a;
+ --ui-character-chrome-background: rgb(8 13 22 / 94%);
+ --ui-character-chrome-shadow: 0 2px 16px rgb(2 6 14 / 52%);
+ --ui-character-stage-glow: radial-gradient(ellipse, rgb(111 181 230 / 18%), transparent 68%);
+ /* Result panels share one visual contract for overview, compact drawer and full damage table. */
+ --ui-result-panel-border: #40577a;
+ --ui-result-panel-background: linear-gradient(180deg, rgb(11 17 29 / 95%), rgb(5 9 16 / 92%));
+ --ui-result-panel-shadow: inset 0 1px 0 rgb(143 196 241 / 8%), 0 16px 30px rgb(2 6 14 / 46%);
+ --ui-result-header-background: linear-gradient(180deg, #29384d, #151f2e);
+ --ui-result-header-foreground: #c9d8ef;
+ --ui-result-row-background: rgb(8 13 22 / 82%);
+ --ui-result-row-alt-background: rgb(17 24 39 / 84%);
+ --ui-result-row-hover-background: #102845;
+ --ui-result-divider: #26364f;
+ --ui-result-total-background: linear-gradient(180deg, #1a2435, #0b111d);
+ --ui-result-total-label: #8da0bc;
+ --ui-result-total-value: #dcecff;
+ --ui-result-toggle-border: #526f98;
+ --ui-result-toggle-background: linear-gradient(180deg, #315c97, #172b4b);
+ --ui-result-toggle-foreground: #dcecff;
+ --ui-result-toggle-shadow: 0 8px 20px rgb(2 6 14 / 58%);
+ /* Equipment domain colors retain information hierarchy while following the midnight palette. */
+ --ui-equipment-slot-border: rgb(111 145 186 / 56%);
+ --ui-equipment-slot-foreground: rgb(220 236 255 / 58%);
+ --ui-equipment-icon-inactive-overlay: rgb(2 6 14 / 62%);
+ --ui-equipment-rarity-swatch-highlight: rgb(220 236 255 / 84%);
+ --ui-equipment-rarity-primeval-background: linear-gradient(
+ to bottom,
+ #58fa84 20%,
+ #58decc 40%,
+ #58c6ff 60%
+ );
+ --ui-equipment-info-shell-background: #111827;
+ --ui-equipment-info-background: #080d16;
+ --ui-equipment-info-foreground: #a9c9e7;
+ --ui-equipment-info-category: #6fc58a;
+ --ui-equipment-info-type: #8da0bc;
+ --ui-equipment-info-attribute: #9ac8ef;
+ --ui-equipment-info-detail: #dcecff;
+ --ui-equipment-info-buffer-heading: #d4a66d;
+ --ui-equipment-info-divider: #40577a;
+ --ui-equipment-info-markup: #c9d8ef;
+ --ui-equipment-info-text-shadow: #020611;
/* Panel elevation. */
--ui-panel-background: linear-gradient(180deg, rgb(17 24 39 / 98%), rgb(7 12 22 / 98%));
--ui-panel-shadow: inset 0 1px 0 rgb(143 196 241 / 8%), 0 12px 30px rgb(0 0 0 / 40%);
diff --git a/frontend-ui/src/style/tokens/primitives.css b/frontend-ui/src/style/tokens/primitives.css
index 28e92b49..b4952553 100644
--- a/frontend-ui/src/style/tokens/primitives.css
+++ b/frontend-ui/src/style/tokens/primitives.css
@@ -53,6 +53,13 @@
--ui-control-line-height: 1;
--ui-control-gap: 7px;
--ui-control-text-offset-y: 0px; /* Optical font correction only; never use for layout. */
+ /* Shared interaction geometry keeps borders, focus rings and pressed motion consistent. */
+ --ui-component-stroke-size: 1px;
+ --ui-focus-outline-size: 1px;
+ --ui-focus-outline-offset: -2px;
+ --ui-pressed-offset: 1px;
+ --ui-control-disabled-opacity: 0.48;
+ --ui-popup-z-index: 80;
--ui-field-padding-inline: 9px;
--ui-option-height: 27px;
--ui-tabs-height: 40px;
@@ -100,8 +107,15 @@
--ui-item-image-size: 28px;
--ui-item-frame-inset: 5px;
--ui-table-row-min-block-size: 38px;
+ --ui-table-row-compact-block-size: 20px;
+ --ui-table-compact-font-size: 11px;
--ui-table-header-block-size: 30px;
--ui-table-scroll-inline-size: 560px;
+ --ui-table-note-row-min-block-size: 34px;
+ --ui-table-note-row-padding: 6px 10px;
+ --ui-table-empty-min-block-size: 80px;
+ --ui-table-footer-min-block-size: 30px;
+ --ui-table-footer-padding: 4px 8px;
--ui-panel-heading-block-size: 46px;
--ui-dialog-viewport-inline-size: 92vw;
--ui-dialog-max-inline-size: 620px;
@@ -111,6 +125,13 @@
--ui-dialog-close-size: 20px;
--ui-dialog-close-glyph-inline-size: 10px;
--ui-dialog-close-glyph-block-size: 9px;
+ /* Dialog compositions use these body metrics without overriding primitive internals. */
+ --ui-dialog-body-min-inline-size: 220px;
+ --ui-dialog-body-min-block-size: 48px;
+ --ui-dialog-body-max-block-size: calc(
+ 100dvh - 16px - var(--ui-dialog-header-block-size) - var(--ui-dialog-footer-min-block-size)
+ );
+ --ui-dialog-body-padding: 12px;
--ui-tab-marker-inline-size: 39px;
--ui-tab-marker-block-size: 5px;
--ui-tab-marker-arrow-inline-size: 9px;
@@ -121,6 +142,18 @@
--ui-autocomplete-max-block-size: 240px;
--ui-autocomplete-trigger-gap: 4px;
--ui-autocomplete-indicator-font-size: 8px;
+ /* CommandInput keeps its prompt and suggestion prefixes independently resizable. */
+ --ui-command-prefix-min-inline-size: 52px;
+ --ui-command-option-prefix-min-inline-size: 42px;
+ /* SearchTree separates toolbar controls, scrolling height and hierarchy indentation. */
+ --ui-search-tree-icon-size: 18px;
+ --ui-search-tree-clear-size: 9px;
+ --ui-search-tree-action-min-inline-size: 58px;
+ --ui-search-tree-block-size: 170px;
+ --ui-search-tree-indent: 24px;
+ --ui-search-tree-row-block-size: 26px;
+ --ui-search-tree-node-icon-size: 12px;
+ --ui-search-tree-depth-step: 20px;
--ui-tree-select-min-inline-size: 230px;
--ui-tree-select-max-block-size: 280px;
--ui-tree-item-block-size: 24px;
@@ -155,6 +188,105 @@
--ui-settings-row-padding-block: 5px;
--ui-settings-row-padding-inline: 10px;
--ui-settings-indent-step: 14px;
+ /*
+ * Rarity overlays. Notice markers are positioned outside their owner while level badges reserve
+ * the taller source-art silhouette; callers may override these metrics per equipment density.
+ */
+ --ui-notice-badge-size: 12px;
+ --ui-notice-badge-offset: -2px;
+ --ui-level-badge-min-inline-size: 42px;
+ --ui-level-badge-min-block-size: 54px;
+ --ui-level-badge-padding-inline: 6px;
+ --ui-level-badge-font-size: 11px;
+ /*
+ * Desktop settings menu anatomy. Viewport width prevents clipping on narrow desktop windows;
+ * row and icon columns remain independently adjustable for denser application shells.
+ */
+ --ui-settings-dropdown-z-index: 80;
+ --ui-settings-dropdown-viewport-inline-size: calc(100vw - 16px);
+ --ui-settings-dropdown-inline-size: 275px;
+ --ui-settings-dropdown-padding: 4px;
+ --ui-settings-dropdown-title-min-block-size: 36px;
+ --ui-settings-dropdown-title-gap: 0px;
+ --ui-settings-dropdown-title-padding-inline: 8px;
+ --ui-settings-dropdown-item-min-block-size: 48px;
+ --ui-settings-dropdown-item-padding-inline: 8px;
+ --ui-settings-dropdown-icon-column-size: 45px;
+ --ui-settings-dropdown-icon-max-size: 24px;
+ --ui-settings-dropdown-focus-outline-size: 2px;
+ --ui-settings-dropdown-focus-outline-offset: -3px;
+ --ui-settings-dropdown-disabled-opacity: 0.42;
+ --ui-settings-dropdown-enter-offset: -2px;
+ /*
+ * Utility sheets reuse dialog chrome while exposing three content-width contracts. Separate body
+ * minimums let composed tools retain their source proportions without fixed component selectors.
+ */
+ --ui-utility-sheet-viewport-inline-size: calc(100vw - 16px);
+ --ui-utility-sheet-compact-inline-size: 310px;
+ --ui-utility-sheet-default-inline-size: 390px;
+ --ui-utility-sheet-wide-inline-size: 620px;
+ --ui-utility-sheet-compact-body-min-block-size: 268px;
+ --ui-utility-sheet-default-body-min-block-size: 340px;
+ --ui-utility-sheet-wide-body-min-block-size: 340px;
+ --ui-utility-sheet-body-max-block-size: calc(100dvh - 96px);
+ --ui-utility-sheet-body-padding: 8px;
+ /*
+ * Character workspace geometry. Page rails are fluid while item sprites and one-pixel borders
+ * stay close to their source pixel grid. Result widths are shared by the shell and Skill drawer.
+ */
+ --ui-character-workspace-gap: clamp(4px, 0.48vw, 10px);
+ --ui-character-workspace-padding: clamp(4px, 0.48vw, 10px);
+ --ui-character-footer-min-block-size: clamp(38px, 2vw, 42px);
+ --ui-character-footer-padding: clamp(4px, 0.36vw, 7px);
+ --ui-character-toolbar-icon-size: clamp(18px, 1.08vw, 22px);
+ --ui-character-stage-glow-blur: clamp(14px, 1.5vw, 30px);
+ --ui-character-stage-glow-opacity: 0.72;
+ --ui-character-result-info-inline-size: clamp(272px, 14.5vw, 310px);
+ --ui-character-result-summary-inline-size: clamp(292px, 19vw, 360px);
+ --ui-character-result-full-inline-size: clamp(520px, 29vw, 600px);
+ --ui-character-result-panel-padding: clamp(4px, 0.35vw, 7px);
+ --ui-character-result-row-block-size: clamp(34px, 1.8vw, 38px);
+ --ui-character-result-footer-block-size: clamp(40px, 2.2vw, 46px);
+ --ui-character-result-icon-size: clamp(28px, 1.56vw, 32px);
+ --ui-character-result-scrollbar-inline-size: 11px; /* Keeps the header grid aligned with the always-visible result scrollbar. */
+ --ui-character-result-toggle-inline-size: 28px;
+ --ui-character-result-toggle-block-size: 72px;
+ --ui-character-result-count-inline-size: clamp(48px, 2.5vw, 52px);
+ --ui-character-result-share-inline-size: clamp(54px, 3vw, 60px);
+ --ui-character-result-cd-inline-size: clamp(48px, 2.7vw, 54px);
+ --ui-character-result-value-min-inline-size: clamp(96px, 5.2vw, 108px);
+ /* Equipment dictionaries keep the familiar ten-icon rail and reveal details without stretching it. */
+ --ui-equipment-catalog-max-inline-size: clamp(360px, 24vw, 480px);
+ --ui-equipment-detail-inline-size: clamp(230px, 17vw, 300px);
+ --ui-equipment-preview-inline-size: 264px;
+ --ui-equipment-preview-block-size: 177px;
+ --ui-equipment-preview-slot-size: 26px;
+ --ui-equipment-preview-slot-font-size: 12px; /* Fixed artwork labels must stay on one line inside the 26px source slot. */
+ --ui-equipment-preview-avatar-inline-size: 70%;
+ /* Shared Equipment information blocks use these metrics across dictionary and result surfaces. */
+ --ui-equipment-info-padding-inline: 5px;
+ --ui-equipment-info-row-gap: 5px;
+ --ui-equipment-info-icon-size: 28px;
+ --ui-equipment-info-line-height: 15px;
+ /* Domain component aliases keep source-art coordinates explicit and independently overridable. */
+ --ui-equipment-icon-size: var(--ui-item-image-size);
+ --ui-equipment-board-inline-size: var(--ui-equipment-preview-inline-size);
+ --ui-equipment-slot-size: var(--ui-equipment-preview-slot-size);
+ --ui-equipment-slot-z-index: 6;
+ --ui-equipment-subweapon-left: 150px;
+ --ui-equipment-subweapon-top: 5px;
+ --ui-equipment-avatar-inline-size: var(--ui-equipment-preview-avatar-inline-size);
+ --ui-equipment-avatar-bottom-offset: 10px;
+ --ui-equipment-rarity-swatch-size: 14px;
+ --ui-equipment-rarity-swatch-gap: 8px;
+ --ui-equipment-rarity-mark-inline-size: 12px;
+ --ui-equipment-rarity-mark-block-size: 10px;
+ --ui-equipment-info-inline-size: 220px;
+ --ui-equipment-info-padding: var(--ui-equipment-info-padding-inline);
+ --ui-equipment-info-row-block-size: 30px;
+ --ui-equipment-info-section-gap: 2px;
+ --ui-equipment-info-detail-padding-block: 4px;
+ --ui-equipment-info-buffer-gap: 10px;
--ui-shop-row-min-block-size: 48px;
--ui-shop-row-scroll-inline-size: 760px;
--ui-shop-row-gap: 4px;