├── .browserslistrc
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    └── App.vue
├── babel.config.js
├── release.sh
├── README.md
├── .gitignore
├── jsconfig.json
├── package.json
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hanwencc/car-list/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hanwencc/car-list/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/release.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env sh
 2 | 
 3 | # 确保脚本抛出遇到的错误
 4 | set -e
 5 | 
 6 | # 生成静态文件
 7 | npm run build
 8 | 
 9 | 
10 | # 进入生成的文件夹
11 | cd dist
12 | 
13 | git init -b dist
14 | git add -A
15 | git commit -m "deploy | $(date +'%Y-%m-%d %H:%M:%S')"
16 | 
17 | 
18 | git push -f git@github.com:Hanwencc/car-list.git dist:dist


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # choose-car
 2 | 
 3 | ## 使用ui
 4 | ```js
 5 | https://opentiny.design/
 6 | ```
 7 | 
 8 | ## 启动
 9 | ```js
10 | npm run serve
11 | ```
12 | 
13 | ## 编译
14 | ```js
15 | npm run build
16 | ```
17 | 
18 | ## 说明
19 | ```
20 | 编译后的默认路径为 '/list'
21 | 如需修改路径
22 | 请求改 vue.config.js
23 | publicPath: "/list"
24 | ```
25 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | 
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | dist.zip
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | /dist
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "choose-car",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "@opentiny/vue": "^2.13.0",
11 |     "axios": "^1.6.5",
12 |     "core-js": "^3.8.3",
13 |     "vue": "^2.6.14"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~5.0.0",
17 |     "@vue/cli-service": "~5.0.0",
18 |     "vue-template-compiler": "^2.6.14"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require("@vue/cli-service");
 2 | module.exports = defineConfig({
 3 |   transpileDependencies: true,
 4 |   //打包后不生成.map文件
 5 |   productionSourceMap: false,
 6 |   publicPath: "/list",
 7 |   //配置请求proxy
 8 |   devServer: {
 9 |     proxy: {
10 |       "/carpage": {
11 |         target: "https://share.xyhelper.com.cn",
12 |         changeOrigin: true,
13 |         ws: true,
14 |         autoRewrite: true,
15 |         cookieDomainRewrite: true,
16 |       },
17 |     },
18 |   },
19 | });
20 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong
13 |         >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
14 |         properly without JavaScript enabled. Please enable it to
15 |         continue.</strong
16 |       >
17 |     </noscript>
18 |     <div id="app"></div>
19 |     <!-- built files will be auto injected -->
20 |   </body>
21 |   <!-- <script src="./js/jquery-3.5.1.min.js"></script> -->
22 |   <!-- <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
23 |   <script src="./js/popup.js"></script> -->
24 | </html>
25 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <tiny-layout class="tiny-layout-responsive-layout">
  4 |       <tiny-row :noSpace="true">
  5 |         <tiny-col :sm="0" :md="2" :lg="3" :xl="4">
  6 |           <div></div>
  7 |         </tiny-col>
  8 |         <tiny-col :sm="12" :md="8" :lg="6" :xl="4">
  9 |           <div v-html="notice"></div>
 10 |           <tiny-grid
 11 |             :loading="loading"
 12 |             :fetch-data="fetchData"
 13 |             seq-serial
 14 |             :pager="pagerConfig"
 15 |             :fit="true"
 16 |             size="medium"
 17 |             :auto-resize="true"
 18 |           >
 19 |             <tiny-grid-column
 20 |               v-if="isLargeScreen"
 21 |               type="index"
 22 |               width="35"
 23 |             ></tiny-grid-column>
 24 |             <tiny-grid-column
 25 |               v-if="isLargeScreen"
 26 |               field="carID"
 27 |               title="车队名称"
 28 |               align="center"
 29 |             ></tiny-grid-column>
 30 |             <tiny-grid-column
 31 |               v-if="!isLargeScreen"
 32 |               field="carID"
 33 |               title="车队名称"
 34 |               align="center"
 35 |               width="70"
 36 |             ></tiny-grid-column>
 37 | 
 38 |             <tiny-grid-column
 39 |               field="status"
 40 |               width="auto"
 41 |               title="状态"
 42 |               align="center"
 43 |             >
 44 |               <template #default="data">
 45 |                 <img
 46 |                   class="status-img"
 47 |                   @click="goCar(data.row)"
 48 |                   alt="Endpoint Badge"
 49 |                   :src="`https://img.closeai.biz/endpoint?url=${data.row.encodeUrl}`"
 50 |                 />
 51 |               </template>
 52 |             </tiny-grid-column>
 53 |             <tiny-grid-column
 54 |               v-if="isLargeScreen"
 55 |               field="carID"
 56 |               title="操作"
 57 |               align="center"
 58 |             >
 59 |               <template #default="data">
 60 |                 <tiny-button
 61 |                   type="primary"
 62 |                   :icon="TinyIconEditorRedo"
 63 |                   @click="goCar(data.row)"
 64 |                 >
 65 |                   访问
 66 |                 </tiny-button>
 67 |               </template>
 68 |             </tiny-grid-column>
 69 |             <tiny-grid-column
 70 |               v-if="!isLargeScreen"
 71 |               field="carID"
 72 |               title="操作"
 73 |               align="center"
 74 |               width="60"
 75 |             >
 76 |               <template #default="data">
 77 |                 <tiny-button
 78 |                   type="primary"
 79 |                   :icon="TinyIconEditorRedo"
 80 |                   @click="goCar(data.row)"
 81 |                 ></tiny-button>
 82 |               </template>
 83 |             </tiny-grid-column>
 84 |           </tiny-grid>
 85 |         </tiny-col>
 86 |         <tiny-col :sm="0" :md="2" :lg="3" :xl="4">
 87 |           <div></div>
 88 |         </tiny-col>
 89 |       </tiny-row>
 90 |     </tiny-layout>
 91 |   </div>
 92 | </template>
 93 | 
 94 | <script>
 95 | import axios from "axios";
 96 | import {
 97 |   Grid as TinyGrid,
 98 |   GridColumn as TinyGridColumn,
 99 |   Layout as TinyLayout,
100 |   Row as TinyRow,
101 |   Col as TinyCol,
102 |   Button as TinyButton,
103 | } from "@opentiny/vue";
104 | import { IconEditorRedo } from "@opentiny/vue-icon";
105 | export default {
106 |   name: "App",
107 |   components: {
108 |     TinyGrid,
109 |     TinyGridColumn,
110 |     TinyLayout,
111 |     TinyRow,
112 |     TinyCol,
113 |     TinyButton,
114 |   },
115 |   data() {
116 |     return {
117 |       loading: false,
118 |       TinyIconEditorRedo: IconEditorRedo(),
119 |       pagerConfig: {
120 |         attrs: {
121 |           currentPage: 1,
122 |           pageSize: 10,
123 |           pageSizes: [10, 20, 50],
124 |           total: 0,
125 |           align: "right", // 可选值：['left', 'center', 'right']
126 |           layout: "total, prev, pager, next, sizes",
127 |         },
128 |       },
129 |       fetchData: {
130 |         api: this.init,
131 |       },
132 |       notice: "",
133 |       windowWidth: window.innerWidth,
134 |       baseUrl: window.location.origin,
135 |       // baseUrl: "https://share.xyhelper.com.cn",
136 |     };
137 |   },
138 |   computed: {
139 |     isLargeScreen() {
140 |       return this.windowWidth > 992;
141 |     },
142 |   },
143 |   watch: {},
144 |   beforeCreate() {},
145 |   created() {
146 |     window.addEventListener("resize", this.handleResize);
147 |   },
148 |   beforeMount() {},
149 |   mounted() {
150 |     // this.init();
151 |   },
152 |   beforeUpdate() {},
153 |   updated() {},
154 |   methods: {
155 |     init({ page }) {
156 |       this.loading = true;
157 |       const { currentPage, pageSize } = page;
158 |       return new Promise((resolve, reject) => {
159 |         axios
160 |           .request({
161 |             method: "post",
162 |             maxBodyLength: Infinity,
163 |             url: "/carpage",
164 |             headers: {
165 |               "Content-Type": "application/json",
166 |             },
167 |             data: {
168 |               page: currentPage,
169 |               size: pageSize,
170 |               sort: "desc",
171 |               order: "sort",
172 |             },
173 |           })
174 |           .then((response) => {
175 |             console.log(response.data);
176 |             this.notice = response.data.notice;
177 |             let listData = response.data.data.list.map((item) => {
178 |               return {
179 |                 ...item,
180 |                 encodeUrl: encodeURIComponent(
181 |                   `${this.baseUrl}/endpoint?carid=${encodeURI(item["carID"])}`
182 |                 ),
183 |               };
184 |             });
185 |             resolve({
186 |               result: listData,
187 |               page: { total: response.data.data.pagination.total },
188 |             });
189 |           })
190 |           .catch((error) => {
191 |             console.log(error);
192 |             reject(error);
193 |           })
194 |           .finally(() => {
195 |             this.loading = false;
196 |           });
197 |       });
198 |     },
199 |     goCar(row) {
200 |       window.location.href = `${
201 |         window.location.origin
202 |       }/auth/login?carid=${encodeURI(row.carID)}`;
203 |     },
204 |     handleResize() {
205 |       this.windowWidth = window.innerWidth;
206 |     },
207 |   },
208 |   beforeDestroy() {},
209 |   destroyed() {},
210 | };
211 | </script>
212 | 
213 | <style>
214 | #app {
215 |   padding: 0;
216 |   margin: 0;
217 | }
218 | .tools {
219 |   display: flex;
220 |   flex-direction: row;
221 |   justify-content: space-between;
222 |   align-items: center;
223 | }
224 | .status-img {
225 |   cursor: pointer;
226 | }
227 | .desktop {
228 |   display: none;
229 | }
230 | .mobile {
231 |   display: none;
232 | }
233 | @media (min-width: 800px) {
234 |   .desktop {
235 |     display: block;
236 |   }
237 | }
238 | @media (max-width: 799px) {
239 |   .mobile {
240 |     display: block;
241 |   }
242 | }
243 | </style>
244 | 


--------------------------------------------------------------------------------