create-meadminjs 1.0.0

package/template/meadmin/view/admin/src/components/meSearchMenu/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="me-search-menu pointer" @click="showSearch = true">
+    <mel-icon-search class="icon"></mel-icon-search>
+    <el-dialog
+      v-model="showSearch"
+      :show-close="false"
+      @keydown.down="handleDown() && srollToIndex()"
+      @keyup.up="handleUp() && srollToIndex()"
+      @keyup.enter="
+        handleEnter();
+        close();
+      "
+    >
+      <div class="search">
+        <el-input v-model="searchText" size="large" :placeholder="$t('搜索') + $t(' ') + $t('菜单')" :prefix-icon="Search" clearable @input="search(searchText)"> </el-input>
+        <div v-if="filteredMenu.length" ref="listRef" class="list">
+          <el-scrollbar max-height="300px">
+            <a
+              v-for="(item, index) in filteredMenu"
+              :key="index"
+              class="item"
+              :class="{ active: activeIndex === index }"
+              @click.stop="
+                jump(item);
+                close();
+              "
+              @mouseenter="activeIndex = index"
+            >
+              {{ item.meta.title }}
+            </a>
+          </el-scrollbar>
+        </div>
+        <el-empty v-else :image-size="80" />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script setup lang="ts" name="MeSearchMenu">
+import { jump } from '@/router';
+import { Search } from '@element-plus/icons-vue';
+import { useSearchMenu } from './useSearchMenu';
+const showSearch = ref(false);
+const searchText = ref('');
+const listRef = ref<HTMLElement>();
+const { filteredMenu, search, activeIndex, handleDown, handleUp, handleEnter } = useSearchMenu();
+const srollToIndex = () => {
+  listRef.value!.querySelectorAll('.item')[activeIndex.value].scrollIntoView({
+    behavior: 'smooth',
+  });
+};
+const close = () => {
+  showSearch.value = false;
+  searchText.value = '';
+  filteredMenu.value = [];
+};
+</script>
+<style lang="scss" scoped>
+.me-search-menu {
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+
+  .icon {
+    font-size: 1.3em;
+  }
+  :deep(.el-dialog__header) {
+    display: none;
+  }
+  :deep(.el-dialog) {
+    min-width: 300px;
+  }
+}
+.search {
+  .list {
+    padding: 10px 0;
+    .item {
+      display: block;
+      padding: 10px 32px 10px 20px;
+      line-height: 1.2em;
+    }
+    .active {
+      color: var(--el-color-primary);
+      background-color: var(--el-fill-color-light);
+    }
+  }
+}
+</style>

package/template/meadmin/view/admin/src/components/meSearchMenu/useSearchMenu.ts

@@ -0,0 +1,87 @@
+import { jump, resolvePath } from '@/router';
+import { useGlobalStore, useRouteStore } from '@/store';
+import { RouteRecordRaw } from 'vue-router';
+
+import { debounce } from 'lodash-es';
+const menuList = [] as { path: string; isLink?: boolean; title: string[] }[];
+
+const createMenuList = (routes: RouteRecordRaw[], baseTitle: string[] = [], basePath = '') => {
+  routes.forEach((item) => {
+    if (item.meta?.title) {
+      const path = resolvePath(item.path, basePath);
+      const title = [...baseTitle, item.meta.title];
+      if (!item.meta.hideMenu && (item.redirect || !item.children?.length)) {
+        menuList.push({
+          path,
+          title,
+          isLink: item.meta.isLink,
+        });
+      }
+      if (item.children) {
+        createMenuList(item.children, title, path);
+      }
+    }
+  });
+};
+
+export const useSearchMenu = (debounceTime = 500) => {
+  const { i18n } = useGlobalStore();
+  const { routes } = useRouteStore();
+  !menuList.length && createMenuList(routes);
+  const filteredMenu = ref<{ path: string; meta: { isLink?: boolean; title: string } }[]>([]);
+  const activeIndex = ref(0);
+  const search = debounce((searchText: string) => {
+    filteredMenu.value = [];
+    activeIndex.value = 0;
+    searchText &&
+      menuList.forEach((item) => {
+        const title = item.title.map((v) => i18n.t(v)).join(' > ');
+        if (title.search(searchText) > -1) {
+          filteredMenu.value.push({
+            path: item.path,
+            meta: {
+              title,
+              isLink: item.isLink,
+            },
+          });
+        }
+        return filteredMenu.value;
+      });
+  }, debounceTime);
+
+  // Arrow key up
+  function handleUp() {
+    if (!filteredMenu.value.length) return false;
+    activeIndex.value--;
+    if (activeIndex.value < 0) {
+      activeIndex.value = filteredMenu.value.length - 1;
+    }
+    return true;
+  }
+
+  // Arrow key down
+  function handleDown() {
+    if (!filteredMenu.value.length) return false;
+    activeIndex.value++;
+    if (activeIndex.value > filteredMenu.value.length - 1) {
+      activeIndex.value = 0;
+    }
+    return true;
+  }
+
+  // enter keyboard event
+  async function handleEnter() {
+    if (!filteredMenu.value[activeIndex.value]) return false;
+    jump(filteredMenu.value[activeIndex.value]);
+    return true;
+  }
+
+  return {
+    search,
+    filteredMenu,
+    activeIndex,
+    handleUp,
+    handleDown,
+    handleEnter,
+  };
+};

package/template/meadmin/view/admin/src/components/meSelectFile/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <me-dialog v-model="show" class="me-select-file-da0344ese" :title="t('选择文件')" :close-on-click-modal="false" @closed="emit('closed')">
+    <me-vxe-table
+      v-model:quick-search="params.name"
+      :loading="loading"
+      :data="data?.list"
+      :pagination-options="{
+        currentPage: params.page,
+        pageSize: params.pageSize,
+        total: data?.total ?? 0,
+        layout: 'sizes, prev, pager, next, jumper, ->, total',
+        change: search,
+      }"
+      align="center"
+      border
+      :on-add="undefined"
+      @refresh="search(1)"
+      @quick-search="search(1)"
+    >
+      <vxe-column field="id" :title="t('ID')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="name" :title="t('文件名')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="url" :title="t('预览')">
+        <template #default="{ row }: { row: FileInfo }">
+          <el-image
+            v-if="isImage(row.url)"
+            class="view-img"
+            :src="row.url"
+            :zoom-rate="1.2"
+            :max-scale="7"
+            :min-scale="0.2"
+            :preview-src-list="[row.url]"
+            show-progress
+            preview-teleported
+            fit="scale-down"
+          />
+          <a v-else class="el-link el-link--primary" :href="row.url" target="_blank" :title="t('点击下载')">
+            <mel-icon-download size="20px"></mel-icon-download>
+          </a>
+        </template>
+      </vxe-column>
+      <vxe-column field="path" :title="t('路径')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="mimeType" :title="t('mime类型')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="size" :title="t('文件大小')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="storage" :title="t('存储引擎')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="createdAdmin" :title="t('创建者')" :formatter="formatterStr">
+        <template #default="{ row }: { row: FileInfo }"> {{ row.createdAdmin.nickname }}({{ row.createdAdmin.username }}) </template>
+      </vxe-column>
+      <vxe-column field="createdAt" :title="t('创建时间')" :formatter="formatterAt"></vxe-column>
+      <vxe-column :title="t('操作')" fixed="right">
+        <template #default="{ row }: { row: FileInfo }">
+          <el-button @click="select(row)"> <mel-icon-select />{{ t('选择') }} </el-button>
+        </template>
+      </vxe-column>
+    </me-vxe-table>
+  </me-dialog>
+</template>
+
+<script setup lang="ts" name="MeSelectFile">
+import { FileInfo, FileListParam, fileMyListApi } from '@/api/file';
+import { useLocalesI18n } from '@/locales/i18n';
+import { isImage } from '@/utils/helper';
+import { formatterAt, formatterStr } from '@/utils/helper.js';
+const show = defineModel<boolean>('show');
+const emit = defineEmits<{
+  closed: [];
+  selected: [FileInfo];
+}>();
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`@/views/file/lang/${locale}.json`), 'file']);
+const params = reactive(new FileListParam());
+const { loading, data, runAsync } = fileMyListApi();
+const search = (page = params.pageSize, pageSize = params.pageSize) => runAsync(Object.assign(params, { page, pageSize }));
+const select = (file: FileInfo) => {
+  emit('selected', file);
+  emit('closed');
+};
+await Promise.all([loadRes, search(1)]);
+</script>
+<style lang="scss">
+.me-select-file-da0344ese {
+  height: 60vh;
+  width: 80vw;
+  .view-img {
+    width: 50px;
+    height: 50px;
+  }
+}
+</style>

package/template/meadmin/view/admin/src/components/meSelectFile/meSelectFile.ts

@@ -0,0 +1,3 @@
+import { useActionModel } from '@/hooks/index.js';
+import MeSelectFile from './index.vue';
+export const useMeSelectFile = () => useActionModel(MeSelectFile, true, 'show');

package/template/meadmin/view/admin/src/components/meSelectList.vue

@@ -0,0 +1,80 @@
+<template>
+  <el-select
+    v-bind="omit(attrs, 'filterable', 'loading', 'filterMethod')"
+    :ref="changeRef"
+    v-model="modelValue"
+    :loading="loading"
+    :filterable="true"
+    :filter-method="filterMethod"
+    class="me-sleect-list"
+  >
+    <template v-for="(_, name) in $slots" #[name]="data">
+      <slot :name="name" v-bind="data || {}"></slot>
+    </template>
+    <template v-if="!$slots.default && !attrs.options">
+      <el-option v-for="item in options" :key="item.id" :label="item[attrs.props?.label || 'label']" :value="attrs.valueKey ? item : item[attrs.props?.value || 'value']"></el-option>
+    </template>
+    <template v-if="!$slots.footer" #footer>
+      <el-pagination :total="page.total" size="small" :current-page="page.currentPage" :page-size="page.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
+    </template>
+  </el-select>
+</template>
+
+<script setup lang="ts" name="MeSleectList">
+import { PageResult } from '@/api/api.model.js';
+import { snakeToCamelCaseObj } from '@/utils/formatting.js';
+import { SelectInstance, SelectProps } from 'element-plus';
+import { omit } from 'lodash-es';
+const attrs = snakeToCamelCaseObj(useAttrs()) as Record<string, any> & SelectProps;
+const modelValue = defineModel<SelectProps['modelValue']>();
+defineOptions({ inheritAttrs: false });
+const loading = ref(false);
+const page = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+});
+const { onSearch } = defineProps<{
+  onSearch: (query: string, page: number, pageSize: number) => Promise<PageResult<any>> | PageResult<any>;
+}>();
+const searchText = ref('');
+const options = ref([] as any[]);
+//实现筛选查询
+const filterMethod = async (query?: string, currentPage?: number, pageSize?: number) => {
+  loading.value = true;
+  searchText.value = query ?? searchText.value;
+  page.currentPage = currentPage ?? page.currentPage;
+  page.pageSize = pageSize ?? page.pageSize;
+  try {
+    const res = await onSearch(searchText.value, page.currentPage, page.pageSize);
+    page.total = res.pageSize;
+    options.value = res.list;
+  } finally {
+    loading.value = false;
+  }
+};
+//页数改变
+const handleCurrentChange = (val: number) => {
+  filterMethod(undefined, val, undefined);
+};
+//每页记录数改变
+const handleSizeChange = (val: number) => {
+  filterMethod(undefined, undefined, val);
+};
+//声明类型
+const selectRef = ref<SelectInstance | null>();
+const vm = getCurrentInstance();
+function changeRef(ref: Element | ComponentPublicInstance | null) {
+  if (vm) {
+    //暴露elSelect属性
+    vm.exposed = ref;
+    selectRef.value = ref as SelectInstance;
+  }
+}
+defineExpose({} as SelectInstance);
+await filterMethod();
+</script>
+<style lang="scss" scoped>
+.me-sleect-list {
+}
+</style>

package/template/meadmin/view/admin/src/components/meSelectUserFile/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <me-dialog v-model="show" class="me-select-file-da0344ese" :title="t('选择文件')" :close-on-click-modal="false" @closed="emit('closed')">
+    <me-vxe-table
+      v-model:quick-search="params.name"
+      :loading="loading"
+      :data="data?.list"
+      :pagination-options="{
+        currentPage: params.page,
+        pageSize: params.pageSize,
+        total: data?.total ?? 0,
+        layout: 'sizes, prev, pager, next, jumper, ->, total',
+        change: search,
+      }"
+      align="center"
+      border
+      :on-add="undefined"
+      @refresh="search(1)"
+      @quick-search="search(1)"
+    >
+      <vxe-column field="id" :title="t('ID')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="name" :title="t('文件名')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="url" :title="t('预览')">
+        <template #default="{ row }: { row: UserFileInfo }">
+          <el-image
+            v-if="isImage(row.url)"
+            class="view-img"
+            :src="row.url"
+            :zoom-rate="1.2"
+            :max-scale="7"
+            :min-scale="0.2"
+            :preview-src-list="[row.url]"
+            show-progress
+            preview-teleported
+            fit="scale-down"
+          />
+          <a v-else class="el-link el-link--primary" :href="row.url" target="_blank" :title="t('点击下载')">
+            <mel-icon-download size="20px"></mel-icon-download>
+          </a>
+        </template>
+      </vxe-column>
+      <vxe-column field="path" :title="t('路径')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="mimeType" :title="t('mime类型')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="size" :title="t('文件大小')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="storage" :title="t('存储引擎')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="createdAdmin" :title="t('创建者(用户)')">
+        <template #default="{ row }: { row: UserFileInfo }">
+          <template v-if="row.createdUser"> {{ row.createdUser.nickname }}({{ row.createdUser.username }}) </template>
+          <template v-else> -- </template>
+        </template>
+      </vxe-column>
+      <vxe-column field="createdAdmin" :title="t('创建者(管理员)')">
+        <template #default="{ row }: { row: UserFileInfo }">
+          <template v-if="row.createdAdmin"> {{ row.createdAdmin.nickname }}({{ row.createdAdmin.username }}) </template>
+          <template v-else> -- </template>
+        </template>
+      </vxe-column>
+      <vxe-column field="createdAt" :title="t('创建时间')" :formatter="formatterAt"></vxe-column>
+      <vxe-column :title="t('操作')" fixed="right">
+        <template #default="{ row }: { row: UserFileInfo }">
+          <el-button @click="select(row)"> <mel-icon-select />{{ t('选择') }} </el-button>
+        </template>
+      </vxe-column>
+    </me-vxe-table>
+  </me-dialog>
+</template>
+
+<script setup lang="ts" name="MeSelectFile">
+import { UserFileInfo, userFileListApi, UserFileListParam } from '@/api/userFile';
+import { useLocalesI18n } from '@/locales/i18n';
+import { isImage } from '@/utils/helper';
+import { formatterAt, formatterStr } from '@/utils/helper.js';
+const show = defineModel<boolean>('show');
+const emit = defineEmits<{
+  closed: [];
+  selected: [UserFileInfo];
+}>();
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`@/views/file/lang/${locale}.json`), 'file']);
+const params = reactive(new UserFileListParam());
+const { loading, data, runAsync } = userFileListApi();
+const search = (page = params.pageSize, pageSize = params.pageSize) => runAsync(Object.assign(params, { page, pageSize }));
+const select = (file: UserFileInfo) => {
+  emit('selected', file);
+  emit('closed');
+};
+await Promise.all([loadRes, search(1)]);
+</script>
+<style lang="scss">
+.me-select-file-da0344ese {
+  height: 60vh;
+  width: 80vw;
+  .view-img {
+    width: 50px;
+    height: 50px;
+  }
+}
+</style>

package/template/meadmin/view/admin/src/components/meSelectUserFile/meSelectUserFile.ts

@@ -0,0 +1,3 @@
+import { useActionModel } from '@/hooks/index.js';
+import MeSelectFile from './index.vue';
+export const useMeSelectUserFile = () => useActionModel(MeSelectFile, true, 'show');

package/template/meadmin/view/admin/src/components/meSetting.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="me-setting pointer" @click="setting.showSettingMenu = true">
+    <mel-icon-setting class="icon"></mel-icon-setting>
+  </div>
+</template>
+<script setup lang="ts" name="MeSetting">
+import { useSettingStore } from '@/store';
+let setting = useSettingStore();
+</script>
+<style lang="scss" scoped>
+.me-setting {
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+
+  .icon {
+    font-size: 1.2em;
+  }
+}
+</style>

package/template/meadmin/view/admin/src/components/meSettingMenu.vue

@@ -0,0 +1,152 @@
+<template>
+  <el-drawer v-model="setting.showSettingMenu" :title="$t('项目配置')" size="300px" append-to-body>
+    <el-form class="content" label-position="left" label-width="170px">
+      <div class="title">
+        <div class="title-content">{{ $t('布局') }}</div>
+      </div>
+      <div class="info" :style="{ '--primaryColor': themeConfig.primaryColor }">
+        <div class="layout-base layout-left" :class="{ active: themeConfig.menuType === 'sidebar' }" :title="$t('左侧菜单模式')" @click="themeConfig.menuType = 'sidebar'"></div>
+        <div class="layout-base layout-top" :class="{ active: themeConfig.menuType === 'top' }" :title="$t('顶部菜单混合模式')" @click="themeConfig.menuType = 'top'"></div>
+      </div>
+      <div class="title">
+        <div class="title-content">{{ $t('配置') }}</div>
+      </div>
+      <el-form-item :label="$t('主题色')">
+        <el-color-picker v-model="themeConfig.primaryColor" :predefine="predefinePrimaryColors" />
+      </el-form-item>
+      <el-form-item :label="$t('侧边栏背景色')">
+        <el-color-picker v-model="themeConfig.menuBg" :predefine="sidebarBgColors" />
+      </el-form-item>
+      <el-form-item :label="$t('折叠侧边栏')">
+        <el-switch v-model="themeConfig.menuCollapse"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('侧边栏展开宽度')">
+        <el-input v-model="themeConfig.menuWidth"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('固定') + $t(' ') + $t('Header')">
+        <el-switch v-model="themeConfig.fixedHeader"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('顶栏')">
+        <el-switch v-model="themeConfig.topBar"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('菜单') + $t(' ') + $t('搜索')">
+        <el-switch v-model="themeConfig.showSearchMenu"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('模式') + $t(' ') + $t('切换')">
+        <el-switch v-model="themeConfig.showDark"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('Size') + $t(' ') + $t('切换')">
+        <el-switch v-model="themeConfig.showSize"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('面包屑')">
+        <el-switch v-model="themeConfig.breadcrumb"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('标签栏')">
+        <el-switch v-model="themeConfig.tagBar"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('标签栏') + $t(' ') + $t('刷新') + $t(' ') + $t('按钮')">
+        <el-switch v-model="themeConfig.tagBarRefresh"></el-switch>
+      </el-form-item>
+      <el-form-item :label="$t('标签栏') + $t(' ') + $t('菜单') + $t(' ') + $t('按钮')">
+        <el-switch v-model="themeConfig.tagBarMenu"></el-switch>
+      </el-form-item>
+      <el-button style="width: 100%" @click="Object.assign(themeConfig, origionThemeConfig)">{{ $t('重置') }} </el-button>
+      <el-button style="width: 100%; margin: 10px 0" type="danger" @click="clear"> {{ $t('清除缓存') }}{{ $t(' ') }}{{ $t('并') }}{{ $t(' ') }}{{ $t('退出登录') }} </el-button>
+    </el-form>
+  </el-drawer>
+</template>
+<script lang="ts" setup name="MeSettingMenu">
+import { themeConfig as origionThemeConfig } from '@/config';
+import { useSettingStore, useUserStore } from '@/store';
+const setting = useSettingStore();
+const { themeConfig } = storeToRefs(setting);
+const userStore = useUserStore();
+const predefinePrimaryColors = reactive(['#409EFF', '#1890FF', '#304156', '#212121', '#11A983', '#13C2C2', '#6959CD', '#F5222D']);
+const sidebarBgColors = reactive(['#1d1e1f', '#212121', '#273352', '#ffffff', '#191b24', '#191a23', '#304156', '#001628']);
+const clear = () => {
+  setting.clearCache();
+  userStore.logOut();
+};
+</script>
+<style lang="scss" scoped>
+.content {
+  margin-top: -32px;
+  .title {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 24px 0;
+    border-top: 1px var(--el-border-color) var(--el-border-style);
+    position: relative;
+    .title-content {
+      position: absolute;
+      background-color: var(--el-bg-color);
+      padding: 0 20px;
+      font-weight: 500;
+      color: var(--el-text-color-primary);
+      font-size: 14px;
+      left: 50%;
+      transform: translate(-50%) translateY(-50%);
+    }
+  }
+  .info {
+    display: flex;
+    justify-content: center;
+    .layout-base {
+      width: 50px;
+      height: 50px;
+      border-radius: 5px;
+      position: relative;
+      background: #e5e7eb;
+      border: 1px solid #e5e7eb;
+      margin-right: 15px;
+      cursor: pointer;
+    }
+    .active {
+      border: 2px solid var(--primaryColor) !important;
+    }
+    .layout-left::before {
+      content: '';
+      background-color: #000;
+      position: absolute;
+      left: 0;
+      width: 10px;
+      top: 0;
+      bottom: 0;
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
+    }
+    .layout-left::after {
+      content: '';
+      background-color: #fff;
+      position: absolute;
+      left: 10px;
+      right: 0;
+      top: 0;
+      height: 10px;
+      border-top-right-radius: 5px;
+    }
+    .layout-top::before {
+      content: '';
+      background-color: #000;
+      position: absolute;
+      left: 0;
+      width: 10px;
+      top: 10px;
+      bottom: 0;
+      border-bottom-left-radius: 5px;
+    }
+    .layout-top::after {
+      content: '';
+      background-color: #fff;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      height: 10px;
+      border-top-right-radius: 5px;
+      border-top-left-radius: 5px;
+    }
+  }
+}
+</style>

package/template/meadmin/view/admin/src/components/meSizeSelect.vue

@@ -0,0 +1,28 @@
+<template>
+  <el-dropdown class="me-size-select" trigger="click" max-height="500px">
+    <div class="flex-center pointer">
+      <me-icon-size class="icon"></me-icon-size>
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item v-for="item in SizeEnum" :key="item" :disabled="themeConfig.size === item" @click="themeConfig.size = item">{{ $t(item) }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+<script setup lang="ts" name="MeSizeSelect">
+import { SizeEnum } from '@/dict/configEnum';
+import { useSettingStore } from '@/store';
+const { themeConfig } = storeToRefs(useSettingStore());
+</script>
+<style lang="scss" scoped>
+.me-size-select {
+  .flex-center {
+    padding: 0 10px;
+
+    .icon {
+      font-size: 1.3em;
+    }
+  }
+}
+</style>