@gindow/element-go 1.0.0

package/package.json

@@ -0,0 +1,133 @@
+{
+  "name": "@gindow/element-go",
+  "version": "1.0.0",
+  "description": "基于 Element Plus 的桌面端扩展组件库",
+  "type": "module",
+  "license": "MIT",
+  "main": "./dist/element-go.cjs",
+  "types": "./dist/element-go.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/element-go.d.ts",
+      "import": "./dist/element-go.mjs",
+      "require": "./dist/element-go.cjs"
+    },
+    "./resolver": {
+      "types": "./dist/resolver.d.ts",
+      "import": "./dist/resolver.mjs",
+      "require": "./dist/resolver.cjs"
+    },
+    "./styles/index.css": "./dist/styles/index.css",
+    "./styles/arco.css": "./src/styles/arco.css",
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "vue-tsc --noEmit && vite build"
+  },
+  "peerDependencies": {
+    "@iconify/vue": "^5.0.0",
+    "@gindow/vue": "^1.0.3",
+    "@vueuse/core": "^12.0.0",
+    "axios": "^1.6.0",
+    "compressorjs": "^1.2.0",
+    "dayjs": "^1.11.0",
+    "element-plus": "^2.7.0",
+    "file-type-checker": "^1.0.0",
+    "heic2any": "^0.0.4",
+    "js-cookie": "^3.0.0",
+    "lodash": "^4.17.0",
+    "nanoid": "^5.0.0",
+    "rxjs": "^7.0.0",
+    "sortablejs": "^1.15.0",
+    "vue": "^3.5.0",
+    "vue-request": "^2.0.0",
+    "vue-router": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@iconify/vue": {
+      "optional": true
+    },
+    "@vueuse/core": {
+      "optional": true
+    },
+    "axios": {
+      "optional": true
+    },
+    "compressorjs": {
+      "optional": true
+    },
+    "dayjs": {
+      "optional": true
+    },
+    "file-type-checker": {
+      "optional": true
+    },
+    "heic2any": {
+      "optional": true
+    },
+    "js-cookie": {
+      "optional": true
+    },
+    "lodash": {
+      "optional": true
+    },
+    "nanoid": {
+      "optional": true
+    },
+    "rxjs": {
+      "optional": true
+    },
+    "sortablejs": {
+      "optional": true
+    },
+    "vue-request": {
+      "optional": true
+    },
+    "vue-router": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@iconify/vue": "^5.0.1",
+    "@tailwindcss/vite": "^4.3.1",
+    "@types/js-cookie": "^3.0.6",
+    "@types/lodash": "^4.17.24",
+    "@types/node": "^22.20.0",
+    "@types/sortablejs": "^1.15.9",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitejs/plugin-vue-jsx": "^5.1.6",
+    "@vue/tsconfig": "^0.9.1",
+    "@vueuse/core": "^12.8.2",
+    "axios": "^1.18.1",
+    "compressorjs": "^1.3.0",
+    "dayjs": "^1.11.21",
+    "element-plus": "^2.14.2",
+    "file-type-checker": "^1.1.7",
+    "heic2any": "^0.0.4",
+    "js-cookie": "^3.0.8",
+    "lodash": "^4.18.1",
+    "nanoid": "^5.1.15",
+    "rxjs": "^7.8.2",
+    "sortablejs": "^1.15.7",
+    "tailwindcss": "^4.3.1",
+    "typescript": "^6.0.3",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-vue-components": "^32.1.0",
+    "vite": "^8.1.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.38",
+    "vue-i18n": "^11.4.6",
+    "vue-request": "^2.0.4",
+    "vue-router": "^4.6.4",
+    "vue-tsc": "^3.3.5"
+  }
+}

package/src/components/ExAssetPreview.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-image-viewer v-if="show"
+    :url-list="assetUrls"
+    :initial-index="initialIndex"
+    :infinite="false"
+    @close="onClose"
+    @setActiveItem="setActiveItem">
+    <template #viewer-error>
+      <div class="flex-col flex-center bg-white p-10 z-999 rounded-4xl">
+        <ex-icon icon="file-question" :size="40" />
+        <div class="mt-10">{{ currentAsset?.title }}</div>
+      </div>
+    </template>
+    <template #toolbar="{ actions }">
+      <ex-icon icon="zoom-out" @click="actions('zoomOut')" />
+      <ex-icon icon="zoom-in" @click="actions('zoomIn')" />
+      <ex-icon icon="redo" @click="actions('clockwise')" />
+      <ex-icon icon="undo" @click="actions('anticlockwise')" />
+      <ex-icon icon="download" @click="onDownload" />
+    </template>
+  </el-image-viewer>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { IAsset } from '../types'
+import { useMessage } from '../hooks/useMessage'
+import { useLocale } from '../locale'
+import { download } from '../utils/download'
+import ExIcon from './ExIcon.vue'
+
+const props = defineProps({
+  asset: { type: Object as PropType<IAsset>, default: () => ({}) },
+  assets: { type: Array as PropType<IAsset[]>, default: () => [] },
+})
+
+const show = defineModel('show', { type: Boolean, default: false })
+const assetUrls = computed(() => props.assets.map(item => item.shrink ?? item?.url))
+const initialIndex = computed(() => props.assets.findIndex(item => item.id === props.asset?.id) ?? 0)
+
+const onClose = () => show.value = false
+const index = ref(initialIndex.value === -1 ? 0 : initialIndex.value)
+const currentAsset = computed(() => props.assets[index.value])
+const setActiveItem = (value: number) => index.value = value
+
+const { t } = useLocale()
+const { error } = useMessage()
+const onDownload = () => {
+  if (!currentAsset.value) return
+  fetch(currentAsset.value.url)
+    .then(response => response.blob())
+    .then(blob => download(blob, currentAsset.value!.title))
+    .catch(() => error(t('core.message.downloadFailed')))
+}
+</script>

package/src/components/ExButton.vue

@@ -0,0 +1,47 @@
+<template>
+  <el-tooltip v-if="tooltip" :content="tooltip" :effect :rawContent :show-after>
+    <el-button v-bind="$attrs" :class="{ 'is-on': on }" :icon :link :circle>
+      <template v-if="$slots.default" #default>
+        <slot />
+      </template>
+    </el-button>
+  </el-tooltip>
+  <el-button v-else v-bind="$attrs" :class="{ 'is-on': on }" :icon :link :circle>
+    <template v-if="$slots.default" #default>
+      <slot />
+    </template>
+  </el-button>
+</template>
+
+<script setup lang="ts">
+import { useIcon } from '../hooks/useIcon'
+
+defineOptions({ inheritAttrs: false })
+
+const { iconVendor: vendor, iconColor, strokeWidth, ...props } = defineProps({
+  icon: { type: String },
+  iconVendor: { type: String, default: 'icon-park-outline' },
+  iconColor: { type: String },
+  iconSize: { type: Number, default: 16 },
+  strokeWidth: { type: Number, default: 3 },
+  link: { type: Boolean, default: true },
+  circle: { type: Boolean, default: false },
+  on: { type: Boolean, default: false },
+  tooltip: { type: String },
+  effect: { type: String, default: 'dark' },
+  rawContent: { type: Boolean, default: false },
+  showAfter: { type: Number, default: 500 },
+})
+
+const { i } = useIcon()
+
+const color = computed(() => iconColor ?? (props.on ? 'var(--el-color-primary)' : undefined))
+const icon = computed(() => props.icon ? i(props.icon, { vendor, color: color.value, strokeWidth }) : undefined)
+const iconSize = computed(() => props.iconSize + 'px')
+const link = computed(() => props.circle ? false : props.link)
+</script>
+
+<style scoped>
+.el-button :deep(.el-icon) { font-size: v-bind(iconSize); }
+.el-button.is-on { color: var(--el-color-primary); }
+</style>

package/src/components/ExEmpty.vue

@@ -0,0 +1,26 @@
+<template>
+  <el-empty>
+    <template #image>
+      <ex-icon icon="topic-discussion" :size="72" :stroke-width="1" />
+    </template>
+    <template #description>
+      <div class="mb-[10px]" v-if="title">{{ title }}</div>
+      <div class="text-sm text-gray-500">{{ description || t('empty.noData') }}</div>
+    </template>
+  </el-empty>
+</template>
+
+<script setup lang="ts">
+import { useLocale } from '../locale'
+import ExIcon from './ExIcon.vue'
+
+defineProps({
+  title: { type: String },
+  description: { type: String },
+})
+
+const { t } = useLocale()
+</script>
+
+<style scoped>
+</style>

package/src/components/ExForm.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-dialog v-if="onShow" v-model="show" align-center :title :show-close="false" :width>
+    <el-form v-bind="$attrs" ref="formRef" class="ex-form mt-5!" label-suffix=":" :labelWidth :labelPosition :model :rules @submit.prevent="submit">
+      <slot />
+      <el-row :gutter="20">
+        <el-col v-for="{ label, rules, ...field } in fields" :span :hidden="field.hidden" class="pb-4.5">
+          <el-form-item :prop="field.name" :label :rules :required="field.required">
+            <slot name="field" :model :field>
+              <ex-form-field v-model="model" :field />
+            </slot>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template v-if="loaded" #footer>
+      <el-button type="primary" @click="submit" :disabled :loading>{{ submitText || t('core.save') }}</el-button>
+      <el-button @click="cancel">{{ cancelText || t('core.cancel') }}</el-button>
+    </template>
+  </el-dialog>
+  <el-form v-else v-bind="$attrs" ref="formRef" class="ex-form" label-suffix=":" :labelWidth :labelPosition :model :rules @submit.prevent="submit">
+    <slot />
+    <el-row :gutter="20">
+      <el-col v-for="{ label, rules, required, hidden, props, ...field } in fields" :span :hidden class="pb-4.5">
+        <el-form-item :prop="field.name" :label :rules :required>
+          <ex-form-field v-model="model" :field />
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-form-item v-if="loaded">
+      <template #label><div /></template>
+      <el-button type="primary" native-type="submit" :disabled :loading>{{ submitText || t('core.save') }}</el-button>
+      <el-button native-type="reset" @click="reset">{{ resetText || t('core.reset') }}</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import type { IModel } from '../types'
+import { useLocale } from '../locale'
+import ExFormField from './ExFormField.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const { fields: fieldsData, formColumns, labelPosition, destroyOnClose, ...props } = defineProps({
+  fields: { type: [Array, Object], default: () => ({}) },
+  rules: { type: Object as PropType<FormRules>, default: () => {} },
+  title: { type: String, default: 'Dialog' },
+  submitText: { type: String },
+  cancelText: { type: String },
+  resetText: { type: String },
+  loaded: { type: Boolean, default: true },
+  loading: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  formColumns: { type: Number, default: 1 },
+  labelWidth: { type: String, default: 'auto' },
+  labelPosition: { type: String as PropType<'top' | 'left' | 'right'> },
+  destroyOnClose: { type: Boolean, default: false },
+  width: { type: String },
+})
+
+const emit = defineEmits(['submit', 'reset', 'cancel'])
+
+const model = defineModel({ type: Object as PropType<IModel>, default: () => ({}) })
+const show = defineModel('show', { type: Boolean, default: false })
+
+const { t } = useLocale()
+
+const span = computed(() => 24 / formColumns)
+const width = computed(() => props.width || (labelPosition === 'top' ? 320 : 400) * formColumns)
+const fields = computed(() => Array.isArray(fieldsData) ? fieldsData : Object.entries(fieldsData).map(([key, value]) => ({ ...value, name: key })))
+
+// 表单及校验
+const formRef = useTemplateRef<FormInstance>('formRef')
+const clearValidate = () => formRef.value!.clearValidate()
+const submit = () => formRef.value!.validate().then(() => emit('submit', model.value)).catch(() => {})
+const reset = () => {
+  formRef.value!.resetFields()
+  emit('reset')
+}
+
+// 操作按钮
+const instance = getCurrentInstance()
+const onShow = instance?.vnode.props?.['onUpdate:show']
+const cancel = () => {
+  if (destroyOnClose) reset() // 清除表单
+  show.value = false
+  emit('cancel')
+}
+
+defineExpose({ submit, reset, clearValidate, validate: () => formRef.value!.validate() })
+</script>
+
+<style scoped>
+</style>

package/src/components/ExFormField.vue

@@ -0,0 +1,49 @@
+<template>
+  <component v-if="custom" :is="custom" v-model="model[name]" v-bind="attrs" :disabled class="w-full" @change="emit('change', $event)" />
+  <el-select v-else-if="type === 'select'" v-model="model[name]" v-bind="attrs" :disabled clearable class="w-full" @change="emit('change', $event)">
+    <template v-for="{ label, value, options } in field.options" :key="value">
+      <el-option-group v-if="options" :label>
+        <el-option v-for="{ label, value } in options" :key="value" :label :value />
+      </el-option-group>
+      <el-option v-else :label :value />
+    </template>
+  </el-select>
+  <el-cascader v-else-if="type === 'cascader'" v-model="model[name]" v-bind="attrs" :disabled :options="field.options" collapse-tags collapse-tags-tooltip :maxCollapseTags clearable filterable class="w-full" @change="emit('change', $event)" />
+  <el-radio-group v-else-if="type === 'radio'" v-model="model[name]" v-bind="attrs" :disabled @change="emit('change', $event)">
+    <el-radio v-for="{ label, value } in field.options" :key="value" :value="value">{{ label }}</el-radio>
+  </el-radio-group>
+  <el-date-picker v-else-if="type === 'date' || type === 'daterange'" v-model="model[name]" v-bind="attrs" :type :disabled clearable format="YYYY-MM-DD" value-format="YYYY-MM-DD" :start-placeholder="t('core.datetime.start')" :end-placeholder="t('core.datetime.end')" class="w-full" @change="emit('change', $event)" />
+  <!-- <ex-price v-else-if="type === 'currency'" v-model="model[name]" v-bind="attrs" :selectable="false" /> -->
+  <el-switch v-else-if="type === 'switch'" v-model="model[name]" v-bind="attrs" :disabled />
+  <ex-input-percentage v-else-if="type === 'percentage'" v-model="model[name]" v-bind="attrs" class="w-full" />
+  <el-input-number v-else-if="type === 'number'" v-model="model[name]" v-bind="attrs" :disabled clearable class="w-full" />
+  <el-tree-select v-else-if="type === 'tree'" v-model="model[name]" v-bind="attrs" :disabled clearable filterable class="w-full" @change="emit('change', $event)" />
+  <el-input v-else-if="type === 'password'" v-model="model[name]" v-bind="attrs" :type :disabled clearable autocomplete="new-password" />
+  <el-input v-else v-model="model[name]" v-bind="attrs" :type :disabled clearable />
+</template>
+
+<script setup lang="ts">
+import type { IField } from '../types'
+import { useLocale } from '../locale'
+import ExInputPercentage from './ExInputPercentage.vue'
+
+const props = defineProps({
+  field: { type: Object as PropType<IField>, required: true },
+})
+
+const model = defineModel({ type: Object as PropType<any> })
+
+const emit = defineEmits(['change'])
+
+const { t } = useLocale()
+
+const name = computed(() => props.field.name)
+const type = computed(() => props.field.type)
+const disabled = computed(() => !!props.field.disabled || !!props.field.readonly)
+const custom = computed(() => props.field.component ? markRaw(toRaw(props.field.component)) : null) // 自定义组件
+const maxCollapseTags = computed(() => props.field.maxCollapseTags || 2)
+const attrs = computed(() => {
+  const { name, type, readonly, options, component, ...rest } = props.field
+  return rest
+})
+</script>

package/src/components/ExFormSearch.vue

@@ -0,0 +1,50 @@
+<template>
+  <el-form :model="params" inline @submit.prevent="onSearch" @reset.prevent="onReset">
+    <slot />
+    <template v-for="{ label, rules, ...field } in fields.filter(field => !field.hidden)">
+      <el-form-item :prop="['filter', field.name]" :label :rules :required="field.required">
+        <ex-form-field v-model="params.filter" :field @change="onSearch" />
+      </el-form-item>
+    </template>
+    <el-form-item v-if="searching" prop="search" :label="t('core.keywords')">
+      <el-input v-model="params.search" :placeholder clearable @keyup.enter="onSearch" />
+    </el-form-item>
+    <el-form-item>
+      <el-button native-type="submit" type="primary">{{ t('core.search') }}</el-button>
+      <el-button native-type="reset">{{ t('core.reset') }}</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import type { IField, IFilter, IParams } from '../types'
+import { useLocale } from '../locale'
+import ExFormField from './ExFormField.vue'
+
+const props = defineProps({
+  filter: { type: Object as PropType<Record<string, IFilter>>, default: () => ({}) },
+  search: { type: Boolean, default: true },
+  placeholder: { type: String },
+})
+
+const emit = defineEmits(['search', 'reset'])
+
+const params = defineModel<IParams>('params', { default: () => ({ filter: {}, search: '' }) })
+
+const { t } = useLocale()
+
+const searching = computed(() => Object.keys(params.value).includes('search') && props.search)
+const fields = computed(() => Object.keys(props.filter).map(name => ({ ...props.filter[name], name }) as IField))
+
+const onReset = () => emit('reset')
+const onSearch = () => {
+  params.value.search = params.value.search?.trim() || ''
+  emit('search', params.value)
+}
+</script>
+
+<style scoped>
+.el-form :deep(.el-form-item) { display: inline-block; vertical-align: bottom; margin-bottom: 20px; margin-right: 10px; max-width: 250px; }
+.el-form :deep(.el-input) { --el-input-width: 160px; }
+.el-form :deep(.el-select) { --el-select-width: 160px; }
+</style>

package/src/components/ExFormViewer.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-dialog v-if="onShow" v-model="show" :title="topic" align-center :width :fullscreen="!isDesktop" @close="close">
+    <el-descriptions :border :title :extra :column :labelWidth v-bind="$attrs">
+      <template #extra><slot name="extra" /></template>
+      <el-descriptions-item v-for="{ label, value, span, align, VNode } in items" :label :span>
+        <component v-if="VNode" :is="VNode" />
+        <div v-else v-html="value" :class="`text-${align}`" />
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-dialog>
+  <el-descriptions :border :title :extra :column :labelWidth v-bind="$attrs" v-else>
+    <template #extra><slot name="extra" /></template>
+    <el-descriptions-item v-for="{ label, value, span, align, VNode } in items" :label :span>
+      <component v-if="VNode" :is="VNode" />
+      <div v-else v-html="value" :class="`text-${align}`" />
+    </el-descriptions-item>
+  </el-descriptions>
+</template>
+
+<script setup lang="ts">
+import type { PropType, VNode } from 'vue'
+import { computed, getCurrentInstance } from 'vue'
+import { useBreak } from '../hooks/useBreak'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  topic: { type: String, default: '详情' },
+  width: { type: String, default: '800px' },
+  title: { type: String },
+  extra: { type: String },
+  items: { type: Array as PropType<Array<{ label: string; value?: string; align?: string; span?: number; VNode?: VNode }>>, default: () => [] },
+  column: { type: Number, default: 2 },
+  border: { type: Boolean, default: true },
+  labelWidth: { type: String, default: '120px' },
+})
+
+const show = defineModel('show', { type: Boolean, default: false })
+
+const { isDesktop } = useBreak()
+
+const onShow = getCurrentInstance()?.vnode.props?.['onUpdate:show']
+const close = () => show.value = false
+
+const column = computed(() => isDesktop.value ? props.column : 1)
+</script>
+
+<style scoped>
+.el-descriptions :deep(.el-descriptions__label) { min-width: v-bind(labelWidth); }
+.el-descriptions :deep(.el-descriptions__content) { width: calc(100% / v-bind(column)); }
+</style>

package/src/components/ExIcon.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-icon v-if="icon" :class="{ 'cursor-pointer': hasClick, circle, 'is-loading': loading }" :size>
+    <v-icon :icon :vendor :strokeWidth :color />
+  </el-icon>
+</template>
+
+<script setup lang="ts">
+import vIcon from './vIcon.vue'
+
+const { size } = defineProps({
+  icon: { type: String, default: '' },
+  size: { type: Number, default: 16 },
+  color: { type: String },
+  strokeWidth: { type: Number },
+  loading: { type: Boolean, default: false },
+  circle: { type: Boolean, default: false },
+  vendor: { type: String },
+})
+
+const attrs = useAttrs()
+const hasClick = computed(() => 'onClick' in attrs)
+</script>
+
+<style scoped>
+.circle {
+  width: v-bind(size + 16 + 'px');
+  height: v-bind(size + 16 + 'px');
+  border: 1px solid var(--el-border-color);
+  background-color: var(--el-fill-color-blank);
+  border-radius: 50%;
+  cursor: pointer;
+}
+</style>

package/src/components/ExInputPercentage.vue

@@ -0,0 +1,36 @@
+<template>
+  <el-input-number v-model="percentage" controls-position="right" :step="0.01" :precision :controls clearable @change="change">
+    <template #prefix v-if="symbol">
+      <span>{{ symbol }}</span>
+    </template>
+  </el-input-number>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: { type: [Number, String], default: '' },
+  symbol: { type: String, default: '%' },
+  precision: { type: Number, default: 2 },
+  controls: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const round = (v: number, p: number) => Math.round(v * 10 ** p) / 10 ** p // 保留 N 位小数
+
+const percentage = computed({
+  get: (): number | undefined => {
+    const n = parseFloat(props.modelValue as string)
+    return Number.isFinite(n) ? round(n * 100, props.precision) : undefined
+  },
+  set: (v: number | undefined) => {
+    const next = v == null ? undefined : round(v / 100, props.precision + 2)
+    emit('update:modelValue', next)
+  },
+})
+
+const change = (current: number | undefined) => {
+  const next = current == null ? undefined : round(current / 100, props.precision + 2)
+  emit('change', next)
+}
+</script>

package/src/components/ExLayout/account.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-dropdown placement="bottom-end"> 
+    <!-- <el-badge :is-dot="!user.secured"> 
+      <el-avatar :src :size="32">
+        <el-image :src="avatar" />
+      </el-avatar>
+    </el-badge>     
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item @click="web('/account/profile')">{{ t('core.profile') }}</el-dropdown-item>
+        <el-badge :is-dot="!user.secured" :offset="[-10, 10]">
+          <el-dropdown-item @click="web('/account/password')">{{ t('core.password') }}</el-dropdown-item>
+        </el-badge>
+        <el-dropdown-item @click="logout">{{ t('core.logout') }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </template> -->
+  </el-dropdown>
+</template>
+<script setup lang="ts">
+// import avatar from '@packages/core/assets/avatar.png'
+
+// const { t } = useI18n()
+// const { push } = useRouter()
+// const { web } = useApplication()
+// const { user } = storeToRefs(useMainStore())
+
+// // 退出登录
+// const src = computed(() => user.value.avatar?.shrink ?? avatar)
+// const logout = () => useMainStore().logout().then(() => push('/login'))
+</script>
+
+<style scoped>
+</style>