# cms-demo

**Repository Path**: chen_quan_jie/cms-demo

## Basic Information

- **Project Name**: cms-demo
- **Description**: demo
1231231231
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-08-16
- **Last Updated**: 2025-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# primary-layout

### 请求使用

1. 在`apis/modules/`目录下创建请求文件 如`user.ts`

```typescript
import type { ApiRequest } from '@/types/apis.d'
import type { IUser } from '@/types/user'
import { request } from '../index'

export const list = (params?: ApiRequest['user.list']) => request.get<'user.list', IUser[]>('users', params)
```

2. Vue 文件中使用

```js
import { onMounted, ref } from 'vue'
import type { IUser } from './types/user'
import apis from '@/apis'

const dataSource = ref<IUser[]>([])

const getTableList = () => {
  apis.user.list().then((res) => {
    dataSource.value = res.data as IUser[]
  })
}

onMounted(() => {
  getTableList()
})
```

```vue
<template>
  <div class="flex flex-col items-center justify-center w-screen h-screen gap-10 bg-gray-200">
    <div class="flex items-center justify-center gap-10">
      <router-link to="/editor" class="ant-btn ant-btn-primary">编辑器</router-link>
      <router-link to="/example" class="ant-btn ant-btn-primary">组件库</router-link>
    </div>
    <div class="flex flex-col items-center justify-center">
      <ColorPicker
        is-widget
        v-model:gradientColor="gradientColor"
        v-model:pure-color="pureColor"
        picker-type="chrome"
        format="rgb"
        disable-history
      />
      <div class="flex items-center py-6 gap-x-4">
        <strong>Current Color</strong>
        <span :style="{ color: pureColor }">{{ pureColor }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ColorPicker, type ColorPickerProps } from 'vue3-colorpicker'
import 'vue3-colorpicker/style.css'
const pureColor = ref('rgba(22, 93, 255, 0.82)')
const gradientColor = ref('linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)')
</script>

<style lang="less">
.vc-hue-slider__bar {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background-image: -webkit-linear-gradient(
    left,
    red 0%,
    yellow 16.66%,
    lime 33.33%,
    aqua 50%,
    blue 66.66%,
    fuchsia 83.33%,
    red 100%
  ) !important;
}

.vc-chrome-colorPicker-body .chrome-controls {
  flex-direction: row-reverse;
  column-gap: 16px;
}

.vc-current-color {
  width: 0 !important;
  overflow: hidden;
  display: none !important;
}
.chrome-sliders {
  margin-left: 0 !important;
}
.vc-display {
  justify-content: space-between;
  .vc-color-input {
    width: 68px;
    flex: none !important;
    position: relative;
    margin-left: 10px;

    &::before {
      position: absolute;
      content: '#';
      left: -10px;
      top: 50%;
      transform: translateY(-50%);
    }

    &::after {
      content: '';
      flex: 1;
    }
  }
}

.vc-alpha-input {
  margin-left: auto;
}
</style>
```

```ts
export const iconsNames: Record<string, string> = {
  adv_banner: '横幅广告',
  adv_beforePlaying: '播放前广告',
  adv_carousel: '轮播广告',
  adv_floatingLayer: '底部浮层广告',
  adv_popup: '弹窗广告',
  adv_suspend: '暂停广告',
  comp_briefIntroduction: '简介',
  comp_anthology: '选集',
  comp_appBar: '顶部搜索栏',
  comp_titleBar: '标题栏',
  comp_articleList: '文章列表',
  comp_articleSettings: '文章设置',
  comp_atlasList: '图集列表',
  comp_albumVideoList: '专辑视频列表',
  comp_bottomFunction: '底部功能',
  comp_briefIntroductionContent: '简介内容',
  comp_bulletinBoard: '公告栏',
  comp_categoriesGrid: '分类宫格',
  comp_categoriesTags: '分类标签',
  comp_categoriesVideoList: '分类视频列表',
  comp_collectionReading: '收藏阅读',
  comp_filmRating: '影片评分',
  comp_filterCriteria: '筛选条件',
  comp_filterResultList: '筛选结果列表',
  comp_filterTabBar: '筛选标签栏',
  comp_filterTabStyle: '筛选标签样式',
  comp_fixedVideoList: '固定视频列表',
  comp_freeAtlas: '免费图集',
  comp_hotAtlas: '热门图集',
  comp_guessYouLike: '猜你喜欢',
  comp_hottestVideoList: '最热视频列表',
  comp_latestVideoList: '最新视频列表',
  comp_moreVideoList: '更多视频列表',
  comp_movieList: '影人列表',
  comp_participatingWorks: '参与作品',
  comp_playCount: '播放次数',
  comp_popularAtlas: '收费图集',
  comp_searchBar: '顶部搜索栏',
  comp_tabs: '选项卡',
  comp_topFunction: '顶部功能',
  comp_videoList: '视频列表',
  global_setting: '全局设置'
}
```

```ts
export const viewsNames: Record<string, string> = {
  // 1、演员详情  2、演员详情-展开
  ActorIntroduction: '演员详情页面',
  // 1、详情  2、购买
  AtlasDetail: '图集详情页',
  // 1、筛选样式  2、更多
  AtlasList: '图集分类列表',
  AtlasView: '图集首页',
  ChangePassword: '修改密码',
  ConsumerDetails: '消费明细',
  ContactService: '联系客服',
  // 1、目录-倒序  2、目录-正序  3、夜间-目录-倒序  4、夜间-目录-正序
  FictionCatalog: '文章目录',
  GameView: '游戏',
  GoldCoinRecharge: '金币充值',
  // 1、首页-推荐  2、首页-最新  3、首页-最热  4、首页-分类样式   6、影人   7、发布成功  8、发布失败
  HomeView: '首页',
  InviteFriends: '邀请好友',
  // 1、默认   2、输入后密码不可见  3、输入后密码可见   4、勾选提示   5、已勾选提示
  LoginView: '登录页',
  // 1、绑定邮箱  2、修改邮箱  3、修改邮箱2  4、修改手机号
  MailView: '个人资料-邮箱',
  // 1、未登录  2、未开通会员  3、已是会员  4、支付页
  MemberView: '会员',
  MineView: '我的',
  // 1、更多  2、演员更多作品
  MoreVideos: '视频列表更多页',
  MyPurchases: '我的购买',
  // 1、小说详情  2、购买
  NovelDetails: '文章详情页',
  // 1、分类列表  2、最新
  NovelList: '文章分类列表',
  NovelView: '文章首页',
  OpenMember: '开通会员',
  // 1、个人资料  2、头像  3、昵称  4、性别  5、修改生日  6、修改所在地
  PersonalView: '个人资料',
  PlayNumber: '视频简介页面',
  // 1、电视剧  2、选集首页板块  3、电影首页板块  4、综艺首页板块   5、更多首页板块  6、收费视频-购买   7、收费视频-试看样式一   8、收费视频-试看样式二   9、分享
  PlayerView: '视频播放页',
  // 1、全屏  2、功能  3、进度  4、设置  5、跟随系统、其他背景  6、点赞提示  7、收藏提示  8、点赞收藏取消提示  9、夜间  10、夜间-进度   11、夜间-设置
  ReadNovel: '文章功能页',
  // 1、一键注册  2、保存图片  3、保存图片-成功提示  4、手动截图-提示（H5）  5、注册成功后（H5）
  RegisterView: '一键注册',
  // 1、找回密码  2、找回密码-输入后  3、验证后-设置新密码
  RetrievePassword: '找回密码',
  // 1、默认  2、匹配  3、视频  4、小说  5、图集
  SearchView: '搜索页',
  SystemSettings: '系统设置',
  VideoFilter: '视频筛选样式页',
  // 1、影视  2、编辑  3、编辑选中  4、小说  5、图集
  WatchHistory: '观看历史'
}
```

```ts
{
  categoriesTags(分类标签)————————————CmsHeaderTabbar
  searchBar(顶部搜索栏)————————————CmsSearchBar
  bulletinBoard(公告栏)———————————CmsNoticeBar
  booksArea(小说和图集区域)—————————CmsAtlasArea
  latestVideoList(最新视频列表)————————CmsGridView(type=1)
  hottestVideoList(最热视频列表)————————CmsGridView(type=3)
  categoriesVideoList(分类视频列表)————————CmsScrollGrid(type=1)
  albumVideoList(专辑视频列表)——————————CmsGridView(type=1)
  fixedVideoList(固定视频列表)——————————CmsGridView(type=1)
  moreVideoList(更多视频列表)——————————CmsCardView(type=2)
  filterTabBar(影人筛选标签栏)——————————CmsFilmmakersFilter
  movieList(影人列表)——————————CmsStarGrid(type=1)
  bottomBar(底部标签栏)—————————CmsBottomBar
  headerTitle(顶部标题)————————CmsVideoHeader
  filterCriteria(筛选条件)————————CmsFilterView(type=1)
  filterResultList(筛选结果列表)————————CmsGridView(type=2)
  videoList(视频列表)—————————CmsGridView(type=3,showTitle(不显示标题),moreShow(不显示更多))
  playerVideo(播放器)————————CmsPlayerView(type=1)
  videoInfo(视频信息发布、热度、收藏等)————————CmsVideoIntroduction(type=1)
  playLines(播放线路)————————CmsPlayerLines(componentType=1)
  playLanguages(播放语言)——————CmsPlayerLines(componentType=2)
  anthology(选集)————————CmsSelectWorks(type=1)
  guessYouLike(猜你喜欢)————————CmsGridView(type=2,title="猜你喜欢")
  bottomFunction(底部功能)————————CmsBottomFunction(type=1)
  videoIntroductionHeader(视频简介播放)————————CmsVideoView
  videoName(视频简介名称)————————CmsVideoName
  filmRating(影片评分)——————————CmsScoreView(type=1)
  playCount(播放次数)——————————CmsVideoNumber
  videoLabel(视频标签)——————————CmsVideoLabel
  videoRelatedActors(视频相关演员)——————————CmsActorList
  movieIntroduction(影片简介)——————————CmsPlayerVideoIntroduction
  actorAvatar(演员头像)——————————CmsActorAvatar
  briefIntroduction(简介)—————————CmsActorDescription
  participatingWorks(参与作品)————————CmsActorWorks(电视剧更多)、CmsScrollGrid(type=1,电影、综艺)
  tabs(选项卡)——————————TabCardView(type=1)
  titleBar(标题栏)————————CmsVideoHeader
  categoriesGrid(分类宫格)——————————CmsCategoryGrid(type=1)
  articleList(文章列表)——————————CmsNovelGrid(type=1)
  filterArticleList(筛选文章列表)—————————CmsNovelList(type=1)
  novelCover(小说封面)—————————CmsArticleImg
  novelCategoriesTags(小说分类标签)—————————CmsArticleTags(type=1)
  articleState(小说连载状态)—————————CmsArticleState
  briefIntroductionContent(简介内容)—————————CmsArticleIntroduction(type=1)
  collectionReading(收藏阅读)————————CmsFavoritesRead(type=1)
  articleSettings(文章设置)—————————CmsArticleSetting(type=1)
  freeAtlas(免费图集)————————CmsRecommendGrid(type=1)
  hotAtlas(热门图集)————————CmsRecommendGrid(type=1)
  atlasFilterResultList(图集筛选结果列表)——————————CmsAtlasLsit(type=1)
  atlasList(图集列表)—————————CmsAtlasLsit(type=1)
  topFunction(顶部功能)—————————CmsTopFunction(type=1)
  suspend(暂停广告)————————CmsSuspendAdv
  popup(弹窗广告)——————————CmsPopupAdv
  floatingLayer(底部浮层广告)—————————CmsFloatingAdv
  carousel(轮播广告)————————CmsRotationView
  beforePlaying(播放前广告)—————————CmsBeforePlayingAdv
  banner(横幅广告)————————CmsSuspendAdv
}
```