ваше сообщение коммита
This commit is contained in:
@@ -44,5 +44,6 @@
|
|||||||
"stylelint-config-prettier": "^9.0.5",
|
"stylelint-config-prettier": "^9.0.5",
|
||||||
"stylelint-config-standard-vue": "^1.0.0",
|
"stylelint-config-standard-vue": "^1.0.0",
|
||||||
"vite": "^6.2.3"
|
"vite": "^6.2.3"
|
||||||
}
|
},
|
||||||
|
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,11 +18,41 @@
|
|||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
|
|
||||||
// Использование composable для аутентификации
|
// Использование composable для аутентификации
|
||||||
const { isAuthenticated } = useAuth();
|
const auth = useAuth();
|
||||||
|
|
||||||
watch(isAuthenticated, (newValue, oldValue) => {
|
// Мониторинг изменений состояния аутентификации
|
||||||
|
watch(auth.isAuthenticated, (newValue, oldValue) => {
|
||||||
if (newValue !== oldValue) {
|
if (newValue !== oldValue) {
|
||||||
console.log('Состояние аутентификации изменилось:', newValue);
|
console.log('[App] Состояние аутентификации изменилось:', newValue);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</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;
|
--transition-normal: 0.3s ease;
|
||||||
|
|
||||||
/* Размеры компонентов */
|
/* Размеры компонентов */
|
||||||
--sidebar-width: 110px;
|
|
||||||
--sidebar-expanded-width: 325px;
|
--sidebar-expanded-width: 325px;
|
||||||
--nav-btn-size: 40px;
|
--nav-btn-size: 40px;
|
||||||
--chat-input-min-height: 100px;
|
--chat-input-min-height: 100px;
|
||||||
@@ -130,16 +129,13 @@ input, textarea {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0;
|
||||||
padding: 0 var(--spacing-lg);
|
padding: 0 20px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
background-color: var(--color-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Адаптация контента при боковой панели */
|
/* Адаптация контента при боковой панели */
|
||||||
.sidebar-expanded ~ .main-content {
|
|
||||||
margin-left: 190px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content.no-right-sidebar {
|
.main-content.no-right-sidebar {
|
||||||
margin-right: 190px;
|
margin-right: 190px;
|
||||||
}
|
}
|
||||||
@@ -148,159 +144,15 @@ input, textarea {
|
|||||||
margin-right: 190px;
|
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 {
|
.chat-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: var(--spacing-lg) 0 35px 0;
|
margin: var(--spacing-lg) auto;
|
||||||
min-height: 500px;
|
min-height: 500px;
|
||||||
|
max-width: 1150px;
|
||||||
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -316,6 +168,7 @@ input, textarea {
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
bottom: calc(var(--chat-input-height, 80px) + 15px); /* Добавляем 15px отступа между сообщениями и полем ввода */
|
||||||
transition: bottom var(--transition-normal);
|
transition: bottom var(--transition-normal);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -632,7 +485,7 @@ input, textarea {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Стили для правой панели */
|
/* Стили для правой панели */
|
||||||
.wallet-sidebar {
|
.wallet-sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
@@ -660,382 +513,10 @@ input, textarea {
|
|||||||
gap: var(--spacing-lg);
|
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 {
|
.header {
|
||||||
background: var(--color-white);
|
background: var(--color-white);
|
||||||
border-bottom: 1px solid var(--color-grey-light);
|
padding: 15px 20px;
|
||||||
padding: var(--spacing-lg) 0;
|
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 100;
|
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 {
|
.wallet-sidebar {
|
||||||
width: 100%;
|
|
||||||
padding: var(--spacing-md);
|
padding: var(--spacing-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1145,86 +625,33 @@ input, textarea {
|
|||||||
gap: var(--spacing-md);
|
gap: var(--spacing-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-block {
|
.disconnect-block {
|
||||||
padding: var(--spacing-md);
|
|
||||||
margin-bottom: var(--spacing-md);
|
margin-bottom: var(--spacing-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-block h3 {
|
.disconnect-btn,
|
||||||
font-size: var(--font-size-lg);
|
.close-wallet-sidebar {
|
||||||
margin-bottom: var(--spacing-sm);
|
height: 42px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.identifier-item,
|
.close-wallet-sidebar {
|
||||||
.token-balance {
|
width: 42px;
|
||||||
|
min-width: 42px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.identifiers-block {
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.identifier-item {
|
||||||
font-size: var(--font-size-sm);
|
font-size: var(--font-size-sm);
|
||||||
margin-bottom: var(--spacing-xs);
|
margin-bottom: var(--spacing-xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
.identifier-label,
|
.identifier-label {
|
||||||
.token-name {
|
|
||||||
min-width: 80px;
|
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) {
|
@media screen and (max-width: 480px) {
|
||||||
@@ -1236,171 +663,24 @@ input, textarea {
|
|||||||
gap: var(--spacing-sm);
|
gap: var(--spacing-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-block {
|
|
||||||
padding: var(--spacing-sm);
|
|
||||||
margin-bottom: var(--spacing-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.disconnect-block {
|
.disconnect-block {
|
||||||
margin-bottom: var(--spacing-sm);
|
margin-bottom: var(--spacing-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wallet-header {
|
.disconnect-btn,
|
||||||
height: 32px;
|
.close-wallet-sidebar {
|
||||||
gap: var(--spacing-xs);
|
height: 36px;
|
||||||
}
|
|
||||||
|
|
||||||
.wallet-header-buttons {
|
|
||||||
gap: var(--spacing-xs);
|
|
||||||
}
|
|
||||||
|
|
||||||
.wallet-connect-btn-header,
|
|
||||||
.wallet-disconnect-btn-header,
|
|
||||||
.auth-btn.disconnect-wallet-btn {
|
|
||||||
height: 32px;
|
|
||||||
font-size: var(--font-size-sm);
|
font-size: var(--font-size-sm);
|
||||||
padding: 0 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-wallet-sidebar {
|
.close-wallet-sidebar {
|
||||||
width: 32px;
|
width: 36px;
|
||||||
height: 32px;
|
min-width: 36px;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.identifiers-block {
|
.identifiers-block {
|
||||||
padding: var(--spacing-sm);
|
padding: var(--spacing-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.identifiers-block h3 {
|
|
||||||
font-size: var(--font-size-md);
|
|
||||||
padding-bottom: var(--spacing-xs);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Анимации */
|
/* Анимации */
|
||||||
@@ -1711,7 +991,7 @@ input, textarea {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Кнопка закрытия */
|
/* Кнопка закрытия */
|
||||||
.close-wallet-sidebar {
|
.close-wallet-sidebar {
|
||||||
width: var(--nav-btn-size);
|
width: var(--nav-btn-size);
|
||||||
height: var(--nav-btn-size);
|
height: var(--nav-btn-size);
|
||||||
min-width: var(--nav-btn-size);
|
min-width: var(--nav-btn-size);
|
||||||
|
|||||||
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;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: var(--spacing-lg) 0 35px 0;
|
margin: var(--spacing-lg) auto;
|
||||||
|
padding: 0; /* Убираю padding, так как он теперь задается через .main-content */
|
||||||
min-height: 500px; /* Или другая подходящая высота */
|
min-height: 500px; /* Или другая подходящая высота */
|
||||||
|
max-width: 1150px; /* Ограничиваем ширину чата */
|
||||||
|
width: 100%; /* Занимаем всю доступную ширину до максимума */
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -459,7 +462,7 @@ onUnmounted(() => {
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: var(--chat-input-height, 80px); /* 80px - запасной вариант */
|
bottom: calc(var(--chat-input-height, 80px) + 15px); /* Добавляем 15px отступа между сообщениями и полем ввода */
|
||||||
transition: bottom var(--transition-normal);
|
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>
|
||||||
<button class="close-sidebar-btn" @click="closeSidebar">×</button>
|
<button class="close-sidebar-btn" @click="closeSidebar">×</button>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<!-- Блок баланса токенов -->
|
<!-- Навигационные кнопки -->
|
||||||
<div v-if="isAuthenticated && hasIdentityType('wallet') && tokenBalances && tokenBalances.eth !== undefined" class="token-balances">
|
<div class="navigation-buttons">
|
||||||
<h3>Баланс токенов:</h3>
|
<router-link to="/" class="nav-link-btn" active-class="active">
|
||||||
<div class="token-balance">
|
<i class="nav-icon">💬</i>
|
||||||
<span class="token-name">ETH:</span>
|
<span>Чат</span>
|
||||||
<span class="token-amount">{{ Number(tokenBalances.eth).toLocaleString() }}</span>
|
</router-link>
|
||||||
<span class="token-symbol">{{ TOKEN_CONTRACTS.eth.symbol }}</span>
|
<router-link to="/crm" class="nav-link-btn" active-class="active">
|
||||||
</div>
|
<i class="nav-icon">👥</i>
|
||||||
<div class="token-balance">
|
<span>CRM</span>
|
||||||
<span class="token-name">BSC:</span>
|
</router-link>
|
||||||
<span class="token-amount">{{ Number(tokenBalances.bsc).toLocaleString() }}</span>
|
<router-link to="/settings" class="nav-link-btn" active-class="active">
|
||||||
<span class="token-symbol">{{ TOKEN_CONTRACTS.bsc.symbol }}</span>
|
<i class="nav-icon">⚙️</i>
|
||||||
</div>
|
<span>Настройки</span>
|
||||||
<div class="token-balance">
|
</router-link>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -76,9 +51,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { defineProps, defineEmits } from 'vue';
|
import { defineProps, defineEmits, ref, onMounted, onBeforeUnmount } from 'vue';
|
||||||
import { TOKEN_CONTRACTS } from '../services/tokens';
|
import { TOKEN_CONTRACTS } from '../services/tokens';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import eventBus from '../utils/eventBus';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modelValue: Boolean,
|
modelValue: Boolean,
|
||||||
isAuthenticated: Boolean,
|
isAuthenticated: Boolean,
|
||||||
@@ -104,6 +82,25 @@ const closeSidebar = () => {
|
|||||||
emit('update:modelValue', false);
|
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) => {
|
const truncateAddress = (address) => {
|
||||||
if (!address) return '';
|
if (!address) return '';
|
||||||
@@ -159,6 +156,43 @@ const getIdentityValue = (type) => {
|
|||||||
border-color: var(--color-dark);
|
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) {
|
@media screen and (max-width: 480px) {
|
||||||
.close-sidebar-btn {
|
.close-sidebar-btn {
|
||||||
width: 42px;
|
width: 42px;
|
||||||
@@ -166,6 +200,11 @@ const getIdentityValue = (type) => {
|
|||||||
min-width: 42px;
|
min-width: 42px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-link-btn {
|
||||||
|
padding: 10px 12px;
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 360px) {
|
@media screen and (max-width: 360px) {
|
||||||
@@ -175,5 +214,9 @@ const getIdentityValue = (type) => {
|
|||||||
min-width: 36px;
|
min-width: 36px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-link-btn {
|
||||||
|
padding: 8px 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -10,6 +10,16 @@ const routes = [
|
|||||||
name: 'home',
|
name: 'home',
|
||||||
component: HomeView,
|
component: HomeView,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/crm',
|
||||||
|
name: 'crm',
|
||||||
|
component: () => import('../views/CrmView.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/settings',
|
||||||
|
name: 'settings',
|
||||||
|
component: () => import('../views/SettingsView.vue'),
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const router = createRouter({
|
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,245 +1,88 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<BaseLayout>
|
||||||
<!-- Основной контент -->
|
<ChatInterface
|
||||||
<div class="main-content" :class="{ 'no-right-sidebar': !showWalletSidebar }">
|
:messages="messages"
|
||||||
<div class="header">
|
:is-loading="isLoading || isConnectingWallet"
|
||||||
<div class="header-content">
|
:has-more-messages="messageLoading.hasMoreMessages"
|
||||||
<div class="header-text">
|
v-model:newMessage="newMessage"
|
||||||
<h1 class="title">✌️HB3 - Accelerator DLE</h1>
|
v-model:attachments="attachments"
|
||||||
<p class="subtitle">Венчурный фонд и поставщик программного обеспечения</p>
|
@send-message="handleSendMessage"
|
||||||
</div>
|
@load-more="loadMessages"
|
||||||
<button
|
|
||||||
class="header-wallet-btn"
|
|
||||||
:class="{ active: showWalletSidebar }"
|
|
||||||
@click="toggleWalletSidebar"
|
|
||||||
>
|
|
||||||
<div class="hamburger-line" />
|
|
||||||
<div class="nav-btn-text">
|
|
||||||
{{ showWalletSidebar ? 'Скрыть панель' : 'Подключиться' }}
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ChatInterface
|
|
||||||
:messages="messages"
|
|
||||||
:is-loading="isLoading || isConnectingWallet"
|
|
||||||
:has-more-messages="messageLoading.hasMoreMessages"
|
|
||||||
v-model:newMessage="newMessage"
|
|
||||||
v-model:attachments="attachments"
|
|
||||||
@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"
|
|
||||||
/>
|
/>
|
||||||
|
</BaseLayout>
|
||||||
<!-- Компонент для отображения уведомлений -->
|
|
||||||
<NotificationDisplay :notifications="notifications.value" />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, watch, onBeforeUnmount } from 'vue';
|
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
|
||||||
import { useAuth } from '../composables/useAuth';
|
import { useAuth } from '../composables/useAuth';
|
||||||
import { useChat } from '../composables/useChat';
|
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 { connectWithWallet } from '../services/wallet';
|
||||||
import api from '../api/axios';
|
import eventBus from '../utils/eventBus';
|
||||||
import '../assets/styles/home.css';
|
import '../assets/styles/home.css';
|
||||||
import Sidebar from '../components/Sidebar.vue';
|
import BaseLayout from '../components/BaseLayout.vue';
|
||||||
import ChatInterface from '../components/ChatInterface.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
|
// 1. ИСПОЛЬЗОВАНИЕ COMPOSABLES
|
||||||
// =====================================================================
|
// =====================================================================
|
||||||
|
|
||||||
const auth = useAuth();
|
const auth = useAuth();
|
||||||
const { notifications, showSuccessMessage, showErrorMessage } = useNotifications();
|
|
||||||
const { tokenBalances } = useTokenBalances();
|
|
||||||
|
|
||||||
// Callback после успешной аутентификации/привязки через Email/Telegram
|
// =====================================================================
|
||||||
const handleAuthFlowSuccess = (authType) => {
|
// 2. СОСТОЯНИЯ КОМПОНЕНТА
|
||||||
console.log(`[HomeView] Auth flow success: ${authType}`);
|
// =====================================================================
|
||||||
// Загружаем сообщения после успешной аутентификации/привязки
|
|
||||||
// useChat должен сам обработать изменение auth.isAuthenticated, но можем вызвать явно для гарантии
|
|
||||||
loadMessages({ initial: true, authType });
|
|
||||||
// useTokenBalances сам следит за auth состоянием для обновления балансов
|
|
||||||
};
|
|
||||||
|
|
||||||
const {
|
const isConnectingWallet = ref(false); // Флаг для процесса подключения кошелька
|
||||||
telegramAuth,
|
|
||||||
handleTelegramAuth,
|
// =====================================================================
|
||||||
cancelTelegramAuth,
|
// 3. ИСПОЛЬЗОВАНИЕ ЧАТА
|
||||||
emailAuth,
|
// =====================================================================
|
||||||
showEmailForm,
|
|
||||||
sendEmailVerification,
|
|
||||||
verifyEmailCode,
|
|
||||||
cancelEmailAuth,
|
|
||||||
} = useAuthFlow({ onAuthSuccess: handleAuthFlowSuccess });
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
messages,
|
messages,
|
||||||
newMessage,
|
newMessage,
|
||||||
attachments,
|
attachments,
|
||||||
isLoading, // Переименовано из isLoadingChat
|
isLoading,
|
||||||
messageLoading,
|
messageLoading,
|
||||||
loadMessages,
|
loadMessages,
|
||||||
handleSendMessage,
|
handleSendMessage,
|
||||||
} = useChat(auth);
|
} = 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. ЖИЗНЕННЫЙ ЦИКЛ
|
// 4. ЖИЗНЕННЫЙ ЦИКЛ
|
||||||
// =====================================================================
|
// =====================================================================
|
||||||
|
|
||||||
|
let unsubscribe = null;
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
console.log('[HomeView] Компонент загружен (refactored)');
|
console.log('[HomeView] Компонент загружен (обновленная версия)');
|
||||||
|
|
||||||
// Загружаем сохраненное состояние боковой панели
|
// Подписка на события авторизации
|
||||||
const savedSidebarState = getFromStorage('showWalletSidebar');
|
unsubscribe = eventBus.on('auth-state-changed', handleAuthEvent);
|
||||||
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 }));
|
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
// Очистка интервалов происходит внутри composables (useTokenBalances, useAuthFlow)
|
// Отписка от события при удалении компонента
|
||||||
// window.removeEventListener('load-chat-history', () => loadMessages({ initial: true }));
|
if (unsubscribe) {
|
||||||
|
unsubscribe();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// =====================================================================
|
// =====================================================================
|
||||||
// 5. WATCHERS (Если нужны специфичные для View)
|
// 5. ОБРАБОТКА СОБЫТИЙ АВТОРИЗАЦИИ
|
||||||
// =====================================================================
|
// =====================================================================
|
||||||
|
|
||||||
// Пример: показать панель гостю после первого сообщения
|
// Функция обновления сообщений после авторизации
|
||||||
watch(messages, (currentMessages, prevMessages) => {
|
const handleAuthEvent = (eventData) => {
|
||||||
if (!auth.isAuthenticated.value &&
|
console.log('[HomeView] Получено событие изменения авторизации:', eventData);
|
||||||
currentMessages.length > (prevMessages?.length || 0) &&
|
if (eventData.isAuthenticated) {
|
||||||
currentMessages[currentMessages.length - 1]?.sender_type === 'user' &&
|
// Пользователь только что авторизовался - загрузим сообщения
|
||||||
!showWalletSidebar.value) {
|
loadMessages({ initial: true, authType: eventData.authType || 'wallet' });
|
||||||
console.log('[HomeView] Показываем панель гостю после первого сообщения.');
|
} else {
|
||||||
toggleWalletSidebar();
|
// Пользователь вышел из системы - можно очистить или обновить данные
|
||||||
|
loadMessages({ initial: true });
|
||||||
}
|
}
|
||||||
}, { deep: false });
|
};
|
||||||
</script>
|
</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