Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 coopops
|
6ee7eb93df | ||
|
coopops
|
1f15f368a6 | ||
|
coopops
|
f72b4900ab | ||
|
coopops
|
f859651038 | ||
|
coopops
|
d763f08fec | ||
|
coopops
|
805ac73ed7 | ||
|
coopops
|
b82b778b81 |
@@ -532,6 +532,7 @@ const selectGroupByName = (workspaceName: string) => {
|
||||
contentRef,
|
||||
|
||||
// Computed
|
||||
groupedItems,
|
||||
filteredItems,
|
||||
flatSearchResults,
|
||||
isSearchMode,
|
||||
|
||||
@@ -1,9 +1,40 @@
|
||||
<template lang="pug">
|
||||
q-page.p-md.bg-gray-100.text-center.pa-4
|
||||
div.q-mt-lg.full-screen 404 страница не найдена!
|
||||
q-btn(flat @click="router.push('/')") на главную
|
||||
q-page.blank-page
|
||||
.blank-page__inner
|
||||
EmptyState(
|
||||
title='Страница не найдена',
|
||||
body='Похоже, такой страницы нет или она была перенесена. Попробуйте вернуться на главную.'
|
||||
)
|
||||
template(#icon)
|
||||
q-icon(name='search_off', size='48px')
|
||||
template(#action)
|
||||
BaseButton(variant='primary', @click='goHome')
|
||||
template(#icon-left)
|
||||
q-icon(name='home')
|
||||
| На главную
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
import { useRouter } from 'vue-router';
|
||||
import EmptyState from 'src/shared/ui/base/EmptyState/EmptyState.vue';
|
||||
import BaseButton from 'src/shared/ui/base/BaseButton/BaseButton.vue';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function goHome(): void {
|
||||
void router.push('/');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.blank-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--p-6, 24px);
|
||||
}
|
||||
.blank-page__inner {
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,46 +1,56 @@
|
||||
<template lang="pug">
|
||||
.row.justify-center
|
||||
q-card.q-pa-md.q-mt-lg(flat, bordered)
|
||||
q-card-section
|
||||
.full-width.text-center
|
||||
q-badge.q-pa-sm(color='red')
|
||||
q-icon(name='fa-regular fa-hand', size='48px')
|
||||
.text-h4 Недостаточно прав доступа
|
||||
|
||||
q-card-actions(align='center')
|
||||
q-btn(
|
||||
label='Вернуться',
|
||||
color='primary',
|
||||
icon='fa fa-arrow-left',
|
||||
@click='goBack'
|
||||
)
|
||||
q-page.permission-denied
|
||||
.permission-denied__inner
|
||||
EmptyState(
|
||||
title='Недостаточно прав доступа',
|
||||
body='У вас нет доступа к этой странице. Если это ошибка — обратитесь к председателю или вернитесь в личный кабинет.'
|
||||
)
|
||||
template(#icon)
|
||||
q-icon(name='lock_outline', size='48px')
|
||||
template(#action)
|
||||
BaseButton(variant='primary', @click='goBack')
|
||||
template(#icon-left)
|
||||
q-icon(name='arrow_back')
|
||||
| Вернуться
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useDesktopStore } from 'src/entities/Desktop/model';
|
||||
import { useSessionStore } from 'src/entities/Session';
|
||||
import EmptyState from 'src/shared/ui/base/EmptyState/EmptyState.vue';
|
||||
import BaseButton from 'src/shared/ui/base/BaseButton/BaseButton.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const desktops = useDesktopStore();
|
||||
const session = useSessionStore();
|
||||
|
||||
function goBack() {
|
||||
// Если пользователь авторизован, пытаемся перейти на безопасную страницу
|
||||
function goBack(): void {
|
||||
if (session.isAuth && session.isRegistrationComplete) {
|
||||
// Пытаемся перейти на participant workspace как самый безопасный вариант
|
||||
const hasParticipantWorkspace = desktops.currentDesktop?.workspaces.some(
|
||||
(ws) => ws.name === 'participant',
|
||||
);
|
||||
|
||||
if (hasParticipantWorkspace) {
|
||||
// Устанавливаем participant workspace и переходим на его главную страницу
|
||||
desktops.selectWorkspace('participant');
|
||||
desktops.goToDefaultPage(router);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Если ничего не найдено, идем на страницу по умолчанию для неавторизованного пользователя
|
||||
desktops.goToDefaultPage(router);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.permission-denied {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--p-6, 24px);
|
||||
}
|
||||
.permission-denied__inner {
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export { default as AxonWalletDisplay } from './ui/AxonWalletDisplay.vue';
|
||||
@@ -1,82 +0,0 @@
|
||||
<template lang="pug">
|
||||
.axon-wallet-display
|
||||
ColorCard(color='purple')
|
||||
// Заголовок
|
||||
.wallet-header
|
||||
.wallet-title
|
||||
q-icon(name="account_balance_wallet" size="20px").q-mr-sm
|
||||
| Кошелек AXON
|
||||
|
||||
// Описание
|
||||
.wallet-description
|
||||
.text-body2.text-white
|
||||
| AXON используется для оплаты пакетов документов. Минимально 5 AXON в день, по факту - от использования.
|
||||
|
||||
// Баланс
|
||||
.balance-section
|
||||
.balance-value {{ formattedBalance }}
|
||||
.balance-label Доступно
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useSessionStore } from 'src/entities/Session';
|
||||
import { ColorCard } from 'src/shared/ui';
|
||||
import { formatAsset2Digits } from 'src/shared/lib/utils/formatAsset2Digits';
|
||||
|
||||
const session = useSessionStore();
|
||||
|
||||
// Форматированный баланс AXON
|
||||
const formattedBalance = computed(() => {
|
||||
const balance = session.blockchainAccount?.core_liquid_balance || '0';
|
||||
return formatAsset2Digits(`${balance} AXON`);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.axon-wallet-display {
|
||||
padding: 8px;
|
||||
|
||||
// Переопределяем отступ ColorCard только для этого виджета
|
||||
:deep(.color-card) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.wallet-header {
|
||||
margin-bottom: 8px;
|
||||
|
||||
.wallet-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.wallet-description {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.text-body2 {
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.balance-section {
|
||||
padding: 12px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
|
||||
.balance-label {
|
||||
font-size: 11px;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.balance-value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,71 +0,0 @@
|
||||
<template lang="pug">
|
||||
div.footer-root.blockinfo.no-select
|
||||
div(v-if="missedConnection")
|
||||
i(style="color: red").far.fa-circle
|
||||
div
|
||||
span нет
|
||||
div
|
||||
span соединения
|
||||
div(v-else)
|
||||
i(style="color: green").far.fa-circle
|
||||
div
|
||||
span блок №
|
||||
div
|
||||
span {{ currentBlock }}
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useSystemStore } from 'src/entities/System/model'
|
||||
|
||||
const { info } = useSystemStore()
|
||||
|
||||
let currentBlock = computed(() => {
|
||||
return info.blockchain_info?.head_block_num
|
||||
})
|
||||
|
||||
// Всегда считаем, что соединение есть, поскольку blockchain_info обновляется автоматически
|
||||
let missedConnection = computed(() => {
|
||||
return false
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.footer-root {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.blockinfo {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 16px;
|
||||
color: #8a8a8a;
|
||||
}
|
||||
|
||||
.logout {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .logout-text {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.logout-text {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: #181818;
|
||||
vertical-align: bottom;
|
||||
display: inline-block;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
src/app/config
|
||||
@@ -1 +0,0 @@
|
||||
export { default as BlockchainStatusBar } from './BlockchainStatusBar.vue'
|
||||
@@ -1,36 +0,0 @@
|
||||
<template lang="pug">
|
||||
// Кнопки сохранения (всегда видны при наличии прав редактирования)
|
||||
div(v-if="canEdit").row.justify-center.q-gutter-sm
|
||||
q-btn(
|
||||
flat
|
||||
size="sm"
|
||||
color="negative"
|
||||
label="Отменить"
|
||||
:disable="!hasChanges"
|
||||
@click="$emit('reset')"
|
||||
)
|
||||
q-btn(
|
||||
size="sm"
|
||||
color="primary"
|
||||
label="Сохранить"
|
||||
:loading="isSaving"
|
||||
:disable="!hasChanges"
|
||||
@click="$emit('save')"
|
||||
)
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineProps<{
|
||||
hasChanges: boolean;
|
||||
canEdit: boolean;
|
||||
isSaving: boolean;
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
reset: [];
|
||||
save: [];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
export { default as DescriptionSaveButtons } from './DescriptionSaveButtons.vue';
|
||||
@@ -2,50 +2,72 @@
|
||||
import { computed } from 'vue';
|
||||
|
||||
interface IProps {
|
||||
title?: string
|
||||
show_close?: boolean
|
||||
title?: string;
|
||||
show_close?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
title: '',
|
||||
show_close: true
|
||||
})
|
||||
show_close: true,
|
||||
});
|
||||
|
||||
const title = computed(() => props.title)
|
||||
const title = computed(() => props.title);
|
||||
</script>
|
||||
|
||||
<template lang="pug">
|
||||
q-card(style="min-width: 350px; max-width: 100%;")
|
||||
q-bar.modal-base__bar.bg-gradient-dark.text-white
|
||||
span.modal-base__title(v-if="!$slots.title") {{ title }}
|
||||
slot(v-else name="title")
|
||||
q-space
|
||||
q-btn.modal-base__close(v-if="show_close" v-close-popup dense flat icon="close")
|
||||
//- Canon-оболочка диалога. Визуально соответствует shared/ui/base/BaseDialog.
|
||||
//- API совместим со старым ModalBase: title / show_close / slot=default,
|
||||
//- slot=title — поэтому подходит как drop-in для 40+ legacy call-site'ов
|
||||
//- (внешний q-dialog держит родитель). Новые диалоги пишем на BaseDialog
|
||||
//- с v-model:modelValue.
|
||||
q-card.modal-base
|
||||
.modal-base__head(v-if='title || $slots.title || show_close')
|
||||
.modal-base__title
|
||||
slot(v-if='$slots.title', name='title')
|
||||
template(v-else) {{ title }}
|
||||
q-btn.modal-base__close(
|
||||
v-if='show_close',
|
||||
v-close-popup,
|
||||
flat,
|
||||
round,
|
||||
dense,
|
||||
icon='close',
|
||||
aria-label='Закрыть'
|
||||
)
|
||||
q-tooltip Закрыть
|
||||
slot
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* Заголовок диалога может занимать две строки (длинные названия, узкий
|
||||
экран). q-bar по умолчанию nowrap c фиксированной высотой и обрезает
|
||||
текст сверху — разрешаем перенос, растим бар по контенту и прижимаем
|
||||
крестик к верху, чтобы он не уезжал вниз вслед за второй строкой. */
|
||||
.modal-base__bar {
|
||||
height: auto;
|
||||
min-height: 32px;
|
||||
align-items: flex-start;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
.modal-base {
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
background: var(--p-surface);
|
||||
color: var(--p-ink);
|
||||
border-radius: var(--p-r-md, 12px);
|
||||
box-shadow: var(--p-shadow-modal);
|
||||
}
|
||||
.modal-base__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--p-3, 12px);
|
||||
padding: var(--p-3, 12px) var(--p-4, 16px) 0;
|
||||
}
|
||||
.modal-base__title {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
font-size: var(--p-fs-h3);
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--p-ls-h3);
|
||||
color: var(--p-ink);
|
||||
/* Длинные заголовки переносятся, не обрезаются. */
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.modal-base__close {
|
||||
flex: 0 0 auto;
|
||||
color: var(--p-ink-3);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
// Стили для компактных табов
|
||||
.compact-tabs {
|
||||
border-radius: 8px 8px 0 0;
|
||||
overflow: hidden;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-bottom: none;
|
||||
|
||||
.q-dark & {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.q-tab {
|
||||
font-size: 11px !important;
|
||||
font-weight: 400;
|
||||
transition: all 0.2s ease;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.q-tab__label {
|
||||
font-size: 11px !important;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.q-tab__indicator {
|
||||
height: 3px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.q-tab__label {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.q-tab {
|
||||
min-height: 32px !important;
|
||||
}
|
||||
|
||||
// Стили для панелей табов
|
||||
.tab-panels-card {
|
||||
font-size: 10px !important;
|
||||
border-radius: 0 0 8px 8px;
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-top: none;
|
||||
|
||||
.q-dark & {
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
@@ -1,141 +0,0 @@
|
||||
<template lang="pug">
|
||||
label.q-field.row.no-wrap.items-start.q-input.q-field--labeled.q-field--with-bottom(
|
||||
:class="fieldClasses"
|
||||
:style="standoutStyle"
|
||||
:for="inputId"
|
||||
)
|
||||
.q-field__inner.relative-position.col.self-stretch
|
||||
.q-field__control.relative-position.row.no-wrap(tabindex="-1")
|
||||
.q-field__control-container.col.relative-position.row.no-wrap.q-anchor--skip
|
||||
.editor-input-wrapper
|
||||
Editor(
|
||||
:model-value="modelValue",
|
||||
:readonly="readonly",
|
||||
:placeholder="placeholder || 'Начните писать...'",
|
||||
:min-height="minHeight || 150",
|
||||
:show-focus-ring="true"
|
||||
@update:modelValue="emit('update:modelValue', $event)"
|
||||
@change="handleChange"
|
||||
@ready="handleReady"
|
||||
)
|
||||
.q-field__label.no-pointer-events.absolute.ellipsis(v-if="label")
|
||||
| {{ label }}
|
||||
.q-field__bottom.row.items-start.q-field__bottom--animated
|
||||
.q-field__messages.col
|
||||
.q-field__messages--error(v-if="errorMessage")
|
||||
| {{ errorMessage }}
|
||||
.q-field__counter(v-if="counter")
|
||||
| {{ counterText }}
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { Editor } from '../Editor'
|
||||
|
||||
interface Props {
|
||||
modelValue: string | null | undefined
|
||||
label?: string
|
||||
placeholder?: string
|
||||
readonly?: boolean
|
||||
minHeight?: number
|
||||
rules?: ((val: any) => string | boolean)[]
|
||||
counter?: boolean
|
||||
maxlength?: number
|
||||
standout?: string
|
||||
dark?: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: string): void
|
||||
(e: 'change'): void
|
||||
(e: 'ready'): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
readonly: false,
|
||||
minHeight: 150,
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
// Генерируем уникальный ID для label
|
||||
const inputId = `f_${Math.random().toString(36).substr(2, 9)}`
|
||||
|
||||
const errorMessage = ref('')
|
||||
const hasError = computed(() => !!errorMessage.value)
|
||||
|
||||
const fieldClasses = computed(() => ({
|
||||
'q-field--standout': props.standout,
|
||||
'q-field--dark': props.dark,
|
||||
'q-field--error': hasError.value,
|
||||
'q-field--readonly': props.readonly
|
||||
}))
|
||||
|
||||
const standoutStyle = computed(() => {
|
||||
if (props.standout) {
|
||||
return { background: props.standout }
|
||||
}
|
||||
return {}
|
||||
})
|
||||
|
||||
const counterText = computed(() => {
|
||||
if (!props.counter || !props.modelValue) return ''
|
||||
const length = props.modelValue.length
|
||||
return props.maxlength ? `${length}/${props.maxlength}` : `${length}`
|
||||
})
|
||||
|
||||
const validate = () => {
|
||||
if (!props.rules) return
|
||||
|
||||
for (const rule of props.rules) {
|
||||
const result = rule(props.modelValue)
|
||||
if (result !== true) {
|
||||
errorMessage.value = result as string
|
||||
return
|
||||
}
|
||||
}
|
||||
errorMessage.value = ''
|
||||
}
|
||||
|
||||
const handleChange = () => {
|
||||
validate()
|
||||
emit('change')
|
||||
}
|
||||
|
||||
const handleReady = () => {
|
||||
emit('ready')
|
||||
}
|
||||
|
||||
watch(() => props.modelValue, () => {
|
||||
if (hasError.value) {
|
||||
validate()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.editor-input-wrapper {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Стили для интеграции Editor с q-field */
|
||||
.q-field__control-container {
|
||||
padding: 0;
|
||||
min-height: 56px; /* Минимальная высота как у q-input */
|
||||
}
|
||||
|
||||
.q-field__label {
|
||||
z-index: 1;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Когда редактор имеет контент, лейбл должен быть вверху */
|
||||
.q-field--labeled .q-field__label {
|
||||
top: 8px;
|
||||
left: 12px;
|
||||
font-size: 12px;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
export { default as WrappedEditor } from './WrappedEditor.vue'
|
||||
@@ -34,7 +34,7 @@ q-dialog(
|
||||
template(v-if='!isSearchMode')
|
||||
template(v-for='ws in workspaces', :key='ws.name')
|
||||
.command-palette__workspace(
|
||||
:class='{ "is-active": ws.isActive, "is-sticky": ws.isActive }'
|
||||
:class='{ "is-active": ws.isActive }'
|
||||
)
|
||||
button.command-palette__workspace-row(
|
||||
type='button',
|
||||
@@ -218,8 +218,17 @@ function moveSelection(delta: number): void {
|
||||
const list = activeList.value;
|
||||
if (!list.length) return;
|
||||
const currentIdx = list.findIndex((e) => e.key === activeKey.value);
|
||||
const safe = currentIdx === -1 ? 0 : currentIdx;
|
||||
const next = (safe + delta + list.length) % list.length;
|
||||
let next: number;
|
||||
if (currentIdx === -1) {
|
||||
// Нет текущего выделения — ↓ ставит на первый, ↑ на последний.
|
||||
next = delta > 0 ? 0 : list.length - 1;
|
||||
} else {
|
||||
// Clamp в границах списка: на верхней/нижней позиции стрелка дальше
|
||||
// не «оборачивает» курсор в противоположный конец — он остаётся на
|
||||
// месте (привычное поведение скролла в нативных меню/listbox).
|
||||
next = Math.max(0, Math.min(list.length - 1, currentIdx + delta));
|
||||
}
|
||||
if (next === currentIdx) return;
|
||||
activeKey.value = list[next].key;
|
||||
nextTick(() => scrollActiveIntoView());
|
||||
}
|
||||
@@ -284,7 +293,7 @@ function onHide(): void {
|
||||
background: var(--p-surface);
|
||||
color: var(--p-ink);
|
||||
border-radius: var(--p-r-md, 12px);
|
||||
box-shadow: var(--p-elev-3);
|
||||
box-shadow: var(--p-shadow-modal);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -345,11 +354,6 @@ function onHide(): void {
|
||||
.command-palette__workspace {
|
||||
background: var(--p-surface);
|
||||
}
|
||||
.command-palette__workspace.is-sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.command-palette__workspace-row {
|
||||
display: flex;
|
||||
@@ -368,20 +372,25 @@ function onHide(): void {
|
||||
transition: background var(--p-dur-fast, 120ms) var(--p-ease-standard);
|
||||
}
|
||||
.command-palette__workspace.is-active .command-palette__workspace-row {
|
||||
background: var(--p-accent-soft, var(--p-primary-soft));
|
||||
background: var(--p-primary-soft);
|
||||
}
|
||||
.command-palette__workspace-row:hover,
|
||||
.command-palette__workspace-row.is-selected {
|
||||
background: var(--p-surface-2);
|
||||
}
|
||||
.command-palette__workspace.is-active .command-palette__workspace-row.is-selected {
|
||||
background: var(--p-accent-soft, var(--p-primary-soft));
|
||||
outline: 2px solid var(--p-accent, var(--p-primary));
|
||||
background: var(--p-primary-soft);
|
||||
}
|
||||
/* Универсальная рамка selected для строки стола — иначе при наведении
|
||||
на неактивный стол курсор «теряется»: page'и имеют outline по selected,
|
||||
а workspace-row до фикса получали outline только в is-active. */
|
||||
.command-palette__workspace-row.is-selected {
|
||||
outline: 2px solid var(--p-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.command-palette__workspace-icon {
|
||||
color: var(--p-accent, var(--p-primary));
|
||||
color: var(--p-primary);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
@@ -399,8 +408,8 @@ function onHide(): void {
|
||||
align-items: center;
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--p-accent, var(--p-primary));
|
||||
color: var(--p-ink-on-accent, var(--p-ink-on-primary, #fff));
|
||||
background: var(--p-primary);
|
||||
color: var(--p-ink-on-primary, #fff);
|
||||
font-size: var(--p-fs-caption, 11px);
|
||||
font-weight: 600;
|
||||
flex: 0 0 auto;
|
||||
@@ -435,7 +444,7 @@ function onHide(): void {
|
||||
color: var(--p-ink);
|
||||
}
|
||||
.command-palette__page.is-selected {
|
||||
outline: 2px solid var(--p-accent, var(--p-primary));
|
||||
outline: 2px solid var(--p-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
@@ -482,15 +491,15 @@ function onHide(): void {
|
||||
}
|
||||
.command-palette__flat-item:hover,
|
||||
.command-palette__flat-item.is-selected {
|
||||
background: var(--p-accent-soft, var(--p-primary-soft));
|
||||
background: var(--p-primary-soft);
|
||||
}
|
||||
.command-palette__flat-item.is-selected {
|
||||
outline: 2px solid var(--p-accent, var(--p-primary));
|
||||
outline: 2px solid var(--p-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.command-palette__flat-icon {
|
||||
color: var(--p-accent, var(--p-primary));
|
||||
color: var(--p-primary);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
||||
@@ -68,7 +68,7 @@ function close(): void {
|
||||
height: 100vh;
|
||||
background: var(--p-surface);
|
||||
color: var(--p-ink);
|
||||
box-shadow: var(--p-elev-3);
|
||||
box-shadow: var(--p-shadow-modal);
|
||||
}
|
||||
|
||||
.details-drawer__header {
|
||||
|
||||
@@ -146,7 +146,7 @@ function plural(n: number, one: string, few: string, many: string): string {
|
||||
background: var(--p-surface);
|
||||
color: var(--p-ink);
|
||||
border-radius: var(--p-r-md, 12px);
|
||||
box-shadow: var(--p-elev-2);
|
||||
box-shadow: var(--p-shadow-pop);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,14 +10,11 @@ export * from './MeetCompactCard';
|
||||
export * from './ModalBase';
|
||||
export * from './TitleStyles';
|
||||
export * from './Editor';
|
||||
export * from './WrappedEditor';
|
||||
export * from './AutoSaveIndicator';
|
||||
export * from './AxonWalletDisplay';
|
||||
export * from './ColorCard';
|
||||
export * from './RouteMenuButton';
|
||||
export * from './Fab';
|
||||
export * from './CreateDialog';
|
||||
export * from './DescriptionSaveButtons';
|
||||
export * from './ExpandToggleButton';
|
||||
export * from './EntityIdBadge';
|
||||
export * from './Estimation';
|
||||
|
||||
@@ -1,563 +1,57 @@
|
||||
<template lang="pug">
|
||||
// Командная панель
|
||||
q-dialog.cmdk-dialog(
|
||||
v-model="cmdkStore.showDialog",
|
||||
transition-show="slide-down",
|
||||
transition-hide="slide-up",
|
||||
@keydown="cmdkStore.handleDialogKeydown",
|
||||
@click="cmdkStore.closeDialog"
|
||||
//- Canon-обёртка: глобальная палитра команд по ⌘K / Ctrl+K.
|
||||
//- UI — canon CommandPalette из shared/ui/domain.
|
||||
//- Данные и навигация — из useCmdkMenuStore (роли, conditions, переключение
|
||||
//- рабочих столов, push в роутер, переключение по горячей клавише).
|
||||
CommandPalette(
|
||||
v-model='showDialog',
|
||||
:workspaces='workspaces',
|
||||
placeholder='Поиск рабочих столов и страниц…'
|
||||
@select-workspace='handleSelectWorkspace',
|
||||
@select-page='handleSelectPage'
|
||||
)
|
||||
.cmdk-panel
|
||||
// Заголовок
|
||||
.cmdk-header
|
||||
q-icon.cmdk-search-icon(name="search")
|
||||
input.cmdk-input(
|
||||
autofocus,
|
||||
ref="searchInput",
|
||||
v-model="cmdkStore.searchQuery",
|
||||
placeholder="Поиск рабочих столов и страниц...",
|
||||
@input="cmdkStore.handleSearch"
|
||||
)
|
||||
q-btn.cmdk-close-btn(
|
||||
flat,
|
||||
dense,
|
||||
round,
|
||||
size="sm",
|
||||
@click="cmdkStore.showDialog = false"
|
||||
)
|
||||
q-icon(name="close")
|
||||
|
||||
// Список результатов
|
||||
div.cmdk-content(ref="contentRef")
|
||||
transition-group(
|
||||
name="cmdk-fade",
|
||||
tag="div"
|
||||
)
|
||||
// Пустое состояние
|
||||
.cmdk-empty-state(
|
||||
v-if="cmdkStore.isSearchMode && cmdkStore.flatSearchResults.length === 0 && cmdkStore.searchQuery",
|
||||
key="empty"
|
||||
)
|
||||
q-icon(name="search_off", size="md")
|
||||
.empty-text Ничего не найдено
|
||||
.empty-subtext Попробуйте другой запрос
|
||||
|
||||
// Плоский список при поиске
|
||||
template(v-else-if="cmdkStore.isSearchMode && cmdkStore.flatSearchResults.length > 0")
|
||||
.cmdk-flat-list
|
||||
.cmdk-flat-item(
|
||||
v-for="(item, index) in cmdkStore.flatSearchResults",
|
||||
:key="item.workspaceName + (item.page?.name || 'workspace') + index",
|
||||
:class="{ 'selected': cmdkStore.selectedIndex === index, 'is-workspace': item.type === 'workspace' }",
|
||||
@click="handleSelectFlatItem(index)"
|
||||
)
|
||||
// Иконка рабочего стола
|
||||
q-icon.cmdk-flat-workspace-icon(
|
||||
v-if="item.type === 'page'",
|
||||
:name="item.workspaceIcon"
|
||||
)
|
||||
q-icon.cmdk-flat-workspace-icon.cmdk-flat-workspace-icon_direct(
|
||||
v-else,
|
||||
:name="item.icon"
|
||||
)
|
||||
|
||||
.cmdk-flat-content
|
||||
// Название рабочего стола (для страниц)
|
||||
.cmdk-flat-workspace-name(v-if="item.type === 'page'") {{ item.workspaceTitle }}
|
||||
// Название страницы или рабочего стола
|
||||
.cmdk-flat-title(v-if="item.type === 'page'") {{ item.page?.meta?.title }}
|
||||
.cmdk-flat-title(v-else) {{ item.title }}
|
||||
span.badge-active(v-if="item.isActiveWorkspace") Активный
|
||||
|
||||
// Шорткат для страниц
|
||||
.cmdk-flat-shortcut(v-if="item.type === 'page' && item.page?.shortcut") {{ item.page.shortcut }}
|
||||
|
||||
// Иерархический список (без поиска)
|
||||
template(v-else-if="!cmdkStore.isSearchMode && cmdkStore.filteredItems.length > 0", v-for="(group, groupIndex) in cmdkStore.filteredItems", :key="group.workspaceName")
|
||||
.cmdk-group
|
||||
// Заголовок группы (воркспейс)
|
||||
.cmdk-group-header(
|
||||
:class="{ 'selected': cmdkStore.selectedIndex === groupIndex }"
|
||||
@click="handleSelectGroup(groupIndex)"
|
||||
)
|
||||
q-icon.cmdk-group-icon(:name="group.icon")
|
||||
.cmdk-group-title {{ group.title }}
|
||||
.cmdk-group-badge(v-if="group.isActive") Активный
|
||||
|
||||
// Страницы внутри воркспейса
|
||||
.cmdk-pages
|
||||
.cmdk-page(
|
||||
v-for="(page, pageIndex) in group.pages",
|
||||
:key="page.name",
|
||||
:class="{ 'selected': cmdkStore.selectedIndex === groupIndex && cmdkStore.selectedPageIndex === pageIndex }"
|
||||
@click="handleSelectPage(group.workspaceName, page)"
|
||||
)
|
||||
q-icon.cmdk-page-icon(:name="page.meta.icon || 'circle'")
|
||||
.cmdk-page-title {{ page.meta.title }}
|
||||
.cmdk-page-shortcut(v-if="page.shortcut") {{ page.shortcut }}
|
||||
|
||||
// Подсказки
|
||||
.cmdk-footer(v-if="!isMobile")
|
||||
.cmdk-hint
|
||||
kbd ↑↓
|
||||
span для навигации
|
||||
kbd ↵ Enter
|
||||
span для выбора
|
||||
kbd ⎋ Esc
|
||||
span для закрытия
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watchEffect } from 'vue';
|
||||
import { computed, onMounted, onUnmounted } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useCmdkMenuStore } from 'src/entities/CmdkMenu/model';
|
||||
import { useMobileDrawer } from 'src/shared/lib/composables/useMobileDrawer';
|
||||
import { useWindowSize } from 'src/shared/hooks/useWindowSize';
|
||||
import type { CommandPaletteWorkspace } from 'src/shared/ui/domain/CommandPalette';
|
||||
|
||||
const cmdkStore = useCmdkMenuStore();
|
||||
const { isMobile } = useWindowSize();
|
||||
const { closeDrawerOnMobile } = useMobileDrawer();
|
||||
const searchInput = ref<HTMLInputElement | null>(null);
|
||||
const contentRef = ref<HTMLElement | null>(null);
|
||||
const { showDialog, groupedItems } = storeToRefs(cmdkStore);
|
||||
|
||||
// Обработчики для выбора элементов с закрытием drawer на мобильных устройствах
|
||||
const handleSelectGroup = (groupIndex: number) => {
|
||||
closeDrawerOnMobile();
|
||||
cmdkStore.selectGroup(groupIndex);
|
||||
};
|
||||
const workspaces = computed<CommandPaletteWorkspace[]>(() =>
|
||||
groupedItems.value.map((group) => ({
|
||||
name: group.workspaceName,
|
||||
title: group.title,
|
||||
icon: group.icon,
|
||||
isActive: group.isActive,
|
||||
pages: group.pages.map((page) => ({
|
||||
name: page.name,
|
||||
title: page.meta?.title ?? page.name,
|
||||
icon: page.meta?.icon,
|
||||
shortcut: page.shortcut,
|
||||
})),
|
||||
})),
|
||||
);
|
||||
|
||||
const handleSelectPage = (workspaceName: string, page: any) => {
|
||||
closeDrawerOnMobile();
|
||||
function handleSelectWorkspace(workspaceName: string): void {
|
||||
cmdkStore.selectGroupByName(workspaceName);
|
||||
}
|
||||
|
||||
function handleSelectPage(workspaceName: string, pageName: string): void {
|
||||
const group = groupedItems.value.find((g) => g.workspaceName === workspaceName);
|
||||
const page = group?.pages.find((p) => p.name === pageName);
|
||||
if (!page) return;
|
||||
cmdkStore.selectPage(workspaceName, page);
|
||||
};
|
||||
}
|
||||
|
||||
const handleSelectFlatItem = (index: number) => {
|
||||
closeDrawerOnMobile();
|
||||
cmdkStore.selectedIndex = index;
|
||||
cmdkStore.selectCurrentItem();
|
||||
};
|
||||
|
||||
// Следим за contentRef и устанавливаем его в store
|
||||
watchEffect(() => {
|
||||
if (contentRef.value) {
|
||||
cmdkStore.setContentRef(contentRef.value);
|
||||
}
|
||||
});
|
||||
|
||||
// Инициализируем глобальные обработчики клавиш при монтировании компонента
|
||||
onMounted(() => {
|
||||
cmdkStore.initGlobalKeydown();
|
||||
|
||||
// Устанавливаем searchInput
|
||||
if (searchInput.value) {
|
||||
cmdkStore.setSearchInput(searchInput.value);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
cmdkStore.destroyGlobalKeydown();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cmdk-dialog {
|
||||
max-width: 100%;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.cmdk-panel {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.cmdk-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.cmdk-search-icon {
|
||||
color: #666;
|
||||
margin-right: 12px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.cmdk-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
|
||||
&::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-close-btn {
|
||||
margin-left: 12px;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-content {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 105, 92, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-group {
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
// Плоский список (режим поиска)
|
||||
.cmdk-flat-list {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.cmdk-flat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 105, 92, 0.06);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba(0, 105, 92, 0.1);
|
||||
}
|
||||
|
||||
&.is-workspace {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 105, 92, 0.04);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba(0, 105, 92, 0.08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-flat-workspace-icon {
|
||||
margin-right: 12px;
|
||||
color: #00695c;
|
||||
font-size: 18px;
|
||||
opacity: 0.7;
|
||||
|
||||
&_direct {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-flat-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cmdk-flat-workspace-name {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cmdk-flat-title {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.badge-active {
|
||||
margin-left: 8px;
|
||||
background: #00695c;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-flat-shortcut {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.cmdk-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 105, 92, 0.04);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba(0, 105, 92, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-group-icon {
|
||||
margin-right: 12px;
|
||||
color: #00695c;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.cmdk-group-title {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.cmdk-group-badge {
|
||||
background: #00695c;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cmdk-pages {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.cmdk-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 20px 10px 56px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 105, 92, 0.06);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba(0, 105, 92, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-page-icon {
|
||||
margin-right: 12px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cmdk-page-title {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.cmdk-page-shortcut {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.cmdk-empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 20px;
|
||||
color: #999;
|
||||
|
||||
.q-icon {
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.empty-subtext {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.cmdk-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
kbd {
|
||||
background: #e0e0e0;
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Анимации
|
||||
.cmdk-fade-enter-active,
|
||||
.cmdk-fade-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.cmdk-fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.cmdk-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
// Темная тема
|
||||
body.body--dark {
|
||||
.cmdk-panel {
|
||||
background: #1e1e1e;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.cmdk-header {
|
||||
background: #2a2a2a;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.cmdk-input {
|
||||
color: #e0e0e0;
|
||||
|
||||
&::placeholder {
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-group-header:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.cmdk-group-header.selected {
|
||||
background: rgba(0, 105, 92, 0.15);
|
||||
}
|
||||
|
||||
.cmdk-group-title {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
// Плоский список (поиск) - темная тема
|
||||
.cmdk-flat-item {
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba(0, 105, 92, 0.15);
|
||||
}
|
||||
|
||||
&.is-workspace {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba(0, 105, 92, 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-flat-workspace-icon {
|
||||
color: #4db6ac;
|
||||
}
|
||||
|
||||
.cmdk-flat-workspace-name {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.cmdk-flat-title {
|
||||
color: #e0e0e0;
|
||||
|
||||
.badge-active {
|
||||
background: #4db6ac;
|
||||
}
|
||||
}
|
||||
|
||||
.cmdk-page:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.cmdk-page.selected {
|
||||
background: rgba(0, 105, 92, 0.15);
|
||||
}
|
||||
|
||||
.cmdk-page-title {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.cmdk-footer {
|
||||
background: #2a2a2a;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.cmdk-hint {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.cmdk-empty-state {
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
<template lang="pug">
|
||||
q-btn.cmdk-trigger(
|
||||
flat,
|
||||
dense,
|
||||
stack,
|
||||
@click="openCmdkDialog"
|
||||
:color="buttonColor"
|
||||
:class="{ 'active': cmdkStore.activeWorkspaceIcon !== 'fa-solid fa-desktop' }"
|
||||
)
|
||||
|
||||
.trigger-content
|
||||
q-icon.trigger-icon(:name="cmdkStore.activeWorkspaceIcon")
|
||||
.trigger-text {{ cmdkStore.activeWorkspaceTitle }}
|
||||
.cmdk-shortcut(v-if="cmdkStore.shortcutHint") {{ cmdkStore.shortcutHint }}
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useCmdkMenuStore } from 'src/entities/CmdkMenu/model';
|
||||
|
||||
const cmdkStore = useCmdkMenuStore();
|
||||
const $q = useQuasar();
|
||||
|
||||
const isDark = computed(() => $q.dark.isActive);
|
||||
|
||||
const buttonColor = computed(() => isDark.value ? 'white' : 'black');
|
||||
|
||||
const openCmdkDialog = () => {
|
||||
cmdkStore.openDialog();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cmdk-trigger {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border-radius: 0 !important;
|
||||
background: transparent;
|
||||
border: none;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 105, 92, 0.04);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(0, 105, 92, 0.04);
|
||||
}
|
||||
|
||||
.trigger-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.trigger-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.trigger-text {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cmdk-shortcut {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
font-size: 8px;
|
||||
color: #999;
|
||||
font-weight: 500;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1;
|
||||
padding: 1px 3px;
|
||||
border-radius: 3px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
export { default as CmdkTrigger } from './CmdkTrigger.vue';
|
||||
@@ -1,5 +1,4 @@
|
||||
export * from './CmdkMenu';
|
||||
export * from './CmdkTrigger';
|
||||
export * from './LeftDrawerMenu';
|
||||
export * from './SecondLevelMenuList';
|
||||
export * from './WorkspaceMenu';
|
||||
|
||||
Reference in New Issue
Block a user