fix(styles): 产品模块 UI 更新

components/common/comment/main.vue

@@ -266,7 +266,7 @@ export default {
         tab: '\t',
         cdn: apiConfig.VDITOR,
         cache: {
-          enable: this.postId ? false : true,
+          enable: !this.postId,
           id: this.postId ? this.postId : '',
         },
         after() {

components/common/product/list.vue

@@ -1,18 +1,30 @@
 <template>
   <div class="wrapper">
     <el-row class="row-cards row-deck" :gutter="20">
-      <el-col :span="8" v-for="product in products.list" :key="product.idProduct" style="margin-right: 20px;">
+      <el-col :span="10" v-for="product in products.list" :key="product.idProduct" style="margin-right: 20px;margin-bottom: 10px;">
         <el-card :body-style="{ padding: '20px' }">
           <el-col :span="24">
             <el-image :src="product.productImgUrl"
                       style="border-radius: 10px;background: #f5f7fa;border: #f5f7fa solid 1px;" fit="cover"></el-image>
           </el-col>
-          <el-col style="padding-top: 20px;font-size: 16px;line-height: 22px;font-weight: 500;margin-bottom: 4px;">
+          <el-col :span="24">
-            <span v-html="product.productTitle"></span>
+            <el-tag
+              style="margin-right: 0.5rem;"
+              v-for="tag in product.tags?.split(',') || []"
+              :key="tag"
+              size="small"
+              effect="plain">
+              # {{ tag }}
+            </el-tag>
           </el-col>
-          <el-col style="padding-top: 30px;text-align: right;">
+          <el-col :span="24" style="font-size: 16px;line-height: 22px;font-weight: 500;margin: 4px 0;text-align: center;">
-<!--            <el-button type="text" class="button">立即购买</el-button>-->
+            <span style="font-weight: bolder;" v-html="product.productTitle"></span>
-            <el-button type="text" class="button" @click="handleClick(product.idProduct)">查看详情</el-button>
+          </el-col>
+          <el-col span="24">
+            <small v-html="product.productDescription"></small>
+          </el-col>
+          <el-col :span="24" style="text-align: center;">
+            <el-button type="text" class="button" @click="handleClick(product.idProduct)">了解更多</el-button>
           </el-col>
         </el-card>
       </el-col>

config/api.config.js

@@ -1,4 +1,4 @@
-import {NODE_ENV} from '../environment'
+import {NODE_ENV} from '@/environment'
 
 const apisMap = {
   development: {
@@ -8,8 +8,8 @@ const apisMap = {
     PROXY: '/proxy',
     SOCKET: 'http://localhost:3000/ws',
     GRAVATAR: '/proxy/static.rymcu.com/avatar',
-    VDITOR: 'https://static.rymcu.com/vditor@3.8.14/',
+    VDITOR: 'https://static.rymcu.com/vditor@3.9.8/',
-    VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'
+    VDITOR_CSS: 'https://static.rymcu.com/vditor@3.9.8/dist/css/content-theme'
   },
   test: {
     FE: 'https://rymcu.com',
@@ -18,8 +18,8 @@ const apisMap = {
     PROXY: 'https://static.rymcu.com/proxy',
     SOCKET: 'https://rymcu.com/wss',
     GRAVATAR: 'https://static.rymcu.com/avatar',
-    VDITOR: 'https://static.rymcu.com/vditor@3.8.14/',
+    VDITOR: 'https://static.rymcu.com/vditor@3.9.8/',
-    VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'
+    VDITOR_CSS: 'https://static.rymcu.com/vditor@3.9.8/dist/css/content-theme'
   },
   production: {
     FE: 'https://rymcu.com',
@@ -28,8 +28,8 @@ const apisMap = {
     PROXY: 'https://static.rymcu.com/proxy',
     SOCKET: 'https://rymcu.com/wss',
     GRAVATAR: 'https://static.rymcu.com/avatar',
-    VDITOR: 'https://static.rymcu.com/vditor@3.8.14/',
+    VDITOR: 'https://static.rymcu.com/vditor@3.9.8/',
-    VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'
+    VDITOR_CSS: 'https://static.rymcu.com/vditor@3.9.8/dist/css/content-theme'
   }
 }
 

nuxt.config.js

@@ -46,7 +46,7 @@ export default {
   ** Global CSS
   */
   css: [
-    'element-ui/lib/theme-chalk/index.css',
+    'element-ui/lib/theme-chalk/index.css'
   ],
   /*
   ** Plugins to load before mounting the App
@@ -72,7 +72,7 @@ export default {
     '@nuxtjs/axios',
     '@nuxtjs/proxy',
     '@nuxtjs/auth-next',
-    '@nuxtjs/device',
+    '@nuxtjs/device'
   ],
   auth: {
     redirect: {

package.json

@@ -27,7 +27,7 @@
     "raw-loader": "^4.0.2",
     "save-svg-as-png": "^1.4.17",
     "simple-icons": "^6.23.0",
-    "vditor": "^3.8.18",
+    "vditor": "^3.9.8",
     "vue-cropper": "^0.6.2",
     "vue-sse": "^2.5.2",
     "vuejs-avataaars": "^4.0.1"

pages/article/post/_article_id.vue

@@ -197,7 +197,7 @@
               // Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
             },
             theme: {
-              cdn: apiConfig.VDITOR_CSS
+              path: apiConfig.VDITOR_CSS
             }
           },
           upload: {
@@ -427,8 +427,11 @@
           height: 480,
           placeholder: '', //_ts.$t('inputContent', _ts.$store.state.locale)
           resize: false,
-          value: articleContent
+          value: ''
         });
+
+        let mark = _ts.contentEditor.html2md(articleContent);
+        _ts.contentEditor.setValue(mark);
       })
     }
   }

pages/product/_product_id.vue

@@ -8,6 +8,16 @@
               {{ product.productTitle }}
             </h1>
           </div>
+          <div style="margin: 1rem 0;">
+            <el-tag
+              style="margin-right: 0.5rem;"
+              v-for="tag in product.tags?.split(',') || []"
+              :key="tag"
+              size="small"
+              effect="plain">
+              # {{ tag }}
+            </el-tag>
+          </div>
           <div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="product.productContent"
                style="overflow: hidden;"></div>
         </div>