0
点赞
收藏
分享

微信扫一扫

ChatGPT vs DeepSeek详细对比

Ichjns 02-17 18:00 阅读 17
vue.js前端javascriptDeepSeekecmascript
加载失败

共同探索软件研发！敬请关注【宝码香车】
关注描述

csdngif标识

目录

📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣

DeepSeek 助力 Vue 开发：打造丝滑的瀑布流布局（Masonry Layout）

📚前言

对于 AI 社区来说，DeepSeek 的开源策略吸引了大量开发者和研究人员的关注和参与，形成了一个活跃的社区。开发者们可以在 GitHub 等平台上自由获取和修改模型代码，共同推动 AI 技术的发展。这种开放式的创新模式激发了更多的创意和灵感，加速了模型的更新和迭代。许多开发者基于 DeepSeek 的开源模型进行二次开发，开发出了各种有趣的应用和工具，进一步拓展了 DeepSeek 的应用场景。

在行业发展方面，DeepSeek 的开源策略降低了中小企业和个人开发者的使用成本，使得他们能够以较低的成本进行模型微调和应用开发。这有助于推动人工智能技术在各个行业的普及和应用，促进了整个 AI 行业的发展。同时，DeepSeek 与多家芯片企业合作，优化模型在国产芯片上的推理效率，推动了 AI 生态的建设。它还通过开源课程体系，培养具备全栈 AI 开发能力的复合型人才，为行业发展提供了人才支持。

📚进入安装好的DeepSeek

0基础3步部署自己的DeepSeek安装步骤

DeepSeek应用

进入DeepSeek应用

📚页面效果

页面效果

📚指令输入

组件属性 (Props)

  1. columns

    • 类型: Number
    • 默认值: 2
    • 说明: 初始列数

  2. gutter

    • 类型: Number
    • 默认值: 8
    • 说明: 列间距（像素）

  3. breakpoints

    • 类型: Object
    • 默认值: {}
    • 说明: 响应式断点配置，例如 { 768: 3, 1024: 4 }

  4. resizeObserver

    • 类型: Boolean
    • 默认值: true
    • 说明: 是否监听容器尺寸变化自动重新布局

  5. useImageLoader

    • 类型: Boolean
    • 默认值: true
    • 说明: 是否监听子元素内的图片加载完成事件后重新布局

  6. itemClass

    • 类型: String
    • 默认值: 'masonry-item'
    • 说明: 子元素的 CSS 类名

  7. transitionDuration

    • 类型: Number
    • 默认值: 300
    • 说明: 布局变化时的过渡动画时长（单位：ms）

组件事件 (Events)

  1. layout-complete

    • 触发时机: 布局计算完成后
    • 参数: { columns: number, containerHeight: number }

  2. item-positioned

    • 触发时机: 单个子元素定位完成后
    • 参数: { element: HTMLElement, position: { x: number, y: number } }

你有更好的建议也可以添加，要注明。组件定义好后给出3个及以上完整的调用示例。
下面是现有目录
vueAndDeepseek/
├── src/ # 源代码目录
│ ├── assets/ # 静态资源
│ │ ├── base.css
│ │ ├── main.css
│ │ └── logo.svg
│ ├── components/ # 组件目录
│ │ ├── HelloWorld.vue
│ │ ├── TheWelcome.vue
│ │ ├── WelcomeItem.vue
│ │ ├── Progress/
│ │ │ └── Progress.vue
│ │ ├── Accordion/
│ │ ├── BackToTop/
│ │ ├── Card/
│ │ ├── InfiniteScroll/
│ │ ├── Notification/
│ │ ├── Timeline/
│ │ ├── Switch/
│ │ ├── Tabs/
│ │ ├── Sidebar/
│ │ ├── Breadcrumbs/
│ │ ├── MasonryLayout/
│ │ └── icons/
│ ├── router/ # 路由配置
│ │ └── index.js
│ ├── stores/ # Pinia 状态管理
│ │ └── counter.js
│ ├── views/ # 页面组件
│ │ ├── ProgressView.vue
│ │ ├── TabsView.vue
│ │ ├── SwitchView.vue
│ │ ├── TimelineView.vue
│ │ ├── NotificationView.vue
│ │ ├── CardView.vue
│ │ ├── InfiniteScrollView.vue
│ │ ├── BackToTopView.vue
│ │ ├── AccordionView.vue
│ │ ├── SidebarView.vue
│ │ ├── BreadcrumbsView.vue
│ │ ├── MasonryLayoutView.vue
│ │ └── AboutView.vue
│ ├── App.vue # 根组件
│ └── main.js # 应用入口
├── public/ # 公共资源目录
├── index.html # HTML 模板
├── package.json # 项目配置
├── vite.config.js # Vite 配置
└── node_modules/ # 依赖包目录

📚think

📘组件代码

这里为您实现一个基于Vue3 Composition API的瀑布流组件，按照您的要求分文件保存：

vueAndDeepseek/
└─ src/
   └─ components/
      └─ MasonryLayout/
         ├─ index.vue          # 组件主文件
         └─ MasonryLayout.vue  # 组件逻辑
1. 组件实现代码
<!-- components/MasonryLayout/index.vue -->
<template>
  <div class="masonry-container" ref="containerRef">
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import { useElementSize, useWindowSize } from '@vueuse/core'

const props = defineProps({
  columns: { type: Number, default: 2 },
  gutter: { type: Number, default: 8 },
  breakpoints: { type: Object, default: () => ({}) },
  resizeObserver: { type: Boolean, default: true },
  useImageLoader: { type: Boolean, default: true },
  itemClass: { type: String, default: 'masonry-item' },
  transitionDuration: { type: Number, default: 300 }
})

const emit = defineEmits(['layout-complete', 'item-positioned'])

// 响应式变量
const containerRef = ref(null)
const items = ref([])
let observer = null
let resizeObserver = null

// 计算当前列数
const currentColumns = computed(() => {
  const { width } = useWindowSize()
  const breakpoints = Object.keys(props.breakpoints)
    .map(Number)
    .sort((a, b) => b - a)
  
  for (const bp of breakpoints) {
    if (width.value >= bp) {
      return props.breakpoints[bp]
    }
  }
  return props.columns
})

// 核心布局方法
const calculateLayout = async () => {
  if (!containerRef.value) return
  
  // 等待图片加载
  if (props.useImageLoader) {
    await loadImages(containerRef.value)
  }
  
  const containerWidth = containerRef.value.offsetWidth
  const colWidth = (containerWidth - (currentColumns.value - 1) * props.gutter) / currentColumns.value
  const positions = Array(currentColumns.value).fill(0)
  
  items.value = Array.from(containerRef.value.children)
    .filter(el => el.classList.contains(props.itemClass))
  
  items.value.forEach(item => {
    const minHeight = Math.min(...positions)
    const columnIndex = positions.indexOf(minHeight)
    
    const x = columnIndex * (colWidth + props.gutter)
    const y = minHeight
    
    // 应用定位
    item.style.transform = `translate(${x}px, ${y}px)`
    item.style.transition = `transform ${props.transitionDuration}ms`
    
    // 触发单个元素定位事件
    emit('item-positioned', {
      element: item,
      position: { x, y }
    })
    
    positions[columnIndex] += item.offsetHeight + props.gutter
  })
  
  // 更新容器高度
  containerRef.value.style.height = `${Math.max(...positions)}px`
  emit('layout-complete', {
    columns: currentColumns.value,
    containerHeight: Math.max(...positions)
  })
}

// 图片加载处理
const loadImages = (container) => {
  return Promise.all(
    Array.from(container.querySelectorAll('img'))
      .map(img => {
        if (img.complete) return Promise.resolve()
        return new Promise(resolve => {
          img.onload = resolve
          img.onerror = resolve
        })
      })
  )
}

// 监听器设置
const setupObservers = () => {
  if (props.resizeObserver && containerRef.value) {
    resizeObserver = new ResizeObserver(calculateLayout)
    resizeObserver.observe(containerRef.value)
  }
  
  if (window.MutationObserver) {
    observer = new MutationObserver(calculateLayout)
    observer.observe(containerRef.value, {
      childList: true,
      subtree: true
    })
  }
}

// 生命周期
onMounted(() => {
  calculateLayout()
  setupObservers()
  window.addEventListener('resize', calculateLayout)
})

onUnmounted(() => {
  if (resizeObserver) resizeObserver.disconnect()
  if (observer) observer.disconnect()
  window.removeEventListener('resize', calculateLayout)
})

// 响应props变化
watch([currentColumns, () => props.gutter], calculateLayout)
</script>

<style scoped>
.masonry-container {
  position: relative;
  margin: 0 auto;
}

.masonry-container :deep(.masonry-item) {
  position: absolute;
  box-sizing: border-box;
  will-change: transform;
}
</style>
2. 调用示例
<!-- views/MasonryLayoutView.vue -->
<template>
  <!-- 基础示例 -->
  <MasonryLayout
    :columns="2"
    :gutter="10"
    @layout-complete="handleLayoutComplete"
  >
    <div 
      v-for="(item, index) in 20" 
      :key="index"
      class="masonry-item"
      :style="{ height: `${Math.random() * 300 + 100}px`, background: randomColor() }"
    />
  </MasonryLayout>

  <!-- 响应式断点示例 -->
  <MasonryLayout
    :columns="2"
    :breakpoints="{ 768: 3, 1024: 4 }"
    :gutter="15"
    :transition-duration="500"
  >
    <div 
      v-for="(item, index) in images" 
      :key="item.id"
      class="masonry-item"
    >
      <img :src="item.url" alt="">
    </div>
  </MasonryLayout>

  <!-- 动态内容示例 -->
  <button @click="addItems">添加元素</button>
  <MasonryLayout
    ref="masonry"
    :item-class="customItemClass"
    :resize-observer="false"
  >
    <div 
      v-for="(item, index) in dynamicItems" 
      :key="index"
      :class="customItemClass"
      :style="{ height: item.height }"
    />
  </MasonryLayout>
</template>

<script setup>
import { ref } from 'vue'

// 示例数据
const randomColor = () => '#' + Math.floor(Math.random()*16777215).toString(16)

const images = ref([
  { id: 1, url: '/image1.jpg' },
  { id: 2, url: '/image2.jpg' },
  // ...
])

const dynamicItems = ref(Array(10).fill().map(() => ({
  height: `${Math.random() * 400 + 100}px`,
  color: randomColor()
})))

const customItemClass = 'custom-masonry-item'

const handleLayoutComplete = ({ columns, containerHeight }) => {
  console.log(`布局完成，列数：${columns}，容器高度：${containerHeight}px`)
}

const addItems = () => {
  dynamicItems.value.push({
    height: `${Math.random() * 400 + 100}px`,
    color: randomColor()
  })
  // 手动触发布局更新
  nextTick(() => {
    masonry.value.calculateLayout()
  })
}
</script>

<style>
.custom-masonry-item {
  width: 100%;
  background: #f0f0f0;
  border-radius: 8px;
  padding: 1rem;
  transition: transform 0.5s ease-in-out;
}
</style>
3. 增强建议

  1. 性能优化：

    • 添加虚拟滚动支持（对于大数据量）
    • 使用requestAnimationFrame优化布局计算
    • 添加布局缓存机制

  2. 功能扩展：

    // 在组件中暴露方法
defineExpose({
  calculateLayout,
  refreshLayout: calculateLayout
})

  3. 错误处理：

    // 在图片加载处添加错误处理
const loadImages = (container) => {
  return Promise.all(
    Array.from(container.querySelectorAll('img'))
      .map(img => {
        return new Promise(resolve => {
          if (img.complete) return resolve()
          img.onload = resolve
          img.onerror = resolve // 即使图片加载失败也继续执行
        })
      })
  )
}

  4. SSR支持：

    // 在onMounted中初始化观察器
if (typeof window !== 'undefined') {
  // 初始化代码
}

这个实现包含了您要求的所有功能，并通过三个示例展示了不同的使用场景。组件会自动响应窗口大小变化、内容变化和图片加载，并提供了良好的可扩展性。

📚代码测试

📚测试代码正常跑通，附其他代码

  • 添加路由
  • 页面展示入口

📘编写路由 src\router\index.js

\router\index.js

import { createRouter, createWebHistory } from 'vue-router'


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'progress',
      component:  () => import('../views/ProgressView.vue'),
    },
    {
      path: '/tabs',
      name: 'tabs',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      // 标签页（Tabs）
      component: () => import('../views/TabsView.vue'),
    },
    {
      path: '/accordion',
      name: 'accordion',
      // 折叠面板（Accordion）
      component: () => import('../views/AccordionView.vue'),
    },
    {
      path: '/timeline',
      name: 'timeline',
      // 时间线（Timeline）
      component: () => import('../views/TimelineView.vue'),
    },
    {
      path: '/backToTop',
      name: 'backToTop',
      component: () => import('../views/BackToTopView.vue')
    },
    {
      path: '/notification',
      name: 'notification',
      component: () => import('../views/NotificationView.vue')
    },
    {
      path: '/card',
      name: 'card',
      component: () => import('../views/CardView.vue')
    },
    {
      path: '/infiniteScroll',
      name: 'infiniteScroll',
      component: () => import('../views/InfiniteScrollView.vue')
    },
    {
      path: '/switch',
      name: 'switch',
      component: () => import('../views/SwitchView.vue')
    },
    {
      path: '/sidebar',
      name: 'sidebar',
      component: () => import('../views/SidebarView.vue')
    },
    {
      path: '/breadcrumbs',
      name: 'breadcrumbs',
      component: () => import('../views/BreadcrumbsView.vue')
    },
    {
      path: '/masonryLayout',
      name: 'masonryLayout',
      component: () => import('../views/masonryLayoutView.vue')
    }
  ],
})

export default router

📘编写展示入口 src\App.vue

src\App.vue

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
      <nav>
        <RouterLink to="/">Progress</RouterLink>
        <RouterLink to="/tabs">Tabs</RouterLink>
        <RouterLink to="/accordion">Accordion</RouterLink>
        <RouterLink to="/timeline">Timeline</RouterLink>
        <RouterLink to="/backToTop">BackToTop</RouterLink>
        <RouterLink to="/notification">Notification</RouterLink>
        <RouterLink to="/card">Card</RouterLink>
        <RouterLink to="/infiniteScroll">InfiniteScroll</RouterLink>
        <RouterLink to="/switch">Switch</RouterLink>
        <RouterLink to="/sidebar">Sidebar</RouterLink>
        <RouterLink to="/breadcrumbs">Breadcrumbs</RouterLink>
        <RouterLink to="/masonryLayout">MasonryLayout</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>

📚页面效果

页面效果

📚自己部署 DeepSeek 安装地址

蓝耘元生代智算云平台地址:https://cloud.lanyun.net/#/registerPage?promoterCode=07100c37a0

📚相关文章

 

———— 相　关　文　章 ————

 

  1. 0基础3步部署自己的DeepSeek安装步骤

  2. DeepSeek 助力 Vue 开发：打造丝滑的步骤条（Step bar）

  3. DeepSeek 助力 Vue 开发：打造丝滑的进度条（Progress Bar）

  4. 自己部署 DeepSeek 助力 Vue 开发：打造丝滑的标签页（Tabs）

  5. 自己部署 DeepSeek 助力 Vue 开发：打造丝滑的折叠面板（Accordion）

  6. 自己部署 DeepSeek 助力 Vue 开发：打造丝滑的时间线（Timeline ）

  7. DeepSeek 助力 Vue 开发：打造丝滑的返回顶部按钮（Back to Top）

  8. DeepSeek 助力 Vue 开发：打造丝滑的通知栏（Notification Bar）

  9. DeepSeek 助力 Vue 开发：打造丝滑的卡片（Card）

  10. DeepSeek 助力 Vue 开发：打造丝滑的无限滚动（Infinite Scroll）

  11. DeepSeek 助力 Vue 开发：打造丝滑的开关切换（Switch）

  12. DeepSeek 助力 Vue 开发：打造丝滑的侧边栏（Sidebar）

  13. DeepSeek 助力 Vue 开发：打造丝滑的面包屑导航（Breadcrumbs）

整理不易，点赞关注宝码香车

举报

相关推荐

工厂模式 vs 策略模式：Java设计模式详细对比

策略模式java设计模式

服务发现对比：Zookeeper vs etcd vs Consul

数据服务发现服务器Linux系统/运维

DeepSeek、Grok 和 ChatGPT 对比分析：从技术与应用场景的角度深入探讨

spring bootmilvuspython

鸿蒙 Navigation VS Router 对比

harmonyos华为

Claude与ChatGPT的对比

服务器mysqladb

ChatGPT 搜索 vs Google 搜索

stm32华为云物联网

kafka rabbitmq 详细对比

github

注册ChatGPT详细指南

chatGPT机器学习人工智能yyds干货盘点

WordPress VS ModStart 框架的对比

php开发效率laravel软件设计软件研发

Hadoop vs Spark性能对比

Sparksparkhdfs数据音视频
0 条评论
加载失败