很久以后得整理

.env

@@ -1,3 +1,4 @@
 # 网易云音乐API地址
-VITE_NETEASECLOUD_API = http://localhost:3300
+# VITE_NETEASECLOUD_API = http://localhost:3300
+VITE_NETEASECLOUD_API = http://175.178.45.26:7082/
   

.env.development

@@ -1,3 +1,3 @@
 # 网易云音乐API地址
-VITE_NETEASECLOUD_API = http://localhost:3300
+# VITE_NETEASECLOUD_API = http://localhost:3300
 

electron/electron.js

@@ -6,13 +6,13 @@ let exec = require('child_process').exec;
 const isDev = process.env.IS_DEV == "true" ? true : false;
 
 //计算NMApi路径
-let NMApiPath = isDev ? '../NMApi.asar' : path.join(process.resourcesPath, 'NMApi.asar')
-let p = require('path').join(NMApiPath + '/node_modules');
-require('module').globalPaths.unshift(p); //加入到module的路径列表
+// let NMApiPath = isDev ? '../NMApi.asar' : path.join(process.resourcesPath, 'NMApi.asar')
+// let p = require('path').join(NMApiPath + '/node_modules');
+// require('module').globalPaths.unshift(p); //加入到module的路径列表
 
-console.log(process.resourcesPath, NMApiPath)
-let svc
-if(!isDev)svc = require(NMApiPath + '/app.js')
+// console.log(process.resourcesPath, NMApiPath)
+// let svc
+// if(!isDev)svc = require(NMApiPath + '/app.js')
 
 function createWindow() {
   // Create the browser window.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zmusic",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "author": "zlyum",
   "main": "electron/electron.js",
   "scripts": {
@@ -30,6 +30,7 @@
     "mockjs": "^1.1.0",
     "pubsub-js": "^1.9.3",
     "spark-md5": "^3.0.2",
+    "styled-components": "^5.3.3",
     "unplugin-vue-components": "^0.15.6",
     "vue": "^3.2.16",
     "vue-router": "^4.0.0-0",
@@ -38,7 +39,9 @@
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@tauri-apps/cli": "^1.2.2",
     "@vitejs/plugin-vue": "^1.9.3",
+    "@vitejs/plugin-vue-jsx": "^1.3.3",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
@@ -51,14 +54,14 @@
     "concurrently": "^6.3.0",
     "cross-env": "^7.0.3",
     "electron": "^15.1.2",
-    "electron-builder": "^22.13.1",
+    "electron-builder": "^23.0.1",
     "electron-devtools-installer": "^3.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.0.0",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
-    "naive-ui": "^2.24.5",
+    "naive-ui": "^2.33.0",
     "postcss": "^8.4.5",
     "prettier": "^2.2.1",
     "svg-sprite-loader": "^6.0.11",
@@ -83,12 +86,7 @@
       "dist/**/*",
       "electron/**/*"
     ],
-    "extraResources": [
-      {
-        "from": "NMApi.asar",
-        "to": ""
-      }
-    ],
+    "extraResources": [],
     "directories": {
       "buildResources": "assets",
       "output": "dist_electron"

src-tauri/.gitignore

@@ -1,4 +1,3 @@
 # Generated by Cargo
 # will have compiled files and executables
 /target/
-WixTools

src-tauri/Cargo.toml

@@ -6,19 +6,23 @@ authors = ["you"]
 license = ""
 repository = ""
 default-run = "app"
-edition = "2018"
-build = "src/build.rs"
+edition = "2021"
+rust-version = "1.59"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [build-dependencies]
-tauri-build = { version = "1.0.0-beta.4" }
+tauri-build = { version = "1.2.1", features = [] }
 
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.0.0-beta.8", features = ["api-all"] }
+tauri = { version = "1.2.2", features = ["api-all", "devtools"] }
 
 [features]
+# by default Tauri runs in production mode
+# when `tauri dev` runs it is executed with `cargo run --no-default-features` if `devPath` is an URL
 default = [ "custom-protocol" ]
+# this feature is used for production builds where `devPath` points to the filesystem
+# DO NOT remove this
 custom-protocol = [ "tauri/custom-protocol" ]

src-tauri/rustfmt.toml

@@ -1,14 +0,0 @@
-max_width = 100
-hard_tabs = false
-tab_spaces = 2
-newline_style = "Auto"
-use_small_heuristics = "Default"
-reorder_imports = true
-reorder_modules = true
-remove_nested_parens = true
-edition = "2018"
-merge_derives = true
-use_try_shorthand = false
-use_field_init_shorthand = false
-force_explicit_abi = true
-imports_granularity = "Crate"

src-tauri/tauri.conf.json

@@ -1,19 +1,27 @@
 {
+  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
+  "build": {
+    "beforeBuildCommand": "yarn build:for:electron",
+    "beforeDevCommand": "yarn dev",
+    "devPath": "http://localhost:3301",
+    "distDir": "../dist"
+  },
   "package": {
     "productName": "zmusic",
     "version": "0.1.0"
   },
-  "build": {
-    "distDir": "Injected by vite-plugin-tauri",
-    "devPath": "Injected by vite-plugin-tauri",
-    "beforeDevCommand": "",
-    "beforeBuildCommand": ""
-  },
   "tauri": {
+    "allowlist": {
+      "all": true
+    },
     "bundle": {
       "active": true,
-      "targets": "all",
-      "identifier": "com.tauri.dev",
+      "category": "DeveloperTool",
+      "copyright": "",
+      "deb": {
+        "depends": []
+      },
+      "externalBin": [],
       "icon": [
         "icons/32x32.png",
         "icons/128x128.png",
@@ -21,47 +29,41 @@
         "icons/icon.icns",
         "icons/icon.ico"
       ],
-      "resources": [],
-      "externalBin": [],
-      "copyright": "",
-      "category": "DeveloperTool",
-      "shortDescription": "",
+      "identifier": "com.zlyum.zmusic",
       "longDescription": "",
-      "deb": {
-        "depends": [],
-        "useBootstrapper": false
-      },
       "macOS": {
-        "frameworks": [],
-        "minimumSystemVersion": "",
-        "useBootstrapper": false,
+        "entitlements": null,
         "exceptionDomain": "",
-        "signingIdentity": null,
-        "entitlements": null
+        "frameworks": [],
+        "providerShortName": null,
+        "signingIdentity": null
       },
+      "resources": [],
+      "shortDescription": "",
+      "targets": "all",
       "windows": {
         "certificateThumbprint": null,
         "digestAlgorithm": "sha256",
         "timestampUrl": ""
       }
+    },
+    "security": {
+      
     },
     "updater": {
       "active": false
     },
-    "allowlist": {
-      "all": true
-    },
     "windows": [
       {
-        "title": "zmusic",
-        "width": 800,
+        "fullscreen": false,
         "height": 600,
         "resizable": true,
-        "fullscreen": false
+        "title": "zmusic",
+        "width": 800,
+        "minWidth": 800,
+        "minHeight": 600
+        
       }
-    ],
-    "security": {
-      "csp": "default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'"
-    }
+    ]
   }
 }

src/App.vue

@@ -259,7 +259,7 @@ button.n-button{
   display: flex;
   flex-direction: column;
   height: 100vh;
-  user-select: none;
+  // user-select: none;
   #top {
     height: 40px;
     display: flex;

src/components/svgIcon.vue

@@ -36,5 +36,6 @@ const svgClass = computed(()=> {
   height: 1em;
   fill: currentColor;
   vertical-align: middle;
+  overflow: hidden;
 }
 </style>

src/router/index.js

@@ -75,6 +75,7 @@ const routes = [
         path: "v",
         name: "videos.v",
         component: () => import("../views/videos/V.vue"),
+        // component: () => import("../views/videos/V.jsx"),
       },
       {
         path: "mv",

src/views/common/Nav.vue

@@ -11,16 +11,22 @@ const router = useRouter()
   <NSpace id="nav" justify="end">
     <n-button circle size="small" @click="router.back()" >
       <template #icon>
-        <n-icon>
+        <!-- <n-icon>
           <ChevronBack />
-        </n-icon>
+        </n-icon> -->
+        <!-- <n-icon> -->
+          <svg-icon name="ChevronBack" class="" />
+        <!-- </n-icon> -->
       </template>
     </n-button>
     <n-button circle size="small" @click="router.forward()">
       <template #icon>
-        <n-icon>
+        <!-- <n-icon>
           <ChevronForward />
-        </n-icon>
+        </n-icon> -->
+        <!-- <n-icon> -->
+          <svg-icon name="ChevronForward" class="" />
+        <!-- </n-icon> -->
       </template>
     </n-button>
   </NSpace>

src/views/common/SongCtrl.vue

@@ -101,7 +101,7 @@ const play = async (id, im = true) => {
   await getSongUrl(id)
     .then((res) => {
       if (null !== res.data.data[0].url) {
-        audioEl.value.src = res.data.data[0].url;
+        audioEl.value.src = res.data.data[0].url.replace('http://', 'https://');
         store.commit("saveSettings", {
           songId: id,
         });

src/views/discover/Recommend.vue

@@ -12,7 +12,7 @@
         v-for="(b, idx) in banners"
         :key="idx"
       >
-        <img class="carousel-img" :src="b.imageUrl" @click="clickBanner(b.targetId, b.targetType)" />
+        <img class="carousel-img" :src="b.imageUrl.replace('http://', 'https://')" @click="clickBanner(b.targetId, b.targetType)" />
         <span class="title">{{ b.typeTitle }}</span>
       </div>
     </n-carousel>
@@ -44,7 +44,7 @@
         >
           <div class="c2-list">
             <div class="play-btn"  @click="play(song.id)">
-              <img v-lazy="song.album.blurPicUrl" />
+              <img v-lazy="song.album.blurPicUrl.replace('http://', 'https://')" />
               <n-button
                 text
                 class="start-play-bg"
@@ -99,30 +99,39 @@
       推荐MV 
       <svg-icon name="ChevronForward" class="mx-1" />
     </div>
-    <div class=" mt-1 grid grid-cols-4 gap-5">
+    <div class="mt-1 grid grid-cols-4 gap-4">
       <div 
         v-for="(mv, idx) in personalizedMV"
         :key="mv.id"
         class=" border border-gray-200 rounded-md
         "
       >
-        <div class="relative">
-          <img :src="mv.picUrl" class="rounded-t-md object-cover xs:h-14 sm:h-16 md:h-20 w-full" />
-          <div class="m-1 h-7 w-7 bg-white bg-opacity-70 
+        <div class="relative group cursor-pointer">
+          <img :src="mv.picUrl" class="rounded-t-md object-cover w-full aspect-video" />
+          <div class="w-full aspect-video flex justify-center items-center  absolute top-0 pt-2 group-hover:visible invisible">
+            <div class="rounded-full bg-white/75 w-7 h-7 md:w-9 md:h-9"></div>
+          </div>
+          <div class="w-full aspect-video flex justify-center items-center  absolute top-0 pt-2 pl-[3px] md:pl-[5px] group-hover:visible invisible">
+            <svg-icon name="Play" class="text-xl md:text-3xl" :style="{
+              color: store.state.theme.themeOverrides.common.primaryColor,
+            }" />
+          </div>
+          <!-- <div class="m-1 h-7 w-7 bg-white bg-opacity-70 
           absolute bottom-0 right-0
-          rounded-full"></div>
-          <div class="
+          rounded-full
+          group-hover:visible invisible"></div>
+          <div class="group-hover:visible invisible
             text-xl
-            absolute
+            absolute right-[6px] bottom-[8px]
             flex items-center"
             :style="{
               color: store.state.theme.themeOverrides.common.primaryColor,
-              bottom: 8 + 'px',
-              right: 2 + 'px',
+              //bottom: 8 + 'px',
+              //right: 2 + 'px',
             }"
           >
-            <svg-icon name="Play" class="mx-1" />
-          </div>
+            <svg-icon name="Play" class="" />
+          </div> -->
           
         </div>
         <div class="mx-1 mt-1 text-gray-800 text-sm truncate">
@@ -195,8 +204,30 @@
         </n-grid-item>
       </n-grid>
     </div> -->
+    <!-- tailwind 推荐MV -->
+    <div class="
+      mt-4
+      text-xl
+      flex items-center"
+      :style="{
+        color: store.state.theme.themeOverrides.common.primaryColor,
+      }"
+    >
+      推荐歌单 
+      <svg-icon name="ChevronForward" class="mx-1" />
+    </div>
+     <div class=" mt-1 grid grid-cols-4 gap-4">
+       <div v-for="p in personalized" :key="p.id"
+        class="rounded-md border border-gray-200"
+       >
+         <img :src="p.picUrl" class="rounded-t-md object-cover aspect-square" />
+         <div class="m-1 text-sm text-gray-500 card-span">
+           {{ p.name }}
+         </div>
+       </div>
+     </div>
     <!-- 推荐歌单 -->
-    <div>
+    <!-- <div>
       <n-button
         text
         icon-placement="right"
@@ -230,7 +261,7 @@
           </n-card>
         </n-grid-item>
       </n-grid>
-    </div>
+    </div> -->
   </div>
 </template>
 

src/views/videos/V.jsx

@@ -0,0 +1,61 @@
+import { withModifiers, defineComponent, ref } from "vue";
+import styled from "vue3-styled-components";
+
+// const V = defineComponent({
+//   setup() {
+//     const count = ref(0);
+
+//     const inc = () => {
+//       count.value++;
+//     };
+
+//     return () => (
+//       <div onClick={inc}>{count.value}</div>
+//     );
+//   },
+// });
+const wp = styled.div`
+  color: red;
+  font-size: 32px;
+`
+
+const V = {
+  setup(){
+    const desc = ref('说明测试哈啊哈')
+    return {desc}
+  },
+  data() {
+    return { 
+      visible: true,
+      title: '这是一个标题测试',
+    };
+  },
+  mounted(){
+    console.log('mounted');
+  },
+  render() {
+    const clsBtn = `px-4 py-1 text-sm text-purple-600 font-semibold 
+    rounded-full border border-purple-200 
+    hover:text-white hover:bg-purple-600 hover:border-transparent 
+    focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2`
+    return <>
+            <div>{this.title}<br/>
+            {this.desc}<br/>
+            {this.visible.toString()}</div>
+            <input 
+              className=" p-1 rounded text-xs border" 
+              vShow={this.visible} 
+              vModel={this.title}
+            />
+            <button className={clsBtn}>
+              按钮
+            </button>
+            <div className={`px-4 py-1 text-sm text-purple-600`}>
+              class测试
+            </div>
+            <wp>这是一个测试div</wp>
+          </>;
+  },
+};
+
+export default V;

src/views/videos/V.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { NButton, NSpace, NIcon } from "naive-ui";
 import PlayCircle from '@/assets/svgs/PlayCircle.svg'
+import ChevronForward from "@/assets/svgs/ChevronForward.svg";
 import {ref} from 'vue'
 import sparkMD from 'spark-md5' 
 import CryptoJS from 'crypto-js';
@@ -58,9 +59,32 @@ const fileChange = (e) => {
 
 </script>
 <template>
-  <div>
-    
-  </div>
+  <n-button circle>
+    <template #icon>
+      <svg-icon name="HeartOutline" />
+    </template>
+  </n-button>
+  <n-button
+        text
+        icon-placement="right"
+        size="large"
+        type="primary"
+        style="font-size: 1.3em; margin-top: 6px"
+      >
+        <template #icon>
+          <n-icon>
+            <svg-icon name="ChevronForward" class="" />
+          </n-icon>
+        </template>
+        最新音乐
+      </n-button>
+  
+  <svg-icon name="Play" class="text-xl md:text-3xl text-blue-500" />
+  <svg-icon name="ChevronForward" class="mx-1 text-orange-500" />
+  <n-icon class=" text-red-500">
+    <PlayCircle />
+  </n-icon>
+
 </template>
 
 <script>
@@ -69,4 +93,4 @@ export default {};
 
 <style lang="less" scoped>
 
-</style>>
+</style>

tailwind.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  // mode:'jit',
   content: [
     // Example content paths...
     './index.html',

vite.config.js

@@ -3,6 +3,7 @@ import vue from '@vitejs/plugin-vue'
 import path from 'path'
 import svgLoader from 'vite-svg-loader'
 import { svgBuilder } from './src/plugins/svgBuilder'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,8 +12,16 @@ export default defineConfig({
       '@': path.resolve(__dirname, '/src'),
     },
   },
-  base: process.env.ELECTRON=="true" ? './' : "",
-  plugins: [vue(), svgLoader(), svgBuilder('./src/assets/svgs/')],
+  // base: process.env.ELECTRON=="true" ? './' : "",
+  base: './' ,
+  plugins: [
+    vue(),
+    vueJsx({
+      // options are passed on to @vue/babel-plugin-jsx
+    }),
+    svgLoader(), 
+    svgBuilder('./src/assets/svgs/')
+  ],
   // server:{
   //   fs:{
   //     strict: false,