ваше сообщение коммита
This commit is contained in:
@@ -44,5 +44,6 @@
|
||||
"stylelint-config-prettier": "^9.0.5",
|
||||
"stylelint-config-standard-vue": "^1.0.0",
|
||||
"vite": "^6.2.3"
|
||||
}
|
||||
},
|
||||
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||
}
|
||||
|
||||
@@ -18,11 +18,41 @@
|
||||
const isLoading = ref(false);
|
||||
|
||||
// Использование composable для аутентификации
|
||||
const { isAuthenticated } = useAuth();
|
||||
const auth = useAuth();
|
||||
|
||||
watch(isAuthenticated, (newValue, oldValue) => {
|
||||
// Мониторинг изменений состояния аутентификации
|
||||
watch(auth.isAuthenticated, (newValue, oldValue) => {
|
||||
if (newValue !== oldValue) {
|
||||
console.log('Состояние аутентификации изменилось:', newValue);
|
||||
console.log('[App] Состояние аутентификации изменилось:', newValue);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 5px solid var(--color-grey-light);
|
||||
border-top: 5px solid var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
|
||||
58
frontend/src/assets/styles/base.css
Normal file
58
frontend/src/assets/styles/base.css
Normal file
@@ -0,0 +1,58 @@
|
||||
/* frontend/src/assets/styles/base.css */
|
||||
|
||||
/* Общие стили для всех элементов */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-white);
|
||||
color: var(--color-dark);
|
||||
font-size: var(--font-size-md); /* Добавим базовый размер шрифта */
|
||||
line-height: 1.5; /* Добавим базовую высоту строки */
|
||||
}
|
||||
|
||||
/* Стили для монопространственных шрифтов (код, верификация) */
|
||||
code, .verification-code code, .address {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
/* Унификация размеров шрифтов */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 500;
|
||||
line-height: 1.3; /* Сделаем заголовки чуть плотнее */
|
||||
margin-bottom: var(--spacing-md); /* Добавим отступ снизу по умолчанию */
|
||||
}
|
||||
|
||||
h1 { font-size: var(--font-size-xxl); }
|
||||
h2 { font-size: var(--font-size-xl); }
|
||||
h3 { font-size: var(--font-size-lg); }
|
||||
/* h3 из home.css имел margin-bottom, убрали здесь, чтобы не дублировать */
|
||||
|
||||
p {
|
||||
/* font-size и line-height уже заданы для body */
|
||||
margin-bottom: var(--spacing-md); /* Добавим отступ снизу */
|
||||
}
|
||||
|
||||
input, textarea, button {
|
||||
font-family: inherit; /* Наследуем шрифт */
|
||||
font-size: inherit; /* Наследуем размер шрифта */
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer; /* Указатель для всех кнопок */
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary); /* Базовый цвет ссылок */
|
||||
text-decoration: none; /* Убираем подчеркивание по умолчанию */
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline; /* Подчеркивание при наведении */
|
||||
}
|
||||
@@ -51,7 +51,6 @@
|
||||
--transition-normal: 0.3s ease;
|
||||
|
||||
/* Размеры компонентов */
|
||||
--sidebar-width: 110px;
|
||||
--sidebar-expanded-width: 325px;
|
||||
--nav-btn-size: 40px;
|
||||
--chat-input-min-height: 100px;
|
||||
@@ -130,16 +129,13 @@ input, textarea {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-lg);
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
|
||||
/* Адаптация контента при боковой панели */
|
||||
.sidebar-expanded ~ .main-content {
|
||||
margin-left: 190px;
|
||||
}
|
||||
|
||||
.main-content.no-right-sidebar {
|
||||
margin-right: 190px;
|
||||
}
|
||||
@@ -148,159 +144,15 @@ input, textarea {
|
||||
margin-right: 190px;
|
||||
}
|
||||
|
||||
/* Стили для боковой панели (sidebar) */
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
min-width: var(--sidebar-width);
|
||||
background-color: var(--color-light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: var(--spacing-lg);
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
z-index: 2;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.sidebar.sidebar-expanded {
|
||||
width: var(--sidebar-expanded-width);
|
||||
min-width: var(--sidebar-expanded-width);
|
||||
}
|
||||
|
||||
/* Кнопка меню в боковой панели */
|
||||
.menu-button {
|
||||
width: var(--nav-btn-size);
|
||||
height: var(--nav-btn-size);
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-dark);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 68px;
|
||||
position: fixed;
|
||||
left: 35px;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
background-color: var(--color-dark);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hamburger::before,
|
||||
.hamburger::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
background-color: var(--color-dark);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.hamburger::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.hamburger::after {
|
||||
bottom: -8px;
|
||||
}
|
||||
|
||||
/* Навигационные кнопки */
|
||||
.nav-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-lg);
|
||||
width: var(--sidebar-width);
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
left: 35px;
|
||||
top: 108px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: var(--nav-btn-size);
|
||||
height: var(--nav-btn-size);
|
||||
border: 1px solid var(--color-dark);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-white);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.nav-btn-text {
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--color-dark);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
left: 65px;
|
||||
}
|
||||
|
||||
.sidebar-expanded .nav-btn-text {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.nav-btn-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar-expanded .nav-btn {
|
||||
width: auto;
|
||||
min-width: 200px;
|
||||
text-align: left;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
/* Кнопка в нижней части боковой панели */
|
||||
.sidebar-bottom-btn {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
left: 35px;
|
||||
width: var(--nav-btn-size);
|
||||
height: var(--nav-btn-size);
|
||||
transition: width var(--transition-normal);
|
||||
}
|
||||
|
||||
.sidebar-expanded .sidebar-bottom-btn {
|
||||
width: auto;
|
||||
min-width: 200px;
|
||||
text-align: left;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.sidebar-expanded .nav-btn-number {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.sidebar-expanded .sidebar-bottom-btn .nav-btn-text {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: static;
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Стили для контейнера чата */
|
||||
.chat-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: var(--spacing-lg) 0 35px 0;
|
||||
margin: var(--spacing-lg) auto;
|
||||
min-height: 500px;
|
||||
max-width: 1150px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -316,6 +168,7 @@ input, textarea {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(var(--chat-input-height, 80px) + 15px); /* Добавляем 15px отступа между сообщениями и полем ввода */
|
||||
transition: bottom var(--transition-normal);
|
||||
}
|
||||
|
||||
@@ -660,382 +513,10 @@ input, textarea {
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
/* Блок с кнопкой отключения */
|
||||
.disconnect-block {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.disconnect-btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-error);
|
||||
color: var(--color-error);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: var(--font-size-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
.disconnect-btn:hover {
|
||||
background-color: #ffebee;
|
||||
}
|
||||
|
||||
/* Кнопка закрытия */
|
||||
.close-wallet-sidebar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
min-width: 48px;
|
||||
background-color: var(--color-white);
|
||||
color: var(--color-dark);
|
||||
border: 1px solid var(--color-grey);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
transition: all var(--transition-normal);
|
||||
margin-left: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.close-wallet-sidebar:hover {
|
||||
background-color: var(--color-grey-light);
|
||||
border-color: var(--color-dark);
|
||||
}
|
||||
|
||||
/* Блок идентификаторов */
|
||||
.identifiers-block {
|
||||
width: 100%;
|
||||
background: var(--color-white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.identifiers-block h3 {
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--color-dark);
|
||||
border-bottom: 1px solid var(--color-grey-light);
|
||||
padding-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.identifier-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.identifier-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.identifier-label {
|
||||
min-width: 100px;
|
||||
color: var(--color-grey);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.identifier-value {
|
||||
flex: 1;
|
||||
font-family: monospace;
|
||||
color: var(--color-dark);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Медиа-запросы */
|
||||
@media screen and (min-width: 1200px) {
|
||||
.wallet-sidebar {
|
||||
width: 30%;
|
||||
max-width: 550px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) and (max-width: 1199px) {
|
||||
.wallet-sidebar {
|
||||
width: 40%;
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.wallet-sidebar {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.wallet-sidebar-content {
|
||||
padding: 0;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.disconnect-block {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.disconnect-btn,
|
||||
.close-wallet-sidebar {
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.close-wallet-sidebar {
|
||||
width: 42px;
|
||||
min-width: 42px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.identifiers-block {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.identifier-item {
|
||||
font-size: var(--font-size-sm);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.identifier-label {
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.wallet-sidebar {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.wallet-sidebar-content {
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.disconnect-block {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.disconnect-btn,
|
||||
.close-wallet-sidebar {
|
||||
height: 36px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.close-wallet-sidebar {
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
.identifiers-block {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
/* Стили для блока кнопок авторизации */
|
||||
.auth-buttons-container {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
padding: var(--spacing-lg);
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Стили для заголовка */
|
||||
.header-with-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: var(--nav-btn-size);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Стили для кнопок в заголовке */
|
||||
.header-button {
|
||||
height: var(--nav-btn-size);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: var(--font-size-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
/* Стили для кнопок авторизации */
|
||||
.auth-buttons-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.auth-btn {
|
||||
width: 100%;
|
||||
height: var(--nav-btn-size);
|
||||
border-radius: var(--radius-lg);
|
||||
background-color: var(--color-light);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
color: var(--color-dark);
|
||||
font-size: var(--font-size-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: 0 var(--spacing-md);
|
||||
box-sizing: border-box;
|
||||
transition: all var(--transition-normal);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.auth-btn:hover {
|
||||
background-color: var(--color-grey-light);
|
||||
}
|
||||
|
||||
/* Стили для блока информации о пользователе и баланса токенов */
|
||||
.user-info, .token-balances {
|
||||
background: var(--color-white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.user-info h3, .token-balances h3 {
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--color-dark);
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.user-info-item, .token-balance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.user-info-label, .token-name {
|
||||
min-width: 80px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-info-value, .token-amount {
|
||||
flex: 1;
|
||||
color: var(--color-dark);
|
||||
font-family: monospace;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.token-symbol {
|
||||
margin-left: var(--spacing-xs);
|
||||
color: #666;
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
/* Стили для кнопки бургера в шапке */
|
||||
.header-wallet-btn {
|
||||
margin-left: var(--spacing-lg);
|
||||
padding: var(--spacing-sm);
|
||||
background: transparent;
|
||||
color: var(--color-dark);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
transition: background-color var(--transition-normal);
|
||||
position: relative;
|
||||
width: var(--nav-btn-size);
|
||||
height: var(--nav-btn-size);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-wallet-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.header-wallet-btn .nav-btn-number {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-wallet-btn .nav-btn-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-wallet-btn::before,
|
||||
.header-wallet-btn::after,
|
||||
.header-wallet-btn .hamburger-line {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background-color: var(--color-dark);
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
.header-wallet-btn::before {
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.header-wallet-btn::after {
|
||||
bottom: 12px;
|
||||
}
|
||||
|
||||
.header-wallet-btn .hamburger-line {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Анимация при наведении */
|
||||
.header-wallet-btn:hover::before {
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
.header-wallet-btn:hover::after {
|
||||
bottom: 11px;
|
||||
}
|
||||
|
||||
/* Анимация при активном состоянии */
|
||||
.header-wallet-btn.active::before {
|
||||
transform: rotate(45deg);
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.header-wallet-btn.active::after {
|
||||
transform: rotate(-45deg);
|
||||
bottom: 50%;
|
||||
}
|
||||
|
||||
.header-wallet-btn.active .hamburger-line {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Стили для заголовка */
|
||||
.header {
|
||||
background: var(--color-white);
|
||||
border-bottom: 1px solid var(--color-grey-light);
|
||||
padding: var(--spacing-lg) 0;
|
||||
padding: 15px 20px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
@@ -1134,9 +615,8 @@ input, textarea {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 481px) and (max-width: 768px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
.wallet-sidebar {
|
||||
width: 100%;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
@@ -1145,86 +625,33 @@ input, textarea {
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.sidebar-block {
|
||||
padding: var(--spacing-md);
|
||||
.disconnect-block {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.sidebar-block h3 {
|
||||
font-size: var(--font-size-lg);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
.disconnect-btn,
|
||||
.close-wallet-sidebar {
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.identifier-item,
|
||||
.token-balance {
|
||||
.close-wallet-sidebar {
|
||||
width: 42px;
|
||||
min-width: 42px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.identifiers-block {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.identifier-item {
|
||||
font-size: var(--font-size-sm);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.identifier-label,
|
||||
.token-name {
|
||||
.identifier-label {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
margin: var(--spacing-sm) 0 25px 0;
|
||||
height: calc(100vh - 165px);
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 85%;
|
||||
padding: 8px var(--spacing-sm);
|
||||
}
|
||||
|
||||
.ai-message {
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.chat-input textarea {
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
margin-right: var(--spacing-sm);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.2rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
white-space: normal;
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.header-wallet-btn {
|
||||
flex-shrink: 0;
|
||||
margin-left: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@@ -1236,171 +663,24 @@ input, textarea {
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.sidebar-block {
|
||||
padding: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.disconnect-block {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.wallet-header {
|
||||
height: 32px;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.wallet-header-buttons {
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.wallet-connect-btn-header,
|
||||
.wallet-disconnect-btn-header,
|
||||
.auth-btn.disconnect-wallet-btn {
|
||||
height: 32px;
|
||||
.disconnect-btn,
|
||||
.close-wallet-sidebar {
|
||||
height: 36px;
|
||||
font-size: var(--font-size-sm);
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.close-wallet-sidebar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.auth-buttons-container {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.auth-btn {
|
||||
height: 32px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
margin: var(--spacing-xs) 0 var(--spacing-lg) 0;
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 90%;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.ai-message, .user-message {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.chat-buttons button {
|
||||
padding: 8px var(--spacing-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.auth-btn,
|
||||
.email-btn,
|
||||
.telegram-btn,
|
||||
.connect-wallet-btn {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.send-email-btn,
|
||||
button.email-btn {
|
||||
padding: 8px var(--spacing-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.chat-buttons {
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.chat-buttons button {
|
||||
padding: 8px var(--spacing-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.header-wallet-btn {
|
||||
margin-left: var(--spacing-xs);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.header-wallet-btn::before,
|
||||
.header-wallet-btn::after,
|
||||
.header-wallet-btn .hamburger-line {
|
||||
width: 18px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.header-wallet-btn::before {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.header-wallet-btn::after {
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.auth-buttons-container {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.auth-buttons-container button.auth-btn,
|
||||
.auth-buttons-container button.email-btn,
|
||||
.auth-buttons-container button.telegram-btn,
|
||||
.auth-buttons-container button.connect-wallet-btn {
|
||||
height: 42px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
.wallet-sidebar {
|
||||
padding: 8px 3px;
|
||||
}
|
||||
|
||||
.wallet-header {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.wallet-connect-btn-header,
|
||||
.wallet-disconnect-btn-header,
|
||||
.auth-btn.disconnect-wallet-btn {
|
||||
font-size: var(--font-size-xs);
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.close-wallet-sidebar {
|
||||
font-size: 16px;
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
.identifiers-block {
|
||||
padding: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.identifiers-block h3 {
|
||||
font-size: var(--font-size-md);
|
||||
padding-bottom: var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
|
||||
/* Анимации */
|
||||
|
||||
81
frontend/src/assets/styles/layout.css
Normal file
81
frontend/src/assets/styles/layout.css
Normal file
@@ -0,0 +1,81 @@
|
||||
/* frontend/src/assets/styles/app-layout.css */
|
||||
|
||||
/* Общий контейнер приложения */
|
||||
.app-layout {
|
||||
display: flex;
|
||||
flex-direction: column; /* Header сверху, остальное ниже */
|
||||
height: 100vh;
|
||||
overflow: hidden; /* Предотвращаем двойную прокрутку */
|
||||
}
|
||||
|
||||
/* Обертка для основного контента и сайдбара */
|
||||
.app-content-wrapper {
|
||||
display: flex;
|
||||
flex-grow: 1; /* Занимает все доступное пространство под хедером */
|
||||
overflow: hidden; /* Важно для предотвращения двойной прокрутки */
|
||||
}
|
||||
|
||||
/* Контейнер для RouterView */
|
||||
.main-view {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto; /* Позволяет прокручивать только контент страницы */
|
||||
position: relative; /* Для позиционирования оверлея загрузки */
|
||||
height: calc(100vh - var(--header-height, 65px)); /* Высота минус хедер (примерное значение) */
|
||||
}
|
||||
|
||||
/* Оверлей загрузки для основного вида */
|
||||
.loading-overlay.main-loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
z-index: 1000; /* Выше контента, ниже хедера/сайдбара */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
/* Стили для сайдбара (возможно, нужно перенести из Sidebar.vue или home.css) */
|
||||
.wallet-sidebar {
|
||||
width: var(--sidebar-width, 300px); /* Ширина сайдбара */
|
||||
flex-shrink: 0;
|
||||
background-color: var(--color-white);
|
||||
border-left: 1px solid var(--color-grey-light);
|
||||
transition: width 0.3s ease;
|
||||
overflow-y: auto; /* Позволяет прокручивать сайдбар */
|
||||
height: calc(100vh - var(--header-height, 65px)); /* Высота минус хедер */
|
||||
position: relative; /* Или sticky, если нужно */
|
||||
}
|
||||
|
||||
/* Анимация появления/скрытия сайдбара */
|
||||
.sidebar-slide-enter-active,
|
||||
.sidebar-slide-leave-active {
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar-slide-enter-from,
|
||||
.sidebar-slide-leave-to {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Адаптация */
|
||||
@media (max-width: 768px) {
|
||||
/* На мобильных можно скрывать сайдбар по умолчанию
|
||||
и показывать его как оверлей или уменьшать ширину */
|
||||
.wallet-sidebar {
|
||||
width: var(--sidebar-width-mobile, 250px);
|
||||
/* Можно добавить position: fixed; top: var(--header-height); right: 0;
|
||||
если нужен оверлей */
|
||||
}
|
||||
}
|
||||
|
||||
/* Определим переменную для высоты хедера, если нужно */
|
||||
:root {
|
||||
--header-height: 65px; /* Примерная высота хедера из Header.vue */
|
||||
--sidebar-width: 300px;
|
||||
--sidebar-width-mobile: 250px;
|
||||
}
|
||||
80
frontend/src/assets/styles/variables.css
Normal file
80
frontend/src/assets/styles/variables.css
Normal file
@@ -0,0 +1,80 @@
|
||||
/* frontend/src/assets/styles/variables.css */
|
||||
:root {
|
||||
/* Цвета */
|
||||
--color-primary: #4CAF50;
|
||||
--color-primary-dark: #45a049;
|
||||
--color-secondary: #2196F3;
|
||||
--color-danger: #F44336;
|
||||
--color-warning: #FF9800;
|
||||
--color-light: #f5f5f5;
|
||||
--color-dark: #333333;
|
||||
--color-grey: #777777;
|
||||
--color-grey-light: #e0e0e0;
|
||||
--color-white: #ffffff;
|
||||
--color-black: #000000;
|
||||
--color-telegram: #0088cc;
|
||||
--color-error: #e74c3c;
|
||||
|
||||
/* Цвета сообщений */
|
||||
--color-user-message: #EFFAFF;
|
||||
--color-ai-message: #F8F8F8;
|
||||
--color-system-message: #FFF3E0;
|
||||
--color-system-text: #FF5722;
|
||||
|
||||
/* Тени */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* Отступы */
|
||||
--spacing-xs: 5px;
|
||||
--spacing-sm: 10px;
|
||||
--spacing-md: 15px;
|
||||
--spacing-lg: 20px;
|
||||
--spacing-xl: 30px;
|
||||
|
||||
/* Размеры шрифтов */
|
||||
--font-size-xs: 12px;
|
||||
--font-size-sm: 13px;
|
||||
--font-size-md: 14px;
|
||||
--font-size-lg: 16px;
|
||||
--font-size-xl: 18px;
|
||||
--font-size-xxl: 24px;
|
||||
|
||||
/* Радиусы скругления */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
|
||||
/* Переходы */
|
||||
--transition-fast: 0.2s ease;
|
||||
--transition-normal: 0.3s ease;
|
||||
|
||||
/* Размеры компонентов (Удаляем старые sidebar width) */
|
||||
/* --sidebar-width: 110px; */
|
||||
/* --sidebar-expanded-width: 325px; */
|
||||
--nav-btn-size: 40px;
|
||||
--chat-input-min-height: 100px;
|
||||
--chat-input-max-height: 200px;
|
||||
--chat-input-focus-min-height: 170px;
|
||||
--chat-input-focus-max-height: 300px;
|
||||
|
||||
/* Унифицированные размеры для кнопок и форм */
|
||||
--button-height: 48px;
|
||||
--button-height-mobile: 42px;
|
||||
--button-padding: 0 var(--spacing-lg);
|
||||
--button-gap: var(--spacing-md);
|
||||
--form-gap: var(--spacing-md);
|
||||
--block-padding: 24px;
|
||||
--block-padding-mobile: 16px;
|
||||
--block-margin: 24px;
|
||||
--block-margin-mobile: 16px;
|
||||
--input-height: 48px;
|
||||
--input-height-mobile: 42px;
|
||||
--input-padding: 0 var(--spacing-lg);
|
||||
|
||||
/* Общие стили */
|
||||
--button-radius: var(--radius-lg);
|
||||
--input-radius: var(--radius-lg);
|
||||
--block-radius: var(--radius-lg);
|
||||
}
|
||||
214
frontend/src/components/BaseLayout.vue
Normal file
214
frontend/src/components/BaseLayout.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- Основной контент -->
|
||||
<div class="main-content" :class="{ 'no-right-sidebar': !showWalletSidebar }">
|
||||
<!-- Шапка сайта -->
|
||||
<Header
|
||||
:is-sidebar-open="showWalletSidebar"
|
||||
@toggle-sidebar="toggleWalletSidebar"
|
||||
/>
|
||||
|
||||
<!-- Основной контент страницы (передается через слот) -->
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<!-- Правая панель с информацией о кошельке -->
|
||||
<Sidebar
|
||||
v-model="showWalletSidebar"
|
||||
:is-authenticated="auth.isAuthenticated.value"
|
||||
:telegram-auth="telegramAuth"
|
||||
:email-auth="emailAuth"
|
||||
:token-balances="tokenBalances.value"
|
||||
:identities="auth.identities?.value"
|
||||
@wallet-auth="handleWalletAuth"
|
||||
@disconnect-wallet="disconnectWallet"
|
||||
@telegram-auth="handleTelegramAuth"
|
||||
@cancel-telegram-auth="cancelTelegramAuth"
|
||||
@email-auth="showEmailForm"
|
||||
@send-email-verification="sendEmailVerification"
|
||||
@verify-email-code="verifyEmailCode"
|
||||
@cancel-email-auth="cancelEmailAuth"
|
||||
/>
|
||||
|
||||
<!-- Компонент для отображения уведомлений -->
|
||||
<NotificationDisplay :notifications="notifications.value" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
|
||||
import { useAuth } from '../composables/useAuth';
|
||||
import { useTokenBalances } from '../composables/useTokenBalances';
|
||||
import { useAuthFlow } from '../composables/useAuthFlow';
|
||||
import { useNotifications } from '../composables/useNotifications';
|
||||
import { getFromStorage, setToStorage, removeFromStorage } from '../utils/storage';
|
||||
import { connectWithWallet } from '../services/wallet';
|
||||
import api from '../api/axios';
|
||||
import eventBus from '../utils/eventBus';
|
||||
import Header from './Header.vue';
|
||||
import Sidebar from './Sidebar.vue';
|
||||
import NotificationDisplay from './NotificationDisplay.vue';
|
||||
|
||||
// =====================================================================
|
||||
// 1. ИСПОЛЬЗОВАНИЕ COMPOSABLES
|
||||
// =====================================================================
|
||||
|
||||
const auth = useAuth();
|
||||
const { notifications, showSuccessMessage, showErrorMessage } = useNotifications();
|
||||
const { tokenBalances } = useTokenBalances();
|
||||
|
||||
// Callback после успешной аутентификации/привязки через Email/Telegram
|
||||
const handleAuthFlowSuccess = (authType) => {
|
||||
console.log(`[BaseLayout] Auth flow success: ${authType}`);
|
||||
// Отправляем событие для обновления данных на страницах
|
||||
eventBus.emit('auth-success', { authType });
|
||||
};
|
||||
|
||||
const {
|
||||
telegramAuth,
|
||||
handleTelegramAuth,
|
||||
cancelTelegramAuth,
|
||||
emailAuth,
|
||||
showEmailForm,
|
||||
sendEmailVerification,
|
||||
verifyEmailCode,
|
||||
cancelEmailAuth,
|
||||
} = useAuthFlow({ onAuthSuccess: handleAuthFlowSuccess });
|
||||
|
||||
// =====================================================================
|
||||
// 2. СОСТОЯНИЯ КОМПОНЕНТА
|
||||
// =====================================================================
|
||||
|
||||
const showWalletSidebar = ref(false);
|
||||
const isConnectingWallet = ref(false); // Флаг процесса подключения кошелька
|
||||
|
||||
// =====================================================================
|
||||
// 3. ФУНКЦИИ
|
||||
// =====================================================================
|
||||
|
||||
/**
|
||||
* Обрабатывает аутентификацию через кошелек
|
||||
*/
|
||||
const handleWalletAuth = async () => {
|
||||
if (isConnectingWallet.value) return;
|
||||
isConnectingWallet.value = true;
|
||||
try {
|
||||
const result = await connectWithWallet();
|
||||
console.log('[BaseLayout] Результат подключения кошелька:', result);
|
||||
|
||||
if (result.success) {
|
||||
if (auth.isAuthenticated.value) {
|
||||
// Связывание кошелька с существующим аккаунтом
|
||||
const linkResult = await auth.linkIdentity('wallet', result.address);
|
||||
if (linkResult.success) {
|
||||
showSuccessMessage('Кошелек успешно подключен к вашему аккаунту!');
|
||||
await auth.checkAuth(); // Обновить identities
|
||||
} else {
|
||||
showErrorMessage(linkResult.error || 'Не удалось подключить кошелек');
|
||||
}
|
||||
} else {
|
||||
// Новая аутентификация через кошелек
|
||||
const authResponse = await auth.checkAuth();
|
||||
if (authResponse.authenticated && authResponse.authType === 'wallet') {
|
||||
console.log('[BaseLayout] Кошелёк успешно подключен и аутентифицирован');
|
||||
showSuccessMessage('Кошелёк успешно подключен!');
|
||||
// Оповещаем компоненты об успешной авторизации
|
||||
eventBus.emit('auth-state-changed', {
|
||||
isAuthenticated: true,
|
||||
authType: 'wallet',
|
||||
fromBaseLayout: true
|
||||
});
|
||||
} else {
|
||||
showErrorMessage('Не удалось завершить аутентификацию через кошелек.');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.error('[BaseLayout] Не удалось подключить кошелёк:', result.error);
|
||||
showErrorMessage(result.error || 'Не удалось подключить кошелёк');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[BaseLayout] Ошибка при подключении кошелька:', error);
|
||||
showErrorMessage('Произошла ошибка при подключении кошелька');
|
||||
} finally {
|
||||
isConnectingWallet.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Выполняет выход из аккаунта
|
||||
*/
|
||||
const disconnectWallet = async () => {
|
||||
console.log('[BaseLayout] Выполняется выход из системы...');
|
||||
try {
|
||||
await api.post('/api/auth/logout');
|
||||
await auth.checkAuth();
|
||||
showSuccessMessage('Вы успешно вышли из системы');
|
||||
removeFromStorage('guestMessages');
|
||||
removeFromStorage('hasUserSentMessage');
|
||||
|
||||
// Оповещаем компоненты о выходе из системы
|
||||
eventBus.emit('auth-state-changed', {
|
||||
isAuthenticated: false,
|
||||
fromBaseLayout: true
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[BaseLayout] Ошибка при выходе из системы:', error);
|
||||
showErrorMessage('Произошла ошибка при выходе из системы');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Переключает отображение боковой панели
|
||||
*/
|
||||
const toggleWalletSidebar = () => {
|
||||
showWalletSidebar.value = !showWalletSidebar.value;
|
||||
setToStorage('showWalletSidebar', showWalletSidebar.value);
|
||||
};
|
||||
|
||||
// =====================================================================
|
||||
// 4. ЖИЗНЕННЫЙ ЦИКЛ
|
||||
// =====================================================================
|
||||
|
||||
onMounted(() => {
|
||||
console.log('[BaseLayout] Компонент загружен');
|
||||
|
||||
// Загружаем сохраненное состояние боковой панели
|
||||
const savedSidebarState = getFromStorage('showWalletSidebar');
|
||||
if (savedSidebarState !== null) {
|
||||
showWalletSidebar.value = savedSidebarState;
|
||||
} else {
|
||||
showWalletSidebar.value = true;
|
||||
setToStorage('showWalletSidebar', true);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
background-color: var(--color-light);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex-grow: 1;
|
||||
transition: all var(--transition-normal);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: calc(100% - 350px);
|
||||
padding: 0 20px;
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
|
||||
.main-content.no-right-sidebar {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Адаптивный дизайн */
|
||||
@media (max-width: 768px) {
|
||||
.main-content {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -442,8 +442,11 @@ onUnmounted(() => {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: var(--spacing-lg) 0 35px 0;
|
||||
margin: var(--spacing-lg) auto;
|
||||
padding: 0; /* Убираю padding, так как он теперь задается через .main-content */
|
||||
min-height: 500px; /* Или другая подходящая высота */
|
||||
max-width: 1150px; /* Ограничиваем ширину чата */
|
||||
width: 100%; /* Занимаем всю доступную ширину до максимума */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -459,7 +462,7 @@ onUnmounted(() => {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: var(--chat-input-height, 80px); /* 80px - запасной вариант */
|
||||
bottom: calc(var(--chat-input-height, 80px) + 15px); /* Добавляем 15px отступа между сообщениями и полем ввода */
|
||||
transition: bottom var(--transition-normal);
|
||||
}
|
||||
|
||||
|
||||
191
frontend/src/components/Header.vue
Normal file
191
frontend/src/components/Header.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<div class="header-content">
|
||||
<div class="header-text">
|
||||
<h1 class="title">✌️HB3 - Accelerator DLE</h1>
|
||||
<p class="subtitle">Венчурный фонд и поставщик программного обеспечения</p>
|
||||
</div>
|
||||
<button
|
||||
class="header-wallet-btn"
|
||||
:class="{ active: isSidebarOpen }"
|
||||
@click="toggleSidebar"
|
||||
>
|
||||
<div class="hamburger-line" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits, onMounted, onBeforeUnmount, watch } from 'vue';
|
||||
import { useAuth } from '../composables/useAuth';
|
||||
import eventBus from '../utils/eventBus';
|
||||
|
||||
const props = defineProps({
|
||||
isSidebarOpen: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['toggle-sidebar']);
|
||||
|
||||
const toggleSidebar = () => {
|
||||
emit('toggle-sidebar');
|
||||
};
|
||||
|
||||
// Обработка аутентификации
|
||||
const auth = useAuth();
|
||||
const { isAuthenticated } = auth;
|
||||
|
||||
// Мониторинг изменений статуса аутентификации
|
||||
let unwatch = null;
|
||||
onMounted(() => {
|
||||
// Следим за изменениями авторизации и сообщаем о них через eventBus
|
||||
unwatch = watch(isAuthenticated, (newValue, oldValue) => {
|
||||
if (newValue !== oldValue) {
|
||||
console.log('[Header] Состояние аутентификации изменилось:', newValue);
|
||||
// Оповещаем остальные компоненты через шину событий
|
||||
eventBus.emit('auth-state-changed', {
|
||||
isAuthenticated: newValue,
|
||||
fromHeader: true
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Очищаем наблюдатель при удалении компонента
|
||||
onBeforeUnmount(() => {
|
||||
if (unwatch) {
|
||||
unwatch();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
background-color: var(--color-white);
|
||||
padding: 15px 20px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100; /* Ensure header stays on top */
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1200px; /* Optional: limit max width */
|
||||
margin: 0 auto; /* Optional: center content */
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-grey-dark);
|
||||
}
|
||||
|
||||
.header-wallet-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--color-white);
|
||||
color: var(--color-primary);
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-normal);
|
||||
gap: 8px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.header-wallet-btn:hover {
|
||||
background-color: var(--color-light);
|
||||
}
|
||||
|
||||
.header-wallet-btn.active {
|
||||
background-color: var(--color-light);
|
||||
}
|
||||
|
||||
.hamburger-line {
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background-color: var(--color-primary);
|
||||
position: relative;
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
.hamburger-line::before,
|
||||
.hamburger-line::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: var(--color-primary);
|
||||
left: 0;
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
.hamburger-line::before {
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
.hamburger-line::after {
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
.header-wallet-btn.active .hamburger-line {
|
||||
background-color: transparent; /* Hide middle line */
|
||||
}
|
||||
|
||||
.header-wallet-btn.active .hamburger-line::before {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.header-wallet-btn.active .hamburger-line::after {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.nav-btn-text {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Add some responsive styles if needed */
|
||||
@media (max-width: 768px) {
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.header-wallet-btn {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.nav-btn-text {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.header-text {
|
||||
display: none; /* Hide text on very small screens */
|
||||
}
|
||||
.header-content {
|
||||
justify-content: flex-end; /* Align button to the right */
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -28,47 +28,22 @@
|
||||
</button>
|
||||
<button class="close-sidebar-btn" @click="closeSidebar">×</button>
|
||||
</div>
|
||||
|
||||
<!-- Блок информации о пользователе (отображается, если не активна ни одна форма) -->
|
||||
<div v-if="!emailAuth.showForm && !emailAuth.showVerification && !telegramAuth.showVerification" class="user-info">
|
||||
<h3>Идентификаторы:</h3>
|
||||
<div class="user-info-item">
|
||||
<span class="user-info-label">Кошелек:</span>
|
||||
<span v-if="hasIdentityType('wallet')" class="user-info-value">
|
||||
{{ truncateAddress(getIdentityValue('wallet')) }}
|
||||
</span>
|
||||
<button v-else class="connect-btn" @click="handleWalletAuth">
|
||||
Подключить кошелек
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Блок баланса токенов -->
|
||||
<div v-if="isAuthenticated && hasIdentityType('wallet') && tokenBalances && tokenBalances.eth !== undefined" class="token-balances">
|
||||
<h3>Баланс токенов:</h3>
|
||||
<div class="token-balance">
|
||||
<span class="token-name">ETH:</span>
|
||||
<span class="token-amount">{{ Number(tokenBalances.eth).toLocaleString() }}</span>
|
||||
<span class="token-symbol">{{ TOKEN_CONTRACTS.eth.symbol }}</span>
|
||||
</div>
|
||||
<div class="token-balance">
|
||||
<span class="token-name">BSC:</span>
|
||||
<span class="token-amount">{{ Number(tokenBalances.bsc).toLocaleString() }}</span>
|
||||
<span class="token-symbol">{{ TOKEN_CONTRACTS.bsc.symbol }}</span>
|
||||
</div>
|
||||
<div class="token-balance">
|
||||
<span class="token-name">ARB:</span>
|
||||
<span class="token-amount">{{
|
||||
Number(tokenBalances.arbitrum).toLocaleString()
|
||||
}}</span>
|
||||
<span class="token-symbol">{{ TOKEN_CONTRACTS.arbitrum.symbol }}</span>
|
||||
</div>
|
||||
<div class="token-balance">
|
||||
<span class="token-name">POL:</span>
|
||||
<span class="token-amount">{{ Number(tokenBalances.polygon).toLocaleString() }}</span>
|
||||
<span class="token-symbol">{{ TOKEN_CONTRACTS.polygon.symbol }}</span>
|
||||
</div>
|
||||
<!-- Навигационные кнопки -->
|
||||
<div class="navigation-buttons">
|
||||
<router-link to="/" class="nav-link-btn" active-class="active">
|
||||
<i class="nav-icon">💬</i>
|
||||
<span>Чат</span>
|
||||
</router-link>
|
||||
<router-link to="/crm" class="nav-link-btn" active-class="active">
|
||||
<i class="nav-icon">👥</i>
|
||||
<span>CRM</span>
|
||||
</router-link>
|
||||
<router-link to="/settings" class="nav-link-btn" active-class="active">
|
||||
<i class="nav-icon">⚙️</i>
|
||||
<span>Настройки</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -76,9 +51,12 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
import { defineProps, defineEmits, ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { TOKEN_CONTRACTS } from '../services/tokens';
|
||||
import { useRouter } from 'vue-router';
|
||||
import eventBus from '../utils/eventBus';
|
||||
|
||||
const router = useRouter();
|
||||
const props = defineProps({
|
||||
modelValue: Boolean,
|
||||
isAuthenticated: Boolean,
|
||||
@@ -104,6 +82,25 @@ const closeSidebar = () => {
|
||||
emit('update:modelValue', false);
|
||||
};
|
||||
|
||||
// Обработка события изменения авторизации
|
||||
const handleAuthEvent = (event) => {
|
||||
console.log('[Sidebar] Получено событие изменения авторизации:', event);
|
||||
// Здесь можно обновить данные, если нужно дополнительное обновление
|
||||
};
|
||||
|
||||
// Подписка на события
|
||||
let unsubscribe = null;
|
||||
onMounted(() => {
|
||||
unsubscribe = eventBus.on('auth-state-changed', handleAuthEvent);
|
||||
});
|
||||
|
||||
// Очистка при размонтировании
|
||||
onBeforeUnmount(() => {
|
||||
if (unsubscribe) {
|
||||
unsubscribe();
|
||||
}
|
||||
});
|
||||
|
||||
// Вспомогательные функции
|
||||
const truncateAddress = (address) => {
|
||||
if (!address) return '';
|
||||
@@ -159,6 +156,43 @@ const getIdentityValue = (type) => {
|
||||
border-color: var(--color-dark);
|
||||
}
|
||||
|
||||
/* Стили для навигационных кнопок */
|
||||
.navigation-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.nav-link-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--color-light);
|
||||
color: var(--color-dark);
|
||||
border: 1px solid var(--color-grey-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 12px 15px;
|
||||
font-size: var(--font-size-md);
|
||||
text-decoration: none;
|
||||
transition: all var(--transition-normal);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-link-btn.active {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-white);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.nav-link-btn:hover:not(.active) {
|
||||
background-color: var(--color-grey-light);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
margin-right: 10px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.close-sidebar-btn {
|
||||
width: 42px;
|
||||
@@ -166,6 +200,11 @@ const getIdentityValue = (type) => {
|
||||
min-width: 42px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.nav-link-btn {
|
||||
padding: 10px 12px;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
@@ -175,5 +214,9 @@ const getIdentityValue = (type) => {
|
||||
min-width: 36px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.nav-link-btn {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -10,6 +10,16 @@ const routes = [
|
||||
name: 'home',
|
||||
component: HomeView,
|
||||
},
|
||||
{
|
||||
path: '/crm',
|
||||
name: 'crm',
|
||||
component: () => import('../views/CrmView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
name: 'settings',
|
||||
component: () => import('../views/SettingsView.vue'),
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
|
||||
43
frontend/src/utils/eventBus.js
Normal file
43
frontend/src/utils/eventBus.js
Normal file
@@ -0,0 +1,43 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
// Простая шина событий на основе ref
|
||||
const listeners = ref({});
|
||||
|
||||
export default {
|
||||
// Подписка на событие
|
||||
on(event, callback) {
|
||||
if (!listeners.value[event]) {
|
||||
listeners.value[event] = [];
|
||||
}
|
||||
listeners.value[event].push(callback);
|
||||
|
||||
// Возвращаем функцию отписки
|
||||
return () => {
|
||||
this.off(event, callback);
|
||||
};
|
||||
},
|
||||
|
||||
// Отписка от события
|
||||
off(event, callback) {
|
||||
if (!listeners.value[event]) return;
|
||||
|
||||
const idx = listeners.value[event].indexOf(callback);
|
||||
if (idx > -1) {
|
||||
listeners.value[event].splice(idx, 1);
|
||||
}
|
||||
|
||||
// Очистка пустых массивов
|
||||
if (listeners.value[event].length === 0) {
|
||||
delete listeners.value[event];
|
||||
}
|
||||
},
|
||||
|
||||
// Вызов события с передачей данных
|
||||
emit(event, data) {
|
||||
if (!listeners.value[event]) return;
|
||||
|
||||
listeners.value[event].forEach(callback => {
|
||||
callback(data);
|
||||
});
|
||||
}
|
||||
};
|
||||
118
frontend/src/views/CrmView.vue
Normal file
118
frontend/src/views/CrmView.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<BaseLayout>
|
||||
<div class="crm-view-container">
|
||||
<h1>CRM Система</h1>
|
||||
<div v-if="isLoading">Загрузка данных пользователя...</div>
|
||||
<div v-else-if="!auth.isAuthenticated.value">
|
||||
<p>Для доступа к CRM необходимо <button @click="goToHomeAndShowSidebar">войти</button>.</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>Добро пожаловать в CRM!</p>
|
||||
<div v-if="auth.isAdmin.value">
|
||||
<p><strong>У вас полный доступ (Администратор).</strong></p>
|
||||
<!-- Сюда будет добавляться полный функционал CRM -->
|
||||
<p>Здесь будет управление контактами, сделками, задачами и т.д.</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p><strong>У вас ограниченный доступ.</strong></p>
|
||||
<!-- Сюда будет добавляться ограниченный функционал CRM -->
|
||||
<p>Здесь будет просмотр ваших контактов и задач.</p>
|
||||
</div>
|
||||
<!-- Демонстрационный блок -->
|
||||
<div class="demo-block">
|
||||
<h3>Демонстрация CRM</h3>
|
||||
<p>Этот раздел будет содержать компоненты CRM...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { useAuth } from '../composables/useAuth';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { setToStorage } from '../utils/storage';
|
||||
import BaseLayout from '../components/BaseLayout.vue';
|
||||
import eventBus from '../utils/eventBus';
|
||||
|
||||
const auth = useAuth();
|
||||
const router = useRouter();
|
||||
const isLoading = ref(true);
|
||||
|
||||
// Функция для перехода на домашнюю страницу и открытия боковой панели
|
||||
const goToHomeAndShowSidebar = () => {
|
||||
setToStorage('showWalletSidebar', true);
|
||||
router.push({ name: 'home' });
|
||||
};
|
||||
|
||||
// Обработчик события изменения авторизации
|
||||
const handleAuthEvent = (eventData) => {
|
||||
console.log('[CrmView] Получено событие изменения авторизации:', eventData);
|
||||
// Можно обновить данные или состояние, если нужно
|
||||
isLoading.value = false;
|
||||
};
|
||||
|
||||
// Регистрация и очистка обработчика событий
|
||||
let unsubscribe = null;
|
||||
|
||||
onMounted(() => {
|
||||
console.log('[CrmView] Компонент загружен');
|
||||
isLoading.value = false;
|
||||
|
||||
// Подписка на события авторизации
|
||||
unsubscribe = eventBus.on('auth-state-changed', handleAuthEvent);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// Отписка от события при удалении компонента
|
||||
if (unsubscribe) {
|
||||
unsubscribe();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.crm-view-container {
|
||||
max-width: 1150px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--color-dark);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.demo-block {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
border: 1px dashed var(--color-grey);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 5px 10px;
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-white);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
}
|
||||
button:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
</style>
|
||||
@@ -1,26 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- Основной контент -->
|
||||
<div class="main-content" :class="{ 'no-right-sidebar': !showWalletSidebar }">
|
||||
<div class="header">
|
||||
<div class="header-content">
|
||||
<div class="header-text">
|
||||
<h1 class="title">✌️HB3 - Accelerator DLE</h1>
|
||||
<p class="subtitle">Венчурный фонд и поставщик программного обеспечения</p>
|
||||
</div>
|
||||
<button
|
||||
class="header-wallet-btn"
|
||||
:class="{ active: showWalletSidebar }"
|
||||
@click="toggleWalletSidebar"
|
||||
>
|
||||
<div class="hamburger-line" />
|
||||
<div class="nav-btn-text">
|
||||
{{ showWalletSidebar ? 'Скрыть панель' : 'Подключиться' }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BaseLayout>
|
||||
<ChatInterface
|
||||
:messages="messages"
|
||||
:is-loading="isLoading || isConnectingWallet"
|
||||
@@ -30,216 +9,80 @@
|
||||
@send-message="handleSendMessage"
|
||||
@load-more="loadMessages"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Правая панель с информацией о кошельке -->
|
||||
<Sidebar
|
||||
v-model="showWalletSidebar"
|
||||
:is-authenticated="auth.isAuthenticated.value"
|
||||
:telegram-auth="telegramAuth"
|
||||
:email-auth="emailAuth"
|
||||
:token-balances="tokenBalances.value"
|
||||
:identities="auth.identities?.value"
|
||||
@wallet-auth="handleWalletAuth"
|
||||
@disconnect-wallet="disconnectWallet"
|
||||
@telegram-auth="handleTelegramAuth"
|
||||
@cancel-telegram-auth="cancelTelegramAuth"
|
||||
@email-auth="showEmailForm"
|
||||
@send-email-verification="sendEmailVerification"
|
||||
@verify-email-code="verifyEmailCode"
|
||||
@cancel-email-auth="cancelEmailAuth"
|
||||
/>
|
||||
|
||||
<!-- Компонент для отображения уведомлений -->
|
||||
<NotificationDisplay :notifications="notifications.value" />
|
||||
</div>
|
||||
</BaseLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch, onBeforeUnmount } from 'vue';
|
||||
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
|
||||
import { useAuth } from '../composables/useAuth';
|
||||
import { useChat } from '../composables/useChat';
|
||||
import { useTokenBalances } from '../composables/useTokenBalances';
|
||||
import { useAuthFlow } from '../composables/useAuthFlow';
|
||||
import { useNotifications } from '../composables/useNotifications';
|
||||
import { getFromStorage, setToStorage, removeFromStorage } from '../utils/storage';
|
||||
import { connectWithWallet } from '../services/wallet';
|
||||
import api from '../api/axios';
|
||||
import eventBus from '../utils/eventBus';
|
||||
import '../assets/styles/home.css';
|
||||
import Sidebar from '../components/Sidebar.vue';
|
||||
import BaseLayout from '../components/BaseLayout.vue';
|
||||
import ChatInterface from '../components/ChatInterface.vue';
|
||||
import NotificationDisplay from '../components/NotificationDisplay.vue';
|
||||
|
||||
console.log('HomeView.vue: Refactored version');
|
||||
console.log('HomeView.vue: Using BaseLayout');
|
||||
|
||||
// =====================================================================
|
||||
// 1. ИСПОЛЬЗОВАНИЕ COMPOSABLES
|
||||
// =====================================================================
|
||||
|
||||
const auth = useAuth();
|
||||
const { notifications, showSuccessMessage, showErrorMessage } = useNotifications();
|
||||
const { tokenBalances } = useTokenBalances();
|
||||
|
||||
// Callback после успешной аутентификации/привязки через Email/Telegram
|
||||
const handleAuthFlowSuccess = (authType) => {
|
||||
console.log(`[HomeView] Auth flow success: ${authType}`);
|
||||
// Загружаем сообщения после успешной аутентификации/привязки
|
||||
// useChat должен сам обработать изменение auth.isAuthenticated, но можем вызвать явно для гарантии
|
||||
loadMessages({ initial: true, authType });
|
||||
// useTokenBalances сам следит за auth состоянием для обновления балансов
|
||||
};
|
||||
// =====================================================================
|
||||
// 2. СОСТОЯНИЯ КОМПОНЕНТА
|
||||
// =====================================================================
|
||||
|
||||
const {
|
||||
telegramAuth,
|
||||
handleTelegramAuth,
|
||||
cancelTelegramAuth,
|
||||
emailAuth,
|
||||
showEmailForm,
|
||||
sendEmailVerification,
|
||||
verifyEmailCode,
|
||||
cancelEmailAuth,
|
||||
} = useAuthFlow({ onAuthSuccess: handleAuthFlowSuccess });
|
||||
const isConnectingWallet = ref(false); // Флаг для процесса подключения кошелька
|
||||
|
||||
// =====================================================================
|
||||
// 3. ИСПОЛЬЗОВАНИЕ ЧАТА
|
||||
// =====================================================================
|
||||
|
||||
const {
|
||||
messages,
|
||||
newMessage,
|
||||
attachments,
|
||||
isLoading, // Переименовано из isLoadingChat
|
||||
isLoading,
|
||||
messageLoading,
|
||||
loadMessages,
|
||||
handleSendMessage,
|
||||
} = useChat(auth);
|
||||
|
||||
// =====================================================================
|
||||
// 2. СОСТОЯНИЯ КОМПОНЕНТА (Оставшиеся)
|
||||
// =====================================================================
|
||||
|
||||
const showWalletSidebar = ref(false);
|
||||
const isConnectingWallet = ref(false); // Отдельный флаг для процесса подключения кошелька
|
||||
|
||||
// =====================================================================
|
||||
// 3. ФУНКЦИИ (Оставшиеся или обертки для composables)
|
||||
// =====================================================================
|
||||
|
||||
/**
|
||||
* Обрабатывает аутентификацию через кошелек
|
||||
*/
|
||||
const handleWalletAuth = async () => {
|
||||
if (isConnectingWallet.value) return;
|
||||
isConnectingWallet.value = true;
|
||||
try {
|
||||
const result = await connectWithWallet();
|
||||
console.log('[HomeView] Результат подключения кошелька:', result);
|
||||
|
||||
if (result.success) {
|
||||
if (auth.isAuthenticated.value) {
|
||||
// Связывание кошелька с существующим аккаунтом
|
||||
console.log('[HomeView] Связывание кошелька с существующим аккаунтом:', result.address);
|
||||
const linkResult = await auth.linkIdentity('wallet', result.address);
|
||||
if (linkResult.success) {
|
||||
showSuccessMessage('Кошелек успешно подключен к вашему аккаунту!');
|
||||
await auth.checkAuth(); // Обновить identities
|
||||
// useTokenBalances обновит балансы автоматически через watch
|
||||
} else {
|
||||
showErrorMessage(linkResult.error || 'Не удалось подключить кошелек');
|
||||
}
|
||||
} else {
|
||||
// Новая аутентификация через кошелек
|
||||
const authResponse = await auth.checkAuth();
|
||||
if (authResponse.authenticated && authResponse.authType === 'wallet') {
|
||||
console.log('[HomeView] Кошелёк успешно подключен и аутентифицирован');
|
||||
showSuccessMessage('Кошелёк успешно подключен!');
|
||||
// Загрузка сообщений произойдет через watch в useChat
|
||||
// Обновление балансов произойдет через watch в useTokenBalances
|
||||
loadMessages({ initial: true, authType: 'wallet' }); // Принудительно перезагрузим историю
|
||||
} else {
|
||||
showErrorMessage('Не удалось завершить аутентификацию через кошелек.');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.error('[HomeView] Не удалось подключить кошелёк:', result.error);
|
||||
showErrorMessage(result.error || 'Не удалось подключить кошелёк');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[HomeView] Ошибка при подключении кошелька:', error);
|
||||
showErrorMessage('Произошла ошибка при подключении кошелька');
|
||||
} finally {
|
||||
isConnectingWallet.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Выполняет выход из аккаунта
|
||||
*/
|
||||
const disconnectWallet = async () => {
|
||||
console.log('[HomeView] Выполняется выход из системы...');
|
||||
try {
|
||||
// useTokenBalances остановит обновление балансов через watch
|
||||
await api.post('/api/auth/logout');
|
||||
// Вызываем checkAuth(), чтобы useAuth обновил состояние на основе ответа сервера (не аутентифицирован)
|
||||
await auth.checkAuth();
|
||||
showSuccessMessage('Вы успешно вышли из системы');
|
||||
// useChat сбросит сообщения через watch
|
||||
removeFromStorage('guestMessages'); // Доп. очистка
|
||||
removeFromStorage('hasUserSentMessage');
|
||||
} catch (error) {
|
||||
console.error('[HomeView] Ошибка при выходе из системы:', error);
|
||||
showErrorMessage('Произошла ошибка при выходе из системы');
|
||||
// Может потребоваться принудительная очистка состояния auth
|
||||
// await auth.checkAuth(); // Попробовать еще раз в catch, если необходимо
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Переключает отображение боковой панели
|
||||
*/
|
||||
const toggleWalletSidebar = () => {
|
||||
showWalletSidebar.value = !showWalletSidebar.value;
|
||||
setToStorage('showWalletSidebar', showWalletSidebar.value);
|
||||
};
|
||||
|
||||
// =====================================================================
|
||||
// 4. ЖИЗНЕННЫЙ ЦИКЛ
|
||||
// =====================================================================
|
||||
|
||||
let unsubscribe = null;
|
||||
|
||||
onMounted(() => {
|
||||
console.log('[HomeView] Компонент загружен (refactored)');
|
||||
console.log('[HomeView] Компонент загружен (обновленная версия)');
|
||||
|
||||
// Загружаем сохраненное состояние боковой панели
|
||||
const savedSidebarState = getFromStorage('showWalletSidebar');
|
||||
if (savedSidebarState !== null) {
|
||||
showWalletSidebar.value = savedSidebarState; // getFromStorage теперь парсит JSON
|
||||
} else {
|
||||
showWalletSidebar.value = true;
|
||||
setToStorage('showWalletSidebar', true);
|
||||
}
|
||||
|
||||
// Начальная проверка аутентификации (useAuth делает это при инициализации)
|
||||
// Начальная загрузка сообщений (useChat делает это в onMounted)
|
||||
// Начальное обновление балансов (useTokenBalances делает это при инициализации/watch)
|
||||
|
||||
// Пример добавления слушателя (если все еще нужен)
|
||||
// window.addEventListener('load-chat-history', () => loadMessages({ initial: true }));
|
||||
// Подписка на события авторизации
|
||||
unsubscribe = eventBus.on('auth-state-changed', handleAuthEvent);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// Очистка интервалов происходит внутри composables (useTokenBalances, useAuthFlow)
|
||||
// window.removeEventListener('load-chat-history', () => loadMessages({ initial: true }));
|
||||
// Отписка от события при удалении компонента
|
||||
if (unsubscribe) {
|
||||
unsubscribe();
|
||||
}
|
||||
});
|
||||
|
||||
// =====================================================================
|
||||
// 5. WATCHERS (Если нужны специфичные для View)
|
||||
// 5. ОБРАБОТКА СОБЫТИЙ АВТОРИЗАЦИИ
|
||||
// =====================================================================
|
||||
|
||||
// Пример: показать панель гостю после первого сообщения
|
||||
watch(messages, (currentMessages, prevMessages) => {
|
||||
if (!auth.isAuthenticated.value &&
|
||||
currentMessages.length > (prevMessages?.length || 0) &&
|
||||
currentMessages[currentMessages.length - 1]?.sender_type === 'user' &&
|
||||
!showWalletSidebar.value) {
|
||||
console.log('[HomeView] Показываем панель гостю после первого сообщения.');
|
||||
toggleWalletSidebar();
|
||||
// Функция обновления сообщений после авторизации
|
||||
const handleAuthEvent = (eventData) => {
|
||||
console.log('[HomeView] Получено событие изменения авторизации:', eventData);
|
||||
if (eventData.isAuthenticated) {
|
||||
// Пользователь только что авторизовался - загрузим сообщения
|
||||
loadMessages({ initial: true, authType: eventData.authType || 'wallet' });
|
||||
} else {
|
||||
// Пользователь вышел из системы - можно очистить или обновить данные
|
||||
loadMessages({ initial: true });
|
||||
}
|
||||
}, { deep: false });
|
||||
};
|
||||
</script>
|
||||
|
||||
374
frontend/src/views/SettingsView.vue
Normal file
374
frontend/src/views/SettingsView.vue
Normal file
@@ -0,0 +1,374 @@
|
||||
<template>
|
||||
<BaseLayout>
|
||||
<div class="settings-view-container">
|
||||
<h1>Настройки</h1>
|
||||
|
||||
<!-- Блок информации о пользователе (всегда виден) -->
|
||||
<div class="user-info-section">
|
||||
<h3>Ваши идентификаторы:</h3>
|
||||
<div v-if="!auth.isAuthenticated.value" class="user-info-empty">
|
||||
Войдите, чтобы увидеть идентификаторы
|
||||
</div>
|
||||
<div v-else class="user-info-item">
|
||||
<span class="user-info-label">Кошелек:</span>
|
||||
<span v-if="hasIdentityType('wallet')" class="user-info-value">
|
||||
{{ truncateAddress(getIdentityValue('wallet')) }}
|
||||
</span>
|
||||
<span v-else class="user-info-value">Не подключен</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Блок баланса токенов (всегда виден) -->
|
||||
<div class="token-balances-section">
|
||||
<h3>Баланс токенов:</h3>
|
||||
<div v-if="!auth.isAuthenticated.value" class="token-no-data">
|
||||
Войдите, чтобы увидеть баланс токенов
|
||||
</div>
|
||||
<div v-else-if="isLoadingTokens" class="token-loading">
|
||||
Загрузка балансов...
|
||||
</div>
|
||||
<div v-else-if="!hasTokenBalances" class="token-no-data">
|
||||
Информация о балансе не доступна
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="tokenBalances.eth" class="token-balance">
|
||||
<span class="token-name">ETH:</span>
|
||||
<span class="token-amount">{{ Number(tokenBalances.eth).toLocaleString() }}</span>
|
||||
<span class="token-symbol">{{ TOKEN_CONTRACTS.eth.symbol }}</span>
|
||||
</div>
|
||||
<div v-if="tokenBalances.bsc" class="token-balance">
|
||||
<span class="token-name">BSC:</span>
|
||||
<span class="token-amount">{{ Number(tokenBalances.bsc).toLocaleString() }}</span>
|
||||
<span class="token-symbol">{{ TOKEN_CONTRACTS.bsc.symbol }}</span>
|
||||
</div>
|
||||
<div v-if="tokenBalances.arbitrum" class="token-balance">
|
||||
<span class="token-name">ARB:</span>
|
||||
<span class="token-amount">{{ Number(tokenBalances.arbitrum).toLocaleString() }}</span>
|
||||
<span class="token-symbol">{{ TOKEN_CONTRACTS.arbitrum.symbol }}</span>
|
||||
</div>
|
||||
<div v-if="tokenBalances.polygon" class="token-balance">
|
||||
<span class="token-name">POL:</span>
|
||||
<span class="token-amount">{{ Number(tokenBalances.polygon).toLocaleString() }}</span>
|
||||
<span class="token-symbol">{{ TOKEN_CONTRACTS.polygon.symbol }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isLoading">Загрузка данных пользователя...</div>
|
||||
<div v-else-if="!auth.isAuthenticated.value">
|
||||
<p>Для доступа к настройкам необходимо <button @click="goToHomeAndShowSidebar">войти</button>.</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>Добро пожаловать в Настройки!</p>
|
||||
|
||||
<div v-if="auth.isAdmin.value">
|
||||
<p><strong>У вас полный доступ (Администратор).</strong></p>
|
||||
<!-- Сюда будут добавляться полные настройки -->
|
||||
<p>Здесь будут настройки системы, управление пользователями и т.д.</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p><strong>У вас ограниченный доступ.</strong></p>
|
||||
<!-- Сюда будут добавляться ограниченные настройки -->
|
||||
<p>Здесь будут настройки профиля, уведомлений и т.д.</p>
|
||||
</div>
|
||||
<!-- Общие настройки для всех авторизованных -->
|
||||
<div class="general-settings">
|
||||
<h3>Общие настройки</h3>
|
||||
<label>
|
||||
Язык интерфейса:
|
||||
<select v-model="selectedLanguage">
|
||||
<option value="ru">Русский</option>
|
||||
<option value="en">English</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, onBeforeUnmount, computed } from 'vue';
|
||||
import { useAuth } from '../composables/useAuth';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getFromStorage, setToStorage } from '../utils/storage';
|
||||
import BaseLayout from '../components/BaseLayout.vue';
|
||||
import eventBus from '../utils/eventBus';
|
||||
import { TOKEN_CONTRACTS } from '../services/tokens';
|
||||
import { fetchTokenBalances } from '../services/tokens';
|
||||
|
||||
const auth = useAuth();
|
||||
const router = useRouter();
|
||||
const isLoading = ref(true);
|
||||
const selectedLanguage = ref(getFromStorage('userLanguage', 'ru'));
|
||||
|
||||
// Состояние для токенов
|
||||
const tokenBalances = ref({});
|
||||
const isLoadingTokens = ref(false);
|
||||
const hasTokenBalances = computed(() => {
|
||||
return tokenBalances.value &&
|
||||
Object.keys(tokenBalances.value).length > 0 &&
|
||||
Object.values(tokenBalances.value).some(value => parseInt(value) > 0);
|
||||
});
|
||||
|
||||
// Получаем данные об идентификаторах пользователя
|
||||
const identities = computed(() => auth.identities.value);
|
||||
|
||||
// Вспомогательные функции
|
||||
const truncateAddress = (address) => {
|
||||
if (!address) return '';
|
||||
return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
|
||||
};
|
||||
|
||||
const hasIdentityType = (type) => {
|
||||
if (!identities.value) return false;
|
||||
return identities.value.some((identity) => identity.provider === type);
|
||||
};
|
||||
|
||||
const getIdentityValue = (type) => {
|
||||
if (!identities.value) return null;
|
||||
const identity = identities.value.find((identity) => identity.provider === type);
|
||||
return identity ? identity.provider_id : null;
|
||||
};
|
||||
|
||||
// Обновление балансов токенов
|
||||
const refreshTokenBalances = async () => {
|
||||
if (!hasIdentityType('wallet')) return;
|
||||
|
||||
isLoadingTokens.value = true;
|
||||
try {
|
||||
const walletAddress = getIdentityValue('wallet');
|
||||
console.log('[SettingsView] Обновление балансов для адреса:', walletAddress);
|
||||
|
||||
const balances = await fetchTokenBalances(walletAddress);
|
||||
console.log('[SettingsView] Полученные балансы:', balances);
|
||||
|
||||
tokenBalances.value = balances || {};
|
||||
} catch (error) {
|
||||
console.error('[SettingsView] Ошибка при получении балансов:', error);
|
||||
tokenBalances.value = {};
|
||||
} finally {
|
||||
isLoadingTokens.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Следим за изменениями в идентификаторах
|
||||
watch(() => identities.value, (newIdentities, oldIdentities) => {
|
||||
if (hasIdentityType('wallet')) {
|
||||
// Проверяем, появился ли новый идентификатор кошелька или изменился существующий
|
||||
const newWalletId = getIdentityValue('wallet');
|
||||
const oldWalletIdentity = oldIdentities ? oldIdentities.find(id => id.provider === 'wallet') : null;
|
||||
const oldWalletId = oldWalletIdentity ? oldWalletIdentity.provider_id : null;
|
||||
|
||||
if (newWalletId !== oldWalletId) {
|
||||
console.log('[SettingsView] Обнаружено изменение идентификатора кошелька, обновляем балансы');
|
||||
refreshTokenBalances();
|
||||
}
|
||||
}
|
||||
}, { deep: true });
|
||||
|
||||
// Обработчик события изменения авторизации
|
||||
const handleAuthEvent = (eventData) => {
|
||||
console.log('[SettingsView] Получено событие изменения авторизации:', eventData);
|
||||
isLoading.value = false;
|
||||
|
||||
// При изменении авторизации обновляем балансы
|
||||
if (eventData.isAuthenticated) {
|
||||
setTimeout(() => {
|
||||
refreshTokenBalances(); // Небольшая задержка для обновления идентификаторов
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
// Сохраняем язык при изменении
|
||||
watch(selectedLanguage, (newLang) => {
|
||||
setToStorage('userLanguage', newLang);
|
||||
// TODO: Добавить логику для реальной смены языка интерфейса (например, через i18n)
|
||||
console.log(`[Settings] Язык изменен на: ${newLang}`);
|
||||
});
|
||||
|
||||
const goToHomeAndShowSidebar = () => {
|
||||
setToStorage('showWalletSidebar', true);
|
||||
router.push({ name: 'home' });
|
||||
};
|
||||
|
||||
// Регистрация и очистка обработчика событий
|
||||
let unsubscribe = null;
|
||||
|
||||
onMounted(() => {
|
||||
console.log('[SettingsView] Компонент загружен');
|
||||
isLoading.value = false;
|
||||
|
||||
// Подписка на события авторизации
|
||||
unsubscribe = eventBus.on('auth-state-changed', handleAuthEvent);
|
||||
|
||||
// Обновляем данные о балансе токенов при загрузке
|
||||
if (auth.isAuthenticated.value && hasIdentityType('wallet')) {
|
||||
refreshTokenBalances();
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// Отписка от события при удалении компонента
|
||||
if (unsubscribe) {
|
||||
unsubscribe();
|
||||
}
|
||||
});
|
||||
|
||||
// Следим за состоянием авторизации для очистки данных при выходе
|
||||
watch(() => auth.isAuthenticated.value, (isAuth) => {
|
||||
if (!isAuth) {
|
||||
// Очищаем данные при выходе из системы
|
||||
tokenBalances.value = {};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.settings-view-container {
|
||||
max-width: 1150px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--color-dark);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.general-settings {
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--color-grey-light);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 8px;
|
||||
border: 1px solid var(--color-grey);
|
||||
border-radius: var(--radius-md);
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 5px 10px;
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-white);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
}
|
||||
button:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
button:disabled {
|
||||
background-color: var(--color-grey);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Стили для блока информации о пользователе */
|
||||
.user-info-section {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background-color: var(--color-light);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-grey-light);
|
||||
}
|
||||
|
||||
.user-info-item {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-info-label {
|
||||
min-width: 100px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-info-value {
|
||||
font-family: monospace;
|
||||
padding: 5px 10px;
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--color-grey-light);
|
||||
}
|
||||
|
||||
/* Стили для блока баланса токенов */
|
||||
.token-balances-section {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background-color: var(--color-light);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-grey-light);
|
||||
}
|
||||
|
||||
.token-balance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.token-name {
|
||||
min-width: 60px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.token-amount {
|
||||
font-family: monospace;
|
||||
padding: 5px 10px;
|
||||
background-color: var(--color-white);
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--color-grey-light);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.token-symbol {
|
||||
color: var(--color-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.token-loading,
|
||||
.token-no-data {
|
||||
margin: 15px 0;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
color: var(--color-grey-dark);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Удаляем стили для кнопки обновления баланса, поскольку больше не нужны */
|
||||
.token-action,
|
||||
.refresh-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user-info-empty,
|
||||
.token-no-data {
|
||||
margin: 15px 0;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
color: var(--color-grey-dark);
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user