cardbuddy 0.6.0

package/dist/vendored/styles/components.css

@@ -0,0 +1,383 @@
+/**
+ * 官方 inner_card 组件基础样式（自动生成，请勿手改）
+ * 来源: https://uat-pkg.finmall.com/ubomp-h5-sub/inner_card/js/4.d98aa90b.js
+ * 生成: node tools/extract-css.mjs
+ * 片段 25 段 / 规则约 51 条
+ */
+
+.ce_divider{
+    width: 100%;
+    height: 1px;
+    background-color: rgba(0,0,0,0.15);
+}
+
+
+.ce_image{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    aspect-ratio: 16/9;
+}
+.ce_image_fill{
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% 100%;
+}
+
+
+.ce_input{
+    width: 100%;
+    border: 0;
+}
+.ce_input:focus{
+    outline: none;
+}
+
+
+.ce_text{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    box-orient: vertical;
+    -webkit-box-orient: vertical;
+    width: -webkit-fit-content;
+    width: fit-content;
+    word-wrap:  break-word;
+    word-break: break-all;
+    white-space: pre-line;
+    text-align: left;
+}
+
+
+.ce_multitext{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    width: -webkit-fit-content;
+    width: fit-content;
+}
+
+
+.ce_svgsymbols{
+    fill: black;
+    width: 100%;
+    height: 100%;
+}
+
+
+.ce_svgcode{
+    fill: black;
+    width: 100%;
+    height: 100%;
+}
+.ce_svgcode svg{
+    width: 100%;
+    height: 100%;
+    fill: inherit;
+}
+
+
+.ce_icon{
+    font-size: 0;
+}
+
+
+.ce_button{
+    background-color: rgba(0, 0, 0, 0);
+    -webkit-user-select: none;
+            user-select: none;
+    border: 0;
+}
+.ce_button.ce_button_disabled{
+    color: #9a9a9a !important;
+    background-color: #e6e6e6 !important;
+    border: none !important;
+}
+
+
+.ce_map{
+    position: relative;
+}
+.ce_map .ce_map_view {
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% 100%;
+}
+.ce_map .ce_map_view svg{
+    width: 100%;
+    height: 100%;
+}
+.ce_map .ce_map_placeholder{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+}
+
+
+.ce_svgcheckstyle{
+    width: 100%;
+    height: 100%;
+}
+
+
+.ce_check_group .ce_check_list{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+            flex-wrap: wrap;
+    overflow: hidden;
+}
+.ce_check_group .ce_check_item{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+            align-items: center;
+    cursor: pointer;
+}
+.ce_check_group .ce_check_icon{
+    font-size: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+            flex: 0 0 auto;
+}
+.ce_check_group .ce_check_text{
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 auto;
+            flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+
+.ce_svgradiostyle{
+    width: 100%;
+    height: 100%;
+}
+
+
+.ce_radio_button .ce_radio_item{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+            align-items: center;
+    cursor: pointer;
+}
+.ce_radio_button .ce_radio_icon{
+    font-size: 0;
+}
+
+
+.ce_slider{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+            align-items: center;
+}
+.ce_slider .ce_slider_rect{
+    width: 100%;
+    position: relative;
+}
+.ce_slider .ce_slider_bar{
+    width: 0;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+.ce_slider .ce_slider_con{
+    position: absolute;
+    left: 0;
+    top: 50%;
+    -webkit-transform: translateY(-50%) translateX(-50%);
+            transform: translateY(-50%) translateX(-50%);
+}
+.ce_slider .ce_slider_block{
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+}
+.ce_slider .ce_hover, 
+.ce_slider .ce_dragging {
+    -webkit-transform: scale(1.2);
+            transform: scale(1.2);
+}
+
+
+.ce_video{
+    position: relative;
+}
+.ce_video .ce_video_elem{
+    width: 100%;
+    height: 100%;
+}
+.ce_video .ce_video_poster{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
+
+
+.ce_viewcontainer{
+    width: 100%;
+}
+
+
+.ce_root{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+            flex-direction: column;
+    color: #000;
+    line-height: 1.5;
+    position: relative;
+    overflow: hidden;
+}
+
+
+.ce_row{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+}
+
+
+.ce_column{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    max-width: 100%;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+            flex-direction: column;
+}
+
+
+.ce_singlecolumn{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+            flex-direction: column;
+    width: 100%;
+}
+
+
+.ce_multicolumn{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+            justify-content: space-between;
+    width: 100%;
+}
+
+
+.ce_listlayout{
+    width: 100%;
+}
+.ce_listlayout .ce_listlayout_con{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+            flex-direction: column;
+    width: 100%;
+    box-sizing: border-box;
+}
+.ce_listlayout .ce_listlayout_item{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    width: 100%;
+}
+.ce_listlayout .ce_listlayout_horizontal{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: row;
+            flex-direction: row;
+    -webkit-flex-wrap: nowrap;
+            flex-wrap: nowrap;
+    width: 100%;
+    height: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+.ce_listlayout .ce_listlayout_horizontal::-webkit-scrollbar{
+    display: none;
+}
+.ce_listlayout .ce_listlayout_horizontal .ce_listlayout_item{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    width: auto;
+    height: 100%;
+}
+
+
+.ce_gridlayout{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+            flex-wrap: wrap;
+    width: 100%;
+}
+.ce_gridlayout .ce_gridlayout_item{
+    width: 100%;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+}
+
+
+.ce_absolutelayout{
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+            flex-direction: column;
+    position: relative;
+}
+.ce_absolutelayout > * {
+    position: absolute;
+    z-index: 1;
+}
+.ce_absolutelayout_bottomright > * {
+    position: static;
+    z-index: 1;
+}
+

package/dist/vendored/styles/dropdown.css

@@ -0,0 +1,337 @@
+/**
+ * 通用下拉组件（Dropdown.vue）。
+ * 全局类 .dd 前缀，不使用 scoped，与 card-select / node-inspector 保持同一约定。
+ * 尺寸变体：--xs（表单 24px）/ --sm（28px）/ --md（顶栏 32px）/ --lg（36px）。
+ */
+
+.dd {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.dd--block {
+  display: flex;
+  width: 100%;
+}
+
+.dd--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* ---- 触发器（默认：标签 + 箭头按钮） ---- */
+.dd__trigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 10px 0 12px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm, 6px);
+  color: var(--text);
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 1;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+  appearance: none;
+}
+
+.dd__trigger:hover {
+  border-color: var(--border-strong);
+  background: var(--bg-hover);
+}
+
+.dd__trigger--active {
+  border-color: var(--accent-border);
+  box-shadow: 0 0 0 2px var(--accent-soft);
+  background: var(--bg-hover);
+}
+
+/* 无边框模式：不显示边框，且去掉选中/展开时的高亮（边框色 + 光晕）。
+   仅保留极轻的 hover/展开背景，作为可点击的弱反馈，不引入边框与高亮。 */
+.dd--borderless .dd__trigger {
+  background: transparent;
+  border-color: transparent;
+}
+.dd--borderless .dd__trigger:hover {
+  background: var(--bg-hover);
+  border-color: transparent;
+}
+.dd--borderless .dd__trigger--active {
+  border-color: transparent;
+  box-shadow: none;
+  background: var(--bg-hover);
+}
+
+.dd__trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.dd__trigger--slot {
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+
+.dd--xs .dd__trigger {
+  height: 28px;
+  font-size: 11px;
+  padding: 0 6px 0 8px;
+}
+
+.dd--sm .dd__trigger {
+  height: 28px;
+  font-size: 12px;
+}
+
+.dd--md .dd__trigger {
+  height: 32px;
+  font-size: 14px;
+  padding: 0 10px 0 12px;
+  border-radius: var(--radius, 8px);
+}
+
+.dd--lg .dd__trigger {
+  height: 40px;
+  font-size: 14px;
+  padding: 0 12px 0 14px;
+  border-radius: var(--radius, 8px);
+}
+
+.dd__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--text);
+}
+
+.dd__chev {
+  flex: 0 0 auto;
+  color: var(--text-dim);
+  transition: transform 0.18s ease;
+}
+
+/* 可清空：选中值后触发器内的 ✕ 清除按钮（仅 clearable 且有值时存在）。
+   绝对定位于触发器内（right 紧贴箭头左侧），默认隐藏，悬停时才显示；
+   脱离文档流，故出现/消失都不会撑动标签文本与箭头位置（避免跳动）。
+   用 span 而非 button，避免 button 嵌套 button 的非法结构；@click.stop 阻止冒泡到触发器导致展开。 */
+.dd__clear {
+  position: absolute;
+  top: 50%;
+  right: 22px;
+  transform: translateY(-50%);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--text-faint);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.dd__trigger:hover .dd__clear {
+  display: inline-flex;
+}
+.dd__clear:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+
+.dd--open .dd__chev {
+  transform: rotate(180deg);
+}
+
+/* ---- 弹层 ---- */
+.dd__pop {
+  position: absolute;
+  /* 须高于手机预览内的节点选中遮罩 .ce-sel-overlay（--z-overlay-low），否则顶栏下拉会被遮罩盖住 */
+  z-index: var(--z-pop);
+  top: calc(100% + 6px);
+  min-width: 100%;
+  background: var(--bg-pop);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius, 8px);
+  box-shadow: var(--shadow-3);
+  overflow: hidden;
+  /* 浮层内文本需恢复行高：祖先 .pc-body 因开关居中被置为 line-height:0，
+     弹层（绝对定位）会继承该值导致选项文字行高塌缩被裁切、显示为空。 */
+  line-height: normal;
+}
+
+.dd__pop--bottom-start {
+  left: 0;
+}
+
+.dd__pop--bottom-end {
+  right: 0;
+}
+
+/* 智能翻转：触发器位于容器底部、下方放不下时，弹层翻转到触发器上方显示。
+   向上时取消 top、改用 bottom 贴住触发器顶部外侧，避免被滚动/裁剪容器裁掉。 */
+.dd--dropup .dd__pop {
+  top: auto;
+  bottom: calc(100% + 6px);
+}
+
+.dd__list {
+  list-style: none;
+  margin: 0;
+  padding: 4px;
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.dd__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-dim);
+  font-size: 13px;
+}
+
+.dd--xs .dd__item,
+.dd--sm .dd__item {
+  font-size: 12px;
+  padding: 6px 9px;
+}
+
+.dd__item:hover,
+.dd__item--active {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+
+.dd__item--selected {
+  color: var(--accent);
+}
+
+.dd__item--selected .dd__item-text {
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.dd__item--disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.dd__item--disabled:hover {
+  background: transparent;
+}
+
+.dd__item-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.dd__check {
+  flex: 0 0 auto;
+  color: var(--accent);
+}
+
+.dd__empty {
+  padding: 12px;
+  text-align: center;
+  color: var(--text-faint);
+  font-size: 12px;
+  cursor: default;
+}
+
+/* 滚动条 */
+.dd__list::-webkit-scrollbar {
+  width: 8px;
+}
+.dd__list::-webkit-scrollbar-thumb {
+  background: var(--scroll-thumb);
+  border-radius: 4px;
+}
+.dd__list::-webkit-scrollbar-thumb:hover {
+  background: var(--scroll-thumb-hover);
+}
+.dd__list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* 弹出动画 */
+.dd-fade-enter-active,
+.dd-fade-leave-active {
+  transition: opacity 0.14s ease, transform 0.14s ease;
+}
+.dd-fade-enter-from,
+.dd-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+/* ---- 应用菜单适配（顶栏分组下拉复用 Dropdown，触发器为 slot 按钮） ---- */
+.dd__menu {
+  list-style: none;
+  margin: 0;
+  padding: 4px;
+  min-width: 168px;
+}
+.app__remote-pop.dd__menu {
+  min-width: 120px;
+  padding: 4px;
+}
+.app__remote-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 9px;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+.app__remote-item.is-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.app__remote-item .app__icon {
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+}
+/* 保存类项 hover 蓝、同步类项 hover 绿（见 app.css .app__remote-item--save/--sync） */
+
+/* slot 触发器：按钮自身负责视觉，Dropdown 容器不画框。
+   必须用各尺寸变体选择器覆盖 .dd--md .dd__trigger 等的 padding/height，
+   否则透明包裹层仍会残留 10/12px 内边距（#3 反馈的「多出的 padding 间距」）。 */
+.dd__trigger--slot,
+.dd--xs .dd__trigger--slot,
+.dd--sm .dd__trigger--slot,
+.dd--md .dd__trigger--slot,
+.dd--lg .dd__trigger--slot {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  height: auto;
+}
+
+/* 触发器内的 chev 跟随 Dropdown 开合旋转（替代旧 menu --open chev 旋转） */
+.app__icon--chev--open {
+  transform: rotate(180deg);
+}