Initial commit of akmon project

components/aklist/aklist.uvue

@@ -0,0 +1,169 @@
+<template>
+  <supadb
+    :collection="table"
+    :field="field"
+    :filter="filter"
+    :orderby="order"
+    :page-size="pageSize"
+    :page-current="currentPage"
+    :loadtime="preload ? 'auto' : 'manual'"
+    v-slot="{ data, loading, error }"
+  >
+    <list-view :id="id" class="list" :bounces="false" :scroll-y="true" :custom-nested-scroll="true"
+      @scrolltolower="loadMore" associative-container="nested-scroll-view">
+      <list-item class="list-item" v-for="(item, idx) in (data as Array<UTSJSONObject>)" :key="item.getString(primaryKey)" type="10">
+        <slot name="item" :item="item" :index="idx">
+          <!-- 默认插槽内容：仿 long-list-page 展示 -->
+          <view class="list-item-icon">
+            <image class="list-item-icon-image" :src="item.getString('plugin_img_link')"></image>
+          </view>
+          <view class="list-item-fill">
+            <view class="flex-row">
+              <text class="title">{{item.getString('plugin_name')}}</text>
+            </view>
+            <view>
+              <text class="description-text">{{item.getString('plugin_intro')}}</text>
+            </view>
+            <text class="icon-star">{{convertToStarUnicode(item.getNumber('score'))}}</text>
+            <view class="tag-list">
+              <text class="tag-item" v-for="(tag, index2) in (item.get('tags') as Array<string> ?? [])" :key="index2">{{tag}}</text>
+            </view>
+            <view class="flex-row update-date">
+              <text class="update-date-text">更新日期</text>
+              <text class="update-date-value">{{item.getString('update_date')}}</text>
+              <text class="author">{{item.getString('author_name')}}</text>
+            </view>
+          </view>
+        </slot>
+      </list-item>
+      <list-item class="loading">
+        <slot name="loading">
+          <uni-loading :loading="loading" color="#999" :text="loadingText"></uni-loading>
+        </slot>
+      </list-item>
+    </list-view>
+    <view v-if="error" class="aklist-error">{{ error }}</view>
+  </supadb>
+</template>
+
+<script lang="uts">
+import supadb from '@/components/supadb/supadb.uvue';
+export default {
+  name: 'AkList',
+  components: { supadb },
+  props: {
+    table: { type: String, required: true },
+    id: { type: String, default: '' },
+    preload: { type: Boolean, default: true },
+    pageSize: { type: Number, default: 10 },
+    primaryKey: { type: String, default: 'id' },
+    filter: { type: Object, default: () => ({}) },
+    order: { type: String, default: '' },
+    field: { type: String, default: '*' }
+  },
+  data() {
+    return {
+      currentPage: 1
+    }
+  },
+  computed: {
+    loadingText(): string {
+      return '加载中...';
+    }
+  },
+  methods: {
+    loadMore() {
+      this.currentPage++;
+    },
+    convertToStarUnicode(score: number): string {
+      const fill_code = '\ue879';
+      const half_code = '\ue87a';
+      const null_code = '\ue87b';
+      const fillStarCount = parseInt((score / 10 % 10) + '');
+      const halfStarCount = score % 10 >= 5 ? 1 : 0;
+      const nullStarCount = 5 - fillStarCount - halfStarCount;
+      let result = '';
+      if (fillStarCount > 0) { result += fill_code.repeat(fillStarCount); }
+      if (halfStarCount > 0) { result += half_code.repeat(halfStarCount); }
+      if (nullStarCount > 0) { result += null_code.repeat(nullStarCount); }
+      return result;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.list {
+  flex: 1;
+  background-color: #ffffff;
+}
+.list-item {
+  flex-direction: row;
+  margin-top: 10px;
+  padding: 10px;
+}
+.list-item-icon {
+  position: relative;
+}
+.list-item-icon-image {
+  width: 80px;
+  height: 80px;
+}
+.list-item-fill {
+  flex: 1;
+  margin-left: 15px;
+}
+.description-text {
+  font-size: 13px;
+  color: #666;
+  line-height: 19px;
+}
+.icon-star {
+  font-family: "UtsStarIcons";
+  font-size: 16px;
+  font-style: normal;
+  color: #ffca3e;
+  letter-spacing: 3px;
+}
+.tag-list {
+  flex-direction: row;
+  margin-top: 5px;
+}
+.tag-item {
+  font-size: 12px;
+  background-color: #EFF9F0;
+  color: #639069;
+  border-radius: 20px;
+  margin-right: 5px;
+  padding: 2px 5px;
+}
+.update-date {
+  margin-top: 10px;
+}
+.update-date-text {
+  font-size: 12px;
+  color: #888888;
+}
+.update-date-value {
+  font-size: 12px;
+  color: #777777;
+  margin-left: 5px;
+}
+.author {
+  font-size: 12px;
+  color: #008000;
+  margin-left: auto;
+}
+.loading {
+  padding: 30px;
+  align-items: center;
+}
+.flex-row {
+  flex-direction: row;
+}
+.aklist-error {
+  color: red;
+  text-align: center;
+  padding: 10px;
+}
+</style>