mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-05-14 10:06:00 +00:00
ebe57ef273
CustomStatistic.vue and SettingListItem.vue are mechanical
Vue.component → SFC ports.
AppSidebar.vue: AD-Vue 4 dropped <a-icon :type="dynamic">, so the
five sidebar icons (dashboard/user/setting/tool/logout) live in a
name→component map and render via <component :is>. The legacy
<a-drawer slot="handle"> hack is replaced with a sibling fixed-
position toggle button. Tab paths take basePath/requestUri as
props instead of pulling them from Go template scope.
TableSortable.vue: the biggest Vue 3 rewrite of this phase.
- $listeners is gone — replaced by inheritAttrs: false +
explicit attrs forwarding
- scopedSlots: this.$scopedSlots collapsed into Vue 3's unified
slots object — just iterate Object.keys(this.slots) and forward
- Vue 2 h(tag, { props, on, scopedSlots }, children) →
Vue 3 h(tag, { ...props, ...on }, slotsObject)
- 'a-table' string → resolveComponent('a-table') so app.use(Antd)
registration is honored
- inject: ['sortable'] (Options API) → inject('sortable', null)
(Composition API) inside the trigger child
- beforeDestroy → beforeUnmount
- customRow's return shape flattened (no nested props/on/class)
Two intentional skips, documented in the migration doc:
- aClientTable.html — slot fragments, not a component. Migrates
inline with inbounds.html (new Phase 5f).
- aPersianDatepicker.html — wraps a Persian-only third-party
lib; defer until settings.html lands.
Build verified with vite 8.0.11.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
27 lines
579 B
Vue
27 lines
579 B
Vue
<script setup>
|
|
defineProps({
|
|
title: { type: String, default: '' },
|
|
value: { type: [String, Number], default: '' },
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<a-statistic :title="title" :value="value">
|
|
<template #prefix><slot name="prefix" /></template>
|
|
<template #suffix><slot name="suffix" /></template>
|
|
</a-statistic>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.ant-statistic-content) {
|
|
font-size: 16px;
|
|
}
|
|
|
|
:global(body.dark .ant-statistic-content) {
|
|
color: var(--dark-color-text-primary);
|
|
}
|
|
|
|
:global(body.dark .ant-statistic-title) {
|
|
color: rgba(255, 255, 255, 0.55);
|
|
}
|
|
</style>
|