init

FE-star · Jun 24, 2022 · a3ed6b6 · a3ed6b6
1 parent 0c228df
commit a3ed6b6
Show file tree

Hide file tree

Showing 20 changed files with 8,788 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/page-transformer/.eslintrc.cjs b/page-transformer/.eslintrc.cjs
@@ -0,0 +1,11 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  "root": true,
+  "extends": [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-prettier"
+  ]
+}
diff --git a/page-transformer/.gitignore b/page-transformer/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/page-transformer/.vscode/extensions.json b/page-transformer/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
diff --git a/page-transformer/README.md b/page-transformer/README.md
@@ -0,0 +1,37 @@
+# page-transformer
+
+低逻辑型页面生成
+
+```
+https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js
+```
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+npm run test:unit
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
diff --git a/page-transformer/index.html b/page-transformer/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js"></script>
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/page-transformer/package.json b/page-transformer/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "page-transformer",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 4173",
+    "test:unit": "vitest --environment jsdom",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "vite-plugin-externals": "^0.5.0",
+    "vue": "^3.2.36"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.1.0",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/test-utils": "^2.0.0",
+    "eslint": "^8.5.0",
+    "eslint-plugin-vue": "^9.0.0",
+    "jsdom": "^19.0.0",
+    "prettier": "^2.5.1",
+    "vite": "^2.9.9",
+    "vitest": "^0.13.0"
+  }
+}
diff --git a/page-transformer/public/favicon.ico b/page-transformer/public/favicon.ico
diff --git a/page-transformer/src/App.vue b/page-transformer/src/App.vue
@@ -0,0 +1,19 @@
+<script setup>
+  import Layout from './components/layout.vue'
+  import Grid from './components/grid.vue'
+</script>
+
+<template>
+  <Layout>
+    <template #default>
+      <Grid></Grid>
+    </template>
+  </Layout>
+</template>
+
+<style>
+  body, div {
+    margin: 0;
+    padding: 0;
+  }
+</style>
diff --git a/page-transformer/src/components/cards/normal.vue b/page-transformer/src/components/cards/normal.vue
@@ -0,0 +1,224 @@
+<style scope>
+.card-item {
+  position: relative;
+  float: left;
+  width: 372px;
+  height: 174px;
+  margin: 0 0 18px 18px;
+  overflow: hidden;
+  color: #333;
+  background-color: #f7f9fa;
+  border: 1px solid #f7f9fa;
+  -webkit-border-radius: 12px;
+     -moz-border-radius: 12px;
+          border-radius: 12px;
+  cursor: pointer;
+  -webkit-transition: all 0.5s;
+  -o-transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  transition: all 0.5s;
+}
+.card-item.hide {
+  display: none;
+}
+.card-item:hover {
+  background-color: #fff;
+  border-color: #ff915e;
+  -webkit-box-shadow: 0 8px 12px 0 rgba(255, 80, 0, 0.06);
+     -moz-box-shadow: 0 8px 12px 0 rgba(255, 80, 0, 0.06);
+          box-shadow: 0 8px 12px 0 rgba(255, 80, 0, 0.06);
+}
+.card-item .item-link {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  padding: 11px;
+}
+.card-item .img-wrapper {
+  position: absolute;
+  width: 150px;
+  height: 150px;
+  overflow: hidden;
+  background-color: rgba(27, 23, 67, 0.03);
+  -webkit-border-radius: 10px;
+     -moz-border-radius: 10px;
+          border-radius: 10px;
+}
+.card-item .img-wrapper img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  -webkit-border-radius: 10px;
+     -moz-border-radius: 10px;
+          border-radius: 10px;
+}
+.card-item .info-wrapper {
+  height: 116px;
+  margin-left: 162px;
+  overflow: hidden;
+}
+.card-item .info-wrapper .title {
+  display: inline-block;
+  max-height: 46px;
+  margin: 6px 0 2px 0;
+  overflow: hidden;
+  color: #333;
+  font-size: 16px;
+  line-height: 23px;
+}
+.card-item .info-wrapper .title img {
+  height: 16px;
+  margin-top: 3px;
+  margin-right: 6px;
+  vertical-align: top;
+}
+.card-item .info-wrapper .title:hover {
+  color: #ff5000;
+}
+.card-item .info-wrapper .tag-list {
+  height: 20px;
+  overflow: hidden;
+}
+.card-item .info-wrapper .tag-list .tag-item {
+  display: inline-block;
+  height: 20px;
+  margin-right: 6px;
+  padding: 0 4px;
+  color: #ff5000;
+  font-size: 12px;
+  line-height: 18px;
+  vertical-align: top;
+  border: 1px solid #ff5000;
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
+}
+.card-item .info-wrapper .tag-list .tag-item.graphic-tag {
+  padding: 0;
+  border: none;
+}
+.card-item .info-wrapper .tag-list .tag-item.graphic-tag span {
+  display: inline-block;
+  padding: 0 5px;
+  line-height: 20px;
+}
+.card-item .info-wrapper .tag-list .tag-item.graphic-tag .left {
+  -webkit-border-radius: 3px 0 0 3px;
+     -moz-border-radius: 3px 0 0 3px;
+          border-radius: 3px 0 0 3px;
+}
+.card-item .info-wrapper .tag-list .tag-item.graphic-tag .right {
+  -webkit-border-radius: 0 3px 3px 0;
+     -moz-border-radius: 0 3px 3px 0;
+          border-radius: 0 3px 3px 0;
+}
+.card-item .info-wrapper .tag-list img {
+  height: 20px;
+  vertical-align: top;
+}
+.card-item .price-wrapper {
+  margin-left: 162px;
+  color: #ff5000;
+}
+.card-item .price-wrapper .price-value {
+  display: inline-block;
+  font-size: 22px;
+  line-height: 22px;
+}
+.card-item .price-wrapper .price-value em {
+  margin-right: 4px;
+  font-size: 14px;
+  font-family: "Microsoft Yahei";
+  vertical-align: middle;
+}
+.card-item .price-wrapper .price-desc {
+  margin-left: 2px;
+  font-size: 12px;
+  vertical-align: text-bottom;
+}
+.card-container .skeleton-i {
+  float: left;
+  height: 174px;
+  margin-bottom: 18px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.card-container .skeleton-i .skeleton-img {
+  float: left;
+  width: 40%;
+  height: 100%;
+  background: #ededed;
+}
+.card-container .skeleton-i .skeleton-i-right {
+  float: left;
+  width: 56%;
+  height: 100%;
+  margin-top: 1.2%;
+  margin-left: 3%;
+  overflow: hidden;
+}
+.card-container .skeleton-i .skeleton-i-right .skeleton-text {
+  width: 100%;
+  height: 10%;
+  margin-bottom: 7%;
+  background: #ededed;
+}
+.card-container .skeleton-i .skeleton-i-right .skeleton-text.last {
+  width: 45%;
+  margin-top: 20%;
+}
+</style>
+
+<script>
+import { add } from '../../utils/lazy'
+
+export default {
+    props: {
+        data: Object
+    },
+    computed: {
+        url: function () {
+            return `//item.taobao.com/item.htm?id=${this.data.nid}`
+        }
+    },
+    directives: {
+        // Custom Directive(自定义指令)：https://staging-cn.vuejs.org/guide/reusability/custom-directives.html
+        src: {
+            // 在绑定元素的 attribute 前或事件监听器应用前调用
+            created: (el) => {
+                // 设置默认图片
+                el.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+            },
+            // 在绑定元素的父组件及他自己的所有子节点都挂载完成后调用
+            mounted: (el, binding) => {
+                // 挂载完成立刻加载图片
+                add(el, binding.value)
+            }
+        }
+    }
+}
+</script>
+
+<template>
+    <div class="card-item" role="listitem">
+        <a :href="url"
+            target="_blank" class="item-link">
+            <div class="img-wrapper">
+                <img v-src="data.pict_url"
+                    aria-labelledby="rc-item-tl-0">
+            </div>
+            <div class="info-wrapper">
+                <div class="title">
+                    {{data.title}}</div>
+                <div class="tag-list" v-if="data.icons">
+                    <div v-for="item in data.icons" class="tag-item" :style="{color: item.font_color, borderColor: item.border_color, background: item.bg_color}">
+                        {{ item.text }}
+                    </div>
+                </div>
+            </div>
+            <div class="price-wrapper">
+                <span class="price-value"><em>¥</em>125</span>
+            </div>
+        </a>
+    </div>
+</template>