u

code/allapp/allapp-rn/test.html

@@ -1,67 +1,82 @@
-import { useCallback } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import Sortable from 'react-native-sortables';
-
-const DATA = Array.from({ length: 4 }, (_, index) => `Item ${index + 1}`);
-
-export default function CustomHandleExample() {
-  const renderItem = useCallback(
-    ({ item }: { item: string }) => (
-      <View style={styles.card}>
-        <Text style={styles.text}>{item}</Text>
-        {/* Wraps the handle component */}
-        {/* highlight-next-line */}
-        <Sortable.Handle>
-          <View style={styles.handle}>
-            <Text style={styles.handleText}>::</Text>
-          </View>
-          {/* highlight-next-line */}
-        </Sortable.Handle>
-      </View>
-    ),
-    []
-  );
-
-  return (
-    <View style={styles.container}>
-      <Sortable.Grid
-        activeItemScale={1.05}
-        columns={1}
-        data={DATA}
-        overDrag='vertical'
-        renderItem={renderItem}
-        rowGap={10}
-        // highlight-next-line
-        customHandle // must be set to use a custom handle
-      />
-    </View>
-  );
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>空间状态演示</title>
+<style>
+body{margin:0;font-family:-apple-system;background:#fff;padding:20px;}
+.space{
+  background:#f8f8f8;
+  border-radius:12px;
+  padding:16px;
+  margin-bottom:12px;
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  border:2px solid transparent;
 }
+.space.selected{
+  border:2px solid #111;
+}
+.name{
+  font-weight:600;
+}
+.meta{font-size:12px;color:#666;margin-top:4px;}
+.tag{
+  font-size:10px;
+  padding:2px 6px;
+  border-radius:6px;
+  margin-left:6px;
+}
+.tag-default{
+  background:#e5e7eb;
+  color:#555;
+}
+.tag-current{
+  background:#111;
+  color:#fff;
+}
+.more{font-size:18px;color:#999;}
+</style>
+</head>
+<body>
 
-const styles = StyleSheet.create({
-  card: {
-    alignItems: 'center',
-    backgroundColor: '#2e8555',
-    borderRadius: 12,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    padding: 24
-  },
-  container: {
-    padding: 16
-  },
-  handle: {
-    backgroundColor: 'rgba(0,0,0,0.2)',
-    borderRadius: 5,
-    padding: 10
-  },
-  handleText: {
-    color: 'white',
-    fontWeight: 'bold'
-  },
-  text: {
-    color: 'white',
-    flex: 1,
-    fontWeight: 'bold'
-  }
-});
+<!-- 当前正在使用 -->
+<div class="space">
+  <div>
+    <div class="name">
+      工作空间
+      <span class="tag tag-current">当前</span>
+      <span class="tag tag-default">默认</span>
+    </div>
+    <div class="meta">张三 · 5人</div>
+  </div>
+  <div class="more">⋯</div>
+</div>
+
+<!-- 只是默认 -->
+<div class="space">
+  <div>
+    <div class="name">
+      家庭账本
+      <span class="tag tag-default">默认</span>
+    </div>
+    <div class="meta">张三 · 3人</div>
+  </div>
+  <div class="more">⋯</div>
+</div>
+
+<!-- 被选中但未进入 -->
+<div class="space selected">
+  <div>
+    <div class="name">
+      副业空间
+    </div>
+    <div class="meta">张三 · 2人</div>
+  </div>
+  <div class="more">⋯</div>
+</div>
+
+</body>
+</html>