小酷AI-教材

src/common/images/icon_search.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.399879092" stroke-linejoin="round">
+        <g id="67、小酷AI" transform="translate(-1507.000000, -138.000000)" stroke="#2089FF" stroke-width="1.81438256">
+            <g id="编组-17" transform="translate(1495.000000, 126.000000)">
+                <g id="搜索" transform="translate(12.000000, 12.000000)">
+                    <path d="M7.53172346,13.9386396 C11.0702243,13.9386396 13.9384469,11.0703739 13.9384469,7.53181981 C13.9384469,3.99444998 11.0702243,1.125 7.53172346,1.125 C3.99440683,1.125 1.125,3.99444998 1.125,7.53181981 C1.125,11.0703739 3.99440683,13.9386396 7.53172346,13.9386396 Z" id="Stroke-1"></path>
+                    <line x1="12.138051" y1="12.1379798" x2="16.5200841" y2="16.5203156" id="Stroke-3" stroke-linecap="round"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/TheSearch/index.module.less

@@ -0,0 +1,7 @@
+.TheSearch{
+ :global{
+    .n-input-wrapper{
+        padding-right: 4Px;
+    }
+ }   
+}

src/components/TheSearch/index.tsx

@@ -0,0 +1,40 @@
+import { PropType, defineComponent, reactive } from 'vue';
+import styles from './index.module.less';
+import { InputProps, NButton, NIcon, NImage, NInput } from 'naive-ui';
+import icon_search from '/src/common/images/icon_search.svg';
+
+export default defineComponent({
+  name: 'TheSearch',
+  props: {
+    /** 圆角 */
+    round: {
+      type: Boolean as PropType<InputProps['round']>,
+      default: false
+    }
+  },
+  emits: ['search'],
+  setup(props, { emit }) {
+    const searchData = reactive({
+      value: ''
+    });
+    return () => (
+      <NInput
+        class={styles.TheSearch}
+        round={props.round}
+        v-model={searchData.value}>
+        {{
+          prefix: () => <img src={icon_search} />,
+          suffix: () => (
+            <NButton
+              size="small"
+              round
+              type="primary"
+              onClick={() => emit('search', searchData.value)}>
+              搜索
+            </NButton>
+          )
+        }}
+      </NInput>
+    );
+  }
+});

src/components/layout/modals/silderItem.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, ref, watch } from 'vue';
+import { defineComponent, ref, watch } from 'vue';
 import styles from '../index.module.less';
 import { NImage } from 'naive-ui';
 import radiusIcon from '../images/radiusIcon.png';

src/router/routes/index.ts

@@ -44,7 +44,15 @@ export const constantRoutes: RouteRecordRaw[] = [
         name: 'xiaoku-ai',
         component: () => import('@/views/xiaoku-ai/index'),
         meta: {
-          title: '小酷AI',
+          title: '小酷AI'
+        }
+      },
+      {
+        path: '/xiaoku-music',
+        name: 'xiaoku-music',
+        component: () => import('@/views/xiaoku-music/index'),
+        meta: {
+          title: '曲谱库'
         }
       }
     ]

src/styles/index.less

@@ -53,23 +53,23 @@ body {
 }
 
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 12px;
+  width: 8Px;
+  height: 12Px;
   background-color: #fff;
 }
 
 ::-webkit-scrollbar-thumb {
   display: block;
-  min-height: 12px;
-  min-width: 8px;
-  border-radius: 6px;
+  min-height: 12Px;
+  min-width: 8Px;
+  border-radius: 6Px;
   background-color: rgb(217, 217, 217);
 }
 
 ::-webkit-scrollbar-thumb:hover {
   display: block;
-  min-height: 12px;
-  min-width: 8px;
-  border-radius: 6px;
+  min-height: 12Px;
+  min-width: 8Px;
+  border-radius: 6Px;
   background-color: rgb(159, 159, 159);
 }

src/views/xiaoku-ai/image/index.tsx

@@ -0,0 +1,5 @@
+const icons = import.meta.glob("./*", { import: "default", eager: true });
+export const getImage = (name: string) => {
+    const src = icons[`./${name}`] as unknown as string || ''
+	return src;
+};

src/views/xiaoku-ai/index.module.less

@@ -0,0 +1,78 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    background: #FFFFFF;
+    border-radius: 20Px;
+    height: 100%;
+}
+
+.tools {
+    padding: 32Px 32px 20px 32px;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    :global {
+        .n-input {
+            margin-left: auto;
+            width: 361Px;
+        }
+    }
+}
+
+.content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20Px 36Px 36Px 36Px;
+}
+
+.item {
+    position: relative;
+    width: 214Px;
+    cursor: pointer;
+    transition: all .3s;
+
+    .cover {
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 107Px;
+            left: 0;
+            width: 214Px;
+            height: 214Px;
+            background: #DDF2FF;
+            border-radius: 50%;
+        }
+    }
+
+    &:hover {
+        transform: scale(1.1);
+    }
+
+    .itemImg {
+        position: relative;
+        width: 158Px;
+        height: 223Px;
+        margin: auto;
+        background-color: antiquewhite;
+
+
+        :global {
+            .n-image {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    .itemName{
+        margin-top: 16Px;
+        font-size: 16Px;
+        font-weight: 500;
+        color: #333;
+        text-align: center;
+    }
+}

src/views/xiaoku-ai/index.tsx

@@ -1,8 +1,84 @@
-import { defineComponent } from "vue";
+import {
+  TransitionGroup,
+  defineComponent,
+  onMounted,
+  reactive,
+  ref
+} from 'vue';
+import styles from './index.module.less';
+import TheSearch from '@/components/TheSearch';
+import { NButton, NImage, NSpace } from 'naive-ui';
+import { getImage } from './image';
+import { useRouter } from 'vue-router';
 
 export default defineComponent({
-    name: 'XiaokuAi',
-    setup(){
-        return () => <div></div>
-    }
-})
+  name: 'XiaokuAi',
+  setup() {
+    const router = useRouter();
+    const data = reactive({
+      tags: [
+        { name: '全部', id: 0 },
+        { name: '人教版', id: 1 },
+        { name: '声部训练', id: 2 },
+        { name: '小曲目', id: 3 },
+        { name: '考级曲目', id: 4 }
+      ],
+      tagIndex: 0,
+      list: [
+        {
+          name: '一年级上册人教版（2013版）',
+          src: ''
+        }
+      ]
+    });
+    return () => (
+      <div class={styles.container}>
+        <div class={styles.tools}>
+          <div class={styles.tags}>
+            <NSpace size={[24, 12]}>
+              {data.tags.map((item, index) => (
+                <NButton
+                  round
+                  secondary={data.tagIndex !== index}
+                  type={data.tagIndex === index ? 'primary' : 'default'}
+                  class={[
+                    styles.tag,
+                    data.tagIndex === index ? styles.active : ''
+                  ]}
+                  onClick={() => (data.tagIndex = index)}>
+                  {item.name}
+                </NButton>
+              ))}
+            </NSpace>
+          </div>
+          <TheSearch round />
+        </div>
+        <div class={styles.content}>
+          <NSpace size={[50, 40]}>
+            {new Array(30).fill(data.list[0]).map((item, index) => {
+              const _index = index > 5 ? index % 5 : index;
+              return (
+                <div
+                  class={styles.item}
+                  key={`item-${index}`}
+                  onClick={() => router.push({ path: '/xiaoku-music' })}>
+                  <div class={styles.cover}>
+                    <div class={styles.itemImg}>
+                      <NImage
+                        objectFit="contain"
+                        src={getImage(`${_index}.png`)}
+                        lazy
+                        previewDisabled={true}
+                      />
+                    </div>
+                  </div>
+                  <div class={styles.itemName}>{item.name}</div>
+                </div>
+              );
+            })}
+          </NSpace>
+        </div>
+      </div>
+    );
+  }
+});

src/views/xiaoku-music/index.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    name: 'XiaokuMusic',
+    setup(){
+        return () => <div>music</div>
+    }
+})

tsconfig.json

@@ -19,6 +19,7 @@
       "node"
     ],
     "paths": {
+      "/src/*": ["src/*"],
       "@/*": ["src/*"],
       "@common/*": ["src/common/*"],
       "@components/*": ["src/components/*"],

vite.config.ts

@@ -13,6 +13,7 @@ function resolve(dir: string) {
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
 export default defineConfig({
+  base: './',
   plugins: [
     vue(),
     vueJsx(),