diff --git a/package.json b/package.json
index f756b5f..8031ca6 100644
--- a/package.json
+++ b/package.json
@@ -20,11 +20,15 @@
   "dependencies": {
     "axios": "^0.22.0",
     "core-js": "^3.6.5",
+    "crypto-js": "^4.1.1",
     "dayjs": "^1.10.7",
     "element-plus": "^1.1.0-beta.19",
     "hotkeys-js": "^3.8.7",
+    "js-sha256": "^0.9.0",
     "lodash": "^4.17.21",
+    "mockjs": "^1.1.0",
     "pubsub-js": "^1.9.3",
+    "spark-md5": "^3.0.2",
     "unplugin-vue-components": "^0.15.6",
     "vue": "^3.2.16",
     "vue-router": "^4.0.0-0",
diff --git a/src/components/svgIcon.vue b/src/components/svgIcon.vue
index 6bab4c7..98de933 100644
--- a/src/components/svgIcon.vue
+++ b/src/components/svgIcon.vue
@@ -22,7 +22,7 @@ const props = defineProps({
 
 const iconName = computed(()=>`#icon-${props.name}`);
 const svgClass = computed(()=> {
-  console.log(props.name, 'props.name');
+  // console.log(props.name, 'props.name');
   if (props.name) {
         return `svg-icon icon-${props.name}`
       }
diff --git a/src/views/common/SongDetail.vue b/src/views/common/SongDetail.vue
index f1024ac..9cc360d 100644
--- a/src/views/common/SongDetail.vue
+++ b/src/views/common/SongDetail.vue
@@ -267,6 +267,7 @@ export default {};
         }
         img.cover {
           width: 220px;
+          height: 220px;
           border-radius: 200px;
           position: absolute;
           top: 60px;
diff --git a/src/views/videos/V.vue b/src/views/videos/V.vue
index 58ef48b..4e2eb65 100644
--- a/src/views/videos/V.vue
+++ b/src/views/videos/V.vue
@@ -1,9 +1,64 @@
 <script setup>
 import { NButton, NSpace, NIcon } from "naive-ui";
 import PlayCircle from '@/assets/svgs/PlayCircle.svg'
+import {ref} from 'vue'
+import sparkMD from 'spark-md5'
+import CryptoJS from 'crypto-js';
+import md5 from 'crypto-js/md5'; 
+import sha256 from 'crypto-js/sha256'; 
+import { sha256 as jsSha256, sha224 } from 'js-sha256';
+import { collapseLight } from 'naive-ui/lib/collapse/styles';
+
+const showEditor = ref(false) //是否显示编辑框
+
+const edit = () => {
+  showEditor.value = true
+  console.log('调用edit方法。')
+}
+
+const fileChange = (e) => {
+  let file = e.target.files[0];
+  let fileReader = new FileReader()
+  fileReader.readAsArrayBuffer(file);
+  fileReader.onload = e => {
+    // const s_md5 = sparkMD.hashBinary(e.target.result);
+    // console.log(s_md5,  sparkMD.hashBinary('1111'));
+    // const c_md5 = md5(e.target.result)
+
+    // var wordArray = CryptoJS.lib.WordArray.create(fileReader.result);
+    // let  c_sha256 = sha256(wordArray)
+    // console.log(c_sha256.toString())
+    let s_sha256 = jsSha256(e.target.result)
+    console.log(s_sha256)
+    // let hash = CryptoJS.SHA256(wordArray).toString();
+    // console.log(hash)
+
+    // //将读取结果：文件数据类型：ArrayBuffer 转化 为wordArray格式
+    // var wordArray = CryptoJS.lib.WordArray.create(fileReader.result);
+    // // //直接调用SHA256()并转化得到十六进制字符串（也就是我们要的SHA256）
+    // var hash = CryptoJS.SHA256(wordArray).toString();
+    // console.log(hash)
+  }
+
+  // let files = e.target.files[0];
+  // //生成实例
+  //   let fileReads = new FileReader();
+  // //开始读取文件
+  // fileReads.readAsArrayBuffer(files);
+  // //读取回调
+  // fileReads.onload=function(){
+  //   //将读取结果：文件数据类型：ArrayBuffer 转化 为wordArray格式
+  //   var wordArray = CryptoJS.lib.WordArray.create(fileReads.result);
+  //   //直接调用SHA256()并转化得到十六进制字符串（也就是我们要的SHA256）
+  //   var hash = CryptoJS.SHA256(wordArray).toString();
+  //   console.log(hash)
+  // }
+
+}
+
 </script>
 <template>
-  <NSpace>
+  <!-- <NSpace>
     <NButton>
       <template #icon>
         <n-icon>
@@ -21,11 +76,9 @@ import PlayCircle from '@/assets/svgs/PlayCircle.svg'
       svg-sprite-loader 按钮
     </NButton>
     <NButton text style="font-size: 40px">
-      <!-- <template #icon> -->
         <n-icon>
           <svg-icon name="Dots" />
         </n-icon>
-      <!-- </template> -->
       svg-sprite-loader 按钮
     </NButton>
     <NButton>
@@ -36,11 +89,34 @@ import PlayCircle from '@/assets/svgs/PlayCircle.svg'
       </template>
       svg-sprite-loader 按钮
     </NButton>
-  </NSpace>
+  </NSpace> -->
+  <n-space>
+    <n-button @click="edit">
+      新增
+    </n-button>
+    <n-button>
+      编辑
+    </n-button>
+    <n-button>
+      保存
+    </n-button>
+  </n-space>
+  <div class="edit" v-show="showEditor">
+    <div class="title">标题哈啊哈</div>
+    <div class="content">
+      Content 编辑内容
+    </div>
+    <div class="footer">
+      Footer 尾部
+    </div>
+  </div>
+  <input type="file" id="file" @change="fileChange">
 </template>
 
 <script>
 export default {};
 </script>
 
-<style></style>
+<style lang="less" scoped>
+
+</style>>
diff --git a/yarn.lock b/yarn.lock
index 45f7677..00e9a14 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3298,6 +3298,11 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+commander@*:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
+  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
+
 commander@2.17.x:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
@@ -3636,6 +3641,11 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+crypto-js@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.1.1.tgz#9e485bcf03521041bd85844786b83fb7619736cf"
+  integrity sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==
+
 crypto-random-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
@@ -6641,6 +6651,11 @@ js-queue@2.0.2:
   dependencies:
     easy-stack "^1.0.1"
 
+js-sha256@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/js-sha256/-/js-sha256-0.9.0.tgz#0b89ac166583e91ef9123644bd3c5334ce9d0966"
+  integrity sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -7363,6 +7378,13 @@ mlly@^0.2.2:
   dependencies:
     import-meta-resolve "^1.1.1"
 
+mockjs@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mockjs/-/mockjs-1.1.0.tgz#e6a0c378e91906dbaff20911cc0273b3c7d75b06"
+  integrity sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==
+  dependencies:
+    commander "*"
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -9663,6 +9685,11 @@ sourcemap-codec@^1.4.4:
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
+spark-md5@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/spark-md5/-/spark-md5-3.0.2.tgz#7952c4a30784347abcee73268e473b9c0167e3fc"
+  integrity sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==
+
 spawn-command@^0.0.2-1:
   version "0.0.2-1"
   resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2-1.tgz#62f5e9466981c1b796dc5929937e11c9c6921bd0"