diff --git a/code/file-preview/.trae/documents/g3-file-layout-plan.md b/code/file-preview/.trae/documents/g3-file-layout-plan.md new file mode 100644 index 00000000..ed29a5b5 --- /dev/null +++ b/code/file-preview/.trae/documents/g3-file-layout-plan.md @@ -0,0 +1,141 @@ +# G3File 左右布局改造计划 + +## 需求分析 + +用户需要将 g3-file-container 的布局从原来的垂直布局改为左右布局: + +**原布局:** + +``` +┌─────────────────────────────────────┐ +│ header │ +├─────────────────────────────────────┤ +│ main │ +├─────────────────────────────────────┤ +│ footer │ +└─────────────────────────────────────┘ +``` + +**新布局:** + +``` +┌─────────────────────────────────────────────────────────────┐ +│ 左边区域 │ 右边区域 │ +│ ┌─────────────────────────────┐ │ ┌─────────────────┐ │ +│ │ header │ │ │ toolbar │ │ (10%) +│ ├─────────────────────────────┤ │ └─────────────────┘ │ +│ │ main │ │ ┌─────────────────┐ │ +│ ├─────────────────────────────┤ │ │ preview │ │ (90%) +│ │ footer │ │ │ area │ │ +│ └─────────────────────────────┘ │ └─────────────────┘ │ +└─────────────────────────────────────────────────────────────┘ +``` + +**Toolbar 功能需求:** + +* 上一个/下一个按钮(用于切换预览) + +- 当前预览的文件名 + +- 顺序显示(当前索引/总数) + +**预览区域:** + +* 预览功能暂不实现,显示测试内容即可 + +## 修改方案 + +### 1. 修改 index.js + +**需要修改的内容:** + +* 在 `render()` 方法中添加右侧预览区域的 HTML 结构 + +* 添加预览相关的状态管理(当前预览索引、已上传文件列表) + +* 添加预览区域的 DOM 引用 + +* 添加上下按钮的事件处理 + +**新增状态:** + +```javascript +this.previewIndex = 0; // 当前预览索引 +``` + +**新增 DOM 引用:** + +```javascript +this.$previewPanel = this.$container.find('.g3-file-preview-panel'); +this.$previewToolbar = this.$container.find('.g3-preview-toolbar'); +this.$previewContent = this.$container.find('.g3-preview-content'); +this.$btnPrev = this.$container.find('.preview-prev'); +this.$btnNext = this.$container.find('.preview-next'); +this.$previewInfo = this.$container.find('.preview-info'); +``` + +### 2. 修改 index.css + +**需要修改的内容:** + +* 修改 `.g3-file-container` 为横向 flex 布局 + +* 添加左侧区域样式 `.g3-file-left-panel` + +* 添加右侧预览区域样式 `.g3-file-preview-panel` + +* 添加 toolbar 样式 `.g3-preview-toolbar` + +* 添加预览内容区域样式 `.g3-preview-content` + +* 添加导航按钮样式 + +## 文件修改清单 + +| 文件 | 修改内容 | +| ------------------- | ---------------------------------- | +| `g3-file/index.js` | 修改 render 方法添加预览区域HTML,添加预览相关状态和事件 | +| `g3-file/index.css` | 修改容器布局,添加左右区域样式、toolbar 样式、预览区域样式 | + +## 实现步骤 + +1. **修改 CSS 布局** + + * 修改 `.g3-file-container` 为 `flex-direction: row` + + * 添加左侧面板样式(占50%宽度) + + * 添加右侧预览面板样式(占50%宽度) + + * 添加 toolbar 和预览内容区域样式 + +2. **修改 JS 渲染** + + * 在 render 方法中添加右侧预览区域 HTML + + * 添加预览相关状态 + + * 添加上下按钮事件绑定 + +3. **添加辅助方法** + + * `getUploadedFiles()` - 获取已上传的文件列表 + + * `updatePreview()` - 更新预览区域显示 + +## 风险评估 + +* 现有功能(文件上传、下载、删除)不受影响 + +* 预览功能暂不实现,仅显示测试内容 + +* 布局变化可能影响现有样式,需要仔细测试 + +## 测试要点 + +1. 布局是否正确显示为左右结构 +2. 左侧原有功能是否正常工作 +3. Toolbar 是否正确显示文件信息 +4. 上下按钮是否可点击(即使预览功能未实现) +5. 预览区域是否正常显示测试内容 + diff --git a/code/file-preview/.trae/documents/g3-file-preview-plan.md b/code/file-preview/.trae/documents/g3-file-preview-plan.md new file mode 100644 index 00000000..8f13df2a --- /dev/null +++ b/code/file-preview/.trae/documents/g3-file-preview-plan.md @@ -0,0 +1,386 @@ +# G3File 预览区域布局修改计划 + +## 一、需求分析 + +根据用户需求,需要对 g3-file-container 进行以下修改: + +1. **布局调整**:改为左右两栏布局 + - **左侧区域**:保持现有完整结构(header + main + footer) + - **右侧区域**:新增预览区域(toolbar 10% + 预览内容区 90%) + +2. **预览区域 Toolbar**: + - 文件总数(仅统计已上传文件) + - 当前预览文件名 + - 顺序导航按钮(上一个/下一个) + +3. **预览规则**: + - 只有 `status === 'uploaded'` 的文件才可预览 + - 预览总数只计算已上传文件 + +4. **预览功能**:暂时不实现实际预览功能,只显示测试内容 + +## 二、布局结构 + +### 2.1 原布局 +``` +┌─────────────────────────────────────┐ +│ Header │ +├─────────────────────────────────────┤ +│ Main │ +│ (文件列表) │ +├─────────────────────────────────────┤ +│ Footer │ +└─────────────────────────────────────┘ +``` + +### 2.2 新布局 +``` +┌─────────────────────────────────────────────────────────────────┐ +│ 左侧区域 │ 右侧预览区域 │ +│ ┌─────────────────────────────────────┐ │ ┌───────────┐ │ +│ │ Header │ │ │ Toolbar │ │ +│ ├─────────────────────────────────────┤ │ │(10%高度) │ │ +│ │ Main │ ├───────────────┤ │ +│ │ (文件列表) │ │ │ │ +│ ├─────────────────────────────────────┤ │ 预览内容区 │ │ +│ │ Footer │ │ (90%高度) │ │ +│ └─────────────────────────────────────┘ │ │ │ +│ └─────────────┘ │ +└───────────────────────────────────────────────────────────────┘ +``` + +### 2.3 Toolbar 内容 +``` +┌─────────────────────────────────────────────────────────┐ +│ [上一个] 第 1/5 个文件 当前: filename.pdf [下一个] │ +└─────────────────────────────────────────────────────────┘ +``` + +## 三、修改方案 + +### 3.1 修改文件 + +| 文件 | 修改内容 | +|------|----------| +| `g3-file/index.css` | 添加左右布局和预览区域样式 | +| `g3-file/index.js` | 修改布局结构、添加预览区域逻辑 | + +### 3.2 JS 修改要点 + +1. **渲染方法 (`render`)**:修改 HTML 结构为左右布局 +2. **状态管理**: + - `currentPreviewIndex`: 当前预览文件索引 +3. **预览操作方法**: + - `getPreviewableFiles()`: 获取已上传文件列表 + - `previewFile(file)`: 预览指定文件 + - `previewNext()`: 预览下一个文件 + - `previewPrev()`: 预览上一个文件 + - `updatePreviewArea()`: 更新预览区域 UI +4. **事件绑定**:绑定预览区域按钮事件 + +### 3.3 CSS 修改要点 + +1. **整体容器**:改为横向 flex 布局 +2. **左侧区域**:保持原有结构,设置宽度比例(如 50%) +3. **右侧区域**: + - 设置宽度比例(如 50%) + - 纵向 flex 布局 + - toolbar 占 10% 高度 + - 预览内容区占 90% 高度 +4. **Toolbar 样式**:按钮、进度显示等 + +## 四、实施步骤 + +### 步骤 1:修改 CSS 样式 + +```css +/* 整体布局 - 横向排列 */ +.g3-file-container { + height: 100%; + display: flex; + background: #ffffff; + overflow: hidden; +} + +/* 左侧区域 */ +.g3-file-left-panel { + flex: 1; + display: flex; + flex-direction: column; + border-right: 1px solid #eef0f2; +} + +/* 右侧预览区域 */ +.g3-file-right-panel { + flex: 1; + display: flex; + flex-direction: column; + background: #fafbfc; +} + +/* 预览 Toolbar */ +.g3-preview-toolbar { + height: 10%; + min-height: 48px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 16px; + background: #fff; + border-bottom: 1px solid #eef0f2; +} + +/* 预览内容区域 */ +.g3-preview-content { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + padding: 16px; + overflow: auto; +} + +/* 预览空状态 */ +.g3-preview-empty { + text-align: center; + color: #999; + font-size: 14px; +} + +/* 预览文件信息 */ +.g3-preview-file-info { + text-align: center; +} + +/* 预览按钮 */ +.g3-preview-btn { + padding: 6px 12px; + border: 1px solid #d9d9d9; + background: #fff; + border-radius: 4px; + cursor: pointer; + font-size: 12px; +} + +.g3-preview-btn:hover:not(:disabled) { + border-color: #165dff; + color: #165dff; +} + +.g3-preview-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* 预览状态文字 */ +.g3-preview-status { + font-size: 13px; + color: #666; +} +``` + +### 步骤 2:修改 JS 渲染方法 + +修改 `render()` 方法的 HTML 结构: + +```javascript +render: function () { + const html = ` +
大小: ${this.formatFileSize(file.size)}
+上传时间: ${this.formatDate(file.uploadDate)}
+状态: 已上传
+URL: ${file.url || '-'}
+用于展示批量任务进度,如下载、上传等
- -用于单次操作反馈,如操作成功、失败等
- -模拟单个文件下载失败的场景
- -请选择文件
+请上传后预览
`; + } else if (!isPreviewable) { + tipsHtml = `请下载后预览
`; + } else if (!fileUrl) { + tipsHtml = `链接无效请检查链接
`; + } + + previewContent = ` +${currentFile.name}
+ ${tipsHtml} +{let{slotScopeIds:u}=t;u&&(i=i?i.concat(u):u);let h=s(e),p=d(l(e),t,h,n,r,i,o);return p&&nP(p)&&"]"===p.data?l(t.anchor=p):(nO(),a(t.anchor=c("]"),h,p),p)},f=(e,t,r,i,a,c)=>{if(nD(e.parentElement,1)||nO(),t.el=null,c){let t=g(e);for(;;){let n=l(e);if(n&&n!==t)o(n);else break}}let u=l(e),h=s(e);return o(e),n(null,t,h,u,r,i,nM(h),a),r&&(r.vnode.el=t.el,rR(r,t.el)),u},g=(e,t="[",n="]")=>{let r=0;for(;e;)if((e=l(e))&&nP(e)&&(e.data===t&&r++,e.data===n))if(0===r)return l(e);else r--;return e},m=(e,t,n)=>{let r=t.parentNode;r&&r.replaceChild(e,t);let i=n;for(;i;)i.vnode.el===t&&(i.vnode.el=i.subTree.el=e),i=i.parent},y=e=>1===e.nodeType&&"TEMPLATE"===e.tagName;return[(e,t)=>{if(!t.hasChildNodes()){n(null,e,t),tZ(),t._vnode=e;return}u(t.firstChild,e,null,null,null),tZ(),t._vnode=e},u]}let nL="data-allow-mismatch",n$={0:"text",1:"children",2:"class",3:"style",4:"attribute"};function nD(e,t){if(0===t||1===t)for(;e&&!e.hasAttribute(nL);)e=e.parentElement;let n=e&&e.getAttribute(nL);if(null==n)return!1;{if(""===n)return!0;let e=n.split(",");return!!(0===t&&e.includes("children"))||e.includes(n$[t])}}let nV=Q().requestIdleCallback||(e=>setTimeout(e,1)),nB=Q().cancelIdleCallback||(e=>clearTimeout(e)),nj=e=>!!e.type.__asyncLoader;function nU(e,t){let{ref:n,props:r,children:i,ce:l}=t.vnode,s=ip(e,r,i);return s.ref=n,s.ce=l,delete t.vnode.ce,s}let nH=e=>e.type.__isKeepAlive;function nq(e,t){let n;if(E(e))return e.some(e=>nq(e,t));if(R(e))return e.split(",").includes(t);return"[object RegExp]"===(n=e,F.call(n))&&(e.lastIndex=0,e.test(t))}function nW(e,t){nz(e,"a",t)}function nK(e,t){nz(e,"da",t)}function nz(e,t,n=iw){let r=e.__wdc||(e.__wdc=()=>{let t=n;for(;t;){if(t.isDeactivated)return;t=t.parent}return e()});if(nX(t,r,n),n){let e=n.parent;for(;e&&e.parent;)nH(e.parent.vnode)&&function(e,t,n,r){let i=nX(t,e,r,!0);n3(()=>{w(r[t],i)},n)}(r,t,n,e),e=e.parent}}function nJ(e){e.shapeFlag&=-257,e.shapeFlag&=-513}function nG(e){return 128&e.shapeFlag?e.ssContent:e}function nX(e,t,n=iw,r=!1){if(n){let i=n[e]||(n[e]=[]),l=t.__weh||(t.__weh=(...r)=>{eE();let i=iA(n),l=tD(t,n,e,r);return i(),eI(),l});return r?i.unshift(l):i.push(l),l}}let nQ=e=>(t,n=iw)=>{iR&&"sp"!==e||nX(e,(...e)=>t(...e),n)},nZ=nQ("bm"),nY=nQ("m"),n0=nQ("bu"),n1=nQ("u"),n2=nQ("bum"),n3=nQ("um"),n6=nQ("sp"),n4=nQ("rtg"),n8=nQ("rtc");function n5(e,t=iw){nX("ec",e,t)}let n9="components",n7=Symbol.for("v-ndc");function re(e,t,n=!0,r=!1){let i=t0||iw;if(i){let n=i.type;if(e===n9){let e=iD(n,!1);if(e&&(e===t||e===j(t)||e===q(j(t))))return n}let l=rt(i[e]||n[e],t)||rt(i.appContext[e],t);return!l&&r?n:l}}function rt(e,t){return e&&(e[t]||e[j(t)]||e[q(j(t))])}let rn=e=>e?iI(e)?i$(e):rn(e.parent):null,rr=T(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>rn(e.parent),$root:e=>rn(e.root),$host:e=>e.ce,$emit:e=>e.emit,$options:e=>rh(e),$forceUpdate:e=>e.f||(e.f=()=>{tJ(e.update)}),$nextTick:e=>e.n||(e.n=tz.bind(e.proxy)),$watch:e=>ne.bind(e)}),ri=(e,t)=>e!==b&&!e.__isScriptSetup&&A(e,t),rl={get({_:e},t){let n,r;if("__v_skip"===t)return!0;let{ctx:i,setupState:l,data:s,props:o,accessCache:a,type:c,appContext:u}=e;if("$"!==t[0]){let e=a[t];if(void 0!==e)switch(e){case 1:return l[t];case 2:return s[t];case 4:return i[t];case 3:return o[t]}else{if(ri(l,t))return a[t]=1,l[t];if(s!==b&&A(s,t))return a[t]=2,s[t];if(A(o,t))return a[t]=3,o[t];if(i!==b&&A(i,t))return a[t]=4,i[t];rc&&(a[t]=0)}}let h=rr[t];return h?("$attrs"===t&&eV(e.attrs,"get",""),h(e)):(n=c.__cssModules)&&(n=n[t])?n:i!==b&&A(i,t)?(a[t]=4,i[t]):A(r=u.config.globalProperties,t)?r[t]:void 0},set({_:e},t,n){let{data:r,setupState:i,ctx:l}=e;return ri(i,t)?(i[t]=n,!0):r!==b&&A(r,t)?(r[t]=n,!0):!A(e.props,t)&&!("$"===t[0]&&t.slice(1)in e)&&(l[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:r,appContext:i,props:l,type:s}},o){let a;return!!(n[o]||e!==b&&"$"!==o[0]&&A(e,o)||ri(t,o)||A(l,o)||A(r,o)||A(rr,o)||A(i.config.globalProperties,o)||(a=s.__cssModules)&&a[o])},defineProperty(e,t,n){return null!=n.get?e._.accessCache[t]=0:A(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}},rs=T({},rl,{get(e,t){if(t!==Symbol.unscopables)return rl.get(e,t,e)},has:(e,t)=>"_"!==t[0]&&!Z(t)});function ro(e){let t=iN();return t.setupContext||(t.setupContext=iL(t))}function ra(e){return E(e)?e.reduce((e,t)=>(e[t]=null,e),{}):e}let rc=!0;function ru(e,t,n){tD(E(e)?e.map(e=>e.bind(t.proxy)):e.bind(t.proxy),t,n)}function rh(e){let t,n=e.type,{mixins:r,extends:i}=n,{mixins:l,optionsCache:s,config:{optionMergeStrategies:o}}=e.appContext,a=s.get(n);return a?t=a:l.length||r||i?(t={},l.length&&l.forEach(e=>rd(t,e,o,!0)),rd(t,n,o)):t=n,M(n)&&s.set(n,t),t}function rd(e,t,n,r=!1){let{mixins:i,extends:l}=t;for(let s in l&&rd(e,l,n,!0),i&&i.forEach(t=>rd(e,t,n,!0)),t)if(r&&"expose"===s);else{let r=rp[s]||n&&n[s];e[s]=r?r(e[s],t[s]):t[s]}return e}let rp={data:rf,props:ry,emits:ry,methods:rv,computed:rv,beforeCreate:rm,created:rm,beforeMount:rm,mounted:rm,beforeUpdate:rm,updated:rm,beforeDestroy:rm,beforeUnmount:rm,destroyed:rm,unmounted:rm,activated:rm,deactivated:rm,errorCaptured:rm,serverPrefetch:rm,components:rv,directives:rv,watch:function(e,t){if(!e)return t;if(!t)return e;let n=T(Object.create(null),e);for(let r in t)n[r]=rm(e[r],t[r]);return n},provide:rf,inject:function(e,t){return rv(rg(e),rg(t))}};function rf(e,t){return t?e?function(){return T(I(e)?e.call(this,this):e,I(t)?t.call(this,this):t)}:t:e}function rg(e){if(E(e)){let t={};for(let n=0;n0&&ir.disconnect()},e.initCustomFormatter=function(){},e.initDirectivesForSSR=S,e.inject=t8,e.isMemoSame=ij,e.isProxy=tg,e.isReactive=td,e.isReadonly=tp,e.isRef=t_,e.isRuntimeOnly=()=>!h,e.isShallow=tf,e.isVNode=ia,e.markRaw=tv,e.mergeDefaults=function(e,t){let n=ra(e);for(let e in t){if(e.startsWith("__skip"))continue;let r=n[e];r?E(r)||I(r)?r=n[e]={type:r,default:t[e]}:r.default=t[e]:null===r&&(r=n[e]={default:t[e]}),r&&t[`__skip_${e}`]&&(r.skipFactory=!0)}return n},e.mergeModels=function(e,t){return e&&t?E(e)&&E(t)?e.concat(t):T({},ra(e),ra(t)):e||t},e.mergeProps=ix,e.nextTick=tz,e.nodeOps=iz,e.normalizeClass=ei,e.normalizeProps=function(e){if(!e)return null;let{class:t,style:n}=e;return t&&!R(t)&&(e.class=ei(t)),n&&(e.style=Y(n)),e},e.normalizeStyle=Y,e.onActivated=nW,e.onBeforeMount=nZ,e.onBeforeUnmount=n2,e.onBeforeUpdate=n0,e.onDeactivated=nK,e.onErrorCaptured=n5,e.onMounted=nY,e.onRenderTracked=n8,e.onRenderTriggered=n4,e.onScopeDispose=function(e,t=!1){l&&l.cleanups.push(e)},e.onServerPrefetch=n6,e.onUnmounted=n3,e.onUpdated=n1,e.onWatcherCleanup=tF,e.openBlock=it,e.patchProp=lS,e.popScopeId=function(){t1=null},e.provide=t4,e.proxyRefs=tN,e.pushScopeId=function(e){t1=e},e.queuePostFlushCb=tX,e.reactive=ta,e.readonly=tu,e.ref=tS,e.registerRuntimeCompiler=iM,e.render=l2,e.renderList=function(e,t,n,r){let i,l=n&&n[r],s=E(e);if(s||R(e)){let n=s&&td(e),r=!1,o=!1;n&&(r=!tf(e),o=tp(e),e=eU(e)),i=Array(e.length);for(let n=0,s=e.length;nt(e,n,void 0,l&&l[n]));else{let n=Object.keys(e);i=Array(n.length);for(let r=0,s=n.length;r0;return"default"!==t&&(n.name=t),it(),io(r4,null,[ip("slot",n,r&&r())],e?-2:64)}let l=e[t];l&&l._c&&(l._d=!1),it();let s=l&&function e(t){return t.some(t=>!ia(t)||t.type!==r5&&(t.type!==r4||!!e(t.children)))?t:null}(l(n)),o=n.key||s&&s.key,a=io(r4,{key:(o&&!O(o)?o:`_${t}`)+(!s&&r?"_fb":"")},s||(r?r():[]),s&&1===e._?64:-2);return!i&&a.scopeId&&(a.slotScopeIds=[a.scopeId+"-s"]),l&&l._c&&(l._d=!0),a},e.resolveComponent=function(e,t){return re(n9,e,!0,t)||e},e.resolveDirective=function(e){return re("directives",e)},e.resolveDynamicComponent=function(e){return R(e)?re(n9,e,!1)||e:e||n7},e.resolveFilter=null,e.resolveTransitionHooks=n_,e.setBlockTracking=il,e.setDevtoolsHook=S,e.setTransitionHooks=nC,e.shallowReactive=tc,e.shallowReadonly=function(e){return th(e,!0,e8,tr,to)},e.shallowRef=tx,e.ssrContextKey=t5,e.ssrUtils=null,e.stop=function(e){e.effect.stop()},e.toDisplayString=ep,e.toHandlerKey=W,e.toHandlers=function(e,t){let n={};for(let r in e)n[t&&/[A-Z]/.test(r)?`on:${r}`:W(r)]=e[r];return n},e.toRaw=tm,e.toRef=function(e,t,n){if(t_(e))return e;if(I(e))return new tR(e);if(!M(e)||!(arguments.length>1))return tS(e);return new tI(e,t,n)},e.toRefs=function(e){let t=E(e)?Array(e.length):{};for(let n in e)t[n]=new tI(e,n,void 0);return t},e.toValue=function(e){return I(e)?e():tT(e)},e.transformVNodeArgs=function(e){},e.triggerRef=function(e){e.dep&&e.dep.trigger()},e.unref=tT,e.useAttrs=function(){return ro().attrs},e.useCssModule=function(e="$style"){return b},e.useCssVars=function(e){let t=iN();if(!t)return;let n=t.ut=(n=e(t.proxy))=>{Array.from(document.querySelectorAll(`[data-v-owner="${t.uid}"]`)).forEach(e=>ls(e,n))},r=()=>{let r=e(t.proxy);t.ce?ls(t.ce,r):function e(t,n){if(128&t.shapeFlag){let r=t.suspense;t=r.activeBranch,r.pendingBranch&&!r.isHydrating&&r.effects.push(()=>{e(r.activeBranch,n)})}for(;t.component;)t=t.component.subTree;if(1&t.shapeFlag&&t.el)ls(t.el,n);else if(t.type===r4)t.children.forEach(t=>e(t,n));else if(t.type===r9){let{el:e,anchor:r}=t;for(;e&&(ls(e,n),e!==r);)e=e.nextSibling}}(t.subTree,r),n(r)};n0(()=>{tX(r)}),nY(()=>{t7(r,S,{flush:"post"});let e=new MutationObserver(r);e.observe(t.subTree.el.parentNode,{childList:!0}),n3(()=>e.disconnect())})},e.useHost=lw,e.useId=function(){let e=iN();return e?(e.appContext.config.idPrefix||"v")+"-"+e.ids[0]+e.ids[1]++:""},e.useModel=function(e,t,n=b){let r=iN(),i=j(t),l=H(t),s=rx(e,i),o=tE((s,o)=>{let a,c,u=b;return t9(()=>{let t=e[i];K(a,t)&&(a=t,o())}),{get:()=>(s(),n.get?n.get(a):a),set(e){let s=n.set?n.set(e):e;if(!K(s,a)&&!(u!==b&&K(e,u)))return;let h=r.vnode.props;h&&(t in h||i in h||l in h)&&(`onUpdate:${t}`in h||`onUpdate:${i}`in h||`onUpdate:${l}`in h)||(a=e,o()),r.emit(`update:${t}`,s),K(e,s)&&K(e,u)&&!K(s,c)&&o(),u=e,c=s}}});return o[Symbol.iterator]=()=>{let e=0;return{next:()=>e<2?{value:e++?s||b:o,done:!1}:{done:!0}}},o},e.useSSRContext=()=>{},e.useShadowRoot=function(){let e=lw();return e&&e.shadowRoot},e.useSlots=function(){return ro().slots},e.useTemplateRef=function(e){let t=iN(),n=tx(null);return t&&Object.defineProperty(t.refs===b?t.refs={}:t.refs,e,{enumerable:!0,get:()=>n.value,set:e=>n.value=e}),n},e.useTransitionState=np,e.vModelCheckbox=lU,e.vModelDynamic={created(e,t,n){lG(e,t,n,null,"created")},mounted(e,t,n){lG(e,t,n,null,"mounted")},beforeUpdate(e,t,n,r){lG(e,t,n,r,"beforeUpdate")},updated(e,t,n,r){lG(e,t,n,r,"updated")}},e.vModelRadio=lq,e.vModelSelect=lW,e.vModelText=lj,e.vShow={name:"show",beforeMount(e,{value:t},{transition:n}){e[ln]="none"===e.style.display?"":e.style.display,n&&t?n.beforeEnter(e):li(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:r}){!t!=!n&&(r?t?(r.beforeEnter(e),li(e,!0),r.enter(e)):r.leave(e,()=>{li(e,!1)}):li(e,t))},beforeUnmount(e,{value:t}){li(e,t)}},e.version=iU,e.warn=S,e.watch=function(e,t,n){return t7(e,t,n)},e.watchEffect=function(e,t){return t7(e,null,t)},e.watchPostEffect=function(e,t){return t7(e,null,{flush:"post"})},e.watchSyncEffect=t9,e.withAsyncContext=function(e){let t=iN(),n=iR,r=e();iE(),n&&u(!1);let i=()=>{iA(t),n&&u(!0)},l=()=>{iN()!==t&&t.scope.off(),iE(),n&&u(!1)};return P(r)&&(r=r.catch(e=>{throw i(),Promise.resolve().then(()=>Promise.resolve().then(l)),e})),[r,()=>{i(),Promise.resolve().then(l)}]},e.withCtx=t3,e.withDefaults=function(e,t){return null},e.withDirectives=function(e,t){if(null===t0)return e;let n=i$(t0),r=e.dirs||(e.dirs=[]);for(let e=0;e
+