@neatui/vue 5.6.1 → 5.8.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @neatui/vue 更新记录
 
+## 5.8.0
+
+### IRouterView
+- 新增 `source` 属性：`query`（默认）从 `route.query` 读详情 ID，`params` 从 `route.params` 读（路由声明为 `/project/:id?` 这类形状）。
+- `source="params"` 时点遮罩返回列表：按匹配到的路由模式截掉 `:id` 及其后的路径段，query 原样保留，`/project/123/products/4?page=2` 回到 `/project?page=2`；不依赖路由 name，alias 路由同样适用。
+- 默认行为不变：不传 `source` 仍按 query 工作，老项目零改动。
+- Nuxt 页面用 `source="params"` 时需 `definePageMeta({ key })` 固定页面 key：`NuxtPage` 默认按参数生成 key，id 变化会整页重挂载。
+
 ## 5.5.1
 
 - 无组件改动，版本号与 `@neatui/css` 同步。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "5.6.1",
+  "version": "5.8.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
     "@fekit/utils": "^6.0.0",
-    "@neatui/css": "^5.6.1",
+    "@neatui/css": "^5.8.0",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",

package/src/components/basic/IRouterView.vue

@@ -24,6 +24,11 @@
     animate?: boolean | 0 | 1;
     mode?: 'default' | 'preview' | 'pop-up' | 'window';
     queryName?: string;
+    /**
+     * 详情 ID 从哪里读：query（?id=1）或 params（/project/1，路由需声明 :id?）。
+     * params 模式下 Nuxt 页面需用 definePageMeta({ key }) 固定页面 key，否则 id 变化会整页重挂载。
+     */
+    source?: 'query' | 'params';
     listClass?: string;
     listStyle?: string;
     itemClass?: string;
@@ -35,6 +40,7 @@
     animate: 1,
     mode: 'default',
     queryName: 'id',
+    source: 'query',
     listClass: 'full',
     listStyle: '',
     itemClass: 'full',
@@ -71,8 +77,11 @@
     };
   };
 
+  // 详情 ID 的容器：query（?id=1）或 params（/project/1）
+  const itemSource = () => (props.source === 'params' ? route.params : route.query);
+
   const hasItemQuery = () => {
-    const value = route.query[props.queryName];
+    const value = itemSource()[props.queryName];
     if (Array.isArray(value)) return value.some((item) => item !== undefined && item !== null && item !== '');
     return value !== undefined && value !== null && value !== '';
   };
@@ -122,12 +131,24 @@
   provide('onlist', evs('list', 'item'));
   provide('onitem', evs('item', 'list'));
   if (env.client) {
-    watch(() => route.query[props.queryName], a);
+    watch(() => itemSource()[props.queryName], a);
     a();
   }
 
+  // params 模式回列表：按匹配到的路由模式找到 :id 段，截掉它和它之后的路径段，query 原样保留
+  // /project/123/products/4?page=2 → /project?page=2；不依赖路由 name，alias 路由也适用
+  const listLocation = () => {
+    const pattern = route.matched[route.matched.length - 1]?.path || '';
+    const idSegment = new RegExp(`^:${props.queryName}(\\(.*\\))?[?*+]?$`);
+    const index = pattern.split('/').findIndex((seg) => idSegment.test(seg));
+    if (index > 0) return { path: route.path.split('/').slice(0, index).join('/') || '/', query: route.query };
+    // :id 不是独立路径段（如 /project-:id?）时，按当前命名路由把它置空
+    return { params: { ...route.params, [props.queryName]: '' }, query: route.query };
+  };
+
   // 取消
   const cancel = () => {
+    if (props.source === 'params') return router.push(listLocation());
     const _query = { ...route.query };
     delete _query[props.queryName];
     router.push({ path: route.path, query: _query });

package/src/components/basic/SideMenu.vue

@@ -0,0 +1,480 @@
+<template>
+  <div ref="root" class="ui-sidemenu flex-fixed" :data-mode="mode" :data-open="isOpen ? 1 : 0" :data-rail="rail ? 1 : 0" :data-opening="opening ? 1 : 0">
+    <div class="ui-sidemenu-mask" @click="setOpen(false)"></div>
+    <aside class="ui-sidemenu-panel" ui-flex="col xy">
+      <div class="ui-sidemenu-header flex-fixed" ui-flex="row xm">
+        <div class="ui-sidemenu-title flex-block">
+          <slot name="header" :rail="rail" :mode="mode">
+            <h5 ui-omit="1"><b>{{ title }}</b></h5>
+          </slot>
+        </div>
+        <button v-if="toggle" :aria-expanded="isOpen" :aria-label="toggleLabel" :title="toggleLabel" ui-btn="@a s none :square" type="button" @click="setOpen(!isOpen)">
+          <i class="icon icon-menu"></i>
+        </button>
+      </div>
+      <div class="flex-block" ui-scroll="x:hidden :y">
+        <ul class="ui-sidemenu-list">
+          <li v-for="(item, idx) in list" :key="item.__key" :class="{ active: item.__active }" :data-open="item.__open ? 1 : 0" >
+            <IFollowView v-model="railMap[item.__key]" btn-class="block" event="hover" pos="rb" tip-class="mt-ss">
+              <div class="ui-sidemenu-item bg-weak:hover" @click.stop="onItem(item, idx)">
+                <component
+                  :is="item.children ? 'button' : linkTag"
+                  v-bind="item.children ? { type: 'button', 'aria-expanded': rail ? !!railMap[item.__key] : !!item.__open } : linkProps(item)"
+                  :aria-label="rail ? item.name : undefined"
+                  ui-flex="row lm"
+                >
+                  <div ui-flex="row cm">
+                    <div ui-btn="@a s none :square">
+                      <slot name="icon" :item="item"><i :class="`fs++ icon ${item.icon || ''}`"></i></slot>
+                    </div>
+                    <span class="ui-sidemenu-name">{{ item.name }}</span>
+                  </div>
+                  <i v-if="item.children" class="ui-sidemenu-arrow icon icon-dropdown"></i>
+                  <span v-else-if="item.badge" class="ui-sidemenu-badge bg-risk co-fore lh-xs nx-sm ny-ss r-full">{{ badgeText(item.badge) }}</span>
+                </component>
+              </div>
+              <div v-if="item.children" class="ui-sidemenu-sub-wrap" :inert="rail || !item.__open">
+                <ul class="ui-sidemenu-sub">
+                  <li v-for="sub in item.children" :key="sub.__key" :class="{ 'co-main': sub.__active }">
+                    <component :is="linkTag" v-bind="linkProps(sub)" @click="onLeaf(sub)">{{ sub.name }}</component>
+                  </li>
+                </ul>
+              </div>
+              <template v-if="item.children && rail" #tips>
+                <ul :id="`${uid}-${item.__key}`" class="n-sl" ui-wrap="no">
+                  <li v-for="sub in item.children" :key="sub.__key" :class="{ 'co-main': sub.__active }" class="ux-hover r-sm nx-sl ny-ss">
+                    <component :is="linkTag" v-bind="linkProps(sub)" class="block" @click="onLeaf(sub)">{{ sub.name }}</component>
+                  </li>
+                </ul>
+              </template>
+            </IFollowView>
+          </li>
+        </ul>
+      </div>
+      <div v-if="$slots.footer" class="ui-sidemenu-footer flex-fixed">
+        <slot name="footer" :rail="rail" :mode="mode"></slot>
+      </div>
+    </aside>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, useId, watch } from 'vue';
+  import { RouterLink, useRoute } from 'vue-router';
+  import IFollowView from './IFollowView.vue';
+
+  export interface SideMenuItem {
+    id?: string | number;
+    name: string;
+    path?: string;
+    icon?: string;
+    badge?: number | string;
+    children?: SideMenuItem[];
+    [key: string]: any;
+  }
+  type Mode = 'mob' | 'pad' | 'dpc';
+
+  const props = withDefaults(
+    defineProps<{
+      menus?: SideMenuItem[];
+      /** v-model:open；不传时组件自管，默认电脑展开、平板/手机收起 */
+      open?: boolean | number;
+      /** 当前路径，不传取 vue-router 当前路由 */
+      active?: string;
+      /** 子路由（/a/b）也高亮 /a */
+      prefix?: boolean;
+      title?: string;
+      toggle?: boolean;
+      toggleLabel?: string;
+      /** 同时只展开一个分组 */
+      accordion?: boolean;
+    }>(),
+    { menus: () => [], open: undefined, active: undefined, prefix: true, title: '', toggle: true, toggleLabel: '切换侧边栏', accordion: true },
+  );
+  const emit = defineEmits<{
+    (e: 'update:open', v: boolean): void;
+    (e: 'select', item: SideMenuItem): void;
+    (e: 'mode', mode: Mode): void;
+  }>();
+
+  // ---- 三端 ----
+  // 断点同 @neatui/css query：mob < 800 ≤ pad < 1280 ≤ dpc
+  const mode = ref<Mode>('dpc');
+  let mqMob: MediaQueryList | undefined;
+  let mqPad: MediaQueryList | undefined;
+  const readMode = () => {
+    mode.value = mqMob?.matches ? 'mob' : mqPad?.matches ? 'pad' : 'dpc';
+  };
+
+  // ---- 展开 ----
+  const inner = ref(true);
+  const isOpen = computed(() => (props.open === undefined ? inner.value : !!props.open));
+  const rail = computed(() => mode.value !== 'mob' && !isOpen.value);
+  const opening = ref(false);
+  let openingTimer: ReturnType<typeof setTimeout> | undefined;
+  const setOpen = (v: boolean) => {
+    inner.value = v;
+    emit('update:open', v);
+  };
+  watch(isOpen, (v) => {
+    // 展开过程中延迟展开子菜单，避免宽度动画时文字换行跳动
+    if (openingTimer) clearTimeout(openingTimer);
+    opening.value = v;
+    if (v) openingTimer = setTimeout(() => (opening.value = false), 400);
+  });
+  watch(mode, (m, old) => {
+    emit('mode', m);
+    // 换端时回到该端的默认态：电脑展开，平板/手机收起
+    if (old) setOpen(m === 'dpc');
+  });
+
+  const onKey = (e: KeyboardEvent) => {
+    if (e.key === 'Escape' && isOpen.value && mode.value !== 'dpc') setOpen(false);
+  };
+
+  onMounted(() => {
+    mqMob = window.matchMedia('(max-width: 799px)');
+    mqPad = window.matchMedia('(max-width: 1279px)');
+    readMode();
+    mqMob.addEventListener('change', readMode);
+    mqPad.addEventListener('change', readMode);
+    emit('mode', mode.value);
+    if (props.open === undefined) inner.value = mode.value === 'dpc';
+    else if (mode.value !== 'dpc' && props.open) setOpen(false);
+    window.addEventListener('keydown', onKey);
+  });
+  onBeforeUnmount(() => {
+    mqMob?.removeEventListener('change', readMode);
+    mqPad?.removeEventListener('change', readMode);
+    window.removeEventListener('keydown', onKey);
+    if (openingTimer) clearTimeout(openingTimer);
+  });
+
+  // ---- 菜单 ----
+  const route = useRoute();
+  const current = computed(() => props.active ?? route?.path ?? '');
+  const hit = (path?: string) => {
+    if (!path) return false;
+    const p = current.value.replace(/\/+$/, '') || '/';
+    const b = path.replace(/\/+$/, '') || '/';
+    return p === b || (props.prefix && b !== '/' && p.startsWith(b + '/'));
+  };
+  const keyOf = (item: SideMenuItem, idx: number) => String(item.id ?? item.path ?? idx);
+  const openMap = reactive<Record<string, boolean>>({});
+  // 收起态悬浮子菜单的显示状态
+  const railMap = reactive<Record<string, number>>({});
+  const uid = useId() || 'sidemenu';
+
+  const list = computed(() =>
+    props.menus.map((item, idx) => {
+      const __key = keyOf(item, idx);
+      if (!item.children?.length) return { ...item, children: undefined, __key, __active: hit(item.path), __open: false };
+      let __active = false;
+      const children = item.children.map((sub, i) => {
+        const a = hit(sub.path);
+        if (a) __active = true;
+        return { ...sub, __key: keyOf(sub, i), __active: a };
+      });
+      return { ...item, children, __key, __active, __open: openMap[__key] ?? false };
+    }),
+  );
+
+  // 当前路由所在分组自动展开（菜单异步到达、直接输网址都生效）
+  const activeGroup = computed(() => list.value.find((m) => m.children && m.__active)?.__key || '');
+  watch(
+    activeGroup,
+    (k) => {
+      if (!k) return;
+      if (props.accordion) Object.keys(openMap).forEach((o) => (openMap[o] = false));
+      openMap[k] = true;
+    },
+    { immediate: true },
+  );
+
+  const onItem = (item: any, _idx: number) => {
+    if (!item.children) return onLeaf(item);
+    // 收起态用悬浮子菜单：鼠标 hover 打开，键盘/点击切换并把焦点移入第一项
+    if (rail.value) {
+      const next = !railMap[item.__key];
+      railMap[item.__key] = next ? 1 : 0;
+      if (next) nextTick(() => document.getElementById(`${uid}-${item.__key}`)?.querySelector<HTMLElement>('a')?.focus());
+      return;
+    }
+    const next = !item.__open;
+    if (props.accordion) Object.keys(openMap).forEach((o) => (openMap[o] = false));
+    openMap[item.__key] = next;
+  };
+  const onLeaf = (item: SideMenuItem) => {
+    emit('select', item);
+    // 平板/手机选完收起浮层
+    if (mode.value !== 'dpc' && isOpen.value) setOpen(false);
+  };
+
+  const linkTag = computed(() => (route ? RouterLink : 'a'));
+  const linkProps = (item: SideMenuItem) => (route ? { to: item.path || '' } : { href: item.path || '' });
+  const badgeText = (b: number | string) => (typeof b === 'number' && b > 99 ? '99+' : b);
+
+  defineExpose({ mode, open: isOpen, setOpen });
+</script>
+
+<style lang="scss">
+  $rail: 5rem;
+  $full: 18rem;
+  $ease: cubic-bezier(0.32, 0.72, 0, 1);
+
+  .ui-sidemenu {
+    position: relative;
+    height: 100%;
+    width: $full;
+    z-index: 20;
+    transition: width 0.2s;
+
+    &[data-rail='1'] {
+      width: $rail;
+    }
+    // 平板：始终占轨道宽，展开时浮在内容上
+    &[data-mode='pad'] {
+      width: $rail;
+    }
+    // 手机：不占位，抽屉
+    &[data-mode='mob'] {
+      width: 0;
+    }
+  }
+
+  .ui-sidemenu-panel {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: var(--co-fore);
+    box-shadow: 0 0 0.5rem color-mix(in srgb, var(--co-deep) 95%, transparent);
+    transition: width 0.2s, transform 0.4s $ease, box-shadow 0.4s $ease;
+
+    [data-mode='pad'] > & {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: $rail;
+    }
+    [data-mode='pad'][data-open='1'] > & {
+      width: $full;
+    }
+    [data-mode='mob'] > & {
+      position: fixed;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: min(#{$full}, 85vw);
+      z-index: 40;
+      transform: translate3d(-100%, 0, 0);
+      box-shadow: none;
+    }
+    [data-mode='mob'][data-open='1'] > & {
+      transform: translate3d(0, 0, 0);
+      box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .ui-sidemenu-mask {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.4s $ease;
+    z-index: 39;
+
+    [data-mode='pad'] > & {
+      background: transparent;
+    }
+    [data-mode='mob'][data-open='1'] > &,
+    [data-mode='pad'][data-open='1'] > & {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+  [data-mode='pad'] > .ui-sidemenu-panel {
+    z-index: 40;
+  }
+
+  .ui-sidemenu-header {
+    height: 4rem;
+    line-height: 2rem;
+    padding: 1rem 0.75rem 1rem 1rem;
+    white-space: nowrap;
+    box-shadow: 0 1px 0 var(--co-back);
+    transition: padding 0.2s;
+  }
+  .ui-sidemenu-footer {
+    padding: 1rem;
+    transition: padding 0.2s;
+  }
+
+  .ui-sidemenu-title,
+  .ui-sidemenu-name {
+    opacity: 1;
+    transition: opacity 0.2s 0.2s;
+    vertical-align: middle;
+    overflow: hidden;
+  }
+
+  .ui-sidemenu-list {
+    & > li {
+      position: relative;
+      white-space: nowrap;
+      padding: 0.25rem;
+      user-select: none;
+      transition: padding 0.2s;
+
+      &.active {
+        color: var(--co-main);
+        &::before {
+          position: absolute;
+          content: '';
+          width: 2px;
+          height: 2.5rem;
+          left: 0;
+          top: 0.25rem;
+          background: var(--co-main);
+        }
+      }
+    }
+    a {
+      cursor: pointer;
+      color: inherit;
+    }
+  }
+  .ui-sidemenu-item {
+    position: relative;
+    display: block;
+    padding: 0.25em;
+    border-radius: 0.5rem;
+    cursor: pointer;
+  }
+
+  // 分组标题用原生按钮，去掉默认样式
+  .ui-sidemenu-item > button {
+    width: 100%;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .ui-sidemenu-arrow {
+    position: absolute;
+    width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    right: 0;
+    top: 50%;
+    margin-top: -1rem;
+    text-align: center;
+    transform: rotate(-90deg);
+    transition: transform 0.2s, opacity 0.2s 0.1s;
+  }
+  [data-open='1'] > * > .ui-sidemenu-item .ui-sidemenu-arrow {
+    transform: rotate(-180deg);
+  }
+
+  .ui-sidemenu-badge {
+    position: absolute;
+    top: 50%;
+    right: 1rem;
+    transform: translate3d(50%, -50%, 0) scale(0.5);
+    pointer-events: none;
+  }
+
+  // 二级（展开态）
+  .ui-sidemenu-sub-wrap {
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition: grid-template-rows 0.2s, opacity 0.2s;
+  }
+  .ui-sidemenu-list > [data-open='1'] .ui-sidemenu-sub-wrap {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+  .ui-sidemenu[data-opening='1'] .ui-sidemenu-list > [data-open='1'] .ui-sidemenu-sub-wrap {
+    transition-delay: 0.2s;
+  }
+  .ui-sidemenu-sub {
+    position: relative;
+    min-height: 0;
+    overflow: hidden;
+    padding-left: 2.5rem;
+    line-height: 2.5rem;
+    color: var(--co-read);
+
+    & > li {
+      position: relative;
+      height: 2.5rem;
+      padding: 0 0.5em;
+      border-radius: 0.5rem;
+      &:hover {
+        background: var(--co-weak);
+      }
+      a {
+        display: block;
+      }
+      // 树线
+      &::before {
+        position: absolute;
+        content: '';
+        width: 2px;
+        height: 100%;
+        top: 0;
+        left: -0.5em;
+        border-right: 1px solid var(--co-line);
+      }
+      &:last-child::before {
+        height: 50%;
+      }
+      &::after {
+        position: absolute;
+        content: '';
+        width: 0.6em;
+        height: 1px;
+        top: 50%;
+        left: -0.5em;
+        background: var(--co-line);
+      }
+    }
+  }
+
+  // 收起轨道态（电脑收起 / 平板默认）
+  .ui-sidemenu[data-rail='1'] {
+    .ui-sidemenu-header,
+    .ui-sidemenu-footer {
+      padding: 1rem 1.5rem;
+    }
+    .ui-sidemenu-title {
+      position: absolute;
+      left: 0.5rem;
+      opacity: 0;
+      visibility: hidden;
+      transition: none;
+    }
+    .ui-sidemenu-name {
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.15s;
+    }
+    .ui-sidemenu-list > li {
+      padding: 0.25rem 1.25rem;
+    }
+    .ui-sidemenu-sub-wrap,
+    .ui-sidemenu-arrow {
+      display: none;
+    }
+    .ui-sidemenu-badge {
+      top: 0;
+      right: 0;
+      transform: translate3d(40%, -30%, 0) scale(0.5);
+    }
+  }
+</style>

package/src/components/basic/SideView.vue

@@ -0,0 +1,488 @@
+<template>
+  <div class="ui-sideview-wrap flex-fixed" :data-side="isOpen ? 'open' : 'hide'">
+    <div :class="{ 'ui-sideview-opening': opening }" class="ui-sideview">
+      <div class="ui-sideview-mob-hide"></div>
+      <component :is="linkTag" v-bind="linkProps({ path: home })" :ui-hide="isOpen ? '' : '<pad'" class="ui-sideview-header" ui-flex="row lm">
+        <slot name="header" :open="isOpen">
+          <h5 class="ui-sideview-header-title nl-ss"><b>{{ title }}</b></h5>
+        </slot>
+      </component>
+      <div :ui-hide="isOpen ? '' : '<pad'" class="ui-sideview-middle" ui-scroll="x:hidden :y">
+        <ul class="ui-sideview-list">
+          <li v-for="item in list" :key="item.__key" :class="{ active: item.__active }" :data-open="item.__open ? 1 : 0">
+            <IFollowView btn-class="block" event="hover" pos="rb" tip-class="mt-ss">
+              <div class="bg-weak:hover" @click.stop="toggleGroup(item)">
+                <div v-if="item.children" ui-flex="row lm">
+                  <div ui-flex="row cm">
+                    <div ui-btn="@a s none :square">
+                      <slot name="icon" :item="item"><i :class="`fs++ icon ${item.icon || ''}`"></i></slot>
+                    </div>
+                    <span class="ui-sideview-list-item-name">{{ item.name }}</span>
+                  </div>
+                  <i class="ui-sideview-list-item-sown icon icon-dropdown"></i>
+                </div>
+                <component :is="linkTag" v-else v-bind="linkProps(item)" ui-flex="row lm" @click="emit('select', item)">
+                  <div ui-flex="row cm">
+                    <div ui-btn="@a s none :square">
+                      <slot name="icon" :item="item"><i :class="`fs++ icon ${item.icon || ''}`"></i></slot>
+                    </div>
+                    <span class="ui-sideview-list-item-name">{{ item.name }}</span>
+                  </div>
+                </component>
+              </div>
+              <div v-if="item.children" class="ui-sideview-list-tow-height">
+                <ul class="ui-sideview-list-tow">
+                  <li v-for="sub in item.children" :key="sub.__key" :class="{ 'co-main': sub.__active }">
+                    <component :is="linkTag" v-bind="linkProps(sub)" @click="emit('select', sub)">{{ sub.name }}</component>
+                  </li>
+                </ul>
+              </div>
+              <template v-if="item.children && !isOpen" #tips>
+                <ul class="ui-sideview-list-tow n-sl" ui-wrap="no">
+                  <li v-for="sub in item.children" :key="sub.__key" :class="{ 'co-main': sub.__active }" class="ux-hover r-sm nx-sl ny-ss">
+                    <component :is="linkTag" v-bind="linkProps(sub)" @click="emit('select', sub)">{{ sub.name }}</component>
+                  </li>
+                </ul>
+              </template>
+            </IFollowView>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';
+  import { RouterLink, useRoute } from 'vue-router';
+  import IFollowView from './IFollowView.vue';
+  import type { SideMenuItem } from './SideMenu.vue';
+
+  // 经典侧栏：展开 18rem / 收起 5rem 图标栏（悬浮子菜单）；手机收起时宽 0
+  const props = withDefaults(
+    defineProps<{
+      menus?: SideMenuItem[];
+      /** v-model:open，不传时组件自管，默认展开 */
+      open?: boolean | number;
+      /** 当前路径，不传取 vue-router 当前路由 */
+      active?: string;
+      /** 子路由（/a/b）也高亮 /a */
+      prefix?: boolean;
+      title?: string;
+      /** 标题链接地址 */
+      home?: string;
+    }>(),
+    { menus: () => [], open: undefined, active: undefined, prefix: true, title: '', home: '/' },
+  );
+  const emit = defineEmits<{
+    (e: 'update:open', v: boolean): void;
+    (e: 'select', item: SideMenuItem): void;
+  }>();
+
+  const inner = ref(true);
+  const isOpen = computed(() => (props.open === undefined ? inner.value : !!props.open));
+  const setOpen = (v: boolean) => {
+    inner.value = v;
+    emit('update:open', v);
+  };
+
+  // 展开侧栏时延迟展开子菜单，避免宽度动画过程中文字换行跳动
+  const opening = ref(false);
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  watch(isOpen, (v) => {
+    if (timer) clearTimeout(timer);
+    opening.value = v;
+    if (v) timer = setTimeout(() => (opening.value = false), 400);
+  });
+  onBeforeUnmount(() => timer && clearTimeout(timer));
+
+  const route = useRoute();
+  const current = computed(() => props.active ?? route?.path ?? '');
+  const hit = (path?: string) => {
+    if (!path) return false;
+    const p = current.value;
+    return p === path || (props.prefix && p.startsWith(path + '/'));
+  };
+  const keyOf = (item: SideMenuItem, idx: number) => String(item.id ?? item.path ?? idx);
+
+  // 展开状态单独存放；未手动操作过时，默认展开当前路由所在分组
+  const openMap = reactive<Record<string, boolean>>({});
+  const list = computed(() =>
+    props.menus.map((item, idx) => {
+      const __key = keyOf(item, idx);
+      if (!item.children?.length) return { ...item, children: undefined, __key, __active: hit(item.path), __open: false };
+      let __active = false;
+      const children = item.children.map((sub, i) => {
+        const a = hit(sub.path);
+        if (a) __active = true;
+        return { ...sub, __key: keyOf(sub, i), __active: a };
+      });
+      return { ...item, children, __key, __active, __open: openMap[__key] ?? __active };
+    }),
+  );
+  const toggleGroup = (item: any) => {
+    if (!item.children) return;
+    const next = !item.__open;
+    list.value.forEach((m) => (openMap[m.__key] = false));
+    openMap[item.__key] = next;
+  };
+
+  const linkTag = computed(() => (route ? RouterLink : 'a'));
+  const linkProps = (item: { path?: string }) => (route ? { to: item.path || '' } : { href: item.path || '' });
+
+  defineExpose({ open: isOpen, setOpen });
+</script>
+
+<style lang="scss">
+  .ui-sideview-wrap {
+    height: 100%;
+  }
+  // 侧边栏
+  .ui-sideview {
+    position: relative;
+    left: 0;
+    top: 0;
+    // width: 5rem;
+    padding-top: 4rem;
+    // @include med('=mob') {
+    //   width: 18rem;
+    //   transform: translate3d(-100%, 0, 0);
+    // }
+    height: 100%;
+    z-index: 15;
+
+    background: var(--co-fore);
+    box-shadow: 0 0 0.5rem
+      color-mix(in srgb, var(--co-deep) calc(0.95 * 100%), transparent);
+
+    transition: width 0.3s;
+  }
+
+  // 移动端暗层
+  .ui-sideview-mob-hide {
+    position: absolute;
+    width: 0rem;
+    height: 100%;
+    opacity: 0;
+    pointer-events: none;
+  }
+  // 标题
+  .ui-sideview-header {
+    position: absolute;
+    width: 100%;
+    height: 4rem;
+    left: 0;
+    top: 0;
+    line-height: 2rem;
+    padding: 1rem 0.75rem;
+    white-space: nowrap;
+
+    box-shadow: 0 1px 0 var(--co-back);
+
+    transition: all 0.3s;
+  }
+
+  .ui-sideview-list {
+    & > * {
+      position: relative;
+      white-space: nowrap;
+      padding: 0.25rem;
+      user-select: none;
+      transition: all 0.3s;
+
+      a {
+        cursor: pointer;
+      }
+
+      & > * {
+        position: relative;
+        display: block;
+        cursor: pointer;
+
+        & > * {
+          position: relative;
+          display: block;
+          padding: 0.25em;
+          border-radius: 0.5rem;
+        }
+      }
+
+      &:hover {
+        .ui-sideview-list-tow {
+          opacity: 1;
+          transform: translate3d(0, 0, 0);
+          pointer-events: auto;
+
+          background: var(--co-fore);
+        }
+      }
+
+      &.active {
+        -webkit-font-smoothing: auto;
+
+        color: var(--co-main);
+
+        &::before {
+          position: absolute;
+          content: "";
+          width: 2px;
+          height: 2.5rem;
+          left: 0;
+          top: 0.25rem;
+
+          background: var(--co-main);
+        }
+      }
+    }
+  }
+  .ui-sideview-header-title,
+  .ui-sideview-list-item-name {
+    transition: opacity 0.25s;
+    opacity: 0;
+    vertical-align: middle;
+    pointer-events: none;
+  }
+
+  .ui-sideview-middle {
+    position: relative;
+    height: 100%;
+    & > * {
+      height: 100%;
+    }
+  }
+
+  // 隐藏时
+  [data-side~="hide"] {
+    .ui-sideview-header {
+      padding: 1rem 1.5rem;
+    }
+    .ui-sideview {
+      width: 5rem;
+    }
+    @media screen and (max-width: 799px) {
+      .ui-sideview {
+        width: 0;
+      }
+    }
+
+    .ui-sideview-header-title {
+      position: absolute;
+      left: 0.5rem;
+      opacity: 0;
+      visibility: hidden;
+      transition: none;
+    }
+
+    .ui-sideview-list {
+      & > * {
+        padding: 0.25rem 1.25rem;
+      }
+    }
+
+    .ui-sideview-list-tow-height {
+      display: none;
+    }
+
+    .ui-sideview-list-tow {
+      position: absolute;
+      width: 12rem;
+      top: -1rem;
+      left: 8rem;
+      padding: 1rem 1rem;
+      border-radius: 0.3rem;
+      line-height: 3rem;
+      opacity: 0;
+      transform: translate3d(1rem, 0, 0);
+      pointer-events: none;
+
+      color: var(--co-read);
+
+      transition: none;
+      &::before {
+        position: absolute;
+        content: "";
+        display: block;
+        width: 0;
+        height: 0;
+        box-sizing: content-box;
+        border: 6px solid transparent;
+        right: 99.9%;
+        top: 2.5rem;
+        margin-top: -6px;
+
+        border-right-color: var(--co-fore);
+      }
+      &::after {
+        position: absolute;
+        content: "";
+        display: block;
+        width: 1.5rem;
+        top: 0;
+        bottom: 0;
+        right: 100%;
+      }
+
+      & > * {
+        padding: 0 1rem;
+        border-radius: 0.3rem;
+        &:hover {
+          background: var(--co-weak);
+        }
+      }
+    }
+    .ui-sideview-list-item-sown {
+      pointer-events: none;
+      opacity: 0;
+    }
+  }
+
+  // 展开时
+  [data-side~="open"] {
+    & {
+      // padding-left: 15rem;
+
+      // @include med('=mob') {
+      //   padding-left: 0;
+      //   transform: translate3d(18rem, 0, 0);
+      // }
+
+      .ui-sideview {
+        width: 18rem;
+        .ui-sideview-header-title,
+        .ui-sideview-list-item-name {
+          opacity: 1;
+          pointer-events: auto;
+          vertical-align: middle;
+          transition: opacity 0.3s 0.2s;
+        }
+      }
+    }
+
+    .ui-sideview-list-tow-height {
+      display: grid;
+      grid-template-rows: 0fr;
+      opacity: 0;
+      transition:
+        grid-template-rows 0.2s 0s,
+        opacity 0.2s 0s;
+    }
+
+    .ui-sideview-list-tow {
+      position: relative;
+      width: 100%;
+      min-height: 0;
+      padding-left: 2.5rem;
+      line-height: 2.5rem;
+      overflow: hidden;
+
+      color: var(--co-read);
+
+      & > * {
+        position: relative;
+        height: 2.5rem;
+        padding: 0 0.5em;
+        border-radius: 0.5rem;
+
+        &:hover {
+          background: var(--co-weak);
+        }
+        a {
+          display: block;
+        }
+        &.active {
+          color: var(--co-main);
+        }
+
+        &::before {
+          position: absolute;
+          content: "";
+          display: block;
+          width: 1px;
+          height: 100%;
+          top: 0;
+          left: -0.5em;
+
+          background: var(--co-line);
+        }
+        &:last-child {
+          &::before {
+            height: 50%;
+          }
+        }
+
+        &::after {
+          position: absolute;
+          content: "";
+          display: block;
+          width: 0.6em;
+          height: 1px;
+          top: 50%;
+          left: -0.5em;
+
+          background-color: var(--co-line);
+        }
+      }
+
+      &::before {
+        position: absolute;
+        content: "";
+        display: none;
+        width: 0;
+        height: 0;
+        box-sizing: content-box;
+        border: 6px solid transparent;
+        right: 99.9%;
+        top: 2.5rem;
+        margin-top: -6px;
+
+        border-right-color: var(--co-fore);
+      }
+      &::after {
+        position: absolute;
+        content: "";
+        display: none;
+        width: 1rem;
+        top: 0;
+        bottom: 0;
+        right: 100%;
+      }
+    }
+
+    .ui-sideview-list-item-sown {
+      position: absolute;
+      display: block;
+      width: 2rem;
+      height: 2rem;
+      line-height: 2rem;
+      right: 0;
+      top: 50%;
+      text-align: center;
+      margin-top: -1rem;
+      transform-origin: 50% 50%;
+      transform: rotate(-90deg) scale3d(1, 1, 1);
+      opacity: 1;
+      transition:
+        transform 0.3s,
+        opacity 0.3s 0.2s;
+      pointer-events: auto;
+    }
+
+    .ui-sideview-list > *[data-open="1"] {
+      .ui-sideview-list-tow-height {
+        grid-template-rows: 1fr;
+        opacity: 1;
+      }
+
+      .ui-sideview-list-item-sown {
+        transform: rotate(-180deg) scale3d(1, 1, 1);
+      }
+    }
+
+    .ui-sideview.ui-sideview-opening .ui-sideview-list > *[data-open="1"] {
+      .ui-sideview-list-tow-height {
+        transition-delay: 0.2s;
+      }
+    }
+  }
+
+</style>

package/src/components/basic/index.ts

@@ -4,4 +4,7 @@ import IFollowView from './IFollowView.vue';
 import IPickerView from './IPickerView.vue';
 import IScrollView from './IScrollView.vue';
 import IRouterView from './IRouterView.vue';
-export { Icon, IRouterView, IFollowView, IPickerView, IScrollView, Layer, LayerById };
+import SideMenu from './SideMenu.vue';
+import SideView from './SideView.vue';
+export type { SideMenuItem } from './SideMenu.vue';
+export { Icon, IRouterView, IFollowView, IPickerView, IScrollView, Layer, LayerById, SideMenu, SideView };

package/src/components/form/Upload.vue

@@ -1,10 +1,10 @@
 <template>
   <div ui-flex="row lm :wrap" class="neatui-upload mb-sm-sub mr-sm-sub" v-bind="{ ...attrs }">
     <div v-for="(file, idx) in state.files" :key="idx" ui-flex="col cm" class="flex-fixed pr" :style="`width: ${isNumber(width) ? width + 'em' : width}`" v-bind="itemAttrs">
-      <div class="w-full pr" :style="`box-sizing: content-box; padding-top: ${ratio}%`">
-        <div class="pa full ot-no ol-no bg-fore n-sm b-solid b-case b-xs r-sm" ui-flex="col cm">
+      <div class="w-full pr" :style="boxStyle">
+        <div :class="`${ratio ? 'pa full n-sm' : 'w-full n-ms min-h-ms*s'} ot-no ol-no bg-fore b-solid b-case b-xs r-sm ${canOpen(file) ? 'ux-none' : ''}`" ui-flex="col cm" @click="openFile(file)">
           <!-- 删除按钮 -->
-          <div v-if="!disabled" class="pa w-sl h-sl ot-ss or-ss bg-fore co-risk lh-xs r-xl sub-hover z-ls" ui-flex="row cm" @click="remove(idx)">
+          <div v-if="!disabled" class="pa w-sl h-sl ot-ss or-ss bg-fore co-risk lh-xs r-xl sub-hover z-ls ux-none" ui-flex="row cm" @click.stop="remove(idx)">
             <svg class="block" style="width: 1.2em; height: 1.2em" viewBox="0 0 1024 1024">
               <path
                 d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66 0.3L512 563.4l-99.3 118.4-66.1-0.3c-4.4 0-8-3.5-8-8 0-1.9 0.7-3.7 1.9-5.2l130.1-155L340.5 359c-1.2-1.5-1.9-3.3-1.9-5.2 0-4.4 3.6-8 8-8l66.1 0.3L512 464.6l99.3-118.4 66-0.3c4.4 0 8 3.5 8 8 0 1.9-0.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
@@ -17,7 +17,7 @@
           <img v-if="file.type === 'image'" class="r-ss" :src="getImageUrl(file)" alt="" />
           <video v-else-if="file.type === 'video'" class="full r-ss" :src="getImageUrl(file)" controls muted></video>
           <template v-else-if="file.type === 'pdf'">
-            <svg t="1705645350800" class="w-ls h-ls" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1913">
+            <svg t="1705645350800" :class="iconClass" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1913">
               <path
                 d="M205.5 64H665l232 232v639c0 13.807-11.193 25-25 25H205.5c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z m449.145 25H205.5v846H872V306.355L654.645 89z"
                 fill="#B7B7BD"
@@ -38,7 +38,7 @@
             </svg>
           </template>
           <template v-else-if="file.type === 'xlsx'">
-            <svg t="1705645380770" class="w-ls h-ls" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2060">
+            <svg t="1705645380770" :class="iconClass" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2060">
               <path
                 d="M205.799024 64.936585H664.850732l231.773658 231.773659v638.376585c0 13.79353-11.18208 24.97561-24.97561 24.97561H205.799024c-13.79353 0-24.97561-11.18208-24.975609-24.97561V89.912195c0-13.79353 11.18208-24.97561 24.975609-24.97561z m448.70681 24.97561H205.799024v845.174634H871.64878V307.055141L654.505834 89.912195z"
                 fill="#B7B7BD"
@@ -87,7 +87,7 @@
             </svg>
           </template>
           <template v-else-if="file.type === 'docx'">
-            <svg t="1705645401993" class="w-ls h-ls" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2207">
+            <svg t="1705645401993" :class="iconClass" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2207">
               <path
                 d="M205.5 64H665l232 232v639c0 13.807-11.193 25-25 25H205.5c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z m449.145 25H205.5v846H872V306.355L654.645 89z"
                 fill="#B7B7BD"
@@ -108,7 +108,7 @@
             </svg>
           </template>
           <template v-else-if="file.type === 'pptx'">
-            <svg t="1705645414803" class="w-ls h-ls" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2354">
+            <svg t="1705645414803" :class="iconClass" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2354">
               <path
                 d="M205.5 64H665l232 232v639c0 13.807-11.193 25-25 25H205.5c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z m449.145 25H205.5v846H872V306.355L654.645 89z"
                 fill="#B7B7BD"
@@ -129,7 +129,7 @@
             </svg>
           </template>
           <template v-else>
-            <svg t="1705645436666" class="w-ls h-ls" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2501">
+            <svg t="1705645436666" :class="iconClass" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2501">
               <path
                 d="M205.5 64H665l232 232v639c0 13.807-11.193 25-25 25H205.5c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z m449.145 25H205.5v846H872V306.355L654.645 89z"
                 fill="#B7B7BD"
@@ -150,6 +150,9 @@
             </svg>
           </template>
 
+          <p v-if="file.name && file.type !== 'image' && file.type !== 'video'" class="w-full mt-ss ac" ui-omit="1" :title="file.name">{{ file.name }}</p>
+          <p v-if="viewText || text" class="w-full co-note fs-sm ac" ui-omit="1">{{ viewText || text }}</p>
+
           <!-- 上传状态 -->
           <div class="upload-status" :data-status="file.status">
             <div class="neatui-upload-icon"><i></i></div>
@@ -162,25 +165,26 @@
     <template v-if="showUploadButton">
       <slot name="btn" :disabled="disabled">
         <label
-          class="pr flex-block"
-          :class="{ 'ux-disable': disabled }"
+          class="pr flex-fixed"
+          :class="disabled ? 'ux-disable' : 'ux-none'"
           :ui-form="`${theme} type:upload tips:hover`"
           :style="`width: ${isNumber(width) ? width + 'em' : width}`"
           v-bind="itemAttrs"
         >
-          <div class="w-full pr" :style="`box-sizing: content-box; padding-top: ${ratio}%`">
-            <div ui-flex="row cm" :class="`pa ot-no ol-no full upload n-sl bg-fore b-solid b-case b-xs r-sm ${uploadClass}`" :style="uploadStyle">
+          <div class="w-full pr" :style="boxStyle">
+            <div ui-flex="row cm" :class="`${ratio ? 'pa full n-sl' : 'w-full n-ms min-h-ms*s'} ot-no ol-no upload bg-fore b-solid b-case b-xs r-sm ${uploadClass}`" :style="uploadStyle">
               <div v-if="tips" ui-form-tips>
                 {{ tips }}
               </div>
               <input style="display: none" type="file" class="pa input" :multiple="!max || max > 1" :accept="accept" :disabled="disabled" @change="change" />
-              <div class="co-note ac input-icon">
+              <div class="co-note ac input-icon" ui-flex="col cm">
                 <svg t="1705642180833" style="width: 1em; height: 1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4215">
                   <path
                     d="M906.212134 565.732986 565.732986 565.732986 565.732986 906.212134C565.732986 926.013685 541.666486 959.972 511.97312 959.972 482.297674 959.972 458.213254 926.013685 458.213254 906.212134L458.213254 565.732986 117.734106 565.732986C97.950475 565.732986 63.97424 541.666486 63.97424 511.97312 63.97424 482.279754 97.950475 458.213254 117.734106 458.213254L458.213254 458.213254 458.213254 117.734106C458.213254 97.950475 482.297674 63.97424 511.97312 63.97424 541.666486 63.97424 565.732986 97.950475 565.732986 117.734106L565.732986 458.213254 906.212134 458.213254C925.995765 458.213254 959.972 482.279754 959.972 511.97312 959.972 541.666486 925.995765 565.732986 906.212134 565.732986Z"
                     p-id="4216"
                   ></path>
                 </svg>
+                <p v-if="text" class="fs-sm mt-ss">{{ text }}</p>
               </div>
             </div>
           </div>
@@ -202,13 +206,22 @@
     uploadClass?: string;
     uploadStyle?: string;
     tips?: string;
+    /** 未上传时，+ 号下方的文字 */
+    text?: string;
+    /** 已上传时文件名下方的文字；不传则仍用 text */
+    viewText?: string;
+    /** 宽高比（高 / 宽 %）；0 = 不定比例，高度随内容 */
+    ratio?: number;
+    /** 已上传时点整块打开文件（PDF、图片、视频新窗口看，其它下载）；传 false 关掉 */
+    view?: boolean;
+    /** 接管「打开文件」：传了就不再新窗口打开 / 下载，交给它（如加展示水印预览） */
+    preview?: (file: { url: string; name: string; type: string }) => void;
     accept?: string | 'image/*' | 'video/*' | 'audio/*';
     upload?: (formData: FormData, fileExtension?: string) => Promise<any>;
     maxSize?: number;
     compress?: boolean;
     disabled?: boolean;
     width?: number | string;
-    ratio?: number;
     theme?: string;
   }
 
@@ -219,9 +232,12 @@
     attrs: () => ({}),
     itemAttrs: () => ({}),
     tips: '',
+    text: '',
+    viewText: '',
+    view: true,
     accept: '*',
     upload: async () => null,
-    maxSize: 10,
+    maxSize: 500,
     compress: true,
     max: 0,
     disabled: false,
@@ -230,6 +246,10 @@
     theme: '@a',
   });
 
+  /** 定比例：外层 padding-top 撑高、内层铺满；不定比例：高度随内容 */
+  const boxStyle = computed(() => (props.ratio ? `box-sizing: content-box; padding-top: ${props.ratio}%` : ''));
+  const iconClass = computed(() => (props.ratio ? 'w-ls h-ls' : 'w-lm h-lm'));
+
   interface UploadFile {
     name: string;
     type: string;
@@ -265,6 +285,51 @@
     return file.path;
   };
 
+  // 已上传的文件整块打开；上传中、失败不打开
+  const canOpen = (file: UploadFile) => props.view && (file.status === 'yes' || file.status === 'end') && !!getImageUrl(file);
+  // 浏览器能直接看的新窗口打开，Word、Excel 等下载
+  const VIEWABLE = ['pdf', 'image', 'video'];
+  const fileNameOf = (file: UploadFile, url: string) => file.name || decodeURIComponent(url.split(/[?#]/)[0]?.split('/').pop() || '') || 'file';
+  // data URL（mock）不能直接顶层打开，转成 blob URL
+  const dataToBlobUrl = (url: string) => {
+    const [head = '', body = ''] = url.split(',');
+    const mime = head.match(/^data:([^;,]+)/)?.[1] || 'application/octet-stream';
+    const bin = /;base64/i.test(head) ? atob(body) : decodeURIComponent(body);
+    const bytes = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+    return URL.createObjectURL(new Blob([bytes], { type: mime }));
+  };
+  const download = async (url: string, name: string) => {
+    let href = url;
+    try {
+      // 跨域地址 a[download] 不生效，先取成 blob 才能按原文件名存
+      if (!/^(blob|data):/i.test(url)) {
+        const res = await fetch(url);
+        // 403/404/500 不会抛异常，不检查会把错误页按原文件名存下来
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        href = URL.createObjectURL(await res.blob());
+      }
+    } catch {
+      // 失败交给浏览器直接打开，由服务端显示真实错误
+      window.open(url, '_blank', 'noopener');
+      return;
+    }
+    const a = document.createElement('a');
+    a.href = href;
+    a.download = name;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    if (href !== url) setTimeout(() => URL.revokeObjectURL(href), 1000);
+  };
+  const openFile = (file: UploadFile) => {
+    if (!canOpen(file)) return;
+    const url = getImageUrl(file);
+    if (props.preview) return props.preview({ url, name: fileNameOf(file, url), type: file.type });
+    if (!VIEWABLE.includes(file.type)) return download(url, fileNameOf(file, url));
+    window.open(/^data:/i.test(url) ? dataToBlobUrl(url) : url, '_blank', 'noopener');
+  };
+
   // 计算属性
   const showUploadButton = computed(() => {
     const currentCount = state.files.length;
@@ -338,6 +403,9 @@
     if (props.accept && props.accept !== '*') {
       const acceptTypes = props.accept.split(',').map((type) => type.trim());
       const isValidType = acceptTypes.some((type) => {
+        if (type.startsWith('.')) {
+          return file.name.toLowerCase().endsWith(type.toLowerCase());
+        }
         if (type.endsWith('/*')) {
           return file.type.startsWith(type.replace('/*', ''));
         }
@@ -385,11 +453,12 @@
     clearFileTimer(file);
     file.timer = window.setTimeout(() => {
       const fileIndex = state.files.findIndex((f) => f.path === file.path);
-      if (fileIndex !== -1) {
+      const hit = state.files[fileIndex];
+      if (hit) {
         if (file.status === 'yes') {
           // yes 状态 3 秒后变为 end
-          state.files[fileIndex].status = 'end';
-          clearFileTimer(state.files[fileIndex]);
+          hit.status = 'end';
+          clearFileTimer(hit);
         } else if (file.status === 'err') {
           // err 状态 3 秒后清除占位（删除文件）
           removeFile(fileIndex, true);
@@ -476,8 +545,7 @@
     // 步骤1：立即添加所有文件到UI，显示占位图
     const validFiles: { file: File; uploadFile: UploadFile }[] = [];
 
-    for (let i = 0; i < selectedFiles.length; i++) {
-      const file = selectedFiles[i];
+    for (const file of Array.from(selectedFiles)) {
 
       // 验证文件
       const validationError = validateFile(file);
@@ -538,21 +606,21 @@
       const result = await props.upload(formData, fileExtension);
 
       // 更新文件状态
-      const fileIndex = state.files.findIndex((f) => f.path === uploadFile.path);
-      if (fileIndex !== -1) {
+      const hit = state.files.find((f) => f.path === uploadFile.path);
+      if (hit) {
         if (result) {
           // 直接保存上传函数的返回值
-          state.files[fileIndex].result = result;
-          state.files[fileIndex].status = 'yes';
+          hit.result = result;
+          hit.status = 'yes';
           // 设置3秒后转换为end状态的定时器
-          setStatusTransitionTimer(state.files[fileIndex]);
+          setStatusTransitionTimer(hit);
           // 每个文件完成后更新外部数据源
           emitUpdateEvents();
         } else {
           // 上传失败时先显示错误状态，3秒后移除文件
-          state.files[fileIndex].status = 'err';
+          hit.status = 'err';
           // 设置3秒后删除文件的定时器
-          setStatusTransitionTimer(state.files[fileIndex]);
+          setStatusTransitionTimer(hit);
           // 发射错误事件
           emit('error', `文件 ${file.name} 上传失败: 上传函数返回空值`);
         }
@@ -561,11 +629,11 @@
       console.error('文件处理失败:', error);
 
       // 上传失败时先显示错误状态，3秒后移除文件
-      const fileIndex = state.files.findIndex((f) => f.path === uploadFile.path);
-      if (fileIndex !== -1) {
-        state.files[fileIndex].status = 'err';
+      const hit = state.files.find((f) => f.path === uploadFile.path);
+      if (hit) {
+        hit.status = 'err';
         // 设置3秒后删除文件的定时器
-        setStatusTransitionTimer(state.files[fileIndex]);
+        setStatusTransitionTimer(hit);
       }
 
       emit('error', `文件 ${file.name} 上传失败: ${error}`);
@@ -586,7 +654,7 @@
             // 如果是字符串URL，尝试从URL判断类型
             const urlType = getFileTypeFromUrl(item);
             return {
-              name: 'file',
+              name: '',
               type: urlType,
               path: item,
               status: 'end' as const,
@@ -595,7 +663,7 @@
           } else {
             // 如果是对象
             return {
-              name: item.name || 'file',
+              name: item.name || '',
               type: item.type || 'file',
               path: item.url || item.path || '',
               status: 'end' as const,
@@ -607,7 +675,7 @@
         const urlType = getFileTypeFromUrl(newValue);
         state.files = [
           {
-            name: 'file',
+            name: '',
             type: urlType,
             path: newValue,
             status: 'end',
@@ -620,7 +688,7 @@
         const objType = objValue.type || (objPath ? getFileTypeFromUrl(objPath) : 'file');
         state.files = [
           {
-            name: objValue.name || 'file',
+            name: objValue.name || '',
             type: objType,
             path: objPath,
             status: 'end',