npmapps 1.1.4 → 1.1.6

package/app/wujie-wk/wujie-vue3-child/src/style.css

@@ -0,0 +1,171 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.ai-loading-parent {
+  position: relative;
+}
+
+.ai-loading-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.7);
+  z-index: 99;
+}
+
+.ai-loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 16px;
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.08);
+  font-size: 12px;
+  color: #606266;
+}
+
+.ai-loading-spinner {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid #dcdfe6;
+  border-top-color: #606266;
+  animation: ai-loading-spin 1s linear infinite;
+  margin-bottom: 4px;
+}
+
+.ai-loading-bars {
+  width: 20px;
+  aspect-ratio: 1;
+  --c: linear-gradient(#606266 0 0);
+  --r1: radial-gradient(farthest-side at bottom,#606266 93%,#0000);
+  --r2: radial-gradient(farthest-side at top,#606266 93%,#0000);
+  background:
+    var(--c),var(--r1),var(--r2),
+    var(--c),var(--r1),var(--r2),
+    var(--c),var(--r1),var(--r2);
+  background-repeat: no-repeat;
+  animation: ai-loading-bars 1s infinite alternate;
+  margin-bottom: 4px;
+}
+
+.ai-loading-text {
+  white-space: nowrap;
+  animation: ai-loading-text-pulse 1.4s ease-in-out infinite;
+}
+
+/* v-aiLoading 演示用自定义遮罩样式示例
+ * 在 AiCoach 页面「AI Loading 用例」Tab 中使用 class: 'ai-loading-demo-mask'
+ * 你可以参考这里的写法，按需覆盖背景色、文字颜色等
+ */
+.ai-loading-demo-mask {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.ai-loading-mask-gradient {
+  background-image: linear-gradient(135deg, #f5f7ff 0%, #f0f9ff 50%, #fff7f7 100%);
+  background-size: 200% 200%;
+  animation: ai-loading-gradient 4s ease infinite;
+}
+
+.ai-loading-demo-card {
+  position: relative;
+  overflow: hidden;
+}
+
+.ai-loading-demo-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 4px;
+  padding: 1px;
+  background: conic-gradient(
+    from 0deg,
+    #ff7e67,
+    #ffb967,
+    #67c1ff,
+    #ff7e67
+  );
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  opacity: 0;
+  animation: none;
+  pointer-events: none;
+}
+
+.ai-loading-demo-card--active::before {
+  opacity: 1;
+  animation: ai-loading-border-rotate 3s linear infinite;
+}
+
+@keyframes ai-loading-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ai-loading-bars {
+  0%,25% {
+    background-size: 5px 0,5px 4px,5px 4px,5px 0,5px 4px,5px 4px,5px 0,5px 4px,5px 4px;
+    background-position: 0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
+  }
+  50% {
+    background-size: 5px 100%,5px 4px,5px 4px,5px 0,5px 4px,5px 4px,5px 0,5px 4px,5px 4px;
+    background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
+  }
+  75% {
+    background-size: 5px 100%,5px 4px,5px 4px,5px 100%,5px 4px,5px 4px,5px 0,5px 4px,5px 4px;
+    background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
+  }
+  95%,100% {
+    background-size: 5px 100%,5px 4px, 5px 4px,5px 100%,5px 4px,5px 4px,5px 100%,5px 4px,5px 4px;
+    background-position: 0 50%,0 calc(0% - 2px),0 calc(100% + 2px),50% 50%,50% calc(0% - 2px),50% calc(100% + 2px),100% 50%,100% calc(0% - 2px),100% calc(100% + 2px);
+  }
+}
+
+@keyframes ai-loading-gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes ai-loading-text-pulse {
+  0% {
+    opacity: 0.6;
+    transform: translateY(0);
+  }
+  50% {
+    opacity: 1;
+    transform: translateY(-1px);
+  }
+  100% {
+    opacity: 0.6;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ai-loading-border-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/collapseExpand/index.jsx

@@ -0,0 +1,108 @@
+
+import { defineComponent, ref, h } from 'vue'
+import styles from './index.module.scss'
+import { Expand, DeleteFilled } from '@element-plus/icons-vue'
+import draggable from 'vuedraggable'
+import _ from 'lodash'
+export default defineComponent({
+    // 折叠展开组件 - 列表展示
+    name: 'CollapseExpand',
+    props: {
+        collapseList: {
+            type: Array,
+            default: () => [],
+        },
+        draggableDisabled: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    emits: ['update:collapseList'],
+    setup(props, { emit, attrs, slots }) {
+
+        const newCollapseList = ref(_.cloneDeep(props.collapseList))
+        const dragEnd = (e) => {
+            console.log(e)
+            attrs.dragEnd && attrs.dragEnd(e, newCollapseList.value)
+            emit('update:collapseList', newCollapseList.value)
+        }
+        const handleDelete = (item) => {
+            newCollapseList.value = newCollapseList.value.filter((i) => i.id !== item.id)
+            emit('update:collapseList', newCollapseList.value)
+        }
+        return () => (
+            <div class={styles.collapseExpand}>
+                <el-collapse
+                    {...attrs}
+                >
+                    <draggable
+                        v-model={newCollapseList.value}
+                        item-key="id"
+                        class="list"
+                        ghost-class="ghost"
+                        disabled={props.draggableDisabled}
+                        onEnd={dragEnd}
+                        animation={attrs.animation || 100}
+                        handle=".drag-icon"
+                    >
+                        {{
+                            item: (({ element: item, index }) => (
+                                <el-collapse-item class={[styles.item,
+                                index === 0 ?
+                                    styles.firstItem : '',
+                                index === props.collapseList.length - 1 ?
+                                    styles.lastItem : '']}
+                                    key={item.id}
+                                    name={item.id}>
+                                    {{
+                                        // 自定义标题栏
+                                        title: () => (
+                                            attrs.title ? attrs.title(item) :
+                                                <div class={[styles.header]}>
+                                                    <div class={[styles.headerLeft]}>
+                                                        <div>
+                                                            <el-icon style={{ cursor: 'grab' }} class={'drag-icon'} size={20}><Expand /></el-icon>
+                                                        </div>
+                                                        <div class={[styles.headerContent]}>
+                                                            <div class={[styles.title]}>{item.title}</div>
+                                                            {/* 目标描述 */}
+                                                            <div class={[styles.goal]}>
+                                                                {item.goal}
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    {/* 阻止冒泡避免触发折叠 */}
+                                                    <el-popconfirm
+                                                        title="确认删除吗？"
+                                                        confirm-button-text="确定"
+                                                        cancel-button-text="取消"
+                                                        onConfirm={(e) => {
+                                                            handleDelete(item)
+                                                            e.stopPropagation()
+                                                        }}
+                                                    >
+                                                        {{
+                                                            reference: () => (
+                                                                <el-icon onClick={(e) => e.stopPropagation()} style={{ marginRight: '8px' }}><DeleteFilled /></el-icon>
+                                                            )
+                                                        }}
+                                                      
+                                                    </el-popconfirm>
+                                                </div>
+                                        ),
+                                        // 展开的内容区域
+                                        default: () => (
+                                            <div>
+                                                {item.item ? item.item(item) : null}
+                                            </div>
+                                        )
+                                    }}
+                                </el-collapse-item>
+                            ))
+                        }}
+                    </draggable>
+                </el-collapse>
+            </div>
+        )
+    },
+})

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/collapseExpand/index.module.scss

@@ -0,0 +1,97 @@
+.collapseExpand {
+    :global(.el-collapse .el-collapse-item__header) {
+        padding-left: 10px;
+    }
+    .header {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        align-items: center;
+
+
+        .headerLeft {
+            display: flex;
+            align-items: center;
+
+            .headerContent {
+                margin-left: 10px;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+
+                .title,
+                .goal {
+                    display: flex;
+                    height: 16px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    line-height: 16px;
+                }
+
+                .goal {
+                    margin-top: 5px;
+                    color: #999;
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+
+    .item {
+        position: relative;
+        padding-left: 12px;
+    }
+
+
+    /* 画竖线 */
+    .item::before {
+        content: '';
+        position: absolute;
+        left: 0px;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background-color: #FC6506;
+    }
+
+    .firstItem::before {
+        content: '';
+        position: absolute;
+        left: 0px;
+        top: 24px;
+        bottom: 0;
+        width: 2px;
+        background-color: #FC6506;
+    }
+
+    .lastItem::before {
+        content: '';
+        position: absolute;
+        left: 0px;
+        top: 0;
+        bottom: 24px;
+        width: 2px;
+        height: 24px;
+        background-color: #FC6506;
+
+    }
+
+    /* 每个 item 的标题前加圆点 */
+    :global(.el-collapse-item__header) {
+        position: relative;
+        padding-left: 24px;
+    }
+
+    :global(.el-collapse-item__header)::before {
+        content: '';
+        position: absolute;
+        left: -15px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 8px;
+        height: 8px;
+        background-color: #FC6506;
+        border-radius: 50%;
+        z-index: 1;
+    }
+}