1. yarn add -g @haha-cli/core
  2. haha-cli --version
  3. haha-cli init hahaya   //备注 上线仍有问题 暂不处理 先主要处理项目

Git Flow标准

根据需求，从 master 拉出分支
开发阶段，提交 commit
开发完毕，发起 PR（pull request）
代码评审
部署，测试
merge 到 master
分支命名
feature 开头代表新功能开发
hotfix 开头代表 bug 修复
安装第三方组件库 ant-design-vue
yarn add ant-design-vue 

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import Antd from 'ant-design-vue'
  4. import 'ant-design-vue/dist/antd.css'
  6. createApp(App).use(Antd).mount('#app')

增加ts配置：https://juejin.cn/post/6982444129271676942

项目搭建

  1. <template>
  2.   <div class="editor-container">
  3.     <a-layout>
  4.       <a-layout-sider width="300" style="background: #fff">
  5.         <div class="sidebar-container">组件列表</div>
  6.       </a-layout-sider>
  7.       <a-layout style="padding: 0 24px 24px">
  8.         <a-layout-content class="preview-container">
  9.           <p>画布区域</p>
  10.           <div class="preview-list" id="canvas-area"></div>
  11.         </a-layout-content>
  12.       </a-layout>
  13.       <a-layout-sider
  14.         width="300"
  15.         style="background: #fff"
  16.         class="settings-panel"
  17.       >
  18.         组件属性
  19.       </a-layout-sider>
  20.     </a-layout>
  21.   </div>
  22. </template>
  24. <script lang="ts">
  25. import { defineComponent, computed } from 'vue'
  27. export default defineComponent({
  28.   components: {},
  29.   setup() {},
  30. })
  31. </script>
  33. <style>
  34. .editor-container .preview-container {
  35.   padding: 24px;
  36.   margin: 0;
  37.   min-height: 85vh;
  38.   display: flex;
  39.   flex-direction: column;
  40.   align-items: center;
  41.   position: relative;
  42. }
  43. .editor-container .preview-list {
  44.   padding: 0;
  45.   margin: 0;
  46.   min-width: 375px;
  47.   min-height: 200px;
  48.   border: 1px solid #efefef;
  49.   background: #fff;
  50.   overflow-x: hidden;
  51.   overflow-y: auto;
  52.   position: fixed;
  53.   margin-top: 50px;
  54.   max-height: 80vh;
  55. }
  56. </style>
  1. <template>
  2.   <a-layout>
  3.     <a-layout-header>乐高</a-layout-header>
  4.     <a-layout-content>
  5.       <div class="home-container"><template-list></template-list></div
  6.     ></a-layout-content>
  7.     <a-layout-footer>© 慕课网（imooc.com）版权所有</a-layout-footer>
  8.   </a-layout>
  9. </template>
  11. <script>
  12. import TemplateList from '@/components/TemplateList.vue'
  13. import { defineComponent } from 'vue'
  15. export default defineComponent({
  16.   components: { TemplateList },
  17.   setup() {
  19.   },
  20. })
  21. </script>
  23. <style>
  24. .ant-layout-header {
  25.   color: white;
  26. }
  27. .page-title {
  28.   color: #fff;
  29. }
  30. .home-container {
  31.   background: #fff;
  32.   padding: 0 24px 24px 30px;
  33.   min-height: 85vh;
  34.   max-width: 1200px;
  35.   /* margin: 50px auto; */
  36.   width: 100%;
  37. }
  38. </style>
  1. <template>
  2.   <div class="homepage-container">
  3.     <a-layout :style="{ background: '#fff' }">
  4.       <a-layout-header class="header">
  5.         <div class="page-title">
  6.           <router-link to="/">慕课乐高</router-link>
  7.         </div>
  8.         <user-profile :user="user"></user-profile>
  9.       </a-layout-header>
  10.       <a-layout-content class="home-layout">
  11.         <router-view></router-view>
  12.       </a-layout-content>
  13.     </a-layout>
  14.     <a-layout-footer>
  15.       © 慕课网（imooc.com）版权所有 | 津ICP备20000929号-2
  16.     </a-layout-footer>
  17.   </div>
  18. </template>
  20. <script lang="ts">
  21. import { computed, defineComponent } from 'vue'
  23. export default defineComponent({
  24.   name: 'Index',
  25.   components: {},
  26.   setup() {},
  27. })
  28. </script>
  30. <style>
  31. .header {
  32.   display: flex;
  33.   justify-content: space-between;
  34.   align-items: center;
  35. }
  36. .page-title {
  37.   color: #fff;
  38. }
  39. </style>
  1. <template>
  2.   <div class="work-detail-container">
  3.     <a-row type="flex" justify="center">
  4.       <a-col :span="8" class="cover-img">
  5.         <img
  6.           src="http://typescript-vue.oss-cn-beijing.aliyuncs.com/vue-marker/5f81cca3f3bf7a0e1ebaf885.png"
  7.           alt=""
  8.         />
  9.       </a-col>
  10.       <a-col :span="8">
  11.         <h2>11</h2>
  12.         <p>11</p>
  13.         <div class="author">
  14.           <a-avatar>V</a-avatar>
  15.           该模版由 <b>11</b> 创作
  16.         </div>
  17.         <div class="bar-code-area">
  18.           <span>扫一扫，手机预览</span>
  19.           <div ref="container"></div>
  20.         </div>
  21.         <div class="use-button">
  22.           <a-button type="primary" size="large"> 使用模版 </a-button>
  23.           <a-button size="large"> 下载图片海报 </a-button>
  24.         </div>
  25.       </a-col>
  26.     </a-row>
  27.   </div>
  28. </template>
  30. <script lang="ts">
  31. import { defineComponent, computed } from 'vue'
  33. export default defineComponent({
  34.   setup() {},
  35. })
  36. </script>
  38. <style scoped>
  39. .work-detail-container {
  40.   margin-top: 50px;
  41. }
  42. .cover-img {
  43.   margin-right: 30px;
  44. }
  45. .cover-img img {
  46.   width: 100%;
  47. }
  48. .use-button {
  49.   margin: 30px 0;
  50. }
  51. .ant-avatar {
  52.   margin-right: 10px;
  53. }
  54. .bar-code-area {
  55.   margin: 20px 0;
  56. }
  57. </style>
  1. <template>
  2.   <div class="template-list-component">
  3.     <a-row :gutter="16">
  4.       <a-col :span="6" class="poster-item">
  5.         <a-card hoverable>
  6.           <template #cover>
  7.             <!-- <img :src="item.coverImg" v-if="item.coverImg" /> -->
  8.             <img
  9.               src="http://typescript-vue.oss-cn-beijing.aliyuncs.com/vue-marker/5f81cca3f3bf7a0e1ebaf885.png"
  10.             />
  11.             <div class="hover-item">
  12.               <a-button size="large" type="primary">使用该模版创建</a-button>
  13.             </div>
  14.           </template>
  15.           <a-card-meta :title="11">
  16.             <template v-slot:description>
  17.               <div class="description-detail">
  18.                 <span>作者：11</span>
  19.                 <span class="user-number">11</span>
  20.               </div>
  21.             </template>
  22.           </a-card-meta>
  23.         </a-card>
  24.       </a-col>
  25.     </a-row>
  26.   </div>
  27. </template>
  29. <script lang="ts">
  30. import { defineComponent } from 'vue'
  32. export default defineComponent({
  33.   name: 'template-list',
  34. })
  35. </script>
  37. <style>
  38. .poster-item {
  39.   position: relative;
  40.   margin-bottom: 20px;
  41. }
  42. .poster-item .ant-card {
  43.   border-radius: 12px;
  44. }
  45. .poster-item .ant-card-cover {
  46.   height: 390px;
  47. }
  48. .poster-item .ant-card-cover > img {
  49.   width: 100%;
  50. }
  51. .poster-item .ant-card-hoverable {
  52.   box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
  53. }
  54. .poster-item .ant-card-body {
  55.   padding: 0;
  56. }
  57. .poster-item .ant-card-meta {
  58.   margin: 0;
  59. }
  60. .poster-item .ant-card-meta-title {
  61.   color: #333;
  62.   padding: 10px 12px;
  63.   border-bottom: 1px solid #f2f2f2;
  64.   margin-bottom: 0 !important;
  65. }
  66. .description-detail {
  67.   display: flex;
  68.   justify-content: space-between;
  69.   padding: 13px 12px;
  70.   color: #999;
  71. }
  72. .user-number {
  73.   font-weight: bold;
  74. }
  75. .poster-title {
  76.   height: 70px;
  77. }
  78. .poster-title h2 {
  79.   margin-bottom: 0px;
  80. }
  81. .poster-item .ant-card-cover {
  82.   position: relative;
  83.   overflow: hidden;
  84.   border-top-left-radius: 12px;
  85.   border-top-right-radius: 12px;
  86. }
  87. .poster-item .ant-card-cover img {
  88.   transition: all ease-in 0.2s;
  89. }
  90. .poster-item .ant-card-cover .hover-item {
  91.   position: absolute;
  92.   left: 0;
  93.   top: 0;
  94.   width: 100%;
  95.   height: 100%;
  96.   display: none;
  97.   background: rgba(0, 0, 0, 0.8);
  98.   align-items: center;
  99.   justify-content: center;
  100.   border-top-left-radius: 12px;
  101.   border-top-right-radius: 12px;
  102. }
  103. .poster-item:hover .hover-item {
  104.   display: flex;
  105. }
  106. .poster-item:hover img {
  107.   transform: scale(1.25);
  108. }
  109. .barcode-container img {
  110.   border-radius: 0;
  111. }
  112. </style>

安装 vue-router 路由

  1. import { createRouter, createWebHashHistory } from 'vue-router'
  3. const Home = () => import('@/views/Home.vue')
  4. const Editor = () => import('../views/Editor.vue')
  5. const TemplateDetail = () => import('../views/TemplateDetail.vue')
  7. const router = createRouter({
  8.   history: createWebHashHistory(),
  9.   routes: [
  10.     {
  11.       path: '/',
  12.       name: 'home',
  13.       component: Home,
  14.       meta: {
  15.         withFooter: true,
  16.       },
  17.       children: [
  18.         //嵌套路由
  19.         // {
  20.         //   path: '/',
  21.         //   name: 'home',
  22.         //   component: Home,
  23.         // },
  24.       ],
  25.     },
  26.     {
  27.       path: '/editor',
  28.       name: 'editor',
  29.       component: Editor,
  30.     },
  31.     {
  32.       path: '/template/:id',
  33.       name: 'template',
  34.       component: TemplateDetail,
  35.       meta: {
  36.         withFooter: true,
  37.       },
  38.     },
  39.   ],
  40. })
  42. export default router
  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import Antd from 'ant-design-vue'
  4. import 'ant-design-vue/dist/antd.css'
  5. import router from '@/routes/index'
  6. //将路由挂载到app实例上
  7. createApp(App).use(Antd).use(router).mount('#app')

在App.vue增加路由视图

  1. <template>
  2.   <router-view />
  3. </template>
  5. <script lang="ts">
  6. import { defineComponent } from 'vue'
  8. export default defineComponent({
  9.   name: 'App',
  10.   components: {},
  11. })
  12. </script>
  14. <style>
  15. #app {
  16.   font-family: Avenir, Helvetica, Arial, sans-serif;
  17.   -webkit-font-smoothing: antialiased;
  18.   -moz-osx-font-smoothing: grayscale;
  19.   text-align: center;
  20.   color: #2c3e50;
  21.   margin-top: 60px;
  22. }
  23. </style>

增加路由函数实现跳转

  1. ...
  2. //详情页点击详情的使用模板，跳转到编辑页面
  3. <router-link to="/editor">
  4.   <a-button type="primary" size="large"> 使用模版 </a-button>
  5. </router-link>
  6. ...
  1. ...
  2. //首页点击使用该模版创建，跳转到详情页面
  3. <router-link :to="`/template/${1}`">
  4.   <a-button size="large" type="primary">使用该模版创建</a-button>
  5. </router-link>
  6. ...
  1. <template>
  2.   <div class="template-list-component">
  3.     <pre>{{ route }}</pre>
  4.     ...
  5.   </div>
  6. </template>
  8. <script lang="ts">
  9. import { defineComponent } from 'vue'
  10. // useRoute（获取路由参数）
  11. import { useRoute } from 'vue-router'
  12. export default defineComponent({
  13.   name: 'template-list',
  14.   setup() {
  15.     const route = useRoute()
  16.     return {
  17.       route,
  18.     }
  19.   },
  20. })
  21. </script>
  22. ...

image.png

  1. ...
  2. <script>
  3. import { useRouter } from 'vue-router'
  4. import TemplateList from '@/components/TemplateList.vue'
  5. import { defineComponent } from 'vue'
  7. export default defineComponent({
  8.   components: { TemplateList },
  9.   setup() {
  10.     //useRouter  跳转
  11.     const router = useRouter()
  12.     setTimeout(() => {
  13.       router.push(`/template/${1}`)
  14.     }, 2000)
  15.   },
  16. })
  17. </script>
  18. ...

增加header是否根据不同页面显示显示

  1. <template>
  2.   <a-layout>
  3.     <a-layout-header><span class="header">乐高</span></a-layout-header>
  4.     <a-layout-content>
  5.       <div class="content-container">
  6.         <router-view />
  7.       </div>
  8.     </a-layout-content>
  9.     <a-layout-footer v-if="withFooter"
  10.       >© 慕课网（imooc.com）版权所有</a-layout-footer
  11.     >
  12.   </a-layout>
  13. </template>
  15. <script lang="ts">
  16. import { defineComponent, toRaw, computed } from 'vue'
  17. import { useRoute } from 'vue-router'
  19. export default defineComponent({
  20.   name: 'app',
  21.   setup() {
  22.     const route = useRoute()
  23.     const withFooter = computed(() => route.meta.withFooter)
  24.     return {
  25.       withFooter,
  26.     }
  27.   },
  28. })
  29. </script>
  31. <style>
  32. .page-title {
  33.   color: #fff;
  34. }
  35. .content-container {
  36.   background: #fff;
  37.   width: 100%;
  38. }
  39. .header {
  40.   color: white;
  41. }
  42. </style>

安装vuex

安装less：

路由

  1. import { createRouter, createWebHashHistory } from 'vue-router'
  3. const Index = () => import('@/views/Index.vue')
  4. const Home = () => import('@/views/Home.vue')
  5. const Editor = () => import('../views/Editor.vue')
  6. const TemplateDetail = () => import('../views/TemplateDetail.vue')
  8. const router = createRouter({
  9.   history: createWebHashHistory(),
  10.   routes: [
  11.     {
  12.       path: '/',
  13.       name: 'home',
  14.       component: Index,
  15.       children: [
  16.         //嵌套路由
  17.         {
  18.           path: '',
  19.           name: 'home',
  20.           component: Home,
  21.         },
  22.         {
  23.           path: '/template/:id',
  24.           name: 'template',
  25.           component: TemplateDetail,
  26.         },
  27.       ],
  28.     },
  29.     {
  30.       path: '/editor',
  31.       name: 'editor',
  32.       component: Editor,
  33.     },
  34.   ],
  35. })
  37. export default router

store

  1. export const LOGIN = 'login'
  2. export const LOGOUT = 'logout'
  4. export const GETTEMPLATEBYID = 'getTemplateById'
  1. import { Module } from 'vuex'
  2. import { GloabalDataProps } from '.'
  3. import { GETTEMPLATEBYID } from './mutation-types'
  5. export interface TemplateProps {
  6.   id: number
  7.   title: string
  8.   coverImg: string
  9.   author: string
  10.   copiedCount: number
  11. }
  13. export const testData: TemplateProps[] = [
  14.   {
  15.     id: 1,
  16.     coverImg:
  17.       'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
  18.     title: 'test title 1',
  19.     author: 'viking',
  20.     copiedCount: 1,
  21.   },
  22.   {
  23.     id: 2,
  24.     coverImg:
  25.       'https://static.imooc-lego.com/upload-files/screenshot-677311.png',
  26.     title: '前端架构师直播海报',
  27.     author: 'viking',
  28.     copiedCount: 1,
  29.   },
  30.   {
  31.     id: 3,
  32.     coverImg:
  33.       'https://static.imooc-lego.com/upload-files/screenshot-682056.png',
  34.     title: '前端架构师直播海报',
  35.     author: 'viking',
  36.     copiedCount: 1,
  37.   },
  38.   {
  39.     id: 4,
  40.     coverImg:
  41.       'https://static.imooc-lego.com/upload-files/screenshot-677311.png',
  42.     title: '前端架构师直播海报',
  43.     author: 'viking',
  44.     copiedCount: 1,
  45.   },
  46.   {
  47.     id: 5,
  48.     coverImg:
  49.       'https://static.imooc-lego.com/upload-files/screenshot-889755.png',
  50.     title: '前端架构师直播海报',
  51.     author: 'viking',
  52.     copiedCount: 1,
  53.   },
  54.   {
  55.     id: 6,
  56.     coverImg:
  57.       'https://static.imooc-lego.com/upload-files/screenshot-677311.png',
  58.     title: '前端架构师直播海报',
  59.     author: 'viking',
  60.     copiedCount: 1,
  61.   },
  62. ]
  64. export interface TemplatesProps {
  65.   templateList: TemplateProps[]
  66. }
  68. //两个参数 第一个本地的interface，第二个是全局的interface
  69. const templates: Module<TemplatesProps, GloabalDataProps> = {
  70.   state: {
  71.     templateList: testData,
  72.   },
  73.   getters: {
  74.     [GETTEMPLATEBYID](state, getters, rootState) {
  75.       return (templateId: number) =>
  76.         state.templateList.find((item) => item.id === templateId)
  77.     },
  78.   },
  79. }
  81. export default templates
  1. import { Module } from 'vuex'
  2. import { GloabalDataProps } from '.'
  3. import { LOGIN, LOGOUT } from './mutation-types'
  5. export interface UserProps {
  6.   isLogin: boolean
  7.   userName?: string
  8. }
  10. const testUser: UserProps = { isLogin: false }
  12. //两个参数 第一个本地的interface，第二个是全局的interface
  13. const user: Module<UserProps, GloabalDataProps> = {
  14.   mutations: {
  15.     [LOGIN](state) {
  16.       state.isLogin = true
  17.       state.userName = 'hahaya'
  18.     },
  19.     [LOGOUT](state) {
  20.       state.isLogin = false
  21.     },
  22.   },
  23. }
  25. export default user
  1. import { createStore } from 'vuex'
  3. import user, { UserProps } from './user'
  4. import templates, { TemplatesProps } from './templates'
  5. export interface GloabalDataProps {
  6.   user: UserProps
  7.   templates: TemplatesProps
  8. }
  10. const store = createStore<GloabalDataProps>({
  11.   modules: {
  12.     user,
  13.     templates,
  14.   },
  15. })
  17. export default store

View

  1. <template>
  2.   <div class="home-container">
  3.     <template-list :templates="{ templates }"></template-list>
  4.   </div>
  5. </template>
  7. <script lang="ts">
  8. import { useRouter } from 'vue-router'
  9. import TemplateList from '@/components/TemplateList.vue'
  10. import { computed, defineComponent, toRaw } from 'vue'
  11. import { GloabalDataProps } from '@/store'
  12. import { useStore } from 'vuex'
  13. import { TemplateProps } from '@/store/templates'
  14. export default defineComponent({
  15.   components: { TemplateList },
  16.   setup() {
  17.     const store = useStore<GloabalDataProps>()
  18.     const templates = computed(() => store.state.templates.templateList)
  19.     return {
  20.       templates,
  21.     }
  22.   },
  23. })
  24. </script>
  26. <style lang="less" scoped>
  27. .page-title {
  28.   color: #fff;
  29. }
  30. .home-container {
  31.   background: #fff;
  32.   padding: 0 24px 24px 30px;
  33.   min-height: 85vh;
  34.   max-width: 1200px;
  35.   /* margin: 50px auto; */
  36.   width: 100%;
  37. }
  38. </style>
  1. <template>
  2.   <a-layout>
  3.     <a-layout-header>
  4.       <router-link to="/">慕课乐高</router-link>
  5.       <user-profile :user="{ user }" />
  6.     </a-layout-header>
  7.     <a-layout-content>
  8.       <div class="content-container">
  9.         <router-view />
  10.       </div>
  11.     </a-layout-content>
  12.     <a-layout-footer> © 慕课网（imooc.com）版权所有 </a-layout-footer>
  13.   </a-layout>
  14. </template>
  16. <script lang="ts">
  17. import { defineComponent, toRaw, computed } from 'vue'
  18. import { useRoute } from 'vue-router'
  19. import UserProfile from '@/components/UserProfile.vue'
  20. import { GloabalDataProps } from '@/store'
  21. import { useStore } from 'vuex'
  22. export default defineComponent({
  23.   name: 'index',
  24.   components: { UserProfile },
  25.   setup() {
  26.     const route = useRoute()
  27.     const withHeader = computed(() => route.meta.withHeader)
  28.     const store = useStore<GloabalDataProps>()
  29.     const user = computed(() => store.state.user)
  30.     return {
  31.       withHeader,
  32.       user: user,
  33.     }
  34.   },
  35. })
  36. </script>
  38. <style lang="less" scoped>
  39. .content-container {
  40.   width: 100%;
  41.   padding: 20px;
  42.   background: #fff;
  43. }
  44. .ant-layout-header {
  45.   display: flex;
  46.   justify-content: space-between;
  47.   align-items: center;
  48. }
  49. </style>
  1. <template>
  2.   <div class="work-detail-container">
  3.     <a-row type="flex" justify="center">
  4.       <a-col :span="8" class="cover-img">
  5.         <img :src="template.coverImg" alt="" />
  6.       </a-col>
  7.       <a-col :span="8">
  8.         <h2>{{ template.title }}</h2>
  9.         <div class="author">
  10.           <a-avatar>V</a-avatar>
  11.           该模版由 <b>{{ template.author }}</b> 创作
  12.         </div>
  13.         <div class="bar-code-area">
  14.           <span>扫一扫，手机预览</span>
  15.           <div ref="container"></div>
  16.         </div>
  17.         <div class="use-button">
  18.           <router-link to="/editor">
  19.             <a-button type="primary" size="large"> 使用模版 </a-button>
  20.           </router-link>
  21.           <a-button size="large"> 下载图片海报 </a-button>
  22.         </div>
  23.       </a-col>
  24.     </a-row>
  25.   </div>
  26. </template>
  28. <script lang="ts">
  29. import { GloabalDataProps } from '@/store'
  30. import { GETTEMPLATEBYID } from '@/store/mutation-types'
  31. import { TemplateProps } from '@/store/templates'
  32. import { defineComponent, computed } from 'vue'
  33. import { useStore } from 'vuex'
  34. import { useRoute } from 'vue-router'
  35. export default defineComponent({
  36.   setup() {
  37.     const store = useStore<GloabalDataProps>()
  38.     const route = useRoute()
  40.     const template = computed<TemplateProps>(() =>
  41.       store.getters[GETTEMPLATEBYID](Number(route.params.id)),
  42.     )
  43.     return {
  44.       template,
  45.     }
  46.   },
  47. })
  48. </script>
  50. <style lang="less" scoped>
  51. .work-detail-container {
  52.   margin-top: 50px;
  53. }
  54. .cover-img {
  55.   margin-right: 30px;
  56. }
  57. .cover-img img {
  58.   width: 100%;
  59. }
  60. .use-button {
  61.   margin: 30px 0;
  62. }
  63. .ant-avatar {
  64.   margin-right: 10px;
  65. }
  66. .bar-code-area {
  67.   margin: 20px 0;
  68. }
  69. </style>

components

  1. <template>
  2.   <div class="template-list-component">
  3.     <a-row :gutter="16">
  4.       <a-col
  5.         :span="6"
  6.         class="poster-item"
  7.         v-for="item in templates"
  8.         :key="item.id"
  9.       >
  10.         <a-card hoverable>
  11.           <template #cover>
  12.             <img :src="item.coverImg" v-if="item.coverImg" />
  13.             <img
  14.               v-else
  15.               src="http://typescript-vue.oss-cn-beijing.aliyuncs.com/vue-marker/5f81cca3f3bf7a0e1ebaf885.png"
  16.             />
  17.             <div class="hover-item">
  18.               <router-link :to="`/template/${item.id}`">
  19.                 <a-button size="large" type="primary">使用该模版创建</a-button>
  20.               </router-link>
  21.             </div>
  22.           </template>
  23.           <a-card-meta :title="item.title">
  24.             <template v-slot:description>
  25.               <div class="description-detail">
  26.                 <span>作者：{{ item.author }}</span>
  27.                 <span class="user-number">{{ item.copiedCount }}</span>
  28.               </div>
  29.             </template>
  30.           </a-card-meta>
  31.         </a-card>
  32.       </a-col>
  33.     </a-row>
  34.   </div>
  35. </template>
  37. <script lang="ts">
  38. import { computed, defineComponent, PropType, reactive } from 'vue'
  39. // useRoute（获取路由参数）
  40. import { useRoute } from 'vue-router'
  41. import { TemplateProps, TemplatesProps } from '@/store/templates'
  43. export default defineComponent({
  44.   name: 'template-list',
  45.   props: {
  46.     templates: {
  47.       type: Object,
  48.       required: true,
  49.     },
  50.   },
  51.   setup(props) {
  52.     const route = useRoute()
  53.     const templates = computed<TemplateProps[]>(() => props.templates.templates)
  54.     return {
  55.       route,
  56.       templates,
  57.     }
  58.   },
  59. })
  60. </script>
  62. <style lang="less" scoped>
  63. .poster-item {
  64.   position: relative;
  65.   margin-bottom: 20px;
  66. }
  67. .poster-item .ant-card {
  68.   border-radius: 12px;
  69. }
  70. .poster-item .ant-card-cover {
  71.   height: 390px;
  72. }
  73. .poster-item .ant-card-cover > img {
  74.   width: 100%;
  75. }
  76. .poster-item .ant-card-hoverable {
  77.   box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
  78. }
  79. .poster-item .ant-card-body {
  80.   padding: 0;
  81. }
  82. .poster-item .ant-card-meta {
  83.   margin: 0;
  84. }
  85. .poster-item .ant-card-meta-title {
  86.   color: #333;
  87.   padding: 10px 12px;
  88.   border-bottom: 1px solid #f2f2f2;
  89.   margin-bottom: 0 !important;
  90. }
  91. .description-detail {
  92.   display: flex;
  93.   justify-content: space-between;
  94.   padding: 13px 12px;
  95.   color: #999;
  96. }
  97. .user-number {
  98.   font-weight: bold;
  99. }
  100. .poster-title {
  101.   height: 70px;
  102. }
  103. .poster-title h2 {
  104.   margin-bottom: 0px;
  105. }
  106. .poster-item .ant-card-cover {
  107.   position: relative;
  108.   overflow: hidden;
  109.   border-top-left-radius: 12px;
  110.   border-top-right-radius: 12px;
  111. }
  112. .poster-item .ant-card-cover img {
  113.   transition: all ease-in 0.2s;
  114. }
  115. .poster-item .ant-card-cover .hover-item {
  116.   position: absolute;
  117.   left: 0;
  118.   top: 0;
  119.   width: 100%;
  120.   height: 100%;
  121.   display: none;
  122.   background: rgba(0, 0, 0, 0.8);
  123.   align-items: center;
  124.   justify-content: center;
  125.   border-top-left-radius: 12px;
  126.   border-top-right-radius: 12px;
  127. }
  128. .poster-item:hover .hover-item {
  129.   display: flex;
  130. }
  131. .poster-item:hover img {
  132.   transform: scale(1.25);
  133. }
  134. .barcode-container img {
  135.   border-radius: 0;
  136. }
  137. </style>
  1. <template>
  2.   <a-button
  3.     type="primary"
  4.     class="user-profile-component"
  5.     v-if="!user.isLogin"
  6.     @click="login"
  7.   >
  8.     登录
  9.   </a-button>
  10.   <div v-else>
  11.     <a-dropdown-button class="user-profile-component" type="primary">
  12.       {{ user.userName }}
  13.       <template #overlay>
  14.         <a-menu class="user-profile-dropdown">
  15.           <a-menu-item key="1" @click="logout">
  16.             <user-outlined />
  17.             退出登录
  18.           </a-menu-item>
  19.         </a-menu>
  20.       </template>
  21.     </a-dropdown-button>
  22.   </div>
  23. </template>
  25. <script lang="ts">
  26. import { useStore } from 'vuex'
  27. import { computed, defineComponent, PropType } from 'vue'
  28. import { useRouter } from 'vue-router'
  29. import { UserProps } from '@/store/user'
  30. import { UserOutlined } from '@ant-design/icons-vue'
  31. import { message } from 'ant-design-vue'
  32. import { GloabalDataProps } from '@/store'
  33. export default defineComponent({
  34.   name: 'user-profile',
  35.   components: {
  36.     UserOutlined,
  37.   },
  38.   props: {
  39.     user: {
  40.       type: Object,
  41.       required: true,
  42.     },
  43.   },
  44.   setup(props) {
  45.     const store = useStore<GloabalDataProps>()
  46.     const router = useRouter()
  48.     //登录
  49.     const login = () => {
  50.       console.log()
  51.       store.commit('login')
  52.       message.success('登录成功')
  53.     }
  55.     //登出
  56.     const logout = () => {
  57.       store.commit('logout')
  58.       message.success('退出登录成功，2秒后跳转到首页', 2)
  59.       setTimeout(() => {
  60.         router.replace('/')
  61.       }, 2000)
  62.     }
  64.     return {
  65.       user: props.user.user as UserProps,
  66.       login,
  67.       logout,
  68.     }
  69.   },
  70. })
  71. </script>
  72. <style lang="less" scoped>
  73. .user-profile-dropdown {
  74.   border-radius: 2px !important;
  75. }
  76. .user-operation > * {
  77.   margin-left: 30px !important;
  78. }
  79. </style>